/* ===== 科技类 · 极简锐利（tech-b）内页「编辑部线框」 =====
   版式范式（与 tech 基准的居中式正面冲突）：
   · 全白底 + 发丝线分隔，不用灰底交替；
   · 标题一律左对齐、顶部一条实线、右侧跟等宽字体编号（CSS 计数器）；
   · 产品/案例改成「行式清单」：一行一条，缩略图贴左，规格贴右栏；
   · 关于我们的正文走双栏（column-count），像内刊排版。
   所有数据挂钩（.prod-grid / .prod-chip / #prodPager / .cases-grid /
   #casePager / .roles / .about-body / .timeline / .partners）保持原样。 */

/* ===== 字体（2026-11-03 用户要求：字体风格参考华为云 11.11 活动页） =====
   华为云那套排版的骨架是「西文/数字用几何无衬线 Manrope，中文交给
   PingFang SC / 微软雅黑」——他们主题 token 里 font-family 的第一位就是
   Manrope（`font-family:Manrope,-apple-system,HuaweiSans,…`）。
   这里照同一个组合来，不引任何专有字体：Manrope 是 OFL 开源字体，
   这里只取了 latin 子集（24KB，自托管，不依赖 fonts.gstatic.com），
   汉字仍由系统字体渲染 —— 两者字面高度接近，混排不会一大一小。
   只作用于 tech-b 这一套模版，其它模版维持原样。 */
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;
  src:url("../fonts/manrope-latin.woff2") format("woff2")}

body[data-tpl-id="tech-b"]{--sec-pad:84px;counter-reset:pb;
  /* 首页「闭合框卡片」的统一圆角：案例卡 / 产品卡 / 资讯卡 / why 卡共用同一个值。
     2026-11-03 用户要求首页线条直角框全部改圆角、整体更大气：12px → 14px。
     改值只改这里。 */
  --hb-r:14px;
  --font:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
    "Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif}
/* 价格、统计、日期这类数字用等宽字形：华为那版里数字永远对齐，
   列表刷新时不会左右跳动。汉字没有这个特性，不受影响。 */
body[data-tpl-id="tech-b"] .price,
body[data-tpl-id="tech-b"] [class*="price"],
body[data-tpl-id="tech-b"] .stat b,
body[data-tpl-id="tech-b"] time,
body[data-tpl-id="tech-b"] .bt-line b{font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"lnum" 1}
/* 序号计数器：原来只在 `.ip .sec` 上自增，而根目录的 news / contact 等页面
   没有 `<main class="ip">` 包裹 → 计数器恒为 0 → 每页标题前都挂着「00」。
   改成任意 `.sec` 都自增：`.ip` 页面里 .sec 就在 .ip 之内，编号不变；
   没有 .ip 的页面从 01 起正常编号（用户 2026-10-30 指出新闻页的 00）。 */
/* 2026-11-01：自增点从 .sec 挪到 .sec-head h2 —— 「有标题的区块才有编号」。
   原来 .sec 自增，ip-cta 这类没有 sec-head 的收尾区块也会吃掉一个号，
   关于我们页就出现 03 直接跳 05；挪到 h2 上后编号与可见标题一一对应、必然连续。 */
body[data-tpl-id="tech-b"] .sec-head h2{counter-increment:pb}
body[data-tpl-id="tech-b"] .sec-soft{background:var(--bg-soft)}

/* --- 内页 banner：深色网格 + 左对齐 --- */
body[data-tpl-id="tech-b"] .page-hero{padding:96px 0 78px;background:var(--deep)}
body[data-tpl-id="tech-b"] .page-hero::after{content:"";position:absolute;inset:0;z-index:1;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:56px 56px}
body[data-tpl-id="tech-b"] .page-hero .hero-art{width:min(44%,720px);opacity:.34}
body[data-tpl-id="tech-b"] .page-hero .hero-art img{filter:grayscale(1) brightness(.9)}
body[data-tpl-id="tech-b"] .page-hero .crumbs{display:inline-block;padding-bottom:13px;
  border-bottom:1px solid rgba(255,255,255,.24);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;letter-spacing:.12em}
body[data-tpl-id="tech-b"] .page-hero h1{font-size:clamp(32px,4.6vw,56px);max-width:19ch}
body[data-tpl-id="tech-b"] .page-hero p{max-width:62ch;color:rgba(255,255,255,.74)}

/* --- 编辑部式标题：顶部起笔刻度 + 等宽编号 ---
   原来这里是一条 780px 长的纯黑实线（#14100F → 现为 var(--ink)）。整页其余分隔线都是
   var(--line) 暖灰色发丝线，只有它和流程区上下线是墨黑，孤零零横在白底上、上方又是大片
   留白，就成了全页最刺眼的一笔（10-26 反馈「太刺眼」）。改成 72px 的一小截
   品牌色刻度、尾部渐隐：标题仍被"起笔"标出来，但视觉重量从一条通栏硬线
   降到一笔淡出。颜色走 var(--brand)，换配色自动跟随。 */
body[data-tpl-id="tech-b"] .sec-head,
body[data-tpl-id="tech-b"] .sec-head.center{text-align:left;margin-left:0;margin-right:0;
  max-width:780px;border-top:0;padding-top:20px;margin-bottom:44px;
  position:relative}
body[data-tpl-id="tech-b"] .sec-head::before{content:"";position:absolute;top:0;left:0;
  width:72px;height:2px;border-radius:1px;background:var(--brand);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 46%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 46%,rgba(0,0,0,0) 100%)}
body[data-tpl-id="tech-b"] .sec-head .eyebrow{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--faint);letter-spacing:.16em;margin-bottom:10px;font-size:11.5px}
body[data-tpl-id="tech-b"] .sec-head .eyebrow::before,
body[data-tpl-id="tech-b"] .sec-head .eyebrow::after{display:none}
body[data-tpl-id="tech-b"] .sec-head h2{font-size:clamp(26px,3vw,38px);
  display:flex;align-items:baseline;gap:14px}
body[data-tpl-id="tech-b"] .sec-head h2::before{content:counter(pb,decimal-leading-zero);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.5em;font-weight:600;
  color:var(--brand);letter-spacing:.06em}
/* 首页的区块头自带手写序号（.hb-no：01~07），而 CSS 计数器 pb 只在 `.ip .sec`
   上自增，首页没有 .ip 包裹 → 计数器恒为 00。两道编号会同时出现
   （截图里是「05 PROCESS」下面又挂一个「00 四步交付流程」），这里把计数器关掉。 */
body[data-tpl-id="tech-b"] .sec-head.hb-head h2::before{content:none}
/* margin 要显式归零：基准的 .sec-head.center p 带 auto 左右外边距，
   不覆盖的话左对齐标题下会出现一段「缩进」的副文案。 */
body[data-tpl-id="tech-b"] .sec-head p{max-width:62ch;margin:16px 0 0;font-size:16px}

