/* ============================================================
   无锡惠晟精密元器件有限公司 · 官网样式表
   ------------------------------------------------------------
   设计语言：深蓝 + 冷白 + 品牌蓝（#1b77e6，取自企业 LOGO）
   深色基调参考 sinno-tech：主蓝 #00579e / 浅蓝底 #f0f5f9 / 深藏青 #18364f
   字体：全站统一 OPPO Sans / 微软雅黑，不混用宋体黑体
   内容区最大宽度：1440px
   ============================================================ */

/* ---------- 1. 设计变量 ---------- */
:root {
  /* 品牌 */
  --blue: #1b77e6;
  --blue-dark: #145cc0;
  --blue-soft: rgba(27, 119, 230, 0.08);

  /* 深蓝主色（参考站 sinno-tech） */
  --blue-deep: #00579e;
  --blue-deep-2: #0a6fb8;
  --navy: #18364f;

  /* 墨色阶：近黑 → 深蓝调 */
  --ink: #0a2540;
  --ink-800: #123a5c;
  --ink-600: #3d5a75;
  --ink-500: #5b7a94;
  --ink-400: #8aa2b5;
  --ink-300: #aec1d0;

  /* 底色 */
  --white: #ffffff;
  --paper: #f0f5f9;
  --paper-2: #f0f5f9;
  --line: #dce7f1;
  --line-soft: #ebf2f8;

  /* 尺寸 */
  --container: 1440px;
  --pad: 64px;
  --gap: 24px;
  --radius: 2px;

  /* 顶部导航是 fixed 的，首屏 banner 必须让开它的高度，否则顶部被压住看不见 */
  --nav-h: 84px;
  /* 首屏 banner 素材比例兜底值；hs.js 会按实际素材的 naturalWidth/Height 覆盖它，
     所以后台换任何尺寸的图都不用改 CSS */
  --hero-ar: 1920 / 900;

  /* 动效 */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.85s;

  /* 字体栈：统一无衬线，OPPO Sans 优先，回退微软雅黑 */
  --font: "OPPO Sans", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
    "Source Han Sans CN", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. 基础重置 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 移动端抽屉用 translateX(100%) 移出画面会产生横向溢出，
     用 clip 截断（不像 hidden 那样创建滚动容器，不影响 fixed 定位） */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ul, ol {
  list-style: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: 16px;
  color: inherit;
}

/* 滚动条（桌面端，弱化处理） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: #c9cfd5; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }

::selection { background: var(--blue); color: #fff; }

/* ---------- 3. 布局 ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.section {
  padding: 96px 0;
}

.section--paper { background: var(--paper-2); }
.section--tight { padding: 72px 0; }

/* 首页 · 关于我们：单独收紧上下留白，压缩该区块的纵向占比 */
#intro.section--tight { padding: 52px 0 48px; }

/* 锚点跳转时补偿固定导航高度（直接访问 #anchor 也生效） */
[id] { scroll-margin-top: 104px; }

/* 区块标题：左标题 + 英文小标 + 延伸线 + 右侧操作区 */
.sec-head {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 44px;
}

.sec-head__title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

.sec-head__en {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--blue);
  white-space: nowrap;
}

.sec-head__line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

.sec-head__tools {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

/* 页头（内页 banner）
   背景图由下面的修饰类指定，高度跟随素材自身比例（cover + 同比例 = 零裁切）；
   margin-top 让开 fixed 导航，否则顶部 84px 会被白条压住。
   素材规格：PC 1920×505、移动 800×350 —— 后台上传新图若比例不同，改这里的 --ban-ar 即可。 */
.page-hero {
  position: relative;
  margin-top: var(--nav-h);
  aspect-ratio: var(--ban-ar, 1920 / 505);
  height: auto;
  background-color: var(--ink);
  background-image: var(--ban-pc, none);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* 各内页 banner 素材（路径相对 css/ 目录） */
.page-hero--products { --ban-pc: url("../images/cpban.jpg"); --ban-mb: url("../images/sjcpban.jpg"); }
.page-hero--about    { --ban-pc: url("../images/gyban.jpg");  --ban-mb: url("../images/sjgyban.jpg"); }
.page-hero--news     { --ban-pc: url("../images/xwban.jpg");  --ban-mb: url("../images/sjxwban.jpg"); }
.page-hero--contact  { --ban-pc: url("../images/lxban.jpg");  --ban-mb: url("../images/sjlxban.jpg"); }

/* 文字块：靠左，与内容区左边线对齐 */
.page-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
}

.page-hero__title {
  max-width: 760px;
  font-size: 40px;
  font-weight: 700;
  /* 白字：素材是浅蓝调，纯白直接压上去会发飘，用两层深色柔影把字从底上"托"起来
     （不加深色遮罩层，保持素材本身透亮） */
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 16px rgba(8, 30, 52, 0.55), 0 1px 3px rgba(8, 30, 52, 0.42);
}

.page-hero__en {
  font-size: 16px;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 10px rgba(8, 30, 52, 0.6);
}

/* ---------- 4. 顶部导航 ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  height: 84px;
  /* 浅色磨砂玻璃：白色半透明 + 背景模糊 */
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 1px 0 rgba(16, 20, 24, 0.07);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease),
    height 0.4s var(--ease);
}

.site-header.is-solid {
  box-shadow: 0 1px 0 rgba(16, 20, 24, 0.07);
}

.site-header.is-scrolled {
  height: 70px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 0 rgba(16, 20, 24, 0.07),
    0 10px 30px rgba(16, 20, 24, 0.08);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

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

.brand__mark {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.brand__cn {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.brand__en {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--ink-400);
  text-transform: uppercase;
}

/* 右上角「中英文切换」+ 汉堡按钮（移动端）合成一组 */
.nav__tail {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
}

.lang {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lang__link {
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ink-400);
  white-space: nowrap;
  transition: color 0.28s var(--ease);
}

.lang__link:hover { color: var(--blue); }

.lang__link.is-active {
  color: var(--ink);
  font-weight: 700;
}

.lang__sep {
  width: 1px;
  height: 12px;
  background: var(--line);
  flex: 0 0 auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
}

.nav__item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 20px;
  font-size: 17px;
  color: rgba(16, 20, 24, 0.72);
  transition: color 0.3s var(--ease);
  white-space: nowrap;
}

.nav__link:hover,
.nav__item.is-active .nav__link {
  color: var(--ink);
}

/* 当前项指示线 */
.nav__link::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 22px;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--ease);
}

