/* ============================================================
   神铁运维官网 · 共享样式表
   设计语言：深蓝（隧道/工业信任）+ 安全黄（地铁警示色）
   行业元素：隧道透视、地铁线路图、站名牌、信号灯、设备编号、限界拱线
   注意：本文件所有内容均无硬编码——正式开发时由后台字段驱动
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#0F1E2B; --ink2:#4A5C6C; --ink3:#8494A1;
  --line:#E6ECF1; --line2:#D0DAE2;
  --bg:#fff; --bg2:#F7F9FB; --bg3:#EFF4F8;
  --navy:#093049; --navy2:#0D3E63; --blue:#1A6BAE; --blueL:#4A95D0;
  --yellow:#E8A317; --red:#C8452F; --green:#2E8B57;
  --sh:0 2px 4px rgba(15,30,43,.03), 0 14px 40px rgba(15,30,43,.07);
  --sh-lg:0 4px 8px rgba(15,30,43,.04), 0 24px 64px rgba(15,30,43,.1);
}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--ink); background:var(--bg); font-size:15px; line-height:1.75;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* 容器：任何带 .wrap 的元素都不得写 padding 简写，否则左右内边距被覆盖为 0 */
.wrap{width:100%;max-width:1460px;margin:0 auto;padding:0 clamp(20px,3.4vw,56px)}

.sec{padding:clamp(46px,3.5vw,70px) 0}
.sec.gray{padding:clamp(40px,3.1vw,60px) 0;background:var(--bg2)}

.kick{display:inline-flex;align-items:center;gap:10px;font-size:clamp(11.5px,.78vw,12.5px);letter-spacing:.2em;color:var(--blue-text);font-weight:600;text-transform:uppercase;margin-bottom:clamp(12px,.9vw,18px)}
.kick::before{content:"";width:clamp(20px,2vw,30px);height:2px;background:var(--yellow)}
h2.st{font-size:clamp(24px,2.35vw,38px);font-weight:600;letter-spacing:-.5px;line-height:1.32;margin-bottom:clamp(10px,.9vw,16px)}
.sub{font-size:clamp(14px,.86vw,16.5px);color:var(--ink2);max-width:46em;line-height:1.8}
.sec-head{margin-bottom:clamp(24px,2.1vw,38px)}
.sec-head.row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.more{font-size:clamp(13px,.85vw,14.5px);color:var(--blue-text);font-weight:500;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:.2s;padding:10px 2px;margin:-10px -2px}
.more:hover{color:var(--ink-1)}
.more::after{content:"→";transition:.2s}
.more:hover::after{transform:translateX(3px)}

/* ======== 顶部 ======== */
.topbar{background:var(--navy);color:rgba(255,255,255,.7);font-size:clamp(11.5px,.76vw,13px)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:clamp(36px,2.6vw,42px);gap:20px}
/* line-height:1 是必须的：
   .topbar 继承 body 的 line-height:1.75，13px 字会得到 22.75px 的行盒。
   如果 .tl 里出现任何行内内容（含 inline-flex 的 .sig），
   容器高度会被这个行盒撑到 54.7px —— 是 topbar 实际高度 37.4px 的 1.46 倍，
   上下各溢出 8.6px。此时子元素即使 align-items:center，
   也是相对**溢出后的 54.7px** 居中，与 topbar 的视觉中心不一致。 */
.topbar .tl{display:flex;align-items:center;gap:9px;min-width:0;white-space:nowrap;overflow:hidden;line-height:1}
/* 文本单独一层才能截断（匿名 flex 项无法 min-width:0），详见 header.html 注释 */
.topbar .tl-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
.topbar .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(46,139,87,.22);flex-shrink:0}

/* 三色信号灯：红 / 黄 / 绿 横向排列，错相位呼吸。
   ★ 为什么不用 `box-shadow` 做扩散光圈：@keyframes 里写颜色在深色模式下
     会与 token 推导打架，实测出现"深色下光圈仍是浅色"。这里光圈放在
     选择器里（静态），动画只改 opacity 与 scale —— 两条路径互不干扰。
   ★ 尺寸 7px × 3 + 间距 4px × 2 = 29px，比原来的单灯（6px + 3px 光圈 = 12px）
     宽 17px。顶部条左段是 `white-space:nowrap` + 省略号，多 17px 在 990px
     以上不会有影响；640px 以下整条 topbar 是 display:none，也不影响。

   ★ 与文字中心线对齐（2026-11-04 用户反馈"灯的位置不对"）：
     关键是把 .sig 的**盒高锁死**为灯的高度（7px）。
     不锁的话实测 .sig 高 23px（行盒撑的），而灯只占顶部 7px，
     于是"盒子居中了、灯没居中"，看起来灯还是偏上。
     三条一起：
       1. height:7px 锁盒高 —— 让盒子的中心就是灯的中心
       2. .tl 上 line-height:1 —— 不继承 1.75，容器不被行盒撑高
       3. i 用 display:block —— inline 元素参与基线对齐，
          基线下方的空隙会把灯整体推高 2~3px
     vertical-align 对 block 子项无效，写了只是噪声，已去掉。 */
