@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════
   identity-r13.css — 第 13 轮:给每一页一个自己的样子

   委托人 2026-09-22 原话:「官網所有頁面的排版都是一樣的格式……整個網站失去了靈魂。
   所有的背景插圖都是共用這些網格,完全看不出科技,前沿,動態。」

   她说的是对的,而且能逐条量出来:
     · 七页的节骨架逐字相同,背景构件只有 data-cgrid 的 line / field 两种
     · 六张首屏 SVG 的 <defs> md5 完全一致(561c263c),每张只有 2–3 条 path
     · 72 张卡片插图里 66 张的几何逐字相同(ovp-ground x="185.6"),
       「交易平台 / 支付能力 / 市场行情 / 多资产架构」之间唯一的差别是
       那片排线的**角度**(竖 / 横 / 斜上 / 斜下)—— 与卡片讲什么完全无关
     · 375 宽下 H1 50.9px vs H2 26.9px、字重同为 700,层级几乎读不出来

   本轮只新增独立文件,不改既有文件的任何一行(唯一例外见 §0)。
   整轮回退 = 删掉七个 HTML head 里 identity-r13.css / scene-r13.js 两行引用。
   ══════════════════════════════════════════════════════════════════ */

/* ── §0 唯一的覆盖:撤掉全站共用的那两个背景构件 ──────────────────
   c-grid.css 给每一节铺 line / field,七页同一套。它不是没道理
   ——它的道理是「同一组格距把上下串起来」—— 但代价正是委托人看到的那件事:
   翻到哪一页都是同一张网。本轮把它换成按页不同的场景层(scene-r13.js),
   所以这两条构件在此撤下。c-grid.css 本体一个字没动,删掉本文件即复原。 */
.section[data-cgrid]::before { display: none; }

/* ══════════════════════════════════════════════════════════════════
   §1 字级层级 —— 规则 4:H1 要大、要粗,不能和 H2 一个量级
   ------------------------------------------------------------------
   改之前(site.css:23–26,实测):
     H1 clamp(32, 1.6rem+2.4vw, 56) / 700
     H2 clamp(26, 1.4rem+1.2vw, 36) / 700
   ⇒ 1440 上比值 1.56,375 上只剩 1.29,而且两者字重一模一样。
     手机上把标题遮住只看字,分不出哪个是 H1。

   改之后:两端都拉开到 1.9 倍以上,并用字重再补一档差。
     375:  H1 50.4 / H2 26.6 = 1.89
     1440: H1 76.0 / H2 36.0 = 2.11
   H1 不再往 88 推:首屏 h1 的 .seg 是块级两行,88px 会把 CTA 挤出首屏。
   ══════════════════════════════════════════════════════════════════ */
:root {
  --fs-h1: clamp(42px, 2.4rem + 3.2vw, 76px);
  --fs-h2: clamp(26px, 1.45rem + 0.9vw, 36px);
}

h1, .h1 {
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.03em;
  max-width: 15em;
}

h2, .h2 {
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.018em;
}

/* 眉标签往上再收一档:它是上下文,不是标题。
   与放大后的 H1/H2 之间必须留出可读的落差,否则三级读成两级。 */
.eyebrow, .section__no {
  font-size: .8125rem;
  letter-spacing: .14em;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════
   §2 场景层容器 —— 规则 2:把静态网格换成按页不同的动态视觉
   ------------------------------------------------------------------
   与 r12 氛围层同样的安全边界:fixed + z-index:-1 + 脱离文档流,
   页面高度与文案指纹零变化;浅色档不出现;reduce 下不起循环。
   ══════════════════════════════════════════════════════════════════ */
.r13-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: none;
  pointer-events: none;
  contain: strict;
}

[data-theme="dark"] .r13-scene { display: block; }

/* r12 的氛围粒子与本层是同一个位置的两张背景。
   本轮由 scene-r13.js 置 window.__R13_SCENE,r12 自行让位(见该文件 §A)。
   这里再加一道纯 CSS 的保险:两层同时在,粒子那层不出现。 */
