/* ===== HERO — simple, WeChat-safe ===== */
.hero{padding:0 0 72px;text-align:center;position:relative}
.hero-banner-shell{width:100%;margin:0;padding:0}
.hero-carousel{position:relative}

.hero-carousel-viewport{
  position:relative;
  width:100%;
  height:clamp(280px,48vw,560px);
  overflow:hidden;
  background:#0b0e11;
  touch-action:manipulation;
}

.hero-carousel-track{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
}

.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  z-index:0;
  visibility:hidden;
  transition:opacity .35s ease;
}
.hero-slide.is-active{
  opacity:1;
  z-index:2;
  visibility:visible;
}

.hero-slide-media{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#0b0e11;
}
.hero-slide-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border:0;
  pointer-events:none;
}

/* Live video: full opacity under the track so Android/WeChat keeps decoding.
   Partner/boost slides cover it; is-video-on raises it above the poster. */
.hero-live-video{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:1;
  pointer-events:none !important;
  background:transparent;
}
.hero-carousel-viewport.is-video-on .hero-live-video{
  z-index:5;
}
.hero-carousel-viewport.is-video-on .hero-carousel-track{
  z-index:0;
  visibility:hidden;
}

.hero-live-video::-webkit-media-controls,
.hero-live-video::-webkit-media-controls-panel,
.hero-live-video::-webkit-media-controls-start-playback-button{
  display:none !important;
}

.hero-slide.is-active .hero-slide-media > img{
  animation:heroKen 10s ease-in-out forwards;
}
@keyframes heroKen{
  0%{transform:scale(1.02)}
  100%{transform:scale(1.08)}
}

.hero-carousel-dots{
  display:flex;justify-content:center;gap:8px;margin-top:12px;position:relative;z-index:5;
}
.hero-carousel-dots button{
  width:8px;height:8px;padding:0;border:0;border-radius:999px;
  background:rgba(255,255,255,.28);cursor:pointer;
}
.hero-carousel-dots button.is-active{
  width:22px;background:linear-gradient(90deg,#FE7701,#FF9533);
}

.hero-body{position:relative;margin-top:4px;z-index:5}
.hero-confidence-aura{
  position:absolute;left:50%;top:-56px;transform:translateX(-50%);
  width:min(760px,calc(100% - 48px));height:180px;pointer-events:none;
  background:radial-gradient(ellipse 60% 80% at 50% 100%,rgba(254,119,1,.14),transparent 70%);
  filter:blur(22px);
}
.hero-body .container{position:relative;z-index:1;max-width:900px}
.hero-slogan{
  display:inline-block;font-size:14px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;color:var(--yellow);margin-bottom:20px;
  padding:10px 22px;border:1px solid rgba(254,119,1,.28);border-radius:999px;
  background:rgba(17,22,29,.55);
}

@media(max-width:767px){
  .hero{padding-bottom:40px}
  .hero-carousel-viewport{height:clamp(180px,42vw,280px)}
  .hero-slogan{font-size:11px;padding:8px 16px}
}