/* ============================================================
   睿晟官网 v2 设计系统 · 基础层
   目标：对齐工业装备头部品牌（BOBST / TRUMPF / 海德堡）的克制风格
   —— 大图、少色、重排版层级、去装饰、真实摄影优先
   ============================================================ */

:root {
  /* 中性色阶（近黑蓝 → 白） */
  --v2-ink: #0a1526;
  --v2-ink-2: #16243b;
  --v2-ink-3: #24344d;
  --v2-body: #44536a;
  --v2-mute: #77869b;
  --v2-line: #e4e9f0;
  --v2-line-2: #eef2f6;
  --v2-bg: #ffffff;
  --v2-alt: #f6f8fa;
  --v2-alt-2: #eef1f5;

  /* 品牌色（logo 橙），只用于强调与主 CTA */
  --v2-brand: #c8451e;
  --v2-brand-d: #a33614;
  --v2-brand-l: #e86a42;

  /* 兼容旧变量，让未重写的页面立刻统一到新色板 */
  --primary: #0f2c4c;
  --primary-dark: #0a1526;
  --primary-light: #24405f;
  --accent: #c8451e;
  --accent-hover: #a33614;
  --text: #44536a;
  --text-light: #77869b;
  --border: #e4e9f0;
  --radius: 3px;
  --radius-lg: 4px;

  --v2-f: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --v2-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --v2-max: 1320px;
  --v2-gut: 28px;
}

/* 大宽屏：参照万德数科 / 汉弘这类工业装备官网的做法，
   1920 屏幕上内容区放宽到 1520，避免左右两条大黑边，图片也更有气势 */
@media (min-width: 1600px) {
  :root { --v2-max: 1520px; --v2-gut: 40px; }
}
@media (max-width: 768px) {
  :root { --v2-gut: 18px; }
}

body {
  font-family: var(--v2-f);
  color: var(--v2-body);
  background: var(--v2-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap {
  width: 100%;
  max-width: var(--v2-max);
  margin: 0 auto;
  padding: 0 var(--v2-gut);
}

/* 旧 .container 统一到新栅格 */
.container {
  width: 100%;
  max-width: var(--v2-max);
  padding: 0 var(--v2-gut);
}

h1, h2, h3, h4 {
  color: var(--v2-ink);
  letter-spacing: -0.012em;
  line-height: 1.24;
  font-weight: 700;
}

/* ---------- 通用区块 ---------- */
.sec {
  padding: 112px 0;
}
.sec--alt { background: var(--v2-alt); }
.sec--dark { background: var(--v2-ink); color: #b9c4d2; }
.sec--dark h2, .sec--dark h3 { color: #fff; }
.sec--tight { padding: 76px 0; }

@media (min-width: 1600px) {
  .sec { padding: 128px 0; }
}
@media (max-width: 900px) {
  .sec { padding: 64px 0; }
}

.sec-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 48px;
}
.sec-hd__l { max-width: 720px; }
.sec-hd--center {
  display: block;
  text-align: center;
  max-width: 780px;
  margin: 0 auto 48px;
}
.sec-hd--center .sec-lead { margin-left: auto; margin-right: auto; }

.eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-brand);
  margin-bottom: 16px;
}
.sec--dark .eyebrow { color: var(--v2-brand-l); }

.sec-title {
  font-size: clamp(28px, 2.7vw, 44px);
  font-weight: 700;
  color: var(--v2-ink);
  letter-spacing: -0.02em;
  line-height: 1.22;
}
.sec--dark .sec-title { color: #fff; }
.sec-title em {
  font-style: normal;
  color: var(--v2-brand);
}

.sec-lead {
  margin-top: 18px;
  max-width: 640px;
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--v2-mute);
}
.sec--dark .sec-lead { color: #93a2b5; }

.sec-more {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-ink);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--v2-line);
  transition: 0.25s var(--v2-ease);
  white-space: nowrap;
}
.sec-more:hover { color: var(--v2-brand); border-color: var(--v2-brand); }
.sec-more svg { width: 15px; height: 15px; }

@media (max-width: 760px) {
  .sec-hd { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 32px; }
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 26px;
  border-radius: 2px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: 0.24s var(--v2-ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }

.btn-primary {
  background: var(--v2-brand);
  color: #fff;
  border-color: var(--v2-brand);
}
.btn-primary:hover {
  background: var(--v2-brand-d);
  border-color: var(--v2-brand-d);
  color: #fff;
}

.btn-line {
  background: transparent;
  color: var(--v2-ink);
  border-color: #c9d2de;
}
.btn-line:hover {
  border-color: var(--v2-ink);
  color: var(--v2-ink);
  background: rgba(10, 21, 38, 0.03);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover {
  background: #fff;
  color: var(--v2-ink);
  border-color: #fff;
}

.btn--sm { height: 40px; padding: 0 18px; font-size: 13.5px; }
.btn--full { width: 100%; }

/* 旧按钮兼容 */
.btn-outline {
  background: transparent;
  color: var(--v2-ink);
  border: 1px solid #c9d2de;
  border-radius: 2px;
}
.btn-outline:hover { border-color: var(--v2-ink); color: var(--v2-ink); }

/* ---------- 顶部信息条 ---------- */
.hd-top {
  background: var(--v2-ink);
  color: #9dadc2;
  font-size: 12.5px;
  height: 38px;
  overflow: hidden;
}
.hd-top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.hd-top__l {
  display: flex;
  align-items: center;
  gap: 26px;
}
.hd-top__l a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #9dadc2;
  transition: color 0.2s;
}
.hd-top__l a:hover { color: #fff; }
.hd-top__l svg { width: 13px; height: 13px; opacity: 0.8; }
.hd-top__r {
  display: flex;
  align-items: center;
  gap: 18px;
}
.hd-top__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #7f8fa5;
}
.hd-top__tag i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3ecf8e;
  display: inline-block;
}

@media (max-width: 980px) {
  .hd-top { display: none; }
}

/* ---------- 主头部 ---------- */
.hd {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--v2-line);
  transition: box-shadow 0.25s;
}
.hd.is-stuck { box-shadow: 0 8px 28px -12px rgba(10, 21, 38, 0.22); }

.hd-main {
  display: flex;
  align-items: center;
  gap: 32px;
  /* 74 → 86：换成完整组合标之后，54px 高度下「RUISHENG / 睿晟」
     只有 7px 高，糊成一团；抬到 66px 才认得出字 */
  height: 86px;
}

.logo2 {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
}
.logo2 img,
.logo2 .logo2__mark {
  /* 换成完整组合标（图形 + RUISHENG + 睿晟）之后不能再塞进 40x40 方框：
     这标是 1.39:1 的竖版组合，方框会把它压成 40x29，字全糊。
     按高度给，宽度自适应，页头 74px 里留 10px 呼吸。 */
  width: auto;
  height: 66px;
  object-fit: contain;
  flex: none;
}
.logo2__txt {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  font-size: 17px;
  font-weight: 800;
  color: var(--v2-ink);
  letter-spacing: 0.01em;
}
.logo2__txt span {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--v2-mute);
  margin-top: 5px;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .logo2 img,
  .logo2 .logo2__mark { height: 46px; }
}

.hd-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  height: 100%;
}
.hd-nav > a,
.hd-nav > .nav-item > .nav-mega-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 74px;
  padding: 0 14px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--v2-ink-2);
  transition: color 0.2s;
  white-space: nowrap;
}
.hd-nav > a:hover,
.hd-nav > .nav-item:hover > .nav-mega-link,
.hd-nav > a.active,
.hd-nav > .nav-item.active > .nav-mega-link { color: var(--v2-brand); }

.hd-nav > a.active::after,
.hd-nav > .nav-item.active > .nav-mega-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  background: var(--v2-brand);
}

.hd-nav .caret { width: 12px; height: 12px; opacity: 0.55; transition: transform 0.25s; }
.nav-item:hover .caret { transform: rotate(180deg); opacity: 1; }

/* 语言下拉 */
.lang2 { position: relative; margin-left: 10px; }
.lang2__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 11px;
  border: 1px solid var(--v2-line);
  border-radius: 2px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--v2-ink-2);
  cursor: pointer;
  transition: 0.2s;
}
.lang2__btn:hover { border-color: #b9c4d2; }
/* 国旗图标：按钮里用当前语言国旗替代地球图标，菜单项前也各带一面 */
.lang2__btn svg:first-child { width: 19px; height: 13px; opacity: 1; }
.lang2__btn .flag,
.lang2__menu .flag {
  width: 19px;
  height: 13px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1);
  flex: none;
}
.lang2__menu .lg { display: flex; align-items: center; gap: 8px; }
.lang2__btn .caret { width: 11px; height: 11px; opacity: 0.5; }
.lang2__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 148px;
  background: #fff;
  border: 1px solid var(--v2-line);
  box-shadow: 0 18px 40px -18px rgba(10, 21, 38, 0.3);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: 0.2s var(--v2-ease);
  z-index: 20;
}
.lang2.open .lang2__menu { opacity: 1; visibility: visible; transform: none; }
.lang2__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  font-size: 13.5px;
  color: var(--v2-ink-2);
}
.lang2__menu a:hover { background: var(--v2-alt); }
.lang2__menu a.on { color: var(--v2-brand); font-weight: 700; }
.lang2__menu a em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--v2-mute);
  text-transform: uppercase;
}

.hd-nav > a.hd-cta,
.hd-cta {
  flex: none;
  margin-left: 14px;
  height: 40px;
  padding: 0 20px;
  align-self: center;
}

/* 移动端菜单按钮 */
.hd-burger {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  cursor: pointer;
  border: 0;
  background: none;
}
.hd-burger span {
  display: block;
  width: 20px;
  height: 1.6px;
  background: var(--v2-ink);
  transition: 0.25s;
}
.hd-burger.on span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.hd-burger.on span:nth-child(2) { opacity: 0; }
.hd-burger.on span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

@media (max-width: 1080px) {
  .hd-cta { display: none; }
  .hd-nav {
    position: fixed;
    /* 74 → 86：.hd 换了组合标之后头部是 86 高，这里跟着改，
       否则菜单顶部会压在 header 下沿上 */
    inset: 86px 0 auto 0;
    /* height:auto 必须显式写。桌面规则的 height:100% 在 .hd 带 backdrop-filter
       时会以 header 高度为基准算出 86px，整块菜单只剩一条、其余要滚动才能看到 */
    height: auto;
    max-height: calc(100vh - 86px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--v2-line);
    padding: 8px var(--v2-gut) 28px;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: 0.22s var(--v2-ease);
    box-shadow: 0 24px 40px -20px rgba(10, 21, 38, 0.3);
  }
  .hd-nav.open { opacity: 1; visibility: visible; transform: none; }
  .hd-nav > a,
  .hd-nav > .nav-item > .nav-mega-link {
    height: 52px;
    padding: 0;
    border-bottom: 1px solid var(--v2-line-2);
    justify-content: space-between;
    font-size: 15px;
  }
  .hd-nav > a.active::after,
  .hd-nav > .nav-item.active > .nav-mega-link::after { display: none; }
  .nav-item { width: 100%; }
  .mega-panel { position: static !important; display: none; box-shadow: none; border: 0; }
  .nav-item.open .mega-panel { display: block; }
  .mega-inner { padding: 10px 0 16px !important; display: block !important; }
  .lang2 { margin: 18px 0 0; }
  .hd-burger { display: flex; }
}

/* 下拉面板重绘 —— 结构是「左分类卡 + 右更多」两栏，
   不是扁平卡片流，所以用 2 列栅格（1fr + 固定侧栏）而不是 repeat(4,1fr)。 */
.nav-item { position: relative; height: 100%; display: flex; align-items: center; }
.mega-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 900px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid var(--v2-line);
  border-top: 2px solid var(--v2-ink);
  border-radius: 0;
  box-shadow: 0 32px 70px -32px rgba(10, 21, 38, 0.42);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s var(--v2-ease);
  z-index: 30;
}
.nav-item:hover .mega-panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* 移动端复位（必须写在上面的桌面规则之后）：
   桌面态面板是「固定 900px 宽 + translateX(-50%) 居中」，而上面那条 @media(max-width:1080px)
   出现在 .mega-panel 基础规则之前，同优先级下会被基础规则盖回去，
   结果是手机里展开的二级菜单偏出屏幕左半边，只剩右缘一条。 */
