/* ==========================================================================
   prism-modules.css — 复合模块层
   依赖：prism-tokens.css / prism-shell.css / prism-components.css
   规则：不重复定义 components 已有 class，不写 :root，不用 !important，
        断点只用 1200 / 900 / 600
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 横向轮播 .rail
   轨道宽度算法：n 项可见时，单项宽 = (100% - gap*(n-1)) / n
   -------------------------------------------------------------------------- */
.rail {
  --rail-gap: var(--s5);
  --rail-visible: 3;
  position: relative;
  min-width: 0;
}

.rail__track {
  display: flex;
  gap: var(--rail-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: var(--s1) 0 var(--s4);
  margin: 0;
  list-style: none;
  /* 隐藏滚动条，但保留键盘/滚轮滚动能力 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.rail__track::-webkit-scrollbar {
  height: 0;
  width: 0;
}

.rail__track:focus-visible {
  outline: var(--ring);
  outline-offset: var(--s2);
}

.rail__item {
  flex: 0 0 calc((100% - var(--rail-gap) * (var(--rail-visible) - 1)) / var(--rail-visible));
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.rail__item > * {
  flex: 1;
}

/* 轮播条目内的图文卡：图片在上、文案在下，切角与 .card 同语言 */
.rail__item > a {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.rail__item > a:hover {
  border-color: var(--blue-bright);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.rail__item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: grayscale(.65);
  transition: filter var(--dur-slow) var(--ease);
}

.rail__item > a:hover img {
  filter: grayscale(0);
}

/* 首页精选案例：用工程标注式的信息层级压缩说明，标题为主、描述为辅。 */
.case-card__body,
.rail__body {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s5);
}

.case-card__body h3,
.rail__body h3 {
  position: relative;
  margin: 0;
  padding-bottom: var(--s3);
  font: 650 var(--fs-h3) / 1.22 var(--display);
  letter-spacing: .02em;
  color: var(--ink);
}

.case-card__body h3::after,
.rail__body h3::after {
  content: '';
  display: block;
  width: 36px;
  height: 2px;
  margin-top: var(--s3);
  background: var(--yellow);
}

.case-card__body p,
.rail__body p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  padding-left: var(--s3);
  border-left: 2px solid var(--blue);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.section--brand .rail__item > a {
  background: var(--dark-fill);
  border-color: var(--dark-line);
}

.section--brand .case-card__body h3,
.section--brand .rail__body h3 {
  color: var(--on-dark);
}

.section--brand .case-card__body p,
.section--brand .rail__body p {
  border-left-color: var(--blue-bright);
  color: var(--on-dark-muted);
}

/* 控件：右上角一组圆形按钮 */
.rail__nav {
  position: absolute;
  top: calc(var(--s10) * -1);
  right: 0;
  display: flex;
  gap: var(--s2);
}

.rail__nav button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--blue);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.rail__nav button:hover {
  background: var(--blue-soft);
  border-color: var(--blue);
}

.rail__nav button[disabled] {
  color: var(--muted-2);
  border-color: var(--line-soft);
  cursor: default;
}

.rail__nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.section--brand .rail__nav button {
  border-color: var(--graphite-3);
  background: var(--graphite-2);
  color: var(--yellow);
}

.section--brand .rail__nav button:hover {
  background: var(--graphite-3);
  border-color: var(--yellow);
}

.section--brand .rail__nav button[disabled] {
  color: var(--on-dark-muted);
  border-color: var(--graphite-3);
}

.rail__progress {
  position: relative;
  height: 3px;
  margin-top: var(--s3);
  background: var(--line-soft);
  overflow: hidden;
}

.rail__progress > span {
  display: block;
  height: 100%;
  width: 33%;
  background: var(--blue);
  transition: width .3s ease, transform .3s ease;
}

.section--brand .rail__progress {
  background: var(--graphite-3);
}

.section--brand .rail__progress > span {
  background: var(--yellow);
}

.rail__dots {
  display: flex;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s4);
}

.rail__dots button {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
}

.rail__dots button[aria-current="true"] {
  background: var(--blue);
  border-color: var(--blue);
}

/* --------------------------------------------------------------------------
   2. 证言卡
   -------------------------------------------------------------------------- */
.testimonial {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  min-width: 0;
  height: 100%;
  padding: var(--s7) var(--s6) var(--s6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}

.testimonial::before {
  content: "\201C";
  position: absolute;
  top: var(--s3);
  right: var(--s5);
  font: 700 72px / 1 var(--display);
  color: var(--blue-soft);
  pointer-events: none;
}

.testimonial p {
  position: relative;
  flex: 1;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--muted);
}

.testimonial__who {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--line-soft);
}

.testimonial__name {
  display: block;
  font: 600 var(--fs-h3) / 1.3 var(--display);
  color: var(--ink);
}

.testimonial__org {
  display: block;
  margin-top: var(--s1);
  font: var(--fs-xs) / 1.4 var(--mono);
  letter-spacing: .06em;
  color: var(--blue);
}

.section--brand .testimonial {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .18);
  border-top-color: var(--yellow);
}

.section--brand .testimonial::before { color: var(--graphite-3); }
.section--brand .testimonial p { color: var(--on-dark-muted); }
.section--brand .testimonial__who { border-top-color: var(--graphite-3); }
.section--brand .testimonial__name { color: var(--paper); }
.section--brand .testimonial__org { color: var(--yellow); }

/* --------------------------------------------------------------------------
   3. 数据带
   -------------------------------------------------------------------------- */
.stat-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--paper);
}

.stat {
  min-width: 0;
  padding: var(--s6) var(--s5);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stat b,
.stat strong {
  display: block;
  font: 700 clamp(34px, 3.4vw, 52px) / 1 var(--display);
  letter-spacing: .01em;
  color: var(--blue);
}

.stat span {
  display: block;
  margin-top: var(--s2);
  font: var(--fs-xs) / 1.5 var(--mono);
  letter-spacing: .08em;
  color: var(--muted);
}

/* 数据副说明：补足信息密度，避免数字带留白 */
.stat small {
  display: block;
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-2);
}

.section--brand .stat small {
  border-top-color: var(--dark-line);
  color: var(--on-dark-muted);
}

.section--brand .stat-band {
  background: transparent;
  border-top-color: var(--graphite-3);
  border-left-color: var(--graphite-3);
}

.section--brand .stat {
  border-right-color: var(--graphite-3);
  border-bottom-color: var(--graphite-3);
  background: rgba(255, 255, 255, .04);
}

.section--brand .stat b,
.section--brand .stat strong { color: var(--yellow); }
.section--brand .stat span { color: var(--on-dark-muted); }

/* --------------------------------------------------------------------------
   4. 事实带 fact-strip（紧凑版指标格，用于 split 内部）
   -------------------------------------------------------------------------- */
