@charset "UTF-8";
/* ============================================================================
   方案 D —— 首页专用样式
   ----------------------------------------------------------------------------
   ★★ 本文件只在 is_front_page() 时入队（见 functions.php 的 dlican_assets）。
      为什么单独成文件、而不是追加进 style.css：
      style.css 有 2754 行，覆盖产品详情 / 新闻列表 / 案例归档 / 全部页面模板。
      方案 D 的原型自带一套全局重置（body 字号 15→13、h1~h4 与 ul 的 margin 归零、
      a 去下划线、img 转 block），这套重置若全局生效，全站版式会一起被改。
      单独成文件 + 只在首页加载 = 全站零影响，首页可自由使用 13px 基准。
      代价是首页多一个 HTTP 请求（6KB gzip 后约 8KB，可忽略）。

   ★ 变量与底色挂在 body.home-d-page 上，而不是 :root。
      因为页头 / 页脚在 .home-d 容器之外，挂 :root 才能被它们继承。
      home-d-page 这个 class 由 functions.php 的 body_class filter 注入，
      只在首页出现 —— 于是「首页深色 + 其他页浅色」可以共存。

   ★ 与 style.css 的关系：本文件排在 style.css 之后加载，
      同名选择器一律以本文件为准（覆盖）。覆盖范围严格限定在
      .home-d 内部 + body.home-d-page 前缀的页头 / 页脚修正，不改任何全局规则。

   来源：.workbuddy-ai/scripts/proto/d.html（方案 D v2，2026-10-27 定稿）
   生成：.workbuddy-ai/scripts/_gen_home_d_css.py
   ============================================================================ */

/* ============================================================================
   方案 D v2 —— 按 reenoo.com **作品页（客户案例页）** 的实测骨架重做
   ----------------------------------------------------------------------------
   v1 的错误：拿的是「案例详情页」的规范（.case_introbox / .case_introcontent
   那一整条 1200×300 白卡），套到了首页上，还自己在 banner 上加了压照片大标题。
   本版改为以 work.html 的实测几何为准：

   ┌ 实测骨架（1440 宽）──────────────────────────────────────────────┐
   │ .head         fixed,  h=80,  bg #fff                             │
   │ .top_section  y=80,   h=677, 全宽 1440（不是居中 1200）          │
   │   照片上只有一行 36px 文字，位于右下（x≈1157, y≈292）             │
   │ ul.cards      absolute, y=454, h=303, w=1200 居中                │
   │   每张 li     388×303  bg #fff                                   │
   │   每张图      392×212（图上、文下，图上顶边与卡片顶边齐平）        │
   │   卡内 h1     20px fw700 #696969（**不是蓝色**）                  │
   │   卡内 p      13px fw400 #696969                                 │
   │   三张卡**底边与 banner 底边齐平**（454+303=757=80+677）           │
   │ .focus_section2  y=1162 h=480 bg #0d1723                        │
   │   左 h1 30px #7b7b7b「我们的客户」+ h3 20px + 13px 正文           │
   │   右大字 60px Montserrat #454545（**接近黑，像浮雕**）             │
   │     旁边配 16px fw700 #696969 单位说明                            │
   │ 金褐标题      h1 30px #BAB39B（英文大写 + 中文副行）              │
   │ .greenmore    392×163  bg #37a16f  radius 0  图标+文案居中         │
   │                                                                    │
   │ ★ 配色已改为以本站 logo 为源的蓝轴（见下方 :root 注释），           │
   │   上面这三处绿/褐/橙不再使用。                                      │
   └──────────────────────────────────────────────────────────────────┘

   ★ 唯一一处「必须偏离参考站」的地方
     参考站 banner 是深色木纹照，白字可以直接压。
     我们的车间照实测 p90≈230（白墙+顶棚），白字压上去糊成一片。
     处理：不做全幅压暗（那会把照片压成灰块，前面已经踩过三次），
     只在文字背后加一块**局部右下暗角**，其余画面保持原亮度。
   ============================================================================ */

/* ★ 全局重置只作用于首页 .home-d 容器。
   原因见文件头：同款重置若全局生效会把产品详情 / 新闻 / 案例页一起重置。
   box-sizing 与 text-size-adjust 保持全局（这两条线上 style.css 已有等价物，不冲突）。 */
.home-d,.home-d *,.home-d *::before,.home-d *::after{box-sizing:border-box}
body.home-d-page{
  /* ── 深色底：从 logo 深蓝 #185098 沿同色相拉暗，不取中性灰 ───────────
     ★ 2026-10-27 第二轮上色。原为纯中性灰（#181818/#1f1f1f/#161616…），
       实测全站 50 档灰的 S 全为 0 —— 页面读起来「不像品牌站」就是因为这个：
       只有按钮和小字带蓝，最大的六块面积完全不带品牌调。

     ★ 曲线是量出来的，不是调的。用 CIE Lab 色差算「多大幅度才看得见」：
         #181818(L=9) 上 S=15 → ΔE 3.3（几乎不可辨）
         #181818(L=9) 上 S=44 → ΔE 9.0（明确可辨）
       而如果把同样的 S 给浅灰文字：
         #7b7b7b(L=48) S=15 → ΔE 13.5，#5a5a5a(L=35) S=44 → ΔE 19.9
         → 中间灰会变成「蓝色字」，像超链接。
     ★ 所以是四段式，不是全站一刀切：
         L ≤ 15        深色底       H=214  S=44
         15 < L ≤ 26   深色文字     S 44→0 线性（只沾一点蓝，不能是蓝字）
         L > 26        中间/浅灰    S=0 不动（正文与辅助文字保持中性）
     ★ 为什么文字保持中性：底色带品牌调 + 文字纯中性 = 工业站质感；
       文字也上色会同时出现「蓝底 + 蓝字」，对比度下降且显廉价。
     ★ 页面里若还有写死的 rgb 渐变叠加层（如照片底边过渡），必须同步改，
       否则会在新底色上留一条旧灰色 —— 已踩过（见 .cap-band::after）。 */
  --dark:#0d1723;      /* 卡片墙 / 深色能力区 / 行动条：L=9 原 #181818 */
  --dark2:#111d2d;     /* 新闻区：L=12 原 #1f1f1f */
  --line:#212d3d;      /* 发丝线：L=18 原 #2f2f2f */
  --gray:#7b7b7b;
  --gray2:#696969;
  --gray3:#a3a3a3;
  --gray4:#7b7b7b;   /* ★ 原 #454545（1.85:1）在深色底上不可读，触屏无 hover 永远看不到，改 4.2:1 */
  --white:#fff;

  /* ── 强调色：一律从 logo 取，不用参考站的绿/褐/橙 ─────────────────────
     logo 实测主色（alpha>200 的像素做量化统计）：
       #302828  近黑   42.6%  ← logo 字色（偏暖，H=0° S=9%，故未纳入蓝轴）
       #185098  深蓝   36.6%  ← 主品牌色，深色底就是从它拉暗得来
       #18b8e8  亮青蓝  8.6%  ← logo 箭头高光
     主强调色采用客户指定的 #1abbef（与 #18b8e8 同族，更亮一档，小面积用更醒目）。
     全部色值落在这条蓝轴上，不再出现绿、金褐、橙。 */

  --brand:#1abbef;      /* 主强调色：按钮、编号、活动下划线、链接 hover */
  --brand-d:#0e8fc4;    /* 主色压下 18%：深底上的 hover（白底上只有 3.66:1，不能当正文色） */
  --brand-dk:#0a6f99;   /* ★ 白底上的品牌蓝文字色：5.60:1（#1abbef 只有 2.23，#0e8fc4 也只有 3.66）
                           用于导航当前项（线上选择器 body.home-d-page .main-nav a.on）—— 品牌色本身不动，只把「文字」压暗 */
  --brand-l:#63d4f7;    /* 主色提亮：深底上的正文强调、数字 hover */
  --brand-deep:#185098; /* logo 深蓝：浅底上的小标题 */
  --brand-ink:#0b3a5c;  /* ★ 亮蓝底上的文字色。实测对比度：
                           #1abbef 底 5.30:1、hover #63d4f7 底 6.93:1，两态都过 4.5
                           （白色只有 2.23:1，深蓝 #185098 也只有 3.56:1，都不合格） */

  --sans:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",sans-serif;
  --mt:"Montserrat","Bahnschrift","DIN Alternate","Segoe UI",sans-serif;
}
/* ★ 首页底色：方案 D 是深色底（.cards / .focus / .more / .news 全是深色），
   所以 body 必须跟着变深，否则窄屏裁切或末帧会闪白。
   ★ font-size 13px 是方案 D 的基准（原型的实测字号体系都建在 13px 上），
   线上 style.css 是 15px —— 所以这条必须覆盖，否则所有相对字号会放大一档。 */
body.home-d-page{
  margin:0;
  background:var(--dark);
  color:var(--gray);
  font-size:13px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  /* 首页是深色底，滚动条也换成深色，避免右侧一条亮白 */
  color-scheme:dark;
}
/* 基础元素重置（限定 .home-d，理由同上）。
   ★ 页头 / 页脚不在 .home-d 内，它们沿用线上 style.css 的既有规则，
     这里一条都不碰 —— 页头的下拉、吸顶、移动端 toggle 都靠那套。 */
.home-d img{display:block;max-width:100%}
.home-d a{color:inherit;text-decoration:none}
.home-d h1,.home-d h2,.home-d h3,.home-d h4,
.home-d p,.home-d dl,.home-d dd{margin:0;padding:0}
.home-d ul{margin:0;padding:0;list-style:none}
/* ★★★ ul 的归零会连 .w1200 的居中一起吃掉，必须补回。
   .home-d ul 特异性 (0,1,1)，比 .w1200 的 (0,1,0) 高一位 —— 哪怕 .w1200 写在
   这个文件更前面也一样被压。实测症状：卡片组 ul.w1200 拿到 x=0、宽 1200，
   1440 视口下左边距 0、右边距 240，整组贴在左边，而 li 内部图与文字各自居中
   → 看起来像「三个卡片没居中」。凡 <ul class="w1200"> 都靠这条救回来。 */