/* --- 业务方向：一张简单表（2026-11-01 二次简化） ---
   上一版是「4 条业务线 × 3 项能力 + 适用场景」的行式矩阵，信息量太大、
   一屏看不完。这里退回成 4 行 3 列的表格：业务线 / 服务内容 / 典型交付，
   内容对齐公司真实业务（AI 与软件开发、物联网硬件、信息安全安防、
   华为云·阿里云·火山引擎代理），不加任何跳转。
   版式沿用本模版的编辑部线框：发丝线、左对齐、等宽小字号表头。
   区块标题前不再挂 01/02 —— 行里已经有 01~04，两套编号会互相打架。 */
body[data-tpl-id="tech-b"] .biz-table-wrap{overflow-x:auto}
body[data-tpl-id="tech-b"] .biz-table{width:100%;border-collapse:collapse;
  table-layout:fixed;margin:0}
body[data-tpl-id="tech-b"] .biz-table th{text-align:left;
  padding:0 24px 12px 0;border-bottom:1px solid var(--line-strong);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
body[data-tpl-id="tech-b"] .biz-table th:first-child{width:29%}
body[data-tpl-id="tech-b"] .biz-table th:nth-child(2){width:25%}
body[data-tpl-id="tech-b"] .biz-table td{padding:24px 24px 24px 0;
  border-bottom:1px solid var(--line);vertical-align:top}
body[data-tpl-id="tech-b"] .biz-table tr:last-child td{padding-bottom:26px}
body[data-tpl-id="tech-b"] .bt-line b{display:block;font-size:18px;letter-spacing:-.005em;
  margin:0 0 7px;color:var(--ink)}
body[data-tpl-id="tech-b"] .bt-no{display:block;margin-bottom:9px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;letter-spacing:.14em;color:var(--brand)}
body[data-tpl-id="tech-b"] .bt-line em{display:block;font-style:normal;
  font-size:13.2px;line-height:1.7;color:var(--muted);max-width:30ch}
body[data-tpl-id="tech-b"] .bt-tags span{display:inline-block;margin:0 6px 6px 0;
  padding:3px 9px;border:1px solid var(--line);border-radius:0;
  font-size:12.4px;line-height:1.5;color:var(--ink-2);white-space:nowrap}
body[data-tpl-id="tech-b"] .bt-dlv{font-size:13.8px;line-height:1.85;color:var(--muted)}
/* 2026-11-03 用户：四条业务线做成一行。
   原来是「业务线 / 服务内容 / 典型交付」三列表格、四行竖排，一屏只看到两条，
   四条的关系（并列的业务线）反而要滚一遍才看得出来。改成四张并排的卡片：
   每张卡内部仍是「编号 + 业务线 + 说明 / 标签 / 交付」，与窄屏同一套结构，
   只是从竖排换成横排 —— 表格没有拆，DOM 不动，「文案自定义」里的键也就不会漂。
   宽屏四列，中屏两列，≤640px 沿用下面的单列堆叠。 */
@media (min-width:641px){
  body[data-tpl-id="tech-b"] .biz-table thead{display:none}
  body[data-tpl-id="tech-b"] .biz-table,
  body[data-tpl-id="tech-b"] .biz-table tbody{display:block;width:auto}
  body[data-tpl-id="tech-b"] .biz-table tbody{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  /* 卡片造型参考华为云活动页（2026-11-03 用户给图）：白页上放浅灰圆角大卡，
     去边框去直角，标题加粗放大、副题一行灰字，标签收成药丸。 */
  body[data-tpl-id="tech-b"] .biz-table tr{
    display:flex;flex-direction:column;padding:26px 26px 24px;
    border:0;border-radius:16px;background:var(--bg-soft,#f7f8fa);
    box-shadow:0 1px 2px rgba(15,23,42,.04)}
  body[data-tpl-id="tech-b"] .biz-table td{display:block;padding:0;border:0;width:auto}
  body[data-tpl-id="tech-b"] .biz-table tr:last-child td{padding-bottom:0}
  /* 编号是「编辑部线框」的记号，大卡风格里显得多余，桌面端收掉 */
  body[data-tpl-id="tech-b"] .biz-table .bt-no{display:none}
  body[data-tpl-id="tech-b"] .bt-line b{font-size:19px;line-height:1.4;
    letter-spacing:-.01em}
  /* 2026-11-03 用户：副题要铺满到卡片内容区全宽（红框处），不要提前折行。
     去掉限宽后文字按卡宽自然换行；text-wrap:balance 让折成两行的
     （如 36 字那条）两行长度均衡。原本就放得下的短副题是一整行。 */
  /* 2026-09-03 用户：红框左右留白要一致。内边距本就对称（左 24 右 24），
     但折行的文字行末常停在离右缘几个像素处，视觉上右空 < 左空。
     两端对齐后每行撑满整个内容宽，左右留白严格相等；末行仍左对齐。 */
  body[data-tpl-id="tech-b"] .bt-line em{max-width:none;margin-top:8px;
    font-size:13.6px;line-height:1.75;text-wrap:balance;text-align:justify}
  body[data-tpl-id="tech-b"] .bt-tags{margin-top:16px;margin-bottom:10px;
    display:flex;flex-wrap:wrap;gap:8px}
  /* 2026-11-03 用户：标签字小一号、内边距收一档——四个字以上的标签
     在窄卡里不再顶满一行，拥挤感主要来自这里 */
  body[data-tpl-id="tech-b"] .bt-tags span{margin:0;border-radius:999px;
    background:var(--card-bg);padding:4px 12px;font-size:12px;line-height:1.5}
  /* 2026-11-03 用户：2×2 排版还是丑——病灶是「标签」和「交付说明」两段灰字
     贴在一起、中间又留一段空，看着像排版事故。给交付说明加一条细分隔线 +
     钉底：卡片天然分成「标题+副题+标签」和「底部交付」两个区域，
     中间的空隙读起来是有意的留白，不是没排好。分隔线用墨色 7% 透明度，
     与本模版其它线条同一档浅度。 */
  body[data-tpl-id="tech-b"] .bt-dlv{margin-top:auto;padding-top:18px;
    border-top:1px solid rgba(21,24,31,.07);
    font-size:13.2px;line-height:1.8;color:var(--ink-2);text-align:justify}
}
/* 2026-11-03 用户反馈「有点拥挤」：中屏不硬塞四列——每张卡只剩 280px 左右，
   标签换行、正文挤成细条。四列一行只在很宽的屏（≥1360px）出现，
   1280 这类常见宽度走 2×2，卡片宽一倍，留白立刻回来。 */
@media (min-width:1360px){
  body[data-tpl-id="tech-b"] .biz-table tbody{
    grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  body[data-tpl-id="tech-b"] .biz-table tr{padding:26px 24px 24px}
  body[data-tpl-id="tech-b"] .bt-line b{font-size:18.5px}
  /* 2026-11-03 用户：标签小字要在一行。四列卡每张内宽 ~288px，
     最长一行（如「电脑组件与物联网硬件/储能芯片/配套软件」）按 12px
     会折成两行；字号收到 11.2px、内边距 3×9、卡内边距同步收 2px，
     实测最宽一行 ~279px，放得下。2×2 档（641–1359px）卡宽一倍，
     保持 12px 不动。 */
  body[data-tpl-id="tech-b"] .bt-tags{gap:6px}
  body[data-tpl-id="tech-b"] .bt-tags span{
    padding:3px 8px;font-size:11.2px}
}
/* 常见组合收成一行注脚，不再占三栏卡片 */
body[data-tpl-id="tech-b"] .biz-note{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:10px 22px;margin:22px 0 0;padding-top:16px;
  border-top:1px solid var(--line-strong);font-size:13px;color:var(--muted)}
body[data-tpl-id="tech-b"] .biz-note .bt-k{flex:0 0 auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
body[data-tpl-id="tech-b"] .biz-note .bt-c{display:inline-flex;align-items:baseline;gap:7px}
body[data-tpl-id="tech-b"] .biz-note b{font-weight:600;font-size:13px;color:var(--ink)}
body[data-tpl-id="tech-b"] .biz-note i{font-style:normal;color:var(--muted)}

/* --- 产品与服务：分类做下划线条、列表做行式清单 --- */
body[data-tpl-id="tech-b"] .prod-filter{justify-content:flex-start;gap:0;margin:0;
  border-bottom:1px solid var(--line)}
body[data-tpl-id="tech-b"] .prod-chip{border:0;border-bottom:2px solid transparent;border-radius:var(--btn-r);
  background:none;box-shadow:none;padding:12px 18px;font-size:13.4px;color:var(--muted)}
body[data-tpl-id="tech-b"] .prod-chip:first-child{padding-left:0}
body[data-tpl-id="tech-b"] .prod-chip:hover{border-color:var(--line);color:var(--ink)}
body[data-tpl-id="tech-b"] .prod-chip.is-on{background:none;color:var(--brand);
  border-bottom-color:var(--brand);box-shadow:none}
body[data-tpl-id="tech-b"] .prod-grid{grid-template-columns:1fr;gap:0;counter-reset:pc;
  border-bottom:1px solid var(--line-strong)}
body[data-tpl-id="tech-b"] .prod-card{display:grid;grid-template-columns:230px minmax(0,1fr);
  border:0;border-top:1px solid var(--line);border-radius:0;background:none;
  padding:26px 0 28px 68px;position:relative;overflow:visible;counter-increment:pc}
body[data-tpl-id="tech-b"] .prod-card:first-child{border-top:0}
body[data-tpl-id="tech-b"] .prod-card::before{content:counter(pc,decimal-leading-zero);
  position:absolute;left:0;top:30px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;color:var(--faint);letter-spacing:.08em}
body[data-tpl-id="tech-b"] .prod-card:hover{transform:none;box-shadow:none;
  border-color:var(--line-strong);background:var(--bg-soft)}
/* 图片列不再撑满整行：取消 stretch 改为按比例取高并垂直居中，
   行内文字比图高时图片居中，上下也不会再顶到分隔线 */
body[data-tpl-id="tech-b"] .prod-fig{aspect-ratio:16/10;border-radius:0;background:var(--soft-2);
  align-self:center}
body[data-tpl-id="tech-b"] .prod-card:hover .prod-fig img{transform:scale(1.02)}
body[data-tpl-id="tech-b"] .prod-cat{background:var(--card-bg);border:1px solid var(--line);border-radius:2px;
  color:var(--muted);font-size:11px;letter-spacing:.06em;padding:3px 8px;top:12px;left:12px}
body[data-tpl-id="tech-b"] .prod-body{padding:0 4px 0 28px;display:grid;
  grid-template-columns:minmax(0,1fr) 250px;gap:10px 32px;align-content:center}
body[data-tpl-id="tech-b"] .prod-body h3{grid-column:1;font-size:19px;margin:0}
body[data-tpl-id="tech-b"] .prod-body p{grid-column:1;margin:0;font-size:14.6px;max-width:60ch}
body[data-tpl-id="tech-b"] .prod-specs{grid-column:2;grid-row:1 / span 2;margin:0;
  padding:2px 0 0 22px;border-top:0;border-left:1px solid var(--line)}
body[data-tpl-id="tech-b"] .prod-specs li{font-size:12.8px;padding-left:12px;line-height:1.65}
body[data-tpl-id="tech-b"] .prod-pager{justify-content:flex-start;margin-top:30px}
body[data-tpl-id="tech-b"] .prod-note{text-align:left;margin-left:0;max-width:64ch;font-size:14.6px}

/* --- 客户案例：圆角线框卡（2026-11-03 用户要求案例/资讯全部圆角边框） ---
   之前是「只有上边线」的编辑部稿位；用户 2026-11-03 要求列表页与首页统一，
   全部收成闭合线框 + 圆角（--hb-r 14px）。图全出血顶到框，文字区内缩，
   悬停轻浮 + 柔影，与首页 .hb-flat 动态卡同一套语言。 */
body[data-tpl-id="tech-b"] .cases-grid{grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px 44px;counter-reset:cc}
body[data-tpl-id="tech-b"] .case-card{border:1px solid var(--line);border-radius:var(--hb-r);
  background:var(--card-bg);padding:0;overflow:hidden;counter-increment:cc;
  transition:border-color .18s ease,box-shadow .22s ease,transform .22s ease}
/* 悬停不再染品牌色边框（2026-11-03 用户：边框颜色要和其他边框一致）：
   只留阴影与位移，配色阴影由 style.css 的全局规则统一接管。 */
body[data-tpl-id="tech-b"] .case-card:hover{border-color:var(--line);
  box-shadow:0 16px 34px rgba(var(--shadow-rgb),.10);transform:translateY(-3px)}
body[data-tpl-id="tech-b"] .case-card.has-img{display:flex;flex-direction:column}
body[data-tpl-id="tech-b"] .case-fig{aspect-ratio:16/10;background:var(--soft-2);
  margin:0;overflow:hidden;flex:0 0 auto}
body[data-tpl-id="tech-b"] .case-fig img{width:100%;height:100%;object-fit:cover}
body[data-tpl-id="tech-b"] .case-body{padding:18px 20px 20px;display:flex;
  flex-direction:column;flex:1 1 auto;min-height:0}
/* 成果统一贴底（2026-11-03 用户）：正文撑满剩余高度，成果行压到卡片底部，
   同一行卡片高度一致，不再因文案长短参差。 */
body[data-tpl-id="tech-b"] .case-card .case-result{margin-top:auto;padding-top:16px}
body[data-tpl-id="tech-b"] .case-card h3{font-size:19px}
body[data-tpl-id="tech-b"] .case-card h3::before{content:counter(cc,decimal-leading-zero);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--faint);
  margin-right:8px;vertical-align:2px}
/* 标签与成果不再用描边胶囊（2026-11-03 用户：不加边框，文字颜色说明即可）：
   标签压成灰色小字、间隔点分隔；成果用品牌色文字加 ✓ 前缀，行式排布贴底。 */
body[data-tpl-id="tech-b"] .case-tags span{background:none;border:0;border-radius:0;
  color:var(--muted);font-size:11px;padding:0;letter-spacing:.04em}
body[data-tpl-id="tech-b"] .case-tags span + span::before{
  content:"·";margin-right:8px;color:var(--faint)}
body[data-tpl-id="tech-b"] .case-result span{background:none;border:0;border-radius:0;
  color:var(--brand);font-size:12.5px;font-weight:600;padding:0}
body[data-tpl-id="tech-b"] .case-result span::before{content:"✓ ";font-weight:700}
body[data-tpl-id="tech-b"] .cases-note{text-align:left;margin-left:0;max-width:64ch;font-size:14.6px}

/* 首页「典型合作案例」一行四张（2026-11-03 用户）：窄卡里不放长文。
   之前是两栏大卡（图 + 两段正文 + 结果胶囊）；用户要求四张一行、内容精简——
   四栏后每卡约 300px 宽，挑战/方案两段和标签挤在里面只剩半行残句，
   故只保留「图 + 标题 + 结果胶囊」，正文与标签由 CSS 隐藏（数据不动，
   cases.html 总览页仍完整展示）。每个元素钉死行数：图 4:3、标题两行、
   结果胶囊一行省略，同行 1fr 等高。只作用于 #homecases。 */
body[data-tpl-id="tech-b"] #homecases .cases-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;grid-auto-rows:1fr}
body[data-tpl-id="tech-b"] #homecases .case-card{display:flex;flex-direction:column;min-height:0;
  /* style.css 的 #homecases .case-card{padding:24px 20px}（ID 权重）会给卡片
     垫 20px 左右内边距，图和文字整体右缩、与标题左缘错开（2026-11-01 用户指出）。
     这里以同等 + attr 的更高权重归零，卡片内容与区块标题左缘对齐。 */
  padding:26px 0 34px}
body[data-tpl-id="tech-b"] #homecases .case-fig{
  aspect-ratio:4/3;background:var(--soft-2);margin:0 0 14px;overflow:hidden}
body[data-tpl-id="tech-b"] #homecases .case-fig img{width:100%;height:100%;object-fit:cover}
/* 2026-11-01：.case-body 必须归零内边距 —— style.css 的
   `#homecases .case-body{padding:18px 20px 22px}`（ID 权重）压过
   `.case-body{padding:0}`，于是图片贴 24px、标题与正文却从 44px 起，
   图文左缘错开 20px、右侧也短一截。这里用同等 + attr 的更高权重归零，
   文字与图片同起同止（正文再走两端对齐，右缘也齐）。 */
body[data-tpl-id="tech-b"] #homecases .case-body{display:flex;flex-direction:column;
  flex:1 1 auto;min-height:0;padding:0}
body[data-tpl-id="tech-b"] #homecases .case-card p{
  text-align:justify;text-justify:inter-ideograph}