.fact-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.fact-strip > div {
  min-width: 0;
  padding: var(--s5);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.fact-strip strong {
  display: block;
  font: 700 clamp(30px, 2.6vw, 42px) / 1 var(--display);
  color: var(--blue);
}

.fact-strip span {
  display: block;
  margin-top: var(--s2);
  font: var(--fs-xs) / 1.5 var(--mono);
  letter-spacing: .06em;
  color: var(--muted);
}

.section--brand .fact-strip {
  border-top-color: var(--graphite-3);
  border-left-color: var(--graphite-3);
}

.section--brand .fact-strip > div {
  border-right-color: var(--graphite-3);
  border-bottom-color: var(--graphite-3);
  background: rgba(255, 255, 255, .04);
}

.section--brand .fact-strip strong { color: var(--yellow); }
.section--brand .fact-strip span { color: var(--on-dark-muted); }

/* --------------------------------------------------------------------------
   5. 长文正文
   -------------------------------------------------------------------------- */
.article {
  min-width: 0;
  max-width: 78ch;
  font-size: var(--fs-body);
  line-height: 1.85;
  color: var(--ink-2);
}

/* v6：详情页标题回归正文后需要自己的样式。
   旧版 h1 样式只写在 .page-hero h1 下（白字、深底专用），
   标题移入 .article 后若不补规则就会落到基础 h1 上，字号与间距都不对。 */
.article h1 {
  margin: 0 0 var(--s4);
  font: 700 var(--fs-h1) / 1.1 var(--display);
  letter-spacing: -.01em;
  color: var(--ink);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s5);
  margin: 0 0 var(--s6);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
  font: var(--fs-xs) / 1.5 var(--mono);
  letter-spacing: .08em;
  color: var(--blue);
}

.article-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 0 0 var(--s7);
  border-top: 3px solid var(--blue);
  filter: grayscale(.45);
}

.article h2 {
  position: relative;
  margin: var(--s9) 0 var(--s4);
  padding-left: var(--s4);
  font: 700 clamp(24px, 2.2vw, 32px) / 1.2 var(--display);
  color: var(--ink);
}

.article h2::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 3px;
  background: var(--blue);
}

.article h3 {
  margin: var(--s7) 0 var(--s3);
  font: 700 var(--fs-h3) / 1.3 var(--display);
  color: var(--ink);
}

.article p {
  margin: 0 0 var(--s5);
}

.article ul,
.article ol {
  margin: 0 0 var(--s5);
  padding-left: var(--s5);
}

.article li {
  margin-bottom: var(--s2);
  color: var(--ink-2);
}

.article img {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--s6) 0;
  border-top: 3px solid var(--blue);
}

.article blockquote {
  margin: var(--s6) 0;
  padding: var(--s5) var(--s6);
  border-left: 3px solid var(--yellow);
  background: var(--ice);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

/* v5：文章正文的阅读层次。
   旧版是「元信息 + 封面 + 5 个平铺 h2」，全篇一个层级、没有入口摘要，
   长文扫读时找不到落点。现在补三层结构：导读 → 分节 → 图注。 */

/* 导读段：承接标题，用略大的字号和左侧标尺线与正文区分 */
.article-lead {
  margin: 0 0 var(--s7);
  padding: var(--s5) var(--s6);
  border-left: 3px solid var(--yellow);
  background: var(--ice);
  font-size: calc(var(--fs-body) + 2px);
  line-height: 1.8;
  color: var(--ink);
}

/* 分节序号：跟着 h2 自增，替代手写「一、二、」这种易错编号 */
.article {
  counter-reset: article-section;
}

.article h2 {
  counter-increment: article-section;
}

/* 序号排在标题文字上方、与文字同左缘。
   不用负偏移（left: calc(-1 * ...)）：那会把序号推到 .article 容器之外，
   窄屏下直接被裁掉。改为在 h2 顶部留出行高，序号绝对定位到这段留白里。 */
.article h2 {
  padding-top: calc(var(--fs-xs) + var(--s2));
}

.article h2::after {
  content: counter(article-section, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: var(--s4);
  font: 400 var(--fs-xs) / 1.2 var(--mono);
  letter-spacing: .12em;
  color: var(--blue);
}

/* 图注：紧跟 figure 内的图片，说明画面在讲什么 */
.article figure {
  margin: var(--s6) 0;
}

.article figure img {
  margin: 0;
}

.article figcaption {
  margin-top: var(--s3);
  padding-left: var(--s4);
  border-left: 2px solid var(--line);
  font: var(--fs-xs) / 1.6 var(--mono);
  letter-spacing: .04em;
  color: var(--muted);
}

/* v6：要点列表。案例页原来把「画面覆盖层级」做成一个独立的
   .section--blueprint（三张卡片 + 一句抽象标题），与正文「表达范围」讲的是
   同一件事，等于同一内容拆成两处。现在折进正文用这个列表承载：
   标题走 \u003cstrong\u003e 起提示作用，说明紧跟其后，保持段落级密度。 */
.article-facets {
  margin: 0 0 var(--s5);
  padding: 0;
  list-style: none;
}

.article-facets li {
  position: relative;
  padding: var(--s3) 0 var(--s3) var(--s5);
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2);
}

.article-facets li::before {
  content: "";
  position: absolute;
  top: calc(var(--s3) + .6em);
  left: 0;
  width: 10px;
  height: 2px;
  background: var(--blue);
}

.article-facets strong {
  display: block;
  margin-bottom: var(--s1);
  font: 600 var(--fs-body) / 1.5 var(--body);
  color: var(--ink);
}

/* 关键结论行：段落级强调，用于每节的要点收束 */
.article .article-note {
  margin: var(--s5) 0;
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  background: var(--paper);
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   侧边栏：widget 卡片化
   -------------------------------------------------------------------------- */
/* v5：旧版侧边栏是「裸 h3 + 裸 ul + 3 个裸 a」，
   三组内容之间没有视觉边界，底部行动链接看起来像正文残留。
   现在每组包成 .aside-widget 卡片，参数表与链接组各有专用排版。 */
.detail-aside {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.aside-widget {
  padding: var(--s5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
}

.aside-widget__title {
  margin: 0 0 var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line-soft);
  font: 700 calc(var(--fs-body) + 1px) / 1.3 var(--display);
  letter-spacing: .01em;
  color: var(--ink);
}

/* 参数表：左标签右值，标签用 mono 压小，值加粗对齐右侧 */
.aside-facts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aside-facts li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) 0;
}

.aside-facts li + li {
  border-top: 1px solid var(--line-soft);
}

.aside-facts span {
  flex: 0 0 auto;
  font: var(--fs-xs) / 1.5 var(--mono);
  letter-spacing: .06em;
  color: var(--muted);
}

.aside-facts strong {
  font: 600 var(--fs-sm) / 1.55 var(--body);
  text-align: right;
  color: var(--ink);
}

/* 链接组：整行可点，左侧留出角标位 */
.aside-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aside-links li + li {
  border-top: 1px solid var(--line-soft);
}

.aside-links a {
  display: block;
  position: relative;
  padding: var(--s3) 0 var(--s3) var(--s5);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .2s ease;
}

.aside-links a::before {
  content: "→";
  position: absolute;
  left: 0;
  font-family: var(--mono);
  color: var(--blue);
}

.aside-links a:hover {
  color: var(--blue);
}

/* 侧边栏联系卡（v7 重做）。
   旧版是 background: var(--graphite) 深底 + 4 个按钮，其中 3 个是
   .button--ghost —— ghost 在深底上只有描边没有底色，实测对比度 2.6:1，
   号码之外的内容几乎读不出来；而且「返回资讯列表」这类导航被做成按钮，
   与电话并列成一堆同权重的块，看不出该点哪个。
   现在改为浅底卡片：只保留电话一个按钮作为唯一转化动作，
   其余入口降级为卡片底部的文字链接。 */
.aside-widget--cta {
  border-top-color: var(--yellow);
  background: var(--ice);
}

.aside-widget--cta .aside-widget__title {
  border-bottom-color: var(--line);
  color: var(--ink);
}

.aside-widget--cta p {
  margin: 0 0 var(--s4);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ink-2);
}

