/* ==========================================================================
   昊安 · 站点样式  site.css
   依赖 tokens.css
   ========================================================================== */

/* ============================== 1. Reset & Base ========================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-500);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--ink-900); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
input, textarea, select { font: inherit; }
figure { margin: 0; }
.num { font-family: var(--font-num); font-feature-settings: "tnum" 1; letter-spacing: -.01em; }
::selection { background: var(--brand-700); color: #fff; }

/* 视觉隐藏 */
.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;
}

/* ============================== 2. 布局与通用组件 ========================= */
.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--sp-20) 0; }
.section--soft { background: var(--bg-soft); }
.section--mist { background: var(--bg-mist); }
.section--brand { background: var(--brand-900); color: rgba(255,255,255,.78); }
.section--brand h2, .section--brand h3 { color: #fff; }
.section--tight { padding: var(--sp-15) 0; }

/* 区块标题 */
.sec-head { margin-bottom: var(--sp-10); }
.sec-head--center { text-align: center; }
.sec-head__eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: .18em;
  text-transform: uppercase; color: var(--brand-600); margin-bottom: var(--sp-3);
}
.sec-head__eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent-500); }
.sec-head--center .sec-head__eyebrow::after { content: ""; width: 22px; height: 2px; background: var(--accent-500); }
.sec-head__title { font-size: var(--fs-h2); letter-spacing: -.01em; }
.sec-head__sub { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-400); }
.sec-head--split {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-6); flex-wrap: wrap;
}
.sec-head--split .sec-head__sub { margin-top: var(--sp-2); }

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 50px; padding: 0 var(--sp-8);
  font-size: var(--fs-body); font-weight: var(--fw-semi); line-height: 1;
  border-radius: var(--r-sm); white-space: nowrap;
  transition: all var(--dur) var(--ease);
}
.btn--primary { background: var(--brand-700); color: #fff; box-shadow: var(--sh-brand); }
.btn--primary:hover { background: var(--brand-800); transform: translateY(-2px); color: #fff; }
.btn--accent { background: var(--accent-600); color: #fff; box-shadow: 0 10px 30px rgba(217,114,10,.24); }
.btn--accent:hover { background: var(--accent-700); transform: translateY(-2px); color: #fff; }
.btn--ghost { border: 1px solid rgba(255,255,255,.55); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }
.btn--outline { border: 1px solid var(--line); color: var(--ink-700); background: #fff; }
.btn--outline:hover { border-color: var(--brand-700); color: var(--brand-700); }
.btn--sm { height: 40px; padding: 0 var(--sp-5); font-size: var(--fs-sm); }
.btn--block { width: 100%; }
.btn__ico { width: 16px; height: 16px; flex: none; }

/* 文字链接（带箭头） */
.more { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--brand-700); }
.more svg { transition: transform var(--dur) var(--ease); }
.more:hover svg { transform: translateX(4px); }
.more--light { color: var(--brand-300); }
.more--light:hover { color: #fff; }

/* 徽章 / 标签 */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1;
  background: var(--brand-50); color: var(--brand-700);
}
.tag--accent { background: var(--accent-50); color: var(--accent-700); }
.tag--success { background: var(--success-50); color: var(--success-600); }
.tag--solid { background: var(--brand-700); color: #fff; }
.tag--ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.24); }

/* 卡片 */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: all var(--dur) var(--ease); overflow: hidden;
}
.card:hover { border-color: var(--brand-300); box-shadow: var(--sh-3); transform: translateY(-4px); }

/* --------------------------------------------------------------------------
   图片占位视觉（.ph / 首图 / 缩略图 共用）
   真实项目上线时，把对应元素替换为 <img> 或 background-image 即可，
   保持同样的尺寸比例与圆角。
   建议尺寸：首图 1920×760 / 栏目图 1200×900 / 列表缩略图 800×600 / 新闻配图 800×500
   -------------------------------------------------------------------------- */
.ph, .about__shot, .news__thumb, .ai__thumb {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 100% at 88% 6%, rgba(28,128,179,.85) 0%, rgba(28,128,179,0) 58%),
    linear-gradient(148deg, #0A3550 0%, #0A6795 64%, #16809F 100%);
}
/* 实验室网格 */
.ph::before, .about__shot::before, .news__thumb::before, .ai__thumb::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(75% 70% at 26% 24%, #000 5%, transparent 72%);
          mask-image: radial-gradient(75% 70% at 26% 24%, #000 5%, transparent 72%);
}
/* 底部品牌柱状基因（取自 Logo 视觉） */
.ph::after, .about__shot::after, .news__thumb::after, .ai__thumb::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; z-index: 2;
  background-image:
    linear-gradient(rgba(255,255,255,.20), rgba(255,255,255,.20)),
    linear-gradient(rgba(255,255,255,.20), rgba(255,255,255,.20)),
    linear-gradient(rgba(255,255,255,.20), rgba(255,255,255,.20)),
    linear-gradient(rgba(255,255,255,.20), rgba(255,255,255,.20)),
    linear-gradient(rgba(255,255,255,.20), rgba(255,255,255,.20)),
    linear-gradient(rgba(255,255,255,.20), rgba(255,255,255,.20));
  background-size: 7px 32%, 7px 54%, 7px 22%, 7px 66%, 7px 42%, 7px 28%;
  background-position: 9% 100%, 13.2% 100%, 17.4% 100%, 21.6% 100%, 25.8% 100%, 30% 100%;
  background-repeat: no-repeat;
}
/* 缩略图版本：柱状更小、更克制 */
.news__thumb::after, .ai__thumb::after {
  background-size: 5px 26%, 5px 44%, 5px 18%, 5px 54%, 5px 34%, 5px 22%;
  background-position: 7% 100%, 10.6% 100%, 14.2% 100%, 17.8% 100%, 21.4% 100%, 25% 100%;
}
/* 新闻配图三色微差，避免整排重复感 */
.news__thumb { background: radial-gradient(120% 100% at 88% 6%, rgba(28,128,179,.85) 0%, rgba(28,128,179,0) 58%), linear-gradient(148deg, #0A3550 0%, #0A6795 64%, #16809F 100%); }
.news:nth-child(2) .news__thumb { background: radial-gradient(120% 100% at 82% 10%, rgba(240,138,29,.30) 0%, rgba(240,138,29,0) 52%), linear-gradient(148deg, #0C3A52 0%, #12688F 66%, #2A8FB4 100%); }
.news:nth-child(3) .news__thumb { background: radial-gradient(120% 100% at 90% 4%, rgba(21,154,107,.32) 0%, rgba(21,154,107,0) 54%), linear-gradient(148deg, #08384F 0%, #0E6390 62%, #1E7FA8 100%); }

/* ============================== 3. 顶部信息条 ============================ */
.topbar {
  background: var(--brand-900); color: rgba(255,255,255,.72);
  font-size: var(--fs-xs); height: var(--topbar-h); line-height: var(--topbar-h);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.topbar__l { display: flex; align-items: center; gap: var(--sp-5); min-width: 0; }
.topbar__l span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.topbar__l span:first-child { overflow: hidden; text-overflow: ellipsis; }
.topbar__r { display: flex; align-items: center; gap: var(--sp-4); }
.topbar a:hover { color: #fff; }
.topbar__divider { width: 1px; height: 12px; background: rgba(255,255,255,.2); }
.topbar svg { width: 13px; height: 13px; opacity: .8; }

/* ============================== 4. 主导航 ================================ */
.header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header__inner { display: flex; align-items: center; gap: var(--sp-8); height: var(--header-h); }

.brand { display: flex; align-items: center; gap: var(--sp-3); flex: none; min-width: 0; }
.brand__mark { width: 42px; height: 42px; flex: none; }
.brand__txt { line-height: 1.2; min-width: 0; }
.brand__name { font-size: 19px; font-weight: var(--fw-bold); color: var(--ink-900); letter-spacing: .01em; }
.brand__en {
  font-size: 9.5px; font-family: var(--font-num); letter-spacing: .09em;
  color: var(--ink-400); text-transform: uppercase; font-weight: var(--fw-medium);
}

.nav { margin-left: auto; min-width: 0; }
.nav__list { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: nowrap; }
/* ⚠️ flex: none 必须保留。
   flex item 默认 flex-shrink:1，一级栏目较多时每一项都会被压缩到内容宽度以下，
   中文随之折行到第二行；而 .nav__link 的高度与行高都是固定的 --header-h，
   折下去的那一行就被裁掉 —— 表现为「导航项只剩第一个字」（首页→首、新闻→新）。
   同理 nav__link 需要 white-space:nowrap 兜底。 */
.nav__item { position: relative; flex: none; }
.nav__link {
  display: block; padding: 0 var(--sp-4); height: var(--header-h); line-height: var(--header-h);
  font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--ink-700);
  white-space: nowrap;
}
.nav__link::after {
  content: ""; position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: 20px;
  height: 2px; background: var(--brand-700); transform: scaleX(0);
  transform-origin: left; transition: transform var(--dur) var(--ease);
}
.nav__item:hover > .nav__link, .nav__item.is-active > .nav__link { color: var(--brand-700); }
.nav__item:hover > .nav__link::after, .nav__item.is-active > .nav__link::after { transform: scaleX(1); }

/* 二级下拉 */
.nav__sub {
  position: absolute; top: 100%; left: 0; min-width: 168px;
  background: #fff; border: 1px solid var(--line); border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: var(--sh-3); padding: var(--sp-2) 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all var(--dur) var(--ease);
}
.nav__item:hover .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__sub a {
  display: block; padding: var(--sp-3) var(--sp-5); font-size: var(--fs-sm); color: var(--ink-500);
}
.nav__sub a:hover { background: var(--brand-50); color: var(--brand-700); }

.header__act { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--r-sm); color: var(--ink-500); transition: all var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--brand-50); color: var(--brand-700); }
.icon-btn svg { width: 19px; height: 19px; }

/* 汉堡 */
.burger { display: none; width: 42px; height: 42px; place-items: center; border-radius: var(--r-sm); }
.burger span { display: block; width: 20px; height: 2px; background: var(--ink-800); border-radius: 2px; position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px;
  background: var(--ink-800); border-radius: 2px; transition: transform var(--dur) var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }

/* 移动端抽屉 */
.drawer {
  position: fixed; inset: 0; z-index: 120; display: none;
}
.drawer.is-open { display: block; }
.drawer__mask { position: absolute; inset: 0; background: rgba(13,27,36,.5); }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 84%; max-width: 340px;
  background: #fff; padding: var(--sp-5); overflow-y: auto;
  animation: slideIn var(--dur) var(--ease);
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.drawer__nav { padding: var(--sp-2) 0; }
.drawer__nav > li { border-bottom: 1px solid var(--line-soft); }
.drawer__nav > li > a { display: block; padding: var(--sp-4) var(--sp-1); font-size: 17px; font-weight: var(--fw-semi); color: var(--ink-800); }
.drawer__sub { padding: 0 0 var(--sp-3) var(--sp-4); }
.drawer__sub a { display: block; padding: var(--sp-2) 0; font-size: var(--fs-sm); color: var(--ink-400); }
.drawer__cta { margin-top: var(--sp-6); display: grid; gap: var(--sp-3); }

/* ============================== 5. 首屏 Hero ============================= */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #002F4A 0%, #005281 52%, #0A6795 100%);
  min-height: 560px; display: flex; align-items: center;
  padding: var(--sp-20) 0 var(--sp-25);
}
/* 工业 / 实验室意象的几何底纹 */
.hero__grid {
  position: absolute; inset: 0; opacity: .5; 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: 62px 62px;
  mask-image: radial-gradient(120% 90% at 78% 30%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 78% 30%, #000 20%, transparent 78%);
}
.hero__glow {
  position: absolute; width: 720px; height: 720px; right: -160px; top: -220px;
  background: radial-gradient(circle, rgba(28,128,179,.55) 0%, rgba(28,128,179,0) 68%);
  pointer-events: none;
}
.hero__glow--2 {
  width: 460px; height: 460px; right: 22%; bottom: -260px; top: auto;
  background: radial-gradient(circle, rgba(240,138,29,.24) 0%, rgba(240,138,29,0) 70%);
}
.hero__inner { position: relative; z-index: 2; max-width: 760px; }

/* 首屏右侧抽象线稿插画 */
.hero__art {
  position: absolute; right: -40px; top: 50%; transform: translateY(-50%);
  width: 520px; height: 520px; pointer-events: none; z-index: 1;
}
.hero__badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 34px; padding: 0 var(--sp-4); border-radius: var(--r-pill);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: .04em;
}
.hero__badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-500); box-shadow: 0 0 0 3px rgba(240,138,29,.28); }
.hero__title {
  margin: var(--sp-6) 0 var(--sp-5);
  font-size: var(--fs-display); line-height: 1.22; color: #fff;
  font-weight: var(--fw-bold); letter-spacing: -.015em;
}
.hero__title em { font-style: normal; color: var(--accent-500); }
.hero__title-line { display: block; }
.hero__desc { font-size: 17px; line-height: 1.8; color: rgba(255,255,255,.76); max-width: 620px; }
.hero__actions { display: flex; gap: var(--sp-4); margin-top: var(--sp-8); flex-wrap: wrap; }
.hero__quals { display: flex; gap: var(--sp-6); margin-top: var(--sp-10); flex-wrap: wrap; }
.hero__qual { display: flex; align-items: center; gap: var(--sp-3); color: rgba(255,255,255,.8); font-size: var(--fs-sm); }
.hero__qual svg { width: 20px; height: 20px; color: var(--accent-500); flex: none; }

/* ============================== 6. 数据条 ================================ */
.stats { position: relative; z-index: 3; margin-top: calc(var(--sp-25) * -1 + var(--sp-8)); }
.stats__box {
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-4);
  display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden;
}
.stat { padding: var(--sp-8) var(--sp-6); text-align: center; position: relative; }
.stat + .stat::before {
  content: ""; position: absolute; left: 0; top: 26%; bottom: 26%; width: 1px; background: var(--line);
}
.stat__num { font-family: var(--font-num); font-size: 40px; font-weight: var(--fw-bold); color: var(--brand-700); line-height: 1; letter-spacing: -.02em; }
.stat__num small { font-size: 16px; font-weight: var(--fw-semi); margin-left: 3px; }
.stat__label { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-400); }

/* ============================== 7. 业务中心 ==============================
   布局：左侧文章首图轮播 + 右侧文章文字列表，两侧由 site.js::initBizSplit 联动。
   ——— 左侧 .bizsplit__view ———
       高度由 grid 行高决定（右列表内容高度），最小 420px；图按 object-fit:cover 裁切。
       文章未上传首图时，.is-ph 走品牌渐变占位（沿用 .ph 的网格 + Logo 柱状基因）。
   ——— 右侧 .bizsplit__list ———
       每条＝标题(1行省略) + 摘要(1行省略) + 日期；.is-active 为当前项，深蓝底白字。 */
/* ⚠️ 列宽必须写 minmax(0, …)：右侧条目用了 white-space:nowrap 做单行省略，
   而 1fr 的最小尺寸是 min-content（＝整行文本宽度），会把列撑到几千 px 造成横向溢出。 */
.bizsplit {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--sp-6); align-items: stretch;
}

/* ---------- 左：轮播 ---------- */
.bizsplit__view {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: var(--brand-900); min-height: 320px; box-shadow: var(--sh-2);
}
.bizsplit__track { position: absolute; inset: 0; }
.bizsplit__slide {
  position: absolute; inset: 0; display: block;
  opacity: 0; visibility: hidden; transition: opacity .55s var(--ease), visibility .55s var(--ease);
}
.bizsplit__slide.is-active { opacity: 1; visibility: visible; }

.bizsplit__media { position: absolute; inset: 0; display: block; overflow: hidden; }
.bizsplit__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.01); transition: transform 6.5s linear;
}
.bizsplit__slide.is-active .bizsplit__media img { transform: scale(1.08); }
/* 无首图时的品牌渐变占位：实验室网格 + 底部 Logo 柱状基因（与 .ph 同一套视觉） */
.bizsplit__media.is-ph {
  background:
    radial-gradient(120% 100% at 88% 6%, rgba(28,128,179,.85) 0%, rgba(28,128,179,0) 58%),
    linear-gradient(148deg, #0A3550 0%, #0A6795 64%, #16809F 100%);
}
.bizsplit__media.is-ph::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(75% 70% at 26% 24%, #000 5%, transparent 72%);
          mask-image: radial-gradient(75% 70% at 26% 24%, #000 5%, transparent 72%);
}
.bizsplit__media.is-ph::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; z-index: 2;
  background-image:
    linear-gradient(rgba(255,255,255,.20), rgba(255,255,255,.20)),
    linear-gradient(rgba(255,255,255,.20), rgba(255,255,255,.20)),
    linear-gradient(rgba(255,255,255,.20), rgba(255,255,255,.20)),
    linear-gradient(rgba(255,255,255,.20), rgba(255,255,255,.20)),
    linear-gradient(rgba(255,255,255,.20), rgba(255,255,255,.20)),
    linear-gradient(rgba(255,255,255,.20), rgba(255,255,255,.20));
  background-size: 7px 32%, 7px 54%, 7px 22%, 7px 66%, 7px 42%, 7px 28%;
  background-position: 9% 100%, 13.2% 100%, 17.4% 100%, 21.6% 100%, 25.8% 100%, 30% 100%;
  background-repeat: no-repeat;
}

/* 底部文案遮罩 */
.bizsplit__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: var(--sp-20) var(--sp-8) var(--sp-8);
  background: linear-gradient(to top,
    rgba(0,47,74,.94) 0%, rgba(0,47,74,.72) 34%, rgba(0,47,74,.30) 66%, rgba(0,47,74,0) 100%);
}
.bizsplit__cap-title {
  display: block; color: #fff; font-size: var(--fs-h3); font-weight: var(--fw-semi);
  line-height: var(--lh-tight); letter-spacing: .01em;
}
.bizsplit__cap-date {
  display: block; margin-top: var(--sp-3); color: rgba(255,255,255,.74);
  font-size: var(--fs-xs); letter-spacing: .08em;
}

