/* ── Tokens ────────────────────────────────────────────────── */
:root {
  --navy: #1B2A4A;
  --emerald: #2AB573;
  --emerald-hover: #239E63;
  --slate: #6B7280;
  --white: #FFFFFF;
  --light-gray: #F8F9FA;
  --border-light: rgba(27, 42, 74, 0.08);
  --max-width: 1100px;
  --legal-width: 780px;
  --section-padding: clamp(60px, 8vw, 120px);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--slate);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { color: var(--navy); line-height: 1.2; }

.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--section-padding) 0; }
.section--navy { background: var(--navy); color: var(--white); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--white); }
.section--gray { background: var(--light-gray); }

.h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -0.03em; }
.h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; letter-spacing: -0.02em; }
.h3 { font-size: 1.25rem; font-weight: 600; }
.subtitle { font-size: clamp(1.0625rem, 2vw, 1.25rem); line-height: 1.5; max-width: 600px; }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; border-radius: 8px; font-size: 1rem; font-weight: 600; border: none; cursor: pointer; transition: background 0.2s ease; }
.btn--primary { background: var(--emerald); color: var(--white); }
.btn--primary:hover { background: var(--emerald-hover); }

.skip-link { position: absolute; top: -100%; left: 16px; background: var(--navy); color: var(--white); padding: 8px 16px; border-radius: 4px; z-index: 200; font-size: 0.875rem; }
.skip-link:focus { top: 16px; }

.nav { position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid var(--border-light); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav__wordmark { display: flex; align-items: center; gap: 8px; font-size: 1.125rem; letter-spacing: -0.02em; color: var(--navy); }
.nav__logo { display: block; }
.nav__wordmark-text { font-weight: 300; }
.nav__wordmark-text strong { font-weight: 700; }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__link { font-size: 0.9375rem; font-weight: 500; color: var(--slate); transition: color 0.15s ease; }
.nav__link:hover { color: var(--navy); }
.nav__cta { padding: 10px 20px; font-size: 0.875rem; }
.nav__hamburger { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--navy); }
.nav__hamburger svg { width: 24px; height: 24px; }
.nav__mobile-menu { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--border-light); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); padding: 16px 24px; }
.nav__mobile-menu.is-open { display: block; }
.nav__mobile-menu a { display: block; padding: 12px 0; font-size: 1rem; font-weight: 500; color: var(--slate); border-bottom: 1px solid var(--border-light); }
.nav__mobile-menu a:last-child { border-bottom: none; }

.footer { background: var(--navy); color: rgba(255, 255, 255, 0.7); padding: 48px 0; }
.footer__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.footer__links { display: flex; gap: 24px; }
.footer__link { font-size: 0.875rem; transition: color 0.15s ease; }
.footer__link:hover { color: var(--white); }
.footer__copy { font-size: 0.8125rem; }

.hero { padding: clamp(80px, 12vw, 160px) 0; text-align: center; }
.hero .subtitle { margin: 20px auto 0; color: rgba(255, 255, 255, 0.8); }
.hero .btn { margin-top: 36px; }
.hero__logo { display: block; margin: 0 auto 16px; }
.hero__wordmark { font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--emerald); margin-bottom: 20px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 48px; }
.step__number { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--emerald); color: var(--white); font-weight: 700; font-size: 1rem; margin-bottom: 16px; }
.step__title { margin-bottom: 8px; }
.step p { font-size: 0.9375rem; line-height: 1.6; }

.benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 48px; }
.benefit { padding: 32px; border-radius: 12px; border: 1px solid var(--border-light); background: var(--white); }
.benefit__title { margin-bottom: 8px; }
.benefit p { font-size: 0.9375rem; line-height: 1.6; }

.trust-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 48px; text-align: center; }
.trust-item h3 { color: var(--white); margin-bottom: 8px; }
.trust-item p { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.7); line-height: 1.6; }

.cta-banner { text-align: center; }
.cta-banner .h2 { margin-bottom: 8px; }
.cta-banner .subtitle { margin: 0 auto 32px; color: var(--slate); }

.legal { max-width: var(--legal-width); margin: 0 auto; padding: 0 24px; }
.legal h1 { margin-bottom: 8px; }
.legal .legal__date { color: var(--slate); font-size: 0.9375rem; margin-bottom: 48px; }
.legal h2 { font-size: 1.25rem; margin-top: 40px; margin-bottom: 12px; }
.legal h3 { font-size: 1.0625rem; margin-top: 24px; margin-bottom: 8px; }
.legal p { margin-bottom: 12px; line-height: 1.7; }
.legal ul { margin-bottom: 12px; padding-left: 24px; list-style: disc; }
.legal li { margin-bottom: 6px; line-height: 1.7; }

.error-page { text-align: center; padding: clamp(80px, 12vw, 160px) 24px; }
.error-page .h1 { margin-bottom: 12px; }
.error-page p { margin-bottom: 32px; }

@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__hamburger { display: block; }
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .benefits { grid-template-columns: 1fr; }
  .trust-items { grid-template-columns: 1fr; gap: 32px; }
  .footer__inner { flex-direction: column; text-align: center; }
}