/* 山东贝特智联表计股份有限公司 · 官网设计系统（纯手写 CSS，无框架无构建）
   分区：01 令牌 02 基础排版 03 按钮 04 头部 05 搜索浮层 06 移动抽屉 07 页脚 08 悬浮条 09 弹窗表单
        10 首页 11 内页横幅 12 列表卡片 13 分页 14 详情 15 单页联系 16 搜索页 17 404 18 空状态
        19 动效 20 响应式 21 无障碍
   令牌语义对照表见仓库 output/ui-review/87-token-table.md */

/* ---------- 01 设计令牌（全站唯一权威来源；语义对照表见 output/ui-review/87-token-table.md） ---------- */
:root{
  /* 品牌色 */
  --brand:#1e5eff; --brand-600:#3b76ff; --brand-400:#4b82ff;
  --brand-050:#f2f6ff;
  --brand-100:#e6eeff;
  --brand-200:#c9dbff;
  --brand-a10:rgba(30,94,255,.10);
  --brand-a14:rgba(30,94,255,.14);
  --brand-a16:rgba(30,94,255,.16);
  /* 深色墨蓝 */
  --navy:#152747; --navy-900:#0f1d38; --navy-700:#1c3357;
  /* 文字四级 + 深色底文字 */
  --ink:#1b2430;
  --ink-body:#2c3742;
  --ink-2:#5b6878;
  --ink-3:#8d99a8;
  --on-dark:#fff; --on-dark-2:rgba(255,255,255,.86); --on-dark-3:rgba(255,255,255,.66);
  /* 背景 */
  --surface:#fff;
  --bg:#f6f8fc;
  --bg-warm:#eef2f9;
  --bg-warm-2:#e9eefa;
  --bg-soft:#fbfcfe;
  --bg-media:#f5f7fb; --bg-media-2:#eef2f8;
  /* 边框 */
  --line:#e5eaf1;
  --line-2:#eef2f7;
  /* 状态色：成功 / 警告 / 危险 */
  --ok-ink:#047857; --ok:#16a34a; --ok-600:#22c55e; --ok-bg:#ecfdf5; --ok-line:#a7f3d0;
  --warn-ink:#c2761a; --warn-bg:#fff5e8; --warn-line:#ffe0bb;
  --err:#d03050; --err-ink:#b91c1c; --err-bg:#fef2f2; --err-bg-2:#fdf1f3; --err-line:#fecaca;
  --ico-empty:#c8d2e0;
  /* 代码块 */
  --code-bg:#0f172a; --code-ink:#e2e8f0; --code-bg-2:#f1f5f9;
  /* 遮罩与玻璃 */
  --scrim:rgba(15,27,48,.60);
  --scrim-media:rgba(21,39,71,.62);
  --scrim-lb:rgba(7,13,24,.97);
  --glass:rgba(255,255,255,.12); --glass-h:rgba(255,255,255,.24);
  --hd-glass:rgba(255,255,255,.88); --hd-glass-2:rgba(255,255,255,.96);
  --w-42:rgba(255,255,255,.42); --w-70:rgba(255,255,255,.70);
  --w-50:rgba(255,255,255,.50);
  --w-92:rgba(255,255,255,.92);
  --cta-ring:rgba(255,255,255,.07); --cta-dot:rgba(255,255,255,.08);
  --mask-opaque:#000;
  /* 渐变 */
  --grad-brand:linear-gradient(135deg,var(--brand-600),var(--brand));
  --grad-banner:linear-gradient(140deg,#f3f7fe 0%,#e8effb 60%,#e3ecfa 100%);
  --grad-hero-text:radial-gradient(1100px 560px at 88% 12%,var(--brand-a14),transparent 60%),radial-gradient(800px 480px at 6% 92%,var(--brand-a10),transparent 55%),linear-gradient(155deg,#f8fafd 0%,#f0f4fb 55%,#eaf0fa 100%);
  --grad-hero-scrim:linear-gradient(to bottom,rgba(10,20,40,.16) 0%,rgba(10,20,40,0) 32%,rgba(10,20,40,.30) 100%);
  --grad-media:linear-gradient(140deg,var(--bg-media),var(--bg-media-2));
  --grad-media-v:linear-gradient(160deg,#f7f9fc,var(--bg-media-2));
  --grad-sec:linear-gradient(180deg,var(--bg-warm),var(--bg-warm-2));
  --grad-cta:radial-gradient(640px 420px at 50% -12%,var(--brand-a16),transparent 70%),radial-gradient(420px 340px at 6% 112%,var(--brand-a10),transparent 70%),linear-gradient(160deg,var(--navy-900) 0%,var(--navy) 58%,var(--navy-700) 100%);
  --grad-ok:linear-gradient(135deg,var(--ok-600),var(--ok));
  --grad-mark:linear-gradient(transparent 62%,var(--brand-a16) 62%);
  /* 圆角 */
  --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-full:999px;
  /* 阴影与焦点环 */
  --sh-1:0 1px 2px rgba(21,39,71,.04),0 2px 8px rgba(21,39,71,.05);
  --sh-2:0 6px 18px rgba(21,39,71,.07);
  --sh-3:0 18px 44px rgba(21,39,71,.13);
  --sh-brand:0 8px 20px rgba(30,94,255,.26);
  --sh-brand-h:0 14px 30px rgba(30,94,255,.34);
  --sh-sheet:-18px 0 44px rgba(21,39,71,.22);
  --sh-ico:0 4px 14px rgba(21,39,71,.16);
  --sh-pop:0 30px 80px rgba(0,0,0,.5);
  --sh-field:0 20px 60px rgba(0,0,0,.30);
  --sh-ok:0 10px 26px rgba(34,197,94,.35);
  --ring:0 0 0 3px rgba(30,94,255,.12);
  --ring-dark:0 0 0 3px rgba(30,94,255,.45);
  /* 字号与行高 */
  --fs-3xs:11px; --fs-2xs:12px; --fs-xs:13px; --fs-sm:14px;
  --fs-base:15px; --fs-md:16px; --fs-lg:17px; --fs-xl:20px;
  --fs-2xl:24px; --fs-4xl:36px;
  --fs-display:clamp(40px,5.2vw,68px);
  --fs-h1:clamp(26px,3.2vw,40px);
  --fs-h2:clamp(28px,3.4vw,42px);
  --fs-title:clamp(24px,2.6vw,32px);
  --fs-sub:clamp(24px,2.8vw,34px);
  --fs-h3:clamp(20px,2.4vw,28px);
  --fs-cta:clamp(24px,3vw,38px);
  --fs-404:clamp(84px,12vw,140px);
  --lh-base:1.8; --lh-read:1.9;
  /* 间距（8px 基准 8/12/16/24/32/48/64） */
  --gap-1:8px; --gap-2:12px; --gap-3:16px; --gap-4:24px;
  --gap-5:32px; --gap-6:48px; --gap-7:64px;
  --gutter:28px; --gutter-sm:20px;
  --sec-pad:104px;
  /* 版式 / 顶栏 / 动效 */
  --read-w:800px;
  --side-w:300px;
  --wrap-w:1240px;
  --pad-card-y:var(--gap-6);
  --pad-card-x:52px;
  --hd-h:84px; --hd-h-sm:64px;
  --sticky-top:calc(var(--hd-h) + var(--gap-4));
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 02 基础与排版 ---------- */ *{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-y:scroll;scrollbar-gutter:stable}
body{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:var(--fs-base);line-height:var(--lh-base);color:var(--ink);background:var(--surface);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
img{max-width:100%;display:block;height:auto}
 a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,h5{line-height:1.35;color:var(--navy)}
.wrap{max-width:var(--wrap-w);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:940px}
::selection{background:var(--brand);color:var(--on-dark)}
/* ---------- 03 按钮 ---------- */ .btn-gold{display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-1);padding:14px 36px;border-radius:var(--r-full);border:none;cursor:pointer;background:var(--grad-brand);color:var(--on-dark);font-weight:700;font-size:var(--fs-base);letter-spacing:.5px;box-shadow:var(--sh-brand);transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s;}
.btn-gold:hover{transform:translateY(-2px);box-shadow:var(--sh-brand-h)}
.btn-gold:active{transform:translateY(0)}
.btn-gold[disabled]{opacity:.6;cursor:not-allowed;transform:none}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-1);padding:13px var(--gap-5);border-radius:var(--r-full);border:1.5px solid var(--brand);color:var(--brand);font-size:var(--fs-base);font-weight:600;background:transparent;transition:background .25s,color .25s,transform .25s var(--ease),border-color .25s;}
.btn-ghost:hover{background:var(--brand);color:var(--on-dark);transform:translateY(-2px)}
.btn-line{display:inline-flex;align-items:center;gap:var(--gap-1);padding:10px 26px;border:1px solid var(--brand-200);color:var(--brand);background:var(--surface);border-radius:var(--r-full);font-size:var(--fs-sm);letter-spacing:.5px;transition:.25s var(--ease);}
.btn-line:hover{background:var(--brand);border-color:var(--brand);color:var(--on-dark);box-shadow:var(--sh-brand-h)}
.btn-line.dark{border-color:var(--brand);color:var(--brand)}
.btn-line.dark:hover{background:var(--brand);color:var(--on-dark)}
 .more-link{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-weight:600;font-size:var(--fs-sm)}
.more-link i{font-style:normal;transition:transform .25s var(--ease)}
.more-link:hover i{transform:translateX(4px)}
/* ---------- 04 头部导航 ---------- */ .hd{position:sticky;top:0;z-index:60;background:var(--hd-glass);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid transparent;transition:box-shadow .3s var(--ease),background .3s,border-color .3s;}
.hd.scrolled{background:var(--hd-glass-2);border-bottom-color:var(--line);box-shadow:var(--sh-2)}
/* 头部高度固定（避免滚动时改变文档流引起 CLS），仅内部元素做“收窄”观感 */ .hd-in{display:flex;align-items:center;gap:var(--gap-3);height:var(--hd-h);transition:height .3s var(--ease)}
.hd-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;padding:4px 0}
.hd-logo img{height:42px;width:auto;transition:height .3s var(--ease)}
.hd.scrolled .hd-logo img{height:36px}
.hd-logo strong{font-size:var(--fs-xl);color:var(--navy);letter-spacing:2px;font-weight:800;white-space:nowrap}
.hd-nav{display:flex;align-items:center;gap:2px;flex:1;justify-content:center;min-width:0}
.hd-item{position:relative}
.hd-link{position:relative;display:block;padding:var(--gap-2) var(--gap-3);border-radius:var(--r-sm);font-size:var(--fs-base);font-weight:600;color:var(--ink);white-space:nowrap;transition:color .22s,background .22s;}
.hd-link::after{content:"";position:absolute;left:16px;right:16px;bottom:5px;height:2px;border-radius:var(--r-full);background:linear-gradient(90deg,var(--brand),var(--brand-600));transform:scaleX(0);transform-origin:center;transition:transform .3s var(--ease);}
.hd-link:hover{color:var(--brand);background:var(--brand-050)}
.hd-item.on>.hd-link,.hd-link.on{color:var(--brand);background:transparent}
.hd-item.on>.hd-link::after,.hd-link.on::after,.hd-item:hover>.hd-link::after{transform:scaleX(1)}
 .hd-item.has-drop>.hd-link{padding-right:var(--gap-5)}
.hd-item.has-drop>.hd-link::before{content:"";position:absolute;right:15px;top:50%;width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-70%) rotate(45deg);opacity:.5;transition:transform .25s var(--ease),opacity .25s;}
.hd-item.has-drop:hover>.hd-link::before, .hd-item.has-drop:focus-within>.hd-link::before{transform:translateY(-30%) rotate(225deg);opacity:1}
 .hd-drop{position:absolute;top:calc(100% + 12px);left:50%;min-width:216px;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);opacity:0;visibility:hidden;transform:translate(-50%,10px);transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s;}
