/* ═══════════════════════════════════════════════════════════════════════════
   QuotaFuse 官网 · 唯一样式表 —— 参照站 = terse-ai（terseai.org），v2
   ───────────────────────────────────────────────────────────────────────────
   2026-10-11 他的三句原话定义了这一趟：
     ·「我想我的官网 = terse-ai，llmcap 的综合」⇒ 视觉与叙事体 = terse，结构骨架 = llmcap
     ·「修复目前的网站样式，实现参考 terse-ai 的样式」
     ·「现在主要开发针对样式，我看看样式」⇒ 这一本只动样式：**页面一个字没改、一个类名没改**
       （闸门与判据吃的就是那些字面量，见 website/README.md 末段）。

   ── 从参照站现读并落进来的六条（不是"看起来像"，是逐条对过盘上那份真 CSS）────────
   参照物 = 盘上下载的 `terseai.org` 首页 + `terse-glass.css`（2026-10-11 本机抓，
   `%TEMP%\terse.html` / `terse-glass.css` / `terse-inline-1.css`）。它是**外部材料**，
   只当视觉参照读，不当文案出处（本站的对外句仍只认 WEBSITE-PLAN §4 白名单）。

   ① **黑舞台 + 粒子场**：bed 是四档近黑（`hsl(250,24%,5%→18%)` 的靛黑家族，与
      `网站设计.md` 的 `#0b0d10` / 卡片 `#161a21` 几乎同色），粒子层铺在最底下。
      本站的粒子那一层是他已经拍过要的（`assets/hero3d.js`，自托管 three + 自写 GPGPU），
      这一趟只把它与 bed 的色温对齐（`--ac` 一族同时喂 CSS 与 shader）。
   ② **去掉整幅"板子"**（参照站 `terse-glass.css` 那段 `No full-width plates` 的原话：
      「stacked down a hundred-screen page that is not a material, it is a stack of grey slabs」）。
      旧版 `.section--soft` 是一整幅 `rgba(255,255,255,.04)` + 上下描边的横板，`.section--dark`
      是另一幅 —— 两幅都把星野在段与段的接缝处才露出来，读起来像两块灰板夹着一条缝。
      这一趟：**band 全部透明**，段与段之间改用一道渐隐发丝线（参照站 `.stats-section::before`
      的那一形：`linear-gradient(90deg,transparent,accent,transparent)`）。
   ③ **玻璃只给"有边界的物件"**：卡片、下拉、终端窗、页脚。配方 = 近零填充
      （`linear-gradient(160deg, white .03, white .01)`）+ `--rim` 内高光 + 背板模糊。
      🔴 `--rim` 里那道 `inset 0 -26px 48px -34px` 是参照站的做法（玻璃下缘一道主色反光），
      本站照着落，但把它的薄荷换成了自己的青蓝。
   ④ **对比度由字自己带，不靠给文字加底**（参照站那段 `Type carries the contrast`）。
      黑底 + 粒子之上，正文的 0.72/0.38 白是会糊的 ⇒ 次级/三级文字抬到近白，
      再给"直接坐在场上"的大字挂一圈 halo。带自己底面的槽（终端、卡片、徽标、按钮）
      一律不挂（参照站同一段末尾的例外表），否则在块内读起来像套印重影。
   ⑤ **两档按钮**：主键 = 白填充 + 深墨（`--ink` 是 bed 那一档的实色，**不是**半透明的 bed
      —— 参照站有一段专门的注释：bed 转半透明之后 11 处主行动键的文字一起变成 5% 白，
      最要命的那颗直接读不出来）；次键 = 透明 + 1px 描边。
   ⑥ **标题那一档**：`clamp(34px,4.5vw,52px)` / `font-weight:900` / `letter-spacing:-2px` /
      `line-height:1.05`（参照站 `section h2` 原值）。首屏再大一档。

   ── 与参照站刻意不同的三处（不是漏，是本站的硬约束）────────────────────────────
   · **不引任何外部字体**。参照站走 Inter + JetBrains Mono；本站 B09 钉「页面与样式表
     0 个第三方域名请求」（引 CDN 字体 = 把访客 IP 交出去，与整站叙事方向相反）。
     ⇒ 字体栈里留着 `JetBrains Mono`/`Inter` 两个名字（访客本机装了就用），**一个字都不下载**。
   · **不做滚动定可见**。参照站 `.feat` 是 `opacity:0` + IntersectionObserver 加 `.vis`。
     本站上一轮正是被这一形咬过（`animation-timeline: view()` 把整页卡片留在 opacity:0，
     全页截图一片空），B15 现在钉死。⇒ 入场只挂时间、finite、播完停在可见态。
   · **主色不同**。参照站今天（2026-09-11 那版）是"每个字都白"的黑舞台；本站按
     `网站设计.md` 定的主色留青蓝 `#38bdf8`。**换回参照站今天的白/薄荷只改下面 `--ac` 那三行。**

   ── 这一趟修掉的四条（2560×1440 与 1600×1000 真浏览器现读，读数见 _probe/before.json）──
   ① 顶栏在 1600px 上**折成两行**（八页全中）：内容柱 1184px 装不下 10 格 + 品牌 + 两枚下拉。
      修法 = 顶栏**不再吃内容柱的宽度**（参照站 `nav{padding:14px 40px}` 的通栏形制），
      格距按视口收，≥1240px 恒为一行。
   ② 段与段之间那两幅灰板（②号，见上）。
   ③ 卡片只有 `inset 0 1px 0 white .06` 一层内高光 ⇒ 在近黑底上读不出"玻璃"，
      只有一团更黑的黑。修法 = ③号那道 `--rim`。
   ④ 首屏标题 100px/800 而段落标题 44px/780 —— 中间没有档，内页读起来与首页是两套。
      修法 = ⑥号那档 + 三档 fluid 尺度（display / section / body）。

   ── 第三趟（他两句原话：「这个粒子，效果动效太差了吧」＋「然后只要首屏才有？」）────────
   两条都成立 ⇒ 换手法，不是调参：
   · **覆盖**：粒子层从 `.hero` 里搬出来，成了 `<body>` 首个子的 `.qf-field`（`position:fixed`，
     `z-index:-1`）⇒ 八页从首屏到页脚**整站都在**。旧版只有首屏有，第二屏往下是一块平的黑。
   · **质量**：`assets/hero3d.js`（three.js + 自写 GPGPU，一团均匀点云）整支撤下，换成
     `assets/field.js` —— 原生 WebGL 手写，原样移植参照站 `terse-cosmos.js` 的 PULSE 层：
     高斯脊**极光丝带** + 星尘车道 + 同批点画两遍的**双通道泛光** + 点精灵**可读性暗环**
     + 冲击包络的**节奏**。顺带把 660 KB 的自托管 three.js 一起撤了（这一层零依赖）。
     这一支的细节与逐条出处写在 `assets/field.js` 的文件头。

   闸门与判据吃的那几处**逐字保留**（改样式不许把它们碰掉）：
   · `.hero__particles` 规则体里 `pointer-events: none` 必须在，且那一格不许出现 `z-index`
     （判据 `hero_css_rules`）；W66 的对照还逐字 replace `pointer-events: none; opacity: .92;`
     —— 那一串必须连着写在同一行，拆行改空格就等于把那条对照改成恒绿
   · `prefers-reduced-motion` 那一档必须在，且 `animation: none` 至少两处（B14）
   · 规则里不许出现 `animation-timeline`（B15）
   · 0 个第三方域名（B09）
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ── bed 四档（参照站的 --bg0..3，靛黑家族）────────────────────────────
     #0a0a10 / #131318 / #16161f / #202028 —— 与 `网站设计.md` 的 #0b0d10 / #161a21 同色温。
     🔴 只在 `body` 上写背景、**不给 `html` 写**：html 背景透明时 body 的背景会传播成画布底，
     body::before/::after 那两层负 z-index 的星野才落在画布之上、正文之下。
     给 html 补一行 background，整片星野当场被盖掉。 */
  --bg0: hsl(250, 24%, 5%);
  --bg1: hsl(250, 24%, 8%);
  --bg2: hsl(250, 22%, 11%);
  --bg3: hsl(250, 20%, 14%);
  --bg-ink: hsl(250, 24%, 5%);          /* 亮键上的"墨"：bed0 的**实色**版，不是半透明那份 */

  /* ── 面与线（参照站 --sf/--sfh/--bd/--bdl）─────────────────────────── */
  --sf: hsla(0, 0%, 100%, .04);
  --sfh: hsla(0, 0%, 100%, .07);
  --bd: hsla(0, 0%, 100%, .08);
  --bdl: hsla(0, 0%, 100%, .14);

  /* ── 字：次级 0.95、三级 0.82（参照站把 0.72/0.38 抬上来的那一档）───── */
  --t1: #fff;
  --t2: hsla(0, 0%, 100%, .95);
  --t3: hsla(0, 0%, 100%, .82);
  --t4: hsla(0, 0%, 100%, .56);         /* 只给"确实该是耳语"的那几格：占位提示、版权尾注 */

  /* ── 主色：改这三行就换整套色温 ─────────────────────────────────────
     青蓝（`网站设计.md` 定稿 + 粒子 shader 里那两颗 0x38bdf8 / 0xfbbf24 同源）。
     要换回参照站今天的白/薄荷，把 --ac/--ac3/--acm 换成 #fff 与 hsla(0,0%,100%,…)。 */
  --ac: #38bdf8;
  --ac3: #7dd3fc;
  --ac-deep: #0ea5e9;
  --acd: rgba(56, 189, 248, .10);
  --acm: rgba(56, 189, 248, .24);
  --gradient: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 100%);
  --gradient-ink: linear-gradient(135deg, #eaf7ff 0%, #cfe9ff 46%, #9fd4f7 100%);

  /* 限定句 / 警示 / 未到货那三档：金 = 粒子层里那 3.4% 的金点，同一颗色 */
  --warn: #fbbf24;
  --warn-d: rgba(251, 191, 36, .10);
  --warn-m: rgba(251, 191, 36, .38);

  /* ── 玻璃配方（参照站 --glass-rim）──────────────────────────────────
     🔴 这是**卡片那一层的唯一出处**。谁再手打一遍渐变 + 内高光 + 投影，
     就是给"卡片长什么样"立第二个真相源 —— 上一版正是这么漂的。 */
  --rim:
    inset 0 1px 0 hsla(0, 0%, 100%, .10),
    inset 0 0 0 1px hsla(0, 0%, 100%, .045),
    inset 0 -26px 48px -34px var(--acm),
    0 34px 80px -34px hsla(250, 50%, 3%, .90);
  --rim-hi:
    inset 0 1px 0 hsla(0, 0%, 100%, .18),
    inset 0 0 0 1px hsla(0, 0%, 100%, .07),
    inset 0 -26px 48px -34px rgba(56, 189, 248, .34),
    0 40px 90px -34px hsla(250, 50%, 3%, .92);
  --card-bg: linear-gradient(160deg, hsla(0, 0%, 100%, .03), hsla(0, 0%, 100%, .01));
  --glass-blur: blur(3px) saturate(1.5) brightness(.97);

  /* ── halo：直接坐在粒子场上的字自己带的那圈对比度（参照站同名机制）────
     近中性的黑会读成一块脏晕 ⇒ 用本站自己的 250 色族压深、稍微提彩。 */
  --halo-h: 253; --halo-s: 62%; --halo-l: 9%; --halo-k: 1;

  /* ── 圆角与间距（参照站那一档半径：4/5/6/8/10/12/14/16）────────────── */
  --r-2: 6px; --r-3: 8px; --r-4: 12px; --r-5: 14px; --r-6: 16px;
  --radius-sm: var(--r-3);
  --radius: var(--r-5);
  --radius-lg: var(--r-6);

  /* 三档旋钮：柱宽 / 段距 / 正文字号。观感要动，只动这三行。 */
  --gutter: clamp(20px, 2.8vw, 40px);
  --nav-pad: clamp(16px, 2.6vw, 44px);
  --container-w: min(1440px, 100%);
  --section-y: clamp(64px, 7vw, 116px);
  --text-body: clamp(15px, .12vw + 14.2px, 17px);
  --leading: 1.68;

  /* 卡内距那一颗旋钮（W2 的信息密度）。密度要能一行改完整族，所以内距只许住在这里：
     任何一张卡自己写死一份 = 同一族两种内距，改一行只改到一半（判据 B40 咬这一形状）。
     2026-10-13 量到的真缺陷正是反方向的：padding 只挂在 --pending 变体上（24/22/26），
     已到货那张卡 padding=0，文字贴着自己 1px 的边框。 */
  --card-pad-y: 12px;
  --card-pad-x: 14px;

  /* 窄屏那两格旋钮（W3：680 手机横屏 / 500 手机竖屏）。与 `--card-pad-*` 同一纪律：
     地板只许住在这里，规则里只许引用 —— 判据 B46/B47 各咬这一形状。
     为什么是 44 与 14：任务单给的是「触摸目标 ≥ 44px」「字体最小 14px（移动端）」，
     而台架（`_probe/w3geo.py`，2026-10-13 本机真 Chrome）在 680/500 现读到 866 枚可点元素短边不足 44、
     正文那一层被 1240 那档压到 13–13.8px。两颗旋钮一挪就能整族改完，这才是它们存在的理由。 */
  --touch-min: 44px;
  --body-min: 14px;

  --mono: ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Mono", "Segoe UI Mono",
          Menlo, Consolas, "Liberation Mono", monospace;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans",
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 参照站那段 `Nothing may push the document wider than the phone` 的同一手：
     `clip` 不像 `hidden` 那样建滚动容器 ⇒ sticky 顶栏与那两层 fixed 星野照常工作。 */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--text-body);
  line-height: var(--leading);
  color: var(--t2);
  background-color: var(--bg0);
  /* 画布底：顶上一道光带 + 两处远处的色团。**只写背景、不给 html 写**（见 --bg0 那段）。
     星野住 body::before/::after 两层 —— 写在 body 上的话就没法单独给它做视差与呼吸。 */
  background-image:
    radial-gradient(1500px 640px at 50% -18%, rgba(56, 189, 248, .16), transparent 64%),
    radial-gradient(900px 460px at 86% 2%, rgba(14, 165, 233, .10), transparent 62%),
    radial-gradient(1100px 700px at 8% 34%, rgba(56, 189, 248, .055), transparent 66%),
    linear-gradient(170deg, var(--bg1) 0%, var(--bg0) 58%, hsl(250, 26%, 3.5%) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow-x: clip;
}

