/* =========================================================
   广州矩测科技有限公司 · 企业官网
   设计系统 v3 —「沉稳深蓝 · 企业工业」方向
   冷白底 + 深海军蓝主色，仪表金仅作温度/数据信号，深色区块深蓝黑。
   衬线展示字体 + 无衬线正文，刻度尺签名元素，非对称编排，零玻璃拟态。
   ========================================================= */

:root {
  /* —— 色板 v3「沉稳深蓝 · 企业工业风」：冷白底 + 深海军蓝主色，
     仪表金（amber）仅作温度/数据信号，深色区块用深蓝黑 —— */
  --paper:        oklch(97.5% 0.005 255); /* 冷白底 */
  --paper-2:      oklch(94.5% 0.009 255); /* 次级表面 */
  --paper-3:      oklch(91.5% 0.011 255); /* 更深表面 */
  --ink:          oklch(21% 0.022 258);   /* 蓝黑（正文/标题） */
  --ink-2:        oklch(40% 0.017 255);   /* 次级文字 */
  --ink-3:        oklch(56% 0.014 255);   /* 弱化文字 */
  --line:         oklch(90% 0.008 255);   /* 发丝线 */
  --line-strong:  oklch(81% 0.011 255);

  /* 主色：深海军蓝（品牌/按钮/导航强调） */
  --warm:         oklch(44% 0.105 253);
  --warm-deep:   oklch(36% 0.090 253);
  --warm-soft:   oklch(95% 0.018 252);
  /* 副信号：钢青蓝（湿度/数据态） */
  --cool:         oklch(53% 0.105 250);
  --cool-deep:   oklch(43% 0.095 250);
  --cool-soft:   oklch(94% 0.022 248);
  /* 仪表金（仅温度/仪表信号，企业深蓝底的金属感点缀） */
  --amber:        oklch(71% 0.120 78);
  --amber-deep:   oklch(55% 0.105 68);
  --amber-soft:   oklch(94.5% 0.040 85);

  /* 深色区块（深蓝黑，非暖炭） */
  --char:        oklch(19% 0.020 258);
  --char-2:      oklch(15% 0.020 258);
  --char-line:   oklch(32% 0.020 258);
  --char-text:   oklch(93% 0.008 255);
  --char-text-2: oklch(74% 0.013 255);

  /* —— 字体（全部 SIL OFL 免费商用：Fraunces / Noto Sans SC / Noto Serif SC / Space Mono；无任何需授权字体）—— */
  --font-display: "Fraunces", "Noto Serif SC", serif;
  --font-num:     "Noto Serif SC", "Fraunces", serif; /* 数字专用：Noto Serif SC 的 lining 标准等高数字，避免 Fraunces 老式花体数字高低不齐 */
  --font-sans:    "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* —— 缓动（ease-out-quart / expo，不用回弹）—— */
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-q:cubic-bezier(0.25, 1, 0.5, 1);

  /* —— 间距刻度（4pt 基准）—— */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  /* 卡片/面板统一内边距（所有内容卡共用同一区间，避免大小不一） */
  --card-pad: clamp(26px, 2.8vw, 36px);
  /* 区块标题与正文之间的统一间距 */
  --gap-head: clamp(48px, 6vw, 76px);

  /* —— 阴影（克制）—— */
  --sh-1: 0 1px 2px oklch(18% 0.020 258 / .04), 0 10px 24px oklch(18% 0.020 258 / .05);
  --sh-2: 0 2px 6px oklch(18% 0.020 258 / .05), 0 22px 48px oklch(18% 0.020 258 / .10);

  --maxw: 1240px;
  --header-h: 74px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-sm: 10px;
  /* 浮层 / 强层次阴影（弹层、sticky 侧栏、to-top 等） */
  --sh-3: 0 4px 14px oklch(18% 0.020 258 / .07), 0 32px 64px oklch(18% 0.020 258 / .14);
}

/* ============ 基础 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.7;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: 16px; }

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

/* ============ 布局 ============ */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.section { padding: clamp(72px, 8vw, 116px) 0; }
.section--alt { background: var(--paper-2); }
.section--dark { background: var(--char); color: var(--char-text); }
/* v3 深蓝主题：深蓝黑底上的强调色自动切为「仪表金」，避免深蓝撞深蓝 */
.section--dark, .page-hero { --warm: var(--amber); --warm-deep: var(--amber-deep); --warm-soft: var(--amber-soft); }
.section--dark .cert__ic { color: var(--char-2); }
.section--dark .btn--primary { color: var(--char-2); }

/* ============ 文字 ============ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--warm-deep);
}
.eyebrow::before {
  content: ""; width: 34px; height: 9px; flex: none;
  background-image: repeating-linear-gradient(90deg, var(--warm) 0 2px, transparent 2px 7px);
  background-size: 7px 9px; background-repeat: repeat-x;
}
.section--dark .eyebrow { color: var(--warm); }

.h2 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 1.2rem + 2.3vw, 3rem);
  font-weight: 600; line-height: 1.16; letter-spacing: -0.01em;
  color: var(--ink);
}
.section--dark .h2 { color: #fff; }
.h3 { font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; color: var(--ink); line-height: 1.42; text-wrap: pretty; }
.lead { font-size: 1.05rem; color: var(--ink-2); max-width: 60ch; line-height: 1.78; }
.section--dark .lead { color: var(--char-text-2); }

.section-head { max-width: 720px; margin-bottom: var(--gap-head); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
/* 标题与操作按钮并排的版式（首页「产品概览 / 新闻动态」等） */
.section-head--row { display: flex; justify-content: space-between; align-items: flex-end; max-width: none; gap: 24px; flex-wrap: wrap; }
.section-head--row .lead { margin-top: 14px; }

/* ============ 按钮 ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 52px; padding: 0 30px; border-radius: 999px;
  font-size: .95rem; font-weight: 600; letter-spacing: .01em;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  will-change: transform;
}
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--primary { background: var(--warm); color: #fff; box-shadow: 0 12px 26px oklch(44% 0.105 253 / .28); }
.btn--primary:hover { background: var(--warm-deep); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.btn--outline-light { background: transparent; color: #fff; border: 1.5px solid oklch(100% 0 0 / .35); }
.btn--outline-light:hover { border-color: #fff; background: oklch(100% 0 0 / .08); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--warm); outline-offset: 3px; }

/* ============ 顶部导航 ============ */
.header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); z-index: 100;
  display: flex; align-items: center;
  background: oklch(97.5% 0.005 255 / .85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.header.scrolled { border-color: var(--line); box-shadow: var(--sh-1); }
.header .container { display: flex; align-items: center; justify-content: space-between; }

.logo { display: flex; align-items: center; gap: 12px; }
.logo__mark {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
  position: relative; overflow: hidden;
  box-shadow: 0 6px 16px oklch(18% 0.020 258 / .22);
}
.logo__mark::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, oklch(100% 0 0 / .12)); }
.logo__text { display: flex; flex-direction: column; line-height: 1.12; }
.logo__name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); letter-spacing: .01em; }
.logo__sub { font-family: var(--font-mono); font-size: .62rem; color: var(--ink-3); letter-spacing: .22em; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav a {
  position: relative; padding: 10px 16px; font-size: .95rem; font-weight: 500; color: var(--ink-2);
  border-radius: 8px; transition: color .2s var(--ease); text-decoration: none;
}
/* 主链接（直接位于 .nav__item 下）承担下划线动画；子菜单项不显示下划线 */
.nav > .nav__item > a { display: inline-flex; align-items: center; gap: 5px; }
.nav > .nav__item > a::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 7px; height: 2px;
  background: var(--warm); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav > .nav__item > a:hover { color: var(--ink); }
.nav > .nav__item > a.active { color: var(--warm-deep); font-weight: 600; }
.nav > .nav__item > a.active::after, .nav > .nav__item > a:hover::after { transform: scaleX(1); }

/* 下拉指示三角 */
.caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .55; transition: transform .2s var(--ease); }
.has-children:hover .caret { transform: rotate(180deg); }

/* 二级下拉面板 */
.submenu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px);
  min-width: 168px; background: #fff; border-radius: 14px; box-shadow: 0 16px 40px rgba(20,20,40,.16);
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 60;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.has-children:hover .submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(2px); }
.submenu a {
  padding: 11px 14px; border-radius: 9px; font-size: .92rem; font-weight: 500; color: var(--ink);
  white-space: nowrap; text-decoration: none;
}
.submenu a:hover { background: var(--paper-2); color: var(--warm-deep); }
.submenu a.active { color: var(--warm-deep); font-weight: 600; }

.header__cta { display: flex; align-items: center; gap: 14px; }
.header__phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); font-size: .95rem; }
.header__phone svg { color: var(--warm); }

.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 10px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; background: var(--paper); z-index: 99;
  padding: 24px; transform: translateY(-12px); opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease); overflow-y: auto;
  border-top: 1px solid var(--line);
}
.mobile-nav.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mobile-nav a { display: block; padding: 16px 8px; font-size: 1.1rem; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }
.mobile-nav a.active { color: var(--warm-deep); }
.mobile-nav .btn { width: 100%; margin-top: 20px; }

