/* ============================================================================
   LUNA · OPC 共享设计系统  ·  design-system.css  ·  v1.0
   ----------------------------------------------------------------------------
   真相源 = hero-v4-combine（Luna 判"非常棒"的暖深色电影底版）的视觉语言。
   这套系统 = 整站（主页 + 所有子页）共用的一套调：
       暖深色电影底 · 单一赤陶橙 accent · 衬线 display + sans 正文 · 克制留白。

   子页用法（详 DESIGN.md）：
       <link rel="stylesheet" href="/path/to/design-system.css">
       然后用下面的 token（var(--xxx)）和组件类（.ds-section / .ds-card / .ds-btn …）。
       禁止：再发明新色、换字体、加紫渐变/三列图标网格/纯色块底（反 AI slop）。

   注：本文件只放「共享」的东西。hero 自己那套强动画（floorplan / foryou / 传送带）
       留在 hero.css 里不动——那是 hero 专属，不进设计系统。
   ============================================================================ */

/* ───────────────────────────────────────────────────────────
   1 · TOKENS （设计令牌 · 与 hero :root 同源同名，整站一个调）
   ─────────────────────────────────────────────────────────── */
:root {
  /* 墨色底盘（warm dark · 不是纯黑，带一点暖紫黑） */
  --ink-900: #0c0c11;   /* 页面主底 */
  --ink-850: #101017;   /* 次级底 */
  --ink-800: #15151e;   /* 卡片底 a */
  --ink-700: #1c1c28;   /* 卡片底 b */
  --ink-line:   rgba(255, 255, 255, 0.08);  /* 主分隔线 */
  --ink-line-2: rgba(255, 255, 255, 0.05);  /* 次分隔线 / 网格 */

  /* 单一品牌 accent · 赤陶橙系（80% 留给底，5% 给它，但最吸睛） */
  --amber:        #f0a878;
  --amber-bright: #ffbb84;
  --amber-deep:   #e2855a;
  --peach:        #ffd9b8;
  --terra:        #c2421e;   /* 封面/重点块的深赤陶（实心面用） */
  --terra-deep:   #7a2a12;

  /* 唯一的"活/在线"提示色（薄荷绿 · 只用于 live 脉冲，别滥用） */
  --live: #6fe3c4;

  /* 文字三档 */
  --text:       #f4efe9;   /* 主文字（暖白） */
  --text-dim:   #b4ada4;   /* 副文字 */
  --text-faint: #7d7872;   /* 注释 / 弱信息 */

  /* 字体栈（衬线撑人味/温度，sans 撑系统/正文，mono 撑数据/live） */
  --serif: "Noto Serif SC", "Songti SC", serif;
  --sans:  "Noto Sans SC", -apple-system, "PingFang SC", sans-serif;
  --mono:  "Space Mono", "SF Mono", ui-monospace, monospace;

  /* 圆角 · 阴影 */
  --r:    10px;   /* 标准圆角 */
  --r-lg: 16px;   /* 大块（图片/大卡）圆角 */
  --shadow-card:  0 16px 38px -16px rgba(0, 0, 0, 0.88);
  --shadow-lift:  0 26px 64px -22px rgba(0, 0, 0, 0.9);
  --glow-amber:   0 0 40px -18px rgba(240, 168, 120, 0.5);

  /* 间距尺度（8px 基线 · 排版用这套，别随手写奇数 px） */
  --sp-1: 8px;  --sp-2: 16px;  --sp-3: 24px;  --sp-4: 32px;
  --sp-5: 48px; --sp-6: 64px;  --sp-7: 96px;  --sp-8: 128px;

  /* 缓动 · 整站统一手感 */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* 内容最大宽 */
  --maxw: 1180px;
}

/* ───────────────────────────────────────────────────────────
   2 · BASE （整站底）
   ─────────────────────────────────────────────────────────── */
