@charset "utf-8";
/* ==========================================================================
   中琢智慧流体设备（湖北）有限公司 · 全站样式
   版面语言：工程蓝图 · 深海青
   零 CDN：系统字体栈 + 内联 SVG 图标 + 本地 SVG 图片，无任何外链资源
   令牌对比度（对最差底色实测，写作「最差底 xx:1」）：
     --ink   #14262b  对 paper-2 约 13.2:1
     --ink-2 #3d5257  对 paper-2 约 8.0:1
     --ink-3 #54696e  对 paper-2 4.92:1 / 对 card 5.79:1   ← 三级灰按最差底取值
     --blue-d #14618f 对 paper-2 5.68:1 / 对 card 6.69:1
     --orange #c14e0e 白字压其上 4.81:1（按钮）
     --on-dark-2 #a8c8cc 对 brand 6.54:1
     --sky #35b3d9 对 brand 5.02:1
     --amber-od #ef9a5e 对 brand 5.51:1
   ========================================================================== */

/* ------------------------------ 1. 令牌 ------------------------------ */
:root {
  --deep: #08272a;
  --brand: #0d3b3f;
  --brand-2: #14555c;
  --brand-3: #1d6b70;

  --blue: #1a7fb8;
  --blue-d: #14618f;
  --sky: #35b3d9;
  --teal: #2f9c78;

  /* 原文 --orange:#c14e0e 作为「浅底上的小字」不达标（对 paper-2 仅 4.09:1）；
     压深到 #b0470d 后：paper-2 4.52 / paper 4.89 / 白 5.32 全部达标，
     而它在深色底上的填充对比（白字压橙色底）反而更高，不产生回归。 */
  --orange: #b0470d;
  --orange-l: #e2621b;
  --amber-od: #ef9a5e;
  /* 分隔符专用灰：原先直接用 --line-2（白底 1.53:1）几乎看不见，改用可读的中灰 */
  --sep: #556e73;
  /* 装饰性大号序号：原 --line-2 只有 1.53:1（几乎看不见），压到刚过「大号字 3:1」门槛，
     保留水印感又不至于消失 */
  --ghost-num: #7f999f;

  --paper: #f2f6f6;
  --paper-2: #e6eeee;
  --card: #ffffff;

  --ink: #14262b;
  --ink-2: #3d5257;
  --ink-3: #54696e;

  --line: #d8e3e4;
  --line-2: #c2d4d6;

  --on-dark: #e8f2f2;
  --on-dark-2: #a8c8cc;
  --on-dark-line: rgba(255, 255, 255, .14);

  --wrap: 1240px;
  --gut: 24px;
  --sec-y: clamp(56px, 6.2vw, 100px);
  --r: 4px;
  --r-lg: 8px;
  --head-h: 74px;
  --top-h: 40px;

  --font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------ 2. 复位 ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
/* 图片与 SVG 必须分两条复位（写在一起会让内联 svg 撑满父容器） */
img, video { max-width: 100%; height: auto; display: block; border: 0; }
svg { display: inline-block; vertical-align: -.125em; flex: 0 0 auto; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
strong, b { font-weight: 700; }
em { font-style: normal; }
time { font-style: normal; }

/* 图标：尺寸必须成对声明（只写属性选择器会全量漏掉 <use> 写法） */
.i { width: 17px; height: 17px; max-width: none; fill: none; stroke: currentColor; }
.i, svg:where([viewBox="0 0 24 24"]) { width: 17px; height: 17px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: absolute; left: 0; top: 0; z-index: 200;
  width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); background: var(--orange); color: #fff;
  font-size: 14px; font-weight: 700;
}
.skip:focus { width: auto; height: auto; clip: auto; padding: 10px 18px; }

/* ------------------------------ 3. 布局容器 ------------------------------ */
/* 只用「宽度收缩 + 居中」，paddingLeft 恒为 0，从结构上消灭 padding 简写清零的坑 */
.wrap { width: min(var(--wrap), 100% - (var(--gut) * 2)); margin-inline: auto; }
.sec { padding-block: var(--sec-y); position: relative; }
.sec--tight { padding-block: clamp(38px, 4vw, 64px); }

/* ------------------------------ 4. 按钮 ------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border: 1px solid transparent; border-radius: var(--r);
  font-size: 15px; font-weight: 700; line-height: 1.4; cursor: pointer;
  background: none; transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
  white-space: nowrap;
}
.btn > .btn__t { color: inherit; font-size: inherit; line-height: inherit; }
.btn--sm { padding: 9px 16px; font-size: 14px; }
.btn--lg { padding: 13px 26px; font-size: 16px; }
.btn--full { width: 100%; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-2); transform: translateY(-2px); }
.btn--amber { background: var(--orange); color: #fff; }
.btn--amber:hover { background: #a8410a; transform: translateY(-2px); }
.btn--line { border-color: var(--line-2); color: var(--brand); background: var(--card); }
.btn--line:hover { border-color: var(--blue); color: var(--blue-d); transform: translateY(-2px); }
.btn--ghost { border-color: rgba(255, 255, 255, .38); color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--brand); transform: translateY(-2px); }
.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

/* ------------------------------ 5. 页头 ------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.topbar { background: var(--brand); color: var(--on-dark-2); font-size: 13.5px; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 9px; }
.topbar__meta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.topbar__meta li, .topbar__i { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.topbar__i .i { color: var(--sky); }
.topbar__i a { color: var(--on-dark); font-weight: 600; }
.topbar__i a:hover { color: var(--sky); }
.topbar__note { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--on-dark); text-decoration: none; font-weight: 500; }
.topbar__note:hover { color: var(--sky); }
.topbar__note .i { color: var(--sky); }

.header-main { display: flex; align-items: center; gap: 26px; padding-block: 14px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand__mark { width: 42px; height: 42px; border-radius: 10px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name { font-size: 20px; font-weight: 800; letter-spacing: .06em; color: var(--brand); }
.brand__sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: var(--ink-3); }

.nav { flex: 1 1 auto; min-width: 0; }
.nav__list { display: flex; align-items: center; gap: 2px; justify-content: flex-end; }
.nav__list > li { flex: 0 0 auto; position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 9px 13px; border-radius: var(--r);
  font-size: 15.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; transition: color .2s var(--ease), background .2s var(--ease);
}
.nav__link:hover { color: var(--blue-d); background: var(--paper-2); }
.nav__link.is-current { color: var(--brand); }
.nav__link.is-current::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px;
  height: 2px; background: var(--orange); border-radius: 2px;
}
.nav__caret { width: 13px; height: 13px; opacity: .55; transition: transform .22s var(--ease); }
.nav__item:hover .nav__caret, .nav__item:focus-within .nav__caret { transform: rotate(180deg); }

.nav__sub {
  position: absolute; left: 0; top: 100%; min-width: 190px; padding: 8px;
  background: var(--card); border: 1px solid var(--line);
  border-top: 3px solid var(--orange); border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: 0 14px 30px rgba(8, 39, 42, .12);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
/* 宽下拉改「锚齐父项右缘」：原先 left:0 起算 480px，产品中心这一项靠近右侧时右缘会伸出视口
   （实测 1180/1200 档溢出 64px）。right:0 后向左展开，任何宽度都不可能越界。 */
.nav__sub--wide { left: auto; right: 0; min-width: 480px; max-width: calc(100vw - 40px); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.nav__item:hover > .nav__sub, .nav__item:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav__sub a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r); font-size: 14.5px; color: var(--ink-2); white-space: nowrap; }
.nav__sub a:hover { background: var(--paper-2); color: var(--blue-d); }
.nav__sub-no { font-family: var(--mono); font-size: 11.5px; color: var(--orange); font-weight: 700; }
.nav__sub-t { font-weight: 600; }

