/* self-hosted Latin fonts (China-reliable, no external CDN); CJK uses system fonts */
  @font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/space-grotesk-400.woff2") format("woff2")}
  @font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/space-grotesk-500.woff2") format("woff2")}
  @font-face{font-family:"Space Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/space-grotesk-600.woff2") format("woff2")}
  @font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/space-grotesk-700.woff2") format("woff2")}
  @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-400.woff2") format("woff2")}
  @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2")}
  :root{
    --paper:#E7EBEC;      /* cool drafting paper */
    --paper-2:#EDF0F1;
    --ink:#16181D;        /* blue-black ink */
    --ink-soft:#4A5157;
    --grid:#CBD2D4;       /* hairline graph grid */
    --grid-strong:#B4BEC1;
    --red:#E5341C;        /* redline / revision mark */
    --sans:"Space Grotesk",system-ui,sans-serif;
    --cjk:"Space Grotesk","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Noto Sans SC",system-ui,sans-serif;
    --mono:"IBM Plex Mono","PingFang SC","Microsoft YaHei",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    --gap:clamp(16px,4vw,40px);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    line-height:1.35;
    overflow-x:hidden;
  }
  html[data-lang="zh"] body{font-family:var(--cjk)}
  ::selection{background:var(--red);color:var(--paper)}

  /* ---- graph-paper grid, structural not decorative ---- */
  .grid-bg{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    background-image:
      linear-gradient(var(--grid) 1px,transparent 1px),
      linear-gradient(90deg,var(--grid) 1px,transparent 1px);
    background-size:36px 36px;
    opacity:0;
  }
  .grid-bg::after{ /* heavier 5-square major lines */
    content:"";position:absolute;inset:0;
    background-image:
      linear-gradient(var(--grid-strong) 1px,transparent 1px),
      linear-gradient(90deg,var(--grid-strong) 1px,transparent 1px);
    background-size:180px 180px;
    opacity:.55;
  }

  /* ---- corner registration / crop marks ---- */
  .reg{position:fixed;z-index:2;width:26px;height:26px;pointer-events:none;opacity:0}
  .reg::before,.reg::after{content:"";position:absolute;background:var(--ink)}
  .reg::before{width:26px;height:1px;top:12px}
  .reg::after{height:26px;width:1px;left:12px}
  .reg.tl{top:22px;left:22px}
  .reg.tr{top:22px;right:22px}
  .reg.bl{bottom:22px;left:22px}
  .reg.br{bottom:22px;right:22px}


  main{position:relative;z-index:1}

  /* ================= HERO ================= */
  .hero{
    min-height:100svh;position:relative;
    display:flex;flex-direction:column;justify-content:center;
    padding:0 clamp(28px,7vw,120px);
  }
  .hero .sig{
    font-family:var(--mono);font-size:12px;color:var(--red);
    display:flex;gap:10px;align-items:center;margin-bottom:26px;opacity:0;
  }
  .hero .sig .dot{width:7px;height:7px;background:var(--red);border-radius:50%}
  .hero h1{
    font-weight:600;letter-spacing:-.02em;line-height:1.02;
    font-size:clamp(38px,7.4vw,104px);
    max-width:15ch;
  }
  html[data-lang="zh"] .hero h1{letter-spacing:.01em;max-width:13ch;font-weight:700}
  .hero h1 .line{display:block;overflow:hidden}
  .hero h1 .line span{display:block;will-change:transform}
  .hero p.sub{
    margin-top:28px;max-width:52ch;
    font-size:clamp(15px,1.5vw,19px);color:var(--ink-soft);
    line-height:1.55;opacity:0;
  }
  html[data-lang="zh"] .hero p.sub{max-width:34ch;line-height:1.8}
  .hero .scrollhint{
    margin-top:44px;font-family:var(--mono);font-size:11.5px;
    color:var(--ink-soft);display:flex;gap:9px;align-items:center;opacity:0;
  }
  .hero .scrollhint .ln{width:44px;height:1px;background:var(--ink-soft);position:relative;overflow:hidden}
  .hero .scrollhint .ln::after{content:"";position:absolute;inset:0;background:var(--red);
    transform:translateX(-100%);animation:sweep 2.6s cubic-bezier(.7,0,.3,1) infinite}
  @keyframes sweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

  /* ---- title block cartouche (real drafting furniture) ---- */
  .titleblock{
    position:absolute;right:clamp(28px,7vw,120px);bottom:clamp(30px,6vh,60px);
    border:1px solid var(--ink);font-family:var(--mono);font-size:11px;
    color:var(--ink);background:var(--paper);min-width:224px;opacity:0;
  }
  .titleblock .row{display:flex;border-bottom:1px solid var(--grid-strong)}
  .titleblock .row:last-child{border-bottom:none}
  .titleblock .k{padding:5px 8px;color:var(--ink-soft);border-right:1px solid var(--grid-strong);min-width:74px}
  .titleblock .v{padding:5px 8px;flex:1}
  .titleblock .v.brand{color:var(--red);font-weight:500;letter-spacing:.02em}

  /* ================= TIMELINE ================= */
  .tl-wrap{height:340vh;position:relative}
  .tl-sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
  .tl-inner{width:100%;padding:0 clamp(28px,7vw,120px)}
  .tl-head{max-width:40ch;margin-bottom:min(6vh,52px)}
  .tl-head .eyebrow{font-family:var(--mono);font-size:12px;color:var(--red);margin-bottom:14px}
  .tl-head h2{font-size:clamp(24px,3.4vw,44px);font-weight:600;letter-spacing:-.015em;line-height:1.08}
  html[data-lang="zh"] .tl-head h2{letter-spacing:.01em}
  .tl-head p{margin-top:14px;color:var(--ink-soft);font-size:clamp(14px,1.3vw,16.5px);max-width:46ch;line-height:1.6}
  html[data-lang="zh"] .tl-head p{max-width:34ch;line-height:1.8}

  .tl-stage{position:relative;width:100%}
  .tl-stage svg{width:100%;height:auto;display:block;overflow:visible}
  .draw{stroke:var(--ink);fill:none}
  .draw-red{stroke:var(--red);fill:none}
  .node-label{font-family:var(--mono);font-size:13px;fill:var(--ink)}
  .node-label.red{fill:var(--red)}
  .node-meta{font-family:var(--mono);font-size:10.5px;fill:var(--ink-soft)}
  .dim{font-family:var(--mono);font-size:10px;fill:var(--ink-soft)}

  /* mobile vertical timeline (git-graph) — hidden on desktop */
  .tl-mobile{display:none;position:relative;padding-left:30px;margin-top:6px}
  .tl-mobile::before{content:"";position:absolute;left:6px;top:12px;bottom:66px;width:1.5px;background:var(--ink)}
  .tlm-item{position:relative;padding:13px 0;font-family:var(--mono)}
  .tlm-item .dot{position:absolute;left:-30px;top:15px;width:13px;height:13px;border:1.6px solid var(--ink);border-radius:50%;background:var(--paper);box-sizing:border-box}
  .tlm-item.current .dot{border-color:var(--red);background:var(--red)}
  .tlm-item b{font-size:15px;font-weight:500;color:var(--ink)}
  .tlm-item.current b{color:var(--red)}
  .tlm-item i{font-style:normal;font-size:12px;color:var(--ink-soft);margin-left:10px}
  .tlm-sub{position:relative;margin:6px 0 2px 0;padding:6px 0 4px 26px;font-family:var(--mono)}
  /* red branch forks off the MAIN line (x=6) and elbows right to v04-b */
  .tlm-sub::before{content:"";position:absolute;left:-24px;top:-18px;width:30px;height:32px;
    border-left:1.6px solid var(--red);border-bottom:1.6px solid var(--red);border-bottom-left-radius:12px}
  .tlm-sub .bdot{position:absolute;left:0.5px;top:8px;width:11px;height:11px;border:1.6px solid var(--red);border-radius:50%;background:var(--paper);box-sizing:border-box}
  .tlm-sub b{font-size:14px;font-weight:500}
  .tlm-sub b.red,.tlm-sub i.red{color:var(--red)}
  .tlm-note{margin-top:24px;font-family:var(--mono);font-size:11.5px;color:var(--red)}

  /* ================= WHY-NOT-CLOUD ================= */
  .why{position:relative}
  .why-wrap{height:230vh;position:relative}
  .why-sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
  .why-inner{width:100%;padding:0 clamp(28px,7vw,120px)}
  .why-inner .panels{max-width:none}   /* cards use the full width below */
  /* header row: big heading left, small sub moved to its right — keeps the header short so the cards below get full height */
  .why-inner .tl-head{
    max-width:none;   /* override the timeline's .tl-head 40ch cap */
    display:grid;grid-template-columns:minmax(auto,560px) minmax(auto,440px);gap:clamp(32px,4vw,80px);
    align-items:end;justify-content:start;margin-bottom:min(5vh,46px);
  }
  .why-inner .tl-head .th-sub{margin-top:0}
  .why h2 em{font-style:normal;color:var(--red)}
  .panels{
    display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px);
    align-items:stretch;max-width:1120px;
  }
  .panel{border:1px solid var(--ink);background:var(--paper);display:flex;flex-direction:column}
  .panel.bad{border-color:var(--grid-strong)}
  .panel-hd{
    display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    font-family:var(--mono);font-size:11px;color:var(--ink-soft);
    padding:9px 12px;border-bottom:1px solid var(--grid-strong);
  }
  .panel.good .panel-hd{color:var(--red)}
  .panel-hd .n{letter-spacing:.03em}
  .panel-bd{padding:20px 12px 22px;flex:1;position:relative}

  /* file graveyard */
  .filelist{font-family:var(--mono);font-size:13.5px;line-height:2.05;color:var(--ink)}
  .filelist .f{position:relative;display:inline-block}
  .filelist .f .strike{
    position:absolute;left:-2px;right:-2px;top:50%;height:2px;background:var(--red);
    transform:scaleX(1);transform-origin:left center;
  }
  .filelist .f.ok{color:var(--ink-soft)}
  .qmark{
    position:absolute;right:16px;bottom:12px;font-family:var(--mono);font-weight:500;
    color:var(--red);font-size:clamp(40px,6vw,72px);line-height:.8;opacity:1;
    display:flex;flex-direction:column;align-items:flex-end;text-align:right;
  }
  .qmark small{font-size:11px;font-weight:400;max-width:22ch;line-height:1.35;margin-top:10px}

  /* clean panel mini timeline */
  .mini svg{width:100%;height:auto;display:block;overflow:visible}
  .mini .cap{font-family:var(--mono);font-size:11px;color:var(--ink-soft);margin-top:14px}
  .mini .cap b{color:var(--red);font-weight:500}

  .why .closing{
    margin:clamp(56px,10vh,110px) clamp(28px,7vw,120px) clamp(80px,13vh,150px);max-width:26ch;
    font-size:clamp(20px,2.4vw,32px);font-weight:500;letter-spacing:-.01em;line-height:1.2;
  }
  html[data-lang="zh"] .why .closing{max-width:20ch;letter-spacing:.01em}
  .why .closing em{font-style:normal;color:var(--red)}

  /* narrow: unstick + single column so nothing gets clipped (pin is also disabled in JS here) */
  @media (max-width:900px){
    .why-wrap{height:auto}
    .why-sticky{position:static;height:auto;display:block;overflow:visible;padding:clamp(70px,12vh,120px) 0}
    .why-inner .tl-head{grid-template-columns:1fr;gap:14px;align-items:start}
  }
  @media (max-width:680px){
    .panels{grid-template-columns:1fr}
    /* narrow cards: drop the "?" annotation below the file list instead of overlapping it */
    .panel.bad .panel-bd{padding-bottom:22px}
    .qmark{position:static;margin-top:20px}
  }

  /* ================= HOW IT WORKS ================= */
  .how{padding:clamp(90px,15vh,170px) clamp(28px,7vw,120px)}
  .how .eyebrow{font-family:var(--mono);font-size:12px;color:var(--red);margin-bottom:16px}
  .how h2{font-size:clamp(26px,4vw,52px);font-weight:600;letter-spacing:-.02em;line-height:1.05;max-width:22ch}
  html[data-lang="zh"] .how h2{letter-spacing:.01em;font-weight:700}
  .steps{margin-top:clamp(44px,7vh,84px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,4vw,64px)}
  .step{border-top:1.5px solid var(--ink);padding-top:18px}
  .step-num{font-family:var(--mono);font-size:15px;letter-spacing:.06em;color:var(--ink)}
  .step-fig{margin:26px 0 24px}
  .step-fig .fig{width:100%;max-width:230px;height:auto;display:block;overflow:visible}
  .step-title{font-size:clamp(18px,1.8vw,23px);font-weight:600;letter-spacing:-.01em;margin-bottom:10px}
  html[data-lang="zh"] .step-title{letter-spacing:.01em}
  .step-desc{color:var(--ink-soft);font-size:clamp(14px,1.2vw,15.5px);line-height:1.6;max-width:34ch}
  html[data-lang="zh"] .step-desc{line-height:1.85;max-width:24ch}
  @media (max-width:820px){ .steps{grid-template-columns:1fr;gap:clamp(30px,5vh,52px)} }

  /* ================= CTA ================= */
  .cta{
    padding:clamp(90px,17vh,190px) clamp(28px,7vw,120px) clamp(70px,10vh,120px);
    position:relative;
  }
  .cta .eyebrow{font-family:var(--mono);font-size:12px;color:var(--red);margin-bottom:16px}
  .cta h2{
    font-size:clamp(30px,5.2vw,68px);font-weight:600;letter-spacing:-.02em;line-height:1.03;
    max-width:16ch;
  }
  html[data-lang="zh"] .cta h2{letter-spacing:.01em;max-width:15ch;font-weight:700}
  .cta p.lead{margin-top:24px;max-width:50ch;color:var(--ink-soft);font-size:clamp(15px,1.5vw,18px);line-height:1.6}
  html[data-lang="zh"] .cta p.lead{max-width:34ch;line-height:1.8}
  .actions{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .btn{
    position:relative;
    font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.01em;
    padding:14px 26px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);
    cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:10px;
    transition:background .18s ease,color .18s ease,border-color .18s ease;
  }
  html[data-lang="zh"] .btn{font-family:var(--cjk)}
  .btn.primary{background:var(--red);border-color:var(--red);color:var(--paper)}
  /* registration brackets snap in to "select" the button — echoes the page's corner marks */
  .btn::before,.btn::after{content:"";position:absolute;width:13px;height:13px;pointer-events:none;opacity:0;
    transition:opacity .18s ease,transform .22s cubic-bezier(.3,.85,.3,1)}
  .btn::before{top:-5px;left:-5px;border-top:2px solid var(--ink);border-left:2px solid var(--ink);transform:translate(7px,7px)}
  .btn::after{bottom:-5px;right:-5px;border-bottom:2px solid var(--ink);border-right:2px solid var(--ink);transform:translate(-7px,-7px)}
  .btn:hover::before,.btn:hover::after{opacity:1;transform:translate(0,0)}
  .btn:active::before{transform:translate(3px,3px)}
  .btn:active::after{transform:translate(-3px,-3px)}
  .btn.primary:hover{background:#d12e13;border-color:#d12e13}
  .btn.ghost:hover{background:var(--ink);color:var(--paper)}
  .btn:focus-visible{outline:2px solid var(--red);outline-offset:3px}
  .actions .note{font-family:var(--mono);font-size:11px;color:var(--ink-soft);margin-left:4px}


  /* progressive reveal helpers (JS toggles when GSAP absent) */
  .no-motion [data-anim]{opacity:1 !important;transform:none !important}
  .no-motion .hero h1 .line span{transform:none !important}
  .no-motion .grid-bg,.no-motion .reg{opacity:1 !important}

  @media (prefers-reduced-motion:reduce){
    .hero .scrollhint .ln::after{animation:none}
  }
  @media (max-width:680px){
    .titleblock{position:static;margin-top:40px;min-width:0;width:100%;max-width:300px}
    .hero{padding-bottom:40px}
  }
  /* narrow: swap the horizontal timeline for the vertical one, and stop pinning (JS also disables the pin) */
  @media (max-width:820px){
    .tl-stage{display:none}
    .tl-mobile{display:block}
    .tl-wrap{height:auto}
    .tl-sticky{position:static;height:auto;display:block;overflow:visible;padding:clamp(56px,9vh,96px) 0}
  }