html {
  /* 750 设计稿：1rem = 内容区宽度的 1% */
  font-size: calc(min(100vw, 750px) / 100);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #fff;
  color: #fff;
  overflow-x: hidden;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 750px;
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
}

/* ===== 主视觉下方：渐变从这里开始，撑满剩余高度到最底部 ===== */
.content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: -6rem;
  /* 底部留给固定悬浮按钮，避免内容被挡住 */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28rem);
  /* 顶部仅叠加区内透明衔接；超出叠加后立刻落到 #104437，避免透出白底泛白 */
  background: linear-gradient(
    180deg,
    rgba(6, 83, 63, 0) 0,
    #104437 6rem,
    #171c1a 100%
  );
}

/* ===== 左上角 logo 浮漂 ===== */
.float-logo {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 15rem);
  left: max(3.3rem, calc((100vw - 750px) / 2 + 3.3rem));
  z-index: 200;
  width: 28.8rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.float-logo__img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0.4rem 0.8rem rgba(0, 0, 0, 0.25));
}

/* ===== 跑马灯 ===== */
/* 设计稿：上 34 / 左右 24 / 内边距 10 16 / 图标间距 12 / 圆角 10 */
.marquee {
  position: absolute;
  top: 4.5333rem;
  left: 3.2rem;
  right: 3.2rem;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 1.3333rem 2.1333rem;
  border-radius: 1.3333rem;
  background: rgba(255, 255, 255, 0.1);
}

.marquee__icon {
  flex: 0 0 auto;
  width: 3.2rem;
  height: 3.2rem;
}

.marquee__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  /* 视口高度由 JS 按单条实际高度设置，避免裁字 */
}

.marquee__track {
  display: flex;
  flex-direction: column;
  transition: transform 0.45s ease;
  will-change: transform;
}

.marquee__item {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: #faad14;
  text-overflow: ellipsis;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 2.9333rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

/* ===== 主视觉 ===== */
.hero {
  position: relative;
  width: 100%;
}

.hero__img {
  width: 100%;
}

/* ===== 文案区 ===== */
.promo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 6rem 0;
  text-align: center;
}

.promo__upgrade {
  /* 设计稿 640px；素材自带透明，不用 screen，避免叠加深色底时泛白 */
  width: 85.3333rem;
}

.promo__bonus {
  /* 设计稿 570px；与上方标题间距 12px */
  width: 76rem;
  margin-top: 1.6rem;
}

.promo__features {
  margin-top: 2.4rem;
  color: #fff;
  text-align: center;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 5.8667rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.promo__extra {
  margin-top: 1.6rem;
  color: #fff;
  text-align: center;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 5.8667rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

/* ===== 立即激活：固定悬浮底部，不进文档流 ===== */
.cta {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 6.6667rem);
  z-index: 200;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 750px;
  padding: 0 4rem;
  transform: translateX(-50%);
  pointer-events: none;
}

.cta__btn {
  pointer-events: auto;
  display: flex;
  width: 92rem;
  height: 13.3333rem;
  justify-content: center;
  align-items: center;
  gap: 1.3333rem;
  border: none;
  border-radius: 2.9333rem;
  background: #1fe8aa;
  box-shadow: 0 -0.6667rem 0 0 #0a8761 inset;
  color: #000;
  text-align: center;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 4.8rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.cta__btn:active {
  transform: scale(0.98);
  filter: brightness(0.95);
}

/* ===== 客服浮窗 ===== */
.float-service {
  position: absolute;
  top: -26.6667rem;
  right: 1.6rem;
  z-index: 100;
  width: 21.3333rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.float-service__img {
  width: 100%;
  filter: drop-shadow(0 0.6rem 1.2rem rgba(0, 0, 0, 0.35));
}

.float-service__url {
  position: absolute;
  left: 50%;
  bottom: 0.9333rem;
  transform: translateX(-50%);
  width: 88%;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  text-align: center;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 2.6667rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  pointer-events: none;
}