/* ========== 字体 ========== */
@font-face {
  font-family: "CinaGeo";
  src: url("../fonts/cina/CINA GEO REGULAR.OTF") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "CinaGeo";
  src: url("../fonts/cina/CINA GEO MEDIUM.OTF") format("opentype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "CinaGeo";
  src: url("../fonts/cina/CINA GEO BOLD.OTF") format("opentype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "CinaGeo";
  src: url("../fonts/cina/CINA GEO LIGHT.OTF") format("opentype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "ShinGoSC";
  src: url("../fonts/cn/MO-UDShinGoSCGb4-Reg.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "ShinGoSC";
  src: url("../fonts/cn/MO-UDShinGoSCGb4-Med.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "ShinGoSC";
  src: url("../fonts/cn/MO-UDShinGoSCGb4-Bol.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  background: #000;
  color:#CFD9E0;
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  overflow-x: hidden;
  cursor: url("../img/SVG/cursor.svg") 0 0, auto;
}

/* ========== 通用区块 ========== */
.section {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

/* ========== 背景网格（两屏共用） ========== */
.grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 120px 120px;
  pointer-events: none;
}
.grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.25) 1px, transparent 1.5px);
  background-size: 280px 280px;
  background-position: 140px 140px;
  opacity: .35;
}

/* ========== 首次加载动画 ========== */
.loader {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .6s ease, visibility .6s ease;
}
.loader video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* 加载期间锁住滚动 */
body.is-loading {
  overflow: hidden;
}


/* ============================================================
   section-beyond.css
   ============================================================ */
/* ========== 新增屏：Beyond the Graduations — 米白底中心文案 ========== */
#beyond {
  background: #ececec;
  color: #1a1a1a;
  overflow: hidden;
  position: relative;
  z-index: 10;
  isolation: isolate;
}

/* 全屏背景图（bg-2.webp 自带 + 装饰和角落标签） */
.beyond-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.beyond-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 居中文案 */
.beyond-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6vw;
  pointer-events: none;
}

/* 顶部短标题（中文） */
.beyond-top-cn {
  margin: 0 0 clamp(20px, 3vh, 36px) 0;
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 6px;
  color: #0a0a0a;
  overflow: hidden;
}
.beyond-top-cn > span {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}

.beyond-en {
  margin: 0;
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 48px !important;
  line-height: 1.18;
  letter-spacing: 0.5px;
  color: rgba(0,0,0,0.22); 
}
.beyond-en .line {
  display: block;
  overflow: hidden;
}
.beyond-en .line > span {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}

.beyond-cn {
  margin: clamp(24px, 3vh, 40px) 0 0 0;
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 36px !important;
  line-height: 1.35;
  letter-spacing: 4px;
  color: #0a0a0a;
}
.beyond-cn > span:not(.line) {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}
.beyond-cn .line {
  display: block;
  overflow: hidden;
}
.beyond-cn .line > span {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}

@media (max-width: 768px) {

  #beyond {
   height: 40vh;
  }

  .beyond-en {
    font-size: 32px;
  }
  .beyond-cn {
    font-size: 22px !important;
    letter-spacing: 2px;
  }
}


/* ============================================================
   section-certificate.css
   ============================================================ */
/* ============================================================
   calibration 页第三屏：质检视频与品检报告
   - 左：证书堆叠（自动扇形偏移；hover 提层；点击 3D 居中放大）
   - 右：大图
   - 底部：双语说明
   ============================================================ */
#certificate {
  background: #ececec;
  color: #1a1a1a;
  position: relative;
  height: auto;
  min-height: 100vh;
  overflow: hidden;
  width: 100vw;
}

#certificate .grid-bg {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 1;
  pointer-events: none;
}

.cert-wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 40fr 60fr;
  gap: 4vw;
  align-items: center;
  padding: 9vh 6vw 3vh;
}

/* ---------- 左：证书堆叠 ---------- */
.cert-left {
    position: relative;
    text-align: center;
    margin: 0 auto;
}

.cert-stack {
  position: relative;
  width: 100%;
  height: clamp(360px, 40vw, 600px);
  perspective: 1600px;
}
.cert-card {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(170px, 16vw, 240px);
  aspect-ratio: 247 / 350;          /* 近似 A4 竖版 */
  object-fit: cover;
  background: #fff;

  box-shadow:
    0 18px 42px rgba(0,0,0,0.16),
    0 4px 12px rgba(0,0,0,0.08);
  cursor: pointer;
  transform-origin: center center;
  will-change: transform;
  transition: box-shadow .3s ease;
  backface-visibility: hidden;
}
.cert-card:hover {
  box-shadow:
    0 26px 60px rgba(0,0,0,0.22),
    0 8px 18px rgba(0,0,0,0.12);
}

/* 说明文字（堆叠下方） */
.cert-caption {
  margin-top: clamp(20px, 3vh, 36px);
  padding-left: 6%;
}
.cert-caption-en {
  margin: 0;
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 19px;
  color: rgba(0,0,0,0.28);
  letter-spacing: 0.3px;
}
.cert-caption-cn {
  margin: 6px 0 0 0;
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 22px;
  color: #0a0a0a;
  letter-spacing: 1.5px;
}

/* ---------- 右：大图 ---------- */
.cert-feature {
  position: relative;
  width: 100%;
  aspect-ratio: 19 / 11;
  border-radius: 16px;
  overflow: hidden;
  background: #d9d9d9;
  box-shadow:
    0 18px 44px rgba(0,0,0,0.12),
    0 3px 8px rgba(0,0,0,0.05);
}
.cert-feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cert-feature video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
/* 居中播放按钮（磨砂白圆钮，与站点风格一致） */
.cert-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: clamp(64px, 6vw, 88px);
  height: clamp(64px, 6vw, 88px);
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #1a1a1a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  transition: transform .25s cubic-bezier(.7,0,.2,1), background .2s ease, opacity .3s ease, visibility .3s ease;
}
.cert-play:hover {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.08);
}
.cert-play svg {
  width: 38%;
  height: 38%;
  margin-left: 4px;   /* 三角形视觉居中 */
}
/* 播放中隐藏大播放键，交给原生控制条 */
.cert-feature.is-playing .cert-play {
  opacity: 0;
  visibility: hidden;
}

/* ---------- 底部双语说明 ---------- */
.cert-desc {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3vw;
  padding: 0 6vw 8vh;
  margin-left: 40%;                 /* 对齐到右侧大图下方 */
}
.cert-desc-cn {
  margin: 0;
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.7;
  color: #1a1a1a;
}
.cert-desc-en {
  margin: 0;
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(0,0,0,0.32);
}

/* ---------- 遮罩 + 切换箭头（打开态） ---------- */
.cert-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,20,20,0.55);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
  z-index: 1100;
}
.cert-overlay.is-show { opacity: 1; visibility: visible; }

.cert-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1300;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: #1a1a1a;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease, background .2s ease, transform .2s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}
.cert-arrow.is-show { opacity: 1; visibility: visible; }
.cert-arrow:hover { background: #fff; }
.cert-arrow--prev { left: 4vw; }
.cert-arrow--next { right: 4vw; }
.cert-arrow--prev:hover { transform: translateY(-50%) translateX(-3px); }
.cert-arrow--next:hover { transform: translateY(-50%) translateX(3px); }

@media (max-width: 1024px) {
  .cert-wrap { grid-template-columns: 1fr; gap: 5vh; }
  .cert-stack { height: clamp(340px, 70vw, 460px); }
  .cert-desc { margin-left: 0; grid-template-columns: 1fr; gap: 3vh; }
}


/* ============================================================
   section-color.css
   ============================================================ */
/* ========== 第三屏：色彩管理系统 ========== */
#color {
  background: #000;
  overflow: hidden;
}
.color-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 40fr 60fr;
  align-items: start;
  padding: 12vh 6vw 14vh 8vw;
  gap: 4vw;
  z-index: 2;
}
/* 左侧文字区 */
.color-left { position: relative; }
.color-eyebrow {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,1);
  line-height: 1.5;
  margin-bottom: 7vh;
  opacity: 0;
  transform: translateY(18px);
}
.color-title {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 72px;
  letter-spacing: .3px;
  line-height: 1.18;
  color: #CFD9E0;
  margin-bottom: 22px;
}
.color-title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.color-title .word > span {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}
.color-sub {
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 30px;

  color: rgba(255,255,255,0.55);
  opacity: 0;
  transform: translateY(14px);
}

/* 中间竖线 + 数字（停在图片左侧外，不盖图） */
.color-axis {
  position: absolute;
  top: 12vh;
  /* 高度由 JS 同步到图片高度 */
  height: 0;
  /* 终点：grid 中的左右间隙处，紧贴图片左边外侧 */
  left: 43%;
  width: 60px;
  z-index: 3;
  pointer-events: none;
}
.color-axis .axis-line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  width: 1px;
  height: 100%;
  background: rgba(255,255,255,0.32);
  will-change: transform;
}
.color-axis .axis-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  text-align: center;
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.75);
  opacity: 0;
  overflow: hidden;
}
.color-axis .axis-num .num-roll {
  display: inline-block;
  will-change: transform;
}

/* 右侧图片 */
.color-right {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: 0;
  isolation: isolate;
}
.color-right .img-mask {
  position: absolute;
  inset: 0;
  background: #0d0d0d;
  transform-origin: left center;
  transform: scaleX(1);
  will-change: transform;
  z-index: 2;
}
.color-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.18);
  will-change: transform;
}

/* 设备列表：与图片同位置，初始隐藏；阶段二淡入替换图片 */
.color-equip {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 5vh;
  padding: 0 0 0 4vw;
  pointer-events: none;
  opacity: 0;
  will-change: opacity, transform;
}
.color-right .color-equip {
  /* 让 equip 与 color-right 共享同一格子 */
}
.color-wrap {
  position: relative;
}
.color-wrap > .color-equip {
    position: absolute;
    left: calc(8vw + (100% - 8vw - 6vw) * 0.4 + 4vw);
    right: 6vw;
    bottom: 14vh;
    display: flex;
    flex-direction: column;
    gap: 3vh;
    align-items: flex-start;
    justify-content: center;
}
.color-equip-lead {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-size: 19px;
  line-height: 1.55;
  color:#CFD9E0;
  margin: 0;
  max-width: 36em;
}
.color-equip-list {
  display: flex;
  flex-direction: column;
  gap: 4vh;
}
.color-equip-item {
  position: relative;
  padding-left: 0;
}
.color-equip-en {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: #CFD9E0;
  letter-spacing: 0.3px;
}
.color-equip-cn {
  margin-top: 6px;
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-size: 16px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 1.5px;
}

/* 底部细标尺：与第一屏画廊相同的胶片标尺，滚动时横向移动（第三/四屏共用） */
#color .ruler-bottom,
#equip .ruler-bottom {
  height: 70px;
  bottom: 24px;
  z-index: 5;
}
#color .ruler-ticks,
#equip .ruler-ticks {
  top: 26px;
  height: 22px;
  gap: 42px;
}
#color .ruler-ticks .tick,
#equip .ruler-ticks .tick {
  width: 1px;
  background: rgba(255,255,255,0.4);
}
#color .ruler-ticks .tick.short,
#equip .ruler-ticks .tick.short { height: 10px; }
#color .ruler-ticks .tick.long,
#equip .ruler-ticks .tick.long  { height: 22px; }
#color .ruler-marks,
#equip .ruler-marks {
  top: 4px;
  gap: calc(42px * 4 - 14px);
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