/* ============ 页脚 ============ */
.footer { background: var(--char); color: var(--char-text-2); padding: clamp(48px, 5vw, 72px) 0 32px; position: relative; }
.footer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, oklch(100% 0 0 / .12), transparent);
}
.footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.4fr auto; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid var(--char-line); }
.footer__brand .logo__mark { background: var(--paper); color: var(--char); }
.footer__brand .logo__name { color: #fff; }
.footer__brand .logo__sub { color: var(--char-text-2); }
.footer__desc { margin: 18px 0 24px; color: var(--char-text-2); font-size: .92rem; line-height: 1.78; max-width: 340px; }
/* 社交图标：圆形主色实心按钮 */
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  width: 38px; height: 38px; border-radius: 50%;
  background: oklch(100% 0 0 / .07);
  display: grid; place-items: center;
  color: var(--char-text);
  transition: background .25s var(--ease), transform .25s var(--ease), color .25s, box-shadow .25s var(--ease);
}
.footer__social a:hover {
  background: var(--amber); color: var(--char);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px oklch(55% 0.105 68 / .35);
}
/* 列标题 */
.footer__col h4 {
  color: #fff; font-family: var(--font-display);
  font-size: .95rem; margin-bottom: 18px; letter-spacing: .02em;
  position: relative; padding-bottom: 10px;
}
.footer__col h4::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 18px; height: 2px; background: var(--amber);
  border-radius: 1px;
}
/* 链接行 */
.footer__col a {
  display: block; padding: 7px 0;
  color: var(--char-text-2); font-size: .9rem;
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.footer__col a:hover { color: #fff; padding-left: 4px; }
/* 页脚「快捷链接」列：单行横向排列（标题独立一行） */
.footer__col--quick > h4 { margin-bottom: 8px; }
.footer__col--quick a {
  display: inline-block;
  padding: 4px 14px 4px 0;
  white-space: nowrap;
  vertical-align: middle;
}
.footer__col--quick a:hover { padding-left: 4px; padding-right: 10px; }
/* 联系方式：圆形品牌色背景图标 + 等距纵列 */
.footer__contact { display: grid; gap: 12px; }
.footer__contact li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 0 !important;
  font-size: .9rem; color: var(--char-text-2); line-height: 1.55;
}
.footer__contact li svg {
  color: #fff; flex: none;
  width: 32px; height: 32px;
  padding: 7px; border-radius: 9px;
  background: linear-gradient(135deg, oklch(44% 0.105 253 / .95), oklch(36% 0.090 253 / .95));
  margin-top: 0 !important;
  box-shadow: 0 4px 10px oklch(44% 0.105 253 / .25);
}
.footer__contact li:nth-child(2) svg {
  background: linear-gradient(135deg, var(--cool) 0%, var(--cool-deep) 100%);
  box-shadow: 0 4px 10px oklch(47% 0.07 232 / .3);
}
.footer__contact li:nth-child(3) svg {
  background: linear-gradient(135deg, oklch(52% 0.10 250) 0%, oklch(42% 0.09 250) 100%);
  box-shadow: 0 4px 10px oklch(52% 0.10 250 / .3);
}
/* 页脚「关注我们」二维码列 */
.footer__qr {
  display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-start;
  min-width: 140px;
}
.footer__qr h4 { width: 100%; margin-bottom: 4px; }
.footer__qr-empty {
  width: 96px; height: 96px; border-radius: 12px;
  display: grid; place-items: center; text-align: center;
  background: oklch(100% 0 0 / .05);
  border: 1.5px dashed oklch(100% 0 0 / .18);
  color: var(--char-text-2);
  font-size: .72rem; padding: 10px;
  line-height: 1.4;
}
.footer__qr-empty svg { color: oklch(100% 0 0 / .35); margin-bottom: 4px; }
.footer__qr-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 96px;
}
.footer__qr-img {
  position: relative;
  width: 96px; height: 96px; padding: 6px;
  background: linear-gradient(135deg, #fff 0%, oklch(97.5% 0.005 255) 100%);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px oklch(100% 0 0 / .08),
    0 12px 28px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.footer__qr-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* 主推二维码：放大 + 主色描边 + 推荐角标 */
.footer__qr-item--featured { min-width: 132px; }
.footer__qr-item--featured .footer__qr-img {
  width: 132px; height: 132px; padding: 8px;
  box-shadow:
    0 0 0 2px oklch(44% 0.105 253 / .65),
    0 0 0 5px oklch(44% 0.105 253 / .12),
    0 16px 36px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.6);
}
.footer__qr-item--featured .footer__qr-label { font-size: .9rem; color: #fff; font-weight: 600; }
.footer__qr-badge {
  position: absolute; top: -9px; right: -9px;
  background: linear-gradient(135deg, oklch(44% 0.105 253 / .98), oklch(38% 0.095 253 / .98));
  color: #fff; font-size: .62rem; font-weight: 600; letter-spacing: .05em;
  padding: 3px 8px; border-radius: 999px;
  box-shadow: 0 4px 10px oklch(44% 0.105 253 / .4);
}
.footer__qr-item--featured .footer__qr-img:hover {
  transform: translateY(-4px) rotate(-1.5deg);
  box-shadow:
    0 0 0 2px oklch(44% 0.105 253 / .85),
    0 0 0 6px oklch(44% 0.105 253 / .16),
    0 20px 44px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.6);
}
.footer__qr-item:hover .footer__qr-img {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow:
    0 0 0 2px oklch(44% 0.105 253 / .5),
    0 16px 36px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.6);
}
.footer__qr-label {
  font-size: .82rem; color: #fff;
  letter-spacing: .04em; font-weight: 500;
}
.footer__qr-desc {
  font-size: .72rem; color: var(--char-text-2);
  max-width: 110px; text-align: center; line-height: 1.45;
}
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; padding-top: 32px;
  font-size: .8rem; color: var(--char-text-2);
}
.footer__bottom a:hover { color: #fff; }
.divider-dot {
  display: inline-block; margin: 0 10px;
  width: 3px; height: 3px; border-radius: 50%;
  background: oklch(44% 0.105 253 / .65);
  vertical-align: middle;
}

/* ============ 卡片 / 网格 ============ */
.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--card-pad); overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--warm); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: transparent; }
.card:hover::before { transform: scaleX(1); }
.card__icon { width: 54px; height: 54px; border-radius: 13px; background: var(--warm-soft); color: var(--warm-deep); display: grid; place-items: center; margin-bottom: 20px; }
.card__icon svg { width: 26px; height: 26px; }
.card .h3 { margin-bottom: 10px; }
.card p { color: var(--ink-2); font-size: .94rem; }

/* ============ 统计 ============ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px,3vw,40px); }
.stat { padding: 8px 0; border-top: 2px solid var(--warm); }
.stat__num { font-family: var(--font-num); font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem); font-weight: 600; color: #fff; line-height: 1; letter-spacing: -.02em; }
.section:not(.section--dark) .stat__num { color: var(--warm-deep); }
.stat__label { margin-top: 12px; color: var(--ink-2); font-size: .88rem; }
.section--dark .stat__label { color: var(--char-text-2); }

/* ============ 进入动画（精密浮现） ============ */
.reveal { opacity: 0; transform: translateY(26px); filter: blur(8px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; filter: blur(0); }
/* 错落入场：同组多个 reveal 依次浮现（仅作节奏感，不依赖 JS） */
.reveal:nth-child(2) { transition-delay: .06s; }
.reveal:nth-child(3) { transition-delay: .12s; }
.reveal:nth-child(4) { transition-delay: .18s; }
.reveal:nth-child(5) { transition-delay: .24s; }
.reveal:nth-child(6) { transition-delay: .30s; }

/* ============ 面包屑 ============ */
.crumb { padding: 18px 0; font-size: .82rem; color: var(--ink-3); font-family: var(--font-mono); letter-spacing: .04em; }
.crumb a:hover { color: var(--warm-deep); }
.crumb span { margin: 0 8px; }

/* ============ 子页 Hero ============ */
.page-hero { position: relative; padding: calc(var(--header-h) + clamp(64px,9vw,112px)) 0 clamp(72px,9vw,112px); background: var(--char); color: #fff; overflow: hidden; }
.page-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(oklch(100% 0 0 / .04) 1px, transparent 1px),
    linear-gradient(90deg, oklch(100% 0 0 / .04) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 78% 28%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 78% 28%, #000, transparent 72%);
}
.page-hero .container { position: relative; }
.page-hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.18; }
.page-hero p { margin-top: 18px; color: var(--char-text-2); max-width: 58ch; font-size: 1.05rem; }

/* ============ 首页 Hero（编辑式） ============ */
.hero { position: relative; padding: calc(var(--header-h) + clamp(64px,9vw,112px)) 0 clamp(96px,12vw,160px); background: var(--paper); overflow: hidden; }
.hero__grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(circle at 82% 12%, #000, transparent 55%);
  mask-image: radial-gradient(circle at 82% 12%, #000, transparent 55%);
  opacity: .7;
}
.hero__inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px,5vw,72px); align-items: center; }
.hero__text { position: relative; }
.hero__text::before {
  content: ""; display: block; width: 64px; height: 12px; margin-bottom: 22px;
  background-image: repeating-linear-gradient(90deg, var(--warm) 0 2px, transparent 2px 9px);
  background-size: 9px 12px; background-repeat: repeat-x;
}
.hero__title { font-family: var(--font-display); font-size: clamp(2.4rem, 1.4rem + 4.4vw, 4.6rem); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; color: var(--ink); }
.hero__title .hl { color: var(--warm); font-style: italic; }
.hero__lead { margin: 28px 0 36px; color: var(--ink-2); font-size: 1.12rem; max-width: 52ch; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 36px; }
.hero__tags span { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .04em; color: var(--ink-2); border: 1px solid var(--line-strong); padding: 7px 13px; border-radius: 999px; }

.hero__visual { position: relative; }
.hero__scale { position: absolute; left: -18px; top: 8px; bottom: 8px; width: 14px;
  background-image: repeating-linear-gradient(0deg, var(--line-strong) 0 1px, transparent 1px 16px);
  border-left: 2px solid var(--ink);
}
.readout {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(30px,3.2vw,42px); box-shadow: var(--sh-2);
}
.readout__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.readout__title { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.readout__status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; color: var(--cool-deep); }
.readout__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cool); box-shadow: 0 0 0 4px var(--cool-soft); }
.readout__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.meter { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: var(--paper-2); }
.meter--warm { background: var(--amber-soft); border-color: oklch(71% 0.120 78 / .28); }
.meter--cool { background: var(--cool-soft); border-color: oklch(47% 0.072 232 / .25); }
.meter__label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.meter--warm .meter__label { color: var(--amber-deep); }
.meter--cool .meter__label { color: var(--cool-deep); }
.meter__val { font-family: var(--font-num); font-size: 2.6rem; font-weight: 600; line-height: 1; margin: 10px 0 4px; color: var(--ink); }
.meter__val i { font-size: .9rem; font-style: normal; color: var(--ink-3); margin-left: 4px; }
.meter__bar { height: 6px; border-radius: 999px; background: oklch(100% 0 0 / .5); overflow: hidden; margin-top: 12px; }
.meter__bar span { display: block; height: 100%; border-radius: 999px; }
.meter--warm .meter__bar span { background: var(--amber); }
.meter--cool .meter__bar span { background: var(--cool); }
.readout__foot { display: flex; justify-content: space-between; margin-top: 22px; font-family: var(--font-mono); font-size: .72rem; color: var(--ink-3); letter-spacing: .04em; }
.float-chip { position: absolute; background: #fff; color: var(--ink); font-size: .8rem; font-weight: 600; padding: 9px 14px; border-radius: 12px; box-shadow: var(--sh-2); display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); }
.float-chip b { color: var(--warm-deep); }
.float-chip--1 { top: -16px; left: -22px; }
.float-chip--2 { bottom: 22px; right: -24px; color: var(--cool-deep); }
.float-chip--2 b { color: var(--cool-deep); }

/* ============ 信任条 ============ */
.trust { border-bottom: 1px solid var(--line); padding: clamp(40px,5vw,60px) 0; }
.trust__label { text-align: center; color: var(--ink-3); font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; }
.trust__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; }
.trust__logos span { color: var(--ink-2); font-weight: 600; font-size: 1rem; opacity: .85; }

