/* ── H.OS 单产品叙事 demo ──
   空间层（.cam/.world/.rig/.core/.deck/.rail/.notes/.links/.motes）来自 spatial.css，逐字复用。
   这个文件只写：站点外壳、六幕的舞台，以及把滚动进度 --q 翻译成画面的规则。
   一屏一个观点：每一幕都先给观点，再用动画证明它，然后停下来给事实。 */

:root{
  --navy:#1a2238; --navy-soft:#3c465e;
  --gold:#a8874a; --gold-pale:#c2a166;
  --cream:#f2efe8; --cream-deep:#e5e0d2;
  --night:#05080f;
  --lp:clamp(1.5rem,6vw,5.5rem);   /* 页面左右留白 */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.hos{
  margin:0; background:var(--night); color:var(--navy);
  font-family:var(--tevo-cjk);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.wrap{max-width:72rem;margin:0 auto;padding:0 var(--lp)}
a{color:inherit;text-decoration:none}

/* ══ 顶栏 ══ */
.sn{
  position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;gap:2rem;
  padding:0 var(--lp);height:4.5rem;
  color:#f6f3ec;
  transition:background .4s ease,box-shadow .4s ease,color .4s ease,height .4s ease;
}
.sn.on{background:rgba(242,239,232,.94);backdrop-filter:blur(14px);color:var(--navy);height:3.9rem;
  box-shadow:0 1px 0 rgba(26,34,56,.12)}
.sn-mark{display:flex;align-items:center;gap:.55rem;text-decoration:none;font-size:.95rem}
.sn-mark img{width:22px;height:22px;object-fit:contain}
.sn-mark b{font-weight:600;letter-spacing:.06em}
.sn-mark span{font-size:.68rem;letter-spacing:.18em;opacity:.6;font-family:var(--tevo-cjk);text-transform:uppercase}
.sn-menu{display:none}
.st-beat2{display:none}
.sn-nav{margin-left:auto;display:flex;gap:1.6rem;font-size:.85rem}
.sn-nav a{text-decoration:none;opacity:.72;transition:opacity .25s,color .25s}
.sn-nav a:hover,.sn-nav a.on{opacity:1;color:var(--gold-pale)}
.sn.on .sn-nav a:hover,.sn.on .sn-nav a.on{color:var(--gold)}
.sn-cta{
  text-decoration:none;font-size:.82rem;padding:.5rem 1rem;border-radius:999px;
  border:1px solid currentColor;opacity:.85;transition:.25s
}
.sn-cta:hover{opacity:1;background:var(--gold);border-color:var(--gold);color:#fff}

/* ══ 幕 1 · 首屏 ══ */
.st{position:relative;height:210vh;background:var(--night)}
.st-pin{position:sticky;top:0;height:100svh;overflow:hidden}
.hero-cam{--k:1}
.st-scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,8,15,.72) 0%,rgba(5,8,15,0) 24%),
    linear-gradient(90deg,rgba(5,8,15,.88) 0%,rgba(5,8,15,.6) 42%,rgba(5,8,15,.1) 74%,rgba(5,8,15,.3) 100%);
  opacity:clamp(.32,calc(1 - 1.5*var(--p,0)),1);
}
.st-copy{
  position:absolute;z-index:3;left:var(--lp);bottom:clamp(3rem,11vh,7.5rem);
  max-width:min(34rem,62vw);color:#f6f3ec;
  opacity:clamp(0,calc(1 - 2.1*var(--p,0)),1);
  transform:translateY(calc(var(--p,0) * -40px));
}
.st-kicker{font-family:var(--tevo-cjk);font-size:.72rem;letter-spacing:.34em;color:var(--gold-pale)}
.st-rule{display:block;width:2.4rem;height:1px;background:var(--gold);margin:.9rem 0 1.5rem}
.st-h1{
  font-size:clamp(2.6rem,5.6vw,4.6rem);line-height:1.1;margin:0 0 1.4rem;font-weight:500;
  letter-spacing:.01em;color:#fbf8f1;
}
.st-lead{font-size:clamp(.95rem,1.15vw,1.06rem);line-height:1.95;color:rgba(246,243,236,.8);margin:0 0 2.1rem;max-width:29rem}
.st-go{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-size:.95rem;
  color:#fbf8f1;padding-bottom:.5rem;border-bottom:1px solid rgba(194,161,102,.55);transition:.3s
}
.st-go span{transition:transform .3s}
.st-go:hover{border-color:var(--gold-pale)}
.st-go:hover span{transform:translateX(6px)}
/* 中枢右侧那张小卡 */
.edge-card{--px:600px;--py:-210px;--pz:-90px;--ry:-16deg;width:210px;padding:12px 14px}
.ec-k{font-family:var(--tevo-cjk);font-size:10px;letter-spacing:.16em;color:var(--gp);display:block;margin-bottom:6px}
.edge-card p{margin:0;font-size:12px;line-height:1.7;color:var(--dim)}
.edge-card b{color:var(--ink);font-weight:600}
.notes{--px:520px;--py:70px;--pz:-120px;--ry:-19deg;width:236px;padding:14px 16px}
.notes h3{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--ink)}
.notes p{margin:0 0 7px;font-size:12px;line-height:1.65;color:var(--dim)}
.notes b{color:var(--ink)}
.np-go{color:var(--gp)!important;font-size:11.5px!important;margin-top:10px!important}

