/* =============================================
   18BT.CC 官网样式 v3
   修改点：
   1. 去掉底部多余下载条（bottom-dl 区域）
   2. 背景色改为 #010101，消除与 hero 图底部色差
   3. 顶部导航栏磨砂模糊效果（backdrop-filter）
   4. 下载APP按钮加安卓图标
   5. 合作伙伴图片左右间距一致
   6. 网页版在线链接改为 https://test-h5.18bt.vip/
   7. 「下载应用」字号放大4个字号（13→17px）
   8. 手机展示图缩小四分之一（88%→66%）
============================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&display=swap');

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

:root {
  --green-start:  #33E28D;
  --green-end:    #A6DE7A;
  --green-shadow: #33C06A;
  --green-border: rgba(51, 226, 141, 0.35);
  /* 修改2：背景色改为 #010101 消除色差 */
  --bg:           #010101;
  --bg-card:      #0e1a10;
  --bg-footer:    #141615;
  --text:         #e8f5e9;
  --text-muted:   #7a9a80;
  --top-h:        56px;
  --top-offset:   10px;
  --bottom-h:     64px;
}

html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }

body {
  font-family: 'Noto Sans SC', -apple-system, 'PingFang SC', sans-serif;
  background: var(--bg);
  color: var(--text);
  /* 全宽适配：移除 max-width 限制，适配所有手机屏幕宽度 */
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
}

@media (min-width: 600px) {
  body { min-height: 100vh; }
  html { background: var(--bg); }
}

img { display: block; max-width: 100%; height: auto; }
a   { text-decoration: none; color: inherit; }

/* =============================================
   设备类控制
============================================= */
.android-only { display: none; }
.ios-only     { display: none; }

body.is-android .android-only         { display: block; }
body.is-android .android-only.cta-btn { display: flex; }
body.is-ios     .ios-only              { display: block; }

/* =============================================
   1. 顶部悬浮导航栏
   距左右上各 10px，圆角 12px
   修改3：磨砂模糊效果 backdrop-filter
============================================= */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  /* padding 四周均为 10px，让圆角卡片四边都有间距 */
  padding: var(--top-offset);
  z-index: 1000;
  pointer-events: none;
  /* 关键：外层容器必须完全透明，否则 padding 区域会显示黑色背景 */
  background: transparent;
}

.top-bar__inner {
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--top-h);
  padding: 0 14px;
  border-radius: 12px;
  /* 修改1：磨砂玻璃效果——页面滚动经过时内容会被模糊 */
  background: rgba(5, 8, 6, 0.45);
  backdrop-filter: blur(28px) saturate(240%) brightness(0.95);
  -webkit-backdrop-filter: blur(28px) saturate(240%) brightness(0.95);
  border: 1px solid rgba(255,255,255,0.10);
  /* 底部微光泽强化玻璃边缘感 */
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 24px rgba(0,0,0,0.4);
}

.top-bar__logo img {
  height: 34px;
  width: auto;
  object-fit: contain;
}

/* 顶部右侧按钮：绿色描边（不加安卓图标） */
.top-bar__btn {
  padding: 8px 16px;
  border: 1.5px solid var(--green-start);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--green-start);
  letter-spacing: 0.04em;
  background: transparent;
  transition: background .2s;
}
.top-bar__btn:active { background: rgba(51,226,141,.12); }

/* =============================================
   2. Hero 首屏
   背景图从页面最顶部开始
   文字和按钮叠加在图片上层
   修改2：hero 背景与 body 背景色一致 #010101
============================================= */
.hero {
  position: relative;
  width: 100%;
  /* 高度由 spacer 撑开，无需 padding-bottom */
  /* overflow:hidden 已移除——它会阻断 backdrop-filter 捕获内容，导致磨砂失效 */
  background: var(--bg);
}

/* 占位元素：按 hero.png 真实比例 150.3% 撑开容器 */
.hero__spacer {
  display: block;
  width: 100%;
  /* 用 aspect-ratio 精确控制比例，避免宽屏下 padding-top 百分比过大 */
  aspect-ratio: 1170 / 1758;
  /* 限制最大高度，桌面端不超过 100vh */
  max-height: 100vh;
}

/* 背景图：绝对定位铺满整个 hero 容器 */
.hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
}

/* 图片底部渐变过渡，消除硬边色差 */
.hero__bg::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  z-index: 1;
}

/* 顶部渐变遮罩：已移除，避免在导航栏下方形成深色底框视觉 */
/* .hero::before { display: none; } */

/* 底部渐变遮罩（让 CTA 按钮区更清晰） */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 160px;
  background: linear-gradient(to top, rgba(1,1,1,0.92) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* 文字区：绝对定位叠加在图片上，位于图片顶部 */
.hero__text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-top: calc(var(--top-h) + var(--top-offset) + 20px);
  text-align: center;
  z-index: 2;
  text-shadow: 0 2px 16px rgba(0,0,0,.9);
}

.hero__sub {
  /* 修改7：「下载应用」字号从 13px 放大 4 个字号到 17px */
  font-size: 17px;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}

.hero__title {
  font-size: 23px;
  font-weight: 900;
  color: #fff;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

/* CTA 按钮区：绝对定位在 Hero 底部 */
.hero__cta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 12px;
  padding: 20px 16px;
  z-index: 2;
}