.aside-widget--cta .button {
  width: 100%;
}

/* 号码下方的次级入口：文字链接而非按钮，避免与电话抢视觉权重 */
.aside-widget__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

.aside-widget__links a {
  font: var(--fs-xs) / 1.5 var(--mono);
  letter-spacing: .04em;
  color: var(--blue);
  text-decoration: none;
}

.aside-widget__links a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   文章正文末尾：相关标签 + 版权声明（对齐参考站 .article-tags-section）
   -------------------------------------------------------------------------- */
.article-tags {
  margin: var(--s8) 0 0;
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

.article-tags__label {
  margin: 0 0 var(--s3);
  font: 700 var(--fs-sm) / 1.4 var(--body);
  color: var(--ink);
}

.article-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0 0 var(--s5);
  padding: 0;
  list-style: none;
}

/* 版权声明：正文级小字，出处链接可点 */
.article-copyright {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--muted);
}

.article-copyright a {
  color: var(--blue);
  word-break: break-all;
}

/* --------------------------------------------------------------------------
   专业保障（对齐参考站 .article-authority）
   四项资质数据 + 一段说明，为 GEO/AI 检索提供可引用的机构事实。
   -------------------------------------------------------------------------- */
.authority {
  margin: var(--s8) 0 0;
  padding: var(--s6);
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  background: var(--paper);
}

.authority__title {
  margin: 0 0 var(--s5);
  font: 700 calc(var(--fs-body) + 2px) / 1.3 var(--display);
  color: var(--ink);
}

.authority__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
  margin: 0 0 var(--s5);
  padding: 0;
  list-style: none;
}

.authority__grid li {
  padding: var(--s3) 0;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}

.authority__grid strong {
  display: block;
  font: 700 clamp(20px, 1.8vw, 26px) / 1.1 var(--mono);
  letter-spacing: -.01em;
  color: var(--blue);
}

.authority__grid span {
  display: block;
  margin-top: var(--s1);
  font-size: var(--fs-xs);
  color: var(--muted);
}

.authority p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   上一篇 / 下一篇导航（对齐参考站 .article-navigation）
   -------------------------------------------------------------------------- */
.article-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
  margin: var(--s8) 0 0;
}

.article-nav a {
  display: block;
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line);
  background: var(--paper);
  text-decoration: none;
  transition: border-color .2s ease;
}

.article-nav a:hover {
  border-color: var(--blue);
}

/* 「下一篇」靠右排，形成左右对称的翻页语义 */
.article-nav a:last-child:nth-child(2) {
  text-align: right;
}

.article-nav span {
  display: block;
  font: var(--fs-xs) / 1.5 var(--mono);
  letter-spacing: .08em;
  color: var(--blue);
}

.article-nav strong {
  display: block;
  margin-top: var(--s2);
  font: 600 var(--fs-sm) / 1.5 var(--body);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   6. FAQ 手风琴（配合 site.js 的 .open 与 aria-expanded）
   -------------------------------------------------------------------------- */
/* v4：桌面改双列。单列 12 条 FAQ 竖排会把页面拉得很长，
   手风琴展开后更难扫读；双列后每列 6 条，屏内可一次看完。
   用 columns 而非 grid：条目高度随展开变化，多列布局会自动重排，
   不会像 grid 那样把同一行的其他条目一起顶高。 */
.faq-list {
  border-top: 1px solid var(--line);
  columns: 2;
  column-gap: var(--s8);
}

.faq-item {
  border-bottom: 1px solid var(--line);
  /* 避免条目被拆到两列 */
  break-inside: avoid;
}

.faq-item button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  width: 100%;
  min-height: 48px;
  padding: var(--s5) 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}

.faq-item h3 {
  margin: 0;
  font: 600 var(--fs-h3) / 1.4 var(--display);
  color: inherit;
}

.faq-item button::after {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg) translateY(-3px);
  transition: transform .22s ease;
}

.faq-item.open button::after {
  transform: rotate(225deg) translateY(-3px);
}

.faq-item.open button {
  color: var(--blue);
}

.faq-answer {
  display: none;
  max-width: 82ch;
  padding: 0 0 var(--s5);
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--muted);
}

.faq-item.open .faq-answer {
  display: block;
}

.section--brand .faq-list,
.section--brand .faq-item {
  border-color: var(--graphite-3);
}

.section--brand .faq-item button { color: var(--on-dark); }
.section--brand .faq-item button::after {
  border-right-color: var(--yellow);
  border-bottom-color: var(--yellow);
}
.section--brand .faq-item.open button { color: var(--yellow); }
.section--brand .faq-answer { color: var(--on-dark-muted); }

/* --------------------------------------------------------------------------
   7. 筛选 / 分页 / 空态
   -------------------------------------------------------------------------- */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s7);
}

.filter-row button {
  min-height: 44px;
  padding: var(--s2) var(--s5);
  border: 1px solid var(--line);
  background: var(--paper);
  font: var(--fs-sm) / 1.4 var(--body);
  color: var(--ink-2);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.filter-row button:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.filter-row button.active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--paper);
}

.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s8);
}

/* v5：分页由规则引擎渲染，可点项是 <button>、禁用/当前项是 <span>，
   三者外观必须一致，否则换页控件看起来像两套组件。 */
.pager a,
.pager span,
.pager button {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--s3);
  border: 1px solid var(--line);
  background: var(--paper);
  font: var(--fs-sm) / 1 var(--mono);
  color: var(--ink-2);
  text-decoration: none;
}

.pager button {
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}

.pager a:hover,
.pager button:hover {
  border-color: var(--blue);
  color: var(--blue);
}