/* 2026-11-01（二次）：案例卡加细边框，收成闭合线框（用户）。
   图片全出血顶到框，文字区统一内缩 20px —— 框内图文左右仍互相对齐，
   只是相对区块整体多一层框的内缩。 */
body[data-tpl-id="tech-b"] #homecases .case-card{border:1px solid var(--line);
  border-radius:var(--hb-r);padding:0;overflow:hidden;background:var(--card-bg)}
body[data-tpl-id="tech-b"] #homecases .case-body{padding:14px 16px 16px}
/* 四栏精简版（2026-11-03，二次定稿）：窄卡放「标题 + 挑战」（用户：
   结果胶囊一条条太密，标题+挑战更像案例故事）；方案段、标签与结果胶囊
   不上首页，总览页仍完整展示。挑战一句三行截断，颜色压灰不抢标题。 */
body[data-tpl-id="tech-b"] #homecases .case-tags,
body[data-tpl-id="tech-b"] #homecases .case-result,
body[data-tpl-id="tech-b"] #homecases .case-card p + p{display:none}
body[data-tpl-id="tech-b"] #homecases .case-card p{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  margin:0;font-size:13.5px;color:var(--muted)}
body[data-tpl-id="tech-b"] #homecases .case-card p strong{color:var(--ink)}
body[data-tpl-id="tech-b"] #homecases .case-card h3{
  font-size:16px;line-height:1.45;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  min-height:2.9em;margin:0 0 10px}
