/* ============================================================================
   中达轴承 · 技术支持栏目（/pages/36-41.html）· 2026-10-10
   2026-10-14：融合页（36）改为 Fersa Care 式四区块版式（全屏图 hero / 服务列表 /
   手风琴 / 带产品图 CTA），旧融合页组件（数据条 / 五步流程 / 深色直达卡 / FAQ
   网格）已删；子页 37~41 用的组件全部保留，不受影响。旧文件见
   tech.css.bak_safe_20261014_fersa。
   ----------------------------------------------------------------------------
   设计基线：沿用本站已重构页面的设计语言（关于我们 / 品牌家族 / 绿色制造）
     · 奶油底 #F6F5F2 首屏 + 右上 Z&R 描边水印 + 鼠标跟随柔光
     · Arial 大字距 kicker（TECHNICAL SUPPORT）+ 主题色
     · 章节用「01/02/03」红色编号 + 中文大标题 + 英文小标题
     · 版心 1600px，与 green.css / brand_family.css 保持一致
   ----------------------------------------------------------------------------
   适配要点（改之前必读，照抄 green.css 的做法，否则页面会被站点样式压死）：
     1) 站点 common.css 有全局 `*{font-size:.15rem;line-height:1.05}`
        —— 这里用 `.zr-tech *{font-size:inherit;line-height:inherit}` 中和。
     2) 站点 common.css 有全局 `a{display:block}` —— 这里还原 inline。
     3) 站点 body 有 `padding-top:1.75rem`（给fixed 头部留位）
        —— hero 用 `margin-top:-1.75rem` 顶到视口最顶端。
     4) html{font-size:100px} → 站点 1rem = 100px。本文件内一律用 px，
        避免和站点 rem 体系互相干扰（只在需要撑满头部时用 rem）。
     5) 顶部的 `.common-banner`（栏目大图）与 `.common-nav-wrap`（二级导航）
        由 pages.blade.php 统一输出，属于全站共用组件，本文件只做外观微调，
        **不要**改它们的结构，避免影响其它走同一模板的页面。
     6) 表格页（37 代号释义 / 39 型号转换）加了 `overflow-x:auto` 容器，
        手机端可横向滑动，不再撑破版心。
   ⚠️ .zr-tech 上不要加 transform / filter / will-change。
   ⚠️ 改本文件请同步升 pages.blade.php 里 tech.css 的 ?v= 版本串。
   ========================================================================== */

.zr-tech {
  /* —— 主题色：2026-10-11 已统一为品牌红（与品牌家族/服务领域/绿色制造一致）。
         原「技术蓝灰」变量名 --steel* 保留，值已映射到品牌红系（见下），
         避免改动 60+ 处引用；后续要调主题只改这一块 —— */
  --red: #C81526;
  --red-dark: #BD1D27;
  --steel: #C81526;
  --steel-2: #BD1D27;
  --steel-soft: #FBECED;
  --steel-soft-2: #FDF5F6;
  --cream: #F6F5F2;
  --ink: #14171A;
  --body: #4A5158;
  --muted: #8B9099;
  --line: #E6E4DF;
  --bg: #FFFFFF;
  --shadow: 0 20px 56px -24px rgba(20, 40, 66, .28);
  --shadow-sm: 0 8px 24px -14px rgba(20, 40, 66, .26);
  --radius: 18px;
  --radius-sm: 10px;
  --w: 1600px;

  --font: 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
  --mono: 'SF Mono', 'Roboto Mono', Consolas, 'Courier New', monospace;

  font-family: var(--font);
  color: var(--body);
  background: var(--bg);
  line-height: 1.75;
  font-size: 16px;
}

/* —— 中和站点全局样式 —— */
.zr-tech * { margin: 0; padding: 0; box-sizing: border-box; font-size: inherit; line-height: inherit; -webkit-tap-highlight-color: transparent; }
.zr-tech img { display: block; max-width: 100%; height: auto; transition: none; }
.zr-tech a { display: inline; text-decoration: none; color: inherit; background-color: transparent; }
.zr-tech ul, .zr-tech ol { list-style: none; }
.zr-tech p { font-style: normal; }
.zr-tech table { border-collapse: collapse; border-spacing: 0; width: 100%; table-layout: fixed; }
.zr-tech strong, .zr-tech b { font-weight: 700; }
.zr-tech ::selection { background: rgba(200, 21, 38, .16); }

/* 版心 */
.zr-tech .tk-wrap { width: 100%; max-width: var(--w); margin: 0 auto; padding: 0 28px; }

/* kicker：Arial 大字距小标签，全栏目统一 */
.zr-tech .tk-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: .34em; font-size: 13px; font-weight: 700;
  color: var(--steel); text-transform: uppercase;
}
.zr-tech .tk-kicker::before { content: ''; width: 40px; height: 1px; background: var(--steel); flex: none; }
.zr-tech .tk-kicker--light { color: #fff; }
.zr-tech .tk-kicker--light::before { background: rgba(255, 255, 255, .6); }
.zr-tech .tk-kicker--red { color: var(--red); }
.zr-tech .tk-kicker--red::before { background: var(--red); }

/* ---------- HERO：奶油底编辑式首屏 + 右上 Z&R 描边水印 + 跟随柔光 ---------- */
.zr-tech .tk-hero {
  position: relative; overflow: hidden;
  background: var(--cream);
  color: var(--ink);
}
/* ⚠️ 2026-10-11 修：负 margin-top 只对「hero 是 .zr-tech 第一个子元素」生效（36 融合页需要，
   顶掉 body 给固定头部预留的 padding-top 做满幅首屏）。
   子页 37~41 的 hero 前面有 .tk-banner / .tk-subnav —— 若 hero 也负 margin，
   会整体上移 1.75rem、盖住 banner 下半部分（与服务领域页 .sv-subbar 被 hero 压住
   是同一个坑，那边用 :first-child/:not(:first-child) 区分修过，这里同样处理）。 */
.zr-tech > .tk-hero:first-child { margin-top: -1.75rem; }
.zr-tech .tk-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(620px circle at 24% 46%, rgba(200, 21, 38, .10), transparent 70%);
}
.zr-tech .tk-wm {
  position: absolute; right: 0; top: calc(1.75rem + 6vh); z-index: 0;
  font-family: var(--font);
  font-size: 27vw; font-weight: 800; line-height: .76; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.4px #E2E1DB;
  pointer-events: none; user-select: none; white-space: nowrap;
}
.zr-tech .tk-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .6s;
  background: radial-gradient(440px circle at var(--tk-mx, 70%) var(--tk-my, 30%), rgba(200, 21, 38, .16), transparent 70%);
}
.zr-tech .tk-hero:hover .tk-glow { opacity: 1; }

