/* ============================================================
   CARACTER 鈥?杞︽牸
   black canvas 路 hairlines 路 one ink-green "available" signal
   ============================================================ */

:root{
  /* canvas / surface */
  --ink-000:#000000;
  --ink-050:#0B0C0D;
  --ink-100:#17191B;
  --ink-200:#2A2D30;

  /* text */
  --paper-000:#F4F4F1;
  --paper-100:#D6D8D6;
  --paper-200:#9A9EA1;
  --paper-300:#6A6E71;

  /* signal 鈥?racing red. the one accent */
  --signal:#C8102E;
  --signal-bright:#E8384F;
  --signal-deep:#5C0A18;

  /* demo form card 鈥?the one deliberate warm exception */
  --demo-bg:#F2EBD3;
  --demo-ink:#1A1710;
  --demo-muted:#6E6650;
  --demo-rule:rgba(26,23,16,.14);
  --demo-rule-strong:rgba(26,23,16,.28);

  /* type 鈥?all sans */
  --font-display:"Archivo","Noto Sans SC",sans-serif;
  --font-sans:"Noto Sans SC",sans-serif;
  --font-mono:"IBM Plex Mono",monospace;

  /* layout */
  --max:1360px;
  --margin:64px;
  --gutter:32px;
  --section-y:160px;
}

*{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ink-000);
  color:var(--paper-100);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.75;
  font-weight:400;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2{margin:0;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;}

:focus-visible{
  outline:1px solid var(--signal-bright);
  outline-offset:3px;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--paper-000);
  color:var(--ink-000);
  padding:12px 16px;
  z-index:100;
}
.skip-link:focus{left:16px;top:16px;}

/* ---------- layout primitives ---------- */

.container{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--margin);
}

.section{
  padding-block:var(--section-y);
  border-top:1px solid var(--ink-100);
}

main section[id],
#join{scroll-margin-top:88px;}

.grid-12{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gutter);
}

.col-side{grid-column:1 / 4;}
.col-main{grid-column:4 / 13;}

.label{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  line-height:1.4;
  letter-spacing:.12em;
  color:var(--paper-300);
}

.label-icon{
  width:28px;
  height:28px;
  flex:none;
  display:block;
}

.mono{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}

/* ---------- type scale ---------- */

.display-2{
  font-family:var(--font-sans);
  font-weight:700;
  font-size:clamp(1.6rem,2.4vw,2.15rem);
  line-height:1.35;
  letter-spacing:.02em;
  color:var(--paper-000);
  margin-bottom:28px;
}

.statement-close{
  margin-top:clamp(40px,5vw,64px);
  font-size:clamp(1.15rem,1.8vw,1.5rem);
  line-height:1.7;
  color:var(--paper-100);
  letter-spacing:.02em;
}

/* ---------- topbar (sticky) ---------- */

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:transparent;
}

.topbar::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,0));
  opacity:0;
  transition:opacity .3s ease;
}
html.is-scrolled .topbar::after{opacity:1;}

.topbar-inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding-block:22px;
}

.brand{
  display:flex;
  align-items:center;
}

.brand-logo{
  display:block;
  height:30px;
  width:auto;
  opacity:0;
  transform:scale(1.6);
  transform-origin:left center;
  pointer-events:none;
  transition:opacity .26s ease, transform .42s cubic-bezier(.22,.61,.36,1);
}
html.is-docked .brand-logo{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
}

.nav{
  position:relative;
  z-index:50;
  display:flex;
  align-items:center;
  gap:32px;
  font-size:14px;
  color:var(--paper-000);
}
.nav > a,
.nav-trigger{
  padding-block:4px;
  transition:color .18s ease;
}
.nav > a:hover,
.nav-tools:hover .nav-trigger,
.nav-tools:focus-within .nav-trigger,
.nav-tools.is-open .nav-trigger{color:var(--paper-000);}

.nav-tools{position:relative;}

.nav-trigger{
  background:none;
  border:0;
  padding:4px 0;
  cursor:pointer;
  letter-spacing:inherit;
}

.nav-menu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(-4px);
  padding-top:14px;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-tools:hover .nav-menu,
.nav-tools:focus-within .nav-menu,
.nav-tools.is-open .nav-menu{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

.nav-menu-panel{
  min-width:270px;
  background:var(--ink-050);
  border:1px solid var(--ink-200);
}

.menu-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 18px;
  font-size:14px;
  color:var(--paper-100);
  transition:background .18s ease;
}
.menu-item:hover{background:var(--ink-100);}
.menu-label{white-space:nowrap;}

/* ---------- hero ---------- */

