@charset "UTF-8";
/* ==========================================================================
   众森卫士企业官网 · 全站样式
   设计概念「受控的秩序」：细线网格 + 节点连线 + 克制的暖金导引线
   结构：1 设计变量 → 2 基础与排版 → 3 布局工具 → 4 组件 → 5 动效 → 6 响应式
         → 7 方案页组件（P2 总览 / P3 知识助手 / P4 流程智能体
           / P5 合规助手 / P6 安全防护栏 / P7~P10 方案详情页）
   注意：@charset 必须是样式表第一条语句（前置无任何字符），
         否则无 charset 响应头时浏览器会按 Latin-1 误读，content 中的
         ✓/✕ 等符号将渲染为乱码（见第 7 节，符号一律用 \ 转义）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · 设计变量（Design Tokens）
   色彩、字号、间距全站唯一来源，调整风格只改这里
   -------------------------------------------------------------------------- */
:root {
  /* 主色：深海蓝 —— 专业、可信 */
  --color-primary: #0B3B5C;
  --color-primary-dark: #072A44;
  --color-primary-light: #E8F0F6;
  /* 辅助色：蓝绿 —— 科技感、AI 属性 */
  --color-secondary: #0E7C86;
  --color-secondary-light: #E2F1F2;
  /* 强调色：暖金 —— 仅用于行动与信任所在，单屏不超过 2 处 */
  --color-accent: #C89B3C;
  --color-accent-hover: #B3862E;
  /* 中性色阶 */
  --color-text: #1F2933;
  --color-text-secondary: #52606D;
  --color-text-muted: #7B8794;
  --color-border: #D9E2EC;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F5F8FA;
  --color-bg-dark: #072A44;
  /* 语义色 */
  --color-success: #2E7D32;
  --color-warning: #B26A00;
  --color-danger: #C62828;
  /* 字体 */
  --font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
    -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* 字号阶梯（移动优先） */
  --text-hero: 30px;
  --text-h2: 24px;
  --text-h3: 18px;
  --text-body: 15px;
  --text-small: 13px;
  /* 布局与间距 */
  --container-max: 1200px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  /* 阴影与动效 */
  --shadow-card: 0 1px 3px rgba(7, 42, 68, 0.06), 0 4px 12px rgba(7, 42, 68, 0.05);
  --shadow-card-hover: 0 4px 10px rgba(7, 42, 68, 0.08), 0 12px 28px rgba(7, 42, 68, 0.1);
  --shadow-header: 0 2px 12px rgba(7, 42, 68, 0.08);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 1024px) {
  :root {
    --text-hero: 44px;
    --text-h2: 34px;
    --text-h3: 20px;
    --text-body: 16px;
    --text-small: 14px;
  }
}

/* --------------------------------------------------------------------------
   2 · 基础与排版
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 吸顶页头高度补偿，锚点定位时不被遮挡 */
  scroll-padding-top: 88px;
}

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

h1, h2, h3, p, ul, ol, figure {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* hidden 属性兜底：组件的 display 声明（如 flex）会覆盖 UA 默认的
   [hidden]{display:none}，导致返回顶部等元素在应隐藏时仍然可见 */
[hidden] {
  display: none !important;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  color: inherit;
}

strong {
  font-weight: 600;
}

em {
  font-style: normal;
}

/* 焦点态：永不清除，保证键盘可访问性 */
:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 跳转正文链接：仅键盘聚焦时可见 */
.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 200;
  padding: 8px 16px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top 0.2s var(--ease-out);
}

.skip-link:focus {
  top: 0;
}

/* --------------------------------------------------------------------------
   3 · 布局工具
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 16px;
}

.container--narrow {
  max-width: 820px;
}

@media (min-width: 768px) {
  .container {
    padding-inline: 24px;
  }
}

.section {
  padding-block: 56px;
}

.section--alt {
  background: var(--color-bg-alt);
}

.section--dark {
  background: var(--color-bg-dark);
  color: #fff;
}

@media (min-width: 1024px) {
  .section {
    padding-block: var(--space-9);
  }
}

.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 区块头：金色短竖条 + 英文小标 + 标题 + 引导 */
.section-head {
  max-width: 640px;
  margin-bottom: var(--space-7);
}

.section-head--dark {
  color: #fff;
}

.section-head--dark .section-head__desc {
  color: rgba(255, 255, 255, 0.72);
}

.section-head__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--color-secondary);
  margin-bottom: var(--space-2);
}

.section-head__title {
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: 1.35;
  padding-left: 14px;
  border-left: 4px solid var(--color-accent);
  margin-bottom: var(--space-3);
}

.section-head__desc {
  color: var(--color-text-secondary);
}

/* 文字链接 */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary);
  font-weight: 600;
  transition: color 0.2s var(--ease-out);
}

.text-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s var(--ease-out);
}

.text-link:hover {
  color: var(--color-secondary);
}

.text-link:hover svg {
  transform: translateX(3px);
}

.text-link--external svg {
  transition: transform 0.2s var(--ease-out);
}

.text-link--external:hover svg {
  transform: translate(2px, -2px);
}

/* --------------------------------------------------------------------------
   4 · 组件
   -------------------------------------------------------------------------- */

/* ---- 4.1 按钮 ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 28px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  transition: background-color 0.2s var(--ease-out),
    color 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out),
    transform 0.15s var(--ease-out),
    box-shadow 0.2s var(--ease-out);
}

.btn:active {
  transform: translateY(1px);
}

/* 主按钮：暖金底，全屏至多一个 */
.btn--gold {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(200, 155, 60, 0.32);
}

.btn--gold:hover {
  background: var(--color-accent-hover);
}

/* 次按钮：主色描边 */
.btn--ghost {
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
}

.btn--ghost:hover {
  background: var(--color-primary);
  color: #fff;
}

/* 深底上的次按钮：白描边 */
.btn--ghost-light {
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  color: #fff;
  background: transparent;
}

.btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* 页头联系按钮：金边白底 */
.btn--outline-gold {
  border: 1.5px solid var(--color-accent);
  color: var(--color-accent-hover);
  background: #fff;
  padding: 8px 20px;
  min-height: 40px;
}

.btn--outline-gold:hover {
  background: var(--color-accent);
  color: #fff;
}

/* ---- 4.2 页头 ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-header);
  border-color: var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: 64px;
}

@media (min-width: 1024px) {
  .site-header__inner {
    height: 72px;
  }
}

/* 品牌 */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.brand__logo {
  width: 34px;
  height: 34px;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand__name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.brand__sub {
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
}

.brand--light {
  color: #fff;
}

/* 主导航（桌面） */
.site-nav {
  display: none;
  margin-left: auto;
}

@media (min-width: 1024px) {
  .site-nav {
    display: block;
  }
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  color: var(--color-text);
  transition: color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}

.site-nav__link:hover {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

.site-nav__link[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 700;
  position: relative;
}

.site-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 1px;
}

.icon-chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.2s var(--ease-out);
}

.site-nav__item--dropdown {
  position: relative;
}

.site-nav__item--dropdown.is-open .icon-chevron {
  transform: rotate(180deg);
}

/* 解决方案下拉：白卡两列 */
.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: 560px;
  padding: var(--space-4);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out),
    visibility 0.18s;
}

.site-nav__item--dropdown.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown__link {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  transition: background-color 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}

.dropdown__link:hover {
  background: var(--color-bg-alt);
  border-left-color: var(--color-accent);
}

