.hero {
  background: var(--wave-bg-base, #e6e4e0);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__bg .wave-bg {
  z-index: 1;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 48% 36% at 10% 14%,
      transparent 0%,
      rgba(230, 228, 224, 0.18) 68%,
      rgba(230, 228, 224, 0.42) 100%
    ),
    linear-gradient(
      90deg,
      rgba(230, 228, 224, 0.68) 0%,
      rgba(230, 228, 224, 0.46) 30%,
      rgba(230, 228, 224, 0.12) 44%,
      transparent 54%
    );
}

.hero__title span {
  color: var(--color-brand);
}

.hero .btn--primary {
  background: var(--color-brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
}

.hero .btn--primary:hover {
  background: var(--color-brand-dark);
  color: #fff;
  box-shadow: 0 10px 32px rgba(var(--color-brand-rgb), 0.35);
}

.hero .btn--outline {
  color: var(--color-navy);
  border-color: rgba(117, 119, 119, 0.45);
}

.hero .btn--outline:hover {
  background: var(--color-brand-soft);
  border-color: rgba(var(--color-brand-rgb), 0.55);
  color: var(--color-brand-dark);
}

.hero .btn--primary:active {
  transform: translate3d(0, 0, 0) scale(0.97);
  box-shadow: 0 2px 10px rgba(var(--color-brand-rgb), 0.32);
}

.hero .btn--outline:active {
  transform: scale(0.97);
  background: rgba(var(--color-brand-rgb), 0.12);
}

@media (max-width: 1024px) {
  .hero__overlay {
    background:
      radial-gradient(
        ellipse 52% 34% at 8% 12%,
        transparent 0%,
        rgba(230, 228, 224, 0.22) 70%,
        rgba(230, 228, 224, 0.48) 100%
      ),
      linear-gradient(
        90deg,
        rgba(230, 228, 224, 0.78) 0%,
        rgba(230, 228, 224, 0.52) 36%,
        rgba(230, 228, 224, 0.2) 50%,
        transparent 62%
      );
  }
}

@media (max-width: 767px) {
  .hero {
    background: var(--wave-bg-base, #e6e4e0);
  }

  .hero__overlay {
    background:
      radial-gradient(
        ellipse 52% 34% at 8% 12%,
        transparent 0%,
        rgba(230, 228, 224, 0.22) 70%,
        rgba(230, 228, 224, 0.48) 100%
      ),
      linear-gradient(
        90deg,
        rgba(230, 228, 224, 0.78) 0%,
        rgba(230, 228, 224, 0.52) 36%,
        rgba(230, 228, 224, 0.2) 50%,
        transparent 62%
      );
  }
}