@charset "UTF-8";
/* ==========================================================================
   临沂精益软件有限公司 · 全站统一设计系统  style.css
   https://www.jingyisoft.com
   --------------------------------------------------------------------------
   设计约束（全站强制）
   1. 字体：Microsoft YaHei 微软雅黑，唯一字体族
   2. 字重：全站 font-weight: normal，不使用任何加粗
      → 视觉层级改由「颜色 / 字号 / 留白 / 色块 / 线条」建立
   3. 字号：仅 22px / 15px / 13px 三级，禁止第四种字号（首屏六卡业务名同样走 15px）
      → 响应式适配依赖栅格与间距变化，不依赖缩放字号
   4. 颜色：蓝色（信任 · 科技）为主，橙色（行动 · 转化）为辅
   5. 无障碍：文字对比度 ≥ 4.5:1 (WCAG AA)；44px 触控目标；
      键盘焦点可见；尊重 prefers-reduced-motion
   6. CSS 与 JS 均为独立文件，全站 7 个页面统一调用本表
   ========================================================================== */

/* ============================ 1. Design Tokens ============================
   职责：集中定义品牌蓝/橙、中性色、唯一字体族与三级字号、8 点间距、圆角阴影与动效时长。
         全站颜色与尺寸只引用此处的变量，调整主题只需修改本模块。
   ========================================================================== */
:root {
  /* 品牌蓝 */
  --c-blue:         #0F62C4;   /* 白字对比 5.9:1 */
  --c-blue-deep:    #0A3E82;
  --c-blue-darker:  #062A5A;
  --c-blue-soft:    #EAF3FF;
  --c-blue-line:    #C9DFFB;

  /* 品牌橙 */
  --c-orange:       #F97316;   /* 装饰、图标、光晕、强调线 */
  --c-orange-deep:  #B94A08;   /* 白字按钮对比 5.2:1 */
  --c-orange-hover: #9E3D05;
  --c-orange-soft:  #FFF1E7;
  --c-orange-line:  #FFD6B8;

  /* 中性 */
  --c-ink:    #26313D;   /* 主文字 */
  --c-ink-2:  #46566A;   /* 次级文字 */
  --c-ink-3:  #5B6875;   /* 辅助文字 13px */
  --c-line:   #E3E9F0;
  --c-bg:     #FFFFFF;
  --c-bg-soft:#F6F9FC;

  /* 语义 */
  --c-success: #1E7A4B;
  --c-error:   #C02C38;

  /* 字体：唯一族 / 唯一字重 / 三级字号 */
  --font-base: "Microsoft YaHei", "微软雅黑", "Microsoft JhengHei", "Heiti SC", sans-serif;
  --fs-lg: 22px;
  --fs-md: 15px;
  --fs-sm: 13px;
  --lh-lg: 1.55;
  --lh-md: 1.85;
  --lh-sm: 1.8;

  /* 8 点间距系统 */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px; --sp-12: 48px;
  --sp-16: 64px; --sp-20: 80px;

  /* 形状与 elevation */
  --r-sm: 6px;  --r: 10px;  --r-lg: 18px;  --r-pill: 999px;
  --sh-sm: 0 1px 2px rgba(6, 42, 90, .06);
  --sh:    0 6px 20px rgba(6, 42, 90, .08);
  --sh-lg: 0 18px 44px rgba(6, 42, 90, .16);

  --wrap: 1200px;
  --t-fast: 160ms ease;
  --t: 280ms ease;
}

/* ============================ 2. Reset & 全局字体收敛 ============================
   职责：抹平浏览器默认样式，强制全局不加粗并把所有元素收敛到 22/16/13 三级字号。
         附带宽度容器、可视隐藏、跳转链接与键盘焦点等基础规则。
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* 关键：一行抹平浏览器对标题 / strong / b / th 的加粗默认值 */
*, h1, h2, h3, h4, h5, h6, strong, b, th, dt, mark, caption, legend {
  font-weight: normal;
}

html {
  font-family: var(--font-base);
  font-size: var(--fs-md);          /* 15px 基准 */
  line-height: var(--lh-md);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, dt, figure,
blockquote, pre, fieldset, button, input, select, textarea,
a, span, li, small, big, em, i, cite, code, label, summary, figcaption {
  font-family: var(--font-base);
  font-weight: normal;
  margin: 0;
  padding: 0;
}

/* 所有元素只使用三级字号 */
h1, h2 { font-size: var(--fs-lg); line-height: var(--lh-lg); }
h3, h4, h5, h6, p, li, a, button, input, select, textarea,
label, dd, dt, blockquote, span, div, td, th, caption, figcaption, summary {
  font-size: var(--fs-md);
  line-height: var(--lh-md);
}
small, time, .meta { font-size: var(--fs-sm); line-height: var(--lh-sm); }

h3, h4, h5, h6 { line-height: var(--lh-lg); }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; border: 0; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: 0; color: inherit; }
input, select, textarea { color: inherit; }
strong, b, em, i, mark { font-style: normal; background: none; }
strong, b { color: var(--c-blue-deep); } /* 用颜色而非字重表达强调 */

:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 3px; border-radius: var(--r-sm); }
::selection { background: var(--c-orange-soft); color: var(--c-blue-darker); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--c-blue-deep); color: #fff;
  padding: var(--sp-3) var(--sp-6); border-radius: 0 0 var(--r) 0;
}
.skip-link:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sp-6); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================ 3. 通用排版与组件 ============================
   职责：区块间距、区块标题组、按钮、标签、卡片与栅格等全站复用组件。
         层级依靠颜色与留白建立，任何组件都不得引入第四种字号或加粗字重。
   ========================================================================== */
/* 子模块：区块节奏 · 常规 / 浅底两种纵向间距 */
.section { padding: var(--sp-20) 0; }
.section--soft { background: var(--c-bg-soft); }

/* 子模块：区块标题组 · 眉标 + 标题下橙色短线 + 描述，居中变体同步可用 */
.section-head { max-width: 760px; margin-bottom: var(--sp-12); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
/* 小标签 · 必须是块级 + fit-content：标题改为 inline-block 后两者同属行内级，
   若小标签仍是 inline-flex 就会与标题挤在同一行，这里用块级独占一行 */
.eyebrow {
  display: flex; width: fit-content; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); line-height: var(--lh-sm);
  color: var(--c-orange-deep); background: var(--c-orange-soft);
  border: 1px solid var(--c-orange-line);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  margin-bottom: var(--sp-4);
}
.section-head--center .eyebrow { margin-left: auto; margin-right: auto; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-orange); }
/* 子模块：区块标题 · 标题改为 inline-block，宽度收缩到文字本身；
   下方橙色短线用 width:100% 跟随标题盒子宽度，做到「线与文字同宽」
   （居中区块由父级 text-align:center 自动居中，无需再用 margin auto） */
.section-title { color: var(--c-blue-darker); display: inline-block; }
.section-title::after {
  content: ""; display: block; width: 100%; height: 3px; border-radius: 2px;
  background: var(--c-orange); margin-top: var(--sp-3);
}
.section-desc { color: var(--c-ink-2); margin-top: var(--sp-4); }
.section-head--center .section-desc { margin-left: auto; margin-right: auto; }

/* 子模块：按钮组 · 主橙 / 蓝 / 描边 / 反白四种，最小高度 46px 满足触控目标 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 46px; padding: 0 var(--sp-6);
  border-radius: var(--r-sm); border: 1px solid transparent;
  transition: background var(--t-fast), color var(--t-fast),
              transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--c-orange-deep); color: #fff; box-shadow: var(--sh-sm); }
.btn--primary:hover { background: var(--c-orange-hover); box-shadow: var(--sh); }
.btn--blue { background: var(--c-blue); color: #fff; }
.btn--blue:hover { background: var(--c-blue-deep); box-shadow: var(--sh); }
.btn--ghost { border-color: var(--c-blue-line); color: var(--c-blue-deep); background: #fff; }
.btn--ghost:hover { border-color: var(--c-blue); background: var(--c-blue-soft); }
.btn--light { border-color: rgba(255,255,255,.55); color: #fff; }
.btn--light:hover { background: rgba(255,255,255,.12); }
.btn .arrow { font-size: var(--fs-md); line-height: 1; }

/* 子模块：标签徽章 · 蓝底常规，橙底强调，均使用 13px 辅助字号 */
.tag {
  display: inline-block; font-size: var(--fs-sm); line-height: 1.6;
  padding: 2px var(--sp-3); border-radius: var(--r-pill);
  background: var(--c-blue-soft); color: var(--c-blue-deep);
  border: 1px solid var(--c-blue-line);
}
.tag--orange { background: var(--c-orange-soft); color: var(--c-orange-deep); border-color: var(--c-orange-line); }

/* 子模块：通用卡片 · 白底细边与轻投影，hover 上浮反馈 */
.card {
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: var(--c-blue-line); }