.dropdown__link strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.dropdown__link span {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* 页头 CTA：移动端隐藏（悬浮按钮承接） */
.site-header__cta {
  display: none;
}

@media (min-width: 1024px) {
  .site-header__cta {
    display: inline-flex;
    margin-left: var(--space-2);
  }
}

/* 汉堡按钮（移动端） */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  margin-left: auto;
  border-radius: var(--radius-sm);
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 1px;
  transition: transform 0.25s var(--ease-out), opacity 0.2s;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* 移动端抽屉导航 */
@media (max-width: 1023.98px) {
  .site-nav {
    display: block;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: #fff;
    padding: var(--space-5) var(--space-4) var(--space-8);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.28s var(--ease-out);
  }

  .site-nav.is-open {
    transform: translateX(0);
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 14px 8px;
    font-size: 16px;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
  }

  .site-nav__link[aria-current="page"]::after {
    display: none;
  }

  .site-nav__link[aria-current="page"] {
    border-bottom-color: var(--color-border);
  }

  .dropdown {
    position: static;
    transform: none;
    width: 100%;
    grid-template-columns: 1fr;
    padding: 0 0 0 12px;
    border: none;
    box-shadow: none;
    opacity: 1;
    visibility: hidden;
    display: none;
  }

  .site-nav__item--dropdown.is-open .dropdown {
    display: grid;
    visibility: visible;
    /* 覆盖桌面端 is-open 规则的 translateX(-50%)：该规则特异性更高，
       不重置会把面板左移自身宽度的一半，导致子项被移出屏幕 */
    transform: none;
  }

  .dropdown__link {
    padding: 10px 8px;
  }

  .dropdown__link strong {
    font-size: 15px;
  }
}

/* ---- 4.3 Hero ---- */
.hero {
  position: relative;
  padding-block: 56px 64px;
  overflow: hidden;
  /* 极淡网格纹理：呼应"受控的秩序"，透明度 4% */
  background-image:
    linear-gradient(rgba(11, 59, 92, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 59, 92, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}

@media (min-width: 1024px) {
  .hero {
    padding-block: 72px 88px;
  }
}

.hero__inner {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 55fr 45fr;
    gap: var(--space-8);
  }
}

.hero__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--color-secondary);
  margin-bottom: var(--space-4);
}

.hero__title {
  font-size: var(--text-hero);
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: 0.01em;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-4);
}

/* "安全可控"金色下划线 —— 全屏第一处金色 */
.hero__em {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 7px;
}

.hero__lead {
  font-size: 17px;
  color: var(--color-text-secondary);
  max-width: 30em;
  margin-bottom: var(--space-6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.hero__anchors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}

.hero__anchors li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.hero__anchors strong {
  font-size: 13px;
  color: var(--color-text);
  font-weight: 600;
}

.hero__anchors svg {
  width: 22px;
  height: 22px;
  color: var(--color-secondary);
  flex-shrink: 0;
}

.hero__visual {
  display: flex;
  justify-content: center;
}

.hero__img {
  width: 100%;
  max-width: 420px;
}

@media (min-width: 1024px) {
  .hero__img {
    max-width: 520px;
  }
}

/* Hero 交错入场：JS 依次添加 is-in */
.hero [data-hero] {
  opacity: 0;
  transform: translateY(14px);
}

.hero.is-ready [data-hero] {
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: calc(var(--hero-order, 1) * 80ms);
  opacity: 1;
  transform: none;
}

/* ---- 4.4 落地难点卡 ---- */
.pain-grid {
  counter-reset: pain;
}

.pain-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out),
    border-top-color 0.2s var(--ease-out);
}

.pain-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-top-color: var(--color-accent);
}

/* 大序号：编辑感排版，主色低透明度叠印 */
.pain-card__num {
  position: absolute;
  top: 10px;
  right: 16px;
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  color: rgba(11, 59, 92, 0.12);
  font-variant-numeric: tabular-nums;
}

.pain-card__icon {
  width: 36px;
  height: 36px;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.pain-card__title {
  font-size: var(--text-h3);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.pain-card__desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

/* ---- 4.5 解决方案卡 ---- */
.sol-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  overflow: hidden;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out);
}

/* 顶部金线：hover 时从 0 展开 —— 第二处金色动效 */
.sol-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s var(--ease-out);
}

.sol-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border);
}

.sol-card:hover::before {
  transform: scaleX(1);
}

.sol-card__icon {
  width: 38px;
  height: 38px;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.sol-card__title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.sol-card__desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  flex-grow: 1;
}

.sol-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-4);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-secondary);
}

.sol-card__more svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s var(--ease-out);
}

.sol-card:hover .sol-card__more svg {
  transform: translateX(3px);
}

/* ---- 4.6 交付流程（深蓝区） ---- */
.flow-section {
  position: relative;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 24px 24px;
}

.flow-section .section-head__eyebrow {
  color: rgba(255, 255, 255, 0.65);
}

.flow-section .section-head__title {
  color: #fff;
}

.flow-steps {
  display: grid;
  gap: var(--space-5);
  counter-reset: flow;
}

@media (min-width: 1024px) {
  .flow-steps {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-4);
  }
}

.flow-step {
  position: relative;
  text-align: left;
}

@media (min-width: 1024px) {
  .flow-step {
    text-align: center;
    padding-top: var(--space-2);
  }
}

/* 节点圆点 */
.flow-step__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
  margin-bottom: var(--space-3);
  position: relative;
  transition: background-color 0.25s var(--ease-out),
    border-color 0.25s var(--ease-out);
}

/* 点亮态：蓝绿填充 */
.flow-step.is-lit .flow-step__dot {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}

/* 全部点亮后的金色小圆点："全程可控" */
.flow-step__dot::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-bg-dark);
  transform: scale(0);
  transition: transform 0.25s var(--ease-out) 0.1s;
}

.flow-steps.is-complete .flow-step__dot::after {
  transform: scale(1);
}

.flow-step__name {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.flow-step__desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.6;
}

/* 桌面横向连线：伪元素绘制于节点之间 */
@media (min-width: 1024px) {
  .flow-step::before {
    content: "";
    position: absolute;
    top: 24px;
    right: calc(50% + 32px);
    left: calc(-50% + 32px);
    height: 1.5px;
    background: rgba(255, 255, 255, 0.25);
  }

  .flow-step:first-child::before {
    display: none;
  }

  .flow-step.is-lit::before {
    background: var(--color-secondary);
  }
}

/* ---- 4.7 安全与治理（非对称列表） ---- */
.gov__inner {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 1024px) {
  .gov__inner {
    grid-template-columns: 40fr 60fr;
    gap: var(--space-8);
    align-items: start;
  }

  .gov__intro {
    position: sticky;
    top: 120px;
  }
}

.gov__intro .section-head {
  margin-bottom: 0;
}

/* 金句收尾金线 */
.gov__intro .section-head__title {
  border-left: none;
  border-bottom: 3px solid var(--color-accent);
  display: inline-block;
  padding-left: 0;
  padding-bottom: 6px;
  margin-bottom: var(--space-4);
}

.gov-list {
  display: flex;
  flex-direction: column;
}

.gov-list__item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  border-left: 3px solid transparent;
  transition: background-color 0.2s var(--ease-out),
    border-left-color 0.2s var(--ease-out);
}

.gov-list__item:first-child {
  border-top: 1px solid var(--color-border);
}

.gov-list__item:hover {
  background: var(--color-bg-alt);
}

/* 第 1 项默认金色左边条强调 —— 本区唯一金色 */
.gov-list__item--lead,
.gov-list__item:hover {
  border-left-color: var(--color-accent);
}

.gov-list__icon {
  width: 32px;
  height: 32px;
  color: var(--color-primary);
  flex-shrink: 0;
  padding: 5px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  transition: background-color 0.2s var(--ease-out);
}