/* =============================================
   CTA 按钮
============================================= */
.cta-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* 修改3：统一高度，两个按钮都用 52px，outline 按钮通过 border-box 与 green 按钮视觉等高 */
  height: 52px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: opacity .2s;
}
.cta-btn:active { opacity: .8; }

/* 左侧：灰色描边 */
.cta-btn--outline {
  border: 1.5px solid rgba(255,255,255,0.28);
  color: #fff;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* 修改2：补加2px高度，补偿绿色按钮阴影2px导致的视觉高度差 */
  height: 54px;
}

/* 右侧：绿色渐变（安卓专属） */
.cta-btn--green {
  background: linear-gradient(180deg, var(--green-start) 0%, var(--green-end) 100%);
  color: #071209;
  border: none;
  border-radius: 8px;
  /* 阴影 Y2，颜色#33C06A，无模糊 */
  box-shadow: 0 2px 0 var(--green-shadow);
  /* 修改3：绿色按钮含阴影，总视觉高度 = height(52) + shadow(2) = 54px
     outline 按钮 height:52px 与之视觉对齐 */
}

/* 修改4：Hero CTA 区下载APP按钮的安卓图标 */
.cta-btn__android-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  flex-shrink: 0;
  filter: brightness(0);
}

/* iOS/桌面：只有一个按钮，居中 */
body:not(.is-android) .hero__cta {
  justify-content: center;
}
body:not(.is-android) .cta-btn--outline {
  flex: none;
  min-width: 180px;
}

/* =============================================
   提示横幅
============================================= */
.notice {
  /* 修改2：上移8px，margin-top 从 14px 改为 6px */
  margin: 6px 16px 0;
  padding: 11px 14px;
  background: rgba(240, 192, 64, 0.07);
  border: 1px solid rgba(240, 192, 64, 0.25);
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: #d4b44a;
  line-height: 1.55;
}
.notice__icon { flex-shrink: 0; margin-top: 1px; }

/* =============================================
   Android 安装步骤
============================================= */
.steps {
  padding: 20px 16px 24px;
}

.steps__platform {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--green-start);
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.steps__title {
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 18px;
}

.steps__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.step-card {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 14px;
}

.step-card--highlight {
  border-color: rgba(51,226,141,0.22);
  background: linear-gradient(135deg, rgba(51,226,141,0.05) 0%, var(--bg-card) 100%);
}

.step-card__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.step-card__icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 10px;
  flex-shrink: 0;
}

.step-card__info { flex: 1; }

.step-card__num {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--green-start);
  letter-spacing: 0.08em;
  margin-bottom: 3px;
}

.step-card__desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}

.step-card--highlight .dl-btn {
  margin-top: 12px;
}

.step-card__arrow {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

/* 修改3：步骤1箭头弹跳动画 */
@keyframes arrowBounce {
  0%, 100% { transform: translateY(0);    opacity: 1; }
  40%       { transform: translateY(5px);  opacity: 0.7; }
  60%       { transform: translateY(3px);  opacity: 0.85; }
}

.step-card__arrow svg {
  animation: arrowBounce 1.8s ease-in-out infinite;
}

/* =============================================
   通用绿色下载按钮
   渐变 #33E28D → #A6DE7A，圆角8，阴影Y2无模糊
   修改4：加安卓图标
============================================= */
.dl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  background: linear-gradient(180deg, var(--green-start) 0%, var(--green-end) 100%);
  color: #071209;
  font-size: 15px;
  font-weight: 700;
  border-radius: 8px;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 0 var(--green-shadow);
  transition: opacity .2s;
}
.dl-btn:active { opacity: .82; }

/* 修改4：安卓图标尺寸 */
.dl-btn__android-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  flex-shrink: 0;
  /* SVG 默认是黑色，按钮文字也是深色，保持一致 */
  filter: brightness(0);
}

/* =============================================
   手机展示图
   修改8：缩小四分之一（88% → 66%）
============================================= */
.mockup {
  padding: 8px 0 0;
  background: var(--bg);
  text-align: center;
}

.mockup__img {
  /* 修改8：从 88% 缩小到 66%（四分之一缩减） */
  width: 66%;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 12px 40px rgba(0,0,0,.55));
}

/* =============================================
   底部大下载按钮区
   修改1：去掉多余的类似顶部的下载条
   （bottom-dl 是页面内正常按钮区，不是悬浮条，保留）
============================================= */
.bottom-dl {
  padding: 20px 16px 28px;
  background: var(--bg);
}

/* =============================================
   页脚（背景 #141615）
============================================= */
.footer {
  background: var(--bg-footer);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 24px 16px 40px;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.footer__logo {
  height: 28px;
  width: auto;
  object-fit: contain;
  opacity: 0.75;
}

.footer__desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 18px;
}

.footer__partners-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* 修改5：合作伙伴图片左右间距一致
   width:100% 配合父级 padding:0 16px 实现两侧等距 */
.footer__partners {
  width: 100%;
  height: auto;
  opacity: 0.85;
  margin-bottom: 18px;
  /* 确保图片不超出父级 padding 范围 */
  display: block;
}

.footer__copy {
  font-size: 11px;
  color: rgba(255,255,255,0.2);
  text-align: center;
}

/* 安卓端页脚正常底部间距 */
body.is-android .footer {
  padding-bottom: 40px;
}