.electric-hero {
  isolation: isolate;
  background:
    radial-gradient(ellipse 110% 78% at 50% 0%, #121318 0%, #08080a 58%, #070708 100%),
    var(--void);
}

.hero-atmosphere {
  background:
    radial-gradient(ellipse 72% 52% at 18% 18%, rgba(215, 255, 57, 0.2), transparent 62%),
    radial-gradient(ellipse 80% 58% at 82% 46%, rgba(47, 107, 255, 0.2), transparent 64%),
    radial-gradient(ellipse 72% 52% at 66% 88%, rgba(255, 77, 61, 0.14), transparent 70%);
  background-size: 128% 128%, 136% 136%, 120% 120%;
  animation: heroAtmosphere 22s ease-in-out infinite alternate;
}

.hero-stage-wash {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(215, 255, 57, 0.14), transparent 26%, transparent 68%, rgba(47, 107, 255, 0.16)),
    radial-gradient(ellipse 90% 36% at 52% 100%, rgba(255, 77, 61, 0.18), transparent 66%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent 42%);
  opacity: 0.72;
  mix-blend-mode: screen;
  animation: stageWash 16s ease-in-out infinite alternate;
}

.hero-orb,
.hero-ribbon {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.hero-orb {
  z-index: 1;
  border-radius: var(--radius-pill);
  filter: blur(38px);
}

.hero-orb-citron {
  top: -9rem;
  left: -18rem;
  width: 46rem;
  height: 44rem;
  background:
    radial-gradient(circle at 56% 44%, rgba(215, 255, 57, 0.46), rgba(215, 255, 57, 0.16) 34%, transparent 69%),
    radial-gradient(circle at 68% 58%, rgba(232, 255, 71, 0.22), transparent 52%);
  opacity: 0.72;
  animation: cinematicOrbCitron 18s ease-in-out infinite alternate;
}

.hero-orb-blue {
  top: 4rem;
  right: -14rem;
  width: 58rem;
  height: 36rem;
  background:
    radial-gradient(circle at 44% 48%, rgba(47, 107, 255, 0.64), rgba(47, 107, 255, 0.24) 34%, transparent 72%),
    radial-gradient(circle at 70% 38%, rgba(93, 168, 255, 0.32), transparent 56%);
  opacity: 0.86;
  animation: cinematicOrbBlue 21s ease-in-out infinite alternate;
}

.hero-orb-violet {
  top: 13rem;
  left: 42%;
  width: 38rem;
  height: 28rem;
  background: radial-gradient(circle at 50% 50%, rgba(176, 110, 255, 0.18), transparent 68%);
  filter: blur(48px);
  opacity: 0.42;
  animation: cinematicOrbViolet 26s ease-in-out infinite alternate;
}

.hero-ribbon {
  z-index: 2;
  border-radius: var(--radius-pill);
  opacity: 0.72;
}

.hero-ribbon::before,
.hero-ribbon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.hero-ribbon-citron {
  top: -17rem;
  left: -27rem;
  width: 52rem;
  height: 66rem;
  transform: rotate(-17deg);
  border-right: 2px solid rgba(215, 255, 57, 0.42);
  box-shadow:
    inset -34px 0 42px rgba(215, 255, 57, 0.12),
    0 0 42px rgba(215, 255, 57, 0.2);
  animation: cinematicRibbonCitron 20s ease-in-out infinite alternate;
}

.hero-ribbon-citron::before {
  inset: 3rem 3.2rem;
  border-right: 1px solid rgba(215, 255, 57, 0.22);
  box-shadow: 0 0 30px rgba(215, 255, 57, 0.11);
}

.hero-ribbon-blue {
  top: 1.8rem;
  right: -23rem;
  width: 70rem;
  height: 36rem;
  transform: rotate(-8deg);
  border-top: 2px solid rgba(47, 107, 255, 0.62);
  box-shadow:
    inset 0 34px 50px rgba(47, 107, 255, 0.2),
    0 -8px 62px rgba(47, 107, 255, 0.34);
  animation: cinematicRibbonBlue 23s ease-in-out infinite alternate;
}

.hero-ribbon-blue::before {
  inset: 4.2rem 5rem 3rem 8rem;
  border-top: 1px solid rgba(93, 168, 255, 0.38);
  transform: rotate(2deg);
  box-shadow: 0 -6px 36px rgba(93, 168, 255, 0.22);
}

.hero-ribbon-blue::after {
  inset: 8rem 1rem 6rem 16rem;
  border-top: 1px solid rgba(47, 107, 255, 0.26);
  transform: rotate(-7deg);
}

.hero-ribbon-blue-secondary {
  top: 13rem;
  right: -18rem;
  width: 54rem;
  height: 24rem;
  transform: rotate(11deg);
  border-top: 1px solid rgba(93, 168, 255, 0.24);
  opacity: 0.5;
  box-shadow:
    inset 0 18px 38px rgba(47, 107, 255, 0.12),
    0 -4px 34px rgba(93, 168, 255, 0.16);
  animation: cinematicRibbonSecondary 28s ease-in-out infinite alternate;
}

@media (max-width: 639px) {
  .hero-orb-citron {
    left: -24rem;
    opacity: 0.64;
  }

  .hero-orb-blue {
    right: -35rem;
    opacity: 0.82;
  }

  .hero-ribbon-citron {
    left: -35rem;
    opacity: 0.58;
  }

  .hero-ribbon-blue {
    right: -43rem;
    opacity: 0.72;
  }

  .hero-ribbon-blue-secondary {
    right: -31rem;
    opacity: 0.42;
  }
}

.hero-glow-field {
  background:
    radial-gradient(ellipse 56% 38% at 22% 34%, rgba(215, 255, 57, 0.14), transparent 72%),
    radial-gradient(ellipse 62% 44% at 78% 54%, rgba(47, 107, 255, 0.18), transparent 72%),
    linear-gradient(100deg, rgba(255, 255, 255, 0.035), transparent 34%, rgba(93, 168, 255, 0.048));
  filter: blur(1px);
  opacity: 0.95;
  animation: glowField 28s ease-in-out infinite alternate;
}

.hero-energy {
  background:
    radial-gradient(ellipse 78% 18% at 76% 40%, rgba(93, 168, 255, 0.18), transparent 70%),
    radial-gradient(ellipse 56% 18% at 20% 30%, rgba(215, 255, 57, 0.12), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 36%);
  opacity: 0.92;
  animation: energyShift 18s ease-in-out infinite alternate;
}

.hero-noise {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: 0.24;
}

.hero-scanlines {
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 7px);
  mix-blend-mode: screen;
  opacity: 0.18;
  animation: scanDrift 8s linear infinite;
}

