:root{
  --bg:#f5f7fa;
  --card:#ffffff;
  --accent:#1e88e5;
  --muted:#6b7280;
  --max-width:1000px;
}
*{box-sizing:border-box}
body{font-family:Segoe UI,Roboto,Arial, sans-serif;margin:0;background:var(--bg);color:#0f1724}
.site-header{background:linear-gradient(90deg, #fff, #f8fbff);padding:28px 16px;text-align:center;border-bottom:1px solid #e6eefc}
.site-header h1{margin:0;font-size:1.6rem}
.site-header p{margin:8px 0 0;color:var(--muted)}
.container{max-width:var(--max-width);margin:28px auto;padding:0 16px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.card{background:var(--card);padding:20px;border-radius:12px;box-shadow:0 6px 18px rgba(20,30,60,0.06);display:flex;flex-direction:column;justify-content:space-between}
.card h2{margin:0 0 10px;font-size:1.1rem}
.card p{margin:0 0 16px;color:var(--muted)}
.btn{display:inline-block;padding:10px 14px;background:var(--accent);color:#fff;border-radius:8px;text-decoration:none}
.site-footer{text-align:center;color:var(--muted);padding:18px 8px;border-top:1px solid #e6eefc}
.content section{margin-bottom:18px}
.content h2{margin-top:0}
.link-back{display:inline-block;margin:8px 0;color:var(--accent);text-decoration:none}
@media (max-width:420px){.site-header p{font-size:0.95rem}.site-header h1{font-size:1.2rem}}