/* 禁用态（首页的「上一页」/末页的「下一页」）降低视觉权重 */
.pager [aria-disabled="true"] {
  color: var(--muted-2);
  border-color: var(--line-soft);
}

/* 分页条为空（单页）时不占垂直空间 */
.pager[hidden] {
  display: none;
}

.pager [aria-current="page"] {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--paper);
}

.archive-empty {
  display: grid;
  place-items: center;
  gap: var(--s3);
  min-height: 220px;
  padding: var(--s7) var(--s6);
  border: 1px dashed var(--muted-2);
  background: var(--paper);
  text-align: center;
  color: var(--muted);
}

.archive-empty strong {
  font: 700 clamp(24px, 2.4vw, 34px) / 1.2 var(--display);
  color: var(--blue);
}

.archive-empty p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   8. 合作客户 logo 墙
   -------------------------------------------------------------------------- */
.partner-strip {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--s3);
  align-items: center;
}

.partner-strip img {
  display: block;
  width: 100%;
  height: 64px;
  object-fit: contain;
  padding: var(--s3);
  background: var(--paper);
  border: 1px solid var(--line);
  filter: grayscale(1);
  opacity: .78;
  transition: filter .25s ease, opacity .25s ease, border-color .25s ease;
}

.partner-strip img:hover {
  filter: grayscale(0);
  opacity: 1;
  border-color: var(--blue);
}

.section--brand .partner-strip img {
  border-color: var(--graphite-3);
  background: var(--on-dark);
}

/* --------------------------------------------------------------------------
   9. 资讯条目（统一 DOM：a.news-item > img + .rail-meta + h3 + p）
   -------------------------------------------------------------------------- */
/* v3：从「168px 图 + 文」横条改为竖排卡片。
   横条布局塞进 .grid--3（1440px 下每列约 420px）后，文本列只剩约 210px，
   标题折成 3–4 行、摘要挤成窄条；竖排后图片通栏、文字满宽，行长正常。 */
.news-item {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
  height: 100%;
  padding: 0 0 var(--s5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  color: inherit;
  text-decoration: none;
  transition: border-color .22s ease, transform .22s ease;
}

/* 图片通栏贴边，文字区单独留白 */
.news-item > :not(img) {
  padding: 0 var(--s5);
}

.news-item:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
}

/* v4：缩图。16:9 在 .grid--3（每列约 420px）下高约 236px，
   图比文字还抢眼；改 21:9 并加 168px 上限，卡片重心回到标题与摘要。 */
.news-item img {
  display: block;
  width: 100%;
  max-height: 168px;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  filter: grayscale(.45);
  transition: filter .25s ease;
}

.news-item:hover img {
  filter: grayscale(0);
}

/* v4：标题从 --fs-h3（19–23px）降到正文级 16px。
   资讯卡是列表项而非章节标题，用 h3 尺寸会压过 section 标题层级。 */
.news-item h3 {
  margin: 0;
  font: 600 16px / 1.5 var(--body);
  letter-spacing: .01em;
  color: var(--ink);
}

.news-item:hover h3 {
  color: var(--blue);
}

.news-item p {
  flex: 1;
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

/* 竖排后 meta 紧贴图片下缘，需要一点呼吸 */
.news-item .rail-meta {
  padding-top: var(--s4);
}

.rail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
  font: var(--fs-xs) / 1.4 var(--mono);
  letter-spacing: .08em;
  color: var(--blue);
}

.section--brand .news-item {
  background: var(--dark-fill);
  border-color: var(--dark-line);
  border-top-color: var(--yellow);
}

.section--brand .news-item:hover { border-color: var(--yellow); }
.section--brand .news-item h3 { color: var(--paper); }
.section--brand .news-item:hover h3 { color: var(--yellow); }
.section--brand .news-item p { color: var(--on-dark-muted); }
.section--brand .rail-meta { color: var(--yellow); }

/* --------------------------------------------------------------------------
   10. 来源说明条
   -------------------------------------------------------------------------- */
.axis-note {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s4);
  margin-top: var(--s7);
  padding: var(--s4) var(--s5);
  border-left: 3px solid var(--yellow);
  background: var(--paper);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--muted);
}

.axis-note strong {
  flex: 0 0 auto;
  font: var(--fs-xs) / 1.6 var(--mono);
  letter-spacing: .1em;
  color: var(--blue);
}

.section--brand .axis-note {
  background: rgba(255, 255, 255, .06);
  color: var(--on-dark-muted);
}

.section--brand .axis-note strong {
  color: var(--yellow);
}

/* --------------------------------------------------------------------------
   11. 底部行动区
   -------------------------------------------------------------------------- */
/* v4：改「左文案 / 右按钮」两栏。旧版三个子元素纵向堆叠且 p 限宽 760px，
   在约 1500px 的容器里内容全部挤在左侧、右半边大片空白。
   现在文案占 1fr、按钮列贴右并垂直居中，整条区块左右都有落点。 */
.axis-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s6) var(--s9);
  align-items: center;
  padding: var(--s9) var(--s8);
  border-left: 5px solid var(--yellow);
  background: var(--graphite);
  color: var(--on-dark);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}

/* 标题与描述同属左栏：标题占第一行、描述紧随其下 */
.axis-cta h2 {
  grid-column: 1;
  margin: 0;
  font: 700 var(--fs-h2) / 1.15 var(--display);
  color: var(--on-dark);
}

.axis-cta p {
  grid-column: 1;
  max-width: 68ch;
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--on-dark-muted);
}

/* 按钮列：跨两行、贴右，与文案在垂直方向居中对齐 */
.axis-cta__actions {
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: 0;
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   12. 响应式（仅 1200 / 900 / 600）
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .rail { --rail-visible: 2.4; }

  .partner-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .article h2 { margin-top: var(--s8); }
}

@media (max-width: 900px) {
  .rail { --rail-visible: 1.6; }

  .rail__nav {
    position: static;
    justify-content: flex-end;
    margin-bottom: var(--s4);
  }

  .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .article { max-width: none; }

  /* 窄屏回退单列：双列 FAQ 在 900px 以下每列不足 300px，标题会折断 */
  .faq-list { columns: 1; }

  /* 窄屏回退单栏：两栏在 900px 以下会把按钮压成竖排细条 */
  .axis-cta {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding: var(--s8) var(--s6);
  }

  .axis-cta__actions {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  .rail { --rail-visible: 1.05; }

  .stat-band,
  .fact-strip { grid-template-columns: minmax(0, 1fr); }

  .partner-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .testimonial { padding: var(--s6) var(--s5) var(--s5); }

  .testimonial__who {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s3);
  }

  .filter-row { margin-bottom: var(--s6); }

  .axis-cta {
    padding: var(--s7) var(--s5);
  }

  .axis-cta__actions > * { width: 100%; }

  /* v7：窄屏降列。专业保障 4 项与上下篇 2 栏在 390px 下会把数字挤成竖条 */
  .authority__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .authority {
    padding: var(--s5);
  }

  .article-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 单列后「下一篇」不再需要靠右，否则与上一篇错位 */
  .article-nav a:last-child:nth-child(2) {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rail__track { scroll-behavior: auto; }

  .rail__progress > span,
  .news-item,
  .news-item img,
  .partner-strip img,
  .filter-row button,
  .faq-item button::after {
    transition: none;
  }

  .news-item:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   13. 轮播控件补全（JS 注入的 .rail__btn / .rail__progress-bar / 状态属性）
   选择器带 .rail__nav / .rail__progress 上下文，特异性高于本文件第 1 节的
   元素选择器，避免与已有 .rail__nav button / .rail__progress > span 冲突
   -------------------------------------------------------------------------- */
.rail__nav .rail__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--blue);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}

