/* Reusable curve and glow classes */
.svg-curve-bg {
  position: relative;
  z-index: 0;
}

.svg-curve-bg::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 30vh;
  pointer-events: none;
  z-index: -1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 420' preserveAspectRatio='none'><path fill='%23181c24' d='M0,420 Q720,0 1440,420 L1440,420 L0,420 Z'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.svg-curve-bg::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 32vh;
  pointer-events: none;
  z-index: -2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 420' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' x2='1' y1='0' y2='0' gradientUnits='objectBoundingBox'><stop offset='0%' stop-color='%23181c24' stop-opacity='1'/><stop offset='50%' stop-color='%2339ff14' stop-opacity='1'/><stop offset='100%' stop-color='%2339ff14' stop-opacity='0'/></linearGradient></defs><path d='M0,420 Q720,0 1440,420' fill='none' stroke='url(%23g)' stroke-width='160' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.18;
  filter: blur(28px);
  transform: translateY(0) scale(1.02);
}

@media (max-width: 900px) {
  .svg-curve-bg::after {
    height: 18vh;
  }

  .svg-curve-bg::before {
    height: 18vh;
    filter: blur(20px);
    transform: translateY(0) scale(1.02);
    opacity: 0.2;
  }
}