/* ============================================================================
   landing.css — Neo 功能展示落地页（Overhaul）· **首页专属**
   token + 通用基元已抽到 assets/neo-tokens.css（本页在它之后引入）。
   这里只留首页专属：Hero 舞台/卡/能力动画/模块栅格/价格/API 引子。
   不改 assets/base.css（recharge.html 继续用它）。
   ============================================================================ */

/* Hero 卡面专属 token（只服务 .face--*，不抽走） */
:root, html[data-theme="light"] {
  --card-edge: oklch(0 0 0 / .10);
  --focal-ring: 1.5px solid rgba(224, 154, 46, .55);
  --plate: rgba(14, 18, 22, .82);
  --plate-ink: #F5F3EE;
}
html[data-theme="dark"] {
  --card-edge: oklch(1 0 0 / .14);
  --focal-ring: 2px solid rgba(239, 168, 60, .78);
  --plate: rgba(14, 18, 22, .82);
  --plate-ink: #F5F3EE;
}

/* 价格区块内的独立 CTA（设计 §6.4）：导航 CTA 落在 #price，再从这里去充值页 */
.price-more { margin-top: 24px; }

/* 常规卡阴影：按规格 §2.5 的使用表，--sh-1 用于常规卡面 */
.vid, .plan, .logic, .deai { box-shadow: var(--sh-1); }

/* ---------- 6 · HERO ---------- */
.hero { padding-block-start: 64px; }
.hero__copy { margin-bottom: 8px; }
.hero__lead { max-width: 56ch; }
.hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 22px; flex-wrap: wrap; }

.seg {
  display: inline-flex; gap: 2px; padding: 4px; flex: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
}
.seg__btn {
  padding: 8px 22px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600;
  color: var(--ink-3); cursor: pointer;
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out);
}
.seg__btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-line); }
.seg__btn:disabled { opacity: .45; cursor: default; }
/* 分段控件在窄屏也保留 —— 窄屏用户同样要能切「扇面/横排」（此前 display:none 是功能缺失）。 */
@media (max-width: 1199px) {
  /* 窄屏横排态：手动横滚 + 吸附（不做自动流动：触屏无 hover 无法暂停） */
  .stage.is-row { scroll-snap-type: x mandatory; scroll-padding-inline: 24px; }
  .stage.is-row .card { scroll-snap-align: start; }
  /* ×3 套副本只服务宽屏 marquee，窄屏一律隐藏 */
  .card[data-clone="1"] { display: none; }
}

/* 舞台 = 横向滚动容器（越界元素只有落在 overflow-x:auto 且真溢出时才被门禁豁免） */
.stage {
  --cw: 164px; --ch: 219px; --stage-h: 336px;
  position: relative;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  padding: 26px 0 56px;
}
.stage::-webkit-scrollbar { display: none; }
@media (min-width: 1200px) {
  .stage { --cw: 200px; --ch: 267px; --stage-h: 470px; padding: 28px 0 72px; }
}

/* 整墙缩放贴合：--wall-scale 由 JS 写入（CSS 不能做 length/length 除法） */
.wall { position: relative; width: 100%; height: var(--stage-h); transform: scale(var(--wall-scale, 1)); transform-origin: top center; transition: transform .3s var(--ease-soft); }
.track { position: absolute; inset: 0; transform: translateX(var(--track-tx, 0px)); }
.stage.is-morphing .card { transition: none; }
/* 扇面态隐藏 ×3 套的副本（它们只服务横排 marquee）：避免与主卡重叠 */
.stage.is-fan .card[data-clone="1"] { display: none; }

/* 卡片：外层 = 布局姿态（perspective → translate3d → rotateZ → scale）
   ★ left 里含 --rowpx：窄屏横排态把「行位置」交给**布局**（而不是 transform），
     这样 scroll-snap 才有真实的吸附点（transform 不产生 scroll-snap 目标）。 */