[data-theme="dark"] .r13-scene ~ .r12-ambience,
[data-theme="dark"] .r12-ambience:has(~ .r13-scene) { display: none; }

/* ══════════════════════════════════════════════════════════════════
   §3 滚动微动效 —— 规则 3:淡入 + 上滑
   ------------------------------------------------------------------
   站上已有 .reveal,但位移只有 8px,实测基本看不出来;而且只挂在
   .section__head 上,卡片、图、列表一律没有入场。
   本节用独立属性 data-r13-in,由 scene-r13.js 自己的观察器驱动,
   不碰 main.js 那一套(它在 DOM-ready 时已经把 .reveal 收完了,
   后加的元素它看不见)。
   ══════════════════════════════════════════════════════════════════ */

/* 位移从 8px 提到 18px —— 够看见,又不至于让整页在滚动时晃。 */
[data-anim="1"] .reveal { transform: translateY(18px); }

[data-r13-anim="1"] [data-r13-reveal] {
  opacity: 0;
  transform: translateY(22px);
}

[data-r13-anim="1"] [data-r13-reveal][data-r13-in="1"] {
  opacity: 1;
  transform: none;
  transition:
    opacity 420ms cubic-bezier(.22, .61, .36, 1),
    transform 520ms cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--r13-delay, 0ms);
}

/* 同一组卡片按顺序错开进场。延迟在 JS 里逐个写进 --r13-delay,
   上限 6 档 —— 再多会让最后一张等得明显,读起来像卡顿而不是节奏。 */

@media (prefers-reduced-motion: reduce) {
  [data-r13-anim="1"] [data-r13-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   §4 七页各自的记号 —— 规则 1:每页要有自己的视觉身份
   ------------------------------------------------------------------
   ⚠️ 刻意**不**给七页发明七种品牌色。色板是手册定的口径
   (brand/tokens-dark.css),我无权在一轮美术里自行扩色。
   所以页面之间的差别做在三处,全部在既有色板之内:
     ① 场景层的几何与运动完全不同(scene-r13.js,一页一套)
     ② 主/辅色的配比不同 —— 蓝(primary-500)与青(accent-500)之间取不同重心
     ③ 版面骨架不同(节标题的对齐、分隔的笔法、首屏的构图重心)
   ══════════════════════════════════════════════════════════════════ */
[data-page] {
  --r13-ink-a: var(--c-primary-500);
  --r13-ink-b: var(--c-accent-500);
}

/* 首页 · 撮合流:蓝为主,青只在「规则闸」右侧出现 */
[data-page="home"] { --r13-ink-a: var(--c-primary-500); --r13-ink-b: var(--c-accent-500); }
/* 服务 · 能力层叠:青为主,层与层之间靠明度分级 */
[data-page="services"] { --r13-ink-a: var(--c-accent-500); --r13-ink-b: var(--c-primary-500); }
/* 运作方式 · 流程轨道:智能体(青)与人工(蓝)交替,与站上既有语义色同口径 */
[data-page="how"] { --r13-ink-a: var(--c-accent-500); --r13-ink-b: var(--c-primary-600); }
/* 市场 · 行情场:蓝为底,涨跌另取语义色,不进这两格 */
[data-page="markets"] { --r13-ink-a: var(--c-primary-600); --r13-ink-b: var(--c-accent-500); }
/* 关于 · 同心轨道:压到最低对比,让长文当主角 */
[data-page="about"] { --r13-ink-a: var(--c-primary-500); --r13-ink-b: var(--c-primary-700); }
/* 招聘 · 接入:青蓝各半,汇聚处最亮 */
[data-page="careers"] { --r13-ink-a: var(--c-accent-500); --r13-ink-b: var(--c-primary-700); }

/* ── 节标题的笔法一页一种 ──
   同样一块 .section__head,七页不该长成一个样。这里只改「记号」这一笔:
   它足够小,不会动到已经验收过的间距与行宽;又足够明确,
   翻页时一眼能认出换了一页。 */

/* 首页:序号左侧一根短粗竖杠 —— 宣言感 */
[data-page="home"] .section__no { position: relative; padding-left: 14px; }
[data-page="home"] .section__no::before {
  content: ""; position: absolute; left: 0; top: .12em; bottom: .12em;
  width: 4px; background: var(--r13-ink-a);
}

/* 服务:序号下方一条渐隐横线 —— 层叠感 */
[data-page="services"] .section__head { position: relative; }
[data-page="services"] .section__no { padding-bottom: 10px; position: relative; }
[data-page="services"] .section__no::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 2px;
  background: linear-gradient(to right, var(--r13-ink-a), transparent);
}

/* 运作方式:序号做成轨道上的一个节点 —— 圆点 + 向右的引线 */
[data-page="how"] .section__no { position: relative; padding-left: 20px; }
[data-page="how"] .section__no::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid var(--r13-ink-a); background: transparent;
}

