.services-index-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f7fbfa 0%, var(--surface-alt) 100%) !important;
}

.services-index-section::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: -8vw;
  right: -8vw;
  height: 12.5rem;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(178, 238, 229, 0.28), rgba(255, 255, 255, 0.18) 52%, rgba(70, 175, 160, 0.1));
  border-top: 1px solid rgba(70, 175, 160, 0.12);
  border-bottom: 1px solid rgba(70, 175, 160, 0.1);
  transform: rotate(-1.8deg);
  transform-origin: center;
  z-index: 0;
}

.services-index-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(70, 175, 160, 0.12), transparent 15rem),
    radial-gradient(circle at 88% 38%, rgba(237, 131, 113, 0.1), transparent 16rem);
  z-index: 0;
}

.services-index-section > .container {
  position: relative;
  z-index: 1;
}

.services-index-section .service-card-primary {
  border-color: rgba(70, 175, 160, 0.14) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 12px 26px rgba(8, 35, 42, 0.08) !important;
}

@media (max-width: 767px) {
  .services-index-section {
    background: linear-gradient(180deg, #f7fbfa 0%, var(--surface-alt) 100%) !important;
  }

  .services-index-section::before {
    top: 0.75rem;
    height: 9.5rem;
    transform: rotate(-2.5deg);
  }

  .services-index-section .service-card h3 {
    width: 14.5rem !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }
}