.nav__link:hover::after,
.nav__item.is-active .nav__link::after {
  transform: scaleX(1);
}

.nav__caret {
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.3s var(--ease);
  opacity: 0.7;
}

.nav__item:hover .nav__caret {
  transform: rotate(225deg) translate(-1px, -3px);
}

/* 下拉菜单 */
.nav__drop {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #fff;
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease),
    visibility 0.32s;
  box-shadow: 0 18px 40px rgba(16, 20, 24, 0.12);
}

.nav__item:hover .nav__drop,
.nav__item.is-open .nav__drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__drop a {
  display: block;
  padding: 11px 24px;
  font-size: 16px;
  color: var(--ink-600);
  transition: color 0.25s var(--ease), background 0.25s var(--ease),
    padding-left 0.25s var(--ease);
}

.nav__drop a:hover {
  color: var(--blue);
  background: var(--blue-soft);
  padding-left: 30px;
}

/* 汉堡按钮 */
.nav__burger {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.nav__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}

.nav__burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* 移动端抽屉 */
.mobile-nav {
  position: fixed;
  top: 84px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  z-index: 880;
  padding: 24px var(--pad) 48px;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.42s var(--ease), visibility 0.42s;
}

.mobile-nav.is-open { transform: translateX(0); visibility: visible; }

.mobile-nav__item { border-bottom: 1px solid var(--line); }

.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  font-size: 18px;
  color: var(--ink);
}

.mobile-nav__sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}

.mobile-nav__item.is-open .mobile-nav__sub { max-height: 400px; }

.mobile-nav__sub a {
  display: block;
  padding: 12px 0 12px 18px;
  font-size: 16px;
  color: var(--ink-500);
}

/* ---------- 5. 首屏 Banner（8 种特效轮换，对齐 sinno-tech 的 html5zoo） ---------- */
/* 高度完全跟随素材自身比例：
   · 比例值走 --hero-ar，由 hs.js 读取当前素材的 naturalWidth/naturalHeight 实时写入
     （后台换成 2560 宽的图也自动适配，不需要再动 CSS）。
   · 绝不能再加 max-height：它会把容器压扁、比例失真，cover 只能裁掉图的上下边缘。
     实测 2560 视口 + max-height:900px → 容器被压成 2.84:1（素材 2.13:1），纵向裁掉 25%。
   · margin-top 让开 fixed 导航（桌面 84px / 移动 64px），
     否则 banner 从 top:0 起，顶部 84px 会被导航永久压住。 */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: var(--hero-ar);
  height: auto;
  margin-top: var(--nav-h);
  background: var(--ink);
  overflow: hidden;
}

/* 整层横向平移：与参考站 Swiper effect:'slide' 一致的转场方式。
   过渡时长由 JS 内联写入（1s），保证与自动播放节奏同步。 */
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* 平移过程中的入层 / 出层：两层同时可见，避免转场露底 */
.hero__slide.is-enter,
.hero__slide.is-leave {
  opacity: 1;
  z-index: 2;
}

.hero__slide.is-leave { z-index: 1; }

/* 转场特效层：切片 / 方块 / 百叶 / 乱序 / 3D 都在这里临时生成，转场结束即销毁。
   压在所有 slide 之上（slide 是 z-index 2），这样旧层的图片会被完全盖住。 */
.hero__fx {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

/* 3D 特效需要让翻出的片伸出容器边界 */
.hero__fx--3d { overflow: visible; }

/* 特效用的整层克隆：把 .hero__slide 复制一份再用 clip-path 开窗，
   图片与文字一起被裁切（参考站转场时标题也是跟着被切开的） */
.fx-clip {
  pointer-events: none;
}

.fx-clip .hero__inner {
  opacity: 1 !important;
  transition: none !important;
}

/* 整图铺满分镜：必须绝对定位，否则会占据文档流把文字层挤到 banner 之外 */
.hero__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 方块层 / 遮罩层：早期 MosaicHero 的 DOM 残留，现由 .hero__fx + .fx-clip 承载，
   规则已废弃移除，仅保留上面的 .hero__mask 兜底。 */

/* 蓝色半透明遮罩已移除：banner 文案现在直接做在素材图里，
   再叠一层深蓝只会把画面压灰、损失通透感。
   这里保留一条兜底规则，模板里即便还残留 .hero__mask 节点也不会显示。 */
.hero__mask { display: none; }

/* 文字层：居中（参考 sinno-tech 轮播） */
.hero__inner {
  position: relative;
  z-index: 7;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--pad) 36px;
}

.hero__ribbon {
  max-width: 1040px;
  color: #fff;
  margin: 0 auto;
}

.hero__eyebrow {
  font-size: 15px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 18px;
}

/* 中文主标题：大号白色粗体，居中 */
.hero__title {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.45);
}

/* 英文副标题：主标题正下方（参考 sinno-tech） */
.hero__sub {
  margin-top: 22px;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.4);
}

.hero__desc {
  margin-top: 16px;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.72);
  max-width: 780px;
}

/* 英文副标题为空时不占位；同理标题留空也不占位
   （现在 banner 文案直接做在素材图里，后台标题多留空） */
.hero__sub:empty { display: none; }
.hero__title:empty { display: none; }

/* 文字层：跟随整层一起参与转场（平移直接带走；切片/方块由整层克隆承载，
   所以文字也会被一起切开）。旧层文字淡出、新层文字淡入，避免两段文案重叠。 */
.hero__slide .hero__inner {
  opacity: 0;
  transform: none;
  transition: opacity .45s ease;
}

.hero__slide.is-active .hero__inner { opacity: 1; }

