/* ============================================================
   鲸致 API — 落地页（lp.html）专属样式（双主题，html[data-theme]）
   结构复刻竞品转化叙事；类名 lp- 前缀，与 style.css / page.css 零耦合；
   本文件只被 lp.html 引用（[28]：单页 ≤2 样式表，勿引第三个）。
   ============================================================ */

/* ---------- 双主题：data-theme="light" | "dark" ----------
   2026-10-17 由「仅浅色（html.lp-light）」升级为可切换双主题。
   改配色只改这一节：风格变量 + 一组「语义分量」（底纹/细线/投影/光晕的基准色）。
   为什么用分量写法 rgb(var(--x-rgb) / 0.08)：同一色相在深色下要整体反向
   （墨色→白色、深蓝→亮蓝、白投影→黑投影），逐处写 rgba 就得维护两套值；
   变量化后两套主题各定义一次，所有引用自动翻转。
   深色不重复声明风格变量：直接继承 style.css 的深色 :root，
   dark 块只补深色独有的语义分量。切换与持久化在 lp.js（localStorage
   'lp-theme'）；首帧定色由 head 内联脚本完成（写在 html 的 data-theme 上，
   解析期生效，无闪烁）。无属性时（JS 被拦且 HTML 兜底被去掉）呈深色，
   即可读的 style.css 原生默认。 */
html[data-theme="light"] {
  --bg:            #F7F8FA;
  --bg-alt:        #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #FBFCFD;
  --border:        rgb(16 18 22 / 0.09);
  --border-strong: rgb(16 18 22 / 0.16);
  --text:          #17181C;
  --text-dim:      #4A4F57;
  --text-mute:     #6B7078;

  --accent:        #E85D1F;   /* 填充向（按钮/品牌标记）：深字压上 5.3:1 */
  --accent-hover:  #F26A2E;
  --accent-soft:   rgb(232 93 31 / 0.09);
  --accent-deep:   #C2490B;   /* 文字向（eyebrow/方法徽章）：白底 4.8:1 */
  --blue:          #2F6FBF;   /* 冷色信息层加深：白底 5:1 */

  /* 语义分量（空格分隔 RGB，供 rgb(var(--x-rgb) / a) 使用） */
  --veil-rgb:   247 248 250;  /* 页底色：hero 压暗、光束拖影、开屏底 */
  --ink-rgb:    16 18 22;     /* 墨色：底纹、细线、点阵、网格、芯片底 */
  --shade-rgb:  16 18 22;     /* 投影专用（深色下必须转纯黑，不随墨色翻白） */
  --accent-rgb: 232 93 31;
  --blue-rgb:   47 111 191;
  --ok-rgb:     58 155 110;
  --warn-rgb:   200 140 40;
  /* 光束三件套**只被 canvas 读**，与 UI 的 --blue-rgb 解耦：
     改它不会动按钮/边框/图表的蓝色。深底上必须单独收，理由见 --beam-gain。 */
  --beam-blue-rgb: 47 111 191;  /* 线束基色 */
  --beam-hot-rgb: 126 174 238;  /* 粒子头亮档（白底上的热点） */
  --beam-gain:  1;              /* 强度系数（全部 alpha 统一乘它） */
}
html[data-theme="dark"] {
  /* 风格变量（--bg/--surface/--text/--blue/--accent…）继承 style.css 深色 :root */
  --accent-deep: #FF9B6B;     /* 深底上的橙文字：提亮一档 */
  --veil-rgb:   15 15 16;
  --ink-rgb:    255 255 255;
  --shade-rgb:  0 0 0;
  --accent-rgb: 255 122 69;
  --blue-rgb:   127 179 232;
  --ok-rgb:     91 201 138;
  --warn-rgb:   232 180 91;
  /* 深色光束：**必须比浅色暗得多**，不是审美取舍而是混色方式的必然结果——
     canvas 的粒子与核心用 globalCompositeOperation='lighter'（加色），
     深底上每帧都在"往上加光"，残影衰减只有 7.5%/帧（--veil-rgb 那条），
     于是同一组 alpha 在浅底是柔和微光、在深底叠成白光团，把文案冲淡。
     实测 0.62 仍然过曝（hero 文字区被淹没），收到 0.34 才回到"克制的蓝光"。
     基色也一并压深、粒子头由近白改为浅蓝：加色后才是蓝光而不是白噪点。 */
  --beam-blue-rgb: 74 128 196;
  --beam-hot-rgb: 152 200 250;
  --beam-gain:  0.34;
}
/* style.css 组件的写死深色语义 → 浅色覆盖（只影响本页；深色走 style.css 原值） */
html[data-theme="light"] .nav.scrolled {
  background: rgba(255, 255, 255, 0.82);
}
/* 端点区的实底改半透明纱：光束隐约透出（不挡文字对比度） */
html[data-theme="light"] .sec-alt {
  background: rgba(255, 255, 255, 0.86);
}
html[data-theme="light"] .tag-pill {
  background: rgb(var(--ink-rgb) / 0.03);
}
html[data-theme="light"] code {
  background: rgb(var(--blue-rgb) / 0.07);
}
html[data-theme="light"] .btn-ghost:hover {
  background: rgb(var(--ink-rgb) / 0.04);
}
html[data-theme="light"] .code-head {
  background: rgb(var(--ink-rgb) / 0.025);
}
/* 原 #C9D4E2 是深底代码区的浅色字，白卡上不可读 */
html[data-theme="light"] .code-body {
  color: #2A3140;
}
/* eyebrow 是暖橙文字向用法：白底上用加深档（填充向 --accent 只有 3.5:1） */
html[data-theme="light"] .sec-eyebrow {
  color: var(--accent-deep);
}
html[data-theme="light"] .hero-glow {
  background: radial-gradient(ellipse at center,
              rgb(var(--blue-rgb) / 0.07) 0%,
              rgb(var(--blue-rgb) / 0.015) 42%,
              transparent 70%);
}
/* 移动端下拉投影：style.css 的浓黑投影在白底发脏；该规则在其 720px 查询里，
   覆盖必须同 queries */
