/*
 * home-v5.css — 官网首页版式。独立文件，不进 hashed 构建链（site.css 在链上，动它要重建产物）。
 * 结构真源是 index.html 本身：静态 HTML，不做 JS 注入，首屏与 SEO 都要它。
 * 版式要点：Hero 用网格底 + 径向光晕 + 产品窗口拟物；指标条把「本地优先 / 免费」前置到首屏；
 * 能力矩阵 6 卡等宽栅格，Pro / 免费用角标区分而不是插入段落；编号区块 01-04 建立阅读节奏；
 * 生态矩阵显式列出全部十座子域（内容拆子域后这是官网的独有价值）；定价卡做视觉主推。
 * 类名一律 hv- 前缀，避免与 site.css 既有选择器冲突 —— 改名的成本远高于收益。
 */

/* ---------- Hero ---------- */
.hv-hero {
  position: relative;
  overflow: hidden;
  padding: 76px 0 72px;
  border-bottom: 1px solid var(--line-2);
  background: var(--bg);
}
.hv-glow {
  position: absolute;
  top: -260px; left: 50%;
  /*
   * 128% → 100%。
   * 实测右溢：390 宽 55px、768 宽 108px、1024 宽 38px —— 原因是 min(1100px, 128%)
   * 让这个装饰层天生比父级宽 28%，再靠祖先裁切"藏起来"。但裁切行为随浏览器/滚动条
   * 口径变化，探针量到的是元素盒子本身越界（裁切不改 rect），所以这不是"看不见就没事"，
   * 而是盒子真的在视口外。改成 100% 后光晕仍在原位、仍居中，只是不再越界：
   * 径向渐变的两个焦点按百分比定位，收窄 14% 的观感差异在柔和光晕上几乎不可见。
   * 没有用 overflow: clip 兜底：它裁不到自己，也裁不掉 rect。
   */
  width: min(1100px, 100%);
  height: 620px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 30% 40%, var(--brand-grad-soft) 0%, transparent 58%),
    radial-gradient(ellipse at 72% 30%, rgba(0, 194, 255, .16) 0%, transparent 62%);
  /*
   * 光晕盒子是 1100×620 的矩形，而两个径向渐变的 transparent 停点（58%/62%）
   * 都落在盒子边界之内 —— 于是盒子左右边线在墨色底上显成一道竖直硬边
   * （实测 x=170 处蓝通道比盒子外高 33，肉眼看就是「首屏里嵌了一块浅色方块」）。
   * closest-side 遮罩让盒子四边恰好收到 0：渐变本体与呼吸动画都不动，只把边界擦掉。
   */
  mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  pointer-events: none;
}
.hv-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-2) 1px, transparent 1px);
  background-size: 56px 56px;
  /* 网格向下淡出，避免压住文字 */
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 78%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 78%);
  opacity: .5;
  pointer-events: none;
}
.hv-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.hv-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  margin-bottom: 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: .01em;
}
.hv-hero h1 {
  margin: 0 0 18px;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.035em;
  color: var(--ink);
}
.hv-hero h1 .grad {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hv-lead {
  margin: 0 0 28px;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.78;
  color: var(--ink-2);
}
.hv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 38px;
}
/*
 * 行内按钮的间距已由 gap 提供。ui.css 在 max-width:560px 里有 .btn + .btn { margin-top: 10px }，
 * 而 .hv-actions 是 align-items 默认 stretch 的 flex 行：第二个按钮的 margin-top 把整行抬高 10px，
 * 第一个被拉成 60.4px、第二个减 10 回到 50.4px，同一行高度不等。
 * (0,3,0) 稳赢 ui.css 的 (0,2,0)，且宽处 margin-top 本来就是 0，不需要媒体查询。
 */
.hv-actions .btn + .btn,
.hv-actions-row .btn + .btn { margin-top: 0; }