.gov-list__item:hover .gov-list__icon {
  background: var(--color-secondary-light);
}

.gov-list__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 2px;
}

.gov-list__desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

/* ---- 4.8 客户信赖墙 ---- */
.clients-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-6);
}

.clients-head__title {
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-3);
}

.clients-head__sub {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.clients-head__note {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.clients-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.clients-tags__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.clients-tags__item::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.clients-tags__item--tech {
  background: var(--color-secondary-light);
  color: var(--color-secondary);
}

.clients-tags__item--fin {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.clients-tags__item--org {
  background: #EEF1F4;
  color: var(--color-text-secondary);
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .clients-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .clients-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* 客户 Logo 卡：默认彩色，悬停 0.3s 渐变为灰度（应用户要求的方向） */
.client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.client-logo:hover {
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-card);
}

.client-logo img {
  max-width: 140px;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(0);
  opacity: 0.92;
  transition: filter 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

.client-logo:hover img {
  filter: grayscale(1);
  opacity: 0.75;
}

.clients-link {
  text-align: center;
}

/* ---- 4.9 关于入口 ---- */
.about-entry__inner {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 1024px) {
  .about-entry__inner {
    grid-template-columns: 60fr 40fr;
    gap: var(--space-8);
    align-items: center;
  }
}

.about-entry__text .section-head {
  margin-bottom: var(--space-4);
}

.about-entry__para {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.about-entry__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.belief-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.belief-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}

/* 金色序点 —— 关键词卡的信任标记 */
.belief-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  margin-top: 8px;
  flex-shrink: 0;
}

.belief-card__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 2px;
}

.belief-card__desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

/* ---- 4.10 FAQ ---- */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq__item {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.faq__item[open] {
  border-color: var(--color-border);
  box-shadow: var(--shadow-card);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.2s var(--ease-out);
}

.faq__item[open] .faq__chevron {
  transform: rotate(180deg);
}

.faq__a {
  padding: 0 20px 18px;
}

.faq__a p {
  color: var(--color-text-secondary);
}

/* 展开项左侧金色竖条 —— 窄而克制 */
.faq__item[open] {
  border-left: 3px solid var(--color-accent);
}

/* ---- 4.11 CTA 条 ---- */
.cta-section {
  padding-top: 0;
}

.cta-banner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-bg-dark);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  border-radius: var(--radius-lg);
  color: #fff;
}

@media (min-width: 1024px) {
  .cta-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-7) var(--space-8);
  }
}

.cta-banner__title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.cta-banner__desc {
  color: rgba(255, 255, 255, 0.72);
}

.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* ---- 4.12 页脚 ---- */
.site-footer {
  background: var(--color-bg-dark);
  color: rgba(255, 255, 255, 0.8);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-8) var(--space-7);
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--space-7);
  }
}

.site-footer__slogan {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: var(--space-4);
  max-width: 22em;
}

.site-footer__heading {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-4);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
}

.site-footer__list a {
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.2s var(--ease-out);
}

.site-footer__list a:hover {
  color: #fff;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  justify-content: space-between;
  padding-block: var(--space-4);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
}

/* 备案信息行：ICP / 公安备案 / 增值电信许可证，链接可点 */
.site-footer__beian {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  list-style: none;
}

.site-footer__beian a {
  color: inherit;
  transition: color 0.15s var(--ease-out);
}

.site-footer__beian a:hover {
  color: #fff;
}

/* 大模型备案号 + 算法备案号：默认行内展示（禁 JS 兜底），
   JS 增强后算法号列表收进锚定在备案号上方的浮层 */
.site-footer__algo {
  display: inline;
}

.site-footer__algo.is-enhanced {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* 箭头按钮：默认 hidden（禁 JS 时不显示），JS 初始化后展示 */
.site-footer__algo-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.62);
  transition: color 0.15s var(--ease-out), background-color 0.15s var(--ease-out);
}

/* 视觉 22px，热区外扩至 44px，满足触控目标要求 */
.site-footer__algo-toggle::after {
  content: '';
  position: absolute;
  inset: -11px;
}

.site-footer__algo-toggle:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

.site-footer__algo-toggle svg {
  width: 12px;
  height: 12px;
  transition: transform 0.2s var(--ease-out);
}

/* 展开后箭头由向上转为向下，提示再次点击收起 */
.site-footer__algo-toggle[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

/* 算法备案号列表：禁 JS 兜底为行下纵排；JS 可用时默认 hidden */
.site-footer__algo-pop {
  margin: 2px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* JS 增强态：白底浮层锚定在大模型备案号正上方
   层级高于悬浮按钮（120），避免展开时被右侧悬浮组遮挡 */
.site-footer__algo.is-enhanced .site-footer__algo-pop {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  z-index: 130;
  min-width: 280px;
  margin: 0;
  padding: 12px 16px;
  background: #fff;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card-hover);
}

/* 备案编号较长，禁止折行保证浮层紧凑 */
.site-footer__algo-pop li {
  white-space: nowrap;
}

.site-footer__algo.is-enhanced .site-footer__algo-pop li + li {
  margin-top: 6px;
}

/* ---- 4.13 悬浮联系按钮（全站通用） ---- */
.float-contact {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 120;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.float-contact__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.float-contact__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-card-hover);
  transition: background-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.float-contact__btn:hover {
  background: var(--color-secondary);
  transform: scale(1.04);
}

.float-contact__btn svg {
  width: 22px;
  height: 22px;
}

/* 文字标签：默认隐藏，hover / focus 展开 */
.float-contact__label {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  white-space: nowrap;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-dark);
  color: #fff;
  font-size: 12px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out),
    visibility 0.2s;
}