.hero{padding:0;}

.hero .container{
  display:flex;
  flex-direction:column;
  min-height:calc(100svh - var(--topbar-h,70px));
}

.hero-lockup{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.hero-logos{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.logo-sticky{
  width:min(86vw,820px);
}

.logo-morph{
  display:block;
  width:100%;
  height:auto;
}

.logo-cn{
  width:clamp(130px,30vw,400px);
  margin-top:clamp(12px,1.6vw,24px);
}
.logo-cn img{
  display:block;
  width:100%;
  height:auto;
}

/* do not animate the topbar logo on the very first paint */
html:not(.is-init) .brand-logo{transition:none;}

.hero-slogans{
  margin-top:clamp(22px,3vw,40px);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.hero-foot{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:clamp(18px,2.6vh,36px) clamp(24px,4vh,52px);
}

.hero-title-en{
  font-family:var(--font-display);
  font-stretch:118%;
  font-weight:500;
  font-size:clamp(1rem,1.5vw,1.3rem);
  letter-spacing:.14em;
  color:var(--paper-100);
}

.hero-title-sub{
  font-family:var(--font-sans);
  font-weight:400;
  font-size:clamp(1.05rem,1.7vw,1.45rem);
  line-height:1.5;
  letter-spacing:.06em;
  color:var(--paper-000);
}

.hero-lead{
  font-size:clamp(1.05rem,1.2vw,1.15rem);
  line-height:1.7;
  color:var(--paper-100);
  max-width:56ch;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  flex:none;
}

/* buttons */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 26px;
  font-size:15px;
  letter-spacing:.02em;
  border:1px solid var(--ink-200);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary{
  background:transparent;
  color:var(--signal-bright);
  border-color:var(--signal);
}
.btn-primary:hover{
  background:var(--signal);
  color:#FFFFFF;
  border-color:var(--signal);
}
.btn-ghost{
  border-color:var(--paper-000);
  color:var(--paper-000);
}
.btn-ghost:hover{
  border-color:var(--paper-000);
  color:var(--paper-000);
}

/* hero entrance 鈥?logos centered first, then rise while slogans enter */

.hero.is-enter .hero-logos{animation:enter-fade .5s ease both;}
.hero.is-enter .hero-lockup{animation:lockup-in 1.6s cubic-bezier(.4,0,.2,1) both;}
.hero.is-enter .hero-slogans{animation:enter-fade .6s ease both;animation-delay:.85s;}
.hero.is-enter .hero-foot{animation:enter-fade .6s ease both;animation-delay:1.15s;}

@keyframes lockup-in{
  0%{transform:translateY(var(--logo-shift,40px));}
  42%{transform:translateY(var(--logo-shift,40px));}
  100%{transform:translateY(0);}
}
@keyframes enter-fade{
  from{opacity:0;}
  to{opacity:1;}
}

/* ---------- 02 why ---------- */

.statement .label{margin-bottom:26px;}

.statement-title{
  font-family:var(--font-sans);
  font-weight:700;
  font-size:clamp(1.7rem,2.6vw,2.3rem);
  line-height:1.3;
  letter-spacing:.02em;
  color:var(--paper-000);
  margin-bottom:clamp(40px,5vw,64px);
}

.contrast{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,80px);
  padding-top:36px;
  border-top:1px solid var(--ink-100);
}

.contrast-k{
  font-size:13px;
  letter-spacing:.1em;
  color:var(--paper-300);
  margin-bottom:16px;
}
.contrast-v{
  font-size:clamp(1.2rem,1.9vw,1.7rem);
  line-height:1.55;
  letter-spacing:.03em;
  color:var(--paper-000);
  font-weight:500;
}

.creed{
  margin-top:clamp(56px,7vw,96px);
  border-top:1px solid var(--ink-100);
}
.creed li{
  font-size:clamp(1.8rem,4.4vw,3.5rem);
  line-height:1.2;
  letter-spacing:.05em;
  font-weight:700;
  color:var(--paper-000);
  padding-block:clamp(16px,2.2vw,28px);
  border-bottom:1px solid var(--ink-100);
}

/* ---------- 03 杞︽牸 / demo ---------- */

.idcard-grid{
  margin-top:clamp(36px,4.5vw,60px);
  align-items:start;
}

.col-demo{grid-column:1 / 6;}
.col-explain{grid-column:7 / 13;}

.demo-card{
  background:var(--demo-bg);
  color:var(--demo-ink);
  border-radius:18px;
  padding:clamp(24px,3vw,38px);
}

.demo-badge{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--demo-muted);
  border:1px solid var(--demo-rule-strong);
  border-radius:999px;
  padding:3px 11px;
}

.demo-label{
  display:block;
  margin-top:26px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--demo-muted);
}

