:root {
  --gold: #c78727;
  --gold-light: #feeca3;
  --gold-deep: #995c14;
  --cream: #f7e5c6;
  --muted: #b9a484;
  --grey: #c6c6c6;
  --grey-dim: #8f8f8f;
  --line: #592f0e;
  --card-bg: rgba(45, 33, 19, .4);
  --card-shadow: inset 23px 15px 60px 0 rgba(85, 57, 19, .4), inset -20px -20px 30px 0 rgba(85, 57, 19, .2);
  /* 不要直接抄 Figma 导出的 `linear-gradient(163deg, #feeca3 21.811%, #c78727 48.206%)`。
     Figma 的渐变是按图形包围盒算的, 换到 344x48 这种又宽又扁的按钮上会压成一道很窄的
     硬边: 左上角直接是 100% 的 #feeca3, 一直到按钮中线还是纯亮色, 再突然收到基础金,
     看起来像一道斜扫的白光。
     下面这组值是从设计稿像素反推的 —— 设计稿左上角实测 rgb(231,195,113)(只到 #feeca3
     的 59%), 沿左边 48px 和沿上边 344px 都在约 50% 处收到基础金, 换算出方向 172deg。 */
  --gold-fill: linear-gradient(172deg, #e7c371 0%, #c78727 50%);
  --gold-fill-btn: linear-gradient(125deg, #feeca3 0%, #c78727 50.506%);
  --gold-text: linear-gradient(to left, #c78727 12.207%, #f7e5c6 100%);
  --shell: 1200px;
  --header-h: 76px;
  --dock-h: 112px;
  --font-family-base: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  min-width: 320px;
  margin: 0;
  color: #fff;
  background-color: #0a0603;
  font-family: var(--font-family-base);
  /* 设计稿 v2: 页脚底 2265 到画板底 2459 共 194 = 吸底条 112 + 底边 20 + 与页脚的间隔 62。
     v1 是 127(吸底条几乎贴着页脚), 滚到底时吸底条会压住页脚下沿 */
  padding-bottom: 194px;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

body.modal-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

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

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

.shell {
  width: min(var(--shell), calc(100% - 40px));
  margin: 0 auto;
}

/* 固定底图: 设计稿标注「内容上滑动，背景底不动 / 按比例固定-不变形」。
   用 fixed 层而不是 background-attachment:fixed —— 后者在 iOS Safari 上会退化成 scroll */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("assets/bg/page-tile.jpg") no-repeat center center;
  background-size: cover;
}

/* 加载动画 —— 与旧版落地页一致，main.js 取数成功后移除 */
.spinner-container {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0603;
}

.spinner {
  width: 42px;
  height: 42px;
  border: 3px solid rgba(199, 135, 39, .25);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- 通用组件 ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 18px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  border: 0;
  white-space: nowrap;
}

.btn--gold {
  background: var(--gold-fill);
  color: #fff;
  box-shadow: inset 0 -2px 1px 0 #7c4a00;
}

.btn--outline {
  background: rgba(199, 135, 39, .1);
  border: 1px solid var(--gold);
  color: var(--cream);
}

.btn__icon {
  width: 20px;
  height: 20px;
  flex: none;
}

/* 卡片毛玻璃: 设计稿「背景模糊 50」= blur(25px), UI 走查(2026-09-21)明确要求保留。
   2026-09-20 曾以"滚动掉帧 73.5%"为由整批去掉, 那是误判 —— 数字是在没有 GPU 的虚拟机
   (SwiftShader 软件渲染)上测的, 模糊全靠 CPU 硬算, 对真实设备没有代表性; 当时那条
   "顶栏抖动"bug 的真身是 DevTools 非整数缩放造成的 1px 闪线, 和性能无关。
   以后要动它, 先在有 GPU 的真机上拿到数据。 */
.card {
  position: relative;
  border-radius: 16px;
  background: var(--card-bg);
  box-shadow: inset 0 0 0 1px var(--gold), var(--card-shadow);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}

.divider {
  width: 32px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}

.section {
  position: relative;
  z-index: 1;
  padding: 62px 0 28px;
}

.section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 34px;
  color: var(--gold);
  font-size: 24px;
  line-height: 34px;
}

.kicker img {
  width: 119px;
  height: 20px;
  flex: none;
}

/* 左侧装饰要朝右(指向文字)。切图本身是朝左的, 设计稿给它加了 rotate(180)+scaleY(-1),
   等价于水平镜像 */
.kicker img:first-child {
  transform: scaleX(-1);
}

.title {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 72px;
  line-height: 82px;
}

.title span {
  color: var(--cream);
  font-weight: 300;
}

.title strong {
  font-weight: 500;
  background: var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-sub {
  font-size: 16px;
  line-height: 22px;
  color: #fff;
}

.section-note {
  margin-top: 24px;
  font-size: 12px;
  line-height: 17px;
  color: var(--muted);
  text-align: center;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  background: rgba(0, 0, 0, .78);
  border-bottom: 1px solid var(--line);
  /* 设计稿值(背景模糊 50)。曾降到 12px, 依据同样是软件渲染环境下的掉帧数据, 已还原 */
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  /* 与正文同一个 1200 版心。旧稿顶栏是 1728 的通栏, 设计稿 2026-09-20 更新后收进了版心
     (logo 从 x=96 挪到 360, 下载按钮右缘从 1824 挪到 1560)。 */
  width: min(var(--shell), calc(100% - 40px));
  margin: 0 auto;
}

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

.brand-logo {
  position: relative;
  width: 156px;
  height: 52px;
  flex: none;
}

/* 顶栏/页脚 logo 用设计交付的位图(logo-top-2x/3x.png, 对应 156x52), HTML 里用 srcset 按屏幕
   倍率取图。最早是图形和文字两张 SVG 按百分比拼的, 缩放时各自取整, 有锯齿和变形(UI 走查
   2026-09-21 问题 1/7); 中间换过一版自己从 Figma 导的整体 SVG, 设计随后给了正式文件, 以它为准。 */
.brand-logo img {
  width: 100%;
  height: 100%;
}

.brand-tagline {
  font-size: 13px;
  color: var(--gold);
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.desktop-nav a {
  display: flex;
  align-items: center;
  height: 42px;
  padding: 6px 4px;
  font-size: 14px;
  color: var(--grey);
  border-bottom: 2px solid transparent;
}

.desktop-nav a.is-active {
  color: var(--gold);
  font-weight: 600;
  border-bottom-color: var(--gold);
}

.top-download {
  padding: 10px 24px;
  border-radius: 10px;
  background: var(--gold-fill-btn);
  color: #000;
  font-size: 16px;
  box-shadow: inset 0 -2px 1px 0 #7c4a00;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 46px 0 0;
  touch-action: pan-y;
}

/* 首屏封面区: 基准是设计稿的 1080 底图带, 同时保证至少铺满一屏(矮屏上不留底缝)。
   片段条被吸底条盖住的问题由下面的矮屏压缩解决, 与封面高度无关。 */
.hero-media {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--header-h) * -1);
  /* 正好一屏: 从页面顶(header 之上)起算 100vh。写死 1080(设计稿底图带高度)的话,
     矮屏上封面会比首屏高出一截, 压在下一个区块底下 */
  height: 100vh;
  z-index: 0;
  overflow: hidden;
  background: url("assets/bg/hero.jpg") no-repeat center top;
  background-size: cover;
}

/* 封面轨道: 首尾各克隆一张做无缝循环, 拖动时去掉过渡跟手, 松手回弹 */
.hero-track {
  position: absolute;
  inset: 0;
  display: flex;
  will-change: transform;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

.hero-track.is-dragging {
  transition: none;
}

.hero-track.is-jumping {
  transition: none;
}

.hero-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}

.hero-slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  user-select: none;
  -webkit-user-drag: none;
}

/* 封面是人物竖图，比设计稿原底图亮，加一层压暗保证左侧文案可读。
   还原设计稿(HERO_MODE='design')时不加这层 —— 设计稿原图本身够暗。 */
body.hero-covers .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 5, 3, .86) 0%, rgba(8, 5, 3, .58) 38%, rgba(8, 5, 3, .12) 72%),
    linear-gradient(0deg, rgba(10, 6, 3, .92) 0%, rgba(10, 6, 3, 0) 30%);
}

