.hero-visual {
  min-height: 420px;
  padding: clamp(1.4rem, 4vw, 2.7rem);
  border: 1px solid rgba(19, 129, 220, 0.22);
  border-radius: 28px;
  background:
    radial-gradient(circle at 48% 44%, rgba(19, 129, 220, 0.24), transparent 34%),
    radial-gradient(circle at 50% 68%, rgba(255, 196, 0, 0.10), transparent 30%),
    linear-gradient(145deg, rgba(8, 18, 29, 0.94), rgba(3, 7, 12, 0.98) 68%);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  overflow: hidden;
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: 19% 15% 31%;
  z-index: 0;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(19, 129, 220, 0.36), rgba(19, 129, 220, 0.13) 42%, transparent 72%);
  opacity: 0.92;
  filter: blur(16px);
}

.hero-visual::after {
  content: "";
  position: absolute;
  inset: auto 27% 22%;
  z-index: 0;
  height: 38px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255, 196, 0, 0.20), rgba(255, 196, 0, 0.06) 46%, transparent 74%);
  filter: blur(11px);
  opacity: 0.64;
}

.electric-logo {
  position: relative;
  z-index: 1;
  width: min(490px, 94%);
  aspect-ratio: auto;
  transform: translateY(-14px);
}

.electric-logo-animated {
  display: none;
}

.electric-logo-static {
  display: block;
  width: min(465px, 100%);
  height: auto;
  border-radius: 0;
  filter:
    brightness(1.16)
    contrast(1.08)
    saturate(1.12)
    drop-shadow(0 0 10px rgba(19, 129, 220, 0.58))
    drop-shadow(0 0 22px rgba(19, 129, 220, 0.26))
    drop-shadow(0 18px 34px rgba(0, 0, 0, 0.44));
}

@media (max-width: 880px) {
  .hero-visual {
    min-height: 280px;
    padding: 1.25rem;
  }

  .electric-logo {
    width: min(358px, 90%);
    transform: translateY(-8px);
  }
}