/* ============================================================
   巨学问官网 · 组件层（Components）
   全站复用组件。新增页面时优先复用这里的类，
   只有本页独有的结构才写进 pages/*.css。
   ============================================================ */

/* ============ ① 全站骨架：页头 / 导航 / 页脚 ============ */
.hdr{
  position:sticky; top:0; z-index:var(--z-header);
  /* 背景**不透明**（《页头组件 · 页面大纲》§4.1 / 用户裁决 H2）：
     两行式占 128px，半透明 + 模糊会让下方滚动内容透上来干扰阅读。
     色值明写 #FFFFFF（与页头背景同色）；不写 rgba(255,255,255,1) —— 视觉等价，但前者更直观。
     ⚠️ 故也不再需要 backdrop-filter（背景已不透明，模糊是空转开销）。 */
  background:#FFFFFF;
  border-bottom:1px solid transparent;
  transition:border-color var(--dur), box-shadow var(--dur);
}
.hdr.is-stuck{border-bottom-color:var(--line); box-shadow:0 2px 14px rgba(18,50,92,.06);}

/* 容器：两行**竖排**。别改成「块级容器」—— flex column 才能用 flex:none 把两层高度锁死，
   块级布局下两层高度要靠内容撑，行高由内容决定就不再等于令牌。
   ★ 总高由令牌算：112 = --hdr-top-h(64) + --hdr-nav-h(48)；≤1080 时 --hdr-nav-h 归 0 ⇒ 自动回到 64。 */
.hdr__in{display:flex; flex-direction:column; height:var(--header-h);}

/* 第一行：Logo ｜ 右侧按钮。space-between 让「Logo｜按钮」（桌面）与「Logo｜汉堡」（移动）
   两种组合都各自贴两端 —— 这正是 .burger 放进 .hdr__top 而不是 .hdr__in 末尾的原因。 */
.hdr__top{
  flex:none; height:var(--hdr-top-h);
  display:flex; align-items:center; justify-content:space-between; gap:28px;
}
/* 第二行：导航。移动端整行隐藏（.hdr__nav 是「该隐藏的那一层」，不是 .nav） */
.hdr__nav{flex:none; height:var(--hdr-nav-h); display:flex; align-items:center;}

.logo{display:flex; align-items:center; gap:11px; flex:0 0 auto;}
/* Logo 图（2026-10-19 换品牌图）：高度锁 36px = 原 .logo__mark 的高度，页头总高（112）不变；
   width:auto 保持比例（272×72 的 2 倍图 → 显示 136×36）。 */
.logo__img{display:block; width:auto; height:36px;}
.logo__mark{
  width:36px; height:36px; border-radius:9px; flex:0 0 auto;
  background:linear-gradient(140deg,var(--c-navy) 0%,var(--c-navy-soft) 100%);
  display:grid; place-items:center; color:#fff;
  font-weight:var(--fw-black); font-size:17px; box-shadow:0 3px 10px rgba(18,50,92,.22);
}
.logo__txt{display:block; font-size:19px; font-weight:var(--fw-black); letter-spacing:.02em; line-height:1.1;}
.logo__sub{display:block; font-size:11px; color:var(--ink-3); letter-spacing:.14em; font-weight:var(--fw-bold);}

/* 主导航：**第二行，靠左**（《页头组件 · 页面大纲》§2.3 用户裁决 H2 —— 与 Logo 左边缘对齐）
   —— 容器 .hdr__nav 已占满整行宽，justify-content:flex-start 让 7 个入口从左侧排起。
   ★ 高度取 --hdr-nav-h（第二行 48），**不要用 --header-h**：后者是 112，
     写成它会让导航项撑到 112 高、页头总高翻倍（坑 §111）。
   ★ 两项的距离由「gap ＋ 两侧 padding」共同构成，**别只看其中一个数**（2026-10-17 定）：
       gap 16  = **视觉间隔**（相邻点击盒之间的白）—— 落在通行值 16–24 内；
       padding 18×2 = **热区扩展**（不是视觉间隔，只是让整项可点、且 hover 下划线有处可落）。
     ⇒ 文字到文字 52，但那个 52 不是"菜单之间多空"，**不要拿 52 去跟「栏目间距 24–40」的基准比**，
       会误判超标。旧值 gap 4 + padding 14 的文字间是 32（看着合规），可**视觉间隔只有 4px**、
       相邻项几乎连成一条 —— 那才是"挤"的真正原因。 */
.nav{flex:1; display:flex; align-items:center; justify-content:flex-start; gap:16px;}
.nav__item{position:relative;}
.nav__link{
  display:flex; align-items:center; gap:5px; height:var(--hdr-nav-h); padding:0 18px;
  font-size:15px; font-weight:var(--fw-medium); color:var(--ink-2); transition:color var(--dur-fast);
}
.nav__item:hover .nav__link,
.nav__link.is-active{color:var(--c-navy);}
/* 下划线要跟 padding 一起改（left/right = padding-inline），否则它会比文字宽出一截 */
.nav__link.is-active::after{
  content:""; position:absolute; left:18px; right:18px; bottom:0; height:3px;
  background:var(--c-gold); border-radius:3px 3px 0 0;
}
.nav__caret{transition:transform var(--dur-fast);}
.nav__item:hover .nav__caret{transform:rotate(180deg);}

/* 通用下拉（服务 / 解决方案 共用）
   ★ top 用 **100%**（= .nav__item 底边 = 第二行底边），不要写 top:var(--header-h)：
     下拉是**相对 .nav__item** 绝对定位的，而 --header-h 是整块页头高（112）——
     写令牌会让下拉整体下穿 64px，悬停时露出第二行与下拉之间的空隙。
     100% 与行高自动同步，第二行高怎么改都对得上（坑 §108）。 */
.drop{
  position:absolute; top:100%; left:50%; transform:translate(-50%,8px);
  width:470px; padding:var(--sp-5); background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--sh-2);
  display:grid; grid-template-columns:1fr 1fr; gap:22px;
  opacity:0; visibility:hidden; transition:all var(--dur-fast) var(--ease);
}
.nav__item:hover .drop,
.nav__item:focus-within .drop{opacity:1; visibility:visible; transform:translate(-50%,0);}
.drop::before{content:""; position:absolute; top:-8px; left:0; right:0; height:10px;} /* 防鼠标移出断连 */
.drop__col + .drop__col{border-left:1px solid var(--line-2); padding-left:22px;}
.drop__title{font-size:12px; letter-spacing:.12em; color:var(--ink-3); font-weight:var(--fw-bold); margin-bottom:var(--sp-2);}
.drop a{
  display:block; padding:7px 10px; margin:0 -10px; border-radius:var(--r-xs);
  font-size:15px; transition:background var(--dur-fast), color var(--dur-fast);
}
.drop a:hover{background:var(--bg-soft); color:var(--c-gold);}
.drop--wide{width:420px;}
/* 单列下拉：写死 220px → 内容自适应 + 最小宽度地板（2026-10-17 方案 A）
   问题：资讯中心 / 了解巨学问只有 4–5 字标签（~75–108px），写死 220px 内宽 180 只剩 60–75px 文字、右空 ~119px（填充率 34%）
   修复：fit-content 让宽度跟最长项走（解决方案/应用场景 9 字 → ~177；短菜单 → min-width 150 兜底）
         min-width:150px 是防换行地板：4 字标签自然宽 ~108 ＋ 左右内边距（单列内边距 16×2 ≈ 32）≈ 140，
         低于 ~140 会换行（无 min 时了解巨学问实测压成两行 w 102），150 留 10px 余量
   兼容：fit-content 不支持 IE11；全站已用 flex/grid/CSS 变量，IE11 不在支持范围。
         需兼容 IE11 时改 width:auto;min-width:150px（绝对定位 width:auto 行为等效 fit-content） */
.drop--single{width:fit-content; min-width:150px; grid-template-columns:1fr;}
.drop--single .drop__col + .drop__col{border-left:0; padding-left:0;}
/* fit-content 必须配 nowrap：否则「公共事业与医疗健康」等长项被压两行（单列 h 393 → 445.5）。
   双列最长项「线下机房集中考试」120px < 列宽 179px，nowrap 不溢出（已实测，对双列无影响） */
.drop a,.drop__soon{white-space:nowrap;}

/* 页面未建的菜单项：灰色不可点 */
.drop__soon{
  display:block; padding:7px 10px; margin:0 -10px; border-radius:var(--r-xs);
  font-size:15px; color:var(--ink-3); cursor:default;
}
.drop__soon i{
  font-style:normal; font-size:11px; margin-left:8px; padding:1px 6px;
  border-radius:9px; background:var(--bg-soft); border:1px solid var(--line);
  letter-spacing:.04em;
}
.mnav a.is-soon{color:var(--ink-3);}
.ft .drop__soon{display:inline; padding:0; margin:0; font-size:var(--fs-sm);}

/* 页头 CTA 按钮区（《页头组件 · 页面大纲》§2.2 第一行右侧）
   = 主按钮「加客服咨询」+ 次要按钮「登录/注册」。
   ★ 页头不显示电话（大纲 §五 布局示意无电话）—— 电话在页脚 / 底部咨询条 / 客服浮层 / CTA 带。
   ★ 不写 margin-left:auto：第一行 .hdr__top 是 space-between，本区与 .burger 谁显示谁贴右。 */
.hdr__cta{display:flex; align-items:center; gap:12px; flex:0 0 auto;}
.hdr__btn{
  height:40px; padding:0 var(--sp-5); border-radius:var(--r-xs);
  background:var(--c-navy); color:#fff; font-size:14px; font-weight:var(--fw-bold);
  display:inline-flex; align-items:center; justify-content:center; gap:7px; white-space:nowrap;
  transition:background var(--dur-fast), transform var(--dur-fast);
}
.hdr__btn:hover{background:var(--c-navy-soft); transform:translateY(-1px);}
/* 次要按钮：白底 + 品牌色边框 + 品牌色文字，低调、不抢主按钮（大纲 V1.1 §五「低调」）
   —— 用于「登录/注册」，也复用在移动端抽屉的 CTA 区。 */
.hdr__btn--ghost{background:var(--bg); color:var(--c-navy); border:1px solid var(--c-navy);}
.hdr__btn--ghost:hover{background:var(--bg-soft); color:var(--c-navy-soft); border-color:var(--c-navy-soft);}

/* 汉堡按钮：住在 .hdr__top 内（与 Logo 两端排布），桌面端隐藏。
   ★ 不写 margin-left:auto —— .hdr__top 是 space-between，桌面端由 .hdr__cta 贴右、
     移动端由本按钮贴右，一套规则两档通用。 */
.burger{
  display:none; width:42px; height:42px;
  border:1px solid var(--line); border-radius:var(--r-xs); background:var(--bg);
  cursor:pointer; place-items:center;
}
.burger span{display:block; width:18px; height:2px; background:var(--ink); margin:3px 0; border-radius:2px;}