/* 指标条 */
.hv-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line-2);
  list-style: none;
}
.hv-metrics li { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hv-metrics b {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--brand);
  line-height: 1.15;
}
.hv-metrics span {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* 产品窗口拟物 */
.hv-window {
  border-radius: var(--r-lg, 16px);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hv-window-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-2);
  background: var(--bg-2);
}
.hv-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); flex: 0 0 auto; }
.hv-window-input {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 10px;
  padding: 7px 12px;
  border-radius: var(--r-sm, 8px);
  background: var(--card);
  border: 1px solid var(--brand-2);
  box-shadow: 0 0 0 3px var(--brand-grad-soft);
}
.hv-window-input svg { width: 14px; height: 14px; color: var(--brand); flex: 0 0 auto; }
.hv-window-input span {
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hv-window-body { padding: 8px 10px; }
.hv-hl {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 9px 6px 11px;
}
.hv-hl-tag {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--brand-grad-soft);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-deep);
}
.hv-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 8px;
  border-radius: var(--r-md, 12px);
  transition: background .16s ease;
}
.hv-row + .hv-row { border-top: 1px solid var(--line-2); border-radius: 0; }
.hv-row:hover { background: var(--bg-2); }
.hv-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border-radius: var(--r-md, 12px);
  background: var(--brand-grad-soft);
  color: var(--brand);
}
.hv-ico svg { width: 17px; height: 17px; }
.hv-ico-dir { background: var(--bg-2); color: var(--ink-2); }
.hv-row-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hv-row-t b {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hv-row-t small { font-size: 12px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.hv-row .mock-row-em {
  flex: 0 0 auto;
  font-size: 12px;
  font-style: normal;
  color: var(--muted);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
}
.hv-window-foot {
  padding: 11px 16px;
  border-top: 1px solid var(--line-2);
  background: var(--bg-2);
  font-size: 12px;
  color: var(--muted);
}

.hv-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.hv-pill {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px dashed var(--line);
  background: var(--card);
  font-size: 12px;
  color: var(--ink-2);
}

/* ---------- 通用区块头 ---------- */
.hv-section { padding: 76px 0; }
.hv-head { margin-bottom: 40px; }
.hv-head h2 {
  margin: 0 0 12px;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.2;
  color: var(--ink);
}
.hv-head .sub {
  margin: 0;
  max-width: 720px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
}

/* ---------- 能力矩阵 ---------- */
/* V7 版式：3 等分 → 4 栏 bento（前两块占两栏做视觉锚点，后四块并列）。
 * 回落不能靠新增 @media（断点预算是棘轮的，多一条就判红），所以在既有的
 * max-width:1279 档里把跨栏清掉，变成 2 栏：前两块整行、后四块两两并排。 */
.hv-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.hv-card:nth-child(1),
.hv-card:nth-child(2) { grid-column: span 2; padding: 30px 28px 28px; }
.hv-card {
  position: relative;
  padding: 26px 24px 24px;
  border-radius: var(--r-lg, 16px);
  border: 1px solid var(--line);
  background: var(--card);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hv-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-2);
  box-shadow: var(--shadow-md);
}
.hv-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: 16px;
  border-radius: var(--r-md, 12px);
  background: var(--brand-grad-soft);
  color: var(--brand);
}
.hv-ic svg { width: 20px; height: 20px; }
.hv-tier {
  position: absolute;
  top: 22px; right: 22px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.hv-tier-free { background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line); }
.hv-tier-pro {
  background: var(--brand-grad);
  color: var(--qf-on-brand);
}
.hv-card h3 {
  margin: 0 0 9px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--ink);
}
.hv-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--muted);
}

/* ---------- 编号区块（为什么快 / 四步上手） ---------- */
.hv-reasons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.hv-reason {
  padding-top: 24px;
  border-top: 2px solid var(--brand-2);
}
.hv-reason-n {
  display: block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.hv-reason h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
}
.hv-reason p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}
.hv-code {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--r-sm, 8px);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--ink-2);
}

.hv-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: hvstep;
}
.hv-step {
  position: relative;
  padding: 26px 22px 22px;
  border-radius: var(--r-lg, 16px);
  border: 1px solid var(--line);
  background: var(--card);
  display: flex;
  flex-direction: column;
}
.hv-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  margin-bottom: 15px;
  border-radius: 50%;
  background: var(--brand-grad);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}
