/* =============================================
   HERO WAVE DIVIDER
   Two overlapping SVG waves at the bottom of the
   hero section, gently animated for a subtle
   sense of motion. Matches the site's cyan/blue/
   violet theme.
============================================= */

.hero-wave{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 140px;
  z-index: 7;
  overflow: hidden;
  pointer-events: none;
}

.hero-wave svg{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero-wave-path{
  fill: rgba(47, 124, 246, 0.10);
  transform-origin: center bottom;
}

.hero-wave-path-1{
  fill: rgba(63, 210, 255, 0.08);
  animation: waveBob1 7s ease-in-out infinite;
}

.hero-wave-path-2{
  fill: rgba(155, 63, 240, 0.10);
  animation: waveBob2 9s ease-in-out infinite;
}

@keyframes waveBob1{
  0%, 100%{ transform: translateY(0) scaleY(1); }
  50%{ transform: translateY(-8px) scaleY(1.04); }
}

@keyframes waveBob2{
  0%, 100%{ transform: translateY(0) scaleY(1); }
  50%{ transform: translateY(6px) scaleY(0.97); }
}

@media (max-width: 768px){
  .hero-wave{ height: 80px; }
}