.float-contact__btn:hover .float-contact__label,
.float-contact__btn:focus-visible .float-contact__label {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* 返回顶部：滚动超一屏后由 JS 移除 hidden */
.float-contact__btn--top {
  background: var(--color-text-secondary);
}

.float-contact__btn--top:hover {
  background: var(--color-primary);
}

/* ---- 4.14 联系弹窗（全站统一联系入口） ---- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.modal__mask {
  position: absolute;
  inset: 0;
  background: rgba(7, 42, 68, 0.55);
}

.modal__dialog {
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: var(--space-6);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  animation: modal-in 0.2s var(--ease-out);
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--color-text-muted);
  border-radius: 50%;
  transition: background-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}

.modal__close:hover {
  background: var(--color-bg-alt);
  color: var(--color-text);
}

.modal__close svg {
  width: 18px;
  height: 18px;
}

.modal__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--color-secondary);
}

.modal__title {
  margin-top: var(--space-1);
  font-size: 26px;
  font-weight: 800;
  color: var(--color-text);
}

.modal__desc {
  margin-top: var(--space-2);
  font-size: 14px;
  color: var(--color-text-secondary);
}

.modal__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  margin-top: var(--space-5);
  align-items: start;
}

.modal__qrcode {
  text-align: center;
}

.modal__qrcode img {
  display: block;
  width: 180px;
  height: 180px;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  object-fit: contain;
}

.modal__qrcode figcaption {
  margin-top: var(--space-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.6;
}

.modal__qrcode figcaption span {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-muted);
}

.modal__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.modal__list li {
  padding-left: 12px;
  border-left: 3px solid var(--color-primary-light);
}

.modal__label {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
}

.modal__value {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.6;
}

.modal__value--link {
  color: var(--color-primary);
  transition: color 0.15s var(--ease-out);
}

.modal__value--link:hover {
  color: var(--color-secondary);
}

@media (max-width: 767.98px) {
  .modal {
    padding: var(--space-3);
  }

  .modal__dialog {
    padding: var(--space-5) var(--space-4);
  }

  .modal__grid {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-5);
  }

  .modal__list {
    width: 100%;
  }
}

/* 移动端：缩小并靠下，避免遮挡正文 */
@media (max-width: 767.98px) {
  .float-contact {
    right: 12px;
    top: auto;
    bottom: 18px;
    transform: none;
  }

  .float-contact__btn {
    width: 44px;
    height: 44px;
  }
}

/* --------------------------------------------------------------------------
   5 · 动效
   全部轻量、仅一次触发；prefers-reduced-motion 下整体关闭
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* 显现动画关闭后内容直接可见 */
  [data-reveal],
  .hero [data-hero] {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   7 · 方案页组件（P2 总览 / P3 知识助手 / P4 流程智能体）
   复用第 4 节既有组件（pain-card / sol-card / flow-steps / faq / cta-banner），
   此处只新增方案页专属样式；金色纪律：单屏不超过 2 处
   -------------------------------------------------------------------------- */

/* ---- 7.1 三列网格：方案详情页痛点区（6 条 3 列） ---- */
@media (min-width: 768px) {
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- 7.2 详情页 Hero 变体：浅蓝底与首页深色 Hero 区分，保持网格纹理 ---- */
.hero--detail,
.hero--overview {
  background-color: var(--color-primary-light);
}

/* 面包屑：三级路径，帮助用户定位"总览 → 详情"的层级关系 */
.crumb {
  margin-bottom: var(--space-4);
}

.crumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* 分隔符用伪元素绘制，避免额外标签影响语义 */
.crumb__item + .crumb__item::before {
  content: "/";
  margin-right: 8px;
  color: var(--color-border);
}

.crumb__link {
  color: var(--color-text-secondary);
  transition: color 0.15s var(--ease-out);
}

.crumb__link:hover {
  color: var(--color-primary);
}

/* 适用对象标签：仅作身份识别，非交互元素 */
.aud-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.aud-tag {
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* ---- 7.3 方案速览（P2 Hero 右列）：移动端隐藏，由问题清单承担导航 ---- */
.sol-index {
  display: none;
}

@media (min-width: 1024px) {
  .sol-index {
    display: block;
    padding: var(--space-3) var(--space-4);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
  }
}

.sol-index__list li + li {
  border-top: 1px solid var(--color-bg-alt);
}

.sol-index__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-left: 2px solid transparent;
  font-size: 13px;
  color: var(--color-text);
  transition: background-color 0.15s var(--ease-out),
    border-color 0.15s var(--ease-out);
}

.sol-index__link:hover {
  background: var(--color-bg-alt);
  border-left-color: var(--color-accent);
}

.sol-index__num {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-secondary);
  font-variant-numeric: tabular-nums;
}

/* ---- 7.4 问题对照清单（P2 核心）：问题 → 方案 的目录式翻译 ---- */
.prob-map {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.prob-map__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "num q chev"
    "num sol chev";
  column-gap: var(--space-4);
  row-gap: 2px;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 3px solid transparent;
  border-radius: var(--radius-md);
  transition: border-color 0.2s var(--ease-out),
    box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

/* hover 金色左边条：与 sol-card 同一语言，指示"可点、可去" */
.prob-map__item:hover {
  border-left-color: var(--color-accent);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

.prob-map__num {
  grid-area: num;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  color: rgba(11, 59, 92, 0.25);
  font-variant-numeric: tabular-nums;
}

.prob-map__q {
  grid-area: q;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.prob-map__sol {
  grid-area: sol;
  font-size: 13px;
  color: var(--color-secondary);
}

.prob-map__chevron {
  grid-area: chev;
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  transition: transform 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.prob-map__item:hover .prob-map__chevron {
  color: var(--color-primary);
  transform: translateX(3px);
}

/* 合规声明（FR-S4）：声明性小字，弱化视觉但保持可读 */
.prob-map__note {
  margin-top: var(--space-4);
  font-size: 13px;
  color: var(--color-text-muted);
}

/* ---- 7.5 方案详情卡（P2）：八张宽卡两列排布，附场景 chip ---- */
@media (min-width: 768px) {
  .sol-detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sol-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

/* 大序号与 pain-card 同语言：低透明度叠印，弱于标题 */
.sol-card__num {
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  color: rgba(11, 59, 92, 0.14);
  font-variant-numeric: tabular-nums;
}

.sol-card__aud {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
  font-size: 13px;
  color: var(--color-text-muted);
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-3);
}

.chip {
  padding: 3px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg-alt);
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* ---- 7.6 引导区（P2"不确定从哪开始"）：文字 + 卡片非对称两栏 ---- */
.guide-split {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .guide-split {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-8);
    align-items: stretch;
  }
}

.guide-split__text .section-head {
  margin-bottom: 0;
}

.guide-split__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-6);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out);
}

.guide-split__card:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-card-hover);
}

.guide-split__card-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.guide-split__card-desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

/* ---- 7.7 做法步骤列表（P3/P4"我们怎么做"）：编号圆点 + 步骤文案 ---- */
.method-list {
  display: flex;
  flex-direction: column;
}

.method-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.method-list__item:first-child {
  border-top: 1px solid var(--color-border);
}

.method-list__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1.5px solid var(--color-primary);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.method-list__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 2px;
}

.method-list__desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

/* ---- 7.8 服务范围与边界卡：✓ 做什么 / ✗ 不做什么，边界可视化 ---- */
.scope-card {
  margin-top: var(--space-7);
  padding: var(--space-6);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.scope-card__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.scope-card__cols {
  display: grid;
  gap: var(--space-4) var(--space-6);
}

@media (min-width: 768px) {
  .scope-card__cols {
    grid-template-columns: 1fr 1fr;
  }
}

.scope-card__list li {
  position: relative;
  padding: 4px 0 4px 24px;
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

/* ✓ / ✗ 用伪元素绘制（\2713/\2715 为 ASCII 转义，不依赖文件编码），
   语义上列表仍是纯文本，颜色语义：绿=含、橙=不含 */
.scope-card__list li::before {
  position: absolute;
  left: 0;
  font-weight: 700;
}

.scope-card__list--in li::before {
  content: "\2713";
  color: var(--color-success);
}

.scope-card__list--out li::before {
  content: "\2715";
  color: var(--color-warning);
}

.scope-card__note {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ---- 7.9 问答演示壳（P3 记忆点）：浏览器窗造型 + "演示内容"角标 ---- */
.demo-shell {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* 演示角标（合规红线）：暖金浅底 + 深金文字，白字版本对比度仅约 2.5:1 不达标（2026-10-07 修正） */
.demo-shell__badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(200, 155, 60, 0.45);
  background: #f5e9cf;
  color: #6e5116;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.demo-shell__topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px var(--space-5);
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}

/* 三圆点用中性灰而非 macOS 彩色：避免花哨，呼应"受控的秩序" */
.demo-shell__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
}

.demo-shell__app {
  margin-left: var(--space-2);
  font-size: 12px;
  color: var(--color-text-muted);
}

.demo-shell__body {
  padding: var(--space-6) var(--space-5);
}

.demo-shell__q {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-3);
}

.demo-shell__a {
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--color-text);
}

.demo-shell__a > p {
  color: var(--color-text-secondary);
}

/* 引用来源块：左蓝绿竖线呼应"可溯源" */
.demo-shell__src {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid var(--color-secondary);
  background: var(--color-secondary-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.demo-shell__src-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-secondary);
}

