/* ============================================
   Components — 内容板块组件样式（全站共享）
   ─────────────────────────────────────────
   所有 case 页面共用此文件；新增/修改组件样式只改这里，
   所有时期创建的页面自动生效。
   引用顺序（index.html）：
      site-shell.css → components.css
   ============================================ */

/* 3D 样机 Banner 超大标题用系统压缩/冲击字体（Impact 等），避免引入外部字体被 CSP 拦截 */

/* ========== HERO SECTION ========== */
.hero-section {
  position: relative;
  padding-top: 2rem; /* 小Banner首屏：仅媒体时的紧凑顶部留白（旧版 10rem 给标题留位） */
  /* min-height: 100vh; */
  overflow: hidden;
}

.hero-video-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-video-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  position: relative;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(245,245,245,0) 0%, rgba(245,245,245,0.03) 50%, var(--color-background) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
}

/* Hero Title (split char animation) */
.hero-title {
  font-size: 0; /* 消除 span 之间空白字符产生的空隙 */
  font-weight: 600;
  line-height: 162.8px;
  letter-spacing: -7.4px;
  color: var(--color-black);
  /* margin-bottom: 48px; */
}

.char-animate {
  display: inline-block;
  font-size: 148px; /* span 内恢复字号 */
  opacity: 0;
  transform: translateY(40px) rotateX(-20deg);
}

.hero-title.visible .char-animate {
  animation: charReveal 0.6s var(--motion-easing-emphasized) forwards;
  animation-delay: calc(0.08s * var(--char-index));
}

@keyframes charReveal {
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
  }
}

/* Hero Video Embed */
.hero-video-embed {
  width: 100%;
  aspect-ratio: 1136 / 608;
  border-radius: 1.5625rem;
  overflow: hidden;
  /* margin-bottom: 80px; */
  position: relative;
}

.video-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #2d2d44 0%, #1a1a2e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.5625rem; /* 25px，与原版视频板块一致 */
  position: relative;
  overflow: hidden;
}

/* 暖色调占位（模拟原版室内生活场景视频画面） */
.warm-shot {
  background: linear-gradient(135deg, #c8b8a8 0%, #e8dcc8 40%, #b8a898 100%);
}

.warm-shot::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255,255,255,0.25) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 70%, rgba(90,70,50,0.2) 0%, transparent 45%);
}

.video-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
  transform: translateX(-100%);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  to {
    transform: translateX(100%);
  }
}

.placeholder-icon {
  position: relative;
  z-index: 1;
  opacity: 0.6;
  transition: opacity var(--transition-base);
}

.video-placeholder:hover .placeholder-icon {
  opacity: 1;
}

/* ---- Brand Logo Section — 独立板块（放在 Introduction 下方），不是 intro 的一部分
 * PC：水平居中；高度约 60px，宽度自适应；
 * Mobile：水平居左；高度约 30~40px
 */
.brand-logo-section {
  margin-top: 0;
  margin-bottom: 0;
  padding: 1.5rem 0 3rem;  /* 顶部紧凑（紧接 intro），底部留 48px 过渡到下一个板块 */
}

.brand-logo-wrap {
  width: 100%;
  display: flex;
  justify-content: center;  /* PC 居中 */
  align-items: center;
}

.brand-logo-img {
  height: 60px;    /* 高度固定 */
  width: auto;     /* 宽度自动 */
  max-width: 60%;  /* 不超过 container 一半宽度 */
  display: block;
}

/* Intro Section (project-info)
 * ⚠️ 间距控制点：section 的 padding-block（与其他板块一致的写法）
 * PC: 两栏 grid 1:1
 *   - 左 50%: Introduction 小字（纵向贴顶部）
 *   - 右 50%: 大副标题 + 所有信息行（Year/Industry/Scope/Timeline）
 *   - 右栏里每个信息行内部再分 label 左 / value 右（flex space-between）
 */

/* 外层 section：间距统一由 section 的 padding-block 控制（与其他板块一致），
   内层 .project-info 不设上下 margin，避免双重间距 */
.intro-section.container {
  margin-top: 0;
  margin-bottom: 0;
  padding-block: 4rem 2rem;   /* 上 4rem，下 2rem（下边距减半，紧接客户 Logo 条） */
}

.project-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3rem;
  row-gap: 0;
  margin: 0;
}

.section-label {
  /* Introduction 小字：直接放 project-info 左栏 */
  grid-column: 1;
  grid-row: 1 / span 10;
  align-self: start;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-black);
  letter-spacing: -0.3px;
}

.intro-heading {
  /* 大副标题：放右栏第 1 行 */
  grid-column: 2;
  grid-row: 1;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.88px;
  color: var(--color-black);
  margin: 0 0 2rem 0;
}

/* info-main 整体放在 grid 右栏第 2 行 */
.info-main {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
}

/* 每条 info-row：内部 label + value 用 flex space-between */
.info-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  border-top: 1px solid #e2e2e2;
  padding: 1.25rem 0;
}

.row-label {
  font-size: 12px;
  font-weight: 500;
  line-height: 15.6px;
  letter-spacing: -0.48px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.row-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-black);
  text-align: right;
}

.row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.row-tag {
  font-size: 12px;
  color: var(--color-black);
  background: var(--color-gray-ultra-light);
  padding: 0.1875rem 0.5rem;
  border-radius: 100px;
  font-weight: 500;
}

/* Info Bottom（Logo 区）：整体也在右栏，PC 居中（justify-self: center 水平居中） */
.info-bottom {
  grid-column: 2;
  margin-top: 3.75rem; /* 60px */
  display: flex;
  justify-content: center; /* PC 居中显示 */
  align-items: center;
}

.info-logo {
  width: 100%;
  display: flex;
  justify-content: center; /* PC: logo 居中 */
  align-items: center;
}

.info-logo img,
.info-logo svg.project-logo-placeholder,
.info-logo .project-logo-img {
  width: 20% !important;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Section Label (text--xs) */
.section-label {
  font-size: 16px;
  font-weight: 500;
  line-height: 15.6px;
  letter-spacing: -0.48px;
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
}

/* ========== CHALLENGES SECTION ========== */
.challenges-section {
  margin-top: 0;
  margin-bottom: 0;
  /* padding-block 只控制上下，左右缩进交给 .container（PC 36px / 移动端 16px），保证全站对齐 */
  padding-block: 5rem;
}

.challenges-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.challenges-content {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.challenges-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.section-heading {
  font-size: 30px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -1.2px;
  color: var(--color-black);
  margin-bottom: 2rem;
}

.challenges-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.challenges-bottom {
  display: flex;
  align-items: center;
  gap: 24px;
}

.webflow-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* ========== TWO-BLOCKS SECTIONS (Landing / Platform / Social / Advertising) ========== */
/* 原版：two-blocks/screen/image 展示区块之间仅 4px 紧贴，
   只有 project-info/challenges/testimonials 文字内容区才有 116px 大间距 */
.two-blocks-section {
  margin-top: 0.25rem; /* 4px */
  margin-bottom: 0.25rem;
}

.two-blocks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem; /* 4px */
  align-items: stretch;
}

/* 占位模式（videoType=placeholder）下：只有文字卡片，独占整行 */
.two-blocks.two-blocks--single {
  grid-template-columns: 1fr;
}

/* 左右互换：左字右图（后台「左右布局」= 左字右图 时）。
   仅桌面（>1024px，两列并排）生效——order 反转让文字排左、图片排右；
   移动端（≤1024px，两列变一列堆叠）恢复默认 order，保持"上图下字"。 */
.two-blocks.two-blocks--text-first .block-text { order: -1; }
.two-blocks.two-blocks--text-first .block-image { order: 0; }

.block {
  min-width: 0;
}

.block-image {
  display: flex;
}

.block-img-placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: 722 / 785;
  background: linear-gradient(135deg, #2d2d44 0%, #1a1a2e 100%);
  border-radius: 1.5625rem; /* 25px */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.block-img-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

/* 复用瀑布流(截图墙同款)图片鼠标经过放大规则：悬停时图片放大到 1.04，
   容器 overflow:hidden 自动裁切。作用域排除带 data-focus 的图，避免与焦点系统内联 transform 冲突 */
.block-img-placeholder img:not([data-focus]) {
  transition: transform var(--transition-base);
}
.block-img-placeholder:hover img:not([data-focus]) {
  transform: scale(1.04);
}

.block-img-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
  transform: translateX(-100%);
  animation: shimmer 2.5s infinite;
}
/* 图片加载后 ::before 被 img 盖住但 shimmer 仍每 2.5s 无限循环（无意义的常驻动画）→ 有 img 时停掉 */
.block-img-placeholder:has(img)::before {
  animation: none;
  opacity: 0;
}

/* 文字区块：白色卡片 */
.block-text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 24px */
  background: var(--color-white);
  border-radius: 1.5625rem; /* 25px */
  padding: 3.75rem; /* 60px */
}

.block-text .section-label {
  margin-bottom: 0;
}

/* 说明文字：30px h3 样式，推到卡片底部（原版 margin-top auto 等效） */
.block-desc {
  margin-top: auto;
  font-size: 1.875rem; /* 30px */
  font-weight: 500;
  line-height: 2.25rem; /* 36px */
  letter-spacing: -1.2px;
  color: var(--color-black);
}

.img-placeholder-label {
  position: relative;
  z-index: 1;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
}

/* ========== IMAGE SECTION (图片墙/单图) ========== */
.image-section {
  margin-top: 0.25rem; /* 4px */
  margin-bottom: 0.25rem;
}

/* 视差叠加图片模块（原版 parallax-overlay-image） */
.parallax-overlay-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1448 / 905;
  overflow: hidden;
  border-radius: 1.5625rem; /* 25px，与原版大图板块一致 */
}

.pio-base {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pio-base img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 103.8%; /* 原版 939/905：比容器高 3.8%，初始 -2vw 时底部对齐容器底 */
  transform: translate3d(0px, -2vw, 0px); /* 初始偏移（原版 vw 单位），滚动时 JS 线性插值 -2vw → +0.7vw */
  will-change: transform;
}

.pio-overlay-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pio-overlay-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.placeholder-gallery {
  background: linear-gradient(135deg, #f0ece8 0%, #e2dcd4 100%);
  color: rgba(10,10,10,0.35);
}

/* 单图（无叠加） */
.image-single {
  width: 100%;
}

.single-img {
  width: 100%;
  aspect-ratio: 1136 / 710;
  background: var(--color-gray-ultra-light);
  border-radius: 1.5625rem; /* 25px */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--color-text-secondary);
  overflow: hidden;
  position: relative;
}

.single-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

/* ========== SCREEN SECTION (Mobile Landing / 屏幕墙) ========== */
/* 原版取证：section margin 为 0，区块间实际间隙仅 3-4px，
   视觉间距全部来自白卡内部 60px padding，白卡之间紧贴 */
.screen-section {
  margin-top: 0.25rem; /* 4px，与原版一致 */
  margin-bottom: 0.25rem;
}

.screen-content {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: 1.5625rem; /* 25px */
  gap: 3.75rem; /* 60px */
  padding: 3.75rem; /* 60px */
}

.screen-info {
  display: flex;
  flex-direction: column;
  gap: 2.25rem; /* 36px */
  width: 100%;
  max-width: 31.375rem; /* 502px */
}

/* 列容器：flex column，每列多张竖屏截图，列间错落 */
.screen-columns,
.screen-wall {
  display: flex;
  gap: 3.75rem;
  justify-content: center;
}

.screen-col {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  width: 17.0625rem;
}

.screen-card {
  min-width: 0;
}

/* 列错落偏移（瀑布流效果） */
.col-offset-1 {
  margin-top: 0;
}

.col-offset-2 {
  margin-top: 6.25rem;
}

.col-offset-3 {
  margin-top: 2.5rem;
}

/* 7屏墙：2列宽 474px */
.screen-wall.cols-2 .screen-col {
  width: 29.625rem;
}

.screen-placeholder {
  width: 100%;
  display: block;
  border-radius: 1.5625rem; /* 25px，与其它图片板块（双图/单图/视频）统一，图片无需自带圆角 */
  overflow: hidden;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); /* 微阴影：白色底图也能看到边界 */
}

/* ========== MASONRY SECTION（瀑布流卡片墙，prompt-library 风格） ========== */
/* 封面图按原始比例自然排布（CSS 多列瀑布），卡片 = 白底圆角 + 底部渐变信息层（标题 + 标签） */
.masonry-section {
  margin-top: 0;
  margin-bottom: 0;
  /* padding-block 只控制上下，左右缩进交给 .container（PC 36px / 移动端 16px），保证全站对齐 */
  padding-block: 5rem; /* 80px */
}
.masonry-head {
  margin-bottom: 2.5rem; /* 40px */
}
.masonry-head .section-heading {
  margin-bottom: 0;
}
.masonry-wall {
  column-count: 3;
  column-gap: 1rem; /* 16px */
}
.masonry-card {
  break-inside: avoid;
  margin-bottom: 1rem;
  background: var(--color-white);
  border-radius: 1.5625rem; /* 25px，与全站板块圆角统一 */
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  /* ⚠️ 卡顿修复：不在此做 transform/阴影过渡。
     multi-column 分页上下文里整卡 translateY 浮动会触发列内碎片重排重绘，
     box-shadow 渐变则每帧软件光栅化大范围阴影——两者并发导致 hover 放大卡顿。
     hover 放大改由 .masonry-cover-img 合成层 transform 承担（与展示区同一流畅路径）。 */
}
.masonry-card:hover {
  /* 仅图片放大（.masonry-cover-img 合成层动画），整卡不再上浮；阴影瞬时加深，不参与过渡 */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.masonry-cover {
  position: relative;
  background: var(--color-gray-ultra-light);
}
/* hover 放大过渡必须用双类把特异性提到 (0,2,0)：
   瀑布流 img 同时带 .media-reserve-img（其后声明的单类 transition:opacity .3s 会整体覆盖这里的 transform 过渡，
   导致放大 0-100 瞬切生硬）。双类 + 合并声明 opacity 才能压过后方规则，与展示区 .img:not([data-focus]) 同级 */
.media-reserve-img.masonry-cover-img {
  transition: transform var(--transition-base), opacity .3s ease;
}
.masonry-card:hover .masonry-cover-img {
  transform: scale(1.04);
}
.masonry-cover-empty {
  aspect-ratio: 4 / 3; /* 无图占位：浅灰块 */
}

/* ===== 图片占位 + 骨架（统一防 CLS：按真实宽高预留 aspect-ratio） ===== */
.media-reserve {
  position: relative;
  overflow: hidden;
  background: var(--color-gray-ultra-light);
}
.media-reserve-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .3s ease;
}
.media-reserve.loaded .media-reserve-img { opacity: 1; }
/* gallery 等需要完整展示原图、不被裁切的场景 */
.media-reserve-contain { background: transparent; }
.media-reserve-contain .media-reserve-img {
  object-fit: contain;
  padding: 0;
}
.media-reserve .skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #ececef 30%, #f6f6f8 50%, #ececef 70%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.2s ease-in-out infinite;
}
.media-reserve.loaded .skeleton { display: none; }
@keyframes skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* 深色主题：骨架与占位底色随主题翻转 */
[data-theme="dark"] .media-reserve { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .media-reserve .skeleton { background: linear-gradient(100deg, rgba(255,255,255,.05) 30%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.05) 70%); background-size: 200% 100%; }
/* 底部渐变信息层：标题 + 标签胶囊 */
.masonry-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 55%, transparent 100%);
  padding: 2rem 1rem 0.875rem; /* 32px 16px 14px */
  display: flex;
  flex-direction: column;
  gap: 0.375rem; /* 6px */
  /* 背景渐变不再做 transition：hover 瞬时加深，避免逐帧重绘大范围渐变加剧卡顿 */
}
.masonry-card:hover .masonry-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
}
.masonry-title {
  color: var(--color-white);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.2px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.masonry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.masonry-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-white);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  padding: 2px 8px;
  border-radius: 980px; /* 胶囊 */
}

