@charset "UTF-8";
/* ==========================================================================
   DMT 迪玛诺 | 工业级静态站点样式表
   设计基调：深炭灰 / 哑光黑 / 深海蓝 / 浅灰 / 纯白
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌
   -------------------------------------------------------------------------- */
:root {
  /* 中性灰阶 */
  --paper: #ffffff;
  --mist: #f4f5f7;
  --mist-2: #eaecf0;
  --line: #e0e3e8;
  --line-2: #cdd2d9;
  --gray: #8b939c;
  --ink-500: #5a626c;
  --ink-600: #3d444d;
  --ink-700: #2b3037;   /* 深炭灰 */
  --ink-800: #1a1e23;
  --ink-900: #0d0f12;   /* 哑光黑 */

  /* 深海蓝 */
  --steel-900: #062a45;
  --steel-700: #0b3b60;
  --steel-600: #0f4d7a;
  --steel-500: #14679f;
  --steel-300: #7ba9c9;

  /* 功能色 */
  --accent: var(--steel-600);
  --danger: #a83232;

  /* 排版 */
  /* 2026-09-07 修复：原先引用 Google Fonts 的 Barlow / Inter，国内网络下该请求常超时，
     会阻塞首屏渲染造成白屏。现改为纯本地系统字体栈：英文走系统无衬线，中文走苹方 / 微软雅黑，
     零网络请求、无 FOUT（字体闪烁），首屏不再被字体请求卡住。 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
    "Noto Sans CJK SC", Arial, sans-serif;
  --font-num: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    Arial, "PingFang SC", "Microsoft YaHei", sans-serif;

  /* 尺度 */
  /* 2026-09-21 用户要求：外层容器 1280 → 1920（消除 1920×1080@100% 两侧大片留白）；
     随后反馈「太宽」，再按比例收窄 15% → 1920×0.85 = 1632px */
  --maxw: 1632px;
  /* 2026-09-17 用户要求：导航条上下空白减 1/3 —— 空白原为 92-60(logo)=32px，
     减 1/3 ≈ 10.7px → 92 → 81px（Logo 60px 不变，上下空白变 21px） */
  --header-h: 81px;
  --header-h-sm: 68px;
  --radius: 2px;
  --radius-lg: 3px;

  /* 动效 */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.2s;
  --t: 0.35s;
  --t-slow: 0.7s;

  --shadow-1: 0 1px 2px rgba(13, 15, 18, 0.06);
  --shadow-2: 0 10px 30px rgba(13, 15, 18, 0.1);
  --shadow-3: 0 22px 60px rgba(13, 15, 18, 0.16);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-700);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

/* 仅供屏幕阅读器与搜索引擎读取，视觉上完全不占位（首页纯视频首屏的 H1 用）
   注意：不要用 display:none 或 visibility:hidden —— 那样搜索引擎会认为是隐藏文字。 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-800);
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 图片保护（2026-09-21 用户要求）：全站图片「固定在页面上」——不可拖拽、不可长按/右键另存。
   CSS 管 WebKit/Blink 的拖拽 + iOS 长按菜单；Firefox 另靠 JS 的 draggable=false 与 dragstart 拦截 */
img {
  -webkit-user-drag: none;
  -webkit-user-select: none; user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: 0; }

:focus-visible {
  outline: 2px solid var(--steel-500);
  outline-offset: 3px;
}

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

/* --------------------------------------------------------------------------
   3. 布局与通用容器
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 40px;
}

.container--wide { max-width: 1560px; }

.section { padding: 110px 0; }
/* 2026-09-09 用户要求：banner 图与下方标题（PRODUCTS/NEWS/联系我们）之间的留白减半 */
.page-banner + .section { padding-top: 55px; }
.section--lg { padding: 140px 0; }
/* 下载中心列表区：上部留白减半（110→55 / 80→40 / 60→30）。
   用双类提升优先级，确保能覆盖后面响应式断点里的 .section 单类规则。 */
.section.section--downloads { padding-top: 55px; }
@media (max-width: 1200px) { .section.section--downloads { padding-top: 40px; } }
@media (max-width: 720px)  { .section.section--downloads { padding-top: 30px; } }
/* 通用：区块上部留白减半（110→55 / 80→40 / 60→30），按需挂到指定 section。
   同样用双类提升优先级，覆盖后面响应式断点里的 .section 单类规则。 */
.section.section--half-top { padding-top: 55px; }
@media (max-width: 1200px) { .section.section--half-top { padding-top: 40px; } }
@media (max-width: 720px)  { .section.section--half-top { padding-top: 30px; } }
.section--mist { background: var(--mist); }
.section--dark {
  background: var(--mist);
  color: var(--ink-600);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--ink-800); }

.section--texture {
  position: relative;
  background-color: #eef0f3;
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(20, 24, 28, 0.03) 0px,
      rgba(20, 24, 28, 0.03) 1px,
      transparent 1px,
      transparent 7px
    ),
    linear-gradient(160deg, #f7f8fa 0%, #e6e9ed 100%);
  color: var(--ink-600);
}
.section--texture h1,
.section--texture h2,
.section--texture h3,
.section--texture h4 { color: var(--ink-800); }

.grid {
  display: grid;
  gap: 32px;
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--6 { grid-template-columns: repeat(6, 1fr); }   /* 2026-09-21 首页核心产品系列：一行 6 个 */
.grid--gap-lg { gap: 40px; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.split--wide-left { grid-template-columns: 1.05fr 0.95fr; }
.split--wide-right { grid-template-columns: 0.95fr 1.05fr; }

.stack { display: flex; flex-direction: column; }
.stack--sm { gap: 12px; }
.stack--md { gap: 20px; }
.stack--lg { gap: 32px; }

.row-between {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   4. 排版组件
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--steel-600);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--steel-600);
}
.section--dark .eyebrow,
.section--texture .eyebrow { color: var(--steel-600); }
.section--dark .eyebrow::before,
.section--texture .eyebrow::before { background: var(--steel-600); }

.h-section {
  font-size: 46px; /* 2026-09-08 桌面固定台式字号（原 vw 缩放导致笔记本偏小） */
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-top: 18px;
}

.h-sub {
  font-size: 19px; /* 2026-09-08 桌面固定台式字号 */
  color: var(--ink-500);
  line-height: 1.8;
  max-width: 62ch;
}
.section--dark .h-sub,
.section--texture .h-sub { color: var(--ink-500); }

.h-en {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gray);
}
.section--dark .h-en,
.section--texture .h-en { color: var(--gray); }

.lead {
  font-size: 18px;
  line-height: 1.85;
  color: var(--ink-600);
}

.text-muted { color: var(--ink-500); }
.text-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.divider {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}
.section--dark .divider,
.section--texture .divider { background: var(--line); }

