/* Invoice Landing Page Styles */

/* Custom color scheme */
:root {
  --primary-50: #faf5ff;
  --primary-100: #f3e8ff;
  --primary-200: #e9d5ff;
  --primary-300: #d8b4fe;
  --primary-400: #c084fc;
  --primary-500: #a855f7;
  --primary-600: #7c3aed;
  --primary-700: #6d28d9;
  --primary-800: #5b21b6;
  --primary-900: #4c1d95;

  --secondary-50: #f8fafc;
  --secondary-100: #f1f5f9;
  --secondary-200: #e2e8f0;
  --secondary-300: #cbd5e1;
  --secondary-400: #94a3b8;
  --secondary-500: #64748b;
  --secondary-600: #475569;
  --secondary-700: #334155;
  --secondary-800: #1e293b;
  --secondary-900: #0f172a;

  --accent-50: #f0f9ff;
  --accent-100: #e0f2fe;
  --accent-200: #bae6fd;
  --accent-300: #7dd3fc;
  --accent-400: #38bdf8;
  --accent-500: #0ea5e9;
  --accent-600: #0284c7;
  --accent-700: #0369a1;
  --accent-800: #075985;
  --accent-900: #0c4a6e;
}

/* Blob animation - exact from original */
@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* Feature tab styles - exact from original */
.feature-tab.active {
  background: linear-gradient(to right, #2563eb, #7c3aed);
  color: white;
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.2);
}

.feature-content {
  display: none;
}

.feature-content.active {
  display: block;
}

/* FAQ toggle styles */
.faq-toggle {
  transition: all 0.3s ease;
}

.faq-toggle:hover {
  background-color: #f9fafb;
}

.faq-content {
  transition: all 0.3s ease;
}

/* FAQ icon rotation */
.faq-toggle svg {
  transition: transform 0.3s ease;
}

.faq-toggle.active svg,
.faq-toggle svg.rotate-180 {
  transform: rotate(180deg);
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Gradient text */
.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

/* Hover effects */
.hover-scale-105:hover {
  transform: scale(1.05);
}

.hover-translate-y-1:hover {
  transform: translateY(-0.25rem);
}

/* Button animations */
.btn-primary {
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(124, 58, 237, 0.3);
}

/* Card hover effects */
.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Icon animations */
.icon-hover {
  transition: transform 0.3s ease;
}

.icon-hover:hover {
  transform: scale(1.1);
}

/* Background blur effects */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

/* Hero section specific styles */
.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-headline {
  font-size: 3.5rem;
  line-height: 1.1;
  font-weight: 900;
}

.hero-subheadline {
  font-size: 1.25rem;
  line-height: 1.6;
}

/* Trust indicators grid */
.trust-indicators {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
}

/* Pricing grid */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Testimonials grid */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Feature showcase styles */
.feature-showcase {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

/* Pro features grid */
.pro-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Use cases grid */
.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

/* Comparison table styles */
.comparison-table {
  border-collapse: collapse;
  width: 100%;
}

.comparison-table th,
.comparison-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.comparison-table th {
  background-color: #f9fafb;
  font-weight: 600;
}

/* Floating CTA */
#floating-cta {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 50;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .hero-headline {
    font-size: 3rem;
  }
  
  .pricing-grid,
  .testimonials-grid,
  .pro-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .use-cases-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .hero-headline {
    font-size: 2.5rem;
    line-height: 1.2;
  }
  
  .hero-subheadline {
    font-size: 1.125rem;
  }
  
  .trust-indicators {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .pricing-grid,
  .testimonials-grid,
  .pro-features-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hero-headline {
    font-size: 2rem;
  }
  
  .trust-indicators {
    grid-template-columns: 1fr;
  }
  
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  
  #floating-cta {
    display: block;
  }
}

/* Loading states */
.loading {
  opacity: 0.7;
  pointer-events: none;
}

/* Focus states for accessibility */
.btn-primary:focus,
.btn-secondary:focus {
  outline: 2px solid var(--primary-600);
  outline-offset: 2px;
}

/* Print styles */
@media print {
  .animate-blob,
  .btn-primary,
  .btn-secondary,
  #floating-cta {
    display: none !important;
  }
}

/* Additional styles for exact match */
.group:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Gradient backgrounds */
.bg-gradient-to-br {
  background: linear-gradient(to bottom right, var(--start-color), var(--end-color));
}

/* Text gradients */
.text-gradient {
  background: linear-gradient(to right, var(--primary-600), var(--accent-600));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Shadow effects */
.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Border radius */
.rounded-2xl {
  border-radius: 1rem;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

/* Spacing utilities */
.space-y-8 > * + * {
  margin-top: 2rem;
}

.space-y-6 > * + * {
  margin-top: 1.5rem;
}

.space-y-4 > * + * {
  margin-top: 1rem;
}

/* Flex utilities */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Grid utilities */
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Animation utilities */
.transition-all {
  transition: all 0.3s ease;
}

.transition-transform {
  transition: transform 0.3s ease;
}

.duration-300 {
  transition-duration: 300ms;
}

/* Transform utilities */
.scale-105 {
  transform: scale(1.05);
}

.scale-110 {
  transform: scale(1.1);
}

.-translate-y-1 {
  transform: translateY(-0.25rem);
}

/* Opacity utilities */
.opacity-70 {
  opacity: 0.7;
}

.opacity-90 {
  opacity: 0.9;
}

/* Z-index utilities */
.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-50 {
  z-index: 50;
}