/* ============ 产品卡（首页） ============ */
.prod { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.prod:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: transparent; }
.prod__thumb {
  height: 150px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04), inset 0 2px 8px rgba(0,0,0,.02);
}
/* 有实物图时：白底 + 图片呼吸空间 */
.prod__thumb--photo { background: linear-gradient(180deg, #fafbfc 0%, #fff 40%, #fff 100%); }
.prod__thumb img {
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  object-fit: contain;
  object-position: center center;
  display: block;
  border-radius: 6px;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.prod:hover .prod__thumb img { transform: scale(1.04); }
.prod__thumb svg { width: 54px; height: 54px; }
.prod__thumb--1 { background: var(--ink); }
.prod__thumb--2 { background: var(--warm); }
.prod__thumb--3 { background: var(--cool); }
.prod__body { padding: var(--card-pad); }
.prod__body .h3 { margin-bottom: 10px; }
.prod__body p { color: var(--ink-2); font-size: .9rem; }
.prod__more { display: inline-block; margin-top: 14px; color: var(--warm-deep); font-weight: 600; font-size: .88rem; }

/* ============ 场景卡 ============ */
.scene { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--card-pad); border-left: 3px solid var(--warm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.scene:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.scene__no { font-family: var(--font-mono); font-size: .9rem; font-weight: 700; color: var(--warm-deep); letter-spacing: .1em; display: block; margin-bottom: 12px; }
.scene .h3 { margin-bottom: 10px; }
.scene p { color: var(--ink-2); font-size: .92rem; }

/* ============ CTA ============ */
/* CTA 紧贴上一段内容：用负 margin 吃掉前 section 的底部 padding，避免双倍留白 */
.cta { padding: clamp(48px, 5vw, 72px) 0; margin-top: -48px; position: relative; z-index: 1; }
.cta__inner {
  background: linear-gradient(135deg, var(--char-2) 0%, var(--char) 60%, oklch(30% 0.04 50 / 1) 100%);
  border: 1px solid oklch(100% 0 0 / .06);
  border-radius: var(--radius-lg);
  padding: clamp(46px, 5.5vw, 76px);
  display: flex; justify-content: space-between; align-items: center;
  gap: 40px; flex-wrap: wrap;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.6);
  position: relative; overflow: hidden;
}
/* 右上品牌光晕 */
.cta__inner::after {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, oklch(60% 0.18 48 / .55), transparent 65%);
  pointer-events: none;
}
/* 左下方格装饰线（呼应 hero） */
.cta__inner::before {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 60%; height: 60%;
  background-image:
    linear-gradient(oklch(100% 0 0 / .045) 1px, transparent 1px),
    linear-gradient(90deg, oklch(100% 0 0 / .045) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at 0 100%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 0 100%, #000 0%, transparent 70%);
  pointer-events: none;
}
.cta__text { position: relative; z-index: 1; max-width: 56ch; }
.cta__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--warm); margin-bottom: 18px;
}
.cta__eyebrow::before {
  content: ""; width: 24px; height: 1.5px; background: var(--warm);
}
.cta__title {
  color: #fff; font-family: var(--font-display);
  font-size: clamp(1.55rem, 1rem + 2.4vw, 2.25rem);
  font-weight: 600; line-height: 1.22; letter-spacing: -.01em;
  text-wrap: balance;
}
.cta__sub {
  color: oklch(86% 0.012 75); margin-top: 18px; max-width: 56ch;
  font-size: 1.02rem; line-height: 1.75;
}
.cta__actions { display: flex; gap: 14px; flex-wrap: wrap; position: relative; z-index: 1; }
.cta__actions .btn--light { font-weight: 600; padding: 14px 26px; }
.cta__actions .btn--outline-light { padding: 14px 26px; font-weight: 500; }

/* ============ 关于我们 ============ */
.about__intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px,5vw,64px); align-items: center; }
.about__intro .lead { margin-bottom: 18px; }
.about__facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 28px; }
.about__facts div { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--paper-2); }
.about__facts b { display: block; color: var(--ink); font-size: .92rem; font-family: var(--font-num); }
.about__facts span { font-size: .8rem; color: var(--ink-2); }
.about__intro-visual { display: grid; gap: 16px; }
.about__card { border-radius: var(--radius); padding: var(--card-pad); border: 1px solid var(--line); }
.about__card--1 { background: var(--ink); color: #fff; }
.about__card--2 { background: var(--warm-soft); }
.about__card--3 { background: var(--cool-soft); }
.about__card-k { font-family: var(--font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--warm-deep); }
.about__card--1 .about__card-k { color: var(--warm); }
.about__card p { margin-top: 8px; font-size: .94rem; }

/* 时间线 */
.timeline { position: relative; max-width: 820px; margin: 0 auto; padding-left: 30px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line-strong); }
.tl { position: relative; padding: 0 0 34px 28px; }
.tl:last-child { padding-bottom: 0; }
.tl::before { content: ""; position: absolute; left: -30px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--warm); box-shadow: 0 0 0 4px var(--warm-soft); }
.tl__year { display: inline-block; font-family: var(--font-mono); font-size: .72rem; font-weight: 700; color: var(--warm-deep); letter-spacing: .1em; margin-bottom: 8px; }
.tl .h3 { margin-bottom: 8px; }
.tl p { color: var(--ink-2); font-size: .94rem; }

/* 资质（仅暗色区块内使用，避免与首页浅色卡片冲突） */
.section--dark .cert { text-align: center; padding: var(--card-pad) 16px; border: 1px solid var(--char-line); border-radius: var(--radius); background: oklch(100% 0 0 / .04); }
.section--dark .cert__ic { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%; background: var(--warm); color: #fff; font-weight: 800; }
.section--dark .cert b { display: block; color: #fff; font-family: var(--font-num); font-size: 1.25rem; letter-spacing: .03em; }
.section--dark .cert span { font-size: .82rem; color: var(--char-text-2); }

/* ============ 产品中心 ============ */
.filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; }
.filter { padding: 10px 20px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink-2); font-size: .88rem; font-weight: 600; font-family: var(--font-mono); letter-spacing: .02em; transition: all .2s var(--ease); }
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.filter__count { display: inline-block; min-width: 18px; padding: 1px 7px; margin-left: 5px; border-radius: 999px; background: rgba(0,0,0,.07); font-size: .72rem; font-weight: 600; font-family: var(--font-mono); line-height: 1.5; }
.filter.active .filter__count { background: rgba(255,255,255,.22); }
/* 筛选结果计数：筛选器下方一行小字 */
.filter-meta { margin: 18px 0 28px; font-size: .82rem; color: var(--ink-3); letter-spacing: .02em; }
/* 居中小注块（如「进入完整下载中心」按钮行），与区块节奏对齐 */
.center-note { text-align: center; margin-top: var(--s-6); }
.filter-meta__count { font-family: var(--font-mono); font-weight: 700; color: var(--warm-deep); font-size: 1rem; margin-right: 2px; }
.pcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1);
}
.pcard:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-2);
}
.pcard.hide { display: none; }
/* 媒体区：整块可点进详情 */
.pcard__media { display: block; position: relative; }

/*
 * 产品卡（产品中心页）
 * 设计方向：专业工业产品目录 · 白底摄影棚风格
 * 参考：Siemens / Schneider / Omron B2B 产品展示
 * 核心原则：干净白底 + 充足留白 + 微妙画框感 + 统一视觉节奏
 */
.pcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), border-color .35s ease;
}
.pcard:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-2);
  border-color: transparent;
}
.pcard.hide { display: none; }
/* 媒体区：整块可点进详情 */
.pcard__media { display: block; position: relative; }

/*
 * 缩略图区 —— 白底摄影棚
 *
 * 纯白底 + 内嵌画框 + 柔和投影：
 *   白底产品 → 自然融入，像官方产品照
 *   黑底产品(LCD) → 白底形成自然边框，不再突兀
 *   透明 PNG → 白底正确合成，透明区域显示为白色
 */
.pcard__thumb {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: #fff;
  /* 微妙的内发光，营造"画框嵌入"的层次感 */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04), inset 0 2px 8px rgba(0,0,0,.02);
}
/* 有实物图时：白色画框 + 图片呼吸空间 */
.pcard__thumb:has(img) {
  background: linear-gradient(180deg, #fafbfc 0%, #fff 40%, #fff 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.05),
    inset 0 1px 3px rgba(0,0,0,.03),
    0 1px 0 rgba(0,0,0,.02) /* 底部分隔线 */;
}
/* 纯色占位块（无图）：品牌色面板 */
.pcard__thumb:not(:has(img)) {
  background: var(--ink);
}
.pcard__thumb svg {
  width: 56px; height: 56px;
  opacity: .55;
}

/*
 * 产品实物图 —— 专业展示
 * 居中 + contain + 充足内边距（呼吸空间）
 * 无额外修饰，让产品本身说话
 */
.pcard__thumb img {
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  object-fit: contain;
  object-position: center center;
  display: block;
  border-radius: 6px;
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1);
}
.pcard:hover .pcard__thumb img {
  transform: scale(1.04);
}
/* hover 进入提示（白底适配：深色半透明标签） */
.pcard__go { position: absolute; right: 12px; bottom: 12px; z-index: 2; font-size: .72rem; font-weight: 600; color: #fff; background: rgba(28,26,23,.7); padding: 5px 12px; border-radius: 999px; opacity: 0; transform: translateY(6px); transition: opacity .25s var(--ease), transform .25s var(--ease); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); letter-spacing: .02em; }
.pcard:hover .pcard__go { opacity: 1; transform: translateY(0); }
.pcard__thumb--1 { background: var(--ink); }
.pcard__thumb--2 { background: var(--warm); }
.pcard__thumb--3 { background: var(--cool); }
.pcard__thumb--4 { background: var(--cool-deep); }
.pcard__thumb--5 { background: var(--warm-deep); }
.pcard__thumb--6 { background: var(--ink); }
.pcard__body { padding: var(--card-pad); flex: 1; display: flex; flex-direction: column; }
.pcard__cat { font-family: var(--font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--warm-deep); }
.pcard__body .h3 { margin: 8px 0 10px; }
.pcard__body .h3 a { color: inherit; text-decoration: none; transition: color .2s var(--ease); }
.pcard__body .h3 a:hover { color: var(--warm-deep); }
.pcard__body > p { color: var(--ink-2); font-size: .9rem; }
.pcard__spec { margin: 16px 0; border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 8px; }
.pcard__spec li { display: flex; justify-content: space-between; font-size: .82rem; }
.pcard__spec span { color: var(--ink-3); }
.pcard__spec b { color: var(--ink); font-weight: 600; }
.pcard__more { margin-top: auto; color: var(--warm-deep); font-weight: 600; font-size: .88rem; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap .2s var(--ease); }
.pcard__more:hover { gap: 10px; }
.product-empty { text-align: center; color: var(--ink-3); padding: 40px 0; font-family: var(--font-mono); }

/* ===== 应用案例卡片（首页动态） ===== */
.case { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.case:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: transparent; }
.case__cover { height: 124px; display: grid; place-items: center; color: #fff; position: relative; }
.case__cover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--warm); }
.case__ind { font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 6px 14px; background: rgba(0,0,0,.2); border-radius: 999px; }
.case__body { padding: var(--card-pad); flex: 1; display: flex; flex-direction: column; }
.case__body .h3 { margin-bottom: 10px; }
.case__body > p { color: var(--ink-2); font-size: .9rem; }
.case__more { margin-top: auto; color: var(--warm-deep); font-weight: 600; font-size: .88rem; }

