/* ==========================================================================
   app.css —— NOVA 排版与模块层（替代 motion-kit 的 base.css）
   --------------------------------------------------------------------------
   本站与前两站的模块差异（刻意重组，不是换皮）：
     · 导航   顶部横条  →  左侧竖排导轨 rail + 顶部极简状态条
     · 首屏   左文右图  →  全屏居中巨型字 + 波纹网格 canvas + 底部滚动条带
     · 网格   等分 grid →  Bento 不规则网格
     · 流程   横向 pin  →  Sticky 堆叠卡片（新增）+ 全屏画廊式横向 pin（改造）
     · 图文   左右两栏  →  左侧粘性索引 + 右侧长列表
     · 结尾   揭示页脚  →  全屏 CTA + 巨型磁性按钮
   ========================================================================== */

/* ==========================================================================
   0. Reset / 基础
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* overflow-x:clip 而不是 hidden：
   入场位移（data-fx=left/right）会在动画播放前把元素推出视口，
   body 的 overflow-x:hidden 在 Chromium 下拦不住根滚动，clip 才能彻底收敛。 */
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: auto;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, ul { margin: 0; }
ul { list-style: none; padding: 0; }
::selection { background: var(--brand); color: #fff; }

/* 引擎接管前先隐藏，避免"先看到内容再跳一下"；引擎挂了则照常可见 */
html.m-js:not(.m-ready) .m-fx { visibility: hidden; }

/* 暗色滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #24243a; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* ==========================================================================
   1. 布局骨架：左侧导轨 + 右侧主体
   ========================================================================== */
.shell { padding-left: var(--rail); }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.sec { position: relative; padding-block: var(--sec-y); }
.sec--tight { padding-block: calc(var(--sec-y) * 0.6); }
.sec--flat { padding-block: 0; }
.sec--paper { background: var(--paper); color: var(--on-paper); }
.sec--b2 { background: var(--bg-2); }

/* 区块顶部细分隔线（暗色下比留白更能分层） */
.sec--line::before {
  content: '';
  position: absolute; inset: 0 var(--pad-x) auto;
  height: 1px; background: var(--line);
}

/* 网格：所有子项 min-width:0，避免超宽内容（Swiper/长串英文）撑爆轨道
   —— 这是前两站踩过的 grid blowout 坑，必须保留 */
.grid { display: grid; gap: var(--gap); }
.grid > * { min-width: 0; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.row { display: flex; flex-wrap: wrap; gap: var(--gap); }
.row > * { min-width: 0; }

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 18px; }
.mt-3 { margin-top: 34px; }
.mt-4 { margin-top: 56px; }
.muted { color: var(--ink-3); }
.center { text-align: center; }

/* ==========================================================================
   2. 通用文字组件
   ========================================================================== */
/* 可读性：标题优雅换行 + 段落避免孤字（渐进增强，旧浏览器忽略） */
.h1, .h2, .h3, .hero__t { text-wrap: balance; }
.lead, .hero__sub { text-wrap: pretty; }

.tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-2);
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.03);
}
.tag::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand-2); box-shadow: var(--glow-2);
}
.sec--paper .tag { color: var(--brand); border-color: rgba(0,0,0,.14); background: rgba(0,0,0,.03); }

.h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.06; font-weight: 700; letter-spacing: -0.02em; }
.h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.14; font-weight: 700; letter-spacing: -0.015em; }
.h3 { font-size: var(--fs-h3); line-height: 1.32; font-weight: 600; }
.lead { font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.75; }
.sec--paper .lead { color: var(--on-paper-2); }
.mono { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase; }

/* 霓虹渐变字 */
.grad {
  background: var(--grad-tri);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* 描边字（暗色下非常出效果） */
.stroke {
  color: transparent;
  -webkit-text-stroke: 1px var(--ink-4);
}

/* 区块大编号 */
.sec__no {
  position: absolute; top: calc(var(--sec-y) * 0.42); right: var(--pad-x);
  font-family: var(--font-mono); font-size: clamp(3rem, 8vw, 7rem);
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.32);
  line-height: 1; pointer-events: none; user-select: none;
}

/* ==========================================================================
   3. 按钮
   ========================================================================== */