@media (max-width: 768px) {
  .color-wrap {
    display: flex;
    flex-direction: column;
    padding: 12vh 6vw 8vh;
    gap: 4vh;
    align-items: stretch;
  }
  /* 防止子项（横向滑动列表/长标题）撑破宽度导致溢出 */
  .color-wrap > * { min-width: 0; }
  .color-axis { display: none; }

  /* 移动端：所有元素静态可见（覆盖 JS/桌面初始隐藏态） */
  .color-eyebrow {
    opacity: 1;
    transform: none;
    margin-bottom: 2vh;
  }
  .color-sub { opacity: 1; transform: none; }
  .color-title { margin-bottom: 16px; }
  .color-title .word > span { transform: none; }

  /* 图片：完整原比例显示（不再被网格拉伸压扁） */
  .color-right {
    aspect-ratio: auto;
    height: auto;
    align-self: start;
  }
  .color-right .img-mask { display: none; }
  .color-right img {
    height: auto;
    object-fit: contain;
    transform: none;
  }

  /* 设备列表：横向滑动，一段一段查看 */
  .color-wrap > .color-equip,
  .color-equip {
    position: static;
    inset: auto;
    opacity: 1;
    padding: 0;
    gap: 2.4vh;
  }
  .color-equip-lead { opacity: 1; transform: none; }
  .color-equip-list {
    display: flex;
    flex-direction: row;
    gap: 4vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1.5vh;
  }
  .color-equip-list::-webkit-scrollbar { display: none; }
  .color-equip-item {
    flex: 0 0 78%;
    scroll-snap-align: start;
    opacity: 1;
    transform: none;
    padding: 3vh 5vw;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
  }
}

/* ============================================================
   第三屏：色彩管理系统 - 手机端设备列表纵向排列修复
   ============================================================ */
@media (max-width: 768px) {
  #color .color-wrap {
    display: flex;
    flex-direction: column;
    padding: 2vh;
    gap: 4vh;
    align-items: stretch;
  }

  #color .color-wrap > * {
    min-width: 0;
  }

  #color .color-axis {
    display: none;
  }

  #color .color-eyebrow {
    opacity: 1 !important;
    transform: none !important;
    margin-bottom: 2vh;
  }

  #color .color-sub {
    opacity: 1 !important;
    transform: none !important;
  }

  #color .color-title {
    margin-bottom: 16px;
    font-size: 42px;
    line-height: 1.15;
  }

  #color .color-title .word > span {
    transform: none !important;
  }

  #color .color-right {
    aspect-ratio: auto;
    height: auto;
    align-self: start;
  }

  #color .color-right .img-mask {
    display: none;
  }

  #color .color-right img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transform: none !important;
  }

  /* 设备列表：手机端直接纵向往下排列，不横向滑动 */
  #color .color-wrap > .color-equip,
  #color .color-equip {
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    padding: 0 !important;
    gap: 2.4vh;
    pointer-events: auto;
  }

  #color .color-equip-lead {
    opacity: 1 !important;
    transform: none !important;
    font-size: 15px;
    line-height: 1.65;
  }

  #color .color-equip-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100%;
    overflow: visible !important;
    scroll-snap-type: none !important;
    padding-bottom: 0 !important;
  }

  #color .color-equip-item {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    scroll-snap-align: none !important;
    opacity: 1 !important;
    transform: none !important;


  }

  #color .color-equip-en {
    font-size: 20px;
    line-height: 1.35;
  }

  #color .color-equip-cn {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 8px;
  }

  #color .ruler-bottom {
    display: none;
  }
}
/* ============================================================
   section-contact.css
   ============================================================ */
/* ========== 联系我们 ========== */
#contact {
  background: #ececec;
  color: #1a1a1a;
  overflow: hidden;
  position: relative;
  width: 100vw;
  height: 100vh;
  isolation: isolate;
}

.contact-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0 8vw;
  gap: 6vw;
  z-index: 2;
}

/* ---------- 左：文案 ---------- */
.contact-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-end;
  text-align: right;
}
.contact-en {
  margin: 0;
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 50px;
  line-height: 1.25;
  letter-spacing: 0.3px;
  color: rgba(0,0,0,0.25);
}
.contact-en .line {
  display: block;
  overflow: hidden;
}
.contact-en .line > span {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}
.contact-cn {
  margin: 0;
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 28px;
  letter-spacing: 4px;
  color: #0a0a0a;
  overflow: hidden;
}
.contact-cn > span {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}

/* ---------- 右：2x2 二维码网格 ---------- */
.contact-qrs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  position: relative;
  opacity: 0;
  will-change: opacity, transform;
}

/* 十字分隔线 */
.contact-qrs::before,
.contact-qrs::after {
  content: "";
  position: absolute;
  background: rgba(0,0,0,0.3);
  pointer-events: none;
}
/* 垂直线 */
.contact-qrs::before {
  top: 6%;
  bottom: 6%;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
}
/* 水平线 */
.contact-qrs::after {
  left: 6%;
  right: 6%;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
}

.contact-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2vw, 28px);
  gap: 14px;
}
.contact-qr-img {
  width: 70%;
  aspect-ratio: 1 / 1;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-qr-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.contact-qr-label {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.35;
  color: #0a0a0a;
  text-align: center;
  letter-spacing: 0.2px;
}

@media (max-width: 768px) {
  .contact-wrap {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    padding: 10vh 6vw 6vh;
    gap: 5vh;
    align-items: start;
  }
  .contact-text {
    align-items: center;
    text-align: center;
    gap: 16px;
  }
  .contact-en { font-size: 32px; }
  .contact-cn { font-size: 22px; letter-spacing: 2px; }
  .contact-qrs {
    max-width: 100%;
    margin: 0 auto;
  }
  .contact-qr-label {
    font-size: 14px;
  }
}


/* ============================================================
   section-converge.css
   ============================================================ */
/* ========== 第七屏：标尺汇聚 ========== */
#converge {
  background: #000;
  position: relative;
  overflow: hidden;
}

/* 网格背景：与第二屏一致，上明显下渐隐 */
#converge .grid-bg {
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.85) 25%,
    rgba(0,0,0,0.4) 60%,
    rgba(0,0,0,0) 95%);
          mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.85) 25%,
    rgba(0,0,0,0.4) 60%,
    rgba(0,0,0,0) 95%);
  background-image:
    linear-gradient(rgba(255,255,255,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.09) 1px, transparent 1px);
}
#converge .grid-bg::before {
  background-image: radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1.5px);
  opacity: .55;
}

.converge-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* 标尺图片：居中等比缩放 */
.converge-ruler {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: clip-path;
  clip-path: circle(0% at 50% 50%);
  -webkit-clip-path: circle(0% at 50% 50%);
}

.converge-ruler .ruler-svg {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* 标题（左侧、垂直居中） */
.converge-title {
  position: absolute;
  top: 50%;
  left: 7vw;
  transform: translateY(-50%);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}

.converge-title-en {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 56px;
  line-height: 1.15;
  color:#CFD9E0;
  letter-spacing: 0.5px;
  margin: 0;
}

.converge-title-cn {
  margin-top: 22px;
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 4px;
}

@media (max-width: 768px) {
  .converge-title-en { font-size: 40px; }
  .converge-title-cn { letter-spacing: 2px; }
}


/* ============================================================
   section-diagnosis.css
   ============================================================ */
/* ========== 文件诊断与印后品检 — 设计稿 1:1 还原 ========== */
#diagnosis {
  background: #ececec;
  color: #1a1a1a;
  position: relative;
  height: auto;
  min-height: 100vh;
  overflow: visible;
  width: 100vw;
}

#diagnosis .grid-bg {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 1;
  pointer-events: none;
}
#diagnosis .grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0,0,0,0.18) 1.2px, transparent 1.5px);
  background-size: 60px 60px;
  background-position: 30px 30px;
  opacity: 0.45;
}

.diagnosis-wrap {
  position: relative;
  width: 100%;
  padding: 6vh 6vw 8vh;
  z-index: 2;
}

/* 顶部：标题 */
.diagnosis-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6vh;
}
.diagnosis-title {
  margin: 0;
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 44px;
  line-height: 1.18;
  letter-spacing: 0.5px;
  color: #0a0a0a;
}
.diagnosis-sub {
  margin: 0;
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 2px;
  color: rgba(0,0,0,0.2);
}

/* 网格：4 列 × 3 行 */
.diagnosis-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    --dgap: clamp(20px, 2.5vw, 40px);
    gap: 8vh var(--dgap);
    width: 100%;
    padding: 0 30px;
}
/* 每个项 */
.diag-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  --seg: 200px;   /* 刻度尺 / 序号 的对齐宽度 = 图片宽度 */
}

/* ===== 顶部胶片刻度尺（每项一段） ===== */
/* 长刻度（每段两端） */
.diag-item::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  width: min(100%, var(--seg));
  height: 12px;
  background-image:
    /* 主水平线 1px */
    linear-gradient(to right, rgba(0,0,0,0.4) 100%, transparent 100%),
    /* 小刻度：每 12px 一根 1px×6px */
    linear-gradient(to right, rgba(0,0,0,0.4) 1px, transparent 1px);
  background-position:
    0 11px,
    0 0;
  background-size:
    100% 1px,
    12px 6px;
  background-repeat: no-repeat, repeat-x;
}

/* 序号 — 在刻度尺上方居中（对齐图片中心） */
.diag-num {
  position: absolute;
  top: -32px;
  left: calc(min(100%, var(--seg)) / 2);
  transform: translateX(-50%);
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(0,0,0,0.55);
}

/* 图片 — 缩小尺寸：用 max-width 控制，1:1 比例 */
.diag-img {
  width: 100%;
  max-width: var(--seg);
  aspect-ratio: 1 / 1;
  background: #d9d9d9;
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 4px 14px rgba(0,0,0,0.06),
    0 1px 3px rgba(0,0,0,0.04);
}
.diag-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 文案 */
.diag-en {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  color: #0a0a0a;
  margin-top: 2px;
}
.diag-cn {
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-size: 13px;
  color: rgba(0,0,0,0.4);
  letter-spacing: 1px;
}

/* ===== 蛇形连接线：把三行的水平刻度线用竖线串成一条连续测量线（由 JS 定位显示） ===== */
.diag-snake {
  position: absolute;
  width: 1px;
  background: rgba(0,0,0,0.4);
  display: none;
  z-index: 1;
  pointer-events: none;
}
/* 桌面：水平刻度线连续贯穿整行（跨过图片之间的列间距） */
@media (min-width: 1025px) {
  .diag-item::before { width: 100%; }
  .diag-item:not(:nth-child(4n))::before { width: calc(100% + var(--dgap)); }
}

@media (max-width: 1024px) {
  .diagnosis-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 7vh clamp(16px, 3vw, 30px);
  }
  .diag-item { --seg: 240px; }
}
@media (max-width: 600px) {
  .diagnosis-grid {
    grid-template-columns: 1fr;
    gap: 6vh 0;
  }
  .diag-item { --seg: 280px; }
  .diag-img { margin: 0 auto; }
  /* 单列时整体居中：刻度尺与序号都对齐到项中心 */
  .diag-item::before { left: 50%; transform: translateX(-50%); }
  .diag-num { left: 50%; }
  .diagnosis-title {
    font-size: 32px;
  }
}


/* ============================================================
   section-epson.css
   ============================================================ */
/* ========== 第五屏：爱普生官方认证 ========== */
#epson {
  background: #000;
  overflow: hidden;
  position: relative;
}
.epson-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.epson-bg img,
.epson-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.15);
  will-change: transform;
}
.epson-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.65) 0%,
    rgba(0,0,0,0.3) 30%,
    rgba(0,0,0,0.15) 60%,
    rgba(0,0,0,0.55) 100%
  );
  pointer-events: none;
}