/* ===== 新闻动态列表（首页动态） ===== */
.newslist { display: grid; gap: 14px; }
.news { display: flex; align-items: center; gap: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.news:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: transparent; }
.news__date { flex: none; width: 66px; text-align: center; font-family: var(--font-mono); font-weight: 700; color: var(--warm-deep); font-size: .92rem; line-height: 1.2; border-right: 2px solid var(--warm); padding-right: 16px; }
.news__main { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.news__title { color: var(--ink); font-size: 1.02rem; font-weight: 600; }
.news__excerpt { color: var(--ink-2); font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news__arrow { flex: none; color: var(--warm-deep); font-weight: 700; }

/* ============ 技术支持 ============ */
.downloads { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.dl { display: flex; align-items: center; gap: 16px; padding: 20px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.dl:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: transparent; }
.dl__ic { font-size: 1.5rem; }
.dl__info { flex: 1; }
.dl__info b { display: block; color: var(--ink); font-size: .95rem; }
.dl__info i { font-style: normal; font-size: .8rem; color: var(--ink-3); font-family: var(--font-mono); }
.dl__btn { font-family: var(--font-mono); font-size: .76rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--ink); padding: 8px 16px; border-radius: 999px; }

/* FAQ */
.support__faq { max-width: 860px; margin: 0 auto; }
.faq__item { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; background: #fff; }
.faq__q { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; font-size: 1.02rem; font-weight: 600; color: var(--ink); font-family: var(--font-display); }
.faq__sign { font-size: 1.5rem; font-weight: 300; color: var(--warm-deep); transition: transform .3s var(--ease); }
.faq__item.open .faq__sign { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq__item.open .faq__a { max-height: 1200px; }
.faq__a p { padding: 0 24px 22px; color: var(--ink-2); font-size: .94rem; }

/* 资源卡 */
.res { background: oklch(100% 0 0 / .05); border: 1px solid var(--char-line); border-radius: var(--radius); padding: var(--card-pad); border-top: 3px solid var(--warm); }
.res__tag { display: inline-block; font-family: var(--font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--warm); margin-bottom: 12px; }
.res .h3 { color: #fff; margin-bottom: 8px; }
.res p { color: var(--char-text-2); font-size: .9rem; margin-bottom: 14px; }
.res a { color: var(--warm); font-weight: 600; font-size: .88rem; }

/* ============ 联系我们 ============ */
.contact__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px,4vw,56px); align-items: start; }
.contact__info .h2 { margin: 4px 0 26px; }
.cinfo { display: grid; gap: 18px; }
.cinfo li { display: flex; gap: 14px; align-items: flex-start; }
.cinfo__ic { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--warm-soft); color: var(--warm-deep); display: grid; place-items: center; }
.cinfo__ic svg { width: 22px; height: 22px; }
.cinfo b { display: block; color: var(--ink); font-size: .95rem; }
.cinfo span { font-size: .88rem; color: var(--ink-2); }
.cinfo__qrcode { margin-top: 28px; display: flex; align-items: center; gap: 18px; padding: 18px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px -22px rgba(28,26,23,.45); }
/* 二维码白色名片：放大到 ~124px，内白底更醒目，仿真实扫码卡片 */
.cinfo__qr-box { flex: none; width: 124px; height: 124px; padding: 10px; background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 8px 20px -12px rgba(28,26,23,.4); display: grid; place-items: center; overflow: hidden; }
.cinfo__qr-box .qr { width: 100%; height: 100%; border-radius: 8px; }
.cinfo__qr-img-el { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 6px; }
.cinfo__qr-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cinfo__qr-cap { font-size: .98rem; font-weight: 700; color: var(--ink); line-height: 1.4; }
.cinfo__qr-sub { font-size: .8rem; color: var(--ink-3); }
/* 响应式：窄屏时二维码卡片整体下移不挤压 */
@media (max-width: 620px) {
  .cinfo__qrcode { gap: 14px; padding: 14px; }
  .cinfo__qr-box { width: 104px; height: 104px; }
}

/* 联系页·技术顾问二维码卡片：可点击 */
.cinfo__qrcode.is-clickable { cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.cinfo__qrcode.is-clickable:hover { transform: translateY(-2px); border-color: var(--warm); box-shadow: 0 16px 38px -22px rgba(28,26,23,.55); }
.cinfo__qrcode.is-clickable:focus-visible { outline: 2px solid var(--cool); outline-offset: 3px; }
.cinfo__qr-tap { font-size: .76rem; color: var(--warm); font-weight: 600; margin-top: 2px; letter-spacing: .02em; }
.cinfo__qr-tap::before { content: "\203A"; display: inline-block; margin-right: 2px; }

/* 技术顾问名片弹窗 */
.qr-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; }
.qr-modal[hidden] { display: none; }
.qr-modal__mask { position: absolute; inset: 0; background: rgba(20,18,16,.5); backdrop-filter: blur(2px); animation: qrFade .2s ease; }
.qr-card { position: relative; width: min(360px, 92vw); background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(20,18,16,.6); animation: qrPop .26s cubic-bezier(.2,.8,.25,1); }
.qr-card__close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border: none; border-radius: 50%; background: rgba(255,255,255,.82); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; z-index: 2; transition: background .15s; }
.qr-card__close:hover { background: #fff; }
.qr-card__qr { background: linear-gradient(150deg, var(--warm) 0%, #f4a259 55%, var(--cool) 130%); padding: 30px; display: grid; place-items: center; }
.qr-card__qr .qr--lg { width: 200px; height: 200px; padding: 14px; background: #fff; border-radius: 16px; box-shadow: 0 10px 30px -16px rgba(0,0,0,.45); display: grid; place-items: center; }
.qr-card__qr .qr--lg img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 6px; }
.qr-card__qr .qr--lg.qr--ph { background: conic-gradient(var(--ink) 0 25%, #fff 0 50%, var(--ink) 0 75%, #fff 0) 0 0 / 22px 22px; }
.qr-card__body { padding: 22px 24px 26px; text-align: center; }
.qr-card__name { font-size: 1.22rem; font-weight: 800; color: var(--ink); }
.qr-card__title { font-size: .9rem; color: var(--warm); font-weight: 600; margin-top: 3px; }
.qr-card__info { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.qr-card__info li { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .86rem; color: var(--ink-2); }
.qr-card__info li svg { width: 15px; height: 15px; color: var(--cool); flex: none; }
.qr-card__note { margin-top: 16px; font-size: .82rem; color: var(--ink-3); border-top: 1px dashed var(--line); padding-top: 14px; line-height: 1.6; }
@keyframes qrFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes qrPop { from { opacity: 0; transform: translateY(12px) scale(.96) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .qr-modal__mask, .qr-card { animation: none; } }

.cform { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(36px,3.8vw,50px); box-shadow: var(--sh-1); }
.cform .h3 { margin-bottom: 4px; font-family: var(--font-display); }
.cform__tip { color: var(--ink-3); font-size: .82rem; margin-bottom: 22px; font-family: var(--font-mono); }
.cform__tip i { color: var(--warm); font-style: normal; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cform label { display: block; margin-bottom: 16px; font-size: .88rem; font-weight: 600; color: var(--ink); }
.cform label i { color: var(--warm); font-style: normal; }
.cform input, .cform select, .cform textarea { width: 100%; margin-top: 8px; padding: 13px 15px; border: 1.5px solid var(--line-strong); border-radius: 10px; font-weight: 400; color: var(--ink); background: var(--paper); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); resize: vertical; }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: none; border-color: var(--warm); box-shadow: 0 0 0 3px var(--warm-soft); }
.cform input.invalid, .cform textarea.invalid { border-color: oklch(55% 0.16 25); box-shadow: 0 0 0 3px oklch(55% 0.16 25 / .12); }
.cform .btn { width: 100%; margin-top: 6px; }
.form-msg { margin-top: 16px; padding: 12px 14px; border-radius: 10px; font-size: .88rem; }
.form-msg--ok { background: var(--warm-soft); color: var(--warm-deep); }
.form-msg--err { background: oklch(55% 0.16 25 / .1); color: oklch(45% 0.16 25); }

/* 地图 */
.map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.map__placeholder { height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, var(--paper-2), var(--paper-3)); color: var(--ink-2); text-align: center; position: relative; }
.map__placeholder::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 28px); opacity: .6; }
.map__placeholder svg { width: 44px; height: 44px; color: var(--warm); position: relative; }
.map__placeholder span { font-family: var(--font-display); font-weight: 600; color: var(--ink); position: relative; }
.map__placeholder p { font-size: .82rem; color: var(--ink-3); max-width: 360px; position: relative; }

/* 服务网络 */
.net { text-align: center; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.net:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.net b { display: block; font-family: var(--font-num); font-size: 1.15rem; color: var(--ink); margin-bottom: 6px; }
.net span { font-size: .82rem; color: var(--ink-2); }

/* ============ 响应式 ============ */
@media (max-width: 1120px) {
  .hero__inner { gap: clamp(32px, 4vw, 56px); }
  .pdetail__layout { grid-template-columns: 1fr 280px; }
  .about__intro, .contact__grid { gap: clamp(32px, 4vw, 52px); }
}
@media (max-width: 980px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 860px) {
  .hero__inner, .about__intro, .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__visual { max-width: 420px; }
  .float-chip--1 { left: 0; } .float-chip--2 { right: 0; }
}
@media (max-width: 680px) {
  .nav, .header__cta { display: none; }
  .nav-toggle { display: flex; }
  .mobile-nav .nav__item { display: block; }
  .mobile-nav .submenu {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    box-shadow: none; background: transparent; min-width: 0; padding: 0 0 0 16px; gap: 0;
  }
  .mobile-nav .submenu a { padding: 14px 8px; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .mobile-nav .caret { display: none; }
  .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .downloads { grid-template-columns: 1fr; }
  .about__facts { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .cform__row { grid-template-columns: 1fr; }
  .cform, .cta__inner { padding: 24px; }
}
@media (max-width: 560px) {
  .hero__title { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
  .hero__lead { font-size: 1rem; }
  .section-head { margin-bottom: clamp(28px, 7vw, 40px); }
  .cta__inner { flex-direction: column; align-items: flex-start; gap: 22px; }
  .cta__actions { display: flex; flex-direction: column; gap: 12px; width: 100%; }
  .cta__actions .btn { width: 100%; justify-content: center; }
  .float-chip { display: none; }
  .stats { gap: 20px; }
  .cform .btn { padding: 14px; }
  .contact__grid { gap: 28px; }
  .readout { padding: 22px; }
  .news { flex-wrap: wrap; gap: 10px; padding: 16px 18px; }
  .news__date { width: auto; border-right: none; border-bottom: 2px solid var(--warm); padding: 0 0 6px; }
  .news__excerpt { white-space: normal; }
}
:focus-visible { outline: 2px solid var(--warm); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
}

/* =========================================================
   科技感动态 + 排版精修（v2.1）
   原则：精密 / 数据流动 / 测量语义；克制，绝不发光 AI 味。
   ========================================================= */

/* —— 排版精修 —— */
.h2, .hero__title, .page-hero h1 { text-wrap: balance; }
.lead { text-wrap: pretty; }
.h2 { letter-spacing: -0.015em; }
.section-head .lead { margin-top: 16px; }

/* —— 网格缓慢漂移（扫描感）—— */
@keyframes grid-drift { from { background-position: 0 0; } to { background-position: 48px 48px; } }
.hero__grid-bg { animation: grid-drift 24s linear infinite; }
.page-hero__grid { animation: grid-drift 34s linear infinite; }

/* —— 信号波纹（状态点同心圆扩散）+ 呼吸 —— */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 var(--cool-soft); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.readout__status::before { animation: pulse-ring 2.6s ease-out infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.readout__status { animation: blink 2.6s ease-in-out infinite; }

/* —— 实时曲线面板（首页 Hero）—— */
.readout__chart { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.readout__chart-head { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; color: var(--ink-3); }
.readout__legend { display: inline-flex; align-items: center; gap: 6px; }
.readout__legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.readout__legend .dot--warm { background: var(--warm); }
.readout__legend .dot--cool { background: var(--cool); }
.readout__chart-time { margin-left: auto; }
.chart { position: relative; width: 100%; height: 96px; display: block; overflow: visible; }
.chart__line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart__line--temp { stroke: var(--warm); }
.chart__line--hum  { stroke: var(--cool); }
.chart__scan { stroke: var(--warm); stroke-width: 1; opacity: .45; animation: chart-scan 3.6s linear infinite; }
@keyframes chart-scan { 0% { transform: translateX(0); } 100% { transform: translateX(320px); } }

/* —— 子页 Hero 波形装饰（JS 注入 path）—— */
.page-hero__wave {
  position: absolute; right: 0; bottom: -2px; width: 64%; max-width: 660px; height: 170px;
  pointer-events: none; opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%);
  mask-image: linear-gradient(90deg, transparent, #000 35%);
}
.page-hero__wave svg { width: 100%; height: 100%; }
.wave { fill: none; stroke-width: 2; stroke-linecap: round; }
.wave--warm { stroke: var(--warm); opacity: .9; }
.wave--cool { stroke: var(--cool); opacity: .5; }
.wave {
  stroke-dasharray: 2400; stroke-dashoffset: 2400;
  animation: wave-draw 2.4s var(--ease) forwards, wave-drift 16s linear 2.4s infinite;
}
@keyframes wave-draw { to { stroke-dashoffset: 0; } }
@keyframes wave-drift { from { transform: translateX(0); } to { transform: translateX(-200px); } }

/* —— 精密光标（首页 Hero 视觉区）—— */
.hero__crosshair {
  position: absolute; top: 0; left: 0; width: 64px; height: 64px;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 6;
  opacity: 0; transition: opacity .35s var(--ease); mix-blend-mode: multiply;
}
.hero__crosshair.show { opacity: .55; }
.hero__crosshair::before, .hero__crosshair::after { content: ""; position: absolute; background: var(--ink); }
.hero__crosshair::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-.5px); }
.hero__crosshair::after  { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-.5px); }
.hero__crosshair span { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border: 1.5px solid var(--warm); border-radius: 50%; transform: translate(-50%, -50%); }

/* —— 卡片图标悬停微旋（精密感）—— */
.card__icon { transition: transform .4s var(--ease), background .25s var(--ease), color .25s var(--ease); }
.card:hover .card__icon { transform: rotate(-6deg); }

/* ============ 无障碍：跳转链接 ============ */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 999;
  background: var(--ink); color: var(--paper); padding: 10px 16px;
  border-radius: 8px; font-size: .85rem; font-weight: 600;
  transform: translateY(-160%); transition: transform .25s var(--ease);
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--warm); outline-offset: 3px; }

/* ============ 阅读进度条 ============ */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%; z-index: 999;
  background: linear-gradient(90deg, var(--warm), var(--cool));
}

/* ============ 回到顶部 ============ */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: #fff; color: var(--ink); cursor: pointer; display: grid; place-items: center;
  box-shadow: var(--sh-2); opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background .2s;
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--ink); color: var(--paper); }
.to-top svg { width: 20px; height: 20px; }

/* ============ 页面加载揭幕 ============ */
.page-loader {
  position: fixed; inset: 0; z-index: 9999; background: var(--paper);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.page-loader.hide { opacity: 0; visibility: hidden; }
.page-loader__mark {
  width: 56px; height: 56px; border-radius: 14px; background: var(--char); color: var(--paper);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 28px;
  animation: loader-pop 1s var(--ease) infinite alternate;
}
.page-loader__bar { width: 120px; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.page-loader__bar::after {
  content: ""; display: block; height: 100%; width: 40%; border-radius: 2px; background: var(--warm);
  animation: loader-slide 1.1s var(--ease) infinite;
}
.page-loader__txt { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .2em; color: var(--ink-3); text-transform: uppercase; }
@keyframes loader-pop { from { transform: scale(.9); } to { transform: scale(1.04); } }
@keyframes loader-slide { 0% { transform: translateX(-120%); } 100% { transform: translateX(360%); } }

@media (prefers-reduced-motion: reduce) {
  .progress, .to-top { display: none; }
  .page-loader { display: none; }
  .wave { animation: none; stroke-dashoffset: 0; }
}

/* ============ 资质认证卡片 ============ */
.certs { gap: 18px; }
.cert { padding: 28px; }
.cert__badge {
  width: 52px; height: 52px; border-radius: 12px; background: var(--paper-2);
  color: var(--warm-deep); display: grid; place-items: center; font-family: var(--font-mono);
  font-weight: 700; font-size: .8rem; letter-spacing: .04em; margin-bottom: 16px; border: 1px solid var(--line);
}

/* ============ 服务承诺条（联系页服务网络） ============ */
.svnet__note {
  margin-top: 22px; padding: 18px 22px; background: var(--paper-2);
  border-radius: var(--radius); border-left: 3px solid var(--warm); font-size: .92rem; color: var(--ink-2);
}

/* 应用行业卡片编号（等宽，工程测控语义） */
.indus .card__icon { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; }

/* ============ 详情页（产品 / 案例 / 资讯） ============ */
.breadcrumb { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.breadcrumb a { color: var(--ink-3); text-decoration: none; transition: color .2s var(--ease); }
.breadcrumb a:hover { color: var(--warm-deep); }
.breadcrumb .sep { color: var(--line-strong); }
.breadcrumb span:last-child { color: var(--ink); }

.detail { animation: detail-in .5s var(--ease) both; }
@keyframes detail-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.detail__hero { display: flex; align-items: center; gap: 28px; padding: 30px; border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--line); margin-bottom: 36px; }
.detail__thumb { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 16px; background: var(--accent, var(--ink)); color: #fff; display: grid; place-items: center; }
.detail__thumb svg { width: 46px; height: 46px; }
.detail__head { flex: 1; min-width: 0; }
.detail__tag { display: inline-block; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--warm-deep); background: var(--paper); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; }
.detail__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 4.4vw, 2.6rem); line-height: 1.12; letter-spacing: -.01em; color: var(--ink); }
.detail__model { margin-top: 10px; font-family: var(--font-mono); font-size: .92rem; color: var(--ink-2); }

.detail__hero--case { padding: 0; overflow: hidden; }
.detail__cover { min-height: 200px; background: var(--accent, var(--ink)); display: grid; place-items: center; padding: 40px; }
.detail__ind { font-family: var(--font-mono); font-size: 1.1rem; letter-spacing: .12em; color: rgba(255,255,255,.92); text-transform: uppercase; }

.detail__body { max-width: 760px; }
.detail__body .detail__tag { margin-bottom: 14px; }
.detail__lead { font-size: 1.06rem; line-height: 1.8; color: var(--ink-2); margin: 0 0 28px; }
.detail__sub { margin: 0 0 16px; }
.detail__spec { list-style: none; padding: 0; margin: 0 0 32px; border-top: 1px solid var(--line); }
.detail__spec li { display: flex; justify-content: space-between; gap: 24px; padding: 13px 4px; border-bottom: 1px solid var(--line); font-size: .95rem; }
.detail__spec li span { color: var(--ink-3); font-family: var(--font-mono); font-size: .82rem; letter-spacing: .03em; }
.detail__spec li b { color: var(--ink); font-weight: 600; text-align: right; }
.detail__rich { font-size: 1rem; line-height: 1.9; color: var(--ink-2); margin-bottom: 32px; }
.detail__rich > :first-child, .prose > :first-child { margin-top: 0; }
.detail__rich > :last-child, .prose > :last-child { margin-bottom: 0; }
.detail__rich h2, .prose h2 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; line-height: 1.4; margin: 1.6em 0 .7em; }
.detail__rich h3, .prose h3 { font-size: 1.15rem; font-weight: 700; margin: 1.4em 0 .6em; }
.detail__rich p, .prose p { margin: 0 0 1.1em; }
.detail__rich ul, .prose ul { margin: 0 0 1.1em; padding-left: 1.4em; list-style: disc; }
.detail__rich ol, .prose ol { margin: 0 0 1.1em; padding-left: 1.4em; list-style: decimal; }
.detail__rich li, .prose li { margin: .35em 0; }
.detail__rich a, .prose a { color: var(--warm-deep); text-decoration: underline; text-underline-offset: 3px; }
.detail__rich img, .prose img { max-width: 100%; height: auto; border-radius: 10px; margin: .6em 0; }
.detail__rich blockquote, .prose blockquote { margin: 1.2em 0; padding: .8em 1.2em; border-left: 3px solid var(--warm); background: var(--paper-2); border-radius: 0 10px 10px 0; color: var(--ink-2); }
.detail__rich code, .prose code { font-family: var(--font-mono); background: var(--paper-2); padding: .12em .4em; border-radius: 5px; font-size: .9em; }
.detail__rich pre, .prose pre { background: var(--ink); color: #f4efe6; padding: 16px 18px; border-radius: 10px; overflow: auto; font-family: var(--font-mono); font-size: .86rem; line-height: 1.7; }
.detail__rich pre code, .prose pre code { background: none; padding: 0; color: inherit; }
.detail__rich hr, .prose hr { border: none; border-top: 1px solid var(--line); margin: 2em 0; }
.detail__rich table, .prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .92rem; }
.detail__rich th, .detail__rich td, .prose th, .prose td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.detail__rich th, .prose th { background: var(--paper-2); }
.detail__rich strong, .prose strong { font-weight: 700; color: var(--ink); }
.prose { max-width: 760px; }
.detail__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.detail__empty { text-align: center; padding: 70px 0; }
.detail__empty .detail__lead { margin-top: 8px; }
.detail__empty .detail__cta { justify-content: center; margin-top: 22px; }

/* ============ 产品详情页（增强布局） ============ */
.pdetail__hero {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: clamp(24px, 4vw, 44px);
  align-items: center;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  border: 1px solid var(--line);
  margin-bottom: clamp(32px, 4vw, 48px);
}
/*
 * 详情页产品大图 —— 白底摄影棚（与列表卡统一）
 */
.pdetail__visual {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  display: grid; place-items: center;
  position: relative;
  background: linear-gradient(180deg, #fafbfc 0%, #fff 40%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.05),
    inset 0 1px 3px rgba(0,0,0,.03),
    0 1px 0 rgba(0,0,0,.02);
}
/* 有实物图时隐藏渐变装饰 */
.pdetail__visual:has(img)::after { display: none; }
.pdetail__visual::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,.02), transparent 55%);
  pointer-events: none;
}
.pdetail__visual svg { width: 88px; height: 88px; opacity: .45; }
/* 详情页大图 —— 充足呼吸空间 */
.pdetail__visual img {
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  object-fit: contain;
  object-position: center center;
  display: block;
  border-radius: 8px;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.pdetail__hero:hover .pdetail__visual img {
  transform: scale(1.03);
}
.pdetail__info { min-width: 0; }
.pdetail__info .detail__tag { margin-bottom: 14px; }
.pdetail__info .detail__title { margin: 0; }
.pdetail__info .detail__lead { margin: 16px 0 24px; }
.pdetail__info .detail__cta { margin-top: 4px; }

/* 双列布局：主内容 + 粘性侧栏 */
.pdetail__layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: clamp(28px, 4vw, 44px);
  align-items: start;
}
.pdetail__main { min-width: 0; }
.pdetail__side { position: sticky; top: calc(var(--header-h) + 24px); }

