/* ==========================================================================
   quez-spec.css —— Quez 页（重新排版，风格沿用全站）
   ==========================================================================
   ★ 口径（ikun 2026-10-17 两次纠偏后定）：
     「风格要和其他的统一，我是要重新排版设计，不是要你把整个风格变化。」
     → 换的是**版式**，不是**视觉体系**。色板/字体/圆角/容器宽度对齐
       styles.css 的 [data-theme="light"]；本页不加载 styles.css（理由见
       quez-nav.css 文件头），故在此落成字面值。

   ★ 第 44 轮：把散落的字号/字重/行高/字距收敛成**一套刻度**
     （原来 font-size 35 种、line-height 22 种、letter-spacing 17 种、
      字重 650/680/250 这类「半档」满页都是，是页面看着不精致的根因）。
     现在只有 4 级正文字号 + 4 级标题字号，字重只用 300/400/500/600/700，
     行高只用 1.15 / 1.7 / 1.6（引言）/ .84（数字），字距只用 4 个值。

   版式主张（对照 09_设计参考/Awwwards-取用清单.md 的「取」）：
     1. 网格只做两件事：对齐、破格。每节一个非对称分栏，不用「标题居中」模板。
     2. 巨幅刊头 210px，与正文 16px 隔 13 倍，中间只放 2 级（47 / 33）。
     3. 整页只破格三次：刊头、痛点整幅、矩阵整幅。
     4. 幽灵数字只做空间占位，不承载信息。

   动效（React Bits 规格，原生实现见 quez-motion.js）：
     刊头逐字升起 / 三个数字滚动 / 主按钮磁吸。全页只此三处。
   ========================================================================== */

