/* ================================================
   Asymmetric / Overlapping Layouts
   Priority #8 – Visual rhythm & depth
   ================================================ */

/* ---- Decorative floating elements ---- */

/* Gradient orb behind impact metrics */
.impact-metrics {
  position: relative;
  overflow: hidden;
}
.impact-metrics::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -10%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 112, 255, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Dot-pattern texture behind services */
.services {
  position: relative;
}
.services::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}
.services > .container {
  position: relative;
  z-index: 1;
}

/* Gradient orb behind success stories */
.genai-success-stories {
  position: relative;
  overflow: hidden;
}
.genai-success-stories::after {
  content: '';
  position: absolute;
  bottom: -30%;
  right: -8%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123, 97, 255, 0.1) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.genai-success-stories > .container {
  position: relative;
  z-index: 1;
}


/* ================================================
   Impact Metrics – Clean even grid
   ================================================ */


/* ================================================
   Services Grid – Subtle depth
   ================================================ */

/* First two cards get a subtle accent border to stand out */
.s-card:nth-child(1),
.s-card:nth-child(2) {
  border-color: rgba(47, 112, 255, 0.15);
}


/* ================================================
   Success Stories – Overlapping cards & depth
   ================================================ */

.success-story-card {
  position: relative;
  z-index: 1;
}

/* Layered shadow depth for the active card */
.success-story-slide.is-active .success-story-card {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.3),
    0 24px 56px rgba(0, 0, 0, 0.2);
}

/* Subtle overlap on the image portion */
.success-story-image {
  margin-top: -12px;
  position: relative;
  z-index: 2;
}

/* Tab indicator depth */
.success-story-tab.is-active {
  box-shadow: 0 2px 12px rgba(47, 112, 255, 0.25);
}


/* ================================================
   Responsive – revert on mobile
   ================================================ */

@media (max-width: 900px) {
  .metrics-grid.metrics-grid--split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .s-card:nth-child(1),
  .s-card:nth-child(2) {
    border-color: rgba(47, 112, 255, 0.15);
  }
}

@media (max-width: 768px) {
  .success-story-image {
    margin-top: 0;
  }

  /* Remove decorative orbs on small screens */
  .impact-metrics::before,
  .genai-success-stories::after,
  .services::before {
    display: none;
  }
}


/* ================================================
   Reduced Motion
   ================================================ */

/* No motion-dependent transforms in this file */