/* 左上：延续的竖线 + 数字（数字在上、线在下，不重叠） */
.epson-axis {
  position: absolute;
  top: 6vh;
  bottom: 8vh;
  left: 6%;
  width: max-content;
  z-index: 5;
  pointer-events: none;
}
.epson-axis .axis-num {
  display: block;
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.85);
  line-height: 1;
  margin-bottom: 24px;
  white-space: nowrap;
  opacity: 0;
}
.epson-axis .axis-line {
  display: block;
  width: 1px;
  /* 高度 = 容器剩余空间，由 flex 撑满 */
  flex: 1 1 auto;
  background: rgba(255,255,255,0.55);
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
  margin-left: 0;
}
.epson-axis {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 右下：标题块 */
.epson-text {
  position: absolute;
  right: 6%;
  bottom: 18vh;
  z-index: 5;
  text-align: right;
  max-width: 60%;
}
.epson-en1,
.epson-en2 {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  line-height: 1.1;
  color:#CFD9E0;
}
.epson-en1 {
  font-weight: 500;
  font-size: 44px;
  margin-bottom: 4px;
}
.epson-en2 {
  font-weight: 400;
  font-size: 36px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0;
}
.epson-en2 + .epson-en2 {
  margin-top: 2px;
}
.epson-text > .epson-en2:last-of-type {
  margin-bottom: 0;
}
.epson-cn {
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-size: 30px;
  line-height: 1.4;
  color: rgba(255,255,255,0.55);
  letter-spacing: 6px;
}
.epson-text > .epson-cn:first-of-type {
  margin-top: 40px;
}
.epson-cn .hl {
  color:#CFD9E0;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.epson-text .line { overflow: hidden; }
.epson-text .line > span {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}

@media (max-width: 768px) {
  #epson{
    height: 30vh;
  }
  .epson-text {
    right: 6%;
    left: 6%;
    bottom: 12vh;
    max-width: none;
  }
  .epson-axis { left: 5%; }
}


/* ============================================================
   section-equip.css
   ============================================================ */
/* ========== 第四屏：设备列表 ========== */
#equip {
  background: #000;
  overflow: hidden;
}
.equip-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 40fr 60fr;
  align-items: center;
  padding: 0 6vw 0 8vw;
  gap: 4vw;
  z-index: 2;
}
/* 左侧：与第三屏一致的标题区 */
.equip-left { position: relative; }
.equip-eyebrow {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  margin-bottom: 10vh;
  opacity: 0;
  transform: translateY(18px);
}
.equip-title {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 72px;
  letter-spacing: .3px;
  line-height: 1.18;
  color: #CFD9E0;
  margin-bottom: 22px;
}
.equip-title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.equip-title .word > span {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}
.equip-sub {
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 6px;
  color: rgba(255,255,255,0.55);
  opacity: 0;
  transform: translateY(14px);
}
/* 右侧：描述 + 设备列表 */
.equip-right {
  position: relative;
  padding-right: 6vw;
}
.equip-lead {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  max-width: 520px;
  margin-bottom: 8vh;
  opacity: 0;
  transform: translateY(18px);
}
.equip-list {
  display: flex;
  flex-direction: column;
  gap: 5vh;
}
.equip-item {
  opacity: 0;
  transform: translateY(20px);
}
.equip-item .equip-en {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.25;
  color: #CFD9E0;
  margin-bottom: 8px;
}
.equip-item .equip-cn {
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-size: 16px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 1.5px;
}
/* 最右侧延续的竖线 + 数字（绘制动画与第三屏一致） */
.equip-axis {
  position: absolute;
  top: 6vh;
  bottom: 14vh;
  right: 4%;
  width: 60px;
  z-index: 3;
  pointer-events: none;
}
.equip-axis .axis-line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  width: 1px;
  height: 100%;
  background: rgba(255,255,255,0.32);
  will-change: transform;
}
.equip-axis .axis-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  text-align: center;
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.75);
  opacity: 0;
  overflow: hidden;
}
@media (max-width: 768px) {
  .equip-wrap {
    grid-template-columns: 1fr;
    padding: 12vh 6vw 10vh;
    gap: 4vh;
  }
  .equip-axis { display: none; }
  .equip-eyebrow { margin-bottom: 3vh; }
  .equip-lead { margin-bottom: 4vh; }
}


/* ============================================================
   section-forge.css
   ============================================================ */
/* ========== 新增屏：Forge — 白色品牌图文 ========== */
#forge {
  background: #f4f3ef;
  color: #1a1a1a;
  overflow: hidden;
  position: relative;
  z-index: 10;
  isolation: isolate;
}
@media (max-width: 768px) {
  #forge {
   height: auto !important;   /* 只放整宽图，高度随图片自适应 */
  }
}
/* 全屏背景大图 */
.forge-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  will-change: opacity, transform;
}
.forge-img picture {
  display: block;
  width: 100%;
  height: 100%;
}
.forge-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 浅色背景下的网格弱化 */
#forge .grid-bg {
  opacity: 0.25;
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
  z-index: 2;
  pointer-events: none;
}
#forge .grid-bg::before {
  background-image: radial-gradient(rgba(0,0,0,0.18) 1px, transparent 1.5px);
  opacity: .35;
}

/* 文字浮层 */
.forge-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 14vh 5vw;
  z-index: 3;
  pointer-events: none;
}

.forge-text {
  max-width: 40vw;
}
.forge-title {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 48px !important;
  line-height: 1.22;
  letter-spacing: 0.2px;
  color: #1a1a1a;
  margin: 0;
}
.forge-title .line {
  display: block;
  overflow: hidden;
}
.forge-title .line > span {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}

@media (max-width: 768px) {
  .forge-wrap {
    padding: 12vh 6vw 0;
  }
  .forge-text {
    max-width: 90vw;
  }
  .forge-title {
    font-size: 28px;
  }
  /* 第一屏图片：长方形比例，置于文字下方，不再铺满整屏成长条 */
  /* 手机：整屏宽度大图，在文档流内，高度随图片原始比例自适应 */
  .forge-img {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    border-radius: 0;
    overflow: hidden;
  }
  .forge-img picture,
  .forge-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }
}


/* ============================================================
   section-gallery.css
   ============================================================ */
/* ========== 第一屏：3D 画廊 ========== */
#gallery {
  background: #000;
  overflow: hidden;
  isolation: isolate;
  contain: paint;
}

/* 镜头标尺 —— 类似胶片刻度，向右轻微收窄 */
.ruler {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100px;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}
.ruler-top    { top: 0; }
.ruler-bottom { bottom: 0; transform: scaleY(-1); }

/* 标尺平面：很长，留出滚动余量 */
.ruler-plane {
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height: 100%;
  will-change: transform;
}

.ruler-ticks {
  position: absolute;
  top: 35px;
  left: 0;
  width: 100%;
  height: 30px;
  display: flex;
  gap: 58px;
}
.ruler-ticks .tick {
  flex: 0 0 auto;
  width: 2px;
  background: rgba(255,255,255,0.45);
}
.ruler-ticks .tick.short { height: 18px; }
.ruler-ticks .tick.long  { height: 30px; }

.ruler-marks {
  position: absolute;
  top: 4px;
  left: 0;
  width: 100%;
  height: 24px;
  display: flex;
  gap: calc(58px * 4 - 14px);
  padding-left: 10px;
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 1px;
}
.ruler-bottom .ruler-marks { transform: scaleY(-1); }

/* 取景框十字定位点 */
.crosshair {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(255,255,255,0.4);
  z-index: 4;
  pointer-events: none;
}
.crosshair.tl { top: 80px;  left: 80px; }
.crosshair.tr { top: 80px;  right: 80px; }
.crosshair.bl { bottom: 80px; left: 80px; }
.crosshair.br { bottom: 80px; right: 80px; }
.crosshair.cl { top: 50%; left: 14%; transform: translateY(-50%); }
.crosshair.cr { top: 50%; right: 14%; transform: translateY(-50%); }

/* 取景框边框 */
.viewfinder {
  position: absolute;
  top: 90px; bottom: 90px;
  left: 80px; right: 80px;
  border-left: 1px solid rgba(255,255,255,0.18);
  border-right: 1px solid rgba(255,255,255,0.18);
  pointer-events: none;
  z-index: 3;
}

/* 画廊舞台 */
.gallery-stage {
  position: absolute;
  top: 20vh;
  left: 0;
  width: 100%;
  height: 60vh;
  overflow: visible;
  perspective: 1200px;
  perspective-origin: 18% 50%;
}
.gallery-track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}
.gallery-track .card {
  position: absolute;
  top: 50%;
  left: 0;
  width: 28vw;
  height: 21vw;
  margin-top: -10.5vw;
  border-radius: 14px;
  overflow: visible;
  transform-origin: center center;
  transform-style: preserve-3d;
  will-change: transform, filter, opacity;
  cursor: pointer;
}
/* 滚动期间禁用 hover，避免误触 */
.is-scrolling .card { pointer-events: none; }
.card-inner {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  background: #111;
}
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 标题（点击放大时显示） */
.card-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: 120%;
  text-align: center;
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:#CFD9E0;
  text-shadow: 0 2px 24px rgba(0,0,0,0.7);
  pointer-events: none;
  z-index: 10;
  opacity: 0;
}
.card-title .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  will-change: transform, opacity;
}
.card-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.5));
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.card.is-active .card-inner::after { opacity: 1; }

/* VIEW DETAIL 按钮（点击放大态显示） */
.card-detail {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translate(-50%, 16px);
  padding: 14px 36px;
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 999px;
  color:#CFD9E0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  z-index: 11;
  transition: background .3s ease, transform .3s ease;
  white-space: nowrap;
}
.card.is-active .card-detail {
  pointer-events: auto;
}
.card-detail:hover {
  background: rgba(255,255,255,0.95);
  color: #111;
  border-color:#CFD9E0;
}

/* 点击放大时屏幕全黑遮罩 */
.gallery-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  opacity: 0;
  pointer-events: none;
  z-index: 9000;
  transition: opacity .5s ease;
}
.gallery-overlay.is-show {
  opacity: 1;
  pointer-events: auto;
}
/* 弹出层：脱离 gallery-stage 的层叠上下文 */
.gallery-popup-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9500;
  perspective: 1600px;
}
.gallery-popup-layer .card {
  pointer-events: auto;
}

/* more+ 按钮（圆形描边） */
.more-btn {
  position: absolute;
  right: 5vw;
  bottom: 14vh;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 1px;
  color:#CFD9E0;
  text-decoration: none;
  background: rgba(0,0,0,0.2);
  transition: background .3s ease, transform .3s ease, border-color .3s ease;
  z-index: 6;
  cursor: pointer;
}
.more-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color:#CFD9E0;
  transform: scale(1.05);
}
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-more {
  position: absolute;
  right: 6vw;
  bottom: 22vh;
  font-size: 18px;
  letter-spacing: 1px;
  color:#CFD9E0;
  opacity: .85;
  z-index: 5;
}
.gallery-hint {
  position: absolute;
  left: 50%;
  bottom: 110px;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.35);
  z-index: 5;
}

/* ========== 移动端 ========== */
@media (max-width: 768px) {
  .gallery-track .card {
    width: 60vw;
    height: 45vw;
    margin-top: -22.5vw;
  }
  .gallery-stage {
    perspective: 900px;
  }
  .more-btn {
    width: 86px;
    height: 86px;
    font-size: 14px;
    right: 6vw;
    bottom: 8vh;
  }
  .crosshair.tl, .crosshair.tr,
  .crosshair.bl, .crosshair.br { top: auto; }
  .crosshair.tl { top: 40px; left: 40px; }
  .crosshair.tr { top: 40px; right: 40px; }
  .crosshair.bl { bottom: 40px; left: 40px; }
  .crosshair.br { bottom: 40px; right: 40px; }
  .viewfinder { top: 60px; bottom: 60px; left: 40px; right: 40px; }
  /* 标尺刻度加密 */
  .ruler-ticks { gap: 26px; }
  .ruler-ticks .tick.short { height: 12px; }
  .ruler-ticks .tick.long  { height: 22px; }
  .ruler-marks { font-size: 11px; gap: calc(26px * 4 - 12px); }
  .card-detail {
    padding: 10px 24px;
    font-size: 12px;
    letter-spacing: 2px;
  }
}

