/* Layout: one fixed stage (WebGL sky + SVG peaks + glass UI) driven by a damped scroll value p in 0..1. Scenes are centred grids that fade and blur their words in. */
:root{
  --sky:#e6eaf7;            /* pale lavender haze */
  --ink:#1f2c52;            /* deep indigo text on light scenes */
  --soft:#5e6d96;           /* secondary text on light scenes */
  --snow:#ffffff;           /* text on dark scenes */
  --glass:rgba(255,255,255,.14);
  --glass-line:rgba(255,255,255,.34);
  --accent:#6b86ff;
  --chrome:#1f2c52;         /* nav colour, changed per scene by script */
  --on-chrome:#e6eaf7;      /* text on the chrome-coloured button */
  --tint:rgba(255,255,255,.14); /* glass fill, darker on dark scenes */
  --sans:'Geist','Helvetica Neue',Arial,system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--sky);color:var(--ink);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased}
body{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0}
#track{height:1000vh}
#stage{position:fixed;inset:0;overflow:hidden;background:var(--sky)}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;background:linear-gradient(160deg,#dfe4f5,#f2f4fb 60%,#cdd7ee)}
#hv{position:absolute;inset:0;background:#07090f;will-change:opacity}
#hv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#hv .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,6,16,.82),rgba(4,6,16,.12) 52%,rgba(4,6,16,.42))}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:6px}

/* nav: floating glass pill */
header{position:absolute;left:0;right:0;top:0;z-index:8;display:flex;justify-content:center;
  padding:calc(18px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));pointer-events:none}
.pill{pointer-events:auto;display:flex;align-items:center;gap:clamp(14px,3vw,36px);padding:8px 8px 8px 20px;border-radius:999px;
  background:var(--tint);border:1px solid var(--glass-line);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  color:var(--chrome);transition:color .6s ease;font-size:13px;letter-spacing:.01em;font-weight:400}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:500;letter-spacing:.14em;font-size:12px}
.brand svg{width:18px;height:18px}
.pill nav{display:flex;gap:clamp(12px,2.2vw,28px)}
.pill nav a{text-decoration:none;opacity:.78;transition:opacity .25s}
.pill nav a:hover{opacity:1}
.cta{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:var(--chrome);color:var(--on-chrome);text-decoration:none;font-weight:500;transition:background .6s,color .6s,transform .25s,translate .3s ease}
.cta:hover{transform:translateY(-1px)}
.menu-btn{display:none;background:none;border:0;color:inherit;font:inherit;font-weight:400;padding:8px 6px;cursor:pointer}
@media(max-width:760px){.pill nav{display:none}.pill{padding-left:16px;gap:10px}.menu-btn{display:block}}
#menu{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;justify-content:center;gap:24px;padding:calc(80px + env(safe-area-inset-top,0px)) max(28px,env(safe-area-inset-left,0px)) 40px;
  background:rgba(14,24,58,.78);backdrop-filter:blur(26px) saturate(1.4);-webkit-backdrop-filter:blur(26px) saturate(1.4);color:#fff;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
