:root{
  --navy:#0D1B2A;
  --blue:#1B4D8C;
  --teal:#2E8C92;
  --slate:#4B5563;
  --silver:#E5E7EB;
  --white:#F8FAFC;
}
*{box-sizing:border-box}
body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin:0; background:var(--white); color:#111827;
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
header{
  background:var(--navy); color:var(--white);
  padding:0.9rem 1.4rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.brand{
  display:flex; align-items:center; gap:0.65rem; min-width:260px;
}
.brand img{width:34px; height:34px; border-radius:10px}
.brand .name{display:flex; flex-direction:column; line-height:1.05}
.brand .name strong{font-size:1rem; color:var(--white)}
.brand .name span{font-size:0.8rem; color:#cbd5e1}
nav ul{list-style:none; display:flex; gap:0.9rem; margin:0; padding:0; flex-wrap:wrap}
nav a{color:#e5e7eb; font-size:0.92rem}
main{max-width:1100px; margin:0 auto; padding:2.25rem 1.25rem}
.hero{
  display:grid; grid-template-columns: 1.2fr 0.8fr;
  gap:1.5rem; align-items:center;
  padding:1.4rem; border-radius:18px; background:#ffffff;
  box-shadow:0 1px 3px rgba(15,23,42,0.10);
}
.hero h1{margin:0 0 0.5rem 0; color:var(--navy); font-size:2rem}
.hero p{margin:0.4rem 0; color:var(--slate); font-size:1rem; line-height:1.55}
.pills{display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.8rem}
.pill{
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:0.35rem 0.65rem; border-radius:999px;
  background:#eef2ff; color:#1e3a8a; font-size:0.85rem;
}
.ctas{display:flex; gap:0.75rem; flex-wrap:wrap; margin-top:1rem}
.btn{
  display:inline-block; padding:0.65rem 1rem; border-radius:999px;
  font-size:0.95rem; text-decoration:none;
}
.btn.primary{background:var(--blue); color:white}
.btn.secondary{background:var(--silver); color:#111827}
.cardgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; margin-top:1rem}
.card{
  background:white; border-radius:16px; padding:1.1rem;
  box-shadow:0 1px 3px rgba(15,23,42,0.10);
}
.card h3{margin:0 0 0.4rem 0; color:var(--navy)}
.card p{margin:0.2rem 0 0.8rem 0; color:var(--slate); line-height:1.5}
.kicker{color:var(--teal); font-weight:700; letter-spacing:0.02em; font-size:0.9rem}
.section{margin-top:2.2rem}
.section h2{margin:0 0 0.6rem 0; color:var(--navy); font-size:1.35rem}
.section p{color:var(--slate); line-height:1.65}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:900px){ .hero{grid-template-columns:1fr} .two-col{grid-template-columns:1fr}}
.figure{
  border:1px dashed #cbd5e1; border-radius:14px; padding:1rem; background:#fbfdff;
}
.figure img{max-width:100%; height:auto}
.figure small{display:block; margin-top:0.5rem; color:#64748b}
footer{
  margin-top:2.5rem; background:var(--navy); color:#cbd5e1;
  padding:1.2rem 1.4rem;
}
.footer-top{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.footer-brand{display:flex; align-items:center; gap:0.6rem}
.footer-brand img{width:24px; height:24px; border-radius:8px}
.footer-links a{color:#e5e7eb; margin-right:0.9rem; font-size:0.9rem}
.footer-copy{margin-top:0.7rem; color:#94a3b8; font-size:0.85rem; text-align:center}
hr.sep{border:none; border-top:1px solid rgba(148,163,184,0.25); margin:1rem 0}

/* Enhanced layout helpers */
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.mini-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:1rem}
@media (max-width: 900px){.grid-4{grid-template-columns:1fr}}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
.button{display:inline-block;background:#14213d;color:#fff;padding:.6rem .9rem;border-radius:999px;text-decoration:none}
.button.secondary{background:#0066cc}
.button:hover{filter:brightness(0.95)}