/* 轮播指示点：底部居中小圆点（规格对齐 sinno-tech：12×12 / 全圆 / 间距 16） */
.hero__dots {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero__dot {
  position: relative;
  width: 12px;
  height: 12px;
  padding: 0;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.hero__dot span {
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.4);
  transition: background 0.5s var(--ease), opacity 0.5s var(--ease);
}

.hero__dot:hover span { background: rgba(255, 255, 255, 0.78); }

/* 当前项：不透明浅灰（与参考站一致），非当前项为 40% 白 */
.hero__dot.is-active span {
  background: #d9d9d9;
  transform: none;
  box-shadow: none;
}

/* 左右翻页箭头：32×32 细箭头，距边 25px（规格对齐 sinno-tech） */
.hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 8;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  padding: 0;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.hero__arrow:hover { opacity: 1; }

.hero__arrow--prev { left: 25px; }
.hero__arrow--next { right: 25px; }

.hero__arrow--prev:hover { transform: translateX(-4px); }
.hero__arrow--next:hover { transform: translateX(4px); }

.hero__arrow svg {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

/* ---------- 6. 通用按钮 / 链接 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 34px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: var(--radius);
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--blue); }

.btn--blue { background: var(--blue); color: #fff; }
.btn--blue:hover { background: var(--blue-dark); }

.btn--ghost {
  border: 1px solid var(--line);
  color: var(--ink);
  background: #fff;
}
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); }

.btn__arrow {
  width: 16px;
  height: 16px;
  transition: transform 0.3s var(--ease);
}

.btn:hover .btn__arrow { transform: translateX(4px); }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--blue);
  transition: gap 0.3s var(--ease);
}

.link-more:hover { gap: 14px; }

/* 圆形箭头按钮（画廊控制） */
.round-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.round-btn svg { width: 16px; height: 16px; stroke: var(--ink-400); }
.round-btn:hover { border-color: var(--blue); }
.round-btn:hover svg { stroke: var(--blue); }
.round-btn.is-prev svg { stroke: var(--blue); }

.round-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ---------- 7. 首页 · 关于我们（居中版，参考 sinno-tech） ---------- */
.about-us { text-align: center; }

/* 大号浅灰英文标题（Arial 34px，压缩纵向占比） */
.about-us__en {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 700;
  color: #cccccc;
}

/* 中文标题（23px，深色） */
.about-us__cn {
  margin-top: 2px;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-800);
}

.about-us__rule {
  display: block;
  width: 52px;
  height: 2px;
  margin: 8px auto 0;
  background: var(--blue-deep);
}

/* 分隔线从中间横向展开（配合 .reveal.is-in 复位为 scaleX(1)） */
.about-us__rule.reveal { transform: scaleX(0); }

.about-us__text {
  max-width: 1120px;
  margin: 12px auto 0;
}

.about-us__text p {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-500);
  text-align: center;
}

.about-us__text p:last-child { margin-bottom: 0; }

/* MORE 按钮：实心深蓝（参考站主蓝） */
.about-us__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  margin-top: 16px;
  padding: 0 28px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #fff;
  background: var(--blue-deep);
  transition: background 0.35s var(--ease), gap 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

.about-us__more:hover {
  background: var(--blue);
  gap: 18px;
  box-shadow: 0 10px 26px rgba(0, 87, 158, 0.28);
}

/* ---------- 7b. 内页 · 公司简介（左图右文） ---------- */
.intro {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

.intro__media {
  flex: 0 0 520px;
  height: 400px;
  overflow: visible;
  position: relative;
  background: transparent;
}

intro__media-clip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.intro__media:hover .intro__media-clip img { transform: scale(1.04); }

.intro__media-deco {
  position: absolute;
  left: 24px;
  top: 24px;
  right: -24px;
  bottom: -24px;
  background: var(--blue);
  z-index: 0;
}
.intro__media-clip {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.intro__body {
  flex: 1 1 auto;
  min-width: 0;
}

.intro__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 500;
  color: var(--blue);
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}

.intro__label::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--blue);
  flex: 0 0 auto;
}

.intro__title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  margin-bottom: 22px;
}

.intro__rule {
  width: 100%;
  height: 1px;
  background: var(--line);
  margin-bottom: 24px;
}

.intro__text p {
  font-size: 17px;
  line-height: 2;
  color: var(--ink-500);
  margin-bottom: 16px;
}

.intro__text p:last-child { margin-bottom: 0; }

/* 数据带 */
.data-band {
  margin-top: 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
}

.data-band__cell {
  flex: 1 1 0;
  min-width: 0;
  padding: 18px 16px;
  text-align: center;
  position: relative;
}

.data-band__cell + .data-band__cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 54px;
  background: var(--line);
}

.data-band__num {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--blue);
  letter-spacing: 0.01em;
}

.data-band__num small {
  font-size: 19px;
  font-weight: 700;
  margin-left: 2px;
}

.data-band__label {
  margin-top: 6px;
  font-size: 15px;
  color: var(--ink-500);
}

/* ---------- 8. 首页 · 产品与应用 ---------- */
/*
 * 深蓝动效底（参考参考站蓝调），三层叠加，全部只动 transform/opacity：
 *   .section--dark       深蓝底色
 *   .section--dark::before  缓慢漂移的极光光晕 + 细网格（28s 往返）
 *   .section--dark::after   斜向流光扫过（11s 循环）
 *   内容容器压在动效之上
 */
.section--dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #06345c;
  color: #fff;
}

.section--dark::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(34% 40% at 16% 20%, rgba(27, 119, 230, 0.62), transparent 66%),
    radial-gradient(30% 36% at 84% 74%, rgba(0, 150, 214, 0.5), transparent 68%),
    radial-gradient(30% 34% at 56% 4%, rgba(0, 87, 158, 0.88), transparent 70%),
    radial-gradient(22% 28% at 36% 94%, rgba(10, 111, 184, 0.55), transparent 72%),
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 88px 88px,
    88px 88px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  animation: auroraDrift 28s ease-in-out infinite alternate,
    auroraPulse 15s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes auroraDrift {
  0% { transform: translate3d(-6%, -4%, 0); }
  50% { transform: translate3d(1%, 1%, 0); }
  100% { transform: translate3d(6%, 5%, 0); }
}

