/* ═══════════════════════════════════════════════════════════════════
   home-v6.css · 首页 01–04 四节重做(2026-09-24 第二轮)

   上一轮给四节各换了一套版式,反馈仍是三条:
   「排序就很奇怪,这样的模式」「不要随便加序号,这是官网不是一个小册子」
   「这个流程的排版更奇怪和诡异」,并要求更大气、更有吸引力、更顺畅。

   所以这一轮改的不是「再换一种盒子形状」,是三件事:
   ① 内容项里的装饰性序号全部去掉 —— 顺序该由图形表达,不该由数字表达;
   ② 每节给一个真的视觉锚(为这一节画的线描图版 / 一条指标带 / 一条流程轴),
      整页才不再是从头到尾一片字;
   ③ 节与节在疏密与形态上拉开 —— 宽松图文 → 紧密数据 → 横向图形 → 结构条款,
      滚动下去才有起伏。

   全部新类名,零覆盖既有样式;一个新颜色都没新增(全部 color-mix 自既有色板)。
   ⛔ --c-accent-500 全页只留给「具名问责」一处,本文件仅 .hflow__step--human 用它。
   ═══════════════════════════════════════════════════════════════════ */

/* ── 公用:线描图版 ───────────────────────────────────────────────
   图不裸放在页面底上 —— 上一轮的教训是「半空中一个方框」。
   给它一块有自己的场的图版:一层极淡的方向光 + 一道发丝边。

   r27:图版改成真玻璃。配方**照抄首屏 .hstage__panel**(herolux-r22.css §5),
   不另起一套 —— 首屏已经是玻璃,中段还是实心板,那才是「看着像草稿」的由来。
   ⚠️ backdrop-filter 要有东西可糊。纯平底色上开模糊等于没开,
   所以下面 §环境光 给四节各铺了一层大而软的光斑,玻璃才有得滤。 */
.fig-plate {
  position: relative;
  padding: var(--s-6);
  border-radius: 14px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-surface) 76%, transparent),
    color-mix(in srgb, var(--c-surface) 52%, transparent));
  border: 1px solid color-mix(in srgb, var(--c-border-strong) 26%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(122%);
          backdrop-filter: blur(16px) saturate(122%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--c-text) 8%, transparent),
    0 44px 80px -46px #000;
  overflow: hidden;
}
.fig-plate svg { display: block; inline-size: 100%; block-size: auto; }

/* 线描图的配色。⛔ 一个新颜色都没有,全部取自既有色板。
   插图不承载文字信息,所以走图形档(3.0)不走文字档。 */
.fig-plate .fx-grid  { stroke: var(--c-border-strong); stroke-width: 1; opacity: .14; }
.fig-plate .fx-line  { stroke: var(--c-border-strong); stroke-width: 1.25; fill: none; opacity: .78; }
.fig-plate .fx-key   { stroke: var(--c-primary-600); stroke-width: 1.75; fill: none; }
.fig-plate .fx-node  { fill: none; stroke: var(--c-border-strong); stroke-width: 1.25; }
.fig-plate .fx-soft  { fill: color-mix(in srgb, var(--c-primary-500) 13%, transparent); stroke: none; }
.fig-plate .fx-dot   { fill: var(--c-primary-600); stroke: none; }
.fig-plate .fx-halo  { fill: color-mix(in srgb, var(--c-primary-500) 22%, transparent); stroke: none; }
.fig-plate .fx-arrow { fill: var(--c-border-strong); stroke: none; }
.fig-plate .fx-dash,
.fig-plate .fx-dashbox { stroke: var(--c-border-strong); stroke-width: 1.25; fill: none;
                         stroke-dasharray: 4 6; opacity: .6; }
.fig-plate .fx-bar     { fill: color-mix(in srgb, var(--c-border-strong) 30%, transparent); stroke: none; }
.fig-plate .fx-bar-key { fill: color-mix(in srgb, var(--c-primary-500) 38%, transparent); stroke: none; }

/* r27 新增:原来那版只有等粗的线和空心方框,所以显得素。
   这里补的是「层次」—— 面板有厚度、主线有渐变、焦点有光、基线有刻度。 */
