/* ============================================================
   关投强 · 产品服务 / 解决方案板块样式（由 tools/_gen_services.py 生成）
   依赖 common.css 的变量与 .section / .page-banner / .cta-section
   ============================================================ */

/* ---------- Banner 数据条 ---------- */
.svc-banner-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 30px;
    max-width: 880px;
}
.svc-banner-stat {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 16px 18px;
}
.svc-banner-stat b {
    display: block;
    font-size: 24px;
    line-height: 1.2;
    color: #fff;
    font-weight: 700;
}
.svc-banner-stat span {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.78;
}

/* ---------- 服务卡网格（通用组件，index / geo / 行业 / 场景 / 服务页共用，勿删） ---------- */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}
.svc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-radius: 16px;
    padding: 28px 26px 24px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.svc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(10, 30, 76, 0.1);
}
.svc-card .badge {
    position: absolute;
    top: 18px;
    right: 20px;
    font-size: 12px;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 999px;
    color: #fff;
    background: var(--c-accent, #0052d9);
}
.svc-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-accent, #0052d9);
    background: rgba(0, 82, 217, 0.08);
}
.svc-icon svg { width: 26px; height: 26px; }
.svc-card h3 {
    margin: 18px 0 8px;
    font-size: 20px;
    line-height: 1.35;
    color: var(--c-dark, #0a1e4c);
}
.svc-tagline {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--c-accent, #0052d9);
    font-weight: 600;
}
.svc-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}
.svc-list li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 9px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--c-text, #3c465e);
}
.svc-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-accent, #0052d9);
    opacity: 0.55;
}
.svc-more {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-accent, #0052d9);
    text-decoration: none;
}
.svc-more:hover { text-decoration: underline; }

/* ---------- 服务卡底部动作区（2026-10-13 新增：「立即咨询」按钮） ----------
   需求：首页「产品服务」4 张卡的【了解详情】后面再加一个【立即咨询】，
        点击弹出微信二维码（复用站内既有 #wxModal，见 `assets/js/floating.js`）。
   为什么另起一个容器，而不是把按钮直接跟在 `.svc-more` 后面：
     `.svc-more` 是 `inline-block`（行内元素），后接 `<button>` 会走**行内格式化上下文**，
     两者按 baseline 对齐 + 源码换行折叠成 1 个空格 ⇒ 间距不可控、按钮还会被文字基线顶歪。
     改成 flex 行后：间距由 `gap` 精确控制、两个子项靠 `align-items:center` 自动垂直居中。
   ⚠ 作用域：只包首页「产品服务」区的 4 张卡。`.sol-card`（解决方案区，也是 `.svc-more`
     裸链接）**依然是 inline-block**，本节规则对它零影响。
   ⚠ `.svc-actions` 自身不设 margin：交给 `.svc-list` 既有的 `margin-bottom:18px`
     提供上间距，保证改造前后「按钮行」落点像素不变。 */
.svc-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
/* 「立即咨询」按钮：**不新造样式，直接复用站内既有按钮体系**
   （HTML 挂 `class="btn btn-outline btn-sm"`，定义在 `common.css:106-121`）。
   本类只保留一条自有规则：它是动作区的 flex 子项，空间紧张时不许被压扁
   （`.btn` 自带 `white-space:nowrap`，被压缩会直接溢出，比换行更糟）。
   ⚠ 为什么不用 `var(--c-accent)` —— 它在 `common.css:20` 是**活动橙 #F19500**，不是品牌蓝！
     （fallback `#0052d9` 只在变量未定义时才生效，而站内它**始终已定义**；
       `services.css` 里既有的 `var(--c-accent, #f19500)` 就是知道这点才把 fallback 写成橙色。）
     橙色落在白卡上仅 2.32:1，**不达 WCAG AA**；而 `.btn-outline` 用主色蓝 `--c-primary`：
       常态  #0052D9 on #FFF → 6.55:1 ｜ hover 反相 #FFF on #0052D9 → 6.55:1  均达标。
     ⚠ 手算得出 —— 浅色区块对比度**没有核验脚本兜底**（`_verify_dark` 只扫深色区块），
       改动文字色 / 底色必须重新手算，不得低于 4.5:1。
     与同排的橙色 `.svc-more`（了解详情）构成「强调色 → 主色」的主次关系。 */
.svc-consult {
    flex: none;
}

/* ---------- 套餐页六款套餐卡内的同一个动作区（2026-10-14 新增） ----------
   需求：发稿套餐专题页的六张套餐卡也加【立即咨询】，点击弹出微信二维码。
   ⚠ 复用上节组件、**不新造弹窗**（`data-wx-open` → floating.js 的全站唯一 `#wxModal`），
     与首页的差别只有「位置」和「宽度」两条，所以用**后代选择器就地收窄作用域**，
     而不是改上面的通用规则 —— 改通用规则会把首页那 4 张卡一起动掉。
     · 位置：首页动作区跟在 `.svc-list` 后（那份自带 `margin-bottom:18px`）；
       套餐卡动作区跟在 `.tier-list` 后，而 `.tier-list li` 只留 `8px` ⇒ 补 14px 上间距。
     · 宽度：套餐卡是「一格一个可直接下单的组合」，按钮铺满卡宽才符合卡片主行动的层级。
       `.svc-consult` 的 `flex:none` 是给首页「文字链接 + 按钮」同排时防压扁用的；
       这里独占一排，改 `flex:1 1 auto` 撑满（`.btn` 自带 `justify-content:center`，
       无需再管文字居中）。
   ⚠ 作用域（2026-10-16 复核）：全站 `.tier-card` 只出现在 packages.html(6 张) /
     cooperation.html(3 张) / price/index.html(4 张)。price 页那 4 张卡内**没有**
     `.svc-actions` ⇒ 不受影响；cooperation.html 的 3 张分级卡**本轮起**在卡内底部
     各挂 1 枚【合作咨询】⇒ 本节两条规则**同时服务两个页面**（套餐卡是【立即咨询】、
     合作页分级卡是【合作咨询】），而两处对样式的诉求恰好一致：
     14px 上间距 + 按钮铺满卡宽。对首页 `.svc-card` + 方案卡 `.sol-card` 仍零影响
     （那两个不落在本节选择器下）。 */