/* 星野两层：细尘 + 亮星，各自反向缓慢漂移 ⇒ 同一屏里有两层纵深。
   fixed 且 pointer-events:none，纯装饰；两层都只动 transform/opacity（合成层，不触发重排）。
   内容可见性一律不依赖它们 —— 这两层拿掉页面照样读完（B15 那条的同一条线）。
   🔴 它们现在是**最底的两层**（z-index -3 / -2），WebGL 背景场骑在它们上面（-1）：
   拿不到 WebGL 时场那一层被摘掉，露出来的就是这两层 —— 替身与主戏共用同一张床，不叠成两套画面。 */
body::before, body::after {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -3;
  pointer-events: none;
}
body::after { z-index: -2; }

/* ══ 背景场（整站常驻）══════════════════════════════════════════════════
   八页的 `<body>` 第一个子元素都是它，写在 HTML 里而不是由 JS 现建 ——
   首屏第一帧就有一块占位的透明画布，粒子晚几帧到，不会"先白后黑"闪一下。
   🔴 这一趟修掉的是他点名的第二句：「然后只要首屏才有？」——
   旧版那一枚 canvas 住在 `.hero` 里面，于是**只有首屏**有场，第二屏往下就是一块平的黑。
   现在这一层是 `position: fixed` 的整屏背景：滚到哪一段它都在。
   🔴 `z-index: -1` 是这一层能成立的关键，也是判据 W66 那一格的同一件事：
   它必须在**内容之下**。`z-index: auto` 的定位元素会画在同行内内容之上，
   一层铺满视口的画布就成了挡住全站正文的玻璃板 —— 抬到内容之上才是"插队"。
   放在**包装层**上而不是放在 `.hero__particles` 上：判据 `hero_css_rules` 读的是
   `.hero__particles` 那一条规则体，里面出现 `z-index` 即红（那条纪律要的就是"这一层自己不许插队"）。
   分层从下到上：画布床（body 背景，传播成画布底）→ 星野细尘(-3) → 星野亮星(-2)
   → 这一层(-1) → 正文。 */
.qf-field {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  contain: layout paint;
}
/* 这一层在场（JS 挂上 .qf-live）时把星野压淡：星野是拿不到 WebGL 时的替身，
   两套一起全亮会在正文背后叠成第二张画面。它不是"关掉"，是退到远处当底。 */
.qf-live body::before { opacity: .34; }
.qf-live body::after { opacity: .24; }
body::before {
  background-image:
    radial-gradient(1.4px 1.4px at 14% 22%, rgba(255, 255, 255, .72), transparent 56%),
    radial-gradient(1.2px 1.2px at 46% 8%, rgba(199, 222, 255, .58), transparent 56%),
    radial-gradient(1.5px 1.5px at 78% 34%, rgba(255, 255, 255, .5), transparent 56%),
    radial-gradient(1.1px 1.1px at 62% 74%, rgba(255, 255, 255, .42), transparent 56%),
    radial-gradient(1.3px 1.3px at 24% 66%, rgba(178, 208, 255, .4), transparent 56%);
  background-repeat: repeat;
  background-size: 300px 300px, 380px 380px, 460px 460px, 520px 520px, 640px 640px;
  opacity: .7;
  animation: qf-drift-a 190s linear infinite;
}
body::after {
  background-image:
    radial-gradient(2.1px 2.1px at 34% 14%, rgba(255, 255, 255, .85), transparent 54%),
    radial-gradient(1.8px 1.8px at 86% 58%, rgba(125, 211, 252, .8), transparent 54%),
    radial-gradient(2.4px 2.4px at 8% 82%, rgba(56, 189, 248, .5), transparent 54%),
    radial-gradient(1.6px 1.6px at 70% 90%, rgba(255, 255, 255, .6), transparent 54%);
  background-repeat: repeat;
  background-size: 720px 720px, 900px 900px, 1100px 1100px, 820px 820px;
  opacity: .46;
  animation: qf-drift-b 260s linear infinite, qf-twinkle 9s ease-in-out infinite;
}
/* 位移量 = 那一层 own 的 tile 尺寸 ⇒ 循环处无缝 */
@keyframes qf-drift-a { to { transform: translate3d(-300px, 160px, 0); } }
@keyframes qf-drift-b { to { transform: translate3d(240px, -200px, 0); } }
@keyframes qf-twinkle { 0%, 100% { opacity: .34; } 50% { opacity: .58; } }
@keyframes qf-breathe { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
/* 🔴 终点帧**只声明 opacity**：transform 一写进 with `both/forwards` 填充的动画终点，
   它就永久接管这个属性 —— 而动画值在层叠里**高于**普通声明，`:hover` 的 translateY 再具体也压不过它。
   结果就是"卡族悬停全部静默失效"：边框亮、投影变、唯独不抬（2026-10-13 由 _probe/hovercdp.py 抓到，
   八页 27 格里 25 格两态 transform 一模一样）。留空 = 终点回落到**层叠里的当下值**，
   入场照旧从 18px 落回原位，播完那一格又交还给 :hover。判据 B39 咬这一形状。 */
@keyframes qf-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; } }
@keyframes qf-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .18; } }

::selection { background: rgba(56, 189, 248, .28); color: var(--t1); }

/* 键盘可达性：全站只留一种焦点形状，且只在键盘触发时出现（点按钮不该带一圈蓝边） */
:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 3px;
  border-radius: var(--r-2);
}

h1, h2, h3, p { margin: 0; }
a { color: var(--ac3); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { color: var(--t1); }
img, svg, canvas { max-width: 100%; }

/* ── 对比度由字自己带（参照站 Type carries the contrast）──────────────
   halo 分两档：大字吃重的那一档，段落吃轻的那一档。参照站的注释写得很准 ——
   19px 那一档上，紧贴字身那圈 near-opaque ring 会把中文密排字的字谷糊掉。
   🔴 两类槽一律不挂（末尾那张例外表 + 首屏标题那一格自己那一手）：
     ① 带自己底面的（卡片/按钮/导航）：在卡片里挂 halo 读起来像套印重影；
     ② **渐变字**（background-clip:text + color:transparent）。
   第 ② 类是这一趟真踩到的坑，读数在 `_probe/out-title/title.json`（1600×1000，2026-10-11）：
   `.hero__title` 同时挂 background-clip:text 与下面这 5 层 text-shadow 时，
   它矩形内最亮那 0.5% 像素的均值 = **37**（近黑）；把 `--halo-k` 关成 0 之后 = **255**（纯白）。
   同一趟拿掉背景场只动了 0.38 ⇒ 跟粒子层无关。**Chrome 把那圈暗影画在了被裁切的字面之上**，
   渐变整个被盖掉，人眼读到的就是"标题变成深色的一块"（他 2026-10-11 的原话就是这么说的）。
   所以这里把 `.hero__title` 从两档 halo 的名册里摘出去，它自己在下面用 drop-shadow 那件工具。 */
.hero__copy, .section-title, .section-lead, .capacity-claim,
.cta__title, .cta__copy, .cta .btn__note {
  text-shadow:
    0 0 1px hsla(var(--halo-h), var(--halo-s), var(--halo-l), calc(.88 * var(--halo-k))),
    0 1px 2px hsla(var(--halo-h), var(--halo-s), var(--halo-l), calc(.85 * var(--halo-k))),
    0 0 8px hsla(var(--halo-h), var(--halo-s), var(--halo-l), calc(.62 * var(--halo-k))),
    0 0 26px hsla(var(--halo-h), var(--halo-s), var(--halo-l), calc(.40 * var(--halo-k)));
}
.section-title, .cta__title, .capacity-claim {
  text-shadow:
    0 0 1px hsla(var(--halo-h), var(--halo-s), var(--halo-l), calc(.92 * var(--halo-k))),
    0 1px 1px hsla(var(--halo-h), var(--halo-s), var(--halo-l), calc(.88 * var(--halo-k))),
    0 0 6px hsla(var(--halo-h), var(--halo-s), var(--halo-l), calc(.78 * var(--halo-k))),
    0 0 16px hsla(var(--halo-h), var(--halo-s), var(--halo-l), calc(.60 * var(--halo-k))),
    0 0 40px hsla(var(--halo-h), var(--halo-s), var(--halo-l), calc(.44 * var(--halo-k)));
}
pre, code, kbd, samp,
.console__bar, .console__row, .console__status, .console__foot, .console__badge,
.qualifier__text, .qualifier__label, .faq-a__qualifier, .demo-flag, .demo-reading,
.badge-strip, .btn, .btn *, .eyebrow, .nav, .nav *, .footer { text-shadow: none !important; }

/* 卡片那一层：一个有边界的物件（参照站 SMALL panels stay glass 那一档）。
   近零填充 + rim + 背板模糊 ⇒ 星野从卡片背后透出来，只是被压暗压柔。 */
/* 卡片那一层：一个有边界的物件（参照站 SMALL panels stay glass 那一档）。
   近零填充 + rim + 背板模糊 ⇒ 星野从卡片背后透出来，只是被压暗压柔。
   🔴 这张清单 = "卡片"这一类物的唯一出处；下面各页只许调自己的内距与列数。 */
.how-card, .pain-row, .price-card, .feature-card, .pending-card, .security-item,
.demo-card, .demo-panel, .capacity-card, .cost-card, .faq-item, .chooser__box,
.hero__console {
  background: var(--card-bg);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  box-shadow: var(--rim);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  will-change: transform;
}

/* 内容柱：宽屏上让柱宽跟着视口长，窄屏两侧留 gutter。
   与参照站（定死 1200px）不同的一处：本站上一轮被"1140px 定死 ⇒ 2560 上两侧各 710px 黑边"
   咬过，所以上限给到 1440px，再靠那三档 fluid 字号把尺度一起抬上去。 */
.container { width: 100%; max-width: var(--container-w); margin: 0 auto; padding: 0 var(--gutter); }

/* ══ 顶栏 ══════════════════════════════════════════════════════════════
   参照站 `nav{position:fixed;padding:14px 40px;background:hsla(250,24%,5%,.7);
   backdrop-filter:blur(24px);border-bottom:1px solid var(--bd)}`。
   这一趟修掉的正是这一格：旧版把顶栏塞进内容柱（1600px 上柱宽 1184px），
   10 格 + 品牌 + 两枚下拉装不下 ⇒ **八页全部折成两行**（_probe/before.json 现读）。
   落法 = 顶栏通栏（不吃柱宽），格距随视口收，≥1240px 恒为一行。 */
.nav {
  position: sticky; top: 0; z-index: 30;
  background: hsla(250, 30%, 6%, .60);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid var(--bd);
  box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .07);
}
.nav__inner {
  max-width: none;                       /* ← 顶栏通栏的那一行：不吃 .container 的 1440px */
  padding: 0 var(--nav-pad);
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;
  gap: 10px 18px; min-height: 64px; padding-block: 11px;
}
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: var(--t1); white-space: nowrap; flex: 0 0 auto; }
.logo:hover { text-decoration: none; }
/* 站标方块：参照站 `.logo-icon{width:30px;height:30px;background:var(--acd);
   border:1px solid var(--acm);border-radius:7px}` —— 这一趟按它改了：旧版是实心渐变 + 一层光晕，
   在近黑底上比旁边那行字还亮，读起来像个 error badge。 */
