:root{--bg:#334155;--panel:rgba(51,65,85,.92);--panel2:#1e293b;--line:rgba(203,213,225,.38);--text:#f8fafc;--muted:#e2e8f0;--blue:#3b82f6;--blue2:#60a5fa;--light:#e2e8f0;--dark:#0f172a}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at 20% 10%,rgba(59,130,246,.16),transparent 32%),linear-gradient(180deg,#1e293b,#334155);min-height:100vh}
body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 80% 0%,rgba(20,184,166,.1),transparent 30%);pointer-events:none}
a{color:inherit;text-decoration:none}button,input,select{font:inherit}.container{width:min(1180px,calc(100% - 32px));margin:0 auto}
header{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);background:rgba(30,41,59,.92);backdrop-filter:blur(18px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0}.brand{display:flex;align-items:center;gap:12px}.logo{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--blue);font-weight:800}.domain{color:var(--muted);font-size:12px}nav{display:flex;gap:24px;font-size:14px}nav a{color:var(--muted)}nav a:hover,nav a.active{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;border-radius:13px;padding:11px 16px;font-weight:700;transition:.18s ease}.primary{background:var(--blue);color:#fff}.primary:hover{background:var(--blue2);transform:translateY(-1px)}.secondary{background:var(--light);color:var(--dark)}.secondary:hover{background:#fff;transform:translateY(-1px)}
main{position:relative;z-index:1}.page{padding:48px 0}.grid-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{border:1px solid var(--line);background:var(--panel);border-radius:28px;box-shadow:0 22px 55px rgba(0,0,0,.18);padding:24px}.inner{border:1px solid rgba(203,213,225,.25);background:var(--panel2);border-radius:20px;padding:18px}.click-card{transition:.2s ease}.click-card:hover{transform:translateY(-4px);border-color:rgba(203,213,225,.7)}
.badge{display:inline-flex;gap:8px;align-items:center;border:1px solid #94a3b8;background:var(--light);color:#1e293b;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.badge:before{content:"";width:6px;height:6px;border-radius:999px;background:#14b8a6}
h1{margin:22px 0 0;font-size:clamp(42px,7vw,72px);line-height:.98;letter-spacing:-.04em}h2{margin:16px 0 0;font-size:clamp(30px,4vw,42px);letter-spacing:-.025em}h3{margin:0;font-size:24px}p{color:var(--muted);line-height:1.7}.lead{max-width:680px;font-size:18px;margin-top:24px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px}.stat{background:var(--light);color:var(--dark);border:1px solid #94a3b8;border-radius:20px;padding:18px}.stat b{display:block;font-size:26px}.small{font-size:13px;color:#cbd5e1}.platforms{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.platform{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);font-size:13px}.price{color:#fff;font-weight:800;font-size:24px}.field,select{width:100%;margin-top:8px;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:13px;padding:13px 14px;outline:none}select{width:auto;background:var(--light);color:var(--dark)}
footer{margin-top:48px;border-top:1px solid var(--line);padding:28px 0;color:var(--muted);font-size:14px}.footer-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.footer-links{display:flex;gap:20px}.media-box{min-height:160px;border-radius:20px;background:var(--panel2);padding:18px;display:flex;justify-content:space-between;align-items:flex-start}.video{aspect-ratio:16/9;min-height:auto}.tag{background:var(--light);color:var(--dark);border-radius:999px;padding:5px 10px;font-size:12px}pre{white-space:pre-wrap;overflow:auto;background:var(--panel2);padding:18px;border-radius:18px}.warning{border:1px solid #b45309;background:rgba(120,53,15,.38);color:#fef3c7;border-radius:18px;padding:16px}
@media(max-width:860px){.grid-hero,.grid-2,.grid-3{grid-template-columns:1fr}nav{display:none}.stats{grid-template-columns:1fr}.header-inner{align-items:flex-start}}