/* 左右箭头（悬停显现；触屏在断点内常显） */
.bizsplit__arrow {
  position: absolute; top: 50%; z-index: 6; margin-top: -21px;
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer; color: #fff;
  border: 1px solid rgba(255,255,255,.3); background: rgba(0,47,74,.42);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: all var(--dur) var(--ease);
}
.bizsplit__view:hover .bizsplit__arrow,
.bizsplit__arrow:focus-visible { opacity: 1; }
.bizsplit__arrow:hover { background: var(--accent-500); border-color: transparent; }
.bizsplit__arrow svg { width: 20px; height: 20px; }
.bizsplit__arrow--prev { left: var(--sp-4); }
.bizsplit__arrow--prev svg { transform: rotate(180deg); }
.bizsplit__arrow--next { right: var(--sp-4); }

/* 圆点指示器 */
.bizsplit__dots { position: absolute; right: var(--sp-8); bottom: var(--sp-8); z-index: 6; display: flex; gap: 7px; }
.bizsplit__dot {
  width: 8px; height: 8px; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--r-pill); background: rgba(255,255,255,.42);
  transition: all var(--dur) var(--ease);
}
.bizsplit__dot:hover { background: rgba(255,255,255,.72); }
.bizsplit__dot.is-active { width: 22px; background: #fff; }

/* ---------- 右：文字列表（整体一个面板，条目间细分隔线，当前项为内缩深蓝块） ---------- */
.bizsplit__list {
  display: flex; flex-direction: column;
  margin: 0; padding: var(--sp-1) 0; list-style: none; min-width: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.bizsplit__item {
  flex: 0 0 auto; min-width: 0; position: relative;
  transition: background var(--dur) var(--ease);
}
/* 分隔线画在条目顶部；当前项样式切换时隐藏相邻线，避免与色块打架 */
.bizsplit__item + .bizsplit__item::before {
  content: ""; position: absolute; left: var(--sp-5); right: var(--sp-5); top: 0;
  height: 1px; background: var(--line-soft); transition: opacity var(--dur) var(--ease);
}
.bizsplit__item:hover { background: var(--bg-mist); }
.bizsplit__link { display: block; padding: 11px var(--sp-5); position: relative; }
.bizsplit__name {
  font-size: 15px; font-weight: var(--fw-semi); color: var(--ink-900);
  line-height: 1.4; transition: color var(--dur) var(--ease);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bizsplit__desc {
  margin-top: 4px; font-size: 13px; color: var(--ink-400); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.bizsplit__date {
  display: block; margin-top: 4px; font-size: var(--fs-xs);
  color: var(--ink-300); letter-spacing: .04em; transition: color var(--dur) var(--ease);
}
/* 当前项：内缩的深蓝圆角块，与左侧轮播同一步调 */
.bizsplit__item.is-active {
  margin: 3px 5px; border-radius: var(--r-md);
  background: linear-gradient(126deg, var(--brand-800) 0%, var(--brand-600) 100%);
  box-shadow: var(--sh-brand);
}
.bizsplit__item.is-active::before,
.bizsplit__item.is-active + .bizsplit__item::before { opacity: 0; }
.bizsplit__item.is-active .bizsplit__name { color: #fff; }
.bizsplit__item.is-active .bizsplit__desc { color: rgba(255,255,255,.76); }
.bizsplit__item.is-active .bizsplit__date { color: rgba(255,255,255,.58); }

/* 空数据占位（栏目录入文章前） */
.bizsplit.is-empty { opacity: .9; }
.bizsplit.is-empty .bizsplit__item { display: flex; align-items: center; }

/* ============================== 8. 关于 / 资质 =========================== */
.about { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-15); align-items: center; }
.about__media { position: relative; }
.about__shot { border-radius: var(--r-lg); aspect-ratio: 4/3; }
.about__shot-tag {
  position: absolute; left: var(--sp-6); bottom: var(--sp-6); z-index: 2;
  display: flex; align-items: center; gap: var(--sp-3); color: #fff;
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.about__shot-tag svg { width: 22px; height: 22px; color: var(--accent-500); }
/* 悬浮资质卡 */
.about__float {
  position: absolute; right: -22px; top: var(--sp-8); z-index: 3;
  background: #fff; border-radius: var(--r-md); box-shadow: var(--sh-3);
  padding: var(--sp-5) var(--sp-6); min-width: 168px;
  border-left: 3px solid var(--accent-500);
}
.about__float b { display: block; font-family: var(--font-num); font-size: 30px; font-weight: var(--fw-bold); color: var(--brand-700); line-height: 1.1; }
.about__float span { font-size: var(--fs-xs); color: var(--ink-400); }

.about__body h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-5); letter-spacing: -.01em; }
.about__lead { font-size: 15px; line-height: 1.9; color: var(--ink-500); }
.about__lead p + p { margin-top: var(--sp-4); }
.about__points { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-6); margin: var(--sp-8) 0; }
.about__point { display: flex; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-700); }
.about__point svg { width: 18px; height: 18px; color: var(--success-600); flex: none; margin-top: 3px; }

/* 资质证书卡 */
.qual-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.qual {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-8); position: relative; overflow: hidden;
  transition: all var(--dur) var(--ease);
}
.qual:hover { box-shadow: var(--sh-3); transform: translateY(-4px); }
.qual__seal {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-700); margin-bottom: var(--sp-5);
}
.qual__seal svg { width: 22px; height: 22px; }
.qual__title { font-size: var(--fs-h4); margin-bottom: var(--sp-4); }
.qual__rows { font-size: var(--fs-sm); }
.qual__row { display: flex; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px dashed var(--line); }
.qual__row:last-child { border-bottom: 0; }
.qual__k { color: var(--ink-400); flex: none; width: 62px; }
.qual__v { color: var(--ink-700); font-weight: var(--fw-medium); word-break: break-all; }

