:root {
  /* ---- Colors ---- */
  --color-bg-primary: #210728;
  --color-bg-dark: #17051d;
  --color-accent-bg: #ffd329;
  --color-white: #f1f4f4;
  --color-cta: linear-gradient(180deg, #8cff4b 0%, #19c93f 100%);
  --color-cta-solid: #22d943;
  --color-btn-secondary-border: #c18a2e;
  --color-text: #b9a9c4;
  --color-heading: #ffd429;
  --color-btn-dark-text: #102013;
  --color-card: #2b0d36;
  --color-neon: #22d943;
  --color-danger: #d5342f;

  /* ---- Typography ---- */
  --font-main: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;

  --fs-body: clamp(14px, 1.1vw, 16px);
  --fs-small: clamp(12px, 1vw, 14px);
  --fs-h1: clamp(36px, 5vw, 48px);
  --fs-h2: clamp(26px, 3.4vw, 34px);
  --fs-h3: clamp(20px, 2.2vw, 24px);
  --line-height: 1.6;

  /* ---- Spacing ---- */
  --space-section: clamp(40px, 6vw, 60px);
  --space-card-gap: 20px;
  --space-para: 20px;
  --space-h2-text: 20px;
  --space-h3-text: 16px;
  --space-faq: 14px;
  --space-card-pad: 24px;

  /* ---- Layout ---- */
  --container-max: 1440px;

  /* ---- Radius / shadow / transition ---- */
  --radius-card: 6px;
  --radius-pill: 999px;
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.25);
  --transition: 0.25s ease;

  --header-height: 72px;
}