/* Modern Section Transitions and Backgrounds */
:root {
  --section-transition-angle: 3deg;
  --section-overlap: 5rem;
}

body {
  background: linear-gradient(135deg, #f8fafd 0%, #eceafd 100%);
  overflow-x: hidden;
}

/* Common section styling */
section {
  position: relative;
  padding: 6rem 0;
  margin-bottom: -1px; /* Eliminate any gaps between sections */
}

/* Hero section with modern gradient */
.hero-section {
  position: relative;
  overflow: hidden;
  padding: 5rem 0 8rem 0;
  background: linear-gradient(135deg, #fafbff 0%, #f4f3fb 100%);
  margin-bottom: calc(var(--section-overlap) * -1);
  z-index: 1;
}

.hero-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(var(--section-overlap) + 2rem);
  background: linear-gradient(135deg, #fafbff 0%, #f4f3fb 100%);
  transform-origin: center bottom;
  transform: skewY(var(--section-transition-angle));
  z-index: -1;
}

/* Services section with overlap and angle */
.services {
  position: relative;
  background: linear-gradient(135deg, #f4f3fb 0%, #eceafd 100%);
  padding: calc(var(--section-overlap) + 5rem) 0 8rem 0;
  margin-bottom: calc(var(--section-overlap) * -1);
  z-index: 0;
}

.services::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(var(--section-overlap) + 2rem);
  background: linear-gradient(135deg, #f4f3fb 0%, #eceafd 100%);
  transform-origin: center bottom;
  transform: skewY(calc(var(--section-transition-angle) * -1));
  z-index: -1;
}

/* Features section with modern dark gradient */
.features-section {
  position: relative;
  background: linear-gradient(135deg, #23244a 0%, #191b2e 100%);
  padding: calc(var(--section-overlap) + 5rem) 0 8rem 0;
  margin-bottom: calc(var(--section-overlap) * -1);
  z-index: -1;
  box-shadow: 0 0 48px 0 rgba(127, 95, 255, 0.1) inset;
}

.features-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(var(--section-overlap) + 2rem);
  background: linear-gradient(135deg, #23244a 0%, #191b2e 100%);
  transform-origin: center bottom;
  transform: skewY(var(--section-transition-angle));
  z-index: -1;
}

/* About section with light gradient */
.about-section {
  position: relative;
  background: linear-gradient(135deg, #eceafd 0%, #f8fafd 100%);
  padding: calc(var(--section-overlap) + 5rem) 0 8rem 0;
  margin-bottom: calc(var(--section-overlap) * -1);
  z-index: -2;
}

.about-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(var(--section-overlap) + 2rem);
  background: linear-gradient(135deg, #eceafd 0%, #f8fafd 100%);
  transform-origin: center bottom;
  transform: skewY(calc(var(--section-transition-angle) * -1));
  z-index: -1;
}

/* Contact section with subtle gradient */
.contact-section {
  position: relative;
  background: linear-gradient(135deg, #f8fafd 0%, #fafbff 100%);
  padding: calc(var(--section-overlap) + 5rem) 0 5rem 0;
  z-index: -3;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  :root {
    --section-transition-angle: 4deg;
    --section-overlap: 4rem;
  }
  
  section {
    padding: 4rem 0;
  }
  
  .hero-section,
  .services,
  .features-section,
  .about-section,
  .contact-section {
    padding-top: calc(var(--section-overlap) + 3rem);
    padding-bottom: 6rem;
  }
}

@media (max-width: 480px) {
  :root {
    --section-transition-angle: 5deg;
    --section-overlap: 3rem;
  }
  
  section {
    padding: 3rem 0;
  }
}