:root{
  --bg:#0b0f1a;
  --card:#0e1424;
  --text:#E6E6F0;
  --muted:#97A0B5;
  --blue:#00C6FF;
  --purple:#7A00FF;
  --pink:#FF3CAC;
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(122,0,255,.22), transparent 60%),
              radial-gradient(900px 500px at 110% 10%, rgba(0,198,255,.16), transparent 60%),
              linear-gradient(180deg, #05070d 0%, var(--bg) 100%);
  color:var(--text);
}
a{color:inherit; text-decoration:none}
.nav{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 24px; position:sticky; top:0; background:rgba(11,15,26,.65); backdrop-filter: blur(8px); border-bottom:1px solid rgba(122,0,255,.25)}
.brand{display:flex; align-items:center; gap:12px}
.brand span.logo{display:inline-block; width:28px; height:14px; border:2px solid transparent; border-image:linear-gradient(90deg, var(--blue), var(--purple), var(--pink)) 1; border-radius:999px; box-shadow:0 0 16px rgba(0,198,255,.35)}
.brand h1{font-size:16px; margin:0; background: linear-gradient(90deg, var(--blue), var(--purple), var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent}
.menu{display:flex; gap:14px; flex-wrap:wrap}
.menu a{padding:8px 12px; border-radius:10px; border:1px solid rgba(122,0,255,.25)}
.menu a.active, .menu a:hover{background:linear-gradient(90deg, rgba(0,198,255,.18), rgba(122,0,255,.18), rgba(255,60,172,.18))}
.container{width:min(1100px,92vw); margin:24px auto; display:grid; gap:22px}
.hero{display:grid; gap:12px; padding:28px; border-radius:var(--radius); background:linear-gradient(180deg, rgba(14,20,36,.75), rgba(14,20,36,.45)); border:1px solid rgba(0,198,255,.18)}
.hero h2{margin:0; font-size:32px; background: linear-gradient(90deg, var(--blue), var(--purple), var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow: 0 0 28px rgba(0,198,255,.35)}
.grid{display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))}
.card{padding:18px; border-radius:16px; background:rgba(14,20,36,.6); border:1px solid rgba(122,0,255,.25)}
.btn{display:inline-block; padding:12px 14px; border-radius:12px; background:linear-gradient(90deg, var(--blue), var(--purple), var(--pink)); color:white; font-weight:600; border:none}
.footer{text-align:center; padding:26px; color:var(--muted); border-top:1px solid rgba(122,0,255,.25); margin-top:28px}
.pricing{display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))}
.tier{padding:20px; border-radius:16px; background:rgba(14,20,36,.6); border:1px solid rgba(122,0,255,.25); display:flex; flex-direction:column; gap:12px}
.tier h3{margin:0 0 6px 0}
.price{font-size:28px; font-weight:800; margin:8px 0}
.list{margin:0; padding-left:18px; color:var(--text)}
.list li{margin:6px 0}
.kicker{color:var(--muted); font-size:13px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.badge{font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid rgba(0,198,255,.28); background: rgba(2,8,20,.4)}
input, textarea{width:100%; padding:12px 12px; border-radius:12px; border:1px solid rgba(122,0,255,.25); background:rgba(2,8,20,.55); color:var(--text)}
label{font-size:13px; color:var(--muted)}
form .row{display:grid; gap:12px; grid-template-columns: 1fr 1fr}
@media (max-width:720px){ form .row{grid-template-columns:1fr} }