/* ============ 基础 ============ */
:root{
  --navy-900:#07203F;
  --navy-800:#0A2A5E;
  --navy-700:#0E366F;
  --brand:#0A57B8;
  --brand-600:#0E6BD6;
  --brand-100:#E8F1FD;
  --cyan:#12A5E0;
  --accent:#F2A33C;
  --ink:#1A2744;
  --ink-2:#556582;
  --ink-3:#8A99B0;
  /* ⚠️ 正文段落色＝--ink-2（#556582 深灰蓝），自 07 版起未变。
     2026-10-06 一度新增 `--text-body:#333` 想把全站正文改深，**当天即回滚** ——
     邦哥原话：「我是指『关于首信』这一栏，并不是全站正文全都回滚，全站正文不变」。
     ⇒ 正文色不做全站切换；「关于首信」也不单开色，与全站同一字色。 */
  --line:#E3E9F2;
  --line-2:#EEF3F9;
  /* 列表行分隔线：比 --line-2 深一档。
     --line-2 在浅底（#F5F8FC）上的对比度只有 1.05:1，肉眼几乎看不见线（2026-10-02 邦哥反馈），
     这里取 #D0DAE9 ⇒ 1.32:1（白底 1.41:1），对齐老站首页「公司新闻」的分隔线观感。 */
  --line-row:#D0DAE9;
  /* 时间轴线（首页「签约与动态」区）：1px 竖线经抗锯齿后会比色值更淡，
     所以取比 --line-row 再深一档 ⇒ 浅底 1.56:1 / 白底 1.66:1。再深就抢内容了。 */
  --line-axis:#BCCAE0;
  --bg:#FFFFFF;
  --bg-soft:#F5F8FC;
  --radius:14px;
  --radius-lg:20px;
  --shadow-sm:0 2px 10px rgba(10,42,94,.06);
  --shadow:0 10px 34px rgba(10,42,94,.09);
  --shadow-lg:0 22px 60px rgba(10,42,94,.14);
  --maxw:1220px;
  --font:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC","Noto Sans CJK SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  font-size:16px;line-height:1.75;letter-spacing:.01em;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;border:0;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,p{margin:0;}
/* figure 必须显式归零：浏览器默认 figure{margin:1em 40px}，不归零会让正文里的
   配图整体右缩 40px、上下多出 1em（正文图片由 md2html 渲染成 <figure class="fig">）。 */
figure{margin:0;}
ul{margin:0;padding:0;list-style:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* ============ 通用组件 ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:15px;font-weight:600;line-height:1;padding:14px 26px;
  border-radius:10px;border:1px solid transparent;cursor:pointer;
  transition:.22s ease;white-space:nowrap;
}
.btn-primary{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-600) 100%);color:#fff;box-shadow:0 8px 22px rgba(10,87,184,.28);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(10,87,184,.36);}
.btn-ghost{background:#fff;color:var(--brand);border-color:#C9DCF5;}
.btn-ghost:hover{background:var(--brand-100);border-color:var(--brand);}
.btn-light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.42);}
.btn-light:hover{background:rgba(255,255,255,.24);}
.btn-sm{padding:10px 18px;font-size:14px;}

.sec{padding:84px 0;}
.sec-soft{background:var(--bg-soft);}
.sec-head{text-align:center;max-width:760px;margin:0 auto 52px;}
.sec-tag{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;
  color:var(--brand);background:var(--brand-100);border-radius:999px;
  padding:6px 16px;margin-bottom:16px;
}
.sec-title{font-size:34px;line-height:1.35;font-weight:800;letter-spacing:-.01em;}
.sec-title .hl{color:var(--brand);}
.sec-sub{margin-top:14px;color:var(--ink-2);font-size:16px;line-height:1.8;}
.center{text-align:center;}

/* ============ 导航 ============ */
/* 无顶部信息条：导航条直接贴页顶（sticky） */
.nav{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);
}
/* 导航条满宽；左右留白 = 老站口径（老站 header 宽 96%、max-width 1600px 居中）：
   等价于「内容带 1600px 居中 + 96px 基线」——
   1366 屏 96px → 1600 屏 96px → 1920 屏 256px → 2560 屏 520px（封顶）。
   小屏贴 96px 不贴边，大屏随屏幕把 LOGO 收进 1600px 视觉带。 */
.nav .wrap{
  position:relative;display:flex;align-items:center;height:72px;gap:26px;
  max-width:none;
  padding-left:clamp(96px,calc(50vw - 704px),520px);
  padding-right:clamp(96px,calc(50vw - 704px),520px);
}
/* 企业 LOGO：官方图形（盾形标志 + 中英文标准字），源文件 site/assets/logo-sosen.png
   由 _tools/site-build/build_logo.py 从母版派生；深色背景用 -white 版 */
.logo{display:flex;align-items:center;flex-shrink:0;}
.logo img{height:40px;width:auto;display:block;}
/* 菜单占满「LOGO」与「右侧电话+按钮」之间的整条带（2026-09-30 邦哥要求：栏名排稀一点、
   首页位置不变、整排往右移、平均排列）：
   - padding-left 让「首页」停在原地（= 原「居中」布局时首页所在处，随屏宽计算、不写死）
   - justify-content:space-between 让其余 6 项把右半段空白均匀分掉
   → 结果：首页不动，越往右越稀，整排右端外扩到按钮前，6 段间距完全相等 */
.menu{
  display:flex;align-items:stretch;gap:0;flex:1;height:100%;
  justify-content:space-between;
  padding-left:clamp(20px,calc(50vw - 608px),192px);
}
/* ⚠️ 必须 relative：下拉面板要挂在「各自一级栏目」下面。
   曾用 static（面板相对整条导航条居中）——面板一收窄，靠右栏目（新闻资讯、关于首信）
   正下方就完全没有面板，鼠标从栏目往下移会掉出 hover 区，子栏目永远点不到。
   改回 static 前先想清楚这件事。 */
.menu>li{position:relative;display:flex;align-items:center;}
/* 一级栏目（参照老站）：字号 16px、字重 400（不加粗）、常态深色；选中/悬停只变蓝、不加底色 */
.menu>li>a{
  position:relative;display:flex;align-items:center;height:100%;
  padding:0 14px;font-size:16px;font-weight:400;color:var(--ink);
  white-space:nowrap;transition:color .2s;
}
/* 选中/悬停态：只把文字变蓝 —— 不加底色、不加下划线
   （2026-09-30 邦哥要求：去掉下拉面板顶边蓝线 + 栏目下方蓝线） */
.menu>li>a:hover,.menu>li>a.on{background:none;color:var(--brand);}
/* 下拉层（参照老站）：宽面板、直角、无圆角；列数由内联 --cols 控制。
   定位方式（2026-10-01 修）：面板左缘贴在「自己栏目」的左缘（left:0，因为 li 是 relative），
   保证栏目正下方一定有面板、鼠标垂直下移不会掉出 hover 区；再由站点 JS 写 --dx
   做微调——放得下就相对栏目居中，放不下就夹在视口内（左右各留 16px）。
   JS 不执行时 --dx=0，退化为「左对齐栏目」，依然点得到，只是靠右栏目会略微出边。 */
.drop{
  position:absolute;top:100%;left:0;
  display:grid;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));
  width:calc(var(--cols,1) * 360px + 56px);
  max-width:calc(100vw - 40px);
  background:#fff;border:1px solid var(--line);
  border-radius:0;
  box-shadow:0 30px 70px rgba(10,42,94,.18);
  padding:26px;gap:4px;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(var(--dx,0px)) translateY(6px);
  transition:opacity .18s ease,transform .18s ease;z-index:70;
}
.menu>li:hover .drop{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(var(--dx,0px)) translateY(0);
}
.drop a{
  display:block;padding:16px 20px;border-radius:0;font-size:15px;
  color:var(--ink-2);transition:.16s;
}
.drop a b{display:block;color:var(--ink);font-weight:700;font-size:16px;margin-bottom:4px;}
.drop a span{display:block;font-size:13px;color:var(--ink-3);line-height:1.6;}
.drop a:hover{background:var(--bg-soft);}
.drop a:hover b{color:var(--brand);}
/* 「即将上线」的产品项（结构表 状态=即将上线，2026-10-04 为代理产品加）：
   渲染成 <span> 而不是 <a> —— 没有页面、不能点击，所以不给 hover 反馈、
   不出现可点暗示，也就不会形成死链；名字用 ink-2（比可点项弱一档）。 */
.drop .drop-soon{display:block;padding:16px 20px;cursor:default;}
.drop .drop-soon b{display:block;color:var(--ink-2);font-weight:700;font-size:16px;margin-bottom:4px;}
.drop .drop-soon span{display:block;font-size:13px;color:var(--ink-3);line-height:1.6;}
.drop-tag{
  display:inline-block;margin-top:8px;padding:1px 8px 2px;
  font-style:normal;font-size:11.5px;line-height:1.6;
  color:var(--brand);background:var(--bg-soft);border:1px solid var(--line);
}
.nav-cta{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.nav-tel{font-size:14px;color:var(--ink-2);font-weight:600;}

/* 汉堡按钮（≤1200px 显示，替代老站 ≤1024px 的移动菜单） */
.burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;margin-left:auto;box-sizing:border-box;
  background:#fff;border:1px solid var(--line);border-radius:8px;cursor:pointer;
}
.burger span{display:block;height:2px;background:var(--ink);border-radius:2px;}

/* 中屏（1201–1279px）：先收紧左右留白，保证「LOGO + 7 栏目 + 电话 + 按钮」放得下 */
@media(min-width:1201px) and (max-width:1279px){
  .nav .wrap{padding-left:56px;padding-right:56px;}
}
/* ≤1200px：PC 菜单整块收起，改由汉堡菜单承担（老站为 ≤1024px，本站栏目更多故提前一档）
   此时右侧只留「申请试用 + 汉堡」，两者靠右成组 */
@media(max-width:1200px){
  .menu,.nav-tel{display:none;}
  .nav .wrap{padding-left:20px;padding-right:20px;gap:14px;}
  .nav-cta{margin-left:auto;}
  .burger{display:flex;margin-left:0;}
}
@media(max-width:400px){
  .logo img{height:32px;}
  .nav-cta .btn{padding:9px 13px;font-size:13px;}
  .burger{width:40px;height:40px;padding:0 9px;}
}
@media(max-width:520px){.logo img{height:34px;}}

/* ============ 移动端抽屉菜单（DOM 常驻，保证爬虫可读；仅 ≤1200px 可用） ============ */
.mnav-mask{
  position:fixed;inset:0;background:rgba(7,32,63,.5);z-index:190;
  opacity:0;visibility:hidden;transition:.28s ease;
}
.mnav-mask.open{opacity:1;visibility:visible;}
.mnav{
  position:fixed;top:0;right:0;bottom:0;width:min(86vw,380px);z-index:200;
  background:#fff;box-shadow:-24px 0 64px rgba(7,32,63,.22);
  transform:translateX(102%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow-y:auto;
}
.mnav.open{transform:translateX(0);}
.mnav-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 18px;border-bottom:1px solid var(--line);flex-shrink:0;
}
.mnav-head img{height:30px;width:auto;}
.mnav-close{
  width:38px;height:38px;border:1px solid var(--line);background:#fff;border-radius:8px;
  font-size:18px;line-height:1;color:var(--ink-2);cursor:pointer;
}
.mnav ul{padding:6px 0;}
.mnav>ul>li{border-bottom:1px solid var(--line-2);}
.mnav>ul>li>a,.mnav>ul>li>button{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:15px 20px;font-size:16px;font-weight:400;color:var(--ink);
  background:none;border:0;text-align:left;cursor:pointer;font-family:inherit;
}
.mnav>ul>li>a.on{color:var(--brand);}
.mnav .sub{display:none;padding:2px 0 10px;background:var(--bg-soft);}
.mnav>ul>li.open .sub{display:block;}
.mnav .sub a{display:block;padding:11px 20px 11px 34px;font-size:14.5px;color:var(--ink-2);}
.mnav .sub a b{display:block;color:var(--ink);font-weight:600;font-size:15px;}
.mnav .sub a span{font-size:12.5px;color:var(--ink-3);}
/* 手机抽屉里的「即将上线」产品项（同上，不可点） */
.mnav .sub .drop-soon{display:block;padding:11px 20px 11px 34px;cursor:default;}
.mnav .sub .drop-soon b{display:block;color:var(--ink-2);font-weight:600;font-size:15px;}
.mnav .sub .drop-soon span{display:block;font-size:12.5px;color:var(--ink-3);}
.mnav .drop-tag{margin-top:6px;}
.mnav .op{
  width:0;height:0;flex-shrink:0;margin-right:3px;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid var(--ink-3);transition:transform .25s;
}
.mnav>ul>li.open .op{transform:rotate(180deg);border-top-color:var(--brand);}
.mnav-cta{padding:18px 20px 28px;margin-top:auto;flex-shrink:0;}
.mnav-cta .btn{width:100%;}
.mnav-tel{display:block;text-align:center;margin-top:14px;font-size:14px;color:var(--ink-2);font-weight:600;}
@media(min-width:1201px){.mnav,.mnav-mask{display:none;}}

/* ============ Banner 轮播（首页首屏，导航正下方） ============ */
/* 参照老站口径：满宽、直角、PC 高约 580px；老站用 slick，这里用原生实现不引第三方库。
   图源由 build_banner.py 派生：PC 用 webp，手机端换竖版 jpg（从右半侧裁，主体在右）。 */
.bnr{position:relative;overflow:hidden;background:#071B3C;}
.bnr-track{display:flex;transition:transform .85s cubic-bezier(.45,.05,.2,1);}
.bnr-slide{flex:0 0 100%;position:relative;height:clamp(300px,33vw,580px);}
.bnr-slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
/* 底部渐变：让白色指示点在任意一张图上都清晰，并与下方白色区块自然衔接 */
.bnr-slide::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,22,50,0) 64%,rgba(6,22,50,.40) 100%);
}
/* ---- 图上文字层（2026-09-30 加；字号参照参考站 事井然 /case/ 的 44px 主标题口径）----
   文字用真 HTML 而不是烧进图片：① AI 与搜索引擎读得到 ② 改文案不用重做图 ③ 响应式可控。
   左边缘与导航 LOGO 同一套留白公式，保证全站左对齐一致。 */