/* 指针过渡区，避免鼠标移动中面板消失 */ .hd-drop::after{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.hd-drop::before{content:"";position:absolute;top:-6px;left:50%;width:11px;height:11px;background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:translateX(-50%) rotate(45deg);border-radius:2px 0 0 0;}
.hd-item:hover .hd-drop,.hd-item:focus-within .hd-drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.hd-drop-h{font-size:var(--fs-3xs);letter-spacing:2px;color:var(--ink-3);text-transform:uppercase;padding:6px 14px var(--gap-1);border-bottom:1px dashed var(--line-2);margin-bottom:6px;}
.hd-drop a{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-2);padding:10px 14px;border-radius:var(--r-sm);font-size:var(--fs-sm);color:var(--ink);transition:background .2s,color .2s,padding .25s var(--ease);}
.hd-drop a i{font-style:normal;width:5px;height:5px;flex-shrink:0;border-right:1.6px solid var(--brand);border-top:1.6px solid var(--brand);transform:rotate(45deg);opacity:0;transition:opacity .2s,transform .25s var(--ease);}
.hd-drop a:hover{background:var(--brand-050);color:var(--brand);padding-left:18px}
.hd-drop a:hover i{opacity:1}
.hd-right{display:flex;align-items:center;gap:var(--gap-2);flex-shrink:0}
/* 顶部内嵌搜索框：宽屏显示输入框+按钮，窄屏回退为放大镜图标（打开全屏搜索） */
.hd-search-form{display:flex;align-items:stretch;height:36px;border:1px solid var(--line);border-radius:var(--r-full);overflow:hidden;background:var(--surface);transition:border-color .22s,box-shadow .22s;}
.hd-search-form:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-a10)}
.hd-search-form input{width:150px;border:none;outline:none;padding:0 14px;font-size:var(--fs-xs);color:var(--ink);background:transparent;font-family:inherit;}
.hd-search-form input::placeholder{color:var(--ink-3)}
.hd-search-form button{display:inline-flex;align-items:center;gap:5px;border:none;cursor:pointer;padding:0 16px;background:var(--grad-brand);color:var(--on-dark);font-size:var(--fs-xs);font-weight:600;font-family:inherit;white-space:nowrap;transition:filter .22s;}
.hd-search-form button:hover{filter:brightness(1.08)}
.hd-search-btn{display:none;width:40px;height:40px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;align-items:center;justify-content:center;transition:.25s var(--ease);}
.hd-search-btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-050);transform:translateY(-1px)}
/* 电话：小巧的品牌文字链接（不再用大胶囊按钮） */
.hd-tel{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-full);border:1px solid var(--brand-200);color:var(--brand);font-weight:700;font-size:var(--fs-xs);letter-spacing:.5px;white-space:nowrap;transition:.25s var(--ease);}
.hd-tel:hover{background:var(--brand-050);border-color:var(--brand)}
.hd-tel svg{flex-shrink:0;opacity:.85}
.hd-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 10px;background:none;border:none;cursor:pointer;border-radius:var(--r-sm);}
.hd-burger i{display:block;width:24px;height:2px;background:var(--ink);border-radius:var(--r-full);transition:transform .3s var(--ease),opacity .2s}
.hd-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hd-burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.hd-burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ---------- 05 全屏搜索浮层 ---------- */ .search-overlay{position:fixed;inset:0;z-index:100;background:var(--scrim);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;}
.search-overlay.open{opacity:1;visibility:visible}
.search-inner{width:min(660px,90vw);text-align:center;transform:translateY(18px);transition:transform .35s var(--ease)}
.search-overlay.open .search-inner{transform:none}
.search-tip{display:block;color:var(--on-dark-2);font-size:var(--fs-sm);letter-spacing:2px;margin-bottom:22px}
.search-inner input{width:100%;padding:18px 28px;font:inherit;font-size:var(--fs-lg);border:none;border-radius:var(--r-full);outline:none;background:var(--surface);color:var(--ink);box-shadow:var(--sh-field);}
.search-inner button{margin-top:22px;padding:13px 46px;border:none;border-radius:var(--r-full);background:var(--grad-brand);color:var(--on-dark);font-size:var(--fs-base);font-weight:700;letter-spacing:2px;cursor:pointer;transition:.3s var(--ease);}
.search-inner button:hover{transform:translateY(-2px);box-shadow:var(--sh-brand-h)}
.search-close{position:absolute;top:calc(22px + env(safe-area-inset-top,0px));right:calc(30px + env(safe-area-inset-right,0px));width:48px;height:48px;border-radius:var(--r-full);background:var(--glass);border:none;color:var(--on-dark);font-size:var(--fs-2xl);line-height:1;cursor:pointer;opacity:.9;transition:.25s;}
.search-close:hover{opacity:1;background:var(--glass-h);transform:rotate(90deg)}
/* ---------- 06 移动端抽屉导航（全屏浮层 + 右侧抽屉） ----------
   硬约束：关闭按钮必须永远可达。
   因此抽屉是 position:fixed;inset:0 的全屏浮层，面板内部用 flex 纵向三段：
     .mnav-head  flex:none        品牌 + 关闭按钮（不参与滚动）
     .mnav-body  flex:1 overflow-y:auto   唯一可滚动区域
     .mnav-foot  flex:none        电话 / 在线留言（钉在抽屉底部）
   桌面端整体 display:none，不参与布局。z-index 90：高于粘性头部(60)、悬浮条(80)、
   回顶按钮(80)，低于搜索浮层(100)、留言弹窗(110)、灯箱(120)。 */ .mnav{position:fixed;inset:0;z-index:90;display:none;visibility:hidden;opacity:0;pointer-events:none;overscroll-behavior:contain;transition:opacity .28s var(--ease),visibility .3s;}
.mnav.open{visibility:visible;opacity:1;pointer-events:auto}
.mnav-mask{position:absolute;inset:0;background:var(--scrim);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);}
.mnav-panel{position:absolute;top:0;right:0;bottom:0;/* 左侧留出 ≥48px 遮罩带：这是一块「点空白处关闭」的可点区域 */ width:min(420px,calc(100% - 48px));display:flex;flex-direction:column;min-height:0;background:var(--surface);box-shadow:var(--sh-sheet);transform:translateX(101%);transition:transform .34s var(--ease);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);}
.mnav.open .mnav-panel{transform:none}
 .mnav-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(9px + env(safe-area-inset-top,0px)) 14px 9px 20px;border-bottom:1px solid var(--line);background:var(--surface);box-shadow:var(--sh-1);position:relative;z-index:2;}
.mnav-brand{display:flex;align-items:center;min-width:0;padding:5px 0}
.mnav-brand img{height:30px;width:auto;max-width:180px;object-fit:contain}
.mnav-brand strong{font-size:var(--fs-lg);font-weight:800;letter-spacing:1px;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
 .mnav-close{flex:none;width:46px;height:46px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r-full);background:var(--surface);color:var(--navy);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s,border-color .2s,color .2s,transform .18s var(--ease);}
.mnav-close:active{transform:scale(.94);background:var(--brand-100)}
/* 主体：抽屉内唯一滚动容器 */ .mnav-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:var(--gap-3) 20px 22px;}
.mnav-search{position:relative;display:flex;align-items:center;margin-bottom:14px}
.mnav-search input{width:100%;padding:var(--gap-2) var(--gap-6) var(--gap-2) 18px;border:1px solid var(--line);border-radius:var(--r-full);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-md);outline:none;transition:border-color .2s,background .2s,box-shadow .2s;}
.mnav-search input:focus{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 3px var(--brand-a10)}
.mnav-search-go{position:absolute;right:2px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--r-full);background:transparent;color:var(--ink-3);cursor:pointer;transition:color .2s,background .2s;}
 .mnav-nav{display:flex;flex-direction:column}