@media (max-width: 720px) {
  html[data-theme="light"] .nav-links {
    box-shadow: 0 18px 34px rgb(var(--shade-rgb) / 0.12);
  }
}

/* ---------- 主题切换按钮（导航右侧） ----------
   两态图标同屏、由 CSS 依 data-theme 决定显示哪个，JS 只切属性不拼字符串
   （图标不参与无障碍树，状态由 aria-pressed 表达）。 */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
              background 0.25s var(--ease);
}
.theme-toggle:hover {
  color: var(--text);
  border-color: var(--text-mute);
  background: rgb(var(--ink-rgb) / 0.04);
}
.theme-toggle svg {
  width: 16px;
  height: 16px;
}
/* 浅色显示月亮（点了去深色）；深色显示太阳。 */
.theme-toggle-sun { display: none; }
html[data-theme="dark"] .theme-toggle-sun { display: block; }
html[data-theme="dark"] .theme-toggle-moon { display: none; }

/* ---------- 滚动渐入（lp.js IO 驱动） ----------
   无 .js 类直接呈现终态；仅 JS 可用才渐入——被拦 / 404 时内容永远可见。 */
html.js .lp-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--d, 0s);
}
html.js .lp-reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 首屏 Hero ---------- */
.lp-hero {
  position: relative;
  padding: 96px 0 80px;
  overflow: hidden;
}
.lp-hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}
/* grid 子项防御：长 URL/代码不把列宽撑破（min-width:0 是 grid/flex 惯常配） */
.lp-hero-copy {
  min-width: 0;
}
.lp-hero-title {
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 20px 0 18px;
}

/* ---------- Hero 放射光束背景（Canvas 2D，零依赖） ----------
   复刻竞品 WebGL 信号场（lane 粒子流 → 拖影衰减 → bloom → 合成）的表意：
   自核心放射的泳道细线束（近核亮 / 远端淡、带柔和弯曲）+ 沿线流动的发光粒子
   + 核心呼吸光斑。
   为什么不是 WebGL：[26] 零依赖约束下不为装饰层引着色器，且 [28] 性能预算
   只剩个位数 KB；Canvas 2D 足以表意。装饰层 pointer-events:none；
   reduced-motion 时 lp.js 只画静态帧；无 JS 时 .hero-glow 兜底表意。
   🔴 覆盖范围＝hero 版块：absolute 填满 .lp-hero（父级 overflow:hidden 裁剪），
   不再是全屏 fixed —— 下方版块背景一律无光。 */