/* --------------------------------------------------------------------------
   5. 按钮
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 32px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
    border-color var(--t) var(--ease), transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}
.btn .arrow { transition: transform var(--t) var(--ease-out); }
.btn:hover .arrow { transform: translateX(5px); }

.btn--primary {
  background: var(--steel-700);
  color: #fff;
  border: 1px solid var(--steel-700);
}
.btn--primary:hover {
  background: var(--steel-600);
  border-color: var(--steel-600);
  box-shadow: 0 12px 28px rgba(11, 59, 96, 0.26);
  transform: translateY(-2px);
}

.btn--dark {
  background: var(--ink-900);
  color: #fff;
  border: 1px solid var(--ink-900);
}
.btn--dark:hover {
  background: var(--ink-700);
  border-color: var(--ink-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.btn--ghost {
  background: transparent;
  color: var(--ink-800);
  border: 1px solid var(--line-2);
}
.btn--ghost:hover {
  border-color: var(--ink-800);
  background: var(--ink-800);
  color: #fff;
  transform: translateY(-2px);
}

.btn--ghost-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.42);
}
.btn--ghost-light:hover {
  background: #fff;
  color: var(--ink-900);
  border-color: #fff;
  transform: translateY(-2px);
}
/* 灰白主题下：浅色纹理区内的描边亮按钮切换为深色描边，保证对比度 */
.section--texture .btn--ghost-light,
.section--dark .btn--ghost-light {
  color: var(--ink-800);
  border-color: var(--line-2);
}
.section--texture .btn--ghost-light:hover,
.section--dark .btn--ghost-light:hover {
  background: var(--ink-800);
  color: #fff;
  border-color: var(--ink-800);
  transform: translateY(-2px);
}

.btn--sm { height: 42px; padding: 0 22px; font-size: 14px; }
.btn--block { width: 100%; }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel-700);
}
.link-more::after {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  transition: width var(--t) var(--ease-out);
}
.link-more:hover::after { width: 46px; }

/* --------------------------------------------------------------------------
   6. 占位框
   -------------------------------------------------------------------------- */
.ph {
  position: relative;
  display: block;
  width: 100%;
  background: var(--mist-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph--1x1 { aspect-ratio: 1 / 1; }
.ph--4x3 { aspect-ratio: 4 / 3; }
.ph--3x2 { aspect-ratio: 3 / 2; }
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--21x9 { aspect-ratio: 21 / 9; }
.ph--4x1 { aspect-ratio: 4 / 1; }
.ph--3x4 { aspect-ratio: 3 / 4; }
.ph--a4 { aspect-ratio: 1 / 1.414; }

.ph--dark {
  background: #dfe3e8;
  border-color: rgba(20, 24, 28, 0.12);
}

/* 占位框上的角标（机械质感） */
.ph--corner::before,
.ph--corner::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line-2);
  pointer-events: none;
  z-index: 2;
}
.ph--corner::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.ph--corner::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

.ph__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 8px 14px;
  background: rgba(13, 15, 18, 0.72);
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  letter-spacing: 0.08em;
  z-index: 3;
}

/* 视频占位播放按钮 */
.ph__play {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: grid;
  place-items: center;
  background: rgba(13, 15, 18, 0.28);
  transition: background var(--t) var(--ease);
  z-index: 3;
}
.ph__play span {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  color: #fff;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: transform var(--t) var(--ease-out),
    background var(--t) var(--ease);
}
.ph__play span::before {
  content: "";
  margin-left: 4px;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
.ph__play:hover { background: rgba(13, 15, 18, 0.42); }
.ph__play:hover span { transform: scale(1.08); background: rgba(255, 255, 255, 0.12); }

/* --------------------------------------------------------------------------
   7. 顶部导航
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  /* 灰白导航栏：让原始深色 Logo 完整透出 */
  background: #f4f5f7;
  border-bottom: 1px solid rgba(20, 24, 28, 0.1);
  transition: box-shadow var(--t) var(--ease),
    background var(--t) var(--ease);
}
.header.is-scrolled {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  background: rgba(244, 245, 247, 0.96);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}

.header__top {
  border-bottom: 1px solid rgba(20, 24, 28, 0.08);
  background: #eceff2;
}
.header__top .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 34px;
}
.header__tagline {
  font-size: 12px;
  font-weight: 700;              /* 加粗 */
  letter-spacing: 0.06em;
  color: #161a1f;                /* 颜色加深（底色保持浅灰不变） */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 12px;
  color: rgba(20, 24, 28, 0.68);
  white-space: nowrap;
}
.header__meta a:hover { color: #0b3b60; }

.header__bar {
  height: var(--header-h);
  transition: height var(--t) var(--ease);
}
.header__bar > .container {
  display: flex;
  align-items: center;
  /* 14px：为让头部内容（brand+9 导航项+搜索框）整体收进 1200px 内容栅格，
     与正文左右边缘对齐。原 28px 会导致头部比正文宽约 190px。 */
  gap: 14px;
  height: 100%;
}
.header.is-scrolled .header__bar { height: calc(var(--header-h) - 14px); }

/* 双 Logo */
.brand {
  display: flex;
  align-items: flex-end;       /* 两个 logo 底部基线对齐，匹配视觉参照图 */
  gap: 10px;
  flex-shrink: 0;
}
/* 双 Logo 框：透明底（已抠白底），保留原字体颜色；统一高度保证上下对齐 */
.brand__logo {
  position: relative;           /* 白化变体绝对定位的上下文 */
  display: block;
  height: 60px;                 /* 放大 20%（在 50px 基础上再 +20%） */
  width: auto;
  flex-shrink: 0;
  border: 1px solid transparent;
  background: transparent;
  overflow: hidden;
  transition: border-color var(--t) var(--ease);
}
.brand__logo img {
  display: block;
  height: 100%;                 /* 图形按高度撑满，宽度自适应，两个 logo 视觉高度一致 */
  width: auto;
  object-fit: contain;
}
/* 彩色原图在文档流中确定尺寸 */
.brand__logo .logo-base { position: relative; }
/* 白化变体（中文转白 / 英文及符号保留品牌原色）叠在原图之上，默认隐藏 */
.brand__logo .logo-onvideo {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t) var(--ease);
}
/* VIS logo 在统一高度基础上再放大 20%（60px → 72px）
   偏移说明：实测两图中文行底部距图底比例 DMT 0.1241 / VIS 0.1969，
   故 VIS 需下移 (0.1969×72 − 0.1241×60) ≈ 6.7px，
   使「官方授权中国总代理」与「迪玛诺贸易（上海）有限公司」两行中文底部对齐 */
.brand__logo--vis {
  height: 72px;
  position: relative;
  top: 6.7px;
}
.brand:hover .brand__logo { border-color: rgba(20, 24, 28, 0.28); }
.brand__sep {
  width: 1px;
  height: 26px;
  background: rgba(20, 24, 28, 0.16);
}