@media (max-width: 1080px) {
  .hd-nav .nav-item > .mega-panel {
    position: static !important;
    display: none;
    width: auto;
    max-width: none;
    transform: none;
    left: auto;
    top: auto;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: 0;
    padding: 10px 0 4px;
  }
  .hd-nav .nav-item.open > .mega-panel { display: block; }
  .hd-nav .nav-item > .mega-panel .mega-inner { display: block !important; padding: 10px 0 16px !important; }
  .hd-nav .nav-item > .mega-panel .mega-main { padding: 8px 0 0 !important; }
  .hd-nav .nav-item > .mega-panel .mega-side {
    border-left: 0;
    border-top: 1px solid var(--v2-line-2);
    padding: 12px 0 0;
    background: transparent;
  }
  .hd-nav .nav-item > .mega-panel .mega-cats { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .hd-nav .nav-item > .mega-panel:has(.mega-card__t) .mega-inner { padding: 8px 0 12px !important; }
}

/* 兜底：v1 样式（style.css）里 .mega-panel 默认 display:none，只有 .nav-item.has-mega
   才会在 hover 时 display:block。选中栏目那一项如果因为模板或替换顺序丢了 has-mega，
   下拉就整块消失（2026-10-26 线上问题：进产品页后「产品服务」下拉打不开）。
   这里在桌面端直接放行有内容的面板，显示/隐藏仍交给上面的 opacity/visibility 动画。 */
@media (min-width: 1081px) {
  .hd-nav > .nav-item > .mega-panel:has(.mega-card) { display: block; }
}

.mega-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 236px;
  gap: 0;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* 左：分类卡 */
.mega-main { padding: 26px 28px 28px; min-width: 0; }
.mega-col-title {
  margin: 0 0 16px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-mute);
}
.mega-cats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  flex-wrap: nowrap;
}
.mega-cats .mega-card { width: auto !important; }

/* 「关于我们」下拉是 4 个纯文字入口（模板里写死，不带缩略图）。
   v2 的 .mega-inner 内边距被压成 0，这些卡片就会糊成一条白条、行距挤在一起，
   单独给它们补内边距和行高，做成两列文字入口。 */
.mega-panel:has(.mega-card__t) .mega-inner {
  grid-template-columns: 1fr 1fr !important;
  padding: 22px 24px 24px !important;
  gap: 4px 10px;
}
.mega-panel:has(.mega-card__t) .mega-card {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 14.5px;
  color: var(--v2-ink-2);
}
.mega-panel:has(.mega-card__t) .mega-card:hover { background: #f2f6fb; color: var(--v2-brand); }

.mega-card {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  transition: 0.2s;
}
.mega-card:hover { background: none; border-color: transparent; }
/* 底色用纯白：分类图一半是白底渲染图、一半是实拍照片。
   之前用浅灰 + mix-blend-mode:multiply 融合白边，但 blend 的混合基准受
   祖先 stacking context 影响（英文站带 backdrop-filter 的页头下直接失效，
   图整片消失），换成白底最稳，两边表现一致。 */
.mega-card-img {
  height: auto;
  aspect-ratio: 4 / 3;
  margin-bottom: 11px;
  border: 1px solid var(--v2-line);
  border-radius: 0;
  background: #fff;
  overflow: hidden;
}
.mega-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.45s var(--v2-ease);
}
.mega-card:hover .mega-card-img { border-color: var(--v2-brand); }
.mega-card:hover .mega-card-img img { transform: scale(1.045); }

.mega-card-name {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--v2-ink);
}
.mega-card:hover .mega-card-name { color: var(--v2-brand); }
.mega-card-desc {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--v2-mute);
}

/* 右：更多链接 */
.mega-side {
  background: var(--v2-alt);
  border-left: 1px solid var(--v2-line);
  padding: 26px 22px 28px;
  width: auto;
  flex: none;
}
.mega-side .mega-side-title {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-mute);
}
.mega-side a {
  display: block;
  padding: 8px 0;
  font-size: 13.5px;
  color: var(--v2-ink-2);
  border-bottom: 1px solid var(--v2-line-2);
  transition: 0.2s;
}
.mega-side a:hover { color: var(--v2-brand); }
.mega-side .mega-side-cta {
  margin-top: 18px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 0;
  border-radius: 0;
  background: var(--v2-brand);
  color: #fff;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.mega-side .mega-side-cta:hover { background: #b13c19; color: #fff; }

/* ---------- 首屏 ---------- */
.hero-v2 {
  position: relative;
  /* 首屏从「整屏铺车间实拍」改成「按 1920×760 比例的机型横幅」：
     图片是设计好的构图（左文案右机器），必须尽量完整呈现，
     所以高度跟宽度走（41vw），再用 100vh 兜住矮屏，最高 780。
     41vw ≈ 760/1920 多一点余量，cover 只裁掉不到 4%。 */
  height: clamp(480px, min(calc(100vh - 196px), 41vw), 780px);
  overflow: hidden;
  background: #060b12;
}
.hero-v2__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s var(--v2-ease);
}
.hero-v2__slide.on { opacity: 1; }
.hero-v2__slide picture { display: block; width: 100%; height: 100%; }
.hero-v2__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 机器在画面右侧 47%~97%，裁切时优先保住机器，让左侧文案区的空白被裁掉 */
  object-position: 72% center;
  transform: scale(1.02);
  transition: transform 8s linear;
}
.hero-v2__slide.on img { transform: scale(1); }
.hero-v2__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 14, 26, 0.72) 0%, rgba(6, 14, 26, 0.45) 38%, rgba(6, 14, 26, 0.05) 66%, rgba(6, 14, 26, 0) 100%),
    linear-gradient(0deg, rgba(6, 11, 18, 0.55) 0%, rgba(6, 11, 18, 0) 42%);
}
.hero-v2__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
}
.hero-v2__inner {
  max-width: 760px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--v2-ease) 0.12s, transform 0.7s var(--v2-ease) 0.12s;
}
.hero-v2__slide.on .hero-v2__inner { opacity: 1; transform: none; }
.hero-v2__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.85;
  margin-bottom: 22px;
}
.hero-v2__kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--v2-brand-l);
}
.hero-v2__kicker b {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 12px;
  letter-spacing: 0.04em;
  text-transform: none;
}
.hero-v2__title {
  font-size: clamp(34px, 3.9vw, 66px);
  line-height: 1.16;
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}
.hero-v2__title em {
  font-style: normal;
  color: #ffb08e;
}
.hero-v2__desc {
  font-size: clamp(14.5px, 1.1vw, 18px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
  max-width: 590px;
  margin-bottom: 34px;
}
.hero-v2__btns { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-v2__ctrl {
  position: absolute;
  z-index: 5;
  bottom: 38px;
  /* 与 .wrap 右缘对齐：左下已让给「看视频」入口，控件固定在右下，
     不再跟文案块抢位置 */
  right: max(var(--v2-gut), calc((100% - var(--v2-max)) / 2 + var(--v2-gut)));
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-v2__arrow {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.22s;
  backdrop-filter: blur(4px);
  border-radius: 50%;
}
.hero-v2__arrow:hover { background: #fff; color: var(--v2-ink); border-color: #fff; }
.hero-v2__arrow svg { width: 17px; height: 17px; }
.hero-v2__dots { display: flex; align-items: center; gap: 8px; }
.hero-v2__dots button {
  width: 26px;
  height: 2px;
  background: rgba(255, 255, 255, 0.34);
  border: 0;
  cursor: pointer;
  transition: 0.3s;
  padding: 0;
}
.hero-v2__dots button.on { background: #fff; width: 44px; }

/* 首屏「看视频」入口：圆形播放键 + 两行说明，点击开全屏弹层 */
.hero-v2__film {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.hero-v2__film-ic {
  position: relative;
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: rgba(9, 17, 29, 0.55);
  box-shadow: 0 0 0 4px rgba(8, 14, 24, 0.28), 0 8px 26px -10px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  transition: background 0.28s var(--v2-ease), border-color 0.28s var(--v2-ease), transform 0.28s var(--v2-ease);
}
.hero-v2__film-ic::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  animation: vfilmPulse 3s var(--v2-ease) infinite;
}
@keyframes vfilmPulse {
  0% { transform: scale(1); opacity: 0.5; }
  65%, 100% { transform: scale(1.62); opacity: 0; }
}
.hero-v2__film-ic svg { width: 19px; height: 19px; margin-left: 3px; }
.hero-v2__film-tx { display: flex; flex-direction: column; gap: 3px; }
.hero-v2__film-tx b {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
}
.hero-v2__film-tx i {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}
.hero-v2__film:hover .hero-v2__film-ic,
.hero-v2__film:focus-visible .hero-v2__film-ic {
  background: var(--v2-brand);
  border-color: var(--v2-brand);
  transform: scale(1.05);
}
.hero-v2__film:focus-visible { outline: none; }

/* 首屏底部数据条 */
.hero-stats {
  position: relative;
  z-index: 6;
  background: #fff;
  border-bottom: 1px solid var(--v2-line);
}
.hero-stats__in {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.hero-stat {
  padding: 26px 8px 26px 0;
  border-left: 1px solid var(--v2-line);
  padding-left: 32px;
}
.hero-stat:first-child { border-left: 0; padding-left: 0; }
.hero-stat b {
  /* 数字 + 单位必须挤在一行：原来 b 是 block、里面的 span 又被下面那条
     .hero-stat span 规则改成块级，结果 "+"/"年+" 掉到第二行，数字区看着很散 */
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: clamp(24px, 2.1vw, 34px);
  font-weight: 700;
  color: var(--v2-ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.hero-stat b span {
  display: inline;
  margin: 0;
  font-size: inherit;
  color: inherit;
  letter-spacing: inherit;
}
.hero-stat b i { font-style: normal; color: var(--v2-brand); font-size: 0.6em; margin-left: 2px; }
.hero-stat > span {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--v2-mute);
  letter-spacing: 0.02em;
}

@media (max-width: 860px) {
  /* 窄屏：横版横幅只能露出机器中段，改成「上方留图、下方压文案」的竖构图 */
  .hero-v2 {
    height: 132vw;
    min-height: 480px;
    max-height: 660px;
  }
  .hero-v2__slide img { object-position: 76% center; }
  .hero-v2__slide::after {
    background: linear-gradient(180deg, rgba(6, 11, 18, 0.5) 0%, rgba(6, 11, 18, 0.82) 46%, rgba(6, 11, 18, 0.96) 100%);
  }
  .hero-v2__body { align-items: flex-end; padding-bottom: 88px; }
  .hero-v2__inner { max-width: 100%; }
  .hero-v2__title { font-size: clamp(26px, 7.6vw, 34px); }
  .hero-v2__desc { display: none; }
  .hero-v2__btns .btn-ghost { display: none; }
  .hero-v2__btns .btn { width: 100%; justify-content: center; }
  .hero-v2__kicker b { display: none; }
  .hero-v2__ctrl { right: var(--v2-gut); bottom: 26px; }
  .hero-v2__arrow { width: 40px; height: 40px; }
  .hero-stats__in { grid-template-columns: 1fr 1fr; }
  .hero-stat { padding: 18px 0 18px 18px; }
  .hero-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .hero-stat:nth-child(n + 3) { border-top: 1px solid var(--v2-line); }
}

/* ---------- 产品卡片 ---------- */
.pgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--v2-line);
  border: 1px solid var(--v2-line);
}
.pcard {
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: 0.3s var(--v2-ease);
  position: relative;
}
.pcard:hover { background: #fff; box-shadow: 0 24px 50px -30px rgba(10, 21, 38, 0.4); z-index: 2; }
.pcard__img {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: #f7f9fc;
  overflow: hidden;
}
.pcard__img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.5s var(--v2-ease);
}
.pcard:hover .pcard__img img { transform: scale(1.045); }
.pcard__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 4px 9px;
  background: var(--v2-ink);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pcard__body {
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pcard__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--v2-ink);
  letter-spacing: -0.01em;
}
.pcard__sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--v2-mute);
  line-height: 1.68;
  min-height: 44px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard__specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 16px 0 0;
  border-top: 1px solid var(--v2-line-2);
  padding-top: 14px;
}
.pcard__specs div { padding-right: 8px; min-width: 0; }
.pcard__specs b {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--v2-ink-2);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcard__specs span {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--v2-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pcard__link {
  margin-top: auto;
  padding-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--v2-ink);
}
.pcard__link svg { width: 14px; height: 14px; transition: transform 0.25s; }
.pcard:hover .pcard__link { color: var(--v2-brand); }
.pcard:hover .pcard__link svg { transform: translateX(3px); }

@media (max-width: 1024px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pgrid { grid-template-columns: 1fr; } }

/* ---------- 优势（编号列表） ---------- */
.adv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.adv {
  padding: 34px 30px 34px 0;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  padding-left: 30px;
}
.adv:first-child { border-left: 0; padding-left: 0; }
.adv__n {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--v2-brand-l);
  margin-bottom: 18px;
  display: block;
}
.adv h3 {
  font-size: 17px;
  color: #fff;
  margin-bottom: 12px;
  font-weight: 600;
}
.adv p {
  font-size: 13.5px;
  line-height: 1.78;
  color: #93a2b5;
}
@media (max-width: 900px) {
  .adv-grid { grid-template-columns: 1fr 1fr; }
  .adv { padding: 26px 20px 26px 0; }
  .adv:nth-child(3) { border-left: 0; padding-left: 0; }
  .adv:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 26px; }
}
@media (max-width: 560px) {
  .adv-grid { grid-template-columns: 1fr; }
  .adv { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .adv:first-child { border-top: 0; }
}

/* ---------- 工厂实力 ---------- */
.fac {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
}
.fac__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 220px 160px;
  gap: 12px;
}
.fac__media figure {
  overflow: hidden;
  background: var(--v2-alt-2);
  position: relative;
}
.fac__media figure:first-child { grid-column: 1 / -1; }
.fac__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--v2-ease);
}
.fac__media figure:hover img { transform: scale(1.05); }
.fac__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 30px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--v2-line);
}
.fac__fact b {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--v2-ink);
  letter-spacing: -0.02em;
}
.fac__fact span {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--v2-mute);
}
@media (max-width: 980px) {
  .fac { grid-template-columns: 1fr; gap: 32px; }
  .fac__media { grid-template-rows: 180px 130px; }
}