:root {
  /* ---------- 色：= styles.css [data-theme="light"] ---------- */
  --q-ink: #0f172a;                     /* --text-primary    */
  --q-ink-2: #334155;                   /* --text-secondary  */
  --q-ink-3: #5c6d82;                   /* ★ 第 53 轮：#64748b 在 hilly 的新纸色 #f4f7fe 上只有 4.44（不够 AA），带内更低。压深后 4.94 / 带上 4.68 */
  --q-ink-4: #8b98ab;                   /* 大号装饰序号（3.0:1，仅 ≥24px 用） */
  --q-ghost: #e2eafc;                   /* 幽灵数字：带一点品牌蓝，读起来是「章节号」而不是脏印子 */
  --q-line: rgba(15, 23, 42, .12);      /* --glass-border    */
  --q-line-2: rgba(15, 23, 42, .07);
  --q-paper: #f4f7fe;                   /* ★ 第 53 轮：对齐 hilly 的 body 底色（原 #f8fafc 是 slate-50） */
  --q-white: #ffffff;                   /* --bg-darker       */
  --q-band: #e9eefc;                    /* ★ 第 53 轮：hilly 的色块是淡蓝而不是中性灰；#ebf1fe 太接近纸色，带看不出来 */
  --q-accent: #1e5eff;                  /* --cyan-primary    */
  --q-accent-wash: rgba(30, 94, 255, .035);  /* 列表 hover 的极浅底 */
  --q-ink-deep: #0b1220;                /* 视频框的「片门黑」，比正文墨色再深一档 */
  --q-warn: #b42318;      /* 5.08→6.0:1 on band：全页唯一的红，取编辑红不用警报红 */

  /* ---------- 字号：4 级正文 + 4 级标题 ---------- */
  --q-fs-micro: 11px;                   /* 等宽标签 / 序号 / 表头 / 徽标 */
  --q-fs-meta: 12.5px;                  /* 图注 / meta 行 / 极小说明    */
  --q-fs-body: 14px;                    /* 表格单元格 / 列表描述        */
  --q-fs-lg: 16px;                      /* 段落 / 按钮 / 行标题 / FAQ   */
  --q-fs-h3: clamp(16px, 1.25vw, 18px);
  --q-fs-h2: clamp(30px, 3.5vw, 47px);  /* 节标题 */
  --q-fs-claim: clamp(28px, 3.6vw, 48px);  /* 第 51 轮：演示台搬走，主张成为首屏主角 */
  --q-fs-cta: clamp(30px, 4vw, 54px);
  --q-fs-spec: clamp(22px, 2.2vw, 27px);/* 规格值 8m / 24h */
  --q-fs-num: clamp(52px, 6.6vw, 92px);/* 50+ / 186 */
  --q-fs-ghost: clamp(72px, 8.4vw, 124px);
  /* ★ 刊头原来 210px（正文 16px 的 13 倍）。版式上没错，但放在一个
     h1 只有 54–58px 的站里，它读起来像「另一个网站的开屏」而不是「同一页」。
     收到 128px（约 8 倍）后仍是全站最大的字、仍占满左栏，但不再越出这套
     字号表能解释的范围。
     ★ 首屏改为整屏后，128px 的刊头把主张与三个数字压得太靠下，再收一档到
     96px（约 6 倍正文）：仍是最重的识别元素，但把纵向空间让给正文。 */
  --q-fs-mast: clamp(52px, 6.6vw, 96px);
  /* 下面 4 档都是「展示型数值」，只在固定几个元件上出现，但仍然成令牌：
     不然它们又会变成某一条规则里的裸数字（第 44 轮清理的就是这个）。 */
  --q-fs-stat: clamp(38px, 4.4vw, 60px);   /* 第 51 轮：数字带从半栏提到整幅，34px 显空 */    /* 首屏三个数字 */
  --q-fs-step: clamp(44px, 5vw, 64px);      /* 六项优势序号 */
  --q-fs-quote: clamp(16px, 1.65vw, 19px);  /* 引文 */
  --q-fs-index: clamp(24px, 2.4vw, 32px);   /* 「为什么」条目序号 */

  /* ---------- 字重：只留 6 档，不再出现 650/680 ----------
     ★ 第 45 轮补 --q-w-black:800。
       原来这一页最高只到 700，而 index / hilly 的 h1 是 900、h2 是 800。
       同一句「标题」在三个页面上一个厚重一个有书卷气，这是页面看着「不是
       同一个网站」的第一位原因 —— 比配色明显得多，因为人眼先认笔画粗细。 */
  --q-w-thin: 300;    /* ★ 只剩幽灵数字（）在用：它是水印，不该有重量 */
  --q-w-normal: 400;
  --q-w-medium: 500;
  --q-w-semi: 600;
  --q-w-bold: 700;
  --q-w-black: 800;   /* 与 index/hilly 的 h2 同档 */
  --q-w-heavy: 900;   /* ★ 第 53 轮：hilly/index 的 h1 是 900，只有刊头用 */

  /* ---------- 行高：只留 8 档，按「读法」分而不是按「字号」分 ---------- */
  --q-lh-flat: 1;       /* 单行控件 / 规格值：不折行，不需要行距 */
  --q-lh-tight: 1.15;   /* 标题 */
  --q-lh-h2: 1.25;               /* ★ 第 53 轮：hilly 的 section-title 是 40/50 = 1.25，原来 1.15 偏紧 */
  --q-lh-claim: 1.28;   /* 多条陈述：比标题松、比正文紧 */
  --q-lh-head: 1.4;     /* 小标题 h3 */
  --q-lh-snug: 1.5;     /* meta / 图注 / FAQ 摘要 */
  --q-lh-quote: 1.6;    /* 引言（字号大，行高收一点） */
  --q-lh-body: 1.6;     /* ★ 第 53 轮：对齐 hilly 的 25.6/16 = 1.6 */
  --q-lh-num: .84;      /* 展示数字 / 刊头 / 幽灵 */

  /* ---------- 字距 ----------
     ★ 第 45 轮收窄：原来是 -.045em（210px 刊头下 = -9px），
       而 index 的 h1（58px）是 -1px ≈ -.017em、h2 是 normal。
       -9px 这种量级会让大字「抱死」，是另一个页面的排法，不是同一套字号表。
       现在 display 收在 -.022em（128px 下 -2.8px），标题直接落 0 与 index 一致。 */
  --q-ls-display: -.022em;  /* 大字 */
  --q-ls-heading: 0;        /* 标题：index/hilly 的 h2 都是 normal */
  --q-ls-mono: .14em;       /* 等宽大写标签 */
  --q-ls-cn: .02em;         /* 中文标签（再大写就会被拆成「商 务 会 谈」） */

  /* ---------- 间距：4 的倍数 ---------- */
  --q-s1: 4px;
  --q-s2: 8px;
  --q-s3: 12px;
  --q-s4: 16px;
  --q-s5: 24px;
  --q-s6: 32px;

  /* ---------- 面与动效 ---------- */
  --q-radius: 14px;                     /* --radius-md */
  --q-radius-tag: 4px;                  /* 微型徽标 */
  --q-ease: cubic-bezier(.22, .61, .36, 1);
  --q-t: .24s var(--q-ease);

  /* ---------- 层次：与 styles.css 的 --shadow-* 同源 ----------
     ★ 第 45 轮新增。原来这一页 box-shadow 出现 **0 次**（index 68 个元素有阴影、
       hilly 46 个）。一个是「平面印刷品」，一个是「卡片浮在浅色底上」，
       两种语言放在同一个导航下面，观感就分裂了。
       这里按 index 的阴影曲线补一档卡片阴影 + 一档按钮辉光，量级一致：
       大而散、透明度低、y 偏移大、负扩散 —— 是「柔和」而不是「硬投影」。 */
  /* ★ 第 53 轮：换成 hilly 卡片那条阴影公式（1px 贴边 + 大而散的落影），
     原来只有一条 20/40/-15，近距离看不出「卡片浮起来」，远看又偏重。 */
  --q-sh-card: 0 1px 2px 0 rgba(15, 23, 42, .05), 0 16px 32px -22px rgba(15, 23, 42, .13);
  --q-sh-card-hover: 0 1px 2px 0 rgba(15, 23, 42, .05), 0 20px 40px -22px rgba(15, 23, 42, .2);
  --q-sh-glow: 0 10px 30px rgba(30, 94, 255, .2);

  /* 主按钮渐变 = styles.css 的 --btn-grad（本页不加载 styles.css，故写字面值）。
     ★ 这是「同一套按钮」最关键的一处：index/hilly 的主 CTA 都是蓝紫渐变胶囊，
       而 Quez 原来是墨黑实心，一进首屏就能看出不是一套。 */
  --q-grad-btn: linear-gradient(to right, #1e5eff 0%, #8f6bff 51%, #1e5eff 100%);

  /* 容器宽跟首页 .wrap 的 1180：1440 下占屏 .82，正是 Awwwards 的 0.78–0.86；
     1320 会到 .92，内容顶到边。 */
  --q-max: 1180px;
  --q-pad: clamp(20px, 3.4vw, 56px);
  --q-gap: clamp(24px, 3.2vw, 56px);
}

/* ---------- 骨架 ---------- */
.q-main {
  background: var(--q-paper);
  color: var(--q-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: var(--q-fs-body);
  line-height: var(--q-lh-body);
  -webkit-font-smoothing: antialiased;
}

.q-in {
  width: min(100% - 2 * var(--q-pad), var(--q-max));
  margin-inline: auto;
}

.q-sec {
  position: relative;
  padding-block: clamp(64px, 7vw, 120px);
  border-top: 1px solid var(--q-line);
}

/* ---------- 全站底色：html / body 也用纸色 ---------- */
/* quez.css 里有 `html { background: var(--bg) }`，那个 --bg 还是旧的 #f8fafc。
   .q-main 只盖住 <main>，页脚落在 main 之外，于是页脚那 516px 露的是 body 底色 ——
   整页背景要统一，就必须把 html / body 一起改。 */
html,
html[data-theme="light"] body { background-color: var(--q-paper); }

/* ---------- 曾用「整幅出血」的两节，第 60 轮已并入普通 .q-sec ----------
   #pain / #scenes 原来是 .q-bleed.q-pain-band：100vw 出血 + 比纸深一档的底色。
   全站背景统一到一种纸色之后，出血带只剩「一条通屏细线 + 一条 1180 细线」的
   不一致，所以两节改回普通 .q-sec。下面只保留它们原来的版式特征：
   标题栏单列（这两节的标题都在 12 字以上，两栏会折成三行）。 */
#pain .q-head,
#scenes .q-head { grid-template-columns: minmax(0, 1fr); row-gap: var(--q-s5); }

/* 单列时导语放开到 62ch：52ch（≈524px）会把「信息过脑即过……找不到的那几句。」
   折成两行、第二行只剩五个字。62ch 整句一行读完；窄屏按词组断。 */
#pain .q-head .q-lead,
#scenes .q-head .q-lead {
  justify-self: start;
  max-width: 62ch;
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* ---------- 幽灵数字 ---------- */
.q-ghost {
  position: absolute;
  top: clamp(40px, 5vw, 76px);
  right: max(var(--q-pad), calc((100vw - var(--q-max)) / 2));
  font-size: var(--q-fs-ghost);
    line-height: var(--q-lh-num);
  font-weight: var(--q-w-thin);
  letter-spacing: var(--q-ls-display);
  color: var(--q-ghost);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ---------- 文字 ---------- */
.q-label {
  font: var(--q-w-medium) var(--q-fs-micro)/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: var(--q-ls-mono);
  text-transform: uppercase;
  color: var(--q-ink-3);
}

/* 中文标签禁用大字距：CJK 每字吃一个间距，会变成「商 务 会 谈」 */
.q-label--cn {
  letter-spacing: var(--q-ls-cn);
  text-transform: none;
}

.q-h2 {
  margin: 0;
  font-size: var(--q-fs-h2);
    line-height: var(--q-lh-h2);
  letter-spacing: var(--q-ls-heading);
  font-weight: var(--q-w-black);
  color: var(--q-ink);
  /* ★ CJK 默认「任意两字可断」，会在词中间切开（「工 / 作。」）。
     auto-phrase 按词组切行，balance 让末行不会只剩两三个字。
     两者必须一起给：只有 balance 时它按字数硬摊，反而会把词拆开。 */
  word-break: auto-phrase;
  text-wrap: balance;
}

.q-h2 em { font-style: normal; color: var(--q-accent); }

.q-lead {
  margin: 0;
  max-width: 44ch;
  font-size: var(--q-fs-lg);
  line-height: var(--q-lh-body);
  color: var(--q-ink-2);
}

.q-lead b { color: var(--q-ink); font-weight: var(--q-w-semi); }

/* 节头：左标题 / 右说明。标题那栏必须给够 —— 5fr 在 1440 下只有 449px，
   47px 的字一行只放得下 9 个汉字，而标题都是「10–12 字 + <br> + 10–12 字」，
   会被迫折成三行、末行只剩「具，」两个字。 */
.q-head {
  display: grid;
  /* ★ 全页只有一套两栏网格：标题区、卡片区、表格区都用 1fr/1fr +
     var(--q-gap)，右栏统一从 743 起。原来是 1.25fr/.78fr（右栏 874）
     配 1fr/1fr（右栏 743），上下两行的栏线差 131px，看着像两套网格。 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--q-gap);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 56px);
  position: relative;
  z-index: 1;
}

/* 说明文字填满右栏：原来 justify-self:end + 44ch 上限，右边缘贴齐了，
   左边缘却比内容区右栏（743）往右偏 124px，上下两行对不齐。
   出血区的 q-head 是单列，(0,3,0) 的 .q-bleed 规则会保住它的 52ch。 */
.q-head .q-lead { justify-self: start; max-width: none; }

/* ---------- 刊头 ---------- */
.q-hero {
  position: relative;
  /* ★ 首屏占满：整屏高度（svh 规避移动端地址栏收起/展开的跳动），
     内容纵向居中。padding 已含导航高度，border-box 下不会溢出。 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  /* ★ 出血：光晕与底色必须铺到视口两边。.q-hero 在 .q-in（1180 版心）里，
     背景只能铺到 1180 —— 1440 下左右各留 130px 白缝，远看像背景没画完。
     50% 取的是 .q-in 的一半（= 版心中心），减 50vw 正好把左边缘推到 0；
     padding-inline 同步补回版心距，正文仍与其余各节对齐（与 .q-bleed 同法）。 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: max(var(--q-pad), calc((100vw - var(--q-max)) / 2));
  /* 导航是 fixed 的 72px：内容纵向居中后会落到导航下方，但小屏内容撑高时
     顶部仍可能贴上导航，这里保留让位（原顶部那行元数据已下线）。 */
  padding-top: calc(var(--nav-height, 72px) + clamp(16px, 2.4vw, 32px));
  padding-bottom: clamp(40px, 5vw, 72px);
  overflow: hidden;
  /* 首屏光晕：与 index/hilly 同一手法（极淡品牌蓝，往下淡出到底色）。
     ★ 直接画进 background，不用伪元素 —— 伪元素一旦写出界（负 inset），
       即使被 overflow:hidden 裁掉、肉眼看不见，也会把 scrollWidth 撑大，
       之后任何「量横向溢出」的检查都会误报（上一轮在另一个站踩过）。 */
  /* ★ 第 53 轮：底色改成 hilly 首屏那层淡蓝紫（采样其顶部 ≈ rgb(210 222 253)），
     并向 78% 处淡回纸色。hilly 的 hero 是「通体一片淡蓝」，这里原来是白底 + 两团光斑，
     并排看就是两种天色。点阵（hilly 没有这个元素）同时去掉。 */
  background:
    radial-gradient(ellipse 46% 42% at 6% -8%, rgba(30, 94, 255, .10), transparent 72%),
    radial-gradient(ellipse 38% 36% at 98% 0%, rgba(143, 107, 255, .10), transparent 74%),
    linear-gradient(180deg, #dbe6ff 0%, #eef3ff 44%, var(--q-paper) 78%);
}

/* 顶部一行的元数据已下线，规则一并移除（刊头直接起头，页眉那道横线也去掉） */

/* 品牌口号：刊头之上的一句定位语，首屏的「读第一眼」。
   ★ 中文不加字距（letter-spacing 会把汉字拆成方块），只用一道短横线起头，
     与下面的大字形成「一行小字 → 一行巨字」的落差。 */
.q-slogan {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: var(--q-w-semi);
  line-height: 1.4;
  color: var(--q-accent);
}

.q-slogan-rule {
  display: block;
  width: clamp(24px, 3vw, 40px);
  height: 1px;
  background: currentColor;
  opacity: .55;
  flex: none;
}

.q-mast {
  margin: clamp(12px, 1.6vw, 20px) 0 0;
  font-size: var(--q-fs-mast);
    line-height: var(--q-lh-num);
  letter-spacing: var(--q-ls-display);
  font-weight: var(--q-w-heavy);
  color: var(--q-ink);
  white-space: nowrap;
}

.q-mast-word { display: inline-block; }

/* 刊头副标题。
   ★ 必须 display:block + 显式 font-size + white-space:normal 三件一起给：
     .q-mast 是 nowrap 的 210px 大字，副标题若留在同一行会被推到画布外、
     被 overflow-x:hidden 静默裁掉 —— 整句消失，而 sw 仍等于 cw，扫描查不出。 */
.q-mast-sub {
  display: block;
  margin-top: clamp(16px, 1.7vw, 24px);
  font-size: var(--q-fs-lg);
  font-weight: var(--q-w-medium);
    line-height: var(--q-lh-snug);
  letter-spacing: 0;
  white-space: normal;
  color: var(--q-ink-3);
}

/* 刊头下面：左「主张 / 说明 / 按钮」，右「产品实拍」。
   ★ 第 62 轮：右栏从三个数字的竖排规格表换成产品图 —— 首屏要能一眼看见
     「它长什么样」。数字改成整幅一行，压在首屏底部当规格带（见 .q-figures）。 */
.q-hero-grid {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 27vw, 400px);
  gap: clamp(28px, 3.4vw, 64px);
  align-items: end;
  margin: clamp(18px, 2.2vw, 32px) 0 0;
  position: relative;
  z-index: 1;
}

.q-hero-main { min-width: 0; }

/* 刊头与主张之间留一档：两者现在同属左栏，不再有 grid 的 margin-top 隔着 */
.q-hero-copy { margin-top: clamp(14px, 1.8vw, 24px); }

/* 产品图：透明底实拍，靠一层投影从浅蓝底上「浮」起来。
   ★ 不用伪元素做光斑：负 inset 的伪元素即使被 overflow:hidden 裁掉，
     也会把 scrollWidth 撑大（本站 53 轮踩过），投影一律交给 filter。 */
.q-hero-figure {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.q-hero-figure img {
  display: block;
  width: auto;
  height: clamp(240px, 44vh, 460px);
  filter: drop-shadow(0 26px 42px rgba(23, 45, 96, .22)) drop-shadow(0 4px 10px rgba(23, 45, 96, .10));
}

.q-hero-side { min-width: 0; }

/* 副文与按钮之间留一档，别贴着 */
.q-hero-side .q-acts { margin-top: var(--q-s6); }

.q-claim {
  margin: 0;
  max-width: 22ch;
  font-size: var(--q-fs-claim);
    line-height: var(--q-lh-claim);
  letter-spacing: var(--q-ls-heading);
  font-weight: var(--q-w-bold);
  color: var(--q-ink);
}

.q-claim em { font-style: normal; color: var(--q-accent); }

.q-sub {
  margin: var(--q-s4) 0 0;
  max-width: 40ch;
  font-size: var(--q-fs-lg);
  line-height: var(--q-lh-body);
  color: var(--q-ink-2);
}

.q-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--q-s3);
  margin-top: var(--q-s5);
}

.q-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--q-s2);
  height: 46px;
  padding: 0 var(--q-s5);
  border-radius: 999px;
  /* 次按钮 = 全站 .hilly-btn 的配方：浅色卡片底 + 发丝边框 + 墨色字。 */
  border: 1px solid rgba(15, 23, 42, .12);
  background-color: rgba(255, 255, 255, .88);
  color: var(--q-ink);
  /* ★ 第 53 轮：hilly 的 .hilly-btn 是 14.72px，这里是 16 —— 同一颗胶囊按钮
     在两页上字不一样大，站在导航下并排看就能看出来。 */
  font-size: 15px;
  font-weight: var(--q-w-semi);
    line-height: var(--q-lh-flat);
  transition: background-color var(--q-t), color var(--q-t), border-color var(--q-t),
              box-shadow var(--q-t), transform .28s var(--q-ease);
  will-change: transform;
}

/* ★ hover 只能改 background-color，不能写 background 简写 ——
   简写会把 .q-btn--solid 的 background-image 一起重置成 none，
   而主按钮的文字是白的，结果就是白字白底（实测对比度 1.01）。 */
.q-btn:hover {
  background-color: #f1f5f9;
  border-color: rgba(30, 94, 255, .4);
  box-shadow: var(--q-sh-glow);
}
.q-btn:focus-visible { outline: 2px solid var(--q-accent); outline-offset: 3px; }

/* 主按钮 = 全站 .hilly-btn-primary：蓝紫渐变胶囊 + 双层辉光 + hover 流光。
   ★ background-size:200% + position 左右切换，是这个站一贯的「流光」做法。 */
.q-btn--solid {
  color: #fff;
  border-color: transparent;
  background-color: transparent;
  background-image: var(--q-grad-btn);
  background-size: 200% auto;
  background-position: left center;
  box-shadow: 0 0 16px rgba(30, 94, 255, .45), 0 0 30px rgba(143, 107, 255, .28);
}

.q-btn--solid:hover {
  color: #fff;
  background-color: transparent;
  background-image: var(--q-grad-btn);
  border-color: transparent;
  background-position: right center;
  box-shadow: 0 0 22px rgba(30, 94, 255, .7), 0 0 38px rgba(143, 107, 255, .42);
  transform: translateY(-2px);
}

/* 三个数字：只在首屏出现一次，滚动时从 0 计到目标值 */
/* ★ 第 62 轮：从「右栏竖排三行」改回「整幅横排三格」。
   右栏让给了产品图，数字就压到首屏底部当一条规格带 —— 一条横线、三个数，
   与上面「左文 / 右图」的两栏正好收口，不再把首屏切成四段。 */
.q-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: clamp(22px, 2.8vw, 36px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--q-line);
  position: relative;
  z-index: 1;
}

