/* styles.css */
:root{
  --white:#ffffff;
  --blue-50:#f3f7ff;
  --blue-600:#1e40af;
  --blue-700:#1b3a9a;
  --text:#0f172a;
  --muted:#475569;
  --border:#e2e8f0;
  --orange:#f97316;
  --shadow:0 10px 20px rgba(2,6,23,.06), 0 2px 8px rgba(2,6,23,.04);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; color:var(--text); background:var(--white)}

/* Hero */
.hero{
  position:relative;
  background:linear-gradient(180deg, var(--blue-50), #fff);
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.hero img.bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.3;
}
.hero-inner{position:relative; max-width:1000px; margin:0 auto; padding:80px 20px 60px; display:grid; gap:14px; text-align:center}
.eyebrow{display:inline-block; padding:6px 10px; border-radius:999px; background:var(--blue-50); color:var(--blue-700); font-weight:700; font-size:12px}
h1.title{margin:6px 0 0; font-size:clamp(28px,4.6vw,48px); line-height:1.15; color:var(--blue-700)}
.subtitle{margin:6px auto 0; color:var(--muted); max-width:650px}
.cta{display:flex; gap:12px; justify-content:center; margin-top:18px}
.btn{display:inline-flex; align-items:center; padding:10px 16px; border-radius:10px; border:1px solid var(--border); background:var(--white); box-shadow:var(--shadow); font-weight:700}
.btn.accent{background:var(--orange); color:#fff; border-color:var(--orange)}

/* Sections */
.container{max-width:1000px; margin:0 auto; padding:24px 20px}
.section{padding:18px 0}
.section h2{font-size:22px; margin:0 0 10px; color:var(--blue-700); text-align:center}
.card{border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); background:#fff; padding:16px 18px; text-align:center}
.meta{color:var(--muted); font-size:14px}

.grid{display:grid; gap:14px}
@media (min-width:820px){ .grid.cols-2{grid-template-columns:1fr 1fr} }

footer{border-top:1px solid var(--border); color:var(--muted); font-size:14px; text-align:center; padding:18px 20px; margin-top:10px}