/* ════════════════════════════════════════════════════════════════════════
   BOYDLee Studio · landing-hero.css · the index hero look layer

   Loaded by public/index.html ONLY, after offer-pages.css and
   boydlee-fx-field.css. It transplants the studio's "Integrated Aurum" hero
   rules (boydlee-studio-web src/styles/index.css) onto the landing token
   names, and carries the five-act page furniture the index needs beyond the
   offer-pages base: proof bar, quiet-card hue upgrades, the method beat, the
   wrong-call grid, the oversized close, and the ?lab switcher.

   Owners: PAGE agent. Scene agents' poster CSS is appended at the very end
   under the POSTER-CSS marker; the RIG agent creates .hero-shell at runtime.

   Colour law: C-palette only, spectrum order, ruby and jade never abut.
   Gold is the h1 period, the primary button's edge, the eyebrow and the
   trust dots that offer-pages.css already owns; nothing here adds a gold
   fill, a gold glow, or a gold lobe.
   ════════════════════════════════════════════════════════════════════════ */

/* Canon ground. offer-pages.css declares a slightly darker --bg; every gradient below
   bottoms out at rgba(5,5,5,x), so the index pins the token to the canon
   near-black to keep the scrim and the body seamless. */
:root { --bg: #050505; }
body { background-color: var(--bg); }

/* ────────────────────────────────────────────────────────────────────────
   1 · HERO FRAME
   Three layers share one full-bleed section: the layer (poster + shell)
   at z0, a top-only scrim at z1, and the copy at z2. Everything after the
   hero stacks above the frame, so the fixed shell travels down BEHIND the
   sections that follow instead of over them.
   ──────────────────────────────────────────────────────────────────────── */
.hero ~ * { position: relative; z-index: 1; }
.site-footer { position: relative; z-index: 1; }

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  padding: clamp(56px, 8vh, 96px) 0 clamp(48px, 7vh, 84px);
  /* NO overflow:hidden. The shell is fixed and viewport-sized; its own mask
     fades it and .hero ~ * stacks the following sections above it. */
  /* Transparent, not var(--bg): an opaque box here would occlude the
     bg-field and body::after that sit at z-1 behind the hero. */
  background: transparent;
}
@media (min-width: 1024px) {
  .hero { min-height: calc(100svh - 72px); }
}

/* Layer 1: the top grounding pass and nothing else. Opaque at row 0 so the
   sticky nav sits on solid ground; gone by 26%. No horizontal pass on
   desktop: the exclusion mask on the layer clears the copy column. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    var(--bg) 0%,
    rgba(5, 5, 5, 0.55) 9%,
    rgba(5, 5, 5, 0) 26%,
    rgba(5, 5, 5, 0) 100%);
}

/* Layer 2: the copy. */
.hero-content { position: relative; z-index: 2; width: 100%; }

/* Sized so the copy column ends around 54% of a 1440 viewport, inside the
   transparent half of the exclusion mask. */
.hero-copy { max-width: 600px; }
@media (max-width: 1023px) {
  .hero-copy { max-width: 520px; }
}

/* THE GLASS VEIL, the sheer end of the glass system. Fallback first: with
   no backdrop blur the panel carries the contrast alone, so it leans darker.
   The @supports block lightens it. */
.hero-veil {
  background: rgba(5, 5, 5, 0.80);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  padding: clamp(22px, 3vw, 34px);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hero-veil {
    background: rgba(5, 5, 5, 0.42);
    -webkit-backdrop-filter: blur(2px) saturate(2);
    backdrop-filter: blur(2px) saturate(2);
  }
}

/* THE GOLD-GROUND RULE (Lee, 2026-08-24). Where a gold 3D element can pass
   behind type, zinc/grey text goes WHITE and the glass over it goes one step
   darker. Implemented as a token override on the container, never per
   element: every descendant that reads --silver-2/3/4 inherits it. */
.on-gold-ground {
  --silver-2: #FFFFFF;
  --silver-3: #FFFFFF;
  --silver-4: #FFFFFF;
}
.on-gold-ground.hero-veil { background: rgba(5, 5, 7, 0.80); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .on-gold-ground.hero-veil { background: rgba(5, 5, 5, 0.52); }
}

