/* ═══════════════════════════════════════════════════════════
   SITE-THEME.CSS — pulls all non-homepage pages into the
   Quiet Premium system used on the new homepage. Loaded AFTER
   weforads.min.css. Remaps color tokens, softens decoration,
   and unifies nav + button styles.
   ═══════════════════════════════════════════════════════════ */

/* ── COLOR TOKENS — remap neon cyan → desaturated teal + deeper canvas ── */
:root {
  --c: #5eead4;                         /* was #00e5ff — site's primary accent */
  --c2: #7dd3fc;                        /* was #0066ff — secondary accent (sky) */
  --c3: #c084fc;                        /* was #7c3aed — tertiary (violet) */
  --c-dim: rgba(94, 234, 212, 0.10);
  --c-glow: rgba(94, 234, 212, 0.30);
  --c2-glow: rgba(125, 211, 252, 0.22);
  --bg: #050b14;                        /* was #030912 — homepage canvas */
  --bg2: #0a1220;                       /* was #050f1e */
  --bg3: #0f1a2c;                       /* was #071628 */
  --white: #f8fafc;                     /* slightly softer white */
  --muted: #64748b;                     /* was #2d5a78 — less blue-saturated */
  --border: rgba(148, 163, 184, 0.12);  /* was rgba(0,229,255,.12) — neutral */
  --border2: rgba(148, 163, 184, 0.06);
}

/* ── BODY — kill the heavy overlay noise, add homepage mesh bg ── */
body {
  background: var(--bg);
  font-family: Geist, ui-sans-serif, system-ui, -apple-system, sans-serif;
  letter-spacing: -0.005em;
  font-weight: 400;
}
body::after {
  /* soften the existing fractal-noise overlay: was opacity .03 with mix-blend overlay */
  opacity: 0.025 !important;
  mix-blend-mode: normal !important;
}
/* Hide the old background canvas particle dots — feels dated */
#bgc { display: none !important; }

/* Inject mesh-bg gradient blobs behind everything (matches homepage) */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle 900px at 10% 10%, rgba(94, 234, 212, 0.08), transparent 55%),
    radial-gradient(circle 800px at 95% 90%, rgba(125, 211, 252, 0.05), transparent 55%);
}

/* ── ACCENT COLOR CLASSES — tone down the cyan ── */
.cyan, .c1 { color: var(--c) !important; }
.outline {
  -webkit-text-stroke: 1px rgba(148, 163, 184, 0.22);
  color: transparent !important;
  opacity: 0.6;
}

/* ── NAV — match homepage style ── */
nav#nav, .nav {
  background: color-mix(in oklab, var(--bg) 70%, transparent) !important;
  backdrop-filter: blur(12px) saturate(150%);
  border-bottom: 1px solid transparent;
  padding: 18px clamp(20px, 5vw, 80px) !important;
}
nav#nav.stuck, .nav.stuck {
  background: color-mix(in oklab, var(--bg) 88%, transparent) !important;
  border-bottom-color: var(--border);
  padding-top: 14px !important; padding-bottom: 14px !important;
}
/* Show the wordmark image; hide the old W-badge fallback */
.nav-logo .wb,
.nav-logo-fb { display: none !important; }
.nav-logo picture, .nav-logo picture img,
.nav-logo > img { height: 34px !important; width: auto !important; display: block !important; }
.nav-logo { display: inline-flex !important; align-items: center !important; gap: 9px; }

/* Nav links — match homepage pill style */
.nav-links a:not(.pill):not(.d-pill) {
  padding: 8px 14px;
  font-size: 13.5px; font-weight: 450;
  color: color-mix(in oklab, var(--white) 80%, transparent);
  border-radius: 8px;
  transition: color .18s, background .18s;
  letter-spacing: -0.005em;
}
.nav-links a:not(.pill):not(.d-pill):hover {
  color: var(--white);
  background: color-mix(in oklab, var(--white) 5%, transparent);
}
.nav-links a.active:not(.pill) { color: var(--c) !important; background: transparent !important; }

/* Nav pill buttons — match homepage primary */
.pill, .d-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px !important;
  font-size: 13px !important; font-weight: 600 !important;
  border-radius: 8px !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  transition: background .18s, border-color .18s, color .18s, transform .12s !important;
}
.pill:not(.pill-outline), .d-pill:not(.pill-outline) {
  background: var(--c) !important;
  color: #041817 !important;
  border: 1px solid var(--c) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 10px 30px -10px rgba(94, 234, 212, 0.35);
}
.pill:not(.pill-outline):hover, .d-pill:not(.pill-outline):hover {
  background: color-mix(in oklab, var(--c) 88%, white 12%) !important;
  transform: translateY(-1px);
}
.pill.pill-outline {
  background: transparent !important;
  color: var(--white) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
}
.pill.pill-outline:hover { border-color: rgba(148,163,184,0.6) !important; background: color-mix(in oklab, var(--white) 4%, transparent) !important; }

