body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#111827;color:#e5e7eb;line-height:1.6}
header{background:linear-gradient(135deg,#1f2937,#312e81);padding:34px 20px;text-align:center}
header h1{margin:0;font-size:34px}
header p{margin:12px auto 0;max-width:760px;color:#c7d2fe;font-size:17px}
nav{background:#0f172a;padding:12px;text-align:center;border-bottom:1px solid #263244}
nav a{color:#dbeafe;text-decoration:none;margin:0 12px;font-weight:600}
main{max-width:1050px;margin:28px auto;padding:0 18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{background:#1f2937;border:1px solid #374151;border-radius:16px;padding:20px;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.card h2{margin-top:0;color:#facc15;font-size:21px}
.card a{color:#93c5fd;text-decoration:none;font-weight:700}
.tag{display:inline-block;background:#374151;color:#bfdbfe;border-radius:999px;padding:5px 10px;font-size:12px;margin-bottom:10px}
.hero{background:#172554;border:1px solid #1d4ed8;border-radius:18px;padding:24px;margin-bottom:20px}
.hero h2{margin-top:0;color:#93c5fd}
.article{background:#1f2937;border:1px solid #374151;border-radius:16px;padding:24px;margin-bottom:18px}
.article h2{color:#facc15}
footer{text-align:center;color:#9ca3af;padding:30px 10px;border-top:1px solid #263244;margin-top:40px}