.logo__mark {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px;
  background: var(--acd); border: 1px solid var(--acm);
  color: var(--ac); font-family: var(--mono); font-size: 12.5px; font-weight: 800;
  letter-spacing: -.02em; flex: 0 0 auto;
  transition: transform .3s ease, border-color .3s ease;
}

/* 🔴 十格导航在窄屏**折行**是允许的，但 1600px 上折行不是"窄屏"。
   `min-width:0` + `flex-wrap:nowrap` + 逐格 `white-space:nowrap` ⇒ 一行放得下就一行，
   放不下时由下面 1240px 那档接管（缩字号 → 再不行才折）。 */
.nav__links {
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: 0 2px; min-width: 0; margin-inline-start: auto;
}
.nav__link {
  color: var(--t3); font-size: 14.5px; font-weight: 500; white-space: nowrap;
  padding: 7px 11px; border-radius: var(--r-3); border: 1px solid transparent;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.nav__link:hover { color: var(--t1); background: var(--sf); text-decoration: none; }
/* 亮着的那一格：参照站没有"选中药丸"，它只把当前项提到纯白。本站仍保留一格焦点，
   但把旧版的药丸底 + 光晕收成"纯白字 + 一道极淡的 accent 底"。 */
.nav__link.is-active { color: var(--t1); font-weight: 650; background: var(--acd); border-color: var(--acm); }
/* 导航里的占位格（GitHub 那一格）：看得见、点不动 —— 空 href 会自跳当前页，那是死链不是占位 */
.nav__ph {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  color: var(--t4); font-size: 14.5px; padding: 7px 11px;
  border-radius: var(--r-3); border: 1px dashed var(--bdl); cursor: not-allowed;
}

/* 窄屏折叠抽屉那一格的两枚控件（W3：任务单第 1 项「导航栏：小屏折叠为汉堡菜单」）。
   🔴 宽屏这一对必须整体 `display:none` —— 汉堡键在 1240 以上多出来就是顶栏长了一枚没人要的键，
   而十格本来就摊得开（判据 B44 咬这一形状）。
   🔴 展开**不写脚本**：`.nav__drawer` 是真的 checkbox，`:checked` 在下面的窄屏档里直接把它摊开。
   与 B42「FAQ 默认收起要写在静态 HTML 里」同一纪律：禁 JS、读屏器先于脚本、抓取预览那一屏，
   顶栏必须打得开 —— 折叠可以只给一半（藏），不能只给一半（没有开）。 */
.nav__drawer, .nav__burger { display: none; }

/* 顶栏下拉（社区、语言共用一套槽位）。is-open 由 site.js 挂到 .menu/.lang 上。
   菜单是"有边界的物件" ⇒ 归玻璃那一档，比页面的卡更实一点（它盖在正文上面）。 */
.menu, .lang { position: relative; display: inline-flex; }
.menu__btn, .lang__btn {
  font: inherit; font-size: 14.5px; white-space: nowrap;
  color: var(--t3); background: transparent;
  border: 1px solid transparent; border-radius: var(--r-3); padding: 7px 11px; cursor: pointer;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.menu__btn:hover, .lang__btn:hover { color: var(--t1); background: var(--sf); }
.menu__btn::after, .lang__btn::after { content: " ▾"; color: var(--t4); }
.lang__btn { background: var(--sf); border-color: var(--bd); }
.lang__btn:hover { border-color: var(--bdl); }

.menu__list, .lang__menu {
  display: none; position: absolute; inset-inline-end: 0; top: calc(100% + 10px);
  padding: 7px; border-radius: var(--r-5); z-index: 40;
  background: hsla(250, 26%, 8%, .82);
  border: 1px solid var(--bdl);
  box-shadow: var(--rim-hi), 0 0 0 1px hsla(0, 0%, 100%, .03);
  -webkit-backdrop-filter: blur(14px) saturate(1.8) brightness(.97);
  backdrop-filter: blur(14px) saturate(1.8) brightness(.97);
}
.menu__list { min-width: 226px; }
.lang__menu { min-width: 236px; max-height: 62vh; overflow: auto; }
.menu.is-open .menu__list, .lang.is-open .lang__menu { display: block; }

.menu__opt, .lang__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: var(--r-2);
  color: var(--t3); font-size: 14px; transition: background-color .15s ease, color .15s ease;
}
.menu__opt:hover, .lang__opt:hover { background: var(--sfh); color: var(--t1); text-decoration: none; }
.menu__opt--off, .menu__opt--off:hover { color: var(--t4); background: transparent; cursor: not-allowed; }
.lang__opt.is-current { color: var(--ac); font-weight: 600; }
/* 未开通的那 14 枚：形状在、名字在，但显式不可点，且每枚都挂着「未开通」 */
.lang__opt[aria-disabled="true"] { color: var(--t4); cursor: not-allowed; }
.lang__opt[aria-disabled="true"]:hover { background: transparent; color: var(--t4); }
.opt-note { font-family: var(--mono); font-size: 11.5px; color: var(--t4); white-space: nowrap; }
.menu__foot, .lang__foot {
  margin: 6px 10px 4px; padding-top: 9px; border-top: 1px solid var(--bd);
  color: var(--t4); font-size: 12.5px; line-height: 1.55;
}

/* ══ 按钮 ══════════════════════════════════════════════════════════════
   参照站两档：`.btn-primary{background:var(--t1);color:var(--bg0)}` 与
   `.btn-ghost{background:transparent;border:1px solid var(--bd)}`。
   🔴 亮键上的字色取 `--bg-ink`（**实色**），不是半透明的 bed —— 参照站专门为这一形写过一段注释：
   bed 一旦转半透明，全站 11 处主行动键的文字会一起变成 5% 白，那颗下载键当场读不出来。 */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--r-3); font-size: 15px; font-weight: 700;
  line-height: 1.2; border: 1px solid transparent; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease,
              background-color .2s ease, opacity .2s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
/* 键盘/指针按下时把高度压回去：抬起是 hover 的邀请，按下是已经点中了 */
.btn:active { transform: translateY(0); }

/* 主键 = 白填充 + 深墨 */
.btn--primary, .btn--dark {
  background: var(--t1); color: var(--bg-ink); border-color: transparent;
  box-shadow: 0 12px 34px -16px hsla(250, 50%, 3%, .9), inset 0 1px 0 #fff;
}
.btn--primary:hover, .btn--dark:hover {
  background: #fff; color: var(--bg-ink);
  box-shadow: 0 18px 44px -16px hsla(199, 92%, 60%, .34), 0 8px 30px hsla(0, 0%, 100%, .10), inset 0 1px 0 #fff;
}
/* 次键 = 透明 + 1px 描边 */
.btn--ghost { background: transparent; color: var(--t1); border-color: var(--bdl); }
.btn--ghost:hover { background: var(--sf); border-color: hsla(0, 0%, 100%, .24); }

/* 收件地址未定 ⇒ 不是死链，也不假装能用：显式禁用态 + 说明（WEBSITE-PLAN §5 留白规则）。
   形制取参照站的 ghost（透明 + 虚线描边），但**不许**做成看起来能点的那一档。 */
.btn--muted {
  background: transparent; color: var(--t4);
  border: 1px dashed var(--bdl); cursor: not-allowed; flex-wrap: wrap;
  box-shadow: none; opacity: .9;
}
.btn--muted:hover { transform: none; background: transparent; border-color: var(--bdl); }
.btn__note { flex-basis: 100%; font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--t4); }

/* ══ Hero ══════════════════════════════════════════════════════════════ */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(84px, 10vw, 158px) 0 clamp(52px, 5.4vw, 82px);
}
.hero--slim { padding: clamp(56px, 7vw, 92px) 0 clamp(46px, 6vw, 68px); }

/* 首屏那道网格：把黑底切出一层纵深，纯装饰，对读屏隐藏 */
.hero__grid-lines {
  position: absolute; inset: -20% -10% auto; height: 132%; pointer-events: none;
  background-image:
    linear-gradient(rgba(125, 211, 252, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 252, .10) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse 74% 66% at 50% 0%, #000 0%, transparent 74%);
  mask-image: radial-gradient(ellipse 74% 66% at 50% 0%, #000 0%, transparent 74%);
  opacity: .6;
}
/* 背景场那一枚画布：由 assets/field.js 用**原生 WebGL** 驱动（零依赖、零第三方请求）。
   它现在住在 `.qf-field` 那个整站固定层里，不再是首屏那一格的特效；
   这一条规则只管"画布怎么铺满宿主 + 不许吃掉点击"。
   纯装饰 ⇒ 画布带 aria-hidden，页面上一个字都不承载。
   🔴 判据 hero_css_rules 逐字读这一格：`pointer-events: none` 必须在，**不许出现 z-index**
   （谁在上面由宿主那一层定，这一条自己抬数就是插队）；W66 的对照还逐字 replace 下面那一行。
   🔴 那条 `pointer-events: none; opacity: .92;` 必须**逐字连着写在同一行** —— 判据那一格的
   对照是拿这串字面量做 replace 的，拆行或改空格，那一条对照就恒绿了（量具失效，不是判据通过）。 */
.hero__particles {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  pointer-events: none; opacity: .92;
  /* 一层椭圆渐晕：极光聚在画面中段，四角退回画布床 —— 整屏都亮等于整屏都在抢正文。
     这是"可读性由特效自己让位"那一手，不是给文字加底。 */
  -webkit-mask-image: radial-gradient(ellipse 82% 70% at 50% 46%, #000 34%, rgba(0, 0, 0, .62) 76%, rgba(0, 0, 0, .26) 100%);
  mask-image: radial-gradient(ellipse 82% 70% at 50% 46%, #000 34%, rgba(0, 0, 0, .62) 76%, rgba(0, 0, 0, .26) 100%);
}
/* 首屏下缘那道地平线辉光：把网格收进一条亮带，黑底不再是"一整块平的黑" */
.hero::after {
  content: ""; position: absolute; inset: auto 0 -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--acm), rgba(125, 211, 252, .22), transparent);
  z-index: 2;
}
.hero__content {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr);
  justify-items: center; gap: clamp(30px, 4.4vw, 52px);
}
.hero__main { display: grid; justify-items: center; text-align: center; max-width: min(1060px, 100%); }

/* kicker：参照站 `.label{background:var(--acd);color:var(--ac);border-radius:5px;
   font-size:10px;letter-spacing:1.5px;text-transform:uppercase}` 那一档。
   他 2026-10-11「栏目名字号减小1个字号」⇒ 一档 = 1px，11.5 → 10.5。
   参照站这一档自己写的就是 10px —— 再减一档正好落到它的原值上。 */
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ac); background: var(--acd); border: 1px solid var(--acm);
  border-radius: var(--r-2); padding: 6px 14px;
}
.hero__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ac);
  box-shadow: 0 0 10px var(--ac); animation: qf-breathe 2.2s ease-in-out infinite;
}
/* 首屏主张：参照站 `.hero h1{font-size:clamp(50px,9vw,96px);font-weight:900;
   letter-spacing:-4px;line-height:1.0}`。中文没有词间空格，tracking 收到 -.035em 就到头了
   （再收字身会互相顶）。背景裁字那层渐变留着，但只作极淡的冷暖过渡，不再当发光标题用。 */
