/* ================================================================
   马户科技官网 · 视觉升级 v20（2026-09-29）
   ---------------------------------------------------------------
   升级前实测问题（vision 目检 + 样式表审计）：
   1) 配色双轨打架 —— 蓝紫 rgb(43,108,176) 与 金色 rgb(183,121,31)
      两套强调色混用，accent-gold / accent-primary 互相串味，
      区块标题、卡片描边、时间线圆点各自挑色，整体不成体系。
   2) .skew-divider 每个区块之间夹一条 80px 灰带，全页 8 条，
      把阅读节奏切成"三明治"，视觉上像内容缺失而不是转场。
   3) 卡片过于扁平（白底 + 1px 边 + 轻阴影），撑不起科技感。
   4) 首页正文 12000px，区块高度参差（611~1312px），节奏不均。

   本文件不改动 .html 结构、不改动文案内容，只做：
     · 统一色彩令牌到 品牌紫青（与新 logo 一致）
     · 拆掉灰带分隔，改为发光分界线 + 区块交替深浅
     · 卡片升级为玻璃拟态 + 发光描边 + 悬浮光晕
     · 补科技感动效（扫描线、辉光、呼吸边框、粒子网格）
   ================================================================ */

:root {
  /* —— 品牌主色：紫 → 青（对齐 mahu-m.svg 渐变） —— */
  --mahu-violet: #a855f7;
  --mahu-purple: #7c3aed;
  --mahu-blue:   #38bdf8;
  --mahu-cyan:   #22d3ee;
  --mahu-teal:   #14b8a6;

  --mahu-grad:      linear-gradient(135deg, #a855f7 0%, #7c3aed 40%, #38bdf8 100%);
  --mahu-grad-soft: linear-gradient(135deg, rgba(168,85,247,.12) 0%, rgba(56,189,248,.12) 100%);
  --mahu-grad-line: linear-gradient(90deg, transparent, rgba(168,85,247,.5), rgba(56,189,248,.5), transparent);

  --mahu-glow-v: 0 0 0 1px rgba(168,85,247,.28), 0 12px 40px -12px rgba(124,58,237,.45);
  --mahu-glow-c: 0 0 0 1px rgba(56,189,248,.26), 0 12px 40px -12px rgba(14,165,233,.42);

  /* —— 覆盖旧的金/蓝双轨，全站收敂到紫青 —— */
  --accent-primary:   #7c3aed;
  --accent-gold:      #22d3ee;   /* 原金色位，改为青色以统一色系 */
  --accent-cyan:      #38bdf8;
  --accent-green:     #14b8a6;
  --accent-primary-glow: rgba(124,58,237,.20);
  --accent-gold-glow:    rgba(34,211,238,.20);
  --gradient-brand:   var(--mahu-grad);
  --gradient-hero:    var(--mahu-grad);
  --gradient-gold:    linear-gradient(135deg, #22d3ee, #38bdf8);
  --text-primary:     #0d0a1f;
  --text-secondary:   #4b5163;
  --text-muted:       #868ea3;
  --bg-void:          #ffffff;
  --bg-deep:          #f6f5fd;
  --bg-surface:       #efedf9;
}

/* ============================================================
   1. 底纹层：全站统一科技网格 + 呼吸光晕
   ============================================================ */
.page-bg {
  background:
    radial-gradient(ellipse 70% 50% at 12% 0%,  rgba(168,85,247,.10) 0%, transparent 58%),
    radial-gradient(ellipse 60% 45% at 88% 18%, rgba(56,189,248,.09) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(20,184,166,.06) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fbfaff 40%, #f6f5fd 100%) !important;
}
.page-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(124,58,237,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 72%);
  pointer-events: none;
}

/* ============================================================
   2. 干掉灰带分隔 —— 改为发光细线 + 深浅交替
   ============================================================ */
.skew-divider { height: 1px !important; background: transparent !important; overflow: visible !important; }
.skew-divider::before {
  content: ''; position: absolute; inset: 0; height: 1px;
  background: var(--mahu-grad-line);
  opacity: .5;
  clip-path: none !important;
  animation: mahu-line-sweep 7s ease-in-out infinite;
}
@keyframes mahu-line-sweep {
  0%, 100% { opacity: .28; transform: scaleX(.55); }
  50%      { opacity: .85; transform: scaleX(1); }
}
.skew-divider.hero-fade { height: 96px !important; background: transparent !important; }
.skew-divider.hero-fade::before {
  height: 100% !important;
  background: linear-gradient(180deg, rgba(10,14,39,0) 0%, #f6f5fd 88%) !important;
  clip-path: none !important;
  animation: none;
}

/* ============================================================
   3. 区块节奏 —— 统一高度、交替底色、加呼吸感
   ============================================================ */
.home-section { position: relative; padding: 104px 80px 104px; }
.home-section-alt { background: linear-gradient(180deg, #f6f5fd 0%, #efedf9 100%); }
.home-section-gold { background: linear-gradient(180deg, #efedf9 0%, #f6f5fd 100%); }

/* 区块顶部细辉光，替代原来的空白 */
.home-section::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(880px, 72%); height: 1px;
  background: var(--mahu-grad-line); opacity: .45;
}

/* ============================================================
   4. 卡片：玻璃拟态 + 发光描边 + 悬浮光晕
   ============================================================ */
.service-card, .metric-block, .comp-card, .scenario-card,
.industry-card, .why-visual-inner, .process-card, .faq-item {
  position: relative;
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(124,58,237,.14) !important;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(13,10,31,.04), 0 18px 44px -22px rgba(124,58,237,.30);
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s, border-color .45s;
  overflow: hidden;
}
/* 卡片顶部渐变亮线 */
.service-card::before, .scenario-card::before, .comp-card::before {
  opacity: .85 !important;
  background: var(--mahu-grad) !important;
  height: 3px;
}
/* 悬浮光晕 */
.service-card::after, .scenario-card::after, .comp-card::after, .industry-card::after {
  content: ''; position: absolute; inset: -1px; border-radius: 20px; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(168,85,247,.14), transparent 62%);
  opacity: 0; transition: opacity .4s;
}
.service-card:hover::after, .scenario-card:hover::after,
.comp-card:hover::after, .industry-card:hover::after { opacity: 1; }

.service-card:hover, .metric-block:hover, .comp-card:hover, .scenario-card:hover,
.industry-card:hover, .process-card:hover {
  transform: translateY(-8px);
  border-color: rgba(168,85,247,.42) !important;
  box-shadow: 0 0 0 1px rgba(168,85,247,.24), 0 28px 64px -20px rgba(124,58,237,.42);
}

/* 卡片序号辉光（配合 JS 写入 --mx/--my） */
.card-index-glow { position: absolute; top: 14px; right: 18px; font-family: var(--font-mono);
  font-size: 42px; font-weight: 800; line-height: 1; color: rgba(124,58,237,.07); pointer-events: none; }

/* ============================================================
   5. 标题与文字：渐变强调 + 更强层级
   ============================================================ */
/* 5.0 收敂残留金色（183,121,31）→ 青色，彻底统一色系
       home.css 中副标题、光晕球、金色卡片等仍引用旧金，逐个覆盖 */
.hero-orb {
  background: radial-gradient(circle, rgba(168,85,247,.20) 0%, rgba(124,58,237,.10) 24%, rgba(56,189,248,.07) 46%, transparent 66%) !important;
}
.hero-orb::after {
  background: radial-gradient(circle, rgba(56,189,248,.16) 0%, rgba(34,211,238,.06) 30%, transparent 60%) !important;
}
.hero-orb::before {
  background: radial-gradient(circle, rgba(168,85,247,.14) 0%, rgba(124,58,237,.05) 35%, transparent 60%) !important;
}
/* 2026-09-29 新增「合作方式」区块视觉衬底：原此处是假数据柱状图，删除后留下断层。
   用极淡的斜向网格+顶部发光边把该区块从上下文中"托"出来，幅度刻意压低，避免抢主叙事。 */
#engagement {
  position: relative;
  background:
    linear-gradient(180deg, rgba(124,58,237,.07) 0%, rgba(124,58,237,0) 22%),
    linear-gradient(rgba(168,85,247,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,85,247,.045) 1px, transparent 1px);
  background-size: 100% 100%, 64px 64px, 64px 64px;
  border-top: 1px solid rgba(168,85,247,.22);
  border-bottom: 1px solid rgba(56,189,248,.16);
  overflow: hidden;
}
#engagement::before {
  content: '';
  position: absolute; inset: -40% -10% auto -10%; height: 70%;
  background: radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.20), transparent 62%);
  pointer-events: none;
}
#engagement > .container { position: relative; z-index: 1; }
/* 注意：底色必须用 !important —— style.css 里 .service-card 是 rgba(255,255,255,.72)，
   本规则同特异度但加载更早，不加会被覆盖（实测 cardBg 仍为 .72）。 */
#engagement .service-card {
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(168,85,247,.26) !important;
  display: flex; flex-direction: column;
}
#engagement .service-card:hover { background: rgba(255,255,255,.10) !important; }
/* 深色玻璃上继承 style.css 的深灰正文(rgb(75,81,99))不可读 → 提到亮色 */
#engagement .service-card .service-desc { color: rgba(255,255,255,.80) !important; flex: 1; }
#engagement .service-card .service-title { color: #fff !important; }
/* 六张卡文字量不同会分出两排高度（实测 327 vs 302），拉伸对齐消除错落。
   注意：grid item 上写 height:100% 无效（父格高度由内容决定，是循环依赖），
   正确做法是 align-self:stretch —— 它让 item 填满所在行的 track 高度。 */