.header-side { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--card); color: var(--brand); cursor: pointer;
}
.nav-toggle__close { display: none; }
/* 开关图标挂在「状态类 nav-open」上，不能挂在断点类 is-collapsible 上 */
.site-header.nav-open .nav-toggle__open { display: none; }
.site-header.nav-open .nav-toggle__close { display: inline-block; }

/* ------------------------------ 6. Hero ------------------------------ */
.hero { position: relative; background: var(--brand); color: var(--on-dark); overflow: hidden; }
.hero__deco { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--sky); }
.hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 44px; align-items: center; padding-block: clamp(48px, 6vw, 88px); }
.hero__text { max-width: 40em; }
.hero__kick { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; color: var(--sky); margin-bottom: 18px; }
.hero__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange-l); box-shadow: 0 0 0 4px rgba(226, 98, 27, .25); }
.hero__title { font-size: clamp(30px, 4.3vw, 54px); line-height: 1.16; letter-spacing: -.02em; color: #fff; }
.hero__title em { display: block; font-size: .62em; font-weight: 700; color: var(--sky); margin-top: 10px; letter-spacing: 0; }
.hero__lead { margin-top: 20px; font-size: 16.5px; line-height: 1.85; color: var(--on-dark-2); max-width: 34em; }
.hero__feats { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; }
.hero__feats li { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; color: var(--on-dark-2); }
.hero__feats .i { color: var(--sky); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.hero__visual { position: relative; }
.hero__fig { border: 1px solid var(--on-dark-line); border-radius: var(--r-lg); overflow: hidden; background: rgba(255, 255, 255, .03); }
.hero__fig img { width: 100%; }
.hero__card {
  position: absolute; left: -14px; bottom: 26px; width: 218px;
  padding: 14px 16px; background: var(--card); color: var(--ink);
  border-radius: var(--r-lg); border-left: 3px solid var(--orange);
  box-shadow: 0 16px 34px rgba(4, 22, 24, .34);
}
.hero__card-t { font-size: 14.5px; font-weight: 800; color: var(--brand); }
.hero__card-d { margin-top: 6px; font-size: 12.5px; line-height: 1.65; color: var(--ink-3); }
.hero__card-tag { display: inline-block; margin-top: 9px; padding: 2px 9px; border-radius: 2px; background: var(--paper-2); font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--blue-d); }
.hero__badge {
  position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r); background: rgba(255, 255, 255, .1);
  border: 1px solid var(--on-dark-line); font-size: 12.5px; color: var(--on-dark); backdrop-filter: blur(4px);
}
.hero__badge .i { color: var(--sky); }

/* 数据条 */
.stats { position: relative; padding-bottom: clamp(34px, 4vw, 56px); }
.stats__list { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--on-dark-line); }
.stats__i { padding: 20px 22px 0 0; border-right: 1px solid var(--on-dark-line); }
.stats__i:last-child { border-right: 0; }
.stats__n { display: block; font-family: var(--mono); font-size: clamp(26px, 3vw, 38px); font-weight: 700; color: #fff; letter-spacing: -.02em; }
.stats__n em { font-size: .45em; color: var(--sky); margin-left: 3px; font-style: normal; }
.stats__t { display: block; margin-top: 2px; font-size: 13.5px; color: var(--on-dark-2); }
.stats--light { padding-bottom: 0; margin-bottom: 40px; }

/* ------------------------------ 7. 区块标题 ------------------------------ */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; margin-bottom: clamp(28px, 3.4vw, 46px); flex-wrap: wrap; }
.sec-head__main { max-width: 46em; }
.sec-head__no { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; color: var(--orange); margin-bottom: 12px; }
.sec-head__bar { width: 22px; height: 3px; background: var(--orange); border-radius: 2px; }
.sec-head__en { color: var(--ink-3); letter-spacing: .12em; }
.sec-head__title { font-size: clamp(22px, 2.7vw, 33px); color: var(--brand); line-height: 1.32; }
.sec-head__desc { margin-top: 12px; font-size: 15.5px; color: var(--ink-2); }
.sec-head__more { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 700; color: var(--blue-d); flex: 0 0 auto; }
.sec-head__more:hover { color: var(--orange); }
.sec-head--c { flex-direction: column; align-items: center; text-align: center; }
.sec-head--c .sec-head__main { max-width: 44em; }
.sec-head--c .sec-head__no { justify-content: center; }
/* 深色区里的标题与装饰色都要重新指定（浅底橙在深底上只有 2.4:1） */
.sec--dark { background: var(--brand); color: var(--on-dark); }
.sec--dark .sec-head__title { color: #fff; }
.sec--dark .sec-head__desc { color: var(--on-dark-2); }
.sec--dark .sec-head__no { color: var(--amber-od); }
.sec--dark .sec-head__bar { background: var(--amber-od); }
.sec--dark .sec-head__en { color: var(--on-dark-2); }
.sec--dark .sec-head__more { color: var(--sky); }

/* ------------------------------ 8. 公司简介 ------------------------------ */
.sec--intro { background: var(--paper); }
.intro { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 62px); align-items: center; }
.intro__media { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.intro__media img { width: 100%; }
.intro__media-tag {
  position: absolute; right: 16px; bottom: 16px; display: flex; flex-direction: column; align-items: center;
  padding: 12px 18px; background: var(--brand); color: #fff; border-radius: var(--r);
}
.intro__media-tag em { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; color: var(--sky); }
.intro__media-tag strong { font-size: 26px; font-weight: 800; letter-spacing: .02em; }
.intro__media-tag span { font-size: 11.5px; color: var(--on-dark-2); }
.intro__p { margin-top: 16px; font-size: 15.5px; line-height: 1.9; color: var(--ink-2); }
.intro__pts { margin-top: 22px; display: grid; grid-template-columns: 1fr; gap: 12px; }
.intro__pts li { display: flex; gap: 13px; align-items: flex-start; padding: 13px 16px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: var(--r); }
.intro__pts em { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--orange); padding-top: 3px; }
.intro__pts span { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.intro__pts strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 2px; }
.intro__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ------------------------------ 9. 公司优势 ------------------------------ */
.sec--adv { background: var(--paper-2); }
.adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.adv { position: relative; padding: 30px 26px 28px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); border-top: 3px solid var(--brand); transition: transform .26s var(--ease), border-color .26s var(--ease); }
.adv:hover { transform: translateY(-5px); border-top-color: var(--orange); }
.adv__ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--r); background: var(--paper-2); color: var(--brand); }
.adv__ico .i { width: 26px; height: 26px; }
.adv__no { position: absolute; right: 22px; top: 26px; font-family: var(--mono); font-size: 30px; font-weight: 700; color: var(--ghost-num); }
.adv__t { margin-top: 18px; font-size: 19.5px; color: var(--brand); }
.adv__en { margin-top: 5px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--blue-d); }
.adv__d { margin-top: 12px; font-size: 14.5px; line-height: 1.85; color: var(--ink-2); }