/* 主导航 */
.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  /* 2026-09-21 用户要求：菜单项之间的间距大一些（注意是「项与项」之间，不是字间距）。
     ⚠️ 只影响 >1560px 的桌面档——≤1560px 那段媒体查询里另有 `gap:1px` 覆盖（为窄屏塞得下）。 */
  gap: 14px;
}
.nav__link {
  position: relative;
  display: block;
  padding: 10px 9px;
  font-size: 19.1px;   /* 2026-09-21：先 14.5→17.4（+20%），再按用户要求 +10% → 19.1px。≤1560px 另有 14px 覆盖 */
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(20, 24, 28, 0.72);
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 2px;
  height: 2px;
  background: var(--steel-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease-out);
}
.nav__link:hover { color: #14181c; }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-active { color: #14181c; font-weight: 600; }
.nav__link.is-active::after { transform: scaleX(1); }

/* 搜索 */
.search {
  position: relative;
  flex-shrink: 0;
}
.search__form {
  display: flex;
  align-items: center;
  height: 40px;
  /* 156px：输入区 104px > placeholder 需求 95px，且保证头部整体不超出内容栅格 */
  width: 156px;
  padding: 0 4px 0 14px;
  background: rgba(20, 24, 28, 0.05);
  border: 1px solid rgba(20, 24, 28, 0.14);
  border-radius: 999px;
  transition: border-color var(--t) var(--ease),
    background var(--t) var(--ease), width var(--t) var(--ease);
}
.search__form:focus-within {
  border-color: var(--steel-500);
  background: rgba(20, 24, 28, 0.08);
}
.search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  color: #14181c;
  font-size: 14px;
  outline: none;
}
.search__input::placeholder { color: rgba(20, 24, 28, 0.4); }
.search__btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: rgba(20, 24, 28, 0.6);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.search__btn:hover { color: #14181c; background: rgba(20, 24, 28, 0.08); }

/* 汉堡 */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 1px solid rgba(20, 24, 28, 0.2);
  border-radius: var(--radius);
}
.burger i {
  display: block;
  width: 20px;
  height: 1.5px;
  margin: 4px auto;
  background: #14181c;
  transition: transform var(--t) var(--ease), opacity var(--t-fast) var(--ease);
}
.burger.is-open i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger.is-open i:nth-child(2) { opacity: 0; }
.burger.is-open i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* 移动端抽屉 */
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 999;
  visibility: hidden;
  pointer-events: none;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__mask {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(8, 10, 12, 0.6);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.drawer.is-open .drawer__mask { opacity: 1; }
.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(86vw, 380px);
  height: 100%;
  padding: 96px 28px 40px;
  background: #f4f5f7;
  border-left: 1px solid rgba(20, 24, 28, 0.1);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease-out);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__search { margin-bottom: 24px; }
.drawer__search .search__form { width: 100%; }
.drawer__link {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid rgba(20, 24, 28, 0.09);
  color: rgba(20, 24, 28, 0.78);
  font-size: 16px;
  letter-spacing: 0.05em;
}
.drawer__link.is-active { color: #14181c; font-weight: 600; }
.drawer__link.is-active::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 2px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--steel-500);
}
.drawer__foot {
  margin-top: 32px;
  font-size: 13px;
  line-height: 2;
  color: rgba(20, 24, 28, 0.45);
}

/* ==========================================================================
   首页专用：导航窗格透明化，直接悬浮于首屏视频上方
   （页面未滚出首屏前：无底色 + 亮色文字；滚动后回到浅色底深字）
   ========================================================================== */
body[data-page="home"] .header {
  background: transparent;               /* 导航底色透明 */
  border-bottom: 0;
}
body[data-page="home"] .header.is-scrolled {
  background: rgba(244, 245, 247, 0.96); /* 滚出首屏后恢复浅色底，保证可读 */
  border-bottom: 1px solid rgba(20, 24, 28, 0.1);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}