/* ============================================================
   第一屏 3D 画廊：轻微透视 + 弹窗修复覆盖
   ============================================================ */

#gallery .gallery-stage {
  perspective: 1400px;
  perspective-origin: 28% 50%;
}

#gallery .gallery-track {
  transform-style: preserve-3d;
}

#gallery .gallery-track .card {
  overflow: visible;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

#gallery .gallery-track .card .card-inner {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.gallery-popup-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9500;
  perspective: 1600px;
}

.gallery-popup-layer .gallery-popup-card {
  position: fixed !important;
  margin: 0 !important;
  overflow: visible !important;
  pointer-events: auto;
  z-index: 9600 !important;
  transform-origin: center center !important;
}

.gallery-popup-layer .gallery-popup-card .card-inner {
  filter: blur(0px) brightness(1) !important;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.75);
}

.gallery-popup-layer .gallery-popup-card .card-title {
  opacity: 1;
}

.gallery-popup-layer .gallery-popup-card .card-detail {
  opacity: 0;
  pointer-events: auto;
}

html.gallery-popup-open,
body.gallery-popup-open {
  overflow: hidden;
}

/* ============================================================
   section-intro.css
   ============================================================ */
/* ========== 第二屏：文字逐字 ========== */
#intro {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56vh;          /* 纯文字屏，缩到约半屏，避免上浮间距过大 */
  min-height: 360px;
}
/* 第二屏：网格上明显，下淡出 */
#intro .grid-bg {
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.85) 25%,
    rgba(0,0,0,0.4) 60%,
    rgba(0,0,0,0) 95%);
          mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.85) 25%,
    rgba(0,0,0,0.4) 60%,
    rgba(0,0,0,0) 95%);
  background-image:
    linear-gradient(rgba(255,255,255,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.09) 1px, transparent 1px);
}
#intro .grid-bg::before {
  background-image: radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1.5px);
  opacity: .55;
}
.intro-wrap {
  position: relative;
  text-align: center;
  z-index: 2;
}
.intro-en {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 44px;
  letter-spacing: .5px;
  color: #d8d8d8;
  line-height: 1.15;
  margin-bottom: 18px;
}
.intro-cn {
  font-size: 36px !important;
  letter-spacing: 6px;
  color: #6e6e6e;
}
.char {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
}
.intro-cn .char { letter-spacing: 6px; }


/* ============================================================
   section-licenses.css
   ============================================================ */
/* ============================================================
   calibration 页第四屏：资质认证
   结构：一个 .lic-folder 里叠三层
     · folder-back  folder-3.svg  z1  最底后片
     · #licPaper    白纸(含证书)   z2  闭合=空白条 / 展开=右侧大白框
     · folder-front folder-1.svg  z3  前袋，抽出时盖住白纸落在文件夹里的一截
   白纸从「文件夹里的条」用绝对定位过渡到「右侧大框」，证书在其中。

   对齐/尺寸变量：
   ============================================================ */
#licenses {
  --lic-edge: clamp(28px, 5vw, 100px);        /* 文件夹距屏幕左边 */
  --lic-folder-w: clamp(230px, 27vw, 450px);  /* 文件夹宽度 */
  --folder-h: calc(var(--lic-folder-w) * 1.4242); /* 498.36:709.77 */
  --lic-pad-r: clamp(18px, 3vw, 56px);        /* 大框右外边距 */
  --open-w: calc(100vw - var(--lic-pad-r) - var(--lic-edge) - var(--lic-folder-w) / 2); /* 展开宽度 */

  background: #e9e9e9;
  color: #1a1a1a;
  position: relative;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* 浅色网格 */
#licenses .grid-bg {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 1;
  pointer-events: none;
}

.lic-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  height: clamp(560px, 84vh, 900px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 左侧让开文件夹，文案在剩余空间里居中 */
  padding: 0 var(--lic-edge) 0 calc(var(--lic-edge) + var(--lic-folder-w) + 3vw);
}

/* ---------- 文件夹容器（三层叠放的舞台） ---------- */
.lic-folder {
  position: absolute;
  left: var(--lic-edge);
  top: calc((100% - var(--folder-h)) / 2);
  width: var(--lic-folder-w);
  height: var(--folder-h);
  z-index: 4;
  cursor: pointer;
}
.lic-folder:focus-visible { outline: none; }

/* 后片（最底层） */
.folder-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
  filter: drop-shadow(0 30px 55px rgba(40,110,255,0.28));
  transition: transform .3s cubic-bezier(.7,0,.2,1);
}
/* 前袋（最上层，盖住白纸落在文件夹里的部分） */
.folder-front {
  position: absolute;
  left: 0;
  top: 0;
  width: 67.2%;                 /* 334.91 / 498.36 */
  height: 100%;
  z-index: 3;
  display: block;
  transition: transform .3s cubic-bezier(.7,0,.2,1);
}
/* 闭合态：悬停整叠轻微上浮 */
.lic-folder:hover .folder-back,
.lic-folder:hover .folder-front { transform: translateY(-8px); }
.lic-wrap.is-open .lic-folder:hover .folder-back,
.lic-wrap.is-open .lic-folder:hover .folder-front { transform: none; }

/* ---------- 白纸：条 ←→ 大框 ---------- */
/* ---------- 中间白纸（唯一的白色层）：闭合=文件夹里的白条，点击=向右揭开抽出 ----------
   保持文件夹高度、左缘固定在文件夹中心，只有右侧 clip 由窄变宽 → 纯横向抽出，尺寸不放大 */
.folder-paper {
  position: absolute;
  z-index: 2;
  left:   calc(var(--lic-folder-w) / 2.1);       /* 左缘 = 文件夹中心（左半藏在前袋后面） */
  width:  var(--open-w);
  top:    8%;                                   /* 上下内缩用定位实现，避免露缝且不裁到文字 */
  height: 84%;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  /* 只做横向裁剪：左缘固定，展开时只动右缘 → 纯从左侧向右抽出（上下不裁，标题不被切） */
  clip-path: inset(
    0
    calc(var(--open-w) - var(--lic-folder-w) * 0.30)
    0
    calc(var(--lic-folder-w) * 0.16)
    round 20px
  );
  transition: clip-path .6s cubic-bezier(.7,0,.2,1), border-radius .55s ease, box-shadow .55s ease;
}
/* 展开：左缘不动，只右缘展到全宽 */
.lic-wrap.is-open .folder-paper {
  clip-path: inset(0 0 0 calc(var(--lic-folder-w) * 0.16) round 18px);
  border-radius: 18px;
  box-shadow: 0 40px 90px rgba(0,0,0,0.16);
}

/* 证书网格：铺满白纸，闭合态隐藏，展开后延迟淡入
   弹性列 —— 图片等比缩放不放大/不裁切，标题固定在图下方永远可见 */
.lic-panel-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 2vw, 42px);
  padding: clamp(20px, 3vh, 42px) clamp(20px, 2.5vw, 46px);
  /* 左侧让开被前袋盖住的一截 */
  padding-left: calc(var(--lic-folder-w) * 0.24 + 2vw);
}

.lic-col {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 证书图：占据列内剩余空间，等比缩放（不超过原尺寸、不裁切） */
.lic-cert {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
}
.lic-cert img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 6px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
  transition: transform .25s ease, box-shadow .25s ease;
}
.lic-cert:hover img {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}
/* 中列两张堆叠 */
.lic-col--stack .lic-cert + .lic-cert { margin-top: clamp(8px, 1.2vh, 16px); }

/* 标题：固定高度，始终显示在图下方 */
.lic-cap {
  flex: 0 0 auto;
  margin-top: clamp(8px, 1.4vh, 16px);
  text-align: center;
}
.lic-cap-en {
  display: block;
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: rgba(0,0,0,0.3);
  letter-spacing: 0.3px;
}
.lic-cap-cn {
  display: block;
  margin-top: 5px;
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #0a0a0a;
  letter-spacing: 1px;
}

/* 关闭按钮（白纸右上角，展开后显示） */
.lic-close {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 4;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  color: #333;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: background .2s ease, transform .3s cubic-bezier(.7,0,.2,1), opacity .3s ease, visibility .3s ease;
}
.lic-close:hover { background: rgba(0,0,0,0.12); transform: rotate(90deg); }
.lic-wrap.is-open .lic-close {
  opacity: 1;
  visibility: visible;
  transition: background .2s ease, transform .3s ease, opacity .3s ease .3s, visibility .3s ease .3s;
}

/* ---------- 提示文字（文件夹下方，展开时隐藏） ---------- */
.lic-folder-hint {
  position: absolute;
  top: calc(100% + clamp(16px, 2.5vh, 30px));
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: rgba(0,0,0,0.42);
  letter-spacing: 1.5px;
  transition: opacity .3s ease;
}
.lic-wrap.is-open .lic-folder-hint { opacity: 0; }

/* ---------- 右：文案（居中于文件夹右侧空间） ---------- */
.lic-text {
  max-width: 82ch;
  margin: 0;

  transition: opacity .2s ease, visibility .2s ease;
}
.lic-wrap.is-open .lic-text { opacity: 0; visibility: hidden; }

.lic-en {
  margin: 0;
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.4;
  color: rgba(0,0,0,0.26);
}
.lic-cn {
  margin: clamp(22px, 3vh, 30px) 0 0;
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 29px;
  line-height: 1.65;
  color: #0a0a0a;
  letter-spacing: 1px;
}

@media (max-width: 549px) {

  .lic-en {
    margin: 0;
    font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    color: rgba(0,0,0,0.26);
  }
  .lic-cn {
    margin: clamp(22px, 3vh, 40px) 0 0;
    font-family: "ShinGoSC", "PingFang SC", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.65;
    color: #0a0a0a;
    letter-spacing: 1px;
  }
}
/* ---------- 证书放大 ---------- */
.lic-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12,12,12,0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
  z-index: 10050;
}
.lic-overlay.is-show { opacity: 1; visibility: visible; }
.lic-zoom-img {
  position: fixed;
  z-index: 10060;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  cursor: zoom-out;
  margin: 0;
}

/* ---------- 移动端 ---------- */
@media (max-width: 1024px) {
  #licenses { --lic-edge: 0px; --lic-folder-w: clamp(140px, 40vw, 210px); }
  .lic-wrap {

    display: block;
    padding: 8vh 6vw;
    text-align: center;
  }
  .lic-folder {
    position: relative;
    left: auto;
    top: auto;
    z-index: auto;
    margin: 0 auto;
  }
  .lic-text { margin: 6vh 0 0; max-width: none; }
  /* 移动端：闭合显示白条，点击直接弹全屏窗 */
  /* 展开时把整个 wrap 提到最高层（越过 WhatsApp z9000 等），并隐藏文件夹本体 */
  .lic-wrap.is-open { z-index: 10000; }
  .lic-wrap.is-open .folder-back,
  .lic-wrap.is-open .folder-front,
  .lic-wrap.is-open .lic-folder-hint { display: none; }
  .lic-wrap.is-open .folder-paper {
    display: block;
    position: fixed;
    left: 12px;
    right: 12px;
    top: 12px;
    bottom: 12px;
    width: auto;
    height: auto;
    border-radius: 16px;
    clip-path: none;
    z-index: 10001;
    box-shadow: 0 30px 80px rgba(0,0,0,0.3);
  }
  /* 证书 1 行 2 个 */
  .lic-panel-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    align-items: start;
    gap: 16px;
    padding: 52px 14px 16px;
    overflow-y: auto;
  }
  .lic-col { flex: 0 0 auto; }
  .lic-cert { flex: 0 0 auto; }
  .lic-cert img { max-height: 38vh; }
  .lic-col--stack .lic-cert + .lic-cert { margin-top: 12px; }
}


