/* =========================================================
 * 协同软件官网 — 页面级样式
 * 首页及各内页的私有布局（hero / diagram / ecosystem）
 * ========================================================= */

/* ============================================================
 * HERO 区块（核心视觉）
 * ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-block: var(--space-9);
  padding-top: 120px; /* 留出 nav 空间 */
  background: var(--color-bg-gradient-hero);
  overflow: hidden;
}

/* 装饰：粒子星空背景（CSS-only） */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 1px at 12% 18%, rgba(255, 105, 20, 0.50) 0%, transparent 60%),
    radial-gradient(circle 1px at 78% 32%, rgba(88, 110, 255, 0.55) 0%, transparent 60%),
    radial-gradient(circle 1.2px at 32% 60%, rgba(248, 154, 15, 0.50) 0%, transparent 60%),
    radial-gradient(circle 1px at 88% 75%, rgba(255, 105, 20, 0.45) 0%, transparent 60%),
    radial-gradient(circle 1px at 22% 88%, rgba(88, 110, 255, 0.50) 0%, transparent 60%),
    radial-gradient(circle 1.2px at 58% 12%, rgba(248, 154, 15, 0.40) 0%, transparent 60%);
  opacity: 0.55;
  pointer-events: none;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-9);
  align-items: center;
}

.hero__title {
  font-size: clamp(var(--fs-3xl), 6vw, var(--fs-5xl));
  font-weight: var(--fw-black);
  line-height: 1.1;
  letter-spacing: var(--letter-cn-tight);
  margin-bottom: var(--space-5);
}

.hero__title-line {
  display: block;
}

/* 语义块：中文没有断行机会，窄栏会在词中间裂开（「经/验」「系/统」）。
   把词组包成 inline-block，浏览器只在块边界断行。 */
.hero__title-line > b {
  display: inline-block;
  font-weight: inherit;
  letter-spacing: inherit;
  /* 字号在窄双栏区间已按栏宽收窄，这里再兜一层：宁可整块换行，也不许词内断裂 */
  white-space: nowrap;
}

.hero__title .word {
  background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-brand-primary) 60%, var(--color-brand-secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero__subtitle {
  /* 与其余各页 hero 副文字同规格：--fs-md（18px）+ --lh-loose。
     原来用 clamp(18px, 2vw, 24px)，1440 下实际 24px，比别处大 33%，
     整段文字的重量压过了 H1，首屏观感失衡。 */
  font-size: var(--fs-md);
  color: var(--color-text-secondary);
  line-height: var(--lh-loose);
  letter-spacing: var(--letter-cn-tight);
  margin-bottom: var(--space-7);
  max-width: 34em;
}

.hero__subtitle strong {
  color: var(--color-brand-primary);
  font-weight: var(--fw-semibold);
}

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

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (max-width: 960px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  /* 单栏后左栏变宽（960 起 896px），标题字号可以放开了。
     961 的双栏是 42px、960 的单栏若直接跳到 57.6px 会断层，
     这里给一个过渡台阶。 */
  .hero__title {
    font-size: clamp(var(--fs-3xl), 5.6vw, 56px);
  }
}

/* 961–1440：hero 仍是双栏，左栏被右图挤到 440–660px。
   60px 字号下 10 个汉字要 600px，窄栏必然在词中间断（「经/验」「系/统」）。
   按栏宽收字号：1024 → 45px（10 字 450px < 栏宽 469px）刚好放下；
   1440 → 60px 与全局一致，两端都不断层。 */
@media (min-width: 961px) and (max-width: 1440px) {
  .hero__title {
    font-size: clamp(var(--fs-3xl), 4.4vw, 60px);
  }
}

/* 961–1100：副文字在窄左栏里折成 5 行，左栏高 566 而右图只有 463，
   轨道图整体「沉」到下方、视觉重心偏左。
   图宽被栅格列宽限死（不是 max-width），所以要把空间从别处挪：
   ① gap 64 → 40（还 24px 给图）② 右列权重 1fr → 1.12fr（还约 18px）
   合计右图从 463 → 约 505，与左栏 566 基本齐平。 */
@media (min-width: 961px) and (max-width: 1100px) {
  .hero__grid {
    grid-template-columns: 1.1fr 1.12fr;
    gap: var(--space-7) var(--space-5);
  }
  .hero-visual__node {
    width: 58px;
    height: 58px;
    font-size: 11px;
  }
  .hero-visual__core-label {
    font-size: 18px;
  }
}

/* ===== Hero 右侧：价值环（刻度环 + 流转弧 + 8 等分节点 + 白核暖光） =====
   几何约定：容器为正方形；节点在 R=41% 的圆周上按 45° 八等分，
   left/top 的百分比相对容器边长 → 560 与 300 两档同构，换档只改 R 与直径。 */
.hero-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 560px;
  margin-inline: auto;
}