@keyframes auroraPulse {
  0%, 100% { opacity: 0.86; }
  50% { opacity: 1; }
}

/* 斜向流光：窄条高光缓慢横扫 */
.section--dark::after {
  content: "";
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: -55%;
  width: 55%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(120, 205, 255, 0.13) 42%,
    rgba(255, 255, 255, 0.11) 50%,
    rgba(120, 205, 255, 0.13) 58%,
    transparent 100%
  );
  transform: translateX(0) rotate(14deg);
  opacity: 0;
  will-change: transform, opacity;
  animation: heroSweep 11s ease-in-out infinite;
}

@keyframes heroSweep {
  0% { transform: translateX(0) rotate(14deg); opacity: 0; }
  12% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translateX(340%) rotate(14deg); opacity: 0; }
}

/* 内容压在动效之上 */
.section--dark > .container {
  position: relative;
  z-index: 1;
}

.section--dark .sec-head__title { color: #fff; }
.section--dark .sec-head__line { background: rgba(255, 255, 255, 0.16); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.product-card {
  display: block;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
  overflow: hidden;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
    transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.product-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(120, 205, 255, 0.42);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 24, 48, 0.42);
}

.product-card__media {
  position: relative;
  height: 240px;
  overflow: hidden;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.product-card:hover .product-card__media img { transform: scale(1.06); }

.product-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 38, 66, 0.26);
  transition: opacity 0.5s var(--ease);
}

.product-card:hover .product-card__media::after { opacity: 0.45; }

.product-card__body {
  padding: 22px 24px 26px;
}

.product-card__name {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}

.product-card__en {
  margin-top: 6px;
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--blue);
}

/* ---------- 9. 画廊（横向滚动 + 灯箱） ---------- */
.rail {
  position: relative;
  overflow: hidden;
}

.rail__track {
  display: flex;
  gap: 24px;
  transition: transform 0.7s var(--ease);
  will-change: transform;
}

.rail__item {
  flex: 0 0 auto;
  width: 360px;
  cursor: zoom-in;
}

.rail__thumb {
  position: relative;
  height: 261px;
  overflow: hidden;
  background: var(--paper);
}

.rail__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.rail__item:hover .rail__thumb img { transform: scale(1.05); }

.rail__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(16, 20, 24, 0.06);
  pointer-events: none;
}

.rail__zoom {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(4, 31, 56, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease),
    background 0.3s var(--ease);
}

.rail__item:hover .rail__zoom {
  opacity: 1;
  transform: translateY(0);
  background: var(--blue);
}

.rail__zoom svg { width: 18px; height: 18px; }

.rail__caption {
  margin-top: 16px;
  font-size: 16px;
  color: var(--ink-600);
  line-height: 1.6;
}

/* 滚动进度条 */
.rail__bar {
  position: relative;
  height: 2px;
  background: var(--line);
  margin-top: 28px;
  overflow: hidden;
}

.rail__bar span {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 40%;
  background: var(--blue);
  transition: transform 0.7s var(--ease), width 0.4s var(--ease);
  transform: translateX(0);
}

/* ---------- 10. 灯箱 ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(4, 25, 45, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.36s var(--ease), visibility 0.36s;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__stage {
  position: relative;
  max-width: 82vw;
  max-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__img {
  max-width: 82vw;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.lightbox__img.is-ready {
  opacity: 1;
  transform: scale(1);
}

.lightbox__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -46px;
  text-align: center;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}

.lightbox__counter {
  position: absolute;
  top: 50%;
  right: -76px;
  transform: translateY(-50%);
  font-size: 16px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

.lightbox__btn {
  position: absolute;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.lightbox__btn:hover {
  background: var(--blue);
  border-color: var(--blue);
}

.lightbox__btn svg { width: 20px; height: 20px; stroke: #fff; }

.lightbox__prev { left: 40px; top: 50%; margin-top: -28px; }
.lightbox__next { right: 40px; top: 50%; margin-top: -28px; }
.lightbox__close { right: 40px; top: 32px; }
.lightbox__close:hover { transform: rotate(90deg); }

.lightbox__btn:hover svg { stroke: #fff; }

body.is-locked { overflow: hidden; }

/* ---------- 11. 关于我们 · 合作伙伴 ---------- */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.partner-grid__item {
  height: 140px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.partner-grid__item:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
}

.partner-grid__item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.4s var(--ease), opacity 0.4s var(--ease);
}

.partner-grid__item:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* ---------- 12. 产品列表页 ---------- */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 44px;
}

.filter__item {
  position: relative;
  padding: 6px 0 18px;
  font-size: 17px;
  color: var(--ink-500);
  transition: color 0.3s var(--ease);
}

.filter__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.36s var(--ease);
}

.filter__item:hover { color: var(--ink); }

.filter__item.is-active {
  color: var(--ink);
  font-weight: 700;
}

.filter__item.is-active::after { transform: scaleX(1); }

.product-grid--light {
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
}

.product-grid--light .product-card {
  background: #fff;
  border: 1px solid var(--line);
}

/* 产品中心列表：图片框改为 8:6（=4:3），与素材 800×600 完全同比例，
   object-fit:cover 就是整图呈现，不会再裁掉上下。 */
.product-grid--light .product-card__media { aspect-ratio: 8 / 6; height: auto; }
.product-grid--light .product-card__media::after { display: none; }
.product-grid--light .product-card__name { color: var(--ink); }
.product-grid--light .product-card__en { color: var(--ink-400); }
.product-grid--light .product-card:hover { border-color: var(--blue); }
/* hover 不再放大素材：放大 = 二次裁切，产品会「超出边框」被切掉，
   反馈改为由卡片抬升 + 蓝色描边承担 */
.product-grid--light .product-card:hover .product-card__media img { transform: none; }

/* 分页 */
.pager {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 56px;
}

.pager a,
.pager span {
  min-width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border: 1px solid var(--line);
  color: var(--ink-600);
  transition: all 0.3s var(--ease);
}