.rail__nav .rail__btn:hover {
  background: var(--blue-soft);
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: var(--shadow-lg);
}

.rail__nav .rail__btn:focus-visible {
  outline: var(--ring);
  outline-offset: var(--s1);
}

.rail__nav .rail__btn[disabled],
.rail__nav .rail__btn[disabled]:hover {
  background: var(--paper);
  border-color: var(--line-soft);
  color: var(--muted-2);
  box-shadow: none;
  opacity: .45;
  cursor: not-allowed;
}

/* 方向差异：图标已由 sprite 区分，这里只做视觉次序上的留白与描边侧重 */
.rail__nav .rail__btn--prev {
  margin-right: var(--s1);
}

.rail__nav .rail__btn--next:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--paper);
}

/* 深底变体 */
.section--brand .rail__nav .rail__btn {
  border-color: var(--dark-line);
  background: var(--dark-fill);
  color: var(--yellow);
  box-shadow: none;
}

.section--brand .rail__nav .rail__btn:hover {
  background: var(--dark-fill-2);
  border-color: var(--yellow);
  color: var(--yellow);
  box-shadow: var(--shadow-dark);
}

.section--brand .rail__nav .rail__btn--next:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--graphite);
}

.section--brand .rail__nav .rail__btn[disabled],
.section--brand .rail__nav .rail__btn[disabled]:hover {
  background: var(--dark-fill);
  border-color: var(--dark-line);
  color: var(--on-dark-muted);
  box-shadow: none;
}

/* 进度条填充：宽度由 site.js 写 inline style */
.rail__progress > .rail__progress-bar {
  background: var(--yellow);
  transition: width var(--dur-slow) var(--ease);
}

.section--brand .rail__progress > .rail__progress-bar {
  background: var(--yellow);
}

/* 内容不足以滚动时（JS 置 data-rail-static="true"）收掉控件 */
.rail[data-rail-static="true"] .rail__nav,
.rail[data-rail-static="true"] .rail__progress {
  display: none;
}

/* 精选案例轮播不使用左右渐隐遮罩，边缘卡片保持完整、不透明。 */
.rail[data-carousel] .rail__track {
  --rail-fade-start: 0px;
  --rail-fade-end: 0px;
  -webkit-mask-image: none;
  mask-image: none;
}

.rail[data-at-start="true"] .rail__track,
.rail[data-at-end="true"] .rail__track,
.rail[data-rail-static="true"] .rail__track {
  --rail-fade-start: 0px;
  --rail-fade-end: 0px;
}

/* --------------------------------------------------------------------------
   14. 长文两栏 .detail-layout（正文 + 侧栏，侧栏 sticky）
   与 .split 的区别：align-items:start，不做垂直居中
   -------------------------------------------------------------------------- */
/* v6：紧跟面包屑条的正文区收紧上边距。
   .section 默认上下各 var(--section-y)（最大 104px）。以前上方是 232–290px
   的深色 banner，这段留白是两个色块之间的呼吸；现在上方只剩一条 53px 的
   浅底窄条，104px 的上边距会把标题白白推低小半屏。 */
.detail-bar + .section {
  padding-top: var(--s8);
}

/* v7：详情页必须与站内其他页面同宽。
   演进过程记录，避免后来者改回去：
   · v5 及以前：第 1 列 minmax(0, 1fr)（轨道 972px）+ .article 带
     max-width: 78ch（实占 649px）—— 轨道内空出 323px，正文与侧栏之间
     出现约 379px 的空洞；
   · v6：把行长上限搬到轨道（76ch）并 justify-content: center，
     空洞消失了，但两列合计只有 633 + 40 + 340 = 1013px，
     容器 1348px 里剩下的 335px 变成两侧留白 —— 于是详情页整体看起来
     比列表页窄了一截（实测 .detail-layout 盒宽虽等于 .container，
     但内容只铺满 75%）。
   · v7（当前）：正文列改为 minmax(0, 1fr) 弹性占满、侧栏固定 340px、
     去掉 justify-content —— 两列铺满整个 .container，详情页与
     index/cases/news/about 等页面的内容宽度完全一致。
   取舍：桌面端正文列因此宽到约 968px，中文 15px 下每行约 64 字，
   比纯阅读型排版偏长；这是「与整站同宽」的直接代价，属用户明确要求。 */
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--s8);
  align-items: start;
  min-width: 0;
}

/* 行长交由轨道决定，这里必须解除元素级限制，否则又会在轨道内留空 */
.detail-layout > .article {
  max-width: none;
}

.detail-layout > * {
  min-width: 0;
}

.detail-layout > .detail-aside {
  position: sticky;
  top: calc(var(--nav) + var(--s5));
}

/* --------------------------------------------------------------------------
   15. 补充响应式（仅 1200 / 900 / 600）
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .detail-layout {
    gap: var(--s8);
  }
}

@media (max-width: 900px) {
  .detail-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s7);
  }

  .detail-layout > .detail-aside {
    position: static;
    top: auto;
  }

  .rail[data-carousel] .rail__track {
    --rail-fade-start: var(--s5);
    --rail-fade-end: var(--s5);
  }
}

@media (max-width: 600px) {
  .rail__nav .rail__btn--prev {
    margin-right: 0;
  }

  .rail[data-carousel] .rail__track {
    --rail-fade-start: 0px;
    --rail-fade-end: var(--s4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rail__nav .rail__btn,
  .rail__progress > .rail__progress-bar {
    transition: none;
  }
}


/* ===== float-call fixed button ===== */
.float-call {
  position: fixed;
  right: 24px;
  bottom: 80px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #0e77f5;
  color: #fff;
  border-radius: 40px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(14,119,245,.4);
  transition: background .2s, transform .2s;
  white-space: nowrap;
}
.float-call:hover {
  background: #0060d9;
  transform: translateY(-2px);
  color: #fff;
}
.float-call svg { flex-shrink: 0; }

/* ===== hero-stats: prevent float-call from interfering ===== */
.hero-stats { position: relative; z-index: 10; }