.mnav-link,.mnav-t{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:52px;padding:9px 4px;border:none;border-bottom:1px solid var(--line-2);background:none;text-align:left;color:var(--ink);font-family:inherit;font-weight:600;font-size:var(--fs-md);line-height:1.5;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s,background .2s;}
.mnav-nav>.mnav-link:last-child,.mnav-nav>.mnav-item:last-child>.mnav-t{border-bottom:none}
.mnav-t i{flex:none;font-style:normal;width:8px;height:8px;margin-right:6px;border-right:1.8px solid var(--ink-3);border-bottom:1.8px solid var(--ink-3);transform:rotate(45deg);transition:transform .3s var(--ease),border-color .25s;}
.mnav-t[aria-expanded="true"]{color:var(--brand)}
.mnav-t[aria-expanded="true"] i{border-color:var(--brand);transform:rotate(225deg)}
/* 子栏目手风琴：grid-template-rows 0fr→1fr 做展开动画（不支持时退化为直接显隐） */ .mnav-sub-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
.mnav-sub-wrap.open{grid-template-rows:1fr}
.mnav-sub{overflow:hidden;visibility:hidden;background:var(--brand-050);border-radius:var(--r-sm);transition:visibility .32s;}
.mnav-sub-wrap.open .mnav-sub{visibility:visible}
.mnav-sub a{display:flex;align-items:center;min-height:46px;padding:6px var(--gap-3);color:var(--ink-2);font-size:var(--fs-base);line-height:1.5;-webkit-tap-highlight-color:transparent;transition:color .2s,background .2s;}
.mnav-sub a:first-child{margin-top:var(--gap-1);color:var(--ink);font-weight:600}
.mnav-sub a:last-child{margin-bottom:var(--gap-1)}
.mnav-sub a:focus{color:var(--brand);background:var(--surface)}
/* 抽屉底部 CTA：flex:none，不随主体滚动；含 iPhone 底部横条安全区 */ .mnav-foot{flex:none;display:flex;flex-wrap:wrap;gap:10px;padding:var(--gap-2) var(--gap-3) calc(var(--gap-2) + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--surface);box-shadow:var(--sh-1);}
.mnav-cta{flex:1 1 132px;min-width:0;min-height:48px;padding:0 var(--gap-2);display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--r-full);font-family:inherit;font-size:var(--fs-sm);font-weight:700;letter-spacing:.2px;cursor:pointer;white-space:nowrap;overflow:hidden;-webkit-tap-highlight-color:transparent;transition:transform .2s var(--ease),box-shadow .2s,background .2s,color .2s,border-color .2s;}
.mnav-cta svg{flex:none}
.mnav-cta-tel{background:var(--grad-brand);border:1.5px solid transparent;color:var(--on-dark);box-shadow:var(--sh-brand);}
.mnav-cta-msg{border:1.5px solid var(--brand-200);background:var(--surface);color:var(--brand)}
.mnav-cta:active{transform:scale(.97)}
/* hover 只在支持 hover 的设备生效：触屏点完不会残留 hover 高亮 */ @media (hover:hover){.mnav-close:hover{background:var(--brand-050);border-color:var(--brand-200);color:var(--brand)}
.mnav-search-go:hover{color:var(--brand);background:var(--brand-050)}
.mnav-link:hover,.mnav-t:hover{color:var(--brand)}
.mnav-sub a:hover{color:var(--brand);background:var(--surface)}
.mnav-cta-msg:hover{background:var(--brand);border-color:var(--brand);color:var(--on-dark)}
}
 @media (hover:none){.mnav-link:active,.mnav-t:active{background:var(--brand-050);color:var(--brand)}
.mnav-sub a:active{background:var(--surface);color:var(--brand)}
.mnav-search-go:active{color:var(--brand);background:var(--brand-050)}
.mnav-cta-tel:active{box-shadow:var(--sh-brand)}
.mnav-cta-msg:active{background:var(--brand);border-color:var(--brand);color:var(--on-dark)}
}
/* ---------- 07 页脚 ---------- */ .ft{background:var(--bg-warm);color:var(--ink-2);border-top:1px solid var(--line);margin-top:0}
.ft-grid{display:grid;grid-template-columns:1.7fr 1fr 1.1fr .8fr;gap:var(--gap-6);padding:var(--gap-7) var(--gutter) 40px}
.ft-logo{height:36px;width:auto;margin-bottom:var(--gap-3)}
.ft-about p{font-size:var(--fs-xs);line-height:1.95;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;max-width:34em}
.ft-col h5{color:var(--navy);font-size:var(--fs-sm);margin-bottom:18px;position:relative;padding-bottom:10px;letter-spacing:1px;}
.ft-col h5::after{content:"";position:absolute;left:0;bottom:0;width:22px;height:2px;background:var(--brand);border-radius:var(--r-full)}
.ft-col p{font-size:var(--fs-xs);margin-bottom:9px;line-height:1.7}
.ft-col p b{color:var(--navy);font-weight:600}
.ft-links{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap-1) var(--gap-3)}
.ft-links a{font-size:var(--fs-xs);transition:color .25s,transform .25s var(--ease);display:inline-block}
.ft-links a:hover{color:var(--brand);transform:translateX(3px)}
/* 快捷入口里的「在线留言」：与其他链接一致的纯文本链接，品牌蓝色 */
.ft-links .ft-msg-link{color:var(--brand);cursor:pointer}
.ft-links .ft-msg-link:hover{color:var(--brand-600)}
.ft-qr img{width:96px;height:96px;border-radius:var(--r-sm);background:var(--surface);padding:5px;border:1px solid var(--line)}
.ft-qr p{font-size:var(--fs-2xs);margin-top:var(--gap-1)}
.ft-bar{border-top:1px solid var(--line);padding:18px 0;font-size:var(--fs-2xs);color:var(--ink-3)}
.ft-bar .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--gap-1)}
.ft-bar-links{display:flex;gap:18px}
.ft-bar-links a{color:var(--ink-3);transition:color .25s}
.ft-bar-links a:hover{color:var(--brand)}
.ft-tel{color:var(--navy);font-weight:700;font-size:var(--fs-md);display:block;margin-bottom:6px}
/* ---------- 08 右侧悬浮工具条 ---------- */
/* 默认可见（无 JS 也可用）；滚动超过 260px 后 JS 加 .show 做轻微入场动画，之后全程常显
   （含页脚——「回顶」在页面底部最常用；早期版本会在页脚处隐藏，已废弃）。 */ .float-bar{position:fixed;right:16px;bottom:32%;z-index:80;display:flex;flex-direction:column;gap:var(--gap-1);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;}
.float-bar.show{animation:fbIn .4s var(--ease)}
@keyframes fbIn{from{opacity:0;transform:translateX(10px)}
to{opacity:1;transform:none}
}
.fb-item{position:relative;width:54px;padding:10px 0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:var(--fs-3xs);box-shadow:var(--sh-1);transition:.25s var(--ease);}
.fb-item:hover{background:var(--brand);border-color:var(--brand);color:var(--on-dark);transform:translateY(-2px);box-shadow:var(--sh-brand-h)}
.fb-wx{cursor:default}
.fb-qr{position:absolute;right:62px;bottom:0;transform:translateX(8px);z-index:5;width:152px;background:var(--surface);border-radius:var(--r-md);padding:14px;box-shadow:var(--sh-3);opacity:0;visibility:hidden;transition:.25s var(--ease);text-align:center;border:1px solid var(--line);}
.fb-qr img{display:block;width:124px;height:124px;border-radius:var(--r-sm);max-width:none}
.fb-qr p{font-size:var(--fs-2xs);color:var(--ink-2);margin-top:var(--gap-1);white-space:nowrap}
.fb-wx:hover .fb-qr,.fb-wx:focus-within .fb-qr{opacity:1;visibility:visible;transform:none}
/* ---------- 09 弹窗 / 表单 ---------- */ .msg-modal{position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;padding:20px;}
.msg-modal.open{opacity:1;visibility:visible}
.msg-mask{position:absolute;inset:0;background:var(--scrim);backdrop-filter:blur(6px)}
.msg-dialog{position:relative;width:min(480px,94vw);background:var(--surface);border-radius:var(--r-lg);padding:34px 34px 28px;box-shadow:var(--sh-3);transform:translateY(24px);transition:transform .35s var(--ease);max-height:92vh;overflow-y:auto;}
.msg-modal.open .msg-dialog{transform:none}
.msg-dialog h3{font-size:var(--fs-xl);color:var(--navy);text-align:center}
.msg-sub{text-align:center;color:var(--ink-2);font-size:var(--fs-xs);margin:6px 0 20px}
.msg-x{position:absolute;top:8px;right:10px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:none;font-size:var(--fs-2xl);color:var(--ink-3);cursor:pointer;line-height:1;border-radius:var(--r-full);transition:.2s}
.msg-x:hover{color:var(--ink);background:var(--bg)}
.mm-row{display:flex;gap:var(--gap-2);margin-bottom:var(--gap-2)}
.mm-row input{flex:1;min-width:0}
.msg-dialog input,.msg-dialog textarea,.msg-form input,.msg-form textarea{width:100%;padding:var(--gap-2) 15px;border:1px solid var(--line);border-radius:var(--r-sm);font:inherit;outline:none;background:var(--surface);color:var(--ink);transition:border-color .2s,box-shadow .2s;margin-bottom:var(--gap-2);resize:vertical;}
.msg-dialog input:focus,.msg-dialog textarea:focus,.msg-form input:focus,.msg-form textarea:focus{border-color:var(--brand);box-shadow:var(--ring);}
.mm-cap img{height:46px;border-radius:var(--r-sm);cursor:pointer;border:1px solid var(--line);background:var(--surface)}
.mm-submit{width:100%;margin-top:4px}
.mm-success{display:none;text-align:center;padding:26px 0 10px}
.mm-success.show{display:block;animation:mmFade .4s var(--ease)}
.mm-check{width:64px;height:64px;margin:0 auto 14px;border-radius:var(--r-full);background:var(--grad-ok);color:var(--on-dark);font-size:var(--fs-4xl);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-ok);}
.mm-success h4{font-size:var(--fs-xl);color:var(--navy);margin-bottom:6px}
.mm-success p{color:var(--ink-2);font-size:var(--fs-xs)}
.msg-result{font-weight:600;text-align:center;margin-top:var(--gap-2);font-size:var(--fs-sm);min-height:20px;line-height:1.6}
.msg-result.ok{color:var(--ok)}
.msg-result.err{color:var(--err);background:var(--err-bg-2);border-radius:var(--r-xs);padding:var(--gap-1) var(--gap-2)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
@keyframes mmFade{from{opacity:0;transform:scale(.94)}
to{opacity:1;transform:none}
}
 .msg-form{background:var(--bg);border-radius:var(--r-lg);padding:var(--gap-5);border:1px solid var(--line)}
.msg-form h3{font-weight:800;letter-spacing:.5px;font-size:var(--fs-xl);color:var(--navy)}
.msg-tip{color:var(--ink-2);font-size:var(--fs-xs);margin:6px 0 18px}
.msg-row{display:flex;gap:14px;margin-bottom:14px}
.msg-row input{flex:1;min-width:0}
.msg-cap img{height:48px;border-radius:var(--r-sm);cursor:pointer;border:1px solid var(--line);background:var(--surface)}
.msg-form .btn-gold{width:100%;margin-top:6px}
/* ---------- 10 首页区块 ---------- */ .hero{position:relative;background:var(--bg)}
.hero-track{position:relative;height:min(74vh,660px);overflow:hidden;background:var(--navy)}
.hero-slide{position:absolute;inset:0;display:block;opacity:0;transform:scale(1.02);transition:opacity 1s ease,transform 7s ease;pointer-events:none;}
.hero-slide.on{opacity:1;transform:scale(1);pointer-events:auto;z-index:2}
.hero-slide img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-slide::after{content:"";position:absolute;inset:0;background:var(--grad-hero-scrim);}
.hero-foot{position:absolute;bottom:0;left:0;right:0;z-index:6;padding-bottom:26px}
.hero-foot-in{display:flex;justify-content:space-between;align-items:center;gap:20px}
.hero-dots{display:flex;gap:10px;align-items:center}
.hero-dots i{width:38px;height:3px;background:var(--w-42);cursor:pointer;transition:.3s var(--ease);border-radius:var(--r-full);}
.hero-dots i:hover{background:var(--w-70)}
.hero-dots i.on{background:var(--surface);width:52px}
.hero-scroll{color:var(--on-dark-2);font-size:var(--fs-xs);letter-spacing:2px;display:inline-flex;align-items:center;gap:var(--gap-1);animation:bob 2.2s ease-in-out infinite;}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:7;width:48px;height:48px;border-radius:var(--r-full);background:var(--hd-glass);border:none;cursor:pointer;font-size:var(--fs-xl);color:var(--navy);line-height:1;display:flex;align-items:center;justify-content:center;transition:.25s var(--ease);opacity:0;}
.hero:hover .hero-arrow,.hero-arrow:focus-visible{opacity:1}
.hero-arrow:hover{background:var(--surface);box-shadow:var(--sh-2);transform:translateY(-50%) scale(1.06)}
.hero-arrow.prev{left:26px}
.hero-arrow.next{right:26px}
/* 触屏设备没有 hover：箭头常显，避免出现“看不见但可点”的按钮 */ @media (hover:none){.hero-arrow{opacity:1}
.zoom-ico{opacity:1;transform:none}
.prod-t .prod-go{color:var(--brand)}
}
@keyframes bob{50%{transform:translateY(6px)}
}
/* 文字型 Hero（无轮播图时的兜底首屏） */ .hero-text{position:relative;min-height:72vh;display:flex;align-items:center;overflow:hidden;background:var(--grad-hero-text);}
.hero-text::before{content:"";position:absolute;top:-160px;right:-160px;width:520px;height:520px;border-radius:var(--r-full);border:1px solid var(--brand-a16)}
.hero-text::after{content:"";position:absolute;top:-80px;right:-80px;width:520px;height:520px;border-radius:var(--r-full);border:1px solid var(--brand-a10)}
.hero-text-in{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;padding:60px var(--gutter);position:relative;z-index:1}
.hero-kicker{display:inline-block;color:var(--brand);font-size:var(--fs-xs);letter-spacing:4px;font-weight:700;margin-bottom:22px}
.hero-copy h1{font-weight:800;letter-spacing:1px;font-size:var(--fs-display);line-height:1.16;color:var(--navy);margin-bottom:var(--gap-4)}
.hero-copy p{color:var(--ink-2);font-size:var(--fs-base);max-width:520px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero-btns{margin-top:38px;display:flex;gap:var(--gap-3);flex-wrap:wrap}
.hero-card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-2);transition:.4s var(--ease);animation:floaty 6s ease-in-out infinite;position:relative;z-index:1;}
.hero-card:hover{transform:translateY(-8px);box-shadow:var(--sh-3)}
.hero-card img{border-radius:var(--r-md);aspect-ratio:4/3;object-fit:contain;width:100%;background:var(--bg)}
.hero-card-t{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 6px 4px}
.hero-card-t span{color:var(--brand);font-size:var(--fs-2xs);letter-spacing:2px;flex-shrink:0}
.hero-card-t b{color:var(--navy);font-size:var(--fs-base);text-align:right}
@keyframes floaty{50%{transform:translateY(-10px)}
}
 .stats{position:relative;z-index:5;margin-top:-56px;padding:0 0 var(--gap-1)}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:34px 20px;border:1px solid var(--line);}