.home-d ul.w1200{margin-left:auto;margin-right:auto}
.w1200{width:1200px;margin:0 auto;position:relative}
/* ★ 线上 footer.php 的容器是 <div class="wrap ft-wrap">，不是 .w1200。
   宽度规则与 .w1200 完全一致（max-width:1200 + 20px 内边距），
   这里把它对齐到 .w1200，页脚三段的 geometry 才和方案 D 的实测值一致。
   ★ padding 必须是 0：.wrap 自带 0 20px，而 .ft-main 的 1200 宽是按
   「无内边距」实测的，留着会让内容窄 40px、四栏挤压。 */
.site-footer > .wrap{
  width:1200px;max-width:1200px;margin:0 auto;padding:0;position:relative;z-index:1;
}
@media (max-width:1248px){
  .site-footer > .wrap{width:100%;max-width:1200px;padding-left:24px;padding-right:24px}
}
@media (max-width:768px){
  .site-footer > .wrap{padding-left:20px;padding-right:20px}
}
@media (max-width:360px){
  .site-footer > .wrap{padding-left:16px;padding-right:16px}
}
/* 容器宽度：PC 固定 1200，窄屏改为流式（左右各留 24 / 20 / 16） */
@media (max-width:1248px){ .w1200{width:100%;padding-left:24px;padding-right:24px} }
@media (max-width:768px){ .w1200{padding-left:20px;padding-right:20px} }
@media (max-width:360px){ .w1200{padding-left:16px;padding-right:16px} }

/* ============================ ① 页头 ============================
   ★★★ 2026-10-27：整整一段页头覆盖被**删掉了**，这里只剩说明。

   为什么删：
   之前这里有一套 body.home-d-page 前缀的页头规则（--hdr-h:80px、导航 14px/700、
   下划线 bottom:24px、移动端 60px……），而 style.css 里是另一套（88px/15px·500/阴影）。
   首页因为多带一个 body 类，命中的是这套；其它页命中的是 style.css 那套。
   → 同一个 .site-header，两个页头。用户一眼看出「首页导航栏和其它页面样式不一」。

   为什么不靠「两边写一样」收口：
   两份参数即使完全一致，也仍然会在下一次改一处时再次分叉，
   而且 body 前缀让特异性高一位，style.css 里任何断点都会失效
   （实测：手机上 style.css 的 --hdr-h:68px 被这里的 60px 压住，页头矮 8px）。
   → 正确做法是**只留一份**。页头是全站共用组件，参数归 style.css；
     首页如果需要继承深色变量，靠 body.home-d-page 上的 :root 变量就够了，
     不需要重写页头的任何一条几何。

   ★ 判据：一个组件的样式只应该有一个归属文件。
     出现「第二份覆盖」，说明第一份的位置不对，而不是需要第二份。 */
/* ============================ ② Banner 轮播（图内自带文案） ============================
   ★ 设计依据（三条都是量出来的，不是估的）
   1) 线上 banner 是 1920×760 的**成品设计图，文案已经印在图上**
      （「视觉定位UV打印机」「DLI-1819s」「超宽幅UV平板打印机」是图片像素，
       不是 HTML 文字）。所以：
        · 图上**不能再叠任何文字**，否则和图中文字撞车
        · 图上**不能再压暗**，否则把图里的文案和机器一起压灰
      → 删掉前一版的 .top-shade / .top-edge / .top-tag 三件套
   2) **高度必须等比，不能强制 677**。实测 1440 视口下按 677 走 cover：
      图被放大到 1710 宽、左右各裁 135px，图中文案 x=120 → 落到 x=-28，**直接被裁掉**。
      于是改用 aspect-ratio:1920/760（沿用线上做法），1440 视口自然高 = 570。
   3) 裁切风险的权衡：等比是唯一能保证「三张图文案都不丢」的方案。
      代价是 1440 下高 570，比参考站的 677 矮。
      但既然图里已有文案，互动重点本来就在图上，不靠字号撑。

   ★ 与下方卡片的压叠关系：卡片上移量从 303 降到 130。
      沿用「卡片压住 banner 下缘」这个识别点，但压到 303（= 100%）会把图底部一半吃掉，
      而三张图的底部都有机器底座/地面，压太多反而碎。
      130 相当于盖住 banner 高度的 23%，既能看出「悬浮」，又不伤图。 */
.top{
  /* ★ margin-top 必须为 0：线上页头是 sticky（在文档流内），不像原型是 fixed。
     写 80px 会在页头下方多出一条 #0d1723 深色空带（实测 y=81~161）。 */
  position:relative;margin-top:0;overflow:hidden;
  background:#0b3a5c;              /* 图未加载前的底色，沿用线上值，避免白闪 */
  aspect-ratio:1920 / 760;
  max-height:760px;
}
/* ★★ 2026-10-27 改成「整轨平移」（effect:'slide'），对齐参考站 www.dlican.com。
   ----------------------------------------------------------------------------
   原方案是「单张 opacity 交叉淡入 + 拖动时只有当前张跟手位移」。
   问题出在拖动手势上：当前张左移时，右侧**没有任何东西补进来**，
   直接露出一大块底色 #0b3a5c（见 v10_drag_mid.png），像「拖漏了」。
   → 判据：**淡入型 banner 天生不适合跟手拖拽**。
     跟手的前提是画面之间有空间连续性，淡入恰恰没有连续性。
     要么整轨平移，要么干脆不做拖拽。
   现在三张图常驻在轨道上（左 / 中 / 右三个槽位，环形排布），
   拖动 = 整条轨道平移，永远看得见下一张的边缘，不会再露底色。 */
.top-track{
  position:relative;width:100%;height:100%;
  /* ★ touch-action 必须是 pan-y（实测修正）。
     ★ 曾错误地以为 pan-y 会「让浏览器抢走横向手势」——实际相反：
       touch-action:pan-y 的意思是「浏览器只负责纵向，横向我不要」，
       所以横向拖动**不会**触发滚动/缩放，pointermove 会完整送达。
       实测对比：pan-y → 触屏滑动能收到完整采样并翻页；
                 none / auto → 前者禁掉纵向滚动（页面滑不动），
                 后者浏览器接管横向手势并直接发 pointercancel（只剩 2 个采样）。
     ★ 纵向手势由 JS 在前 6px 判定后主动放弃（见 pointermove 里的 my > mx 分支），
       不靠 CSS 兜。 */
  touch-action:pan-y;
  cursor:grab;
  /* 翻页 / 回弹是两个时长，由 JS 写这个变量切换（参考站 speed:1200） */
  --dur:0ms;
}
.top-track.is-drag{cursor:grabbing}
.top-slide{
  position:absolute;inset:0;display:block;
  pointer-events:none;
  /* 整轨平移：只做 transform，不再碰 opacity */
  transform:translate3d(0,0,0);
  transition:transform var(--dur) cubic-bezier(.22,.61,.36,1);
  will-change:transform;
  backface-visibility:hidden;
  /* ★ JS 落位前先藏起来。三张都在 translate3d(0) 时是叠着的，谁后写谁在上，
     不藏的话首帧可能闪一下第 3 张。
     ★ 但 .on 那一张不受影响 —— 这同时是 JS 失效时的兜底：没有 JS 也能看到第一张。 */
  opacity:0;
}
.top-track.is-ready .top-slide{opacity:1}
/* 拖动过程中必须关掉过渡，否则每一帧都在追过渡，手感发飘 */
.top-track.is-drag .top-slide{transition:none}
/* 只有当前张可点：相邻张在拖动中会露出一角，但那只是「预览」，不能点 */
.top-slide.on{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion: reduce){
  .top-track .top-slide{transition:none}
}
.top-slide img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  /* 禁用图片原生拖拽，否则鼠标按下拖的是「图片幽灵」，收不到 pointermove */
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none;
}

/* 左右切换：默认半隐，hover 明显（沿用线上做法，不与图中文案抢） */
.top-nav{
  /* 卡片不再压叠后，箭头回到垂直居中（原为避开卡片才上移到 42%） */
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:64px;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.22);color:#fff;border:0;border-radius:0;cursor:pointer;
  font-size:20px;line-height:1;opacity:0;z-index:3;
  transition:opacity .25s ease,background .2s ease;
}
.top:hover .top-nav{opacity:1}
.top-nav:hover{background:rgba(0,0,0,.5)}
.top-nav:focus-visible{opacity:1;outline:2px solid #fff;outline-offset:2px}
.top-nav.prev{left:18px}
.top-nav.next{right:18px}

/* 指示点
   ★ 卡片不再压叠 banner 后，圆点不再有被遮挡的风险，
     直接回到图内底部常规位置（原来要算「压叠量 + 16px」，现在不需要了）。 */
.top-dots{
  position:absolute;left:0;right:0;bottom:22px;
  display:flex;justify-content:center;gap:10px;z-index:6;
}
.top-dots button{
  width:10px;height:10px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.55);transition:background .2s ease,width .2s ease;
}
.top-dots button.on{background:var(--brand);width:26px;border-radius:0}
.top-dots button:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ============================ ③ 三张产品卡（banner 下方独立成块） ============================
   ★ 2026-10-26 改：用户否决「三张压叠在 banner 上」→ 去掉压叠，独立成带。
   原做法是照参考站的「卡片底边与 banner 底边齐平、浮在图上」，桌面 1440 下压 131px。
   实测不好看的根因：banner 是**浅底渐变图**（2513 亮青蓝 / 3350 近白 / 1819s 白墙），
   三张白卡压上去会出现两件事：
     ① 白卡压浅底 = 卡片轮廓消失，只剩底部的投影浮在图上，像贴错位置
     ② 卡片上沿直接切断图中的机器（2513 的机身、3350 的喷头横梁都被横切一刀）
   参考站能压是因为它的 banner 主体是深色照片，白卡边缘清晰。**版式不能脱离底色单独移植。**
   新做法：banner 完整露出 → 卡片在深色带上独立排列，靠「白卡 vs 深底」的对比浮起来。 */