.pager a:hover { border-color: var(--blue); color: var(--blue); }
.pager .is-current { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---------- 13. 产品详情页 ---------- */
.pd-top {
  display: flex;
  gap: 56px;
  align-items: flex-start;
  margin-bottom: 88px;
}

.pd-gallery {
  flex: 0 0 600px;
  min-width: 0;
}

.pd-gallery__main {
  width: 100%;
  /* 图框跟素材同比例（站内产品图统一 800×600＝8:6），object-fit:cover 不再裁掉两边。
     原来写死 height:460px，在 1440 断点下框变 500×460，横向裁掉约 18%。 */
  aspect-ratio: 8 / 6;
  height: auto;
  overflow: hidden;
  background: var(--paper);
  /* 1px 浅灰描边 */
  border: 1px solid var(--line);
}

.pd-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.28s var(--ease);
}

.pd-gallery__thumbs {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.pd-gallery__thumb {
  width: 92px;
  height: 92px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  border: 1px solid transparent;
  transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease);
}

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

.pd-gallery__thumb.is-active,
.pd-gallery__thumb:hover {
  opacity: 1;
  border-color: var(--blue);
}

.pd-info {
  flex: 1 1 auto;
  min-width: 0;
}

/* 分类行：栏目中文名 · 栏目英文名（后台「栏目 → 副标题」维护） */
.pd-info__cat {
  font-size: 17px;
  font-weight: 500;
  color: var(--blue);
  letter-spacing: 0.06em;
  margin-bottom: 22px;
}

.pd-info__cat-en {
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.pd-info__desc {
  font-size: 16px;
  line-height: 1.95;
  color: var(--ink-600);
  margin-bottom: 0;
}

/* 参数表：行由后台扩展字段驱动，留空的行模板里不渲染。
   整张表只在「至少有一项参数」时才出现（:has 探测参数行），
   没有参数时连「产品名称」那一行也不显示 —— 避免普通产品页出现只有一行的空表。
   非手机端分左右两列（见下面 @media），键名宽度用 --spec-k / --spec-gap 两个变量控制。 */
.pd-spec {
  --spec-k: 132px;
  --spec-gap: 20px;
  margin: 0;
  border: 0;
  display: flex;
  flex-direction: column;
}

/* 两列的容器只是「逻辑分组」——display:contents 让行本身直接参与父级布局：
   单列时按 DOM 顺序竖排；两列时由父级 grid 决定每一行落到哪一列。 */
.pd-spec__col { display: contents; }

.pd-spec:has(.pd-spec__row--param) {
  margin: 24px 0 34px;
  border-top: 1px solid var(--line);
}

/* 无参数时整张表高度为 0，若不给下边距，简介会和「获取报价」按钮贴在一起（实测 0px）。
   这里补上与「表→按钮」同值的 34px，保证两种页面观感一致。 */
.pd-spec:not(:has(.pd-spec__row--param)) {
  margin: 0 0 34px;
}

.pd-spec__row {
  display: flex;
  gap: var(--spec-gap);
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 16px;
  line-height: 1.6;
}

.pd-spec__row--name {
  display: none;
}

.pd-spec:has(.pd-spec__row--param) .pd-spec__row--name {
  display: flex;
}

.pd-spec__k {
  flex: 0 0 var(--spec-k);
  color: var(--ink-400);
}

.pd-spec__v {
  flex: 1 1 auto;
  color: var(--ink);
}

/* 非手机端：参数表分左右两列。
   「列优先填充 + 固定 4 行」→ 前 4 行落左列（产品名称/产品重量/可售卖地/产地），
   其余落右列（发货周期/价格/起批量）；两侧同一行号共用一条网格行，
   所以行高自动一致、横向分隔线连成一条（右列第 4 行没有内容，末行左边有边线属正常）。
   右列一项参数都没有时（参数不全的产品）本段不生效，自动退回上面的单列。 */
@media (min-width: 769px) {
  .pd-spec:has(.pd-spec__col--right .pd-spec__row--param) {
    --spec-k: 74px;      /* 键名最长 4 个字，两列时收窄，把宽度让给值 */
    --spec-gap: 14px;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    grid-template-columns: 1fr 1fr;
    column-gap: 44px;
  }
}

/* 规格参数表 */
.spec-table {
  border-top: 1px solid var(--line);
}

.spec-table__row {
  display: flex;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 16px;
}

.spec-table__k {
  flex: 0 0 220px;
  color: var(--ink-400);
}

.spec-table__v {
  flex: 1 1 auto;
  color: var(--ink-600);
}

/* ---------- 推荐产品：横向滚动 + 左右箭头 ----------
   箭头放在卡片区「之外」—— 容器两侧留出 --rl-pad 通道（48 箭头 + 24 间隙），
   卡片宽度按 --rl-visible 等分，滚一屏正好走 --rl-visible 张。
   产品不足一屏时 hs.js 加 .is-static：撤掉通道、藏掉箭头，
   退回与上方「推荐产品」标题左对齐的静态排布（不会出现空箭头）。 */
.related {
  --rl-visible: 3;
  --rl-gap: 24px;
  --rl-pad: 72px;
  position: relative;
  padding: 0 var(--rl-pad);
}

.related.is-static { padding: 0; }
.related.is-static .related__nav { display: none; }

.related__track {
  display: flex;
  gap: var(--rl-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* 上下留白：给卡片的 hover 上浮与投影留出余量，否则会被滚动容器裁掉 */
  padding: 10px 0 26px;
}

.related__track::-webkit-scrollbar { display: none; }

.related__slide {
  display: block;
  flex: 0 0 calc((100% - (var(--rl-visible) - 1) * var(--rl-gap)) / var(--rl-visible));
  scroll-snap-align: start;
}

.related__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-600);
  cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
    color 0.3s var(--ease), opacity 0.3s var(--ease);
}

.related__nav svg { width: 20px; height: 20px; }

.related__nav:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.related__nav:disabled {
  opacity: 0.32;
  cursor: default;
}

.related__nav:disabled:hover {
  background: #fff;
  border-color: var(--line);
  color: var(--ink-600);
}

.related__nav--prev { left: 0; }
.related__nav--next { right: 0; }

