:root {
  --grad: linear-gradient(120deg, #8b5cf6 0%, #ec4899 50%, #22d3ee 100%);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  background: #0a0a0f;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(139,92,246,0.18), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(34,211,238,0.12), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(236,72,153,0.14), transparent 50%);
  background-attachment: fixed;
  color: #e4e4e7;
}
.font-mono, .font-mono * { font-family: 'JetBrains Mono', monospace; }

.gradient-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-btn { background: var(--grad); background-size: 200% 200%; }
.glow-hover { transition: transform .2s, box-shadow .2s, background-position .4s; }
.glow-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(236,72,153,0.45); background-position: 100% 0; }

.glass {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
}
.header-blur {
  background: rgba(10,10,15,0.7);
  backdrop-filter: blur(16px);
}
.hero-fade {
  background: linear-gradient(to bottom, transparent 30%, #0a0a0f 95%),
              linear-gradient(to right, rgba(10,10,15,0.85), transparent 70%);
}

.card-hover { transition: transform .25s, box-shadow .25s, border-color .25s; }
.card-hover:hover {
  transform: translateY(-4px);
  border-color: rgba(236,72,153,0.4);
  box-shadow: 0 14px 40px rgba(0,0,0,0.5), 0 0 24px rgba(139,92,246,0.15);
}

/* equalizer bars */
.eq-bar {
  display: inline-block;
  width: 4px;
  height: 100%;
  border-radius: 4px;
  transform-origin: bottom;
  animation: eq 0.9s ease-in-out infinite alternate;
}
@keyframes eq {
  0% { transform: scaleY(0.2); opacity: .6; }
  100% { transform: scaleY(1); opacity: 1; }
}

/* entrance animations */
.reveal { opacity: 0; animation: reveal .7s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes reveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.fade-in { animation: fade .3s ease forwards; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.drawer-in { animation: drawer .35s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes drawer { from { transform: translateX(100%); } to { transform: none; } }

.modal-in { animation: modal .3s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes modal { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } }

.slide-up { animation: slideup .35s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes slideup { from { transform: translateY(100%); } to { transform: none; } }

.toast-in { animation: toastin .3s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.4); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

select option { color: #e4e4e7; }