/* ── BUTTONS — unify btn-prime / btn-ghost / btn-p / btn-g ── */
.btn-prime, .btn-p {
  background: var(--c) !important;
  color: #041817 !important;
  border: 1px solid var(--c) !important;
  padding: 14px 24px !important;
  font-family: Geist, sans-serif !important;
  font-size: 13.5px !important; font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 10px 30px -10px rgba(94, 234, 212, 0.35) !important;
  transition: background .18s, transform .12s !important;
}
.btn-prime:hover, .btn-p:hover {
  background: color-mix(in oklab, var(--c) 88%, white 12%) !important;
  transform: translateY(-1px);
}
.btn-ghost, .btn-g {
  background: transparent !important;
  color: var(--white) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  padding: 13px 22px !important;
  font-family: Geist, sans-serif !important;
  font-size: 13.5px !important; font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  border-radius: 8px !important;
  transition: background .18s, border-color .18s !important;
}
.btn-ghost:hover, .btn-g:hover {
  background: color-mix(in oklab, var(--white) 4%, transparent) !important;
  border-color: rgba(148,163,184,0.6) !important;
}

/* ── ANTI-NEON: softening glows + shadows across the site ── */
.h-tag, .af-hero-tag, .abt-hero-tag, .hbid-hero-tag, .legal-hero-tag,
[class*="-hero-tag"], [class$="hero-tag"] {
  border-color: var(--border) !important;
  background: color-mix(in oklab, var(--white) 4%, transparent) !important;
  color: color-mix(in oklab, var(--white) 75%, transparent) !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
  font-weight: 450 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  padding: 6px 12px 6px 10px !important;
  border-radius: 999px !important;
}
[class*="-hero-dot"], .h-tag-dot {
  background: var(--c) !important;
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.16) !important;
  width: 6px !important; height: 6px !important;
}

/* Kill the grid overlay and scanline effects in hero backgrounds — too noisy */
.af-hero-grid, .abt-hero-grid, .hbid-hero-grid, .legal-hero-grid,
.h-grid, .h-scan, .h-diag,
[class*="-grid"][class*="hero"],
[class*="-scan"] { opacity: 0.12 !important; }

/* Blobs — keep them but desaturate */
.blob {
  filter: blur(60px) !important;
  opacity: 0.35 !important;
  mix-blend-mode: normal !important;
}

/* ── HEADINGS — always use Instrument Serif where page uses serif, else Geist ── */
h1, h2, h3, h4, h5, h6, .sh, .ss-h, .cta-h, [class*="title"], [class*="heading"] {
  font-weight: 500;
  letter-spacing: -0.025em;
}
/* Bebas-Neue-style big stacked block titles — tone down */
.af-hero-l h1, .abt-hero-inner h1, .hbid-hero-l h1, .legal-hero-inner h1,
[class*="-hero-l"] h1, [class*="-hero-inner"] h1 {
  font-family: Geist, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.02 !important;
  font-size: clamp(48px, 7vw, 92px) !important;
  text-transform: none !important;
}

/* Section eyebrows */
.lbl, .section-eyebrow {
  color: var(--c) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

/* Section title h2s with .sh — tone down */
h2.sh, .sh {
  font-family: Geist, sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(32px, 4.4vw, 54px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
  text-transform: none !important;
}
h2.sh em, .sh em {
  font-family: 'Instrument Serif', serif !important;
  font-style: italic;
  color: color-mix(in oklab, var(--white) 78%, transparent);
  font-weight: 400;
}

/* Body paragraphs — consistent sizing */
.sp, p {
  letter-spacing: -0.005em;
}

/* ── FOOTER — match homepage neutral ── */
footer {
  border-top: 1px solid var(--border);
  background: transparent;
}
footer a { transition: color .18s; }
footer a:hover { color: var(--c); }

/* ── LEGACY CLASS SOFTENING — tone down heavy gradients ── */
[class*="-glow"], [class*="-shine"] { opacity: 0.6 !important; }

/* Text shadows — kill across the board, replace with softer ones */
* { text-shadow: none !important; }

/* Border-color sweep — neon cyan accents on cards */
.pc, .ic, .tc, .why-card, .ftr-col, .af-card, .abt-card, .ba-stat,
[class*="-card"] {
  border-color: var(--border) !important;
}
.pc:hover, .ic:hover, .tc:hover, .why-card:hover,
[class*="-card"]:hover { border-color: rgba(94, 234, 212, 0.30) !important; }

/* ── SMOOTH EDGES ── */
html { scroll-behavior: smooth; }
img { max-width: 100%; }