:root {
  --primary: #4F46E5;
  --primary-dark: #4338CA;
  --secondary: #10B981;
  --accent: #F59E0B;
  --dark: #1E293B;
  --light: #F8FAFC;
}
/* Dark mode toggle */
.dark-mode {
  background-color: #111827;
  color: #F9FAFB;
}
/* Base styles */
body {
  @apply bg-gray-50 dark:bg-slate-900 transition-colors duration-200;
}

/* Custom styles that can't be done with Tailwind */
.faq-toggle .feather-chevron-down {
  transition: transform 0.3s ease;
}

.faq-toggle[aria-expanded="true"] .feather-chevron-down {
  transform: rotate(180deg);
}

.faq-content {
  transition: all 0.3s ease;
  max-height: 0;
  overflow: hidden;
}

.faq-content.active {
  max-height: 500px;
}
/* Hero gradient */
.hero-gradient {
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
  color: white;
}
/* Accent colors */
.accent-bg {
  background-color: var(--accent);
}

.accent-text {
  color: var(--accent);
}

.accent-border {
  border-color: var(--accent);
}
/* Feature cards */
.feature-card {
  @apply bg-white dark:bg-slate-800 p-8 rounded-xl transition-all duration-300;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.feature-card:hover {
  @apply shadow-lg transform -translate-y-1;
  border-color: var(--primary);
  box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.2);
}
/* Pricing cards */
.pricing-card {
  @apply bg-white dark:bg-slate-800 rounded-xl transition-all duration-300;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.pricing-card:hover {
  @apply shadow-lg;
  border-color: var(--primary);
  box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.2);
}
/* Testimonial cards */
.testimonial-card {
  @apply bg-white dark:bg-slate-800 rounded-xl transition-all duration-300;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.testimonial-card:hover {
  box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.2);
}
/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}

/* Pulse animation for CTAs */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(79, 70, 229, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
  }
}

.pulse-animation {
  animation: pulse 2s infinite;
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(90deg, #4F46E5, #10B981);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}