/* ══════════════════════════════════════════════════════════════════
   home-v5.css — 首页四个模块各自换一套版式

   为什么有这个文件
   ─────────────────
   委托人 2026-09-24 的原话:「亮点的排版都是一个个格子,很刻板和紧凑,
   需要结合每个模块的内容,设计和新增不同的展示方式」。

   实测确认:首页 01–04 四个模块用的是同一套 `.cards` 网格,
   差别只有列数(4 / 3)。四节内容完全不同性质,却共用一种盒子:
   · 01 亮点 = 四项并列服务,每项都通向 services 的一个锚点 → 本质是一份**索引**
   · 02 优势 = 一条底层能力陈述 + 两个成本事实 → 本质是**一主两辅**,不是三等分
   · 03 为什么选我们 = 规则→执行→留痕→问责,文案自己写了顺序 → 本质是一条**链**
   · 04 信任合规 = 三条立场,每条「一句承诺 + 一段说明」 → 本质是**条款**

   ⇒ 四节各给一套形态:索引清单 / 非对称主辅 / 纵向链条 / 条款分栏。

   遵循的既有规矩(设计体系-官网-Yannie定稿-v1.md)
   ─────────────────────────────────────────────
   · 「偏好非对称错位构图,制造动态张力」—— 本轮正是照这一条做的
   · 「区块间距 80–120px,呼吸感强」—— 行距全部放到 --s-7 / --s-8 档
   · 「不使用传统投影」—— 新版式零 box-shadow,只有 hover 的瞬时态
   · 「数字与指标使用等宽字体」—— 序号、标记全部 --font-mono
   · 「顶边 2px = 全站唯一的粗线,只标主体归属」—— 只在 02 的三块保留
   · 「金色(--c-accent-500)全页只有『具名问责』一处」——
     所以 04 的条款记号用 --c-text-3,**不许**借这个颜色
   · 一个新色值都没有:全部取自 brand/tokens-*.css

   回退 = 删掉 index.html / en/index.html head 里引用本文件的那一行,
   并把四节的标记还原(备份在 _bak/index.html.bak-modulelayout-*)。
   ══════════════════════════════════════════════════════════════════ */

/* ── 共用:新版式里的分印底图 ──────────────────────────────────────
   .ovp-imp 是 position:absolute;inset:0;z-index:-1,宿主必须自己立住坐标系。
   无框的行(01 / 04)刻意不给背景:让分印直接压在页面底上,
   「不装在盒子里」正是这一轮要的那件事。 */
.hl-row, .edge-lead, .edge-fig, .gov-step, .pledge-row { position: relative; }

/* ══════════════════════════════════════════════════════════════════
   §01 亮点 —— 索引式清单
   四项服务每项都是一个去处(services.html#…),所以按「目录」排:
   等宽序号 + 标题 + 说明,整行可点,行间只有一条发丝线,没有方框。
   ══════════════════════════════════════════════════════════════════ */
.hl-index {
  list-style: none;
  margin: var(--s-7) 0 0;
  padding: 0;
  display: grid;
  border-block-start: 1px solid var(--c-border);
}
.hl-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2) var(--s-4);
  align-items: start;
  padding: var(--s-6) 0;
  border-block-end: 1px solid var(--c-border);
  transition: background-color var(--dur-2) var(--ease);
}
.hl-row__no {
  font-family: var(--font-mono);
  font-size: clamp(22px, 1rem + 1.1vw, 34px);
  line-height: 1.1;
  letter-spacing: .02em;
  color: var(--c-text-3);
  opacity: .48;
  transition: color var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.hl-row__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-text);
  margin: 0;
}
.hl-row__title a { color: inherit; text-decoration: none; }
/* 整行可点,但标题必须是真链接 —— 读屏用户靠链接列表导航。 */
.hl-row--link .hl-row__title a::after { content: ''; position: absolute; inset: 0; }
.hl-row__body {
  grid-column: 2;
  margin: 0;
  color: var(--c-text-2);
  font-size: var(--fs-body);
  line-height: 1.8;
  max-inline-size: 64ch;
}
.hl-row__go {
  display: none;
  font-family: var(--font-mono);
  color: var(--c-text-3);
  align-self: center;
  transition: transform var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}

