/* Responsive product stage. The model and copy each have dedicated space. */
:root{--gutter:clamp(22px,5vw,88px);--header-height:80px;--ease:cubic-bezier(.22,1,.36,1)}
html{scroll-padding-top:100px;scroll-behavior:smooth}body{isolation:isolate}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}a,button{outline-offset:5px}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #9ee7ff}
header{height:var(--header-height);padding:0 var(--gutter);background:rgba(4,6,10,.86);border-bottom:1px solid #ffffff0d;gap:24px}header.scrolled{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.logo{flex:none;z-index:42}.logo::before{animation:none}header .nav-status{margin-right:auto;font-size:9px;letter-spacing:.12em}header nav{gap:clamp(18px,2.4vw,32px)}header nav a{white-space:nowrap}header nav .btn{min-height:40px;font-size:12px;padding-inline:20px}#mb{line-height:1;font-size:24px}
#track{height:calc(100svh * 8)}#stage{height:100svh;min-height:600px}#gl{cursor:grab}#gl:active{cursor:grabbing}#stage::after{pointer-events:none}.step{padding:var(--header-height) var(--gutter) 116px;transition:opacity .42s ease,visibility .42s;transform:none}.step .tx{max-width:min(39vw,510px)}.step.c{justify-content:flex-start;text-align:left}.step.c .cta{justify-content:flex-start}.step:not(.on){visibility:hidden;pointer-events:none}.step:not(.on) *{pointer-events:none!important}.step.on .tx>*{animation:none;will-change:auto;transition:opacity .65s var(--ease),transform .85s var(--ease)}.step .tx>*{transform:translateY(16px)}.step.on .tx>*{transform:none}.step .ey{font-size:10px;letter-spacing:.22em;margin-bottom:18px}.step h1{font-size:clamp(54px,6.6vw,96px);line-height:1.03;letter-spacing:-.06em}.step h2{font-size:clamp(38px,4.1vw,62px)}.step .tx p{font-size:16px;line-height:1.65;max-width:390px}.step .cta{gap:10px;margin-top:24px}.btn{min-height:46px;padding-inline:22px;font-size:13px}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}.step .sw button{width:44px;height:44px}.sw{gap:18px}.sw button{transition:transform .3s,border-color .3s,box-shadow .3s}.sw button.on{box-shadow:0 0 24px #ffffff26}
#dots,.hint,.cursor-glow,.motion-noise{display:none!important}.motion-field{z-index:-1}.motion-orb{will-change:auto;filter:blur(65px);opacity:.1}.ey,.kicker,.signal-item{animation:none}.cd.rv.in{animation:none}.cd{transition:transform .35s var(--ease),border-color .35s}.rv{transition:opacity .8s var(--ease),transform .8s var(--ease);transform:translateY(22px)}.grid>.rv:nth-child(2){transition-delay:.07s}.grid>.rv:nth-child(3){transition-delay:.14s}.grid>.rv:nth-child(4){transition-delay:.21s}.cd:hover{transform:translateY(-5px)}
.story-controls{position:absolute;z-index:5;bottom:24px;left:var(--gutter);right:var(--gutter);max-width:700px;margin:auto}.story-caption{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.1em;color:#969eae;margin-bottom:8px}.story-caption #chapter-count{font-variant-numeric:tabular-nums;color:#c3d0de}.story-caption #chapter-title{color:#e3e8ef}.story-caption button{margin-left:auto;border:0;background:none;color:#969eae;font:inherit;min-height:30px;cursor:pointer}.chapter-track{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}.chapter-track button{position:relative;min-height:32px;border:0;background:transparent;color:#687485;font:500 9px system-ui;cursor:pointer;transition:color .3s}.chapter-track button::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:#ffffff24;transition:height .3s,background .3s,box-shadow .3s}.chapter-track button[aria-pressed=true]{color:#c7f0ff}.chapter-track button[aria-pressed=true]::before{height:3px;background:#9ee7ff;box-shadow:0 0 12px #9ee7ff55}.chapter-track button:hover::before{background:#d7f6ff}.chapter-track button span{display:block;padding-top:6px}
.s{padding:clamp(64px,8vw,120px) var(--gutter)}.wr{max-width:1240px}.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.grid:has(>.cd:nth-child(4)):not(:has(>.cd:nth-child(5))){grid-template-columns:repeat(4,minmax(0,1fr))}.cd{padding:28px}.cd span{line-height:1.7;display:block}.section-head{align-items:flex-start}.section-head p{padding-top:32px}.arch{gap:clamp(32px,5vw,80px);grid-template-columns:1fr 1fr}.arch-map{isolation:isolate}.arch-ring{z-index:2}.arch-node{z-index:3}.arch-map::before{animation-duration:18s}.arch-map::after{opacity:.3;animation-duration:9s}.sensor-trace{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-width:1.4;opacity:.5}.trace-base{stroke:#9ee7ff22}.trace-signal{stroke:#9ee7ff;stroke-dasharray:100 750;animation:traceRun 5s linear infinite}@keyframes traceRun{to{stroke-dashoffset:-850}}.arch-map .arch-core{background:#0c1c29}.signal-band .wr{gap:22px}.signal-item{font-size:10px;line-height:1.6}.signal-item i{flex:none}.mq div{font-size:clamp(26px,4vw,48px)}.tw{border-radius:12px}.tb th,.tb td{font-size:14px}.tb th:first-child{width:25%}summary{min-height:44px;align-items:center;font-size:16px}details p{padding-bottom:6px}.footer-meta{flex-wrap:wrap}#buy form{max-width:600px}input{border-radius:12px}#msg{line-height:1.6}input[aria-invalid=true]{border-color:#ff9999}
@media(min-width:1001px) and (max-width:1200px){header .nav-status{display:none}.step .tx{max-width:38vw}.step h1{font-size:62px}.grid:has(>.cd:nth-child(4)):not(:has(>.cd:nth-child(5))){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1000px){
:root{--header-height:68px;--gutter:clamp(22px,5vw,48px)}header .nav-status{display:none}.logo{font-size:16px}.logo small{display:none}#mb{display:grid;place-items:center;margin-left:auto;width:44px;height:44px}header nav{position:absolute;top:calc(100% - 1px);left:0;right:0;bottom:auto;height:auto;padding:16px var(--gutter) 24px;background:#090d16;border-bottom:1px solid #ffffff20;display:flex;align-items:stretch;gap:6px;transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .25s,visibility .25s;box-shadow:0 24px 40px #0005}header nav.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}header nav a{font-size:15px;padding:12px 0;min-height:44px}header nav .btn{margin-top:10px;font-size:14px;min-height:46px}.menu-open #stage{filter:brightness(.6)}
#track{height:calc(100svh * 7.5)}#stage{min-height:640px}#gl{top:68px;left:0;width:100%;height:44%;height:calc((100% - 68px) * .47)}#stage::after{inset:auto 0 0;height:46%;background:linear-gradient(transparent,#04060a 26%)}.step,.step.r,.step.c{align-items:flex-start;justify-content:center;text-align:left;top:52%;bottom:86px;padding:0 var(--gutter);inset-inline:0}.step .tx{max-width:540px;width:100%}.step h1{font-size:clamp(40px,6vw,60px);line-height:1.02;letter-spacing:-.055em;max-width:480px}.step h2{font-size:clamp(34px,5vw,48px);line-height:1.06;max-width:470px}.step .ey{font-size:9px;line-height:1.7;letter-spacing:.19em;margin-bottom:12px}.step .tx p{font-size:15px;line-height:1.65;margin-top:14px;max-width:510px}.step .cta,.step.c .cta{justify-content:flex-start;margin-top:20px}.step .big{margin-top:16px;gap:32px}.step .big b{font-size:28px}.step .big small{font-size:10px}.step .sw{margin-top:18px}.step #nm{font-size:12px;margin-top:12px}.story-controls{bottom:14px;max-width:540px}.story-caption{margin-bottom:2px}.chapter-track button{min-height:34px}.hot{display:none}
.grid,.grid:has(>.cd:nth-child(4)):not(:has(>.cd:nth-child(5))){grid-template-columns:repeat(2,minmax(0,1fr))}.arch{grid-template-columns:1fr;gap:34px}.arch-map{min-height:400px}.section-head{display:block}.section-head p{padding-top:14px}.signal-band .wr{grid-template-columns:1fr 1fr;gap:16px}.signal-item{font-size:9px}.s h2{font-size:clamp(32px,5vw,48px)}.lede{font-size:16px}.motion-orb{animation:none}.mq div{animation-duration:80s}
}
@media(max-width:600px){
#gl{height:calc((100% - 68px) * .45)}.step,.step.r,.step.c{top:50%;bottom:86px}.step h1{font-size:clamp(38px,10.5vw,52px)}.step h2{font-size:clamp(32px,9vw,44px)}.step .tx p{font-size:14px;line-height:1.6}.step .cta{gap:8px;flex-wrap:nowrap;margin-top:18px}.step .btn{padding-inline:14px;font-size:11px;min-height:44px;white-space:nowrap}.step .ey{font-size:8px;letter-spacing:.15em}.story-caption{font-size:9px}.chapter-track{gap:5px}.grid,.grid:has(>.cd:nth-child(4)):not(:has(>.cd:nth-child(5))){grid-template-columns:1fr}.cd{padding:24px}.signal-band{padding:22px var(--gutter)}.signal-band .wr{grid-template-columns:1fr 1fr;gap:18px 12px}.signal-item{font-size:8px;letter-spacing:.08em}.arch-map{min-height:320px}.arch-ring.r1{width:248px;height:248px}.arch-ring.r2{width:166px;height:166px}.arch-node{font-size:9px}.n1{left:41%}.n3{left:39%}.principle{padding:17px 18px}.principle span{font-size:13px}.section-head{margin-bottom:26px}#buy form{display:grid;grid-template-columns:1fr;width:100%}#buy input,#buy button{width:100%;min-width:0;min-height:50px}.footer-meta{gap:12px}footer{padding:28px var(--gutter);font-size:11px;gap:20px}.tb{min-width:480px}.tb th,.tb td{padding:14px 16px;font-size:12px}
}
@media(max-width:1000px) and (max-height:730px) and (orientation:portrait){#stage{min-height:620px}#gl{height:38%}.step,.step.r,.step.c{top:46%}.step h1{font-size:38px}.step h2{font-size:32px}.step .ey{margin-bottom:8px}.step .tx p{margin-top:10px;font-size:13px}.step .cta{margin-top:14px}.step .big{margin-top:12px}.step .big b{font-size:24px}}
@media(max-width:1000px) and (max-height:520px) and (orientation:landscape){:root{--header-height:58px}#stage{min-height:360px}#gl{top:58px;left:0;width:48%;height:calc(100% - 110px)}.step,.step.r,.step.c{inset:76px 24px 68px 49%;padding:0;align-items:center}.step h1{font-size:34px}.step h2{font-size:30px}.step .ey{font-size:7px;margin-bottom:7px}.step .tx p{font-size:12px;line-height:1.5;margin-top:8px}.step .cta{margin-top:12px}.step .btn{font-size:10px;min-height:36px;padding-inline:13px}.step .big{margin-top:10px}.step .big b{font-size:22px}.step .sw{margin-top:10px}.step .sw button{width:30px;height:30px}.story-controls{bottom:5px;max-width:none}.story-caption{margin-bottom:0}.story-caption button{min-height:22px}.chapter-track button{min-height:25px}#stage::after{display:none}}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}.motion-paused .step .tx>*,.motion-paused .rv{transition:none}.motion-paused .rv{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
@media(min-width:1001px){#gl{top:96px;height:calc(100% - 216px)}.story-controls{bottom:22px}.step .tx{max-width:min(39vw,520px)}}
@media(max-width:1000px) and (max-height:650px) and (orientation:portrait){#stage{min-height:0}#gl{height:32%}.step,.step.r,.step.c{top:44%;bottom:68px}.step h1{font-size:34px}.step h2{font-size:29px}.step .ey{font-size:7px;margin-bottom:7px}.step .tx p{font-size:12px;margin-top:8px}.step .cta{margin-top:12px}.step .big{margin-top:10px}.step .big b{font-size:22px}.step .sw{margin-top:12px}.step .sw button{width:34px;height:34px}.story-controls{bottom:7px}.story-caption button{min-height:22px}.chapter-track button{min-height:30px}}
/* Story visibility stays independent of decorative animation playback. */
.step .tx>*{animation:none!important}.step.on .tx>*{opacity:1;transform:none}
