:root {
  --bg1: #0b1220;
  --bg2: #101a2e;
}

body {
  background: radial-gradient(1200px 600px at 20% 0%, #1b2a4a 0%, transparent 60%),
              radial-gradient(1200px 600px at 80% 0%, #2b1b4a 0%, transparent 60%),
              linear-gradient(180deg, var(--bg1), var(--bg2));
  color: #e9eefc;
}

.glass-nav {
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.hero {
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(99,102,241,0.45), rgba(236,72,153,0.25));
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.glass-card, .metric-card {
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.metric-card:hover {
  transform: translateY(-2px);
  transition: 160ms ease;
}

.chart-wrap {
  position: relative;
  height: 340px;
  width: 100%;
}