.hero__title {
  margin: clamp(22px, 3vw, 34px) 0 18px;
  font-size: clamp(40px, 6.8vw, 82px); /* 他 2026-10-11「页面中的大标题太大」：92 → 82；vw 那颗跟着收，窄屏才一起小 */
  font-weight: 900; letter-spacing: -.035em; line-height: 1.02;
  text-wrap: balance;
  /* 中文默认会连着断行：定价首屏那句会在「一次/性落地服务」中间劈开。keep-all 让词组整体换行，
     break-word 只在整词放不下时兜底。 */
  word-break: keep-all; overflow-wrap: break-word;
  background: linear-gradient(178deg, #ffffff 14%, #e4f2ff 56%, #9fd4f7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* 🔴 渐变字那一格**只能**用 drop-shadow，不许用 text-shadow（原因见上面 halo 那段的读数：
     text-shadow 会被 Chrome 画在被裁切的字面之上，把渐变整个盖成一块深色）。
     drop-shadow 是按元素**画完之后**的轮廓投的影 —— 影子落在字后面，渐变照旧透出来，
     而"字自己带对比度"这件事（粒子亮丝带扫过时标题不被冲掉）照旧成立。 */
  text-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(15, 9, 37, .9)) drop-shadow(0 0 14px rgba(15, 9, 37, .6));
}
.hero__copy { color: var(--t2); font-size: clamp(16.5px, 1.2vw, 19.5px); max-width: 40em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; justify-content: center; }

/* 首屏一次性入场（@keyframes qf-rise 的出处在上面，全站只一份）：
   播完停在可见态，**不挂滚动位置** —— 上一版挂在 view() 时间线上，把整页卡片留在了 opacity:0。 */
.hero__eyebrow, .hero__title, .hero__copy, .qualifier, .hero__actions, .hero__console {
  animation: qf-rise .62s cubic-bezier(.22, .68, .3, 1) both;
}
.hero__title { animation-delay: .06s; }
.hero__copy { animation-delay: .12s; }
.qualifier { animation-delay: .18s; }
.hero__actions { animation-delay: .24s; }
.hero__console { animation-delay: .3s; }

/* §4.1 承诺句与 §4.8 限定句是一对，必须同屏 —— 排版上就贴在主张正下方，不许挪到页角。
   形制取参照站的"有边界的物件"（这是一条脚注，不是一条横幅）：左侧一道 2px 琥珀竖线 + 极淡底，
   字色仍够读（限定句不许看不见），但不抢首屏。 */
.qualifier {
  margin: 24px auto 0; padding: 13px 18px; max-width: 46em; text-align: start;
  background: var(--warn-d);
  border: 0; border-radius: var(--r-4);
  border-inline-start: 2px solid var(--warn-m);
}
.qualifier__label {
  display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--warn); margin-bottom: 6px; font-weight: 700;
}
.qualifier__text { font-size: 13.8px; color: hsla(43, 62%, 82%, .96); line-height: 1.66; }

/* 终端窗：参照站 `.win` 那一档（玻璃 + 更重的一道浮起投影）。 */
.hero__console {
  width: min(760px, 100%); overflow: hidden;
  background: linear-gradient(180deg, hsla(250, 26%, 9%, .58), hsla(250, 26%, 6%, .58));
  border: 1px solid var(--acm);
  box-shadow:
    inset 0 1px 0 hsla(0, 0%, 100%, .14),
    inset 0 0 0 1px hsla(0, 0%, 100%, .04),
    0 40px 100px hsla(250, 50%, 4%, .72);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.console__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 18px; border-bottom: 1px solid var(--bd);
  font-family: var(--mono); font-size: 12.5px; color: var(--t4);
  background: hsla(0, 0%, 100%, .02);
}
.console__dots { display: inline-flex; gap: 6px; }
.console__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sfh); }
.console__dot:first-child { background: var(--acm); }
.console__body { padding: 20px 18px 16px; }
.console__row {
  display: flex; justify-content: space-between; gap: 16px; padding: 9px 0;
  font-size: 14px; color: var(--t3); border-bottom: 1px dashed var(--bd);
}
.console__row strong { color: var(--t1); font-family: var(--mono); }
.console__status { margin-top: 16px; font-family: var(--mono); font-size: 13px; color: var(--warn); }
.console__foot { margin-top: 12px; font-size: 12px; color: var(--t4); }
.console__badge { font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--warn); }

/* ══ 段落外壳 ══════════════════════════════════════════════════════════
   🔴 这一格是这一趟改得最狠的一处：参照站专门写过一段把整幅"板子"撤掉的注释（见文件头 ②）。
   旧版 `.section--soft` 是 `rgba(255,255,255,.04)` + 上下描边的一整幅横板，`.section--dark`
   是另一幅 ⇒ 星野只在段与段的接缝露出来，读起来像两块灰板夹着一条缝。
   现在三个变体**都是透明的**（星野从每一段背后透过），段界改用一道渐隐发丝线。 */
.section { position: relative; padding: var(--section-y) 0; background: transparent; border: 0; }
.section--white, .section--soft { background: transparent; border: 0; }
/* 段界的那道发丝线：参照站 `.stats-section::before/::after` 那一形 */
.section--soft::before, .section--dark::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--acm), transparent);
}
/* 深色那一档：透明度不变，只多一团极淡的主色雾 —— 它替掉的是旧版那一整幅 `--bg-3` 底板 */
.section--dark {
  background: transparent; border: 0; color: var(--t2);
  background-image: radial-gradient(1100px 480px at 22% 0%, rgba(56, 189, 248, .07), transparent 66%);
  background-repeat: no-repeat;
}
.section--dark::after {
  content: ""; position: absolute; inset: auto 0 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--acm), transparent);
}
.section--dark > .container { position: relative; z-index: 1; }

/* 他 2026-10-11「栏目名字号减小1个字号」：这一格就是每个栏目头顶那行小字
   （"怎么工作""容量口径""数据边界与安全"…）。一档 = 1px，11 → 10 ——
   正好也是参照站 `.label` 那一档的原值（引文见上面 kicker 那段）。 */
.eyebrow {
  display: block; font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ac);
  /* kicker 也是参照站 `.label` 那一档：小方块底 + 主色字 */
  background: var(--acd); border: 1px solid var(--acm); border-radius: var(--r-2);
  padding: 5px 11px; width: fit-content; margin-bottom: 2px;
}
.eyebrow--muted { color: var(--t4); background: var(--sf); border-color: var(--bd); }
.section--dark .eyebrow { color: var(--ac); }
.section--dark .eyebrow--muted { color: var(--t4); }
.section-title {
  margin: 16px 0 38px;
  font-size: clamp(29px, 3.9vw, 46px); /* 他 2026-10-11「大标题太大」：52 → 46（含 vw 那一颗） */
  font-weight: 900; letter-spacing: -.02em; line-height: 1.06;
  max-width: 24em; color: var(--t1); text-wrap: balance;
  word-break: keep-all; overflow-wrap: break-word;
}
.section-title--center { max-width: none; margin-inline: auto; text-align: center; }
.section-note { margin-top: 26px; font-size: 13.5px; color: var(--t4); max-width: 62em; }
/* 负 margin 是为了把正文拉回标题下面 —— .section-title 自带那一格下边距，那是给"标题直接接网格"的档位 */
.section-lead {
  margin: 0 0 26px; max-width: 48em;
  font-size: clamp(16px, 1.15vw, 18.5px); line-height: 1.68; color: var(--t2);
}
.section--dark .section-note { color: var(--t4); }
.badge-strip {
  display: inline-block; margin-top: 26px; padding: 7px 14px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .02em;
  background: var(--warn-d); border: 1px solid var(--warn-m);
  border-radius: var(--r-2); color: var(--warn);
}

/* 网格那一层的一次性入场：finite、fill-mode both ⇒ 播完停在可见态。
   和首屏那几行同一条线（B15）：可见性不挂滚动位置，只挂在时间上。 */
.painboard > *, .how-grid > *, .feature-grid > *, .pending-grid > *,
.pricing-grid > *, .security-list > *, .demo-grid > *, .faq-list > * {
  animation: qf-rise .5s cubic-bezier(.22, .68, .3, 1) both;
}

/* 卡片悬停：参照站 `.stat-card:hover{border-color:var(--acm);transform:translateY(-4px)}`
   + `.stat-card::before` 那团悬停会长大的主色雾。
   🔴 `z-index:-1` 是刻意的：卡片自己带 `backdrop-filter` ⇒ 它已经是一个层叠上下文，
   负 z-index 的伪元素落在"卡片底"与"卡内正文"之间。少了这一手，那团雾会盖在文字上面
   （绝对定位元素默认画在同行内内容之上），读起来像一块脏印。 */
.how-card, .pain-row, .feature-card:not(.feature-card--pending), .pending-card,
.price-card, .demo-card, .security-item { position: relative; overflow: hidden; }
.how-card::before, .price-card::before, .pending-card::before, .demo-card::before,
.security-item::before, .pain-row::before {
  content: ""; position: absolute; z-index: -1;
  top: -46px; inset-inline-start: 50%; transform: translateX(-50%);
  width: 84px; height: 84px; pointer-events: none;
  background: radial-gradient(circle, var(--acd), transparent 70%);
  transition: width .4s ease, height .4s ease;
}
/* 卡族 hover 名册的**唯一出处**（判据 B33 按这份名册逐枚点名，W107 咬"名册里有、页面上没有"）。
   上浮一律 -3px：原来那六枚是 -4px，W1 这一轮统一 —— 差 1px 没人看得见，
   但"一族两种抬法"会让下一次调整变成逐枚对表。
   🔴 上浮与亮边必须**成对**：只抬不亮读起来是"跳了一下"，只亮不抬是"没反应"。 */
.how-card, .pending-card, .demo-card, .price-card, .security-item, .pain-row,
.feature-card, .deploy-card, .capacity-card, .cost-card, .faq-item {
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.how-card:hover, .pending-card:hover, .demo-card:hover, .price-card:hover,
.security-item:hover, .pain-row:hover, .feature-card:hover, .deploy-card:hover,
.capacity-card:hover, .cost-card:hover, .faq-item:hover {
  border-color: var(--acm); box-shadow: var(--rim-hi); transform: translateY(-3px);
}
.how-card:hover::before, .pending-card:hover::before, .demo-card:hover::before,
.price-card:hover::before, .security-item:hover::before, .pain-row:hover::before {
  width: 130px; height: 130px;
}

/* ── 痛点 ─────────────────────────────────────────────────────────────── */
.painboard { display: grid; gap: 14px; }
.pain-row {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 22px; align-items: baseline; padding: 24px 26px;
}
.pain-row__index { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--ac); }
.pain-row__title { font-size: 19.5px; font-weight: 700; color: var(--t1); letter-spacing: -.015em; }
.pain-row__body { color: var(--t2); font-size: 15px; }

/* ── 三步 ─────────────────────────────────────────────────────────────── */
/* auto-fit 而不是"三列定死"：参照站那些宫格是 flex + min-width 自己落的，
   定死列数在 1000px 上会把每格压到读不出来。 */
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 18px; }
.how-card { padding: 28px; }
.how-card__num { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--ac); margin-bottom: 14px; }
.how-card__title { font-size: 19px; font-weight: 700; color: var(--t1); margin-bottom: 9px; letter-spacing: -.015em; }
.how-card__body { color: var(--t2); font-size: 14.5px; }

/* ── 预扣 → 转发 → 结算：出站之前就卡住的那三相（LLMCap 的 pre-dispatch 结构）──
   2026-10-11 从参照站搬来的结构：它把"每个 agent / 每次 run"的管控摊成
   Reserve → Call → Settle 三相，右边再配一块"判定只看哪几样"的面板。
   三相 + 一块面板才是这一段的意思 —— 只有三相那是流程图，只有面板那是一句结论，
   合起来才说清"闸门挂在哪一步之前"。 */