.topbar .tlights{display:flex;align-items:center;gap:4px;flex-shrink:0;height:7px;line-height:0;align-self:center}
.topbar .tlights i{display:block;width:7px;height:7px;border-radius:50%;flex-shrink:0}
.topbar .tlights .r{background:var(--c-2);box-shadow:0 0 7px rgba(228,83,75,.75);animation:sig-beat 2.4s ease-in-out infinite}
.topbar .tlights .y{background:var(--c-3);box-shadow:0 0 7px rgba(232,163,23,.75);animation:sig-beat 2.4s ease-in-out infinite .4s}
.topbar .tlights .g{background:var(--c-4);box-shadow:0 0 7px rgba(46,139,87,.75);animation:sig-beat 2.4s ease-in-out infinite .8s}
@keyframes sig-beat{
  0%,100%{opacity:.3;transform:scale(.82)}
  42%{opacity:1;transform:scale(1.15)}
}
/* 无障碍：系统开了"减少动态效果"就停止呼吸，只保留静态三色。
   这不是可选项 —— 闪烁动画对光敏感人群是真实的健康风险。 */
@media (prefers-reduced-motion: reduce){
  .topbar .tlights i{animation:none;opacity:1}
}
.topbar .tr{display:flex;gap:clamp(2px,.4vw,6px);flex-shrink:0;margin-right:-11px}
.topbar .tr a{display:inline-flex;align-items:center;padding:7px 11px;border-radius:4px;transition:background .18s,color .18s}
.topbar .tr a:hover{color:var(--on-dark);background:rgba(255,255,255,.1)}

header.nav{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);transition:box-shadow .25s}
header.nav.is-scrolled{box-shadow:0 2px 18px rgba(15,30,43,.08)}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:clamp(64px,5vw,84px);gap:clamp(20px,2.4vw,44px)}
.logo{display:flex;align-items:center;gap:clamp(9px,.9vw,13px);flex-shrink:0;min-height:44px}
.logo .mark{width:clamp(34px,2.4vw,42px);height:clamp(34px,2.4vw,42px);flex-shrink:0}
.logo .txt strong{display:block;font-size:clamp(15px,1.05vw,18px);font-weight:600;letter-spacing:.2px;line-height:1.25}
.logo .txt span{display:block;font-size:clamp(11.5px,.68vw,11px);color:var(--ink3);letter-spacing:.11em;text-transform:uppercase;margin-top:1px}
nav.main{display:flex;gap:clamp(0,.2vw,4px);margin-left:auto}
nav.main a{font-size:clamp(13.5px,.92vw,15.5px);color:var(--ink2);padding:clamp(11px,.8vw,13px) clamp(9px,.85vw,16px);border-radius:5px;transition:.18s;white-space:nowrap;position:relative}
nav.main a:hover{color:var(--navy-text);background:var(--bg3)}
nav.main a.on{color:var(--navy-text);font-weight:600}
nav.main a.on::after{content:"";position:absolute;left:clamp(9px,.85vw,16px);right:clamp(9px,.85vw,16px);bottom:5px;height:2px;background:var(--yellow);border-radius:1px}
.nav-act{display:flex;gap:10px;align-items:center;flex-shrink:0}

/* 顶栏右侧三个控件的尺寸（2026-11-04 用户要求"高度调小一点"）。
   ★ 只改 .nav-act 里的，不动全站 .btn：
     .btn 基础是 min-height:44px，那是触摸目标下限，正文区按钮要保持。
     顶栏这三个是鼠标操作的桌面控件（≤640px 时 .btn-o 被隐藏、
     主题切换另有 36px 规则），38px 在桌面足够，视觉上也更轻。
     38 而不是 34：34px 在触屏笔记本上偏难点中；38 是折中。
   ★ 字号跟着收一档，否则 38px 高配 15px 字会显得挤。 */