.lp-beams {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* 文案区压暗：对照竞品 shader 的 uShield（"dim the field under the hero copy"）。
   页底色渐变，左侧文案背后几乎全遮、终端卡一侧全透 —— 光束浓淡拉开层次，
   标题读起来不受干扰。拿掉只是背景更花，信息不缺。 */
.lp-hero-shield {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(97deg,
              rgb(var(--veil-rgb) / 0.94) 0%,
              rgb(var(--veil-rgb) / 0.80) 32%,
              rgb(var(--veil-rgb) / 0.30) 56%,
              rgb(var(--veil-rgb) / 0) 76%);
}
/* 窄屏是单列（文案在上、终端卡在下），压暗改为纵向 */
@media (max-width: 900px) {
  .lp-hero-shield {
    background: linear-gradient(180deg,
                rgb(var(--veil-rgb) / 0.88) 0%,
                rgb(var(--veil-rgb) / 0.42) 46%,
                rgb(var(--veil-rgb) / 0) 68%);
  }
}

/* ============ 开屏乱码解码（.lp-splash-title） ============
   拆字动画由 lp.js 驱动（动态创建，HTML 不写死——JS 被拦不挡页面）。
   ⚠️ 两个实测踩过的坑（headless Chrome，勿改回）：
   ① 字符不能用 position:relative + ::after 显示符号——relative 后代
      inline 上 background-clip:text 渐变不渲染；
   ② 标题不能套 .grad（透明填充 + 渐变）——拆字 span 一多整词隐形。
   故锁定态用纯色；字符 inline-block + min-width:1em 定宽居中防抖动。 */
.lp-splash-title .lp-ch {
  display: inline-block;
  min-width: 1em;
  text-align: center;
}
.lp-splash-title .lp-ch.is-decoding {
  color: var(--blue);
  text-shadow: 0 0 14px rgb(var(--blue-rgb) / 0.32);
}
@keyframes lp-ch-lock {
  from { text-shadow: 0 0 14px rgb(var(--blue-rgb) / 0.4); }
  to   { text-shadow: 0 0 0 rgb(var(--blue-rgb) / 0); }
}
.lp-splash-title .lp-ch.is-locked {
  animation: lp-ch-lock 0.5s ease-out;
}

/* ---------- 开屏层（lp.js 动态创建：标题 + 英文小字） ----------
   居中解码「鲸致API」→ 英文小字淡入 → 停留 → 放大 3.5% 淡出揭幕，
   主内容随揭幕渐入；锁滚动用 html.lp-splash-on。 */
html.lp-splash-on,
html.lp-splash-on body {
  overflow: hidden;
}
/* z-index 90：**压住内容（内容最高只到 1），但低于 .nav 的 100**。
   这不是随手取的数——开屏层原本 9999，实测把页头一起盖住了，
   于是开屏那 1.9s 内点汉堡 / 登录 / CTA 全部无反应（第一下被开屏当
   「交互跳过」吃掉）。开屏的语义是「主内容随揭幕渐入」，导航属于
   页面外壳、不在揭幕范围内，理应始终可点。
   抬到内容之上后：页头自身背景透明，看到的仍是开屏底色，视觉与平时一致。
   ⚠️ 改这个值前先确认：内容层若出现 z-index ≥ 90 的元素，开屏就压不住它了。 */
.lp-splash {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  /* 品牌氛围：居中暖橙微光 + 外围蓝灰氛围，克制不发散 */
  background-image:
    radial-gradient(42% 34% at 50% 44%, rgb(var(--accent-rgb) / 0.07), transparent 70%),
    radial-gradient(64% 48% at 50% 58%, rgb(var(--blue-rgb) / 0.06), transparent 72%);
}
.lp-splash.is-out {
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  pointer-events: none;
}
/* 交互跳过 / 兜底强制收尾：快速淡出，不让用户等 */
.lp-splash.is-quick {
  transition-duration: 0.18s;
}
.lp-splash-inner {
  text-align: center;
  padding: 0 24px;
}
.lp-splash-title {
  font-size: clamp(2.6rem, 11vw, 4.6rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.lp-splash-sub {
  margin-top: 22px;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em; /* 补偿 letter-spacing 尾部空隙，保持视觉居中 */
  color: var(--text-mute);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.lp-splash-sub.is-in {
  opacity: 1;
  transform: translateY(0);
}
.lp-hero-sub {
  color: var(--text-dim);
  font-size: 1.05rem;
  max-width: 34em;
}
.lp-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}
.lp-hero-note {
  margin-top: 18px;
  font-size: 0.86rem;
  color: var(--text-mute);
  letter-spacing: 0.04em;
}

/* ---------- 终端打字机卡（复刻竞品 RouteConsole） ----------
   head → body（等宽命令区）→ status → foot；逐字输入与状态栏由 lp.js 驱动，
   HTML 内即完整命令，无 JS / reduced-motion 保持终态。 */
.lp-terminal {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 20px 44px -24px rgb(var(--shade-rgb) / 0.16);
  padding: 14px 16px 12px;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lp-terminal:hover {
  transform: translateY(-3px);
  border-color: rgb(var(--ink-rgb) / 0.22);
}
.lp-terminal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 2px 12px;
}
.lp-terminal-dots {
  display: inline-flex;
  gap: 6px;
  flex: none;
}
.lp-terminal-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgb(var(--ink-rgb) / 0.16);
}
.lp-terminal-title {
  font-size: 0.8rem;
  color: var(--text-mute);
  font-family: var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-terminal-tag {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--blue);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 9px;
  flex: none;
}
.lp-terminal-body {
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.85;
  background: rgb(var(--ink-rgb) / 0.045);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 6px);
  padding: 14px 16px;
  min-height: 132px;
  overflow-x: auto;
  transition: opacity 0.3s var(--ease); /* 循环重播前的淡出由 JS 置 inline opacity 驱动 */
}
.lp-terminal-body pre {
  margin: 0;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.lp-terminal-body code {
  font: inherit;
  color: var(--text);
}
/* 提示符 $ / >：站点蓝；字符串参数：提亮一档（终端惯例但不跳色） */
.lp-terminal-prompt {
  color: var(--blue);
  user-select: none;
}
.lp-terminal-str {
  color: var(--text-dim);
}
/* 光标：跟随输入位置的闪烁竖条（宽度走 em，随字号缩放） */
.lp-terminal-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--blue);
  border-radius: 1px;
  animation: lp-cursor-blink 1.05s steps(2, start) infinite;
}
@keyframes lp-cursor-blink {
  to { visibility: hidden; }
}
.lp-terminal-status {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 4px 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-mute);
}
.lp-terminal-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lp-terminal-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  animation: lp-live-pulse 2.4s ease-in-out infinite;
}
@keyframes lp-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.lp-terminal-status b {
  font-weight: 600;
  color: var(--text-dim);
}
/* 状态推进：数字到位时提亮一档（JS 加 is-live，完成一行 lines+1） */
.lp-terminal-status .is-live {
  color: var(--blue);
}
/* status 是 flex：lines 文本防压缩、last 靠右 */
.lp-terminal-lines {
  flex: none;
}
.lp-terminal-last {
  margin-left: auto;
}
.lp-terminal-foot {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--text-mute);
}
.lp-terminal-foot a {
  color: var(--blue);
}

/* ---------- 终端卡内的请求流向图（client → gateway → line） ----------
   虚线位移（stroke-dashoffset）表示"请求在链路上跑"，端点脉冲表示在用的线路；
   比竞品的 WebGL 光束省得多，表意一致。颜色走 class（SVG 属性不吃 var()）。 */