.pdetail__sec { margin-bottom: clamp(32px, 4vw, 44px); }
.pdetail__h {
  font-family: var(--font-display); font-size: 1.28rem; font-weight: 700; color: var(--ink);
  margin: 0 0 18px; padding-bottom: 12px; border-bottom: 2px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.pdetail__h::before { content: ""; width: 4px; height: 18px; background: var(--warm); border-radius: 2px; }
/* 产品介绍富文本：继承 .detail__rich 的 prose 样式（headings/lists/code/image 等），并设置自身的图文混排节奏 */
.pdetail__rich { color: var(--ink-2); font-size: 1rem; line-height: 1.85; }
.pdetail__rich > :first-child { margin-top: 0; }
.pdetail__rich > :last-child { margin-bottom: 0; }
.pdetail__rich h2 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; line-height: 1.4; color: var(--ink); margin: 1.4em 0 .6em; }
.pdetail__rich h3 { font-size: 1.12rem; font-weight: 700; color: var(--ink); margin: 1.2em 0 .5em; }
.pdetail__rich p { margin: 0 0 1.05em; }
.pdetail__rich ul, .pdetail__rich ol { margin: 0 0 1.05em; padding-left: 1.4em; }
.pdetail__rich ul { list-style: disc; }
.pdetail__rich ol { list-style: decimal; }
.pdetail__rich li { margin: .3em 0; }
.pdetail__rich a { color: var(--warm-deep); text-decoration: underline; text-underline-offset: 3px; }
.pdetail__rich img { max-width: 100%; height: auto; border-radius: 10px; margin: .8em 0; display: block; }
.pdetail__rich blockquote { margin: 1.1em 0; padding: .8em 1.2em; border-left: 3px solid var(--warm); background: var(--paper-2); border-radius: 0 10px 10px 0; color: var(--ink-2); }
.pdetail__rich strong, .pdetail__rich b { font-weight: 700; color: var(--ink); }
.pdetail__rich figure { margin: 1.2em 0; }
.pdetail__rich figcaption { font-size: .85rem; color: var(--ink-3); text-align: center; margin-top: .5em; }

