:root{--brand:#0b57d0;--accent:#ff7a59;--bg:#0f1320;--bg2:#151a2c;--muted:#8a93a6;--text:#e8ecff;--success:#19c37d;--danger:#ff4d4f;--warning:#ffb020;--card:#11172a;--border:rgba(255,255,255,.08);--shadow:0 10px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,var(--bg),#0b1020);color:var(--text);font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:#c2d4ff;text-decoration:none}
a:hover{color:#fff}
.container{width:min(1200px,92%);margin:auto}
header{position:sticky;top:0;z-index:20;background:rgba(10,15,30,.85);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--border)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:36px;height:36px;border-radius:8px;object-fit:cover}
.brand .title{font-weight:800;letter-spacing:.4px}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;flex-wrap:wrap}
nav a{padding:10px 12px;border-radius:10px;display:inline-flex;align-items:center;gap:8px;background:transparent;transition:.2s}
nav a:hover{background:rgba(255,255,255,.06)}
.badge{display:inline-flex;align-items:center;gap:6px;background:rgba(11,87,208,.18);border:1px solid rgba(11,87,208,.4);color:#dbe6ff;padding:6px 10px;border-radius:999px;font-size:.85rem}
.cta{background:linear-gradient(90deg,var(--accent),#ff9a76);color:#1a0b0b;border:none;padding:10px 14px;border-radius:12px;font-weight:700;cursor:pointer;transition:.2s}
.cta:hover{transform:translateY(-1px)}
.hero{padding:48px 0 22px}
.hero .panel{display:grid;grid-template-columns:1.2fr .8fr;gap:22px}
.heroCard{background:radial-gradient(80% 120% at 20% 0%,rgba(11,87,208,.3),transparent),linear-gradient(180deg,var(--bg2),#0d1427);border:1px solid var(--border);border-radius:20px;padding:26px;box-shadow:var(--shadow)}
.hero h1{font-size:2.1rem;margin:0 0 10px}
.hero p.lead{margin:0 0 14px;color:#cbd3eb}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:12px}
.stat{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:16px;padding:16px;text-align:center}
.stat b{font-size:1.4rem;display:block}
.featureGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:10px}
.feature{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:16px;padding:18px;display:flex;gap:12px}
.feature svg{width:28px;height:28px;flex:0 0 28px;color:#9fd3ff}
.longtext{margin:28px 0;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid var(--border);border-radius:18px;padding:22px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.productCard{background:linear-gradient(180deg,var(--card),#0f1324);border:1px solid var(--border);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.productCard .info{padding:16px;display:flex;flex-direction:column;gap:10px}
.price{display:flex;align-items:center;justify-content:space-between}
.price b{font-size:1.2rem}
.btnRow{display:flex;gap:10px}
.btn{background:#1b2544;border:1px solid var(--border);color:#eaf0ff;padding:10px 12px;border-radius:12px;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:8px}
.btn:hover{background:#22305c}
.btn.buy{background:linear-gradient(90deg,#19c37d,#31d58e);color:#071e14}
.btn.buy:hover{filter:brightness(1.05)}
.btn.danger{background:linear-gradient(90deg,#ff4d4f,#ff7875);color:#2a0b0c}
footer{margin-top:34px;background:rgba(255,255,255,.03);border-top:1px solid var(--border)}
.footerTop{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:18px;padding:26px 0}
.footerCol h4{margin:0 0 10px}
.social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--border);margin-right:8px;background:rgba(255,255,255,.04)}
.footerBottom{padding:14px 0;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.table{width:100%;border-collapse:collapse;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--border)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.qty button{background:#1b2544;border:none;color:#fff;width:30px;height:30px;cursor:pointer}
.qty input{width:46px;text-align:center;background:transparent;border:none;color:#fff}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .full{grid-column:1/-1}
label{font-size:.9rem;color:#c8d3f2}
input,textarea{width:100%;padding:12px;border-radius:12px;border:1px solid var(--border);background:#0f152a;color:#fff}
textarea{min-height:120px;resize:vertical}
.cookie{position:fixed;left:20px;right:20px;bottom:20px;z-index:50;background:rgba(10,15,30,.96);border:1px solid var(--border);border-radius:14px;padding:16px;display:none}
.cookie.show{display:block}
.cookie .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.cookie .actions{display:flex;gap:10px}
.cookie .actions button{padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#18213f;color:#fff;cursor:pointer}
.cookie .actions .accept{background:linear-gradient(90deg,#19c37d,#31d58e);color:#071e14}
.toast{position:fixed;right:20px;bottom:20px;background:#0f1b34;border:1px solid var(--border);color:#eafff6;padding:12px 14px;border-radius:12px;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);transition:.2s;z-index:40}
.toast.show{opacity:1;transform:translateY(0)}
.countdown{display:flex;gap:10px;align-items:center;padding:10px 12px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:12px}
.countdown b{font-family:ui-monospace,Menlo,Consolas,monospace}
.notice{background:linear-gradient(90deg,rgba(255,186,0,.18),rgba(255,186,0,.08));border:1px dashed rgba(255,186,0,.5);padding:10px 12px;border-radius:12px}
.facts{margin-top:24px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:16px;padding:16px}
.facts h3{margin:0 0 10px}
.lang{font-size:.85rem;opacity:.85}
@media(max-width:980px){
.hero .panel{grid-template-columns:1fr}
.featureGrid{grid-template-columns:repeat(2,1fr)}
.stats{grid-template-columns:repeat(2,1fr)}
.grid{grid-template-columns:repeat(2,1fr)}
.footerTop{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
.grid{grid-template-columns:1fr}
.form{grid-template-columns:1fr}
.footerTop{grid-template-columns:1fr}
}