.cards{
  position:relative;z-index:5;
  /* ★ 2026-10-27 上色时改：原与 .focus 同为 var(--dark)，
     上色后两者都是 #0d1723，从 y=650 到 1392 连续 742px 完全同色、无任何分界，
     三个逻辑不同的区块（产品 / 数据 / 图文）共用一个底色 = 三个视觉锚点消失。
     提亮到 var(--dark2)#111d2d（与新闻区同档，ΔE 4.1 = 明确可辨）：
     上浅下深，卡片墙「亮」在前、能力区「沉」在后，明度本身就是分界，不需要加线。
     A/B 另测过 1px 发丝线（太微弱，几乎看不见）与 #101b2a（ΔE 2.9，仍偏弱），均未采用。
     对比度复核：.cards 内文字全项 0 不达标。 */
  background:var(--dark2);
  padding:56px 0 64px;
}
.cards ul{
  display:flex;gap:8px;justify-content:center;
}
/* ★★★ 2026-10-27 第五次改：卡片语言向内页看齐（用户确认「向内页看齐」）
   ============================================================================
   原来这里是「白底 + 0 描边 + 0 圆角 + 常驻 0 2px 24px rgba(0,0,0,.10)」，
   而内页的产品卡 .pcard / 案例卡 .ccard 是
       「白底 + 1px #e6ecf1 发丝线 + border-radius:var(--radius) 4px + 常态无阴影」。
   同一站两套卡片定义，从首页点进产品列表会感觉换了一个网站。
   ---------------------------------------------------------------------------
   为什么向内页看齐、而不是把内页改成首页那样（两个方向都试算过）：
     · 改内页 = 要动 .pcard/.ccard/.sm-block 三处 + 4px 圆角现有的 49 处引用，
       回归面覆盖产品列表/案例/网站地图三个模板，风险高；
     · 改首页 = 只动这一个文件里的 3 张卡，回归面就是首页五档。
   ★ 判据：**两边都能对齐时，改引用少的那一侧。**
     这与「参数归被最多页面引用的那一份」是同一条 —— 首页只占 1/10 页面。
   ---------------------------------------------------------------------------
   阴影改成 hover 才出：
     内页卡片常态无阴影、hover 出 0 8px 26px rgba(10,111,153,.13)（品牌蓝投影）。
     首页当时跟着用了同一组值。
     ★ 该颜色在第六次改里被换掉：品牌蓝压在深蓝底上几乎无 ΔE，hover 等于没反馈。
     位移从 -6px 收到 -3px，与 .pcard/.ccard 的 hover 位移一致。
   圆角必须给「卡片本体 + 图槽」两处：
     .cards li 加了 overflow 吗？没有 —— 所以图槽会从卡片圆角里探出来四角，
     看起来像圆角被切掉。用 border-radius 继承不够（.ph 有自己的 overflow:hidden，
     继承的是 4px 但四角仍是直角边）。实测方案：li 上给圆角并 overflow:hidden。
   ---------------------------------------------------------------------------
   ★ 第五次改当时给这里加了 1px #e6ecf1 描边，第六次改已删（深底上是白描边，见下）。
     现在与内页共享的只有「白底 + 4px 圆角 + 常态无阴影 + hover 位移」，
     描边这一项**刻意不共享** —— 因为它依赖底色。 */
/* ★★★ 2026-10-27 第六次改：去掉白色描边（用户：首页这里不要加白色描边）
   ============================================================================
   上一版为了「与内页 pcard/ccard 统一」，给这里加了 `border:1px solid #e6ecf1`。
   内页卡片是**白底**，浅灰发丝线在白底上只用来区分相邻卡片，几乎看不见；
   但首页这块的父级是深色底（#111d2d），同一条浅灰线贴在深蓝上，
   对比度瞬间被拉开 —— 视觉上就是一圈发亮的白边，把卡片框成了「贴片」。
   ---------------------------------------------------------------------------
   ★ 判据：**颜色不能脱离底色移植。同一个「1px #e6ecf1」在白底是发丝线、
     在深底是白描边，是两种完全不同的东西。**
     这与「版式不能脱离底色移植」是同一条错误的两面 —— 我在别处记过，
     这次换到了「颜色」这个维度又犯了一遍。
   ---------------------------------------------------------------------------
   改法：删掉 border，卡片与深底靠「明度差」分离，不靠线。
     白卡 (#fff, L=100) 对深底 (#111d2d, L≈9) 的对比是 21:1，
     这个差距已经足够把卡片从背景里拎出来，加线是多余的。
   ★ 圆角 4px 保留：它在深底白卡上只是把四角磨圆，不产生任何亮边。
   ★ hover 阴影必须重算，不能继续用内页的品牌蓝 rgba(10,111,153,.13)：
     品牌蓝在深蓝底上 ΔE 极小，hover 等于没有反馈。
     深底上要让阴影有效，只能往「比背景更暗」的方向压 → 用黑色加深。
     实测深底 #111d2d 上 rgba(0,0,0,.42) 的下垂投影清晰可辨；
     .13 的品牌蓝则完全看不出。 */
.cards li{
  width:388px;flex:none;background:#fff;color:#6a6a6a;   /* 原继承 body 的 --gray=#7b7b7b，白底仅 4.23 */
  border:0;                                             /* ★ 深底上不加描边，靠明度差分离 */
  border-radius:4px;
  overflow:hidden;                                       /* 让图槽四角跟着卡片圆角走 */
  transition:transform .35s ease, box-shadow .35s ease;
}
.cards li:hover{
  transform:translateY(-3px);
  /* 深底专用：黑色下垂投影，比背景更暗才有「浮起」感 */
  box-shadow:0 14px 38px rgba(0,0,0,.42);
}
/* 图在上：宽高按原图的 4:3 定，不用固定高度。
   ★ 原设计是 392×212（1.85:1），那是按参考站的宽幅产品图定的。
     本站产品图是 768×576（4:3），塞进 1.85:1 的槽里 cover 会纵向裁掉 27%，
     机器上下被切、看着像没居中。
   ★ 而且 cover 在「宽度正好占满」时横向没有溢出余量，
     object-position 的 x 分量完全无效 —— 想让机器水平居中也没有调节空间。
   → 用 aspect-ratio 让槽跟着原图走：388 宽 → 291 高，零裁切、零变形，
     机器完整落在框里，上下留白自然对称。
     （同一条判据：超宽图塞竖槽 = 灾难，必须定 aspect-ratio。） */
