@charset "UTF-8";
/* =============================================================
 * Carbon Nexus — Design Language v4「石墨 + 碳青」
 * 加载于 styles.css 之后，只做重映射与编排，不改动原表。
 *
 * 为什么在 token 层改而不是加覆盖选择器：
 *   main.js 用内联 style="...var(--gold-lt)" 渲染 hero accent、
 *   eyebrow、能力卡色条。内联样式无法被外部规则覆盖，但它引用的
 *   是变量 —— 重定义变量即可让内联样式一起跟随。
 *
 * COLOR PROPORTIONS — 88 / 8 / 3 / 1
 *   88%  Graphite 深石墨          全站背景
 *    8%  Chalk / Ash             文字与中性层
 *    3%  Carbon Cyan             唯一高光：CTA / 活数据 / 焦点
 *    1%  Cost Gold               仅「成本 / 价格 / 账单」数字
 *
 * ACCENT DISCIPLINE — 铁律
 *   ✓ 碳青 = 唯一主口音。CTA、活跃态、焦点环、活数据。
 *   ✓ 金 = 语义色，只标记货币与成本，不做装饰。
 *   × 同屏碳青元素 > 6 处
 *   × 用碳青做大面积背景或渐变
 * ============================================================= */

:root {
  /* ── 底：Graphite 88% ───────────────────────────── */
  --void:       #0E1014;
  --obsidian:   #171A20;
  --obsidian-2: #1E222A;
  --obsidian-3: #262B34;
  --obsidian-4: #333944;

  --inkwell:    #0E1014;
  --inkwell-2:  #171A20;

  /* ── 文字与中性 8%（全部实测 ≥ AA） ─────────────── */
  --vellum:     #F2F4F7;   /* 18.1:1 */
  --parchment:  #E4E8EE;
  --platinum:   #C3CAD4;   /* 11.9:1 */
  --warm-grey:  #A8B0BC;   /*  8.7:1 — 正文 */
  --stone:      #767F8C;   /*  4.7:1 — 原 #666 仅 3.0:1，不达 AA，已修 */
  --steel-dark: #333944;

  /* ── 碳青 3% — 唯一高光 ─────────────────────────── */
  /* 沿用 --gold-* 变量名以承接内联样式，语义已换为 cyan */
  --gold:         #14776A;
  --gold-mid:     #1FA894;
  --gold-lt:      #34D3C0;   /* 10.2:1 — 主口音 */
  --gold-bright:  #5FE3D2;
  --gold-pale:    #B8F0E7;
  --gold-glow:    rgba(52, 211, 192, 0.07);
  --gold-line:    rgba(52, 211, 192, 0.16);

  --cyan-primary: #34D3C0;
  --cyan-soft:    rgba(52, 211, 192, 0.14);

  /* ── 成本金 1% — 只给货币与成本数字 ─────────────── */
  --cost:         #C9A227;   /* 7.9:1 */
  --cost-pale:    #E8CE7A;

  /* ── 业务线：重新调冷，与石墨同族 ───────────────── */
  --carbon-line:  #34D3C0;
  --finance-line: #C9A227;
  --tech-line:    #6E9BE8;
  --trade-line:   #A88BE0;

  --deadline:     #E8573A;
  --status-ok:    #34D3C0;

  --line:         rgba(242, 244, 247, 0.10);

  /* ═══ 动效编排 token ═══════════════════════════════
   * 原表里同一条缓动写了 3 种拼法且无 token。统一收口。 */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);      /* 入场：快起慢收 */
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);      /* 状态切换 */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* 悬停回弹 */

  --dur-fast:  180ms;
  --dur-base:  420ms;
  --dur-slow:  760ms;
  --dur-hero: 1200ms;

  --stagger: 70ms;   /* 分级入场步长 */
}

/* =============================================================
 * 1. 图像语言统一
 * 病灶：三张能力卡照片分别是冷蓝、青粉、暖橙，色温各异，
 *       当场推翻了整套配色。给全站图像一条统一的调色链。
 * ============================================================= */

.home-cap-image img,
.home-insights-journal img,
.featured-cases img,
.editor-note img {
  /* 压暗 + 提反差 + 轻度去饱和。
   * 注意是「暗」不是「灰」：brightness down / contrast up 保住层次，
   * saturate 只降到 0.72 —— 降到 0.55 会把照片洗成一张灰纸。 */
  filter: saturate(0.72) contrast(1.14) brightness(0.78);
  transition: filter var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

/* 悬停时把饱和度还回去一点——图像"醒来"，是反馈不是装饰 */
.home-cap-strip-card:hover .home-cap-image img {
  filter: saturate(0.82) contrast(1.06) brightness(0.95);
}

/* 冷向调色：把杂色推向石墨-碳青轴。
 * 用 soft-light 而不是 color —— color 会整体替换色相，
 * 把照片压成单色贴纸；soft-light 只是"调"，保留原有明暗关系。 */
.home-cap-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(170deg,
              rgba(120, 180, 200, 0.22) 0%,
              rgba(20, 119, 106, 0.28) 55%,
              rgba(10, 30, 40, 0.40) 100%);
  mix-blend-mode: soft-light;
  opacity: 0.9;
}

