.digital-wave-host {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.digital-wave-host > :not(.digital-wave) {
  position: relative;
  z-index: 2;
}

.digital-wave {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.digital-wave canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* One fixed canvas keeps the original dotted DNA field behind the whole page. */
.home-page main {
  position: relative;
  isolation: isolate;
  background: #050f20;
}

.site-wave-page main {
  position: relative;
  isolation: isolate;
}

.site-wave-page main > section > .container,
.site-wave-page :is(.legal-article, .utility-card) {
  position: relative;
  z-index: 2;
}

.site-wave-page .digital-wave--global {
  opacity: .62;
  mask-image: radial-gradient(ellipse 82% 56% at 50% 50%, #000 30%, rgba(0,0,0,.72) 74%, transparent 100%);
}

.legal-page.site-wave-page .digital-wave--global { opacity: .46; }
.utility-page.site-wave-page .digital-wave--global { opacity: .56; }

.home-page main > section {
  position: relative;
  background: rgba(5, 15, 32, .84) !important;
  color: #f7faff;
  border-bottom: 1px solid rgba(85, 168, 255, .08);
}

.home-page main > section:nth-of-type(3n + 2) {
  background: rgba(7, 20, 40, .8) !important;
}

.home-page main > :is(.pricing-preview, .contact-section) {
  background: rgba(6, 18, 37, .86) !important;
}

.home-page main > section > .container,
.home-page main > section > :is(.hero-noise, .digital-wave) {
  position: relative;
  z-index: 2;
}

.hero .hero-grid,
.hero .hero-stage,
.hero .hero-stage picture,
.hero .hero-stage picture img {
  position: relative;
  z-index: 4;
}

.hero .digital-wave { z-index: 1; }
.hero .hero-noise { z-index: 2; }
.hero .status-card { z-index: 6; }
.hero .hero-stage picture img { transition: transform 240ms cubic-bezier(.2,.75,.25,1), filter 240ms ease-out; }

.digital-wave--global {
  position: fixed;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: .72;
  contain: strict;
  mask-image: radial-gradient(ellipse 75% 48% at 50% 50%, #000 35%, rgba(0,0,0,.7) 72%, transparent 100%);
}

.digital-wave--dark {
  opacity: 0.94;
  mask-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.28) 30%, #000 54%, #000 100%),
    linear-gradient(180deg, transparent 0%, #000 20%, #000 96%, transparent 100%);
  mask-composite: intersect;
}

.digital-wave--light {
  opacity: 0.72;
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 88%, transparent 100%);
}

.hero .digital-wave--dark {
  inset: 15% -5% -2%;
}

.work-section .digital-wave--light {
  inset: -12% -18%;
  transform: rotate(-2deg) scale(1.09);
  transform-origin: center;
}

.home-page .hero-stage .status-card {
  box-shadow:
    0 18px 48px rgba(1, 7, 17, 0.25),
    0 20px 42px rgba(40, 114, 245, 0.08),
    0 7px 18px rgba(104, 163, 255, 0.06),
    inset 0 1px rgba(255, 255, 255, 0.08);
}

@media (hover: hover) and (pointer: fine) {
  .hero .hero-stage:has(.status-card:hover) picture img {
    transform: scale(1.012);
    filter: brightness(1.06) saturate(1.05) drop-shadow(0 0 26px rgba(74,154,255,.2));
  }

  .home-page :is(.scenario-card, .compact-case, .button, .logo-item, .proof-card, .pricing-shell) {
    transition:
      transform 220ms cubic-bezier(.2, .75, .25, 1),
      border-color 220ms ease-out,
      box-shadow 220ms ease-out,
      background-color 220ms ease-out;
  }

  .home-page :is(.scenario-card, .compact-case, .proof-card, .pricing-shell):has(a):hover {
    transform: translateY(-3px) scale(1.015);
    border-color: rgba(67, 139, 255, 0.52);
    box-shadow: 0 15px 38px rgba(22, 116, 255, 0.12);
  }

  .home-page a.logo-item:hover {
    transform: translateY(-3px) scale(1.015);
    border-color: rgba(67, 139, 255, 0.42);
    box-shadow: 0 10px 24px rgba(22, 116, 255, 0.1);
  }

  .home-page .button:hover {
    transform: scale(1.02);
    box-shadow: 0 16px 36px rgba(40, 114, 245, 0.28);
  }

  .home-page :is(.scenario-card, .compact-case, .button, .logo-item, .proof-card) :is(img, .card-svg) {
    transition: transform 220ms cubic-bezier(.2, .75, .25, 1);
  }

  .home-page :is(.scenario-card, .compact-case, .proof-card):has(a):hover :is(img, .card-svg),
  .home-page .button:hover :is(img, .card-svg),
  .home-page a.logo-item:hover :is(img, .card-svg) {
    transform: scale(1.06);
    filter: saturate(1.08);
  }
}

@media (max-width: 1024px) {
  .digital-wave--global {
    opacity: .64;
  }

  .digital-wave--dark {
    opacity: 0.86;
  }

  .digital-wave--light {
    opacity: 0.64;
  }

  .hero .digital-wave--dark {
    inset: 25% -12% -2% 2%;
  }
}

@media (max-width: 600px) {
  .digital-wave--global {
    inset-inline: -12%;
    opacity: .72;
    mask-image: radial-gradient(ellipse 92% 54% at 50% 50%, #000 32%, rgba(0,0,0,.78) 74%, transparent 100%);
  }

  .digital-wave--dark {
    opacity: 0.78;
  }

  .digital-wave--light {
    opacity: 0.54;
  }

  .hero .digital-wave--dark {
    inset: 43% -28% -3% -8%;
  }

  .work-section .digital-wave--light {
    inset: -5% -38%;
    transform: rotate(-3deg) scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .digital-wave--dark {
    opacity: 0.78;
  }

  .digital-wave--light {
    opacity: 0.58;
  }

  .home-page :is(.scenario-card, .compact-case, .button, .logo-item, .proof-card, .pricing-shell),
  .home-page :is(.scenario-card, .compact-case, .button, .logo-item, .proof-card) :is(img, .card-svg) {
    transform: none !important;
    filter: none !important;
    transition: border-color 180ms ease-out, box-shadow 180ms ease-out, background-color 180ms ease-out, color 180ms ease-out;
  }
}