@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════
   首页 v3 · 2026-09-21 · 委托人六条意见的落地

   这一份**只加不改** home-v2.css —— 引入顺序是 home-v2.css → home-v3.css,
   v2 里 .usp / .qtable / 页脚五栏那几节继续生效,这里不去动它们。

   委托人原话 → 落在哪一节:
     ① 去掉附图                    → §1(图例与图注整套从版面移除,见 build-preview.py 闸三)
     ③ 插图生硬、排版诡异、不要解释 → §1 + §2
     ④ 有些图可否当背景来设计      → §1 .section__bg
     ⑤ 每个模块底色做区分          → §2 .section--m1…m5
     ⑥ 牌照像草图,要监管徽记、卡片/盾牌、滚动形 → §3
     ② 沟通邮箱                    → **不落在首页**。那张表是「哪一页需要留地址时照着挑」
                                      的参照,不是要把 11 个地址都贴出来。首页通篇
                                      没有一处需要地址(投诉处理是页脚的独立页面链接,
                                      法定文本四节也都不留信箱),所以这一版一个都不加。

   ── 色值纪律(沿用 v2 §色值)────────────────────────────────────
   本文件不定义任何新颜色,全部取自 brand/tokens-*.css。
   模块底色只在 --c-surface / --c-canvas / --c-surface-subtle / --c-primary-50
   四个既有槽位里选,并且**每一对前景/底色都进了 check-contrast-v3.py**:
   浅色档 --c-text-2 落在比 #EEF0F1 更暗的底上会掉到 4.5 以下,
   所以 §2 里 m5(最深那一档)把正文前景抬到 --c-text,不是随手配的。
   ══════════════════════════════════════════════════════════════════ */

/* ── §1 模块底纹:图沉到版面下面去 ────────────────────────────────
   v2 里这五张图是版面里的「附图」——一块图 + 一行图例 + 一句图注。
   委托人说得对:图要是得靠一句话解释才读得懂,这张图就不该存在。
   v3 把同样五张图放回它们本来的位置 —— **模块的底**。
   于是它不再要求被读懂,只负责让两个模块看起来不是同一块地方。

   不给 .section 加 overflow:hidden —— c-grid.css 的构件是**骑在模块上缘**的
   (一半在缝上、一半在缝下),裁掉就等于把那套语言砍了一半。
   裁切放在 .section__bg 自己身上。 */

.section {
  position: relative;
  isolation: isolate;
  background: var(--sec-bg, transparent);
}

.section__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.motif--bg {
  position: absolute;
  inset-block: -8%;
  inline-size: 100%;
  block-size: 116%;
  opacity: var(--sec-bg-a, .85);
}

/* 底纹的边缘不许出现一条直边 —— 一出现,它就又变回「一块图」了。
   四向消隐由 mask 承担,强度跟着模块走(靠版心那一侧化得更狠,不压字)。 */
