.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:58% 42%;filter:saturate(.9) contrast(1.05) brightness(1.12)}
.hero-media::after{content:'';position:absolute;inset:0;
  background:
   linear-gradient(to top,rgba(5,7,11,.98) 0%,rgba(5,7,11,.78) 26%,rgba(5,7,11,.22) 58%,rgba(5,7,11,.55) 100%),
   linear-gradient(to right,rgba(5,7,11,.82) 0%,rgba(5,7,11,.32) 45%,rgba(5,7,11,0) 75%);}
.hero .wrap{position:relative;z-index:2;padding-bottom:clamp(56px,7vh,96px);padding-top:140px}
.hero h1{color:#fff;margin:16px 0 0;text-shadow:0 4px 60px rgba(0,0,0,.6)}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero .lede{margin-top:22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:34px}
.hero-note{font-size:13px;color:var(--mute);letter-spacing:.04em}
.scroll-hint{position:absolute;right:max(4vw,24px);bottom:38px;z-index:2;display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);writing-mode:vertical-rl}
.scroll-hint i{display:block;width:1px;height:64px;background:linear-gradient(var(--amber),transparent)}

.hero-product{position:absolute;top:96px;right:max(4vw,24px);z-index:2;width:min(25vw,318px)}
.hero-product img{width:100%;display:block;border:1px solid var(--line2);border-radius:8px;background:var(--panel);box-shadow:0 50px 100px -35px rgba(0,0,0,.85)}
/* The compact view sits under the full window, overlapping it — one glance shows both. */
.hero-product img.hero-product-2{width:68%;margin:-8% 0 0 auto;transform:translateX(8%)}
/* Mark lives in the gap between the headline and the screenshots, anchored off the product
   column so it stays put as the viewport changes. The drop shadow is what keeps the thin
   knob rings readable over the lit part of the photo. */
/* The artwork sits 6% above the middle of its own square, so the box is nudged down by
   that much to make the top knobs line up with the top edge of the screenshots. */
.hero-logo{position:absolute;z-index:2;top:96px;transform:translateY(-6%);
  right:calc(max(4vw,24px) + min(25vw,318px) + 32px);
  display:grid;place-items:center;width:clamp(240px,27vw,380px);aspect-ratio:1}
/* The SVG carries a wide transparent margin, so it has to overflow its box to fill it. */
.hero-logo img{width:152%;height:auto;
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.95)) drop-shadow(0 0 70px rgba(0,0,0,.75))}

@media(max-width:1000px){.hero-logo{display:none}}

@media(max-width:1000px){.hero-product{display:none}}

/* Sponsor call — pinned to the same bottom edge as the download button so the two line up.
   Same offset as .hero .wrap's bottom padding, which is what sets that button's baseline. */
/* Above .wrap, not level with it: the headline column is a full-width block that overlaps this
   corner, and at equal z-index it comes later in the DOM, so it swallowed every click here. */
.hero-support{position:absolute;z-index:3;right:max(4vw,24px);bottom:clamp(56px,7vh,96px);
  width:min(25vw,318px);display:block;padding:16px 20px;border:2px solid var(--amber);border-radius:6px;background:rgba(255,158,61,.10);backdrop-filter:blur(8px);text-align:center;transition:background .25s,transform .25s var(--ease)}
.hero-support:hover{background:rgba(255,158,61,.2);transform:translateY(-2px)}
.hero-support span{display:block;font-family:var(--display);font-size:clamp(24px,2.1vw,32px);letter-spacing:.04em;text-transform:uppercase;color:var(--amber)}
.hero-support i{display:block;font-style:normal;font-size:12.5px;letter-spacing:.05em;color:var(--soft);margin-top:5px}
/* One ask at a time: the card owns the corner on desktop, the CTA button owns it below. */
@media(max-width:1000px){.hero-support{display:none}}
@media(min-width:1001px){.btn-support{display:none}
  /* the sponsor card occupies that corner — the scroll hint would sit on top of it */
  .scroll-hint{display:none}
  /* keep the CTA row clear of the card: the longer notes ran underneath it */
  .hero-cta{padding-right:calc(min(25vw,318px) + 44px)}}