.zr-tech .tk-hero-inner {
  position: relative; z-index: 2;
  padding: calc(1.9rem + 118px) 28px 96px;
}
.zr-tech .tk-hero h1 {
  font-size: clamp(46px, 6.4vw, 92px); font-weight: 800;
  line-height: 1.06; letter-spacing: .02em; color: var(--ink);
  margin: 24px 0 10px;
}
.zr-tech .tk-hero-desc {
  max-width: 620px; font-size: 16.5px; line-height: 1.95; color: #7C828B;
}
.zr-tech .tk-hero-en {
  font-family: Arial, sans-serif; font-size: 13px;
  font-weight: 700; letter-spacing: .26em; color: #A9AEB5;
  text-transform: uppercase; margin-top: 20px;
  padding-top: 18px; border-top: 1px solid var(--line);
  max-width: 620px;
}
.zr-tech .tk-hero-actions { display: flex; gap: 16px; margin-top: 36px; flex-wrap: wrap; }

/* 按钮 */
.zr-tech .tk-btn {
  display: inline-flex; align-items: center; gap: 9px;
  height: 52px; padding: 0 30px; border-radius: 999px;
  font-size: 16px; font-weight: 600; cursor: pointer;
  transition: background .28s, color .28s, transform .28s, box-shadow .28s;
  border: 1px solid transparent;
}
.zr-tech .tk-btn-primary { background: var(--red); color: #fff; box-shadow: 0 14px 30px -12px rgba(200, 21, 38, .62); }
.zr-tech .tk-btn-primary:hover { background: #d81e30; transform: translateY(-2px); }
.zr-tech .tk-btn-primary:active { transform: translateY(0) scale(.985); }
.zr-tech .tk-btn-ghost { background: #fff; color: var(--ink); border-color: #E4E2DC; }
.zr-tech .tk-btn-ghost:hover { border-color: var(--steel); color: var(--steel); transform: translateY(-2px); }
.zr-tech .tk-btn:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; }
.zr-tech .tk-btn svg { width: 16px; height: 16px; flex: none; }

/* ---------- 顶部栏目大图与二级导航：只做外观微调，不动结构 ---------- */
.zr-tech .common-banner { height: 3.4rem; }
.zr-tech .common-banner img { object-position: center 42%; }
.zr-tech .common-nav-wrap { border-bottom-color: var(--line); }
.zr-tech .common-nav { color: #6C727A; transition: color .25s; }
.zr-tech .common-nav:hover { color: var(--steel); }
.zr-tech .common-nav.active { color: var(--red); }

/* ---------- 数据条：2026-10-14 随 Fersa 式改版移除（用户确认） ---------- */

/* ---------- 章节骨架 ---------- */
.zr-tech .tk-sec { padding: 108px 0; }
.zr-tech .tk-sec--soft { background: var(--steel-soft-2); }
.zr-tech .tk-sec--cream { background: var(--cream); }
.zr-tech .tk-sec-head { margin-bottom: 52px; }
.zr-tech .tk-sec-num {
  font-family: Arial, sans-serif; font-size: 13px; font-weight: 800;
  letter-spacing: .2em; color: var(--red);
}
.zr-tech .tk-sec-num::after {
  content: ''; display: inline-block; width: 34px; height: 1px;
  background: var(--red); vertical-align: middle; margin-left: 12px;
}
.zr-tech .tk-sec-title {
  font-size: clamp(30px, 3.4vw, 46px); font-weight: 800;
  line-height: 1.24; letter-spacing: .01em; color: var(--ink);
  margin: 16px 0 8px; text-wrap: balance;
}
.zr-tech .tk-sec-en {
  font-family: Arial, sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .3em; color: var(--muted); text-transform: uppercase;
}

/* 章节头两栏：左标题右说明，桌面端并排 */
.zr-tech .tk-sec-head--split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
  gap: 40px 80px; align-items: end;
}
.zr-tech .tk-sec-lead { font-size: 16px; line-height: 1.95; color: #6C727A; }

/* ---------- 代号释义：主体代号卡片网格 ---------- */
.zr-tech .tk-code-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.zr-tech .tk-code-card {
  background: #fff; border-radius: 14px; padding: 24px 24px 22px;
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: transform .28s, box-shadow .28s, border-color .28s;
}
.zr-tech .tk-code-card:hover {
  transform: translateY(-3px); border-color: #C9D3DE;
  box-shadow: var(--shadow-sm);
}
.zr-tech .tk-code-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.zr-tech .tk-code-card-h .tk-code { font-size: 26px; letter-spacing: .01em; }
.zr-tech .tk-code-card-d {
  margin-top: 10px; font-size: 14.5px; line-height: 1.75; color: #6C727A;
  flex: 1;
}
.zr-tech .tk-code-card-ex {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: #8B9099;
  word-break: break-all;
}
.zr-tech .tk-code-card-x { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 5px; }
.zr-tech .tk-code-card .tk-tag { margin: 0; }
.zr-tech .tk-code-card-none { font-size: 12.5px; color: #C8CCD1; }

@media (max-width: 1400px) { .zr-tech .tk-code-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .zr-tech .tk-code-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .zr-tech .tk-code-grid { grid-template-columns: 1fr; } }

/* ---------- 通用卡片 ---------- */
.zr-tech .tk-card {
  background: #fff; border-radius: var(--radius);
  padding: 30px 32px; box-shadow: var(--shadow-sm);
  transition: transform .3s, box-shadow .3s;
}
.zr-tech .tk-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.zr-tech .tk-card-title { font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.zr-tech .tk-card-en {
  font-family: Arial, sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: .26em; color: var(--steel); text-transform: uppercase; margin-top: 6px;
}
.zr-tech .tk-card p { margin-top: 12px; font-size: 15px; line-height: 1.85; color: #6C727A; }

/* ---------- 代号释义：解析器 ---------- */
.zr-tech .tk-parser {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 40px 44px; position: relative; overflow: hidden;
}
.zr-tech .tk-parser::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px circle at 88% 0%, rgba(200, 21, 38, .07), transparent 62%);
}
.zr-tech .tk-parser > * { position: relative; z-index: 1; }
.zr-tech .tk-parser-label {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font-size: 20px; font-weight: 700; color: var(--ink);
}
.zr-tech .tk-parser-label span {
  font-family: Arial, sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .26em; color: var(--steel); text-transform: uppercase;
}
.zr-tech .tk-parser-hint { margin-top: 8px; font-size: 14.5px; color: var(--muted); }
.zr-tech .tk-parser-field {
  display: flex; align-items: center; gap: 14px; margin-top: 22px;
  border: 1px solid var(--line); border-radius: 12px; padding: 0 8px 0 20px;
  background: var(--steel-soft-2); transition: border-color .25s, box-shadow .25s;
}
.zr-tech .tk-parser-field:focus-within { border-color: var(--steel); box-shadow: 0 0 0 4px rgba(200, 21, 38, .10); }
.zr-tech .tk-parser-field svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.zr-tech .tk-parser-input {
  flex: 1; height: 60px; border: 0; background: transparent;
  font-family: var(--mono); font-size: 17px; color: var(--ink);
  letter-spacing: .04em; outline: none;
}
.zr-tech .tk-parser-input::placeholder { color: #B6BBC2; letter-spacing: .02em; }
.zr-tech .tk-parser-btn {
  height: 44px; padding: 0 24px; border: 0; border-radius: 9px;
  background: var(--steel); color: #fff; font-family: var(--font);
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .25s, transform .2s;
}
.zr-tech .tk-parser-btn:hover { background: var(--steel-2); }
.zr-tech .tk-parser-btn:active { transform: scale(.98); }

.zr-tech .tk-parser-samples {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px;
}
.zr-tech .tk-parser-samples-label { font-size: 13px; color: var(--muted); margin-right: 4px; align-self: center; }
.zr-tech .tk-chip {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  font-family: var(--mono); font-size: 13px; color: #5C636B;
  transition: all .22s;
}
.zr-tech .tk-chip:hover { border-color: var(--steel); color: var(--steel); background: var(--steel-soft); }

.zr-tech .tk-parser-out { margin-top: 26px; }
.zr-tech .tk-parser-empty {
  border: 1px dashed var(--line); border-radius: 12px;
  padding: 26px; text-align: center; font-size: 14.5px; color: var(--muted);
  background: var(--steel-soft-2);
}
.zr-tech .tk-tokens { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.zr-tech .tk-token {
  display: inline-flex; align-items: baseline; gap: 9px;
  padding: 9px 16px 9px 13px; border-radius: 10px;
  background: var(--steel-soft); border-left: 3px solid var(--steel);
  transition: transform .2s, background .2s;
}
.zr-tech .tk-token:hover { transform: translateY(-2px); background: #E5EDF5; }
.zr-tech .tk-token-key {
  font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--steel);
  white-space: nowrap;
}
.zr-tech .tk-token-val { font-size: 13.5px; color: #5C636B; }

/* 规格段：中性灰蓝底，和代号区分开 */
.zr-tech .tk-token-spec { background: #F1F4F7; border-left-color: #9AA6B4; }
.zr-tech .tk-token-spec .tk-token-key { color: #5A6675; }
.zr-tech .tk-token-spec .tk-token-val { color: #79828E; }

/* 未收录 / 尺寸后缀：灰调，明确"这本表没有" */
.zr-tech .tk-token-unknown { border-left-color: #C2C7CD; background: #F6F7F8; }
.zr-tech .tk-token-unknown .tk-token-key { color: #8B9099; text-decoration: underline dotted #C2C7CD; text-underline-offset: 3px; }
.zr-tech .tk-token-unknown .tk-token-val { color: #A0A6AD; }
.zr-tech .tk-token:hover.tk-token-unknown { background: #F0F1F3; }

.zr-tech .tk-token-sep { align-self: center; color: #C8CCD1; font-weight: 700; }

/* ---------- 表格：代号释义 / 型号转换 ---------- */
.zr-tech .tk-table-tools {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-bottom: 22px;
}
.zr-tech .tk-search {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 260px;
  max-width: 420px; height: 48px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  transition: border-color .25s, box-shadow .25s;
}
.zr-tech .tk-search:focus-within { border-color: var(--steel); box-shadow: 0 0 0 4px rgba(200, 21, 38, .09); }
.zr-tech .tk-search svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.zr-tech .tk-search input {
  flex: 1; border: 0; outline: none; background: transparent;
  font-family: var(--font); font-size: 15px; color: var(--ink);
}
.zr-tech .tk-search input::placeholder { color: #B6BBC2; }
.zr-tech .tk-table-count { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.zr-tech .tk-table-count b { color: var(--steel); font-weight: 700; }

.zr-tech .tk-table-wrap {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: #fff; box-shadow: var(--shadow-sm);
}
.zr-tech .tk-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.zr-tech .tk-table { min-width: 900px; }
.zr-tech .tk-table thead th {
  background: var(--ink); color: #fff; font-weight: 600;
  font-size: 14.5px; letter-spacing: .06em; text-align: left;
  padding: 18px 20px; white-space: nowrap;
}
.zr-tech .tk-table thead th:first-child { padding-left: 26px; }
.zr-tech .tk-table tbody td {
  padding: 17px 20px; font-size: 14.5px; line-height: 1.7;
  border-bottom: 1px solid var(--line); vertical-align: top; color: #545B63;
}
.zr-tech .tk-table tbody td:first-child { padding-left: 26px; }
.zr-tech .tk-table tbody tr:nth-child(even) { background: #FAFBFC; }
.zr-tech .tk-table tbody tr:hover { background: var(--steel-soft); }
.zr-tech .tk-table tbody tr:last-child td { border-bottom: 0; }
.zr-tech .tk-table tbody tr.is-hidden,
.zr-tech .tk-richtext table tbody tr.is-hidden { display: none; }
/* 代号释义表头吸顶（top 由 tech.js 按固定头部高度动态写入） */
.zr-tech .tk-richtext table .tk-sticky-th { position: sticky; z-index: 6; }

/* 首列代号：等宽字形 + 红色，像"零件号" */
.zr-tech .tk-code {
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  color: var(--red); letter-spacing: .02em; white-space: nowrap;
}
.zr-tech .tk-mono { font-family: var(--mono); font-size: 13.5px; color: #6C727A; line-height: 1.65; }
.zr-tech .tk-idx { font-family: Arial, sans-serif; font-size: 13px; color: #B6BBC2; font-variant-numeric: tabular-nums; }
.zr-tech .tk-tag {
  display: inline-block; padding: 2px 9px; border-radius: 5px;
  background: var(--steel-soft); color: var(--steel);
  font-size: 12.5px; margin: 0 4px 4px 0; white-space: nowrap;
}

/* 表格里的小节标题行 */
.zr-tech .tk-table tbody tr.tk-group td {
  background: var(--cream); font-weight: 700; color: var(--ink);
  font-size: 14px; letter-spacing: .04em; padding-top: 14px; padding-bottom: 14px;
}
.zr-tech .tk-table tbody tr.tk-group:hover td { background: var(--cream); }
.zr-tech .tk-table tbody tr.tk-group.is-hidden { display: none; }

.zr-tech .tk-empty {
  padding: 60px 20px; text-align: center; color: var(--muted); font-size: 15px;
}

/* 表格脚提示 */
.zr-tech .tk-table-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 18px; font-size: 13.5px; color: var(--muted); line-height: 1.7;
}
.zr-tech .tk-table-note svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--steel); }

/* ---------- 型号转换页 ---------- */
.zr-tech .tk-brand-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.zr-tech .tk-brand-cell {
  background: #fff; padding: 14px 10px; text-align: center;
  font-family: Arial, sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .1em; color: var(--ink);
}
.zr-tech .tk-brand-cell small { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 400; letter-spacing: .04em; color: var(--muted); }

/* ---------- 目录下载页 ---------- */
.zr-tech .tk-dl-list { border-top: 1px solid var(--line); }
.zr-tech .tk-dl {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 30px; align-items: center;
  padding: 30px 8px; border-bottom: 1px solid var(--line);
  transition: background .28s, padding-left .28s;
}
.zr-tech .tk-dl:hover { background: var(--steel-soft-2); padding-left: 20px; }
.zr-tech .tk-dl-ico {
  width: 76px; height: 88px; border-radius: 8px;
  background: linear-gradient(160deg, #FCFDFE, #EDF2F7);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  transition: border-color .28s, background .28s;
}
.zr-tech .tk-dl:hover .tk-dl-ico { border-color: var(--steel); background: #fff; }
.zr-tech .tk-dl-ico svg { width: 26px; height: 26px; color: var(--steel); }
.zr-tech .tk-dl-ext {
  font-family: Arial, sans-serif; font-size: 10.5px; font-weight: 800;
  letter-spacing: .14em; color: var(--muted); text-transform: uppercase;
}
.zr-tech .tk-dl-title { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.zr-tech .tk-dl-meta {
  display: flex; gap: 22px; flex-wrap: wrap; margin-top: 9px;
  font-size: 13.5px; color: var(--muted);
}
.zr-tech .tk-dl-meta span { display: inline-flex; align-items: center; gap: 6px; }
.zr-tech .tk-dl-meta svg { width: 14px; height: 14px; opacity: .7; }
.zr-tech .tk-dl-bt {
  display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 26px;
  border-radius: 999px; border: 1px solid var(--line); color: var(--ink);
  font-size: 15px; font-weight: 600; white-space: nowrap;
  transition: all .28s;
}
.zr-tech .tk-dl:hover .tk-dl-bt { background: var(--steel); border-color: var(--steel); color: #fff; }
.zr-tech .tk-dl-bt svg { width: 15px; height: 15px; }

/* ---------- 安装指导页 ---------- */
/* 左侧固定目录 + 右侧内容，桌面端两栏 */
.zr-tech .tk-guide {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: 0 64px; align-items: start;
}
.zr-tech .tk-guide-nav {
  position: sticky; top: 130px;
  border-left: 2px solid var(--line);
  padding-left: 22px;
}
.zr-tech .tk-guide-nav-label {
  font-family: Arial, sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: .26em; color: var(--muted); text-transform: uppercase;
  margin-bottom: 18px;
}
.zr-tech .tk-guide-nav a {
  display: block; padding: 9px 0; font-size: 15px; color: #6C727A;
  transition: color .25s, transform .25s; border-left: 2px solid transparent;
  margin-left: -24px; padding-left: 22px;
}
.zr-tech .tk-guide-nav a:hover { color: var(--steel); }
.zr-tech .tk-guide-nav a.is-active { color: var(--steel); font-weight: 700; border-left-color: var(--steel); }

.zr-tech .tk-guide-block { padding-bottom: 64px; margin-bottom: 64px; border-bottom: 1px solid var(--line); }
.zr-tech .tk-guide-block:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.zr-tech .tk-guide-h {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 10px;
}
.zr-tech .tk-guide-h h3 { font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: .01em; }
/* 英文副名：占满一行再排，避免和中文标题挤在一起导致英文被拆字 */
.zr-tech .tk-guide-h span {
  flex: 0 0 100%;
  font-family: Arial, sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .24em; color: var(--steel); text-transform: uppercase;
  white-space: nowrap; overflow-wrap: normal; word-break: keep-all;
}
@media (min-width: 900px) {
  .zr-tech .tk-guide-h span { flex: 0 0 auto; order: -1; }
}
.zr-tech .tk-guide-note {
  display: flex; gap: 14px; align-items: flex-start;
  background: #FDF6F0; border-left: 3px solid var(--red);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 18px 22px; margin: 20px 0 30px;
  font-size: 14.5px; line-height: 1.85; color: #6B4A3C;
}
.zr-tech .tk-guide-note svg { width: 18px; height: 18px; color: var(--red); flex: none; margin-top: 3px; }

/* 步骤：大号数字 + 标题 + 正文 */
.zr-tech .tk-steps { counter-reset: tkstep; }
.zr-tech .tk-step {
  display: grid; grid-template-columns: 54px minmax(0, 1fr);
  gap: 0 24px; padding: 26px 0;
  border-top: 1px solid var(--line);
  transition: background .25s;
}
.zr-tech .tk-step:first-child { border-top: 0; }
.zr-tech .tk-step-n {
  font-family: Arial, sans-serif; font-size: 34px; font-weight: 800;
  color: var(--steel); opacity: .28; line-height: 1; font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.zr-tech .tk-step-t { font-size: 18px; font-weight: 700; color: var(--ink); }
.zr-tech .tk-step-d { margin-top: 9px; font-size: 15px; line-height: 1.9; color: #6C727A; max-width: 74ch; }
.zr-tech .tk-step-d em { font-style: normal; color: var(--ink); font-weight: 600; }

/* ---------- 通用：要点条（产品优势 / 能力） ---------- */
.zr-tech .tk-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.zr-tech .tk-point { background: #fff; padding: 30px 32px; display: flex; gap: 20px; align-items: flex-start; transition: background .28s; }
.zr-tech .tk-point:hover { background: var(--steel-soft-2); }
.zr-tech .tk-point-ico {
  width: 44px; height: 44px; border-radius: 11px; flex: none;
  background: var(--steel-soft); color: var(--steel);
  display: flex; align-items: center; justify-content: center;
}
.zr-tech .tk-point-ico svg { width: 21px; height: 21px; }
.zr-tech .tk-point-t { font-size: 17px; font-weight: 700; color: var(--ink); }
.zr-tech .tk-point-en {
  font-family: Arial, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .24em; color: var(--steel); text-transform: uppercase; margin-top: 5px;
}
.zr-tech .tk-point-d { margin-top: 9px; font-size: 14.5px; line-height: 1.85; color: #6C727A; }

/* ---------- 通用：图文错位块 ---------- */
.zr-tech .tk-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 72px; align-items: center;
}
.zr-tech .tk-split--reverse .tk-split-media { order: -1; }
.zr-tech .tk-split-media {
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); background: var(--steel-soft-2);
}
.zr-tech .tk-split-media img { width: 100%; height: 100%; object-fit: cover; }
.zr-tech .tk-split-body h3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; color: var(--ink); line-height: 1.3; }
.zr-tech .tk-split-body .tk-sec-en { display: block; margin-top: 10px; }
.zr-tech .tk-split-body p { margin-top: 20px; font-size: 16px; line-height: 1.95; color: #6C727A; max-width: 58ch; }

/* ---------- 通用：底部 CTA ---------- */
.zr-tech .tk-cta {
  background: var(--ink); color: #fff; position: relative; overflow: hidden;
  padding: 92px 0;
}
.zr-tech .tk-cta::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px circle at 82% 24%, rgba(200, 21, 38, .40), transparent 66%);
}
.zr-tech .tk-cta-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px; align-items: center;
}
.zr-tech .tk-cta h2 { font-size: clamp(28px, 3.2vw, 44px); font-weight: 800; color: #fff; line-height: 1.24; letter-spacing: .01em; }
.zr-tech .tk-cta p { margin-top: 16px; font-size: 16px; color: #9AA3AD; max-width: 60ch; line-height: 1.85; }
.zr-tech .tk-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.zr-tech .tk-cta .tk-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .28); }
.zr-tech .tk-cta .tk-btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ---------- 滚动进场（配合本页JS 的 .tk-inview） ----------
   兜底：html.tk-no-js 时直接全部显示，避免 JS 加载失败导致整段内容永久不可见。
   JS 会在 <html> 上移除 tk-no-js，所以只有脚本真的挂了才会走这条。 */
.tk-no-js .zr-tech [data-tk-anim] { opacity: 1; transform: none; transition: none; }
.zr-tech [data-tk-anim] { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1); }
.zr-tech [data-tk-anim].tk-inview { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .zr-tech [data-tk-anim] { opacity: 1; transform: none; transition: none; }
  .zr-tech .tk-glow { display: none; }
}

/* ---------- 移动端底部胶囊锚点（避免死链，滚动定位用） ---------- */
.zr-tech .tk-toplink {
  position: fixed; right: 28px; bottom: 34px; z-index: 60;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s, transform .3s, visibility .3s, background .25s;
}
.zr-tech .tk-toplink.is-show { opacity: 1; visibility: visible; transform: none; }
.zr-tech .tk-toplink:hover { background: var(--red); }
.zr-tech .tk-toplink svg { width: 18px; height: 18px; }

/* ============================================================================
   栏目融合页（/pages/36.html）专用组件 · 2026-10-14 Fersa Care 式改版
   ----------------------------------------------------------------------------
   四大区块（对标 fersa.com/zh/fersa-care，配色保持品牌红体系）：
     ① .tk-fhero   全屏实景图 hero（压暗蒙版 + 白字 + Scroll 圆钮）
     ② .tk-svc     白底服务列表（左大标题 + 右五项入口）
     ③ .tk-faqsec  奶油底图文 + 手风琴（.tk-acc）
     ④ .tk-cta--hub  深墨 CTA（左文右暗化产品图，基础 .tk-cta 与子页共用）
   ========================================================================== */

/* ---------- ① 全屏实景图 hero ---------- */

.zr-tech .tk-fhero {
  position: relative; overflow: hidden;
  min-height: 92vh; min-height: 92svh;
  display: flex; align-items: center;
  background: #101215; color: #fff;
  margin-top: -1.75rem;   /* 顶掉 body 给固定头部预留的 padding-top（与 zg-hero 同款手法） */
}
.zr-tech .tk-fhero-bg { position: absolute; inset: 0; }
.zr-tech .tk-fhero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 58%;
}
/* 压暗蒙版：左深右浅，保证左侧白字可读（Fersa 同款处理） */
.zr-tech .tk-fhero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(13,15,18,.82) 0%, rgba(13,15,18,.55) 42%, rgba(13,15,18,.30) 100%);
}
.zr-tech .tk-fhero-inner {
  position: relative; z-index: 2;
  padding: calc(1.9rem + 72px) 28px 120px;
}
.zr-tech .tk-fhero-kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: .34em; font-size: 13px; font-weight: 700;
  color: #fff; text-transform: uppercase;
}
.zr-tech .tk-fhero-kicker::before { content: ''; width: 44px; height: 2px; background: var(--red); flex: none; }
.zr-tech .tk-fhero h1 {
  margin-top: 26px; color: #fff;
  font-size: clamp(38px, 4.8vw, 64px); font-weight: 400;   /* 细体大字，Fersa 式 */
  line-height: 1.22; letter-spacing: .015em;
  /* 断行规则见下方 .tk-h1-l：由 HTML 逐行控制，此处不再设 max-width / text-wrap，
     否则容器装不下整行会二次折行，把「不只是」拆成「不只 / 是」（2026-10-18 修）。 */
}
/* 每个 .tk-h1-l 为一行：块级 + 不换行，保证语义断句不被浏览器打散 */
.zr-tech .tk-fhero h1 .tk-h1-l { display: block; white-space: nowrap; }
.zr-tech .tk-fhero h1 em { font-style: normal; color: #E4687A; }
.zr-tech .tk-fhero-desc {
  margin-top: 26px; max-width: 560px; font-size: 16.5px; line-height: 1.95;
  color: rgba(255, 255, 255, .82);
}
/* Scroll 圆钮：底部居中，上下浮动 */
.zr-tech .tk-fhero-scroll {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 3;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  animation: tk-bob 2.6s ease-in-out infinite;
  transition: background .28s, color .28s;
}
.zr-tech .tk-fhero-scroll svg { width: 14px; height: 14px; }
.zr-tech .tk-fhero-scroll i {
  font-style: normal; font-family: Arial, sans-serif; font-size: 9px;
  letter-spacing: .22em; text-transform: uppercase;
}
.zr-tech .tk-fhero-scroll:hover { background: var(--red); color: #fff; }
@keyframes tk-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) { .zr-tech .tk-fhero-scroll { animation: none; } }

/* ---------- ② 服务列表：白底 · 左大标题 · 右五项入口 ---------- */
.zr-tech .tk-svc { background: #fff; padding: 118px 0 126px; }
.zr-tech .tk-svc-grid {
  display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: 40px 96px; align-items: start;
}
.zr-tech .tk-svc-kicker {
  font-family: Arial, sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .3em; color: var(--red); text-transform: uppercase;
}
.zr-tech .tk-svc h2 {
  margin-top: 18px; font-size: clamp(30px, 3.2vw, 44px); font-weight: 700;
  color: var(--ink); line-height: 1.3; text-wrap: balance;
}
.zr-tech .tk-svc-lead { margin-top: 20px; font-size: 16px; line-height: 1.95; color: #6C727A; }
.zr-tech .tk-svc-note {
  margin-top: 26px; display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; color: var(--muted); line-height: 1.7;
}
.zr-tech .tk-svc-note svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--red); }

.zr-tech .tk-svc-list { border-top: 1px solid var(--line); }
.zr-tech .tk-svc-item {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 24px;
  align-items: center; padding: 26px 10px; border-bottom: 1px solid var(--line);
  transition: background .28s, padding-left .28s;
}
.zr-tech .tk-svc-item:hover { background: #FCFBFA; padding-left: 22px; }
.zr-tech .tk-svc-ico {
  width: 64px; height: 64px; border-radius: 16px; background: var(--steel-soft);
  display: flex; align-items: center; justify-content: center; color: var(--red);
  transition: background .28s, color .28s, border-radius .28s;
}
.zr-tech .tk-svc-item:hover .tk-svc-ico { background: var(--red); color: #fff; border-radius: 20px; }
.zr-tech .tk-svc-ico svg { width: 27px; height: 27px; }
.zr-tech .tk-svc-txt { display: flex; flex-direction: column; min-width: 0; }
.zr-tech .tk-svc-t {
  display: block; font-size: 20px; font-weight: 700; color: var(--ink);
  letter-spacing: .01em; transition: color .25s;
}
.zr-tech .tk-svc-item:hover .tk-svc-t { color: var(--red); }
.zr-tech .tk-svc-en {
  display: block; margin-top: 4px; font-family: Arial, sans-serif;
  font-size: 11.5px; font-weight: 700; letter-spacing: .22em;
  color: var(--muted); text-transform: uppercase;
}
.zr-tech .tk-svc-go {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); color: #9AA0A6; transition: all .28s;
}
.zr-tech .tk-svc-go svg { width: 15px; height: 15px; }
.zr-tech .tk-svc-item:hover .tk-svc-go {
  background: var(--ink); border-color: var(--ink); color: #fff; transform: translateX(4px);
}
/* 子页为空提示（后台 37~41 未发布时显示，避免整页 500 或空白） */
.zr-tech .tk-svc-empty {
  padding: 34px 28px; border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--steel-soft-2);
}
.zr-tech .tk-svc-empty b { font-size: 18px; color: var(--ink); }
.zr-tech .tk-svc-empty b span {
  margin-left: 10px; font-family: Arial, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .22em; color: var(--red); text-transform: uppercase;
}
.zr-tech .tk-svc-empty p { margin-top: 12px; font-size: 14px; line-height: 1.9; color: #6C727A; }

/* ---------- ③ 常见问题：奶油底 · 左图文 · 右手风琴 ---------- */
.zr-tech .tk-faqsec { background: var(--cream); padding: 118px 0 126px; }
.zr-tech .tk-faq-grid {
  display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 40px 96px; align-items: start;
}
.zr-tech .tk-faq-kicker {
  font-family: Arial, sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .3em; color: var(--red); text-transform: uppercase;
}
.zr-tech .tk-faqsec h2 {
  margin-top: 18px; font-size: clamp(30px, 3.2vw, 44px); font-weight: 700;
  color: var(--ink); line-height: 1.3; text-wrap: balance;
}
.zr-tech .tk-faq-lead { margin-top: 20px; font-size: 16px; line-height: 1.95; color: #6C727A; }
.zr-tech .tk-faq-media {
  margin-top: 36px; border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 56px -28px rgba(20, 23, 26, .35); position: relative;
}
.zr-tech .tk-faq-media img { width: 100%; height: 300px; object-fit: cover; }
.zr-tech .tk-faq-media figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 22px 16px;
  background: linear-gradient(transparent, rgba(13, 15, 18, .72));
  color: rgba(255, 255, 255, .92); font-size: 13px; letter-spacing: .05em;
}

/* 手风琴卡：同时只展开一张（tech.js 控制），高度 JS 按 scrollHeight 精确设置 */
.zr-tech .tk-acc { display: flex; flex-direction: column; gap: 14px; }
/* 兜底：JS 失败（html 带 tk-no-js）时，HTML 里默认 .open 的第一张直接可见，
   不依赖 JS 写 max-height —— 与 [data-tk-anim] 的降级思路一致 */
.tk-no-js .zr-tech .tk-acc-item.open .tk-acc-body { max-height: none; }
.zr-tech .tk-acc-item {
  background: #fff; border-radius: 16px; padding: 24px 28px;
  box-shadow: 0 10px 30px -18px rgba(20, 23, 26, .18);
  transition: box-shadow .3s;
}
.zr-tech .tk-acc-item:hover { box-shadow: 0 18px 42px -20px rgba(20, 23, 26, .26); }
.zr-tech .tk-acc-item.open { box-shadow: 0 18px 42px -18px rgba(200, 21, 38, .22); }
.zr-tech .tk-acc-head {
  display: flex; align-items: center; gap: 18px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: inherit; line-height: inherit; color: inherit;
}
.zr-tech .tk-acc-head:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 8px; }
.zr-tech .tk-acc-ico {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.zr-tech .tk-acc-ico svg { width: 20px; height: 20px; }
.zr-tech .tk-acc-q { flex: 1; font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.zr-tech .tk-acc-btn {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  display: flex; align-items: center; justify-content: center; transition: all .3s;
}
.zr-tech .tk-acc-btn svg {
  width: 15px; height: 15px;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1.2);   /* 展开时 + 旋转成 × */
}
.zr-tech .tk-acc-item.open .tk-acc-btn { background: var(--red); border-color: var(--red); color: #fff; }
.zr-tech .tk-acc-item.open .tk-acc-btn svg { transform: rotate(45deg); }
.zr-tech .tk-acc-body {
  max-height: 0; overflow: hidden; padding-left: 62px;
  transition: max-height .45s cubic-bezier(.2, .7, .3, 1), padding-top .45s cubic-bezier(.2, .7, .3, 1);
}
.zr-tech .tk-acc-item.open .tk-acc-body { padding-top: 16px; }
.zr-tech .tk-acc-a { font-size: 15px; line-height: 1.9; color: #6C727A; }
.zr-tech .tk-acc-a a { color: var(--red); font-weight: 600; border-bottom: 1px solid rgba(200, 21, 38, .3); }
.zr-tech .tk-acc-a a:hover { color: var(--red-dark); border-bottom-color: var(--red-dark); }
.zr-tech .tk-acc-a b { color: var(--ink); font-weight: 600; }

/* ---------- ④ CTA（36 页新版修饰；.tk-cta 基础样式与子页共用，不动） ---------- */
.zr-tech .tk-cta--hub::before {
  /* 红角光换到左上角（子页仍是右上角） */
  background: radial-gradient(720px circle at 12% 0%, rgba(200, 21, 38, .34), transparent 62%);
}
.zr-tech .tk-cta-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  gap: 40px 72px; align-items: center;
}
.zr-tech .tk-cta--hub .tk-cta-kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: Arial, sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .3em; color: #E4687A; text-transform: uppercase;
}
.zr-tech .tk-cta--hub .tk-cta-kicker::before {
  content: ''; width: 44px; height: 2px; background: var(--red); flex: none;
}
.zr-tech .tk-cta--hub h2 { margin-top: 18px; }
.zr-tech .tk-cta-media { position: relative; height: 420px; overflow: hidden; }
.zr-tech .tk-cta-media img {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 108%; max-width: none;
  filter: brightness(.52) saturate(.75) contrast(1.05);   /* 暗化融进深色底 */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
  opacity: .95;
}
.zr-tech .tk-cta-media::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(560px circle at 88% 50%, rgba(200, 21, 38, .20), transparent 68%);
  mix-blend-mode: screen;
}

/* ============================================================================
   Blade 模板对接层（2026-10-11）
   ----------------------------------------------------------------------------
   pages2.blade.php / tech_hub.blade.php 用到的几个组件：
   顶部栏目大图、二级导航条、富文本容器（含后台 Word 粘贴表格的清理）、
   分页器。这些只在本栏目出现，与站内其它页面无交集。
   ========================================================================== */

/* ---------- 顶部栏目大图 ---------- */
.zr-tech .tk-banner {
  width: 100%; max-width: var(--w); margin: 0 auto;
  height: 3.4rem; overflow: hidden;
}
.zr-tech .tk-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }

/* ---------- 二级导航条（替代原 common-nav-wrap） ---------- */
.zr-tech .tk-subnav {
  width: 100%; max-width: var(--w); margin: 0 auto;
  border-bottom: 1px solid var(--line);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.zr-tech .tk-subnav-box {
  display: flex; align-items: center; gap: 4px;
  padding: 0 28px; min-width: max-content;
}
.zr-tech .tk-subnav-a {
  position: relative; padding: 22px 18px;
  font-size: 16px; font-weight: 500; color: #6C727A; white-space: nowrap;
  transition: color .25s;
}
.zr-tech .tk-subnav-a::after {
  content: ''; position: absolute; left: 18px; right: 18px; bottom: -1px;
  height: 2px; background: transparent; transition: background .28s;
}
.zr-tech .tk-subnav-a:hover { color: var(--steel); }
.zr-tech .tk-subnav-a.active { color: var(--red); font-weight: 600; }
.zr-tech .tk-subnav-a.active::after { background: var(--red); }

/* ---------- 富文本容器：接管后台存的正文排版 ----------
   重点是清理 Word / Excel 粘贴带来的老式表格：
   原表是 <table border="1" style="border-collapse:collapse"> + 每格 bgcolor，
   整页会变成"红色方格阵"。这里统一接管成设计系统里的表格样式。 */
.zr-tech .tk-richtext { color: var(--body); }
.zr-tech .tk-richtext p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.9; color: #545B63; }
.zr-tech .tk-richtext p:last-child { margin-bottom: 0; }
.zr-tech .tk-richtext h2 {
  font-size: 26px; font-weight: 800; color: var(--ink);
  margin: 44px 0 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line); line-height: 1.4;
}
.zr-tech .tk-richtext h2:first-child { margin-top: 0; }
.zr-tech .tk-richtext h3 {
  font-size: 20px; font-weight: 700; color: var(--ink);
  margin: 32px 0 12px;
}
.zr-tech .tk-richtext strong, .zr-tech .tk-richtext b { color: var(--ink); font-weight: 700; }
.zr-tech .tk-richtext a { color: var(--steel); border-bottom: 1px solid rgba(200, 21, 38, .3); }
.zr-tech .tk-richtext a:hover { color: var(--red); border-bottom-color: var(--red); }
.zr-tech .tk-richtext img { max-width: 100%; height: auto; margin: 12px 0; border-radius: 8px; }

/* 表格接管：抹掉后台带来的 border/bgcolor/width，套用设计系统表格样式 */
.zr-tech .tk-richtext table {
  width: 100% !important; min-width: 760px;
  border-collapse: collapse !important;
  margin: 20px 0;
  font-size: 14.5px; line-height: 1.7;
  table-layout: fixed;
}
.zr-tech .tk-richtext table td,
.zr-tech .tk-richtext table th {
  border: 1px solid var(--line) !important;
  background: transparent !important;
  padding: 13px 16px !important;
  vertical-align: top; color: #545B63;
  text-align: left;
  word-break: break-word;
}
/* 后台常把首行设成红底白字当表头，这里保留这个语义但改成设计系统的深底 */
.zr-tech .tk-richtext table tr:first-child td {
  background: var(--ink) !important;
  color: #fff !important;
  font-weight: 600;
  border-bottom-color: var(--ink) !important;
}
.zr-tech .tk-richtext table tr:nth-child(even) td { background: #FAFBFC !important; }
.zr-tech .tk-richtext table tr:hover td { background: var(--steel-soft) !important; }
/* 窄屏可横向滑动，不撑破版心 */
.zr-tech .tk-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 小字变体（38 页正文区） */
.zr-tech .tk-richtext--sm p { font-size: 14.5px; line-height: 1.85; }

/* 安装指导页：把后台正文里的有序列表做成步骤卡 */
.zr-tech .tk-richtext--guide ol,
.zr-tech .tk-richtext--guide ul { margin: 0 0 8px; padding: 0; list-style: none; }
.zr-tech .tk-richtext--guide li {
  position: relative;
  padding: 18px 0 18px 54px;
  border-top: 1px solid var(--line);
  font-size: 15.5px; line-height: 1.9; color: #545B63;
}
.zr-tech .tk-richtext--guide li:first-child { border-top: 0; }
.zr-tech .tk-richtext--guide ol { counter-reset: tkg; }
.zr-tech .tk-richtext--guide ol > li { counter-increment: tkg; }
.zr-tech .tk-richtext--guide ol > li::before {
  content: counter(tkg, decimal-leading-zero);
  position: absolute; left: 0; top: 20px;
  font-family: Arial, sans-serif; font-size: 26px; font-weight: 800;
  color: var(--steel); opacity: .32; line-height: 1;
}
.zr-tech .tk-richtext--guide ul > li::before {
  content: ''; position: absolute; left: 8px; top: 30px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
}

/* ---------- 分页器 ---------- */
.zr-tech .tk-pager { margin-top: 44px; display: flex; justify-content: center; }
.zr-tech .tk-pager nav { width: 100%; }
.zr-tech .tk-pager ul.pagination {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; list-style: none;
}
.zr-tech .tk-pager ul.pagination li { display: inline-flex; }
.zr-tech .tk-pager ul.pagination li > * {
  min-width: 38px; height: 38px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; color: #545B63; background: #fff;
  transition: all .22s;
}
.zr-tech .tk-pager ul.pagination li > *:hover { border-color: var(--steel); color: var(--steel); }
.zr-tech .tk-pager ul.pagination li.active > * {
  background: var(--steel); border-color: var(--steel); color: #fff; font-weight: 600;
}
.zr-tech .tk-pager ul.pagination li.disabled > * { opacity: .4; pointer-events: none; }

@media (max-width: 1100px) {
  /* 融合页（36）：Fersa 式四区块的响应式 */
  .zr-tech .tk-svc-grid, .zr-tech .tk-faq-grid { grid-template-columns: 1fr; gap: 44px; }
  .zr-tech .tk-svc, .zr-tech .tk-faqsec { padding: 84px 0 90px; }
  .zr-tech .tk-cta-grid { grid-template-columns: 1fr; }
  .zr-tech .tk-cta-media { height: 300px; order: -1; }
  .zr-tech .tk-cta-media img { width: 100%; }
  .zr-tech .tk-faq-media img { height: 240px; }
}
@media (max-width: 820px) {
  /* 融合页（36）手机端 */
  .zr-tech .tk-fhero { margin-top: -.9rem; min-height: 88vh; min-height: 88svh; }
  .zr-tech .tk-fhero-inner { padding: calc(.9rem + 72px) 20px 110px; }
  .zr-tech .tk-fhero h1 { font-size: clamp(25px, 8.4vw, 34px); }   /* 最长行 8 字，按 vw 收口防 320px 窄屏溢出 */
  .zr-tech .tk-fhero-desc { font-size: 15px; }
  .zr-tech .tk-fhero-scroll { width: 46px; height: 46px; bottom: 22px; }
  .zr-tech .tk-svc, .zr-tech .tk-faqsec { padding: 64px 0 72px; }
  .zr-tech .tk-svc-item { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 16px; padding: 20px 4px; }
  .zr-tech .tk-svc-ico { width: 52px; height: 52px; border-radius: 13px; }
  .zr-tech .tk-svc-ico svg { width: 22px; height: 22px; }
  .zr-tech .tk-svc-t { font-size: 17px; }
  .zr-tech .tk-acc-item { padding: 18px 18px; }
  .zr-tech .tk-acc-head { gap: 13px; }
  .zr-tech .tk-acc-ico { width: 38px; height: 38px; }
  .zr-tech .tk-acc-ico svg { width: 17px; height: 17px; }
  .zr-tech .tk-acc-q { font-size: 15px; }
  .zr-tech .tk-acc-body { padding-left: 0; }
  .zr-tech .tk-faq-media img { height: 220px; }
  .zr-tech .tk-cta-media { height: 220px; }
}

@media (max-width: 480px) {
  .zr-tech .tk-cta--hub .tk-btn { width: 100%; justify-content: center; }
}

@media (max-width: 1400px) {
  .zr-tech .tk-guide { grid-template-columns: 220px minmax(0, 1fr); gap: 0 44px; }
}

@media (max-width: 1100px) {
  .zr-tech .tk-subnav-box { padding: 0 20px; }
  .zr-tech .tk-subnav-a { padding: 18px 14px; font-size: 15px; }
  .zr-tech .tk-hero-inner { padding: calc(1.9rem + 92px) 28px 76px; }
  .zr-tech .tk-sec { padding: 84px 0; }
  .zr-tech .tk-sec-head--split { grid-template-columns: 1fr; gap: 24px; }
  .zr-tech .tk-split { grid-template-columns: 1fr; gap: 36px; }
  .zr-tech .tk-split--reverse .tk-split-media { order: 0; }
  .zr-tech .tk-guide { grid-template-columns: 1fr; gap: 32px; }
  .zr-tech .tk-guide-nav {
    position: static; border-left: 0; padding-left: 0;
    border-top: 2px solid var(--line); padding-top: 16px;
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  }
  .zr-tech .tk-guide-nav-label { display: none; }
  .zr-tech .tk-guide-nav a {
    margin-left: 0; padding-left: 16px; border-left: 0;
    border-bottom: 2px solid transparent; white-space: nowrap; padding-bottom: 6px;
  }
  .zr-tech .tk-guide-nav a.is-active { border-left: 0; border-bottom-color: var(--steel); }
  .zr-tech .tk-points { grid-template-columns: 1fr; }
  .zr-tech .tk-cta-inner { grid-template-columns: 1fr; gap: 32px; }
  .zr-tech .tk-brand-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
  .zr-tech { font-size: 15px; }
  .zr-tech .tk-wrap { padding: 0 20px; }
  .zr-tech .tk-hero-inner { padding: calc(1.9rem + 72px) 20px 60px; }
  .zr-tech .tk-hero-desc { font-size: 15px; }
  .zr-tech .tk-wm { font-size: 34vw; right: 0; }
  .zr-tech .tk-sec { padding: 64px 0; }
  .zr-tech .tk-sec-head { margin-bottom: 34px; }
  .zr-tech .tk-parser { padding: 26px 22px; }
  .zr-tech .tk-parser-input { height: 52px; font-size: 15px; }
  .zr-tech .tk-parser-btn { padding: 0 16px; font-size: 14px; height: 40px; }
  .zr-tech .tk-dl { grid-template-columns: 56px minmax(0, 1fr); gap: 16px 18px; padding: 22px 4px; }
  .zr-tech .tk-dl-ico { width: 56px; height: 66px; }
  .zr-tech .tk-dl-ico svg { width: 21px; height: 21px; }
  .zr-tech .tk-dl-title { font-size: 17px; }
  .zr-tech .tk-dl-bt { grid-column: 1 / -1; justify-content: center; height: 44px; }
  .zr-tech .tk-step { grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; }
  .zr-tech .tk-step-n { font-size: 26px; }
  .zr-tech .tk-step-t { font-size: 16.5px; }
  .zr-tech .tk-brand-grid { grid-template-columns: repeat(2, 1fr); }
  .zr-tech .tk-cta { padding: 64px 0; }
  .zr-tech .tk-toplink { right: 16px; bottom: 20px; }
}

@media (max-width: 480px) {
  .zr-tech .tk-hero-actions .tk-btn { width: 100%; justify-content: center; }
  .zr-tech .tk-card { padding: 24px 22px; }
  .zr-tech .tk-point { padding: 24px 22px; gap: 16px; }
  .zr-tech .tk-brand-grid { grid-template-columns: 1fr; }
}