/* 环与连线：铺满容器。viewBox 400 与容器等比，故 41% ≈ r164 */
.hero-visual__rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 场域环：最外一圈极淡的边界，给圆盘一个“场”的收口，避免节点悬空 */
.hero-visual__field {
  fill: none;
  stroke: rgba(255, 105, 20, 0.07);
  stroke-width: 1.2;
}

/* 主环：完整细圆环。8 个白色节点压在环上，环从每颗两侧穿出 = 闭环链条，
   比原来那圈旋转虚线干净得多（虚线还在转，是“廉价加载动画”的观感来源） */
.hero-visual__ring {
  fill: none;
  stroke: rgba(255, 105, 20, 0.14);
  stroke-width: 1.2;
}

/* 流转弧：约 66° 的渐变弧沿圆周匀速绕行 —— 数据在环上流动、价值持续累积 */
/* 柔光层：同一段弧的模糊副本，让流转有“发光丝带”的质感而不是进度条 */
.hero-visual__arc-glow {
  fill: none;
  stroke: url(#heroArcGrad);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 190 840.442;
  opacity: 0.4;
  filter: blur(4px);
  animation: heroArc 26s linear infinite;
}

.hero-visual__arc {
  fill: none;
  stroke: url(#heroArcGrad);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 190 840.442;
  animation: heroArc 26s linear infinite;
}

@keyframes heroArc {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -1030.442; }
}

/* 内核到各节点的连线：极淡，只把“汇聚”这件事说出来，不抢节点 */
.hero-visual__spokes line {
  stroke: rgba(255, 105, 20, 0.11);
  stroke-width: 0.85;
}

/* 价值核：白底 + 暖光外溢。原来的橙紫双 radial 混成一块脏紫，
   在 #FAFAFA 底上既不通透也不高级，改为“白核 + 暖光”。 */
.hero-visual__core {
  position: absolute;
  inset: 37%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 24%, #FFFFFF 0%, #FFFFFF 58%, #FFF9F4 100%);
  box-shadow:
    0 0 0 1px rgba(255, 105, 20, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -10px 24px rgba(255, 105, 20, 0.05),
    0 22px 52px -26px rgba(255, 105, 20, 0.42),
    0 8px 22px -14px rgba(27, 74, 158, 0.18);
}

/* 内核外的一圈 hairline 光环：把“核”从“白色气球”里救出来 */
.hero-visual__core::after {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 105, 20, 0.13);
  pointer-events: none;
}

/* 外溢暖光。::before 置 -1：.hero__grid 已建立层叠上下文，
   故它落在卡片之下、hero 背景之上，不会盖住中心文字。 */
.hero-visual__core::before {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 105, 20, 0.11) 0%,
    rgba(255, 105, 20, 0.05) 46%,
    rgba(255, 105, 20, 0) 70%);
  animation: coreGlow 7.5s var(--ease-in-out) infinite;
}

@keyframes coreGlow {
  0%, 100% { opacity: 0.6; transform: scale(0.97); }
  50%      { opacity: 1;   transform: scale(1.03); }
}

.hero-visual__core-label {
  position: relative;
  font-size: 21px;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, #E9590A 0%, #FF6914 42%, #F89A0F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 节点：圆形 + 玻璃感白底 + 蓝色系柔影。
   原来的方角 + rgba(0,0,0,.4) 投影在白底上是一块灰斑，是“不好看”的主因之一。 */
.hero-visual__node {
  position: absolute;
  width: 62px;
  height: 62px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid rgba(255, 105, 20, 0.16);
  box-shadow:
    0 1px 2px rgba(27, 74, 158, 0.04),
    0 6px 16px -8px rgba(27, 74, 158, 0.20);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  line-height: 1.32;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--color-text-primary);
  animation: nodePulse 8s var(--ease-in-out) infinite;
  animation-delay: calc(var(--i) * 1s);
}

@keyframes nodePulse {
  0%, 100% {
    border-color: rgba(255, 105, 20, 0.16);
    box-shadow:
      0 1px 2px rgba(27, 74, 158, 0.04),
      0 6px 16px -8px rgba(27, 74, 158, 0.20);
  }
  20% {
    border-color: rgba(255, 105, 20, 0.58);
    box-shadow:
      0 0 0 5px rgba(255, 105, 20, 0.045),
      0 10px 22px -9px rgba(255, 105, 20, 0.34);
  }
}