/* 市场:序号用等宽 + 方括号 —— 读数感 */
[data-page="markets"] .section__no {
  font-family: var(--ff-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  letter-spacing: .08em;
}
[data-page="markets"] .section__no::before { content: "["; margin-right: .35em; color: var(--r13-ink-a); }
[data-page="markets"] .section__no::after  { content: "]"; margin-left: .35em; color: var(--r13-ink-a); }

/* 关于:序号上方一条细长横线,像书页的天头 —— 编辑感 */
[data-page="about"] .section__head { position: relative; padding-top: 18px; }
[data-page="about"] .section__head::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; max-width: 240px;
  height: 1px; background: color-mix(in srgb, var(--r13-ink-a) 55%, transparent);
}

/* 招聘:序号做成一个方框标签 —— 人味、像工牌 */
[data-page="careers"] .section__no {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--r13-ink-a) 60%, transparent);
  border-radius: 3px;
}

/* 法律:不加任何记号。见 §5。 */

/* ══════════════════════════════════════════════════════════════════
   §5 法律页刻意不动 —— 规则 7:每一节都要有存在的理由
   ------------------------------------------------------------------
   legal.html 是全站唯一一页没有场景层、没有入场动画的页面,这是设计决定
   而不是漏做:披露条款要的是「稳」,一页会动的风险警示反而削弱它。
   全站六页都在动,只有这一页是静的 —— 这个反差本身就是它的记号。
   这一段写在这里,是为了下一个接手的人不要「顺手补上」。
   ══════════════════════════════════════════════════════════════════ */
[data-page="legal"] .section__no { color: var(--c-text-3); }
[data-page="legal"] .section__head { border-left: 2px solid var(--c-line, #2A3B45); padding-left: 16px; }

/* ══════════════════════════════════════════════════════════════════
   §6 手机优先 —— 规则 5
   ------------------------------------------------------------------
   上面所有尺寸都是从 375 往上推的(clamp 的下界就是手机值)。
   这一节只处理两件在窄屏会出事的:
     · 放大后的 H1 在 320 上要能落下
     · 场景层在手机上降密度 —— 不是关掉,关掉手机上就又「没有动态」了
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  :root { --fs-h1: clamp(36px, 2.0rem + 2.6vw, 44px); }
  h1, .h1 { letter-spacing: -.02em; }
}

@media (max-width: 767px) {
  [data-page="about"] .section__head::before { max-width: 140px; }
  [data-r13-anim="1"] [data-r13-reveal] { transform: translateY(14px); }
}

/* ══════════════════════════════════════════════════════════════════
   §7 首屏 —— 那张共用网格图就在这里
   ------------------------------------------------------------------
   委托人截图指的那片网格,一半来自卡片插图,一半来自这六张首屏 SVG。
   实测:brand/hero-*-dark.svg 六张的 <defs> md5 完全一致(561c263c),
   每张只有 2–3 条 path,画的都是同一片蓝色排线 —— 六页共用一张图,
   连「这一页在讲什么」都没参与。

   所以首屏的底不再用那张图,改为「按页不同的场景层(canvas)透上来
   + 一层按页不同的渐变」。图文件本身一个字没动,删掉本节即复原。
   ══════════════════════════════════════════════════════════════════ */
[data-theme="dark"][data-page]:not([data-page="legal"]) .hero__bg img { display: none; }

/* 首屏的底:一层按页取向不同的渐变。
   角度、落点、浓淡三项每页都不同 —— 这是翻页时第一眼的差别。 */
[data-theme="dark"][data-page]:not([data-page="legal"]) .hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--r13-hero-wash, none);
}

