/*
 * TrendWatcher Design System: "Neon Pulse"
 * Dark cyberpunk-luxury aesthetic with animated gradients
 */

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
  /* Core palette */
  --bg-void: #06060a;
  --bg-deep: #0a0a12;
  --bg-surface: #12121a;
  --bg-elevated: #1a1a24;
  --bg-hover: #22222e;

  /* Gradient spectrum */
  --neon-violet: #8b5cf6;
  --neon-fuchsia: #d946ef;
  --neon-cyan: #06b6d4;
  --neon-pink: #ec4899;
  --neon-orange: #f97316;
  --neon-emerald: #10b981;

  /* Text */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  /* Glow intensities */
  --glow-sm: 0 0 20px;
  --glow-md: 0 0 40px;
  --glow-lg: 0 0 80px;

  /* Timing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
}

/* ===== THEME SYSTEM ===== */

/* Dark Theme (default) */
.dark-theme {
  --theme-bg-body: #06060a;
  --theme-bg-sidebar: #0a0a12;
  --theme-bg-card: #12121a;
  --theme-bg-card-hover: #1a1a24;
  --theme-bg-input: rgba(255, 255, 255, 0.03);
  --theme-border: rgba(255, 255, 255, 0.06);
  --theme-border-hover: rgba(139, 92, 246, 0.3);
  --theme-text-primary: #f1f5f9;
  --theme-text-secondary: #94a3b8;
  --theme-text-muted: #64748b;
  --theme-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Light Theme */
.light-theme {
  --theme-bg-body: #f8fafc;
  --theme-bg-sidebar: #ffffff;
  --theme-bg-card: #ffffff;
  --theme-bg-card-hover: #f1f5f9;
  --theme-bg-input: #f8fafc;
  --theme-border: #e2e8f0;
  --theme-border-hover: rgba(139, 92, 246, 0.5);
  --theme-text-primary: #0f172a;
  --theme-text-secondary: #475569;
  --theme-text-muted: #94a3b8;
  --theme-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

  /* Override some neon colors for better visibility */
  --neon-violet: #7c3aed;
  --neon-fuchsia: #c026d3;
}

/* Theme utility classes */
.theme-bg {
  background-color: var(--theme-bg-body);
}

.theme-text {
  color: var(--theme-text-primary);
}

.theme-text-primary {
  color: var(--theme-text-primary);
}

.theme-text-secondary {
  color: var(--theme-text-secondary);
}

.theme-text-muted {
  color: var(--theme-text-muted);
}

/* Light theme specific overrides */
.light-theme .depth-card {
  background: var(--theme-bg-card);
  border-color: var(--theme-border);
  box-shadow: var(--theme-shadow);
}

.light-theme .depth-card:hover {
  border-color: var(--theme-border-hover);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.light-theme .glass-card {
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--theme-border);
  backdrop-filter: blur(20px);
}

.light-theme #sidebar {
  background: var(--theme-bg-sidebar);
  border-color: var(--theme-border);
}

.light-theme .sidebar-link {
  color: var(--theme-text-secondary);
}

.light-theme .sidebar-link:hover {
  background: rgba(139, 92, 246, 0.08);
  color: var(--theme-text-primary);
}

.light-theme .sidebar-link.active {
  background: rgba(139, 92, 246, 0.12);
  color: var(--neon-violet);
}

.light-theme input[type="text"],
.light-theme input[type="email"],
.light-theme input[type="password"],
.light-theme input[type="number"],
.light-theme input[type="search"],
.light-theme input[type="tel"],
.light-theme input[type="url"],
.light-theme textarea,
.light-theme select {
  background-color: var(--theme-bg-input);
  border-color: var(--theme-border);
  color: var(--theme-text-primary);
  -webkit-text-fill-color: var(--theme-text-primary);
}

.light-theme input::placeholder,
.light-theme textarea::placeholder {
  color: var(--theme-text-muted);
}

.light-theme input:focus,
.light-theme textarea:focus,
.light-theme select:focus {
  border-color: var(--neon-violet);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.light-theme input:-webkit-autofill,
.light-theme input:-webkit-autofill:hover,
.light-theme input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--theme-bg-input) inset !important;
  -webkit-text-fill-color: var(--theme-text-primary) !important;
}

.light-theme select option {
  background-color: var(--theme-bg-card);
  color: var(--theme-text-primary);
}