/* 八等分位置（R=41%）：0°→业务理解，顺时针读到 315°→持续进化 */
.hero-visual__node--1 { --i: 0; left: 50%;   top: 9%; }
.hero-visual__node--2 { --i: 1; left: 79%;   top: 21%; }
.hero-visual__node--3 { --i: 2; left: 91%;   top: 50%; }
.hero-visual__node--4 { --i: 3; left: 79%;   top: 79%; }
.hero-visual__node--5 { --i: 4; left: 50%;   top: 91%; }
.hero-visual__node--6 { --i: 5; left: 21%;   top: 79%; }
.hero-visual__node--7 { --i: 6; left: 9%;    top: 50%; }
.hero-visual__node--8 { --i: 7; left: 21%;   top: 21%; }

/* 动效降级：系统开了“减少动态效果”就全部静止 */
@media (prefers-reduced-motion: reduce) {
  .hero-visual__arc,
  .hero-visual__arc-glow,
  .hero-visual__node,
  .hero-visual__core::before { animation: none; }
}

/* ≤480：容器收到 300px，节点 56px；R 由 41% 收到 38%，左右不顶边 */
@media (max-width: 480px) {
  .hero-visual__node {
    width: 54px;
    height: 54px;
    font-size: 11px;
    line-height: 1.26;
  }
  .hero-visual__node--1 { left: 50%;    top: 12%; }
  .hero-visual__node--2 { left: 76.9%;  top: 23.1%; }
  .hero-visual__node--3 { left: 88%;    top: 50%; }
  .hero-visual__node--4 { left: 76.9%;  top: 76.9%; }
  .hero-visual__node--5 { left: 50%;    top: 88%; }
  .hero-visual__node--6 { left: 23.1%;  top: 76.9%; }
  .hero-visual__node--7 { left: 12%;    top: 50%; }
  .hero-visual__node--8 { left: 23.1%;  top: 23.1%; }
  .hero-visual__core-label { font-size: 16px; }
}

/* ============================================================
 * Logos / 客户信任区
 * ============================================================ */
.trust {
  padding-block: var(--space-7);
  border-block: 1px solid var(--color-border);
  background: rgba(26, 31, 46, 0.50);
}

.trust__label {
  text-align: center;
  font-size: var(--fs-sm);
  letter-spacing: var(--letter-cn-loose);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-5);
  text-transform: uppercase;
}

.trust__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-5);
  align-items: center;
  justify-items: center;
}

.trust__item {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-text-tertiary);
  letter-spacing: 0.05em;
  opacity: 0.85;
  transition: opacity var(--duration-base) var(--ease-out);
}

.trust__item:hover {
  opacity: 1;
  color: var(--color-brand-primary);
}

/* ============================================================
 * Feature Grid — 双栏特性
 * ============================================================ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}

/* ============================================================
 * 1+5+N 架构图
 * ============================================================ */
.architecture {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  margin-top: var(--space-7);
}

.architecture__layer {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
  box-shadow: var(--shadow-sm);
}

.architecture__layer--core {
  border-color: var(--color-border-brand-strong);
  background: linear-gradient(135deg, var(--color-brand-primary-soft) 0%, var(--color-bg-card) 100%);
}

.architecture__layer-label {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-brand-primary-soft);
  color: var(--color-brand-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
  letter-spacing: var(--letter-cn-loose);
}

.architecture__layer-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.architecture__layer-desc {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}

.architecture__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}

.architecture__card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  transition: all var(--duration-base) var(--ease-out);
}

.architecture__card:hover {
  border-color: var(--color-border-brand);
  transform: translateY(-2px);
}

.architecture__card-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: rgba(88, 110, 255, 0.12);
  color: var(--color-tech-purple);
  font-size: 18px;
  margin-bottom: var(--space-3);
}

.architecture__card-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-1);
  color: var(--color-text-primary);
}

.architecture__card-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-brand-primary);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
}

.architecture__card-desc {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-base);
}

@media (min-width: 768px) {
  .architecture__layer--core {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-6);
    align-items: center;
  }
  .architecture__layer--core > .architecture__layer-meta {
    text-align: left;
  }
}

/* ============================================================
 * 对比表（协同本体 vs 通用方案）
 * ============================================================ */
.comparison {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-card);
  box-shadow: var(--shadow-sm);
}

.comparison__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  padding: var(--space-4) var(--space-5);
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
  align-items: center;
  background: var(--color-bg-card);
}

.comparison__row:last-child { border-bottom: none; }