.phase-wrap { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 26px; margin-top: 26px; align-items: start; }
.phase-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.phase-step { position: relative; padding: 20px 18px 20px 0; }
.phase-step + .phase-step { padding-left: 22px; border-left: 1px solid var(--bd); }
.phase-step__n {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  margin-bottom: 13px; border: 1px solid var(--acm); border-radius: 50%; background: var(--acd);
  color: var(--ac); font-family: var(--mono); font-size: 11px; font-weight: 700;
}
.phase-step__title { font-size: 16.5px; font-weight: 700; color: var(--t1); margin-bottom: 7px; letter-spacing: -.015em; }
.phase-step__body { color: var(--t3); font-size: 13.5px; line-height: 1.62; }
.phase-panel { padding: 22px 22px 24px; border: 1px solid var(--acm); border-radius: var(--radius-sm); background: var(--acd); }
.phase-panel__head {
  margin-bottom: 14px; color: var(--ac); font-family: var(--mono); font-size: 11px;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.phase-panel__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.phase-panel__list li { position: relative; padding-left: 17px; color: var(--t2); font-size: 13.5px; line-height: 1.6; }
.phase-panel__list li::before { content: "·"; position: absolute; left: 4px; color: var(--ac); font-weight: 700; }
.phase-panel__foot {
  margin-top: 15px; padding-top: 12px; border-top: 1px dashed var(--acm);
  color: var(--t4); font-size: 12.5px; line-height: 1.62;
}

/* ── before / after 代码对比（LLMCap 首屏那一手）──────────────────────────
   2026-10-11 从参照站搬来的结构：它把"接入有多轻"压成**两栏代码对照**，
   左"之前"右"之后"，卖点就是那句 same client, one URL。

   🔴 我们这一手**不能照抄它的头**：它靠一个自定义头（`X-LLMCap-Key`）传密钥，
   而我们的对应物 `X-QuotaFuse-Key` 在仓库里 0 命中、是 **F22 明令禁写**的虚构契约
   （真实鉴权 = `Authorization: Bearer`，docs/50:419-429）。所以这里走真实的
   `api_key=`（SDK 就是把它当 Bearer 发出去的），地址与密钥名都走环境变量，
   **不编 URL、不编头名**。 */
.diff-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(322px, 1fr)); gap: 18px; margin-top: 26px; }
.diff-pane { border: 1px solid var(--bd); border-radius: var(--radius-sm); background: var(--bg1); overflow: hidden; }
.diff-pane--after { border-color: var(--acm); }
.diff-pane__head {
  display: flex; align-items: center; gap: 9px; padding: 11px 18px; border-bottom: 1px solid var(--bd);
  color: var(--t4); font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.diff-pane--after .diff-pane__head { color: var(--ac); }
.diff-pane pre { margin: 0; padding: 16px 18px 18px; overflow-x: auto; }
.diff-pane pre code { font-size: 12.5px; line-height: 1.74; color: var(--t2); white-space: pre; }
.diff-note { margin-top: 14px; color: var(--t4); font-size: 12.5px; line-height: 1.62; }

/* ── Before/After 逐行对照表（W2 的信息密度那一格，2026-10-13）───────────────
   🔴 这张表**不写新文案**：三列每一格的句子都必须在这一页的别处已经出现过 ——
   判据 B41 逐格去表外找，找不到就红。他要的是"把已有的话排成对照"，不是再填一份内容。
   表里也因此 0 颗数字（槽外的数字要按 DEMO-SPEC 有人认领，这一格不需要数）。
   窄屏那一手是两半的：外层 overflow-x 给滚动，表体自己带 min-width 把表撑到比容器宽 ——
   只写前一半，表会跟着容器一起收窄，那条滚动永远不会触发（判据 B43 咬这一形状）。 */
.compare-scroll {
  margin-top: 26px; padding: 0; overflow-x: auto;
  border: 1px solid var(--bd); border-radius: var(--radius-sm);
}
.compare {
  min-width: 680px; width: 100%; margin: 0;
  border-collapse: collapse; text-align: start;
}
.compare th {
  padding: 12px 16px; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--t4); text-align: start;
  background: var(--sf);
}
.compare th:nth-child(3) { color: var(--ac); }
.compare td {
  padding: 13px 16px; vertical-align: top;
  border-top: 1px solid var(--bd);
  color: var(--t2); font-size: 13px; line-height: 1.55;
}
.compare td:first-child { color: var(--t1); font-weight: 650; }
.compare td:nth-child(2) { color: var(--t4); }
.compare tbody tr:hover td { background: var(--sf); }

/* ── 未到货能力占位（可见占位，禁效果数据）────────────────────────────
   未实现的能力 = 可见占位模块框（虚线框 + 呼吸点 + 「还缺哪一径」那一行），
   不是一张看起来已经能用的功能卡。AGENTS.md 的交付口径：没落地的东西不许用排版冒充已有。 */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 18px; }
.feature-grid--pending { margin-top: 8px; }
/* 本体这一行是 2026-10-13 补上的那一格缺陷：这条族里过去**只有** --pending 变体带 padding，
   已到货那张卡于是 padding=0 —— 玻璃边框 1px 紧贴着标题的第一个字。 */
.feature-card { padding: var(--card-pad-y) var(--card-pad-x); }
.feature-card--pending {
  position: relative;
  /* 虚线格**不归玻璃那一档**：它要读起来"还没到货"，所以底纹是那道 135° 的斜纹，不是卡片的近零填充 */
  background: repeating-linear-gradient(135deg, var(--sf) 0 10px, transparent 10px 20px);
  border: 1.5px dashed var(--acm); border-radius: var(--radius);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.feature-card--pending::after {
  content: ""; position: absolute; right: 9px; top: 9px; width: 18px; height: 18px;
  border-right: 1.5px dashed var(--acm); border-top: 1.5px dashed var(--acm);
  border-radius: var(--r-2) var(--r-2) 0 0;
}
.feature-card__status {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 4px; padding: 1px 9px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  border-radius: 999px; text-transform: uppercase;
  background: var(--acd); color: var(--ac); border: 1px solid var(--acm);
}
.feature-card__status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ac);
  box-shadow: 0 0 9px var(--ac); animation: qf-breathe 1.9s ease-in-out infinite;
}
.feature-card__title { font-size: 16px; font-weight: 700; color: var(--t1); margin-bottom: 2px; letter-spacing: -.015em; }
.feature-card__body { color: var(--t2); font-size: 13.5px; line-height: 1.4; }
.feature-card__gap {
  margin-top: 5px; padding-top: 4px; border-top: 1px dashed var(--acm);
  color: var(--t4); font-size: 12.5px; line-height: 1.35;
}

/* ── 能力卡的那一栏「特性清单 + 一行脚注」 ────────────────────────────────
   2026-10-11 从参照站 LLMCap 搬来的**结构**（不是文案）：它每一张能力卡都是
   「标题 → 一句卖点 → 一张界面小样 → ✓ 特性清单 → ◆ 一行技术脚注」。
   清单那一栏是"企业客户一眼看懂能力边界"真正靠的那一件 —— 只有标题和一句话的卡
   不构成矩阵，四条并排也只是四句宣传语。 */
.feature-card__specs { margin-top: 6px; display: grid; gap: 2px; list-style: none; }
.feature-card__specs li { position: relative; padding-left: 17px; color: var(--t2); font-size: 12.8px; line-height: 1.32; }
.feature-card__specs li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--ac); font-family: var(--mono); font-size: 11px; font-weight: 700;
}
/* 🔴 未到货那张卡的清单**不配 ✓**：✓ 读起来是"这一条已经能用了"。
   换成中性圆点，形状照旧、承诺不越界 —— 这一格与上面那行「还缺：…」是同一件事的两面。 */
.feature-card--pending .feature-card__specs li::before { content: "·"; color: var(--t4); font-size: 14px; }
.feature-card__foot {
  margin-top: 6px; padding-top: 4px; border-top: 1px solid var(--bd);
  color: var(--t4); font-family: var(--mono); font-size: 11px; line-height: 1.4;
}
.feature-card__foot::before { content: "◆ "; color: var(--acm); }

/* ── 容量 ─────────────────────────────────────────────────────────────── */
.capacity-wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.capacity-claim { font-size: clamp(24px, 2.8vw, 36px); font-weight: 900; line-height: 1.24; letter-spacing: -.025em; color: var(--t1); }
.capacity-copy { margin-top: 16px; font-size: 15.5px; color: var(--t2); max-width: 44em; }
.capacity-copy--soft { font-size: 14.5px; color: var(--t4); }
.capacity-meta { margin-top: 18px; font-size: 14.5px; color: var(--t2); }
.capacity-meta strong {
  display: inline-block; margin-inline-end: 9px; color: var(--ac);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
}
.capacity-card { padding: 24px; }
.capacity-card__label {
  margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ac); font-weight: 700;
}
.capacity-card__label:first-child { margin-top: 0; }
.capacity-card__value { margin-top: 8px; font-size: 14.5px; color: var(--t2); }
.capacity-card__value--dir { color: var(--warn); }

/* ── 拆分代价 ─────────────────────────────────────────────────────────── */
.cost-card {
  padding: 24px 26px; border-radius: var(--radius);
  background: linear-gradient(90deg, var(--warn-d), transparent 62%);
  border: 1px solid var(--bd); border-inline-start: 2px solid var(--warn-m);
  box-shadow: var(--rim);
}
.cost-card__label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--warn); font-weight: 700; }
.cost-card__body { margin-top: 9px; color: var(--t2); font-size: 15px; }

/* ── 数据边界 / 诚实边界 ─────────────────────────────────────────────── */
.security-list { display: grid; gap: 12px; }
.security-item {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; padding: 22px 26px;
}
.security-item strong { font-size: 15.5px; color: var(--t1); }
.security-item p { color: var(--t2); font-size: 14.5px; position: relative; z-index: 1; }

/* ── 数据边界：「我们记录 ✓ / 我们绝不存 ✗」两栏逐行对照 ─────────────────
   2026-10-11 从参照站 LLMCap 搬来的**结构**（不是文案）：它把数据隐私做成一张两栏
   对照表，左边逐行列出"记了什么"，右边逐行列出"绝不碰什么"。比一段散文强的地方在于
   它是**可逐行核对的** —— 客户能一行一行问，而散文只能整段信或整段不信。
   🔴 两栏唯一的区分符就是行首那个 ✓ / ✗（W88 钉两栏的记号不许互换）。 */
.ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(302px, 1fr)); gap: 18px; margin: 6px 0 20px; }
.ledger__col {
  position: relative; padding: 22px 24px 24px;
  border: 1px solid var(--bd); border-radius: var(--radius-sm); background: var(--sf);
}
.ledger__col--never { border-color: var(--acm); background: var(--acd); }
.ledger__head {
  display: flex; align-items: center; gap: 9px; margin-bottom: 16px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--t4);
}
.ledger__col--never .ledger__head { color: var(--ac); }
.ledger__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ledger__list li { display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 10px; align-items: start; }
.ledger__mark { font-family: var(--mono); font-size: 12px; font-weight: 700; line-height: 1.75; color: var(--ac); }
.ledger__col--never .ledger__mark { color: var(--warn); }
.ledger__key { color: var(--t1); font-size: 14px; font-weight: 700; }
.ledger__val { color: var(--t3); font-size: 13px; line-height: 1.62; }
.ledger__note { margin-top: 15px; padding-top: 13px; border-top: 1px dashed var(--bd); color: var(--t4); font-size: 12.5px; line-height: 1.62; }

/* ── 部署方式三选项（LLMCap 的三格并列）──────────────────────────────────
   2026-10-11 从参照站搬来的结构：三种交付**并排**，而且每一格用**同一把尺子**量 ——
   适用场景 / 交付形态 / 核心优势。三格同尺才叫"覆盖全客户路径"，
   各写各的卖点只是三句广告。 */
