:root{--ink:#172033;--muted:#5d6880;--brand:#6d28d9;--brand2:#0f766e;--paper:#f5f7ff;--card:#fff;--line:#e2e8f0}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Segoe UI,Arial,sans-serif;line-height:1.7}
header{background:linear-gradient(125deg,#172554,#4c1d95 58%,#0f766e);padding:22px 18px 28px;color:#fff}
.wrap{max-width:1100px;margin:0 auto}.brand{font-weight:800;font-size:1.65rem;letter-spacing:.2px;margin:0 0 14px}
.banner{display:block;width:100%;max-width:700px;height:auto;max-height:392px;object-fit:cover;border-radius:16px;margin:0 auto;box-shadow:0 12px 32px #0b102a55}
nav{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px}nav a{color:#fff;text-decoration:none;font-weight:700}
main{max-width:1100px;margin:30px auto;padding:0 18px}.hero,.article,.support-panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 8px 28px #1725540b}
h1{line-height:1.25;font-size:clamp(1.8rem,4vw,2.5rem);margin:0 0 12px}h2{line-height:1.3;color:#312e81}p{color:#3e4960}.intro{font-size:1.08rem;color:var(--muted)}
.search{width:100%;padding:14px 16px;border:1px solid #cbd5e1;border-radius:12px;font-size:1rem;margin:18px 0 22px;background:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;transition:transform .18s,border-color .18s;}.item:hover{transform:translateY(-3px);border-color:#a78bfa}.item a{color:#4338ca;text-decoration:none;font-weight:750}.item a:hover{text-decoration:underline}
.pill{display:inline-block;background:#ede9fe;color:#5b21b6;padding:4px 10px;border-radius:99px;font-size:.82rem;font-weight:700;margin-bottom:12px}
.support-button{display:inline-block;background:linear-gradient(110deg,#6d28d9,#0f766e);color:white;text-decoration:none;padding:14px 24px;border-radius:12px;font-weight:800;box-shadow:0 8px 20px #6d28d933;transition:transform .18s,filter .18s}.support-button:hover{transform:translateY(-2px);filter:brightness(1.08)}
footer{text-align:center;color:#667085;padding:28px 18px;font-size:.9rem}
@media(max-width:600px){header{padding:18px 14px}main{padding:0 14px}.hero,.article,.support-panel{padding:20px}.brand{font-size:1.35rem}}