/* ============================================================
   section-nav.css
   ============================================================ */
/* ============================================================
   左侧折叠固定导航
   - 收起：竖向标尺（参考图1）
   - 展开：菜单 + 高斯模糊背板（参考图2）
   ============================================================ */
.sidenav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 9000;
  display: flex;
  align-items: center;
  padding: 14px;
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
}

/* ---------- 背板：磨砂玻璃 + 圆角 ---------- */
.sidenav-panel {
  position: relative;
  height: calc(100vh - 28px);
  width: 46px;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(236, 236, 236, 0.42);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: width .55s cubic-bezier(.7, 0, .2, 1);
  will-change: width;
}
.sidenav.is-open .sidenav-panel {
  width: clamp(280px, 23vw, 348px);
}

/* ---------- 收起态：竖向标尺 ---------- */
.sidenav-ruler {
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding: 30px 13px;
  opacity: 1;
  transition: opacity .3s ease;
}
.sidenav.is-open .sidenav-ruler {
  opacity: 0;
}
.sidenav-ruler .vtick {
  height: 1px;
  background: rgba(20, 20, 20, 0.32);
}
.sidenav-ruler .vtick.short { width: 9px; }
.sidenav-ruler .vtick.long  { width: 20px; background: rgba(20, 20, 20, 0.5); }

/* ---------- 展开态：菜单 ---------- */
.sidenav-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(280px, 23vw, 348px);
  height: 100%;
  padding: 7vh 26px 7vh 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity .4s ease .12s, transform .5s cubic-bezier(.7, 0, .2, 1) .12s;
}
.sidenav.is-open .sidenav-menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.nav-group {
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: start;
  column-gap: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(20, 20, 20, 0.14);
}

.nav-eyebrow {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.4px;
  color: rgba(20, 20, 20, 0.5);
  white-space: nowrap;
}

.nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vh, 18px);
}
.nav-links a {
  display: inline-block;
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 1px;
  color: #1a1a1a;
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s ease, transform .25s ease;
}
.nav-links a:hover {
  color: #000;
  transform: translateX(4px);
}

/* ---------- 底部 logo ---------- */
.sidenav-foot {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
}
.sidenav-foot img {
  height: 26px;
  width: auto;
  display: block;
}

/* ---------- 收起态汉堡（仅移动端圆形按钮内显示） ---------- */
.sidenav-burger {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: rgba(20, 20, 20, 0.72);
  transform: translate(-50%, -50%);
  transition: opacity .25s ease;
}
.sidenav-burger::before,
.sidenav-burger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: rgba(20, 20, 20, 0.72);
}
.sidenav-burger::before { top: -6px; }
.sidenav-burger::after  { top: 6px; }

@media (max-width: 768px) {
  /* 停靠到左上角 */
  .sidenav { align-items: flex-start; }

  /* 收起态：1:1 圆形按钮，固定不变形（去掉 backdrop，避免成为抽屉 fixed 的包含块） */
  .sidenav-panel {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: visible;
    background: rgba(236, 236, 236, 0.9);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: none;
  }
  .sidenav.is-open .sidenav-panel {
    width: 52px;
    height: 52px;
    border-radius: 50%;
  }
  .sidenav-ruler { display: none; }     /* 移动端不显示竖标尺 */
  .sidenav-burger { display: block; }
  /* 打开时汉堡变叉，作为关闭按钮 */
  .sidenav.is-open .sidenav-burger { background: transparent; }
  .sidenav.is-open .sidenav-burger::before { top: 0; transform: rotate(45deg); }
  .sidenav.is-open .sidenav-burger::after  { top: 0; transform: rotate(-45deg); }

  /* 展开态：左侧抽屉，点击从左滑入 */
  .sidenav-menu {
    position: fixed;
    inset: 0 auto 0 0;
    width: 82vw;
    max-width: 330px;
    height: 100vh;
    padding: 12vh 28px 6vh;
    background: rgba(236, 236, 236, 0.62);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 10px 0 50px rgba(0, 0, 0, 0.28);
    transform: translateX(-102%);
    opacity: 1;
    pointer-events: none;
    transition: transform .4s cubic-bezier(.7, 0, .2, 1);
    justify-content: flex-start;
    gap: 2.6vh;
    overflow-y: auto;
  }
  .sidenav.is-open .sidenav-menu {
    transform: translateX(0);
    pointer-events: auto;
  }
  .nav-group { grid-template-columns: 76px 1fr; }
}


/* ============================================================
   section-onestop.css
   ============================================================ */
/* ========== 新增屏：包装一站式 — 白色品牌图卡 ========== */
#onestop {
  background: #ececec;
  color: #1a1a1a;
  overflow: hidden;
  position: relative;
  z-index: 10;
  isolation: isolate;
}

.onestop-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 8vh 5vw 14vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 3.5vh;
  z-index: 2;
}

/* 顶栏：左标题 + 右三个分类标签 */
.onestop-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 4vw;
}

/* 左：包装一站式 / 印刷源头工厂 */
.onestop-title {
  margin: 0;
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: 1px;
  color: #0a0a0a;        /* 主标：深 */
}
.onestop-sub {
  margin: 10px 0 0 0;
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 36px !important;
  line-height: 1.1;
  letter-spacing: 2px;
  color: rgba(0,0,0,0.18);  /* 副标：明显更浅 */
}
.onestop-sub-en {
  margin: 10px 0 0 0;
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 32px ;
  line-height: 1.1;
  letter-spacing: 2px;
  color: rgba(0,0,0,0.18);  /* 副标：明显更浅 */
}


/* 右：三个分类标签 */
.onestop-tags {
  display: flex;
  gap: clamp(28px, 4vw, 64px);
  align-items: flex-start;
}
.onestop-tag {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.onestop-tag-cn {
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 1.5px;
  color: #0a0a0a;        /* CN：深 */
  display: flex;
  align-items: center;
  gap: 0px;
}
.onestop-tag-cn::before {
  content: "·";
  color: #0a0a0a;
  font-size: 1.4em;
  line-height: 0;
}
.onestop-tag-en {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.5px;
  color: rgba(0,0,0,0.28);  /* EN：浅 */
  padding-left: 12px;       /* 对齐到中文（跳过那颗圆点） */
}

/* 中：大圆角图卡 */
.onestop-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #d9d9d9;
  box-shadow:
    0 12px 30px rgba(0,0,0,0.08),
    0 2px 6px rgba(0,0,0,0.04);
  opacity: 0;
  transform: scale(0.98);
  will-change: opacity, transform;
}
.onestop-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 底部胶片标尺：与色彩屏同款样式，颜色改为白色（亮） */
#onestop .ruler-bottom {
  height: 70px;
  bottom: 24px;
  z-index: 5;
}
#onestop .ruler-ticks {
  top: 26px;
  height: 22px;
  gap: 12px;
}
#onestop .ruler-ticks .tick {
  width: 1px;
  background: #000;
}
#onestop .ruler-ticks .tick.short { height: 10px; }
#onestop .ruler-ticks .tick.long  { height: 22px; }

/* 浅色背景下的网格弱化 */
#onestop .grid-bg {
  opacity: 0.45;
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
  z-index: 1;
}
#onestop .grid-bg::before {
  background-image: radial-gradient(rgba(0,0,0,0.18) 1px, transparent 1.5px);
  opacity: 0.35;
}

@media (max-width: 768px) {

  .onestop-sub-en {
   font-size: 22px ;
  }


  /* 移动端：内容自适应高度，图片按原比例完整显示 */
  #onestop { height: auto; }
  .onestop-wrap {
    position: relative;
    grid-template-rows: auto auto;
    height: auto;
    padding: 8vh 6vw 12vh;
    gap: 3vh;
  }
  .onestop-head {
    grid-template-columns: 1fr;
    gap: 3vh;
  }
  .onestop-tags {
    gap: 20px;
    flex-wrap: wrap;
  }
  .onestop-tag-cn {
    font-size: 13px;
  }
  .onestop-tag-en {
    font-size: 14px;
  }
  /* 图卡：原比例 */
  .onestop-card {
    height: auto;
    aspect-ratio: auto;
  }
  .onestop-card img {
    height: auto;
    object-fit: contain;
  }
}


/* ============================================================
   section-painpoints.css
   ============================================================ */
/* ========== 新增屏：印刷常见痛点以及解决方案 ========== */
#painpoints {
  background: #0a0a0a;
  color: #CFD9E0;
  overflow: hidden;
  position: relative;
}

#painpoints .grid-bg {
  opacity: 0.4;
}

.painpoints-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 28fr 72fr;
  align-items: start;
  padding: 10vh 4vw 10vh 6vw;
  gap: 4vw;
  z-index: 2;
}

/* 左：大标题 */
.painpoints-head {
  align-self: start;
  padding-top: 2vh;
}
.painpoints-title {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 50px;
  line-height: 1.1;
  letter-spacing: 0.5px;
  color: #CFD9E0;
  margin: 0 0 22px 0;
  opacity: 0;
  transform: translateY(20px);
}
.painpoints-sub {
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-size: 16px;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.45);
  opacity: 0;
  transform: translateY(14px);
}

/* 右：6 行对照 */
.painpoints-list {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  gap: 0;
  width: 100%;
  height: 78vh;
}

.painpoints-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(20px, 3vw, 56px);
  padding: 1vh 0;
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

/* 痛点 / 解决方案 文字块 */
.pp-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pp-en {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.35;
  color: #CFD9E0;
  letter-spacing: 0.3px;
}
.pp-cn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 1.5px;
}

/* 图标统一尺寸（图标 SVG 自带红色） */
.pp-icon {
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: middle;
}
.pp-icon-x {
  width: 11px;
  height: 11px;
}
.pp-icon-check {
  width: 14px;
  height: 10px;
}

/* 中间长箭头：用 clip-path 实现从左到右绘制 */
.pp-arrow {
  display: block;
  width: clamp(70px, 9vw, 160px);
  height: 14px;
  flex: 0 0 auto;
  object-fit: contain;
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}

@media (max-width: 768px) {
  #painpoints { height: auto; min-height: 0; overflow: visible; }
  .painpoints-wrap {
    grid-template-columns: 1fr;
    height: auto;
    padding: 8vh 0 6vh;
    gap: 3vh;
  }
  .painpoints-head { padding: 0 6vw; }

  /* 纵向堆叠：6 组一个个往下排 */
  .painpoints-list {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 16px;
    padding: 0 6vw;
  }
  .painpoints-row {
    grid-template-columns: 1fr;       /* 痛点 / 方案 纵向堆叠 */
    gap: 2.2vh;
    padding: 3.4vh 5vw;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    align-content: start;
    opacity: 1 !important;
    transform: none !important;
  }
  /* 痛点与方案之间的分隔线（替代横向箭头） */
  .painpoints-row .pp-block:first-of-type {
    padding-bottom: 2.2vh;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
  }
  .pp-arrow { display: none; }
}

/* ============================================================
   section-process.css
   页面名称：第九屏 Exclusive Business Process 专属业务流程
   ============================================================ */

/* ========== 第九屏：制作流程 Exclusive Business Process ========== */
#process {
  background: #000;
  overflow: hidden;
}

.process-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 28fr 72fr;
  grid-template-rows: auto 1fr;
  align-items: start;
  padding: 12vh 4vw 12vh 6vw;
  gap: 4vh 2vw;
  z-index: 2;
}

/* 左：大标题 */
.process-head {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  padding-top: 2vh;
}

.process-title {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: 0.5px;
  color: #CFD9E0;
  margin: 0 0 22px 0;
  opacity: 0;
  transform: translateY(20px);
}

.process-sub {
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-size: 16px;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.45);
  opacity: 0;
  transform: translateY(14px);
}

