/* ============================================================
   LANDING FEATURE (hero, screen 0)  ·  v4 "CINEMATIC INTAKE"
   One headline is the focal point. Nothing competes with it.

   v4 EVOLUTION: the abstract AI-analysis frame stops being a static
   illustration and becomes a living instrument — a warm gold energy
   bloom gathers behind it, the diagnostic mesh traces in, a light
   sweep passes the lens, and (via the ambient layer) fine particles
   drift and the whole visual parallaxes to pointer/tilt. This is the
   product's "living human" surrogate: it breathes intelligence, in
   keeping with the library's rule against generic stock photography.
   ============================================================ */
#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 { position: relative; width: 100%; max-width: 196px; margin: 0 auto 28px; }
/* gold energy bloom — light concentrating behind the lens */
.hero-visual::before {
  content: ''; position: absolute; inset: -22%; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(221,184,104,.30) 0%, rgba(196,154,74,.10) 40%, transparent 70%);
  animation: heroBloom 4.2s ease-in-out infinite; pointer-events: none;
}
@keyframes heroBloom { 0%,100% { opacity: .6; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .hero-visual::before { animation: none; opacity: .8; } }

.hv-frame {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background:
    radial-gradient(circle at 50% 30%, rgba(221,184,104,.10), transparent 55%),
    radial-gradient(circle at 50% 32%, var(--ink-raised-2), var(--obsidian) 75%);
  overflow: hidden;
  box-shadow: var(--edge-light-strong), inset 0 0 40px rgba(8,7,5,.6), 0 10px 40px rgba(8,7,5,.5);
}
/* breathing inner light + a slow rotating conic gleam on the rim */
.hv-frame::after {
  content: ''; position: absolute; inset: -1px; border-radius: 50%; padding: 1px; pointer-events: none;
  background: conic-gradient(from 0deg, transparent, rgba(221,184,104,.5), transparent 30%, transparent 70%, rgba(221,184,104,.3), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: hvRimSweep 7s linear infinite;
}
@keyframes hvRimSweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hv-frame::after { animation: none; } }

.hv-face { position: absolute; inset: 0; width: 54%; height: 54%; margin: auto; color: var(--hairline-strong); z-index: 1; }
.hv-mesh { position: absolute; inset: 9%; width: 82%; height: 82%; z-index: 2; }
.hv-mesh-line { fill: none; stroke: var(--gold-bright); stroke-width: 1; stroke-linecap: round; opacity: 0; stroke-dasharray: 50; stroke-dashoffset: 50; animation: hvLineTrace .9s var(--ease) forwards; filter: drop-shadow(0 0 3px rgba(221,184,104,.5)); }
@keyframes hvLineTrace { to { opacity: .7; stroke-dashoffset: 0; } }
.hv-mesh-dot { fill: var(--gold-bright); opacity: 0; animation: hvDotPulse .5s var(--ease) forwards; filter: drop-shadow(0 0 4px rgba(221,184,104,.8)); }
@keyframes hvDotPulse { to { opacity: 1; } }
.hv-scanline {
  position: absolute; left: 6%; width: 88%; height: 2px; top: -6%; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  animation: hvScan 3.2s cubic-bezier(.45,0,.55,1) infinite; mix-blend-mode: screen;
  filter: drop-shadow(0 0 6px rgba(221,184,104,.7));
}
@keyframes hvScan { 0%,100% { top: -6%; } 50% { top: 104%; } }
.hv-chip {
  position: absolute; z-index: 4; background: rgba(21,19,15,.92); border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm); padding: 6px 10px; font-size: 10px; font-weight: 600; color: var(--snow);
  display: flex; align-items: center; gap: 5px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  white-space: nowrap; box-shadow: var(--lift-1);
}
.hv-chip-num { color: var(--gold-bright); font-family: var(--ff-mono); font-weight: 700; }
.hv-chip.c1 { top: -4px; inset-inline-end: -14px; animation: hvChipFloat 4s ease-in-out infinite; }
.hv-chip.c2 { bottom: 2px; inset-inline-start: -18px; animation: hvChipFloat 4s ease-in-out infinite 1.4s; }
@keyframes hvChipFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .hv-mesh-line, .hv-mesh-dot, .hv-scanline, .hv-chip { animation: none; opacity: 1; } }