/* ══ 幕的通用舞台 ══ */
.act{position:relative}
.act-pin{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:6.5rem var(--lp) 4rem;overflow:hidden}
.act-head{max-width:44rem;margin:0 0 clamp(2rem,5vh,3.4rem)}
.act-h2{font-size:clamp(1.9rem,3.7vw,3.2rem);line-height:1.24;margin:0 0 1.2rem;font-weight:500;letter-spacing:.01em}
.act-lead{font-size:clamp(.92rem,1.05vw,1.02rem);line-height:2;margin:0;max-width:34rem;opacity:.78}
.act-foot{font-family:var(--tevo-cjk);font-size:.8rem;letter-spacing:.04em;opacity:.55;margin:clamp(1.6rem,4vh,2.6rem) 0 0}
.act-foot b{font-weight:600;opacity:1}
/* 进场：一次，不回弹 */
[data-act] .act-head,[data-act] .act-foot{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
[data-act].is-in .act-head{opacity:1;transform:none}
[data-act].is-in .act-foot{opacity:.55;transform:none}

/* ── 夜色幕（2、5）── */
.act-sense,.act-proof{background:var(--night);color:#f6f3ec}
.act-sense .act-lead,.act-proof .act-lead{color:rgba(246,243,236,.72)}
.act-sense .act-foot,.act-proof .act-foot{color:rgba(246,243,236,.5)}
.act-sense .act-h2,.act-proof .act-h2{color:#fbf8f1}
.act-sense::before,.act-proof::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 46% at 72% 46%,rgba(168,135,74,.16),transparent 70%)
}

/* ══ 幕 2 · 全局感知：四路信号汇入中枢 ══ */
.field{position:relative;flex:1;min-height:min(46vh,420px);perspective:1200px;transform-style:preserve-3d}
.field-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;width:112px;height:112px;
}
.field-core b{
  position:relative;z-index:2;font-family:var(--tevo-cjk);font-size:.78rem;letter-spacing:.16em;
  color:#fbf8f1;
}
.fc-dot{position:absolute;inset:26px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,220,.95),rgba(194,161,102,.36) 55%,transparent 72%);
  filter:blur(1px);
  transform:scale(calc(.5 + .5*var(--q,0)));opacity:calc(.35 + .65*var(--q,0));transition:.2s linear}
.fc-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(194,161,102,.4);
  transform:scale(calc(.8 + .3*var(--q,0)));opacity:calc(.2 + .8*var(--q,0))}