.nav-act .btn{min-height:38px;padding:0 clamp(13px,1.1vw,18px);font-size:clamp(12.5px,.84vw,14px)}
.nav-act .theme-toggle{width:38px;height:38px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:clamp(13.5px,.88vw,15px);font-weight:500;padding:clamp(10px,.72vw,13px) clamp(16px,1.3vw,24px);border-radius:5px;border:1px solid transparent;transition:.2s;cursor:pointer;white-space:nowrap;min-height:44px;font-family:inherit}
/* 主按钮：填充用 --navy-fill 而不是 --navy。
   为什么分开：深色模式下 --navy (#093049) 压在深色页面上只有 1.33:1，
   按钮形状几乎消失（白字仍清楚，但"这是个按钮"看不出来）。
   --navy-fill 在浅色下等于原值（像素不变），深色下提亮到 #2674A6。 */
.btn-p{background:var(--navy-fill);color:var(--on-dark)}
.btn-p:hover{background:var(--navy-fill-hover);transform:translateY(-1px);box-shadow:0 8px 22px rgba(9,48,73,.24)}
.btn-o{border-color:var(--line2);color:var(--ink);background:var(--card)}
.btn-o:hover{border-color:var(--navy-text);color:var(--navy-text)}
.btn-y{background:var(--yellow);color:var(--ink-7)}
.btn-y:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 10px 26px rgba(232,163,23,.3)}
.btn-lg{padding:clamp(12px,1vw,17px) clamp(22px,1.9vw,34px);font-size:clamp(14px,.96vw,16.5px)}
.btn[disabled],.btn.disabled{opacity:.45;pointer-events:none}
/* 表单错误提示：由 site.js 创建，样式放这里以便主题接管 */
.form-error{background:var(--surface-8);border:1px solid var(--line-9);color:var(--ink-10);font-size:13px;line-height:1.7;padding:11px 15px;border-radius:6px;margin-bottom:16px;white-space:pre-line}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line2);border-radius:5px;background:var(--card);cursor:pointer;padding:12px 11px;flex-direction:column;justify-content:space-between}
.burger i{display:block;height:1.6px;background:var(--ink);border-radius:1px}
/* 主题切换按钮：三态（跟随系统 / 浅色 / 深色），图标由 html[data-theme] 决定 */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:44px;border:1px solid var(--line2);border-radius:5px;background:var(--card);color:var(--ink2);cursor:pointer;padding:0;flex-shrink:0;transition:.18s}
.theme-toggle:hover{border-color:var(--navy-line);color:var(--navy-text)}
.theme-toggle:focus-visible{outline:2px solid var(--blue-line);outline-offset:2px}
.theme-toggle svg{width:19px;height:19px;display:none}
:root:not([data-theme]) .theme-toggle .ic-auto,
:root[data-theme="light"] .theme-toggle .ic-light,
:root[data-theme="dark"] .theme-toggle .ic-dark{display:block}

/* ======== 内页页头 ======== */
.phead{position:relative;background:linear-gradient(150deg,var(--c-11),var(--c-12) 55%,var(--c-13));color:var(--on-dark);overflow:hidden}
.phead .tunnel{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.phead .inner{position:relative;z-index:2;padding-top:clamp(34px,3.4vw,58px);padding-bottom:clamp(34px,3.4vw,58px)}
.crumb{display:flex;align-items:center;gap:9px;font-size:clamp(11.5px,.76vw,12.5px);color:rgba(255,255,255,.52);margin-bottom:clamp(14px,1.4vw,22px);flex-wrap:wrap}
.crumb a{transition:.2s}
.crumb a:hover{color:var(--on-dark)}
.crumb i{font-style:normal;opacity:.45}
.phead h1{font-size:clamp(25px,2.7vw,44px);font-weight:600;letter-spacing:-.6px;line-height:1.3;margin-bottom:clamp(10px,1vw,16px)}
.phead p{font-size:clamp(13.5px,.9vw,16px);color:rgba(255,255,255,.68);max-width:44em;line-height:1.78}

/* ======== 线路图（六专业） ======== */
.railmap{position:relative;padding:clamp(38px,3.2vw,58px) 0 0}
.railline{position:absolute;left:5%;right:5%;top:calc(clamp(38px,3.2vw,58px) + clamp(15px,1.15vw,20px) - 2.5px);height:5px;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--blueL));opacity:.92;z-index:0;pointer-events:none}
.stops{position:relative;display:grid;grid-template-columns:repeat(6,1fr);z-index:2}
.stopitem{text-align:center;padding:0 clamp(4px,.5vw,10px);position:relative}
.stopitem .ring{width:clamp(30px,2.3vw,40px);height:clamp(30px,2.3vw,40px);border-radius:50%;border:4px solid var(--blue-line);background:var(--card);margin:0 auto clamp(13px,1.2vw,18px);display:flex;align-items:center;justify-content:center;transition:.25s;position:relative;z-index:1}
.stopitem .ring::after{content:"";width:clamp(7px,.55vw,9px);height:clamp(7px,.55vw,9px);border-radius:50%;background:var(--blue);transition:.25s}
.stopitem:hover .ring{transform:scale(1.16);border-color:var(--yellow-text);box-shadow:0 0 0 7px rgba(232,163,23,.14)}
.stopitem:hover .ring::after{background:var(--yellow)}
.stopitem h4{font-size:clamp(14px,.98vw,17px);font-weight:600;margin-bottom:clamp(4px,.4vw,7px)}
.stopitem p{font-size:clamp(11.5px,.75vw,13.5px);color:var(--ink3);line-height:1.65}
.railmap .ends{display:flex;justify-content:space-between;margin-top:clamp(16px,1.4vw,24px);font-size:clamp(11.5px,.7vw,12px);color:var(--ink3);letter-spacing:.06em;padding:0 2%}

