/* ============================================================
   LANDING / HERO — v4.7 "STABLE INSTRUMENT"
   Complete architecture rebuild. The hero must be mechanically
   stable on Android Chrome — no drift, no float.

   ARCHITECTURE PRINCIPLES:
   • hero-visual container: contain:strict so the orb canvas and
     all decorative layers are fully isolated from document layout.
   • NO transform on .hero-visual (the JS gate is belt; this is
     suspenders — position+contain replaces it at source).
   • heroBloom: opacity-only on mobile, scale allowed on desktop.
   • hv-frame: overflow:hidden so canvas never overflows its box.
   • Chip floats: translateY-only, never translateX.
   • Floor light (.hero-visual::after): transform-free centering.
   ============================================================ */
#s0 { background: transparent; justify-content: flex-start; }
.s0-body {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 26px 24px 28px;
}

/* ---- HERO VISUAL STAGE ---- */
/* ============================================================
   HERO ORB STAGE — v4.9 "LOADER PARITY"
   Rebuilt to INHERIT the loader's proven-stable render architecture
   (components/loader/loader.css → #s7 / .loader-orb). Identical pipeline:
   a plain flex-centered box, EXPLICIT width+height anchored to viewport
   WIDTH via min(vw,px) — never aspect-ratio + contain:size — a single
   opacity/scale bloom pseudo-element, and ONE <canvas> mounted by the
   shared centerpiece engine into an #id stage (exactly like the loader).
   Deliberately removed (these were the ONLY things the stable loader does
   NOT have): #s0 containment, .hero-visual size-containment, the .hv-frame
   overflow-clip lens, the rotating masked conic rim, the floor light, the
   scanline, both SVG mesh layers, the CSS particle field, the floating
   chips, and the pointer parallax transform. See VALIDATION-v4.9.md. */
.hero-visual {
  position: relative;
  width: min(72vw, 300px);
  height: min(72vw, 300px);   /* explicit + viewport-WIDTH-anchored -> does NOT resize during the Android URL-bar height transition. Identical model to .loader-orb (width:min(64vw,230px);height:same). */
  margin: 8px auto 34px;
  /* NO contain. NO aspect-ratio. NO overflow clip. (loader parity) */
}
/* Single warm-gold bloom — mirrors .loader-orb::before, reusing the
   loader's own keyframe so both stages breathe identically. */
.hero-visual::before {
  content: ''; position: absolute; inset: -12%; z-index: 0; border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(221,184,104,.32) 0%, rgba(196,154,74,.12) 42%, transparent 70%);
  animation: loaderBloom 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual::before { animation: none; opacity: .7; transform: none; }
}
/* Canvas mounts here (centerpiece.js -> #hero-orb-stage), exactly as it
   mounts into #loader-orb-stage: position:absolute; inset:0; 100%x100%. */
.hero-orb { position: relative; width: 100%; height: 100%; z-index: 1; }

.specimen-tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; width: fit-content; }
.specimen-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-bright); flex-shrink: 0; animation: pulseDot 2.6s ease-in-out infinite; box-shadow: 0 0 8px rgba(221,184,104,.8); }
@keyframes pulseDot { 0%,100%{ opacity: 1; transform: scale(1);} 50%{ opacity: .45; transform: scale(.8);} }
.specimen-text { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-bright); font-weight: 600; }

.hero-headline { font-family: var(--ff-display); font-size: clamp(36px, 10vw, 58px); font-weight: 800; line-height: 1.08; letter-spacing: -0.018em; color: var(--snow); margin-bottom: 20px; }
.hero-headline .line-strike { color: var(--mist-dim); text-decoration: line-through; text-decoration-color: var(--rose); text-decoration-thickness: 1.5px; font-weight: 600; font-size: 0.80em; display: block; margin-bottom: 10px; }
.hero-headline .line-truth { display: block; }

.hero-sub { font-size: var(--fs-base); color: var(--mist); line-height: 1.7; margin-bottom: 30px; max-width: 340px; }
.hero-trust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--mist-dim); font-weight: 500; padding-top: 18px; padding-bottom: 22px; border-top: 1px solid var(--hairline); margin-bottom: 28px; }
.ht-sep { color: var(--hairline-strong); }
.hero-cta-group { display: flex; flex-direction: column; gap: 10px; }

.s0-footer { position: relative; z-index: 2; padding: 16px 24px calc(16px + var(--sab)); display: flex; align-items: center; justify-content: center; gap: 10px; border-top: 1px solid var(--hairline); }
.s0-footer-mark { width: 22px; height: 22px; border: 1px solid var(--hairline-strong); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-family: var(--ff-latin-display); font-size: 11px; font-weight: 700; color: var(--gold-bright); flex-shrink: 0; }
.s0-footer-text { font-size: var(--fs-2xs); color: var(--mist-dim); }