.hero .visual-frame {
  background:
    radial-gradient(circle at 50% 38%, rgba(64, 234, 245, 0.12), transparent 54%),
    linear-gradient(145deg, #071d32, #020b14);
}

.hero .visual-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.hero-brain-core {
  position: absolute;
  z-index: 6;
  left: 56%;
  top: 1%;
  width: 158px;
  height: 158px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #f6fbff;
  text-decoration: none;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 30px rgba(231, 184, 91, .38));
  animation: heroBrainFloat 3.6s ease-in-out infinite;
}

.hero-brain-core:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 77%;
  width: 2px;
  height: 150px;
  background: linear-gradient(rgba(231,184,91,.8), rgba(64,234,245,.45), transparent);
  box-shadow: 0 0 17px rgba(64,234,245,.7);
  transform: translateX(-50%);
  animation: heroBrainBeam 2.2s ease-in-out infinite;
}

.hero-brain-core>img {
  position: absolute;
  inset: 17px;
  width: 124px;
  height: 124px;
  object-fit: cover;
  border-radius: 50%;
  mix-blend-mode: screen;
}

.hero-brain-core:after {
  content: "";
  position: absolute;
  inset: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 4%, var(--gold) 5% 28%, rgba(231,184,91,.2) 29% 61%, transparent 63%);
  box-shadow: 0 0 38px rgba(231,184,91,.6);
}

.hero-brain-ring { position: absolute; border: 1px solid rgba(64,234,245,.72); border-radius: 50%; }
.hero-brain-ring.ring-a { inset: 0; border-style: dashed; animation: heroBrainOrbit 9s linear infinite; }
.hero-brain-ring.ring-b { inset: -14px; border-color: rgba(231,184,91,.58); animation: heroBrainOrbit 14s linear reverse infinite; }
.hero-brain-label { position: absolute; z-index: 5; top: 126px; left: 50%; min-width: 176px; padding: 9px 11px; border: 1px solid rgba(231,184,91,.6); background: rgba(2,15,27,.9); text-align: center; transform: translateX(-50%); backdrop-filter: blur(12px); box-shadow: 0 12px 28px rgba(0,0,0,.35); }
.hero-brain-label small,.hero-brain-label b,.hero-brain-label em { display: block; }
.hero-brain-label small { color: var(--cyan); font: 700 6px "Space Grotesk",sans-serif; letter-spacing: .15em; }
.hero-brain-label b { margin-top: 3px; color: #ffe4a0; font: 800 11px "Space Grotesk",sans-serif; letter-spacing: .1em; }
.hero-brain-label em { margin-top: 3px; color: #91adbe; font: 700 6px "Space Grotesk",sans-serif; font-style: normal; letter-spacing: .13em; }
.hero-brain-core:hover,.hero-brain-core:focus-visible { outline: 1px solid rgba(255,231,166,.9); outline-offset: 9px; filter: drop-shadow(0 0 52px rgba(231,184,91,.7)); }
.hero-brain-core:hover .hero-brain-label,.hero-brain-core:focus-visible .hero-brain-label { border-color: var(--cyan); box-shadow: 0 0 30px rgba(64,234,245,.25); }

@keyframes heroBrainFloat { 0%,100% { transform: translateX(-50%) translateY(0) scale(1); } 50% { transform: translateX(-50%) translateY(-10px) scale(1.04); } }
@keyframes heroBrainOrbit { to { transform: rotate(360deg); } }
@keyframes heroBrainBeam { 50% { opacity: .36; transform: translateX(-50%) scaleY(.82); } }

@media (max-width: 600px) {
  .hero .visual-frame {
    height: 520px;
  }
  .hero-brain-core { left: 55%; top: 2%; width: 122px; height: 122px; }
  .hero-brain-core>img { inset: 13px; width: 96px; height: 96px; }
  .hero-brain-core:after { inset: 34px; }
  .hero-brain-core:before { height: 112px; }
  .hero-brain-label { top: 98px; min-width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-brain-core,.hero-brain-core:before,.hero-brain-ring { animation: none; }
}