.lp-flow {
  margin-top: 14px;
  padding: 0 2px;
}
.lp-flow svg {
  display: block;
  width: 100%;
  height: auto;
}
.lp-flow-wire {
  stroke: rgb(var(--ink-rgb) / 0.16);
}
.lp-flow-live {
  stroke: var(--blue);
  stroke-dasharray: 9 78;
  animation: lp-flow-run 2.6s linear infinite;
}
@keyframes lp-flow-run {
  from { stroke-dashoffset: 87; }
  to   { stroke-dashoffset: 0; }
}
.lp-flow-gw {
  fill: var(--surface-2);
  stroke: var(--blue);
  stroke-opacity: 0.5;
}
.lp-flow-core {
  fill: var(--blue);
}
.lp-flow-dot {
  fill: var(--text-mute);
}
.lp-flow-end {
  fill: none;
  stroke: rgb(var(--ink-rgb) / 0.28);
}
.lp-flow-end.is-on {
  fill: var(--blue);
  stroke: var(--blue);
  animation: lp-flow-pulse 2.6s ease-in-out infinite;
}
@keyframes lp-flow-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
.lp-flow-tags text {
  fill: var(--text-mute);
  font-family: var(--mono);
  font-size: 8.5px;
}

/* ---------- 密钥版块文案：滚动逐块点亮（复刻竞品 statement-unit） ----------
   初始透明度只在 html.js 下降低：脚本被拦时整段照常全亮（内容优先）。
   实际点亮值由 lp.js 按滚动进度写 inline opacity（故此处只需给过渡与初始态）。 */
html.js .lp-key-lede.is-typed .t-unit {
  opacity: 0.18;
}
.lp-key-lede .t-unit {
  transition: opacity 0.45s var(--ease);
}

/* ---------- 密钥版块：一把密钥 ----------
   左编辑式大字段落 + 右侧雷达视觉，全部 CSS / 内联 SVG，零 JS：点阵底、
   雷达环（r=140/100 + 12 等分刻度，四向主刻度引准线）、conic 46° 拖影
   8s 旋转、密钥卡微浮 + 辉光呼吸；卡内掩码串 sk-****7f3a 非真密钥。 */
.lp-key {
  padding: 88px 0 96px;
}
.lp-key-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
.lp-key-copy {
  min-width: 0;
}
.lp-key-eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent-deep);
  margin-bottom: 18px;
}
.lp-key-lede {
  font-size: clamp(1.3rem, 2.6vw, 1.72rem);
  line-height: 1.62;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-dim);
}
/* 模型清单提亮一档（b 语义：站内承诺的模型，models.html 为真源） */
.lp-key-lede b {
  color: var(--text);
  font-weight: 700;
}
.lp-key-visual {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  aspect-ratio: 1;
}
/* 点阵底（竞品右侧的点阵网格）：边缘径向淡出，不抢环与卡 */
.lp-key-visual::before {
  content: "";
  position: absolute;
  inset: -6%;
  background-image: radial-gradient(rgb(var(--ink-rgb) / 0.1) 1px, transparent 1.2px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 76%);
  mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 76%);
  pointer-events: none;
}
.lp-key-radar {
  position: absolute;
  inset: 0;
}
.lp-key-rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* 扫描扇形：直径 = 外环（viewBox 400 的 r=140 → 70%），conic 46° 拖影 */
.lp-key-sweep {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgb(var(--blue-rgb) / 0.14) 0deg,
    rgb(var(--blue-rgb) / 0.045) 26deg,
    transparent 46deg,
    transparent 360deg);
  animation: lp-key-sweep 8s linear infinite;
  pointer-events: none;
}
@keyframes lp-key-sweep {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
/* 卡片背后蓝色径向辉光：呼吸（不闪烁，克制） */
.lp-key-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--blue-rgb) / 0.1), transparent 65%);
  animation: lp-key-breathe 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lp-key-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
/* 密钥卡：与终端卡同源的玻璃卡语言（surface-2 → surface 渐变 + 内高光） */
.lp-key-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(208px, 54%);
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 22px 20px 18px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 24px 48px -20px rgb(var(--shade-rgb) / 0.18);
  animation: lp-key-float 5s ease-in-out infinite;
}
@keyframes lp-key-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(-4px); }
  50%      { transform: translate(-50%, -50%) translateY(4px); }
}
/* 钥匙图标：站点蓝渐变圆角方块（唯一彩色焦点，不发光过度） */
.lp-key-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(160deg, #6fa8e0, #4a86c8);
  color: #ffffff;
  box-shadow: 0 6px 16px -6px rgb(var(--blue-rgb) / 0.45);
}
.lp-key-icon svg {
  width: 20px;
  height: 20px;
}
.lp-key-str {
  font-family: var(--mono);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--text);
}
.lp-key-label {
  font-size: 0.72rem;
  color: var(--text-mute);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
}

/* ---------- 第三屏：幕后 ----------
   六卡网格（3+2+1 通栏），卡面语言同三步卡。
   ⚠️ SVG presentation attribute 不支持 var()（fill="var(--x)" 静默渲染成黑），
   图形色一律走 .w-* class；卡内数字均为示意值，不构成性能承诺。 */