/* 菜单文字：透明态亮色 + 轻投影保证在视频上可读 */
body[data-page="home"] .header:not(.is-scrolled) .nav__link {
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
body[data-page="home"] .header:not(.is-scrolled) .nav__link:hover,
body[data-page="home"] .header:not(.is-scrolled) .nav__link.is-active {
  color: #fff;
}
body[data-page="home"] .header:not(.is-scrolled) .nav__link::after {
  background: #fff;
}
/* 搜索框：透明态半透明白 */
body[data-page="home"] .header:not(.is-scrolled) .search__form {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.24);
}
body[data-page="home"] .header:not(.is-scrolled) .search__form:focus-within {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
}
body[data-page="home"] .header:not(.is-scrolled) .search__input { color: #fff; }
body[data-page="home"] .header:not(.is-scrolled) .search__input::placeholder { color: rgba(255, 255, 255, 0.5); }
body[data-page="home"] .header:not(.is-scrolled) .search__btn { color: rgba(255, 255, 255, 0.72); }
body[data-page="home"] .header:not(.is-scrolled) .search__btn:hover { color: #fff; background: rgba(255, 255, 255, 0.14); }
body[data-page="home"] .header:not(.is-scrolled) .brand:hover .brand__logo {
  border-color: rgba(255, 255, 255, 0.32);
}
/* 汉堡：透明态白色 */
body[data-page="home"] .header:not(.is-scrolled) .burger { border-color: rgba(255, 255, 255, 0.3); }
body[data-page="home"] .header:not(.is-scrolled) .burger i { background: #fff; }
/* 双 Logo：图片无法像文字那样直接换色。透明态（压在深色视频上）切换为白化变体——
   logo-dmt-whitecn / logo-vis-whitecn 已用脚本把所有暗色文字（中文 + 黑色英文字 SHANGHAI/VIS/HYDRAULICS 等）
   全部转白，仅保留品牌色符号（DMT 的 D 绿/T 红、VIS 的 UN 蓝）。
   故视频黑场/暗部下所有文字都清晰可读，品牌符号色不丢失；滚动后 header 变浅底，淡回彩色原图。 */
body[data-page="home"] .header:not(.is-scrolled) .brand__logo .logo-base { opacity: 0; }
body[data-page="home"] .header:not(.is-scrolled) .brand__logo .logo-onvideo { opacity: 1; }
body[data-page="home"] .header:not(.is-scrolled) .brand__sep {
  background: rgba(255, 255, 255, 0.28);
}

/* --------------------------------------------------------------------------
   8. 搜索结果浮层
   -------------------------------------------------------------------------- */
.searchbox {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1200;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--t) var(--ease), visibility var(--t) var(--ease);
}
.searchbox.is-open { visibility: visible; opacity: 1; }
.searchbox__mask {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(8, 10, 12, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.searchbox__panel {
  position: relative;
  max-width: 760px;
  margin: 12vh auto 0;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.searchbox__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.searchbox__head input {
  flex: 1;
  border: 0;
  outline: none;
  font-size: 17px;
}
.searchbox__close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--ink-500);
  border-radius: 50%;
}
.searchbox__close:hover { background: var(--mist); color: var(--ink-800); }
.searchbox__body { max-height: 56vh; overflow-y: auto; }
.searchbox__hint {
  padding: 26px 22px;
  color: var(--ink-500);
  font-size: 14px;
}
.searchbox__result {
  display: block;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.searchbox__result:hover { background: var(--mist); }
.searchbox__result h4 {
  font-size: 16px;
  margin-bottom: 4px;
}
.searchbox__result p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-500);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.searchbox__tag {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 8px;
  background: var(--mist-2);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-500);
  text-transform: uppercase;
}
.searchbox__empty { padding: 30px 22px; color: var(--ink-500); }

/* --------------------------------------------------------------------------
   9. 首屏（纯视频：海报层 + 视频层 + 顶部暗带，无文字 / 无轮播控件）
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  max-height: 980px;
  /* 首页视频从页顶开始，透明导航悬浮其上；其他页用 .page-banner 保持让位 */
  margin-top: 0;
  background: var(--ink-900);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  /* 2026-09-28：内联一张 64px 模糊底图 —— 首帧就呈现图片色调，消除「海报下载完之前露深色底」的那一帧黑屏 */
  background-color: var(--ink-900);
  background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gAQTGF2YzYxLjE5LjEwMAD/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCAAkAEADASIAAhEBAxEB/8QAGgAAAgMBAQAAAAAAAAAAAAAAAAMCBAUGAf/EAC4QAAICAQMBBgYBBQAAAAAAAAECAxEABBIhMQUTQVFxkRQiQlJhgbEyocHR8f/EABgBAAMBAQAAAAAAAAAAAAAAAAABAgME/8QAGxEBAQEAAwEBAAAAAAAAAAAAAAERAhIhQVH/2gAMAwEAAhEDEQA/ANQN+B7ZIEH6R7Zz/wAXMpLF9So68sCfasbDrneXZ3po8AvY/jL7Fjd2r4qvtklCXXy5gHszvNrT6lGNnkXz61lX4OdZQ8MBVw12CAB+rxdr+DHWjYPAe2MDJ5DOdEuvjUHZK58acHFnUdooTtaZfw9H/GGh1SSIPpGOWZftHtnJx9oa5QxcF9os1QoY9O2H7sMFJY/TXOFsNkT60TA7YZAfuLdfYYpZ3RyvebD6npnj6gSBqCjnigOnrnjSwSOgcuSFHIH9sjv74GjJ24iw1DpFJ20WZuprK+p1zQwtLHJyVBrd1v8AX5yG3TyMUSVGJ5IbJLokdODGynyujlbA0G1DxlVj1Df0381evSst6KSd4nllkUonoP3YzHfTbQPnkUjx3DHido4ljifZVWBQ3HzP5/eFs+DKs6nWNNcQQsLo/wDP95SmkjV9gPTqavGPqUYFqFgUWUV/GY7KXmPLcm6PU5F8hnECugryyJVftGGGcyC2AwhneMMsdKL8MMM042nElLNqSzOxLcGzhFqHXUUaarosLrDDNZabxI1Vy62CeeDxlgSlqDhWB+4YYZjyt0n/2Q==");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* 海报层 / 视频层：绝对定位重叠，同铺满不变形；靠 z-index 分层 */
.hero__poster,
.hero__video {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* 铺满不变形 */
  display: block;
}
.hero__poster { z-index: 1; transition: opacity .6s var(--ease); }
.hero__video  { z-index: 2; opacity: 0; transition: opacity .6s var(--ease); }

/* JS 判定「已缓冲满 4 秒且可起播」后加该类：视频淡入、海报淡出 */
.hero.is-video-ready .hero__video  { opacity: 1; }
.hero.is-video-ready .hero__poster { opacity: 0; }

/* 说明：原为衬托首屏白色文字而整体提亮 10%（brightness(1.1)）；
   首屏改为「纯视频、无文字」后已移除——提亮会拉低对比度、让画面发灰显糊，
   现按视频本色播放。若日后重新叠加文字，可再放开：filter: brightness(1.1); */
/* 首屏改为「纯视频」后，蒙版不再需要压暗衬文字：只保留顶部一条轻微暗带
   （保证透明导航的白色文字/Logo 仍可读），其余区域通透，视频本色可见。 */
.hero__mask {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 3;   /* 必须高于 poster(1)/video(2)，否则蒙版会被视频盖住而失效 */
  /* 2026-09-17 用户要求：去掉顶部 55% 压暗，导航文字直接浮在视频上（保留下缘压暗供底部文字用） */
  background:
    linear-gradient(0deg, rgba(8, 11, 14, 0.28) 0%, rgba(8, 11, 14, 0) 30%);
}
/* 注：首屏原有的文字层（.hero__inner/.hero__title/.hero__desc/.hero__actions）、
   轮播控件（.hero__ctrl/.hero__arrow/.hero__dots/.hero__dot）、「播放视频」降级按钮
   （.hero__playbtn）与底部数据条（.hero__stats）的 DOM 均已移除，对应样式一并删除，
   避免残留无用 CSS（2026-09-09 清理）。 */

/* --------------------------------------------------------------------------
   10. 页面 Banner
   -------------------------------------------------------------------------- */
.page-banner {
  position: relative;
  margin-top: var(--header-h);
  /* 2026-09-08 底色改为与蓝天白云 banner 近似的浅天蓝，避免图片加载前露出深蓝底造成"跳变" */
  background: #8ec2e3;
  overflow: hidden;
}
.page-banner__media { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #8ec2e3; }
.page-banner__media img { width: 100%; height: 100%; object-fit: cover; }
.page-banner__mask {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  /* 2026-09-08 去掉深蓝渐变蒙版：让背景图（蓝天白云）原色透出，靠文字阴影保证可读性 */
  background: transparent;
}
.page-banner__inner {
  position: relative;
  /* 2026-09-08 全站横幅瘦身：只压上下留白，左右留白由 .container 统一提供 */
  padding-top: 4px;
  padding-bottom: 4px;
  /* 2026-09-17 用户要求：去掉英文副标题后，中文在横条内**垂直居中**，横条高度保持 72px */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 72px;
}
.page-banner h1 {
  font-size: 32px; /* 2026-09-08 桌面固定台式字号（原 vw 缩放导致笔记本偏小） */
  color: #fff;
  letter-spacing: -0.015em;
  text-shadow: 0 1px 6px rgba(6, 42, 69, 0.35), 0 1px 2px rgba(6, 42, 69, 0.3);
}
.page-banner__en {
  margin-top: 12px;
  font-size: 8px;
  letter-spacing: 0.22em; /* 2026-09-08 全站横幅英文副标题统一缩小 */
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 4px rgba(6, 42, 69, 0.4);
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9); /* 2026-09-08 无蒙版后提高可读性 */
  text-shadow: 0 1px 4px rgba(6, 42, 69, 0.4);
  flex-wrap: wrap;
}
.crumbs a:hover { color: #fff; }
.crumbs i { font-style: normal; opacity: 0.45; }

/* --------------------------------------------------------------------------
   11. 卡片
   -------------------------------------------------------------------------- */
.card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform var(--t) var(--ease-out),
    box-shadow var(--t) var(--ease-out), border-color var(--t) var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-2);
}
.card__media { position: relative; overflow: hidden; }
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.045); }
.card__body { padding: 26px 26px 30px; }
.card__cat {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel-600);
}
.card__title {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 10px;
  transition: color var(--t-fast) var(--ease);
}
.card:hover .card__title { color: var(--steel-700); }
.card__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--ink-500);
}
.card__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--gray);
}
.card__more {
  margin-left: auto;
  color: var(--steel-700);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* 产品分类卡（首页核心产品系列） */
.cat-card {
  position: relative;
  display: block;
  border: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
  transition: transform var(--t) var(--ease-out),
    box-shadow var(--t) var(--ease-out), border-color var(--t) var(--ease);
}
.cat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-2);
}
/* 首页核心产品卡：图区不设底色/边框，产品直接浮在白色卡片上（2026-09-21 用户要求，去掉灰色底块） */
.cat-card__media { position: relative; background: transparent; border: 0; }
.cat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}
.cat-card:hover .cat-card__media img { transform: scale(1.05); }
.cat-card__idx {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  padding: 6px 12px;
  background: var(--steel-700);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}
