/* Hero: exactly one screen, step-driven. Canvas is full-bleed behind copy; .experience is the product-safe frame. */
.hero{position:relative;isolation:isolate;height:100svh;min-height:480px;background:linear-gradient(180deg,#050b12 0%,#07121d 63%,#07101a 100%)}
.hero:before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 50% 70%,rgba(55,160,169,.1),transparent 52%)}
.hero-stage{position:relative;isolation:isolate;height:100%;display:flex;flex-direction:column;align-items:center;padding:142px 24px 20px;overflow:hidden}
.hero-stage:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 58% 44% at 50% 66%,rgba(30,80,92,.2),transparent 72%),radial-gradient(ellipse 130% 95% at 50% 42%,transparent 58%,rgba(1,5,9,.55) 100%)}
#server-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;outline:none}
/* Hand-off: the poster fades out fully before the live canvas fades in, so two servers are never visible at once. */
.hero-poster{position:absolute;inset:0;width:100%;height:100%;z-index:1;object-fit:cover;pointer-events:none;transition:opacity .25s linear}
.hero[data-ready="true"] .hero-poster{opacity:0}
#server-canvas{opacity:0;transition:opacity .35s var(--ease) .25s}
.hero[data-ready="true"] #server-canvas{opacity:1}

.hero-copy{position:relative;z-index:2;text-align:center;max-width:720px;flex:0 0 auto;transition:transform .6s var(--ease)}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--cyan);font-size:10px;margin:0 0 14px;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.eyebrow span{display:block;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px rgba(132,233,227,.1),0 0 17px rgba(132,233,227,.7)}
h1{font-size:clamp(43px,5.2vw,72px);line-height:1.12;letter-spacing:-.075em;margin:0;font-weight:700;color:var(--white)}
h1 em{font-style:normal;color:var(--cyan)}
h1 .nw{white-space:nowrap}

.experience{position:relative;z-index:1;isolation:isolate;pointer-events:none;width:min(1160px,100%);height:clamp(460px,60svh,640px);min-height:280px;flex:0 1 auto;margin-top:-2px;transform:translateY(-18px);transition:transform .9s var(--ease)}
.scene-status{position:absolute;top:18px;left:50%;transform:translateX(-50%);margin:0;color:var(--muted);font-size:9px;letter-spacing:.12em;white-space:nowrap;transition:opacity .4s}
.hero[data-ready="true"] .scene-status,.hero[data-fallback="true"] .scene-status{opacity:0}

.story-caption{position:relative;z-index:2;min-height:30px;margin-top:-2px;color:var(--white);font-size:13px;font-weight:700;opacity:.88;transition:opacity .22s var(--ease),transform .22s var(--ease)}
.story-caption:before{content:"";display:inline-block;width:26px;height:1px;margin-inline-end:10px;vertical-align:middle;background:var(--cyan)}
.story-caption.is-out{opacity:0;transform:translateY(6px)}

.cap-wrap{position:relative;z-index:2;display:flex;flex-direction:column;margin-top:18px;opacity:.72;transition:opacity .4s var(--ease)}
.capabilities{display:flex;align-items:center;margin:0;padding:0;border-top:1px solid rgba(185,221,227,.13);border-bottom:1px solid rgba(185,221,227,.13);list-style:none;direction:rtl}
.capabilities li{position:relative;color:var(--muted);font-size:10px;transition:color .3s,opacity .3s}
.capabilities li+li:before{content:"";position:absolute;top:50%;right:0;width:1px;height:13px;background:rgba(185,221,227,.18);transform:translateY(-50%)}
.capabilities li[data-active="true"]{color:var(--cyan);opacity:1}
.capabilities button{all:unset;display:block;padding:8px 22px;cursor:pointer;color:inherit;font:inherit;transition:color .3s var(--ease)}
.capabilities[inert] button{cursor:default}
.capabilities button:hover{color:var(--white)}
.capabilities li[data-active="true"] button{color:var(--cyan)}
.capabilities button:focus-visible{outline:1px solid var(--cyan);outline-offset:-2px;border-radius:6px}
.cap-progress{height:1px;margin-top:-1px;overflow:hidden;opacity:0;transition:opacity .3s}
.cap-progress i{display:block;height:100%;width:100%;background:var(--cyan);transform:scaleX(0);transform-origin:right center}
.cap-progress.is-running{opacity:.8}
.cap-progress.is-running i{animation:capProgress var(--cap-interval,5s) linear forwards}
@keyframes capProgress{to{transform:scaleX(1)}}