/* floating particle layer injected by the ambient presentation layer */
.hv-particles { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; border-radius: 50%; }
.hv-particle { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--gold-bright); opacity: 0; box-shadow: 0 0 4px rgba(221,184,104,.8); animation: hvFloat linear infinite; }
@keyframes hvFloat { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 15% { opacity: .9; } 85% { opacity: .7; } 100% { opacity: 0; transform: translateY(-30px) scale(1); } }
@media (prefers-reduced-motion: reduce) { .hv-particle { animation: none; opacity: 0; } }

.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: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-bright); font-weight: 600; }

.hero-headline { font-family: var(--ff-display); font-size: clamp(34px, 9.5vw, var(--fs-3xl)); font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; color: var(--snow); margin-bottom: 22px; }
.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.78em; display: block; margin-bottom: 10px;
}
.hero-headline .line-truth { color: var(--snow); display: block; text-shadow: 0 1px 30px rgba(221,184,104,.10); }

.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); }

/* ============================================================
   v4.2 — CINEMATIC HERO CENTERPIECE
   The hero is now the strongest visual moment in the app: a large,
   breathing gold AI orb (canvas, see centerpiece.js) on a volumetric
   stage with floor light and rays. The old SVG mark is dimmed to a
   faint substrate so the living orb dominates.
   ============================================================ */
.s0-body { padding-top: 34px; }
.hero-visual { max-width: min(82vw, 340px); margin: 6px auto 30px; }

/* the stage: deeper well + bigger bloom so the orb reads as volumetric */
.hv-frame--orb {
  background:
    radial-gradient(circle at 50% 42%, rgba(221,184,104,.14), transparent 52%),
    radial-gradient(circle at 50% 50%, #14110C 40%, #0C0A07 100%);
  box-shadow:
    var(--edge-light-strong),
    inset 0 0 60px rgba(8,7,5,.85),
    inset 0 0 0 1px rgba(196,154,74,.16),
    0 24px 80px rgba(8,7,5,.7),
    0 0 70px rgba(196,154,74,.18);
}
/* amplified energy bloom behind the lens */
.hero-visual::before {
  inset: -34%;
  background: radial-gradient(circle, rgba(221,184,104,.42) 0%, rgba(196,154,74,.16) 38%, transparent 70%);
  animation: heroBloom 4.2s ease-in-out infinite;
}
/* floor light — the orb sits in a pool of gold */
.hero-visual::after {
  content: ''; position: absolute; left: 50%; bottom: -16%; transform: translateX(-50%);
  width: 76%; height: 26%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse, rgba(221,184,104,.34), transparent 70%);
  filter: blur(10px); animation: heroBloom 4.2s ease-in-out infinite .6s;
}
@media (prefers-reduced-motion: reduce) { .hero-visual::after { animation: none; } }

/* dim the legacy SVG substrate — the canvas orb is the star now */
.hv-frame--orb .hv-face { opacity: .10; }
.hv-frame--orb .hv-mesh { opacity: .14; }
.hv-frame--orb .hv-scanline { opacity: .5; }
.hv-frame--orb .hv-particles { z-index: 3; }

/* HUD chips lifted above the orb */
.hv-chip { z-index: 5; box-shadow: var(--panel-glow); border-color: var(--panel-border-soft); }

/* cinematic headline — larger, gold, with a slow rise */
.hero-headline { font-size: var(--fs-hero); line-height: 1.08; margin-bottom: 20px; }
.hero-headline .line-truth { letter-spacing: -0.02em; }
.specimen-text { font-size: 11px; }
.specimen-dot { width: 6px; height: 6px; }