/* ==========================================================================
   广州永屹化工有限公司（SummitChem）官网 —— 样式表
   设计原则：完全本地化，零外部依赖（无 CDN / 无网络字体 / 图标全部内联 SVG）
   字体走系统栈，图标走内联 SVG，装饰图走 CSS 渐变
   ========================================================================== */

/* ---------- 1. 设计变量 ---------- */
:root{
  /* 品牌色（取自公司 Logo 的蓝紫渐变） */
  --brand:      #0B5FBE;
  --brand-dk:   #08417F;
  --brand-dp:   #062B57;
  --brand-lt:   #E9F1FC;
  --accent:     #0FB5C9;
  --accent-lt:  #E2F7FA;

  /* 中性色 */
  --ink:    #0A1A2B;
  --ink-2:  #16304B;
  --body:   #46596E;
  --muted:  #7B8CA0;
  --line:   #E3EAF2;
  --line-2: #EFF4F9;
  --bg:     #FFFFFF;
  --bg-soft:#F5F8FC;

  /* 阴影 */
  --sh-sm: 0 1px 2px rgba(10,26,43,.05), 0 2px 6px rgba(10,26,43,.05);
  --sh-md: 0 4px 12px rgba(10,26,43,.06), 0 14px 34px rgba(10,26,43,.07);
  --sh-lg: 0 20px 56px rgba(10,26,43,.14);

  /* 形状 */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --pill: 999px;

  --max: 1200px;
  --head-h: 72px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. 基础重置 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 16px); }
body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB",
              "Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",sans-serif;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ margin:0; color:var(--ink); line-height:1.28; font-weight:700; letter-spacing:-.01em; }
p{ margin:0; }
a{ color:var(--brand); text-decoration:none; transition:color .18s var(--ease); }
a:hover{ color:var(--brand-dk); }
img{ max-width:100%; display:block; border:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
table{ border-collapse:collapse; width:100%; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:4px; }

/* ---------- 3. 布局工具 ---------- */
.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 24px; }
.section{ padding:92px 0; }
.section--soft{ background:var(--bg-soft); }
.section--tight{ padding:64px 0; }
.grid{ display:grid; gap:22px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.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; }

/* 章节标题 */
.sec-head{ max-width:760px; margin-bottom:44px; }
.sec-head--center{ margin-left:auto; margin-right:auto; text-align:center; }
/* 用户 2026-10-14：「为什么选择永屹 / 产品中心 / 往下几个」这些区块标题太小、没有标识性。
   实测原值 h2 36px 对首屏 h1 50px 只差 1.39 倍，撑不起一级标题的分量；
   eyebrow 13px 甚至比正文 16.5px 还小。⇒ h2 提到 clamp(26,3.3vw,44)，eyebrow 提到 15px。
   上限压在 44px —— 首屏 h1 仍是全站最大，别让区块标题反压上去。 */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:15px; font-weight:700; letter-spacing:.085em; text-transform:uppercase;
  color:var(--brand); background:var(--brand-lt);
  padding:8px 17px; border-radius:var(--pill); margin-bottom:18px;
}
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.sec-head h2{ font-size:clamp(26px,3.3vw,44px); }
.sec-head p{ margin-top:14px; font-size:16.5px; color:var(--body); }
.sec-head--center p{ margin-left:auto; margin-right:auto; }

/* ---------- 4. 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 26px; border-radius:var(--r);
  font-size:15.5px; font-weight:600; line-height:1;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease),
             background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:17px; height:17px; flex:none; }
.btn--primary{ background:var(--brand); color:#fff; box-shadow:0 6px 18px rgba(11,95,190,.28); }
.btn--primary:hover{ background:var(--brand-dk); color:#fff; transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(11,95,190,.34); }
.btn--ghost{ background:#fff; color:var(--ink); border:1px solid var(--line); }
.btn--ghost:hover{ border-color:var(--brand); color:var(--brand); transform:translateY(-2px); }
.btn--onDark{ background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px); }
.btn--onDark:hover{ background:rgba(255,255,255,.18); color:#fff; transform:translateY(-2px); }
/* 按钮里的品牌标识（如「阿里巴巴1688 店铺下单」）。
   ⚠️ SVG 的 viewBox 是官方方形 24×24，只给高度、宽度 auto，
   别写死 width —— 写死就会拉伸变形（同 .blogo 那条教训）。 */
.btn__logo{ height:20px; width:auto; display:block; flex:none; }
.btn--sm{ padding:9px 18px; font-size:14.5px; }
.btn--block{ width:100%; }