.stat{text-align:center;position:relative;padding:0 10px}
.stat+.stat::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:44px;width:1px;background:var(--line)}
.stat b{display:block;font-size:var(--fs-4xl);font-weight:800;color:var(--brand);line-height:1.15;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.stat span{color:var(--ink-2);font-size:var(--fs-xs);letter-spacing:2px}
 .sec{padding:var(--sec-pad) 0}
.sec-bg{background:var(--bg)}
.sec-dark{background:var(--grad-sec)}
.sec-head{text-align:center;margin-bottom:56px}
.sec-head>span{display:inline-block;font-size:var(--fs-2xs);letter-spacing:5px;color:var(--brand);font-weight:700;margin-bottom:14px}
.sec-head h2{font-weight:800;letter-spacing:1px;font-size:var(--fs-h2);color:var(--navy);position:relative;padding-bottom:22px}
.sec-head h2::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:44px;height:3px;border-radius:var(--r-full);background:linear-gradient(90deg,var(--brand),var(--brand-600))}
.sec-head p{color:var(--ink-2);margin-top:var(--gap-3);font-size:var(--fs-base)}
.sec-more{text-align:center;margin-top:50px}
 .adv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-4)}
/* 优势卡片：各卡一张浅色科技背景图 + 白色遮罩，文字保持可读 */
.adv{position:relative;padding:40px 30px 34px;border:1px solid var(--line);border-radius:var(--r-lg);transition:.4s var(--ease);background-color:var(--surface);background-position:center;background-size:cover;background-repeat:no-repeat;overflow:hidden;}
.adv-1{background-image:url("/static/img/adv-1.jpg");background-position:right center}
.adv-2{background-image:url("/static/img/adv-2.jpg");background-position:center 62%}
.adv-3{background-image:url("/static/img/adv-3.jpg");background-position:center 55%}
.adv-4{background-image:url("/static/img/adv-4.jpg");background-position:center 45%}
.adv::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.93) 0%,rgba(248,251,255,.87) 60%,rgba(240,247,255,.84) 100%);}
.adv > *{position:relative;z-index:1}
.adv::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand-600));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);}
.adv:hover{transform:translateY(-10px);box-shadow:var(--sh-3);border-color:var(--brand-200)}
.adv:hover::after{transform:scaleX(1)}
.adv i{font-style:normal;font-size:var(--fs-4xl);font-weight:800;color:var(--brand-200);display:block;margin-bottom:var(--gap-3);letter-spacing:-1px;transition:color .35s}
.adv:hover i{color:var(--brand)}
.adv h3{font-size:var(--fs-xl);color:var(--navy);margin-bottom:var(--gap-2)}
.adv p{color:var(--ink-2);font-size:var(--fs-sm)}
 .about-sec{background:var(--surface)}
.about-in{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--gap-7);align-items:center}
.sec-tag{display:inline-block;font-size:var(--fs-2xs);letter-spacing:5px;color:var(--brand);font-weight:700;margin-bottom:14px}
.about-copy h2{font-size:var(--fs-sub);color:var(--navy);font-weight:800;margin-bottom:20px;line-height:1.35}
.about-text{color:var(--ink-2);font-size:var(--fs-base);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:28px}
.about-text p{margin-bottom:.6em}
.about-img{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3);cursor:zoom-in}
.about-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* 关于我们 · 后台图集轮播（≥2 张时渲染；复用 .bcar 的箭头/圆点/计数与键盘/触摸交互） */ .about-gal{margin:0;aspect-ratio:4/3}
.about-gal-track{height:100%}
.about-gal-slide{position:relative;cursor:zoom-in;align-items:center}
.about-gal-slide img{width:100%;height:100%;object-fit:cover}
.about-gal-thumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap-1);margin-top:10px}
.about-gal-thumb{padding:0;border:2px solid transparent;border-radius:var(--r-xs);background:var(--bg-media);cursor:pointer;overflow:hidden;transition:border-color .2s var(--ease)}
.about-gal-thumb:hover{border-color:var(--brand-200)}
.about-gal-thumb.cur{border-color:var(--brand)}
.about-gal-thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--r-xs) - 2px)}
/* 首页 CTA（全站唯一深色带）：只用整站既有的墨蓝 + 品牌蓝两支色。
   背景 = --grad-cta（墨蓝渐变 + 两处品牌蓝柔光）+ .cta::before/::after 同心细圆弧 + .cta-grid 细点阵。
   对比度：h2 纯白 ≈14.6:1，p（--on-dark-2）≈11:1，均 ≥4.5:1。 */ .cta{position:relative;overflow:hidden;padding:var(--sec-pad) 0;text-align:center;color:var(--on-dark);background:var(--grad-cta)}
