/* ==========================================================================
   Section Backgrounds — Gradient & Glassmorphism
   Priority #10 — subtle visual variety across alternating homepage sections
   ========================================================================== */

/* ---------- Group A: Blue-accent radial gradient (top-left) ---------- */
/* Note: .services ::before is defined in asymmetric-layouts.css */
.intro-band,
.genai-tech-stack,
.ai-industries-accordion,
.genai-faq {
  position: relative;
}

.intro-band::before,
.genai-tech-stack::before,
.ai-industries-accordion::before,
.genai-faq::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 30% 0%,
    rgba(var(--color-accent-rgb), 0.06),
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}

/* ---------- Group B: Purple-accent radial gradient (bottom-right) ---------- */
/* Note: .impact-metrics ::before is defined in asymmetric-layouts.css */
.roi-band,
.spartners,
.ai-copilot-voices,
.uiux-brands-awards {
  position: relative;
}

.roi-band::before,
.spartners::before,
.ai-copilot-voices::before,
.uiux-brands-awards::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 70% 100%,
    rgba(123, 97, 255, 0.05),
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}

/* ---------- Group C: CTA sections — glassmorphism ---------- */
.genai-contact-cta,
.advisory {
  position: relative;
}

.genai-contact-cta::before,
.advisory::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(var(--color-accent-rgb), 0.07) 0%,
    rgba(123, 97, 255, 0.05) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* ---------- Decorative mesh circles on key sections ---------- */

/* Services — soft blue orb top-right */
/* Note: .services ::before is used by asymmetric-layouts.css for dot-pattern,
   so this orb is placed on ::after which is not used by asymmetric-layouts for .services */
.services::after {
  content: "";
  position: absolute;
  top: -15%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle,
    rgba(var(--color-accent-rgb), 0.04) 0%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Challenges — purple orb bottom-left */
.challenges {
  position: relative;
}

.challenges::before {
  content: "";
  position: absolute;
  bottom: -20%;
  left: -8%;
  width: 450px;
  height: 450px;
  background: radial-gradient(
    circle,
    rgba(123, 97, 255, 0.04) 0%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Success stories — decorative orbs defined in asymmetric-layouts.css */

/* ---------- Ensure content stays above pseudo-elements ---------- */
.intro-band > *,
.impact-metrics > *,
.impact-cta > *,
.services > *,
.roi-band > *,
.genai-success-stories > *,
.genai-tech-stack > *,
.spartners > *,
.challenges > *,
.genai-contact-cta > *,
.genai-faq > *,
.advisory > *,
.ai-industries-accordion > *,
.ai-copilot-voices > *,
.uiux-brands-awards > * {
  position: relative;
  z-index: 1;
}

/* ---------- Overflow hidden to contain decorative orbs ---------- */
.services,
.challenges,
.genai-success-stories {
  overflow: hidden;
}

/* ---------- Reduced motion: keep gradients, skip nothing (all static) ---------- */
/* All effects here are non-animated, so no reduced-motion overrides needed */