/* ============================================
   HOMEPAGE SPACING FIXES
   Consistent spacing throughout the page
   ============================================ */

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

/* Navbar height variables for proper spacing calculation */
/* Top navbar: ~38px (2.375rem) + Main navbar: ~70px (4.375rem) = ~108px (6.75rem) */
:root {
  --top-navbar-height: 2.375rem;  /* 38px */
  --main-navbar-height: 4.375rem; /* 70px */
  --total-navbar-height: 6.75rem; /* 108px - accounts for both navbars */
  --hero-top-spacing-min: 8.75rem; /* 6.75rem navbar + 2rem spacing = 140px */
  --hero-top-spacing-max: 10.75rem; /* 6.75rem navbar + 4rem spacing = 172px */
}

/* Hero Section - Proper top spacing to account for navbar */
/* Use rem units for zoom-friendly scaling */
/* Formula: navbar height (6.75rem) + comfortable spacing (2-4rem) */
.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;
  scroll-margin-top: 6.75rem; /* For anchor links - accounts for navbar */
}

/* Hero Content - Optimal gap between left and right content */
/* Responsive gap that scales with viewport and zoom */
.animated-hero-content {
  gap: clamp(2.5rem, 6vw, 5rem) !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: center !important;
}

/* Hero Left Section - Proper internal spacing */
.animated-hero-left {
  gap: 1.5rem !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hero Badge - Consistent spacing */
.animated-hero-badge {
  margin-bottom: 1rem !important;
  margin-top: 0 !important;
  padding: 0.5rem 1rem !important;
}

/* Hero Title - Proper spacing */
.animated-hero-title {
  margin-top: 0 !important;
  margin-bottom: 1.25rem !important;
  padding: 0 !important;
}

/* Hero Description - Proper spacing */
.animated-hero-description {
  margin-top: 0 !important;
  margin-bottom: 2rem !important;
  padding: 0 !important;
}

/* Stats Container - Consistent spacing */
.animated-stats-container {
  margin-top: 0 !important;
  margin-bottom: 2rem !important;
  gap: 1.5rem !important;
  padding: 0 !important;
}

/* CTA Buttons - Proper spacing */
.animated-cta-buttons {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  gap: 1rem !important;
  padding: 0 !important;
}

/* Hero Right Section - No extra spacing */
.animated-hero-right {
  padding: 0 !important;
  margin: 0 !important;
}

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

/* Features Section - Consistent vertical spacing */
/* Use rem units for zoom-friendly scaling */
.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 - Proper spacing */
.section-header {
  margin-top: 0 !important;
  margin-bottom: clamp(1.5rem, 3vw, 2rem) !important;
  padding: 0 !important;
}

/* Section Badge - Consistent spacing */
.section-badge {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  padding: 0.5rem 1rem !important;
}

/* Section Title - Proper spacing */
.section-title {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  padding: 0 !important;
}

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

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

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

/* Feature Icon - Proper spacing */
.feature-icon {
  margin-bottom: 1.25rem !important;
  margin-top: 0 !important;
}

/* Feature Card Title - Proper spacing */
.feature-card h3 {
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
  padding: 0 !important;
}

/* Feature Card Description - Proper spacing */
.feature-card p {
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
  padding: 0 !important;
}

/* Feature Metric - Proper spacing */
.feature-metric {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding-top: 1rem !important;
  padding-bottom: 0 !important;
}

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

/* Process Section - Consistent vertical spacing */
/* Use rem units for zoom-friendly scaling */
.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 - Consistent gap */
.process-steps {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  gap: clamp(1.5rem, 3vw, 2rem) !important;
  padding: 0 !important;
}

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

/* Step Number - Proper spacing */
.step-number {
  margin: 0 !important;
  padding: 0 !important;
}

/* Step Icon - Proper spacing */
.step-icon {
  margin: 0 !important;
  padding: 0 !important;
}

/* Step Content - Proper spacing */
.step-content {
  margin: 0 !important;
  padding: 0 !important;
}

.step-content h3 {
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
  padding: 0 !important;
}

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

/* Step Arrow - Proper spacing */
.step-arrow {
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================
   4. CONTAINER SPACING
   ============================================ */

/* Container - Consistent 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;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ============================================
   5. SLIDESHOW SPACING
   ============================================ */

/* Slideshow Container - No extra spacing */
.product-slideshow-container {
  margin: 0 !important;
  padding: 0 !important;
}

/* Slideshow Wrapper - No extra spacing */
.slideshow-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}

/* Slideshow Track - No extra spacing */
.slideshow-track {
  margin: 0 !important;
  padding: 0 !important;
}

/* Slideshow Slide - No extra spacing */
.slideshow-slide {
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================
   6. MOBILE SPACING FIXES
   ============================================ */

@media (max-width: 768px) {
  /* Mobile: Top navbar is hidden, only main navbar (~64px = 4rem) */
  /* Hero Section - MINIMAL spacing on mobile */
  /* Use rem units for zoom-friendly scaling */
  .animated-hero-section {
    padding-top: clamp(4rem, calc(4rem + 1vw), 5rem) !important; /* 4rem navbar + minimal spacing */
    padding-bottom: clamp(0.5rem, 1vw, 1rem) !important;
    scroll-margin-top: 4rem; /* Only main navbar on mobile */
  }

  /* Hero Content - Reduced gap on mobile */
  .animated-hero-content {
    gap: clamp(1.5rem, 4vw, 2.5rem) !important;
  }

  /* Hero Left - Reduced gap on mobile */
  .animated-hero-left {
    gap: 1.25rem !important;
  }

  /* Features Section - MINIMAL spacing on mobile */
  /* Use rem units for zoom-friendly scaling */
  .features-section {
    padding-top: clamp(1rem, 2vw, 1.5rem) !important;
    padding-bottom: clamp(1rem, 2vw, 1.5rem) !important;
  }

  /* Process Section - MINIMAL spacing on mobile */
  /* Use rem units for zoom-friendly scaling */
  .process-section {
    padding-top: clamp(1rem, 2vw, 1.5rem) !important;
    padding-bottom: clamp(1rem, 2vw, 1.5rem) !important;
  }

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

  /* Features Grid - Reduced gap on mobile */
  .features-grid {
    gap: 1.5rem !important;
  }

  /* Process Steps - Reduced gap on mobile */
  .process-steps {
    gap: 1.5rem !important;
  }

  /* Feature Card - Reduced padding on mobile */
  .feature-card {
    padding: 1.5rem !important;
  }

  /* Step Card - Reduced padding on mobile */
  .step-card {
    padding: 1.5rem !important;
  }

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

@media (max-width: 480px) {
  /* Small mobile: Minimal spacing */
  /* Hero Section - Minimal spacing on small mobile */
  /* Use rem units for zoom-friendly scaling */
  .animated-hero-section {
    padding-top: clamp(5rem, calc(3.5rem + 2vw), 5.5rem) !important; /* 3.5rem navbar + 1-2rem spacing */
    padding-bottom: clamp(2rem, 4vw, 2.5rem) !important;
    scroll-margin-top: 3.5rem; /* Smaller navbar on small screens */
  }

  /* Hero Content - Minimal gap on small mobile */
  .animated-hero-content {
    gap: clamp(1.25rem, 3vw, 2rem) !important;
  }

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

  /* Features Section - Minimal spacing on small mobile */
  /* Use rem units for zoom-friendly scaling */
  .features-section {
    padding-top: 3.125rem !important;
    padding-bottom: 3.125rem !important;
  }

  /* Process Section - Minimal spacing on small mobile */
  /* Use rem units for zoom-friendly scaling */
  .process-section {
    padding-top: 3.125rem !important;
    padding-bottom: 3.125rem !important;
  }

  /* Section Header - Minimal spacing on small mobile */
  .section-header {
    margin-bottom: 1.5rem !important;
  }

  /* Features Grid - Minimal gap on small mobile */
  .features-grid {
    gap: 1.25rem !important;
  }

  /* Process Steps - Minimal gap on small mobile */
  .process-steps {
    gap: 1.25rem !important;
  }

  /* Feature Card - Minimal padding on small mobile */
  .feature-card {
    padding: 1.25rem !important;
  }

  /* Step Card - Minimal padding on small mobile */
  .step-card {
    padding: 1.25rem !important;
  }

  /* Container - Minimal padding on small mobile */
  .container {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
  }
}

/* ============================================
   7. REMOVE UNNECESSARY MARGINS/PADDING
   ============================================ */

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

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

/* Remove spacing from loading states */
.hero-loading,
.slideshow-loading {
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================
   8. CONSISTENT SPACING SYSTEM
   ============================================ */

/* Use consistent spacing scale - all rem units for zoom-friendly scaling */
:root {
  --spacing-xs: 0.5rem;    /* 8px at 16px base */
  --spacing-sm: 0.75rem;    /* 12px at 16px base */
  --spacing-md: 1rem;       /* 16px at 16px base */
  --spacing-lg: 1.5rem;     /* 24px at 16px base */
  --spacing-xl: 2rem;       /* 32px at 16px base */
  --spacing-2xl: 3rem;      /* 48px at 16px base */
  --spacing-3xl: 4rem;      /* 64px at 16px base */
  --spacing-4xl: 5rem;      /* 80px at 16px base */
  --spacing-5xl: 6rem;      /* 96px at 16px base */
}

/* ============================================
   9. ZOOM-FRIENDLY SPACING & RESPONSIVE BEHAVIOR
   ============================================ */

/* Ensure all spacing scales properly with browser zoom */
/* Using rem units ensures spacing scales proportionally */
html {
  font-size: 16px; /* Base font size - scales with zoom */
}

/* Ensure text and spacing scale together */
body {
  font-size: 1rem; /* Base size that scales with zoom */
}

/* ============================================
   10. ZOOM-LEVEL SPECIFIC ADJUSTMENTS
   ============================================ */

/* Small zoom (50-75%) - Slightly reduce spacing to prevent overflow */
@media screen and (min-width: 1200px) {
  .animated-hero-content {
    gap: clamp(2rem, 5vw, 4rem) !important;
  }
  
  .animated-hero-section {
    padding-top: clamp(8.25rem, calc(6.75rem + 3vw), 9.75rem) !important;
  }
}

/* Normal zoom (100%) - Standard spacing */
/* Default styles apply */

/* Large zoom (125-150%) - Maintain proportional spacing */
@media screen and (min-width: 800px) and (max-width: 1200px) {
  .animated-hero-content {
    gap: clamp(2.5rem, 6vw, 4.5rem) !important;
  }
}

/* Extra large zoom (175-200%+) - Ensure content doesn't get too cramped */
@media screen and (max-width: 800px) {
  .animated-hero-content {
    gap: clamp(2rem, 5vw, 3.5rem) !important;
  }
  
  .animated-hero-left {
    gap: clamp(1.25rem, 2vw, 1.5rem) !important;
  }
}

/* ============================================
   11. VIEWPORT HEIGHT ADJUSTMENTS
   ============================================ */

/* Tall viewports - Add more spacing */
@media (min-height: 900px) {
  .animated-hero-section {
    padding-top: clamp(9.25rem, calc(6.75rem + 5vw), 11.75rem) !important;
  }
}

/* Short viewports - Reduce spacing to fit content */
@media (max-height: 700px) {
  .animated-hero-section {
    padding-top: clamp(7.75rem, calc(6.75rem + 2vw), 8.75rem) !important;
    padding-bottom: clamp(2rem, 4vw, 3rem) !important;
  }
  
  .animated-hero-left {
    gap: clamp(1rem, 2vw, 1.25rem) !important;
  }
}

/* ============================================
   12. HIGH DPI / RETINA DISPLAYS
   ============================================ */

@media (min-resolution: 1.5dppx) {
  /* High DPI displays - maintain spacing ratios */
  .animated-hero-section,
  .features-section,
  .process-section {
    /* Spacing already uses rem, will scale automatically */
  }
  
  /* Ensure crisp rendering at high DPI */
  .animated-hero-content {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ============================================
   13. PRINT & ACCESSIBILITY
   ============================================ */

/* Print styles - remove excessive spacing */
@media print {
  .animated-hero-section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  .animated-hero-content {
    gap: 2rem !important;
  }
}

/* Reduced motion - maintain spacing but remove animations */
@media (prefers-reduced-motion: reduce) {
  .animated-hero-section,
  .animated-hero-content,
  .animated-hero-left {
    transition: none !important;
    animation: none !important;
  }
}