/* Aether Flow network overlay on Lynqo purple hero background (no grid) */

.hero-with-network {
  background-color: #f7f6ff !important;
  background-image:
    radial-gradient(ellipse 95% 70% at 50% 42%, rgba(255, 255, 255, 0.95) 0%, transparent 55%),
    radial-gradient(ellipse 85% 75% at 50% 55%, rgba(128, 128, 235, 0.28) 0%, transparent 68%),
    radial-gradient(ellipse 55% 45% at 8% 30%, rgba(128, 128, 235, 0.14) 0%, transparent 58%),
    radial-gradient(ellipse 50% 40% at 92% 28%, rgba(128, 128, 235, 0.14) 0%, transparent 58%),
    linear-gradient(180deg, #f4f3ff 0%, #f8f9fc 55%, #ffffff 100%) !important;
  background-position: center, center, center, center, center !important;
  background-size: cover, cover, cover, cover, cover !important;
  background-repeat: no-repeat !important;
}

.hero-with-network .hero-network-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.hero-with-network .orbital-wrap,
.hero-with-network .hero-dot,
.hero-with-network .hero-lines {
  z-index: 2;
  opacity: 0.3;
}

.hero-with-network .container {
  position: relative;
  z-index: 3;
}

@media (max-width: 768px) {
  .hero-with-network {
    background-color: #f7f6ff !important;
    background-image:
      radial-gradient(ellipse 90% 55% at 50% 0%, rgba(128, 128, 235, 0.16) 0%, transparent 60%),
      linear-gradient(180deg, #f6f5ff 0%, #f8f9fc 100%) !important;
  }

  .hero-with-network .hero-network-canvas {
    opacity: 0.65;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-with-network .hero-network-canvas {
    display: none;
  }
}