/* 子模块：栅格系统 · 二 / 三 / 四 / 五列，断点处由响应式模块降级为两列或单列 */
.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 五列仅用于「交付流程」五步，间距比其他栅格收紧到 16px，保证 1200 容器下每格仍有约 228px */
.grid--5 { display: grid; gap: var(--sp-4); grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ============================ 4. 顶部信息条 ============================
   职责：深蓝窄条左对齐展示服务关键词，右对齐展示电话/微信 CTA。
         窄屏两侧均保留：关键词省略号截断、电话完整可点，不折叠成两行。
   ========================================================================== */
/* 子模块：信息条容器 · 深蓝底、13px 文字、左右两栏不换行 */
.topbar { background: var(--c-blue-darker); color: #DCE9FA; }
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: 38px; flex-wrap: nowrap;
}
.topbar, .topbar a, .topbar span { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.topbar__left, .topbar__right { display: flex; align-items: center; gap: var(--sp-6); min-width: 0; }
/* 左栏：地域 + 六项业务关键词，左对齐 */
.topbar__keywords { color: #EAF3FF; white-space: nowrap; }
.topbar__item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.topbar__item svg { width: 14px; height: 14px; fill: none; stroke: var(--c-orange); stroke-width: 1.8; }
/* 右栏：电话/微信主 CTA，白字 + 橙色图标，紧贴容器右侧 */
.topbar__right { justify-content: flex-end; margin-left: auto; flex: none; }
.topbar__tel { color: #fff; white-space: nowrap; }
.topbar a:hover { color: #fff; text-decoration: underline; }

/* ============================ 5. 站点头部与导航 ============================
   职责：sticky 头部、品牌 logo、主导航、两组二级子菜单、咨询 CTA 与移动汉堡按钮。
         主营业务与新闻中心共用同一套下拉组件，桌面 hover/focus 展开由 CSS 实现，
         点击开合、两组互斥与移动端折叠由 main.js 接管。
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.97); border-bottom: 1px solid var(--c-line);
  backdrop-filter: blur(8px);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); min-height: 76px;
}
/* 子模块：品牌标识 · logo + 公司名 + 域名，页头页脚共用 */
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); min-height: 48px; }
/* 品牌标志：webp/logo.png（橙蓝双色），白底保证在深蓝页脚上同样清晰 */
.brand__logo {
  width: 40px; height: 40px; flex: none; object-fit: contain;
  background: #fff; padding: 2px; border-radius: var(--r-sm);
}
.site-footer .brand__logo { padding: 3px; border-radius: var(--r); box-shadow: var(--sh-sm); }
.brand__text { display: flex; flex-direction: column; }
.brand__name { color: var(--c-blue-darker); line-height: 1.4; }
/* 页头品牌名 18px：全站三档字号（22/15/13）的唯一例外，仅作用于 sticky 页头 */
.site-header .brand__name { font-size: 18px; }
/* 品牌副标题（页头 slogan / 内页域名）固定 13px */
.brand__domain { color: var(--c-ink-3); font-size: var(--fs-sm); line-height: 1.5; letter-spacing: .06em; }

/* 子模块：主导航 · 当前页由 main.js 写入 aria-current 并显示橙色下划线 */
.nav { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: nowrap; }
/* 导航文字与下拉箭头始终同一行：禁止在窄屏被挤压换行后分离 */
.nav__item { position: relative; white-space: nowrap; }
.nav__group { flex-wrap: nowrap; }
.nav__subtoggle, .nav__caret { flex: none; }
/* 悬停桥接：覆盖下拉上方的 8px 间隙，避免鼠标移向子项时 hover 中断导致菜单收起 */
.nav__item.has-sub::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 8px;
}
.nav__link {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: 44px; padding: 0 var(--sp-4); border-radius: var(--r-sm);
  color: var(--c-ink-2); transition: color var(--t-fast), background var(--t-fast);
}
.nav__link:hover { color: var(--c-blue); background: var(--c-blue-soft); }
.nav__link[aria-current="page"] { color: var(--c-blue-deep); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: 4px;
  height: 2px; border-radius: 2px; background: var(--c-orange);
}
.nav__caret { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--t-fast); }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }
/* 导航组设为定位上下文，使 aria-current 下划线只覆盖文字与箭头范围 */
/* 菜单文字与下拉箭头合成一个区块：共用圆角底色与悬停态，避免两块分离 */
.nav__group {
  position: relative; display: inline-flex; align-items: center;
  border-radius: var(--r-sm); transition: background var(--t-fast);
}
.nav__group:hover, .nav__group:focus-within { background: var(--c-blue-soft); }
.nav__group .nav__link:hover { background: transparent; }
.nav__group .nav__link { padding-right: 0; }
.nav__subtoggle {
  width: 28px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); color: var(--c-ink-2);
}
.nav__subtoggle:hover { color: var(--c-blue); background: transparent; }

/* 锚点跳转时为 sticky 头部预留空间 */
/* 锚点补偿：为 sticky 头部预留 96px，避免目录跳转后标题被遮挡 */
[id] { scroll-margin-top: 96px; }

/* 子模块：二级下拉菜单 · 主营业务（6 项）与新闻中心（2 项）共用
   约束：min-width 208px 容纳最长项「网站建设及SEO」；nowrap 保证六项单行等高排列
   展开：hover / focus-within / is-open 三种条件，键盘与鼠标行为一致 */
.nav__sub {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 208px;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r);
  box-shadow: var(--sh-lg); padding: var(--sp-2);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
/* 末位下拉右对齐：导航最后一项靠右，避免浮层（含隐藏态）把文档撑出横向滚动条 */
.nav__item.has-sub:last-child .nav__sub { left: auto; right: 0; }
/* 点击态优先：JS 在「再次点击收起」时给该组加 is-closed，
   暂时屏蔽悬停/焦点的自动展开，否则鼠标停在菜单上会导致收起无效；
   鼠标重新移入该组时 JS 会清除 is-closed，恢复原有的悬停展开。 */
.nav__item.is-open .nav__sub,
.nav__item:not(.is-closed):hover .nav__sub,
.nav__item:not(.is-closed):focus-within .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__sub a {
  display: flex; align-items: center; min-height: 42px; padding: 0 var(--sp-3);
  border-radius: var(--r-sm); color: var(--c-ink-2); white-space: nowrap;
}
.nav__sub a:hover { background: var(--c-blue-soft); color: var(--c-blue-deep); }
.nav__sub a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c-orange); margin-right: var(--sp-2); }
/* 当前页在二级菜单中的高亮：与左侧栏同一套视觉语言（浅蓝底 + 蓝字），不加粗 */
.nav__sub a[aria-current="page"] { background: var(--c-blue-soft); color: var(--c-blue-deep); }

/* 页头只保留手机端汉堡按钮：桌面隐藏该容器，让主导航整体右对齐 */
.header__actions { display: none; align-items: center; gap: var(--sp-3); }
.site-header .nav { margin-left: auto; }
/* 子模块：移动菜单按钮 · 仅 900px 以下显示，用三条线形变表示开合状态 */
.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: var(--r-sm);
  border: 1px solid var(--c-line); align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2px; background: var(--c-blue-deep); border-radius: 2px;
  position: relative; transition: transform var(--t-fast), opacity var(--t-fast);
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ============================ 6. 首页 Hero ============================
   职责：蓝橙渐变首屏，左栏价值主张 + 右栏六张紧凑磨砂玻璃业务卡（108×68px，2 列 3 行），双列栅格。
   视觉：橙色线性图标 + 白色业务名上下成组居中，右下角柔和橙光、底部橙色短线居中；
         第二列错落下沉，无前置圆点、后置箭头与可见组标题。
   动效：左栏缓慢垂直漂浮；六张卡按三条闭合轨迹做上下 + 左右二维漂浮（X / Y 幅度均为 ±10px），周期与相位各不相同；
         只用 transform，不改内容、不触发重排，也不与 hover 的颜色反馈冲突；
         系统开启减少动效时由第 16 分区统一停用，内容保持静态可见。
   ========================================================================== */
/* 子模块：首屏容器 · 蓝橙渐变、橙色光晕与网格纹理均为纯 CSS，无图片请求 */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(118deg, var(--c-blue-darker) 0%, var(--c-blue-deep) 46%, var(--c-blue) 100%);
}
.hero::before {
  content: ""; position: absolute; width: 620px; height: 620px; right: -120px; top: -220px;
  background: radial-gradient(circle, rgba(249,115,22,.42) 0%, rgba(249,115,22,0) 66%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0; opacity: .16; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(90deg, transparent, #000 65%);
}
.hero .wrap { position: relative; z-index: 1; padding-top: var(--sp-20); padding-bottom: var(--sp-20); }
/* 子模块：首屏双列栅格 · 左栏限宽保证 15px 正文行宽，右栏卡片在栏内居中 */
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--sp-16); align-items: center;
}
/* 左栏动态漂浮 · 幅度 6px / 9s，缓慢到不影响正文阅读 */
.hero__copy {
  max-width: 660px; will-change: transform;
  animation: hero-drift 9s ease-in-out -1.5s infinite alternate;
}
/* 子模块：首屏徽标与事实标签 · 用 13px 辅助信息与色块替代加粗强调 */
.hero__badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); line-height: var(--lh-sm);
  border: 1px solid rgba(255,255,255,.32); border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-4); color: #FFE0C4; margin-bottom: var(--sp-6);
}
.hero__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-orange); }
.hero__title { color: #fff; margin-bottom: var(--sp-6); }
.hero__title em { color: #FFB067; }
.hero__lead { color: #DBE8FA; max-width: 620px; margin-bottom: var(--sp-8); }
.hero__lead strong { color: #FFD0A8; }
/* 首屏字重兜底 · 用户要求首屏所有文字都不加粗：
   第 81 行的全局重置已把标题/strong/b 压成 normal，这里再对首屏作用域显式声明一遍，
   并用 font-synthesis-weight: none 禁止浏览器对缺字重的字体做「合成加粗」；
   strong/em 在首屏只承担颜色强调，不承担字重强调 */
.hero, .hero * { font-weight: normal; font-synthesis-weight: none; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* 子模块：右侧业务玻璃卡组 · 2 列 3 行，图标与业务名上下成组居中，
   第二列错落下沉，卡片本身即锚点链接；紧凑尺寸 108×68px，整体卡组限宽 248px
   定位：justify-self: center 让 248px 卡组在右栏内水平居中，不贴栅格右边缘；
        窄屏单列时由 ≤1080px 断点改回左对齐，与左栏正文同一视觉起点 */
.hero-cards { justify-self: center; width: 100%; max-width: 248px; }
.hero-cards__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 32px 行列间距：大于六卡极值相向位移 20px（±10px × 2），漂浮到极限时仍不重叠 */
  gap: var(--sp-8); justify-items: center; align-items: start;
}
/* 亮蓝磨砂玻璃模块 · 白色渐变高光在上、亮蓝底层在下，模糊背景透出网格纹理
   对比度：亮蓝底层与深色 hero 背景叠加后约为中蓝（≈#3a6ea8），白字对比度仍在 5:1 左右，
   满足全站 WCAG AA 约束
   尺寸：108×68px、水平内边距 2px、图标 18px，比上一版 112×84px 再收窄约 4%、收扁约 19%
   约束：15px 业务名必须单行，宽度只能微调 —— 108px 卡减 2px 内边距后内容区 104px，与上一版一致
   无障碍：高度 68px 仍高于 44px 触控目标 */
.biz-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--sp-1); text-align: center;
  width: 100%; max-width: 108px; min-height: 68px;
  padding: 2px; border-radius: var(--r);
  background:
    linear-gradient(155deg, rgba(255,255,255,.32), rgba(255,255,255,.12)),
    linear-gradient(rgba(48,98,168,.1), rgba(48,98,168,.1));
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 14px rgba(3,20,45,.3);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #fff; text-decoration: none; will-change: transform;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
  animation: biz-drift-a 8s ease-in-out -0.8s infinite;
}
/* 右下角极淡橙光 · 与底部橙色短线呼应，避免右上角形成明显色斑；
   纯装饰伪元素，不进入可访问树与正文摘录；尺寸随卡片同步缩小 */
.biz-card::before {
  content: ""; position: absolute; right: -20px; bottom: -24px; z-index: -1;
  width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle, rgba(249,115,22,.24) 0%, rgba(249,115,22,0) 70%);
  pointer-events: none;
}
/* 底部橙色短线 · 随内容一起居中，hover 时向两侧伸长；
   用 left/right + margin auto 居中，不用 transform 以免与漂浮动画冲突 */
.biz-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto;
  width: 16px; height: 2px; border-radius: 2px 2px 0 0;
  background: var(--c-orange); transition: width var(--t);
}
/* 第二列整体下沉 6px，打破六个等大模块平铺的呆板感 */
.biz-card:nth-child(even) { margin-top: 6px; }
/* hover 再提亮玻璃并转橙色描边，白字对比度仍由亮蓝底层保证 */
.biz-card:hover, .biz-card:focus-visible {
  background:
    linear-gradient(155deg, rgba(255,255,255,.40), rgba(255,255,255,.18)),
    linear-gradient(rgba(58,110,182,.2), rgba(58,110,182,.2));
  border-color: rgba(255,176,103,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 16px rgba(3,20,45,.36);
}
.biz-card:hover::after, .biz-card:focus-visible::after { width: 32px; }
/* 橙色线性图标 · 18px 统一描边，与缩小后的卡片比例一致；亮底上用更饱和的浅橙 */
.biz-card__icon {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: #FFD3A8; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
/* 业务名 · 回归全站三档令牌的 15px（原 14px 属特例，随 16→15 全站调整一并对齐）；
   15px 下「网站建设SEO」单行约 89px，仍在 104px 内容区内，不会换行。
   行高按 1.4 收紧，避免 15px 文字在 68px 高卡片里显得松散；字重仍为 normal */
.biz-card__name {
  position: relative; z-index: 1; text-align: center;
  color: #fff; font-size: var(--fs-md); line-height: 1.4;
  text-shadow: 0 1px 2px rgba(3,20,45,.45);
}
/* 子模块：六卡二维漂浮编排 · 三条轨迹 + 不同周期与负延迟，避免六张卡整齐划一地同步晃动
   分工：第 1 张用 .biz-card 基础规则，2 至 6 张在此覆盖轨迹名 / 周期 / 相位
   约束：只覆盖 animation 相关属性，不引入字号、字重或 transform 之外的属性 */
.biz-card:nth-child(2) { animation-name: biz-drift-b; animation-duration: 9s;   animation-delay: -2s; }
.biz-card:nth-child(3) { animation-name: biz-drift-c; animation-duration: 7.5s; animation-delay: -3.5s; }
.biz-card:nth-child(4) { animation-name: biz-drift-c; animation-duration: 8.5s; animation-delay: -5s; }
.biz-card:nth-child(5) { animation-name: biz-drift-a; animation-duration: 9.5s; animation-delay: -1.5s; }
.biz-card:nth-child(6) { animation-name: biz-drift-b; animation-duration: 8s;   animation-delay: -6.5s; }

/* 子模块：漂浮关键帧 · 只改 transform，首尾同为 translate(0,0) 保证循环不跳动、不触发重排
   左栏保持纯垂直缓慢漂浮，作为稳定参照；六卡三条闭合轨迹同时含 X 与 Y 位移
   幅度：水平 ±10px、垂直 ±10px，每条轨迹的 X / Y 都分别到达 -10px 与 +10px 两端
   安全：卡组行列间距 32px > 相邻卡极值相向的 20px，运动到极限时仍留 12px 空隙 */
@keyframes hero-drift  { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes biz-drift-a {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(10px, -4px); }
  40%      { transform: translate(6px, -10px); }
  60%      { transform: translate(-10px, 4px); }
  80%      { transform: translate(-6px, 10px); }
}
@keyframes biz-drift-b {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(-10px, -4px); }
  40%      { transform: translate(-6px, 10px); }
  60%      { transform: translate(10px, 4px); }
  80%      { transform: translate(6px, -10px); }
}
@keyframes biz-drift-c {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(4px, 10px); }
  40%      { transform: translate(10px, 6px); }
  60%      { transform: translate(-4px, -10px); }
  80%      { transform: translate(-10px, -6px); }
}