.btn {
  --bh: 54px;
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  height: var(--bh); padding: 0 26px;
  border-radius: var(--r-pill);
  font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0.02em;
  border: 1px solid var(--line-2);
  color: var(--ink);
  overflow: hidden; isolation: isolate;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn i.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-2); box-shadow: var(--glow-2); }
/* hover：渐变从底部涌上来 */
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-brand);
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease);
}
.btn:hover { color: #08080f; border-color: transparent; }
.btn:hover i.dot { background: #08080f; box-shadow: none; }
.btn:hover::before { transform: translateY(0); }

.btn--solid { background: var(--grad-brand); color: #08080f; border-color: transparent; }
.btn--solid::before { background: #fff; }
.btn--ghost { border-color: var(--line); color: var(--ink-2); }

/* 文字链接：下划线由左扫入 */
.tlink {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--brand-2);
  padding-bottom: 3px; position: relative;
}
.tlink::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.tlink:hover::after { transform: scaleX(1); transform-origin: left; }
.tlink span.arw { transition: transform var(--dur-fast) var(--ease); }
.tlink:hover span.arw { transform: translateX(5px); }

/* ==========================================================================
   4. 占位图（本站不用任何图片文件，全部程序化生成）
   ========================================================================== */
.ph {
  position: relative; width: 100%; height: 100%;
  min-height: 160px; overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(120% 90% at 18% 8%, color-mix(in srgb, var(--brand) 42%, transparent) 0%, transparent 58%),
    radial-gradient(110% 100% at 88% 92%, color-mix(in srgb, var(--brand-2) 34%, transparent) 0%, transparent 60%),
    linear-gradient(150deg, #171728 0%, #0c0c18 100%);
}
/* 叠一层网格纹，避免大色块显得空 */
.ph::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(85% 85% at 50% 50%, #000 20%, transparent 100%);
  opacity: 0.7;
}
.ph__t {
  position: absolute; left: 16px; bottom: 14px; z-index: 2;
  font-family: var(--font-mono); font-size: var(--fs-tag);
  letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase;
}
.ph--alt { background:
    radial-gradient(120% 90% at 82% 12%, color-mix(in srgb, var(--brand-3) 40%, transparent) 0%, transparent 58%),
    radial-gradient(110% 100% at 10% 88%, color-mix(in srgb, var(--brand) 34%, transparent) 0%, transparent 62%),
    linear-gradient(150deg, #1b1226 0%, #0c0c18 100%); }

/* ==========================================================================
   5. 左侧竖排导轨（本站独有，替代顶部横条导航）
   ========================================================================== */
.rail {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 60;
  width: var(--rail);
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between;
  padding: 20px 0 22px;
  border-right: 1px solid var(--line);
  background: rgba(5, 5, 11, 0.72);
  backdrop-filter: blur(14px);
}
.rail__logo {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--grad-brand); color: #08080f;
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  box-shadow: var(--glow);
}
/* 竖排菜单：文字旋转 90° */
.rail__nav { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.rail__nav a {
  writing-mode: vertical-rl;
  font-family: var(--font-mono); font-size: 0.86rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease);
  position: relative; padding: 4px 0;
}
.rail__nav a::before {
  content: ''; position: absolute; left: -9px; top: 50%; transform: translateY(-50%) scale(0);
  width: 4px; height: 4px; border-radius: 50%; background: var(--brand-2);
  box-shadow: var(--glow-2);
  transition: transform var(--dur-fast) var(--ease);
}
.rail__nav a:hover, .rail__nav a.is-on { color: var(--ink); }
.rail__nav a:hover::before, .rail__nav a.is-on::before { transform: translateY(-50%) scale(1); }

.rail__soc { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.rail__soc i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-4);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.rail__soc i:hover { background: var(--brand); transform: scale(1.6); }

/* 竖排滚动进度线 */
.rail__prog {
  position: absolute; left: -1px; top: 0; width: 2px; height: 0%;
  background: var(--grad-brand); box-shadow: var(--glow-2);
}

/* ==========================================================================
   6. 顶部极简状态条
   ========================================================================== */
.topbar {
  position: fixed; top: 0; left: var(--rail); right: 0; z-index: 55;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: clamp(16px, 3vw, 42px);
  font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.topbar.is-solid {
  background: rgba(5, 5, 11, 0.82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.topbar__l, .topbar__r { display: flex; align-items: center; gap: 18px; }
.topbar__live { display: inline-flex; align-items: center; gap: 7px; color: var(--brand-2); }
.topbar__live b {
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand-2);
  animation: pulse 1.9s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.topbar__cta {
  padding: 8px 16px; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  color: var(--ink); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.topbar__cta:hover { background: var(--brand); border-color: var(--brand); color: #08080f; }

/* ==========================================================================
   7. 开屏 Loading —— 网格块交错消散（前两站是分栏幕布上撕）
   ========================================================================== */
.loader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  display: grid; place-items: center;
  overflow: hidden;
}
/* 底层：5×3 网格块，逐块消散 */
.loader__grid {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.loader__grid span {
  background: var(--bg-2);
  border-right: 1px solid rgba(255,255,255,.035);
  border-bottom: 1px solid rgba(255,255,255,.035);
}
.loader__in { position: relative; z-index: 2; text-align: center; }
.loader__mark {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 8vw, 6rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  display: flex; gap: 0.02em; overflow: hidden;
}
.loader__mark b { display: inline-block; font-weight: 800; transform: translateY(110%); }
.loader__mark b.on { background: var(--grad-tri); -webkit-background-clip: text; background-clip: text; color: transparent; }
.loader__meta {
  margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--font-mono); font-size: var(--fs-tag);
  letter-spacing: 0.2em; color: var(--ink-3); text-transform: uppercase;
}
.loader__num { color: var(--brand-2); }
.loader__bar { width: 180px; height: 2px; background: rgba(255,255,255,.10); overflow: hidden; }
.loader__bar i { display: block; height: 100%; width: 0%; background: var(--grad-brand); }
/* 中心扩散的光圈 */
.loader__ring {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: 40vmax; height: 40vmax; margin: -20vmax 0 0 -20vmax;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 30%, transparent) 0%, transparent 62%);
  transform: scale(0.2); opacity: 0;
}

/* ==========================================================================
   8. Hero —— 全屏居中巨型字（前两站是左文右图）
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--nav-h);
  padding-inline: clamp(18px, 5vw, 40px);
  overflow: hidden;
}
.hero__cv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.9; }
/* 顶部/底部渐隐，让 canvas 与页面自然衔接 */
.hero::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 42%;
  background: var(--grad-fade); z-index: 1; pointer-events: none;
}
.hero__glow {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: min(1100px, 90vw); aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 26%, transparent) 0%, transparent 62%);
  filter: blur(30px); z-index: 0; pointer-events: none;
}
.hero__in { position: relative; z-index: 3; text-align: center; }

.hero__eye {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.9rem;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-2);
  margin-bottom: clamp(18px, 3vh, 34px);
}
.hero__eye i { width: 34px; height: 1px; background: var(--line-2); }

.hero__t {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  font-weight: 800; line-height: 0.92; letter-spacing: -0.045em;
  text-transform: uppercase;
}
.hero__t .ln { display: block; }
/* 第二行做描边，与实心行形成强对比 */
.hero__t .ln--stroke { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.72); }
.hero__t em { font-style: normal; background: var(--grad-tri); -webkit-background-clip: text; background-clip: text; color: transparent; }

.hero__sub {
  max-width: 620px; margin: clamp(22px, 3.4vh, 40px) auto 0;
  font-size: var(--fs-lead); color: var(--ink-2);
}
.hero__act { margin-top: clamp(26px, 3.6vh, 44px); display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* 首屏底部：横向滚动信息带（替代前两站的 2×2 数据网格） */
.hero__ticker {
  position: relative; z-index: 3;
  margin-top: auto;
  border-top: 1px solid var(--line);
  background: rgba(5,5,11,.5);
  backdrop-filter: blur(8px);
}
.scroll-cue {
  position: absolute; left: 50%; bottom: 88px; transform: translateX(-50%); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--fs-tag); letter-spacing: 0.2em; color: rgba(255,255,255,.6);
}
.scroll-cue i { width: 1px; height: 40px; background: linear-gradient(var(--brand-2), transparent); }

/* ==========================================================================
   9. 跑马灯（引擎要求：容器 [data-marquee] > .marquee__g）
   ========================================================================== */
.marquee { display: flex; overflow: hidden; white-space: nowrap; }
.marquee__g { display: flex; flex: 0 0 auto; align-items: center; }
.marquee__i {
  display: inline-flex; align-items: center; gap: 22px;
  padding: 15px 26px;
  font-family: var(--font-mono); font-size: var(--fs-tag);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3);
}
.marquee__i i { width: 4px; height: 4px; border-radius: 50%; background: var(--brand); }
.marquee__i b { color: var(--ink); font-weight: 500; }

/* 巨型描边跑马灯 */
.marquee--big .marquee__i {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 8.5rem);
  font-weight: 800; letter-spacing: -0.03em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.32);
  padding: 0 34px; gap: 34px;
  transition: -webkit-text-stroke-color var(--dur) var(--ease);
}
.marquee--big .marquee__i em {
  font-style: normal; -webkit-text-stroke: 0;
  background: var(--grad-tri); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.marquee--big:hover .marquee__i { -webkit-text-stroke-color: var(--brand); }

/* ==========================================================================
   10. 数字统计带（横向一条，替代前两站的 2×2 网格）
   ========================================================================== */
.statband {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--line);
}
.statband > div {
  padding: clamp(30px, 4.4vw, 56px) clamp(18px, 2.4vw, 40px);
  border-right: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.statband > div:last-child { border-right: 0; }
/* hover 时底部霓虹线扫过 */
.statband > div::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--grad-brand); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.statband > div:hover::after { transform: scaleX(1); }
.statband b {
  display: block; font-family: var(--font-display); font-size: var(--fs-num);
  font-weight: 800; line-height: 1; letter-spacing: -0.03em;
  background: var(--grad-tri); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.statband span { display: block; margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-3); }
