:root{ --bg:#0b0e14; --panel:#0f1421; --muted:#9aa4b2; --text:#e7ecf3; --accent:#7c4dff; --accent-2:#00e5ff; --radius:16px; --glow:0 0 24px rgba(124,77,255,.35), 0 0 48px rgba(0,229,255,.15); --grid: radial-gradient(circle at 50% -20%, rgba(124,77,255,.2), transparent 40%), radial-gradient(circle at 80% 10%, rgba(0,229,255,.18), transparent 35%), linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)); }
:root[data-theme="light"]{ --bg:#f9fafb; --panel:#ffffff; --muted:#555; --text:#111; --accent:#7c4dff; --accent-2:#00bcd4; --glow:none; --grid:none }
*{ box-sizing:border-box } html,body{ height:100% }
body{ margin:0; font-family:Inter, system-ui, sans-serif; color:var(--text); background:var(--bg); background-image:var(--grid); background-attachment:fixed; transition:background .4s ease, color .4s ease }
.pixel{ font-family:'Press Start 2P', system-ui, monospace }
.container{ max-width:1120px; margin:0 auto; padding:0 16px }
.site-header{ position:sticky; top:0; z-index:100; backdrop-filter: blur(10px); background: linear-gradient(180deg, rgba(11,14,20,.75), rgba(11,14,20,.30)); border-bottom:1px solid rgba(255,255,255,.06) }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0 }
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text) }
.nav-desktop{ display:none; align-items:center; gap:14px }
.lang-switch{ display:flex; align-items:center; gap:6px; margin-left:8px }
.hamburger{ width:40px; height:40px; display:flex; flex-direction:column; justify-content:center; gap:6px; background:transparent; border:1px solid rgba(255,255,255,.12); border-radius:10px }
.hamburger span{ height:2px; background:var(--text); display:block; margin:0 8px }
.nav-mobile{ display:flex; flex-direction:column; gap:10px; padding:12px 16px; border-top:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.25) }
.link-neo{ color:var(--muted); text-decoration:none; font-weight:800; transition:.2s }
.link-neo:hover{ color:var(--text); text-shadow:0 0 10px rgba(0,229,255,.6), 0 0 18px rgba(124,77,255,.45) }
.btn{ display:inline-block; padding:12px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.08); text-decoration:none; font-weight:800; letter-spacing:.3px; transition:.25s ease }
.btn:hover{ transform: translateY(-2px) }
.btn-primary{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0a0e17; box-shadow: var(--glow) }
.btn-ghost{ color:var(--text); background: rgba(255,255,255,.04) }
.hero{ padding:64px 0 40px }
.hero-inner{ display:grid; grid-template-columns:1fr; gap:24px; align-items:center }
.badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background: rgba(124,77,255,.12); border:1px solid rgba(124,77,255,.35); color:#cbbcff; font-weight:700; text-transform:uppercase; font-size:.72rem; letter-spacing:.8px }
.lead{ color:var(--muted); font-size:1.05rem; max-width:60ch }
.cta-row{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap }
.hero-card{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); padding:18px; border-radius:var(--radius) }
.grid{ display:grid; gap:14px }
.kpi{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-radius:12px; background: rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.06) }
.hero-card .kpi span{ font-size:.72rem } .hero-card .kpi strong{ font-family:'Press Start 2P', system-ui, monospace; font-size:.82rem }
section{ padding:56px 0 }
.section-title{ font-family:'Press Start 2P', system-ui, monospace; font-size: clamp(1.1rem, 2.6vw, 1.5rem); margin:0 0 14px }
.muted{ color:var(--muted) }
.features{ display:grid; grid-template-columns:1fr; gap:16px }
.card{ background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:16px; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease }
.card:hover{ transform: translateY(-6px) scale(1.01); box-shadow: 0 10px 30px rgba(0,0,0,.3), var(--glow); border-color: rgba(124,77,255,.4) }
.card h3{ margin:6px 0 8px; font-family:'Press Start 2P', system-ui, monospace; font-size:.95rem }
.specs{ display:grid; gap:8px; margin-top:8px }
.specs li{ list-style:none; color:var(--muted) }
.pricing{ display:grid; grid-template-columns:1fr; gap:16px }
.price{ padding:20px; border-radius:var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.10) }
.price h4{ font-family:'Press Start 2P', system-ui, monospace; margin:0 0 6px; font-size:1rem }
.amount{ font-size:1.6rem; font-weight:800 } .per{ font-size:.9rem; color:var(--muted) }
.input{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); color:var(--text) }
footer{ padding:28px 0; color:var(--muted); font-size:.95rem } footer .foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap } .foot-links a{ margin-left:12px }
@media (min-width: 900px){
  .nav-desktop{ display:flex }
  .hamburger{ display:none }
  .hero-inner{ grid-template-columns: 1.2fr 1fr }
  .features{ grid-template-columns: repeat(3, 1fr) }
  .pricing{ grid-template-columns: repeat(2, 1fr) }
}