/* ========== TESTIMONIALS SECTION ========== */
.testimonials-section {
  margin-top: 4rem;
  margin-bottom: 0;
  /* 左右缩进交给内部 .container（与其他板块同一宽度体系），板块自身只留上下 */
  padding: 8rem 0;
  background: var(--color-background-dark);
  border-radius: 32px 32px 0 0;
  max-width: 100%;
  overflow: hidden;
  /* 占满一屏：参考网站刚好铺满视口，用 svh 适配移动端地址栏 */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 外层是 flex，内部 .container 作为 flex 子项会被按内容收缩（margin auto 会覆盖 stretch）；
   必须 width:100% 让它与其它板块的 .container 一样撑到 max-width 并居中，保证标题左对齐 */
.testimonials-section .container {
  width: 100%;
}

.big-title {
  font-size: 148px;
  font-weight: 600;
  line-height: 162.8px;
  letter-spacing: -7.4px;
  color: var(--color-white);
  margin-bottom: 5rem;
  /* 每行一个词的断行模式已经在 render.js 中用 <br> 处理，这里不需要再额外截断 */
  white-space: normal;
  /* 让每个词的行宽不同（长短不一），排版更有设计感 */
  display: inline-block;
}

.testimonial-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "avatar quote"
    "info quote";
  gap: 0 64px;
  align-items: start;
}

.testimonial-avatar {
  grid-area: avatar;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-text-tertiary);
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-white);
  background: linear-gradient(135deg, #666, #444);
}

.testimonial-info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 1.5rem;
}

.testimonial-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-white);
}

.testimonial-role {
  font-size: 14px;
  color: var(--color-text-tertiary);
}

.testimonial-quote {
  grid-area: quote;
  font-size: 22px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -0.4px;
  color: var(--color-white);
  max-width: 680px;
  margin-top: 0;
  /* 引用内容居右：块靠右对齐，文字右对齐 */
  margin-left: auto;
  text-align: right;
}

/* ========== TITLE（独立标题组件）========== */
/* Projects 头部：左超大标题，右「版权小字 + 内容描述」，底部对齐 */
/* 上下边距档位：后台 title.padding 可选 紧凑/标准/宽松（默认标准），PC 与移动端分别取 --title-pad / --title-pad-mobile */
.title-section {
  padding: var(--title-pad, 5rem) 0 0; /* 上方留白由自身控制；下方交给下一板块（通常为特效双图） */
}
.title-section.ts-pad-compact { --title-pad: 3rem; --title-pad-mobile: 2rem; }
.title-section.ts-pad-default { --title-pad: 5rem; --title-pad-mobile: 3rem; }
.title-section.ts-pad-spacious { --title-pad: 8rem; --title-pad-mobile: 4rem; }

.title-row {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 5rem; /* 80px，标题与右侧 info 间距 */
}

.title-big {
  font-size: 0; /* 消除逐字 span 之间空隙（字号由内部 char-animate 控制） */
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.05em;
  color: var(--color-black);
}

/* 逐字进场动画（与 Hero 标题同机制）：父级不参与 reveal 淡入，字符由 char-animate 逐个弹出 */
.title-big.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
.title-big.reveal.visible {
  opacity: 1;
  transform: none;
}
.title-big.visible .char-animate {
  animation: charReveal 0.6s var(--motion-easing-emphasized) forwards;
  animation-delay: calc(0.08s * var(--char-index));
}

/* 字号档位：后台 title.size 可选 80/96/124/148/176（默认 148），移动端统一 52px */
.title-big .char-animate {
  font-size: var(--title-size, 148px);
  line-height: 1.1;
  letter-spacing: -0.05em;
}
.title-big.ts-80  { --title-size: 80px; }
.title-big.ts-96  { --title-size: 96px; }
.title-big.ts-124 { --title-size: 124px; }
.title-big.ts-148 { --title-size: 148px; }
.title-big.ts-176 { --title-size: 176px; }

.title-info {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 16px */
  max-width: 22.8125rem; /* 365px */
  padding-bottom: 0.75rem; /* 12px，底部与标题底端视觉对齐（align-items: flex-end） */
}

.title-tagline {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-black);
}

.title-desc {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

/* ========== NEXT PROJECTS ========== */
/* 与 testimonials 上方正文保持一致的浅灰底色（唯一控制点） */
.next-projects-section {
  margin-top: 0;           /* 紧贴 testimonials 底部 */
  margin-bottom: 0;        /* 与 footer 深色紧贴（或由 footer 控制间距） */
  /* padding: 5rem 2rem; */      /* 已注释：上下间距由外层结构控制 */
  background: var(--color-background);
}

/* 多组列表：每组自带上下边距（组间间距由此控制，避免外层 padding 叠加产生大空白） */
.next-projects-group {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

/* 标题有数据时（render.js 加 has-header），section 补上方间距，避免标题与上方组件贴死 */
.next-projects-section.has-header {
  padding-top: 4rem; /* 64px，与 header 下方留白一致，标题上下均衡 */
}

.next-projects-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 4rem; /* 64px */
}

.next-title {
  font-size: 148px;
  font-weight: 600;
  line-height: 162.8px;
  letter-spacing: -7.4px;
  color: var(--color-black);
}

.next-sub {
  display: flex;
  align-items: center;
  gap: 24px;
}

.copyright {
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* Projects Grid */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 一行 2 张；只传 1 张时占左列、右侧留空，不拉伸铺满 */
  gap: 40px;
}

.project-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  cursor: pointer;
  text-decoration: none;
  background: #ffffff;      /* 整卡纯白，标题栏与预览图同属一张白卡 */
  border-radius: 18px;
  overflow: hidden;
}

.project-card-info {
  display: flex;
  align-items: baseline;    /* 名称/分隔符/年份统一基线 */
  padding: 1rem 1.5rem;       /* 顶部紧贴卡片内边距，左侧固定留白 */
}

.project-name {
  font-size: 18px;
  font-weight: 600;         /* 名称粗体 */
  line-height: 1;
  letter-spacing: -0.4px;
  color: var(--color-black);
  margin: 0;
  white-space: nowrap;
}

.project-name-divider {
  font-size: 12px;
  font-weight: 400;         /* 斜杠常规 */
  color: var(--color-text-secondary);
  margin: 0 0.375rem;
}

.project-year {
  font-size: 12px;          /* 远小于左侧标题 18px，形成主次层级 */
  font-weight: 400;         /* 年份常规 */
  line-height: 1;
  color: var(--color-text-secondary);
}

/* hover-effect canvas 容器（顶部直角衔接标题栏，底部由卡片圆角裁切） */
.project-card-image {
  background: #ffffff;
  overflow: hidden;
  position: relative;
  aspect-ratio: 722 / 546;
  width: 100%;
}

.project-card-image canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ========== RESPONSIVE（板块专属） ========== */

/* Tablet */
@media (max-width: 1024px) {
  /* Intro 响应式：从 PC 1:1 两栏变成单列上下排列 */
  .project-info {
    grid-template-columns: 1fr;
  }
  /* 单列后子元素必须全部归入第 1 列并回到文档流顺序（row:auto），
     否则 .intro-heading 的 grid-column:2 会创建隐式第 2 列、.section-label 的 row:1/span 10 会错位，
     导致 info-main 被挤进 96px 窄列 */
  .section-label {
    grid-column: 1;
    grid-row: auto;
  }
  .intro-heading {
    grid-column: 1;
    grid-row: auto;
  }
  .info-top {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 2rem;
  }
  .info-main {
    grid-column: 1;   /* info-main 不再强制在右栏 */
    grid-row: auto;
  }
  .info-row {
    /* tablet 仍然保持左右分栏空间 */
    gap: 24px;
  }
  .challenges-main,
  .two-blocks {
    grid-template-columns: 1fr;
  }
  /* 展示区左右互换在移动端不生效：一列堆叠时强制恢复 DOM 顺序（图在上、字在下） */
  .two-blocks.two-blocks--text-first .block-text,
  .two-blocks.two-blocks--text-first .block-image {
    order: 0;
  }

  .big-title {
    font-size: 80px;
    line-height: 88px;
    letter-spacing: -4px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .hero-section {
    padding-top: 1rem;
  }

  /* 移动端加大标题与下方视频的间距（原间距为 0，视觉上贴太紧） */
  .hero-content {
    margin-bottom: 2rem;
  }

  .hero-title {
    font-size: 52px;
    line-height: 49.92px;
    letter-spacing: -2.88px;
  }

  .hero-title .char-animate {
    font-size: 52px;
  }

  .hero-video-embed {
    /* 移动端不再加大下边距：下方 intro 自带间距，避免 Hero 后出现大空白 */
    margin-bottom: 0;
  }

  /* Intro 移动端：变成单列上下排列（PC 是 1:1 两栏） */
  .intro-section.container {
    padding-block: 3.5rem 1.75rem;   /* 上 3.5rem，下减半 1.75rem（间距仍在 section 上，内层 .project-info 无上下 margin） */
  }
  .project-info {
    grid-template-columns: 1fr;
    margin: 0;
  }
  .section-label {
    grid-column: 1;
    grid-row: auto;
    margin-bottom: 0.5rem;
  }
  .intro-heading {
    grid-column: 1;
    grid-row: auto;
    font-size: 18px;
    line-height: 22px;
    margin: 0 0 1.5rem 0;
  }
  .info-main {
    grid-column: 1;
    grid-row: auto;
  }
  .info-row {
    gap: 20px;
    padding: 1rem 0;
  }
  /* Brand Logo 移动端：居左，高度缩到 40px */
  .brand-logo-section {
    padding: 0.75rem 0 2rem;
  }
  .brand-logo-wrap {
    justify-content: flex-start; /* 移动端居左 */
  }
  .brand-logo-img {
    height: 40px;
    max-width: 80%;
  }

  /* 移动端：info 区居左（旧 intro 内层 info-bottom：intro 内已经不再渲染 Logo，保留旧 CSS 代码不影响） */
  .info-bottom {
    grid-column: 1;
    justify-content: flex-start;
    margin-top: 2.5rem;
  }
  .info-logo {
    justify-content: flex-start; /* 移动端居左 */
  }
  .info-logo img,
  .info-logo svg.project-logo-placeholder,
  .info-logo .project-logo-img {
    width: 30% !important;
  }

  .challenges-section {
    margin-top: 0;
    margin-bottom: 0;
    padding-block: 2.5rem;
  }

  .section-heading {
    font-size: 22px;
    line-height: 26px;
    letter-spacing: -0.88px;
  }

  /* 展示区块（two-blocks/screen/image）移动端也保持紧贴，
     只有文字内容区才用大间距 */
  .two-blocks-section,
  .screen-section {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }

  /* 两块区白卡内边距收紧（PC 60px → 移动端 32/24px） */
  .block-text {
    padding: 2rem 1.5rem;
    gap: 1.25rem;
  }

  /* 屏幕墙白卡内边距/组间距收紧（PC 60px → 移动端 32/24px） */
  .screen-content {
    padding: 2rem 1.5rem;
    gap: 2rem;
  }

  /* 移动端：保持多列布局不变，只是缩小列宽 + 列间距（原版是整体等比缩放） */
  .screen-columns,
  .screen-wall {
    gap: 1rem; /* 16px，列间距缩小 */
    justify-content: center;
    flex-direction: row; /* 保持横向多列，不要改为 column */
    align-items: flex-start;
  }

  .screen-col {
    width: auto; /* 允许根据容器等比缩放 */
    flex: 1 1 0;
    max-width: 273px;
    min-width: 0;
    margin-top: 0 !important;
    gap: 1rem;
  }

  .screen-wall.cols-2 .screen-col {
    max-width: 400px;
  }

  .big-title {
    font-size: 48px;
    line-height: 52px;
    letter-spacing: -2.4px;
    white-space: normal;
  }

  .testimonial-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "avatar"
      "info"
      "quote";
    gap: 16px;
  }

  .testimonial-info {
    margin-top: 1rem;
  }

  .testimonial-quote {
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -0.4px;
  }

  .testimonials-section {
    margin-top: 0;           /* 移动端归零 PC 的 4rem 上留白，避免深色块前出现大空白 */
    padding: 4rem 0;         /* 深色块上下留白收紧（PC 8rem → 移动端 4rem）；左右由内部 .container 控制 */
    border-radius: 24px 24px 0 0;
    min-height: auto;
  }

  /* 标题组件移动端：单列（标题在上，版权+描述在下，左对齐） */
  .title-section {
    padding: var(--title-pad-mobile, 3rem) 0 0; /* 48px */
  }

  .title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem; /* 24px */
  }

  .title-big {
    font-size: 52px;
    line-height: 49.92px;
    letter-spacing: -2.88px;
  }

  .title-big .char-animate {
    font-size: 52px;
    line-height: 49.92px;
    letter-spacing: -2.88px;
  }

  .title-info {
    max-width: 100%;
    padding-bottom: 0;
  }

  .next-projects-section {
    padding: 0 1rem;
  }

  /* 特效双图组间间距收紧（PC 4rem → 移动端 2.5rem） */
  .next-projects-group {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }

  /* 移动端：标题上方间距收紧（PC 4rem → 2.5rem） */
  .next-projects-section.has-header {
    padding-top: 2.5rem; /* 40px */
  }

  /* 抵消 .container 默认 padding（36px / ≤768px 时 16px），避免与 section 16px 叠加成双重缩进，
     使卡片左右边缘与相邻板块（services/testimonials 等，仅一档缩进）对齐 */
  .next-projects-section .container {
    padding: 0;
  }

  .next-projects-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .next-title {
    font-size: 36px;
    line-height: 34px;
    letter-spacing: -2px;
  }

  .projects-grid {
    grid-template-columns: 1fr; /* 移动端单列（原 flex column 改 grid） */
    gap: 32px;
  }

  .project-card-info {
    padding: 0.75rem 1rem;
  }

  .project-name {
    font-size: 16px;
  }

  .project-name-divider,
  .project-year {
    font-size: 12px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .hero-title {
    font-size: 52px;
    line-height: 49.92px;
    letter-spacing: -2.88px;
  }

  .hero-title .char-animate {
    font-size: 52px;
  }

  .big-title {
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -1.8px;
  }

  /* 瀑布流：小屏单列 */
  .masonry-wall {
    column-count: 1;
  }
}