.fig-plate .fx-shadow     { fill: var(--c-canvas); opacity: .5; stroke: none; }
.fig-plate .fx-panel      { fill: color-mix(in srgb, var(--c-surface) 92%, transparent);
                            stroke: color-mix(in srgb, var(--c-border-strong) 46%, transparent);
                            stroke-width: 1.15; }
.fig-plate .fx-panel--key { stroke: color-mix(in srgb, var(--c-primary-600) 58%, transparent);
                            stroke-width: 1.4; }
.fig-plate .fx-hair       { stroke: var(--c-border-strong); stroke-width: 1; fill: none; opacity: .45;
                            stroke-linecap: round; }
.fig-plate .fx-tick       { stroke: var(--c-border-strong); stroke-width: 1; opacity: .3; }
.fig-plate .fx-tick-dot   { fill: var(--c-border-strong); opacity: .5; stroke: none; }
.fig-plate .fx-node-dot   { fill: color-mix(in srgb, var(--c-border-strong) 72%, transparent); stroke: none; }
.fig-plate .fx-line-soft  { stroke: var(--c-border-strong); stroke-width: 1.15; fill: none; opacity: .52;
                            stroke-linecap: round; }
.fig-plate .fx-key-soft   { stroke: var(--c-primary-600); stroke-width: 1.4; fill: none; opacity: .72;
                            stroke-linecap: round; }
.fig-plate .fx-ring       { fill: none; stroke: var(--c-primary-600); stroke-width: 1.5; }
.fig-plate .fx-layer      { fill: color-mix(in srgb, var(--c-border-strong) 7%, transparent); stroke: none; }
.fig-plate .fx-spine-notch{ stroke: var(--c-canvas); stroke-width: 1.5; opacity: .45; }
/* r28:把图里的「盒子」换成真内容之后需要的零件。
   上一版每个节点都是 圆角框 + 一颗蓝药丸 + 两三条长短不一的灰线 ——
   那是画线框稿时表示「这里以后有字」的占位套路,本身不表达任何意思,
   四个节点还共用同一套,所以看着像名片、像没画完。
   下面这些类各自对应一件具体的事:K 线 / 一摞币 / 占比环 / 带上限的表。 */
.fig-plate .fx-wick       { stroke: color-mix(in srgb, var(--c-border-strong) 66%, transparent);
                            stroke-width: 1; }
.fig-plate .fx-candle     { fill: color-mix(in srgb, var(--c-border-strong) 34%, transparent); stroke: none; }
.fig-plate .fx-candle--up { fill: color-mix(in srgb, var(--c-border-strong) 62%, transparent); stroke: none; }
.fig-plate .fx-coin       { fill: color-mix(in srgb, var(--c-surface) 88%, transparent);
                            stroke: color-mix(in srgb, var(--c-border-strong) 52%, transparent);
                            stroke-width: 1.1; }
.fig-plate .fx-coin--key  { fill: color-mix(in srgb, var(--c-primary-500) 26%, transparent);
                            stroke: color-mix(in srgb, var(--c-primary-600) 72%, transparent);
                            stroke-width: 1.3; }
.fig-plate .fx-coin-rim   { fill: none; stroke: color-mix(in srgb, var(--c-border-strong) 46%, transparent);
                            stroke-width: 1; }
.fig-plate .fx-ring-track { stroke: color-mix(in srgb, var(--c-border-strong) 24%, transparent); }
.fig-plate .fx-ring-seg   { stroke: color-mix(in srgb, var(--c-border-strong) 58%, transparent); }
.fig-plate .fx-track      { stroke: color-mix(in srgb, var(--c-border-strong) 26%, transparent);
                            fill: none; stroke-linecap: round; }
.fig-plate .fx-needle     { stroke: var(--c-text-3); stroke-width: 2; stroke-linecap: round; }
.fig-plate .fx-limit      { stroke: var(--c-text-3); stroke-width: 1.6; opacity: .8; stroke-linecap: round; }
/* 深度图:撮合那一格。用台阶折线画,不用横条 —— 横条在小尺寸下会被读成几行字。 */
.fig-plate .fx-depth      { fill: color-mix(in srgb, var(--c-border-strong) 16%, transparent); stroke: none; }
.fig-plate .fx-depth-line { fill: none; stroke: color-mix(in srgb, var(--c-border-strong) 70%, transparent);
                            stroke-width: 1.4; stroke-linejoin: round; }