/* 核心参数高亮卡片 */
.cspecs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cspec {
  padding: 22px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); text-align: center;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.cspec:hover { border-color: var(--warm); transform: translateY(-2px); }
.cspec__val { display: block; font-family: var(--font-num); font-size: 1.32rem; font-weight: 700; color: var(--ink); line-height: 1.25; margin-bottom: 6px; }
.cspec__lbl { display: block; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; }

/* 服务承诺 */
.promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.promise__item { display: flex; align-items: flex-start; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.promise__ic { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; background: var(--warm-soft); color: var(--warm-deep); display: grid; place-items: center; }
.promise__ic svg { width: 22px; height: 22px; }
.promise__item b { display: block; font-size: .96rem; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.promise__item span { font-size: .82rem; color: var(--ink-3); line-height: 1.5; }

/* 询价侧栏卡片 */
.inqcard {
  padding: clamp(22px, 2.5vw, 28px); border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper); box-shadow: 0 12px 32px -20px rgba(28,26,23,.18);
}
.inqcard__title { font-family: var(--font-display); font-size: 1.18rem; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.inqcard__sub { font-size: .88rem; line-height: 1.65; color: var(--ink-2); margin: 0 0 18px; }
.inqcard__btn { width: 100%; justify-content: center; margin-bottom: 10px; }
.inqcard__btn2 { width: 100%; justify-content: center; }
.inqcard__contact { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.inqcard__phone, .inqcard__email { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600; color: var(--ink); text-decoration: none; transition: color .2s var(--ease); }
.inqcard__phone:hover, .inqcard__email:hover { color: var(--warm-deep); }
.inqcard__phone svg, .inqcard__email svg { color: var(--warm); flex-shrink: 0; }

@media (max-width: 880px) {
  .pdetail__hero { grid-template-columns: 1fr; gap: 20px; }
  .pdetail__visual { max-width: 340px; max-height: 300px; }
  .pdetail__layout { grid-template-columns: 1fr; }
  .pdetail__side { position: static; }
}
@media (max-width: 620px) {
  .cspecs { grid-template-columns: 1fr; }
  .promise { grid-template-columns: 1fr; }
}

/* ============ 产品详情精修（视觉打磨） ============ */
/* Hero 大图：hover 时光泽阴影 */
.pdetail__visual { transition: box-shadow .45s var(--ease); }
.pdetail__hero:hover .pdetail__visual { box-shadow: 0 26px 60px -34px rgba(28,26,23,.5); }

/* 核心参数卡：顶部暖色描边 + 数值强调 + hover 阴影 */
.cspec { position: relative; overflow: hidden; }
.cspec::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--warm), var(--warm-deep)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.cspec:hover::before { transform: scaleX(1); }
.cspec__val { color: var(--warm-deep); }
.cspec:hover { box-shadow: var(--sh-2); border-color: transparent; }

/* 技术规格：斑马纹 + 下载按钮 */
.detail__spec li:nth-child(even) { background: var(--paper-2); }
.spec__dl { margin-top: 22px; }

/* 服务承诺：hover 顶部暖边 */
.promise__item { position: relative; overflow: hidden; }
.promise__item::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--warm), var(--warm-deep)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.promise__item:hover::before { transform: scaleX(1); }

/* 相关推荐：卡片图 hover 缩放 + 「查看全部」尾卡 */
.drel__media--img img { transition: transform .5s var(--ease); }
.drel__card:hover .drel__media--img img { transform: scale(1.05); }
.drel__card--more { display: flex; align-items: center; justify-content: center; border-style: dashed; color: var(--ink-2); text-decoration: none; min-height: 200px; transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease); }
.drel__card--more:hover { border-color: var(--warm); color: var(--warm-deep); background: var(--warm-soft); transform: translateY(-4px); }
.drel__more2 { font-weight: 600; font-size: .95rem; }

/* ============ 404 页 ============ */
.nf { padding: clamp(80px, 14vw, 140px) 0; }
.nf__inner { text-align: center; max-width: 560px; margin: 0 auto; }
.nf__code { font-family: var(--font-mono); font-weight: 700; font-size: clamp(5rem, 22vw, 9rem); line-height: 1; color: var(--ink); letter-spacing: -.02em; }
.nf__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 5vw, 2.4rem); margin: 8px 0 14px; }
.nf__sub { color: var(--ink-2); line-height: 1.8; margin-bottom: 28px; }
.nf__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

@media (max-width: 560px) {
  .detail__hero { flex-direction: column; align-items: flex-start; gap: 20px; padding: 24px; }
  .detail__thumb { flex-basis: auto; }
  .detail__spec li { flex-direction: column; gap: 4px; }
  .detail__spec li b { text-align: left; }
}

/* ============ 加入我们 · 视觉块 ============ */
.join__visual {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  padding: clamp(36px, 6vw, 64px) clamp(28px, 4vw, 48px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; text-align: center;
  box-shadow: 0 24px 60px -36px rgba(28,26,23,.28);
}
.join__mark {
  width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 3rem; font-weight: 700; color: #fff;
  background: radial-gradient(circle at 30% 28%, var(--warm), #8f3d12);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.14);
}
.join__quote {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); line-height: 1.4; color: var(--ink);
  margin: 0;
}

/* ============ 加入我们 · 在招岗位 ============ */
.pos { border-top: 1px solid var(--line-strong); }
.pos__row {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 4px; border-bottom: 1px solid var(--line);
  transition: padding-left .25s ease, background .25s ease;
}
.pos__row:hover { padding-left: 14px; background: rgba(180,83,31,.04); }
.pos__title { font-size: 1.18rem; margin-bottom: 8px; color: var(--ink); }
.pos__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; }
.pos__meta span {
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .03em;
  color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
}
.pos__btn { white-space: nowrap; }
.pos__detail { margin-top: 14px; }
.pos__detail summary {
  cursor: pointer; display: inline-block; font-size: .84rem; font-weight: 600;
  color: var(--warm-deep); padding: 4px 0; user-select: none;
}
.pos__detail summary:hover { text-decoration: underline; }
.pos__detail .prose { font-size: .92rem; color: var(--ink-2); margin-top: 6px; }

/* ============ 法律页（隐私政策 / 使用条款） ============ */
.h1 {
  font-family: var(--font-display); font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--ink);
  margin: 0; text-wrap: balance;
}
.legal { max-width: 820px; margin: 0 auto; }
.legal__title { margin: 10px 0 6px; }
.legal__updated { font-family: var(--font-mono); font-size: .82rem; color: var(--ink-2); margin-bottom: 28px; }
.legal p { color: var(--ink-2); line-height: 1.85; margin: 0 0 18px; }
.legal__h { margin: 38px 0 12px; color: var(--ink); }
.legal a { color: var(--warm); text-decoration: underline; text-underline-offset: 3px; }
.legal__back { margin-top: 40px; }