.statband u {
  display: block; margin-top: 4px; text-decoration: none;
  font-family: var(--font-mono); font-size: var(--fs-tag); letter-spacing: .14em; color: var(--ink-4);
}

/* ==========================================================================
   11. Bento 不规则网格（替代前两站的等分 grid）
   ========================================================================== */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(210px, auto);
  gap: var(--gap);
}
.bento > * { min-width: 0; }
.bx {
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--grad-card);
  padding: clamp(22px, 2.2vw, 34px);
  display: flex; flex-direction: column;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* hover：霓虹描边 + 内部光晕跟随 */
.bx::before {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--brand) 20%, transparent) 0%, transparent 62%);
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.bx:hover { border-color: var(--line-glow); transform: translateY(-3px); }
.bx:hover::before { opacity: 1; }

.bx--w2 { grid-column: span 2; }
.bx--w3 { grid-column: span 3; }
.bx--h2 { grid-row: span 2; }
.bx--fill { padding: 0; }
.bx--brand { background: var(--grad-brand); color: #08080f; border-color: transparent; }
.bx--brand .bx__d, .bx--brand .mono { color: rgba(8,8,15,.68); }
.bx--paper { background: var(--paper); color: var(--on-paper); border-color: transparent; }
.bx--paper .bx__d { color: var(--on-paper-2); }

.bx__no {
  font-family: var(--font-mono); font-size: var(--fs-tag);
  letter-spacing: .18em; color: var(--brand-2); margin-bottom: auto;
}
.bx--brand .bx__no, .bx--paper .bx__no { color: inherit; opacity: .55; }
.bx__t { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; margin-top: 26px; }
.bx__d { margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.7; }
.bx__big {
  font-family: var(--font-display); font-weight: 800; line-height: .95;
  font-size: clamp(2.4rem, 4.4vw, 4.2rem); letter-spacing: -.03em; margin-top: 18px;
}
.bx__ph { position: absolute; inset: 0; z-index: -1; }

/* ==========================================================================
   12. Sticky 堆叠卡片（全新模块：滚动时卡片一张张叠上来）
   ========================================================================== */
.stack { position: relative; }
.stack__item {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
  margin-bottom: clamp(50px, 8vh, 100px);
}
.stack__card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(158deg, #14142400 0%, #0e0e1a 100%), var(--bg-3);
  overflow: hidden;
  display: grid; grid-template-columns: 1.05fr 1fr;
  min-height: clamp(320px, 46vh, 460px);
  box-shadow: var(--sh-card);
}
.stack__card > * { min-width: 0; }
.stack__txt { padding: clamp(26px, 3vw, 52px); display: flex; flex-direction: column; }
.stack__no {
  font-family: var(--font-mono); font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--line-2);
}
.stack__t { margin-top: auto; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; line-height: 1.12; color: var(--ink); }
.stack__d { margin-top: 14px; font-size: var(--fs-sm); color: var(--ink); max-width: 50ch; }
.stack__tags { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.stack__tags span {
  font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: .08em;
  padding: 6px 12px; border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--ink); background: rgba(255, 255, 255, .07);
}
.stack__fig { position: relative; }
/* 每张卡换一个主色调，堆叠时层次更明显 */
.stack__item:nth-child(2) .stack__card { border-color: color-mix(in srgb, var(--brand) 26%, var(--line)); }
.stack__item:nth-child(3) .stack__card { border-color: color-mix(in srgb, var(--brand-2) 26%, var(--line)); }
.stack__item:nth-child(4) .stack__card { border-color: color-mix(in srgb, var(--brand-3) 26%, var(--line)); }