.q-figure {
  display: block;
  padding: var(--q-s4) 0 0 var(--q-s5);
  border-left: 1px solid var(--q-line);
}

/* 第一格不画左边线：它已经贴着版心左缘，再画一条会跟顶部横线撞成「L」 */
.q-figure:first-child { border-left: 0; padding-left: 0; }

.q-figure > span {
  display: block;
  margin-top: 6px;
  font-size: var(--q-fs-meta);
  line-height: var(--q-lh-body);
  color: var(--q-ink-3);
}

.q-figure b {
  /* ★ 第 54 轮：数字与单位必须在同一行盒里。原来是 block + inline 的 small，
     「101 种」在 132px 的列里会折行，把「种」甩到下一行。 */
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: var(--q-fs-stat);
  font-weight: var(--q-w-black);
  letter-spacing: var(--q-ls-heading);
  font-variant-numeric: tabular-nums;
    line-height: var(--q-lh-flat);
  color: var(--q-ink);
}

.q-figure b small {
  font-size: .42em;
  font-weight: var(--q-w-medium);
  letter-spacing: 0;
  color: var(--q-ink-3);
  margin-left: 2px;
}

/* ★ 必须是子选择器：.q-figure span 会连 <b> 里的 <span data-count> 一起命中，
   把 34px 的墨色数字变成 12.5px 灰字、还 display:block 独占一行。
   症状是「8 和 m 各占一行、数字小得像脚注」，属性面板上看不出问题。 */
/* 首屏底部：一句压轴 + 滚动提示 */
.q-hero-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--q-s5);
  flex-wrap: wrap;
  margin-top: clamp(24px, 3vw, 40px);
  padding-top: var(--q-s4);
  border-top: 1px solid var(--q-line);
  font-size: var(--q-fs-meta);
    line-height: var(--q-lh-snug);
  color: var(--q-ink-3);
}

/* 演示台容器：只定宽与定位，内部沿用既有样式（组件层，本文件不碰） */
.q-demo { min-width: 0; position: relative; }

.q-demo .device-stage {
  height: auto !important;
  min-height: 0 !important;
  perspective: none;
  margin: 0;
}

.q-demo .record-demo { display: block; width: 100%; height: auto; }

.q-demo .flat-product-wrap {
  height: auto;
  display: block;
  margin: 0 0 var(--q-s4);
  text-align: center;
}

.q-demo .flat-product-shell { width: 150px; height: 260px; margin-inline: auto; }
.q-demo .flat-product { width: 100%; height: 100%; object-fit: contain; }
.q-demo .demo-panel { width: 100%; max-width: none; }

/* ---------- 六项基本功：六行，像规格表 ---------- */
.q-six {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--q-ink);
}

.q-six li {
  display: grid;
  grid-template-columns: 128px minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(16px, 2.2vw, 40px);
  align-items: start;
  padding: var(--q-s5) 0;
  border-bottom: 1px solid var(--q-line);
  transition: background var(--q-t);
}

/* 悬停用品牌蓝的 3.5%，比原来那块暖白更贴全站的冷调 */
.q-six li:hover { background: var(--q-accent-wash); }

/* 单字做成「字模」：大、细、贴左，成为每一行的视觉锚点 */
.q-six b {
  position: relative;
  padding-bottom: var(--q-s2);
  font-size: var(--q-fs-step);
    line-height: var(--q-lh-num);
  font-weight: var(--q-w-semi);
  letter-spacing: var(--q-ls-display);
  color: var(--q-ink);
}

.q-six b::after {
  content: "";
  position: absolute;
  left: 0;
  /* ★ 行高 .84 小于 1，字面会往上下各溢出约 5px，短线放 bottom:0 会压在
     「快 / 准 / 稳」的底横上，看着像描边断了。往下让 4px 才离开字面。 */
  bottom: -4px;
  width: 22px;
  height: 2px;
  background: var(--q-accent);
}

.q-six h3 {
  margin: var(--q-s1) 0 0;
  font-size: var(--q-fs-h3);
  font-weight: var(--q-w-bold);
  letter-spacing: var(--q-ls-heading);
    line-height: var(--q-lh-head);
  color: var(--q-ink);
}

.q-six h3 small {
  display: block;
  margin-top: var(--q-s2);
  font: var(--q-w-medium) var(--q-fs-micro)/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: var(--q-ls-mono);
  text-transform: uppercase;
  color: var(--q-ink-3);
}

.q-six p {
  margin: var(--q-s1) 0 0;
  font-size: var(--q-fs-body);
  line-height: var(--q-lh-body);
  color: var(--q-ink-2);
}

/* ---------- 痛点：原话当主角 ---------- */

.q-quotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--q-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--q-ink);
}

/* 两列排布：奇数落左、偶数落右，行高由内容撑开 —— 不用等高卡片 */
.q-quotes li {
  position: relative;
  padding: clamp(20px, 2.4vw, 28px) 0;
  border-bottom: 1px solid var(--q-line);
}