/* Light theme navbar */
.light-theme .navbar-blur {
  background: rgba(255, 255, 255, 0.9);
  border-bottom-color: var(--theme-border);
}

/* Light theme text colors */
.light-theme .text-white {
  color: var(--theme-text-primary);
}

.light-theme .text-slate-400,
.light-theme .text-slate-500 {
  color: var(--theme-text-secondary);
}

/* Light theme backgrounds */
.light-theme .bg-white\/5 {
  background-color: rgba(0, 0, 0, 0.03);
}

.light-theme .bg-white\/10 {
  background-color: rgba(0, 0, 0, 0.05);
}

.light-theme .border-white\/5,
.light-theme .border-white\/10 {
  border-color: var(--theme-border);
}

/* Theme toggle button */
.theme-toggle-btn {
  color: var(--theme-text-secondary);
}

.theme-toggle-btn:hover {
  background: rgba(139, 92, 246, 0.1);
  color: var(--theme-text-primary);
}

.theme-toggle-icon-bg {
  background: rgba(139, 92, 246, 0.1);
}

.theme-toggle-icon {
  color: var(--neon-violet);
}

/* Light theme stat cards */
.light-theme .stat-icon::after {
  opacity: 0.2;
}

/* Light theme scrollbar */
.light-theme ::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.light-theme ::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.3);
}

.light-theme ::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.5);
}

/* ===== MESH GRADIENT BACKGROUNDS ===== */
@keyframes mesh-shift {
  0%, 100% {
    background-position: 0% 50%, 100% 50%, 50% 100%;
  }
  25% {
    background-position: 100% 0%, 0% 100%, 100% 0%;
  }
  50% {
    background-position: 100% 100%, 0% 0%, 0% 50%;
  }
  75% {
    background-position: 0% 100%, 100% 0%, 50% 0%;
  }
}

@keyframes gradient-x {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes gradient-rotate {
  0% { --angle: 0deg; }
  100% { --angle: 360deg; }
}

.mesh-gradient-bg {
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(139, 92, 246, 0.15), transparent),
    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(217, 70, 239, 0.12), transparent),
    radial-gradient(ellipse 50% 60% at 60% 80%, rgba(6, 182, 212, 0.1), transparent),
    var(--bg-void);
  background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100%;
  animation: mesh-shift 20s ease-in-out infinite;
}

/* ===== FLOATING ORB DECORATIONS ===== */
@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes float-medium {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-15px) scale(1.05); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; filter: blur(40px); }
  50% { opacity: 1; filter: blur(60px); }
}

.floating-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: float-slow 8s var(--ease-in-out-sine) infinite;
}

.floating-orb-1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, transparent 70%);
  top: -100px;
  right: -100px;
  animation: pulse-glow 6s ease-in-out infinite;
}

.floating-orb-2 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(217, 70, 239, 0.3) 0%, transparent 70%);
  bottom: 20%;
  left: -80px;
  animation: pulse-glow 8s ease-in-out infinite 2s;
}

.floating-orb-3 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.25) 0%, transparent 70%);
  top: 60%;
  right: 10%;
  animation: pulse-glow 7s ease-in-out infinite 1s;
}

/* ===== GLASSMORPHISM CARDS ===== */
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.glass-card-hover {
  transition: all 0.4s var(--ease-out-expo);
}

.glass-card-hover:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.4),
    0 0 60px rgba(139, 92, 246, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-4px);
}

/* ===== NEON GLOW EFFECTS ===== */
.neon-text {
  text-shadow:
    0 0 10px currentColor,
    0 0 30px currentColor,
    0 0 60px currentColor;
}

.neon-border {
  position: relative;
}

.neon-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, var(--neon-violet), var(--neon-fuchsia), var(--neon-cyan));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  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 var(--ease-out-expo);
}

.neon-border:hover::before {
  opacity: 1;
}

/* ===== ANIMATED GRADIENT BUTTONS ===== */
.btn-neon {
  position: relative;
  background: linear-gradient(135deg, var(--neon-violet), var(--neon-fuchsia));
  background-size: 200% 200%;
  border: none;
  overflow: hidden;
  transition: all 0.4s var(--ease-out-expo);
}

.btn-neon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--neon-fuchsia), var(--neon-cyan));
  opacity: 0;
  transition: opacity 0.4s var(--ease-out-expo);
}

.btn-neon:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 40px rgba(139, 92, 246, 0.4),
    0 0 80px rgba(217, 70, 239, 0.2);
}