/* ---------- 深色模块统一照片底 ---------- */
/* 页面里三块深色叙事区各用一张不同的实拍：关于=走廊远景(中性)、
   为什么选=机器全景(偏冷)、询盘=机器特写(偏暖)。
   全都压暗到只剩轮廓，文字始终是主角；色调差异让同厂照片看起来不重复。 */
.sec-photo {
  position: relative;
  isolation: isolate;
  background-size: cover;
  background-position: center 44%;
  background-repeat: no-repeat;
}
.sec-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 11, 18, 0.94) 0%, rgba(6, 11, 18, 0.8) 30%, rgba(6, 11, 18, 0.83) 66%, rgba(6, 11, 18, 0.92) 100%),
    linear-gradient(96deg, rgba(6, 11, 18, 0.58) 0%, rgba(6, 11, 18, 0.26) 56%, rgba(6, 11, 18, 0.4) 100%);
}
.sec-photo--why { background-image: url("../images/v2/factory/why-bg.webp"); }

/* 照片底上的浅灰小字容易糊，统一提亮并加一层极轻的投影 */
.sec-photo .sec-title,
.aboutx .aboutx__t { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); }
.sec-photo .sec-lead {
  color: rgba(214, 224, 236, 0.74);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.sec-photo .adv h3 { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.sec-photo .adv p {
  color: rgba(214, 224, 236, 0.72);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.sec-photo .adv-grid,
.sec-photo .adv { border-color: rgba(255, 255, 255, 0.2); }

/* ---------- 首页 · 关于睿晟 ---------- */
/* 原来这里是「制造能力」：左边 3 张图拼贴，其中两张车间图是同一排机器，
   而且 hero 轮播已经用过同样三张，重复感很重；右边 2×2 数据格又和 hero
   下方的数据条撞。改成：上方编辑式两栏（左标题 / 右简介），下方横向发展历程轴。 */
.sec.aboutx {
  position: relative;
  background: url("../images/v2/factory/floor-bg.webp") center 44% / cover no-repeat;
  isolation: isolate;
}
/* 纵向压光：上方留一点窗户亮度，越往下越沉，时间轴落在最暗处最清楚 */
.sec.aboutx::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 11, 18, 0.94) 0%, rgba(6, 11, 18, 0.8) 26%, rgba(6, 11, 18, 0.83) 62%, rgba(6, 11, 18, 0.92) 100%),
    linear-gradient(96deg, rgba(6, 11, 18, 0.58) 0%, rgba(6, 11, 18, 0.26) 58%, rgba(6, 11, 18, 0.4) 100%);
  pointer-events: none;
}
.aboutx__hd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 512px;
  gap: 92px;
  align-items: start;
}
/* 让右栏正文首行与标题首行齐平（跳过 eyebrow 占的高度），
   否则 align-items:end 会把整段文字顶到标题上方，右上角变成一块孤岛 */
.aboutx__body { padding-top: 36px; }
.aboutx__t {
  font-size: clamp(30px, 3.7vw, 52px);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.032em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.aboutx__t em { font-style: normal; color: var(--v2-brand-l); }
.aboutx__body p {
  font-size: 14.5px;
  line-height: 1.9;
  color: rgba(233, 239, 246, 0.78);
  text-wrap: pretty;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.aboutx__body p + p { margin-top: 15px; }
.aboutx__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  transition: color 0.2s;
}
.aboutx__more svg { width: 15px; height: 15px; transition: transform 0.25s var(--v2-ease); }
.aboutx__more:hover { color: var(--v2-brand-l); }
.aboutx__more:hover svg { transform: translateX(4px); }

.aboutx__tl {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 70px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.aboutx__tl li {
  position: relative;
  padding: 32px 44px 0 0;
}
/* 一根从起点走到 2025 的细线，让时间轴有方向 */
.aboutx__tl::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 75%;
  height: 1px;
  background: linear-gradient(90deg, rgba(232, 106, 66, 0.16), var(--v2-brand-l));
}
.aboutx__tl li::before {
  content: "";
  position: absolute;
  top: -4.5px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0a1526;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}
/* 圆点走到最新一站：最后一项实心，前面留空心，读起来像进度 */
.aboutx__tl li:last-child { padding-right: 0; }
.aboutx__tl li:last-child::before {
  background: var(--v2-brand-l);
  border-color: var(--v2-brand-l);
  box-shadow: 0 0 0 4px rgba(232, 106, 66, 0.18);
}
.aboutx__y {
  display: block;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.aboutx__en {
  display: block;
  margin-top: 9px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.46);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.aboutx__tt {
  display: block;
  margin-top: 15px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
}
.aboutx__d {
  display: block;
  margin-top: 7px;
  font-size: 12.8px;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* 窄屏：横图 cover 只能在竖屏里截到中间窄窄一条，看不出是车间。
   三块深色区统一换成竖裁横幅贴顶 + 下方纯深色内容。
   图高 = 屏宽 × 840/900 ≈ 0.93 屏宽，遮罩按像素收口在图带下沿。 */
@media (max-width: 900px) {
  .sec-photo {
    background-size: 100% auto;
    background-position: center top;
    padding-top: 378px;
  }
  .sec-photo--why { background-image: url("../images/v2/factory/why-bg-m.webp"); }
  .sec-photo::before {
    background:
      linear-gradient(180deg, rgba(6, 11, 18, 0.1) 0px, rgba(6, 11, 18, 0.34) 210px, #060b12 372px, #060b12 100%);
  }
}

/* 窄屏：横图 cover 只能截到走廊中间窄窄一条，看不出是车间。
   换成竖裁横幅贴顶，下面接纯深色内容区。 */
@media (max-width: 900px) {
  .sec.aboutx {
    background-color: #060b12;
    background-image: url("../images/v2/factory/floor-bg-m.webp");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    padding-top: 386px;
  }
  /* 图带高 = 屏宽 × 828/900，遮罩按像素收口，压在 372px 处刚好接上纯色 */
  .sec.aboutx::before {
    background:
      linear-gradient(180deg, #0a1526 0px, rgba(10, 21, 38, 0) 108px),
      linear-gradient(180deg, rgba(6, 11, 18, 0.1) 0px, rgba(6, 11, 18, 0.32) 200px, #060b12 366px, #060b12 100%);
  }
}

@media (max-width: 1080px) {
  .aboutx__hd { grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; }
  .aboutx__body { padding-top: 0; }
  .aboutx__tl {
    display: block;
    margin-top: 48px;
    border-top: 0;
  }
  .aboutx__tl::after { display: none; }
  .aboutx__tl li {
    padding: 0 0 26px 28px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
  }
  .aboutx__tl li::before { top: 7px; left: -4.5px; }
  .aboutx__y { font-size: 24px; }
  .aboutx__en { margin-top: 6px; }
  .aboutx__tt { margin-top: 10px; }
  .aboutx__tl li:last-child { padding-bottom: 0; }
}
@media (max-width: 640px) {
  .aboutx__t { font-size: 28px; }
  .aboutx__tl li { padding-left: 22px; }
  .aboutx__y { font-size: 21px; }
  .aboutx__d { font-size: 12.5px; }
}

/* ---------- 应用行业 ---------- */
.appgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.appcard {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--v2-ink-2);
}
.appcard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--v2-ease);
}
.appcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(6, 14, 26, 0.82) 0%, rgba(6, 14, 26, 0.1) 55%, transparent 100%);
  transition: 0.3s;
}
.appcard:hover img { transform: scale(1.06); }
.appcard__t {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  z-index: 2;
  color: #fff;
}
.appcard__t b {
  display: block;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.appcard__t span {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 900px) { .appgrid { grid-template-columns: 1fr 1fr; gap: 12px; } }
@media (max-width: 560px) { .appgrid { grid-template-columns: 1fr; } }

/* ---------- 资质 ---------- */
.certs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cert {
  background: #fff;
  border: 1px solid var(--v2-line);
  padding: 12px;
  transition: 0.25s;
}
.cert:hover { box-shadow: 0 18px 40px -26px rgba(10, 21, 38, 0.35); }
.cert img {
  width: 100%;
  aspect-ratio: 3 / 4.25;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--v2-line-2);
}
.cert b {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--v2-ink-2);
}
.cert span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--v2-mute);
}
@media (max-width: 900px) { .certs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .certs { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq2 { border-top: 1px solid var(--v2-line); }
.faq2 details {
  border-bottom: 1px solid var(--v2-line);
  padding: 0;
}
.faq2 summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--v2-ink);
  transition: color 0.2s;
}
.faq2 summary::-webkit-details-marker { display: none; }
.faq2 summary:hover { color: var(--v2-brand); }
.faq2 summary i {
  flex: none;
  width: 22px;
  height: 22px;
  border: 1px solid var(--v2-line);
  border-radius: 50%;
  position: relative;
  transition: 0.25s;
}
.faq2 summary i::before,
.faq2 summary i::after {
  content: "";
  position: absolute;
  background: var(--v2-ink);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.faq2 summary i::before { width: 9px; height: 1.4px; }
.faq2 summary i::after { width: 1.4px; height: 9px; transition: 0.25s; }
.faq2 details[open] summary i::after { transform: translate(-50%, -50%) scaleY(0); }
.faq2 details[open] summary { color: var(--v2-brand); }
.faq2 details > div {
  padding: 0 40px 24px 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--v2-body);
}