.q-quote-text {
  margin: 0;
  padding-left: var(--q-s6);
  text-indent: -30px; /* 让开头的引号悬挂在版心外 */
  font-size: var(--q-fs-quote);
  line-height: var(--q-lh-quote);
  letter-spacing: 0;
  color: var(--q-ink);
}

/* 开引号悬挂在版心外，闭引号补在句末 —— 只给「“」不给「”」，
   读起来像引号漏了一个（第一版用「」时踩过同一个坑）。 */
.q-quote-text::before {
  content: "“";
  font-size: 1.5em;
  line-height: 0;   /* 悬挂引号的技巧值：压掉行框，不属于刻度 */
  color: var(--q-accent);
  margin-right: var(--q-s1);
  vertical-align: -.12em;
}

.q-quote-text::after { content: "”"; color: var(--q-accent); margin-left: 2px; }

.q-quote-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--q-s1) var(--q-s3);
  margin: var(--q-s4) 0 0 var(--q-s6);
  font-size: var(--q-fs-meta);
    line-height: var(--q-lh-snug);
  color: var(--q-ink-3);
}

.q-quote-meta b { color: var(--q-warn); font-weight: var(--q-w-semi); }


/* 老办法对照：两栏，左列划掉，右列给出替换 */
.q-cmp {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--q-gap);
  margin-top: clamp(36px, 4.2vw, 56px);
}

/* 这两列的小标题在 HTML 里是 .q-label（不是 h3）。
   中文标签 11px 太小，单独提到 12.5 并压深一档，才担得起「列标题」。 */
.q-cmp .q-label {
  display: block;
  font-size: var(--q-fs-meta);
  font-weight: var(--q-w-semi);
  letter-spacing: var(--q-ls-cn);
  color: var(--q-ink-2);
}

.q-cmp ul { margin: var(--q-s4) 0 0; padding: 0; list-style: none; }

.q-cmp li {
  position: relative;
  /* 12 → 16：14px 的字上下只给 12px，三行读起来像挤在一张表里 */
  padding: var(--q-s4) 0 var(--q-s4) var(--q-s5);
  font-size: var(--q-fs-body);
  line-height: var(--q-lh-body);
  color: var(--q-ink-2);
  border-bottom: 1px solid var(--q-line-2);
}

.q-cmp li::before {
  position: absolute;
  left: 0;
  top: var(--q-s3);
  font-size: var(--q-fs-meta);
  font-weight: var(--q-w-bold);
}

.q-cmp .q-old li::before { content: "✕"; color: var(--q-ink-3); }
.q-cmp .q-new li::before { content: "→"; color: var(--q-accent); }

/* ★ 两列原来字色一模一样，读起来像「同一件事说了两遍」。
   各给一条 2px 顶杠：左中性灰（过去）、右品牌蓝（现在），
   右列正文再压到最深的 ink —— 「旧 / 新」的分量差一眼能看出来。 */
.q-cmp > div {
  padding-top: var(--q-s5);
  border-top: 2px solid transparent;
}

.q-cmp .q-old { border-top-color: var(--q-ink-4); }
.q-cmp .q-new { border-top-color: var(--q-accent); }

/* 左列整体灰一档（带内 --q-ink-3 已压到 #556377 = 5.58:1，够 AA），
   右列用最深的 ink —— 「旧方案被划掉、新方案是答案」不靠一个字说。 */
.q-cmp .q-old .q-label { color: var(--q-ink-3); }
.q-cmp .q-old li { color: var(--q-ink-3); }
.q-cmp .q-new .q-label { color: var(--q-accent); }
.q-cmp .q-new li { color: var(--q-ink); }

/* ---------- 硬件 ---------- */
.q-hw {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--q-gap);
  align-items: start;
}

/* 图与图注必须同宽：以前图片 max-width 440、图注那条线却铺满整栏，
   线比图长出 100 多像素，看着像「线画歪了」。 */
.q-hw-fig { margin: 0; max-width: 520px; }

.q-hw-fig img {
  display: block;
  width: 100%;
  height: auto;
}

.q-hw-fig figcaption {
  display: flex;
  justify-content: space-between;
  gap: var(--q-s3);
  flex-wrap: wrap;
  margin-top: var(--q-s4);
  padding-top: var(--q-s3);
  border-top: 1px solid var(--q-line);
  font-size: var(--q-fs-meta);
    line-height: var(--q-lh-snug);
  color: var(--q-ink-3);
}

.q-specs {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--q-ink);
}

.q-specs li {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: var(--q-s4);
  align-items: baseline;
  padding: var(--q-s3) 0;
  border-bottom: 1px solid var(--q-line);
}

.q-specs b {
  font-size: var(--q-fs-spec);
  font-weight: var(--q-w-semi);
  letter-spacing: var(--q-ls-heading);
    line-height: var(--q-lh-flat);
  color: var(--q-ink);
  font-variant-numeric: tabular-nums;
}

.q-specs b small {
  font-size: .42em;
  font-weight: var(--q-w-medium);
  letter-spacing: var(--q-ls-cn);
  color: var(--q-ink-3);
  margin-left: 3px;
}

/* 加号必须上标，否则贴着基线像减号 */
.q-specs b small.up,
.q-figure b small.up {
  font-size: .48em;
  vertical-align: super;
  margin-left: 1px;
}

.q-specs span {
  font-size: var(--q-fs-body);
  line-height: var(--q-lh-body);
  color: var(--q-ink-2);
}

.q-video { margin-top: clamp(32px, 3.8vw, 52px); }

.q-video-frame {
  border: 1px solid var(--q-line);
  border-radius: var(--q-radius);
  background: var(--q-ink-deep);
  overflow: hidden;
}

.q-video-frame video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.q-video-note {
  display: flex;
  justify-content: space-between;
  gap: var(--q-s3);
  flex-wrap: wrap;
  margin-top: var(--q-s3);
  font-size: var(--q-fs-meta);
    line-height: var(--q-lh-snug);
  color: var(--q-ink-3);
}

/* ---------- 三端联动 ---------- */
/* 三块「玻璃底」把设备缩略图与文字分层，但仍是一行读下去，
   不做成三张独立卡（那会读成「三个功能」而不是「一条链」）。 */
.q-link {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--q-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.q-link > li { position: relative; min-width: 0; }

/* 列间箭头落在外层留白里（左移半个 gap），不占内容宽度。
   184 / 2 = 92 是设备块的垂直中线，减半个行高让它正对圆心。 */
.q-link > li + li::before {
  content: "→";
  position: absolute;
  left: calc(var(--q-gap) * -.5);
  top: 88px;
  width: var(--q-gap);
  text-align: center;
  font-size: var(--q-fs-body);
  line-height: 20px;
  color: var(--q-accent);
  opacity: .38;
  pointer-events: none;
}

/* 设备底：径向淡蓝压在下缘，和首屏光晕同一手法（画进 background，不产生盒子） */
.q-dev {
  position: relative;
  display: grid;
  place-items: center;
  height: 196px;
  margin-bottom: clamp(18px, 2vw, 26px);
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: var(--q-radius);
  background:
    radial-gradient(ellipse 70% 70% at 50% 118%, rgba(30, 94, 255, .1), transparent 72%),
    linear-gradient(180deg, #fff, #f6f8fd);
  box-shadow: var(--q-sh-card);
  overflow: hidden;
}

/* 01 机身：银白卡片的「录制中」态 */
.q-mock-card {
  display: grid;
  justify-items: center;
  align-content: space-between;
  width: 106px;
  height: 148px;
  padding: 13px 10px;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 15px;
  background: linear-gradient(158deg, #ffffff 0%, #eef1f6 60%, #e3e8f1 100%);
  box-shadow: 0 12px 24px -12px rgba(15, 23, 42, .32), inset 0 1px 0 #fff;
}

.q-mock-rec {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: var(--q-w-semi) 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  color: #b42318;
}

.q-mock-rec i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .16);
}

/* 录音中的电平条：把卡片中段的空档填掉，也交代「它正在工作」 */
.q-mock-eq {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 20px;
}

.q-mock-eq i {
  width: 3px;
  border-radius: 2px;
  background: var(--q-accent);
  opacity: .5;
}

.q-mock-eq i:nth-child(1) { height: 6px; }
.q-mock-eq i:nth-child(2) { height: 11px; }
.q-mock-eq i:nth-child(3) { height: 17px; }
.q-mock-eq i:nth-child(4) { height: 9px; }
.q-mock-eq i:nth-child(5) { height: 20px; }
.q-mock-eq i:nth-child(6) { height: 13px; }
.q-mock-eq i:nth-child(7) { height: 18px; }
.q-mock-eq i:nth-child(8) { height: 8px; }
.q-mock-eq i:nth-child(9) { height: 14px; }

.q-mock-card b {
  font-size: 21px;
  font-weight: var(--q-w-semi);
  letter-spacing: 0;
  color: var(--q-ink);
  font-variant-numeric: tabular-nums;
}

.q-mock-card small {
  font: var(--q-w-medium) 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
  /* ★ 底是银灰（#e9edf4），ink-3 只有 4.05:1 —— 这行是「5 MIC · 8 m」，
     算真信息不算装饰，压深一档到 ink-2（8.8:1）。 */
  color: var(--q-ink-2);
}

/* 02 App：一屏两段对话 + 一张已生成的纪要，对应「录完就有稿」 */
.q-mock-phone {
  display: grid;
  align-content: start;
  gap: 6px;
  width: 158px;
  height: 178px;
  padding: 9px;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 26px -14px rgba(15, 23, 42, .34);
  overflow: hidden;
}

.q-mock-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  line-height: 1.4;
  color: var(--q-ink-3);
}

.q-mock-top span { font-weight: var(--q-w-semi); color: var(--q-ink); }
.q-mock-top i { font-style: normal; color: var(--q-accent); }

