*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;line-height:1.8;color:#1e293b;background:radial-gradient(circle at 12% 8%,rgba(37,99,235,.20),transparent 38%),radial-gradient(circle at 88% 18%,rgba(250,204,21,.20),transparent 36%),radial-gradient(circle at 50% 95%,rgba(20,184,166,.22),transparent 40%),linear-gradient(135deg,#eff6ff,#fefce8 55%,#ecfdf5);background-attachment:fixed}
a{color:#1d4ed8}
header{position:sticky;top:0;z-index:50;background:linear-gradient(90deg,#0f2a6b,#1d4ed8,#0d9488);color:#fff;padding:10px 22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;box-shadow:0 4px 18px rgba(15,42,107,.35)}
header img{height:44px;display:block}
header nav{display:flex;flex-wrap:wrap;gap:6px}
header nav a{color:#fff;text-decoration:none;font-weight:600;padding:8px 16px;border-radius:30px;transition:.2s}
header nav a:hover{background:rgba(255,255,255,.22)}
.wrap{max-width:1040px;margin:28px auto;padding:0 16px}
.hero{text-align:center;padding:54px 22px;border-radius:26px;margin-bottom:26px;color:#fff;background:linear-gradient(135deg,#1e40af,#2563eb 55%,#0d9488);box-shadow:0 16px 40px rgba(30,64,175,.35);position:relative;overflow:hidden}
.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.14)}
.hero:before{width:240px;height:240px;top:-90px;left:-70px}.hero:after{width:200px;height:200px;bottom:-80px;right:-50px}
.hero h1{font-size:2.3rem;margin:0 0 10px;position:relative}.hero p{max-width:680px;margin:0 auto;font-size:1.08rem;position:relative}
.card,article{background:rgba(255,255,255,.93);border-radius:20px;padding:26px;box-shadow:0 10px 30px rgba(30,41,59,.10);margin-bottom:22px;border:1px solid rgba(255,255,255,.8)}
article h1{color:#1e40af;margin-top:8px}h2{color:#1e3a8a;border-left:5px solid #f59e0b;padding-left:12px;margin-top:30px}h3{color:#0d9488}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:22px}
.grid a{display:block;background:#fff;border-radius:18px;padding:18px;text-decoration:none;color:#334155;box-shadow:0 6px 18px rgba(37,99,235,.14);border-top:5px solid #2563eb;transition:.25s}
.grid a:hover{transform:translateY(-6px);box-shadow:0 14px 28px rgba(37,99,235,.28);border-top-color:#f59e0b}
.grid a b{font-size:1.45rem;color:#1d4ed8}.grid a small{display:block;margin-top:4px}
.tag{display:inline-block;background:#dbeafe;color:#1e3a8a;border-radius:20px;padding:2px 12px;font-size:.78rem;font-weight:600}
input{width:100%;padding:15px 20px;border-radius:40px;border:2px solid #bfdbfe;font-size:1.05rem;outline:none}input:focus{border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.18)}
table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}th{background:#dbeafe;color:#1e3a8a}td,th{padding:11px;border-bottom:1px solid #e2e8f0;text-align:left}
.ad{min-height:90px;text-align:center;color:#94a3b8;border:2px dashed #cbd5e1;border-radius:14px;padding:10px;margin:22px 0}
footer{background:linear-gradient(90deg,#0f2a6b,#1d4ed8);color:#fff;text-align:center;padding:26px 14px;margin-top:36px}footer a{color:#fde68a;margin:0 10px;text-decoration:none}
.badge{display:inline-block;background:#facc15;color:#0f2a6b;font-weight:700;border-radius:30px;padding:5px 18px;margin-bottom:14px;position:relative}
@media(max-width:600px){.hero h1{font-size:1.6rem}header{justify-content:center}}