/* ========== CLIENTS SECTION（客户 Logo 条） ========== */
.clients-section {
  margin-top: 0;
  margin-bottom: 0;
  /* padding-block 只控制上下，左右缩进交给 .container（PC 36px / 移动端 16px），保证全站对齐 */
  padding-block: 2.5rem 5rem;   /* 上边距减半 2.5rem（紧接介绍区），下 5rem */
}

.clients-main {
  display: flex;
  flex-direction: column;
}

.clients-logos {
  display: grid;
  /* auto-fit：列数随内容收缩，Logo 少时（如 4 个）自动铺满一行并均分，不再留空列 */
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.25rem;
  margin-top: 0.5rem;
}

/* 后台指定「每行 N 个」：固定列数，超出自动换行 */
.clients-logos.cols-2 { grid-template-columns: repeat(2, 1fr); }
.clients-logos.cols-3 { grid-template-columns: repeat(3, 1fr); }
.clients-logos.cols-4 { grid-template-columns: repeat(4, 1fr); }
.clients-logos.cols-5 { grid-template-columns: repeat(5, 1fr); }
.clients-logos.cols-6 { grid-template-columns: repeat(6, 1fr); }

/* 每个 Logo 独立白色圆角卡片容器：Logo 水平 + 垂直居中漂浮在白底上 */
.client-logo {
  background: #ffffff;
  border-radius: 24px;    /* 大圆角（各卡片统一） */
  height: 136px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity 0.3s, filter 0.3s;
}

.client-logo:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* 彩色模式（后台 logoStyle=color）：保留图片原色，无黑白滤镜、不随悬停变化 */
.clients-logos.color-mode .client-logo {
  filter: none;
  opacity: 1;
}
.clients-logos.color-mode .client-logo:hover {
  filter: none;
  opacity: 1;
}

.client-logo img {
  max-height: 90px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.client-logo-text {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--color-text-secondary);
}

/* ========== STATS SECTION（左圆角图片 + 右标题/描述/白色圆角数字卡） ========== */
.stats-section {
  margin-top: 0;
  margin-bottom: 0;
  /* padding-block 只控制上下，左右缩进交给 .container（PC 36px / 移动端 16px），保证全站对齐 */
  padding-block: 5rem;
}

.stats-main {
  display: flex;
  flex-direction: column;
}

.stats-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10rem;
  align-items: end;
  /* margin-top: 4rem; */
  /* margin-bottom: 4rem; */
}

.stats-layout.has-media {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

/* 横图布局：媒体移到右侧横向显示（4:3），字段色块组移到左侧并上下单列排列
   —— 解决视频在竖框里被左右切掉的问题；DOM 顺序不变（媒体先、内容后），用 order 重排 */
.stats-layout.is-landscape {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 4rem;
  align-items: end;
}

.stats-layout.is-landscape .stats-media {
  order: 2;              /* 媒体靠右 */
  aspect-ratio: 5 / 3;  /* 横向显示 */
}

.stats-layout.is-landscape .stats-content {
  order: 1;             /* 文字 + 字段组靠左 */
}

.stats-layout.is-landscape .stats-grid {
  grid-template-columns: 1fr;  /* 字段色块上下排列 */
  gap: 14px;
}

/* 横图模式：卡片不再强制正方形，改为内容自适应高度 + 紧凑排列 */
.stats-layout.is-landscape .stat-item {
  aspect-ratio: none;           /* 解除正方形锁定 */
  justify-content: flex-start;   /* 内容紧贴顶部，不向两端分散 */
  padding: 1.5rem 1.875rem;     /* 上下略收紧 */
}

.stats-layout.is-landscape .stat-desc {
  margin: 0.5rem 0 0 0;         /* 描述紧跟标题下方，不再推到底部 */
}

.stats-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-gray-ultra-light);
  border-radius: 25px;
}

.stats-media video,
.stats-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stats-media .video-placeholder {
  width: 100%;
  height: 100%;
}

.stats-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.stats-label {
  font-size: 13px;
  color: #888888;
  margin: 0;
}

.stats-title {
  font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #0a0a0a;
  margin: 0;
}

.stats-subtitle {
  font-size: 22px;
  line-height: 1.3;
  color: #0a0a0a;
  max-width: 520px;
  margin: 0 0 0.75rem 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

.stat-item {
  display: flex;
  flex-direction: column;        /* 垂直布局 */
  justify-content: space-between; /* 首项靠容器顶部、末项靠容器底部 */
  align-items: flex-start;
  background: #ffffff;
  border-radius: 25px;
  padding: 1.875rem;
  min-width: 0;
  /* aspect-ratio: 2 / 2;        正方形数据卡片 —— 横图模式下方块过高撑大左侧，由 .is-landscape 覆盖为 none；竖图模式内容自适应 */
}

.stat-value {
  font-size: 45px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1px;
  color: #0a0a0a;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.75rem;           /* 与下方小标题紧密聚拢（A、B 同属上半区） */
}

.stat-value .stat-suffix {
  color: #0a0a0a;
}

.stat-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--color-black);
  margin: 0;
}

.stat-desc {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(10, 10, 10, 0.6);
  margin: auto 0 0 0;            /* margin-top: auto 自动推至卡片底部，中间留大片留白 */
}

/* ========== SERVICES SECTION（编号服务手风琴，深色区块） ========== */
/* 深色模式色值：区块 #0F0F11｜主标题 #FFF｜编号/描述/Categories 小标题 #888888
   圆形 +/- 按钮白色细线描边；分类标签白色填充 + 黑色文字 + 大圆角胶囊
   外层容器参考 footer（Let's talk）：全宽深色（max-width: 100% 突破 container 限制），
   内部由 .container 居中控制内容宽度 */
.services-section {
  margin: 0;
  padding: 6rem 2rem;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;             /* 至少填满一屏；内容超过时自动扩展 */
  background: #0f0f11;
}

.services-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: #888888;
  margin: 0 0 0.875rem 0;
}

.services-title {
  font-size: clamp(44px, 6vw, 84px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -2.5px;
  color: #ffffff;
  text-align: left;
  margin: 0 0 3.5rem 0;
}

.services-list {
  display: flex;
  flex-direction: column;
}

/* 条目之间细灰色水平分割线（展开内容与下一条目之间的分割线由此实现） */
.service-item + .service-item {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ① Header 点击栏：整行可点击，Flex 水平布局，垂直居中 */
.service-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 1.375rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: background-color 0.25s;
}

/* 左侧：编号（浅灰，固定列宽 → 所有编号垂直左对齐、标题统一起始 X 坐标） */
.service-num {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.3px;
  color: #888888;
  min-width: 88px;
  flex-shrink: 0;
}

/* 中间：服务主标题（纯白，视觉主体） */
.service-title {
  flex: 1;
  font-size: clamp(14px, 1.7vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.8px;
  color: #ffffff;
}

/* 右侧：白色细线圆形描边按钮（折叠 + / 展开 −，竖线淡出切换，无旋转） */
.service-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
}

.service-toggle svg {
  width: 34px;
  height: 34px;
}

.service-toggle .svg-v {
  transition: opacity 0.3s ease;
}

.service-item.open .service-toggle .svg-v {
  opacity: 0;
}

/* ② Content 展开面板：与上方标题保持统一左侧对齐基准（跳过编号列） */
.service-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease;
}

.service-item.open .service-detail {
  max-height: 640px;
}

/* 展开内容：横向左右两栏并排 */
.service-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 0 0 2rem 6.75rem; /* 左对齐基准 = 编号列（88px + gap 20px） */
}

.service-desc {
  font-size: 14px;
  line-height: 1.7;
  color: #888888;
  margin: 0;
  max-width: 540px;
}

/* 右栏：Categories 小标题 + 白色圆角胶囊标签（横向自动换行） */
.service-cats-label {
  font-size: 12px;
  font-weight: 600;
  color: #888888;
  margin-bottom: 0.75rem;
}

.service-cats-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.service-tag {
  font-size: 13px;
  font-weight: 500;
  color: #000000;
  background: #ffffff;
  padding: 0.375rem 0.875rem;
  border-radius: 100px;
  white-space: nowrap;
}

/* ========== TEAM SECTION（白色卡片 + 左文字右 2×2 头像拼图） ========== */
.team-section {
  margin-top: 0;
  margin-bottom: 0;
  /* padding-block 只控制上下，左右缩进交给 .container（PC 36px / 移动端 16px），保证全站对齐 */
  padding-block: 5rem;
}

.team-card-wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  background: #ffffff;
  border-radius: 25px;
  padding: 0.625rem;
}

.team-text {
  flex: 1 1 auto;
  min-width: 0;
  padding: 3.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}

.team-title {
  display: block;
  font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 0;
}

.team-title-a {
  display: block;
  color: #0a0a0a;
}

.team-title-b {
  display: block;
  /* 第二行字号与第一行(.team-title: clamp(34px,4.5vw,52px))关联缩放：vw 系数为第一行的 0.65 倍，
     桌面上限 34px（用户实测合适值），移动端下限 22px 随断点缩小，不写死 PC 单值 */
  font-size: clamp(22px, 2.93vw, 34px);
  color: rgba(10, 10, 10, 0.6);
}

.team-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.team-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  min-width: 0;
}

.team-label {
  font-size: 18px;
  color: var(--color-black);
  margin: 0;
}

.team-desc {
  margin: 0;
  color: rgba(10, 10, 10, 0.6);
}

.team-desc-sm {
  font-size: 16px;
  line-height: 1.4;
}

.team-desc-lg {
  font-size: 22px;
  line-height: 1.2;
}

.team-btn {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 0.75rem;
  background: #0a0a0a;
  color: #ffffff;
  font-size: 12px;
  white-space: nowrap;
  border-radius: 100px;
  text-decoration: none;
}

.team-btn:hover {
  background: #2a2a2a;
}