/* 结果胶囊贴底、不参与压缩：卡片高度由内容决定，同行用 1fr 对齐。
   曾经写成 max-height:27px 想在内容多时裁成一行，结果在 flex 列里被压扁成
   一排空边框（文字全被裁掉，2026-10-30 用户截图指出）。四栏窄卡放不下
   nowrap 长句，改「块内一行省略」。 */
body[data-tpl-id="tech-b"] #homecases .case-result{margin-top:auto;flex:0 0 auto;min-width:0}
body[data-tpl-id="tech-b"] #homecases .case-result span{
  display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:11px}
body[data-tpl-id="tech-b"] #homecases .cases-grid{border-bottom:0}
@media (max-width:1100px){
  body[data-tpl-id="tech-b"] #homecases .cases-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  body[data-tpl-id="tech-b"] #homecases .cases-grid{grid-template-columns:1fr}
}

/* --- 招贤纳士：福利做双栏词条式，岗位做无卡行式 --- */
body[data-tpl-id="tech-b"] .benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px}
body[data-tpl-id="tech-b"] .benefit{border:0;border-top:1px solid var(--line-strong);border-radius:0;
  background:none;padding:24px 0 26px;display:grid;grid-template-columns:56px minmax(0,1fr);
  gap:0 18px;align-content:start}
body[data-tpl-id="tech-b"] .benefit .ico{grid-row:1 / span 2;width:32px;height:32px;margin:2px 0 0;opacity:.8}
body[data-tpl-id="tech-b"] .benefit h4{margin:0 0 8px;font-size:17px}
body[data-tpl-id="tech-b"] .benefit p{font-size:14.4px}
body[data-tpl-id="tech-b"] .roles{gap:0}
body[data-tpl-id="tech-b"] .role{border:0;border-top:1px solid var(--line);border-radius:0;
  background:none;padding:22px 0}
body[data-tpl-id="tech-b"] .role:hover{box-shadow:none;border-color:var(--line-strong)}
body[data-tpl-id="tech-b"] .role.is-open{border-color:var(--brand);box-shadow:none}
body[data-tpl-id="tech-b"] .role .r-l .r-tags li{background:var(--soft-2);border-radius:2px}
body[data-tpl-id="tech-b"] .role .r-detail{border-top:1px solid var(--line)}