.hero-media video,
.hero-media .hero-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  min-height: 507px;
  justify-content: center;
}

.hero-eyebrow {
  font-size: 14px;
  font-weight: 500;
  color: var(--gold);
}

.hero-title {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 72px;
  line-height: 82px;
  margin: 0;
  font-weight: 300;
}

.hero-title span {
  color: var(--cream);
}

.hero-title strong {
  font-weight: 500;
  background: var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lead {
  font-size: 16px;
  color: #fff;
}

.hero-cta {
  width: 282px;
  height: 46px;
}

.hero-note {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

/* ---------- 精选片段 ---------- */

.clips {
  position: relative;
  z-index: 1;
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.clips-head {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.clips-head__left {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
}

.clips-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(0, 0, 0, .4);
  font-size: 12px;
  color: var(--muted);
}

.clips-pill b {
  font-weight: 400;
  color: var(--gold);
}

.clips-pill i {
  font-style: normal;
  color: var(--grey-dim);
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 第一版只切封面, 没有短片: 播放/声音控件、「宣传短片」角标、「点击片段，立即播放」
   这三处提示一并隐藏。body.has-video 由 script.js 在「视频标签存在且片段配了 src」时
   加上, 视频接入后这些提示自动回来。 */
body.hero-covers:not(.has-video) .player-controls,
body.hero-covers:not(.has-video) .mobile-player__tag,
body.hero-covers:not(.has-video) .clips-pill__hint {
  display: none;
}

.player-btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  line-height: 1;
  padding: 0 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .4);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}

.player-btn.is-on {
  background: rgba(199, 135, 39, .1);
  box-shadow: inset 0 0 0 1px #fff;
}

.player-btn img {
  width: 28px;
  height: 28px;
  flex: none;
}

.clip-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.clip-card {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 124px;
  padding: 12px;
  /* 描边走 inset 阴影(和设计稿一样不占布局宽度), 必须显式去掉 button 的默认边框,
     否则 UA 会画一圈 2px #a8a8a8, 把选中态盖住 */
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--line);
  background: rgba(0, 0, 0, .6);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: inherit;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}

/* 缺省封面卡: 设计稿是 2px 深色描边 */
.clip-card.is-empty {
  box-shadow: inset 0 0 0 2px var(--line);
}

.clip-card.is-active,
.clip-card.is-empty.is-active {
  box-shadow: inset 0 0 0 2px var(--gold-deep);
}

.clip-card__cover {
  width: 78px;
  height: 100px;
  flex: none;
  border-radius: 6px;
  overflow: hidden;
  background: #2c1e14;
}

.clip-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clip-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.clip-card__no {
  font-size: 20px;
  line-height: 22px;
  font-weight: 300;
  color: var(--gold);
}

.clip-card__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--cream);
}

