/* =========================================================
   聚合精材官网 · 公共样式（以 B 版为准；颜色一律用 theme.css 的变量）
   第 1 次修改补充（10-21）：参照 broadpharm.com / biochempeg.com，标题不特别大、正文和说明整体放大，
   大小字反差匀称；Logo 行放大；首屏改通栏背景图轮播。
   第 2 次修改（10-22）：首屏内容居中、标题两行错位对齐；产品中心下拉；中文词不拆行（.nw / .kw，见 设计说明.md）。
   断点：≥1366 宽屏；1024–1365 窄电脑；768–1023 平板；<768 手机
   字号阶梯：14 / 15 / 16 / 17 / 18 / 20 / 22 / 28 / 36
     首屏标题 40 + 30（第二行 = 第一行 × 0.75；手机 28 + 21）；区块标题 28（手机 24）；卡片标题 18–22；正文 17；说明句 18；辅助字最小 14（坐标数字 13）
   间距：4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 88
   圆角：小 8（标签、输入框）/ 中 16（卡片、面板、配图）/ 大 24（示意图）/ 胶囊 999（按钮、芯片）
   图标：全部线性图标，线宽 1.8–2.2，颜色 currentColor
   不用 color-mix()（兼容 Win7 Chrome 109、旧版国产浏览器）
   ========================================================= */

:root {
  --font: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --container: 1280px;
  --gutter: 24px;
  --r-s: 8px;
  --r-m: 16px;
  --r-l: 24px;
  --r-pill: 999px;
  --section-y: 88px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.75;
  color: var(--c-text);
  background: var(--c-bg);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { color: var(--c-ink); line-height: 1.35; text-wrap: balance; }
p { text-wrap: wrap; }
:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; border-radius: 4px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* 中文不拆词：.nw = 手写的专有词组（大类名、化学式等），.kw = site.js 按词表自动包的词（<k-w> 标签）；两者都只在词与词之间换行 */
.nw, .kw { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* SVG 渐变 stop 颜色跟随主题 */
.stop-a { stop-color: var(--c-brand); }
.stop-b { stop-color: var(--c-brand-2); }
.stop-aux { stop-color: var(--c-aux); }
.stop-deep { stop-color: var(--c-brand-deep); }
.stop-accent { stop-color: var(--c-accent); }
.stop-white { stop-color: #FFFFFF; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 30px; border-radius: var(--r-pill);
  font-size: 17px; font-weight: 600; letter-spacing: .04em; white-space: nowrap;
  border: 1.5px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn--primary { color: #fff; background: var(--btn-primary-bg); box-shadow: var(--btn-primary-shadow); }
.btn--primary:hover { transform: translateY(-1px); }
.btn--ghost { color: var(--c-brand-deep); border-color: rgba(var(--rgb-brand), .45); background: rgba(255,255,255,.75); }
.btn--ghost:hover { background: var(--c-brand-soft); }
.btn--light { color: #fff; border-color: rgba(255,255,255,.75); background: rgba(255,255,255,.08); }
.btn--light:hover { background: rgba(255,255,255,.18); }
.btn--text { color: var(--c-brand-deep); padding: 0 8px; }
.btn--text:hover { text-decoration: underline; text-underline-offset: 4px; }

.round-btn {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1.5px solid var(--c-line); background: var(--c-card); color: var(--c-brand-deep);
  transition: border-color .15s, color .15s;
}
.round-btn svg { width: 20px; height: 20px; }
.round-btn:hover { border-color: var(--c-brand); color: var(--c-brand); }

.tag {
  display: inline-block; padding: 0 10px; border-radius: var(--r-s);
  font-size: 14px; line-height: 26px; font-weight: 600;
  background: var(--c-brand-soft); color: var(--c-brand-deep);
}

/* ======================= 头部（Logo 行参照 BroadPharm：Logo、搜索框放大，右边两行写邮箱和电话） ======================= */
.site-header { position: relative; z-index: 20; background: var(--c-card); box-shadow: 0 1px 0 var(--c-line); }
.header-top { display: flex; align-items: center; gap: 20px; height: 120px; }
.brand { flex: none; }
.brand img { height: 74px; width: auto; }  /* 参照 BroadPharm：Logo 比搜索框更醒目 */
.icon-btn { width: 44px; height: 44px; border: 0; background: none; display: grid; place-items: center; color: var(--c-ink); border-radius: var(--r-s); }
.icon-btn svg { width: 26px; height: 26px; }
.icon-btn.menu-toggle { display: none; }

.site-search {
  flex: 1 1 400px; min-width: 300px; display: flex; align-items: stretch; height: 54px;
  border: 1.5px solid rgba(var(--rgb-brand), .5); border-radius: var(--r-pill);
  background: var(--c-card); overflow: hidden;
}
.site-search__scope { position: relative; display: flex; align-items: center; border-right: 1px solid var(--c-line); }
.site-search__scope select {
  appearance: none; border: 0; background: transparent; height: 100%;
  width: 108px; padding: 0 26px 0 16px; font-size: 16px; color: var(--c-ink); cursor: pointer;
}
.site-search__scope svg { position: absolute; right: 8px; width: 16px; height: 16px; pointer-events: none; color: var(--c-muted); }
.site-search__input { flex: 1; min-width: 0; border: 0; padding: 0 6px 0 12px; font-size: 16px; background: transparent; outline: none; }
.site-search__input::placeholder { color: var(--c-muted); }
.site-search:focus-within { box-shadow: 0 0 0 3px rgba(var(--rgb-brand), .2); }
.site-search__btn {
  display: flex; align-items: center; justify-content: center; border: 0; width: 64px;
  color: #fff; background: var(--g-brand);
}
.site-search__btn svg { width: 22px; height: 22px; }

/* 邮箱 / 电话（上下两行，带图标，可点） */
.header-contact { flex: none; display: grid; gap: 2px; }
.header-contact a { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--c-brand-deep); white-space: nowrap; font-variant-numeric: tabular-nums; }
.header-contact a:last-child { font-size: 17px; font-weight: 700; letter-spacing: .02em; }
.header-contact a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.header-contact svg { width: 18px; height: 18px; flex: none; color: var(--c-brand); }

/* 中 / Eng、我的账户、询价清单：图标 + 文字，无底色 */
.header-actions { flex: none; margin-left: auto; display: flex; align-items: center; gap: 16px; padding-left: 18px; border-left: 1px solid var(--c-line); }
.lang-switch { display: flex; align-items: center; gap: 2px; font-size: 16px; color: var(--c-muted); }
.main-nav .lang-switch { margin-left: auto; }
.lang-switch--mobile { display: none; }
.lang-switch button { border: 0; background: none; padding: 2px 4px; font-size: 16px; color: var(--c-muted); }
.lang-switch button.is-active { color: var(--c-brand-deep); font-weight: 700; }
.lang-switch button:hover { color: var(--c-brand); }
.head-link {
  /* 图标在上、文字在下（一行要放的东西多，省宽度） */
  position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 0; border: 0; background: none;
  font-size: 14px; line-height: 1.3; color: var(--c-ink); white-space: nowrap;
}
.head-link svg { width: 22px; height: 22px; color: var(--c-brand-deep); }
.head-link:hover { color: var(--c-brand); }
.head-link__icon { position: relative; display: inline-flex; }
.badge {
  position: absolute; top: -9px; right: -11px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--c-accent); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; border: 2px solid var(--c-card);
  box-sizing: content-box; font-variant-numeric: tabular-nums;
}
.badge.is-empty { background: var(--c-muted); }
.account { position: relative; }
.account__menu {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 140px; padding: 6px;
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-m); box-shadow: var(--shadow-float);
}
.account__menu a { display: block; padding: 8px 14px; border-radius: var(--r-s); font-size: 16px; }
.account__menu a:hover { background: var(--c-surface); }

.main-nav { border-top: 1px solid var(--c-line); }
.main-nav__inner { display: flex; align-items: center; height: 56px; }
.main-nav__list { display: flex; gap: 8px; height: 100%; }
.main-nav__list > li { position: relative; }
.main-nav__list > li > a {
  position: relative; display: flex; align-items: center; gap: 4px; height: 100%; padding: 0 20px;
  font-size: 18px; font-weight: 600; color: var(--c-ink); white-space: nowrap;
}
.main-nav__list > li:first-child > a { padding-left: 0; }
.main-nav__list > li > a svg { width: 16px; height: 16px; color: var(--c-muted); transition: transform .2s ease; }
.main-nav__list > li > a::after {
  content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--g-brand); transform: scaleX(0); transition: transform .2s ease;
}
.main-nav__list > li:first-child > a::after { left: 0; }
.main-nav__list > li > a:hover { color: var(--c-brand); }
.main-nav__list > li > a:hover::after { transform: scaleX(1); }

/* 产品中心下拉：9 大类三列（顺序同六边形），鼠标移上或键盘聚焦时展开 */
.nav-drop {
  position: absolute; left: -24px; top: 100%; z-index: 30; width: 736px; padding: 18px 24px 16px;
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: 0 0 var(--r-m) var(--r-m); box-shadow: var(--shadow-float);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.has-drop:hover .nav-drop, .has-drop:focus-within .nav-drop, .nav-drop.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease; }
.has-drop.is-closed .nav-drop { opacity: 0; visibility: hidden; transform: translateY(-6px); }  /* 按 Esc 收起 */
.has-drop:hover > a svg, .has-drop:focus-within > a svg { transform: rotate(180deg); }
.has-drop:hover > a::after, .has-drop:focus-within > a::after { transform: scaleX(1); }
.nav-drop__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; }
.nav-drop__list a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-s);
  font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--c-ink); white-space: nowrap;
}
.nav-drop__list a:hover { background: var(--c-surface); color: var(--c-brand-deep); }
.nav-drop__list svg { flex: none; width: 24px; height: 24px; color: var(--c-brand); }
.nav-drop__all { display: block; margin-top: 10px; padding: 12px 12px 0; border-top: 1px solid var(--c-line); font-size: 15px; font-weight: 600; color: var(--c-brand-deep); }
.nav-drop__all:hover { text-decoration: underline; text-underline-offset: 3px; }

