/* ============================================================================
   鸣山机械 · 地域矩阵（GEO）前台样式 · PC 端
   ----------------------------------------------------------------------------
   文件：/static/gz/geo.css
   用途：全部地域页（子域通道 <city>.mensam.com.cn 与目录通道 /geo/<city>）
   设计：industrial light —— 浅底 + 白色卡片 + 品牌蓝，取代原 #0b1f38 深海蓝。
   纪律：本文件是地域页唯一真源。地域模板 HTML 内**不得**再出现 <style> 块，
         也不得用 style="..." 承载版式（仅允许极少量动态宽度/序号注入）。
   命名：.mg-* 前缀，与站点 site.css 的 .ms-* 完全隔离，互不干扰。
   --- 2026-10-16 老板指令：背景太深 → 换浅色；CSS 必须外链，不能在 HTML 里。
   ========================================================================== */


/* 整页底色：地域页是浅色主题，必须覆盖 pc/head.html · m/head.html 里的站点深底
   （#1F4E79 / #1B4670）。本文件在 head 之后加载，同权重后出现者胜。
   注意：head.html 里有内联 <style id="ms-first-bg">html{background-color:#1F4E79}</style>，
   普通元素选择器无法覆盖内联样式，因此这里必须用 !important。 */
html,body{background:#f2f6fa !important;background-image:none !important}
body{color:#152a42 !important}
html{color:#152a42 !important}

/* ============================================================================
   设计令牌提升到 :root（2026-10-16 修复 · 根因）
   ----------------------------------------------------------------------------
   原实现把 --mg-* 全部声明在 .mg{…} 内。但地域页的 .mg-topbar / .mg-nav / .mg-foot
   均位于 <main class="mg"> 之外（它们是 <body> 的直接子节点，与 <main> 平级），
   CSS 自定义属性只向「后代」继承，因此这三个区块及其子孙解析 var(--mg-*) 时取到
   初始（无效）值 —— 导航边框/悬停态/选中态全部失效，最致命的是
   .mg-navcta{background:var(--mg-red);color:#fff} 变成「白字 + 透明底」→ CTA 看不见。
   这正是「版面排版错乱、几个智能体找一下午没找到原因」的真凶：变量在文件里明明写了，
   作用域却不对。提升到 :root 后全局可用，且 --mg-* 命名空间与站点 .ms-* 完全隔离，无泄漏。
   ========================================================================== */
:root{
  --mg-bg:#f2f6fa;
  --mg-bg2:#e8f0f7;
  --mg-card:#ffffff;
  --mg-card2:#f7fbff;
  --mg-line:#dbe5ef;
  --mg-line2:#c3d4e5;
  --mg-ink:#152a42;
  --mg-txt:#31465e;
  --mg-dim:#63798f;
  --mg-brand:#1b5a95;
  --mg-brand2:#2f80cc;
  --mg-brand-l:#e9f3fc;
  --mg-red:#d4374a;
  --mg-ok:#1a7c58;
  --mg-shadow:0 1px 2px rgba(19,44,72,.05), 0 6px 18px -8px rgba(19,44,72,.14);
}
.mg{
  background:var(--mg-bg);
  color:var(--mg-txt);
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.mg *{box-sizing:border-box}
.mg-wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.mg a{color:inherit;text-decoration:none}
.mg img{max-width:100%;height:auto}

/* 键盘焦点环（UI/UX Pro Max · PRIORITY 1 无障碍）：地域页所有可聚焦元素统一可见焦点。
   覆盖到 .mg 之外的顶栏/导航/页脚（它们与 <main class="mg"> 平级），令牌现已在 :root 故随处可解析。 */
.mg a:focus-visible,
.mg-btn:focus-visible,
.mg-totop:focus-visible,
.mg-topbar a:focus-visible,
.mg-navlist a:focus-visible,
.mg-foot a:focus-visible{
  outline:2px solid var(--mg-brand2);
  outline-offset:2px;
  border-radius:6px;
}

/* ---------------------------------------------------------------- 页头 ---- */
.mg-topbar{background:#0f3f6b;color:#cfe4f7;font-size:13px}
.mg-topbar .mg-wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:38px;flex-wrap:wrap}
.mg-topbar p{margin:0}
.mg-topbar a{color:#eaf4ff;font-weight:700;white-space:nowrap}
.mg-topbar a:hover{color:#fff;text-decoration:underline}

.mg-nav{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--mg-line);
  box-shadow:0 1px 0 rgba(19,44,72,.03)}
.mg-nav .mg-wrap{display:flex;align-items:center;gap:18px;min-height:64px}
.mg-brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.mg-brand img{height:38px;width:auto;display:block}
.mg-brand b{font-size:18px;color:var(--mg-ink);letter-spacing:.5px;line-height:1.15}
.mg-brand i{display:block;font-style:normal;font-size:12px;color:var(--mg-dim);font-weight:400}
.mg-navlist{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:wrap}
.mg-navlist a{padding:8px 11px;border-radius:6px;font-size:14.5px;font-weight:600;color:var(--mg-txt);white-space:nowrap}
.mg-navlist a:hover{background:var(--mg-brand-l);color:var(--mg-brand)}
.mg-navlist a.is-on{color:var(--mg-brand);background:var(--mg-brand-l)}
.mg-navlist a.mg-navcta{background:var(--mg-red);color:#fff;padding:9px 15px}
.mg-navlist a.mg-navcta:hover{background:#bb2c3e;color:#fff}

/* ---------------------------------------------------------------- 首屏 ---- */
.mg-hero{
  padding:36px 0 30px;
  border-bottom:1px solid var(--mg-line);
  background:
    radial-gradient(820px 240px at 8% -20%, rgba(47,128,204,.14), transparent 62%),
    radial-gradient(680px 220px at 96% -10%, rgba(212,55,74,.07), transparent 60%),
    linear-gradient(180deg,#ffffff 0, var(--mg-bg) 100%);
}
.mg-crumb{font-size:13px;color:var(--mg-dim);display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 14px}
.mg-crumb li::after{content:"/";margin-left:8px;color:var(--mg-line2)}
.mg-crumb li:last-child::after{content:""}
.mg-crumb .cur{color:var(--mg-brand);font-weight:600}
.mg h1{font-size:30px;line-height:1.34;margin:0 0 12px;font-weight:800;letter-spacing:.3px;color:var(--mg-ink)}
.mg h1 em{font-style:normal;color:var(--mg-brand);font-size:.6em;font-weight:600;margin-left:10px}
.mg-lead{font-size:15px;line-height:1.9;color:var(--mg-txt);max-width:980px;margin:0 0 18px}

.mg-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.mg-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:8px;font-size:15px;font-weight:700;
  background:linear-gradient(180deg,#2f80cc,#1b5a95);border:1px solid #1b5a95;color:#fff;
  box-shadow:0 6px 14px -8px rgba(27,90,149,.75)}
.mg-btn:hover{background:linear-gradient(180deg,#3b8dd8,#1d64a4)}
.mg-btn--red{background:linear-gradient(180deg,#e04a5c,#c62f42);border-color:#c62f42;box-shadow:0 6px 14px -8px rgba(198,47,66,.75)}
.mg-btn--red:hover{background:linear-gradient(180deg,#ea5b6c,#cf374b)}
.mg-btn--gh{background:#fff;border:1px solid var(--mg-line2);color:var(--mg-brand);box-shadow:none}
.mg-btn--gh:hover{background:var(--mg-brand-l);border-color:var(--mg-brand2)}

.mg-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.mg-stat{background:var(--mg-card);border:1px solid var(--mg-line);border-radius:10px;padding:14px 16px;box-shadow:var(--mg-shadow)}
.mg-stat b{display:block;font-size:24px;color:var(--mg-brand);font-weight:800;line-height:1.15}
.mg-stat span{display:block;font-size:13px;color:var(--mg-dim);margin-top:6px}

/* ---------------------------------------------------------------- 版块 ---- */
.mg-sec{padding:32px 0}
.mg-sec+.mg-sec{border-top:1px solid var(--mg-line)}
.mg-sec--alt{background:var(--mg-bg2)}
.mg-h2{font-size:21px;font-weight:800;margin:0 0 6px;display:flex;align-items:center;gap:10px;color:var(--mg-ink)}
.mg-h2::before{content:"";width:4px;height:20px;border-radius:2px;background:var(--mg-brand2);display:inline-block;flex:0 0 auto}
.mg-sub{font-size:13.5px;color:var(--mg-dim);margin:0 0 18px}

.mg-grid{display:grid;gap:14px}
.mg-grid--5{grid-template-columns:repeat(5,1fr)}
.mg-grid--4{grid-template-columns:repeat(4,1fr)}
.mg-grid--3{grid-template-columns:repeat(3,1fr)}
.mg-grid--2{grid-template-columns:repeat(2,1fr)}

.mg-card{background:var(--mg-card);border:1px solid var(--mg-line);border-radius:10px;padding:16px 17px;
  transition:box-shadow .18s, border-color .18s, transform .18s;display:block;box-shadow:var(--mg-shadow)}
.mg-card:hover{border-color:var(--mg-brand2);transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(19,44,72,.06), 0 14px 26px -12px rgba(27,90,149,.30)}
.mg-card .t{font-size:15.5px;font-weight:700;margin:0 0 7px;color:var(--mg-ink);line-height:1.45}
.mg-card .d{font-size:13px;color:var(--mg-dim);line-height:1.75;margin:0 0 10px;min-height:44px}
.mg-card .d:last-child{margin-bottom:0}

.mg-tags{display:flex;gap:6px;flex-wrap:wrap}
.mg-tag{font-size:12px;padding:3px 9px;border-radius:20px;background:var(--mg-brand-l);border:1px solid #cfe3f5;color:var(--mg-brand)}
.mg-tag--s{background:#f6f8fb;border-color:var(--mg-line);color:var(--mg-dim)}
.mg-tag--hot{background:#fdeef0;border-color:#f6cdd3;color:var(--mg-red)}

.mg-svc{display:flex;align-items:center;gap:12px;background:var(--mg-card);border:1px solid var(--mg-line);
  border-radius:10px;padding:14px 16px;box-shadow:var(--mg-shadow);transition:border-color .18s, box-shadow .18s}
.mg-svc:hover{border-color:var(--mg-brand2);box-shadow:0 2px 4px rgba(19,44,72,.06), 0 14px 26px -12px rgba(27,90,149,.28)}
.mg-svc i{width:36px;height:36px;flex:0 0 36px;border-radius:9px;display:grid;place-items:center;
  background:var(--mg-brand-l);border:1px solid #cfe3f5;color:var(--mg-brand);font-style:normal;font-weight:800;font-size:14px}
.mg-svc b{display:block;font-size:15px;margin-bottom:3px;color:var(--mg-ink)}
.mg-svc span{font-size:13px;color:var(--mg-dim);line-height:1.7}

/* ---------------------------------------------------------------- 正文 ---- */
.mg-text{font-size:15px;line-height:2.0;color:var(--mg-txt)}
.mg-text p{margin:0 0 14px}
.mg-text h3{font-size:16.5px;color:var(--mg-ink);margin:24px 0 10px;font-weight:800}
.mg-text h3:first-child{margin-top:0}
.mg-quote{background:var(--mg-brand-l);border-left:3px solid var(--mg-brand2);border-radius:0 8px 8px 0;
  padding:16px 18px;font-size:14.5px;line-height:1.95;color:var(--mg-txt)}
.mg-quote a{color:var(--mg-brand);font-weight:700}

/* ---------------------------------------------------------------- 表格 ---- */
.mg-tablewrap{overflow-x:auto;border:1px solid var(--mg-line);border-radius:10px;background:var(--mg-card);box-shadow:var(--mg-shadow)}
.mg-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:780px}
.mg-table th,.mg-table td{padding:11px 12px;text-align:left;border-bottom:1px solid #eaf0f6;vertical-align:top}
.mg-table th{background:#eef4fa;color:var(--mg-brand);font-weight:700;white-space:nowrap}
.mg-table tr:last-child td{border-bottom:0}
.mg-table tbody tr:hover{background:#f8fbfe}
.mg-table .nm{color:var(--mg-ink);font-weight:700;white-space:nowrap}

/* ---------------------------------------------------------------- 链接 ---- */
.mg-links{display:flex;flex-wrap:wrap;gap:8px}
.mg-links a{font-size:13.5px;padding:7px 13px;border-radius:20px;background:var(--mg-card);
  border:1px solid var(--mg-line);color:var(--mg-txt);box-shadow:0 1px 2px rgba(19,44,72,.04)}
.mg-links a:hover{border-color:var(--mg-brand2);color:var(--mg-brand);background:var(--mg-brand-l)}
.mg-links span{font-size:13.5px;padding:7px 13px;border-radius:20px;background:#f4f6f9;
  border:1px dashed var(--mg-line2);color:var(--mg-dim)}

/* ---------------------------------------------------------------- 资讯 ---- */
.mg-news{display:grid;gap:10px}
.mg-new{display:flex;gap:12px;align-items:baseline;padding:12px 14px;background:var(--mg-card);
  border:1px solid var(--mg-line);border-radius:8px}
.mg-new time{font-size:12.5px;color:var(--mg-dim);flex:0 0 86px}
.mg-new a{font-size:14.5px;line-height:1.65;color:var(--mg-txt)}
.mg-new a:hover{color:var(--mg-brand);text-decoration:underline}

/* ---------------------------------------------------------------- FAQ ----- */
.mg-faq{margin:0}
.mg-faq dt{font-size:15px;font-weight:800;margin:18px 0 6px;color:var(--mg-ink);padding-left:16px;position:relative}
.mg-faq dt::before{content:"Q";position:absolute;left:0;top:1px;font-size:12px;color:var(--mg-brand2);font-weight:800}
.mg-faq dt:first-child{margin-top:0}
.mg-faq dd{margin:0;font-size:14.5px;line-height:1.95;color:var(--mg-txt);padding-left:16px}

.mg-note{font-size:13px;color:var(--mg-dim);line-height:1.9;margin-top:14px;padding:12px 14px;
  border:1px dashed var(--mg-line2);border-radius:8px;background:#f8fafc}

/* ------------------------------------------------------------ 规格盒 ----- */
.mg-spec{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mg-specbox{background:var(--mg-card);border:1px solid var(--mg-line);border-radius:8px;padding:12px 14px}
.mg-specbox b{display:block;font-size:13.5px;color:var(--mg-brand);margin-bottom:6px;font-weight:700}
.mg-specbox span{font-size:12.5px;color:var(--mg-dim);line-height:1.8;display:block}
.mg-specbox em{font-style:normal;color:var(--mg-txt)}

/* ------------------------------------------------------------ 步骤 ------- */
.mg-steps{counter-reset:mg;display:grid;gap:10px}
.mg-step{position:relative;padding:14px 16px 14px 54px;background:var(--mg-card);border:1px solid var(--mg-line);border-radius:8px}
.mg-step::before{counter-increment:mg;content:counter(mg);position:absolute;left:15px;top:13px;width:25px;height:25px;
  border-radius:7px;display:grid;place-items:center;background:var(--mg-brand-l);border:1px solid #cfe3f5;
  color:var(--mg-brand);font-size:12.5px;font-weight:800}
.mg-step b{display:block;font-size:14.5px;margin-bottom:4px;color:var(--mg-ink)}
.mg-step span{font-size:13.5px;color:var(--mg-dim);line-height:1.85}

/* ------------------------------------------------- 关键词矩阵/锚点簇 ---- */
.mg-kws{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.mg-kws a,.mg-kws span{font-size:13px;padding:6px 12px;border-radius:6px;background:#fff;
  border:1px solid var(--mg-line);color:var(--mg-brand)}
.mg-kws a:hover{border-color:var(--mg-brand2);background:var(--mg-brand-l)}
.mg-kws b{font-weight:700}

/* ------------------------------------------------------------ 报价页 ----- */
.mg-quote-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start}
.mg-panel{background:var(--mg-card);border:1px solid var(--mg-line);border-radius:12px;padding:22px;box-shadow:var(--mg-shadow)}
.mg-panel h3{margin:0 0 12px;font-size:17px;color:var(--mg-ink);font-weight:800}
.mg-rows{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.mg-rows li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--mg-txt)}
.mg-rows i{flex:0 0 22px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--mg-brand-l);
  color:var(--mg-brand);font-style:normal;font-size:12px;font-weight:800;margin-top:2px}
.mg-telbig{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:10px;
  background:linear-gradient(135deg,#1b5a95,#2f80cc);color:#fff;margin-bottom:14px}
.mg-telbig span{font-size:12.5px;opacity:.85}
.mg-telbig b{font-size:26px;letter-spacing:1px;font-variant-numeric:tabular-nums}
.mg-telbig em{font-style:normal;font-size:13.5px;opacity:.9}

/* ------------------------------------------------------------ 页脚 ------- */
.mg-foot{background:#0f3f6b;color:#c6dcf0;margin-top:8px;font-size:13.5px}
.mg-foot-in{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:26px;padding:34px 0 24px}
.mg-foot h3{color:#fff;font-size:15px;margin:0 0 12px;font-weight:800}
.mg-foot p{margin:0 0 10px;line-height:1.9}
.mg-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mg-foot a{color:#c6dcf0}
.mg-foot a:hover{color:#fff;text-decoration:underline}
.mg-foot .mg-foot-brand b{display:block;color:#fff;font-size:17px;margin-bottom:8px;letter-spacing:.5px}
.mg-foot ul+h3{margin-top:18px}
.mg-foot ul{gap:8px}
.mg-foot ul a{display:inline-block}
.mg-foot-bot{border-top:1px solid rgba(255,255,255,.14);padding:16px 0 26px;display:flex;gap:8px 18px;flex-wrap:wrap;
  align-items:center;font-size:12.5px;color:#9fbdd8}
.mg-foot-bot a{color:#9fbdd8}
.mg-foot-tel{display:flex;flex-direction:column;gap:6px}
.mg-foot-tel b{color:#fff;font-size:20px;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------ 回到顶部 --- */
.mg-totop{position:fixed;right:20px;bottom:26px;z-index:70;width:42px;height:42px;border:1px solid var(--mg-line2);
  background:#fff;color:var(--mg-brand);border-radius:50%;display:none;place-items:center;cursor:pointer;
  box-shadow:0 6px 16px -6px rgba(19,44,72,.35)}
.mg-totop.is-on{display:grid}
.mg-totop svg{width:18px;height:18px}

/* ------------------------------------------------------------ 响应式 ---- */
@media(max-width:1100px){
  .mg-stats{grid-template-columns:repeat(3,1fr)}
  .mg-grid--5,.mg-grid--4{grid-template-columns:repeat(3,1fr)}
  .mg-foot-in{grid-template-columns:1fr 1fr;gap:22px}
}
@media(max-width:900px){
  .mg-navlist{display:none}
  .mg-grid--5,.mg-grid--4,.mg-grid--3{grid-template-columns:repeat(2,1fr)}
  .mg-spec{grid-template-columns:repeat(2,1fr)}
  .mg-quote-grid{grid-template-columns:1fr}
  .mg h1{font-size:25px}
}
@media(max-width:640px){
  .mg-grid--5,.mg-grid--4,.mg-grid--3,.mg-grid--2,.mg-spec{grid-template-columns:1fr}
  .mg-stats{grid-template-columns:repeat(2,1fr)}
  .mg h1{font-size:22px}
  .mg h1 em{display:block;margin:6px 0 0}
  .mg-lead{font-size:14.5px}
  .mg-sec{padding:26px 0}
  .mg-foot-in{grid-template-columns:1fr}
}