/* ============================================================
   即刻智能官网 · 视觉收敛层（jk-visual.css）
   ------------------------------------------------------------
   为什么做这一层：
     原站设计令牌过于发散 —— 17 个字号、7 个字重、20 种文字颜色
     （其中 5 种是几乎无法分辨的白透明度）、11 种圆角、5 种区块间距。
     视觉上会显得"碎、糊、像模板"，专业感被稀释。

   思路：不增加装饰，只做「约束」——
     · 文字灰度收到 3 级
     · 圆角收到 2 档（卡片 16 / 胶囊 999）
     · 数字统一等宽 + 金色
     · 图片统一调色
     · 卡片统一边框与内高光
     · 区块统一节奏 96px
   所有规则都以轻量覆盖为主，不改结构、可整层摘除。
   ============================================================ */

:root {
  --jk-t1: #ffffff;
  --jk-t2: rgba(255, 255, 255, .74);
  --jk-t3: rgba(255, 255, 255, .54);
  --jk-t4: rgba(255, 255, 255, .34);
  --jk-amber: #e3a33a;
  --jk-line: rgba(255, 255, 255, .07);
  --jk-r: 16px;
}

/* ---------- 1. 文字灰度归一（20 种 → 3 级） ---------- */
#root p,
#root li,
#root dd,
#jk-conv p,
#jk-conv li {
  color: var(--jk-t3) !important;
}
/* 需要弱化的说明文字（注意：不要用 .text-xs 这种通用类！
   产品卡正文就是 text-xs lg:text-sm，一压就整段发灰） */
#jk-conv .jkc-fine,
#jk-conv .jkc-tip {
  color: var(--jk-t4) !important;
}
/* 产品卡正文单独提到 0.62，保证在深色卡上可读 */
#products .product-card p,
#root .case-card p {
  color: rgba(255, 255, 255, .62) !important;
}
/* 标题保持纯白，只收字距 */
#root h1, #root h2, #root h3, #root h4,
#jk-conv h2, #jk-conv h3 {
  letter-spacing: -.02em !important;
}

/* ---------- 2. 数字统一等宽 + 金色（专业感的关键细节） ---------- */
.hero-stat,
.hero-stat *,
#jk-conv .stats b,
#jk-conv .jkc-delta .to,
#jk-conv .jkc-delta .from {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.03em !important;
}
#jk-conv .jkc-delta .to { color: var(--jk-amber) !important; }
#jk-conv .stats b { color: var(--jk-t1) !important; }

/* ---------- 3. 圆角归一（11 种 → 3 种） ---------- */
#root .glass-panel,
#root .product-card,
#root .case-card,
#jk-conv .jkc-col,
#jk-conv .jkc-pbox,
#jk-conv .jkc-card,
#jk-conv .jkc-apply {
  border-radius: var(--jk-r) !important;
}
#jk-conv .jkc-aic { border-radius: var(--jk-r) !important; }
#jk-conv .jkc-col,
#jk-conv .jkc-pbox { border-radius: var(--jk-r) !important; }

/* ---------- 4. 卡片质感：细边框 + 内高光 + 克制的悬停 ---------- */
#root .glass-panel,
#jk-conv .jkc-col,
#jk-conv .jkc-pbox,
#jk-conv .jkc-card {
  border-color: var(--jk-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
@media (prefers-reduced-motion: no-preference) {
  #root .product-card,
  #root .case-card {
    transition: transform .35s cubic-bezier(.22,.61,.36,1),
                border-color .35s ease,
                box-shadow .35s ease;
  }
  #root .product-card:hover,
  #root .case-card:hover {
    border-color: rgba(0, 113, 227, .38) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06),
                0 18px 48px -18px rgba(0, 0, 0, .75);
  }
}

/* ---------- 5. 图片统一调色（避免冷蓝过饱和显得廉价） ---------- */
#jk-conv .jkc-scene,
#jk-conv .jkc-strip {
  filter: saturate(.9) contrast(1.05);
}
#jk-conv .jkc-scene { filter: saturate(.88) contrast(1.06); }
/* 卡片配图要「主动提亮」：卡片图区高度只有 116px，还要被两层渐变遮罩压，
   原样调色会偏暗。brightness 1.1 是实测后的折中——再高 p99 会过曝。 */
.jk-card-pic,
.jk-case-pic {
  filter: brightness(1.1) saturate(.95) contrast(1.02);
}