/* ============ 详情页 · 相关推荐 ============ */
.drel { margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line-strong); padding-top: clamp(36px, 4vw, 56px); }
.drel__head { margin-bottom: 26px; }
.drel__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
.drel__card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); text-decoration: none; color: inherit;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  min-height: 260px;
}
.drel__card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 18px 40px -28px rgba(28,26,23,.3); }
.drel__media {
  width: 100%; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden;
  background: var(--accent, var(--ink-3)); display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
}
.drel__media--img { background: #fafbfc; }
.drel__media--img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.drel__media--cover { background-size: cover; background-position: center; }
.drel__media--icon { color: var(--accent, var(--ink)); }
.drel__media--icon svg { width: 44px; height: 44px; stroke: currentColor; opacity: .85; }
.drel__tag {
  align-self: flex-start; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em;
  color: #fff; background: var(--accent, var(--ink)); padding: 4px 10px; border-radius: 999px;
}
.drel__date { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-2); }
.drel__title { font-size: 1.05rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
.drel__sub { font-style: normal; font-size: .85rem; color: var(--ink-2); }
.drel__more {
  margin-top: auto; font-size: .85rem; font-weight: 500; color: var(--accent, var(--warm));
  display: inline-flex; align-items: center; gap: 4px;
  transition: transform .2s ease;
}
.drel__card:hover .drel__more { transform: translateX(4px); }

@media (max-width: 720px) {
  .drel__grid { grid-template-columns: 1fr; }
  .pos__row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pos__btn { align-self: flex-start; }
}

/* =========================================================
   v2.2 · 微交互 / 导航 / 产品页 / 表单 / 无障碍 增强补遗
   原则延续：克制精密、去 AI 味、暖纸基工程仪表语义；纯可逆增量
   ========================================================= */

/* 锚点滚动不被固定头遮挡 */
html { scroll-padding-top: calc(var(--header-h) + 16px); }

/* —— 导航：Logo 与汉堡键微反馈 —— */
.logo__mark { transition: transform .35s var(--ease), box-shadow .25s var(--ease); }
.logo:hover .logo__mark { transform: rotate(-4deg); }
.nav-toggle:active { transform: scale(.92); }

/* —— 筛选器：明确按压 / 悬停反馈 —— */
.filter { will-change: transform; }
.filter:hover { transform: translateY(-2px); border-color: var(--ink); }
.filter:active { transform: translateY(0) scale(.97); }

/* —— 新闻行：箭头悬停右移 —— */
.news__arrow { transition: transform .25s var(--ease), color .2s var(--ease); }
.news:hover .news__arrow { transform: translateX(4px); }

/* —— 案例卡：更多链接间隙 —— */
.case__more { display: inline-flex; align-items: center; gap: 6px; transition: gap .2s var(--ease); }
.case:hover .case__more { gap: 10px; }

/* —— 首页产品卡占位图标微旋 —— */
.prod__thumb svg { transition: transform .4s var(--ease); }
.prod:hover .prod__thumb svg { transform: rotate(-6deg) scale(1.05); }

/* —— 信任 logo 悬停点亮 —— */
.trust__logos span { transition: color .2s var(--ease); }
.trust__logos span:hover { color: var(--warm-deep); }

/* —— 统计数字悬停微浮 —— */
.stat { transition: transform .3s var(--ease); }
.stat:hover { transform: translateY(-3px); }

/* —— 产品卡规格行悬停高亮 —— */
.pcard__spec li { padding: 5px 8px; border-radius: 8px; margin: 0 -8px; transition: background .2s var(--ease); }
.pcard__spec li:hover { background: var(--paper-2); }

/* —— 详情参数表行悬停 —— */
.detail__spec li { transition: background .2s var(--ease); }
.detail__spec li:hover { background: var(--warm-soft); }

/* —— 服务承诺项悬停上浮（与 cspec 呼应，破均质）—— */
.promise__item { transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.promise__item:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: transparent; }

/* —— FAQ 问题悬停底色 —— */
.faq__q { transition: background .2s var(--ease); }
.faq__q:hover { background: var(--paper-2); }

/* —— 表单：输入框 hover 边框 + 消息入场 —— */
.cform input:hover, .cform select:hover, .cform textarea:hover { border-color: var(--line-strong); }
.form-msg { animation: form-msg-in .35s var(--ease) both; }
@keyframes form-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* —— 空状态图标化（∅ 工程空集语义）—— */
.product-empty { font-size: .92rem; letter-spacing: .02em; }
.product-empty::before {
  content: "\2205"; display: block; font-family: var(--font-display);
  font-size: 2.2rem; color: var(--line-strong); margin-bottom: 10px;
}

/* —— 回到顶部：按压反馈 —— */
.to-top.show:active { transform: scale(.92); }

/* =========================================================
   v2.3 · 细节打磨：无图占位「样本块」+ 版式精修
   ========================================================= */

/* —— 无图占位：工程测控样本块 ——
   纯色块 + 大号字标(monogram) + 细线图标柔光 + 测量刻度纹理，
   让缺图的产品 / 案例卡看起来是「有意设计」，而非破损模板。 */
.thumb--ph { position: relative; }
.thumb--ph::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(130% 120% at 82% -10%, rgba(255,255,255,.18), transparent 58%),
    linear-gradient(140deg, rgba(0,0,0,.14), transparent 52%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px);
}
.thumb__mono {
  position: absolute; right: 16px; bottom: 8px; z-index: 1; pointer-events: none;
  font-family: var(--font-display); font-weight: 700; font-size: 3.6rem; line-height: 1;
  color: rgba(255,255,255,.18); user-select: none;
}
.pcard__thumb.thumb--ph svg,
.prod__thumb.thumb--ph svg,
.pdetail__visual.thumb--ph svg {
  width: 64px; height: 64px; opacity: .95; position: relative; z-index: 1;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.28));
}
/* 案例封面 / 详情案例封面 / 相关推荐图标卡：大号字标微调 */
.case__cover.thumb--ph .thumb__mono,
.detail__cover.thumb--ph .thumb__mono,
.drel__media--icon.thumb--ph .thumb__mono { font-size: 3rem; right: 12px; bottom: 6px; }
.drel__media--icon.thumb--ph svg { width: 44px; height: 44px; }

/* =========================================================
   v2.4 · 前台细节打磨（时间线 / 404 / 岗位）
   采用末尾覆盖写法，避免改动既有规则
   ========================================================= */

/* —— 关于页 · 发展历程 → 工程测量尺 —— */
.timeline { position: relative; max-width: 760px; margin: 10px auto 0; }
.timeline::before {
  content: ""; position: absolute; left: 23px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(180deg, var(--warm-deep), var(--cool-deep));
  border-radius: 2px;
}
/* 刻度：沿尺身排布的短横线 */
.timeline::after {
  content: ""; position: absolute; left: 15px; top: 10px; bottom: 10px; width: 10px;
  background: repeating-linear-gradient(to bottom, var(--ink) 0 2px, transparent 2px 16px);
  opacity: .26;
}
.tl { position: relative; padding: 0 0 32px 62px; }
.tl:last-child { padding-bottom: 0; }
.tl::before {
  content: ""; position: absolute; left: 15px; top: 1px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; border: 3px solid var(--warm);
  box-shadow: 0 0 0 5px var(--warm-soft); z-index: 1;
}
/* 从节点引出的「测量段」连线 */
.tl::after {
  content: ""; position: absolute; left: 33px; top: 9px; width: 29px; height: 2px;
  background: var(--line-strong);
}
.tl__year {
  display: inline-block; font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  color: var(--warm-deep); letter-spacing: .1em; margin-bottom: 8px;
}
.tl .h3 { margin-bottom: 8px; }
.tl p { color: var(--ink-2); font-size: .94rem; line-height: 1.7; }

/* —— 404 页 · 品牌化 —— */
.nf__code {
  font-size: clamp(5.5rem, 24vw, 10rem);
  background: linear-gradient(120deg, var(--warm-deep), var(--cool-deep));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* 尺规装饰：一条带刻度的基线，隐喻「页面偏离了刻度」 */
.nf__deco { width: 150px; height: 14px; margin: 2px auto 20px; position: relative; }
.nf__deco::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--line-strong);
}
.nf__deco::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  background: repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 15px);
  opacity: .35;
}
.nf__actions .btn { min-width: 132px; justify-content: center; }

/* —— 加入我们 · 岗位可展开详情 —— */
.pos__row { flex-wrap: wrap; }
.pos__detail { flex: 1 1 100%; max-width: 760px; margin-top: 2px; }

/* =========================================================
   v2.5 · 站内搜索（P0-2）：header 入口 + 搜索页
   ========================================================= */