/* ============================== 9. 项目公示 ============================== */
.pj { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.pj__head, .pj__row { display: grid; grid-template-columns: 118px 1fr 200px 118px; gap: var(--sp-5); align-items: center; padding: var(--sp-5) var(--sp-6); }
.pj__head {
  background: var(--brand-50); border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--brand-800);
}
.pj__row { border-bottom: 1px solid var(--line-soft); transition: background var(--dur) var(--ease); }
.pj__row:last-child { border-bottom: 0; }
.pj__row:hover { background: var(--bg-mist); }
.pj__no { font-family: var(--font-num); font-size: var(--fs-sm); color: var(--ink-300); }
.pj__title { font-size: 15px; font-weight: var(--fw-medium); color: var(--ink-800); }
.pj__row:hover .pj__title { color: var(--brand-700); }
.pj__owner { font-size: var(--fs-sm); color: var(--ink-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj__date { font-family: var(--font-num); font-size: var(--fs-sm); color: var(--ink-400); }

/* ============================== 10. 动态资讯 ============================= */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.news { display: flex; flex-direction: column; }
.news__thumb { aspect-ratio: 16/10; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.news__cat { position: absolute; left: var(--sp-4); top: var(--sp-4); z-index: 4; }

/* 列表缩略图循环三色，避免整列重复感 */
.alist > .ai:nth-child(3n+2) .ai__thumb { background: radial-gradient(120% 100% at 82% 10%, rgba(240,138,29,.30) 0%, rgba(240,138,29,0) 52%), linear-gradient(148deg, #0C3A52 0%, #12688F 66%, #2A8FB4 100%); }
.alist > .ai:nth-child(3n+3) .ai__thumb { background: radial-gradient(120% 100% at 90% 4%, rgba(21,154,107,.32) 0%, rgba(21,154,107,0) 54%), linear-gradient(148deg, #08384F 0%, #0E6390 62%, #1E7FA8 100%); }
.news__body { padding: var(--sp-6); display: flex; flex-direction: column; flex: 1; }
.news__date { font-family: var(--font-num); font-size: var(--fs-xs); color: var(--ink-300); letter-spacing: .04em; }
.news__title {
  margin: var(--sp-3) 0; font-size: var(--fs-h4); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news:hover .news__title { color: var(--brand-700); }
.news__desc {
  font-size: var(--fs-sm); color: var(--ink-400); line-height: 1.75; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ============================== 11. CTA 行动区 =========================== */
.cta { background: linear-gradient(120deg, var(--brand-900) 0%, var(--brand-700) 62%, var(--brand-600) 100%); position: relative; overflow: hidden; }
.cta::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 88% 20%, rgba(255,255,255,.09) 0%, transparent 46%);
}
.cta__inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); flex-wrap: wrap; }
.cta__title { font-size: 30px; color: #fff; letter-spacing: -.01em; }
.cta__sub { margin-top: var(--sp-3); font-size: var(--fs-sm); color: rgba(255,255,255,.68); }
.cta__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.cta__phone { display: flex; align-items: center; gap: var(--sp-3); color: #fff; }
.cta__phone svg { width: 28px; height: 28px; color: var(--accent-500); flex: none; }
.cta__phone b { font-family: var(--font-num); font-size: 27px; font-weight: var(--fw-bold); letter-spacing: .01em; color: #fff; }
.cta__phone span > span { display: block; font-size: var(--fs-xs); color: rgba(255,255,255,.62); font-weight: var(--fw-normal); }

/* ============================== 12. 页脚 ================================= */
.footer { background: #08222F; color: rgba(255,255,255,.6); font-size: var(--fs-sm); padding: var(--sp-15) 0 0; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--sp-10); padding-bottom: var(--sp-12); }
.footer__brand { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.footer__brand .brand__name { color: #fff; font-size: 17px; }
.footer__brand .brand__en { color: rgba(255,255,255,.34); }
.footer__about { line-height: 1.85; max-width: 320px; }
.footer h4 { color: #fff; font-size: var(--fs-body); font-weight: var(--fw-semi); margin-bottom: var(--sp-5); }
.footer__links li { margin-bottom: var(--sp-3); }
.footer__links a:hover { color: #fff; }
.footer__contact li { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4); line-height: 1.7; }
.footer__contact svg { width: 16px; height: 16px; color: var(--brand-300); flex: none; margin-top: 4px; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding: var(--sp-5) 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap;
  font-size: var(--fs-xs); color: rgba(255,255,255,.42);
}
.footer__bottom a:hover { color: #fff; }

/* 回到顶部 */
.totop {
  position: fixed; right: var(--sp-6); bottom: 96px; z-index: 80;
  width: 46px; height: 46px; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2);
  display: grid; place-items: center; color: var(--ink-500);
  opacity: 0; visibility: hidden; transition: all var(--dur) var(--ease);
}
.totop.is-show { opacity: 1; visibility: visible; }
.totop:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.totop svg { width: 18px; height: 18px; }

/* 手机底部快捷条 */
.mobar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -4px 18px rgba(13,27,36,.08);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobar__list { display: grid; grid-template-columns: repeat(4, 1fr); }
.mobar__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: var(--sp-3) 0; font-size: 11px; color: var(--ink-500);
}
.mobar__item svg { width: 21px; height: 21px; }
.mobar__item.is-primary { color: var(--brand-700); font-weight: var(--fw-semi); }
.mobar__item.is-accent { background: var(--brand-700); color: #fff; }

/* ============================== 13. 内页通用 ============================= */
.page-hero {
  background: linear-gradient(120deg, var(--brand-900), var(--brand-700) 70%, var(--brand-600));
  padding: var(--sp-12) 0 var(--sp-10); position: relative; overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(100% 100% at 82% 0%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(100% 100% at 82% 0%, #000, transparent 70%);
}
.page-hero__inner { position: relative; z-index: 2; }
.page-hero__title { font-size: 36px; color: #fff; letter-spacing: -.01em; }
.page-hero__sub { margin-top: var(--sp-3); font-size: var(--fs-sm); color: rgba(255,255,255,.66); }

.crumb { background: var(--bg-soft); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.crumb__list { display: flex; align-items: center; gap: var(--sp-3); height: 50px; color: var(--ink-400); overflow-x: auto; white-space: nowrap; }
.crumb__list a:hover { color: var(--brand-700); }
.crumb__sep { color: var(--ink-300); }
.crumb__current { color: var(--ink-700); font-weight: var(--fw-medium); }

/* 侧栏 + 内容 */
.layout { display: grid; grid-template-columns: 264px 1fr; gap: var(--sp-10); align-items: start; }
.side { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
.side__box { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--sp-6); }
.side__title {
  padding: var(--sp-5) var(--sp-6); background: var(--brand-700); color: #fff;
  font-size: 17px; font-weight: var(--fw-semi);
  display: flex; align-items: center; justify-content: space-between;
}
.side__title svg { width: 16px; height: 16px; opacity: .7; }
.side__nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-6); font-size: 15px; color: var(--ink-700);
  border-bottom: 1px solid var(--line-soft); position: relative;
}
.side__nav li:last-child a { border-bottom: 0; }
.side__nav a::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent-500); transform: scaleY(0); transition: transform var(--dur) var(--ease);
}
.side__nav a:hover { background: var(--brand-50); color: var(--brand-700); }
.side__nav a.is-active { background: var(--brand-50); color: var(--brand-700); font-weight: var(--fw-semi); }
.side__nav a.is-active::before { transform: scaleY(1); }
.side__nav a svg { width: 14px; height: 14px; color: var(--ink-300); }
.side__contact { padding: var(--sp-6); }
.side__contact p { font-size: var(--fs-xs); color: var(--ink-400); }
.side__contact b { display: block; font-family: var(--font-num); font-size: 21px; color: var(--brand-700); margin: var(--sp-2) 0 var(--sp-5); }

/* 筛选条 */
.filter {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-6); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: var(--sp-6);
  font-size: var(--fs-sm);
}
.filter__label { color: var(--ink-400); flex: none; }
.filter__opts { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.filter__opt { padding: 5px 14px; border-radius: var(--r-sm); color: var(--ink-500); }
.filter__opt:hover { background: #fff; color: var(--brand-700); }
.filter__opt.is-active { background: var(--brand-700); color: #fff; }
.filter__search { margin-left: auto; display: flex; gap: var(--sp-2); }
.filter__search input {
  height: 38px; padding: 0 var(--sp-4); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: var(--fs-sm); width: 190px; outline: none;
  transition: border-color var(--dur) var(--ease);
}
.filter__search input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(0,82,129,.08); }

/* 列表（图文左右） */
.alist { display: grid; gap: var(--sp-5); }
.ai {
  display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-6);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-5); transition: all var(--dur) var(--ease);
}
.ai:hover { box-shadow: var(--sh-3); border-color: var(--brand-100); transform: translateY(-2px); }
.ai__thumb { aspect-ratio: 4/3; border-radius: var(--r-md); }
.ai__body { display: flex; flex-direction: column; padding: var(--sp-2) 0; min-width: 0; }
.ai__title { font-size: var(--fs-h4); line-height: 1.5; }
.ai:hover .ai__title { color: var(--brand-700); }
.ai__desc {
  margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-400); line-height: 1.75; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ai__foot { display: flex; align-items: center; gap: var(--sp-5); padding-top: var(--sp-4); font-size: var(--fs-xs); color: var(--ink-300); font-family: var(--font-num); }

/* 纯文字列表（新闻/公示） */
.tlist { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.ti { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-6); border-bottom: 1px solid var(--line-soft); transition: all var(--dur) var(--ease); }
.ti:last-child { border-bottom: 0; }
.ti:hover { background: var(--bg-mist); }
.ti:hover .ti__title { color: var(--brand-700); }
.ti__date {
  flex: none; width: 68px; text-align: center; border-right: 1px solid var(--line); padding-right: var(--sp-5);
}
.ti__d { font-family: var(--font-num); font-size: 26px; font-weight: var(--fw-bold); color: var(--brand-700); line-height: 1.15; }
.ti__m { font-size: var(--fs-xs); color: var(--ink-400); }
.ti__body { flex: 1; min-width: 0; }
.ti__title { font-size: 17px; font-weight: var(--fw-medium); color: var(--ink-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ti__desc { margin-top: 6px; font-size: var(--fs-sm); color: var(--ink-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ti__arrow { flex: none; color: var(--ink-300); transition: all var(--dur) var(--ease); }
.ti:hover .ti__arrow { color: var(--brand-700); transform: translateX(4px); }

/* 分页 */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-10); flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 40px; height: 40px; padding: 0 var(--sp-3); border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: #fff; color: var(--ink-500);
  font-size: var(--fs-sm); font-family: var(--font-num); transition: all var(--dur) var(--ease);
}
.pager a:hover { border-color: var(--brand-700); color: var(--brand-700); }
.pager .is-active { background: var(--brand-700); border-color: var(--brand-700); color: #fff; font-weight: var(--fw-semi); }
.pager .is-disabled { color: var(--ink-300); background: var(--bg-soft); cursor: not-allowed; }
.pager__info { margin-left: var(--sp-4); font-size: var(--fs-sm); color: var(--ink-400); font-family: var(--font-num); }

/* ============================== 14. 详情页 ============================= */
.article { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-10); }
.article__head { padding-bottom: var(--sp-6); border-bottom: 1px solid var(--line); }
.article__title { font-size: 28px; line-height: 1.45; letter-spacing: -.01em; }
.article__meta {
  margin-top: var(--sp-5); display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--ink-400); font-family: var(--font-num);
}
.article__meta span { display: inline-flex; align-items: center; gap: 5px; }
.article__meta svg { width: 14px; height: 14px; }

/* 正文排版 */
.prose { padding: var(--sp-8) 0; font-size: 16px; line-height: 2; color: var(--ink-700); }
.prose > * + * { margin-top: var(--sp-5); }
.prose p { text-align: justify; }
.prose h2 { font-size: 21px; margin-top: var(--sp-10); padding-left: var(--sp-4); border-left: 3px solid var(--brand-700); line-height: 1.5; }
.prose h3 { font-size: 18px; margin-top: var(--sp-8); }
.prose strong { color: var(--ink-900); }
.prose a { color: var(--brand-700); border-bottom: 1px solid var(--brand-300); }
.prose ul, .prose ol { padding-left: var(--sp-6); }
.prose ul { list-style: none; }
.prose ul li { position: relative; padding-left: var(--sp-5); margin-bottom: var(--sp-3); }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: 13px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--brand-500);
}
.prose ol { list-style: decimal; }
.prose ol li { margin-bottom: var(--sp-3); padding-left: 6px; }
.prose ol li::marker { color: var(--brand-700); font-weight: var(--fw-semi); }
.prose blockquote {
  background: var(--brand-50); border-left: 3px solid var(--brand-700);
  padding: var(--sp-5) var(--sp-6); border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--ink-700); font-size: 15px;
}
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th, .prose td { border: 1px solid var(--line); padding: var(--sp-3) var(--sp-4); text-align: left; }
.prose th { background: var(--brand-50); color: var(--brand-800); font-weight: var(--fw-semi); }
.prose img { border-radius: var(--r-md); margin: var(--sp-6) auto; }

/* 上一篇/下一篇 */
.pager-nav { display: grid; gap: var(--sp-3); padding-top: var(--sp-8); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.pager-nav a { display: flex; gap: var(--sp-3); color: var(--ink-500); }
.pager-nav a:hover { color: var(--brand-700); }
.pager-nav b { color: var(--ink-400); font-weight: var(--fw-normal); flex: none; }

/* 附件下载 */
.files { margin-top: var(--sp-8); padding: var(--sp-6); background: var(--bg-soft); border-radius: var(--r-lg); }
.files h4 { font-size: var(--fs-body); margin-bottom: var(--sp-4); display: flex; align-items: center; gap: var(--sp-2); }
.files a {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: var(--fs-sm); margin-bottom: var(--sp-2); color: var(--ink-700);
}
.files a:hover { border-color: var(--brand-500); color: var(--brand-700); }

/* 相关推荐 */
.related { margin-top: var(--sp-12); }
.related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.rel { padding: var(--sp-5) var(--sp-6); }
.rel__date { font-family: var(--font-num); font-size: var(--fs-xs); color: var(--ink-300); }
.rel__title { margin-top: var(--sp-2); font-size: 15px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ============================== 15. 表单 / 在线留言 ====================== */
.layout--form { grid-template-columns: 1fr 336px; }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-10); }
.form-card__head { padding-bottom: var(--sp-6); margin-bottom: var(--sp-8); border-bottom: 1px solid var(--line); }
.form-card__head h2 { font-size: var(--fs-h3); }
.form-card__head p { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-400); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field__label { display: flex; align-items: center; gap: 5px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-700); }
.field__label .req { color: var(--danger-600); }
.field__label .hint { margin-left: auto; font-size: var(--fs-xs); font-weight: var(--fw-normal); color: var(--ink-300); }

.input, .select, .textarea {
  width: 100%; height: 48px; padding: 0 var(--sp-4);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink-700); font-size: var(--fs-body); outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-300); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--brand-300); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(0,82,129,.09);
}
.textarea { height: auto; min-height: 148px; padding: var(--sp-4); line-height: 1.8; resize: vertical; }
.select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238496A4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.is-error { border-color: var(--danger-600) !important; box-shadow: 0 0 0 3px rgba(192,57,43,.08); }
.field__err { display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--danger-600); }
.field__err svg { width: 13px; height: 13px; flex: none; }

/* 复选 / 单选 */
.check { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); line-height: 1.75; color: var(--ink-500); cursor: pointer; }
.check > input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 18px; height: 18px; margin: 2px 0 0; position: relative;
  background: #fff; border: 1.5px solid var(--ink-300); border-radius: var(--r-xs);
  cursor: pointer; transition: all var(--dur) var(--ease);
}
.check > input:hover { border-color: var(--brand-500); }
.check > input:checked { background: var(--brand-700); border-color: var(--brand-700); }
.check > input:checked::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 9px; border: 2px solid #fff; border-top: 0; border-left: 0;
  transform: rotate(42deg);
}
.check > input:focus-visible { box-shadow: 0 0 0 3px rgba(0,82,129,.14); }
.check a { color: var(--brand-700); }

/* 标签式多选 */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; height: 38px; padding: 0 var(--sp-5);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: var(--fs-sm); color: var(--ink-500); transition: all var(--dur) var(--ease);
}
.chip input:hover + span { border-color: var(--brand-300); color: var(--brand-700); }
.chip input:checked + span { background: var(--brand-50); border-color: var(--brand-500); color: var(--brand-700); font-weight: var(--fw-semi); }
.chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(0,82,129,.14); }