.cap-label{position:absolute;left:0;top:0;z-index:3;pointer-events:none;opacity:0;will-change:transform,opacity}
.cap-label svg{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible}
.cap-label path{fill:none;stroke:var(--cyan);stroke-width:1;opacity:.85}
.cap-label circle{fill:var(--cyan)}
.cap-card{position:absolute;top:-38px;transform:translateY(-50%);display:flex;flex-direction:column;gap:1px;padding:8px 13px 9px;border:1px solid rgba(0,209,193,.3);border-radius:10px;background:rgba(5,13,20,.8);backdrop-filter:blur(10px);white-space:nowrap;direction:rtl;text-align:right}
.cap-label[data-side="r"] .cap-card{left:94px}
.cap-label[data-side="l"] .cap-card{right:94px}
.cap-title{color:var(--muted);font-size:10px;line-height:1.5}
.cap-metric{color:var(--white);font-size:13px;font-weight:700;line-height:1.5;direction:rtl}
.cap-metric__sep{display:inline-block;width:1px;height:.8em;margin:0 .55em;vertical-align:-.05em;color:transparent;overflow:hidden;background:rgba(0,209,193,.55)}
.cap-label.is-docked svg{display:none}
.cap-label.is-docked .cap-card{left:0 !important;right:auto !important;top:0;transform:translate(-50%,-100%);text-align:center;align-items:center}

.scroll-cue{position:relative;z-index:2;display:flex;align-items:center;gap:12px;margin-top:auto;color:#93a9b0;font-size:10px;opacity:.9;transition:opacity .4s var(--ease),visibility .4s}
.scroll-arrow{display:grid;place-items:center;width:20px;height:28px;border:1px solid rgba(0,209,193,.45);border-radius:12px;color:var(--cyan);animation:scrollCue 1.8s ease-in-out infinite}
.scroll-arrow svg{width:11px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@keyframes scrollCue{0%,100%{transform:translateY(0);opacity:.62}50%{transform:translateY(5px);opacity:1}}

.step-nav{position:absolute;left:28px;bottom:20px;z-index:3;display:flex;align-items:center;gap:16px;direction:rtl;font-size:10px;color:var(--muted)}
.step-index{display:flex;align-items:center;gap:2px}
.step-index button{all:unset;cursor:pointer;padding:6px 7px;border-radius:6px;font-variant-numeric:tabular-nums;color:#5f727c;transition:color .3s}
.step-index button:hover{color:var(--white)}
.step-index button[aria-current="step"]{color:var(--cyan)}
.step-index span{width:12px;height:1px;background:rgba(185,221,227,.2)}
.step-skip{all:unset;cursor:pointer;padding:6px 8px;border-radius:6px;color:#5f727c;transition:color .3s}
.step-skip:hover{color:var(--white)}
.step-index button:focus-visible,.step-skip:focus-visible{outline:1px solid var(--cyan);outline-offset:-1px}

/* Step states */
.hero:not([data-step="0"]) .scroll-cue{opacity:0;visibility:hidden}
.hero[data-step="2"] .eyebrow{opacity:0;transform:translateY(-7px)}
.hero[data-step="2"] .hero-copy{transform:translateY(-10px)}
.hero[data-step="2"] .experience{transform:translateY(-28px)}
.hero[data-step="2"] .cap-wrap,.hero[data-fallback="true"] .cap-wrap{opacity:1}
.hero[data-fallback="true"] .step-nav,.hero[data-fallback="true"] #server-canvas{display:none}


@media (max-width:980px) and (min-width:681px){.experience{height:clamp(400px,48svh,580px)}}
@media (max-height:820px) and (min-width:681px){.hero-stage{padding-top:118px}}
/* Short viewports: the stage itself shrinks so the capability row always stays on screen. */
.experience{flex:1 1 auto;max-height:clamp(460px,60svh,640px)}
@media (max-height:720px) and (min-width:681px){
  .site-nav,.site-nav.scrolled{top:10px;height:58px}
  .hero-stage{padding-top:86px;padding-bottom:12px}
  .eyebrow{margin-bottom:8px}
  h1{font-size:clamp(34px,4.4vw,52px)}
  .experience{min-height:200px}
  .story-caption{min-height:24px}
  .cap-wrap{margin-top:10px}
  .scroll-cue span:first-child{display:none}
  .step-nav{bottom:10px}
}
@media (max-height:600px) and (min-width:681px){
  .hero-stage{padding-top:78px}
  .site-nav,.site-nav.scrolled{top:8px;height:54px}
  .eyebrow{display:none}
  h1{font-size:clamp(30px,3.8vw,44px)}
  .experience{min-height:170px}
  .scroll-cue{display:none}
}
@media (max-width:680px){
  .hero-stage{padding:106px 16px 16px}
  .hero-copy{max-width:100%}
  .eyebrow{font-size:9px;margin-bottom:12px}
  h1{font-size:45px}
  .experience{width:calc(100% + 22px);height:clamp(320px,45svh,430px);max-height:none;min-height:240px;flex:0 1 auto;margin-top:2px;transform:translateY(-10px)}
  .hero[data-step="2"] .experience{transform:translateY(-18px)}
  .scene-status{font-size:8px}
  .story-caption{font-size:12px}
  .cap-wrap{margin-top:12px}
  .capabilities button{padding:8px 10px;font-size:10.5px}
  .scroll-cue{font-size:9px}
  .scroll-cue span:first-child{display:none}
  .step-nav{left:12px;bottom:12px;gap:8px}
  .hero-poster{object-position:center top} /* mobile poster is laid out from the top, like the stage */
}
@media (prefers-reduced-motion:reduce){
  .scroll-arrow{animation:none}
  .story-caption,.capabilities li,.hero-copy,.experience,.eyebrow,.hero-poster,#server-canvas{transition:none}
}