.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 30% 0%, rgba(255,138,30,0.14), transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(20,230,230,0.10), transparent 60%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 55%, #0d0a12 100%);
}

.hero__layer {
  position: absolute;
  inset: -10%;
  pointer-events: none;
}
.hero__layer--back {
  z-index: 0;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px);
  opacity: 0.5;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #0a0a0f;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: saturate(0.85) contrast(1.08) brightness(0.72);
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero__video.is-ready {
  opacity: 1;
}

/* the loop video sits stacked on top of the intro video (same position,
   same object-fit/filter) but stays invisible + paused until the intro
   ends — js/hero-video.js flips .is-active the instant it does. */
.hero__video--loop {
  opacity: 0;
  transition: none;
}
.hero__video--loop.is-active {
  opacity: 1;
}

.hero__content {
  position: relative;
  z-index: 3;
  padding-left: var(--space-3);
  padding-right: var(--space-4);
  padding-top: clamp(9rem, 30vh, 15rem);
}

/* GTA VI badge — moved from the navbar (2026-09-02) into the hero, then
   (2026-09-03) relocated again from the top-left empty band down to the
   bottom-right corner of the hero section itself. It's now a direct child
   of .hero (not .hero__content), positioned absolute against the section's
   own box — so right/bottom offsets are guaranteed padding against the
   side edge and against the next section (.leak) rather than against
   whatever height .hero__content happens to be. Sized off viewport WIDTH
   since it now lives in open corner space rather than a fixed-height band.
   z-index sits below .scroll-cue (3) so the vertical "SCROLL" cue, which
   occupies the same corner, stays legible on top of the logo instead of
   fighting it. */
.hero__gta-badge {
  position: absolute;
  right: var(--space-4);
  bottom: clamp(5rem, 14vh, 9rem);
  z-index: 2;
  width: clamp(7.2rem, 16vw, 12.8rem);
  height: auto;
  opacity: 0.7;
  pointer-events: none;
  user-select: none;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.8rem;
  color: var(--cyan);
  border: 1px solid rgba(20,230,230,0.35);
  padding: 0.4em 0.9em;
  border-radius: 2px;
  margin-bottom: var(--space-3);
}
.hero__content .tag {
  font-size: 0.9rem;
  padding: 0.5em 1.1em;
  margin-bottom: var(--space-4);
}
.hero__headline {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(3rem, 8.8vw, 6.75rem);
  line-height: 0.88;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
  max-width: 20ch;
}

/* chromatic-aberration headline via layered text-shadow: cheap, GPU-friendly */
.ca-text {
  display: inline-block;
  color: var(--fg);
  text-shadow:
    2px 0 0 rgba(255,32,121,0.55),
    -2px 0 0 rgba(20,230,230,0.55);
}

.hero__sub {
  max-width: 44ch;
  font-size: clamp(1.1rem, 2.3vw, 1.4rem);
  color: var(--fg);
  opacity: 0.82;
  margin-bottom: var(--space-5);
}

.hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.hero__actions .btn {
  padding: 1.05em 2.1em;
  font-size: 1.05rem;
}

/* contract card — same look as .buy__contract (css/buy-scene.css) in THE
   HOW TO BUY section: black/red card, red "CONTRACT" label, mono address,
   pill copy button. Deliberately its own rule set rather than sharing
   those classes: .buy__contract is absolutely positioned against
   .buy__stage (a sticky, overflow:hidden box) via a top:100%+translateY
   hack that only makes sense in that layout, and collapses to hide the
   address below 640px — here it sits in normal flow right under the CTAs
   and always keeps the full address visible/wrapping instead of hiding
   it, per its own spec. */
.hero__contract {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: min(32rem, 64vw);
  margin-top: var(--space-3);
  background: linear-gradient(155deg, rgba(9, 10, 12, 0.94), rgba(5, 5, 6, 0.97));
  border: 1.5px solid rgba(210, 16, 52, 0.45);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  box-shadow:
    0 18px 40px -18px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(210, 16, 52, 0.08),
    0 0 28px -12px rgba(210, 16, 52, 0.4);
}
.hero__contract-label {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--haiti-red);
}
.hero__contract-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.hero__contract-value {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  color: var(--fg);
  opacity: 0.92;
  line-height: 1.4;
  word-break: break-all;
}
.hero__contract-copy {
  flex-shrink: 0;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--fg);
  background: rgba(210, 16, 52, 0.16);
  border: 1px solid rgba(210, 16, 52, 0.55);
  padding: 0.55em 0.95em;
  border-radius: 6px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.hero__contract-copy:hover { background: var(--haiti-red); border-color: var(--haiti-red); color: #fff; }
.hero__contract-copy[data-copied="true"] { background: var(--cyan); border-color: var(--cyan); color: var(--bg-deep); }

.scroll-cue {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.72rem;
  color: var(--muted);
  writing-mode: vertical-rl;
  letter-spacing: 0.18em;
}
.scroll-cue__caret {
  color: var(--cyan);
  animation: blink 1.1s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue__caret { animation: none; }
}
@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 640px) {
  .hero__headline { max-width: 13ch; margin-bottom: var(--space-3); }
  .scroll-cue { display: none; }
  .hero__content { padding-top: clamp(7.5rem, 22vh, 12rem); }
  .hero__content .tag { margin-bottom: var(--space-3); }
  .hero__sub { margin-bottom: var(--space-4); }
  .hero__actions { gap: var(--space-2); }

  /* mobile-only: the desktop size/position reads too big and sits too high,
     crowding the headline — shrink ~40% and tuck it further into the
     bottom-right corner instead. bottom is well above var(--space-2)
     because .hero is pushed down by the sticky .navbar's own height
     (~3.8rem) in normal flow, so on first paint (before any scroll) the
     bottom of .hero — and anything var(--space-2) off of it — sits mostly
     below the fold; this offset buys back that clearance so the badge
     reads just above the fixed player bar instead of hiding behind it. */
  .hero__gta-badge {
    width: clamp(3.8rem, 18vw, 5rem);
    right: var(--space-2);
    bottom: 5rem;
  }

  /* buttons read too large next to the now-repositioned badge; ~15%
     smaller via font-size, since the padding is set in em and scales
     with it automatically. */
  .hero__actions .btn {
    font-size: 0.89rem;
  }

  /* full width (not the desktop min(32rem,64vw) cap) so the address has
     the most room to stay on as few wrapped lines as possible — it must
     stay fully visible here, never collapse down to just the button the
     way .buy__contract does at this breakpoint. */
  .hero__contract {
    max-width: none;
    margin-top: var(--space-3);
    padding: 0.75rem 0.9rem;
    gap: 0.4rem;
  }
  .hero__contract-value { font-size: 0.68rem; }
  .hero__contract-copy { font-size: 0.62rem; padding: 0.5em 0.85em; }
}

/* short viewports (a normal-width desktop window that's just not very
   tall): .s4s-player is fixed to the true bottom of the viewport, and
   .hero__contract now sits right where that band starts to bite on
   anything under ~950px tall. Compress the card further here so it keeps
   clearing the player instead of sitting underneath it. */
@media (max-height: 950px) {
  .hero__content { padding-top: clamp(6rem, 22vh, 9rem); }
  .hero__contract { margin-top: var(--space-2); padding: 0.6rem 0.85rem; gap: 0.3rem; }
}