.section__bg {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

/* 图自己那层渐变底与消隐罩是给「一块版」用的,当底纹用会在模块里显出一个方框。
   只留线,不留版。 */
.section__bg .f6-base,
.section__bg .f6-veil { display: none; }

/* 底纹只负责质感,不许参与阅读:线宽跟着放大后还是同一个视重。 */
.section__bg .f6-net-faint,
.section__bg .f6-net,
.section__bg .f6-net-2 { stroke-opacity: .085; }
.section__bg .f6-mesh { stroke-opacity: .10; }
.section__bg .f6-rule,
.section__bg .f6-rule-2,
.section__bg .f6-rule-strong { stroke-opacity: .12; }
.section__bg .f6-datum { stroke-opacity: .16; }
.section__bg .f6-arc,
.section__bg .f6-dot { opacity: .30; }

[data-theme="dark"] .motif--bg { opacity: .62; }

/* 底纹落位:每个模块偏一边,五个模块偏的方向不重样 ——
   这是「区分」的另一半,光靠底色只能分出三档。 */
.section__bg--right .motif--bg { inset-inline-start: 34%; inline-size: 66%; }
.section__bg--left .motif--bg { inset-inline-start: -10%; inline-size: 72%; }
.section__bg--wide .motif--bg { inset-inline-start: 0; inline-size: 100%; }
.section__bg--bottom .motif--bg { inset-block-start: 38%; block-size: 70%; }

@media (max-width: 720px) {
  /* 手机上版心占满整屏,底纹再偏一边就会有半边全空。一律铺满,再压一档。 */
  .section__bg .motif--bg {
    inset-inline-start: 0;
    inline-size: 100%;
  }
  .section__bg { --sec-bg-a: .6; }
}

/* 正文永远在底纹之上 —— .container 本身不定位,z-index 不生效。 */
.section > .container { position: relative; z-index: 1; }

/* ── §2 模块分色:让人一眼知道「换了一块地方」 ────────────────────
   五个模块四种底,加上各自的底纹方向与序号色条,两两相邻绝不同相。
   .section--band(site.css:124)在 v3 里不再使用 —— 底色统一由 --sec-bg 给,
   两套机制并存会打架。 */

.section--m1 { --sec-bg: var(--c-canvas);         --sec-ink: var(--c-primary-600); }
.section--m2 { --sec-bg: var(--c-surface-subtle); --sec-ink: var(--c-accent-500); }
.section--m3 { --sec-bg: var(--c-surface);        --sec-ink: var(--c-primary-600); }
.section--m4 { --sec-bg: var(--c-surface-subtle); --sec-ink: var(--c-accent-500); }
.section--m5 { --sec-bg: var(--c-primary-50);     --sec-ink: var(--c-primary-600); }

/* m4 与 m2 同底,所以 m4 走一层纵向渐变把自己分出来 ——
   两端都不比 #EEF0F1 更暗,对比度不动。 */
.section--m4 {
  background: linear-gradient(to bottom, var(--c-surface-subtle), var(--c-canvas) 62%, var(--c-surface-subtle));
}

/* m5 是全页最深的一档(--c-primary-50)。浅色档 --c-text-2 落上去是 4.28,
   不够 4.5 —— 所以这一节的次级文字整体抬到 --c-text。
   这不是「调深一点好看」,是 check-contrast-v3.py 里解出来的。 */
.section--m5 .btn-note,
.section--m5 .body,
.section--m5 p { color: var(--c-text); }

/* 模块的分界:上缘一条实线 + 一段模块色的短杠(与 c-grid 的构件同格距,
   不新增第三种构件,只是给它上了模块色)。 */
.section--mark { border-block-start: 1px solid var(--c-border); }

.section__no {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .12em;
  color: var(--c-text-2);
}
.section__no::before {
  content: "";
  inline-size: var(--s-6);
  block-size: 3px;
  background: var(--sec-ink, var(--c-primary-600));
}

/* 卡面坐在带色的底上时要浮起来,否则 m2 / m4 / m5 上的白卡会糊成一片。 */
.section--m2 .card,
.section--m4 .card,
.section--m5 .card,
.section--m2 .usp__item,
.section--m4 .usp__item { box-shadow: var(--sh-1); }

/* ── §3 牌照:徽记 · 盾牌卡 · 滚动带 ──────────────────────────────
   v2 那一版是两张网格、六个方框 —— 委托人说「很像草图」,是准的:
   它把牌照当成了一条一条的文字记录来排,没有给它任何「凭证」的形。

   v3 的形是**盾**。盾是凭证类信息几百年来的容器,不用解释就读得懂,
   正好接上 §1 那条「图不该需要解释」。

   ⚠️ 盾里那块是**徽记位**,不是监管机构的官方 logo。
      官方 logo 属各监管机构所有,用在商业网站上要走授权;在拿到授权之前
      这里放的是机构缩写的字标。授权下来后,把 <span class="crest__abbr">
      换成 <img> 即可,盾的尺寸与留白是按 logo 的安全区留的,不用改样式。 */

.lic {
  margin-block-start: var(--s-7);
}

/* 分组筛选:已持牌 / 申请中的区分是合规口径,不能只靠卡上的小字。
   做成可操作的段控,点一下就只剩那一组 —— 比一句话更难被忽略。 */
.lic__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-block-end: var(--s-5);
}
.lic__filterlabel {
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  margin: 0 var(--s-2) 0 0;
}
.lic__seg {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: var(--s-2) var(--s-4);
  color: var(--c-text-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-0);
  transition: color var(--dur-1) var(--ease),
              background-color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}
.lic__seg:hover { color: var(--c-text); }
.lic__seg[aria-pressed="true"] {
  color: var(--c-on-primary);
  background: var(--c-primary-600);
  border-color: var(--c-primary-600);
}
.lic__count {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
}

/* 滚动带本体。横向滚 + 吸附,右侧永远露出下一张的一角 —— 那一角就是
   「还有」的信号,比一个箭头更早被看见。 */
.rail {
  position: relative;
}
.rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 300px);
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: var(--s-1) 0 var(--s-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--s-1);
  scrollbar-width: thin;
}
.rail__track > * { scroll-snap-align: start; }
.rail__track::-webkit-scrollbar { block-size: 6px; }
.rail__track::-webkit-scrollbar-thumb { background: var(--c-border-strong); }
.rail__track::-webkit-scrollbar-track { background: var(--c-divider); }