.lp-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.lp-why {
  /* 局部语义色：实色给状态点，soft 给热力图格（白底上不发脏） */
  --ok: rgb(var(--ok-rgb));
  --ok-soft: rgb(var(--ok-rgb) / 0.55);
  --warn-soft: rgb(var(--warn-rgb) / 0.65);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lp-why:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
}
.lp-why-art {
  background: rgb(var(--ink-rgb) / 0.035);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  min-height: 152px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-why-art svg {
  display: block;
  width: 100%;
  height: auto;
}
/* SVG 图形色（attribute 不能写 var()，故走 class） */
.lp-why-art .w-mute { fill: var(--text-mute); font-family: var(--mono); }
.lp-why-art .w-dim  { fill: var(--text-dim); font-family: var(--mono); }
.lp-why-art .w-tag  { font-family: var(--mono); }
.lp-why-art .w-blue { fill: var(--blue); }
.lp-why-art .w-sblue { stroke: var(--blue); }
.lp-why-art .w-gw { fill: var(--surface-2); stroke: var(--blue); stroke-opacity: 0.55; }
/* 细线 / 芯片 / 渐变填充：原本写死浅底墨色与深蓝，深色下要么看不见要么发暗，
   故按语义分档（class 覆盖 presentation attribute —— CSS 优先于 SVG 属性）。
   属性值保留作兜底，两者等价，改色只改这几行。 */
.lp-why-art .w-line   { stroke: rgb(var(--ink-rgb) / 0.16); }
.lp-why-art .w-line-2 { stroke: rgb(var(--ink-rgb) / 0.22); }
.lp-why-art .w-line-3 { stroke: rgb(var(--ink-rgb) / 0.12); }
.lp-why-art .w-chip   { fill: rgb(var(--blue-rgb) / 0.1); stroke: rgb(var(--blue-rgb) / 0.28); }
#lp-why-area .w-stop-a { stop-color: rgb(var(--blue-rgb) / 0.22); }
#lp-why-area .w-stop-b { stop-color: rgb(var(--blue-rgb) / 0); }
/* 密钥雷达环 / 刻度：同上（原 5 档墨色写死在 SVG 属性里） */
.lp-key-rings .k-ring      { stroke: rgb(var(--ink-rgb) / 0.16); }
.lp-key-rings .k-ring-2    { stroke: rgb(var(--ink-rgb) / 0.08); }
.lp-key-rings .k-tick      { stroke: rgb(var(--ink-rgb) / 0.20); }
.lp-key-rings .k-tick-main { stroke: rgb(var(--ink-rgb) / 0.34); }
.lp-key-rings .k-tick-out  { stroke: rgb(var(--ink-rgb) / 0.15); }
/* 高亮端点脉冲（与终端 live 点同语言，reduced-motion 停） */
.lp-why-pulse {
  animation: lp-why-pulse 2.4s ease-in-out infinite;
}
@keyframes lp-why-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.lp-why h3 {
  font-size: 1.02rem;
}
.lp-why p {
  color: var(--text-dim);
  font-size: 0.88rem;
}
.lp-why p a {
  color: var(--blue);
}

/* 计量小票（等宽对齐，行底线分隔；总额行提亮） */
.lp-why-meter {
  width: 100%;
  max-width: 240px;
  font-family: var(--mono);
  font-size: 0.72rem;
}
.lp-why-meter-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-mute);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.lp-why-meter-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--blue);
}
.lp-why-meter-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
}
.lp-why-meter-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 3px 0;
  color: var(--text-mute);
}
.lp-why-meter-row b {
  color: var(--text-dim);
  font-weight: 600;
}
.lp-why-meter-total {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 7px;
}
.lp-why-meter-total b {
  color: var(--text);
}

/* 额度双条（quota 进度 + rpm 限额）+ 语义标签 */
.lp-why-quota {
  width: 100%;
  max-width: 240px;
}
.lp-why-quota-top {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-mute);
  margin-bottom: 6px;
}
.lp-why-quota-top b {
  color: var(--text-dim);
}
.lp-why-bar {
  height: 8px;
  border-radius: 999px;
  background: rgb(var(--ink-rgb) / 0.08);
  overflow: hidden;
  margin-bottom: 14px;
}
.lp-why-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgb(var(--blue-rgb) / 0.45), var(--blue));
}
.lp-why-bar-thin {
  height: 5px;
  margin-bottom: 12px;
}
.lp-why-quota-foot {
  display: flex;
  gap: 8px;
}
.lp-why-quota-tag {
  font-size: 0.7rem;
  color: var(--text-mute);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
}

/* 跨两列卡：「调用明细」。三列布局下最后一行只有 2 张卡（4、5），
   不跨列就在右侧留一个空格子 —— 实测截图里那块空白很明显。
   跨列后该卡的折线图也随之变宽，反而更贴合"24h 调用趋势"的语意。 */
.lp-why-span2 {
  grid-column: span 2;
}