/* ---------- 6. 产品卡：照片即身份，去掉小图标徽标 ---------- */
/* 缩到 38px 后，图标变成照片与标题之间的一块糊点，像残留物。
   卡片已有实景图，图标不再承担识别作用，直接隐藏更干净。 */
#products .product-card > div[class*="w-14"] {
  display: none !important;
}
#products .product-card h3 {
  letter-spacing: -.015em;
  line-height: 1.35;
}

/* ---------- 7. 区块节奏统一（5 种 padding → 96px + 细分隔线） ---------- */
#jk-conv .jkc { padding: 96px 0; }
#root section + section {
  border-top: 1px solid var(--jk-line);
}
/* ★★ 例外：带图片背景的区块不要顶部分隔线。
   1px 半透明白线画在纯色底上几乎看不见（是想要的"细分隔线"），
   但画在车间照片上就是横贯全宽的一道亮线，把整幅画面割断
   （2026-10-18 用户两次截图指出：#products→#scenarios、#advantages→#clients）。
   本需求给 #scenarios / #clients 加了背景图，故这两块清掉。
   ★ 特异性必须够：上一条是「1 个 ID + 2 个元素」，这里用 2 个 ID 压过它。
   纯色区块（#cases / #advantages）之间的分隔线保留，不受影响。 */
#root #scenarios,
#root #clients,
#root #advantages {
  border-top: 0;
}
#jk-conv .jkc { border-top: 1px solid var(--jk-line); }
/* ★ 实景带（.jkc-scene）是全宽图片横幅，jk-conv.css 里本来就写了 border-top:0，
   但上一条与它的特异性相同（都是 1 个 ID + 1 个 class），而本文件**后加载**
   → 又把边框盖回了 1px，导致 #clients 与实景带之间多出一条亮线
   （2026-10-18 用户截图指出）。这里补一条同特异性、位置更靠后的规则把它清掉。
   其余 4 个 jkc 区块仍需这条分隔线，所以不能直接删上一条。 */
#jk-conv .jkc-scene { border-top: 0; }

/* ---------- 8. 首屏：提升可读性与克制感 ---------- */
.hero-title {
  letter-spacing: -.025em !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
}
.hero-subtitle {
  color: var(--jk-t2) !important;
  letter-spacing: .005em;
  line-height: 1.7 !important;
}
.hero-desc { color: var(--jk-t3) !important; }

/* ---------- 9. 按钮：统一高度与阴影 ---------- */
#root .magnetic-btn {
  border-radius: 999px !important;
  min-height: 48px;
}

/* ---------- 10. 窄屏微调 ---------- */
@media (max-width: 860px) {
  #jk-conv .jkc { padding: 64px 0; }
  #root p, #root li, #jk-conv p, #jk-conv li { line-height: 1.75 !important; }
}

/* ---------- 11. 标题渐变收敛：从「白→蓝彩虹」改为「白→浅灰蓝」的纵向过渡 ---------- */
/* 原渐变 135deg(#fff,#a5d8ff,#0071e3) 末端过饱和，观感偏「网感」；
   改成纵向的极淡过渡，读起来仍是白字，但有纵深。 */
#root .text-gradient,
#root .hero-title,
#jk-conv .jkc-scene h2 {
  background-image: linear-gradient(180deg, #ffffff 0%, #e8eff9 62%, #c2d5ee 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* ---------- 12. 图片统一色温：给卡片图加一层冷调压暗 ---------- */
/* ★ 20261018：产品卡与案例卡必须分开。两者在 jk-conv.css 里各有一层 :after
   底部渐变（产品卡 .40 / 案例卡 .55），这里再叠一层时如果不区分，
   产品卡底部会被压到近 80% 黑。产品卡的冷压层因此要薄得多。 */
.jk-case-pic:before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, rgba(8, 14, 24, .08) 0%, rgba(8, 14, 24, .26) 100%);
  pointer-events: none;
}
.jk-card-pic:before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, rgba(8, 14, 24, .02) 0%, rgba(8, 14, 24, .12) 100%);
  pointer-events: none;
}
.jk-card-pic, .jk-case-pic { position: relative; }

/* ---------- 13. 信任条数字：加大字距对比，让「数字」比「说明」更响 ---------- */
.hero-stat > div,
.hero-stat {
  letter-spacing: -.02em;
}

