/* Home Page Styles - Optimized for Performance */

/* Critical above-the-fold styles */
.hero-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}

.hero-pattern {
  content-visibility: auto;
  contain-intrinsic-size: 0 200px;
}

/* Optimize image loading */
.feature-image {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
  will-change: transform;
}

.carousel-container {
  content-visibility: auto;
  contain-intrinsic-size: 0 300px;
}

/* Reduce layout shift */
.carousel-slides {
  aspect-ratio: 16/9;
  background: #f3f4f6;
}

/* Optimize decorative elements */
.decorative-bg {
  content-visibility: auto;
  contain-intrinsic-size: 0 100px;
}

/* Optimize pricing cards */
.pricing-card {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

/* Optimize CTA sections */
.cta-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 200px;
}

/* Optimize comparison section */
.comparison-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* Optimize reviews section */
.reviews-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

/* Optimize staff section */
.staff-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

/* Optimize pricing section */
.pricing-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}

/* Optimize final CTA */
.final-cta {
  content-visibility: auto;
  contain-intrinsic-size: 0 150px;
}

/* Reduce paint complexity */
.gradient-bg {
  will-change: background;
}

/* Optimize hover effects */
.hover-lift {
  will-change: transform;
}

/* Optimize image transitions */
.image-hover {
  will-change: transform;
}

/* Optimize carousel transitions */
.carousel-transition {
  will-change: transform;
}

/* Ensure carousel slides work properly */
.carousel-slides {
  display: flex;
  width: 300%; /* 3 slides = 300% width */
  transition: transform 0.5s ease-in-out;
}

.carousel-slide {
  flex: 0 0 33.333%; /* Each slide takes 1/3 of the container */
  width: 33.333%;
  height: 100%;
  overflow: hidden;
}

/* Optimize decorative patterns */
.pattern-bg {
  content-visibility: auto;
  contain-intrinsic-size: 0 50px;
}

/* Optimize social proof badge */
.social-proof {
  content-visibility: auto;
  contain-intrinsic-size: 0 80px;
}

/* Optimize feature cards */
.feature-card {
  content-visibility: auto;
  contain-intrinsic-size: 0 350px;
}

/* Optimize client experience cards */
.client-card {
  content-visibility: auto;
  contain-intrinsic-size: 0 450px;
}

/* Optimize review management cards */
.review-card {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

/* Optimize staff management cards */
.staff-card {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

/* Optimize features grid */
.features-grid {
  content-visibility: auto;
  contain-intrinsic-size: 0 800px;
}

/* Optimize client experience grid */
.client-grid {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}

/* Optimize reviews grid */
.reviews-grid {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* Optimize staff grid */
.staff-grid {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* Optimize pricing grid */
.pricing-grid {
  content-visibility: auto;
  contain-intrinsic-size: 0 800px;
}

/* Optimize features list */
.features-list {
  content-visibility: auto;
  contain-intrinsic-size: 0 300px;
}

/* Optimize comparison grid */
.comparison-grid {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}

/* Optimize hero content */
.hero-content {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

/* Optimize target audience section */
.target-audience {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* Optimize demo section */
.demo-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 200px;
}

/* Optimize middle CTA */
.middle-cta {
  content-visibility: auto;
  contain-intrinsic-size: 0 150px;
}

/* Optimize WhatsApp comparison */
.whatsapp-comparison {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}

/* Optimize pre-client CTA */
.pre-client-cta {
  content-visibility: auto;
  contain-intrinsic-size: 0 150px;
}

/* Optimize final CTA */
.final-cta-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 150px;
}