:root {
  /* ───────── BRAND ───────── */
  --brand-cyan: #20B9F1;
  --brand-indigo: #3E4095;

  /* ───────── CORE BACKGROUNDS ───────── */
  --page-bg: #FAFAFA;         /* body background */
  --bg: #F7F8FF;              /* soft background (existing token) */

  --surface: #FFFFFF;         /* generic white card */
  --surface-soft: #F6FBFF;    /* card gradient bottom */
  --surface-soft-alt: #FAFBFF;/* bands like .how-it-works / .cs-flow */
  --surface-tile: #F7F8FF;    /* tiles in rail, etc. */

  /* Dark surfaces for hero / panels / quotes / strips */
  --surface-dark-hero-top: #121428;
  --surface-dark-hero-bottom: #0B0D1E;
  --surface-dark-mock: #0F1125;
  --surface-dark-cta-top: #2B2F62;
  --surface-dark-cta-bottom: #12142D;
  --surface-dark-engage-top: #13132E;
  --surface-dark-engage-mid: #252659;
  --surface-dark-engage-bottom: #FAFAFA;
  --surface-dark-flow-top: #13142E;
  --surface-dark-flow-bottom: #080918;
  --surface-dark-quote-top: #12142D;
  --surface-dark-quote-bottom: #232659;

  /* FAQ / band backgrounds */
  --band-timeline: #F7F8FF;
  --band-faq-top: #F8F9FF;
  --band-faq-bottom: #F5F7FF;

  /* ───────── TEXT COLORS ───────── */
  --text: #141414;            /* main body text */
  --text-hero-sub: #2C2C2C;
  --text-subtle: #333333;
  --muted: #444444;           /* existing muted */
  --text-muted-alt: #555555;
  --text-quiet: #6A6A6A;
  --text-link: var(--brand-indigo);

  /* Light-on-dark text tints */
  --text-on-dark-primary: #E9ECFF;
  --text-on-dark-muted: #CCD2FF;
  --text-on-dark-soft: #CBD1FF;
  --text-on-dark-label: #DFE3FF;

  /* Metric / timeline labels */
  --text-metric-label: #555555;

  /* ───────── ACCENTS & FILLS ───────── */
  --accent-chip-cyan-light: #9ADFF8;
  --accent-hero-top: #F4F5FF;
  --accent-hero-bottom: #ECECFF;

  --accent-rail-head: #6A6A6A;
  --accent-pill-bg: #FFFFFF;
  --accent-pill-border: #E0E4FF;

  --accent-badge-bg: #EEF1FF;
  --accent-badge-text: #34376A;

  /* CTA divider */
  --cta-divider-transparent: rgba(255,255,255,0);
  --cta-divider-mid: rgba(255,255,255,0.22);

  /* ───────── BORDERS ───────── */
  --border-subtle: #EEF;          /* generic light border */
  --border-subtle-alt: #E0E4FF;
  --border-accent: #E9EBFF;
  --border-accent-soft: #DFE2FF;
  --border-accent-soft-2: #DFE7FF;
  --border-accent-soft-3: #E3E6FF;
  --border-faq: #E1E5FF;
  --border-flow: #E2E6FF;
  --border-timeline: #D4D8FF;

  /* ───────── SPECIAL EFFECT COLORS ───────── */
  /* Radials / glow tints */
  --hero-radial-cyan: rgba(32,185,241,0.22);
  --panel-radial-cyan: rgba(32,185,241,0.18);
  --flow-radial-cyan: rgba(32,185,241,0.18);

  /* FAQ hover overlay */
  --faq-highlight-cyan: rgba(32,185,241,0.05);
  --faq-highlight-indigo: rgba(62,64,149,0.04);

  /* Card active ring / timeline dot shadow, etc. */
  --ring-active-outer: rgba(128,116,240,0.60);
  --ring-active-hover: rgba(128,116,240,0.25);
  --ring-timeline: rgba(62,64,149,0.18);

  /* ───────── SHADOWS ───────── */
  --shadow: 0 10px 30px rgba(0,0,0,0.08);      /* existing global */
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.05);
  --shadow-medium: 0 14px 36px rgba(0,0,0,0.06);
  --shadow-strong: 0 24px 60px rgba(0,0,0,0.15);
  --shadow-stronger: 0 24px 60px rgba(0,0,0,0.12);
  --shadow-cs-card: 0 16px 44px rgba(0,0,0,0.05);
  --shadow-faq: 0 4px 12px rgba(0,0,0,0.03);
  --shadow-faq-hover: 0 8px 24px rgba(62,64,149,0.08);
}