.mnav{
  position:fixed; inset:var(--header-h) 0 0 0; z-index:var(--z-drawer);
  background:var(--bg); padding:var(--sp-5) var(--gutter-sm) var(--sp-10);
  overflow-y:auto; border-top:1px solid var(--line);
  transform:translateX(100%); transition:transform .3s var(--ease);
}
.mnav.is-open{transform:none;}
.mnav a{display:block; padding:15px 4px; font-size:17px; font-weight:var(--fw-medium); border-bottom:1px solid var(--line-2);}
.mnav__group{font-size:15px; letter-spacing:.12em; color:var(--ink-3); font-weight:var(--fw-bold); padding:18px 4px 6px;}
/* 抽屉底部 CTA 区（《页头组件 · 页面大纲》V1.1 §四：CTA 按钮收纳进菜单）
   —— ≤1080px 页头的 .hdr__cta 整组隐藏，两个按钮改在这里出现，样式必须跟着下来。
   ⚠️ 必须用 `.mnav__cta .hdr__btn`（0,2,0）压过 `.mnav a`（0,1,1）：
      后者会给抽屉里所有 <a> 加上 padding:15px 4px / font-size:17px / 分隔线。 */
.mnav__cta{display:grid; gap:var(--sp-3); margin-top:var(--sp-8);}
.mnav__cta .hdr__btn{
  width:100%; height:46px; padding:0 var(--sp-5);
  font-size:15px; font-weight:var(--fw-bold); border-bottom:0;
}

/* 页脚 */
/* ★ 页脚不再设 margin-top：原先的 margin-top:var(--sp-8)=32px 会在「最后一屏」与深色页脚之间
   露出 32px 的 body 白底（#FFF），在浅灰屏（.sect--soft #F5F7FA）或深色屏（.cta-band）下方就是一条白缝。
   页脚自身的 padding-top 已提供 64px 呼吸，直接贴住上一屏即可，band 切换本身即是分隔。 */
.ft{background:var(--c-navy-deep); color:var(--on-dark-3); padding:var(--sp-16) 0 0; font-size:var(--fs-sm);}
.ft__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr; gap:var(--sp-10); padding-bottom:var(--sp-12);}
.ft__brand .logo__txt{color:#fff;}
.ft__brand p{margin-top:var(--sp-4); line-height:1.8; max-width:300px;}
.ft__brand .ft__contact{margin-top:var(--sp-8);}  /* 联系信息在品牌列下方，与标语预留间距 */
.ft h5,.ft h3{color:#fff; font-size:15px; font-weight:var(--fw-bold); margin-bottom:var(--sp-4);}
.ft li{padding:6px 0;}
.ft li a:hover{color:#fff;}

/* 友情链接预留区（《页脚组件 · 页面大纲》V1.1 §2.2）
   —— 位置：品牌与导航区下方、版权与备案区上方；与上下两区各用一条 1px 浅色分割线区隔（§五 设计建议）。
      ★ 当前状态「暂不填充内容，仅预留位置」⇒ 空数组时整块收起：`.ft__links:empty` 会把
        自身连同 border-top 与 padding 一起隐掉，所以不配友情链接时页脚不会多出一条空带。 */
.ft__links{
  border-top:1px solid var(--on-dark-line); padding:var(--sp-5) 0;
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-6);
}
.ft__links:empty{display:none;}
.ft__links__t{color:#fff; font-weight:var(--fw-bold);}
.ft__links a:hover{color:#fff;}
.ft__links__soon{color:var(--on-dark-3);}

.ft__bar{
  border-top:1px solid var(--on-dark-line); padding:22px 0;
  display:flex; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; font-size:var(--fs-xs);
}
/* 版权与备案区里的锚文本（大纲 §五：锚文本样式，下划线或颜色区分）
   —— 备案号链到工信部备案系统、新窗口打开。base.css 的 `a{color:inherit;text-decoration:none}`
      会把外链洗成看不出是链接，这里显式还原（颜色提亮 + 常驻下划线），悬停转纯白。 */
.ft__bar a{
  color:var(--on-dark-2); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:var(--on-dark-line);
}
.ft__bar a:hover{color:#fff; text-decoration-color:currentColor;}

/* 移动端常驻咨询条 */
.floatbar{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-float); display:none;
  padding:var(--sp-2) var(--sp-4); gap:var(--sp-2);
  background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
}
.floatbar a{
  flex:1; height:44px; border-radius:var(--r-xs); display:inline-grid;
  grid-auto-flow:column; place-items:center; gap:7px; font-size:15px; font-weight:var(--fw-bold);
}
.floatbar a:first-child{background:var(--c-gold); color:var(--c-navy);}
.floatbar a:last-child{background:var(--bg-soft); color:var(--c-navy); border:1px solid var(--line);}

/* 右侧客服悬浮组件（全站 · 由 app.js 按 assets/data/site.js 的 contactWidget 注入）
   ★ 定位：固定视口右侧、纵向居中 —— 随页面滚动始终可见，不参与文档流（不挤压任何版面）。
   ★ 用色走品牌令牌：品牌深蓝底（--c-navy）+ 白字 + 金强调（--c-gold #C9A84C），与 Hero / CTA / 页脚的深色体系一致。
   ★ ≤1080px 收起（见下方组件层响应式）：那一段是平板/手机，由常驻底部咨询条 .floatbar 接管
     （2026-09-22 起 .floatbar 的出现断点由 860 提到 1080，与本条对齐）。
   ★ 打印时隐藏（base.css 的打印块管的是 .hdr/.ft/.floatbar，这里自带一条，避免跨文件耦合）。 */
/* 右侧客服悬浮组件 .cs —— V1.21：品牌深蓝背景 + 白字 + 金强调（《客服组件 · 页面大纲》V1.21；
   V1.2 由 V1.1 客服蓝回归主色体系）；V1.21 相对 V1.2 只改「返回顶部按滚动显隐」（见 .cs__c--top[hidden]）。 */
.cs{
  --cs-right:20px;                        /* 距右边缘（大纲指定 20px） */
  --cs-border:rgba(255,255,255,.3);       /* 白色半透明边框（大纲 V1.2 指定 .3） */
  --cs-shadow:0 4px 12px rgba(0,0,0,.3);  /* 浮起阴影（大纲 V1.2 指定 .3，白/浅灰底上可见） */
  --cs-hover:var(--c-navy-2);             /* 悬停时更亮的品牌深蓝（#2C3E6B） */
  --cs-fs:14px;                           /* 主文字字号（大纲 ≤14px） */
  position:fixed; top:50%; right:var(--cs-right); transform:translateY(-50%);
  z-index:999;
  display:flex; flex-direction:column; gap:var(--sp-2); width:160px;  /* 大纲 V1.2 指定宽度 160px */
}
.cs__c{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-1);
  padding:var(--sp-3); text-align:center;
  background:var(--c-navy); color:var(--on-dark);
  border:1px solid var(--cs-border); border-radius:var(--r-sm);
  box-shadow:var(--cs-shadow);
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease);
}
/* 可点项（电话 / 返回顶部）才有悬停反馈；二维码卡可点放大，也加反馈 */
a.cs__c:hover,button.cs__c:hover,.cs__c--qr:hover{background:var(--cs-hover); transform:translateY(-2px); box-shadow:var(--cs-shadow);}
/* 键盘聚焦描边用白，落在深蓝卡上清晰可见 */
a.cs__c:focus-visible,button.cs__c:focus-visible,.cs__c--qr:focus-visible{outline:2px solid var(--on-dark); outline-offset:2px;}
.cs__c--qr{cursor:pointer;}                /* 点击放大二维码 */
.cs__qr{
  display:grid; place-items:center; overflow:hidden;
  width:120px; height:120px; padding:6px; margin-bottom:var(--sp-2);
  border-radius:var(--r-xs); background:var(--bg);
  font-size:12px; line-height:1.35; color:var(--ink-3);
}
.cs__qr img{width:100%; height:100%; object-fit:contain;}
.cs__t{font-size:var(--cs-fs); line-height:var(--lh-sm); font-weight:var(--fw-bold);}
.cs__t--gold{color:var(--c-gold); font-weight:var(--fw-bold);}  /* 强调文案：品牌金 #C9A84C（大纲 V1.2） */
.cs__num{font-family:var(--font-num); font-size:15px; font-weight:var(--fw-black); line-height:var(--lh-flat); letter-spacing:.01em;}
.cs__c--top svg{width:20px; height:20px; margin-bottom:var(--sp-1);}
/* V1.21（大纲 §二 模块三）：返回顶部按滚动位置自动显隐，用 `hidden` 属性切换。
   ★ 必须显式写 [hidden]{display:none} —— 上面 .cs__c 的作者样式 display:flex 会盖掉 UA 的 [hidden]，
     否则卡片只是「语义上隐藏」、视觉上照样占位（同款坑见 .cs__zoom[hidden] / .pager[hidden]）。
   ★ 用 display:none 而非 opacity:0 —— 卡片要真正退出布局，.cs 的纵向居中才不会留出一个空位。 */
.cs__c--top[hidden]{display:none;}
/* 桌面端点击电话复制后的瞬时提示 */
.cs__c--tel.is-copied{position:relative;}
.cs__c--tel.is-copied::after{
  content:'已复制'; position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  padding:2px 8px; border-radius:var(--r-pill); background:var(--c-navy-deep); color:var(--on-dark);
  font-size:11px; white-space:nowrap; box-shadow:var(--cs-shadow);
}
/* 二维码放大层（点击二维码触发；再点关闭） */
.cs__zoom{ --zoom-bg:rgba(0,0,0,.6); position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center; background:var(--zoom-bg); cursor:zoom-out; }
.cs__zoom[hidden]{display:none;}
.cs__zoom__box{
  max-width:80vw; max-height:80svh; padding:var(--sp-4); border-radius:var(--r-md);
  background:var(--bg); box-shadow:var(--sh-3); display:grid; place-items:center; text-align:center;
  font-size:12px; color:var(--ink-3);
}
.cs__zoom__box img{width:280px; height:280px; max-width:70vw; max-height:70svh; object-fit:contain;}
@media print{.cs{display:none;}}
@media (prefers-reduced-motion:reduce){.cs__c{transition:none;}}

/* 加微信引导弹窗（全站 · 由 app.js 按 assets/data/site.js 的 wxModal 注入；页面 HTML 无标记）
   ★ 触发：头部「加微信咨询」/ 页内主按钮「了解合作方式·开始咨询·联系我们」/ 移动端底部「加微信咨询」/ 客服浮层二维码卡。
   ★ 大纲 V1.2：PC 居中 ~500px；移动端底部弹出、90% 屏宽，且**隐藏功能标签与客服电话**；
     **功能标签不可点击、仅作展示**（V1.2 主要更新，见下方 .wx__tag）。
     用色走品牌令牌（白底 + 深蓝标题栏 + 金色图标）。 */
.wx{
  --wx-shadow:0 8px 24px rgba(0,0,0,.3);   /* 大纲指定阴影 */
  --wx-mask:rgba(19,31,54,.5);
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:var(--sp-5);
  background:var(--wx-mask);
}
.wx[hidden]{display:none;}
.wx__box{
  position:relative; width:100%; max-width:500px; max-height:90svh; overflow:auto;
  background:var(--bg); border-radius:var(--r-sm); box-shadow:var(--wx-shadow); text-align:center;
}
.wx__hd{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:var(--sp-4) var(--sp-11);
  background:var(--c-navy); color:var(--on-dark);
  border-radius:var(--r-sm) var(--r-sm) 0 0;
}
.wx__title{font-size:var(--fs-h4); font-weight:var(--fw-bold); margin:0; line-height:var(--lh-head);}
.wx__x{
  position:absolute; top:50%; right:var(--sp-3); transform:translateY(-50%);
  width:32px; height:32px; border:0; border-radius:var(--r-pill); background:transparent;
  color:var(--on-dark); cursor:pointer; display:grid; place-items:center;
  font-size:22px; line-height:1;
}
.wx__x:hover{background:var(--on-dark-fill-2);}
.wx__x:focus-visible{outline:2px solid var(--on-dark); outline-offset:2px;}
.wx__bd{padding:var(--sp-6) var(--sp-6) var(--sp-8);}
.wx__lead{font-size:var(--fs-body); color:var(--ink); margin:0 0 var(--sp-5); line-height:var(--lh-body);}
.wx__qr{
  display:grid; place-items:center; overflow:hidden;
  width:180px; height:180px; margin:0 auto var(--sp-5); padding:var(--sp-2);
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg);
  cursor:zoom-in; font-size:12px; line-height:1.5; color:var(--ink-3);
}
.wx__qr img{width:100%; height:100%; object-fit:contain;}
.wx__qr:focus-visible{outline:2px solid var(--c-navy); outline-offset:2px;}
/* 功能标签（大纲 V1.2）：一行 4 个等距；每个 = 上方图标 + 下方文字，居中。
   ★ V1.2 明确「不可点击、仅作展示」—— 故渲染成 <span>、无 href、无 hover / focus 交互反馈
     （任何「像按钮」的悬停变色都会诱导点击，反而让人跳出弹窗、降低扫码转化率）。 */
.wx__tags{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-2); margin:0 0 var(--sp-6);}
.wx__tag{
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-2);
  padding:0; border:0; background:transparent;
  font-size:var(--fs-xs); line-height:var(--lh-flat); color:var(--ink); text-align:center;
  cursor:default;                                    /* V1.2：非交互元素 */
  -webkit-user-select:none; user-select:none;
}
.wx__tag-i{
  display:grid; place-items:center; width:46px; height:46px;
  border-radius:var(--r-pill); background:var(--c-gold-tint); color:var(--c-gold);
}
.wx__tag-i svg{width:24px; height:24px;}
/* 客服电话（大纲 V1.1：前缀「客服电话：」+ 深蓝号码） */
.wx__tel{display:inline-flex; align-items:baseline; gap:2px; text-decoration:none;}
.wx__tel-k{font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--ink-2);}
.wx__tel-n{
  font-family:var(--font-num); font-size:20px; font-weight:var(--fw-black);
  color:var(--c-navy); letter-spacing:.02em;
}
.wx__tel:hover .wx__tel-n{color:var(--c-navy-soft);}
.wx__tel.is-copied{position:relative;}
.wx__tel.is-copied::after{
  content:'已复制'; position:absolute; top:-26px; left:50%; transform:translateX(-50%);
  padding:2px 8px; border-radius:var(--r-pill); background:var(--c-navy-deep); color:var(--on-dark);
  font-size:11px; white-space:nowrap; font-family:var(--font-sans); font-weight:var(--fw-normal);
}
/* 二维码放大层（点二维码触发；再点关闭） */
.wx__zoom{position:fixed; inset:0; z-index:1010; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.7); cursor:zoom-out;}
.wx__zoom[hidden]{display:none;}
.wx__zoom img{width:300px; height:300px; max-width:80vw; max-height:80svh; object-fit:contain;
  background:var(--bg); padding:var(--sp-3); border-radius:var(--r-md);}
