:root {
  --gradient-hero: radial-gradient(120% 120% at 50% 0%, oklch(0.22 0.03 60) 0%, oklch(0.16 0.02 260) 55%);
  --shadow-soft: 0 10px 30px -10px oklch(0 0 0 / 0.5);
  --shadow-glow: 0 0 24px oklch(0.78 0.16 65 / 0.55);
}

html, body {
  background: oklch(0.16 0.02 260);
  color: oklch(0.96 0.01 90);
  font-family: 'Inter', sans-serif;
}

.font-display { font-family: 'Sora', sans-serif; }

.glass {
  background: oklch(1 0 0 / 0.04);
  border: 1px solid oklch(1 0 0 / 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.glow-btn {
  background: linear-gradient(135deg, oklch(0.78 0.16 65), oklch(0.86 0.14 70));
  color: oklch(0.15 0.02 260);
  box-shadow: var(--shadow-glow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.glow-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 32px oklch(0.78 0.16 65 / 0.7);
}

.text-gradient {
  background: linear-gradient(135deg, oklch(0.9 0.1 70), oklch(0.7 0.18 55));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-live { color: oklch(0.68 0.22 25); }

.live-dot::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 9999px;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: live-pulse 1.6s infinite;
  vertical-align: middle;
}

@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 oklch(0.68 0.22 25 / 0.6); }
  70% { box-shadow: 0 0 0 8px oklch(0.68 0.22 25 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.68 0.22 25 / 0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}
.animate-float { animation: float 4s ease-in-out infinite; }
.animate-float-slow { animation: float-slow 6s ease-in-out infinite; }

@keyframes rise {
  0% { opacity: 0; transform: translateY(0) scale(0.8); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-80px) scale(1.1); }
}
.animate-rise { animation: rise 3s ease-in infinite; }

.step-number {
  color: oklch(0.78 0.16 65 / 0.12);
}

/* Tailwind's CDN build doesn't resolve opacity modifiers (e.g. bg-primary/20)
   against our custom oklch color tokens, so those glows/tints render solid
   or invisible. These classes replace them with the intended translucent color. */
.bg-header { background-color: oklch(0.16 0.02 260 / 0.6); }
.bg-mobile-menu { background-color: oklch(0.16 0.02 260 / 0.95); }
.bg-input { background-color: oklch(0.16 0.02 260 / 0.4); }
.bg-input:focus { border-color: oklch(0.78 0.16 65 / 0.6); }

.glow-blob-10 { background-color: oklch(0.78 0.16 65 / 0.10); }
.glow-blob-15 { background-color: oklch(0.78 0.16 65 / 0.15); }
.glow-blob-20 { background-color: oklch(0.78 0.16 65 / 0.20); }
.glow-blob-25 { background-color: oklch(0.78 0.16 65 / 0.25); }

.icon-tile {
  background: linear-gradient(to bottom right, oklch(0.78 0.16 65 / 0.20), oklch(0.78 0.16 65 / 0.05));
  border-color: oklch(0.78 0.16 65 / 0.20);
}
.feature-card:hover { border-color: oklch(0.78 0.16 65 / 0.40); }

.phone-glow { background: linear-gradient(to top right, oklch(0.78 0.16 65 / 0.30), transparent, oklch(0.78 0.16 65 / 0.20)); }
.wallet-glow { background: linear-gradient(to top right, oklch(0.78 0.16 65 / 0.20), transparent); }

.testimonial-text { color: oklch(0.96 0.01 90 / 0.90); }

/* FAQ accordion */
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform 0.2s ease; }

/* Mobile menu */
#mobile-menu-btn[aria-expanded="true"] #menu-icon-open { display: none; }
#mobile-menu-btn[aria-expanded="true"] #menu-icon-close { display: block; }