/* ============================================
   HOMEPAGE SPACING REFINEMENTS
   Balanced and consistent spacing throughout
   ============================================ */

/* ============================================
   1. HERO SECTION - OPTIMIZED SPACING
   ============================================ */

/* Hero Section - Reduced spacing */
.animated-hero-section {
  padding-top: clamp(6rem, calc(6.75rem + 2vw), 7.5rem) !important;
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Hero Content - Balanced gap */
.animated-hero-content {
  gap: clamp(2rem, 5vw, 4rem) !important;
}

/* Hero Left - Tighter internal spacing */
.animated-hero-left {
  gap: clamp(1.25rem, 2vw, 1.5rem) !important;
}

/* Hero Title - Better spacing */
.animated-hero-title {
  margin-top: 0 !important;
  margin-bottom: clamp(1rem, 2vw, 1.25rem) !important;
  line-height: 1.2 !important;
}

/* Hero Description - Balanced spacing */
.animated-hero-description {
  margin-top: 0 !important;
  margin-bottom: clamp(1.5rem, 3vw, 2rem) !important;
  line-height: 1.6 !important;
}

/* Stats Container - Compact spacing */
.animated-stats-container {
  margin-top: 0 !important;
  margin-bottom: clamp(1.5rem, 3vw, 2rem) !important;
  gap: clamp(1rem, 2vw, 1.5rem) !important;
}

/* CTA Buttons - Proper spacing and alignment */
.animated-cta-buttons {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  gap: clamp(0.75rem, 1.5vw, 1rem) !important;
  display: flex !important;
  justify-content: flex-start !important; /* Left align on desktop by default */
  align-items: center !important;
  width: 100% !important;
}

/* Desktop: Left align buttons (default) */
@media (min-width: 769px) {
  .animated-cta-buttons {
    justify-content: flex-start !important;
    align-items: center !important;
  }
}

/* ============================================
   2. FEATURES SECTION - BALANCED SPACING
   ============================================ */

/* Features Section - Minimal spacing */
.features-section {
  padding-top: clamp(2rem, 4vw, 3rem) !important;
  padding-bottom: clamp(2rem, 4vw, 3rem) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Section Header - Minimal spacing */
.section-header {
  margin-top: 0 !important;
  margin-bottom: clamp(1.5rem, 3vw, 2rem) !important;
}

/* Section Badge - Tighter spacing */
.section-badge {
  margin-top: 0 !important;
  margin-bottom: clamp(0.75rem, 1.5vw, 1rem) !important;
}

/* Section Title - Better spacing */
.section-title {
  margin-top: 0 !important;
  margin-bottom: clamp(0.75rem, 1.5vw, 1rem) !important;
}

/* Section Description - Balanced spacing */
.section-description {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Features Grid - Optimized gap */
.features-grid {
  gap: clamp(1.5rem, 3vw, 2rem) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Feature Card - Balanced internal padding */
.feature-card {
  padding: clamp(1.5rem, 3vw, 2rem) !important;
  margin: 0 !important;
}

/* Feature Icon - Proper spacing */
.feature-icon {
  margin-bottom: clamp(1rem, 2vw, 1.25rem) !important;
  margin-top: 0 !important;
}

/* Feature Card Title - Compact spacing */
.feature-card h3 {
  margin-top: 0 !important;
  margin-bottom: clamp(0.5rem, 1vw, 0.75rem) !important;
}

/* Feature Card Description - Balanced spacing */
.feature-card p {
  margin-top: 0 !important;
  margin-bottom: clamp(1rem, 2vw, 1.5rem) !important;
}

/* Feature Metric - Proper spacing */
.feature-metric {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding-top: clamp(0.75rem, 1.5vw, 1rem) !important;
}

/* ============================================
   3. PROCESS SECTION - BALANCED SPACING
   ============================================ */

/* Process Section - Minimal spacing */
.process-section {
  padding-top: clamp(2rem, 4vw, 3rem) !important;
  padding-bottom: clamp(2rem, 4vw, 3rem) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Process Steps - Optimized gap */
.process-steps {
  gap: clamp(1.5rem, 3vw, 2rem) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Step Card - Balanced padding */
.step-card {
  padding: clamp(1.5rem, 3vw, 2rem) !important;
  margin: 0 !important;
}

/* Step Number - Proper spacing */
.step-number {
  margin-bottom: clamp(0.75rem, 1.5vw, 1rem) !important;
  margin-top: 0 !important;
}

/* Step Icon - Proper spacing */
.step-icon {
  margin-bottom: clamp(0.75rem, 1.5vw, 1rem) !important;
  margin-top: 0 !important;
}

/* Step Content - Balanced spacing */
.step-content h3 {
  margin-top: 0 !important;
  margin-bottom: clamp(0.5rem, 1vw, 0.75rem) !important;
}

.step-content p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ============================================
   4. CONTAINER - OPTIMIZED PADDING
   ============================================ */

/* Container - Balanced horizontal padding */
.container {
  padding-left: clamp(1rem, 4vw, 2rem) !important;
  padding-right: clamp(1rem, 4vw, 2rem) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ============================================
   5. REMOVE DOUBLE SPACING
   ============================================ */

/* Ensure sections don't have double spacing */
.animated-hero-section .container,
.features-section .container,
.process-section .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove default margins from all sections */
section {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ============================================
   6. MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
  /* Hero Section - Mobile spacing - REDUCED */
  .animated-hero-section {
    padding-top: clamp(4rem, calc(4rem + 1vw), 5rem) !important;
    padding-bottom: clamp(0.5rem, 1vw, 1rem) !important;
  }

  /* Hero Content - Mobile gap - REDUCED */
  .animated-hero-content {
    gap: clamp(1rem, 2vw, 1.5rem) !important;
  }

  /* Hero Left - Mobile spacing - REDUCED */
  .animated-hero-left {
    gap: 0.75rem !important;
  }

  /* Hero Description - Reduced spacing on mobile */
  .animated-hero-description {
    margin-bottom: clamp(1rem, 2vw, 1.5rem) !important;
  }

  /* Stats Container - Reduced spacing on mobile */
  .animated-stats-container {
    margin-bottom: clamp(1rem, 2vw, 1.5rem) !important;
    gap: 0.75rem !important;
  }

  /* Features Section - Mobile spacing - REDUCED */
  .features-section {
    padding-top: clamp(1rem, 2vw, 1.5rem) !important;
    padding-bottom: clamp(1rem, 2vw, 1.5rem) !important;
  }

  /* Process Section - Mobile spacing - REDUCED */
  .process-section {
    padding-top: clamp(1rem, 2vw, 1.5rem) !important;
    padding-bottom: clamp(1rem, 2vw, 1.5rem) !important;
  }

  /* Section Header - Mobile spacing - REDUCED */
  .section-header {
    margin-bottom: clamp(0.75rem, 1.5vw, 1rem) !important;
  }

  /* Features Grid - Mobile gap */
  .features-grid {
    gap: 1.25rem !important;
  }

  /* Process Steps - Mobile gap */
  .process-steps {
    gap: 1.25rem !important;
  }

  /* Feature Card - Mobile padding */
  .feature-card {
    padding: 1.25rem !important;
  }

  /* Step Card - Mobile padding */
  .step-card {
    padding: 1.25rem !important;
  }

  /* Container - Mobile padding */
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

@media (max-width: 480px) {
  /* Small mobile - MINIMAL spacing */
  .animated-hero-section {
    padding-top: clamp(4rem, calc(4rem + 0.5vw), 4.5rem) !important;
    padding-bottom: 0.5rem !important;
  }

  .features-section,
  .process-section {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  .section-header {
    margin-bottom: 0.75rem !important;
  }

  /* Hero Left - Even tighter on small mobile */
  .animated-hero-left {
    gap: 0.5rem !important;
  }

  /* Hero Description - Minimal spacing */
  .animated-hero-description {
    margin-bottom: 0.75rem !important;
  }

  /* Stats Container - Minimal spacing */
  .animated-stats-container {
    margin-bottom: 0.75rem !important;
    gap: 0.5rem !important;
  }

  .features-grid,
  .process-steps {
    gap: 1rem !important;
  }

  .feature-card,
  .step-card {
    padding: 1rem !important;
  }
}

/* ============================================
   7. SMOOTH TRANSITIONS BETWEEN SECTIONS
   ============================================ */

/* Ensure smooth visual flow between sections */
.animated-hero-section {
  margin-bottom: 0 !important;
}

.features-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.process-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ============================================
   8. LOADING STATES - NO EXTRA SPACING
   ============================================ */

.hero-loading,
.slideshow-loading {
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================
   9. TEXT LINE HEIGHT OPTIMIZATION
   ============================================ */

/* Better readability with optimized line heights */
.animated-hero-title {
  line-height: 1.2 !important;
}

.animated-hero-description {
  line-height: 1.6 !important;
}

.section-title {
  line-height: 1.3 !important;
}

.section-description {
  line-height: 1.6 !important;
}

.feature-card h3 {
  line-height: 1.3 !important;
}

.feature-card p {
  line-height: 1.6 !important;
}

.step-content h3 {
  line-height: 1.3 !important;
}

.step-content p {
  line-height: 1.6 !important;
}