:root{
  --void:#0a0612; --void-2:#120a1f; --panel:rgba(24,14,40,.72);
  --purple:#7c3aed; --purple-l:#c084fc; --teal:#22d3ee; --pink:#f472b6;
  --text:#e9e4ff; --muted:#9c92bd; --border:rgba(124,58,237,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  background:var(--void); color:var(--text); line-height:1.6; overflow-x:hidden;
}
.bg-glow{
  position:fixed; inset:-20% -10% auto -10%; height:120vh; z-index:-1; pointer-events:none;
  background:
    radial-gradient(50% 40% at 20% 10%, rgba(124,58,237,.35), transparent 70%),
    radial-gradient(45% 35% at 80% 0%, rgba(34,211,238,.22), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, rgba(244,114,182,.12), transparent 70%);
  filter:blur(20px);
}
a{color:var(--teal); text-decoration:none}
a:hover{color:var(--purple-l)}

.nav{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(16px,5vw,64px); backdrop-filter:blur(12px);
  background:rgba(10,6,18,.72); border-bottom:1px solid var(--border);
}
.logo{font-weight:800; letter-spacing:.14em; font-size:14px}
.logo-mark{color:var(--teal); margin-right:6px}
.nav nav{display:flex; gap:22px; font-size:14px}
.nav nav a{color:var(--muted)}
.nav nav a:hover{color:var(--text)}

.hero{padding:clamp(56px,10vw,120px) 20px 60px; text-align:center}
.hero-badge{
  display:inline-block; padding:6px 14px; border-radius:999px; font-size:12px; letter-spacing:.18em;
  color:var(--teal); border:1px solid rgba(34,211,238,.4); background:rgba(34,211,238,.07);
}
.hero h1{
  margin:22px 0 0; font-size:clamp(46px,11vw,120px); line-height:.92; letter-spacing:.02em;
  font-weight:900; color:#fff; text-shadow:0 0 40px rgba(124,58,237,.55);
}
.hero h1 span{
  background:linear-gradient(100deg,var(--purple-l),var(--teal) 55%,var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{color:var(--muted); margin:18px auto 26px; max-width:620px; font-size:clamp(14px,1.6vw,17px)}
.ip-box{
  display:inline-flex; align-items:center; gap:12px; padding:10px 12px 10px 18px; border-radius:14px;
  border:1px solid var(--border); background:var(--panel); font-family:ui-monospace,Consolas,monospace;
}
#ip{font-size:clamp(13px,2vw,17px); color:#fff}
#copy-ip{
  border:0; cursor:pointer; padding:8px 14px; border-radius:10px; font-weight:700; font-size:13px;
  color:#0a0612; background:linear-gradient(100deg,var(--teal),var(--purple-l));
}
#copy-ip:hover{filter:brightness(1.1)}
.hero-actions{display:flex; gap:12px; justify-content:center; margin:26px 0 30px; flex-wrap:wrap}
.btn{
  display:inline-block; padding:13px 26px; border-radius:12px; font-weight:700; font-size:15px;
  cursor:pointer; border:1px solid transparent; transition:.15s; text-align:center;
}
.btn.primary{background:linear-gradient(100deg,var(--purple),var(--teal)); color:#08111a; border:0;
  box-shadow:0 8px 30px rgba(124,58,237,.35)}
.btn.primary:hover{transform:translateY(-1px); filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--text); border-color:var(--border)}
.btn.ghost:hover{border-color:var(--teal); color:var(--teal)}
.hero-meta{display:flex; gap:34px; justify-content:center; color:var(--muted); font-size:12px}
.hero-meta div{display:flex; flex-direction:column; align-items:center}
.hero-meta b{font-size:22px; color:#fff}

.section{padding:clamp(48px,8vw,96px) clamp(16px,5vw,64px); max-width:1180px; margin:0 auto}
.section-title{
  font-size:clamp(24px,3.4vw,36px); margin:0 0 8px; letter-spacing:.01em;
}
.section-lead{color:var(--muted); margin:0 0 34px; max-width:760px}

.cards{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{
  padding:22px; border-radius:16px; border:1px solid var(--border);
  background:linear-gradient(160deg,rgba(24,14,40,.9),rgba(10,6,18,.7));
  transition:.15s;
}
.card:hover{transform:translateY(-3px); border-color:rgba(34,211,238,.5)}
.card-icon{font-size:22px; color:var(--teal); margin-bottom:8px}
.card h3{margin:0 0 6px; font-size:17px}
.card p{margin:0; color:var(--muted); font-size:14px}

.prices{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-bottom:34px}
.price-card{
  position:relative; padding:24px; border-radius:18px; border:1px solid var(--border);
  background:linear-gradient(170deg,rgba(24,14,40,.95),rgba(10,6,18,.85));
  display:flex; flex-direction:column; gap:10px;
}
.price-card.featured{border-color:rgba(34,211,238,.65); box-shadow:0 0 0 1px rgba(34,211,238,.25),0 18px 60px rgba(34,211,238,.12)}
.ribbon{
  position:absolute; top:-11px; left:22px; padding:3px 10px; border-radius:999px; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:#08111a; background:var(--teal); font-weight:800;
}
.price-card h3{margin:0; font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.price{font-size:34px; font-weight:900; color:#fff}
.price span{font-size:13px; font-weight:600; color:var(--muted)}
.price-card ul{margin:0 0 8px; padding-left:18px; color:var(--muted); font-size:13.5px}
.price-card li{margin:3px 0}
.price-card .buy{margin-top:auto}

.form{
  max-width:640px; padding:26px; border-radius:18px; border:1px solid var(--border);
  background:var(--panel); display:flex; flex-direction:column; gap:14px;
}
.form h3{margin:0; font-size:18px}
.form-hint{margin:0; color:var(--muted); font-size:13px}
.form label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted)}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
input,select,textarea{
  padding:12px 14px; border-radius:10px; border:1px solid var(--border);
  background:rgba(10,6,18,.75); color:var(--text); font-size:15px; font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:0; border-color:var(--teal)}
textarea{resize:vertical}
.result{padding:12px 14px; border-radius:10px; font-size:14px; border:1px solid var(--border); background:rgba(10,6,18,.7)}
.result.ok{border-color:rgba(34,211,238,.6); color:#bff7ff}
.result.err{border-color:rgba(244,114,182,.6); color:#ffd0e4}

.footer{
  padding:34px clamp(16px,5vw,64px); border-top:1px solid var(--border); color:var(--muted); font-size:13px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.contacts{display:flex; gap:18px; flex-wrap:wrap}

@media (max-width:640px){
  .nav nav{display:none}
  .form .row{grid-template-columns:1fr}
  .hero-meta{gap:22px}
}