:root {
  --ink: #0A0118;
  --surface: #15082C;
  --violet: #7C3AED;
  --magenta: #EC4899;
  --neon: #00F5D4;
  --gold: #FFB800;
  --sun: #FF6B35;
}
body {
  background: var(--ink);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  overflow-x: hidden;
}
.grid-bg {
  background-image:
    linear-gradient(rgba(124, 58, 237, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 58, 237, 0.08) 1px, transparent 1px);
  background-size: 60px 60px;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  pointer-events: none;
  animation: float 20s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(50px, -30px) scale(1.1); }
  66% { transform: translate(-30px, 50px) scale(0.95); }
}
.gradient-text {
  background: linear-gradient(135deg, #EC4899 0%, #7C3AED 40%, #00F5D4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-text-warm {
  background: linear-gradient(135deg, #FFB800 0%, #FF6B35 50%, #EC4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.btn-primary {
  background: linear-gradient(135deg, #EC4899 0%, #7C3AED 100%);
  box-shadow: 0 10px 30px -5px rgba(236, 72, 153, 0.5), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: all 0.3s;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px -5px rgba(236, 72, 153, 0.7), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-ghost {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  transition: all 0.3s;
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(0, 245, 212, 0.5);
}
.glass {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
}
.glass-strong {
  background: rgba(30, 13, 63, 0.6);
  border: 1px solid rgba(124, 58, 237, 0.3);
  backdrop-filter: blur(20px);
}
.card-glow {
  position: relative;
  transition: all 0.4s;
}
.card-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.5), rgba(0, 245, 212, 0.3));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s;
}
.card-glow:hover::before { opacity: 1; }
.card-glow:hover { transform: translateY(-4px); }
.noise {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ticker {
  animation: scroll 30s linear infinite;
}
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.badge-pulse {
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 245, 212, 0.6); }
  50% { box-shadow: 0 0 0 12px rgba(0, 245, 212, 0); }
}
.speed-bar {
  animation: fillBar 2s ease-out forwards;
  transform-origin: left;
}
@keyframes fillBar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.reveal {
  opacity: 0;
  transform: translateY(30px);
  animation: reveal 0.8s ease-out forwards;
}
@keyframes reveal {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
#spa-content { animation: fadeIn 0.5s ease-out; }
details[open] summary .chev { transform: rotate(180deg); }
.chev { transition: transform 0.3s; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.tab-active {
  background: linear-gradient(135deg, #EC4899, #7C3AED);
  color: white;
}
.marker-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #00F5D4;
  box-shadow: 0 0 12px #00F5D4;
}
.price-popular {
  background: linear-gradient(180deg, rgba(236, 72, 153, 0.15), rgba(124, 58, 237, 0.05));
  border: 1px solid rgba(236, 72, 153, 0.5);
}
hr.fancy {
  border: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.5), transparent);
}

/* Progress bar */
#spa-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #EC4899, #7C3AED, #00F5D4);
  z-index: 9999;
  transition: width 0.3s ease, opacity 0.4s ease;
  opacity: 0;
}
#spa-progress.is-loading { opacity: 1; width: 80%; }
#spa-progress.is-done    { opacity: 1; width: 100%; }
#spa-progress.is-hidden  { opacity: 0; width: 0; transition: opacity 0.4s ease; }