/* 768-1279: the copy column's edge sits past the mask's .40 stop, so the
   veil steps one notch darker (white over .55 over full cyan clears 7:1). */
@media (min-width: 768px) and (max-width: 1279px) {
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .on-gold-ground.hero-veil { background: rgba(5, 5, 5, 0.65); }
  }
}

/* Copy sizing inside the veil. offer-pages.css sets .display at 14ch and up
   to 5.25rem for a two-column hero; the statement hero runs one column in a
   600px veil, so the measure opens and the size steps down. */
.hero .display {
  max-width: none;
  margin: 18px 0 20px;
  font-size: clamp(2.3rem, 4.2vw, 3.5rem);
  line-height: 1.03;
  letter-spacing: -0.04em;
}
.hero .hero-lead {
  max-width: 54ch;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
}
.hero .cta-row { margin-top: 28px; }
.hero .cta-row .btn { min-height: 52px; padding-inline: 24px; }
.hero .trust-row { margin-top: 24px; }

/* THE HEADLINE RISES, IT DOES NOT FADE. Chromium disqualifies an element that
   was fully transparent at first paint from ever becoming an LCP candidate,
   so the h1 keeps the reveal's timing and animates TRANSFORM ONLY. `both`
   holds it at its start offset through the delay so it paints opaque on
   frame one. */
.hero .display.reveal {
  opacity: 1;
  animation-name: hero-headline-rise;
  animation-fill-mode: both;
}
@keyframes hero-headline-rise {
  from { transform: translateY(14px); }
  to { transform: translateY(0); }
}

/* The phone is a first-class action, and it prints the number. */
.hero-tel-line {
  margin: 18px 0 0;
  color: var(--silver-3);
  font-size: 0.92rem;
  line-height: 1.6;
}
.hero-tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  color: #fff;
  font: 700 1rem/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-decoration: underline;
  text-decoration-color: rgba(0, 223, 216, 0.55);
  text-underline-offset: 5px;
  transition: text-decoration-color 0.2s ease;
}
.hero-tel:active { text-decoration-color: var(--cyan); }

/* ────────────────────────────────────────────────────────────────────────
   2 · THE LAYER · poster + shell
   The poster is the resting composition: a designed still of the scene,
   masked off the copy column, visible before the rig mounts and forever
   where it never does. The shell is the rig's fixed viewport frame; it
   shares the poster's atmosphere and mask so the 700ms crossfade is a
   material swap, not a scene change.
   ──────────────────────────────────────────────────────────────────────── */
.hero-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ATMOSPHERE: the cool room. Cyan, sapphire, amethyst, indigo; no gold lobe.
   EXCLUSION MASK: the copy column (left ~55%) is protected by geometry. */
