/* ==========================================================================
   中北智创 · 太原自成蹊 — 宣传站样式
   Swiss-industrial precision + editorial whitespace.
   Tokens are frozen. Only transform/opacity animate.
   ========================================================================== */

/* ---------- Fonts (self-hosted, subset) ---------------------------------- */
@font-face{font-family:'Inter';src:url('../fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-600.woff2') format('woff2');font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('../fonts/playfair-600.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans SC';src:url('../fonts/notosanssc-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans SC';src:url('../fonts/notosanssc-600.woff2') format('woff2');font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Serif SC';src:url('../fonts/notoserifsc-600.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
/* ---------- Tokens ---------- */
:root{
  --ink:#0E1319; --ink-2:#39424D; --ink-3:#5B646F; --ink-4:#5A626D;
  --paper:#F2F3F5; --paper-2:#FFFFFF; --paper-3:#E9EBEF;
  --line:rgba(13,17,23,.10); --line-soft:rgba(13,17,23,.06);
  --ind:#0E6E7C;      /* industrial accent  */
  --ind-lift:#12889A;
  --edu:#B4531D;      /* education accent   */
  --edu-soft:#F7EFE9; /* the warm world's own ground */
  --edu-lift:#D26A2E;
  --signal:#3FD0C9;   /* shared anchor      */
  --live:#2E9E5B;
  --dark:#04060A; --dark-1:#0A0E14; --dark-2:#11161E; --dark-3:#1A212B;
  --d-line:rgba(255,255,255,.10); --d-line-soft:rgba(255,255,255,.055);
  --d-text:#EDF0F3; --d-text-2:#9BA4AF; --d-text-3:#7E8794;

  --sans:'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',sans-serif;
  /* CJK-first display: when the copy is Chinese, the Latin face would fight the
     hanzi metrics, so the CJK serif leads and Latin falls back to it. */
  --serif:'Noto Serif SC','Playfair Display',Georgia,'Songti SC',serif;
  --latin-serif:'Playfair Display','Noto Serif SC',Georgia,serif;
  --mono:ui-monospace,'Cascadia Mono',Consolas,monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.7,0,.84,0);
  --gut:clamp(20px,4.4vw,64px);
  --pad-y:clamp(72px,9vw,148px);
  --maxw:1240px;
  --hdr:56px;
}

body.lang-en{--serif:var(--latin-serif)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.no-scroll{overflow:hidden}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;
  letter-spacing:-.006em;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
h1,h2,h3,h4,h5{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.06}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
:focus-visible{outline:2.5px solid var(--ind);outline-offset:3px;border-radius:3px}
.dark :focus-visible,.on-dark :focus-visible{outline-color:var(--signal)}
::selection{background:rgba(14,110,124,.18)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
/* Grid/flex children must be allowed to shrink below their min-content width,
   otherwise a long unbreakable run pushes the track past the container. */
.cards>*,.egrid>*,.pillars>*,.steps>*,.team>*,.app>*,.duo>*,.qbox>*,.steps>div,.layers>*{min-width:0}
.pts .k,.pts .v,.card li,.ecard li,.specs li{overflow-wrap:anywhere}
.mono{font-family:var(--mono);font-variant-ligatures:none}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---------- Header ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:100;height:var(--hdr);display:flex;align-items:center;
  transition:transform .5s var(--ease),background-color .4s ease,border-color .4s ease,backdrop-filter .4s ease;
  border-bottom:1px solid transparent;transform:translateY(-100%)}
.js .hdr{transform:translateY(0)}
.hdr.is-scrolled{background:rgba(244,245,247,.82);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);border-bottom-color:var(--line-soft)}
.hdr.is-hidden{transform:translateY(-100%)}
.hdr.on-dark.is-scrolled{background:rgba(6,8,11,.72);border-bottom-color:var(--d-line-soft)}
.hdr .wrap{display:flex;align-items:center;gap:20px;width:100%}
.lockup{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.lockup .sig{width:22px;height:22px;flex:0 0 22px}
.lockup .sig path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.hdr.on-dark{color:var(--d-text)}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{font-size:13.5px;color:var(--ink-3);padding:8px 11px;border-radius:999px;transition:color .2s,border-color .2s}
.hdr.on-dark .nav a{color:var(--d-text-2)}
.nav a:hover{color:var(--ink)}
.hdr.on-dark .nav a:hover{color:#fff}
.nav a.is-active{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.hdr.on-dark .nav a.is-active{color:#fff;box-shadow:inset 0 0 0 1px var(--d-line)}
.hdr-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav+.hdr-right{margin-left:0}
.lang{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:7px 12px;transition:color .2s,border-color .2s}
.lang:hover{color:var(--ink);border-color:var(--ink-4)}
.hdr.on-dark .lang{color:var(--d-text-2);border-color:var(--d-line)}
.hdr.on-dark .lang:hover{color:#fff}
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font-size:14px;font-weight:500;letter-spacing:-.01em;border-radius:999px;padding:10px 18px;
  background:var(--ink);color:#fff;border:1px solid transparent;cursor:pointer;
  transition:transform .22s var(--ease),background-color .24s ease,border-color .24s ease,color .24s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink-4)}
.btn.edu{background:var(--edu)}.btn.edu:hover{background:var(--edu-lift)}
.btn.lg{font-size:15.5px;padding:14px 26px}
.hdr.on-dark .btn.ghost{color:#fff;border-color:var(--d-line)}
.on-dark .btn.ghost{color:#fff;border-color:var(--d-line)}
.on-dark .btn.ghost:hover{border-color:var(--d-text-2)}
.hdr .btn{display:none}
@media(min-width:900px){.hdr .btn{display:inline-flex}}
@media(max-width:1023px){.nav{display:none}}

/* ---------- Type scale ---------- */
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:9px}
.on-dark .eyebrow,.eyebrow.on-dark{color:var(--d-text-3)}
.eyebrow{position:relative}
.eyebrow::before{content:none}
.eyebrow .tick{position:absolute;left:-24px;top:50%;width:24px;height:1px;background:currentColor;opacity:.35}
.h1{font-family:var(--serif);font-weight:600;font-size:clamp(38px,7.4vw,92px);line-height:1.02;letter-spacing:-.028em;text-wrap:balance}
.h2{font-family:var(--serif);font-weight:600;font-size:clamp(32px,5.4vw,76px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.h3{font-size:clamp(22px,2.6vw,32px);line-height:1.12;letter-spacing:-.026em}
.h4{font-size:19px;line-height:1.22;letter-spacing:-.018em;font-weight:600}
.lede{font-size:clamp(16.5px,1.45vw,20px);line-height:1.58;color:var(--ink-2);max-width:min(58ch,44vw);letter-spacing:-.014em}
.sub{font-size:clamp(16px,1.5vw,18.5px);line-height:1.6;color:var(--ink-2);max-width:62ch}
.tiny{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--ink-3)}
.on-dark .h1,.on-dark .h2,.on-dark .h3,.on-dark .lede,.on-dark .sub{color:var(--d-text)}
.on-dark .sub,.on-dark .lede{color:var(--d-text-2)}
em{font-style:normal;color:var(--ink-3)}
.on-dark em{color:var(--d-text-3)}


/* ---------- M2 · the stage: the drawing carries the scene ---------- */
.stage-fig{margin:0 0 clamp(34px,4.4vw,58px)}
.stage-frame{position:relative;border:1px solid var(--d-line-soft);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#0B0F14 0%,#070A0E 100%);height:clamp(230px,32vh,380px)}
.stage-frame canvas{position:absolute;inset:0;width:100%;height:100%;display:none}
.stage-frame{height:clamp(320px,62vh,640px)}
/* the engineering drawing fills the frame exactly: it is already composed for this
   aspect ratio, so cover would crop the title block off */
.stage-drawing{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}

/* --- the drawing moves: material travels the line, the recycle loop returns it --- */
.stage-flow{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:2}
/* the pipe itself: a solid line you can see, not a hairline */
.stage-flow .fl-grid{fill:none;stroke-width:.55;opacity:.22}
.stage-flow .fl-under{fill:none;stroke-width:1.0;opacity:.55;stroke-dasharray:1.1 1.9}
/* the material: a fat bright slug running the pipe */
  stroke-dasharray:7.5 40;filter:drop-shadow(0 0 3px rgba(255,255,255,.85)) drop-shadow(0 0 8px rgba(63,208,201,.55));
  animation:flowRun var(--secs,3s) linear infinite}
  filter:drop-shadow(0 0 3px rgba(255,206,150,.9)) drop-shadow(0 0 9px rgba(217,133,63,.6));
  stroke-dasharray:6 46}
/* each unit acknowledges the material as it arrives */
.unit-light .ul-halo{fill:#3FD0C9;opacity:0;animation:unitHalo 6.6s ease-out infinite;animation-delay:var(--d,0s)}
.unit-light .ul-dot{fill:#EAFBF9;opacity:.35;animation:unitDot 6.6s ease-in-out infinite;animation-delay:var(--d,0s)}
.stage-drawing{animation:stageBreath 9s ease-in-out infinite}
@keyframes unitHalo{0%{opacity:0;transform:scale(.5);transform-origin:center}
  10%{opacity:.5}30%{opacity:0;transform:scale(1.5)}100%{opacity:0}}
@keyframes unitDot{0%,100%{opacity:.3}13%{opacity:1}40%{opacity:.3}}
@keyframes stageBreath{0%,100%{opacity:1}50%{opacity:.96}}

/* --- live readout above the unit index --- */
.stage-readout{list-style:none;margin:16px 0 0;padding:0;display:flex;gap:clamp(14px,2.4vw,34px);flex-wrap:wrap;
  border-top:1px solid var(--d-line-soft);padding-top:12px}
.stage-readout li{display:flex;align-items:baseline;gap:6px}
.stage-readout .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--d-text-3)}
.stage-readout .v{font-family:var(--mono);font-size:16px;color:var(--signal);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stage-readout .u{font-family:var(--mono);font-size:10px;color:var(--d-text-3)}

@media(prefers-reduced-motion:reduce){
  .stage-flow .fl-under{animation:none}
  .stage-drawing{animation:none;opacity:1}
}
@media(max-width:719px){
  .stage-flow{width:560px}
  .stage-readout{gap:12px}
  .stage-readout .v{font-size:14px}
}
@media(max-width:719px){
  /* the drawing is wide: on a phone it scrolls sideways inside its own frame
     instead of shrinking to an unreadable sliver */
  .stage-frame{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .stage-drawing{width:760px;height:100%;inset:0 auto 0 0;position:absolute}
  .stage-legend{position:sticky;left:0;right:auto;max-width:calc(100vw - 64px)}
}
.stage-frame svg{display:none}
.stage-legend{position:absolute;z-index:3;left:16px;right:16px;bottom:14px;display:flex;gap:18px;flex-wrap:wrap}
.stage-legend .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:rgba(237,240,243,.62)}
/* the six units, in process order - this replaces the labelled boxes that used to
   be drawn on top of the 3D row */
.stage-map{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:1px;border-top:1px solid var(--d-line-soft)}
.stage-map li{display:flex;flex-direction:column;gap:2px;padding:12px 8px 2px;border-left:1px solid var(--d-line-soft)}
.stage-map li:first-child{border-left:0;padding-left:0}
.stage-map .n{font-family:var(--mono);font-size:10.5px;color:var(--signal);letter-spacing:.08em}
.stage-map .cn{font-size:13.5px;color:var(--d-text)}
.stage-map .en{font-family:var(--mono);font-size:10.5px;color:var(--d-text-3);letter-spacing:.02em}
@media(max-width:899px){.stage-map{grid-template-columns:1fr 1fr}.stage-map li{border-left:0;border-top:1px solid var(--d-line-soft);padding:9px 0}
  .stage-map li:nth-child(1),.stage-map li:nth-child(2){border-top:0}}
.stage-fig figcaption{margin:0;padding:12px 2px 0;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--d-text-3)}
@media(max-width:719px){.stage-frame{height:min(58vh,340px)}.stage-legend{gap:12px}}

/* ---------- M2 · rail list: the three foundations annotate the stage ---------- */
.rail-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(18px,2.6vw,40px);border-top:1px solid var(--d-line-soft)}
.rail-list .rail-item{position:relative;display:grid;grid-template-columns:38px 1fr;gap:0 14px;
  padding:26px 0 4px;border-top:0}
.rail-list .rail-item+.rail-item::before{content:"";position:absolute;left:calc(-1 * clamp(9px,1.3vw,20px));top:26px;bottom:14px;width:1px;background:var(--d-line-soft)}
.rail-list .n{font-family:var(--mono);font-size:11.5px;color:var(--signal);letter-spacing:.06em;padding-top:3px}
.rail-list h3{font-size:19px;letter-spacing:-.02em;margin:0 0 8px}
.rail-list p{color:var(--d-text-2);font-size:15.5px;line-height:1.62}
@media(max-width:899px){.rail-list{grid-template-columns:1fr}.rail-list .rail-item{padding:22px 0 10px;border-top:1px solid var(--d-line-soft)}.rail-list .rail-item+.rail-item::before{display:none}}

/* ---------- M3 · editorial list + sticky index (not another card grid) ---------- */
/* The index belongs to this section and scrolls with it: a fixed overlay here
   bled over the previous scene on shorter viewports. */
.ed-wrap{display:block}
.ed-index{display:none}
.ed-index .idx-h{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.ed-index ol li{font-size:12.5px;line-height:1.5;color:var(--ink-4);padding:4px 0;display:flex;gap:8px}
.ed-index ol li .n{font-family:var(--mono);font-size:11px}
.ed-index ol li.is-on{color:var(--ink)}
.ed-index ol li.is-on .n{color:var(--ind)}
@media(min-width:1180px){
  .ed-wrap{display:grid;grid-template-columns:170px 1fr;gap:clamp(20px,3vw,48px);align-items:start}
  .ed-index{display:block;position:sticky;top:calc(var(--hdr) + 28px)}
}
.ed-list{counter-reset:pr;border-top:1px solid var(--line)}
.ed-list>li{display:grid;grid-template-columns:clamp(64px,6vw,104px) 1fr;gap:clamp(14px,2.4vw,34px);
  padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--line);align-items:start}
.ed-list>li>.n{font-family:var(--mono);font-size:clamp(22px,3vw,38px);line-height:1;color:var(--ink-4);letter-spacing:-.02em}
.ed-list>li .body{max-width:74ch}
.ed-list h3{font-size:clamp(19px,2.2vw,26px);letter-spacing:-.024em;margin:0 0 10px}
.ed-list p{color:var(--ink-2);font-size:16px;line-height:1.7}
.ed-list>li:first-child>.n{color:var(--ind)}
@media(max-width:719px){.ed-list>li{grid-template-columns:52px 1fr}}

/* ---------- M7 · route with stops ---------- */
.route{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,30px);padding-top:34px}
.route-line{position:absolute;left:0;right:0;top:9px;height:1px;background:linear-gradient(90deg,var(--edu) 0%,rgba(180,83,29,.25) 72%,transparent 100%)}
.route-line::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--edu);opacity:.5}
.stop{position:relative;display:flex;flex-direction:column;gap:9px;padding-right:clamp(8px,1.4vw,22px)}
.stop .dot{position:absolute;left:0;top:-34px;width:9px;height:9px;border-radius:50%;background:var(--paper-2);
  border:1.5px solid var(--edu);box-shadow:0 0 0 4px var(--paper)}
.stop .n{font-family:var(--mono);font-size:11.5px;color:var(--edu);letter-spacing:.06em}
.stop h3{font-size:clamp(17px,1.9vw,20px);letter-spacing:-.02em}
.stop p{font-size:14.5px;color:var(--ink-2);line-height:1.6}
@media(max-width:899px){
  .route{grid-template-columns:1fr;gap:0;padding-top:0}
  .route-line{left:-14px;right:auto;top:8px;bottom:8px;width:1px;height:auto;background:linear-gradient(180deg,var(--edu),rgba(180,83,29,.18))}
  .route-line::after{display:none}
  .stop{padding:0 0 26px 26px}
  .stop .dot{top:6px;left:-4px;box-shadow:0 0 0 4px var(--paper)}
}

/* ---------- M8 · ledger ---------- */
.ledger{border-top:1px solid var(--line)}
.led{display:grid;grid-template-columns:56px minmax(180px,240px) 1fr;gap:clamp(16px,2.6vw,40px);align-items:center;
  padding:clamp(22px,2.8vw,34px) 0;border-bottom:1px solid var(--line)}
.led .av{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:15px;
  background:linear-gradient(140deg,#E9EBEF,#D8DBE1);color:var(--ink-2)}
.led .who h3{font-size:clamp(18px,2vw,22px);letter-spacing:-.02em;margin:0 0 4px}
.led .who .role{font-family:var(--mono);font-size:11.5px;color:var(--ind);letter-spacing:.03em}
.led p{font-size:15.5px;color:var(--ink-2);line-height:1.62;max-width:62ch}
@media(max-width:719px){
  .led{grid-template-columns:44px 1fr;row-gap:10px}
  .led p{grid-column:2}
  .led .av{width:40px;height:40px;font-size:13px}
}

/* ---------- the stage canvas is decorative only ---------- */
#stageFlow{opacity:.9}

/* ---------- Spine: the one element every scene shares ----------
   A real 1px line the eye can follow from the hero to the footer. Sections hang
   off it (their eyebrow gets a tick that touches the rail) and scene changes
   travel along it. .sp-base is always painted - under prefers-reduced-motion it
   is the finished drawing, not a deleted one. */
.spine{position:absolute;top:0;bottom:0;left:calc(var(--gut) - 10px);width:20px;height:100%;z-index:1;pointer-events:none}
.spine svg{position:absolute;left:9.5px;top:0;width:1px;height:100%;overflow:visible}
.sp-base{stroke:var(--line);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
main .spine .sp-base{stroke-width:1.5}
.dark .sp-base,.on-dark .sp-base{stroke:var(--d-line-soft)}
.sp-prog{stroke:var(--signal);stroke-width:3;fill:none;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px rgba(63,208,201,.7))}
.sp-nodes circle{fill:var(--paper);stroke:var(--line);stroke-width:1.5;vector-effect:non-scaling-stroke;transition:fill .3s ease,stroke .3s ease}
.dark .sp-nodes circle{fill:var(--dark)}
.sp-nodes circle.on{fill:var(--signal);stroke:var(--signal);filter:drop-shadow(0 0 5px rgba(63,208,201,.8))}
.sp-tick{stroke:var(--line);stroke-width:1.5;vector-effect:non-scaling-stroke}
.dark .sp-tick{stroke:var(--d-line-soft)}
.rail-tick{position:absolute;left:calc(var(--gut) - 12px);top:.55em;width:12px;height:1px;background:var(--line);pointer-events:none}
.dark .rail-tick,.on-dark .rail-tick{background:var(--d-line)}
@media(max-width:719px){.spine{display:none}}

/* ---------- Sections ---------- */
.sec{position:relative;padding:clamp(80px,11vw,180px) 0}
.sec.tight{padding-top:0}
.world-industry{padding-top:clamp(96px,13vw,200px);padding-bottom:clamp(96px,13vw,200px)}
.sec-head{display:grid;gap:clamp(14px,1.6vw,22px);max-width:1000px;margin-bottom:clamp(40px,5vw,80px)}
.sec-head .h2{max-width:34ch}
.sec-head .h2 > span{display:block;text-wrap:balance}
.sec-head .h2 > span + span{margin-top:.06em}
.rule{height:1px;background:var(--line);border:0;margin:0}
.dark{background:var(--dark);color:var(--d-text)}
.dark .rule{background:var(--d-line-soft)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--hdr) + clamp(10px,1.6vw,22px));padding-bottom:clamp(12px,1.8vw,22px);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg .sky{position:absolute;inset:0;background:
  radial-gradient(120% 84% at 76% 6%,rgba(14,110,124,.16) 0%,rgba(14,110,124,0) 56%),
  radial-gradient(90% 70% at 10% 92%,rgba(180,83,29,.12) 0%,rgba(180,83,29,0) 58%),
  linear-gradient(178deg,#FBFCFD 0%,var(--paper) 46%,#EDEFF2 100%)}
.hero-bg .grid{position:absolute;inset:0;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:clamp(56px,7vw,104px) clamp(56px,7vw,104px);
  -webkit-mask-image:radial-gradient(74% 62% at 50% 42%,#000 30%,transparent 100%);
  mask-image:radial-gradient(74% 62% at 50% 42%,#000 30%,transparent 100%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero .wrap{padding-bottom:2px}
.hero-top{display:grid;gap:12px;max-width:1000px}
.hero h1{margin-top:2px;font-size:clamp(34px,min(6.5vw,8vh),78px)}
.hero h1 .l2{display:block;color:var(--ink-3)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.hero-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:clamp(18px,2.4vw,34px);
  background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hero-strip>div{background:var(--paper);padding:14px 4px 12px}
.hero-strip .n{font-family:var(--serif);font-size:clamp(24px,2.5vw,34px);font-weight:600;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hero-strip .n sup{font-family:var(--mono);font-size:.42em;font-weight:400;vertical-align:super;margin-left:2px;color:var(--ind)}
.hero-strip .l{font-size:12.8px;color:var(--ink-2);margin-top:5px}
.hero-strip .note{font-family:var(--mono);font-size:10.5px;color:var(--ink-4);margin-top:3px;letter-spacing:.02em}
.hero-cue{position:absolute;left:var(--gut);bottom:10px;z-index:3;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.hero-cue i{display:block;width:1px;height:26px;background:linear-gradient(var(--ink-4),transparent);position:relative;overflow:hidden}
.hero-cue i::after{content:"";position:absolute;inset:0;background:var(--ind);transform:translateY(-100%);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}55%{transform:translateY(100%)}100%{transform:translateY(100%)}}
@media(max-width:719px){
  .h1{font-size:clamp(32px,10.6vw,52px);line-height:1.05}
  .lede{font-size:16.5px;line-height:1.52;max-width:none}
  .sub{font-size:16px;line-height:1.56}
  .h2{font-size:clamp(27px,8.4vw,40px)}
  .eyebrow{font-size:11px;letter-spacing:.08em}
  .hero-cta .btn.lg{font-size:15px;padding:13px 22px}
  .hero-strip{grid-template-columns:1fr 1fr}
  .hero-strip>div{padding:14px 2px}
  .hero-cue{display:none}
}

/* ---------- Flowsheet / canvas panels ---------- */
.panel{position:relative;margin:clamp(14px,1.8vw,26px) 0 0;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(180deg,#0B0F14 0%,#070A0E 100%);box-shadow:0 2px 6px rgba(13,17,23,.07),0 26px 60px rgba(13,17,23,.10)}
.panel-hd{position:absolute;z-index:3;top:14px;left:16px;right:16px;display:flex;justify-content:space-between;gap:14px;align-items:flex-start;pointer-events:none}
.tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(237,240,243,.62);background:rgba(255,255,255,.06);border:1px solid var(--d-line);border-radius:999px;padding:5px 10px;backdrop-filter:blur(8px)}
.tag .dot{width:5px;height:5px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 3px rgba(63,208,201,.18)}
.tag.edu .dot{background:var(--edu-lift);box-shadow:0 0 0 3px rgba(210,106,46,.18)}
.panel .hud{z-index:3;font-family:var(--mono);font-size:10.5px;color:rgba(237,240,243,.5);letter-spacing:.04em;text-align:right;line-height:1.7}
.panel figcaption{margin:0;padding:14px 16px;font-family:var(--sans);font-size:14px;line-height:1.5;letter-spacing:-.006em;color:var(--ink-2);border-top:1px solid var(--line);background:var(--paper-2)}
.panel figcaption b{font-weight:600;color:var(--ink)}
.flowWrap{position:relative;width:100%;height:min(28vh,300px)}
.flowWrap svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.flowWrap canvas{display:none}
#pcanvas{display:block;width:100%;height:100%}
.pipe{stroke:rgba(255,255,255,.16);stroke-width:1.6;fill:none}
.pipe-live{stroke:url(#sigGrad);stroke-width:2;fill:none;stroke-dasharray:5 11;animation:dash 1.5s linear infinite}
@keyframes dash{to{stroke-dashoffset:-32}}
.eq rect{fill:#12171E;stroke:rgba(255,255,255,.16);stroke-width:1.2}
.eq rect.hot{stroke:var(--signal);stroke-opacity:.8}
.eq text{font-family:ui-monospace,monospace;font-size:11px;fill:rgba(237,240,243,.68);text-anchor:middle;letter-spacing:.02em}
.eq .icon{stroke:rgba(237,240,243,.55);stroke-width:1.3;fill:none}
.grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);background-size:3px 3px}
@media(max-width:719px){
  .flowWrap{height:min(34vh,300px)}
  .panel-hd .hud{display:none}
  /* the drawing is the point of the hero: on a phone it gets its own full-bleed
     band instead of being shrunk into a sliver */
  .hero .panel{margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));border-radius:0;border-left:0;border-right:0}
  .hero .panel figcaption{font-size:13px;padding:12px var(--gut)}
  .hero .wrap{padding-left:var(--gut);padding-right:var(--gut)}
}

/* ---------- Company cards ---------- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
@media(max-width:899px){.cards{grid-template-columns:1fr}}
.card{position:relative;background:var(--paper-2);padding:clamp(24px,3.2vw,44px);display:flex;flex-direction:column;gap:18px;
  transition:transform .5s var(--ease)}
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--ind);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.card.edu::after{background:var(--edu)}
.card:hover::after,.card:focus-within::after{transform:scaleX(1)}
.card .lock{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card h3{font-size:clamp(20px,2.2vw,25px);letter-spacing:-.024em;line-height:1.18}
.card .sub2{font-size:14px;color:var(--ink-3);font-family:var(--mono);letter-spacing:.01em}
.card p{color:var(--ink-2);font-size:16px;line-height:1.62}
.card ul{display:grid;gap:0;margin-top:auto;border-top:1px solid var(--line)}
.card li{font-size:14.5px;color:var(--ink-2);padding:11px 0;border-bottom:1px solid var(--line-soft);display:flex;gap:10px;align-items:flex-start}
.card li::before{content:"";width:5px;height:5px;flex:0 0 5px;margin-top:9px;background:var(--ind);border-radius:1px}
.card.edu li::before{background:var(--edu)}
.more{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--ind);margin-top:6px;width:max-content}
.card.edu .more{color:var(--edu)}
.more svg{transition:transform .35s var(--ease)}
.more:hover svg{transform:translateX(4px)}
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:5px 10px;color:var(--ink-2)}
.pill.ind{color:var(--ind);border-color:rgba(14,110,124,.28)}
.pill.edu{color:var(--edu);border-color:rgba(180,83,29,.28)}
.origin{font-family:var(--mono);font-size:11.5px;color:var(--ink-4);letter-spacing:.02em}

/* ---------- Industrial pillars / ladder ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--d-line-soft);border:1px solid var(--d-line-soft);border-radius:16px;overflow:hidden}
@media(max-width:899px){.pillars{grid-template-columns:1fr}}
.pillars>div{background:var(--dark-1);padding:clamp(22px,2.6vw,34px)}
.pillars .n{font-family:var(--mono);font-size:11.5px;color:var(--signal);letter-spacing:.06em}
.pillars h3{font-size:19px;margin:14px 0 10px;letter-spacing:-.02em}
.pillars p{color:var(--d-text-2);font-size:15.5px;line-height:1.62}
.quote{margin:clamp(48px,6vw,84px) auto;max-width:900px;text-align:center}
.quote p{font-family:var(--serif);font-size:clamp(23px,3.2vw,40px);line-height:1.24;letter-spacing:-.028em;font-weight:500;text-wrap:balance}
.quote cite{display:block;margin-top:16px;font-family:var(--mono);font-size:11.5px;font-style:normal;color:var(--d-text-3);letter-spacing:.06em}
.ladder{border-top:1px solid var(--d-line-soft)}
.step{display:grid;grid-template-columns:76px 1fr 1.15fr;gap:clamp(14px,2.4vw,34px);padding:24px 0;border-bottom:1px solid var(--d-line-soft);align-items:baseline}
.step .i{font-family:var(--mono);font-size:13px;color:var(--signal);letter-spacing:.04em}
.step h3{font-size:20px;letter-spacing:-.02em}
.step p{color:var(--d-text-2);font-size:15.5px;line-height:1.62}
.step .need{display:block;margin-top:7px;font-family:var(--mono);font-size:11px;color:var(--d-text-3);letter-spacing:.02em}
@media(max-width:719px){.step{grid-template-columns:52px 1fr}.step p{grid-column:2}}

/* ---------- Voice demo + specs ---------- */
.duo{display:grid;grid-template-columns:1.06fr .94fr;gap:16px}
@media(max-width:899px){.duo{grid-template-columns:1fr}}
.tile{background:var(--dark-2);border:1px solid var(--d-line-soft);border-radius:16px;padding:clamp(22px,2.8vw,38px);position:relative;overflow:hidden}
.tile h3{font-size:clamp(20px,2.2vw,26px);margin:12px 0 10px;letter-spacing:-.024em}
.tile .d{color:var(--d-text-2);font-size:15.5px;max-width:48ch}
.badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#8BE7B4;background:rgba(46,158,91,.14);border-radius:999px;padding:5px 10px}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--live)}
.chat{margin-top:26px;display:grid;gap:10px}
.bub{max-width:84%;padding:11px 15px;border-radius:15px;font-size:14.5px;line-height:1.5}
.bub.q{justify-self:end;background:#1E5F6B;color:#fff;border-bottom-right-radius:5px;display:flex;gap:9px;align-items:flex-start}
.bub.a{justify-self:start;background:#232B34;color:var(--d-text);border-bottom-left-radius:5px}
.bub.a small{display:block;margin-top:5px;font-family:var(--mono);font-size:10.5px;color:var(--d-text-3);letter-spacing:.03em}
.mic{display:inline-flex;align-items:flex-end;gap:2px;height:14px;flex:0 0 auto;margin-top:2px}
.mic i{width:2px;background:currentColor;border-radius:2px;animation:eq 1s ease-in-out infinite;opacity:.9}
.mic i:nth-child(1){height:6px}.mic i:nth-child(2){height:12px;animation-delay:.14s}
.mic i:nth-child(3){height:8px;animation-delay:.28s}.mic i:nth-child(4){height:13px;animation-delay:.42s}
@keyframes eq{50%{transform:scaleY(.42)}}
.specs{margin-top:22px}
.specs li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--d-line-soft);font-size:15px}
.specs li:last-child{border-bottom:1px solid var(--d-line-soft)}
.specs .k{color:var(--d-text-3);font-family:var(--mono);font-size:12px;letter-spacing:.03em;flex:0 0 auto;padding-top:2px}
.specs .v{text-align:right;color:var(--d-text)}

/* ---------- Accordion ---------- */
.acc{border:1px solid var(--line);border-radius:16px;background:var(--paper-2);overflow:hidden}
.acc details{border-top:1px solid var(--line)}
.acc details:first-child{border-top:0}
.acc summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:52px 1fr 22px;gap:12px;align-items:center;
  padding:20px clamp(18px,2.4vw,28px);font-size:clamp(16.5px,1.8vw,19.5px);font-weight:600;letter-spacing:-.02em;transition:background-color .2s ease}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:#FAFBFC}
.acc summary .n{font-family:var(--mono);font-size:12px;color:var(--ink-4);font-weight:400}
.acc .plus{position:relative;width:16px;height:16px;justify-self:end}
.acc .plus::before,.acc .plus::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink-3);transform:translate(-50%,-50%)}
.acc .plus::before{width:14px;height:1.5px}
.acc .plus::after{width:1.5px;height:14px;transition:transform .35s var(--ease)}
.acc details[open] .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.acc .body{padding:0 clamp(18px,2.4vw,28px) 24px 92px;color:var(--ink-2);font-size:16px;line-height:1.75;max-width:78ch}
@media(max-width:679px){.acc .body{padding-left:clamp(18px,2.4vw,28px)}}

/* ---------- Education ---------- */
.edu{background:var(--paper);position:relative}
.edu .glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(70% 50% at 88% 4%,rgba(180,83,29,.10) 0%,rgba(180,83,29,0) 62%),
  radial-gradient(60% 44% at 4% 88%,rgba(14,110,124,.08) 0%,rgba(14,110,124,0) 60%)}
.edu .wrap{position:relative;z-index:1}
.egrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
@media(max-width:899px){.egrid{grid-template-columns:1fr}}
.ecard{background:var(--paper-2);padding:clamp(22px,2.8vw,38px);display:flex;flex-direction:column;gap:14px}
.ecard .ico{width:40px;height:40px;border-radius:11px;background:rgba(180,83,29,.09);display:grid;place-items:center;color:var(--edu)}
.ecard .ico svg{width:21px;height:21px}
.ecard h3{font-size:20px;letter-spacing:-.022em}
.ecard p{color:var(--ink-2);font-size:15.5px;line-height:1.62}
.ecard ul{margin-top:auto;border-top:1px solid var(--line)}
.ecard li{font-size:14px;color:var(--ink-2);padding:10px 0;border-bottom:1px solid var(--line-soft);display:flex;gap:9px}
.ecard li::before{content:"";width:5px;height:5px;flex:0 0 5px;margin-top:8px;background:var(--edu);border-radius:1px}
.events{margin-top:16px;display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;padding:20px clamp(20px,2.6vw,34px);
  border:1px solid var(--line);border-radius:16px;background:var(--paper-2)}
.events .h4{margin:0}.events p{color:var(--ink-2);font-size:15.5px}

/* ---------- Transition scene (industrial -> education) ---------- */
.trans{position:relative;background:var(--dark);color:var(--d-text);overflow:hidden;padding:clamp(96px,13vw,190px) 0;border-top:1px solid var(--d-line-soft);border-bottom:1px solid var(--d-line-soft)}
.trans .stage{position:absolute;inset:0;z-index:0}
.trans .stage canvas{display:block;width:100%;height:100%}
.trans .grain{z-index:1}
.trans .sig-line{z-index:2}
.trans .sig-line{position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(63,208,201,.55) 18%,rgba(210,106,46,.55) 82%,transparent);transform:scaleX(var(--sig,1));transform-origin:left}
.trans .wrap{position:relative;z-index:2;text-align:center}
.trans .kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--d-text-3)}
.trans .big{font-family:var(--serif);font-weight:500;font-size:clamp(30px,6vw,76px);line-height:1.04;letter-spacing:-.03em;margin:22px auto 0;max-width:20ch}
.trans .big .b{display:block}
.trans .big .a2{background:linear-gradient(96deg,var(--signal) 12%,var(--edu-lift) 88%);-webkit-background-clip:text;background-clip:text;color:transparent}
.trans .sub2{margin:24px auto 0;max-width:52ch;color:var(--d-text-2);font-size:16.5px}
.trans .rails{position:absolute;inset:auto 0 0;height:clamp(70px,9vw,120px);z-index:1;opacity:.85}

/* ---------- Product / app ---------- */
.app{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(24px,4vw,64px);align-items:center}
@media(max-width:899px){.app{grid-template-columns:1fr}}
.phones{display:flex;gap:clamp(7px,1.1vw,14px);justify-content:center;align-items:flex-end;position:relative}
.phone{width:clamp(92px,min(15vw,28.2%),176px);flex:0 0 auto;border-radius:26px;padding:6px;background:#101418;
  box-shadow:0 2px 6px rgba(13,17,23,.14),0 22px 50px rgba(13,17,23,.20);transition:transform .6s var(--ease)}
.phone img{border-radius:21px;width:100%;height:auto}
.phone.mid{transform:translateY(-20px)}
.phone:hover{transform:translateY(-8px)}
.phone.mid:hover{transform:translateY(-28px)}
.h2.prod{font-size:clamp(30px,4.2vw,52px);line-height:1.08}
.h2.prod .b{display:block}
.h2.prod .b.small{font-size:.6em;color:var(--ink-3);margin-top:.22em;letter-spacing:-.02em}
.pts{margin-top:26px;border-top:1px solid var(--line)}
.pts li{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.pts .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ind)}
.pts .v{font-size:15.5px;color:var(--ink-2)}

/* ---------- Partnership steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
@media(max-width:1023px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:599px){.steps{grid-template-columns:1fr}}
.steps>div{background:var(--paper-2);padding:clamp(20px,2.6vw,32px);display:flex;flex-direction:column;gap:12px}
.steps .n{font-family:var(--mono);font-size:11.5px;color:var(--edu);letter-spacing:.06em}
.steps h3{font-size:18px;letter-spacing:-.02em}
.steps p{font-size:15px;color:var(--ink-2);line-height:1.6}
.note{margin-top:16px;padding:16px 18px;border-left:2px solid var(--edu);background:rgba(180,83,29,.05);font-size:15px;color:var(--ink-2);border-radius:0 10px 10px 0}

/* ---------- Team ---------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
@media(max-width:899px){.team{grid-template-columns:1fr}}
.team>div{background:var(--paper-2);padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;gap:12px}
.av{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:15px;letter-spacing:.02em;
  background:linear-gradient(140deg,#E9EBEF,#D8DBE1);color:var(--ink-2)}
.team h3{font-size:19px;letter-spacing:-.02em}
.team .role{font-family:var(--mono);font-size:11.5px;color:var(--ind);letter-spacing:.03em}
.team p{font-size:15px;color:var(--ink-2);line-height:1.6}

/* ---------- Intent (Q&A) ---------- */
.intent{background:var(--dark);color:var(--d-text)}
.qbox{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
@media(max-width:899px){.qbox{grid-template-columns:1fr}}
.qset{border:1px solid var(--d-line-soft);border-radius:14px;padding:20px;background:var(--dark-1)}
.qset fieldset{border:0;margin:0;padding:0;display:grid;gap:8px}
.qset legend{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--d-text-3);padding:0 0 12px}
.opt{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--d-text-2);padding:9px 11px;border-radius:9px;border:1px solid transparent;cursor:pointer;transition:background-color .18s,border-color .18s,color .18s}
.opt:hover{background:rgba(255,255,255,.045);color:var(--d-text)}
.opt input{appearance:none;-webkit-appearance:none;width:15px;height:15px;flex:0 0 15px;border-radius:50%;border:1.5px solid var(--d-text-3);margin:0;position:relative;transition:border-color .18s}
.opt input:checked{border-color:var(--signal)}
.opt input:checked::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--signal)}
.opt:has(input:checked){background:rgba(63,208,201,.09);border-color:rgba(63,208,201,.28);color:#fff}
.contact{margin-top:14px;display:grid;gap:8px;max-width:520px}
.contact label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--d-text-3)}
.contact input{background:rgba(255,255,255,.05);border:1px solid var(--d-line);border-radius:10px;padding:12px 14px;color:#fff;font-size:15px}
.contact input::placeholder{color:var(--d-text-3)}
.contact input:focus-visible{outline-color:var(--signal)}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.privacy{margin-top:16px;font-size:13.5px;color:var(--d-text-3);max-width:62ch}
.out{margin-top:22px;border:1px solid var(--d-line);border-radius:14px;padding:20px;background:var(--dark-1);display:none}
.out.on{display:block}
.out h3{font-size:17px;margin-bottom:4px}
.out .hint{font-size:13.5px;color:var(--d-text-3);margin-bottom:12px}
.out pre{margin:0;font-family:var(--mono);font-size:13px;line-height:1.65;color:var(--d-text);white-space:pre-wrap;word-break:break-word}
.copy{margin-top:14px}

/* ---------- Footer ---------- */
.ft{background:var(--dark);color:var(--d-text-3);padding:clamp(48px,6vw,88px) 0 34px;border-top:1px solid var(--d-line-soft)}
.ft-cta{display:grid;gap:14px;padding-bottom:clamp(34px,4vw,54px);border-bottom:1px solid var(--d-line-soft)}
.ft-cta .h2{color:var(--d-text)}
.ft-cta .sub{color:var(--d-text-2)}
.ft-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(20px,3vw,44px);padding:clamp(30px,4vw,48px) 0}
@media(max-width:899px){.ft-grid{grid-template-columns:1fr 1fr}}
@media(max-width:559px){.ft-grid{grid-template-columns:1fr}}
.ft-co{display:grid;gap:10px;font-size:13.5px;line-height:1.7;color:var(--d-text-2)}
.ft-col .ft-h{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--d-text-2);font-weight:400;margin-bottom:14px}
.ft-col li{font-size:14px;color:var(--d-text-2);padding:5px 0}
.ft-legal{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--d-line-soft);font-size:12.5px;line-height:1.7}
.ft-legal a{color:var(--d-text-2);border-bottom:1px solid var(--d-line)}
.ft-legal a:hover{color:#fff}

/* ---------- Reveal (progressive enhancement) ---------- */
.js [data-rv]{opacity:0;transform:translateY(18px)}
.js .no-anim [data-rv]{opacity:1;transform:none}
.line-mask{display:block;overflow:hidden}
.line-mask>span{display:block}

/* Reduced motion is a *slower* version of the same page, not a page with the
   effects deleted: the field renders as a still frame, the flowsheet keeps its
   drawn state, the signal line is already complete. */
/* On a phone the three screens get the full width of the display: shrinking
   them into the text column made them unreadable. */
/* On a phone the three screens are the section: no offsets, no crop, nothing
   that can push the row wider than the display. */
@media(max-width:560px){
  .app{grid-template-columns:1fr;gap:clamp(18px,4vw,28px)}
  /* Three phone frames in one row stop being legible on a 390px display, so the
     screenshots are shown large and stacked instead - readable first, decorative
     frame second. */
  .app .phones{display:grid;grid-template-columns:1fr;gap:18px;justify-items:center;overflow:visible}
  .app .phone{width:min(72vw,280px);flex:none;padding:5px;border-radius:20px}
  .app .phone img{width:100%;max-width:none;border-radius:16px}
  .app .phone.mid{transform:none}
  .app .phone.mid{transform:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-rv]{opacity:1;transform:none}
  .pipe-live,.hero-cue i::after,.mic i{animation:none}
  .pipe-live{stroke-dasharray:none}
  *{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}
  .trans .stage{opacity:1}
  #pcanvas{opacity:.92}
  .trans{background:radial-gradient(120% 80% at 22% 12%,#101A20 0%,#0A0E13 46%,var(--dark) 100%)}
  .trans .grain{opacity:.35}
  .sp-prog{opacity:1}
}
/* Phone: the field still runs, it just carries fewer, larger particles (the JS
   scales the count). It is never switched off - a scene with nothing in it is
   what the user flagged as "手机端根本没效果". */
@media (max-width:760px){
  .trans{background:radial-gradient(120% 80% at 50% 8%,#111C22 0%,#0A0F14 52%,var(--dark) 100%)}
  .trans .stage{opacity:.95}
}

/* =============================================================================
   REWORK ROUND 2 - the site gets two worlds and a real display scale.

   Before: every scene was the same light background, the same heading size and
   the same card row, so nothing led the eye and the whole thing read as a
   brochure. Now:
     .world-industry  factory floor - black, lit, instrumented, huge type
     .world-edu       classroom     - warm paper, tighter, human
     .world-light     editorial     - white, precise, small caps
   The hero is a full-height dark stage with the drawing lit inside it, so the
   page opens on an image instead of on a paragraph.
   ============================================================================= */

.h1{font-size:clamp(38px,min(7.4vw,9.6vh),106px);line-height:.99;letter-spacing:-.034em}
.h2{font-size:clamp(32px,5.4vw,76px);line-height:1.02;letter-spacing:-.032em}

/* ---------- hero: a dark stage, not a text page ---------- */
.hero{min-height:100svh;justify-content:flex-start;padding-top:calc(var(--hdr) + clamp(26px,4vw,58px));
  padding-bottom:clamp(20px,2.6vw,34px);background:var(--dark);color:var(--d-text)}
.hero-wrap{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,34px);min-height:calc(100svh - var(--hdr) - clamp(46px,6.6vw,92px))}
.hero-bg .sky{background:
  radial-gradient(120% 80% at 78% 2%,rgba(18,136,154,.20) 0%,rgba(18,136,154,0) 58%),
  radial-gradient(80% 60% at 6% 96%,rgba(180,83,29,.16) 0%,rgba(180,83,29,0) 60%),
  linear-gradient(180deg,#04060A 0%,#070A10 58%,#04060A 100%)}
.hero-bg .grid{background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:clamp(54px,6.4vw,92px) clamp(54px,6.4vw,92px);
  -webkit-mask-image:radial-gradient(88% 74% at 50% 26%,#000 22%,transparent 100%);
  mask-image:radial-gradient(88% 74% at 50% 26%,#000 22%,transparent 100%)}
.hero .eyebrow{color:var(--d-text-3)}
/* the header sits on the black hero before any scroll: give it the light-on-dark
   treatment immediately instead of waiting for the observer to fire */
.hero ~ * .hdr,.hdr:not(.is-scrolled){color:var(--ink)}
body:has(.hero) .hdr:not(.is-scrolled) .nav a{color:var(--d-text-2)}
body:has(.hero) .hdr:not(.is-scrolled) .nav a:hover{color:#fff}
body:has(.hero) .hdr:not(.is-scrolled) .nav a.is-active{color:#fff;box-shadow:inset 0 0 0 1px var(--d-line)}
body:has(.hero) .hdr:not(.is-scrolled) .lockup{color:var(--d-text)}
body:has(.hero) .hdr:not(.is-scrolled) .lang{color:var(--d-text-2);border-color:var(--d-line)}
body:has(.hero) .hdr:not(.is-scrolled) .btn{background:#fff;color:#0B0F14}
.hero h1{color:var(--d-text)}
.hero h1 .l2{color:#7C8794}
.hero .lede{color:var(--d-text-2)}
.hero-cue{color:var(--d-text-3)}
.hero-cue i{background:linear-gradient(var(--d-text-3),transparent)}
.hero-cue i::after{background:var(--signal)}

/* the drawing, lit, with telemetry in its corners */
.hero-stage{margin:0;flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.hs-frame{position:relative;flex:1 1 auto;min-height:clamp(240px,38vh,540px);border:1px solid var(--d-line);
  border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#0A0F16 0%,#05080C 100%);
  box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04)}
.hs-frame canvas{position:absolute;inset:0;width:100%;height:100%;display:none}
.hs-render{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block}
/* the flat drawing is the labelled index for the industrial scene, not an overlay
   on the hero render */
.hs-frame svg{display:none}
.hs-frame svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.hs-hud{position:absolute;z-index:3;left:clamp(14px,1.6vw,22px);right:clamp(14px,1.6vw,22px);top:clamp(12px,1.4vw,18px);
  display:flex;justify-content:space-between;gap:16px;align-items:flex-start;pointer-events:none}
.hs-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(237,240,243,.72);background:rgba(255,255,255,.05);border:1px solid var(--d-line);border-radius:999px;padding:5px 11px;backdrop-filter:blur(8px)}
.hs-tag .dot{width:5px;height:5px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 3px rgba(63,208,201,.2)}
.hs-read{font-family:var(--mono);font-size:10.5px;line-height:1.7;color:rgba(237,240,243,.52);letter-spacing:.03em;text-align:right}
.hs-corners i{position:absolute;width:12px;height:12px;border:1px solid rgba(255,255,255,.22)}
.hs-corners i:nth-child(1){left:8px;top:8px;border-right:0;border-bottom:0}
.hs-corners i:nth-child(2){right:8px;top:8px;border-left:0;border-bottom:0}
.hs-corners i:nth-child(3){left:8px;bottom:8px;border-right:0;border-top:0}
.hs-corners i:nth-child(4){right:8px;bottom:8px;border-left:0;border-top:0}
.hero-stage figcaption{margin:0;padding-top:12px;font-size:14px;line-height:1.55;color:var(--d-text-3)}
.hero-stage figcaption b{color:var(--d-text-2);font-weight:600}

/* numbers sit on the dark ground as a machine readout */
.hero-strip{margin-top:auto;border-top:1px solid var(--d-line);border-bottom:0;background:transparent;gap:1px}
.hero-strip>div{background:transparent;border-left:1px solid var(--d-line-soft);padding:16px 4px 4px}
.hero-strip>div:first-child{border-left:0}
.hero-strip .n{font-family:var(--serif);font-size:clamp(28px,3.2vw,48px);color:var(--d-text)}
.hero-strip .n sup{color:var(--signal)}
.hero-strip .l{color:var(--d-text-2);font-size:13px}
.hero-strip .note{color:var(--d-text-3)}
@media(max-width:719px){
  .hero{padding-top:calc(var(--hdr) + 18px)}
  .hero-wrap{gap:16px}
  .hs-hud{flex-direction:column;gap:8px}
  .hs-read{display:none}
  .hs-frame{border-radius:0;border-left:0;border-right:0;margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));min-height:clamp(200px,30vh,300px)}
  .hero-stage figcaption{padding-left:var(--gut);padding-right:var(--gut)}
  .hero-strip{grid-template-columns:1fr 1fr}
  .hero-strip>div{border-left:0;border-top:1px solid var(--d-line-soft);padding:12px 2px 2px}
  .hero-strip>div:nth-child(1),.hero-strip>div:nth-child(2){border-top:0}
}


/* =============================================================================
   ROUND 5 - the remaining list: the scenes stop being separate slides.

   .band        a marked transition between two worlds, riding the spine
   .bands/.band-item  M1 as two arguing full-width bands instead of two cards
   .mosaic      M5 in a mosaic/pixel language so it cannot be mistaken for the

/* =============================================================================
   ROUND 5b - hero impact: a shorter lead-in, a taller drawing, the headline
   sitting closer to it so type and image read as one block.
   ============================================================================= */
.hero-wrap{gap:clamp(14px,1.8vw,24px)}
.hero-top{gap:clamp(9px,1vw,13px);max-width:min(1000px,72vw)}
.hero h1{font-size:clamp(38px,min(7.6vw,10.4vh),116px)}
.hero .lede{font-size:clamp(16px,1.35vw,19px);max-width:min(56ch,52vw)}
.hero-cta{margin-top:clamp(14px,1.6vw,22px)}
.hs-frame{min-height:clamp(320px,56vh,720px)}
.hero-strip .n{font-size:clamp(30px,3.4vw,54px)}
.hs-hud{top:clamp(10px,1.1vw,14px)}
@media(max-width:719px){
  .hero h1{font-size:clamp(34px,11.4vw,54px)}
  .hero .lede{max-width:none}
  .hs-frame{min-height:clamp(230px,34vh,320px)}
}

/* the drawing is wider than the frame at this height: contain it and light the
   empty ends with the same ground colour instead of cropping equipment off */
.hs-frame{background:radial-gradient(120% 120% at 50% 42%,#0C131B 0%,#070B11 58%,#04060A 100%)}
.hs-render{object-fit:contain;object-position:50% 58%}
@media(max-width:719px){.hs-render{object-position:50% 60%}}

/* ---------- industrial text roles (restored) ----------
   These sections sit on the real dark base (#04060A). The light-world ink colours
   are unreadable there, so every role is stated explicitly. This block has now
   been lost twice by whole-file edits; it is appended at the end of the sheet on
   purpose so a later block cannot shadow it. */
.world-industry .sec-head{margin-bottom:clamp(34px,4vw,64px)}
.world-industry .eyebrow{color:var(--signal)}
.world-industry .sub{color:var(--d-text-2)}
.world-industry h1,.world-industry h2,.world-industry h3,.world-industry h4{color:var(--d-text)}
.world-industry p,.world-industry li,.world-industry dd,.world-industry .lede{color:var(--d-text-2)}
.world-industry em{color:var(--d-text-3)}
.world-industry .h2 em{color:#8E98A6}
.world-industry .ed-list>li>.n{color:#7E8894}
.world-industry .ed-index .idx-h{color:#9AA3AF}
.world-industry .ed-index ol li{color:#98A1AD}
.world-industry .ed-index ol li .n{color:#98A1AD}
.world-industry .ed-index ol li.is-on{color:var(--d-text)}
.world-industry .ed-index ol li.is-on .n{color:var(--signal)}
.world-industry .rule{background:var(--d-line-soft)}
.world-industry .stage-map .en,.world-industry .stage-fig figcaption{color:var(--d-text-2)}
.world-industry .stage-readout .k,.world-industry .stage-readout .u{color:#98A1AD}
.world-industry .quote cite{color:#98A1AD}
.world-industry .step .need{color:#98A1AD}
.ft p,.ft li{color:var(--d-text-2)}

/* =============================================================================
   ROUND 5 - the remaining list: the scenes stop being separate slides.

   .band                a marked transition between two worlds, riding the spine
   .bands / .band-item  M1 as two full-width bands instead of two cards
   .mosaic              M5 in a mosaic/pixel language, so it cannot be mistaken
                        for the industrial scenes
   ============================================================================= */

/* ---------- transition bands: no more bare cuts ---------- */
.band{position:relative;height:clamp(96px,13vw,168px);display:flex;align-items:center;justify-content:center;
  background:var(--paper);overflow:hidden}
.band .band-rail{position:absolute;left:calc(var(--gut) - 10px);top:0;bottom:0;width:1.5px;background:var(--line)}
.dark + .band,.band.on-dark,.trans + .band,.world-industry + .band{background:var(--dark)}
.band .band-mark{position:relative;display:flex;align-items:center;gap:12px;padding:0 20px;background:inherit}
.band .band-mark i{display:block;width:56px;height:1.5px;background:var(--line);position:relative}
.band .band-mark i::after{content:"";position:absolute;right:0;top:-2.5px;width:6px;height:6px;border-radius:50%;background:var(--signal)}
.band .band-mark em{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#68717D;font-style:normal;white-space:nowrap}
.band.on-dark em{color:#8A94A0}
.band.on-dark .band-rail{background:var(--d-line-soft)}
.band.on-dark .band-mark i{background:var(--d-line-soft)}

/* ---------- M1: two bands of tension ---------- */
.bands{border-top:1px solid var(--line)}
.band-item{display:grid;grid-template-columns:clamp(96px,13vw,220px) 1fr;gap:clamp(18px,3.4vw,54px);
  padding:clamp(30px,4.4vw,64px) 0;border-bottom:1px solid var(--line);align-items:start;position:relative}
.band-item .band-no{font-family:var(--serif);font-size:clamp(58px,9vw,132px);line-height:.86;letter-spacing:-.05em;
  color:var(--ind);opacity:.92}
.band-item.edu .band-no{color:var(--edu)}
.band-copy{display:flex;flex-direction:column;gap:14px;max-width:74ch}
.band-item .lock{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.band-item h3{font-size:clamp(22px,3vw,38px);letter-spacing:-.028em;line-height:1.1}
.band-item .sub2{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);letter-spacing:.01em}
.band-item .body{font-size:clamp(15.5px,1.5vw,17.5px);line-height:1.66;color:var(--ink-2)}
.band-item ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 26px;margin:2px 0 0;padding:0;list-style:none}
.band-item li{font-size:14.5px;color:var(--ink-2);padding:9px 0;border-top:1px solid var(--line-soft);display:flex;gap:9px}
.band-item li::before{content:"";width:5px;height:5px;flex:0 0 5px;margin-top:8px;background:var(--ind);border-radius:1px}
.band-item.edu li::before{background:var(--edu)}
.band-item::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--ind);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.band-item.edu::after{background:var(--edu)}
.band-item:hover::after,.band-item:focus-within::after{transform:scaleX(1)}
@media(max-width:719px){
  .band-item{grid-template-columns:1fr;gap:12px}
  .band-item .band-no{font-size:clamp(46px,18vw,72px);opacity:.75}
  .band-item ul{grid-template-columns:1fr}
}

/* ---------- M5: mosaic ---------- */
.mosaic{margin-top:clamp(34px,4.4vw,60px);border-top:1px solid var(--line);padding-top:clamp(20px,2.4vw,32px)}
.mosaic-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.mosaic-head .h4{font-size:clamp(17px,2vw,22px)}
.mosaic-head .legend{display:flex;gap:16px;flex-wrap:wrap}
.mosaic-head .legend span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:#8A5B3C;display:flex;align-items:center;gap:6px}
.mosaic-head .legend i{width:9px;height:9px;border-radius:2px;display:block}
.mosaic-body{display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-items:start}
.mosaic-grid{display:grid;grid-template-columns:repeat(var(--cols,26),1fr);gap:3px;width:100%}
.mosaic-grid b{aspect-ratio:1;border-radius:2px;background:#EFE6DE;opacity:0;transform:scale(.4);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mosaic-grid b.on{opacity:1;transform:none}
.mosaic-grid b.t1{background:#E8CDB8}
.mosaic-grid b.t2{background:#D89C6E}
.mosaic-grid b.t3{background:#B4531D}
.mosaic-grid b.t4{background:#7C3A16}
.mosaic-foot{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px;margin-top:22px;
  border-top:1px solid var(--line);padding-top:18px}
.mosaic-foot div{display:flex;flex-direction:column;gap:4px}
.mosaic-foot .n{font-family:var(--serif);font-size:clamp(24px,3vw,38px);line-height:1;color:#2A1D14}
.mosaic-foot .l{font-size:13.5px;color:#6B4E3C}
@media(max-width:719px){.mosaic-grid{grid-template-columns:repeat(13,1fr)}}


/* =============================================================================
   ROUND 6 - the two scenes have to MOVE, and the phone has to be readable.
   The verifier measured 0.000% pixel change over 2.05s in the hero and the
   industrial scene while every animated layer inside them was display:none.
   ============================================================================= */

/* the 3D line drifts against the scroll: the image is a scene, not a screenshot */
.hs-render{animation:heroDrift 26s ease-in-out infinite}
@keyframes heroDrift{
  0%{transform:translate3d(-0.5%,0.4%,0) scale(1.015)}
  50%{transform:translate3d(0.5%,-0.6%,0) scale(1.035)}
  100%{transform:translate3d(-0.5%,0.4%,0) scale(1.015)}
}

/* the transition bands carry a travelling light, so a scene change is announced */
.band .band-mark::before{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;
  background:linear-gradient(90deg,transparent,var(--line) 14%,var(--line) 86%,transparent);z-index:-1}
.band::after{content:"";position:absolute;top:50%;left:0;width:34%;height:2px;margin-top:-1px;
  background:linear-gradient(90deg,transparent,rgba(14,110,124,.55),transparent);
  animation:bandSweep 5.4s cubic-bezier(.45,0,.55,1) infinite;pointer-events:none}
.band.on-dark::after,.dark + .band::after{background:linear-gradient(90deg,transparent,rgba(63,208,201,.6),transparent)}
@keyframes bandSweep{0%{transform:translateX(-40%);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(320%);opacity:0}}

/* a settled state the layout can always fall back to */
[data-rv]{opacity:1;transform:none}

@media(max-width:719px){
  /* the engineering drawing has to be readable on a phone: give the frame the
     height for its real aspect and let it scroll sideways inside itself */
  .stage-frame{height:min(62vh,420px)}
  .stage-drawing{width:760px;height:100%;left:0;right:auto}
}

@media(prefers-reduced-motion:reduce){
  .hs-render,.band::after{animation:none}
  .band::after{opacity:0}
  .mosaic-grid b{transition:none;opacity:1;transform:none}
}

/* the hero stats strip settles visible: every reveal target resolves, so no
   element can be left invisible by a transform that never ran */
/* The guarantee that nothing is left invisible lives in JS (rv-ready below). This
   rule is only a FALLBACK for the case where the reveal never ran at all, so it is
   scoped to the html element the script sets once the intro has finished. An
   unscoped !important here silently disabled every entrance animation. */
html.rv-fallback [data-rv],html.rv-fallback .hero-strip{opacity:1!important;transform:none!important;visibility:visible!important}

/* mobile-drawing-appended
   The 719px block near the top of the sheet pins .stage-drawing to width:100%, and
   an earlier rule beat the later override, so the engineering drawing was squeezed
   to 348px on a phone. Pin it here, at the end of the cascade, and let the frame
   scroll sideways inside itself. */
@media(max-width:719px){
  .stage-frame{height:min(58vh,340px)!important;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;outline-offset:-3px}
  .stage-drawing{width:560px!important;min-width:560px!important;max-width:none!important;height:100%;position:absolute;left:0;top:0}
  .stage-flow{width:560px}
  .stage-legend{position:sticky;left:0}
}

.stage-frame:focus-visible{outline:2px solid var(--signal)}
/* a hairline scrollbar rather than a full-width one inside the frame */
.stage-frame{scrollbar-width:thin}

/* mobile contrast fixes (axe, 390): both were reported at 2.99:1 and 3.28:1 */
@media(max-width:719px){
  .band-item.edu .band-no{color:#A2542A}
  .band.on-dark .band-mark em,.band.on-dark em{color:#8A94A0}
}

/* =============================================================================
   ROUND 7 - the verifier measured what I claimed and found it flat:
     * the industrial slug layer was display:none (a broad `.stage-frame svg`
       rule I wrote to hide the old FLOWSHEET_BIG also hit .stage-flow, because
       it is an svg inside .stage-frame) - specificity 0,1,1 beats 0,1,0
     * the hero figcaption sits on the hero gradient and no automated checker
       looks at it, so it stayed at 2.7:1
     * the phone had no affordance telling anyone the drawing scrolls
   ============================================================================= */

/* the slug layer is visible again; the old inline flowsheet stays hidden */
.stage-frame .stage-flow{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.stage-frame > svg:not(.stage-flow){display:none}

/* body text on the hero ground, measured not guessed: #A7B0BC is 7.4:1 on #04060A */
.hero .hero-stage figcaption,.hero-stage figcaption{color:#BFC8D3}
.hero-stage figcaption b{color:var(--d-text)}

/* the phone gets told the drawing scrolls */
.stage-hint{display:none}
@media(max-width:719px){
  .stage-hint{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-family:var(--mono);
    font-size:11px;letter-spacing:.06em;color:var(--d-text-2)}
  .stage-hint::before{content:"";width:26px;height:1.5px;background:linear-gradient(90deg,var(--signal),transparent);
    animation:hintSlide 2.4s ease-in-out infinite}
  .stage-hint::after{content:"→";color:var(--signal)}
}
@keyframes hintSlide{0%,100%{transform:translateX(0);opacity:.5}50%{transform:translateX(6px);opacity:1}}
@media(prefers-reduced-motion:reduce){.stage-hint::before{animation:none}}

/* contrast headroom on the quieter small text (partners numerals, team roles) */
.partners .num,.partners .stat .n{color:#0E1319}
.team .role,.team .meta{color:#424A55}
.youju .role{color:#424A55}

/* the hint string lives on the frame as data-scroll-hint; render it here rather
   than duplicating it in the template */
@media(max-width:719px){
  .stage-hint{width:100%}
  .stage-hint::after{content:attr(data-scroll-hint)}
}

/* the five stream rows as real text, on phones where the raster table is ~5px */
.stream-table{display:none}
@media(max-width:719px){
  .stream-table{display:block;margin-top:14px}
  .stream-table table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11.5px}
  .stream-table caption{text-align:left;font-size:11px;color:var(--d-text-2);padding-bottom:8px}
  .stream-table th,.stream-table td{text-align:left;padding:7px 6px;border-top:1px solid var(--d-line-soft);color:var(--d-text-2)}
  .stream-table thead th{color:var(--signal);font-weight:400;letter-spacing:.06em;border-top:0;padding-bottom:4px}
  .stream-table tbody th{color:var(--d-text);font-weight:400}
  .stream-table td{font-variant-numeric:tabular-nums}
}

/* =============================================================================
   ROUND 7b - the verifier pixel-sampled the hero caption on the ACTUAL ground
   under the frame (not the nominal #04060A) and got 4.10:1 at 1440. It also
   measured the slugs at ~116x42 px on a 1440 screen: too big, they sat on the
   equipment symbols and their labels.
   ============================================================================= */

/* caption: lighter ink plus its own scrim, so the ratio no longer depends on what
   the hero ground happens to be doing behind that line */
.hero-stage figcaption{color:#BFC8D3;position:relative;
  background:linear-gradient(90deg,rgba(4,6,10,.86),rgba(4,6,10,.34) 70%,rgba(4,6,10,0));
  padding-top:8px;padding-bottom:8px}
.hero-stage figcaption b{color:#fff}

/* slugs: thinner, dimmer, shorter - the drawing stays the subject */
.stage-flow .fl-under{stroke-width:.8;opacity:.45}
.unit-light .ul-halo{r:3.2px}
@media(max-width:719px){
  /* removed */
  .unit-light .ul-halo{r:2.4px}
}

/* partners numerals were 3.71-3.96 at 11.5px; make them properly dark */
.partners .num,.partners .stat .n,.partners .figure,.stop .n{color:#05080C}
.partners .role,.partners .meta,.partners small,.stop .role,.stop .meta{color:#39414C}

/* ROUND 7c - 7b was not quiet enough. The verifier called the flow layer the
   subject instead of the drawing; the slugs and the unit halos both come down.
   (.fl-run's bounding box is the whole path, so the only number that matters
   here is stroke-width: 5.2 -> 2.4 user units, about 18 -> 8 screen px.) */
.stage-flow .fl-grid{opacity:.16}
.stage-flow .fl-under{stroke-width:.7;opacity:.4}
.unit-light .ul-halo{r:2.4px}
.unit-light .ul-dot{r:1.2px;opacity:.28}
@media(max-width:719px){
  .unit-light .ul-halo{r:1.8px}
  .unit-light .ul-dot{r:1px}
}

/* ROUND 7d/7e - the dash approach was abandoned. A stroke-dasharray on a
   non-uniformly scaled svg renders as a block, so material is a BEAD ON A PATH
   instead (.fl-dot with animateMotion). Every rule that targeted the old
   .fl-run element has been deleted rather than commented out: a rule with no
   matching element is how a stale !important sat here for four rounds and made
   the beads 10x too heavy on phones. */
/* ROUND 7d - the round caps were the problem, not the width. A 3.2-unit round-cap
   dash at 7.5x scale renders as a 24x24 px lozenge, so any width I choose still
   looks like a pellet sitting on the equipment. Switch the metaphor: a continuous
   flowing dash, colour-matched to the stream, no glow, no white. */
.stage-flow .flow-line[data-tone='cyan']{color:#4FD8D1}
.stage-flow .flow-line[data-tone='amber']{color:#E09A5C}
.stage-flow .fl-grid{opacity:.12}
.stage-flow .fl-under{stroke-width:.6;opacity:.32}
.unit-light .ul-halo{r:2px}
.unit-light .ul-dot{r:1px;opacity:.22}
@media(max-width:719px){
  /* removed: superseded by the bead treatment */
  .unit-light .ul-halo{r:1.6px}
}

/* ROUND 7e - a `stroke-dasharray` on a stretched SVG renders as a block, not as
   material: 1.6 user units across a 148-unit viewBox stretched to 1111 px is a
   12 px thick bar, and the dash length lands at 20 px, so it reads as a mosaic
   tile travelling the pipe. Material is now a DOT on a path (animateMotion),
   which is correct at any container size and cannot be stretched. */
.stage-flow .fl-rail{fill:none;stroke-width:.55;opacity:.42}
.stage-flow .fl-dot{opacity:.95}
.stage-flow .fl-grid{opacity:.12}
.stage-flow .fl-under{stroke-width:.6;opacity:.3}
.unit-light .ul-halo{r:2.2px}
.unit-light .ul-dot{r:1.1px;opacity:.25}
@media(max-width:719px){
  .stage-flow .fl-rail{stroke-width:.9}
  .unit-light .ul-halo{r:1.7px}
}

/* ROUND 7f - the dots were r=1.15 user units on a 148-unit viewBox stretched to
   1111 px, so each one drew 35 px across and five of them per stream became a
   caterpillar. A dot is now a stroke-only circle with vector-effect, which keeps
   its width in SCREEN pixels whatever the container does. */
/* superseded by ROUND 7g: kept as a comment so the history is legible
   .stage-flow .fl-dot{r:0!important;fill:none!important;stroke-width:5px!important;
     vector-effect:non-scaling-stroke;opacity:.9!important} */
.stage-flow .flow-line[data-tone='cyan'] .fl-dot{stroke:#5BDCD4}
.stage-flow .flow-line[data-tone='amber'] .fl-dot{stroke:#E09A5C}
.stage-flow .fl-rail{stroke-width:.9;opacity:.42}
.unit-light .ul-halo{r:2.2px}
.unit-light .ul-dot{r:1.1px;opacity:.25}
@media(max-width:719px){
  .stage-flow .fl-dot{r:0.34px;stroke-width:0.28px}
  .stage-flow .fl-rail{stroke-width:.8}
}

/* ROUND 7g - settle the dot. `vector-effect` does not do what I hoped on a
   non-uniformly scaled svg, so the size now comes from the shape's own units:
   r=0.42 plus a 0.34 outline is about 12 user units across, ~9 screen px of the
   1111 px frame for the belt direction. Dark fill, coloured ring, so it reads as
   a bead of material rather than a glowing blob. */
.stage-flow .fl-dot{r:0.42px;fill:#05080C;stroke-width:.34;opacity:.95}
.stage-flow .flow-line[data-tone='cyan'] .fl-dot{stroke:#4FD8D1}
.stage-flow .flow-line[data-tone='amber'] .fl-dot{stroke:#E09A5C}
.stage-flow .fl-rail{stroke-width:.55;opacity:.42}
.unit-light .ul-halo{r:2px}
.unit-light .ul-dot{r:1px;opacity:.22}
@media(max-width:719px){
  .stage-flow .fl-dot{r:0.34px;stroke-width:.28}
  .stage-flow .fl-rail{stroke-width:.7}
  .unit-light .ul-halo{r:1.5px}
}

/* ROUND 7h - final sizes, all in the svg's own user units:
   dot r 0.42 + 0.34 outline ~ 8 px on a 1440 screen; rail 0.55 ~ 8 px of the
   drawing's own line weight, so the drawing stays the subject. */
.stage-flow .fl-rail{stroke-width:.55;opacity:.42}
.stage-flow .fl-dot{r:0.42px;fill:#05080C;stroke-width:.34;opacity:.95}
.stage-flow .fl-under{stroke-width:.5;opacity:.26}

/* ROUND 9 - the last of the borderline small text. The verifier pixel-sampled
   40/779 runs under 4.5:1; the reliable ones are 11-12.5 px labels sitting at
   4.01-4.45. These are quiet-by-design greys, so two steps darker is invisible
   as a design change and clears the threshold with headroom. */
.eyebrow,.companies .eyebrow,.sec-head .eyebrow{color:#5A626D}
.world-industry .eyebrow,.hero .eyebrow{color:#6FC6C0}
.sub2,.companies .origin{color:#5A626D}
.team .role,.team .meta{color:#3A424D}
.stop .n{color:#05080C}
.stop .role,.stop .meta{color:#39414C}

/* the live canvas sits exactly where the still is; the still stays underneath as the
   fallback until a frame has actually been drawn, so a WebGL failure costs nothing */
.hs-3d{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;
  transition:opacity .5s ease;pointer-events:none}
.hs-3d.is-live{opacity:1}
.hs-frame.has-3d .hs-render{opacity:0;transition:opacity .5s ease}
@media(prefers-reduced-motion:reduce){.hs-3d{transition:none}.hs-frame.has-3d .hs-render{transition:none}}

/* HERO CANVAS - the live 3D sits above the still. An earlier rule hid every canvas
   inside .hs-frame to retire the old inline flowsheet, and that silently killed this
   one too: display:none on a 1111x502 element that had just drawn a frame. */
.hs-frame .hs-3d{display:block!important;position:absolute;inset:0;width:100%;height:100%;z-index:3}

/* the mosaic reads as TIME: three year bands on the axis, a running count, and the
   reveal fills left to right instead of in a diagonal wave */
.mosaic-years{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-bottom:8px}
.mosaic-years span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:#8A5B3C;
  padding-bottom:5px;border-bottom:1px solid rgba(180,83,29,.22);text-align:center}
.mosaic-years span:first-child{text-align:left}
.mosaic-years span:last-child{text-align:right}
.mosaic-count{display:flex;align-items:baseline;gap:8px;margin-top:12px}
.mosaic-count .n{font-family:var(--serif);font-size:clamp(22px,2.6vw,32px);line-height:1;color:#B4531D;
  font-variant-numeric:tabular-nums}
.mosaic-count .u{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:#8A5B3C}
.mosaic-how{color:#4A3626}

/* M7: one drawn object per station, so the axis carries goods, not concepts */
.stop .art{display:block;width:54px;height:54px;margin-bottom:12px;color:var(--edu)}
.stop .art svg{width:100%;height:100%;display:block}
.stop:nth-child(odd) .art{color:var(--ind)}
@media(max-width:719px){.stop .art{width:42px;height:42px;margin-bottom:8px}}

/* route pictograms: one drawn object per step, matched to that step's own copy. An
   earlier set (ship, crate, stamp, shelf) illustrated a different journey than the
   four steps actually describe, which is worse than no picture at all. */
.stop .art{color:var(--ind)}
.stop:nth-child(3) .art{color:var(--edu)}

/* row labels: five categories beside the grid, aligned to the two grid rows each
   band occupies, so a reader knows what every band means before reading the legend */
.mosaic-rows{display:grid;gap:3px;--cell:1px}
.mosaic-rows span{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.03em;color:#6B4E3C;white-space:nowrap;min-height:0}
.mosaic-rows i{width:8px;height:8px;border-radius:2px;flex:0 0 8px}
.mosaic-years{margin-left:0}
.mosaic-grid b.t5{background:#E7C9A6}
@media(max-width:719px){
  .mosaic-body{grid-template-columns:1fr}
  .mosaic-rows{grid-auto-flow:column;grid-template-columns:repeat(2,auto);gap:4px 14px;margin-bottom:8px}
}

/* partners animated gradient: the route section was the flattest on the page. A slow
   two-layer wash behind it gives the axis a direction without adding a single element. */
.partners{position:relative;overflow:hidden}
.partners::before{content:"";position:absolute;left:-20%;right:-20%;top:-30%;height:130%;pointer-events:none;z-index:0;
  background:
    radial-gradient(38% 46% at 18% 38%,rgba(14,110,124,.16),transparent 62%),
    radial-gradient(34% 42% at 78% 60%,rgba(180,83,29,.14),transparent 64%);
  animation:partnersDrift 26s cubic-bezier(.45,0,.55,1) infinite alternate}
.partners::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(14,110,124,.55),rgba(180,83,29,.45),transparent);
  background-size:220% 100%;animation:partnersSheen 9s linear infinite}
.partners>*{position:relative;z-index:2}
@keyframes partnersDrift{
  0%{transform:translate3d(-2%,-1%,0) scale(1)}
  50%{transform:translate3d(1.5%,1.5%,0) scale(1.05)}
  100%{transform:translate3d(3%,-2%,0) scale(1.02)}
}
@keyframes partnersSheen{0%{background-position:120% 0}100%{background-position:-120% 0}}
@media(prefers-reduced-motion:reduce){.partners::before,.partners::after{animation:none}}

/* mosaic 390 fix - the two-column label block sized itself to its content and pushed
   the document to 475px on a 390 viewport (65 overflow reports on the English page) */
@media(max-width:719px){
  .mosaic-body{grid-template-columns:minmax(0,1fr)}
  .mosaic-grid{min-width:0}
  .mosaic-rows{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0}
  .mosaic-rows span{min-width:0;overflow:hidden;text-overflow:ellipsis}
}

/* hero 3D rolled back (2026-10-09): the live model read as a pale flat toy beside the
   still render, so the hero is the Blender image again. The canvas rules below it are
   left in place for the next attempt but switched off, so no stray element can be
   pushed into the layout by them. */
.hs-3d{display:none!important}