/* ==========================================================================
   AIM QA Wave — Homepage-only wave asset implementation
   Uses the approved single-wave image asset.
   ========================================================================== */

.home-hero.hero-wave {
  position: relative;
  overflow: hidden;
  padding: 64px 0 118px;
  background:
    radial-gradient(circle at 82% 18%, rgba(169, 213, 238, 0.22), transparent 28rem),
    radial-gradient(circle at 12% 0%, rgba(234, 245, 251, 0.95), transparent 34rem),
    linear-gradient(180deg, #ffffff 0%, #f8fbfd 46%, #eef6fa 100%) !important;
}

.home-hero.hero-wave::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 60% 20%, rgba(255, 255, 255, 0.58), transparent 20rem),
    radial-gradient(circle at 88% 14%, rgba(79, 163, 217, 0.09), transparent 18rem);
  pointer-events: none;
  z-index: 0;
}

.home-hero.hero-wave::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(220px, 28vw, 360px);
  background: url("assets/ui/home-wave-background.png") center bottom / cover no-repeat;
  pointer-events: none;
  z-index: 0;
}

.home-hero.hero-wave > * {
  position: relative;
  z-index: 1;
}

.home-hero.hero-wave .hero-grid,
.home-hero.hero-wave .home-hero-grid {
  align-items: center;
}

.home-hero.hero-wave .hero-title {
  color: var(--aim-blue) !important;
  line-height: 0.88;
}

.home-hero.hero-wave .hero-title em,
.home-hero.hero-wave .hero-title .accent {
  color: var(--aim-sky) !important;
}

.home-hero.hero-wave .hero-body,
.home-hero.hero-wave .hero-subtitle {
  color: var(--aim-text-soft) !important;
}

.home-hero.hero-wave .hero-card {
  min-height: 590px;
  border: 1px solid rgba(79, 163, 217, 0.18) !important;
  border-radius: 52px;
  background:
    radial-gradient(circle at 80% 10%, rgba(234, 245, 251, 0.95), transparent 22rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 253, 0.94)),
    #ffffff !important;
  box-shadow: 0 34px 86px rgba(4, 34, 73, 0.14) !important;
}

.home-hero.hero-wave .hero-card img {
  width: min(84%, 560px);
  height: auto;
  object-fit: contain;
}

.home-services.services-overview {
  position: relative;
  margin-top: -22px;
  padding: 40px 0 82px;
  background: linear-gradient(180deg, #eef6fa 0%, #f7fbfd 100%) !important;
  border-top: 0 !important;
}

.home-services.services-overview .section-header {
  position: relative;
  z-index: 1;
}

.home-services.services-overview .service-card {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(79, 163, 217, 0.16) !important;
  box-shadow: 0 12px 30px rgba(4, 34, 73, 0.055) !important;
}

.home-services.services-overview .service-card:hover {
  border-color: rgba(79, 163, 217, 0.34) !important;
  box-shadow: 0 22px 45px rgba(4, 34, 73, 0.09) !important;
}

.home-services.services-overview .service-icon,
.home-services.services-overview .card-icon {
  background: var(--aim-sky-soft) !important;
  border-color: rgba(79, 163, 217, 0.28) !important;
  color: var(--aim-sky-700) !important;
}

@media (max-width: 980px) {
  .home-hero.hero-wave {
    padding: 52px 0 90px;
  }

  .home-hero.hero-wave::after {
    height: 250px;
    background-size: cover;
  }

  .home-hero.hero-wave .hero-card {
    min-height: 430px;
    border-radius: 38px;
  }

  .home-services.services-overview {
    margin-top: -16px;
  }
}

@media (max-width: 720px) {
  .home-hero.hero-wave {
    padding: 38px 0 72px;
  }

  .home-hero.hero-wave::after {
    height: 180px;
    background-position: 58% bottom;
  }

  .home-hero.hero-wave .hero-card {
    min-height: 340px;
    border-radius: 30px;
  }

  .home-hero.hero-wave .hero-card img {
    width: 84%;
  }

  .home-services.services-overview {
    margin-top: -8px;
    padding-top: 36px;
  }
}