.cta::before,.cta::after{content:"";position:absolute;left:50%;transform:translateX(-50%);border-radius:var(--r-full);border:1px solid var(--cta-ring);pointer-events:none}
.cta::before{top:-300px;width:820px;height:820px}
.cta::after{top:-170px;width:560px;height:560px}
.cta-grid{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(var(--cta-dot) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(120% 82% at 50% 38%,var(--mask-opaque) 18%,transparent 76%);-webkit-mask-image:radial-gradient(120% 82% at 50% 38%,var(--mask-opaque) 18%,transparent 76%)}
.cta .wrap{position:relative;z-index:2}
.cta h2{font-weight:800;letter-spacing:1px;font-size:var(--fs-cta);margin-bottom:var(--gap-2);color:var(--on-dark)}
.cta p{color:var(--on-dark-2);font-size:var(--fs-md)}
.cta-btns{margin-top:var(--gap-5);display:flex;gap:var(--gap-3);justify-content:center;flex-wrap:wrap}
.cta .btn-ghost{border-color:var(--w-50);color:var(--on-dark)}
.cta .btn-ghost:hover{background:var(--surface);color:var(--brand);border-color:var(--on-dark)}
/* ---------- 11 内页横幅 ---------- */ .pg-banner{position:relative;overflow:hidden;background:var(--grad-banner);padding:56px 0 52px;color:var(--navy);border-bottom:1px solid var(--line);}
/* 五栏目专属背景图（左侧白色渐变遮罩保证标题可读；覆盖默认的两个装饰伪元素） */
.pg-b{background-position:right center;background-size:cover;background-repeat:no-repeat}
.pg-b-products{background-image:url("/static/img/pg-products.jpg")}
.pg-b-case{background-image:url("/static/img/pg-case.jpg")}
.pg-b-news{background-image:url("/static/img/pg-news.jpg")}
.pg-b-service{background-image:url("/static/img/pg-service.jpg")}
.pg-b-about{background-image:url("/static/img/pg-about.jpg")}
.pg-banner.pg-b::before{content:"";position:absolute;inset:0;width:auto;height:auto;top:0;right:0;border:none;border-radius:0;background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.82) 34%,rgba(255,255,255,.45) 58%,rgba(255,255,255,.10) 100%)}
.pg-banner.pg-b::after{content:none}
.pg-banner::before{content:"";position:absolute;right:-120px;top:-140px;width:420px;height:420px;border-radius:var(--r-full);border:1px solid var(--brand-a14);pointer-events:none;}
.pg-banner::after{content:"";position:absolute;right:60px;bottom:-160px;width:300px;height:300px;border-radius:var(--r-full);background:radial-gradient(circle,var(--brand-a10),transparent 65%);pointer-events:none;}
.pg-banner .wrap{position:relative;z-index:1}
.pg-banner h1,.pg-banner .pg-title{font-weight:800;letter-spacing:1px;font-size:var(--fs-h1);margin-top:var(--gap-3);color:var(--navy)}
.pg-banner p{color:var(--ink-2);letter-spacing:3px;text-transform:uppercase;font-size:var(--fs-2xs);margin-top:var(--gap-1);font-weight:600}
.pg-crumbs{font-size:var(--fs-xs);color:var(--ink-2);display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.pg-crumbs em{font-style:normal;color:var(--ink-3);opacity:.7}
.pg-crumbs a{transition:color .2s}
.pg-crumbs a:hover{color:var(--brand)}
.pg-crumbs span{color:var(--ink-3)}
/* ---------- 12 列表与卡片 ---------- */ .list-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:var(--gap-5);align-items:start}
.list-layout .list-main{grid-column:2;min-width:0}
.list-layout .list-main:first-child{grid-column:1/-1}
.list-side{border:1px solid var(--line);border-radius:var(--r-lg);padding:10px;background:var(--surface);position:sticky;top:calc(var(--hd-h) + 16px);}
.list-side h4{padding:14px var(--gap-3) var(--gap-2);color:var(--navy);font-size:var(--fs-md);font-weight:700;border-bottom:1px solid var(--line-2);margin-bottom:var(--gap-1);letter-spacing:.5px;display:flex;align-items:center;gap:var(--gap-1);}
.list-side h4::before{content:"";width:3px;height:14px;border-radius:var(--r-full);background:var(--brand)}
.list-side a{display:block;padding:var(--gap-2) var(--gap-3);border-radius:var(--r-sm);font-size:var(--fs-sm);color:var(--ink-2);transition:background .2s,color .2s,padding .25s var(--ease);border-left:2px solid transparent;}
.list-side a:hover{background:var(--brand-050);color:var(--brand);padding-left:20px}
.list-side a.cur{background:var(--brand);color:var(--on-dark);font-weight:600;box-shadow:var(--sh-brand)}
.list-side a.cur:hover{padding-left:var(--gap-3)}
 .list-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-3);flex-wrap:wrap;margin-bottom:22px;padding:0 2px;}
.list-bar .lb-count{color:var(--ink-2);font-size:var(--fs-xs)}
.list-bar .lb-count b{color:var(--brand);font-size:var(--fs-md);font-weight:800;font-variant-numeric:tabular-nums}
.list-bar .lb-tip{font-size:var(--fs-xs);color:var(--ink-3)}
 .prod-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.prod{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;display:flex;flex-direction:column;}
.prod:hover{transform:translateY(-8px);box-shadow:var(--sh-3);border-color:var(--brand-200)}
.prod figure{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--surface);padding:18px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line-2);}
.prod figure img{width:100%;height:100%;object-fit:contain;transition:transform .5s var(--ease)}
.prod:hover figure img{transform:scale(1.06)}
.prod-t{padding:var(--gap-3) 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1;border-top:2px solid transparent;transition:border-color .3s;}
.prod:hover .prod-t{border-top-color:var(--brand)}
.prod-t h3{font-size:var(--fs-md);color:var(--navy);font-weight:600;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.prod-t .prod-sub{font-size:var(--fs-2xs);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* “查看详情”常显（浅灰），hover 变主色并右移箭头：不再出现空白预留区 */ .prod-t .prod-go{margin-top:auto;padding-top:var(--gap-1);display:inline-flex;align-items:center;gap:5px;color:var(--ink-3);font-size:var(--fs-2xs);letter-spacing:.5px;transition:color .3s;}
.prod-t .prod-go i{font-style:normal;transition:transform .3s var(--ease)}
.prod:hover .prod-t .prod-go{color:var(--brand)}
.prod:hover .prod-t .prod-go i{transform:translateX(3px)}
 .sol-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-4)}
/* 方案数量自适应：1 个居中窄列、2/4 个用两列对称布局，避免"3+1"落单显空 */
.sol-grid.sol-n1{grid-template-columns:minmax(0,600px);justify-content:center}
.sol-grid.sol-n2,.sol-grid.sol-n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.sol-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;}
.sol-card:hover{transform:translateY(-8px);box-shadow:var(--sh-3);border-color:var(--brand-200)}
.sol-img{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--grad-media)}
.sol-img img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .6s var(--ease)}
.sol-card:hover .sol-img img{transform:scale(1.05)}
.sol-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.sol-body h3{font-size:var(--fs-lg);color:var(--navy);margin-bottom:10px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sol-body p{font-size:var(--fs-sm);color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:14px;min-height:2.8em}
.sol-link{margin-top:auto;color:var(--brand);font-size:var(--fs-sm);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.sol-link i{font-style:normal;transition:transform .25s var(--ease)}
.sol-card:hover .sol-link i{transform:translateX(4px)}
/* 证书/图册网格（资质、荣誉、知识产权等图册型栏目） */ .cert-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.cert{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;}
.cert:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--brand-200)}
.cert-fig{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--grad-media-v);cursor:zoom-in}
.cert-fig img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .6s var(--ease)}
.cert:hover .cert-fig img{transform:scale(1.04)}
.cert-badge{position:absolute;left:10px;top:10px;z-index:2;padding:3px 10px;border-radius:var(--r-full);background:var(--scrim-media);color:var(--on-dark);font-size:var(--fs-3xs);letter-spacing:1px;backdrop-filter:blur(4px);}
.cert-body{padding:14px var(--gap-3) var(--gap-3);display:flex;flex-direction:column;gap:6px;flex:1}
.cert-body h3{font-size:var(--fs-md);font-weight:600;color:var(--navy);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.cert-body .cert-meta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-2xs);color:var(--ink-3)}
.cert-body .cert-meta a{color:var(--brand);font-weight:600}
.cert-fig .zoom-ico{opacity:1;transform:none;width:32px;height:32px}
.cert-ph{display:flex;align-items:center;justify-content:center;height:100%;color:var(--ink-3);font-size:var(--fs-2xs)}
/* 图文列表（新闻 / 搜索结果） */ .art-list{display:flex;flex-direction:column;gap:18px}
.art{display:flex;gap:var(--gap-4);background:var(--surface);border-radius:var(--r-lg);padding:18px;border:1px solid var(--line);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;}
.art:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--brand-200)}
.art figure{width:260px;flex-shrink:0;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/10;background:var(--bg)}
.art figure img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .55s var(--ease)}
.art:hover figure img{transform:scale(1.05)}
.art-body{min-width:0;display:flex;flex-direction:column;flex:1;padding:4px 6px 4px 0}
.art-body h3{font-size:var(--fs-lg);line-height:1.5;margin-bottom:10px;color:var(--navy);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.art:hover .art-body h3{color:var(--brand)}
.art-body p{font-size:var(--fs-sm);color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:var(--gap-2)}
.art-body .art-date{margin-top:auto;font-size:var(--fs-2xs);color:var(--ink-3);display:inline-flex;align-items:center;gap:6px;}
.art-body .art-date::before{content:"";width:12px;height:12px;background:currentColor;opacity:.5;-webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 11h18'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 11h18'/%3E%3C/svg%3E") center/contain no-repeat}
.art-tag{display:inline-block;font-size:var(--fs-3xs);letter-spacing:1px;color:var(--brand);background:var(--brand-050);border:1px solid var(--brand-100);border-radius:var(--r-full);padding:2px 10px;margin-bottom:10px;align-self:flex-start;}
.art-body em,.search-count em{font-style:normal;color:var(--brand);font-weight:700;background:var(--grad-mark);padding:0 1px;}
 .news-feature{display:grid;grid-template-columns:1.05fr 1fr;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:18px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;}
.news-feature:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--brand-200)}
.news-feature figure{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg);margin:0}
.news-feature figure img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .6s var(--ease)}
.news-feature:hover figure img{transform:scale(1.04)}
.news-feature.solo{grid-template-columns:1fr}
.nf-body{padding:var(--gap-5) 34px;display:flex;flex-direction:column;justify-content:center}
.nf-body .news-date{display:flex;align-items:baseline;gap:10px;border:none;padding:0;margin-bottom:14px;text-align:left}
.nf-body .news-date b{font-size:var(--fs-4xl);font-weight:800;color:var(--brand);line-height:1}
.nf-body .news-date span{font-size:var(--fs-xs);color:var(--ink-3)}
.nf-body h3{font-size:var(--fs-xl);line-height:1.5;color:var(--navy);margin-bottom:var(--gap-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nf-body p{font-size:var(--fs-sm);color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:18px}
 .news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.news{display:block;background:var(--surface);border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;}
.news:hover{box-shadow:var(--sh-2);transform:translateY(-5px);border-color:var(--brand-200)}
.news-fig{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg);margin:0}
.news-fig img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s var(--ease)}
.news:hover .news-fig img{transform:scale(1.05)}
.news-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--brand-050) 0%,var(--bg) 100%)}
.news-ph img{width:46%;height:auto;opacity:.32;filter:grayscale(.35)}
.news-ph b{font-size:var(--fs-lg);letter-spacing:6px;font-weight:800;color:var(--brand);opacity:.16}
.news-day{position:absolute;left:12px;top:12px;padding:3px 10px;border-radius:var(--r-full);background:rgba(15,23,42,.72);color:#fff;font-size:var(--fs-2xs);letter-spacing:.5px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.news-body{padding:var(--gap-4) 22px 22px}
.news-body h3{font-size:var(--fs-md);margin-bottom:var(--gap-1);color:var(--navy);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news:hover .news-body h3{color:var(--brand)}
.news-body p{font-size:var(--fs-sm);color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:var(--fs-xs);color:var(--brand);font-weight:600}
.news-more i{font-style:normal;transition:transform .25s var(--ease)}
.news:hover .news-more i{transform:translateX(4px)}
 .down-list{display:flex;flex-direction:column;gap:14px}
.down-item{display:flex;align-items:center;gap:20px;background:var(--surface);border-radius:var(--r-lg);padding:20px var(--gap-4);border:1px solid var(--line);transition:.3s var(--ease);}
.down-item:hover{box-shadow:var(--sh-2);border-color:var(--brand-200);transform:translateX(2px)}
.down-ico{width:52px;height:52px;flex-shrink:0;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;background:var(--brand-050);color:var(--brand);border:1px solid var(--brand-100);}
.down-ico span{font-size:var(--fs-2xs);font-weight:800;letter-spacing:.5px}
.down-main{min-width:0;flex:1}
.down-main h3{font-size:var(--fs-md);margin-bottom:6px;color:var(--navy);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.down-main .down-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--fs-2xs);color:var(--ink-3)}
.down-act{flex-shrink:0}
 .pg-nation{display:flex;align-items:center;justify-content:center;gap:var(--gap-1);margin-top:var(--gap-6);flex-wrap:wrap}
.pg-nation a,.pg-nation span{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm);border:1px solid var(--line);font-size:var(--fs-sm);padding:0 var(--gap-2);background:var(--surface);color:var(--ink-2);transition:.25s var(--ease);}
.pg-nation a:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-050);transform:translateY(-2px)}
.pg-nation .cur{background:var(--grad-brand);border-color:transparent;color:var(--on-dark);font-weight:700;box-shadow:var(--sh-brand);}
.pg-nation .pg-txt{min-width:auto;padding:0 var(--gap-3);gap:6px}
.pg-nation .gap{border:none;background:none;min-width:20px;color:var(--ink-3)}
.pg-nation .disabled{color:var(--ink-3);opacity:.5;cursor:not-allowed}
.pg-info{text-align:center;color:var(--ink-3);font-size:var(--fs-xs);margin-top:14px}
/* ---------- 13 详情页（统一骨架：面包屑 → 头部 → 主图/正文 → 附件 → 文末 → 侧栏） ----------
   间距/圆角/阴影/正文宽度均取自 01 令牌区，改令牌即全站详情页同步。 */ .detail-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--side-w);gap:var(--gap-4);align-items:start}
