/* ==========================================================================
   淮狮电子 · 条码识别与智能数据采集设备官网
   设计系统样式表 (PbootCMS 可直接套用)
   主题锁定: 浅色 / 工业蓝主色 #1f4a3c + 橙色小面积点缀 #c9a227 / 10px 圆角体系
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root {
  /* 中性色（取自 Logo 文字：墨绿黑，带一点青） */
  --ink:        #16211f;
  --ink-2:      #1f3134;
  --ink-3:      #3b4a47;
  --muted:      #5e6f6b;
  --muted-2:    #8a9995;
  --line:       #e2e7e3;
  --line-2:     #eef2ee;
  --surface:    #ffffff;
  --surface-2:  #f6f8f5;
  --surface-3:  #edf1ec;

  /* 主色：墨绿（取自 Logo 文字色，压深后用于按钮与链接） */
  --accent:        #1f4a3c;
  --accent-strong: #163a2f;
  --accent-bright: #2c6350;
  --accent-soft:   #d5e4dc;
  --accent-tint:   #eff5f1;

  /* 品牌金（取自 Logo 圆形渐变）：只做点缀，不做大面积主色
     —— 金在浅底上对比度仅 2.6:1，作正文色会看不清 */
  --gold:        #c9a227;
  --gold-deep:   #8a6b15;
  --gold-soft:   #e5cf87;
  --gold-tint:   #faf3e0;

  /* 兼容旧变量名：原先的橙色点缀全部由金色接管 */
  --orange:      #c9a227;
  --orange-deep: #8a6b15;
  --orange-tint: #faf3e0;

  /* 形状 */
  --r:    10px;
  --r-sm: 6px;
  --r-lg: 16px;

  /* 排版 */
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC",
               "Noto Sans SC", "Microsoft YaHei", system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-num:  "Barlow", "Helvetica Neue", Arial, var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
               "Liberation Mono", Menlo, monospace;

  /* 尺寸 */
  --container: 1280px;
  --nav-h: 74px;
  --sp-sec: 92px;

  /* 阴影 (统一带蓝灰色调，不用纯黑) */
  --shadow-1: 0 1px 2px rgba(22, 33, 31, .05);
  --shadow-2: 0 8px 24px rgba(22, 33, 31, .08);
  --shadow-3: 0 20px 48px rgba(22, 33, 31, .12);

  /* 层级 */
  --z-nav: 100;
  --z-drawer: 200;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* 锚点目标偏移：抵消 sticky 导航（72px）与顶部信息条，避免标题被遮挡 */
#inquiry, #wechat { scroll-margin-top: 88px; }


body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-3);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.01em;
}

p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, figure { display: block; max-width: 100%; }
a  { color: inherit; text-decoration: none; transition: color .2s ease; }
button, input, select, textarea { font: inherit; color: inherit; }

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

.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;
}

.skip-link {
  position: absolute; top: -60px; left: 16px; z-index: 999;
  background: var(--accent); color: #fff;
  padding: 10px 18px; border-radius: var(--r);
}
.skip-link:focus { top: 12px; }

/* ---------- 3. 布局工具 ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 32px;
}

.section { padding-block: var(--sp-sec); }
.section--tight { padding-block: 64px; }
.section--alt { background: var(--surface-2); }
.section--line { border-top: 1px solid var(--line); }
/* 深色带：用于页面中段制造节奏断点，避免整页“白/灰”机械交替 */
.section--dark { background: var(--ink); color: rgba(255, 255, 255, .68); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .lead { color: rgba(255, 255, 255, .6); }

.grid { display: grid; gap: 24px; }

/* ---------- 4. 排版组件 ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--orange);
}

.h-display {
  font-size: clamp(36px, 4.4vw, 58px);
  line-height: 1.14;
  letter-spacing: -.022em;
}
.h-sec {
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.22;
}
.h-sub {
  font-size: clamp(20px, 1.7vw, 23px);
}

.lead {
  font-size: 16px;
  color: var(--muted);
  max-width: 62ch;
}
.text-muted { color: var(--muted); }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.sec-head { margin-bottom: 44px; max-width: 780px; }
.sec-head .h-sec { margin-bottom: 14px; }

.sec-head--row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; max-width: none;
}

/* ---------- 5. 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; white-space: nowrap;
  padding: 0 26px; height: 50px;
  border: 1px solid transparent; border-radius: var(--r);
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease,
              color .2s ease, transform .12s ease, box-shadow .2s ease;
}
.btn i { font-size: 18px; }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(31, 74, 60, .22); }
.btn--primary:hover { background: var(--accent-strong); color: #fff; box-shadow: 0 10px 26px rgba(31, 74, 60, .28); }

.btn--outline {
  background: transparent; color: var(--accent);
  border-color: rgba(31, 74, 60, .32);
}
.btn--outline:hover { background: var(--accent-tint); border-color: var(--accent); }

.btn--ghost-light {
  background: rgba(255, 255, 255, .08); color: #fff;
  border-color: rgba(255, 255, 255, .38);
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, .16); color: #fff; }

.btn--solid-light { background: #fff; color: var(--accent-strong); }
.btn--solid-light:hover { background: #eaf1fb; color: var(--accent-strong); }

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

.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; color: var(--accent); font-size: 14px;
}
.link-arrow i { transition: transform .2s ease; font-size: 16px; }
.link-arrow:hover i { transform: translateX(4px); }

/* ---------- 6. 图片占位位 (替换真实产品图后可整块删除) ---------- */
.media {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--r); background: var(--surface-2);
}
/* 真实图片必须覆盖在 .media__slot 占位层之上（占位层是 absolute，默认会盖住 static 的 img） */
.media img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }

/* 无图时的静默底板：去掉早先的网格斜纹（那是“等待填充”的视觉信号），
   只留一个低对比度图标。占位文案不展示，避免与下方标题重复。 */
.media__slot {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  padding: 20px; text-align: center;
  color: var(--muted-2);
  background-color: var(--surface-2);
}
.media__slot i { font-size: 30px; color: rgba(31, 74, 60, .26); }
.media__slot b {
  font-size: 13px; font-weight: 600; color: var(--ink-3); letter-spacing: .01em;
}
.media__slot span {
  font-size: 12px; letter-spacing: .04em; max-width: 92%;
  color: var(--muted-2);
}
/* 产品卡下方已有同名标题，图位里的重复文字收掉 */
.pcard__media .media__slot span { display: none; }
.media--4x3  { aspect-ratio: 4 / 3; }
.media--1x1  { aspect-ratio: 1 / 1; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--3x2  { aspect-ratio: 3 / 2; }
.media--tall { aspect-ratio: 3 / 4; }
.media--fill { height: 100%; }

.media--dark { background: var(--ink-2); }
.media--dark .media__slot {
  background-color: var(--ink-2);
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  color: rgba(255, 255, 255, .5);
}
.media--dark .media__slot i { color: rgba(140, 185, 245, .6); }
.media--dark .media__slot b { color: rgba(255, 255, 255, .84); }
.media--dark .media__slot span { color: rgba(255, 255, 255, .42); }

/* ---------- 7. 顶部导航 ---------- */
.topbar {
  background: var(--ink);
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 40px; gap: 24px;
}
.topbar__list { display: flex; align-items: center; gap: 26px; }
.topbar__list li { display: flex; align-items: center; gap: 7px; }
.topbar__list i { font-size: 15px; color: var(--muted-2); }
.topbar a:hover { color: #fff; }
.topbar__tel { color: #fff; font-weight: 600; font-family: var(--font-num); letter-spacing: .02em; }

.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  display: flex; align-items: center; gap: 32px;
  height: var(--nav-h);
}
.nav__brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; }
.nav__logo { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--accent-tint); border-radius: 8px; flex-shrink: 0; }
.nav__logo i { font-size: 20px; color: var(--accent); }
.nav__logo-img { height: 36px; width: auto; max-width: 160px; object-fit: contain; flex-shrink: 0; }
.nav__brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.nav__brand-text b { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: .02em; }
.nav__brand-text i { font-size: 10px; font-weight: 600; letter-spacing: .18em; color: var(--muted-2); font-style: normal; }

