*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;color:#e8eefc;background:radial-gradient(1200px 700px at 80% -10%,color-mix(in srgb,var(--accent2) 22%,transparent),transparent 60%),radial-gradient(900px 600px at -10% 30%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 60%),var(--bg);min-height:100vh;line-height:1.55}
a{color:inherit}
.nav{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,4vw,48px);backdrop-filter:blur(10px);background:color-mix(in srgb,var(--bg) 70%,transparent);border-bottom:1px solid color-mix(in srgb,var(--accent) 20%,transparent)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:Orbitron,Inter,sans-serif;font-weight:700;letter-spacing:.02em}
.nav nav{display:flex;align-items:center;gap:18px;font-size:14px}.nav nav a{text-decoration:none;opacity:.85}.nav nav a:hover{opacity:1}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:12px;font-weight:700;text-decoration:none;color:#05080f;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 8px 30px color-mix(in srgb,var(--accent) 35%,transparent);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px color-mix(in srgb,var(--accent) 55%,transparent)}
.btn.ghost{background:transparent;color:#e8eefc;border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:none}
.btn.sm{padding:8px 14px;border-radius:10px;font-size:13px}
main{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center;padding:72px 0 56px}
.kicker{color:var(--accent);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:12px;margin:0 0 12px}
h1{font-family:Orbitron,Inter,sans-serif;font-size:clamp(32px,5vw,56px);line-height:1.08;margin:0 0 18px;background:linear-gradient(120deg,#fff,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:18px;color:#b8c3dc;margin:0 0 26px}.cta{display:flex;flex-wrap:wrap;gap:12px}.small{font-size:13px;color:#8e9bb8}.center{text-align:center}
.art{position:relative}.logo-big{position:absolute;width:96px;height:96px;right:-18px;top:-38px;z-index:2;filter:drop-shadow(0 10px 30px color-mix(in srgb,var(--accent) 50%,transparent))}
.mock{border-radius:16px;background:var(--panel);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03) inset;overflow:hidden;transform:perspective(1200px) rotateY(-8deg) rotateX(3deg)}
.mock .bar{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06)}.mock .bar b{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}.mock .bar em{margin-left:8px;font-style:normal;font-size:12px;color:#8e9bb8}
.grid{display:grid;gap:8px;padding:12px}.g3{grid-template-columns:repeat(3,1fr)}
.tile{aspect-ratio:16/10;border-radius:8px;background:linear-gradient(160deg,#101f38,#0a1426);border:1px solid rgba(53,200,255,.18);position:relative;overflow:hidden}
.tile i{position:absolute;inset:18% 12% 30%;border-radius:4px;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 3px,transparent 3px 9px)}
.tile span{position:absolute;left:8px;bottom:6px;font-size:10px;color:#7fa3cf;font-family:ui-monospace,monospace}.tile.on{border-color:var(--accent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 40%,transparent) inset}
.lay{position:relative;height:300px;margin:12px}.w{position:absolute;border-radius:10px;overflow:hidden}.w i{display:block;height:18px;background:rgba(0,0,0,.25)}
.w.a{left:0;top:0;width:44%;height:100%;background:linear-gradient(160deg,#b98cff,#6c3bff)}.w.b{left:47%;top:0;width:53%;height:48%;background:linear-gradient(160deg,#4fffd2,#14b8a6)}
.w.c{left:47%;top:52%;width:25%;height:48%;background:linear-gradient(160deg,#7c5cff,#4b2fd6)}.w.d{left:75%;top:52%;width:25%;height:48%;border:2px dashed #4fffd2;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{background:rgba(79,255,210,.12)}}
.section{padding:56px 0}.section h2{font-family:Orbitron,Inter,sans-serif;font-size:clamp(24px,3vw,34px);margin:0 0 26px}
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.feat{padding:22px;border-radius:16px;background:color-mix(in srgb,var(--panel) 85%,transparent);border:1px solid rgba(255,255,255,.06);transition:border-color .2s,transform .2s}
.feat:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent);transform:translateY(-3px)}.feat .ic{font-size:26px;margin-bottom:8px}.feat h3{margin:0 0 6px;font-size:17px}.feat p{margin:0;color:#aab6d0;font-size:14px}
.price{display:grid;grid-template-columns:repeat(2,minmax(0,340px));justify-content:center;gap:20px;margin-bottom:16px}
.pc{padding:28px;border-radius:18px;background:var(--panel);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:6px}
.pc.hot{border-color:var(--accent);box-shadow:0 0 50px color-mix(in srgb,var(--accent) 25%,transparent)}
.plan{margin:0;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px}.amt{margin:0;font-size:44px;font-weight:800}.per{margin:0 0 8px;color:#8e9bb8;font-size:14px}
.pc ul{margin:6px 0 18px;padding-left:18px;color:#c7d1e6}.pc .btn{justify-content:center;margin-top:auto}
.faq details{padding:16px 18px;border-radius:12px;background:color-mix(in srgb,var(--panel) 80%,transparent);border:1px solid rgba(255,255,255,.06);margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:600}.faq p{margin:10px 0 0;color:#aab6d0}.reqs p{color:#aab6d0}
.foot{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;padding:36px 16px;color:#7f8aa6;font-size:13px;border-top:1px solid rgba(255,255,255,.06)}
@media (max-width:860px){.hero{grid-template-columns:1fr;padding-top:40px}.feats{grid-template-columns:1fr 1fr}.price{grid-template-columns:1fr}.nav nav a:not(.btn){display:none}.mock{transform:none}.logo-big{right:4px}}
@media (max-width:520px){.feats{grid-template-columns:1fr}}