@font-face{font-family:'Instrument Sans';src:url('/fonts/instrument-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('/fonts/instrument-sans-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --bg:#08090B; --bg2:#0A0C0F; --panel:#0D1015; --panel2:#11151B;
  --ink:#EDEFF2; --dim:rgba(237,239,242,.58); --faint:rgba(237,239,242,.32); --ghost:rgba(237,239,242,.16);
  --line:rgba(255,255,255,.085); --line2:rgba(255,255,255,.14);
  --cool:#7DD3FC;   /* the call — everything digital */
  --warm:#FF8A3D;   /* the answer — everything physical */
  --ok:#4ADE80; --bad:#F0533A;
  --sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(1.4rem,6vw,6.5rem);
  --t1:clamp(2.4rem,5.6vw,4.5rem);
  --t2:clamp(1.75rem,3.5vw,2.9rem);
  --t3:clamp(1.4rem,2.4vw,2rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:rgba(125,211,252,.28)}
a{color:inherit}
:focus-visible{outline:2px solid var(--cool);outline-offset:3px;border-radius:4px}

/* ---------- shared atoms ---------- */
.kick{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:.7rem;margin-bottom:1.35rem}
.kick i{width:5px;height:5px;border-radius:99px;background:var(--warm);box-shadow:0 0 12px var(--warm);animation:bp 2.6s infinite}
.kick .n{color:var(--ink);border:1px solid var(--line2);border-radius:5px;padding:.16rem .42rem;letter-spacing:.08em}
@keyframes bp{0%,100%{opacity:1}50%{opacity:.22}}
.grad{background:linear-gradient(96deg,var(--cool),#fff 46%,var(--warm));-webkit-background-clip:text;background-clip:text;color:transparent}
h1{font-size:var(--t1);line-height:1.02;letter-spacing:-.035em;font-weight:700}
h2{font-size:var(--t2);line-height:1.06;letter-spacing:-.03em;font-weight:700;max-width:22ch}
h2 em{font-style:normal;color:rgba(237,239,242,.72)}
.lede,.sub{color:var(--dim);line-height:1.62;font-size:1.02rem}
.btn{display:inline-block;font-family:var(--mono);font-size:.84rem;padding:.85rem 1.5rem;border-radius:8px;background:var(--ink);color:#08090B;text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -14px rgba(237,239,242,.5)}
.btn.ghost{background:none;color:var(--ink);border:1px solid var(--line2);box-shadow:none}
.btn.ghost:hover{border-color:var(--cool);background:rgba(125,211,252,.07)}
.row{margin-top:2.1rem;display:flex;gap:.8rem;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:.76rem;padding:.42rem .7rem;border-radius:7px;border:1px solid var(--line2);color:var(--dim);background:rgba(255,255,255,.02)}
.chip.cool{color:var(--cool);border-color:rgba(125,211,252,.28);background:rgba(125,211,252,.07)}
.chip.warm{color:var(--warm);border-color:rgba(255,138,61,.28);background:rgba(255,138,61,.07)}
.foot-note{margin-top:1.6rem;font-family:var(--mono);font-size:.74rem;color:var(--faint);letter-spacing:.04em}

/* reveal — every section body fades up once */
[data-reveal]>*{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].seen>*{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]>*{opacity:1;transform:none;transition:none}
  .kick i,.pipe b,.pour u{animation:none!important}
}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:1.05rem var(--pad);transition:background .35s,box-shadow .35s,backdrop-filter .35s}
nav.scrolled{background:rgba(8,9,11,.82);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.wm{font-family:var(--mono);font-size:.9rem;text-decoration:none;letter-spacing:.01em}
.wm b{color:var(--warm);font-weight:400}
.navr{display:flex;align-items:center;gap:1.5rem}
.navr .plain{font-family:var(--mono);font-size:.78rem;color:var(--dim);text-decoration:none;transition:color .2s}
.navr .plain:hover{color:var(--ink)}
.navcta{border:1px solid var(--line2);border-radius:99px;padding:.5rem 1.05rem;font-family:var(--mono);font-size:.78rem;text-decoration:none;transition:border-color .25s,background .25s}
.navcta:hover{border-color:var(--cool);background:rgba(125,211,252,.08)}

/* ---------- 01 hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden}
#field{position:absolute;inset:0;width:100%;height:100%;display:block}
.veil{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(820px 660px at 20% 50%,rgba(8,9,11,.94) 0%,rgba(8,9,11,.62) 36%,transparent 64%),
             radial-gradient(1100px 620px at 74% 32%,rgba(125,211,252,.075),transparent 62%),
             linear-gradient(180deg,rgba(8,9,11,.88),transparent 18%,transparent 76%,rgba(8,9,11,.94))}
.hero .copy{position:relative;z-index:5;padding:7rem var(--pad) 7.5rem;width:min(46rem,92vw)}
.hero .lede{margin-top:1.45rem;max-width:33rem}
.ticker{position:absolute;z-index:6;left:0;right:0;bottom:0;border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,rgba(8,9,11,.8));display:flex;align-items:center;gap:1.3rem;
  padding:.8rem var(--pad);font-family:var(--mono);font-size:.75rem;color:var(--faint)}
.ticker .now{color:var(--cool);min-width:16.5rem}
.ticker .hit{color:var(--warm);opacity:0;transition:opacity .3s}
.ticker .hit.on{opacity:1}
.ticker .right{margin-left:auto;display:flex;gap:1.1rem}
.ticker .sim{color:var(--ghost);border:1px solid var(--line);border-radius:4px;padding:.1rem .4rem}

/* ---------- section frame ---------- */
.sec{position:relative;padding:13vh var(--pad) 14vh;border-top:1px solid var(--line);background:var(--bg)}
.sec:nth-of-type(even){background:var(--bg2)}
.sec>.head{max-width:47rem;margin-bottom:3.4rem}
.sec>.head .sub{margin-top:1.05rem;max-width:40rem}

/* 02 shift */
.shift{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(1rem,3vw,2.6rem);align-items:stretch}
.pane{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:1.5rem 1.35rem}
.pane .pl{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:.55rem;margin-bottom:1.15rem}
.dot{width:6px;height:6px;border-radius:99px;display:inline-block}
.dot.cool{background:var(--cool);box-shadow:0 0 10px var(--cool)}
.dot.warm{background:var(--warm);box-shadow:0 0 10px var(--warm)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.pnote{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.71rem;line-height:1.7;color:var(--faint)}
.shift .arrow{display:grid;place-items:center;color:var(--faint)}
.shift .arrow span{display:block;width:clamp(1.6rem,4vw,3.4rem);height:1px;background:linear-gradient(90deg,var(--cool),var(--warm));position:relative}
.shift .arrow span::after{content:'';position:absolute;right:-1px;top:-3px;border-left:6px solid var(--warm);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}

/* 03 device kinds */
.kinds{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.kind{background:var(--panel);padding:1.05rem 1rem;transition:background .3s}
.kind:hover{background:var(--panel2)}
.kind .t{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--warm)}
.kind .val{margin-top:.5rem;font-family:var(--mono);font-size:.82rem;color:var(--ink)}
.kind .p{margin-top:.35rem;font-family:var(--mono);font-size:.67rem;color:var(--faint)}

/* 04 verticals */
.verticals{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.v{background:var(--panel);padding:1.55rem 1.3rem}
.vn{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:1rem}
.s{font-family:var(--mono);font-size:.78rem;color:var(--dim);padding:.38rem 0;position:relative}
.s span{position:relative;display:inline-block}
.s span::after{content:'';position:absolute;left:-2px;right:-2px;top:50%;height:1px;transform:scaleX(0);transform-origin:left;background:var(--bad);opacity:.9;transition:transform .55s var(--ease)}
.seen .s span::after{transform:scaleX(1)}
.v:nth-child(2) .s span::after{transition-delay:.1s}
.v:nth-child(3) .s span::after{transition-delay:.2s}
.keep{margin-top:1.05rem;padding-top:1.05rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.8rem;color:var(--cool)}

/* 05 the stack */
.stack{max-width:64rem}
.tier{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:1.45rem 1.35rem}
.tier.core{border-color:rgba(125,211,252,.3);background:linear-gradient(180deg,rgba(125,211,252,.075),rgba(125,211,252,.015));box-shadow:0 30px 70px -46px rgba(125,211,252,.5)}
.tl{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:1.1rem}
.fns{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.45rem}
.fn{font-family:var(--mono);font-size:.8rem;padding:.55rem .75rem;border-radius:7px;border:1px solid rgba(125,211,252,.22);background:rgba(125,211,252,.06);color:var(--dim);transition:border-color .3s,background .3s,color .3s}
.fn b{color:var(--cool);font-weight:400}
.fn:hover{border-color:rgba(125,211,252,.5);background:rgba(125,211,252,.13);color:var(--ink)}
.tnote{margin-top:1.05rem;font-family:var(--mono);font-size:.7rem;color:var(--faint)}
.pipe{height:52px;position:relative;display:grid;place-items:center}
.pipe::before{content:'';position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(180deg,var(--line2),var(--line2))}
.pipe b{position:absolute;width:7px;height:7px;border-radius:99px}
.pipe.down b{background:var(--cool);box-shadow:0 0 14px var(--cool);animation:travelDown 3.6s var(--ease) infinite}
.pipe.up b{background:var(--warm);box-shadow:0 0 14px var(--warm);animation:travelUp 3.6s var(--ease) infinite;animation-delay:1.8s}
@keyframes travelDown{0%{top:-4px;opacity:0}12%{opacity:1}46%{top:48px;opacity:1}55%,100%{top:48px;opacity:0}}
@keyframes travelUp{0%{top:48px;opacity:0}12%{opacity:1}46%{top:-4px;opacity:1}55%,100%{top:-4px;opacity:0}}

/* 06 before / with */
.cols{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1rem,3vw,2.4rem);align-items:start}
.col{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:1.5rem 1.35rem}
.col.after{border-color:rgba(125,211,252,.3);background:linear-gradient(180deg,rgba(125,211,252,.07),rgba(125,211,252,.012))}
.cl{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:1.05rem}
.one{font-family:var(--mono);font-size:.92rem;color:var(--ink);padding:.85rem .95rem;border:1px solid rgba(125,211,252,.32);border-radius:9px;background:rgba(125,211,252,.09)}
.one b{color:var(--cool);font-weight:400}
.paths{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.05rem}
.path{font-family:var(--mono);font-size:.75rem;padding:.4rem .68rem;border-radius:7px;border:1px dashed rgba(255,138,61,.34);color:var(--warm)}
.anote{margin-top:.95rem;font-family:var(--mono);font-size:.7rem;color:var(--faint)}

/* 07 rail */
.rail{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,2.2vw,2rem);align-items:end}
.lay{position:relative;padding-top:1.05rem}
.lay .rule{position:absolute;top:0;left:0;height:2px;width:0;background:var(--ghost);transition:width 1s var(--ease)}
.seen .lay .rule{width:100%}
.lay:nth-child(2) .rule{transition-delay:.18s}
.lay:nth-child(3) .rule{transition-delay:.36s}
.lay:nth-child(4) .rule{transition-delay:.54s}
.lay.us .rule{background:var(--warm)}
.ln{font-family:var(--mono);font-size:.67rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.lay h3{font-size:var(--t3);font-weight:700;letter-spacing:-.025em;margin:.35rem 0 .25rem}
.lay.us h3{color:var(--warm)}
.what{font-family:var(--mono);font-size:.76rem;color:var(--dim)}
.hid{margin-top:.85rem;padding-top:.75rem;border-top:1px solid var(--line)}
.hid .hc{font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:.45rem}
.hid div:last-child{font-family:var(--mono);font-size:.68rem;color:var(--faint);line-height:1.75;transition:color .3s}
.lay:hover .hid div:last-child{color:var(--dim)}
.pour{position:relative;height:10px;margin-top:1rem;border:1px dashed rgba(255,138,61,.5);border-radius:5px;overflow:hidden;background:rgba(255,138,61,.05)}
.pour u{position:absolute;inset:0;width:0;text-decoration:none;background:linear-gradient(90deg,var(--warm),#FFB271);opacity:.9;animation:pour 6.5s var(--ease) infinite}
@keyframes pour{0%{width:0}62%{width:62%}100%{width:62%}}
.pn{margin-top:.5rem;font-family:var(--mono);font-size:.66rem;color:var(--warm);letter-spacing:.06em}

/* ---------- close + footer ---------- */
.close{border-top:1px solid var(--line);padding:16vh var(--pad) 14vh;text-align:center;
  background:radial-gradient(760px 420px at 50% 30%,rgba(255,138,61,.07),transparent 66%),var(--bg)}
.close h2{max-width:none;font-size:var(--t2);margin:0 auto}
.close p{margin:1.15rem auto 2.1rem;color:var(--dim);max-width:38rem;line-height:1.62}
footer{border-top:1px solid var(--line);padding:1.6rem var(--pad);display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.74rem;color:var(--faint)}
footer a{color:var(--dim);text-decoration:none}
footer a:hover{color:var(--ink)}

/* ---------- narrow ---------- */
@media(max-width:1080px){.kinds{grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}}
@media(max-width:900px){
  .hero .copy{width:auto;padding-top:8rem;padding-bottom:6.5rem}
  .veil{background:linear-gradient(180deg,rgba(8,9,11,.95) 12%,rgba(8,9,11,.55) 58%,rgba(8,9,11,.95))}
  .ticker .right{display:none}.ticker .now{min-width:0}
  .navr .plain{display:none}
  .shift{grid-template-columns:1fr}
  .shift .arrow span{width:1px;height:2.2rem;background:linear-gradient(180deg,var(--cool),var(--warm));margin:.4rem auto}
  .shift .arrow span::after{right:auto;left:-3px;top:auto;bottom:-1px;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:6px solid var(--warm);border-bottom:none}
  .verticals{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
  .rail{grid-template-columns:repeat(2,1fr);gap:1.8rem 1rem;align-items:start}
  footer{flex-direction:column;gap:.7rem;text-align:center}
}