.cat-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-top: 1px solid var(--line);
}
.cat-card__body h3 { font-size: 17px; font-weight: 600; }
.cat-card__body p {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--ink-500);
}
.cat-card__go {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-2);
  color: var(--ink-600);
  transition: background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.cat-card:hover .cat-card__go {
  background: var(--steel-700);
  border-color: var(--steel-700);
  color: #fff;
}
/* 一行 6 个（.grid--6）时格子变小，卡片内部控件等比收一档（2026-09-21） */
.grid--6 .cat-card__idx { font-size: 11px; padding: 4px 8px; letter-spacing: 0.1em; }
.grid--6 .cat-card__body { padding: 13px 12px; gap: 6px; }   /* 2026-09-21：名称放大到 16.8px 后收 2~4px，给最长的「比例调节器 / 线圈接头」留出不换行的余量 */
.grid--6 .cat-card__body h3 { font-size: 16.8px; }   /* 2026-09-21 用户要求：卡片下方中文名称放大 20%（原 14px） */
.grid--6 .cat-card__go { width: 28px; height: 28px; }
.grid--6 .cat-card__go svg { width: 13px; height: 13px; }

/* 新闻卡 */
.news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform var(--t) var(--ease-out),
    box-shadow var(--t) var(--ease-out), border-color var(--t) var(--ease);
}
.news-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-2);
}
.news-card__media { position: relative; overflow: hidden; }
.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.news-card:hover .news-card__media img { transform: scale(1.05); }
.news-card__date {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  padding: 8px 14px;
  background: rgba(13, 15, 18, 0.82);
  color: #fff;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.news-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 24px 26px;
}
.news-card__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.55;
  margin-bottom: 12px;
  transition: color var(--t-fast) var(--ease);
}
.news-card:hover .news-card__title { color: var(--steel-700); }
.news-card__desc {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-500);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card__foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--gray);
}

/* 新闻列表行 */
.news-row {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  transition: background var(--t) var(--ease);
  cursor: pointer;   /* 2026-09-21 用户要求：整行任意位置可点进详情 */
}
.news-row:hover { background: var(--mist); }
.news-row__media { overflow: hidden; }
.news-row__body { display: flex; flex-direction: column; }
.news-row__title {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 12px;
  transition: color var(--t-fast) var(--ease);
}
.news-row:hover .news-row__title { color: var(--steel-700); }
.news-row__desc {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-500);
}
.news-row__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: auto;
  font-size: 13px;
  color: var(--gray);
}
.tag {
  display: inline-block;
  padding: 2px 10px;
  background: var(--mist-2);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-600);
}

/* 视频卡 */
.video-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform var(--t) var(--ease-out),
    box-shadow var(--t) var(--ease-out), border-color var(--t) var(--ease);
}
.video-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-2);
}
.video-card__media { position: relative; overflow: hidden; }
.video-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.video-card:hover .video-card__media img { transform: scale(1.05); }
.video-card__dur {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  padding: 3px 8px;
  background: rgba(13, 15, 18, 0.78);
  color: #fff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.video-card__body { padding: 20px 22px 24px; }
.video-card__title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
  margin-bottom: 8px;
  transition: color var(--t-fast) var(--ease);
}
.video-card:hover .video-card__title { color: var(--steel-700); }
.video-card__meta {
  font-size: 13px;
  color: var(--gray);
  display: flex;
  gap: 14px;
}

/* --------------------------------------------------------------------------
   12. 数据指标 / 特性
   -------------------------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.stat-grid--dark { border-color: var(--line); }
.stat {
  padding: 36px 28px;
  border-left: 1px solid var(--line);
}
.stat-grid--dark .stat { border-color: var(--line); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat b {
  display: block;
  font-size: 42px; /* 2026-09-08 桌面固定台式字号 */
  font-weight: 600;
  line-height: 1.05;
  color: var(--steel-700);
  font-variant-numeric: tabular-nums;
}
.stat-grid--dark .stat b { color: var(--steel-700); }
.stat span {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-500);
  letter-spacing: 0.04em;
}
.stat-grid--dark .stat span { color: var(--ink-500); }

/* 使命愿景价值观卡片（关于我们页） */
.vmv-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 30px 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.vmv-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(11, 59, 96, .08);
  border-color: #7ba9c9;
}
.vmv-card__icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.vmv-card__icon--vision  { background: #e8893b; }
.vmv-card__icon--mission { background: #4ea36b; }
.vmv-card__icon--values  { background: #d8a93b; }
.vmv-card__body { flex: 1 1 auto; min-width: 0; }
.vmv-card__title {
  font-size: 24px;
  font-weight: 700;
  color: #062a45;
  margin: 0 0 12px;
}
.vmv-card__desc {
  font-size: 17px;
  line-height: 1.8;
  color: #33404f;
}

.feat-list { display: grid; gap: 2px; }
.feat {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.feat__no {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--steel-600);
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}
.feat h4 { font-size: 18px; margin-bottom: 8px; }
.feat p { margin: 0; font-size: 14.5px; color: var(--ink-500); line-height: 1.8; }

.check-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-600);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 10px;
  height: 10px;
  border-left: 2px solid var(--steel-600);
  border-bottom: 2px solid var(--steel-600);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   13. 时间轴
   -------------------------------------------------------------------------- */
.timeline { position: relative; padding-left: 0; }
.timeline::before {
  content: "";
  position: absolute;
  left: 118px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}
.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 40px;
  padding-bottom: 40px;
}
.tl-item__year {
  font-size: 22px;
  font-weight: 600;
  color: var(--steel-700);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-right: 4px;
}
.tl-item__body { position: relative; padding-left: 28px; }
.tl-item__body::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 10px;
  width: 11px;
  height: 11px;
  background: var(--paper);
  border: 2px solid var(--steel-700);
  border-radius: 50%;
}
.tl-item h4 { font-size: 18px; margin-bottom: 8px; }
.tl-item p { margin: 0; font-size: 14.5px; color: var(--ink-500); line-height: 1.8; }