/* ============================ 7. 服务卡片 ============================
   职责：六项主营业务卡片的图标、标题、描述与标签；整卡即链接，hover 时图标与分割线转橙。
   ========================================================================== */
/* 子模块：服务卡片骨架 · 整卡为 <a>，纵向 flex；描述区 flex:1 把标签压到卡底，六卡标签行对齐
   链接语义：无内部次级链接，点击卡片任意位置直达对应业务页锚点；键盘焦点沿用全站 :focus-visible 橙色描边 */
.service-card { padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-4); }
/* 子模块：卡片头部 · 图标与标题放在同一行，整组水平居中；
   图标缩到 40px 与 22px 标题视觉等高，避免原 52px 图标块压过标题重量
   分隔：头部下方加 1px 浅蓝细线，把「图标+标题」与说明文字在视觉上断开；
        细线通栏铺满卡片内容区，与全站 1px 描边语言一致，不用加粗也不用色块 */
.service-card__head {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-3); text-align: center;
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-line);
}
.service-card__head h3 { white-space: nowrap; }
/* 子模块：业务图标 · 内联 SVG 线性图标，hover 切换为橙色系 */
.service-card__icon {
  width: 40px; height: 40px; flex: none; border-radius: var(--r);
  background: var(--c-blue-soft); display: grid; place-items: center;
  border: 1px solid var(--c-blue-line);
}
.service-card__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--c-blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.service-card:hover .service-card__icon { background: var(--c-orange-soft); border-color: var(--c-orange-line); }
.service-card:hover .service-card__icon svg { stroke: var(--c-orange-deep); }
/* 分隔线随 hover 转橙，与图标同一步调，提示整卡可交互 */
.service-card:hover .service-card__head { border-bottom-color: var(--c-orange-line); }
.service-card h3 { color: var(--c-blue-darker); }
/* 子模块：卡片说明文字 · 13px 辅助字号，与标题 22px 拉开层级；
   行高 1.8（23.4px）保证 13px 在卡片窄栏内仍易读，
   #46566A 对白底对比度约 7.3:1，满足 WCAG AA */
.service-card p { color: var(--c-ink-2); font-size: var(--fs-sm); line-height: var(--lh-sm); flex: 1; }
.service-card__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* 次级文字链接 · 六张业务卡已改为整卡链接，此样式现仅服务于新闻 / 行业动态 / 问答侧栏的「更多」入口 */
.service-card__more { color: var(--c-blue); font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: var(--sp-1); }
.service-card__more:hover { color: var(--c-orange-deep); }

/* ============================ 8. 流程 / 优势 ============================
   职责：五步交付流程（CSS 计数器自动编号）、要点列表与通用信息面板。
   ========================================================================== */
/* 子模块：流程步骤 · CSS 计数器自动生成 01-05 序号
   布局：序号用 inline-block 与 h3 同行，两者 vertical-align: middle 对齐中线；
        卡片 text-align: center 让「序号 + 标题」这一行整体居中。
   说明：序号 22px 作强调色锚点，标题 15px 深蓝，同行后不再需要额外的上/下外边距
   分割：标题行下方 1px 线把标题与说明断开，与全站卡片的分割线语言一致 */
.steps { counter-reset: step; }
.step {
  position: relative; padding: var(--sp-8) var(--sp-6);
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg);
  text-align: center;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t);
}
.step::before {
  counter-increment: step; content: "0" counter(step);
  display: inline-block; vertical-align: middle;
  color: var(--c-orange); font-size: var(--fs-lg); line-height: 1;
  margin-right: var(--sp-2);
}
.step h3 { display: inline-block; vertical-align: middle; color: var(--c-blue-darker); margin-bottom: 0; line-height: 1.4; }
/* 说明文字 13px · 层级低于 15px 标题，行高按 1.8 展开保证窄卡内可读；
   左对齐，与居中的序号标题行区分层级
   分割线画在 p 的 border-top：宽度自动撑满卡片内容区，线上下各留 12px，
   无需给「序号 + 标题」再包一层容器，HTML 结构与帝国 CMS 数据契约保持不变 */
.step p {
  color: var(--c-ink-2); text-align: left; margin-top: var(--sp-3);
  padding-top: var(--sp-3); border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm); line-height: var(--lh-sm);
  transition: border-color var(--t);
}
/* 子模块：流程步骤 hover / 键盘聚焦反馈 · 与全站 .card 同一套语言
   1. 卡片上浮 4px、阴影由 --sh-sm 提到 --sh、描边转橙，全部 280ms（--t）过渡
   2. 序号由标准橙加深为 --c-orange-deep，在橙蓝体系内给出颜色反馈
   3. 底色叠一层极浅暖白渐变，让提亮方向来自上方
   焦点态用 :focus-within 承载，卡片内后续若加入链接，键盘用户同样能获得反馈 */
.step:hover, .step:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--sh);
  border-color: var(--c-orange-line);
  background: linear-gradient(180deg, #FFFCFA 0%, #FFFFFF 46%);
}
.step:hover::before, .step:focus-within::before { color: var(--c-orange-deep); }
.step:hover p, .step:focus-within p { border-top-color: var(--c-orange-line); }
/* 尊重减少动效偏好：去掉位移，只保留描边/序号颜色这类静态可感知的变化 */
@media (prefers-reduced-motion: reduce) {
  .step { transition: none; }
  .step:hover, .step:focus-within { transform: none; }
}

/* 子模块：要点列表 · 旋转方块作项目符号，标题与说明分层 */
.feature { display: flex; gap: var(--sp-4); padding: var(--sp-4) 0; }
.feature__dot { flex: none; width: 10px; height: 10px; margin-top: 11px; border-radius: 3px; background: var(--c-orange); transform: rotate(45deg); }
.feature h3 { color: var(--c-blue-darker); }
.feature p { color: var(--c-ink-2); margin-top: var(--sp-1); }

/* 子模块：信息面板 · 白色常规版与浅蓝强调版 */
.panel { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-8); box-shadow: var(--sh-sm); }
.panel--blue { background: var(--c-blue-soft); border-color: var(--c-blue-line); }
.panel--blue h2, .panel--blue h3 { color: var(--c-blue-darker); }

/* ============================ 9. 方案 / 新闻卡片 ============================
   职责：解决方案案例墙的发丝线网格与卡片图标、新闻条的日期块。
   ========================================================================== */
/* 子模块：方案案例墙 · 3 列 2 行，单元格之间用 1px 发丝线分隔
   实现：容器底色 = 描边色，单元格白底，靠 gap:1px 漏出线条——
         相邻单元格不会出现两条边框叠成 2px 的粗线，断点改列数时线条自动跟随
   内容：每格「图标 + 标题」同行居中，整行下方以 1px 分割线收口，说明 13px 左对齐 */
.case-wall {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--c-line);
  border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden;
}
.case-cell {
  background: #fff; padding: var(--sp-8) var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-2);
  color: inherit; text-decoration: none;
  transition: background var(--t);
}
.case-cell:hover { background: var(--c-blue-soft); }
.case-cell:hover h3 { color: var(--c-blue-deep); }
.case-cell:focus-visible { outline: 2px solid var(--c-orange); outline-offset: -3px; }
/* 子模块：方案格头部 · 复用主营业务卡「图标 + 标题同行居中」的骨架
   分割线画在整行底部，标题自身不再重复画线，避免两条 1px 叠成 2px；
   标题不设 nowrap，窄屏允许换行，图标 flex:none 固定 40px 不被压缩 */