.team-grid {
  flex: 0 0 auto;
  width: 500px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.team-photo-card {
  position: relative; /* 焦点缩放 img position:absolute 的定位基准 */
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 默认 grayscale：由 [data-avatar-color="grayscale"] 控制，不在这里硬编码 */
  transition: filter 0.3s;
}

/* 默认（灰度模式 / 未设置）：头像黑白，悬浮变彩色 */
.team-section[data-avatar-color="grayscale"] .team-photo-card {
  filter: grayscale(1);
}
.team-section[data-avatar-color="grayscale"] .team-photo-card:hover {
  filter: grayscale(0);
}

/* 彩色模式：始终保留原图，无灰度滤镜 */
.team-section[data-avatar-color="color"] .team-photo-card {
  filter: none;
}
.team-section[data-avatar-color="color"] .team-photo-card:hover {
  filter: none;
}

/* 兼容旧版：未带 data-avatar-color 属性 → 沿用之前的黑白+悬浮变彩色 */
.team-section:not([data-avatar-color]) .team-photo-card {
  filter: grayscale(1);
}
.team-section:not([data-avatar-color]) .team-photo-card:hover {
  filter: grayscale(0);
}

.team-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-photo-empty span {
  font-size: 44px;
  font-weight: 700;
  color: #999;
}

/* 平板（769-1024px）：stats 上下间距收紧、layout 不再叠加 margin。
   ⚠️ 必须放在 PC 规则（.stats-section 5rem）之后，否则被覆盖 */
@media (max-width: 1024px) {
  .stats-section {
    margin-top: 0;
    margin-bottom: 0;
    padding-block: 2.5rem;
  }
  .stats-layout {
    margin-top: 0;
    margin-bottom: 0;
  }
  /* 瀑布流：平板降为 2 列 */
  .masonry-wall {
    column-count: 2;
  }
}

/* 新板块移动端适配 */
@media (max-width: 768px) {
  .clients-section {
    margin-top: 0;
    margin-bottom: 0;
    padding-block: 1.25rem 2.5rem;   /* 移动端上边距再减半（紧接介绍区），下 2.5rem */
  }
  /* 瀑布流：移动端收紧间距，保持 2 列横向 */
  .masonry-section {
    padding-block: 2.5rem;
  }
  .masonry-head {
    margin-bottom: 1.5rem;
  }
  .masonry-wall {
    column-count: 2;
    column-gap: 0.75rem;
  }
  .masonry-card {
    margin-bottom: 0.75rem;
    border-radius: 1.25rem; /* 20px，移动端略收 */
  }
  .team-section {
    margin-top: 0;
    margin-bottom: 0;
    padding-block: 2.5rem;   /* 移动端紧凑间距（与 stats-section 一致），不再用 margin 叠加大留白 */
  }

  /* 移动端 stats 上下间距单独收紧（60px→40px），避免与 hero-banner 底部留白叠加过大 */
  .stats-section {
    margin-top: 0;
    margin-bottom: 0;
    padding-block: 2.5rem;
  }

  /* 移动端：stats-layout 不再叠加上下 margin（由 section 统一控制），
     gap 收窄避免无图时 10rem 撑出大间距 */
  .stats-layout {
    margin-top: 0;
    margin-bottom: 0;
    gap: 2rem;
  }

  .services-section {
    margin: 0;
    padding: 4.5rem 1.25rem;
  }

  .services-title {
    margin-bottom: 3rem;
  }

  .service-item + .service-item {
    margin-top: 3rem;
  }

  .clients-logos {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .client-logo {
    height: 96px;
    padding: 0 0.75rem;
  }

  .client-logo img {
    max-height: 56px;
  }

  .stats-layout.has-media {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .stats-media {
    aspect-ratio: 4 / 3;
  }

  .stats-title {
    font-size: 34px;
  }

  .stats-subtitle {
    font-size: 18px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .stat-item {
    padding: 1.25rem;
  }

  .stat-value {
    font-size: 36px;
    letter-spacing: -0.8px;
  }

  .stat-title {
    font-size: 15px;
  }

  .stat-desc {
    font-size: 13px;
  }

  .service-head {
    gap: 14px;
    padding: 1.125rem 0;
  }

  .service-num {
    font-size: 16px;
    min-width: 48px;
  }

  .service-title {
    font-size: 15px;
  }

  .service-toggle svg {
    width: 28px;
    height: 28px;
  }

  .service-detail-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 0 1.5rem 3.875rem; /* 与移动端编号列（48px + gap 14px）对齐 */
  }

  .service-desc {
    font-size: 13px;
  }

  .service-tag {
    font-size: 12px;
    padding: 0.3125rem 0.75rem;
  }

  .team-card-wrap {
    flex-direction: column;
  }

  .team-text {
    padding: 1.75rem 1.5rem;
    gap: 24px;
  }

  .team-title {
    font-size: 34px;
  }

  .team-columns {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .team-grid {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }
}

/* ========== HERO BANNER（首屏 Hero · 圆角相框 + 左下信息块 + 滚动视差） ========== */
/* 规范要点：
   - 高度与第一屏一致（height:100vh），banner 顶部延伸到视口顶部、被悬浮导航覆盖（与导航重叠）
   - 四周小边距统一（12px），大图随视口贴边扩展、不被 .container 封顶，圆角相框
   - 文字层直接叠加图片上方，无半透明遮罩，靠图片明暗分区保证可读性
   - 滚动视差：底层大图慢速下移（远景）、文字层快速下移（近景），opacity 衰减 + 轻微 scale 缩小 */
/* 大图相框：不被 .container（≤1520px）封顶，随视口贴边扩展 */
.container.hero-banner-section {
  max-width: 100%;               /* 覆盖 site-shell .container 的 1208/1520px 上限 */
}
.hero-banner-section {
  height: 100vh;                 /* 与第一屏同高；顶部被悬浮导航覆盖（banner 与导航重叠） */
  display: flex;
  align-items: stretch;          /* frame 撑满高度 */
  padding: 0.75rem;                 /* 四周一致的小边距，贴合四边 */
  box-sizing: border-box;
}

.hero-banner-frame {
  position: relative;
  width: 100%;
  height: 100%;                  /* 填满 section 内容区（100vh-24px），四周边距一致 */
  max-width: none;               /* 跟随视口宽度，大屏下不再限制为 1440px */
  border-radius: 25px;           /* 圆角统一 */
  overflow: hidden;
  background: var(--color-gray-ultra-light);
}

/* 底层大图（视差远景：滚动下移速度慢于页面正常滚动） */
.hero-banner-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  will-change: transform, opacity;
}
.hero-banner-media img,
.hero-banner-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;             /* 裁剪填充 */
  display: block;
}
.hero-banner-media .video-placeholder {
  width: 100%;
  height: 100%;
}

/* 文字内容层：整体位于大图【左下】区域（底部锚定 + 左对齐信息块），无遮罩
   顺序：①超大主标题 → ②信息标签行 → ③描述段落；组内不放按钮 */
.hero-banner-content {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* 三组文本统一左对齐，左侧基准线一致 */
  padding: 6rem 5rem 2.5rem; /* 左下内边距：顶部留白大、底部紧凑贴合图框底边 */
  box-sizing: border-box;
  max-width: 100%;
  color: #ffffff;
  /* ⚠️ 不能加 will-change: transform, opacity：父级合成层会干扰子元素（主标题）的 opacity 过渡，
     .reveal 进场动画（transition）在合成层内计算异常，标题无法从 opacity 0 渐入 */
}
/* 文字布局=center：垂直 + 水平居中（覆盖默认 left:0/bottom:0 左下锚定）
   PC：content 改为 absolute 铺满整个 frame，flex 列垂直水平居中；
   标签行与描述段落同步居中对齐（margin:auto 让描述在 max-width 内居中） */
.hero-banner-content.center {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 5rem;
}
.hero-banner-content.center .hero-banner-title { text-align: center; }
.hero-banner-content.center .hero-banner-stats { justify-content: center; }
.hero-banner-content.center .hero-banner-description {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
/* ① 超大主标题：视觉占比最大（整体从下往上+渐入 reveal，进场动画由 site-shell 统一驱动） */
.hero-banner-title {
  font-size: clamp(42px, 5.5vw, 84px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -2.5px;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); /* 仅文字微投影提升可读性，非遮罩 */
}
/* 整体进场动画：标题不参与父级 reveal 淡入（避免 transition 在合成层/reduced-motion 下不播放），
   改为 animation 整体从下往上+渐入，与全站 charReveal 同一机制，播放稳定且只有 0.6s */
.hero-banner-title.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
.hero-banner-title.reveal.visible {
  opacity: 1;
  transform: none;
}
.hero-banner-title.visible {
  /* fill-mode: both —— 延迟期即停在 from 帧（opacity 0），避免 base opacity:1 先闪现全亮再掉回 0 淡入 */
  animation: heroBannerTitleReveal 0.6s var(--motion-easing-emphasized) both;
  animation-delay: 0.15s; /* 略晚于板块淡入，节奏更分明 */
}
@keyframes heroBannerTitleReveal {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ② 信息标签行：横向并列短信息（50+ employees / 6 countries 风格），字号显著小于标题 */
.hero-banner-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;                  /* 原版标签间距 */
  margin-top: 2.5rem;           /* 标题 → 标签 固定垂直间距 */
}
.hero-banner-stat {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
/* ③ 描述段落：字号最小、行高宽松 */
.hero-banner-description {
  font-size: 16px;
  line-height: 1.8;           /* 宽松行高 */
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
  margin: 1.5rem 0 0;           /* 标签 → 正文 再一档垂直间距 */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* HERO BANNER 移动端（独立媒体查询，避免改动其他板块） */
@media (max-width: 1024px) {
  .hero-banner-section {
    min-height: auto;
    height: auto;          /* 覆盖桌面 height:100vh：高度由内容决定，避免上下大空白 */
    padding: 0.75rem 1rem 0.75rem;   /* 上下边距与 PC 一致（12px），左右保留 1rem */
  }
  .hero-banner-frame {
    height: auto;
    min-height: 62vh;          /* 内容不足时保持一屏观感，内容超高时自动长高（矮屏/长文案不溢出） */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 文字块贴底，与 PC 左下锚定一致 */
  }
  .hero-banner-content {
    position: relative;        /* 参与文档流：frame 高度随文字内容自适应，不再被 absolute 限制 */
    left: auto;
    bottom: auto;
    padding: 3.5rem 2rem 2.5rem;  /* 底部留白加大（1.5rem→2.5rem），文字不再紧贴视频底边 */
    max-width: 100%;
  }
  /* 居中布局移动端：frame 改为垂直居中（覆盖 flex-end），content 沿用 relative 参与流式布局，
     仅调整内边距与文字对齐；避免 absolute 在 frame 高度自适应时撑不开容器 */
  .hero-banner-frame:has(.hero-banner-content.center) {
    justify-content: center;
  }
  .hero-banner-content.center {
    padding: 2.5rem 2rem;
  }
  .hero-banner-title {
    font-size: 36px;
    letter-spacing: -1px;
  }
  .hero-banner-stats {
    gap: 20px;
    margin-top: 1.5rem;
  }
  .hero-banner-stat {
    font-size: 15px;
  }
  .hero-banner-description {
    font-size: 14px;
    line-height: 1.7;
    margin-top: 1rem;
  }
}

/* ========== HERO CAROUSEL（小Banner/大Banner 轮播模式，Swiper 驱动） ========== */
/* 小Banner 轮播容器：与 .hero-video-embed 同尺寸（圆角 + 16:9 比例） */
.hero-carousel.swiper {
  width: 100%;
  aspect-ratio: 1136 / 608;
  border-radius: 1.5625rem;
  overflow: hidden;
  position: relative;
}
.hero-carousel .swiper-wrapper {
  height: 100%;
}
.hero-carousel .swiper-slide {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hero-carousel .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 轮播左右切换按钮：默认隐藏，鼠标悬停轮播图时显现（hover 只显箭头、不暂停自动播放；
   自动播放接管逻辑见 render.js initCarousels：点击切换停止、移出/触摸后延迟恢复） */
.swiper-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3; /* 高于轮播图及大Banner文案层(z-index:2) */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #1c1c22;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease;
}
.swiper-nav svg {
  width: 20px;
  height: 20px;
}
.swiper-nav-prev { left: 18px; }
.swiper-nav-next { right: 18px; }
/* 仅鼠标悬停时显现：不用 :focus-within，否则点击箭头后按钮持有焦点，移开鼠标箭头仍不隐藏 */
.swiper:hover .swiper-nav {
  opacity: 1;
  visibility: visible;
}
.swiper-nav:hover {
  background: #ffffff;
}

/* 大Banner 轮播容器：铺满 .hero-banner-frame（圆角已被 frame overflow:hidden 裁剪） */
.hero-banner-carousel.swiper {
  position: absolute;
  inset: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
}
.hero-banner-carousel .swiper-wrapper {
  height: 100%;
}
.hero-banner-slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hero-banner-slide-media {
  position: absolute;
  inset: 0;
}
.hero-banner-slide-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 大Banner 轮播文字层：每张图独立的左下信息块，复用 .hero-banner-content 视觉 */
.hero-banner-slide .hero-banner-content {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 6rem 5rem 2.5rem;
}
/* 切图文案进场动画：Swiper 切到该 slide 时文字从下往上+渐入（slide 级 reveal，不依赖全站观察器）
   fill-mode: both —— 延迟期停在 from 帧（opacity 0），避免被其他规则顶成全亮后再掉回 0 的闪现 */
.hero-banner-slide .hero-banner-title,
.hero-banner-slide .hero-banner-stats,
.hero-banner-slide .hero-banner-description {
  opacity: 0;
  transform: translateY(24px);
}
/* ⚠️ 轮播 slide 文案不参与全站 .reveal/.visible 显隐（registerRevealElements 会按选择器给它们加 .reveal）：
   .hero-banner-title.reveal.visible 会强制 opacity:1 并覆盖上面的 opacity:0，
   导致标题"先闪现全亮、动画延迟期后再掉回 0 淡入"的不自然进场。
   slide 文案的显隐完全交给 .swiper-slide-active 规则控制 */
.hero-banner-carousel .hero-banner-title.reveal,
.hero-banner-carousel .hero-banner-title.reveal.visible,
.hero-banner-carousel .hero-banner-description.reveal,
.hero-banner-carousel .hero-banner-description.reveal.visible {
  opacity: 0;
  transform: translateY(24px);
  transition: none;
}
/* 单个标签（.hero-banner-stat）无 slide 级动画（动画在 .hero-banner-stats 容器上），
   必须保持 opacity:1 可见，整行淡入由容器动画负责——否则会被 reveal 锁成 0 而不显示 */
.hero-banner-carousel .hero-banner-stat.reveal,
.hero-banner-carousel .hero-banner-stat.reveal.visible {
  opacity: 1;
  transform: none;
  transition: none;
}
.hero-banner-carousel .swiper-slide-active .hero-banner-title {
  animation: heroBannerTitleReveal 0.6s var(--motion-easing-emphasized) both;
  animation-delay: 0.1s;
}
.hero-banner-carousel .swiper-slide-active .hero-banner-stats {
  animation: heroBannerTitleReveal 0.6s var(--motion-easing-emphasized) both;
  animation-delay: 0.25s;
}
.hero-banner-carousel .swiper-slide-active .hero-banner-description {
  animation: heroBannerTitleReveal 0.6s var(--motion-easing-emphasized) both;
  animation-delay: 0.35s;
}
/* 非激活 slide 文字立即隐藏（避免 cube/flip/coverflow 把背面文字透出来） */
.hero-banner-carousel .swiper-slide:not(.swiper-slide-active) .hero-banner-title,
.hero-banner-carousel .swiper-slide:not(.swiper-slide-active) .hero-banner-stats,
.hero-banner-carousel .swiper-slide:not(.swiper-slide-active) .hero-banner-description {
  opacity: 0;
  transform: translateY(24px);
  animation: none;
}

/* ===== fs 效果轮播（carousel 的 effect=fs：全屏裁剪滑入，自动播放） =====
   复用 fullscreen-slider 的 .fs-slide/.fs-outer/.fs-inner/.fs-bg/.fs-dots 结构与动画，
   但容器按 hero / hero-banner 的尺寸约束，不做页面锁定、不绑滚动。 */
.hero-fs-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 1136 / 608;      /* 与小Banner 轮播 .hero-carousel 同尺寸 */
  border-radius: 1.5625rem;
  overflow: hidden;
}
/* 大Banner：铺满 .hero-banner-frame（圆角已被 frame overflow:hidden 裁剪） */
.hero-banner-frame > .hero-fs-carousel {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
}
/* 每屏绝对堆叠：复用全屏版 .fs-slide 的显隐逻辑（initial visibility hidden 由 JS gsap 控制） */
.hero-fs-carousel .fs-slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
}
/* ⚠️ outer/inner 保持块级 100% 高（勿加 position:absolute/inset:0——两图层会重叠成整屏移动，
   失去全屏版的「上下两半反向滑入合拢」裁剪效果）。gsap 设 yPercent 时 transform 使其成为
   fs-bg 的 containing block，背景随 inner 一起平移。 */
.hero-fs-carousel .fs-outer,
.hero-fs-carousel .fs-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hero-fs-carousel .fs-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
/* 大Banner fs 轮播：每张图左下文案（复用 .hero-banner-content 视觉，切图时随屏切换） */
.hero-fs-carousel .hero-banner-content {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 6rem 5rem 2.5rem;
}
/* fs 内文案不参与全站 .reveal/.visible 显隐与进场动画（registerRevealElements 会给它们加 .reveal）：
   整体显隐/淡入完全交给 initHeroFsCarousels 的 gsap 容器动画，避免 reveal 触发时子元素先闪现全亮 */
.hero-fs-carousel .hero-banner-title.reveal,
.hero-fs-carousel .hero-banner-title.reveal.visible,
.hero-fs-carousel .hero-banner-title.visible,
.hero-fs-carousel .hero-banner-stats.reveal,
.hero-fs-carousel .hero-banner-stats.reveal.visible,
.hero-fs-carousel .hero-banner-description.reveal,
.hero-fs-carousel .hero-banner-description.reveal.visible {
  opacity: 1;
  transform: none;
  animation: none;
  transition: none;
}
/* 圆点指示器：小Banner 内更紧凑（全屏版竖排圆点在右侧，复用 .fs-dots 视觉） */
.hero-fs-carousel .fs-dots {
  right: 1.25rem;
  gap: 10px;
}
.hero-fs-carousel .fs-dot {
  width: 8px;
  height: 8px;
}
.hero-fs-carousel .fs-dot.active {
  width: 8px;
  height: 20px;
  border-radius: 4px;
}

/* HERO CAROUSEL 移动端 */
@media (max-width: 1024px) {
  .hero-carousel.swiper {
    aspect-ratio: 4 / 3; /* 移动端小Banner 轮播改用偏方形比例，避免高度过大 */
  }
  /* 移动端无 hover，左右按钮不展示（触摸滑动即可切图） */
  .swiper-nav {
    display: none;
  }
  /* 大Banner 轮播在移动端与 .hero-banner-frame 同策略：定高容器，文字贴底 */
  .hero-banner-carousel.swiper {
    position: relative;     /* 参与文档流，frame 高度由内容决定 */
    height: 62vh;
    min-height: 420px;
  }
  .hero-banner-slide .hero-banner-content {
    padding: 3.5rem 2rem 2.5rem;
  }
  /* fs 效果轮播移动端：小Banner 同 .hero-carousel 的 4:3 比例；大Banner 铺满定高 frame */
  .hero-fs-carousel {
    aspect-ratio: 4 / 3;
  }
  .hero-fs-carousel .hero-banner-content {
    padding: 3.5rem 2rem 2.5rem;
  }
}

/* ========== SWIPE SLIDER（全屏滑动轮播，GSAP 逐屏滑动 + 文字动画） ========== */
/* 对标 GSAP Swipe Slider demo：每屏占满视口、垂直堆叠、滚轮/触摸逐屏切换 */
.container.swipe-slider-section {
  max-width: 100%;          /* 覆盖 .container 的 1208/1520px 上限：全屏通栏 */
  padding: 0;
}
.swipe-slider-section {
  position: relative;
  height: 100vh;
  height: 100svh;           /* 移动端地址栏伸缩时仍占满可视区 */
  overflow: hidden;
  background: #0a0a0a;
}
/* ScrollTrigger 生成的 pin 占位（高度 = 板块高度 + pin 滚动距离）：
   占位空段也使用与板块一致的深色底，避免滚完释放/从下方滚回时顶部闪过白色横条 */
.pin-spacer {
  background: #0a0a0a;
}
/* 每屏绝对堆叠，初始 visibility hidden，由 JS（gsap autoAlpha）控制显隐 */
.swipe-slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
}
.swipe-outer,
.swipe-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;         /* 横竖双向裁剪：仅 overflow-y:hidden 会让 overflow-x 被规范强制为 auto，
                                背景 scale 放大溢出时 inner 底部弹出横向滚动条 */
}
.swipe-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}
.swipe-content {
  position: relative;
  z-index: 2;
  max-width: 86vw;
  text-align: center;
  padding: 0 1rem;
}
.swipe-heading {
  margin: 0;
  font-size: clamp(2.25rem, 6vw, 6.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -2px;
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.swipe-heading .char {
  display: inline-block;    /* 逐字动画的基础：可独立位移/透明度 */
  will-change: transform, opacity;
}
.swipe-subtitle {
  margin: 1.5rem 0 0;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* SWIPE SLIDER 移动端 */
@media (max-width: 1024px) {
  .swipe-heading {
    font-size: clamp(1.75rem, 7vw, 3rem);
    letter-spacing: -1px;
  }
  .swipe-subtitle {
    margin-top: 1rem;
    font-size: 0.95rem;
    line-height: 1.6;
  }
}

/* ========== FULLSCREEN SLIDER（全屏切换轮播，GSAP Observer 逐屏切换） ========== */
/* 对标官方 Observer「Animated Continuous Sections」demo：页面锁定，滚轮/触摸/键盘逐屏切换 */
.container.fullscreen-slider-section {
  max-width: 100%;          /* 覆盖 .container 的 1208/1520px 上限：全屏通栏 */
  padding: 0;
}
.fullscreen-slider-section {
  position: relative;
  height: 100vh;
  height: 100svh;           /* 移动端地址栏伸缩时仍占满可视区 */
  overflow: hidden;
  background: #0a0a0a;
  /* touch-action: none;  移除这个，让我们的 JS 根据位置控制是否拦截 */
}
/* 每屏绝对堆叠，初始 visibility hidden，由 JS（gsap autoAlpha）控制显隐 */
.fs-slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
}
.fs-outer,
.fs-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;         /* 横竖双向裁剪：仅 overflow-y:hidden 会让 overflow-x 被规范强制为 auto，
                                背景 scale 放大溢出时底部弹出横向滚动条 */
}
.fs-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}
.fs-content {
  position: relative;
  z-index: 2;
  max-width: 86vw;
  text-align: center;
  padding: 0 4.5rem;        /* 右侧留出圆点指示器空间 */
}
.fs-heading {
  margin: 0;
  font-size: clamp(2.25rem, 6vw, 6.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -2px;
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.fs-heading .char {
  display: inline-block;    /* 逐字动画的基础：可独立位移/透明度 */
  will-change: transform, opacity;
}
.fs-subtitle {
  margin: 1.5rem 0 0;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
/* 右侧垂直居中竖排圆点指示器：显示共几张、当前第几张，点击可跳转 */
.fs-dots {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.fs-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  flex: none;
}
.fs-dot:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: #ffffff;
  transform: scale(1.2);
}
/* 当前屏：白色胶囊竖条，高度拉长，直观标识"第几张" */
.fs-dot.active {
  width: 10px;
  height: 26px;
  border-radius: 5px;
  background: #ffffff;
  border-color: #ffffff;
}

/* FULLSCREEN SLIDER 移动端 */
@media (max-width: 1024px) {
  .fs-content {
    padding: 0 3rem;
  }
  .fs-heading {
    font-size: clamp(1.75rem, 7vw, 3rem);
    letter-spacing: -1px;
  }
  .fs-subtitle {
    margin-top: 1rem;
    font-size: 0.95rem;
    line-height: 1.6;
  }
  .fs-dots {
    right: 12px;
    gap: 10px;
  }
  .fs-dot {
    width: 8px;
    height: 8px;
  }
  .fs-dot.active {
    height: 22px;
  }
}

/* ================================================================
   深色主题组件覆盖（配合 site-shell.css 的 [data-theme="dark"] 变量反转）
   白卡背景 / 黑字 / 灰字 / 边框 的硬编码在深色主题下换色
   ================================================================ */
[data-theme="dark"] .project-card,
[data-theme="dark"] .project-card-image,
[data-theme="dark"] .stat-item,
[data-theme="dark"] .team-card-wrap,
[data-theme="dark"] .team-photo-card {
  background: #1a1a1a;
}

/* 客户 Logo 条：无论深色/浅色主题，卡片背景始终白色（Logo 漂浮在白底上）
   同时固定文字 logo 颜色为深色，避免在白底上看不清 */
[data-theme="dark"] .client-logo {
  background: #ffffff;
}
[data-theme="dark"] .client-logo-text {
  color: #1a1a1a;
}
/* 文字类硬编码 → 深色主题下的浅色 */
[data-theme="dark"] .stat-value,
[data-theme="dark"] .stat-value .stat-suffix,
[data-theme="dark"] .stat-title,
[data-theme="dark"] .stats-title,
[data-theme="dark"] .stats-subtitle,
[data-theme="dark"] .team-title-a,
[data-theme="dark"] .team-label {
  color: #f5f5f5;
}
[data-theme="dark"] .stats-label {
  color: #9a9a9a;
}
[data-theme="dark"] .stat-desc,
[data-theme="dark"] .team-title-b,
[data-theme="dark"] .team-desc {
  color: rgba(245, 245, 245, 0.72);
}
/* 边框 / 分割线 */
[data-theme="dark"] .info-row {
  border-top-color: rgba(255, 255, 255, 0.14);
}
/* 瀑布流卡片渐变信息层文字保持白色（卡片底已随变量变深，overlay 叠在图上） */
[data-theme="dark"] .masonry-title,
[data-theme="dark"] .masonry-tag {
  color: #fff;
}


/* ============================================================
   Product Detail Components (eyebrow / intro-head / split-head / hero / scene-grid)
   Merged from components-product.css — shared site-wide, theme-aware via var(--color-*)
   ============================================================ */
/* ============================================
   Product Detail — Section Components (site-wide)
   ─────────────────────────────────────────
   Naming: BEM-like with pd- prefix (product-detail scope).
   Source: questek-detail page reusable blocks.

     Class                  Origin (questek)
     ───────────────        ─────────────────
     .pd-eyebrow            scenes-tag (pill label — the <span>, reused by intro-head / split-head / scene-grid)
     .pd-intro-head-section scenes-head (centered intro)
     .pd-split-head-section sec-head (num + title | aside)
     .pd-hero-section       hero (left copy + right panel)
     .pd-scene-grid-section scenes (head + card grid)

   Color strategy: theme-flip via var(--color-*) tokens
     · Outer bg    → var(--color-background)
     · Inner card  → var(--color-white)
     · Primary txt → var(--color-black)
     · Secondary   → var(--color-text-secondary)
     · Border      → var(--color-gray-ultra-light)
     · Accent      → #888888 (neutral grey, visible in both themes)
     · Avoid       --color-text-tertiary (white in light mode — invisible on light bg)
   ============================================ */

/* ========== 1. Eyebrow (pill tag) ========== */
/* Same family as masonry-tag / service-tag / row-tag */
.pd-eyebrow {
  --pd-eyebrow-color: #888888;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: 980px;
  background: var(--color-gray-ultra-light);
  border: 1px solid var(--color-gray-ultra-light);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--pd-eyebrow-color);
  white-space: nowrap;
}

/* ========== 2. Intro Head (centered section intro) ========== */
.pd-intro-head-section {
  --pd-intro-fg: var(--color-black);
  --pd-intro-fg2: var(--color-text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  /* 统一上下边距：与其他板块一致，间距只由 section 的 padding-block 控制，左右内缩交给 .container */
  padding-block: 5rem;
}

.pd-intro-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--pd-intro-fg);
  margin: 0;
}