/* ---------- 14. 【已移除】全局 p 的 max-width ----------
   原先写了 `#root p { max-width: 64ch }` 想做行长控制，结果把卡片正文
   压到 299px（卡片内容宽 381px），文字只占 78%、右侧留白，整页显得「排版乱」。
   行宽由各区块自己的容器（max-w-[540px] / 卡片宽度）决定，不要全局限宽。 */

/* ---------- 15. 链接与按钮的焦点态统一 ---------- */
#root a:focus-visible,
#root button:focus-visible,
#jk-conv a:focus-visible,
#jk-conv button:focus-visible,
#jk-conv input:focus-visible {
  outline: 2px solid #4da3ff;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 16. 首屏：左侧压暗，保证标题/正文压在视频光效上仍然清晰 ---------- */
/* ★★ 20261018 修复（本轮「产品区太暗」的真正根因）：
   原选择器是 `#root section:first-of-type` —— 这是个陷阱。
   `:first-of-type` 是相对【各自父元素】计算的，不是全文档第一个：
     · 首屏 section 的父是 div.relative  → 是第一个 section ✓（本意）
     · #products 的父是 main             → 也是 main 下第一个 section ✗（误伤）
     · 决策层第一个区块的父是 div        → 同样 ✗（误伤）
   于是一层 1440px 宽、左侧 88% 黑的压暗渐变盖住了整个产品区：
   第一列卡片落在 11%~32% 处，正好被压掉约 70% 亮度——
   实测把配图换成纯红 #ff0000，渲染出来只剩 RGB(76,4,6)。
   ★ 教训：想锁定「全站第一个某元素」时，不要用 :first-of-type 配后代选择器，
     要么用直接子代 `>`，要么锁定该元素独有的类名。
   这里改用只有首屏才有的 min-h-screen 类。 */
@media (min-width: 1024px) {
  #root section[class*="min-h-screen"] { position: relative; }
  #root section[class*="min-h-screen"]:before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg,
      rgba(5, 5, 8, .88) 0%,
      rgba(5, 5, 8, .58) 40%,
      rgba(5, 5, 8, .12) 68%,
      rgba(5, 5, 8, 0) 100%);
  }
}

/* ---------- 17. 首屏文字层级（用 id 提升权重，压过通用 p 规则） ---------- */
#root .hero-subtitle { color: rgba(255, 255, 255, .78) !important; }
#root .hero-desc { color: rgba(255, 255, 255, .58) !important; }

/* ---------- 18. 区块导语行宽（20261018 排版修复） ----------
   ★ 坑：React 产物是构建期生成的 Tailwind CSS，我们补丁新加的
     `max-w-[760px]` 这个类在 CSS 里并不存在，等于没写。
     所以行宽必须在这一层兜住 —— 用类名前缀选中，避免影响别的 <p>。
   背景：720px/18px 时每行 40 字、94 字被切成 2.35 行；760px/16px
   才是每行约 47 字、正好 2 行，居中时左右对称。 */
#products p[class*="max-w-"],
#advantages p[class*="max-w-"] {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#advantages p[class*="max-w-"] { max-width: 680px !important; }

/* ---------- 19. 产品区提亮（20261018 · 用户反馈「太暗」） ----------
   量化依据：产品区区块均值 16.6（案例区 28.3、首屏 28.0），
   整张产品卡 avg 13.9、最亮像素仅 56 —— 不是对比度不够
   （正文对比度 7.71 已达 AAA），是「整块没有亮部」的观感问题。
   主因是配图被压死（见第 5 / 12 节与 jk-conv.css 的 :after）。
   这里补的是卡片本体：让卡片从背景里浮起来、正文与标签提亮。 */
#products .product-card {
  background: rgba(255, 255, 255, .055) !important;
}
/* 放在文件末尾以确保覆盖第 1 节的 0.62 */
#products .product-card p {
  color: rgba(255, 255, 255, .74) !important;
}
/* 区导语（#root p 会给到 .54，这里提到 .70） */
#products p[class*="max-w-"] {
  color: rgba(255, 255, 255, .70) !important;
}
/* 功能标签：原 #3388ff 压在 8% 蓝底上偏闷，提亮文字与底色 */
#products .product-card span[class*="rounded-full"] {
  background: rgba(0, 113, 227, .16) !important;
  border-color: rgba(0, 113, 227, .32) !important;
  color: #6aa8ff !important;
}