.comparison__row--head {
  background: var(--color-brand-primary-soft);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: var(--letter-cn-loose);
  color: var(--color-brand-primary);
  text-transform: uppercase;
}

.comparison__row .col-feature {
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.comparison__row .col-yes {
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.comparison__row .col-no {
  color: var(--color-text-tertiary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.comparison__row .col-yes::before {
  content: '✓';
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-data-green-soft);
  color: var(--color-data-green);
  font-size: 12px;
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.comparison__row .col-no::before {
  content: '○';
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-bg-muted);
  color: var(--color-text-tertiary);
  font-size: 14px;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .comparison__row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .comparison__row--head {
    display: none;
  }
}

/* ============================================================
 * 案例展示
 * ============================================================ */
.case-studies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-5);
}

.case {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--duration-base) var(--ease-out);
}

.case:hover {
  border-color: var(--color-border-brand);
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
}

.case__cover {
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, rgba(255, 105, 20, 0.20), rgba(88, 110, 255, 0.20)),
    var(--color-bg-card);
  position: relative;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  color: var(--color-brand-primary);
  letter-spacing: 0.1em;
}

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

.case__industry {
  font-size: var(--fs-xs);
  letter-spacing: var(--letter-cn-loose);
  color: var(--color-brand-primary);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.case__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
  line-height: var(--lh-snug);
}

.case__desc {
  font-size: var(--fs-base);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-4);
}

.case__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.case__metric {
  flex: 1 1 auto;
}

.case__metric-num {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 4px;
}

.case__metric-label {
  font-size: var(--fs-xs);
  color: var(--color-text-tertiary);
  letter-spacing: var(--letter-cn-tight);
}

/* ============================================================
 * 流程 / 时间线
 * ============================================================ */
.timeline {
  position: relative;
  margin-top: var(--space-7);
}

.timeline__line {
  position: absolute;
  left: 30px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--color-brand-primary) 0%, var(--color-brand-primary), rgba(255, 105, 20, 0.20) 100%);
}

.timeline__item {
  position: relative;
  padding-left: 80px;
  padding-bottom: var(--space-7);
}

.timeline__item:last-child { padding-bottom: 0; }

.timeline__dot {
  position: absolute;
  left: 22px;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-bg-soft);
  border: 2px solid var(--color-brand-primary);
  box-shadow: 0 0 0 4px rgba(255, 105, 20, 0.12);
}

.timeline__phase {
  font-size: var(--fs-sm);
  color: var(--color-brand-primary);
  font-weight: var(--fw-bold);
  letter-spacing: var(--letter-cn-loose);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.timeline__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-2);
}

.timeline__desc {
  color: var(--color-text-secondary);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

/* ============================================================
 * FAQ
 * ============================================================ */
.faq-list {
  border-top: 1px solid var(--color-border);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-5);
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  cursor: pointer;
  text-align: left;
  letter-spacing: var(--letter-cn-tight);
}

.faq-item__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);
  color: var(--color-brand-primary);
  transition: transform var(--duration-base) var(--ease-out);
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(45deg);
  border-color: var(--color-border-brand);
  background: rgba(255, 105, 20, 0.10);
}

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-base) var(--ease-out);
}

.faq-item.is-open .faq-item__answer {
  max-height: 800px;
}

.faq-item__answer-inner {
  padding-top: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  max-width: 65em;
}

/* ============================================================
 * CTA Banner
 * ============================================================ */
.cta-banner {
  position: relative;
  padding: var(--space-9) var(--space-7);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse at top right, rgba(255, 105, 20, 0.20), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(88, 110, 255, 0.20), transparent 60%),
    var(--color-bg-card);
  border: 1px solid var(--color-border-brand);
  overflow: hidden;
  text-align: center;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 105, 20, 0.10), transparent 70%);
  pointer-events: none;
}

.cta-banner__title {
  position: relative;
  font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl));
  font-weight: var(--fw-black);
  letter-spacing: var(--letter-cn);
  margin-bottom: var(--space-4);
  background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-brand-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cta-banner__desc {
  position: relative;
  font-size: var(--fs-md);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  max-width: 42em;
  margin-inline: auto;
}

/* ============================================================
 * Reveal 入场动画
 * ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out),
              transform 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}

[data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0ms;   opacity: 1; transform: translateY(0); }
[data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: 80ms;  opacity: 1; transform: translateY(0); }
[data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: translateY(0); }
[data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: translateY(0); }
[data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: translateY(0); }
[data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }

/* ============================================================
 * Footer —— 全站统一，源文件 assets/modules/footer.html
 * 由 _tools_nav/build_footer.py 静态写入每个页面（不走 JS，保内链可抓取）
 *
 * ⚠️ 深底配色必须用浅字：tokens 里 --color-text-secondary = #4A5266，
 *    直接用在 #1A1F2E 上对比度只有 1.9:1（几乎看不见）。
 *    所以本区块内所有文字色都显式写 rgba(255,255,255,.xx)。
 * ============================================================ */
