.hero-three {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  min-height: clamp(360px, 62vh, 620px);
  border: 1px solid rgba(17, 17, 17, 0.1);
  background: radial-gradient(circle at top, #1a1c22 0%, #050505 72%);
  box-shadow: var(--shadow);
}
.hero-three #heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-three::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.58)); }
.hero-content { position: relative; z-index: 2; color: #fff; text-align: center; padding: clamp(34px, 8vw, 90px); }
.hero-content .eyebrow, .hero-content .lead { color: rgba(255,255,255,0.8); }