.fig-plate .fx-pin        { stroke: color-mix(in srgb, var(--c-border-strong) 60%, transparent);
                            stroke-width: 1.6; stroke-linecap: round; }

/* ⛔ CSS 的 stroke 会盖掉元素上的 stroke="url(#…)" —— 表现属性优先级最低。
   所以凡是要上渐变的线,必须走这个**不写 stroke 颜色**的类,
   否则渐变静悄悄失效、看上去只是「颜色有点不对」,极难发现。 */
.fig-plate .fx-key-g      { fill: none; stroke-width: 1.75;
                            stroke-linecap: round; stroke-linejoin: round; }

.fig-plate .fx-key        { stroke-linecap: round; stroke-linejoin: round; }
.fig-plate .fx-line,
.fig-plate .fx-line-soft  { stroke-linejoin: round; }

/* ── 环境光:玻璃的前提 ──────────────────────────────────────────
   四节各铺两团大而软的光斑。它有两个作用,缺一不可:
   ① 给 backdrop-filter 一点东西可糊 —— 平底色上开模糊是空转;
   ② 补上那个测出来的问题:--c-canvas 与 --c-surface 对比只有 1.14:1,
      原来那套 .section--m1…m4 底色交替肉眼根本不存在。
   用 background-image 叠加,不碰各节原有的 background-color。 */
#highlights, #edge, #why, #trust { position: relative; }
#highlights {
  background-image:
    radial-gradient(68% 52% at 82% 6%,  color-mix(in srgb, var(--c-primary-500) 15%, transparent), transparent 70%),
    radial-gradient(54% 44% at 6% 74%,  color-mix(in srgb, var(--c-primary-600) 9%,  transparent), transparent 72%);
}
#edge {
  background-image:
    radial-gradient(62% 48% at 10% 10%, color-mix(in srgb, var(--c-primary-500) 13%, transparent), transparent 70%),
    radial-gradient(56% 46% at 92% 64%, color-mix(in srgb, var(--c-primary-600) 8%,  transparent), transparent 72%);
}
#why {
  background-image:
    radial-gradient(74% 40% at 50% 0%,  color-mix(in srgb, var(--c-primary-500) 11%, transparent), transparent 72%);
}
#trust {
  background-image:
    radial-gradient(60% 46% at 88% 8%,  color-mix(in srgb, var(--c-primary-500) 12%, transparent), transparent 70%),
    radial-gradient(52% 42% at 4% 82%,  color-mix(in srgb, var(--c-primary-600) 7%,  transparent), transparent 74%);
}

/* 图例:图下方一排等距的词,和图里的节点一一对应。
   ⚠️ 不写死坐标 —— 中英文词长差一倍,按字数算出来的位置在 i18n 前就是定时炸弹。 */
.fig-legend {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  margin: var(--s-5) 0 0; padding: var(--s-4) 0 0;
  list-style: none;
  border-block-start: 1px solid color-mix(in srgb, var(--c-border-strong) 26%, transparent);
}
.fig-legend li {
  flex: 1 1 auto; min-inline-size: 0;
  font-family: var(--font-mono); font-size: var(--fs-sm);
  letter-spacing: .04em; color: var(--c-text-3);
}

/* ═══ 01 亮点 · 四项服务 → 左右错位的图文带 ═════════════════════
   四项服务是并列的去处,不是第一第二 ⇒ 没有序号。
   照《设计体系 v1》「偏好非对称错位构图,制造动态张力」逐行左右交替。 */
.svc {
  list-style: none; margin: var(--s-9) 0 0; padding: 0;
  display: grid; gap: var(--s-10);
}
.svc__row { position: relative; display: grid; gap: var(--s-5); align-items: center; }
.svc__k { display: grid; gap: var(--s-3); align-content: center; }
.svc__title { font-size: clamp(22px, 1.1rem + 1vw, 30px); font-weight: 700; letter-spacing: -.01em; }
.svc__title a { color: inherit; text-decoration: none; }
/* 整行可点:链接把自己的热区铺满整行,不用再给一个单独的「了解更多」。 */
.svc__title a::after { content: ''; position: absolute; inset: 0; }
/* r27:标题后面那个 → 字形已删。它是 mono 字体的一个箭头字,
   带着 mono 的字距压在中文标题后面,怎么调都是廉价的。
   可点这件事由整行热区 + 悬停时标题变色表达,不靠一个字形提示。 */