/* ============================================================
   15. 场景方案区（#scenarios）—— 电器智能制造场景背景
   2026-10-18 需求：「专为电器行业及配套行业提供数智工厂解决方案」
   板块增加电器智能制造场景背景。

   图片选型：images/factory-assembly.jpg
     画面 = 电器整机总装线（成排白色整机 + 机械臂 + 装配工位），
     是站内唯一真正的「电器智能制造场景」。
     备选已排除：mes-line（PDA 扫码特写，偏单点）、
     workshop-components（元器件绕线车间，属配套而非整机）、
     workstation（平板看图纸特写，无场景感）。
     该图同时被页面底部决策层实景带使用 → 同一 URL 只下载一次，
     不增加流量；两处相隔约 2000px，且此处压暗成氛围层，不会重复。

   实现：多层背景（第 1 层遮罩渐变 + 第 2 层图），
     不用伪元素、不改 position、不加 mix-blend-mode
     → 老内核（百度 T7 / 微信 X5）兼容，零副作用。
     删除本节即完全回滚。

   ★ 遮罩取样点与上下区块对齐：
     上邻 #products 收尾 rgb(5 5 8) → 本区起 rgb(8 8 16)（原渐变起点）
     本区收尾 rgb(5 5 8) → 下邻 #cases 起点 rgb(5 5 8)
     首尾用不透明色，避免出现接缝。
   ★ 中部遮罩留到 .78（图约 22% 可见）：
     卡片本身有底色，图只从卡片缝隙与四周留白透出，
     若压到 .88 以上则完全看不出是场景图，失去本次需求意义。
   ============================================================ */
#scenarios {
  /* ★ 必须 !important：#scenarios 在 React 产物里带内联
     style="background: linear-gradient(rgb(8,8,16) 0%, rgb(5,5,8) 100%)"，
     内联优先级高于任何选择器（含 ID），不加 !important 整条会被吃掉。 */
  background-image:
    linear-gradient(180deg,
      rgba(8, 8, 16, .96) 0%,
      rgba(7, 9, 16, .82) 10%,
      rgba(6, 8, 14, .74) 30%,
      rgba(5, 7, 13, .70) 62%,
      rgba(5, 6, 10, .88) 92%,
      rgb(5, 5, 8) 100%),
    url("/images/factory-assembly.jpg") !important;
  background-size: auto, cover !important;
  /* 图偏向右侧：那片是机械臂与产线纵深，比正中最有智能制造感 */
  background-position: center center, 62% 42% !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* 卡片：玻璃底从 3% 白提到深色半透明，
   让正文在背景图上仍有足够对比；保留 backdrop-filter 不动，
   支持模糊的内核会自动把背景图虚化，观感更整。 */
#scenarios .scenario-card {
  background-color: rgba(9, 13, 23, .46);
  border-color: rgba(255, 255, 255, .10);
}

/* 移动端：cover 以高度为准 → 水平裁切严重，定位要偏向总装线主体 */
@media (max-width: 640px) {
  #scenarios {
    background-position: center center, 58% 38% !important;
  }
}

/* ============================================================
   16. 服务客户区（#clients）—— 已实施客户智能制造全景图背景
   2026-10-18 需求：「服务客户板块，整个已实施客户智能制造全景图作为背景。」

   图片：images/clients-panorama.jpg
     内容 = 智能工厂双产线对称全景：成排白色整机（洗农机）+ 橙红机械臂 +
     AGV 搬运车 + 悬挂式电子看板（实时产量/图表）+ 远端货架区。
     这是为本板块单独生成的一张图（站内原有 9 张配图没有「已实施客户全景」），
     1536x711（2.16:1，与板块 1440x667 几乎完全一致，cover 仅缩放 6%，不浪费像素）。
     原图 1536x1024 PNG 已裁掉右下角生成水印，源文件存
     .workbuddy/source-images/clients-panorama-source.png（2.6MB，不随站发布）。

   ★ 与第 15 节同一个坑：`#clients` 也带内联
     style="background: rgb(5,5,8);"，覆盖必须 !important。

   ★ 遮罩取样：上邻 #advantages 收尾 rgb(5 5 8) → 本区起 rgb(5 5 8)；
     下邻 #jk-conv 无背景（透出 body rgb(5 5 8)）→ 本区收尾 rgb(5 5 8)。
     首尾用不透明色，避免接缝。
   ★ 这张图本身对比强（橙色机械臂很跳），遮罩比 #scenarios 略重一点（中部 .76），
     否则橙色件会抢掉客户名。
   ============================================================ */