/* 文件上传 */
.upload {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5); background: var(--bg-mist);
  border: 1px dashed var(--line); border-radius: var(--r-md);
}
.upload svg { width: 22px; height: 22px; color: var(--brand-500); flex: none; }
.upload__txt { font-size: var(--fs-sm); color: var(--ink-400); line-height: 1.6; min-width: 0; }
.upload__txt b { color: var(--ink-700); font-weight: var(--fw-medium); }
.upload .btn { margin-left: auto; flex: none; }

/* 验证码 */
.captcha { display: flex; gap: var(--sp-3); }
.captcha .input { flex: 1; }
.captcha__img {
  flex: none; width: 122px; height: 48px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(115deg, var(--brand-50), var(--brand-100));
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--font-num); font-size: 19px; font-weight: var(--fw-bold);
  color: var(--brand-700); letter-spacing: .16em; text-indent: .16em;
  white-space: nowrap; overflow: hidden;
  user-select: none; cursor: pointer;
}

/* 提示条 */
.alert { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.75; }
.alert svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.alert--success { background: var(--success-50); color: var(--success-600); }
.alert--error { background: #FDEDEB; color: var(--danger-600); }
.alert--info { background: var(--brand-50); color: var(--brand-700); }
.alert b { font-weight: var(--fw-semi); }

.form__foot {
  display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap;
  margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--line);
}
.form__foot .btn { min-width: 172px; }
.form__foot p { font-size: var(--fs-xs); color: var(--ink-400); line-height: 1.7; }