/* 首页首屏数据条定位修复：仅限制在 hero 底部，避免遗留的 relative 覆盖基础定位。 */
.hero .hero-stats {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  max-width: none;
  margin: 0;
  z-index: 3;
}


/* --------------------------------------------------------------------------
   首页补充模块：公司实力 / 制作能力 / 项目反馈 / 标准流程 / 服务覆盖
   统一使用工业图纸中的坐标、节点、轨道与刻度语言，避免通用营销卡片。
   -------------------------------------------------------------------------- */
.section--company-proof {
  overflow: hidden;
  background: var(--graphite);
  color: var(--on-dark);
}

.company-proof {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  gap: clamp(var(--s8), 8vw, var(--s12));
  min-height: 510px;
  padding: clamp(var(--s8), 7vw, var(--s11));
  border: 1px solid var(--graphite-3);
  background-image:
    linear-gradient(90deg, var(--grid-line-dark) 1px, transparent 1px),
    linear-gradient(0deg, var(--grid-line-dark) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

.company-proof::before,
.company-proof::after {
  content: '';
  position: absolute;
  background: var(--yellow);
}

.company-proof::before { top: 0; left: 0; width: 92px; height: 3px; }
.company-proof::after { right: 0; bottom: 0; width: 3px; height: 92px; }

.company-proof__index {
  position: absolute;
  top: var(--s5);
  right: var(--s6);
  font: 500 var(--fs-xs) / 1 var(--mono);
  letter-spacing: .12em;
  color: var(--on-dark-muted);
}

.company-proof__content { position: relative; z-index: 1; }
.company-proof__content .kicker { color: var(--yellow); }
.company-proof__content h2 {
  max-width: 16ch;
  margin: var(--s4) 0 var(--s5);
  color: var(--paper);
}
.company-proof__content > p { max-width: 57ch; color: var(--on-dark-muted); }

.company-proof__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  margin-top: var(--s8);
}
.company-proof__points > div { padding-top: var(--s4); border-top: 1px solid var(--graphite-3); }
.company-proof__points strong { display: block; font: 600 clamp(28px, 3.1vw, 48px) / 1 var(--display); color: var(--yellow); }
.company-proof__points strong span { font-size: .58em; }
.company-proof__points > div > span { display: block; margin-top: var(--s2); font-size: var(--fs-xs); color: var(--on-dark-muted); }

.company-proof__diagram {
  position: relative;
  align-self: center;
  width: min(100%, 410px);
  aspect-ratio: 1;
  margin-inline: auto;
  background: rgba(17, 24, 32, .54);
  border: 1px solid rgba(234, 242, 248, .18);
}
.company-proof__diagram b { position: absolute; right: 14%; bottom: 13%; margin: 0; font: 600 clamp(22px, 3vw, 36px) / .94 var(--display); letter-spacing: .04em; color: rgba(234, 242, 248, .18); }
.workflow-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 蓝图网格 */
.wf-grid line {
  stroke: rgba(234, 242, 248, .08);
  stroke-width: 1;
}

/* 坐标轴 */
.wf-axis {
  stroke: rgba(234, 242, 248, .55);
  stroke-width: 1.5;
}

/* 坐标刻度 */
.wf-ticks line {
  stroke: rgba(234, 242, 248, .35);
  stroke-width: 1.5;
}

/* 扫描线 */
.wf-scan {
  fill: rgba(234, 242, 248, .12);
  animation: wfScan 4.5s ease-in-out infinite;
}
@keyframes wfScan {
  0%, 100% { y: 0; opacity: .4; }
  50% { y: 418; opacity: .9; }
}

/* 连接线：流动虚线 + 发光 */
.wf-link {
  stroke: rgba(234, 242, 248, .45);
  stroke-width: 1.5;
  stroke-dasharray: 10 8;
  filter: url(#linkGlow);
  animation: wfFlow 1.1s linear infinite;
}
@keyframes wfFlow {
  to { stroke-dashoffset: -18; }
}

/* 数据包 */
.wf-packet {
  fill: var(--yellow);
  filter: url(#nodeGlow);
}
.wf-packet--delay { opacity: .85; }

/* 节点 */
.wf-node { cursor: default; }
.wf-node text {
  font: 500 var(--fs-xs) / 1.35 var(--mono);
  fill: var(--paper);
  text-anchor: middle;
  pointer-events: none;
}
.wf-node--out text { fill: var(--yellow); }

.wf-core {
  fill: var(--graphite-2);
  stroke: rgba(234, 242, 248, .62);
  stroke-width: 1;
  transition: all .25s ease;
}
.wf-core--out {
  fill: rgba(234, 179, 8, .12);
  stroke: var(--yellow);
}
.wf-ring {
  fill: none;
  stroke: rgba(234, 242, 248, .28);
  stroke-width: 1;
  transition: all .25s ease;
}
.wf-node--out .wf-ring { stroke: rgba(234, 179, 8, .35); }

/* 脉冲光环 */
.wf-pulse {
  fill: none;
  stroke: rgba(234, 242, 248, .35);
  stroke-width: 1;
  transform-origin: center;
  animation: wfPulse 2.6s ease-out infinite;
}
.wf-node--out .wf-pulse { stroke: rgba(234, 179, 8, .45); }
@keyframes wfPulse {
  0% { r: 44; opacity: .8; }
  100% { r: 72; opacity: 0; }
}

/* 节点悬停 */
.company-proof__diagram:hover .wf-core { fill: rgba(234, 242, 248, .12); transform: scale(1.04); }
.company-proof__diagram:hover .wf-core--out { fill: rgba(234, 179, 8, .22); }
.company-proof__diagram:hover .wf-ring { stroke: rgba(234, 242, 248, .55); }
.company-proof__diagram:hover .wf-node--out .wf-ring { stroke: rgba(234, 179, 8, .65); }

/* 水印 */
.wf-watermark {
  font: 600 clamp(22px, 3vw, 36px) / .94 var(--display);
  letter-spacing: .04em;
  fill: rgba(234, 242, 248, .12);
}

/* 减少动画（无障碍） */
@media (prefers-reduced-motion: reduce) {
  .wf-link, .wf-pulse, .wf-scan { animation: none; }
}

.section--capability { background: var(--paper); }
.capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.capability-card { position: relative; min-height: 278px; padding: var(--s6); border: 1px solid var(--line); border-top: 3px solid var(--blue); background: var(--paper); }
.capability-card::after { content: ''; position: absolute; right: var(--s5); bottom: var(--s5); width: 28px; height: 28px; border-right: 1px solid var(--blue); border-bottom: 1px solid var(--blue); }
.capability-card h3 { margin: var(--s4) 0 var(--s3); }
.capability-card p { margin: 0; color: var(--muted); }
.capability-card ul { display: grid; gap: var(--s2); margin: var(--s5) 0 0; padding: 0; list-style: none; font-size: var(--fs-xs); color: var(--ink-soft); }
.capability-card li::before { content: '—'; margin-right: var(--s2); color: var(--blue); }

.section--testimonials { background: var(--blue-soft); }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.quote-card { position: relative; display: flex; min-height: 300px; flex-direction: column; justify-content: space-between; padding: var(--s6); border: 1px solid rgba(20, 92, 158, .23); background: var(--paper); }
.quote-card__mark { font: 500 var(--fs-xs) / 1 var(--mono); color: var(--blue); }
.quote-card blockquote { margin: var(--s6) 0; font: 500 clamp(18px, 1.55vw, 22px) / 1.62 var(--display); color: var(--ink); }
.quote-card footer { display: grid; gap: var(--s1); padding-top: var(--s4); border-top: 1px solid var(--line); }
.quote-card footer strong { font-size: var(--fs-sm); color: var(--ink); }
.quote-card footer span { font-size: var(--fs-xs); color: var(--muted); }

.section--process { background: var(--graphite); color: var(--on-dark); }
.section--process .kicker { color: var(--yellow); }
.section--process .section-head h2 { color: var(--paper); }
.section--process .section-head__desc { color: var(--on-dark-muted); }
.section--process .section-axis { border-color: var(--graphite-3); color: var(--yellow); }
.process-flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--graphite-3); border-bottom: 1px solid var(--graphite-3); }
.process-flow li { position: relative; min-height: 220px; padding: var(--s6) var(--s4) var(--s5); border-left: 1px solid var(--graphite-3); }
.process-flow li:first-child { border-left: 0; }
.process-flow li::after { content: ''; position: absolute; top: var(--s5); left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--yellow) 0 24px, transparent 24px); }
.process-flow li > span { display: block; margin-top: var(--s5); font: 500 var(--fs-xs) / 1 var(--mono); color: var(--yellow); }
.process-flow li b { display: block; margin-top: var(--s6); font: 600 var(--fs-h3) / 1.2 var(--display); color: var(--paper); }
.process-flow li small { display: block; margin-top: var(--s3); font-size: var(--fs-xs); line-height: 1.6; color: var(--on-dark-muted); }