.ds-page {
  margin: 0;
  font-family: var(--sans);
  background: var(--ink-900);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.ds-page *,
.ds-page *::before,
.ds-page *::after { box-sizing: border-box; }
.ds-page img { max-width: 100%; height: auto; display: block; }

/* ───────────────────────────────────────────────────────────
   3 · 板块容器 .ds-section （每个板块从这里起）
   ─────────────────────────────────────────────────────────── */
.ds-section {
  position: relative;
  padding: clamp(64px, 9vw, 128px) clamp(24px, 5vw, 72px);
  isolation: isolate;
}
.ds-section--tight { padding-block: clamp(48px, 6vw, 88px); }
.ds-inner { max-width: var(--maxw); margin: 0 auto; }

/* 交替底色，区分板块而不靠粗暴分割线 */
.ds-section--alt { background: var(--ink-850); }

/* 板块之间的细发丝线（克制，不是大色块切分） */
.ds-hairline { border: 0; border-top: 1px solid var(--ink-line); margin: 0; }

/* 板块氛围底（渐变网格 · 给深度感 · 反"纯色背景"slop） */
.ds-ambient { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ds-ambient-mesh {
  position: absolute; inset: -20%;
  background:
    radial-gradient(40% 50% at 78% 22%, rgba(240, 168, 120, 0.10), transparent 70%),
    radial-gradient(46% 52% at 14% 82%, rgba(111, 227, 196, 0.045), transparent 72%);
  filter: blur(10px);
}
.ds-ambient-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--ink-line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-line-2) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 90% at 50% 30%, #000 18%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 18%, transparent 78%);
  opacity: 0.55;
}

/* ───────────────────────────────────────────────────────────
   4 · 板块标题区 （eyebrow + 大标 + 引言 · 整站一套节奏）
   ─────────────────────────────────────────────────────────── */
.ds-eyebrow {
  font-family: var(--mono);
  font-size: 13px; letter-spacing: 0.2em;
  color: var(--amber);
  margin: 0 0 var(--sp-2);
  display: inline-flex; align-items: center; gap: 8px;
}
.ds-eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--amber); opacity: 0.6;
}
.ds-h2 {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.12; letter-spacing: -0.01em;
  margin: 0 0 var(--sp-2);
}
.ds-h2 .hl {
  color: var(--amber-bright);
  text-shadow: 0 0 22px rgba(240, 168, 120, 0.35);
}
.ds-lead {
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.7; color: var(--text-dim);
  max-width: 720px; margin: 0 0 var(--sp-4);
}
.ds-lead em { font-style: normal; color: var(--peach); font-weight: 500; }
.ds-lead b  { color: var(--text); font-weight: 700; }

/* ───────────────────────────────────────────────────────────
   5 · 卡片 .ds-card
   ─────────────────────────────────────────────────────────── */
.ds-card {
  position: relative;
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--ink-700), var(--ink-850));
  border: 1px solid var(--ink-line-2);
  box-shadow: var(--shadow-card);
  padding: clamp(18px, 2.2vw, 26px);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.ds-card:hover {
  transform: translateY(-4px);
  border-color: rgba(240, 168, 120, 0.30);
  box-shadow: var(--shadow-card), var(--glow-amber);
}
.ds-card__kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--amber); margin-bottom: var(--sp-1);
}
.ds-card__title { font-weight: 700; font-size: 17px; color: var(--text); margin: 0 0 8px; }
.ds-card__body  { font-size: 14px; line-height: 1.6; color: var(--text-dim); margin: 0; }

/* 网格摆卡 */
.ds-grid { display: grid; gap: var(--sp-3); }
.ds-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ───────────────────────────────────────────────────────────
   6 · 入口块 .ds-entry （"进 XX →" · 每个板块底部那块导流件）
   ─────────────────────────────────────────────────────────── */
.ds-entry {
  display: inline-flex; align-items: center; gap: 14px;
  text-decoration: none;
  padding: 16px 24px;
  border-radius: 100px;
  border: 1px solid rgba(240, 168, 120, 0.28);
  background: rgba(240, 168, 120, 0.06);
  color: var(--text);
  font-weight: 700; font-size: 16px;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.ds-entry:hover {
  transform: translateY(-2px);
  border-color: rgba(240, 168, 120, 0.6);
  background: rgba(240, 168, 120, 0.12);
}
.ds-entry__arrow { transition: transform 0.3s var(--ease); color: var(--amber-bright); }
.ds-entry:hover .ds-entry__arrow { transform: translateX(5px); }
.ds-entry__sub { font-weight: 400; font-size: 13px; color: var(--text-faint); margin-left: 4px; }

/* ───────────────────────────────────────────────────────────
   7 · 按钮 .ds-btn （实心主按钮 = 唯一最亮·全站只 CTA 用实心橙）
   ─────────────────────────────────────────────────────────── */
.ds-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: 100px;
  background: linear-gradient(180deg, var(--amber-bright), var(--amber-deep));
  color: #2a160c; font-weight: 700; font-size: 16px; text-decoration: none; border: 0; cursor: pointer;
  box-shadow: 0 6px 22px -8px rgba(240, 168, 120, 0.6);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.ds-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(240, 168, 120, 0.78); }