/* --------------------------------------------------------------------------
   14. 产品中心：侧边栏 + 网格 + 筛选 + 分页
   -------------------------------------------------------------------------- */
.layout-sidebar {
  display: grid;
  grid-template-columns: 268px 1fr;
  gap: 56px;
  align-items: start;
}

.side {
  position: -webkit-sticky; position: sticky;
  top: calc(var(--header-h) + 60px);
  border: 1px solid var(--line);
  background: var(--paper);
}
.side__head {
  padding: 20px 24px;
  background: var(--steel-700);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.side__block { padding: 20px 24px; border-bottom: 1px solid var(--line); }
.side__block:last-child { border-bottom: 0; }
.side__title {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
}
.side__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  font-size: 15px;
  color: var(--ink-600);
  border-bottom: 1px dashed var(--line);
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.side__link:last-child { border-bottom: 0; }
.side__link:hover { color: var(--steel-700); padding-left: 6px; }
.side__link.is-active {
  color: var(--steel-700);
  font-weight: 600;
  padding-left: 6px;
}
.side__link em {
  font-style: normal;
  font-size: 12px;
  color: var(--gray);
  font-variant-numeric: tabular-nums;
}

.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px 20px;
  margin-bottom: 28px;
  background: var(--mist);
  border: 1px solid var(--line);
}
.filter-bar__group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-chip {
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  font-size: 13.5px;
  color: var(--ink-600);
  border-radius: var(--radius);
  transition: all var(--t-fast) var(--ease);
}
.filter-chip:hover { border-color: var(--ink-700); }
.filter-chip.is-active {
  background: var(--steel-700);
  border-color: var(--steel-700);
  color: #fff;
}
.filter-count { font-size: 13.5px; color: var(--ink-500); }
.filter-count b { color: var(--steel-700); font-variant-numeric: tabular-nums; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.p-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform var(--t) var(--ease-out),
    box-shadow var(--t) var(--ease-out), border-color var(--t) var(--ease);
}
.p-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-2);
}
.p-card__media { position: relative; background: var(--mist); overflow: hidden; }
.p-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.p-card:hover .p-card__media img { transform: scale(1.05); }
.p-card__code {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  padding: 5px 11px;
  background: rgba(13, 15, 18, 0.84);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}
.p-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 24px;
}
.p-card__model {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--steel-600);
  font-weight: 600;
  margin-bottom: 8px;
}
.p-card__name {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 10px;
  transition: color var(--t-fast) var(--ease);
}
.p-card:hover .p-card__name { color: var(--steel-700); }
.p-card__desc {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-500);
}
.p-card__specs {
  display: flex;
  gap: 16px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-500);
}
.p-card__specs b { color: var(--ink-700); font-weight: 600; }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
  flex-wrap: wrap;
}
.pager__btn {
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  font-size: 14px;
  color: var(--ink-600);
  font-variant-numeric: tabular-nums;
  transition: all var(--t-fast) var(--ease);
}
.pager__btn:hover:not(:disabled) {
  border-color: var(--steel-700);
  background: var(--steel-700);
  color: #fff;
}
.pager__btn.is-active {
  background: var(--steel-700);
  border-color: var(--steel-700);
  color: #fff;
  font-weight: 600;
}
.pager__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pager__dots { padding: 0 4px; color: var(--gray); }

.empty-state {
  padding: 80px 20px;
  text-align: center;
  border: 1px dashed var(--line-2);
  color: var(--ink-500);
}

/* --------------------------------------------------------------------------
   15. 详情页
   -------------------------------------------------------------------------- */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.detail-gallery__main { margin-bottom: 14px; }
.detail-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.detail-thumbs button {
  border: 1px solid var(--line);
  padding: 0;
  background: var(--paper);
  transition: border-color var(--t-fast) var(--ease);
}
.detail-thumbs button.is-active,
.detail-thumbs button:hover { border-color: var(--ink-800); }

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.spec-table th,
.spec-table td {
  padding: 14px 18px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.spec-table th {
  width: 34%;
  background: var(--mist);
  font-weight: 600;
  color: var(--ink-700);
}
.spec-table td { color: var(--ink-600); }

.article {
  /* 2026-09-21 用户要求：新闻详情页两侧留白减少 40%
     （1920 下每侧 530px → 318px）→ 860 → 1284 */
  max-width: 1284px;
  margin: 0 auto;
}
.article__meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 0;
  margin-bottom: 34px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--gray);
}
.article h2 {
  font-size: 26px;
  margin: 42px 0 16px;
  padding-left: 14px;
  border-left: 3px solid var(--steel-700);
}
.article h3 { font-size: 20px; margin: 30px 0 12px; }
.article p { font-size: 16px; line-height: 1.95; color: var(--ink-600); }
.article ul { margin: 0 0 1.2em; }
.article ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink-600);
}
.article ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 6px;
  height: 6px;
  background: var(--steel-600);
}
.article blockquote {
  margin: 30px 0;
  padding: 22px 26px;
  background: var(--mist);
  border-left: 3px solid var(--steel-700);
  color: var(--ink-600);
  font-size: 16px;
  line-height: 1.85;
}
.article__nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-500);
}
.article__nav a:hover { color: var(--steel-700); }

/* --------------------------------------------------------------------------
   16. FAQ 折叠
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 4px;
  text-align: left;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-800);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.faq__q:hover { color: var(--steel-700); }
.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--t) var(--ease-out), opacity var(--t) var(--ease);
}
.faq__icon::before { top: 9px; left: 0; width: 20px; height: 1.5px; }
.faq__icon::after { left: 9px; top: 0; width: 1.5px; height: 20px; }
.faq__item.is-open .faq__icon::after { transform: rotate(90deg); opacity: 0; }
.faq__item.is-open .faq__q { color: var(--steel-700); }
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-out);
}
.faq__a > div {
  padding: 0 60px 26px 4px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-500);
}

/* --------------------------------------------------------------------------
   17. 下载中心
   -------------------------------------------------------------------------- */
