:root {
  /* Colors */
  --color-bg: #13181c;
  --color-white: #ffffff;
  --color-orange: #ff3c02;
  --color-gray: #2a2b2d;
  --color-gray-text: #808080;
  --color-bg-gray: #e9e9e9;
  --color-icon-gray: #323232;
  --color-black: #000000;

  /* Radius: 7px → clamp */
  --radius: clamp(4px, 0.3646vw, 7px);

  /* Container side padding: 50px at 1920 */
  --container-pad: clamp(16px, 2.6042vw, 50px);
  --container-max: 1920px;

  /* Typography scales (max / 1920 * 100vw) */
  --fs-hero: clamp(40px, 7.2917vw, 140px);
  --lh-hero: clamp(44px, 7.1354vw, 137px);
  --fs-hero-sub: clamp(14px, 1.5495vw, 29.753px);
  --lh-hero-sub: clamp(18px, 1.9887vw, 38.183px);
  --fs-h2: clamp(28px, 3.5417vw, 68px);
  --lh-h2: clamp(32px, 3.9063vw, 75px);
  --fs-h3: clamp(22px, 2.0833vw, 40px);
  --lh-h3: clamp(26px, 2.2396vw, 43px);
  --fs-text: clamp(16px, 1.3021vw, 25px);
  --fs-nav: clamp(14px, 0.9375vw, 18px);
  --fs-card: clamp(16px, 1.0417vw, 20px);
  --fs-cta: clamp(16px, 1.0938vw, 21px);
  --fs-btn: clamp(14px, 0.9375vw, 18px);
  --fs-stat: clamp(36px, 4.1667vw, 80px);
  --lh-stat: clamp(44px, 6.1979vw, 119px);

  /* Spacing */
  --space-xs: clamp(8px, 0.7813vw, 15px);
  --space-sm: clamp(12px, 1.0417vw, 20px);
  --space-md: clamp(16px, 1.8229vw, 35px);
  --space-lg: clamp(24px, 2.6042vw, 50px);
  --space-xl: clamp(32px, 3.6458vw, 70px);

  /* Header */
  --header-h: clamp(64px, 4.9479vw, 95px);
  --header-top: clamp(12px, 1.3021vw, 25px);
  --nav-gap: clamp(16px, 1.8229vw, 35px);

  /* Hero cards */
  --hero-card-w: clamp(240px, 20.1563vw, 387px);
  --hero-cta-w: clamp(160px, 13.6979vw, 263px);
  --hero-card-h: clamp(200px, 15.0521vw, 289px);

  /* Breakpoints (for reference in media queries) */
  --bp-tablet: 768px;
  --bp-desktop: 1280px;
}