:root {
  --em: #00FFB2;
  --em2: #00c88a;
  --gold: #D4AF37;
  --goldl: #F0CC55;
  --goldd: #a88920;
  --bg: #060608;
  --bg2: #0A0A0E;
  --bg3: #111118;
  --bg4: #18181F;
  --glass: rgba(255, 255, 255, 0.035);
  --glass2: rgba(255, 255, 255, 0.06);
  --glass3: rgba(255, 255, 255, 0.09);
  --gb: rgba(0, 255, 178, 0.12);
  --gbg: rgba(212, 175, 55, 0.15);
  --txt: #F2F2F8;
  --txt2: rgba(242, 242, 248, 0.62);
  --txt3: rgba(242, 242, 248, 0.35);
  --fd: 'Orbitron', monospace;
  --fh: 'Rajdhani', sans-serif;
  --fb: 'Be Vietnam Pro', sans-serif;
  --r8: 8px;
  --r16: 16px;
  --r24: 24px;
  --r32: 32px;
  --rf: 9999px;
  --tf: 0.18s cubic-bezier(0.4, 0.0, 0.2, 1);
  --tm: 0.32s cubic-bezier(0.4, 0.0, 0.2, 1);
  --sc: 0 24px 64px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4);
  --sem: 0 0 32px rgba(0, 255, 178, 0.22), 0 0 80px rgba(0, 255, 178, 0.08);
  --sgold: 0 0 32px rgba(212, 175, 55, 0.22), 0 0 80px rgba(212, 175, 55, 0.08);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--fb);
  overflow-x: hidden;
  min-height: 100vh;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }

.headline { font-family: var(--fd); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; font-size: clamp(32px, 6vw, 72px); }
.subheading { font-family: var(--fd); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; font-size: clamp(24px, 4vw, 40px); }
.body-lg { font-size: clamp(13px, 1.6vw, 17px); line-height: 1.7; }
.body-md { font-size: clamp(12px, 1.3vw, 15px); line-height: 1.65; }
.text-em { color: var(--em); }
.text-gold { color: var(--gold); }
.text-muted { color: var(--txt2); }

.glass-card {
  background: var(--glass);
  border: 1px solid var(--gb);
  border-radius: var(--r24);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--sc), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform var(--tm), box-shadow var(--tm), border-color var(--tm);
}
.glass-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0,255,178,.28);
  box-shadow: var(--sc), var(--sem), inset 0 1px 0 rgba(255,255,255,.08);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--fh);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: var(--rf);
  transition: all var(--tm);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--em) 0%, var(--em2) 100%);
  color: var(--bg);
  padding: 14px 32px;
  font-size: clamp(11px, 1.3vw, 14px);
}
.btn-primary:hover { box-shadow: 0 0 30px rgba(0,255,178,.45), 0 8px 24px rgba(0,0,0,.4); transform: translateY(-2px); }
.btn-secondary {
  background: transparent;
  color: var(--txt);
  border: 1.5px solid rgba(255,255,255,.18);
  padding: 13px 32px;
  font-size: clamp(11px, 1.3vw, 14px);
}
.btn-secondary:hover { border-color: var(--em); color: var(--em); box-shadow: 0 0 20px rgba(0,255,178,.15); transform: translateY(-2px); }
.btn-gold {
  background: linear-gradient(135deg, var(--goldl) 0%, var(--gold) 50%, var(--goldd) 100%);
  color: var(--bg);
  padding: 12px 28px;
  font-size: clamp(11px, 1.2vw, 13px);
}
.btn-gold:hover { box-shadow: 0 0 30px rgba(212,175,55,.45), 0 8px 24px rgba(0,0,0,.4); transform: translateY(-2px); }

.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: var(--rf);
  background: var(--glass2); border: 1px solid var(--gb); backdrop-filter: blur(10px);
  font-family: var(--fd); font-size: clamp(9px,.9vw,11px); font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--em);
}
.bdot { width: 6px; height: 6px; background: var(--em); border-radius: 50%; }

.container { max-width: 1440px; padding: 0 clamp(20px, 5vw, 80px); margin: 0 auto; }
.flex { display: flex; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }

.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  min-height: 76px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 14px clamp(16px,3.5vw,60px);
  background: rgba(6,6,8,.82); backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid var(--gb);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.nav-logo { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; min-width: 0; }