/* ==========================================================================
   13. 全屏画廊式横向 pin（改造版：卡片更大、带巨型编号）
   ========================================================================== */
.gal { position: relative; overflow: hidden; background: var(--bg-2); }
.gal__vp { height: 100svh; display: flex; align-items: center; }
.gal__track { display: flex; gap: clamp(18px, 2vw, 34px); padding-inline: var(--pad-x); will-change: transform; }
.gal__card {
  position: relative; flex: 0 0 auto;
  width: clamp(280px, 34vw, 500px);
  height: clamp(360px, 62vh, 620px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-3);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(20px, 2vw, 34px);
  transition: border-color var(--dur) var(--ease);
}
.gal__card:hover { border-color: var(--line-glow); }
.gal__card .ph { position: absolute; inset: 0; z-index: 0; opacity: .82; }
.gal__card::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 34%, rgba(5,5,11,.86) 100%);
}
.gal__card > * { position: relative; z-index: 2; }
.gal__no {
  position: absolute; top: clamp(18px, 2vw, 30px); left: clamp(20px, 2vw, 34px); z-index: 2;
  font-family: var(--font-display); font-size: clamp(3rem, 6vw, 5.4rem); font-weight: 800;
  line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.34);
}
.gal__t { font-size: var(--fs-h3); font-weight: 700; }
.gal__d { margin-top: 8px; font-size: var(--fs-sm); color: rgba(255,255,255,.72); }
/* 首卡：说明文案而非图卡 */
.gal__intro {
  flex: 0 0 auto; width: clamp(260px, 30vw, 420px);
  display: flex; flex-direction: column; justify-content: center;
  padding-right: clamp(20px, 3vw, 60px);
}

