:root{
  --bg1:#050b1e; --bg2:#071a35;
  --card:#0e1e3a; --card2:#071a35;
  --text:#ffffff; --muted:rgba(255,255,255,.7);
  --gold1:#f5c542; --gold2:#ffae00;
  --ring: rgba(255,174,0,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);
background:radial-gradient(1200px 700px at 30% 20%, #0b2a68 0%, transparent 55%), linear-gradient(180deg,var(--bg2),var(--bg1));}
.referral-card{
  background: linear-gradient(145deg,#0b1d3a,#08162d);
  border-radius: 18px;
  padding: 24px;
  max-width: 900px;
  margin: 40px auto;
  box-shadow: 0 0 30px rgba(0,140,255,0.15);
}

.referral-card h3{
  color:#fff;
  margin-bottom:16px;
  font-size:20px;
}

.referral-box{
  display:flex;
  gap:12px;
  align-items:center;
}

.referral-box input{
  flex:1;
  background:#020b1f;
  border:1px solid #1e3a8a;
  border-radius:12px;
  padding:14px 16px;
  color:#fff;
  font-size:14px;
}

.btn-copy{
  background:linear-gradient(135deg,#facc15,#f59e0b);
  border:none;
  border-radius:12px;
  padding:14px 22px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 0 15px rgba(250,204,21,.6);
}

.btn-copy:hover{
  transform:translateY(-1px);
}

.share-buttons{
  margin-top:18px;
  display:flex;
  gap:14px;
}

.share{
  flex:1;
  text-align:center;
  padding:14px;
  border-radius:14px;
  font-weight:600;
  text-decoration:none;
  color:#fff;
}

.share.wa{
  background:linear-gradient(135deg,#22c55e,#16a34a);
}

.share.tg{
  background:linear-gradient(135deg,#38bdf8,#0ea5e9);
}

.share:hover{
  opacity:.9;
}

a{color:inherit}
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 18px;
  background:rgba(5,11,30,.92);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.brand{display:flex; align-items:center; gap:12px}
.logoDot{
  width:44px; height:44px; border-radius:16px;
  background: linear-gradient(135deg, #111827, #334155);
  box-shadow: 0 0 0 6px rgba(255,255,255,.04), 0 0 18px rgba(255,174,0,.16);
}
.name{font-size:22px; font-weight:900; letter-spacing:.3px}
.tag{font-size:12px; color:var(--muted); font-weight:700}
.links{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
.links a{
  text-decoration:none; font-weight:850; font-size:13px; opacity:.85;
  padding:8px 10px; border-radius:12px;
}
.links a:hover{opacity:1; background:rgba(255,255,255,.06)}
.btn{
  border:none; cursor:pointer;
  padding:10px 14px;
  border-radius:16px;
  font-weight:900;
}
.btnGold{
  background:linear-gradient(90deg,var(--gold1),var(--gold2));
  box-shadow: 0 12px 30px rgba(255,174,0,.18);
}
.btnSoft{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
}
.btn.big{padding:14px 16px; border-radius:18px}
.hero{padding:72px 16px 26px}
.heroInner{max-width:1100px; margin:0 auto; text-align:center}
.hero h1{margin:0; font-size:44px; letter-spacing:-.5px}
.hero p{margin:10px 0 0; color:var(--muted); font-weight:700}
.heroPills{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:18px}
.pill{
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  font-weight:850;
}
.section{padding:70px 16px}
.section.soft{background:rgba(255,255,255,.03)}
.container{max-width:1100px; margin:0 auto}
.h2{font-size:28px; font-weight:950; text-align:center}
.sub{margin-top:8px; text-align:center; color:var(--muted); font-weight:700}
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px}
.plan{
  background:rgba(14,30,58,.95);
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  padding:18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
}
.planTop{display:flex; align-items:center; justify-content:space-between}
.planName{font-weight:950; font-size:16px}
.badge{
  font-size:11px; font-weight:950;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,174,0,.16);
  border:1px solid var(--ring);
}
.badge2{background:rgba(99,102,241,.18); border-color:rgba(99,102,241,.35)}
.badge3{background:rgba(16,185,129,.18); border-color:rgba(16,185,129,.35)}
.planAmt{font-size:22px; font-weight:950; margin-top:8px}
.planMeta{color:var(--muted); font-weight:750; margin-top:6px}
.planBtns{display:flex; gap:10px; margin-top:14px}
.centerCard{
  margin:18px auto 0;
  max-width:980px;
  background:rgba(14,30,58,.95);
  border:1px solid rgba(255,255,255,.10);
  border-radius:26px;
  padding:18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.30), 0 0 26px rgba(255,174,0,.10);
}
.ccTitle{font-size:18px; font-weight:950; text-align:center; margin-bottom:12px}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.mini{
  background:rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:12px;
}
.miniT{font-size:12px; color:var(--muted); font-weight:850}
.miniV{font-size:18px; font-weight:950; margin-top:4px}
.form{margin-top:14px; display:grid; gap:10px}
label{font-size:12px; font-weight:900; color:var(--muted)}
input{
  width:100%;
  padding:13px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.14);
  color:#fff;
  outline:none;
}
.status{
  margin-top:8px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  font-weight:850;
  text-align:left;
}
.note{color:var(--muted); font-size:12px; font-weight:650}
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px}
.card{
  background:rgba(14,30,58,.95);
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  padding:18px;
}
.card.dark{background:rgba(0,0,0,.12)}
.k{color:var(--muted); font-weight:900; font-size:12px}
.v{font-size:24px; font-weight:950; margin-top:6px}
.small{color:var(--muted); font-weight:650; font-size:12px; margin-top:6px}
.actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px}
.levelsBox{
  margin-top:16px;
  background:rgba(14,30,58,.95);
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  padding:16px;
}
.levelsTitle{font-weight:950; margin-bottom:10px}
.levelsGrid{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
.levelItem{
  padding:10px 10px;
  border-radius:16px;
  background:rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.10);
  font-weight:850;
  font-size:12px;
  text-align:center;
}
.tableCard{
  margin-top:16px;
  background:rgba(14,30,58,.95);
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  padding:14px;
}
.tableTop{display:flex; gap:10px; justify-content:space-between; flex-wrap:wrap; align-items:center}
.tableWrap{overflow:auto; border-radius:16px; border:1px solid rgba(255,255,255,.10); margin-top:12px}
.table{width:100%; border-collapse:collapse; min-width:780px; background:rgba(0,0,0,.10)}
.table th,.table td{padding:12px 10px; text-align:left; border-bottom:1px solid rgba(255,255,255,.08)}
.table th{font-size:12px; color:var(--muted)}
.muted{color:var(--muted); font-weight:650}
.tx{color:#fff; opacity:.9; font-weight:850}
.footer{text-align:center; color:var(--muted); font-size:12px; margin-top:20px}
@media(max-width:980px){
  .plans{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr}
  .links{display:none}
}