/* 10 — Hero (owner: B1). The product film gets the first screen: compact copy on top, the film right under it, and the
   live liquid-glass logo standing on the film frame's top edge (its floor line IS the frame's rim). */
.hero{position:relative;padding-top:calc(var(--nav-h) + clamp(20px,4.4vh,48px));padding-bottom:clamp(40px,5vw,64px);isolation:isolate}
.hero-bg{position:absolute;inset:0 0 auto;height:min(1400px,160vh);z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 40% at 50% 62%,rgba(59,99,255,.13),transparent 70%)}
.hero-top{position:relative}

/* copy */
.hero-copy{position:relative;z-index:2;max-width:min(820px,100% - clamp(280px,30.5vw,440px) - 24px);padding-bottom:clamp(28px,3.4vh,40px)}
.hero-eyebrow{margin-bottom:clamp(10px,1.2vw,16px);color:var(--fg)}
.hero-by{color:var(--fg-3);font-weight:500}
.hero-title{font-size:clamp(44px,4.1vw + 15px,80px);letter-spacing:-.034em;line-height:.98;max-width:15ch}
.hero-title>*{padding-bottom:.22em;margin-bottom:-.22em} /* room for descenders inside the SplitText line masks */
.hero-sub{max-width:38em;margin-top:clamp(14px,1.6vw,22px)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:clamp(20px,2.2vw,28px)}
.hero-buy{min-height:54px;padding:0 26px;font-size:17px}
.hero-watch{font-size:16px}
.hero-watch .play svg{transform:translateX(1px)}
.hero-dur{color:var(--fg-3);font-weight:500}
/* launch-offer chip (shared treatment: see .sheet__offer). Two halves that never break inside; the countdown has a
   fixed width so the chip never jitters or re-wraps as the digits (or the "2d" prefix) change. */
.hero-offer-row{order:3;flex-basis:100%}
.hero-offer{display:inline-flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:2px;margin:0;padding:8px 12px;border-radius:12px;
  background:rgba(59,99,255,.12);box-shadow:inset 0 0 0 1px rgba(159,180,255,.28);
  font-size:15px;line-height:1.35;font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums}
.hero-offer__a,.hero-offer__end{white-space:nowrap}
.hero-offer__a{display:inline-flex;align-items:baseline}
.hero-was{margin-right:8px}
.hero-offer__a::after{content:"·";color:var(--fg-3);font-weight:500;margin-left:8px}
@media (max-width:600px){ /* phones: the countdown always gets its own line, so the chip's height never changes */
  .hero-offer__a::after{content:none}
  .hero-offer{display:inline-flex;flex-direction:column}
}
.hero-offer__l+.hero-offer__pct::before{content:"·";color:var(--fg-3);font-weight:500;margin:0 8px}
.hero-was{color:var(--fg-2);font-weight:500;text-decoration-thickness:1px}
.hero-offer__pct{color:var(--blue-2)}
.hero-offer__end{color:var(--fg)}
.hero-timer{display:inline-block;min-width:13.6ch;text-align:left}
.hero-micro{margin-top:14px;color:var(--fg-3);font-size:14px}

.hero-req{margin-top:2px}

/* glass logo: a small stage whose bottom edge sits exactly on the film frame's top edge */
.hero-stage{position:absolute;z-index:1;right:clamp(0px,1.6vw,24px);bottom:-1px;width:clamp(280px,30.5vw,440px);aspect-ratio:7/5}
.hero-gl,.hero-logo-img{position:absolute;inset:0;width:100%;height:100%;
  -webkit-mask-image:radial-gradient(50% 100% at 50% 100%,#000 60%,transparent 99%);mask-image:radial-gradient(50% 100% at 50% 100%,#000 60%,transparent 99%)}
.hero-gl{opacity:0;transition:opacity .6s var(--e-out)}
.hero-gl.is-live{opacity:1}
.hero-logo-img{object-fit:cover;object-position:50% 100%;transition:opacity .6s var(--e-out)}
.hero-stage.is-live .hero-logo-img,.hero-stage.is-gl .hero-logo-img{opacity:0}

/* film */
.hero-film-wrap{position:relative}
.hero-film{position:relative;margin:0;perspective:1800px;perspective-origin:50% 0%}
.hero-film::before{content:"";position:absolute;inset:6% 3% -6%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(59,99,255,.24),rgba(59,99,255,.07) 55%,transparent 75%)}
.hero-tilt{transform-origin:50% 0%;will-change:transform}
.hero-frame{aspect-ratio:16/9}
.hero-frame video{background:var(--bg-1);will-change:transform} /* own layer: video frames don't repaint the rim + chip */
.hero-sound{position:absolute;right:clamp(10px,1.4vw,20px);bottom:clamp(10px,1.4vw,20px);z-index:2;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 16px 0 13px;font-size:14px;font-weight:600;color:var(--fg);text-shadow:0 1px 10px rgba(0,0,0,.35);
  transition:transform .12s var(--e-press)}
.hero-sound:active{transform:scale(.97)}
/* small chip over a playing video: tinted glass without backdrop-filter (re-blurring video every frame costs a lot on
   weak GPUs and stalls software compositing; at this size the frost is invisible anyway) */
.hero-frame .hero-sound{-webkit-backdrop-filter:none;backdrop-filter:none;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 50%,rgba(255,255,255,.08)),rgba(10,12,20,.58)}
@media (hover:hover) and (pointer:fine){.hero-sound::before{transition:opacity .2s;opacity:.75}.hero-sound:hover::before{opacity:1}}
.hero-cap{margin-top:18px;text-align:center;color:var(--fg-3)}
.hero-end{height:1px}

/* entrance: hidden only while JS is about to animate; a failsafe reveals everything if the script never runs */
@media (prefers-reduced-motion:no-preference){
  html.js .hero:not(.is-in) .hero-anim,html.js .hero:not(.is-in) .hero-title,html.js .hero:not(.is-in) .hero-film{opacity:0;animation:heroFailsafe .01s 2.6s forwards}
}
@keyframes heroFailsafe{to{opacity:1}}

/* tablet */
@media (max-width:1100px){
  .hero-title{max-width:12ch}
  .hero-stage{width:clamp(240px,30vw,300px)}
  .hero-copy{max-width:calc(100% - clamp(240px,30vw,300px) - 16px)}
}
/* phone: copy, then a small logo standing on the film */
@media (max-width:733px){
  .hero{padding-top:calc(var(--nav-h) + 14px)}
  .hero-bg{background:radial-gradient(80% 22% at 50% 66%,rgba(59,99,255,.18),transparent 75%)}
  .hero-top{display:flex;flex-direction:column}
  .hero-copy{padding-bottom:6px;max-width:none}
  .hero-stage{position:relative;right:auto;bottom:auto;align-self:center;width:156px;margin:0 0 -1px}
  .hero-eyebrow{margin-bottom:10px}
  .hero-title{font-size:clamp(40px,11.2vw,52px);line-height:1;max-width:none}
  .hero-sub{font-size:16px;line-height:1.45;margin-top:12px}
  .hero-actions{gap:2px 20px;margin-top:18px}
  .hero-buy{min-height:52px;width:100%}
  .hero-offer{font-size:14px}
  .hero-offer-row{order:2;margin-top:4px}
  .hero-watch{order:3}
  .hero-micro{margin-top:8px;font-size:13px}
  .hero-sound{width:44px;padding:0;justify-content:center}
  .hero-sound span{display:none}
}