/* ==========================================================================
   14. 粘性索引 + 长列表（全新模块，替代左右两栏图文）
   ========================================================================== */
.split { display: grid; grid-template-columns: 340px 1fr; gap: clamp(28px, 5vw, 90px); align-items: start; }
.split > * { min-width: 0; }
.split__aside { position: sticky; top: calc(var(--nav-h) + 60px); }
.split__idx { margin-top: 30px; display: flex; flex-direction: column; gap: 2px; }
.split__idx a {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 0; font-size: var(--fs-sm); color: var(--ink-3);
  border-top: 1px solid var(--line);
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}
.split__idx a em { font-family: var(--font-mono); font-style: normal; font-size: var(--fs-tag); color: var(--ink-4); }
.split__idx a:hover, .split__idx a.is-on { color: var(--ink); padding-left: 10px; }
.split__idx a.is-on em { color: var(--brand-2); }

.qlist { display: flex; flex-direction: column; }
.qrow {
  position: relative;
  display: grid; grid-template-columns: 80px 1fr auto; gap: clamp(14px, 2vw, 34px);
  align-items: start;
  padding: clamp(24px, 2.6vw, 40px) 0;
  border-top: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}
.qrow > * { min-width: 0; }
.qrow:last-child { border-bottom: 1px solid var(--line); }
.qrow__no { font-family: var(--font-mono); font-size: var(--fs-tag); color: var(--brand-2); letter-spacing: .14em; padding-top: 6px; }
.qrow__t { font-family: var(--font-display); font-size: clamp(1.25rem, 2.1vw, 1.9rem); font-weight: 700; line-height: 1.24; }
.qrow__d { margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-3); max-width: 62ch; }
.qrow__go {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2);
  display: grid; place-items: center; color: var(--ink-3);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.qrow:hover .qrow__go { background: var(--brand); border-color: var(--brand); color: #08080f; transform: rotate(-45deg); }

/* ==========================================================================
   15. Swiper 定制（本站用 flip / cube / vertical / 连续流动带，与前两站不重复）
   ========================================================================== */
.sw { position: relative; width: 100%; }
.sw .swiper-slide { height: auto; }

/* 15.1 FLIP 翻牌 */
.swflip { width: min(560px, 100%); margin-inline: 0; overflow: visible; }
.swflip .swiper-slide {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--bg-3);
  min-height: clamp(330px, 46vh, 460px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(22px, 2.4vw, 38px);
}
.swflip .ph { position: absolute; inset: 0; z-index: 0; }
.swflip .swiper-slide::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 30%, rgba(5,5,11,.9) 100%);
}
.swflip .swiper-slide > * { position: relative; z-index: 2; }