.deploy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); gap: 18px; }
.deploy-card {
  position: relative; padding: 24px 22px 26px;
  border: 1px solid var(--bd); border-radius: var(--radius-sm); background: var(--sf);
}
.deploy-card--pick { border-color: var(--acm); background: var(--acd); }
.deploy-card__tag {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 15px; padding: 4px 12px;
  border: 1px solid var(--acm); border-radius: 999px; background: var(--acd); color: var(--ac);
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.deploy-card--pick .deploy-card__tag { background: var(--ac); color: var(--bg0); border-color: var(--ac); }
.deploy-card__title { font-size: 18px; font-weight: 700; color: var(--t1); margin-bottom: 10px; letter-spacing: -.015em; }
.deploy-card__body { color: var(--t2); font-size: 14px; line-height: 1.62; }
.deploy-card__rows { margin-top: 17px; display: grid; gap: 12px; }
.deploy-card__row { display: grid; gap: 3px; }
.deploy-card__label {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--t4);
}
.deploy-card__value { color: var(--t2); font-size: 13.5px; line-height: 1.6; }

/* ── 计数块（LLMCap 首屏下方那一排大数字）────────────────────────────────
   2026-10-11 从参照站搬来的结构。🔴 它那四个数是**社会证明**（多少客户、多少请求），
   我们一个都没有 —— 所以这里放的是**机制自己的读数**：判定过多少、拦下多少、
   告警几次、拦下之后有几发还是发出去了。全部为模拟值，并照机制明标三句
   （`class="demo-reading"` 槽 + 首页 badge）。

   🔴 分隔线只用**上横线**，不用竖线：竖线在栅格换列/叠放时要额外写规则去收，
   而"写死多列却忘了收口"正是本文件刚踩过的坑（`.phase-steps` 窄屏 153px）。
   上横线在任意列数下都成立（并排时连成一条，叠放时每格一条）。 */
.counter-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 22px; }
.counter-cell { padding: 24px 24px 26px 0; border-top: 1px solid var(--bd); }
.counter-cell + .counter-cell { padding-left: 24px; }
.counter-cell__v {
  display: block; font-size: clamp(27px, 3.3vw, 40px); font-weight: 900; line-height: 1.06;
  letter-spacing: -.03em; color: var(--t1); font-variant-numeric: tabular-nums;
}
.counter-cell__k { display: block; margin-top: 9px; color: var(--t3); font-size: 13.5px; line-height: 1.55; }
.counter-cell__n {
  display: block; margin-top: 6px; color: var(--t4);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
}

/* ── 能力卡里的可视化小样（LLMCap 每张卡都带一张界面缩略，不是图标）────────
   2026-10-11 补：上一轮只落了「✓ 特性清单 ＋ ◆ 脚注」，**漏了**参照站卡形里那一张
   **界面小样**（标题 → 一句 → **小样** → 清单 → 脚注）。只有清单那是一张承诺表，
   加上小样才是"这东西长什么样"。
   🔴 全部用 HTML/CSS 画：**零图片、零第三方请求、零数字**
   （未到货那三张卡由 B04 逐卡咬"卡内 0 数字"）。 */
.mini {
  margin-top: 6px; padding: 6px 9px; display: grid; gap: 4px;
  border: 1px solid var(--bd); border-radius: var(--r-2); background: var(--bg1);
}
.mini__head { display: flex; align-items: center; gap: 7px; }
.mini__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 8px var(--ac); }
.mini__label {
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--t4);
}
/* 额度刻度：用「几格亮着」表示余量 —— 比一条进度条更抗窄屏，也不需要在行内写百分比 */
.mini__pips { display: flex; gap: 4px; }
.mini__pips i { flex: 1; height: 4px; border-radius: 2px; background: var(--sfh); }
.mini__pips i.on { background: var(--ac); box-shadow: 0 0 7px var(--acm); }
.mini__line { display: flex; align-items: center; gap: 7px; min-width: 0; }
.mini__txt { color: var(--t3); font-size: 11px; line-height: 1.45; }
.mini__line--cut .mini__txt { color: var(--t4); text-decoration: line-through; text-decoration-color: var(--warn-m); }
.mini__line--keep .mini__txt { color: var(--t2); font-family: var(--mono); font-size: 10.5px; }
.mini__badge {
  flex: none; padding: 0 7px; border: 1px solid var(--acm); border-radius: 999px;
  background: var(--acd); color: var(--ac);
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .08em;
}
.mini__badge--warn { border-color: var(--warn-m); background: var(--warn-d); color: var(--warn); }
.mini__stack { display: grid; gap: 3px; }
.mini__stack i { height: 3px; border-radius: 2px; background: var(--sfh); }
.mini__stack i:nth-child(2) { width: 78%; }
.mini__stack i:nth-child(3) { width: 52%; }
.mini__loop { display: flex; align-items: center; gap: 5px; }
.mini__loop i { width: 22px; height: 5px; border-radius: 2px; background: var(--warn-m); opacity: .5; }
.mini__loop i:nth-child(2) { opacity: .78; }
.mini__loop i:nth-child(3) { opacity: 1; }

/* ── 数据与 ROI 区：左边网关日志，右边交互式试算器 ────────────────────────
   2026-10-11 从参照站搬结构（终端日志 ＋ ROI 算器）。左边那四颗数走**读数槽**，
   右边那三颗是访客自己按出来的，走 `calculator` 那一档独立例外。
   🔴 栅格用 1.15fr / 1fr 而不是 auto-fit 等分：日志要按住"阶段名 状态 数值"三列，
   等分会把中间那列挤到读不了 —— 这与 `.phase-wrap` 当初踩的是同一个坑。 */
.data-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }

.roi-log {
  padding: 16px 18px; border: 1px solid var(--bd); border-radius: var(--r-2);
  background: var(--bg1); display: grid; gap: 3px;
}
.roi-log__head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.roi-log__hint { margin-left: auto; color: var(--t4); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; }
.roi-log__row {
  display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
  padding: 8px 0; border-top: 1px solid var(--bd);
}
.roi-log__ph { color: var(--ac); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.roi-log__st { color: var(--t3); font-size: 12.5px; line-height: 1.5; }
.roi-log__n { color: var(--t2); font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.roi-log__row--stop .roi-log__ph { color: var(--warn); }

.roi {
  padding: 16px 18px; border: 1px solid var(--acm); border-radius: var(--r-2);
  background: var(--acd); display: grid; gap: 13px;
}
.roi__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.roi__tag {
  margin-left: auto; padding: 3px 9px; border: 1px solid var(--warn-m); border-radius: 999px;
  background: var(--warn-d); color: var(--warn);
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .06em;
}
.roi__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 11px; }
.roi__in { display: grid; gap: 6px; }
.roi__in-k { color: var(--t3); font-size: 12px; }
.roi__in input, .roi__in select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--bd); border-radius: var(--r-1);
  background: var(--bg2); color: var(--t1);
  font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums;
}
.roi__in input:focus, .roi__in select:focus { outline: 2px solid var(--acm); outline-offset: 1px; }
.roi__rows { display: grid; gap: 1px; }
.roi__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--bd);
}
.roi__k { color: var(--t3); font-size: 12.5px; }
.roi__v { color: var(--t1); font-family: var(--mono); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.roi__row--save .roi__v { color: var(--ac); }
/* 🔴 输出位在**静态 HTML 里必须是空的**（gate 的 CALC 那一档咬这一条）：
   `:empty` 时留一条占位短线，免得空着看起来像坏了。 */
.roi__out:empty::after { content: "—"; color: var(--t4); }
.roi__foot { color: var(--t4); font-size: 11.5px; line-height: 1.6; }

/* ── 图表：各成员额度占用（LLMCap 那种"图"的结构）────────────────────────
   2026-10-11 第五轮补。他点名「怎么没有 llmcap 那种图表的结构」。
   🔴 两条纪律都落在这里：
   1. **每个数都住 `demo-reading` 槽**（数值列），图里没有一颗裸数字；
   2. **条的宽窄必须与数字同序** —— 判据 W105 咬这一条：把两条的宽度对调、
      数字不动 ⇒ 必须红。图会撒谎才算真缺陷（一张"看着像图"的装饰不算图）。
   条宽用类名给（`bars__fill--w92`），所以 HTML 里连一个 `%` 都不出现。 */
.bars {
  margin-top: 18px; padding: 16px 18px; display: grid; gap: 2px;
  border: 1px solid var(--bd); border-radius: var(--r-2); background: var(--bg1);
}
.bars__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.bars__hint { margin-left: auto; color: var(--t4); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; }
.bars__row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 96px; gap: 12px; align-items: center; padding: 7px 0; }
.bars__k { color: var(--t3); font-size: 12.5px; }
.bars__track { height: 9px; border-radius: 3px; background: var(--sfh); overflow: hidden; }
.bars__fill {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--ac3), var(--ac));
  box-shadow: 0 0 10px var(--acm);
}
.bars__fill--w92 { width: 92%; }
.bars__fill--w67 { width: 67%; }
.bars__fill--w50 { width: 50%; }
.bars__fill--w32 { width: 32%; }
.bars__fill--w12 { width: 12%; }
.bars__v {
  color: var(--t2); font-family: var(--mono); font-size: 12.5px;
  text-align: right; font-variant-numeric: tabular-nums;
}

/* ── 随文档发布那一屏（缺哪一径写清楚）────────────────────────────── */
.pending-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 18px; }
.pending-card { padding: 24px; }
.pending-card__tag {
  display: inline-block; margin-bottom: 14px; padding: 4px 11px;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  border-radius: var(--r-2); text-transform: uppercase;
  background: var(--sf); border: 1px solid var(--bd); color: var(--t4);
}
.pending-card strong { display: block; font-size: 16.5px; margin-bottom: 7px; color: var(--t1); }
.pending-card p { color: var(--t2); font-size: 14.5px; }

/* ── 演示页（demo.html）──────────────────────────────────────────────
   这一屏的每一颗数字都住在 .demo-reading 那一种槽位里：槽外的页面（页脚除外）出现任何数字都是红。
   理由不是排版洁癖 —— 他 2026-10-11 拍「数据虚假显示」的同时要求明标，那么"假"就必须圈得住。 */
.demo-flag {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  margin: 0 0 30px; padding: 14px 18px;
  font-family: var(--mono); font-size: 13px; color: var(--warn);
  background: var(--warn-d); border: 1px dashed var(--warn-m); border-radius: var(--r-4);
}
/* 演示读数那一排：交给 auto-fit，窄到一格、宽到六格都自己落 */
.demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 16px; }
.demo-card { padding: 18px 20px; }
.demo-card__label { display: block; font-size: 12.5px; color: var(--t4); margin-bottom: 8px; }
.demo-card__note { margin-top: 8px; font-size: 12px; color: var(--t4); }
/* 读数槽：参照站"数据/数字用等宽"那一条的落点 —— 全站所有读数都走这一档 */
.demo-reading {
  font-family: var(--mono); font-size: clamp(21px, 1.5vw, 27px); font-weight: 700;
  color: var(--t1); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.demo-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.demo-table caption { text-align: left; font-family: var(--mono); font-size: 12px; color: var(--t4); padding-bottom: 10px; }
.demo-table th, .demo-table td { padding: 11px 12px; border-bottom: 1px solid var(--bd); text-align: left; vertical-align: baseline; }
.demo-table th { color: var(--t4); font-weight: 600; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.demo-table td { color: var(--t2); }
.demo-table .demo-reading { font-size: 15.5px; font-weight: 600; }
.demo-table tr:hover td { background: var(--sf); }
.demo-hint { margin-top: 22px; font-size: 13.5px; color: var(--t4); max-width: 62em; }
.demo-panel { padding: 22px 24px; }
.demo-panel__title { margin: 0 0 14px; font-size: 17px; font-weight: 700; color: var(--t1); }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq-list { display: grid; gap: 12px; max-width: 880px; margin: 0 auto; }
.faq-item { border-radius: var(--r-4); overflow: hidden; }
.faq-item.is-open { border-color: var(--acm); box-shadow: var(--rim-hi); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  padding: 19px 22px; font: inherit; font-size: 16.5px; font-weight: 650; text-align: start;
  color: var(--t1); background: none; border: 0; cursor: pointer; letter-spacing: -.012em;
}
.faq-q:hover { background: var(--sf); }
.faq-q__arrow { flex: none; font-family: var(--mono); font-size: 18px; color: var(--ac); transition: transform .2s ease; }
.faq-item.is-open .faq-q__arrow { transform: rotate(45deg); }
/* 收起态住在**静态 HTML** 的 [hidden] 上（W2 验收：默认全部收起）。过去是 site.js 现场补
   `a.hidden = true` —— 那一版在脚本没跑起来的那一屏（禁 JS / 读屏器先于脚本 / 抓取预览）
   六条答案全摊开，"默认收起"就成了一句只对半个人成立的话。展开仍由 JS 翻这颗属性。 */
.faq-a { padding: 0 22px 20px; color: var(--t2); font-size: 15px; }
.faq-a__qualifier {
  display: block; margin-top: 12px; padding: 11px 14px; font-size: 13.2px;
  color: hsla(43, 62%, 82%, .96);
  background: var(--warn-d); border: 0; border-inline-start: 2px solid var(--warn-m); border-radius: var(--r-3);
}

/* ── 定价 ─────────────────────────────────────────────────────────────── */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(266px, 1fr)); gap: 18px; }
.pricing-grid--four { grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); }
.price-card { display: flex; flex-direction: column; gap: 11px; padding: 30px 26px; }
/* 推荐档：参照站 `.price-card.recommended{background:linear-gradient(180deg,accent .07,var(--bg2) 40%)}`
   + 主色描边。旧版是整张卡套一层 accent 渐变 + 一圈光晕，在近黑底上比相邻两张亮一档半。 */