.hero-fade {
  height: 5.75rem;
  background:
    radial-gradient(ellipse 92% 50% at 50% 42%, rgba(8, 8, 10, 0.56), transparent 64%),
    linear-gradient(
      180deg,
      rgba(8, 8, 10, 0) 0%,
      rgba(8, 8, 10, 0.86) 12%,
      color-mix(in srgb, var(--page-bg) 12%, rgba(8, 8, 10, 0.78)) 32%,
      color-mix(in srgb, var(--page-bg) 78%, transparent) 72%,
      var(--page-bg) 100%
    );
}

@media (min-width: 1024px) {
  .hero-fade {
    height: 6rem;
  }
}

.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 3.35rem;
  z-index: 12;
  display: grid;
  width: 2.25rem;
  height: 1.75rem;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--citron);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.32));
  transform: translateX(-50%);
  animation: heroScrollCueFloat 1.7s ease-in-out infinite;
  transition:
    color var(--transition-fast),
    filter var(--transition-fast),
    transform var(--transition-fast);
}

.hero-scroll-cue:hover {
  color: white;
  filter: drop-shadow(0 10px 22px rgba(215, 255, 57, 0.18));
  transform: translateX(-50%) translateY(-1px);
}

@media (max-width: 767px) {
  .hero-scroll-cue {
    bottom: 2.45rem;
    width: 2rem;
    height: 1.55rem;
  }
}