#clients {
  background-image:
    linear-gradient(180deg,
      rgba(5, 5, 8, .94) 0%,
      rgba(5, 6, 10, .78) 12%,
      rgba(5, 6, 10, .73) 46%,
      rgba(5, 5, 8, .88) 84%,
      rgb(5, 5, 8) 100%),
    url("/images/clients-panorama.jpg") !important;
  background-size: auto, cover !important;
  /* 图是对称构图，居中裁切最稳；两侧产线不会被切坏 */
  background-position: center center, 50% 50% !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* 客户卡：与第 15 节场景卡同样处理——深色底提升文字对比，
   用 background-color 以免清掉 glass-panel 的 backdrop-filter */
#clients .client-card {
  background-color: rgba(9, 13, 23, .50);
  border-color: rgba(255, 255, 255, .10);
}

/* 移动端：cover 以高度为准，水平裁切极大 → 对称图的中央通道居中即可，
   同时把遮罩略减，让全景感保留 */
@media (max-width: 640px) {
  #clients {
    background-position: center center, 50% 46% !important;
  }
}

/* ============================================================
   17. 优势区（#advantages）—— 「为什么选择即刻智能」适配背景图
   2026-10-18 需求：「为什么选择即刻智能 板块增加适配背景图。」

   图片：images/dashboard-screen.jpg（站内已有素材，未新增文件）
     画面 = 一人背对镜头站在巨大数据看板前，看板上是蓝色波纹/环状/柱状
     可视化。选它的理由：
       ① 全站深蓝黑主色，这张图是唯一的**蓝色调**车间/决策场景，
          压暗后不会像暖色图（erp-meeting 的粉墙木桌）那样出现色偏；
       ② 板块三张论据是「聚焦行业 / 实施路径 / 售后服务」，本质在讲
          **数字化能力与落地成果**，而不是产线本身 —— 大屏比车间照更贴题；
       ③ 与相邻的 #clients（双产线全景，开阔对称）在构图上明确区分：
          这张是"人 + 屏"的近景，不会两块看起来像同一类图。
     ★ 排除的记录：factory-assembly 已用于 #scenarios 与决策层实景带（第 3 次会重复）；
       erp-meeting 暖色调与全站冲突；warehouse / workshop-components 属 WMS/配套
       单点场景，与"为什么选我们"关联弱。

   ★ 与第 15/16 节同样的坑：`#advantages` 也带内联
     style="background: linear-gradient(rgb(8,8,16), rgb(5,5,8))"，必须 !important。
   ★ 已同步把 #advantages 加入第 7 节的「无顶边线」名单
     —— 否则 `#root section + section` 的 1px 线会在照片上割出亮线。

   ★★ 遮罩比 #clients（中部 .73）更重（中部 .80）：
     本区三列论据卡是**透明无卡底**的（.advantage-item 背景 rgba(0,0,0,0)），
     正文直接压在照片上，必须牺牲一点图的辨识度换文字对比。
   ============================================================ */
#advantages {
  /* 三层（上→下）：
     ① 水平渐变：中间透、两侧压 —— 三列正文分别在左/中/右，
        中间那列本来就压在人物暗部，左列却压在看板网格上（网格线会从字缝里钻出来）。
        压两侧、留中间，既补足文字对比，又让画面中心（人 + 屏）更聚焦。
     ② 垂直遮罩：首尾与上下区块对齐（上邻 #cases 收尾 rgb(8,8,16)、下邻 #clients 起 rgb(5,5,8)）
     ③ 图片本身 */
  background-image:
    linear-gradient(90deg,
      rgba(5, 7, 12, .42) 0%,
      rgba(5, 7, 12, .18) 28%,
      rgba(5, 7, 12, 0) 46%,
      rgba(5, 7, 12, .08) 66%,
      rgba(5, 7, 12, .36) 100%),
    linear-gradient(180deg,
      rgb(8, 8, 16) 0%,
      rgba(7, 9, 16, .86) 12%,
      rgba(6, 8, 14, .80) 46%,
      rgba(5, 6, 10, .90) 86%,
      rgb(5, 5, 8) 100%),
    url("/images/dashboard-screen.jpg") !important;
  background-size: auto, auto, cover !important;
  /* 偏左上：让看板主体留在画面中上部，右侧暗部（人物/墙面）压住右列文字 */
  background-position: center center, center center, 46% 44% !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}