.zone{
  --a:clamp(0,calc((var(--q,0) - var(--t0)) * 6),1);
  position:absolute;width:min(21rem,32vw);padding:1rem 1.15rem;border-radius:14px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(9px);
  opacity:calc(.12 + .88*var(--a));
  transform:translateZ(calc(-170px + 170px*var(--a)));
  transition:opacity .25s linear,transform .35s cubic-bezier(.16,1,.3,1),border-color .4s;
  border-color:rgba(194,161,102,calc(.08 + .34*var(--a)));
}
.z1{--t0:.08;left:0;top:2%}
.z2{--t0:.22;right:0;top:8%}
.z3{--t0:.36;left:4%;bottom:2%}
.z4{--t0:.5;right:4%;bottom:6%}
.z-k{font-family:var(--tevo-cjk);font-size:.66rem;letter-spacing:.2em;color:var(--gold-pale);display:block;margin-bottom:.5rem}
.zone b{display:block;font-size:.92rem;font-weight:500;line-height:1.5;color:#fbf8f1;margin-bottom:.35rem}
.zone em{font-style:normal;font-size:.78rem;line-height:1.6;color:rgba(246,243,236,.6);font-family:var(--tevo-cjk)}
/* 光束：从卡片朝中枢延伸，长度就是这一路信号接进来的进度 */
.z-beam{position:absolute;height:1px;width:14vw;top:50%;
  background:linear-gradient(90deg,rgba(194,161,102,.75),rgba(194,161,102,0));
  transform:scaleX(var(--a));opacity:calc(.15 + .85*var(--a));transition:transform .35s ease}
.z1 .z-beam,.z3 .z-beam{left:100%;transform-origin:0 50%}
.z2 .z-beam,.z4 .z-beam{right:100%;transform-origin:100% 50%;
  background:linear-gradient(270deg,rgba(194,161,102,.75),rgba(194,161,102,0))}

/* ══ 幕 3 · 定价回合：一条链，走完一整个回合 ══ */
.act-price{background:var(--cream)}
.act-price .act-pin{justify-content:flex-start}
.chain{list-style:none;margin:0;padding:0;position:relative;flex:1;
  display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.2rem);perspective:1400px}
.cs{
  flex:1 1 0;min-width:0;padding:1.1rem 1.2rem 1.25rem;border-radius:14px;
  background:#fff;border:1px solid rgba(26,34,56,.1);
  box-shadow:0 1px 2px rgba(26,34,56,.04);
  opacity:.28;transform:translateZ(-90px) translateY(14px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1),box-shadow .5s,border-color .5s,flex-grow .6s cubic-bezier(.16,1,.3,1);
}
.cs.is-past{opacity:.5;transform:translateZ(-40px)}
.cs.is-now{opacity:1;transform:translateZ(46px);flex-grow:1.9;
  border-color:rgba(168,135,74,.5);box-shadow:0 18px 44px -18px rgba(26,34,56,.32)}
