*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray-700);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font-family: inherit; }
ul, ol { list-style: none; }

:root {
  --navy:        #044aa5;
  --navy-light:  #1a3a6b;
  --navy-muted:  #e8eef7;
  --white:       #ffffff;
  --gray-50:     #f9fafb;
  --gray-100:    #f3f4f6;
  --gray-200:    #e5e7eb;
  --gray-300:    #d1d5db;
  --gray-400:    #9ca3af;
  --gray-500:    #6b7280;
  --gray-600:    #4b5563;
  --gray-700:    #374151;
  --gray-900:    #111827;
  --green:       #16a34a;
  --yellow:      #ca8a04;
  --red:         #dc2626;
  --green-light: #dcfce7;
  --yellow-light:#fef9c3;
  --red-light:   #fee2e2;

  --font:        'Inter', sans-serif;
  --radius:      12px;
  --radius-sm:   8px;
  --shadow:      0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:   0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
}

[data-theme="dark"] {
  --white:       #1c1e26;
  --navy-muted:  #1e3158;
  --gray-50:     #23252f;
  --gray-100:    #2c2f3c;
  --gray-200:    #383b4a;
  --gray-300:    #4e5268;
  --gray-400:    #767c96;
  --gray-500:    #9097aa;
  --gray-600:    #adb4c4;
  --gray-700:    #cdd4e0;
  --gray-900:    #e8edf5;
  --green:       #22c55e;
  --green-light: #14532d;
  --yellow:      #eab308;
  --yellow-light:#422006;
  --red:         #f87171;
  --red-light:   #450a0a;
  --shadow:      0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 6px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.25);
  --shadow-lg:   0 10px 15px rgba(0,0,0,0.4), 0 4px 6px rgba(0,0,0,0.3);
}

h1 { font-size: 56px; font-weight: 800; line-height: 1.1; letter-spacing: -1.5px; color: var(--gray-900); }
h2 { font-size: 40px; font-weight: 700; line-height: 1.2; letter-spacing: -0.5px; color: var(--gray-900); }
h3 { font-size: 28px; font-weight: 600; line-height: 1.3; color: var(--gray-900); }
h4 { font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--gray-900); }
h5 { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--gray-700); }
p  { font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--gray-700); }
.label { font-size: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--gray-500); }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 768px) {
  .container { padding: 0 16px; }}

.page-header {
  padding: 48px 0 32px;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 48px;
}
.page-header h1 { font-size: 36px; font-weight: 700; }
.page-header p  { font-size: 18px; color: var(--gray-500); margin-top: 8px; }