/* Scene layout has a complete static fallback when JS or motion is unavailable. */
.hero{display:block;padding:0;min-height:0}
.hero-stage{position:relative;min-height:max(720px,100svh);display:flex;align-items:center;justify-content:center;padding:140px 32px 145px;isolation:isolate}
.hero-progress{position:absolute;inset:auto 0 0;height:2px;overflow:hidden;background:#ffffff08;pointer-events:none}
.hero-progress i{display:block;height:100%;background:linear-gradient(90deg,#7c4dff,#ff2e9e,#ffc24a);transform:scaleX(var(--hero-progress,0));transform-origin:right;box-shadow:0 0 18px #ffc24a80}
#learn{max-width:none;padding:0}
.learn-stage{max-width:1224px;margin:auto;padding:112px 32px}
.learn-progress{display:none}

/* Native sticky positioning lets the user freely reverse or skip a scene. */
.has-pinned-scenes .hero{height:180svh}
.has-pinned-scenes .hero-stage{position:sticky;top:0;height:100svh;min-height:0}
.has-pinned-scenes #learn{height:230svh}
.has-pinned-scenes .learn-stage{position:sticky;top:82px;height:calc(100svh - 82px);padding-block:48px 60px;display:flex;flex-direction:column;justify-content:center}
.has-pinned-scenes .learn-layout{align-items:center}
.has-pinned-scenes .learn-progress{display:flex;align-items:center;gap:22px;margin-top:32px;color:#a79baf;font-size:12px}
.learn-progress>div{height:2px;flex:1;background:#ffffff12;overflow:hidden}
.learn-progress i{display:block;height:100%;background:var(--gold);transform:scaleX(var(--learn-progress,0));transform-origin:right}
.learn-progress b{font-size:13px;color:var(--gold);font-weight:500;font-variant-numeric:tabular-nums}

/* Override only the old hero handoff; its independent SVG introduction stays intact. */
.has-scroll-scenes #wmWrap{opacity:1!important;transform:none!important}
.has-scroll-scenes .wm-wrap>.ltr{translate:calc(var(--hero-progress,0) * -42px) calc(var(--hero-progress,0) * -65px);scale:calc(1 + var(--hero-progress,0) * .23);rotate:calc(var(--hero-progress,0) * -4deg);will-change:translate,scale,rotate}
.has-scroll-scenes.intro-done .wm-wrap>.ltr{opacity:calc(1 - var(--hero-exit,0) * .6)}
.has-scroll-scenes.intro-done .wm-say{opacity:calc(1 - var(--hero-exit,0) * .78)!important;translate:0 calc(var(--hero-progress,0) * -78px);filter:blur(calc(var(--hero-exit,0) * 4px));will-change:translate,opacity}
.has-scroll-scenes .wm-cap{translate:0 calc(var(--hero-progress,0) * -25px);opacity:calc(1 - var(--hero-progress,0))!important}
.has-scroll-scenes .hero-bottom{translate:0 calc(var(--hero-progress,0) * -20px);opacity:calc(1 - var(--hero-progress,0) * .75)}
.has-scroll-scenes .wm-wrap>.ltr:before{animation:gridDrift 12s ease-in-out infinite alternate}
.has-scroll-scenes .wm-wrap>.ltr:after{content:'';position:absolute;inset:-65px -50px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 36% 50%,#7c4dff24,transparent 56%),radial-gradient(ellipse at 75% 65%,#ffc24a16,transparent 53%);filter:blur(20px);animation:brandLight 7s ease-in-out infinite alternate}
.has-scroll-scenes.intro-done .wm{animation:brandFloat 7s ease-in-out infinite}
@keyframes brandFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes gridDrift{from{transform:perspective(800px) rotateY(-9deg) translateY(8px);opacity:.48}to{transform:perspective(800px) rotateY(9deg) translateY(-8px);opacity:.95}}
@keyframes brandLight{from{transform:translate(-12px,12px) scale(.9);opacity:.45}to{transform:translate(14px,-8px) scale(1.14);opacity:1}}
.has-scroll-scenes .trust-inner p{opacity:calc(.25 + var(--trust-reveal,0) * .75);translate:0 calc((1 - var(--trust-reveal,0)) * 20px)}
.has-scroll-scenes .trust-names{opacity:calc(.2 + var(--trust-reveal,0) * .8);translate:calc((1 - var(--trust-reveal,0)) * -38px) 0}

/* The row anchors remain static; only their contents move, avoiding scroll feedback. */
.has-scroll-scenes .deliverable-list{position:relative;border-top:0}
.has-scroll-scenes .deliverable-list:before{content:'';position:absolute;right:-18px;top:0;width:2px;height:100%;background:#ffffff0b}
.has-scroll-scenes .deliverable-list:after{content:'';position:absolute;right:-18px;top:0;width:2px;height:100%;background:linear-gradient(#7c4dff,var(--gold));transform:scaleY(calc(.1 + var(--learn-progress,0) * .9));transform-origin:top;box-shadow:0 0 15px #ffc24a33}
.has-scroll-scenes .deliverable-row{--row-reveal:0;position:relative;opacity:calc(.28 + var(--row-reveal) * .72);transition:background .4s,border-color .4s;border-top:1px solid transparent;border-radius:8px;padding-inline:14px}
.has-scroll-scenes .deliverable-row>div{translate:calc((1 - var(--row-reveal)) * -24px) calc((1 - var(--row-reveal)) * 16px);filter:blur(calc((1 - var(--row-reveal)) * 1.8px));will-change:translate,filter}
.has-scroll-scenes .deliverable-row .item-symbol{scale:calc(.65 + var(--row-reveal) * .35);rotate:calc((1 - var(--row-reveal)) * -50deg);opacity:var(--row-reveal);transition:color .35s}
.has-scroll-scenes .deliverable-row.is-current{background:linear-gradient(270deg,#ffc24a0e,transparent);border-top-color:#ffc24a28;border-bottom-color:#ffc24a38}
.has-scroll-scenes .deliverable-row.is-current .list-index{color:var(--gold)}
.has-scroll-scenes .deliverable-row.is-current h3{color:#ffe0a5}
.has-scroll-scenes .deliverable-row:focus-within{opacity:1}.has-scroll-scenes .deliverable-row:focus-within>div{translate:none;filter:none}
.has-scroll-scenes #learn-title em{display:inline;background:linear-gradient(90deg,#ffc24a 25%,#fff0d2 48%,#ffc24a 71%);background-size:220% 100%;background-position:calc(var(--learn-progress,0) * 100%) 0;background-clip:text;-webkit-background-clip:text;color:transparent}
.has-scroll-scenes .path-step{opacity:.12;translate:0 48px;transition:opacity .9s var(--ease),translate .9s var(--ease)}
.has-scroll-scenes .path-step:nth-child(2){transition-delay:.13s}.has-scroll-scenes .path-step:nth-child(3){transition-delay:.26s}
.has-scroll-scenes .path-section.scene-visible .path-step,.has-scroll-scenes .path-step:focus-within{opacity:1;translate:0 0}

@media(max-width:1000px){.learn-layout{gap:50px}.has-pinned-scenes .learn-stage{padding-block:32px 38px}.has-pinned-scenes .deliverable-row{padding-block:20px}}
@media(max-width:767px){
 .hero-stage{min-height:0;padding:100px 24px 152px}
 .learn-stage{padding:68px 24px}
 .has-scroll-scenes .wm-wrap>.ltr{translate:0 calc(var(--hero-progress,0) * -65px);scale:calc(1 + var(--hero-progress,0) * .12);rotate:calc(var(--hero-progress,0) * -3deg)}
 .has-scroll-scenes.intro-done .wm-say{translate:0 calc(var(--hero-progress,0) * -16px);filter:none;opacity:1!important}
 .has-scroll-scenes .wm-wrap>.ltr:after{inset:-35px 0}
 .has-scroll-scenes .deliverable-list:before,.has-scroll-scenes .deliverable-list:after{right:-9px}
 .has-scroll-scenes .deliverable-row{padding-inline:10px}
 .has-scroll-scenes .deliverable-row>div{filter:none;translate:0 calc((1 - var(--row-reveal)) * 22px)}
}
@media(prefers-reduced-motion:reduce){
 .hero-stage,.learn-stage{position:relative}
 .hero-progress{display:none}
}