.ds-btn__arrow { transition: transform 0.25s var(--ease); }
.ds-btn:hover .ds-btn__arrow { transform: translateX(4px); }
/* 次按钮 = 描边，不抢实心橙 */
.ds-btn--ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--ink-line); box-shadow: none;
}
.ds-btn--ghost:hover { border-color: rgba(240, 168, 120, 0.5); box-shadow: none; }

/* ───────────────────────────────────────────────────────────
   8 · 数字锚 .ds-stat （战绩 / KPI · mono 大数字 + 暖白）
   ─────────────────────────────────────────────────────────── */
.ds-stats { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); }
.ds-stat { display: flex; flex-direction: column; gap: 6px; }
.ds-stat__num {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(32px, 4.5vw, 56px); line-height: 1; letter-spacing: -0.01em;
  color: var(--amber-bright); text-shadow: 0 0 22px rgba(240, 168, 120, 0.3);
}
.ds-stat__label { font-size: 13px; color: var(--text-faint); }

/* ───────────────────────────────────────────────────────────
   9 · live 脉冲点 .ds-live-dot （在线/运转中 · 整站统一）
   ─────────────────────────────────────────────────────────── */
.ds-live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--live); animation: ds-livePulse 2.2s ease-out infinite;
}
@keyframes ds-livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(111, 227, 196, 0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(111, 227, 196, 0); }
  100% { box-shadow: 0 0 0 0 rgba(111, 227, 196, 0); }
}

/* 标签 chip（行业/平台标） · 与 hero chip 同语言 */
.ds-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 6px 12px; border-radius: 100px;
  border: 1px solid var(--ink-line); color: var(--text-faint);
  background: rgba(255, 255, 255, 0.02);
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.ds-tag.is-on { color: var(--peach); border-color: rgba(240, 168, 120, 0.5); background: rgba(240, 168, 120, 0.10); }

/* ───────────────────────────────────────────────────────────
   10 · 滚动入场 （scroll-reveal · 整站一套，靠 JS 加 .is-in）
   ─────────────────────────────────────────────────────────── */
.ds-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.ds-reveal.is-in { opacity: 1; transform: translateY(0); }
.ds-reveal[data-delay="1"] { transition-delay: 0.08s; }
.ds-reveal[data-delay="2"] { transition-delay: 0.16s; }
.ds-reveal[data-delay="3"] { transition-delay: 0.24s; }
.ds-reveal[data-delay="4"] { transition-delay: 0.32s; }

