/* Simple, clean design with easy theming */
:root{
  --brand:#1b6cff;
  --bg:#f7faff;
  --text:#222;
  --muted:#4a4a4a;
  --maxw: 960px;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.65;color:var(--text);background:#fff}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1rem}
a{color:var(--brand);text-decoration:none}
.site-header{background:var(--bg);border-bottom:1px solid #e6eefc}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0}
.brand{font-weight:700;font-size:1.1rem}
nav ul{display:flex;gap:.75rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav a{padding:.45rem .7rem;border-radius:.4rem}
nav a.active, nav a:hover{background:rgba(27,108,255,.1)}
.hero{padding:3rem 0;text-align:center}
.hero h1{margin:.2rem 0;font-size:clamp(1.8rem,4vw,2.4rem)}
.hero p{color:var(--muted);margin:.3rem 0 1.2rem}
.cta{display:inline-block;padding:.8rem 1.2rem;border-radius:.5rem;background:var(--brand);color:#fff;font-weight:600}
section{margin:2rem 0}
h2{margin:.2rem 0 1rem;color:var(--brand);font-size:clamp(1.25rem,3vw,1.6rem)}
.grid{display:grid;gap:1rem}
.grid.cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{border:1px solid #eee;border-radius:.6rem;padding:1rem;background:#fff}
footer{background:#f7f7f8;padding:1.2rem 0;margin-top:2rem;color:#666;text-align:center;font-size:.95rem}
.note{color:var(--muted);font-size:.95rem}
hr{border:0;border-top:1px solid #eee;margin:1.5rem 0}
ul{padding-left:1.1rem}