/* 通栏卡：渠道监控（文案在左、热力图在右） */
.lp-why-wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 32px;
}
.lp-why-wide-copy {
  flex: 1;
  min-width: 0;
}
.lp-why-heat {
  flex: 1.2;
  display: grid;
  gap: 8px;
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.lp-why-heat-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.lp-why-heat-name {
  font-size: 0.76rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.lp-why-heat-cells {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
}
.lp-why-heat-cells i {
  height: 14px;
  border-radius: 3px;
}
.lp-why-heat-cells i.ok {
  background: var(--ok-soft);
}
.lp-why-heat-cells i.warn {
  background: var(--warn-soft);
}
.lp-why-heat-lat {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-mute);
}

/* ---------- 卡片动效（参数对齐竞品 HomeView-DnjtWxAI.css bento 族） ----------
   IO 加 is-running 才 running；⚠️ paused 前置 html.lp-ready——JS 被拦时
   动画照常循环，不停 0% 空帧。 */
@keyframes lp-why-packet{0%{offset-distance:0;opacity:0}10%,85%{opacity:1}to{offset-distance:100%;opacity:0}}
@keyframes lp-why-fill{0%{transform:scaleX(0)}45%,85%{transform:scaleX(1)}to{transform:scaleX(1);opacity:.45}}
@keyframes lp-why-block{0%{opacity:.12}30%,to{opacity:1}}
@keyframes lp-why-over{0%,71%,to{background:rgb(var(--ink-rgb) / .05)}30%,70%{background:rgb(var(--warn-rgb) / .6)}}
@keyframes lp-why-draw{0%{stroke-dashoffset:1}60%,to{stroke-dashoffset:0}}
@keyframes lp-why-fade{0%,30%{opacity:0}70%,to{opacity:1}}
@keyframes lp-why-pop{0%,55%{opacity:0;transform:scale(.4)}65%,to{opacity:1;transform:scale(1)}}
@keyframes lp-why-blink{50%{opacity:.25}}
@keyframes lp-why-sweep{from{transform:translate(-100%)}to{transform:translate(560%)}}
/* 数据包：--p 是 SVG path 数据（写在元素 style 上），offset-path 沿路径跑 */
.lp-why-pk{offset-path:path(var(--p));animation:lp-why-packet var(--pd,2.4s) linear var(--pl,0s) infinite}
.lp-why-fill{transform-origin:left;animation:lp-why-fill var(--fd,3.6s) var(--ease) var(--fl,0s) infinite}
.lp-why-meter-total b{grid-column:3}
.lp-why-mbar{height:4px;border-radius:999px;background:rgb(var(--ink-rgb) / .08);overflow:hidden}
.lp-why-mbar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,rgb(var(--blue-rgb) / .4),var(--blue))}
.lp-why-blocks{display:flex;gap:3px;margin-top:10px}
.lp-why-blocks i{flex:1;height:8px;border-radius:2px;background:rgb(var(--ink-rgb) / .08);animation:lp-why-block 4s steps(1) calc(var(--i) * .14s) infinite}
.lp-why-blocks i.is-over{animation-name:lp-why-over}
.lp-why-spark-line{stroke-dasharray:1;animation:lp-why-draw 4.5s var(--ease) infinite}
.lp-why-spark-area{animation:lp-why-fade 4.5s var(--ease) infinite}
.lp-why-spark-dot{transform-box:fill-box;transform-origin:center;animation:lp-why-pop 4.5s var(--ease) infinite}
.lp-why-meter-live i,.lp-why-heat-cells i:last-child{animation:lp-why-blink 1.4s ease-in-out infinite}
.lp-why-sweep{position:absolute;top:0;bottom:0;left:0;width:16%;background:linear-gradient(100deg,transparent,rgb(var(--blue-rgb) / .14),transparent);animation:lp-why-sweep 3.2s linear infinite}
/* JS 就绪后才受 IO 暂停；脚本被拦时动画照常循环（内容不陪葬） */
html.lp-ready :is(.lp-why-pk,.lp-why-fill,.lp-why-blocks i,.lp-why-spark-line,.lp-why-spark-area,.lp-why-spark-dot,.lp-why-meter-live i,.lp-why-heat-cells i:last-child,.lp-why-sweep){animation-play-state:paused}
/* ⚠️ #lp-why=版块，.lp-why=卡片，勿混 */
#lp-why.is-running :is(.lp-why-pk,.lp-why-fill,.lp-why-blocks i,.lp-why-spark-line,.lp-why-spark-area,.lp-why-spark-dot,.lp-why-meter-live i,.lp-why-heat-cells i:last-child,.lp-why-sweep){animation-play-state:running}

/* ---------- 方法徽章（GET/POST/KEY 三态，色相区分不靠发光） ---------- */
.lp-ep-method {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  flex: none;
}
.lp-ep-method.post {
  color: var(--accent-deep);
  background: var(--accent-soft);
  border-color: rgb(var(--accent-rgb) / 0.25);
}
.lp-ep-method.get {
  color: var(--blue);
  background: rgb(var(--blue-rgb) / 0.08);
  border-color: rgb(var(--blue-rgb) / 0.22);
}
.lp-ep-method.auth {
  color: var(--text-dim);
  background: rgb(var(--ink-rgb) / 0.04);
}

/* ---------- 第一屏：三步接入 ---------- */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.lp-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px 26px;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lp-step:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
}
.lp-step-num {
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-mute);
  line-height: 1;
  margin-bottom: 16px;
}
.lp-step h3 {
  font-size: 1.08rem;
  margin-bottom: 8px;
}
.lp-step p {
  color: var(--text-dim);
  font-size: 0.92rem;
}

