:root{--bg:#0b1220;--bg2:#0e1628;--card:#131c31;--muted:#7e8aa6;--text:#e9eefc;--accent:#46c2ff;--accent2:#7b61ff;--ok:#22c55e;--warn:#f59e0b;--err:#ef4444;--shadow:0 10px 30px rgba(0,0,0,.3)}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(180deg,#0b1220,#0b1220 40%,#0e1628);color:var(--text);line-height:1.6}
a{color:var(--accent);text-decoration:none;transition:.2s}
a:hover{color:#79ddff}
img{max-width:100%;display:block;border-radius:12px}
.container{width:min(1200px,92%);margin:0 auto}
.header{position:sticky;top:0;z-index:50;background:rgba(11,18,32,.9);backdrop-filter:blur(8px);box-shadow:var(--shadow)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:40px;height:40px;border-radius:8px}
.brand .title{font-weight:800;letter-spacing:.3px}
.navlinks{display:flex;gap:18px;align-items:center}
.navlinks a{padding:10px 14px;border-radius:10px;color:#dfe7ff}
.navlinks a.active,.navlinks a:hover{background:linear-gradient(120deg,rgba(70,194,255,.18),rgba(123,97,255,.18))}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;background:linear-gradient(120deg,var(--accent),var(--accent2));color:#0b1220;font-weight:700;box-shadow:0 8px 20px rgba(70,194,255,.35)}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;padding:40px 0}
.hero h1{font-size:44px;line-height:1.15;margin:0 0 10px}
.hero p{color:var(--muted);margin:0 0 20px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 24px}
.badge{font-size:12px;padding:6px 10px;border-radius:999px;background:#1b2742;color:#bcd1ff;border:1px solid #26365b}
.grid{display:grid;gap:22px}
.grid.cards{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid #1d2744;border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.card:hover{transform:translateY(-2px)}
.card .meta{color:#9fb1d6;font-size:13px}
.sidebar{position:sticky;top:86px}
.footer{margin-top:40px;background:#0a0f1c;border-top:1px solid #1c2744}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:20px;padding:28px 0}
.footer a{color:#b9c9f2}
.footer .legal a{display:block;margin:6px 0}
.section{padding:34px 0}
.section h2{margin:0 0 12px;font-size:28px}
.banner{border:1px dashed #29406d;border-radius:16px;padding:18px;background:rgba(34,48,78,.5)}
.post-header{display:grid;grid-template-columns:1fr .35fr;gap:24px;align-items:start}
.post-header .info{background:var(--card);padding:16px;border-radius:14px;border:1px solid #1d2744}
.post{max-width:860px;margin:0 auto}
.post h1{font-size:36px;margin:12px 0}
.post .cover{margin:10px 0 18px}
.kicker{color:#9ecaff;font-weight:700;letter-spacing:.8px;text-transform:uppercase;font-size:12px}
.tags{display:flex;gap:8px;margin:12px 0 0}
.tag{font-size:12px;padding:6px 10px;border-radius:999px;background:#15213c;color:#c8d7ff;border:1px solid #22345d}
.breadcrumbs{font-size:13px;color:#9ab1e3;margin:6px 0 10px}
.list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.list li a{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:12px;background:#111a2f;border:1px solid #1d2744}
.hero-image{border-radius:16px;overflow:hidden}
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #26365b;background:#0e1526;color:var(--text)}
.input:focus{outline:2px solid rgba(70,194,255,.4)}
.textarea{min-height:140px;resize:vertical}
.socials{display:flex;gap:12px;align-items:center}
.socials a{width:36px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#12203b;border:1px solid #20355e}
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;background:#0c1528;border:1px solid #22365f;border-radius:14px;padding:16px;box-shadow:var(--shadow);display:none;z-index:9999}
.cookie-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.cookie-actions .btn{padding:10px 14px;border-radius:10px}
.btn.secondary{background:#16223d;color:#cfe1ff;font-weight:600;border:1px solid #233a66;box-shadow:none}
.btn.ghost{background:transparent;color:#bcd1ff;border:1px solid #2a426f}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:10000}
.modal .box{background:#0e1628;border:1px solid #2a3f6a;border-radius:14px;max-width:520px;width:92%;padding:18px}
.modal h3{margin:0 0 8px}
.flex{display:flex;align-items:center;gap:10px}
.switch{position:relative;width:46px;height:26px;background:#23365f;border-radius:999px;transition:.2s}
.switch input{display:none}
.switch i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#9bb7ff;transition:.2s}
.switch input:checked + i{left:23px;background:#46c2ff}
.thanks{position:fixed;right:16px;bottom:16px;background:#0c192e;border:1px solid #2c4472;border-radius:12px;padding:14px 16px;box-shadow:var(--shadow);display:none;z-index:10001}
.facts{margin-top:24px;border-top:1px solid #23335a;padding-top:18px}
.facts h3{margin:0 0 8px}
.icon{width:18px;height:18px;display:inline-block}
@media(max-width:960px){
.hero{grid-template-columns:1fr}
.post-header{grid-template-columns:1fr}
.grid.cards{grid-template-columns:1fr 1fr}
.footer .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
.grid.cards{grid-template-columns:1fr}
.navlinks{gap:8px}
.hero h1{font-size:34px}
}