:root { --max: 1100px; --gap: 1rem; --brand: #1f6feb; --ink: #0f172a; --muted:#475569; --bg:#ffffff; }
* { box-sizing: border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--ink); font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container { width:min(100%, var(--max)); margin-inline:auto; padding: clamp(1rem, 2vw, 2rem); }
.lead{ color:var(--muted); max-width:60ch; }

.site-header { border-bottom:1px solid #e5e7eb; }
.nav { display:flex; align-items:center; justify-content:space-between; gap:var(--gap); width:min(100%, var(--max)); margin:auto; padding: .75rem var(--gap); }
.brand { font-weight:700; }
.nav-toggle { font-size:1.25rem; background:none; border:1px solid #e5e7eb; padding:.4rem .6rem; border-radius:.5rem; display:none; }
.nav-menu { display:flex; list-style:none; gap:1rem; margin:0; padding:0; }
.nav-menu a { padding:.4rem .6rem; border-radius:.4rem; }
.nav-menu a:hover { background:#f1f5f9; }

.cards { display:grid; grid-template-columns: repeat(12, 1fr); gap:var(--gap); margin-top:1rem; }
.card { grid-column: span 12; border:1px solid #e5e7eb; border-radius:.75rem; padding:1rem; background:#fff; }
.card h3 { margin-top:0; }
.btn { display:inline-block; background:var(--brand); color:#fff; padding:.5rem .8rem; border-radius:.5rem; }

.site-footer { border-top:1px solid #e5e7eb; margin-top:3rem; }
.site-footer p { text-align:center; padding:1rem; color:var(--muted); }

/* Responsive */
@media (min-width: 768px){
  .nav-toggle { display:none; } /* stays hidden on desktop */
  .card { grid-column: span 6; }
}
@media (max-width: 767.98px){
  .nav-toggle { display:block; }
  .nav-menu { display:none; flex-direction:column; align-items:flex-start; }
  .nav-menu.open { display:flex; }
}