:root{
  --bg:#0B0B10; --layer:#0E0E15; --ink:#EAEAF3; --muted:#A6A6BC; --accent:#6AF1FF; --accent2:#8B5CF6;
  --card:rgba(255,255,255,.04); --bd:rgba(255,255,255,.12);
  --wrap:1200px; --rad:16px; --shadow:0 10px 40px rgba(0,0,0,.35);
  --mx:0px; --my:0px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background: radial-gradient(1200px 800px at calc(70% + var(--mx)/10) calc(-10% + var(--my)/10), #111827 0%, #0B0B10 50%, #09090D 100%);
  color:var(--ink); overflow-x:hidden;
}

/* CANVAS LAYERS */
#fx-aurora, #fx-grid{ position:fixed; inset:0; z-index:0; pointer-events:none }
#nebula{
  position:fixed; inset:-15% -10% -10% -10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(40% 40% at calc(70% + var(--mx)/50) 20%, rgba(138,255,255,.20), transparent 60%),
    radial-gradient(30% 30% at calc(25% + var(--mx)/60) 10%, rgba(139,92,246,.20), transparent 60%),
    radial-gradient(28% 28% at 80% calc(70% + var(--my)/50), rgba(99,102,241,.14), transparent 60%);
  filter: blur(40px) saturate(120%);
  animation: nebula 18s ease-in-out infinite alternate;
}
.content-layer{ position:relative; z-index:2 }

@keyframes nebula{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-3%,2%,0) scale(1.04)}
}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}

/* HEADER */
.site-header{
  position:sticky; top:0; z-index:5; backdrop-filter:saturate(110%) blur(10px);
  background:linear-gradient(180deg, rgba(12,12,18,.80), rgba(12,12,18,.40));
  border-bottom:1px solid var(--bd);
  transform:translate3d(calc(var(--mx)/120), calc(var(--my)/120), 0);
}
.site-header .wrap{display:flex; align-items:center; height:66px; gap:18px}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:800; letter-spacing:.3px;}
.logo-dot{width:12px; height:12px; border-radius:50%; background: radial-gradient(circle at 30% 30%, var(--accent), var(--accent2)); box-shadow: 0 0 14px rgba(106,241,255,.6), 0 0 28px rgba(139,92,246,.4);}

.nav{display:flex; gap:16px; margin-left:auto}
.nav a{color:var(--muted); text-decoration:none; font-weight:600; padding:8px 10px; border-radius:10px;}
.nav a:hover{color:var(--ink); background:rgba(255,255,255,.06)}

.lang{position:relative; margin-left:12px}
#langBtn{background:rgba(255,255,255,.06); border:1px solid var(--bd); color:var(--ink); padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:700;}
.menu{position:absolute; right:0; top:110%; min-width:200px; background:#0E0E15; border:1px solid var(--bd); border-radius:12px; padding:8px; display:none; box-shadow:var(--shadow)}
.menu.show{display:block}
.menu li{list-style:none; padding:10px 12px; border-radius:8px; cursor:pointer; color:var(--muted)}
.menu li:hover{background:rgba(255,255,255,.06); color:var(--ink)}

/* HERO */
.hero{position:relative; padding:120px 0 80px}
.hero-wrap{max-width:900px}
h1{font-size:clamp(2rem, 4vw, 3.3rem); line-height:1.1; margin:0 0 10px}
.lead{font-size:clamp(1rem,1.4vw,1.2rem); color:var(--muted); margin:10px 0 24px}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-block; border-radius:12px; padding:12px 16px; font-weight:800; text-decoration:none; border:1px solid var(--bd); color:var(--ink); background:rgba(255,255,255,.04); cursor:pointer;}
.btn-primary{background:linear-gradient(90deg, rgba(106,241,255,.25), rgba(139,92,246,.18)); border-color:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.mini-badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.mini-badges span{font-size:.85rem; color:#BFC0D6; background:rgba(255,255,255,.06); padding:8px 10px; border-radius:999px; border:1px solid var(--bd)}

/* SECTIONS */
.section{padding:80px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))}
.section-title{font-size:1.8rem; margin:0 0 8px}
.section-sub{color:var(--muted); margin:0 0 24px}

/* CARDS */
.grid{display:grid; gap:18px}
.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card, .plan, .contact{background:var(--card); border:1px solid var(--bd); border-radius:var(--rad); padding:18px; box-shadow:var(--shadow)}
.card h3{margin:0 0 6px; font-size:1.1rem}
.card p{margin:0; color:var(--muted)}

/* PLANS */
.plans{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.plan h3{margin:0 0 10px}
.plan ul{margin:0 0 18px; padding-left:18px; color:var(--muted)}
.plan.popular{border:1px solid rgba(106,241,255,.55); position:relative}
.plan.popular .tag{position:absolute; top:-12px; right:12px; font-size:.8rem; font-weight:900; color:#021014; padding:6px 10px; border-radius:10px; background:linear-gradient(90deg, #6AF1FF, #8B5CF6); box-shadow: 0 10px 28px rgba(0,0,0,.38);}

/* CONTACT */
.contact{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.contact label{display:grid; gap:6px}
.contact label.full{grid-column:1/-1}
.contact input, .contact textarea{background:#0F0F16; border:1px solid var(--bd); color:var(--ink); border-radius:10px; padding:12px; outline:none;}
.contact input:focus, .contact textarea:focus{border-color:#6AF1FF}
.tiny{font-size:.85rem; color:var(--muted)}

/* FOOTER */
.site-footer{border-top:1px solid var(--bd); padding:24px 0; color:var(--muted)}
.site-footer .wrap{display:flex; align-items:center; justify-content:space-between}
.to-top{color:var(--muted); text-decoration:none; border:1px solid var(--bd); padding:6px 10px; border-radius:8px}
.to-top:hover{color:var(--ink); background:rgba(255,255,255,.06)}

/* ENTRANCE FX */
.fx-reveal{opacity:0; transform:translateY(12px)}
.fx-card{opacity:0; transform:translateY(16px)}
.fx-step{opacity:0; transform:translateY(16px)}

@media (max-width:900px){ .nav{display:none} }
@media (max-width:720px){ .contact{grid-template-columns:1fr} }