.home-cap-image { position: relative; overflow: hidden; }

/* =============================================================
 * 2. 首屏（.apex-hero）
 * 2026-08-12：应要求整段回退。首屏的配色、遮罩、排版与 Ken Burns
 * 全部交还 styles.css 原始定义 —— 本主题不再介入首屏。
 * 若要重做首屏，请从 theme-graphite.css.bak-20260812 取回旧实现。
 * ============================================================= */

/* =============================================================
 * 2k. 硬编码金色残留
 * styles.css 在 :root 之外还写死了两个金色变量和一组 rgba 字面量，
 * 所以主 CTA 不跟 token 走。在这里收口 —— 这是最刺眼的一处：
 * 全站唯一的主行动按钮，颜色和装饰性眉标、序号完全一样。
 * ============================================================= */

:root,
.ey-scope,
[class*="rsa"] {
  --rsa-accent:      var(--cyan-primary);
  --ey-gold-signal:  var(--cyan-primary);
  --m-gold:          var(--cyan-primary);
  --m-gold-lt:       var(--gold-bright);
}

.nav-cta,
.button {
  border-color: rgba(52, 211, 192, 0.42);
  color: var(--cyan-primary);
}

.nav-cta:hover,
.button:hover {
  background: rgba(52, 211, 192, 0.10);
  border-color: var(--cyan-primary);
  color: var(--gold-pale);
}

/* =============================================================
 * 2l. 口音回收 —— 本次最关键的一步
 *
 * 把 --gold-lt 全局换成碳青后出现了「口音通胀」：能力卡三个大标题
 * 全变碳青，同屏 3 处高饱和色块直接压过主 CTA，层级又一次归零。
 * 这正是原设计"金色到处用"的同一个病，只是换了颜色。
 *
 * 规则：碳青只出现在 ① 主 CTA ② 可点击箭头 ③ 活跃/焦点态
 *       ④ hero 单一强调词。标题、眉标、序号一律回中性。
 * ============================================================= */

/* 标题回中性 —— 覆盖 styles.css:10871 的 --ey-gold-signal */
.home-cap-title,
.insight-journal-card h3,
.case-slide-copy h3 {
  color: var(--vellum);
}

/* 章节眉标回中性 —— 覆盖 styles.css:10805 写死的 rgba(212,164,56,.72)。
 * 眉标是"structure"不是"signal"，不该占用主口音。 */
.home-cap-strip-eyebrow,
.case-kicker,
.service-path-kicker,
.subscribe-kicker {
  color: var(--platinum);
  opacity: 0.72;
}

.home-cap-strip-eyebrow::before {
  background: var(--gold-line);
}

/* 卡片顶线：静止=结构（中性细线），悬停=信号（碳青）。
 * 让颜色承担状态含义，而不是当装饰。 */
.home-cap-line {
  background: var(--line) !important;
  height: 2px;
  transition: background var(--dur-base) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

.home-cap-strip-card:hover .home-cap-line {
  background: var(--cyan-primary) !important;
}

/* =============================================================
 * 2m. 卡片配图：真 duotone
 * 单靠 soft-light 调色压不住暖橙椅子 / 青粉平板这种强色偏。
 * 小图不需要真实色彩还原，先 grayscale 归零色相，再统一染色，
 * 三张图从此必然同族 —— 这是唯一可靠的做法。
 * ============================================================= */

.home-cap-image img {
  filter: grayscale(1) contrast(1.16) brightness(0.82);
}

.home-cap-strip-card:hover .home-cap-image img {
  filter: grayscale(0.55) contrast(1.10) brightness(0.94);
}

.home-cap-image::after {
  background: linear-gradient(165deg,
              rgba(52, 211, 192, 0.30) 0%,
              rgba(20, 119, 106, 0.22) 45%,
              rgba(14, 16, 20, 0.55) 100%);
  mix-blend-mode: screen;
  opacity: 0.34;
}

/* =============================================================
 * 3. 字体细节
 * 病灶：Cormorant 默认老式数字，"2026" 渲染成 2o26，
 *       和思源宋体的中文字面重心完全对不齐。
 * ============================================================= */

h1, h2, h3, h4,
.home-cap-title,
.authority-num,
.section-head,
.home-insights-journal h2,
.featured-cases-head h2 {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1, "kern" 1;
}

/* 中文标题统一回正字距（拉丁负字距不适用于 CJK 字面） */
h1, h2 { letter-spacing: -0.01em; }

/* 数字度量：等宽数字，避免计数动画时宽度跳动。
 * 注意：这里绝不能设 color —— .authority-strip 是浅色带(#F4F1EA)，
 * 原表已用 --ey-ink(#111) 正确处理。曾误设 --vellum 导致 1.09:1 隐形。 */
.authority-num {
  font-variant-numeric: lining-nums tabular-nums;
}

/* =============================================================
 * 4. 动效编排系统
 * 原 .reveal：18px / 0.55s / ease / 无分级 —— 一次性全屏弹入，
 * 读起来像 PDF 翻页。改为分级 + 长位移 + 统一缓动。
 * ============================================================= */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
  will-change: opacity, transform;
}