/* ======== 信号灯 ======== */
.lamrow{display:flex;gap:clamp(12px,1.1vw,18px);align-items:center;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:clamp(13px,1.1vw,19px) clamp(14px,1.2vw,20px)}
.lamp{width:clamp(34px,2.5vw,44px);height:clamp(34px,2.5vw,44px);border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:clamp(11.5px,.78vw,13px);font-weight:700;color:var(--on-dark);position:relative}
.lamp::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid currentColor;opacity:.22}
.lamp.r{background:var(--red)}
.lamp.y{background:var(--yellow);color:var(--ink-14)}
.lamp.g{background:var(--green)}
.lamrow .txt b{display:block;font-size:clamp(13.5px,.92vw,16px);font-weight:600;margin-bottom:2px}
.lamrow .txt span{font-size:clamp(11.5px,.78vw,13.5px);color:var(--ink2);line-height:1.65;display:block}

/* ======== 卡片通用 ======== */
.card{position:relative;border:1px solid var(--line);border-radius:9px;background:var(--card);transition:.24s}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--line2)}
.tags{display:flex;flex-wrap:wrap;gap:clamp(5px,.45vw,8px)}
.tags span{font-size:clamp(11.5px,.72vw,12.5px);color:var(--ink2);background:var(--bg3);padding:3px clamp(7px,.6vw,11px);border-radius:3px}

/* ======== 页脚 ======== */
footer.ft{background:var(--c-15);color:rgba(255,255,255,.58);font-size:clamp(12px,.8vw,13.5px)}
footer.ft .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:clamp(24px,3vw,56px);padding:clamp(36px,3.6vw,62px) 0 clamp(30px,3vw,48px)}
footer.ft h5{color:var(--on-dark);font-size:clamp(12.5px,.85vw,14.5px);font-weight:600;margin-bottom:clamp(12px,1.1vw,18px);letter-spacing:.03em}
footer.ft ul{list-style:none;display:flex;flex-direction:column;gap:clamp(0px,.15vw,2px)}
footer.ft ul a{display:block;padding:6px 0;transition:.18s}
footer.ft a:hover{color:var(--on-dark)}
footer.ft .about p{line-height:1.85;margin-bottom:clamp(12px,1.1vw,18px);max-width:26em}
footer.ft .about .nm{color:var(--on-dark);font-size:clamp(13.5px,.92vw,16px);font-weight:600;margin-bottom:clamp(9px,.8vw,13px)}
footer.ft .bottom{border-top:1px solid rgba(255,255,255,.09);padding:clamp(16px,1.5vw,24px) 0 clamp(20px,2vw,32px);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:clamp(11.5px,.72vw,12px);color:rgba(255,255,255,.4)}
footer.ft .bottom .lks{display:flex;gap:clamp(14px,1.5vw,24px);flex-wrap:wrap}