.detail{background:var(--surface);border-radius:var(--r-lg);padding:var(--pad-card-y) var(--pad-card-x);border:1px solid var(--line);min-width:0}
.detail-side{display:flex;flex-direction:column;gap:var(--gap-4);position:sticky;top:var(--sticky-top)}
.side-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--gap-4)}
.side-card h4{font-size:var(--fs-md);color:var(--navy);margin-bottom:var(--gap-3);position:relative;padding-bottom:10px}
.side-card h4::after{content:"";position:absolute;left:0;bottom:0;width:24px;height:2px;border-radius:var(--r-full);background:var(--brand)}
.sc-tel{font-size:var(--fs-xl);font-weight:800;color:var(--brand);margin-bottom:10px;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.sc-item{font-size:var(--fs-xs);color:var(--ink-2);margin-bottom:7px;line-height:1.7;word-break:break-all}
.sc-qr{width:112px;border-radius:var(--r-sm);border:1px solid var(--line);padding:5px;margin-top:var(--gap-2);background:var(--surface)}
.sc-tip{font-size:var(--fs-2xs);color:var(--ink-3);margin-top:6px}
.side-btn{display:flex;justify-content:center;margin-top:var(--gap-3);padding:var(--gap-2) 0;font-size:var(--fs-sm)}
.side-hot{display:flex;gap:var(--gap-2);align-items:center;padding:10px 0;border-bottom:1px solid var(--line-2)}
.side-hot:last-child{border-bottom:none;padding-bottom:0}
.side-hot img{width:76px;height:56px;object-fit:cover;border-radius:var(--r-xs);flex-shrink:0;background:var(--bg)}
.side-hot span{font-size:var(--fs-xs);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.55;transition:color .2s}
.side-hot:hover span{color:var(--brand)}
.detail h1{font-weight:800;letter-spacing:.5px;font-size:var(--fs-title);text-align:center;color:var(--navy);line-height:1.45}
.detail-meta{text-align:center;color:var(--ink-3);font-size:var(--fs-xs);margin:var(--gap-3) 0 var(--gap-5);display:flex;justify-content:center;gap:var(--gap-4);flex-wrap:wrap;}
.detail-meta span{display:inline-flex;align-items:center;gap:6px}
.detail-meta span+span::before{content:"";width:1px;height:12px;background:var(--line);margin-right:var(--gap-3)}
 .detail-body{font-size:var(--fs-lg);color:var(--ink-body);line-height:var(--lh-read);overflow-wrap:break-word;word-break:break-word;max-width:var(--read-w);margin:0 auto;}
.detail-body img{margin:var(--gap-5) auto;border-radius:var(--r-md);max-width:100%;height:auto;display:block}
.detail-body p{margin-bottom:1.35em}
.detail-body figure{margin:var(--gap-5) 0}
.detail-body figcaption{text-align:center;font-size:var(--fs-xs);color:var(--ink-3);margin-top:10px;line-height:1.7}
.detail-body table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:var(--fs-base)}
.detail-body td,.detail-body th{border:1px solid var(--line);padding:11px 14px}
.detail-body tr:nth-child(even) td{background:var(--bg-soft)}
.detail-body th{background:var(--brand-050);font-weight:600;color:var(--navy)}
.detail-body blockquote{margin:1.6em 0;padding:var(--gap-3) var(--gap-4);border-left:3px solid var(--brand);background:var(--brand-050);color:var(--ink-2);border-radius:0 var(--r-xs) var(--r-xs) 0;}
.detail-body blockquote p:last-child{margin-bottom:0}
.detail-body pre{margin:1.6em 0;padding:var(--gap-3) 18px;background:var(--code-bg);color:var(--code-ink);border-radius:var(--r-sm);overflow-x:auto;font-size:var(--fs-sm);line-height:1.7}
.detail-body code{padding:2px 6px;background:var(--code-bg-2);border-radius:var(--r-xs);font-size:.92em}
.detail-body pre code{padding:0;background:transparent;color:inherit}
.detail-body a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.detail-body h2,.detail-body h3,.detail-body h4{margin:1.6em 0 .7em;line-height:1.45;color:var(--navy)}
.detail-body h2{font-size:var(--fs-2xl)}
.detail-body h3{font-size:var(--fs-xl)}
.detail-body h4{font-size:var(--fs-lg)}
.detail-body ul,.detail-body ol{margin:0 0 1.35em 1.5em}
.detail-body li{margin-bottom:.5em}
.detail-attach{text-align:center;margin-top:var(--gap-5);max-width:var(--read-w);margin-left:auto;margin-right:auto}
/* 摘要 / 参数块：后台录入的纯文本常含「152025325080100」这类无空格长串，
   在窄屏会把整行撑出容器、导致整页横向溢出（实测 /flow/80.html 在 390px 下
   documentElement.scrollWidth=678）。必须允许任意位置断行。 */ .detail-desc{background:var(--brand-050);border-left:3px solid var(--brand);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:var(--gap-3) var(--gap-4);color:var(--ink-2);font-size:var(--fs-base);line-height:1.85;margin:0 auto var(--gap-4);max-width:var(--read-w);overflow-wrap:break-word;overflow-wrap:anywhere;word-break:break-word;}
 .detail-art{padding:var(--gap-6) var(--gap-6) var(--gap-5)}
.dt-head{max-width:var(--read-w);margin:0 auto var(--gap-4);padding-bottom:var(--gap-4);border-bottom:1px solid var(--line-2)}
.dt-tags{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dt-chip{display:inline-flex;align-items:center;height:28px;padding:0 14px;border-radius:var(--r-full);background:var(--brand-050);color:var(--brand);font-size:var(--fs-xs);font-weight:600;transition:.25s var(--ease);}
.dt-chip:hover{background:var(--brand);color:var(--on-dark)}
.dt-flag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--r-full);font-size:var(--fs-2xs);font-weight:600}
.dt-flag.top{background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--warn-line)}
.dt-flag.rec{background:var(--brand-050);color:var(--brand);border:1px solid var(--brand-200)}
.dt-title{font-size:var(--fs-title);line-height:1.42;font-weight:800;color:var(--navy);letter-spacing:.3px;margin:var(--gap-3) 0 0;text-align:left}
.dt-sub{font-size:var(--fs-base);color:var(--ink-2);line-height:1.75;margin-top:var(--gap-2)}
.dt-meta{display:flex;flex-wrap:wrap;gap:10px var(--gap-4);list-style:none;margin:var(--gap-3) 0 0;padding:0;color:var(--ink-3);font-size:var(--fs-xs)}
.dt-meta li{display:inline-flex;align-items:center;gap:6px}
.dt-meta li+li::before{content:"";width:1px;height:12px;background:var(--line);margin-right:var(--gap-2)}
.dt-meta svg{flex:none;color:var(--ink-3)}
.dt-lead{max-width:var(--read-w);margin:0 auto var(--gap-5);padding:var(--gap-3) var(--gap-4);background:var(--brand-050);border-left:3px solid var(--brand);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--ink-2);font-size:var(--fs-md);line-height:1.85;}
.detail-art .detail-body h2{margin-top:var(--gap-6);padding-left:14px;position:relative}
.detail-art .detail-body h2::before{content:"";position:absolute;left:0;top:.16em;bottom:.16em;width:4px;border-radius:var(--r-full);background:var(--brand);}
.detail-art .detail-body img{box-shadow:var(--sh-1)}
.detail-art .detail-body table{font-size:var(--fs-base)}
 .dt-foot{max-width:var(--read-w);margin:var(--gap-6) auto 0;padding-top:var(--gap-4);border-top:1px solid var(--line-2)}