.card {
  position: absolute; left: calc(50% + var(--rowpx, 0px)); top: 0;
  width: var(--cw); height: var(--ch);
  margin-left: calc(var(--cw) / -2);
  border-radius: var(--r-xl);
  cursor: pointer;
  transform:
    perspective(1400px)
    translate3d(var(--tx, 0px), calc(var(--ty, 0px) + var(--hover-ty, 0px)), var(--tz, 0px))
    rotateZ(var(--rz, 0deg))
    scale(calc(var(--s, 1) * var(--hover-s, 1)));
  filter: var(--card-filter, none);
  opacity: var(--op, 1);
  z-index: var(--z, 1);
  transition: transform .26s var(--ease-out), filter .26s var(--ease-out), opacity .26s var(--ease-out);
}
.card:hover, .card:focus-visible {
  --hover-ty: -16px; --hover-s: 1.03;
  filter: none; opacity: 1;
  z-index: 999;
  box-shadow: var(--sh-3);        /* 规格 §4.4：悬停用 --sh-3 */
}
.card:hover .face--front, .card:focus-visible .face--front { border-color: var(--accent-line); }
/* 卡面 inset 双色环：外 outline 在 3D 下可能被裁，内描边永不被裁 */
.card:focus-visible .face--front { box-shadow: inset 0 0 0 2px var(--plate), inset 0 0 0 4px var(--accent); }
.card.is-flipped { z-index: 999; }
/* 焦点卡强化：一道克制的琥珀描边（不用零偏移 box-shadow 辉光 —— impeccable 的 dark-glow 会判红）
   + 规格 §2.5 指定给「Hero 焦点卡」的 --sh-4 */
.card.is-focal:not(:focus-visible) { outline: var(--focal-ring); outline-offset: 6px; }
.card.is-focal { box-shadow: var(--sh-4); }

.card__inner {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: perspective(1200px) rotateY(var(--flip, 0deg));
  transition: transform .52s var(--ease-inout);
}
.card.is-flipped .card__inner { --flip: 180deg; }

.face {
  position: absolute; inset: 0; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--line-soft);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.face--back { transform: rotateY(180deg); }

/* 边缘压暗：由 .card 的 filter brightness() 表达（见 --card-filter）。
   不用独立覆盖层——不透明覆盖层会被 impeccable 判为 text-occlusion，且 filter 加在 .card
   上不会压平 .card__inner 自带的 3D 翻转上下文。 */

/* 正面：色块 + 深色实底标签条。
   ★ 扇面态每张卡的横向地盘 ≈ 视口宽 ÷ 16（1440 下 ≈90px），与重叠多少无关 ——
     所以静态扇面里只放「序号 + 2–4 字短名」，且必须贴到**远离圆心**的那一侧
     （左半区靠左 / 右半区靠右），否则会被更靠中心的邻居压住。
     完整中/英风格名只在「焦点卡」与「hover / focus」时出现（见下方 .is-fan 规则）。 */
.face--front { background: oklch(0.64 0.10 var(--h, 255)); }
/* 材质内描边：极细、非渐变（双主题各一份；深色态是浅描边，不是黑） */
.face--front::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--card-edge); pointer-events: none;
}
/* 作品图：铺满卡面。源图是 2:3（1024×1536），用 cover 裁成卡片的 3:4。
   ★ 不加 filter / opacity —— 会压平 .card__inner 的 3D 翻转上下文。 */
.fp__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; pointer-events: none; z-index: 0;
}
/* 卡面层级：作品图(0) < 材质内描边与焦点环(1) < 文字标签(2)。
   显式声明是因为图是 .face--front 的子元素，会盖住同为伪元素的 ::before 描边。 */
