:root{
  --indigo:#10182f;
  --navy:#162043;
  --text:#222;
  --accent:#0a8f6a;
  --gold:#c8a548;
  --bg:#ffffff;
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;margin:0;background:var(--bg);color:var(--text);line-height:1.6}
a{color:var(--accent);text-decoration:none}
header{background:linear-gradient(180deg,var(--indigo),var(--navy));color:#fff;padding:3.5rem 1rem;text-align:center}
header h1{margin:0;font-size:2.4rem}
header p{margin:.5rem 0 0;color:#d9d9e6}
nav{background:var(--navy);padding:.75rem 1rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
nav a{color:#f2f2f2;font-weight:600}
nav a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:2rem 1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
.card{border:1px solid #e8e8ef;border-radius:12px;padding:1rem;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.04)}
h2{color:var(--navy);margin-top:0}
footer{background:var(--indigo);color:#fff;text-align:center;padding:2rem 1rem;margin-top:2rem}
.cta{display:inline-block;background:var(--accent);color:#fff;padding:.75rem 1.1rem;border-radius:8px;margin-top:.5rem}
.badge{display:inline-block;padding:.25rem .5rem;background:#f5f7ff;border:1px solid #e6e9ff;border-radius:999px;color:#334; font-size:.85rem}
.hero-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
blockquote{border-left:4px solid var(--gold);margin:1rem 0;padding:.5rem 1rem;background:#fffaf0}
.small{font-size:.9rem;color:#555}
ul.clean{margin:0;padding-left:1.25rem}
hr{border:0;border-top:1px solid #eee;margin:1.5rem 0}