/* ======== 表单 ======== */
.form{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:clamp(22px,2.4vw,40px)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.5vw,22px)}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:clamp(12.5px,.85vw,14px);font-weight:500;color:var(--ink)}
.field label em{font-style:normal;color:var(--red-text);margin-left:2px}
.field .hint{font-size:clamp(11.5px,.72vw,12px);color:var(--ink3);line-height:1.6}
.field input[type=text],.field input[type=tel],.field input[type=email],.field select,.field textarea{
  font-family:inherit;font-size:clamp(13px,.88vw,14.5px);color:var(--ink);
  border:1px solid var(--line2);border-radius:5px;padding:11px 13px;background:var(--card);
  transition:border-color .18s,box-shadow .18s;width:100%;min-height:44px;
}
.field textarea{min-height:96px;resize:vertical;line-height:1.7}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue-text);box-shadow:0 0 0 3px rgba(26,107,174,.12)}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-16)}
.checkgroup{display:flex;flex-wrap:wrap;gap:8px}
.checkgroup label{display:inline-flex;align-items:center;gap:7px;font-size:clamp(12px,.8vw,13.5px);font-weight:400;border:1px solid var(--line2);border-radius:5px;padding:9px 13px;cursor:pointer;transition:.18s;background:var(--card);min-height:40px}
.checkgroup label:hover{border-color:var(--blue-text);background:var(--surface-17)}
.checkgroup input:checked + span{color:var(--navy-text);font-weight:500}
.checkgroup label:has(input:checked){border-color:var(--blue-text);background:var(--surface-18)}
.upload{border:1.5px dashed var(--line2);border-radius:6px;padding:clamp(16px,1.6vw,26px);text-align:center;color:var(--ink3);font-size:clamp(12px,.8vw,13.5px);transition:.2s;cursor:pointer;background:var(--surface-19)}
.upload:hover{border-color:var(--blue-text);color:var(--blue-text);background:var(--surface-17)}
.formfoot{margin-top:clamp(18px,2vw,30px);padding-top:clamp(16px,1.8vw,26px);border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.formfoot .note{font-size:clamp(11.5px,.74vw,12.5px);color:var(--ink3);line-height:1.7;max-width:38em}
.notice{border-left:3px solid var(--yellow-line);background:var(--surface-20);padding:clamp(12px,1.1vw,17px) clamp(14px,1.3vw,20px);font-size:clamp(11.5px,.8vw,13.5px);color:var(--ink-21);line-height:1.78;border-radius:0 5px 5px 0}

/* ======== 通用列表/表格 ======== */
.spec{width:100%;border-collapse:collapse;font-size:clamp(12px,.83vw,14px)}
.spec th,.spec td{border:1px solid var(--line);padding:clamp(9px,.85vw,14px) clamp(11px,1vw,17px);text-align:left;vertical-align:top}
.spec th{background:var(--bg3);color:var(--navy-text);font-weight:600;width:32%}
.spec td{color:var(--ink2)}
.spec tr:nth-child(even) td{background:var(--surface-19)}

/* ======== 早期原型留下的两个标记样式，已全部删除 ========
   2026-11-03 用户要求去掉"原型 · 内容由后台维护"角标。
   右下角浮动角标那条规则、以及另一个从未被模板引用的小标签规则，
   模板与样式两边都清掉了，不留死代码。
   现在这个位置只剩下方后台用的字段说明标签。 */
/* 后台字段说明标签：告诉用户"这段文字会显示在哪里" */
.edit-hint{display:inline-flex;align-items:center;gap:0;font-size:10.5px;color:var(--ink-22);background:var(--surface-23);border:1px solid var(--line-24);border-radius:3px;padding:1px 6px;margin-left:6px;vertical-align:middle;white-space:nowrap}

/* ======== 响应式 ======== */
@media (max-width:1180px){
  .fgrid{grid-template-columns:1fr}
}
@media (max-width:980px){
  nav.main{display:none}
  /* 移动端菜单抽屉：由 JS 切 class 控制，不写内联样式。
     原先 JS 里硬编码 background:var(--card)，深色模式下白底浅字看不清。 */
  nav.main.is-open{
    display:flex;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--card);padding:14px 22px 22px;
    border-bottom:1px solid var(--line-25);
    box-shadow:0 16px 32px rgba(15,30,43,.09);
  }
  nav.main.is-open a{padding:13px 4px;border-bottom:1px solid var(--line-26)}
  nav.main.is-open a:last-child{border-bottom:none}
  .burger{display:flex}
  .nav-act .btn-o{display:none}
  .railmap{padding:24px 0 0}
  .railline{display:none}
  .stops{grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,32px) 0}
  .railmap .ends{display:none}
  /* 三组并排而非两列：3 组排 2 列会让第三组落单，视觉上缺一块。
     990px 下设 3 列时每列约 240px，放得下"供应商登记"。 */
  footer.ft .cols{grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
  footer.ft .cols .about{grid-column:1 / -1}
}
@media (max-width:640px){
  .stops{grid-template-columns:repeat(2,1fr)}
  .topbar{display:none}
  .logo .txt span{display:none}

  /* 页脚：手机上不再单列排 12 行。
     原先是 grid-template-columns:1fr —— 业务/关于/合作 各自纵向堆叠，
     组内每条链接再单独占一行，合计 12 行、约 400px 高，
     屏幕高度被白白吃掉，而且每行只有一个词，读起来很散。
     改成：公司简介独占一行，三组并排成 3 列，链接在组内纵向排。
     375px 下每列约 105px，"供应商登记" 5 个字（约 60px）放得下。 */
  footer.ft .cols{
    grid-template-columns:repeat(3,1fr);
    gap:clamp(20px,5vw,28px) clamp(10px,3vw,18px);
    padding:26px 0 20px;
  }
  footer.ft .cols .about{grid-column:1 / -1}
  footer.ft .about p{max-width:none;margin-bottom:14px}
  footer.ft h5{font-size:13px;margin-bottom:8px}
}