.svc__body { margin: 0; color: var(--c-text-2); line-height: 1.85; max-inline-size: 46ch; }

@media (min-width: 900px) {
  .svc { gap: var(--s-11); }
  .svc__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: var(--s-9);
  }
  /* 偶数行:图走左,字走右 —— 错位由此产生 */
  .svc__row--flip .svc__k  { order: 2; }
  .svc__row--flip .svc__fig { order: 1; }
}
.fig-plate {
  transition: border-color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.svc__title a { transition: color var(--dur-2) var(--ease); }
@media (hover: hover) {
  .svc__row:hover .svc__title a { color: var(--c-primary-600); }
  .svc__row:hover .fig-plate {
    border-color: color-mix(in srgb, var(--c-primary-600) 40%, transparent);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--c-text) 10%, transparent),
      0 44px 80px -44px #000;
  }
}

/* ═══ 02 优势 · 交易内核图 + 成本指标带 ═════════════════════════ */
.core { display: grid; gap: var(--s-6); margin-block-start: var(--s-8); }
.core__name { font-size: clamp(24px, 1.2rem + 1.1vw, 34px); font-weight: 700; letter-spacing: -.01em; }
.core__body { margin: var(--s-4) 0 0; color: var(--c-text-2); line-height: 1.9; max-inline-size: 44ch; }
@media (min-width: 900px) {
  .core {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: var(--s-9); align-items: center;
  }
}

/* 成本事实不是两张卡,是一条带 ——
   两条发丝线把它夹成一整条,中间只用一条竖线分,不用框、不用顶边粗线。 */