[data-page="home"] {
  --r13-hero-wash: radial-gradient(120% 90% at 8% 20%,
      color-mix(in srgb, var(--c-primary-500) 16%, transparent) 0%, transparent 62%),
    linear-gradient(105deg, rgba(24,36,44,.34) 0%, rgba(20,31,38,.16) 52%, rgba(16,26,32,.42) 100%);
}
[data-page="services"] {
  --r13-hero-wash: radial-gradient(90% 120% at 96% 8%,
      color-mix(in srgb, var(--c-accent-500) 15%, transparent) 0%, transparent 58%),
    linear-gradient(200deg, rgba(22,34,42,.34) 0%, rgba(20,31,38,.16) 60%, rgba(23,39,48,.40) 100%);
}
[data-page="how"] {
  --r13-hero-wash: linear-gradient(to right,
      color-mix(in srgb, var(--c-accent-500) 12%, transparent) 0%, transparent 34%),
    linear-gradient(160deg, rgba(20,31,38,.20) 0%, rgba(23,37,46,.40) 100%);
}
[data-page="markets"] {
  --r13-hero-wash: radial-gradient(140% 70% at 50% 108%,
      color-mix(in srgb, var(--c-primary-600) 14%, transparent) 0%, transparent 60%),
    linear-gradient(0deg, rgba(22,35,43,.40) 0%, rgba(20,31,38,.16) 70%);
}
[data-page="about"] {
  --r13-hero-wash: radial-gradient(70% 100% at 82% 38%,
      color-mix(in srgb, var(--c-primary-500) 11%, transparent) 0%, transparent 64%),
    linear-gradient(250deg, rgba(22,34,42,.36) 0%, rgba(20,31,38,.18) 100%);
}
[data-page="careers"] {
  --r13-hero-wash: radial-gradient(100% 80% at 62% 92%,
      color-mix(in srgb, var(--c-accent-500) 14%, transparent) 0%, transparent 62%),
    linear-gradient(140deg, rgba(20,31,38,.18) 0%, rgba(24,38,47,.42) 100%);
}

/* ── 首屏标题的栏宽 ──
   76px 的字放不进 620px 的栏:实测「透明、可追溯的规则之上」11 个字
   需要 836px,于是一句话折成四行,「在清晰、」被孤立在第二行。
   首屏不该让正文栏宽来定标题宽 —— 标题放宽到 940,副文案留在 34em,
   两者宽度不一致正是设计体系里写的「非对称错位构图」。 */
/* .hero__inner 是两列栅格(实测 700px + 388px),右边那 388px 是留给
   首屏插图的。图撤掉之后那一列空着,标题却还被压在 700px 里 ——
   11 个字 x 76px = 836px 放不下,于是断成三行。合并成单列。
   只在深色档合并:浅色档的首屏图还在用(浅色版按设计体系走「功能密度优先」,
   不属于本轮范围,留原样)。 */
[data-theme="dark"][data-page]:not([data-page="legal"]) .hero__inner {
  grid-template-columns: minmax(0, 1fr);
}

.hero .hero__copy { max-width: min(940px, 92vw); }
.hero h1 { max-width: min(940px, 92vw); }
.hero .sub { max-width: 34em; }

@media (max-width: 1023px) {
  .hero .hero__copy, .hero h1 { max-width: 100%; }
}

/* ── 首屏的构图重心一页一种 ──
   同一块 .hero__inner,七页现在靠对齐与留白各站各的位。 */
[data-page="how"] .hero__inner { padding-left: clamp(0px, 6vw, 96px); }
[data-page="about"] .hero__copy { max-width: min(760px, 90vw); }
[data-page="markets"] .hero .eyebrow {
  font-family: var(--ff-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
[data-page="careers"] .hero .eyebrow {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--c-accent-500) 55%, transparent);
  border-radius: 3px;
}