/* 三列论据无卡底 → 正文直接压在照片上。
   全站正文默认 rgba(255,255,255,.45) 在纯黑底上是够的，但压在图上只剩约 3.5:1，
   实测左列「聚焦行业」那段压在数据看板网格线上明显发虚。
   处理：① 正文提到 .66（与 #products .product-card p 的 .74 同一思路，站内已有先例）
        ② 补 text-shadow 托底，避免网格线/波纹从字缝里透出来。
   ★ 不加重遮罩：再压就得把图压没了，失去"加背景图"的意义。 */
#advantages .advantage-item p {
  color: rgba(255, 255, 255, .66) !important;
  text-shadow: 0 1px 3px rgba(5, 5, 8, .9), 0 0 18px rgba(5, 5, 8, .78);
}
/* 三列标题（h3，text-white 20px/700）：纯白不需要提亮，只托一层阴影 */
#advantages .advantage-item h3 {
  text-shadow: 0 1px 4px rgba(5, 5, 8, .9);
}

/* 移动端：1 列布局使区块更高，cover 以高度为准 → 水平裁切大，
   把看板主体拉回中间 */
@media (max-width: 640px) {
  #advantages {
    background-position: center center, 42% 40% !important;
  }
}

/* ============================================================
   18. 其余板块补齐背景图（2026-10-18）
   需求：「首页里面，板块没有背景图片的，相对应的添加。」

   补齐前的盘点（.workbuddy/_inventory.js）：
     #products  1830px 无图   卡片覆盖 210%
     #cases     1629px 无图   卡片覆盖 194%
     #jk-panorama 900px 无图  卡片覆盖 136%
     jkc 痛点    673px 无图   卡片覆盖 108%
     jkc 证据    882px 无图   卡片覆盖 145%
     #jk-apply   722px 无图   卡片覆盖 148%

   ★★ #contact / 页脚 不在本名单，别再加：
     #contact 内部自带 video（CTASection.tsx，/videos/future-horizon-v2.mp4，
       暖色大厅画面）——它本来就有动态背景，再叠一张静态图只会被视频完全盖住，
       唯一效果是视频没加载时闪一下别的画面。已实测：隐藏该 video 后
       R 均值 37.4→13.6，证明暖色画面就是这支视频，不是背景图。
     footer 是页脚，不属内容板块，保持纯色。

   ★ 遮罩曲线（180deg，六段）说明：
     0%   不透明 —— 与上一板块无缝衔接，也避免 1px 亮线；
     6%   最轻   —— 这一带是标题区（无卡片），让底纹真正被看见；
     18%~45% 渐重 —— 卡片开始铺满，图只透出缝隙；
     72%~88% 更重 —— 底部留白收干净；
     100% 不透明 —— 与下一板块衔接。
     轻的那一档按图片本身的明度与色温分别给：
       workstation 青绿、mes-line 冷蓝 → .62（最轻，最贴站点蓝调）
       ai-vision 冷调环形光源           → .70（光源本是亮的，压重一点）
       hardware 冷蓝设备                → .64
       workshop-components 暖白车间     → .66 + 一层冷蓝压色（三层背景）
       warehouse 灰白货架               → .74
   ★ 内联 background 的两个（#products / #cases）必须 !important，
     其余区块的内联样式也会覆盖 ID 选择器，一并写 !important 更稳。
   ============================================================ */

/* 产品矩阵：平板看 3D 方案图纸（青绿调）—— 呼应「产品方案」 */
#products {
  background-image:
    linear-gradient(180deg, rgb(5, 5, 8) 0%, rgba(5, 7, 12, .62) 6%, rgba(5, 7, 12, .66) 18%, rgba(5, 7, 12, .78) 40%, rgba(5, 7, 12, .86) 70%, rgba(5, 6, 9, .92) 88%, rgb(5, 5, 8) 100%),
    url("/images/workstation.jpg") !important;
  background-size: auto, cover !important;
  background-position: center center, 50% 42% !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* 客户案例：车间扫码扫件（冷蓝）—— 呼应「真实落地」 */