.section--coverage { padding-top: var(--s8); padding-bottom: var(--s8); background: var(--paper); }
.coverage-panel { display: grid; grid-template-columns: minmax(0, .95fr) minmax(340px, 1.05fr); gap: clamp(var(--s7), 7vw, var(--s11)); padding: clamp(var(--s7), 5vw, var(--s9)); border: 1px solid var(--line); border-left: 4px solid var(--blue); background: linear-gradient(90deg, var(--blue-soft), var(--paper) 50%); }
.coverage-panel h2 { margin: var(--s3) 0 var(--s4); }
.coverage-panel p:not(.kicker) { margin: 0; color: var(--muted); }
.coverage-tags { display: flex; align-content: center; align-items: center; flex-wrap: wrap; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.coverage-tags li { padding: var(--s2) var(--s3); border: 1px solid var(--line); background: var(--paper); font: 500 var(--fs-xs) / 1 var(--mono); color: var(--blue); }

@media (max-width: 1200px) {
  .process-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .process-flow li:nth-child(4) { border-left: 0; }
  .process-flow li:nth-child(n + 4) { border-top: 1px solid var(--graphite-3); }
}

@media (max-width: 900px) {
  .company-proof, .coverage-panel { grid-template-columns: minmax(0, 1fr); }
  .company-proof__diagram { width: min(100%, 380px); }
  .capability-grid, .testimonials-grid { grid-template-columns: 1fr; }
  .capability-card, .quote-card { min-height: 0; }
  .process-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-flow li:nth-child(odd) { border-left: 0; }
  .process-flow li:nth-child(n + 3) { border-top: 1px solid var(--graphite-3); }
}

@media (max-width: 600px) {
  .company-proof { min-height: 0; padding: var(--s6); }
  .company-proof__points { grid-template-columns: 1fr; gap: var(--s3); margin-top: var(--s6); }
  .company-proof__diagram { width: min(100%, 310px); }
  .company-proof__node { width: 78px; height: 78px; font-size: 10px; }
  .company-proof__line--a { left: 27%; width: 55%; }
  .company-proof__line--b { left: 29%; width: 46%; }
  .process-flow { grid-template-columns: 1fr; }
  .process-flow li { min-height: 152px; border-left: 0; border-top: 1px solid var(--graphite-3); }
  .process-flow li:first-child { border-top: 0; }
  .process-flow li b { margin-top: var(--s4); }
  .coverage-panel { padding: var(--s6); background: var(--paper); }
}

@media (prefers-reduced-motion: reduce) {
  .capability-card, .quote-card { transition: none; }
}


/* 首页补充模块第二版：交替空间层级与非对称信息布局。 */
.section--company-proof { position: relative; }
.section--capability { background: var(--blue-soft); }
.capability-layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: clamp(var(--s6), 5vw, var(--s9)); align-items: start; }
.capability-layout__head { position: static; }
.capability-layout__head .section-axis, .feedback-layout__head .section-axis, .coverage-layout__head .section-axis { margin-bottom: var(--s5); }
.capability-layout__head h2, .feedback-layout__head h2, .coverage-layout__head h2 { margin: var(--s3) 0 var(--s4); }
.capability-layout__head > p:not(.kicker), .feedback-layout__head > p:not(.kicker), .coverage-layout__head > p:not(.kicker) { margin: 0; color: var(--muted); }
.capability-layout__meta { display: grid; gap: var(--s3); margin: var(--s7) 0 0; }
.capability-layout__meta > div { display: grid; grid-template-columns: 64px 1fr; gap: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.capability-layout__meta dt { font: 500 var(--fs-xs) / 1.4 var(--mono); color: var(--blue); }
.capability-layout__meta dd { margin: 0; font-size: var(--fs-xs); color: var(--ink-soft); }
.capability-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; min-height: 420px; border: 1px solid var(--line); background: var(--paper); }
.capability-stage { position: relative; display: flex; flex-direction: column; min-height: 420px; padding: var(--s6) var(--s5) var(--s5); border-left: 1px solid var(--line); overflow: hidden; }
.capability-stage:first-child { border-left: 0; }
.capability-stage::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--blue); }
.capability-stage--control { background: var(--graphite); color: var(--on-dark); }
.capability-stage--control::before { background: var(--yellow); }
.capability-stage__id { position: absolute; top: var(--s4); right: var(--s4); font: 600 clamp(44px, 5vw, 72px) / 1 var(--display); color: rgba(20,92,158,.09); }
.capability-stage--control .capability-stage__id { color: rgba(234,242,248,.12); }
.capability-stage .serial { position: relative; z-index: 1; margin: 0; font: 500 var(--fs-xs) / 1 var(--mono); color: var(--blue); }
.capability-stage--control .serial { color: var(--yellow); }
.capability-stage h3 { position: relative; z-index: 1; margin: var(--s6) 0 var(--s3); }
.capability-stage > p:not(.serial) { position: relative; z-index: 1; margin: 0; color: var(--muted); }
.capability-stage--control > p:not(.serial) { color: var(--on-dark-muted); }
.capability-stage ul { position: relative; z-index: 1; display: grid; gap: var(--s2); margin: auto 0 0; padding: var(--s5) 0 0; border-top: 1px solid var(--line); list-style: none; font-size: var(--fs-xs); color: var(--ink-soft); }
.capability-stage--control ul { border-color: var(--graphite-3); color: var(--on-dark-muted); }
.capability-stage li::before { content: '↗'; margin-right: var(--s2); color: var(--blue); }
.capability-stage--control li::before { color: var(--yellow); }