.btn-neon:hover::before {
  opacity: 1;
}

.btn-neon span {
  position: relative;
  z-index: 1;
}

/* Ghost button with gradient border */
.btn-ghost {
  position: relative;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.4s var(--ease-out-expo);
}

.btn-ghost:hover {
  border-color: transparent;
  background: rgba(139, 92, 246, 0.1);
  box-shadow:
    inset 0 0 0 1px var(--neon-violet),
    0 0 30px rgba(139, 92, 246, 0.2);
}

/* ===== ANIMATED COUNTERS ===== */
@keyframes count-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.stat-number {
  animation: count-up 0.6s var(--ease-out-expo) forwards;
}

/* ===== SIDEBAR STYLES ===== */
.sidebar-link {
  position: relative;
  transition: all 0.3s var(--ease-out-expo);
}

.sidebar-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--neon-violet), var(--neon-fuchsia));
  border-radius: 0 2px 2px 0;
  transition: height 0.3s var(--ease-out-expo);
}

.sidebar-link:hover::before,
.sidebar-link.active::before {
  height: 70%;
}

.sidebar-link:hover {
  background: rgba(139, 92, 246, 0.1);
  color: var(--text-primary);
}

.sidebar-link.active {
  background: rgba(139, 92, 246, 0.15);
  color: var(--neon-violet);
}

/* ===== CARD DEPTH EFFECTS ===== */
.depth-card {
  background: var(--bg-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 4px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.4s var(--ease-out-expo);
}

.depth-card:hover {
  border-color: rgba(139, 92, 246, 0.2);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(139, 92, 246, 0.08);
  transform: translateY(-2px);
}

/* ===== STAT CARDS WITH ICON GLOW ===== */
.stat-icon {
  position: relative;
}

.stat-icon::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: inherit;
  filter: blur(15px);
  opacity: 0.4;
  z-index: -1;
}

/* ===== TOAST NOTIFICATIONS ===== */
@keyframes slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-out-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.toast-enter {
  animation: slide-in-right 0.5s var(--ease-out-expo) forwards;
}

.toast-exit {
  animation: slide-out-right 0.4s var(--ease-out-expo) forwards;
}

/* Toast controller compatibility */
.animate-slide-in {
  animation: slide-in-right 0.5s var(--ease-out-expo) forwards;
}

.animate-slide-out {
  animation: slide-out-right 0.4s var(--ease-out-expo) forwards;
}

/* ===== INPUT & FORM STYLES ===== */
.input-neon {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s var(--ease-out-expo);
  color: var(--text-primary);
}

.input-neon:focus {
  outline: none;
  border-color: var(--neon-violet);
  box-shadow:
    0 0 0 3px rgba(139, 92, 246, 0.15),
    0 0 30px rgba(139, 92, 246, 0.1);
}

/* Form inputs base styles */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.03);
  -webkit-text-fill-color: var(--text-primary);
}

/* Placeholder styles */
input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* Autofill fix - prevents browser from changing background/text color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px rgba(18, 18, 26, 1) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary);
  transition: background-color 5000s ease-in-out 0s;
}

/* Select dropdown styles */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  padding-right: 2.5rem;
}

select option {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  padding: 0.5rem;
}

/* Checkbox and radio styles */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--neon-violet);
}

/* Number input - hide spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* Focus visible for accessibility */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--neon-violet);
  outline-offset: 2px;
}

/* ===== SCROLL REVEAL ANIMATIONS ===== */
@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes reveal-scale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.reveal-up {
  animation: reveal-up 0.8s var(--ease-out-expo) forwards;
}

.reveal-scale {
  animation: reveal-scale 0.6s var(--ease-out-expo) forwards;
}