.mobile-nav { border-top: 1px solid var(--c-line); background: var(--c-card); }
.mobile-nav ul { padding: 8px var(--gutter); }
.mobile-nav li a { display: block; padding: 12px 0; font-size: 18px; font-weight: 600; color: var(--c-ink); border-bottom: 1px solid var(--c-line); }
.mobile-nav__foot { display: grid; gap: 2px; padding: 8px var(--gutter) 16px; }
.mobile-nav__foot a { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 16px; color: var(--c-brand-deep); overflow-wrap: anywhere; }
.mobile-nav__foot svg { width: 18px; height: 18px; flex: none; }

/* ======================= 1. 首屏轮播：通栏背景图，文字压在图上、靠左 ======================= */
.banner { position: relative; overflow: hidden; background: #10164e; touch-action: pan-y; }
.banner__track { display: grid; }
.slide {
  grid-area: 1 / 1; position: relative; overflow: hidden; opacity: 0; visibility: hidden;
  min-height: clamp(480px, calc(26vw + 120px), 620px); display: flex; align-items: center;  /* 1440 宽以下由内容定高（约 500px），更宽的屏略增高，不压成细条 */
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease .25s, visibility 0s; z-index: 2; }
.slide__img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* 每张图的取景：主体在画面中右，文字居中压在遮罩最深的地方 */
.slide--1 .slide__img { object-position: 50% 42%; }
.slide--2 .slide__img { object-position: 50% 55%; }
.slide--3 .slide__img { object-position: 50% 40%; }
.slide.is-active .slide__img { animation: hero-zoom 9s ease-out both; }
@keyframes hero-zoom { from { opacity: .6; } to { opacity: 1; } }
.slide__shade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--hero-shade); }
.slide--3 .slide__shade::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(var(--rgb-shade), .22); } /* 实验室图窗户、台面偏亮，单独压暗 */
/* 第 2 次修改（刘老师 10-21「目前都集中在左侧，感觉很拥挤；这 2 行可以放中间」）：整块内容居中，上下留白收紧，内容撑满首屏 */
.slide__inner { position: relative; z-index: 2; width: 100%; padding-top: 56px; padding-bottom: 88px; }
.slide__copy { display: flex; flex-direction: column; align-items: center; max-width: 920px; margin: 0 auto; color: #fff; text-align: center; }
/* 0.1.50：两行独立按页面中心对齐，撤销旧中文第二行对齐第3字的缩进。
   起始补一个字距，抵消行末 letter-spacing 留白；自然换行后的每一行同样居中。 */
.slide__title { width: fit-content; max-width: 100%; text-align: center; color: #fff; font-size: 40px; font-weight: 700; line-height: 1.4; text-shadow: 0 2px 18px rgba(0, 0, 0, .28); }
.slide__l1, .slide__l2 { display: block; letter-spacing: .04em; padding-left: .04em; white-space: nowrap; }
.slide__l2 { margin-top: 8px; font-size: .75em; color: var(--hero-l2); }
.slide__sub { margin-top: 40px; max-width: 900px; font-size: 18px; line-height: 1.85; color: rgba(255,255,255,.94); text-wrap: balance; }
/* 不支持 text-wrap: balance 的浏览器（Chrome 114 以前，如 Win7 的 Chrome 109）也排得匀：第 2 张收窄到三行等长（28/36/32 字），末行不剩孤字 */
.slide--2 .slide__sub { max-width: 36em; }
.slide__tags, .slide__steps { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.slide__tags li {
  padding: 3px 16px; border-radius: var(--r-pill); font-size: 15px; font-weight: 600; white-space: nowrap;
  color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.42);
}
.slide__steps { counter-reset: step; gap: 8px 4px; }
.slide__steps li { counter-increment: step; position: relative; display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: #fff; white-space: nowrap; }
.slide__steps li::before {
  content: counter(step); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 14px; color: var(--c-brand-deep); background: #fff;
}
.slide__steps li:not(:last-child) { padding-right: 18px; }
.slide__steps li:not(:last-child)::after {
  content: ""; position: absolute; right: 5px; top: 50%; width: 8px; height: 1.5px; background: rgba(255,255,255,.7);
}
.slide__actions { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

.banner__arrow {
  position: absolute; bottom: 14px; z-index: 5;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.12); color: #fff;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background-color .15s;
}
.banner__arrow:hover { background: rgba(255,255,255,.28); }
.banner__arrow svg { width: 22px; height: 22px; }
.banner__arrow--prev { left: calc(50% - 156px); }   /* 箭头放在圆点两侧，不靠近左侧文字 */
.banner__arrow--next { right: calc(50% - 156px); }
.banner__dots { position: absolute; left: 50%; bottom: 25px; z-index: 5; transform: translateX(-50%); display: flex; gap: 10px; }
.banner__dots button { border: 0; background: none; padding: 10px 0; }
.banner__dots i { display: block; width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.4); transition: width .3s, background-color .3s; }
.banner__dots button[aria-selected="true"] i { width: 64px; background: #fff; }

/* ======================= 通用区块 ======================= */
.section { padding: var(--section-y) 0; }
.section-head { max-width: 920px; margin-bottom: 40px; }
.section-head h2 { font-size: 28px; font-weight: 700; letter-spacing: .02em; }
/* 区块说明句（「按大类…」「公司已建立…」）：18px，和导航一样大 */
.section-head p { margin-top: 12px; font-size: 18px; line-height: 1.8; color: var(--c-text); }
.section-head--row { max-width: none; display: flex; align-items: center; gap: 32px; }
.section-head__more { font-size: 17px; font-weight: 600; color: var(--c-brand-deep); }
.section-head--row .section-head__more { margin-left: auto; }
.section-head__more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ======================= 2. 精准 PEG 示意 ======================= */
.precise { background: var(--c-card); padding: 72px 0; }
.precise__inner { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 48px; align-items: center; }
.precise__copy h2 { font-size: 28px; font-weight: 700; }
.precise__copy > p { margin-top: 14px; font-size: 17px; line-height: 1.8; color: var(--c-text); }
.readout { margin-top: 24px; padding: 20px 22px; border-radius: var(--r-m); background: var(--c-surface); border: 1px solid var(--c-line); }
.readout__formula { font-size: 22px; font-weight: 700; color: var(--c-ink); }
/* 化学式（第 2 次修改，侯明萱 10-21）：和「一颗珠子 = …」那行同一字体（PingFang / 微软雅黑），比例数字、字距 0，
   下标用 <sub> 普通数字缩到 .72 倍，紧贴元素符号 */
.chem { font-family: var(--font); font-variant-numeric: normal; letter-spacing: 0; }
.chem sub { font-size: .72em; line-height: 0; vertical-align: -.24em; letter-spacing: 0; font-weight: inherit; }
.readout__formula .readout__n { color: var(--c-accent); font-weight: 800; }
.readout__bead { margin-top: 8px; display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--c-text); text-wrap: balance; }
.readout__bead i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0, var(--c-aux) 50%, var(--c-brand) 100%); }
.readout__list { margin-top: 12px; display: grid; grid-template-columns: auto 1fr; gap: 12px 28px; }
.readout__list dt { font-size: 14px; color: var(--c-muted); }
.readout__list dd { font-size: 17px; font-weight: 700; color: var(--c-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.readout__list dd.chem { font-size: 18px; font-weight: 400; font-variant-numeric: normal; }  /* 和上一行同为常规体 */
.readout__src { margin-top: 10px; font-size: 14px; color: var(--c-muted); }

.pegfig { padding: 26px 24px 22px; border-radius: var(--r-l); background: var(--c-bg); border: 1px solid var(--c-line); }
.pegfig__title { text-align: center; font-size: 24px; font-weight: 700; }
.pegfig__chips { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.pegfig__chips b { font-size: 16px; font-weight: 600; color: var(--c-brand); margin-right: calc(4px + 1em); }
.pegfig__chips button {
  min-width: 46px; height: 36px; padding: 0 12px; border-radius: var(--r-pill);
  border: 1.5px solid var(--c-line); background: var(--c-card); font-size: 16px; font-weight: 700;
  color: var(--c-ink); font-variant-numeric: tabular-nums; transition: border-color .15s, color .15s;
}
.pegfig__chips button:hover { border-color: var(--c-brand); color: var(--c-brand); }
.pegfig__chips button.is-active { background: var(--g-brand); color: #fff; border-color: transparent; }
.pegfig__scroll { margin-top: 10px; }
.pegfig__svg { display: block; width: 100%; height: 350px; overflow: visible; }
.pegfig__hint, .pegfig__legend { display: none; }
.pegfig__legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg-broad { width: 14px; height: 14px; background: repeating-linear-gradient(90deg, rgba(var(--rgb-muted), .9) 0 2px, transparent 2px 5px); }
.lg-peak { width: 4px; height: 16px; border-radius: 2px; background: linear-gradient(0deg, var(--c-brand), var(--c-brand-2)); }

/* 示意图元素（JS 按实际像素绘制）：除坐标数字外的文字 15–16px */
.pf-bond { fill: none; stroke: rgba(var(--rgb-brand), .4); stroke-width: 1.5; }
.pf-bead { fill: url(#pfBead); stroke: #fff; stroke-width: .8; }
.pf-cap { font-size: 16px; font-weight: 700; fill: var(--c-brand-deep); }
.pf-panel { fill: var(--c-card); stroke: var(--c-line); }
.pf-legend { font-size: 15px; font-weight: 600; fill: var(--c-ink); paint-order: stroke; stroke: var(--c-bg); stroke-width: 6px; stroke-linejoin: round; }
.pf-ytick { font-size: 13px; fill: var(--c-muted); font-variant-numeric: tabular-nums; }
.pf-ylabel { font-size: 15px; font-weight: 600; fill: var(--c-text); }
.pf-grid { stroke: var(--c-line); stroke-width: 1; stroke-dasharray: 3 4; }
.pf-poisson { stroke: rgba(var(--rgb-muted), .9); stroke-width: 2; stroke-linecap: round; }
.pf-envelope { fill: none; stroke: rgba(var(--rgb-muted), .5); stroke-width: 1; stroke-dasharray: 3 3; }
.pf-readout { font-size: 16px; font-weight: 800; fill: var(--c-accent); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--c-card); stroke-width: 5px; stroke-linejoin: round; }
.pf-guide { stroke: var(--c-accent); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .8; }
.pf-axis { stroke: var(--c-ink); stroke-width: 1.4; }
.pf-tick { stroke: rgba(var(--rgb-ink), .35); stroke-width: 1; }
.pf-tick--major { stroke: var(--c-ink); stroke-width: 1.4; }
.pf-xlabel { font-size: 13px; fill: var(--c-muted); font-variant-numeric: tabular-nums; }
.pf-xlabel--on { fill: var(--c-accent); font-weight: 800; }
.pf-xtitle { font-size: 15px; font-weight: 600; fill: var(--c-text); }
@keyframes pf-in { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
.pf-anim { transform-box: fill-box; transform-origin: center; animation: pf-in .3s ease-out both; }
@keyframes pf-grow { from { transform: scaleY(0); } to { transform: none; } }
.pf-grow { transform-box: fill-box; transform-origin: bottom; animation: pf-grow .45s ease-out both; }

/* ======================= 3. 产品中心 ======================= */
.products { background: var(--c-bg); }

/* 9 大类：六边形蜂窝（参照 creativepegworks.com）。每块：配图 + 遮罩 + 图标 + 中文名（英文小字）；悬停遮罩加深并微微放大。
   排法用 10 列网格、每块占 2 列，第二行错开 1 列：data-layout="4-5" 上 4 下 5，"5-4" 上 5 下 4（按 9 个大类写的；个数变了要改下面的 nth-child） */
.hexes { margin-bottom: 72px; --g: 16px; }
.hexes__grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.hex { grid-column: span 2; }
.hexes__grid[data-layout="4-5"] .hex:nth-child(1) { grid-area: 1 / 2 / 2 / 4; }
.hexes__grid[data-layout="4-5"] .hex:nth-child(2) { grid-area: 1 / 4 / 2 / 6; }
.hexes__grid[data-layout="4-5"] .hex:nth-child(3) { grid-area: 1 / 6 / 2 / 8; }
.hexes__grid[data-layout="4-5"] .hex:nth-child(4) { grid-area: 1 / 8 / 2 / 10; }
.hexes__grid[data-layout="4-5"] .hex:nth-child(n+5) { grid-row: 2; }
.hexes__grid[data-layout="5-4"] .hex:nth-child(-n+5) { grid-row: 1; }
.hexes__grid[data-layout="5-4"] .hex:nth-child(6) { grid-area: 2 / 2 / 3 / 4; }
.hexes__grid[data-layout="5-4"] .hex:nth-child(7) { grid-area: 2 / 4 / 3 / 6; }
.hexes__grid[data-layout="5-4"] .hex:nth-child(8) { grid-area: 2 / 6 / 3 / 8; }
.hexes__grid[data-layout="5-4"] .hex:nth-child(9) { grid-area: 2 / 8 / 3 / 10; }
/* 第二行往上叠 1/4 个六边形高，形成蜂窝；行间缝隙和列间缝隙一致。
   上叠量 = 六边形宽 × 0.2887 − 缝隙 × 0.866；六边形宽 = 格子宽 − 缝隙，margin 的百分比正好按格子宽算
   （不用 cqw 容器单位：Chrome 105 以前、旧版 360 / QQ 浏览器不认） */
.hexes__grid[data-layout="4-5"] .hex:nth-child(n+5),
.hexes__grid[data-layout="5-4"] .hex:nth-child(n+6) { margin-top: calc(-28.87% + var(--g) * 1.1547); }
.hex a {
  position: relative; display: grid; place-items: center; margin: 0 calc(var(--g) / 2);
  aspect-ratio: 1 / 1.1547; clip-path: url(#hexClip); overflow: hidden; color: #fff; text-align: center;
  background: var(--c-brand-deep); transition: transform .25s ease;
}
.hex img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--img-x, 50%) 50%; transition: transform .4s ease; }
.hex a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(var(--rgb-shade), .30), rgba(var(--rgb-shade), .52)); transition: background-color .25s ease, opacity .25s; }
.hex a::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: rgba(var(--rgb-shade), 0); transition: background-color .25s ease; }
.hex a:hover::before, .hex a:focus-visible::before { background: rgba(var(--rgb-shade), .45); }  /* 悬停变深 */
.hex a:hover img, .hex a:focus-visible img { transform: scale(1.06); }                    /* 配图微微放大 */
.hex a:focus-visible { outline: none; }
@supports not (aspect-ratio: 1 / 1) {
  .hex a { display: block; height: 0; padding-top: 115.47%; }
  .hex__body { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
}
.hex__body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 14%; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }
.hex__body svg { width: 30px; height: 30px; color: #fff; margin-bottom: 4px; filter: drop-shadow(0 1px 6px rgba(0,0,0,.4)); }
.hex__body b { font-size: 18px; line-height: 1.4; font-weight: 700; }
.hex__body b > span { display: block; white-space: nowrap; }  /* 名称按 data 分好的两段显示，段内不折行 */
.hex__body small { display: flex; flex-direction: column; align-items: center; font-size: 13px; line-height: 1.35; font-weight: 700; letter-spacing: .01em; color: rgba(255,255,255,.94); }
.hex__body small > span { white-space: nowrap; }  /* 英文名按词组分行（如 Monofunctional / Precision PEG），词组内不折 */

.recommend__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.recommend__head h3 { font-size: 22px; }
.recommend__ctrl { display: flex; align-items: center; gap: 10px; }
.recommend__count { margin-right: 4px; font-size: 15px; font-weight: 600; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.recommend__viewport { position: relative; overflow: hidden; transition: height .35s ease; }
.recommend__track { display: grid; gap: 14px; transition: transform .55s cubic-bezier(.3,.7,.2,1); }
/* 宽屏（≥1200）：一行 3 张，横向翻组；窄电脑、平板、手机：3 张竖排 */
@media (min-width: 1200px) {
  .recommend__track { grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; }
}
.recommend__dots { margin-top: 14px; display: flex; gap: 8px; }
.recommend__dots button { border: 0; background: none; padding: 8px 0; }
.recommend__dots i { display: block; width: 28px; height: 4px; border-radius: 2px; background: var(--c-line); transition: width .3s, background-color .3s; }
.recommend__dots button[aria-selected="true"] i { width: 48px; background: var(--g-brand); }

/* 推荐卡（第 2 次修改补充）：上排「结构式 + 名称区」，下排简介占满卡宽，最底下「查看各聚合度货号」。
   名称区（大类、系列名、主列表名）由 site.js 统一成最高那张的高度 → 三张的简介从同一高度开始；
   卡片也统一成最高那张的高度，「查看各聚合度货号」压底 → 三张底部对齐 */
.series-card a {
  display: flex; flex-direction: column; height: 100%; padding: 20px;
  border-radius: var(--r-m); background: var(--c-card); border: 1px solid var(--c-line);
  transition: border-color .15s, box-shadow .15s;
}
.series-card__top { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; }
.series-card a:hover { border-color: rgba(var(--rgb-brand), .55); box-shadow: var(--shadow-card); }
.series-card__structure {
  height: 96px; border-radius: var(--r-s); display: grid; place-items: center; text-align: center;
  background:
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(var(--rgb-brand), .07) 15px 16px),
    repeating-linear-gradient(90deg, transparent 0 15px, rgba(var(--rgb-brand), .07) 15px 16px),
    var(--c-surface);
  border: 1px dashed rgba(var(--rgb-brand), .3);
  font-size: 14px; line-height: 1.6; color: var(--c-muted);
}
.series-card__cat { font-size: 14px; line-height: 1.6; color: var(--c-aux-ink); font-weight: 600; }
.series-card__name { margin-top: 2px; font-size: 19px; line-height: 1.35; font-weight: 700; color: var(--c-ink); overflow-wrap: anywhere; }
.series-card__name > span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--c-brand-deep); }  /* 主列表名，最多两行 */
.series-card__name sub { font-size: .7em; }
/* 简介：占满卡宽，字号同全站正文（电脑 17px、手机 16px），最多 3 行（9 条简介在 360～1440 各宽度都不超过 3 行，截断只是保险） */
.series-card__desc {
  margin-top: 16px; font-size: inherit; line-height: 1.75; color: var(--c-text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.series-card__more { margin-top: auto; padding-top: 14px; font-size: 15px; font-weight: 600; color: var(--c-brand-deep); }
.series-card a:hover .series-card__more { text-decoration: underline; text-underline-offset: 3px; }


/* ======================= 4. 定制服务 ======================= */
.custom { background: var(--c-surface); }
.custom__inner { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 64px; align-items: center; }
.custom__copy h2 { font-size: 28px; font-weight: 700; }
.custom__copy p { margin-top: 12px; font-size: 18px; color: var(--c-text); }
.custom__actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.process { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.process::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 41px; height: 2px;
  background: var(--g-rule); opacity: .55;
}
.process li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.process svg {
  box-sizing: content-box; width: 30px; height: 30px; padding: 26px; border-radius: 50%;
  color: var(--c-brand); background: var(--c-card); border: 1px solid var(--c-line); box-shadow: var(--shadow-card);
}
.process__no {
  position: absolute; top: 0; left: calc(50% + 20px); width: 24px; height: 24px; border-radius: 50%;
  background: var(--c-accent); color: #fff; font-size: 14px; font-weight: 700; line-height: 24px; text-align: center; z-index: 1;
}
.process b { margin-top: 14px; font-size: 18px; color: var(--c-ink); }
.process small { margin-top: 2px; font-size: 14px; line-height: 1.5; color: var(--c-muted); }

/* ======================= 5. 技术平台 ======================= */
.platform { background: var(--c-bg); }
.platform__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.panel { display: flex; flex-direction: column; border-radius: var(--r-m); padding: 36px; background: var(--c-card); border: 1px solid var(--c-line); }
.panel h3 { font-size: 22px; }
.panel > p { margin-top: 8px; font-size: 16px; color: var(--c-muted); }
.panel h4 { margin-top: 28px; font-size: 17px; color: var(--c-ink); }
.panel .tag-list + h4 { margin-top: 0; }

.pipeline { margin-top: 20px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pipeline li {
  position: relative; display: grid; place-items: center; height: 62px; padding: 0 6px 0 18px;
  font-size: 16px; font-weight: 700; color: #fff; text-align: center; line-height: 1.3;
  background: var(--pipe-1);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
}
.pipeline li:first-child { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); padding-left: 8px; border-radius: var(--r-s) 0 0 var(--r-s); }
.pipeline li:nth-child(2) { background: var(--pipe-2); } .pipeline li:nth-child(3) { background: var(--pipe-3); }
.pipeline li:nth-child(4) { background: var(--pipe-4); } .pipeline li:nth-child(5) { background: var(--pipe-5); }

.tag-list { margin: 12px 0 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list li { padding: 4px 12px; border-radius: var(--r-s); background: var(--c-surface); font-size: 15px; color: var(--c-text); }
.virtues { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--c-line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.virtues li { display: flex; align-items: center; gap: 10px; }
.virtues li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 4px var(--c-accent-soft); }
.virtues b { font-size: 18px; color: var(--c-ink); letter-spacing: .06em; white-space: nowrap; }

/* AI 平台配图（统一色调遮罩）+ 横排闭环流程 */
.ai-photo { position: relative; margin-top: 20px; border-radius: var(--r-m); overflow: hidden; aspect-ratio: 2 / 1; background: var(--c-surface); }
.ai-photo img { width: 100%; height: 100%; object-fit: cover; }
.ai-photo::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--tint); }
.flow { position: relative; margin-top: auto; padding-top: 22px; padding-bottom: 34px; }
.flow__steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.flow__steps li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--c-ink); }
.flow__steps b {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-size: 16px; color: var(--c-brand); background: var(--c-card); border: 2px solid var(--c-brand);
}
.flow__steps li:not(:last-child)::after {
  content: ""; position: absolute; top: 19px; left: calc(50% + 24px); right: calc(-50% + 24px); height: 2px;
  background: linear-gradient(90deg, var(--c-brand), var(--c-aux));
}
.flow__steps li:not(:last-child)::before {
  content: ""; position: absolute; top: 14px; right: calc(-50% + 22px); width: 0; height: 0;
  border-left: 8px solid var(--c-aux); border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
/* 回到 1 的闭环箭头：从第 5 步下方绕回第 1 步 */
.flow__back {
  position: absolute; left: 10%; right: 10%; bottom: 10px; height: 26px;
  border: 2px solid var(--c-brand-2); border-top: 0; border-radius: 0 0 14px 14px; opacity: .85;
}
.flow__back::before {
  content: ""; position: absolute; left: -7px; top: -10px; width: 0; height: 0;
  border-bottom: 9px solid var(--c-brand-2); border-left: 6px solid transparent; border-right: 6px solid transparent;
}
.flow__back > span {
  position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); padding: 0 10px;
  background: var(--c-card); font-size: 14px; font-weight: 600; color: var(--c-brand-2); white-space: nowrap; line-height: 22px;
}