/* ---------- 5. 顶部导航 ---------- */
.head{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.head.is-stuck{ border-bottom-color:var(--line); box-shadow:0 2px 14px rgba(10,26,43,.06); background:rgba(255,255,255,.94); }
/* position:relative 是给 .mega 当锚点用的（见下），以前 .mega 锚在导航项上 */
.head__in{ display:flex; align-items:center; gap:26px; height:var(--head-h); position:relative; }
.logo{ display:flex; align-items:center; flex:none; }
.logo img{ height:44px; width:auto; }

/* 导航紧跟在 logo 右侧。原先这里的 margin-left:auto 把它顶到最右，已去掉。
   右侧不留东西（顶部的电话/报价块第七轮已删），所以不需要再用 auto 顶任何元素。 */
.nav{ display:flex; align-items:center; gap:4px; }
.nav__item{ position:relative; }
.nav__link{
  display:flex; align-items:center; gap:6px;
  padding:10px 15px; border-radius:var(--r);
  font-size:15.5px; font-weight:600; color:var(--ink-2);
  transition:background-color .18s var(--ease), color .18s var(--ease);
}
.nav__link:hover,.nav__link[aria-current="page"]{ background:var(--brand-lt); color:var(--brand); }
.nav__link .caret{ width:12px; height:12px; transition:transform .2s var(--ease); }
.nav__item:hover .caret{ transform:rotate(180deg); }

/* 产品大菜单
   🔑 锚点是 .head__in（页头内容容器），不是「产品中心」那个导航项 —— 导航项加了
   .nav__item--static（position:static），绝对定位就会上溯到 .head__in。
   为什么必须换锚点：导航项在页面左侧（约 x=230@901px）时，原来那套
   `left:50% + translateX(-50%)` 居中会让 760px 的面板向左溢出；
   改 left:0 向右展开则在 901~1133px 视口溢出右侧（实测改前 1024 档 scrollW=1133）。
   锚到 .head__in 后 left:0 = .wrap 的 padding box 左边，面板最多 760px，
   而 .head__in 最窄也有 901px（≤900 走手机抽屉）⇒ 数学上不可能越界。 */
.mega{
  position:absolute; top:calc(100% + 12px); left:0; transform:translateY(-8px);
  width:min(760px,92vw); padding:22px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px 20px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav__item:hover .mega,.nav__item:focus-within .mega{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}
/* 搭桥：菜单顶边在页头下方 12px 处，导航项底边还在页头里 ⇒ 中间那条空白带
   鼠标一穿过就丢 :hover、菜单自己收起来。补一条不可见的命中区把两端接上。
   （收起态下 .mega 是 pointer-events:none，这条桥跟着失效，不会挡别的东西。） */
.mega::before{ content:""; position:absolute; left:0; right:0; top:-27px; height:27px; }
/* 大菜单的宿主导航项：让 .mega 越过它、锚到 .head__in（见上方 .mega 注释） */
.nav__item--static{ position:static; }
.mega__col{ padding:6px 0; }
.mega__title{ font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); padding:0 12px 8px; }
.mega__link{ display:block; padding:8px 12px; border-radius:var(--r-sm);
  font-size:15px; color:var(--ink-2); font-weight:500; }
.mega__link:hover{ background:var(--brand-lt); color:var(--brand); }
.mega__all{ grid-column:1/-1; margin-top:8px; padding-top:16px; border-top:1px solid var(--line-2);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding-left:12px; padding-right:12px; font-size:15px; }

/* 页头导航右侧：阿里巴巴 1688 店铺直链
   位置＝**紧跟在「联系我们」导航项之后**。结构上它本来就排在 </nav> 后面，
   把它顶到最右的只是这里的 margin-left:auto —— 第十八轮按用户要求删掉了。
   第十七轮它是「页头右侧补位」用的（第七轮删掉电话/报价后右侧空着），现在改挂导航后面，
   故同时**整体缩小一档**（尺寸压到比导航项 15.5px 明显小，看着是「附加入口」而非同级导航）。
   ⚠️ 品牌色是官方橙 #FF6003，所以按钮用淡橙底 + 深橙字，别塞进蓝底 primary 按钮里。 */
.head__store{
  flex:none;
  display:flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:var(--pill);
  background:#FFF2E9; border:1px solid #FFD8C0; color:#B84800;
  font-size:13px; font-weight:700; white-space:nowrap;
  transition:background-color .18s var(--ease), border-color .18s var(--ease),
             transform .18s var(--ease), box-shadow .18s var(--ease);
}
.head__store:hover{ background:#FFE5D5; border-color:#FFC3A0; transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(255,96,3,.16); }
.head__store img{ height:14px; width:auto; display:block; }
.head__store .ext-ico{ width:11px; height:11px; opacity:.7; }
/* 手机/平板档：导航本就收进抽屉，这里也收掉，右侧仍留给汉堡（页脚与 CTA 都有入口） */
@media (max-width:900px){ .head__store{ display:none; } }

/* 汉堡按钮 */
.burger{ display:none; width:44px; height:44px; margin-left:auto; border-radius:var(--r);
  align-items:center; justify-content:center; color:var(--ink); }
.burger:hover{ background:var(--bg-soft); }

/* 移动端抽屉 */
.drawer{
  position:fixed; inset:0 0 0 auto; width:min(360px,86vw); z-index:80;
  background:#fff; box-shadow:var(--sh-lg);
  transform:translateX(102%); transition:transform .28s var(--ease);
  display:flex; flex-direction:column; overflow-y:auto; padding:20px 0 40px;
}
.drawer.is-open{ transform:translateX(0); }
.drawer__top{ display:flex; align-items:center; justify-content:space-between; padding:0 20px 18px;
  border-bottom:1px solid var(--line); }
.drawer__top img{ height:38px; }
.drawer__close{ width:40px; height:40px; border-radius:var(--r); display:grid; place-items:center; }
.drawer__close:hover{ background:var(--bg-soft); }
.drawer__link{ display:block; padding:14px 22px; font-size:17px; font-weight:600; color:var(--ink); }
.drawer__link:hover{ background:var(--brand-lt); color:var(--brand); }
.drawer__sub{ padding:4px 22px 12px; }
.drawer__sub a{ display:block; padding:7px 0; font-size:15px; color:var(--body); }
.drawer__sub a:hover{ color:var(--brand); }
.drawer__grp{ font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); padding:14px 22px 4px; }
.drawer__foot{ margin-top:auto; padding:22px; border-top:1px solid var(--line); }
.scrim{ position:fixed; inset:0; background:rgba(6,22,39,.45); z-index:70; opacity:0; visibility:hidden;
  transition:opacity .25s var(--ease), visibility .25s; backdrop-filter:blur(2px); }
.scrim.is-open{ opacity:1; visibility:visible; }

/* ---------- 6. 首屏 Hero ---------- */
.hero{ position:relative; overflow:hidden; color:#fff; isolation:isolate;
  background:linear-gradient(152deg,#061627 0%,#0A2C53 46%,#0B4C84 100%); }
.hero::before{ /* 光晕 */
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(900px 460px at 80% 8%, rgba(15,181,201,.30), transparent 62%),
    radial-gradient(760px 420px at 8% 96%, rgba(11,95,190,.42), transparent 62%);
}
.hero::after{ /* 点阵网格 */
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(760px 460px at 62% 40%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(760px 460px at 62% 40%, #000 0%, transparent 78%);
}
/* 首屏底纹：分子晶格 + 化工装置剪影（内联 SVG，零外部依赖） */
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__bg svg{ width:100%; height:100%; display:block; }
.hero__in{ position:relative; z-index:1;
  display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center;
  padding:88px 0 96px; }
.hero__eyebrow{ display:inline-flex; align-items:center; gap:9px; padding:7px 16px;
  border-radius:var(--pill); background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20); backdrop-filter:blur(6px);
  font-size:13.5px; font-weight:600; letter-spacing:.03em; color:#D6E9FF; margin-bottom:22px; }
.hero__eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px rgba(15,181,201,.22); }
.hero h1{ color:#fff; font-size:clamp(30px,4.4vw,50px); letter-spacing:-.022em; line-height:1.2; }
.hero__lead{ margin-top:22px; font-size:17px; line-height:1.85; color:rgba(226,238,250,.92); max-width:560px; }
.hero__btns{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero__meta{ margin-top:38px; padding-top:26px; border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; gap:14px 34px; }
.hero__meta div{ font-size:14px; color:rgba(200,220,240,.82); display:flex; align-items:center; gap:9px; }
.hero__meta svg{ width:16px; height:16px; color:var(--accent); flex:none; }

/* Hero 右侧数据卡 */
.hero__panel{ display:grid; gap:14px; }
.statcard{
  display:flex; align-items:center; gap:18px; padding:22px 24px; border-radius:var(--r-lg);
  background:rgba(255,255,255,.075); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px); transition:transform .3s var(--ease), background-color .3s var(--ease);
}
.statcard:hover{ transform:translateX(-6px); background:rgba(255,255,255,.12); }
.statcard__ico{ width:52px; height:52px; flex:none; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(140deg, rgba(15,181,201,.28), rgba(11,95,190,.32));
  border:1px solid rgba(255,255,255,.18); color:#9FE6F0; }
.statcard__ico svg{ width:24px; height:24px; }
.statcard b{ display:block; color:#fff; font-size:27px; line-height:1.15; letter-spacing:-.02em; }
.statcard span{ font-size:14px; color:rgba(198,218,238,.86); }

/* ---------- 7. 品牌条（一行 · 无缝头尾循环） ---------- */
.brands{ border-bottom:1px solid var(--line); background:#fff; padding:30px 0; }
.brands__head{ text-align:center; margin-bottom:20px; }
.brands__label{ font-size:13.5px; font-weight:700; letter-spacing:.06em; color:var(--muted);
  text-transform:uppercase; }
/* 关于页侧栏复用同一组 chip，那边是窄栏，保持换行排列 */
.brands__list{ display:flex; flex-wrap:wrap; gap:12px 14px; align-items:center; }
.brandchip{ padding:8px 17px; border:1px solid var(--line); border-radius:var(--pill);
  font-size:14px; font-weight:600; color:var(--ink-2); background:var(--bg-soft); letter-spacing:.01em;
  transition:border-color .18s var(--ease), color .18s var(--ease), background-color .18s var(--ease); }
.brandchip:hover{ border-color:var(--brand); color:var(--brand); background:#fff; }

/* 合作品牌标识：各品牌官网的官方标识文件（本地 assets/img/brands/，零外部依赖） */
.brandchip--lg{ display:inline-flex; align-items:center; gap:9px; padding:9px 18px; }

/* 7 个品牌一行塞不下：26px 高时标识本身就 650px 宽，再加胶囊内边距、中文注、间距，
   合计约 1500px > 容器 1152px（--max 1200 减左右各 24px 内边距）。
   所以走无缝循环：轨道复制 3 份、位移 -33.333%（正好一份宽）。
   ⚠️ 只复制 2 份的话 -50% 仅覆盖约 1512px，1920/2560 屏幕上接缝会露出空档。
   🔴 2026-10-14 用户反馈：全屏（3840px）时**同屏会看到 2~3 轮、同一品牌重复出现**
   —— 这是跑马灯的固有问题：只要「可见区宽 > 一轮内容宽」就必然重复。
   解法＝把可见区限定到站点内容宽 1152px（< 一轮 1531px），并与上方「合作品牌」标签对齐。
   ⚠️ 别把 max-width 拿掉，也别为「塞满宽屏」把轨道拉长 —— 那只会让重复更明显。 */
.marquee{ position:relative; overflow:hidden; max-width:1152px; margin:0 auto; }
.marquee::before,.marquee::after{ content:""; position:absolute; top:0; bottom:0; width:72px;
  z-index:2; pointer-events:none; }
.marquee::before{ left:0;  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,0) 100%); }
.marquee::after{  right:0; background:linear-gradient(270deg,#fff 0%,rgba(255,255,255,0) 100%); }
.marquee__track{ display:flex; width:max-content; animation:brandsMarquee 45s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
/* 每份右侧补一份间距，三份宽度才严格相等 —— 否则 -33.333% 会差半个 gap */
.marquee__copy{ display:flex; align-items:center; gap:16px; padding-right:16px; }
.marquee .brandchip{ flex:none; }
@keyframes brandsMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-33.3333%); } }

/* 官方品牌标识：统一显示比例 —— 高度统一，宽度按各自原比例 */
.blogo{ height:26px; width:auto; max-width:150px; object-fit:contain; object-position:left center;
  flex:none; display:block; }
/* 品牌条里放大一档；关于页侧栏窄，仍用上面的 26px */
.marquee .blogo{ height:32px; }
/* EVANS 是 12.62:1 的极端长条（viewBox 270.82×21.46）：按 32px 高渲染要 403.9px 宽。
   第十四轮 260px（被**宽度**卡住 ⇒ 渲染成 260×20.1，比别人矮一截）
   → 第十八轮按用户「齐高」要求改 413px（403.78×32）
   → ⚠️ 2026-10-14 用户看到实物后反馈「变得很大了、跟其他标识和品牌名比例不对」⇒ **退回 260px**。
   三档代价（改一行即可换）：260px→20.1 高，一屏 5 个／340px→26.3 高，一屏 5 个／
   413px→32.0 高（＝齐高），但**一格占半条**、一屏可见品牌 5→4 个。 */
.marquee .blogo--wide{ max-width:260px; }
.bword{ font-size:15.5px; line-height:1; color:inherit; }
.bcn{ font-style:normal; font-size:12px; font-weight:500; color:inherit; opacity:.6; letter-spacing:0; }
/* 品牌条里的标识放到 32px 后，旁边 12px 的中文名显得又小又虚，比例失调。
   汉字是"满格"字面，跟西文字标的视觉重量不能按同一套字号算 ⇒ 提到 14px、
   并压掉一点透明度损失。关于页侧栏标识仍是 26px，那边保持 12px 不动。 */
.marquee .bcn{ font-size:14px; opacity:.72; }

/* ---------- 8. 卡片 ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px; transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
  position:relative; height:100%;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); border-color:#CFE2F7; }
.card__ico{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin-bottom:18px;
  background:linear-gradient(140deg,var(--brand-lt),#F3F8FE); color:var(--brand);
  border:1px solid #DCEAFB; }
.card__ico svg{ width:24px; height:24px; }
.card h3{ font-size:18px; margin-bottom:10px; }
.card p{ font-size:15px; color:var(--body); }
.card__num{ position:absolute; top:20px; right:24px; font-size:13px; font-weight:700;
  color:var(--muted); letter-spacing:.06em; }

/* ---------- 9. 产品筛选与列表 ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:34px; }
.chip{
  padding:9px 18px; border-radius:var(--pill); border:1px solid var(--line);
  background:#fff; font-size:15px; font-weight:600; color:var(--ink-2);
  transition:all .18s var(--ease);
}
.chip:hover{ border-color:var(--brand); color:var(--brand); }
.chip.is-active{ background:var(--brand); border-color:var(--brand); color:#fff;
  box-shadow:0 5px 16px rgba(11,95,190,.26); }
.chip small{ opacity:.62; margin-left:5px; font-weight:600; }
.search{ position:relative; margin-left:auto; min-width:250px; }
.search input{
  width:100%; padding:11px 16px 11px 42px; border:1px solid var(--line); border-radius:var(--pill);
  font-size:15px; color:var(--ink); background:#fff; transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.search input::placeholder{ color:var(--muted); }
.search input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(11,95,190,.11); }
.search svg{ position:absolute; left:15px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:var(--muted); pointer-events:none; }
.catnote{ font-size:14.5px; color:var(--muted); margin:-22px 0 30px; }
/* 手机端产品页「展开其余 N 个」按钮：宽屏一律不显示（CSS 里再按 640px 打开） */
.morewrap{ display:none; text-align:center; margin-top:38px; }
.empty{ text-align:center; padding:64px 20px; color:var(--muted); border:1px dashed var(--line);
  border-radius:var(--r-lg); background:var(--bg-soft); }

/* 产品卡 */
.pcard{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:24px; height:100%; overflow:hidden;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.pcard:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); border-color:#CFE2F7; }
/* 产品卡图形区：内联 SVG 分子图，按分类各一款 */
.pcard__art{
  position:relative; height:138px; margin:-24px -24px 18px; overflow:hidden;
  border-radius:var(--r-lg) var(--r-lg) 0 0; border-bottom:1px solid var(--line);
  display:grid; place-items:center; color:var(--brand);
  background:linear-gradient(150deg,#EAF3FE 0%,#F6FAFF 58%,#EFF8FB 100%);
}
.pcard__art::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(11,95,190,.20) 1px, transparent 1px);
  background-size:15px 15px;
  -webkit-mask-image:radial-gradient(72% 78% at 50% 46%, #000 0%, transparent 76%);
  mask-image:radial-gradient(72% 78% at 50% 46%, #000 0%, transparent 76%);
}
.pcard__mol{ position:relative; width:172px; height:118px; opacity:.92; transition:transform .35s var(--ease); }
.pcard:hover .pcard__mol{ transform:scale(1.045); }
.pcard__cat{ position:absolute; top:14px; left:16px; z-index:1;
  font-size:12px; font-weight:700; letter-spacing:.05em; color:var(--brand);
  background:rgba(255,255,255,.80); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  padding:5px 12px; border-radius:var(--pill); border:1px solid #D8E8FA; white-space:nowrap; }
.pcard h3{ font-size:17px; line-height:1.45; margin-bottom:9px; }
.pcard h3 a{ color:var(--ink); }
.pcard h3 a:hover{ color:var(--brand); }
.pcard__desc{ font-size:14.5px; color:var(--body); margin-bottom:16px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pcard__chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:16px; border-top:1px solid var(--line-2); }
.tchip{ font-size:12.5px; color:var(--body); background:var(--bg-soft); border:1px solid var(--line-2);
  padding:4px 11px; border-radius:var(--r-sm); font-weight:500; }
.tchip b{ color:var(--ink); font-weight:700; }
.pcard__more{ margin-top:16px; display:inline-flex; align-items:center; gap:7px;
  font-size:14.5px; font-weight:600; color:var(--brand); }
.pcard__more svg{ width:15px; height:15px; transition:transform .2s var(--ease); }
.pcard:hover .pcard__more svg{ transform:translateX(4px); }

/* ---------- 10. 应用行业 ---------- */
.industries{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ind{
  position:relative; overflow:hidden; padding:30px 26px; border-radius:var(--r-lg); color:#fff;
  background:linear-gradient(150deg,#0B3B6F,#0A5FA8); min-height:172px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ind:nth-child(2n){ background:linear-gradient(150deg,#08456E,#0C7C97); }
.ind:nth-child(3n){ background:linear-gradient(150deg,#0A2C53,#0B4C84); }
.ind:hover{ transform:translateY(-5px); box-shadow:var(--sh-lg); }
.ind::after{ content:""; position:absolute; right:-46px; bottom:-56px; width:170px; height:170px;
  border-radius:50%; background:rgba(255,255,255,.07); }
.ind__ico{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); margin-bottom:auto; }
.ind__ico svg{ width:22px; height:22px; color:#fff; }
.ind h3{ color:#fff; font-size:19px; margin-top:22px; }
.ind p{ font-size:14px; color:rgba(216,232,246,.88); margin-top:7px; }

/* ---------- 11. 关于我们 ---------- */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; }
.prose p + p{ margin-top:16px; }
.prose{ font-size:16.5px; }
.factlist{ display:grid; gap:14px; margin-top:28px; }
.factlist li{ display:flex; gap:13px; align-items:flex-start; font-size:15.5px; color:var(--ink-2); }
.factlist svg{ width:20px; height:20px; color:var(--accent); flex:none; margin-top:3px; }

.statgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.stat{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.stat:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }
.stat b{ display:block; font-size:36px; line-height:1; color:var(--brand); letter-spacing:-.03em; }
.stat b small{ font-size:17px; font-weight:700; margin-left:3px; letter-spacing:0; }
.stat span{ display:block; margin-top:10px; font-size:14.5px; color:var(--body); }

.valuerow{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:52px; }
.value{ padding:26px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--line);
  border-left:3px solid var(--accent); }
.value b{ display:block; font-size:16.5px; color:var(--ink); margin-bottom:6px; }
.value span{ font-size:13.5px; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; font-weight:700; }

/* ---------- 13. 行动召唤条 ---------- */
.cta{ position:relative; overflow:hidden; color:#fff; isolation:isolate;
  background:linear-gradient(140deg,#062B57 0%,#0A3E76 52%,#0B5FBE 100%); padding:76px 0; }
.cta::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.45;
  background-image:radial-gradient(rgba(255,255,255,.15) 1px, transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(600px 300px at 80% 50%, #000, transparent 76%);
  -webkit-mask-image:radial-gradient(600px 300px at 80% 50%, #000, transparent 76%); }
.cta__in{ display:flex; align-items:center; justify-content:space-between; gap:44px; flex-wrap:wrap; }
.cta h2{ color:#fff; font-size:clamp(23px,2.8vw,32px); }
.cta p{ margin-top:12px; font-size:16.5px; color:rgba(216,232,246,.9); max-width:620px; }
.cta__btns{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- 14. 页脚 ---------- */
.foot{ background:#071A2E; color:#9FB3C8; padding:66px 0 0; font-size:14.5px; }
.foot__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:44px; padding-bottom:52px; }
.foot h4{ color:#fff; font-size:15.5px; margin-bottom:20px; letter-spacing:.01em; }
/* 页脚标识：改用**反白件** logo-light.svg（字标 #231916 → #FFFFFF，生成器 scripts/build_logo_light.py），
   那块突兀的纯白牌就此撤掉 —— 2026-10-14 用户在对照页 _footer_logo_variants.html 里选定方案 A。
   ⚠ 右侧那 36px 内衬是**故意留的**：白牌原带有 18px 左右衬边，去牌后左右衬边并到右侧，
   图宽才仍是 283px（**与改前逐像素同尺寸** —— 用户明确要求「保持同样大小」），左缘则与下方文字段对齐。
   写成 padding:16px 0 会让 logo 悄悄放大到 319px（+12.7%），别改。 */
.foot__logo{ display:block; width:100%; margin-bottom:22px; padding:16px 36px 16px 0; }
.foot__logo img{ display:block; width:100%; height:auto; }
.foot p{ color:#9FB3C8; }
.foot a{ color:#B9CADE; }
.foot a:hover{ color:#fff; }
/* 页脚「联系我们」里的地址做成可点链接（跳地图），但**外观与原来的纯文本一字不差**
   （用户 2026-10-14 要求「样式什么的都不用变」）：
   .foot a 默认是 #B9CADE，比正文的 #9FB3C8 亮 ⇒ 这里用 color:inherit 把它按回正文色。
   ⚠ 必须另写一条 :hover —— `.foot__contact a.foot__addr` 与 `.foot a:hover` **特异性相同**
     （都是 0,2,1），同分时按源码顺序，本段在后面 ⇒ 不补 :hover 的话悬停也不会变白。 */
.foot__contact a.foot__addr{ color:inherit; }
.foot__contact a.foot__addr:hover{ color:#fff; }
.foot ul li{ margin-bottom:11px; }
.foot__contact li{ display:flex; gap:11px; align-items:flex-start; margin-bottom:14px; }
.foot__contact svg{ width:17px; height:17px; color:var(--accent); flex:none; margin-top:4px; }
.foot__contact b{ color:#fff; font-weight:600; }
.foot__bar{ border-top:1px solid rgba(255,255,255,.09); padding:22px 0; display:flex;
  justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:13.5px; color:#7E93A8; }

/* ---------- 15. 内页通用 ---------- */
.pagehead{ position:relative; overflow:hidden; color:#fff; isolation:isolate;
  background:linear-gradient(140deg,#062B57 0%,#0A3E76 55%,#0B5FBE 100%); padding:56px 0 60px; }
.pagehead::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.4;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(520px 280px at 76% 40%, #000, transparent 78%);
  -webkit-mask-image:radial-gradient(520px 280px at 76% 40%, #000, transparent 78%); }
.pagehead h1{ color:#fff; font-size:clamp(25px,3.2vw,38px); }
.pagehead p{ margin-top:13px; font-size:16.5px; color:rgba(214,232,248,.9); max-width:720px; }
.crumb{ display:flex; align-items:center; gap:9px; font-size:14px; color:rgba(200,220,240,.85); margin-bottom:18px; }
.crumb a{ color:rgba(200,220,240,.85); }
.crumb a:hover{ color:#fff; }
.crumb svg{ width:13px; height:13px; opacity:.7; }
.crumb span{ color:#fff; font-weight:600; }

/* 侧栏布局 */
.withside{ display:grid; grid-template-columns:264px 1fr; gap:44px; align-items:start; }
/* 🔴 grid 子项默认 min-width:auto ⇒ 内容（如 width:max-content 的滚动轨道）会把 1fr 撑破。
   关于我们页里放了品牌滚动条后，右栏被撑到 1152px（其他页面是 844），切页时整页右移。 */
.withside > *{ min-width:0; }
.side{ position:sticky; top:calc(var(--head-h) + 20px); }
.side__box{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.side__head{ padding:17px 22px; font-size:15.5px; font-weight:700; color:#fff;
  background:linear-gradient(120deg,#0A3E76,#0B5FBE); }
.side__list a{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 22px; font-size:15px; color:var(--ink-2); border-bottom:1px solid var(--line-2);
  transition:background-color .18s var(--ease), color .18s var(--ease); }
.side__list a:last-child{ border-bottom:0; }
.side__list a:hover{ background:var(--brand-lt); color:var(--brand); }
.side__list a.is-active{ background:var(--brand-lt); color:var(--brand); font-weight:700;
  box-shadow:inset 3px 0 0 var(--brand); }
.side__list small{ color:var(--muted); font-size:13px; }
.side__call{ margin-top:20px; padding:24px 22px; border-radius:var(--r-lg); color:#fff;
  background:linear-gradient(150deg,#083E70,#0B5FBE); }
.side__call b{ display:block; color:#fff; font-size:16px; margin-bottom:8px; }
.side__call p{ font-size:14px; color:rgba(212,230,246,.9); margin-bottom:16px; }
.side__tel{ display:block; font-size:21px; font-weight:700; color:#fff; letter-spacing:-.01em; margin-bottom:16px; }

/* ---------- 16. 产品详情 ---------- */
.pdetail__head{ display:flex; gap:34px; align-items:flex-start; margin-bottom:36px; }
.pdetail__mark{ width:88px; height:88px; flex:none; border-radius:22px; display:grid; place-items:center;
  background:linear-gradient(140deg,#E9F1FC,#F5FAFE); border:1px solid #DCEAFB; color:var(--brand); }
.pdetail__mark svg{ width:40px; height:40px; }
.pdetail__head h1{ font-size:clamp(22px,2.6vw,30px); }
.pdetail__tag{ margin-top:12px; font-size:16px; color:var(--body); }
.block{ margin-top:38px; }
.block__title{ display:flex; align-items:center; gap:11px; font-size:18px; font-weight:700; color:var(--ink);
  margin-bottom:18px; padding-bottom:13px; border-bottom:1px solid var(--line); }
.block__title::before{ content:""; width:4px; height:19px; border-radius:2px;
  background:linear-gradient(180deg,var(--brand),var(--accent)); }

.facts{ display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:10px; }
.fact{ background:var(--bg-soft); border:1px solid var(--line-2); border-radius:var(--r); padding:13px 17px; }
.fact span{ display:block; font-size:12.5px; color:var(--muted); font-weight:600; letter-spacing:.03em; margin-bottom:3px; }
.fact b{ font-size:15.5px; color:var(--ink); font-weight:600; word-break:break-word; }

.spec{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.spec tr:nth-child(odd){ background:var(--bg-soft); }
.spec th,.spec td{ padding:13px 20px; font-size:15px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line-2); }
.spec tr:last-child th,.spec tr:last-child td{ border-bottom:0; }
.spec th{ width:38%; font-weight:600; color:var(--ink-2); background:transparent; }
.spec td{ color:var(--body); }

.paras{ display:grid; gap:13px; }
.paras li{ position:relative; padding-left:22px; font-size:16px; line-height:1.8; color:var(--body); }
.paras li::before{ content:""; position:absolute; left:4px; top:.66em; width:6px; height:6px;
  border-radius:50%; background:var(--accent); }

.relgrid{ display:flex; flex-wrap:wrap; gap:14px; }
.relgrid > .relcard{ flex:1 1 230px; }   /* 末行卡片自己撑满，不再留缺口 */

.relcard{ display:block; padding:17px 20px; border:1px solid var(--line); border-radius:var(--r);
  background:#fff; transition:all .2s var(--ease); }
.relcard:hover{ border-color:var(--brand); box-shadow:var(--sh-sm); transform:translateY(-3px); }
.relcard b{ display:block; font-size:15px; color:var(--ink); margin-bottom:4px; }
.relcard span{ font-size:13px; color:var(--muted); }

.notice{ margin-top:26px; padding:17px 21px; border-radius:var(--r); background:var(--accent-lt);
  border:1px solid #BEEAED; font-size:14.5px; color:#0A5560; display:flex; gap:12px; }
.notice svg{ width:19px; height:19px; flex:none; margin-top:2px; }

/* ---------- 17. 联系 ---------- */
/* ⚠ 这里原有的 .contactgrid / .cinfo*（旧联系页左侧那列「联系方式」清单）已随 B′ 版重做一并删除，
   联系页的新样式在第 19 段。此段只留两处共用的 .mapbox。 */
.mapbox{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--bg-soft); }
.mapbox__hd{ padding:17px 22px; border-bottom:1px solid var(--line); font-weight:700; color:var(--ink); font-size:15.5px; }
.mapbox__bd{ padding:26px 22px; font-size:15px; color:var(--body); }
.mapbox__bd b{ color:var(--ink); }

/* ---------- 18. 滚动显现动画 ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  /* ⚠️ 这里原来是 `*{animation-duration:.001ms !important}`，再补一条
     `.marquee__track{45s !important}` 去"顶回"它 —— **那是错的做法**：等于把
     「品牌条滚不滚」挂到系统设置上（用户当场质疑「为什么做出来的网页要跟系统
     设置挂钩」「搞这种反人类的设置」），而且靠 !important 打擂台，谁调一下顺序
     就又会冻住。
     现在改成**把品牌条整个排除在这条降级规则的作用范围之外**（`:not(.marquee *)`）
     —— 品牌条的动画从此与系统设置无关，也不再需要任何 !important 顶回。
     ⚠️ 代价照实记：跑马灯不参与「减少动效」降级；暂停只剩"鼠标悬停"一种。 */
  *:not(.marquee *){ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------- 19. 联系我们（B′ 版） ---------- */
/* 用户 2026-10-14 从 A/B/C 三案里选定 B（主次分明）：询价建议前置为白卡，
   下方左深色「销售热线」主角卡 + 右大定位卡。以下类**只有联系页**使用。
   ⚠ 改这里的任何字号 / 字重 / 文案长度，都要重跑 _b2_fit.py 反推地图高度（见 build_site.py 的 MAP_IMG_H）。 */
.lbl{ display:block; font-size:13.5px; color:var(--muted); font-weight:600;
      letter-spacing:.05em; margin-bottom:5px; }
/* ⚠ display:block 是必需的：.val 是 <span>，不设就 inline，固话与手机会挤在同一行 */
.val{ display:block; font-size:17.5px; color:var(--ink); font-weight:700; line-height:1.45; }
.val a{ color:var(--ink); }

/* ① 询价建议 —— 首位卡 */
.qbox{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
       padding:26px 28px 24px; box-shadow:var(--sh-sm); overflow:hidden; }
.qbox::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
       background:linear-gradient(180deg,var(--brand),var(--accent)); }
.qbox__hd{ display:flex; align-items:center; gap:15px; margin-bottom:20px; }
.qbox__ico{ width:48px; height:48px; flex:none; border-radius:14px; display:grid; place-items:center;
       background:var(--brand-lt); color:var(--brand); }
.qbox__ico svg{ width:23px; height:23px; }
.qbox__t{ font-size:21px; font-weight:800; color:var(--ink); margin:0; letter-spacing:.01em; }
.qbox__lead{ font-size:14.5px; color:var(--muted); margin:4px 0 0; }
.adv{ display:grid; gap:12px; }
.adv--2{ grid-template-columns:1fr 1fr; }
.adv li{ display:flex; gap:11px; font-size:15.5px; line-height:1.75; color:var(--body);
       background:var(--bg-soft); border-radius:var(--r); padding:15px 17px; }
.adv li b{ color:var(--ink); }
.adv svg{ width:18px; height:18px; color:var(--accent); flex:none; margin-top:3px; }

/* ② 主体：左信息 + 右大定位卡 */
.bgrid{ display:grid; grid-template-columns:1fr 1.12fr; gap:34px; align-items:start; }
.bmain{ background:linear-gradient(135deg,var(--brand-dp),var(--brand)); border-radius:var(--r-lg);
        padding:28px 26px; color:#fff; }
.bmain .lbl{ color:rgba(255,255,255,.62); }
.bmain__row{ display:flex; align-items:center; gap:14px; padding:13px 0; }
.bmain__row + .bmain__row{ border-top:1px solid rgba(255,255,255,.14); }
.bmain__i{ width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center;
        background:rgba(255,255,255,.14); color:#fff; }
.bmain__i svg{ width:18px; height:18px; }
.bmain__k{ font-size:13.5px; color:rgba(255,255,255,.66); font-weight:600; letter-spacing:.05em; }
/* 字重 800 → **700**（用户 2026-10-14 在四档对照图里选定）。
   🔑 这几档是**实测**出来的、不是随手写的：本机 Segoe UI 没有 Medium，
   w=500 与 w=600 渲染**完全同宽**（136.02px）⇒ 真值只有 800 / 700 / 600 / 400。
   四档视觉对照见 _shots/b2-weights.png（由 _b2_weight.py 生成）。 */
.bmain__v{ font-size:21px; font-weight:700; color:#fff; line-height:1.35; }
.bmain__v a{ color:#fff; }
.brows{ display:grid; gap:11px; margin-top:14px; }
.brow{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line);
       border-radius:var(--r); padding:15px 18px; }
.brow:hover{ border-color:#CFE2F7; box-shadow:var(--sh-sm); }
.brow__i{ width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center;
        background:var(--bg-soft); color:var(--brand); }
.brow__i svg{ width:18px; height:18px; }
.brow .val{ font-size:17.5px; }

/* 店铺按钮 */
.shopa{ display:flex; align-items:center; gap:12px; padding:15px 18px; border-radius:var(--r);
       background:linear-gradient(180deg,#FFF7F1,#FFEFE3); border:1px solid #FFD9BE; color:#8A3B00; }
.shopa:hover{ border-color:#FFB7A8; box-shadow:var(--sh-sm); }
.shopa img{ height:26px; width:auto; flex:none; }
.shopa b{ font-size:17.5px; font-weight:800; color:#8A3B00; }
.shopa span{ font-size:13.5px; color:#B4652A; display:block; margin-top:2px; }
.shopa .go{ margin-left:auto; color:#C25A16; }

/* 定位卡 */
.geo{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:#fff; }
/* ⚠ 高度**故意不写在这里**：由 HTML 行内给定，值来自 build_site.py 的 MAP_IMG_H（反推所得）。
   写死一份在这里会变成第二个真相来源，改高度时必然漂移。 */
.geo__map{ position:relative; display:block; background:#EEF4FB; }
.geo__map .hint{ position:absolute; left:14px; bottom:12px; font-size:12px; color:#6B7E93;
       background:rgba(255,255,255,.9); padding:3px 9px; border-radius:var(--pill); }
.mmap{ display:block; width:100%; height:100%; }
/* 到访提示：字号比站点默认（hd 15.5 / bd 15）放大一档 —— 用户 2026-10-14 要求 */
.mapbox__hd{ font-size:17px; }
.mapbox__bd{ font-size:16.5px; }
.geo__bd{ padding:20px 22px 22px; }
.geo__addr{ font-size:16.5px; color:var(--ink); font-weight:700; line-height:1.6; }
.geo__zip{ font-size:13.5px; color:var(--muted); margin-top:6px; }
@media (max-width:900px){
  .bgrid{ grid-template-columns:1fr; gap:18px; }
  .adv--2{ grid-template-columns:1fr; }
  .qbox{ padding:22px 20px 20px; }
}

/* ---------- 20. 响应式 ---------- */
@media (max-width:1080px){
  .hero__in{ grid-template-columns:1fr; gap:44px; padding:64px 0 72px; }
  .hero__panel{ grid-template-columns:repeat(3,1fr); display:grid; }
  .statcard{ flex-direction:column; align-items:flex-start; gap:12px; padding:20px; }
  .split{ grid-template-columns:1fr; gap:40px; }
  .withside{ grid-template-columns:1fr; gap:32px; }
  .side{ position:static; }
  .foot__grid{ grid-template-columns:1fr 1fr; gap:34px; }
}
@media (max-width:900px){
  .nav{ display:none; }
  .burger{ display:flex; }
  .g4{ grid-template-columns:repeat(2,1fr); }
  .g3{ grid-template-columns:repeat(2,1fr); }
  .industries{ grid-template-columns:repeat(2,1fr); }
  .valuerow{ grid-template-columns:1fr; }
  .section{ padding:64px 0; }
  .pdetail__head{ flex-direction:column; gap:20px; }
}
@media (max-width:640px){
  .wrap{ padding:0 18px; }
  .g2,.g3,.g4{ grid-template-columns:1fr; }
  .industries{ grid-template-columns:1fr; }
  .hero__panel{ grid-template-columns:1fr; }
  .statgrid{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr; gap:30px; }
  .marquee::before,.marquee::after{ width:40px; }
  .filters{ gap:8px; }
  .search{ margin-left:0; width:100%; }
  .cta__in{ flex-direction:column; align-items:flex-start; }
  .hero__btns .btn{ flex:1 1 auto; }
  .spec th{ width:44%; }
  /* 首页精选产品：手机端只留 4 张，其余靠「查看全部 51 个产品」按钮引导进产品页 */
  #products .grid.g4 > .pcard:nth-child(n+5){ display:none; }
  /* 产品页：首屏之外的卡片由「展开其余 N 个产品」按钮放出 */
  .morewrap.is-on{ display:block; }
}

/* ---------- 21. 打印 ---------- */
@media print{
  .head,.drawer,.scrim,.cta,.foot,.brands,.hero__panel{ display:none !important; }
  body{ color:#000; }
  .card,.pcard,.spec{ border-color:#ccc; box-shadow:none; }
}

/* ── 产品详情页实拍主图（2026-10-20 新增）──────────────────────── */
/* 统一画框：所有产品页共用同一个 4:3 框，图用 contain 缩放进框内（不裁切）。
   源图比例从 1:1 到 914x685 都有，各按各的比例显示会参差不齐。 */
.pdetail__media{margin:0 auto 26px;width:100%;max-width:640px;aspect-ratio:4/3;
  border-radius:14px;overflow:hidden;background:#eef2f7;
  box-shadow:0 10px 30px rgba(16,42,74,.10)}
.pdetail__media img{display:block;width:100%;height:100%;object-fit:cover}

/* ── 关于我们：办公区实景（2026-10-20 新增）────────────────────── */
.about__media{margin:24px 0 0;border-radius:14px;overflow:hidden;
  background:#eef2f7;box-shadow:0 10px 30px rgba(16,42,74,.10)}
.about__media img{display:block;width:100%;height:auto}
.about__media figcaption{margin:0;padding:10px 14px;font-size:13px;color:#6b7f92;
  background:#f4f7fa;border-top:1px solid #e3ebf2}