/* Stagger delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* ===== GEOMETRIC DECORATIONS ===== */
.geometric-grid {
  background-image:
    linear-gradient(rgba(139, 92, 246, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

.diagonal-lines {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(139, 92, 246, 0.02) 10px,
    rgba(139, 92, 246, 0.02) 11px
  );
}

/* ===== SHIMMER LOADING ===== */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* ===== ADMIN THEME OVERRIDES ===== */
.admin-theme {
  --neon-primary: var(--neon-orange);
  --neon-secondary: #fbbf24;
}

.admin-theme .sidebar-link::before {
  background: linear-gradient(180deg, var(--neon-orange), var(--neon-secondary));
}

.admin-theme .sidebar-link:hover {
  background: rgba(249, 115, 22, 0.1);
}

.admin-theme .sidebar-link.active {
  background: rgba(249, 115, 22, 0.15);
  color: var(--neon-orange);
}

/* ===== PRICING CARD SPECIAL ===== */
.pricing-featured {
  position: relative;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(217, 70, 239, 0.1));
}

.pricing-featured::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--neon-violet), var(--neon-fuchsia), var(--neon-cyan));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* ===== NAVBAR BLUR ===== */
.navbar-blur {
  background: rgba(6, 6, 10, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* ===== DROPDOWN MENUS ===== */
@keyframes dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dropdown-menu {
  animation: dropdown-in 0.2s var(--ease-out-expo) forwards;
  background: var(--bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(139, 92, 246, 0.05);
}

/* Light theme dropdown */
.light-theme .dropdown-menu {
  background: var(--theme-bg-card);
  border-color: var(--theme-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.light-theme .dropdown-menu span {
  color: var(--theme-text-primary);
}

.light-theme .dropdown-menu .text-slate-200,
.light-theme .dropdown-menu .text-slate-300 {
  color: var(--theme-text-primary);
}

.light-theme .dropdown-menu .hover\:bg-white\/5:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

/* ===== SCROLLBAR STYLING ===== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-deep);
}

::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.5);
}

/* ===== LOGO ANIMATION ===== */
@keyframes logo-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
  }
  50% {
    box-shadow: 0 0 40px rgba(217, 70, 239, 0.6);
  }
}

.logo-glow {
  animation: logo-pulse 3s ease-in-out infinite;
}

/* ===== TEXT GRADIENT ===== */
.text-gradient {
  background: linear-gradient(135deg, var(--neon-violet), var(--neon-fuchsia), var(--neon-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-animate {
  background-size: 200% auto;
  animation: gradient-x 4s ease infinite;
}

/* ===== UTILITY CLASSES ===== */
.transition-all-smooth {
  transition: all 0.4s var(--ease-out-expo);
}

.hover-lift:hover {
  transform: translateY(-4px);
}

.hover-scale:hover {
  transform: scale(1.02);
}

.hover-glow:hover {
  box-shadow: 0 0 40px rgba(139, 92, 246, 0.3);
}

/* ===== ANIMATED BAR CHART ===== */
@keyframes bar-grow {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-bar-grow {
  animation: bar-grow 0.8s var(--ease-out-expo) forwards;
}

/* ===== SLIDE IN ANIMATIONS ===== */
@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-in-left {
  opacity: 0;
  animation: slide-in-left 0.6s var(--ease-out-expo) forwards;
}

.animate-slide-in-right {
  opacity: 0;
  animation: slide-in-right 0.6s var(--ease-out-expo) forwards;
}

.animate-slide-in-up {
  opacity: 0;
  animation: slide-in-up 0.6s var(--ease-out-expo) forwards;
}

/* ===== PULSE SLOW ===== */
@keyframes pulse-slow {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

.animate-pulse-slow {
  animation: pulse-slow 8s ease-in-out infinite;
}

/* ===== FLOAT SLOW ===== */
.animate-float-slow {
  animation: float-slow 6s ease-in-out infinite;
}

/* ===== ACCORDION STYLES ===== */
[data-controller="accordion"] > div > div:last-child {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease-out-expo), padding 0.3s var(--ease-out-expo);
  padding-top: 0;
  padding-bottom: 0;
}

[data-controller="accordion"] > div.open > div:last-child {
  max-height: 200px;
  padding-top: 0;
  padding-bottom: 1.25rem;
}

[data-controller="accordion"] > div.open > button svg {
  transform: rotate(180deg);
}

[data-controller="accordion"] > div > button svg {
  transition: transform 0.3s var(--ease-out-expo);
}

/* ===== HERO CARD SHADOWS ===== */
.hero-card-shadow {
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(139, 92, 246, 0.1);
}

/* ===== NUMBER COUNTER ANIMATION ===== */
@keyframes number-pop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-number-pop {
  animation: number-pop 0.6s var(--ease-out-expo) forwards;
}

/* ===== TESTIMONIAL QUOTE ===== */
.testimonial-quote::before {
  content: '"';
  position: absolute;
  top: -20px;
  left: -10px;
  font-size: 80px;
  font-family: Georgia, serif;
  opacity: 0.1;
  line-height: 1;
}