*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Georgia', serif; color: #2c2c2c; background: #fff; line-height: 1.7; }
a { color: #1a4f8a; text-decoration: none; }
a:hover { text-decoration: underline; }

/* NAV */
header { background: #1a4f8a; padding: 0; }
.nav-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 64px; }
.logo { color: #fff; font-size: 1.1rem; font-weight: bold; letter-spacing: 0.5px; }
.logo span { color: #f0c040; }
nav a { color: rgba(255,255,255,0.85); margin-left: 28px; font-size: 0.92rem; font-family: Arial, sans-serif; }
nav a:hover { color: #fff; text-decoration: none; }

/* HERO */
.hero { background: linear-gradient(135deg, #1a4f8a 0%, #0d3060 100%); color: #fff; padding: 80px 24px 70px; text-align: center; }
.hero h1 { font-size: 2.4rem; max-width: 800px; margin: 0 auto 18px; line-height: 1.3; }
.hero p { font-size: 1.1rem; max-width: 640px; margin: 0 auto; opacity: 0.88; }
.badge { display: inline-block; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #f0c040; font-size: 0.82rem; font-family: Arial,sans-serif; letter-spacing: 1px; text-transform: uppercase; padding: 5px 14px; border-radius: 20px; margin-bottom: 22px; }

/* MAIN */
.container { max-width: 820px; margin: 0 auto; padding: 56px 24px; }
.container h2 { font-size: 1.65rem; color: #1a4f8a; margin-bottom: 16px; margin-top: 40px; }
.container h2:first-child { margin-top: 0; }
.container p { margin-bottom: 18px; font-size: 1.05rem; }
.container ul { margin: 0 0 18px 22px; }
.container ul li { margin-bottom: 8px; font-size: 1.05rem; }

/* CARDS */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; margin: 36px 0; }
.card { border: 1px solid #d0dce8; border-radius: 8px; padding: 28px 22px; }
.card h3 { color: #1a4f8a; font-size: 1.05rem; margin-bottom: 10px; }
.card p { font-size: 0.95rem; margin: 0; }

/* CALLOUT */
.callout { background: #f0f6ff; border-left: 4px solid #1a4f8a; padding: 22px 26px; border-radius: 0 8px 8px 0; margin: 32px 0; }
.callout p { margin: 0; font-size: 1.02rem; }

/* FOOTER */
footer { background: #0d3060; color: rgba(255,255,255,0.7); text-align: center; padding: 32px 24px; font-family: Arial, sans-serif; font-size: 0.88rem; }
footer a { color: rgba(255,255,255,0.7); }

@media (max-width: 600px) {
  .hero h1 { font-size: 1.7rem; }
  .nav-inner { flex-direction: column; height: auto; padding: 14px; gap: 10px; }
  nav a { margin: 0 10px; }
}