.hero-poster,
.hero-shell {
  background:
    radial-gradient(50% 70% at 66% 46%, rgba(0, 223, 216, 0.05) 0%, rgba(0, 223, 216, 0) 64%),
    radial-gradient(46% 62% at 82% 74%, rgba(0, 112, 243, 0.07) 0%, rgba(0, 112, 243, 0) 70%),
    radial-gradient(40% 54% at 62% 16%, rgba(153, 68, 255, 0.10) 0%, rgba(153, 68, 255, 0) 72%),
    radial-gradient(72% 92% at 66% 50%, rgba(63, 39, 133, 0.20) 0%, rgba(5, 5, 5, 0) 78%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, rgba(0, 0, 0, 0.05) 38%, rgba(0, 0, 0, 0.14) 44%, rgba(0, 0, 0, 0.40) 52%, rgba(0, 0, 0, 0.74) 58%, #000 62%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, rgba(0, 0, 0, 0.05) 38%, rgba(0, 0, 0, 0.14) 44%, rgba(0, 0, 0, 0.40) 52%, rgba(0, 0, 0, 0.74) 58%, #000 62%, #000 100%);
}

/* Resting state is opacity 1 with no animation dependency: under reduced
   motion the rig never mounts and the poster is simply shown. The rig sets
   an inline opacity of 0 after its first rendered frame; this transition
   is the crossfade. */
.hero-poster {
  position: absolute;
  inset: 0;
  opacity: 1;
  overflow: hidden;
  transition: opacity 700ms ease;
}
.hero-poster[hidden] { display: none; }

/* The rig's frame. Viewport-sized and fixed; the rig drives opacity and
   visibility on scroll and removes the element on destroy. */
.hero-shell {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  will-change: opacity;
}
.hero-shell canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* THE CANONICAL VEIL ON EVERY PANEL THAT RIDES OVER THE SCENE (Lee, 2026-09-02).
   The six chooser cards and the proof cells take the same 2px glass the hero
   copy sits on, so the live cubes read THROUGH them as frosted depth instead
   of being cut off by a flat plate. A 2px blur over a changing backdrop is
   cheap enough to keep live; the old 20px card blur was not, which is why the
   first pass dropped it entirely and read as flat. The ambient CSS layers
   still rest while the shell draws. */
.hero ~ .section .card,
.hero ~ .proof .proof-bar {
  background: rgba(5, 5, 5, 0.82);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hero ~ .proof .proof-cell { background: transparent; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hero ~ .section .card,
  .hero ~ .proof .proof-bar {
    background: rgba(5, 5, 5, 0.64);
    -webkit-backdrop-filter: blur(2px) saturate(2);
    backdrop-filter: blur(2px) saturate(2);
  }
}
html.hero-live body::after,
html.hero-live body .bg-field .layer,
html.hero-live body .bg-field .layer-aurora .drift-orb { animation-play-state: paused; }

/* ONE STEP BRIGHTER ABOVE "HOW A JOB RUNS" (Lee, 2026-09-02). The proof bar and
   the chooser ride over the live scene, where the zinc ramp loses its floor;
   every muted token in those two sections climbs one rung (silver-4 -> silver-3,
   silver-3 -> silver-2). Token rebinding, so it covers every descendant. */
.hero ~ .proof,
.hero ~ .section:has(#choose-title) {
  --silver-4: #A1A1AA;
  --silver-3: #E4E4E7;
}

/* PROOF-BAR TILT — the lab's "tilt" card FX (perspective 700px, ±10deg) on the
   proof plate, driven by --tilt-x/--tilt-y from boot.js. Rotation is around
   the pointer's side: moving right lifts the right edge. A rest transition
   eases it home on leave; while the pointer is inside there is no transition
   so the plate tracks the hand. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero ~ .proof .proof-bar {
    --tilt-x: 0;
    --tilt-y: 0;
    transform-style: preserve-3d;
    transform:
      perspective(900px)
      rotateX(calc(var(--tilt-y) * -7deg))
      rotateY(calc(var(--tilt-x) * 9deg))
      translateZ(calc((var(--tilt-x) * var(--tilt-x) + var(--tilt-y) * var(--tilt-y)) * 6px));
    transition: transform 520ms cubic-bezier(.16, 1, .3, 1), box-shadow 520ms ease;
    box-shadow:
      calc(var(--tilt-x) * -14px) calc(var(--tilt-y) * -14px) 44px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
    will-change: transform;
  }
  .hero ~ .proof .proof-bar.is-tilting { transition: box-shadow 200ms ease; }
  /* a cursor-following glint on the glass, cheap and on the compositor */
  .hero ~ .proof .proof-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(38% 60% at calc(50% + var(--tilt-x) * 50%) calc(50% + var(--tilt-y) * 50%), rgba(0, 223, 216, 0.10) 0%, rgba(0, 112, 243, 0.05) 40%, transparent 72%);
    opacity: 0;
    transition: opacity 300ms ease;
  }
  .hero ~ .proof .proof-bar.is-tilting::after { opacity: 1; }
}

/* 768-1023: the copy column collapses toward the left edge and the mask
   shifts with it. Nothing else changes; the shell still mounts here. */
@media (max-width: 1023px) and (min-width: 768px) {
  .hero-poster,
  .hero-shell {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 22%, rgba(0, 0, 0, 0.06) 32%, rgba(0, 0, 0, 0.18) 40%, rgba(0, 0, 0, 0.46) 50%, rgba(0, 0, 0, 0.78) 58%, #000 64%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 22%, rgba(0, 0, 0, 0.06) 32%, rgba(0, 0, 0, 0.18) 40%, rgba(0, 0, 0, 0.46) 50%, rgba(0, 0, 0, 0.78) 58%, #000 64%, #000 100%);
  }
}