.costbar {
  margin-block-start: var(--s-9);
  display: grid; gap: var(--s-6);
  padding-block: var(--s-7);
  border-block: 1px solid color-mix(in srgb, var(--c-border-strong) 30%, transparent);
}
.cost__k {
  margin: 0; font-size: clamp(26px, 1.2rem + 1.5vw, 40px); font-weight: 700;
  line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.cost__note {
  margin: var(--s-3) 0 0; font-family: var(--font-mono);
  font-size: var(--fs-sm); letter-spacing: .03em; color: var(--c-text-3);
}
.cost__body { margin: var(--s-4) 0 0; color: var(--c-text-2); line-height: 1.85; max-inline-size: 42ch; }
@media (min-width: 900px) {
  .costbar { grid-template-columns: 1fr 1fr; gap: var(--s-9); }
  .costbar > .cost + .cost {
    padding-inline-start: var(--s-9);
    border-inline-start: 1px solid color-mix(in srgb, var(--c-border-strong) 26%, transparent);
  }
}
.costbar + .spreads__tabs { margin-block-start: var(--s-8); }

/* ═══ 03 为什么选我们 · 横向流程带 ═══════════════════════════════
   这一节是全页唯一真的有先后的内容(规则→分工→留痕→问责)。
   顺序由轴和节点表达,所以这里也不写数字。 */
.hflow { margin-block-start: var(--s-9); }
.hflow__track { position: relative; display: grid; gap: var(--s-7); }
.hflow__step { position: relative; padding-inline-start: var(--s-7); }
.hflow__step::before {
  content: ''; position: absolute; inset-inline-start: 0; inset-block-start: .3em;
  inline-size: 13px; block-size: 13px; border-radius: 50%;
  border: 1px solid var(--c-border-strong); background: var(--c-canvas); z-index: 1;
}
.hflow__step::after {
  content: ''; position: absolute; inset-inline-start: 6px; inset-block-start: calc(.3em + 15px);
  inline-size: 1px; block-size: calc(100% - .3em - 15px + var(--s-7));
  background: var(--c-border-strong); opacity: .42;
}
.hflow__track > .hflow__step:last-child::after { display: none; }
.hflow__step--human::before { border-color: var(--c-accent-500); background: var(--c-accent-500); }
.hflow__title { font-size: var(--fs-h3); font-weight: 700; }
.hflow__body { margin: var(--s-3) 0 0; color: var(--c-text-2); line-height: 1.8; }

@media (min-width: 900px) {
  /* 桌面转成横向:一条水平轴串起四个节点,节点下方是标题与说明。
     横向流程是所有人都认得的形状 —— 上一轮那条纵向链条之所以「诡异」,
     是因为节点内部还分了左右两栏,一条线上挂着两个方向的阅读。 */
  .hflow__track { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
  .hflow__track::before {
    content: ''; position: absolute; inset-inline: 0; inset-block-start: 6px;
    block-size: 1px; background: var(--c-border-strong); opacity: .42;
  }
  .hflow__step { padding-inline-start: 0; padding-block-start: var(--s-6); }
  .hflow__step::before { inset-block-start: 0; }
  .hflow__step::after { display: none; }
}

/* 收束句:不再夹在两条线中间居中 —— 那读起来像一段引文突然插进来。
   它是这一节的落点,所以左对齐、放大、和按钮同处一行的两端。 */
.hflow__close {
  margin-block-start: var(--s-9); padding-block-start: var(--s-7);
  border-block-start: 1px solid color-mix(in srgb, var(--c-border-strong) 30%, transparent);
  display: grid; gap: var(--s-5); align-items: end;
}
.hflow__line {
  margin: 0; font-size: clamp(22px, 1.1rem + 1.2vw, 32px);
  font-weight: 700; line-height: 1.35; letter-spacing: -.01em;
}
@media (min-width: 900px) {
  .hflow__close { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-8); }
}

/* ═══ 04 信任和合规 · 条款分栏(去掉数字,标记换成一道短竖线) ═════ */
.stance { list-style: none; margin: var(--s-9) 0 0; padding: 0; display: grid; }
.stance__row {
  position: relative; display: grid; gap: var(--s-4);
  padding-block: var(--s-8);
  border-block-start: 1px solid color-mix(in srgb, var(--c-border-strong) 26%, transparent);
}
.stance > .stance__row:last-child {
  border-block-end: 1px solid color-mix(in srgb, var(--c-border-strong) 26%, transparent);
}
.stance__k { position: relative; padding-inline-start: var(--s-5); }
.stance__k::before {
  content: ''; position: absolute; inset-inline-start: 0; inset-block: .25em .35em;
  inline-size: 2px; background: var(--sec-ink, var(--c-primary-600)); opacity: .8;
}
.stance__title { font-size: clamp(19px, .95rem + .5vw, 23px); font-weight: 700; line-height: 1.45; }
.stance__lead { margin: 0; color: var(--c-text); font-weight: 500; line-height: 1.75; }
.stance__body { margin: var(--s-3) 0 0; color: var(--c-text-2); line-height: 1.85; }
@media (min-width: 900px) {
  .stance__row { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: var(--s-9); align-items: start; }
  .stance__v { max-inline-size: 62ch; }
}

/* ── 收尾间距:列表和它后面的按钮不能贴太近,否则按钮会被读成最后一项 ── */
.svc + .btn-row, .hflow__close + .btn-row, .stance + .pledge__more { margin-block-start: var(--s-8); }

/* ── 分印插图:01/02/03 已经有自己的图了,不再叠一层分印 ──────────
   04 保留(它在条款行末尾是一片纹,不抢)。 */
.stance__row .ovp-imp { opacity: .42; }
.stance__row .ovp-imp .ovp { inset-inline-end: -48px; inset-block-end: -20px; inline-size: 340px; }
@media (max-width: 899px) {
  .stance__row .ovp-imp { opacity: .26; }
  .stance__row .ovp-imp .ovp { inline-size: 200px; inset-inline-end: -34px; }
}

/* ── 分区带:四节底色差只有 1.14:1,肉眼读作一整块平板。
   在「浮」的两节顶部加一道极淡的落差,滚动才有翻页感。 ── */
.section--m2, .section--m4 { position: relative; }
.section--m2::before, .section--m4::before {
  content: ''; position: absolute; inset-inline: 0; inset-block-start: 0;
  block-size: 180px; pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--c-surface) 70%, transparent), transparent);
}
.section--m2 > .container, .section--m4 > .container { position: relative; }