.demo-shell__src ul li {
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* 状态徽标：teal=已回答有出处；橙=建议转人工（语义警示，不占用金色） */
.qa-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.qa-status--ok {
  background: var(--color-secondary-light);
  color: var(--color-secondary);
}

.qa-status--handoff {
  background: rgba(178, 106, 0, 0.1);
  color: var(--color-warning);
}

/* 演示卡内实数（如"600 元"）用蓝绿强调：真实感数字比占位符更能传达"回答有出处" */
.demo-shell__a strong {
  color: var(--color-secondary);
  font-weight: 700;
}

.demo-shell__note {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ---- 7.10 典型适用场景（5 条 5 列）：紧凑卡，桌面 5 列满排 ---- */
.usecase-card {
  height: 100%;
  padding: var(--space-5) var(--space-4);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.usecase-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.usecase-card__icon {
  width: 30px;
  height: 30px;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.usecase-card__title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.usecase-card__desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

@media (min-width: 768px) {
  .usecase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  /* 5 张卡满排一行：条数约定为 5，正是为了匹配此布局 */
  .usecase-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
  }
}

/* ---- 7.11 实施流程浅色变体：原 flow-steps 仅适配深蓝底，此处反白 ---- */
.flow-steps--light .flow-step__dot {
  border-color: rgba(11, 59, 92, 0.35);
  color: var(--color-primary);
}

.flow-steps--light .flow-step.is-lit .flow-step__dot {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}

/* 金色完成点的描边随底色改白，避免深色描边在浅底上突兀 */
.flow-steps--light .flow-step__dot::after {
  border-color: #fff;
}

.flow-steps--light .flow-step__name {
  color: var(--color-primary-dark);
}

.flow-steps--light .flow-step__desc {
  color: var(--color-text-secondary);
}

@media (min-width: 1024px) {
  /* auto-fit：P3 五步、P4 链路六步都能等分满排，无需各自写死列数 */
  .flow-steps--light {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-4);
  }

  .flow-steps--light .flow-step::before {
    background: rgba(11, 59, 92, 0.18);
  }

  .flow-steps--light .flow-step.is-lit::before {
    background: var(--color-secondary);
  }
}

/* ---- 7.12 人工确认节点（P4 记忆点）：全链唯一金色节点 ---- */
.flow-steps--light .flow-step--human .flow-step__dot {
  border-color: var(--color-accent);
  color: var(--color-accent-hover);
}

.flow-steps--light .flow-step--human.is-lit .flow-step__dot {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.flow-steps--light .flow-step--human.is-lit::before {
  background: var(--color-accent);
}

/* ---- 7.13 工作链路卡（P4）：白底长卡承载六步链路 ---- */
.agent-chain {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.agent-chain__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-6);
}

.agent-chain__note {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border);
  font-size: 13px;
  color: var(--color-text-muted);
}

/* ---- 7.14 交付成果列表：✓ 圆标 + 条目，节奏与 method-list 一致 ---- */
.deliver-list {
  display: flex;
  flex-direction: column;
}

.deliver-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-1);
  border-bottom: 1px solid var(--color-border);
}

.deliver-list__item:first-child {
  border-top: 1px solid var(--color-border);
}

.deliver-list__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--color-secondary-light);
  color: var(--color-secondary);
  font-size: 12px;
  font-weight: 700;
}

.deliver-list__check::before {
  content: "\2713";
}

.deliver-list__title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 2px;
}

.deliver-list__desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.deliver-list__note {
  margin-top: var(--space-4);
  font-size: 13px;
  color: var(--color-text-muted);
}

/* ---- 7.15 安全与边界（深蓝区）规则列表：白字列表，无卡片堆叠 ---- */
.rule-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.rule-list__item:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.rule-list__icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.85);
}

.rule-list__title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}

.rule-list__desc {
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.68);
}

/* ---- 7.16 权限等级（P4 差异化）：L1-L4 阶梯卡，L4 金边警示 ---- */
.perm-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.perm-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.perm-card__level {
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
}

.perm-card__name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.perm-card__desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  flex-grow: 1;
}

.perm-card__example {
  margin-top: var(--space-3);
  font-size: 12px;
  color: var(--color-text-muted);
}

.perm-card__human {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* L4 警示：金边 + 橙色警示行，视觉上明显高于 L1-L3 */
.perm-card--lv4 {
  border-color: var(--color-accent);
}

.perm-card__warn {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: var(--space-3);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-warning);
}

.perm-card__warn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* 桌面端阶梯感：等级越高卡片越下沉，可视化"逐级放开" */
@media (min-width: 1200px) {
  .perm-grid .perm-card:nth-child(2) {
    margin-top: var(--space-4);
  }

  .perm-grid .perm-card:nth-child(3) {
    margin-top: var(--space-6);
  }

  .perm-grid .perm-card:nth-child(4) {
    margin-top: var(--space-7);
  }
}

@media (min-width: 768px) {
  .perm-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .perm-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- 7.17 导航高亮补充：方案总览用类名标记当前页（按钮无 href） ---- */
.site-nav__link--current {
  color: var(--color-primary);
  font-weight: 700;
  position: relative;
}

.site-nav__link--current::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 1px;
}

/* 下拉内当前项：金色左边条 + 底色，与 desktop hover 语言一致 */
.dropdown__link[aria-current="page"] {
  background: var(--color-bg-alt);
  border-left-color: var(--color-accent);
}

.dropdown__link[aria-current="page"] strong {
  color: var(--color-primary);
}