/* ---------- 首页 FAQ（左说明 + 右问答两栏） ---------- */
/* 原先是单个 920px 的折叠列表贴在 1320px 容器左侧，右边空一大块、
   标题的「全部问题」和列表右缘也对不上。改成两栏：左边标题 + 联系卡，右边带序号的问答。 */
.faqx__grid {
  display: grid;
  grid-template-columns: 336px minmax(0, 1fr);
  gap: 88px;
  align-items: start;
}
.faqx__side {
  position: sticky;
  top: 104px;
}
.faqx__t {
  font-size: 40px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--v2-ink);
}
.faqx__lead {
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--v2-body);
  max-width: 302px;
}
.faqx__more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-ink);
  transition: color 0.2s;
}
.faqx__more svg {
  width: 15px;
  height: 15px;
  transition: transform 0.25s var(--v2-ease);
}
.faqx__more:hover { color: var(--v2-brand); }
.faqx__more:hover svg { transform: translateX(4px); }

.faqx__card {
  margin-top: 40px;
  padding: 24px 24px 20px;
  background: var(--v2-alt);
  border-radius: 16px;
}
.faqx__card > b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--v2-ink);
  letter-spacing: -0.01em;
}
.faqx__card > p {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--v2-mute);
}
.faqx__rows {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e2e7ee;
}
.faqx__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 0;
  font-size: 13px;
}
.faqx__row dt { flex: none; color: var(--v2-mute); }
.faqx__row dd {
  margin: 0;
  color: var(--v2-ink);
  font-weight: 600;
  text-align: right;
  word-break: break-all;
}
.faqx__row dd a { color: inherit; }
.faqx__row dd a:hover { color: var(--v2-brand); }
.faqx__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  margin-top: 18px;
  border-radius: 999px;
  background: var(--v2-ink);
  color: #fff !important;
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.2s;
}
.faqx__cta svg { width: 14px; height: 14px; }
.faqx__cta:hover { background: var(--v2-brand); }

.faqx__list { border-top: 1px solid var(--v2-line); }
.faqx__item {
  border-bottom: 1px solid var(--v2-line);
}
.faqx__item > summary {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 28px 0 28px;
  cursor: pointer;
  list-style: none;
  transition: padding 0.3s var(--v2-ease);
}
.faqx__item > summary::-webkit-details-marker { display: none; }
.faqx__item > summary:focus-visible {
  outline: 2px solid var(--v2-brand);
  outline-offset: 4px;
  border-radius: 3px;
}
.faqx__n {
  flex: none;
  width: 48px;
  padding-top: 3px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: #a7b3c2;
  transition: color 0.25s;
}
.faqx__q {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--v2-ink);
  transition: color 0.2s;
}
.faqx__item > summary:hover .faqx__q { color: var(--v2-brand); }
.faqx__item > summary i {
  flex: none;
  position: relative;
  width: 28px;
  height: 28px;
  margin-left: 20px;
  margin-top: -1px;
  border: 1px solid var(--v2-line);
  border-radius: 50%;
  transition: 0.25s var(--v2-ease);
}
.faqx__item > summary i::before,
.faqx__item > summary i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--v2-ink-2);
  transition: transform 0.28s var(--v2-ease), background 0.25s;
}
.faqx__item > summary i::before {
  width: 10px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}
.faqx__item > summary i::after {
  width: 1.5px;
  height: 10px;
  transform: translate(-50%, -50%);
}
.faqx__item > summary:hover i {
  border-color: var(--v2-brand);
  background: var(--v2-brand);
}
.faqx__item > summary:hover i::before,
.faqx__item > summary:hover i::after { background: #fff; }
.faqx__item[open] > summary { padding-bottom: 10px; }
.faqx__item[open] .faqx__n { color: var(--v2-brand); }
.faqx__item[open] .faqx__q { color: var(--v2-brand); }
.faqx__item[open] > summary i {
  border-color: var(--v2-brand);
  background: var(--v2-brand);
}
.faqx__item[open] > summary i::before,
.faqx__item[open] > summary i::after { background: #fff; }
.faqx__item[open] > summary i::after { transform: translate(-50%, -50%) rotate(90deg); }

.faqx__a {
  max-width: 840px; /* 1920 屏上 wrap 放宽到 1520，不限宽的话每行 70 多个字读起来累 */
  padding: 0 56px 30px 48px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--v2-body);
  animation: faqxIn 0.32s var(--v2-ease) both;
}
@keyframes faqxIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1180px) {
  .faqx__grid { grid-template-columns: 300px minmax(0, 1fr); gap: 56px; }
  .faqx__t { font-size: 34px; }
  .faqx__a { padding-right: 20px; }
}
@media (max-width: 940px) {
  .faqx__grid { grid-template-columns: 1fr; gap: 34px; }
  .faqx__side { position: static; }
  .faqx__t { font-size: 30px; }
  .faqx__t br { display: none; }
  .faqx__lead { max-width: none; }
  .faqx__card { margin-top: 30px; }
  .faqx__cta { max-width: 240px; }
  .faqx__q { font-size: 15.5px; }
  .faqx__a { padding: 0 0 22px 36px; }
  .faqx__n { width: 36px; }
}
@media (max-width: 560px) {
  .faqx__item > summary { padding: 20px 0; }
  .faqx__item[open] > summary { padding-bottom: 8px; }
  .faqx__n { width: 30px; padding-top: 4px; font-size: 11px; }
  .faqx__q { font-size: 14.5px; }
  .faqx__a { padding-left: 30px; font-size: 13.5px; line-height: 1.85; }
  .faqx__item > summary i { width: 24px; height: 24px; margin-left: 12px; }
  .faqx__card { padding: 22px 18px 18px; }
}

/* ---------- 底部 CTA（详情页 / 联系页）：深色 + 车间实拍背景 ----------
   原来是一条纯深蓝渐变，跟首页的「询盘区」「关于睿晟」不一致。
   这里沿用首页 .inq 的做法：深色底 + 实拍图 + 多层渐变遮罩，
   文字加投影保证可读性。素材：工厂车间全景（O://工厂素材//工厂图片//03.jpg）。 */
.cta-section {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--v2-ink) url("../images/v2/factory/cta-bg.webp?v=20261027a") center 52% / cover no-repeat;
  padding: 76px 0;
}
.cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 84% 22%, rgba(200, 69, 30, 0.28), transparent 58%),
    linear-gradient(180deg, rgba(6, 11, 18, 0.92) 0%, rgba(6, 11, 18, 0.82) 40%, rgba(6, 11, 18, 0.93) 100%),
    linear-gradient(96deg, rgba(6, 11, 18, 0.5) 0%, rgba(6, 11, 18, 0.22) 58%, rgba(6, 11, 18, 0.4) 100%);
}
.cta-section .container { position: relative; z-index: 2; }
.cta-section h2 {
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
  letter-spacing: -0.02em;
}
.cta-section p {
  color: rgba(226, 234, 244, 0.82);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  opacity: 1;
}
@media (max-width: 768px) {
  .cta-section {
    background-image: url("../images/v2/factory/cta-bg-m.webp?v=20261027a");
    background-position: center 50%;
    padding: 56px 0;
  }
  .cta-section h2 { font-size: 1.5rem; }
}