/* ≤767: no shell mounts (rig gate), the poster carries the composition.
   Copy runs full-width, so the poster becomes a corner-anchored object in
   the lower right at 0.42 opacity, the mask relaxes, and the scrim takes on
   the horizontal pass the exclusion mask can no longer provide. */
@media (max-width: 767px) {
  .hero {
    min-height: 70vh;
    padding: 44px 0 40px;
    background:
      radial-gradient(72% 34% at 62% 34%, rgba(0, 223, 216, 0.07) 0%, rgba(0, 223, 216, 0) 68%),
      radial-gradient(80% 40% at 76% 64%, rgba(0, 112, 243, 0.09) 0%, rgba(0, 112, 243, 0) 72%),
      radial-gradient(68% 32% at 38% 14%, rgba(153, 68, 255, 0.14) 0%, rgba(153, 68, 255, 0) 74%),
      radial-gradient(98% 54% at 60% 44%, rgba(63, 39, 133, 0.24) 0%, rgba(5, 5, 5, 0) 82%),
      var(--bg);
  }
  .hero-copy { max-width: none; }
  .hero-veil { padding: 20px 18px 22px; }
  .hero-scrim {
    background:
      linear-gradient(90deg,
        rgba(5, 5, 5, 0.72) 0%,
        rgba(5, 5, 5, 0.52) 48%,
        rgba(5, 5, 5, 0.44) 100%),
      linear-gradient(180deg,
        var(--bg) 0%,
        rgba(5, 5, 5, 0.34) 9%,
        rgba(5, 5, 5, 0.08) 38%,
        rgba(5, 5, 5, 0.22) 76%,
        rgba(5, 5, 5, 0) 100%);
  }
  .hero-poster {
    inset: auto -18% -8% auto;
    width: 120vw;
    height: 66%;
    min-height: 300px;
    opacity: 0.42;
    will-change: transform;   /* boot.js drives a slow scroll parallax here */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 30%, #000 55%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 30%, #000 55%, #000 100%);
  }
  .hero-shell { display: none; }
}

@media (max-width: 640px) {
  .hero .display { font-size: clamp(2.1rem, 9.4vw, 2.7rem); line-height: 1.04; }
  .hero .cta-row .btn { width: 100%; }
}

/* ────────────────────────────────────────────────────────────────────────
   3 · PROOF BAR · one dense glance
   The container paints transparent and every cell projects its own 1px ring,
   so a short last row leaves a clean edge instead of a hole.
   ──────────────────────────────────────────────────────────────────────── */
.proof { padding-top: 26px; }
.proof-bar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  border-radius: var(--radius);
  overflow: hidden;
  -webkit-backdrop-filter: blur(20px) saturate(175%);
  backdrop-filter: blur(20px) saturate(175%);
}
.proof-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 44px;
  padding: 18px 16px 20px;
  background: rgba(9, 9, 11, 0.5);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09);
  color: inherit;
  text-decoration: none;
  transition: background 0.2s ease;
}
.proof-cell:active { background: rgba(16, 16, 18, 0.6); }
/* The bar clips overflow, so the focus ring draws INSIDE the cell. */
.proof-cell:focus-visible { outline-offset: -3px; }
.proof-k {
  margin-bottom: 10px;
  color: var(--silver-3);
  font: 600 0.6rem/1.4 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proof-n {
  color: #fff;
  font: 700 1.55rem/1.08 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.proof-n.is-word {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: normal;
}
.proof-l {
  margin-top: 7px;
  color: var(--silver-3);
  font-size: 0.78rem;
  line-height: 1.45;
}

@media (max-width: 1023px) {
  .proof-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .proof-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-cell:last-child:nth-child(odd) { grid-column: span 2; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .proof-cell { background: rgba(10, 10, 12, 0.92); }
}

/* ────────────────────────────────────────────────────────────────────────
   4 · QUIET CARD UPGRADES
   offer-pages.css .card stays the base. Each card carries --card-hue set
   inline in spectrum order; the hue appears as a thin top rule and the
   index plate's dot, never as a fill. The magenta index text the base sets
   is replaced by the plate so the hue stays one mark per card.
   ──────────────────────────────────────────────────────────────────────── */
.card { --card-hue: var(--cyan); overflow: hidden; }
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--card-hue) 16%, var(--card-hue) 84%, transparent);
  opacity: 0.62;
  pointer-events: none;
}
.card .card-index {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--silver-3);
  font: 700 0.64rem/1.3 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.card .card-index::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--card-hue);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.card h3 { margin-top: 18px; }

