:root{
  --bg: #f7f8fb;
  --card: #ffffff;
  --accent: #2b6cb0;
  --text: #1f2937;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; color:var(--text); background:var(--bg); line-height:1.6;}
.container{max-width:980px;margin:0 auto;padding:24px;}
.site-header{background:linear-gradient(90deg,var(--accent),#2c5282); color:white; padding:18px 0;}
.site-header h1{margin:0;font-size:28px;}
.tagline{opacity:0.95;margin:6px 0 0;font-size:14px;}
nav{margin-top:10px;}
nav a{color:rgba(255,255,255,0.95);text-decoration:none;margin-right:14px;font-weight:600;}
.hero{background:var(--card);padding:28px;border-radius:12px;box-shadow:0 6px 18px rgba(10,20,40,0.06);margin-top:18px;}
.hero h2{margin-top:0;}
.btn{display:inline-block;margin-top:12px;padding:10px 16px;border-radius:8px;background:var(--accent);color:white;text-decoration:none;}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:18px;}
.card{background:var(--card);padding:18px;border-radius:10px;box-shadow:0 6px 18px rgba(10,20,40,0.04);}
.site-footer{padding:20px 0;margin-top:28px;text-align:center;font-size:14px;color:#475569;background:transparent;}
.urdu{font-family: "Noto Nastaliq Urdu", "Noto Sans", serif; font-style:italic;}
@media (max-width:600px){.site-header h1{font-size:20px} .container{padding:16px}}