.section--testimonials { background: var(--paper); }
.feedback-layout { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); gap: clamp(var(--s6), 5vw, var(--s9)); }
.feedback-layout__head { padding-top: var(--s2); }
.feedback-layout__signal { display: grid; gap: var(--s3); margin-top: var(--s7); padding: var(--s5); border-left: 3px solid var(--yellow); background: var(--blue-soft); }
.feedback-layout__signal span { font: 500 var(--fs-xs) / 1 var(--mono); color: var(--blue); }
.feedback-layout__signal b { font: 600 var(--fs-h3) / 1.4 var(--display); color: var(--ink); }
.feedback-layout__evidence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.evidence-card { display: flex; min-height: 220px; flex-direction: column; justify-content: space-between; padding: var(--s5); border: 1px solid var(--line); border-top: 3px solid var(--blue); background: var(--paper); }
.evidence-card--large { grid-column: 1 / -1; min-height: 200px; border-top-color: var(--yellow); background: var(--graphite); }
.evidence-card__id { font: 500 var(--fs-xs) / 1 var(--mono); color: var(--blue); }
.evidence-card--large .evidence-card__id { color: var(--yellow); }
.evidence-card blockquote { margin: var(--s5) 0; font: 500 clamp(18px,1.6vw,23px) / 1.6 var(--display); color: var(--ink); }
.evidence-card--large blockquote { max-width: 33ch; color: var(--paper); }
.evidence-card > div { display: flex; justify-content: space-between; gap: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--fs-xs); }
.evidence-card--large > div { border-color: var(--graphite-3); color: var(--on-dark-muted); }
.evidence-card > div strong { color: var(--ink); }
.evidence-card--large > div strong { color: var(--paper); }
.evidence-card > div span { color: var(--muted); text-align: right; }
.evidence-card--large > div span { color: var(--on-dark-muted); }

.section--coverage { background: var(--graphite); color: var(--on-dark); }
.coverage-layout { display: grid; grid-template-columns: minmax(280px, .67fr) minmax(0, 1.33fr); gap: clamp(var(--s6), 5vw, var(--s9)); }
.coverage-layout__head .kicker { color: var(--yellow); }
.coverage-layout__head h2 { color: var(--paper); }
.coverage-layout__head > p:not(.kicker) { color: var(--on-dark-muted); }
.coverage-layout__head .section-axis { color: var(--yellow); border-color: var(--graphite-3); }
.coverage-matrix { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding-top: var(--s6); background: var(--graphite-3); }
.coverage-matrix__axis { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; font: 500 var(--fs-xs) / 1 var(--mono); color: var(--on-dark-muted); }
.coverage-cell { position: relative; min-height: 184px; padding: var(--s5); background: var(--graphite); }
.coverage-cell > span { position: absolute; top: var(--s4); right: var(--s4); font: 500 var(--fs-xs) / 1 var(--mono); color: var(--yellow); }
.coverage-cell h3 { margin: var(--s5) 0 var(--s2); color: var(--paper); }
.coverage-cell p { margin: 0; color: var(--on-dark-muted); }
.coverage-cell b { display: block; margin-top: var(--s5); font: 500 var(--fs-xs) / 1.4 var(--mono); color: var(--blue-bright); }
.coverage-cell--note { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: 128px; gap: var(--s5); background: var(--graphite-2); }
.coverage-cell--note p { max-width: 52ch; }
.coverage-cell--note .button--ghost { flex: 0 0 auto; border-color: var(--yellow); color: var(--yellow); }
.coverage-cell--note .button--ghost:hover { background: var(--yellow); color: var(--graphite); }

@media (max-width: 1200px) {
  .capability-layout, .feedback-layout, .coverage-layout { gap: var(--s7); }
  .capability-stages { min-height: 430px; }
  .capability-stage { min-height: 430px; }
}

@media (max-width: 900px) {
  .capability-layout, .feedback-layout, .coverage-layout { grid-template-columns: 1fr; }
  .capability-layout__head { position: static; }
  .capability-stages { min-height: 0; }
  .capability-stage { min-height: 330px; }
  .feedback-layout__evidence { grid-template-columns: 1fr; }
  .evidence-card--large { grid-column: auto; }
}

@media (max-width: 600px) {
  .capability-stages { grid-template-columns: 1fr; }
  .capability-stage { min-height: 290px; border-left: 0; border-top: 1px solid var(--line); }
  .capability-stage:first-child { border-top: 0; }
  .capability-stage::before { inset: 0 auto 0 0; }
  .feedback-layout__signal { margin-top: var(--s5); }
  .evidence-card, .evidence-card--large { min-height: 0; }
  .evidence-card > div { display: grid; }
  .evidence-card > div span { text-align: left; }
  .coverage-matrix { grid-template-columns: 1fr; }
  .coverage-cell--note { grid-column: auto; display: grid; }
  .coverage-cell--note .button--ghost { justify-self: start; }
}

/* 服务覆盖承接深色流程后切换为浅色坐标台，保留深色信息锚点。 */
.section--coverage { background: var(--blue-soft); color: var(--ink); }
.coverage-layout__head .kicker { color: var(--blue); }
.coverage-layout__head h2 { color: var(--ink); }
.coverage-layout__head > p:not(.kicker) { color: var(--muted); }
.coverage-layout__head .section-axis { color: var(--blue); border-color: var(--line); }
.coverage-matrix { background: var(--line); }
.coverage-matrix__axis { color: var(--muted); }
.coverage-cell { min-height: 160px; background: var(--paper); }
.coverage-cell > span { color: var(--blue); }
.coverage-cell h3 { color: var(--ink); }
.coverage-cell p { color: var(--muted); }
.coverage-cell b { color: var(--blue); }
.coverage-cell--note { min-height: 112px; background: var(--graphite); }
.coverage-cell--note p { color: var(--on-dark-muted); }
.coverage-cell--note .button--ghost { border-color: var(--yellow); color: var(--yellow); }
.coverage-cell--note .button--ghost:hover { background: var(--yellow); color: var(--graphite); }