/* --- 按钮：结构可以直角，按钮一律圆角 ---
   这套模版的卡片、表格、图墙都是直角（编辑部线框语言），但**按钮不跟着方**：
   方块按钮在圆角标签、胶囊筛选旁边会显得像「没上完样式」。
   统一读 --btn-r（全站唯一口径），模版只在需要时调「多圆」，绝不写 0。 */
body[data-tpl-id="tech-b"] .btn{border-radius:var(--btn-r);font-size:14.4px;padding:13px 24px}
body[data-tpl-id="tech-b"] .btn-primary{background:var(--brand);box-shadow:none}
body[data-tpl-id="tech-b"] .btn-primary:hover{background:var(--brand-3);box-shadow:none;transform:none}
body[data-tpl-id="tech-b"] .btn-ghost{box-shadow:none}
body[data-tpl-id="tech-b"] .btn-ghost:hover{box-shadow:none;transform:none;border-color:var(--brand)}

/* --- 关于我们：双栏正文 + 横线时间轴 ---
   2026-10-26 用户反馈「我们是谁这一段不适配」，三处都是排版口径没跟上内容：
   ① 导语（.lead-3）是「一句一行」写的，最长一行约 48 个汉字；而 .sec-head p 的
      max-width:62ch 在中文里只有 31 个汉字（ch 是 "0" 的宽度，不是汉字宽度），
      于是每一行都被二次折断，变成四行半句。这里让它吃满 780px 的标题栏（≈48 字）。
   ② 正文原来 break-inside:avoid，3 段时只能「左 1 段 / 右 2 段」，左栏下方空掉半栏。
      改成允许段内断栏，多栏会自动等高，任何段数都不会留空洞。
   ③ 图墙原本 3 列，而相册固定 4 张 → 第 4 张独占一行、右边空 2/3。
      换 auto-fit：空轨道会被折叠，3/4/5 张都能铺满一行。 */
body[data-tpl-id="tech-b"] .sec-head p.lead-3{max-width:none;font-size:16px;line-height:1.85}
body[data-tpl-id="tech-b"] .about-body{max-width:none;column-count:2;column-gap:52px}
body[data-tpl-id="tech-b"] .about-body p{font-size:15.6px;break-inside:auto;
  orphans:1;widows:1;margin-bottom:18px}
body[data-tpl-id="tech-b"] .about-body .about-cta{column-span:all;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--line);text-align:left}
/* 210px 是关键：相册固定 4 张，240px 在 981~1220 宽只排得下 3 列 → 第 4 张落单。
   210px 在 981 宽就够 4 列，1440 宽会生成 6 条轨道、空的两条被 auto-fit 折叠。 */
body[data-tpl-id="tech-b"] .about-gallery{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px}
body[data-tpl-id="tech-b"] .about-gallery img{border-radius:0;box-shadow:none}
body[data-tpl-id="tech-b"] .about-gallery figcaption{text-align:left;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  letter-spacing:.04em;color:var(--faint);margin-top:8px}
body[data-tpl-id="tech-b"] .timeline{border-bottom:1px solid var(--line-strong)}
body[data-tpl-id="tech-b"] .timeline .ti{grid-template-columns:120px 1fr;padding:20px 0;
  border-bottom:1px solid var(--line)}
body[data-tpl-id="tech-b"] .why{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px}
body[data-tpl-id="tech-b"] .why-item{border:0;border-top:1px solid var(--line-strong);border-radius:0;
  background:none;padding:22px 0}
body[data-tpl-id="tech-b"] .why-item em{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--faint);letter-spacing:.1em}
body[data-tpl-id="tech-b"] .partners{border-top:1px solid var(--line-strong);justify-content:flex-start;gap:38px}

/* --- 收尾 CTA：左边是主张，右边是联系卡（2026-10-31 重排） ---
   原来是「标题 + 一行小字 + 按钮」全堆在左边一列，右侧 2/3 一片空白，
   1080 宽的截图里看着像没排完版。这里改成两栏：左栏给标题与正文（正文
   用 em 限宽，原来 60ch 对中文只有 30 个字就换行，窄得像侧栏），右栏把
   电话/邮箱/地址/工作时间摆成联系卡，顺便把「怎么联系」直接摊在页面上。 */
body[data-tpl-id="tech-b"] .ip-cta .wrap{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(290px,.62fr);
  gap:56px 64px;align-items:start;text-align:left;
  border-top:1px solid var(--line-strong);padding-top:38px}
body[data-tpl-id="tech-b"] .ip-cta .ac-main{min-width:0}
body[data-tpl-id="tech-b"] .ip-cta h2{font-size:clamp(26px,3.1vw,40px);max-width:none;
  line-height:1.24;letter-spacing:-.01em;margin:0}
body[data-tpl-id="tech-b"] .ip-cta p{max-width:34em;color:var(--muted);
  margin:18px 0 0;font-size:15.4px;line-height:1.9}
body[data-tpl-id="tech-b"] .ip-cta .ac-acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
body[data-tpl-id="tech-b"] .ac-side{margin:0;padding:0 0 0 40px;
  border-left:1px solid var(--line);display:grid;gap:18px}
body[data-tpl-id="tech-b"] .ac-side>div{padding-bottom:16px;border-bottom:1px solid var(--line)}
body[data-tpl-id="tech-b"] .ac-side>div:last-child{padding-bottom:0;border-bottom:0}
body[data-tpl-id="tech-b"] .ac-side dt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
body[data-tpl-id="tech-b"] .ac-side dd{margin:6px 0 0;font-size:15px;line-height:1.65;
  color:var(--ink);word-break:break-word}
body[data-tpl-id="tech-b"] .ac-side dd a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
body[data-tpl-id="tech-b"] .ac-side dd a:hover{color:var(--brand);border-bottom-color:var(--brand)}