/* ≤1080px（移动端）：底部弹出、宽 90% 屏宽；关闭按钮加大；
   ★ 大纲 V1.1 起明确：移动端「不显示功能标签和客服电话」—— 整组隐藏，不是截断前 2 个 */
@media (max-width:1080px){
  .wx{align-items:flex-end; padding:0;}
  .wx__box{width:90%; max-width:none; border-radius:var(--r-md) var(--r-md) 0 0; max-height:88svh;}
  .wx__hd{border-radius:var(--r-md) var(--r-md) 0 0; padding:var(--sp-4) var(--sp-12);}
  .wx__x{width:40px; height:40px; right:var(--sp-4); font-size:26px;}
  .wx__tags{display:none;}
}
@media (prefers-reduced-motion:reduce){.wx__box{transition:none;}}
@media print{.wx,.wx__zoom{display:none;}}

/* ============ ② 通用元件：按钮 / 标签 / 眉标 ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  height:52px; padding:0 30px; border-radius:var(--r-xs);
  font-size:var(--fs-body); font-weight:var(--fw-bold); border:1px solid transparent;
  cursor:pointer; white-space:nowrap; transition:all var(--dur-fast) var(--ease);
}
.btn--primary{background:var(--c-gold); color:var(--c-navy); box-shadow:var(--sh-gold);}
.btn--primary:hover{background:var(--c-gold-dark); transform:translateY(-2px); box-shadow:var(--sh-gold);}
.btn--ghost{background:transparent; color:#fff; border-color:var(--on-dark-line);}
.btn--ghost:hover{background:var(--on-dark-fill-2); border-color:#fff; transform:translateY(-2px);}
.btn--navy{background:var(--c-navy); color:#fff;}
.btn--navy:hover{background:var(--c-navy-soft); transform:translateY(-2px);}
.btn--outline{background:transparent; color:var(--c-navy); border-color:var(--line);}
.btn--outline:hover{border-color:var(--c-navy); background:var(--bg-soft);}
.btn--sm{height:44px; padding:0 22px; font-size:15px;}

.tag{
  display:inline-flex; align-items:center; height:28px; padding:0 var(--sp-3);
  border-radius:14px; background:var(--bg-soft-2); color:var(--c-navy);
  font-size:var(--fs-xs); font-weight:var(--fw-medium); border:1px solid var(--line-3);
}
.tag--gold{background:var(--c-gold-tint); border-color:#f0e2c8; color:var(--c-gold-ink);}
.tag--red{background:var(--c-red-tint); border-color:#f6d9d6; color:var(--c-red-dark);}

.eyebrow{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-eyebrow); letter-spacing:.16em; font-weight:var(--fw-bold);
  color:var(--c-gold-dark); text-transform:uppercase;
}
.eyebrow::before{content:""; width:26px; height:2px; background:currentColor; border-radius:2px;}
.eyebrow--light{color:#E8C77A;}

/* ============ ③ 区块骨架（屏间距 / 屏内节奏 / 段间距，全部走令牌） ============ */
.sect{padding:var(--sect-pad) 0;}
.sect--lg{padding:var(--sect-pad-lg) 0;}      /* 章节首屏，强调分隔 */
.sect--sm{padding:var(--sect-pad-sm) 0;}      /* 紧凑屏：表格屏 / 入口屏 */
.sect--soft{background:var(--bg-soft);}
.sect--line{border-top:1px solid var(--line);}

/* 自适应换行：取消固定的 760px 上限，让标题/导语随容器宽度换行（不再被写死的宽度提前折行）
   与 hero__note 同原则：宽度自适应，仅在容器放不下时才换行；长标题不再被 760px 提前折成两行 */
.sect-head{max-width:100%; margin-bottom:var(--sect-body-gap);}
.sect-head .eyebrow{margin-bottom:var(--sect-head-gap);}
.sect-head h2{
  font-size:var(--fs-h1); line-height:var(--lh-tight);
  font-weight:var(--fw-black); letter-spacing:-.01em;
  margin:0 0 var(--sect-sub-gap);
  width:max-content; max-width:100%;
}
.sect-head p{color:var(--ink-2); font-size:var(--fs-lead); line-height:var(--lh-lead); max-width:100%;}
.sect-head p + p{margin-top:var(--para-gap);}
.sect-head--center{margin-inline:auto; text-align:center;}
.sect-head--center .eyebrow{justify-content:center;}
.sect-head--center p{margin-inline:auto;}

/* 正文流：段落与段落之间 --para-gap */
.prose{max-width:var(--maxw-text);}
.prose > p{line-height:var(--lh-body);}
.prose > p + p{margin-top:var(--para-gap);}

/* 面包屑 */
.crumb{display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-xs); color:var(--ink-3);}
.crumb a:hover{color:var(--c-navy);}
.crumb__sep{opacity:.5;}
.crumb__cur{color:var(--ink);}

/* 面包屑条：页头与首屏之间，独立一行 */
.crumb-bar{background:var(--bg); border-bottom:1px solid var(--line-2); padding:11px 0;}