/* 右上：描述 */
.process-desc {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3vw;
  padding-top: 2vh;
}

.process-desc-en {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  margin: 0;
  opacity: 0;
  transform: translateY(14px);
}

.process-desc-cn {
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.45);
  letter-spacing: 1px;
  margin: 0;
  opacity: 0;
  transform: translateY(14px);
}

/* 右下：3 列数据 */
.process-grid-clip {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  width: 100%;
  align-self: end;
  padding-bottom: 4vh;
  overflow: hidden;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

/* ===== 列 = 一根竖向标尺 ===== */
.process-col {
  position: relative;
  padding: 1.2vh 2.2vw 1.2vh 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4vh;
  min-height: 50vh;
}

/* 竖向标尺：像厘米尺一样长短交替 */
.process-col::before {
  content: "";
  position: absolute;
  left: 60px;
  top: 0;
  bottom: 0;
  width: 4px;
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0.6) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.45) 1px, transparent 1px);
  background-size:
    3px 60px,
    1px 12px;
  background-repeat: repeat-y, repeat-y;
  background-position: 0 0, 0 0;
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
}

/* 一行 = 一个刻度位置 */
.process-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  opacity: 0;
  transform: translateX(-10px);
  will-change: opacity, transform;
}

/* 数字 01–12 */
.process-num {
  position: absolute;
  left: -50px;
  top: 6px;
  transform: none;
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #CFD9E0;
  width: 26px;
  text-align: left;
}

/* 长刻度 */
.process-dash {
  display: inline-block;
  width: 10px;
  height: 1px;
  background: rgba(255,255,255,0.8);
  flex: 0 0 auto;
  margin-left: -2px;
  margin-top: 14px;
}

.process-dot {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(255,255,255,0.42);
  flex: 0 0 auto;
  margin-top: 8px;
}

/* 中英文文字 */
.process-text {
  display: block;
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  letter-spacing: 1px;
  line-height: 1.25;
  color: rgba(255,255,255,0.42);
}

.process-cn {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.28;
  color: rgba(255,255,255,0.42);
}

.process-en {
  display: block;
  margin-top: 4px;
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.34);
}

.process-text .hl {
  color: #CFD9E0;
}
/* ============================================================
   页面名称：Exclusive Business Process 专属业务流程
   移动端：取消 Pin 横向滚动，改为正常纵向排列
   ============================================================ */

@media (max-width: 768px) {

  /* 整个流程区域恢复正常高度，不裁剪纵向内容 */
  #process {
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  /* 页面主体改为单列纵向布局 */
  #process .process-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 72px 0;
    gap: 34px;
  }

  /* 标题区域 */
  #process .process-head {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    padding: 0 6vw;
  }

  #process .process-title {
    font-size: 42px;
    line-height: 1.08;
    margin-bottom: 16px;
  }

  #process .process-sub {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 3px;
  }

  /* 描述区域 */
  #process .process-desc {
    grid-column: 1;
    grid-row: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 14px;
    padding: 0 6vw;
  }

  #process .process-desc-en,
  #process .process-desc-cn {
    font-size: 14px;
    line-height: 1.7;
  }

  /* 不再作为横向滚动裁剪容器 */
  #process .process-grid-clip {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 0 6vw;
  }

  /* 三列改成正常纵向排列 */
  #process .process-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    height: auto;
    min-height: 0;
    gap: 34px;
    transform: none !important;
    will-change: auto;
  }

  /* 每一列不再占据 100vw */
  #process .process-col {
    display: flex;
    flex-direction: column;
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    gap: 22px;
    justify-content: flex-start;
    border-right: none;
    transform: none !important;
  }

  /* 手机端隐藏桌面竖向虚线 */
  #process .process-col::before {
    display: none;
    content: none;
  }

  /* 流程项目直接显示 */
  #process .process-item {
    display: flex;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    gap: 10px;
    opacity: 1 !important;
    transform: none !important;
  }

  #process .process-num {
    position: static;
    flex: 0 0 28px;
    width: 28px;
    margin: 0;
    padding-top: 3px;
    transform: none;
    font-size: 13px;
    line-height: 1.4;
    color: #CFD9E0;
  }

  #process .process-dash {
    flex: 0 0 10px;
    width: 10px;
    margin: 12px 0 0;
  }

  #process .process-dot {
    flex: 0 0 11px;
    width: 11px;
    height: 11px;
    margin-top: 7px;
  }

  #process .process-text {
    flex: 1 1 auto;
    min-width: 0;
  }

  #process .process-cn {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 400;
  }

  #process .process-en {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 400;
  }
}
/* ============================================================
   section-scope.css
   ============================================================ */
/* ========== 第八屏：制作范围 Production Scope ========== */
#scope {
  background: #000;
  overflow: hidden;
}

.scope-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 28fr 72fr;
  align-items: center;
  padding: 10vh 4vw 14vh 6vw;
  gap: 2vw;
  z-index: 2;
}

/* 左侧大标题 */
.scope-head {
  position: relative;
  align-self: center;
  padding-top: 2vh;
}
.scope-title {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 80px;
  line-height: 1.05;
  letter-spacing: 0.5px;
  color: #CFD9E0;
  margin: 0 0 28px 0;
  opacity: 0;
  transform: translateY(20px);
}
.scope-sub {
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-size: 18px;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.5);
  opacity: 0;
  transform: translateY(14px);
}

/* 右侧 2 列 × 3 行 网格 */
.scope-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  height: 78vh;
  width: 100%;
  /* 中线 + 行分隔线由 ::before / ::after / item border 处理 */
}

/* 中央竖线（贯穿三行，两端各延伸 80px） */
.scope-grid::before {
  content: "";
  position: absolute;
  top: -80px;
  bottom: -80px;
  left: 50%;
  width: 1px;
  background: rgba(255,255,255,0.18);
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  will-change: transform;
}

/* 行分隔横线（左右各一段，中央留 80px 间距） */
.scope-row-line {
  position: absolute;
  height: 1px;
  background: rgba(255,255,255,0.18);
  transform: scaleX(0);
  will-change: transform;
  pointer-events: none;
}
/* 左半段：从最左端 -80px → 距中心 -40px */
.scope-row-line--left {
  left: -80px;
  right: calc(50% + 40px);
  transform-origin: left center;
}
/* 右半段：距中心 +40px → 最右端 +80px */
.scope-row-line--right {
  left: calc(50% + 40px);
  right: -80px;
  transform-origin: right center;
}
.scope-row-line[data-row="1"] { top: calc(100% / 3); }
.scope-row-line[data-row="2"] { top: calc(200% / 3); }

.scope-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5% 0 7%;
  gap: 3%;
  opacity: 0;
  transform: translateY(28px);
}

/* 旧的 item::after 行线已不再使用 */
.scope-item::after { display: none; }

/* 左侧文案区 */
.scope-info {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex: 0 0 auto;
  max-width: 60%;
}
.scope-num {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.6);
  padding-top: 6px;
  flex: 0 0 auto;
}
.scope-text { flex: 1 1 auto; }
.scope-en {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  color: #CFD9E0;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
  color: #CFD9E0;
}
.scope-cn {
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255,255,255,0.45);
  letter-spacing: 1.5px;
}

.scope-bullets {
  list-style: none;
  margin-top: 14px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
}
.scope-bullets li {
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 1px;
  position: relative;
  padding-left: 12px;
  white-space: nowrap;
}
.scope-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  transform: translateY(-50%);
}

/* 右侧 SVG */
.scope-img {
  flex: 0 0 auto;
  width: 38%;
  height: 75%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scope-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  opacity: 0.92;
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.scope-item:hover .scope-img img { transform: scale(1.06); }

/* 中线底部的 55.5mm 数据：贴在最后一行下方、中线上 */
.scope-axis-num {
  position: absolute;
  /* 紧贴底部标尺上方 */
  bottom: calc(24px + 70px + 18px);
  /* 中线在 .scope-wrap 的右侧 72fr 内的水平中心 */
  left: calc(6vw + (100vw - 6vw - 4vw) * (28 / 100) + 2vw + (100vw - 6vw - 4vw - 2vw) * (72 / 100) / 2);
  transform: translateX(-50%);
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 1px;
  color:#CFD9E0;
  z-index: 4;
  opacity: 0;
  white-space: nowrap;
}

/* 底部胶片标尺（与第三/四屏一致） */
#scope .ruler-bottom {
  height: 70px;
  bottom: 24px;
  z-index: 5;
}
#scope .ruler-ticks {
  top: 26px;
  height: 22px;
  gap: 42px;
}
#scope .ruler-ticks .tick {
  width: 1px;
  background: rgba(255,255,255,0.4);
}
#scope .ruler-ticks .tick.short { height: 10px; }
#scope .ruler-ticks .tick.long  { height: 22px; }

@media (max-width: 768px) {
  .scope-wrap {
    grid-template-columns: 1fr;
    padding: 10vh 0 14vh;
    gap: 4vh;
  }
  .scope-head {
    padding: 0 6vw;
  }

  /* 手机端隐藏所有分割线（中央竖线 + 左右两段横线） */
  .scope-grid::before,
  .scope-row-line { display: none; }

  /* 手机端：用 GSAP pin + scrub 把纵向滚动映射成横向位移 */
  .scope-grid-clip {
    position: relative;
    width: 100%;
    height: 60vh;
    overflow: hidden;
    padding: 0 6vw;
  }
  .scope-grid {
    position: absolute;
    top: 0;
    left: 6vw;
    height: 100%;
    width: auto;
    grid-template-columns: none;
    grid-template-rows: none;
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    will-change: transform;
  }
  .scope-grid::before { display: none; }

  .scope-item {
    flex: 0 0 88vw;
    width: 88vw;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 4vw;
    border-right: 1px solid rgba(255,255,255,0.18);
  }
  .scope-item:last-child { border-right: none; }
  .scope-item::after { display: none; }

  .scope-info {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin-bottom: 28px;
  }
  .scope-num { padding-top: 0; }
  .scope-img {
    width: 60%;
    height: 38vh;
  }
  .scope-bullets {
    grid-template-columns: 1fr 1fr;
    justify-items: center;
  }

  /* 数据标签居中 */
  .scope-axis-num { left: 50%; }
}


/* ============================================================
   section-service.css
   ============================================================ */
/* ========== 第六屏：服务优势 横向卡片 ========== */
#service {
  background: #000;
  overflow: hidden;
}
.service-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10vh 0 8vh 6vw;
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.service-eyebrow {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.85);
  line-height: 1.45;
  margin-bottom: 7vh;
}
/* 横向标尺：与画廊一致，但带数字 */
.service-ruler {
  position: relative;
  width: 100%;
  height: 64px;
  margin-bottom: 28px;
  overflow: hidden;
}
.service-ruler-plane {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  will-change: transform;
}
.service-ruler-marks {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 1px;
}
.service-ruler-marks .mark {
  position: absolute;
  top: 0;
  text-align: left;
  white-space: nowrap;
}
.service-ruler-ticks {
  position: absolute;
  top: 32px;
  left: 0;
  height: 22px;
}
.service-ruler-ticks .tick {
  position: absolute;
  top: 0;
  width: 1px;
  background: rgba(255,255,255,0.45);
}
.service-ruler-ticks .tick.short { height: 8px; }
.service-ruler-ticks .tick.long  { height: 18px; }