.demo-model{margin-top:16px;}
.demo-make{
  display:block;
  font-family:var(--font-sans);
  font-weight:700;
  font-size:clamp(1.5rem,2.4vw,2rem);
  line-height:1.1;
  letter-spacing:.02em;
}
.demo-trim{
  display:block;
  margin-top:6px;
  font-family:var(--font-mono);
  font-size:1rem;
  letter-spacing:.1em;
  color:var(--demo-muted);
}

.demo-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin-top:20px;
  font-family:var(--font-mono);
  font-size:14px;
  color:var(--demo-ink);
}

.demo-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px;
}
.demo-tags li{
  font-size:13px;
  letter-spacing:.04em;
  padding:4px 13px;
  border:1px solid var(--demo-rule-strong);
  border-radius:999px;
  color:var(--demo-ink);
}

.demo-block{
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid var(--demo-rule);
}
.demo-block-label{
  display:block;
  margin-bottom:10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--demo-muted);
}
.demo-block p{
  font-size:14px;
  line-height:1.8;
  color:var(--demo-ink);
}

.explain-list{border-top:1px solid var(--ink-100);}
.explain-list li{
  padding-block:22px;
  border-bottom:1px solid var(--ink-100);
}
.explain-k{
  display:block;
  margin-bottom:6px;
  font-size:14px;
  letter-spacing:.08em;
  color:var(--paper-000);
}
.explain-v{
  display:block;
  font-size:15px;
  color:var(--paper-200);
}

/* ---------- 04 timeline ---------- */

.timeline{margin-top:6px;}
.timeline li{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:26px;
  padding:20px 24px;
  border:1px solid var(--ink-200);
}
.timeline li + li{margin-top:46px;}
.timeline li + li::before{
  content:"鈫?;
  position:absolute;
  top:-40px;
  left:24px;
  font-size:16px;
  line-height:1;
  color:var(--paper-300);
}
.tl-year{
  font-family:var(--font-mono);
  font-size:15px;
  letter-spacing:.06em;
  color:var(--paper-000);
  flex:none;
  min-width:64px;
}
.tl-text{
  font-size:15px;
  color:var(--paper-100);
}

/* ---------- 05 character ---------- */

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.tags li{
  font-size:15px;
  letter-spacing:.06em;
  color:var(--paper-100);
  border:1px solid var(--ink-200);
  padding:11px 22px;
  transition:border-color .18s ease, color .18s ease;
}
.tags li:hover{
  border-color:var(--paper-000);
  color:var(--paper-000);
}

/* ---------- 06 vision ---------- */

.vision .label{margin-bottom:26px;}

.vision-title{
  font-family:var(--font-sans);
  font-weight:700;
  font-size:clamp(1.8rem,3.6vw,3rem);
  line-height:1.25;
  letter-spacing:.03em;
  color:var(--paper-000);
}

.vision-lead{
  margin-top:clamp(28px,3.4vw,44px);
  font-size:clamp(1.15rem,1.8vw,1.5rem);
  line-height:1.7;
  letter-spacing:.02em;
  color:var(--paper-100);
  max-width:30ch;
}

.vision-body{
  margin-top:20px;
  font-size:16px;
  line-height:1.85;
  color:var(--paper-200);
  max-width:46ch;
}

.vision-close{
  margin-top:clamp(44px,5.5vw,72px);
  font-size:clamp(1.3rem,2.4vw,2rem);
  font-weight:700;
  line-height:1.5;
  letter-spacing:.02em;
  color:var(--paper-000);
}

/* ---------- 07 platforms / join ---------- */

.platforms{
  border-top:1px solid var(--ink-100);
}

.platform{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:20px;
  border-bottom:1px solid var(--ink-100);
}

.platform-name{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:16px;
  color:var(--paper-100);
}

.app-icon{
  width:24px;
  height:24px;
  filter:invert(1);
  flex:none;
}

.platform-status{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--signal-bright);
  white-space:nowrap;
}

.join{
  display:flex;
  align-items:center;
  gap:32px;
  margin-top:clamp(44px,5vw,72px);
  flex-wrap:wrap;
}

.qr-frame{
  display:inline-grid;
  place-items:center;
  padding:12px;
  border:1px solid var(--ink-200);
  background:var(--ink-050);
  flex:none;
}
.qr-frame img{
  display:block;
  width:180px;
  height:180px;
}

