/* veritas.css — Veritas SKIN (luminous verification-tech)
 * ==========================================================================
 * Thin palette + voice layer over boutique-system.css + funnel-system.css.
 * Deep-teal canvas, electric-teal accent, sans display headings — the SaaS
 * salespage voice. body-scoped tokens win over the system sheets regardless of
 * load order, so the look paints at FCP. Default = deep-teal dark; light = mint.
 */

/* ── Palette — deep-teal (default) ──────────────────────────────────────── */
body {
  --bg: #05100f; --bg-2: #081a18;
  --card: rgba(12, 28, 26, 0.66); --card-hi: rgba(16, 38, 35, 0.92);
  --line: rgba(140, 255, 238, 0.1); --line-gold: rgba(0, 229, 204, 0.34);
  --accent: #00E5CC; --accent-soft: rgba(0, 229, 204, 0.13);
  --text: rgba(230, 250, 247, 0.94); --muted: rgba(200, 232, 227, 0.56); --faint: rgba(200, 232, 227, 0.32);
  background: var(--bg); color: var(--text);
}

/* ── Palette — mint light (theme toggle) ────────────────────────────────── */
html[data-theme="light"] body {
  --bg: #f2fbf9; --bg-2: #e6f6f2;
  --card: rgba(255, 255, 255, 0.86); --card-hi: #ffffff;
  --line: rgba(8, 60, 54, 0.12); --line-gold: rgba(2, 130, 114, 0.34);
  --accent: #028f7e; --accent-soft: rgba(2, 143, 126, 0.12);
  --text: #062420; --muted: rgba(6, 36, 32, 0.62); --faint: rgba(6, 36, 32, 0.4);
}

/* Ambient mesh — teal glow, grid wash. */
body .fx-mesh {
  background:
    radial-gradient(58% 46% at 82% 4%, var(--accent-soft), transparent 62%),
    radial-gradient(64% 56% at 8% 100%, var(--accent-soft), transparent 68%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}

/* ── Type voice — sans display, tight tracking ──────────────────────────── */
body .hero h1, body .b-sec-head h2, body .b-split h2, body .b-story h2,
body .b-cta-band h2, body .overlay-hero h2, body .b-step h3,
body .panel h2 {
  font-family: var(--sans); font-weight: 700; letter-spacing: -0.02em;
}
body .b-vprop .stat, body .b-metric .stat, body .b-step-n {
  font-family: var(--sans); font-weight: 700; letter-spacing: -0.02em;
}
body .hero-tagline {
  font-family: var(--sans); font-style: normal; font-weight: 600; font-size: 19px;
  line-height: 1.35; color: var(--accent); margin: -2px 0 18px;
}
body .panel-kick, body .hero-eyebrow, body .b-eyebrow { color: var(--accent); letter-spacing: .22em; }

/* ── Topbar ─────────────────────────────────────────────────────────────── */
body .tb { background: rgba(5, 16, 15, 0.72); border-bottom: 1px solid var(--line); }
body .tb-brand { color: var(--text); font-family: var(--sans); font-weight: 700; letter-spacing: -0.01em; }
body .tb-brand .mark { color: var(--accent); }
body .tb .b-nav a { color: var(--muted); }
body .tb .b-nav a:hover { color: var(--accent); }
html[data-theme="light"] body .tb { background: rgba(255, 255, 255, 0.82); }

/* ── Button contrast on the electric accent ─────────────────────────────── */
body .btn-primary { color: #042321; }
body .b-bottombar .b-bb-btn.book { color: #042321; }
body .bill-opt.on, body .plan-badge { color: #042321; }

/* ── Modern radii + glow on panels/cards ────────────────────────────────── */
body .panel { border-radius: 18px; box-shadow: 0 24px 60px rgba(2, 12, 11, 0.42); }
body .b-vprop, body .b-gcard, body .b-quote, body .b-step, body .b-metric { border-radius: 14px; }
body .overlay-hero { background: linear-gradient(180deg, var(--accent-soft), transparent); }

/* ── Hero art — CSS grid mesh + glow nodes (a sealed-document motif) ─────── */
body .b-hero-art {
  position: relative; border-radius: 18px; aspect-ratio: 4 / 3; max-width: 460px;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 34px 34px,
    radial-gradient(70% 60% at 30% 22%, var(--accent-soft), transparent 60%),
    radial-gradient(60% 60% at 80% 80%, var(--accent-soft), transparent 62%),
    linear-gradient(160deg, var(--card-hi), var(--card));
  border: 1px solid var(--line-gold);
  box-shadow: 0 30px 80px color-mix(in srgb, var(--accent) 20%, transparent), inset 0 0 60px color-mix(in srgb, var(--accent) 8%, transparent);
}
body .b-hero-art .b-gown { display: none; }
body .b-hero-art::before, body .b-hero-art::after {
  content: ""; position: absolute; border-radius: 999px; background: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-soft), 0 0 28px 4px color-mix(in srgb, var(--accent) 60%, transparent);
}
body .b-hero-art::before { width: 12px; height: 12px; top: 28%; left: 32%; }
body .b-hero-art::after { width: 9px; height: 9px; top: 64%; left: 72%; opacity: .85; }

/* Gallery card art tiles. */
body .b-gart { background: linear-gradient(160deg, var(--card-hi), var(--card)); }
body .b-gart .b-gown { opacity: .5; }