/* 卡片轨道：默认显示 2.5 张 */
.service-track-clip {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  overflow: hidden;
}
.service-track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  gap: 28px;
  will-change: transform;
}
.service-card {
  flex: 0 0 auto;
  /* 显示 2.5 张：(100vw - padding 6vw - 28px*2 间距) / 2.5 */
  width: calc((100vw - 6vw - 56px) / 2.5);
  display: flex;
  flex-direction: column;
  perspective: 1000px;
}
.service-card .card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: #1a1a1a;
  border-radius: 4px;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.service-card .card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0) 45%
  );
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
  z-index: 2;
}
.service-card:hover .card-img::after { opacity: 1; }
.service-card .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.08);
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.service-card .card-en {
  margin-top: 22px;
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.35;
  color: #CFD9E0;
  letter-spacing: .3px;
  min-height: 2.7em;
}
.service-card .card-cn {
  margin-top: 10px;
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.55);
  letter-spacing: 2px;
}

@media (max-width: 768px) {
  .service-wrap { padding: 2vh 5vw 2vh; }
  .service-card { width: 78vw; }
}


/* ============================================================
   section-translator.css
   ============================================================ */
/* ========== 新增屏：让包装成为最诚实的翻译官 — 白色横向卡片 ========== */
#translator {
  background: #ececec;
  color: #1a1a1a;
  overflow: hidden;
  position: relative;
  z-index: 10;
  isolation: isolate;
}

/* 浅色网格背景 + 十字标记 */
#translator .grid-bg {
  opacity: 1;
  background-image:
    linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
  z-index: 1;
}
/* 网格交点处的 "+" 字标记（伪元素叠加） */
#translator .grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    /* 横线 */
    linear-gradient(rgba(0,0,0,0.28) 1px, transparent 1px),
    /* 竖线 */
    linear-gradient(90deg, rgba(0,0,0,0.28) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px;
  background-position: 50px 50px, 50px 50px;
  -webkit-mask-image:
    radial-gradient(circle 5px at center, #000 99%, transparent 100%);
          mask-image:
    radial-gradient(circle 5px at center, #000 99%, transparent 100%);
  -webkit-mask-size: 100px 100px;
          mask-size: 100px 100px;
  -webkit-mask-position: 50px 50px;
          mask-position: 50px 50px;
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  opacity: 0.6;
}

/* 顶部文案 */
.translator-text {
  position: absolute;
  top: 8vh;
  left: 6vw;
  right: 6vw;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 5vw;
}
@media (max-width: 549px) {
  .translator-text {
    display: block;
  }
  .translator-copy--en{
    max-width: 100% !important;
    font-size: 15PX !important;
    padding-top: 20PX;
  }
}
/* 右侧英文文案（镜像左侧中文，浅色） */
.translator-copy--en {
  max-width: 40%;
  text-align: left;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.4;
  color: rgba(0,0,0,0.32);
  letter-spacing: 0.3px;
}
.translator-copy {

  font-size: 24px;
  line-height: 1.65;
  color: rgba(0,0,0,0.15);     /* 副文：浅 */
  margin: 0;
  letter-spacing: 1px;
  font-weight: 500;
}
.translator-copy .hl {
  font-weight: 500;
  color: #0a0a0a;              /* 高亮："Woo" 加深 */
  letter-spacing: 0;
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
}
.translator-copy .line {
  display: block;
  overflow: hidden;
}
.translator-copy .line > span {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}

/* 横向卡片轨道 */
.translator-track-clip {
  position: absolute;
  top: 38vh;
  bottom: 8vh;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: 2;
  padding-left: 6vw;
}
.translator-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  height: 100%;
  will-change: transform;
}

.translator-card {
  flex: 0 0 38vw;
  width: 38vw;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #d9d9d9;
  box-shadow:
    0 10px 28px rgba(0,0,0,0.08),
    0 2px 6px rgba(0,0,0,0.05);
  opacity: 0;
  transform: translateY(60px);
  will-change: transform, opacity;
}
.translator-card-img {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
}
.translator-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.translator-card:hover .translator-card-img img {
  transform: scale(1.05);
}

@media (max-width: 768px) {
  /* 手机端：茶酒翻译屏改纵向整屏往下滑 */
  #translator { height: auto; min-height: 0; padding-bottom: 6vh; }
  .translator-text {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    padding: 8vh 6vw 3vh;
  }
  .translator-copy {
    font-size: 18px;
  }
  .translator-copy .line > span { transform: none; }
  .translator-track-clip {
    position: static;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    overflow: visible;
    padding: 0 6vw;
  }
  .translator-track {
    flex-direction: column;
    gap: 16px;
    height: auto;
    transform: none !important;
  }
  .translator-card {
    flex: 0 0 auto;
    width: 100%;
    height: 62vw;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ============================================================
   works-detail.css
   ============================================================ */
/* ============================================================
   WorkCase 案例详情
   复用 works.css 主题变量；顶部信息 + 左缩略图 + 右大图
   ============================================================ */
.detail-page { overflow-x: hidden; }

.detail {
  position: relative;
  height: 100vh;
  overflow: hidden;              /* 桌面整屏，无页面滚动条 */
  padding: 32px 96px 26px;       /* 两侧留更多 padding */
  display: grid;
  grid-template-rows: auto auto 1fr auto;   /* 返回 / 信息 / 主体 / logo */
  gap: 16px;
}

/* 左上角返回（参考查看更多描边药丸，hover 反色） */
.detail-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 22px;
  border: 1px solid rgba(0,0,0,0.82);
  border-radius: 999px;
  color: var(--text-strong);
  background: rgba(255,255,255,0.35);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1px;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .25s ease;
}
.detail-back:hover {
  background: rgba(0,0,0,0.9);
  border-color: #000;
  color:#CFD9E0;
  transform: translateX(-2px);
}

/* ---------- 顶部信息栏（左 32% WorkCase / 右 68% 标题+描述，对齐主体） ---------- */
.detail-top {
  display: grid;
  grid-template-columns: 12fr 88fr;
  gap: 34px;
  align-items: start;
}
.detail-workcase {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.5px;
  color: var(--text-strong);
  white-space: nowrap;
}
.detail-cat {
  margin: 0 0 14px;
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  color: var(--text-strong);
}
.detail-info {
  max-width: none;
}
.detail-desc {
  margin: 0;
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-faint);
}
.detail-fields {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 40px;
  max-width: 560px;
}
.detail-field {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-size: 16px;
  color: var(--text-strong);
}
.df-k { font-weight: 500; margin-right: 4px; }
.df-v { font-weight: 500; }

/* ---------- 主体：缩略图 + 大图 ---------- */
.detail-body {
  display: grid;
  grid-template-columns: 12fr 88fr;   /* 左缩略图 12% / 右大图 88% */
  gap: 34px;
  min-height: 0;
}

/* 左：缩略图列（正方形，左对齐，保持旧宽度，超出自动上下偏移，无滚动条） */
.detail-thumbs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 6px;                    /* 留出高亮框空间，避免被容器裁掉 */
  scrollbar-width: none;               /* Firefox 隐藏滚动条 */
}
.detail-thumbs::-webkit-scrollbar { display: none; }  /* Webkit 隐藏滚动条 */
.detail-thumb {
  flex: 0 0 auto;
  width: 100%;
  max-width: 150px;                    /* 保持旧的缩略图宽度，不随 32% 列撑大 */
  aspect-ratio: 1 / 1;                 /* 默认 1:1 正方形 */
  border: none;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  opacity: 0.55;
  transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease;
}
.detail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-thumb:hover { opacity: 0.9; transform: translateY(-2px); }
.detail-thumb.is-active {
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.42), var(--card-shadow);
}

/* 右：大图舞台 */
.detail-stage {

  overflow: hidden;

  min-height: 0;
  margin: 0 auto;
}
.detail-stage img {

  border-radius: 22px;
  height: 100%;
  object-fit: contain;  
  background: #fff;
  box-shadow: var(--card-shadow);     /* 按原始比例完整显示大图，不裁切、不拉伸 */
  display: block;
  transition: opacity .3s ease;
}
@media (max-width: 549px) {
  .detail-stage img {

    border-radius: 22px;
    height: 100%;
    width: 100%;
    object-fit: contain;
    background: #fff;
    box-shadow: var(--card-shadow);
    display: block;
    transition: opacity .3s ease;
  }
}
/* 底部 logo（网格底行，左对齐，不与缩略图重叠） */
.detail-logo {
  justify-self: start;
  align-self: end;
}
.detail-logo img { width: 120px; height: auto; display: block; }

/* ---------- 手机端：大图在上，缩略图横向滚动在下 ---------- */
@media (max-width: 768px) {
  .detail {
    height: auto;              /* 手机端恢复正常滚动（不锁整屏） */
    overflow: visible;
    padding: 20px 18px 30px;
    grid-template-rows: auto auto auto auto;
    gap: 16px;
  }
  .detail-top {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .detail-cat { font-size: 18px; }
  .detail-fields { grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-top: 14px; }

  .detail-body {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .detail-stage {
    order: 1;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
  }
  /* 缩略图变横向滚动条：支持手动滑动 + 惯性 */
  .detail-thumbs {
    order: 2;
    flex-direction: row;
    height: auto;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding: 6px 4px 10px;
  }
  .detail-thumb {
    width: 84px;
    flex: 0 0 84px;
    aspect-ratio: 1 / 1;
  }
  .detail-logo {
    align-self: start;
    margin-top: 8px;
  }
  .detail-logo img { width: 96px; }
}


/* ============================================================
   works-more.css
   ============================================================ */
/* ============================================================
   WorkCase 更多案例（瀑布流）
   复用 works.css 的主题变量（--bg / --card-bg / --text-* 等）
   桌面 4 列，平板 3 列，手机 2 列
   ============================================================ */
.more-main {
  padding: 44px 44px 90px;
}

/* 顶部标题 */
.more-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 34px;
}
.more-back {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border: 1px solid rgba(0,0,0,0.82);
  border-radius: 999px;
  color: var(--text-strong);
  background: rgba(255,255,255,0.35);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1px;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .25s ease;
}
.more-back:hover {
  background: rgba(0,0,0,0.9);
  border-color: #000;
  color:#CFD9E0;
  transform: translateX(-2px);
}
.more-title {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}
.more-en {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 44px;
  line-height: 1.05;
  margin: 0;
  color: var(--text-strong);
}
.more-cn {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--text-strong);
  margin: 0;
}

/* 瀑布流：CSS 多列 + break-inside 避免断裂 */
.more-grid {
  column-count: 4;
  column-gap: 18px;
}
@media (max-width: 1200px) { .more-grid { column-count: 3; } }
@media (max-width: 768px)  { .more-grid { column-count: 2; column-gap: 12px; } }

.more-card {
  display: block;
  break-inside: avoid;
  margin-bottom: 18px;
  border-radius: 14px;
  overflow: hidden;
  background: #ECECEC;
  box-shadow: var(--card-shadow);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
  text-align: center;
}
@media (max-width: 768px) { .more-card { margin-bottom: 12px; } }
.more-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}
.more-card-media img {
  width: 100%;
  height: auto;
  display: block;
}
.more-card-cap {
  padding: 12px 14px 14px;
}
.more-card-en {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--text-muted);
}

/* 手机端：让开顶部固定的横向导航条 */
@media (max-width: 768px) {
  .more-main { padding: 74px 16px 60px; }
  .more-head { margin-bottom: 22px; }
}


/* ============================================================
   works.css
   ============================================================ */
/* ============================================================
   WorkCase 作品分类页
   - 左侧毛玻璃白色导航（可切换深色主题）
   - 右侧整屏滚动作品网格
   ============================================================ */

/* ---------- 主题变量 ---------- */
.works-page.theme-light {
  --bg: #ececec;
  --nav-bg: rgba(255,255,255,0.55);
  --nav-border: rgba(0,0,0,0.06);
  --text-strong: #1a1a1a;
  --text-muted: rgba(0,0,0,0.45);
  --text-faint: rgba(0,0,0,0.28);
  --nav-active: #ff2d2d;
  --card-bg: #f3f3f3;
  --card-shadow: 0 8px 22px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  --card-shadow-hover: 0 16px 38px rgba(0,0,0,0.14), 0 4px 10px rgba(0,0,0,0.06);
}