.header__search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  color: var(--ink-2, #4a463f); border: 1px solid var(--line-strong, #e6e0d3);
  background: var(--paper, #faf8f3); transition: .25s ease;
}
.header__search:hover { color: var(--warm-deep, #993c1d); border-color: var(--warm, #b4531f); background: #fff; }
.header__search svg { width: 18px; height: 18px; }

/* v2.7 · 多语言切换（P2-3 骨架）：中 / EN 胶囊，置于搜索按钮之前 */
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 11px;
  border: 1px solid var(--line-strong, #e6e0d3); background: var(--paper, #faf8f3);
}
.lang-switch__btn {
  min-width: 30px; height: 30px; padding: 0 8px;
  border: 0; border-radius: 8px; cursor: pointer;
  font: 600 13px/1 "Noto Sans SC", system-ui, sans-serif;
  color: var(--ink-2, #4a463f); background: transparent; transition: .2s ease;
}
.lang-switch__btn:hover { color: var(--warm-deep, #993c1d); }
.lang-switch__btn.active { color: #fff; background: var(--warm-deep, #993c1d); }
.mobile-nav .lang-switch { align-self: center; margin: 14px 0 4px; }

.searchbar {
  display: flex; align-items: center; gap: 10px;
  max-width: 680px; margin: 20px 0 8px; padding: 6px 6px 6px 16px;
  border: 1px solid var(--line-strong, #e6e0d3); border-radius: 14px; background: #fff;
  box-shadow: 0 8px 30px -22px rgba(28,26,23,.5);
}
.searchbar svg { width: 20px; height: 20px; color: var(--ink-3, #8a857a); flex: none; }
.searchbar input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-size: 15px; padding: 11px 4px; color: var(--ink, #1c1a17);
}
.searchbar input::placeholder { color: var(--ink-3, #8a857a); }
.search__meta { font-size: 13px; color: var(--ink-3, #8a857a); min-height: 20px; margin: 8px 0 18px; }
.search__filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.search__results { display: grid; gap: 14px; }
.sres {
  display: block; padding: 18px 20px; border: 1px solid var(--line-strong, #e6e0d3);
  border-radius: 14px; background: #fff; text-decoration: none; color: inherit; transition: .25s ease;
}
.sres:hover { border-color: var(--warm, #b4531f); transform: translateY(-2px); box-shadow: 0 10px 30px -20px rgba(184,83,31,.6); }
.sres__tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; margin-right: 8px; }
.sres__tag--product { background: rgba(184,83,31,.12); color: var(--warm-deep, #993c1d); }
.sres__tag--case { background: rgba(15,111,143,.12); color: var(--cool-deep, #0f6f8f); }
.sres__tag--news { background: rgba(59,109,17,.14); color: #3b6d11; }
.sres__title { font-size: 17px; font-weight: 600; }
.sres__cat { font-size: 13px; color: var(--ink-3, #8a857a); margin-left: 10px; }
.sres__text { margin: 8px 0 0; color: var(--ink-2, #4a463f); font-size: 14px; line-height: 1.6; }
.sres__more { display: inline-block; margin-top: 10px; color: var(--warm-deep, #993c1d); font-size: 13px; font-weight: 600; }
.search__empty { text-align: center; padding: 40px 0; color: var(--ink-3, #8a857a); }
.search__empty .btn { margin-top: 14px; }

/* =========================================================
   v2.6 · 产品对比工具（P2-2）
   ========================================================= */
.pcard__compare { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--ink-2, #4a463f); cursor: pointer; user-select: none; }
.pcard__compare input { width: 15px; height: 15px; accent-color: var(--warm-deep, #993c1d); }
.pcard__compare input:disabled { opacity: .4; cursor: not-allowed; }

.compare-bar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: #fff; border: 1px solid var(--line-strong, #e6e0d3); border-radius: 999px;
  box-shadow: 0 14px 40px -20px rgba(28,26,23,.5); z-index: 60;
}
.compare-bar[hidden] { display: none; }
.compare-bar__count { font-size: 13px; color: var(--ink-2, #4a463f); }

.compare-drawer { position: fixed; inset: 0; background: rgba(28,26,23,.5); z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.compare-drawer[hidden] { display: none; }
.compare-drawer__panel {
  width: min(960px, 96vw); max-height: 82vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 16px 16px 0 0; overflow: hidden; animation: drawerUp .28s ease;
}
@keyframes drawerUp { from { transform: translateY(24px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.compare-drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line-strong, #e6e0d3); }
.compare-drawer__head h3 { font-size: 16px; font-weight: 600; }
.compare-drawer__close { border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--ink-3, #8a857a); cursor: pointer; }
.compare-drawer__body { padding: 16px 20px; overflow: auto; }
.compare__loading { color: var(--ink-3, #8a857a); }

.ctable { width: 100%; border-collapse: collapse; font-size: 14px; }
.ctable th, .ctable td { border: 1px solid var(--line-strong, #e6e0d3); padding: 8px 12px; text-align: left; vertical-align: top; }
.ctable thead th { background: var(--paper, #faf8f3); }
.ctable tbody th { background: var(--paper, #faf8f3); font-weight: 600; white-space: nowrap; }

/* =========================================================
   v3.1 · 移动端 / 交互精修
   ① 锚点滚动补偿固定头部高度  ② 窄屏头部工具区不挤压、点击区达标
   ③ 对比工具移动端适配（抽屉全宽 + 表格横滚 + iOS 安全区）
   ========================================================= */
/* ① 锚点定位：页内 #hash 跳转不再被固定头部遮挡 */
html { scroll-padding-top: calc(var(--header-h, 72px) + 12px); }
[id] { scroll-margin-top: calc(var(--header-h, 72px) + 12px); }

/* ② 头部工具（搜索 / 语言切换）触控优化 */
@media (max-width: 680px) {
  .header .container { gap: 8px; }
  .logo { gap: 8px; min-width: 0; }
  .logo__sub { display: none; }            /* 极窄屏隐藏英文副标，防止换行挤压 */
  .logo__name { font-size: 1rem; white-space: nowrap; }
  .header__search { width: 42px; height: 42px; flex: none; } /* ≥42px 触控区 */
  .lang-switch { flex: none; }
  .lang-switch__btn { min-width: 34px; height: 34px; }        /* 更大点击区 */
  .nav-toggle { flex: none; }
  /* 搜索页搜索框窄屏内边距收敛 */
  .searchbar { margin: 14px 0 6px; padding: 4px 4px 4px 12px; border-radius: 12px; }
  .searchbar input { font-size: 16px; }     /* ≥16px 防 iOS 聚焦自动放大 */
}
@media (max-width: 380px) {
  .lang-switch { display: none; }           /* 超窄屏语言切换只保留移动菜单内的入口 */
}

/* ③ 对比工具移动端 */
@media (max-width: 680px) {
  .compare-bar {
    left: 12px; right: 12px; transform: none; width: auto;
    justify-content: space-between; flex-wrap: wrap; gap: 8px;
    padding: 10px 14px; border-radius: 16px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .compare-bar .btn { padding: 9px 14px; font-size: 13px; }
  .compare-drawer__panel { width: 100vw; max-height: 92dvh; border-radius: 16px 16px 0 0; }
  .compare-drawer__body {
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
  }
  /* 对比表：横向滚动而非挤压换行 */
  .compare-drawer__body { overflow-x: auto; }
  .ctable { min-width: 560px; }
  .ctable th, .ctable td { padding: 8px 10px; font-size: 13px; }
}

/* 触屏设备：卡片 hover 位移动画无意义，改为按压反馈 */
@media (hover: none) {
  .sres:hover, .pcard:hover { transform: none; }
  .sres:active, .pcard:active { transform: scale(.985); }
}

/* =========================================================
   v2.8 · 前台视觉精致化（继续美化）
   纯增量覆盖 · 沿用暖纸基 / 双色信号 / 工程仪表语义
   ========================================================= */

/* —— 1. Hero 双色柔光晕：提升首屏质感（纯装饰，不挤内容）—— */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(46% 44% at 86% 6%, oklch(44% 0.105 253 / .18), transparent 70%),
    radial-gradient(42% 42% at 4% 98%, oklch(47% 0.072 232 / .14), transparent 70%);
}
.hero__inner { z-index: 1; }

/* —— 2. 卡片图标：渐变底 + 玻璃高光，更精致 —— */
.card__icon {
  background: linear-gradient(135deg, var(--warm-soft), var(--cool-soft));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 16px oklch(44% 0.105 253 / .14);
  position: relative; overflow: hidden;
}
.card__icon::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.55), transparent 55%);
  opacity: .8; pointer-events: none;
}

/* —— 3. 产品占位：品牌色渐变（取代死板纯色块）—— */
.prod__thumb--1 { background: linear-gradient(150deg, oklch(27% 0.020 258), var(--ink)); }
.prod__thumb--2 { background: linear-gradient(150deg, var(--warm), var(--warm-deep)); }
.prod__thumb--3 { background: linear-gradient(150deg, var(--cool), var(--cool-deep)); }

/* —— 4. 产品中心占位渐变 —— */
.pcard__thumb--1 { background: linear-gradient(150deg, oklch(27% 0.020 258), var(--ink)); }
.pcard__thumb--2 { background: linear-gradient(150deg, var(--warm), var(--warm-deep)); }
.pcard__thumb--3 { background: linear-gradient(150deg, var(--cool), var(--cool-deep)); }
.pcard__thumb--4 { background: linear-gradient(150deg, var(--cool-deep), oklch(30% 0.05 232)); }
.pcard__thumb--5 { background: linear-gradient(150deg, var(--warm-deep), oklch(36% 0.11 46)); }
.pcard__thumb--6 { background: linear-gradient(150deg, oklch(27% 0.020 258), var(--ink)); }

/* —— 5. 首页产品卡：hover 浮出「查看 →」徽标（纯 CSS，不改 HTML）—— */
.prod { position: relative; }
.prod::after {
  content: "查看 →";
  position: absolute; right: 18px; bottom: 18px; z-index: 2;
  font-size: .78rem; font-weight: 600; color: #fff;
  background: rgba(28,26,23,.72); padding: 6px 13px; border-radius: 999px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events: none;
}
.prod:hover::after { opacity: 1; transform: translateY(0); }

/* —— 6. 并列式区块标题（产品概览 / 新闻动态）：左侧强调竖条 —— */
.section-head--row { position: relative; }
.section-head--row::before {
  content: ""; position: absolute; left: -16px; top: 4px; bottom: 18px; width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--warm), var(--cool));
}

/* =========================================================
   v2.9 · 前台视觉精致化（继续）
   纯增量覆盖 · 导航 / 按钮 / 深色区块 / 卡片 hover / 页脚
   ========================================================= */

/* —— 1. 深色区块顶部：干净硬切 + 极细品牌线（替代之前难看的灰褐渐变过渡带）—— */
.section--dark {
  background: var(--char);
  position: relative;
}
.section--dark::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 8%, var(--warm) 50%, transparent 92%);
  opacity: .45;
}

/* —— 2. 主按钮扫光微交互：hover 时一道高光自左向右扫过 —— */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 36%, oklch(100% 0 0 / .38) 50%, transparent 64%);
  transform: translateX(-120%);
  transition: transform .62s var(--ease);
  pointer-events: none;
}
.btn--primary:hover::after { transform: translateX(120%); }

/* —— 3. 卡片 hover 渐变描边：统一悬浮反馈（品牌主色描边 + 抬升阴影）—— */
.pcard:hover, .sres:hover, .prod:hover {
  box-shadow: 0 0 0 1.5px var(--warm), var(--sh-2);
}

/* —— 4. 导航吸顶：滚动后顶部浮现暖→冷双色细线，呼应品牌信号 —— */
.header.scrolled::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--warm), var(--cool));
}

/* —— 5. 页脚顶部线改为双色品牌线（淡出两端），柔和收尾 —— */
.footer::before {
  background: linear-gradient(90deg, transparent, var(--warm) 22%, var(--cool) 78%, transparent);
}

/* =========================================================
   v2.10 · 前台视觉精致化（继续 · 全局细节与内页）
   纯增量覆盖 · 滚动条 / 选区 / 内容链接 / 正文图片 / 表单聚焦
   ========================================================= */

/* —— 1. 自定义滚动条：webkit 细窄品牌色 + firefox 同步 —— */
* { scrollbar-width: thin; scrollbar-color: var(--warm-soft) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--warm), var(--cool));
  border-radius: 999px; border: 2px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--warm-deep), var(--cool-deep)); }

/* —— 2. 文本选区高亮：品牌暖色 —— */
::selection { background: var(--warm); color: #fff; }
::-moz-selection { background: var(--warm); color: #fff; }

/* —— 3. 正文链接 hover 微交互：下划线收近 + 暖色高亮 pill —— */
.detail__rich a, .prose a {
  border-radius: 4px; padding: 0 2px; margin: 0 -2px;
  transition: background .2s var(--ease), text-underline-offset .2s var(--ease), color .2s var(--ease);
}
.detail__rich a:hover, .prose a:hover {
  background: var(--warm-soft); color: var(--warm-deep); text-underline-offset: 2px;
}
.detail__rich a:focus-visible, .prose a:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; }

/* —— 4. 正文 / 详情图片柔和画框（阴影 + 细边框）—— */
.detail__rich img, .prose img { box-shadow: var(--sh-1); border: 1px solid var(--line); }

/* —— 5. 搜索栏聚焦：双色发光（与表单呼应）—— */
.searchbar input:focus {
  outline: none; border-color: var(--warm);
  box-shadow: 0 0 0 3px var(--warm-soft), 0 0 0 6px oklch(47% 0.072 232 / .10);
}

/* —— 6. 表单聚焦增强：在单色光环上叠加暖色外发光 —— */
.cform input:focus, .cform select:focus, .cform textarea:focus {
  box-shadow: 0 0 0 3px var(--warm-soft), 0 0 14px oklch(44% 0.105 253 / .22);
}

/* =========================================================
   v2.11 · 前台视觉精致化（收尾 · 子页与全局）
   纯增量覆盖 · 子页 Hero / 筛选 / 面包屑 / 锚点 / 窄屏筛选
   统一惠及所有子页（products / cases / news / about 等）
   ========================================================= */

/* —— 1. 子页 Hero 双色柔光：呼应首页 Hero，提升子页首屏质感 —— */
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(46% 52% at 88% 4%, oklch(64% 0.16 48 / .32), transparent 70%),
    radial-gradient(50% 56% at 2% 100%, oklch(58% 0.09 232 / .26), transparent 72%);
}
.page-hero .container { z-index: 2; }

/* —— 2. 筛选按钮选中态：品牌暖色（替代纯墨黑），更呼应信号 —— */
.filter.active { background: var(--warm); border-color: var(--warm); color: #fff; }
.filter.active:hover { background: var(--warm-deep); border-color: var(--warm-deep); color: #fff; }

/* —— 3. 面包屑：分隔符暖色 + 链接 hover 下划线 —— */
.crumb span { color: var(--warm); }
.crumb a { text-decoration: none; transition: color .2s var(--ease); }
.crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* —— 4. 全局锚点滚动偏移：固定导航不遮挡跳转目标 —— */
html { scroll-padding-top: calc(var(--header-h) + 16px); }

/* —— 5. 筛选栏窄屏：横向滚动，更现代、不换行拥挤 —— */
@media (max-width: 640px) {
  .filters { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 6px; scrollbar-width: none; -ms-overflow-style: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: none; }
}

/* =========================================================
   v2.12 · 功能 / 体验层（下一阶段）
   回到顶部环形进度 · 页面切换过渡幕布 · 懒加载收尾（懒加载在 JS 侧完成）
   纯增量覆盖 · 沿用暖纸基 / 双色信号 / 工程仪表语义
   ========================================================= */

/* —— 1. 回到顶部：环形滚动进度（JS 注入 SVG 环叠加在箭头之上，不改动 HTML）—— */
.to-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.to-top__track { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.to-top__bar { fill: none; stroke: var(--warm); stroke-width: 2.5; stroke-linecap: round; transition: stroke-dashoffset .12s linear; }
.to-top:hover .to-top__track { stroke: rgba(255,255,255,.28); }
.to-top:hover .to-top__bar { stroke: var(--paper); }

/* —— 2. 页面切换过渡幕布：点击站内链覆盖 → 新页由 #loader 揭幕入场 —— */
.page-swap {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background: linear-gradient(135deg, var(--char) 0%, #14110d 100%);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .32s var(--ease), visibility .32s var(--ease);
}
.page-swap.show { opacity: 1; visibility: visible; pointer-events: all; }
.page-swap__mark {
  font-family: var(--font-display); font-weight: 700; font-size: 32px; color: var(--paper);
  width: 64px; height: 64px; border-radius: 16px; background: rgba(255,255,255,.06);
  display: grid; place-items: center;
  animation: loader-pop 1s var(--ease) infinite alternate;
}