:root {
  /* ---- Brand colors ---- */
  --color-blue-600:    #2E5BFF;  /* primary (gradient end) */
  --color-blue-400:    #5F82FF;  /* gradient start */
  --color-blue-300:    #88A2FE;  /* workflow step chips */
  --color-blue-secret: #4C66F5;  /* "secret of mana" — button text on light */
  --color-pink:        #FF4F8B;  /* accent */
  --color-white:       #F9FAFC;  /* "dr-white" */
  --color-gray-50:     #F0F1F5;  /* dashed connector lines */

  /* ---- Semantic aliases ---- */
  --text-on-dark:       var(--color-white);
  --text-on-dark-muted: rgba(249, 250, 252, 0.75);
  --accent:             var(--color-pink);
  --border-on-dark:     rgba(249, 250, 252, 0.12); /* table row separators */
  --gradient-soft-blue: linear-gradient(252deg, var(--color-blue-400) 0%, var(--color-blue-600) 100%);

  /* ---- Glass surfaces (on the blue gradient) ---- */
  --surface-glass:      rgba(255, 255, 255, 0.30); /* frosted cards */
  --surface-glass-soft: rgba(255, 255, 255, 0.15); /* blurred brand pills */
  --surface-band:       rgba(255, 255, 255, 0.10); /* footer CTA band */

  /* ---- Typography ---- */
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fw-regular:  400;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-xbold:    800;

  --fs-display:       clamp(2.25rem, 5.5vw, 3.75rem);   /* 36 → 60 (hero headline) */
  --fs-section-title: clamp(1.75rem, 4.5vw, 3.125rem);  /* 28 → 50 (section titles) */
  --fs-card-title:    1.25rem;                           /* 20 */
  --fs-body:          1rem;                               /* 16 */
  --fs-small:         0.875rem;                           /* 14 */

  --lh-tight:  1.1;
  --lh-normal: 1.6;

  /* ---- Spacing scale (8px base) ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* ---- Layout ---- */
  --container-max:      1200px;  /* hero content width */
  --container-max-wide: 1440px;  /* wider sections below hero */
  --container-pad:      clamp(1rem, 4vw, 2.5rem);
  --space-section-gap:  clamp(4rem, 12vw, 150px); /* vertical rhythm between sections */

  /* ---- Radii ---- */
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-md:   0 8px 24px rgba(10, 14, 26, 0.10);
  --shadow-lg:   0 20px 50px rgba(46, 91, 255, 0.18);
  --shadow-card: 0 10px 75px -20px rgba(0, 0, 0, 0.15);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
}