@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════
   服务页 · 交易平台模块 · 双端支持 · 2026-09-23 r25
   委托人反馈:「不要是两个卡片,无边框,标题居中;web 和 App 有一种交叠
   居中的感觉,然后两边再有各自的小标签」。
   ⇒ r24 的两张 .dual__card 整个撤掉:改成**一组交叠的居中主视觉**
     (网页端截图打底、手机图压在右下角),下面一行两侧各挂一个小标签。

   ⚠️ 一个色值都没新造 —— 全部来自 tokens-dark.css 或 color-mix 自它。
   ⚠️ 截图仍保留一条发丝边:那是画面本身的边界,不是卡片外框。深色站上
      去掉它,截图会和背景糊成一片,读不出这是一块屏幕。
   ⚠️ 商店 badge 里的苹果 / 安卓标记是**简化示意**,二维码是**示意图**。
      正式对外前必须换成官方 badge 素材与真实下载码。
   ⚠️ 商店地址到手后:`retu-links-r20.js` 加 ios/android 两行,
      把 `<button>` 换回 `<a href>` 即可,样式不用动。
   ══════════════════════════════════════════════════════════════════ */

/* ── §1 版块头:居中 ───────────────────────────────────────────── */
.dual { margin-block-start: var(--s-7); }
.dual__head {
  margin-block-end: var(--s-6);
  text-align: center;
  max-inline-size: 58ch;
  margin-inline: auto;
}
.dual__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-text);
  margin: 0 0 var(--s-2);
}
.dual__sub { color: var(--c-text-2); font-size: var(--fs-body); line-height: 1.7; margin: 0; }

/* ── §2 交叠主视觉 ─────────────────────────────────────────────
   网页端截图让出右侧一条,手机图压在那条上 —— 两者真的重叠,
   不是并排放近一点。整组在容器里居中。 */
.dual__stage {
  position: relative;
  max-inline-size: 1000px;
  margin-inline: auto;
  /* 手机比截图高、且要探出下缘,所以下方先留出它探出的那一截 */
  padding-block-end: 5%;
}

.dual__shot {
  display: block;
  inline-size: 86%;
  block-size: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: 0 26px 64px rgb(0 0 0 / .52);
}

.dual__phone {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 0;
  inline-size: 21%;
  block-size: auto;
  /* 手机压在截图之上,所以要比截图更"近"一层:更硬的投影 + 一圈微光 */
  filter: drop-shadow(0 18px 38px rgb(0 0 0 / .62));
}

/* 手机落点那一圈极淡的光,让交叠处不是硬碰硬 */
.dual__stage::after {
  content: "";
  position: absolute;
  inset-inline-end: -4%;
  inset-block-end: -6%;
  inline-size: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--c-accent-500) 16%, transparent), transparent);
  pointer-events: none;
  z-index: -1;
}

/* ── §3 两侧小标签 ─────────────────────────────────────────────
   左边挂网页端、右边挂移动端,各自只带一件事可做。 */
.dual__tags {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5) var(--s-6);
  align-items: start;
  margin-block-start: var(--s-6);
}
.dual__tag { display: grid; gap: var(--s-3); justify-items: start; }
.dual__tag--app { justify-items: end; text-align: end; }

.dual__kind {
  display: flex; align-items: center; gap: var(--s-2);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--dual-c) 78%, var(--c-text-2));
}
.dual__tag--web { --dual-c: var(--c-primary-600); }
.dual__tag--app { --dual-c: var(--c-accent-500); }

.dual__icon {
  inline-size: 18px; block-size: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.dual__desc { color: var(--c-text-2); font-size: var(--fs-body); line-height: 1.7; margin: 0; }

/* ── §4 移动端那一侧:扫码 + 商店入口 ─────────────────────────── */
.dual__get { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; justify-content: flex-end; }

.dual__qr { display: grid; gap: 4px; justify-items: center; flex: none; }
/* 和详情页 .qd__qr-img 同一套做法:重度模糊 + 旁边明写「即将上线」,免得有人真去扫 */
.dual__qr-img { inline-size: 64px; block-size: 64px; display: block; filter: blur(2.6px); opacity: .55; }
.dual__qr-bg { fill: var(--c-text); }
.dual__qr-fg { fill: var(--c-surface); }
.dual__qr-tag { margin: 0; font-size: var(--fs-sm); color: var(--c-text-3); white-space: nowrap; }

.dual__stores { display: grid; gap: var(--s-2); }
.dual__badge {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 8px 14px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--c-surface) 80%, var(--c-canvas));
  color: var(--c-text-2);
  text-decoration: none;
  line-height: 1.15;
  font: inherit;
  cursor: pointer;
  text-align: start;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.dual__badge svg { inline-size: 20px; block-size: 20px; flex: none; fill: currentColor; }