.q-mock-line {
  margin: 0;
  padding: 4px 7px;
  border-radius: 8px;
  background: var(--q-band);
  font-size: 11px;
  line-height: 1.4;
  color: var(--q-ink-2);
}

.q-mock-line b { margin-right: 4px; font-weight: var(--q-w-semi); color: var(--q-ink); }

.q-mock-sum {
  padding: 6px 8px;
  border: 1px solid rgba(30, 94, 255, .18);
  border-radius: 9px;
  background: rgba(30, 94, 255, .05);
}

.q-mock-sum > span {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  line-height: 1.4;
  font-weight: var(--q-w-semi);
  color: var(--q-accent);
}

.q-mock-sum ul { margin: 0; padding: 0; list-style: none; }

.q-mock-sum li {
  position: relative;
  padding-left: 11px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--q-ink-2);
}

.q-mock-sum li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--q-accent);
  opacity: .55;
}

/* 03 PC 端：一个搜索框 + 三条历史，对应「一句话找回来」 */
.q-mock-win {
  width: 100%;
  max-width: 250px;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 12px 26px -14px rgba(15, 23, 42, .3);
  overflow: hidden;
}

.q-mock-winbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 8px;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  background: var(--q-white);
}

.q-mock-winbar i { width: 5px; height: 5px; border-radius: 50%; background: #cbd5e1; }

.q-mock-winbar span {
  flex: 1;
  margin-left: 5px;
  padding: 2px 7px;
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 999px;
  background: #fff;
  font-size: 10px;
  line-height: 1.4;
  color: var(--q-ink-3);
}

.q-mock-win ul { margin: 0; padding: 3px 9px 7px; list-style: none; }

.q-mock-win li {
  display: grid;
  gap: 1px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(15, 23, 42, .05);
}

.q-mock-win li:last-child { border-bottom: 0; }
.q-mock-win b { font-size: 10.5px; line-height: 1.4; font-weight: var(--q-w-semi); color: var(--q-ink); }
.q-mock-win li span { font-size: 10px; line-height: 1.4; color: var(--q-ink-3); }

/* 三步之下的「协同事实」：一行三格，回答「凭什么说它联动」 */
.q-sync {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--q-gap);
  margin: clamp(28px, 3.2vw, 44px) 0 0;
  padding: clamp(22px, 2.4vw, 28px) 0 0;
  list-style: none;
  border-top: 1px solid var(--q-line);
}

.q-sync b {
  display: block;
  margin-bottom: var(--q-s2);
  font-size: var(--q-fs-body);
  font-weight: var(--q-w-semi);
  color: var(--q-ink);
}

.q-sync span { font-size: var(--q-fs-meta); line-height: var(--q-lh-body); color: var(--q-ink-3); }

/* 文案层：step 用中文，不能带大字距（会变成「硬 件」） */
.q-link .q-link-step {
  margin: 0 0 var(--q-s2);
  font-size: var(--q-fs-micro);
  font-weight: var(--q-w-semi);
  letter-spacing: var(--q-ls-cn);
  color: var(--q-accent);
}

.q-link h3 {
  margin: 0 0 var(--q-s2);
  font-size: var(--q-fs-h3);
  font-weight: var(--q-w-bold);
  letter-spacing: var(--q-ls-heading);
  line-height: var(--q-lh-head);
  color: var(--q-ink);
}

.q-link-text { min-width: 0; }

.q-link p {
  margin: 0;
  font-size: var(--q-fs-body);
  line-height: var(--q-lh-body);
  color: var(--q-ink-2);
}

/* ---------- 模板 ---------- */
.q-tpl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--q-gap);
  align-items: start;
}

.q-50 { margin: 0; }

/* ★ 同一节里上下两行的网格必须共用同一条栏线：标题区的右栏从 874 起，
   内容区原本从 621 起（1fr/1.55fr），标签云比正文段落往左探出 253px，
   看着像两套网格叠在一起。这里让模板节的左右比例与 .q-head 一致。 */

/* 左栏会因此变宽，说明文字限宽：一行 30ch 上下，读起来不费劲 */
#templates .q-50 > span { max-width: 24em; }

/* 50+ / 186 这类展示数字统一：紧、等宽数字。
   ★ 第 45 轮把字重从 300 提到 800。index 的字重分布里只有 400/500/600/700/800/900，
     没有细体；同一站里一半的大字是 900 一半是 300，是最直接的「不像一套」。 */
.q-50 b,
.q-proof-big {
  display: block;
  /* ★ 第 52 轮：左栏不再垫底色，靠字号自己撑。比 --q-fs-num(92) 大一档，
     与右侧五行列表的「重量」对得上；50+ 那处仍用原令牌。 */
  font-size: clamp(72px, 9vw, 132px);
  line-height: var(--q-lh-num);
  font-weight: var(--q-w-black);
  letter-spacing: var(--q-ls-display);
  color: var(--q-ink);
  font-variant-numeric: tabular-nums;
}

/* ★ 第 52 轮：这里原来垫了一团 radial 柔光，但光斑中心偏左上（26% / 46%）、
   半径又大于盒子，左边界与上边界处的不透明度还有 0.05~0.085 —— 于是被盒子
   边界切出一条硬竖线和一条硬横线，远看就是「给数字垫了一块底色」。
   删掉。186 本身是蓝紫渐变字，已经够重；左栏的留白与其余各节一致。 */

.q-50 b small {
  font-size: .34em;
  font-weight: var(--q-w-medium);
  letter-spacing: 0;
  color: var(--q-accent);
  /* 加号贴基线时看着像脚注；抬到数字中段才读得出「50 加」 */
  vertical-align: .46em;
  vertical-align: super;
  margin-left: var(--q-s1);
}

/* ★ 必须是子选择器：这段说明是 .q-50 的直接子元素。
   写成后代选择器会把 <b> 里新加的计数 span（data-count）一起命中 ——
   那个 span 会被改成 display:block + 14px + 一条上边线，
   于是「50」变成一小坨字、「+」被挤到下一行（第 44 轮同一个坑）。 */
.q-50 > span {
  display: block;
  max-width: 30ch;
  margin-top: var(--q-s4);
  padding-top: var(--q-s3);
  border-top: 1px solid var(--q-line);
  font-size: var(--q-fs-body);
  line-height: var(--q-lh-body);
  color: var(--q-ink-2);
}

.q-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--q-s2);
  margin: 0 0 clamp(24px, 3vw, 32px);
  padding: 0;
  list-style: none;
}

.q-tags li {
  padding: 5px var(--q-s3);
  border: 1px solid var(--q-line);
  border-radius: 999px;   /* 全站胶囊一律全圆角 */
  background: var(--q-white);
  font-size: var(--q-fs-meta);
  line-height: var(--q-lh-snug);
  color: var(--q-ink-2);
}

.q-roles {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--q-ink);
}

.q-roles li {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: var(--q-s4);
  align-items: baseline;
  padding: var(--q-s3) 0;
  border-bottom: 1px solid var(--q-line);
}

.q-roles b { font-size: var(--q-fs-body); font-weight: var(--q-w-semi); color: var(--q-accent); }
.q-roles span { font-size: var(--q-fs-body); line-height: var(--q-lh-body); color: var(--q-ink-2); }

/* 大数字：186 条资产，单独立在右侧当证据 */
.q-proof {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--q-gap);
  /* 数字放大之后垂直居中会让它与右列第一行错开半行 → 顶部对齐 */
  align-items: start;
  margin-top: clamp(32px, 3.8vw, 52px);
  padding-top: clamp(28px, 3.2vw, 40px);
  border-top: 1px solid var(--q-line);
}

.q-proof-note {
  max-width: 30ch;
  word-break: auto-phrase;
  margin: var(--q-s5) 0 0;
  font-size: var(--q-fs-meta);
  font-weight: var(--q-w-normal);
  line-height: var(--q-lh-body);
  letter-spacing: 0;
  color: var(--q-ink-3);
}

.q-proof-big small {
  display: block;
  margin-top: var(--q-s3);
  font: var(--q-w-medium) var(--q-fs-micro)/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: var(--q-ls-mono);
  text-transform: uppercase;
  color: var(--q-ink-3);
}

.q-out { margin: 0; padding: 0; list-style: none; }

.q-out li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--q-s3);
  align-items: baseline;
  padding: var(--q-s3) 0;
  border-bottom: 1px solid var(--q-line);
}

.q-out b { font-size: var(--q-fs-body); font-weight: var(--q-w-semi); color: var(--q-ink); }
.q-out span { font-size: var(--q-fs-body); line-height: var(--q-lh-body); color: var(--q-ink-2); }

/* ---------- 矩阵：整幅 ---------- */
/* ---------- 三个场景 ---------- */
/* 原来是一张十行的「人群 × 场景 × 产出」清单 —— 那是把资料照搬成表格，
   十类人谁也记不住。改成三张卡，每个场景从头走一遍：情境 → 三端 → 产出。
   卡压灰底上，是这一节唯一的实体块，也是唯一需要「按顺序读」的内容。 */
.q-case {
  display: grid;
  gap: var(--q-s6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.q-case > li {
  position: relative;
  padding: clamp(22px, 2.2vw, 32px);
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: var(--q-radius);
  background: var(--q-white);
  box-shadow: var(--q-sh-card);
}

.q-case-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--q-s3);
  margin-bottom: var(--q-s4);
}

.q-case-no {
  font: var(--q-w-semi) var(--q-fs-micro)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: var(--q-ls-mono);
  color: var(--q-accent);
}

.q-case-head h3 {
  margin: 0;
  font-size: var(--q-fs-h3);
  font-weight: var(--q-w-bold);
  letter-spacing: var(--q-ls-heading);
  line-height: var(--q-lh-head);
  color: var(--q-ink);
}

/* 人群标签靠右：手机上它会掉到下一行，所以用 margin-left:auto 而不是绝对定位 */
.q-case-who {
  margin-left: auto;
  font-size: var(--q-fs-meta);
  color: var(--q-ink-3);
}