.clip-card__desc {
  font-size: 12px;
  color: var(--grey-dim);
  line-height: 1.5;
}

/* 移动端内嵌播放器控件：桌面端隐藏，视频此时是首屏背景 */
.mobile-player__tag,
.mobile-player__bar {
  display: none;
}

.mobile-player__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .5);
  font-size: 12px;
  color: var(--cream);
}

.mobile-player__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
}

.mobile-player__toggle,
.mobile-player__mute {
  width: 28px;
  height: 28px;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.mobile-player__time {
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
}

.mobile-player__progress {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .25);
  overflow: hidden;
}

.mobile-player__progress i {
  display: block;
  height: 100%;
  width: 0;
  background: #fff;
}

.cta-banner__art picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- 联系 ---------- */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.contact-card h3,
.download-card h3 {
  font-size: 24px;
  line-height: 33px;
  font-weight: 500;
  color: var(--cream);
}

.contact-card p {
  font-size: 14px;
  line-height: 20px;
  color: #fff;
}

.contact-card .contact-card__no {
  font-size: 12px;
  line-height: 17px;
  color: var(--gold);
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 42px 32px;
}

.contact-card .btn {
  width: 100%;
  height: 46px;
  padding: 0 18px;
  font-size: 14px;
}

.btn__arrow {
  width: 16px;
  height: 16px;
  flex: none;
}

/* ---------- 下载 ---------- */

.download-grid {
  display: grid;
  /* 马甲包没有 App Store 商城版，下载区只有「苹果手机 / 安卓手机」两张卡 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 42px;
}

.download-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px;
  border-radius: 16px;
  background: var(--card-bg);
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: center;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}

.download-card p {
  font-size: 14px;
  line-height: 20px;
  color: #fff;
}

.download-card .btn {
  width: 100%;
  height: 48px;
  padding: 0 18px;
}

/* ---------- 底部 CTA ---------- */

.cta-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 158px;
  padding: 32px 36px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(199, 135, 39, .04);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}

.cta-banner__art {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 806px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}

.cta-banner__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.cta-banner__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.cta-banner__copy small {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
}