/* ---------- 询盘区 ---------- */
.inq {
  background: var(--v2-ink) url("../images/v2/factory/inq-bg.webp") center 44% / cover no-repeat;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.inq::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 26%, rgba(200, 69, 30, 0.3), transparent 56%),
    linear-gradient(180deg, rgba(6, 11, 18, 0.9) 0%, rgba(6, 11, 18, 0.8) 38%, rgba(6, 11, 18, 0.92) 100%),
    linear-gradient(96deg, rgba(6, 11, 18, 0.48) 0%, rgba(6, 11, 18, 0.2) 60%, rgba(6, 11, 18, 0.36) 100%);
}
.inq .wrap { position: relative; z-index: 2; }
.inq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.inq__l h2 {
  font-size: clamp(24px, 2.4vw, 34px);
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.inq__l p {
  margin-top: 16px;
  color: rgba(214, 224, 236, 0.76);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  font-size: 14.5px;
  line-height: 1.8;
  max-width: 440px;
}
.inq__pts {
  margin-top: 26px;
  display: grid;
  gap: 12px;
}
.inq__pts li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(214, 224, 236, 0.8);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.inq__pts svg { width: 15px; height: 15px; color: #3ecf8e; flex: none; }

/* 窄屏询盘：横图 cover 在竖屏里只能截到中间一条，换竖裁横幅贴顶。
   必须写在 .inq 主规则之后，否则会被上面那条 background 简写覆盖。 */
@media (max-width: 900px) {
  .inq {
    background-image: url("../images/v2/factory/inq-bg-m2.webp");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    padding-top: 378px;
  }
  .inq::before {
    background:
      radial-gradient(circle at 78% 22%, rgba(200, 69, 30, 0.22), transparent 62%),
      linear-gradient(180deg, rgba(6, 11, 18, 0.04) 0px, rgba(6, 11, 18, 0.26) 220px, #060b12 372px, #060b12 100%);
  }
}

.form2 { display: grid; gap: 14px; }
.form2__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form2 label { display: block; }
.form2 input,
.form2 select,
.form2 textarea {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: rgba(9, 15, 24, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  border-radius: 2px;
  transition: 0.2s;
}
.form2 textarea { height: 92px; padding: 12px 14px; resize: vertical; }
.form2 input::placeholder,
.form2 textarea::placeholder { color: #7d8ea5; }
.form2 input:focus,
.form2 select:focus,
.form2 textarea:focus {
  outline: 0;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
}
.form2 select { color: #c3cedd; }
.form2 select option { color: #16243b; }
.form2__note { font-size: 11.5px; color: #7d8ea5; line-height: 1.7; }
.form2__ok {
  display: none;
  padding: 14px 16px;
  background: rgba(62, 207, 142, 0.12);
  border: 1px solid rgba(62, 207, 142, 0.4);
  color: #7fe3b6;
  font-size: 13.5px;
}
.form2.done .form2__ok { display: block; }

@media (max-width: 900px) {
  .inq__grid { grid-template-columns: 1fr; gap: 36px; }
  .form2__row { grid-template-columns: 1fr; }
}

/* ---------- 页脚 ---------- */
.ft {
  background: #060e1a;
  color: #8a99ad;
  padding: 72px 0 0;
  font-size: 13.5px;
}
.ft__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 52px;
}
/* 38 → 52：完整组合标的字高只有整体的 14%，38px 时「RUISHENG」不到 6px，糊了 */
.ft__brand img { height: 52px; width: auto; filter: brightness(0) invert(1); opacity: 0.92; }
.ft__brand p {
  margin-top: 18px;
  line-height: 1.85;
  color: #7f8ea3;
  max-width: 330px;
  font-size: 13px;
}
.ft h4 {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.ft ul { display: grid; gap: 11px; }
.ft ul a { color: #8a99ad; transition: color 0.2s; }
.ft ul a:hover { color: #fff; }
.ft__contact li {
  display: flex;
  gap: 10px;
  line-height: 1.7;
  color: #8a99ad;
}
.ft__contact svg { width: 15px; height: 15px; flex: none; margin-top: 3px; opacity: 0.6; }
.ft__social { display: flex; gap: 10px; margin-top: 20px; }
.ft__social a {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a99ad;
  transition: 0.2s;
}
.ft__social a:hover { background: #fff; color: #060e1a; border-color: #fff; }
.ft__social svg { width: 15px; height: 15px; }
.ft__bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #66758a;
}
.ft__bar a { color: #66758a; }
.ft__bar a:hover { color: #fff; }
.ft__links { display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 980px) {
  .ft__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}
@media (max-width: 600px) {
  .ft { padding-top: 52px; }
  .ft__grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- 右侧悬浮 ---------- */
.float2 {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 800;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.float2 a,
.float2 button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--v2-line);
  color: var(--v2-ink-2);
  box-shadow: 0 10px 26px -14px rgba(10, 21, 38, 0.4);
  cursor: pointer;
  transition: 0.22s;
  position: relative;
}
.float2 a:hover,
.float2 button:hover { background: var(--v2-ink); color: #fff; border-color: var(--v2-ink); transform: translateY(-2px); }
.float2 svg { width: 20px; height: 20px; }
.float2 .wa { background: #25d366; border-color: #25d366; color: #fff; }
.float2 .wa:hover { background: #1eb257; border-color: #1eb257; }
.float2__tip {
  position: absolute;
  right: calc(100% + 10px);
  white-space: nowrap;
  background: var(--v2-ink);
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
}
.float2 a:hover .float2__tip,
.float2 button:hover .float2__tip { opacity: 1; }
.float2__top { opacity: 0; visibility: hidden; }
.float2__top.show { opacity: 1; visibility: visible; }

@media (max-width: 860px) { .float2 { display: none; } }

/* 移动端底部固定条 */
.mbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 850;
  background: #fff;
  border-top: 1px solid var(--v2-line);
  box-shadow: 0 -8px 24px -14px rgba(10, 21, 38, 0.3);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  gap: 8px;
}
.mbar a {
  flex: 1;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 2px;
}
.mbar a svg { width: 17px; height: 17px; }
.mbar .m-wa { background: #25d366; color: #fff; }
.mbar .m-mail { background: var(--v2-ink); color: #fff; }
@media (max-width: 860px) {
  .mbar { display: flex; }
  body { padding-bottom: 60px; }
}

/* ---------- Cookie ---------- */
.ck {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 990;
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid var(--v2-line);
  box-shadow: 0 -10px 40px -20px rgba(10, 21, 38, 0.4);
  transform: translateY(110%);
  transition: transform 0.4s var(--v2-ease);
}
.ck.show { transform: none; }
.ck__in {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
}
.ck__txt { font-size: 13px; line-height: 1.7; color: var(--v2-body); flex: 1; }
.ck__txt a { color: var(--v2-brand); text-decoration: underline; }
.ck__btns { display: flex; gap: 10px; flex: none; }
.ck__btns button {
  height: 38px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid var(--v2-line);
  background: #fff;
  color: var(--v2-ink-2);
  transition: 0.2s;
}
.ck__btns button.primary { background: var(--v2-ink); border-color: var(--v2-ink); color: #fff; }
.ck__btns button:hover { opacity: 0.86; }
@media (max-width: 760px) {
  .ck__in { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 0; }
  .ck__btns { justify-content: flex-end; }
  .ck { bottom: 60px; }
}

/* ---------- 滚动进场 ---------- */
.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--v2-ease), transform 0.7s var(--v2-ease);
}
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  .hero-v2__slide img { transition: none; }
}

/* ============================================================
   内页通用（FAQ / 售后 / 隐私 / 关于我们）
   ============================================================ */

/* 内页头（不放大图，靠排版建立层级，加载更快也更克制） */
.pg-hero {
  background: var(--v2-ink);
  color: #fff;
  /* 与 .page-banner 拉平：同样的 400px 高度、内容垂直居中，
     内页之间切换时头图高度不会一跳一跳 */
  min-height: 400px;
  display: flex;
  align-items: center;
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}
.pg-hero > .wrap { width: 100%; }
.pg-hero::after {
  content: "";
  position: absolute;
  right: -10%;
  top: -40%;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(200, 69, 30, 0.22), transparent 62%);
  pointer-events: none;
}
.pg-hero .eyebrow { color: var(--v2-brand-l); }
.pg-h1 {
  font-size: clamp(30px, 3.3vw, 50px);
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.24;
  max-width: 24em;
  text-wrap: balance;
}
.pg-lead {
  margin-top: 18px;
  max-width: 700px;
  color: #93a2b5;
  font-size: 15px;
  line-height: 1.8;
}
@media (max-width: 760px) { .pg-hero { padding: 52px 0 44px; } }

/* FAQ 分组 */
/* 大宽屏下 FAQ 与其它内页一样铺满内容区：980 的窄栏在 1440 屏上
   和横幅、页脚左边缘对不齐，看着像没做完 */
.faq-page { max-width: none; }
.faq-group { margin-bottom: 52px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group__h {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-brand);
  margin-bottom: 6px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--v2-ink);
}

/* 流程步骤 */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--v2-line);
}
.step {
  padding: 30px 26px 30px 0;
  border-left: 1px solid var(--v2-line);
  padding-left: 26px;
  position: relative;
}
.step:first-child { border-left: 0; padding-left: 0; }
.step b {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--v2-brand);
  margin-bottom: 14px;
}
.step h3 { font-size: 17px; margin-bottom: 10px; }
.step p { font-size: 13.5px; line-height: 1.78; color: var(--v2-mute); }
.step__t {
  display: inline-block;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--v2-ink);
  border-bottom: 1px solid var(--v2-brand);
  padding-bottom: 2px;
}
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .step { padding: 22px 18px 22px 0; }
  .step:nth-child(3) { border-left: 0; padding-left: 0; }
  .step:nth-child(n + 3) { border-top: 1px solid var(--v2-line); }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .step { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--v2-line); }
  .step:first-child { border-top: 0; }
}

/* 服务卡片 */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--v2-line);
  border: 1px solid var(--v2-line);
}
.svc-card { background: #fff; padding: 30px 26px; }
.svc-card h3 { font-size: 16px; margin-bottom: 12px; }
.svc-card p { font-size: 13.5px; line-height: 1.8; color: var(--v2-mute); }
.svc-card b { color: var(--v2-brand); font-size: 15px; }
@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }

/* 长文（隐私政策等） */
.prose { max-width: 820px; }
.prose h2 {
  font-size: 19px;
  margin: 38px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--v2-line);
}
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 14.5px; line-height: 1.9; color: var(--v2-body); margin-bottom: 14px; }
.prose ul { margin: 0 0 16px 0; padding-left: 0; }
.prose ul li {
  position: relative;
  padding-left: 16px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--v2-body);
  margin-bottom: 8px;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 5px;
  height: 5px;
  background: var(--v2-brand);
}
.prose a { color: var(--v2-brand); text-decoration: underline; }
.prose__note { margin-top: 34px; font-size: 12.5px; color: var(--v2-mute); }

/* ============================================================
   内页横幅改造：原来是 320px 蓝色渐变 + 隐藏文字层（只能看烧好的成品图），
   现在改为左侧标题排版 + 右侧设备图衬底。这样每个内页都有可见 H1，
   运营改栏目名/描述即时生效，不用重新出图。
   ============================================================ */
.page-banner {
  height: auto;
  min-height: 400px;
  /* 配图是按 400 高 1:1 画的，不设 border-box 时 min-height:400 只约束内容盒，
     加上 64px 上下内边距横幅实际 528 高，图被放大 1.32 倍——机器边缘发虚。
     设成 border-box 后横幅就是 400，图按原尺寸渲染。 */
  box-sizing: border-box;
  margin-top: 0;
  display: flex;
  align-items: center;
  text-align: left;
  /* 纯色深底 + 一条极淡的斜向光带，替代原来的设备照片衬底：
     照片压在深色上又灰又花，产品页看起来"背景很乱" */
  background: var(--v2-ink);
  background-image: linear-gradient(104deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.045) 58%, rgba(255, 255, 255, 0) 74%);
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}
.page-banner::before { display: none; }

.page-banner-photo {
  /* 内页横幅不再用设备/车间照片衬底。照片半透明压在深色上会显出
     一排机器轮廓，看起来杂乱；产品页尤其明显。整层关掉，只留纯色。 */
  display: none;
}
/* 后台配了横幅图时（内联 background-image）这一层会显示，略微提亮避免发灰 */
.page-banner-photo[style*="background-image"] { filter: brightness(1.08) saturate(1.04); }
.page-banner-photo-veil {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 内页横幅底图走 .pb-art 通道（后台可换图）。遮罩只压住左侧文字区，
     右侧的设备/案例实景要看得清——之前右侧还压 52% 黑，机器全糊了看不清。
     参照「关于我们」页那版：左侧实、右侧透，逐段递减。 */
  background: linear-gradient(90deg,
    var(--v2-ink) 34%,
    rgba(10, 21, 38, 0.88) 48%,
    rgba(10, 21, 38, 0.52) 66%,
    rgba(10, 21, 38, 0.20) 86%,
    rgba(10, 21, 38, 0.12) 100%);
}

.page-banner-content {
  display: block;
  position: relative;
  z-index: 3;
  /* width:100% 不能省：横幅改成 flex 之后，内容块会按内容收缩成一条，
     margin:0 auto 就变成了"整块居中"，标题会飘到中间去 */
  width: 100%;
  max-width: var(--v2-max);
  margin: 0 auto;
  padding: 0 var(--v2-gut);
  text-align: left;
}
.page-banner h1,
.page-banner .pb-title {
  /* 限宽 + balance：横幅现在铺满 1320，长标题会拉成一整行再断，
     经常最后一个字孤零零掉到第二行 */
  max-width: 24em;
  text-wrap: balance;
  font-size: clamp(30px, 3.3vw, 50px);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 14px;
  max-width: 720px;
}
.page-banner p {
  font-size: 14.5px;
  line-height: 1.8;
  color: #93a2b5;
  opacity: 1;
  max-width: 620px;
}
.page-banner .breadcrumb {
  justify-content: flex-start;
  margin-top: 20px;
  font-size: 12.5px;
  color: #7d8ea5;
}
/* 面包屑在窄屏会被挤成「首/页」两行：短项不折行，长标题才允许换行 */
.page-banner .breadcrumb > a,
.page-banner .breadcrumb > span:not(:last-child) { white-space: nowrap; }
@media (max-width: 620px) {
  .page-banner .breadcrumb { flex-wrap: wrap; row-gap: 2px; }
}
.page-banner .breadcrumb a { color: #7d8ea5; }
.page-banner .breadcrumb a:hover { color: #fff; }
.page-banner .breadcrumb span:last-child { color: #c3cedd; }

/* 分类页：H1 与描述已在列表区（.cat-head），横幅不再重复一遍 */
body:has(.cat-head) .page-banner { min-height: 0; padding: 40px 0 34px; }
body:has(.cat-head) .page-banner p { display: none; }
body:has(.cat-head) .page-banner .breadcrumb { margin-top: 0; }
body:has(.cat-head) .page-banner-photo { opacity: 0.35; }

@media (max-width: 860px) {
  .page-banner { min-height: 0; padding: 46px 0 36px; }
  .page-banner-photo { width: 100%; opacity: 0.3; }
  .page-banner-photo-veil {
    background: linear-gradient(180deg, rgba(10, 21, 38, 0.92) 20%, rgba(10, 21, 38, 0.78) 100%);
  }
}

/* 详情页：不再用大横幅（页面本身已有产品名 H1，重复会变成两个 H1），
   缩成一条面包屑带，把首屏让给产品图和标题。 */
body[data-page="detail"] .page-banner {
  background: var(--v2-alt);
  padding: 14px 0;
  min-height: 0;
}
body[data-page="detail"] .page-banner::before,
body[data-page="detail"] .page-banner::after { display: none; }
body[data-page="detail"] .page-banner h1,
body[data-page="detail"] .page-banner .pb-title,
body[data-page="detail"] .page-banner p { display: none; }
body[data-page="detail"] .page-banner-photo,
body[data-page="detail"] .page-banner-photo-veil { display: none; }
body[data-page="detail"] .page-banner .breadcrumb {
  margin: 0;
  justify-content: flex-start;
  color: var(--v2-mute);
  font-size: 12.5px;
}
body[data-page="detail"] .page-banner .breadcrumb a { color: var(--v2-mute); }
body[data-page="detail"] .page-banner .breadcrumb a:hover { color: var(--v2-brand); }
body[data-page="detail"] .page-banner .breadcrumb span:last-child { color: var(--v2-ink-2); }

/* 旧版横幅底部的橙色装饰线，和新版扁平风格冲突，统一去掉 */
.page-banner::after { display: none; }

/* 横幅里的设备图：完整显示不裁切，向右侧淡出 */
.page-banner-photo {
  background-size: contain;
  background-position: right center;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 100%);
}
@media (max-width: 860px) {
  .page-banner-photo { -webkit-mask-image: none; mask-image: none; }
}

/* ==========================================================================
   产品详情页 v2
   目标：把「图 + 参数表 + 一个跳走按钮」的老电商页，改成工业装备常见的
   产品页结构——左图右信息、参数成块、看完参数就地留资、底部交叉推荐。
   所有规则都带 body[data-page="detail"] 或 .pd- 前缀，不影响其它页面。
   ========================================================================== */

body[data-page="detail"] .product-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: start;
}

/* 图库：白底 + 细边框，不带圆角（工业装备比圆角卡片更稳） */
body[data-page="detail"] .product-gallery {
  position: sticky;
  top: 96px;
  background: #f7f9fc;
  border: 1px solid var(--v2-line);
  border-radius: 0;
  padding: 26px;
}
body[data-page="detail"] .product-gallery img {
  width: 100%;
  max-height: 460px;
  object-fit: contain;
}

/* ---------- 实拍图集：主图 + 各角度缩略图（2026-10-26）----------
   原来详情页只有一张主图，看起来像「只有一个卖点」。
   现在主图下方是实拍缩略图条，点一下换图；右上角「看实拍」直接跳到视频。 */
body[data-page="detail"] .pd-gallery__main {
  position: relative;
  margin: 0;
}
body[data-page="detail"] .pd-gallery__play {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: rgba(12, 34, 66, 0.9);
  color: #fff;
  font-size: 13.5px;
  line-height: 1;
  text-decoration: none;
  transition: background 0.2s;
}
body[data-page="detail"] .pd-gallery__play svg { width: 15px; height: 15px; }
body[data-page="detail"] .pd-gallery__play:hover { background: var(--v2-brand); }
body[data-page="detail"] .pd-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
  margin-top: 16px;
}
body[data-page="detail"] .pd-gallery__thumbs:empty { display: none; }
body[data-page="detail"] .pd-gallery__thumb {
  position: relative;
  padding: 0;
  border: 1px solid var(--v2-line);
  background: #fff;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s;
}
body[data-page="detail"] .pd-gallery__thumb img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  display: block;
}
body[data-page="detail"] .pd-gallery__thumb:hover { border-color: var(--v2-ink-2); }
body[data-page="detail"] .pd-gallery__thumb.is-on {
  border-color: var(--v2-brand);
  box-shadow: inset 0 0 0 1px var(--v2-brand);
}

