:root {
  --blue: #1a5fd0;
  --blue-dark: #0f3e8f;
  --navy: #0d1b34;
  --ink: #1c2433;
  --gray: #5b6678;
  --light: #f4f7fc;
  --border: #e3e9f2;
  --green: #1e9e5a;
  --red: #c0392b;
  --radius: 10px;
  --maxw: 1080px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  line-height: 1.6;
  background: #fff;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* Header */
header {
  border-bottom: 1px solid var(--border);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--blue);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.logo svg { flex-shrink: 0; }
.nav-links { display: flex; gap: 24px; align-items: center; }
.nav-links a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}
.nav-links a:hover { color: var(--blue); }
.btn {
  display: inline-block;
  background: var(--blue);
  color: #fff !important;
  padding: 12px 26px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.btn:hover { background: var(--blue-dark); }
.btn-lg { padding: 16px 36px; font-size: 1.1rem; }
.btn-ghost {
  background: transparent;
  color: var(--blue) !important;
  border: 2px solid var(--blue);
}
.btn-ghost:hover { background: var(--light); }

/* Hero */
.hero {
  background: linear-gradient(160deg, var(--navy) 0%, #122a55 60%, var(--blue-dark) 100%);
  color: #fff;
  padding: 72px 0 64px;
  text-align: center;
}
.hero h1 {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 1.2;
  max-width: 820px;
  margin: 0 auto 18px;
}
.hero p.sub {
  font-size: 1.2rem;
  color: #c6d4ee;
  max-width: 680px;
  margin: 0 auto 30px;
}
.hero .trust-row {
  margin-top: 26px;
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  color: #9fb4d8;
  font-size: 0.9rem;
}
.hero .trust-row span::before { content: "✓ "; color: #6fcf97; font-weight: 700; }

/* Sections */
section { padding: 64px 0; }
section.alt { background: var(--light); }
.kicker {
  color: var(--blue);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  margin-bottom: 8px;
}
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.25; margin-bottom: 14px; }
.section-head { max-width: 720px; margin-bottom: 38px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* Stat cards */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.stat {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 22px;
  text-align: center;
}
.stat .num { font-size: 2rem; font-weight: 800; color: var(--blue); }
.stat .label { color: var(--gray); font-size: 0.95rem; margin-top: 6px; }
.stat .src { color: #9aa6b8; font-size: 0.75rem; margin-top: 10px; }

/* Feature grid */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.feature {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.feature .icon { font-size: 1.6rem; margin-bottom: 12px; }
.feature h3 { font-size: 1.1rem; margin-bottom: 8px; }
.feature p { color: var(--gray); font-size: 0.95rem; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; counter-reset: step; }
.step {
  background: var(--light);
  border-radius: var(--radius);
  padding: 28px 24px;
  position: relative;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  margin-bottom: 12px;
}
.step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.step p { color: var(--gray); font-size: 0.95rem; }

/* CTA band */
.cta-band {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  color: #fff;
  text-align: center;
  border-radius: 14px;
  padding: 52px 32px;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #cddcf5; max-width: 600px; margin: 0 auto 26px; }
.cta-band .btn { background: #fff; color: var(--blue) !important; }
.cta-band .btn:hover { background: #e8effb; }
.cta-band .fine { font-size: 0.8rem; color: #a9c0e8; margin-top: 16px; }

/* Opt-in */
.optin {
  background: #fff;
  border: 2px solid var(--blue);
  border-radius: 14px;
  padding: 40px 32px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 36px;
  align-items: center;
}
.optin h2 { font-size: 1.5rem; }
.optin ul { margin: 14px 0 0 18px; color: var(--gray); }
.optin form { display: flex; flex-direction: column; gap: 12px; }
.optin input[type="email"], .optin input[type="text"] {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
}
.optin .privacy { font-size: 0.78rem; color: #9aa6b8; }
@media (max-width: 760px) { .optin { grid-template-columns: 1fr; } }

/* Articles */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}
.card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--blue); }
.card p { color: var(--gray); font-size: 0.95rem; flex: 1; }
.card .more { margin-top: 14px; color: var(--blue); font-weight: 600; text-decoration: none; font-size: 0.95rem; }

/* Article page */
.article { max-width: 760px; margin: 0 auto; padding: 56px 24px; }
.article h1 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); line-height: 1.25; margin-bottom: 10px; }
.article .meta { color: #9aa6b8; font-size: 0.9rem; margin-bottom: 30px; }
.article h2 { font-size: 1.4rem; margin: 34px 0 12px; }
.article p, .article li { color: #374357; font-size: 1.05rem; }
.article p { margin-bottom: 16px; }
.article ul, .article ol { margin: 0 0 16px 22px; }
.article li { margin-bottom: 8px; }
.article .callout {
  background: var(--light);
  border-left: 4px solid var(--blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 22px;
  margin: 28px 0;
}
.article .callout p { margin-bottom: 12px; }
.article .callout p:last-child { margin-bottom: 0; }

/* Checklist */
.check-list { list-style: none; margin: 0 0 16px 0 !important; }
.check-list li {
  padding: 12px 0 12px 36px;
  position: relative;
  border-bottom: 1px solid var(--border);
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 4px;
  color: var(--green);
  font-weight: 800;
  font-size: 1.1rem;
}

/* Disclosure + footer */
.disclosure {
  font-size: 0.8rem;
  color: #9aa6b8;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  padding: 0 24px;
}
footer {
  background: var(--navy);
  color: #9fb4d8;
  padding: 44px 0 36px;
  margin-top: 64px;
  font-size: 0.9rem;
}
footer .cols { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
footer a { color: #c6d4ee; text-decoration: none; }
footer a:hover { color: #fff; }
footer .foot-disclosure { margin-top: 26px; font-size: 0.75rem; color: #6c7f9f; line-height: 1.5; }