/* 浅色变体：.product-card 的基础样式是「深色半透明卡 + 白字」，为首页深底区块设计。
   产品详情页的「推荐产品」落在 .section--paper（#f0f5f9）浅底上，
   直接复用就会「白字压白底」—— 产品名完全看不见（2026-09-22 实测发现）。 */
.related .product-card {
  background: #fff;
  border: 1px solid var(--line);
}
.related .product-card:hover {
  background: #fff;
  border-color: var(--blue);
  box-shadow: 0 8px 18px rgba(10, 37, 64, 0.1);
}
/* 图框同样改 8:6，与素材 800×600 同比例，cover 不再上下裁切 */
.related .product-card__media { aspect-ratio: 8 / 6; height: auto; }
.related .product-card__media::after { display: none; }
.related .product-card:hover .product-card__media img { transform: none; }
.related .product-card__name { color: var(--ink); }
.related .product-card__en { color: var(--blue); }

/* 「产品说明」正文为空时，整块（含标题）不显示 —— 避免出现只有标题的空区块。
   :has() 用来向前选中紧邻的 .sec-head（CSS 无法反向选兄弟节点，只能靠 :has()）。 */
.pd-body:empty { display: none; }
.sec-head:has(+ .pd-body:empty) { display: none; }

/* ---------- 14. 新闻 ---------- */
.news-list {
  display: flex;
  flex-direction: column;
}

.news-item {
  display: flex;
  gap: 36px;
  padding: 34px 0;
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.4s var(--ease);
}

.news-item:first-child { border-top: 1px solid var(--line-soft); }

.news-item__media {
  flex: 0 0 300px;
  height: 190px;
  overflow: hidden;
  background: var(--paper);
}

.news-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.news-item:hover .news-item__media img { transform: scale(1.05); }

.news-item__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.news-item__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  color: var(--ink-400);
  margin-bottom: 12px;
}

.news-item__cat {
  color: var(--blue);
}

.news-item__meta i {
  width: 1px;
  height: 12px;
  background: var(--line);
}

.news-item__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.55;
  margin-bottom: 12px;
  transition: color 0.3s var(--ease);
}

.news-item:hover .news-item__title { color: var(--blue); }

.news-item__excerpt {
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-400);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 新闻详情 */
.article {
  max-width: 880px;
  margin: 0 auto;
}

.article__head {
  text-align: center;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}

.article__cat {
  display: inline-block;
  font-size: 16px;
  color: var(--blue);
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.article__title {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 18px;
}

.article__meta {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 16px;
  color: var(--ink-400);
}

.article__meta i { width: 1px; height: 12px; background: var(--line); }

.article__cover {
  width: 100%;
  height: 420px;
  overflow: hidden;
  margin-bottom: 40px;
}

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

.article__body p {
  font-size: 17px;
  line-height: 2.1;
  color: var(--ink-600);
  margin-bottom: 22px;
}

.article__body h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 36px 0 16px;
}

/* 上下篇 */
.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  margin-top: 72px;
  border: 1px solid var(--line);
}

.article-nav__item {
  background: var(--paper-2);
  padding: 26px 32px;
  transition: background 0.35s var(--ease);
}

.article-nav__item:hover { background: #fff; }

.article-nav__label {
  font-size: 16px;
  color: var(--ink-400);
  margin-bottom: 8px;
}

.article-nav__title {
  font-size: 17px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.article-nav__item--next { text-align: right; }

/* ---------- 15. 联系我们 ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 72px;
}

.contact-cell__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.contact-cell__icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.contact-cell__label {
  font-size: 16px;
  color: var(--ink-400);
  letter-spacing: 0.06em;
}

.contact-cell__value {
  font-size: 19px;
  line-height: 1.9;
  color: var(--ink);
}

.contact-cell__value a { transition: color 0.3s var(--ease); }
.contact-cell__value a:hover { color: var(--blue); }

.contact-cell__value small {
  display: block;
  font-size: 16px;
  color: var(--ink-500);
}

/* 地图 */
.map {
  width: 100%;
  height: 420px;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}

.map__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #eef1f4 0%, #e3e8ed 100%);
  color: var(--ink-500);
  font-size: 16px;
  text-align: center;
  padding: 24px;
}

.map__fallback strong { font-size: 19px; color: var(--ink); }

.map__note { font-size: 14px; color: var(--ink-400); }

.map__link {
  margin-top: 6px;
  font-size: 16px;
  color: var(--blue);
  border-bottom: 1px solid rgba(27, 119, 230, 0.35);
  padding-bottom: 2px;
  transition: border-color 0.3s var(--ease);
}

.map__link:hover { border-color: var(--blue); }

/* 留言表单：下划线式 */
.form-block {
  display: flex;
  gap: 64px;
  align-items: flex-start;
}

.form-intro { flex: 0 0 380px; }

.form-intro__title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 16px;
}

.form-intro__desc {
  font-size: 16px;
  line-height: 2;
  color: var(--ink-500);
}

.form {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 32px;
}

.form__field { position: relative; }
.form__field--full { grid-column: 1 / -1; }

.form__label {
  display: block;
  font-size: 16px;
  color: var(--ink-400);
  margin-bottom: 4px;
}

.form__input,
.form__textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 8px 0 12px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s var(--ease);
}

.form__input:focus,
.form__textarea:focus { border-color: var(--blue); }

.form__textarea { resize: vertical; min-height: 96px; }

.form__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.form__tip { font-size: 16px; color: var(--ink-400); }

.form-message {
  grid-column: 1 / -1;
  font-size: 16px;
  padding: 12px 16px;
  display: none;
}

.form-message.is-ok {
  display: block;
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.form-message.is-err {
  display: block;
  background: #fdf0ef;
  color: #c0392b;
}

/* ---------- 16. 页脚 ---------- */
.site-footer {
  background: #2b2b2b;
  border-top: 1px solid rgba(0, 87, 158, 0.4);
  color: rgba(255, 255, 255, 0.6);
  padding: 64px 0 0;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 56px;
}

.footer-col__title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 22px;
  letter-spacing: 0.02em;
}

.footer-col__list li {
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.7;
}

.footer-col__list a:hover { color: var(--blue); }