/* 联系方式卡 */
.cinfo { display: grid; gap: var(--sp-4); }
.cinfo--3 { grid-template-columns: repeat(3, 1fr); }
.cinfo__item {
  display: flex; gap: var(--sp-4); padding: var(--sp-5);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: all var(--dur) var(--ease);
}
.cinfo__item:hover { border-color: var(--brand-300); box-shadow: var(--sh-2); }
.cinfo__ico {
  flex: none; width: 42px; height: 42px; border-radius: var(--r-md);
  display: grid; place-items: center; background: var(--brand-50); color: var(--brand-700);
}
.cinfo__ico svg { width: 20px; height: 20px; }
.cinfo__k { font-size: var(--fs-xs); color: var(--ink-400); }
.cinfo__v { margin-top: 3px; font-size: 15px; font-weight: var(--fw-semi); color: var(--ink-800); line-height: 1.6; word-break: break-word; }
.cinfo__v--num { font-family: var(--font-num); font-size: 19px; color: var(--brand-700); letter-spacing: .01em; }
.cinfo__item--brand { background: linear-gradient(140deg, var(--brand-800), var(--brand-600)); border-color: transparent; }
.cinfo__item--brand .cinfo__k { color: rgba(255,255,255,.62); }
.cinfo__item--brand .cinfo__v { color: #fff; }
.cinfo__item--brand .cinfo__v--num { color: #fff; }
.cinfo__item--brand .cinfo__ico { background: rgba(255,255,255,.15); color: #fff; }
.cinfo__foot { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }

/* 服务流程 */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); }
.step__no {
  width: 40px; height: 40px; border-radius: 50%; margin-bottom: var(--sp-4);
  display: grid; place-items: center; background: var(--brand-50); color: var(--brand-700);
  font-family: var(--font-num); font-size: 17px; font-weight: var(--fw-bold);
}
.step__title { font-size: 16px; margin-bottom: var(--sp-2); }
.step__desc { font-size: var(--fs-sm); color: var(--ink-400); line-height: 1.75; }
.step:not(:last-child)::after {
  content: ""; position: absolute; right: -18px; top: 46px; width: 11px; height: 11px;
  border-top: 2px solid var(--brand-300); border-right: 2px solid var(--brand-300);
  transform: rotate(45deg);
}

/* 到访地址条（原地图占位已按需求移除，仅保留真实地址信息） */
.addr-bar {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-6); font-size: var(--fs-sm);
}
.addr-bar__ico {
  width: 46px; height: 46px; flex: none; border-radius: var(--r-md);
  display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600);
}
.addr-bar__ico svg { width: 22px; height: 22px; }
.addr-bar__txt { flex: 1; min-width: 220px; }
.addr-bar__k { font-size: var(--fs-xs); color: var(--ink-400); margin-bottom: 3px; }
.addr-bar__v { color: var(--ink-800); font-weight: var(--fw-medium); line-height: 1.7; }