/* ───────────────────────────────────────────────────────────
   11 · 响应式
   ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ds-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .ds-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ds-grid--4, .ds-grid--3, .ds-grid--2 { grid-template-columns: 1fr; }
  .ds-section { padding: clamp(48px, 11vw, 72px) 20px; }
}

/* 降低运动偏好 */
@media (prefers-reduced-motion: reduce) {
  .ds-reveal { opacity: 1 !important; transform: none !important; }
  .ds-live-dot { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   12 · LunaFX 「会动 / 可交互」组件层  ·  v1.0（配 components.js）
   ----------------------------------------------------------------------------
   把主页 hero 那层真正"哇"的东西，抽成子页可复用的 .fx-* 组件类。
   原 DESIGN.md 写"hero 强动画不进设计系统"——那正是「子页只拿到 token、还是静态」
   的根。这一层把 cinematic 氛围 / 永续内容卡 / 当场生成 / 地图点亮 通用化，
   子页 <script>LunaFX.xxx()</script> 即可拼出会动可交互的 designed experience。
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 12.1 cinematic 氛围层（LunaFX.ambient · 暖深色电影底 · 会呼吸的深度） ── */
.fx-ambient { position: fixed; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
.fx-ambient__mesh {
  position: absolute; inset: -30%;
  background:
    radial-gradient(40% 50% at 70% 26%, rgba(240,168,120,0.16), transparent 70%),
    radial-gradient(34% 42% at 88% 66%, rgba(226,133,90,0.11), transparent 72%),
    radial-gradient(46% 50% at 16% 82%, rgba(111,227,196,0.05), transparent 70%),
    radial-gradient(50% 60% at 30% 12%, rgba(255,187,132,0.07), transparent 75%);
  filter: blur(8px);
  animation: fxMeshDrift 30s ease-in-out infinite alternate;
}
@keyframes fxMeshDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-3%,2%,0) scale(1.08); }
}
.fx-ambient__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--ink-line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-line-2) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(125% 95% at 60% 38%, #000 24%, transparent 82%);
  -webkit-mask-image: radial-gradient(125% 95% at 60% 38%, #000 24%, transparent 82%);
  opacity: 0.6;
}
.fx-ambient__glow {
  position: absolute; width: 540px; height: 540px; left: 0; top: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,187,132,0.12), transparent 60%);
  transform: translate3d(var(--mx,60vw), var(--my,40vh), 0) translate(-50%,-50%);
  transition: transform 0.18s var(--ease);
  opacity: 0;
}
.fx-armed .fx-ambient__glow { opacity: 1; }

/* ── 12.2 永续内容卡流（LunaFX.liveStream · "获客部在干活"的 alive 能量） ── */
.fx-conveyor { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.fx-card {
  position: absolute; width: var(--cw, 150px); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(30,30,42,0.97), rgba(19,19,28,0.97));
  border: 1px solid rgba(240,168,120,0.22);
  box-shadow: 0 16px 38px -16px rgba(0,0,0,0.88), 0 0 0 1px rgba(255,255,255,0.02);
  padding: 11px 12px; backdrop-filter: blur(4px);
  will-change: transform, opacity; overflow: hidden;
}
.fx-card__head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.fx-card__kind {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 5px; color: #2a160c;
}
.fx-card__time { font-family: var(--mono); font-size: 9px; color: var(--text-faint); margin-left: auto; }
.fx-card__title { font-size: 12px; line-height: 1.4; color: var(--text); font-weight: 500; }
.fx-card__line {
  height: 6px; border-radius: 3px; margin-top: 8px; width: 0;
  background: linear-gradient(90deg, rgba(240,168,120,0.5), rgba(240,168,120,0.12));
  animation: fxTypeLine 1.3s 0.15s var(--ease) forwards;
}
.fx-card__line.l2 { animation: fxTypeLine2 1.4s 0.4s var(--ease) forwards; opacity: 0.7; }
@keyframes fxTypeLine  { to { width: 86%; } }
@keyframes fxTypeLine2 { to { width: 58%; } }
.fx-card__sheen {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,217,184,0.16) 50%, transparent 70%);
  transform: translateX(-120%); animation: fxSheen 1.1s 0.1s ease-out forwards;
}
@keyframes fxSheen { to { transform: translateX(120%); } }