.face--front::before { z-index: 1; }
.card.is-focal .face--front::after { z-index: 1; }
/* 焦点卡：一道克制的琥珀内描边（外辉光在 .card.is-focal 上） */
.card.is-focal .face--front::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px var(--accent-line); pointer-events: none;
}
.fp__mini, .fp__full { position: absolute; z-index: 2; }
.fp__mini, .fp__full {
  background: var(--plate); color: var(--plate-ink); border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; line-height: 1.3;
}
.fp__full {
  left: 14px; right: 14px; bottom: 14px; padding: 9px 11px;
  display: flex; flex-direction: column; gap: 2px;
}
.fp__zh { font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.fp__en { font-size: 11px; letter-spacing: .02em; opacity: .82; }
.fp__mini {
  bottom: 14px; left: 14px; padding: 4px 6px; display: none; border-radius: 3px;
  flex-direction: column; gap: 0; align-items: flex-start;
}
.card[data-side="right"] .fp__mini { left: auto; right: 14px; align-items: flex-end; }
.fp__mini-n { font-size: 11px; line-height: 1.15; letter-spacing: 0; opacity: .6; }
.fp__mini-t { font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.2; white-space: nowrap; letter-spacing: 0; }

/* 紧凑态：扇面 + 非焦点卡 + 未 hover/focus → 只显示短名标签 */
.stage.is-fan .card:not(.is-focal):not(:hover):not(:focus-visible) .fp__full { display: none; }
.stage.is-fan .card:not(.is-focal):not(:hover):not(:focus-visible) .fp__mini { display: flex; }

/* 背面：有意义，非空白 */
.face--back {
  background: var(--surface-2); padding: 16px; display: flex; flex-direction: column;
  /* 未翻转时视觉隐藏（与 inert/aria-hidden 一致）：翻回时延迟到 520ms 旋转结束再隐藏 */
  visibility: hidden; transition: visibility 0s linear .52s;
}
.card.is-flipped .face--back { visibility: visible; transition-delay: 0s; }
.face--back::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--accent-line); }
.face--back::after {
  content: attr(data-wm); position: absolute; right: 6px; bottom: -14px;
  font-family: var(--font-display); font-size: 96px; line-height: 1; font-weight: 600;
  color: var(--line); pointer-events: none; user-select: none;
}
.back__hd { display: flex; flex-direction: column; gap: 2px; }
.back__zh { font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.back__en { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); }
.back__desc { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.back__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.back__tags li { padding: 3px 8px; border-radius: var(--r-xs); background: var(--well); color: var(--ink-3); font-size: 11px; }
.back__spec { margin-top: auto; padding-top: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.back__link { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.back__link:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 7 · 能力带 ----------
   UX 规格 §C4 裁决：放弃自动流动 marquee（动效风险 + impeccable 的 marquee 反模式），
   改为单行、可横向滚动的静态关键词带。 */
.band { background: var(--surface); border-block: 1px solid var(--line); }
.band__scroller { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.band__scroller::-webkit-scrollbar { display: none; }
.band__track { display: flex; width: max-content; }
.band__item {
  display: inline-flex; align-items: center; padding: 18px 22px;
  border-inline-start: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--ink-3); white-space: nowrap;
}
.band__item:first-child { border-inline-start: 0; }

/* ---------- 8 · 模块 01 · AI 生图 ---------- */
.img-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
.img-grid > * { min-inline-size: 0; }
@media (max-width: 899px) { .img-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 1200px) { .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chipbtn {
  display: flex; flex-direction: column; gap: 3px; text-align: start;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  cursor: pointer; transition: border-color .14s var(--ease-out), background-color .14s var(--ease-out);
}
.chipbtn:hover { border-color: var(--accent-line); box-shadow: var(--sh-2); }
.chipbtn__zh { font-size: 14px; font-weight: 600; color: var(--ink-2); line-height: 1.35; overflow-wrap: anywhere; }
.chipbtn__en { font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; color: var(--ink-3); overflow-wrap: anywhere; }
.chipbtn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.chipbtn[aria-pressed="true"] .chipbtn__zh { color: var(--on-accent); }
.chipbtn[aria-pressed="true"] .chipbtn__en { color: var(--on-accent); opacity: .8; }

.img-preview { display: flex; flex-direction: column; gap: 20px; }

/* 预览位：两态**同一盒子**（shot=真图 / param=参数卡），同尺寸同圆角，靠 data-mode 交叉淡入。
   框用 3:4（与 assets/hero/*.webp 的 400×533 同比例 ⇒ 零裁切零放大；与 Hero 卡同比例，全站一致）。 */
.shot {
  position: relative;
  aspect-ratio: 3 / 4;
  width: 100%;                 /* 父 .img-preview 是 flex 列：无 in-flow 子元素 + margin-inline:auto 会让它塌成 0 宽（只剩 2px 描边） */
  max-width: 400px;
  margin-inline: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface-2);
  overflow: hidden;
}
/* 两态层：绝对铺满，靠 opacity + visibility 交叉淡入（visibility 让非活跃层脱离无障碍树） */
.shot__img,
.shot__param {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .22s var(--ease-out), visibility 0s linear .22s;
}
.shot__img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.shot[data-mode="shot"]  .shot__img,
.shot[data-mode="param"] .shot__param {
  opacity: 1; visibility: visible;
  transition: opacity .22s var(--ease-out), visibility 0s;
}
/* 无图态：色相底（与 Hero 正面同源）+ 居中深色实底盘（文字必须落 --plate 实底，contrast.mjs 忽略图片） */
.shot__param {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 18px; padding: 22px;
  background: oklch(0.64 0.10 var(--h, 255));
}
.shot__param-glyph { color: var(--plate-ink); opacity: .42; }
.shot__param-glyph svg { width: 64px; height: 64px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.shot__param-body {
  width: 100%;
  display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center;
  padding: 14px 16px;
  background: var(--plate); color: var(--plate-ink);
  border-radius: var(--r-sm);
}
.shot__param-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--plate-ink); opacity: .8; }
.shot__param-zh { font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--plate-ink); }
.shot__param-en { font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; color: var(--plate-ink); opacity: .78; }
.shot__scenes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }
.shot__scenes li {
  font-family: var(--font-mono); font-size: 10px; line-height: 1.3; color: var(--plate-ink);
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-pill); padding: 3px 9px;
}
/* 底部描述盘（两态共用；压在图上/色相上，必须非渐变实底） */
.shot__cap {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  padding: 7px 11px;
  background: var(--plate); color: var(--plate-ink);
  border-radius: var(--r-xs);
  font-size: 13px; font-weight: 600; line-height: 1.4;
}