.footer {
  background: var(--color-bg-inverse);
  padding-block: var(--space-9) var(--space-6);
  border-top: 1px solid var(--color-border);
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- 主体五列 ---------- */
.footer__grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: var(--space-6) var(--space-5);
  margin-bottom: var(--space-8);
}

.footer__brand-block { min-width: 0; }

/* 品牌行：反白 logo + 书法体理念图，同高 30px 并排 */
.footer__brand-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
/* 书法图是彩色的，深底上本身会「发光」，压到 0.92 避免抢走 logo 的视觉主位 */
.footer__motto {
  display: block;
  width: auto;
  height: 30px;
  opacity: 0.92;
}
.footer__logo-link {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
}
.footer__logo {
  display: block;
  width: auto;
  height: 30px;
}
.footer__brand-desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.58);
  margin: var(--space-4) 0 var(--space-4);
  max-width: 26em;
}

/* ---------- 关注渠道：企业微信 / 微信公众号 / 视频号 ---------- */
/* 🔴 与上方五列**共用同一条栅格**：说明占品牌列（2fr），三组码分别落在第 2、3、4 列，
   即「产品与服务 / 场景中心 / 资源与训练」三列的左边界。
   上一版是 flex（说明 268 + 三列各 321），码距 353、上方列距 231，两层节奏对不上；
   第二张码还恰好落在「场景中心」列线左侧 7px —— 差一点对齐最刺眼。 */
.footer__follow {
  display: grid;
  grid-template-columns: 2fr repeat(4, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  align-items: start;
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: var(--space-8);
}
.footer__follow-intro {
  grid-column: 1;
  min-width: 0;
}
.footer__follow-d {
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.48);
  margin: 0;
}
.footer__follow-list {
  /* 从第 2 列起、一直铺到容器右边界：三组码正好填满四个链接列下方，
     不会出现「最后一列下面空一块」。左边缘与「产品与服务」列对齐 */
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__follow-item {
  /* 码在上、文字在下，统一左对齐：与上方四列导航共用同一条左侧基线 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  text-align: left;
  min-width: 0;
}
.footer__qr-link {
  display: block;
  flex-shrink: 0;
  line-height: 0;
  border-radius: var(--radius-sm);
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
.footer__qr-link:hover { box-shadow: 0 0 0 3px rgba(255, 105, 20, 0.55); }
.footer__qr-link:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 3px;
}
.footer__qr {
  display: block;
  /* 148px：三张图统一为 37 模块 + 7.4% 静区 → 码区约 126px，单模块 ≈3.4px。
     实测缩到 110px（模块 2.5px）仍可解码，148 留足余量。
     图片已含静区，此处不再加 padding，避免二次收窄码区。 */
  width: 148px;
  height: 148px;
  border-radius: var(--radius-sm);
  background: #fff;
}
.footer__qr-body { min-width: 0; }
.footer__qr-t {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 4px;
}
.footer__qr-d {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.48);
  /* 三组说明长短不一，留两行高度把三列底边拉平 */
  min-height: 3.2em;
  margin: 0;
}

/* ---------- 链接列 ---------- */
.footer__col { min-width: 0; }
.footer__title {
  position: relative;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--letter-cn-loose);
  color: var(--color-brand-primary);
  margin: 0 0 var(--space-4);
  padding-top: var(--space-3);
}
.footer__title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-primary);
  opacity: 0.6;
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__links a {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: rgba(255, 255, 255, 0.66);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.footer__links a:hover { color: var(--color-brand-primary); }

/* ---------- 联系信息（收进品牌块，不再单列通栏） ---------- */
.footer__info {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.footer__info-item {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  min-width: 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
}
.footer__info-k {
  flex-shrink: 0;
  letter-spacing: 0.06em;
  /* 0.36 在 #1A1F2E 上只有 3.27:1，12px 深底小字读不清；0.48 = 4.75:1 */
  color: rgba(255, 255, 255, 0.48);
}
.footer__info-v {
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
}
a.footer__info-v:hover { color: var(--color-brand-primary); }
/* 中文没有断行机会，窄屏会在词中间裂开（如「西塔 5 / 楼」）→ 用语义块锁住断点 */
.footer__seg {
  display: inline-block;
  font-weight: inherit;
}

/* ---------- 底栏：版权 + 合规 + 站点链接，合并为同一行 ---------- */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
/* 左半：版权与合规信息，用轻量间隔点串起来 */
.footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  margin: 0;
  min-width: 0;
  font-size: var(--fs-xs);
  line-height: 1.6;
  /* 0.42 = 3.99:1，同样偏低；0.48 = 4.75:1 */
  color: rgba(255, 255, 255, 0.48);
}
.footer__sep {
  color: rgba(255, 255, 255, 0.22);
  user-select: none;
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-xs);
}
.footer__legal a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.footer__legal a:hover { color: var(--color-brand-primary); }