.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand__mark { width: 38px; height: 38px; flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__cn { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: .02em; }
.brand__en {
  font-size: 10px; font-weight: 600; letter-spacing: .18em;
  color: var(--muted-2); text-transform: uppercase;
}

.nav__menu { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__item { position: relative; }
.nav__link {
  display: flex; align-items: center; gap: 5px;
  padding: 0 15px; height: var(--nav-h);
  font-size: 15px; font-weight: 500; color: var(--ink-2);
  border-bottom: 2px solid transparent;
}
.nav__link i { font-size: 13px; color: var(--muted-2); transition: transform .2s ease; }
.nav__link:hover { color: var(--accent); }
.nav__item.is-active > .nav__link {
  color: var(--accent); font-weight: 600; border-bottom-color: var(--accent);
}

.nav__drop {
  position: absolute; top: 100%; left: -12px; min-width: 232px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-3);
  padding: 8px; opacity: 0; visibility: hidden;
  transform: translate(var(--drop-shift, 0px), 6px);
  /* 关闭时保留 0.24s 缓冲：鼠标斜向移动/偶发误触不会立刻闪现掉菜单 */
  transition: opacity .16s ease .05s, transform .16s ease .05s, visibility 0s linear .24s;
}
.nav__item:hover .nav__drop,
.nav__item:focus-within .nav__drop {
  opacity: 1; visibility: visible;
  transform: translate(var(--drop-shift, 0px), 0);
  transition: opacity .15s ease .05s, transform .15s ease .05s, visibility 0s;
}
.nav__item:hover .nav__link i { transform: rotate(180deg); }
.nav__drop a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 14px; color: var(--ink-2);
}
.nav__drop a i { font-size: 17px; color: var(--muted-2); }
.nav__drop a:hover { background: var(--accent-tint); color: var(--accent); }
.nav__drop a:hover i { color: var(--accent); }
.nav__drop-group {
  font-weight: 700 !important; color: var(--ink) !important;
  font-size: 13px !important; padding: 10px 12px 8px !important;
  cursor: pointer; border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.nav__drop-group i { color: var(--accent) !important; font-size: 16px !important; }
.nav__drop-group:hover { color: var(--accent) !important; }
.nav__drop-child { padding-left: 32px !important; font-size: 13.5px !important; }

/* 产品中心下拉：5 分类统一「标题 + 直接子级」+ featured，3×2 网格；大间距、淡分隔 */
.nav__drop--wide {
  width: min(920px, calc(100vw - 24px));
  display: flex; flex-direction: column;
  padding: 12px 12px 0;
  max-height: min(84vh, 720px); overflow-y: auto; overscroll-behavior: contain;
}
.nav__mega-body {
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: 30px; row-gap: 20px; align-items: start;
}
/* 每个分类格子结构一致：分类标题（带图标 + 下划线）+ 直接子级 */
.nav__cell { min-width: 0; display: flex; flex-direction: column; }
.nav__cell .nav__drop-group { margin-bottom: 4px; }
.nav__cell .nav__drop-child { padding-left: 10px !important; }

/* featured 卡片（第 6 格，视觉锚点） */
.nav__drop--wide .nav__mega-feature {
  align-self: stretch; justify-content: center;
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px; border: 1px solid #d5e4dc; border-radius: var(--r-sm);
  background: linear-gradient(135deg, #f4f8ff, #e9f2ff);
}
.nav__drop--wide .nav__mega-feature:hover { border-color: var(--accent); background: linear-gradient(135deg, #eaf2ff, #e6efea); }
.nav__mega-feature-t { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
.nav__mega-feature-t i { font-size: 15px; color: var(--accent); }
.nav__mega-feature-d { font-size: 12px; color: var(--muted-2); line-height: 1.45; }
.nav__mega-feature-cta { margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--accent); }
.nav__mega-feature-cta i { font-size: 14px; transition: transform .18s ease; }
.nav__drop--wide .nav__mega-feature:hover .nav__mega-feature-cta i { transform: translateX(3px); }

/* 底部「查看全部产品」 */
.nav__mega-all {
  position: sticky; bottom: 0; z-index: 1;
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  margin: 12px -12px 0; padding: 11px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 13px; font-weight: 700; color: var(--accent);
  border-radius: 0 0 var(--r) var(--r);
}
.nav__mega-all:hover { background: var(--accent-tint); }
.nav__mega-all i { font-size: 15px; transition: transform .18s ease; }
.nav__mega-all:hover i { transform: translateX(3px); }

.nav__cta { margin-left: 20px; flex-shrink: 0; }

/* 站内搜索按钮 */
.nav__search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: 8px; flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.nav__search i { font-size: 19px; color: var(--ink-2); }
.nav__search:hover { background: var(--accent-tint); border-color: var(--accent); }
.nav__search:hover i { color: var(--accent); }
.nav__search[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); }
.nav__search[aria-expanded="true"] i { color: #fff; }

/* 站内搜索条（导航下方展开） */
.searchbar {
  display: none;
  border-top: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 10px 24px rgba(22, 33, 31, .08);
}
.searchbar.is-open { display: block; }
.searchbar__inner { padding: 14px 0 18px; }
.searchbar__form {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface-2); padding: 4px 6px 4px 16px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.searchbar__form:focus-within {
  border-color: var(--accent); background: #fff;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.searchbar__form i { font-size: 18px; color: var(--muted-2); flex-shrink: 0; }
.searchbar__form input {
  flex: 1; min-width: 0; height: 40px;
  border: 0; outline: none; background: transparent;
  font-size: 15px; color: var(--ink-2);
}
.searchbar__form input::placeholder { color: var(--muted-2); }
.searchbar__form .btn { flex-shrink: 0; }

.nav__burger {
  display: none; margin-left: auto;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer;
}
.nav__burger i { font-size: 22px; color: var(--ink); }

/* 移动端抽屉 */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: rgba(22, 33, 31, .5);
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s;
  display: none;
}
.drawer.is-open { opacity: 1; visibility: visible; display: block; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(340px, 88vw); background: #fff;
  padding: 20px; overflow-y: auto;
  transform: translateX(100%); transition: transform .26s cubic-bezier(.16, 1, .3, 1);
  display: flex; flex-direction: column; gap: 6px;
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px; margin-bottom: 10px; border-bottom: 1px solid var(--line);
}
.drawer__close {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--surface-2); border: 0; border-radius: var(--r); cursor: pointer;
}
.drawer__close i { font-size: 20px; }

/* 抽屉搜索框 */
.drawer__search {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface-2); padding: 2px 4px 2px 14px;
  margin-bottom: 10px;
  transition: border-color .2s ease, background-color .2s ease;
}
.drawer__search:focus-within { border-color: var(--accent); background: #fff; }
.drawer__search i { font-size: 17px; color: var(--muted-2); flex-shrink: 0; }
.drawer__search input {
  flex: 1; min-width: 0; height: 38px;
  border: 0; outline: none; background: transparent;
  font-size: 15px; color: var(--ink-2);
}
.drawer__search input::placeholder { color: var(--muted-2); }
.drawer__search button {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--accent); color: #fff; border: 0; border-radius: var(--r-sm);
  cursor: pointer; flex-shrink: 0;
}
.drawer__search button i { color: #fff; font-size: 17px; }

.drawer a.drawer__link {
  padding: 13px 12px; border-radius: var(--r);
  font-size: 16px; font-weight: 500; color: var(--ink-2);
}
.drawer a.drawer__link:hover { background: var(--surface-2); color: var(--accent); }
.drawer__link--sub { font-size: 15px !important; font-weight: 600 !important; padding: 11px 12px !important; }
.drawer__link--child { font-size: 13.5px !important; padding: 8px 12px 8px 24px !important; color: var(--muted) !important; }
.drawer__sub { padding: 2px 0 8px 12px; display: grid; gap: 2px; }
.drawer__sub a { padding: 8px 12px; font-size: 14px; color: var(--muted); border-radius: var(--r); }
.drawer__sub a:hover { color: var(--accent); background: var(--surface-2); }
.drawer .btn { margin-top: 12px; }

/* ---------- 7.5 返回顶部浮动按钮（移动端为主） ---------- */
.backtop {
  position: fixed; right: 14px; bottom: 78px;
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: grid; place-items: center;
  z-index: 80; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  pointer-events: none;
}
.backtop.is-shown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.backtop i { font-size: 20px; }
.backtop:hover { background: var(--accent); }
@media (max-width: 1024px) { .backtop { right: 12px; bottom: 70px; } }

/* ---------- 8. 首页主视觉 ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink);
  color: rgba(255, 255, 255, .78);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 80% at 20% 0%, #000 30%, transparent 78%);
}
.hero::after {
  content: ""; position: absolute; top: -20%; right: -10%;
  width: 55%; height: 130%;
  background: radial-gradient(closest-side, rgba(24, 92, 176, .35), transparent 75%);
  pointer-events: none;
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 56px; align-items: center;
  padding-top: 76px; padding-bottom: 64px;
}
.hero .eyebrow { color: #e5cf87; }
.hero .eyebrow::before { background: #e5cf87; }
.hero h1 {
  color: #fff; margin: 20px 0 22px;
  font-size: clamp(32px, 3.9vw, 50px);
  line-height: 1.2;
}
.hero h1 em { font-style: normal; color: #e5cf87; }
.hero__lead {
  font-size: 16.5px; color: rgba(255, 255, 255, .7);
  max-width: 46ch; margin-bottom: 34px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* 首屏现场图：单张大图 + 图注（取代早期的多格占位拼贴） */
.hero__shot {
  margin: 0; position: relative;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r); overflow: hidden;
  background: var(--ink-2);
}
.hero__shot-frame { position: relative; aspect-ratio: 4 / 3; background: var(--ink-2); }
.hero__shot-frame img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
}
/* 无图兜底：只显示图标与图注，不再出现 “Banner 位” 这类开发占位文案 */
.hero__shot-fallback {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 24px; text-align: center;
  background-color: var(--ink-2);
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 30px 30px;
}
.hero__shot-fallback i { font-size: 44px; color: rgba(140, 185, 245, .55); }
.hero__shot-fallback b { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .7); }
.hero__shot-cap {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 18px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
}
.hero__shot-cap b { font-size: 13.5px; font-weight: 600; color: #fff; }
.hero__shot-cap span {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em;
  color: rgba(255, 255, 255, .48); text-align: right;
}

/* 首屏事实条：四项均可在本站核对（机型数取自产品中心） */
.hero__facts {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: .85fr 1.1fr 1.5fr .95fr;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.fact { padding: 24px 22px 28px; }
.fact + .fact { border-left: 1px solid rgba(255, 255, 255, .12); }
.fact span {
  display: block; margin-bottom: 9px;
  font-size: 12px; letter-spacing: .14em;
  color: rgba(255, 255, 255, .42);
}
.fact b { display: block; font-size: 16px; font-weight: 600; color: #fff; line-height: 1.5; }
.fact b em {
  font-style: normal; font-family: var(--font-num);
  font-size: 26px; font-weight: 700; margin-right: 4px; vertical-align: -1px;
}
/* 多项取值：以 · 分隔并按整项换行，避免中文被从词中间截断 */
.fact__list { display: flex; flex-wrap: wrap; gap: 4px 0; }
.fact__list i { font-style: normal; }
.fact__list i:not(:last-child)::after {
  content: "·"; margin: 0 9px; font-weight: 400;
  color: rgba(255, 255, 255, .3);
}

/* ---------- 9. 供货品牌与自有产品（细线横带，不用格子框） ---------- */
.logowall {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 44px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.logowall__label {
  font-size: 12.5px; letter-spacing: .1em; color: var(--muted-2);
}
.logowall__item {
  display: flex; align-items: center; min-height: 34px;
}
.logowall__item img { max-height: 34px; width: auto; opacity: .78; transition: opacity .2s ease; }
.logowall__item:hover img { opacity: 1; }
.logowall__txt {
  font-size: 17px; font-weight: 700; letter-spacing: .01em;
  color: var(--ink-2); white-space: nowrap;
}

/* ---------- 10. 产品卡片 ---------- */
.prodgrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}
.prodgrid > .pcard:nth-child(1),
.prodgrid > .pcard:nth-child(2) { grid-column: span 3; flex-direction: row; align-items: stretch; }
.prodgrid > .pcard:nth-child(1) .pcard__media,
.prodgrid > .pcard:nth-child(2) .pcard__media { width: 46%; flex-shrink: 0; border-bottom: 0; border-right: 1px solid var(--line-2); }
.prodgrid > .pcard:nth-child(3),
.prodgrid > .pcard:nth-child(4),
.prodgrid > .pcard:nth-child(5) { grid-column: span 2; }

.pcard {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pcard:hover {
  border-color: rgba(31, 74, 60, .4);
  box-shadow: var(--shadow-2);
  transform: translateY(-3px);
}
.pcard--wide { flex-direction: row; align-items: stretch; }
.pcard--wide .pcard__media { width: 46%; flex-shrink: 0; }
.pcard--wide .pcard__body { flex: 1; }

.pcard__media { background: #fff; border-bottom: 1px solid var(--line-2); max-height: 280px; overflow: hidden; }
/* 产品图统一“完整不裁切 + 白底”：不同来源的原厂图裁切后视觉大小差异很大，
   contain 能把它们拉到同一观感基准上 */
.pcard__media img,
.galgrid img { object-fit: contain; }
.pcard--wide .pcard__media { border-bottom: 0; border-right: 1px solid var(--line-2); }
.pcard__body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pcard__cat {
  font-size: 12px; font-weight: 600; letter-spacing: .1em;
  color: var(--accent); text-transform: uppercase;
}
.pcard h3 { font-size: 19px; }
.pcard p { font-size: 14px; color: var(--muted); }
.pcard__specs {
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 6px;
}
.chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-3);
}
.chip--accent { background: var(--accent-tint); border-color: var(--accent-soft); color: var(--accent-strong); }
.pcard__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--line-2);
}

/* 首页产品 tab 切换 */
.prodtabs { }
.prodtabs__nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-bottom: 32px;
}
.prodtabs__tab {
  appearance: none; border: 1px solid var(--line); background: #fff;
  border-radius: var(--r); padding: 10px 24px; font-size: 14.5px;
  color: var(--ink-3); cursor: pointer; transition: all .2s ease;
}
.prodtabs__tab:hover { border-color: var(--accent-soft); color: var(--accent); }
.prodtabs__tab.is-active {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 4px 12px rgba(31, 74, 60, .18);
}
.prodtabs__panel { display: none; }
.prodtabs__panel.is-active { display: block; }

/* 首页产品等宽网格（覆盖产品列表页 .pgrid 的 3 列定义） */
.prodtabs__panel .pgrid { grid-template-columns: repeat(4, 1fr); }

/* 空状态：无产品时显示占位提示 */
.prodtabs__panel .pgrid:empty::after {
  content: "该分类暂无产品，敬请期待";
  display: block; grid-column: 1 / -1;
  text-align: center; padding: 52px 20px;
  color: var(--ink-3); font-size: 14.5px;
}

/* 每个 tab 底部的"查看全部"链接 */
.prodtabs__more {
  text-align: center; margin-top: 26px;
}
.prodtabs__more .btn { font-size: 14px; }
.pcard--simple .pcard__body {
  padding: 18px 16px 20px; text-align: center; gap: 0;
}
.pcard--simple h3 { font-size: 15.5px; line-height: 1.45; }
.pcard--simple h3 a { color: var(--ink); }
.pcard--simple h3 a:hover { color: var(--accent); }

/* ---------- 11. 优势 (无卡片，靠分隔线与留白) ---------- */
.adv {
  display: grid; grid-template-columns: repeat(2, 1fr);
  column-gap: 72px;
}
.adv__item {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px;
  padding: 34px 0; border-top: 1px solid var(--line);
}
.adv__item:nth-child(1), .adv__item:nth-child(2) { border-top: 0; padding-top: 0; }
.adv__icon {
  width: 52px; height: 52px; display: grid; place-items: center;
  border: 1px solid var(--accent-soft); border-radius: var(--r);
  background: var(--accent-tint); color: var(--accent);
  flex-shrink: 0;
}
.adv__icon i { font-size: 25px; }
.adv__item h3,
.adv__item p { grid-column: 2; min-width: 0; overflow-wrap: break-word; }
.adv h3 { font-size: 18px; margin-bottom: 8px; }
.adv p { font-size: 14.5px; color: var(--muted); }