.footer-brand__cn {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.footer-brand__en {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.footer-brand__desc {
  font-size: 16px;
  line-height: 1.9;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.42);
}

.footer-bottom a:hover { color: #fff; }

/* 回到顶部 */
.to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 800;
  width: 48px;
  height: 48px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.4s var(--ease);
}

.to-top.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.to-top:hover { background: var(--blue); }
.to-top svg { width: 18px; height: 18px; }

/* ---------- 17. 进场动画 ---------- */
.reveal {
  opacity: 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change: opacity, transform;
}

.reveal--up { transform: translate3d(0, 48px, 0); }
.reveal--down { transform: translate3d(0, -44px, 0); }
.reveal--left { transform: translate3d(-72px, 0, 0); }
.reveal--right { transform: translate3d(72px, 0, 0); }
.reveal--zoom { transform: scale(0.94); }
.reveal--fade { transform: none; }

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* 关闭动效（无障碍 / 旧设备降级） */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
  .section--dark::before,
  .section--dark::after { animation: none; }
  .section--dark::after {
    opacity: 0.5;
    transform: translateX(120%) rotate(14deg);
  }
}

/* ============================================================
   18. 响应式
   ============================================================ */

/* 大屏微调：内容区固定 1440，两侧留白 */
@media (min-width: 1569px) {
  .site-header .container { max-width: var(--container); }
}

/* 平板 */
@media (max-width: 1280px) {
  :root { --pad: 48px; }
  /* 首屏高度交给 aspect-ratio 自适应，此处不再写死 */
  .hero__title { font-size: 46px; }
  .hero__sub { font-size: 22px; margin-top: 18px; }
  .about-us__en { font-size: 30px; }
  .about-us__text { max-width: 900px; }
  .intro { gap: 48px; }
  .intro__media { flex-basis: 440px; height: 360px; }
  .intro__title { font-size: 28px; }
  .pd-gallery { flex-basis: 500px; }
  .contact-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
  .contact-cell__value { font-size: 17px; }
}

@media (max-width: 1080px) {
  .nav__list { display: none; }
  .nav__burger { display: flex; }

  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .partner-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }

  .pd-top { flex-direction: column; gap: 36px; }
  .pd-gallery { flex-basis: auto; width: 100%; }

  /* 推荐产品：平板一屏 2 张（通道沿用基准 72px，保证箭头与卡片仍有 24px 净空） */
  .related { --rl-visible: 2; }

  .contact-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .form-block { flex-direction: column; gap: 36px; }
  .form-intro { flex-basis: auto; }
}