.cs-k{font-family:var(--tevo-cjk);font-size:.62rem;letter-spacing:.2em;color:var(--gold);display:block;margin-bottom:.6rem}
.cs h3{font-size:1rem;font-weight:600;margin:0 0 .6rem;line-height:1.4}
.cs p{font-size:.82rem;line-height:1.8;margin:0;opacity:.72;font-family:var(--tevo-cjk)}
.cs b{font-weight:600;opacity:1;color:var(--navy)}
.cs .ok{color:#2f7d54;font-weight:600}
/* 只有正在发生的这一步才展开细节 —— 停下来给事实 */
.cs .pc,.cs .pc-act,.cs .pc-res{max-height:0;opacity:0;overflow:hidden;transition:max-height .6s ease,opacity .4s ease,margin .6s ease}
.cs.is-now .pc,.cs.is-now .pc-act,.cs.is-now .pc-res{max-height:16rem;opacity:1;margin:.2rem 0 .7rem}
.pc-price{display:flex;align-items:baseline;gap:.55rem;margin-bottom:.7rem;font-family:var(--tevo-cjk)}
.pc-price s{opacity:.42;font-size:.95rem}
.pc-price span{color:var(--gold);font-size:.85rem}
.pc-price b{font-size:1.7rem;font-weight:600;color:var(--navy);letter-spacing:-.01em}
.pc-m{display:flex;justify-content:space-between;gap:1rem;font-family:var(--tevo-cjk);
  font-size:.76rem;padding:.42rem 0;border-top:1px solid rgba(26,34,56,.08)}
.pc-m span{opacity:.6}
.pc-m b{font-weight:600}
.pc-act{display:flex;gap:.45rem;flex-wrap:wrap}
.pa{font-family:var(--tevo-cjk);font-size:.75rem;padding:.36rem .72rem;border-radius:999px;
  border:1px solid rgba(26,34,56,.16);opacity:.5}
.pa.on{background:var(--navy);color:#fbf8f1;border-color:var(--navy);opacity:1}
.pc-res{display:flex;gap:1.4rem}
.pc-res div{display:flex;flex-direction:column;font-family:var(--tevo-cjk)}
.pc-res b{font-size:1.35rem;font-weight:600;letter-spacing:-.01em}
.pc-res span{font-size:.68rem;letter-spacing:.14em;opacity:.55;margin-top:.15rem}
/* 底下那条轨：走到哪一步一眼看得见 */
.chain-rail{position:absolute;left:var(--lp);right:var(--lp);bottom:3.2rem;height:2px;background:rgba(26,34,56,.1)}
.chain-rail i{display:block;height:100%;background:var(--gold);
  width:calc(var(--q,0) * 100%);transition:width .12s linear}

/* ══ 幕 4 · 任务执行：拍板落到人身上 ══ */
.act-task{background:var(--cream-deep)}
.stage{position:relative;flex:1;display:flex;align-items:center;justify-content:space-between;
  gap:clamp(2rem,7vw,7rem);perspective:1300px;min-height:min(42vh,380px)}
.tk-card{
  --a:clamp(0,calc((var(--q,0) - .06)*5),1);
  width:min(24rem,38vw);padding:1.3rem 1.45rem;border-radius:16px;background:#fff;
  border:1px solid rgba(26,34,56,.1);box-shadow:0 20px 48px -22px rgba(26,34,56,.3);
  opacity:var(--a);transform:translateY(calc(26px - 26px*var(--a))) translateZ(calc(40px*var(--a)));
  transition:opacity .3s linear,transform .5s cubic-bezier(.16,1,.3,1);
}
.tk-k{font-family:var(--tevo-cjk);font-size:.62rem;letter-spacing:.2em;color:var(--gold);display:block;margin-bottom:.65rem}
.tk-card h3{font-size:1.08rem;font-weight:600;margin:0 0 1rem;line-height:1.4}
.tk-card dl{margin:0;font-family:var(--tevo-cjk);font-size:.8rem}
.tk-card dl div{display:flex;gap:1rem;padding:.5rem 0;border-top:1px solid rgba(26,34,56,.08)}
.tk-card dt{width:4.6rem;flex:none;opacity:.55;margin:0}
.tk-card dd{margin:0;font-weight:500}
/* 派发那根线：任务真的飞到人身上 */
.tk-wire{position:absolute;left:calc(min(24rem,38vw) + 1rem);right:calc(min(21rem,30vw) + 1rem);top:50%;height:1px;
  background:linear-gradient(90deg,rgba(168,135,74,0),rgba(168,135,74,.85) 12%,rgba(168,135,74,.85) 88%,rgba(168,135,74,0));
  transform:scaleX(clamp(0,calc((var(--q,0) - .3)*4),1));transform-origin:0 50%;transition:transform .3s ease}
.roster{width:min(21rem,30vw);display:grid;gap:.6rem}
.ro-k{font-family:var(--tevo-cjk);font-size:.62rem;letter-spacing:.2em;color:var(--gold);margin-bottom:.2rem}
.pr{
  --a:clamp(0,calc((var(--q,0) - var(--t0))*5),1);
  display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;border-radius:12px;background:#fff;
  border:1px solid rgba(26,34,56,.09);
  opacity:calc(.25 + .75*var(--a));transform:translateX(calc(22px - 22px*var(--a)));
  transition:opacity .3s linear,transform .5s cubic-bezier(.16,1,.3,1),box-shadow .4s,border-color .4s;
}
.pr-a{--t0:.42}.pr-b{--t0:.54}.pr-c{--t0:.64}
.pr-a{border-color:rgba(168,135,74,calc(.1 + .5*var(--a)));box-shadow:0 10px 26px -16px rgba(26,34,56,calc(.4*var(--a)))}
.pr-av{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);color:#fbf8f1;font-size:.82rem}
.pr div{flex:1;min-width:0;font-family:var(--tevo-cjk)}
.pr b{display:block;font-size:.83rem;font-weight:600}
.pr em{font-style:normal;font-size:.7rem;opacity:.55}
.pr-s{font-family:var(--tevo-cjk);font-size:.68rem;padding:.24rem .6rem;border-radius:999px;
  background:rgba(26,34,56,.07);opacity:.75}
.pr-a .pr-s{background:rgba(168,135,74,.18);color:#7a5f2a;opacity:1}
.pr-b .pr-s{background:rgba(47,125,84,.14);color:#2f7d54;opacity:1}

/* ══ 幕 5 · 证据与学习：散出去的东西回到中枢 ══ */
.proof{position:relative;flex:1;min-height:min(44vh,400px);perspective:1200px}
.ev{
  --a:clamp(0,calc((var(--q,0) - var(--t0))*6),1);
  position:absolute;left:0;display:flex;align-items:baseline;gap:.7rem;
  padding:.85rem 1.2rem;border-radius:12px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);
  opacity:calc(.14 + .86*var(--a));
  transform:translateX(calc(-30px + 30px*var(--a))) translateZ(calc(-80px + 80px*var(--a)));
  transition:opacity .25s linear,transform .45s cubic-bezier(.16,1,.3,1)
}
.e1{--t0:.06;top:4%}.e2{--t0:.16;top:34%}.e3{--t0:.26;top:64%}
.ev-n{font-family:var(--tevo-cjk);font-size:1.55rem;font-weight:600;color:var(--gold-pale)}
.ev-l{font-size:.85rem;color:rgba(246,243,236,.72)}
.judge{
  --a:clamp(0,calc((var(--q,0) - .4)*5),1);
  position:absolute;right:0;top:50%;width:min(19rem,30vw);
  padding:1.1rem 1.25rem;border-radius:14px;background:rgba(255,255,255,.06);
  border:1px solid rgba(194,161,102,calc(.1 + .34*var(--a)));backdrop-filter:blur(10px);
  opacity:calc(.1 + .9*var(--a));transform:translateY(-50%) translateZ(calc(60px*var(--a)));
  transition:opacity .25s linear,transform .45s cubic-bezier(.16,1,.3,1)
}
.ju-k{font-family:var(--tevo-cjk);font-size:.62rem;letter-spacing:.2em;color:var(--gold-pale);display:block;margin-bottom:.7rem}
.ju-row{display:flex;justify-content:space-between;font-family:var(--tevo-cjk);font-size:.8rem;
  padding:.45rem 0;border-top:1px solid rgba(255,255,255,.1);color:rgba(246,243,236,.72)}
.ju-row b{font-weight:600;color:#fbf8f1}
.ju-row.no b{color:#e0a68f}
.ju-f{font-size:.76rem;line-height:1.7;margin:.8rem 0 0;color:rgba(246,243,236,.55)}
.ev-flow{position:absolute;left:26%;right:32%;top:50%;height:1px;
  background:linear-gradient(90deg,rgba(194,161,102,0),rgba(194,161,102,.7),rgba(194,161,102,0));
  transform:scaleX(clamp(0,calc((var(--q,0) - .2)*3.4),1));transform-origin:0 50%}
/* 回流：一整个回合闭上 */
.loop-back{
  --a:clamp(0,calc((var(--q,0) - .62)*4),1);
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:96px;height:96px;
  display:grid;place-items:center;opacity:var(--a)
}
.lb-core{font-family:var(--tevo-cjk);font-size:.72rem;letter-spacing:.16em;color:#fbf8f1;z-index:2}
.lb-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(194,161,102,.5);
  box-shadow:0 0 40px rgba(194,161,102,.25) inset;
  transform:scale(calc(.6 + .4*var(--a)))}
.act-turn{
  --a:clamp(0,calc((var(--q,0) - .74)*5),1);
  font-size:clamp(1.25rem,2.3vw,2rem);line-height:1.5;font-weight:500;color:#fbf8f1;
  margin:clamp(1.8rem,4vh,3rem) 0 0;max-width:30rem;
  opacity:var(--a);transform:translateY(calc(18px - 18px*var(--a)))
}

/* ══ 幕 6 · 真实运行：数据出现，页面安静下来 ══ */
.act-real{background:var(--cream);padding:clamp(6rem,16vh,11rem) 0}
.rl-h2{font-size:clamp(1.9rem,3.7vw,3.2rem);line-height:1.24;margin:0 0 1.1rem;font-weight:500}
.rl-sub{font-family:var(--tevo-cjk);font-size:.85rem;letter-spacing:.06em;opacity:.55;margin:0 0 clamp(3rem,8vh,5rem)}
.rl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:clamp(2rem,4vw,3.5rem) 2rem;
  border-top:1px solid rgba(26,34,56,.14);padding-top:clamp(2.4rem,6vh,3.6rem)}
.rl-n{display:flex;flex-direction:column;gap:.5rem;opacity:0;transform:translateY(18px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.rl-n:nth-child(2){transition-delay:.1s}.rl-n:nth-child(3){transition-delay:.2s}
.rl-n:nth-child(4){transition-delay:.3s}.rl-n:nth-child(5){transition-delay:.4s}
.act-real.is-in .rl-n{opacity:1;transform:none}
.rl-n b{font-family:var(--tevo-cjk);font-size:clamp(2.1rem,4vw,3.1rem);font-weight:600;
  letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.rl-n span{font-size:.82rem;line-height:1.6;opacity:.6}

/* ══ 收尾 ══ */
.act-join{background:var(--night);color:#f6f3ec;padding:clamp(7rem,20vh,14rem) 0;text-align:center}
.jn-1{font-size:clamp(1.4rem,2.8vw,2.3rem);line-height:1.5;margin:0;font-weight:500;opacity:.62}
.jn-2{font-size:clamp(1.4rem,2.8vw,2.3rem);line-height:1.5;margin:.2rem 0 clamp(2.4rem,6vh,3.6rem);font-weight:500;color:#fbf8f1}
.jn-cta{
  display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;font-size:1rem;
  padding:.95rem 2rem;border-radius:999px;background:var(--gold);color:#fbf8f1;transition:.3s
}
.jn-cta span{transition:transform .3s}
.jn-cta:hover{background:#c2a166}
.jn-cta:hover span{transform:translateX(6px)}
.ft{background:var(--night);color:rgba(246,243,236,.4);padding:0 0 3rem;font-family:var(--tevo-cjk);font-size:.75rem}
.ft .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid rgba(246,243,236,.1);padding-top:1.6rem}

/* ══ 移动端：空间叙事改成线性电影式滚动，不是把动画藏掉留一堆字 ══ */
/* ══ 首屏的移动端剪辑 ══
   断点跟着 spatial.css 走：1080px 以下它已经把 .cam 摊平成一列，
   如果这边还把 .st-pin 钉在一屏、把文案绝对定位压在上面，两段内容就会撞在同一个视口里。
   所以这里把首屏拆成两拍：
     第一拍 一整屏只讲品牌 / 标题 / 一句正文 / 主 CTA；
     第二拍 往下滚，H.OS 工作台才升起来，信号轨收成一排小胶囊，辅助卡片排在后面。
   房间照片是 fixed 的，两拍共用同一个空间，不会像换了个页面。 */
@media (max-width:1080px){
  .st{height:auto}
  .st-pin{position:relative;height:auto;min-height:0;overflow:visible;display:flex;flex-direction:column}
  /* 第一拍 */
  .st-copy{
    order:1;position:relative;left:auto;right:auto;top:auto;bottom:auto;max-width:none;
    min-height:100svh;display:flex;flex-direction:column;justify-content:center;
    padding:6.5rem var(--lp) 4.5rem;opacity:1;transform:none
  }
  .st-h1{font-size:clamp(2.3rem,9vw,3.1rem)}
  .st-lead{max-width:none;margin-bottom:2.4rem}
  .st-go{align-self:flex-start}
  /* 遮罩只盖第一拍，别把第二拍的工作台也压黑 */
  .st-scrim{position:absolute;inset:0 0 auto;height:100svh;
    background:linear-gradient(180deg,rgba(5,8,15,.8) 0%,rgba(5,8,15,.34) 30%,rgba(5,8,15,.5) 62%,rgba(5,8,15,.88) 100%)}
  /* 第二拍 */
  .st-beat2{
    display:block;order:2;position:relative;z-index:3;margin:0;
    padding:0 var(--lp) .9rem;color:rgba(246,243,236,.5);
    font-family:var(--tevo-cjk);font-size:.72rem;letter-spacing:.2em
  }
  .hero-cam{order:3}
  /* 摊平后按叙事顺序重排：中枢 → 工作台 → 信号轨 → 辅助卡片 */
  .hero-cam .core{order:0;width:132px;height:132px}
  .hero-cam .c-halo{width:190px;height:190px;margin:-95px 0 0 -95px}
  .hero-cam .deck{order:1}
  .hero-cam .rail{order:2}
  .hero-cam .notes{order:3}
  .hero-cam .edge-card{order:4}
  /* 信号轨：5 条纵向链接收成一排胶囊，不再占一整屏 */
  .hero-cam .rail{display:flex;flex-wrap:wrap;gap:6px;padding:12px}
  .hero-cam .rail a{flex:0 0 auto;font-size:11.5px;padding:6px 11px;border-radius:999px;
    background:rgba(255,255,255,.06);white-space:nowrap}
  .hero-cam .notes,.hero-cam .edge-card{padding:13px 15px}
  .hero-cam .d-head{flex-wrap:wrap;gap:10px}
  .hero-cam .d-head h2{flex:1 1 auto;white-space:nowrap}
  .hero-cam .d-head .chip{flex:1 0 100%;justify-content:center}

  .sn{height:3.6rem;gap:.8rem}
  .sn-mark span{display:none}
  .sn-cta{display:none}
  /* 章节收进一个开关里，5 个入口不再横着挤 */
  .sn-menu{
    display:inline-flex;align-items:center;gap:.4rem;margin-left:auto;
    background:none;border:1px solid currentColor;color:inherit;border-radius:999px;
    padding:.36rem .8rem;font:inherit;font-size:.78rem;cursor:pointer
  }
  .sn-menu i{width:12px;height:8px;position:relative;display:block}
  .sn-menu i::before,.sn-menu i::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .25s}
  .sn-menu i::before{top:0}.sn-menu i::after{bottom:0}
  .sn.menu-open .sn-menu i::before{transform:translateY(3.5px) rotate(45deg)}
  .sn.menu-open .sn-menu i::after{transform:translateY(-3.5px) rotate(-45deg)}
  .sn-nav{
    position:fixed;left:0;right:0;top:3.6rem;margin:0;display:grid;gap:0;font-size:.92rem;
    background:rgba(242,239,232,.97);backdrop-filter:blur(16px);color:var(--navy);
    box-shadow:0 12px 30px -14px rgba(5,8,15,.5);
    opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .25s ease,transform .3s cubic-bezier(.16,1,.3,1)
  }
  .sn-nav a{padding:.95rem var(--lp);opacity:.9;border-top:1px solid rgba(26,34,56,.08)}
  .sn-nav a:first-child{border-top:0}
  .sn.menu-open .sn-nav{opacity:1;transform:none;pointer-events:auto}
}
@media (max-width:900px){
  .act-pin{padding:5.5rem var(--lp) 3rem;min-height:100svh}
  /* 幕 2：四张卡改成一列，仍然逐张点亮、仍然有光束指向中枢 */
  .field{min-height:auto;display:grid;gap:.7rem;padding-top:1rem}
  .field-core{position:relative;left:auto;top:auto;transform:none;justify-self:center;margin-bottom:.4rem;width:88px;height:88px}
  .zone{position:relative;width:auto;left:auto;right:auto;top:auto;bottom:auto;
    transform:translateY(calc(20px - 20px*var(--a)))}
  .z-beam{left:1.15rem!important;right:auto!important;top:auto;bottom:-.35rem;width:38%;
    transform-origin:0 50%!important;
    background:linear-gradient(90deg,rgba(194,161,102,.75),rgba(194,161,102,0))!important}
  /* 幕 3：链条竖过来，仍然一步一步走 */
  .chain{flex-direction:column;align-items:stretch;gap:.6rem;overflow:hidden}
  .cs{flex:0 0 auto;transform:translateZ(0) translateY(10px);padding:.85rem 1rem}
  .cs.is-past{transform:none}
  .cs.is-now{transform:none;flex-grow:0}
  .cs h3{font-size:.94rem}
  .cs.is-now .pc,.cs.is-now .pc-act,.cs.is-now .pc-res{max-height:14rem}
  .pc-res{gap:1rem}
  .chain-rail{bottom:1.6rem}
  /* 幕 4：任务卡在上、点将台在下，派发线竖着走 */
  .stage{flex-direction:column;align-items:stretch;gap:1.6rem;min-height:auto}
  .tk-card,.roster{width:auto}
  .tk-wire{left:50%;right:auto;top:auto;width:1px;height:1.6rem;
    margin-top:calc(-.8rem - 0px);transform:scaleY(clamp(0,calc((var(--q,0) - .3)*4),1));transform-origin:50% 0;
    background:linear-gradient(180deg,rgba(168,135,74,.85),rgba(168,135,74,0))}
  /* 幕 5：证据竖排，验收在下，回流圈收尾 */
  .proof{min-height:auto;display:grid;gap:.7rem}
  .ev{position:relative;left:auto;top:auto}
  .judge{position:relative;right:auto;top:auto;width:auto;transform:translateY(calc(16px - 16px*var(--a)))}
  .ev-flow{display:none}
  .loop-back{position:relative;left:auto;top:auto;transform:none;justify-self:center;margin-top:1rem}
  .rl-grid{grid-template-columns:repeat(2,1fr);gap:2rem 1.5rem}
}
@media (max-width:420px){ .rl-grid{grid-template-columns:1fr} }

/* ══ 降级：不做动画的人，看到的是每一幕的静止关键帧 ══ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .st{height:auto}
  .st-pin{position:relative;height:auto;min-height:100svh}
  .st-copy{opacity:1;transform:none}
  .st-scrim{opacity:1}
  .sn-nav{transition:none}
  .act-pin{position:relative;min-height:auto;padding-top:5rem;padding-bottom:5rem}
  [data-act] .act-head,[data-act] .act-foot,.rl-n{opacity:1;transform:none}
  [data-act] .act-foot{opacity:.55}
  /* 每一幕直接停在「已经发生完」的那一帧 */
  .zone,.tk-card,.pr,.ev,.judge,.loop-back,.act-turn{--a:1;opacity:1;transform:none}
  .fc-dot,.fc-ring{transform:none;opacity:1}
  .z-beam,.tk-wire,.ev-flow{transform:none;opacity:.6}
  .chain{flex-direction:column;align-items:stretch;gap:.7rem}
  .cs,.cs.is-past,.cs.is-now{opacity:1;transform:none;flex-grow:0;box-shadow:none;border-color:rgba(26,34,56,.1)}
  .cs .pc,.cs .pc-act,.cs .pc-res{max-height:none;opacity:1;overflow:visible;margin:.2rem 0 .7rem}
  .chain-rail i{width:100%}
  .stage{flex-direction:column;align-items:stretch;gap:1.6rem}
  .tk-card,.roster{width:auto}
  .tk-wire{display:none}
  .proof{display:grid;gap:.7rem;min-height:auto}
  .ev,.judge,.loop-back{position:relative;left:auto;right:auto;top:auto;width:auto}
}

/* 每一幕的滚动跑道：够长才推得动一段叙事，但不能长到让人以为页面卡住 */
.act-sense{height:250vh}
.act-price{height:330vh}
.act-task{height:250vh}
.act-proof{height:280vh}
@media (max-width:900px){
  .act-sense{height:230vh}.act-price{height:300vh}.act-task{height:230vh}.act-proof{height:250vh}
}
@media (prefers-reduced-motion:reduce){
  .act-sense,.act-price,.act-task,.act-proof{height:auto}
}