.cta-banner__copy .title {
  justify-content: flex-start;
  font-size: 42px;
  line-height: 58px;
}

.cta-banner .btn {
  position: relative;
  z-index: 1;
  width: 150px;
}

/* ---------- Footer ---------- */

.site-footer {
  height: 90px;
  display: flex;
  align-items: center;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 12px;
  line-height: 17px;
  color: var(--grey-dim);
}

.footer-logo {
  position: relative;
  width: 96px;
  height: 32px;
  flex: none;
}

.footer-logo img {
  width: 100%;
  height: 100%;
}

/* ---------- 吸底下载条 ---------- */

.dock-cta {
  display: none;
}

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 70;
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}

/* 首屏不展示下载栏(产品 2026-09-19 确认): 首屏滑出一部分后再浮出来。
   只作用于 PC —— H5 设计稿的一频幕里下载栏本来就是显示的。 */
@media (min-width: 761px) {
  body.dock-hidden .dock {
    opacity: 0;
    transform: translateY(130%);
  }

  body.dock-hidden .dock-inner {
    pointer-events: none;
  }
}

.dock-inner {
  display: flex;
  align-items: center;
  gap: 42px;
  height: var(--dock-h);
  padding: 16px 24px 16px 32px;
  border-radius: 24px;
  background: rgba(45, 33, 19, .78);
  box-shadow: inset 0 0 0 1px var(--line);
  /* 设计稿值, 同 header */
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  pointer-events: auto;
}

.dock-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dock-badge {
  position: relative;
  width: 48px;
  height: 48px;
  flex: none;
}

/* 91/logo/footer 整体导出(48x48, 含圆角底板), 同样不再用三张图叠 */
.dock-badge img {
  width: 100%;
  height: 100%;
}

.dock-brand__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dock-brand__text b {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--cream);
}

.dock-brand__text span {
  font-size: 12px;
  line-height: 16px;
  color: var(--grey);
}

.dock-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.dock-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 1;
  height: 79px;
  padding: 12px 20px;
  border-radius: 10px;
  background: rgba(199, 135, 39, .1);
  box-shadow: inset 0 0 0 1px var(--gold);
}

.dock-btn--primary {
  background: var(--gold-fill);
  box-shadow: none;
}

.dock-btn img {
  width: 32px;
  height: 32px;
  flex: none;
}

.dock-btn__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dock-btn b {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--cream);
}

.dock-btn__text span {
  font-size: 12px;
  line-height: 16px;
  color: #fff;
}

.dock-btn--primary b,
.dock-btn--primary span {
  color: #fff;
}

/* ---------- PC 首屏垂直自适应 ----------
   设计稿按 1920x1080 排: 上边距 46 + 文案区 507 + 精选片段上下各 32,
   片段条底落在视口 77.9% 处, 下方 207 在设计稿里是下一个区块(原「附近」卡, v2 起是「联系我们」)探进首屏的部分, 不是空白。
   所以不能用 margin 去占位(会把下面整体推走), 而是把首屏这几个纵向值
   按 100vh/1080 等比缩放 —— 代入 1080 就是 46/507/32, 与设计稿完全一致;
   视口变高变矮时首屏各元素维持同样的比例关系。
   只动首屏的纵向间距, 字号与卡片尺寸一律不变。 */

@media (min-width: 761px) {
  .hero {
    padding-top: calc(100vh * 46 / 1080);
  }

  .hero-copy {
    min-height: calc(100vh * 507 / 1080);
  }

  .clips {
    padding: calc(100vh * 32 / 1080) 0;
  }
}

/* 首屏只放封面 + 文案 + 精选片段条(产品 2026-09-19 确认):
   首屏撑成正好一个视口高, 文案区在剩余空间里居中, 片段条压到底,
   下一个区块(v2 起是「联系我们」)整体推到折线以下 —— 设计稿里它是探进首屏的, 这里主动偏离。 */

@media (min-width: 761px) {
  .hero {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-h));
  }

  .hero-inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  .hero-copy {
    flex: 1 1 auto;
    min-height: 0;
    justify-content: center;
  }

  .clips {
    flex: none;
  }
}

/* 常用笔记本的视口高度大多低于设计稿的 1080(1366x768 约 625、1080p@125% 约 720、
   1440x900 约 780)。首屏的硬性下限是 header 76 + 文案自然高 381 + 片段条 244 = 701,
   620 那档差 76px, 光靠等比缩放间距不够, 这里再收一道:
   只收文案区的纵向间距与上边距, 700 以下额外隐藏末行小字, 字号与卡片尺寸不动。 */