/* ───────── OKLCH UPGRADE FOR TOKENS ───────── */
@supports (color: oklch(50% 0.1 200)) {
  :root {
    /* Exact OKLCH conversions for the core tokens */
    --brand-cyan:  oklch(73.70% 0.1409 230);
    --brand-indigo: oklch(41.94% 0.1365 277.7);

    --bg:    oklch(98.04% 0.0093 279.7);  /* #F7F8FF */
    --text:  oklch(19.13% 0 89.9);        /* #141414 (near-neutral) */
    --muted: oklch(38.67% 0 89.9);        /* #444444 (near-neutral) */
  }
}

/* ───────── OKLCH GRADIENT / BACKGROUND OVERRIDES ───────── */
/* Move this block here and remove it from styles.css */
@supports (background: linear-gradient(in oklch, #ffffff, #000000)) {

  .starter__panel--left {
    background:
      radial-gradient(
        in oklch 120% 120% at 0% 0%,
        rgba(32,185,241,.22),
        transparent 60%
      ),
      linear-gradient(
        in oklch 180deg,
        #f4f5ff 0%,
        #ececff 100%
      );
  }

  .card {
    background: linear-gradient(
      in oklch 180deg,
      #ffffff 0%,
      #f6fbff 100%
    );
  }

  .card .chip {
    background: linear-gradient(
      in oklch 180deg,
      var(--brand-cyan),
      #9adff8
    );
  }

  .panel--dark {
    background:
      radial-gradient(
        in oklch 120% 140% at 0% 0%,
        rgba(32,185,241,.18),
        transparent 60%
      ),
      linear-gradient(
        in oklch 180deg,
        #121428,
        #0b0d1e 60%,
        #0b0d1e
      );
  }

  .cta-hero {
    background: linear-gradient(
      in oklch 180deg,
      #2b2f62,
      #12142d
    );
  }

  .engage-rect {
    background: linear-gradient(
      in oklch 180deg,
      #13132E 0%,
      #252659 55%,
      #FAFAFA 100%
    );
  }

  .engage-rect .engage-cta::after {
    background: linear-gradient(
      in oklch 90deg,
      rgba(255,255,255,0),
      rgba(255,255,255,0.22),
      rgba(255,255,255,0)
    );
  }

  .cs-flow-card--dark {
    background:
      radial-gradient(
        in oklch 140% 180% at 0% 0%,
        rgba(32,185,241,.18),
        transparent 60%
      ),
      linear-gradient(
        in oklch 180deg,
        #13142e,
        #080918
      );
  }

  .cs-benefit-ribbon {
    background: linear-gradient(
      in oklch 90deg,
      #ffffff,
      #f2f5ff
    );
  }

  .cs-quote {
    background: linear-gradient(
      in oklch 180deg,
      #12142d,
      #232659
    );
  }

  .cs-faq {
    background: linear-gradient(
      in oklch 180deg,
      #f8f9ff 0%,
      #f5f7ff 100%
    );
  }

  .cs-faq-item:hover {
    background: linear-gradient(
      in oklch 180deg,
      #ffffff 0%,
      #f9fbff 100%
    );
  }

  .cs-faq-item::before {
    background: linear-gradient(
      in oklch 135deg,
      rgba(32,185,241,0.05),
      rgba(62,64,149,0.04)
    );
  }
}