/* ==========================================================================
   mt_meitao · 建站服务商官网主题
   --------------------------------------------------------------------------
   设计语言：「白纸 / 白卡 / 一条蓝线」
     纯白底 + 极浅冷灰分区 + 近黑正文，强调色只有一档蓝（用于编号、价格、
     链接与主按钮悬停）。分隔靠 1px 浅灰线与大留白，不靠底色块；
     等宽字体只承担数字与编号，让报价单读起来像报表而不是广告。

     取舍说明：整站没有渐变、没有玻璃拟态、没有大图悬浮 —— 服务商的可信度
     来自信息密度与「敢把价格和周期写在页面上」，不来自装饰。

   令牌 → CSS 变量：所有颜色/尺寸都带字面量兜底，站长没改令牌时与本设计一致。
   ========================================================================== */

:root {
    --paper:  var(--mt-paper, #FFFFFF);        /* 页面白 */
    --paper2: var(--mt-paper-deep, #F6F7F9);   /* 分区浅灰 */
    --paper3: #EDEFF2;                         /* 表头 / 输入底 */
    --ink:    var(--mt-ink, #0B0E11);          /* 近黑正文 */
    --ink2:   #454B53;
    --muted:  #79818A;
    --brand:  var(--mt-brand, #1A56DB);        /* 唯一强调色 */
    --brand2: var(--mt-brand-deep, #1442A8);
    --deep:   var(--mt-deep, #0C1015);         /* 深色区 */
    --deep2:  #06090C;                         /* 页脚 */
    --line:   var(--mt-line, #E9EBEE);
    --line2:  #DCE0E5;
    --r:      var(--mt-radius, 8px);
    --wrap:   var(--mt-wrap, 1200px);

    /* 阴影只在「浮起来的小块」上用：白底上阴影过重会脏，全部压到 6% 以内 */
    --sh-sm: 0 1px 2px rgba(11, 14, 17, .04);
    --sh-md: 0 10px 30px -22px rgba(11, 14, 17, .30);

    /* 页头顶条渐变：只在 .topbar / .hd 的伪元素上用，写一处方便整体换色 */
    --brandbar: linear-gradient(90deg, #1A56DB 0%, #3F72E8 46%, #6E97F0 78%, #9FBBF7 100%);

    /* ---------- 深色首屏 ----------
       首页首屏（含首页页头）是整站唯一的深色区，其余页面仍是白纸。
       这组令牌只给 `.hero` / 首页 `.hd` 用；.hero 里会把 --ink/--ink2/--muted/
       --line/--line2/--paper2 覆盖成下面这几档，于是「报价单 / 看板 / 答案卡」
       里的 var() 全部自动跟着走，不必逐个选择器改色。
       例外只有三处写死白的地方（卡片底 #FFF、看板圆点 #FFF、角标 #EAF0FF），
       在下方深色段里点名覆盖 —— 换色时漏掉它们就会出现「白卡压深底」。 */
    --dk-bg:     #0A101D;                       /* 首屏最底一档 */
    --dk-bg2:    #0E1729;                       /* 首屏上半（蓝辉光更亮） */
    --dk-ink:    #F2F6FC;                       /* 深色区正文 */
    --dk-ink2:   #C4CEDF;                       /* 深色区次级 */
    --dk-muted:  #93A1B6;                       /* 深色区注释（实测 ≥4.6:1） */
    --dk-line:   rgba(255, 255, 255, .11);
    --dk-line2:  rgba(255, 255, 255, .18);
    --dk-panel:  rgba(255, 255, 255, .055);     /* 表头 / 输入底 */
    --dk-panel2: rgba(255, 255, 255, .032);     /* 卡片里更浅的一档 */
    --dk-blue:   #4C8DFF;                       /* 深底上的强调蓝（比 brand 亮一档） */

    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --serif: "Songti SC", "Noto Serif SC", Georgia, "Times New Roman", serif;

    /* 页头高度：首页的透明页头靠这两个值把首屏顶到页面最顶端（见文件末尾
       「首页页头」段）。桌面 = 信息条 34 + 1px 下边线 + 主条 72；
       手机端信息条 display:none、主条 62（在 767 断点里覆盖）。
       只在这里写一次，别在负 margin 那里再写死数字。 */
    --topbar-h: 35px;
    --hd-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.72;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand2); }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -0.015em; font-weight: 700; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--brand); color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 26px; }

/* 第三方浮窗避让（只在检测到插件容器时生效，没装插件的站点零影响）
   --------------------------------------------------------------------------
   `mt_service_sidebar` 的 #mtss-root（152px，贴视口右侧）与多语言询盘 dock 的
   .mtlh-dock（52px，贴视口左侧）都是 position:fixed 且不占位。1200 版心在
   1024–1560 这个「笔记本主流宽度」区间几乎没有左右余量，浮窗会直接压住正文：
   首屏报价单的右两列、数据带第一位数字都被盖住（实测 1240×900）。
   大屏（≥1560）两侧本来就留白，不需要让位，所以只在会重叠的区间生效。
   站长把浮窗收起或挪到别处后，:has() 检测不到容器，规则自动失效。 */
@media (min-width: 1024px) and (max-width: 1559px) {
    /* 版心要在「视口减去浮窗」的剩余宽度里居中，不能用 margin-left:0 ——
       1440 下那样会直接贴到视口左边，左 0px、右 240px，整页看着像歪了。
       width 用 calc 而不是 100%：100% 取父宽，再加 margin 会溢出视口。 */
    /* 右让 188，剩下的由 margin-left:auto 吸收：1440 下版心落在 52–1252，
       正好停在浮窗左边，而不是贴到视口左边缘 */
    body:has(#mtss-root) .wrap {
        width: auto; margin-left: auto; margin-right: 188px;
    }
    body:has(.mtlh-dock) .wrap { padding-left: 78px; }
}
/* 窄一点的笔记本：剩余宽度不足以放下 1200 版心，再收一档，留出两侧呼吸 */
@media (min-width: 1024px) and (max-width: 1319px) {
    body:has(#mtss-root) .wrap { max-width: calc(100% - 260px); }
    /* 让位后版心只剩 ~965px，六项导航按原字号会把每项挤成两行 —— 收内边距和字号 */
    body:has(#mtss-root) .hd__in { gap: 16px; }
    body:has(#mtss-root) .nav__a { padding: 8px 9px; font-size: 14px; }
    /* 首屏 54px 的标题在 ~430px 的左栏里放不下第二行，会甩出一个「接」字单行 ——
       只在浮窗占了版心的情况下按视口比例降一档，两行都能整行放下 */
    body:has(#mtss-root) .hero__h { font-size: clamp(30px, 3.55vw, 44px); }
}

/* 等宽数字：报价、数量、周期一律用它，避免「1」与「7」宽度不一 */
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.skip {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--ink); color: #fff; padding: 10px 16px;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- 按钮 ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 12px 22px;
    border: 1px solid var(--ink); border-radius: var(--r);
    font-size: 15px; font-weight: 600; line-height: 1.4;
    cursor: pointer; transition: background .18s, color .18s, border-color .18s, transform .18s;
    background: transparent; color: var(--ink); white-space: nowrap;
}
.btn--primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn--line { border-color: var(--line2); color: var(--ink); }
.btn--line:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.btn--light { background: #FFFFFF; border-color: #FFFFFF; color: var(--ink); }
.btn--light:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn--sm { padding: 8px 16px; font-size: 14px; }
.btn--block { width: 100%; }

.tlink {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 600; color: var(--brand2);
    border-bottom: 1px solid currentColor; padding-bottom: 2px;
}

/* ---------- 顶部信息条 ----------
   压在页头之上的一条浅灰带：公司全称 + 首次答复时效。
   只为给页头「垫一层信息」，不做装饰；滚动时先滚走，不占视口。 */
.topbar {
    position: relative;
    background: var(--paper2); border-bottom: 1px solid var(--line);
}
/* 整页的起点：4px 品牌色条压在信息条上沿。手机端信息条不显示，
   同一条改由 .hd 承担，颜色只有 --brandbar 一个来源。 */
.topbar::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: var(--brandbar);
}
.topbar__in {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    height: 34px; font-size: 12.5px; color: var(--muted);
}
.topbar__co { letter-spacing: .01em; }
.topbar__rt { display: inline-flex; align-items: center; gap: 8px; flex: none; }
/* 一个小蓝点：把「时效」从一句灰字变成一个可被扫到的信号 */
.topbar__dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
    box-shadow: 0 0 0 3px rgba(26, 86, 219, .12);
}

/* ---------- 页头 ----------
   页头是整页唯一「横向贯通」的一条，如果只是一排灰字贴白底，
   会显得比正文还轻。这里用四处把重量补回来：
   顶部 4px 品牌色条、导航居中（不留右侧大片空）、导航激活态的蓝线、
   按钮右侧的小箭头。都不加底色块，保持白纸基调。 */
.hd {
    position: sticky; top: 0; z-index: 60;
    background-color: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .2s ease;
}
/* 品牌色条：桌面/平板由 .topbar 承担，这里只在信息条不显示的手机端补位，
   否则会出现「蓝条压蓝条」，或者滚动后顶条消失。 */
.hd::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: var(--brandbar);
}
@media (min-width: 768px) {
    .hd::before { display: none; }
}
/* 滚动后：60% 白的毛玻璃
   --------------------------------------------------------------------------
   底色是 rgba(255,255,255,.6) —— 对下面内容的遮蔽率 60%，仍能看见色块在动，
   但经过的字被 blur(22px) 糊掉，不会和导航文字抢读。
   模糊比不透明度更重要：16px 时首屏那行 40px 的标题还能看出字形的轮廓，
   22px 才真正糊成一团（不透明度没变，只是「看不出写的是什么」）。
   这个 .6 是「按可读性定出来的最低值」，不是随手取的：
   白 60% 压在纯黑内容上，合成色只有 #999（L≈0.32），
   15px 的未激活导航色 --ink2 #454B53 在它上面只剩 3.4:1，不到 AA 的 4.5。
   所以滚动态把导航文字单独加深到 #2A303A（同上背景 4.6:1），
   而不是把整条再提白 —— 提白就退回「实心白板」，那正是上一版被否掉的样子。
   ⚠️ Safari 仍认 -webkit- 前缀，两条必须一起写，否则老版本 Safari 是纯透明。
   ⚠️ 不要给它加 background transition：首页从「全透明 + 白字」切到这一档时
      文字同时翻深，带了过渡就会出现「深字压在半透明深底」的不可读瞬间。 */
.hd.is-stuck {
    background-color: rgba(255, 255, 255, .6);
    -webkit-backdrop-filter: saturate(1.2) blur(22px);
    backdrop-filter: saturate(1.2) blur(22px);
    border-bottom-color: rgba(17, 24, 39, .08);
    box-shadow: 0 12px 26px -22px rgba(11, 14, 17, .55), 0 1px 0 rgba(11, 14, 17, .04);
}
/* 二级面板展开时页头回到纯白
   --------------------------------------------------------------------------
   面板是 #FFF 的内容层。页头若停在 60% 白，两者之间会出现一条肉眼可辨的
   灰色断层 —— 看上去像两块不同的纸拼在一起，且导航条显得「脏」。
   展开是用户主动把内容拉下来的动作，这一瞬间页头不需要再透任何氛围。
   手机抽屉同理：它是 fixed 的纯白浮层，从页头底下长出来，页头那 72px 也得跟着白，
   否则抽屉顶上永远压着一条灰带（截图验过，像没擦干净的蒙版）。
   只在滚动态成立：顶部透明态与 #FFF 面板本来就不挨着（面板从页头底边长出来）。 */
.hd:has(.nav__mega:hover),
.hd:has(.nav__mega:focus-within),
.hd:has(.nav.is-open) {
    background-color: #FFFFFF;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* 滚动态的导航文字单独加深：.6 白的平均合成亮度撑不住 --ink2 那一档灰。
   取 #2A303A 而不是更浅的 #3A414B：纯黑底（图片/深色页脚经过页头）时，
   .6 白的合成色只有 #999（L≈0.32），15px 常规字要 ≥4.5:1 就必须压到这个深度
   （实测 4.6:1；#2E353F 是 4.3:1，刚差一点）。 */
.hd.is-stuck .nav__a { color: #2A303A; }
.hd.is-stuck .nav__a:hover { color: #111827; background: rgba(17, 24, 39, .05); }
.hd.is-stuck .nav__a.is-current { color: #111827; }
.hd.is-stuck .lang-dropdown > summary { color: #2A303A; }
.hd__in { display: flex; align-items: center; gap: 20px; height: 72px; }

.logo { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.logo img { height: 30px; width: auto; }
/* LOGO 图：主题设置里传过就用它，没传则回落到「系统设置 → 站点信息」已上传的那张，
   两处都空才走下面这套设计字标。
   上传的图常见是白底不透明 PNG —— 直接在浅色页头上放，白底会顶出一块白方块。
   浅色态用 multiply 把白底与背景相乘（白 × 底 = 底，白底等于消失，字形与品牌色保留）；
   深色首屏 / 深色页脚改用 invert + screen 反白（白底反成黑，screen 下不可见；
   深色字反成亮字，hue-rotate 把蓝字从反相后的橙拉回蓝）。透明底彩色 LOGO 可到
   「主题设置 → 深色页头自动反白 LOGO」关闭这套处理。 */
.logo__img { mix-blend-mode: multiply; }
.logo__mark {
    position: relative; width: 28px; height: 28px; flex: none;
    background: var(--ink); border-radius: 3px; display: block;
}
.logo__mark i {
    position: absolute; right: 5px; top: 5px;
    width: 9px; height: 9px; background: var(--brand); display: block;
}
.logo__txt { font-size: 20px; font-weight: 700; letter-spacing: .01em; }

/* 导航在整条里居中：靠左排会在右侧甩出一大片空，页头就只剩「左边一堆字」。 */
.nav { display: flex; align-items: center; justify-content: center; gap: 2px; flex: 1 1 auto; }
.nav__a {
    position: relative; padding: 9px 12px; font-size: 15px; color: var(--ink2); border-radius: var(--r);
    white-space: nowrap;
    transition: color .15s, background .15s;
}
/* 悬停与当前项都在字下画 2px 蓝线（从中间展开），不用整块底色 */
.nav__a::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
    background: var(--brand); transform: scaleX(0); transform-origin: center;
    transition: transform .22s ease;
}
.nav__a:hover { color: var(--ink); background: var(--paper2); }
.nav__a:hover::after, .nav__a.is-current::after { transform: scaleX(1); }
.nav__a.is-current { color: var(--ink); font-weight: 600; }
.nav__tools { display: none; }

/* ---------- 服务目录：悬停展开的二级面板 ----------
   --------------------------------------------------------------------------
   入口本身就是 /services 页面，面板是「同一份数据的分组预览」：
   6 条业务线各一列，列内是组内条目 + 参考价，底部一条汇总 + 全量入口。
   数据来自 themeData.services.groups（与 /services 页、27 个详情页同源）。

   定位：面板挂在 header 上，而不是挂在导航项上。
   `position: absolute` 找的是最近的定位祖先 —— `.nav__mega` 特意不设 position，
   于是参照 `.hd`（sticky 本身是定位元素）：`top: 100%` 永远等于页头底边，
   面板横向相对视口居中（宽 1200 = 版心），不管「服务目录」排在导航第几位、
   也不管 topbar 还在不在。挂在导航项上会跟着项的左边界跑，窄屏直接出界。
   悬停热区用 `.nav__mega__a::after` 补 —— 链接底到页头底还有十几像素，
   鼠标经过那里不能算「离开」。 */
.nav__mega { position: static; }
.nav__mega__a { position: relative; display: inline-flex; align-items: center; gap: 6px; }
/* 悬停热区：链接底到页头底还有十几像素，鼠标经过那里不能算「离开」。
   用 ::before 而不是 ::after —— ::after 是 .nav__a 的「2px 蓝下划线」，
   两者抢同一个伪元素会互相覆盖。 */
.nav__mega__a::before {
    content: ""; position: absolute; left: -18px; right: -18px; top: 100%; height: 44px;
}
/* 面板展开时入口项：不再给 hover 灰底（那块灰压在深色首屏上像脏点），
   改成「变色 + 蓝下划线」，与面板顶边那道蓝线接上 */
.nav__mega:hover > .nav__mega__a,
.nav__mega:focus-within > .nav__mega__a {
    background: transparent; color: var(--ink);
}
.nav__mega:hover > .nav__mega__a::after,
.nav__mega:focus-within > .nav__mega__a::after { transform: scaleX(1); }
.nav__cr {
    display: block; width: 5px; height: 5px; flex: none; margin-top: -3px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); opacity: .5;
    transition: transform .2s ease, opacity .2s ease;
}
.nav__mega:hover .nav__cr,
.nav__mega:focus-within .nav__cr { transform: rotate(225deg); margin-top: 2px; opacity: 1; }

/* 面板背景通栏（贴左右视口边），内容仍落在版心网格上
   --------------------------------------------------------------------------
   以前整块是「一张浮在页面上的卡片」：宽 min(1200px, 100vw-52px) 居中、圆角、
   四周留出深色底 —— 在宽屏上会露出左右两条窄背景，像一张没铺满的桌布。
   现在背景改成通栏（left/right: 0，挂在 .hd 上，宽度 = 视口宽），6 列改用
   max-width: var(--wrap) + margin:auto 居中，于是**白底铺满整屏、内容仍与
   logo / 正文同一条左边界**（.wrap 也是 1200 + 26px 内边距）。
   ⚠️ 通栏后不能留圆角和左右描边：圆角会切在视口边上，左右 1px 线会在屏幕
      最外沿画一条竖线。只留下边线。
   ⚠️ 定位必须挂在 .hd 上（.nav__mega 特意 position: static），否则 100% 是
      导航项宽而不是视口宽，通栏会失效。 */
.mega {
    position: absolute; top: 100%; left: 0; right: 0;
    transform: translateY(-8px);
    background: var(--paper);
    border: 0; border-bottom: 1px solid var(--line2);
    box-shadow: 0 40px 80px -40px rgba(11, 14, 17, .42), 0 3px 10px rgba(11, 14, 17, .05);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 90;
}
.mega::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, var(--brand) 0%, rgba(26, 86, 219, .4) 42%, transparent 72%);
}
.nav__mega:hover .mega,
.nav__mega:focus-within .mega {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
}
/* 内容宽度交给模板上的 .wrap 类：面板背景通栏，但 6 列与底栏文字回到站点版心。
   不在这里写 max-width —— `.wrap` 已经带了「宽屏 1200 居中 / 右侧有客服浮窗时
   左移让位」整套逻辑，抄一遍就会有两份事实源，浮窗一装就对不齐。
   这里只补纵向内边距（.wrap 的 padding 是 0 26px，横向那 26 保持不动）。 */
.mega__cols {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px 20px; padding-top: 24px; padding-bottom: 20px;
}
.mega__col { min-width: 0; }
/* 组标题：序号 + 名称 + 条数徽章。徽章做成等宽小圆片，6 列标题能一眼对齐。 */
.mega__gr {
    display: flex; align-items: center; gap: 7px;
    padding: 0 0 10px; margin-bottom: 8px;
    border-bottom: 1px solid var(--line);
    font-size: 13.5px; font-weight: 700; color: var(--ink);
    transition: color .14s;
}
.mega__gr b { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--brand); }
.mega__gr em {
    margin-left: auto; flex: none; font-style: normal;
    font-family: var(--mono); font-size: 10px; color: var(--muted);
    background: var(--paper3); border-radius: 20px; padding: 1px 6px; line-height: 1.5;
}
.mega__gr:hover { color: var(--brand2); }
.mega__list { display: grid; gap: 1px; }
/* 条目：名称一行、参考价一行小字。两行而不是并排 —— 8 个汉字的条目名
   并排放价格会在 170px 的列里被压成省略号，宁可换行。 */
.mega__list a {
    display: block; padding: 6px 8px; margin-left: -8px; border-radius: 4px;
    transition: background .14s, color .14s;
}
.mega__list a:hover { background: var(--paper2); }
.mega__nm {
    display: block; font-size: 13px; color: var(--ink2); line-height: 1.45;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mega__list a:hover .mega__nm { color: var(--brand2); }
.mega__pr {
    display: block; font-style: normal; font-family: var(--mono);
    font-size: 10.5px; color: var(--muted); letter-spacing: -.01em; line-height: 1.5;
}
/* 底栏：底色通栏（否则两边断在版心处），文字仍用 .wrap 对齐 6 列
   —— 底色挂在外层、对齐挂在内层，是这里唯一能两者兼得的结构。 */
.mega__ft {
    border-top: 1px solid var(--line); background: var(--paper2);
}
.mega__ft__in {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding-top: 12px; padding-bottom: 12px;
}
.mega__ftn { font-size: 12px; color: var(--muted); min-width: 0; }
.mega__all {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    font-size: 13px; font-weight: 600; color: var(--brand);
}
.mega__all i { font-style: normal; transition: transform .16s; }
.mega__all:hover { color: var(--brand2); }
.mega__all:hover i { transform: translateX(3px); }

.hd__end { display: flex; align-items: center; gap: 12px; flex: none; }
/* 按钮右侧的小箭头：hover 时沿 45° 方向探出 2px，比整块变色克制 */
.hd__end .btn::after {
    content: ""; width: 6px; height: 6px; flex: none;
    border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .18s ease;
}
.hd__end .btn:hover::after { transform: rotate(45deg) translate(2px, -2px); }

.nav__toggle {
    display: none; width: 40px; height: 40px; margin-left: auto;
    background: none; border: 1px solid var(--line2); border-radius: var(--r);
    padding: 0; cursor: pointer; position: relative;
}
.nav__toggle span {
    position: absolute; left: 9px; width: 20px; height: 1.5px; background: var(--ink);
    transition: transform .2s, opacity .2s;
}
.nav__toggle span:nth-child(1) { top: 13px; }
.nav__toggle span:nth-child(2) { top: 19px; }
.nav__toggle span:nth-child(3) { top: 25px; }
.nav--open .nav__toggle span:nth-child(1),
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* 语言切换器（核心输出 <details class="lang-dropdown"> + <svg class="lang-caret">）
   --------------------------------------------------------------------------
   核心的 caret 只有 viewBox 没有宽高，主题必须自己给尺寸 —— 否则 SVG 会按
   默认 300×150 撑成一个巨大的箭头（这是本主题第一次截图就踩到的坑）。 */
.lang-switcher { position: relative; font-size: 13.5px; }
.lang-dropdown { position: relative; }
.lang-dropdown > summary {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 11px; border: 1px solid var(--line2); border-radius: var(--r);
    background: none; cursor: pointer; font-size: 13.5px; color: var(--ink2);
    list-style: none; user-select: none;
}
.lang-dropdown > summary::-webkit-details-marker { display: none; }
.lang-dropdown > summary:hover { border-color: var(--brand); color: var(--brand2); }
.lang-caret { width: 10px; height: 6px; flex: none; display: block; }
.lang-menu {
    position: absolute; right: 0; top: calc(100% + 6px); min-width: 160px; z-index: 70;
    background: var(--paper); border: 1px solid var(--line2); border-radius: var(--r);
    padding: 6px; box-shadow: 0 10px 30px rgba(11, 14, 17, .06);
}
.lang-menu a { display: block; padding: 7px 10px; font-size: 13.5px; border-radius: 1px; }
.lang-menu a:hover { background: var(--paper2); }
.lang-menu a.active { color: var(--brand2); font-weight: 600; }

/* ---------- 首屏轮播（深色） ---------- */
.hero {
    position: relative; padding: 0; overflow: hidden;
    border-bottom: 1px solid var(--dk-line);
    /* 深色覆盖：把通用令牌在这里换一档，报价单 / 看板 / 答案卡内部的
       var(--ink|--ink2|--muted|--line|--line2|--paper2|--paper3) 全部跟着变，
       不需要逐个选择器改色 —— 这是「一个事实源」的做法，少写几十条规则。
       ⚠️ 反作用：`.btn--primary` 用 var(--ink) 作底色，覆盖后会变成浅底白字，
       所以首屏按钮在下面单独按蓝色覆盖；`.quote__tb tfoot` 同理（见深色段）。 */
    --ink:     var(--dk-ink);
    --ink2:    var(--dk-ink2);
    --muted:   var(--dk-muted);
    --line:    var(--dk-line);
    --line2:   var(--dk-line2);
    --paper2:  var(--dk-panel2);
    --paper3:  var(--dk-panel);

    /* ---------- 右栏三张卡共用的「实心深面板」 ----------
       上一版三张卡都是「6% 白玻璃 + 3% 白渐变」，压在深蓝底上边界几乎读不出来，
       卡和背景糊成一片 —— 这是本轮「缺对比」的根因：玻璃拟态靠背景的明暗差吃
       到对比，而这里的背景本身已经是一块均匀深蓝，没有可透的东西。
       换成比背景亮一档的实心面（#1A2C49 → #0F1B2F）+ 17% 白边 + 顶部内高光，
       卡才真正从背景里「立」起来；单一事实源，三张卡都引用这三个变量。 */
    --card-bg: linear-gradient(180deg, #17294A 0%, #11203A 56%, #0E1A2E 100%);
    --card-bd: rgba(255, 255, 255, .17);
    --card-sh: 0 44px 90px -44px rgba(0, 0, 0, .98), 0 2px 12px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .13);
    /* 卡内「凹槽」：问句框、进度块、脚注这类需要沉下去的小块。
       卡片变亮之后，原先 3.2% 白的 --paper2 贴在 #1A2C49 上等于没颜色，
       必须改成压暗，否则这些块会「浮」在卡体里，读起来是脏点不是结构。 */
    --card-sink: rgba(6, 11, 21, .45);

    background: var(--dk-bg);
    color: var(--dk-ink);
}
/* 背景：深色「蓝图稿纸」—— 只留光，不留网格
   --------------------------------------------------------------------------
   白底那版是「一张可以逐条核对的交付文档」，深色这版的语义不变，只是把纸换成
   深色图纸：顶部一束蓝辉光从正上方打下来（呼应标题所在位置），四周留极淡的
   冷蓝光斑。
   层级：.hero__bg（底色 + 三束光）→ .hero__glow（可位移光斑）
        → ::after（斜纹楔角）。
   ⚠️ 原先还有一层「17px 点阵 + 170px 粗格」，已整体删除：深底上那层网格会
   读成一张坐标纸，和报价单自身的表线叠在一起，视线被切成一个个小格子；
   去掉之后层次全部由光来承担 —— 光只减弱对比、不切割版面，报价单才是
   首屏里唯一有「线」的东西。 */
.hero__bg {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
    background:
        radial-gradient(1180px 560px at 50% -22%, rgba(37, 99, 235, .34), transparent 62%),
        radial-gradient(820px 420px at 92% 4%, rgba(56, 189, 248, .12), transparent 68%),
        radial-gradient(760px 380px at 2% 108%, rgba(37, 99, 235, .11), transparent 72%),
        linear-gradient(180deg, var(--dk-bg2) 0%, #0B1526 44%, var(--dk-bg) 100%);
}
/* 斜纹楔角：115° 细斜纹，只在右上与左下两块出现（径向遮罩收边，不会切出生硬直边）。
   深底上斜纹的作用是「给出光的方向」，所以用与辉光同色的浅蓝，不用白色。
   去掉网格后它是背景里唯一残留的纹理，透明度压到 5.5% —— 只在色带边缘隐约
   可辨，凑近才看得出，不参与构图。 */
.hero__bg::after {
    content: ""; position: absolute; inset: -10%;
    background-image: repeating-linear-gradient(115deg, rgba(147, 197, 253, .055) 0 1px, transparent 1px 9px);
    -webkit-mask-image:
        radial-gradient(46% 52% at 96% 4%, #000, transparent 74%),
        radial-gradient(40% 46% at 2% 104%, #000, transparent 76%);
    mask-image:
        radial-gradient(46% 52% at 96% 4%, #000, transparent 74%),
        radial-gradient(40% 46% at 2% 104%, #000, transparent 76%);
}

/* 冷光：一块比分屏大得多的径向渐变，按帧位移而不是换 background
   （换 background 是瞬切，位移才有「光跟着走」的连续感）。
   深色底上这层比白底要亮一档 —— 同样是 13% 的蓝，压在 #0A101D 上几乎看不出，
   压在 #FFF 上却很明显。 */
.hero__glow {
    position: absolute; top: -34%; left: 18%; width: 78%; height: 178%;
    background: radial-gradient(closest-side, rgba(59, 130, 246, .30), rgba(59, 130, 246, 0) 72%);
    transition: transform 1.1s cubic-bezier(.32, .72, .3, 1);
    will-change: transform;
}
.hero[data-slide="0"] .hero__glow { transform: translate3d(10%, 0, 0); }
.hero[data-slide="1"] .hero__glow { transform: translate3d(-4%, 8%, 0); }
.hero[data-slide="2"] .hero__glow { transform: translate3d(16%, -6%, 0); }

/* 减弱动效时不让光斑跟着帧位移：这类用户点的就是「别动」，
   直接换位比长过渡更不刺激（自动播放本来也会被脚本停掉）。 */
@media (prefers-reduced-motion: reduce) {
    .hero__glow { transition: none; }
}

/* 三屏叠在同一格：高度取最高者，切换不塌陷、不跳动 */
.hero__stage { position: relative; display: grid; }
.hero__s {
    grid-area: 1 / 1; padding: 60px 0 6px;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px);
    transition: opacity .45s ease, transform .45s ease, visibility .45s;
}
.hero__s.is-on { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
/* 无 JS 兜底：脚本接管前第一屏始终可见，其余不占位 */
.hero__stage:not(.is-ready) .hero__s:first-child { opacity: 1; visibility: visible; transform: none; }
.hero__stage:not(.is-ready) .hero__s:not(:first-child) { display: none; }

.hero__in {
    display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: 58px; align-items: center;
}
/* grid 子项默认 min-width:auto，报价单里的等宽金额会把它顶宽，整页出现横向滚动 */
.hero__in > * { min-width: 0; }
/* 右栏面板不设最小高度：stage 高度已由最高屏兜住，写死高度只会让
   第三屏的答案卡底部多出一段空白 */
.hero__in > aside { display: flex; flex-direction: column; }

/* 序号 + 分档名：等宽字体承担编号，和报价单是同一套语言 */
.hero__k {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted);
}
/* 深底上 #1A56DB 只有 3.4:1，小字号会糊；换成亮一档的 --dk-blue（5.6:1） */
.hero__k b { color: var(--dk-blue); font-weight: 700; font-size: 12px; }
.hero__k i { display: block; width: 26px; height: 1px; background: var(--line2); }

.hero__h {
    font-size: clamp(34px, 4.2vw, 54px); line-height: 1.1; letter-spacing: -0.032em;
    margin: 16px 0 0; font-weight: 700;
}
/* 断句的第二个短句走品牌蓝：深底上白字两行会糊成一块，蓝一行白一行才分得开
   （这是白底版沿用下来的做法，深底下把颜色提亮一档即可） */
.hero__h em { display: block; font-style: normal; color: var(--dk-blue); }
.eyebrow {
    display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--brand2);
    padding-bottom: 10px;
}
.lead {
    margin-top: 22px; font-size: 17px; line-height: 1.8; color: var(--ink2);
    max-width: 34em;
}
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* 首屏按钮：深色底上必须换成「蓝底 / 描边」两档
   --------------------------------------------------------------------------
   通用 .btn--primary 是 `background: var(--ink)`（白纸上的近黑实心按钮），
   而 .hero 把 --ink 换成了浅色 —— 不覆盖就会出现「浅底白字」的隐形按钮。
   主按钮用品牌蓝（与页头蓝条、标题强调同一色系），次按钮只留一条浅描边，
   两者权重差靠色块而不是靠字号。 */
.hero__btns .btn {
    border-radius: 6px; padding: 13px 24px; font-size: 15px; font-weight: 600;
}
.hero__btns .btn--primary {
    background: #2563EB; border-color: #2563EB; color: #FFFFFF;
    box-shadow: 0 10px 26px -14px rgba(37, 99, 235, .9);
}
.hero__btns .btn--primary:hover {
    background: #3B82F6; border-color: #3B82F6; color: #FFFFFF;
}
.hero__btns .btn--line {
    background: rgba(255, 255, 255, .055); border-color: rgba(255, 255, 255, .26); color: var(--dk-ink);
}
.hero__btns .btn--line:hover {
    background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .42); color: #FFFFFF;
}
.hero__note {
    margin-top: 18px; font-size: 13px;
    /* 用 .hero 作用域内的 --muted（见 .hero 注释），不再单独写死颜色：
       底色一改，这里跟着走，不会出现「改了底色忘了改字色」。 */
    color: var(--muted);
    padding-left: 14px; border-left: 2px solid var(--dk-blue);
}

/* ---------- 首屏控制栏 ---------- */
.hero__ctrl {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    gap: 16px; border-top: 1px solid var(--line);
}
.hero__tabs { display: flex; align-items: stretch; margin-left: -22px; }
.hero__tab {
    position: relative; display: flex; align-items: baseline; gap: 9px;
    padding: 17px 22px; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 13.5px; color: var(--muted);
    transition: color .2s;
}
.hero__tab:hover { color: var(--ink2); }
.hero__tab.is-on { color: var(--ink); font-weight: 600; }
.hero__tab:focus-visible { outline: 2px solid var(--dk-blue); outline-offset: -3px; }
.hero__tn { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; }
.hero__tab.is-on .hero__tn { color: var(--dk-blue); font-weight: 700; }
.hero__tab::after {
    content: ""; position: absolute; left: 22px; right: 22px; bottom: -1px; height: 1px;
    background: var(--line);
}
.hero__pb {
    position: absolute; left: 22px; right: 22px; bottom: -1px; height: 2px;
    background: var(--dk-blue); transform: scaleX(0); transform-origin: left center;
}
.hero__tab.is-on .hero__pb { animation: heroBar var(--hero-dur, 6000ms) linear forwards; }
.hero.is-paused .hero__pb,
.hero.is-paused .hero__tab.is-on .hero__pb { animation-play-state: paused; }
@keyframes heroBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 首屏入场：四层依次落定
   --------------------------------------------------------------------------
   首屏原来只有「整屏 450ms 淡入」—— 文字是一次性整体浮现的，读起来像一张
   静态海报被切了一下，没有任何「内容在展开」的感觉。这里把每一屏拆成几层
   错开：小标签 → 标题 → 说明 → 按钮 / 备注，右侧面板晚一拍到位。
   位移只有 10px，时长 .52s —— 目的是让人感到「落定」，不是表演。

   为什么作用在子元素而不是 .hero__s 本身：后者负责整屏的显隐与叠放（
   opacity/visibility/transform 三件一起切），再叠一层位移会互相拖；
   内容层单独动，两层互不干扰。

   ⚠️ 每次切帧都会重放：is-on 从 A 换到 B 时，B 的子元素重新挂上 animation。
      这是有意的 —— 切帧时内容跟着落定，比整块硬切更像「翻页」。
      若哪天嫌它频繁，把下面这段整块删掉即可，其余动效不受影响。
   ⚠️ 必须放在 prefers-reduced-motion: no-preference 里：关掉动效的用户
      不该看到任何位移。 */
@media (prefers-reduced-motion: no-preference) {
    .js .hero__s.is-on .hero__txt > * {
        animation: heroRise .52s cubic-bezier(.22, .68, .28, 1) both;
    }
    .js .hero__s.is-on .hero__txt > :nth-child(2) { animation-delay: .06s; }
    .js .hero__s.is-on .hero__txt > :nth-child(3) { animation-delay: .13s; }
    .js .hero__s.is-on .hero__txt > :nth-child(4) { animation-delay: .20s; }
    .js .hero__s.is-on .hero__txt > :nth-child(5) { animation-delay: .27s; }
    .js .hero__s.is-on .hero__in > aside {
        animation: heroRise .6s cubic-bezier(.22, .68, .28, 1) .11s both;
    }
}
@keyframes heroRise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.hero__nav { display: flex; align-items: center; gap: 8px; }
.hero__cnt {
    font-family: var(--mono); font-size: 12px; color: var(--muted);
    letter-spacing: .05em; margin-right: 6px;
}
.hero__cnt b { color: var(--ink); font-weight: 600; }
/* 圆形翻页按钮：白底版是「白底 + 浅描边」，深底上整颗变透明、只留一道细边，
   悬停时填成主按钮那档蓝 —— 与左侧按钮形成同一套交互语言 */
.hero__arw {
    display: inline-grid; place-items: center; width: 34px; height: 34px;
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%;
    background: rgba(255, 255, 255, .055);
    color: var(--dk-ink); cursor: pointer;
    transition: background .18s, color .18s, border-color .18s;
}
.hero__arw:hover { background: #2563EB; border-color: #2563EB; color: #FFFFFF; }
.hero__arw:focus-visible { outline: 2px solid var(--dk-blue); outline-offset: 2px; }
.hero__arw--pp .i-play { display: none; }
.hero.is-paused .hero__arw--pp .i-play { display: block; }
.hero.is-paused .hero__arw--pp .i-pause { display: none; }

/* 三张右栏卡共用一条 2px 顶部蓝线（右端渐隐）。
   作用是把三张卡收进同一套「界面」语言：它们不是三张插图，是同一个后台的
   三个面板。蓝线也是卡片与背景之间最省力的一条对比边 —— 深底上一道亮蓝，
   比再加亮卡体更容易被眼睛抓住，而不必把卡面提得太亮（深色区要保住深）。
   放在这里统一写：`.ans::before` 原先单独定义过一条，三卡分开写会出现
   「改了一张漏了两张」。 */
.quote, .board, .ans { position: relative; }
.quote::before, .board::before, .ans::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2;
    background: linear-gradient(90deg, var(--dk-blue) 0%, rgba(76, 141, 255, .38) 44%, rgba(76, 141, 255, .06) 78%, transparent 100%);
}

/* 报价单：右侧第一屏。刻意做成「可读的表格」，不是插图。
   深色版是「实心深面板」：比背景亮一档的蓝黑面 + 17% 白边 + 顶部内高光。
   ⚠️ 三张卡（.quote / .board / .ans）共用 --card-bg / --card-bd / --card-sh，
      换底色只改 .hero 里的三个变量，不要在这里单独写色值。 */
.quote {
    background: var(--card-bg);
    border: 1px solid var(--card-bd); border-radius: var(--r);
    padding: 0; overflow: hidden;
    box-shadow: var(--card-sh);
    max-width: 100%;
}
/* 抬头：卡体上再提一档（白 7% → 3%），中间一条 14% 白线把它和表格分开。
   它是「报价单的封面」，要比表体亮一点点，否则整张卡从头到尾一个亮度。 */
.quote__hd {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 16px 18px; border-bottom: 1px solid rgba(255, 255, 255, .14);
    background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028));
    font-weight: 700; font-size: 15.5px; letter-spacing: -.005em;
}
.quote__hd em {
    font-style: normal; font-family: var(--mono); font-size: 11px;
    color: var(--muted); letter-spacing: .04em; font-weight: 400;
}
/* 表头压暗：「暗表头 → 亮表体 → 蓝合计」三段明暗，一眼看出哪里是标签、
   哪里是要读的数据、哪里是要拍板的价格。原先三段几乎同亮度，表格读起来
   像一块糊住的灰面。 */
.quote__tb { font-size: 14px; table-layout: fixed; }
.quote__tb thead th:nth-child(1) { width: 40%; }
.quote__tb thead th:nth-child(2) { width: 32%; }
.quote__tb thead th:nth-child(3) { width: 28%; }
.quote__tb th, .quote__tb td { padding: 12px 14px; text-align: left; vertical-align: baseline; overflow-wrap: anywhere; line-height: 1.5; }
.quote__tb thead th:nth-child(2), .quote__tb thead th:nth-child(3) { text-align: right; }
.quote__tb thead th {
    font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
    color: #A6B4C9; font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, .12);
    background: rgba(6, 11, 21, .55);
    padding-top: 10px; padding-bottom: 10px;
}
/* 斑马纹 + 实线分隔：深底上虚线会被底噪吃掉，读成「断掉的表格」。
   条纹只上 4% 白，够分出行的节奏，又不会变成一套横条背景。 */
.quote__tb tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, .04); }
.quote__tb tbody tr + tr td { border-top: 1px solid rgba(255, 255, 255, .075); }
.quote__tb tbody tr:hover td { background: rgba(76, 141, 255, .14); }
.quote__tb tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--dk-blue); }
/* 项目名退到次级白，金额留纯白 —— 亮度差就是这张表的「对比」：
   眼睛先看到数字，再回来读项目名，而不是两者抢同一层。 */
.quote__tb tbody td:first-child { color: #DCE6F5; font-size: 13.5px; }
.quote__tb td:nth-child(2) { text-align: right; white-space: nowrap; font-weight: 700; font-size: 15px; color: #FFFFFF; }
.quote__tb td.dim { color: var(--muted); font-size: 12.5px; text-align: right; white-space: nowrap; }
/* 合计行：白底版是「近黑实心条 + 白字」。深色版改为品牌蓝渐变条 ——
   它仍然是全表视觉最重的一行，同时是首屏里第二块蓝（第一块是主按钮），
   视线会自然落到「总价」上。加上沿高光，让这条蓝是「一块被打亮的板」，
   而不是一条平涂的色带。
   ⚠️ 渐变必须挂在 `tfoot` 上、单元格保持透明：每个 td/th 各自画一条渐变，
   会从各自的左边缘重新起算 —— 合计行左右两格之间出现一道亮度不同的接缝
   （左格 #1D4ED8 起、右格又从 #1D4ED8 起，中间跳色）。 */
.quote__tb tfoot {
    background: linear-gradient(100deg, #1D4ED8 0%, #2563EB 58%, #3B82F6 100%);
    border-top: 1px solid rgba(255, 255, 255, .22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}
.quote__tb tfoot th, .quote__tb tfoot td {
    background: none;
    color: #FFFFFF; font-weight: 700; font-size: 13px;
    border-top: 0; box-shadow: none;
}
.quote__tb tfoot td { text-align: right; font-size: 15.5px; letter-spacing: -.01em; }
/* 脚注沉到卡体之下（-28% 黑），和表格之间用一条实线断开：
   它是「小字免责」，不该和报价行同亮度，否则又变成一行数据。 */
.quote__ft {
    margin-top: auto; padding: 12px 18px 15px; font-size: 12px; line-height: 1.7; color: var(--muted);
    border-top: 1px solid rgba(255, 255, 255, .09);
    background: rgba(0, 0, 0, .28);
}

/* ---------- 首屏第二屏：项目看板 ---------- */
.board {
    background: var(--card-bg);
    border: 1px solid var(--card-bd); border-radius: var(--r);
    overflow: hidden; max-width: 100%;
    box-shadow: var(--card-sh);
}
.board__st { padding: 6px 18px 8px; }
.board__li {
    display: grid; grid-template-columns: 14px minmax(0, 1fr) auto;
    align-items: center; column-gap: 12px; padding: 11px 0;
}
.board__li + .board__li { border-top: 1px dashed var(--line); }
.board__dot {
    justify-self: center; width: 9px; height: 9px; border-radius: 50%;
    border: 1px solid var(--line2); background: transparent;
}
/* 已完成 / 进行中的圆点：白底版靠「实心近黑 vs 空心」区分，深底上反过来 ——
   已完成填品牌蓝（进度感），进行中留空心 + 一圈光晕（还在跑） */
.board__li.is-done .board__dot { background: var(--dk-blue); border-color: var(--dk-blue); }
.board__li.is-now .board__dot {
    background: transparent; border: 2px solid var(--dk-blue);
    box-shadow: 0 0 0 4px rgba(76, 141, 255, .22);
}
.board__lb { font-size: 13.5px; }
.board__li.is-todo .board__lb { color: var(--muted); }
.board__li.is-now .board__lb { font-weight: 600; }
.board__li em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.board__now {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    margin: 8px 18px 0; padding: 12px 14px;
    background: var(--card-sink); border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.board__now span { font-size: 12px; color: var(--muted); }
.board__now b { font-size: 13px; }
.board__pm { display: grid; gap: 7px; margin: 14px 18px 0; }
.board__pm span { position: relative; padding-left: 16px; font-size: 12.5px; color: var(--ink2); }
.board__pm span::before {
    content: ""; position: absolute; left: 0; top: 7px;
    width: 6px; height: 6px; border-radius: 1px; background: var(--dk-blue);
}

/* ---------- 首屏第三屏：AI 答案卡 ----------
   这张卡是「GEO 能被看见」的证据，所以按一块可读的回答界面来做：
   AI 方标 + 问句凹槽 + 正文级答案 + 逐条来源 + 口径脚注。
   刻意用白卡而不是黑卡：整站是「白纸 / 白卡 / 一条蓝线」，
   一块纯黑会像贴上去的截图，也和第 1、2 屏的报价单、看板脱节。
   高度与第一屏报价单接近（≈ 400px），三屏切换时右栏不忽高忽低。 */
.ans {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--card-bd); border-radius: 12px;
    overflow: hidden; color: var(--ink); max-width: 100%;
    box-shadow: var(--card-sh);
}
/* 顶部 2px 品牌色细线：一眼看出这是「被引用的入口」，不是一张截图。
   规则与另外两张卡合并写在 .quote 段之前，这里不再重复定义。 */
.ans__hd {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 15px 18px 14px; border-bottom: 1px solid var(--line);
}
/* AI 方标：整张卡唯一的「AI 识别符号」，比一行小字标签更有辨识度 */
.ans__id {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--muted);
}
.ans__id i {
    display: inline-grid; place-items: center; width: 22px; height: 22px;
    border-radius: 5px; background: #2563EB; color: #fff;
    font-style: normal; font-weight: 700; font-size: 10px; letter-spacing: 0;
}
.ans__hd em {
    font-style: normal; font-family: var(--mono); font-size: 10.5px;
    letter-spacing: .12em; color: var(--muted);
}
/* 问句：一条浅灰凹槽，模仿搜索/对话输入框，和答案正文明确分层 */
.ans__q {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 17px 18px 0; padding: 12px 13px;
    background: var(--card-sink); border: 1px solid rgba(255, 255, 255, .09); border-radius: 8px;
}
.ans__qi { flex: none; margin-top: 2px; color: var(--dk-blue); }
.ans__q span { font-size: 13.5px; line-height: 1.7; color: var(--ink2); }
.ans__a { margin: 16px 18px 0; font-size: 15px; line-height: 1.92; color: var(--ink); }
/* 角标做成小方片：三个挤在一起时至少还是个「组」，不是一串乱码。
   深色底上 #EAF0FF 的浅蓝块会亮成一片，换成「半透明蓝底 + 亮蓝字」 */
.ans__cite { display: inline; white-space: nowrap; margin-left: 6px; }
.ans__cite b {
    display: inline-block; margin-left: 3px; padding: 1px 5px;
    font-family: var(--mono); font-size: 10.5px; font-weight: 600;
    color: #A9C7FF; background: rgba(76, 141, 255, .2); border-radius: 3px;
    vertical-align: 1px;
}
.ans__sh {
    margin: 18px 18px 0; padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
}
.ans__src { margin: 0 18px; }
.ans__src li {
    display: flex; align-items: baseline; gap: 9px; padding: 12px 0; font-size: 13px;
}
.ans__src li + li { border-top: 1px dashed var(--line); }
.ans__n { flex: none; font-family: var(--mono); font-size: 10.5px; color: var(--dk-blue); }
.ans__sn { min-width: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ans__src em {
    flex: none; margin-left: auto; font-style: normal; font-family: var(--mono);
    font-size: 10.5px; color: var(--muted); white-space: nowrap;
}
.ans__ft {
    margin-top: 14px; padding: 14px 18px 16px; font-size: 11.5px; line-height: 1.7;
    color: var(--muted); border-top: 1px solid rgba(255, 255, 255, .09); background: var(--card-sink);
}

/* ---------- 数据带 ---------- */
.band { padding: 34px 0 38px; border-bottom: 1px solid var(--line); background: var(--paper2); }
.band__t {
    font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 18px;
}
.band__l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.band__l li { padding-left: 16px; border-left: 1px solid var(--line2); }
.band__n { display: block; font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.band__n i { font-style: normal; font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 3px; }
.band__k { display: block; margin-top: 6px; font-size: 13.5px; font-weight: 600; }
.band__l em { display: block; margin-top: 4px; font-style: normal; font-size: 12.5px; color: var(--muted); }

/* ---------- 通用分区 ---------- */
.sec { padding: 84px 0; }
.sec--alt { background: var(--paper2); }
.sec__hd { margin-bottom: 40px; max-width: 74ch; }
.sec__hd h2 {
    font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.025em;
    padding-bottom: 14px; position: relative;
}
.sec__hd h2::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 2px;
    background: var(--brand); display: block;
}
.sec__hd p { margin-top: 16px; color: var(--ink2); font-size: 16px; max-width: 62ch; }
.sec__hd--row {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
    max-width: none;
}
.tip {
    margin-top: 26px; font-size: 13px; color: var(--muted);
    padding-left: 14px; border-left: 2px solid var(--line2); line-height: 1.7;
}
.empty { padding: 40px 0; color: var(--muted); font-size: 15px; }

/* ---------- 服务目录 ---------- */
.svc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line2); }
.svc__g {
    padding: 30px 30px 28px 0; border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
}
.svc__g:nth-child(2n) { padding-right: 0; padding-left: 30px; border-right: 0; }
.svc__gh { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline; }
.svc__no {
    grid-row: span 2; font-size: 13px; color: var(--brand); font-weight: 600;
    padding-top: 4px;
}
.svc__gh h3 { font-size: 20px; }
.svc__gh p { grid-column: 2; margin-top: 8px; font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.svc__l { margin-top: 20px; }
.svc__l li {
    display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 2px;
    padding: 11px 0; border-top: 1px dashed var(--line);
}
.svc__nm { font-size: 15px; font-weight: 500; }
.svc__pr { font-size: 14px; font-weight: 600; color: var(--brand2); text-align: right; white-space: nowrap; }
.svc__l em { grid-column: 1 / -1; font-style: normal; font-size: 12.5px; color: var(--muted); }
/* 服务目录的每一项都链到自己的详情页。静止时保持纯文字（27 行全带下划线会糊成一片），
   只在 hover 时变蓝并出下划线，可点这件事由光标与颜色回答 */
.svc__nm { display: inline-block; max-width: 100%; }
a.svc__nm { color: var(--ink); }
a.svc__nm:hover {
    color: var(--brand2); text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.svc__gh h3 a { color: var(--ink); }
.svc__gh h3 a:hover { color: var(--brand2); }

/* ---------- 流程 ---------- */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.steps__i {
    padding: 22px 18px 0 0; border-top: 1px solid var(--line2); position: relative;
}
.steps__i + .steps__i { padding-left: 18px; border-left: 1px solid var(--line); }
.steps__n {
    display: block; font-size: 12px; color: var(--brand); font-weight: 600; margin-bottom: 12px;
}
.steps__i h3 { font-size: 17px; }
.steps__d { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.steps__i p { margin-top: 12px; font-size: 13.5px; line-height: 1.72; color: var(--ink2); }

/* 承诺条：三条可核对的条款，排在流程下方 */
.commit {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
    margin-top: 40px; border-top: 1px solid var(--line2);
}
.commit li {
    padding: 16px 20px 0 0; border-right: 1px solid var(--line);
}
.commit li:last-child { border-right: 0; padding-right: 0; }
.commit li + li { padding-left: 20px; }
.commit span {
    display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.commit strong { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }

/* ---------- GEO 专章 ---------- */
.geo__layers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.geo__c {
    border: 1px solid var(--line2); border-radius: var(--r); padding: 28px;
    background: #FFFFFF; box-shadow: var(--sh-sm);
}
.geo__c:nth-child(2) { background: var(--deep); border-color: var(--deep); color: #E3E8EF; }
.geo__tag {
    display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
    text-transform: uppercase; padding: 4px 9px; border: 1px solid currentColor;
    color: var(--brand2); margin-bottom: 16px; border-radius: 1px;
}
.geo__c:nth-child(2) .geo__tag { color: #93A3B8; }
.geo__c h3 { font-size: 22px; }
.geo__price { margin-top: 8px; font-size: 14px; color: var(--brand2); font-weight: 600; }
.geo__c:nth-child(2) .geo__price { color: #9EC5FF; }
.geo__l { margin-top: 20px; }
.geo__l li {
    position: relative; padding: 11px 0 11px 26px; font-size: 14px; line-height: 1.72;
    border-top: 1px dashed rgba(0, 0, 0, .12);
}
.geo__c:nth-child(2) .geo__l li { border-top-color: rgba(255, 255, 255, .16); }
.tick {
    position: absolute; left: 0; top: 18px; width: 9px; height: 9px;
    border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
    transform: rotate(-45deg);
}
.geo__c:nth-child(2) .tick { border-color: #9EC5FF; }
.geo__note {
    margin-top: 28px; padding: 20px 22px; background: var(--paper2);
    border-left: 3px solid var(--brand); font-size: 14px; line-height: 1.8; color: var(--ink2);
}
.geo__cta { margin-top: 24px; }

/* ---------- 价格 ---------- */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan {
    display: flex; flex-direction: column; gap: 0;
    background: #FFFFFF; border: 1px solid var(--line2); border-radius: var(--r);
    padding: 24px 20px; position: relative; box-shadow: var(--sh-sm);
}
.plan--hot {
    border: 1px solid var(--brand); padding: 24px 20px;
    box-shadow: 0 12px 32px -22px rgba(26, 86, 219, .55);
}
/* 推荐档的按钮补成主按钮：白底页面上，四张卡都是描边按钮会让「推荐」失去指向 */
.plan--hot .btn { background: var(--ink); border-color: var(--ink); color: #fff; }
.plan--hot .btn:hover { background: var(--brand); border-color: var(--brand); }
.plan__flag {
    position: absolute; right: 20px; top: -11px;
    background: var(--brand); color: #fff; font-size: 11px; font-family: var(--mono);
    letter-spacing: .06em; padding: 3px 8px; border-radius: 1px;
}
.plan h3 { font-size: 19px; }
.plan__for { margin-top: 8px; font-size: 13px; color: var(--muted); line-height: 1.65; min-height: 2.6em; }
.plan__price { margin-top: 16px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan__price .num { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.plan__price em { font-style: normal; font-size: 12px; color: var(--muted); }
.plan__l { margin: 16px 0 20px; flex: 1 1 auto; }
.plan__l li {
    position: relative; padding: 8px 0 8px 22px; font-size: 13.5px; line-height: 1.6;
    border-top: 1px dashed var(--line);
}
.plan__l li .tick { top: 15px; width: 8px; height: 8px; }

.annual { margin-top: 34px; border-top: 1px solid var(--line2); padding-top: 22px; }
.annual__h { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.annual__l li {
    display: grid; grid-template-columns: 200px 170px 1fr; gap: 16px; align-items: baseline;
    padding: 13px 0; border-bottom: 1px dashed var(--line); font-size: 14px;
}
.annual__n { font-weight: 600; }
.annual__p { color: var(--brand2); font-weight: 600; }
.annual__l em { font-style: normal; color: var(--muted); font-size: 13px; }

/* ---------- 技术合作（深色） ---------- */
.tech { background: var(--deep); color: #E3E8EF; padding: 78px 0; }
.tech__in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 56px; align-items: start; }
.tech h2 { font-size: clamp(26px, 3vw, 34px); color: #F1F4F7; }
.tech .lead { color: #9BA6B2; margin-top: 16px; }
.tech__l { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 30px; }
.tech__l li { border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 14px; }
.tech__l h3 { font-size: 16px; color: #F1F4F7; }
.tech__l p { margin-top: 7px; font-size: 13.5px; line-height: 1.75; color: #8E99A6; }
.tech__cta { margin-top: 32px; }
.tech__spec { border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r); padding: 6px 20px; }
.tech__spec dl > div {
    display: flex; justify-content: space-between; gap: 14px;
    padding: 14px 0; border-bottom: 1px dashed rgba(255, 255, 255, .16);
    font-size: 13.5px;
}
.tech__spec dl > div:last-child { border-bottom: 0; }
.tech__spec dt { color: #7E8996; }
.tech__spec dd { font-family: var(--mono); color: #F1F4F7; text-align: right; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line2); }
.faq__i { border-bottom: 1px solid var(--line); }
.faq__i summary {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 20px 0; font-size: 16.5px; font-weight: 600; cursor: pointer;
    list-style: none;
}
.faq__i summary::-webkit-details-marker { display: none; }
.faq__x { position: relative; width: 14px; height: 14px; flex: none; }
.faq__x::before, .faq__x::after {
    content: ""; position: absolute; background: var(--brand); transition: transform .2s;
}
.faq__x::before { left: 0; top: 6px; width: 14px; height: 2px; }
.faq__x::after { left: 6px; top: 0; width: 2px; height: 14px; }
.faq__i[open] .faq__x::after { transform: rotate(90deg); opacity: 0; }
.faq__a { padding: 0 0 22px; }
.faq__a p { font-size: 14.5px; line-height: 1.85; color: var(--ink2); max-width: 72ch; }

/* ---------- 最新内容 ---------- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.post {
    display: flex; flex-direction: column; gap: 10px;
    padding: 24px; background: #FFFFFF; border: 1px solid var(--line2); border-radius: var(--r);
    box-shadow: var(--sh-sm);
    transition: border-color .18s, transform .18s, box-shadow .18s;
}
.post:hover { border-color: var(--line2); transform: translateY(-2px); box-shadow: var(--sh-md); }
.post__meta { display: flex; gap: 12px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing: .03em; }
.post h3 { font-size: 17px; line-height: 1.45; }
.post p {
    font-size: 13.5px; color: var(--muted); line-height: 1.7;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post__more { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--brand2); }

/* ---------- 结尾行动区 ---------- */
.cta { padding: 72px 0; background: var(--paper2); border-top: 1px solid var(--line); }
.cta__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; align-items: start; }
.cta h2 { font-size: clamp(24px, 2.8vw, 32px); }
.cta .lead { margin-top: 14px; }
.cta__btn { min-width: 200px; }
.cta__meta { margin-top: 20px; }
.cta__meta li {
    display: flex; gap: 12px; align-items: baseline; padding: 8px 0;
    border-bottom: 1px dashed var(--line); font-size: 14px;
}
.cta__meta span { flex: none; width: 44px; color: var(--muted); font-size: 12.5px; }
.cta__meta em { font-style: normal; }
.cta__note { margin-top: 16px; font-size: 12.5px; line-height: 1.7; color: var(--muted); }

/* ---------- 页脚 ---------- */
.ft { background: var(--deep2); color: #9BA6B2; padding: 56px 0 26px; }
.ft a { color: #D5DBE2; }
.ft a:hover { color: #fff; }
.ft__top {
    display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
    gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.ft__top--custom { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); }
.ft__logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ft__logo img { height: 28px; width: auto; }
/* 页脚是深底：白底 LOGO 必须反白，否则是一块白方块 */
.ft__logo .logo__img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
.ft__logo .logo__mark { background: #FFFFFF; }
.ft__logo .logo__mark i { background: var(--brand); }
.ft__logo .logo__txt { color: #F1F4F7; font-size: 18px; font-weight: 700; }
.ft__brand p { font-size: 13px; line-height: 1.8; color: #7A828B; max-width: 30em; }
.ft__h {
    display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: #7A828B; margin-bottom: 14px;
}
.ft__col li { padding: 5px 0; font-size: 13.5px; }
.ft__contact li { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; font-size: 13.5px; }
.ft__contact span { flex: none; width: 34px; font-size: 12px; color: #7A828B; }
.ft__contact em { font-style: normal; }
.ft__cta {
    display: inline-block; margin-top: 8px; padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--r); font-size: 13px;
}
.ft__cta:hover { background: #FFFFFF; color: var(--deep2) !important; border-color: #FFFFFF; }
.ft__note { padding: 18px 0 0; font-size: 12.5px; color: #7A828B; }
.ft__bot {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    padding-top: 20px; font-size: 12.5px; color: #7A828B;
}
/* 版权 / ICP / 公安备案三者同色
   `.ft a` 的 #D5DBE2 是给页脚导航列用的，法务行如果也吃它，就会「链接比纯文本亮一档」——
   截图里三段颜色对不上正是这个原因。这里让它们统一继承 .ft__bot 的灰，只有 hover 才提亮。
   选择器必须写在 `.ft a` 之后（特异性相同、靠顺序取胜），否则不生效。 */
.ft__bot > span, .ft__bot > a { color: #7A828B; }
.ft__bot > a:hover { color: #F1F4F7; }
.ft__langs { display: flex; gap: 10px; margin-left: auto; }
.ft__langs a { font-size: 12.5px; color: #7A828B; }
.ft__langs a.is-current, .ft__langs a[aria-current] { color: #F1F4F7; }

/* ---------- 返回顶部 ---------- */
.totop {
    position: fixed; right: 22px; bottom: 22px; z-index: 50;
    width: 42px; height: 42px; display: grid; place-items: center;
    background: var(--ink); color: #fff; border: 0; border-radius: var(--r);
    cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
    transform: translateY(8px); font-size: 16px;
}
.totop.is-on { opacity: .92; pointer-events: auto; transform: none; }
.totop:hover { background: var(--brand); }

/* ---------- 滚动显现（无 JS 时内容始终可见） ---------- */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.js .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .rv { opacity: 1; transform: none; transition: none; }
    .post:hover { transform: none; }
}

/* ---------- 断点：桌面优先，max-width ---------- */

/* 平板（768–1023）：首屏已经是单列，浮窗压的是整张卡片 —— 右让 188、左让 78。
   这一段之前不做避让，768 下浮窗会盖住答案卡右侧约 20%（域名被切、正文被压）。
   不加 max-width 收缩：768 减去两侧让位只剩 ~480px 正文宽，再收一档报价表第三列会折行。
   代价是跨过 1024 时有 ~71px 的宽度跳变，比「完全没有让位」的 223px 跳变小得多。 */
@media (min-width: 768px) and (max-width: 1023px) {
    body:has(#mtss-root) .wrap { width: auto; margin-left: auto; margin-right: 188px; }
    body:has(.mtlh-dock) .wrap { padding-left: 78px; }
}

@media (max-width: 1023px) {
    .hd__in { gap: 14px; }
    .nav {
        position: fixed; inset: 68px 0 auto 0; z-index: 55;
        flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
        background: var(--paper); border-bottom: 1px solid var(--line2);
        padding: 10px 26px 22px; display: none;
        max-height: calc(100vh - 68px); overflow: auto;
    }
    .nav.is-open { display: flex; }
    .nav__a { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
    /* 抽屉是白底浮层，而首页深色页头的「浅色字」规则会连带命中抽屉里的导航项 ——
       白底浅字等于隐形（实测「首页」整条只剩一条蓝下划线）。这里用更高特异性
       把颜色拉回正文色，作用域限定 .nav.is-open，不影响透明页头本身。 */
    body:has(.hero) .hd:not(.is-stuck) .nav.is-open .nav__a { color: var(--ink2); }
    body:has(.hero) .hd:not(.is-stuck) .nav.is-open .nav__a:hover { color: var(--ink); background: var(--paper2); }
    body:has(.hero) .hd:not(.is-stuck) .nav.is-open .nav__a.is-current { color: var(--ink); }
    /* 抽屉里的服务目录：没有悬停这回事，把二级面板摊平常驻。
       只保留「业务线」这一层（2 列 6 项），组内 27 条不进来 —— 抽屉会变成
       一条超长滚动区，且手机上反正要点进 /services 才有报价细节。 */
    .mega {
        position: static; width: auto; transform: none;
        opacity: 1; visibility: visible; pointer-events: auto;
        background: none; border: 0; border-radius: 0; box-shadow: none;
    }
    .mega::before, .mega__ft, .mega__list, .nav__cr { display: none; }
    /* 抽屉里要抵消模板上加的 .wrap 类（它给桌面端通栏面板做版心对齐用）：
       ① 版心宽度 —— 抽屉自己已经有 26px 内边距，再套一层版心就是双重留白；
       ② 768–1023 的客服浮窗右让 188px —— 那是给「浮在正文上的面板」用的，
          抽屉本身是全屏浮层，让位只会把 2 列挤扁。
       避让规则带 :has(#mtss-root)，类选择器堆多少都压不过 ID，只能 !important。 */
    body .mega .wrap {
        width: 100% !important; max-width: none !important; margin: 0 !important;
        padding-left: 0 !important; padding-right: 0 !important;
    }
    .mega__cols {
        grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px;
        padding: 2px 0 10px;
    }
    .mega__gr {
        padding: 8px 0 8px 10px; margin: 0;
        border-bottom: 0; border-left: 2px solid var(--line2);
        font-size: 13.5px; font-weight: 500; color: var(--ink2);
    }
    .mega__gr b { color: var(--muted); font-size: 10.5px; }
    .mega__gr em { display: none; }
    .nav__tools { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; }
    .nav__search { display: flex; gap: 8px; }
    .nav__search input {
        flex: 1 1 auto; padding: 10px 12px; border: 1px solid var(--line2);
        border-radius: var(--r); background: #FFFFFF; font-size: 15px; font-family: inherit;
    }
    .nav__search button {
        padding: 10px 16px; border: 1px solid var(--ink); background: var(--ink);
        color: #fff; border-radius: var(--r); font-size: 14px; cursor: pointer;
    }
    .nav__toggle { display: block; }
    .hd__end { display: none; }

    .hero__s { padding: 40px 0 4px; }
    .hero__in { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    /* 单列时右栏面板不再撑最小高度，否则文字与卡片之间出现大段空白 */
    .hero__in > aside { min-height: 0; }
    .hero__ctrl { flex-wrap: wrap; gap: 0; padding-top: 4px; padding-bottom: 4px; }
    .hero__tabs { margin-left: -16px; width: 100%; }
    .hero__tab { flex: 1 1 auto; justify-content: center; padding: 15px 12px; }
    .hero__tab::after, .hero__pb { left: 12px; right: 12px; }
    .hero__nav { width: 100%; justify-content: flex-end; padding-bottom: 10px; }
    .band__l { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
    .sec { padding: 60px 0; }
    .svc { grid-template-columns: 1fr; }
    .svc__g { padding-right: 0; border-right: 0; }
    .svc__g:nth-child(2n) { padding-left: 0; }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .steps__i { padding: 20px 18px 22px 0; }
    .steps__i + .steps__i { border-left: 0; padding-left: 0; }
    .steps__i:nth-child(2n) { padding-left: 18px; border-left: 1px solid var(--line); }
    .geo__layers { grid-template-columns: 1fr; }
    .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plan__for { min-height: 0; }
    .annual__l li { grid-template-columns: 1fr auto; }
    .annual__l em { grid-column: 1 / -1; }
    .tech__in { grid-template-columns: 1fr; gap: 34px; }
    .tech__l { grid-template-columns: 1fr; }
    .posts { grid-template-columns: 1fr; }
    .cta__in { grid-template-columns: 1fr; gap: 30px; }
    .ft__top, .ft__top--custom { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
    .ft__brand { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    body { font-size: 15.5px; }
    /* 手机上信息条整条不显示，首页透明页头只需让开主条那 62px */
    :root { --topbar-h: 0px; --hd-h: 62px; }
    /* 手机上一行放不下「公司全称 + 时效」，会折成两行把首屏顶下去，直接不显示 */
    .topbar { display: none; }
    .wrap { padding: 0 18px; }
    .hd__in { height: 62px; }
    .nav { inset: 62px 0 auto 0; }
    .logo__txt { font-size: 17px; }
    .hero__h { font-size: 31px; }
    .hero__k { font-size: 11px; }
    .lead { font-size: 15.5px; }
    .hero__cnt { font-size: 11px; }
    .hero__arw { width: 32px; height: 32px; }
    .hero__btns { flex-direction: column; align-items: stretch; }
    .hero__btns .btn { width: 100%; }
    .quote__tb th, .quote__tb td { padding: 10px 10px; }
    /* 小屏隐藏「说明」列后，固定表格的列宽仍按 40/32/28 分配，会在右侧留一条空灰格，
       所以列宽必须一起改成两列比例 */
    .quote__tb td.dim { display: none; }
    .quote__tb thead th:nth-child(3) { display: none; }
    .quote__tb thead th:nth-child(1) { width: 58%; }
    .quote__tb thead th:nth-child(2) { width: 42%; }
    .band__l { grid-template-columns: 1fr 1fr; gap: 18px 14px; }
    .band__n { font-size: 24px; }
    .band__l li { padding-left: 12px; }
    .sec__hd--row { flex-direction: column; align-items: flex-start; gap: 12px; }
    .steps { grid-template-columns: 1fr; }
    .steps__i:nth-child(2n) { padding-left: 0; border-left: 0; }
    .plans { grid-template-columns: 1fr; }
    .commit { grid-template-columns: 1fr; }
    .commit li { border-right: 0; padding: 14px 0 0; border-top: 1px dashed var(--line); }
    .commit li + li { padding-left: 0; }
    .commit li:first-child { border-top: 0; }
    .svc__gh h3 { font-size: 18px; }
    .annual__l li { grid-template-columns: 1fr; gap: 4px; }
    .annual__p { text-align: left; }
    .faq__i summary { font-size: 15.5px; }
    .ft__top, .ft__top--custom { grid-template-columns: 1fr 1fr; }
    .ft__bot { gap: 10px; }
    .ft__langs { margin-left: 0; width: 100%; }
    .totop { right: 14px; bottom: 14px; }
}

/* 1024–1099：让位后版心只有 ~660px，双栏分下来左 313、右 283 ——
   报价单的「官网建设 · 参考报价」「¥9,800 / 年」「季度交付」全在折行。
   这一段退回单栏，和 1023 以下连续，跨过 1024 时也不再出现「突然变窄」的断层。
   放在断点区最后：.hero__in 的基础规则在上面，同特异性靠顺序覆盖。 */
@media (min-width: 1024px) and (max-width: 1099px) {
    .hero__in { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .hero__in > aside { min-height: 0; }
}

/* ==========================================================================
   首页页头：顶部透明 → 滚过首屏变白
   --------------------------------------------------------------------------
   1) 「透明」是位移出来的，不是背景色画出来的。
      页头在文档流里占着 topbar + hd 的位置，直接把它设成透明只会露出 body
      的白底（首屏还在它下面，两者并不重叠）。所以让首屏用负 margin 顶到页面
      最顶端、再补等量 padding-top 把内容推回原位 —— 净高度不变、首屏底边界
      不动，只是深色背景延伸到了页头底下。topbar / hd 本身是定位元素，天然
      画在首屏之上，字不会被盖住。
   2) 滚动后切 `.is-solid`（main.js 按「首屏底 − 页头高」判定）：白底 + 深字 +
      阴影，回到全站通用的白纸页头。
      ⚠️ 深色态一律写成 `:not(.is-solid)`，而不是另写一套反向的浅色覆盖 ——
         少写十几条规则，也不会出现「漏覆盖某一项，滚下去还留着白字」。
   作用域用 `body:has(.hero)`：全站只有首页渲染 `blocks/hero`，其它页面的
   页头保持白纸基调，不做连带改版。
   ⚠️ 不能在这里改 `--ink / --paper2` 这类通用令牌 —— 它们定义在 :root 上，
      `body:has(.hero)` 覆盖会连同下方白色正文区一起变深，整页就废了。
   ========================================================================== */
body:has(.hero) .hero {
    margin-top: calc(-1 * (var(--topbar-h) + var(--hd-h)));
    padding-top: calc(var(--topbar-h) + var(--hd-h));
}

/* ---------- 透明态（页面顶部） ---------- */
/* ⚠️ z-index 必须给：首屏被负 margin 顶上来之后，它的 .hero__bg 是 absolute
   定位元素，会按 DOM 顺序画在相对定位但 z-index:auto 的 topbar 之上 ——
   不加这一层，顶部信息条会被首屏背景整块盖住（字还在，看不见）。 */
body:has(.hero) .topbar {
    z-index: 61;
    background: transparent; border-bottom-color: rgba(255, 255, 255, .08);
}
/* 4px 彩色品牌条压在透明页头最顶上会变成一条突兀的色带；手机端 hd 自己那条同理 */
body:has(.hero) .topbar::before,
body:has(.hero) .hd:not(.is-solid)::before { display: none; }
body:has(.hero) .topbar__in { color: var(--dk-muted); }
body:has(.hero) .topbar__dot {
    background: var(--dk-blue); box-shadow: 0 0 0 3px rgba(76, 141, 255, .18);
}

/* ---------- 透明态（只在页面最顶端 y ≤ 8 时成立） ----------
   ⚠️ 判定用 `:not(.is-stuck)` 而不是 `:not(.is-solid)`：
      `.is-stuck` 在滚过 8px 就加上，`.is-solid` 要等首屏底才加 ——
      用后者等于「整个首屏内部都保持透明」，下面滚过去的表格、数字全从导航
      里透出来，读不清（用户指的就是这个）。现在 `is-stuck` 一出现，
      这一整段白字/白 logo 的规则立刻失效，回落成 `.hd.is-stuck` 的 60% 白玻璃。 */
body:has(.hero) .hd:not(.is-stuck) {
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: transparent;
}
/* 字标：白底版是「近黑方块 + 蓝角标」，深底上黑块会消失 —— 反相成
   「白方块 + 蓝角标」，与页头里的白字同一亮度层，不会显得一块黑斑 */
body:has(.hero) .hd:not(.is-stuck) .logo__mark { background: #FFFFFF; }
body:has(.hero) .hd:not(.is-stuck) .logo__mark i { background: #2563EB; }
body:has(.hero) .hd:not(.is-stuck) .logo__txt { color: var(--dk-ink); }
/* 深色首屏上的 LOGO 图：与上面的字标同一个道理，白底版要反成白字，
   否则深蓝底上会戳出一块白方块。滚动态回到浅色玻璃后自动恢复原色（multiply）。 */
body:has(.hero) .hd:not(.is-stuck) .logo__img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
/* 站长显式关掉反白（LOGO 本身是透明底彩色图）：一律按原样输出 */
body.no-logo-invert .logo__img,
body.no-logo-invert .ft__logo .logo__img { mix-blend-mode: normal !important; filter: none !important; }

body:has(.hero) .hd:not(.is-stuck) .nav__a { color: var(--dk-ink2); }
body:has(.hero) .hd:not(.is-stuck) .nav__a:hover { color: #FFFFFF; background: rgba(255, 255, 255, .07); }
body:has(.hero) .hd:not(.is-stuck) .nav__a.is-current { color: #FFFFFF; }
/* 下划线在深底上要提亮一档：#1A56DB 压在 #0E1729 上只有 3.4:1，细线会糊 */
body:has(.hero) .hd:not(.is-stuck) .nav__a::after { background: var(--dk-blue); }
/* 服务目录展开时：既不要灰底，也要保持白字（覆盖上面的 :hover 灰底） */
body:has(.hero) .hd:not(.is-stuck) .nav__mega:hover > .nav__mega__a,
body:has(.hero) .hd:not(.is-stuck) .nav__mega:focus-within > .nav__mega__a {
    background: transparent; color: #FFFFFF;
}

/* 主按钮在深色页头里必须是蓝的：.btn--primary 默认用 var(--ink) 当底色，
   而这里没有覆盖令牌，它仍是近黑 —— 近黑按钮压在 #0A101D 上几乎看不见 */
body:has(.hero) .hd:not(.is-stuck) .hd__end .btn--primary {
    background: #2563EB; border-color: #2563EB; color: #FFFFFF;
}
body:has(.hero) .hd:not(.is-stuck) .hd__end .btn--primary:hover {
    background: #3B82F6; border-color: #3B82F6; color: #FFFFFF;
}
body:has(.hero) .hd:not(.is-stuck) .lang-dropdown > summary {
    border-color: rgba(255, 255, 255, .2); color: var(--dk-ink2);
}
body:has(.hero) .hd:not(.is-stuck) .nav__toggle { border-color: rgba(255, 255, 255, .2); }
body:has(.hero) .hd:not(.is-stuck) .nav__toggle span { background: var(--dk-ink); }

/* 首屏滚出视口后：与滚动态同一档 60% 白玻璃，只把阴影压实一点 ——
   它下面紧接着首屏底部那道深色渐变，浅阴影压不住，页头会显得「浮」在深色上。
   不单独提回纯白：底下已经是白色正文，.6 白叠在白纸上本来就读作白，
   提回 #FFF 反而会在滚出首屏的一瞬间出现「玻璃 → 白板」的亮度跳变。 */
body:has(.hero) .hd.is-solid {
    background-color: rgba(255, 255, 255, .6);
    -webkit-backdrop-filter: saturate(1.2) blur(22px);
    backdrop-filter: saturate(1.2) blur(22px);
    border-bottom-color: rgba(17, 24, 39, .08);
    box-shadow: 0 14px 30px -24px rgba(0, 0, 0, .7), 0 1px 0 rgba(11, 14, 17, .04);
}