.anim { position: relative; }
.anim__cap { font-size: 13px; line-height: 1.5; color: var(--ink-3); margin-bottom: 12px; }
.mock {
  display: flex; align-items: center; gap: 2px; min-height: 46px; padding: 0 14px;
  background: var(--well); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 15px; color: var(--ink);
}
.mock__caret { width: 2px; height: 20px; background: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.suggest { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.suggest__item {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink-2); font-size: 14px; line-height: 1.5;
}
.suggest__item:first-child { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.suggest__arrow { flex: none; width: 16px; height: 16px; color: var(--accent-ink); }
.suggest__arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.specrow { display: flex; flex-wrap: wrap; gap: 8px; }
.specrow li {
  padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--surface); font-family: var(--font-mono); font-size: 12px; letter-spacing: .03em; color: var(--ink-3);
}

/* ---------- 9 · 模块 02 · AI 视频（四条链各自不同） ---------- */
.vid-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
/* D2：768 恰好为单列断点（与既有 ux-spec §5.4「≤768 单列」对齐；verify.mjs:28 正测 768） */
@media (max-width: 768px) { .vid-grid { grid-template-columns: minmax(0, 1fr); } }
.vid { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.vid__sub { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--ink-3); }

.chain { margin-top: 20px; }
.chain__list { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.chain__list li { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.chain__list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* 轨道（四张卡共用一套零件，各自组装出不同形状） */
.flow { display: flex; align-items: center; gap: clamp(4px, 1.5vw, 12px); }
.flow__step { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.flow__box {
  position: relative; overflow: hidden;
  width: clamp(34px, 8vw, 46px); height: clamp(34px, 8vw, 46px);
  border: 1.5px solid var(--accent-line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--accent-ink);
  display: grid; place-items: center;
}
.flow__box > svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.flow__label { font-family: var(--font-mono); font-size: clamp(9px, 2.4vw, 11px); letter-spacing: .01em; color: var(--ink-3); white-space: nowrap; }
.flow__link { flex: 1 1 6px; min-width: 4px; height: 2px; border-radius: 2px; background: var(--accent); transform-origin: left center; }

/* 双输入（卡 2 堆叠对 / 卡 3 独立槽） */
.flow__pair { flex: none; display: flex; flex-direction: column; gap: 4px; }
.flow__in {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 6px; border: 1px solid var(--accent-line); border-radius: var(--r-xs);
  background: var(--surface-2); color: var(--accent-ink);
}
.flow__in svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.flow__in em { font-style: normal; font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); }

/* 汇流连接件（SVG，撑满轨道行高；卡 2 = 括号，卡 3 = X 交叉） */
.flow__merge { flex: none; display: grid; place-items: center; height: clamp(34px, 8vw, 46px); color: var(--accent); }
.flow__merge svg { width: 20px; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* 签名：扫描线（卡 1） */
.flow__scan { position: absolute; inset: 0; pointer-events: none; }
.flow__scan i { position: absolute; left: 8%; right: 8%; height: 2px; border-radius: 2px; background: var(--accent);
  animation: scanY 2.4s var(--ease-inout) infinite; }
@keyframes scanY { 0% { top: 10%; opacity: 0; } 12% { opacity: .95; } 88% { opacity: .95; } 100% { top: 88%; opacity: 0; } }

/* 签名：声波条（卡 4） */
.flow__box--wave { background: var(--surface-2); }
.flow__wave { display: flex; align-items: center; justify-content: center; gap: 2px; height: 60%; }
.flow__wave i { width: 3px; border-radius: 2px; background: var(--accent); transform-origin: center;
  animation: waveBar 1.1s var(--ease-inout) infinite alternate; }
.flow__wave i:nth-child(1) { height: 45%; }
.flow__wave i:nth-child(2) { height: 72%; animation-delay: .12s; }
.flow__wave i:nth-child(3) { height: 100%; animation-delay: .24s; }
.flow__wave i:nth-child(4) { height: 72%; animation-delay: .36s; }
.flow__wave i:nth-child(5) { height: 45%; animation-delay: .48s; }
@keyframes waveBar { from { transform: scaleY(.45); } to { transform: scaleY(1); } }

/* 末端成片框（四卡共用；位置/圆角与 .flow__box 一致，只覆写尺寸）。
   ★ D1：删掉无限呼吸（outBreathe 整段移除）—— 成片框的"活"由进度条 + 播放三角充分表达；
   入场一次性轻微放大由 §3.4 的 riseIn 承担。 */
.flow__out { width: clamp(64px, 18vw, 108px); height: auto; aspect-ratio: 16/9; border-radius: var(--r-xs);
  background: var(--well); border-color: var(--line); }
.flow__out .play { width: 22%; height: 22%; color: var(--accent); }
/* ★ D1：字幕条改静态（删掉 steps(1) 闪动 subBlink —— 不承载信息、是纯闪烁噪音） */
.flow__out .sub { position: absolute; left: 8px; bottom: 13px; width: 40%; height: 3px; border-radius: 2px;
  background: var(--ink-3); opacity: .55; }
.flow__out .prog { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 3px; border-radius: 2px;
  background: var(--line); overflow: hidden; }
.flow__out .prog i { display: block; height: 100%; width: 100%; background: var(--accent);
  transform-origin: left center; animation: progRun 2.6s linear infinite; }
@keyframes progRun { from { transform: scaleX(0); } }

/* ★ D1：4 条进度条错相位（2.6s 的四等分负延迟），避免整块网格按 2.6s 锁步脉动 */
.vid:nth-child(2) .flow__out .prog i { animation-delay: -0.65s; }
.vid:nth-child(3) .flow__out .prog i { animation-delay: -1.3s; }
.vid:nth-child(4) .flow__out .prog i { animation-delay: -1.95s; }

/* ★ D1 / B3-6：循环只在进入视口后运行（gate 到 .anim--chain.in；纯 CSS，不改 JS） */
.flow__out .prog i,
.flow__scan i,
.flow__wave i { animation-play-state: paused; }
.anim--chain.in .flow__out .prog i,
.anim--chain.in .flow__scan i,
.anim--chain.in .flow__wave i { animation-play-state: running; }

/* ★ D1 / B3-7：悬停该卡即暂停其循环（与 Hero marquee「指针进入即暂停」口径一致，landing.js:491） */
.vid:hover .flow__out .prog i,
.vid:hover .flow__scan i,
.vid:hover .flow__wave i { animation-play-state: paused; }

/* ---------- 9b · 模块 02 · Part C 真实截图带（可选，可一行删） ----------
   ★ D7：这是对既有 ux-spec V6「媒体位全部改 CSS/动画」的**有意破例**（additive + 可一行删）。
   只放一张 step-video-1.jpg（「爆款复刻」入口页），锚定为卡 1 的实例，不是四类视频的公共入口。
   中性「产品窗口」外框：--line 1px 描边 + --r-lg 圆角 + --sh-2 阴影（不用强调色，避免被读成"本站功能卡"）。
   说明文字在图**下方**（不叠图，避免 text-occlusion）。
   ★ 自包含：所有选择器都在 .realshot 子树内；删掉本块 + index.html 的 <figure class="realshot"> 即无副作用。 */
.realshot { margin-top: 32px; }
.realshot img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--sh-2); }
.realshot figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }

/* ---------- 10 · 模块 03 · 超级编导 ---------- */
.logic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 899px) { .logic-grid { grid-template-columns: minmax(0, 1fr); } }
.logic { position: relative; padding: 32px 28px 40px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.logic::after {
  content: attr(data-num); position: absolute; inset-block-start: 12px; inset-inline-end: 18px;
  font-family: var(--font-display); font-size: 64px; line-height: 1; font-weight: 600; color: var(--line);
  pointer-events: none; user-select: none;
}
.logic .logic__num { font-family: var(--font-mono); font-size: .58em; color: var(--accent-ink); margin-inline-end: .5em; letter-spacing: .04em; }
.logic__body { margin-top: 14px; font-size: 15px; line-height: 1.8; color: var(--ink-3); }

.statband { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
@media (max-width: 560px) { .statband { grid-template-columns: minmax(0, 1fr); } }
.stat { display: flex; align-items: baseline; gap: 12px; padding: 28px 32px; background: var(--surface-2); border-radius: var(--r-lg); }
.stat__num { font-family: var(--font-display); font-size: clamp(44px, 6vw, 72px); line-height: 1; font-weight: 600; color: var(--ink); }
.stat__unit { font-family: var(--font-mono); font-size: 14px; letter-spacing: .04em; color: var(--ink-3); }

.deai { margin-top: 40px; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.deai__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; align-items: center; }
@media (max-width: 767px) { .deai__grid { grid-template-columns: minmax(0, 1fr); } .deai__mid { justify-self: start; } }
.deai__h { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 10px; }
.deai__text { font-size: 15px; line-height: 1.85; color: var(--ink-2); }
.deai mark {
  color: var(--ink);
  text-decoration: underline; text-decoration-style: wavy; text-decoration-color: var(--danger);
  text-decoration-thickness: 1.5px; text-underline-offset: 4px;
  transition: text-decoration-color .3s var(--ease-out);
}
.deai__col--out .deai__text { color: var(--ink); }
.deai.is-done mark { text-decoration-color: transparent; }
.deai__mid { display: flex; justify-content: center; }

/* ---------- 11 · 价格 ---------- */
.promo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 16px 20px; margin-bottom: 28px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-lg);
}
.promo b { color: var(--accent-ink); font-size: 15px; }
.promo span { color: var(--ink-2); font-size: 14px; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 899px) { .plans { grid-template-columns: minmax(0, 1fr); } }
.plan { position: relative; display: flex; flex-direction: column; padding: 28px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.plan.pro { border-color: var(--accent-line); box-shadow: var(--glow); }
.plan__badge {
  align-self: flex-start; margin-bottom: 14px; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.plan__name { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--ink); }
.plan__was { margin-top: 12px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); text-decoration: line-through; }
.plan__now { display: flex; align-items: baseline; gap: 4px; font-family: var(--font-display); font-size: 40px; font-weight: 600; color: var(--ink); line-height: 1.1; }
.plan__now small { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--ink-3); }
.plan__per { margin-top: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.plan__list { margin: 18px 0 22px; display: flex; flex-direction: column; gap: 8px; }
.plan__list li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.plan__list li::before { content: ""; position: absolute; left: 2px; top: .66em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.plan__cta { margin-top: auto; }

.cmp-scroll { margin-top: 32px; overflow-x: auto; scrollbar-width: thin; }
.cmp { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.cmp caption { text-align: start; padding-bottom: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-3); }
.cmp th, .cmp td { padding: 12px 16px; text-align: start; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.cmp thead th { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-3); font-weight: 600; }
.cmp tbody th { color: var(--ink-3); font-weight: 500; }
.cmp b { color: var(--ink); }

/* ---------- 12 · API ---------- */
.api-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.api-grid > * { min-inline-size: 0; }
@media (max-width: 899px) { .api-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.api-lead { font-size: 16px; line-height: 1.8; color: var(--ink-2); max-width: 46ch; }
.api-steps { margin: 20px 0 26px; display: flex; flex-direction: column; gap: 12px; counter-reset: step; }
.api-steps li { position: relative; padding-left: 34px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.api-steps li::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 1px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent-ink);
}
/* ---------- 15 · 能力动画（默认 = 终态；加 .in 后从起点播一次） ---------- */
.anim--complete.in .suggest__item { animation: sugIn .18s var(--ease-out) backwards; }
.anim--complete.in .suggest__item:nth-child(1) { animation-delay: .20s; }
.anim--complete.in .suggest__item:nth-child(2) { animation-delay: .32s; }
.anim--complete.in .suggest__item:nth-child(3) { animation-delay: .44s; }
@keyframes sugIn { from { opacity: 0; transform: translateY(8px); } }
.anim--complete.in .suggest__arrow { animation: arrowIn .2s var(--ease-out) .7s backwards; }
@keyframes arrowIn { from { opacity: 0; transform: translateX(-6px); } }

/* 模块 02 链：默认 = 终态；加 .in 后步骤/连线自左向右依次入场（一次性）。
   ★ D1：补「卡间」stagger（卡 2 +120ms / 卡 3 +240ms / 卡 4 +360ms）—— 视觉规格 §3.4 只做了卡内 stagger。
     用 --cd 变量把卡间偏移叠加到卡内 nth-child 偏移上（calc），避免两套规则互相覆盖。 */
.anim--chain.in .flow__step,
.anim--chain.in .flow__pair,
.anim--chain.in .flow__merge,
.anim--chain.in .flow__out { animation: riseIn .34s var(--ease-out) backwards; }
.anim--chain.in .flow__link { animation: growX .34s var(--ease-inout) backwards; }

.anim--chain.in .flow > *:nth-child(1) { animation-delay: calc(var(--cd, 0ms) + .10s); }
.anim--chain.in .flow > *:nth-child(2) { animation-delay: calc(var(--cd, 0ms) + .26s); }
.anim--chain.in .flow > *:nth-child(3) { animation-delay: calc(var(--cd, 0ms) + .42s); }
.anim--chain.in .flow > *:nth-child(4) { animation-delay: calc(var(--cd, 0ms) + .58s); }
.anim--chain.in .flow > *:nth-child(5) { animation-delay: calc(var(--cd, 0ms) + .74s); }
.anim--chain.in .flow > *:nth-child(6) { animation-delay: calc(var(--cd, 0ms) + .90s); }
.anim--chain.in .flow > *:nth-child(7) { animation-delay: calc(var(--cd, 0ms) + 1.06s); }

.vid:nth-child(2) .chain { --cd: 120ms; }
.vid:nth-child(3) .chain { --cd: 240ms; }
.vid:nth-child(4) .chain { --cd: 360ms; }

@keyframes riseIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes growX  { from { transform: scaleX(0); } }

/* ---------- 16 · reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .wall { transition: none; }
  .mock__caret { animation: none; opacity: 1; }
  .anim--complete.in .suggest__item,
  .anim--complete.in .suggest__arrow { animation: none; }

  /* 模块 02 链：停在**静态终态**（所有节点就位、连线全亮、成片框可见），不是停在起点。
     ★ 选择器必须带 .anim--chain.in 前缀：否则特异性低于 §15 的入场规则，
       `animation:none` 会被 `riseIn`/`growX` 盖过（入场动画的 `from{opacity:0}` 会残留）。
     ★ 这里同时覆盖 §9 新增的 `animation-play-state: paused` —— animation:none 直接移除动画，play-state 无从作用。 */
  .anim--chain.in .flow > *,
  .anim--chain.in .flow__out,
  .anim--chain.in .flow__out .prog i,
  .anim--chain.in .flow__out .sub,
  .anim--chain.in .flow__scan i,
  .anim--chain.in .flow__wave i { animation: none; }

  .flow__link { transform: scaleX(1); }        /* 连线全亮 */
  .flow__scan i { top: 50%; opacity: .9; }     /* 扫描线停在正中（保留签名，不"卡在半空"） */
  .flow__out .prog i { transform: scaleX(1); } /* 进度 100% */
  .flow__out .sub { opacity: .55; }            /* 字幕可见 */
  .flow__wave i { transform: none; }           /* 声波停在各自基准高度 = 静态波形 */

  /* 模块 01：两态切换瞬时（去掉 220ms 交叉淡入，功能不降级）。
     ★ 选择器带 [data-mode] 提升特异性：否则会被 §8 的 `.shot[data-mode="shot"] .shot__img`
       状态规则（同为更高特异性）盖过，transition 删不掉。 */
  .shot[data-mode] .shot__img,
  .shot[data-mode] .shot__param { transition: none; }

  /* 悬停：保留阴影/边框变化，去掉位移与缩放 */
  .card { transition: none; }
  .card:hover, .card:focus-visible { --hover-ty: 0px; --hover-s: 1; }

  /* 翻转：改为 200ms 交叉淡入，不做 3D 旋转 */
  .card__inner { transform: none; transition: none; }
  .face { backface-visibility: visible; -webkit-backface-visibility: visible; transition: opacity .2s linear; }
  .face--back { transform: none; opacity: 0; }
  .card.is-flipped .face--front { opacity: 0; }
  .card.is-flipped .face--back { opacity: 1; }
}