/* ============ ④ Hero（通用） ============ */
.hero{position:relative; overflow:hidden; color:var(--on-dark);
  background:linear-gradient(135deg,var(--c-navy-deep) 0%,var(--c-navy) 55%,#17406f 100%);}
.hero::before{ /* 政务质感网格 */
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 25% 20%,#000 0%,transparent 72%);
          mask-image:radial-gradient(ellipse at 25% 20%,#000 0%,transparent 72%);
}
.hero::after{ /* 金色光晕 */
  content:""; position:absolute; right:-160px; top:-140px; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle,rgba(201,168,76,.30) 0%,transparent 66%);
}
.hero__in{position:relative; z-index:2; padding-top:66px; padding-bottom:78px;
  /* 方案 A · 首屏高度基准（2026-09-17 落地）：桌面端统一 660 地板 + 内容垂直居中，消除各页首屏高度跳动；移动端不锁高度（见 ⑫ 响应式 768 断点复位） */
  /* 只设上下内边距，左右内边距交回 .wrap（padding-inline:var(--gutter)），否则 padding 简写会把首屏水平留白清成 0、移动端文字顶到最左（2026-09-20 修复） */
  display:flex; flex-direction:column; justify-content:center; min-height:660px;}
.hero__badge{
  display:inline-flex; align-items:center; gap:9px; height:32px; padding:0 14px 0 10px;
  border-radius:16px; background:var(--on-dark-fill); border:1px solid var(--on-dark-line);
  font-size:var(--fs-xs); font-weight:var(--fw-medium); color:#ffe9c9;
  /* 方案 A：.hero__in 改为 flex 列后，默认 stretch 会把标签条拉成整行宽；此处锁回内容宽 + 左对齐 */
  align-self:flex-start; width:max-content;
}
.hero__badge i{width:6px; height:6px; border-radius:50%; background:var(--c-gold);}
/* ── 首屏子元素宽度：h1 / sub / trust-list / cta 四周对齐；note 与 badge 是刻意例外 ──────────
   （2026-09-24 用户两次裁决，口径已定稿，见 references/01-design-spec.md §6.2）
   ① 对齐组：`.hero__in` 的 4 个兄弟原本 4 档宽度 —— h1 900 / hero__sub 860 / trust-list 1136 /
      hero__cta 1136（实测 1440，容器内容宽 1136）。现以 **trust-list（=容器宽）为标准**统一，
      左 **右**边缘齐平；不写死 max-width，换行只由可用宽度决定。
      h1 放开后 finance / manufacturing / compliance 等页会新挂 99px 孤行 ⇒ 靠 text-wrap:balance
      均衡（637+591 等）。`text-wrap:balance` 是渐进增强，老浏览器忽略后回退普通折行，不报错。
   ② **`.hero__note` 例外**（用户二次裁决：文案长短差 738~1035px，通栏后色条尾端会压到桌面客服
      浮层 `.cs`（fixed / z-index:999 / 起于 x≈1227）之下）⇒ 保持 `width:max-content; max-width:100%`，
      自适应文字长度、桌面端单行、窄屏自然折行。**它与上面 4 个右边缘不齐平，是有意为之。**
   ③ **`.hero__badge` 例外**（标签条，`align-self:flex-start; width:max-content`，不能被拉成整行）。 */
.hero h1{font-size:var(--fs-display); line-height:var(--lh-tight); font-weight:var(--fw-black);
  letter-spacing:-.015em; margin:var(--sp-6) 0 var(--sp-5);
  /* 原 max-width:900px 属「写死宽度冻结换行点」，与 §6.2 / §6.3 已废的 820 / 760px 同类 */
  max-width:100%; text-wrap:balance;}
.hero h1 em{font-style:normal; color:#ffd9a0;}
/* ── 标题主断点：把「 · 」处的自然折行改为**确定性硬断**（2026-09-24 用户裁决）────────────────
   动机：A+B 23 页的 h1 都是「前半 · 后半」结构。`text-wrap:balance` 只在**已经折行的**块里把两行
   配平；1440 档有 17 页根本不折行、6 页折点各不相同（637+591 / 712+739 / 690+739…）
   ⇒ 观感是「随意截断」。改为在分隔处主动断行后，23 页恒定两行左对齐。
   源码用法（把「 · 」整体换成一个断行 span，**分隔符保留在 span 内**）：
     <h1>政务机构<span class="hero__brk" aria-hidden="true"> · </span><em>答题活动</em>与培训考核解决方案</h1>
   实现：`display:block` 负责断行；`height:0 + font-size:0 + line-height:0 + overflow:hidden`
   让里面那个「 · 」既不占高也不可见；`aria-hidden` 免得读屏读出一次空白停顿。
   ⚠️ **「·」必须留在 span 内，不得省掉**（2026-09-30 修正，用户裁决）：省掉会让**文本层**丢分隔符 ——
   JSON-LD 的 `Service.name` 沿用大纲标题（带「·」），而 H1 文本会变成空格分隔，SEO / GEO 读到的
   标题与结构化数据差一个字符。留在 span 内则 PC 视觉零变化（零字号不渲染）。
   窄屏（≤860 = 工程既有「平板/手机」断点）回 `display:inline` 并复原字号 ⇒ 空格恢复成正常间隔符，
   由浏览器自然折行（实测 520 档硬断会让 solution-transport 超宽 20px，自然折行反而是均衡的 385+399）。
   ⚠️ **纯 CSS 做不到**：`·` 是裸文本选不中；且 about / index 的 `<em>` 前并没有 `·`，
   不能对 `.hero h1 em` 统一 `display:block`（会把它们的 `<em>` 误断下去）。 */
.hero h1 .hero__brk{display:block; height:0; font-size:0; line-height:0; overflow:hidden;}
/* ── 首屏品类行（2026-09-27 新增，依据《首页 · 页面规划大纲》V1.10 第一屏第 3 项）──────────────
   「知识竞赛 · 答题活动 · 在线考试 · 培训考核」—— 大纲要求「字号略小于 H1，用「·」分隔」。
   ① **字号按 H1 比例给，不写死 px**：`calc(var(--fs-display) * .46)`，而 --fs-display 在 4 个断点
      为 50 / 40 / 33 / 27px ⇒ 品类行随之 23 / 18.4 / 15.2 / 12.4px。若写死 23px，
      ≤520 档 H1 掉到 27px 时两者几乎同大，层级直接糊掉。
   ② `max(var(--fs-sm), …)` 兜住移动端下限（14.5px），否则 520 档的 12.4px 低于可读阈值。
      ⇒ 实际值 **23 / 18.4 / 15.2 / 14.5px**，恒大于眉标的 18 / 14.4 / 13 / 13px（见 `.hero .eyebrow`）。
   ③ 它承担原副标题的信息（大纲 V1.10：「副标题取消，品类行已覆盖原有副标题信息」），
      故走次级墨色 --on-dark-2，与 H1 的纯白 + 金色 <em> 构成三级层次。
   ④ **上间距由 H1 自带**：`.hero h1` 已有 `margin-bottom:var(--sp-5)`(=20px)，此处不再叠加 margin-top。 */
.hero__cats{
  font-size:max(var(--fs-sm), calc(var(--fs-display) * .46));
  line-height:var(--lh-flat); color:var(--on-dark-2); letter-spacing:.02em;
}
/* 首屏定位眉标（2026-09-26）：《品牌与架构分册》§2.1 战略一致性原则的呈现要求
   「首页首屏 3 秒内传递对外营销定位，**须出现 eyebrow**『答题活动全流程服务商』」。
   ① `.hero__in` 是 `display:flex; flex-direction:column` + 默认 `align-items:stretch`
      ⇒ 不写 `align-self` 时眉标会被拉成通栏（内容仍左对齐、视觉无碍，但与 `.hero__badge`
      的既有处理不一致）—— 故与 `.hero__badge` 同法收成内容宽。
   ② 深蓝底上 `.eyebrow` 默认色 `--c-gold-dark` 偏暗 ⇒ 页面侧须配 `.eyebrow--light`。
   ③ 眉标→H1 的间距由 `.hero h1` 自带的 `margin-top:var(--sp-6)` 承担，此处不再叠加 margin。
   ④ **字号增大（2026-09-27 用户裁定）**：全局 `--fs-eyebrow` = 13px，与首屏 H1 的 50px 落差达
      1:3.85，定位语读起来像脚注，与其「首屏 3 秒传递对外定位」的战略角色不匹配。
      这里取 **18px（= H1 的 36%）**，落在 --fs-body(16) 与 --fs-lead(19) 之间，
      H1 仍是绝对主导、眉标不再被淹没。
      ⚠️ **只覆盖 `.hero .eyebrow`，不动全局 `--fs-eyebrow`** —— 全站另有 41 处眉标
      （`design-system.html` 23 + `components.html` 18）都在 `.sect-head` 里，属「制作者视角的区块标签」，
      13px 是它们的正确尺寸，不能跟着放大。`.hero .eyebrow` 全站**仅 index.html 一处**。
      ⚠️ **字距随字号收敛**：原 `.16em`（13px → 2.08px/字）在 18px 下会散成 2.88px/字，
      改用 `.12em`（2.16px/字），视觉密度与原来相当；短横线保持 26×2px 不变。
      ⚠️ **必须随 H1 等比缩放，不能写死 18px**（2026-09-27 实测踩到）：H1 在 4 个断点是
      50 / 40 / 33 / 27px，若眉标固定 18px，≤520 档 H1 只剩 27px ⇒ 眉标与主标题几乎同大，
      层级倒挂。故取 H1 的 **36%**（= 18 / 14.4 / 11.9 / 9.7px），并用 `max(var(--fs-xs), …)`
      兜住 13px 下限（= 标签级最小字号）。结果：**18 / 14.4 / 13 / 13px**，
      且恒为品类行(`.hero__cats`)的 ≤78% ⇒ 任何断点下「眉标 < 品类行 < H1」都不倒挂。 */
.hero .eyebrow{align-self:flex-start; font-size:max(var(--fs-xs), calc(var(--fs-display) * .36)); letter-spacing:.12em;}
.hero__sub{font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--on-dark-2);
  /* 原 max-width:860px 实际只对 about.html 生效（导语 1045+190、末行 11 字），放开后单行 */
  max-width:100%; text-wrap:balance;}
.hero__cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:var(--sp-8);}
.hero__note{
  display:flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-8);
  padding:15px var(--sp-5); border-radius:var(--r-sm);
  background:var(--on-dark-fill); border:1px solid var(--on-dark-line);
  /* **自适应内容宽**（2026-09-24 用户二次裁决，回到原始口径）：
     `width:max-content; max-width:100%` —— 有空间就缩到一行文字的宽（单行 / 不撑满容器），
     窄屏由 max-width:100% 兜住自然折行，永不溢出。
     为什么不做成通栏（曾于同日短暂改过 width:100%，已回退）：各页 note 文案 738~1035px，
     最长的 public 止于 x≈1171，而桌面客服浮层 `.cs` 从 x≈1227 起 —— 通栏色条会横穿浮层下方。
     各页桌面端均单行；唯一 2 行的是 about.html（文案 80 字，扣掉图标 23px + gap 8px +
     左右内边距 40px 后只剩 1065px 可用）—— 它本来就是 2 行，与本次口径无关。 */
  font-size:var(--fs-sm); color:var(--on-dark-2); width:max-content; max-width:100%; line-height:1.7;
}
/* 首屏说明条的图标按「单行文字」尺寸收敛（卡片里是 44px，放在 note 里会把框撑成两行高）；垂直居中贴合一行文字 */
.hero__note .panel__ico{flex:0 0 auto; width:1.6em; height:1.6em;}
.hero__note svg{flex:0 0 auto; opacity:.85;}
.hero--compact .hero__in{padding-top:48px; padding-bottom:56px;}

/* 统计条（信任标识 / 关键数据，全站统一） */
.stats{display:flex; flex-wrap:wrap; margin:44px 0 var(--sp-10);}
.stats__i{padding:0 var(--sp-10); border-left:1px solid var(--on-dark-line);}
.stats__i:first-child{padding-left:0; border-left:0;}
.stats__i:last-child{padding-right:0;}
.stats__n{font-family:var(--font-num); font-size:34px; font-weight:var(--fw-black); line-height:1.1; letter-spacing:-.02em;}
.stats__n small{font-size:17px; font-weight:var(--fw-bold); margin-left:2px;}
.stats__l{font-size:13.5px; color:var(--on-dark-3); margin-top:var(--sp-1); letter-spacing:.02em;}
.stats--light .stats__i{border-left-color:var(--line);}
.stats--light .stats__n{color:var(--c-navy);}
.stats--light .stats__l{color:var(--ink-3);}

/* 信任列表（标题+说明，用于 Hero 三标识） */
.trust-list{display:flex; flex-wrap:wrap; gap:var(--sp-5) var(--sp-8); margin:44px 0 var(--sp-10);}
.trust-list__i{display:flex; align-items:flex-start; gap:var(--sp-3); flex:1 1 240px;}
.trust-list__ico{
  width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  display:grid; place-items:center; color:#fff; flex:0 0 auto;
}
.trust-list__i b{display:block; font-size:16px; font-weight:var(--fw-bold); color:#fff;}
/* 说明文字只圈定内层 div 下的 span。
   不可写 .trust-list__i span：其 specificity(0,1,1) 高于 .trust-list__ico / .panel__ico(0,1,0)，
   会把图标容器的 display:grid 覆盖成 block，导致图标落在圆圈左上角（2026-09-17 事故）。 */
.trust-list__i > div > span{display:block; font-size:14px; color:var(--on-dark-3); margin-top:2px; line-height:1.6;}
@media (max-width:520px){
  .trust-list{flex-direction:column; gap:var(--sp-5);}
  .trust-list__i{flex-basis:auto;}  /* 主轴变纵向后，240px 基准要回到自然高度，否则会被当成最小高度把每项撑到 ~240px 高 */
}

/* ============ ⑤ 通用栅格与卡片 ============ */
.grid{display:grid; gap:var(--sp-6);}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}

/* 界面示意截图：对齐外站 features_item 的紧凑行间距 + 卡片质感 */
.ui-shots{gap:10px;}
.features_item{
  width:100%; height:auto; display:block; border:0; padding:0;
  border-radius:10px; box-shadow:3px 3px 5px rgba(0,0,0,.3);
  /* 原写 var(--transition-normal) / var(--transition-fast) —— 这两个令牌**从未**在 tokens.css 定义
     （那里是 --dur-fast:.18s / --dur:.24s / --dur-slow:.6s）。var 替换失败 ⇒ 整条 transition 声明
     invalid-at-computed-value ⇒ 退成初始值「all 0s」= **完全没有过渡**（2026-09-24 实测
     transitionDuration = 0s，悬停浮起是瞬变）。守门：verify/tokens.js 的悬空引用扫描。 */
  transition:transform var(--dur), box-shadow var(--dur);
}
.features_item:hover{transform:translateY(-5px); box-shadow:3px 6px 14px rgba(0,0,0,.35);}