/* ---- 7.18 方案页移动端适配（375px 档）：收紧间距、防溢出 ---- */
@media (max-width: 767.98px) {
  /* 问题清单：序号+问题一行、方案名换行缩进，chevron 保持右侧 */
  .prob-map__item {
    padding: var(--space-3) var(--space-4);
  }

  .prob-map__q {
    font-size: 15px;
  }

  .demo-shell__body {
    padding: var(--space-5) var(--space-4);
  }

  .demo-shell__a {
    padding: var(--space-3) var(--space-4);
  }

  /* 演示角标与顶栏应用名错开，避免小屏重叠 */
  .demo-shell__badge {
    top: 10px;
    right: 10px;
  }

  .demo-shell__app {
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .agent-chain,
  .scope-card {
    padding: var(--space-5) var(--space-4);
  }

  .guide-split__card {
    padding: var(--space-5);
  }
}

/* ---- 7.19 能力卡网格（P5 / P6 共用）：名称 + 一句话说明的紧凑槽位 ---- */
.cap-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

.cap-card {
  height: 100%;
  padding: var(--space-5) var(--space-4);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.cap-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.cap-card__icon {
  width: 30px;
  height: 30px;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.cap-card__title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.cap-card__desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

/* 第 8 格分工说明卡：浅蓝底跳出白卡序列，把"AI 与顾问分工"做成视觉锚点 */
.cap-card--note {
  background: var(--color-primary-light);
  border-color: transparent;
}

.cap-card--note:hover {
  box-shadow: none;
  transform: none;
}

.cap-card--note .cap-card__title {
  color: var(--color-primary-dark);
}

/* 能力清单小标题：强调"仅列核实项"的信任表达 */
.cap-subhead {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary-dark);
  padding-left: 10px;
  border-left: 3px solid var(--color-secondary);
  margin-bottom: var(--space-4);
}

.cap-grid__note {
  margin-top: var(--space-4);
  font-size: 12px;
  color: var(--color-text-muted);
}

@media (min-width: 640px) {
  .cap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .cap-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- 7.20 资质台账演示（P5 记忆点）：到期时间带 + 4 行演示表格 ---- */
/* 时间带：12 格等宽示意"未来一年"，橙格即"90 天内到期"的亮红灯 */
.ledger-timeline {
  display: flex;
  gap: 3px;
  margin-bottom: var(--space-2);
}

.ledger-timeline__cell {
  flex: 1;
  height: 10px;
  border-radius: 2px;
  background: #fff;
  border: 1px solid var(--color-border);
}

.ledger-timeline__cell--past {
  background: var(--color-secondary-light);
  border-color: transparent;
}

.ledger-timeline__cell--near {
  background: var(--color-warning);
  border-color: transparent;
}

.ledger-timeline__caption {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

/* 演示表格：仅 4 行示例数据，caption 顶部声明"演示数据" */
.ledger-table {
  width: 100%;
  border-collapse: collapse;
}

.ledger-table caption {
  caption-side: top;
  text-align: left;
  font-size: 12px;
  color: var(--color-text-muted);
  padding-bottom: var(--space-3);
}

.ledger-table th {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
}

.ledger-table td {
  font-size: 14px;
  padding: 10px 12px;
  border-bottom: 1px dashed var(--color-border);
  vertical-align: middle;
}

.ledger-table tbody tr:last-child td {
  border-bottom: none;
}

/* 即将到期行：淡橙底衬托状态 pill 的"亮红灯" */
.ledger-table__row--warn {
  background: rgba(178, 106, 0, 0.05);
}

/* 第三种状态 pill：整理中（材料缺项），浅蓝底区别于正常/警示 */
.qa-status--todo {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* ≤640px 表格卡片化：thead 隐藏、每行变块、data-label 作行内表头，
   避免小屏横向滚动（项目验收红线） */
@media (max-width: 640px) {
  .ledger-table thead {
    display: none;
  }

  /* caption 保留 UA 的 table-caption 会在块化表格里被挤成窄条，需一并块化 */
  .ledger-table caption {
    display: block;
    width: 100%;
  }

  .ledger-table,
  .ledger-table tbody,
  .ledger-table tr,
  .ledger-table td {
    display: block;
    width: 100%;
  }

  .ledger-table tbody tr {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-3);
  }

  .ledger-table__row--warn {
    border-color: rgba(178, 106, 0, 0.25);
  }

  .ledger-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 6px 2px;
    border-bottom: none;
    text-align: right;
  }

  .ledger-table td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-align: left;
  }
}

/* ---- 7.21 覆盖领域参考行（P5）：只列分类名，不引数量 ---- */
.domain-row {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px dashed var(--color-border);
}

.domain-row__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-3);
}

.domain-row__note {
  margin-top: var(--space-3);
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ---- 7.22 防线拦截分支（P6 记忆点）：主链上方右侧的金色虚线卡 ----
   全链唯一金色虚线元素，与 Hero CTA 构成本页两处金色；
   ::after 为分支底边中点垂下的短虚线，示意"从主链分出" */
.agent-chain__branch {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 560px;
  margin: 0 0 var(--space-6) auto;
  padding: var(--space-3) var(--space-4);
  border: 1.5px dashed var(--color-accent);
  border-radius: var(--radius-sm);
  background: rgba(200, 155, 60, 0.06);
  font-size: 14px;
  color: var(--color-text-secondary);
}

.agent-chain__branch strong {
  color: var(--color-primary-dark);
}

.agent-chain__branch svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-accent);
}

.agent-chain__branch::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -22px;
  height: 20px;
  border-left: 1.5px dashed var(--color-accent);
}

/* agent-chain__steps：P4/P6 共用的链路图容器类名钩子，无独立样式
   （布局由 .flow-steps 与 .agent-chain 的子元素规则承担） */

/* ---- 7.23 大痛点卡修饰（P6）：3 条单行大卡，描述放宽一档 ---- */
.pain-card--lg {
  padding: var(--space-6) var(--space-5);
}

.pain-card--lg .pain-card__desc {
  font-size: 14px;
}

/* ---- 7.24 定位声明与治理四支柱（P6 深蓝区）：防护栏 ≠ 全部 ---- */
/* 定位声明：左竖条 + 微白底，把"不代表绝对安全"做成版面重量 */
.quote-line {
  max-width: 720px;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-secondary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(255, 255, 255, 0.05);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: var(--space-7);
}

.quote-line strong {
  color: #fff;
}

/* 四支柱：深蓝底上的半透明卡，与浅色区卡片语言形成同构对照 */
.pillar-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

.pillar-card {
  padding: var(--space-5);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
}

.pillar-card__icon {
  width: 30px;
  height: 30px;
  color: var(--color-secondary-light);
  margin-bottom: var(--space-3);
}

.pillar-card__title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.pillar-card__desc {
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.66);
}

@media (min-width: 640px) {
  .pillar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .pillar-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- 7.25 P5/P6 移动端适配补充（375px 档） ---- */
@media (max-width: 767.98px) {
  /* 拦截分支：小屏取消右对齐与垂线，退化为全宽提示条 */
  .agent-chain__branch {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: var(--space-5);
  }

  .agent-chain__branch::after {
    display: none;
  }

  .quote-line {
    padding: var(--space-3) var(--space-4);
    font-size: 15px;
    margin-bottom: var(--space-6);
  }

  .pillar-card {
    padding: var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   7.26 纯前端自测问卷（P7 场景初筛 / P10 成熟度自测共用）
   说明：题目与结果文案全部为静态 HTML，JS（main.js 模块 9）只做查表显隐；
         提交按钮默认隐藏，JS 加 .is-enhanced 后才出现（禁 JS 无效按钮）
   -------------------------------------------------------------------------- */
.quiz-card {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* 顶部声明条（合规红线：沟通参考 + 不存储不上传，必须醒目） */
.quiz-card__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: var(--text-small);
}

.quiz-card__notice svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.quiz-card__body {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-5);
}

/* fieldset/legend 重置：只保留题干排版 */
.quiz-q {
  margin: 0;
  padding: 0;
  border: 0;
}

.quiz-q__title {
  padding: 0;
  margin-bottom: var(--space-3);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

/* "必答/选填"小徽标：必答用警示橙、选填用中性灰，语义一眼可辨 */
.quiz-q__req {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px 8px;
  vertical-align: 2px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-warning);
}

.quiz-q__req--optional {
  color: var(--color-text-muted);
}

.quiz-q__opts {
  display: grid;
  gap: var(--space-2);
}

.quiz-opt {
  position: relative;
  display: block;
  cursor: pointer;
}

/* 原生 radio 视觉隐藏但铺满选项：保留键盘聚焦与触控命中区 */
.quiz-opt input {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.quiz-opt__text {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px; /* 触控目标下限 */
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-body);
  color: var(--color-text);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* 自绘单选圆点：视觉受控，且随选中态联动 */
.quiz-opt__text::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-text-muted);
  border-radius: 50%;
  background: #fff;
  transition: border-color 0.2s ease, border-width 0.2s ease;
}

.quiz-opt input:checked + .quiz-opt__text {
  border-color: var(--color-secondary);
  background: var(--color-secondary-light);
  color: var(--color-primary);
  font-weight: 600;
}

/* 选中后圆点加厚描边形成实心环，颜色与选项边框一致 */
.quiz-opt input:checked + .quiz-opt__text::before {
  border-color: var(--color-secondary);
  border-width: 5px;
}

/* 键盘焦点环：跟随自绘文本层，焦点态永不清除 */
.quiz-opt input:focus-visible + .quiz-opt__text {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.quiz-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* 提交按钮：默认 display:none，.is-enhanced（JS 可用）后才显示 */
.quiz-card__submit {
  display: none;
  appearance: none;
  min-height: 44px;
  padding: 0 var(--space-6);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-secondary);
  color: #fff;
  font-size: var(--text-body);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.quiz-card.is-enhanced .quiz-card__submit {
  display: inline-block;
}

/* hover 深一档：变量表无 secondary-dark，故用字面量（对应 #0E7C86 的深档） */
.quiz-card__submit:hover:not(:disabled) {
  background: #0B6A73;
}

.quiz-card__submit:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.quiz-card__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.quiz-card__noscript {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

/* 结果区：与题目区以虚线分隔，暗示"提交后揭晓" */
.quiz-result {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px dashed var(--color-border);
}

.quiz-result__panel {
  padding: var(--space-5);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
}

/* 提交后 JS 会 focus() 到结果卡（tabindex="-1"）：给可见焦点态而非清除 */
.quiz-result__panel:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.quiz-result__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-secondary);
}

.quiz-result__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-h3);
  color: var(--color-primary);
}