/* ---------- 12. 应用行业（不留假图位：图标 + 名称 + 一句话，列数自适应不产生孤儿卡） ---------- */
.industry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 20px;
}
.icard {
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px 26px 26px;
  border-radius: var(--r); border: 1px solid var(--line);
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.icard:hover { border-color: rgba(31, 74, 60, .4); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.icard__icon {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--accent-tint); color: var(--accent);
  font-size: 24px; margin-bottom: 4px;
}
.icard h3 { font-size: 17.5px; }
.icard p { font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.icard__go {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto; padding-top: 8px;
  font-size: 13px; font-weight: 600; color: var(--accent);
}
.icard__go i { font-size: 15px; transition: transform .2s ease; }
.icard:hover .icard__go i { transform: translateX(4px); }

/* ---------- 13. 解决方案选项卡 ---------- */
.soltabs { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
.soltabs__list { display: grid; gap: 0; border-left: 2px solid var(--line); }
.soltab {
  display: flex; align-items: flex-start; gap: 14px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 18px 20px; margin-left: -2px;
  background: none; border: 0; border-left: 2px solid transparent;
  transition: background-color .2s ease, border-color .2s ease;
}
.soltab i { font-size: 22px; color: var(--muted-2); margin-top: 2px; transition: color .2s ease; }
.soltab b { display: block; font-size: 16px; color: var(--ink); font-weight: 600; }
.soltab span { font-size: 13px; color: var(--muted); }
.soltab:hover { background: var(--surface-2); }
.soltab.is-active { border-left-color: var(--accent); background: var(--accent-tint); }
.soltab.is-active i, .soltab.is-active b { color: var(--accent); }

.solpanel { display: none; }
.solpanel.is-active { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.solpanel h3 { font-size: 24px; margin-bottom: 14px; }
.solpanel p { font-size: 15px; color: var(--muted); margin-bottom: 22px; }
.solpanel__list { display: grid; gap: 11px; margin-bottom: 28px; }
.solpanel__list li { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink-3); }
.solpanel__list i { color: var(--accent); font-size: 18px; flex-shrink: 0; margin-top: 3px; }

/* ---------- 14. 企业实力 / 服务流程 ---------- */
.strength { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; }
.strength__stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; margin-top: 34px;
}
.strength__stat { background: #fff; padding: 22px 24px; }
.strength__stat strong {
  display: block; font-family: var(--font-num); font-size: 30px;
  color: var(--accent); line-height: 1.15;
}
.strength__stat span { font-size: 13.5px; color: var(--muted); }

/* 服务流程：竖线分隔的步骤条（.flow__step / .flow__dot 为早期未使用的类，已清理） */
.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.flow__item {
  display: flex; flex-direction: column; gap: 12px;
  padding: 4px 26px;
  border-left: 1px solid rgba(255, 255, 255, .14);
}
.flow__item:first-child { border-left: 0; padding-left: 0; }
.flow__no {
  font-family: var(--font-num); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; color: rgba(255, 255, 255, .38);
}
.flow__item i.ph { font-size: 26px; color: #e5cf87; }
.flow__item h3 { font-size: 16px; }
.flow__item p { font-size: 13.5px; color: rgba(255, 255, 255, .58); line-height: 1.75; }

/* ---------- 15. 询盘转化区 ---------- */
.cta {
  background: var(--accent-strong);
  color: rgba(255, 255, 255, .8);
  position: relative; overflow: hidden;
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 56px 56px;
}
.cta__inner {
  position: relative; display: grid; grid-template-columns: 1fr auto;
  gap: 48px; align-items: center;
  padding-block: 60px;
}
.cta h2 { color: #fff; font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 12px; }
.cta p { max-width: 54ch; font-size: 15.5px; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- 16. 表单 ---------- */
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.field label .req { color: #b3261e; margin-left: 3px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px;
  background: #fff; color: var(--ink);
  border: 1px solid #c9d3e0; border-radius: var(--r);
  font-size: 15px; transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 128px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #6e7b77; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 74, 60, .16);
}
.field__help { font-size: 12.5px; color: var(--muted); }
.field__error {
  display: none; font-size: 12.5px; color: #b3261e;
  align-items: center; gap: 5px;
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #b3261e; }
.field.has-error .field__error { display: flex; }

.form__note {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13px; color: var(--muted);
}
.form__note i { color: var(--accent); font-size: 16px; margin-top: 2px; }

.form-success {
  display: none; gap: 12px; align-items: flex-start;
  padding: 18px 20px; border-radius: var(--r);
  background: #eaf6ee; border: 1px solid #bfe0ca; color: #1c6b38;
  font-size: 14.5px;
}
.form-success.is-shown { display: flex; }
.form-success i { font-size: 20px; flex-shrink: 0; }

.btn.is-loading { pointer-events: none; opacity: .8; }
.btn.is-loading .btn__label::after {
  content: ""; display: inline-block; width: 13px; height: 13px;
  margin-left: 9px; vertical-align: -1px;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 17. 页面头部 (内页) ---------- */
.phead {
  background: var(--ink); color: rgba(255, 255, 255, .68);
  position: relative; overflow: hidden;
}
.phead::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(110% 90% at 12% 0%, #000 25%, transparent 80%);
}
.phead__inner { position: relative; padding-block: 60px 64px; }
.phead h1 { color: #fff; font-size: clamp(28px, 3.2vw, 42px); margin-bottom: 14px; }
.phead p { max-width: 60ch; font-size: 15.5px; }

.crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13px; color: rgba(255, 255, 255, .5); margin-bottom: 22px;
}
.crumb a:hover { color: #fff; }
.crumb i { font-size: 13px; }
.crumb--light { color: var(--muted); }
.crumb--light a:hover { color: var(--accent); }

/* ---------- 18. 产品中心页 ---------- */
.plist { display: grid; grid-template-columns: 268px 1fr; gap: 40px; align-items: start; }

.filter { border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.filter__group { padding: 10px 10px 4px; }
.filter__group + .filter__group { border-top: 1px solid var(--line); }
.filter__title {
  padding: 16px 20px 12px; font-size: 13px; font-weight: 700;
  letter-spacing: .08em; color: var(--ink); text-transform: uppercase;
}
.filter__parent {
  display: block; padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 600; color: var(--ink-2);
}
.filter__parent:hover { background: var(--surface-2); color: var(--accent); }
.filter__parent.is-active { background: var(--accent-tint); color: var(--accent); }
.filter__list { padding: 0 10px 14px; display: grid; gap: 2px; }
.filter__list a {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 14.5px; color: var(--ink-3);
}
.filter__list a span { font-size: 12px; color: var(--muted-2); font-family: var(--font-num); }
.filter__list a:hover { background: var(--surface-2); color: var(--accent); }
.filter__list a.is-active { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.filter__sub { padding: 2px 0 8px 12px; display: grid; gap: 2px; }
.filter__sub a { padding: 7px 12px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--muted); }
.filter__sub a:hover { background: var(--surface-2); color: var(--accent); }
.filter__sub a.is-active { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.filter__child {
  display: block; padding: 6px 12px 6px 20px; border-radius: var(--r-sm);
  font-size: 13px; color: var(--muted);
}
.filter__child:hover { background: var(--surface-2); color: var(--accent); }
.filter__child.is-active { background: var(--accent-tint); color: var(--accent); font-weight: 600; }

.aside-cta {
  margin-top: 20px; padding: 24px 22px; border-radius: var(--r);
  background: var(--ink); color: rgba(255, 255, 255, .7);
}
.aside-cta h4 { color: #fff; font-size: 17px; margin-bottom: 9px; }
.aside-cta p { font-size: 13.5px; margin-bottom: 18px; }
.aside-cta .tel {
  display: block; font-family: var(--font-num); font-size: 21px;
  color: #fff; font-weight: 700; margin-bottom: 16px;
}

.plist__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-bottom: 18px; margin-bottom: 26px;
  border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted);
}
.plist__count { font-family: var(--font-num); letter-spacing: .01em; }
.plist__sort { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.plist__sort-label { font-size: 13px; color: var(--muted-2); margin-right: 2px; }
.plist__sort button {
  padding: 7px 14px; border-radius: var(--r); cursor: pointer;
  background: #fff; border: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-3);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.plist__sort button:hover { border-color: var(--accent); color: var(--accent); }
.plist__sort button.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

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

.pager { display: flex; gap: 8px; justify-content: center; margin-top: 48px; }
.pager a, .pager span {
  min-width: 40px; height: 40px; padding: 0 12px;
  display: grid; place-items: center; border-radius: var(--r);
  border: 1px solid var(--line); background: #fff;
  font-size: 14px; color: var(--ink-3); font-family: var(--font-num);
}
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager .is-current { background: var(--accent); border-color: var(--accent); color: #fff; }
.pager a.page-num-current { background: var(--accent); border-color: var(--accent); color: #fff; cursor: default; }
.pager .is-disabled { color: var(--muted-2); background: var(--surface-2); }
.list-empty { text-align: center; color: var(--muted); padding: 60px 0; font-size: 15px; }

/* 空状态 */
.empty {
  padding: 72px 24px; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--r); background: var(--surface-2);
}
.empty i { font-size: 40px; color: var(--muted-2); }
.empty h3 { font-size: 18px; margin: 14px 0 8px; }
.empty p { font-size: 14px; color: var(--muted); margin-bottom: 20px; }

/* 骨架屏 */
.skeleton {
  background: linear-gradient(90deg, var(--surface-3) 25%, #f7f9fc 37%, var(--surface-3) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skeleton--media { aspect-ratio: 4 / 3; border-radius: var(--r) var(--r) 0 0; }
.skeleton--line { height: 12px; margin-bottom: 10px; }
.skeleton--line.w60 { width: 60%; }
.skeleton--line.w40 { width: 40%; }

/* ---------- 19. 产品详情页 ---------- */
.pdetail { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start; }
.pdetail > * { min-width: 0; }  /* grid 子项允许收缩，防溢出 */
.gallery__main {
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  width: 100%; max-height: 540px; max-width: 100%; background: var(--surface-2);
}
.gallery__main img { width: 100%; height: 100%; object-fit: contain; background: var(--surface-2); }
.gallery__main .media { width: 100%; }
/* 列表型版式（相关新闻）在无配图时直接收掉图位；卡片型版式保留图位做静默底板，
   以保证同一行卡片高度齐平。后台补图后自动显示。 */
.relnews__media:has(img[src*="/static/images/nopic.png"]) { display: none; }
.pcard__media img[src*="/static/images/nopic.png"],
.relnews__media img[src*="/static/images/nopic.png"],
.galgrid img[src*="/static/images/nopic.png"] { display: none; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.gallery__thumb {
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; cursor: pointer; background: #fff; padding: 0;
  aspect-ratio: 4 / 3; position: relative;
}
.gallery__thumb .media { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.gallery__thumb.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(31, 74, 60, .16); }

.pdetail__model {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em;
  color: var(--accent); margin-bottom: 12px;
}
.pdetail .pdetail__title { font-size: clamp(26px, 2.8vw, 34px); margin-bottom: 16px; }
.pdetail__lead { font-size: 15.5px; color: var(--muted); margin-bottom: 26px; }
.selling {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; margin-bottom: 28px;
}
.selling__item { background: #fff; padding: 18px 20px; display: flex; gap: 12px; }
.selling__item i { font-size: 21px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.selling__item b { display: block; font-size: 14.5px; color: var(--ink); }
.selling__item span { font-size: 13px; color: var(--muted); }
.pdetail__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.pdetail__cta { flex: 1 1 auto; justify-content: center; padding: 13px 22px; font-size: 15px; }
.pdetail__meta {
  display: flex; flex-wrap: wrap; gap: 20px;
  padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--muted);
}
.pdetail__meta strong { color: var(--ink-2); font-weight: 600; }

.tabbar {
  display: flex; gap: 4px; border-bottom: 1px solid var(--line);
  margin-bottom: 40px; overflow-x: auto;
}
.tabbar button {
  padding: 15px 22px; background: none; border: 0; cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap;
  font-size: 15px; font-weight: 500; color: var(--muted);
}
.tabbar button:hover { color: var(--accent); }
.tabbar button.is-active { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }
.tabpanel { display: none; }
.tabpanel.is-active { display: block; }

/* 参数：分组卡片而非长表格 */
.specgroups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.specgroup { border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.specgroup__head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  background: var(--surface-2); border-radius: var(--r) var(--r) 0 0;
}
.specgroup__head i { color: var(--accent); font-size: 19px; }
.specgroup__head b { font-size: 15px; color: var(--ink); }
.specgroup dl { margin: 0; padding: 10px 20px 18px; }
/* 只作用于 dl 里的键值行；原来写成 .specgroup div，把 __head 和 .spectable 也一起 flex 化了 */
.specgroup dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; }
.specgroup dt { font-size: 13.5px; color: var(--muted); flex: 0 0 auto; white-space: nowrap; }
.specgroup dd { margin: 0; font-size: 13.5px; color: var(--ink); font-weight: 600; text-align: right; min-width: 0; word-break: break-word; }
.spectable { margin: 0; padding: 10px 20px 18px; }
.spectable table { width: 100%; border-collapse: collapse; }
.spectable tr { border-bottom: 1px solid var(--line-2); }
.spectable tr:last-child { border-bottom: 0; }
.spectable th { text-align: left; font-size: 13.5px; color: var(--muted); font-weight: 600; padding: 11px 16px 11px 0; white-space: nowrap; width: 36%; vertical-align: top; }
.spectable td { font-size: 13.5px; color: var(--ink); font-weight: 600; padding: 11px 0; text-align: right; word-break: break-word; }

.feature-rows { display: grid; gap: 40px; }
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.feature-row:nth-child(even) .feature-row__media { order: -1; }
.feature-row h3 { font-size: 21px; margin-bottom: 12px; }
.feature-row p { font-size: 14.5px; color: var(--muted); }

/* ---------- 20. 案例 / 新闻 ---------- */
/* 列数自适应：2 条时铺满一行，3 条时三列，不再出现“2 张卡 + 1 个空位” */
.casegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.case {
  border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.case:hover { border-color: rgba(31, 74, 60, .4); box-shadow: var(--shadow-2); }
/* 后台没配图时整块隐藏图区，只留文字；补了图后自动恢复 */
.case__media:has(img[src*="/static/images/nopic.png"]) { display: none; }
.case__media img[src*="/static/images/nopic.png"] { display: none; }
.case__body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.case__tag { font-size: 12.5px; font-weight: 600; color: var(--accent); }
.case h3 { font-size: 18px; line-height: 1.45; }
.case h3 a:hover { color: var(--accent); }
.case p { font-size: 13.5px; color: var(--muted); }
.case__body .link-arrow { margin-top: auto; padding-top: 6px; }
.case__result {
  display: flex; gap: 22px; margin-top: auto;
  padding-top: 16px; border-top: 1px solid var(--line-2);
}
.case__result div strong {
  display: block; font-family: var(--font-num); font-size: 21px; color: var(--ink);
}
.case__result div span { font-size: 12.5px; color: var(--muted); }

/* 首页新闻列表样式已由 .newstiles/.newstile 取代（29.4 节），旧的 .newslist/.news 已移除 */

/* 图文新闻卡 */
.newscards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.newscard { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.newscard__body { padding: 20px 22px 22px; }
.newscard__meta { font-size: 12.5px; color: var(--muted-2); margin-bottom: 9px; font-family: var(--font-num); }
.newscard h3 { font-size: 16.5px; line-height: 1.5; margin-bottom: 9px; }
.newscard p { font-size: 13.5px; color: var(--muted); }
.newscard:hover { border-color: rgba(31, 74, 60, .4); box-shadow: var(--shadow-2); }

/* ---------- 21. 关于我们 ---------- */
.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.milestones { border-left: 2px solid var(--line); padding-left: 0; }
.milestone { position: relative; padding: 0 0 34px 32px; }
.milestone::before {
  content: ""; position: absolute; left: -7px; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent);
}
.milestone strong {
  font-family: var(--font-num); font-size: 17px; color: var(--accent);
  display: block; margin-bottom: 5px;
}
.milestone p { font-size: 14.5px; color: var(--muted); }

.capability { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.capability__item { background: #fff; padding: 30px 32px; }
.capability__item i { font-size: 26px; color: var(--accent); }
.capability__item h3 { font-size: 17px; margin: 14px 0 9px; }
.capability__item p { font-size: 14px; color: var(--muted); }

.honor { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ---------- 22. 联系我们 ---------- */
.contact { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
.contact__info { display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.contact__row { background: #fff; padding: 22px 24px; display: flex; gap: 16px; }
.contact__row i { font-size: 22px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.contact__row b { display: block; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.contact__row p, .contact__row a { font-size: 14.5px; color: var(--muted); }
.contact__row a:hover { color: var(--accent); }
.form-wrap { border: 1px solid var(--line); border-radius: var(--r); background: #fff; padding: 34px 36px 38px; }

/* ---------- 23. 页脚 ---------- */
.footer { background: var(--ink); color: rgba(255, 255, 255, .58); font-size: 14px; }
.footer__top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
  gap: 40px; padding-block: 64px 52px;
}
.footer h4 {
  color: #fff; font-size: 15px; margin-bottom: 20px; font-weight: 600;
}
.footer__links { display: grid; gap: 11px; }
.footer__links a { font-size: 14px; }
.footer a:hover { color: #fff; }
.footer__brand .brand__cn { color: #fff; }
.footer__brand .brand__en { color: rgba(255, 255, 255, .45); }
.footer__desc { margin: 20px 0 22px; font-size: 13.5px; line-height: 1.85; max-width: 34ch; }
.footer__contact { display: grid; gap: 12px; font-size: 13.5px; }
.footer__contact li { display: flex; gap: 10px; }
.footer__contact i { font-size: 17px; color: var(--muted-2); margin-top: 2px; }
.footer__tel {
  font-family: var(--font-num); font-size: 24px; font-weight: 700;
  color: #fff; display: block; margin-bottom: 6px;
}
.footer__qr { display: flex; gap: 14px; margin-top: 18px; }
.footer__qr .media { width: 96px; }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; padding-block: 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px; color: rgba(255, 255, 255, .45);
}
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: 18px; }

/* 移动端底部快捷条 */
.mobilebar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav);
  background: #fff; border-top: 1px solid var(--line);
  grid-template-columns: repeat(3, 1fr);
  box-shadow: 0 -4px 16px rgba(22, 33, 31, .08);
}
.mobilebar a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 4px 12px; font-size: 12px; color: var(--ink-3);
}
.mobilebar a i { font-size: 20px; color: var(--accent); }
.mobilebar a.is-primary { background: var(--accent); color: #fff; }
.mobilebar a.is-primary i { color: #fff; }

/* ---------- 24. 滚动进场动效 ---------- */
.reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.16, 1, .3, 1),
              transform .55s cubic-bezier(.16, 1, .3, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

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

/* ---------- 24b. 面包屑 / 区块标题 ---------- */
.breadcrumb { font-size: 13px; color: rgba(255, 255, 255, .6); margin-bottom: 14px; letter-spacing: .02em; }
.breadcrumb a { color: rgba(255, 255, 255, .72); }
.breadcrumb a:hover { color: #fff; }

.sechead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 40px;
}
.sechead__main { max-width: 72ch; }
.sechead .h-sec { margin: 10px 0 0; }
.sechead .lead { margin-top: 12px; }
.sechead__action { flex-shrink: 0; }

/* ---------- 24c. 文章详情 + 富文本 ---------- */
.article { max-width: 880px; margin: 0 auto; }
.article__head { text-align: center; padding-bottom: 26px; margin-bottom: 30px; border-bottom: 1px solid var(--line); }
.article__head .article__title { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.35; }
.article__meta { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 16px; color: var(--muted); font-size: 13.5px; font-family: var(--font-num); }
.article__meta i { margin-right: 6px; color: var(--muted-2); }
.article__cover { margin: 0 0 28px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.article__cover img { width: 100%; display: block; }
.article__pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; }
.article__pager span { color: var(--muted); }
.article__pager a { color: var(--ink-3); }
.article__pager a:hover { color: var(--accent); }

/* ---------- 解决方案详情页（content_solution.html） ---------- */
.sdetail {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 44px; align-items: center;
  padding: 44px 48px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.sdetail > * { min-width: 0; }
.sdetail__title { font-size: clamp(26px, 3vw, 38px); line-height: 1.3; margin: 14px 0; color: var(--ink); }
.sdetail__lead { font-size: 16px; line-height: 1.9; color: var(--ink-3); max-width: 54ch; }
.sdetail__meta { display: flex; flex-wrap: wrap; gap: 20px; margin: 18px 0 26px; color: var(--muted); font-size: 13.5px; font-family: var(--font-num); }
.sdetail__meta i { margin-right: 6px; color: var(--muted-2); }
.sdetail__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sdetail__media { aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.sdetail__media img { width: 100%; height: 100%; object-fit: cover; }

/* 无封面图时（JS 添加 .sdetail--no-media）：单栏居中布局 */
.sdetail--no-media {
  display: block;
  max-width: 820px;
  margin-left: auto; margin-right: auto;
  padding: 40px 48px;
}
.sdetail--no-media .sdetail__title { text-align: center; }
.sdetail--no-media .sdetail__lead { margin-left: auto; margin-right: auto; }
.sdetail--no-media .sdetail__meta { justify-content: center; }
.sdetail--no-media .sdetail__actions { justify-content: center; }
.sdetail--no-media .sdetail__media { display: none; }

.content { font-size: 15.5px; line-height: 1.9; color: var(--ink-2); }
.content p { margin: 0 0 1.1em; }
.content img { max-width: 100%; height: auto; border-radius: var(--r); margin: 8px 0; }
.content h2, .content h3, .content h4 { margin: 1.6em 0 .7em; color: var(--ink); line-height: 1.45; }
.content ul, .content ol { padding-left: 1.4em; margin: 0 0 1.1em; }
.content li { margin: 6px 0; }
.content blockquote { margin: 1.2em 0; padding: 12px 18px; border-left: 3px solid var(--accent); background: var(--accent-tint); border-radius: var(--r-sm); color: var(--ink-3); }
.content a { color: var(--accent); text-decoration: underline; }
.content table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.content th, .content td { border: 1px solid var(--line); padding: 8px 12px; font-size: 14px; }
.content th { background: var(--surface-2); }

/* ---------- 25. 响应式 ---------- */
@media (max-width: 1180px) {
  .footer__top { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
  .footer__col--hide { display: none; }
  .logowall { gap: 12px 32px; }
  .logowall__txt { font-size: 16px; }
}

@media (max-width: 1024px) {
  :root { --sp-sec: 68px; }
  .container { padding-inline: 24px; }
  .nav__menu, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .hero__inner { grid-template-columns: 1fr; gap: 40px; padding-top: 56px; padding-bottom: 56px; }
  /* 单列时 4:3 的现场图过高，压成 16:10 让首屏更紧凑 */
  .hero__shot-frame { aspect-ratio: 16 / 10; }
  .hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(3), .fact:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, .12); }
  .fact:nth-child(odd) { border-left: 0; }
  .prodgrid { grid-template-columns: repeat(2, 1fr); }
  .prodgrid > .pcard:nth-child(n) { grid-column: span 1; }
  .pcard--wide { flex-direction: column; }
  .pcard--wide .pcard__media { width: 100%; border-right: 0; border-bottom: 1px solid var(--line-2); }
  .soltabs { grid-template-columns: 1fr; gap: 28px; }
  .soltabs__list { grid-template-columns: repeat(2, 1fr); display: grid; border-left: 0; border-top: 1px solid var(--line); }
  .soltab { margin-left: 0; border-left: 0; border-top: 2px solid transparent; padding: 16px; }
  .soltab.is-active { border-left-color: transparent; border-top-color: var(--accent); }
  .strength { grid-template-columns: 1fr; gap: 44px; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .flow__item { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); padding: 24px 24px 24px 0; }
  .flow__item:nth-child(-n+2) { border-top: 0; padding-top: 4px; }
  .flow__item:nth-child(even) { padding-left: 24px; }
  .plist { grid-template-columns: 1fr; }
  .filter { display: none; }
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .prodtabs__panel .pgrid { grid-template-columns: repeat(2, 1fr); }
  .prodtabs__nav { gap: 8px; margin-bottom: 24px; }
  .prodtabs__tab { padding: 8px 18px; font-size: 14px; }
  .pdetail { grid-template-columns: 1fr; gap: 36px; }
  .specgroups { grid-template-columns: 1fr 1fr; }
  .casegrid, .newscards { grid-template-columns: repeat(2, 1fr); }
  .contact { grid-template-columns: 1fr; gap: 36px; }
  .about-intro { grid-template-columns: 1fr; gap: 36px; }
  .cta__inner { grid-template-columns: 1fr; gap: 28px; padding-block: 48px; }
  .honor { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 36px; padding-block: 48px 40px; }
  .mobilebar { display: grid; }
  body { padding-bottom: 62px; }
}

@media (max-width: 768px) {
  :root { --sp-sec: 56px; --nav-h: 64px; }
  body { font-size: 14.5px; }
  .container { padding-inline: 18px; }
  .topbar__list li:not(:first-child) { display: none; }
  .sec-head { margin-bottom: 30px; }
  .sec-head--row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .adv { grid-template-columns: 1fr; column-gap: 0; }
  .adv__item { border-top: 1px solid var(--line); padding: 24px 0; }
  .adv__item:nth-child(1) { border-top: 0; padding-top: 0; }
  .adv__item:nth-child(2) { border-top: 1px solid var(--line); padding-top: 24px; }
  .pcard__media { max-height: 220px; }
  .fact { padding: 18px 16px 20px; }
  .fact span { font-size: 11.5px; letter-spacing: .1em; }
  .fact b { font-size: 14.5px; }
  .fact b em { font-size: 22px; }
  .logowall { gap: 10px 24px; padding: 22px 0; }
  .logowall__label { width: 100%; }
  .logowall__txt { font-size: 15.5px; }
  .prodgrid, .industry, .pgrid, .casegrid, .newscards,
  .specgroups, .selling, .capability, .honor { grid-template-columns: 1fr; }
  .industry { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .prodtabs__panel .pgrid { grid-template-columns: 1fr; }
  .prodtabs__nav { gap: 8px; }
  .prodtabs__tab { padding: 8px 14px; font-size: 13.5px; }
  .solpanel.is-active { grid-template-columns: 1fr; gap: 26px; }
  .soltabs__list { grid-template-columns: 1fr; }
  .feature-row { grid-template-columns: 1fr; gap: 22px; }
  .feature-row:nth-child(even) .feature-row__media { order: 0; }
  .strength__stats { grid-template-columns: 1fr 1fr; }
  .flow { grid-template-columns: 1fr; gap: 0; }
  .flow__item,
  .flow__item:nth-child(even) { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); padding: 20px 0; }
  .flow__item:first-child { border-top: 0; padding-top: 4px; }
  .form__row { grid-template-columns: 1fr; }
  .form-wrap { padding: 24px 20px 28px; }
  .footer__top { grid-template-columns: 1fr; gap: 30px; }
  .gallery__thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .hero__actions .btn, .cta__actions .btn { flex: 1 1 auto; min-width: 0; }
  /* 移动端关键布局强制单列（覆盖任何 1024 之前的双列定义） */
  .contact, .plist { grid-template-columns: 1fr !important; }
  .filter { display: none; }
  .cinfo { position: static !important; }
  /* 移动端触控区（避免用 display: inline-flex 覆盖 .pager 自身的 grid 40px） */
  .topbar__right { display: flex; align-items: center; gap: 10px; }
.topbar__sep { color: rgba(255, 255, 255, .26); }
  .topbar a, .topbar__tel { min-height: 36px; }
  .footer__links a { padding: 8px 0; min-height: 38px; display: inline-flex; align-items: center; }
  .footer__links li { min-height: 38px; }
  .footer__bottom a { padding: 4px 6px; }
  /* 移动端面包屑链接加大触控区 */
  .crumb-page { margin: 18px 0 22px; }
  .crumb-page a { padding: 6px 2px; min-height: 20px; display: inline-flex; align-items: center; }
  .pager a, .article__pager a { padding: 6px 4px; }
  /* 移动端询盘卡电话/邮箱链接加大触控区 */
  .inquiry-card__contact a { padding: 8px 2px; min-height: 20px; display: inline-flex; align-items: center; }
  .mobilebar a { padding: 10px 6px; min-height: 48px; }
  .pcard__foot .btn { padding: 10px 18px; }
  /* 移动端排序条：计数换行、排序按钮整行右对齐 */
  .plist__bar { flex-wrap: wrap; gap: 10px 14px; padding-bottom: 14px; margin-bottom: 20px; }
  .plist__sort { width: 100%; justify-content: flex-start; }
  .plist__sort button { padding: 8px 14px; min-height: 36px; }
  /* 面包屑触控 */
  .breadcrumb a { padding: 6px 8px; min-height: 32px; display: inline-flex; align-items: center; border-radius: 4px; }
  .sitemap { grid-template-columns: 1fr !important; }
}

/* ---------- 窄屏（≤420px）— hero / CTA 按钮防溢出 ---------- */
@media (max-width: 420px) {
  .hero__actions .btn, .cta__actions .btn { padding: 0 12px; font-size: 13px; height: 42px; }
}

/* 窄屏事实条：改单列。两列时“产品线”只有 170px，中文会从词中间断开；
   同时改用纯间距分隔，避免行尾挂一个多余的 · */
@media (max-width: 600px) {
  .hero__facts { grid-template-columns: 1fr; }
  .fact + .fact { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
  .fact__list { gap: 4px 18px; }
  .fact__list i:not(:last-child)::after { content: none; }
}

/* ---------- 26. 数字实力条 (首页 hero 下方) ---------- */
.statsbar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; margin-bottom: 40px;
}
.statsbar__item { background: #fff; padding: 26px 28px; }
.statsbar__item strong {
  display: block; font-family: var(--font-num);
  font-size: 34px; font-weight: 700; color: var(--ink); line-height: 1.1;
}
.statsbar__item strong sup { font-size: 16px; font-weight: 600; color: var(--accent); margin-left: 2px; }
.statsbar__item span { font-size: 13.5px; color: var(--muted); }

.clients-head {
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
  font-size: 14px; color: var(--muted);
}
.clients-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }

@media (max-width: 1024px) {
  .statsbar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .statsbar__item { padding: 18px 20px; }
  .statsbar__item strong { font-size: 26px; }
}

/* ---------- 27. 宽卡图片列拉伸修正 ---------- */
.pcard--wide .pcard__media { display: flex; }
.pcard--wide .pcard__media > .media { flex: 1; aspect-ratio: auto; min-height: 268px; }

/* ---------- 28. 分类小节标题 (产品中心) ---------- */
.catblock + .catblock { margin-top: 64px; }
.catblock__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; padding-bottom: 16px; margin-bottom: 26px;
  border-bottom: 2px solid var(--ink);
}
.catblock__head h2 { font-size: 22px; display: flex; align-items: center; gap: 10px; }
.catblock__head h2 i { color: var(--accent); font-size: 24px; }
.catblock__head p { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.catblock__sub { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 768px) {
  .catblock__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pcard--wide .pcard__media > .media { min-height: 200px; }
}

/* ---------- 29. 解决方案行业小节 ---------- */
.solind { padding-block: var(--sp-sec); border-top: 1px solid var(--line); }
.solind--alt { background: var(--surface-2); }
.solind__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.solind__grid--flip .solind__media { order: 2; }
.solind__media { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.solind__text .eyebrow { margin-bottom: 6px; }
.solind__text h2 i { color: var(--accent); margin-right: 8px; font-size: 26px; vertical-align: -3px; }
.solind__out { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
@media (max-width: 1024px) {
  .solind__grid { grid-template-columns: 1fr; gap: 32px; }
  .solind__grid--flip .solind__media { order: 0; }
}

/* ---------- 30. 网站地图 ---------- */
.sitemap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 32px; }
.sitemap__col h4 { font-size: 16px; margin-bottom: 16px; }
.sitemap__col ul { display: grid; gap: 10px; }
.sitemap__col a { font-size: 14.5px; color: var(--muted); }
.sitemap__col a:hover { color: var(--accent); }
@media (max-width: 1024px) { .sitemap { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .sitemap { grid-template-columns: 1fr; } }

/* ---------- 31. 关于我们 ---------- */
.about-intro {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 52px; align-items: center;
  padding-block: 56px 8px;
}
.about-intro__body .eyebrow { margin-bottom: 6px; }
.about-intro__body .h-sec { margin: 8px 0 18px; }
.about-intro__body .content { max-width: 60ch; }
.about-intro__body .content p:last-child { margin-bottom: 0; }
.about-intro__media .media { box-shadow: 0 18px 40px -22px rgba(31, 74, 60, .5); }

.honorgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.honor {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.honor:hover { border-color: var(--accent-soft); transform: translateY(-2px); box-shadow: 0 16px 34px -24px rgba(31, 74, 60, .5); }
.honor__icon {
  width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent); border-radius: var(--r-sm); font-size: 22px;
}
.honor__body h3 { font-size: 15.5px; margin: 2px 0 5px; color: var(--ink); }
.honor__body p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.6; }

/* ---------- 32. 联系我们 ---------- */
.contact { display: grid; grid-template-columns: 320px 1fr; gap: 40px; align-items: start; padding-block: 8px 0; }
.cinfo { display: grid; gap: 14px; position: sticky; top: 92px; }
.cinfo__item {
  display: flex; gap: 13px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
}
.cinfo__item i { font-size: 22px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.cinfo__item span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.cinfo__item a, .cinfo__item p { font-size: 15px; color: var(--ink-2); font-weight: 600; }
.cinfo__item a:hover { color: var(--accent); }
.cinfo__qr { padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; text-align: center; }
.cinfo__qr .media { width: 148px; height: 148px; margin: 0 auto 10px; }
.cinfo__qr p { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.6; }

.contact__main { display: grid; gap: 28px; }
.cmap { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cmap__tip { padding: 12px 16px; font-size: 13px; color: var(--muted); background: var(--surface-2); margin: 0; }

.iform { border: 1px solid var(--line); border-radius: var(--r); background: #fff; padding: 30px; }
.iform__head h2 { font-size: 22px; margin: 0 0 6px; color: var(--ink); }
.iform__head p { font-size: 14px; color: var(--muted); margin: 0 0 22px; }
.iform .form__row { margin: 0; }
.iform .form { gap: 16px; }
.form__code { display: grid; grid-template-columns: 1fr 116px; gap: 12px; align-items: stretch; }
.form__code input { width: 100%; }
.form__code-img {
  height: 46px; border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; object-fit: cover; background: var(--surface-2);
}
.iform .btn--block { margin-top: 6px; }

/* ==========================================================================
   33. 内容详情页（重设计 2026-08-03，沿用现有设计令牌）
   ========================================================================== */

/* 详情页面包屑（浅色，置于内容区顶部） */
.crumb-page {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted); margin: 26px 0 28px;
}
.crumb-page a { color: var(--muted); }
.crumb-page a:hover { color: var(--accent); }
.crumb-page .sep { color: var(--muted-2); }
.crumb-page b { color: var(--ink-2); font-weight: 600; }

/* 详情 Hero 信息列（紧凑卡片化） */
.pdetail__info {
  min-width: 0; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 28px 24px; box-shadow: var(--shadow-1);
}
.pdetail__head { padding-bottom: 16px; border-bottom: 1px dashed var(--line); margin-bottom: 16px; }
.pdetail__cat {
  display: inline-block; font-size: 12px; font-weight: 600;
  color: var(--accent); background: rgba(31, 74, 60, .08);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
}
.pdetail .pdetail__title { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 10px; }
.pdetail__lead { font-size: 14px; color: var(--muted); margin-bottom: 0; }
.pdetail__promise {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
  margin: 16px 0 0; padding: 16px 18px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
}
.pdetail__promise li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.pdetail__promise i { color: var(--accent); font-size: 16px; flex-shrink: 0; }

.pdetail__spec-mini {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; margin: 16px 0 0;
}
.pdetail__spec-mini div { display: flex; flex-direction: column; gap: 2px; background: #fff; padding: 10px 12px; }
.pdetail__spec-mini span { font-size: 11.5px; color: var(--muted); }
.pdetail__spec-mini strong { font-size: 13.5px; color: var(--ink); font-family: var(--font-num); word-break: normal; overflow-wrap: break-word; }

/* 核心卖点（4 列图标卡） */
.keypoints { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.kp {
  display: flex; gap: 14px; padding: 22px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.kp:hover { border-color: rgba(31, 74, 60, .4); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.kp__icon {
  width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent); border-radius: var(--r-sm); font-size: 22px;
}
.kp h3 { font-size: 15.5px; margin-bottom: 5px; }
.kp p { font-size: 13px; color: var(--muted); }

/* 详情内容区块（统一分隔与节奏） */
.detail-sec { padding-block: 56px; border-top: 1px solid var(--line); }
.detail-lede { max-width: 880px; margin-inline: auto; }
.detail-lede .content { max-width: none; }

/* 应用场景卡（图标头 + 文字，卡片自撑高；图标由 JS 按场景语义自动匹配） */
.scenes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.scenes > .scene:only-child { max-width: 460px; }
.scene {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.scene:hover { border-color: rgba(31, 74, 60, .4); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.scene__icon {
  height: 82px; display: grid; place-items: center;
  color: var(--accent);
  background-color: var(--accent-tint);
  background-image: radial-gradient(150px 76px at 50% 132%, rgba(31, 74, 60, .16), transparent 72%);
  border-bottom: 1px solid var(--line-2);
}
.scene__icon i { font-size: 30px; line-height: 1; }
.scene__body { padding: 16px 18px 18px; }
.scene__body h3 { font-size: 15.5px; margin-bottom: 6px; }
.scene__body p { font-size: 13px; color: var(--muted); line-height: 1.6; }
@media (max-width: 1090px) { .scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 相关图片画廊 */
.galgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.galgrid .media { aspect-ratio: 4 / 3; cursor: zoom-in; }

/* FAQ 手风琴 */
.faq { display: grid; gap: 12px; max-width: 880px; margin-inline: auto; }
.faq__item { border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; background: none; border: 0; cursor: pointer; text-align: left;
  font-size: 15.5px; font-weight: 600; color: var(--ink-2);
}
.faq__q i { font-size: 18px; color: var(--muted-2); transition: transform .2s ease, color .2s ease; flex-shrink: 0; }
.faq__item.is-open .faq__q i { transform: rotate(45deg); color: var(--accent); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s cubic-bezier(.16, 1, .3, 1); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 22px 20px; margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.85; }

/* 相关文章列表 */
.relnews { display: grid; }
.relnews__item {
  display: grid; grid-template-columns: 132px 1fr auto; gap: 24px; align-items: center;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.relnews__item:first-child { border-top: 1px solid var(--line); }
.relnews__media { aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: hidden; }
.relnews__body h3 { font-size: 16.5px; margin-bottom: 6px; line-height: 1.45; }
.relnews__body h3 a:hover { color: var(--accent); }
.relnews__meta { font-size: 12.5px; color: var(--muted-2); font-family: var(--font-num); }
.relnews__go { color: var(--muted-2); font-size: 20px; transition: color .2s ease; }
.relnews__item:hover .relnews__go { color: var(--accent); }

/* 详情页底部咨询卡 */
.inquiry-card {
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
  padding: 36px 40px; border-radius: var(--r);
  background: var(--ink); color: rgba(255, 255, 255, .72); position: relative; overflow: hidden;
}
.inquiry-card::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 56px 56px; pointer-events: none;
}
.inquiry-card > * { position: relative; }
.inquiry-card h2 { color: #fff; font-size: clamp(22px, 2.2vw, 30px); margin-bottom: 10px; }
.inquiry-card p { font-size: 14.5px; max-width: 48ch; }
.inquiry-card__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.inquiry-card__contact { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 16px; font-size: 13.5px; }
.inquiry-card__contact a { color: #fff; font-weight: 600; font-family: var(--font-num); }
.inquiry-card__contact i { color: rgba(255, 255, 255, .55); margin-right: 6px; }

@media (max-width: 1024px) {
  .keypoints { grid-template-columns: repeat(2, 1fr); }
  .galgrid { grid-template-columns: repeat(3, 1fr); }
  .inquiry-card { grid-template-columns: 1fr; gap: 24px; padding: 32px 30px; }
  .sdetail, .sdetail--no-media { grid-template-columns: 1fr; gap: 26px; padding: 34px 30px; }
}
@media (max-width: 768px) {
  .pdetail__promise { grid-template-columns: 1fr; }
  .keypoints { grid-template-columns: 1fr; }
  .scenes { grid-template-columns: 1fr; }
  .galgrid { grid-template-columns: repeat(2, 1fr); }
  .relnews__item { grid-template-columns: 1fr; gap: 12px; }
  .relnews__media { max-width: 200px; }
  .relnews__go { display: none; }
  .inquiry-card { padding: 26px 22px; }
  .inquiry-card__contact { gap: 16px; }
}
@media (max-width: 560px) {
  .sdetail--no-media { padding: 26px 20px; }
  .sdetail__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   34. 详情页重设计（2026-08-04）新增组件
   ========================================================================== */

/* 34a. 大号按钮 */
.btn--lg { height: 54px; padding: 0 32px; font-size: 16px; }
.btn--lg i { font-size: 20px; }

/* 34b. 方案 Hero 增强：微渐变底色 + 分类标签 */
.sdetail--hero {
  background: linear-gradient(135deg, var(--accent-tint) 0%, var(--surface-2) 40%, var(--surface) 100%);
  border-color: var(--accent-soft);
}
.sdetail__cat {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
  color: var(--accent); background: rgba(31, 74, 60, .1);
  padding: 5px 12px; border-radius: 999px;
}
.sdetail__cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* 34c. 核心优势卡片网格（4 列 -> 2 列 -> 1 列） */
.advgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.advcard {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 26px 24px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.advcard:hover {
  border-color: rgba(31, 74, 60, .4);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.advcard__icon {
  width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent);
  border-radius: var(--r-sm); font-size: 24px;
}
.advcard__body h3 { font-size: 15.5px; margin-bottom: 5px; color: var(--ink); }
.advcard__body p { font-size: 13px; color: var(--muted); line-height: 1.65; margin: 0; }

/* 34d. 案例详情 Hero */
.cdetail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: 48px; align-items: start;
  padding: 0; margin-bottom: 20px;
}
.cdetail > * { min-width: 0; }
.cdetail__main {
  padding: 40px 0 20px;
}
.cdetail__tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
  color: var(--accent); background: rgba(31, 74, 60, .1);
  padding: 5px 12px; border-radius: 999px;
  margin-bottom: 14px;
}
.cdetail__industry {
  display: inline-flex; align-items: center;
  margin-left: 8px; padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px; color: var(--muted);
  vertical-align: middle;
}
.cdetail__title {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.28; color: var(--ink); margin: 14px 0 16px;
}
.cdetail__lead {
  font-size: 16px; line-height: 1.85; color: var(--ink-3);
  max-width: 56ch; margin-bottom: 20px;
}
.cdetail__meta {
  display: flex; flex-wrap: wrap; gap: 20px;
  color: var(--muted); font-size: 13.5px; font-family: var(--font-num);
}
.cdetail__meta i { margin-right: 6px; color: var(--muted-2); }
.cdetail__cover {
  aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-2);
  max-height: 420px;
}
.cdetail__cover img { width: 100%; height: 100%; object-fit: cover; }

/* 34e. 成果指标卡 */
.results {
  display: none;
}
.results.is-populated {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
}
.result {
  background: #fff;
  padding: 28px 24px; text-align: center;
}
.result strong {
  display: block;
  font-family: var(--font-num);
  font-size: 34px; font-weight: 700;
  color: var(--accent); line-height: 1.1;
  margin-bottom: 6px;
}
.result span {
  font-size: 13.5px; color: var(--muted);
}

/* 34f. 背景文字块（用于项目背景描述） */
.bg-block {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); padding: 28px 32px;
}

/* 34g. 功能亮点列表 */
.feature-grid {
  padding: 0;
}
.feature-list {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  list-style: none; padding: 0; margin: 0;
}
.feature-list li {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 16px 18px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.feature-list li:hover {
  border-color: var(--accent-soft);
  box-shadow: var(--shadow-1);
}
.feature-list li i {
  color: var(--accent); font-size: 19px;
  flex-shrink: 0; margin-top: 1px;
}
.feature-list li span {
  font-size: 14.5px; color: var(--ink-3); line-height: 1.65;
}

/* 34h. 文章分类标签（新闻详情 hero） */
.article__cat {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
  color: var(--accent); background: rgba(31, 74, 60, .1);
  padding: 5px 12px; border-radius: 999px;
  margin-bottom: 16px;
}

/* 34i. 相关列表分类标签 */
.relnews__tag {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  letter-spacing: .06em; color: var(--accent);
  text-transform: uppercase; margin-bottom: 4px;
}

/* 34j. 加宽询盘卡 */
.inquiry-card--wide {
  padding: 48px 56px;
}
.inquiry-card--wide .inquiry-card__text {
  max-width: 60ch;
}

/* 34k. 响应式：新增组件 */
@media (max-width: 1024px) {
  .advgrid { grid-template-columns: repeat(2, 1fr); }
  .cdetail { grid-template-columns: 1fr; gap: 24px; }
  .cdetail__main { padding: 20px 0 0; }
  .cdetail__cover { max-height: 340px; }
  .results.is-populated { grid-template-columns: repeat(2, 1fr); }
  .feature-list { grid-template-columns: 1fr; }
  .inquiry-card--wide { padding: 36px 32px; }
  .btn--lg { height: 48px; padding: 0 26px; font-size: 15px; }
}
@media (max-width: 768px) {
  .advgrid { grid-template-columns: 1fr; }
  .advcard { padding: 20px 18px; }
  .advcard__icon { width: 42px; height: 42px; font-size: 22px; }
  .advcard__body h3 { font-size: 15px; }
  .cdetail__cover { max-height: 260px; }
  .cdetail__title { font-size: clamp(22px, 5vw, 28px); }
  .results.is-populated { grid-template-columns: 1fr 1fr; }
  .result strong { font-size: 28px; }
  .bg-block { padding: 22px 20px; }
  .feature-list li { padding: 14px 16px; }
  .inquiry-card--wide { padding: 28px 24px; }
  .sdetail__cta-row { flex-direction: column; }
  .sdetail__cta-row .btn { width: 100%; justify-content: center; }
}
@media (max-width: 420px) {
  .results.is-populated { grid-template-columns: 1fr; }
  .btn--lg { padding: 0 20px; font-size: 14px; }
}

/* ==========================================================================
   35. 网站地图页 (sitemap.html) 与 404 错误页 (404.html)
   复用既有设计令牌：单一工业蓝主色 / 4px 直角圆角 / Phosphor 图标
   ========================================================================== */

/* 35a. 网站地图页 */
.sitemap-head {
  max-width: 720px;
  margin-bottom: 48px;
}
.sitemap-head .h-sec { margin: 14px 0 14px; }
.sitemap-head .lead { margin: 0; }

/* 分组标签云：整行横带 + 标签流式排布，无卡片无边框，新增栏目=多一行、新增子项=多几个标签 */
.sitemap-stack { display: block; }

.sitemap-group {
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.sitemap-group:last-of-type { border-bottom: 0; }

.sitemap-group__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
}
.sitemap-group__icon {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 19px;
}
.sitemap-group__title { font-size: 17px; font-weight: 700; color: var(--ink); }
.sitemap-group__title a { color: var(--ink); }
.sitemap-group__title a:hover { color: var(--accent); }

/* 产品中心二级：大类名 + 其标签 */
.sitemap-sub { margin-top: 16px; }
.sitemap-sub:first-of-type { margin-top: 0; }
.sitemap-sub__label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted-2);
  margin-bottom: 9px;
}
.sitemap-sub__label a { color: var(--muted-2); }
.sitemap-sub__label a:hover { color: var(--accent); }

/* 标签云 */
.sitemap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sitemap-tags:not(:has(a)) { display: none; }   /* 无子项时整块隐藏 */
.sitemap-sub:not(:has(.sitemap-tag)) { display: none; }   /* 某大类无子类时整行隐藏 */
.sitemap-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  color: var(--ink-3);
  background: var(--surface);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.sitemap-tag:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.sitemap-tag > i.ph { flex: none; font-size: 14px; color: var(--accent); }
.sitemap-tag__meta { margin-left: 2px; font-family: var(--font-num); font-size: 12px; color: var(--muted-2); }

/* 文章明细（方案 / 案例 / 新闻）：与上方栏目标签用虚线上边框分隔，字号略小、数量多时可换行 */
.sitemap-tags--docs {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  gap: 8px;
}
.sitemap-tags--docs:not(:has(a)) { display: none; }
.sitemap-tag--doc {
  padding: 6px 13px;
  font-size: 13.5px;
  color: var(--muted);
  border-color: transparent;
  background: var(--surface-2);
}
.sitemap-tag--doc > i.ph { font-size: 13px; color: var(--muted-2); }
.sitemap-tag--doc:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-tint);
}
.sitemap-tag--doc:hover > i.ph { color: var(--accent); }

.sitemap-foot {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* 移动端：缩小标签间距与内边距，标签云保持自动换行、不溢出 */
@media (max-width: 600px) {
  .sitemap-group { padding: 22px 0; }
  .sitemap-group__icon { width: 34px; height: 34px; font-size: 17px; }
  .sitemap-group__title { font-size: 16px; }
  .sitemap-tags { gap: 8px; }
  .sitemap-tag { padding: 6px 12px; font-size: 13.5px; }
}

/* 35b. 404 错误页 (404.html, 站点根目录, 复用本样式表) */
.page404 {
  min-height: 72vh;
  display: flex;
  align-items: center;
  padding-block: 64px;
}
.page404__inner {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
}
.page404__code {
  font-family: var(--font-num);
  font-weight: 800;
  font-size: clamp(96px, 18vw, 168px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--accent);
  margin-bottom: 8px;
}
.page404__title {
  font-size: clamp(22px, 3vw, 30px);
  margin-bottom: 12px;
}
.page404__desc {
  color: var(--muted);
  max-width: 56ch;
  margin: 0 auto 28px;
}
.page404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 40px;
}
.page404__nav {
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.page404__nav-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 16px;
}
.page404__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.page404__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink-3);
  font-size: 14px;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.page404__chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-tint);
}
.page404__chip > i.ph { font-size: 15px; color: var(--accent); }

@media (max-width: 768px) {
  .page404 { padding-block: 40px; }
  .page404__actions .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   25. 视觉升级（路径 C：吸收 huashi 模板的视觉语言）
   主色 #1f4a3c / 橙色小面积点缀 #c9a227 / 10px 圆角 / 更松的字号与间距
   只改观感：不动 DOM，不影响 ext 字段区块、三级导航与栏目结构
   ========================================================================== */

/* 25.1 橙色只用于小面积点缀：序号、下划线、关键数字，不参与大面积铺色 */
.fact b em { color: var(--orange); }
.section--dark .flow__no { color: var(--orange); }
.nav__item.is-active > .nav__link { border-bottom-color: var(--orange); }
.pcard__cat { color: var(--orange-deep); }
.case__tag { color: var(--orange-deep); }
.specgroup__head i { color: var(--orange); }

/* 25.2 卡片统一：同一圆角、同一悬浮反馈 */
.pcard, .icard, .scene, .specgroup, .faq__item {
  border-radius: var(--r);
}
.pcard:hover, .icard:hover, .scene:hover {
  border-color: rgba(31, 74, 60, .28);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

/* 25.3 规格表：左对齐 + 极轻交替底色，长参数更好读 */
.spectable { padding: 4px 22px 18px; }
.spectable td { text-align: left; }
.spectable th { font-weight: 500; }
.spectable tr:nth-child(even) { background: #fbfdff; }

/* 25.4 表单：更柔的边框、更大的输入区 */
.field input, .field select, .field textarea {
  border-color: #d8e2ee;
  border-radius: var(--r);
  padding: 13px 15px;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #b9c9c2; }

/* 25.5 移动端底栏：适配刘海屏 + 加大点击区 */
.mobilebar {
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  background: rgba(255, 255, 255, .94);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobilebar a { min-height: 52px; font-weight: 600; }
.mobilebar a.is-primary { background: linear-gradient(180deg, var(--accent-bright), var(--accent)); }

/* 25.6 语言切换（中文站显示「EN」，英文站显示「中文」） */
.lang-link { font-weight: 600; color: #fff; }
.lang-link:hover { color: var(--orange); }
.drawer__link--lang { margin-top: 6px; color: var(--accent); font-weight: 600; }

@media (max-width: 900px) {
  .topbar__right { display: none; }
}

.lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.lang-switch a {
  padding: 6px 8px; border-radius: var(--r-sm); color: var(--muted);
  transition: background-color .2s ease, color .2s ease;
}
.lang-switch a:hover { background: var(--surface-2); color: var(--accent); }
.lang-switch a.is-active { color: var(--accent); }

/* 25.7 英文版排版微调：英文没有汉字方块感，字距与行高单独校一遍 */
html[lang="en"] body { font-size: 15.5px; line-height: 1.72; }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3 { letter-spacing: -.015em; }
html[lang="en"] .lead { max-width: 68ch; }
html[lang="en"] .eyebrow { letter-spacing: .13em; }
html[lang="en"] .pcard h3 { font-size: 18px; line-height: 1.35; }

/* ==========================================================================
   26. 模板借鉴组件（首屏能力标签 / 报价提示 / 详情侧栏 / 关于页叠图）
   ========================================================================== */

/* 26.1 首屏能力标签：三条可兑现的服务承诺，弱化为按钮下方的一行说明 */
.qual-chips { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; }
.qual-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .66);
}
.qual-chip i { font-size: 13px; color: var(--orange); }

/* 26.2 产品页报价提示 */
.product-tip {
  margin-top: 16px; padding: 13px 16px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface-2);
  font-size: 13px; line-height: 1.7; color: var(--muted);
}
.product-tip b { color: var(--ink-2); font-weight: 600; }

/* 26.3 产品详情两栏 + 右侧栏（咨询卡粘性跟随） */
.pd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 44px; align-items: start; }
.pd-main { min-width: 0; }
.pd-aside { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 16px; }
.pd-card { border: 1px solid var(--line); border-radius: var(--r); background: #fff; padding: 20px 20px 22px; }
.pd-card__title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.pd-card__nav { display: grid; gap: 2px; }
.pd-card__nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 10px; border-radius: var(--r-sm);
  font-size: 14px; color: var(--ink-3);
  transition: background-color .2s ease, color .2s ease;
}
.pd-card__nav a:hover { background: var(--surface-2); color: var(--accent); }
.pd-card__nav a i { font-size: 12px; opacity: .45; }
.pd-card--cta { background: var(--ink); border-color: var(--ink); color: rgba(255, 255, 255, .7); }
.pd-card--cta .pd-card__title { color: #fff; }
.pd-card--cta p { font-size: 13px; line-height: 1.75; margin-bottom: 16px; }
.pd-card--cta .btn { width: 100%; }
.pd-card__tel { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 600; color: #fff; }
.pd-card__tel i { color: var(--orange); }

@media (max-width: 1100px) {
  .pd-layout { grid-template-columns: 1fr; gap: 30px; }
  .pd-aside { position: static; grid-template-columns: 1fr 1fr; order: 2; }
}
@media (max-width: 640px) {
  .pd-aside { grid-template-columns: 1fr; }
}

/* 26.4 关于页：主图 + 叠图 + 浮动徽标（第二张图来自后台图集，无图时自动隐藏） */
.about-compose { position: relative; padding-bottom: 46px; }
.about-compose__main {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--surface-2);
  box-shadow: 0 18px 40px -22px rgba(31, 74, 60, .45);
}
.about-compose__main img { width: 100%; height: 100%; object-fit: cover; }
.about-compose__sub {
  position: absolute; right: -6px; bottom: 0; width: 44%; margin: 0;
  aspect-ratio: 4 / 3; overflow: hidden;
  border: 5px solid #fff; border-radius: var(--r);
  background: var(--surface-2); box-shadow: var(--shadow-3);
}
.about-compose__sub img { width: 100%; height: 100%; object-fit: cover; }
.about-compose__sub:not(:has(img)) { display: none; }
.about-compose__badge {
  position: absolute; left: -8px; bottom: 14px;
  padding: 14px 18px; border-radius: var(--r);
  background: var(--accent); color: #fff;
  box-shadow: 0 12px 28px -10px rgba(31, 74, 60, .6);
}
.about-compose__badge strong { display: block; font-size: 18px; line-height: 1.2; }
.about-compose__badge span { font-size: 12px; opacity: .82; }
@media (max-width: 900px) {
  .about-compose { padding-bottom: 0; }
  .about-compose__sub { display: none; }
  .about-compose__badge { left: 12px; bottom: 12px; padding: 10px 14px; }
  .about-compose__badge strong { font-size: 16px; }
}

/* 26.5 方案卡序号：编辑性水印数字，只提供节奏，不承载信息 */
.icard { position: relative; }
.icard__no {
  position: absolute; top: 12px; right: 18px;
  font-family: var(--font-num); font-size: 40px; font-weight: 700;
  line-height: 1; letter-spacing: -.03em;
  color: rgba(31, 74, 60, .09);
  pointer-events: none;
  transition: color .2s ease;
}
.icard:hover .icard__no { color: rgba(31, 74, 60, .17); }

/* 26.6 顶部导航滚动状态：滚动后加一层投影，与正文分开 */
.nav { transition: box-shadow .25s ease; }
.nav.is-scrolled { box-shadow: 0 8px 24px rgba(22, 33, 31, .09); }

/* 26.7 产品卡图片微缩放：白底图 contain 后 3% 不会切到主体 */
.pcard__media img { transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.pcard:hover .pcard__media img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .pcard__media img { transition: none; }
  .pcard:hover .pcard__media img { transform: none; }
}

/* ==========================================================================
   27. 系列落地页（productlist_family.html）
   一页讲清：这系列是什么 / 有哪些型号 / 型号之间差在哪 / 配什么耗材
   ========================================================================== */

/* 27.1 系列页头 */
.fam-head {
  padding-bottom: 44px;
  background: linear-gradient(180deg, var(--surface-2) 0%, #fff 72%);
  border-bottom: 1px solid var(--line);
}
.fam-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 56px; align-items: center;
}
.fam-head__grid:not(:has(.fam-head__media)) { grid-template-columns: minmax(0, 1fr); }
.fam-head__brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
  color: var(--orange-deep);
}
.fam-head__brand::before { content: ""; width: 20px; height: 2px; background: var(--orange); }
.fam-head__title {
  font-size: clamp(27px, 3.2vw, 40px);
  line-height: 1.22; letter-spacing: -.015em;
  color: var(--ink); margin: 14px 0 10px;
  text-wrap: balance;
}
.fam-head__sub { font-size: 15px; font-weight: 600; color: var(--accent); margin-bottom: 14px; }
.fam-head__lede {
  font-size: 15.5px; line-height: 1.85; color: var(--muted);
  max-width: 62ch;
}
.fam-head__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.fam-head__media {
  margin: 0; aspect-ratio: 16 / 11;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: #fff; overflow: hidden;
  box-shadow: 0 18px 44px -26px rgba(22, 33, 31, .45);
}
.fam-head__media img { width: 100%; height: 100%; object-fit: contain; }

/* 27.2 同品类系列切换条 */
.fam-sib { background: #fff; border-bottom: 1px solid var(--line); }
.fam-sib > .container { padding-block: 16px; }
.fam-sib__label {
  display: block; margin-bottom: 10px;
  font-size: 12.5px; color: var(--muted-2); letter-spacing: .04em;
}
.fam-sib__list {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.fam-sib__item {
  padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13.5px; color: var(--ink-3); white-space: nowrap;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.fam-sib__item:hover {
  border-color: var(--accent); color: var(--accent); background: var(--accent-tint);
}
.fam-sib__item.is-current {
  border-color: var(--accent); background: var(--accent-tint);
  color: var(--accent); font-weight: 600;
}

/* 27.2b 型号栅格：2 个型号时各占一半，不做「两张卡 + 一个空位」 */
.fam-grid { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }

/* 27.3 型号卡参数摘要（initSpecBrief 渲染；无 JS 时按行显示原文） */
.kv-mini { margin-top: 12px; white-space: pre-line; font-size: 12.5px; color: var(--muted-2); }
.kv-mini:empty { display: none; }
.kv-mini .kv { display: grid; gap: 5px; }
.kv-mini li { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.55; }
.kv-mini li span { flex: none; min-width: 58px; color: var(--muted-2); }
.kv-mini li b { font-weight: 600; color: var(--ink-2); word-break: break-word; }

/* 27.4 型号对比表 */
.fam-cmp {
  margin-bottom: 34px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; overflow: hidden;
}
.fam-cmp__cap {
  padding: 13px 18px;
  font-size: 12.5px; color: var(--muted-2);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-2);
}
.fam-cmp__scroll { overflow-x: auto; }
.fam-cmp table {
  width: 100%; min-width: 760px;
  border-collapse: collapse; font-size: 13.5px;
}
.fam-cmp thead th {
  text-align: left; white-space: nowrap;
  padding: 12px 16px; font-size: 12.5px; font-weight: 600; color: var(--muted);
  background: #fff; border-bottom: 1px solid var(--line);
}
.fam-cmp tbody th {
  text-align: left; white-space: nowrap;
  padding: 12px 16px; font-weight: 600; color: var(--ink);
  background: #fff; border-bottom: 1px solid var(--line-2);
  position: sticky; left: 0; z-index: 1;
}
.fam-cmp tbody td {
  padding: 12px 16px; color: var(--ink-3);
  border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
.fam-cmp tbody td.is-empty { color: var(--muted-2); }
.fam-cmp tbody tr:last-child th,
.fam-cmp tbody tr:last-child td { border-bottom: 0; }
.fam-cmp tbody tr:hover th,
.fam-cmp tbody tr:hover td { background: var(--accent-tint); }

/* 27.5 配套耗材交叉销售 */
.fam-cross { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.fam-cross__item {
  display: flex; align-items: center; gap: 18px;
  padding: 26px 28px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.fam-cross__item:hover {
  border-color: rgba(31, 74, 60, .32);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.fam-cross__icon {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--accent-tint); color: var(--accent); font-size: 24px;
}
.fam-cross__body b { display: block; font-size: 16px; color: var(--ink); margin-bottom: 6px; }
.fam-cross__body span { display: block; font-size: 13px; line-height: 1.65; color: var(--muted); max-width: 34ch; }
.fam-cross__go { margin-left: auto; flex: none; font-size: 18px; color: var(--muted-2); }
.fam-cross__item:hover .fam-cross__go { color: var(--accent); }

/* 27.6 选型支持条 */
.fam-help {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px; align-items: center;
  padding: 34px 38px; border-radius: var(--r-lg);
  background: var(--ink);
}
.fam-help h2 { color: #fff; font-size: clamp(20px, 2.2vw, 26px); margin-bottom: 10px; }
.fam-help p { font-size: 14px; line-height: 1.75; color: rgba(255, 255, 255, .66); max-width: 54ch; }
.fam-help__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.fam-help .btn--outline { color: #fff; border-color: rgba(255, 255, 255, .34); }
.fam-help .btn--outline:hover { background: rgba(255, 255, 255, .1); color: #fff; }

@media (max-width: 1100px) {
  .fam-head__grid { grid-template-columns: 1fr; gap: 32px; }
  .fam-head__media { aspect-ratio: 16 / 9; max-height: 340px; }
  .fam-help { grid-template-columns: 1fr; gap: 22px; padding: 30px 30px; }
}
@media (max-width: 768px) {
  .fam-head { padding-bottom: 32px; }
  .fam-head__actions .btn { flex: 1 1 auto; justify-content: center; }
  .fam-head__media { max-height: 250px; }
  .fam-cross { grid-template-columns: 1fr; }
  /* 小屏上并排对比不可读：收起对比表，参数看每张型号卡上的 4 条摘要 */
  .fam-cmp { display: none; }
  .fam-sib__list {
    flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .fam-sib__list::-webkit-scrollbar { display: none; }
  .fam-help { padding: 24px 22px; }
  .fam-help__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* 27.7 参数块补丁：JS 转出来的表格在 dl/dd 里不要额外留白 */
.specgroup dd.spectable { padding: 0; }
.specgroup dd.spectable table { font-size: 13.5px; }
.specgroup dd.spectable th { width: 34%; padding-right: 14px; }

/* ==========================================================================
   28. 滚动节奏（2026-10-29）
   此前首页 0 处进场动画，滚到哪内容就"啪"地出现在那里，观感发干。
   这里只补三样最基础的东西，不加炫技特效：
   ① 视口外的区块/卡片，滚进来时轻微上浮淡入，同排错峰
   ② 首屏元素按顺序淡入（页面加载即播，不等滚动）
   ③ 首屏图极缓的 1.04 → 1 缩回
   位移用独立的 translate / scale 属性，不与卡片 hover 的 transform 冲突。
   ========================================================================== */

/* 28.1 滚动进场：类由 JS 按需添加，元素已在视口内则不隐藏，不会白屏 */
.rv {
  opacity: 0;
  translate: 0 22px;
  transition: opacity .62s cubic-bezier(.16, 1, .3, 1),
              translate .62s cubic-bezier(.16, 1, .3, 1);
}
.rv.is-in { opacity: 1; translate: 0 0; }

/* 28.2 首屏编排：加载即播，每项错开 90ms */
@keyframes rvRise {
  from { opacity: 0; translate: 0 16px; }
  to   { opacity: 1; translate: 0 0; }
}
.hero__main > * {
  animation: rvRise .72s cubic-bezier(.16, 1, .3, 1) both;
}
.hero__main > *:nth-child(2) { animation-delay: .08s; }
.hero__main > *:nth-child(3) { animation-delay: .16s; }
.hero__main > *:nth-child(4) { animation-delay: .24s; }
.hero__main > *:nth-child(5) { animation-delay: .32s; }
.hero__main > *:nth-child(6) { animation-delay: .40s; }

/* 28.3 首屏图：极缓缩回，只做一次 */
@keyframes rvShot {
  from { opacity: 0; scale: 1.035; }
  to   { opacity: 1; scale: 1; }
}
.hero__shot { animation: rvShot 1.1s cubic-bezier(.16, 1, .3, 1) both; }
.hero__facts .fact { animation: rvRise .7s cubic-bezier(.16, 1, .3, 1) both; }
.hero__facts .fact:nth-child(2) { animation-delay: .1s; }
.hero__facts .fact:nth-child(3) { animation-delay: .18s; }
.hero__facts .fact:nth-child(4) { animation-delay: .26s; }

/* 28.4 尊重系统"减少动态效果"设置 */
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; translate: none; transition: none; }
  .hero__main > *,
  .hero__shot,
  .hero__facts .fact { animation: none; }
}

/* ==========================================================================
   29. 区块骨架去同质化（2026-10-29）
   首页此前 6 个区块都是「左上小标签 + 大标题 + 内容等分平铺」同一句式，
   滚起来像同一个模板换了内容。这里把三处换成不同骨架：
   · 优势区 → 左标题列 + 右 2×2 清单（标题不再是横跨顶部的一条）
   · 流程区 → 横向时间轴（横线贯穿 + 节点），不再是 5 个并列竖栏
   · 案例区 → 通栏编号行（大号 01 / 02），不再是 2 列卡片
   产品区保留 4 列网格（那是转化主区，网格本身是对的），新闻区保留列表行。
   ========================================================================== */

/* 29.1 优势区：左右分栏，左侧标题随滚动停靠 */
.adv-split {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: 64px;
  align-items: start;
}
.adv-split__aside { position: sticky; top: calc(var(--nav-h) + 40px); }
.adv-split__aside .h-sec { margin: 16px 0 18px; }
.adv-split__aside .lead { margin-bottom: 26px; max-width: 34ch; }
/* 右侧清单首行去掉上横线，与左侧标题顶边对齐 */
.adv-split .adv__item:nth-child(-n+2) { border-top: 0; padding-top: 0; }

/* 29.2 流程区：横向时间轴 */
.section--dark .flow {
  position: relative;
  padding-top: 32px;
}
.section--dark .flow::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 8px; height: 1px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .04) 0%,
    rgba(255, 255, 255, .3) 8%,
    rgba(255, 255, 255, .3) 92%,
    rgba(255, 255, 255, .04) 100%);
}
.section--dark .flow__item {
  position: relative;
  border-left: 0;
  padding: 4px 26px 0 0;
}
.section--dark .flow__item::before {
  content: "";
  position: absolute;
  top: -28px; left: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(201, 162, 39, .16);
}

/* 29.3 首页案例区：主图卡 + 两张侧图卡（mosaic），与产品网格、方案水印卡区分开 */
.casemosaic {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}
.casemcard {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.casemcard:hover {
  border-color: rgba(31, 74, 60, .42);
  box-shadow: var(--shadow-2);
  transform: translateY(-3px);
}
.casemcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* 图区：后台没配图时自动收起，卡片退化为纯文字 */
.casemcard__media { position: relative; overflow: hidden; background: var(--accent-tint); }
.casemcard__media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.casemcard:hover .casemcard__media img { transform: scale(1.04); }
.casemcard__media:has(img[src*="/static/images/nopic.png"]) { display: none; }

/* 主卡：图在上、文在下，图按 4:3 原比例（后台图就是 1200×900，不裁切） */
.casemcard--lead .casemcard__media { flex: none; }
.casemcard--lead .casemcard__media img { height: auto; aspect-ratio: 16 / 9; }
.casemcard--lead .casemcard__body { padding: 26px 32px; gap: 11px; justify-content: center; }

/* 侧列：两张卡平分列高，图在左、文在右 */
.casemosaic__side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.casemcard--side { flex: 1 1 0; min-height: 0; flex-direction: row; }
.casemcard--side .casemcard__media { flex: 0 0 46%; }
.casemcard--side .casemcard__body { justify-content: center; }

.casemcard__body {
  display: flex; flex-direction: column; gap: 9px;
  flex: 1; min-width: 0;
  padding: 22px 24px;
  justify-content: center;
}
.casemcard__tag {
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--gold-deep);
}
.casemcard h3 { font-size: 18px; line-height: 1.42; color: var(--ink); }
.casemcard p {
  font-size: 14px; line-height: 1.72; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.casemcard--side p { font-size: 13.5px; -webkit-line-clamp: 2; }
/* 主卡文字放大：写在 .casemcard h3/p 之后才能生效（特异性相同，靠顺序） */
.casemcard--lead h3 { font-size: 23px; }
.casemcard--lead p { font-size: 14.5px; -webkit-line-clamp: 4; }
.casemcard__go {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 4px;
  font-size: 13.5px; font-weight: 600; color: var(--accent);
}
.casemcard--side .casemcard__go { font-size: 13px; }
.casemcard__go i { transition: transform .25s ease; }
.casemcard:hover .casemcard__go i { transform: translateX(4px); }

/* 29.4 首页新闻区：三列文字卡（顶线金 → hover 变金 + 右下圆形箭头），与带图案例卡形成轻重对比 */
.newstiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.newstile {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 0 26px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: var(--r);
  transition: border-color .25s ease, border-top-color .25s ease,
              box-shadow .25s ease, transform .25s ease;
}
.newstile:hover {
  border-color: rgba(31, 74, 60, .38);
  border-top-color: var(--gold);
  box-shadow: var(--shadow-2);
  transform: translateY(-3px);
}
.newstile__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--line-2);
}
.newstile__cat { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--gold-deep); }
.newstile__date {
  font-family: var(--font-num); font-size: 12.5px;
  color: var(--muted-2); letter-spacing: .01em;
}
.newstile h3 {
  font-size: 18.5px; line-height: 1.5; color: var(--ink);
  transition: color .2s ease;
}
.newstile:hover h3 { color: var(--accent); }
.newstile p {
  font-size: 13.5px; line-height: 1.72; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.newstile__foot {
  display: flex; align-items: center; justify-content: flex-end;
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--line-2);
}
.newstile__go {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%; border: 1px solid var(--line-2);
  color: var(--muted); font-size: 14px;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.newstile:hover .newstile__go {
  background: var(--accent); border-color: var(--accent); color: #fff;
  transform: translateX(4px);
}

@media (max-width: 1100px) {
  .adv-split { grid-template-columns: 1fr; gap: 28px; }
  .adv-split__aside { position: static; }
  .adv-split__aside .lead { max-width: 62ch; }
  /* 案例 mosaic 收成单列：主卡变左图右文，侧列两张并排 */
  .casemosaic { grid-template-columns: minmax(0, 1fr); }
  .casemcard--lead { flex-direction: row; }
  .casemcard--lead .casemcard__media { flex: 0 0 42%; }
  .casemcard--lead .casemcard__media img { height: 100%; aspect-ratio: auto; }
  .casemcard--lead .casemcard__body { justify-content: center; padding: 24px 26px; }
  .casemcard--lead h3 { font-size: 19px; }
  .casemcard--lead p { -webkit-line-clamp: 3; }
  .casemosaic__side { flex-direction: row; }
  .casemcard--side { flex: 1 1 0; }
  .casemcard__media { min-height: 176px; }
  .newstiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  /* 手机上全部回到图上文下；侧列竖向排列，卡片高度由内容决定（不能留 flex:1，否则父高 auto 会塌成 0） */
  .casemcard,
  .casemcard--lead { flex-direction: column; }
  .casemosaic__side { flex-direction: column; }
  .casemcard--side { flex: 0 0 auto; }
  .casemcard .casemcard__media,
  .casemcard--lead .casemcard__media { flex: none; min-height: 0; }
  .casemcard .casemcard__media img,
  .casemcard--lead .casemcard__media img { height: auto; aspect-ratio: 16 / 9; }
  .casemcard h3,
  .casemcard--lead h3 { font-size: 17px; }
  .casemcard--lead .casemcard__body { padding: 22px 22px 24px; }
  .newstiles { grid-template-columns: minmax(0, 1fr); }
  .newstile { padding: 0 20px 22px; }
  /* 小屏流程改竖排，时间轴横线与节点不再适用 */
  .section--dark .flow { padding-top: 0; }
  .section--dark .flow::before,
  .section--dark .flow__item::before { display: none; }
  .section--dark .flow__item { padding: 18px 0 0; }
}


/* ==========================================================================
   30. 首页底部直接留资（2026-10-29）
   原来底部是三个按钮全部跳联系页，等于同一件事说三遍还要多一跳。
   改成左文案 + 右白色表单卡，三字段即可提交，少一次跳转。
   ========================================================================== */
.cta__inner {
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 56px;
  align-items: center;
  padding-block: 56px;
}
.cta__intro p { color: rgba(255, 255, 255, .86); }
.cta__points { display: grid; gap: 10px; margin: 20px 0 26px; }
.cta__points li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 14px; color: rgba(255, 255, 255, .84);
}
.cta__points i { flex: none; margin-top: 2px; font-size: 15px; color: var(--orange); }
.cta__tel {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-num); font-size: 20px; font-weight: 700; color: #fff;
}
.cta__tel i { font-size: 18px; color: var(--orange); }
.cta__form {
  background: #fff; border-radius: var(--r);
  padding: 26px 26px 22px;
  box-shadow: 0 24px 56px -28px rgba(6, 24, 44, .55);
}
.cta__form .form { gap: 14px; }
.cta__form .field { gap: 6px; }
.cta__form .field label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.cta__form .field input,
.cta__form .field textarea { padding: 11px 13px; font-size: 14px; }
.cta__form .form__note { max-width: none; margin: 0; font-size: 11.5px; color: var(--muted-2); }
.cta__form .btn { height: 46px; }

@media (max-width: 1100px) {
  .cta__inner { grid-template-columns: 1fr; gap: 30px; }
  .cta__form { max-width: 560px; }
}
@media (max-width: 640px) {
  .cta__form { padding: 20px 18px; }
  .cta__tel { font-size: 18px; }
}

/* 锚点跳转时给吸顶导航留出空间，否则 #inquiry 这类锚点会被导航盖住标题 */
[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }


/* ==========================================================================
   31. 产品中心「按场景选型」区块（2026-10-29）
   五张卡不是产品，是一组「场景 → 标签+碳带+机型」的常用搭配，
   目的是让不知道买什么的客户先认场景，再点进对应系列。
   只在 scode=2 产品中心首页显示，各品类列表页由模板条件隐藏。
   ========================================================================== */
.picksec {
  padding-bottom: 48px;
  margin-bottom: 44px;
  border-bottom: 1px solid var(--line);
}
.picksec__head { max-width: 760px; margin-bottom: 30px; }
.picksec__head .h-sec { margin: 12px 0 12px; }
.picks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.pick {
  position: relative;
  display: flex; flex-direction: column;
  height: 100%;
  padding: 18px 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pick:hover {
  border-color: rgba(31, 74, 60, .32);
  box-shadow: var(--shadow-2);
  transform: translateY(-3px);
}
.pick__no {
  position: absolute; top: 14px; right: 16px;
  font-family: var(--font-num); font-size: 12.5px; font-weight: 600;
  letter-spacing: .06em; color: rgba(31, 74, 60, .34);
}
.pick__media { display: block; height: 104px; margin-bottom: 14px; }
.pick__media img { width: 100%; height: 100%; object-fit: contain; }
.pick h3 { font-size: 15.5px; line-height: 1.4; margin-bottom: 8px; color: var(--ink); }
.pick > p { font-size: 12.5px; line-height: 1.68; color: var(--muted); margin-bottom: 14px; }
.pick__spec {
  margin-top: auto;
  display: grid; gap: 7px;
  padding-top: 13px;
  border-top: 1px solid var(--line-2);
}
.pick__spec > div { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; font-size: 12px; line-height: 1.5; }
.pick__spec dt { color: var(--muted-2); }
.pick__spec dd { color: var(--ink-2); font-weight: 600; }
.picksec__note {
  margin-top: 20px;
  font-size: 12.5px; line-height: 1.7; color: var(--muted-2);
}
.picksec__note a { color: var(--accent); font-weight: 600; }
.picksec__note a:hover { text-decoration: underline; }

@media (max-width: 1200px) {
  .picks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .picksec { padding-bottom: 36px; margin-bottom: 32px; }
}
@media (max-width: 520px) {
  .picks { grid-template-columns: 1fr; }
  .pick__media { height: 76px; }
}


/* ==========================================================================
   32. 品牌标（2026-10-29）
   Logo 是白底 JPG，用 mix-blend-mode: multiply 让白底融进白色导航，
   不必另做透明 PNG；换图直接覆盖 static/images/logo-huailion.png。
   ========================================================================== */
.nav__logo-img {
  display: block;
  height: 42px;
  width: auto;
  mix-blend-mode: multiply;
}
/* 页脚深色底上，图标用品牌金，与导航 Logo 呼应 */
.footer .brand__cn i { color: var(--gold); }

@media (max-width: 900px) {
  .nav__logo-img { height: 34px; }
}
@media (max-width: 480px) {
  .nav__logo-img { height: 30px; }
}


/* ==========================================================================
   33. 深色区块上的强调色可读性（2026-10-29 换金色系后补）
   --accent 是墨绿，放在深色底上对比度不足，这些区域改用浅金。
   ========================================================================== */
.hero .eyebrow,
.section--dark .eyebrow,
.inquiry-card .eyebrow,
.cta .eyebrow { color: var(--gold-soft); }
.hero .eyebrow::before,
.section--dark .eyebrow::before,
.inquiry-card .eyebrow::before,
.cta .eyebrow::before { background: var(--gold-soft); }

/* 首屏正文里的行内强调（H1 的 em）在深底上用浅金 */
.hero h1 em { color: var(--gold-soft); }

/* 深色卡片里的链接箭头同样提亮 */
.pd-card--cta .link-arrow,
.inquiry-card .link-arrow { color: var(--gold-soft); }


/* ==========================================================================
   34. 详情页「相关文章」重做（2026-10-29）
   原来用 .relnews__item 的 3 列 grid（132px 图 + 正文 + 箭头），
   但新闻的 ico 全为空、图被 onerror 移除后，标题掉进 132px 的窄列里换行，
   右边一大片空白——就是用户看到的那块丑。
   新闻本来就没配图，改成 3 列无图卡片：日期 → 标题 → 箭头，不再依赖图片列。
   ========================================================================== */
.relnews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.relnews__item {
  display: flex;
  flex-direction: column;
  padding: 20px 22px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.relnews__item:hover {
  border-color: rgba(31, 74, 60, .3);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
/* 没有配图就不留位置；将来新闻补了 ico，图会自动出现在卡片顶部 */
.relnews__media {
  display: none;
  margin: 0 0 12px;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.relnews__media:has(img) { display: block; }
.relnews__media img { width: 100%; height: 100%; object-fit: cover; }

.relnews__body { display: flex; flex-direction: column; flex: 1; }
.relnews__meta {
  order: -1;
  margin-bottom: 10px;
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--muted-2);
}
.relnews__body h3 {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .2s ease;
}
.relnews__item:hover .relnews__body h3 { color: var(--accent); }
.relnews__go {
  margin-top: auto;
  align-self: flex-end;
  padding-top: 18px;
  font-size: 17px;
  color: var(--muted-2);
  transition: color .2s ease, transform .2s ease;
}
.relnews__item:hover .relnews__go {
  color: var(--accent);
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .relnews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .relnews { grid-template-columns: 1fr; gap: 12px; }
  .relnews__item { padding: 16px 18px 14px; }
}
/* 覆盖旧的 768 断点规则（那些规则是为带图的横向列表写的） */
@media (max-width: 768px) {
  .relnews__media { max-width: none; }
  .relnews__go { display: block; }
}


/* 35. 导航下拉：分组标题下的代理品牌行（数据取自栏目 def2，空则自动隐藏） */
/* group 本身是 flex 容器，品牌行必须强制换行，否则会挤在标题右侧把标题压断 */
.nav__cell .nav__drop-group { flex-wrap: wrap; }
.nav__drop-brand {
  flex: 0 0 100%;
  width: 100%;
  margin-top: 2px;
  padding-left: 22px;
  font-size: 11.5px;
  font-weight: 500 !important;
  letter-spacing: .01em;
  color: var(--muted-2) !important;
}
.nav__drop-brand:empty { display: none; }


/* ==========================================================================
   36. 产品详情「应用场景」改横向卡片（2026-10-29）
   原来是 3 列纵向卡：上方 82px 高的色块里只放一个 22px 图标，比例失衡；
   4 个场景还会排成 3+1，第二行右边空两格。
   改成 2 列横向卡（图标左、文字右），4 个正好 2×2，且不再有空荡的图标区。
   ========================================================================== */
.scenes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.scene {
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  overflow: visible;
}
.scene__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  border-bottom: 0;
  background-color: var(--accent-tint);
  background-image: none;
}
.scene__icon i { font-size: 22px; line-height: 1; }
.scene__body { padding: 0; }
.scene__body h3 { margin-bottom: 5px; }

@media (max-width: 640px) {
  .scenes { grid-template-columns: 1fr; }
  .scene { padding: 16px 16px; gap: 14px; }
}


/* ==========================================================================
   37. 技术参数区修正（2026-10-29）
   原来 .specgroups 是 3 列，每列仅 266px：表格的标签列吃掉 96px，
   值列只剩 170px，长参数被压成单字竖排（「Honeywell Platform: 集中管理」那种）。
   参数是采购决策信息，宁可占空间也要可读 —— 改成单列通栏，每组一张卡片。
   ========================================================================== */
.specgroups {
  grid-template-columns: 1fr;
  gap: 20px;
}
/* 组标题：图标与文字左对齐（原来被拉成两端对齐） */
.specgroup__head {
  justify-content: flex-start !important;
  gap: 8px;
}
.specgroup__head b { margin-left: 0; }
/* 组内 dt（「关键性能」「环境/认证」）和组标题重复，隐藏，让表格占满整宽 */
.specgroup dl { display: block; margin: 0; }
.specgroup dl > div { display: block; }
.specgroup dl dt { display: none; }
/* 标签列收到 26%，值列拿到 74% */
.specgroup dd.spectable { padding: 6px 22px 18px; }
.specgroup dd.spectable th,
.specgroup .spectable th { width: 26%; }
.specgroup .spectable td { word-break: normal; overflow-wrap: break-word; }

/* 组内长文本改成左对齐（原来是 text-align: right，一段话右对齐很别扭） */
.specgroup dd { text-align: left; }