.case-cell__head {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-3); text-align: center;
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-line);
  transition: border-color var(--t);
}
.case-cell__head h3 {
  color: var(--c-blue-darker); min-width: 0;
  font-size: var(--fs-md); line-height: 1.4; text-align: center;
}
/* 子模块：方案图标 · 与 .service-card__icon 同一套 40px 蓝底圆角方块，hover 转橙 */
.case-cell__icon {
  width: 40px; height: 40px; flex: none; border-radius: var(--r);
  background: var(--c-blue-soft); display: grid; place-items: center;
  border: 1px solid var(--c-blue-line);
  transition: background var(--t), border-color var(--t);
}
.case-cell__icon svg {
  width: 22px; height: 22px; fill: none; stroke: var(--c-blue);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--t);
}
.case-cell:hover .case-cell__icon { background: var(--c-orange-soft); border-color: var(--c-orange-line); }
.case-cell:hover .case-cell__icon svg { stroke: var(--c-orange-deep); }
.case-cell:hover .case-cell__head { border-bottom-color: var(--c-orange-line); }
.case-cell p { color: var(--c-ink-2); font-size: var(--fs-sm); line-height: var(--lh-sm); }
/* 客户案例区块的说明文字（标题下方那句）单独降到 13px，与卡片内的说明同档 */
#cases-preview .section-desc { font-size: var(--fs-sm); line-height: var(--lh-sm); max-width: 820px; }

/* 子模块：新闻条目 · 左侧日期块 + 右侧标题摘要，窄屏改上下排列 */
.news-item {
  display: grid; grid-template-columns: 92px 1fr; gap: var(--sp-6);
  padding: var(--sp-6) 0; border-bottom: 1px solid var(--c-line);
}
.news-item:last-child { border-bottom: 0; }
.news-date {
  background: var(--c-blue-soft); border: 1px solid var(--c-blue-line);
  border-radius: var(--r); padding: var(--sp-3); text-align: center; align-self: start;
}
.news-date .d { display: block; color: var(--c-blue-deep); font-size: var(--fs-lg); line-height: 1.3; }
.news-date .y { display: block; color: var(--c-ink-3); font-size: var(--fs-sm); }
.news-item h3 { color: var(--c-blue-darker); margin-bottom: var(--sp-2); }
.news-item h3 a:hover { color: var(--c-orange-deep); }
.news-item p { color: var(--c-ink-2); }
.news-item .meta { color: var(--c-ink-3); margin-top: var(--sp-2); display: block; }

/* 子模块：首页新闻中心条目 · 可展开列表行（日期徽标 + 可点击标题 + 行尾下拉箭头）
   用途：仅首页「行业动态 / 技术问答」两栏；原生 details 折叠，禁用 JS 也能展开
   交互：标题 <a> 直达内容页，点击行内其余区域（徽标 / 箭头 / 空白）展开摘要，两者互不干扰
   展开区：只显示该条的部分说明（当前为占位文案，接数据库后按条目输出），不输出链接
   无障碍：summary 与标题链接均可键盘聚焦，aria-expanded 由 main.js 同步；箭头为纯装饰 aria-hidden
   徽标：动态用日期 MM.DD，问答用 Q，颜色与问答区 Q 标记一致，避免两处出现两种强调色 */
/* 子模块：栏目卡标题 · 16px 居中（图标同尺寸），标题下 1px 分割线，标题即栏目页入口（不再使用区块标题的橙线样式） */
.panel-title {
  font-size: 16px; line-height: 1.4; text-align: center;
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-line);
}
.panel-title a { color: var(--c-blue-darker); text-decoration: none; transition: color var(--t-fast); display: inline-flex; align-items: center; gap: var(--sp-2); }
.panel-title__icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.panel-title a:hover { color: var(--c-orange-deep); }
.panel-title a:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; border-radius: 2px; }

.news-list { display: grid; margin-top: var(--sp-4); }
.news-row { border-bottom: 1px solid var(--c-line); }
.news-row:last-child { border-bottom: 0; }
.news-row__summary {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0; cursor: pointer; list-style: none;
  color: inherit; transition: background var(--t-fast);
}
/* Chrome / Safari 隐藏原生三角，Firefox 用 ::marker 兜底，只保留自绘箭头 */
.news-row__summary::-webkit-details-marker { display: none; }
.news-row__summary::marker { content: ""; }
.news-row__summary:hover h3 { color: var(--c-orange-deep); }
.news-row__summary:focus-visible { outline: 2px solid var(--c-orange); outline-offset: -2px; border-radius: 2px; }
.news-row__badge {
  flex: none; min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: var(--r-sm); background: var(--c-orange-soft); color: var(--c-orange-deep);
  text-align: center; line-height: 24px; font-size: var(--fs-sm);
}
.news-row__summary h3 {
  flex: 1; min-width: 0;
  color: var(--c-blue-darker); font-size: var(--fs-sm); line-height: 1.45;
}
/* 标题即内容页入口：继承 h3 颜色、保持行内盒（不占满 h3 宽度），
   行内空白处仍留给 details 展开；hover 随整行转橙，键盘聚焦单独描边 */
.news-row__summary h3 a { color: inherit; text-decoration: none; }
.news-row__summary h3 a:hover { color: var(--c-orange-deep); }
.news-row__summary h3 a:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; border-radius: 2px; }
/* 子模块：下拉箭头 · 与导航 caret 同一图形，展开时旋转 180° 并转橙 */
.news-row__caret {
  width: 12px; height: 12px; flex: none;
  fill: none; stroke: var(--c-ink-3); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t), stroke var(--t);
}
.news-row__summary:hover .news-row__caret { stroke: var(--c-orange-deep); }
.news-row[open] .news-row__caret { transform: rotate(180deg); stroke: var(--c-orange-deep); }
/* 子模块：展开区 · 左缩进与标题对齐（徽标 24px + gap 12px = 36px） */
.news-row__excerpt { padding: 0 0 var(--sp-3) 36px; }
.news-row__excerpt p { color: var(--c-ink-2); font-size: var(--fs-sm); line-height: var(--lh-sm); }

/* ============================ 10. 问答（GEO 核心内容） ============================
   职责：基于原生 details 的问答组件，Q 标记与展开符号由伪元素生成。
         正文始终存在于 DOM，禁用 JS 也能展开，是 AI 摘录的主要来源。
   ========================================================================== */
/* 子模块：问答列表 · 间距 12px 的详情组件集合 */
.faq-list { display: grid; gap: var(--sp-3); }
/* 子模块：单条问答 · summary 可点击、原生展开，JS 仅同步 aria-expanded */
.faq-item {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r);
  overflow: hidden; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.faq-item[open] { border-color: var(--c-blue-line); box-shadow: var(--sh-sm); }
