/* 整个 Header Banner 容器 */
.banner-lottie-header {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #5e93c1;    /* Lottie 背景透明时的兜底色 */
}

/* Lottie 动画容器：占据顶部，高度可调 */
.banner-lottie-box {
  position: relative;
  width: 100%;
  height: 480px;          /* 想高一点可改 420 / 540 */
  z-index: 1;
  overflow: hidden;
}

.banner-lottie-box lottie-player {
  width: 100%;
  height: 100%;
  display: block;
}

/* Lottie 加载失败时的 Canvas 兜底层 */
.banner-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.banner-fallback-active {
  display: block;
}

/* 导航放在最上层，保证可见可点 */
.banner-inner-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
}

/* 文案层（标题 + 副标题） */
.banner-text {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #ffffff;
  padding: 24px 16px 32px;
  background: linear-gradient(180deg, rgba(5, 8, 22, 0) 0%, rgba(5, 8, 22, 0.85) 100%);
}

.banner-title {
  font-size: 2.4rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

.banner-subtitle {
  font-size: 1.05rem;
  opacity: 0.9;
  margin: 0;
}

/* 小屏适配 */
@media (max-width: 768px) {
  .banner-lottie-box {
    height: 320px;
  }
  .banner-title {
    font-size: 1.9rem;
  }
  .banner-subtitle {
    font-size: 0.95rem;
  }
}