/* 15.2 CUBE 立方体 */
.swcube { width: min(420px, 86vw); margin-inline: auto; overflow: visible; }
.swcube .swiper-slide {
  border-radius: var(--r); overflow: hidden;
  background: var(--bg-3); border: 1px solid var(--line-2);
  min-height: clamp(300px, 42vh, 420px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px;
}
.swcube .ph { position: absolute; inset: 0; z-index: 0; }
.swcube .swiper-slide::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 36%, rgba(5,5,11,.88) 100%);
}
.swcube .swiper-slide > * { position: relative; z-index: 2; }
.swiper-cube-shadow { display: none; }

/* 15.3 竖向轮播 */
.swvert { height: clamp(340px, 48vh, 480px); }
.swvert .swiper-slide {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(20px, 2vw, 34px) 0;
  border-top: 1px solid var(--line);
}
.swvert__k { font-family: var(--font-mono); font-size: var(--fs-tag); letter-spacing: .16em; color: var(--brand-2); }
.swvert__t { margin-top: 12px; font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2.2rem); font-weight: 700; line-height: 1.2; }
.swvert__d { margin-top: 12px; font-size: var(--fs-sm); color: var(--ink-3); max-width: 56ch; }

/* 15.4 连续流动带（autoplay delay:0 + linear，无停顿） */
.swflow .swiper-wrapper { transition-timing-function: linear !important; }
.swflow .swiper-slide { width: clamp(230px, 24vw, 330px); }
.flowcard {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--grad-card); overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.flowcard:hover { border-color: var(--line-glow); transform: translateY(-4px); }
.flowcard__fig { height: 156px; position: relative; }
.flowcard__b { padding: 18px 20px 22px; }
.flowcard__k { font-family: var(--font-mono); font-size: var(--fs-tag); letter-spacing: .14em; color: var(--brand-2); }
.flowcard__t { margin-top: 8px; font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; }

/* 15.5 轮播控件 */
.swctl { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.swbtn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--ink-2);
  display: grid; place-items: center;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.swbtn:hover { background: var(--brand); border-color: var(--brand); color: #08080f; }
.swbtn.swiper-button-disabled { opacity: .3; pointer-events: none; }
.swnum { font-family: var(--font-mono); font-size: var(--fs-tag); letter-spacing: .18em; color: var(--ink-3); margin-left: 6px; }
.swnum b { color: var(--ink); }
.swprog { position: relative; flex: 1; height: 2px; background: rgba(255,255,255,.10); overflow: hidden; }
.swprog .swiper-pagination-progressbar-fill { background: var(--grad-brand); }
.swiper-pagination-progressbar { position: relative !important; }

/* ==========================================================================
   16. 全屏 CTA + 页脚
   ========================================================================== */
.cta {
  position: relative; overflow: hidden;
  min-height: 78svh; display: grid; place-items: center; text-align: center;
  background: var(--bg-2);
}
.cta__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 10%, transparent 100%);
}
.cta__glow {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(900px, 88vw); aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 24%, transparent) 0%, transparent 62%);
  filter: blur(24px);
}
.cta__in { position: relative; z-index: 2; padding-inline: var(--pad-x); }
.cta__t {
  font-family: var(--font-display); font-weight: 800; line-height: .98;
  font-size: clamp(2.4rem, 7vw, 6rem); letter-spacing: -.04em; text-transform: uppercase;
}
/* 巨型磁性圆按钮 */
.cta__btn {
  margin: clamp(30px, 5vh, 56px) auto 0;
  width: clamp(140px, 16vw, 196px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background: var(--grad-brand); color: #08080f;
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3);
  box-shadow: var(--glow);
  transition: transform var(--dur) var(--ease);
}
.cta__btn:hover { transform: scale(1.06); }