/* ---------- 备案与营业执照（内容并入 .footer__meta，此处只管元素自身） ---------- */
.footer__lic {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: rgba(255, 255, 255, 0.58);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}
.footer__lic:hover { color: var(--color-brand-primary); }
.footer__lic:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 3px;
  border-radius: 2px;
}
.footer__filing-link {
  color: rgba(255, 255, 255, 0.58);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.footer__filing-link:hover { color: var(--color-brand-primary); }
.footer__filing-text { color: rgba(255, 255, 255, 0.52); }
.footer__filing-link--police {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.footer__police {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  /* 12px 正文的行盒里，16px 图标视觉上才和文字齐平 */
  margin-top: -2px;
}

/* ---------- 营业执照弹窗 ---------- */
.footer__modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1100;
  padding: 5vh 5vw;
  background: rgba(10, 14, 24, 0.84);
  align-items: center;
  justify-content: center;
}
.footer__modal.is-open { display: flex; }
.footer__modal-img {
  max-width: min(860px, 92vw);
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  background: #fff;
}
.footer__modal-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.footer__modal-close:hover { background: rgba(255, 255, 255, 0.28); }


/* ---------- 响应式 ---------- */
/* 关注渠道：桌面与上方五列同栅格（说明在品牌列，三组码落在第 2–4 列）；
   1100 以下上方已无列线可对 → 说明独占一行、三组码三等分；
   600 以下一列横排，码缩到 112px（码区 102px / 37 模块 ≈ 2.76px，实测可解码）。 */
@media (max-width: 1100px) {
  .footer__follow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .footer__follow-intro { grid-column: 1 / -1; }
  .footer__follow-list {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .footer__follow { grid-template-columns: 1fr; }
  .footer__follow-list {
    grid-column: 1;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .footer__follow-item {
    flex-direction: row;
    align-items: center;
  }
  .footer__qr { width: 112px; height: 112px; }
}
@media (max-width: 1100px) {
  /* 品牌块整行，四个链接列仍在同一行 —— 避免 4 列挤成 3+1 把页脚拉高一倍 */
  .footer__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-7) var(--space-5);
  }
  .footer__brand-block {
    grid-column: 1 / -1;
  }
  .footer__contact {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}
@media (max-width: 768px) {
  .footer {
    padding-block: var(--space-8) var(--space-5);
  }
  /* 窄屏底栏必然折行，分隔点会落在行尾（「营业执照 ·」）→ 直接去掉，改用间距区分 */
  .footer__sep { display: none; }
  .footer__meta { gap: 4px 14px; }
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer__brand-block {
    grid-column: 1 / -1;
  }
}
@media (max-width: 480px) {
  /* 480 以下仍保持两列：四个链接组排成 2×2，比一路堆到 1400px 高好看 */
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-4);
  }
  .footer__brand-block {
    grid-column: 1 / -1;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .footer__legal {
    gap: var(--space-4);
  }
}
/* 底部悬浮联系条（≤1200 生效，见 components.css .dock）会压住页脚末行 → 留出等高空白 */
@media (max-width: 1200px) {
  .footer {
    padding-bottom: calc(var(--space-6) + 78px);
  }
}

/* ============================================================
 * 相关专题文章 · 统一板块（视觉基准：智税AI 产品页 zsai-articles-grid）
 * 全站「场景中心 / 产品与服务 / 训练营」各页面共用
 * ============================================================ */
.tsai-articles__h {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
}
.tsai-articles__h .tsai-articles__accent {
  color: var(--color-brand-primary);
}
.tsai-articles__sub {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 1200px;
}
.tsai-articles__count {
  margin-left: 12px;
  font-size: 13px;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}
/* 0 篇占位态：篇数不显示（状态由占位卡说明），节点保留供发布台替换 */
.tsai-articles__count[data-count="0"]:empty {
  display: none;
}
.tsai-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.tsai-article-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-decoration: none;
  color: inherit;
  transition: all .3s;
  display: block;
}
.tsai-article-card:hover {
  border-color: var(--color-brand-primary);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.tsai-article-card__tag {
  display: inline-block;
  font-size: 11px;
  padding: 4px 10px;
  background: rgba(255, 105, 20, 0.10);
  color: var(--color-brand-primary);
  border: 1px solid rgba(255, 105, 20, 0.25);
  border-radius: 8px;
  margin-bottom: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.tsai-article-card h3 {
  font-size: 16px;
  color: var(--color-text-primary);
  margin-bottom: 10px;
  line-height: 1.5;
}
.tsai-article-card > p {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 12px;
}
.tsai-article-card__meta {
  font-size: 11px;
  color: var(--color-text-tertiary);
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}
.tsai-articles-more {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
.tsai-articles-more[hidden] { display: none; }
.tsai-articles-more .btn {
  min-width: 220px;
}
/* 0 篇占位卡：清单未给文章的页面先占位，后续补文章后由回填脚本自动替换 */
.tsai-article-card--ph {
  grid-column: 1 / -1;
  border-style: dashed;
  background: transparent;
  box-shadow: none;
  cursor: default;
  text-align: center;
  padding: 32px 24px;
}
.tsai-article-card--ph:hover {
  border-color: var(--color-border);
  transform: none;
  box-shadow: none;
}
.tsai-article-card--ph h3,
.tsai-article-card--ph > p {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.tsai-article-card--ph h3 {
  color: var(--color-text-secondary);
}
.tsai-article-card--ph .tsai-article-card__tag {
  background: rgba(255, 105, 20, 0.06);
  border-color: rgba(255, 105, 20, 0.18);
  color: var(--color-text-tertiary);
}
.tsai-article-card--ph > p {
  margin-bottom: 0;
}
@media (max-width: 1024px) {
  .tsai-articles-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   hero · 场景概念图（训练营三页 + 土地增值税清算场景页共用，2026-10-30）
   用法：<svg class="trn-concept" viewBox="0 0 460 460">
   设计参考：中心圆 + 8 个节点环绕 + 淡色轨道 + 右下金色弧
   =================================================================== */
.trn-concept {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}
@media (max-width: 1024px) {
  .trn-concept { max-width: 380px; }
}

/* ============================================================
 * 实务案例正文排版（.art-prose）
 * 双类名 .art-prose.art-prose 提高特异性，覆盖页面内联的
 * .detail-content__body 规则（内联 <style> 后加载，同权重会赢）
 * ============================================================ */
.art-prose.art-prose {
  font-size: 16px;
  line-height: 1.95;
  color: #33363D;
  letter-spacing: 0.01em;
}

/* 导语：首段 */
.art-prose.art-prose .art-lead {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--color-text-primary);
  background: rgba(255, 105, 20, 0.05);
  border-left: 3px solid var(--color-brand-primary);
  border-radius: 0 6px 6px 0;
  padding: 16px 18px;
  margin: 0 0 28px;
}
.art-prose.art-prose .art-lead strong {
  font-weight: 700;
  color: var(--color-text-primary);
}

/* 小标题：橙色竖线 */
.art-prose.art-prose h3 {
  position: relative;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--color-text-primary);
  margin: 40px 0 16px;
  padding: 2px 0 2px 14px;
  border-left: 4px solid var(--color-brand-primary);
  background: linear-gradient(90deg, rgba(255, 105, 20, 0.07), rgba(255, 105, 20, 0) 62%);
  border-radius: 0 4px 4px 0;
}

/* 章节标题 h2（digital-scene / data-asset 的文章用 h2 作章节标题） */
.art-prose.art-prose h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-primary);
  margin: 44px 0 18px;
  padding: 2px 0 2px 14px;
  border-left: 4px solid var(--color-brand-primary);
  background: linear-gradient(90deg, rgba(255, 105, 20, 0.07), rgba(255, 105, 20, 0) 62%);
  border-radius: 0 4px 4px 0;
}
.art-prose.art-prose h2:first-child { margin-top: 0; }

/* 文章副标题（首段引言） */
.art-prose.art-prose .subtitle {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--color-text-secondary);
  margin: 0 0 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}