/* ============================== 16. 搜索结果页 =========================== */
.sbox { position: relative; z-index: 2; display: flex; gap: var(--sp-3); max-width: 760px; margin-top: var(--sp-6); }
.sbox__ico { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ink-400); pointer-events: none; }
.sbox input {
  flex: 1; min-width: 0; height: 56px; padding: 0 var(--sp-6) 0 52px;
  border: 0; border-radius: var(--r-md); outline: none;
  font-size: 16px; color: var(--ink-800); box-shadow: var(--sh-4);
}
.sbox input::placeholder { color: var(--ink-300); }
.sbox input:focus { box-shadow: var(--sh-4), 0 0 0 3px rgba(240,138,29,.35); }
.sbox .btn { height: 56px; padding: 0 var(--sp-8); flex: none; }

.hot { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); font-size: var(--fs-xs); color: rgba(255,255,255,.55); }
.hot a {
  padding: 5px 13px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: var(--fs-xs);
}
.hot a:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.4); }

.smeta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  flex-wrap: wrap; padding-bottom: var(--sp-5); margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-400);
}
.smeta b { font-family: var(--font-num); color: var(--brand-700); font-weight: var(--fw-semi); }

.tabs { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.tab {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 var(--sp-5);
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--ink-500); transition: all var(--dur) var(--ease);
}
.tab i { font-style: normal; font-family: var(--font-num); font-size: var(--fs-xs); color: var(--ink-300); }
.tab:hover { background: #fff; color: var(--brand-700); }
.tab.is-active { background: #fff; border-color: var(--line); color: var(--brand-700); font-weight: var(--fw-semi); box-shadow: var(--sh-1); }
.tab.is-active i { color: var(--brand-500); }

.sresults { display: grid; gap: var(--sp-4); }
.sr { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); transition: all var(--dur) var(--ease); }
.sr:hover { border-color: var(--brand-100); box-shadow: var(--sh-2); }
.sr__top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.sr__url { font-family: var(--font-num); font-size: var(--fs-xs); color: var(--ink-300); }
.sr__date { margin-left: auto; font-family: var(--font-num); font-size: var(--fs-xs); color: var(--ink-300); }
.sr__title { font-size: var(--fs-h4); line-height: 1.5; }
.sr__title a { color: var(--ink-800); }
.sr:hover .sr__title a { color: var(--brand-700); }
.sr__desc {
  margin-top: var(--sp-3); font-size: var(--fs-sm); line-height: 1.85; color: var(--ink-500);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
mark { background: rgba(240,138,29,.2); color: var(--accent-700); padding: 0 2px; border-radius: 2px; font-weight: var(--fw-semi); }

.side__hot { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.side__hot a {
  display: inline-flex; align-items: center; gap: 5px; margin: 0 var(--sp-2) var(--sp-2) 0;
  padding: 5px 11px; border-radius: var(--r-sm); font-size: var(--fs-xs);
  background: var(--bg-soft); color: var(--ink-500);
}
.side__hot a:hover { background: var(--brand-50); color: var(--brand-700); }
.side__hot a i { font-style: normal; font-family: var(--font-num); color: var(--ink-300); font-size: 11px; }

.empty { text-align: center; padding: var(--sp-20) var(--sp-6); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); }
.empty svg { width: 60px; height: 60px; margin: 0 auto var(--sp-6); color: var(--ink-300); }
.empty h3 { font-size: var(--fs-h4); }
.empty p { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-400); }
.empty .btn { margin-top: var(--sp-6); }

/* ============================== 17. 错误页 ====================== */
.err { background: var(--bg-mist); padding: var(--sp-20) 0 var(--sp-25); position: relative; overflow: hidden; }
.err__bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,82,129,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,82,129,.04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(72% 62% at 50% 38%, #000, transparent);
  -webkit-mask-image: radial-gradient(72% 62% at 50% 38%, #000, transparent);
}
.err__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: var(--sp-20); align-items: center;
}
.err__code {
  display: block; font-family: var(--font-num); font-weight: var(--fw-bold);
  font-size: 128px; line-height: .86; letter-spacing: -.05em;
  background: linear-gradient(126deg, var(--brand-800) 0%, var(--brand-500) 46%, var(--accent-500) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.err__tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--brand-50); border: 1px solid var(--brand-100);
  color: var(--brand-700); font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: .06em; text-transform: uppercase;
}
.err__tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-500); flex: none; }
.err__tag--warn { background: var(--accent-50); border-color: var(--accent-100); color: var(--accent-700); }
.err__tag--warn i { background: var(--danger-600); }
.err__title { margin-top: var(--sp-6); font-size: var(--fs-h1); line-height: var(--lh-tight); color: var(--ink-900); letter-spacing: -.01em; }
.err__desc { margin-top: var(--sp-4); color: var(--ink-500); line-height: var(--lh-body); max-width: 540px; }
.err__acts { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-8); }
.err__hint { margin-top: var(--sp-6); font-size: var(--fs-sm); color: var(--ink-400); }
.err__hint a { color: var(--brand-600); }
.err__hint a:hover { text-decoration: underline; }
.err__art { display: grid; place-items: center; }
.err__art svg { width: 100%; max-width: 400px; height: auto; }

/* 管理员可见的调试信息条（模板中绑定 ${status} ${path} ${timestamp}） */
.err__meta {
  margin-top: var(--sp-15); padding: var(--sp-5) var(--sp-6);
  border: 1px dashed var(--line); border-radius: var(--r-md); background: #fff;
  display: flex; gap: var(--sp-15); flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--ink-400);
}
.err__meta span { display: block; margin-bottom: 4px; letter-spacing: .03em; }
.err__meta b { font-family: var(--font-num); font-size: var(--fs-sm); color: var(--ink-700); font-weight: var(--fw-semi); }

/* 快捷入口 */
.err__quick { margin-top: var(--sp-15); }
.err__quick h3 { font-size: var(--fs-h4); color: var(--ink-800); margin-bottom: var(--sp-5); }
.err-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.err-quick a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-5); background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); color: var(--ink-700); font-size: var(--fs-sm);
  transition: all var(--dur) var(--ease);
}
.err-quick a:hover { border-color: var(--brand-300); color: var(--brand-700); box-shadow: var(--sh-2); transform: translateY(-2px); }
.err-quick svg { width: 17px; height: 17px; color: var(--brand-500); flex: none; }

/* 设计稿：多状态并列展示框架 */
.err-frame { border-top: 1px solid var(--line); }
.err-frame__cap {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-8) 0 var(--sp-2); font-size: var(--fs-xs); color: var(--ink-400);
}
.err-frame__cap b { font-family: var(--font-num); font-size: var(--fs-sm); color: var(--brand-700); }
.err-frame__cap code {
  font-family: var(--font-num); font-size: var(--fs-xs);
  background: var(--brand-50); color: var(--brand-700); padding: 2px 8px; border-radius: var(--r-xs);
}

/* ============================== 18. 设计稿标识（仅设计阶段） ============== */
.ds-badge {
  position: fixed; right: 0; bottom: 0; z-index: 130;
  background: #0D1B24; color: #fff; font-size: 11px; padding: 6px 12px;
  border-radius: 8px 0 0 0; letter-spacing: .03em; opacity: .8;
  pointer-events: none;
}