/* 情境用比正文大一档的字：这一段是「画面」，不是参数 */
.q-case-scene {
  max-width: 72ch;
  margin: 0 0 var(--q-s5);
  font-size: var(--q-fs-lg);
  line-height: var(--q-lh-body);
  color: var(--q-ink-2);
}

.q-case-chain {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--q-gap);
  margin: 0;
  padding: var(--q-s4) 0 0;
  list-style: none;
  border-top: 1px solid var(--q-line-2);
}

.q-case-chain b {
  display: block;
  margin-bottom: var(--q-s2);
  font: var(--q-w-semi) var(--q-fs-micro)/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  /* ★ 这里混排中英（机身 / APP / PC）：.14em 的字距会把中文拆成「机 身」 */
  letter-spacing: var(--q-ls-cn);
  color: var(--q-ink-3);
}

.q-case-chain span { font-size: var(--q-fs-body); line-height: var(--q-lh-body); color: var(--q-ink-2); }

/* 产出：整张卡的落点，用一条线和一句加粗的「你手上多出来的」收住 */
.q-case-out {
  margin: var(--q-s5) 0 0;
  padding-top: var(--q-s4);
  border-top: 1px solid var(--q-line-2);
  font-size: var(--q-fs-body);
  line-height: var(--q-lh-body);
  color: var(--q-ink);
}

.q-case-out b {
  margin-right: var(--q-s2);
  font-weight: var(--q-w-semi);
  color: var(--q-accent);
}

/* ---------- FAQ ---------- */
.q-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--q-gap);
  align-items: start;
}

.q-faq details { border-bottom: 1px solid var(--q-line); }
.q-faq details:first-child { border-top: 1px solid var(--q-ink); }

.q-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--q-s4);
  padding: var(--q-s4) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--q-fs-lg);
  font-weight: var(--q-w-semi);
    line-height: var(--q-lh-snug);
  color: var(--q-ink);
  transition: color var(--q-t);
}

.q-faq summary::-webkit-details-marker { display: none; }
.q-faq summary:hover { color: var(--q-accent); }

.q-faq summary::after {
  content: "+";
  flex: none;
  font: var(--q-w-normal) 18px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--q-ink-3);
}

.q-faq details[open] summary { color: var(--q-accent); }
.q-faq details[open] summary::after { content: "−"; color: var(--q-accent); }

/* 帮助中心承接句（FAQ 节尾）：正文灰 + 品牌蓝链接；
   链接用 #1a52e0——#1e5eff 在 #f4f7fe 底上只有 4.44:1，不够 AA */
.q-faq-more {
  margin-top: var(--q-s5);
  font-size: var(--q-fs-body);
  line-height: var(--q-lh-body);
  color: var(--q-ink-2);
}
.q-faq-more a {
  color: #1a52e0;
  font-weight: var(--q-w-semi);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.q-faq-more a:hover { color: #1746c4; }

.q-faq p {
  margin: 0 0 var(--q-s4);
  padding-right: var(--q-s5);
  font-size: var(--q-fs-body);
  line-height: var(--q-lh-body);
  color: var(--q-ink-2);
}

/* ---------- CTA ---------- */
.q-cta {
  padding-block: clamp(72px, 8vw, 128px);
  border-top: 1px solid var(--q-ink);
  text-align: center;
}

.q-cta h2 {
  /* ★ 原来是 18ch。ch 是「半个汉字」宽，18ch 只有 9 个汉字的位置，
     而这句是 21 个字 → 被折成三行、末行只剩「作。」。改 26ch ≈ 13 字。 */
  max-width: 26ch;
  margin: 0 auto var(--q-s5);
  font-size: var(--q-fs-cta);
  line-height: var(--q-lh-tight);
  letter-spacing: var(--q-ls-heading);
  font-weight: var(--q-w-black);
  word-break: auto-phrase;
  text-wrap: balance;
}

.q-cta h2 em { font-style: normal; color: var(--q-accent); }

.q-cta p {
  max-width: 46ch;
  margin: 0 auto var(--q-s6);
  font-size: var(--q-fs-lg);
  line-height: var(--q-lh-body);
  color: var(--q-ink-2);
}

.q-cta .q-acts { justify-content: center; }


/* ==========================================================================
   光效层（第 49 轮）
   站是纯静态、没有 React，所以按 React Bits 的**动效规格**用原生重写：
     ① Aurora        首屏极光（三层径向渐变 + 位移缩放）
     ② Spotlight     卡片指针光斑（--sx / --sy）
     ③ Glare         主按钮扫光
   ★ 三条约束与 quez-motion.js 一致：
     1. 只用 transform / opacity 驱动，不动 background-position（每帧重绘）；
     2. 不新增任何盒子 —— 光斑走伪元素、极光走伪元素，父级都已有 overflow:hidden；
     3. prefers-reduced-motion 下所有 keyframes 直接关掉，静态版一样好看。
   ========================================================================== */

/* ---------- ① 极光：真实元素 + 只动 transform ---------- */
/* ★ 第 59 轮整块重写。前两版都是「伪元素 + 多层 background 简写 + 只有 transform 在动」，
   在 Safari 里整块不生效（同一浏览器上 hilly 能动、这一页不动），排查成本已经超过重写。
   这一版只保留三条最稳的规则：

     1. 光斑是**真实 div**，不是伪元素 —— 绕开「伪元素 + z-index + 父级 overflow」的层叠歧义；
     2. 每个光斑**只有一层背景**：radial-gradient(closest-side, 色, 透明) + border-radius:50%，
        没有多层 background 简写，也就没有 Safari 的解析分歧；
     3. 动画**只动 transform / opacity** —— 唯二能保证走合成层的属性。
        不用 background-position（Safari 对它的动画支持一直不完整）。

   位置用 left/top/width/height 显式写，不用 inset 简写；位移换算成百分比后
   每秒约 12~16px，是「缓慢流动」而不是延时摄影。 */
.q-aurora {
  position: absolute;
  top: -14%;
  right: -14%;
  bottom: -14%;
  left: -14%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.q-aurora-blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}

.q-aurora-blob--blue {
  left: 0;
  top: -12%;
  width: 64%;
  height: 78%;
  background: radial-gradient(closest-side, rgba(30, 94, 255, .30), rgba(30, 94, 255, 0));
  animation: q-blob-1 11s ease-in-out infinite alternate;
}

.q-aurora-blob--violet {
  left: 50%;
  top: -16%;
  width: 60%;
  height: 70%;
  background: radial-gradient(closest-side, rgba(143, 107, 255, .34), rgba(143, 107, 255, 0));
  animation: q-blob-2 13s ease-in-out infinite alternate;
}

.q-aurora-blob--cyan {
  left: 22%;
  top: 44%;
  width: 68%;
  height: 74%;
  background: radial-gradient(closest-side, rgba(0, 168, 255, .22), rgba(0, 168, 255, 0));
  animation: q-blob-3 15s ease-in-out infinite alternate;
}

/* 一道白光横穿：有明确边界的移动元素比纯光斑的位移更容易被看见（它只提亮、不压字） */
.q-aurora-sheen {
  position: absolute;
  top: 0;
  left: 0;
  width: 46%;
  height: 100%;
  background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, .6) 50%, transparent 75%);
  animation: q-sheen-move 9s ease-in-out infinite;
  will-change: transform;
}

@keyframes q-blob-1 {
  from { transform: translate3d(-8%, -5%, 0) scale(1); }
  to   { transform: translate3d(10%, 7%, 0) scale(1.14); }
}

@keyframes q-blob-2 {
  from { transform: translate3d(6%, 6%, 0) scale(1.08); }
  to   { transform: translate3d(-9%, -6%, 0) scale(.94); }
}

@keyframes q-blob-3 {
  from { transform: translate3d(7%, -4%, 0) scale(1); }
  to   { transform: translate3d(-8%, 8%, 0) scale(1.12); }
}

@keyframes q-sheen-move {
  0%, 10%   { transform: translate3d(-70%, 0, 0) skewX(-6deg); }
  70%, 100% { transform: translate3d(280%, 0, 0) skewX(-6deg); }
}

/* 刊头里的文字必须压在极光之上 */
.q-hero > :not(.q-aurora) { position: relative; z-index: 1; }

/* ★ 极光最浓处能到 rgb(195 213 255)：11–16px 的 ink-3 在那里只剩 3.6。
   刊头里的三处灰字统一压到 ink-2（6.0 以上）。
   —— 这条在第 53 轮重写极光时被整段替换掉了，务必别再删。 */
.q-hero .q-label,
.q-mast-sub { color: var(--q-ink-2); }

/* ---------- ② 指针光斑 ---------- */
/* React Bits · SpotlightCard。--sx / --sy 由 quez-motion.js 写入；
   没有 JS（或触屏）时停在 50% / 50%，就是一张「中心有一点柔光」的卡。 */
@media (hover: hover) {
  .q-case > li::after,
  .q-dev::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%),
      rgba(30, 94, 255, .13), transparent 72%);
    opacity: 0;
    transition: opacity .4s var(--q-ease);
  }

  .q-case > li:hover::after,
  .q-dev:hover::after { opacity: 1; }

  /* 卡内文字要压在光斑上 */
  .q-case > li > *,
  .q-dev > * { position: relative; z-index: 1; }
}

/* ---------- ③ 主按钮扫光 ---------- */
/* 实心按钮（渐变底）在 hover 时有一道斜光扫过。overflow 只裁光带，
   box-shadow 的辉光在元素外，不受影响。 */
.q-btn--solid {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.q-btn--solid::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-16deg) translateX(-160%);
  transition: transform .7s var(--q-ease);
  pointer-events: none;
}

.q-btn--solid:hover::after { transform: skewX(-16deg) translateX(560%); }