.tier-card .svc-actions { margin-top: 14px; }
.tier-card .svc-actions .svc-consult { flex: 1 1 auto; }

/* ---------- 解决方案卡内的同一个动作区（2026-10-16 新增：渠道合作页 4 张合作模式卡） ----------
   需求：渠道合作专题页「合作模式」4 张卡**框内底部**各加一枚【合作咨询】，
        点击弹出微信二维码。（甲方第一轮误提「两个区块底部各一枚」，第二轮修正为
        「应该是加在每个小服务的框内，如：渠道代理」⇒ 区块底部方案作废。）
   真源 = `_gen_cooperation.py` 的 `CONSULT_BTN` / `consult_row()`；本页不产 CSS。

   ⚠ 为什么用**后代选择器** `.sol-card .svc-actions` 而不是另加页面修饰类：
     `.sol-card` 在 index.html(8 张) / solutions.html(43 张) / cooperation.html(4 张)
     都在用，但只有合作页那 4 张卡内**有** `.svc-actions`（另两页已核：0 处）
     ⇒ 本节两条规则实际只命中 cooperation.html。这样「同一件事」不必同时维护
     一个 HTML 修饰类 + 一条 CSS 规则（第一轮的 `.svc-actions-center` 正是多余的，
     已随区块底部方案一并删除）。

   ⚠ 上间距为什么取 `8px` 而不是套餐卡那样的 `14px`：
     要看**上游元素自带**的下边距 —— 套餐卡是 `.tier-list li{margin-bottom:8px}`
     （末项也算）⇒ 8+14 = **22px**；合作模式卡是 `.sol-tags{margin-bottom:14px}`
     ⇒ 14+8 = **22px**。两者**视觉同高**。别「对齐数字」把间距拉开一档。
     （`.sol-card` 是 flex 列，flex 子项之间 margin **不折叠** ⇒ 间距是相加不是取大。）

   ⚠ `.sol-card p{flex:1}` 已把剩余空间吸走 ⇒ 动作行天然**贴卡底**，
     不需要再给 `margin-top:auto`（也不该改 `.sol-card` 基础规则去动另两页）。 */
.sol-card .svc-actions { margin-top: 8px; }
.sol-card .svc-actions .svc-consult { flex: 1 1 auto; }

/* ---------- GEO 服务页「服务报价方案」5 卡（2026-10-19 新增） ----------
   需求：`services-geo.html` 按参考版式加 5 档报价（自建 / 代运营 / 培训 / 陪跑 / 官网）。
   真源 = 本文件（`_gen_services.py`）的 `GEO_PRICING` + `geo_pricing_card()`。

   ⚠ 不复用 `.tier-card`：它全站只在 packages(6) / cooperation(3) / price(4) 三处，
     且有**按页计数断言**；报价卡的信息结构与套餐卡不同（三段：核心优势 / 服务内容 /
     适合企业），另起 `.gp-*` 才不会扩大既有作用域。
   ⚠ 高亮卡用**主色蓝**而非参考图的绿色：本站品牌色是蓝（`--c-primary`），
     绿色 `--c-success` 只用于状态提示，放到营销卡上会与全站视觉脱节。
   ⚠ `.gp-flag` 是绝对定位的**标题条**（不占文档流）⇒ 高亮卡靠 `padding-top` 让位，
     5 张卡仍然等高（行内 `align-items:stretch` + 卡内 flex 列 + `.gp-body` 吸收余量）。
   ⚠ `.gp-actions .svc-consult{width:100%}` 只在本组件内生效；`.svc-consult` 基础规则
     （`flex:none`，防首页同排被压扁）**不动**。 */
