:root { --primary:#1f3c88; --dark:#222; --light:#f8f9fb; }
* { box-sizing: border-box; }
body { margin:0; font-family: Arial, Helvetica, sans-serif; line-height:1.6; background:var(--light); color:#333; }
header { background:var(--primary); color:#fff; }
.header-inner { max-width:1100px; margin:auto; padding:1rem 1.5rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:0.75rem; }
.brand img { height:72px; width:auto; }
.logo {
  height: 42px;      /* header-friendly */
  width: auto;
  display: block;
}
.brand h1 { margin:0; font-size:1.8rem; }
nav a { color:#fff; text-decoration:none; margin-left:1.25rem; font-weight:bold; }
nav a:hover { text-decoration:underline; }
.container { max-width:1100px; margin:auto; padding:2rem 1.5rem; }
.hero { background:#fff; padding:3rem 2rem; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,0.08); }
.hero h2 { color:var(--primary); font-size:2.2rem; margin-top:0; }
.section { margin-top:3rem; }
.section h3 { color:var(--primary); font-size:1.8rem; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem; }
.card { background:#fff; padding:1.5rem; border-radius:10px; box-shadow:0 4px 10px rgba(0,0,0,0.06); }
.cards.cards-2x2 { grid-template-columns: repeat(2, 1fr); }

footer { background:var(--dark); color:#ddd; text-align:center; padding:2rem 1rem; margin-top:3rem; }
footer p { margin:0.5rem 0; font-size:0.9rem; }
@media (max-width:768px) {
  nav { width:100%; margin-top:0.75rem; }
  nav a { margin-left:0; margin-right:1rem; }
  .hero { padding:2rem 1.5rem; }
}
@media (max-width: 768px) {
  .cards.cards-2x2 {
    grid-template-columns: 1fr;
  }
}