/* ============================== 18. 响应式 ============================== */
@media (max-width: 1199px) {
  :root { --fs-display: 40px; --fs-h2: 28px; --sp-20: 64px; --sp-25: 80px; }
  .about { gap: var(--sp-10); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .hero__art { width: 440px; height: 440px; right: -130px; opacity: .72; }
  .layout--form { grid-template-columns: 1fr 300px; }
}

@media (max-width: 991px) {
  :root { --fs-display: 34px; --fs-h2: 25px; --fs-h3: 20px; --header-h: 68px; }
  /* 平板及以下隐藏首屏插画，避免与正文重叠 */
  .hero__art { display: none; }
  .nav { display: none; }
  .header__act { margin-left: auto; }
  .burger { display: grid; }
  .header__act .btn { display: none; }
  .qual-grid, .news-grid { grid-template-columns: repeat(2, 1fr); }
  /* 业务中心：平板起改为「图上、列表下」单列；触屏无 hover，箭头常显 */
  .bizsplit { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .bizsplit__view { min-height: 340px; }
  .bizsplit__arrow { opacity: .92; }
  .stats__box { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(odd)::before { display: none; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .stat__num { font-size: 32px; }
  .about { grid-template-columns: 1fr; }
  .about__media { order: -1; }
  .about__float { right: var(--sp-4); }
  .layout { grid-template-columns: 1fr; }
  .side { position: static; }
  .pj__head { display: none; }
  .pj__row { grid-template-columns: 1fr 100px; gap: var(--sp-2) var(--sp-4); padding: var(--sp-5); }
  .pj__no { grid-column: 1 / -1; }
  .pj__owner { grid-column: 1; }
  .pj__date { grid-column: 2; text-align: right; }
  .article { padding: var(--sp-6); }
  .related__grid { grid-template-columns: 1fr 1fr; }
  /* 表单与搜索 */
  .layout--form { grid-template-columns: 1fr; }
  .form-card { padding: var(--sp-8); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
  .step:not(:last-child)::after { display: none; }
  .cinfo--3 { grid-template-columns: 1fr 1fr; }
  .sbox { max-width: none; }
  .addr-bar { padding: var(--sp-5); }
  /* 错误页 */
  .err__inner { grid-template-columns: 1fr; gap: var(--sp-10); }
  .err__art { display: none; }
  .err__code { font-size: 96px; }
  .err-quick { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  :root {
    --fs-display: 26px; --fs-h1: 24px; --fs-h2: 21px; --fs-h3: 18px; --fs-h4: 17px;
    --fs-body: 15px; --sp-20: 48px; --sp-25: 56px; --gutter: 16px;
    --lh-body: 1.8;
  }
  .section { padding: var(--sp-20) 0; }
  .topbar { display: none; }
  .header { position: sticky; }
  .brand__mark { width: 36px; height: 36px; }
  .brand__name { font-size: 16px; }
  /* 手机端隐藏英文副标题，避免挤压搜索与汉堡菜单 */
  .brand__en { display: none; }
  .hero { min-height: auto; padding: var(--sp-12) 0 var(--sp-20); }
  .hero__glow { width: 420px; height: 420px; right: -180px; top: -180px; }
  .hero__desc { font-size: 14px; }
  .hero__actions { gap: var(--sp-3); margin-top: var(--sp-6); }
  .hero__actions .btn { flex: 1; min-width: 140px; }
  .hero__quals { gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-8); }
  .hero__qual { font-size: var(--fs-xs); }
  .stats { margin-top: calc(var(--sp-20) * -1 + var(--sp-6)); }
  .stats__box { border-radius: var(--r-md); }
  .stat { padding: var(--sp-5) var(--sp-3); }
  .stat__num { font-size: 26px; }
  .stat__num small { font-size: 12px; }
  .stat__label { font-size: var(--fs-xs); margin-top: var(--sp-2); }
  .sec-head { margin-bottom: var(--sp-6); }
  .sec-head--split { align-items: flex-start; }
  .qual-grid, .news-grid, .related__grid { grid-template-columns: 1fr; }
  /* 业务中心：手机上压缩轮播高度，列表条目保持一行省略 */
  .bizsplit__view { min-height: 230px; border-radius: var(--r-md); }
  .bizsplit__caption { padding: var(--sp-15) var(--sp-5) var(--sp-5); }
  .bizsplit__cap-title { font-size: var(--fs-h4); }
  .bizsplit__dots { right: var(--sp-5); bottom: var(--sp-5); }
  .bizsplit__arrow { width: 36px; height: 36px; margin-top: -18px; }
  .bizsplit__arrow svg { width: 17px; height: 17px; }
  .bizsplit__link { padding: var(--sp-3) var(--sp-4); }
  .about__points { grid-template-columns: 1fr; gap: var(--sp-3); }
  .about__float { padding: var(--sp-4); min-width: 0; right: var(--sp-3); top: var(--sp-3); }
  .about__float b { font-size: 22px; }
  .about__shot-tag { left: var(--sp-4); bottom: var(--sp-4); font-size: var(--fs-xs); }
  .qual { padding: var(--sp-6); }
  .ai { grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-4); }
  .ai__thumb { aspect-ratio: 16/9; }
  .ti { padding: var(--sp-5) var(--sp-4); gap: var(--sp-4); }
  .ti__date { width: 54px; padding-right: var(--sp-4); }
  .ti__d { font-size: 20px; }
  .ti__title { font-size: 15px; }
  .ti__desc { display: none; }
  .article { padding: var(--sp-5); border-radius: var(--r-md); }
  .article__title { font-size: 20px; }
  .prose { font-size: 15px; line-height: 1.9; }
  .prose h2 { font-size: 18px; }
  .cta__title { font-size: 21px; }
  .cta__inner { flex-direction: column; align-items: flex-start; }
  .cta__actions { width: 100%; }
  .cta__actions .btn { flex: 1; }
  .footer { padding-top: var(--sp-10); }
  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-8); padding-bottom: var(--sp-8); }
  .footer__about { max-width: none; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .mobar { display: block; }
  .ds-badge { bottom: 62px; }
  .totop { bottom: 82px; right: var(--sp-4); }
  .page-hero { padding: var(--sp-8) 0 var(--sp-6); }
  .page-hero__title { font-size: 22px; }
  .pager span, .pager a { min-width: 36px; height: 36px; }
  .pager__info { width: 100%; margin: var(--sp-3) 0 0; text-align: center; }
  .has-mobar { padding-bottom: 74px; }
  /* 表单与搜索 */
  .form-card { padding: var(--sp-5); border-radius: var(--r-md); }
  .form-card__head { padding-bottom: var(--sp-5); margin-bottom: var(--sp-6); }
  .form-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .textarea { min-height: 124px; }
  .upload { flex-wrap: wrap; }
  .upload .btn { margin-left: 0; width: 100%; }
  .captcha__img { width: 96px; }
  .form__foot { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
  .form__foot .btn { width: 100%; min-width: 0; }
  .steps { grid-template-columns: 1fr; }
  .cinfo--3 { grid-template-columns: 1fr; }
  .addr-bar { padding: var(--sp-4) var(--sp-5); }
  .addr-bar__txt { min-width: 0; }
  .addr-bar .btn { margin-left: 0; width: 100%; }
  /* 错误页 */
  .err { padding: var(--sp-15) 0 var(--sp-20); }
  .err__code { font-size: 72px; }
  .err__acts .btn { width: 100%; }
  .err-quick { grid-template-columns: 1fr; }
  .err__meta { gap: var(--sp-6); }
  .sbox { flex-wrap: wrap; }
  .sbox input { height: 50px; padding-left: 46px; flex: 1 1 100%; }
  .sbox .btn { height: 50px; width: 100%; padding: 0; }
  .sbox__ico { top: 25px; left: 15px; width: 18px; height: 18px; }
  .tabs { gap: 4px; }
  .tab { height: 36px; padding: 0 var(--sp-3); }
  .sr { padding: var(--sp-5); }
  .sr__date { margin-left: 0; }
  .empty { padding: var(--sp-15) var(--sp-5); }
}

@media (max-width: 400px) {
  :root { --fs-display: 23px; }
  .stat__num { font-size: 23px; }
}

/* ==========================================================================
   19. 模板补充样式
   —— 由 02-template 的 UJCMS 模板使用：动态内容容器、表单校验反馈、
      正文增强、富文本检索高亮、列表区块头部等。
      本区块与 01-design 设计稿共用同一份 site.css，避免两处样式漂移。
   ========================================================================== */

/* ---------- 图片填充容器（后端上传的实拍图） ---------- */
.news__thumb img,
.ai__thumb img,
.about__shot img,
.rel img,
.article__cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---------- 正文增强 ---------- */
.prose img { max-width: 100%; height: auto; }
.prose-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--sp-6) 0; }
.prose-table-wrap > table { margin: 0; min-width: 560px; }
.article__sub { margin-top: var(--sp-3); font-size: var(--fs-h4); color: var(--ink-500); font-weight: var(--fw-normal); }
.article__tags { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-8); }

/* ---------- 列表区块头部（留言板 / 搜索结果） ---------- */
.list-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; padding-bottom: var(--sp-5);
}
.list-head__title { font-size: var(--fs-h3); color: var(--ink-900); }
.sr-count { font-size: var(--fs-sm); color: var(--ink-400); margin-bottom: var(--sp-5); }
.sr-count b { color: var(--brand-700); font-size: var(--fs-h4); }
.sr__meta {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-400);
}