/* 代码卡（结构复用全站 .code-card，这里只加间距与标题字色） */
.lp-code {
  max-width: 760px;
}
.lp-code-title {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* ---------- 第二屏：端点与客户端 ---------- */
.lp-eps {
  display: grid;
  gap: 12px;
  max-width: 760px;
  margin-bottom: 36px;
}
.lp-ep {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.lp-ep:hover {
  border-color: var(--border-strong);
  transform: translateX(2px);
}
.lp-ep-path {
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.lp-ep-desc {
  color: var(--text-mute);
  font-size: 0.84rem;
  text-align: right;
}

/* 客户端清单改横向滚动带（marquee）：标签在上、带在下的块级容器 */
.lp-clients-block {
  margin-bottom: 22px;
}
.lp-clients-label {
  font-size: 0.84rem;
  color: var(--text-mute);
  margin-bottom: 12px;
}
/* 芯片：静态列表与滚动带共用同一套外观（带内是 b 元素，故并列选择器） */
.lp-chip,
.lp-marquee-seq b {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--text-dim);
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 4px 14px;
  white-space: nowrap;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.lp-chip:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.lp-endpoints-note {
  font-size: 0.88rem;
  color: var(--text-mute);
}
.lp-endpoints-note a {
  color: var(--blue);
  border-bottom: 1px solid rgb(var(--blue-rgb) / 0.3);
}
.lp-endpoints-note a:hover {
  border-bottom-color: var(--blue);
}

/* ============ 模型墙（.lp-vendors） ============
   厂商卡网格 + 底部滚动带。厂商标记是文字缩写 + 色相区分（零依赖，
   不引第三方 logo 素材）；清单来自 models.html「已公示单价」，见 lp.html 注释。 */
.lp-vendors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}
.lp-vendor {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 20px 18px;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lp-vendor:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
}
.lp-vendor-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.lp-vendor-mark {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 30px;
  padding: 0 7px;
  border-radius: 9px;
  border: 1px solid rgb(var(--blue-rgb) / 0.28);
  background: rgb(var(--blue-rgb) / 0.1);
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.lp-vendor h3 {
  font-size: 0.98rem;
  font-weight: 600;
}
.lp-vendor-list {
  list-style: none;
  display: grid;
  gap: 7px;
}
.lp-vendor-list code {
  font-size: 0.76rem;
}

/* ============ 滚动带（复刻竞品 marquee） ============
   两份等宽序列首尾相接，位移 -50% 即无缝循环（故 track 不能有 gap，
   间距由序列内 gap + 序列尾部 padding 提供，否则第二份会错开一个间隙）。
   JS 就绪前停住：html.lp-ready 是 lp.js 打的标记，脚本被拦时不滚也不错位。
   悬停暂停（鼠标能停住看清）。 */
.lp-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.lp-marquee-track {
  display: flex;
  width: max-content;
  animation: lp-marquee 34s linear infinite;
  animation-play-state: paused;
}
html.lp-ready .lp-marquee-track {
  animation-play-state: running;
}
.lp-marquee:hover .lp-marquee-track {
  animation-play-state: paused;
}
.lp-marquee-seq {
  display: flex;
  gap: 10px;
  padding-right: 10px;
}
@keyframes lp-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.lp-marquee-chip .lp-marquee-seq b {
  font-weight: 500;
}
.lp-marquee-seq b {
  font-weight: 500;
}

/* ============ 对比表（.lp-compare） ============
   三列网格 + 一道横向扫描光带（竞品 compareBeam）。
   中列写「逐一开通各家」的常见代价，不点名任何厂商的评测结论。 */
.lp-compare {
  position: relative;
  max-width: 60rem;
  margin: 0 auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  overflow: hidden;
}
.lp-compare-beam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 24%;
  background: linear-gradient(100deg,
              transparent,
              rgb(var(--blue-rgb) / 0.13),
              transparent);
  animation: lp-compare-beam 6s linear infinite;
  pointer-events: none;
}
@keyframes lp-compare-beam {
  from { transform: translateX(-130%); }
  to   { transform: translateX(560%); }
}
.lp-compare-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  font-size: 0.94rem;
}
.lp-compare-row:first-of-type {
  border-top: 0;
}
.lp-compare-head {
  color: var(--text-mute);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.lp-compare-us {
  color: var(--accent-deep);
}
.lp-compare-key {
  color: var(--text);
  font-weight: 600;
}
.lp-compare-no {
  color: var(--text-mute);
}
.lp-compare-yes {
  color: var(--text-dim);
}
/* × / ✓ 用伪元素画，不写进 HTML（读屏器不会被符号打断，语义由文字承担） */
.lp-compare-no::before,
.lp-compare-yes::before {
  font-weight: 700;
  margin-right: 8px;
}
.lp-compare-no::before {
  content: "\00d7";
  color: var(--text-mute);
}
.lp-compare-yes::before {
  content: "\2713";
  color: rgb(var(--ok-rgb));
}

/* ============ FAQ（左标题 + 右原生 details 列表） ============ */
.lp-faq-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 48px;
  align-items: start;
}
.lp-faq-side .sec-title {
  margin-bottom: 12px;
}
.lp-faq-side .sec-desc {
  margin: 0;
  text-align: left;
  max-width: 30em;
}
.lp-faq-side a {
  color: var(--blue);
}
.lp-faq .faq-q {
  font-size: 1rem;
}

/* ============ 收尾 CTA（.lp-finale） ============
   竞品 finale 的对应块：大圆角面板 + 同心圆环（外圈虚线慢转）+ 呼吸光晕。
   全部纯 CSS，reduced-motion 下 style.css 的全局规则会停掉 animation。 */
.lp-finale {
  padding: 84px 0 96px;
}
.lp-finale-box {
  position: relative;
  overflow: hidden;
  padding: 74px 32px 78px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--surface);
  text-align: center;
}
.lp-finale-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lp-finale-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 440px;
  height: 440px;
  margin: -220px 0 0 -220px;
  border: 1px solid rgb(var(--blue-rgb) / 0.18);
  border-radius: 50%;
}
.lp-finale-ring-b {
  width: 640px;
  height: 640px;
  margin: -320px 0 0 -320px;
  border-style: dashed;
  border-color: rgb(var(--blue-rgb) / 0.13);
  animation: lp-finale-spin 64s linear infinite;
}
@keyframes lp-finale-spin {
  to { transform: rotate(360deg); }
}
.lp-finale-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 580px;
  height: 580px;
  margin: -290px 0 0 -290px;
  background: radial-gradient(circle,
              rgb(var(--blue-rgb) / 0.13),
              transparent 62%);
  animation: lp-finale-breathe 6.5s ease-in-out infinite;
}
@keyframes lp-finale-breathe {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
.lp-finale-copy {
  position: relative;
  z-index: 1;
}
.lp-finale-eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent-deep);
  margin-bottom: 14px;
}
.lp-finale-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 650;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.lp-finale-sub {
  color: var(--text-dim);
  margin-bottom: 30px;
}
.lp-finale-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1020px) {
  .lp-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 900px) {
  .lp-hero {
    padding: 64px 0 56px;
  }
  .lp-hero-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .lp-key {
    padding: 64px 0 72px;
  }
  .lp-key-inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .lp-key-visual {
    margin: 0 auto;
    max-width: 360px;
  }
  .lp-steps {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .lp-why-grid {
    grid-template-columns: 1fr;
  }
  /* 必须撤销 span 2：单列栅格里 span 2 会凭空造出第二列 → 整页横向溢出。
     （test-nav-viewport [4] 的"任何视口都不出现横向滚动条"就是靠这条守住） */
  .lp-why-span2 {
    grid-column: auto;
  }
  .lp-why-wide {
    flex-direction: column;
    align-items: flex-start;
  }
  .lp-why-heat {
    width: 100%;
  }
  .lp-why-heat-cells i {
    height: 12px;
  }
  .lp-ep {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .lp-ep-desc {
    grid-column: 2;
    text-align: left;
  }
  .lp-hero-cta .btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* ---------- 新板块（模型墙 / 对比表 / FAQ / 收尾）响应式 ----------
   与上面的断点对齐（1020 / 900 / 640），单独成块便于阅读与回滚。 */
@media (max-width: 1020px) {
  .lp-vendors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lp-faq-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
}
@media (max-width: 900px) {
  /* 对比表：三列改纵向单列，表头行隐去（每条自带「对比项」标签） */
  .lp-compare-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 16px;
  }
  .lp-compare-head {
    display: none;
  }
  .lp-compare-key {
    font-size: 0.8rem;
    color: var(--text-mute);
    letter-spacing: 0.04em;
  }
}
@media (max-width: 640px) {
  .lp-vendors {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp-finale {
    padding: 56px 0 64px;
  }
  .lp-finale-box {
    padding: 52px 20px 56px;
    border-radius: 22px;
  }
  .lp-finale-ring {
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
  }
  .lp-finale-ring-b {
    width: 420px;
    height: 420px;
    margin: -210px 0 0 -210px;
  }
  .lp-finale-glow {
    width: 380px;
    height: 380px;
    margin: -190px 0 0 -190px;
  }
  .lp-finale-cta .btn {
    flex: 1 1 auto;
    text-align: center;
  }
  .lp-finale-sub br {
    display: none;
  }
}

/* ---------- 窄屏页头收口（本页比其它页多一个「主题切换」按钮） ----------
   实测（measure-nav-viewport 量到的盒宽）：390px 时 .nav-actions 因多出的
   切换按钮涨到 301px，品牌只剩 41px 可用宽度 → 「鲸致 API」折成两行，
   页头挤成一团；320px 只剩 73px，同样折行。
   按档位逐级收紧（全部只写在本页，不碰 style.css 的其它 13 页）：
     ≤720  缩小切换按钮、收紧间距
     ≤480  收起次要的「登录」（页脚「控制台」仍可进后台）
     ≤360  再收按钮内边距与品牌字号
   收口后各档品牌可用宽度 ≥ 80px，一行放得下；汉堡始终留在屏内可点。 */
@media (max-width: 720px) {
  .nav-actions { gap: 8px; }
  .theme-toggle { width: 32px; height: 32px; }
}
@media (max-width: 480px) {
  .nav-actions .btn-ghost { display: none; }
}
@media (max-width: 360px) {
  .nav-actions { gap: 6px; }
  .theme-toggle { width: 30px; height: 30px; }
  .btn { padding-left: 12px; padding-right: 12px; }
  .brand { font-size: 15px; }
  .brand-mark { width: 18px; height: 18px; }
}

/* ---------- 动效降级：prefers-reduced-motion 呈现终态 ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .lp-reveal,
  html.js .lp-reveal.in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .lp-terminal:hover,
  .lp-step:hover,
  .lp-ep:hover {
    transform: none;
  }
  .lp-terminal-cursor {
    animation: none;
  }
  .lp-terminal-dot {
    animation: none;
  }
  /* 密钥版块：扫描停静态帧（拖影停在初始角）、辉光停中等亮度、卡片停居中 */
  .lp-key-sweep {
    animation: none;
  }
  .lp-key-glow {
    animation: none;
    opacity: 0.7;
  }
  .lp-key-card {
    animation: none;
    transform: translate(-50%, -50%);
  }
  /* 幕后版块：高亮端点停常亮 */
  .lp-why-pulse {
    animation: none;
  }
  /* 卡片动效：全停 + 数据包隐藏（offset-distance 停在起点不如不显示） */
  .lp-why-pk {
    display: none;
  }
  .lp-why-fill,
  .lp-why-blocks i,
  .lp-why-spark-line,
  .lp-why-spark-area,
  .lp-why-spark-dot,
  .lp-why-meter-live i,
  .lp-why-heat-cells i:last-child,
  .lp-why-sweep {
    animation: none;
  }
  /* 新板块：滚动带停住（保留静态可读的芯片行）、对比光带隐去、
     收尾圆环与光晕停住（style.css 的全局 !important 已兜底，此处写明意图） */
  .lp-marquee-track {
    animation: none;
  }
  .lp-flow-live,
  .lp-flow-end.is-on {
    animation: none;
  }
  .lp-compare-beam {
    display: none;
  }
  .lp-finale-ring-b,
  .lp-finale-glow {
    animation: none;
  }
}