.card{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--sp-8); box-shadow:var(--sh-1);
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur);
}
.card--hover:hover{box-shadow:var(--sh-2); transform:translateY(-4px); border-color:#cfdcee;}
.card__ico{
  width:52px; height:52px; border-radius:13px; display:grid; place-items:center;
  background:var(--bg-soft-2); color:var(--c-navy); border:1px solid var(--line-3); margin-bottom:var(--sp-5);
}
.card h3{font-size:var(--fs-h3); font-weight:var(--fw-black); line-height:var(--lh-snug); margin-bottom:var(--sp-2);}
.card__sub{font-size:var(--fs-xs); color:var(--ink-3); font-weight:var(--fw-medium);}
.card__body{color:var(--ink-2); font-size:15px;}

/* 带勾选的说明列表 */
.checklist li{display:flex; gap:var(--sp-2); font-size:15px; color:var(--ink-2); line-height:1.6; padding:7px 0;}
.checklist svg{flex:0 0 auto; margin-top:6px; color:var(--c-gold);}

/* ============ ⑥ 双栏场景对照（对外宣传 / 对内学习 等） ============ */
.panel{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md);
  padding:38px; position:relative; overflow:hidden; box-shadow:var(--sh-1);
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.panel:hover{box-shadow:var(--sh-2); transform:translateY(-3px);}
/* 方案 B（stretched-link，2026-09-20）：整卡可点但锚文本纯净 —— 见 07-pitfalls.md §29。
   外层 .panel 已是 position:relative，::after 的 inset:0 即覆盖整卡；display:block 保证标题区占满整行。 */
.panel__link{display:block; color:inherit; text-decoration:none; transition:color var(--dur) var(--ease);}
.panel__link::after{content:""; position:absolute; inset:0; z-index:1;}
.panel__link:hover{color:var(--c-gold);}
.panel::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px;}
.panel--a::before{background:linear-gradient(180deg,var(--c-gold),var(--c-gold-dark));}
.panel--b::before{background:linear-gradient(180deg,var(--c-navy),var(--c-navy-soft));}
.panel__hd{display:flex; align-items:center; gap:13px; margin-bottom:var(--sp-1); flex-wrap:wrap;}
.panel__ico{width:44px; height:44px; border-radius:11px; display:grid; place-items:center; flex:0 0 auto;}
.panel--a .panel__ico{background:var(--c-gold-tint); color:var(--c-gold-ink);}
.panel--b .panel__ico{background:var(--c-navy-tint); color:var(--c-navy);}
.panel__hd h3{font-size:var(--fs-h3); font-weight:var(--fw-black);}
.panel__meta{font-size:var(--fs-xs); font-weight:var(--fw-bold); color:var(--ink-3); letter-spacing:.06em;}
.panel__tagline{
  font-size:16.5px; font-weight:var(--fw-normal); line-height:var(--lh-sm);
  margin:14px 0 var(--sp-6); padding-bottom:22px; border-bottom:1px dashed var(--line);
}
.panel__sub{
  font-size:13px; font-weight:var(--fw-bold); letter-spacing:.02em;
  color:var(--ink-3); margin:4px 0 var(--sp-2);
}
/* 合作流程页：panel__hd 右侧「服务流程」按钮（控制对应流程块显隐） */
.panel__btn{
  flex:0 0 auto; margin-left:auto;
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 18px;
  font-family:inherit; font-size:15px; font-weight:var(--fw-bold);
  color:var(--c-navy); background:#fff;
  border:1.5px solid var(--c-navy); border-radius:999px;
  cursor:pointer; white-space:nowrap;
  /* 同上：原 var(--transition-fast) 未定义 ⇒ 悬停无过渡；--dur-fast = .18s */
  transition:background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.panel__btn:hover{background:var(--c-navy); color:#fff; transform:translateY(-1px); box-shadow:var(--sh-2);}
.panel__btn.is-active{background:var(--c-navy); color:#fff;}
.panel__btn:focus-visible{outline:2px solid var(--c-navy); outline-offset:2px;}
.numlist li{display:flex; gap:13px; padding:15px 0; border-bottom:1px solid var(--line-2);}
.numlist li:last-child{border-bottom:0; padding-bottom:0;}
.numlist__no{
  flex:0 0 auto; width:22px; height:22px; border-radius:var(--r-xs); margin-top:3px;
  display:grid; place-items:center; font-size:12px; font-weight:var(--fw-black);
}
.panel--a .numlist__no{background:var(--c-gold-tint); color:var(--c-gold-ink);}
.panel--b .numlist__no{background:var(--c-navy-tint); color:var(--c-navy);}

/* ============ 面板配色变体（全站唯一真源） ============
   所有场景页 / 方案页共用的面板配色变体集中定义于此，禁止在
   pages/*.css 中重复定义。语义来源见各应用场景大纲「四、设计建议」：
   - panel--a          金        ：通用强调（全局，已定义于上）
   - panel--b          藏青      ：通用主色（全局，已定义于上）
   - panel--warn       橙→红     ：安全生产与消防、传统节日（safety / festival）
   - panel--edu        金→橙     ：高校赛事与考核（edu）
   - panel--party      红        ：党建与主题教育（party，强调位）
   - panel--party-soft 藏青+红   ：党建与主题教育（party，主用）
   - panel--govpub     藏青+金   ：政务宣传（govpub）
   - panel--train      藏青+橙   ：企业培训与岗位考核（training）
   新增变体时：在此追加一组「::before / .panel__ico / .numlist__no / :hover」，
   并在上方索引注释登记语义与归属页面。 */

/* 橙→红（warn）：安全生产与消防、传统节日 */
.panel--warn::before{background:linear-gradient(180deg,var(--c-orange),var(--c-red));}
.panel--warn .panel__ico{background:var(--c-orange-tint); color:var(--c-red-dark);}
.panel--warn .numlist__no{background:var(--c-orange-tint); color:var(--c-red-dark);}
.panel--warn:hover{box-shadow:var(--sh-red);}

/* 金→橙（edu）：高校赛事与考核 */
.panel--edu::before{background:linear-gradient(180deg,var(--c-gold),var(--c-orange));}
.panel--edu .panel__ico{background:var(--c-gold-tint); color:var(--c-gold-ink);}
.panel--edu .numlist__no{background:var(--c-gold-tint); color:var(--c-gold-ink);}
.panel--edu:hover{box-shadow:var(--sh-gold);}

/* 党建红（party）：强调位 */
.panel--party::before{background:linear-gradient(180deg,var(--c-red),var(--c-red-dark));}
.panel--party .panel__ico{background:var(--c-red-tint); color:var(--c-red-dark);}
.panel--party .numlist__no{background:var(--c-red-tint); color:var(--c-red-dark);}
.panel--party:hover{box-shadow:var(--sh-red);}

/* 藏青+党建红（party-soft）：党建主用 */
.panel--party-soft::before{background:linear-gradient(180deg,var(--c-navy),var(--c-navy-soft));}
.panel--party-soft .panel__ico{background:var(--c-red-tint); color:var(--c-red-dark);}
.panel--party-soft .numlist__no{background:var(--c-red-tint); color:var(--c-red-dark);}
.panel--party-soft:hover{box-shadow:var(--sh-red);}

/* 藏青+金（govpub）：政务宣传 */
.panel--govpub::before{background:linear-gradient(180deg,var(--c-navy),var(--c-navy-soft));}
.panel--govpub .panel__ico{background:var(--c-gold-tint); color:var(--c-gold-ink);}
.panel--govpub .numlist__no{background:var(--c-gold-tint); color:var(--c-gold-ink);}
.panel--govpub:hover{box-shadow:var(--sh-2);}

/* 藏青+橙（train）：企业培训 */
.panel--train::before{background:linear-gradient(180deg,var(--c-navy),var(--c-navy-soft));}
.panel--train .panel__ico{background:var(--c-orange-tint); color:var(--c-red-dark);}
.panel--train .numlist__no{background:var(--c-orange-tint); color:var(--c-red-dark);}
.panel--train:hover{box-shadow:var(--sh-2);}
.numlist b{display:block; font-size:var(--fs-body); font-weight:var(--fw-bold); line-height:1.5;}
.numlist span{display:block; font-size:14px; color:var(--ink-2); margin-top:2px;text-align: center;}

/* 标签云（覆盖客户 / 覆盖行业） */
.chips{margin-top:var(--sp-8); padding-top:28px; border-top:1px solid var(--line);}
.chips__title{font-size:14px; font-weight:var(--fw-bold); color:var(--ink-3); margin-bottom:14px;}
.chips__list{display:flex; flex-wrap:wrap; gap:9px;}
.chips__list span{
  padding:7px 15px; border-radius:20px; background:var(--bg-soft);
  border:1px solid var(--line); font-size:14px; color:var(--ink-2); font-weight:var(--fw-medium);
  transition:all var(--dur-fast) var(--ease);
}
.chips__list span:hover{background:var(--c-navy); color:#fff; border-color:var(--c-navy);}

/* ============ ⑦ 案例卡 ============ */
.case{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur);
}
.case:hover{box-shadow:var(--sh-2); transform:translateY(-4px); border-color:#cfdcee;}
.case__top{padding:28px 30px 22px; background:linear-gradient(180deg,#f8fafd,var(--bg)); border-bottom:1px solid var(--line-2); display:flex; align-items:flex-start; gap:var(--sp-4);}
.case__no{font-size:12px; font-weight:var(--fw-black); letter-spacing:.14em; color:var(--c-gold); margin-bottom:var(--sp-2);}
.case__top h3{font-size:var(--fs-h3); font-weight:var(--fw-black); line-height:1.45;}
.case__body{padding:22px 30px var(--sp-6); flex:1;}
.case__row{display:flex; gap:var(--sp-3); padding:9px 0; font-size:var(--fs-sm); line-height:1.7;}
.case__row dt{flex:0 0 64px; color:var(--ink-3); font-weight:var(--fw-bold); font-size:14px;}
.case__row dd{margin:0; flex:1;}
.case__row--hl dd{font-weight:var(--fw-bold); color:var(--c-navy);}
.case__foot{padding:var(--sp-4) 30px 22px; display:flex; flex-wrap:wrap; gap:var(--sp-2);}

/* ============ ⑧ 合作引导带 ============ */
.cta-band{position:relative; overflow:hidden; color:var(--on-dark);
  background:linear-gradient(120deg,var(--c-navy-deep) 0%,var(--c-navy) 60%,#17406f 100%);}
.cta-band::after{
  content:""; position:absolute; left:-120px; bottom:-180px; width:460px; height:460px; border-radius:50%;
  background:radial-gradient(circle,rgba(201,168,76,.28) 0%,transparent 65%);
}
/* ⚠️ 用 padding-block，不用 padding 简写 —— 本元素同时带 .wrap（padding-inline:var(--gutter)）：
   `padding:A 0` 会把 .wrap 的左右内边距一并写成 0 ⇒ 带内内容宽出 2×gutter
   （2026-09-24 实测：桌面 1200 vs 普通 1136；手机 499 vs 459，带内卡片直接贴屏幕两边）。
   原写法还引用了从未定义的 --sp-20 ⇒ var 替换失败使整条声明 invalid-at-computed-value
   ⇒ 四个分量全归 0（**不是**回退到上一条，故 .wrap 的 32px 也保不住）。两处坑同轮修掉。 */
.cta-band__in{position:relative; z-index:2; padding-block:var(--sp-13); text-align:center;}
.cta-band h2{font-size:var(--fs-h1); font-weight:var(--fw-black); letter-spacing:-.01em; margin-top:14px;}
.cta-band p.cta-band__sub{color:var(--on-dark-3); font-size:17px; margin-top:14px;}

.contact{display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:760px; margin:44px auto 0;}
.contact--3{grid-template-columns:repeat(3,1fr); max-width:980px;}
.contact__c{
  background:var(--on-dark-fill); border:1px solid var(--on-dark-line);
  border-radius:var(--r-md); padding:30px 28px; text-align:left;
  transition:background var(--dur-fast), transform var(--dur-fast);
}
.contact__c:hover{background:var(--on-dark-fill-2); transform:translateY(-3px);}
.contact__ico{
  width:46px; height:46px; border-radius:12px; background:var(--on-dark-fill-2);
  display:grid; place-items:center; margin-bottom:var(--sp-4); color:#ffd9a0;
}
.contact__c h4,.contact__c h3{font-size:var(--fs-h4); font-weight:var(--fw-black); margin-bottom:6px;}
.contact__c p{font-size:var(--fs-sm); color:var(--on-dark-3); line-height:1.65;}
.contact__qr{width:128px; height:128px; margin:0 auto 14px; border:2px dashed rgba(255,255,255,.4); border-radius:14px; display:grid; place-items:center; text-align:center; color:var(--on-dark-3); font-size:12px; line-height:1.6; background:rgba(255,255,255,.04);}
/* 微信二维码「双码按端切换」（2026-09-24）—— 同一位置放两张图，靠媒体查询显隐。
   .contact--split / .cs / .wx 三个组件共用这两个类，故只在此处定义一次。
   ★ 断点 1080px：本项目「移动端含平板」的唯一分界 —— 861–1080 区间里 .cs 已整组隐藏、
     .floatbar 已出现、.wx 已变底部弹层，码的分界必须与组件形态一致，否则会出现
     「组件已是手机样、码还是 PC 码」的错配。刻意不用 860：那只是栅格分界。
   ★ 两张都会下载：display:none 不阻止 img 请求（img 的 fetch 由 src 赋值触发，与 CSS 无关）。
     实测每张 2.3 KB，故选这个简单方案，不引入 <picture>。
   ★ 选择器加 img 前缀：.contact__qr 自带 display:grid，单类选择器之间比源序太脆。 */
img.qr--mb{display:none;}
@media (max-width:1080px){
  img.qr--pc{display:none;}
  img.qr--mb{display:block;}   /* 原显示态：.contact__qr 是 grid、.cs__qr/.wx__qr 内 img 是 inline；统一 block，尺寸仍由各组件规则给定 */
}
.contact__tel{display:inline-block; margin-top:10px; color:#fff; font-size:21px; font-weight:var(--fw-black); letter-spacing:.04em; text-decoration:none;}
.contact__tel:hover{color:#ffd9a0;}
/* 合作流程页第七屏：长方形卡片左右分栏（左=图标+文字+描述，右=二维码/电话） */
.contact--split .contact__c{display:flex; align-items:center; gap:22px; padding:26px 26px;}
.contact--split .contact__main{flex:1 1 auto; min-width:0;}
.contact--split .contact__aside{flex:0 0 auto; display:flex; justify-content:flex-end;}
.contact--split .contact__ico{margin-bottom:0;}
.contact--split .contact__head{display:flex; align-items:center; gap:12px;}
.contact--split .contact__head h4,.contact--split .contact__head h3{margin-bottom:0;}
.contact--split .contact__qr{margin:0;}
.contact--split img.contact__qr{border:0; background:none; width:120px; height:120px; margin:0;}
.contact--split .contact__tel{margin:0; white-space:nowrap;}
.cta-note{margin-top:30px; font-size:15px; color:var(--on-dark-3); display:inline-flex; align-items:center; gap:9px;}

/* ============ ⑧b 合作引导屏组件（.coop-cta · 模板型 · 可选）============
   依据《合作引导屏组件 · 页面大纲》V1.3（docs/01-页面大纲/组件/合作引导屏组件 · 页面大纲.md）。
   页面只写占位符 <div class="coop-cta" data-title="…"></div>，
   构建期整块换成 <section class="cta-band coop-cta" id="coop">：

     · 底色 / 光晕 / 标题字号**沿用 ⑧ 的 .cta-band** —— 深色带是全站「三档底色」
       里的分隔体，不新造第四档；
     · 双卡片沿用 .contact--split（文案只有一个源，见 partials.js 的 renderCoopCta）。

   下面只写 V1.3 相对 .cta-band / .contact--split 的**取值差量**，且全部收在
   .coop-cta 命名空间内 ⇒ 仍手写旧版合作带的页面完全不受影响。
   ⚠️ 选择器刻意写成「.coop-cta + 两段」：既有 .cta-band__in / .contact__qr 等都是
      单类选择器，而 ≤860px 那档还有一条 .cta-band__in 覆写 —— 靠源序去赢很脆，
      提高一级特异性才稳。 */
/* §4.3 组件上下内边距 64px（--sp-12）。⚠️ 必须用 padding-block，两条理由（2026-09-24 同轮修）：
   ① 本元素同时带 .wrap（padding-inline:var(--gutter)）；`padding:A 0` 是**简写**，会把 .wrap
      的左右内边距写成 0 ⇒ 带内内容比上下相邻区块左右各宽一个 gutter（实测桌面 1200 vs 1136、
      手机 499 vs 459 —— 手机端带内卡片宽 499px 直接贴屏幕两边）；
   ② 旧版 .cta-band__in 写 `padding:var(--sp-20) 0`，而 --sp-20 **从未**在 tokens.css 定义
      ⇒ var 替换失败 ⇒ 整条声明 invalid-at-computed-value、四分量全归 0（**不是**「回退到上一条」）。
   写法：单值 = 上下同。⚠️ 别写 `padding-block:A 0` —— 那是「上 A、下 0」，与 `padding:A 0` 语义不同。
   守门：verify/coop-cta.js 的 padding / 左右内边距断言 + var 悬空引用静态扫描。 */
.coop-cta .cta-band__in{padding-block:var(--sp-12);}
/* §4.3 标题↔卡片 48px、双卡列间距 48px（--sp-10）。
   max-width 从 .contact 基础规则的 760（--maxw-text 档）放宽到 900，理由是实测出来的：
   二维码按 §4.2 从 120 涨到 140，而「电话沟通」卡的右侧是 **nowrap 的 22px 电话号码**
   （现用号码 ≈ 184px 宽，比二维码还宽 44px —— ⚠️ 换号后须复测：新号若位数 / 分隔符
     不同，这个宽度会变，900 这个上限值要跟着重核）⇒ 760 容器里该卡只剩 126px 给左侧
   文字区，再减图标 46 + 间距 12 = **68px** 给标题，而「电话沟通」20px 下需 ~80px ⇒
   标题被挤成两行、和左边卡不对称（2026-09-23 截图发现）。
   900 让每卡 426px、内宽 374px → 左侧文字区 168px、标题位 ~110px，留 30px 余量；
   `verify/coop-cta.js` 的 h4Lines 断言守着这条（二维码/电话字号再变时它会先红）。 */
.coop-cta .contact{max-width:900px; margin-top:var(--sp-10); gap:var(--sp-10);}
/* §4.2 卡片标题 18–20px（--fs-h3）；现网 .contact__c h4 是 17px */
.coop-cta .contact__c h4,.coop-cta .contact__c h3{font-size:var(--fs-h3);}
/* §4.1 卡片内文字 #FFFFFF / #E0E0E0 ⇒ 取 --on-dark-2（.84），比默认的 .66 更亮 */
.coop-cta .contact__c p{color:var(--on-dark-2);}
/* §4.2 二维码 140×140（cursor 由 app.js §10 补 role=button 后需要） */
.coop-cta .contact__qr{width:140px; height:140px; cursor:pointer;}
/* 换成真实图时同尺寸；border/background 是**防御性重复**，不是补漏 ——
   ★ 事实（2026-09-24 负向测试实测）：本组件双卡复用 contact-split 模板，其根元素是
     `<div class="contact contact--split">`，故上面 `.contact--split img.contact__qr`
     （border:0; background:none）**早就把占位虚线框清掉了**，真图本来就不会带虚线框。
     这里再写一遍，是为了本组件将来若换掉 contact-split 模板时仍不出虚线框。
   ★ 守门断言见 verify/coop-cta.js（qrStyle === 'none'）—— 它验的是**结果**而非写法：
     上面 `.contact--split img.contact__qr` 与本条**都写 border:0**，故单独破坏任一条
     都不会报红（另一条兜住），负向测试要**同时去掉两条**才会红（2026-09-24 实测）。 */
.coop-cta img.contact__qr{width:140px; height:140px; border:0; background:none;}
/* §4.1 / §4.2 电话号码：金色、20–24px、字重 700（现网是白色 21px/800） */
.coop-cta .contact__tel{color:var(--c-gold); font-size:22px; font-weight:var(--fw-bold);}
.coop-cta .contact__tel:hover{color:var(--c-gold-on-dark);}
/* §三「电话号码点击：桌面端复制 / 移动端拨号」的即时反馈 ——
   与 .cs__c--tel / .wx__tel 的 is-copied 同款（app.js §10 打这个类） */
.coop-cta .contact__tel.is-copied{position:relative;}
.coop-cta .contact__tel.is-copied::after{
  content:'已复制'; position:absolute; top:-26px; left:50%; transform:translateX(-50%);
  padding:2px 8px; border-radius:var(--r-pill); background:var(--c-navy-deep); color:var(--on-dark);
  font-size:11px; white-space:nowrap; font-family:var(--font-sans); font-weight:var(--fw-normal);
}
/* §三「底部话术：全站统一，**不带图标**，居中」—— 故不复用带 info 图标的 .cta-note */
.coop-cta__note{margin-top:var(--sp-10); font-size:var(--fs-sm); color:var(--on-dark-3);}
/* §五 ≤1080px：内边距收到 32px（--sp-8）。标题字号不在此档单独降号 ——
   全站 --fs-h1 阶梯是 32px → ≤860px 的 26px，区间 26–30px 由 860 档满足；
   若在 1080 档强行降号，同一页里合作屏标题会比其它屏标题小，反而破坏一致性。 */
@media (max-width:1080px){
  .coop-cta .cta-band__in{padding-block:var(--sp-8);}
  /* §五「移动端双卡片上下堆叠」——全站 .contact 是 **≤860px** 才并成 1 列，
     而大纲要求 ≤1080px 就堆叠：二维码放大到 140px 后，861–1080 区间并排会把
     文字挤成窄条。只在本组件作用域内提前到 1080，不动全站 .contact。 */
  .coop-cta .contact{grid-template-columns:1fr;}
}

/* 提示条 */
.note-bar{
  padding:var(--sp-5) 26px; border-radius:var(--r-sm);
  background:var(--bg-soft-2); border:1px solid var(--line-3);
  font-size:var(--fs-body); font-weight:var(--fw-medium); text-align:center;
}

/* ============ ⑨ 入口卡（行业 / 场景 / 服务跳转） ============ */
.entry{
  display:flex; align-items:center; gap:14px; padding:22px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg);
  transition:all var(--dur-fast) var(--ease); box-shadow:var(--sh-1);
  position:relative;
}
.entry:hover{border-color:var(--c-navy); transform:translateY(-3px); box-shadow:var(--sh-2);}
.entry__ico{
  width:40px; height:40px; border-radius:var(--r-sm); flex:0 0 auto; display:grid; place-items:center;
  background:var(--bg-soft-2); color:var(--c-navy); border:1px solid var(--line-3);
  transition:all var(--dur-fast) var(--ease);
}
.entry:hover .entry__ico{background:var(--c-navy); color:#fff; border-color:var(--c-navy);}
.entry__t{font-size:var(--fs-body); font-weight:var(--fw-bold); line-height:1.4;}
.entry__sub{display:block; font-size:var(--fs-xs); color:var(--ink-3); margin-top:2px; line-height:1.45;}
.entry__arrow{margin-left:auto; color:var(--ink-3); transition:all var(--dur-fast) var(--ease); flex:0 0 auto;}
.entry:hover .entry__arrow{color:var(--c-gold); transform:translateX(4px);}
/* 入口卡方案 B：真实链接只包 entry__t（纯净锚文本），::after 拉伸点击区到整条（2026-09-20 全站整改） */
.entry__link{color:inherit; text-decoration:none; display:inline-block;}
.entry__link::after{content:""; position:absolute; inset:0; z-index:1;}  /* 覆盖整条 .entry，整条可点 */
.entry__link:hover .entry__t{color:var(--c-gold);}

/* ============ ⑩ 后续页面预留组件 ============ */
/* 步骤流程（合作流程页） */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-4); counter-reset:s;}
.steps--4{grid-template-columns:repeat(4,1fr);}
.step{position:relative; padding-top:var(--sp-4);}
.step::before{
  counter-increment:s; content:counter(s);
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--c-navy); color:#fff; font-weight:var(--fw-black); font-size:15px;
  margin-bottom:var(--sp-4);
}
.step:not(:last-child)::after{
  content:""; position:absolute; top:31px; left:44px; right:-8px; height:1px;
  border-top:1px dashed var(--line);
}
.step h4{font-size:17px; font-weight:var(--fw-bold); margin-bottom:6px;}
.step__t{display:block; margin-top:5px; font-size:13px; font-weight:var(--fw-normal); color:var(--c-navy); letter-spacing:.02em;}
.step p{font-size:14px; color:var(--ink-2); line-height:1.65;}

/* 区块内的居中说明条（如流程总括语） */
.sect-note{margin:var(--sp-8) auto 0; max-width:760px; text-align:center; color:var(--ink-2); font-size:15px; line-height:1.8;}

/* 对比表（两种合作模式对比）
   ★ 2026-09-16「方案 A」：**表格自带白色表面**，表头色只由「表格内部色阶」决定，**不随所在区块反转**。
     旧写法把表头改成跟着区块走（灰底区块里表头变白），于是同一个组件长出两副面孔：
     白底 = 灰表头 + 白表体（好），灰底 = **白表头 + 灰表体（层次倒挂、整表边界消失）**。
     表头用 --bg-soft-2（比 --bg-soft 深一档）⇒ 白底 / 灰底渲染结果一致，且永远不会等于任何区块底色。
     规范：`01-design-spec.md` §6.1 规则 3（元件自带表面，内部色阶不随区块变）。 */
.compare{width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--bg); box-shadow:var(--sh-1);}
.compare th,.compare td{padding:16px 20px; text-align:left; font-size:15px; border-bottom:1px solid var(--line-2);}
.compare thead th{background:var(--bg-soft-2); font-weight:var(--fw-bold); color:var(--c-navy);}
.compare tbody th{width:180px; color:var(--ink-2); font-weight:var(--fw-medium); background:#fcfdfe;}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0;}

/* 价格锚点（脚注型元件 · 首页「服务概览」+ 4 个服务页「服务模式」屏共用）
   依据：《内容运营分册》§1.2 各页面内容策略 ——「首页…服务概览底部须露出价格锚点」、
        「服务页面…Hero 或服务形式区块须露出价格锚点」。
   定位是「脚注」而非标题：字号 --fs-sm、次级墨色 --ink-3，只有价格数字用 --c-navy 抬一下，
   让 2000 / 5000 这两个准入信号可被扫到，又不与上方卡片 / 表格抢注意力。
   ⚠️ 2026-09-27 由 pages/index.css 上移至此：内页需复用，组件级样式不得只写在页面级 CSS
      （同类教训见 07-pitfalls §61：.faq__q svg 兜底曾只写在 about.css ⇒ 首页图标撑爆）。 */
.price-anchor{
  margin-top:var(--sp-7); text-align:center;
  font-size:var(--fs-sm); line-height:1.7; color:var(--ink-3);
}
.price-anchor b{color:var(--c-navy); font-weight:var(--fw-bold);}
@media (max-width:520px){
  /* 手机上两段价格会折行，收紧上间距与行距，避免与上方内容挤在一起 */
  .price-anchor{margin-top:var(--sp-6); line-height:1.6;}
}

/* 常见问题（FAQ 折叠） */
.faq{border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden;}
.faq__i + .faq__i{border-top:1px solid var(--line-2);}
.faq__q{
  width:100%; display:flex; align-items:center; gap:var(--sp-3); padding:18px 22px;
  background:var(--bg); border:0; cursor:pointer; text-align:left;
  font-size:16px; font-weight:var(--fw-bold); color:var(--ink);
}
.faq__q:hover{background:var(--bg-soft);}
/* ⚠️ 箭头尺寸必须写在**这个全局组件**里（2026-09-26 修）：
   `.faq__q` 的内联 svg 没有 width/height 属性，而 16px 的兜底此前只写在
   `pages/about.css` —— 于是**任何不加载 about.css 的页面**（首页 2026-09-26 新增 FAQ 时暴露）
   都会让 svg 按默认 `width/height:100%` + viewBox 1:1 撑成方形，
   单个 `.faq__i` 实测被顶到 1126px（整屏 7045px），页面肉眼可见地崩。
   尺寸属组件自身规格，与「用哪个页面」无关 ⇒ 上移到此处，唯一真源。 */
.faq__q svg{margin-left:auto; flex:0 0 auto; width:16px; height:16px; color:var(--ink-3); transition:transform var(--dur-fast);}
.faq__i.is-open .faq__q svg{transform:rotate(180deg); color:var(--c-gold);}
.faq__a{display:none; padding:0 22px 20px; color:var(--ink-2); font-size:15px; line-height:1.8;}
.faq__i.is-open .faq__a{display:block;}

/* ★ 折叠面板用 hidden 收起时必须显式声明 display：作者样式一旦给 .faq 写上 display，
   UA 的 [hidden]{display:none} 就会被盖掉（本项目在 .pager 上踩过这个坑，与特异性无关）。 */
.faq[hidden]{display:none;}

/* Tab 页框（常见问题页的分类切换：服务类 / 合作类 / 技术类 / 场景类）
   与 .filter（筛选胶囊）刻意分开：页框是「同一块内容的切换」，用底部高亮线表达；
   筛选胶囊是「数据集合的过滤」，用填充色。二者语义不同，不要互相替代。 */
.tabs{display:flex; flex-wrap:wrap; gap:var(--sp-1); border-bottom:1px solid var(--line); margin-bottom:var(--sp-8);}
.tabs__b{
  position:relative; margin-bottom:-1px; padding:12px 22px; background:none; border:0;
  border-bottom:2px solid transparent; cursor:pointer; text-align:left;
  font-size:16px; font-weight:var(--fw-medium); color:var(--ink-2);
  transition:color var(--dur-fast), border-color var(--dur-fast);
}
.tabs__b:hover{color:var(--c-navy);}
.tabs__b[aria-selected="true"]{color:var(--c-navy); font-weight:var(--fw-bold); border-bottom-color:var(--c-gold);}
.tabs__b:focus-visible{outline:2px solid var(--c-navy); outline-offset:2px;}

/* 筛选器 + 卡片列表（资讯中心 / 案例库） */
.filters{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-8);}
.filter{
  height:36px; padding:0 18px; border-radius:18px; border:1px solid var(--line);
  background:var(--bg); color:var(--ink-2); font-size:14px; font-weight:var(--fw-medium);
  cursor:pointer; transition:all var(--dur-fast);
}
.filter:hover{border-color:var(--c-navy); color:var(--c-navy);}
.filter.is-active{background:var(--c-navy); border-color:var(--c-navy); color:#fff;}

/* 分页 */
.pager{display:flex; justify-content:center; gap:var(--sp-2); margin-top:var(--sp-12);}
.pager a,.pager span{
  min-width:38px; height:38px; padding:0 12px; border-radius:var(--r-xs);
  display:grid; place-items:center; border:1px solid var(--line); font-size:14px; color:var(--ink-2);
}
.pager a:hover{border-color:var(--c-navy); color:var(--c-navy);}
.pager .is-current{background:var(--c-navy); border-color:var(--c-navy); color:#fff; font-weight:var(--fw-bold);}
/* 分页器由 app.js 按「条数 / 每页条数」生成；不足两页时加 hidden 隐藏。
   .pager 自身是 display:flex，会盖掉 UA 的 [hidden]{display:none}，故须显式声明。 */
.pager[hidden]{display:none;}

/* 留资表单 */
.form{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4);}
.field{display:flex; flex-direction:column; gap:6px;}
.field--full{grid-column:1/-1;}
.field label{font-size:14px; font-weight:var(--fw-bold); color:var(--ink-2);}
.field input,.field select,.field textarea{
  height:46px; padding:0 14px; border:1px solid var(--line); border-radius:var(--r-xs);
  font:inherit; font-size:15px; color:var(--ink); background:var(--bg); transition:border-color var(--dur-fast);
}
.field textarea{height:110px; padding:12px 14px; resize:vertical; line-height:1.6;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--c-navy);}

/* 引述 */
.quote{
  padding:var(--sp-8) var(--sp-10); border-left:4px solid var(--c-gold);
  background:var(--bg-soft); border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:18px; line-height:1.8; color:var(--ink);
}

/* ============ 场景入口 · 未上线置灰态 ============
   全站公共组件：任何页面引用尚未上线的场景/行业页时，
   用 .entry--soon 代替 a.entry，并配 .entry__soon 角标。
   原先定义在 pages/scene-safety.css，因后续场景页均需复用而提升至此。 */
.entry--soon{
  opacity:.62;
  cursor:default;
  background:var(--bg-soft);
}
.entry--soon:hover{
  transform:none;
  box-shadow:var(--sh-1);
  border-color:var(--line);
}
.entry--soon .entry__ico{
  background:var(--bg-soft-2);
  color:var(--ink-3);
}
.entry__soon{
  display:inline-block;
  margin-left:8px;
  padding:1px 7px;
  border-radius:9px;
  background:var(--bg-soft-2);
  border:1px solid var(--line);
  font-size:11px;
  font-weight:var(--fw-bold);
  color:var(--ink-3);
  letter-spacing:.04em;
  white-space:nowrap;
  vertical-align:middle;
}

/* ============ ⑬ 首屏幻灯 ============
   《幻灯组件 · 页面大纲》V1.0（2026-09-23）落地，全站组件。
   命名空间 `.sld` —— 全站此前无 slide / sld 类名，与既有组件零冲突。

   结构：section.hero.sld-sect > .wrap > .sld[data-sld] > (轨道 / 箭头 / 圆点)
   钩子：[data-sld] [data-sld-track] [data-sld-i] [data-sld-prev] [data-sld-next]
         [data-sld-dots] [data-sld-go]；逻辑在 app.js §9（无该标记的页面整段空转）。

   底色与装饰**直接复用 `.hero`**（深藏青渐变 + 政务网格 + 金色光晕）—— 幻灯即首屏，
   与既有首屏同一套皮肤；本段只补「屏间距」与「卡片本体」。
   规范：卡片底色 #1A2A4A（--c-navy，图片加载前显示）；圆角 14px（--r-md）＋轻微投影；
         PC 16:7 / 移动端 16:9；文字叠加 + 半透明蒙层；文字距边缘 48px。
   无 JS 时退化为「只显示第一张」（轨道溢出被卡片裁掉），属预期降级。 */
.sld-sect{padding:var(--sect-pad) 0;}
.sld-sect > .wrap{position:relative; z-index:2;}   /* 浮到 .hero::before/::after 装饰层之上 */

.sld{position:relative; border-radius:var(--r-md); overflow:hidden;
  background:var(--c-navy); box-shadow:var(--sh-3);}

/* 轨道：横向排列，只靠 transform 平移（不改布局、不触发布局重排） */
.sld__track{display:flex; transition:transform var(--dur-slow) var(--ease); will-change:transform;}
.sld__track.is-dragging{transition:none;}          /* 手势拖动中不参与过渡，保证跟手 */

/* 切片：高度由比例决定，图片绝对定位 —— 图片永不撑高容器 */
.sld__i{position:relative; flex:0 0 100%; aspect-ratio:16/7; overflow:hidden;}
.sld__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

/* 蒙层（大纲 §5.3「文字叠加 + 半透明蒙层」）：底部线性渐变 + 左下角径向加强，
   保证白色标题 / 描述在任意主视觉上都可读（rgba 取自 --c-navy-deep #131F36）。 */
.sld__veil{position:absolute; inset:0;
  background:
    linear-gradient(to top,rgba(19,31,54,.90) 0%,rgba(19,31,54,.46) 30%,rgba(19,31,54,.10) 56%,transparent 88%),
    radial-gradient(112% 80% at 0% 100%,rgba(19,31,54,.62) 0%,transparent 58%);}

/* 文字块：左下角，距边缘 48px（--sp-10，大纲 §5.1 硬规定）；底部让 64px 给圆点行。
   max-width 用 min()：桌面留 720px 最佳行宽，同时**必须为右下角那对箭头预留 240px**，
   否则卡片变窄（861–960px 区间）时文字右缘会顶到箭头上。≤860 箭头隐藏 ⇒ 在 ⑫ 里放开为 100%。 */
.sld__txt{position:absolute; left:var(--sp-10); right:var(--sp-10); bottom:var(--sp-12);
  max-width:min(720px, calc(100% - 240px)); color:var(--on-dark);}
/* ⚠️ 标题必须写成 `.sld .sld__t`（两级）才能盖过 `.hero h1`（0,1,1）——
   幻灯挂的是 .hero 皮肤，而 `.hero h1` 会把字号锁成 --fs-display(50px) 并带上外边距。 */
.sld .sld__t{font-size:var(--fs-slide); line-height:var(--lh-tight); font-weight:var(--fw-black);
  letter-spacing:-.015em; max-width:100%; margin:0;
  text-shadow:0 2px 20px rgba(19,31,54,.45);}
.sld__d{margin-top:var(--sp-4); font-size:var(--fs-body); line-height:var(--lh-lead);
  color:var(--on-dark-2); max-width:640px;}
.sld__cta{margin-top:var(--sp-6); display:flex; gap:14px; flex-wrap:wrap; align-items:center;}

/* 左右箭头：**右下角成组**（与圆点同一水平带），而不是两侧垂直居中。
   ⚠️ 为什么不放两侧居中：大纲 §2.3 只规定箭头「PC 显示 / 移动端隐藏」，**未规定位置**；
   而 §5.1「文字位置 左下角，距边缘 48px」是硬规定。两侧箭头（左 20px + 直径 52px = 占到 72px）
   必然侵入 48px 处 —— 2026-09-23 实机截图确认标题首字「让」被圆钮压住。
   两条规定冲突时让箭头让位，并且移到右下角还顺带解决第二个遮挡：
   右侧客服悬浮卡 `.cs`（固定视口右侧、纵向居中）原本也压着右箭头，箭头落到卡片底部后即在它下方。
   按钮本体 44px ≥ 无障碍最小点击区。 */
.sld__arw{position:absolute; z-index:3; bottom:var(--sp-6);
  display:grid; place-items:center; width:44px; height:44px; padding:0;
  border-radius:50%; cursor:pointer; color:var(--on-dark);
  background:rgba(19,31,54,.44); border:1px solid var(--on-dark-line);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease);}
.sld__arw:hover{background:var(--c-gold); border-color:var(--c-gold); color:var(--c-navy);}
.sld__arw svg{width:20px; height:20px;}
.sld__arw--prev{right:calc(var(--sp-10) + 52px);}   /* 44px 钮 + 8px 间隙，右缘与文字右边距对齐 */
.sld__arw--next{right:var(--sp-10);}

/* 底部圆点：居中，压在最底部那条实色渐变带上，对比最稳定 */
.sld__dots{position:absolute; z-index:3; left:50%; bottom:var(--sp-6); transform:translateX(-50%);
  display:flex; align-items:center; gap:var(--sp-2);}
.sld__dot{width:9px; height:9px; padding:0; border:1px solid transparent; cursor:pointer;
  border-radius:var(--r-pill); background:var(--on-dark-3);
  transition:width var(--dur) var(--ease), background var(--dur) var(--ease);}
.sld__dot:hover{background:var(--on-dark);}
.sld__dot.is-active{width:26px; background:var(--c-gold);}

/* ============ ⑪ 动效 ============ */
.reveal{opacity:1; transform:translateY(22px);
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);}
.reveal.is-in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ============ ⑫ 组件层响应式 ============
   断点体系（全站唯一，见 design-spec §8 响应式规范）：1080 / 860 / 520
   · 1080：收起顶部导航**与页头 CTA 按钮区**（一并进汉堡菜单）、打开常驻底部咨询条、
           4 列网格→2 列
   · 860 ：多列网格进入「平板过渡」——grid--3 收为 2 列；2 列网格/表单/联系→1 列；首屏不再锁高度
   · 520 ：所有多列网格→1 列、按钮全宽（首屏 CTA 例外：保持自然宽度胶囊，避免单列时单按钮拉满显笨重）、首屏 CTA 竖排
   禁止出现 980 / 768 / 560 等脱离令牌体系的野断点。 */
@media (max-width:1080px){
  /* 第二行（导航）与 CTA 按钮区整组收进汉堡菜单（《页头组件 · 页面大纲》§三 / §九）
     —— 两个按钮已同步渲染在抽屉里（assets/partials/mnav.html 的 .mnav__cta），
        所以页头这一段只留 Logo + 汉堡，不再摆按钮。
     ★ 要隐藏的是**第二行容器 .hdr__nav**（不是 .nav）：
       .hdr__nav 定了高度（--hdr-nav-h）并参与 .hdr__in 的竖排，只藏 .nav 会留下 56px 空白带。
       同时 tokens.css 的 1080 档把 --hdr-nav-h 归 0 ⇒ --header-h 自动回到 72。 */
  .hdr__nav,.hdr__cta{display:none;}
  .burger{display:grid;}
  .cs{display:none;}                /* 客服悬浮组件：≤1080 收起，由底部咨询条 .floatbar 接管 */
  /* 底部常驻咨询条提前到 1080 出现（2026-09-22）
     —— 补「861–1080px：页头 CTA 已收进抽屉、而底部条原本要 ≤860 才出来」的入口空档。 */
  .floatbar{display:flex;}
  body{padding-bottom:70px;}        /* 给固定的底部条让位，避免遮住页脚末行 */
  .grid--4{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(3,1fr);}
  .step:nth-child(n+4)::after{display:none;}
  .ft__grid{grid-template-columns:1fr 1fr; gap:var(--sp-8);}
}
@media (max-width:860px){
  .grid--3{grid-template-columns:repeat(2,1fr);}      /* 3 列→2 列（平板过渡） */
  .grid--2,.contact,.form{grid-template-columns:1fr;}  /* 2 列网格→1 列（含表单/联系） */
  .contact--split .contact__c{flex-direction:column; align-items:flex-start; gap:18px;}
  .contact--split .contact__aside{justify-content:flex-start; width:100%;}
  .panel{padding:30px var(--sp-6) 26px;}
  .cta-band h2{font-size:27px;}
  .cta-band__in{padding-block:var(--sp-16);}   /* 同上：不用简写，保住 .wrap 的左右内边距 */
  /* .floatbar 的显示与 body 的底部让位已上移到 ≤1080 段（861–1080px 也要显示底部咨询条） */
  .hero__in{min-height:0;}   /* 平板/手机首屏高度由内容决定，不锁 660 地板 */
  .hero h1 .hero__brk{display:inline; height:auto; font-size:inherit; line-height:inherit; overflow:visible;}
  /* ↑ 标题硬断解除：空格恢复成正常间隔符，改由浏览器自然折行（见 §④ .hero__brk 定义处） */
  /* ⑬ 首屏幻灯：移动端切 16:9、隐藏箭头、隐藏描述、文字与圆点收到 24px（大纲 §四） */
  .sld__i{aspect-ratio:16/9;}
  .sld__arw{display:none;}
  .sld__txt{left:var(--sp-6); right:var(--sp-6); bottom:var(--sp-10); max-width:100%;}   /* 箭头已隐藏 ⇒ 不必再预留 */
  .sld__d{display:none;}
  .sld__dots{left:var(--sp-6); bottom:var(--sp-5); transform:none;}
  .stats{gap:22px 0; margin:var(--sp-8) 0;}
  .stats__i{padding:0 var(--sp-6);}
  .stats__i:nth-child(2),.stats__i:nth-child(3){padding-left:0; border-left:0;}
  .stats__n{font-size:28px;}
  .case__row{flex-direction:column; gap:2px;}
  .case__row dt{flex:none;}
  .steps{grid-template-columns:1fr 1fr;}
  .step:not(:last-child)::after{display:none;}
  .compare thead{display:none;}
  .compare tbody th{width:auto;}
  .compare tr{display:block; border-bottom:1px solid var(--line);}
  .compare th,.compare td{display:block; padding:10px 20px;}
  .compare tbody th{padding-top:16px; font-weight:var(--fw-bold); color:var(--c-navy);}
}
@media (max-width:520px){
  .grid--3,.grid--4,.steps{grid-template-columns:1fr;}  /* 2 列→1 列（手机） */
  .btn{width:100%;}
  /* 首屏 CTA：手机端不把按钮拉满整行（单列时单独一个按钮拉满反而显笨重、像广告条）；
     改为左侧自然宽度胶囊，整齐利落。其余场景（表单 / CTA 带）仍按 .btn 全宽。 */
  .hero__cta{flex-direction:column; align-items:flex-start; margin-top:var(--sp-6);}
  .hero__cta .btn{width:auto;}
  .sld__cta .btn{width:auto;}   /* 同首屏 CTA：手机端按钮不拉满整行 */
  /* 弹窗内的「客服电话：0731-…」（V1.4 / 2026-09-24）：隐藏断点从 1080 收到 520 ——
     平板（521–1080）弹窗里要露出电话；平板本身拨不通，点它是复制号码（app.js 判据同为 ≤520px）。 */
  .wx__tel{display:none;}
  .ft__grid{grid-template-columns:1fr;}
  .case__top,.case__body,.case__foot{padding-inline:22px;}
  .quote{padding:var(--sp-6);}
}