/* ---------- 留言回复块 ---------- */
.reply {
  margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5);
  background: var(--brand-50); border-left: 3px solid var(--brand-500);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.reply__head {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--brand-700);
  margin-bottom: var(--sp-2);
}
.reply__head svg { width: 14px; height: 14px; }
.reply__text { font-size: var(--fs-sm); color: var(--ink-600, var(--ink-700)); line-height: var(--lh-body); margin: 0; }

/* ---------- 热门搜索词 ---------- */
.hotwords {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--ink-400);
}
.hotwords a {
  padding: 4px 12px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24);
  color: #fff; font-size: var(--fs-xs); transition: all var(--dur) var(--ease);
}
.hotwords a:hover { background: var(--accent-500); border-color: var(--accent-500); }
/* 浅色底场景（搜索结果空状态） */
.empty .hotwords a,
.section--soft .hotwords a {
  background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-700);
}
.empty .hotwords a:hover,
.section--soft .hotwords a:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }

/* ---------- 富文本检索高亮（UJCMS 输出 <em>） ---------- */
.es-highlight em,
.sr__title em,
.sr__desc em,
mark {
  background: var(--accent-100); color: var(--accent-700);
  font-style: normal; font-weight: var(--fw-semi);
  padding: 0 3px; border-radius: var(--r-xs);
}

/* ---------- 占位行 / 占位卡片（后台未录数据时的示例内容） ---------- */
.pj__row.is-placeholder { background: var(--bg-mist); }
.pj__row.is-placeholder .pj__title,
.pj__row.is-placeholder .pj__owner,
.pj__row.is-placeholder .pj__no {
  color: var(--ink-400); font-style: normal;
}
.pj__row.is-placeholder:hover { background: var(--bg-soft); }
.card.is-placeholder { border-style: dashed; }
.card.is-placeholder:hover { transform: none; box-shadow: none; }

/* ---------- 侧栏纯文字列表（如「公示说明」） ---------- */
/* 内边距必须**左右都留**：容器给 sp-6，圆点占 sp-5 缩进。
   只给左侧会令换行后的文字紧贴卡片右边框（视觉上像溢出被裁）。 */
.side__nav--plain { padding: var(--sp-5) var(--sp-6); }
.side__nav--plain li { padding: 0; border: 0; }
.side__nav--plain li + li { margin-top: var(--sp-4); }
.side__nav--plain li > span {
  display: block; position: relative; padding-left: var(--sp-5);
  font-size: var(--fs-sm); line-height: 1.75; color: var(--ink-500);
  overflow-wrap: anywhere; word-break: break-word;   /* 长串/无空格兜底，绝不撑破卡片 */
}
.side__nav--plain li > span::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand-500);
}

/* ---------- 分页省略号 ---------- */
.pager__gap { color: var(--ink-300); }
.pager .is-disabled { border: 1px solid var(--line); }

/* ---------- 表单校验反馈（jquery-validation） ---------- */
.field__error {
  display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--danger-600);
}
.input.field__error,
.textarea.field__error,
.select.field__error { border-color: var(--danger-600); box-shadow: 0 0 0 3px rgba(192,57,43,.10); }
label.field__error { all: unset; }
.field__error.field__error--inline { display: inline; margin-left: var(--sp-3); }

/* 校验失败时表单卡片轻微提示 */
.form-card .field:has(.field__error) > .field__label { color: var(--danger-600); }

/* ---------- 提示条：成功 / 失败 ---------- */
.alert--success { background: var(--success-50); border-color: rgba(15,138,95,.22); color: var(--success-600); }
.alert--error { background: #FDECEA; border-color: rgba(192,57,43,.22); color: var(--danger-600); }
.alert--success svg, .alert--error svg { color: currentColor; }

/* ---------- 验证码图片（后端 base64 图片） ---------- */
img.captcha__img { padding: 0; object-fit: cover; }

/* ---------- 可点击的筛选标签（button 版） ---------- */
button.chip {
  font: inherit; background: #fff; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-pill);
}
button.chip:hover { border-color: var(--brand-300); color: var(--brand-700); }
button.chip.is-on { background: var(--brand-50); border-color: var(--brand-600); color: var(--brand-700); font-weight: var(--fw-semi); }

/* ---------- 移动端抽屉子菜单默认收起 ---------- */
.drawer__sub { display: none; }

/* ---------- 表单页右侧栏与按钮全宽 ---------- */
.side__box .cinfo { padding-bottom: var(--sp-2); }
.form__foot { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; padding-top: var(--sp-6); border-top: 1px solid var(--line); }
.form__foot .btn { min-width: 160px; }

@media (max-width: 767px) {
  .hotwords { font-size: var(--fs-xs); }
  .list-head { padding-bottom: var(--sp-4); }
  .form__foot .btn { min-width: 0; width: 100%; }
}



/* ==========================================================================
   20. 留言板 / 文章互动 补充样式
   —— 承接第 19 节，供 UJCMS 动态模板（sys_message_board*、article、sys_search）使用。
      与 01-design 设计稿共用同一份 site.css，避免两处样式漂移。
   ========================================================================== */

/* ---------- [hidden] 兜底：避免被 .alert{display:flex} 等规则覆盖 ---------- */
[hidden] { display: none !important; }

/* ---------- 标签：中性态（待回复等） ---------- */
.tag--muted { background: var(--bg-soft); color: var(--ink-400); border: 1px solid var(--line); }

/* ---------- 字段说明文字 ---------- */
.field__tip { margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-400); line-height: 1.7; }

/* ---------- 侧栏强调入口（如「我要留言」） ---------- */
.side__nav a.btn-link-strong { color: var(--brand-700); font-weight: var(--fw-semi); background: var(--brand-50); }
.side__nav a.btn-link-strong::before { transform: scaleY(1); }
.side__nav a.btn-link-strong:hover { background: var(--brand-700); color: #fff; }
.side__nav a.btn-link-strong:hover svg { color: #fff; }
.side__nav-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 顶部导航吸顶阴影 ---------- */
.header.is-stuck { box-shadow: 0 6px 20px rgba(13,27,36,.07); }

/* ---------- 按钮载入态 ---------- */
.btn.is-loading { opacity: .72; pointer-events: none; }

/* ---------- 文章标签 ---------- */
.article__tags-label { font-size: var(--fs-xs); color: var(--ink-400); }

/* ---------- 阅读反馈（赞 / 踩） ---------- */
.votes {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--line);
}
.votes__label { font-size: var(--fs-sm); color: var(--ink-400); margin-right: var(--sp-2); }
.votes .btn b { font-family: var(--font-num); }
.votes .btn.is-done { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-700); }

/* ---------- 留言板列表 ---------- */
.msgs { display: grid; gap: var(--sp-5); }
.msg {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-6); transition: all var(--dur) var(--ease);
}
.msg:hover { border-color: var(--brand-100); box-shadow: var(--sh-2); }
.msg.is-top { border-color: var(--accent-100); box-shadow: inset 3px 0 0 var(--accent-500); }
.msg__head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.msg__date { margin-left: auto; font-size: var(--fs-xs); color: var(--ink-300); }
.msg__title { margin-top: var(--sp-4); font-size: var(--fs-h4); line-height: 1.55; }
.msg__title a { color: var(--ink-800); }
.msg:hover .msg__title a { color: var(--brand-700); }
.msg__text {
  margin-top: var(--sp-3); font-size: var(--fs-sm); line-height: 1.85; color: var(--ink-500);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.msg__meta {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px dashed var(--line);
  font-size: var(--fs-xs); color: var(--ink-400);
}
.msg__meta span { display: inline-flex; align-items: center; gap: 5px; }
.msg__meta svg { width: 14px; height: 14px; }
.msg__more { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--brand-700); font-weight: var(--fw-semi); }
.msg__more svg { width: 15px; height: 15px; }
.msg--slim { padding: var(--sp-5) var(--sp-6); }
.msg--slim .msg__title { margin-top: 0; font-size: var(--fs-body); }
.msg--slim .msg__meta { margin-top: var(--sp-3); padding-top: 0; border-top: 0; }

/* ---------- 留言详情：正文里的官方回复块稍作放大 ---------- */
.article .reply { margin-top: var(--sp-8); padding: var(--sp-5) var(--sp-6); }
.reply__by { margin-left: var(--sp-3); font-weight: var(--fw-normal); color: var(--ink-400); }

@media (max-width: 767px) {
  .msg { padding: var(--sp-5); }
  .msg__date { margin-left: 0; }
  .votes { gap: var(--sp-3); }
  .votes .btn { flex: 1; }
}