@media (min-width: 900px) {
  /* 桌面:序号 / 标题 / 说明 / 箭头 四栏。
     标题栏刻意窄(不到 1/4),说明栏宽 —— 这组比例本身就是非对称,
     不靠错位也不靠倾斜。 */
  .hl-row {
    grid-template-columns: 4.5rem minmax(0, 22%) minmax(0, 1fr) 2rem;
    gap: var(--s-6);
    align-items: baseline;
    padding: var(--s-7) var(--s-4);
    margin-inline: calc(var(--s-4) * -1);
  }
  .hl-row__body { grid-column: auto; }
  .hl-row__go { display: block; }
}

@media (hover: hover) {
  .hl-row--link:hover { background: var(--c-surface); }
  .hl-row--link:hover .hl-row__no { color: var(--c-primary-600); opacity: 1; }
  .hl-row--link:hover .hl-row__go { color: var(--c-primary-600); transform: translateX(4px); }
}
.hl-row--link:focus-within { background: var(--c-surface); }

/* ══════════════════════════════════════════════════════════════════
   §02 优势 —— 一主两辅的非对称组合
   「自研交易内核」是底层能力(一条宽幅陈述,副标题拆成四枚工序标记);
   「0 佣金 / 低点差」是两个成本事实(并排,标记在上、名目放大)。
   三项不再是三等分 —— 这正是它们在内容上本来的关系。
   ══════════════════════════════════════════════════════════════════ */
.edge-stack {
  display: grid;
  gap: var(--s-5);
  margin-block-start: var(--s-7);
}
.edge-lead {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-block-start: 2px solid var(--c-primary-600);
}
.edge-lead__name {
  margin: 0;
  font-size: clamp(22px, 1.1rem + 1vw, 32px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-text);
}
.edge-chips {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.edge-chips li {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  padding: 4px 10px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  white-space: nowrap;
}
.edge-lead__body,
.edge-fig__body {
  margin: 0;
  color: var(--c-text-2);
  font-size: var(--fs-body);
  line-height: 1.8;
}

.edge-pair { display: grid; gap: var(--s-5); }
.edge-fig {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding: var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-block-start: 2px solid var(--c-primary-600);
}
/* 名目放大压在最上,底下一条发丝线,再接副题 ——
   让两块窄的和上面那块宽的在视觉上分得开,
   而不是「同一张卡换了个宽度」。 */
.edge-fig__name {
  margin: 0;
  font-size: clamp(20px, 1rem + .9vw, 28px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.edge-fig__note {
  margin: 0;
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--c-border);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-text-3);
}

@media (min-width: 900px) {
  .edge-lead {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: var(--s-7);
    align-items: start;
    padding: var(--s-7);
  }
  .edge-pair { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   §03 为什么选我们 —— 纵向链条
   文案自己写着「从规则制定到智能执行,从过程留痕到责任归属」——
   那是一条有方向的链,不是四个平行的盒子。所以排成一条轴:
   规则先行 → 判据分工 → 逐笔留痕 → 具名问责,最后一节收在金色节点上,
   正好接住那句「流程可以自动,责任不行。」
   ══════════════════════════════════════════════════════════════════ */
.gov-chain {
  list-style: none;
  margin: var(--s-7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-6);
}
.gov-step {
  display: grid;
  gap: var(--s-2);
  padding-inline-start: var(--s-7);
  padding-block-end: var(--s-6);
}
.gov-chain > .gov-step:last-child { padding-block-end: 0; }

/* 节点 + 连到下一节的那截轴。画在每一节自己身上(而不是整条 ul 上),
   这样最后一节不会拖出一截没有去处的线。 */
.gov-step__dot {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .42em;
  inline-size: 15px;
  block-size: 15px;
  border: 1px solid var(--c-border-strong);
  border-radius: 50%;
  background: var(--c-canvas);
}
.gov-step__dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--c-primary-600);
}
.gov-step__dot::before {
  content: '';
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: calc(100% + 6px);
  inline-size: 1px;
  block-size: 9999px;
  background: var(--c-border-strong);
  opacity: .5;
  transform: translateX(-.5px);
}
.gov-chain > .gov-step:last-child .gov-step__dot::before { display: none; }
/* 链条末节 = 具名问责。全页唯一一处 --c-accent-500 仍然只给它。 */
.gov-step--human .gov-step__dot { border-color: var(--c-accent-500); }
.gov-step--human .gov-step__dot::after { background: var(--c-accent-500); }

.gov-step__no {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: .08em;
  color: var(--c-text-3);
}
.gov-step__title {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-text);
}
.gov-step__body {
  margin: 0;
  color: var(--c-text-2);
  font-size: var(--fs-body);
  line-height: 1.8;
  max-inline-size: 60ch;
}