.join-copy{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.join-title{
  font-size:clamp(1.2rem,1.8vw,1.5rem);
  font-weight:700;
  letter-spacing:.04em;
  color:var(--paper-000);
  margin-bottom:6px;
}
.join-note{
  font-size:15px;
  line-height:1.7;
  color:var(--paper-100);
}
.join-note-muted{color:var(--paper-200);}

/* ---------- status ---------- */

.status{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:13px;
  letter-spacing:.02em;
  white-space:nowrap;
}
.dot{
  width:7px;
  height:7px;
  border-radius:50%;
  display:inline-block;
}
.status-live{color:var(--signal-bright);}
.status-live .dot{
  background:var(--signal-bright);
  box-shadow:0 0 0 3px rgba(232,56,79,.18);
}

/* ---------- footer ---------- */

.footer{
  border-top:1px solid var(--ink-100);
}

.footer-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding-block:56px;
  text-align:center;
}

.footer-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.footer-logo{
  display:block;
  height:20px;
  width:auto;
  opacity:.8;
}

.footer-line{
  font-family:var(--font-display);
  font-stretch:118%;
  font-size:13px;
  letter-spacing:.12em;
  color:var(--paper-300);
}

.footer-cn-logo{
  display:block;
  height:22px;
  width:auto;
  opacity:.9;
}

.footer-meta{
  font-size:13px;
  color:var(--paper-300);
}

/* ---------- responsive ---------- */

@media (max-width:1024px){
  :root{
    --margin:40px;
    --gutter:24px;
    --section-y:112px;
  }
}

@media (max-width:760px){
  :root{
    --margin:20px;
    --gutter:16px;
    --section-y:72px;
  }

  /* topbar stays on ONE line */
  .topbar-inner{
    gap:16px;
    padding-block:16px;
  }
  .brand-logo{height:22px;}
  .nav{gap:20px;font-size:14px;}
  .nav > a,
  .nav-trigger{padding-block:6px;}

  .nav-menu{
    left:auto;
    right:0;
    transform:translateY(-4px);
  }
  .nav-tools:hover .nav-menu,
  .nav-tools:focus-within .nav-menu,
  .nav-tools.is-open .nav-menu{transform:translateY(0);}
  .nav-menu-panel{min-width:250px;}
  .menu-item{padding:16px 18px;}

  .label-icon{width:24px;height:24px;}

  .grid-12{grid-template-columns:1fr;gap:0;}
  .col-side,.col-main,.col-demo,.col-explain{grid-column:1 / -1;}
  .col-side{margin-bottom:16px;}

  .hero{padding:0;}
  .hero .container{min-height:calc(100svh - var(--topbar-h,64px));}
  .logo-sticky{width:min(84vw,420px);}
  .logo-cn{width:clamp(110px,32vw,170px);margin-top:14px;}
  .hero-slogans{margin-top:22px;gap:8px;}
  .hero-title-en{letter-spacing:.12em;}
  .hero-foot{flex-direction:column;align-items:center;gap:16px;text-align:center;padding-block:16px 26px;}
  .hero-lead{max-width:100%;text-align:center;}
  .hero-actions{justify-content:center;}

  .display-2{margin-bottom:22px;}

  .contrast{
    grid-template-columns:1fr;
    gap:28px;
  }

  .creed li{font-size:clamp(1.5rem,7vw,2.2rem);}

  .idcard-grid{margin-top:28px;}
  .demo-card{margin-bottom:36px;}

  .timeline li{padding:16px 18px;gap:18px;}
  .timeline li + li{margin-top:40px;}
  .timeline li + li::before{left:18px;top:-36px;}

  .join{
    flex-direction:column;
    align-items:flex-start;
    gap:22px;
    margin-top:36px;
  }
  .qr-frame img{width:160px;height:160px;}

  .platform{flex-direction:column;align-items:flex-start;gap:8px;}

  .footer-inner{
    flex-direction:column;
    align-items:center;
    gap:22px;
  }
}

@media (max-width:380px){
  .nav{gap:16px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .hero-lockup,
  .hero-logos,
  .hero-slogans,
  .hero-foot,
  .logo-morph,
  .brand-logo{animation:none;transition:none;}
  .topbar::after,
  .nav-menu,
  .menu-item,
  .nav > a,
  .nav-trigger,
  .btn,
  .tags li{transition:none;}
}

/* ---------- page background (generative gradient) ---------- */

.site-bg{
  position:fixed;
  inset:0;
  z-index:-2;
  overflow:hidden;
  pointer-events:none;
  background:#0D0D0D;
}

.site-scrim{
  position:fixed;
  inset:0;
  z-index:-1;
  background:#000;
  opacity:.38;
  pointer-events:none;
}