.hv-step h3 {
  margin: 0 0 9px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.hv-step p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.78;
  color: var(--muted);
  flex: 1 1 auto;
}
.hv-step .hv-code { align-self: flex-start; margin-bottom: 12px; }
.hv-step-more {
  /*
   * 实测 432×23（1440）/ 320×23（390）。这是每张步骤卡的收尾
   * 链接，独占一行，撑到 44 不会挤压任何内容；inline-flex + 居中可以保住
   * 「文字在下划线正中」的观感（纯 min-height 会让文字贴顶）。
   */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}
.hv-step-more:hover { text-decoration: underline; }

.hv-note { margin-top: 28px; }

/* ---------- 语法卡 ---------- */
.hv-syntax {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.hv-syn {
  padding: 22px 20px;
  border-radius: var(--r-lg, 16px);
  border: 1px solid var(--line);
  background: var(--card);
}
.hv-syn-q {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 15px;
}
.hv-syn-q code {
  display: block;
  padding: 11px 13px;
  border-radius: var(--r-md, 12px);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--ink);
  overflow-x: auto;
  white-space: nowrap;
}
.hv-syn-tag {
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--brand-grad-soft);
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-deep);
}
.hv-syn h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.hv-syn p {
  margin: 0;
  font-size: 14px;
  line-height: 1.76;
  color: var(--muted);
}

/* ---------- 生态矩阵 ---------- */
/*
 * 第六版起十座子域全量上首页（原六座）。固定三列会剩一行孤卡，
 * 改为自适应列宽：1120 版心下是 4 列（4/4/2），窄屏由下方媒体查询接管。
 */
.hv-eco {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
/* JS 未跑时（爬虫 / 降级）的静态兜底 */
.hv-eco-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--r-lg, 16px);
  border: 1px solid var(--line);
  background: var(--card);
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.hv-eco-item:hover {
  transform: translateY(-2px);
  border-color: var(--brand-2);
  box-shadow: var(--shadow-md);
}
.hv-eco-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border-radius: var(--r-md, 12px);
  background: var(--brand-grad-soft);
  color: var(--brand);
}
.hv-eco-ic svg { width: 19px; height: 19px; }
/*
 * 标题与域名同一行（用户指令「生态区 链接一行」）。
 * 原来是 column 堆叠（标题一行、域名一行），卡片高 86px；现在 baseline 对齐
 * 成一行，高度降到一行文本。
 * 折行契约不变：两者都 nowrap，容器不够宽时标题省略（它是可推断的），
 * 域名保持完整（它是落点信息，截断了就没用）。
 */