.quiz-result__desc,
.quiz-result__stage-desc {
  margin: 0 0 var(--space-3);
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}

.quiz-result__stage-desc {
  font-weight: 600;
  color: var(--color-text);
}

.quiz-result__list {
  margin: 0 0 var(--space-3);
  padding-left: 20px;
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}

/* 数据准备度提示行：虚线框区分于主文案，内容随第 3 题选择切换 */
.quiz-result__hint {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: #fff;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.quiz-result__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
}

.quiz-result__note {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.quiz-result__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

/* 桌面端选项两列排布，缩短问卷纵向长度（移动端保持单列） */
@media (min-width: 640px) {
  .quiz-q__opts {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   7.27 部署路线选择器（P8 记忆点）：纯 CSS 标签切换，零 JS
   结构：input.deploy-tabs__state（视觉隐藏）→ nav（label）→ 三个 panel
         联动依赖兄弟选择器 :checked ~，故 input 必须是面板的前置兄弟
   -------------------------------------------------------------------------- */
.deploy-tabs {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* 视觉隐藏但仍可聚焦：display:none 会让方向键无法在三个路线间切换 */
.deploy-tabs__state {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.deploy-tabs__nav {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.deploy-tabs__label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* 选中态：radio 与 nav 同级，用 ~ 联动对应 label（按 id 写三组） */
#deployRouteCloud:checked ~ .deploy-tabs__nav [for="deployRouteCloud"],
#deployRoutePrivate:checked ~ .deploy-tabs__nav [for="deployRoutePrivate"],
#deployRouteHybrid:checked ~ .deploy-tabs__nav [for="deployRouteHybrid"] {
  background: var(--color-primary);
  color: #fff;
}

/* 键盘焦点环跟随对应标签 */
#deployRouteCloud:focus-visible ~ .deploy-tabs__nav [for="deployRouteCloud"],
#deployRoutePrivate:focus-visible ~ .deploy-tabs__nav [for="deployRoutePrivate"],
#deployRouteHybrid:focus-visible ~ .deploy-tabs__nav [for="deployRouteHybrid"] {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.deploy-tabs__panel {
  display: none;
  padding: var(--space-6) var(--space-5);
}

/* 面板显隐：与选中 radio 配对的面板才显示 */
#deployRouteCloud:checked ~ .deploy-tabs__panel--cloud,
#deployRoutePrivate:checked ~ .deploy-tabs__panel--private,
#deployRouteHybrid:checked ~ .deploy-tabs__panel--hybrid {
  display: block;
}

.deploy-tabs__lead {
  margin: 0 0 var(--space-5);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text);
}

.deploy-tabs__cols {
  display: grid;
  gap: var(--space-5);
}

.deploy-tabs__col-title {
  margin: 0 0 var(--space-2);
  font-size: 15px;
  color: var(--color-primary);
}

/* 准备清单：中性圆点（非勾叉——准备项没有"包含/排除"语义） */
.deploy-tabs__prep {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}

.deploy-tabs__prep li {
  position: relative;
  padding-left: 18px;
}

.deploy-tabs__prep li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-secondary);
}

.deploy-tabs__note {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

@media (min-width: 640px) {
  .deploy-tabs__cols {
    grid-template-columns: 1fr 1fr;
  }
}

/* --------------------------------------------------------------------------
   7.28 月度运营报告演示卡内容（P9 记忆点）
   说明：数值三重"演示"保险之一（另两重：demo-shell__badge 与 __note），
         指标数值本身不使用金色，避免与"真实数据"视觉混淆
   -------------------------------------------------------------------------- */
.report-block__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
}

/* 小节标题前的暖金短线：呼应"受控的秩序"导引线语言 */
.report-block__title::before {
  content: "";
  flex: none;
  width: 14px;
  height: 2px;
  background: var(--color-accent);
}

/* 除首个小节标题外统一拉开与上一区块的间距 */
.report-block__title:not(:first-child) {
  margin-top: var(--space-6);
}

.report-overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
}

.report-overview__item {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.report-overview__label {
  margin: 0 0 var(--space-1);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.report-overview__value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary-dark);
}

/* 行级"演示"小徽标：警示橙描边，紧跟数值，逐项免责 */
.report-overview__demo {
  padding: 0 5px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 17px;
  color: var(--color-warning);
}

.report-points {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}