/* ======================= 6. 技术资讯（色带） ======================= */
.news { position: relative; overflow: hidden; background: var(--band-bg); color: #fff; }
.news__deco { position: absolute; right: 0; top: 0; width: 60%; height: 100%; stroke: rgba(255,255,255,.28); }
.news .container { position: relative; }
.news h2, .news h3 { color: #fff; }
.news .section-head__more { color: #fff; font-size: 18px; }
.news__tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: rgba(255,255,255,.16); }
.news__tabs button { border: 0; background: none; color: #fff; padding: 4px 20px; border-radius: var(--r-pill); font-size: 16px; }
.news__tabs button[aria-selected="true"] { background: #fff; color: var(--c-brand-deep); font-weight: 600; }
.news__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.news .tag { background: rgba(255,255,255,.2); color: #fff; font-size: 15px; line-height: 28px; padding: 0 12px; }
.news__featured { position: relative; display: grid; gap: 12px; }
.news__featured::before { content: ""; position: absolute; left: 48px; top: 112px; bottom: 112px; width: 1px; background: rgba(255,255,255,.4); } /* 只连两个日期圆之间，不穿过圆 */
.news-item a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 30px; align-items: center; padding: 22px 0; }
.news-item time {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 96px; height: 96px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.1); font-size: 15px; line-height: 1.3; color: #fff; font-variant-numeric: tabular-nums;
}
.news-item time b { font-size: 30px; line-height: 1.1; }
.news-item h3 { margin-top: 10px; font-size: 22px; line-height: 1.5; font-weight: 700; }
.news-item a:hover h3 { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.news__cards { display: grid; gap: 18px; padding-top: 22px; }
.news-card a {
  display: block; padding: 24px 28px; border-radius: var(--r-m);
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background-color .15s;
}
.news-card a:hover { background: rgba(255,255,255,.2); }
.news-card h3 { margin-top: 12px; font-size: 20px; line-height: 1.55; font-weight: 700; }
.news-card time { display: block; margin-top: 12px; font-size: 16px; color: #fff; font-variant-numeric: tabular-nums; }
.news-card--placeholder a { border-style: dashed; background: transparent; }
.news [data-cat].is-hidden { display: none; }

/* ======================= 7. 知识产权（字号与技术资讯一致） ======================= */
.patents { background: var(--c-card); }
.patents__inner { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 64px; align-items: start; }
.patents__head h2 { font-size: 28px; font-weight: 700; }
.patents__head p { margin: 12px 0 18px; font-size: 18px; color: var(--c-text); }
.patents__head .section-head__more { font-size: 18px; }
/* 专利列表翻屏（刘老师 10-22 21:16）：和推荐系列一样，每屏 3 条、三屏，左右箭头 + 圆点，5 秒自动翻、悬停暂停。
   每屏一个 .patent-list，整轨横移；视口高度取最高的一屏，翻屏时下面的页脚不跳。计数和圆点沿用推荐系列的样式 */
.patent-pager__bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 14px; }
.patent-pager__viewport { position: relative; overflow: hidden; transition: height .35s ease; }
.patent-pager__track { display: flex; align-items: flex-start; transition: transform .55s cubic-bezier(.3,.7,.2,1); }
.patent-pager__track > .patent-list { flex: 0 0 100%; min-width: 0; }
.patent-list { display: grid; border-top: 2px solid var(--c-ink); }
.patent { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 24px; row-gap: 8px; padding: 24px 0; border-bottom: 1px solid var(--c-line); }
/* 状态两种，颜色区分：已授权 主色实底白字 / 申请中 红色描边（都带 1.5px 边，一样高）。「授权待公告」10-22 刘老师确认不用 */
.patent__status { grid-row: span 3; align-self: start; display: inline-block; text-align: center; padding: 3px 0; border: 1.5px solid transparent; border-radius: var(--r-s); font-size: 15px; font-weight: 700; white-space: nowrap; }
.patent__status--granted { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.patent__status--pending { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-soft); }
.patent__title { font-size: 22px; }
.patent__meta { display: flex; flex-wrap: wrap; gap: 4px 32px; font-size: 17px; }
.patent__meta div { display: flex; gap: 8px; }
.patent__meta dt { color: var(--c-muted); }
.patent__owner { font-size: 17px; color: var(--c-text); }

/* ======================= 8. 页脚 ======================= */
.site-footer { background: var(--footer-bg); color: rgba(255,255,255,.82); font-size: 16px; }
.footer__inner { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 64px; padding-top: 64px; padding-bottom: 48px; }
.footer__logo { height: 48px; width: auto; }
.footer__company h2 { margin-top: 20px; font-size: 20px; color: #fff; }
.footer__contact { margin-top: 16px; display: grid; gap: 8px; line-height: 1.6; }
/* 标签列宽 = 最长的「产品咨询与订购」：7 个汉字 = 7em（中文字宽 1em，换字体也准），内容列左边一律对齐 */
.footer__contact > div { display: grid; grid-template-columns: 7em minmax(0, 1fr); column-gap: 16px; }
.footer__contact dt { color: rgba(255,255,255,.62); white-space: nowrap; }
.footer__contact dd { text-wrap: wrap; }
.footer__contact a { color: #fff; white-space: nowrap; }  /* 电话、邮箱、网址整行不拆 */
.footer__contact a:hover { text-decoration: underline; }
.footer__qrs { margin-top: 28px; display: flex; gap: 20px; }
.footer__qrs figure { text-align: center; }
.footer__qrs img { width: 112px; height: 112px; padding: 6px; border-radius: var(--r-s); background: #fff; object-fit: contain; }
.footer__qrs figcaption { margin-top: 8px; color: #fff; }
.footer__links { display: grid; grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }  /* 第一列按最长的大类名留宽，大类名不断行 */
.footer__links h3 { font-size: 17px; color: #fff; margin-bottom: 14px; }
.footer__links li + li { margin-top: 8px; }
.footer__links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.12); }
.police-filing { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.police-filing img { flex: none; width: 18px; height: 20px; }
.footer__bottom .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 18px; padding-bottom: 18px; font-size: 14px; color: rgba(255,255,255,.68); }

/* ======================= 悬浮在线咨询（右侧贴边竖条，不压内容） ======================= */
.no-float .consult { display: none; }
.consult { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 50; }
.consult__btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 42px; padding: 12px 0 10px;
  border-radius: 14px 0 0 14px; background: var(--btn-primary-bg); color: #fff; box-shadow: var(--btn-primary-shadow);
  font-size: 15px; font-weight: 600; line-height: 1.3; text-align: center;
}
.consult__btn span { writing-mode: vertical-rl; letter-spacing: .2em; }
.consult__btn svg { width: 22px; height: 22px; }
/* 在线咨询弹层（11-03）：公众号二维码、热线、在线留言；电脑手机共用，手机多一句截图提示。外层 dialog 无内边距，点到它本身即点在遮罩上。 */
.consult-pop { width: min(340px, calc(100vw - 32px)); padding: 0; border-radius: var(--r-m); background: var(--c-card); color: var(--c-ink); }
.consult-pop__box { position: relative; padding: 28px 24px 24px; text-align: center; }
.consult-pop h2 { font-size: 20px; font-weight: 700; color: var(--c-ink); }
.consult-pop img { display: block; width: 200px; max-width: 100%; height: auto; margin: 14px auto 10px; border-radius: var(--r-s); }
.consult-pop p { font-size: 15px; line-height: 1.6; color: var(--c-ink); }
.consult-pop__lead { font-weight: 600; color: var(--c-ink); }
.consult-pop__mobile { display: none; color: var(--c-muted); font-size: 14px; }
.consult-pop__tel { margin-top: 8px; }
.consult-pop__tel a { font-weight: 700; color: var(--c-brand-deep); white-space: nowrap; }
.consult-pop__message { display: inline-block; margin-top: 12px; padding: 8px 28px; border-radius: 999px; background: var(--btn-primary-bg); color: #fff; font-size: 15px; font-weight: 600; }
.consult-pop__close { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; color: var(--c-muted); display: grid; place-items: center; cursor: pointer; }
.consult-pop__close svg { width: 20px; height: 20px; }
@media (max-width: 767px), (hover: none) and (pointer: coarse) { .consult-pop__mobile { display: block; } }

.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 20px); z-index: 60;
  max-width: calc(100% - 32px); padding: 10px 20px; border-radius: var(--r-pill);
  background: var(--c-ink); color: #fff; font-size: 16px; opacity: 0; pointer-events: none; transition: all .25s ease;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ======================= 窄电脑 / 平板 ======================= */
@media (min-width: 768px) and (max-width: 1439px) {
  :root { --gutter: 48px; }  /* 让开右侧贴边的「在线咨询」 */
}
@media (max-width: 1365px) {
  .header-top { gap: 16px; }
  .brand img { height: 64px; }
  .site-search { min-width: 260px; }
  .header-contact a { font-size: 15px; }
  .header-contact a:last-child { font-size: 17px; }
  .header-actions { gap: 14px; padding-left: 14px; }
}
@media (max-width: 1279px) {
  .footer__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }  /* 窄电脑：公司信息在上、栏目链接在下，大类名一行放得下 */
  .footer__links { grid-template-columns: repeat(3, max-content); column-gap: 72px; }
}
@media (max-width: 1199px) {
  .brand img { height: 52px; }
  .pipeline li { font-size: 14px; padding: 0 4px 0 16px; }
  .pipeline li:first-child { padding-left: 6px; }
  .header-contact span { display: none; }   /* 只留邮件、电话图标（悬停显示，点击照样发邮件 / 拨号） */
  .header-contact { display: flex; gap: 10px; }
  .header-contact svg { width: 22px; height: 22px; }
  .main-nav__list > li > a { padding: 0 14px; font-size: 17px; }
  .main-nav__list > li > a::after { left: 14px; right: 14px; }
  .slide__title { font-size: 36px; }
  /* 六边形变小（1024 宽时约 170px）：字和图标一起缩，英文两行收进六边形中段，不碰斜边 */
  .hex__body b { font-size: 16px; }
  .hex__body small { font-size: 12px; }
  .hex__body svg { width: 26px; height: 26px; }
  .precise__inner { grid-template-columns: 300px minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 1023px) {
  .hex__body small { display: none; }
  .hex__body { padding: 0 6%; }
  .hex__body b { font-size: 14px; }
  .hex__body svg { width: 24px; height: 24px; }
  /* 平板：搜索框单独一行（保留范围下拉） */
  .header-top { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 14px; gap: 12px 16px; }
  .site-search { order: 3; flex: 1 0 100%; max-width: none; }
  .header-contact { margin-left: auto; }
  .header-actions { margin-left: 0; }
  .main-nav__list { gap: 0; }
  .main-nav__list > li > a { padding: 0 10px; font-size: 16px; }
  .main-nav__list > li > a::after { left: 10px; right: 10px; }
  .banner__arrow { display: none; }
  .slide__title { font-size: 34px; }
  .precise__inner { grid-template-columns: minmax(0, 1fr); }
  .custom__inner, .patents__inner, .platform__grid, .news__grid, .footer__inner { grid-template-columns: minmax(0, 1fr); }
  .custom__inner { gap: 40px; }
  .patents__inner { gap: 24px; }
}

/* ======================= 手机 ======================= */
@media (max-width: 767px) {
  :root { --gutter: 16px; --section-y: 56px; }
  body { font-size: 16px; }
  .footer__bottom .container { padding-bottom: 88px; }  /* 给右下角圆形咨询按钮留位，颜色和页脚连在一起 */
  .site-header { position: sticky; top: 0; }
  .header-top { flex-wrap: wrap; height: auto; gap: 8px 6px; padding-top: 10px; padding-bottom: 12px; }
  .icon-btn.menu-toggle { display: grid; margin-left: -8px; }
  .brand { flex: 1; min-width: 0; }
  .brand img { height: 40px; max-width: 100%; object-fit: contain; object-position: left center; }
  .header-contact { display: none; }
  .header-actions { gap: 12px; padding-left: 0; border-left: 0; }
  .account { display: none; }
  .lang-switch--mobile { display: flex; }
  .inquiry-btn .head-link__text { display: none; }
  .head-link svg { width: 24px; height: 24px; }
  .site-search { order: 3; flex: 1 0 100%; min-width: 0; max-width: none; height: 46px; }
  .site-search__scope { display: none; }
  .site-search__btn { width: 54px; }
  .main-nav { display: none; }
  .mobile-nav { max-height: calc(100vh - 120px); overflow-y: auto; }

  /* 首屏（手机）：照片只占上方 300px 一条，几乎整幅可见，主体不被文字压住；文字放在照片下面的深色底上 */
  .slide { min-height: 0; display: flex; flex-direction: column; background: rgb(var(--rgb-shade)); }
  .slide__inner { flex: 1; display: flex; flex-direction: column; }
  .slide__copy { flex: 1; }   /* 三张一样高：按钮压到底部对齐，空白不全堆在最短那张的按钮下面 */
  .slide__img { top: 0; right: 0; bottom: auto; left: 0; height: 290px; }
  .slide__shade { top: 0; right: 0; bottom: auto; left: 0; height: 290px; background: linear-gradient(180deg, rgba(var(--rgb-shade), .10) 0%, rgba(var(--rgb-shade), .30) 60%, rgb(var(--rgb-shade)) 100%); }
  .slide--1 .slide__img { object-position: 80% 50%; }
  .slide--2 .slide__img { object-position: 70% 50%; }
  .slide--3 .slide__img { object-position: 62% 50%; }
  .slide__inner { padding-top: 244px; padding-bottom: 60px; }  /* 文字从照片下沿开始，三张标题位置相同 */
  .slide__title { font-size: 28px; }
  .slide__l2 { margin-top: 4px; }
  .slide__sub { margin-top: 26px; font-size: 16px; line-height: 1.8; }
  .slide--3 .slide__sub { max-width: 13em; }  /* 同上：两行 13/12 字，末行不剩「交付。」 */
  .slide__tags { margin-top: 18px; gap: 8px; }
  .slide__tags li { padding: 2px 13px; font-size: 14px; }
  .slide__steps li { font-size: 14px; }
  .slide__actions { margin-top: auto; padding-top: 26px; width: 100%; }
  .slide__actions .btn { flex: 1; padding: 0 12px; height: 48px; font-size: 16px; }
  .banner__dots { bottom: 18px; }

  .section-head { margin-bottom: 28px; }
  .section-head h2, .custom__copy h2, .patents__head h2, .precise__copy h2 { font-size: 24px; }
  .section-head p, .custom__copy p, .patents__head p { font-size: 16px; }
  .section-head--row { flex-wrap: wrap; gap: 12px 16px; }
  .section-head--row h2 { flex: 1 0 auto; }
  .section-head--row .news__tabs { order: 3; }
  .section-head--row .section-head__more { margin-left: 0; }

  .precise { padding: 48px 0; }
  .precise__copy > p { font-size: 16px; }
  .readout { padding: 16px; }
  .readout__formula { font-size: 20px; }
  .pegfig { padding: 20px 12px 16px; border-radius: var(--r-m); }
  .pegfig__title { font-size: 20px; }
  .pegfig__chips { gap: 6px; }
  .pegfig__chips b { flex: 1 0 100%; text-align: center; margin: 0; }
  .pegfig__chips button { min-width: 42px; height: 34px; padding: 0 8px; font-size: 15px; }
  .pegfig__svg { height: 340px; }


  .hexes { --g: 8px; margin-bottom: 48px; }
  .hexes__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .hexes__grid[data-layout] .hex { margin-top: 0; }
  .hexes__grid[data-layout] .hex:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
  .hexes__grid[data-layout] .hex:nth-child(2) { grid-area: 1 / 3 / 2 / 5; }
  .hexes__grid[data-layout] .hex:nth-child(3) { grid-area: 1 / 5 / 2 / 7; }
  .hexes__grid[data-layout] .hex:nth-child(4) { grid-area: 2 / 2 / 3 / 4; }
  .hexes__grid[data-layout] .hex:nth-child(5) { grid-area: 2 / 4 / 3 / 6; }
  .hexes__grid[data-layout] .hex:nth-child(6) { grid-area: 2 / 6 / 3 / 8; }
  .hexes__grid[data-layout] .hex:nth-child(7) { grid-area: 3 / 1 / 4 / 3; }
  .hexes__grid[data-layout] .hex:nth-child(8) { grid-area: 3 / 3 / 4 / 5; }
  .hexes__grid[data-layout] .hex:nth-child(9) { grid-area: 3 / 5 / 4 / 7; }
  .hexes__grid[data-layout] .hex:nth-child(n+4) { margin-top: calc(-28.87% + var(--g) * 1.1547); }
  .hex__body { padding: 0 8%; gap: 2px; }
  .hex__body svg { width: 20px; height: 20px; margin-bottom: 2px; }
  .hex__body b { font-size: 13px; line-height: 1.35; }
  @media (max-width: 479px) { .hex__body svg { display: none; } }  /* 六边形不到 120px 宽：只留两行名称，留出呼吸 */
  .recommend__track { gap: 12px; }
  .series-card a { padding: 16px; }
  .series-card__top { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
  .series-card__structure { height: 76px; font-size: 13px; }
  .series-card__name { font-size: 17px; }
  .series-card__desc { margin-top: 14px; }

  .process { grid-template-columns: 1fr; gap: 0; }
  .process::before { left: 31px; right: auto; top: 30px; bottom: 30px; width: 2px; height: auto; }
  .process li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; align-items: center; text-align: left; padding: 8px 0; }
  .process svg { grid-row: span 2; width: 26px; height: 26px; padding: 18px 18px; }
  .process__no { left: 44px; top: 4px; width: 22px; height: 22px; line-height: 22px; font-size: 13px; }
  .process b { margin-top: 0; font-size: 17px; align-self: end; }
  .process small { align-self: start; }
  .custom__actions .btn--primary { flex: 1; }

  .panel { padding: 24px 18px; }
  .panel > p { font-size: 15px; }
  .pipeline { grid-template-columns: 1fr; gap: 4px; }
  .pipeline li, .pipeline li:first-child { height: 46px; padding: 0 12px; clip-path: none; border-radius: var(--r-s); place-items: center start; }
  .virtues { gap: 8px; }
  .virtues li { gap: 8px; }
  .virtues li::before { width: 8px; height: 8px; box-shadow: 0 0 0 3px var(--c-accent-soft); }
  .virtues b { font-size: 16px; letter-spacing: 0; }
  .flow__steps li { font-size: 13px; }
  .flow__steps b { width: 32px; height: 32px; font-size: 14px; }
  .flow__steps li:not(:last-child)::after { top: 16px; left: calc(50% + 20px); right: calc(-50% + 20px); }
  .flow__steps li:not(:last-child)::before { top: 11px; right: calc(-50% + 18px); }

  .news__featured::before { left: 36px; top: 84px; bottom: 84px; }
  .news-item a { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 14px 0; }
  .news-item time { width: 72px; height: 72px; font-size: 13px; }
  .news-item time b { font-size: 22px; }
  .news-item h3 { font-size: 18px; }
  .news-card a { padding: 18px; }
  .news-card h3 { font-size: 17px; }
  .news-card time { font-size: 15px; }
  .news__deco { width: 100%; opacity: .5; }

  .patent { grid-template-columns: 1fr; padding: 20px 0; }
  .patent__status { grid-row: auto; justify-self: start; padding: 2px 10px; }
  .patent-pager__bar { margin-bottom: 10px; }
  .patent__title { font-size: 18px; }
  .patent__meta { flex-direction: column; gap: 2px; font-size: 16px; }
  .patent__owner { font-size: 16px; }

  .footer__inner { padding-top: 48px; gap: 40px; }
  /* 手机：两列时内容列只剩 200 来 px，放不下 264px 宽的邮箱，改成标签在上、内容在下 */
  @media (max-width: 479px) {
    .footer__contact { gap: 10px; }
    .footer__contact > div { grid-template-columns: minmax(0, 1fr); }
    .footer__contact dt { font-size: 14px; line-height: 1.5; }
  }
  .footer__links { grid-template-columns: 1fr 1fr; }
  .footer__links > div:first-child { grid-column: 1 / -1; }
  .footer__links > div:first-child ul { columns: 2; column-gap: 16px; }
  @media (max-width: 419px) { .footer__links > div:first-child ul { columns: 1; } }  /* 两列放不下 11 个字的大类名 */
  .footer__links > div:first-child li { break-inside: avoid; }
  .footer__bottom .container { flex-direction: column; }

  /* 手机：右下角圆形按钮（两行「在线 / 咨询」），页面底部留出空位不挡页脚 */
  .consult { top: auto; bottom: 16px; right: 12px; transform: none; }
  .consult__btn { width: 56px; height: 56px; padding: 0; justify-content: center; gap: 1px; border-radius: 50%; font-size: 13px; letter-spacing: 0; }
  .consult__btn span { writing-mode: horizontal-tb; letter-spacing: .04em; line-height: 1.15; width: 2.2em; font-weight: 700; }
  .consult__btn svg { display: none; }
  .toast { bottom: 84px; }
}

/* 窄屏示意图：保持一颗珠子对一个刻度，图宽 680px，放进可左右滑动的容器（页面本身不横向滚动） */
@media (max-width: 599px) {
  .pegfig__hint { display: block; margin-top: 10px; text-align: center; font-size: 14px; color: var(--c-aux-ink); font-weight: 600; }
  .pegfig__legend { display: flex; justify-content: flex-end; gap: 16px; margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--c-ink); }
  .pegfig__scroll { margin-top: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border-radius: var(--r-s); }
  .pegfig__svg { width: 680px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}