.rail__nav {
  display: flex;
  gap: var(--s-2);
  justify-content: flex-end;
  margin-block-start: calc(var(--s-3) * -1);
}
.rail__btn {
  appearance: none;
  cursor: pointer;
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-0);
  transition: background-color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.rail__btn svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.rail__btn:hover { background: var(--c-surface-subtle); }
.rail__btn[disabled] { opacity: .35; cursor: default; }

/* 牌照卡 —— 2026-09-23 换真 logo 版 ────────────────────────────────
   委托人拍板:上监管机构的**真实标识**,整块做精致。
   §3 那段注解里写的迁移路径("授权下来后把 crest__abbr 换成 img,盾的留白
   是按 logo 安全区留的")到此执行完毕,手绘盾与缩写字标一并退场。

   为什么不再是盾:盾是我们自己画的形,六个法域共用一个形,
   看久了会发现它其实没有携带任何一家机构的信息。真标识自带辨识度,
   再套一层我们画的外壳反而是噪声。

   ⚠️ 六枚标识全是深墨稿(FSCA 纯黑 / CySEC 深蓝 / FSC 深蓝 / CMA 墨绿
   / ASIC 藏蓝 / FSA 深蓝),在本站深底上直接放会糊成一团。
   所以给它们一块**浅底版面**——这既是能看清的唯一办法,
   也正好是第三方标识的通行用法:不改色、不描边、留足四周留白。 */
.crest {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding-block-end: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-block-start: 3px solid var(--crest-ink, var(--c-border-strong));
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
/* 上浮 4px:设计规矩明写的数,原为 2px。 */
.crest:hover { box-shadow: var(--sh-2); transform: translateY(-4px); }
.crest[hidden] { display: none; }

.crest--held { --crest-ink: var(--c-primary-600); }
.crest--pending { --crest-ink: var(--c-border-strong); }

/* 卡片不再整块内缩 —— logo 版要满幅,所以缩进由文字自己承担。 */
.crest > :not(.crest__plate) { padding-inline: var(--s-5); }

.crest__plate {
  display: grid;
  place-items: center;
  block-size: 112px;
  padding: var(--s-4) var(--s-5);
  background: #FFFFFF;
  border-block-end: 1px solid var(--c-border);
  margin-block-end: var(--s-1);
}
/* 六枚标识长宽比从 1.42 到 4.53。给同一个高度会一大一小,
   所以逐枚定高(写在标记里的 --logo-h),这里只负责不许变形、不许溢出。 */
.crest__logo {
  display: block;
  block-size: var(--logo-h, 48px);
  inline-size: auto;
  max-inline-size: 100%;
  object-fit: contain;
}
/* 申请中:**不改标识本身的颜色**(改色等于篡改他人标识),
   只压低整块版面的存在感,让「还没拿到」在一眼之内读得出来。 */
.crest--pending .crest__plate { background: #E9EDEE; }
.crest--pending .crest__logo { opacity: .72; }

.crest__status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  justify-self: start;
  margin: 0;
  padding: var(--s-1) var(--s-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .02em;
}
.crest--held .crest__status {
  color: var(--c-on-primary);
  background: var(--c-primary-600);
}
.crest--pending .crest__status {
  color: var(--c-text);
  background: transparent;
  border: 1px solid var(--c-border-strong);
}
.crest__status svg { inline-size: 14px; block-size: 14px; fill: none; stroke: currentColor; stroke-width: 2; }

.crest__place {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--c-text);
}
.crest__auth {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin: calc(var(--s-2) * -1) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}
/* 缩写做成一枚小牌:它是机构的正式简称,不是正文的一部分,
   排成同一行小字会被当成句子读下去。 */
.crest__abbr {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 1px 6px;
  color: var(--c-text-2);
  border: 1px solid color-mix(in srgb, var(--c-border-strong) 55%, transparent);
}
.crest__body {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-2);
}

.rail__empty {
  margin: 0;
  padding: var(--s-6) 0;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

/* 节头:这一块以前直接从段控开始,没有名字。
   给它一个题,整块才从「一排卡片」变成一个有出处的披露单元。 */
.lic__head { margin-block-end: var(--s-4); }
.lic__eyebrow {
  margin: 0 0 var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-accent-700);
}
.lic__title {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--c-text);
}

@media (min-width: 900px) {
  .rail__track { grid-auto-columns: 300px; }
}

/* ── §5 收拾 ──────────────────────────────────────────────────────
   v2 的 .figmark / .figblock 在 v3 的版面里不存在,但 figures-r6*.css 仍被引入
   (底纹要用它那套 f6-* 笔法)。留一条兜底,防止后来的人手写一个 .figmark
   又把附图带回来 —— 它会直接不可见,而不是悄悄渲出来。 */
.section .figmark,
.section .figblock,
.section .figure__keys,
.section .figure__cap { display: none !important; }