@media (prefers-reduced-motion: reduce) {
  /* ★ 第 58 轮：原来是 animation: none —— 只要系统开了「减少动态效果」，
     整个首屏就是一张静止图，用户会以为「没有做动效」。
     改成降到 60% 速度（18s / 24s 单程）：极光是几十秒级的平滑漂移，
     既无闪烁也不是交互触发，这个速度对光敏感用户是安全的。 */
  .q-aurora-blob { animation-duration: 18s; }
  .q-aurora-sheen { animation-duration: 15s; }
  .q-btn--solid::after { display: none; }
}


/* ---------- ④ 大数字：渐变字 ---------- */
/* ← React Bits · Gradient Text。只给两个「计数型」大字（50+ / 186），
   不碰标题 —— 渐变标题在中文长句上会断成一格一格。
   ★ 必须 @supports 兜底：background-clip:text 不被支持时立刻放弃透明色，
     否则会得到两个看不见的数字（比渐变好看重要）。 */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .q-50 b > span,
  .q-proof-big > span {
    display: inline-block;
    /* ★ 第 53 轮：改成 styles.css 的 --brand-text-grad（120deg 12/55/100），
       原来 96deg 的坡更平，和 hilly 的渐变字不是同一条 */
    background-image: linear-gradient(120deg, #1e5eff 12%, #5a4df0 55%, #8f6bff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* ---------- ⑤ 场景卡悬停 ---------- */
/* 与 .q-caps 用同一套「白卡浮起」语言：位移 2px、阴影加深、边框透一点蓝。 */
.q-case > li {
  transition: transform .3s var(--q-ease), box-shadow .3s var(--q-ease),
              border-color .3s var(--q-ease);
}

@media (hover: hover) {
  .q-case > li:hover {
    transform: translateY(-3px);
    border-color: rgba(30, 94, 255, .22);
    box-shadow: var(--q-sh-card-hover);
  }
}

/* ---------- ⑥ 资产清单悬停 ---------- */
/* 五行是「一类资产」，不是链接，所以只让左侧标签透蓝 + 整行底色极淡。 */
.q-out li { transition: background-color .25s var(--q-ease); }
.q-out li > b { transition: color .25s var(--q-ease); }

@media (hover: hover) {
  .q-out li:hover { background-color: rgba(30, 94, 255, .035); }
  .q-out li:hover > b { color: var(--q-accent); }
}


/* ---------- ⑦ 演示台玻璃化 ---------- */
/* 首屏右侧那块白面板原来是不透明白（quez-light.css 里的 0.99），压在极光上
   就是一堵墙。改成半透白 + 背景模糊：能看见后面那团光在动，面板本身也更轻。
   ★ 用 html[data-theme="light"] 前缀：(0,2,1) 压过 quez-light.css 里的同名规则
     —— 那一片选择器都带前缀，不比它多一层就赢不了，失败还是静默的。 */
html[data-theme="light"] .demo-panel {
  background: linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .72));
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  border-color: rgba(15, 23, 42, .10);
  box-shadow: 0 28px 70px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
}


/* ---------- 锚点让位 ---------- */
/* 导航是 position:fixed 的 72px。旧样式只给 #hardware / #workflow / #assets
   三四个 id 写了 scroll-margin-top，其余锚点（场景模板、目标用户、常见问题）
   点过去会顶到视口 0，标题被导航压住。
   统一在这里给所有 section 让位；首屏 .q-hero#top 例外 —— 它自己有
   padding-top 已经让开导航，再让 88px 会多滚一屏。 */
main section[id] { scroll-margin-top: calc(var(--nav-height, 72px) + 16px); }
main .q-hero[id] { scroll-margin-top: 0; }


/* ---------- 04 录音演示（独立成节） ---------- */
/* 首屏右栏时：机身 150×260、面板只有 ~660 宽，逐字稿每行都在挤。
   独立成节后机身 196×340、面板 ~820，读起来才像一块真的界面。
   ★ .record-demo 在组件层是 display:block，这里改 grid 两列；
     .device-stage 在 quez.css 里被写死了 height !important，
     靠上面 .q-demo .device-stage 的 height:auto !important 压着，别动那条。 */
#demo .q-demo { margin: 0; }

#demo .q-demo .record-demo {
  display: grid;
  grid-template-columns: minmax(0, 264px) minmax(0, 1fr);
  gap: var(--q-gap);
  align-items: start;
}

#demo .q-demo .flat-product-wrap { margin: 0; }

#demo .q-demo .flat-product-shell { width: 220px; height: 381px; }

/* 说明文字在组件层被 .button-caption{display:none!important} 全局关掉了
   （那时它是绝对定位压在机身上的）。独立成节后机身旁边有大片空白，
   把它放回机身下方正好是「点这里」的引导，所以用 !important 拉回来。 */
#demo .q-demo .button-caption {
  display: block !important;
  position: static;
  width: auto;
  margin-top: var(--q-s5);
  font-size: var(--q-fs-meta);
  letter-spacing: var(--q-ls-cn);
  line-height: var(--q-lh-body);
  /* ★ 第 53 轮：light 层把它写成 #64748b，在 #f4f7fe 上只有 4.44（差一点） */
  color: var(--q-ink-3);
}


/* ---------- 页脚：字号对齐 hilly 的 footer ---------- */
/* hilly 的 .footer-col-title 是 16px / 700 / 墨色，链接 14px；
   quez 这套是深色主题时代留下的 11px 灰标题（还带 .18em 字距）+ 13px 链接。
   两页并排看，页脚像两个站。颜色 light 层已经改过，这里只补字号与字重。
   ★ .18em 的字距在 11px 时只有 2px 不显眼，放到 16px 会把「产 品」拆开，必须归零。 */
html[data-theme="light"] .qz-foot-title {
  font-size: 16px;
  font-weight: var(--q-w-bold);
  letter-spacing: 0;
  color: var(--q-ink);
}

html[data-theme="light"] .qz-foot-brand p { font-size: 13.5px; line-height: 1.75; }

html[data-theme="light"] .qz-foot-col a { font-size: 14px; }

html[data-theme="light"] .qz-foot-mail { font-size: 13.5px; }

html[data-theme="light"] .qz-foot-legal { font-size: 13.5px; }

html[data-theme="light"] .qz-foot-bottom { font-size: 13px; }

/* ---------- 响应式 ---------- */
/* ★ 矮屏（1366×768 / 1280×800 这类笔记本）先压缩纵向节奏。
   首屏现在是整屏高、且加了产品图，768 高的机器上按常规节奏会溢出 140px，
   规格带被挤到折线以下 —— 那就不叫「占满」了。这里只收间距和字号，
   不动栏宽，所以在这些尺寸上版式骨架与 1440 完全一致。 */
@media (min-width: 861px) and (max-height: 800px) {
  .q-hero {
    padding-top: calc(var(--nav-height, 72px) + 10px);
    padding-bottom: 24px;
  }
  :root { --q-fs-mast: clamp(52px, 5.4vw, 84px); }
  .q-mast { margin-top: 8px; }
  .q-hero-copy { margin-top: 10px; }
  :root { --q-fs-claim: clamp(26px, 3vw, 40px); }
  .q-sub { margin-top: 10px; }
  .q-acts { margin-top: 14px; }
  .q-hero-grid { margin-top: 12px; }
  .q-figures { margin-top: 18px; }
  .q-hero-figure img { height: clamp(200px, 38vh, 340px); }
}

@media (max-width: 1080px) {
  .q-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  /* 单列时重新给回行宽上限：768 下整栏 716px，一行排到 44 个汉字太长。 */
  .q-head .q-lead { justify-self: start; max-width: 44ch; }
  .q-six li { grid-template-columns: 92px minmax(0, 1fr); }
  .q-six p { grid-column: 2; margin-top: var(--q-s3); }
  .q-tpl { grid-template-columns: minmax(0, 1fr); }
  /* 断点只重定义令牌，不改选择器：刻度始终只有一处权威定义。 */
  :root { --q-fs-ghost: clamp(64px, 10vw, 96px); }
}

@media (max-width: 860px) {
  /* 首屏单列：文案在上、产品图在下、规格带压底。
     竖屏时产品图按屏宽缩放，避免固定 px 在窄屏上过小、宽屏上过高。 */
  .q-hero-grid { grid-template-columns: minmax(0, 1fr); }

  .q-hero-figure { margin-top: var(--q-s5); }

  .q-hero-figure img { height: clamp(200px, 42vw, 300px); }

  .q-figure { padding-left: var(--q-s3); }

  .q-figure > span {
    /* 窄屏三列只有 116 宽，「语言互译 · 双语字幕」会剩一个「幕」在第二行 */
    text-wrap: balance;
  }
  .q-hw { grid-template-columns: minmax(0, 1fr); }
  .q-quotes { grid-template-columns: minmax(0, 1fr); }
  .q-proof { grid-template-columns: minmax(0, 1fr); }
  .q-faq { grid-template-columns: minmax(0, 1fr); }
  .q-faq-col + .q-faq-col details:first-child { border-top: 0; }
  /* 演示台：两列在 860 以下会把面板压到 400 出头，逐字稿换行太碎 */
  #demo .q-demo .record-demo { grid-template-columns: minmax(0, 1fr); }
  #demo .q-demo .flat-product-shell { width: 168px; height: 291px; }
  .q-link { grid-template-columns: minmax(0, 1fr); }
  .q-link > li + li::before { display: none; }
  /* 单列时不竖排：设备块占满整宽会把每一段拉到一屏高，
     整节从 900px 涨到 2100px。改成「设备左 / 文案右」，每段只剩 180px。 */
  .q-link > li {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    column-gap: var(--q-s5);
    align-items: center;
    padding-top: var(--q-s5);
    border-top: 1px solid var(--q-line);
  }
  .q-link > li:first-child { padding-top: 0; border-top: 0; }
  .q-dev { height: 184px; margin-bottom: 0; }
}