.bnr-slide::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,rgba(0,14,44,.26) 0%,rgba(0,14,44,.10) 40%,rgba(0,14,44,0) 66%);
}
.bnr-cap{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;
  padding-left:clamp(96px,calc(50vw - 704px),520px);
  padding-right:clamp(24px,4vw,72px);
  pointer-events:none;
}
.bnr-cap-inner{max-width:620px;pointer-events:auto;}
.bnr-kicker{margin:0 0 14px;font-size:20px;line-height:28px;color:rgba(255,255,255,.82);}
.bnr-t{margin:0 0 16px;font-size:44px;line-height:1.14;font-weight:700;color:#fff;letter-spacing:-.01em;}
.bnr-d{margin:0 0 26px;font-size:15px;line-height:1.75;color:rgba(255,255,255,.8);max-width:560px;}
.bnr-btns{display:flex;flex-wrap:wrap;gap:14px;}
.bnr-btns a{
  display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 26px;
  border-radius:6px;font-size:15px;font-weight:600;text-decoration:none;
  transition:background .25s,color .25s,border-color .25s,transform .2s;
}
.bnr-btns .b1{background:#fff;color:var(--brand);}
.bnr-btns .b1:hover{background:#EAF2FF;transform:translateY(-1px);}
.bnr-btns .b2{color:#fff;border:1px solid rgba(255,255,255,.55);}
.bnr-btns .b2:hover{background:rgba(255,255,255,.14);border-color:#fff;}
@media(min-width:1201px) and (max-width:1279px){.bnr-cap{padding-left:56px;}}
@media(max-width:1400px){
  .bnr-t{font-size:38px;}
  .bnr-kicker{font-size:17px;line-height:24px;}
}
@media(max-width:1100px){
  .bnr-t{font-size:32px;}
  .bnr-d{font-size:14px;max-width:440px;}
}

.bnr-dots{
  position:absolute;left:0;right:0;bottom:24px;z-index:3;
  display:flex;justify-content:center;gap:12px;
}
.bnr-dots button{
  width:10px;height:10px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.5);transition:width .3s,background .3s;
}
.bnr-dots button:hover{background:rgba(255,255,255,.85);}
.bnr-dots button.on{width:28px;border-radius:99px;background:#fff;}
.bnr-dots button:focus-visible{outline:2px solid #fff;outline-offset:3px;}
@media(max-width:768px){
  .bnr-slide{height:clamp(168px,52vw,250px);}
  .bnr-slide img{object-position:70% center;}
  .bnr-dots{bottom:13px;gap:9px;}
  .bnr-dots button{width:8px;height:8px;}
  .bnr-dots button.on{width:22px;}
  /* 手机端：图换竖版、空间窄 → 文字压到底部，只留「标签 + 主标题」，描述与按钮隐藏
     （与参考站口径一致：参考站手机端也把描述换成短版、按钮整块隐藏） */
  .bnr-slide::before{background:linear-gradient(180deg,rgba(0,14,44,0) 38%,rgba(0,14,44,.38) 100%);}
  .bnr-cap{align-items:flex-end;padding-left:20px;padding-right:20px;padding-bottom:46px;}
  .bnr-cap-inner{max-width:none;}
  .bnr-kicker{font-size:12px;line-height:18px;margin-bottom:6px;}
  .bnr-t{font-size:20px;line-height:1.32;margin-bottom:0;}
  .bnr-d,.bnr-btns{display:none;}
}
@media(prefers-reduced-motion:reduce){.bnr-track{transition:none;}}

/* ============ 内页 banner（栏目频道头部）============
   与首页 banner 同一套口径：满宽图 + 直角 + 真 HTML 文字层（GEO：AI 读得到，
   改文案不用重做图）+ 左边缘复用导航留白公式（与页头 LOGO 全档位左对齐）。
   区别只有两点：① 高度比首页矮一档；② 单张静态，不轮播（内页不需要）。
   图由 build_banner.py 派生：case-banner.webp（1920×640 母图裁到 1920×440，
   因为内页容器更扁，直接 cover 会把右上角塔吊裁掉）。 */
.pgbnr{position:relative;overflow:hidden;background:#071B3C;}
.pgbnr img{
  /* 24vw / 上限 520：各档位容器比例稳定在 ≈4.2:1，与图（1920×440＝4.36:1）接近，
     所以窄屏几乎不裁、超宽屏也只裁一点点——不要改成更小的上限，
     容器越扁（如 2560 屏 420 高＝6.1:1）图被 cover 裁掉的就越多，塔吊会只剩半截。
     高度横向对比：1366→328 / 1600→384 / 1900→456 / 2560→520，都低于首页 banner。 */
  display:block;width:100%;height:clamp(220px,24vw,520px);
  object-fit:cover;object-position:center 32%;
}
/* 左侧压暗：保证白字在任何一张图上都有对比度，同时不压右侧主体 */
.pgbnr::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,rgba(0,14,44,.40) 0%,rgba(0,14,44,.16) 42%,rgba(0,14,44,0) 68%);
}
.pgbnr-cap{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;
  padding-left:clamp(96px,calc(50vw - 704px),520px);
  padding-right:clamp(24px,4vw,72px);
}
.pgbnr-cap-inner{max-width:700px;}
.pgbnr-cap h1{font-size:40px;line-height:1.18;font-weight:800;color:#fff;letter-spacing:-.01em;}
.pgbnr-cap .lead{margin-top:14px;font-size:15.5px;line-height:1.78;color:rgba(255,255,255,.86);}
@media(min-width:1201px) and (max-width:1279px){.pgbnr-cap{padding-left:56px;}}
@media(max-width:1400px){.pgbnr-cap h1{font-size:34px;}}
@media(min-width:1900px){.pgbnr-cap h1{font-size:44px;}}
@media(max-width:1100px){
  .pgbnr-cap h1{font-size:29px;}
  .pgbnr-cap .lead{font-size:14.5px;}
}
@media(max-width:768px){
  .pgbnr img{height:clamp(160px,42vw,215px);object-position:center;}
  /* 手机端：图换右裁版（case-banner-m.jpg）→ 文字压到底部，
     遮罩改纵向、底部加重（图上主体偏亮，白字要压得住才看得清） */
  .pgbnr::before{
    background:linear-gradient(180deg,rgba(0,14,44,.02) 30%,
               rgba(0,14,44,.34) 58%,rgba(0,14,44,.72) 100%);
  }
  .pgbnr-cap{align-items:flex-end;padding:0 20px 18px;}
  .pgbnr-cap-inner{max-width:none;}
  .pgbnr-cap h1{font-size:21px;line-height:1.3;text-shadow:0 1px 3px rgba(0,18,50,.45);}
  .pgbnr-cap .lead{margin-top:7px;font-size:12.5px;line-height:1.62;}
}

/* ============ Hero ============ */
.hero{
  position:relative;overflow:hidden;padding:70px 0 78px;
  background:
    radial-gradient(900px 420px at 88% -8%,rgba(18,165,224,.16),transparent 62%),
    radial-gradient(700px 380px at 6% 104%,rgba(10,87,184,.10),transparent 60%),
    linear-gradient(180deg,#FFFFFF 0%,#F7FAFE 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(10,42,94,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(10,42,94,.045) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 78%);
}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:56px;align-items:center;}
.badge{
  display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid #D8E6F8;
  color:var(--brand);font-size:13.5px;font-weight:600;padding:7px 16px;border-radius:999px;
  box-shadow:var(--shadow-sm);margin-bottom:22px;
}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(18,165,224,.16);}
.hero h1{
  font-size:50px;line-height:1.24;font-weight:800;letter-spacing:-.02em;
}
.hero h1 .hl{
  background:linear-gradient(135deg,var(--brand) 10%,var(--cyan) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lead{margin-top:22px;font-size:17px;line-height:1.85;color:var(--ink-2);max-width:560px;}
.hero-motto{
  margin-top:18px;display:inline-flex;align-items:center;gap:14px;
  font-size:14px;color:var(--navy-800);font-weight:600;letter-spacing:.1em;
}
.hero-motto .bar{width:26px;height:2px;background:var(--accent);border-radius:2px;}
.hero-btns{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;}
.hero-trust{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:9px 22px;font-size:13px;}
.hero-trust span{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--navy-700);}
.hero-trust span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand);}
.hero-facts{margin-top:20px;display:flex;gap:0;flex-wrap:wrap;}
.hero-facts div{padding-right:34px;margin-right:34px;border-right:1px solid var(--line);}
.hero-facts div:last-child{border:0;margin-right:0;padding-right:0;}
.hero-facts b{display:block;font-size:28px;font-weight:800;color:var(--navy-800);line-height:1.2;letter-spacing:-.02em;}
.hero-facts b i{font-style:normal;color:var(--brand);font-size:20px;}
.hero-facts span{font-size:13.5px;color:var(--ink-3);}

/* Hero 右侧：视频位（原驾驶舱那张卡片的位置）
   有 hero-demo 视频时由 build_skeleton.py 把驾驶舱整块替换成 .hero-media；无视频则保持驾驶舱 */
.hero-media{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:#fff;box-shadow:var(--shadow-lg);aspect-ratio:1200/976;
  width:100%;min-width:0;   /* ⚠️ 窄屏单列时 video 的固有宽度(1200px)会把栅格列撑破，必须压住 */
}
.hero-media video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer;}
@media(max-width:1000px){.hero-media{max-width:560px;}}
/* 尊重系统「减少动态效果」偏好：不播视频，回落成静态封面 */
@media(prefers-reduced-motion:reduce){
  .hero-media{background-image:var(--hm-poster);background-size:cover;background-position:center;}
  .hero-media video{visibility:hidden;}
}

/* Hero 右侧：驾驶舱 */
.cockpit{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:24px;position:relative;
}
.cockpit::after{
  content:"";position:absolute;inset:auto 20px -14px 20px;height:28px;
  background:rgba(10,42,94,.10);filter:blur(20px);border-radius:50%;z-index:-1;
}
.ck-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--line-2);}
.ck-head h3{font-size:15.5px;font-weight:700;}
.ck-head .live{font-size:12px;color:#0E9F6E;background:#E7F7F0;border-radius:999px;padding:4px 11px;font-weight:600;}
.ck-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0;}
.ck-kpi div{background:var(--bg-soft);border-radius:11px;padding:14px 13px;}
.ck-kpi span{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:5px;}
.ck-kpi b{font-size:21px;font-weight:800;color:var(--navy-800);letter-spacing:-.02em;}
.ck-kpi b i{font-style:normal;font-size:13px;color:var(--ink-3);font-weight:600;}
.ck-row{margin-top:15px;}
.ck-row .t{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2);margin-bottom:7px;}
.ck-row .t b{color:var(--navy-800);font-weight:700;}
.track{height:7px;background:var(--line-2);border-radius:99px;overflow:hidden;}
.track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--cyan));}
.track.warn i{background:linear-gradient(90deg,#E8883A,#F2A33C);}
.ck-bars{display:flex;align-items:flex-end;gap:9px;height:76px;margin-top:20px;padding-top:14px;border-top:1px dashed var(--line);}
.ck-bars div{flex:1;background:linear-gradient(180deg,#DCEAFB,#B9D5F7);border-radius:5px 5px 0 0;position:relative;}
.ck-bars div.on{background:linear-gradient(180deg,var(--brand-600),var(--brand));}
.ck-foot{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap;}
.chip{font-size:12px;padding:5px 11px;border-radius:999px;background:var(--brand-100);color:var(--brand);font-weight:600;}
.chip.g{background:#E7F7F0;color:#0E9F6E;}
@media(max-width:1000px){
  .hero .wrap{grid-template-columns:minmax(0,1fr);gap:44px;}
  .hero h1{font-size:38px;}
  .cockpit{max-width:560px;}
}
@media(max-width:560px){
  .hero h1{font-size:30px;}
  .hero-facts div{padding-right:20px;margin-right:20px;}
  .hero-facts b{font-size:23px;}
}

/* ============ 客户 LOGO 墙（规格参照老站 .Floor003203 / 2026-10-01 改） ============
   老站口径：浅灰蓝底 #F2F4F8、6 列白色直角卡片、横纵间隙均为容器宽 2%、
   卡片比例 2.5:1、LOGO 在卡内 max 74%×64%（留白多）、hover scale(1.1) 0.5s。
   卡片比例 2.5:1 由老站 padding-bottom:6%(相对容器宽) ÷ 格宽 15% = 0.4 换算而来。 */
.clients{padding:clamp(56px,5.2vw,100px) 0;background:#F2F4F8;}   /* 老站 padding:calc(100/1920*100vw) 0 */
/* 客户墙容器对齐导航那条 1600px 视觉带（左边缘与页头 LOGO 同一条线）：站内其它板块的
   .wrap 只有 1220px，6 列卡片会被压到 170×68，比老站（230×92）小一圈、显得空 */
.clients .wrap{
  max-width:none;
  padding-left:clamp(96px,calc(50vw - 704px),520px);
  padding-right:clamp(96px,calc(50vw - 704px),520px);
}
.logo-grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  row-gap:clamp(8px,1.92vw,31px);column-gap:clamp(8px,1.92vw,31px);   /* 老站 2%（相对容器宽） */
}
.logo-grid div{
  background:#fff;aspect-ratio:2.5;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 5px rgba(108,129,176,.10);transition:box-shadow .3s;
}
.logo-grid div:hover{box-shadow:0 2px 12px rgba(108,129,176,.18);}
.logo-grid img{max-width:74%;max-height:68%;width:auto;height:auto;object-fit:contain;transition:transform .5s ease;}
/* 超宽横条 LOGO（内容宽高比 ≥4:1，见 build_clients.py 的 WIDE_RATIO）：2.5:1 卡内按宽度
   贴合后会缩成一条细线（如「KELIDA 柯利达装饰（股票代码：603828）」≈7.4:1）→ 放宽显示宽度 */
.logo-grid img.w{max-width:92%;}
.logo-grid div:hover img{transform:scale(1.1);}
@media(max-width:1100px){.logo-grid{grid-template-columns:repeat(5,minmax(0,1fr));}}
@media(max-width:900px){.logo-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(max-width:620px){.logo-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(min-width:1201px) and (max-width:1279px){
  .clients .wrap{padding-left:56px;padding-right:56px;}
}
@media(max-width:1200px){
  .clients .wrap{padding-left:20px;padding-right:20px;}
}
.clients .note{margin-top:clamp(18px,2vw,30px);font-size:13.5px;color:#7A8499;}

/* ============ 产品中心 ============ */
.prod-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
.prod{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 24px;transition:.26s;display:flex;flex-direction:column;position:relative;overflow:hidden;
}
.prod::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--cyan));transform:scaleX(0);transform-origin:left;transition:.3s;}
.prod:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#CFE0F7;}
.prod:hover::before{transform:scaleX(1);}
.prod-ico{
  height:46px;min-width:46px;padding:0 13px;border-radius:12px;
  background:var(--brand-100);color:var(--brand);display:inline-flex;
  align-items:center;justify-content:center;font-weight:800;font-size:16px;
  letter-spacing:-.01em;margin-bottom:18px;white-space:nowrap;
}
.prod h3{font-size:20px;font-weight:800;margin-bottom:6px;}
.prod .en{font-size:12px;letter-spacing:.12em;color:var(--ink-3);font-weight:600;margin-bottom:12px;text-transform:uppercase;}
.prod p{font-size:14.4px;color:var(--ink-2);line-height:1.78;flex:1;}
.prod ul{margin:16px 0 0;display:grid;gap:8px;}
.prod ul li{font-size:13.6px;color:var(--ink-2);padding-left:19px;position:relative;}
.prod ul li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;background:var(--cyan);opacity:.65;}
.prod .for{margin-top:18px;padding-top:15px;border-top:1px dashed var(--line);font-size:13px;color:var(--ink-3);line-height:1.7;}
.prod .for b{color:var(--navy-800);}
.prod .go{margin-top:16px;font-size:14px;font-weight:700;color:var(--brand);}
.prod .go::after{content:" →";transition:.2s;}
.prod:hover .go::after{margin-left:4px;}
@media(max-width:1100px){.prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.prod-grid{grid-template-columns:1fr;}}

/* ============ 解决方案 ============ */
.sol-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.sol{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;transition:.26s;position:relative;
}
.sol:hover{border-color:#BBD4F3;box-shadow:var(--shadow);transform:translateY(-4px);}
.sol-top{display:flex;align-items:center;gap:13px;margin-bottom:14px;}
.sol-num{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(140deg,var(--navy-800),var(--brand));
  color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;
}
.sol h3{font-size:17.5px;font-weight:700;line-height:1.4;}
.sol h3 span{display:block;font-size:12.5px;color:var(--ink-3);font-weight:500;letter-spacing:.02em;margin-top:2px;}
.sol p{font-size:14.2px;color:var(--ink-2);line-height:1.78;}
.sol .tags{margin-top:15px;display:flex;flex-wrap:wrap;gap:7px;}
.sol .tags i{font-style:normal;font-size:12.2px;color:var(--ink-2);background:var(--bg-soft);border:1px solid var(--line-2);border-radius:6px;padding:3px 9px;}
.sol .cust{margin-top:14px;font-size:12.6px;color:var(--ink-3);}
.sol .cust b{color:var(--ink-2);font-weight:600;}
@media(max-width:1000px){.sol-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){.sol-grid{grid-template-columns:1fr;}}

/* ============ 能力矩阵（深色区） ============ */
.dark{
  background:
    radial-gradient(800px 400px at 82% 0%,rgba(18,165,224,.22),transparent 60%),
    linear-gradient(155deg,var(--navy-900) 0%,var(--navy-800) 55%,#0C3168 100%);
  color:#fff;position:relative;overflow:hidden;
}
.dark::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:62px 62px;opacity:.55;
}
.dark .wrap{position:relative;}
.dark .sec-title{color:#fff;}
.dark .sec-sub{color:#B7C7DF;}
.dark .sec-tag{background:rgba(255,255,255,.12);color:#CFE4FF;}
.cap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.cap{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius);padding:26px 24px;transition:.26s;
}
.cap:hover{background:rgba(255,255,255,.1);border-color:rgba(18,165,224,.5);transform:translateY(-4px);}
.cap .n{font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--cyan);margin-bottom:12px;}
.cap h3{font-size:18px;font-weight:700;color:#fff;margin-bottom:10px;}
.cap p{font-size:14.2px;color:#B7C7DF;line-height:1.8;}
@media(max-width:1000px){.cap-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){.cap-grid{grid-template-columns:1fr;}}

/* ============ 为什么选择首信 ============ */
.why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
.why{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;transition:.26s;}
.why:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:#CFE0F7;}
.why .ic{
  width:44px;height:44px;border-radius:12px;margin-bottom:16px;
  background:linear-gradient(140deg,#E8F1FD,#D3E6FC);color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;
}
.why h3{font-size:17.5px;font-weight:700;margin-bottom:10px;}
.why p{font-size:14.2px;color:var(--ink-2);line-height:1.8;}
@media(max-width:1000px){.why-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.why-grid{grid-template-columns:1fr;}}

/* ============ 数据实力条 ============ */
.stats{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:52px 0;}
.stats .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;text-align:center;}
.stats b{display:block;font-size:42px;font-weight:800;color:var(--brand);line-height:1.1;letter-spacing:-.03em;}
.stats b i{font-style:normal;font-size:22px;}
.stats span{display:block;margin-top:8px;font-size:14.5px;color:var(--ink-2);}
@media(max-width:720px){.stats .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;}.stats b{font-size:34px;}}

/* ============ 应用案例 ============ */
.case-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.case-g{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;}
.case-g h3{
  font-size:16px;font-weight:800;padding-bottom:13px;margin-bottom:15px;
  border-bottom:2px solid var(--line-2);display:flex;align-items:center;gap:9px;
}
.case-g h3 i{width:9px;height:9px;border-radius:3px;background:var(--brand);display:block;font-style:normal;}
.case-g ul{display:flex;flex-wrap:wrap;gap:8px;}
.case-g ul li{font-size:13.6px;color:var(--ink-2);background:var(--bg-soft);border-radius:7px;padding:6px 12px;transition:.18s;cursor:pointer;}
.case-g ul li:hover{background:var(--brand-100);color:var(--brand);}
/* 代表客户：只列已核实的客户名，比纯行业标签可信得多，也让 AI 能抓到实体 */
.case-g .cust{margin-top:15px;padding-top:13px;border-top:1px dashed var(--line-2);font-size:12.6px;color:var(--ink-3);line-height:1.72;}
.case-g h3 a{color:inherit;transition:.18s;}
.case-g h3 a:hover{color:var(--brand);}
.case-g .case-links{margin-top:13px;padding-top:13px;border-top:1px dashed var(--line-2);display:flex;flex-direction:column;gap:9px;}
.case-g .case-links a{font-size:13px;line-height:1.58;color:var(--brand);transition:.18s;}
.case-g .case-links a:hover{text-decoration:underline;}
.case-g .case-links .more{font-size:12.6px;color:var(--ink-3);}
.case-g .case-links .none{font-size:12.6px;color:var(--ink-3);}
@media(max-width:1000px){.case-groups{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.case-groups{grid-template-columns:1fr;}}

/* ============ 新闻 ============ */
/* ⚠️ align-items 用 start 而不是 stretch：右栏条目数随内容增长（洞察攒够前只有 2 条），
   强行拉伸等高会把行撑成 250px 的空壳。宁可底部留白，也不要拉长的行。 */
.news-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:34px;align-items:start;}
.news-main{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;transition:.26s;}
.news-main:hover{box-shadow:var(--shadow);border-color:#CFE0F7;}
.news-main .date{font-size:13px;color:var(--brand);font-weight:700;letter-spacing:.06em;}
.news-main h3{font-size:22px;font-weight:800;line-height:1.5;margin:12px 0 14px;}
.news-main p{font-size:14.6px;color:var(--ink-2);line-height:1.85;}
.news-main .rd{margin-top:20px;font-size:14px;font-weight:700;color:var(--brand);}

/* 带配图的主卡：图置顶、文字另起一段自带内边距。
   ⚠️ 图源是「新闻正文里的客户现场实景图」或「老站封面」，比例不固定 ——
   现场照手机拍 4:3、相机 3:2 都有，**不能靠 height:auto 放任**：一张竖图就能把卡片
   撑成两屏。所以图固定 16:9 取景 + object-fit:cover，多出来的居中裁掉，卡片高度可控。
   · 选 16:9 而不是更扁的 2.6:1：现场照多为 4:3/3:2，16:9 只裁掉 16% 左右，
     居中裁切基本能保住主体（人、门头、现场）。
   · ⚠️ 这个 cover 只作用在这块小视窗里；案例详情页那条「整图不裁」的规则不适用
     于卡片配图，两者是不同场景，别互相套。
   · ⚠️ 比 16:9 更扁的图（老站的 KV 海报那种）由 build_skeleton.py 的 wide_ratio()
     在**行内**覆盖 img 的 aspect-ratio，按自己的比例显示、不裁。

   —— 第五版（2026-10-02 邦哥：这块占位太大、图别铺满）：
   图从「通栏 630×354」改成「**居中限宽 520×292**」，整块高度随之掉约 50px。
   520 不是随手取的 —— 它就是站内缩略图 .t.webp 的原始像素宽度，
   在这个尺寸上 **1:1 不放大**、最清晰；同时左右天然各让出 56px 白边，
   图从「铺满的封面」变成「卡片里的一张插图」。
   ⚠️ 别再往下压了：.t.webp 只有 520 宽，显示宽度小于 520 就进入放大区，会糊。
   要让图更小，得先把缩略图生成尺寸调大，那是另一件事。
   ⚠️ 图区**不设底色**（原来是 --bg-soft）——图不铺满后，底色会变成一块可见的灰块；
   留白跟卡片同色才对。

   —— 第七版（2026-10-02 邦哥：图两边要与下方文字对齐、标线跟图等宽、图用直角）：
   图从「居中限宽 520」改成「**跟随容器满宽 572**」——即与下方文字区
   （`.nm-body` 左右同样是 30px 内边距）**左右边界完全对齐**，标线自然也是同一条边。
   ⚠️ 两个 30px 内边距是这套对齐的**唯一支点**：`.nm-pic` 与 `.nm-body` 的左右
   padding 必须相同，否则图与文字就会错开。
   ⚠️ 图源 `.t.webp` 是 520px 宽，显示 572 ⇒ 放大约 1.1×，肉眼不可辨。
   若哪天要求更清晰，改 `_tools/media.py` 与 `build_news_covers.py` 里的 THUMB_W
   （两个文件同口径），别在这里写死显示宽度。
   ⚠️ `border-radius:0`（直角）：图与文字同宽后，图变成一条「内容的头」而不是
   卡片里的一张插图，圆角会跟上下方的直边文字打架。 */
.news-main.has-pic{padding:0;overflow:hidden;}
.news-main.has-pic .nm-pic{padding:16px 30px 0;}
.news-main.has-pic .nm-pic img{
  display:block;width:100%;
  aspect-ratio:16/9;height:auto;object-fit:cover;border-radius:0;
  transition:transform .55s ease;
}
.news-main.has-pic:hover .nm-pic img{transform:scale(1.03);}
.news-main.has-pic .nm-body{padding:18px 30px 22px;display:flex;flex-direction:column;flex:1;}
/* ⚠️ nm-body 必须是 flex 列，「阅读全文」的 margin-top:auto 才有意义。
   不带图的主卡里 .rd 是 .news-main 的直接子项，auto 生效；
   带了图就多了一层 .nm-body，若不设 flex，auto 在普通块流里等于 0，
   「阅读全文」就会紧贴摘要、留白全堆到卡底 —— 两种卡长得不一样。 */

/* 右栏简讯列：行间线用 --line-row（比 --line-2 明显）；
   首行也加一条顶线，形成「一条条有边界」的清单观感（参照老站首页「公司新闻」） */
.news-list{display:flex;flex-direction:column;}
.news-list a{
  display:flex;gap:18px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--line-row);transition:.2s;
}
.news-list a:first-child{border-top:1px solid var(--line-row);}
.news-list a:hover .nt{color:var(--brand);}
.news-list .nd{
  flex-shrink:0;width:68px;text-align:center;color:var(--ink-3);font-size:13px;
  border-right:1px solid var(--line-row);padding-right:14px;
}
.news-list .nd b{display:block;font-size:17px;color:var(--navy-800);font-weight:800;line-height:1.3;}
.news-list .nt{font-size:15px;font-weight:600;line-height:1.6;transition:.2s;}

/* ============ 签约与动态区（.news-grid--log）：与「行业洞察」拉开区分 ============
   两块结构同源（同用 .news-grid/.news-main/.news-list），但语义与气质不同：
   洞察＝「文章」（纯文字卡 + 日期块横线清单），这里＝「动态流」（带图时间线）。
   差异做在四处：① 左右两列等高　② 主卡顶部品牌色标线　③ 右栏时间线（竖轴＋圆点）
   ④ 配图：主卡居中限宽图 + 右栏缩略图 —— 图来自客户现场实景（新闻正文第一张）。
   ⚠️ 只加 --log 修饰类，**不动 .news-list 本体** —— 洞察区与详情页「相关阅读」仍走原样式。 */
.news-grid--log{align-items:stretch;}
/* ⚠️ 主卡无图时**不做等高**（2026-10-02 第四次调整）。
   等高是给「带图主卡」用的——图片高度和右栏刚好相当，拉平后严丝合缝、底边齐。
   一旦主卡没图，纯文字只有 ~300px，硬拉伸到右栏的 675px 会在卡中间留出一个
   近 400px 的空洞（日期/标题在顶、「阅读全文」在底，中间全白），很难看。
   所以：**有图就等高、无图就各自自然高度**，由 build_skeleton.py 按有无配图加类。
   等哪天给主卡那条补上现场图，这个类自动消失，等高自动回来，不用手改。 */
.news-grid--log.news-grid--nopic{align-items:start;}
.news-grid--log .news-main{
  display:flex;flex-direction:column;
  /* 去白底（2026-10-02 第六次，邦哥）：主卡不再是一张「白卡片」，图和文字直接落在区底色上，
     整块变轻，跟右栏的时间线更像同一层内容，而不是「一张卡 + 一列清单」。
     ⚠️ 只覆盖 --log（首页动态区）—— 洞察区、详情页「相关阅读」仍是白卡片，**勿动 .news-main 本体**。
     ⚠️ 白卡一去，原来的 hover（阴影 + 描边）就没了作用对象（没有边界可描），
     改成标题变色做反馈；图本身的 hover 放大仍保留。 */
  background:transparent;border:0;border-radius:0;box-shadow:none;
}
/* 顶部品牌色标线：**与配图等宽**（= 文字区宽，三者同一条边），不做整列宽。
   整列宽（632）会比图宽出 60px、两头悬空在图外，看着像一条「分隔线」而不是这张卡的记号。
   ⚠️ 用 ::before 而不是 border-top：border 只能跟内容盒同宽（整列），做不到「比容器窄」。
   ⚠️ `calc(100% - 60px)` 里的 **60 = `.nm-pic` 左右内边距之和**，与 `.nm-body`
   的左右 padding 同值 —— 这一条就是「标线 / 图 / 文字三者左边界重合」的实现方式。
   改那两个 padding 时这里必须同步（2026-10-02 第七次：宽度不再限 520）。 */
.news-grid--log .news-main::before{
  content:"";display:block;align-self:center;
  width:calc(100% - 60px);height:3px;background:var(--brand);
}
.news-grid--log .news-main:hover{box-shadow:none;}
.news-grid--log .news-main:hover h3{color:var(--brand);}
/* 「阅读全文」沉到卡底 ⇒ 卡片被拉伸到与右栏等高时，文字区不散、留白落在链接上方。
   ⚠️ padding-top 别调大（2026-10-02 邦哥：文字下方留白太厚）：这个值直接决定
   「摘要 → 阅读全文」之间的最小间距。16px 是留白和呼吸感的平衡点。 */
.news-grid--log .news-main .rd{margin-top:auto;padding-top:16px;}
/* 主卡配图：flex 纵列里必须 flex-shrink:0，否则 aspect-ratio 会被文字区挤扁 */
.news-grid--log .news-main.has-pic .nm-pic{flex-shrink:0;}

.news-grid--log .news-list{position:relative;--tl-dot:23px;}   /* 圆点中心距每行顶 23px */
.news-grid--log .news-list a{
  position:relative;display:flex;gap:14px;align-items:flex-start;
  padding:16px 0 16px 26px;border:0;            /* 去掉横线，改由时间轴承担分隔 */
}
.news-grid--log .news-list a:first-child{border-top:0;}
.news-grid--log .news-list .nl-main{flex:1;min-width:0;}      /* min-width:0 防长标题撑破 */
/* 缩略图比例沿用新闻列表页的 .nr-thumb（16:10），全站一个口径 */
.news-grid--log .news-list .nl-thumb{
  flex-shrink:0;width:104px;aspect-ratio:16/10;border-radius:8px;
  overflow:hidden;background:#EDF1F7;
}
.news-grid--log .news-list .nl-thumb img{
  display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;
}
.news-grid--log .news-list a:hover .nl-thumb img{transform:scale(1.04);}
.news-grid--log .news-list a::before{          /* 圆点 */
  content:"";position:absolute;left:2px;top:calc(var(--tl-dot) - 4.5px);box-sizing:border-box;
  width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid var(--brand);
}
/* 轴逐段画（而不是整条贯穿）：从本行圆点下方连到下一行圆点中心，正好收在末行。
   若整条贯穿，容器底部会多伸出一截「没有圆点的尾巴」。 */
.news-grid--log .news-list a::after{
  content:"";position:absolute;left:6px;top:calc(var(--tl-dot) + 5px);
  bottom:calc(var(--tl-dot) * -1);width:1px;background:var(--line-axis);
}
.news-grid--log .news-list a:last-child::after{display:none;}
.news-grid--log .news-list a:last-child::before{   /* 「全部动态」入口：小灰点，不当成一条动态 */
  background:var(--line-axis);border-color:var(--line-axis);
  width:7px;height:7px;left:3px;top:calc(var(--tl-dot) - 3.5px);
}
.news-grid--log .news-list .nd{
  width:auto;text-align:left;border:0;padding:0;
  font-size:12.5px;color:var(--ink-3);letter-spacing:.04em;
}
.news-grid--log .news-list .nd b{
  display:inline;font-size:12.5px;color:var(--brand);font-weight:700;margin-right:0;
}
.news-grid--log .news-list .nt{margin-top:4px;}
/* 单列（手机）：时间线保留，但左侧留白与缩略图收紧一点 */
@media(max-width:900px){
  .news-grid--log .news-list a{padding-left:22px;}
  .news-grid--log .news-list::before{left:4px;}
  .news-grid--log .news-list a::before{left:1px;}
}
@media(max-width:620px){
  .news-grid--log .news-list a{gap:11px;padding-left:20px;}
  .news-grid--log .news-list .nl-thumb{width:84px;}
}
@media(max-width:900px){.news-grid{grid-template-columns:1fr;}}

/* ── 新闻列表页 ── */
.news-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px;}
.news-tabs a{font-size:14px;font-weight:600;color:var(--ink-2);background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:8px 18px;transition:.2s;}
.news-tabs a:hover{color:var(--brand);border-color:#CFE0F7;}
.news-tabs a.on{background:var(--brand);border-color:var(--brand);color:#fff;}

.news-rows{border-top:1px solid var(--line);}
.news-row{display:grid;grid-template-columns:196px minmax(0,1fr) 80px;gap:26px;align-items:center;
  padding:24px 2px;border-bottom:1px solid var(--line-2);transition:.2s;}
.news-row:hover{background:#FAFCFF;}
.news-row.no-thumb{grid-template-columns:minmax(0,1fr) 80px;}
.nr-thumb{aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#EDF1F7;}
.nr-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.news-row:hover .nr-thumb img{transform:scale(1.04);}
.nr-body h3{font-size:16.8px;font-weight:700;line-height:1.55;color:var(--ink);margin-bottom:9px;transition:.2s;}
.news-row:hover .nr-body h3{color:var(--brand);}
.nr-body p{font-size:13.8px;color:var(--ink-2);line-height:1.75;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.nr-date{text-align:center;}
.nr-date b{display:block;font-size:23px;font-weight:800;color:var(--navy-800);line-height:1.1;}
.nr-date span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px;letter-spacing:.03em;}
@media(max-width:860px){
  .news-row{grid-template-columns:112px minmax(0,1fr);
    grid-template-areas:"thumb date" "thumb body";
    gap:8px 16px;padding:18px 2px;align-items:start;}
  .news-row.no-thumb{grid-template-columns:1fr;grid-template-areas:"date" "body";}
  .nr-thumb{grid-area:thumb;}
  .nr-date{grid-area:date;display:flex;align-items:baseline;gap:7px;text-align:left;}
  .nr-date b{font-size:15px;}
  .nr-date span{margin-top:0;}
  .nr-body{grid-area:body;}
  .nr-body h3{font-size:15.6px;margin-bottom:6px;}
}

/* ── 新闻详情页 ── */
.art .news-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13.4px;color:var(--ink-3);
  padding-bottom:20px;border-bottom:1px solid var(--line-2);margin-bottom:24px;}
.art img{max-width:100%;height:auto;display:block;border-radius:8px;margin:20px auto;}
/* 新闻详情页正文插图**统一宽度 + 统一尺寸档位**（2026-10-06 邦哥两次指令）。
   ① 第一次：「插图大小都不一，保证尽量大小一致」⇒ 一律同宽，左右对齐。
   ② 第二次：「这些图确实不清晰，把图整体减小，画质是不是会好一些」⇒ 宽度降到 640 并居中。
   病根：正文图是老站搬来的，源宽 400–1400px 参差不齐；而 `.art img` 只有 `max-width:100%`
   ⇒ 比版心窄的图就按自己原尺寸显示 ⇒ 同一篇里几张图宽窄不齐（实测最夸张一篇 675px↔1400px）。
   为什么 640：76 张正文图实测 —— ≤800px 的 20 张会被放大（最狠 400px ×2.74），
   ≥1096px 的 44 张本来就清晰。收到 640 后，占大头的 520px 老站图只放大 ≈1.23 倍（肉眼基本无感），
   而不是原来的 2.11 倍；大图则由浏览器降采样，只会更锐。代价＝图整体变小、截图里的小字也变小。
   版心宽 = 1220 − wrap 48 − art 76 = 1096px；640 居中后左右各留白 228px。
   窄屏由 `max-width:100%` 自动收到容器宽。
   ⚠️ 只作用于 `article.art--news`（标记由 build_skeleton.py `body_feed_detail` 打）：
      案例详情页正文只挂一张统一封面、洞察文章是纯文字，都不适用。
   ⚠️ 封面图（`.art-fig--cover`）**不参与收敛**，仍按版心通栏 —— 见下面那行排除规则。
   ⚠️ 必须写在这行 `.art img` 之后（两者特异性同为 (0,1,1)，后写者胜）。 */
.art--news img{width:100%;max-width:640px;}
.art--news .art-fig--cover img{max-width:100%;}   /* 封面不受 640 限制，仍通栏 */
.art table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px;}
.art th,.art td{border:1px solid var(--line);padding:9px 12px;text-align:left;}
.art th{background:var(--bg-soft);font-weight:700;}
.art ul,.art ol{margin:12px 0 12px 22px;padding-left:10px;font-size:15.4px;color:var(--ink-2);line-height:1.95;}
.art ul{list-style:disc;}
.art ol{list-style:decimal;}
.art ul ul{list-style:circle;}
.art li::marker{color:var(--brand);}
.art li{margin-bottom:6px;}
.art blockquote{margin:20px 0;padding:14px 20px;background:var(--bg-soft);
  border-left:3px solid var(--brand);font-size:15px;color:var(--ink-2);line-height:1.9;}

.post-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:30px;}
.post-nav a{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;transition:.2s;}
.post-nav a:hover{border-color:#CFE0F7;box-shadow:var(--shadow);}
.post-nav span{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:6px;}
.post-nav b{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.6;}
@media(max-width:700px){.post-nav{grid-template-columns:1fr;}}

/* ============ CTA ============ */
.cta-wrap{
  background:linear-gradient(135deg,var(--navy-800) 0%,var(--brand) 100%);
  border-radius:var(--radius-lg);padding:56px 52px;color:#fff;position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:44px;align-items:center;
}
.cta-wrap::after{
  content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(18,165,224,.42),transparent 68%);
}
.cta-wrap h2{font-size:31px;font-weight:800;line-height:1.4;position:relative;}
.cta-wrap p{margin-top:14px;font-size:16px;color:#CFE0F8;line-height:1.8;position:relative;}
.cta-form{background:rgba(255,255,255,.98);border-radius:var(--radius);padding:26px;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.2);}
.cta-form h3{font-size:19px;font-weight:800;color:var(--ink);margin-bottom:6px;}
.cta-form .tip{font-size:13px;color:var(--ink-3);margin-bottom:14px;}
.cta-form .cta-desc{font-size:14px;color:var(--ink-2);line-height:1.85;margin-bottom:20px;}
.cta-form .btn{width:100%;}
.cta-form .privacy{font-size:12px;color:var(--ink-3);text-align:center;margin-top:12px;}
/* 2026-10-06：小字里挂上了《隐私政策》链接（申请试用要收手机号，得让人点得到政策原文） */
.cta-form .privacy a{color:var(--brand);text-decoration:none;}
.cta-form .privacy a:hover{text-decoration:underline;}
.cta-form .cta-alt{font-size:13px;color:var(--ink-3);text-align:center;margin-top:12px;}
.cta-form .cta-alt a{color:var(--brand);font-weight:700;text-decoration:none;}
.cta-form .cta-alt a:hover{text-decoration:underline;}
@media(max-width:900px){.cta-wrap{grid-template-columns:1fr;padding:38px 26px;gap:30px;}.cta-wrap h2{font-size:25px;}}

/* ============ 页脚 ============ */
.foot{background:var(--navy-900);color:#93A6C0;padding:64px 0 0;font-size:14px;line-height:1.85;}
/* 页脚 6 列：品牌 / 产品中心 / 案例与动态 / 行业洞察 / 关于首信 / 联系方式
   （2026-10-06 由 5 列改 6 列 —— 原「关于首信」列里混着「行业案例」「新闻资讯」两个一级栏目，
   列名与内容不符，拆出独立的「案例与动态」列。⚠️ 列数必须与 build_skeleton.py footer() 的列数
   一致，两边同时改；版心 1220，6 列下 1fr≈159px，中文 4 字链接放得下。 */
.foot-top{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(4,minmax(0,1fr)) minmax(0,1.45fr);gap:24px;padding-bottom:46px;}
.foot .logo img{height:38px;}
.foot-about{margin-top:18px;font-size:13.8px;color:#93A6C0;line-height:1.9;}
.foot h4{color:#fff;font-size:15px;font-weight:700;margin-bottom:16px;letter-spacing:.02em;}
.foot li{margin-bottom:9px;}
.foot li a{color:#93A6C0;transition:.2s;}
.foot li a:hover{color:#fff;}
.foot-contact div{margin-bottom:11px;display:flex;gap:9px;align-items:flex-start;font-size:13.8px;}
.foot-contact i{color:var(--cyan);font-style:normal;font-weight:700;flex-shrink:0;}
/* 页脚公众号二维码：白底方块＝二维码自带的静默区，深色页脚上不能再压色。
   ⚠️ 选择器带 .foot-contact 前缀是为了压过上面的 `.foot-contact div{display:flex}`（否则会横排）。 */
.foot-contact div.foot-qr{margin:16px 0 0;display:block;font-size:12.5px;}
.foot-qr img{display:block;width:120px;height:120px;background:#fff;border-radius:8px;}
.foot-qr span{display:block;margin-top:8px;color:#93A6C0;letter-spacing:.02em;}
.foot-bot{
  border-top:1px solid rgba(255,255,255,.1);padding:22px 0;font-size:13px;color:#7C90AD;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.foot-bot a:hover{color:#fff;}
/* 断点 1200（2026-10-06 由 1000 上调）：6 列在 1000–1200 之间每列只剩 ~140px，
   「首信工程项目管理软件」会被硬折行、地址列也被压扁 ⇒ 直接切 2 列更耐看。 */
@media(max-width:1200px){.foot-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;}}
@media(max-width:600px){.foot-top{grid-template-columns:minmax(0,1fr);}}

/* ============ 小屏微调 ============ */
@media(max-width:480px){
  .wrap{padding:0 16px;}
  .nav .wrap{padding-left:16px;padding-right:16px;}
  .cockpit{padding:18px;}
  .ck-kpi{gap:8px;}
  .ck-kpi div{padding:11px 9px;}
  .ck-kpi b{font-size:17px;}
  .ck-kpi span{font-size:11.5px;}
  .ck-bars{height:62px;gap:6px;margin-top:16px;}
  .hero-facts div{padding-right:16px;margin-right:16px;}
  .hero-facts b{font-size:21px;}
  .hero-facts span{font-size:12px;}
  .stats b{font-size:29px;}
  .stats .wrap{gap:24px;}
  .cta-wrap{padding:30px 18px;}
  .cta-form{padding:20px;}
  .sec{padding:56px 0;}
  .sec-title{font-size:25px;}
  .cta-wrap h2{font-size:23px;}
  .foot-top{padding-bottom:30px;}
  .foot-bot{justify-content:center;text-align:center;}
  /* ⚠️⚠️ 必须带 aspect-ratio:auto（2026-10-06 修）：`.logo-grid div` 主规则有 `aspect-ratio:2.5`，
     与这里的 `height:76px` 一叠加就反推出固有宽 76×2.5=190px，卡片宽度不再跟随网格列宽 ——
     390px 下 3 列列宽只有 93px，卡片却硬撑 190px，整行右边界冲到 434px（溢出 44px，
     被 overflow-x 裁掉，最右一列 LOGO 看不见）。
     ⚠️ 只加 min-width:0 **无效**（aspect-ratio 决定的是 width 的优选值，不受 min-width 约束），
        必须把 aspect-ratio 关掉，宽度才会老实交给 grid 的 stretch。 */
  .logo-grid div{height:76px;aspect-ratio:auto;min-width:0;}
  .logo-grid img{max-height:42px;}
}

/* ============ 首页右侧悬浮咨询栏（2026-10-10 新增）============
   复刻老站首页右侧栏目：微信咨询 / 在线咨询 / 服务热线 / 预约演示。
   ⚠️ 只出现在首页 —— HTML 由 build_skeleton.py 的 body_home() 生成，不在母板正文里
      （母板正文只到「页脚」标记之前，所以别往这里塞 HTML）。
   ⚠️ 它是 position:fixed，不占文档流；DOM 位置在首页末尾。
   ⚠️ 窄屏隐藏 —— 断点 1360 不是随手取的：版心 `--maxw:1220` + `.wrap` 左右各 24px
      内边距 ⇒ 视口 W 下正文右边界 = W/2 + 586；咨询栏占最右 18(边距) + 74(按钮) = 92px。
      解 W/2 + 586 ≤ W − 92 得 W ≥ 1356 —— 低于这个宽度就会压住正文右边缘。
      取 1360 留一点余量（1366 的笔记本仍显示，1280 的屏则整块收起）。
   ⚠️ 改按钮尺寸或 right 边距后，**必须重算上面的断点**，否则窄屏会压住正文。
   ⚠️⚠️ 隐藏用的 @media 必须写在本段的**最末尾**（见本段最后一行）：
      它和 `.side-q{display:flex}` 同为单类选择器、优先级相同，
      放前面会被后面的 `display:flex` 盖掉（2026-10-10 踩过）。
   ⚠️⚠️ 本段 .side-q 规则**只允许存在一份** —— 2026-10-10 踩过：编辑时把新规则
      追加进来却没删旧规则，旧规则在后面同优先级覆盖新规则 ⇒ 改了等于没改
      （表现为「右边仍是方角、宽度没变」）。**改完务必 grep 产物 site.css 核对。** */
.side-q{
  position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:900;
  display:flex;flex-direction:column;gap:8px;
}
.side-q .sq-item{position:relative;}
/* 正方形按钮（2026-10-10 邦哥定：四个框要正方、圆角再方一点、离右边缘留点边）
   ⚠️ 改 width 必须同步改 height，否则又变长方形。
   ⚠️ border-radius 必须是**单值**（四角统一）。早期写的是 `12px 0 0 12px`
      ——那是"贴右边缘、只圆左侧"的写法；现在离边 18px，四角都要圆。
      半径 10-10 由 12 → 8 → **6**（邦哥两次说"太圆/再小一些"）。 */
.side-q .sq-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  width:74px;height:74px;padding:0;margin-left:auto;
  background:#fff;border:1px solid var(--line);
  border-radius:6px;box-shadow:var(--shadow-sm);
  color:var(--ink-2);cursor:pointer;transition:.2s ease;
}
.side-q .sq-btn svg{width:23px;height:23px;display:block;fill:var(--brand);}
/* 「微信咨询」用 AI 头像替线性图标：圆形裁切，比 SVG 图标略大才不显小 */
.side-q .sq-btn img.sq-avatar{
  width:28px;height:28px;border-radius:50%;display:block;object-fit:cover;
  border:1.5px solid #E3EDF9;
}
.side-q .sq-tx{font-size:12px;line-height:1.1;letter-spacing:.01em;}
/* 悬停：只变色 + 抬阴影，不做左右位移 —— 已离右边缘 18px，再左滑就"脱轨"了 */
.side-q .sq-item:hover .sq-btn{
  background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:var(--shadow);
}
.side-q .sq-item:hover .sq-btn svg{fill:#fff;}
.side-q .sq-item:hover .sq-btn img.sq-avatar{border-color:rgba(255,255,255,.9);}
/* 悬停弹层（二维码 / 电话）—— 从按钮左侧滑出 */
.side-q .sq-pop{
  position:absolute;right:calc(100% + 10px);top:50%;transform:translate(10px,-50%);
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:14px;
  opacity:0;visibility:hidden;pointer-events:none;transition:.2s ease;
}
.side-q .sq-item:hover .sq-pop{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(0,-50%);
}
.side-q .sq-pop img{width:180px;height:auto;border-radius:8px;}
.side-q .sq-pop .sq-cap{
  margin-top:9px;font-size:12px;color:var(--ink-3);text-align:center;white-space:nowrap;
}
.side-q .sq-pop-tel{padding:14px 16px;display:flex;flex-direction:column;gap:8px;}
.side-q .sq-pop-tel a{
  display:block;white-space:nowrap;font-size:15px;font-weight:600;
  color:var(--brand);background:var(--brand-100);border-radius:9px;padding:8px 14px;transition:.18s;
}
.side-q .sq-pop-tel a:hover{background:var(--brand);color:#fff;}
/* ⚠️ 必须留在这段最末尾（原因见上面 .side-q 注释） */
@media(max-width:1360px){.side-q{display:none;}}

/* 导航样式已在基础样式里定义（满宽 + 100px 边距 + 宽下拉层），此处不再覆盖 */

/* 文章末尾的「常见问答」（2026-10-07 加，GEO 用）
   · 结构＝<dl class="qa"><dt>问</dt><dd>答</dd>…</dl>，由 build_skeleton.py 的
     faq_section() 在渲染时把正文末尾的 `## 常见问答` 小节**就地升级**而来。
   · 同时产出 FAQPage 结构化数据。**页面可见的问答与标记内容严格一致** ——
     这是 Google 对 FAQ 标记的硬性要求（标记不能凭空出现）。
   · 分工：faq_section / faq_ld 在 build_skeleton.py；作者写法见《网站维护手册》场景 B2。
   ⚠️ 全站正文**一律不加粗**（strip_bold 那层的既定规则），所以这里靠
      **颜色 + 左侧细线**区分问答，不要用 font-weight 提权。 */
.qa{margin:16px 0 0;border-left:2px solid var(--line);padding-left:18px;}
.qa dt{color:var(--ink);font-size:16.5px;line-height:1.75;margin:0;}
.qa dt+dd{margin:7px 0 20px;}
.qa dd{margin:0;color:var(--ink-2);line-height:1.9;}
.qa dd:last-child{margin-bottom:0;}

/* 长文目录 + 标题锚点（2026-10-09 加）
   · 稿子里写一行 `[TOC]` ⇒ md2html.render() 就地产出 <nav class="toc">（列出本文全部 ##）。
   · 每个 <h3>/<h4> 由 md2html 自动带 `id="s-N"` 与一个 ¶ 角标。
   用途：① 长文（本项目最长一篇 4242 字、7 节 6 表）访客能一键跳到想看的段落；
        ② 站外（知乎/公众号/客户邮件）可以直接链到 /insights/glossary/xxx/#s-3 那一节。

   ⚠️⚠️ `scroll-margin-top` 是整个锚点机制的**必需件**，不是美化：
       导航条是 `position:sticky;top:0`、高 72px。跳转时浏览器会把目标标题对齐到
       视口顶端 ⇒ 标题被导航**整个盖住**，访客看到的是「跳到某处但不知道跳到了哪」。
       留 96px（72 导航 + 24 呼吸）把它顶下来。窄屏导航 64px，媒体查询里改成 84px。
   ⚠️ 角标 `¶` 用默认隐藏、悬停才现：常显会在每个标题右侧挂一串符号，版面发碎。
       触屏没有 hover ⇒ 移动端角标一律不显示（目录已经承担了跳转职责）。
   ⚠️ 目录条目**不加黑色加粗**、只用一种深色：全站正文不加粗是既定规则，
       目录属于正文容器，跟着走。 */
.art h3[id],.art h4[id]{scroll-margin-top:96px;}
.toc{margin:22px 0 6px;padding:18px 22px;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:12px;}
.toc>b{display:block;font-size:13px;letter-spacing:.08em;color:var(--ink-3);
  margin-bottom:9px;}
.toc ol{margin:0;padding-left:20px;column-count:2;column-gap:30px;}
.toc li{margin:0 0 4px;font-size:14.6px;line-height:1.85;}
.toc a{color:var(--ink-2);transition:.2s;}
.toc a:hover{color:var(--brand);}
.h-anchor{margin-left:7px;font-size:13px;color:#B9C6D8;opacity:0;
  transition:.2s;text-decoration:none;}
.art h3:hover .h-anchor,.art h4:hover .h-anchor{opacity:1;}
.h-anchor:hover{color:var(--brand);}
@media(max-width:820px){
  .art h3[id],.art h4[id]{scroll-margin-top:84px;}
  .toc ol{column-count:1;}
}
/* 触屏无 hover ⇒ 角标不显示（不是"藏起来"，是不渲染出可点区域，免得误触） */
@media(hover:none){.h-anchor{display:none;}}

/* 正文里的站内互链（2026-10-09 加）
   · 产出来源＝稿子里的 `[[链:slug|锚文本]]`，经 build_skeleton.resolve_inlinks()
     补上真实 href（稿子只写 slug，理由见 md2html.py 文件头）。
   · 只作用于**正文容器里的** <a.inlink>，不动导航/卡片/页脚等处已有的链接样式。
   ⚠️ 内链要"看得出是链接、但别跳出来抢正文的注意力"：所以用品牌蓝 + 下划线，
      不用按钮/加粗（全站正文不加粗是既定规则）。
   ⚠️ 外链（target=_blank / 站外域名）加一个小箭头 ↗ —— 内链不加，避免满篇箭头。
      这条只在有外链时才生效，目前洞察稿里都是内链。 */
.art a.inlink{color:var(--brand);border-bottom:1px solid #BBD2F0;transition:.18s;}
.art a.inlink:hover{color:var(--navy-800);border-bottom-color:var(--navy-800);}
.qa dd a.inlink,.toc a.inlink{color:var(--brand);border-bottom:0;}

/* ============ 骨架专用样式（上线前可保留，不影响正式页） ============ */
.skel{background:#FFF8E6;border:1px dashed #E0BF6A;border-radius:10px;padding:12px 18px;
  font-size:13.5px;color:#8A6D1F;margin:20px 0 0;line-height:1.7;}
.skel b{color:#7A5C10;}

/* 面包屑（2026-10-06 晚 邦哥：「放到 banner 图的下方，不压在 banner 图上」）
   ⇒ 页头 `<section>` **之后**的一条独立浅色带（插在哪儿见 build_skeleton.py 的 `embed_crumb()`）。
   ⚠️ 底色回到「白 + 下边框」：它要同时压住「深色 banner 之下的白条」与「白底页头之下的白条」。
      上一版那组"深色页头里转白字"的规则（`.pgbnr>.crumb` / `.pic-hero>.crumb`）**已全部撤掉**，
      别再捡回来 —— 现在面包屑根本不在页头里面了。
   ⚠️ 页头自身的下边框由 `has-crumb` 去掉（分界交给面包屑这条线），否则两条线夹着面包屑、版面发碎。
   ⚠️ 必须是 min-height 而非 height（2026-10-06 修）：窄屏下详情页面包屑末项是整条标题，
      会折成两行，固定 46px 装不下 ⇒ 第二行会溢出。桌面仍是一行 46px。 */
.crumb{background:#fff;border-bottom:1px solid var(--line-2);font-size:13.5px;color:var(--ink-3);}
.crumb .wrap{display:flex;align-items:center;gap:9px;min-height:46px;flex-wrap:wrap;}
.crumb a{color:var(--ink-2);transition:.2s;}
.crumb a:hover{color:var(--brand);}
.crumb .sep{color:#C6D1E0;}
/* 页头下面接着面包屑时，页头自己那条下边框不出（避免双线夹着面包屑）。
   `.pgbnr` 本来就没有下边框，这里只需要管 `.page-hero` 一族（`.pic-hero` 原本就是 transparent）。 */
.page-hero.has-crumb{border-bottom-color:transparent;}

/* 内页头 */
.page-hero{padding:52px 0 44px;background:linear-gradient(180deg,#FFFFFF 0%,#F7FAFE 100%);border-bottom:1px solid var(--line);position:relative;}
.page-hero .tagline{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.14em;
  color:var(--brand);background:var(--brand-100);border-radius:999px;padding:6px 15px;margin-bottom:16px;}
.page-hero h1{font-size:37px;font-weight:800;letter-spacing:-.02em;line-height:1.32;}
.page-hero .lead{margin-top:16px;font-size:16.5px;color:var(--ink-2);max-width:820px;line-height:1.85;}
.page-hero .meta{margin-top:18px;display:flex;gap:20px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-3);}
.page-hero .meta .sign{color:var(--ink-2);font-weight:600;}
.nr-date.yr b{font-size:19px;letter-spacing:-.01em;}
.case-upd{border-left:3px solid var(--brand);padding-left:16px;}
.case-upd p{color:var(--ink-2);}
.case-upd a{color:var(--brand);font-weight:600;margin-left:8px;white-space:nowrap;}
@media(max-width:640px){.page-hero h1{font-size:27px;}.page-hero{padding:36px 0 30px;}}

/* 案例详情页页头：共用 banner 图 + 文字压图（2026-10-06 邦哥定）
   ⚠️ 高度**故意保持改版前那一档**（padding 38/32，窄屏 28/24，与原来的 `--slim` 同值）——
      邦哥原话「现在的案例详情表头高度就可以」。所以只换底色、不动任何尺寸：
      · 图放在 `.pic-hero-bg`（absolute inset:0）里 ⇒ **页头高度仍由文字撑**（桌面 137px），
        图 1920×440 再高也撑不动页头；不用 background-image 是为了让 <img> 能被 AI/爬虫读到 alt。
      · 左侧压暗遮罩（::before）保证白字对比度：文字全在左边，
        实测 #002C87 底上白字对比度 ≈4.6:1，加遮罩后更稳；右侧主体不压。
      · 文字只覆盖**颜色**（tagline / h1 / meta / .sign），**不加 padding、不加 border、不改字号**
        —— 加 1px 边框都会让页头高度漂 2px。 */
.pic-hero{padding:38px 0 32px;background:#0B2350;border-bottom-color:transparent;}
.pic-hero .tagline{margin-bottom:13px;}
.pic-hero .meta{margin-top:14px;}
.pic-hero-bg{position:absolute;inset:0;z-index:0;}
.pic-hero-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 42%;}
.pic-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,14,44,.62) 0%,rgba(0,14,44,.44) 46%,
             rgba(0,14,44,.14) 76%,rgba(0,14,44,0) 100%);}
.pic-hero>.wrap{position:relative;z-index:2;}
.pic-hero .tagline{color:#fff;background:rgba(255,255,255,.18);}
.pic-hero h1{color:#fff;text-shadow:0 1px 4px rgba(0,18,50,.32);}
.pic-hero .meta{color:rgba(255,255,255,.74);}
.pic-hero .meta .sign{color:#fff;}
@media(max-width:640px){
  .pic-hero{padding:28px 0 24px;}
  .pic-hero-bg img{object-position:center;}
  /* 手机端文字占满整宽，遮罩改纵向加厚（图上白线稿多，横向遮罩压不住） */
  .pic-hero::before{background:linear-gradient(180deg,rgba(0,14,44,.46) 0%,rgba(0,14,44,.70) 100%);}
}

/* 案例详情页封面：正文上方通栏长条，宽＝正文宽（在 .art 卡片内 ⇒ 1096px）。
   ⚠️ 五条结论来自邦哥五轮纠偏（2026-10-01 ~ 10-02），**别再改回去**：
   ① 图放正文上方（不是页头右侧）  ② 高度小一点（显示 1096×264）
   ③ **宽度与正文一致** —— 标杆「梅兰化工」（1400×341，天然这个比例）
   ④ 不做「两侧模糊填充」，原话「加了个底色，太难看」
   ⑤ ⇒ 改为**从原图切一条 1370×330**（4.1515:1），切的位置由离线脚本
      build_case_covers.py 按「细节能量最大」选带（简单居中裁会把 1:1 的
      苏州一建门头石切没 —— 上一轮刚踩过）。浏览器侧只做等比缩放。
   这里保留 aspect-ratio + object-fit 兜底：万一个别案例没生成裁切版而退回
   原图（比如 1:1 方图），也不会把版面撑成 1096×1096。
   ⚠️ 别写 `width:X;max-height:Y`（会把图压扁）、别写 `width:auto;max-width:X`
      （对 <img> 只约束上限、永不放大）—— 两条都踩过。 */
.art-fig{margin:0 0 26px;}
.art-fig img{display:block;width:100%;height:auto;aspect-ratio:1370/330;
  object-fit:cover;border-radius:8px;}
@media(max-width:640px){.art-fig{margin:0 0 20px;}}

/* 新闻详情页的兜底封面（2026-10-02 定）：与案例页同位置、同宽，但**不裁切**。
   为什么与案例页不同：案例那批已离线切成 4.15:1 长条（1370×330），套 cover 无损失；
   新闻封面是 1.6:1 上下的方图（老站搬来的原图，图上可能带字），再套 4.15:1 的
   cover 会只留中间 24% 的一条带 —— 跟首页主卡「比 16:9 扁的图不裁」是同一条道理。
   所以这里把 aspect-ratio 与 object-fit 都归位，宽度＝正文宽，高度按原比例自适应。 */
.art-fig--cover img{aspect-ratio:auto;object-fit:fill;}

/* 子栏目卡片 */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
/* 2 列变体：4 张卡时排 2×2（关于首信频道页）。必须写在 .cards 之后 —— 同特异性后写者胜 */
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;transition:.24s;position:relative;}
.card:hover{border-color:#BBD4F3;box-shadow:var(--shadow);transform:translateY(-4px);}
.card h3{font-size:18px;font-weight:700;margin-bottom:9px;}
.card p{font-size:14.2px;color:var(--ink-2);line-height:1.78;}
.card .go{display:inline-block;margin-top:15px;font-size:13.5px;font-weight:700;color:var(--brand);}
.card .go::after{content:" →";}
@media(max-width:1000px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.cards{grid-template-columns:1fr;}}

/* 内容块 */
.block{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 32px;margin-top:22px;}
.block h2{font-size:21px;font-weight:800;margin-bottom:14px;}
.block h3{font-size:17px;font-weight:700;margin:22px 0 8px;}
/* 正文段落：全站统一 font-size 15px ＋ --ink-2(#556582 深灰蓝) ＋ 行高 1.9。
   ⚠️ 2026-10-06 一度把 color 换成新变量 --text-body(#333)，当天回滚 ——
      邦哥：「并不是全站正文全都回滚，全站正文不变」⇒ 全站正文色维持原样。 */
.block p{font-size:15px;color:var(--ink-2);line-height:1.9;}
/* ⚠️ 这里**不设** `.block li` 颜色（2026-10-06 回滚）。
   曾于当天给 li 加过正文色，想把列表也拉齐，邦哥随即澄清「全站正文不变」
   ⇒ 列表回到原状（继承 body 的 --ink）。 */
.block .note{margin-top:14px;font-size:13px;color:var(--ink-3);}
/* 隐私政策页（法律长文，2026-10-06 新建）：给段落与小标题之间明确的间距，
   否则一整卡文字会糊成一片、读不下去。
   ⚠️ 不动 `.block` 本体（全站 150 页共用），只在这一页的 block 上加 `.block--doc`。 */
.block--doc p{margin:0;}
.block--doc p+p{margin-top:13px;}
.block--doc h2{margin:30px 0 13px;}
.block--doc h2:first-child{margin-top:0;}
.block--doc h3{margin:20px 0 8px;}
.block--doc ul.tick{margin-top:11px;}
/* ⚠️ 母板有全局 `ul{margin:0;padding:0;list-style:none;}`，而 `.num` 主规则是 display:grid
   ⇒ `<ol class="num">` 的序号会整个消失（三条并列看不出"第一/第二/第三"）。
   这里在本页把它还原成带序号的常规列表。 */
.block--doc ol.num{display:block;list-style:decimal;padding-left:24px;margin-top:11px;}
/* 列表后紧跟的段落也要有间距（`p+p` 只管段落接段落） */
.block--doc ul+p,.block--doc ol+p{margin-top:11px;}
.block--doc .note{margin-top:13px;}
/* ── 隐私政策页「一张 A4 纸」版式（2026-10-06 邦哥：「让它看起来象是一页 A4 纸，
   两边留深颜色，中间正文留 A4 纸宽度」）─────────────────────────────────────
   结构：深navy「桌面」 › 居中白纸(210mm ＝ A4 宽) › 纸上 h1 + 正文。
   ⚠️ 纸上的 `.block` 必须抹平（透明/无框/无内边距）—— 全站 150 页共用 `.block` 本体，
      只在这个作用域里覆盖，**绝不动本体**；四个 `.block` 之间留一条极浅分隔线当章节断口。
   ⚠️ 桌面色取 `--navy-900` ＝ 页脚同色 ⇒ 深色区与页脚连成一片，中间不会冒出第二条缝。
   ⚠️ 这一页**不走 `.page-hero`**（白底页头压在深色纸面前会割出一道白带），h1 写在纸上。 */
/* ⚠️ 不给 `.pdoc` 加 `min-height:100vh` —— 正文永远比视口高，加了没用；
   而在「整页截图」时视口高＝整页高，`100vh` 会把纸撑到那个高度、把页面越撑越长。 */
.pdoc{background:var(--navy-900);padding:54px 0 64px;}
.pdoc-sheet{width:min(210mm,calc(100% - 40px));margin:0 auto;background:#fff;
  padding:54px 60px 112px;border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.07),0 26px 70px rgba(0,0,0,.42);}
.pdoc-h1{font-size:28px;font-weight:800;color:var(--ink);text-align:center;letter-spacing:.14em;
  text-indent:.14em;padding-bottom:22px;margin-bottom:34px;border-bottom:1px solid var(--line);}
.pdoc-sheet .block{background:transparent;border:0;border-radius:0;padding:0;margin-top:0;}
.pdoc-sheet .block+.block{margin-top:34px;padding-top:34px;border-top:1px solid var(--line-2);}
/* 文末落款（2026-10-06 邦哥：文档最底部靠右留「上海首信软件有限公司／更新日期」）。
   两行右对齐，不加分隔线；纸底留白由 `.pdoc-sheet` 的 padding-bottom 给（见上）。
   ⚠️ 更新日期只在这一个地方写 —— 第十节那句已经改成「本页末尾标注的更新日期」，
      免得同一份文书里出现两个日期。改版本号时**只改这里**（内容若变，PRIVACY_DESC 也要跟）。 */
.pdoc-sign{margin-top:50px;text-align:right;}
.pdoc-sign p{font-size:15px;color:var(--ink-2);line-height:1.95;}
/* 「返回官网 →」：本页是裸页（无导航无页脚），若访客从搜索引擎直接落到 /privacy/，
   页内再无任何出口 ⇒ 在文末给一个极轻的出口。居中、小字、低对比，不与正文抢视线。
   2026-10-06 邦哥要求加；同在裸页里，**不加分隔线**，靠留白分开。 */
.pdoc-back{margin-top:52px;text-align:center;}
.pdoc-back a{font-size:13px;color:var(--ink-3);text-decoration:none;}
.pdoc-back a:hover{color:var(--brand);text-decoration:underline;}
@media(max-width:820px){
  .pdoc{padding:26px 0 34px;}
  .pdoc-sheet{padding:34px 26px 64px;}
  .pdoc-h1{font-size:23px;letter-spacing:.1em;text-indent:.1em;padding-bottom:16px;margin-bottom:26px;}
  .pdoc-sheet .block+.block{margin-top:26px;padding-top:26px;}
  .pdoc-sign{margin-top:36px;}
  .pdoc-back{margin-top:40px;}
}
@media(max-width:480px){.pdoc-sheet{width:calc(100% - 32px);padding:26px 18px 64px;}}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;}
@media(max-width:820px){.two-col{grid-template-columns:1fr;}.block{padding:24px 20px;}}

/* 图文并排（关于首信·公司简介页，2026-10-05 邦哥：「现在这块都是文字，页面有些呆板」）
   · 关于首信 = 左文右图：DOM 顺序「文 → 图」，列宽 1.16 : .84（图＝office.webp 实景照）
   · 企业实力     = 左图右文：DOM 顺序「图 → 文」+ `.split--rev` 换列宽（.84 : 1.16）
     （图＝digital.svg 数据示意，右侧是 .metrics 数字看板；原挂「立身之本」节，该节 10-05 晚已撤）
   📌 **2026-10-06 起资质荣誉页也在用**（`.split--mid` 变体，见下）—— 全站就这两页。
   ⚠️ 必须写在 `.two-col` 之后 —— 同特异性后写者胜；
   ⚠️ 媒体查询**不改变特异性** ⇒ 单列断点里要把 `.split` 与 `.split--rev` 两个选择器都重写。
   ⚠️ 对齐方式两节不同（2026-10-05 实测）：
     · `.split`     = `start`。首节文字三段，右侧照片已按文字高度裁过（两边同为 487px），
       顶对齐才准；若用 center，会在 **h2 与正文之间**空出两百多像素，像排版出错。
     · `.split--rev` = `center`。企业实力的图（357px）与数字看板（204px）还差 150px，
       居中更稳（矢量线稿不好裁比例，保持原样）。 */
.split{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);gap:36px;align-items:start;}
.split--rev{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);align-items:center;}
/* 图文垂直居中 ＋ 图列收窄（2026-10-06 资质荣誉页用）。
   默认 `.split` 是 `start`（当初为公司简介页调的：让 h2 与照片顶部齐平）。
   但资质荣誉页三节左侧只有 2–3 条清单、右侧是一张配图，若沿用 1.16:.84，
   图宽 448px ⇒ 图高 239px 而文字只有 153px，落差 86px、每节左下方空一大截。
   收成 **1.3:.7** ＋ 垂直居中 ⇒ **实测图 374×200、卡宽 1172**（文字列 697），落差 ~47px、上下对称。
   ⚠️ 只改本页（`.split--mid`）；公司简介页仍是 `.split` / `.split--rev` 原样。
   ⚠️ 单列断点（≤1200px）下此规则无副作用（两行之间没有 align / 列宽可言）。 */
.split--mid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:center;}
.split figure{margin:0;}
/* 本页正文的行距与段距（2026-10-05 邦哥：「行间距再加大一点，小段落间距至少空一行」；
   10-06 追加：「主文字内容不要加粗，段落间距减小，保证主文高度与图片高度一致」）
   · 行高 **2.15**（全站 `.block p` 是 1.9，只本页放宽）
   · 段距 **16px**（五版 34px≈空一行偏散 ⇒ 24px ⇒ 10-06 再收到 16px，约半行）
   ⚠️ 只作用于**公司简介页** —— 本条只命中 `p`。资质荣誉页 10-06 起也用 `.split--mid`，
      但那边是 `ul.tick`、页内没有 `p`，命中不到（不必为它改写本条）。
   ⚠️ 段距走 `p+p` 的 margin-top，同时把 p 自身 margin 清零 —— 否则会和
      全局 p 的下边距叠成两倍，段间空出两行多。
   ⚠️⚠️ **正文一律不用 `<b>`**（邦哥 2026-10-06 要求）—— 下面 `.split p b` 那条加粗
      规则留档未删，别当成「这里该加粗」的依据。
   ⚠️ 字体与颜色不在这里管 —— 走全站正文规则（`.block p` 的 `var(--ink-2)`），
      「关于首信」与其它栏目**同一字体、同一字色**（黑体 ＋ #556582 深灰蓝）。 */
.split>div>p{line-height:2.15;margin:0;}
.split>div>p+p{margin-top:16px;}
/* 「关于首信」栏目**不再单独设字体/字色**（2026-10-06 邦哥两次澄清后的定案）：
   · 十三～十六次曾在本栏单独用「宋体＋纯黑 #000」，并一度扩展成全站 `--text-body:#333`；
   · 邦哥回滚原话一：「还是回滚吧，用黑体＋深灰字色，全站正文一致」；
   · 邦哥回滚原话二：「我是指『关于首信』这一栏，并不是全站正文全都回滚，全站正文不变。
     『关于首信』用黑体＋深灰字色，之前应该就是这个字色」。
   ⇒ **全站正文保持原样**（`.block p` / `.art p` / `.tick li` / `.art ul,ol` / `.art blockquote`
      一律 `var(--ink-2)`），「关于首信」也回到同一字色；`--text-body` 变量与本栏专属规则
      **均已删除**，`.ch-about` 栏目钩子也一并撤掉（`shell()` 的 `CH_CLASS` 已移除）。
   ⚠️ 别再把系统宋体加回来：SimSun 是 Windows 字体，**安卓不预装**，一半访客看不到；
     真要宋体只能用思源宋体挂 web 字体（样张与子集脚本见记忆 2026-10-06 条目）。 */
.split figcaption{margin-top:12px;font-size:13px;color:var(--ink-3);text-align:center;line-height:1.6;}
.split img{display:block;width:100%;height:auto;border-radius:12px;
  box-shadow:0 12px 32px rgba(18,38,74,.16);}
/* 单列断点 2026-10-05 由 900 提到 **1200**：并排两列的「图文等高」只在列宽饱和后才成立
   （≈1280 档起 `.split` 宽稳定在 1106px，左列 620px 文字 487px ＝ 右侧照片 figure 487px）。
   1200 以下两列会同时变窄 —— 文字行数增加、高度反而涨，图却按比例缩小，落差越拉越大
   （1024 档实测文字 584px 对图 404px）。既然 `.split` 全站只有本页在用，就把 1200
   以下直接改单列，图文上下排，不存在「不等高」这个观感问题。 */
@media(max-width:1200px){
  .split,.split--rev{grid-template-columns:1fr;gap:20px;}
  .split img{max-width:520px;margin:0 auto;}
}

/* ── 公司简介页·三个专用组件（只在本页用，别处别引）─────────────────────────
     · .metrics   企业实力数字看板（4 列 × 2 行，1px 描边靠 gap 露底色）——**在用**
     · .clients   客户分层段（浅蓝底 + 左侧品牌色标线）——10-05 晚正文改邦哥亲笔版后
                  **暂时没人用**，留档（客户段改成了平铺正文，见 PAGE_BODY 注释）
     · .timeline  发展历程时间轴（竖线用 --line-axis，⚠️ 别与横线 --line-row 混）——
                  **暂时没人用**，留档：老站发展历程未迁移、年份落不实，10-05 晚整节撤下
   ⚠️ 判句标题动辄两三行，行高必须收 —— 但**不动 `.block h2` 本体**（其它页面共用），
      只在本页 block 上加 `.block--lead` 收口（现标题已改短，本页不再挂该类，留档备用）。
   ⚠️ `.split` 目前全站只有本页在用（已核），所以 `.split p b` 可以安全扩展。 */
.clients{background:var(--bg-soft);border-left:3px solid var(--brand);
  border-radius:0 var(--radius) var(--radius) 0;padding:24px 28px;}
.clients p{font-size:15px;color:var(--ink-2);line-height:1.95;margin-bottom:18px;}
.clients p:last-child{margin-bottom:0;}
.clients b{color:var(--navy-800);font-weight:700;}

.block--lead h2{font-size:20.5px;line-height:1.55;letter-spacing:.005em;}
.block--lead p b,.block--lead .tick li b,.split p b{color:var(--navy-800);font-weight:700;}

.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.metrics div{background:#fff;padding:22px 10px;text-align:center;}
.metrics b{display:block;font-size:24px;font-weight:800;color:var(--brand);
  line-height:1.25;letter-spacing:-.02em;}
.metrics span{display:block;margin-top:7px;font-size:13px;color:var(--ink-3);line-height:1.5;}

.timeline{margin-left:5px;padding-left:28px;border-left:2px solid var(--line-axis);}
.timeline .stage{margin-bottom:26px;}
.timeline .stage:last-child{margin-bottom:0;}
.timeline .yr{position:relative;font-size:16.5px;font-weight:800;color:var(--navy-800);
  line-height:1.45;margin-bottom:12px;}
/* 圆点要正好落在竖线上：竖线在 .yr 左侧 30px 处（padding 28 + border 2），
   点宽 9 ⇒ 左移 34.5 取 -34；再套 4px 白色描边盖住线，免得压出断口。 */
.timeline .yr::before{content:"";position:absolute;left:-34px;top:7px;width:9px;height:9px;
  border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px #fff;}
.timeline .yr i{font-style:normal;font-size:13.6px;font-weight:400;color:var(--ink-3);margin-left:10px;}
.timeline ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;}
.timeline li{font-size:14.6px;color:var(--ink-2);line-height:1.8;}
.timeline li b{color:var(--navy-800);font-weight:700;margin-right:8px;}
.timeline li.todo{color:var(--ink-3);}

@media(max-width:820px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){
  .clients{padding:20px 18px;}
  .timeline{padding-left:20px;}
  .timeline .yr::before{left:-26px;}
  .timeline .yr i{display:block;margin:4px 0 0;}
  .metrics b{font-size:21px;}
}

/* 列表 */
.tick{display:grid;gap:10px;margin-top:6px;}
.tick li{position:relative;padding-left:22px;font-size:14.6px;color:var(--ink-2);line-height:1.8;}
.tick li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:2px;background:var(--brand);opacity:.55;}
.num{margin:0;padding-left:22px;display:grid;gap:9px;font-size:14.8px;color:var(--ink-2);}
.num li{line-height:1.8;}
.cards-mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.cards-mini li{background:var(--bg-soft);border:1px solid var(--line-2);border-radius:10px;padding:14px 16px;}
.cards-mini li b{display:block;font-size:14.6px;color:var(--navy-800);}
.cards-mini li span{font-size:12.8px;color:var(--ink-3);}
@media(max-width:640px){.cards-mini{grid-template-columns:1fr;}}

/* ── 联系我们页·各地联系方式（2026-10-06 新增；⚠️ 目前只有 /about/contact/ 一页在用）──
   参考老站样式：地区名（中文＋英文）＋ 地址/电话/邮编/邮箱；
   老站是折叠标签、一次只显示一个地区，这里改成一屏铺开的三列卡片。
   ⚠️ 卡片是「白底＋1px 描边」，不要改成色块（全站口径：不做大色块）。 */
.cities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px;}
.city{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;}
.city h3{display:flex;align-items:baseline;gap:8px;margin:0 0 11px;
  font-size:16px;font-weight:800;color:var(--navy-800);letter-spacing:.01em;}
.city h3 i{font-style:normal;font-size:12.4px;font-weight:400;color:var(--ink-3);letter-spacing:.05em;}
.city ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;}
.city li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:0 8px;
  font-size:13.6px;color:var(--ink-2);line-height:1.7;}
.city li i{font-style:normal;color:var(--ink-3);}
.city li span{word-break:break-word;}
@media(max-width:1000px){.cities{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){
  .cities{grid-template-columns:1fr;gap:12px;margin-top:14px;}
  .city{padding:16px 18px;}
}

/* 标签组 */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;}
.pill{display:inline-block;font-size:14px;color:var(--ink-2);background:var(--bg-soft);
  border:1px solid var(--line);border-radius:999px;padding:8px 17px;transition:.2s;}
.pill:hover{background:var(--brand-100);border-color:#C9DCF5;color:var(--brand);}

/* 骨架占位 */
.ph{border:1px dashed #C6D1E0;border-radius:var(--radius);padding:28px 30px;background:#FCFDFF;}
.ph-head h2{font-size:19px;font-weight:800;margin-bottom:8px;}
.ph-head p{font-size:13.8px;color:var(--ink-2);line-height:1.8;}
.ph-head code{background:var(--brand-100);color:var(--brand);border-radius:5px;padding:1px 7px;font-size:12.8px;}
.ph-list{margin-top:22px;border-top:1px solid var(--line-2);}
.ph-list li{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.4fr);gap:16px;
  align-items:center;padding:15px 0;border-bottom:1px solid var(--line-2);}
.ph-tag{font-size:11.5px;color:#8A6D1F;background:#FFF8E6;border:1px solid #EADCAE;border-radius:5px;padding:2px 8px;text-align:center;}
.ph-t{font-size:15px;font-weight:600;color:var(--navy-800);}
.ph-d{font-size:13.2px;color:var(--ink-3);}
.pager{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;font-size:13.5px;color:var(--ink-3);align-items:center;}
.pager span,.pager a{border:1px solid var(--line);border-radius:7px;padding:5px 12px;background:#fff;transition:.2s;}
.pager a:hover{border-color:var(--brand);color:var(--brand);}
.pager span.on,.pager a.on{background:var(--brand);color:#fff;border-color:var(--brand);}
.pager .dots{border:0;background:none;padding:5px 2px;}
@media(max-width:820px){.pager{gap:6px;font-size:12.6px;}.pager span,.pager a{padding:4px 10px;}.pager .dots{padding:4px 1px;}}
@media(max-width:720px){.ph-list li{grid-template-columns:minmax(0,1fr);gap:4px;}}

/* 表格 */
.tbl{width:100%;border-collapse:collapse;margin-top:10px;font-size:14.4px;}
.tbl th,.tbl td{border:1px solid var(--line);padding:13px 15px;text-align:left;vertical-align:top;line-height:1.75;}
.tbl thead th{background:#F5F7FA;font-weight:700;color:var(--navy-800);}
.tbl td.k{font-weight:600;color:var(--navy-800);background:#FAFBFD;}

/* 文章 */
.art{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 38px;}
.art h2{font-size:21px;font-weight:800;margin-bottom:14px;}
.art h3{font-size:17.5px;font-weight:700;margin:26px 0 10px;}
.art p{font-size:15.4px;color:var(--ink-2);line-height:1.95;}
/* ⚠️ 正文里的加粗一律不显示（2026-10-02 邦哥定：行内加粗本意是标重点，但访客未必
   细读，反而把版面切碎、破坏整洁）。源头已去掉 —— 案例/洞察的 `**` 在 md2html 那层
   就不产出 <b>、新闻的 <strong> 在渲染时剥掉；这里再兜一道，万一以后有人在正文容器
   里手写 <b>/<strong>，也不会突然冒出一块加粗。
   ⚠️ 只作用于**正文容器**（p/li/td/blockquote/callout/note）；下面这些是**结构性 <b>**
   不在此列、照常加粗：日期数字 .nr-date/.nd、卡片名 .cards-mini li b、四段序号 .s4 b、
   能力卡 .cap2 .rows b、上/下篇与相关阅读标题 .post-nav b。别扩大选择器把它们一起削了。 */
.art p b,.art p strong,.art li b,.art li strong,.art td b,.art td strong,
.art blockquote b,.art blockquote strong,.art .callout b,.art .callout strong,
.art .note b,.art .note strong{font-weight:inherit;}
.art .callout{margin:20px 0;background:var(--brand-100);border-left:3px solid var(--brand);
  border-radius:0 10px 10px 0;padding:16px 20px;font-size:14.6px;color:var(--navy-800);line-height:1.85;}
@media(max-width:640px){.art{padding:22px 18px;}}

/* ============ 解决方案详情页：分段色带（2026-10-02 邦哥定）============
   版式来自邦哥四条意见：① 页头压一张 banner（「不然这个区域感觉太白」）；
   ② 去掉正文外面那个框，直接正文；③ 正文（含图）分成一段一段；④ 每段底色做出差异。
   参考站＝泛微数智业财页 yc.weaver.com.cn（长滚动 + 分段色带 + 每段一个标题）。

   ⚠️⚠️ 只作用于 .solband 里面，**不要动 .art 本体** —— 案例 / 新闻 / 洞察
       三类详情页共用那个白卡片，改 .art 等于全站跟着变。
   ⚠️ 相邻两档底色 #FFFFFF ↔ #F1F6FD：比全局 --bg-soft(#F5F8FC) 深一档。
       原因是 #F5F8FC 贴着白底只有 1.05:1 对比，肉眼几乎看不出「一段一段」；
       参考站实测也是 #F9FBFF ↔ #FFFFFF 之间再叠一条 #F0F5FF 的浅蓝带。
       再往深就走灰、显脏，别调。 */
.solband{padding:56px 0;}
.solband--alt{background:#F1F6FD;}
.solband-head{display:flex;align-items:center;gap:15px;margin-bottom:26px;}
.solband-no{flex:none;font-size:13px;font-weight:800;letter-spacing:.06em;color:#fff;
  background:var(--brand);border-radius:8px;padding:5px 10px;line-height:1.5;}
.solband-head h2{font-size:24px;font-weight:800;letter-spacing:-.01em;line-height:1.34;}
.solband--rel .solband-no{background:var(--brand-100);color:var(--brand);}
.solband--rel .pills{margin-top:2px;}

/* 拆掉正文的白卡框（邦哥原话：「正文处，外面的那个框不要，直接正文」）
   选择器写到 .solband 层级，确保盖得住上面那条 .art{background:#fff;border…} */
.solband .art--plain{background:none;border:0;border-radius:0;padding:0;}
.solband .art p{font-size:15.8px;line-height:2;}
/* 长行难读：正文段落压到 1000px。
   ⚠️ 2026-10-03 邦哥定：**表格也收到这里，与正文共用一条线**。
   起因：9 篇方案共 27 张表，其中 **18 张只有 2 列**，在 1172px 下每列 586px
   装「三控／三管／一协调」这类三五个词的短语，空得明显。收窄后正文／表格／
   引用块右边缘对齐。
   ⚠️ 2026-10-04 邦哥定：**配图也收到 1000px**（原通栏 1172）—— 见下面 `.fig` 那条。 */
.solband .art > p,
.solband .art > ul,
.solband .art > ol,
.solband .art > blockquote,
.solband .art > .callout,
.solband .art > .note{max-width:1000px;}
.solband .art > p + p{margin-top:15px;}
/* 配图宽度：2026-10-04 邦哥定 —— 通栏从 1172 收到 **1000px**，与正文段落、表格同一条线。
   起因：10-03 逐张裁掉幻灯片留白后，图内容铺满整幅，看着「变大、发糙」。实测根因是
   **像素不够**：站内配图转存后统一 1400px 宽（个别裁得狠的只有 1194），而通栏 1172
   CSS px 在 125% 屏幕缩放下要 1465 物理像素 ⇒ **48 张全部被拉伸**。
   ⚠️ 同日第二轮（对标泛微后定）：显示宽定了，**图源也得跟上** —— 泛微方案图是
   「源宽 = 显示宽 × 2」（架构图 2400/1189、特色图 1440/723，都恰好 2.0x）。
   于是切图输出改成 clamp(原生, 1000, 2000)、store_images 对方案图放开到 2000
   （media.MAX_W 仍留 1400 给案例/新闻/洞察）。跨过 2x 线后，高 DPI 屏才是「缩小显示」。
   ⚠️ 只作用于方案页（`.solband`）；案例／新闻／洞察详情页的图不受影响。 */
.solband .art .fig{max-width:1000px;}
/* 配图**再收窄一档并在正文列内居中**：2026-10-04 第二轮，邦哥在智慧工地样张上定 ——
   通栏图 1000 → **800px**，且**水平居中**。口径原话：「以文字为参照居中，不是以屏幕居中」
   —— 参照物是正文段落那条 **1000px 的列**，不是视口。所以：
     · `.fig` 容器仍限 1000px、左对齐（与段落共用左边线，居中基准就是它）
     · 只把 img 缩到 800，再在容器内 `margin:auto` ⇒ 图左右各留 100px，与文字列对称
   （`margin:auto` 若写成相对 .art 的 1172 容器居中，图会比文字列整体右偏 86px，是错的。）
   为什么要显式写宽度：全局 `img{max-width:100%}` **只约束上限、不放大**，而配图输出宽
   随原生走（796~2000），个别老图原生只有 796px（环保「成本控制」）⇒ 不写 width:100%，
   那张就比同篇其他图窄一圈。height:auto 继承自 `.art img`；配合 store_images 写出的
   width/height 属性，比例不拉变形、图未到时位置也先占住（无 CLS）。
   ⚠️ `display:block` 是 `margin:auto` 生效的前提（img 默认 inline，左右 auto 无效）。 */
.solband .art .fig img{width:100%;max-width:800px;height:auto;display:block;
  margin:28px auto 0;}
/* 配图 + 细边框（老站长图裁出来的块有白底也有深蓝底，描一档线才立得住） */
.solband .art img{margin:28px 0 0;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 1px 3px rgba(10,42,94,.04);}
/* 压窄一档的配图：稿里写 `[[图:文件名|说明|sm]]` 即得（md2html 出 .fig--sm）。
   2026-10-03 邦哥对项目制造篇提出「有点过大」→ 压到 900；
   2026-10-04 通栏改 **800 居中** 后，窄档同步降到 **700px**（始终比通栏小一档）。
   容器仍留 900px 且左对齐，img 700 在其中居中 ⇒ 图左边缘落在 100px，
   与通栏图（1000 容器内 800 居中，左缘也是 100px）**左右对齐**。 */
.solband .art .fig--sm{max-width:900px;}
/* ⚠️ 本组规则**必须写在上面 `.fig img` 之后**：`<figure class="fig fig--sm">` 两个类都
   命中、特异性相同 ⇒ 后写者胜，顺序颠倒 700 会失效。 */
.solband .art .fig--sm img{max-width:700px;}
/* ── 篇级微调：环保水务篇配图**上下留白加大**（2026-10-04 邦哥在样张上定「B 档」）──
   起因：全站配图默认 `margin:28px auto 0` —— 图上方 28px、**图下 0px**，图的下沿
   紧贴下一段文字，上下不对称，看着像被"压"着。邦哥要求「单调环保水务的图片，
   其他方案图片不调整」。做法分两步（缺一不可）：
     ① 生成器给每条色带加篇级标记 `solband--<slug>`（见 sol_sections_html 的 slug 参数）
     ② 这里只对 huanbao 覆盖 margin ⇒ **其余 8 篇仍是 28/0，一个字不改**
   ⚠️ 必须写在本组 `.fig` 规则**之后**：`.solband--huanbao .art .fig img` 与
      `.solband .art .fig img` 特异性同为 (0,3,1)，**后写者胜**，顺序颠倒就白写。
   ⚠️ 位置口径仍是「以文字列（1000px）为参照居中」——左右用 auto，不是以屏幕居中。 */
.solband--huanbao .art .fig img{margin:48px auto 48px;
  padding:40px;box-sizing:border-box;}
/* ── 篇级微调 · 再加「B 档 · 图内留白」（2026-10-04 邦哥定，仍在上面这一条里）──
   两档是**两件不同的事**，别混：
     A 档（外边距）＝ 图与**文字之间**的缝 —— `margin:48px auto 48px`，已定稿不动；
     B 档（内边距）＝ **图片内部、内容四周**的底色环 —— `padding:40px`，本条新增。
   原理：`img` 的 padding 区**不画图**，只透出父级背景。父链是
     img ← figure.fig ← .art--plain（无背景）← section.solband（白 / 浅蓝）
   ⇒ 底色天然跟着色带走：白带出白环、浅蓝带出浅蓝环，**不用写 background**
     （一写死颜色，浅蓝带上就会出现一圈明显异色框）。
   代价（必须交代）：padding 吃掉的是**图片内容的显示宽度** ——
     800（border-box）− 40×2 ＝ **720** ⇒ 图里的字整体缩小 10%。
     起因是邦哥「方案图的字好大、不够精细」⇒ 这一档正对着它。
   ⚠️⚠️ 必须配 `box-sizing:border-box`：不写的话 padding 会**加在 800 之外**
     （总宽变成 880，超出文字列 1000 的中轴，右缘与段落对不齐）。
   ⚠️ 效果强弱跟图片自身底色有关，别以为「没变」：图 01/02 是深蓝底、落在白带上
     ⇒ 四周一圈白非常明显；图 03/04/05 本身是浅底，环的对比弱，
     但「内容缩了 10%」这一条五张都一样。
   ⚠️ 只作用于环保水务一篇。 */
/* 表格：宽度与正文段落同一条线（1000px）—— 2026-10-03 邦哥定，见上一条注释。
   白底 / 浅蓝底两档上表头都要看得清，所以表头固定在浅蓝、单元格固定白 */
.solband .art table{max-width:1000px;margin:28px 0 0;background:#fff;}
.solband .art th{background:#E9F1FC;color:var(--navy-800);font-weight:700;}
.solband .art td{background:#fff;}
.solband .art ul,.solband .art ol{margin:16px 0 0 22px;}
.solband .art .faq{margin-top:2px;}
@media(max-width:820px){
  .solband{padding:40px 0;}
  .solband-head{gap:11px;margin-bottom:20px;}
  .solband-no{font-size:12px;padding:4px 8px;border-radius:7px;}
  .solband-head h2{font-size:19.5px;}
  .solband .art img{margin-top:22px;}
  /* 篇级微调跟着收窄：移动端图只有三百多 px 宽，48px 上下留白占比会明显偏大，
     按桌面同一节奏（28→22）降到 36。⚠️ 必须重写一遍选择器 —— 媒体查询不改变
     特异性，`.solband .art img`(0,2,1) 盖不住 `.solband--huanbao .art .fig img`(0,3,1)。
     B 档的 padding 同样要收窄：移动端图总共才三百多 px 宽，40px 环会吃掉两成，
     降到 20px（内容仍缩约 12%，与桌面的 40/800 节奏一致）。 */
  .solband--huanbao .art .fig img{margin:36px auto 36px;padding:20px;}
  .solband .art table{margin-top:22px;}
}

/* 四步 */
.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.s4{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;}
.s4 b{display:block;font-size:13px;letter-spacing:.12em;color:var(--brand);margin-bottom:10px;}
.s4 h3{font-size:16.5px;font-weight:700;margin-bottom:9px;}
.s4 p{font-size:13.8px;color:var(--ink-2);line-height:1.8;}
@media(max-width:1000px){.steps4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.steps4{grid-template-columns:1fr;}}

/* 六能力 */
.caps2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:20px;}
.cap2{background:var(--bg-soft);border:1px solid var(--line-2);border-radius:var(--radius);padding:22px 20px;}
.cap2 .n{display:block;font-size:12.5px;font-weight:700;letter-spacing:.12em;color:var(--brand);margin-bottom:10px;}
.cap2 h3{font-size:16.5px;font-weight:700;margin-bottom:9px;}
.cap2 p{font-size:13.8px;color:var(--ink-2);line-height:1.8;}
/* 模块卡内的「解决什么 / 落地结果」两行 */
.cap2 .rows{margin-top:14px;padding-top:13px;border-top:1px dashed var(--line);display:grid;gap:9px;}
.cap2 .rows div{font-size:13.3px;color:var(--ink-2);line-height:1.78;}
.cap2 .rows b{display:block;font-size:12.3px;font-weight:700;color:var(--navy-800);letter-spacing:.02em;margin-bottom:2px;}
/* 宽表格（行业适配矩阵）在窄屏横向滚动，不挤坏版面 */
.tbl-wrap{margin-top:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.tbl.matrix{min-width:720px;font-size:13.6px;}
.tbl.matrix th,.tbl.matrix td{padding:11px 10px;text-align:center;}
.tbl.matrix th:first-child,.tbl.matrix td:first-child{text-align:left;}
.tbl.matrix .dot{font-style:normal;color:var(--brand);font-weight:800;}
.tbl.matrix .cir{font-style:normal;color:#8E9CB8;}
.tbl.matrix .dash{font-style:normal;color:#C6CEDC;}
.tbl.pains{font-size:14.2px;}
/* 窄屏：痛点表改为逐行卡片，避免三列被压成竖排；矩阵表首列吸附 */
@media(max-width:760px){
  .tbl.pains{min-width:0;font-size:13.8px;}
  .tbl.pains thead{display:none;}
  .tbl.pains tbody,.tbl.pains tr,.tbl.pains td{display:block;width:100%;}
  .tbl.pains tr{border:1px solid var(--line);border-radius:8px;margin-top:12px;overflow:hidden;}
  .tbl.pains td{border:0;padding:11px 14px;background:#fff;}
  .tbl.pains td + td{border-top:1px dashed var(--line-2);}
  .tbl.pains td.k{background:#F5F7FA;font-weight:700;}
  .tbl.pains td::before{content:attr(data-l);display:block;font-size:11.5px;color:var(--ink-3);letter-spacing:.02em;margin-bottom:3px;font-weight:500;}
  .tbl.matrix td.k,.tbl.matrix th:first-child{position:sticky;left:0;z-index:1;background:#fff;}
  .tbl.matrix thead th:first-child{background:#F5F7FA;}
}
@media(max-width:1000px){.caps2{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.caps2{grid-template-columns:1fr;}}

/* ============ 产品中心：服务清单（2026-10-04 指令 5；10-05 分组改版）============
   产品中心页 =「IT 服务总览」。2026-10-05 邦哥定：服务卡**分三组**（已经在用的 /
   正在引入的 / 一起往前走的），每组一个组标题 + 2 张卡（末组第 2 格是虚线占位卡）。
   ⚠️ 网格是 **2 列**（原为 3 列）：每组正好一行 2 张，三组三行齐平；
      若仍用 3 列，每组右侧会空一格，反而显得「缺东西」。
   状态徽标四档，**一律不出现「上线 / 推出」字样**（研发进度词让客户读到的是缺口）：
     on   成熟产品           实心品牌蓝
     plat 产品内置           白底 + 深蓝描边
     beta 内测中 · 可约沟通  浅蓝底 + 浅蓝描边
     plan 按需共创           浅灰底
   ⚠️ 四档**只在同一色系里做深浅**，不引入橙/红等新色相（白底深蓝站，彩色会打花版面）。
   ⚠️ plat 与 beta 必须分开配色 —— 都写浅蓝底的话，「已经能用」和「内测中」
      在页面上一模一样（10-04 踩过一次）。
   ⚠️ 不可点的卡用 <div>、可点的用 <a>（本页只有 PM 一张有落地页）——
      做成 <a href="#"> 会留死链。两者共用 .svc 基础类，视觉完全一致。 */
.svc-group{margin-top:26px;}
.svc-group:first-child{margin-top:6px;}
.svc-group-h{font-size:15px;font-weight:700;color:var(--navy-800);letter-spacing:.02em;
  padding-left:12px;border-left:3px solid var(--brand);line-height:1.25;}
.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:14px;}
.svc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 20px;transition:.24s;}
.svc:hover{border-color:#BBD4F3;box-shadow:var(--shadow);transform:translateY(-3px);}
.svc h4{font-size:16.5px;font-weight:700;margin:10px 0 9px;color:var(--navy-800);}
.svc p{font-size:13.8px;color:var(--ink-2);line-height:1.8;}
.svc-tag{align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  border-radius:999px;padding:3px 11px;line-height:1.6;font-style:normal;}
.svc-tag--on{background:var(--brand);color:#fff;}
.svc-tag--plat{background:#fff;color:var(--brand);border:1px solid var(--brand);}
.svc-tag--beta{background:var(--brand-100);color:var(--brand);border:1px solid #C9DCF5;}
.svc-tag--plan{background:var(--bg-soft);color:var(--ink-3);border:1px solid var(--line);}
/* 末组第 2 格占位卡：虚线框、无悬浮提升 —— 一眼看出「这不是一项服务，是待补的位置」 */
.svc--more{background:transparent;border:1px dashed var(--line);box-shadow:none;justify-content:center;}
.svc--more:hover{border-color:var(--line);box-shadow:none;transform:none;}
.svc--more h4{color:var(--ink-3);margin-top:0;}
.svc--more p{font-size:13.4px;color:var(--ink-3);}
/* 可点卡片的落点链接：margin-top:auto 把它压到卡片底部，与相邻卡对齐 */
.svc-go{margin-top:auto;padding-top:14px;font-size:13.5px;font-weight:700;color:var(--brand);}
/* 「不确定从哪一项开始」的四条入口 */
.start-list{display:grid;gap:12px;margin-top:14px;}
.start-list li{background:var(--bg-soft);border:1px solid var(--line-2);border-radius:10px;
  padding:14px 18px;font-size:14.2px;color:var(--ink-2);line-height:1.8;}
.start-list li b{display:block;font-size:14.6px;color:var(--navy-800);margin-bottom:3px;}
@media(max-width:760px){.svc-grid{grid-template-columns:1fr;}}

/* FAQ */
.sec-head-l{max-width:760px;margin:0 auto 40px;text-align:center;}
.sec-head-l .sec-tag{margin-bottom:14px;}
.faq{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));}
.faq-i{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;}
.faq-i h3{font-size:16.5px;font-weight:700;margin-bottom:10px;color:var(--navy-800);}
.faq-i h3::before{content:"Q　";color:var(--brand);font-weight:800;}
.faq-i p{font-size:14.4px;color:var(--ink-2);line-height:1.85;}
@media(max-width:820px){.faq{grid-template-columns:1fr;}}

/* 导航当前项：样式已在基础样式里定义（只变蓝、无底色），此处不再覆盖 */

/* 产品卡两列 */
.prod-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:820px){.prod-grid.two{grid-template-columns:1fr;}}

/* 客户 LOGO 墙补充 */
.center{text-align:center;}