:root {
  --charcoal: rgb(43, 46, 52);
  --maroon: rgb(80, 0, 0);
  --neutral: rgb(237, 233, 227);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--charcoal);
  background: var(--neutral);
}
.container { width: min(1100px, 92vw); margin: 0 auto; }
.nav { background: var(--charcoal); color: var(--neutral); padding: 14px 0; }
.nav .row { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.nav a { color: var(--neutral); text-decoration:none; margin-left:18px; opacity:.92; }
.nav a:hover { opacity:1; text-decoration:underline; }
.badge { display:inline-flex; align-items:center; gap:10px; font-weight:700; }
.badge img { height: 34px; width:auto; }
.hero { padding: 64px 0 30px; }
.hero h1 { font-size: clamp(32px, 4vw, 52px); line-height:1.05; margin: 10px 0 12px; }
.hero p { font-size: 18px; margin: 0 0 22px; max-width: 60ch; }
.btn { display:inline-block; padding: 12px 18px; border-radius: 12px; text-decoration:none; font-weight:600; }
.btn.primary { background: var(--maroon); color: var(--neutral); }
.btn.secondary { border: 2px solid var(--charcoal); color: var(--charcoal); }
.grid { display:grid; grid-template-columns: repeat(12, 1fr); gap:18px; padding: 18px 0 56px; }
.card { grid-column: span 6; background: rgba(255,255,255,.45); border: 1px solid rgba(43,46,52,.18); border-radius: 18px; padding: 18px; }
.card h2 { margin:0 0 8px; font-size:20px; }
.footer { background: rgba(43,46,52,.06); padding: 18px 0; font-size: 14px; opacity:.9; }
@media (max-width: 820px) {
  .card { grid-column: span 12; }
  .nav .links { display:none; }
}