/* 2026-07-24: single desktop hero + low-paint scrolling pass. */
html{scroll-behavior:auto!important;}

#bdxHomeHero.home-hero-rebuilt{
  contain:layout paint style!important;
  background-attachment:scroll!important;
  will-change:auto!important;
  transform:none!important;
  box-shadow:0 14px 38px rgba(0,0,0,.28),0 0 0 1px rgba(0,148,255,.05)!important;
}

/* The SVG background already contains the grid/glow. Removing the extra
   pseudo layers avoids repainting large blurred areas while the page scrolls. */
#bdxHomeHero.home-hero-rebuilt::before,
#bdxHomeHero.home-hero-rebuilt::after,
#bdxHomeHero .hero-art-orbit{
  display:none!important;
  content:none!important;
  filter:none!important;
}

#bdxHomeHero .slide{
  contain:layout paint style!important;
  will-change:auto!important;
  transform:none!important;
  transition:opacity .18s linear,visibility 0s linear .18s!important;
}
#bdxHomeHero .slide.active{
  transform:none!important;
  transition-delay:0s!important;
}
#bdxHomeHero .hero-art-frame,
#bdxHomeHero .hero-actions .btn-secondary,
#bdxHomeHero .hero-arrow{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
#bdxHomeHero .hero-art-frame{
  transform:none!important;
  box-shadow:0 12px 28px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
#bdxHomeHero .hero-picture{
  animation:none!important;
  filter:none!important;
  -webkit-backface-visibility:hidden!important;
  backface-visibility:hidden!important;
}

@media(max-width:760px){
  #bdxHomeHero.home-hero-rebuilt{
    box-shadow:0 8px 22px rgba(0,0,0,.22),0 0 0 1px rgba(0,148,255,.04)!important;
  }
  #bdxHomeHero .hero-art-frame,
  #bdxHomeHero .hero-actions .btn-primary,
  #bdxHomeHero .hero-actions .btn-secondary,
  #bdxHomeHero .hero-arrow{
    box-shadow:none!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #bdxHomeHero .slide,
  #bdxHomeHero .slide.active{transition:none!important;}
}


/* 2026-07-24: New auto-sliding banner directly below the main menu. */
.top-main-menu-banner{
  margin:14px 0 18px!important;
}
.menu-banner-slider{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(65,140,255,.22);
  background:linear-gradient(180deg,rgba(5,13,25,.96),rgba(5,10,20,.92));
  box-shadow:0 18px 44px rgba(2,12,28,.34);
}
.menu-banner-track{
  position:relative;
  aspect-ratio:3 / 1;
  min-height:190px;
}
.menu-banner-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateX(3%);
  transition:opacity .55s ease,transform .55s ease;
  pointer-events:none;
}
.menu-banner-slide.active{
  opacity:1;
  transform:translateX(0);
  z-index:2;
}
.menu-banner-slide img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
.menu-banner-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(7,14,28,.66);
  color:#ffffff;
  font-size:30px;
  line-height:1;
  z-index:5;
  backdrop-filter:blur(8px);
}
.menu-banner-arrow.prev{left:16px}
.menu-banner-arrow.next{right:16px}
.menu-banner-arrow:hover,.menu-banner-arrow:focus-visible{
  background:rgba(26,72,150,.92);
}
.menu-banner-dots{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:8px;
  z-index:5;
}
.menu-banner-dots button{
  width:10px;
  height:10px;
  border-radius:999px;
  border:0;
  background:rgba(255,255,255,.42);
  transition:transform .25s ease, background-color .25s ease, width .25s ease;
}
.menu-banner-dots button.active{
  width:28px;
  background:#ff8d24;
}
@media (max-width: 900px){
  .top-main-menu-banner{margin:12px 0 16px!important}
  .menu-banner-slider{border-radius:18px}
  /* Keep the original 1536×512 (3:1) banner ratio on mobile so no part of the picture is cropped. */
  .menu-banner-track{aspect-ratio:3 / 1;min-height:0}
  .menu-banner-slide img{object-fit:contain;object-position:center center;background:#02050a}
  .menu-banner-arrow{width:40px;height:40px;font-size:26px}
  .menu-banner-arrow.prev{left:10px}
  .menu-banner-arrow.next{right:10px}
  .menu-banner-dots{bottom:10px;gap:7px}
  .menu-banner-dots button{width:9px;height:9px}
  .menu-banner-dots button.active{width:24px}
}
@media (max-width: 520px){
  .menu-banner-track{aspect-ratio:3 / 1;min-height:0}
  .menu-banner-slide img{object-fit:contain}
  .menu-banner-arrow{width:34px;height:34px;font-size:22px}
}

/* 2026-07-25: Pull the first banner directly under the main menu upward.
   Keeps the banner clear of the menu while removing the oversized black gap. */
#bdxMainMenuBanner.top-main-menu-banner{
  margin-top:-6px!important;
  margin-bottom:18px!important;
}
@media(max-width:900px){
  #bdxMainMenuBanner.top-main-menu-banner{
    margin-top:-7px!important;
    margin-bottom:16px!important;
  }
}
@media(max-width:520px){
  #bdxMainMenuBanner.top-main-menu-banner{
    margin-top:-8px!important;
    margin-bottom:14px!important;
  }
}