.faq-item summary {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6); cursor: pointer; color: var(--c-blue-darker);
  min-height: 52px; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: "Q"; flex: none; width: 24px; height: 24px; border-radius: var(--r-sm);
  background: var(--c-orange-soft); color: var(--c-orange-deep);
  text-align: center; line-height: 24px; font-size: var(--fs-sm);
}
.faq-item summary::after {
  content: "+"; margin-left: auto; color: var(--c-blue); flex: none;
  transition: transform var(--t-fast);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { background: var(--c-bg-soft); }
.faq-item__answer {
  padding: 0 var(--sp-6) var(--sp-6) calc(var(--sp-6) + 24px + var(--sp-3));
  color: var(--c-ink-2); border-top: 1px dashed var(--c-line); margin-top: var(--sp-1); padding-top: var(--sp-4);
}
.faq-item__answer p + p { margin-top: var(--sp-3); }
.faq-item__answer a { color: var(--c-blue-deep); text-decoration: underline; }

/* ============================ 11. 内页页头 / 面包屑 / 正文 ============================
   职责：内页浅蓝页头、面包屑、长文排版、提示框、定义框、目录与信息表。
   ========================================================================== */
/* 子模块：内页页头 · 浅蓝渐变底，承载面包屑与唯一 H1 */
.page-hero {
  background: linear-gradient(120deg, var(--c-blue-soft) 0%, #fff 78%);
  border-bottom: 1px solid var(--c-line);
  padding: var(--sp-12) 0 var(--sp-10);
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; right: -80px; top: -120px; width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(249,115,22,.16), transparent 66%);
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { color: var(--c-blue-darker); margin: var(--sp-3) 0; }
.page-hero p { color: var(--c-ink-2); max-width: 760px; }

/* 子模块：面包屑 · 13px 辅助字号，标明当前页层级 */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.breadcrumb, .breadcrumb a, .breadcrumb span { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.breadcrumb a { color: var(--c-blue); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: var(--c-ink-3); }
.breadcrumb [aria-current="page"] { color: var(--c-ink-3); }

/* 子模块：长文排版 · 限宽 860px，标题层级与列表符号统一 */
.prose { max-width: 860px; }
.prose h2 { color: var(--c-blue-darker); margin: var(--sp-10) 0 var(--sp-4); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { color: var(--c-blue-deep); margin: var(--sp-8) 0 var(--sp-3); }
.prose p { color: var(--c-ink-2); margin-bottom: var(--sp-4); }
.prose a { color: var(--c-blue-deep); text-decoration: underline; }
.prose ul { margin: 0 0 var(--sp-4) 0; display: grid; gap: var(--sp-2); }
.prose li { color: var(--c-ink-2); padding-left: var(--sp-5); position: relative; }
.prose li::before { content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; border-radius: 2px; background: var(--c-orange); transform: rotate(45deg); }
.prose .lead { color: var(--c-ink); }

/* 子模块：提示框 · 左侧橙色竖线，用于强调注意事项 */
.callout {
  border-left: 4px solid var(--c-orange); background: var(--c-orange-soft);
  border-radius: 0 var(--r) var(--r) 0; padding: var(--sp-6); margin: var(--sp-6) 0;
}
.callout p { color: var(--c-ink-2); margin: 0; }

/* 子模块：定义框 · 浅蓝底，放可摘录的公司或概念定义句 */
.definition {
  background: var(--c-blue-soft); border: 1px solid var(--c-blue-line);
  border-radius: var(--r-lg); padding: var(--sp-6); margin-bottom: var(--sp-8);
}
.definition p { color: var(--c-ink); }

/* 子模块：页内目录 · 胶囊锚点链接，兼作站内内链 */
.toc { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
.toc a { font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-4); min-height: 40px; display: inline-flex; align-items: center; border: 1px solid var(--c-blue-line); border-radius: var(--r-pill); color: var(--c-blue-deep); background: #fff; }
.toc a:hover { background: var(--c-blue-soft); }

/* 子模块：信息表 · 企业信息与联系方式的键值对展示 */
.info-table { width: 100%; border-collapse: collapse; margin: var(--sp-6) 0; }
.info-table th, .info-table td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line); vertical-align: top; }
.info-table th { width: 150px; color: var(--c-blue-deep); background: var(--c-bg-soft); }
.info-table td { color: var(--c-ink-2); }
.info-table a { color: var(--c-blue-deep); text-decoration: underline; }

/* ============================ 12. CTA / 页脚 ============================
   职责：全站统一转化条与深蓝页脚四栏布局，页脚 logo 使用白底衬保证对比度。
   ========================================================================== */
/* 子模块：转化条 · 深蓝渐变 + 橙色光晕，文案与按钮左右分布 */
.cta-band {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(115deg, var(--c-blue-darker), var(--c-blue-deep) 60%, var(--c-blue));
}
.cta-band::before {
  content: ""; position: absolute; right: -60px; bottom: -220px; width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(249,115,22,.4), transparent 66%);
}
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); flex-wrap: wrap; padding: var(--sp-12) 0; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #D3E4FA; margin-top: var(--sp-2); }
.cta-band__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* 子模块：页脚容器 · 四栏栅格与版权行，整体 13px 辅助字号 */
.site-footer { background: var(--c-blue-darker); color: #BFD5EF; padding: var(--sp-16) 0 var(--sp-6); }
/* span 会被全站 span 规则重置为 15px，页脚内统一压回 13px（品牌名由 .brand__name 单独保留 15px） */
.site-footer, .site-footer a, .site-footer p, .site-footer li, .site-footer span { font-size: var(--fs-sm); line-height: var(--lh-sm); }
/* 子模块：页脚栅格 · 品牌简介 / 主营业务 / 快速导航 / 联系我们 */
/* 页脚四栏：主营业务 / 解决方案 / 快速导航 / 联系我们 */
.footer-grid { display: grid; grid-template-columns: 1.15fr 1.2fr .9fr 1.3fr; gap: var(--sp-8); }
.footer-col h2 { color: #fff; font-size: var(--fs-md); line-height: var(--lh-lg); margin-bottom: var(--sp-4); }
.footer-col p { margin-bottom: var(--sp-3); }
.footer-col li { margin-bottom: var(--sp-2); }
/* 页脚链接统一不加下划线：默认 / 悬停 / 键盘聚焦均无下划线，
   仅用颜色变化（#BFD5EF → #fff）与全站 :focus-visible 橙色描边表达可点击 */
.site-footer a, .site-footer a:hover, .site-footer a:focus-visible { text-decoration: none; }
.site-footer a { transition: color var(--t-fast); }
.site-footer a:hover, .site-footer a:focus-visible { color: #fff; }
.footer-contact li { display: flex; gap: var(--sp-2); }
/* 标签与版权行补足 13px：span/div 不被上面的 li/p 选择器覆盖，会退回正文 15px */
.footer-contact .k { color: #7FA6D4; flex: none; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.14); margin-top: var(--sp-12); padding-top: var(--sp-6);
  color: #8FB3DE; font-size: var(--fs-sm); line-height: var(--lh-sm);
}
/* 版权行右侧：友情链接列表。「友情链接：」标签与站点名保持同行，窄屏时整块随 footer-bottom 换行 */
.footer-bottom .footer-links { white-space: nowrap; }
/* 站点名链接与左侧版权同色（inherit），hover / 键盘聚焦转白并描边 */
.footer-bottom .footer-links a { color: inherit; }
.footer-bottom .footer-links a:hover, .footer-bottom .footer-links a:focus-visible { color: #fff; }
.footer-bottom .footer-links a:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; border-radius: 2px; }

/* ============================ 13. 悬浮联系 / 回到顶部 ============================
   职责：右侧固定工具条，含电话、微信、回到顶部及 hover/焦点提示气泡。
   ========================================================================== */
/* 子模块：悬浮工具条 · 固定右侧，z-index 低于 sticky 头部 */
.float-bar { position: fixed; right: 14px; bottom: 88px; z-index: 90; display: grid; gap: var(--sp-2); }
.float-btn {
  width: 52px; height: 52px; border-radius: var(--r); display: grid; place-items: center;
  background: #fff; border: 1px solid var(--c-line); box-shadow: var(--sh);
  color: var(--c-blue-deep); position: relative;
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.float-btn:hover { transform: translateX(-3px); background: var(--c-orange-deep); color: #fff; }
.float-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.float-btn__tip {
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  white-space: nowrap; background: var(--c-blue-darker); color: #fff;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  font-size: var(--fs-sm); opacity: 0; visibility: hidden; transition: opacity var(--t-fast), visibility var(--t-fast);
}
.float-btn:hover .float-btn__tip, .float-btn:focus-visible .float-btn__tip { opacity: 1; visibility: visible; }
/* 子模块：回到顶部 · 默认隐藏，滚动超过 420px 由 main.js 加 is-visible */
.backtop { opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t); }
.backtop.is-visible { opacity: 1; visibility: visible; }

/* ============================ 14. 滚动动效 ============================
   职责：渐进增强的入场动效，只有脚本确认可用后才给 html 加 js-reveal 类。
   ========================================================================== */
/* 渐进增强：无 JS 或抓取器环境内容始终可见；
   仅当脚本确认 IntersectionObserver 可用后（html.js-reveal）才启用入场动效 */
/* 渐进增强核心：默认可见；仅在 html.js-reveal 下才隐藏未进入视口的元素 */
.reveal { opacity: 1; transform: none; }
html.js-reveal .reveal { transition: opacity 560ms ease, transform 560ms ease; }
html.js-reveal .reveal:not(.is-in) { opacity: 0; transform: translateY(18px); }

/* ============================ 15. 响应式（仅改变栅格与间距，不改字号） ============================
   职责：1024 / 1080 / 900 / 640 四个断点，只调整栅格、导航形态与间距。
         字号令牌不在断点内被覆盖，保证三级字号规范全站一致。
   ========================================================================== */
/* 断点 ≤1080px · 首屏改单列、玻璃卡组左对齐限宽，页脚改两列 */
@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
  .hero__copy { max-width: 780px; }
  .hero-cards { justify-self: start; max-width: 320px; }
  /* 五步流程在 1080 以下降到三列（3 + 2），避免每格被压到 180px 以内导致说明文字挤成窄条 */
  .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
  /* 信息条：收紧两栏间距，仍保持左关键词 / 右电话的对齐关系 */
  .topbar__left, .topbar__right { gap: var(--sp-3); }
}
/* 断点 ≤900px · 启用汉堡菜单与折叠子菜单，三/四列栅格降为两列 */
@media (max-width: 900px) {
  .header__actions { display: flex; }
  .site-header .nav { margin-left: 0; }
  .nav-toggle { display: inline-flex; }
  .header__actions .btn { display: none; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--c-line);
    box-shadow: var(--sh-lg); padding: var(--sp-3) var(--sp-6) var(--sp-6);
  }
  .nav.is-open { display: flex; }
  .nav__group { width: 100%; }
  /* 移动端子菜单为静态展开，无需悬停桥接；禁用它以免遮挡首个可点击子项 */
  .nav__item.has-sub::after { display: none; }
  .nav__group .nav__link { flex: 1; padding-right: var(--sp-4); }
  .nav__link { width: 100%; justify-content: space-between; border-bottom: 1px solid var(--c-line); border-radius: 0; }
  .nav__link[aria-current="page"]::after { display: none; }
  .nav__subtoggle { width: 44px; }
  .nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--c-orange-line);
    border-radius: 0; padding: 0 0 var(--sp-2) var(--sp-4); display: none;
  }
  .nav__item.is-open .nav__sub { display: block; }
  .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 案例墙在平板降为 2 列，1px 发丝线随行列自动重排；九格为奇数，末格横跨两列避免留白成灰块 */
  .case-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-cell:last-child { grid-column: span 2; }
  /* 六格方案墙为偶数，末格不跨列，避免最后一行出现一整条宽格 */
  .case-wall--even .case-cell:last-child { grid-column: auto; }
  .section { padding: var(--sp-16) 0; }
}
/* 断点 ≤640px · 手机单列、隐藏次要信息、缩小悬浮按钮与内边距 */
@media (max-width: 640px) {
  .wrap { padding: 0 var(--sp-4); }
  /* 信息条：手机端不再隐藏右侧电话，改为左栏关键词省略截断 + 右栏电话右对齐 */
  .topbar .wrap { justify-content: space-between; }
  .topbar__left { flex: 1; min-width: 0; }
  .topbar__keywords { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .topbar__tel { flex: none; }
  .grid--2, .grid--3, .grid--5 { grid-template-columns: 1fr; }
  /* 案例墙手机端单列，只剩横向分隔线；内边距收一档避免文字过窄 */
  .case-wall { grid-template-columns: 1fr; }
  .case-cell:last-child { grid-column: auto; }
  .case-cell { padding: var(--sp-6) var(--sp-4); }
  .hero .wrap { padding-top: var(--sp-12); padding-bottom: var(--sp-12); }
  /* 手机端玻璃卡保持两列，仅再收紧高度；水平内边距沿用桌面 2px，保证 15px 业务名单行 */
  .hero-cards { max-width: 100%; }
  .biz-card { min-height: 64px; }
  .news-item { grid-template-columns: 1fr; gap: var(--sp-3); }
  .news-date { display: inline-flex; gap: var(--sp-2); align-items: baseline; padding: var(--sp-1) var(--sp-3); }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-band__inner { padding: var(--sp-10) 0; }
  .faq-item summary, .faq-item__answer { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .faq-item__answer { padding-left: var(--sp-4); }
  .info-table th { width: 96px; }
  .float-bar { right: 8px; bottom: 72px; }
  .float-btn { width: 46px; height: 46px; }
  .section-head { margin-bottom: var(--sp-8); }
}

/* ============================ 16. 无障碍：减少动效 ============================
   职责：尊重系统「减少动态效果」偏好，关闭平滑滚动与过渡，停用首屏漂浮，并强制内容可见。
   ========================================================================== */
/* 系统开启减少动效时：平滑滚动与所有过渡失效，reveal 内容强制可见 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html.js-reveal .reveal:not(.is-in) { opacity: 1; transform: none; }
  /* 首屏左栏与六张业务卡完全停用漂浮（含二维位移），回到静止位置 */
  .hero__copy, .biz-card { animation: none !important; }
}

/* ==========================================================================
   临沂精益软件有限公司 · 专题页 / 列表页 / 内容页样式（第 17–24 节）
   原 topic.css 已并入本文件，全站样式统一由 style.css 输出
   --------------------------------------------------------------------------
   设计约束（继承 style.css）
   1. 字体与字重沿用全站：微软雅黑 / font-weight: normal，本文件不引入任何加粗
   2. 字号只用 22px（章节标题）/ 15px（侧栏标题、卡片标题、正文）/ 13px（辅助）
   3. 颜色只引用本文件第 1 节的设计变量；本节规则位于基础样式之后，保持原有层叠顺序
   4. 桌面端左侧栏 sticky 悬浮，≤900px 降级为普通卡片，避免遮挡长文
   5. 正文全部为静态 HTML，本文件不改变任何可见/不可见内容的可读性
   ========================================================================== */

/* ============================ 17. 左右栅格 ============================
   左列 260px 固定，右列自适应；align-items:start 让 sticky 以内容区顶部为基准。
   纵向节奏用 padding-top/bottom 长写，横向留给 .wrap 的页边距，保证页头、正文、卡片左右对齐 */
.topic-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-16);
}