/* ── 12.3 「当场为你生成一张」卡（LunaFX.forYou · 封面打字 + 公众号开头逐行） ── */
.fx-foryou {
  position: relative; border-radius: 14px;
  background: linear-gradient(180deg, rgba(32,28,30,0.97), rgba(20,18,22,0.98));
  border: 1px solid rgba(240,168,120,0.30);
  box-shadow: 0 26px 64px -22px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.03),
              0 0 40px -18px rgba(240,168,120,0.5);
  backdrop-filter: blur(6px); overflow: hidden;
  transition: box-shadow .4s, transform .4s;
}
.fx-foryou.is-working {
  box-shadow: 0 26px 64px -22px rgba(0,0,0,0.9), 0 0 0 1px rgba(240,168,120,0.18),
              0 0 56px -14px rgba(240,168,120,0.72);
}
.fx-foryou::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber-bright), transparent);
  background-size: 40% 100%; background-repeat: no-repeat; opacity: 0; transition: opacity .3s;
}
.fx-foryou.is-working::before { opacity: 1; animation: fxFyScan 1.2s linear infinite; }
@keyframes fxFyScan { 0% { background-position: -20% 0; } 100% { background-position: 120% 0; } }
.fy-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border-bottom: 1px solid var(--ink-line); background: rgba(255,255,255,0.02);
}
.fy-agent { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--text); }
.fy-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber-bright); flex: none; box-shadow: 0 0 8px var(--amber); }
.fx-foryou.is-working .fy-dot { animation: fxDotPulse 1.1s ease-in-out infinite; }
@keyframes fxDotPulse { 0%,100%{opacity:.45;} 50%{opacity:1;} }
.fy-state { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em; color: var(--amber); }
.fx-foryou.is-done .fy-state { color: var(--live); }
.fy-cover {
  position: relative; margin: 14px 14px 0; aspect-ratio: 16 / 10; border-radius: 10px;
  background:
    radial-gradient(120% 80% at 85% 8%, rgba(255,187,132,0.28), transparent 55%),
    linear-gradient(158deg, var(--terra) 0%, var(--terra-deep) 100%);
  padding: 14px 15px; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px;
  overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.fy-cover::after {
  content: ""; position: absolute; inset: 0; opacity: .12;
  background-image: linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px);
  background-size: 100% 22px;
  mask-image: linear-gradient(transparent, #000 80%); -webkit-mask-image: linear-gradient(transparent, #000 80%);
}
.fy-badge {
  position: absolute; top: 12px; left: 13px; z-index: 2;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--terra-deep); background: var(--peach); padding: 4px 9px; border-radius: 100px;
}
.fy-cover-lines { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 5px; }
.fy-cline {
  font-family: var(--serif); color: #fff6ef; font-weight: 900; line-height: 1.18;
  display: block; min-height: 1.18em; text-shadow: 0 2px 12px rgba(80,20,8,0.45);
}
.fy-l1 { font-size: clamp(20px, 2.4vw, 27px); }
.fy-l2 { font-size: clamp(15px, 1.7vw, 19px); opacity: 0.94; }
.fy-wechat { padding: 13px 15px 15px; }
.fy-wmeta {
  display: inline-flex; align-items: center; gap: 7px; width: 100%;
  font-size: 11.5px; font-weight: 700; color: var(--amber);
  padding-bottom: 10px; margin-bottom: 11px; border-bottom: 1px solid var(--ink-line);
}
.fy-wmeta .fy-dot { background: var(--amber); box-shadow: 0 0 7px var(--amber); }
.fy-wtitle {
  font-family: var(--serif); font-weight: 700; font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.4; color: var(--text); margin-bottom: 8px; min-height: 1.4em;
}
.fy-wbody { font-size: clamp(13px, 1.2vw, 15px); line-height: 1.7; color: var(--text-dim); display: inline; min-height: 1.7em; }
.fy-cursor {
  display: inline-block; width: 8px; height: 1em; background: var(--amber-bright);
  vertical-align: text-bottom; margin-left: 2px; box-shadow: 0 0 8px var(--amber);
  animation: fxBlink 1s step-end infinite; opacity: 0;
}
.fy-cursor.is-typing { opacity: 1; }
@keyframes fxBlink { 0%,100%{opacity:1;} 50%{opacity:0;} }

