:root {
  /* Colors — extracted from Figma node 2920:256 */
  --color-navy: #121348;
  --color-navy-dark: #0b0c38;
  --color-navy-deep: #0e0f3a;
  --color-navy-footer: #090a2c;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-orange: #ff9300;
  --color-red: #f9363d;
  --color-red-start: #f93a3a;
  --color-orange-end: #fe8d03;
  --color-blue-cta: #0d12ff;
  --color-cream: #fff6e9;
  --color-security-bg: #fff2df;
  --color-text-muted: rgba(0, 0, 0, 0.3);
  --color-border-light: rgba(0, 0, 0, 0.1);
  --color-border-medium: rgba(0, 0, 0, 0.15);
  --color-border-card: rgba(0, 0, 0, 0.25);

  /* Typography */
  --font-roboto: 'Roboto', Arial, sans-serif;
  --font-tomato: 'Tomato Grotesk', Arial, sans-serif;

  /* Layout — responsive containers, capped at design max-width */
  --page-max: 1440px;
  --content-max: 1200px;
  --gutter: clamp(24px, 5vw, 120px);
  --content-padding: var(--gutter);
  --header-height: clamp(88px, 9vw, 130px);
  --section-space: clamp(48px, 5.5vw, 80px);
  --section-space-lg: clamp(60px, 7vw, 100px);
  --section-gap: 100px;
  --section-title: clamp(32px, 2.78vw, 40px);
  --section-subtitle: clamp(18px, 1.53vw, 22px);
  --mask-height: clamp(280px, 27.4vw, 395px);

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --radius-2xl: 37px;
  --radius-3xl: 42px;
  --radius-pill: 37px;

  /* Gradients */
  --gradient-cta: linear-gradient(to right, #f93a3a, #fe8d03);
  --gradient-orange: linear-gradient(to right, #ff9300, #f9363d);
  --gradient-trust: linear-gradient(-55.18deg, #ffffff 1.85%, #fff6e9 66.53%);
  --gradient-tab-active: linear-gradient(to right, #ff9300, #f9363d);
}