/* ============================ 18. 左侧悬浮栏 ============================
   top = sticky 页头 76px + 20px 呼吸；不设高度上限与栏内滚动，
   避免桌面端出现第二条滚动条、把解决方案卡片拦腰截断 */
.topic-side {
  position: sticky;
  top: 96px;
  display: grid;
  gap: var(--sp-4);
  align-self: start;
}

/* 侧栏卡片：白底 + 1px 发丝线，与首页卡片同一套语言；hover 抬升描边与阴影 */
.topic-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  padding: var(--sp-4) var(--sp-6);
  box-shadow: var(--sh-sm);
  transition: border-color var(--t), box-shadow var(--t);
}
.topic-card:hover { border-color: var(--c-blue-line); box-shadow: var(--sh); }

/* 卡片标题：24px 蓝底图标方块 + 15px 标题同行，标题下 1px 灰线叠一段 28px 橙线 */
.topic-card__title {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-blue-darker);
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-line);
  margin-bottom: var(--sp-3);
}
.topic-card__title::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 28px; height: 2px;
  background: var(--c-orange);
}
.topic-card__icon {
  width: 24px; height: 24px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--c-blue-soft);
  border: 1px solid var(--c-blue-line);
  transition: background var(--t), border-color var(--t);
}
.topic-card__icon svg {
  width: 14px; height: 14px;
  fill: none;
  stroke: var(--c-blue);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--t);
}
.topic-card:hover .topic-card__icon { background: var(--c-orange-soft); border-color: var(--c-orange-line); }
.topic-card:hover .topic-card__icon svg { stroke: var(--c-orange-deep); }

/* 侧栏导航（主营业务 / 解决方案共用）：14px（比辅助字号 13px 大一档）；
   01–06 序号 + 右侧 chevron，hover 箭头前移、序号转橙；当前项以橙色左边线 + 淡蓝底标识 */
.topic-nav { display: grid; gap: var(--sp-1); counter-reset: topicnav; }
.topic-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  counter-increment: topicnav;
  padding: 6px 26px 6px var(--sp-2);
  border-left: 2px solid transparent;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--c-blue-darker);
  font-size: 14px;
  line-height: var(--lh-sm);
  text-decoration: none;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.topic-nav a::before {
  content: counter(topicnav, decimal-leading-zero);
  flex: none;
  width: 18px;
  color: var(--c-ink-3);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  opacity: .65;
  transition: color var(--t-fast), opacity var(--t-fast);
}
.topic-nav a::after {
  content: "";
  position: absolute;
  right: 12px; top: 50%;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  opacity: .35;
  transition: right var(--t-fast), opacity var(--t-fast);
}
.topic-nav a:hover { color: var(--c-orange-deep); background: var(--c-bg-soft); border-left-color: var(--c-orange); }
.topic-nav a:hover::after { right: 8px; opacity: .9; }
.topic-nav a:hover::before,
.topic-nav a[aria-current="page"]::before { color: var(--c-orange-deep); opacity: 1; }
.topic-nav a:focus-visible { outline: 2px solid var(--c-orange); outline-offset: -2px; }
.topic-nav a[aria-current="page"] {
  color: var(--c-orange-deep);
  background: var(--c-blue-soft);
  border-left-color: var(--c-orange);
}
.topic-nav a[aria-current="page"]::after { opacity: .9; }

/* ============================ 19. 右侧专题长文 ============================
   取消 .prose 的 860px 限宽，由栅格右列决定；章节以 1px 发丝线分隔 */
.topic-content { max-width: none; min-width: 0; }
.topic-section {
  border-top: 1px solid var(--c-line);
  padding-top: var(--sp-10);
  margin-top: var(--sp-10);
  scroll-margin-top: 96px;
}
.topic-section:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.topic-section h2 { margin: 0 0 var(--sp-4); }
.topic-section h3 { margin-top: var(--sp-6); }

/* 卡片组：三列用于「抓得到 / 读得懂 / 愿意引」，两列用于「四层交付」 */
.topic-trio, .topic-grid { display: grid; gap: var(--sp-4); margin: var(--sp-6) 0; }
.topic-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.topic-mini {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  padding: var(--sp-4) var(--sp-6);
}
.topic-mini h3 {
  color: var(--c-blue-darker);
  font-size: var(--fs-md);
  text-align: center;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-line);
  margin: 0;
}
.topic-mini p {
  color: var(--c-ink-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  margin: var(--sp-3) 0 0;
}

/* 表格：窄屏允许横向滚动，不压缩文字，也不撑破页面 */
.topic-table-wrap { overflow-x: auto; margin: var(--sp-6) 0; }
.topic-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.topic-table th, .topic-table td {
  text-align: left; vertical-align: top;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-sm); line-height: var(--lh-sm);
}
.topic-table thead th { color: var(--c-blue-deep); background: var(--c-blue-soft); }
.topic-table tbody th { width: 110px; color: var(--c-blue-deep); }
.topic-table td { color: var(--c-ink-2); }
.topic-table--check tbody th { width: 44px; text-align: center; color: var(--c-orange-deep); }

/* ============================ 20. 专题页头 ============================
   复用首页首屏 .hero 的三层背景：118deg 蓝橙渐变 + 右上 620px 橙色光晕 + 56px 网格纹理，
   数值与 style.css 保持一致；仅加在本页 section 上，其它内页仍用浅蓝页头。
   深色底必须整体反白：h1 白、正文 #DBE8FA、面包屑与目录改玻璃态，避免沿用深色文字 */