/* ---------- 实拍视频：放在首屏之后、参数之前 ---------- */
.pd-video {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}
/* 播放器外层：相对定位，好让「播放失败」提示盖在播放器上 */
.pd-videoplayer {
  position: relative;
}
.pd-video__media video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0b1220;
  object-fit: cover;
}
/* YouTube 嵌入（英文等其它语种）：与本地视频同样的比例与外框 */
.pd-videoplayer--yt iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #0b1220;
}
/* 播放失败提示（直链 403 / 签名过期 / hls 拉不到分片），盖在播放器上 */
.pd-video__fail {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 14, 24, 0.92);
  color: #cfd8e6;
  font-size: 14px;
  text-align: center;
}
.pd-video__note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--v2-mute);
}
.pd-video__pts {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.pd-video__pts li {
  display: grid;
  gap: 3px;
  padding-left: 14px;
  border-left: 2px solid var(--v2-line-2);
}
.pd-video__pts b { font-size: 15px; color: var(--v2-ink); }
.pd-video__pts span { font-size: 13.8px; line-height: 1.7; color: var(--v2-mute); }

/* ---------- 「想了解更多」入口卡：工厂 / 资质 / 售后 / 耗材各有一页 ---------- */
.pd-more {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.pd-more__card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 22px 20px;
  border: 1px solid var(--v2-line);
  background: #fff;
  text-decoration: none;
  transition: 0.2s;
}
.pd-more__card:hover {
  border-color: var(--v2-brand);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -22px rgba(10, 21, 38, 0.45);
}
.pd-more__card b { font-size: 16.5px; color: var(--v2-ink); }
.pd-more__card span { font-size: 13.5px; line-height: 1.7; color: var(--v2-mute); }
.pd-more__card i { font-style: normal; font-size: 13.5px; color: var(--v2-brand); }

body[data-page="detail"] .product-info { padding-top: 4px; }
body[data-page="detail"] .product-info h1 {
  font-size: 30px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--v2-ink);
  margin: 14px 0 14px;
}
body[data-page="detail"] .product-info .tagline {
  font-size: 15px;
  line-height: 1.85;
  color: var(--v2-mute);
  margin-bottom: 26px;
}
body[data-page="detail"] .product-tag {
  display: inline-block;
  padding: 4px 10px;
  margin: 0 6px 6px 0;
  background: var(--v2-alt);
  color: var(--v2-ink-2);
  border-radius: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* 主/次 CTA 并排 */
.pd-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-cta .btn { height: 46px; line-height: 46px; padding: 0 26px; }
.pd-cta .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--v2-line);
  color: var(--v2-ink-2);
}
.pd-cta .btn-ghost:hover { border-color: var(--v2-ink); color: var(--v2-ink); }
.pd-cta .btn-ghost svg { width: 15px; height: 15px; }

/* 信任点：三条就够，多了像凑数 */
.pd-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 18px 0 30px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--v2-mute);
}
.pd-trust li { display: flex; align-items: center; gap: 7px; }
.pd-trust li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--v2-brand);
}

.pd-h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--v2-ink);
  letter-spacing: 0.01em;
  margin: 0 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--v2-line-2);
}

body[data-page="detail"] .product-features { margin: 0; padding: 0; list-style: none; }
body[data-page="detail"] .product-features li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 11px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--v2-ink-2);
}
body[data-page="detail"] .product-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 11px;
  height: 6px;
  border-left: 1.6px solid var(--v2-brand);
  border-bottom: 1.6px solid var(--v2-brand);
  transform: rotate(-45deg);
}

/* 章节标题统一：小标题 + 一句说明 */
body[data-page="detail"] .pd-sec { margin-bottom: 46px; }
body[data-page="detail"] .pb-h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--v2-ink);
  margin: 0 0 8px;
}
body[data-page="detail"] .pb-sub {
  font-size: 13.5px;
  color: var(--v2-mute);
  margin: 0 0 22px;
}

/* 参数表 → 两列参数网格（行转格，边框去掉，靠留白分组） */
body[data-page="detail"] table.product-specs {
  display: block;
  width: 100%;
  border-collapse: separate;
  margin: 0;
}
body[data-page="detail"] table.product-specs tbody {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--v2-line);
}
body[data-page="detail"] table.product-specs tr {
  display: block;
  padding: 15px 20px 15px 0;
  border-bottom: 1px solid var(--v2-line-2);
}
body[data-page="detail"] table.product-specs tr:nth-child(2n) {
  padding-left: 24px;
  border-left: 1px solid var(--v2-line-2);
}
body[data-page="detail"] table.product-specs th {
  display: block;
  width: auto;
  padding: 0 0 5px;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--v2-mute);
  letter-spacing: 0.02em;
}
body[data-page="detail"] table.product-specs td {
  display: block;
  padding: 0;
  border: 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--v2-ink);
}

/* 详情正文排版 */
body[data-page="detail"] .pdetail-content {
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--v2-ink-2);
}
body[data-page="detail"] .pdetail-content h2,
body[data-page="detail"] .pdetail-content h3 {
  font-size: 17px;
  color: var(--v2-ink);
  margin: 30px 0 12px;
}
body[data-page="detail"] .pdetail-content img { max-width: 100%; height: auto; }

/* ---------- 参数看完就地留资 ---------- */
.pd-inq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 48px;
  align-items: center;
  background: var(--v2-alt);
  border: 1px solid var(--v2-line);
  padding: 40px 44px;
  margin: 8px 0 52px;
}
.pd-inq__l .eyebrow {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-brand);
  margin-bottom: 14px;
}
.pd-inq__l h2 {
  font-size: 25px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--v2-ink);
  margin: 0 0 14px;
}
.pd-inq__l p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--v2-mute);
  margin: 0 0 18px;
}
.pd-inq__pts { margin: 0; padding: 0; list-style: none; }
.pd-inq__pts li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 13.5px;
  color: var(--v2-ink-2);
}
.pd-inq__pts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 6px;
  border-left: 1.6px solid var(--v2-brand);
  border-bottom: 1.6px solid var(--v2-brand);
  transform: rotate(-45deg);
}
.pd-inq .form2 {
  background: #fff;
  padding: 26px;
  border: 1px solid var(--v2-line);
}
.pd-inq .form2 label { margin-bottom: 10px; }
.pd-inq .form2 input,
.pd-inq .form2 textarea { font-size: 14px; }