@media (min-width: 900px) {
  /* 桌面:序号+标题在左窄栏,说明在右宽栏。轴仍然是直的,
     非对称来自两栏的比例,不来自把节点挪歪(挪歪会让轴断)。 */
  .gov-step {
    grid-template-columns: minmax(0, 26%) minmax(0, 1fr);
    column-gap: var(--s-7);
    padding-inline-start: var(--s-8);
    align-items: start;
  }
  .gov-step__no { grid-column: 1; }
  .gov-step__title { grid-column: 1; grid-row: 2; }
  .gov-step__body { grid-column: 2; grid-row: 1 / span 2; }
}

/* ══════════════════════════════════════════════════════════════════
   §04 信任合规 —— 条款式分栏
   每条是「一句承诺 + 一段说明」,语气是立场不是卖点。
   所以排成条款:左边一条大标题,右边正文,条与条只用发丝线隔开,
   整节留白最大 —— 庄重靠空白和秩序,不靠边框。
   ══════════════════════════════════════════════════════════════════ */
.pledge-rows {
  list-style: none;
  margin: var(--s-7) 0 0;
  padding: 0;
  display: grid;
  border-block-start: 1px solid var(--c-border);
}
.pledge-row {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-7) 0;
  border-block-end: 1px solid var(--c-border);
}
.pledge-row__mark {
  display: block;
  margin-block-end: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: .12em;
  /* ⚠️ 这里不许用 --c-accent-500:那个颜色全页只留给「具名问责」。 */
  color: var(--c-text-3);
}
.pledge-row__title {
  margin: 0;
  font-size: clamp(19px, .95rem + .75vw, 26px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-text);
}
/* 首句是承诺本身,立一档;第二段是说明,退一档。
   原来两段同字号同灰度,读起来是一团。 */
.pledge-row__lead {
  margin: 0;
  color: var(--c-text);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.75;
}
.pledge-row__body {
  margin: var(--s-3) 0 0;
  color: var(--c-text-2);
  font-size: var(--fs-body);
  line-height: 1.85;
}

@media (min-width: 900px) {
  .pledge-row {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    column-gap: var(--s-8);
    padding: var(--s-8) 0;
    align-items: start;
  }
  .pledge-row__v { max-inline-size: 62ch; }
}

/* ── 无框版式里的分印:改成贴右缘的一片底纹 ────────────────────────
   卡内那套尺寸(240px、右移 -76px)是照着 300px 见方的卡片定的。
   搬到一条 1100px 宽的行上,它就变成半空中一块孤零零的方框 ——
   实测第一版正是这个毛病,像杂讯不像底图。
   所以在无框的行里把它放大、压到行的右下角、并再淡一档:
   读起来是「行末尾的一片纹」,不是「一个飘着的图形」。
   只改尺寸与不透明度,几何与颜色一个都没碰。 */
.hl-row .ovp-imp,
.pledge-row .ovp-imp,
.gov-step .ovp-imp { opacity: .5; }
.hl-row .ovp-imp .ovp,
.pledge-row .ovp-imp .ovp,
.gov-step .ovp-imp .ovp {
  inset-inline-end: -48px;
  inset-block-end: -24px;
  inline-size: 360px;
}
/* 手机上行宽只有 ~340px,同一张纹会铺满整行压在正文底下。
   窄屏按行宽收一档,让它退回「右下角一点纹」。 */
@media (max-width: 899px) {
  .hl-row .ovp-imp,
  .pledge-row .ovp-imp,
  .gov-step .ovp-imp { opacity: .34; }
  .hl-row .ovp-imp .ovp,
  .pledge-row .ovp-imp .ovp,
  .gov-step .ovp-imp .ovp { inline-size: 210px; inset-inline-end: -36px; }
}

/* ── 列表与它下面那排按钮之间要有呼吸 ──────────────────────────────
   无框版式最后一条只剩一条发丝线,按钮紧贴上去会读成「第五条」。 */
.hl-index + .btn-row,
.gov-chain + .btn-row,
.pledge-rows + .btn-row,
.pledge-rows + .pledge__more,
.edge-stack + .spreads__tabs { margin-block-start: var(--s-7); }

/* 动效:沿用全站那一条「淡入 + 上移」,由 scene-r13.js 打 data-r13-in。
   本文件不新造动画时长,只声明参与。 */
@media (prefers-reduced-motion: reduce) {
  .hl-row, .hl-row__go { transition: none; }
}