/* ==========================================================================
   梦非凡想翻译公司 — 站点样式
   单一文件、无外部依赖、移动优先
   ========================================================================== */

:root {
  --ink: #17211f;
  --ink-2: #3d4b48;
  --ink-3: #6b7a77;
  --line: #dfe5e3;
  --line-2: #eef2f1;
  --bg: #ffffff;
  --bg-2: #f6f8f7;
  --bg-3: #eef4f2;
  --brand: #0f6b5c;
  --brand-d: #0a5045;
  --brand-l: #e6f2ef;
  --accent: #b4531a;
  --accent-l: #fdf1e8;

  /* ---------- 深海军蓝体系 ----------
     参考 www.tsfanyi.com 的用色：整块深底承载首屏与横幅，
     正文区保持浅色。深底上的信息用等宽字体 + 细描边做"技术感"，
     而不是靠亮色堆砌。色阶取自参考站同名变量。 */
  --navy-900: #0e1a2b;
  --navy-800: #17263b;
  --navy-700: #2a3b53;
  --navy-300: #afb9c7;
  --navy-50: #eef2f7;
  /* 深底上的品牌强调色：比浅底用的 --brand 亮，深底上才看得清 */
  --brand-on-dark: #35c8a9;
  --brand-on-dark-l: #7fe0cb;
  /* 深底文字层级 */
  --on-dark: #ffffff;
  --on-dark-2: rgba(255, 255, 255, .78);
  --on-dark-3: rgba(255, 255, 255, .58);
  --line-on-dark: rgba(255, 255, 255, .12);

  /* 圆角：参考站用 2px 的锐利直角，本站从 10px 收到 6px，
     保留一点柔和度但明显更"工程/技术"。 */
  --radius: 6px;
  --radius-lg: 10px;
  --shadow: 0 1px 2px rgba(23, 33, 31, .05), 0 6px 20px -8px rgba(23, 33, 31, .10);
  --shadow-h: 0 2px 4px rgba(23, 33, 31, .06), 0 14px 34px -12px rgba(23, 33, 31, .18);
  --wrap: 1200px;
  /* 字体栈分两层，开源 / 免费商用字体排在前面，商业授权的厂商字体排在后面。
     前段（可自由使用）：
       Source Han Sans（思源黑体，SIL OFL）、Noto Sans CJK（SIL OFL）、
       HarmonyOS Sans（华为免费商用）、MiSans（小米免费商用）
     后段（仅作本机兜底）：
       PingFang SC（苹果）、Hiragino Sans GB（字游工房）、Microsoft YaHei（方正设计）
       ——这三个是商业授权字体。CSS 里只写字体名、不分发字体文件，
        本身不构成字体侵权，但只要本机装了就会命中，所以尽量排在后面，
        让装了开源字体的机器优先用开源字体。
     ⚠ 只在 CSS 里写名字无法真正"避开"商业字体：Windows 默认中文字体就是
       微软雅黑，删掉它只会掉到宋体，屏幕显示反而更差。要做到全平台一致且
       完全不依赖商业字体，只能自托管开源 webfont（Noto Sans SC，SIL OFL），
       代价是数百 KB 字体文件，需要配合中文子集化。 */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Source Han Sans SC", "Source Han Sans CN", "Noto Sans CJK SC", "Noto Sans SC",
    "HarmonyOS Sans SC", "MiSans",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  /* 等宽栈同样把开源字体（JetBrains Mono / Source Code Pro / Fira Code 均为 OFL）
     放在 Consolas（微软商业字体）之前。 */
  --mono: ui-monospace, SFMono-Regular, "SF Mono",
    "JetBrains Mono", "Source Code Pro", "Fira Code", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-d); text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.35; color: var(--ink); margin: 0 0 .6em; font-weight: 700; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); }