/* ---------- 相关机型 ---------- */
.relgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--v2-line);
  border: 1px solid var(--v2-line);
}
.relcard {
  display: block;
  background: #fff;
  padding: 0 0 22px;
  transition: 0.3s var(--v2-ease);
}
.relcard:hover { background: #fcfcfd; }
.relcard__img {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #f7f9fc;
}
.relcard__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.relcard b {
  display: block;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 700;
  color: var(--v2-ink);
  letter-spacing: -0.01em;
}
.relcard span {
  display: block;
  padding: 6px 22px 0;
  font-size: 12.5px;
  color: var(--v2-mute);
}

/* ---------- 询盘抽屉 ---------- */
.drawer {
  position: fixed;
  inset: 0;
  /* 必须高过页头（.hd 是 1000 级）：否则抽屉打开时顶栏还压在遮罩上面，
     右上角的关闭按钮会被挡住 */
  z-index: 9999;
  background: rgba(10, 21, 38, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: 0.28s var(--v2-ease);
}
.drawer.show { opacity: 1; visibility: visible; }
.drawer__panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 440px;
  max-width: 92vw;
  background: #fff;
  padding: 34px 32px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: 0.32s var(--v2-ease);
}
.drawer.show .drawer__panel { transform: none; }
.drawer__x {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: var(--v2-mute);
  cursor: pointer;
}
.drawer__x:hover { color: var(--v2-ink); }
.drawer__panel h3 {
  font-size: 20px;
  color: var(--v2-ink);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.drawer__sub {
  font-size: 13px;
  line-height: 1.75;
  color: var(--v2-mute);
  margin: 0 0 22px;
}

/* ---------- 分类页 / 列表页产品卡：让机器占满画面 ---------- */
.card.product-card .card-image {
  height: auto;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: #f7f9fc;
}
.card.product-card .card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.card.product-card:hover .card-image img { transform: scale(1.04); }

@media (max-width: 980px) {
  body[data-page="detail"] .product-detail-grid { grid-template-columns: 1fr; gap: 32px; }
  body[data-page="detail"] .product-gallery { position: static; }
  .pd-video { grid-template-columns: 1fr; gap: 22px; }
  .pd-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-inq { grid-template-columns: 1fr; gap: 26px; padding: 30px 24px; }
  .relgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="detail"] table.product-specs tbody { grid-template-columns: 1fr; }
  body[data-page="detail"] table.product-specs tr:nth-child(2n) {
    padding-left: 0;
    border-left: 0;
  }
}
@media (max-width: 560px) {
  body[data-page="detail"] .product-info h1 { font-size: 24px; }
  .relgrid { grid-template-columns: 1fr; }
  .pd-more { grid-template-columns: 1fr; }
  body[data-page="detail"] .pd-gallery__thumbs { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
}

/* ---------- 浅色底上的表单（详情页内嵌表单 / 询盘抽屉）----------
   .form2 原本是给深色询盘区设计的（白字 + 6% 白底），放到白色卡片上
   输入框直接“消失”——只剩占位符飘在白底上，看着像表单坏了。
   这里给浅色场景一套覆盖：灰底输入框、深色字、品牌色聚焦边。 */
.pd-inq .form2 input,
.pd-inq .form2 select,
.pd-inq .form2 textarea,
.drawer .form2 input,
.drawer .form2 select,
.drawer .form2 textarea {
  background: var(--v2-alt);
  border: 1px solid var(--v2-line);
  color: var(--v2-ink);
  height: 46px;
  font-size: 14px;
}
.pd-inq .form2 textarea,
.drawer .form2 textarea { height: 88px; }
.pd-inq .form2 input::placeholder,
.pd-inq .form2 textarea::placeholder,
.drawer .form2 input::placeholder,
.drawer .form2 textarea::placeholder { color: #93a1b5; }
.pd-inq .form2 input:focus,
.pd-inq .form2 select:focus,
.pd-inq .form2 textarea:focus,
.drawer .form2 input:focus,
.drawer .form2 select:focus,
.drawer .form2 textarea:focus {
  background: #fff;
  border-color: var(--v2-brand);
  box-shadow: 0 0 0 3px rgba(200, 69, 30, 0.09);
}
.pd-inq .form2 .form2__msg,
.drawer .form2 .form2__msg { color: var(--v2-mute); }
.pd-inq .form2 .form2__msg.ok,
.drawer .form2 .form2__msg.ok { color: #1a7f4b; }
.pd-inq .form2 .form2__msg.err,
.drawer .form2 .form2__msg.err { color: #c0392b; }

/* 白底产品图叠在浅灰卡面上：白底会露出一块"白贴片"，看着像贴纸。
   multiply 让白像素变透明、机器本体颜色几乎不变，图与底色就自然融在一起。 */
.pcard__img img,
.card.product-card .card-image img,
.relcard__img img,
body[data-page="detail"] .product-gallery img { mix-blend-mode: multiply; }

/* 白底产品图叠在浅灰卡面上：白底会露出一块"白贴片"，看着像贴纸。
   multiply 让白像素变透明、机器本体颜色几乎不变，图与底色就自然融在一起。 */
.pcard__img img,
.card.product-card .card-image img,
.relcard__img img,
body[data-page="detail"] .product-gallery img { mix-blend-mode: multiply; }

/* ==========================================================================
   全站底部 CTA —— 统一改成「就地留资」表单
   原来是「一句标语 + 一个按钮跳到联系页」，跳转那一步会掉一半询盘。
   现在统一成左文右表单：左侧保留各页自己的说服文案，右侧直接留联系方式。
   视觉与产品详情页的 .pd-inq 同一套，全站底部形态一致。
   ========================================================================== */
.cta-form {
  background: var(--v2-alt);
  border-top: 1px solid var(--v2-line);
  border-bottom: 1px solid var(--v2-line);
  padding: 74px 0;
}
.cta-form__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  gap: 64px;
  align-items: center;
}
.cta-form__l .eyebrow {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-brand);
  margin-bottom: 14px;
}
.cta-form__l h2 {
  font-size: clamp(24px, 2.2vw, 36px);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--v2-ink);
  margin: 0 0 16px;
  max-width: 18em;
  text-wrap: balance;
}
.cta-form__l > p {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--v2-mute);
  margin: 0 0 22px;
  max-width: 44em;
}
.cta-form__pts {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.cta-form__pts li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  color: var(--v2-ink-2);
}
.cta-form__pts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 10px;
  height: 6px;
  border-left: 1.6px solid var(--v2-brand);
  border-bottom: 1.6px solid var(--v2-brand);
  transform: rotate(-45deg);
}
.cta-form__alt {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  font-size: 13.5px;
  color: var(--v2-mute);
}
.cta-form__alt a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--v2-ink-2);
  font-weight: 600;
  border-bottom: 1px solid var(--v2-line);
  padding-bottom: 2px;
  transition: 0.2s;
}
.cta-form__alt a:hover { color: var(--v2-brand); border-color: var(--v2-brand); }
.cta-form__alt svg { width: 14px; height: 14px; }

/* 右侧表单卡：白底，与浅灰区区分开 */
.cta-form .form2 {
  background: #fff;
  border: 1px solid var(--v2-line);
  padding: 26px 24px;
  gap: 12px;
  box-shadow: 0 1px 2px rgba(10, 21, 38, 0.04);
}
.cta-form .form2__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--v2-ink);
  margin: 0 0 2px;
}
.cta-form .form2__title i {
  font-style: normal;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--v2-mute);
  margin-left: 8px;
}

/* 浅底场景的输入框（与 .pd-inq / .drawer 同一套） */
/* 输入框用白底 + 明显的灰边：原来用 --v2-alt 铺在白色卡片上，
   两者色差不到 3%，屏幕上基本看不见输入框，像没渲染出来 */
.cta-form .form2 input,
.cta-form .form2 select,
.cta-form .form2 textarea {
  background: #fff;
  border: 1px solid #d5dde9;
  color: var(--v2-ink);
  height: 46px;
  font-size: 14px;
}
.cta-form .form2 input:hover,
.cta-form .form2 textarea:hover { border-color: #b9c4d4; }
.cta-form .form2 textarea { height: 84px; }
.cta-form .form2 input::placeholder,
.cta-form .form2 textarea::placeholder { color: #93a1b5; }
.cta-form .form2 input:focus,
.cta-form .form2 select:focus,
.cta-form .form2 textarea:focus {
  background: #fff;
  border-color: var(--v2-brand);
  box-shadow: 0 0 0 3px rgba(200, 69, 30, 0.09);
}
.cta-form .form2__msg { color: var(--v2-mute); font-size: 12.5px; margin: 0; min-height: 1px; }
.cta-form .form2__msg.ok { color: #1a7f4b; }
.cta-form .form2__msg.err { color: #c0392b; }
.cta-form .form2 .btn--full { height: 46px; line-height: 46px; }

/* 整块 CTA 已是表单，页面里原本那些「联系 / 咨询」按钮改成次级文字链 */
.cta-form__l .btn-line {
  display: inline-block;
  height: 40px;
  line-height: 38px;
  padding: 0 20px;
  border: 1px solid var(--v2-line);
  background: #fff;
  color: var(--v2-ink-2);
  font-size: 13.5px;
}
.cta-form__l .btn-line:hover { border-color: var(--v2-ink); color: var(--v2-ink); }

/* 侧栏迷你表单（新闻详情页用） */
.miniinq { display: grid; gap: 9px; margin-top: 14px; }
.miniinq input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--v2-line);
  color: var(--v2-ink);
  font-size: 13.5px;
  font-family: inherit;
}
.miniinq input::placeholder { color: #93a1b5; }
.miniinq input:focus { outline: 0; border-color: var(--v2-brand); }
.miniinq button {
  height: 40px;
  border: 0;
  background: var(--v2-brand);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.miniinq button:hover { background: #b13c19; }
.miniinq button:disabled { opacity: 0.6; cursor: default; }
.miniinq .form2__msg { font-size: 12px; line-height: 1.6; margin: 0; }

@media (max-width: 980px) {
  .cta-form { padding: 52px 0; }
  .cta-form__in { grid-template-columns: 1fr; gap: 30px; }
  .cta-form__pts { margin-bottom: 18px; }
}

/* 新闻详情侧栏的 CTA：原来是深色渐变卡 + 橙色胶囊按钮，
   现在里面放的是表单，深底配浅色输入框会糊成一片，改成浅色表单卡。 */
.nw-side.nw-side-cta {
  background: var(--v2-alt);
  border: 1px solid var(--v2-line);
  border-radius: 0;
  color: var(--v2-ink-2);
  text-align: left;
  padding: 24px 22px;
}
.nw-side.nw-side-cta::before { display: none; }
.nw-side.nw-side-cta h4 {
  border: 0;
  padding: 0;
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--v2-ink);
}
.nw-side.nw-side-cta h4::after { display: none; }
.nw-side.nw-side-cta p {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--v2-mute);
}
.nw-side.nw-side-cta .miniinq button { border-radius: 0; }

/* ==========================================================================
   产品详情页 · 《详情页标准》补充板块
   （适用材料 / 打样精度 / 运行视频 / 工厂品控 / 认证资质 / 客户案例 /
     售后培训 / 包装物流）
   全部挂在 .pdstd 下面，不影响其它页面。
   ========================================================================== */
.pdstd {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--v2-line);
}
.pdnote {
  position: relative;
  margin: 20px 0 0;
  padding-left: 14px;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--v2-mute);
}
.pdnote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  background: var(--v2-brand);
}

/* 占位：素材未到位时用它撑着，别留空洞 */
.is-ph { color: #b3bfcd; }
.phcard__tag {
  display: inline-block;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #9aa8ba;
  border: 1px solid #dbe3ed;
}

/* ---- 适用材料 ---- */
.matgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.matcard {
  background: #f7f9fc;
  border: 1px solid var(--v2-line);
}
.matcard img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.matcard b {
  display: block;
  padding: 14px 16px 2px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--v2-ink);
}
.matcard span {
  display: block;
  padding: 0 16px 16px;
  font-size: 12.5px;
  color: var(--v2-mute);
}

/* ---- 打样与精度 ---- */
.smplgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.smplcard,
.casecard {
  margin: 0;
  background: #fff;
  border: 1px solid var(--v2-line);
}
.smplcard img,
.casecard img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.smplcard figcaption,
.casecard figcaption {
  padding: 14px 16px 16px;
}
.smplcard b,
.casecard b {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--v2-ink);
}
.smplcard span,
.casecard span {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--v2-mute);
}
.statrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 22px;
  border-top: 1px solid var(--v2-line);
  border-bottom: 1px solid var(--v2-line);
}
.statrow > div {
  padding: 20px 22px;
  border-left: 1px solid var(--v2-line);
}
.statrow > div:first-child { border-left: 0; padding-left: 0; }
.statrow b {
  display: block;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--v2-ink);
}
.statrow span {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--v2-mute);
}

/* ---- 运行视频 ---- */
.vidsplit {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.vidbox {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0a1526;
}
.vidbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
}
.vidplay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vidplay svg { width: 24px; height: 24px; margin-left: 3px; color: var(--v2-ink); }
.vidtag {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 5px 10px;
  background: rgba(10, 21, 38, 0.72);
  color: #fff;
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.vidlist { list-style: none; margin: 0; padding: 0; }
.vidlist li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--v2-line);
}
.vidlist li:first-child { border-top: 1px solid var(--v2-line); }
.vidlist b {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--v2-ink);
}
.vidlist span {
  grid-column: 1;
  font-size: 12.5px;
  color: var(--v2-mute);
}
.vidlist i {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  font-style: normal;
  font-size: 11.5px;
  color: #b3bfcd;
  border: 1px solid #e2e8f1;
  padding: 3px 8px;
}

/* ---- 工厂与品控 ---- */
.facsplit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 32px;
  align-items: start;
}
.facpics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.facpics img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: saturate(0.92);
}
.chklist {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: chk;
}
.chklist li {
  position: relative;
  counter-increment: chk;
  padding: 0 0 18px 46px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--v2-line);
}
.chklist li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.chklist li::before {
  content: "0" counter(chk);
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 13px;
  font-weight: 700;
  color: var(--v2-brand);
  letter-spacing: 0.04em;
}
.chklist b {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--v2-ink);
  margin-bottom: 4px;
}
.chklist span {
  font-size: 13px;
  line-height: 1.75;
  color: var(--v2-mute);
}

/* ---- 认证与资质（占位态） ---- */
.certgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.phcard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 150px;
  padding: 18px;
  border: 1px dashed #d3dde9;
  background: #fafbfd;
}
.phcard__tag { align-self: flex-start; margin-bottom: auto; }
.phcard b {
  font-size: 15px;
  font-weight: 700;
  color: var(--v2-ink-2);
}
.phcard i {
  margin-top: 4px;
  font-style: normal;
  font-size: 12px;
  color: var(--v2-mute);
  line-height: 1.6;
}

/* ---- 客户案例 ---- */
.casegrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* ---- 售后与培训 ---- */
.srvgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.srvcard {
  padding: 22px 20px;
  background: #f7f9fc;
  border-top: 2px solid var(--v2-ink);
}
.srvcard b {
  display: block;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--v2-ink);
}
.srvcard i {
  display: block;
  margin: 6px 0 10px;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: var(--v2-brand);
}
.srvcard span {
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--v2-mute);
}

