/* hero: a pinned glass screen that arrives tilted, settles, then flattens and fills the viewport as you scroll */
.hero{height:280vh;position:relative}
.pin{position:sticky;top:0;height:100vh;overflow:hidden}
.screen{position:absolute;inset:var(--mt,84px) var(--mx,6vw) var(--mb,5vh);border-radius:var(--rad,30px);overflow:hidden;
  transform-origin:50% 50%;will-change:transform,opacity;
  background:linear-gradient(135deg,rgba(255,255,255,calc(.1 * var(--g,1))),rgba(255,255,255,calc(.02 * var(--g,1))) 40%,rgba(8,18,46,calc(.34 * var(--g,1))));
  border:1px solid rgba(255,255,255,calc(.18 * var(--g,1)));
  backdrop-filter:blur(var(--blur,7px)) saturate(1.3);-webkit-backdrop-filter:blur(var(--blur,7px)) saturate(1.3);
  box-shadow:0 50px 140px rgba(30,60,210,calc(.42 * var(--g,1))),inset 0 1px 0 rgba(255,255,255,calc(.25 * var(--g,1))),inset 0 0 150px rgba(90,130,255,calc(.22 * var(--g,1)))}
.screen::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,10,28,.94),rgba(4,10,28,.78) 48%,rgba(4,10,28,.15) 85%);pointer-events:none}
.sheen{position:absolute;inset:-20%;background:linear-gradient(105deg,transparent 40%,rgba(200,215,255,.16) 50%,transparent 60%);transform:translateX(var(--sheen,-40%));pointer-events:none}
.screen-in{position:relative;height:100%;padding:clamp(40px,8vh,90px) clamp(20px,5.5vw,96px) clamp(26px,4vh,44px);display:flex;flex-direction:column;justify-content:center}
.copy-a{max-width:780px;position:relative}
.copy-a .big{max-width:11.5em}
.lede{max-width:34em;margin-top:1.4rem;color:#d3dcf5;font-size:clamp(1rem,1.25vw,1.2rem);opacity:var(--la,1);transform:translateY(calc((1 - var(--la,1)) * 24px))}
.row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem;opacity:var(--la,1)}
.copy-a .kicker{opacity:var(--la,1)}
.copy-b{text-shadow:0 2px 24px rgba(4,10,28,.95),0 0 6px rgba(4,10,28,.9);position:absolute;left:clamp(20px,5.5vw,96px);right:clamp(20px,5.5vw,96px);top:50%;transform:translateY(-50%);max-width:10.5em;pointer-events:none}
.foot{position:absolute;left:clamp(20px,5.5vw,96px);bottom:clamp(22px,4vh,42px);display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;list-style:none;padding:0;color:var(--mut);opacity:var(--la,1)}
.foot li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue);margin-right:.6rem;vertical-align:middle}
.hint{position:absolute;right:clamp(20px,5.5vw,96px);bottom:clamp(22px,4vh,42px);color:var(--lilac);opacity:var(--la,1)}

@media (max-width:760px){
  .screen{--mt:70px;--mx:3.5vw;--mb:3vh}
  .screen::before{background:linear-gradient(0deg,rgba(4,10,28,.96),rgba(4,10,28,.8) 55%,rgba(4,10,28,.1) 88%)}
  .screen-in{justify-content:flex-end;padding:24px 20px 78px}
  .big{font-size:clamp(2.3rem,11.5vw,3.4rem)}
  .lede{font-size:.98rem;margin-top:.9rem}
  .row{margin-top:1.1rem}
  .copy-b{top:auto;bottom:90px;transform:none}
  .hint{display:none}
  .foot{bottom:22px;gap:.3rem 1rem}
}
@media (prefers-reduced-motion:reduce){
  .hero{height:auto}
  .pin{position:relative;height:100vh;min-height:620px}
  .copy-b,.hint{display:none}
}