.dl-list { border-top: 1px solid var(--line); }
.dl-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 24px 8px;
  border-bottom: 1px solid var(--line);
  transition: background var(--t) var(--ease), padding var(--t) var(--ease);
}
.dl-item:hover { background: var(--mist); padding-left: 16px; }
.dl-item__ico {
  display: grid;
  place-items: center;
  width: 56px;
  height: 64px;
  /* 无外框底色：直接显示图标本身（图标自带填充色） */
  color: var(--ink-500, #5a626c);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
/* 图标自适应容器（容器在移动端会缩到 48×56，不能写死尺寸） */
.dl-item__ico img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.dl-item__title { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.dl-item__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--gray);
}
.dl-item__meta span { display: inline-flex; align-items: center; gap: 6px; }
.dl-item__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 22px;
  border: 1px solid var(--line-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-700);
  transition: all var(--t-fast) var(--ease);
  white-space: nowrap;
}
.dl-item__btn:hover {
  background: var(--steel-700);
  border-color: var(--steel-700);
  color: #fff;
}

/* --------------------------------------------------------------------------
   18. 表单 / 联系
   -------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-700);
}
.field label i { color: var(--danger); font-style: normal; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-size: 15px;
  outline: none;
  transition: border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; line-height: 1.8; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--steel-600);
  box-shadow: 0 0 0 3px rgba(15, 77, 122, 0.1);
}
.field input.is-error,
.field textarea.is-error { border-color: var(--danger); }
.field__err {
  font-size: 12.5px;
  color: var(--danger);
  min-height: 18px;
}
.form-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink-500);
}
.form-msg {
  display: none;
  margin-bottom: 20px;
  padding: 14px 18px;
  background: #eef4f9;
  border-left: 3px solid var(--steel-700);
  font-size: 14.5px;
  color: var(--ink-700);
}
.form-msg.is-show { display: block; }

.contact-list { border-top: 1px solid var(--line); }
.contact-list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.contact-list__ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-2);
  color: var(--steel-700);
}
.contact-list__label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 4px;
}
.contact-list__val { font-size: 16px; color: var(--ink-700); line-height: 1.7; }

/* --------------------------------------------------------------------------
   19. 页脚
   -------------------------------------------------------------------------- */