/* 段落 */
.art-prose.art-prose p {
  margin: 0 0 18px;
  line-height: 1.95;
  text-align: justify;
}
.art-prose.art-prose p:last-child { margin-bottom: 0; }

/* 强调 */
.art-prose.art-prose strong {
  color: var(--color-text-primary);
  font-weight: 700;
}
/* 政策原文类的斜体引用 */
.art-prose.art-prose em {
  font-style: normal;
  color: #5B6270;
  background: rgba(200, 168, 91, 0.10);
  border-radius: 3px;
  padding: 1px 4px;
}

/* 分隔线 */
.art-prose.art-prose hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 34px 0;
}

/* 列表 */
.art-prose.art-prose ul,
.art-prose.art-prose ol {
  margin: 0 0 18px;
  padding-left: 24px;
}
.art-prose.art-prose li {
  margin-bottom: 8px;
  line-height: 1.9;
}

/* 表格：外框滚动 + 不压缩列 */
.art-prose .art-tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 26px 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
.art-prose .art-tbl-wrap table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  border: 0;
  margin: 0;
  font-size: 14px;
  background: transparent;
}
.art-prose .art-tbl-wrap thead th,
.art-prose .art-tbl-wrap th {
  background: rgba(255, 105, 20, 0.07);
  color: var(--color-text-primary);
  font-weight: 600;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  text-align: center;
}
.art-prose .art-tbl-wrap td {
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  color: #3D4149;
  white-space: nowrap;
}
.art-prose .art-tbl-wrap tbody tr:last-child td { border-bottom: 0; }
.art-prose .art-tbl-wrap tbody tr:nth-child(even) td { background: rgba(0, 0, 0, 0.015); }
/* 首列（行标题）不换行、稍宽 */
.art-prose .art-tbl-wrap td:first-child,
.art-prose .art-tbl-wrap th:first-child {
  min-width: 86px;
  font-weight: 600;
  color: var(--color-text-primary);
  background: rgba(0, 0, 0, 0.012);
  white-space: nowrap;
}