.pd-intro-sub {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--pd-intro-fg2);
  max-width: 40rem;
  margin: 0;
}

/* ========== 3. Split Head (left num+title / right aside) ========== */
.pd-split-head-section {
  --pd-split-accent: #888888;
  --pd-split-fg: var(--color-black);
  --pd-split-fg2: var(--color-text-secondary);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.5rem;
  /* 统一上下边距：与其他板块一致，间距只由 section 的 padding-block 控制，左右内缩交给 .container */
  padding-block: 5rem;
}

.pd-split-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

/* Num row: 01 · bar · EN label */
.pd-split-num-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pd-split-accent);
  letter-spacing: 0.04em;
}

.pd-split-num-row .pd-bar {
  width: 2rem;
  height: 1px;
  background: var(--pd-split-accent);
}

.pd-split-num-row .pd-en {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--pd-split-fg2);
  letter-spacing: 0.12em;
}

.pd-split-title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--pd-split-fg);
  white-space: pre-line;
  margin: 0;
}

.pd-split-aside {
  width: 22.5rem;
  flex-shrink: 0;
}

.pd-split-aside p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--pd-split-fg2);
  margin: 0;
}

/* Modifiers on .pd-split-aside itself */
.pd-split-aside.wide { width: 45rem; }
.pd-split-aside.right { text-align: right; }

/* ========== 4. Hero (left copy + right product panel) ========== */
/* Three-layer flip: outer(var(--color-background)) → panel(var(--color-white)) → card(ultra-light) */
.pd-hero-section {
  --pd-hero-accent: #888888;
  --pd-hero-bg: var(--color-background);
  --pd-hero-bg2: var(--color-white);
  --pd-hero-card-bg: var(--color-gray-ultra-light);
  --pd-hero-img-bg: var(--color-gray-ultra-light);
  --pd-hero-fg: var(--color-black);
  --pd-hero-fg2: var(--color-text-secondary);
  --pd-hero-fg3: var(--color-text-secondary);
  --pd-hero-border: var(--color-gray-ultra-light);
  --pd-hero-border-strong: var(--color-gray-ultra-light);
  --pd-hero-divider: var(--color-gray-ultra-light);
  --pd-hero-divider2: var(--color-gray-ultra-light);

  display: flex;
  align-items: center;
  gap: 3rem;
  padding-block: 5rem;        /* 仅上下；左右 36px 内缩交给 .container（与 .stats-section 一致） */
  background: var(--pd-hero-bg);
  min-height: 47.5rem;
}

/* ---- Left copy area ---- */
.pd-hero-copy {
  width: 33.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
  justify-content: center;
  flex-shrink: 0;
}

.pd-hero-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 980px;
  background: var(--pd-hero-bg2);
  border: 1px solid var(--pd-hero-border);
}

.pd-hero-badge-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--pd-hero-accent);
  flex-shrink: 0;
}

.pd-hero-badge-text {
  font-size: 0.75rem;
  color: var(--pd-hero-fg2);
  font-weight: 500;
}

.pd-hero-title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--pd-hero-fg);
  margin: 0;
}

.pd-hero-desc {
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: normal;
  color: var(--pd-hero-fg2);
  max-width: 32.5rem;
  margin: 0;
}

/* ---- Stats row ---- */
.pd-stats-row {
  display: flex;
  width: 100%;
  padding-top: 1.75rem;
}