@media (max-width:980px){
  body[data-tpl-id="tech-b"] .prod-card{grid-template-columns:150px minmax(0,1fr);padding:22px 0 24px}
  body[data-tpl-id="tech-b"] .prod-card::before{display:none}
  body[data-tpl-id="tech-b"] .prod-body{grid-template-columns:1fr;padding:0 4px 0 22px}
  body[data-tpl-id="tech-b"] .prod-specs{grid-column:1;grid-row:auto;border-left:0;
    padding:12px 0 0;border-top:1px solid var(--line)}
  body[data-tpl-id="tech-b"] .cases-grid,
  body[data-tpl-id="tech-b"] .benefits,
  body[data-tpl-id="tech-b"] .why{grid-template-columns:1fr}
  body[data-tpl-id="tech-b"] .about-body{column-count:1}
  body[data-tpl-id="tech-b"] .about-gallery{grid-template-columns:1fr 1fr}
  /* 收尾 CTA 收到一栏：联系卡改竖排，横线从「左侧」换到「上方」 */
  body[data-tpl-id="tech-b"] .ip-cta .wrap{grid-template-columns:1fr;gap:28px}
  body[data-tpl-id="tech-b"] .ac-side{padding:24px 0 0;border-left:0;
    border-top:1px solid var(--line-strong)}
  /* 业务方向：表格列宽在窄屏收一收，业务线列给足标题宽度 */
  body[data-tpl-id="tech-b"] .biz-table th:first-child{width:32%}
  body[data-tpl-id="tech-b"] .biz-table th:nth-child(2){width:27%}
  body[data-tpl-id="tech-b"] .biz-table td{padding:22px 16px 22px 0}
  body[data-tpl-id="tech-b"] .bt-line em{max-width:none}
}
@media (max-width:640px){
  body[data-tpl-id="tech-b"] .prod-card{grid-template-columns:1fr}
  body[data-tpl-id="tech-b"] .prod-fig{aspect-ratio:16/9}
  body[data-tpl-id="tech-b"] .prod-body{padding:16px 2px 0}
  body[data-tpl-id="tech-b"] .about-gallery{grid-template-columns:1fr}
  /* 业务方向：表头和表格上下文一起拆掉，每行变成「编号 + 业务线 / 标签 / 交付」的竖排块 */
  body[data-tpl-id="tech-b"] .biz-table,
  body[data-tpl-id="tech-b"] .biz-table tbody,
  body[data-tpl-id="tech-b"] .biz-table tr,
  body[data-tpl-id="tech-b"] .biz-table td{display:block;width:auto}
  body[data-tpl-id="tech-b"] .biz-table thead{display:none}
  body[data-tpl-id="tech-b"] .biz-table tr{padding:20px 0;border-bottom:1px solid var(--line)}
  body[data-tpl-id="tech-b"] .biz-table td{padding:0;border:0}
  body[data-tpl-id="tech-b"] .bt-line b{font-size:17px}
  body[data-tpl-id="tech-b"] .bt-tags{margin-top:12px}
  body[data-tpl-id="tech-b"] .bt-dlv{margin-top:12px}
}

/* ===== 页脚 v2：编辑部线框（2026-11-01 改深色，与内页 banner 呼应） =====
   页脚原来是白底 + 发丝线，和正文连成一片，落地页看到最后没有「收口」。
   现在整块换成 banner 同款深底（var(--deep) + 56px 白色网格），
   页面从深色 hero 起、到深色页脚收，首尾呼应；中间仍是白底线框正文。
   配色全部走变量：--deep / --on-deep 随皮肤变，换配色时深色块跟着色相走。
   注意：Logo 是后台下发的深色图，深底上必须带 data-logo-invert 转白。 */
footer.f2{background:var(--deep-2);color:rgba(255,255,255,.72);
  padding:0 0 26px;border-top:0;position:relative;overflow:hidden;
  --on-deep:#fff}
footer.f2::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:56px 56px}
footer.f2 > .wrap{position:relative;z-index:1}
/* 页脚 CTA：从「一句标题 + 一个按钮」扩成转化区（2026-11-01）。
   左边讲清楚「怎么做才最省事、我们会给什么」，右边把动作摆出来：
   主按钮去表单，电话直接拨（号码由后台 site-info 注入），工作时间也读后台。 */
footer.f2 .f2-top{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;
  align-items:center;padding:56px 0 42px;border-bottom:1px solid rgba(255,255,255,.16)}
footer.f2 .f2-kicker{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;letter-spacing:.18em;color:var(--brand-2);text-transform:uppercase;margin-bottom:14px}
/* 2026-11-02 标题不再折行：原 max-width:24ch 是按「0」的宽度算的，中文字宽约 0.5ch，
   24ch 只有 456px（约 13 个汉字），「把场景说清楚，方案和报价一起给」15 个字被切成 3 行。
   左栏本身有 1004px 余量，去掉上限交给网格列宽；英文文案更长时按容器自然折行即可。 */
footer.f2 .f2-cta h2{font-size:clamp(24px,2.6vw,33px);color:var(--on-deep);
  letter-spacing:-.015em;line-height:1.3}
footer.f2 .f2-cta p{margin:15px 0 0;font-size:14.6px;line-height:1.85;
  color:rgba(255,255,255,.7);max-width:46ch}
footer.f2 .f2-points{display:flex;flex-wrap:wrap;gap:10px 24px;
  margin:20px 0 0;padding:0;list-style:none}
footer.f2 .f2-points li{position:relative;padding-left:14px;
  font-size:12.8px;line-height:1.6;color:rgba(255,255,255,.8)}
footer.f2 .f2-points li::before{content:"";position:absolute;left:0;top:.66em;
  width:5px;height:5px;background:var(--brand-2)}
footer.f2 .f2-acts{display:flex;flex-direction:column;align-items:flex-start;gap:15px;
  padding-top:4px}
footer.f2 .f2-btn{border:1px solid var(--brand);background:var(--brand);color:var(--on-brand);
  box-shadow:none;flex:0 0 auto}
footer.f2 .f2-btn:hover{background:var(--brand-3);border-color:var(--brand-3);transform:none}
footer.f2 .f2-tel{display:inline-flex;align-items:baseline;gap:10px;
  font-size:12.8px;color:rgba(255,255,255,.56)}
footer.f2 .f2-tel a{color:var(--on-deep);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px;letter-spacing:.02em;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:1px}
footer.f2 .f2-tel a:hover{color:var(--brand-2);border-bottom-color:var(--brand-2)}
footer.f2 .f2-note{display:inline-flex;align-items:baseline;gap:8px;
  font-size:12.2px;color:rgba(255,255,255,.42)}
footer.f2 .f2-note b{font-weight:400;color:rgba(255,255,255,.72)}
/* 2026-10-26 起页脚只有「品牌 + 导航 + 联系」三块（核心业务那列已下线，
   8 个业务页的入口改在产品与服务页的「业务方向」区块）。
   栅格从 1.5fr 1fr 1fr 1fr 收成三列，品牌块多给一点宽度放描述。 */
footer.f2 .f2-main{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:38px;padding:38px 0 34px}
footer.f2 .logo-full{height:44px}
footer.f2 .f-desc{color:rgba(255,255,255,.62);font-size:13.6px;max-width:34ch;margin-top:16px}
footer.f2 .f2-meta{margin-top:18px;display:grid;gap:7px;font-size:13.4px;color:rgba(255,255,255,.62)}
footer.f2 .f2-meta a{color:rgba(255,255,255,.62)}
footer.f2 .f2-meta a:hover{color:var(--on-deep)}
footer.f2 .f2-col h5{display:flex;align-items:baseline;gap:9px;color:var(--on-deep);font-size:13px;
  letter-spacing:.02em;margin-bottom:16px}
