/* 3D neural network canvas stage — large, atmospheric */
.nn-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.nn-stage--interactive {
  pointer-events: auto;
}

.hero.nn-wrap {
  position: relative;
}

.hero.nn-wrap .hero__bg {
  opacity: 0.38;
}

.hero.nn-wrap .hero__layout,
.hero.nn-wrap .hero__bg {
  position: relative;
  z-index: 1;
}

#neural-canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: min(72vh, 820px);
  opacity: 0.28;
  filter: saturate(0.75);
}

.page-hero-nn {
  position: relative;
  min-height: min(52vh, 520px);
  padding: var(--space-8) 0 var(--space-7);
  overflow: hidden;
}

.page-hero-nn .nn-stage {
  opacity: 0.48;
}

.page-hero-nn #neural-canvas {
  min-height: min(48vh, 480px);
  opacity: 0.4;
}

.page-hero-nn__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.page-hero-nn__title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-3);
}

.page-hero-nn__lead {
  color: var(--text-muted);
  font-size: 1.0625rem;
  margin: 0;
}

/* Home hero only: neural canvas sits on the right half (behind wallet visual) */
html[data-page="home"] .hero.nn-wrap .nn-stage {
  left: 38%;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
}

html[data-page="home"] .hero.nn-wrap #neural-canvas {
  min-height: min(68vh, 720px);
  opacity: 0.34;
  mask-image: linear-gradient(90deg, transparent 0%, black 18%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 18%);
}

@media (max-width: 960px) {
  html[data-page="home"] .hero.nn-wrap .nn-stage {
    inset: 0;
  }

  html[data-page="home"] .hero.nn-wrap #neural-canvas {
    min-height: min(72vh, 820px);
    mask-image: radial-gradient(ellipse at 70% 40%, black 35%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 70% 40%, black 35%, transparent 75%);
    opacity: 0.26;
  }
}