.page-hero--deep {
  background: linear-gradient(118deg, var(--c-blue-darker) 0%, var(--c-blue-deep) 46%, var(--c-blue) 100%);
  border-bottom-color: rgba(255, 255, 255, .14);
}
/* 光晕：覆盖 .page-hero::after 原来的 360px 浅橙球，改由 ::before 承载首页同款强光 */
.page-hero--deep::before {
  content: "";
  position: absolute; right: -120px; top: -220px;
  width: 620px; height: 620px; pointer-events: none;
  background: radial-gradient(circle, rgba(249, 115, 22, .42) 0%, rgba(249, 115, 22, 0) 66%);
}
/* 网格：::after 重设为首页首屏的全幅纹理，宽度必须显式 auto 才能盖掉原来的 360px */
.page-hero--deep::after {
  inset: 0; width: auto; height: auto; pointer-events: none; opacity: .16;
  background-image: linear-gradient(rgba(255, 255, 255, .4) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .4) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 65%);
  mask-image: linear-gradient(90deg, transparent, #000 65%);
}
.page-hero--deep h1 { color: #fff; }
.page-hero--deep h1 em { color: #FFB067; }
.page-hero--deep p { color: #DBE8FA; }
.page-hero--deep p strong { color: #FFD0A8; }
/* 面包屑：链接浅蓝、分隔符半透明白、当前项淡橙，与首页徽标同一套色阶；
   hover 只提亮文字颜色、不加下划线（覆盖 style.css 内页面包屑默认的 underline） */
.page-hero--deep .breadcrumb a { color: #C6DBF5; text-decoration: none; }
.page-hero--deep .breadcrumb a:hover,
.page-hero--deep .breadcrumb a:focus-visible { color: #fff; text-decoration: none; }
.page-hero--deep .breadcrumb .sep { color: rgba(255, 255, 255, .45); }
.page-hero--deep .breadcrumb [aria-current="page"] { color: #FFE0C4; }
/* 目录胶囊：白底改为 10% 白色玻璃，hover 提到 20%，边框同色系加亮 */
.page-hero--deep .toc a {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .32);
  color: #E8F1FB;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.page-hero--deep .toc a:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .55); color: #fff; }
.page-hero--deep .toc a:focus-visible { outline: 2px solid #FFB067; outline-offset: 2px; }

/* ============================ 21. 方案视频位 ============================
   三列位：首个占满整行（主视频），后两个并排；≤640px 全部单列。
   占位态用深蓝渐变 + 玻璃拟态播放键，与专题页头同一套语言；
   接入真实视频时直接替换 .topic-video__frame 内的 span，宽高比由 aspect-ratio 兜住 */
.topic-videos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
  margin: var(--sp-6) 0;
}
.topic-video { margin: 0; min-width: 0; }
.topic-video:first-child { grid-column: 1 / -1; }
.topic-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--c-blue-line);
  border-radius: var(--r);
  background:
    radial-gradient(circle at 78% 18%, rgba(249, 115, 22, .38) 0%, rgba(249, 115, 22, 0) 58%),
    linear-gradient(118deg, var(--c-blue-darker) 0%, var(--c-blue-deep) 52%, var(--c-blue) 100%);
  transition: border-color var(--t), box-shadow var(--t);
}
.topic-video__frame video,
.topic-video__frame img,
.topic-video__frame iframe {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  border: 0;
}
.topic-video:hover .topic-video__frame { border-color: var(--c-orange-line); box-shadow: var(--sh); }
/* 播放键：白 14% 玻璃圆 + 半透明白描边，hover 放大到 1.06 并转橙 */
.topic-video__play {
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .45);
  transition: transform var(--t), background var(--t), border-color var(--t);
}
.topic-video__play svg { width: 22px; height: 22px; fill: #fff; }
.topic-video:hover .topic-video__play {
  transform: scale(1.06);
  background: rgba(249, 115, 22, .55);
  border-color: rgba(255, 255, 255, .7);
}
/* 角标与提示：13px 辅助字，占位期说明尺寸与状态，接入视频后可留作时长标记 */
.topic-video__badge {
  position: absolute;
  left: var(--sp-3); top: var(--sp-3);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .32);
  color: #E8F1FB;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}
.topic-video__hint {
  position: absolute;
  left: 0; right: 0; bottom: var(--sp-3);
  text-align: center;
  color: rgba(255, 255, 255, .62);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}
.topic-video figcaption { margin-top: var(--sp-3); }
.topic-video figcaption h3 {
  margin: 0;
  color: var(--c-blue-darker);
  font-size: var(--fs-md);
  line-height: var(--lh-md);
}
.topic-video figcaption p {
  margin: 4px 0 0;
  color: var(--c-ink-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

/* ============================ 22. 案例列表 ============================
   案例页右侧清单：每条只呈现三部分——标题（16px）、发布时间（13px）、内容简介（13px）。
   标题与时间同一行（时间右对齐、等宽数字），两者下方 1px 发丝线把简介隔开；
   列表底部数字分页：当前页橙底白字，首末页时上一页/下一页为虚线禁用态 */
/* 区块标题「客户案例」「案例问答」：居中，下方 1px 橙色分割线横贯正文 */
#list > h2,
#faq > h2 {
  text-align: center;
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--c-orange);
}
.case-list { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
/* 选择器带 .case-list 前缀：覆盖 .prose li 的 padding-left 与 ::before 橙色菱形点 */
.case-list > .case-item {
  position: relative;
  padding: var(--sp-5) var(--sp-6);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.case-list > .case-item::before { content: none; }
/* 分页靠类切换显隐；[hidden] 一并兜住，避免脚本与样式各自为政。
   注意：这里绝不能带 :hover —— 悬停即 display:none 会让鼠标离开元素，
   触发 mouseleave 后重新显示，形成"放上去就闪"的死循环 */
.case-item[hidden], .case-item.is-hidden { display: none; }
/* 标题行：窄屏允许时间另起一行并靠右，标题始终占满左侧 */
.case-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px var(--sp-4);
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--c-line);
}
.case-item .case-item__title {
  margin: 0;
  color: var(--c-blue-darker);
  font-size: 16px;
  line-height: 24px;
  transition: color var(--t-fast);
}
/* 标题即链接：颜色沿用标题色，伪元素铺满整张卡片让整条都能点；
   hover 与键盘聚焦时才转橙，避免整页标题常年挂链接色 */
.case-item .case-item__title a { color: inherit; text-decoration: none; }
.case-item .case-item__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r);
}
.case-item .case-item__title a:focus-visible { outline: none; }
/* 悬停反馈与首页卡片（.card）同款：上浮 + 阴影加深 + 描边变橙。
   位移取 3px 而非首页的 4px：列表项首尾相接、扫读时鼠标常贴着卡片走，
   4px 的上移会让底部边缘反复进出触发 hover，3px 更稳且观感一致 */
.case-item:hover, .case-item:focus-within {
  border-color: var(--c-orange-line);
  box-shadow: var(--sh);
  transform: translateY(-3px);
}
/* 尊重减少动效偏好：去掉位移，只保留描边与标题颜色这类静态变化 */
@media (prefers-reduced-motion: reduce) {
  .case-item { transition: none; }
  .case-item:hover, .case-item:focus-within { transform: none; }
}
.case-item:hover .case-item__title, .case-item:focus-within .case-item__title { color: var(--c-orange-deep); }
.case-item .case-item__date {
  margin-left: auto;
  color: var(--c-ink-3);
  font-size: var(--fs-sm);
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.case-item .case-item__desc {
  margin: 0;
  color: var(--c-ink-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  transition: color var(--t-fast);
}
.case-item:hover .case-item__desc, .case-item:focus-within .case-item__desc { color: var(--c-ink); }
/* 无脚本提示（noscript 内）与列表辅助文字共用 */
.case-list__meta { margin: 0; color: var(--c-ink-3); font-size: var(--fs-sm); line-height: var(--lh-sm); }

/* 数字分页：与正文左右对齐，页码由脚本按条数生成，无脚本时条目全部可见 */
/* 分页上下都不描线：与列表、与下一节之间只用留白分隔 */
.case-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-8) 0 0;
  padding-top: 0;
  border-top: 0;
}
/* 案例问答节去掉 .topic-section 默认顶线，避免分页下方再出现一条横线 */
#faq { border-top: 0; }
/* 问答答案正文用辅助字号 13px（问题条仍 15px、区块标题 22px）。
   各页问答区块的 id 都是 faq，此规则对全站问答统一生效，与案例简介同一档 */
#faq .faq-item__answer,
#faq .faq-item__answer p {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}
.case-pager__nums { display: flex; gap: 6px; }
.case-pager__btn,
.case-pager__num {
  min-width: 38px;
  height: 36px;
  padding: 0 var(--sp-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--c-blue-darker);
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.case-pager__num { padding: 0; font-variant-numeric: tabular-nums; }
.case-pager__btn:hover,
.case-pager__num:hover { border-color: var(--c-orange-line); color: var(--c-orange-deep); }
.case-pager__btn[aria-disabled="true"] { color: var(--c-ink-3); border-style: dashed; cursor: default; }
.case-pager__btn[aria-disabled="true"]:hover { border-color: var(--c-line); color: var(--c-ink-3); }
.case-pager__num.is-active { background: var(--c-orange); border-color: var(--c-orange); color: #fff; }
.case-pager__num.is-active:hover { background: var(--c-orange-deep); border-color: var(--c-orange-deep); color: #fff; }
.case-pager .case-pager__info { margin: 0 0 0 auto; color: var(--c-ink-3); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.case-pager__btn:focus-visible, .case-pager__num:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; }

/* 行业动态 / 技术问答列表：与案例列表同一套视觉，仅换语义前缀 entry-*，
   保持「标题 16px + 发布时间 13px + 简介 13px」三要素，分页沿用 .case-pager */
.entry-list { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
.entry-list > .entry-item {
  position: relative;
  padding: var(--sp-5) var(--sp-6);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.entry-list > .entry-item::before { content: none; }
/* 悬停反馈与案例列表、首页卡片一致：上浮 + 阴影加深 + 橙色描边，标题与简介同步变色 */
.entry-item:hover, .entry-item:focus-within {
  border-color: var(--c-orange-line);
  box-shadow: var(--sh);
  transform: translateY(-3px);
}
.entry-item[hidden], .entry-item.is-hidden { display: none; }
.entry-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px var(--sp-4);
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--c-line);
}
.entry-item .entry-item__title {
  margin: 0;
  color: var(--c-blue-darker);
  font-size: 16px;
  line-height: 24px;
  transition: color var(--t-fast);
}
.entry-item .entry-item__title a { color: inherit; text-decoration: none; }
.entry-item .entry-item__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r);
}
.entry-item .entry-item__title a:focus-visible { outline: none; }
.entry-item:hover .entry-item__title, .entry-item:focus-within .entry-item__title { color: var(--c-orange-deep); }
.entry-item .entry-item__date {
  margin-left: auto;
  color: var(--c-ink-3);
  font-size: var(--fs-sm);
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 简介跟随悬停一起加深：标题转橙负责"哪一条"，简介加深负责"看得清" */
.entry-item .entry-item__desc {
  margin: 0;
  color: var(--c-ink-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  transition: color var(--t-fast);
}
.entry-item:hover .entry-item__desc, .entry-item:focus-within .entry-item__desc { color: var(--c-ink); }
/* 尊重减少动效偏好：去掉位移，保留描边与文字颜色 */
@media (prefers-reduced-motion: reduce) {
  .entry-item { transition: none; }
  .entry-item:hover, .entry-item:focus-within { transform: none; }
}
.entry-list__meta { margin: 0; color: var(--c-ink-3); font-size: var(--fs-sm); line-height: var(--lh-sm); }

/* ============================ 23. 案例详情 ============================
   详情页沿用列表页骨架（深色页头 + 左侧常驻导航 + 右侧长文），差异只有两处：
   页头收窄为「面包屑 + 栏目 + 目录」，唯一 H1 与发布时间、关键字放在右侧文章头。
   标题、时间、关键字三层信息与列表条目同一套字号，正文仍用 15px/28px */
.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;
}
/* 页头高度与列表页对齐：内边距沿用 .page-hero 的 --sp-12 / --sp-10；
   详情页比列表页少一行目录胶囊（约 66px），内容自然偏矮，
   用 min-height 补齐到列表页实测高度（320px），底边与列表页齐平；
   断点处的 348 / 375 / 437 分别对应列表页在 520–640 / 400–519 / ≤399 的实际高度 */
.page-hero--slim {
  padding: var(--sp-12) 0 var(--sp-10);
  min-height: 320px;
}
.page-hero--slim .breadcrumb { margin-bottom: var(--sp-3); }
/* 面包屑末项是本页完整链接：允许在主域后换行，不撑破页头 */
.page-hero--slim .breadcrumb > span[aria-current] { word-break: break-all; }

/* 文章头：标题 / 分割线 / 发布时间与关键字同一行，整块居中；
   标题虽与页头 H1 同文，但此处在正文区内承担段落级标题语义，故用 h2 */
.article-head { margin-bottom: var(--sp-6); text-align: center; }
.article-head .article-head__title {
  margin: 0 0 var(--sp-4);
  color: var(--c-blue-darker);
  font-size: var(--fs-lg);
  line-height: 1.5;
  text-align: center;
}
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-2) var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-orange);
  color: var(--c-ink-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}
.article-meta time { color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.article-meta__dot { width: 1px; height: 12px; background: var(--c-line); }

/* 正文首段用正文色提亮，作为导语；其余段落沿用 .prose。
   正文由数据库 content 字段输出时可能不带 .lead，用 :first-of-type 兜住首段 */
.article-body > .lead,
.article-body > p:first-of-type { color: var(--c-ink); }
/* 库里的正文若漏掉 .topic-table-wrap，至少保证裸表格有同样的排版与边框，
   窄屏横向滚动仍依赖 .topic-table-wrap，故模板注释中要求保留该类名 */
.article-body > table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}
.article-body > table th,
.article-body > table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}
.article-body > table thead th { color: var(--c-blue-deep); background: var(--c-blue-soft); }
.article-body h2 { scroll-margin-top: 96px; }

/* 文末翻页：上一篇 / 下一篇两行，标签与标题同行内联排版（标签后带全角冒号），
   标题过长时接在标签后自然折行，不整体掉行；无上一篇时保留占位不加链接。
   选择器带 .article-nav 前缀，压过 .prose a 的下划线与蓝色 */
.article-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-orange);
}
.article-nav .article-nav__item {
  display: block;
  min-width: 0;
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-blue-darker);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  text-decoration: none;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.article-nav a.article-nav__item:hover {
  border-color: var(--c-orange-line);
  background: var(--c-bg-soft);
  color: var(--c-orange-deep);
}
.article-nav__label {
  color: var(--c-ink-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}
.article-nav__title {
  display: inline;
  color: inherit;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  overflow-wrap: anywhere;
}
.article-nav .article-nav__item.is-disabled {
  background: var(--c-bg-soft);
  border-style: dashed;
}
.article-nav .article-nav__item.is-disabled .article-nav__title { color: var(--c-ink-3); }

/* ============================ 24. 404 页面 ============================
   职责：错误码 404 大字（0 橙色描点）、说明文案、两个按钮与常用页面链接组。
   视觉：沿用内页页头的浅蓝渐变底与橙色光晕；错误码只作视觉装饰（aria-hidden），
         语义信息由唯一 H1「页面未找到」承载。
   ========================================================================== */
.error-hero {
  background: linear-gradient(120deg, var(--c-blue-soft) 0%, #fff 78%);
  border-bottom: 1px solid var(--c-line);
  padding: var(--sp-12) 0 var(--sp-16);
  position: relative; overflow: hidden;
}
.error-hero::after {
  content: ""; position: absolute; right: -80px; top: -120px; width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(249,115,22,.16), transparent 66%);
}
.error-hero .wrap { position: relative; z-index: 1; }
/* 大号错误码：76px 属 404 专属装饰字号，不进入全站三级字号体系 */
.error-code {
  margin: var(--sp-8) 0 var(--sp-2);
  color: var(--c-blue-darker);
  font-size: 76px;
  line-height: 1.1;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
/* span 被全局字号收敛规则压到 15px，这里显式继承错误码的 76px */
.error-code span { color: var(--c-orange); font-size: inherit; }
.error-hero h1 { margin: 0 0 var(--sp-3); }
.error-hero__desc { max-width: 640px; }
.error-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-6) 0 var(--sp-7); }
/* 常用页面链接组：13px 标签 + 浅底小卡链接，窄屏自动换行 */
.error-links {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-6);
}
.error-links__label { color: var(--c-ink-3); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.error-links a {
  padding: var(--sp-1) var(--sp-3);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  color: var(--c-blue-deep);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  text-decoration: none;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.error-links a:hover { border-color: var(--c-orange-line); background: var(--c-orange-soft); color: var(--c-orange-deep); }
.error-contact { color: var(--c-ink-2); }
.error-contact a { color: var(--c-orange-deep); }

/* ============================ 25. 关于我们页组件 ============================
   职责：数据条、资质卡、优势卡、业务卡、流程节点五组组件，只服务 about.html。
   约束：沿用 22 / 15 / 13 三级字号与「不加粗」规则；层级由色块、描边与留白建立，
         卡片统一 1px 发丝线 + 8px 圆角，hover 转为橙描边并轻微抬升。
   ========================================================================== */

/* 数据条：四格等分，格间用 1px 竖线分隔；数字 22px 橙色，单位与标签 13px */
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: var(--sp-6) 0 var(--sp-4);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.about-stat {
  padding: var(--sp-5) var(--sp-3);
  text-align: center;
  border-left: 1px solid var(--c-line);
}
.about-stat:first-child { border-left: 0; }
.about-stat__num {
  display: block;
  color: var(--c-orange-deep);
  font-size: var(--fs-lg);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
/* 单位跟在数字后面，压到 13px，避免「15 年+」整体过大 */
.about-stat__num small {
  margin-left: 2px;
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}
.about-stat__label {
  display: block;
  margin-top: var(--sp-1);
  color: var(--c-ink-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

/* 资质标签：浅蓝胶囊，与 hero 目录胶囊区分（这里是静态标签，不可点） */
.about-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.about-tags span {
  padding: 2px var(--sp-3);
  background: var(--c-blue-soft);
  border: 1px solid var(--c-blue-line);
  border-radius: var(--r-pill);
  color: var(--c-blue-deep);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

/* 资质卡：上部证书/牌匾示意图（4:3），下部标题与说明；重点卡 3 列，小卡 4 列 */
.honor-grid { display: grid; gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-6); }
.honor-grid--feature { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-6); }
.honor-grid--certs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.honor-grid--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.honor-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.honor-card:hover { border-color: var(--c-orange-line); box-shadow: var(--sh); transform: translateY(-2px); }
.honor-card__media {
  overflow: hidden;
  background: #f1ecdf;
}
/* 重点卡为横版证书照（执照/高新/涉密资质），小卡为竖版证书照（软著/商标） */
.honor-grid--feature .honor-card__media { aspect-ratio: 4 / 3; }
.honor-grid--certs .honor-card__media { aspect-ratio: 3 / 4; }
.honor-grid--wide .honor-card__media { aspect-ratio: 16 / 10; }
.honor-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t);
}
.honor-card:hover .honor-card__media img { transform: scale(1.04); }
/* 图下说明（标题/备注）居中，与证书图片居中对齐；行高收紧，长证书名两行更紧凑 */
/* 上内边距 6px = 图片与说明文字之间的距离（下/左右保持原间距） */
.honor-card__body { min-width: 0; padding: 6px var(--sp-4) var(--sp-4); text-align: center; }
.honor-card__title {
  color: var(--c-blue-darker);
  font-size: var(--fs-md);
  line-height: 1;
}
.honor-card__note {
  display: block;
  margin-top: 4px;
  color: var(--c-ink-3);
  font-size: var(--fs-sm);
  line-height: 1;
}
/* 小卡：标题收窄到 13px，4 列也能放下长证书名 */
.honor-grid--certs .honor-card__body { padding: 6px var(--sp-3) var(--sp-3); }
.honor-grid--certs .honor-card__title { font-size: var(--fs-sm); line-height: 1; color: var(--c-ink); }

/* 优势卡：3 列 × 2 行，图标与标题同行 */
.adv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-6) 0;
}
.adv-item {
  padding: var(--sp-5) var(--sp-6);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.adv-item:hover { border-color: var(--c-blue-line); box-shadow: var(--sh); transform: translateY(-2px); }
/* 图标与标题整体居中，标题 16px */
.adv-head { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
/* 图标样式与全站业务卡（.svc-card__icon）统一：浅蓝底 + 蓝描边 + 蓝色线性图标 */
.adv-icon {
  flex: none;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  background: var(--c-blue-soft);
  border: 1px solid var(--c-blue-line);
}
.adv-icon svg {
  width: 18px; height: 18px;
  fill: none; stroke: var(--c-blue); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.adv-item h3 { color: var(--c-blue-darker); font-size: 16px; }
.adv-item p { margin-top: var(--sp-2); color: var(--c-ink-2); font-size: var(--fs-sm); line-height: var(--lh-sm); text-align: center; }

/* 业务卡：3 列，底部链接胶囊对齐；hover 顶部出现橙色短线 */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-6) 0;
}
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.svc-card::before {
  content: "";
  position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: var(--c-orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t);
}
.svc-card:hover { border-color: var(--c-blue-line); box-shadow: var(--sh); transform: translateY(-2px); }
.svc-card:hover::before { transform: scaleX(1); }
/* 整卡为链接：清掉 a 默认蓝字与下划线，文字颜色仍由内部 h3/p 决定 */
a.svc-card { color: inherit; text-decoration: none; }
a.svc-card:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 3px; }
/* 头部：图标与标题同一行、整行居中 */
.svc-card__head { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.svc-card__icon {
  flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r);
  background: var(--c-blue-soft);
  border: 1px solid var(--c-blue-line);
}
.svc-card__icon svg {
  width: 20px; height: 20px;
  fill: none; stroke: var(--c-blue); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.svc-card h3 { margin: 0; color: var(--c-blue-darker); font-size: 16px; }
.svc-card p { color: var(--c-ink-2); font-size: var(--fs-sm); line-height: var(--lh-sm); text-align: center; }

/* 流程节点：3 列 × 2 行，左侧 01–06 序号方块；序号为装饰，读屏忽略 */
.flow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-6) 0;
}
/* 流程卡：每卡 1 列 2 行 —— 序号与标题同行居中，说明另起一行居中 */
.flow-item {
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.flow-item:hover { border-color: var(--c-blue-line); box-shadow: var(--sh); }
.flow-item__head { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); }
.flow-item__no {
  flex: none;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: var(--c-orange-soft);
  border: 1px solid var(--c-orange-line);
  color: var(--c-orange-deep);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.flow-item__head h3 { color: var(--c-blue-darker); font-size: 16px; line-height: 1; }
.flow-item p { margin-top: var(--sp-3); color: var(--c-ink-2); font-size: var(--fs-sm); line-height: var(--lh-sm); text-align: center; }

/* ============================ 26. 响应式 ============================ */
@media (max-width: 900px) {
  .topic-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); padding-top: var(--sp-8); padding-bottom: var(--sp-12); }
  .topic-side { position: static; max-height: none; overflow: visible; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 两组各 6 项；3 列会把「无人值守称重方案」等长条目折行，改 2 列 + 不换行。
     窄列隐藏序号、箭头内收，给长文案留足宽度，避免截断 */
  .topic-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topic-nav a { white-space: nowrap; gap: var(--sp-1); padding-left: var(--sp-1); padding-right: 20px; }
  .topic-nav a::before { display: none; }
  .topic-nav a::after { right: 8px; }
  .topic-nav a:hover::after { right: 5px; }
  /* 关于我们：资质小卡降到 3 列，优势/业务/流程卡降到 2 列，避免长文案在半宽列里折成四行 */
  .honor-grid--certs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .honor-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adv-grid, .svc-grid, .flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* 手机端页边距：全站 .wrap 在 ≤640 为 16px，六个主营业务专题页加大到 20px，
     正文、卡片与页头标题使用同一条边距，文字不再贴边或左右错位 */
  .wrap { padding-left: var(--sp-5); padding-right: var(--sp-5); }
  .topic-side, .topic-nav, .topic-trio, .topic-grid, .topic-videos { grid-template-columns: minmax(0, 1fr); }
  /* 单列宽度恢复，序号与箭头回到桌面形态 */
  .topic-nav a { gap: var(--sp-2); padding-left: var(--sp-2); padding-right: 26px; }
  .topic-nav a::before { display: block; }
  .topic-nav a::after { right: 12px; }
  .topic-nav a:hover::after { right: 8px; }
  .topic-table { min-width: 520px; }
  .topic-section { padding-top: var(--sp-8); margin-top: var(--sp-8); }
  /* 案例行：手机端时间换到标题下一行，简介整行铺满；分页信息居中置顶、按钮居中 */
  .case-list > .case-item,
  .entry-list > .entry-item { padding: var(--sp-4) var(--sp-5); }
  .case-item__head,
  .entry-item__head { padding-bottom: 8px; margin-bottom: 8px; }
  .case-pager { justify-content: center; }
  .case-pager .case-pager__info { order: -1; width: 100%; margin: 0; text-align: center; }
  /* 详情页：页头高度跟随列表页在同一断点的实测高度 */
  .page-hero--slim { min-height: 348px; }
  /* 关于我们：数据条 2×2，资质小卡 2 列，优势/业务/流程改为单列 */
  .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-stat { border-left: 0; }
  .about-stat:nth-child(even) { border-left: 1px solid var(--c-line); }
  .about-stat:nth-child(n+3) { border-top: 1px solid var(--c-line); }
  .honor-grid--feature { grid-template-columns: minmax(0, 1fr); }
  .honor-grid--certs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .honor-grid--wide { grid-template-columns: minmax(0, 1fr); }
  .adv-grid, .svc-grid, .flow-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 页头高度断点：列表页标题与导语在这两处换行，高度随之增加，详情页同步 */
@media (max-width: 519px) {
  .page-hero--slim { min-height: 375px; }
}
@media (max-width: 399px) {
  .page-hero--slim { min-height: 437px; }
}

/* 404 手机端：错误码缩小到 56px，两个按钮整行等宽（置于基础规则之后，保证生效） */
@media (max-width: 640px) {
  .error-code { margin-top: var(--sp-6); font-size: 56px; }
  .error-actions .btn { flex: 1 1 100%; justify-content: center; }
}