h3 { font-size: 1.08rem; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; }
code { font-family: var(--mono); font-size: .9em; background: var(--bg-2); padding: .1em .35em; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 999; background: #fff; padding: 8px 14px; border-radius: 6px; box-shadow: var(--shadow); }

/* ---------- 公告条 ---------- */
/* 公告条改深海军蓝：与首屏连成一块，视觉上不像"贴在白色页头下面的一条彩带" */
.notice { background: var(--navy-900); color: var(--on-dark-2); font-size: .93rem; border-bottom: 1px solid var(--line-on-dark); }
.notice-inner { display: flex; align-items: center; gap: 12px; padding: 9px 20px; flex-wrap: wrap; }
.notice-tag { background: rgba(53, 200, 169, .16); color: var(--brand-on-dark); border-radius: 3px; padding: 1px 8px; font-size: .8rem; letter-spacing: .04em; }
.notice a { color: #fff; text-decoration: none; }
.notice a:hover { text-decoration: underline; }
.notice-date { margin-left: auto; opacity: .6; font-size: .85rem; font-family: var(--mono); }

/* ---------- 页头 ---------- */
.site-head { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.head-inner { display: flex; align-items: center; gap: 20px; min-height: 70px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 38px; height: 38px; border-radius: 8px; background: var(--navy-900); color: #fff; display: grid; place-items: center; font-size: 1.2rem; font-weight: 700; flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text strong { font-size: 1.06rem; color: var(--ink); letter-spacing: .01em; }
.brand-text em { font-style: normal; font-size: .74rem; color: var(--ink-3); letter-spacing: .02em; }

.nav-toggle { display: none; margin-left: auto; width: 40px; height: 40px; border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; padding: 10px 9px; }
.nav-toggle span { display: block; height: 2px; background: var(--ink-2); border-radius: 2px; margin-bottom: 4px; }
.nav-toggle span:last-child { margin-bottom: 0; }

.site-nav { margin-left: auto; }
.site-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.site-nav > ul > li { position: relative; }
.site-nav > ul > li > a { display: flex; align-items: center; gap: 3px; padding: 9px 11px; border-radius: 8px; color: var(--ink-2); font-size: .94rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.site-nav > ul > li > a:hover { background: var(--bg-2); color: var(--brand-d); text-decoration: none; }
.site-nav > ul > li > a[aria-current="page"] { color: var(--brand); background: var(--brand-l); }
.caret { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; opacity: .6; }

.site-nav .sub {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-h); padding: 8px;
  display: grid; grid-template-columns: 1fr; gap: 1px; z-index: 70;
  /* 收起走渐变：display 不能做过渡，所以用 opacity + visibility。
     visibility 延迟到淡出结束（.18s）才切 hidden，否则元素会在动画中途
     "啪"地消失，渐变根本看不见。
     pointer-events: none 是必需的——隐藏态虽然透明但仍占位，
     不关掉命中会挡住下方内容的点击。 */
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-5px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.site-nav .sub-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 400px; }
.site-nav li:hover > .sub,
.site-nav li:focus-within > .sub,
.site-nav li.is-open > .sub {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
  /* 展开时 visibility 立刻生效，不能等 */
  transition: opacity .16s ease, transform .16s ease, visibility 0s;
}

/* 下拉消失过快的成因有两个，这里一并处理：
   ① 触发器与下拉之间有 6px 间隙（top: calc(100% + 6px)），鼠标斜向移动时会穿过
      这块"谁都不属于"的死区，li 立刻 mouseleave，菜单瞬间收起。
      用一条透明伪元素把间隙补成下拉自身的可命中区域，指针就不会掉出去。
   ② 真的移出去时（比如手抖、绕路），由 JS 加 .is-open 维持展开，
      约 320ms 后再收起，给人一个"回来还来得及"的宽限期。
   两条都是纯展示层改动，键盘 :focus-within 与移动端菜单的行为不受影响。 */
.site-nav .sub::before {
  content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.site-nav li.is-open > .sub { display: grid; }
.site-nav .sub a { display: block; padding: 6px 10px; border-radius: 7px; font-size: .9rem; color: var(--ink-2); text-decoration: none; }
.site-nav .sub a:hover { background: var(--bg-3); color: var(--brand-d); text-decoration: none; }

.head-cta { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.head-tel { font-size: .78rem; color: var(--ink-3); line-height: 1.2; text-align: right; }
.head-tel b { display: block; font-size: .95rem; color: var(--ink); letter-spacing: .01em; }

/* ---------- 按钮 ---------- */
/* 圆角从 9px 收到 var(--radius)：参考站用 2px 直角，锐利感是它的设计语言之一。
   保留轻微圆角，避免完全直角在触屏上显得生硬。 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 20px; border-radius: var(--radius); background: var(--brand); color: #fff; font-size: .94rem; font-weight: 600; border: 1px solid var(--brand); cursor: pointer; text-decoration: none; transition: .18s; }
.btn:hover { background: var(--brand-d); border-color: var(--brand-d); color: #fff; text-decoration: none; transform: translateY(-1px); }
.btn-sm { padding: 7px 14px; font-size: .87rem; border-radius: var(--radius); }
.btn-lg { padding: 13px 26px; font-size: 1rem; }
.btn-outline { background: #fff; color: var(--brand); border-color: var(--line); }
.btn-outline:hover { background: var(--brand-l); color: var(--brand-d); border-color: var(--brand-l); }
.btn-light { background: #fff; color: var(--brand-d); border-color: #fff; }
.btn-light:hover { background: #f0f7f5; color: var(--brand-d); border-color: #f0f7f5; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }
.btn-block { display: flex; width: 100%; }

/* ---------- 首屏 ---------- */
/* 深海军蓝底首屏：参考 tsfanyi.com 的做法 —— 整块深底先建立"技术/专业"基调，
   下方内容区回到浅色。深底上用等宽字体 + 细描边表达技术感。 */
.hero {
  position: relative;
  /* 右上角光晕是绝对定位且超出容器，不裁掉会在窄屏撑出横向滚动条 */
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 52%, var(--navy-700) 100%);
  border-bottom: 1px solid var(--navy-700);
  color: var(--on-dark);
}
/* 顶部一层极淡的网格纹理，避免大面积深色显得单薄 */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 78% 66% at 32% 38%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 78% 66% at 32% 38%, #000 30%, transparent 78%);
}
/* 右上角一层品牌色柔光，让深底不发闷 */
.hero::after {
  content: ""; position: absolute; top: -22%; right: -6%; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(53, 200, 169, .18) 0%, transparent 66%);
  pointer-events: none;
}
/* hero 通用：左右分栏（首页与图纸专题各自覆盖为"文案 + 全幅图"） */
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 46px; align-items: center; padding: 58px 20px 52px; }
.hero-copy { max-width: 620px; }
.eyebrow { font-size: .82rem; letter-spacing: .1em; color: var(--brand); font-weight: 700; text-transform: uppercase; margin-bottom: 12px; }
/* 深底上的 eyebrow 用亮青绿 + 等宽字体，做出"技术标签"的味道 */
.hero .eyebrow, .page-banner .eyebrow { color: var(--brand-on-dark); font-family: var(--mono); letter-spacing: .14em; }
.hero h1 { margin-bottom: 18px; font-size: 2.86rem; line-height: 1.2; letter-spacing: -.018em; color: var(--on-dark); }
.hero .lead { font-size: 1.08rem; color: var(--on-dark-2); margin-bottom: 24px; }
.hero-points { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.hero-points li { position: relative; padding-left: 26px; font-size: .95rem; color: var(--on-dark-2); text-align: left; }
.hero-points li::before { content: ""; position: absolute; left: 0; top: .52em; width: 14px; height: 8px; border-left: 2px solid var(--brand-on-dark); border-bottom: 2px solid var(--brand-on-dark); transform: rotate(-45deg) scale(.82); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-note { margin-top: 18px; font-size: .88rem; color: var(--on-dark-3); }

/* 首页 hero：文案居中 + 全幅展示图。图占满栅格宽度，图内细节才看得清，"大气"来自尺度而不是装饰 */
.hero-home .hero-inner { display: block; text-align: center; padding: 74px 20px 0; }
.hero-home .hero-copy { max-width: 820px; margin: 0 auto; }
.hero-home .lead { max-width: 700px; margin-inline: auto; margin-bottom: 24px; }
.hero-home .hero-points { justify-content: center; }
.hero-home .hero-actions { justify-content: center; }
/* 图纸专题 hero：同样把展示图放到全幅，避免 24 类图纸缩成看不清的小图 */
.hero-cad .hero-inner { display: block; padding: 52px 20px 46px; }
.hero-cad .hero-copy { max-width: 820px; }
.hero-cad .hero-figure { margin-top: 32px; }
/* 深色 hero 里的图注要用浅色，否则几乎看不见 */
.hero-cad .hero-figure figcaption { color: var(--on-dark-3); }

/* 全幅展示图 */
.hero-showcase { position: relative; z-index: 1; padding: 38px 20px 48px; }
.hero-figure { margin: 0; }
.hero-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(23,33,31,.06), 0 26px 60px -20px rgba(23,33,31,.26); background: #fff; }
/* 深底首屏里的展示图：去掉白色描边，改用深色投影，避免形成一圈突兀白线 */
.hero .hero-figure img { border-color: var(--line-on-dark); box-shadow: 0 2px 6px rgba(0,0,0,.2), 0 28px 64px -22px rgba(0,0,0,.62); }
.hero-figure figcaption { font-size: .85rem; color: var(--ink-3); margin-top: 12px; text-align: center; }

/* 首页 hero 下方的数据条：把"规模"用可核对的数字表达，避免空泛形容 */
.stat-bar {
  position: relative; z-index: 1;
  border-top: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(6px);
}
/* 深底首屏内的数据条：跟随深色，用半透明白线和浅字 */
.hero .stat-bar {
  border-top: 1px solid var(--line-on-dark);
  background: rgba(255, 255, 255, .045);
  backdrop-filter: none;
}
.hero .stat-bar li { border-right: 1px solid var(--line-on-dark); }
.hero .stat-bar li:first-child { border-left: 1px solid var(--line-on-dark); }
.hero .stat-bar strong { color: var(--on-dark); }
.hero .stat-bar span { color: var(--on-dark-3); }
.stat-bar ul {
  max-width: var(--wrap); margin: 0 auto; padding: 0 20px;
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stat-bar li { padding: 20px 18px; border-right: 1px solid var(--line-2); }
.stat-bar li:first-child { border-left: 1px solid var(--line-2); }
.stat-bar strong { display: block; font-size: 1.5rem; line-height: 1.2; color: var(--brand-d); letter-spacing: -.01em; }
.stat-bar span { display: block; font-size: .82rem; color: var(--ink-3); margin-top: 4px; }

/* 标准体系区：徽标条 + 四条要点。用"标准代号"这种可核对的硬信息建立专业感 */
.section-std { padding-top: 52px; }
.section-std .section-head { max-width: 860px; }
.std-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; background: #fff; }
.std-points li { padding: 20px 20px 22px; border-right: 1px solid var(--line-2); }
.std-points li:last-child { border-right: 0; }
.std-points strong { display: block; font-size: .96rem; color: var(--brand-d); margin-bottom: 8px; line-height: 1.4; }
.std-points span { display: block; font-size: .87rem; color: var(--ink-2); line-height: 1.66; }

.hero-sm { background: linear-gradient(180deg, var(--bg-2) 0%, #fff 100%); }
.hero-sm .wrap { padding: 44px 20px 34px; }
.hero-sm .lead { max-width: 760px; font-size: 1.02rem; color: var(--ink-2); }
.hero-cad { background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 54%, var(--navy-700) 100%); border-bottom: none; }
.hero-cad h1, .hero-cad .lead, .hero-cad .eyebrow, .hero-cad .hero-points li, .hero-cad .hero-note { color: #fff; }
.hero-cad .hero-points li::before { border-color: var(--brand-on-dark-l); }
.hero-cad .eyebrow { color: var(--brand-on-dark); }
.hero-cad .lead { color: var(--on-dark-2); }
.hero-cad .hero-points li { color: var(--on-dark-2); }
.hero-cad .btn { background: #fff; color: var(--navy-900); border-color: #fff; }
.hero-cad .btn:hover { background: #eaf6f3; color: var(--navy-900); }
.hero-cad .btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.hero-cad .btn-outline:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.hero-cad-sm { background: linear-gradient(180deg, var(--bg-3) 0%, #fff 100%); }
.hero-cad-sm .hero-actions { margin-top: 22px; }

/* 深底首屏内的按钮：主按钮走品牌亮色，次按钮走白描边。
   不能沿用浅底那套（深绿底 + 白字），在深海军蓝上几乎融进背景。 */
.hero .btn { background: var(--brand-on-dark); color: #06302a; border-color: var(--brand-on-dark); font-weight: 700; }
.hero .btn:hover { background: var(--brand-on-dark-l); border-color: var(--brand-on-dark-l); color: #06302a; }
.hero .btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .34); }
.hero .btn-outline:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .6); }
.hero .hero-note a { color: var(--brand-on-dark-l); }

/* ---------- 子页横幅 ----------
   菜单下方统一的一块品牌色横幅，解决"子页顶部一片空白、没有视觉起点"的问题。
   底纹全部由 CSS 画（渐变 + 蓝图网格 data URI，零请求、任意分辨率都不糊），
   真正需要位图的只有右侧那张透明底细线插画，窄屏直接隐藏。
   高度与字号全部用 clamp / vw，从 320px 到 2560px 都不用改。 */
.page-banner {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(128% 170% at 84% 4%, rgba(53, 200, 169, .26) 0%, rgba(14, 26, 43, 0) 62%),
    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 58%, var(--navy-700) 100%);
}
.pb-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 .5H40M.5 0V40' fill='none' stroke='%23ffffff' stroke-opacity='.09'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}
.page-banner::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: rgba(255, 255, 255, .16);
}
/* 照片横幅：整幅铺满 + 左侧压深色保证文字对比度。
   用真实照片替代线稿插画时最大的坑就是文字压在照片上读不清——
   所以叠一条从左侧不透明渐变到右侧半透明的遮罩，而不是简单铺一层半透明黑
   （那样会整幅发灰，照片等于白放）。 */
.page-banner.has-photo { background: var(--navy-900); }
.pb-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  z-index: 0; pointer-events: none;
}
.page-banner.has-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(90deg, var(--navy-900) 0%, rgba(11, 22, 38, .93) 34%,
                    rgba(11, 22, 38, .68) 62%, rgba(11, 22, 38, .42) 100%),
    linear-gradient(180deg, rgba(11, 22, 38, .3) 0%, rgba(11, 22, 38, .55) 100%);
}
/* 有照片时不必再叠线稿，两者叠在一起会互相干扰 */
.page-banner.has-photo .pb-grid { display: none; }

.pb-inner { position: relative; z-index: 1; padding-block: clamp(24px, 4vw, 44px); }
.pb-art {
  position: absolute; right: 0; top: 0; bottom: 0;
  height: 100%; width: auto; max-width: 46%;
  object-fit: contain; object-position: right center;
  opacity: .9; pointer-events: none; z-index: 0;
  -webkit-user-select: none; user-select: none;
}
.pb-copy { position: relative; z-index: 1; max-width: 660px; }
.page-banner .eyebrow { color: var(--brand-on-dark); margin-bottom: 9px; }
.page-banner h1 {
  color: #fff; margin-bottom: 11px;
  font-size: clamp(1.42rem, 3.1vw, 2.2rem);
  line-height: 1.26; letter-spacing: -.015em;
}
.page-banner .lead {
  margin: 0; max-width: 620px;
  color: var(--on-dark-2);
  font-size: clamp(.93rem, 1.35vw, 1.04rem);
  line-height: 1.7;
}
.pb-crumbs { position: relative; z-index: 1; margin-bottom: 15px; font-size: .82rem; }
.pb-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pb-crumbs li + li::before { content: "›"; margin-right: 6px; color: rgba(255, 255, 255, .45); }
.pb-crumbs a, .pb-crumbs span { color: rgba(255, 255, 255, .64); }
.pb-crumbs a:hover { color: #fff; }
.pb-crumbs li:last-child a, .pb-crumbs li:last-child span { color: rgba(255, 255, 255, .94); }
/* 横幅里的关键点：做成胶囊，一行放得下就不用撑高横幅 */
.pb-points { position: relative; z-index: 1; list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.pb-points li {
  font-size: .82rem; color: rgba(255, 255, 255, .9); line-height: 1.45;
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 20px; padding: 5px 13px 5px 11px;
}
.pb-points li::before { content: "✓"; margin-right: 6px; color: var(--brand-on-dark-l); }
.pb-actions { position: relative; z-index: 1; margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
.page-banner .btn { background: var(--brand-on-dark); color: #06302a; border-color: var(--brand-on-dark); font-weight: 700; }
.page-banner .btn:hover { background: var(--brand-on-dark-l); border-color: var(--brand-on-dark-l); color: #06302a; }
.page-banner .btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .34); }
.page-banner .btn-outline:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .6); }

/* 没有横幅的页面（如首页）仍用原来的面包屑条 */

/* ---------- 面包屑 ---------- */
.crumbs { background: var(--bg-2); border-bottom: 1px solid var(--line-2); font-size: .85rem; }
.crumbs ol { max-width: var(--wrap); margin: 0 auto; padding: 11px 20px; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "›"; color: var(--ink-3); margin-right: 6px; }
.crumbs a { color: var(--ink-3); }
.crumbs li:last-child { color: var(--ink-2); }

/* ---------- 布局 ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 306px; gap: 44px; padding-top: 46px; padding-bottom: 56px; align-items: start; }
.main-col { min-width: 0; }
.side-col { display: grid; gap: 18px; position: sticky; top: 88px; }

.section { padding: 56px 20px; }
.section-head { margin-bottom: 26px; max-width: 780px; }
.section-head h2 { margin-bottom: 6px; font-size: 1.5rem; letter-spacing: -.005em; }
.section-head p { color: var(--ink-2); font-size: .96rem; margin: 0; }
/* eyebrow 统一走等宽 + 加宽字距 —— 参考站用它做出"技术规格标签"的味道，
   比普通无衬线大写字母更有辨识度，也不依赖额外字体文件。 */
.section-head .eyebrow {
  margin-bottom: 8px;
  font-family: var(--mono);
  letter-spacing: .14em;
  font-size: .78rem;
}
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; max-width: none; flex-wrap: wrap; }
/* 居中版标题：用于客户名录这类需要仪式感的区块 */
.section-head-center { margin-inline: auto; text-align: center; max-width: 700px; }
.section-head-center .eyebrow { display: inline-block; }
.section-foot { margin-top: 22px; }
.section-note { font-size: .88rem; color: var(--ink-3); margin-bottom: 18px; }
.band { background: var(--bg-2); border-block: 1px solid var(--line-2); padding: 56px 0; }
.band .section { padding-top: 0; padding-bottom: 0; }

/* ---------- 文本块 ---------- */
.prose { max-width: 78ch; }
/* 带配图的内容页把正文栏放宽：单栏 78ch 太窄，图片会顶出栏外、右侧留大片空白 */
.doc-wide .prose { max-width: 52rem; }
.prose h2 { margin-top: 1.9em; padding-top: .2em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.6em; color: var(--ink); }
.prose h4 { margin-top: 1.4em; color: var(--ink-2); font-size: 1rem; }
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); }
.prose ul, .prose ol { margin-bottom: 1.1em; }
.prose li { margin-bottom: .35em; }
.prose blockquote { margin: 1.4em 0; padding: 12px 18px; background: var(--brand-l); border-left: 3px solid var(--brand); border-radius: 0 8px 8px 0; color: var(--ink-2); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prose code { color: var(--accent); background: var(--accent-l); }
.prose > :last-child { margin-bottom: 0; }

.prose-block { margin-bottom: 40px; }
.prose-block h2 { margin-bottom: 14px; }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--line); border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; min-width: 520px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
thead th { background: var(--bg-2); font-weight: 700; color: var(--ink); white-space: nowrap; border-bottom: 1px solid var(--line); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: none; }
td { color: var(--ink-2); }
.spec-table th { width: 34%; background: var(--bg-2); font-weight: 600; color: var(--ink); white-space: normal; min-width: 150px; }
.term-table td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
.term-table td:nth-child(2) { font-family: var(--mono); font-size: .86rem; color: var(--brand-d); }
.term-table td:nth-child(3) { color: var(--ink-2); }

/* ---------- 区块 ---------- */
.grid-section { margin: 44px 0; }
.spec-block { margin: 40px 0; }
.spec-block h2 { margin-bottom: 14px; }

.card-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 卡片左侧一条细色条，hover 时展开 —— 比纯描边更有识别度 */
.card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .22s, box-shadow .22s, transform .22s; }
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--brand) 0%, #17a189 100%);
  transform: scaleY(0); transform-origin: top;
  transition: transform .28s ease;
}
.card:hover::before { transform: scaleY(1); }
.card:hover { border-color: #c9e2da; box-shadow: 0 2px 6px rgba(23,33,31,.05), 0 16px 34px -14px rgba(15,107,92,.28); transform: translateY(-2px); }
.card-link { display: flex; flex-direction: column; height: 100%; padding: 20px; text-decoration: none; color: inherit; }
.card-link:hover { text-decoration: none; color: inherit; }
.card h3 { margin-bottom: 8px; font-size: 1.04rem; color: var(--brand-d); }
.card p { font-size: .9rem; color: var(--ink-3); margin: 0 0 14px; flex: 1; }
.card .more { font-size: .86rem; font-weight: 600; color: var(--brand); transition: transform .22s ease; }
.card:hover .more { transform: translateX(3px); }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.card-tags em { font-style: normal; font-size: .74rem; background: var(--bg-3); color: var(--brand-d); padding: 2px 8px; border-radius: 3px; font-family: var(--mono); letter-spacing: .02em; }
.card-cad { background: linear-gradient(180deg, #fff 0%, #fbfdfc 100%); }

.feature-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: feat; }
.feature-grid li {
  position: relative;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px 22px 22px;
  transition: border-color .22s, box-shadow .22s, transform .22s;
}
/* 左上角一个编号（01 / 02 / 03）：参考站的"步骤/条目编号"语言，
   比纯标题多一层秩序感，也便于口头指代"第 2 条" */
.feature-grid li::before {
  counter-increment: feat;
  content: "0" counter(feat);
  position: absolute; top: 20px; right: 20px;
  font-family: var(--mono); font-size: .82rem; font-weight: 700;
  color: var(--brand); opacity: .5; letter-spacing: .04em;
}
.feature-grid li:hover { border-color: #c9e2da; box-shadow: 0 2px 6px rgba(23,33,31,.05), 0 16px 34px -14px rgba(15,107,92,.26); transform: translateY(-2px); }
.feature-grid h3 { font-size: 1.02rem; color: var(--brand-d); margin-bottom: 10px; padding-right: 34px; }
.feature-grid p { font-size: .92rem; color: var(--ink-2); margin-bottom: 14px; }
.feature-grid a { font-size: .87rem; font-weight: 600; }

.lang-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lang-grid li { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; background: #fff; }
.lang-grid li:hover { border-color: var(--brand); }
.lang-grid a { font-weight: 600; font-size: .95rem; }
.lang-grid span { font-size: .78rem; color: var(--ink-3); }
.lang-grid em { font-style: normal; font-size: .72rem; color: var(--brand); margin-top: 4px; }
.lang-grid-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lang-grid-home { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ---------- 语种分组 + 筛选（首页与 /fanyi/ 共用） ----------
   语种总数到 100 之后，一屏平铺是没法用的。改成两件套：
   知道语种名的直接搜，不知道的顺着地区往下看。
   筛选是纯前端过滤，不依赖后端，也不影响爬虫（内容始终在 DOM 里）。 */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lang-finder { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 20px; }
.lang-search { flex: 1 1 300px; max-width: 460px; }
.lang-search input {
  width: 100%; font: inherit; font-size: .95rem; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 14px;
}
.lang-search input::placeholder { color: var(--ink-3); }
.lang-search input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.lang-count { margin: 0; font-size: .85rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lang-count b { color: var(--brand-d); font-weight: 600; }
.lang-tip, .lang-empty { font-size: .88rem; line-height: 1.7; color: var(--ink-3); }
.lang-tip { margin: 0 0 22px; }
.lang-empty {
  margin: 0; border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 16px 18px; background: #fff;
}

.lang-groups { display: flex; flex-direction: column; gap: 26px; }
.lang-group-head {
  display: flex; align-items: baseline; gap: 10px; font-size: 1rem; font-weight: 600;
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.lang-group-count { font-family: var(--mono); font-size: .78rem; font-weight: 400; color: var(--ink-3); }

/* 语种卡片：/fanyi/ 总览用，信息密度高于首页的纯链接列表 */
.lang-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lang-card {
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 3px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lang-card:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.lang-card-link { display: flex; align-items: baseline; gap: 8px; }
.lang-card-name { font-weight: 600; font-size: .95rem; }
.lang-card-native { font-size: .78rem; color: var(--ink-3); }
.lang-card-meta { margin: 0; font-size: .74rem; line-height: 1.5; color: var(--ink-3); }
.lang-card-note { margin: 4px 0 0; font-size: .82rem; line-height: 1.6; color: var(--ink-2); }
.lang-card-tags { margin: 7px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-block; font-size: .72rem; line-height: 1.6; padding: 2px 9px; border-radius: 10px; background: var(--brand-l); color: var(--brand-d); }
.tag-plain { background: var(--bg-3); color: var(--ink-3); }

/* 语种页底部的「同地区的其他语种」 */
.chip-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-links a {
  display: inline-flex; align-items: baseline; gap: 6px; border: 1px solid var(--line);
  border-radius: 20px; padding: 6px 14px; font-size: .88rem; background: #fff;
}
.chip-links a:hover { border-color: var(--brand); color: var(--brand-d); }
.chip-links span { font-size: .75rem; color: var(--ink-3); }

/* ---------- 关于我们：顶部数字条 ----------
   参考站用大数字撑质感，但摆的是无法核实的量级。这里同样的版式，
   换成本站 CSV 实时算出的真实条目数，并且整块可点进对应栏目核对。 */
.about-stats {
  background: linear-gradient(180deg, var(--brand-l), #fff);
  border-bottom: 1px solid var(--line); padding: 30px 0 26px;
}
.about-stats ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.about-stats li a {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 12px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; text-decoration: none; transition: .18s;
}
.about-stats li a:hover {
  border-color: var(--brand); transform: translateY(-2px);
  box-shadow: var(--shadow-h); text-decoration: none;
}
.about-stats strong {
  font-size: 2rem; font-weight: 800; color: var(--brand-d); line-height: 1;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.about-stats strong em { font-style: normal; font-size: .95rem; font-weight: 600; margin-left: 2px; }
.about-stats span { font-size: .84rem; color: var(--ink-3); text-align: center; line-height: 1.5; }
.about-stats-note {
  margin: 14px 0 0; text-align: center; font-size: .78rem; color: var(--ink-3); line-height: 1.7;
}

/* ---------- 关于我们：正文层级 ----------
   md 里全是平铺的段落与一张年表，扫读时抓不住重点。
   只在关于页加作用域样式：h2 左侧引导条，发展历程表改成时间线卡片。 */
.doc-about .prose > h2 {
  position: relative; padding-left: 14px; margin-top: 40px;
  font-size: 1.28rem; line-height: 1.45;
}
.doc-about .prose > h2::before {
  content: ''; position: absolute; left: 0; top: .28em; bottom: .28em;
  width: 4px; border-radius: 2px; background: var(--brand);
}
.doc-about .prose > h2:first-of-type { margin-top: 24px; }
/* 发展历程那张表（表头是「时间 / 节点」）做成左轴时间线 */
/* table/tbody 必须一起改成块级：只把 tr 改成 grid 的话，table 仍是
   display:table，会按表格算法按内容撑开最小宽度，窄屏下就顶出栏外。 */
.doc-about .prose table { display: block; width: 100%; min-width: 0; border: 0; margin: 0; }
.doc-about .prose table tbody { display: block; }
/* 全局 table 带 min-width: 520px（供宽表在 .table-wrap 里横向滚动）。
   时间线不需要滚动，必须把 min-width 归零，否则窄屏照样顶出栏外。
   顺带去掉 .table-wrap 为"可滚动表格"准备的边框与圆角——时间线不需要这个外框。 */
.doc-about .prose .table-wrap { border: 0; border-radius: 0; margin: 18px 0; overflow: visible; }
.doc-about .prose table thead { display: none; }
.doc-about .prose table tr {
  display: grid; grid-template-columns: 132px 1fr; gap: 16px;
  padding: 14px 0 14px 18px; border: 0; border-left: 2px solid var(--line);
  position: relative;
}
.doc-about .prose table tr::before {
  content: ''; position: absolute; left: -6px; top: 20px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; border: 2px solid var(--brand);
}
.doc-about .prose table tr:last-child { border-left-color: transparent; }
.doc-about .prose table td {
  border: 0; padding: 0; font-size: .92rem; line-height: 1.85; color: var(--ink-2);
}
.doc-about .prose table td:first-child {
  font-weight: 700; color: var(--brand-d); white-space: nowrap; font-size: .88rem;
}

/* ---------- 语种页：翻译需求分类 ----------
   原来「服务范围」是 6 个孤立标签，既看不出接什么，也指不到页面。
   改成六类分组 + 每项直达服务页：访客能顺着走下一步，爬虫多一条横向内链。 */
.need-block { margin: 26px 0 0; }
.need-block h2 { font-size: 1.24rem; margin: 0 0 6px; line-height: 1.45; }
.need-block-tip { margin: 0 0 16px; font-size: .88rem; color: var(--ink-3); line-height: 1.8; }
.need-groups {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.need-group {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 15px 15px;
}
.need-group h3 {
  margin: 0 0 10px; font-size: .92rem; font-weight: 700; color: var(--ink);
  padding-bottom: 8px; border-bottom: 1px dashed var(--line);
}
.need-group .chip-links a { font-size: .82rem; padding: 5px 11px; }

/* ---------- 语种总览：常用语种方块 ----------
   方块的目标只有一个：让"我知道要什么语种"的人一次点中。
   所以每格只放三样东西——中文名、原文名、能不能下图纸单，不放简介。 */
.lang-hot { margin: 26px 0 4px; }
.lang-hot h2, .lang-az h2 { font-size: 1.32rem; margin: 0 0 8px; line-height: 1.45; }
.lang-hot-tip, .lang-az-tip { margin: 0 0 14px; font-size: .9rem; color: var(--ink-3); line-height: 1.8; }
.lang-tiles {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px;
}
.lang-tile a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 82px; padding: 12px 8px; text-align: center; text-decoration: none;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; transition: .16s;
}
.lang-tile a:hover { border-color: var(--brand); background: var(--brand-l); text-decoration: none; transform: translateY(-2px); }
.lt-name { font-size: .98rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.lt-native { font-size: .74rem; color: var(--ink-3); line-height: 1.3; word-break: break-word; }
.lt-badge {
  margin-top: 3px; font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  color: var(--brand-d); background: rgba(37, 99, 235, .1); border-radius: 4px; padding: 2px 6px;
}
.lang-tile-cad a { border-color: rgba(37, 99, 235, .28); }

/* ---------- 语种总览：A–Z 全量 ----------
   之前每格挂一句 60 字简介，100 格就是 6000 多字，扫不动。
   这里每格只留「中文名 + 原文名 + 主要使用地区」，简介留在语种页。 */
.lang-az { margin-top: 34px; }
.lang-region-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.region-chip {
  font: inherit; font-size: .82rem; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  border-radius: 20px; padding: 5px 13px; display: inline-flex; align-items: center; gap: 6px;
  transition: .15s;
}
.region-chip span { font-size: .72rem; color: var(--ink-3); }
.region-chip:hover { border-color: var(--brand); color: var(--brand-d); }
.region-chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.region-chip.is-on span { color: rgba(255, 255, 255, .8); }

.lang-az-nav {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.lang-az-nav a {
  min-width: 30px; text-align: center; font-size: .88rem; font-weight: 600;
  padding: 4px 7px; border-radius: 6px; color: var(--ink-2); text-decoration: none;
}
.lang-az-nav a:hover { background: var(--brand-l); color: var(--brand-d); text-decoration: none; }

.lang-az-group { margin: 0 0 6px; scroll-margin-top: 84px; }
.lang-az-letter {
  display: flex; align-items: baseline; gap: 10px; margin: 16px 0 8px;
  padding-bottom: 6px; border-bottom: 1px dashed var(--line);
}
.laz-cap { font-size: 1.16rem; font-weight: 800; color: var(--brand-d); letter-spacing: .04em; }
.laz-num { font-size: .76rem; font-weight: 400; color: var(--ink-3); }
.lang-az-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 14px;
}
.lang-az-list a {
  display: flex; align-items: baseline; gap: 8px; padding: 5px 6px; border-radius: 6px;
  text-decoration: none; font-size: .9rem; color: var(--ink-2);
}
.lang-az-list a:hover { background: var(--bg-3); color: var(--brand-d); text-decoration: none; }
.lang-az-list b { font-weight: 600; color: var(--ink); flex: 0 0 auto; }
.laz-native { font-size: .76rem; color: var(--ink-3); flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.laz-region { margin-left: auto; font-size: .74rem; color: var(--ink-3); flex: 0 0 auto; }

/* ---------- 客户类型 ----------
   首页首屏之后先让访客对号入座：按「谁在找我们 + 要解决什么」分块，
   而不是按我们内部的服务目录分块。每块带常见文件与相关领域的直达入口。 */
.section-custtypes { padding-top: 8px; }
.cust-types {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.cust-type {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 10px;
}
.cust-type:hover { border-color: var(--brand); }
.ct-name { margin: 0; font-size: 1.02rem; font-weight: 700; line-height: 1.45; color: var(--ink); }
.ct-need { margin: 0; font-size: .9rem; line-height: 1.75; color: var(--ink-2); }
.ct-how {
  margin: 0; font-size: .86rem; line-height: 1.8; color: var(--ink-3);
  background: var(--bg-3); border-radius: 10px; padding: 10px 12px;
}
.ct-tag {
  display: inline-block; margin-right: 8px; font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; color: var(--brand-d); background: rgba(37, 99, 235, .09);
  border-radius: 4px; padding: 2px 7px; vertical-align: 1px;
}
.ct-block { margin-top: auto; }
.ct-label { margin: 0 0 7px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); }
.cust-type .chip-links a { font-size: .82rem; padding: 5px 12px; }

/* 导航下拉底部的「全部语种」入口：横跨整个下拉宽度 */
.sub-all {
  grid-column: 1 / -1; display: block; margin-top: 4px; padding-top: 10px;
  border-top: 1px solid var(--line); font-size: .84rem; font-weight: 600; color: var(--brand-d) !important;
}

/* ---------- 资质条 ----------
   首页原来摆一张证书拼图，其中部分证件已过期、也不再是客户决策的关键信息。
   改为一条低视觉重量的说明 + 四个快捷入口：保留"可核验"这个信号，
   但把版面让给客户真正要判断的事（术语怎么定、文件怎么给、交付前核对什么）。 */
.trust-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px 32px; border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: var(--radius); background: #fff; padding: 22px 26px;
}
.trust-strip-copy { flex: 1 1 420px; }
.trust-strip-copy .eyebrow { margin: 0 0 6px; }
.trust-strip-copy h2 { font-size: 1.15rem; margin: 0 0 8px; }
.trust-strip-copy p { margin: 0; font-size: .9rem; line-height: 1.75; color: var(--ink-2); }
.trust-strip-links {
  list-style: none; margin: 0; padding: 0; flex: 0 1 auto;
  display: grid; grid-template-columns: repeat(2, minmax(140px, auto)); gap: 10px 22px;
}
.trust-strip-links a { display: inline-flex; align-items: center; gap: 4px; font-size: .9rem; font-weight: 500; }
.trust-strip-links svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: 0 0 auto; }

.link-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.link-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.link-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.link-grid li { border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 14px; background: #fff; display: flex; flex-direction: column; gap: 2px; }
.link-grid li:hover { border-color: var(--brand); background: #fbfdfc; }
.link-grid a { font-size: .93rem; font-weight: 500; }
.link-grid span { font-size: .78rem; color: var(--ink-3); }

.chip-list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-list li { background: var(--bg-3); color: var(--brand-d); border-radius: 20px; padding: 5px 14px; font-size: .87rem; }
.chip-mono li { font-family: var(--mono); font-size: .82rem; background: var(--bg-2); color: var(--ink-2); }

/* 二维码卡片：联系页的微信区块。写作语法是 markdown 里的 @qr[标题](图址) ...。
   左图右文，窄屏自动堆叠。 */
.qr-card {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  margin: 24px 0 26px;
  padding: 22px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
}
.qr-card img {
  display: block; width: 100%; max-width: 200px; height: auto;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: #fff; padding: 6px;
}
.qr-card-copy { min-width: 0; }
.qr-card-t { margin: 0 0 8px; font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.qr-card-id {
  margin: 0 0 10px; font-size: .92rem; color: var(--ink-2);
  font-family: var(--mono); letter-spacing: .01em;
}
.qr-card-id strong { color: var(--brand); font-size: 1rem; }
.qr-card-note { margin: 0; font-size: .88rem; line-height: 1.75; color: var(--ink-3); }

/* ---------- 侧栏 ---------- */
.side-box { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 20px; }
.side-box h2 { font-size: .95rem; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side-list a { display: block; padding: 6px 0; font-size: .9rem; color: var(--ink-2); }
.side-list a:hover { color: var(--brand); }
.side-list-date li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.side-list-date span { font-size: .76rem; color: var(--ink-3); flex: 0 0 auto; }
.side-list-date a { font-size: .87rem; line-height: 1.5; }
.side-ol { margin: 0 0 16px; padding-left: 1.2em; font-size: .89rem; color: var(--ink-2); }
.side-ol li { margin-bottom: 5px; }
.side-facts { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; font-size: .86rem; }
.side-facts li { display: flex; gap: 10px; }
.side-facts b { color: var(--ink-3); font-weight: 600; flex: 0 0 62px; font-size: .82rem; }
.side-facts span { color: var(--ink-2); }
.side-contact { background: linear-gradient(160deg, var(--brand-l) 0%, #fff 100%); border-color: #cfe6e1; }
.side-contact p { font-size: .88rem; color: var(--ink-2); margin-bottom: 10px; }
.side-tel { font-size: 1.22rem !important; font-weight: 700; margin-bottom: 4px !important; }
.side-tel a { color: var(--brand-d); letter-spacing: .01em; }
.side-mail { margin-bottom: 16px !important; }
.side-mail a { font-size: .9rem; }

/* ---------- FAQ ---------- */
.faq-section { margin: 44px 0; }
.faq { display: grid; gap: 8px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.faq summary { cursor: pointer; padding: 15px 18px; font-weight: 600; font-size: .97rem; list-style: none; position: relative; padding-right: 46px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: var(--brand); font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details[open] summary { background: var(--bg-2); }
.faq-body { padding: 14px 18px 18px; border-top: 1px solid var(--line-2); }
.faq-body p { margin: 0; font-size: .93rem; color: var(--ink-2); }

/* ---------- 新闻 ---------- */
.news-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.news-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; overflow: hidden; transition: border-color .22s, box-shadow .22s, transform .22s; }
.news-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand) 0%, #17a189 100%);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.news-card:hover::after { transform: scaleX(1); }
.news-card:hover { border-color: #c9e2da; box-shadow: 0 2px 6px rgba(23,33,31,.05), 0 16px 34px -14px rgba(15,107,92,.26); transform: translateY(-2px); }
.news-card a { display: flex; flex-direction: column; height: 100%; padding: 20px; text-decoration: none; color: inherit; }
.news-card a:hover { text-decoration: none; color: inherit; }
.news-card h3 { font-size: 1rem; margin: 10px 0 8px; color: var(--ink); line-height: 1.45; }
.news-card p { font-size: .88rem; color: var(--ink-3); flex: 1; margin-bottom: 14px; }
.news-card time { font-size: .78rem; color: var(--ink-3); }
.news-cat { font-size: .74rem; color: var(--brand); background: var(--brand-l); border-radius: 4px; padding: 2px 8px; align-self: flex-start; letter-spacing: .02em; }

.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.news-list li { border-bottom: 1px solid var(--line-2); }
.news-list a { display: block; padding: 20px 4px; text-decoration: none; color: inherit; }
.news-list a:hover { text-decoration: none; background: var(--bg-2); }
.news-list h2 { font-size: 1.06rem; margin: 8px 0 8px; color: var(--ink); line-height: 1.45; }
.news-list a:hover h2 { color: var(--brand); }
.news-list p { font-size: .9rem; color: var(--ink-3); margin: 0 0 8px; }
.news-list time { font-size: .78rem; color: var(--ink-3); margin-right: 10px; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.filter-bar a { padding: 6px 14px; border-radius: 20px; font-size: .88rem; background: var(--bg-2); color: var(--ink-2); }
.filter-bar a:hover { background: var(--bg-3); text-decoration: none; color: var(--brand-d); }
.filter-bar a[aria-current="page"] { background: var(--brand); color: #fff; }

.pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .92rem; }
.pager .disabled { color: #b6c0be; }
.pager-info { color: var(--ink-3); font-size: .88rem; }

.post-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 50px; }
.post-nav-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: #fff; text-decoration: none; }
.post-nav-item:hover { border-color: var(--brand); text-decoration: none; }
.post-nav-item span { display: block; font-size: .78rem; color: var(--ink-3); margin-bottom: 5px; }
.post-nav-item strong { font-size: .94rem; font-weight: 600; color: var(--ink-2); line-height: 1.5; }
.post-nav-next { text-align: right; grid-column: 2; }

/* ---------- 文档页 ---------- */
.doc { padding-top: 44px; padding-bottom: 56px; }
.doc-narrow { max-width: 860px; }
.doc-wide { max-width: var(--wrap); }
.doc-head { margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.doc-head h1 { margin-bottom: 12px; }
.doc-head .lead { font-size: 1.04rem; color: var(--ink-2); margin-bottom: 10px; }
.doc-head .meta { font-size: .85rem; color: var(--ink-3); margin: 0; }
.doc-cat { margin-bottom: 10px; }
.doc-cat a { font-size: .76rem; background: var(--brand-l); color: var(--brand-d); border-radius: 4px; padding: 3px 10px; }
.doc-cat a:hover { text-decoration: none; }
.doc-foot { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.doc-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.doc-tags a { font-size: .82rem; color: var(--ink-3); background: var(--bg-2); padding: 4px 12px; border-radius: 20px; }
.doc-tags a:hover { text-decoration: none; color: var(--brand); }

.related { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); }
.related h2 { font-size: 1.02rem; margin-bottom: 16px; }

/* ---------- 底部行动区 ---------- */
.cta-band { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 62%, var(--navy-700) 100%); color: #fff; }
/* 右上角一层柔光，避免大色块发闷 */
.cta-band::before {
  content: ""; position: absolute; top: -40%; right: -10%; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(53, 200, 169, .2) 0%, transparent 68%);
  pointer-events: none;
}
.cta-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 52px 20px; flex-wrap: wrap; }
.cta-inner h2 { color: #fff; font-size: 1.44rem; margin-bottom: 8px; letter-spacing: -.005em; }
.cta-inner p { color: var(--on-dark-2); margin: 0; max-width: 640px; font-size: .96rem; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-band .btn { background: var(--brand-on-dark); color: #06302a; border-color: var(--brand-on-dark); font-weight: 700; }
.cta-band .btn:hover { background: var(--brand-on-dark-l); border-color: var(--brand-on-dark-l); color: #06302a; }
.cta-band .btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .34); }
.cta-band .btn-outline:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .6); }

/* ---------- 客户案例（跑马灯形式，参考 iadre.com 的呈现方式） ---------- */
.band-clients { overflow: hidden; }
/* 上移到首屏下方时，收一点上边距，让它更像一条"信任条"而不是独立栏目 */
.band-clients-top { padding-top: 44px; }
.band-clients-top .section-head { margin-bottom: 26px; }
.marquee-label {
  font-size: .82rem; font-weight: 600; color: var(--ink-3);
  letter-spacing: .08em; margin: 0 0 14px;
}

/* 跑马灯：两条 track 首尾相接，整体位移 50% 形成无缝循环 */
.logo-marquee {
  position: relative;
  margin-bottom: 26px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.lm-row {
  display: flex; width: max-content;
  animation: lmScroll 62s linear infinite;
}
.logo-marquee:hover .lm-row,
.logo-marquee:focus-within .lm-row { animation-play-state: paused; }
.lm-track { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; flex: none; }
.lm-cell {
  /* --hot 由 main.js 按"距离视口中心的远近"逐帧写入：
     1 = 正中间（原色），0 = 已在两侧（灰度） */
  --hot: 0;
  flex: none; width: 158px; height: 104px; margin-right: 14px;
  padding: 12px 14px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(23, 33, 31, .03);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.lm-cell.is-hot {
  border-color: #cfe0d8;
  box-shadow: 0 6px 20px -8px rgba(15, 107, 92, .20);
}
.lm-cell:hover {
  transform: translateY(-3px);
  border-color: #cfe0d8;
  box-shadow: 0 6px 18px -6px rgba(15, 107, 92, .22);
}
.lm-pic { display: flex; align-items: center; justify-content: center; height: 46px; flex: none; }
/* 资源本身就是品牌彩色版，靠 CSS 滤镜在全灰↔原色之间过渡：
   两侧 grayscale(1) 看起来就是灰度 logo，滚到中间 grayscale(0) 恢复品牌色。
   这样只有一份图、像素天然对齐，不会出现两层图叠不住的问题。 */
.lm-pic img {
  height: 46px; width: auto; max-width: 118px;
  object-fit: contain;
  filter: grayscale(calc(1 - var(--hot))) saturate(calc(1 + var(--hot) * .08));
  opacity: calc(.52 + var(--hot) * .48);
  transition: filter .26s ease, opacity .26s ease;
}
/* 首帧还没算出 --hot 之前先不要做过渡，否则会从"全灰"慢慢爬上来，
   看起来像加载慢。main.js 算完第一次之后才挂上 .lm-ready 打开过渡。 */
.logo-marquee:not(.lm-ready) .lm-pic img,
.logo-marquee:not(.lm-ready) .lm-name { transition: none; }
.lm-cell.is-hot .lm-pic img { opacity: 1; }
.lm-cell:hover .lm-pic img { filter: grayscale(0) saturate(1.06); opacity: 1; }
.lm-name {
  flex: none; font-size: .74rem; color: var(--ink-3); letter-spacing: .02em;
  line-height: 1.3; white-space: nowrap;
  opacity: calc(.66 + var(--hot) * .34);
  transition: color .22s ease, opacity .24s ease;
}
.lm-cell:hover .lm-name { color: var(--brand); opacity: 1; }

@keyframes lmScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* 尊重"减少动态效果"偏好：停掉滚动，改为可横向滚动的静态列表并全部显示原色 */
@media (prefers-reduced-motion: reduce) {
  .lm-row { animation: none; }
  .lm-cell { --hot: 1; }
  .logo-marquee {
    overflow-x: auto;
    -webkit-mask-image: none; mask-image: none;
  }
}

/* 跑马灯下方的客户名录墙：按行业分组的机构清单 */
.client-wall-head {
  font-size: 1rem; margin: 34px 0 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line); color: var(--ink-2);
}
.client-wall {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 26px; margin-bottom: 18px;
}
.cw-group { margin: 0; }
.cw-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: .86rem; font-weight: 700; color: var(--brand-d);
}
.cw-title::before {
  content: ""; width: 3px; height: 13px; border-radius: 2px;
  background: var(--brand); flex: none;
}
.cw-count {
  font-size: .7rem; font-weight: 600; line-height: 1.5; color: var(--brand);
  background: var(--brand-l); border-radius: 20px; padding: 0 7px;
}
.cw-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.cw-list li {
  font-size: .78rem; line-height: 1.55; color: var(--ink-2);
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: 5px; padding: 3px 9px;
}
/* 有标识图的机构加一点视觉提示，方便和上方跑马灯对应 */
.cw-list li.cw-logo {
  background: var(--brand-l); border-color: #cfe6e0; color: var(--brand-d); font-weight: 600;
}
.client-note { font-size: .8rem; color: var(--ink-3); margin: 0; line-height: 1.75; }
.client-note a { color: var(--brand); }

/* ---------- 网站地图 ---------- */
.sitemap-group { margin-bottom: 38px; }
.sitemap-group h2 { font-size: 1.08rem; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.sitemap-note { font-size: .86rem; color: var(--ink-3); margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); }

/* ---------- 页脚 ---------- */
/* 页脚与首屏/CTA 用同一套海军蓝（--navy-900）：整站深色区首尾呼应，
   不再出现"深绿页脚 + 深蓝横幅"两种暗色打架的情况。 */
.site-foot { background: var(--navy-900); color: var(--on-dark-2); font-size: .88rem; margin-top: 0; border-top: 1px solid var(--line-on-dark); }
.foot-grid { display: grid; grid-template-columns: 1.7fr repeat(5, 1fr); gap: 30px; padding-top: 52px; padding-bottom: 40px; }
.foot-col h2 { font-size: .92rem; color: #fff; margin-bottom: 14px; letter-spacing: .02em; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.foot-col a { color: var(--on-dark-3); font-size: .86rem; }
.foot-col a:hover { color: #fff; text-decoration: none; }
.foot-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.foot-brand .brand-mark { background: var(--brand-on-dark); color: #06302a; }
.foot-brand strong { color: #fff; font-size: 1.06rem; }
.foot-about p { font-size: .86rem; line-height: 1.75; color: var(--on-dark-3); margin-bottom: 18px; max-width: 42ch; }
.foot-contact { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; font-size: .84rem; }
.foot-contact dt { color: rgba(255, 255, 255, .42); }
.foot-contact dd { margin: 0; color: var(--on-dark-2); }
.foot-contact a { color: var(--on-dark-2); }
.foot-contact a:hover { color: #fff; }
.foot-bottom { padding-top: 20px; padding-bottom: 26px; border-top: 1px solid var(--line-on-dark); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: .82rem; color: rgba(255, 255, 255, .48); margin: 0; }
.foot-legal a { color: var(--on-dark-3); }
.foot-legal a:hover { color: #fff; }
.foot-ext { font-size: .82rem; margin: 0; color: rgba(255, 255, 255, .48); }
.foot-ext a { color: var(--brand-on-dark-l); font-weight: 600; letter-spacing: .01em; }
.foot-ext a:hover { color: #b6ebdf; }

/* 页脚二维码 */
.foot-qr { margin-top: 18px; display: flex; align-items: center; gap: 14px; }
.foot-qr img {
  width: 96px; height: 96px; flex: none;
  border-radius: var(--radius); background: #fff; padding: 4px;
  border: 1px solid var(--line-on-dark);
}
.foot-qr p { margin: 0; font-size: .8rem; line-height: 1.65; color: var(--on-dark-3); }
.foot-qr strong { color: var(--brand-on-dark-l); }

/* ---------- 右侧悬浮快捷栏 ---------- */
.float-bar {
  position: fixed; right: 18px; bottom: 24px; z-index: 88;
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; visibility: hidden; transform: translateX(10px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
}
.float-bar.show { opacity: 1; visibility: visible; transform: none; }
.fb-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px 9px 10px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow);
  color: var(--ink-2); font-size: .82rem; font-weight: 600; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.fb-item:hover {
  background: var(--brand); color: #fff; border-color: var(--brand);
  text-decoration: none; transform: translateX(-3px);
}
.fb-ico {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-l); color: var(--brand);
  font-size: .8rem; font-weight: 700; line-height: 1;
  transition: background .22s ease, color .22s ease;
}
.fb-item:hover .fb-ico { background: rgba(255, 255, 255, .2); color: #fff; }
.fb-txt { letter-spacing: .01em; }
.fb-top { opacity: 0; visibility: hidden; pointer-events: none; }
.float-bar.at-top .fb-top { opacity: 1; visibility: visible; pointer-events: auto; }

/* 悬浮栏与旧的圆形回顶按钮不同时出现 —— 旧的已由本组件取代 */
.to-top { display: none; }

/* ---------- 微信二维码弹窗 ---------- */
.wechat-modal {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.wechat-modal[hidden] { display: none; }
.wm-mask { position: absolute; inset: 0; background: rgba(10, 34, 30, .6); animation: wmFade .2s ease; }
.wm-panel {
  position: relative; z-index: 1; width: 100%; max-width: 380px;
  background: #fff; border-radius: var(--radius-lg);
  padding: 28px 24px 22px; text-align: center;
  box-shadow: 0 12px 28px rgba(23, 33, 31, .14), 0 32px 72px -20px rgba(23, 33, 31, .3);
  animation: wmIn .2s ease;
}
.wm-close {
  position: absolute; top: 6px; right: 8px; width: 36px; height: 36px;
  border: 0; background: none; color: var(--ink-3); font-size: 24px; line-height: 1;
  cursor: pointer; border-radius: 8px; transition: background .2s, color .2s;
}
.wm-close:hover { background: var(--bg-2); color: var(--ink); }
.wm-panel h3 { margin: 0 0 6px; font-size: 1.12rem; color: var(--ink); }
.wm-sub { margin: 0 0 16px; font-size: .82rem; color: var(--ink-3); }
.wm-qr {
  width: 220px; height: 220px; margin: 0 auto 14px;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-2);
}
.wm-qr img { display: block; width: 100%; height: 100%; object-fit: contain; }
.wm-id { margin: 0 0 8px; font-size: .93rem; color: var(--ink); }
.wm-id strong { color: var(--brand); font-family: var(--mono); letter-spacing: .02em; }
.wm-note { margin: 0 0 16px; font-size: .8rem; line-height: 1.7; color: var(--ink-3); text-align: left; }
.wm-tel { display: block; width: 100%; }

@keyframes wmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wmIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* 弹窗打开时锁滚动 */
body.wm-locked { overflow: hidden; }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .side-col { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 44px 20px; }
  .hero-home .hero-inner { padding: 52px 20px 0; }
  .hero-showcase { padding: 28px 20px 36px; }
  .hero-figure { order: -1; }
  .pb-art { max-width: 40%; opacity: .8; }
  .card-grid-4, .lang-grid-home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .client-wall { gap: 12px 20px; }
  .stat-bar ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-bar li:nth-child(1), .stat-bar li:nth-child(2) { border-bottom: 1px solid var(--line-2); }
  .stat-bar li:nth-child(3) { border-left: 1px solid var(--line-2); }
  .std-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .std-points li:nth-child(2) { border-right: 0; }
  .std-points li:nth-child(1), .std-points li:nth-child(2) { border-bottom: 1px solid var(--line-2); }
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-about { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); max-height: 76vh; overflow-y: auto; padding: 10px 16px 20px; }
  .site-nav.open { display: block; }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav > ul > li > a { padding: 13px 8px; font-size: 1rem; justify-content: space-between; border-bottom: 1px solid var(--line-2); border-radius: 0; }
  /* 窄屏下拉是常驻展开的（position: static），必须把桌面端的隐藏态整个覆盖掉，
     否则 opacity:0 / visibility:hidden 会让汉堡菜单里的子项全部看不见。 */
  .site-nav .sub, .site-nav .sub-wide {
    position: static; display: grid; box-shadow: none; border: none; border-radius: 0;
    padding: 4px 0 12px 12px; min-width: 0;
    opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: none;
  }
  .site-nav .sub a { padding: 8px 10px; }
  .head-cta { display: none; }
  .feature-grid, .card-grid-3, .card-grid-4, .news-grid, .lang-grid, .link-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 窄屏收起插画，横幅只留渐变底与文案，避免文字压在插画上 */
  .pb-art { display: none; }
  .pb-copy { max-width: none; }
  .lang-grid-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-nav { grid-template-columns: minmax(0, 1fr); }
  .post-nav-next { grid-column: 1; text-align: left; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  /* 窄屏下悬浮栏只留图标，避免遮挡正文 */
  .fb-txt { display: none; }
  .fb-item { padding: 10px; border-radius: 50%; }
  .fb-ico { width: 26px; height: 26px; font-size: .86rem; }
  .float-bar { right: 12px; bottom: 16px; }
  .fb-item:hover { transform: none; }
}

@media (max-width: 620px) {
  body { font-size: 15.5px; }
  .qr-card { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px; }
  .qr-card img { margin-inline: auto; }
  .wrap { padding-inline: 16px; }
  .section { padding: 40px 16px; }
  .band { padding: 40px 0; }
  .card-grid, .card-grid-3, .card-grid-4, .news-grid, .feature-grid, .lang-grid, .lang-grid-sm, .link-grid, .link-grid-3, .link-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .lang-grid-home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .side-col { grid-template-columns: minmax(0, 1fr); }
  .client-wall { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cw-list li { font-size: .76rem; }
  .lm-cell { width: 124px; height: 88px; padding: 10px; }
  .lm-pic { height: 40px; }
  .lm-pic img { height: 40px; max-width: 92px; }
  .lm-name { font-size: .7rem; }
  .std-points { grid-template-columns: minmax(0, 1fr); }
  .std-points li { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .std-points li:last-child { border-bottom: 0; }
  .stat-bar ul { grid-template-columns: minmax(0, 1fr); }
  .stat-bar li { border-left: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
  .stat-bar li:last-child { border-bottom: 0; }
  .hero h1 { font-size: 2rem; }
  .hero-home .hero-inner { padding: 40px 20px 0; }
  .hero .lead { font-size: 1rem; }
  .hero-showcase { padding: 22px 16px 30px; }
  .hero-points { justify-content: flex-start; gap: 8px 18px; }
  .foot-qr { flex-direction: column; align-items: flex-start; gap: 10px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-top: 38px; }
  .foot-bottom { flex-direction: column; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .head-inner { min-height: 62px; }
  .foot-contact { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .foot-contact dt { margin-top: 4px; }
  .doc { padding-top: 30px; padding-bottom: 40px; }
  .doc-foot { flex-direction: column; align-items: flex-start; }
  .to-top { right: 14px; bottom: 14px; }
}

@media print {
  .site-head, .site-foot, .cta-band, .to-top, .side-col, .notice { display: none; }
  body { font-size: 12pt; }
  a { color: #000; text-decoration: none; }
  /* 打印不铺深色底，横幅退化成普通标题区，省墨且可读 */
  .page-banner { background: none !important; color: #000; }
  .page-banner h1, .page-banner .lead, .page-banner .eyebrow { color: #000; }
  .pb-art, .pb-grid, .pb-crumbs { display: none; }
}

/* ==========================================================================
   实拍配图
   素材来自公司旧站（资质证书、图纸截图、作业场景），用在首页与关于我们。
   三种排法：板块宽图 / 图文两栏 / 正文图组。
   ========================================================================== */

/* 板块宽图：首页图纸专题顶部那张图纸墙。
   图纸截图已经从 CAD 的暗底翻成白纸底（见 tools/make-site-photos.py 的 to_paper），
   所以卡片也用浅色，别再用深底 —— 深底配白图会多出一条突兀的黑色横带。 */
.section-figure {
  margin: 0 0 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
}
.section-figure img { display: block; width: 100%; height: auto; }
.section-figure figcaption {
  padding: 10px 18px 13px;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--ink-3);
  background: #fff;
  border-top: 1px solid var(--line-2);
}

/* 图文两栏：左文右图。figure 写在 DOM 里靠后的那一侧 */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 44px;
  align-items: center;
}
.split .section-head { margin-bottom: 20px; }
.split-figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
}
.split-figure img { display: block; width: 100%; height: auto; }
.split-figure figcaption {
  margin: 0;
  padding: 10px 14px;
  font-size: .79rem;
  line-height: 1.6;
  color: var(--ink-3);
  border-top: 1px solid var(--line-2);
}
/* 白底插画（地球）不需要卡片外框，去掉边框更干净 */
.split-figure-plain { border: 0; box-shadow: none; background: transparent; }

/* 正文图组：markdown 里独占一行的图片渲染成这个。
   图片一律按原尺寸显示、绝不放大（避免小图被拉糊），超出栏宽才缩。
   居中用 figure 上的 text-align + img 的 inline-block：
   比 fit-content / max-content 这类"内容定宽"写法可靠得多 —— 后者和
   子元素的 width:100% 会互为参照，实测宽度会塌成容器一半并贴左。 */
.prose-figs { display: grid; gap: 16px; margin: 26px 0; }
.prose-figs-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prose-figs figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  text-align: center;
}
.prose-figs img { display: inline-block; width: auto; max-width: 100%; height: auto; vertical-align: top; }
.prose-figs figcaption {
  margin: 0;
  padding: 9px 13px;
  font-size: .79rem;
  line-height: 1.6;
  color: var(--ink-3);
  text-align: left;
  border-top: 1px solid var(--line-2);
}

@media (max-width: 1080px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 640px) {
  .prose-figs-pair { grid-template-columns: minmax(0, 1fr); }
  .section-figure, .split-figure { border-radius: var(--radius); }
  .section-figure figcaption { padding: 9px 13px 11px; }
}

/* ---------- 语种分组 / 资质条的窄屏适配 ---------- */
@media (max-width: 1080px) {
  .lang-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .band-langs .lang-grid-home { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cust-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lang-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lang-az-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .lang-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band-langs .lang-grid-home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust-strip { padding: 20px; }
  .trust-strip-links { grid-template-columns: repeat(2, minmax(120px, 1fr)); width: 100%; }
}
@media (max-width: 620px) {
  .lang-cards { grid-template-columns: minmax(0, 1fr); }
  .band-langs .lang-grid-home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lang-search { flex: 1 1 100%; max-width: none; }
  .lang-card-note { display: none; }  /* 窄屏卡片列表太长，说明文字留给语种页 */
  .trust-strip-links { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cust-types { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cust-type { padding: 15px 15px 14px; }
  .lang-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lang-az-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; }
  .laz-region { display: none; }  /* 窄屏一行挤不下三样，地区信息让位给语种名 */
  .need-groups { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .about-stats ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-stats strong { font-size: 1.62rem; }
  .doc-about .prose table tr { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-left: 14px; }
  .doc-about .prose table td { overflow-wrap: anywhere; }
}