footer.f2 .f2-col h5 i{font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;color:rgba(255,255,255,.4);letter-spacing:.06em}
footer.f2 .f2-col li{margin-bottom:9px;font-size:13.4px}
footer.f2 .f2-col a{color:rgba(255,255,255,.62);transition:color .2s}
footer.f2 .f2-col a:hover{color:var(--on-deep)}
footer.f2 .f2-bottom{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.14);padding-top:20px;font-size:12.5px;
  color:rgba(255,255,255,.42);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
footer.f2 .f2-bottom a{color:rgba(255,255,255,.6);border-bottom:1px solid rgba(255,255,255,.2)}
footer.f2 .f2-bottom a:hover{color:var(--on-deep)}
footer.f2 .icp{display:inline-flex;align-items:center;gap:9px}
@media (max-width:980px){
  footer.f2 .f2-main{grid-template-columns:1fr 1fr}
  footer.f2 .f2-top{grid-template-columns:1fr;gap:30px}
  footer.f2 .f2-acts{flex-direction:row;flex-wrap:wrap;align-items:center;gap:16px 22px}
  footer.f2 .f2-cta h2{max-width:none}
}
@media (max-width:640px){
  footer.f2 .f2-main{grid-template-columns:1fr;gap:26px}
  footer.f2 .f2-bottom{flex-direction:column}
  footer.f2 .f2-acts{flex-direction:column;align-items:flex-start;gap:14px}
  footer.f2 .f2-points{flex-direction:column;gap:8px}
}

/* --- 顶栏：编辑部线框（直角 + 发丝线 + 墨色方块按钮） ---
   与 tech 基准的「白底圆角胶囊按钮 + 2px 圆头下划线」正好相反：
   这里全直角、下划线 1px 且不加缓动，按钮做成墨色方块，像刊物的目录页。
   只改外观，不动 .nav 的 72px 高度 —— hero 的 margin-top 是按它算的。 */
body[data-tpl-id="tech-b"] header{background:var(--card-bg);border-bottom:1px solid var(--hair)}
body[data-tpl-id="tech-b"] .nav-links{gap:26px}
body[data-tpl-id="tech-b"] .nav-links a{font-size:14.4px;font-weight:600;letter-spacing:.01em;color:var(--ink)}
body[data-tpl-id="tech-b"] .nav-links a::after{bottom:-1px;height:1px;border-radius:0;
  background:var(--brand);transition:right .16s linear}
body[data-tpl-id="tech-b"] .nav-links a:hover{color:var(--ink)}
body[data-tpl-id="tech-b"] .nav-links a.active{color:var(--brand)}
body[data-tpl-id="tech-b"] .nav-cta .btn{border-radius:var(--btn-r);background:var(--brand);color:var(--on-brand);
  padding:11px 20px;font-size:13.6px;letter-spacing:.02em;box-shadow:none}
body[data-tpl-id="tech-b"] .nav-cta .btn:hover{background:var(--brand-3);color:var(--on-brand)}
body[data-tpl-id="tech-b"] .burger{border-radius:12px;border-color:var(--line-strong)}
body[data-tpl-id="tech-b"] .drop-panel{border-radius:0;border-color:var(--line-strong);padding:8px;
  box-shadow:7px 7px 0 rgba(var(--shadow-rgb),.09)}