.pd-stat-item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.pd-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--pd-hero-fg);
}

.pd-stat-label {
  font-size: 0.75rem;
  color: var(--pd-hero-fg3);
  font-weight: normal;
  opacity: 0.5;
}

.pd-stat-divider {
  width: 1px;
  height: 2.75rem;
  background: var(--pd-hero-divider2);
  margin: 0 1.75rem;
  flex-shrink: 0;
}

/* ---- Right product panel ---- */
.pd-product-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: transparent;
  border-radius: 1.5625rem;
  padding: 2.5rem;
  min-width: 0;
}

/* ---- Product card stage (two cards side-by-side) ---- */
.pd-product-stage {
  display: flex;
  gap: 1.5rem;
  flex: 1;
  min-height: 0;
}

.pd-product-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--pd-hero-card-bg);
  border-radius: 1.5625rem;
  padding: 1.5rem;
  gap: 1rem;
  border: 1px solid var(--pd-hero-border);
  min-width: 0;
}

/* 无产品信息时消除底部留白 */
.pd-product-card.no-info {
  align-self: flex-start;     /* 不随 stage 纵向拉伸，避免 img(flex:0 0 auto) 不填充导致底部空白 */
}

.pd-product-img {
  flex: 0 0 auto;              /* 不拉伸填充，改由 aspect-ratio 定高，保证焦点前后台比例一致 */
  aspect-ratio: 4 / 5;        /* 固定竖框：与后台焦点预览面板 4:5 一致，焦点位置才精准对齐 */
  position: relative;         /* 焦点 transform 绝对定位基准（applyFocusZoom 接管 img） */
  background: transparent;
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  color: var(--color-black);   /* SVG uses currentColor, flips with theme */
}

.pd-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-product-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

.pd-product-type {
  align-self: flex-start;
  display: inline-flex;
  padding: 0.25rem 0.625rem;
  border-radius: 100px;
  background: var(--color-gray-ultra-light);
  border: 1px solid var(--color-gray-ultra-light);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--pd-hero-accent);
}

.pd-product-name {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--pd-hero-fg);
}

.pd-product-desc {
  font-size: 0.8125rem;
  line-height: 1.4;
  font-weight: normal;
  opacity: 0.5;
  color: var(--pd-hero-fg3);
}

/* ========== 5. Scene Grid (centered head + scene card grid) ========== */
/* Centered intro head + N rows × 3 columns. Each card: num(top-left) + tag(top-right) + title + desc. */
.pd-scene-grid-section {
  --pd-grid-accent: #888888;
  --pd-grid-fg: var(--color-black);
  --pd-grid-fg2: var(--color-text-secondary);
  --pd-grid-fg3: var(--color-text-secondary);
  --pd-grid-card-bg: var(--color-white);
  --pd-grid-border: var(--color-gray-ultra-light);

  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding-block: 7.5rem;       /* 仅上下；左右 36px 内缩交给 .container（与 .stats-section 一致） */
  background: var(--color-background);
}

/* ---- Grid header (centered) ---- */
.pd-grid-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.pd-grid-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--pd-grid-fg);
  margin: 0;
}

.pd-grid-sub {
  font-size: 1rem;
  color: var(--pd-grid-fg2);
  margin: 0;
}

/* ---- Card grid container ---- */
.pd-grid-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.pd-grid-row {
  display: flex;
  gap: 1.5rem;
}

/* ---- Single scene card ---- */
.pd-scene-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem;
  border-radius: 1.5625rem;
  background: var(--pd-grid-card-bg);
  border: 1px solid var(--pd-grid-border);
}

.pd-scene-card.tall { min-height: 21.25rem; }   /* 340px */
.pd-scene-card.short { min-height: 17.5rem; }    /* 280px */

/* Card top: num(left) + tag(right) */
.pd-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.pd-card-num {
  font-size: 1rem;
  font-weight: 600;
  color: var(--pd-grid-accent);
}

.pd-card-tag {
  font-size: 0.6875rem;
  font-weight: normal;
  color: var(--pd-grid-fg3);
  letter-spacing: 0.08em;
  opacity: 0.5;
}

/* Card body content */
.pd-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pd-card-title {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--pd-grid-fg);
  margin: 0;
}

.pd-scene-card.short .pd-card-title {
  font-size: 1.25rem;
}

.pd-card-desc {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--pd-grid-fg2);
  margin: 0;
}

.pd-scene-card.short .pd-card-desc {
  font-size: 0.75rem;
  line-height: 1.45;
}

/* ========== Responsive (1024 / 768) ========== */

@media (max-width: 1024px) {
  /* Split head → stack vertically */
  .pd-split-head-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding-block: 3rem;
  }
  .pd-split-aside,
  .pd-split-aside.wide { width: 100%; }
  .pd-split-aside.right { text-align: left; }

  /* Hero → stack vertically */
  .pd-hero-section {
    flex-direction: column;
    padding-block: 3rem;
    min-height: auto;
  }
  .pd-hero-copy { width: 100%; }
  .pd-product-panel { width: 100%; }
  .pd-product-stage { flex-direction: column; }

  /* Scene grid → single column */
  .pd-scene-grid-section { padding-block: 4rem; }
  .pd-grid-row { flex-direction: column; }
  .pd-scene-card,
  .pd-scene-card.tall,
  .pd-scene-card.short { min-height: auto; }

  /* Intro head → 移动端统一上下边距（与桌面 5rem 同节奏，按比例收紧） */
  .pd-intro-head-section { padding-block: 3rem; }
}

@media (max-width: 768px) {
  .pd-intro-title { font-size: 2rem; }

  .pd-hero-section { padding-block: 2rem; gap: 2rem; }
  .pd-product-panel { padding: 1.5rem; border-radius: 1.25rem; }
  .pd-product-card { padding: 1.25rem; }
  .pd-product-name { font-size: 1.25rem; }
  .pd-stats-row { flex-wrap: wrap; gap: 1rem; }
  .pd-stat-divider { display: none; }

  .pd-scene-grid-section { padding-block: 3rem; gap: 2.5rem; }
  .pd-scene-card { padding: 1.5rem; }
  .pd-card-title { font-size: 1.125rem; }

  .pd-intro-head-section { padding-block: 2.5rem; }
  .pd-split-head-section { padding-block: 2.5rem; }
}

/* ================================================================
   3D 样机 Banner（mockup-banner）
   ─────────────────────────────────────────────────────────────
   三层合成：①背景（主题渐变 / 纯色 / 图片）→ ②标题+副标题 → ③手机方形舞台（左/中/右）
   手机外壳 = 前玻璃面 + 后盖 + 「4 条直壁 + 4 角圆弧壁」真实垂直平面侧壁

   主题说明（无需 [data-theme="dark"] 覆盖）：本组件的相框底与设备本体在浅色/深色主题下
   **恒为深色**（它是被展示的"物体"，不是页面文字容器），标题/副标题为白字压在深底上，
   两主题下都正确，故这里不硬编码任何随主题翻转的文字色。

   ⚠️ 勿改（踩过的坑，改动会使旋转中的侧壁压成 2D 纸片）：
     · 进场旋转由 render.js 用 requestAnimationFrame 逐帧写内联 transform，不走 CSS @keyframes
     · 动画目标（.mk-phone）不加 opacity、不加 animation
     · .mockup-rig 不加 will-change:transform（会强制升合成层并压平 preserve-3d 子元素）
   ================================================================ */