.footer {
  background: #eceff2;
  color: rgba(20, 24, 28, 0.62);
  font-size: 14.5px;
}
.footer__main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 48px;
  padding: 78px 0 56px;
}
.footer h4 {
  margin-bottom: 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #14181c;
}
.footer__logos {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.footer__logos .brand__logo {
  width: 120px;
  height: 44px;
}
/* 页脚 logo 固定框内 contain，避免被 overflow:hidden 裁切 */
.footer__logos .brand__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.footer__intro { line-height: 1.9; max-width: 40ch; }
.footer__links li { margin-bottom: 12px; }
.footer__links a {
  color: rgba(20, 24, 28, 0.62);
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.footer__links a:hover { color: #14181c; padding-left: 4px; }
.footer__contact li {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  line-height: 1.8;
}
.footer__contact b {
  flex-shrink: 0;
  width: 62px;
  font-weight: 500;
  color: rgba(20, 24, 28, 0.45);
}

.footer__bottom {
  border-top: 1px solid rgba(20, 24, 28, 0.1);
  padding: 26px 0;
}
.footer__bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(20, 24, 28, 0.45);
}
.footer__legal { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer__legal a:hover { color: #14181c; }

/* --------------------------------------------------------------------------
   20. 悬浮客服 + 视频弹窗
   -------------------------------------------------------------------------- */
.fab {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.fab__panel {
  position: absolute;
  right: calc(100% + 16px);   /* 相对主按钮，向右缘内侧弹出（图标左侧） */
  top: 50%;
  width: 268px;
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  transform: translateY(-50%) scale(0.96);
  transform-origin: right center;   /* 从图标侧向右展开 */
  opacity: 0;
  visibility: hidden;
  transition: all var(--t) var(--ease-out);
}
.fab.is-open .fab__panel {
  transform: translateY(-50%) scale(1);
  opacity: 1;
  visibility: visible;
}
.fab__panel h5 {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--ink-800);
}
.fab__panel p { margin: 0 0 14px; font-size: 13px; color: var(--ink-500); }
.fab__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-700);
}
.fab__item b { font-size: 16px; font-variant-numeric: tabular-nums; }
.fab__main {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: var(--steel-700);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(11, 59, 96, 0.42);
  transition: transform var(--t) var(--ease-out), background var(--t) var(--ease);
}
.fab__main:hover { transform: scale(1.07); background: var(--steel-600); }

.fab__top {
  position: absolute;
  right: 6px;
  top: calc(100% + 14px);   /* 浮在主按钮下方，不占 flex 流 */
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: rgba(13, 15, 18, 0.72);
  color: #fff;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--t) var(--ease-out);
}
.fab__top.is-show { opacity: 1; visibility: visible; transform: translateY(0); }
.fab__top:hover { background: var(--ink-800); }

.modal {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 8, 10, 0.88);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--t) var(--ease), visibility var(--t) var(--ease);
}
.modal.is-open { visibility: visible; opacity: 1; }
.modal__box {
  position: relative;
  width: min(1000px, 100%);
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.14);
  transform: scale(0.97);
  transition: transform var(--t) var(--ease-out);
}
.modal.is-open .modal__box { transform: scale(1); }
.modal__box video,
.modal__box .ph { width: 100%; }
.modal__close {
  position: absolute;
  top: -46px;
  right: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.modal__close:hover { background: #fff; color: #000; }
.modal__cap {
  padding: 14px 18px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  background: #0c0e11;
}

/* --------------------------------------------------------------------------
   21. 滚动揭示动画
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------------
   22. 响应式
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   断点 1560：宽屏收窄档
   根因：brand（双 Logo，flex-shrink:0，约 380px）+ 9 个 white-space:nowrap 的
   导航项（约 790px）+ 搜索框（flex-shrink:0，216px）+ 间距，合计约 1440px，
   已超过 .container 的 1280px 上限。笔记本常见视口——1920 屏 125% 缩放=1536、
   150% 缩放=1280、1366×768——都会把搜索框挤出右缘，再被 body 的
   overflow-x:hidden 直接裁掉（台式机 1920@100% 可完整放下，所以只在笔记本出问题）。
   此档压缩 Logo、导航与搜索框宽度，实测最低可塞进约 1150px。
   -------------------------------------------------------------------------- */
@media (max-width: 1560px) {
  .header__top .container,
  .header__bar > .container { padding-left: 24px; padding-right: 24px; }
  .header__bar > .container { gap: 16px; }
  .brand { gap: 12px; }
  .brand__logo { height: 48px; }
  .brand__logo--vis { height: 58px; top: 5.5px; }   /* 同比例缩小，底部对齐偏移按 (0.1969×58 − 0.1241×48) ≈ 5.5px 重算 */
  .brand__sep { height: 22px; }
  .nav__list { gap: 1px; }
  .nav__link { padding: 10px 8px; font-size: 14px; letter-spacing: 0.02em; }
  .nav__link::after { left: 8px; right: 8px; }
  /* 184px 是实测下限：输入框可用宽度 136px，placeholder「搜索产品 / 资料」需 95px。
     最窄的桌面档（视口 1181px）此时仍余约 19px，再窄会重新溢出。 */
  .search__form { width: 184px; padding: 0 4px 0 14px; }
}

/* ---------- 断点 1180：桌面导航收起，切换为汉堡抽屉。
   原先 1024px 才收起，但压缩后的桌面导航最低只放得进约 1150px，
   1025–1180px 区间会再次溢出，故收起断点同步上移。 ---------- */
@media (max-width: 1180px) {
  :root { --header-h: 76px; }
  .header__top { display: none; }
  .nav, .header__bar .search { display: none; }
  .burger { display: block; }
}

@media (max-width: 1200px) {
  .container { padding: 0 32px; }
  .split { gap: 56px; }
  .layout-sidebar { grid-template-columns: 232px 1fr; gap: 40px; }
}

@media (max-width: 1024px) {
  .hero { margin-top: 0; height: 86vh; min-height: 560px; }
  .page-banner { margin-top: var(--header-h); }
  .page-banner__inner { padding-top: 4px; padding-bottom: 4px; }
  .page-banner h1 { font-size: 26px; }
  .h-section { font-size: 34px !important; } /* 覆盖部分页面 h2 的内联台式字号 */
  .h-sub { font-size: 18px; }
  .stat b { font-size: 34px; }
  .section { padding: 80px 0; }
  .page-banner + .section { padding-top: 40px; }
  .section--lg { padding: 96px 0; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split--wide-left, .split--wide-right { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--6 { grid-template-columns: repeat(3, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .layout-sidebar { grid-template-columns: 1fr; }
  .side { position: static; }
  .detail-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer__main { grid-template-columns: 1fr 1fr; gap: 40px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}

@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .section { padding: 60px 0; }
  .page-banner + .section { padding-top: 30px; }
  .section--lg { padding: 72px 0; }
  .grid, .grid--2, .grid--3, .grid--4, .grid--6 { grid-template-columns: 1fr; gap: 24px; }
  .product-grid { grid-template-columns: 1fr; gap: 20px; }
  /* 首屏在移动端：满宽 16:9 视频 banner（不改原视频比例）。
     2026-09-09 曾用 height:auto + 240px 视频条（文字层删除后留大片空白）；
     2026-09-18 又改成 72vh 满屏 + object-fit:cover —— 但竖屏容器裁切/放大 16:9 视频，
     比例失调、显「太大」。现让 .hero__bg 自身为 16:9（aspect-ratio），视频以 cover 充满该
     16:9 容器 → 原比例、无裁切、无黑边，页面内容紧随其后。 */
  .hero { height: auto; min-height: 0; max-height: none; padding: 0; }
  .hero__bg {
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background-color: var(--ink-900);   /* 只改颜色，保留上面的内联底图 */
  }
  .page-banner__inner { padding-top: 4px; padding-bottom: 4px; }
  .page-banner h1 { font-size: 24px; }
  .h-section { font-size: 28px !important; } /* 覆盖部分页面 h2 的内联台式字号 */
  .h-sub { font-size: 17px; }
  .stat b { font-size: 30px; }
  .form-grid { grid-template-columns: 1fr; }
  .footer__main { grid-template-columns: 1fr; gap: 36px; padding: 56px 0 40px; }
  .footer__bottom .container { flex-direction: column; align-items: flex-start; }
  .news-row { grid-template-columns: 1fr; gap: 18px; }
  .dl-item { grid-template-columns: 1fr; gap: 14px; }
  .dl-item__ico { width: 48px; height: 56px; }
  .dl-item__btn { justify-self: start; }
  .timeline::before { left: 0; }
  .tl-item { grid-template-columns: 1fr; gap: 10px; padding-left: 28px; }
  .tl-item__year { text-align: left; }
  .tl-item__body { padding-left: 0; }
  .tl-item__body::before { left: -33px; }
  .stat-grid { grid-template-columns: 1fr; }
  .stat, .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+2) { border-top: 1px solid var(--line); }
  .detail-thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .filter-bar { padding: 14px; }
  .fab { right: 16px; top: 50%; transform: translateY(-50%); }
  .fab__main { width: 50px; height: 50px; }
  .btn { height: 48px; padding: 0 24px; }
  .row-between { align-items: flex-start; }
  .article h2 { font-size: 22px; }
}

@media (max-width: 480px) {
  .brand__logo { height: 49px; }
  .brand__logo--vis { height: 59px; top: 5.5px; }   /* 移动端：同比例放大 + 对齐偏移同步（59−49 对应计算） */
  .brand__sep { display: none; }
  .searchbox__panel { margin: 6vh 12px 0; }
  /* 2026-09-18 修复：原 `.hero__bg { height: 190px; }` 已删除。
     它是"190px 视频条"旧设计的残留——移动端首屏的 .hero__poster / .hero__video
     是 .hero__bg 的子元素、按 height:100% 取高，被这条规则压到 190px，
     下方露出 .hero 的深色底（72vh）形成大片黑色。删除后 .hero__bg 回归 inset:0 满屏，
     视频/海报恢复铺满整个首屏（实测 190px → 608px）。 */
}


/* 联系我们 4 卡片（contact 页） */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.contact-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px 24px 28px;
  text-align: left;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.contact-card::after {
  content: "";
  position: absolute;
  top: auto; right: -40px; bottom: -40px; left: auto;
  width: 140px;
  height: 140px;
  background: var(--mist);
  opacity: .55;
  border-radius: 50%;
  z-index: 0;
}
.contact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(11, 59, 96, .08);
  border-color: var(--steel-300, #7ba9c9);
}
.contact-card__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  margin-bottom: 18px;
}
.contact-card__icon--addr   { background: #e8893b; }
.contact-card__icon--mail   { background: #e8893b; }
.contact-card__icon--phone  { background: #e8893b; }
.contact-card__icon--mobile { background: #e8893b; }
.contact-card__title {
  position: relative;
  z-index: 1;
  font-size: 22px;
  font-weight: 700;
  color: var(--steel-900, #062a45);
  margin: 0 0 12px;
}
.contact-card__val {
  position: relative;
  z-index: 1;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-500, #5b6675);
  margin: 0;
  word-break: break-all;
}
.contact-card__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #fff;
  margin-bottom: 22px;
}
.contact-card__icon svg { width: 26px; height: 26px; }
.contact-card {
  padding: 36px 28px 32px;
}
/* 始终保持横排：中等屏 4 列，中小屏 2x2，最小屏也 2x2 不折单列 */
@media (max-width: 900px) {
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
}