.nav-coin { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 18px rgba(0,255,178,.25), 0 0 28px rgba(212,175,55,.15); }
.nav-brand, .top-brand-text { display: flex; flex-direction: column; justify-content: center; line-height: 1; min-width: 0; }
.nav-brand-top { font-family: var(--fd); font-size: 17px; font-weight: 800; letter-spacing: .08em; color: var(--txt); white-space: nowrap; }
.nav-brand-bottom { font-family: var(--fh); font-size: 11px; font-weight: 700; letter-spacing: .30em; text-transform: uppercase; color: var(--gold); margin-top: 4px; white-space: nowrap; }
.nav-links { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: clamp(14px,1.8vw,26px); flex: 1 1 auto; min-width: 0; }
.nav-link { font-family: var(--fh); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--txt2); transition: color var(--tf); position: relative; white-space: nowrap; }
.nav-link::after { content:''; position:absolute; bottom:-3px; left:0; right:0; height:1px; background:var(--em); transform:scaleX(0); transition:transform var(--tm); transform-origin:left; }
.nav-link:hover,.nav-link.active { color: var(--txt); }
.nav-link:hover::after,.nav-link.active::after { transform:scaleX(1); }

.sidebar {
  width: 260px; min-height: 100vh; background: var(--bg2); border-right: 1px solid var(--gb);
  padding: 20px; position: fixed; top: 0; left: 0; overflow-y: auto;
}
.sidebar .logo { display:flex; align-items:center; gap:12px; margin-bottom:40px; }
.sidebar nav ul { display:flex; flex-direction:column; gap:12px; }
.sidebar nav ul li a { display:block; padding:10px 12px; border-radius:var(--r16); font-family:var(--fh); font-size:15px; font-weight:500; color:var(--txt2); transition:background var(--tf), color var(--tf); }
.sidebar nav ul li a:hover,.sidebar nav ul li a.active { background:var(--glass2); color:var(--txt); }

.dashboard-main { margin-left:260px; padding:80px 40px 40px; min-height:100vh; background:var(--bg); }
.dashboard-header { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:32px; flex-wrap:wrap; }
.dashboard-header h1 { font-family: var(--fd); font-size: clamp(28px,4vw,48px); font-weight:700; }
.dashboard-header .wallet { font-size:14px; color:var(--txt2); display:flex; align-items:center; gap:12px; word-break:break-all; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:24px; margin-bottom:40px; }
.stat-card { padding:24px; border-radius:var(--r24); background:var(--glass2); border:1px solid var(--gb); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); box-shadow:var(--sc); display:flex; flex-direction:column; gap:8px; }
.stat-card h3 { font-family:var(--fh); font-size:14px; color:var(--txt2); text-transform:uppercase; letter-spacing:.05em; }
.stat-card p { font-family:var(--fd); font-size:28px; font-weight:700; color:var(--em); margin-top:4px; }
.stat-card span { font-size:12px; color:var(--txt3); }
.plans-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; margin-top:24px; }
.plan-card { background:var(--glass); border:1px solid var(--gb); border-radius:var(--r24); padding:24px; backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); box-shadow:var(--sc); display:flex; flex-direction:column; gap:16px; transition:transform var(--tm), box-shadow var(--tm), border-color var(--tm); }
.plan-card:hover { transform:translateY(-4px); border-color:rgba(0,255,178,.28); box-shadow:var(--sc),var(--sem); }
.plan-card h4 { font-family:var(--fh); font-size:18px; font-weight:600; margin-bottom:8px; }
.plan-card .price { font-family:var(--fd); font-size:32px; font-weight:700; color:var(--gold); margin-bottom:8px; }
.plan-card ul { display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--txt2); margin-bottom:16px; }
.plan-card .cta { margin-top:auto; }

@media (max-width: 768px) {
  .navbar { min-height:72px; gap:12px; padding:12px 18px; }
  .nav-logo { gap:10px; }
  .nav-coin { width:38px; height:38px; }
  .nav-brand-top { font-size:14px; letter-spacing:.06em; }
  .nav-brand-bottom { font-size:10px; letter-spacing:.22em; }
  .nav-links { gap:12px; }
  .nav-link { font-size:12px; }
  .sidebar { position:relative; width:100%; min-height:auto; display:none; }
  .dashboard-main { margin-left:0; padding:80px 20px; }
}