.cards .ph{aspect-ratio:4/3;height:auto;overflow:hidden;background:#f2f2f2}
.cards .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.cards li:hover .ph img{transform:scale(1.035)}
/* ★ 2026-10-27 第二次改：白底回到原型高度 91px（用户：「还是让它变回这个样子吧」）
   ----------------------------------------------------------------------------
   第一次压矮（118.2 → 104）压得不够，用户拿原型截图要求复原。
   这次不再是「在 104 的基础上再压」，而是**直接回到原型原值**：
     padding 22px 20px 0 + 标题 30 + 描述 22.1 + 余量 = 91px。
   ★ 触底的关键条件：描述必须能装进一行。
     91 − 22(上) − 30(标题) − 2(margin) = 37px 可用；
     描述行高 1.7×13 = 22.1 → 只够一行，两行要 44.2 会被裁掉 7px。
     所以这次同时把三张卡的副标题改成「单行参数」
     （见 front-page.php：有 _dlican_specs 就取规格两值，不再退到 34 字摘要）。
     ★ 判据：白底能不能再压，取决于描述行数，不取决于想压多少。
       描述是 2 行时，91px 这个高度在数学上就装不下（差 7px）。
   ★ 用 height 而不用 min-height：三张卡的描述行数可能不一样，
     min-height 会让行数少的那张白底矮一截、下方露出空白色块。
   ★ 底部不留 padding（22px 20px 0）：文字块贴底，但高度已封顶，
     换行也不会把白底顶高——由 height 兜住，超出部分被裁剪。 */
.cards .bd{padding:22px 20px 0;text-align:center;height:91px}
.cards h3{
  font-size:20px;font-weight:700;color:var(--gray2);line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cards p{
  font-size:13px;font-weight:400;color:var(--gray2);line-height:1.7;margin-top:2px;
  /* 只留一行：白底 91px 是按单行描述算的，两行会溢出 7px 被裁成半个字。
     副标题在模板层已保证是「参数值1 · 参数值2」的短串（约 20 字内）。 */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ============================ ④ 深色区（我们的能力） ============================ */
/* ★★ 2026-10-27 第四次改版（用户连续三次指出这块不好看，第三次说「更难看」）
   ============================================================================
   三次被否的轨迹，看清楚才不会再犯：
     ① 第一次「左右不对称，右边太空」
        → 在右侧加三条竖线拉满 253px 高
     ② 第二次「空太多了」
        → 竖线把空白框成了三个空槽，于是改「三行横表 + 引导线」
     ③ 第三次「这的地方更难看了」
        → 五条水平线（2 行分隔 + 3 引导线），而且引导线 449px 长、末端离标签
          还有 42px，是断头线；三个 54px 数字等权，读起来像一张**没填完的空表**
   ---------------------------------------------------------------------------
   实测数据（1440 视口）：
     · 容器 1200×443，右侧数据块定宽 660px，而内容只占 150px → **横向空 510px**
     · 三个数字等权 → 没有焦点，读成「三个数」而不是「一条结论」
     · 引导线 449 / 478px，标签仅 44 / 43px 宽 → 线的长度是内容的 10 倍
   ★★★ 结论：**这一节的信息量（3 个数字 + 1 段文案）撑不起 443px 的高度。**
     在这种不匹配下加任何装饰都只会放大它 —— 线画得越整齐，越像一张空表。
     所以这次不动线条，动三件更底层的事，全部是「减」：
       ① 节高 443 → 319：padding 94/96 砍到 56/60，让密度与内容量匹配
       ② 右侧放弃 660 定宽 → flex:1 + 三栏各 flex:1 均分铺满，横向空档 510 → 68
       ③ 横线与引导线**全部删除**，只留左文与数据之间那一条竖线（唯一结构线）
   ★ 数字从 54px 提到 78px、颜色 #7b7b7b 提到 #d2d2d2：
     三栏均分后每栏 234px，78px 的「36000」宽约 200px，刚好顶住栏宽。
     **让内容自己把栏填满，才是真的不空** —— 这比画线有效得多。
   ★ 对齐取 align-items:center（A/B 实测）：
     flex-end 时数字底边贴容器底，1024 档左文变高后下方会空出一截；
     center 让数字组的视觉中线与左文中线重合，两个断点都匀。
   ============================================================================ */
.focus{background:var(--dark);padding:56px 0 60px}
.focus-in{display:flex;align-items:center;gap:0}

.focus-l{width:392px;flex:none}
.focus-l h2{font-size:26px;font-weight:400;color:var(--gray);line-height:1.42;letter-spacing:.02em}
.focus-l h2 em{display:block;font-style:normal;color:var(--brand);font-size:23px;margin-top:4px}
.focus-l h3{font-size:15px;font-weight:400;color:#8a8a8a;margin-top:15px;letter-spacing:.03em}
/* ★ 正文原为 #6a6a6a = **3.28:1**，12.5px 正文需 4.5:1，不达标 → #858585 = 4.81:1。
   这条是改版时顺手修掉的既有缺陷（不是本次需求）。 */
.focus-l p{margin-top:13px;font-size:13px;line-height:1.98;color:#858585;max-width:370px}

/* 唯一的结构线：竖直贯穿整节，把左文与数据分开 */
.focus-div{width:1px;flex:none;background:#1f2c3d;align-self:stretch;margin:2px 0 2px 52px}

/* 数据区：flex:1 吃掉左文与竖线之外的全部宽度，再由三栏均分 */
/* ★★★ 数字字号走 CSS 变量 --fs，各断点只覆盖变量、不写 .fstat b 规则。
   为什么：线上 stats 是 4 条而原型是 3 条，需要 `.focus-r.is-4 .fstat b` 这种
   高特异性选择器定向压字号。它的特异性是 (0,3,1)，会压住后面所有断点里的
   `.fstat b{font-size:XX}`（(0,1,1)，无论位置多靠后）——实测 1024 档因此
   被 62px 顶穿栏宽 40px，且会连带压掉 768 档的 40px、430 档的 36px。
   改成变量后，断点只需要在 `.focus-r` 上覆盖 --fs，特异性问题整体消失。 */
.focus-r{
  margin-left:52px;flex:1 1 auto;display:flex;align-items:center;padding-right:24px;
  /* ★ min-width:0 必须写：flex-basis:auto 时下限是内容宽度，
     1024 档会被撑到 517 而容器只给 479 → 横向溢出 14px（实测）。 */
  min-width:0;
  --fs:78px;      /* 默认三栏时的数字字号（原型值） */
}
/* ★ 三栏均分，但**内容右对齐**（A/B 实测的结论，不是随手选）：
     左对齐时「36000」占满 83% 栏宽，与「300」只剩 40px，
     而「300」与「10」之间空 118px → 数字间隙极差 78px，肉眼就是「前两个挤、后一个大空」。
     右对齐后极差降到 39px，且三个数字右沿与三个标签右沿各自成一条直线（实测完全重合）。
   ★ 为什么一定要 padding-right:24px：右对齐后末位数字的右沿会**正好贴在容器右沿**
     （实测 0px），视觉上像被裁掉；24px 恢复呼吸，与左文 120px 的左内边距对称感一致。 */
/* ★ 4 项数据时的字号收敛（线上 stats 是 4 条，原型是 3 条）。
   .focus-r 在 1440 下可用宽约 680px，4 栏各 170px；
   78px 的「36000」实测需约 200px → 会溢出到相邻栏。
   62px 时约 159px，栏内留 11px，是四栏均分的上限。
   （三栏时 78px 正好，所以不能一刀切改小）
   ★ 只覆盖变量 --fs，不写 .fstat b{...}：见 .focus-r 处的说明。 */
.focus-r.is-4{--fs:62px}
.focus-r.is-4 .fstat span{margin-top:11px}
.fstat{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:flex-end}
.fstat b{
  font-family:var(--mt);font-size:var(--fs);font-weight:400;line-height:.84;
  color:#d2d2d2;letter-spacing:-.035em;                   /* 11.74:1 */
  font-variant-numeric:tabular-nums;
  transition:color .4s ease;
}
/* 标签：小字 + 大字距，工业站的「机读感」。
   ★ 不用 text-transform:uppercase —— 中文无效，且这里本来就没有拉丁字母。 */
.fstat span{
  margin-top:13px;font-size:13px;font-weight:700;color:#8f8f8f;  /* 5.49:1 */
  letter-spacing:.1em;line-height:1;
}
.fstat:hover b{color:var(--brand-l)}

/* ============================ ⑤ 能力四栏 + 图带 ============================ */
.cap{background:#fff;padding-top:74px}
.cap-hd{text-align:center}
/* ★ 删掉 .en（MANUFACTURING）后，中文标题必须自己承担标题权重。
   原来它是 30px/400 的细体，靠上面那行 30px 英文撑气派；英文一走，
   30px 细体孤零零挂在 1440 宽的页面中间会显得很虚。
   改为 34px/500 + 深一档颜色，并补一条 40px 品牌蓝短横做视觉支点。 */
.cap-hd h2{
  font-size:34px;font-weight:500;color:#212d3d;line-height:1.45;
  letter-spacing:.01em;
}
.cap-hd h2::after{
  content:"";display:block;width:40px;height:2px;
  background:var(--brand-deep);margin:18px auto 0;   /* 白底上亮青蓝偏荧光，深蓝更稳 */
}
.cap-hd .sub{font-size:13px;color:#6f6f6f;margin-top:16px}   /* #9a9a9a 白底仅 2.81 → 5.02 */

.cap-grid{
  margin-top:50px;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid #ececec;
}
.cap-it{
  padding:34px 28px 40px;border-right:1px solid #ececec;position:relative;
  transition:background .35s;
}
.cap-it:last-child{border-right:0}
.cap-it:hover{background:#fafafa}
.cap-it .no{
  font-family:var(--mt);font-size:13px;font-weight:600;color:var(--brand);
  letter-spacing:.1em;line-height:1;
}
.cap-it h3{font-size:17px;font-weight:700;color:#3c3f42;margin-top:14px;line-height:1.5}
.cap-it p{font-size:13px;color:#6a6a6a;line-height:1.9;margin-top:9px}   /* #8a8a8a 白底 3.45 → 5.41 */

/* 图带：整幅出血。
   ★ 渐变要足够浓才压得住亮天空（这张厂区图下缘是车顶和树，上缘天空 p90 很高）。
   ★ z-index：::after 必须低于 .tx，否则文字被渐变盖掉变灰。 */
.cap-band{position:relative;margin-top:12px;height:430px;overflow:hidden;background:#0a1018}
.cap-band img{width:100%;height:100%;object-fit:cover}
/* ★ 原来的 190px 底部渐变是为了托住「SHENZHEN DINGLI DIGITAL · 36000 ㎡」这行英文，
   用户要求去掉英文后，渐变也没必要压这么重——压到 190px 等于把厂区照片下半截糊掉。
   降到 90px 只做「照片与下方深色区的软过渡」，照片主体完整保留。 */
.cap-band::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:90px;z-index:1;
  pointer-events:none;
  /* ★ 必须用 var(--dark) 而不是写死 rgb：这条渐变是把照片底边「融进」下方深色区，
       写死中性灰时，底色一旦带蓝就会出现一条灰带贴在照片下沿。
       2026-10-27 上色时踩到过一次（原为 rgba(24,24,24,.35/.9)）。
       color-mix 在老浏览器会整体失效 → 用两层叠加 + 固定 rgba 通道值更稳，
       这里直接取 --dark 的 rgba 等价写法：rgb(13,23,35) = #0d1723 */
  background:linear-gradient(to bottom,
    rgba(13,23,35,0) 0%, rgba(13,23,35,.35) 55%, rgba(13,23,35,.9) 100%);
}

/* ============================ ⑥ 站内行动条（原三个蓝色大块） ============================
   ★ 2026-10-26 改：用户说「三个蓝色卡片换成别的」。
   诊断：这块是整页**颜色最响**的元素（3 × 392×163 满饱和 #1abbef，合计 192000px² 纯色），
     但承载的是**最次要**的内容（三个导航入口：看机型 / 看客户 / 下画册）。
     响度和内容价值完全倒挂 —— 视线在 2365px 处被一块荧光蓝截断，
     而这只是「去找别的页面」，不是页面的主张。
   还有两个结构问题：
     ① 满饱和蓝块 + 直角 = 和本版「无卡片无阴影无圆角靠发丝线分块」的语言冲突
     ② 三块之间 8px 缝隙，读起来像三个并列的广告位，不像一组动作
   改法：一条横排行动条 —— 深色底、三栏等分、栏间 1px 发丝线、
     图标降为 22px 线性细描、文字主次两级（中文动作 + 英文类型已删）、
     右端一个小箭头，hover 时箭头右移 3px + 文字转品牌亮蓝。
   信息量不变，颜色占用降到原来的 1/40，且和深色区/页脚同一套分块逻辑。 */
/* 顶边不再加 border：上方 .cap-band 的底部渐变已收到 #0d1723，
   再加一道 1px 线会和渐变的收口撞成两道边界 */
.more{background:var(--dark);padding:0}
.more-in{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--line);
}
.act{color:#858585;   /* 原继承 --gray=#7b7b7b，深底 4.26 未过 4.5 */
  position:relative;
  display:flex;align-items:center;gap:18px;
  /* ★ 右侧不写死 34px：.t 会 flex:1 撑满，箭头被顶到最右端和文字隔一大片。
     改成「整条内容居中偏左」，箭头紧跟文字块（.t 不再 flex:1，给它自然宽度）。 */
  padding:34px 0 34px 34px;
  border-left:1px solid var(--line);
  transition:background .3s ease;
}
.act:first-child{border-left:0}
.act:hover{background:#101b2a}
.act svg{
  width:22px;height:22px;flex:none;
  fill:none;stroke:#6f6f6f;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .3s ease;
}
.act:hover svg{stroke:var(--brand)}
/* ★ 不写 flex:1：否则箭头被推到最右端。写 max-width 兜住长文案即可 */
.act .t{min-width:0;max-width:calc(100% - 90px)}
.act .t b{
  display:block;font-size:15px;font-weight:600;color:#c8c8c8;
  line-height:1.4;transition:color .3s ease;
}
.act:hover .t b{color:#fff}
.act .t i{
  display:block;font-style:normal;font-size:12px;color:#858585;   /* #5f5f5f 深底仅 2.83 → 4.89；默认值必须达标，不能只靠 hover */
  line-height:1.5;margin-top:3px;transition:color .3s ease;
}
.act:hover .t i{color:#c8c8c8}   /* hover 再提亮一档，但仍守住 4.5 以上 */
/* 箭头紧跟文案（不用 margin-left:auto —— 那会把它顶到栏最右端，
   和文字之间空出一大截，读起来像两个不相干的元素），hover 右移 3px */
.act .ar{
  flex:none;margin:0 34px 0 2px;
  font-size:15px;color:#858585;line-height:1;   /* #4a4a4a 深底 2.04 → 4.89 */
  transition:color .3s ease,transform .3s ease;
}
.act:hover .ar{color:var(--brand);transform:translateX(3px)}

/* ============================ ⑦ 新闻 + 联络 ============================ */
.news{background:var(--dark2);border-top:1px solid var(--line);padding:66px 0 70px}
.news-in{display:flex;gap:0}
/* .ncol 是 .news-in 的 flex 子项、被 stretch 拉到与右侧表单等高 */
.ncol{width:640px;flex:none;display:flex;flex-direction:column}
/* ★★ 2026-10-27 定稿：摘要改**单行**后，每行 104px（内 52 + 上下 padding 26×2）。
   1440 实测：nlist 520px、表单 582.4px，底部靠行内 padding 吸收，两边底边同为 3148.2 ✓
   ★ 试过且**无效**的方案（别再试）：
     `.nlist{flex:1}` —— nlist 实测仍是 473.6px。
     根因：.ncol 只被 stretch 拉高、自身高度是 auto，
     flex:1 在「高度不定」的容器里拿不到剩余空间，等于没写。
   → 改用最笨但最稳的：把余量摊进行高（行内 padding:26px）。
     优点：不依赖任何高度传递链，桌面/中屏都成立；
     手机端由 ≤768 段的 padding:17px 覆盖，不会继承这里的 26px。 */
.nlist{min-height:470px}
.nhd{
  display:flex;align-items:baseline;justify-content:space-between;
  padding-bottom:20px;border-bottom:1px solid var(--line);
}
.nhd h2{font-size:23px;font-weight:400;color:#c8c8c8;letter-spacing:.02em}
/* 原来是等宽字体 + 大字距，专为「MORE +」这类英文；改中文后收回字距 */
.nhd a{font-size:13px;color:var(--gray3);letter-spacing:.02em}
.nhd a:hover{color:var(--brand-l)}
/* ★ 2026-10-27：新闻条补摘要（用户截图指出「标题下面空余位置」太空）
   ----------------------------------------------------------------------------
   诊断（改前实测，1440）：一行 94px = 日期块 51px + 标题 24.5px，
         而标题上下还有 21+21 = 42px padding，
         剩下的 26.5px 是 **flex 默认 align-items:stretch 把 h3 拉到和日期块等高** 撑出来的。
         也就是说：空白的直接成因是「行里只有 9~15 个字」，不是 padding 给多了。
   ★★ 判据：一行里文字只占行高的 1/4，加任何装饰线/背景都只会把空白框得更显眼，
     唯一正解是**往行里塞真实内容**（摘要），让文字自己把行填满。
   ★ 改后实测（1440）：行 104px = 26(上 pad) + 25(标题) + 4(间距) + 19.2(摘要一行) + 26(下 pad)
     5 行 520px，与右侧表单 582.4px 底边齐平（nlist 因被 stretch，实际同为 3148.2）。
   ★ 日期块必须 align-self:flex-start：它和文字列在同一个 flex 行里，
     不写就还是 stretch，日期块会被拉到整行高、日期上下飘。 */
.nlist a{
  display:flex;gap:22px;padding:26px 0;border-bottom:1px solid #142234;
  align-items:flex-start;               /* ★ 关键：不 stretch，两列各自按内容高 */
  color:#8a8a8a;
  transition:padding-left .3s ease;
}
.nlist a:hover{padding-left:8px}
.nlist .d{
  width:74px;flex:none;align-self:flex-start;
  font-family:var(--mt);font-size:12px;color:#8a8a8a;
  line-height:1.5;text-align:left;
}
.nlist .d b{display:block;font-size:22px;font-weight:400;color:#8e8e8e;letter-spacing:.01em}
/* 文字列：标题 + 摘要。★ 必须给 width/flex:1，否则 flex 子项会被内容宽度撑开
   （和「.wrap 当 flex 子项会被压缩」是同一类坑，方向相反但都要显式定尺寸） */
.nlist .txt{flex:1 1 0;min-width:0}
.nlist h3{
  font-size:14px;font-weight:400;color:#9c9c9c;line-height:1.75;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .3s;
}
/* 摘要：只显示一行，字号比标题小一档（用户要求：「字号缩小不要超过标题，只显示一行」）。
   ★ 层级关系必须成立：h3 14px > ex **12px**。原来写 13px 只比标题小 1px，
     在深底灰字上几乎看不出区别，摘要会跟标题抢焦点。
   ★ 单行 → 用 nowrap + ellipsis，不用 clamp。
     clamp:1 在 Chrome 里会退化成 flow-root，省略号不一定出现；
     nowrap 的 text-overflow:ellipsis 是稳定的，而且行高固定 = 一行。
   ★ 深底 #111d2d 上 #8a8a8a = 4.92 ✓（12px 属正文尺寸，需过 4.5）。 */
.nlist .ex{
  display:block;
  margin-top:4px;font-size:12px;font-weight:400;color:#8a8a8a;line-height:1.6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .3s;
}
.nlist a:hover h3{color:#e2e2e2}
.nlist a:hover .ex{color:#a8a8a8}

.cta{width:480px;flex:none;margin-left:auto;padding-left:64px;border-left:1px solid var(--line)}
.cta .k{
  /* 原来是 font-family:var(--mt) + letter-spacing:.34em + uppercase，专门服务「sample request」
     这类英文小标签。改成中文后不需要这些，改用品牌蓝 + 一根短横做小标题标记。 */
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;color:var(--brand);letter-spacing:.08em;
}
.cta .k::before{content:"";width:16px;height:1px;background:var(--brand);flex:none}
.cta h3{font-size:26px;font-weight:400;color:#d6d6d6;line-height:1.6;margin-top:16px}
/* ★ #6a6a6a 在 #111d2d 底上只有 3.14:1（13px 正文要 4.5）→ #8a8a8a = 4.92 */
.cta-sub{font-size:13px;color:#8a8a8a;line-height:1.9;margin-top:12px}

/* ── 打样 / 留言表单 ────────────────────────────────────────────────
   设计原则：沿用深色区「无卡片、无圆角、靠发丝线分块」的语言，
   输入项只留底部 1px 线，不加外框、不加阴影。
   标签用 11px 字距 .18em（与 .k / dt 同一套），值用 15px，
   聚焦时底线由 #212d3d → --brand，这是唯一的交互反馈。 */
.lead-form{margin-top:26px}
.lf-row{position:relative;padding-top:20px}
.lf-row label{
  display:block;font-size:12px;color:#8a8a8a;letter-spacing:.18em;   /* #6a6a6a 深底 3.14 → 4.92 */
  font-family:var(--mt);text-transform:uppercase;margin-bottom:7px;
}
.lf-row label i{font-style:normal;color:var(--brand);margin-left:3px}
.lf-row input,
.lf-row select{
  width:100%;height:40px;padding:0 0 8px;border:0;
  border-bottom:1px solid #27313f;background:transparent;
  color:#e0e0e0;font-family:var(--sans);font-size:15px;line-height:1.4;
  border-radius:0;outline:none;appearance:none;
  transition:border-color .25s ease;
}
.lf-row select{
  cursor:pointer;
  /* 自绘箭头，避免各浏览器原生控件破坏深色区的统一感 */
  background-image:linear-gradient(45deg,transparent 50%,#7b7b7b 50%),
                   linear-gradient(135deg,#7b7b7b 50%,transparent 50%);
  background-position:calc(100% - 6px) 17px, calc(100% - 1px) 17px;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.lf-row select option{background:#111d2d;color:#e0e0e0}
.lf-row input::placeholder{color:#858585}   /* #4e4e4e 深底 2.04 → 4.60 */
.lf-row input:focus,
.lf-row select:focus{border-bottom-color:var(--brand)}
.lf-row input:focus::placeholder{color:#323942}
/* 未选中的 select 显示成 placeholder 一样淡 */
.lf-row select.is-empty{color:#858585}   /* 占位态必须可读 */

/* 错误提示：默认不占位，出错才出现 */
.lf-err{
  font-size:12px;color:#e2564b;line-height:1.5;margin-top:5px;
  max-height:0;overflow:hidden;transition:max-height .2s ease;
}
.lf-row.bad .lf-err{max-height:40px}
.lf-row.bad input,.lf-row.bad select{border-bottom-color:#e2564b}

/* 提交按钮：与绿按钮同一套语言（直角、通栏），但矮一些 */
.lf-submit{
  width:100%;height:52px;margin-top:26px;border:0;border-radius:0;
  background:var(--brand);color:var(--brand-ink);
  font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:.06em;
  cursor:pointer;transition:background .25s ease;
}
.lf-submit:hover{background:var(--brand-l)}
.lf-submit:disabled{background:#1b293b;color:#666;cursor:not-allowed}
.lf-note{font-size:12px;color:#8a8a8a;line-height:1.7;margin-top:12px}   /* #565656 深底 2.31 → 4.92 */
.lf-note a{color:#9a9a9a;border-bottom:1px solid #323942}   /* #7a7a7a 3.95 → 6.03 */
.lf-note a:hover{color:var(--brand-l)}

/* 提交后的成功态 */
.lf-done{display:none;padding:22px 0 4px}
.lf-done .ok{
  display:flex;align-items:center;gap:10px;
  font-size:16px;color:#e0e0e0;letter-spacing:.02em;
}
.lf-done .ok svg{width:22px;height:22px;stroke:var(--brand);fill:none;stroke-width:2}
.lf-done p{font-size:13px;color:#8a8a8a;line-height:1.9;margin-top:10px}   /* #7a7a7a 3.95 → 4.92 */
.lead-form.done .lf-row,
.lead-form.done .lf-submit,
.lead-form.done .lf-note{display:none}
.lead-form.done .lf-done{display:block}

/* ★ 2026-10-27 删：原来这里有一条 .cta-foot（表单下方「电话 / 手机 / 邮箱」横排），
   用户指出「太多的重复项了」。确实三重重复：
     ① 紧邻的 .lf-note 已写「急单直接打 0755-2721 9869」
     ② 页脚 .ft-bar 已有「电子邮箱 info@dlican.com」
     ③ 页脚第四栏已有三个号码（销售热线 / 直销 / 售后）
   删掉后表单区只留 .lf-note 一处紧急联系方式，信息不丢且不再重复。
   （189 2930 3547 仍出现在页脚「售后服务」，info@dlican.com 仍在页脚横条） */

/* ============================ ⑧ 页脚（沿用线上现有版式） ============================
   ★ 2026-10-26 改：原型原来是自己画的三栏极简页脚，被用户否「没现有的好看」。
      现直接复刻线上 style.css 的 .site-footer 三段式：
        ① 上排 grid: 220px 品牌 | 700px 四栏菜单 | 168px 二维码
        ② 联系信息横排（邮箱 / 地址 / 办公时间），上下各一道 1px rgba(255,255,255,.09)
        ③ 底排：版权 / 网站地图 / 备案号
     版式沿用线上（三段式结构不动），配色 2026-10-27 两轮调整：
       原深蓝渐变 linear-gradient(160deg,#0e2130,#17374f 52%,#0b1c29) +
       蓝色顶沿高光 + 右上蓝光  →  ① 先去色（用户要黑灰）→ ② 再按 logo 色轴回蓝。
       具体换色：深蓝底 → #0c1520→#070b11 渐变；短横蓝 → #c8c8c8
   ★ 线上页脚为什么值得保留（它的注释里写了原因，是对的）：
      - 品牌区放整行会让页脚从 440 撑到 600，四栏被拉到每栏 290px 而最长链接只有 90px，中间大片空白
      - 「销售热线 + 号码」在 145px 栏里必然折两行，其它三栏都是单行短链接 → 四栏底部参差
        → 抽出来做横排联系条，四栏只剩链接，高度天然齐平 */
.site-footer{
  position:relative;overflow:hidden;
  /* ★ 2026-10-27 改：原为线上那套深蓝渐变 linear-gradient(160deg,#0e2130,#17374f,#0b1c29)，
     用户否「颜色不合适，黑灰色会不会好一点」→ 先改中性灰，再按 logo 色轴上蓝。
     取「比新闻区 #111d2d 明确更深一档」——三段深色区块共用 #0d1723 时会连成
     977px 无边界（见设计诊断问题 1），页脚若再贴着 #111d2d 就重复同一个病。
     这里从 #0c1520 压到 #070b11，比新闻区低 9~19 级，靠明度一步落下收住整页。
     渐变角度 170deg（接近垂直）：横向拉斜会显脏，竖直变暗才像「页脚收尾」。 */
  background:linear-gradient(170deg,#0c1520 0%,#090f17 55%,#070b11 100%);
  color:#a8a8a8;font-size:14px;
}
/* ★ 首页页脚改用方案 D 配色（#0c1520→#070b11），其它页面仍是线上那套深蓝渐变。
   这样首页与 .more/.news 三个深色区块形成一条完整的明度阶梯，
   切到别的页面时页脚回到原来的品牌蓝，不影响品牌一致性。 */
body.home-d-page .site-footer::before{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 20%,rgba(255,255,255,.16) 80%,transparent);
}
body.home-d-page .site-footer::after{
  background:radial-gradient(circle,rgba(255,255,255,.045),transparent 68%);
}
/* 顶沿细高光：和上方新闻区（#111d2d）分界。用极淡白而非品牌蓝——
   蓝线在深蓝底上会跳出来抢眼，白线只是一道「边界」。 */
.site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 20%,rgba(255,255,255,.16) 80%,transparent);
}
/* 右上角一团极淡白光，避免大片深蓝发死（原蓝光团在去色阶段被删，这里用白光补回层次） */
.site-footer::after{
  content:"";position:absolute;top:-170px;right:-130px;width:440px;height:440px;
  background:radial-gradient(circle,rgba(255,255,255,.045),transparent 68%);
  pointer-events:none;
}
.site-footer > .w1200{position:relative;z-index:1}

/* --- ① 上排三列 --- */
.ft-main{
  display:grid;
  /* 220px 是实测刚需：品牌区「日本理光（RICOH）核心战略合作伙伴」13 字在 11.5px 下约需 205px，
     给 200 会折两行，折行后品牌区比四栏高出一截，上排被撑胖 */
  grid-template-columns:220px minmax(0,1fr) 168px;
  gap:36px;align-items:start;
  padding:40px 0 28px;
}
.ft-brand{min-width:0}
/* logo 是深字透明底，直接放深色页脚会糊掉 → 给一块白卡承托 */
.ft-logo{
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border-radius:5px;padding:7px 11px;
  box-shadow:0 5px 16px rgba(0,0,0,.22);
  transition:transform .2s;
}
.ft-logo:hover{transform:translateY(-1px)}
.ft-logo img{display:block;width:auto;height:auto;max-width:152px;max-height:44px}
/* 标语与描述：线上实测值。11.5px + 单行是关键 ——
   「日本理光（RICOH）核心战略合作伙伴」13 个中文字在 220px 列里正好一行，
   折行会把上排撑高、品牌区比四栏高出一截 */
.ft-slogan{
  margin:14px 0 0;font-size:12px;letter-spacing:1.2px;
  color:#8f8f8f;line-height:1.6;font-weight:600;
}
.ft-desc{
  margin:5px 0 0;font-size:12px;line-height:1.6;color:#9a9a9a;
  white-space:nowrap;
}

/* 四栏菜单：夹在品牌与二维码之间 */
.ft-nav{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;
  padding-top:2px;   /* 与品牌区首行文字基线对齐 */
}
.footer-col h4,.ft-qr h4{
  position:relative;color:#fff;font-size:14px;font-weight:600;
  letter-spacing:.3px;margin:0 0 13px;padding-bottom:9px;
}
/* 标题下一条 20px 短横：比整行下划线轻，也比纯文字标题有结构
   ★ 2026-10-27 保留浅灰而非品牌蓝：页脚四栏各有一条蓝短横会形成四个视觉锚点，
     与上方行动条的主蓝按钮抢注意力；这里用浅灰只做「结构线」，蓝留给真正的动作。 */
.footer-col h4::after,.ft-qr h4::after{
  content:"";position:absolute;left:0;bottom:0;width:20px;height:2px;
  background:#c8c8c8;border-radius:1px;
}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin-bottom:8px}
.footer-col li:last-child{margin-bottom:0}
.footer-col a{
  display:inline-block;color:#a8a8a8;font-size:13px;line-height:1.55;
  transition:color .18s,transform .18s;
}
.footer-col a:hover{color:#fff;transform:translateX(2px)}

/* 第四栏三个电话：标签在上、号码在下 */
.ft-tel-list li{margin-bottom:10px}
.ft-tel-list .ft-k{
  display:block;font-size:12px;color:#858585;
  letter-spacing:.6px;margin-bottom:1px;
}
.ft-tel-list a{color:#dcdcdc;font-size:13px;font-variant-numeric:tabular-nums}
.ft-tel-list a:hover{color:#fff;transform:none}

/* --- 二维码（右列） --- */
.ft-qr{min-width:0}
.ft-qr-list{display:flex;gap:9px}
.ft-qr-item{margin:0;text-align:center}
.ft-qr-box{
  display:flex;width:72px;height:72px;padding:4px;
  background:#fff;border-radius:5px;
  box-shadow:0 5px 14px rgba(0,0,0,.24);
  transition:transform .2s,box-shadow .2s;
}
.ft-qr-box img{width:100%;height:100%;object-fit:contain;border-radius:2px}
.ft-qr-item:hover .ft-qr-box{transform:translateY(-2px);box-shadow:0 9px 20px rgba(0,0,0,.3)}
.ft-qr-item figcaption{margin-top:5px;font-size:12px;color:#8f8f8f;line-height:1.4}
.ft-qr-hint{margin:9px 0 0;font-size:12px;color:#828282;line-height:1.5}

/* --- ② 联系方式横排 --- */
.ft-bar{
  display:flex;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.09);
  border-bottom:1px solid rgba(255,255,255,.09);
  padding:14px 0;
}
.ft-bar-item{
  display:flex;align-items:baseline;gap:8px;
  padding:0 24px;font-size:13px;line-height:1.6;
  border-left:1px solid rgba(255,255,255,.09);
}
.ft-bar-item:first-child{border-left:0;padding-left:0}
.ft-bar .ft-k{color:#858585;font-size:12px;white-space:nowrap}
.ft-bar a,.ft-bar-item > span:last-child{color:#b4b4b4}
.ft-bar a:hover{color:#fff}

/* --- ③ 底排 --- */
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap;
  padding:15px 0 16px;font-size:13px;color:#8a8a8a;
}
.footer-bottom a{color:#a0a0a0}
.footer-bottom a:hover{color:#fff}
.ft-legal{display:flex;align-items:center;gap:10px}
/* 分隔点：3px 圆点比竖线轻，深色底上不抢眼 */
.ft-dot{display:inline-block;width:3px;height:3px;border-radius:50%;
  background:#4a4a4a;flex:0 0 auto}

/* ============================================================================
   响应式
   ----------------------------------------------------------------------------
   桌面尺寸全部是实测值（1200 容器 / 388 卡片 / 392×163 按钮），
   一旦视口小于这些硬尺寸就必须**重排而不是缩放**：
     · 1200 容器 → 流式
     · 三卡横排 → 竖排（768 以下）
     · 深色区左右 → 上下（900 以下），竖发丝线改横向
     · 绿按钮三列 → 单列满宽（640 以下）
     · 新闻 / 联络并排 → 上下
   缩放（transform:scale）会让字号在手机上小到读不清，这里一律不用。
   ============================================================================ */

/* ---------- ≤1248：容器流式（已在 .w1200 处理） ---------- */

/* ---------- ≤1168：行动条两处写死宽度改成流式 ----------
   ★★★ 这条原来写在 ≤1080 里，但真正的临界点是 1168，不是 1080 ——
   漏了 1081~1167 整整 87px 的区间，那一段右侧溢出一整条（实测 1100 时 overX=44，
   `.cta` 右沿跑到 1144，表单输入框被切掉）。

   算式：.ncol 固定 640 + .cta 固定 480 = **1120**，
   而 ≤1200 时 .w1200 退化成「100% − 左右各 24 padding」，
   要放下 1120 需要 vw − 48 ≥ 1120 → **vw ≥ 1168**。
   所以断点必须落在 1168，而不是拍脑袋取 1080。

   ★ 判据：写「两处固定宽之和」的兜底断点时，断点值 = 两宽之和 + 两侧 padding，
     不能凭「常见断点」取 1024/1080 —— 差 40px 就会留一条溢出带。 */
@media (max-width:1248px){
  /* 行动条：.ncol 640 + .cta 480 = 1120，加两侧 24 padding 需 vw ≥ 1168 */
  .ncol{width:auto;flex:1;min-width:0}
  .cta{width:38%;padding-left:44px}
  /* 机型卡：3×388 + 2×8 = 1180，加两侧 24 padding 需 vw ≥ 1228。
     ★★ 这两条原来都写在 ≤1080 里，但 .w1200 在 **≤1248 就退化成流式**
        （`width:100%;padding:0 24px`），于是 1081~1247 这 167px 区间
        容器已经没有 1200 了，卡片却还是写死 388×3 —— 实测 1100 时
        `.cards li` 右沿跑到 1140，页面右侧多出一条 40px 的横向滚动。
     ★ 判据：**断点要按「容器何时变成流式」来定，不是按内容何时显得挤**。
        容器退化点 1248 才是这一批固定宽元素真正该改口的时机。 */
  .cards ul{gap:6px}
  .cards li{width:calc((100% - 12px) / 3)}
}

/* ---------- ≤1080：深色区数据缩一档，卡片间距收紧 ---------- */
@media (max-width:1080px){
  /* ★ 1080 档：左文 392 + 两条 52 间距 + 1px 线 + padding 24 = 521，
     1024 视口扣掉 .w1200 的 48 内边距只剩 976 → 数据区仅 455，
     四栏各约 114px（三栏各约 152px）。
     ★ 四栏时「36000」62px 就要 154px，比栏宽还宽 40px（实测 overX=40 虽被
       min-width:0 挡住没撑破视口，但字压在相邻栏上）→ 必须收到 50px。
     实测 62px 串宽 154 → 50px 约 124px，仍超 114。
     所以 4 项在这个宽度改「两行两列」，每栏拿到 227px，50px 的 154 富余。 */
  .focus-r{--fs:48px}
  .focus-r.is-4{--fs:56px;flex-wrap:wrap;row-gap:26px}
  .focus-r.is-4 .fstat{flex:0 0 50%}
  .fstat span{font-size:12px;letter-spacing:.06em}
  /* 页脚：中间屏宽下品牌列与二维码列收窄，菜单仍保持四栏。
     线上 1024 档的三条实测有效，照搬。 */
  .ft-main{grid-template-columns:172px minmax(0,1fr) 152px;gap:26px;padding:34px 0 24px}
  .ft-nav{gap:16px}
  .ft-qr-box{width:68px;height:68px}
  .ft-qr-list{gap:8px}
  .ft-bar-item{padding:0 16px}
  .ft-bar-item:first-child{padding-left:0}
}

/* ---------- ≤900：深色区改上下，竖线改横线 ---------- */
@media (max-width:900px){
  .focus-in{flex-direction:column;align-items:stretch}
  .focus-l{width:100%}
  .focus-l p{max-width:none}
  .focus-div{
    width:100%;height:1px;background:#1f2c3d;
    margin:32px 0 0;align-self:auto;
  }
  /* ★ 2026-10-27 P4：三栏均分在 900 以下放不下（每栏只剩 ~170px，
     78px 的「36000」要 200px 会溢出），所以在 900 档仍保留三栏但缩字号，
     到 768 以下才退成竖排参数表。这里只重置间距与对齐。 */
  .focus-r{
    margin-left:0;width:100%;max-width:none;padding-top:26px;
    flex:0 0 auto;align-items:flex-end;
    /* ★ 900 档数据区已是满宽（976~728px），四栏各 182~162px：
       62px 的「36000」需 154px，四栏时余量只有 8~28px，太薄 → 四栏收到 52px。
       三栏时每栏 240px+，78px 的 200px 仍有 40px 呼吸，保持 78px。 */
    --fs:78px;
  }
  .focus-r.is-4{--fs:52px}
  .fstat{padding:0;gap:0}
  .focus{ padding:54px 0 58px }
  .fstat b{font-size:var(--fs)}
  .fstat span{font-size:12px;margin-top:11px}
  /* 能力四栏 → 2×2（退单列会占满一屏，这是首页通病） */
  .cap-grid{grid-template-columns:repeat(2,1fr)}
  .cap-it{padding:28px 22px 32px}
  .cap-it:nth-child(2n){border-right:0}
  .cap-it:nth-child(-n+2){border-bottom:1px solid #ececec}
  /* 新闻 + 联络改上下 */
  .news-in{flex-direction:column;gap:46px}
  .ncol{width:100%}
  .cta{width:100%;margin-left:0;padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:42px}
  /* 页脚：三列在 900 以下放不下，改「品牌 | 二维码」同一行各占一头、菜单独占第二行。
     ★ 为什么不直接堆成三行：728px 扣掉品牌 172 + 二维码 152 + 两个 26px 间隙，
       四栏只剩 88px/栏，「0755-27219869」必然折两行。
       改成两行后菜单拿到 728/4 = 182px/栏，只多一行高度（品牌行 88px），比挤成两行文字划算。
       —— 这套断点是线上页脚的既有设计，实测有效，照搬。 */
  .ft-main{grid-template-columns:minmax(0,1fr) auto;gap:18px 24px;padding:30px 0 22px}
  .ft-brand{grid-column:1;grid-row:1}
  .ft-qr{grid-column:2;grid-row:1;text-align:right}
  .ft-qr-list{justify-content:flex-end}
  .ft-qr h4{text-align:right}
  .ft-qr h4::after{left:auto;right:0}
  .ft-qr-hint{text-align:right}
  /* 菜单跨满两列，独占第二行 */
  .ft-nav{
    grid-column:1 / -1;grid-row:2;padding-top:16px;gap:20px;
    border-top:1px solid rgba(255,255,255,.08);
  }
  .ft-slogan{margin-top:12px}
}

/* ---------- ≤930：卡片标题补一档字号（修「标题被省略号吃掉」）----------
   ★ 2026-10-27 实测出来的既有缺陷，与本次白底改动无关：
     卡片标题 .cards h3 是 20px + nowrap + text-overflow:ellipsis，
     20px 下最长的「DLI-2513 线阵视觉UV打印机」需 267.3px。
     而 931 档标题可用宽刚好 266px、900 档 256px、823 档 230px → 全部被截成
     「DLI-2513 线阵视觉UV打印…」。
     ★ 为什么 768 以下反而没问题：768 档切成了「图左文右」横排，文字区拿 604px，余量充足。
       所以缺口只在 769~930 这一段，正是「已经变窄、但还没换布局」的中间带。
   ★ 修法用 clamp 而不是再定义两三个断点：
     实测各档需要的最大字号 930→19.9 / 900→19.2 / 860→18.2 / 823→17.2 / 769→15.9，
     近似线性 ≈ 视口宽 × 0.0209。用 2.09vw 连续跟随，就不必为每个断点写死值。 */
@media (max-width:930px) and (min-width:769px){
  .cards h3{font-size:clamp(15px, 2.05vw, 19.5px)}
}

/* ---------- ≤768：三卡竖排，但图改为横向列表（图左文右）以省高度 ---------- */
@media (max-width:768px){
  /* 页头：菜单收起，只留 logo + 电话 */

  /* ===== banner（手机）=====
     ★ 硬坑：1920×760 的图在 390 视口等比 → 只有 154px 高，
       图内主标题（原图行高 70px）只剩 14.2px、副标题 50px 只剩 10.2px、
       第三行小字 24px 只剩 4.9px —— **等于全是糊的**。
       （线上站也是这个问题：只调了箭头/圆点尺寸，没处理可读性）
     ★ 解法：放弃「整张图完整可见」，改成「按文字所在侧裁切 + 加高容器」。
       容器高 56vw（390→218）：缩放比 0.287，可见原图宽 70.7%
       → 主标题 20.1px、副标题 14.4px，可读；
       同时机器还剩 70.7% 可见，不至于只剩一条边。
       （64vw 时主标题 23px 更清楚，但可见宽只剩 61.8%，1819s 那张
         机器被切得只剩右边缘一条黑片，构图碎 → 取 56vw 的平衡点）
     ★ 为什么必须**分张设 object-position**：三张图文字不在同一侧（实测）
         · 2513-3  文字 x  6.2..43.7%  → 在左，po 可行区间 [0, 21]
         · 1819s   文字 x 54.7..93.7%  → 在右，po 可行区间 [78, 187]
         · 3350-2  文字 x  9.3..41.7%  → 在左，po 可行区间 [0, 32]
       三张统一 center 或统一 left，都会有一张把文案裁掉。 */
  .top{aspect-ratio:auto;height:56vw;max-height:340px}
  .top-slide:nth-child(1) img,
  .top-slide:nth-child(3) img{object-position:left center}
  .top-slide:nth-child(2) img{object-position:right center}

  .top-nav{width:34px;height:46px;font-size:15px;opacity:.8}
  .top-nav.prev{left:0}
  .top-nav.next{right:0}
  /* 圆点：卡片不再压叠 banner，只需避开图内文字。
     手机 banner 高 56vw（390→218），文字块底在原图 67.5% ≈ 147px，
     圆点放 bottom:12（距底 12，即 y≈192）落在文字下方，不压字。
     ★ 白色实心 + 细阴影：不加深色胶囊底（试过，在浅底图上像贴了块补丁） */
  .top-dots{
    bottom:12px;gap:0;
    left:50%;right:auto;transform:translateX(-50%);width:max-content;
  }
  .top-dots button{
    width:7px;height:7px;margin:0 4px;
    background:#fff;opacity:.75;
    box-shadow:0 1px 3px rgba(0,0,0,.45);
  }
  .top-dots button.on{width:18px;opacity:1}
  /* 卡片：竖排，图左文右，高度压到 112，三张不至于占 3 屏
     ★ 不再上移压叠 banner（用户否决），改为 banner 下方独立成带 */
  .cards{padding:34px 0 40px}
  .cards ul{flex-direction:column;gap:8px}
  /* ★ 阴影同步去掉：基础段已改成「白卡 + 发丝线 + 常态无阴影」，
     这里若继续给 0 2px 14px rgba(0,0,0,.16)，手机上会变回「重阴影卡片」，
     与桌面的新语言再次分叉 —— 同一个组件在两个断点两套阴影，是刚才踩过的坑。 */
  .cards li{width:100%;display:block}
  .cards li a{display:flex;align-items:stretch}
  /* ★ 窄屏这里必须显式 aspect-ratio:auto：
     基础段的 .cards .ph{aspect-ratio:4/3} 会按「宽 132」算出 99px 高，
     但这一档是图左文右的横排条目，高度要跟右侧文字块走（min-height 兜底），
     不解除就会把图片压成 132×99 的小方块，比文字矮一大截。 */
  .cards .ph{width:132px;height:auto;min-height:104px;aspect-ratio:auto;flex:none}
  .cards .bd{
    height:auto;flex:1;padding:16px 16px 16px;text-align:left;
    display:flex;flex-direction:column;justify-content:center;
  }
  .cards h3{font-size:15px;line-height:1.45}
  .cards p{font-size:12px;line-height:1.6;margin-top:5px}

  /* 深色区 */
  .focus{padding:46px 0 50px}
  .focus-l h2{font-size:26px}
  .focus-l h2 em{font-size:22px}
  .focus-l h3{font-size:16px;margin-top:16px}
  .focus-l p{margin-top:14px;line-height:1.95}
  /* ★ 2026-10-27 P4 手机档：三栏均分在 390 下每栏只剩 ~110px，
     78px 的「36000」要 200px 会溢出 → 退成**竖排参数表**（每项一行）。
     ★ 为什么不用 flex-wrap 或 2 列网格：3 项数据换行会留孤儿，
       第 3 项独占一行左端、右边空一片；2 列网格又因只有 3 项空一格。
       竖排参数表 3/4 项都自适应，是这套数据唯一稳的排法。 */
  .focus-r{
    flex-direction:column;align-items:stretch;padding-top:20px;padding-right:0;
    /* ★ 必须把 1080 档的「4 项两行两列」全部复位：
       那一档给 .fstat 写了 flex:0 0 50%，在 column 主轴下会变成
       「高度取容器 50%」，四项各占半屏高、互相重叠。
       flex-wrap 也要显式回 nowrap，否则 column 下仍会另起一列。 */
    flex-wrap:nowrap;row-gap:0;
    --fs:40px;
  }
  .focus-r.is-4{--fs:40px;flex-wrap:nowrap;row-gap:0}
  .focus-r.is-4 .fstat{flex:0 0 auto}
  .fstat{
    flex:0 0 auto;align-items:baseline;
    flex-direction:row;justify-content:space-between;
    padding:15px 0 16px;
    border-top:1px solid #1a283a;
  }
  .fstat:first-child{border-top:0;padding-top:0}
  .fstat b{font-size:var(--fs);line-height:.9}
  .fstat span{font-size:12px;margin-top:0;letter-spacing:.08em}

  /* 能力区 */
  .cap{padding-top:56px}
  .cap-hd h2{font-size:26px}
  .cap-hd h2::after{margin-top:15px}
  .cap-grid{margin-top:34px}
  .cap-it{padding:24px 16px 28px}
  .cap-it h3{font-size:15px;margin-top:10px}
  .cap-it p{font-size:12px;line-height:1.8;margin-top:7px}
  .cap-band{height:240px;margin-top:6px}
  .cap-band::after{height:60px}

  /* 行动条：三栏 → 上下堆叠，栏间改上边线（手机没横向空间放发丝线） */
  .more-in{grid-template-columns:1fr}
  .act{border-left:0;border-top:1px solid var(--line);padding:22px 0}
  .act:first-child{border-top:0}
  .act svg{width:20px;height:20px}
  .act .t b{font-size:14px}
  .act .t i{font-size:12px}
  .act .ar{margin-right:0}

  /* 新闻 + 联络 */
  .news{padding:48px 0 52px}
  /* 手机上表单改成上下排，不再需要和新闻等高 → 撤掉 min-height 与 flex 均分，
     否则 5 条会被拉开、条目间距忽大忽小。 */
  .nlist{min-height:0;display:block}
  .nhd h2{font-size:20px}
  .nlist a{gap:14px;padding:17px 0}
  .nlist .d{width:60px}
  .nlist .d b{font-size:18px}
  /* ★ 手机端标题给两行：文字列只有 258~316px，最长标题 39 字放不进一行，
     单行必被截掉大半。两行 + clamp 才是这里该用的。
     ★ 不要写 min-height 锁高：标题 1 行 / 2 行混排时，
       写死 43px 会让单行标题的条目下方凭空多 22px 死白（截图里第 3 条就是这个）。
       手机端 .nlist 是 display:block，条目高度天然由内容决定，不需要等高。 */
  .nlist h3{
    font-size:13px;line-height:1.65;
    white-space:normal;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  /* 摘要一行、11px（< 标题 13px，层级成立）。
     ★ 一行写 nowrap+ellipsis，不用 clamp —— clamp:1 在 Chrome 会退化成 flow-root，
       省略号不一定出现；nowrap 的 text-overflow 是稳定的，行高也固定一行。
     ★ 省略号必须继承桌面段的 overflow:hidden + text-overflow:ellipsis，
       这里只覆盖字号/行高/white-space，不要重写 overflow。
     ★ PHP 侧不再截断摘要（见 front-page.php），整段交给这里收尾：
       实测 390 视口摘要 scrollWidth 1439~1664 vs clientWidth 276，
       5 条全部溢出 → 省略号一定落在右边缘，不会出现「没省略号的硬切」。 */
  .nlist .ex{font-size:11px;line-height:1.6;margin-top:3px;white-space:nowrap}
  .cta h3{font-size:22px}
  .cta-sub{font-size:12px;margin-top:10px}
  /* 表单：手机上输入框高一点更好点，字号 ≥16px 防 iOS 自动放大 */
  .lead-form{margin-top:20px}
  .lf-row{padding-top:16px}
  .lf-row input,.lf-row select{height:42px;font-size:16px}
  .lf-row select{background-position:calc(100% - 6px) 18px, calc(100% - 1px) 18px}
  .lf-submit{height:50px;margin-top:22px}

  /* 页脚
     ★ 6 个链接的「应用案例」在 2 列下会孤一行 → 用 2 列时每栏 90px 放不下 5 字链接，
       所以这里保持 2 列并把字号收到 12px；四栏两两成对，不会出现单数孤儿。
     ★ 电话栏在窄屏标签+号码横排会折行 → 改标签在上、号码在下（和线上一致）。 */
  /* ★ 单列堆叠：必须清掉 900 档设的 grid-column/row，否则三个块会叠在同一格 */
  .ft-main{grid-template-columns:minmax(0,1fr);gap:20px;padding:24px 0 20px}
  .ft-brand,.ft-qr,.ft-nav{grid-column:auto;grid-row:auto}
  /* 品牌区：logo 与标语上下排列，横扫小屏一行放不下 */
  .ft-brand{display:flex;flex-wrap:wrap;gap:0;align-items:center}
  .ft-logo{margin-right:12px}
  .ft-slogan{width:100%;margin:10px 0 0}
  .ft-desc{width:100%;margin:4px 0 0;white-space:normal}
  /* 二维码：码在左、提示语在右；左对齐（右对齐在单列里会显得飘） */
  .ft-qr{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;text-align:left;
    padding-top:16px;border-top:1px solid rgba(255,255,255,.09);
  }
  .ft-qr h4{margin:0 0 10px;padding-bottom:0;width:100%;text-align:left}
  .ft-qr h4::after{display:none}
  .ft-qr-list{flex:0 0 auto;gap:10px;justify-content:flex-start}
  .ft-qr-box{width:70px;height:70px}
  .ft-qr-hint{display:block;margin:0;flex:1 1 100px;font-size:12px;text-align:left}
  .ft-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;padding-top:0;border-top:0}
  .footer-col h4,.ft-qr h4{font-size:14px;margin-bottom:12px;padding-bottom:9px}
  .footer-col a{font-size:13px}
  .ft-tel-list a{font-size:13px}
  /* 联系条靠 flex-wrap 自然折行即可（线上也没在窄屏改它），
     只把左右 padding 收到 0 免得首项左边空一截 */
  .ft-bar{padding:12px 0}
  .ft-bar-item{padding:0 0 0 16px}
  .ft-bar-item:first-child{padding-left:0}
  /* 底排：窄屏两行，各占一行左对齐 */
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px;padding:13px 0 15px;font-size:12px}
}

/* ---------- ≤430：进一步收紧 ---------- */
@media (max-width:430px){
  .cards .ph{width:112px;min-height:96px;aspect-ratio:auto}
  .cards h3{font-size:14px}
  /* ★ 竖排参数表在 430 以下再降一档：--fs 默认继承 768 断点的 40px，
     这里直接覆盖变量（而不是写 .fstat b{font-size:34px}——
     那条会被 .focus-r 上的变量继承盖回去，等于没写）。 */
  .focus-r,.focus-r.is-4{--fs:36px}
  .fstat span{font-size:12px}
  .fstat{padding:14px 0 15px}
  .cap-it{padding:20px 12px 24px}
  .cap-it h3{font-size:14px}
  .cap-band{height:200px}
  .cta h3{font-size:20px}
}

/* ---------- ≤360：标题再降一档（clamp 下限救不了最窄屏） ---------- */
@media (max-width:360px){
  .w1200{padding-left:14px;padding-right:14px}
  .focus-l h2{font-size:23px}
  .focus-l h2 em{font-size:20px}
  .cap-hd h2{font-size:23px}
  .cap-hd h2::after{width:34px;margin-top:13px}
  .cap-hd .sub{font-size:12px}
  .cards .ph{width:98px;min-height:88px;aspect-ratio:auto}
  .cards h3{font-size:13px}
  .cards p{font-size:12px}
}

/* ============================ ⑨ 蜜罐字段 ============================
   打样表单里的反垃圾字段：真人看不见（绝对定位到屏幕外 + 高度 0），
   爬虫会照着 name="site" 填。填了就静默丢（见 inc-lead.php）。
   ★ 不能用 display:none / visibility:hidden：很多爬虫会跳过这类字段，
     等于没设。
   ★ 不能用 opacity:0 + 正常占位：会白白吃掉 60px 行高。
   ★ 必须加 tabindex="-1"（模板里已加），否则键盘用户 Tab 会掉进这个黑洞。 */
.lf-hp{
  position:absolute;left:-9999px;top:auto;
  width:1px;height:1px;overflow:hidden;
}

/* 表单成功态：把蜜罐和错误提示一起清掉，避免残留在 DOM 里 */
.lead-form.done .lf-hp{display:none}