:root {
  /* Brand colors */
  --blue-900: #072a52;
  --blue-800: #0b3a6f;
  --blue-700: #0e4a8f;
  --blue-600: #1565c0;
  --blue-500: #1e88e5;
  --blue-400: #42a5f5;
  --blue-300: #90caf9;
  --orange-600: #e8590c;
  --orange-500: #fb7414;
  --orange-400: #ff9142;
  --orange-300: #ffb37a;
  --white: #ffffff;
  --off-white: #f6f9fe;
  --ink: #0c1b2e;
  --muted: #5b6b80;
  --line: rgba(12, 27, 46, 0.08);

  /* Gradients */
  --grad-brand: linear-gradient(135deg, var(--blue-600), var(--blue-500) 45%, var(--orange-500));
  --grad-blue: linear-gradient(160deg, var(--blue-800), var(--blue-600));
  --grad-dark: linear-gradient(160deg, #061f3e, #0b3a6f 60%, #123f78);
  --grad-warm: linear-gradient(120deg, var(--orange-500), var(--orange-400));
  --grad-cta: linear-gradient(120deg, var(--blue-700) 0%, var(--blue-500) 45%, var(--orange-500) 100%);
  --grad-text: linear-gradient(120deg, var(--blue-500), var(--orange-500));

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-dark: rgba(9, 33, 62, 0.35);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(12, 27, 46, 0.06);
  --shadow-md: 0 12px 30px rgba(12, 27, 46, 0.1);
  --shadow-lg: 0 24px 60px rgba(12, 27, 46, 0.16);
  --shadow-glow: 0 20px 50px rgba(251, 116, 20, 0.28);
  --shadow-blue: 0 20px 50px rgba(21, 101, 192, 0.28);

  /* Radius */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* Layout */
  --container: 1200px;
  --gutter: clamp(1.2rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 9vw, 8rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Fonts */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
}