@media (min-width: 640px) {
  .report-overview {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   7.29 分角色培训卡（P10 记忆点）：四类角色四张卡
   -------------------------------------------------------------------------- */
.role-grid {
  display: grid;
  gap: var(--space-4);
}

.role-card {
  height: 100%;
  padding: var(--space-5);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.role-card__icon {
  width: 28px;
  height: 28px;
  margin-bottom: var(--space-3);
  color: var(--color-secondary);
}

.role-card__title {
  margin: 0 0 var(--space-3);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
}

.role-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.role-card__list li {
  position: relative;
  padding-left: 16px;
}

/* 金色小圆点导引：与全站列表语言一致 */
.role-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* "全体员工"卡浅蓝底突出：该卡覆盖面最大、是培训的基座 */
.role-card--all {
  background: var(--color-primary-light);
  border-color: transparent;
}

@media (min-width: 640px) {
  .role-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .role-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   7.30 pillar-grid--three 修饰符：深蓝区三列变体（P8 三件套 / P10 六要素）
   写在 .pillar-grid 媒体查询之后，靠源码顺序覆盖其 4 列布局
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .pillar-grid--three {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .pillar-grid--three {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- 7.31 P7~P10 移动端适配补充（375px 档） ---- */
@media (max-width: 767.98px) {
  .quiz-card__body,
  .deploy-tabs__panel {
    padding: var(--space-5) var(--space-4);
  }

  .quiz-card__notice {
    padding: var(--space-3) var(--space-4);
  }

  /* 三个部署标签横向均分：375px 下每个约 110px，四字标签可容纳 */
  .deploy-tabs__label {
    padding: var(--space-2) var(--space-1);
    font-size: 14px;
  }

  .role-card {
    padding: var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   8 · 关于页组件（P11 about.html）
   结构：8.1 公司概况事实表 → 8.2 品牌关系区 → 8.3 业务方向卡
         → 8.4 理念区底色 → 8.5 合规实证档案卡 → 8.6 差异点清单
         → 8.7 联系面板 → 8.8 非对称两栏 → 8.9 移动端适配
   -------------------------------------------------------------------------- */

/* ---- 8.1 公司概况事实表：dl 两列网格，占位行弱化（诚实而非隐藏） ---- */
.fact-list {
  display: grid;
  gap: 0 var(--space-8);
  border-top: 1px solid var(--color-border);
  max-width: 920px;
}

.fact-list__item {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.fact-list__key {
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.fact-list__val {
  margin: 0;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text);
}

/* 占位态：灰字 + 虚线下划线，明示"待核实"而非删掉该行 */
.fact-list__val--pending {
  font-weight: 400;
  color: var(--color-text-muted);
  text-decoration: underline dashed;
  text-decoration-color: var(--color-border);
  text-underline-offset: 4px;
}

.fact-list__foot,
.brand-relay__foot,
.proof-foot {
  margin-top: var(--space-4);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

@media (min-width: 640px) {
  .fact-list {
    grid-template-columns: 1fr 1fr;
  }

  /* 中缝竖分隔线：左列（奇数项）右侧描边，与横线构成"档案表"秩序 */
  .fact-list__item:nth-child(odd) {
    padding-right: var(--space-6);
    border-right: 1px solid var(--color-border);
  }

  .fact-list__item:nth-child(even) {
    padding-left: var(--space-6);
  }
}

/* ---- 8.2 品牌关系区：双卡 + 中轴箭头，移动端箭头转竖向 ---- */
.brand-relay {
  display: grid;
  gap: var(--space-4);
  max-width: 920px;
}

.brand-relay__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-5);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* 身份小徽标：母公司蓝绿 / 本站品牌主色，一眼区分主体 */
.brand-relay__tag {
  padding: 2px 10px;
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-secondary);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-secondary);
}

.brand-relay__tag--self {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.brand-relay__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-2);
}

.brand-relay__desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

/* 中轴箭头：默认水平；移动端纵排时旋转 90° 指向下方 */
.brand-relay__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
}

.brand-relay__arrow svg {
  width: 32px;
  height: 24px;
}

/* ---- 8.3 业务方向卡：2×2 网格，服务行可点、箭头 hover 右移 ---- */
.direction-grid {
  display: grid;
  gap: var(--space-4);
}

.direction-card {
  height: 100%;
  padding: var(--space-5);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.direction-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-1);
}

.direction-card__desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.direction-card__list {
  display: grid;
}

.direction-card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 44px; /* 触控目标下限 */
  padding: var(--space-1) 0;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px dashed var(--color-border);
  transition: color 0.2s var(--ease-out);
}

.direction-card__list li:last-child .direction-card__link {
  border-bottom: 0;
}

.direction-card__link svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  transition: transform 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.direction-card__link:hover {
  color: var(--color-secondary);
}

.direction-card__link:hover svg {
  transform: translateX(3px);
  color: var(--color-secondary);
}

/* 桌面 2×2：四方向等权呈现（768px 起双列，避免单列过长） */
@media (min-width: 768px) {
  .direction-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- 8.4 理念区浅蓝底：与详情页 Hero 同色，形成首尾呼应 ---- */
.section--values {
  background: var(--color-primary-light);
}

/* 理念卡纵向堆叠节奏微调（复用首页 belief-card，不加新组件） */
.value-grid .belief-card {
  height: 100%;
}

.work-link {
  margin-top: var(--space-6);
  text-align: right;
}

/* ---- 8.5 合规实证档案卡（深蓝底记忆点）：暖金顶边 + 等宽"证件号" ---- */
/* 深蓝区引导句内的 strong 提亮为纯白，保证 4.5:1 对比度 */
.section-head--dark .section-head__desc strong {
  color: #fff;
}

.proof-grid {
  display: grid;
  gap: var(--space-4);
}

.proof-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-5);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  /* 顶边 2px 暖金：本区唯一金色强调，呼应"金色纪律" */
  border-top: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
}

.proof-card__icon {
  width: 28px;
  height: 28px;
  color: var(--color-secondary-light);
  margin-bottom: var(--space-3);
}

.proof-card__title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-3);
}

/* 备案号：等宽字体像证件号，真实文本节点可选中复制；长号允许断词防溢出 */
.proof-card__no,
.proof-card__list li {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.7;
  color: #fff;
  overflow-wrap: anywhere;
}

.proof-card__list {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.proof-card__no {
  display: block;
  margin-bottom: var(--space-3);
}

.proof-card__note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.66);
  margin-bottom: var(--space-3);
}

/* 推到底部的公示渠道链接：白字下划线，hover 转金 */
.proof-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.88);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 4px;
  transition: color 0.2s var(--ease-out);
}

.proof-card__link svg {
  width: 13px;
  height: 13px;
}

.proof-card__link:hover {
  color: var(--color-accent);
}

.proof-foot {
  color: rgba(255, 255, 255, 0.75); /* 深底上提高不透明度保对比度 */
}

@media (min-width: 768px) {
  .proof-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- 8.6 差异点清单：细线序号 + 白卡纵列 ---- */
.why-list {
  display: grid;
  gap: var(--space-3);
}

.why-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* 序号等宽字体：呼应档案卡"证件号"语言，青色细字不抢标题 */
.why-card__num {
  flex: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-secondary);
}

.why-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2px;
}

.why-card__desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

/* ---- 8.7 联系面板：浅蓝卡 + 二维码，置于浅灰两栏右侧 ---- */
.contact-panel {
  padding: var(--space-6) var(--space-5);
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
  align-self: start;
}

.contact-panel__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-4);
}

.contact-panel__list {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.contact-panel__label {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
}

.contact-panel__value {
  display: block;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.contact-panel__value--link {
  color: var(--color-primary);
  transition: color 0.2s var(--ease-out);
}

.contact-panel__value--link:hover {
  color: var(--color-secondary);
}

/* 二维码行：白底小卡内横排图与说明 */
.contact-panel__qr {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-5);
  background: #fff;
  border-radius: var(--radius-md);
}

.contact-panel__qr img {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-sm);
}

.contact-panel__qr figcaption {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text);
}

.contact-panel__qr figcaption span {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-muted);
}

.contact-panel__btn {
  width: 100%;
  text-align: center;
}

/* ---- 8.8 非对称两栏：左差异点 55% / 右联系面板 45% ---- */
.about-duo {
  display: grid;
  gap: var(--space-6);
}

.about-duo__main .section-head {
  margin-bottom: var(--space-5);
}

@media (min-width: 1024px) {
  .about-duo {
    grid-template-columns: 55fr 45fr;
    gap: var(--space-8);
  }
}

/* ---- 8.9 关于页移动端适配（375px 档） ---- */
@media (min-width: 768px) {
  /* 双卡横排：卡-箭头-卡三列，箭头列垂直居中 */
  .brand-relay {
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
  }

  .brand-relay__arrow {
    align-self: center;
  }
}

@media (max-width: 767.98px) {
  /* 纵排时箭头旋转 90°（源箭头朝右），指向下方品牌卡 */
  .brand-relay__arrow svg {
    transform: rotate(90deg);
  }

  .direction-card,
  .proof-card,
  .why-card,
  .contact-panel {
    padding: var(--space-4);
  }

  .work-link {
    text-align: left;
  }
}

/* ---- 8.6 P5·C2 业务上线前的合规资质规划：浅蓝插层的正文段与合规底注 ---- */
/* 正文段：比 method-list 说明略大的字号，承载区块头与内容点之间的叙述 */
.plan-intro {
  max-width: 720px;
  margin-bottom: var(--space-6);
  font-size: var(--text-body);
  line-height: 1.9;
  color: var(--color-text-secondary);
}

/* 合规底注：ICP/EDI/算法备案仅为举例的声明，muted 弱化但不遮挡 */
.plan-note {
  max-width: 720px;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border);
  font-size: var(--text-small);
  line-height: 1.8;
  color: var(--color-text-muted);
}