:root{--bg:#0b1020;--bg2:#0f172a;--card:#111a30;--line:#1e2a44;--txt:#e8ecf5;--mut:#9fb0cc;--brand:#3b82f6;--brand2:#22d3ee;--accent:#f59e0b;--ok:#22c55e;--radius:16px;--maxw:1160px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:linear-gradient(180deg,#0b1020,#0b1226 40%,#0a0f1f);color:var(--txt);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
header.site{position:sticky;top:0;z-index:50;background:rgba(11,16,32,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:.2px}
.brand .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--brand),var(--brand2));display:grid;place-items:center;font-weight:900;color:#04121f}
.nav-links{display:flex;gap:22px;font-size:14px;color:var(--mut)}
.nav-links a:hover{color:#fff}
.nav-cta{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#04121f;font-weight:700;padding:9px 16px;border-radius:10px;font-size:14px}
@media(max-width:760px){.nav-links{display:none}}
.hero{padding:64px 0 40px;text-align:center}
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.35);color:#bcd4ff;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600}
.hero h1{font-size:clamp(30px,5vw,52px);line-height:1.12;margin:18px 0 12px;font-weight:900;letter-spacing:-.5px}
.hero h1 .g{background:linear-gradient(135deg,var(--brand2),var(--brand));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{color:var(--mut);font-size:clamp(16px,2.4vw,20px);max-width:720px;margin:0 auto 26px}
.btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:12px;font-weight:700;font-size:15px;cursor:pointer;border:1px solid transparent;transition:.18s}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#04121f}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(34,211,238,.25)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--txt)}
.btn-ghost:hover{border-color:var(--brand);color:#fff}
.section{padding:46px 0}
.section h2{font-size:clamp(24px,3.6vw,34px);font-weight:800;margin:0 0 8px;text-align:center}
.section .sub{color:var(--mut);text-align:center;max-width:640px;margin:0 auto 34px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.card{background:linear-gradient(180deg,var(--card),#0d1526);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:12px;transition:.2s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-4px);border-color:rgba(59,130,246,.55);box-shadow:0 14px 40px rgba(3,8,20,.55)}
.card .tag{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.5px;padding:4px 10px;border-radius:6px;background:rgba(34,211,238,.12);color:#7fe6f5;border:1px solid rgba(34,211,238,.3)}
.card .tag.php{background:rgba(245,158,11,.12);color:#f7c469;border-color:rgba(245,158,11,.3)}
.card h3{margin:0;font-size:18px;font-weight:800;line-height:1.3}
.card p{margin:0;color:var(--mut);font-size:14px;flex:1}
.card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.price{font-size:20px;font-weight:900;color:#fff}
.price small{font-size:12px;font-weight:600;color:var(--mut)}
.card .go{font-size:13px;font-weight:700;color:var(--brand2)}
/* product page */
.prod-hero{padding:46px 0 8px}
.crumbs{font-size:13px;color:var(--mut);margin-bottom:18px}
.crumbs a:hover{color:#fff}
.prod-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:34px;align-items:start}
@media(max-width:880px){.prod-grid{grid-template-columns:1fr}}
.prod-hero h1{font-size:clamp(26px,4vw,40px);font-weight:900;margin:8px 0 14px;letter-spacing:-.4px}
.prod-hero .lead{color:var(--mut);font-size:18px;margin-bottom:22px}
.feat{list-style:none;padding:0;margin:22px 0;display:grid;gap:12px}
.feat li{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.02);border:1px solid var(--line);padding:12px 14px;border-radius:12px}
.feat li .ic{flex:none;width:22px;height:22px;border-radius:6px;background:rgba(34,197,94,.15);color:var(--ok);display:grid;place-items:center;font-weight:900;font-size:13px;margin-top:1px}
.buybox{position:sticky;top:88px;background:linear-gradient(180deg,var(--card),#0c1424);border:1px solid var(--line);border-radius:18px;padding:24px}
.buybox .ptag{font-size:12px;font-weight:800;letter-spacing:.5px;color:#7fe6f5}
.buybox .bp{font-size:38px;font-weight:900;margin:6px 0 2px}
.buybox .bp small{font-size:14px;color:var(--mut);font-weight:600}
.buybox .note{font-size:13px;color:var(--mut);margin:4px 0 18px}
.buybox .btn{width:100%;justify-content:center;margin-bottom:10px}
.inc{list-style:none;padding:0;margin:16px 0 0;font-size:13.5px;color:var(--mut);display:grid;gap:8px}
.inc li:before{content:"✓";color:var(--ok);font-weight:900;margin-right:8px}
.desc h2{font-size:22px;margin:26px 0 10px}
.desc p{color:var(--cbd,#c3cee0)}
footer.site{border-top:1px solid var(--line);margin-top:40px;padding:38px 0;color:var(--mut);font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}
footer .brand{color:#fff;margin-bottom:10px}
footer a:hover{color:#fff}
.foot-links{display:grid;gap:8px}
.copy{border-top:1px solid var(--line);margin-top:26px;padding-top:18px;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
/* modal */
.modal{position:fixed;inset:0;background:rgba(3,7,18,.72);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:100;padding:18px}
.modal.open{display:flex}
.modal-box{background:#0f1830;border:1px solid var(--line);border-radius:18px;max-width:440px;width:100%;padding:26px;position:relative}
.modal-box h3{margin:0 0 4px;font-size:20px}
.modal-box p.m{color:var(--mut);font-size:14px;margin:0 0 18px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--mut);margin-bottom:6px}
.field input,.field textarea{width:100%;background:#0b1327;border:1px solid var(--line);border-radius:10px;padding:11px 13px;color:#fff;font-size:15px;font-family:inherit}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brand)}
.close{position:absolute;top:14px;right:16px;color:var(--mut);font-size:22px;cursor:pointer;background:none;border:none}
.msg{font-size:14px;padding:10px 12px;border-radius:10px;margin-bottom:12px;display:none}
.msg.ok{display:block;background:rgba(34,197,94,.12);color:#7ee6a0;border:1px solid rgba(34,197,94,.3)}
.msg.err{display:block;background:rgba(239,68,68,.12);color:#f6a5a5;border:1px solid rgba(239,68,68,.3)}
.trust{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:30px;color:var(--mut);font-size:14px}
.trust span{display:inline-flex;align-items:center;gap:8px}