#cases {
  background-image:
    linear-gradient(180deg, rgb(5, 5, 8) 0%, rgba(5, 7, 12, .62) 6%, rgba(5, 7, 12, .66) 18%, rgba(5, 7, 12, .78) 40%, rgba(5, 7, 12, .86) 70%, rgba(5, 6, 9, .92) 88%, rgb(5, 5, 8) 100%),
    url("/images/mes-line.jpg") !important;
  background-size: auto, cover !important;
  background-position: center center, 50% 52% !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* 决策层 · 客户全景：配套元器件车间 —— 客户就是这类制造企业 */
#jk-conv #jk-panorama {
  background-image:
    linear-gradient(180deg, rgb(5, 5, 8) 0%, rgba(5, 7, 12, .66) 6%, rgba(5, 7, 12, .70) 18%, rgba(5, 7, 12, .82) 42%, rgba(5, 7, 12, .89) 72%, rgba(5, 6, 9, .94) 88%, rgb(5, 5, 8) 100%),
    linear-gradient(180deg, rgba(6, 18, 40, .38) 0%, rgba(6, 18, 40, .38) 100%),
    url("/images/workshop-components.jpg") !important;
  background-size: auto, auto, cover !important;
  background-position: center center, center center, 50% 46% !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}

/* 决策层 · 双线痛点：AI 检测光源视角 —— 冷调，与「先看清问题」呼应 */
#jk-conv .jkc-pains {
  background-image:
    linear-gradient(180deg, rgb(5, 5, 8) 0%, rgba(5, 7, 12, .70) 6%, rgba(5, 7, 12, .74) 20%, rgba(5, 7, 12, .85) 45%, rgba(5, 7, 12, .90) 72%, rgba(5, 6, 9, .94) 88%, rgb(5, 5, 8) 100%),
    url("/images/ai-vision.jpg") !important;
  background-size: auto, cover !important;
  /* 100% 而不是居中：居中会把环形光源（最亮的一条）顶在标题后面像光环，
     见 .workbuddy/shots/n3-pains.png 与 pains-pos100.png 的对比 */
  background-position: center center, 50% 100% !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* 决策层 · 证据：工业终端设备 —— 呼应「实测数据、可到现场看」 */
#jk-conv .jkc-evidence {
  background-image:
    linear-gradient(180deg, rgb(5, 5, 8) 0%, rgba(5, 7, 12, .64) 6%, rgba(5, 7, 12, .70) 20%, rgba(5, 7, 12, .82) 45%, rgba(5, 7, 12, .88) 72%, rgba(5, 6, 9, .93) 88%, rgb(5, 5, 8) 100%),
    url("/images/hardware-devices.jpg") !important;
  background-size: auto, cover !important;
  background-position: center center, 50% 50% !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* 决策层 · 预约：仓储齐套场景 —— 进门前的现状，引出「上门诊断」 */
#jk-conv #jk-apply {
  background-image:
    linear-gradient(180deg, rgb(5, 5, 8) 0%, rgba(5, 7, 12, .74) 6%, rgba(5, 7, 12, .78) 20%, rgba(5, 7, 12, .88) 45%, rgba(5, 7, 12, .92) 72%, rgba(5, 6, 9, .95) 88%, rgb(5, 5, 8) 100%),
    url("/images/warehouse.jpg") !important;
  background-size: auto, cover !important;
  background-position: center center, 50% 50% !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* 以上区块加入「图片区块无顶边线」名单：第 7 节那条 section+section 会加 1px 实线，
   画在照片上就是一条亮线。卡片的字号/对比不受影响。
   #contact 虽然没加静态图，但它自带视频背景，同理要摘掉这条线。 */
#root #products,
#root #cases,
#root #contact,
#jk-conv #jk-panorama,
#jk-conv .jkc-pains,
#jk-conv .jkc-evidence,
#jk-conv #jk-apply {
  border-top: 0;
}

