/* The visual has its own space so dispersed particles never obscure the copy. */
.hero { min-height: 760px; background: #030916; }
.hero::after { pointer-events: none; }
.hero-content { position: relative; z-index: 2; pointer-events: none; padding-top: clamp(120px, 18vh, 180px); }
.hero-content a { pointer-events: auto; }
.hero-content h1 { font-size: clamp(48px, 5.65vw, 82px); max-width: 660px; }
.hero-lead { max-width: 425px; }
.brain-stage { position: absolute; width: 65%; height: calc(100% - 70px); right: -6%; top: -16px; z-index: 0; opacity: 0; transition: opacity 600ms ease; }
.brain-stage canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; }
.hero.brain-ready .brain-stage { opacity: 1; }
.hero.brain-ready .hero-art { opacity: 0; }
.hero.brain-ready .hero-art { animation: none; }
.brain-stage { mask-image: linear-gradient(90deg, transparent, black 19%, black 95%, transparent); }
.hero-art { transition: opacity 600ms ease; }
.hero.brain-ready::after { background: linear-gradient(90deg, #030916 0%, rgba(3,9,22,.5) 33%, transparent 60%); }
.brain-controls { position: absolute; z-index: 3; right: max(28px, calc((100vw - 1180px) / 2)); bottom: 36px; color: #d0dcf3; }
.brain-controls[hidden] { display: none; }
.brain-controls p { font-size: 15px; letter-spacing: -.015em; margin-bottom: 13px; }
.brain-control-row { display: flex; gap: 9px; }
.brain-control-row button { color: #eff4ff; font: 500 13px "Segoe UI", sans-serif; border: 1px solid #3e4d68; border-radius: 999px; padding: 11px 16px; background: #111c30; cursor: pointer; transition: background 180ms ease, border-color 180ms ease; }
.brain-control-row button:hover { background: #233559; border-color: #849cff; }
.brain-control-row button[aria-pressed="true"] { background: #293667; border-color: #a7b0ff; }
.brain-hint { display: block; font-size: 11px; color: #92a2c0; margin-top: 10px; }
:focus-visible { outline: 3px solid #84adff; outline-offset: 5px; }
.section { scroll-margin-top: 76px; }
@media (min-width: 801px) and (max-width: 1100px) {
  .hero-content h1 { font-size: 60px; }
  .hero-content { padding-top: 130px; }
  .hero-lead { max-width: 355px; }
  .brain-stage { width: 64%; right: -9%; }
}
@media (max-width: 800px) {
  .hero { min-height: 910px; }
  .hero-content { padding-top: 60px; }
  .hero-content h1 { font-size: clamp(42px, 7vw, 58px); }
  .hero-lead { max-width: 510px; font-size: 16px; }
  .hero-actions { flex-direction: row; flex-wrap: wrap; margin-top: 24px; gap: 8px; }
  .hero-actions .button { font-size: 13px; padding-inline: 15px; }
  .brain-stage { width: 100%; height: 430px; top: auto; bottom: 100px; right: 0; }
  .brain-stage { mask-image: none; }
  .brain-controls { bottom: 24px; right: 0; width: 100%; text-align: center; }
  .brain-control-row { justify-content: center; }
  .brain-hint { display: none; }
  .hero.brain-ready::after { background: none; }
  .hero-art { object-position: 73% center; }
  .section { scroll-margin-top: 64px; }
}
@media (max-width: 380px) {
  .hero { min-height: 970px; }
  .brain-stage { height: 390px; }
  .hero-content h1 { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .brain-stage, .hero-art { transition: none; }
}