.llab-hero-resonance {
  min-height: calc(100svh - 4rem);
  background:
    radial-gradient(circle at 78% 52%, rgba(0, 153, 159, 0.12), transparent 28rem),
    radial-gradient(circle at 24% 48%, rgba(0, 153, 159, 0.07), transparent 22rem),
    linear-gradient(180deg, #f8f6ef 0%, #f4f3ee 54%, #f0eee7 100%);
  overflow: hidden;
}

.llab-hero-resonance > div[style*="background-image"] {
  opacity: 0 !important;
}

.llab-hero-resonance > .container {
  position: relative;
  z-index: 2;
}

html.llab-js #root > div > section:first-of-type:not(.llab-hero-stagger-ready) .reveal {
  opacity: 0 !important;
  filter: blur(10px) !important;
  transform: translate3d(0, 18px, 0) scale(0.985) !important;
  transition: none !important;
}

.llab-hero-resonance.llab-hero-stagger-ready .reveal:not(.llab-hero-step) {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

.llab-hero-resonance .llab-hero-step {
  opacity: 0 !important;
  filter: blur(10px) !important;
  transform: translate3d(0, 20px, 0) scale(0.985) !important;
  transition:
    opacity 0.82s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.82s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.82s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  will-change: opacity, filter, transform;
}

.llab-hero-resonance .llab-hero-step.is-in {
  opacity: 1 !important;
  filter: none !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.llab-resonance-bg {
  position: absolute;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(248, 246, 239, 0.92) 0%, rgba(248, 246, 239, 0.6) 34%, rgba(248, 246, 239, 0.08) 74%, rgba(248, 246, 239, 0.5) 100%),
    radial-gradient(circle at 76% 52%, rgba(0, 153, 159, 0.16), transparent 30rem),
    linear-gradient(180deg, #f8f6ef 0%, #f2f0e8 100%);
}

.llab-resonance-bg::before {
  content: "";
  position: absolute;
  inset: -10%;
  opacity: 0.34;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.7) 18%, transparent 34%),
    linear-gradient(180deg, transparent 0%, rgba(0, 153, 159, 0.06) 54%, transparent 82%);
  filter: blur(18px);
}

.llab-resonance-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(20, 28, 34, 0.08) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 65%, rgba(20, 28, 34, 0.06) 0 1px, transparent 1px);
  background-size: 34px 34px, 46px 46px;
}

.llab-resonance-canvas {
  position: absolute;
  inset: -8% -3% -7%;
  width: 106%;
  height: 115%;
  opacity: 0.98;
  filter: saturate(1.06) contrast(1.02);
}

.llab-mobile-resonance-wave {
  display: none;
}

@media (max-width: 767px) {
  .llab-hero-resonance {
    min-height: auto;
  }

  .llab-resonance-bg {
    z-index: -9;
    opacity: 0.72;
    background:
      linear-gradient(180deg, rgba(248, 246, 239, 0.88), rgba(248, 246, 239, 0.66) 48%, rgba(248, 246, 239, 0.36)),
      radial-gradient(circle at 84% 78%, rgba(0, 153, 159, 0.11), transparent 12rem),
      #f6f4ee;
  }

  .llab-resonance-bg::before {
    opacity: 0.2;
    filter: blur(16px);
  }

  .llab-resonance-bg::after {
    opacity: 0.07;
  }

  .llab-resonance-canvas {
    display: none;
  }

  .llab-mobile-resonance-wave {
    display: block;
    position: absolute;
    left: -7%;
    right: -7%;
    bottom: 13.6rem;
    width: 114%;
    height: 7.8rem;
    opacity: 0.72;
    filter: saturate(1.04);
    animation: llab-mobile-wave-float 5.8s cubic-bezier(0.77, 0, 0.175, 1) infinite;
  }

  .llab-mobile-resonance-wave .wave-glow {
    stroke: rgba(0, 153, 159, 0.13);
    stroke-width: 9;
  }

  .llab-mobile-resonance-wave .wave-line {
    stroke: rgba(0, 139, 145, 0.62);
    stroke-width: 1.35;
  }

  .llab-hero-resonance .llab-hero-step {
    transform: translateY(14px);
  }
}

@keyframes llab-mobile-wave-float {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -5px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .llab-resonance-canvas {
    opacity: 0.72;
  }

  .llab-hero-resonance .llab-hero-step,
  .llab-hero-resonance .llab-hero-step.is-in {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}