@media (min-width: 761px) and (max-height: 800px) {
  .hero-copy {
    gap: 18px;
  }
}

@media (min-width: 761px) and (max-height: 700px) {
  .hero-copy {
    gap: 12px;
  }

  .hero-note {
    display: none;
  }
}

/* ---------- 桌面端：按 1920 设计稿锁定区块高度 ---------- */

@media (min-width: 761px) {

  .contact-card {
    min-height: 285px;
  }

  .contact-card .btn {
    margin-top: auto;
  }

  .download-card {
    min-height: 166px;
  }

  .download-card .btn {
    margin-top: auto;
  }

  .cta-banner {
    height: 158px;
  }
}

/* ---------- 响应式 ---------- */

@media (max-width: 1240px) {
  .hero-title,
  .title {
    font-size: 56px;
    line-height: 66px;
  }

  .clip-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}

@media (max-width: 1000px) {

  .desktop-nav {
    display: none;
  }

  .dock-btn span {
    display: none;
  }
}

/* ---------- 移动端：按 390 H5 设计稿 1:1 ---------- */

@media (max-width: 760px) {
  :root {
    --header-h: 46px;
    --dock-h: 62px;
  }

  /* 设计稿 v2: 页脚底 2873 到画板底 2951 共 78 = 吸底条 62 + 上方 16 间隔 */
  body {
    padding-bottom: calc(var(--dock-h) + 16px);
  }

  .shell {
    width: calc(100% - 32px);
  }

  /* H5 设计稿用的是竖版底纹 */
  .page-bg {
    background-image: url("assets/bg/page-tile-h5.jpg");
  }

 /* 区块节奏: 上 32 / 标题到内容 24 / 下 20 */
  .section {
    padding: 32px 0 20px;
  }

  .grid-3,
  .download-grid {
    margin-top: 24px;
    gap: 12px;
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }

  .section-note {
    margin-top: 24px;
    text-align: left;
  }

  /* 区块标题 */
  .kicker {
    height: 18px;
    gap: 4px;
    font-size: 13px;
    line-height: 18px;
  }

  .kicker img {
    width: 71px;
    height: 12px;
  }

  .title {
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: 36px;
    line-height: 50px;
    letter-spacing: -.5px;
  }

  .section-sub {
    font-size: 14px;
    line-height: 20px;
  }

  /* H5 设计稿的下载区标题没有副标题；联系区副标题为单行 */
  #download .section-sub,
  .section-sub .sub-more {
    display: none;
  }

 .contact-card p {
    line-height: 19px;
  }

  /* Header */
  .header-inner {
    width: calc(100% - 32px);
  }

  .brand-logo {
    width: 96px;
    height: 32px;
  }

  .brand-tagline {
    display: none;
  }

  .top-download {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 14px;
  }

  /* 首屏：文案居中，视频改为内嵌卡片 */
  .hero {
    padding: 24px 0 0;
  }

  .hero-copy {
    min-height: 0;
    gap: 12px;
    align-items: center;
    text-align: center;
  }

  .hero-eyebrow {
    font-size: 14px;
    line-height: 20px;
  }

  .hero-title {
    gap: 0;
    font-size: 46px;
    line-height: 64px;
  }

  .hero-lead {
    font-size: 14px;
    line-height: 20px;
  }

  .hero-cta {
    width: 197px;
  }

  .hero-note {
    font-size: 12px;
    line-height: 17px;
  }

  .hero-media {
    position: relative;
    inset: auto;
    top: auto;
    height: 244px;
    /* 桌面端的 min-height:100vh(封面铺满一屏)在移动端要清掉, 否则短片卡会被撑到满屏 */
    min-height: 0;
    margin-top: 32px;
    border-radius: 12px;
    overflow: hidden;
    background: #14100b;
  }

  /* 卡片内不需要压暗, 文案不在封面上 */
  .hero-media::after {
    display: none;
  }

  .hero-slide img {
    object-position: center 18%;
  }

  .hero-media video {
    display: block;
    width: 100%;
    height: 244px;
    object-fit: cover;
  }

  .mobile-player__tag {
    display: block;
    top: 13px;
    left: 15px;
    padding: 0;
    background: none;
    font-size: 11px;
    line-height: 16px;
    color: #fff;
  }

  .mobile-player__bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
    padding: 10px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .7) 68.182%);
  }

  .mobile-player__progress {
    order: -1;
    width: 100%;
    flex: none;
    height: 4px;
    margin-bottom: 4px;
    border-radius: 2px;
  }

  .mobile-player__time {
    font-size: 12px;
    color: #fff;
  }

  .mobile-player__mute {
    margin-left: auto;
  }

  /* 精选片段：设计稿标注「横滑动」 */
  .clips {
    padding: 0;
    gap: 0;
  }

  .clips-head {
    height: 52px;
    min-height: 52px;
    gap: 8px;
  }

  .clips-head__left,
  .clips-pill {
    display: contents;
  }

  .clips-title {
    order: 1;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    color: var(--muted);
  }

  .clips-title [data-clip-index] {
    display: none;
  }

  .clips-pill__hint {
    order: 2;
    font-size: 12px;
    line-height: 17px;
    color: var(--muted);
  }

  .clips-pill__count {
    order: 3;
    display: flex;
    align-items: center;
    height: 28px;
    margin-left: auto;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .4);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
    font-size: 12px;
  }

  .player-controls {
    display: none;
  }

  .clip-list {
    display: flex;
    gap: 12px;
    margin-right: -16px;
    padding-right: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .clip-list::-webkit-scrollbar {
    display: none;
  }

  .clip-card {
    flex: 0 0 190px;
    height: 116px;
    scroll-snap-align: start;
  }

  .clip-card__cover {
    width: 72px;
    height: 92px;
  }

  .contact-card h3,
  .download-card h3 {
    font-size: 18px;
    line-height: 25px;
  }

  /* 联系 */
  .contact-card {
    gap: 12px;
    padding: 24px;
    border-radius: 12px;
  }

  .contact-card .btn {
    height: 44px;
    font-size: 13px;
  }

  /* 下载 */
  .download-grid {
    grid-template-columns: 1fr;
  }

  .download-card {
    gap: 10px;
    padding: 22px;
    border-radius: 16px;
  }

  /* 宽度不要再减内边距: 卡片已经有 padding:22px, 内容宽就是 358-44=314, 正是设计稿的
     按钮宽度, 所以 width:100% 即可。之前写成 calc(100% - 44px) 等于把内边距扣了两遍,
     按钮只剩 270, 比设计稿窄 44。 */
  .download-card .btn {
    height: 42px;
  }

  /* 底部 CTA: 设计稿是 文案 → 按钮 → 人物图 */
  .cta-banner {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: auto;
    padding: 24px 24px 0;
    border-radius: 16px;
  }

  .cta-banner__copy {
    order: 1;
  }

  .cta-banner .btn {
    order: 2;
  }

  .cta-banner__art {
    order: 3;
    position: relative;
    right: auto;
    top: auto;
    width: calc(100% + 48px);
    height: 158px;
    margin: 26px -24px 0;
    -webkit-mask-image: linear-gradient(0deg, #000 60%, transparent 100%);
    mask-image: linear-gradient(0deg, #000 60%, transparent 100%);
  }

  .cta-banner__copy {
    gap: 12px;
  }

  .cta-banner__copy .title {
    font-size: 32px;
    line-height: 58px;
  }

  .cta-banner .btn {
    width: 100%;
    height: 48px;
    margin-top: 16px;
  }

  /* Footer */
  .site-footer {
    height: 74px;
  }

  /* 吸底条: 通栏 + 顶边线 + 单按钮 */
  .dock {
    bottom: 0;
  }

  .dock-inner {
    width: 100%;
    height: var(--dock-h);
    gap: 12px;
    padding: 12px 18px;
    border-radius: 0;
    box-shadow: inset 0 1px 0 0 var(--line);
  }

  .dock-brand__text span {
    display: block;
  }

  .dock-actions {
    display: none;
  }

  .dock-cta {
    display: flex;
    height: 38px;
    margin-left: auto;
    padding: 0 20px;
    font-size: 16px;
  }
}

/* 360 以下的窄屏: H5 设计稿基准是 390, 标题 36px 单行在 320 上会撑出 18px 横向溢出,
   这里按视口宽收一档。361 及以上不触发, 390 设计稿尺寸不受影响。 */

@media (max-width: 360px) {
  .title {
    flex-wrap: wrap;
    white-space: normal;
    font-size: 32px;
    line-height: 1.4;
    letter-spacing: 0;
  }

 /* 「50,
 000+」这类数字串不能换行 {
    font-size: 30px;
    line-height: 42px;
  }
}