.container.mockup-banner-section {
  max-width: 100%;               /* 覆盖 site-shell .container 的宽度上限，与 .hero-banner-section 同策略 */
}
.mockup-banner-section {
  height: 100vh;                /* 严格一屏（不超可视区）：与 nav(fixed)下方贴到屏幕底、左右由 .container 提供 36px */
  display: flex;
  align-items: stretch;
  padding: 0.75rem;              /* 与 hero-banner 首屏一致的四周 12px 边距效果：圆角相框离视口四边留白 */
  box-sizing: border-box;
}
.mockup-frame {
  position: relative;
  width: 100%;
  /* ⚠️ 不能用 height:100%——父级 .mockup-banner-section 只有 min-height（非确定高度），
     百分比解析为 auto，而 frame 内容全是绝对定位 → 高度塌成 0，前台整块空白。
     改由父级 display:flex + align-items:stretch 拉伸撑满（section 高度恒 ≥ max(100vh,64rem)）。 */
  height: auto;
  flex: 1 1 auto;
  align-self: stretch;
  max-width: none;
  border-radius: 25px;           /* 圆角统一 25px，对齐全站设计系统 */
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, #1c1f25 0%, #0c0d10 60%);
}
/* ① 背景图（bgType=image 时显示，铺满相框） */
.mockup-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
  opacity: 1;                /* 默认可见：JS 缺席 / 浏览器缓存旧文件也不会让文字或背景消失 */
}
/* 背景视频遮罩：压暗视频让文字清晰（z-index 与 .mockup-bg 同 0、DOM 在其后 → 盖视频；文字 z1/5 在其上） */
.mockup-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.75);
  pointer-events: none;
}
/* ② 标题 / 副标题：可在手机后方(z:1)或前方(z:5) —— 由 render.js 写内联 z-index */
.mockup-text {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.875rem;
  padding: 0 7%;
  box-sizing: border-box;
  pointer-events: none;
}
.mockup-text.align-left   { align-items: flex-start; text-align: left; }
.mockup-text.align-center { align-items: center;     text-align: center; }
.mockup-title {
  margin: 0;
  font-size: clamp(32px, 4.6vw, 64px);
  font-weight: 600;              /* 板块大标题字重 600，对齐 .team-title 规范 */
  line-height: 1.1;
  letter-spacing: -1.5px;
  color: #ffffff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.mockup-subtitle {
  margin: 0;
  max-width: 32ch;
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: 400;
  line-height: 1.55;             /* 正文行高保持 1.4–1.6 */
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

/* ---- 标题 / 副标题 风格变体 ---- */
/* 压缩冲击字体：参考 DramaOwns / SpeakerPortfolio 超大贴边标题 */
.mockup-title.mockup-title-impact {
  font-family: 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', 'Franklin Gothic Bold', sans-serif;
  font-weight: 400;              /* Impact 本身已极粗，保持 400 避免被系统回退字体错误拉伸 */
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.mockup-title.mockup-title-condensed {
  font-family: 'Arial Narrow', 'Franklin Gothic Medium', 'Impact', 'Haettenschweiler', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
/* 贴边铺满（不换行）：比默认 7% 收窄到 2%，标题撑满整行但仍留一点边距不顶死相框边缘 */
.mockup-text.mockup-full {
  padding-left: 0%;
  padding-right: 0%;
}
.mockup-title.mockup-full {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}
/* 垂直位置 */
.mockup-text.v-top    { justify-content: flex-start; padding-top: 6%; }
.mockup-text.v-center { justify-content: center; }
.mockup-text.v-bottom { justify-content: flex-end; padding-bottom: 6%; }
/* 字距档位 */
.mockup-title.ls-xtight { letter-spacing: -0.05em; }
.mockup-title.ls-tight  { letter-spacing: -0.03em; }
.mockup-title.ls-wide   { letter-spacing: 0.04em; }
.mockup-subtitle.ls-wide { letter-spacing: 0.06em; }
/* 副标题不换行 */
.mockup-subtitle.no-wrap {
  max-width: none;
  white-space: nowrap;
}
/* ===== 横向无缝循环滚动字幕（mockup-banner 标题 / 副标题） =====
   用法：section 配 titleMarquee:'rtl'|'ltr'（副标题同理 subtitleMarquee），
   标题即变成无限横向滚动条。track 内两份相同拷贝，动画位移 -50% 即无缝循环。 */
.mockup-title.mk-marquee,
.mockup-subtitle.mk-marquee {
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  /* 进场仍由 .mockup-frame.mockup-pre 控制（translateY + opacity），不影响横向滚动 */
}
.mockup-subtitle.mk-marquee { max-width: none; }   /* 副标题默认 32ch 限宽，跑马灯需全宽 */
.mockup-marquee-track {
  display: inline-flex;
  width: max-content;
  will-change: transform;
  /* 滚动由 GSAP 驱动（render.js → setupMockupMarquee），不走 CSS @keyframes，
     因此不受系统「减少动态」(prefers-reduced-motion) 的 !important 干扰，前台必滚。 */
}
.mockup-marquee-copy { flex: 0 0 auto; white-space: nowrap; }
/* 进场「初始隐藏态」：仅当 render.js 主动给 .mockup-frame 加 .mockup-pre 才生效（JS 缺位则保持上面的默认可见，安全） */
/* 跑马灯标题/副标题：去掉上下进场（会与横向滚动视觉冲突），只保留淡入，动效完全交给跑马灯 */
.mockup-frame.mockup-pre .mockup-title:not(.mk-marquee) {
  opacity: 0;
  transform: translateY(-28px);   /* 标题：从上往下进入 */
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.mockup-frame.mockup-pre .mockup-subtitle:not(.mk-marquee) {
  opacity: 0;
  transform: translateY(28px);    /* 副标题：从下往上进入 */
  transition: opacity 0.7s ease 0.12s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
  will-change: opacity, transform;
}
.mockup-frame.mockup-pre .mockup-title.mk-marquee,
.mockup-frame.mockup-pre .mockup-subtitle.mk-marquee {
  opacity: 0;
  transform: none;                /* 不上下移动 —— 避免与跑马灯横向滚动冲突 */
  transition: opacity 0.6s ease;
  will-change: opacity;
}
.mockup-frame.mockup-pre .mockup-bg {
  opacity: 0;
  transition: opacity 1s ease;
}
/* 进场「揭示态」：render.js 滚进视口播设备时先加 .is-bg（背景图提前淡入），约手机 70% 时加 .is-revealed（文字淡入），形成节奏层次 */
.mockup-frame.is-revealed .mockup-title:not(.mk-marquee),
.mockup-frame.is-revealed .mockup-subtitle:not(.mk-marquee) {
  opacity: 1;
  transform: translateY(0);
}
.mockup-frame.is-revealed .mockup-title.mk-marquee,
.mockup-frame.is-revealed .mockup-subtitle.mk-marquee {
  opacity: 1;
  transform: none;
}
.mockup-frame.is-bg .mockup-bg {
  opacity: 1;
}
/* ③ 手机动画舞台：高度跟随 mockup-frame（不再硬编码 phoneH*1.2，避免被父容器裁切；宽度由 row 自然撑开） */
.mockup-stage {
  position: absolute;
  z-index: 2;                    /* 恒为 2：标题 z=1 在其后、z=5 在其前 */
  max-width: 94vw;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;                  /* 由 top:0+bottom:0 拉伸铺满 mockup-frame，旋转 bbox 也装得下 */
}
/* 横向定位仍由 left/right 控制，垂直方向统一拉伸（top:0+bottom:0 由 .mockup-stage 自身的 height:auto 处理）*/
.mockup-stage.pos-left   { left: 4%;   right: auto;  transform: none; }
.mockup-stage.pos-center { left: 50%;  right: auto;  transform: translateX(-50%); }   /* 仅水平居中，保留用户配的 stageSize 含义 */
.mockup-stage.pos-right  { right: 4%;  left: auto;   transform: none; }

/* ===== 舞台内部（3D 透视） ===== */
.mockup-viewport {
  perspective: 1200px;
  perspective-origin: 50% 40%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;              /* 「从下方升起」在相框内被干净裁切 */
}
.mockup-rig {
  transform-style: preserve-3d;  /* ⚠️ 不能加 will-change / opacity / animation */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ===== 手机本体（宽高由 render.js 按方形舞台高 × 1:2.08 比例注入，填满上下边） ===== */
.mk-phone-row { position: relative; transform-style: preserve-3d; }
.mk-phone {
  position: absolute;
  top: 0;
  transform-style: preserve-3d;
  --ph: 520px;
  /* 外壳金属色系统变量：侧壁 (.mk-wall) 与正/背面边框共用，保证转角边线与壳色一致 */
  --mk-hi: #6a6e78;
  --mk-lo: #181a1f;
}   /* --ph 由 render.js 注入为真实 phoneH，所有 face/screen 圆角与 padding 同步缩放，杜绝「face 圆角固定像素 vs 侧壁圆角按 tyScale 缩放」造成的 4 角台阶 */
.mk-face-front,
.mk-face-back {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--ph) * 42 / 520);   /* 与 buildMockupShell 的侧壁圆角半径 42*tyScale(=42*ph/520) 严格对齐，杜绝 4 角接缝 */
  transform-style: preserve-3d;
  will-change: transform;        /* 常驻 GPU 纹理：避免背面翻回正面时重绘/重解码造成单帧卡顿 */
}
.mk-face-front {
  transform: translateZ(calc(var(--ph) * 10 / 520));   /* 总壳厚 20/520*ph（用户反馈"边框太粗"，从 28 减到 20 减幅 28%）；对应 JS buildMockupShell d=20*tyScale */
  padding: calc(var(--ph) * 9 / 520);                  /* 边框内留白（保持 padding<z，正面看每侧露 10-9=1/520 金属边沿，无台阶，但视觉明显变细）*/
  background:
    /* 顶部倒角切割线——锐利高光 → 淡出，模拟金属 CNC 边沿 */
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.10) 3%, rgba(255,255,255,0) 8%),
    /* 底部反弹光——稍稍提亮，避免纯黑塌陷 */
    linear-gradient(0deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 5%),
    /* 横向金属反光：亮 → 中暗 → 亮（多 stop），告别"塑料双色" */
    linear-gradient(105deg, #1d1f25 0%, #4d525b 22%, #363a42 50%, #4d525b 78%, #13151a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),       /* 顶边 rim，CAO 切割感 */
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),            /* 底边阴影 */
    inset 0 0 0 1px color-mix(in srgb, var(--mk-lo), transparent 30%);  /* 整体边沿：用壳暗部色，侧视时不再露黑线 */
}
/* 🔑 锐利高光①：正面边框 1px 渐变描边环——沿圆角矩形走一圈的 CNC 倒角亮线（左上亮→右下暗→右下角反弹） */
.mk-face-front::after {
  content: "";
  position: absolute;
  inset: calc(var(--ph) * 2 / 520);
  border-radius: calc(var(--ph) * 40 / 520);
  padding: 1px;                                   /* 固定 1px：屏幕空间级锐利，不随 --ph 放大变糊 */
  background: linear-gradient(165deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.28) 16%,
    rgba(255, 255, 255, 0.04) 38%,
    rgba(255, 255, 255, 0) 55%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0.45) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;                    /* 只留边框 1px 环，中间镂空 */
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  z-index: 8;
}
.mk-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--ph) * 34 / 520);
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.8);
  will-change: transform;
}.mk-ui {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
}
.mk-island {
  position: absolute;
  top: calc(var(--ph) * 12 / 520);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--ph) * 76 / 520);   /* 用户反馈"灵动岛太大"——从 94/520 缩到 76/520（约 14.6% 屏宽），比例更接近真机 */
  height: calc(var(--ph) * 21 / 520);  /* 高度 21/520（约 4% 屏高）——细长胶囊感 */
  border-radius: 100px;
  background: #000;
  z-index: 6;
}
.mk-island::after {
  content: "";
  position: absolute;
  right: calc(var(--ph) * 10 / 520);
  top: 50%;
  transform: translateY(-50%);
  width: calc(var(--ph) * 6 / 520);    /* 镜头直径缩到 6/520，等比同步缩 */
  height: calc(var(--ph) * 6 / 520);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2b3a55, #0a0e16);
}
.mk-gloss {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--ph) * 34 / 520);
  pointer-events: none;
  z-index: 7;
  /* 玻璃环境反射（柔和化）：顶部微亮带 + 右上柔光斑 + 底部微暗——不再用固定 125° 大斜光带，
     任意旋转角度都自然（斜光带在手机 rotateY 到侧面时会显得「光没跟着走」，很假） */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.04) 24%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 20%),
    radial-gradient(130% 70% at 80% 10%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 52%);
}
/* 🔑 辅助反光（弱化）：细斜光条 alpha 0.22 → 0.09，作为极淡的玻璃环境光提示，不再抢视觉 */
.mk-gloss::before {
  content: "";
  position: absolute;
  top: -15%;
  left: 9%;
  width: calc(var(--ph) * 88 / 520);
  height: 130%;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.01) 30%,
    rgba(255, 255, 255, 0.09) 49%,
    rgba(255, 255, 255, 0.09) 51%,
    rgba(255, 255, 255, 0.01) 70%,
    rgba(255, 255, 255, 0) 100%);
  transform: rotate(24deg);
  pointer-events: none;
}
/* ===== 外壳配色（data-shell 切换：正面边框 / 后盖 / 侧壁同步） ===== */
.mk-phone[data-shell="silver"] .mk-face-front {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.18) 3%, rgba(255,255,255,0) 8%),
    linear-gradient(0deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 5%),
    linear-gradient(105deg, #c9cdd5 0%, #f0f2f6 22%, #d9dce3 50%, #f0f2f6 78%, #b5bbc7 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px color-mix(in srgb, var(--mk-lo), transparent 30%);
}
.mk-phone[data-shell="silver"] .mk-face-back {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 6%),
    linear-gradient(155deg, #d8dbe1 0%, #b0b5bf 50%, #c4c8d1 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px color-mix(in srgb, var(--mk-lo), transparent 40%);
}
.mk-phone[data-shell="silver"] { --mk-hi: #e2e5ea; --mk-lo: #9aa0aa; }
.mk-phone[data-shell="white"] .mk-face-front {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.25) 3%, rgba(255,255,255,0) 8%),
    linear-gradient(0deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0) 5%),
    linear-gradient(105deg, #e9eaec 0%, #fdfdfe 22%, #f0f1f3 50%, #fdfdfe 78%, #d8dade 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px color-mix(in srgb, var(--mk-lo), transparent 30%);
}
.mk-phone[data-shell="white"] .mk-face-back {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 6%),
    linear-gradient(155deg, #e8e9eb 0%, #c6c8cc 50%, #d5d7da 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    inset 0 0 0 1px color-mix(in srgb, var(--mk-lo), transparent 40%);
}
.mk-phone[data-shell="white"] { --mk-hi: #f2f3f5; --mk-lo: #b4b7bc; }
.mk-phone[data-shell="titanium"] .mk-face-front {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.12) 3%, rgba(255,255,255,0) 8%),
    linear-gradient(0deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0) 5%),
    linear-gradient(105deg, #7e848f 0%, #aab0ba 22%, #8d939e 50%, #aab0ba 78%, #6b717c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px color-mix(in srgb, var(--mk-lo), transparent 30%);
}
.mk-phone[data-shell="titanium"] .mk-face-back {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 6%),
    linear-gradient(155deg, #9aa0ab 0%, #7c828d 50%, #8c929d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px color-mix(in srgb, var(--mk-lo), transparent 40%);
}
.mk-phone[data-shell="titanium"] { --mk-hi: #aeb4be; --mk-lo: #616670; }
.mk-phone[data-shell="blue"] .mk-face-front {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 3%, rgba(255,255,255,0) 8%),
    linear-gradient(0deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 5%),
    linear-gradient(105deg, #253550 0%, #3f5578 22%, #2d4061 50%, #3f5578 78%, #1b2842 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px color-mix(in srgb, var(--mk-lo), transparent 30%);
}
.mk-phone[data-shell="blue"] .mk-face-back {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 6%),
    linear-gradient(155deg, #34496c 0%, #1f2e47 50%, #2a3c59 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px color-mix(in srgb, var(--mk-lo), transparent 40%);
}
.mk-phone[data-shell="blue"] { --mk-hi: #45597b; --mk-lo: #18233a; }
.mk-face-back {
  transform: translateZ(calc(var(--ph) * -10 / 520));   /* 与 front 严格对称（±10/520），后盖厚度同步 */
  background:
    /* 顶部 rim——后盖顶部微弱高光 */
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 6%),
    /* AG 磨砂金属底——比 face 多一点 stop，让后盖看起来"哑光但有反射"，不是黑色塑料 */
    linear-gradient(155deg, #3d4048 0%, #1c1e23 50%, #2c2f36 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px color-mix(in srgb, var(--mk-lo), transparent 40%);
}
/* 🔑 锐利高光③：后盖边框 1px 描边环（比正面弱一档，方向相反——右上来光） */
.mk-face-back::after {
  content: "";
  position: absolute;
  inset: calc(var(--ph) * 2 / 520);
  border-radius: calc(var(--ph) * 40 / 520);
  padding: 1px;
  background: linear-gradient(165deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.30) 68%,
    rgba(255, 255, 255, 0.55) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}
.mk-cam {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 80px;
  height: 80px;
  border-radius: 22px;
  background: linear-gradient(150deg, #23262c, #0d0e11);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.mk-lens {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a4a63, #05070b);
  box-shadow: inset 0 0 0 2px #1b1e24;
}
.mk-lens.a { top: 12px; left: 12px; }
.mk-lens.b { top: 12px; right: 12px; }
.mk-lens.c { top: 42px; left: 27px; }
.mk-flash {
  position: absolute;
  top: 46px;
  right: 16px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f3e9c8;
}
/* 侧壁：4 条直壁 + 4 角圆弧壁（真实垂直平面）。仅保留竖向金属渐变（顶亮→底暗），不再加横向 rim 亮线——用户反馈"壳中间有一条白线"突兀 */
.mk-wall {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 3px;
  /* A+ 连续金属高光：金属色由父级 .mk-phone 的 --mk-hi/--mk-lo 提供，--mk-shade(0..1) 由 JS 按小面角度写入，
     在 color-mix 里按 shade 插值，使圆角各片高光连续包裹、消除「瓦楞」褶皱。
     直壁不传 --mk-shade 时用默认 0.5。 */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.10)),
    color-mix(in srgb, var(--mk-hi) calc(var(--mk-shade) * 100%), var(--mk-lo));
  box-shadow:
    inset 0 -1px 0 rgba(0, 0, 0, 0.45);
  backface-visibility: visible;
}
/* 侧键：四件套位置/尺寸全部用 calc(var(--ph) * X / 520) 跟随机身真实高度缩放，避免 phoneH ≠ 520 时位置错位 */
.mk-key {
  position: absolute;
  background: linear-gradient(180deg, #6e727b 0%, #3a3d44 50%, #15171b 100%);   /* 比 face 亮一档：明显金属 */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),     /* 顶 rim */
    0 1px 3px rgba(0, 0, 0, 0.6);                /* 凸出投影 */
}
.mk-power     { right: calc(var(--ph) * -3 / 520); top: calc(var(--ph) * 158 / 520); width: calc(var(--ph) * 4 / 520); height: calc(var(--ph) * 78 / 520); border-radius: 0 calc(var(--ph) * 2 / 520) calc(var(--ph) * 2 / 520) 0; }
.mk-vol-up    { left:  calc(var(--ph) * -3 / 520); top: calc(var(--ph) * 138 / 520); width: calc(var(--ph) * 4 / 520); height: calc(var(--ph) * 50 / 520); border-radius: calc(var(--ph) * 2 / 520) 0 0 calc(var(--ph) * 2 / 520); }
.mk-vol-down  { left:  calc(var(--ph) * -3 / 520); top: calc(var(--ph) * 200 / 520); width: calc(var(--ph) * 4 / 520); height: calc(var(--ph) * 50 / 520); border-radius: calc(var(--ph) * 2 / 520) 0 0 calc(var(--ph) * 2 / 520); }
.mk-mute      { position: absolute; left: calc(var(--ph) * -3 / 520); top: calc(var(--ph) * 96 / 520); width: calc(var(--ph) * 4 / 520); height: calc(var(--ph) * 26 / 520); border-radius: calc(var(--ph) * 2 / 520) 0 0 calc(var(--ph) * 2 / 520);
                background: linear-gradient(180deg, #6e727b 0%, #3a3d44 50%, #15171b 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.6); }

/* 笔记本(mk-laptop) 样式已随分支移除 */

/* 移动端：相框定高（76vh 给下方留 24vh 给滚动提示），标题靠上、手机舞台水平居中 */
@media (max-width: 768px) {
  .mockup-banner-section { height: 76vh; padding: 0.75rem 1rem 0.75rem; }   /* 与 hero-banner 移动端同款边距（上下 12px，左右 16px）；76vh 保证严格一屏之内 */
  .mockup-title { font-size: clamp(26px, 7vw, 38px); letter-spacing: -0.5px; }
  .mockup-subtitle { max-width: 24ch; }
  .mockup-stage.pos-left,
  .mockup-stage.pos-center,
  .mockup-stage.pos-right { left: 50%; right: auto; transform: translateX(-50%); }   /* 桌面版去掉了 top:50% / translateY(-50%)，此处同步去掉 Y 偏移，只保留水平居中 */
  .mockup-text { justify-content: flex-start; padding-top: 12%; }
  /* 移动端贴边标题仍可大，但为了不撑破相框做适度缩放；副标题 no-wrap 在超窄屏允许压缩字距 */
  .mockup-title.mockup-full { font-size: clamp(28px, 12vw, 56px); }
  .mockup-subtitle.no-wrap { letter-spacing: -0.01em; }
}

/* ================================================================
   可复用强调色（装饰文字 / 装饰元素通用工具类）
   ─────────────────────────────────────────────────────────────
   供所有组件复用：眉标、分栏头序号、场景卡序号、产品类型标……任意
   "装饰性文字 / 小元素"需要自定义颜色时，在元素 class 上追加对应
   工具类即可，例如：<span class="pd-card-num pd-accent-blue">01</span>

   · 颜色为**用户指定值**（蓝 #006fff / 橙 #ff9300 / 红 #eb0000 / 绿 #26ee00），
     浅色与深色主题同值——该组亮色在深色底上可读性良好，无需调亮
   · 工具类必须定义在所有组件"默认色"规则之后（本文件末尾），
     同为单类选择器时靠后的获胜，才能覆盖组件默认 color
   · 也可直接用变量做非文字装饰：border-color / background 等
     （如 border-color: var(--pd-accent-blue)）
   ================================================================ */
:root {
  --pd-accent-blue: #006fff;
  --pd-accent-orange: #ff9300;
  --pd-accent-red: #eb0000;
  --pd-accent-green: #26ee00;
}
[data-theme="dark"] {
  --pd-accent-blue: #006fff;
  --pd-accent-orange: #ff9300;
  --pd-accent-red: #eb0000;
  --pd-accent-green: #26ee00;
}
/* ===== 广告 Banner（ad-banner）=====
   大标题整屏出现 → 从中间上下裂开 → 露出 16:9 图片无缝跑马灯 → 上下副标题 */
.container.ad-banner-section {
  max-width: 100%;
}
.ad-banner-section {
  height: 100vh;
  display: flex;
  align-items: stretch;
  padding: 0.75rem;
  box-sizing: border-box;
}
.ad-frame {
  position: relative;
  width: 100%;
  height: auto;
  flex: 1 1 auto;
  align-self: stretch;
  max-width: none;
  border-radius: 25px;
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, #1c1f25 0%, #0c0d10 60%);
}
.ad-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
  opacity: 1;
}
/* 背景视频遮罩：压暗视频让文字更清晰（z-index 与 .ad-bg 同为 0、DOM 在其后 → 盖在视频上；文字 z-index 1 在其上） */
.ad-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.75);
  pointer-events: none;
}
.ad-text {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 0;                     /* 用户要求贴边铺满：无水平内缩 */
  box-sizing: border-box;
  text-align: center;
  pointer-events: none;
}
.ad-subtitle {
  position: relative;
  z-index: 3;                    /* 始终压在图片带（z-index:2）之上，裂开时不被遮挡 */
  margin: 0;
  max-width: 100%;               /* 不再限制 44ch：单行贴边（用户要求不换行） */
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
  white-space: nowrap;           /* 副标题不换行（用户 2026-08-31 要求，对齐 mockup .no-wrap） */
}
.ad-title-wrap {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.ad-title-stack {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}
.ad-title {
  margin: 0;
  width: 100%;                    /* 上下两半必须同宽，合体淡入时才不会错位 */
  font-size: clamp(80px, 18vw, 280px);   /* 用户要求再大 1 倍 */
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #ffffff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
  text-align: center;
  white-space: nowrap;
}
/* 标题上下两半：重叠在同一位置。淡入阶段【不裁剪】= 完整标题（无中间拼接缝）；
   裂开瞬间由 GSAP 注入 clip-path 切成上下两半，再各自位移分开 */
.ad-title-bottom {
  position: absolute;
  left: 0; top: 0; right: 0;
}
.ad-title.ad-title-impact {
  font-family: 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', 'Franklin Gothic Bold', sans-serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.ad-title.ad-title-condensed {
  font-family: 'Arial Narrow', 'Franklin Gothic Medium', 'Impact', 'Haettenschweiler', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.ad-upper { text-transform: uppercase; }
/* 中间图片带：flex 居中；opacity 淡入由 GSAP 接管 */
.ad-marquee-pos {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;                    /* 压在标题之上，形成「图片从标题中间露出」 */
}
.ad-marquee {
  position: relative;
  width: 100%;
  /* 用 vh 而非 %：% 在「绝对定位父级 + flex 居中」下不向子级传递确定高度，会塌成图片内容高度（约 42px 细条）。
     vh 始终确定，22vh 在 100vh 框内约等于标题高度的合理图片带，裂开时横穿标题中间 */
  height: clamp(120px, 22vh, 220px);
  overflow: hidden;
}
.ad-marquee-track {
  display: inline-flex;
  align-items: center;
  height: 100%;
  width: max-content;
  will-change: transform;
}
/* 图片项 = 16:9 显示框 wrapper，内层 img 由 applyFocusZoom 接管（data-focus 微信式焦点，
   zoom×cover 尺寸 + translate 平移，maxWidth:none）。wrapper 必须 overflow:hidden + relative */
.ad-marquee-item {
  position: relative;
  height: 100%;
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
  margin-right: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: #14161a;            /* 图片未加载/留白时的占位色 */
}
.ad-marquee-item img {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* applyFocusZoom 加载后覆盖 width/height/maxWidth/transform/objectPosition */
}
/* ========== 图标动画墙 icon-wall（GIF/APNG/Lottie 散落全屏） ========== */
.icon-wall-section.container { max-width: none; width: 100%; padding: 0; }
.icon-wall-section {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--color-background);   /* 底色与主题一致 */
}
/* 中央标题（拼贴散落风格下，标题居中压在图标之上；pointer-events:none 不挡图标交互） */
.iw-head {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 5;
  pointer-events: none;
  max-width: 86%;
}
.iw-title {
  margin: 0;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.iw-sub {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}
/* 图标容器：绝对定位散落；left/top 为锚点中心点百分比（可 >100 或 <0 故意切到屏外做拼贴） */
/* scale 经 CSS 变量等比缩放，不冲突「原始尺寸」：img 用 max-width:none 按自然像素显示，lottie 按 JSON w/h 显示，再乘 scale */
.iw-icon {
  position: absolute;
  transform: translate(-50%, -50%) scale(var(--iw-scale, 1));
  transform-origin: center;
  z-index: var(--iw-z, 1);
  opacity: 1;                              /* 默认可见；仅当父级 .reveal 未就绪时隐藏，避免 JS 失效永久消失 */
  will-change: transform, opacity;
  transition: opacity 0.6s var(--motion-easing-enter);
  transition-delay: var(--iw-delay, 0s);
}
/* 进场：父级带 .reveal 且尚未 .visible 时，图标按各自 delay 错位淡入 */
.icon-wall-section.reveal:not(.visible) .iw-icon { opacity: 0; }
.iw-icon img, .iw-icon svg { display: block; max-width: none; width: auto; height: auto; }
.iw-icon.lottie svg { width: 100%; height: 100%; }
/* 可选卡片底（frame=true）：主题同色系微反差圆角卡 */
.iw-icon.framed {
  padding: 14px;
  border-radius: 18px;
  background: rgba(127, 127, 127, 0.10);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
@media (prefers-reduced-motion: no-preference) {
  .iw-icon { animation: iwFloat 7s ease-in-out infinite; }
}
@keyframes iwFloat {
  0%, 100% { transform: translate(-50%, -50%) scale(var(--iw-scale, 1)); }
  50%      { transform: translate(-50%, calc(-50% - 10px)) scale(var(--iw-scale, 1)); }
}

/* ===== 设备屏幕嵌入（device-screen）=====
 * 人物手持样机图（iPad/笔记本等，屏幕区域抠成透明/纯色）+ 设计稿/视频透视贴合嵌入屏幕。
 * 关键：媒体 .ds-media 在**下层**（z-index 0），样机图 .ds-device 在**上层**（z-index 1）——
 * 手指/机身天然盖住媒体边缘，实现「手遮挡屏幕一角」的自然效果。
 * 屏幕四角 s.corners（相对 stage 的 0~100% 坐标）由 render.js 算成 matrix3d 透视矩阵。
 */
.device-screen-section { padding-block: 4rem; }
.device-screen-section .ds-frame {
  position: relative;
  border-radius: 25px;
  overflow: hidden;
  background: linear-gradient(135deg, #1b1e26 0%, #0c0d10 100%);
  max-width: min(1520px, 100%);
  margin-inline: auto;
}
[data-theme="light"] .device-screen-section .ds-frame { background: linear-gradient(135deg, #eef0f4 0%, #dfe2e8 100%); }
.ds-stage { position: relative; }
.ds-media {
  position: absolute;
  left: 0; top: 0;
  z-index: 0;               /* 下层：媒体被样机图遮挡边缘 */
  overflow: hidden;
  will-change: transform;
  pointer-events: none;
}
.ds-media-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.ds-device {
  position: relative;
  z-index: 1;               /* 上层：样机图（含手）盖住媒体边缘 */
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.ds-caption {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(24px, 5vh, 56px);
  transform: translateX(-50%);
  text-align: center;
  padding: 0 24px;
  max-width: 80%;
}
.ds-heading {
  font-size: clamp(26px, 4.2vw, 52px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-black);
  margin: 0;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.ds-subheading {
  margin: 10px 0 0;
  font-size: clamp(13px, 1.6vw, 16px);
  color: var(--color-text-secondary);
}
@media (max-width: 767px) {
  .device-screen-section { padding-block: 2rem; }
  .ds-caption { max-width: 92%; bottom: 16px; }
}

/* ===== 字图填充 Banner（text-fill-banner）=====
   超大字母镂空填图（background-clip:text）贴上半屏，副标题大字，底部说明小字。
   版式比例反推自参考图像素测量：字母区 0~54vh 满宽切边、副标题顶 57vh、左距 3.8vw、底边距 5vh。
   填充图可选彩色/黑白（.tf-bw → grayscale）；卡片底色与文字色可用色板指定（默认白底近黑字）。
   字母尺寸由 render.js fit 算法内联 transform（scaleX/scaleY 非等比填满 + 背景反向补偿）。
   【外层版式】与大Banner（hero-banner）同款：组件一屏高、四周留 0.75rem 小边距，
   .tf-frame 圆角 25px overflow:hidden；【贴边对象】是字母/副标题贴 .tf-frame 内边
   （frame 顶/底由 fit 算法 translateY(-dLocal) 保证），不是让组件铺满 viewport。 */
/* 只放开 .container 的 1208/1520px 上限（随视口延展），保留 margin auto 与 section 自身边距；
   不能 padding:0/max-width:none 全铺——那会把外围四周边距改没 */
.container.text-fill-banner-section {
  max-width: 100%;
}
.text-fill-banner-section {
  height: 100vh;             /* 与大Banner一致：占满一屏 */
  display: flex;
  align-items: stretch;
  padding: 0.75rem;          /* 四周一致小边距（12px），frame 内嵌居中 */
  box-sizing: border-box;
}
.tf-frame {
  position: relative;
  flex: 1 1 auto;
  align-self: stretch;
  max-width: none;
  border-radius: 25px;
  overflow: hidden;
  background: #ffffff;
  color: #0a0a0a;
}
.tf-title-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 54vh;              /* 字母区 0~54% 屏高（参考图实测） */
  display: flex;
  justify-content: center;   /* 配合 transform-origin: top center，放大后左右对称切边 */
  align-items: flex-start;
  overflow: visible;
  z-index: 1;
}
.tf-title {
  margin: 0;
  display: inline-block;
  font-family: 'Limelight', sans-serif;
  font-weight: 400;
  font-size: 200px;          /* 基准字号，实际由 JS scale 拉伸填满 */
  line-height: 0.9;          /* ≈ cap height + descent，box 高 = 墨迹高 */
  letter-spacing: -0.045em;
  white-space: nowrap;
  text-transform: uppercase;
  user-select: none;
  transform-origin: top center;
  color: #0a0a0a;            /* 无填充图时退化为纯色大字 */
}
.tf-has-img .tf-title {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;  /* JS fit 后用反向补偿的百分比覆盖 */
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* 黑白模式：给镂空文字整体去饱和（文字本身 transparent，滤镜只作用于透出的图） */
.tf-bw .tf-title {
  filter: grayscale(1);
}
.tf-font-limelight { font-family: 'Limelight', sans-serif; }
.tf-font-anton     { font-family: 'Anton', sans-serif; }
.tf-font-archivo   { font-family: 'Archivo Black', sans-serif; }
.tf-font-bebas     { font-family: 'Bebas Neue', sans-serif; }
.tf-font-inter     { font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 900; }
.tf-subline {
  position: absolute;
  top: 57vh;                 /* 副标题顶部；47vh 会压住字母底部（参考图原版式），57vh 完全错开在字母区之下 */
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 3.8vw 5vh;      /* 左距 3.8% 屏宽、底边距 5% 屏高（参考图实测） */
  display: flex;
  flex-direction: column;
  z-index: 2;                /* 在字母之上，副标题切字底 */
  pointer-events: none;      /* 文字层不挡下方交互（按钮除外，本组件无按钮） */
}
.tf-heading {
  margin: 0;
  font-family: inherit;
  font-weight: 800;
  font-size: 11vh;           /* 单行带 ≈10.5% 屏高（参考图实测），JS 可用 subtitleSize 覆盖 */
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.tf-bottom-row {
  margin-top: auto;          /* 贴底 */
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.tf-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  max-width: 42%;
  opacity: 0.85;
}
@media (max-width: 767px) {
  .text-fill-banner-section { padding: 0.75rem 1rem; }   /* 与大Banner移动端一致：保留四周小边距，不贴 viewport */
  .tf-heading { font-size: 6.5vh !important; }
  .tf-subline { padding: 0 5vw 4vh; }
  .tf-desc { max-width: 100%; font-size: 12px; }
}

.pd-accent-blue   { color: var(--pd-accent-blue); }
.pd-accent-orange { color: var(--pd-accent-orange); }
.pd-accent-red    { color: var(--pd-accent-red); }
.pd-accent-green  { color: var(--pd-accent-green); }