@keyframes heroScrollCueFloat {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(0.38rem);
  }
}

.is-android .hero-stage-wash,
.is-android .hero-orb,
.is-android .hero-ribbon,
.is-android .hero-noise,
.is-android .hero-scanlines,
.is-android .poster-noise {
  mix-blend-mode: normal;
}

.is-android .hero-stage-wash,
.is-android .hero-orb,
.is-android .hero-ribbon,
.is-android .hero-noise,
.is-android .hero-scanlines,
.is-android .soft-grid,
.is-android .poster-noise {
  animation: none;
}

.is-android .hero-atmosphere {
  animation: androidHeroBreath 14s ease-in-out infinite alternate;
}

.is-android .hero-glow-field,
.is-android .hero-energy {
  animation: androidHeroPulse 11s ease-in-out infinite alternate;
  will-change: opacity, transform;
}

.is-android .hero-stage-wash,
.is-android .hero-noise,
.is-android .hero-scanlines,
.is-android .poster-noise {
  display: none;
}

.is-android .hero-orb {
  filter: blur(14px);
  opacity: 0.34;
}

.is-android .hero-ribbon {
  opacity: 0.38;
  border: 0;
  background: none;
  box-shadow: none;
}

.is-android .hero-ribbon::before,
.is-android .hero-ribbon::after {
  inset: auto;
  width: 34rem;
  height: 1px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.is-android .hero-ribbon-citron::before {
  top: 22rem;
  right: 7rem;
  transform: rotate(76deg);
  background: rgba(215, 255, 57, 0.18);
}

.is-android .hero-ribbon-blue::before {
  top: 6rem;
  left: 10rem;
  transform: rotate(-7deg);
  background: rgba(93, 168, 255, 0.2);
}

.is-android .hero-ribbon-blue::after {
  top: 13rem;
  left: 4rem;
  transform: rotate(-12deg);
  background: rgba(93, 168, 255, 0.14);
}

.is-android .hero-glow-field {
  --android-hero-blue-arc: rgba(93, 168, 255, 0.17);
  --android-hero-citron-arc: rgba(215, 255, 57, 0.13);
  --android-hero-citron-glow: rgba(215, 255, 57, 0.16);
  --android-hero-blue-glow: rgba(47, 107, 255, 0.2);
  --android-hero-coral-glow: rgba(255, 77, 61, 0.12);
  --android-hero-glow-opacity: 0.82;
  --android-hero-blue-arc-position: 92% 28%;
  --android-hero-blue-arc-start: 46%;
  --android-hero-blue-arc-line: 47%;
  --android-hero-citron-arc-position: 6% 36%;
  --android-hero-citron-arc-start: 48%;
  --android-hero-citron-arc-line: 49%;
  background:
    radial-gradient(ellipse 92% 128% at var(--android-hero-blue-arc-position), transparent var(--android-hero-blue-arc-start), var(--android-hero-blue-arc) var(--android-hero-blue-arc-line), transparent 49%),
    radial-gradient(ellipse 74% 122% at var(--android-hero-citron-arc-position), transparent var(--android-hero-citron-arc-start), var(--android-hero-citron-arc) var(--android-hero-citron-arc-line), transparent 51%),
    radial-gradient(ellipse 72% 44% at 10% 12%, var(--android-hero-citron-glow), transparent 68%),
    radial-gradient(ellipse 74% 48% at 86% 32%, var(--android-hero-blue-glow), transparent 70%),
    radial-gradient(ellipse 78% 46% at 54% 94%, var(--android-hero-coral-glow), transparent 72%);
  filter: none;
  opacity: var(--android-hero-glow-opacity);
}

.is-android .hero-energy {
  --android-hero-energy-citron: rgba(215, 255, 57, 0.08);
  --android-hero-energy-blue: rgba(93, 168, 255, 0.12);
  --android-hero-energy-radar: rgba(93, 168, 255, 0.15);
  --android-hero-energy-opacity: 0.68;
  background:
    linear-gradient(118deg, var(--android-hero-energy-citron), transparent 34%, var(--android-hero-energy-blue) 72%, transparent),
    radial-gradient(ellipse 86% 22% at 74% 42%, var(--android-hero-energy-radar), transparent 70%);
  opacity: var(--android-hero-energy-opacity);
}

.is-android .event-show-hero .hero-glow-field {
  --android-hero-blue-arc: rgba(93, 168, 255, 0.24);
  --android-hero-citron-arc: rgba(215, 255, 57, 0.2);
  --android-hero-citron-glow: rgba(215, 255, 57, 0.2);
  --android-hero-blue-glow: rgba(47, 107, 255, 0.24);
  --android-hero-coral-glow: rgba(255, 77, 61, 0.14);
  --android-hero-glow-opacity: 0.96;
  --android-hero-blue-arc-position: 92% 28%;
  --android-hero-blue-arc-start: 45%;
  --android-hero-blue-arc-line: 46%;
  --android-hero-citron-arc-position: 4% 34%;
  --android-hero-citron-arc-start: 47%;
  --android-hero-citron-arc-line: 48%;
}

.is-android .event-show-hero .hero-energy {
  --android-hero-energy-citron: rgba(215, 255, 57, 0.11);
  --android-hero-energy-blue: rgba(93, 168, 255, 0.16);
  --android-hero-energy-radar: rgba(93, 168, 255, 0.2);
  --android-hero-energy-opacity: 0.78;
}

.is-android .backdrop-blur-xl {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.is-android .hero-search {
  background: rgba(18, 19, 24, 0.9);
}

@keyframes androidHeroBreath {
  from {
    opacity: 0.82;
    transform: scale(1);
  }

  to {
    opacity: 1;
    transform: scale(1.015);
  }
}

@keyframes androidHeroPulse {
  from {
    opacity: 0.5;
  }

  to {
    opacity: 0.68;
  }
}

.hero-copy {
  text-shadow: none;
}

.hero-copy h1 {
  filter: drop-shadow(0 18px 42px rgba(0, 0, 0, 0.3));
}

.hero-title {
  max-width: 54rem;
  line-height: 0.9;
  letter-spacing: -0.012em;
}
.hero-title-accent {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.012em;
}

.hero-title-final {
  letter-spacing: -0.012em;
}

.hero-line-mask {
  overflow: hidden;
  padding: 0.045em 0 0.135em;
  margin: -0.045em 0 -0.135em;
}

.hero-line-text {
  transform-origin: left bottom;
  will-change: transform;
}

.electric-hero .hero-copy > .mb-7 {
  margin-bottom: 1.35rem;
}

/* Hero search */

.hero-search {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform 180ms var(--ease-out-expressive),
    border-color var(--transition-medium),
    box-shadow var(--transition-medium),
    background-color var(--transition-medium);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

@media (min-width: 768px) {
  .hero-search {
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 0.34fr) 9rem;
  }
}

.hero-search::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  background:
    radial-gradient(circle at var(--hero-search-x, 22%) 50%, rgba(215, 255, 57, 0.18), transparent 34%),
    linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.18) 42%, transparent 58%);
  opacity: 0;
  transform: translateX(-18%);
  transition:
    opacity 220ms ease,
    transform 420ms var(--ease-out-expressive);
}