.dt-share{display:flex;align-items:center;gap:var(--gap-2);flex-wrap:wrap}
.dt-share-t{font-size:var(--fs-xs);color:var(--ink-3);letter-spacing:1px;margin-right:2px}
.dt-share-btn{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 var(--gap-3);border:1px solid var(--line);border-radius:var(--r-full);background:var(--surface);color:var(--ink-2);font-family:inherit;font-size:var(--fs-xs);font-weight:600;cursor:pointer;transition:.25s var(--ease);}
.dt-share-btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-050)}
.dt-share-btn svg{flex:none}
.dt-copied{font-size:var(--fs-xs);color:var(--ok-ink)}
.dt-wx{margin-top:var(--gap-3);padding:var(--gap-3);border:1px dashed var(--line);border-radius:var(--r-md);background:var(--bg-soft);display:flex;align-items:center;gap:var(--gap-3);}
.dt-wx[hidden]{display:none}
.dt-wx img{width:112px;height:112px;border-radius:var(--r-sm);background:var(--surface);padding:4px;border:1px solid var(--line)}
.dt-wx p{font-size:var(--fs-xs);color:var(--ink-2);margin:0}
 .prevnext{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-3);margin-top:var(--gap-6);padding-top:28px;border-top:1px solid var(--line);font-size:var(--fs-sm);}
.prevnext a{display:flex;flex-direction:column;gap:6px;padding:var(--gap-3) 18px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--bg-soft);transition:.28s var(--ease);min-width:0;}
.prevnext a:hover{border-color:var(--brand);background:var(--surface);box-shadow:var(--sh-2);transform:translateY(-2px)}
.prevnext .pn-label{font-size:var(--fs-2xs);color:var(--ink-3);letter-spacing:1px}
.prevnext .pn-title{color:var(--navy);font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5}
.prevnext a:hover .pn-title{color:var(--brand)}
.prevnext .pn-next{text-align:right;align-items:flex-end}
.prevnext>span.pn-empty{display:flex;align-items:center;justify-content:center;padding:var(--gap-3) 18px;border:1px dashed var(--line);border-radius:var(--r-md);color:var(--ink-3);font-size:var(--fs-xs);}
 .pgal{margin-bottom:30px}