/* 手机 */
@media (max-width: 768px) {
  :root { --pad: 20px; --dur: 0.7s; --nav-h: 64px; }
  .intro__media-deco { display: none; }

  body { font-size: 16px; }

  .section { padding: 56px 0; }
  .section--tight { padding: 44px 0; }

  .site-header { height: 64px; }
  .site-header.is-scrolled { height: 64px; }
  .mobile-nav { top: 64px; }
  .brand__mark { width: 28px; height: 28px; }
  .brand__cn { font-size: 16px; }
  .brand__en { display: none; }

  /* 右上角中英文切换：手机收小，与汉堡按钮同排 */
  .nav__tail { gap: 10px; }
  .lang { gap: 8px; }
  .lang__link { font-size: 13px; }

  /* 推荐产品：手机改「露边横滑」+ 箭头移到卡片下方居中（不占两侧通道） */
  .related {
    --rl-pad: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
  .related__track { flex: 1 1 100%; order: 1; padding: 6px 0 16px; }
  .related__slide { flex: 0 0 84%; }
  .related.is-static .related__slide { flex: 0 0 100%; }
  .related__nav {
    position: static;
    transform: none;
    order: 2;
    width: 44px;
    height: 44px;
  }
  .related__nav--prev { order: 2; }
  .related__nav--next { order: 3; }
  .related__nav svg { width: 18px; height: 18px; }

  /* 内页 banner：换用手机专用素材（800×350），比例同步切换 */
  .page-hero {
    aspect-ratio: var(--ban-ar-mb, 800 / 350);
    height: auto;
    background-image: var(--ban-mb, var(--ban-pc, none));
  }
  .page-hero__title { max-width: 100%; font-size: 28px; }
  .page-hero__en { font-size: 13px; letter-spacing: 0.16em; }

  .sec-head { gap: 12px; margin-bottom: 28px; flex-wrap: wrap; }
  .sec-head__title { font-size: 22px; }
  .sec-head__en { font-size: 13px; letter-spacing: 0.08em; }
  .sec-head__line { min-width: 40px; }

  /* 首屏：高度跟随手机素材比例（1918×1200），不再用 80vh 写死。
     hs.js 换过 img.src 后会读手机素材的真实比例覆盖 --hero-ar，这里只是兜底。 */
  .hero { --hero-ar: 1918 / 1200; height: auto; }
  .hero__inner { padding: 0 var(--pad) 30px; }
  .hero__title { font-size: 26px; line-height: 1.42; letter-spacing: 0.02em; }
  .hero__sub { font-size: 16px; margin-top: 12px; }
  .hero__desc { font-size: 16px; margin-top: 12px; }
  .hero__eyebrow { font-size: 13px; margin-bottom: 10px; }
  .hero__dots { bottom: 22px; gap: 10px; }
  .hero__dot { width: 12px; height: 12px; }
  .hero__dot span { width: 12px; height: 12px; }
  .hero__arrow { display: none; }

  /* 关于我们（居中版） */
  .about-us__en { font-size: 26px; }
  .about-us__cn { font-size: 19px; letter-spacing: 0.04em; }
  .about-us__rule { margin-top: 12px; }
  .about-us__text { margin-top: 14px; }
  .about-us__text p { font-size: 15px; line-height: 1.9; margin-bottom: 7px; }
  .about-us__more {
    height: 42px;
    margin-top: 20px;
    padding: 0 24px;
    font-size: 13px;
  }

  /* 简介 */
  .intro { flex-direction: column; gap: 28px; }
  .intro__media { flex-basis: auto; width: 100%; height: 220px; }
  .intro__title { font-size: 24px; margin-bottom: 16px; }
  .intro__text p { font-size: 16px; line-height: 1.95; }
  .data-band { margin-top: 30px; flex-wrap: wrap; }
  .data-band__cell { flex: 1 1 100%; padding: 18px 12px; }
  .data-band__cell + .data-band__cell::before {
    left: 24px;
    right: 24px;
    top: 0;
    width: auto;
    height: 1px;
    transform: none;
  }
  .data-band__num { font-size: 34px; }
  .data-band__num small { font-size: 18px; }
  .data-band__label { font-size: 15px; } /* 数字带标签例外，保持紧凑 */

  /* 产品 */
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .product-card__media { height: 130px; }
  .product-card__body { padding: 14px 14px 18px; }
  .product-card__name { font-size: 16px; }
  .product-card__en { font-size: 12px; margin-top: 3px; }

  /* 画廊：整宽卡片 */
  .rail__item { width: 240px; }
  .rail__thumb { height: 176px; }
  .rail__caption { font-size: 15px; margin-top: 10px; }
  .rail__track { gap: 14px; }

  /* 灯箱 */
  .lightbox__stage { max-width: 92vw; }
  .lightbox__img { max-width: 92vw; max-height: 70vh; }
  .lightbox__prev { left: 10px; }
  .lightbox__next { right: 10px; }
  .lightbox__btn { width: 44px; height: 44px; }
  .lightbox__btn svg { width: 16px; height: 16px; }
  .lightbox__close { right: 12px; top: 14px; }
  .lightbox__counter { right: auto; left: 50%; top: auto; bottom: -38px; transform: translateX(-50%); }
  .lightbox__caption { bottom: -70px; font-size: 15px; }

  /* 合作伙伴 */
  .partner-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .partner-grid__item { height: 100px; padding: 14px; }

  /* 产品列表 */
  .filter { gap: 20px; overflow-x: auto; flex-wrap: nowrap; margin-bottom: 28px; }
  .filter::-webkit-scrollbar { display: none; }
  .filter__item { font-size: 16px; white-space: nowrap; padding-bottom: 14px; }
  .product-grid--light { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .product-grid--light .product-card__media { aspect-ratio: 8 / 6; height: auto; }
  .pager { margin-top: 36px; }

  /* 产品详情 */
  .pd-gallery__main { aspect-ratio: 8 / 6; height: auto; }
  .pd-gallery__thumb { width: 68px; height: 68px; }
  .pd-info__cat { font-size: 15px; margin-bottom: 16px; }
  .pd-spec__k { flex: 0 0 92px; }
  .pd-spec__row { padding: 13px 0; }
  .spec-table { font-size: 16px; }
  .spec-table__row { flex-direction: column; gap: 6px; padding: 16px 0; }
  .spec-table__k { flex-basis: auto; font-size: 15px; }
  .related { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* 新闻 */
  .news-item { flex-direction: column; gap: 18px; padding: 26px 0; }
  .news-item__media { flex-basis: auto; width: 100%; height: 190px; }
  .news-item__title { font-size: 18px; }
  .news-item__excerpt { font-size: 15px; -webkit-line-clamp: 3; }

  .article__title { font-size: 24px; }
  .article__cover { height: 220px; margin-bottom: 28px; }
  .article__body p { font-size: 16px; line-height: 2; }
  .article-nav { grid-template-columns: 1fr; margin-top: 48px; }
  .article-nav__item--next { text-align: left; }
  .article-nav__title { white-space: normal; }

  /* 联系 */
  .contact-grid { grid-template-columns: 1fr; gap: 28px; margin-bottom: 44px; }
  .contact-cell__value { font-size: 18px; }
  .map { height: 300px; }
  .form { grid-template-columns: 1fr; gap: 22px; }
  .form-intro__title { font-size: 22px; }
  .btn { width: 100%; }
  .form__actions .btn { width: 100%; }

  /* 页脚 */
  .site-footer { padding-top: 44px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; padding-bottom: 36px; }
  .footer-bottom { flex-direction: column; gap: 8px; font-size: 14px; }
  .to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}

/* 超窄屏 */
@media (max-width: 400px) {
  .product-grid,
  .product-grid--light,
  .related { grid-template-columns: 1fr; }
  .partner-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   10. 后台对接补充（企业 LOGO / 富文本正文 / 表单 / 空状态）
   ============================================================ */
.brand__img { height: 52px; width: auto; display: block; }

/* 详情页富文本正文（后台编辑器输出） */
.pd-body { max-width: 1040px; font-size: 17px; line-height: 1.9; color: var(--ink-600); }
.pd-body > *:first-child { margin-top: 0; }
.pd-body p { margin: 0 0 18px; }
.pd-body h2, .pd-body h3, .pd-body h4 {
  color: var(--ink); font-weight: 600; line-height: 1.5; margin: 34px 0 14px;
}
.pd-body h2 { font-size: 24px; }
.pd-body h3 { font-size: 20px; }
.pd-body h4 { font-size: 18px; }
.pd-body img { max-width: 100%; height: auto; margin: 22px 0; }
.pd-body table { width: 100%; border-collapse: collapse; margin: 22px 0; }
.pd-body th, .pd-body td {
  border: 1px solid var(--line); padding: 12px 16px; font-size: 16px; text-align: left;
}
.pd-body th { background: var(--paper); font-weight: 600; color: var(--ink); }
.pd-body ul, .pd-body ol { margin: 0 0 18px; padding-left: 22px; }
.pd-body ul { list-style: disc; }
.pd-body ol { list-style: decimal; }
.pd-body li { margin-bottom: 8px; }
.pd-body a { color: var(--blue); }

/* 表单必填标记 */
.form__label em { color: var(--blue); font-style: normal; }

/* 栏目暂无内容时的占位 */
.product-grid:empty::after,
.news-list:empty::after,
.related:empty::after {
  content: "暂无内容";
  display: block;
  grid-column: 1 / -1;
  padding: 56px 0;
  text-align: center;
  color: var(--ink-400);
  font-size: 16px;
}

@media (max-width: 768px) {
  .brand__img { height: 40px; }
}