.hero-search > :not(.sr-only) {
  position: relative;
  z-index: 1;
}

.hero-search:hover,
.hero-search:focus-within {
  transform: translateY(-2px);
  border-color: rgba(215, 255, 57, 0.34);
  background: rgba(255, 255, 255, 0.095);
  box-shadow:
    0 34px 92px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(215, 255, 57, 0.14),
    0 0 42px rgba(215, 255, 57, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.hero-search:hover::before,
.hero-search:focus-within::before {
  opacity: 1;
  transform: translateX(18%);
}

.hero-search__query-wrap,
.hero-search__category-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.hero-search__query-wrap .hero-search__query,
.hero-search__category-wrap .hero-search__category {
  width: 100%;
}

.hero-search__query,
.hero-search__category {
  width: 100%;
  color: rgba(255, 255, 255, 0.94);
  font-weight: 650;
}

.hero-search__query::placeholder {
  color: rgba(255, 255, 255, 0.68);
}

.hero-search__query-icon {
  position: absolute;
  left: 0.9rem;
  color: rgba(215, 255, 57, 0.72);
  pointer-events: none;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.hero-search__query-wrap:focus-within .hero-search__query-icon {
  color: rgba(215, 255, 57, 0.95);
}

.hero-search__category-wrap .hero-search__category {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.hero-search__category-icon {
  position: absolute;
  right: 0.85rem;
  color: rgba(255, 255, 255, 0.58);
  pointer-events: none;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.hero-search__category-wrap:focus-within .hero-search__category-icon {
  color: rgba(215, 255, 57, 0.82);
  transform: rotate(180deg);
}

.hero-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;

  border: 0;
  border-radius: 0.85rem;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.55), transparent 24%),
    linear-gradient(135deg, #e8ff5a 0%, #c7ff2d 42%, #7ee8a5 100%);
  color: #081007;

  font-size: 0.875rem;
  font-weight: 850;
  letter-spacing: -0.01em;
  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 14px 30px rgba(215, 255, 57, 0.22),
    0 0 34px rgba(126, 232, 165, 0.14);

  transition:
    transform 160ms var(--ease-out-expressive),
    filter 160ms ease,
    box-shadow 160ms ease;
}

.hero-search__submit:hover {
  transform: translateY(-1px);
  filter: saturate(1.06) brightness(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 18px 38px rgba(215, 255, 57, 0.28),
    0 0 48px rgba(126, 232, 165, 0.18);
}

.hero-search__submit:active {
  transform: scale(0.98) translateY(0);
  filter: brightness(0.98);
}

.hero-search__submit:focus,
.hero-search__submit:focus-visible {
  outline: none;
}

.hero-search__submit-icon {
  opacity: 0.86;
  transition:
    transform 160ms ease,
    opacity 160ms ease;
}

.hero-search__submit:hover .hero-search__submit-icon {
  transform: scale(1.06);
  opacity: 1;
}

/* Mobile hero */

@media (max-width: 767px) {
  .electric-hero .hero-layout {
    min-height: 39rem;
    align-items: end;
    padding-top: 5.85rem;
    padding-bottom: 6.5rem;
  }

  .electric-hero .hero-copy h1 {
    max-width: 100%;
    font-family: var(--font-display);
    font-size: clamp(2.68rem, 12.5vw, 4.18rem);
    line-height: 0.92;
    letter-spacing: 0;
  }

  .hero-title,
  .hero-title-accent,
  .hero-title-final {
    letter-spacing: 0;
  }

  .electric-hero .hero-copy > .mb-7 {
    margin-bottom: 0.9rem;
  }

  .hero-search {
    margin-top: 1.35rem;
    gap: 0.6rem;
    padding: 0.75rem;
  }

  .carousel-stage::before,
  .carousel-stage::after {
    width: 2rem;
  }

  .carousel-side-button {
    width: 2.75rem;
    height: 2.75rem;
  }

  .carousel-side-button.is-left {
    left: 0.4rem;
  }

  .carousel-side-button.is-right {
    right: 0.4rem;
  }
}

@media (max-width: 380px) {
  .electric-hero .hero-layout {
    min-height: 36rem;
    padding-bottom: 5.75rem;
  }

  .electric-hero .hero-copy h1 {
    font-size: clamp(2.4rem, 11.8vw, 3.32rem);
  }
}

.hero-micro-stats span {
  display: inline-flex;
  min-height: 1.85rem;
  align-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
  padding: 0.28rem 0.66rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}