.price-card--featured {
  border-color: var(--acm);
  background: linear-gradient(180deg, var(--acd) 0%, hsla(0, 0%, 100%, .012) 46%);
  box-shadow: var(--rim-hi);
}
.price-card__name { font-size: 17px; font-weight: 700; color: var(--t1); }
/* 价目走等宽 + tabular：三张卡的 $0/$29/$59 竖直对齐（`网站设计.md` 第 3 条"数字用等宽"） */
.price-card__price {
  font-family: var(--mono); font-size: clamp(30px, 3vw, 38px); font-weight: 700;
  letter-spacing: -.03em; color: var(--t1); line-height: 1.12; font-variant-numeric: tabular-nums;
}
.price-card__price small { font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--t4); letter-spacing: 0; }
.price-card__desc { color: var(--t2); font-size: 14px; }
.price-card__row { font-size: 13.8px; color: var(--t2); padding-top: 10px; border-top: 1px dashed var(--bd); }
.price-card__row--seat {
  align-self: flex-start; padding: 5px 11px; border-radius: var(--r-2);
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  color: var(--ac); background: var(--acd); border: 1px solid var(--acm);
}

/* ── 收尾 CTA ─────────────────────────────────────────────────────────── */
/* 旧的是一整幅 `linear-gradient(160deg,#0a1428,#050810)` + 主色描边的横板 ——
   正是文件头 ② 要撤的那一形。这里改成"一段光 + 上下两道发丝线"，星野照常透过来。 */
.cta {
  position: relative; overflow: hidden; padding: clamp(66px, 8vw, 104px) 0;
  background-image: radial-gradient(760px 320px at 50% -30%, var(--acm), transparent 68%);
  background-repeat: no-repeat;
  border-top: 1px solid var(--bd); color: var(--t2); text-align: center;
}
.cta::after {
  content: ""; position: absolute; inset: auto 0 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--acm), transparent);
}
.cta__title { font-size: clamp(26px, 3.2vw, 41px); font-weight: 900; letter-spacing: -.03em; color: var(--t1); line-height: 1.1; } /* 46 → 41：它是同一根字阶上的"大标题"，只收 `.section-title` 会让收尾那一格显得比正文标题还大 */
.cta__copy { margin: 16px auto 28px; max-width: 42em; color: var(--t2); font-size: 16px; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ── 页脚 ─────────────────────────────────────────────────────────────── */
.footer {
  padding: 38px 0; border-top: 1px solid var(--bd);
  background: hsla(250, 26%, 5%, .38);
  -webkit-backdrop-filter: blur(3px) saturate(1.3) brightness(.97);
  backdrop-filter: blur(3px) saturate(1.3) brightness(.97);
  box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .06);
  color: var(--t4); font-size: 13.5px;
}
.footer__inner { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.footer__links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer__links a { position: relative; color: var(--t3); transition: color .18s ease; }
.footer__links a:hover { color: var(--ac); text-decoration: none; }
.footer__muted { font-family: var(--mono); font-size: 12px; color: var(--t4); }

/* ── 语言落地页（根 index.html 那一屏）──────────────────────────────── */
.chooser { display: grid; place-items: center; min-height: 100vh; }
.chooser__box { width: min(440px, 90vw); padding: 32px; }
.chooser__title { margin: 0 0 8px; font-size: 23px; font-weight: 900; letter-spacing: -.02em; color: var(--t1); }
.chooser__lead { margin: 0 0 18px; font-size: 14px; color: var(--t4); }
.chooser__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.chooser__list a { display: block; padding: 11px 14px; border-radius: var(--r-3); color: var(--t2); border: 1px solid transparent; transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
.chooser__list a:hover { background: var(--sf); border-color: var(--bd); text-decoration: none; color: var(--t1); }
.chooser__noscript { margin-top: 18px; font-size: 12.5px; color: var(--t4); }

/* ── RTL ──────────────────────────────────────────────────────────────── */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .capacity-card__label, [dir="rtl"] .qualifier__label,
[dir="rtl"] .eyebrow, [dir="rtl"] .opt-note { letter-spacing: 0; }

/* 滚动进场那一格本轮撤了：`animation-timeline: view()` 把整页卡片留在 opacity:0
   （全页截图现读：痛点/三步/占位卡/FAQ/定价四组网格全空）。内容不许依赖滚动位置才可见（B15）。 */

/* ══ 断点 ══════════════════════════════════════════════════════════════ */

/* 顶栏十格在 1240px 以下先收字号与内边距 —— 换行不算少格子，
   闸门是按盘上现读逐格对的，样式只许影响观感，不许影响可达性（不用 display:none 藏格子）。 */
@media (max-width: 1240px) {
  .nav__link, .menu__btn, .lang__btn, .nav__ph { font-size: 13.5px; padding: 6px 8px; }
  .nav__inner { gap: 8px 12px; }
  .logo { font-size: 16px; }
}
/* 再窄一档：让链接那一行在自己内部横向滚，而不是把文档撑宽（参照站 760px 那一手）。
   🔴 不用 display:none 收**单格** —— 收起来就不是"十格"了。
   ≤680 那一档改由抽屉接管：折叠挂在 `.nav__links` **整块**上，展开径是同档里的 `:checked`，
   格子在 DOM 里和展开态里一枚都不少（判据 B45 成对咬这两头 —— 见下面 W3 那一段）。 */
@media (max-width: 980px) {
  /* 数据与 ROI 区：两栏收到一栏（下面 W95 咬「写死多列必须有收口规则」这一条）。 */
  .data-split { grid-template-columns: minmax(0, 1fr); }
  .nav__inner { flex-wrap: wrap; }
  .nav__links {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    width: 100%; padding-bottom: 2px;
  }
  .nav__links::-webkit-scrollbar { display: none; }
  .capacity-wrap { grid-template-columns: minmax(0, 1fr); }
  .pain-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .security-item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 🔴 三相块在窄屏要**整块**变成单列：`.phase-wrap` 是 `1.7fr / 1fr` 两列，
     980 以下三相那一列会只剩约 300px、每格约 100px，正文根本读不了。
     2026-10-11 实测（`_probe/geocheck.py 500`）：收口前三相各 153px、收口后各 460px。 */
  .phase-wrap { grid-template-columns: minmax(0, 1fr); }
}

/* 宽屏那一档：柱宽之外还要让字号与留白一起长，否则 2560 上就是一件小衣服挂在大墙上 */
@media (min-width: 1700px) {
  .section { padding: calc(var(--section-y) * 1.12) 0; }
  .hero__main { max-width: 1180px; }
  .hero__console { width: min(840px, 100%); }
  .how-card, .price-card, .pain-row, .security-item, .pending-card, .demo-card { padding-block: 32px; }
}

@media (max-width: 860px) {
  .demo-table { font-size: 13px; }
  .demo-table th, .demo-table td { padding: 9px 8px; }
}

@media (max-width: 720px) {
  /* 图表那三列在窄屏收窄（标签柱 / 条 / 数值），否则数值列会被挤到换行。 */
  .bars__row { grid-template-columns: 64px minmax(0, 1fr) 76px; gap: 8px; }
  .bars__k, .bars__v { font-size: 11.5px; }
  .menu__list, .lang__menu { position: static; width: 100%; box-shadow: none; }
  .demo-grid { grid-template-columns: minmax(0, 1fr); }
  .hero__actions .btn { flex-basis: 100%; }
  .pain-row, .security-item, .how-card, .price-card, .pending-card, .demo-card,
  .capacity-card, .cost-card { padding: 20px 18px; }
  /* 三相真正叠成一列；分隔线从"左侧竖线"改成"上方横线"，否则叠起来会留一条悬空的竖线。 */
  .phase-steps { grid-template-columns: minmax(0, 1fr); }
  .phase-step { padding: 18px 0; }
  .phase-step + .phase-step { padding-left: 0; border-left: 0; border-top: 1px solid var(--bd); }
}

/* ══ W3 核心窄屏那一档：680（手机横屏）/ 500（手机竖屏）══════════════════════
   这一档不是"设计出来的"，是 `_probe/w3geo.py`（真 Chrome，八页 × 逐宽 × 四种开合态逐元素量矩形）
   量出来的两格真缺陷，2026-10-13 本机，读数落 `_probe/out-motion/w3geo-base.json`：
   ① **可点性** —— 八页合计 866 枚可点元素短边 < 44px：`.footer__links a` 22.7、`.logo` 30、
      `.nav__link` / `.menu__btn` / `.lang__btn` 36.7、`.roi__in input` 36 / `select` 37。
   ② **字号** —— 正文那一层被 1240 那档压到 13–13.8（`.nav__link` 13.5、`.price-card__row` 13.8、
      `.section-note` 13.5 …），手机上要眯眼。
   🔴 而任务单 premises 的那一格「小屏要横向缩放页面」**没量到**：680/500 两档
      `documentElement.scrollWidth == clientWidth` 逐页成立、0 趟文档级溢出（先前那 16 枚"溢出元素"
      是被祖先裁剪的装饰层 —— 量具假红，见 `_probe/w3geo.py` 卷首那条）。所以这一档只做三件事：
      **折叠形状**（汉堡抽屉，静态控件）、**可点性地板**、**正文字号地板**。
   🔴 不碰内容、不碰十格 IA、不碰 W2 那层的内距与密度（−35% 是在 1600/2560/980 量的，这一档不参与）。
   🔴 两枚地板只许引用 `--touch-min` / `--body-min`，档内不许出现写死的 px 地板（B46/B47 各咬这一形状）。
   🔴 名册外那一层（判据书 BODY_FLOOR 之外，现读 48 枚选择器，9–13.5px）**刻意不抬**：
      它们不是正文，是把 10px 的小标签读成 eyebrow 的那一形制；整层顶到 14px 会把密度那一档整块顶回去。
      「字体最小 14px（移动端）」若要一字不松地连装饰层也抬，那是**另一格决断**，登记在上面那条注释里。 */
@media (max-width: 680px) {
  /* 1) 抽屉：整块收起 + `:checked` 展开，两头都在 CSS 里（B45 成对咬 —— 只有藏 = 死抽屉）。
        🔴 折叠只挂在 `.nav__links` 这一**整块**上，不许逐格：格子自己 display:none 在展开态也少一格，
        而十格 IA 的判据读的是 HTML 文本、看不见样式 —— 屏上少了格子，纸面还全是绿的。 */
  .nav__drawer { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
  .nav__burger { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto;
                 padding: 0 12px; min-height: var(--touch-min); font-size: var(--body-min);
                 color: var(--t2); background: var(--sf); white-space: nowrap;
                 border: 1px solid var(--bd); border-radius: var(--r-3); cursor: pointer; }
  /* 三道杠用渐变画：零图片、零字符（不放 ▤ 那种方块字符，字体一缺就变成豆腐块）。 */
  .nav__burger::before { content: ""; flex: none; width: 18px; height: 12px;
    background:
      linear-gradient(var(--t2), var(--t2)) 0 0 / 100% 2px no-repeat,
      linear-gradient(var(--t2), var(--t2)) 0 5px / 100% 2px no-repeat,
      linear-gradient(var(--t2), var(--t2)) 0 10px / 100% 2px no-repeat; }
  .nav__drawer:focus-visible ~ .nav__burger { outline: 2px solid var(--acm); outline-offset: 2px; }
  .nav__links { display: none; }
  .nav__drawer:checked ~ .nav__links {
    display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    position: absolute; left: 0; right: 0; top: 100%; width: auto; margin: 0;
    gap: 2px; padding: 10px var(--nav-pad) 18px;
    max-height: calc(100vh - 64px); overflow-x: hidden; overflow-y: auto;
    background: hsla(250, 26%, 8%, .96);
    border-bottom: 1px solid var(--bd); box-shadow: var(--rim-hi);
    -webkit-backdrop-filter: blur(14px) saturate(1.8);
    backdrop-filter: blur(14px) saturate(1.8);
  }
  /* 抽屉里格子改成**竖排整行**：横滚那一档（980）在这里不再需要 —— 一行一格，摸得到边界。 */
  .nav__links .menu, .nav__links .lang { display: block; width: 100%; }
  .nav__link, .nav__ph, .menu__btn, .lang__btn { display: flex; justify-content: flex-start; width: 100%; }
  /* 语言那一列本来自带 62vh 的内滚；抽屉自己已经会滚，再套一层就是手机上两层滚轮。 */
  .nav__links .lang__menu { max-height: none; }

  /* 2) 可点性地板：名册按台架现读的族点名（判据 B46 逐枚咬），值只许走那颗旋钮。 */
  .logo, .nav__link, .nav__ph, .menu__btn, .lang__btn, .nav__burger,
  .menu__opt, .lang__opt, .btn, .faq-q,
  .roi__in input, .roi__in select { min-height: var(--touch-min); }
  /* 页脚那几个是行内链接，min-height 对 inline 不生效 ⇒ 先给形状再给地板。
     🔴 句子**行间**的正文链接（`p.section-note a`，台架量到 17px）不在这份名册里：
     WCAG 对"嵌在句子里的链接"明确豁免尺寸要求，硬抬到 44 会把行高顶散、把密度那一档顶回去。 */
  .footer__links a { display: inline-flex; align-items: center; min-height: var(--touch-min); }

  /* 3) 正文字号地板：这一族在屏上读起来是**句子**（13–13.8px），整族抬到那颗旋钮。
        线画在"成句的说明文字"上：`.feature-card__gap`「还缺：一份可复现的前后对比读数」、
        `.console__foot`「演示数据 · 非厂商账单 · 不可用于财务结算」、`.lang__foot`「语言切换尚未开通」
        这些是**必须读得清的承诺与免责**，缩到 13 就是把它藏起来；
        而 eyebrow / 徽标 / 序号 / 价目表的数字与单位是标签那一形，留在名册外（卷首那条注释）。 */
  .nav__link, .nav__ph, .menu__btn, .lang__btn, .section-note,
  .price-card__row, .price-card__row--seat, .qualifier__text, .counter-cell__k,
  .feature-card__body, .feature-card__foot, .feature-card__gap, .feature-card__specs li,
  .footer, .footer__links a, .compare td, .console__status, .console__foot,
  .demo-flag, .demo-hint, .demo-card__note, .phase-step__body, .phase-panel__list li,
  .phase-panel__foot, .faq-a__qualifier, .ledger__note, .ledger__val, .diff-note,
  .deploy-card__value, .roi-log__st, .roi__foot, .menu__foot, .lang__foot { font-size: var(--body-min); }
}

/* ── 科技感（他 2026-10-11：「有没有可以科技感的样式或者特效」）─────────────
   先答一问：**这站本来就有**一套 —— 背景场漂移光斑（`qf-drift-*`）、闪烁（`qf-twinkle`）、
   呼吸点（`qf-breathe`）、首屏浮入（`qf-rise`）、打字光标（`qf-caret`）、
   卡片悬停辉光（`::before` + `transition`）。这一轮在这之上**再加三处**，
   都往"仪表盘"那个方向靠（LLMCap 那一路的观感）。

   🔴 三处全是纯 CSS：零图片、零第三方、零运行时。都收在 `--ac*` / `--bd` 三枚 token 上。
   🔴 凡带动画的，必须同时在文件末尾那一档 `prefers-reduced-motion: reduce` 里关掉
   （那里原本就有，B14 在管）—— 判据 W106 专门咬**新加的**那一条。
   这不是礼仪：铺满一屏的背景场 + 扫光叠一起，对前庭敏感的人是实打实的不适。 */

/* 1. 暗底上的网格衬底：把"一块深色"变成"一个空间"。
      直接画在 section 自己的 background-image 上，不另起一层、不碰 z-index ——
      W69 明令背景层那一格不许自己抬 z-index，那就干脆连栈都不用动。 */
.section--dark {
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .032) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .032) 0 1px, transparent 1px 34px);
  background-position: 50% 0;
}

