:root {
  --brand-navy: #0A2540;
  --brand-blue: #1F6FEB;
  --brand-teal: #2EC4B6;
  --brand-sand: #F2EDE6;
  --brand-coral: #FF6B6B;
  --brand-white: #FFFFFF;
  --gray-900: #111827;
  --gray-600: #6B7280;
  --gray-100: #F3F4F6;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --shadow-soft: 0 10px 25px rgba(10,37,64,0.12);
  --shadow-strong: 0 20px 40px rgba(10,37,64,0.18);
  --container: 1140px;
}

/* Typography (load via HTML): 
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700&family=Inter:wght@400;500&display=swap" rel="stylesheet">
*/
body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--gray-900); }
h1,h2,h3,h4 { font-family: "Plus Jakarta Sans", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.btn-primary {
  background: var(--brand-blue); color: var(--brand-white);
  border-radius: var(--radius-xl); padding: 14px 20px; box-shadow: var(--shadow-soft);
}
.badge { background: var(--brand-sand); color: var(--brand-navy); border-radius: 999px; padding: 6px 12px; }
.card { background: var(--brand-white); border-radius: var(--radius-2xl); box-shadow: var(--shadow-soft); }
a { color: var(--brand-blue); }
.hero-gradient {
  background: radial-gradient(1200px 600px at 70% -20%, rgba(31,111,235,0.25), transparent 60%), 
              linear-gradient(180deg, #0A2540 0%, #0b2b50 100%);
  color: var(--brand-white);
}