/* ────────────────────────────────────────────────────────────────────────
   5 · METHOD BEAT + WRONG-CALL GRID · typographic, no glass
   ──────────────────────────────────────────────────────────────────────── */
.method {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.method-step {
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.method-n {
  display: block;
  color: var(--silver-3);
  font: 700 0.68rem/1.4 var(--font-mono);
  letter-spacing: 0.16em;
}
.method-step h3 {
  margin: 12px 0 8px;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.method-step p {
  margin: 0;
  color: var(--silver-3);
  font-size: 0.94rem;
  line-height: 1.65;
}

.wrong-heading { margin-top: clamp(56px, 8vh, 88px); }
.wrong-call {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.wrong-item {
  padding: 22px 24px 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  background: rgba(5, 5, 5, 0.82);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .wrong-item {
    background: rgba(5, 5, 5, 0.64);
    -webkit-backdrop-filter: blur(2px) saturate(2);
    backdrop-filter: blur(2px) saturate(2);
  }
}
.wrong-item h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 1.08rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.wrong-item p {
  margin: 0;
  color: var(--silver-3);
  font-size: 0.92rem;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .method,
  .wrong-call { grid-template-columns: 1fr; }
  .method { gap: 18px; }
}

/* ────────────────────────────────────────────────────────────────────────
   6 · THE CLOSE · hero scale, lowest-commitment ask
   ──────────────────────────────────────────────────────────────────────── */
.close {
  padding: clamp(72px, 12vh, 140px) 0 clamp(64px, 10vh, 120px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.close h2 {
  margin: 16px 0 18px;
  max-width: 14ch;
  color: #fff;
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.close-lede {
  margin: 0;
  max-width: 54ch;
  color: var(--silver-2);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.6;
}
.close-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: stretch;
  margin-top: 32px;
}
.close-row .btn { min-height: 56px; padding-inline: 28px; }
.tel-plate {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 8px 22px;
  border: 1px solid var(--border-bright);
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-mono);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.tel-plate:active { border-color: var(--cyan); background: rgba(0, 223, 216, 0.05); }
.tel-k {
  color: var(--silver-3);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tel-plate strong {
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.close-foot {
  margin: 34px 0 0;
  color: var(--silver-3);
  font: 600 0.72rem/1.9 var(--font-mono);
  letter-spacing: 0.06em;
}

@media (max-width: 640px) {
  .close { padding: 64px 0 56px; }
  .close-row .btn,
  .tel-plate { width: 100%; }
}

/* ────────────────────────────────────────────────────────────────────────
   7 · ?lab SWITCHER · Lee's comparison control, appended by boot.js only
   when the URL carries a `lab` param. Two 44px buttons and the active label.
   ──────────────────────────────────────────────────────────────────────── */
.hero-lab-switch {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  background: rgba(9, 9, 11, 0.6);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 44px rgba(0, 0, 0, 0.5);
  font-family: var(--font-mono);
}
.hero-lab-switch a,
.hero-lab-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border-bright);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.025);
  color: #fff;
  font: 700 0.74rem/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
}
.hero-lab-switch a:active,
.hero-lab-switch button:active { transform: translateY(1px); }
.hero-lab-switch .is-active,
.hero-lab-switch [aria-current="true"] {
  border-color: var(--cyan);
  background: rgba(0, 223, 216, 0.08);
}
.hero-lab-switch .hero-lab-label {
  padding: 0 6px 0 4px;
  color: var(--silver-3);
  font: 600 0.62rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-lab-switch { background: rgba(10, 10, 12, 0.94); }
}

/* ────────────────────────────────────────────────────────────────────────
   8 · REDUCED MOTION
   offer-pages.css already nukes every animation and transition globally;
   the hero adds nothing that depends on one. Restated here so the headline
   lands at rest rather than at its rise offset.
   ──────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero .display.reveal { animation: none; transform: none; }
  .hero-poster { transition: none; }
}

/* POSTER-CSS */

/* poster: foil (FOIL agent) */
/* ── FOIL poster: a designed still of the resting sheet ─────────────────
   Same object as the live scene: sheet 5.0×4.6 world over a 6.1×3.8 frame
   at 16:10 = 82% × 121% of the box, centred at x 66% / y 50%, rolled −8°
   with a perspective skew. Dark blue-steel, one diagonal iridescent band in
   spectrum order (magenta → amethyst → sapphire → cyan), a faint ridge, and
   eight cool sparkle dots. No gold, no glow. Marks are percentage-based so
   they survive the mobile corner-anchor scale. */
.hp-foil-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 1400px;
  perspective-origin: 66% 50%;
}
.hp-foil-slab {
  position: absolute;
  left: 66%;
  top: 50%;
  width: 82%;
  height: 121%;
  border-radius: 6px;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotateX(7deg) rotateY(-14deg) rotate(-8deg);
  background:
    repeating-linear-gradient(-34deg,
      rgba(255, 255, 255, 0) 0 44px,
      rgba(180, 205, 255, 0.05) 44px 47px,
      rgba(0, 0, 0, 0.16) 47px 66px,
      rgba(0, 0, 0, 0) 66px 104px),
    repeating-linear-gradient(56deg,
      rgba(0, 0, 0, 0) 0 58px,
      rgba(0, 0, 0, 0.14) 58px 74px,
      rgba(190, 210, 255, 0.04) 74px 77px,
      rgba(0, 0, 0, 0) 77px 132px),
    linear-gradient(112deg,
      #0a0f1f 0%,
      #1a2440 26%,
      #0d1430 50%,
      #1f2b4e 72%,
      #090e1c 100%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(0deg, transparent, #000 12%, #000 88%, transparent);
  mask-image:
    linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(0deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hp-foil-band {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  mix-blend-mode: screen;
  background: linear-gradient(118deg,
    rgba(255, 0, 128, 0) 26%,
    rgba(255, 0, 128, 0.20) 38%,
    rgba(153, 68, 255, 0.26) 47%,
    rgba(0, 112, 243, 0.28) 56%,
    rgba(0, 223, 216, 0.24) 65%,
    rgba(0, 223, 216, 0) 76%);
}
.hp-foil-ridge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(118deg,
      transparent 49%,
      rgba(190, 225, 255, 0.08) 51.2%,
      rgba(225, 242, 255, 0.30) 51.8%,
      rgba(190, 225, 255, 0.08) 52.4%,
      transparent 54.6%),
    linear-gradient(118deg,
      transparent 20%,
      rgba(170, 200, 255, 0.05) 22%,
      transparent 24.5%);
}
.hp-foil-spark {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  opacity: 0.85;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.95) 0 18%,
    rgba(210, 235, 255, 0.55) 40%,
    rgba(210, 235, 255, 0) 70%);
}
.hp-foil-s1 { left: 61%; top: 23%; }
.hp-foil-s2 { left: 74%; top: 17%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; opacity: 0.7; }
.hp-foil-s3 { left: 88%; top: 36%; }
.hp-foil-s4 { left: 55%; top: 47%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; opacity: 0.6; }
.hp-foil-s5 { left: 80%; top: 58%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; opacity: 0.95; }
.hp-foil-s6 { left: 93%; top: 72%; }
.hp-foil-s7 { left: 66%; top: 78%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; opacity: 0.7; }
.hp-foil-s8 { left: 47%; top: 64%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; opacity: 0.55; }

/* poster: float-cubes (CUBES agent) */
.hp-float-cubes-svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:hidden}
.hp-float-cubes-field{shape-rendering:geometricPrecision}
.hp-float-cubes-sparks{mix-blend-mode:screen}