/* ── 12.4 全景地图点亮（LunaFX.mapLightup · 点一站亮一站 + 第一站今天点亮态） ── */
.fx-map { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(20px, 3vw, 44px); align-items: stretch; }
.fx-map__rail { position: relative; display: flex; flex-direction: column; gap: 12px; padding-left: 28px; }
.fx-map__rail::before {
  content: ""; position: absolute; left: 9px; top: 22px; bottom: 22px; width: 2px;
  background: linear-gradient(180deg, var(--amber) 0%, var(--ink-line) 28%, var(--ink-line) 100%);
}
.fx-map__station {
  position: relative; display: flex; align-items: center; gap: 14px;
  text-align: left; cursor: pointer; padding: 14px 16px; border-radius: var(--r);
  background: rgba(255,255,255,0.02); border: 1px solid var(--ink-line-2); color: var(--text-dim);
  font-family: var(--sans); transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.fx-map__station::before {
  content: ""; position: absolute; left: -23px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink-700); border: 2px solid var(--ink-line); transition: all .4s var(--ease);
}
.fx-map__station:hover { border-color: rgba(240,168,120,0.3); transform: translateX(2px); }
.fx-map__station.is-active { border-color: rgba(240,168,120,0.5); background: rgba(240,168,120,0.08); }
.fx-map__no { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--text-faint); flex: none; width: 24px; }
.fx-map__name { font-size: 16px; font-weight: 700; color: var(--text); }
.fx-map__lock { margin-left: auto; font-size: 11px; color: var(--text-faint); letter-spacing: 0.04em; }
/* 第一站 = 今天点亮态（金光待画 → 进视口点亮） */
.fx-map__station.is-lit { border-color: rgba(240,168,120,0.55); background: rgba(240,168,120,0.10); }
.fx-map__station.is-lit .fx-map__name { color: var(--amber-bright); }
.fx-map__station.is-lit::before { background: var(--ink-700); border-color: var(--amber); }
.fx-map--lit .fx-map__station.is-lit::before {
  background: var(--amber-bright); border-color: var(--amber-bright);
  box-shadow: 0 0 0 0 rgba(240,168,120,0.6); animation: fxStationPulse 2.4s ease-out infinite;
}
@keyframes fxStationPulse {
  0% { box-shadow: 0 0 0 0 rgba(240,168,120,0.55); }
  70% { box-shadow: 0 0 0 12px rgba(240,168,120,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,168,120,0); }
}
.fx-map__station.is-dim { opacity: 0.62; }
.fx-map__station.is-dim .fx-map__lock { color: var(--amber); opacity: 0.7; }
/* 右侧说明读出区 */
.fx-map__readout {
  position: relative; border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--ink-700), var(--ink-850));
  border: 1px solid var(--ink-line-2); box-shadow: var(--shadow-card);
  padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; justify-content: center;
}
.fx-map__readout-no { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; color: var(--amber); margin-bottom: 10px; }
.fx-map__readout .fx-map__title { font-family: var(--serif); font-weight: 900; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.25; color: var(--text); margin: 0 0 14px; }
.fx-map__readout .fx-map__desc { font-size: clamp(14px, 1.2vw, 16px); line-height: 1.75; color: var(--text-dim); margin: 0 0 18px; }
.fx-map__hint { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--peach); }

/* ── 12.5 逐行 reveal（LunaFX.sequence · 痛点页 / 连问页一句句出） ── */
.fx-seq { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.fx-seq.is-in { opacity: 1; transform: translateY(0); }

/* ── 12.6 行业 chip（LunaFX.forYou 触发器 · 与 hero chip 同语言） ── */
.fx-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.fx-chip {
  font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--text-dim);
  background: rgba(255,255,255,0.035); border: 1px solid var(--ink-line); border-radius: 100px;
  padding: 9px 17px; min-height: 44px; cursor: pointer;
  transition: color .25s, border-color .25s, background .25s, transform .25s;
  -webkit-tap-highlight-color: transparent;
}
.fx-chip:hover { color: var(--text); border-color: rgba(240,168,120,0.45); transform: translateY(-1px); }
.fx-chip.is-active {
  color: #2a160c; font-weight: 700;
  background: linear-gradient(180deg, var(--amber-bright), var(--amber-deep));
  border-color: transparent; box-shadow: 0 6px 20px -8px rgba(240,168,120,0.7);
}
.fx-chip:focus-visible { outline: 2px solid var(--amber-bright); outline-offset: 2px; }

/* ── 12.7 reduce-motion 兜底（动效全降级成静态终态·不留空白） ── */
@media (prefers-reduced-motion: reduce) {
  .fx-ambient__mesh, .fx-ambient__glow, .fx-card__sheen, .fx-foryou.is-working::before,
  .fx-foryou .fy-dot, .fx-map--lit .fx-map__station.is-lit::before { animation: none !important; }
  .fx-card__line, .fx-card__line.l2 { width: 80%; animation: none !important; }
  .fy-cursor { display: none; }
  .fx-seq { opacity: 1 !important; transform: none !important; }
}

/* ── 12.8 fx 组件响应式 ── */
@media (max-width: 760px) {
  .fx-map { grid-template-columns: 1fr; }
  .fx-ambient__glow { display: none; }
}