.sg-pricing { background: linear-gradient(180deg, #F7FAFF 0%, #EDF3FF 100%); }
.gp-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.gp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-radius: 16px;
    padding: 22px 18px 18px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.gp-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(10, 30, 76, 0.10); }
.gp-card-hot {
    border: 2px solid var(--c-primary);
    padding-top: 42px;
    box-shadow: 0 14px 34px rgba(0, 82, 217, 0.16);
}
.gp-card-hot:hover { box-shadow: 0 18px 40px rgba(0, 82, 217, 0.22); }
.gp-flag {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(90deg, var(--c-primary) 0%, #2F6BE0 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.gp-top { min-height: 96px; }
.gp-name {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 700;
    color: var(--c-dark, #0a1e4c);
}
.gp-price { display: flex; align-items: baseline; gap: 2px; color: var(--c-dark, #0a1e4c); }
.gp-price .cur { font-size: 15px; font-weight: 700; }
.gp-price b { font-size: 28px; line-height: 1.1; font-weight: 800; letter-spacing: -0.5px; }
.gp-price .sfx { margin-left: 2px; font-size: 13px; font-weight: 700; }
.gp-price .unit { margin-left: 2px; font-size: 12px; color: var(--c-text-mute, #8c8c8c); }
.gp-sub { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: var(--c-text-mute, #8c8c8c); }
.gp-body {
    flex: 1 1 auto;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--c-line, #e7e7e7);
}
.gp-sec { margin-bottom: 14px; }
.gp-sec:last-child { margin-bottom: 0; }
.gp-sec h4 {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--c-text-sub, #666);
    letter-spacing: 0.5px;
}
.gp-text { margin: 0; font-size: 13px; line-height: 1.75; color: var(--c-text, #1a1a1a); }
.gp-list { list-style: none; margin: 0; padding: 0; }
.gp-list li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--c-text, #1a1a1a);
}
.gp-list li:last-child { margin-bottom: 0; }
/* 勾选符号用**文字字形**（`✓`）而不是彩色 emoji：站内图标规范禁 emoji。
   ⚠ 必须写成 CSS 转义 `¹3`（Python 源码里是 `\2713`）：直接写 `¹3` 会被 Python
     当**八进制转义**吃掉（`¹` + `3` ⇒ 输出成「¹3」），这是本轮实踩的坑。 */
.gp-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 12px;
    line-height: 1.85;
    font-weight: 700;
    color: var(--c-primary);
}
.gp-actions { margin-top: 16px; }
.gp-actions .svc-consult { width: 100%; flex: 1 1 auto; }
/* 高亮卡的主按钮做实心（其余卡保持 outline 次级样式） */
.gp-card-hot .gp-actions .svc-consult {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}
.gp-card-hot .gp-actions .svc-consult:hover {
    background: var(--c-primary-dark);
    border-color: var(--c-primary-dark);
}
@media (max-width: 1180px) {
    .gp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .gp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .gp-top { min-height: 0; }
}
@media (max-width: 480px) {
    .gp-grid { grid-template-columns: 1fr; }
    .gp-card-hot { padding-top: 40px; }
}

/* ---------- 专区总览卡内的动作区（2026-10-19 新增：solutions.html 43 张卡） ----------
   需求：「查看专题的右边增加：方案咨询按钮，点击弹出微信二维码」。
   真源 = `_gen_services.py` 的 `topic_card()`（**唯一**模板：场景 10 / 行业 21 /
     组合 8 / 价格与服务 4 都走它，仅 label 不同）。

   ⚠ 为什么另起 `.sol-card-topic` 修饰类，而不是直接复用上面那两条 `.sol-card` 规则：
     上面那两条是给 **cooperation.html 的 4 张合作模式卡**写的 —— 卡内 `.svc-actions`
     里**只有一枚按钮**，独占一行，所以 `flex:1 1 auto` 铺满卡宽是对的。
     solutions 这边是「文字链接 + 按钮」**并排**：沿用 `flex:1 1 auto` 会把按钮
     拉到卡宽约六成，把「查看专题 →」挤成视觉上的次要元素 —— 与甲方「在右边加一个
     按钮」的意图相反。故只覆盖 `flex`，让按钮回到 `.btn-sm` 的自然宽度。
   ⚠ 上间距**不覆盖**：`.sol-card .svc-actions { margin-top:8px }` 叠加 `.sol-tags`
     自带的 14px = 22px，与合作页/套餐卡同节奏，四列窄卡下不显拥挤。
   ⚠ 特异性：`.sol-card-topic .svc-actions .svc-consult` 与
     `.sol-card .svc-actions .svc-consult` 同为 (0,3,0)，靠**后定义**生效 ——
     本段必须留在**原规则之后**（后定义生效），勿上移。 */
.sol-card-topic .svc-actions .svc-consult { flex: none; }

/* ---------- 服务闭环 ---------- */
.loop-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.loop-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-radius: 16px;
    padding: 26px 22px 22px;
}
.loop-step {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--c-dark, #0a1e4c);
    opacity: 0.08;
}
.loop-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-accent, #0052d9);
    background: rgba(0, 82, 217, 0.08);
}
.loop-icon svg { width: 22px; height: 22px; }
.loop-card h3 {
    margin: 16px 0 6px;
    font-size: 18px;
    color: var(--c-dark, #0a1e4c);
}
.loop-card p {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--c-text-soft, #6b7690);
}
.loop-card .svc-list { margin-bottom: 0; }

/* ---------- 服务流程 ---------- */
/* ---------- 服务流程（6 步 / 5 步） ----------
   ⚠ 2026-10-15（需求文档 T07）：本套组件现被**三个页面**共用 ——
     `services.html`（6 步·白底）、`services-media.html`（6 步·**灰底**，本次新增）、
     `services-geo.html`（5 步·灰底，`.sg-loop` 走 5 列）。
     底色不同 ⇒ 卡片靠「白底 + 浅灰边框」在灰段上分离（实测分界清晰，
     见 `_shot46_g37.py` 的 `bg/prevBg/nextBg` 探针与截图）。
   ⚠ **对比度无核验兜底**（浅色区块不在 `_verify_dark.py` 扫描范围）⇒ 手算并记在此：
     `.svc-step p` = `--c-text-soft` **#6b7690** 落在**白卡**上 ⇒ 对比度 **4.55 : 1**
     （≥ WCAG AA 正文 4.5:1，**余量仅 0.05**）⇒ 该令牌**不得再调浅**。
   ⚠ 同一行等高靠 grid 默认 `align-items: stretch`（**未显式声明，用的是默认值**）；
     行与行之间高度可以不同（说明文字行数不同）——那是正常现象，不是「动作行错位」，
     判据是「**同一行内**顶边/底边齐」，`_shot46_g37.py` 按 `top` 分行统计。 */
.svc-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
/* ⚠ GEO 服务页的「全链闭环」是 **5 步**：`.svc-steps` 默认 3 列会剩下 1 格空位
   （4 步、6 步都填得满，5 步填不满），故加 `.sg-loop` 修饰类走 5 列 = 一行走完一个流程。
   ⚠ 只为 5 步场景启用；其它页面的 `.svc-steps` 不受影响。 */
.svc-steps.sg-loop { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.svc-step {
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-radius: 14px;
    padding: 22px 22px 20px;
}
.svc-step b {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--c-accent, #0052d9);
    opacity: 0.5;
}
.svc-step h4 {
    margin: 10px 0 8px;
    font-size: 17px;
    color: var(--c-dark, #0a1e4c);
}
.svc-step p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--c-text-soft, #6b7690);
}

/* ---------- 客户困惑卡 ---------- */
/* ⚠ 与 topics.css 的 .pain-* 同款（百科页不引 topics.css，故在此保留一份，
   供 services-baike.html 的「你可能正遇到」6 卡使用；结构由 pain_block() 产出） */
.pain-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.pain-card {
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-radius: 16px;
    padding: 26px 24px 22px;
}
.pain-idx {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--c-accent, #0052d9);
    opacity: 0.7;
}
.pain-card h3 {
    margin: 10px 0 10px;
    font-size: 18px;
    line-height: 1.45;
    color: var(--c-dark, #0a1e4c);
}
.pain-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: var(--c-text-soft, #6b7690);
}

/* ---------- 预检查询条（`.baike-query` 百科词条 / `.geo-query` GEO 现状；2026-10-10） ----------
   ⚠ 两页共用同一套结构（真源 = `_query_block()`），**只有根节点 class 不同**：
     内部一律 `.bq-*`，故这里把两个根 class 写进同一条规则，避免声明抄两份、日后漂移。
   ⚠ 新增第三个查询条页面时，把根 class 也加进下面这 5 条选择器即可。 */
.baike-query,
.geo-query {
    margin-top: 28px;
    padding: 32px 32px 28px;
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(10, 30, 76, .05);
}
.baike-query-head,
.geo-query-head { text-align: center; }
.baike-query-head h3,
.geo-query-head h3 {
    margin: 0;
    font-size: 26px;
    line-height: 1.4;
    color: var(--c-dark, #0a1e4c);
}
.baike-query-head h3 span,
.geo-query-head h3 span { margin-left: 12px; color: var(--c-accent, #f19500); }
.baike-query-head p,
.geo-query-head p {
    margin: 10px auto 0;
    max-width: 720px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--c-text-soft, #6b7690);
}
.bq-form {
    display: flex;
    align-items: stretch;
    margin: 22px auto 0;
    max-width: 940px;
}
.bq-field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    height: 54px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-right: 0;
    border-radius: 10px 0 0 10px;
}
/* 名称 / 手机号两段拼接成一行（2026-10-10 加手机号字段后由单段改为双段）：
   第一段留左圆角，第二段去圆角，再接主按钮（无圆角）与次按钮（右圆角）。 */
.bq-field-name { flex: 1 1 320px; }
.bq-field-tel { flex: 0 1 210px; }
.bq-field + .bq-field { border-radius: 0; }
.bq-field:focus-within { border-color: var(--c-primary, #0052d9); z-index: 1; }
.bq-field-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 18px; height: 18px;
    margin-right: 10px;
    color: var(--c-text-mute, #8c8c8c);
}
.bq-field-icon svg { width: 100%; height: 100%; }
.bq-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    font-size: 15px;
    color: var(--c-text, #1c2740);
    outline: none;
}
.bq-input::placeholder { color: var(--c-text-mute, #8c8c8c); }
.bq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 54px;
    padding: 0 26px;
    border: 0;
    border-radius: 0;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .25s;
}
.bq-btn-primary { background: var(--c-primary, #0052d9); color: #fff; }
.bq-btn-primary:hover { background: var(--c-primary-dark, #0034b5); }
.bq-btn-accent {
    background: var(--c-accent, #f19500);
    color: #fff;
    border-radius: 0 10px 10px 0;
}
.bq-btn-accent:hover { background: var(--c-accent-dark, #d97f00); }
.bq-privacy {
    margin: 12px auto 0;
    max-width: 940px;
    font-size: 12.5px;
    line-height: 1.7;
    text-align: center;
    color: var(--c-text-mute, #8c8c8c);
}
.bq-tip {
    margin: 12px auto 0;
    max-width: 940px;
    font-size: 13px;
    color: #d4380d;
}
.bq-tip.is-ok { color: var(--c-primary, #0052d9); }
/* 校验失败只标红**出错的那个字段**（名称 / 手机号各自独立）：
   原先的 `.baike-query.is-invalid .bq-field` 会让两段一起变红，加手机号后已不适用。 */
.bq-field.is-invalid { border-color: #d4380d; }
.bq-result {
    margin: 22px auto 0;
    max-width: 940px;
    padding: 24px 26px 20px;
    background: var(--c-primary-light, #ecf2fe);
    border-radius: 14px;
}
.bq-result-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 82, 217, .14);
}
.bq-result-name {
    font-size: 17px;
    color: var(--c-dark, #0a1e4c);
    word-break: break-all;
}
.bq-result-type {
    padding: 3px 10px;
    background: rgba(0, 82, 217, .1);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-primary, #0052d9);
}
/* 结论通知行（2026-10-10 留资改造新增）：只在用户填了手机号后由 JS 展开，
   DOM 上默认带 hidden ⇒ 必须显式压制 display:flex（否则 [hidden] 失效）。 */
.bq-result-tel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid rgba(0, 82, 217, .16);
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--c-text-soft, #6b7690);
}
.bq-result-tel[hidden] { display: none; }
.bq-result-tel-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 16px; height: 16px;
    color: var(--c-primary, #0052d9);
}
.bq-result-tel-icon svg { width: 100%; height: 100%; }
.bq-result-tel b { color: var(--c-primary, #0052d9); font-weight: 600; }
.bq-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 28px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.bq-check { display: flex; gap: 10px; }
.bq-check-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 20px; height: 20px;
    margin-top: 2px;
    color: var(--c-primary, #0052d9);
}
.bq-check-icon svg { width: 100%; height: 100%; }
.bq-check b {
    display: block;
    font-size: 15px;
    color: var(--c-dark, #0a1e4c);
}
.bq-check p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--c-text-soft, #6b7690);
}
.bq-note {
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 82, 217, .14);
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--c-text-soft, #6b7690);
}
.bq-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-primary, #0052d9);
}
.bq-cta svg { width: 16px; height: 16px; }
.bq-cta:hover { color: var(--c-primary-dark, #0034b5); }
/* 备用直达（拨号 / 微信）：站内无后端，拨号与微信是当下真实可达的通道，
   与「结论将发送至手机号」并列展示，避免只给一个前端承诺。 */
.bq-direct {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.8;
    color: var(--c-text-mute, #8c8c8c);
}
.bq-direct a { font-weight: 600; color: var(--c-primary, #0052d9); }
.bq-direct a:hover { text-decoration: underline; }
.bq-direct em { font-style: normal; font-weight: 600; color: var(--c-text, #1c2740); }

/* ---------- 为什么选择 / 保障 ---------- */
.why-grid, .guarantee-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.guarantee-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.why-card, .guarantee-card {
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-radius: 16px;
    padding: 26px 24px;
}
.why-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-accent, #0052d9);
    background: rgba(0, 82, 217, 0.08);
}
.why-icon svg { width: 24px; height: 24px; }
.why-card h3, .guarantee-card h3 {
    margin: 16px 0 10px;
    font-size: 18px;
    color: var(--c-dark, #0a1e4c);
}
.why-card p, .guarantee-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    color: var(--c-text-soft, #6b7690);
}

/* ---------- 资源结构 ---------- */
.res-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.res-card {
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-radius: 14px;
    padding: 24px 22px;
}
.res-card h3 {
    margin: 0 0 6px;
    font-size: 18px;
    color: var(--c-dark, #0a1e4c);
}
.res-role {
    display: inline-block;
    margin: 0 0 12px;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--c-accent, #0052d9);
    background: rgba(0, 82, 217, 0.08);
}
/* ⚠ `:last-child` → `:last-of-type`（2026-10-14 随「资源结构」卡加动作区一起修）：
   媒体发稿服务页的 6 张 `.res-card` 尾部新增了 `.svc-actions` ⇒ 描述 `<p>` 不再是
   最后一个**子元素**，`p:last-child` 会**静默失配**（字号/行高/灰色全掉回默认值 =
   版式回归，而页面级核验与静态断言**都看不出来**）。
   `:last-of-type` 按「同类型元素中的最后一个」匹配，与其后是否还有 `<div>` 无关 ⇒
   两个使用页（媒体发稿服务 = 有动作区 / 百科词条创建服务 = 无动作区）结果一致。
   这是**修正选择器本意**，不是打补丁。 */
.res-card p:last-of-type {
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    color: var(--c-text-soft, #6b7690);
}
/* 动作区「吸底」+ 最小间距（2026-10-14，与上一批同一次改动）。
   为什么不是简单写个 `margin-top:14px` 就完事 —— **渲染目视才发现的版式问题**：
   `.res-grid` 是三列网格，行内卡片被 `align-items:stretch` 拉成等高，
   但六张卡的**描述行数不一**（第 6 张「报纸期刊」只有 1 行，其余 2 行）⇒
   自然流下它的动作行会比同排另两张**高出一整行文字**。
   1280px 实测 `actTops = 1738,1738,1738,1985,1985,1961`（第 6 张矮 24px = 一个行高），
   放大截图里肉眼可见三张卡按钮**不在同一水平线**上。
   ⚠ 静态断言 / E2E / `FAILS=0` **全都抓不到**这件事（它们只看「有没有、几个、属性对不对」）
     ⇒ 这就是「渲染截图必须目视」这条红线的又一个实例。
   做法：卡内改纵向 flex + 动作区 `margin-top:auto` 把按钮压到卡片底部，
   与套餐页 `.tier-card`（`flex-direction:column` + `.tier-list{margin:auto 0 0}`）
   同一套「卡片动作区吸底」口径 ⇒ 同行六张卡的按钮自然落在同一水平线。

   ⚠ **修饰类 `res-card-act` 是刻意的**，不直接写 `.res-card`：
     `res-card` 是**两页共用**的 class（媒体发稿服务页 + 百科词条创建服务页「词条类型」6 卡），
     而百科页那些卡**没有动作区**、也不该被改成 flex ⇒
       ① 让它零影响（不是靠 `:has()` 这类新选择器，也不是靠「碰巧没有子元素」）；
       ② 让核验能反向钉住「百科页仍是裸 `res-card`」（见 E2E 4a-1d-3）。
   ⚠ `align-items:flex-start` **必须写**：纵向 flex 的默认值是 `stretch`，
     而 `.res-role` 是 `display:inline-block` 的药丸 —— 作为 flex 子项会被 blockify
     再被拉满整行宽，药丸底色直接变成一条通栏色带（且只在渲染图里看得见）。
   ⚠ `padding-top` 与 `margin-top:auto` **必须同时给**：`auto` 会把该行剩余空间**吃干净**，
     只剩 `auto` 时描述与按钮的最小间距可能被压到 0（`.res-card` 里没有
     `.svc-list` 的 `margin-bottom:18px` 兜底，那套是首页 / 套餐卡才有的）；
     `padding` 不参与 `auto` 的分配 ⇒ 它才是「无论如何都留 14px」的那一层。 */
.res-card-act {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.res-card-act .svc-actions {
    margin-top: auto;
    padding-top: 14px;
}

/* ---------- 解决方案卡 ---------- */
.sol-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.sol-card {
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-radius: 16px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sol-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(10, 30, 76, 0.1);
}
.sol-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-accent, #0052d9);
    background: rgba(0, 82, 217, 0.08);
}
.sol-icon svg { width: 21px; height: 21px; }
.sol-card h3 {
    margin: 14px 0 8px;
    font-size: 17px;
    color: var(--c-dark, #0a1e4c);
}
.sol-card p {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--c-text-soft, #6b7690);
    flex: 1;
}
.sol-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.sol-tags .tag {
    font-size: 12px;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 6px;
    color: var(--c-text, #3c465e);
    background: var(--c-bg-soft, #f4f7fd);
}

/* ---------- 行业 × 场景 专题直达（services.html 的核心内容区） ----------
   位置：本页**首个内容区块**（紧随 banner，2026-09-29 起）。目标 = 访客 3 秒内找到「自己那一页」。
   配色：只用 --c-primary（蓝）与深色令牌，**浅底与深底都不出现橙色**。
   交互：assets/js/topic-hub.js（分类 chip + 关键词搜索 + 空态）。 */
.topic-hub-section {
    /* 蓝调浅底（区别于 --c-bg-soft 的灰底），让下面的白色卡片浮起来 */
    background: linear-gradient(180deg, #EEF3FE 0%, #F8FAFF 100%);
}
.topic-hub {
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-radius: var(--radius-xl, 24px);
    overflow: hidden;
    box-shadow: 0 20px 56px rgba(10, 30, 76, 0.1);
}
.topic-hub-head {
    position: relative;
    padding: 38px 44px 32px;
    background: var(--c-dark-grad, linear-gradient(135deg, #101f4f 0%, #253ea0 100%));
    color: var(--c-dark-on, #e4ebff);
}
/* 与 .page-banner 同源的柔光，深底上只允许蓝白 */
.topic-hub-head::after {
    content: "";
    position: absolute; right: -70px; top: -90px;
    width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle, var(--c-dark-glow, rgba(108, 152, 255, .42)), transparent 68%);
    pointer-events: none;
}
.topic-hub-head > * { position: relative; z-index: 1; }
.topic-hub-head h2 {
    margin: 12px 0 10px;
    font-size: 30px; line-height: 1.35;
    color: var(--c-dark-on, #e4ebff);
}
.topic-hub-head h2 .accent { color: var(--c-dark-on-hi, #a9c6ff); }
.topic-hub-head p {
    margin: 0; max-width: 880px;
    font-size: 14.5px; line-height: 1.85;
    color: var(--c-dark-on-sub, #c3cce0);
}
.topic-hub-stats { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.topic-hub-stats span {
    font-size: 13px; line-height: 1; padding: 7px 13px;
    border-radius: 999px;
    color: var(--c-dark-on, #e4ebff);
    background: rgba(255, 255, 255, .1);
    border: 1px solid var(--c-dark-line, rgba(255, 255, 255, .14));
}
.topic-hub-stats b { color: #fff; }

.topic-hub-body { padding: 24px 44px 32px; }

/* ---- 筛选工具条 ---- */
.topic-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
    padding-bottom: 18px; margin-bottom: 24px;
    border-bottom: 1px solid var(--c-border, #e6ebf5);
}
.topic-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 380px; min-width: 0; }
.topic-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 15px; border-radius: 999px; cursor: pointer;
    font-size: 13.5px; line-height: 1; font-family: inherit;
    color: var(--c-text, #1a1a1a);
    background: var(--c-primary-light, #ecf2fe);
    border: 1px solid transparent;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.topic-chip b { font-weight: 600; color: var(--c-primary, #0052d9); }
.topic-chip:hover { border-color: var(--c-primary, #0052d9); color: var(--c-primary, #0052d9); }
.topic-chip.is-active {
    background: var(--c-primary, #0052d9);
    border-color: var(--c-primary, #0052d9);
    color: #fff;
}
.topic-chip.is-active b { color: #fff; }
.topic-chip:focus-visible { outline: 2px solid var(--c-primary, #0052d9); outline-offset: 2px; }

.topic-search { position: relative; display: flex; align-items: center; flex: 0 1 300px; min-width: 0; }
.topic-search svg {
    position: absolute; left: 14px; width: 16px; height: 16px;
    color: var(--c-text-mute, #8c8c8c); pointer-events: none;
}
.topic-search input {
    width: 100%; box-sizing: border-box;
    padding: 10px 14px 10px 38px;
    font-size: 13.5px; font-family: inherit;
    color: var(--c-text, #1a1a1a); background: #fff;
    border: 1px solid var(--c-border, #e6ebf5); border-radius: 999px;
}
.topic-search input::placeholder { color: var(--c-text-mute, #8c8c8c); }
.topic-search input:focus {
    outline: none;
    border-color: var(--c-primary, #0052d9);
    box-shadow: 0 0 0 3px rgba(0, 82, 217, .1);
}

/* ---- 分组 ---- */
.topic-group + .topic-group { margin-top: 30px; }
.topic-group { scroll-margin-top: 88px; }        /* 供 #topic-xxx 深链锚点 */
.topic-group-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.topic-group-head h3 {
    display: flex; align-items: center; gap: 9px; margin: 0;
    font-size: 18px; color: var(--c-dark, #0a1e4c);
}
.topic-count {
    font-size: 12.5px; font-weight: 600; line-height: 1;
    padding: 4px 9px; border-radius: 999px;
    color: var(--c-primary, #0052d9);
    background: var(--c-primary-light, #ecf2fe);
}
.topic-group-head p { margin: 0; font-size: 13.5px; color: var(--c-text-sub, #666); flex: 1 1 320px; min-width: 0; }

.topic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

/* ---- 卡片 ---- */
.topic-card {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 15px;
    background: #fff; border: 1px solid var(--c-border, #e6ebf5); border-radius: 13px;
    text-decoration: none; color: inherit;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.topic-card:hover {
    transform: translateY(-3px);
    border-color: var(--c-primary, #0052d9);
    box-shadow: 0 12px 28px rgba(10, 30, 76, .1);
}
.topic-card:focus-visible { outline: 2px solid var(--c-primary, #0052d9); outline-offset: 2px; }
.topic-ico {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-primary, #0052d9); background: var(--c-primary-light, #ecf2fe);
}
.topic-ico svg { width: 18px; height: 18px; }
.topic-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.topic-body b { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--c-dark, #0a1e4c); }
.topic-body em {
    font-style: normal; font-size: 12px; line-height: 1.5;
    color: var(--c-text-mute, #8c8c8c);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topic-go {
    flex: 0 0 auto; font-size: 14px; color: var(--c-primary, #0052d9);
    opacity: .4; transition: opacity .2s ease, transform .2s ease;
}
.topic-card:hover .topic-go { opacity: 1; transform: translateX(3px); }

/* 价格卡：整行铺开，把 4 个分档直接亮出来 */
.topic-card-wide { grid-column: 1 / -1; }
.topic-card-wide .topic-body em { white-space: normal; overflow: visible; }
.topic-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.topic-tier {
    font-size: 12px; line-height: 1; padding: 5px 10px; border-radius: 6px;
    color: var(--c-primary, #0052d9); background: var(--c-primary-light, #ecf2fe);
}

/* ---- 空态 / 页脚提示 ----
   ⚠ [hidden] 的 UA 规则优先级低于作者样式的 display，**必须显式补 display:none** */
.topic-card[hidden], .topic-group[hidden], .topic-none[hidden] { display: none; }
.topic-none {
    margin: 22px 0 0; padding: 20px;
    border-radius: 12px; text-align: center;
    font-size: 14px; line-height: 1.8;
    color: var(--c-text-sub, #666);
    background: var(--c-primary-light, #ecf2fe);
}
.topic-none a, .topic-hub-foot a { color: var(--c-primary, #0052d9); font-weight: 600; }
.topic-hub-foot {
    margin: 24px 0 0; padding-top: 20px;
    border-top: 1px solid var(--c-border, #e6ebf5);
    font-size: 13.5px; line-height: 1.8; color: var(--c-text-sub, #666);
}

/* ---------- 静态问答 ---------- */
.faq-static {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.faq-static-item {
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-radius: 14px;
    padding: 22px 24px;
}
.faq-static-item h4 {
    margin: 0 0 10px;
    font-size: 16px;
    color: var(--c-dark, #0a1e4c);
}
.faq-static-item p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: var(--c-text-soft, #6b7690);
}

/* ---------- 百科案例展示（按词条类型演示；2026-10-10 新增） ---------- */
/* 供 services-baike.html「百科案例展示」6 卡使用，结构由 baike_cases_block() 产出。
   底色：本节是浅灰 section ⇒ 卡片用 #fff 立起来（与 .why-card / .res-card 同款）。 */
.bk-case-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.bk-case {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-radius: 16px;
    padding: 24px 22px 22px;
}
.bk-case-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.bk-case-tag {
    display: inline-block;
    font-size: 12px;
    line-height: 1.4;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--c-accent, #0052d9);
    background: rgba(0, 82, 217, 0.08);
}
.bk-case-no {
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--c-text-mute, #8c8c8c);
}
.bk-case h3 {
    margin: 0 0 14px;
    font-size: 18px;
    line-height: 1.45;
    color: var(--c-dark, #0a1e4c);
}
.bk-case-row {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--c-text-soft, #6b7690);
}
.bk-case-row:last-child { margin-bottom: 0; }
.bk-case-row b {
    display: block;
    margin-bottom: 3px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--c-dark, #0a1e4c);
}

/* ---------- AI搜索优化服务页（`services-geo.html`；2026-10-10 按参考页框架重做） ----------
   ⚠ 前缀 `sg-` = services-geo，只在本页使用；不要与首页/专题页的 `.geo-*`
     （`assets/css/geo.css`，属手写页 `geo.html`）混用 —— 两套样式分属不同文件，
     同名会让维护者误判「改一处就两页都变」。
   ⚠ 本页区块底色严格白/灰交替，`.sg-precheck`（留资条）用浅渐变独立成段。
     2026-10-12 甲方要求把留资条上移到【四个变化】之后 ⇒ 现上邻 四个变化(灰 #F5F5F5)、
     下邻 可衡量指标(白)，故渐变**两端都取可见蓝调**（见下条注释）。 */
/* ⚠ `.svc-banner-cta` 现由 `banner(cta=…)` 调用；GEO 页的 banner 已按甲方要求**去掉按钮**
   ⇒ 本页不再输出该节点。**样式保留**，供其它服务页/将来复用（与 `.svc-grid` 同处理）。 */
.svc-banner-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: 26px;
}
/* ⚠ 渐变**上浅下也浅、但两端都保留明显蓝调**（`#e9f0ff → #d9e5ff`）：
   2026-10-12 上移后，本段上邻「四个变化」(灰 #F5F5F5)、下邻「可衡量指标」(纯白)。
   · 上沿取淡蓝 —— 与灰底拉开分界；
   · **下沿不能收成近白**（原 `#f6faff` 就是）—— 与下面的纯白几乎同色，分界会「消失」。
   ⇒ 两端都留蓝调，任何一侧邻白/邻灰都能看清边界（同首页「浅灰贴浅灰」那条教训）。 */
.sg-precheck { background: linear-gradient(180deg, #e9f0ff 0%, #d9e5ff 100%); }
.sg-note {
    margin: 22px 0 0;
    font-size: 13px;
    line-height: 1.8;
    color: var(--c-text-mute, #8c93a6);
}
.sg-note a { color: var(--c-accent, #f19500); font-weight: 600; }

/* 四个变化 */
.sg-adv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sg-adv {
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-radius: 16px;
    padding: 26px 22px;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.sg-adv:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.sg-adv-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    background: rgba(0, 82, 217, .08);
    color: var(--c-primary, #0052d9);
}
.sg-adv-icon svg { width: 22px; height: 22px; }
.sg-adv:nth-child(even) .sg-adv-icon {
    background: var(--c-accent-light, #fff4e0);
    color: var(--c-accent, #f19500);
}
.sg-adv h4 { font-size: 17.5px; font-weight: 700; margin: 0 0 9px; }
.sg-adv p { margin: 0; font-size: 13.5px; line-height: 1.82; color: var(--c-text-sub, #5a6785); }

/* 可衡量的指标 */
.sg-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sg-metric {
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-radius: 16px;
    padding: 24px 22px;
}
.sg-metric-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.sg-metric-head svg { width: 20px; height: 20px; flex: none; color: var(--c-primary, #0052d9); }
.sg-metric-head h4 { margin: 0; font-size: 16.5px; font-weight: 700; }
.sg-metric-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sg-metric-list li {
    font-size: 12.5px;
    line-height: 1.5;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--c-bg-soft, #f4f7ff);
    color: var(--c-text-sub, #5a6785);
}

/* 行业适配 */
.sg-ind-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sg-ind {
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-radius: 16px;
    padding: 24px 22px;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.sg-ind:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.sg-ind-top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.sg-ind-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    flex: none;
    background: rgba(0, 82, 217, .08);
    color: var(--c-primary, #0052d9);
}
.sg-ind-icon svg { width: 19px; height: 19px; }
.sg-ind-top h4 { margin: 0; font-size: 16.5px; font-weight: 700; }
.sg-ind-row {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--c-text-sub, #5a6785);
}
.sg-ind-row:last-child { margin-bottom: 0; }
.sg-ind-row b {
    display: block;
    margin-bottom: 3px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--c-dark, #0a1e4c);
}

/* 落地保障 + 团队陪跑 */
.sg-sup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sg-sup {
    background: #fff;
    border: 1px solid var(--c-border, #e6ebf5);
    border-radius: 18px;
    padding: 28px 26px;
}
.sg-sup h3 {
    margin: 0 0 20px;
    padding-bottom: 16px;
    font-size: 18.5px;
    font-weight: 800;
    border-bottom: 1px solid var(--c-border, #e6ebf5);
}
.sg-sup-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.sg-sup-item { display: flex; gap: 12px; }
.sg-sup-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    flex: none;
    background: rgba(0, 82, 217, .08);
    color: var(--c-primary, #0052d9);
}
.sg-sup-icon svg { width: 19px; height: 19px; }
.sg-sup-item b { display: block; font-size: 14.5px; font-weight: 700; margin-bottom: 5px; }
.sg-sup-item p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--c-text-sub, #5a6785); }

/* ---------- 响应式 ---------- */
@media (max-width: 1180px) {
    .sol-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .guarantee-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* GEO 服务页：4 列降到 2 列；「落地保障」两组卡片改为上下堆叠 */
    .sg-adv-grid, .sg-metric-grid, .sg-ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sg-sup-grid { grid-template-columns: 1fr; }
    /* ⚠ 必须写 `.svc-steps.sg-loop`（0,2,0）才能盖住桌面端那条同权重的 5 列规则：
       `.svc-steps`（0,1,0）的窄屏规则**权重更低，盖不住** —— 见 MEMORY「媒体查询权重打平」。
       不写这条，手机上会硬挤 5 列并横向溢出。 */
    .svc-steps.sg-loop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    .svc-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bk-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .loop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-steps.sg-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .topic-hub-head { padding: 32px 30px 28px; }
    .topic-hub-body { padding: 22px 30px 28px; }
}
@media (max-width: 768px) {
    .svc-banner-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .svc-banner-stat b { font-size: 20px; }
    .svc-grid, .svc-grid-3, .loop-grid, .res-grid, .pain-grid, .bk-case-grid,
    .svc-steps, .why-grid, .sol-grid, .faq-static { grid-template-columns: 1fr; }
    .svc-steps.sg-loop { grid-template-columns: 1fr; }
    .guarantee-grid { grid-template-columns: 1fr; }
    /* GEO 服务页：全部改单列；banner 双按钮整行堆叠 */
    .sg-adv-grid, .sg-metric-grid, .sg-ind-grid, .sg-sup-items { grid-template-columns: 1fr; }
    .sg-adv, .sg-metric, .sg-ind { padding: 20px 18px; }
    .sg-sup { padding: 22px 18px; }
    .svc-banner-cta { margin-top: 20px; gap: 12px; }
    .svc-banner-cta .btn { flex: 1 1 100%; }
    .sg-metric-head { margin-bottom: 12px; }
    /* 专题直达：单列；筛选条改为上下堆叠，避免窄屏横向溢出 */
    .topic-grid { grid-template-columns: 1fr; }
    .topic-hub-head { padding: 26px 20px 24px; }
    .topic-hub-head h2 { font-size: 22px; }
    .topic-hub-body { padding: 18px 20px 24px; }
    .topic-chips, .topic-search { flex: 1 1 100%; }
    .topic-group + .topic-group { margin-top: 24px; }
    /* 预检查询条（百科 / GEO 两页共用）：表单改上下堆叠，两个按钮各占一半（避免窄屏挤压） */
    .baike-query, .geo-query { padding: 24px 20px 22px; }
    .baike-query-head h3, .geo-query-head h3 { font-size: 21px; }
    .baike-query-head h3 span, .geo-query-head h3 span { display: block; margin: 6px 0 0; }
    .bq-form { flex-wrap: wrap; }
    .bq-field {
        flex: 1 1 100%;
        border-right: 1px solid var(--c-border, #e6ebf5);
        border-radius: 10px;
    }
    /* ⚠ 必须写 `.bq-field + .bq-field`（选择器权重 0,2,0）才能盖住桌面端那条
       `.bq-field + .bq-field { border-radius: 0 }` —— 后者权重同为 0,2,0 且在
       媒体查询之前，仅靠 `.bq-field { border-radius: 10px }` 是盖不住的。 */
    .bq-field + .bq-field { margin-top: 10px; border-radius: 10px; }
    .bq-btn { flex: 1 1 50%; margin-top: 12px; border-radius: 10px; }
    .bq-privacy { font-size: 12px; text-align: left; }
    .bq-checks { grid-template-columns: 1fr; gap: 14px; }
    .bq-result-tel { font-size: 12.5px; }
}
@media (max-width: 480px) {
    .svc-banner-stats { grid-template-columns: 1fr; }
    .svc-card { padding: 22px 18px 20px; }
    .svc-card .badge { top: 14px; right: 14px; }
    .topic-hub { border-radius: 18px; }
    .topic-hub-head { padding: 22px 16px 20px; }
    .topic-hub-head h2 { font-size: 19px; }
    .topic-hub-body { padding: 16px 16px 22px; }
    .topic-chip { font-size: 12.5px; padding: 8px 12px; }
    .topic-group-head h3 { font-size: 16px; }
    /* 免费词条预检：按钮整行，结果面板收边距 */
    .bq-btn { flex: 1 1 100%; }
    .bq-btn + .bq-btn { margin-left: 0; }
    .bq-result { padding: 20px 18px 16px; }
    .bq-result-name { font-size: 16px; }
    .bq-result-tel { padding: 10px 12px; font-size: 12.5px; }
    .bq-privacy { font-size: 11.5px; }
}