/* 2. HUD 四角括号：给面板一个"被框住的仪表"的边。
      只用两个伪元素画对角，另两角镜像 —— 这样不占标签、也不用加 wrapper。 */
.roi-log, .roi, .bars { position: relative; }
.roi-log::before, .roi-log::after,
.roi::before, .roi::after,
.bars::before, .bars::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  border: 1px solid var(--ac); opacity: .5; pointer-events: none;
}
.roi-log::before, .roi::before, .bars::before {
  top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: 5px;
}
.roi-log::after, .roi::after, .bars::after {
  right: -1px; bottom: -1px; border-top: 0; border-left: 0; border-bottom-right-radius: 5px;
}

/* 3. 条形图上那道慢扫光：让"数据在动"这件事有形状，而不是只有静态条。
      两层 background 叠着：上面那层是斜向亮带（会跑），下面那层是主色渐变（不动）。 */
@keyframes qf-barsweep { from { background-position: -160% 0, 0 0; } to { background-position: 260% 0, 0 0; } }
.bars__fill {
  background-image:
    linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .34) 50%, transparent 62%),
    linear-gradient(90deg, var(--ac3), var(--ac));
  background-size: 220% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: qf-barsweep 4.2s linear infinite;
}

/* ── 微交互那一层（QK/website/task.md 的 W1，2026-10-13）──────────────────────
   判据 = `platform/websitecheck11.py` 的 B33–B36（形状）与 W107、W108、W111、W112（负控制）。
   这一轮只做四件事：卡族 hover（已并进上面那份名册）、按键扫光、顶栏滚过那一档、展开与折叠的入场。
   🔴 外部那本《微交互补丁.css》的锚点（`.card` / `.stat__number` / `.pricing__tier` /
      `.footer__link`）在本站八页里**一枚都没有** —— 照它抄下来得到的是一套静默空转的规则：
      页面一个字没变，判词却照样绿。这里每一枚都重锚到盘上的类名，并由 B33 先验"它在页面上在场"。
   🔴 凡带位移的（扫光 / 下划线 / 下拉入场 / 折叠入场 / 站标旋转 / 卡片上浮）都要在文件末尾
      那一档 `prefers-reduced-motion: reduce` 里**逐个点名**关掉 —— B14 只要求「至少关过两处」，
      新加一条而忘了关它照样绿，所以 B36 不数个数，它点名字。 */

/* 1. 顶栏滚过那一档：由 site.js 在滚动越过阈值时挂 `.nav--scrolled`。
      形状 = 背景更实 + 模糊与饱和更深 + 底线点亮。**不许**在这里改 z-index：
      基准那条已定 `z-index: 30`，滚动状态再去抬它就会压过弹层（W111 咬这一条，
      与 W66「背景层不许自己抬 z-index」同一纪律）。 */
.nav--scrolled {
  background: hsla(250, 30%, 4%, .82);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
  border-bottom-color: var(--acm);
  box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .09), 0 10px 30px -18px hsla(250, 50%, 3%, .9);
}

/* 2. 按键扫光：亮带平时停在左边界之外，hover 时整条推过去（0.6s，task.md 点名的时长）。
      `.btn` 自己 `position: relative; overflow: hidden`（在基准那条里补的），
      所以亮带被裁在圆角里，不会漏到键外。 */
.btn::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 42%;
  background: linear-gradient(100deg, transparent 0%, var(--ac3) 50%, transparent 100%);
  opacity: .5; pointer-events: none;
  transform: translateX(-180%) skewX(-14deg);
  transition: transform .6s ease;
}
.btn--primary:hover::before, .btn--dark:hover::before, .btn--ghost:hover::before {
  transform: translateX(320%) skewX(-14deg);
}
/* 禁用那一档不演"我在响应你"：挂着「即将开通」的那十几枚一律不亮（W112 咬这一条）。 */
.btn--muted::before { display: none; }

/* 3. 展开与折叠的入场：下拉菜单与 FAQ 答案各一道，只用 opacity + transform。
      FAQ 的收起态由 site.js 的 `[hidden]` 驱动，所以这里给的是一条**有限长**的入场，
      不是 height 过渡 —— `[hidden]{display:none}` 让"max-height 从 0 展开"那套经典做法
      在这里根本动不起来（元素先是完全不存在，谈不上插值）。 */
/* 与 qf-rise 同一条形状（见上面那段红字）：终点帧只收 opacity，transform 留给层叠的当下值。 */
@keyframes qf-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; } }
@keyframes qf-fold { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; } }
.menu.is-open .menu__list, .lang.is-open .lang__menu { animation: qf-drop .18s ease-out both; }
.faq-item.is-open .faq-a { animation: qf-fold .22s ease-out both; }

/* 4. 站标方块：整枚轻轻转一下。只在 logo 那一径上，不跟着鼠标算角度。 */
.logo:hover .logo__mark { transform: rotate(-8deg) scale(1.06); border-color: var(--ac); }

/* 5. 页脚链接的下划线从左边推过来：颜色那一半基准规则里已有 transition，
      这里补的是"有一条线在动"的形状。 */
.footer__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--gradient); pointer-events: none;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .25s ease;
}
.footer__links a:hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .pain-row, .how-card, .price-card, .pending-card, .demo-card, .security-item,
  .faq-item, .menu__opt, .lang__opt, .nav__link, .footer__links a { transition: none; }
  .faq-q__arrow { transform: none; }
  .hero__eyebrow, .hero__title, .hero__copy, .qualifier, .hero__actions, .hero__console { animation: none; }
  .hero__eyebrow-dot, .feature-card__status::before { animation: none; opacity: .8; }
  /* 新加的那道慢扫光（`qf-barsweep`）也要在这里关掉 —— W106 咬这一条。 */
  .bars__fill { animation: none; background-image: linear-gradient(90deg, var(--ac3), var(--ac)); }
  body::before, body::after { animation: none; }
  .painboard > *, .how-grid > *, .feature-grid > *, .pending-grid > *,
  .pricing-grid > *, .security-list > *, .demo-grid > *, .faq-list > * { animation: none; }
  .how-card::before, .price-card::before, .pending-card::before, .demo-card::before,
  .security-item::before, .pain-row::before { transition: none; }

  /* 微交互那一层**逐条点名**（判据 B36；W108 摘掉下面任意一条，它必须红）。
     这里不许写成"通配符一把关掉"—— 那等于什么都没点名，新加一条动效还是漏。 */
  .btn::before { display: none; }
  .footer__links a::after { display: none; }
  .menu.is-open .menu__list, .lang.is-open .lang__menu,
  .faq-item.is-open .faq-a { animation: none; }
  .logo:hover .logo__mark,
  .feature-card:hover, .deploy-card:hover, .capacity-card:hover, .cost-card:hover,
  .faq-item:hover, .how-card:hover, .pending-card:hover, .demo-card:hover,
  .price-card:hover, .security-item:hover, .pain-row:hover { transform: none; }
}