/* ------------------------------------------------------------
   ★ 为什么这里**没有** @media (max-width: 640px) 的 background-position 覆盖
     （第 15/16/17 节各有一条，别照着补，那样只是空属性）

   实测（.workbuddy/_probe-cover.js，按 cover 的缩放比算）：
     视口 390   #products 390x3919  → 由高度决定缩放，纵向可裁 0%，放大 1470%
     视口 768   #products 768x2372  → 纵向可裁 0%，放大 452%
     视口 1024  #products 1024x1943 → 纵向可裁 0%，放大 278%
     视口 1440  #products 1440x1830 → 纵向可裁 0%，放大 186%
   → **1024 及以下所有区块都是「高度决定缩放」**，图片高度正好铺满，
     纵向 background-position 是个无效属性；只有 1440 这一档
     （#jk-panorama 9% / 痛点 32% / 证据 11% / 预约 27% 可裁）才起作用。
   窄屏真正起作用的是**横向**裁切，六个区块都用 50%（居中），无需分档；
   代价是手机端会看到极高倍数的竖条拉伸，效果是柔和的色彩底纹而不是照片，
   这正是密集卡片区块想要的效果，已在 390/768 实拍确认。

   ★ 已知的档位差异：痛点区在 1440 用 50% 100% 把环形光源裁出去了，
     但 ≤1024 是整图铺满、光源必然出现（1024 实拍：光源落在标题上方且被 .70
     遮罩压暗，可读性无影响）。若将来觉得刺眼，应调 6% 那一档的遮罩，不要再挪 position。
   ------------------------------------------------------------ */


/* ============================================================
   19. 移动端点击区 / 最小字号（2026-10-18 移动端适配检查）
   体检脚本：.workbuddy/verify-mobile.js（360 / 390 / 414 / 768 四档）

   体检结论：四档全部无横向溢出、无元素越界、无 JS 报错、无 404，
   6 个板块的窄屏背景图也都在。剩下两类问题在这里修：

   ① 纯文字链接的可点高度只有 16~25px（推荐 ≥ 32px，手指容易点偏）：
        预约 30 分钟诊断 →   25px   （#jk-conv 内的 <a href="#jk-apply">）
        看这个案例的完整数据 → 21px  （#jk-conv 内的 <a class="go">）
        180-2934-0804      16px    （「或直接打」那一行里的 tel 链接）

      ★★ 关键：这三个链接**都是 <p> 里的行内元素**。
         行内元素的纵向 padding 不参与行高计算 —— 所以加 padding 只扩大
         可点热区，段落排版一动不动。
         （千万别改成 display:inline-block / block，那样会把段落撑开。）

   ② 页脚 9 条产品链接各 20px、间隔 10px。改成 block + 7px 内边距，
     并去掉 li 的下外边距补偿 → 单条 34px、整列更整齐也更好点。
     ★ 页脚新增的 li 是 jk-conv.js 克隆出来的，类名一致，这条规则同样覆盖。

   ③ 备案号在手机上 10px 偏小 → 提到 12px（只动页脚这一行，不动全站字号）。

   ④ Hero 的「开启声音 / 全屏」两个视频控件 28px → 加大到 36px。
     它们所在的工具条本身就有 44px 高，所以只加按钮纵向内边距，
     不会溢出也不会盖住更多画面。

   ★ 断点取 768 而不是 640：iPad 竖屏就是 768px 宽，同样是触摸设备。
   ============================================================ */
@media (max-width: 768px) {
  /* ① 行内链接：只扩热区，不改排版 */
  #jk-conv a[href="#jk-apply"],
  #jk-conv a.go,
  #jk-conv a[href^="tel:"] {
    padding: 11px 2px;
    margin: 0 -2px;
  }

  /* ② 页脚整列链接 */
  main.relative footer ul li > a {
    display: block;
    padding: 7px 0;
  }
  main.relative footer ul li {
    margin-bottom: 0;
  }

  /* ③ 备案号 */
  main.relative footer a[href*="beian.miit.gov.cn"] {
    font-size: 12px;
  }

  /* ③b 免责/提示说明（.jkc-fine / .jkc-tip）在窄屏只有 11.5px → 提到 12px */
  #jk-conv .jkc-fine,
  #jk-conv .jkc-tip {
    font-size: 12px;
  }

  /* ④ Hero 视频的「开启声音 / 全屏」两个控件只有 28px。
     它们所在的工具条本身就是 44px 高，所以直接加大按钮纵向内边距即可，
     不会溢出、也不会盖住更多画面。
     ★ 用 React 产物自带的 code-path 精确定位，避免误伤同类字号的按钮。 */
  button[code-path="src/sections/HeroSection.tsx:102:13"],
  button[code-path="src/sections/HeroSection.tsx:123:13"] {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}