/* ============================================================
   商务洽谈悬浮入口
   ------------------------------------------------------------
   全站常驻，右下角。点击弹出留言面板。

   ★ 为什么按钮是胶囊不是圆：圆按钮只放一个图标，访客不知道
     点了会发生什么；「商务洽谈」四个字是可读的意图。
     移动端收成圆（只留图标）—— 手机上每 1px 横向空间都要省，
     而手机上"联系"这个意图已经由顶部导航的按钮承担了。

   ★ 层级 z-index:80 —— 低于导航(90)、低于提示条(999)。
     悬浮元素压住导航是移动端最常见的可交互性缺陷。
   ============================================================ */
.talk{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:80}
.talk-btn{
  display:inline-flex;align-items:center;gap:8px;
  height:46px;padding:0 18px 0 15px;border:0;border-radius:23px;
  background:var(--blue);color:var(--on-dark);font-size:14px;font-weight:500;cursor:pointer;
  box-shadow:0 6px 20px rgba(26,107,174,.34);
  transition:transform .18s,box-shadow .18s,background .18s;
}
.talk-btn svg{width:20px;height:20px;flex-shrink:0}
.talk-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(26,107,174,.42)}
.talk-btn:active{transform:translateY(0)}
.talk-btn:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

.talk-mask{position:fixed;inset:0;background:rgba(6,22,36,.42);z-index:81}
.talk-panel{
  position:fixed;right:clamp(14px,2vw,26px);bottom:calc(clamp(14px,2vw,26px) + 58px);
  z-index:82;width:min(420px,calc(100vw - 28px));max-height:calc(100vh - 108px);
  overflow-y:auto;background:var(--bg);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 22px 60px rgba(9,48,73,.26);padding:20px 22px 18px;
}
.talk-x{
  position:absolute;top:10px;right:10px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:8px;background:transparent;color:var(--ink3);cursor:pointer;
}
.talk-x svg{width:16px;height:16px}
.talk-x:hover{background:var(--bg2);color:var(--ink)}
.talk-head h3{font-size:17px;font-weight:600;color:var(--ink);margin:0 0 6px}
.talk-head p{font-size:12.5px;line-height:1.65;color:var(--ink3);margin:0 0 14px;padding-right:26px}
.talk-body .fgrid{gap:10px 12px}
.talk-body .field label{font-size:12px;margin-bottom:5px}
.talk-body .field input,.talk-body .field select,.talk-body .field textarea{
  padding:9px 11px;font-size:13.5px;
}
.talk-body .formfoot{margin-top:12px;gap:10px}
.talk-body .formfoot .note{font-size:11.5px}
.talk-body .success{padding:18px 0 6px}

@media (max-width:640px){
  /* 手机上收成 52px 圆：只留图标。52 > 44 的触摸目标下限。 */
  .talk-btn{width:52px;height:52px;padding:0;border-radius:50%;justify-content:center}
  .talk-btn span{display:none}
  .talk-btn svg{width:22px;height:22px}
  /* 面板改成底部抽屉：拇指可达，且不会被键盘顶到屏幕外 */
  .talk-panel{
    left:0;right:0;bottom:0;width:auto;max-height:86vh;
    border-radius:16px 16px 0 0;padding:20px 18px calc(18px + env(safe-area-inset-bottom));
  }
  .talk-body .field input,.talk-body .field select,.talk-body .field textarea{font-size:16px}
}