@media (max-width: 620px) {
  /* 刊头基准改了（210 → 128 → 96），这条断点也必须跟着改：
     原值是给 210px 版的 620 下用的，留在 120 会让手机上的刊头
     和桌面几乎一样大。 */
  :root { --q-fs-mast: clamp(44px, 11.5vw, 72px); }
  .q-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .q-figure { padding-left: var(--q-s3); }
  .q-six li { grid-template-columns: 60px minmax(0, 1fr); gap: var(--q-s3); }
  :root { --q-fs-step: 40px; }   /* 60px 的列宽里 44px 会顶到边 */
  .q-cmp { grid-template-columns: minmax(0, 1fr); }
  /* 单列后两组上下排：2px 彩杠会把这一节的横线从 2 条变成 4 条，
     还给两组各留一道「新标题」的错觉。改成一组无杠、第二组用发丝线隔开。 */
  .q-cmp > div { border-top: 0; padding-top: 0; }
  .q-cmp > div + div {
    margin-top: var(--q-s5);
    padding-top: var(--q-s5);
    border-top: 1px solid var(--q-line);
  }
  .q-specs li { grid-template-columns: 96px minmax(0, 1fr); gap: var(--q-s3); }
  :root { --q-fs-spec: 22px; }
  .q-out li { grid-template-columns: 80px minmax(0, 1fr); gap: var(--q-s2); }
  .q-sync { grid-template-columns: minmax(0, 1fr); gap: var(--q-s4); }
  /* 390 下 232px 的设备栏会只剩 118px 放文案 → 退回上下排 */
  .q-link > li { grid-template-columns: minmax(0, 1fr); row-gap: var(--q-s4); }
  .q-dev { height: 184px; }

  /* 场景卡：三端在窄屏竖排，横排每列只剩 8 个字宽 */
  .q-case-chain { grid-template-columns: minmax(0, 1fr); gap: var(--q-s3); }
  /* 卡头一行塞「01 + 客户拜访 + 销售/BD/保险顾问」会挤成一团 → 人群换下一行 */
  .q-case-head { row-gap: var(--q-s1); }
  .q-case-who { flex-basis: 100%; margin-left: 0; }

  .q-quote-text { padding-left: var(--q-s5); }
  .q-quote-meta { margin-left: var(--q-s5); }
}

/* 320 下 30px 的标题一行只放 9 个汉字，而每句都是 10–11 字 →
   会折成三行、末行只剩一个「样」「产」。降字号保住「一句一行」。 */
@media (max-width: 420px) {
  /* 22px 起步而不是 24：320 下「那些「当时没记全」的话，」是 12 个字，
     24px × 12 = 288 > 280 的可用宽，仍会折出第三行、末行只剩「话，」。 */
    /* 只重定义令牌，不改选择器：刻度仍只有一处权威定义。 */
  :root { --q-fs-h2: clamp(22px, 6.2vw, 28px); --q-lh-h2: 1.26; }
}

/* ---------- 入场 ---------- */
html.has-js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--q-ease), transform .7s var(--q-ease);
}

html.has-js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.has-js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 收尾 ---------- */
/* 这几个列表正好收在节的末尾：最后一行的下边线会紧挨着下一节的上边线
   （相差只有一个 padding），在 1440 下看起来像「莫名多了一条横线」。
   去掉行尾那条，让每节只剩一条分隔线。 */
.q-six li:last-child { border-bottom: 0; }

/* ---------- 可点目标 ---------- */
/* 页脚邮箱是全页唯一的「裸文本链接」：12.5px 的字只有 15px 高，触屏点不中。
   补 5px 上下内边距到 25px，视觉位置不变。
   （页脚其它链接在 quez.css 里已有内边距，导航与按钮本来就是 40px+。） */
.qz-foot-mail { display: inline-block; padding-block: 5px; }

/* 演示里的录音热区是贴在卡片图片上的百分比定位框（20×34），
   而它恰好是这页最想被点的东西。用一层透明伪元素把命中区撑到 40×54，
   视觉一点不动 —— 直接改 width 会让它和印在卡片上的那颗按键错位。 */
.record-trigger::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 999px;
}

/* 首屏：围绕设备展开六项能力。 */
.q-hero-grid {
  grid-template-columns: minmax(280px, .85fr) minmax(0, 1.35fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  margin-top: 0;
}
.q-hero .q-mast { font-size: clamp(76px, 8vw, 120px); letter-spacing: -.065em; margin-top: 22px; }
.q-hero .q-claim { font-size: clamp(26px, 2.65vw, 38px); line-height: 1.5; letter-spacing: -.04em; }
.q-hero-copy { margin-top: 24px; }
.q-product-stage { position: relative; min-width: 0; height: clamp(480px, 65vh, 620px); isolation: isolate; }
.q-product-stage::before {
  content: ''; position: absolute; inset: 12% 6%; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(95, 130, 255, .2), rgba(124, 107, 255, .06) 48%, transparent 70%);
  filter: blur(20px); pointer-events: none;
}
.q-product-orbit { position: absolute; inset: 10% 12%; border: 1px solid rgba(95, 130, 230, .18); border-radius: 50%; transform: rotate(-18deg); }
.q-product-orbit::after { content: ''; position: absolute; inset: 9% -12%; border: 1px dashed rgba(95, 130, 230, .16); border-radius: 50%; transform: rotate(35deg); }
.q-product-stage .q-hero-figure { position: absolute; inset: 0; margin: 0; align-items: center; pointer-events: none; }
.q-product-stage .q-hero-figure img {
  height: 74%; width: auto; max-width: 100%; object-fit: contain;
  filter: drop-shadow(0 32px 26px rgba(29, 49, 95, .18));
  animation: q-device-hover 7s ease-in-out infinite;
}
.q-hero-features { position: absolute; inset: 0; list-style: none; padding: 0; margin: 0; }
.q-hero-features li {
  min-width: 0;
  position: absolute; display: flex; align-items: center; gap: 10px;
  width: 218px; padding: 13px 14px; box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 16px;
  background: rgba(255, 255, 255, .48); backdrop-filter: blur(16px);
  box-shadow: 0 8px 30px rgba(45, 71, 130, .07), inset 0 1px 0 white;
  animation: q-feature-hover 6s ease-in-out infinite;
  transition: background .25s, box-shadow .25s;
}
.q-hero-features li:hover { background: rgba(255, 255, 255, .68); box-shadow: 0 12px 36px rgba(66, 91, 182, .16); animation-play-state: paused; }
.q-hero-features li:nth-child(1) { top: 9%; left: 0; }
.q-hero-features li:nth-child(2) { top: 39%; left: -3%; animation-delay: -2s; }
.q-hero-features li:nth-child(3) { bottom: 10%; left: 0; animation-delay: -4s; }
.q-hero-features li:nth-child(4) { top: 14%; right: -3%; animation-delay: -3s; }
.q-hero-features li:nth-child(5) { top: 45%; right: -6%; animation-delay: -1s; }
.q-hero-features li:nth-child(6) { bottom: 5%; right: -3%; animation-delay: -5s; }
.q-hero-features li > b { display: grid; place-items: center; flex: 0 0 34px; height: 36px; border-radius: 10px; background: linear-gradient(145deg, #e5edff, #eee9ff); color: var(--q-accent); font-size: 19px; }
.q-hero-features strong { display: block; color: var(--q-ink); font-size: 13px; line-height: 1.5; font-weight: 600; }
.q-hero-features small { display: block; color: var(--q-ink-2); font-size: 11px; line-height: 1.65; margin-top: 3px; }
@keyframes q-device-hover { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-12px) rotate(-3deg); } }
@keyframes q-feature-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (max-width: 1100px) {
  .q-hero-grid { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 16px; }
  .q-hero-features li { width: 185px; padding: 11px; gap: 8px; }
  .q-hero-features li > b { flex-basis: 28px; height: 32px; }
  .q-hero-features strong { font-size: 12px; }
  .q-hero-features small { font-size: 10px; }
  .q-hero .q-claim { font-size: 25px; }
}
@media (max-width: 860px) {
  .q-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .q-hero-main { text-align: center; }
  .q-hero .q-slogan { justify-content: center; }
  .q-hero .q-mast { font-size: clamp(68px, 13vw, 96px); margin-top: 14px; }
  .q-hero-copy { margin-top: 14px; }
  .q-hero .q-claim { max-width: none; font-size: clamp(24px, 4.5vw, 34px); }
  .q-product-stage { width: 100%; max-width: 640px; justify-self: center; height: 490px; }
  .q-hero-features li { width: 200px; }
  .q-hero-features li:nth-child(n) { left: 0; right: auto; }
  .q-hero-features li:nth-child(n+4) { left: auto; right: 0; }
}
@media (max-width: 520px) {
  .q-hero { padding-bottom: 32px; box-sizing: border-box; }
  .q-hero-grid { width: 100%; min-width: 0; }
  .q-hero-features li > span { min-width: 0; overflow-wrap: anywhere; }
  .q-product-stage { height: auto; padding-top: 270px; }
  .q-product-stage .q-hero-figure { height: 260px; bottom: auto; }
  .q-product-stage .q-hero-figure img { height: 96%; }
  .q-product-orbit { inset: 8px 16% auto; height: 240px; }
  .q-hero-features { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .q-hero-features li:nth-child(n) { position: relative; inset: auto; width: auto; padding: 11px 9px; gap: 7px; animation: none; border-radius: 12px; }
  .q-hero-features li > b { flex-basis: 25px; height: 29px; font-size: 16px; }
  .q-hero-features strong { font-size: 11px; }
  .q-hero-features small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .q-product-stage .q-hero-figure img, .q-hero-features li { animation: none; }
}