/* ── 正文内的信息块（card / quote / fw / badge）
   覆盖 components.css 的站点组件样式：那些是给卡片网格用的，
   有 height:100% 和 hover 上浮，放进正文会显得过重 */
.art-prose.art-prose .card {
  padding: 18px 20px;
  margin: 14px 0;
  height: auto;
  overflow: visible;
  background: rgba(255, 105, 20, 0.035);
  border: 1px solid rgba(255, 105, 20, 0.14);
  border-radius: 8px;
  transition: none;
}
.art-prose.art-prose .card:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(255, 105, 20, 0.14);
}
.art-prose.art-prose .card::before { display: none; }
.art-prose.art-prose .card .t {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 8px;
  line-height: 1.6;
}
.art-prose.art-prose .card .d {
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-text-secondary);
}
.art-prose.art-prose .card .d strong { color: var(--color-text-primary); }

.art-prose.art-prose .quote {
  padding: 16px 18px;
  margin: 24px 0;
  background: rgba(255, 105, 20, 0.05);
  border-left: 3px solid var(--color-brand-primary);
  border-radius: 0 6px 6px 0;
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text-primary);
}

.art-prose.art-prose .fw {
  margin: 22px 0;
  padding: 18px 20px;
  background: rgba(255, 105, 20, 0.06);
  border: 1px solid rgba(255, 105, 20, 0.16);
  border-radius: 8px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.95;
  color: var(--color-text-primary);
}

.art-prose.art-prose h2 .badge {
  display: inline-block;
  min-width: 28px;
  margin-right: 10px;
  padding: 1px 8px;
  background: var(--color-brand-primary);
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  vertical-align: 2px;
}

/* 配图 */
.art-prose.art-prose figure {
  margin: 26px 0;
  text-align: center;
}
.art-prose.art-prose figure img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  display: block;
  margin: 0 auto;
}
.art-prose.art-prose figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--color-text-tertiary);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .art-prose.art-prose { font-size: 15.5px; }
  .art-prose.art-prose h3 { font-size: 17px; margin: 32px 0 14px; }
  .art-prose.art-prose .art-lead { font-size: 15.5px; padding: 14px 15px; }
  .art-prose .art-tbl-wrap table { font-size: 13px; }
}

/* ============================================================
 * 文章正文宽图（.art-fig-wide）
 * 用于思维导图 / 流程图这类需要看清细节的图：
 * 宽屏下突破正文栏宽，窄屏保持容器内自适应
 * ============================================================ */
.detail-content__body .art-fig-wide {
  margin: 28px 0;
}
.detail-content__body .art-fig-wide a {
  display: block;
  cursor: zoom-in;
  text-decoration: none;
}
.detail-content__body .art-fig-wide a img {
  margin: 0 auto;
}

@media (min-width: 1100px) {
  .detail-content__body .art-fig-wide {
    width: min(1080px, calc(100vw - 300px));
    margin-left: 50%;
    transform: translateX(-50%);
  }
}