.dual__badge b { display: block; font-size: 13px; font-weight: 600; color: var(--c-text); }
.dual__badge small { display: block; font-size: 9.5px; letter-spacing: .05em; color: var(--c-text-3); }
.dual__badge:hover,
.dual__badge:focus-visible {
  border-color: color-mix(in srgb, var(--c-accent-500) 60%, var(--c-border-strong));
  background: color-mix(in srgb, var(--c-accent-500) 10%, var(--c-surface));
}

/* 点了(或键盘聚焦、鼠标悬停)才冒出来的一句话。纯 CSS,不需要脚本。
   App 还没上架,跳一个不存在的商店页比不跳更糟,所以按下去原地说清楚。 */
.dual__soon {
  position: absolute;
  inset-block-end: calc(100% + 8px);
  inset-inline-start: 50%;
  translate: -50% 4px;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  background: var(--c-accent-50);
  border: 1px solid color-mix(in srgb, var(--c-accent-500) 52%, transparent);
  color: var(--c-accent-700);
  font-size: var(--fs-sm);
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-1) var(--ease), translate var(--dur-1) var(--ease);
}
/* is-soon 由 dual-soon-r24.js 在点击时挂上,钉住 2.6 秒 ——
   手机上没有 hover、:active 手指一抬就没,只靠 CSS 提示会闪一下就消失。 */
.dual__badge:hover .dual__soon,
.dual__badge:focus .dual__soon,
.dual__badge:active .dual__soon,
.dual__badge.is-soon .dual__soon {
  opacity: 1;
  translate: -50% 0;
}

/* ── §5 窄屏 ───────────────────────────────────────────────────
   交叠照旧(它是这一版的主意),但两个标签改成上下排、一律左对齐 ——
   窄屏上右对齐的一列读起来要来回扫。 */
@media (max-width: 719px) {
  .dual__head { margin-block-end: var(--s-5); }
  .dual__tags { grid-template-columns: 1fr; gap: var(--s-5); }
  .dual__tag--app { justify-items: start; text-align: start; }
  .dual__get { justify-content: flex-start; }
  .dual__stores { grid-template-columns: 1fr 1fr; }
  .dual__badge { justify-content: center; }
  /* 按钮贴着屏幕边时提示挂上方容易被切 —— 改挂正下方。 */
  .dual__soon { inset-block-end: auto; inset-block-start: calc(100% + 8px); }
}

@media (prefers-reduced-motion: reduce) {
  .dual__soon { transition: none; }
}

/* 服务页 #trading:双端主视觉上移到标题下、五项能力下沉 */
.dual--lead { margin-block-start: var(--s-4); }
.rail--below { margin-block-start: var(--s-8, var(--s-7)); }

/* #trading 版块头居中(含眉题那条短线) */
#trading .section__head { text-align: center; }
#trading .section__head .eyebrow { display: flex; align-items: center; justify-content: center; }
#trading .section__head .lead { margin-inline: auto; }
#trading .section__head h2 { max-inline-size: none; margin-inline: auto; }


/* ══════════════════════════════════════════════════════════════════
   #trading · 五项能力标签 · 2026-10-09(第二版:浮层标签)
   委托人:「不要圈具体领域……做成浮层的标签插进去就可以。买入卖出怎么会是交易一致性?
            风控怎么可能只展示在账户余额和保证金那个领域?」
   ⇒ 这五项是平台级能力,不对应界面上的某一块。所以:
      · 不画高亮框、不拉线、不钉点 —— 标签与界面里任何一块都不建立「指向」关系;
      · 标签是浮在产品图外缘的一层铭牌,各自缓慢起伏,不朝向任何一块界面(边框四边等粗)。
   ⚠️ 坐标用 cqw(= 本层宽度的 1%),与 §2 的 .dual__stage(宽 min(1000px, 容器)、高 ×.5875)一一对应。
   ⚠️ 配色只用站内 token;动效对设计体系 v1:进场 = 淡入 + 位移 200–300ms ease-out,
      常驻只有一个 —— 缓慢上下浮动 ≤5px。
   ⚠️ 触发:assets/trading-chips.js 给 .dual--lead 置 data-tc="1"。脚本没跑 / 减少动态效果 = 直接静态落位。
   ══════════════════════════════════════════════════════════════════ */
