:root{
  --brand-blue:#0c4a6e; /* deep blue */
  --brand-gold:#f5b301;
  --ink:#0f172a;        /* slate-900 */
  --muted:#475569;      /* slate-600 */
  --bg:#ffffff;
  --card:#f8fafc;       /* slate-50 */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}
.container{max-width:1100px; margin:0 auto; padding:clamp(16px,2.5vw,32px)}

/* Header */
.site-header{background:var(--brand-blue); color:#fff; position:sticky; top:0; z-index:10}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.3px}
.brand svg{width:28px; height:28px; flex:0 0 28px}
.brand a{color:#fff; text-decoration:none; font-weight:800}
.navbar{display:flex; align-items:center; justify-content:space-between}
.nav-links{display:flex; gap:20px}
.nav-links a{color:#fff; text-decoration:none; opacity:.95}
.nav-links a:hover{opacity:1; text-decoration:underline}
.hamburger{display:none; background:none; border:none; color:#fff; font-size:26px}

@media (max-width:860px){
  .nav-links{display:none; position:absolute; left:0; right:0; top:64px; background:var(--brand-blue); padding:16px 24px; flex-direction:column; gap:12px}
  .nav-links.open{display:flex}
  .hamburger{display:inline-flex}
}

/* Typography */
h1{font-size:clamp(28px,3.6vw,44px); line-height:1.2; margin:0 0 12px; font-weight:800}
h2{font-size:clamp(20px,2.2vw,28px); margin:32px 0 12px}
p.lead{font-size:1.1rem; color:var(--muted)}

/* Layout helpers */
.grid{display:grid; gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){.grid-2{grid-template-columns:1fr}}
.card{background:var(--card); border-radius:14px; padding:18px; box-shadow:0 2px 8px rgba(2,6,23,.06)}
.hero-img,.card img{width:100%; height:auto; border-radius:12px; display:block}
.muted{color:var(--muted); font-size:.95rem}

/* Buttons */
.btn{display:inline-block; background:var(--brand-blue); color:#fff; border-radius:10px; padding:10px 16px; text-decoration:none; font-weight:600}
.btn.alt{background:var(--brand-gold); color:#000}
.btn.ghost{background:transparent; border:2px solid var(--brand-blue); color:var(--brand-blue)}

/* Footer */
.site-footer{border-top:1px solid #e2e8f0; color:var(--muted)}