#engagement .service-grid { align-items: stretch !important; }
#engagement .service-grid > .service-card { align-self: stretch; height: auto; }

.slogan-typing {
  color: rgba(125,211,252,.98) !important;   /* 原金色 → 青蓝，与主色同族，消除"换色跳动" */
  text-shadow: 0 0 30px rgba(56,189,248,.40) !important;
  font-weight: 500;
}
.slogan-typing::after { color: rgba(56,189,248,.9) !important; }

/* 金色卡片收敂 */
.comp-card.evolutionary {
  border-color: rgba(34,211,238,.30) !important;
  background: linear-gradient(145deg, rgba(240,253,255,.55) 0%, #ffffff 100%) !important;
}
.comp-card.evolutionary .comp-badge { color: #0891b2 !important; background: rgba(34,211,238,.12) !important; }
.comp-card.evolutionary h3 {
  background: linear-gradient(135deg, var(--text-primary), #0e7490) !important;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent;
}
.comp-card .recommended-tag { background: var(--mahu-grad) !important; }
.timeline-highlight {
  background: rgba(34,211,238,.08) !important;
  color: #0e7490 !important;
  border-left: 2px solid rgba(34,211,238,.45) !important;
}
.why-item:nth-child(4) .why-dot { background: #14b8a6 !important; box-shadow: 0 0 10px rgba(20,184,166,.35) !important; }

.section-heading {
  font-size: clamp(28px, 3.6vw, 46px) !important;
  font-weight: 900 !important;
  letter-spacing: -1.4px !important;
  line-height: 1.18 !important;
  color: var(--text-primary);
}
.section-label {
  color: #7c3aed !important;
  background: linear-gradient(135deg, rgba(168,85,247,.14), rgba(56,189,248,.14)) !important;
  border: 1px solid rgba(124,58,237,.20) !important;
  font-weight: 700;
  letter-spacing: 2.5px;
}
.section-text { color: var(--text-secondary); line-height: 1.9; }

/* 指标块数值渐变（内容已改为无数字的行业判断，渐变仍成立） */
.metric-block .mb-value {
  background: var(--mahu-grad) !important;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent;
  font-size: 26px !important; font-weight: 800 !important; letter-spacing: -.5px;
}
.metric-block .mb-trend { color: #7c3aed !important; }

/* ============================================================
   6. 时间线 / 步骤：发光连接线
   ============================================================ */
.process-timeline::before {
  background: linear-gradient(180deg, #a855f7, #38bdf8, #22d3ee) !important;
  box-shadow: 0 0 14px rgba(124,58,237,.45);
}
.timeline-dot { box-shadow: 0 0 0 4px rgba(168,85,247,.14), 0 0 18px rgba(124,58,237,.55) !important; }
.timeline-dot:nth-child(1) { border-color: #a855f7 !important; }
.timeline-item:nth-child(2) .timeline-dot { border-color: #7c3aed !important; box-shadow: 0 0 0 4px rgba(124,58,237,.14), 0 0 18px rgba(124,58,237,.55) !important; }
.timeline-item:nth-child(3) .timeline-dot { border-color: #38bdf8 !important; box-shadow: 0 0 0 4px rgba(56,189,248,.14), 0 0 18px rgba(56,189,248,.55) !important; }
.timeline-item:nth-child(4) .timeline-dot { border-color: #22d3ee !important; box-shadow: 0 0 0 4px rgba(34,211,238,.14), 0 0 18px rgba(34,211,238,.55) !important; }
.timeline-step { color: #7c3aed !important; font-weight: 700; }

/* ============================================================
   7. 按钮：流光
   ============================================================ */
.btn-primary { background: var(--mahu-grad) !important; box-shadow: 0 8px 28px -8px rgba(124,58,237,.65) !important; }
.btn-primary:hover { box-shadow: 0 14px 40px -10px rgba(124,58,237,.8) !important; }
.btn-secondary { border-color: rgba(124,58,237,.32) !important; color: #4b3fa8 !important; background: rgba(255,255,255,.6) !important; }
.btn-secondary:hover { border-color: #7c3aed !important; background: rgba(168,85,247,.10) !important; color: #6d28d9 !important; }
.btn-ghost { border-color: rgba(124,58,237,.28) !important; color: #7c3aed !important; }
.btn-ghost:hover { background: rgba(168,85,247,.10) !important; border-color: #7c3aed !important; }

/* ============================================================
   8. CTA 区：深色科技收尾
   ============================================================ */
.home-cta {
  position: relative;
  background: linear-gradient(165deg, #0a0e27 0%, #141a44 45%, #0d1233 100%) !important;
  color: #fff;
  overflow: hidden;
}
.home-cta::before {
  content: ''; position: absolute; top: -30%; left: 50%; transform: translateX(-50%);
  width: 900px; height: 900px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.34) 0%, rgba(56,189,248,.14) 38%, transparent 66%);
  filter: blur(90px); pointer-events: none;
}
.home-cta h2, .home-cta .section-heading { color: #fff !important; }
.home-cta p, .home-cta .section-text {
  color: rgba(255,255,255,.82) !important;   /* 原 .74 在深底+光晕上读不清，提到 .82 */
  text-shadow: 0 1px 10px rgba(6,10,28,.6);
}

/* ============================================================
   9. 页脚：深色 + 顶部发光边
   ============================================================ */
footer {
  background: linear-gradient(180deg, #0d1233 0%, #090d24 100%) !important;
  border-top: 1px solid rgba(168,85,247,.28) !important;
}

/* ============================================================
   10. 导航：更锐利 + 滚动后收紧
   ============================================================ */
nav { border-bottom-color: rgba(168,85,247,.30) !important; box-shadow: 0 6px 40px rgba(10,14,39,.28) !important; }
.nav-links a:hover, nav a.active { background: rgba(124,58,237,.26) !important; }

/* ============================================================
   11. 卡片光标跟随（写入 --mx/--my，供 ::after 光晕使用）
   ============================================================ */
@media (hover: hover) {
  .service-card, .scenario-card, .comp-card, .industry-card { will-change: transform; }
}

/* ============================================================
   12. 响应式收敛
   ============================================================ */
@media (max-width: 900px) {
  .home-section { padding: 72px 24px; }
  .page-bg::after { background-size: 44px 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .skew-divider::before, .hero-orb, .metric-block, .service-card { animation: none !important; transition: none !important; }
}

/* ============================================================
   12. 浅底文字色对比度修正（2026-10-01 Cline，实测审计驱动）
   ---------------------------------------------------------------
   问题：--accent-amber/gold/cyan 这类品牌亮色是照着【深底 hero】设计的，
   但 v20.css 把它们收敂进 --accent-* 后，大量用在了白底卡片和浅灰 section 上。
   实测 8 个页面 1161 个文本节点，浅底 252 处不达标：
     #f59e0b 琥珀  2.15:1   #14b8a6 青绿 2.49:1
     #38bdf8 天蓝  2.14:1   #22d3ee 亮青 1.81:1
     #868ea3 次要灰 3.28:1  #ef4444 红  3.76:1
   WCAG AA 正文要求 4.5:1（大字号 3:1），全部不达标。

   处理：不动 :root 令牌（深底区块靠它们拿 8~10:1，动了反而变差），
        改为在【浅底作用域】内用 --on-light 变量覆盖文字色。
        色相保持不变，只压深到满足 AA。
   ============================================================ */
:root {
  --on-light-muted:  #5a6070;   /* 替 #868ea3，最差浅底 5.43:1 */
  --on-light-amber:  #8a5a06;   /* 替 #f59e0b，最差浅底 5.12:1 */
  --on-light-teal:   #0a6f65;   /* 替 #14b8a6，最差浅底 5.22:1 */
  --on-light-cyan:   #116e7c;   /* 替 #22d3ee，最差浅底 5.12:1 */
  --on-light-sky:    #116e7c;   /* 替 #38bdf8 */
  --on-light-red:    #b93333;   /* 替 #ef4444，最差浅底 5.06:1 */
}

/* --- 次要文字（128 处，最大头）--- */
body { --text-muted: var(--on-light-muted); }
.card p, .card span, .card li,
.service-card p, .service-card span,
.scenario-card p, .metric-block .mb-label,
.industry-card p, .comp-card p, .comp-card .comp-desc,
.faq-item p, .process-card p, .post-card p, .post-card span { color: var(--on-light-muted); }
.text-muted, .muted, .card-meta, .post-date, .post-meta { color: var(--on-light-muted) !important; }

/* --- 品牌色作文字（浅底）--- */
.badge-amber, .text-amber, .accent-amber-text { color: var(--on-light-amber) !important; }
.badge-green, .badge-teal, .text-teal, .text-gold { color: var(--on-light-teal) !important; }
.badge-cyan, .text-cyan { color: var(--on-light-cyan) !important; }
.text-sky, .badge-blue { color: var(--on-light-sky) !important; }
.text-red, .badge-red, .text-danger { color: var(--on-light-red) !important; }

/* 正文里直接用 var(--accent-*) 当文字色的（strong / a / span 等） */
.section-text strong, .section-text a, p strong, li strong,
a.text-link, .text-primary { color: var(--on-light-teal); }
a.text-link:hover, .section-text a:hover { color: var(--on-light-cyan); }

/* --- 渐变文字用在白底时，最浅端点太亮（1.81:1）--- */
.gradient-text {
  background: linear-gradient(135deg, var(--on-light-teal) 0%, var(--accent-primary) 50%, var(--on-light-sky) 100%);
  -webkit-background-clip: text; background-clip: text;
}

/* 页脚版权行：#64748b 压深底 3.83:1 */
footer .footer-bottom p,
footer .footer-bottom a { color: rgba(255, 255, 255, 0.72) !important; }

/* ============================================================
   13. 浅底对比度修正·第二轮（2026-10-01 Cline，复测后补漏）
   ---------------------------------------------------------------
   第一轮 322 -> 89 处。剩下的漏在两类选择器上：
     ① .nav-cta / .btn-primary 白字压紫底 #a855f7 = 3.96:1（全站 17 处）
        ⚠ 第一轮我把它写进了 v20-layout.css，但那个文件【只在 index.html 加载】，
          其余 7 个页面根本没吃到这条规则 —— 复测时按钮仍是 3.96:1 才发现。
     ② .tag-* / 卡片标题 / 正文链接直接用裸 var(--accent-*)
   ============================================================ */

/* ① 主按钮 / 导航 CTA：白字需 >=4.5:1，紫底 #a855f7 只有 3.96，压深一档 */
.btn-primary, .nav-cta, .btn-ghost {
  background-image: linear-gradient(135deg, #5b21b6 0%, #4338ca 100%) !important;
  color: #ffffff !important;
}

/* ② 标签类：.tag-red/.tag-problem 等浅底红/青 */
a.tag, span.tag, .scene-tag, .badge { text-decoration: none; }
.tag-red, .tag-problem, .scene-tag.tag-problem { color: var(--on-light-red) !important; }
.tag-green, .tag-solution, .scene-tag.tag-solution { color: var(--on-light-teal) !important; }
.tag-amber, .tag-neutral { color: var(--on-light-amber) !important; }

/* ③ 卡片内标题 / 链接 / 数值：品牌色当文字用时一律走 on-light 版 */
.card h3, .card h4, .card .card-title,
.card > div, .grid-2 .card > div, .grid-3 .card > div,
.card span:not(.btn-primary):not(.btn-ghost), .step-num, .step-title,
a.tag, .scene-tag, .post-card a, .post-card span {
  color: var(--on-light-teal);
}
.card a:hover, .post-card a:hover { color: var(--on-light-cyan); }

/* ④ 正文里的品牌色链接（STEP 01 / 预约业务对齐 等） */
.section-text a, p a, .reveal a[href*="contact"], .reveal a[href*="engagement"] {
  color: var(--on-light-teal) !important;
}

/* ⑤ 价格/数值类：#14b8a6 与 #38bdf8 在白底 2.49 / 2.14，压深 */
.price, .price-value, .stat-value, .metric-value, .card .value { color: var(--on-light-teal) !important; }

/* ============================================================
   14. 修正第 13 节引入的回归（2026-10-01 Cline，复测发现）
   ---------------------------------------------------------------
   复测抓到：13 节的 .card a / .grid-2 .card div 等通用规则
   把 .btn-primary 的白字也刷成了深青(10,111,101)，
   压在紫底(91,33,182)上 = 1.49:1，比改之前的 3.96:1 更差。
   教训：通用选择器必须给语义元素（按钮）让路，顺序也重要。
   ============================================================ */
.btn-primary, .nav-cta, .btn-ghost,
a.btn-primary, a.btn-ghost, button.btn-primary, .cta-buttons a, #contact-form .btn-primary {
  color: #ffffff !important;
}

/* 浅底标签补漏：.tag-cyan / .tag-blue 等 */
.tag-cyan, .tag-blue, .tag-info { color: var(--on-light-sky) !important; }
.tag-cyan { color: var(--on-light-cyan) !important; }

/* 步骤编号 / 卡片小标题：#38bdf8 压白底 2.14 */
.step-num, .step-index, .process-step-num,
.grid-2 .card .card-label, .grid-3 .card .card-label { color: var(--on-light-cyan) !important; }

/* 深底里的 strong / 正文强调：#0d0a1f 压深底 */
.section-dark strong, .home-cta strong, footer strong { color: #ffffff; }

/* ============================================================
   15. 按钮文字最终兜底（2026-10-01 Cline）
   13 节收窄选择器后仍需硬兜底：任何容器内的 .btn-primary 文字必须是白的。
   ============================================================ */
a.btn-primary, a.btn-ghost, button.btn-primary, .btn-primary, .btn-ghost,
.card a.btn-primary, .card a.btn-ghost, .grid-2 a.btn-primary, .grid-3 a.btn-primary,
.reveal a.btn-primary, .cta-buttons a, #contact-form button[type="submit"] {
  color: #ffffff !important;
  background-image: linear-gradient(135deg, #5b21b6 0%, #4338ca 100%) !important;
}

/* ============================================================
   16. 浅底对比度·第三轮：按实测剩余项逐条精确修（2026-10-01 Cline）
   剩余 52 处全部是具体类名/内联样式，不再用通用规则堆。
   ============================================================ */

/* ① 卡片内正文块（"→ 阅读全文" "💡 教训" "STEP 01" 等）—— 直系子 div/span */
.card > div, .card > span,
.grid-2 .card > div, .grid-3 .card > div,
.grid-2 .card div div, .grid-3 .card div div,
.post-card span, .post-card div { color: var(--on-light-teal) !important; }

/* ② 红色系正文（#ef4444 白底 3.76 / 浅红底 3.62） */
.card .text-red, .card div[style*="--accent-red"],
.grid-2 .card > div:has(> div), .reveal-right .card > div { color: var(--on-light-red) !important; }

/* ③ 青色系（#38bdf8 白底 2.14 / #22d3ee 2.10） */
.card .text-cyan, .step-num, .card-label { color: var(--on-light-cyan) !important; }

/* ④ 琥珀（#f59e0b 2.15） */
.card .text-amber { color: var(--on-light-amber) !important; }

/* ⑤ FAQ 答案正文 3.93 */
.faq-a p, .faq-a, details.faq-item p { color: var(--on-light-muted) !important; }

/* ⑥ 推荐标签：白字压紫底 3.96 */
.recommended-tag, .comp-card .recommended-tag {
  color: #ffffff !important;
  background-image: linear-gradient(135deg, #5b21b6 0%, #4338ca 100%) !important;
}

/* ⑦ 次要按钮：#4b3fa8 压半透明白 3.08 */
.btn-secondary { color: #3f2f8f !important; background: rgba(255,255,255,.92) !important; }

/* ⑧ 首页 why 区 strong（#22d3ee 压 #efedf9 = 1.56） */
.why-grid .section-text strong, .why-grid strong { color: var(--on-light-cyan) !important; }