.works-page.theme-dark {
  --bg: #0a0a0a;
  --nav-bg: rgba(20,20,20,0.55);
  --nav-border: rgba(255,255,255,0.08);
  --text-strong: #CFD9E0;
  --text-muted: rgba(255,255,255,0.55);
  --text-faint: rgba(255,255,255,0.3);
  --nav-active: #ff4040;
  --card-bg: #161616;
  --card-shadow: 0 8px 22px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.35);
  --card-shadow-hover: 0 16px 38px rgba(0,0,0,0.65), 0 4px 10px rgba(0,0,0,0.45);
}

/* ---------- 基础重置 ---------- */
.works-page {
  background: var(--bg);
  color: var(--text-strong);
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
.works-page * {
  box-sizing: border-box;
}
.works-page a {
  color: inherit;
  text-decoration: none;
}

/* ---------- 左侧毛玻璃导航 ---------- */
.works-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100vh;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 50;

  background: var(--nav-bg);

  border-right: 1px solid var(--nav-border);
}

.works-nav-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.works-nav-title {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.5px;
  margin: 0;
  color: var(--text-muted);
}
.works-nav-sub {
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--text-faint);
  margin: 0;
}

.works-nav-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 18vh 0;
  scrollbar-width: none;              /* 隐藏滚动条 */
}
.works-nav-list::-webkit-scrollbar { display: none; }

.works-nav-item {
  position: relative;

  text-align: center;
  gap: 10px;
  padding: 10px 18px;

  border-radius: 10px !important;
  border: 1px solid transparent;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--text-muted);
  transition: color .25s ease, background .35s ease, box-shadow .35s ease, border-color .35s ease;
  isolation: isolate;
}
.works-nav-item .nav-label {
  position: relative;
  z-index: 1;
}
.works-nav-item:hover {
  color: var(--text-strong);
}

/* 激活项：磨砂玻璃药丸（与右下角 WhatsApp 悬浮球同质感） */
.works-nav-item.is-active {
  color: var(--text-faint);
  background: rgba(236, 236, 236, 0.42);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
          backdrop-filter: blur(20px) saturate(150%);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.theme-dark .works-nav-item.is-active {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.14) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(255,255,255,0.08),
    0 6px 16px rgba(0,0,0,0.4);
}



/* 左下 logo */
.works-nav-foot {
  display: flex;
  align-items: flex-end;
}
.works-logo {
  display: inline-block;
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-size: 20px;
  letter-spacing: 0.5px;
  font-weight: 500;
  color: var(--text-strong);
}
.works-logo img {
  display: block;
  width: 110px;
  height: auto;
  max-width: 100%;
}
.theme-dark .works-logo img {
  filter: invert(1) brightness(2);
}

/* ---------- 右侧整屏内容 ---------- */
.works-main {
  margin-left: 200px;
  width: calc(100% - 200px);
}

.works-screen {
  width: 100%;
  height: 100vh;
  padding: 24px 24px 24px 32px;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
/* 登录状态下顶部有 32px 管理栏，扣掉以免拼图溢出到屏幕外 */
.admin-bar .works-screen { height: calc(100vh - 32px); }

/* 底部：查看更多案例（参考 View Detail 描边药丸，hover 反色） */
.works-more {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 34px;
  border: 1px solid rgba(0,0,0,0.82);
  border-radius: 999px;
  color: var(--text-strong);
  background: rgba(255,255,255,0.35);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 2px;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .25s ease, gap .25s ease;
}
.works-more:hover {
  background: rgba(0,0,0,0.9);
  border-color: #000;
  color:#CFD9E0;
  transform: translateY(-2px);
  gap: 16px;
}
.works-more .arrow { transition: transform .25s ease; }
.works-more:hover .arrow { transform: translateX(4px); }
.theme-dark .works-more {
  border-color: rgba(255,255,255,0.82);
  background: rgba(0,0,0,0.35);
}
.theme-dark .works-more:hover { background: rgba(255,255,255,0.95); color: #111; border-color:#CFD9E0; }

/* 网格：参考设计稿 — 不规则 Bento Box */
.works-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.works-page .card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
}
.works-page .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.08);
}
.card-media {
  position: absolute;
  inset: 0;
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 标题卡（白色 / 浅色）— 文字垂直居中、左右两端分布 */
.card-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
}
.card-en {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 38px;
  line-height: 1.05;
  margin: 0;
  color: var(--text-strong);
}
.card-cn {
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--text-muted);
  margin: 0;
  white-space: nowrap;
}

/* 珠宝首饰：8 块不规则布局 — 参考设计稿 works.html */
.jewelry-grid .card-a { grid-column: 1 / span 4;  grid-row: 1 / span 6;  }
.jewelry-grid .card-b { grid-column: 5 / span 6;  grid-row: 1 / span 3;  }
.jewelry-grid .card-c { grid-column: 11 / span 2; grid-row: 1 / span 4;  }
.jewelry-grid .card-d { grid-column: 5 / span 6;  grid-row: 4 / span 6;  }
.jewelry-grid .card-e { grid-column: 1 / span 4;  grid-row: 7 / span 6;  }
.jewelry-grid .card-f { grid-column: 5 / span 2;  grid-row: 10 / span 3; }
.jewelry-grid .card-g { grid-column: 7 / span 4;  grid-row: 10 / span 3; background: #f7f7f7; }
.jewelry-grid .card-h { grid-column: 11 / span 2; grid-row: 5 / span 8;  }

/* 网格项防溢出：图片铺满裁切、卡片可收缩（真实上传图尺寸不一时的安全网） */
.works-page .card { min-width: 0; min-height: 0; }
.card-media img { object-fit: cover; }

/* 占位分类（其它 5 屏） */
.placeholder-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.02);
  border-radius: 14px;
}
.theme-dark .placeholder-grid {
  background: rgba(255,255,255,0.02);
}
.placeholder-title {
  text-align: center;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .works-nav {
    width: 160px;
    padding: 24px 20px;
  }
  .works-main {
    margin-left: 160px;
    width: calc(100% - 160px);
  }
  .nav-marker { left: -20px; }
  .nav-marker::after { width: 44px; }
}

@media (max-width: 768px) {
  .works-nav {
    position: fixed;
    width: 100%;
    height: auto;
    bottom: auto;
    top: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-right: none;
    border-bottom: 1px solid var(--nav-border);
  }
  .works-nav-head { gap: 0; }
  .works-nav-title { font-size: 14px; }
  .works-nav-sub { display: none; }
  .works-nav-list {
    flex-direction: row;
    gap: 14px;
    margin: 0;
    overflow-x: auto;
    flex: 1;
    padding: 0 14px;
  }
  .works-nav-item {
    flex: 0 0 auto;
    margin: 0;                 /* 重置负边距，避免顶部文字重叠 */
    padding: 4px 2px;
    border: none;
    white-space: nowrap;
    font-size: 12px;
    letter-spacing: 1px;
  }
  .nav-marker { display: none; }
  .works-nav-item.is-active {
    color: var(--nav-active);
    background: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--nav-active);
  }
  .works-nav-foot { display: none; }

  .works-main {
    margin-left: 0;
    width: 100%;
    padding-top: 56px;
  }
  .works-screen {
    height: auto;
    min-height: 100vh;
    padding: 16px;
  }
  /* 手机端网格降级为单列堆叠 */
  .jewelry-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(8, 30vh);
  }
  .jewelry-grid .card { grid-column: 1; grid-row: auto; }
}


/* ============================================================
   mobile.css
   ============================================================ */
/* ============================================================
   标题排版统一（最后加载，统一各页 英文/中文标题 字号）
   - 桌面端：大致统一主标题/副标题字号
   - 移动端（≤768）：进一步收敛，避免过大
   仅作用于标题字号/行高，不改字体家族与各区块布局
   ============================================================ */

/* ---------- 桌面端：大致统一 ---------- */
@media (min-width: 769px) {
  .forge-title,
  .beyond-en,
  .intro-en,
  .color-title,
  .converge-title-en,
  .scope-title,
  .process-title,
  .painpoints-title,
  .onestop-title,
  .diagnosis-title,
  .contact-en,
  .epson-en1 {
    font-size: 32px;
    line-height: 1.2 ;
  }
  .epson-en2 {
    font-size: 32px;
    line-height: 1.25 ;
  }

  .beyond-cn,
  .intro-cn,
  .color-sub,
  .converge-title-cn,
  .scope-sub,
  .process-sub,
  .painpoints-sub,
  .onestop-sub,
  .diagnosis-sub,
  .contact-cn,
  .epson-cn {
    font-size: 18px;
    line-height: 1.4 ;
  }
}

/* ---------- 移动端：收敛字号 ---------- */
@media (max-width: 768px) {
  .forge-title,
  .beyond-en,
  .intro-en,
  .color-title,
  .converge-title-en,
  .scope-title,
  .process-title,
  .painpoints-title,
  .onestop-title,
  .diagnosis-title,
  .contact-en,
  .epson-en1 {
    font-size: 26px !important ;
    line-height: 1.25 ;
  }
  .epson-en2 {
    font-size: 23px ;
    line-height: 1.25 ;
  }

  .beyond-cn,
  .intro-cn,
  .color-sub,
  .converge-title-cn,
  .scope-sub,
  .process-sub,
  .painpoints-sub,
  .onestop-sub,
  .diagnosis-sub,
  .contact-cn,
  .epson-cn {
    font-size: 20px !important;
    letter-spacing: 2px ;
    line-height: 1.5 ;
  }

  /* 正文/描述文字：统一对齐「专属业务流程」(#process) 的字号 */
  .color-equip-en,
  .pp-en { font-size: 15px ; line-height: 1.4 ; }
  .color-equip-lead,
  .color-equip-cn,
  .pp-cn { font-size: 13px ; line-height: 1.5 ; }
}

/* ============================================================
   section-partners —— 合作伙伴 Logo 墙（首页最底部一屏）
   左：标题 + 排名不分先后；右：logo-all.svg 整图等比铺满
   ============================================================ */
#partners {
  background: #ececec;
  color: #1a1a1a;
  overflow: hidden;
  position: relative;
}
.partners-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 34fr 66fr;
  align-items: stretch;
  padding: 9vh 4vw 9vh 6vw;
  gap: 3vw;
}
/* 左：大标题 */
.partners-head {
  align-self: start;
  padding-top: 2vh;
}
.partners-title {
  font-family: "CinaGeo", "ShinGoSC", "PingFang SC", sans-serif;
  font-weight: 500;
  font-size: 50px;
  line-height: 1.12;
  letter-spacing: 0.5px;
  color: #1a1a1a;
  margin: 0 0 clamp(14px, 2.2vh, 26px);
}
.partners-sub {
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-size: clamp(14px, 1.05vw, 18px);
  letter-spacing: 5px;
  color: rgba(0,0,0,0.32);
  margin: 0;
}
/* 左下角：排名不分先后 */
.partners-note {
  position: absolute;
  left: 6vw;
  bottom: 8vh;
  font-family: "ShinGoSC", "PingFang SC", sans-serif;
  font-size: 13px;
  letter-spacing: 3px;
  color: rgba(0,0,0,0.30);
  margin: 0;
}
/* 右：Logo 墙整图，等比铺满高度、不裁切 */
.partners-wall {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}
.partners-wall img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* 移动端：竖向堆叠，logo 墙满宽自适应高度 */
@media (max-width: 768px) {
  #partners { height: auto; min-height: 100vh; }
  .partners-wrap {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 12vh 6vw 8vh;
    gap: 4vh;
  }
  .partners-title { font-size: 30px; }
  .partners-wall { height: auto; }
  .partners-wall img { width: 100%; height: auto; }
  .partners-note { position: static; margin-top: 4vh; }
}