:root {
  --navy: #071F45;
  --navy-mid: #1A3260;
  --navy-light: #2A4A80;
  --green: #2AC558;
  --green-dark: #28A84F;
  --green-light: #7EEAA0;
  --off-white: #F7F8FA;
  --white: #FFFFFF;
  --gray-dark: #3A4055;
  --gray: #8A91A8;
  --border: #E2E6EE;
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;
  --sh-soft: 0 10px 28px rgba(7,31,69,0.08);
  --sh-md: 0 20px 48px rgba(7,31,69,0.12);
  --sh-lg: 0 24px 56px rgba(7,31,69,0.16);
  --sh-green: 0 16px 36px rgba(42,197,88,0.22);
  --surface-1: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(247,248,250,1) 100%);
  --surface-2: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(250,251,253,1) 100%);
  --surface-border: rgba(7,31,69,0.08);
  --section-space: var(--sp-24);
  --section-space-tight: 56px;
  --title-xl: clamp(2rem, 4vw, 3.35rem);
  --title-lg: clamp(1.9rem, 3.2vw, 2.7rem);
  --copy-lg: 1.02rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 280ms;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: clip; }
body {
  font-family: var(--font-body);
  color: var(--gray-dark);
  background: var(--off-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, p { margin: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.container {
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto;
}
main { display: block; }
.section { padding: var(--section-space) 0; }
.section-title { font-size: var(--title-xl); }
.section-copy { color: var(--gray-dark); }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 900px) {
  .container { width: min(1280px, calc(100% - 24px)); }
  .section { padding: 72px 0; }
}

@media (max-width: 600px) {
  .section { padding: 56px 0; }
}