/* ---- 包装与物流 ---- */
.shiptb {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.shiptb th,
.shiptb td {
  text-align: left;
  vertical-align: top;
  padding: 14px 0;
  border-bottom: 1px solid var(--v2-line);
}
.shiptb th {
  width: 150px;
  font-weight: 600;
  color: var(--v2-ink-2);
  white-space: nowrap;
}
.shiptb td { color: var(--v2-mute); }

@media (max-width: 1080px) {
  .matgrid, .srvgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .certgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vidsplit, .facsplit { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .smplgrid, .casegrid { grid-template-columns: minmax(0, 1fr); }
  .statrow { grid-template-columns: minmax(0, 1fr); }
  .statrow > div { border-left: 0; border-top: 1px solid var(--v2-line); padding-left: 0; }
  .statrow > div:first-child { border-top: 0; }
  .facpics { grid-template-columns: 1fr 1fr; }
  .shiptb th { width: 96px; white-space: normal; }
}

/* ============================================================
   视频弹层（首屏「看视频」入口打开）
   宽度同时受 1160 / 92vw / 屏高换算三重约束，保证 16:9 视频
   在任何视口都完整可见，不出现纵向滚动
   ============================================================ */
.vmodal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 3.4vh 4vw;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--v2-ease), visibility 0.3s;
}
.vmodal[hidden] { display: none; }
.vmodal.on { opacity: 1; visibility: visible; }
.vmodal__mask {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: rgba(4, 8, 15, 0.94);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.vmodal__box {
  position: relative;
  z-index: 1;
  width: min(1280px, 92vw, calc((100vh - 190px) * 16 / 9));
  transform: translateY(18px);
  transition: transform 0.44s var(--v2-ease);
}
.vmodal.on .vmodal__box { transform: none; }
.vmodal__frame {
  position: relative;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.95);
}
.vmodal__v {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}
/* YouTube 嵌入：与本地视频占同样的 16:9 区域，切源时不跳动 */
.vmodal__yt {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}
.vmodal__x {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(6, 11, 18, 0.62);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.22s, border-color 0.22s, transform 0.22s;
}
.vmodal__x:hover {
  background: var(--v2-brand);
  border-color: var(--v2-brand);
  transform: rotate(90deg);
}
.vmodal__x svg { width: 17px; height: 17px; }
.vmodal__cap {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.vmodal__t {
  font-size: 15.5px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.01em;
}
.vmodal__m {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
body.vmodal-lock { overflow: hidden; }

@media (max-width: 860px) {
  .vmodal { padding: 0; }
  .vmodal__box { width: 100%; transform: translateY(0) scale(0.96); }
  .vmodal__frame { border: 0; }
  .vmodal__cap { padding: 0 18px 0; margin-top: 14px; }
  .hero-v2__film { margin-top: 20px; }
  .hero-v2__film-ic { width: 44px; height: 44px; }
  .hero-v2__film-tx b { font-size: 13.5px; }
}

/* ============================================================
   内页横幅右侧配图（1920×400）
   背景与主体都在图里，左侧 40% 是纯底色，所以：
   - background-size:auto 100% + 右对齐 → 屏幕变宽时只会"补左边"，
     不会把机器裁掉；窄屏时从左侧裁，主体始终完整
   - 图按 400 高设计，分类页压到 300 高时整体等比缩小，不会有裁切
   ============================================================ */
.page-banner .pb-art {
  position: absolute;
  inset: 0;
  /* 必须低于 .page-banner-photo-veil（z-index:1）。
     前端 JS（applyPageBanner）会重排 banner 子元素顺序，把 pb-art 挪到 veil 之后；
     若两者 z-index 相同，实景图就会盖住压暗遮罩，白字看不清。 */
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: right center;
  /* cover：后台上传任意比例的横幅图都能铺满，不会在右侧留空白。
     文字区靠左侧 veil 压暗，构图上不需要刻意留白。 */
  background-size: cover;
  /* 底图本身偏暗，压完遮罩就糊了；提一点亮度与饱和度，机器细节才看得清 */
  filter: brightness(1.1) saturate(1.05);
}
/* 有配图时撤掉横幅自带的斜向光带：图片左缘是纯底色，
   叠一层光带反而会在衔接处露出生硬的边界 */
.page-banner:has(.pb-art) { background-image: none; }
.pb--products .pb-art { background-image: url("../images/v2/banner/pb-products.webp"); }
.pb--about .pb-art { background-image: url("../images/v2/banner/pb-about.webp"); }
.pb--cases .pb-art { background-image: url("../images/v2/banner/pb-cases.webp"); }
/* 分类页横幅只有 260 高，用专门排的 260 版：机器像素高度和 400 版接近，
   不会被缩成一条小蚂蚁 */
body:has(.cat-head) .pb--products .pb-art { background-image: url("../images/v2/banner/pb-products-s.webp"); }
body:has(.cat-head) .pb--cases .pb-art { background-image: url("../images/v2/banner/pb-cases-s.webp"); }

/* 分类页：横幅上有配图了，不能只剩一条面包屑——撑到 260 高，
   面包屑落到底部左侧，成为"广告图 + 路径"的一条完整横幅 */
body:has(.cat-head) .page-banner {
  min-height: 260px;
  padding: 0;
  align-items: flex-end;
}
body:has(.cat-head) .page-banner-content { padding-bottom: 30px; }

@media (max-width: 860px) {
  /* 平板 / 手机：390~860 宽塞不下三台机器，
     硬缩会把整排机器压成一条、还会被面包屑压住。
     直接撤掉配图，横幅回到纯色文字版——小屏以文案为先。 */
  .page-banner .pb-art { display: none; }
  body:has(.cat-head) .page-banner {
    min-height: 0;
    padding: 32px 0 30px;
    align-items: center;
  }
  body:has(.cat-head) .page-banner-content { padding-bottom: 0; }
}

/* ==========================================================================
   应用案例详情页（2026-11）
   案例从"样张墙 + 灯箱"升级为独立落地页：/case/{slug}.html
   结构：左图（含图集缩略图）右信息（标签 / 标题 / 简介 / 参数表 / CTA）
        → 案例正文 → 同类其他案例 → 免费打样留资
   规则都带 body[data-page="detail"] 或 .case- 前缀，不影响其它页面。
   ========================================================================== */

body[data-page="detail"] .case-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 48px;
  align-items: start;
}

/* ---------- 图区 ---------- */
body[data-page="detail"] .case-gallery {
  position: sticky;
  top: 96px;
  background: #fff;
  border: 1px solid var(--v2-line);
  padding: 18px;
  box-shadow: 0 20px 48px -32px rgba(10, 21, 38, 0.45);
}
body[data-page="detail"] .case-gallery__main {
  margin: 0;
  background: #fff;
  border: 0;
  overflow: hidden;
}
/* 样张图多为竖版/方版，contain 会留下大片空白；改成 cover 撑满，
   但限制高度，避免超长图把首屏顶得太高 */
body[data-page="detail"] .case-gallery__main img {
  display: block;
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center;
}
body[data-page="detail"] .case-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
  margin-top: 14px;
}
body[data-page="detail"] .case-gallery__thumbs:empty { display: none; }
body[data-page="detail"] .case-gallery__thumb {
  padding: 0;
  border: 1px solid var(--v2-line);
  background: #fff;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s;
}
body[data-page="detail"] .case-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body[data-page="detail"] .case-gallery__thumb:hover { border-color: var(--v2-ink-2); }
body[data-page="detail"] .case-gallery__thumb.is-active {
  border-color: var(--v2-brand);
  box-shadow: inset 0 0 0 1px var(--v2-brand);
}

/* ---------- 信息区 ---------- */
/* 信息区整体放进一张白卡，与左侧图区的白卡对齐，两栏视觉重量才平衡 */
body[data-page="detail"] .case-info {
  background: #fff;
  border: 1px solid var(--v2-line);
  padding: 26px 28px 28px;
}
body[data-page="detail"] .case-info h1 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: -0.015em;
  color: var(--v2-ink);
  margin: 14px 0 10px;
}
body[data-page="detail"] .case-sub {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--v2-mute);
  margin: 0 0 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--v2-line-2);
}
body[data-page="detail"] .case-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body[data-page="detail"] .case-chip {
  display: inline-block;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--v2-ink-2);
  background: var(--v2-alt);
  border: 1px solid var(--v2-line);
}
body[data-page="detail"] .case-chip--cat {
  color: var(--v2-brand);
  border-color: rgba(200, 69, 30, 0.32);
  background: rgba(200, 69, 30, 0.07);
}

/* 参数表：改成「标签 + 值」的横向紧凑排布。
   原来做成两列大方格（跟产品页参数表同款），在案例页只有 3~4 项时
   右侧空一大块，改成每行一项、左标签右值的规格表样式更紧凑。 */
body[data-page="detail"] table.case-specs {
  display: block;
  width: 100%;
  border-collapse: separate;
  margin: 0 0 24px;
  border-top: 1px solid var(--v2-line);
}
body[data-page="detail"] table.case-specs tbody {
  display: block;
}
body[data-page="detail"] table.case-specs tr {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--v2-line-2);
}
body[data-page="detail"] table.case-specs th {
  display: block;
  width: 84px;
  flex: 0 0 84px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--v2-mute);
}
body[data-page="detail"] table.case-specs td {
  display: block;
  padding: 0;
  border: 0;
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--v2-ink);
}

/* 案例正文：卡片式内嵌，避免长文贴着页面边缘、右边留大片空白 */
body[data-page="detail"] .case-body {
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--v2-ink-2);
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--v2-line);
  border-left: 3px solid var(--v2-brand);
  padding: 26px 30px;
}
body[data-page="detail"] .case-body p { margin: 0 0 14px; }
body[data-page="detail"] .case-body b { color: var(--v2-ink); }
body[data-page="detail"] .case-body h2,
body[data-page="detail"] .case-body h3 {
  font-size: 17px;
  color: var(--v2-ink);
  margin: 28px 0 10px;
}
body[data-page="detail"] .case-body img { max-width: 100%; height: auto; }

/* 相关案例卡片上的"查看案例 →" */
.relcard__more {
  display: block;
  padding: 12px 22px 0;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--v2-brand);
}

/* 案例页的相关案例：同类往往只有 1~2 条。
   原来的 3 列网格用 gap:1px + 背景线做分隔，卡片不足 3 张时右侧会多出
   一个带边框的空格子，很难看。改成 flex：卡片数少时按内容宽度排列，
   不留空格、不留框；多张时自动换行。 */
body[data-page="detail"] .relgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  background: none;
  border: 0;
}
body[data-page="detail"] .relgrid > .relcard {
  flex: 1 1 280px;
  max-width: 380px;
  border: 1px solid var(--v2-line);
  background: #fff;
  transition: 0.3s var(--v2-ease);
}
body[data-page="detail"] .relgrid > .relcard:hover {
  border-color: var(--v2-ink-2);
  box-shadow: 0 18px 40px -26px rgba(10, 21, 38, 0.45);
}

@media (max-width: 980px) {
  body[data-page="detail"] .case-detail-grid { grid-template-columns: 1fr; gap: 32px; }
  body[data-page="detail"] .case-gallery { position: static; }
  body[data-page="detail"] .case-gallery__thumbs {
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  }
}

/* YouTube 被网络阻断时的兜底提示（盖在 iframe 上，不改变布局） */
/* .vmodal__fail 是通用播放失败提示（直链 403 / 签名过期 / hls 拉不到分片），
   和 YouTube 那条共用同一套视觉，避免又多一份几乎一样的样式。 */
.vmodal__ytfallback,
.vmodal__fail {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(8, 14, 24, 0.92);
  color: #cfd8e6;
  font-size: 14px;
  text-align: center;
  padding: 20px;
}
.vmodal__ytfallback a {
  color: #f5a93a;
  text-decoration: underline;
  font-weight: 600;
}