#menu.open{opacity:1;visibility:visible}
#menu nav{display:flex;flex-direction:column}
#menu a{display:block;padding:6px 0;text-decoration:none;font-weight:200;letter-spacing:-.04em;font-size:clamp(36px,11vw,64px);opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.1,1);transition-delay:calc(var(--i)*.05s)}
#menu.open a{opacity:1;transform:none}
#menu .close{position:absolute;right:max(20px,env(safe-area-inset-right,0px));top:calc(22px + env(safe-area-inset-top,0px));background:none;border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:999px;padding:10px 18px;font:inherit;font-size:13px;cursor:pointer}
@media(min-width:761px){#menu{display:none}}

/* chapter index (a real sequence, so it is numbered) */
#idx{position:absolute;right:max(20px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);z-index:7;display:flex;flex-direction:column;gap:14px;align-items:flex-end;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--chrome);transition:color .6s}
#idx button{background:none;border:0;padding:6px 0;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;display:flex;gap:10px;align-items:center;opacity:.4;transition:opacity .4s}
#idx button span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .5s ease;text-transform:uppercase}
#idx button i{display:block;height:1px;width:14px;background:currentColor;transition:width .5s ease}
#idx button:hover{opacity:.85}
#idx button.on{opacity:1}
#idx button.on span{max-width:150px}
#idx button.on i{width:34px}
@media(max-width:760px){#idx{display:none}}
#bar{position:absolute;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--chrome);z-index:9;opacity:.7;transition:background .6s}

/* scenes */
.scene{position:absolute;inset:0;display:grid;align-content:center;padding:clamp(80px,12vh,120px) max(24px,env(safe-area-inset-left,0px));pointer-events:none;opacity:0;visibility:hidden;will-change:opacity,transform}
.scene>*{pointer-events:auto}
.scene a,.scene button{pointer-events:auto}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin:0 0 22px}
.stmt{margin:0;font-weight:300;letter-spacing:-.035em;line-height:1.06;font-size:clamp(32px,5.6vw,84px);max-width:16em;text-wrap:balance}
.stmt .w{display:inline-block;will-change:opacity,transform,filter;opacity:0}
.hl{background:linear-gradient(90deg,#5d7bff,#b678ff 55%,#ff8fc0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
#s3 .hl,#s4b .hl{background-image:linear-gradient(90deg,#a6f3e4,#d4ff9e 55%,#fff2ae)}
.body{font-size:clamp(14px,1.15vw,17px);line-height:1.65;max-width:34em;margin:0;font-weight:300}
.btn{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding:13px 22px;border-radius:999px;border:1px solid currentColor;text-decoration:none;font-size:13px;font-weight:400;letter-spacing:.02em;transition:background .3s,color .3s,translate .3s ease}
.btn:hover{background:currentColor}
.btn:hover span{color:var(--sky)}
.btn svg{width:14px;height:14px}

#s0{justify-items:start;align-content:end;padding-bottom:clamp(90px,15vh,160px)}
#s0 h1{margin:0;font-weight:200;font-size:clamp(40px,8.4vw,140px);line-height:.9;letter-spacing:-.06em;color:#fff;max-width:100%;text-shadow:0 4px 40px rgba(0,0,0,.35)}
#s0 h1 .vn{font-weight:300;letter-spacing:-.03em;color:#b9c6ff}
#s0 h1 span{display:inline-block;animation:rise 1.4s cubic-bezier(.2,.7,.1,1) both}
#s0 h1 span{animation-delay:calc(var(--i)*.05s)}
@keyframes rise{from{opacity:0;transform:translateY(40px);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
#s0 .meta{position:absolute;right:max(24px,env(safe-area-inset-right,0px));bottom:calc(28px + env(safe-area-inset-bottom,0px));display:flex;gap:10px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75)}
#s0 .meta b{font-weight:400;color:#fff;font-variant-numeric:tabular-nums}
#s0 h1 span{will-change:translate}
#s0 .sub{display:flex;gap:24px;align-items:center;margin-top:28px;color:rgba(255,255,255,.82);font-size:clamp(14px,1.3vw,18px)}
#s0 .cue{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
#s0 .cue i{display:block;width:1px;height:34px;background:currentColor;transform-origin:top;animation:tick 2.4s ease-in-out infinite}
@keyframes tick{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}

#s1{color:var(--ink);grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(24px,6vw,96px);align-items:end}
#s1 .body{color:var(--soft);padding-bottom:1.2vw}
#s1 .stmt{max-width:12em}
@media(max-width:900px){#s1{grid-template-columns:1fr;align-content:center;gap:28px}}

#sc{color:var(--snow);grid-template-columns:minmax(0,1fr);gap:clamp(18px,4vh,40px);align-content:center}
#sc h2{margin:0;font-weight:300;letter-spacing:-.035em;font-size:clamp(26px,3.6vw,56px);max-width:13em;text-wrap:balance}
.rail{display:flex;flex-wrap:nowrap;gap:clamp(12px,1.6vw,22px);will-change:transform;--hp:0}
.dv{flex:none;width:min(78vw,430px);height:clamp(230px,40vh,380px);border-radius:28px;position:relative;overflow:hidden;padding:clamp(18px,2.2vw,30px);display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--glass-line);background:rgba(10,32,60,.32);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4)}
.dv::before{content:"";position:absolute;inset:-25%;background:var(--g);opacity:.8;filter:blur(36px);transform:translate3d(calc(var(--hp)*-70px),0,0);z-index:0}
.dv>*{position:relative;z-index:1}
.dv .no{font-family:var(--mono);font-size:11px;letter-spacing:.12em;opacity:.8}
.dv h3{margin:0 0 10px;font-weight:300;letter-spacing:-.04em;font-size:clamp(34px,4vw,60px);line-height:1}
.dv p{margin:0;font-size:clamp(13px,1.05vw,15px);line-height:1.55;opacity:.9;max-width:24em}
.dv .go{align-self:flex-end;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.6);display:grid;place-items:center}
.dv .go svg{width:16px;height:16px}
.dv:nth-child(1){--g:radial-gradient(circle at 20% 25%,#8fb0ff,transparent 60%),radial-gradient(circle at 85% 80%,#c6a4ff,transparent 55%)}
.dv:nth-child(2){--g:radial-gradient(circle at 75% 20%,#ffb3d6,transparent 58%),radial-gradient(circle at 20% 85%,#9aa8ff,transparent 55%)}
.dv:nth-child(3){--g:radial-gradient(circle at 25% 75%,#8ff0d8,transparent 58%),radial-gradient(circle at 85% 20%,#8fb8ff,transparent 55%)}
.dv:nth-child(4){--g:radial-gradient(circle at 80% 75%,#ffd9a0,transparent 58%),radial-gradient(circle at 15% 20%,#ff9fb8,transparent 55%)}
#s2{color:var(--snow);gap:clamp(14px,3vh,36px);padding-top:clamp(96px,15vh,140px)}
#s2 h2{margin:0;font-weight:300;letter-spacing:-.03em;font-size:clamp(22px,2.8vw,42px);max-width:14em;text-wrap:balance}
.card,.tile,.panel{position:relative;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s cubic-bezier(.2,.7,.1,1)}
.card::after,.tile::after,.panel::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.26),transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover::after,.tile:hover::after,.panel:hover::after{opacity:1}
.card{padding:clamp(18px,2.2vw,32px);border-radius:24px;background:rgba(10,32,60,.3);border:1px solid var(--glass-line);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);min-height:clamp(100px,16vh,170px);display:flex;flex-direction:column;justify-content:space-between;gap:20px;will-change:transform}
 .bento{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:clamp(10px,1.4vw,18px)}
.card.wide{grid-row:span 2}.card.span2{grid-column:span 2}
.chart{flex:1;min-height:80px}.chart svg{width:100%;height:100%;display:block;overflow:visible}
#line{stroke-dasharray:1;stroke-dashoffset:1}#area{opacity:0}
@media(max-width:760px){#s2{padding-top:clamp(92px,13vh,110px);gap:12px}#s2 h2{font-size:22px}.bento{grid-template-columns:1fr 1fr;gap:10px}.card.wide,.card.span2{grid-column:1/-1;grid-row:auto}.card{min-height:96px;padding:16px;gap:10px}.card:not(.wide) p{display:none}.card b{font-size:44px}.card.span2{flex-direction:row;align-items:flex-end;justify-content:space-between}.chart{min-height:56px}}
.card b{font-weight:200;font-size:clamp(44px,6vw,96px);letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.card b small{font-size:.38em;letter-spacing:-.02em;margin-left:.1em}
.card p{margin:0;font-size:clamp(13px,1.05vw,15px);line-height:1.55;opacity:.88;max-width:22em}
.card h3{margin:0 0 8px;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.fine{font-family:var(--mono);font-size:10px;letter-spacing:.1em;opacity:.55;text-transform:uppercase}

#s3{color:var(--snow);align-content:end;padding-bottom:clamp(60px,10vh,120px)}
#s3 .kicker{text-shadow:0 1px 14px rgba(0,24,48,.45);opacity:.9}
#s3 .stmt{max-width:15em;text-shadow:0 2px 40px rgba(6,28,56,.35)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.chip{display:inline-flex;gap:10px;align-items:center;padding:10px 16px;border-radius:999px;background:rgba(8,36,64,.32);border:1px solid var(--glass-line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:13px;font-weight:400}
.chip i{width:7px;height:7px;border-radius:50%;background:#9cf0c7;box-shadow:0 0 0 0 rgba(156,240,199,.7);animation:ping 2.4s infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(156,240,199,0)}100%{box-shadow:0 0 0 0 rgba(156,240,199,0)}}

#s4a{color:var(--snow);align-content:center}
.panel{max-width:1100px;padding:clamp(22px,3.2vw,48px);border-radius:28px;background:rgba(6,34,44,.28);border:1px solid var(--glass-line);backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3)}
.panel h2{margin:0 0 clamp(18px,3vh,34px);font-weight:300;letter-spacing:-.03em;font-size:clamp(24px,3vw,44px)}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,44px)}
.cols p{margin:0;font-size:clamp(12.5px,1vw,15px);line-height:1.65;opacity:.9}
.cols h3{margin:0 0 10px;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
@media(max-width:760px){.cols{grid-template-columns:1fr}}

#s4b{color:var(--snow);justify-items:center;text-align:center}
#s4b .stmt{max-width:13em;text-shadow:0 2px 40px rgba(2,30,40,.4)}
#s4b .diamond{width:34px;height:34px;border:1px solid currentColor;transform:rotate(45deg);margin:0 auto 38px;opacity:.8;border-radius:6px}

#s4c{color:var(--snow);align-content:center;gap:clamp(18px,4vh,40px)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.4vw,18px)}
.tile{aspect-ratio:4/3;border-radius:22px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:18px;border:1px solid var(--glass-line)}
.tile span{position:relative;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.tile::before{content:"";position:absolute;inset:0}
.t1::before{background:radial-gradient(circle at 25% 80%,rgba(255,236,200,.7),transparent 55%),linear-gradient(140deg,#e29b6c,#a55a45)}
.t2::before{background:radial-gradient(circle at 75% 25%,rgba(240,225,255,.7),transparent 55%),linear-gradient(140deg,#7b5ca8,#40306e)}
.t3::before{background:radial-gradient(circle at 30% 30%,rgba(255,215,220,.7),transparent 55%),linear-gradient(140deg,#b04656,#5f1d2e)}
.pl{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-end}
.pl h2{margin:0;font-weight:300;letter-spacing:-.03em;font-size:clamp(24px,3vw,44px);max-width:14em;text-wrap:balance}
@media(max-width:760px){.tile{aspect-ratio:1/1.1;padding:10px}.tile span{font-size:9px}}

/* footer */
#foot{position:absolute;left:0;right:0;bottom:0;z-index:6;transform:translateY(102%);will-change:transform;color:var(--ink);
  background:linear-gradient(#f3f5fc,#e6eaf7);border-radius:32px 32px 0 0;
  padding:clamp(28px,6vh,64px) max(24px,env(safe-area-inset-left,0px)) calc(24px + env(safe-area-inset-bottom,0px));min-height:62vh;display:flex;flex-direction:column;justify-content:space-between;gap:36px;overflow:hidden}
#foot .top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,64px)}
#foot h2{margin:0 0 20px;font-weight:300;letter-spacing:-.035em;line-height:1.05;font-size:clamp(28px,3.6vw,56px);max-width:11em}
#foot h3{margin:0 0 12px;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
#foot address,#foot ul{font-style:normal;margin:0;padding:0;list-style:none;font-size:14px;line-height:1.8}
#foot a{text-decoration:none}
#foot a:hover{text-decoration:underline}
@keyframes mq{to{transform:translateX(-50%)}}
.marq{overflow:hidden;white-space:nowrap;margin:0 0 clamp(18px,3vh,36px)}
.trk{display:inline-flex;align-items:center;gap:clamp(20px,3vw,48px);padding-right:clamp(20px,3vw,48px);animation:mq 36s linear infinite;font-weight:200;font-size:clamp(26px,3.6vw,52px);letter-spacing:-.03em;color:rgba(31,44,82,.5);will-change:transform}
.trk i{width:12px;height:12px;border:1px solid currentColor;transform:rotate(45deg);flex:none;border-radius:2px}
#foot .big{font-weight:200;font-size:clamp(70px,19vw,300px);letter-spacing:-.07em;line-height:.8;color:rgba(31,44,82,.1);margin:0 0 -.1em;user-select:none;white-space:nowrap}
#foot .base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);border-top:1px solid rgba(31,44,82,.14);padding-top:18px}
#foot .cta{background:var(--ink);color:#fff}
@media(min-width:761px){.scene{padding-right:max(24px,120px)}}
@media(max-width:860px){#foot .top{grid-template-columns:repeat(2,minmax(0,1fr))}#foot .top>div:first-child{grid-column:1/-1}}

@media(prefers-reduced-motion:reduce){#s0 h1 span,#s0 .cue i,.chip i,.marq .trk{animation:none}}

.loader {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
}
.loader::before,
.loader::after {
  content:"";
  grid-area: 1/1;
  --c:no-repeat radial-gradient(farthest-side,#25b09b 92%,#0000);
  background:
    var(--c) 50%  0,
    var(--c) 50%  100%,
    var(--c) 100% 50%,
    var(--c) 0    50%;
  background-size: 12px 12px;
  animation: l12 1s infinite;
}
.loader::before {
  margin: 4px;
  filter: hue-rotate(45deg);
  background-size: 8px 8px;
  animation-timing-function: linear
}
@keyframes l12 {
  100%{transform: rotate(.5turn)}
}
 
#loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,#10192f,#05070f 70%);color:#fff;transition:opacity .9s ease,visibility .9s}
#loader.done{opacity:0;visibility:hidden;pointer-events:none}
.ld-box{display:grid;justify-items:center;gap:20px}
.ld-brand{margin:6px 0 0;font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.32em;opacity:.8}
.ld-line{width:130px;height:1px;background:rgba(255,255,255,.18);overflow:hidden}
.ld-line i{display:block;height:100%;background:#25b09b;transform-origin:0 50%;transform:scaleX(0)}
.ld-pct{margin:0;font-family:ui-monospace,Menlo,monospace;font-size:12px;opacity:.65;font-variant-numeric:tabular-nums}
 
/* OPTIONAL: if your hero has an entrance animation, hold it until the loader is done.
   Replace the selector with your own animated element. */
/* #s0 h1 span{animation-play-state:paused}
   html.ready #s0 h1 span{animation-play-state:running} */