.hv-eco-txt {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
/*
 * 标题与域名各自独占一行，且都不可断行。
 * 
 * 这里踩过 check_wrap_integrity 的 MID-UNIT 判据：
 * 早先给域名加了 overflow-wrap: anywhere 想让长域名换行不溢出，
 * 结果门禁把 a 元素整体当一个 unit，判定 "Download" 与
 * "download.quickfindapp.com" 之间是「同一 unit 内部断行」→ 6 项 FAIL。
 * 该判据的本意是拦「download.quick findapp.com」这种把域名拆成两半的情况，
 * 正确解法是让整串不换行（容器不够宽就压缩字号），而不是允许断点。
 * → nowrap + 容器 min-width:0 + 字号收敛，域名永不拆开。
 */
.hv-eco-txt b {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hv-eco-txt span {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;          /* 域名整体不拆 —— 拆了就是 MID-UNIT */
}
/*
 * ---------- 生态矩阵 · 美化 ----------
 * 每座子域一个专属色相（顶部发丝线 + 图标底色随站点变化），其余保持克制：
 * 不加外链箭头（用户已明确要求去除箭头）、不动上面的 nowrap/ellipsis 折行契约。
 * 色相挂在 [data-site]（由 home-v5.js 渲染时写入）上 —— 不碰 .hv-eco-item 基类，
 * 与 JS 降级（无 data-site 时回落品牌色）互不干扰。
 */
.hv-eco-item { position: relative; overflow: hidden; }
.hv-eco-item::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--eco-c1, var(--brand)), var(--eco-c2, var(--brand-2)));
  opacity: 0;
  transition: opacity .2s ease;
}
.hv-eco-item:hover::before { opacity: 1; }
.hv-eco-item[data-site="product"]  { --eco-c1: var(--qf-primary); --eco-c2: #8b5cf6; }
.hv-eco-item[data-site="docs"]     { --eco-c1: var(--qf-accent); --eco-c2: var(--qf-primary); }
.hv-eco-item[data-site="api"]      { --eco-c1: #10b981; --eco-c2: #34d399; }
.hv-eco-item[data-site="download"] { --eco-c1: #f59e0b; --eco-c2: #fbbf24; }
.hv-eco-item[data-site="support"]  { --eco-c1: #ec4899; --eco-c2: #f472b6; }
.hv-eco-item[data-site="app"]      { --eco-c1: #64748b; --eco-c2: #94a3b8; }
.hv-eco-item[data-site="search"]   { --eco-c1: #0ea5e9; --eco-c2: #7dd3fc; }
.hv-eco-item[data-site="status"]   { --eco-c1: #0d9488; --eco-c2: #2dd4bf; }
.hv-eco-item[data-site="releases"] { --eco-c1: #a855f7; --eco-c2: #d8b4fe; }
.hv-eco-item[data-site="blog"]     { --eco-c1: #f97316; --eco-c2: #fdba74; }
.hv-eco-ic { transition: transform .2s ease; }
.hv-eco-item[data-site] .hv-eco-ic {
  color: var(--eco-c1);
  background: color-mix(in srgb, var(--eco-c1) 12%, transparent);
}
.hv-eco-item:hover .hv-eco-ic { transform: scale(1.07); }

/* ---------- 定价 ---------- */
.hv-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}
.hv-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 24px;
  border-radius: var(--r-lg, 16px);
  border: 1px solid var(--line);
  background: var(--card);
}
.hv-plan-pro {
  border-color: var(--brand-2);
  box-shadow: var(--shadow-brand);
}
.hv-plan-badge {
  position: absolute;
  top: -11px; left: 24px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--brand-grad);
  color: var(--qf-on-brand);
  font-size: 12px;
  font-weight: 700;
}
.hv-plan-h { margin-bottom: 20px; }
.hv-plan-h h3 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}
.hv-plan-price {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-deep);
}
.hv-plan-list {
  flex: 1 1 auto;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.hv-plan-list li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--ink-2);
}
.hv-plan-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
}
.hv-plan-f { margin-top: auto; }
.hv-pay-note {
  margin: 22px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/*
 * ---------- 收口 CTA ----------
这里原有 38 行 .hv-cta / .hv-cta h2 / > p / -actions / -note
 * 私有规则，已整体删除。index.html 的收口区早已改用统一组件 cta.css 的
 * .cta-band（类名 hv-cta 在 HTML 与 JS 里零命中，只剩 index.html 第 26 行的
 * 历史注释），这些规则从未再命中任何元素。留着它们是双重代价：h2 / p / 按钮间距
 * 有两套真源，日后改 cta.css 会"改不动"（同特异性、加载顺序一变就翻盘）。
 * 统一组件的规则仍归 cta.css（共享层），本次不动它。
 */

/* ---------- 按钮行 ---------- */
.hv-actions-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 32px 0 0;
}

/* ---------- 深色主题 ---------- */
[data-theme="dark"] .hv-grid-bg { opacity: .32; }
[data-theme="dark"] .hv-glow { opacity: .7; }
[data-theme="dark"] .hv-window,
[data-theme="dark"] .hv-card,
[data-theme="dark"] .hv-step,
[data-theme="dark"] .hv-syn,
[data-theme="dark"] .hv-eco-item,
[data-theme="dark"] .hv-plan,
[data-theme="dark"] .hv-eyebrow,
[data-theme="dark"] .hv-pill {
  box-shadow: none;
}
[data-theme="dark"] .hv-card:hover,
[data-theme="dark"] .hv-eco-item:hover { box-shadow: var(--shadow-md); }
[data-theme="dark"] .hv-plan-pro { box-shadow: var(--shadow-brand); }

/* ---------- 响应式 ---------- */

/* ---------- 信任条 ---------- */
.pl-trust-bar {
  padding: 32px 0;
  border-bottom: 1px solid var(--line-2);
  background: var(--bg-2);
}
.pl-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.pl-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.pl-trust-item svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--brand);
  margin-top: 2px;
}
.pl-trust-item b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
  /* 四个数字（6 / 0 / ¥0 / ¥0）上下并排，缺了等宽数字会在刷新时左右抖 */
  font-variant-numeric: tabular-nums;
}
.pl-trust-item span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
@media (max-width: 1279px) {
  .pl-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .pl-trust-bar { padding: 24px 0; }
  .pl-trust-grid { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 1279px) {
  .hv-hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .hv-cards, .hv-eco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hv-cards .hv-card { grid-column: auto; }
  .hv-reasons { grid-template-columns: 1fr; gap: 20px; }
  .hv-syntax { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hv-plans { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 767px) {
  .hv-hero { padding: 48px 0 44px; }
  .hv-section { padding: 54px 0; }
  .hv-cards, .hv-eco, .hv-syntax, .hv-steps { grid-template-columns: 1fr; }
  .hv-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  /*
   * stats 与演示窗口之间的竖向间隙原先固定 44px，与全站区块节奏
   * （--sp-block = clamp(26px,3vw,40px)）差一档，390 宽上显得空。
   * 改成同一根刻度，宽屏不受影响（这条只在 ≤767 生效）。
   */
  .hv-hero-inner { gap: var(--sp-block); }
  .hv-actions { margin-bottom: 30px; }
}
@media (max-width: 479px) {
  .hv-eyebrow { font-size: 12px; padding: 4px 10px; }
  .hv-row-t b { font-size: 13px; }
  .hv-window-input span { font-size: 12px; }
}
@media print {
  .hv-glow, .hv-grid-bg { display: none; }
  .hv-hero { padding: 24px 0; }
}

/* ==========================================================================
   V7 首屏（2026-10-30）：深墨底 + 编辑式大标题
   --------------------------------------------------------------------------
   换版的三条理由：
   1. 旧首屏是「浅底 + 细字」，在 1440 宽下整屏没有一个视觉重心；
   2. 官网与十座子域共用同一套浅色首屏，读者分不出「这是官网」；
   3. 深墨底能让产品窗口拟物真正浮起来 —— 浅底上它只是白卡片。
   做法：底色/文字色全部走 tokens.css 的 --qf-v7-ink-* 与 --qf-v7-on-ink-*，
   亮暗两套取同一批值（深色块本身即主题，不随页面主题翻转）。
   对比度按最暗底 #0A1226 校验：正文 #C3D0EA = 10.2:1，指标 #9FC0FF = 10.5:1。
   ========================================================================== */
.hv-hero {
  background: var(--qf-v7-ink-grad);
  border-bottom: 1px solid var(--qf-v7-ink-hair);
  padding: 88px 0 84px;
  color: var(--qf-v7-on-ink);
}
.hv-hero .hv-glow { background: var(--qf-v7-glow-ink); }
.hv-hero .hv-grid-bg {
  background-image:
    linear-gradient(to right, var(--qf-v7-ink-hair) 1px, transparent 1px),
    linear-gradient(to bottom, var(--qf-v7-ink-hair) 1px, transparent 1px);
  opacity: .16;
}
.hv-hero .hv-eyebrow {
  border-color: var(--qf-v7-ink-glass-line);
  background: var(--qf-v7-ink-glass);
  color: var(--qf-v7-on-ink-2);
}
.hv-hero h1 { color: var(--qf-v7-on-ink); }
.hv-hero h1 .grad {
  /* background 简写会把 background-clip 重置回 border-box（实测：整行变成一个渐变矩形），
     所以这里只换 background-image，并重新声明 clip 与文字填充色。 */
  background-image: var(--qf-v7-grad-text-ink);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hv-hero .hv-lead { color: var(--qf-v7-on-ink-2); }
.hv-hero .hv-metrics { border-top-color: var(--qf-v7-ink-hair); }
.hv-hero .hv-metrics b { color: var(--qf-v7-on-ink-brand); }
.hv-hero .hv-metrics span { color: var(--qf-v7-on-ink-muted); }
.hv-hero .hv-pill {
  border-style: solid;
  border-color: var(--qf-v7-ink-glass-line);
  background: var(--qf-v7-ink-glass);
  color: var(--qf-v7-on-ink-2);
}
/* 墨底上的次按钮：白底会变成一块「贴纸」，改成玻璃按钮。
 * 三重点类 (0,4,0)：polish-layer 的 .btn.btn-ghost.btn-ghost 是 (0,3,0)，
 * 而它在本文件之后加载，同分会被它盖回白底。 */
.hv-hero .btn.btn-ghost.btn-ghost {
  background: var(--qf-v7-ink-glass);
  border-color: var(--qf-v7-ink-glass-line);
  color: var(--qf-v7-on-ink);
}
.hv-hero .btn.btn-ghost.btn-ghost:hover {
  background: var(--qf-v7-ink-glass-line);
  border-color: var(--qf-v7-on-ink-2);
  color: var(--qf-v7-on-ink);
}
/* 产品窗口：墨底上给更重的落影，浮起感来自阴影而不是描边 */
.hv-hero .hv-window {
  border-color: var(--qf-v7-ink-glass-line);
  box-shadow: var(--qf-v7-ink-window-shadow);
  /*
   * 窗口是浅底卡片，必须把自己的文字色拿回来。首屏把 color 设成墨底反白，
   * 而窗口内只有部分子元素自写了颜色（.hv-hl-tag / .hv-row-t …），
   * 没有自写的 .hv-hl-kw 就继承了反白色 —— 白字压白卡，实测 1.07:1。
   */
  color: var(--ink);
}
/*
 * 首屏指标：polish §6 给每个指标格顶部放了一条 2px 品牌色条（KPI 卡装饰）。
 * 首屏的指标格没有卡片内边距，色条正好压在数字顶边上，视觉上像被削平；
 * 同时该规则带来的 overflow:hidden 会切掉字形出框。墨色首屏已有 ul 的顶部分隔线，
 * 这里把色条整条撤掉，只保留分隔线。
 */
.hv-hero .hv-metrics > li::before { content: none; }
.hv-hero .hv-metrics > li { overflow: visible; }

/* ==========================================================================
   V7 官网顶栏：与首屏同底，去掉「白条压深底」的硬切
   --------------------------------------------------------------------------
   旧版顶栏是 rgba(255,255,255,.78) 玻璃条，压在墨色首屏上形成一条白带；
   截图上顶栏与首屏各占一半亮度，读者的第一眼落在接缝上而不是标题。
   这里把首页顶栏改成墨色玻璃，与首屏连成一整块画布。
   范围只到 body[data-page="index"]：其余 11 站的页面仍是浅底，顶栏保持原样。
   移动端抽屉（.nav-links.open）同步换墨底 —— 它是 absolute 面板，
   若只改顶栏不改面板，抽屉里会出现「浅底 + 浅字」。
   ========================================================================== */
html[data-theme] body[data-page="index"] .header.header {
  background: color-mix(in srgb, var(--qf-v7-ink) 86%, transparent);
  border-bottom-color: var(--qf-v7-ink-hair);
}
html[data-theme] body[data-page="index"] .header .brand.brand { color: var(--qf-v7-on-ink); }
html[data-theme] body[data-page="index"] .header .nav-links.nav-links a { color: var(--qf-v7-on-ink-2); }
html[data-theme] body[data-page="index"] .header .nav-links.nav-links a:hover,
html[data-theme] body[data-page="index"] .header .nav-links.nav-links a.active {
  color: var(--qf-v7-on-ink);
  background: var(--qf-v7-ink-glass);
}
html[data-theme] body[data-page="index"] .header .lang-switch.lang-switch,
html[data-theme] body[data-page="index"] .header .icon-btn.icon-btn {
  background: var(--qf-v7-ink-glass);
  border-color: var(--qf-v7-ink-glass-line);
  color: var(--qf-v7-on-ink);
}
html[data-theme] body[data-page="index"] .header .lang-switch button { color: var(--qf-v7-on-ink-muted); }
html[data-theme] body[data-page="index"] .header .lang-switch button:hover { color: var(--qf-v7-on-ink); }
html[data-theme] body[data-page="index"] .header .btn.btn-ghost {
  background: var(--qf-v7-ink-glass);
  border-color: var(--qf-v7-ink-glass-line);
  color: var(--qf-v7-on-ink);
}
html[data-theme] body[data-page="index"] .header .btn.btn-ghost:hover {
  background: var(--qf-v7-ink-glass-line);
  border-color: var(--qf-v7-on-ink-2);
}
html[data-theme] body[data-page="index"] .header .nav-links.nav-links.open {
  background: var(--qf-v7-ink);
  border-bottom-color: var(--qf-v7-ink-hair);
  box-shadow: var(--qf-v7-ink-window-shadow);
}

/* ==========================================================================
   V7 墨色带（.hv-band-ink）：整页第二处视觉重心
   --------------------------------------------------------------------------
   长滚动页从上到下全是浅底时，「为什么快」这种技术论证段落会沉下去 ——
   读者到第三屏已经分不清哪里是重点。把这一屏换成与首屏同一套深墨底，
   页面就有了「浅 → 墨 → 浅」的节拍，技术论证段也才有一屏的分量。
   选择器带 html[data-theme] + body 两重元素（0,3,2）：polish-layer 的
   .section-alt.section-alt 是 (0,3,1)，本文件虽更早加载但粗粒度多一个元素仍压得住
   （官网的样式表顺序是 polish-layer 最后，光靠后加载取胜不成立 —— 实测背景被盖回浅色）。
   ========================================================================== */
html[data-theme] body .hv-band-ink.hv-band-ink {
  background: var(--qf-v7-ink-grad);
  border-top: 1px solid var(--qf-v7-ink-hair);
  border-bottom: 1px solid var(--qf-v7-ink-hair);
}
html[data-theme] body .hv-band-ink .kicker.kicker {
  border-color: var(--qf-v7-ink-glass-line);
  background: var(--qf-v7-ink-glass);
  color: var(--qf-v7-on-ink-brand);
}
html[data-theme] body .hv-band-ink .hv-head.hv-head h2 { color: var(--qf-v7-on-ink); }
html[data-theme] body .hv-band-ink .hv-head .sub { color: var(--qf-v7-on-ink-muted); }
html[data-theme] body .hv-band-ink .hv-reason { border-top-color: var(--qf-v7-ink-glass-line); }
html[data-theme] body .hv-band-ink .hv-reason-n { color: var(--qf-v7-on-ink-brand); }
html[data-theme] body .hv-band-ink .hv-reason h3 { color: var(--qf-v7-on-ink); }
html[data-theme] body .hv-band-ink .hv-reason p { color: var(--qf-v7-on-ink-2); }
html[data-theme] body .hv-band-ink .hv-code {
  background: var(--qf-v7-ink-glass);
  border-color: var(--qf-v7-ink-glass-line);
  color: var(--qf-v7-on-ink-brand);
}

/* ==========================================================================
   V7 章节编号：给六个内容区块一条「№ 横线」，做成编辑式目录感
   --------------------------------------------------------------------------
   不用改 HTML：编号由 CSS 计数器生成（content: counter()），因此不进文案库、
   不影响 i18n 覆盖率与 copy-drift 判据。计数器只在本页 main 的 .hv-section 上跑，
   顺序即文档顺序 —— 插入新区块时编号自动跟着走，不会像写死 <span>01</span> 那样错位。
   编号放在横线右端、字距 .18em：既当分区索引，也不与标题抢注意力。
   ========================================================================== */
html[data-theme] body[data-page="index"] main { counter-reset: hv-sec; }
html[data-theme] body[data-page="index"] main > .hv-section { counter-increment: hv-sec; }
html[data-theme] body[data-page="index"] .hv-section .hv-head.hv-head {
  position: relative;
  border-top: 1px solid var(--qf-v7-hairline);
  padding-top: 26px;
}
html[data-theme] body[data-page="index"] .hv-section .hv-head.hv-head::before {
  content: counter(hv-sec, decimal-leading-zero);
  position: absolute;
  top: 7px;
  right: 0;
  font: 800 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .18em;
  color: var(--qf-v7-eyebrow-fg);
}
html[data-theme] body[data-page="index"] .hv-band-ink .hv-head.hv-head {
  border-top-color: var(--qf-v7-ink-glass-line);
}
html[data-theme] body[data-page="index"] .hv-band-ink .hv-head.hv-head::before {
  color: var(--qf-v7-on-ink-brand);
}