/* ------------------------------ 10. 分类卡 ------------------------------ */
.sec--cats { background: var(--paper); }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ccard__in { display: flex; flex-direction: column; height: 100%; padding: 24px 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color .24s var(--ease), transform .24s var(--ease); }
.ccard__in:hover { border-color: var(--blue); transform: translateY(-4px); }
.ccard__top { display: flex; align-items: center; justify-content: space-between; }
.ccard__ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--r); background: var(--brand); color: var(--sky); }
.ccard__ico .i { width: 26px; height: 26px; }
.ccard__in:hover .ccard__ico { background: var(--orange); color: #fff; }
.ccard__no { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--ink-3); }
.ccard__name { margin-top: 16px; font-size: 19px; font-weight: 800; color: var(--brand); }
.ccard__en { margin-top: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--blue-d); }
.ccard__desc { margin-top: 12px; font-size: 14px; line-height: 1.8; color: var(--ink-2); flex: 1 1 auto; }
.ccard__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.ccard__cnt { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.ccard__go { display: inline-flex; color: var(--blue-d); }

/* ------------------------------ 11. 产品卡 ------------------------------ */
.sec--prod { background: var(--paper); }
.pcard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pcard__in { display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform .24s var(--ease), border-color .24s var(--ease); }
.pcard__in:hover { transform: translateY(-4px); border-color: var(--blue); }
.pcard__media { position: relative; display: block; background: var(--brand); }
.pcard__media img { width: 100%; }
.pcard__hot { position: absolute; left: 0; top: 0; padding: 4px 10px; background: var(--orange); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }
.pcard__body { display: flex; flex-direction: column; padding: 16px 16px 18px; flex: 1 1 auto; }
.pcard__model { display: block; font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: var(--orange); }
.pcard__name { display: block; margin-top: 6px; font-size: 17px; font-weight: 800; color: var(--brand); }
.pcard__cat { display: block; margin-top: 5px; font-size: 12.5px; color: var(--blue-d); }
.pcard__sum { display: block; margin-top: 10px; font-size: 13.5px; line-height: 1.75; color: var(--ink-2); flex: 1 1 auto; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ptag { display: inline-block; padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 2px; background: var(--paper-2); font-size: 11.5px; color: var(--ink-3); }
.pcard__more { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 700; color: var(--blue-d); }
.pcard__in:hover .pcard__more { color: var(--orange); }

/* ------------------------------ 12. 服务流程 ------------------------------ */
.sec--flow { background: var(--paper-2); }
.flow-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.flow { padding: 16px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.flow__no { display: block; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--orange); }
.flow__t { display: block; margin-top: 6px; font-size: 14.5px; font-weight: 700; color: var(--brand); }
.flow__d { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }

/* ------------------------------ 13. 工程案例 ------------------------------ */
.sec--case { background: var(--paper); }
.case-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.citem { display: flex; align-items: center; gap: 13px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); transition: border-color .22s var(--ease), transform .22s var(--ease); }
.citem:hover { border-color: var(--blue); transform: translateY(-3px); }
.citem__ico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: var(--r); background: var(--paper-2); color: var(--brand); }
.citem__ico .i { width: 22px; height: 22px; }
.citem__body { flex: 1 1 auto; min-width: 0; }
.citem__cat { display: block; font-size: 12px; font-weight: 700; color: var(--blue-d); }
.citem__t { display: block; margin-top: 3px; font-size: 14.5px; font-weight: 700; line-height: 1.55; color: var(--ink); }
.citem__note { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-3); }
.citem__y { flex: 0 0 auto; font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
.case-grid--big .citem--big { align-items: flex-start; }

/* ------------------------------ 14. 文章卡 ------------------------------ */
.sec--news { background: var(--paper-2); }
.ncard-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.ncard-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ncard-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ncard__in { display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform .24s var(--ease), border-color .24s var(--ease); }
.ncard__in:hover { transform: translateY(-4px); border-color: var(--blue); }
.ncard__media { display: block; background: var(--brand); }
.ncard__media img { width: 100%; }
.ncard-grid--2 .ncard__in { flex-direction: row; }
.ncard-grid--2 .ncard__media { flex: 0 0 42%; }
.ncard-grid--2 .ncard__media img { height: 100%; object-fit: cover; }
.ncard__body { display: flex; flex-direction: column; padding: 18px 20px 20px; flex: 1 1 auto; min-width: 0; }
.ncard__meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-3); }
.ncard__cat { padding: 2px 8px; border-radius: 2px; background: var(--paper-2); color: var(--blue-d); font-weight: 700; }
.ncard__title { display: block; margin-top: 10px; font-size: 17px; font-weight: 800; line-height: 1.5; color: var(--brand); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ncard-grid--3 .ncard__title { font-size: 16px; }
.ncard__sum { display: block; margin-top: 10px; font-size: 13.5px; line-height: 1.8; color: var(--ink-2); flex: 1 1 auto; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ncard__more { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--blue-d); }
.ncard__in:hover .ncard__more { color: var(--orange); }
.news-more-head { display: flex; align-items: center; gap: 16px; margin: 46px 0 22px; }
.news-more-head__line { flex: 1 1 auto; height: 1px; background: var(--line-2); }
.news-more-head__t { font-size: 17px; color: var(--brand); flex: 0 0 auto; }

/* ------------------------------ 15. 表单 ------------------------------ */
.sec--form { background: var(--brand); }
.form-sec { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
.form-sec__kick { font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em; color: var(--sky); }
.form-sec__title { margin-top: 14px; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.42; color: #fff; }
.form-sec__desc { margin-top: 16px; font-size: 15.5px; line-height: 1.9; color: var(--on-dark-2); }
.form-sec__list { margin-top: 24px; display: grid; grid-template-columns: 1fr; gap: 11px; }
.form-sec__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--on-dark); }
.form-sec__list .i { color: var(--sky); margin-top: 4px; }
.form-sec__call { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--on-dark-line); }
.form-sec__calbl { display: block; font-size: 13px; color: var(--on-dark-2); }
.form-sec__catel { font-family: var(--mono); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; color: #fff; letter-spacing: -.01em; }
.form-sec__catel:hover { color: var(--sky); }

.form-card { position: relative; padding: 26px; background: var(--card); border-radius: var(--r-lg); color: var(--ink); }
.form-card__alert { display: none; margin-bottom: 16px; padding: 11px 15px; border-radius: var(--r); font-size: 14px; font-weight: 600; }
.form-card__alert.is-show { display: block; }
.form-card__alert.is-err { background: #fdf0e8; color: #8a3a08; border: 1px solid #f0c4a5; }
.form-card__alert.is-ok { background: #e9f5f1; color: #1d5f4a; border: 1px solid #a8d8c8; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field--full { grid-column: 1 / -1; }
.field__lb { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.field__req { color: var(--orange); margin-left: 3px; }
.field__bd { position: relative; display: flex; align-items: center; }
.field__i { position: absolute; left: 13px; color: var(--ink-3); pointer-events: none; }
.field__in {
  width: 100%; padding: 12px 14px 12px 38px; background: var(--paper);
  border: 1px solid var(--line-2); border-radius: var(--r); font-size: 15px; color: var(--ink);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field__in::placeholder { color: var(--ink-3); opacity: .85; }
.field__in:focus { outline: none; border-color: var(--blue); background: var(--card); }
.field__sel { appearance: none; -webkit-appearance: none; cursor: pointer; }
.field__bd:has(.field__sel)::after {
  content: ""; position: absolute; right: 14px; width: 8px; height: 8px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translateY(-2px); pointer-events: none;
}
.field__bd--ta { align-items: flex-start; }
.field__ta { padding-top: 12px; resize: vertical; min-height: 108px; }
.field__bd--ta .field__i { top: 13px; }
.field__msg { display: none; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: #8a3a08; }
.field.is-invalid .field__msg { display: block; }
.field.is-invalid .field__in { border-color: #c9551a; background: #fdf4ee; }
.field.is-ok .field__in { border-color: #2f8f6e; }
.form__foot { display: flex; align-items: center; gap: 18px; margin-top: 22px; flex-wrap: wrap; }
.form__tip { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; line-height: 1.65; color: var(--ink-3); max-width: 32em; }
.form__tip .i { margin-top: 3px; }
.form-card__ok {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 40px 20px; text-align: center; font-size: 16px; font-weight: 700; color: #1d5f4a;
}
.form-card__ok[hidden] { display: none; }
.form-card__ok .i { width: 30px; height: 30px; color: #2f8f6e; }

/* ------------------------------ 16. 荣誉 / FAQ / 友链 ------------------------------ */
.sec--honor { background: var(--paper); }
.honor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.honor { display: flex; align-items: center; gap: 12px; padding: 15px 16px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: var(--r); }
.honor__ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: var(--r); background: var(--paper-2); color: var(--brand); }
.honor__ico .i { width: 22px; height: 22px; }
.honor__t { font-size: 14px; font-weight: 700; line-height: 1.55; color: var(--ink); }

.sec--faq { background: var(--paper-2); }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.faq__i { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; font-size: 15.5px; font-weight: 700; color: var(--brand);
  cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__ico { flex: 0 0 auto; color: var(--orange); transition: transform .24s var(--ease); }
details[open] > .faq__q .faq__ico { transform: rotate(45deg); }
.faq__a { padding: 0 18px 18px; }
.faq__a p { font-size: 14.5px; line-height: 1.9; color: var(--ink-2); }

.sec--friend { background: var(--paper); }
.friend-wall { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.friend-wall__i a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); font-size: 13.5px; color: var(--ink-2); }
.friend-wall__i a:hover { border-color: var(--blue); color: var(--blue-d); }
.friend-wall__i .i { color: var(--ink-3); }

/* ------------------------------ 17. CTA 条带 ------------------------------ */
.cta-band { background: var(--paper-2); border-top: 1px solid var(--line); }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-block: clamp(34px, 4vw, 56px); flex-wrap: wrap; }
.cta-band__kick { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--orange); }
.cta-band__title { margin-top: 10px; font-size: clamp(20px, 2.4vw, 28px); color: var(--brand); }
.cta-band__desc { margin-top: 10px; font-size: 15px; color: var(--ink-2); max-width: 40em; }
/* ★ flex-shrink 必须为 1 且 min-width:0：否则 flex-basis:auto 取 max-content（两颗按钮并排 389px），
   父行只给 288px 也压不下去，容器自身那层 flex-wrap 永远没机会触发 → 窄屏右侧溢出 85px。 */
.cta-band__act { display: flex; flex-wrap: wrap; gap: 12px; flex: 0 1 auto; min-width: 0; max-width: 100%; }

/* ------------------------------ 18. 内页 banner ------------------------------ */
.page-banner { position: relative; background: var(--brand); color: var(--on-dark); overflow: hidden; }
.page-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-banner__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 34px; padding-block: clamp(38px, 4.6vw, 66px); flex-wrap: wrap; }
.page-banner__text { max-width: 56%; }
.page-banner__kicker { font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em; color: var(--sky); }
.page-banner__title { margin-top: 12px; font-size: clamp(24px, 3.2vw, 40px); line-height: 1.28; color: #fff; }
.page-banner__desc { margin-top: 12px; font-size: 15.5px; line-height: 1.85; color: var(--on-dark-2); }
.page-banner__stats { display: flex; gap: 0; flex-wrap: wrap; }
.page-banner__stats li { padding: 0 24px; border-left: 1px solid var(--on-dark-line); }
.page-banner__stats li:first-child { padding-left: 0; border-left: 0; }
.page-banner__n { display: block; font-family: var(--mono); font-size: 24px; font-weight: 700; color: #fff; }
.page-banner__t { display: block; font-size: 13px; color: var(--on-dark-2); }
/* 内页 banner 文字区限宽，避免长标题伸进右侧装饰区 */
@media (max-width: 900px) { .page-banner__text { max-width: none; } }

.subnav { position: relative; background: rgba(0, 0, 0, .22); border-top: 1px solid var(--on-dark-line); }
.subnav__inner { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav__i { flex: 0 0 auto; padding: 13px 18px; font-size: 14.5px; font-weight: 600; color: var(--on-dark-2); border-bottom: 2px solid transparent; white-space: nowrap; }
.subnav__i:hover { color: #fff; }
.subnav__i.is-current { color: #fff; border-bottom-color: var(--orange-l); }

/* 面包屑 */
.crumb { background: var(--card); border-bottom: 1px solid var(--line); }
.crumb__inner { display: flex; align-items: center; gap: 8px; padding-block: 13px; font-size: 13.5px; flex-wrap: wrap; }
.crumb__i { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); }
.crumb__i:hover { color: var(--blue-d); }
.crumb__i.is-cur { color: var(--ink-3); }
.crumb__sep { color: var(--sep); }

/* ------------------------------ 19. 产品总览 / 详情 ------------------------------ */
.sec--prodnav { padding-block: clamp(30px, 3.4vw, 46px); background: var(--paper-2); }
.prodnav { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.prodnav__i a { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); height: 100%; }
.prodnav__i a:hover { border-color: var(--blue); }
.prodnav__ico { color: var(--brand); }
.prodnav__ico .i { width: 20px; height: 20px; }
.prodnav__t { font-size: 14.5px; font-weight: 700; color: var(--brand); }
.prodnav__n { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.sec--catgroup { background: var(--paper); }
.sec--catgroup:nth-of-type(even) { background: var(--paper-2); }

.pdp { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(26px, 3.6vw, 52px); align-items: start; }
.pdp__media { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.pdp__media img { width: 100%; }
.pdp__tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--line); }
.pdp__tags li { padding: 4px 11px; border-radius: 2px; background: var(--paper-2); font-size: 12.5px; color: var(--ink-2); }
.pdp__model { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--orange); }
.pdp__model-k { padding: 2px 7px; border-radius: 2px; background: var(--brand); color: var(--sky); font-size: 11px; letter-spacing: .1em; }
.pdp__name { margin-top: 12px; font-size: clamp(23px, 2.8vw, 34px); color: var(--brand); }
.pdp__sum { margin-top: 14px; font-size: 15.5px; line-height: 1.9; color: var(--ink-2); }
.spec-table { margin-top: 22px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.spec-table tr { border-bottom: 1px solid var(--line); }
.spec-table tr:last-child { border-bottom: 0; }
.spec-table th, .spec-table td { padding: 11px 15px; font-size: 14px; text-align: left; vertical-align: top; }
.spec-table th { width: 32%; background: var(--paper-2); font-weight: 700; color: var(--brand); }
.spec-table td { color: var(--ink-2); }
.pdp__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.pdp__note { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.pdp__note .i { color: var(--blue-d); }

.pdp-detail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(24px, 3.2vw, 46px); align-items: start; }
.sec--pdpdetail { background: var(--paper-2); }
.pdp__sub + .pdp__sub { margin-top: 40px; }
.pdp__h3 { font-size: 20px; color: var(--brand); padding-left: 13px; border-left: 4px solid var(--orange); }
.feat-list { margin-top: 18px; display: grid; grid-template-columns: 1fr; gap: 11px; }
.feat-list li { display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }
.feat-list .i { color: var(--teal); margin-top: 4px; }
.pflow { margin-top: 18px; display: grid; grid-template-columns: 1fr; gap: 10px; }
.pflow__i { display: flex; gap: 13px; align-items: flex-start; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: var(--r); }
.pflow__no { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--orange); padding-top: 3px; }
.pflow__c strong { display: block; font-size: 15px; color: var(--brand); }
.pflow__c em { display: block; margin-top: 4px; font-size: 14px; line-height: 1.75; color: var(--ink-2); }
.svc-list { margin-top: 18px; display: grid; grid-template-columns: 1fr; gap: 10px; }
.svc-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }
.svc-list .i { color: var(--blue-d); margin-top: 4px; }
.svc-list strong { color: var(--ink); margin-right: 6px; }
.doclist { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.doclist li { padding: 11px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); font-size: 13.5px; color: var(--ink-2); }
.pdp-detail__side { display: flex; flex-direction: column; gap: 18px; }

/* 上下篇 */
.sec--prevnext { padding-block: clamp(24px, 2.6vw, 34px); background: var(--paper); }
.pn { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; }
.pn__i a, .pn__i > span, .pn__mid a { display: flex; align-items: center; gap: 12px; padding: 15px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); height: 100%; }
.pn__i a:hover, .pn__mid a:hover { border-color: var(--blue); }
.pn__i span span, .pn__i a > span, .pn__mid a > span { min-width: 0; }
.pn__i em, .pn__mid em { display: block; font-size: 12px; color: var(--ink-3); }
.pn__i strong, .pn__mid strong { display: block; margin-top: 3px; font-size: 14.5px; color: var(--brand); line-height: 1.55; }
.pn__i--next a { flex-direction: row-reverse; text-align: right; }
.pn__i--next span span { text-align: right; }
.pn__mid a { justify-content: center; }
.pn__i.is-off { opacity: .62; }
.sec--rel { background: var(--paper); }
.sec--rel-last { background: var(--paper-2); padding-top: 0; }

/* ------------------------------ 20. 列表页 ------------------------------ */
.list-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(24px, 3.2vw, 44px); align-items: start; }
.sec--list { background: var(--paper); }
.filter { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.filter__lb { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ink-2); flex: 0 0 auto; }
.filter__lb .i { color: var(--ink-3); }
.filter__list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; background: var(--card); border: 1px solid var(--line-2); border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.chip:hover { border-color: var(--blue); color: var(--blue-d); }
.chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip em { font-family: var(--mono); font-size: 11.5px; opacity: .8; }

.nrow-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
.nrow__in { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto 34px; align-items: center; gap: 18px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); transition: border-color .22s var(--ease), transform .22s var(--ease); }
.nrow__in:hover { border-color: var(--blue); transform: translateX(4px); }
.nrow__date { display: flex; flex-direction: column; align-items: center; padding-right: 16px; border-right: 1px solid var(--line); }
.nrow__date em { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--brand); }
.nrow__date span { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.nrow__main { min-width: 0; }
.nrow__title { display: block; font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--brand); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nrow__sum { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.75; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nrow__cat { display: inline-block; padding: 3px 10px; border-radius: 2px; background: var(--paper-2); font-size: 12.5px; color: var(--blue-d); white-space: nowrap; }
.nrow__go { display: inline-flex; color: var(--ink-3); }
.nrow__in:hover .nrow__go { color: var(--orange); }

.pager { display: flex; align-items: center; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.pager__i { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.pager__i.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pager__i:hover { border-color: var(--blue); color: var(--blue-d); }
.pager__i.is-on:hover { color: #fff; }
.pager__i.is-disabled { color: #5a6f74; background: var(--paper-2); border-color: var(--line); cursor: not-allowed; }
.pager__tip { margin-left: auto; font-size: 13px; color: var(--ink-3); }

/* 侧栏（栏体不吸顶、不内滚） */
.side-rail { display: flex; flex-direction: column; gap: 18px; }
.widget { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.widget__t { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--brand); padding-bottom: 13px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.widget__t .i { color: var(--orange); }
.widget__list li { border-bottom: 1px dashed var(--line); }
.widget__list li:last-child { border-bottom: 0; }
.widget__list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; font-size: 14.5px; color: var(--ink-2); }
.widget__list a:hover { color: var(--blue-d); }
.widget__list em { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
.widget__list li.is-on a { color: var(--orange); font-weight: 700; }
.widget__p { font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.widget--call { background: var(--brand); border-color: var(--brand); }
.widget--call .widget__t { color: #fff; border-bottom-color: var(--on-dark-line); }
.widget--call .widget__t .i { color: var(--sky); }
.widget--call .widget__p { color: var(--on-dark-2); margin-bottom: 14px; }
.widget__tel { display: block; font-family: var(--mono); font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 14px; }
.widget__tel:hover { color: var(--sky); }

/* 热门排行 */
.hot-list { display: grid; grid-template-columns: 1fr; gap: 2px; }
.hot__i a { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.hot__i:last-child a { border-bottom: 0; }
.hot__no { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--ink-3); flex: 0 0 auto; padding-top: 3px; }
.hot__i.is-top .hot__no { color: var(--orange); }
.hot__t { flex: 1 1 auto; font-size: 14px; line-height: 1.65; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hot__i a:hover .hot__t { color: var(--blue-d); }
.hot__v { font-family: var(--mono); font-size: 12px; color: var(--ink-3); flex: 0 0 auto; padding-top: 3px; }

/* ------------------------------ 21. 文章页 ------------------------------ */
.sec--art { background: var(--paper); }
.art-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(24px, 3.2vw, 44px); align-items: start; }
.art-main { min-width: 0; }
/* ★ law31：长正文 + 短侧栏，两栏网格会把侧栏拉到与整篇同高，实测右侧空柱 3779px。
   侧栏吸顶跟随：阅读过程中目录/联系方式始终在视口内，「空柱」在视觉上被消解，
   也不再需要往侧栏塞凑数模块。单列（≤1240）时必须复位为 static，否则会跟着滚。 */
.art-side { position: sticky; top: calc(var(--head-real, 124px) + 16px); align-self: start; }
.art { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 40px); }
.art__ttl { font-size: clamp(21px, 2.5vw, 30px); line-height: 1.42; color: var(--brand); }
.art__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--ink-3); }
.art__meta li { display: inline-flex; align-items: center; gap: 6px; }
.art__meta a { color: var(--blue-d); }
.art__lede { margin-top: 20px; padding: 16px 18px; background: var(--paper); border-left: 3px solid var(--blue); border-radius: var(--r); font-size: 15px; line-height: 1.9; color: var(--ink-2); }
.art__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.art__tags li { padding: 3px 11px; border-radius: 2px; background: var(--paper-2); font-size: 12.5px; color: var(--ink-2); }
/* ★ law57：阅读行宽必须由「容器」决定，不能用 em 写死在正文上。
   原写法 `.art__body{max-width:38em}` 在任何断点下都恒定 608px，与卡片可用宽度完全脱钩：
   单栏时卡片撑到 1126px 而正文只占 608px，右侧空出 518px（46%）；两栏时空 208px（25%）。
   正确做法：容器承担限宽职责，正文填满容器，行宽由断点控制，全档位统一在 ~50 汉字/行。 */
.art__body { margin-top: 26px; }
.art__h2 { margin: 34px 0 14px; padding-left: 14px; border-left: 4px solid var(--orange); font-size: 21px; color: var(--brand); }
.art__h3 { margin: 26px 0 12px; font-size: 17.5px; color: var(--brand); }
.art__p { margin-top: 14px; font-size: 16px; line-height: 2.05; color: var(--ink-2); }
.art__ul, .art__ol { margin-top: 14px; display: grid; grid-template-columns: 1fr; gap: 9px; }
.art__ul li, .art__ol li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.95; color: var(--ink-2); }
.art__ul li::before { content: ""; position: absolute; left: 6px; top: 12px; width: 6px; height: 6px; border-radius: 1px; background: var(--blue); }
.art__ol { counter-reset: al; }
.art__ol li { counter-increment: al; padding-left: 30px; }
.art__ol li::before { content: counter(al); position: absolute; left: 0; top: 4px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 2px; background: var(--paper-2); font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--brand); }
.art__q { position: relative; margin: 24px 0 0; padding: 20px 22px 20px 52px; background: var(--paper-2); border-radius: var(--r); }
.art__q-ico { position: absolute; left: 18px; top: 20px; width: 24px; height: 24px; color: var(--blue); }
.art__q p { font-size: 16px; line-height: 1.9; color: var(--brand); font-weight: 600; }
.art__tip { display: flex; gap: 12px; margin-top: 24px; padding: 17px 19px; background: #fdf4ec; border: 1px solid #f0d3b6; border-left: 3px solid var(--orange); border-radius: var(--r); }
.art__tip .i { color: var(--orange); flex: 0 0 auto; margin-top: 3px; }
.art__tip p { font-size: 14.5px; line-height: 1.85; color: #6d3a12; }
.art__tbwrap { margin-top: 20px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.art__tb { min-width: 100%; }
.art__tb th, .art__tb td { padding: 11px 14px; font-size: 14px; line-height: 1.7; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.art__tb thead th { background: var(--brand); color: #fff; font-weight: 700; white-space: nowrap; border-bottom: 0; }
.art__tb tbody th { background: var(--paper-2); color: var(--brand); font-weight: 700; width: 24%; }
.art__tb td { color: var(--ink-2); }
.art__tb tr:last-child th, .art__tb tr:last-child td { border-bottom: 0; }
.art__foot { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); }
.art__declare { display: flex; gap: 10px; padding: 13px 15px; background: var(--paper); border-radius: var(--r); font-size: 13px; line-height: 1.75; color: var(--ink-3); }
.art__declare .i { color: var(--ink-3); flex: 0 0 auto; margin-top: 3px; }
.art__share { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.art__share-lb { font-size: 13.5px; color: var(--ink-3); }
.art__share-i { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--line-2); border-radius: var(--r); font-size: 13.5px; color: var(--ink-2); }
.art__share-i:hover { border-color: var(--blue); color: var(--blue-d); }
.pn--art { margin-top: 18px; }

/* 目录 */
.toc { display: grid; grid-template-columns: 1fr; gap: 2px; counter-reset: tc; }
.toc__i a { display: flex; gap: 9px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.toc__i:last-child a { border-bottom: 0; }
.toc__no { font-family: var(--mono); font-size: 12px; color: var(--ink-3); flex: 0 0 auto; padding-top: 2px; }
.toc__t { flex: 1 1 auto; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.toc__i a:hover .toc__t { color: var(--blue-d); }
.toc__i.is-active .toc__t { color: var(--orange); font-weight: 700; }
.toc__i.is-active .toc__no { color: var(--orange); }

/* ------------------------------ 22. 联系我们 ------------------------------ */
.sec--contact { background: var(--paper); }
.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ccard-big { padding: 24px 22px; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: var(--r-lg); }
.ccard-big__ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--r); background: var(--paper-2); color: var(--brand); }
.ccard-big__ico .i { width: 24px; height: 24px; }
.ccard-big__k { margin-top: 16px; font-size: 13px; color: var(--ink-3); }
.ccard-big__v { display: block; margin-top: 6px; font-family: var(--mono); font-size: 19px; font-weight: 700; color: var(--brand); word-break: break-all; }
.ccard-big__v--addr { font-family: var(--font); font-size: 15.5px; line-height: 1.7; font-weight: 700; word-break: break-word; }
.ccard-big__v:hover { color: var(--blue-d); }
.ccard-big__d { margin-top: 10px; font-size: 13px; line-height: 1.7; color: var(--ink-3); }

.sec--map { background: var(--paper-2); }
.map-block { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 3.4vw, 50px); align-items: center; }
.map-block__deco { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.map-block__deco svg { display: block; width: 100%; }
.map-list { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 4px; }
.map-list li { display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.map-list .i { color: var(--blue-d); flex: 0 0 auto; margin-top: 4px; }
.map-list span { font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }
.map-list strong { display: block; font-size: 15px; color: var(--brand); margin-bottom: 2px; }
.map-tip { display: flex; gap: 9px; margin-top: 16px; font-size: 13px; line-height: 1.7; color: var(--ink-3); }
.map-tip .i { color: var(--orange); flex: 0 0 auto; margin-top: 3px; }

/* ------------------------------ 23. 页脚 ------------------------------ */
.site-footer { background: var(--deep); color: var(--on-dark); }
.footer-main { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.35fr; gap: 34px; padding-block: clamp(38px, 4.4vw, 62px); }
.fbrand { display: flex; align-items: center; gap: 11px; }
.fbrand__text { display: flex; flex-direction: column; }
.fbrand__text strong { font-size: 19px; font-weight: 800; letter-spacing: .06em; }
.fbrand__text em { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: var(--on-dark-2); }
.fcol__p { margin-top: 16px; font-size: 13.5px; line-height: 1.85; color: var(--on-dark-2); }
.fcol__since { margin-top: 12px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--sky); }
.fcol__t { font-size: 15.5px; color: #fff; margin-bottom: 16px; padding-bottom: 11px; border-bottom: 1px solid var(--on-dark-line); }
.fcol__list li { margin-bottom: 9px; }
.fcol__list a { font-size: 13.5px; color: var(--on-dark-2); }
.fcol__list a:hover { color: var(--sky); }
.fcontact { display: grid; grid-template-columns: 1fr; gap: 12px; }
.fcontact li { display: flex; gap: 10px; align-items: flex-start; }
.fcontact .i { color: var(--sky); flex: 0 0 auto; margin-top: 4px; }
.fcontact span { font-size: 13.5px; line-height: 1.7; color: var(--on-dark-2); }
.fcontact em { display: block; font-size: 11.5px; color: var(--on-dark-2); opacity: .75; margin-bottom: 1px; }
.fcontact a { color: var(--on-dark); }
.fcontact a:hover { color: var(--sky); }
.footer-bottom { padding-block: 16px; }
.footer-bottom__inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.footer-bottom__cp, .footer-bottom__meta { font-size: 13px; color: var(--on-dark-2); }
.footer-bottom__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer-bottom__meta a { color: var(--on-dark-2); }
.footer-bottom__meta a:hover { color: var(--sky); }
.footer-bottom__sep { color: rgba(255, 255, 255, .52); }

/* ------------------------------ 24. 移动底栏 / 回顶 ------------------------------ */
/* 桌面隐藏必须提特异性（裸选择器会被文件更靠后的基础规则反压） */
body .mobile-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--card); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(8, 39, 42, .1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-bar__i { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding-block: 9px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.mobile-bar__i .i { width: 20px; height: 20px; color: var(--brand); }
.mobile-bar__i--cta { background: var(--orange); color: #fff; }
.mobile-bar__i--cta .i { color: #fff; }

.to-top {
  position: fixed; right: 18px; bottom: 22px; z-index: 85;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--card);
  color: var(--brand); cursor: pointer; box-shadow: 0 8px 22px rgba(8, 39, 42, .14);
}
.to-top:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.to-top[hidden] { display: none; }

/* ------------------------------ 25. 入场动画（渐进增强） ------------------------------ */
.reveal { opacity: 1; transform: none; }
html.js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0ms); }
html.js-reveal .reveal.is-in { opacity: 1; transform: none; }

/* ------------------------------ 26. 响应式 ------------------------------ */
@media (max-width: 1240px) {
  .pcard-grid { grid-template-columns: repeat(3, 1fr); }
  .flow-grid { grid-template-columns: repeat(4, 1fr); }
  .case-grid { grid-template-columns: repeat(3, 1fr); }
  .prodnav { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ★ 抽屉断点统一为 1240：原先用 1100 时，1101–1240 这一段横向导航会换行，
   粘性页头被撑到 186px（吃掉 768 高屏的 1/4）；折叠改到 1240 后这一段走抽屉，页头恒定 ~120/129px。
   ⚠️ 断点值必须与 main.js 的 matchMedia 完全一致（原先 CSS 1100 / JS 1099，
   1099.5–1100 这一小段 JS 判定为「未接管」，套用到无 JS 降级样式 → 页头暴涨到 810px）。 */
@media (max-width: 1240px) {
  :root { --gut: 20px; }
  /* 抽屉断点：导航折叠 + 显示移动底栏，两处必须同一个断点 */
  .nav-toggle { display: inline-flex; order: 3; margin-left: auto; }
  .header-main { gap: 12px 22px; }
  .brand { order: 1; }
  .header-side { order: 2; margin-left: auto; }
  .nav { order: 4; flex: 1 0 100%; overflow: hidden; max-height: 0; }
  .site-header.is-collapsible .nav { max-height: 0; transition: max-height .3s var(--ease); }
  .site-header.is-collapsible.nav-open .nav { max-height: 76vh; overflow-y: auto; }
  /* 无 JS 降级：脚本未接管时导航整体展开可用，汉堡按钮隐藏 */
  .site-header:not(.is-collapsible) .nav { flex: 1 0 100%; max-height: none; }
  .site-header:not(.is-collapsible) .nav-toggle { display: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 10px; }
  .nav__list > li { flex: 0 0 auto; border-bottom: 1px solid var(--line); }
  .nav__link { padding: 13px 4px; justify-content: space-between; border-radius: 0; }
  .nav__link.is-current::after { display: none; }
  .nav__link.is-current { color: var(--orange); }
  .nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; border: 0; border-top: 1px dashed var(--line); border-radius: 0;
    box-shadow: none; padding: 6px 0 12px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 10px;
  }
  .nav__caret { display: none; }
  .nav__sub a { padding: 8px 2px; }
  .header-side .btn--line { display: none; }
  .hero__inner { grid-template-columns: 1fr; gap: 34px; }
  .hero__visual { max-width: 520px; }
  .intro { grid-template-columns: 1fr; }
  .adv-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .form-sec { grid-template-columns: 1fr; }
  .pdp { grid-template-columns: 1fr; }
  .pdp-detail { grid-template-columns: 1fr; }
  .list-layout { grid-template-columns: 1fr; }
  .art-layout { grid-template-columns: minmax(0, 1fr); }
  .art-side { position: static; }
  /* ★ law57：单栏时卡片会撑满版心（1240 视口下可用 1126px = 每行 70 汉字，远超舒适区）。
     把主栏与堆叠后的侧栏一起限宽居中，让行宽回落到 ~50 汉字，并与两栏形态保持一致。 */
  .art-main, .art-side { width: 100%; max-width: 900px; margin-inline: auto; }
  .map-block { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: repeat(2, 1fr); }
  .sec--rel-last { padding-top: var(--sec-y); }
}
@media (min-width: 1241px) {
  body .mobile-bar { display: none; }
  .topbar__addr, .topbar__hours { display: inline-flex; }
}
@media (max-width: 900px) {
  .topbar__addr { display: none; }
  .pcard-grid { grid-template-columns: repeat(2, 1fr); }
  .ncard-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-grid, .case-grid--big { grid-template-columns: repeat(2, 1fr); }
  .honor-grid { grid-template-columns: repeat(2, 1fr); }
  .faq { grid-template-columns: 1fr; }
  .flow-grid { grid-template-columns: repeat(3, 1fr); }
  .doclist { grid-template-columns: 1fr; }
  .ncard-grid--2 .ncard__in { flex-direction: column; }
  .ncard-grid--2 .ncard__media { flex: 0 0 auto; }
  .nrow__in { grid-template-columns: 60px minmax(0, 1fr) 30px; gap: 14px; }
  .nrow__cat { display: none; }
  .page-banner__stats { width: 100%; }
  .page-banner__stats li { padding: 0 18px; }
}
@media (max-width: 680px) {
  :root { --gut: 16px; --head-h: 64px; }
  .topbar { display: none; }
  .pcard-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr; }
  .ncard-grid--2, .ncard-grid--3 { grid-template-columns: 1fr; }
  .case-grid, .case-grid--big { grid-template-columns: 1fr; }
  .honor-grid { grid-template-columns: 1fr; }
  .flow-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .prodnav { grid-template-columns: repeat(2, 1fr); }
  .form__grid { grid-template-columns: 1fr; }
  .stats__list { grid-template-columns: repeat(2, 1fr); }
  .stats__i { border-right: 0; padding-right: 0; }
  .stats__i:nth-child(odd) { padding-right: 16px; border-right: 1px solid var(--on-dark-line); }
  .brand__sub { display: none; }
  .brand__name { font-size: 17px; letter-spacing: .02em; }
  .brand__mark { width: 36px; height: 36px; }
  .header-main { gap: 10px 14px; }
  .hero__card { position: static; width: auto; margin-top: 14px; }
  .hero__badge { right: 8px; top: 8px; }
  .cta-band__act { flex: 1 1 100%; }
  .cta-band__act .btn { flex: 1 1 100%; }
  .pn { grid-template-columns: 1fr; }
  .pn__mid { order: 3; }
  .pn__i--next a, .pn__i--next span { text-align: left; flex-direction: row; }
  .pn__i--next span span { text-align: left; }
  .footer-main { grid-template-columns: 1fr; gap: 26px; }
  .footer-bottom__inner { flex-direction: column; align-items: flex-start; }
  .art { padding: 20px 16px; }
  .form-card { padding: 20px 16px; }
  .pager__tip { margin-left: 0; width: 100%; }
  .page-banner__stats li { padding: 0 15px; }
  .page-banner__n { font-size: 20px; }
  .to-top { bottom: 76px; }
}

/* 宽表格在窄屏转键值堆叠（overflow-x:auto 会让列被裁掉） */
@media (max-width: 620px) {
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td { display: block; width: 100%; }
  .spec-table tr { border-bottom: 1px solid var(--line); padding: 12px 15px; }
  .spec-table tr:last-child { border-bottom: 0; }
  .spec-table th, .spec-table td { padding: 0; background: none; border: 0; }
  .spec-table th { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
  .spec-table td { margin-top: 3px; font-size: 14.5px; color: var(--ink); font-weight: 600; }
  .art__tb, .art__tb thead, .art__tb tbody, .art__tb tr, .art__tb th, .art__tb td { display: block; width: 100%; }
  .art__tb thead { display: none; }
  .art__tb tr { border-bottom: 1px solid var(--line); padding: 14px; }
  .art__tb tr:last-child { border-bottom: 0; }
  .art__tb th, .art__tb td { padding: 0; border: 0; }
  .art__tb tbody th { background: none; width: auto; font-size: 15.5px; color: var(--brand); margin-bottom: 6px; }
  .art__tb td { margin-top: 8px; }
  .art__tb td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: var(--ink-3); margin-bottom: 2px; }
}

/* ------------------------------ 27. 打印 / 减弱动画 ------------------------------ */
@media print {
  html.js-reveal .reveal { opacity: 1 !important; transform: none !important; }
  .site-header, .mobile-bar, .to-top, .cta-band, .subnav { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js-reveal .reveal, html.js-reveal .reveal.is-in { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}