.pgal-main{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--grad-media);cursor:zoom-in;aspect-ratio:16/10;margin:0;display:flex;align-items:center;justify-content:center}
.pgal-main img{width:100%;height:100%;object-fit:contain}
.pgal-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:var(--gap-2)}
.pgal-thumbs img{aspect-ratio:1/1;object-fit:contain;border-radius:var(--r-xs);cursor:pointer;border:2px solid transparent;transition:.2s;background:var(--bg-media);padding:3px}
.pgal-thumbs img:hover{border-color:var(--brand-200)}
.pgal-thumbs img.cur{border-color:var(--brand)}
/* 正文图集轮播（案例/荣誉类详情） */ .bcar{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--bg);margin-bottom:26px}
.bcar-track{display:flex;transition:transform .45s var(--ease)}
.bcar-slide{min-width:100%;cursor:zoom-in;display:flex;justify-content:center;background:var(--grad-media)}
.bcar-slide img{width:100%;max-height:72vh;display:block;object-fit:contain}
.bcar-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:var(--r-full);background:var(--w-92);border:none;cursor:pointer;font-size:var(--fs-xl);color:var(--navy);transition:.25s var(--ease);box-shadow:var(--sh-ico)}
.bcar-arrow:hover{background:var(--surface);transform:translateY(-50%) scale(1.06)}
.bcar-arrow.prev{left:14px}
.bcar-arrow.next{right:14px}
.bcar-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:var(--gap-1);z-index:5}
.bcar-dots i{width:26px;height:3px;border-radius:var(--r-full);background:var(--w-50);cursor:pointer;transition:.25s}
.bcar-dots i.cur{background:var(--surface)}
.bcar-count{position:absolute;top:12px;right:14px;z-index:5;background:var(--scrim-media);color:var(--on-dark);font-size:var(--fs-2xs);padding:3px var(--gap-2);border-radius:var(--r-full)}
/* ---------- 14 单页 / 联系我们 ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:44px;align-items:start}
.c-info h3{font-weight:800;letter-spacing:.5px;font-size:var(--fs-xl);margin-bottom:20px;color:var(--navy)}
.c-item{display:flex;gap:var(--gap-2);margin-bottom:var(--gap-3);align-items:flex-start}
.c-item .ci-ico{width:38px;height:38px;flex-shrink:0;border-radius:var(--r-sm);background:var(--brand-050);color:var(--brand);display:flex;align-items:center;justify-content:center;border:1px solid var(--brand-100);}
.c-item .ci-tx{min-width:0}
.c-item .ci-tx b{display:block;font-size:var(--fs-2xs);color:var(--ink-3);font-weight:600;letter-spacing:1px;margin-bottom:2px}
.c-item .ci-tx span{font-size:var(--fs-sm);color:var(--ink);word-break:break-all;line-height:1.65}
.c-qr{width:140px;margin-top:var(--gap-1);border-radius:var(--r-sm);border:1px solid var(--line);padding:6px;background:var(--surface)}
/* ---------- 15 搜索页 ---------- */ .big-search{display:flex;gap:var(--gap-2);max-width:640px;margin:0 auto 40px;align-items:center}
.big-search .bs-field{position:relative;flex:1;display:flex;align-items:center}
.big-search .bs-field svg{position:absolute;left:18px;color:var(--ink-3);pointer-events:none}
.big-search input{width:100%;padding:15px var(--gap-4) 15px var(--gap-6);border:1px solid var(--line);border-radius:var(--r-full);font:inherit;outline:none;background:var(--surface);transition:border-color .2s,box-shadow .2s}
.big-search input:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-a10)}
.big-search .btn-gold{padding:15px 34px;flex-shrink:0}
.search-count{color:var(--ink-2);margin-bottom:22px;font-size:var(--fs-sm);text-align:center}
.search-count b{color:var(--brand);font-size:var(--fs-lg);font-weight:800}
.search-hint{text-align:center;color:var(--ink-3);padding:56px 0}
.search-sug{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.search-sug a{padding:7px 18px;border:1px solid var(--line);border-radius:var(--r-full);font-size:var(--fs-xs);color:var(--ink-2);transition:.25s var(--ease)}
.search-sug a:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-050)}
.search-empty{text-align:center;padding:60px 0}
.search-empty h3{font-size:var(--fs-xl);color:var(--navy);margin:18px 0 var(--gap-1)}
.search-empty p{color:var(--ink-2);margin-bottom:22px}
.search-quick{display:flex;gap:var(--gap-2);justify-content:center;flex-wrap:wrap}
.search-quick a{padding:9px 26px;border:1px solid var(--brand-200);color:var(--brand);border-radius:var(--r-full);font-size:var(--fs-sm);transition:.25s var(--ease);background:var(--surface)}
.search-quick a:hover{background:var(--brand);border-color:var(--brand);color:var(--on-dark)}
/* ---------- 16 404 ---------- */ .nf{text-align:center;padding:70px 0 90px}
.nf-code{font-size:var(--fs-404);line-height:1;font-weight:800;letter-spacing:4px;background:linear-gradient(180deg,var(--brand-400) 0%,var(--brand) 70%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.nf h2{font-weight:800;letter-spacing:.5px;font-size:var(--fs-h3);margin:18px 0 var(--gap-2);color:var(--navy)}
.nf p{color:var(--ink-2);margin-bottom:10px}
.nf-actions{margin-top:28px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.nf .big-search{margin:var(--gap-5) auto 0}
.nf-quick{margin-top:40px;padding-top:28px;border-top:1px solid var(--line);display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.nf-quick a{padding:9px 22px;border:1px solid var(--line);border-radius:var(--r-full);font-size:var(--fs-xs);color:var(--ink-2);transition:.25s var(--ease)}
.nf-quick a:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-050)}
/* ---------- 17 空状态 / 反馈 ---------- */ .empty{text-align:center;color:var(--ink-3);padding:var(--gap-7) var(--gap-4);background:var(--bg-soft);border:1px dashed var(--line);border-radius:var(--r-lg);font-size:var(--fs-sm);}
.empty .empty-ico{display:inline-flex;color:var(--ico-empty);margin-bottom:14px}
.empty h3{font-size:var(--fs-xl);color:var(--navy);margin-bottom:var(--gap-1);font-weight:600}
.empty p{font-size:var(--fs-xs);margin-bottom:18px}
.flash{margin:18px 0 0;padding:var(--gap-2) 18px;border-radius:var(--r-sm);font-size:var(--fs-sm)}
.flash.ok{background:var(--ok-bg);color:var(--ok-ink);border:1px solid var(--ok-line)}
.flash.err{background:var(--err-bg);color:var(--err-ink);border:1px solid var(--err-line)}
/* ---------- 18 图片放大按钮 / 灯箱 ---------- */ .prod-zoom{position:relative}
.zoom-ico{position:absolute;right:12px;bottom:12px;width:36px;height:36px;border-radius:var(--r-full);background:var(--w-92);color:var(--brand);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.85);transition:.25s var(--ease);box-shadow:var(--sh-ico);z-index:2;}
.about-img:hover .zoom-ico,.prod:hover .zoom-ico,.sol-card:hover .zoom-ico,.cert:hover .zoom-ico{opacity:1;transform:none}
/* 灯箱：遮罩几乎不透明（.97）+ 轻模糊，避免页面里被点击的原图透出来与灯箱图「同屏两张」；
   同时把原图用 visibility 隐藏（保留占位，不产生布局跳动）。 */ .lightbox{position:fixed;inset:0;z-index:120;background:var(--scrim-lb);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;overscroll-behavior:contain;}
.lightbox.open{opacity:1;visibility:visible}
html.lb-open .lb-src{visibility:hidden}
.lb-stage{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;max-width:96vw;max-height:100vh;}
.lightbox img{max-width:92vw;max-height:80vh;border-radius:var(--r-sm);box-shadow:var(--sh-pop);object-fit:contain}
.lb-cap{color:var(--on-dark-2);font-size:var(--fs-sm);line-height:1.6;text-align:center;max-width:min(720px,86vw);margin:0;}
.lb-num{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);color:var(--on-dark-3);font-size:var(--fs-xs);letter-spacing:1px;font-variant-numeric:tabular-nums;margin:0;}
.lb-close{position:absolute;top:calc(18px + env(safe-area-inset-top,0px));right:calc(20px + env(safe-area-inset-right,0px));width:48px;height:48px;border-radius:var(--r-full);background:var(--glass);border:none;color:var(--on-dark);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.92;transition:.25s var(--ease);}
.lb-close:hover{opacity:1;background:var(--glass-h);transform:rotate(90deg)}
/* 图集左右切换（按钮 / ← → / 触摸滑动三种方式，见 site.js） */ .lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:52px;height:52px;border-radius:var(--r-full);cursor:pointer;color:var(--on-dark);background:var(--glass);border:1px solid var(--glass);display:flex;align-items:center;justify-content:center;transition:background .25s var(--ease),transform .25s var(--ease);}
.lb-nav:hover{background:var(--glass-h)}
.lb-prev{left:calc(18px + env(safe-area-inset-left,0px))}
.lb-next{right:calc(18px + env(safe-area-inset-right,0px))}
.lb-nav:active{transform:translateY(-50%) scale(.94)}
.lightbox.lb-single .lb-nav{display:none}
/* ---------- 19 动效 ---------- */ .rv{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.visible{opacity:1;transform:none}
/* ---------- 20 响应式 ---------- */ @media (max-width:1280px){.prod-grid,.cert-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.adv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.hd-link{padding:var(--gap-2) var(--gap-2);font-size:var(--fs-sm)}
/* 窄屏：内嵌搜索框回退为放大镜图标 */
.hd-search-form{display:none}
.hd-search-btn{display:flex}
}
@media (max-width:1024px){.sol-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats-in{grid-template-columns:repeat(2,1fr);gap:28px}
.stat:nth-child(odd)::before{display:none}
.stat{padding:var(--gap-1) 10px}
.detail-layout{grid-template-columns:minmax(0,1fr) 280px}
.detail{padding:36px 34px}
}
@media (max-width:900px){.hd-nav{display:none}
.hd-right{display:none}
.hd-burger{display:flex;margin-left:auto}
/* 头部高度叠加刘海安全区：桌面 / 无刘海设备 env()=0，高度与原来完全一致 */ .hd-in{height:calc(var(--hd-h-sm) + env(safe-area-inset-top,0px));gap:var(--gap-3)}
.hd{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);position:sticky}
.hd-logo img,.hd.scrolled .hd-logo img{height:36px}
.mnav{display:block}
/* iOS 上输入框字号 <16px 会在聚焦时自动放大整个页面 */ .msg-dialog input,.msg-dialog textarea,.msg-form input,.msg-form textarea, .mnav-search input,.search-inner input,.big-search input, input,textarea,select{font-size:var(--fs-md)}
.list-layout{grid-template-columns:1fr;gap:var(--gap-4)}
.list-layout .list-main{grid-column:1/-1}
.list-side{position:static;display:flex;gap:6px;overflow-x:auto;padding:var(--gap-1);scrollbar-width:thin}
.list-side h4{display:none}
.list-side a{white-space:nowrap;padding:11px 14px;border-left:none;border:1px solid var(--line);border-radius:var(--r-full)}
.list-side a:hover{padding-left:14px}
.list-side a.cur{padding-left:14px}
.detail-layout{grid-template-columns:1fr}
.detail-side{position:static}
 :root{--pad-card-x:24px;--pad-card-y:var(--gap-5);--sticky-top:calc(var(--hd-h-sm) + var(--gap-3))}
.contact-grid{grid-template-columns:1fr;gap:28px}
.news-feature{grid-template-columns:1fr}
.news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.nf-body{padding:var(--gap-4)}
}
@media (max-width:768px){.wrap{padding:0 var(--gutter-sm)}
.hero-track{height:auto;aspect-ratio:16/9;min-height:200px;max-height:60vh}
.hero-arrow{display:none}
.hero-text{min-height:auto;padding:var(--gap-4) 0 56px}
.hero-text-in{grid-template-columns:1fr;gap:36px;padding-top:0}
.sec{padding:var(--gap-7) 0}
.sec-head{margin-bottom:40px}
.prod-grid,.cert-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sol-grid,.sol-grid.sol-n1,.sol-grid.sol-n2,.sol-grid.sol-n4{grid-template-columns:1fr}
.adv-grid{grid-template-columns:1fr}
.news-grid{grid-template-columns:1fr}
.about-in{grid-template-columns:1fr;gap:36px}
.about-text{-webkit-line-clamp:8}
.art{flex-direction:column;gap:14px;padding:14px}
.art figure{width:100%}
.art-body{padding:0 2px}
.down-item{flex-wrap:wrap;gap:14px;padding:var(--gap-3) 18px}
.down-act{width:100%}
.down-act .btn-line{width:100%;justify-content:center}
.ft-grid{grid-template-columns:1fr;gap:30px;padding:44px var(--gutter-sm) 30px}
.ft-links{grid-template-columns:repeat(2,1fr)}
/* 底部横条安全区：避免最后一行版权被 iPhone 横条压住 */ .ft-bar{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
.pg-banner{padding:40px 0 34px}
/* 悬浮条下移到右下角并收窄，避免压住正文/表单控件 */ .float-bar{right:calc(8px + env(safe-area-inset-right,0px));bottom:calc(84px + env(safe-area-inset-bottom,0px));gap:6px}
.fb-item{width:44px;padding:9px 0;font-size:var(--fs-3xs)}
/* 移动端二维码浮层本就 display:none，微信项点了没反应 → 直接隐藏，避免"死按钮" */ .fb-qr,.fb-wx{display:none}
 .detail-body table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.detail-body td,.detail-body th{padding:9px 11px;min-width:86px}
.detail-body pre{font-size:var(--fs-2xs)}
.detail{padding:var(--gap-5) 20px;border-radius:var(--r-lg)}
/* 文章详情：窄屏头部与正文字号收敛，分享键保持 44px 触摸尺寸 */ .detail-art{padding:var(--gap-5) 20px}
.dt-head{margin-bottom:var(--gap-3);padding-bottom:var(--gap-3)}
.dt-title{font-size:var(--fs-xl);line-height:1.45}
.dt-sub{font-size:var(--fs-sm)}
.dt-meta{gap:var(--gap-1) var(--gap-3);font-size:var(--fs-2xs)}
.dt-meta li+li::before{margin-right:0}
.dt-lead{font-size:var(--fs-base);padding:var(--gap-3)}
.detail-art .detail-body h2{font-size:var(--fs-xl);margin-top:var(--gap-5)}
.detail-art .detail-body h3{font-size:var(--fs-lg)}
.dt-foot{margin-top:var(--gap-5);padding-top:var(--gap-3)}
.dt-share-btn{min-height:44px}
.dt-wx{flex-direction:column;text-align:center;gap:var(--gap-2)}
.prevnext{grid-template-columns:1fr}
.prevnext .pn-next{text-align:left;align-items:flex-start}
.msg-form{padding:var(--gap-4) 20px}
.prod figure{padding:var(--gap-2)}
.pg-nation a,.pg-nation span{min-width:38px;height:38px;padding:0 10px}
.big-search{flex-direction:column;gap:10px}
.big-search .bs-field,.big-search .btn-gold{width:100%}
/* 灯箱：窄屏留出更多给图片，左右切换键收到 44px 触摸尺寸并贴安全区 */ .lightbox img{max-height:72vh}
.lb-cap{font-size:var(--fs-xs);max-width:88vw}
.lb-nav{width:44px;height:44px;background:var(--glass)}
.lb-prev{left:calc(10px + env(safe-area-inset-left,0px))}
.lb-next{right:calc(10px + env(safe-area-inset-right,0px))}
/* 关于我们图集轮播：箭头收到 44px 触摸尺寸（与灯箱一致），缩略条改为横向滚动避免挤压变形 */ .about-gal-arrow{width:44px;height:44px;font-size:var(--fs-lg)}
.about-gal-arrow.prev{left:10px}
.about-gal-arrow.next{right:10px}
.about-gal-thumbs{display:flex;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.about-gal-thumb{flex:0 0 72px}
.lb-close{width:44px;height:44px;top:calc(10px + env(safe-area-inset-top,0px));right:calc(10px + env(safe-area-inset-right,0px))}
}
@media (max-width:480px){.prod-grid,.cert-grid{grid-template-columns:1fr}
.stat b{font-size:var(--fs-2xl)}
.hd-logo strong{font-size:var(--fs-md);letter-spacing:1px}
.float-bar{right:calc(6px + env(safe-area-inset-right,0px))}
.fb-item{width:42px;font-size:var(--fs-3xs)}
.stats{margin-top:-40px}
.stats-in{padding:var(--gap-4) var(--gap-2)}
.pgal-thumbs{grid-template-columns:repeat(4,1fr)}
.mnav-body{padding:14px var(--gap-3) 20px}
.mnav-head{padding-left:var(--gap-3)}
}
/* ---------- 21 无障碍与健壮性 ---------- */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--surface);color:var(--brand);padding:10px 18px;border-radius:0 0 var(--r-sm) 0;box-shadow:var(--sh-2);font-weight:600;}
.skip-link:focus{left:0}
/* 焦点可见：只画 outline，绝不改写元素自身的 border-radius。
   ★ 搜索框圆角闪烁的确切根因：本规则曾声明 border-radius:4px。
     .search-inner input 的 border-radius:var(--r-full)=999px 特异度 (0,1,1)，
     本规则 input:focus-visible 同为 (0,1,1)，但位置在文件末尾 → 后写者胜。
     浮层打开 180ms 后 site.js 调 inp.focus()，圆角立刻由 999px 突变为 4px，
     于是肉眼看到「先药丸圆角、后 R 角」的闪烁。
     同一缺陷还影响 .mnav-search input / .big-search input / .msg-dialog input / .msg-form input。
     outline 本身会跟随元素的 border-radius，无需在此重复声明。 */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.search-inner input:focus-visible,.msg-dialog input:focus-visible,.msg-dialog textarea:focus-visible, .msg-form input:focus-visible,.msg-form textarea:focus-visible,.big-search input:focus-visible{outline:2px solid var(--on-dark);outline-offset:0;box-shadow:var(--ring-dark);}
/* 浮层打开时锁定滚动：html 才是本站的滚动容器（html{overflow-y:scroll}
），
   若只锁 body 会让 .hd 的 position:sticky 失去视口滚动祖先，头部会被顶到文档顶部、
   连带汉堡/关闭按钮一起移出视口（原缺陷根因）。 */ html.scroll-locked,html.scroll-locked body{overflow:hidden;overscroll-behavior:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
.rv{opacity:1 !important;transform:none !important}
.hero-slide{transform:none !important}
}
@media print{.hd,.float-bar,.mnav,.search-overlay,.msg-modal,.cta,.ft-bar{display:none !important}
.rv{opacity:1 !important;transform:none !important}
.detail{border:none;padding:0}
}