.foot { background: var(--bg); border-top: 1px solid var(--line); }
.foot__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: var(--gap); padding-block: clamp(46px, 6vw, 78px); }
.foot__top > * { min-width: 0; }
.foot__logo { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.foot h4 { font-family: var(--font-mono); font-size: var(--fs-tag); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; margin-bottom: 16px; }
.foot li { margin-bottom: 10px; }
.foot li a { font-size: var(--fs-sm); color: var(--ink-2); transition: color var(--dur-fast) var(--ease); }
.foot li a:hover { color: var(--brand-2); }
.foot__bot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-block: 22px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--fs-tag); letter-spacing: .12em; color: rgba(255, 255, 255, 0.66);
}

/* ==========================================================================
   17. 自定义光标（引擎会创建 .cur / .cur-d 两个节点）
   ========================================================================== */
.cur, .cur-d {
  position: fixed; top: 0; left: 0; z-index: 300;
  pointer-events: none; border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.cur { width: 7px; height: 7px; background: #fff; margin: -3.5px 0 0 -3.5px; }
.cur-d {
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 1px solid rgba(255,255,255,.55);
  transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background .3s var(--ease);
}
.cur-d.is-big { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: rgba(255,255,255,.12); border-color: transparent; }

/* ==========================================================================
   18. 响应式
   ========================================================================== */
@media (max-width: 1180px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bx--w3 { grid-column: span 2; }
  .split { grid-template-columns: 1fr; }
  .split__aside { position: static; }
  .foot__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  :root { --rail: 0px; }
  .shell { padding-left: 0; }
  /* 竖排导轨在小屏改为底部横条 */
  .rail {
    top: auto; right: 0; bottom: 0; width: auto; height: 62px;
    flex-direction: row; padding: 0 16px;
    border-right: 0; border-top: 1px solid var(--line);
  }
  .rail__nav { flex-direction: row; gap: 22px; }
  .rail__nav a { writing-mode: horizontal-tb; }
  .rail__nav a::before { left: 50%; top: auto; bottom: -6px; transform: translateX(-50%) scale(0); }
  .rail__nav a:hover::before, .rail__nav a.is-on::before { transform: translateX(-50%) scale(1); }
  .rail__soc { flex-direction: row; }
  .rail__prog { left: 0; top: -1px; width: 0%; height: 2px; }
  .topbar { left: 0; }

  .statband { grid-template-columns: repeat(2, 1fr); }
  .statband > div:nth-child(2n) { border-right: 0; }
  .statband > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .stack__card { grid-template-columns: 1fr; }
  .stack__fig { min-height: 190px; order: -1; }
  .stack__card { min-height: auto; }
  .stack__item { margin-bottom: 34px; }
  .stack__item { top: calc(var(--nav-h) + 16px); }
  .qrow { grid-template-columns: 1fr; }
  .qrow__go { display: none; }
  .swflip { width: 100%; }
  body { padding-bottom: 62px; } /* 给底部导航条留位 */
}

@media (max-width: 620px) {
  :root { --fs-mega: clamp(2.4rem, 9vw, 4rem); }
  .hero { padding-inline: clamp(16px, 5vw, 28px); }
  .bento { grid-template-columns: 1fr; }
  .bx--w2, .bx--w3 { grid-column: span 1; }
  .bx--h2 { grid-row: span 1; }
  .statband { grid-template-columns: 1fr; }
  .statband > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .foot__top { grid-template-columns: 1fr; }
  .hero__t .ln--stroke { -webkit-text-stroke-width: 1px; }
  .sec__no { display: none; }
}

/* 桌面端隐藏系统光标（有自定义光标时） */
@media (hover: hover) and (pointer: fine) {
  html.m-ready:not(.m-lite) body { cursor: none; }
  html.m-ready:not(.m-lite) a,
  html.m-ready:not(.m-lite) button { cursor: none; }
}