.reveal.visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* 分级入场：motion.js 给同组子元素写入 --i */
.stagger-group > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}

.stagger-group.visible > * {
  opacity: 1;
  transform: none;
}

/* 悬停：定向反馈，不是通用放大 */
.home-cap-strip-card {
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}

.home-cap-strip-card:hover { transform: translateY(-6px); }

.home-cap-arrow {
  display: inline-block;
  color: var(--cyan-primary);
  transition: transform var(--dur-base) var(--ease-spring);
}

.home-cap-strip-card:hover .home-cap-arrow { transform: translate(4px, -4px); }

.home-cap-line {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}

.home-cap-strip-card:hover .home-cap-line,
.home-cap-strip-card.visible .home-cap-line { transform: scaleX(1); }

/* 角色议程行：悬停时整行推进，箭头跟手 */
.service-path-card {
  transition: background var(--dur-base) var(--ease-out),
              padding-left var(--dur-base) var(--ease-out);
}

.service-path-card:hover {
  background: var(--gold-glow);
  padding-left: 12px;
}

/* =============================================================
 * 5. 亮面作用域 (Light Surface Scope)
 *
 * 关键认知：碳青 #34D3C0 的相对亮度 L≈0.51 —— 它是一个「亮色」。
 *   在 #0E1014 上做文字 = 10.2:1  ✓
 *   在 #FFFFFF 上做文字 =  1.6:1  ✗  —— 完全不可读
 *   作为背景色时，其上的文字必须是深色。
 *
 * 全站有 4 个浅色带（authority-strip #F4F1EA / insights-subscribe /
 * section.white / editor-note），暗色调色板落上去必然翻车。
 * 这里给浅底一套配对色，全部实测达 AA。
 * ============================================================= */

:root {
  --cyan-deep:  #0B7263;   /* 白底 5.83:1 —— 浅色带上的碳青 */
  --ink-mid:    #4A5058;   /* 浅色带上的次级文字 6.7:1 */
}

/* 5a. 浅色带上的强调数字 —— 原为 1.57:1 */
.section.white .judgment-num,
.editor-note .judgment-num,
.editor-judgments .judgment-num {
  color: var(--cyan-deep);
}

/* 5b. 浅色带上的眉标 —— 我在 2l 统一设了 platinum，
 *     那是给暗底的；落到浅色带上只有 1.38:1，必须分开。 */
.insights-subscribe .subscribe-kicker,
.authority-strip .case-kicker,
.section.white .case-kicker,
.section.white .service-path-kicker {
  color: var(--ink-mid);
  opacity: 1;
}

/* 5c. 浅色带上的按钮：碳青当底就必须换深色版 + 浅色字 */
.insights-subscribe .button,
.authority-strip .button,
.section.white .button {
  background: var(--cyan-deep);
  border-color: var(--cyan-deep);
  color: var(--vellum);
}

.insights-subscribe .button:hover,
.authority-strip .button:hover,
.section.white .button:hover {
  background: #095C50;
  border-color: #095C50;
  color: var(--vellum);
}

/* 5c-2. 实心碳青按钮（closing-briefing 的主 CTA）
 * 碳青当底 + 浅色字 = 1.42:1。碳青是亮色，其上必须用深色字。
 * 这里反而是最好的形态：实心碳青 + 深墨字 —— 10.2:1，
 * 且它是全页唯一的实心色块，主 CTA 的优先级一眼可辨。 */
.closing-briefing .button,
.closing-actions .button {
  background: var(--cyan-primary);
  border-color: var(--cyan-primary);
  color: var(--void);
  font-weight: 700;
}

.closing-briefing .button:hover,
.closing-actions .button:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: var(--void);
}

/* 5d. 语言切换按钮
 * 原有 bug：--ink 与 --white 都别名到 --vellum，
 * 于是 active 态是「白字压白底」1.00:1，完全看不见。 */
.lang-btn.active {
  color: var(--void);
  background: var(--vellum);
}

/* =============================================================
 * 6. 可访问性
 * ============================================================= */

:focus-visible {
  outline: 2px solid var(--cyan-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .stagger-group > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* 首屏的 reduced-motion 处理由 styles.css 原表负责，见其 @media 块 */
  .home-cap-line { transform: scaleX(1) !important; }
}