/* ====== Client Results section (React-mounted) ====== */
.client-results {
  --cr-bg-0: #0a0e12;
  --cr-bg-1: #0e141a;
  --cr-bg-2: #131b22;
  --cr-line: rgba(255,255,255,0.06);
  --cr-line-2: rgba(255,255,255,0.10);
  --cr-fg-0: #f1ece1;
  --cr-fg-1: #d6cfc1;
  --cr-fg-2: rgba(241,236,225,0.62);
  --cr-fg-3: rgba(241,236,225,0.40);
  --cr-accent: oklch(0.86 0.05 165);
  --cr-accent-dim: oklch(0.86 0.05 165 / 0.35);
  --cr-accent-glow: oklch(0.86 0.05 165 / 0.18);
  --cr-serif: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --cr-sans: 'Inter', system-ui, sans-serif;
  --cr-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* expose bare names for the JSX (which uses --bg-0 etc.) */
  --bg-0: var(--cr-bg-0); --bg-1: var(--cr-bg-1); --bg-2: var(--cr-bg-2);
  --line: var(--cr-line); --line-2: var(--cr-line-2);
  --fg-0: var(--cr-fg-0); --fg-1: var(--cr-fg-1); --fg-2: var(--cr-fg-2); --fg-3: var(--cr-fg-3);
  --accent: var(--cr-accent); --accent-dim: var(--cr-accent-dim); --accent-glow: var(--cr-accent-glow);
  --serif: var(--cr-serif); --sans: var(--cr-sans); --mono: var(--cr-mono);

  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(120, 180, 160, 0.06), transparent 60%),
    radial-gradient(900px 500px at 95% 110%, rgba(120, 180, 160, 0.04), transparent 60%),
    var(--cr-bg-0);
  color: var(--cr-fg-0);
  font-family: var(--cr-sans);
}
.client-results #client-results-root { width: 100%; }
.client-results .preload * { transition: none !important; animation: none !important; }