body[data-tpl-id="tech-b"] .drop-panel::before{border-radius:0}
body[data-tpl-id="tech-b"] .drop-panel a{border-radius:0;font-size:14px}
body[data-tpl-id="tech-b"] .drop-panel a:hover{background:var(--soft-2);color:var(--ink)}
body[data-tpl-id="tech-b"] .drop-panel a.cur{background:var(--brand);color:var(--on-brand)}
body[data-tpl-id="tech-b"] .drop-cap{font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* --- 借来的页面（新闻 / 联系 / 隐私 / 业务页）也要是同一套语言 ---
   这几页在 tech-b 目录里没有副本，靠 StaticHandler 的「皮肤注入」挂上本模版：
   data-tpl-id、模版 CSS、页脚三项都会换，但卡片本身是基准页的圆角+投影。
   只改外观，不动结构，数据挂钩一个都不碰。
   （2026-11-03：.news-card 从这份直角名单里移出——用户要求资讯卡
   与案例卡统一圆角线框，见下方独立规则。） */
body[data-tpl-id="tech-b"] .c-item,
body[data-tpl-id="tech-b"] .wechat-card,
body[data-tpl-id="tech-b"] form,
body[data-tpl-id="tech-b"] .stat,
body[data-tpl-id="tech-b"] .cap-layer,
body[data-tpl-id="tech-b"] .panel-card,
body[data-tpl-id="tech-b"] .icard,
body[data-tpl-id="tech-b"] .faq details,
body[data-tpl-id="tech-b"] .info-table{
  border-radius:0;box-shadow:none;border-color:var(--line)}
body[data-tpl-id="tech-b"] .c-item:hover{border-color:var(--line-strong);box-shadow:none}
/* 新闻卡（列表页 + 首页 + 借来页面统一）：圆角线框 + 图全出血 + 悬停轻浮。
   2026-11-01 曾按「列表页保持直角」处理，2026-11-03 用户要求全部改圆角。 */
body[data-tpl-id="tech-b"] .news-card{border-radius:var(--hb-r);overflow:hidden;
  border:1px solid var(--line);background:var(--card-bg);
  transition:border-color .18s ease,box-shadow .22s ease,transform .22s ease}
/* 悬停不染边框，理由同 .case-card:hover（2026-11-03 用户要求） */
body[data-tpl-id="tech-b"] .news-card:hover{border-color:var(--line);
  box-shadow:0 16px 34px rgba(var(--shadow-rgb),.10);transform:translateY(-3px)}
body[data-tpl-id="tech-b"] .news-card .news-fig{overflow:hidden}
/* 筛选 chip / 翻页按钮的圆角交给基础样式（胶囊 + 10px），本模版不再覆盖成直角 */
body[data-tpl-id="tech-b"] .field input,
body[data-tpl-id="tech-b"] .field select,
body[data-tpl-id="tech-b"] .field textarea{border-radius:0}
body[data-tpl-id="tech-b"] .info-table .cap{border-radius:0}

/* --- 需求表单：下拉框与输入框视觉统一（用户 2026-11-01） ---
   原生 select 在 Chrome 下带系统外观：右侧一个系统画的箭头、高度比同排 input
   高 2px（48 对 46）、内边距也不同，排在一起时「联系电话」的区号框和
   「需求类型」像另一套控件。这里统一成：
   去掉原生外观 → 高度 / 内边距 / 底色与 input 完全一致 → 右侧自绘箭头。
   箭头用两条边框转 45° 画（与语言切换器 .lang-wrap::after 同一写法），
   颜色取 var(--muted)，换配色时自动跟着变，不写死 hex。
   select 不支持伪元素，箭头只能挂在包着它的 .field / .phone-group 上。 */
body[data-tpl-id="tech-b"] .field select{
  -webkit-appearance:none;appearance:none;
  height:46px;line-height:20px;padding:0 40px 0 14px;
  background-color:var(--bg);background-image:none;
  cursor:pointer;text-overflow:ellipsis}
body[data-tpl-id="tech-b"] .field select::-ms-expand{display:none}
/* 「需求类型」：select 是 .field 的最后一个子元素，箭头对齐这 46px 高的控件 */
body[data-tpl-id="tech-b"] .field:has(> select){position:relative}
body[data-tpl-id="tech-b"] .field:has(> select)::after{
  content:"";position:absolute;right:16px;bottom:18px;width:7px;height:7px;
  border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
  transform:rotate(45deg);pointer-events:none}
/* 「联系电话」的区号框：宽度 150 → 170，右侧要留 32px 给箭头，
   不然「美国/加拿大 +1」这种长选项会被截成省略号。 */
body[data-tpl-id="tech-b"] .phone-group{--ccw:170px;position:relative}
body[data-tpl-id="tech-b"] .phone-group select{flex:0 0 var(--ccw);width:var(--ccw);padding:0 32px 0 14px}
body[data-tpl-id="tech-b"] .phone-group::after{
  content:"";position:absolute;left:calc(var(--ccw) - 23px);top:calc(50% - 6px);width:7px;height:7px;
  border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
  transform:rotate(45deg);pointer-events:none}
/* 英文国家名比中文长一截（United States / Canada +1 实测 174px），
   170px 的框里会显示成「Mainland China ...」，英文环境放宽到 232px，
   字号仍与输入框同为 15px，不靠缩字号来硬塞。 */
html[lang="en-US"] body[data-tpl-id="tech-b"] .phone-group{--ccw:232px}
@media (max-width:560px){
  /* 窄屏表单整行只剩 ~300px，170px 的区号框会把号码框压得太窄 */
  body[data-tpl-id="tech-b"] .phone-group,
  html[lang="en-US"] body[data-tpl-id="tech-b"] .phone-group{--ccw:152px}
  body[data-tpl-id="tech-b"] .phone-group select{font-size:14px}
}

/* --- 首页精选：一行四张（用户 2026-10-28） ---
   本模版把产品**列表**做成「编号 + 左图右文」的行式排版；首页网格复用的是同一批卡片，
   直接塞进 4 列会挤成一条细缝。所以只对 .prod-grid--home 把卡片还原成纵向紧凑卡
   （图在上、文在下），产品中心列表页保持行式不变。 */
body[data-tpl-id="tech-b"] .prod-grid--home{grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;border-bottom:0;counter-reset:none}
body[data-tpl-id="tech-b"] .prod-grid--home .prod-card{display:flex;flex-direction:column;
  /* padding 必须整个归零：基础行式卡片带 padding:26px 0 28px 68px，
     这里原来只归零 padding-left，顶部 26px 残留在竖排卡上，
     表现为图片上方一条空白（2026-11-01 用户指出）。 */
  padding:0;border:1px solid var(--line);border-radius:var(--hb-r);background:var(--card-bg);
  overflow:hidden;counter-increment:none}
body[data-tpl-id="tech-b"] .prod-grid--home .prod-card::before{content:none}
body[data-tpl-id="tech-b"] .prod-grid--home .prod-card:hover{transform:translateY(-6px);
  box-shadow:var(--shadow);background:var(--card-bg);border-color:var(--line-hover)}
body[data-tpl-id="tech-b"] .prod-grid--home .prod-body{display:flex;flex-direction:column;
  padding:18px 20px 22px;gap:0}
body[data-tpl-id="tech-b"] .prod-grid--home .prod-body h3{font-size:16.5px;margin-bottom:8px}
body[data-tpl-id="tech-b"] .prod-grid--home .prod-body p{font-size:13.6px;margin-bottom:0;max-width:none}
@media (max-width:900px){
  body[data-tpl-id="tech-b"] .prod-grid--home{grid-template-columns:1fr 1fr}
}

/* ===== 导航字体（2026-11-03 用户：参考华为云官网导航） =====
   华为那排导航是 16px / 500 / 深墨色、项距宽松。基准样式已是 15px/500，
   这里只提到 16px 并把颜色压深一档；激活与悬停仍是品牌色 + 下划线动效，
   那是本站自己的语言，不跟着换。1180 以下的窄档压缩规则在 style.css，
   特异性更高，窄屏自动回到 13px，不会把顶栏挤爆。 */
body[data-tpl-id="tech-b"] .nav-links{gap:30px}
body[data-tpl-id="tech-b"] .nav-links a{font-size:16px;font-weight:500;color:var(--ink)}
body[data-tpl-id="tech-b"] .nav-links a.active{font-weight:600}

/* ===== 页脚 CTA 白卡（2026-11-03 用户：这块和顶部区分一下色块） =====
   页脚整块深底与首屏 hero 是同一套深色，页脚顶上的「把场景说清楚」
   转化区也泡在深色里——从上滚到下是「深 → 白 → 深」，收尾一屏全是
   一种颜色，转化块没有任何强调。把它单独拎成白色圆角大卡：
   首尾深色呼应不变，CTA 自己跳出来；文字全部换回正文色系。 */
footer.f2 .f2-top{background:var(--card-bg);color:var(--ink-2);
  border-radius:18px;padding:36px 40px 34px;margin:36px 0 40px;
  border-bottom:0;box-shadow:0 1px 2px rgba(15,23,42,.05)}
footer.f2 .f2-kicker{color:var(--brand)}
footer.f2 .f2-cta h2{color:var(--ink);letter-spacing:-.01em}
footer.f2 .f2-cta p{color:var(--muted)}
footer.f2 .f2-points li{color:var(--ink-2)}
footer.f2 .f2-points li::before{border-radius:999px}
footer.f2 .f2-tel{color:var(--muted)}
footer.f2 .f2-tel a{color:var(--ink);border-bottom-color:var(--line-strong)}
footer.f2 .f2-tel a:hover{color:var(--brand);border-bottom-color:var(--brand)}
footer.f2 .f2-note{color:var(--faint)}
footer.f2 .f2-note b{color:var(--ink-2)}

/* ===== 能力条线条减淡（2026-11-03 用户：线条太粗/太深） =====
   1px 已是最细，能调的只有颜色：上下线与竖分隔一起压到墨色 7% 透明度，
   比配色里的 --line(#E6E8EC) 再轻一档；墨色低透明在所有浅底配色下都自然。 */
body[data-tpl-id="tech-b"] .bar{border-top-color:rgba(21,24,31,.07);
  border-bottom-color:rgba(21,24,31,.07)}
body[data-tpl-id="tech-b"] .bar-item{border-right-color:rgba(21,24,31,.07)}