.dual--lead { position: relative; }

/* §2 的 padding-block-end:5% 是按「.dual 的宽」算的,容器比 1000px 宽时舞台会比 .5875×宽 高出几 px,
   覆盖层的 cqw 坐标就对不上。改成按舞台自己的宽高比定高(1000 : 587.5,与 §2 同值),手机仍贴右下。 */
.dual--lead .dual__stage { padding-block-end: 0; aspect-ratio: 1000 / 587.5; }

/* ── 标签本体(窄屏默认:图下一排) ─────────────────────────────── */
.tchips {
  position: static;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-2);
  margin: var(--s-4) 0 0; padding: 0;
  list-style: none;
}
.tchip { position: static; margin: 0; list-style: none; }
.tchip__in {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; letter-spacing: .02em;
  white-space: nowrap;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid color-mix(in srgb, var(--c-accent-500) 46%, var(--c-border-strong));
  border-radius: var(--r-sm);
  box-shadow: 0 10px 24px rgb(0 0 0 / .46), 0 0 18px color-mix(in srgb, var(--c-accent-500) 16%, transparent);
}
.tchip__in::before {
  content: ""; flex: none;
  inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: var(--c-accent-500);
}
[data-theme="light"] .tchip__in {
  box-shadow: 0 8px 20px rgb(1 7 17 / .13), 0 1px 2px rgb(1 7 17 / .08);
}

/* ── 宽屏:标签浮在产品图外缘,压住图边 10–14px,像一层盖上去的铭牌 ──
   ≥1400px:舞台两侧各有 ≥ 190px 的空地,放得下最长的英文标签。 */
@media (min-width: 1400px) {
  .dual--lead { margin-block-start: var(--s-6); }

  .tchips {
    position: absolute;
    inset-block-start: 0; inset-inline: 0; margin: 0 auto;
    inline-size: min(1000px, 100%);
    aspect-ratio: 1000 / 587.5;
    container-type: inline-size;
    display: block;
    z-index: 2;
    pointer-events: none;
  }
  .tchip { position: absolute; pointer-events: auto; }

  .tchip[data-k="price"]   { inset-inline-start: 50cqw;  inset-block-start: 0;      translate: -50% -50%; --dx: 0px;   --dy: -30px; }
  .tchip[data-k="risk"]    { inset-inline-start: calc(100cqw - 10px); inset-block-start: 12cqw;   translate: 0 -50%; --dx: 36px;  --dy: 0px; }
  .tchip[data-k="asset"]   { inset-inline-end:   calc(100cqw - 10px); inset-block-start: 20cqw;   translate: 0 -50%; --dx: -36px; --dy: 0px; }
  .tchip[data-k="consist"] { inset-inline-start: calc(100cqw - 10px); inset-block-start: 40cqw;   translate: 0 -50%; --dx: 36px;  --dy: 0px; }
  .tchip[data-k="trace"]   { inset-inline-end:   calc(100cqw - 10px); inset-block-start: 43cqw;   translate: 0 -50%; --dx: -36px; --dy: 0px; }

  /* 缓慢上下浮动:用独立的 translate 属性,不与进场用的 transform 打架;负延迟让五枚相位错开 */
  .tchip__in { animation: tc-float 6.4s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -1.3s); }
}

@media (max-width: 719px) {
  .tchips { gap: 6px; margin-block-start: var(--s-3); }
  .tchip__in { padding: 6px 11px; font-size: 13px; }
}

@keyframes tc-float {
  from { translate: 0 -3px; }
  to   { translate: 0 3px; }
}

/* ── 入场(只在脚本置了 data-tchips 之后才有「起点」;否则就是终态) ───────── */
html[data-tchips] .tchip__in { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 14px)); }
html[data-tchips] .dual--lead[data-tc="1"] .tchip__in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
  transition-delay: calc(var(--i, 0) * 160ms + 200ms);
}

@media (prefers-reduced-motion: reduce) {
  .tchip__in { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
}