/* ==========================================================================
   明磁科技 MC.TECH — 全站样式表
   设计语言：工程图纸 / 无圆角 / 发丝线 / mono 标签 / 主蓝 #1257E8
   全站最小字号 16px
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. 设计令牌
   -------------------------------------------------------------------------- */
:root {
  /* 品牌色 */
  --blue: #1257E8;
  --blue-dark: #0E45BC;
  --blue-soft: #7FA6FF;
  --blue-tint: #EEF3FF;

  /* 墨色 */
  --ink: #0B1730;
  --ink-2: #16233D;
  --ink-3: #1E2C48;

  /* 文本 */
  --text: #46536B;
  --muted: #8794A8;
  --muted-2: #A8B3C4;

  /* 线条与底色 */
  --line: #E4E9F0;
  --line-2: #DCE3EC;
  --hair: #EDF1F6;
  --bg: #FFFFFF;
  --bg-soft: #F6F8FA;

  /* 字号（下限 16px） */
  --fs-min: 16px;
  --fs-body: 16px;
  --fs-lead: clamp(16px, 1.05vw, 19px);
  --fs-h4: clamp(17px, 1.15vw, 20px);
  --fs-h3: clamp(20px, 1.5vw, 26px);
  --fs-h2: clamp(26px, 2.4vw, 40px);
  --fs-h1: clamp(34px, 4vw, 62px);
  --fs-stat: clamp(30px, 3.4vw, 52px);

  /* 间距 */
  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap: 20px;
  --gap-md: 28px;
  --gap-lg: 48px;
  --gap-xl: 72px;
  --sec-pad: clamp(56px, 6vw, 104px);

  /* 布局 */
  --wrap: 1440px;
  --pad-x: clamp(20px, 3.4vw, 56px);
  --header-h: 88px;

  /* 字体 */
  --font-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* --------------------------------------------------------------------------
   02. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 固定定位的移动端抽屉关闭时用 translateX(100%) 移出画面，
     会撑大横向可滚动宽度；clip 不产生滚动容器，因此不会干扰 sticky 头部 */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

p { margin: 0; }

a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease, background-color .2s ease, border-color .2s ease;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { cursor: pointer; border: 0; background: none; }

table { border-collapse: collapse; width: 100%; }

::selection { background: var(--blue); color: #fff; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   03. 布局工具
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.section { padding: var(--sec-pad) 0; }
.section--soft { background: var(--bg-soft); }
.section--dark { background: var(--ink); color: var(--muted); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.rule--hair { background: var(--hair); }

.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;
}

/* mono 标签基类 */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   04. 区块标题（编号 + 竖线 + 标签 / 标题 / 副文）
   -------------------------------------------------------------------------- */
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-md);
  padding-bottom: var(--gap-md);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--gap-lg);
}

.sec-head__left { max-width: 900px; }

.sec-code {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--blue);
}

.sec-code__num { font-weight: 700; }

.sec-code__bar {
  width: 28px; height: 1px;
  background: currentColor;
  opacity: .55;
}

.section--dark .sec-code { color: var(--blue-soft); }

.sec-head__title {
  font-size: var(--fs-h2);
  margin-bottom: 14px;
}

.sec-head__sub {
  font-size: var(--fs-lead);
  color: var(--text);
  max-width: 68ch;
}

.section--dark .sec-head__sub { color: var(--muted); }

.sec-head__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
  padding-bottom: 6px;
}

.sec-head__link {
  font-size: var(--fs-min);
  font-weight: 500;
  color: var(--blue);
  white-space: nowrap;
  padding-bottom: 6px;
}
.sec-head__link:hover { color: var(--blue-dark); }

/* --------------------------------------------------------------------------
   05. 按钮
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  font-size: var(--fs-min);
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: all .2s ease;
}

.btn--primary {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.btn--primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }

.btn--ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

.btn--ghost-dark {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn--ghost-dark:hover { border-color: var(--ink); }

.btn--block { width: 100%; }

/* 箭头圆按钮 */
.arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border: 1px solid var(--line-2);
  color: var(--ink);
  background: #fff;
  flex-shrink: 0;
  transition: all .2s ease;
}
.arrow-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.arrow-btn svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   06. 站点头部
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand__mark {
  width: 38px; height: 38px;
  background: var(--ink);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.brand__mark svg { width: 22px; height: 22px; }

.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__cn { font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: .02em; }
.brand__en {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .2em;
  color: var(--muted);
  text-transform: uppercase;
}

.nav-actions { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); }

.main-nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 36px); }

.main-nav__link {
  font-size: var(--fs-min);
  font-weight: 500;
  color: var(--text);
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
}
.main-nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--blue);
  transition: width .22s ease;
}
.main-nav__link:hover { color: var(--ink); }
.main-nav__link:hover::after,
.main-nav__link.is-active::after { width: 100%; }
.main-nav__link.is-active { color: var(--ink); font-weight: 600; }

/* --- 主导航下拉（2026-09-18 新增：产品中心 / 应用领域 / 材料体系） ---
   .nav-item 撑满 header 高度，下拉从 header 下沿展开，鼠标从链接滑到面板全程无死区。
   .nav-drop 为空时（该栏目没有子栏目）整块不占位，caret 也一并收起。 */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--header-h);
}
.nav-item > .main-nav__link { display: inline-flex; align-items: center; gap: 6px; }

.nav-item__caret {
  width: 10px; height: 10px;
  flex-shrink: 0;
  opacity: .5;
  transition: transform .22s ease, opacity .22s ease;
}
.nav-item:hover .nav-item__caret { transform: rotate(180deg); opacity: 1; }

/* 2026-09-18：下拉只留中文栏目名（去掉右侧英文小字），面板宽度收窄 */
.nav-drop {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translate(-50%, 10px);
  min-width: 168px;
  padding: 8px 0;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 2px solid var(--blue);
  box-shadow: 0 22px 44px -22px rgba(9, 13, 19, .34);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 30;
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
/* 该栏目没有下拉项时，面板与 caret 一并收起。
   注意不能靠 :empty —— 模板缩进会在面板里留下空白文本节点，:empty 永远不成立。 */
.nav-item:not(:has(.nav-drop__link)) .nav-drop { display: none; }
.nav-item:not(:has(.nav-drop__link)) .nav-item__caret { display: none; }

.nav-drop__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 20px;
  transition: background .18s ease;
}
.nav-drop__name {
  font-size: var(--fs-min);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  transition: color .18s ease;
}
.nav-drop__link:hover { background: var(--bg-soft); }
.nav-drop__link:hover .nav-drop__name { color: var(--blue); }

.lang-switch {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .08em;
  flex-shrink: 0;
}
.lang-switch__item {
  padding: 7px 11px;
  color: var(--muted);
  line-height: 1;
}
.lang-switch__item.is-active {
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}

.header-cta { flex-shrink: 0; }

/* 移动端汉堡 */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line-2);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  background: var(--ink);
  transition: transform .24s ease, opacity .24s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 移动端抽屉 */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: #fff;
  z-index: 89;
  padding: 24px var(--pad-x) 40px;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .3s ease, visibility .3s ease;
  border-top: 1px solid var(--line);
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }

.mobile-nav__list { border-top: 1px solid var(--line); }
.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.mobile-nav__link span { font-family: var(--font-mono); font-size: var(--fs-min); color: var(--muted-2); }
.mobile-nav__link.is-active { color: var(--blue); }

/* 带下级的栏目：链接与子项合成一组，分隔线挂在组上 */
.mobile-nav__group { border-bottom: 1px solid var(--line); }
.mobile-nav__group .mobile-nav__link { border-bottom: 0; }

.mobile-nav__subs { padding: 0 0 12px; }
/* 同上：模板缩进会留下空白文本节点，:empty 判不出来，用「有没有子链接」判断 */
.mobile-nav__group:not(:has(.mobile-nav__sublink)) .mobile-nav__subs { display: none; }
.mobile-nav__sublink {
  position: relative;
  display: block;
  padding: 9px 0 9px 26px;
  font-size: 15px;
  color: var(--muted);
  transition: color .18s ease;
}
.mobile-nav__sublink::before {
  content: "";
  position: absolute;
  left: 8px; top: 50%;
  width: 8px; height: 1px;
  background: var(--muted-2);
}
.mobile-nav__sublink:hover { color: var(--blue); }

.mobile-nav__foot {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mobile-nav__foot .btn { width: 100%; }
.mobile-nav__lang { display: flex; }
.mobile-nav__lang .lang-switch { width: 100%; }
.mobile-nav__lang .lang-switch__item { flex: 1; text-align: center; padding: 12px 0; }

/* --------------------------------------------------------------------------
   07. Hero（首页）
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(460px, 46vw, 680px);
  display: flex;
  align-items: center;
  background: var(--ink);
  overflow: hidden;
  color: #fff;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(6,12,26,.94) 0%, rgba(6,12,26,.82) 45%, rgba(6,12,26,.5) 100%);
}

/* 网图加载失败时的兜底底纹 + 标签 */
.img-fallback {
  position: relative;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, #E9EEF5 0%, #D7E0EC 100%);
}
.img-fallback::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .12em;
  color: var(--muted);
  text-transform: uppercase;
  background: none;
  pointer-events: none;
}
/* 深色容器内的兜底标签改为浅色 */
.hero__media.img-fallback,
.page-banner__media.img-fallback,
.series-card__media.img-fallback {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, #1B2942 0%, #0B1730 100%);
}
.hero__media.img-fallback::after,
.page-banner__media.img-fallback::after,
.series-card__media.img-fallback::after {
  color: rgba(255,255,255,.42);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  /* 2026-09-18：原写法 `padding: … 0` 把 .wrap 的左右内边距覆盖成 0，
     窄屏（<1440）时 hero 文字直接贴到屏幕左右边缘，和下面各区块也对不齐。
     这里显式补回 --pad-x，hero 与其它区块左对齐。 */
  padding: clamp(60px, 7vw, 110px) var(--pad-x);
}

.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .28);
  margin-bottom: clamp(22px, 2.6vw, 36px);
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .88);
}
.hero__chip-sep { width: 1px; height: 14px; background: rgba(255,255,255,.35); }

.hero__title {
  font-size: var(--fs-h1);
  color: #fff;
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin-bottom: clamp(18px, 2vw, 28px);
}
.hero__title span { display: block; }

.hero__sub {
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, .76);
  max-width: 62ch;
  margin-bottom: clamp(26px, 3vw, 40px);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: clamp(38px, 4.5vw, 64px);
}

.hero__stats { border-top: 1px solid rgba(255,255,255,.18); padding-top: 26px; }
.hero__stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 80px);
}
.hero-stat__value {
  font-size: var(--fs-stat);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.hero-stat__label {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .6);
  text-transform: uppercase;
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   08. 内页 Banner + 面包屑
   -------------------------------------------------------------------------- */
.page-banner {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  color: #fff;
  /* 设计稿 02 Page Banner 固定 460px */
  height: 460px;
  display: flex;
}
.page-banner__media {
  position: absolute;
  inset: 0;
  /* 2026-09-18：全站内页 Banner 统一图（客户提供 nyban.jpg，1920×460）
     左对齐：保留图片左侧的深色留白区，白字压在上面对比度稳定，右侧电路纹理正常露出 */
  background: #16213A url(../images/nyban.jpg) left center / cover no-repeat;
}
.page-banner__media img { width: 100%; height: 100%; object-fit: cover; }
.page-banner__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 图片本身左侧即为深色留白，遮罩按「左重右轻」轻量化，右侧纹理可见 */
  background: linear-gradient(100deg, rgba(6,12,26,.72) 0%, rgba(6,12,26,.42) 52%, rgba(6,12,26,.12) 100%);
}
.page-banner__rings {
  position: absolute;
  right: -140px; top: 50%;
  transform: translateY(-50%);
  width: 620px; height: 620px;
  opacity: .1;
  pointer-events: none;
}
.page-banner__rings circle { fill: none; stroke: #fff; stroke-width: 1; }

.page-banner__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* 设计稿：Banner 文字在 460 高度内垂直居中 */
  gap: var(--gap-md);
}

.page-banner__title {
  font-size: clamp(30px, 3.2vw, 48px);
  color: #fff;
  margin-bottom: 14px;
}
.page-banner__lead {
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, .74);
  max-width: 680px;          /* 设计稿 Banner Lead 宽度 680 */
}
.page-banner__mono {
  position: absolute;
  right: var(--pad-x);       /* 对齐内容栏右边缘（设计稿 x=1514 ≈ 1680 右边界） */
  bottom: 47px;              /* 设计稿 y=392 / 高度 460 */
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .5);
  text-transform: uppercase;
  white-space: nowrap;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .62);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.crumbs a:hover { color: #fff; }
.crumbs__sep { opacity: .5; }
.crumbs__current { color: #fff; }

/* 正文内面包屑（浅色） */
.crumbs--light {
  color: var(--muted);
  text-transform: none;
  font-size: var(--fs-min);
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}
.crumbs--light a:hover { color: var(--blue); }
.crumbs--light .crumbs__current { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------------------
   09. 分段控件（Segmented Tabs）
   -------------------------------------------------------------------------- */
.tabs {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tabs__row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line-2);
  background: #fff;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs__row::-webkit-scrollbar { display: none; }

.tabs__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 clamp(16px, 1.7vw, 30px);
  height: 64px;
  flex: 0 0 auto;
  background: #fff;
  color: var(--muted);
  text-align: left;
  border-right: 1px solid var(--line-2);
  transition: background-color .2s ease, color .2s ease;
}
.tabs__item:last-child { border-right: 0; }

.tabs__item-index {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .1em;
  color: var(--muted-2);
  line-height: 1;
}

.tabs__item-name {
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  line-height: 1.2;
}

.tabs__item:hover { background: var(--bg-soft); }

.tabs__item.is-active { background: var(--ink); }
.tabs__item.is-active .tabs__item-index { color: var(--blue-soft); }
.tabs__item.is-active .tabs__item-name { color: #fff; font-weight: 600; }

.tabs__desc {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
  font-size: var(--fs-min);
  color: var(--muted);
}
.tabs__desc-text { max-width: 92ch; }
.tabs__desc-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  /* 2026-09-18：原 nowrap 在 390 窄屏会把文档撑到 457px（横向溢出），改为可换行；
     宽屏下该行文字本身放得下，视觉与原来一致 */
  white-space: normal;
}

/* 面板显隐 */
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* --------------------------------------------------------------------------
   10. 统计条
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats__item {
  padding: 30px 0;
  border-right: 1px solid var(--line);
  padding-right: var(--gap);
  padding-left: var(--gap);
}
.stats__item:first-child { padding-left: 0; }
.stats__item:last-child { border-right: 0; padding-right: 0; }

.stats__icon {
  color: var(--blue);
  margin-bottom: 16px;
}
.stats__icon svg { width: 30px; height: 30px; }

.stats__value {
  font-size: var(--fs-stat);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.stats__label {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   11. 卡片 / 网格通用
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
/* 2026-09-18：卡片网格条目数不满一行时（如标准品 10 个系列），空出的格位会露出网格底色（蓝灰）。
   加 .grid--cards 后底色改白、格线改用卡片自身的 1px 描边补回，空位就是纯白。 */
.grid.grid--cards { background: var(--bg); }
.grid.grid--cards > * { box-shadow: 0 0 0 1px var(--line); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff;
  display: flex;
  flex-direction: column;
}

/* 优势卡 */
.card--adv { padding: clamp(24px, 2.4vw, 38px); }
.card--adv__rule { width: 36px; height: 3px; background: var(--blue); margin-bottom: 22px; }
.card--adv__index {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .12em;
  color: var(--muted-2);
  margin-bottom: 10px;
}
.card--adv__title { font-size: var(--fs-h4); margin-bottom: 12px; }
.card--adv__desc { font-size: var(--fs-min); color: var(--text); }

/* 图文卡（带缩略图） */
.card__thumb {
  position: relative;
  background: var(--bg-soft);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.card:hover .card__thumb img { transform: scale(1.03); }

/* 双系列大卡 */
.series-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

.series-card {
  position: relative;
  display: block;
  min-height: clamp(300px, 28vw, 440px);
  overflow: hidden;
  background: var(--ink);
  color: #fff;
}
.series-card__media { position: absolute; inset: 0; }
.series-card__media img { width: 100%; height: 100%; object-fit: cover; }
.series-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,12,26,.2) 0%, rgba(6,12,26,.88) 100%);
  transition: opacity .3s ease;
}
.series-card:hover .series-card__shade { opacity: .88; }

.series-card__tag {
  position: absolute;
  top: 24px; left: 24px;
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .78);
  border: 1px solid rgba(255, 255, 255, .3);
  padding: 7px 13px;
  text-transform: uppercase;
}

.series-card__copy {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 2.6vw, 40px);
}
.series-card__title { font-size: var(--fs-h3); color: #fff; margin-bottom: 10px; }
.series-card__sub { font-size: var(--fs-min); color: rgba(255, 255, 255, .74); }

.series-card__arrow {
  position: absolute;
  right: clamp(24px, 2.6vw, 40px);
  bottom: clamp(24px, 2.6vw, 40px);
  z-index: 3;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: transform .25s ease, background-color .25s ease;
}
.series-card__arrow svg { width: 18px; height: 18px; }
.series-card:hover .series-card__arrow { background: var(--blue); color: #fff; transform: translateX(4px); }

/* 材料卡 */
.material-card {
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: background-color .28s ease;
}
.material-card:hover { background: #F4F8FE; }
.material-card:hover .material-card__title { color: var(--blue); }
.material-card__photo { aspect-ratio: 4 / 3; background: var(--bg-soft); overflow: hidden; }
.material-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.material-card:hover .material-card__photo img { transform: scale(1.03); }
.material-card__copy { padding: clamp(22px, 2.2vw, 34px); }
.material-card__title { font-size: var(--fs-h4); margin-bottom: 12px; }
.material-card__grades {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .06em;
  color: var(--blue);
  margin-bottom: 12px;
}
.material-card__desc { font-size: var(--fs-min); color: var(--text); }
/* 牌号列表：由后台材料条目自动生成，用中点分隔（末尾不加）。
   ⚠ 必须用 inline-block（而非 white-space:nowrap）——nowrap 会让整串牌号
   变成一个不可断行的长单元，窄屏下直接撑破容器造成横向溢出。
   分隔符放前一项的 ::after，换行时中点留在上一行末尾。 */
.material-card__grades .grade { display: inline-block; }
.material-card__grades .grade:not(:last-child)::after {
  content: '·';
  margin: 0 .5em;
  color: var(--muted);
}

/* 产品卡 */
.product-card {
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 1.9vw, 28px);
}
.product-card__thumb {
  aspect-ratio: 4 / 3;
  background: var(--bg-soft);
  margin-bottom: 20px;
  overflow: hidden;
}
.product-card__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 12%; transition: transform .5s ease; }
.product-card:hover .product-card__thumb img { transform: scale(1.05); }
.product-card__name { font-size: var(--fs-h4); margin-bottom: 8px; }
.product-card__desc { font-size: var(--fs-min); color: var(--text); margin-bottom: 18px; }
.product-card__foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product-card__count {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
}
.product-card__arrow { color: var(--blue); display: grid; place-items: center; }
.product-card__arrow svg { width: 18px; height: 18px; transition: transform .25s ease; }
.product-card:hover .product-card__arrow svg { transform: translateX(4px); }

/* 应用场景卡 */
.app-card {
  background: #fff;
  display: flex;
  flex-direction: column;
}
.app-card__thumb {
  /* 2026-09-18：应用领域场景图按客户要求统一为 4:3 */
  aspect-ratio: 4 / 3;
  background: var(--bg-soft);
  overflow: hidden;
  position: relative;
}
.app-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.app-card:hover .app-card__thumb img { transform: scale(1.04); }

.app-card__body { padding: clamp(20px, 1.9vw, 28px); display: flex; flex-direction: column; flex: 1; }
.app-card__cat {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.app-card__title { font-size: var(--fs-h4); margin-bottom: 12px; }
.app-card__desc { font-size: var(--fs-min); color: var(--text); margin-bottom: 16px; }
.app-card__terminals {
  font-size: var(--fs-min);
  color: var(--muted);
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--hair);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
}
.tag-row__label {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .08em;
  color: var(--muted);
  min-width: 76px;
  text-transform: uppercase;
}
.tag-row__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border: 1px solid var(--line-2);
  font-size: var(--fs-min);
  color: var(--ink);
  background: #fff;
  line-height: 1.4;
}
a.chip:hover { border-color: var(--blue); color: var(--blue); }

/* 联系方式卡 */
.contact-card {
  background: #fff;
  padding: clamp(24px, 2.4vw, 36px);
  display: flex;
  flex-direction: column;
}
.contact-card__icon {
  width: 46px; height: 46px;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  color: var(--blue);
  margin-bottom: 22px;
}
.contact-card__icon svg { width: 22px; height: 22px; }
.contact-card__title { font-size: var(--fs-h4); margin-bottom: 16px; }
.contact-card__divider { height: 1px; background: var(--hair); margin-bottom: 16px; }
.contact-card__value { font-size: var(--fs-min); color: var(--text); word-break: break-all; }
.contact-card__value + .contact-card__value { margin-top: 8px; }
.contact-card__value--strong { color: var(--ink); font-weight: 600; }

/* 联系页二维码 */
.qr-box {
  display: flex;
  align-items: center;
  gap: 16px;
}
.qr-box__img {
  width: 96px; height: 96px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  flex-shrink: 0;
  overflow: hidden;
}
.qr-box__img img { width: 100%; height: 100%; object-fit: cover; }
.qr-box__hint { font-size: var(--fs-min); color: var(--muted); }

/* --------------------------------------------------------------------------
   12. 图片网格（定制能力实拍）
   -------------------------------------------------------------------------- */
.shot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.shot {
  position: relative;
  /* 2026-09-18：精密定制实拍缩略图按客户要求统一为 1:1 正方形 */
  aspect-ratio: 1 / 1;
  background: var(--bg-soft);
  overflow: hidden;
  padding: 0;
  display: block;
  text-align: left;
}
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.shot:hover img { transform: scale(1.05); }
.shot__index {
  position: absolute;
  left: 12px; bottom: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .1em;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

/* --------------------------------------------------------------------------
   13. 表格
   -------------------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  min-width: 960px;
  font-size: var(--fs-min);
}

.data-table thead th {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 14px 16px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
.data-table thead th:last-child { border-right: 0; }

.data-table thead th .th-cn {
  display: block;
  font-size: var(--fs-min);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
}
.data-table thead th .th-en {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--muted);
  text-transform: uppercase;
}

/* 材料体系表：单位行按客户参考站原样大小写显示（mT / kW/m³ / A/m / Ω·m），不做大写转换 */
.data-table[data-mat-table] thead th .th-en { text-transform: none; }

.data-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--hair);
  border-right: 1px solid var(--hair);
  color: var(--text);
  vertical-align: middle;
}
.data-table tbody td:last-child { border-right: 0; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: #FAFBFD; }

.data-table .td-grade {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--blue);
  letter-spacing: .04em;
  white-space: nowrap;
}
.data-table .td-num {
  font-family: var(--font-mono);
  color: var(--ink);
  white-space: nowrap;
}
.data-table .td-sep {
  font-family: var(--font-mono);
  color: var(--muted);
  white-space: nowrap;
}

.table-caption {
  font-size: var(--fs-min);
  color: var(--muted);
  margin-top: 16px;
  padding-left: 16px;
  border-left: 2px solid var(--line-2);
}

/* 2026-09-18：材料体系整页脚注（老网站 mat-note 原句），放在最后一个分类表之后 */
.table-caption.mat-note { margin-top: var(--gap-xl); max-width: 90ch; }

.table-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: var(--gap-md);
}
.table-head__spec { display: flex; gap: clamp(24px, 3vw, 56px); }
.table-head__spec-item { text-align: right; }
.table-head__spec-value {
  font-family: var(--font-mono);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.table-head__spec-label {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   14. 说明条
   -------------------------------------------------------------------------- */
.note-bar {
  display: flex;
  gap: 16px;
  padding: clamp(20px, 2vw, 28px);
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.note-bar__mark {
  width: 3px;
  background: var(--blue);
  flex-shrink: 0;
}
.note-bar__text { font-size: var(--fs-min); color: var(--text); }
.note-bar__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .12em;
  color: var(--blue);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.note-bar p + p { margin-top: 10px; }

/* --------------------------------------------------------------------------
   15. 表单
   -------------------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: var(--gap); }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

.field { display: flex; flex-direction: column; gap: 10px; }

.field__label {
  font-size: var(--fs-min);
  font-weight: 600;
  color: var(--ink);
}
.field__label .req { color: var(--blue); margin-left: 4px; }

.field__input,
.field__textarea {
  width: 100%;
  padding: 14px 16px;
  font-size: var(--fs-min);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-2);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field__input::placeholder,
.field__textarea::placeholder { color: var(--muted-2); }
.field__input:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(18, 87, 232, .1);
}
.field__textarea { min-height: 150px; resize: vertical; line-height: 1.7; }

.check-list { display: flex; flex-wrap: wrap; gap: 10px; }
.check-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border: 1px solid var(--line-2);
  font-size: var(--fs-min);
  color: var(--text);
  background: #fff;
  cursor: pointer;
  transition: all .2s ease;
}
.check-item input { position: absolute; opacity: 0; pointer-events: none; }
.check-item__box {
  width: 16px; height: 16px;
  border: 1px solid var(--line-2);
  flex-shrink: 0;
  position: relative;
  transition: all .2s ease;
}
.check-item input:checked ~ .check-item__box { background: var(--blue); border-color: var(--blue); }
.check-item input:checked ~ .check-item__box::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 4px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.check-item:has(input:checked) { border-color: var(--blue); color: var(--blue); }
.check-item input:focus-visible ~ .check-item__box { box-shadow: 0 0 0 3px rgba(18, 87, 232, .18); }

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap);
  padding-top: 4px;
}
.form__note { font-size: var(--fs-min); color: var(--muted); }

/* 表单 + 侧栏 */
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 64px);
  align-items: start;
}

.form-box {
  background: #fff;
  border: 1px solid var(--line);
  padding: clamp(24px, 2.6vw, 44px);
}

/* 提交之后步骤 */
.steps { border-top: 1px solid var(--line); }
.step {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.step__index {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .1em;
  color: var(--blue);
  flex-shrink: 0;
  padding-top: 4px;
}
.step__title { font-size: var(--fs-h4); margin-bottom: 8px; }
.step__desc { font-size: var(--fs-min); color: var(--text); }

/* --------------------------------------------------------------------------
   16. 产品详情
   -------------------------------------------------------------------------- */
.product-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
  gap: clamp(28px, 3.4vw, 64px);
  align-items: center;
}
.product-head__icon {
  aspect-ratio: 1 / 1;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  padding: 12%;
}
.product-head__icon img { width: 100%; height: 100%; object-fit: contain; }

.product-head__mono {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .14em;
  color: var(--blue);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.product-head__title { font-size: var(--fs-h2); margin-bottom: 14px; }
.product-head__lead { font-size: var(--fs-lead); color: var(--text); margin-bottom: 30px; }

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3vw, 56px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.meta-row__value {
  font-family: var(--font-mono);
  font-size: clamp(19px, 1.5vw, 24px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.meta-row__label {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 6px;
}

/* 尺寸示意图 */
.drawing {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  padding: clamp(24px, 3vw, 56px);
  display: grid;
  place-items: center;
  min-height: 380px;
}
.drawing__svg { width: 100%; max-width: 720px; height: auto; }
.drawing__note {
  position: absolute;
  left: clamp(20px, 2.4vw, 36px);
  bottom: clamp(18px, 2vw, 30px);
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .1em;
  color: var(--muted-2);
  text-transform: uppercase;
}

.legend {
  display: grid;
  /* 列数由页面脚本按实际尺寸标注项个数写入 --legend-cols，最多 6 列 */
  grid-template-columns: repeat(var(--legend-cols, 6), 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-top: 0;
}
.legend__item { background: #fff; padding: 16px; }
.legend__letter {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--blue);
  line-height: 1.2;
}
.legend__name {
  font-size: var(--fs-min);
  color: var(--text);
  margin-top: 4px;
}

/* 上下产品导航 */
.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--gap);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 26px 0;
}
.pager__item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.pager__item--next { text-align: right; }
.pager__label {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
}
.pager__name { font-size: var(--fs-h4); color: var(--ink); }
.pager__item:hover .pager__name { color: var(--blue); }
.pager__arrow {
  width: 44px; height: 44px;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.pager__item:hover .pager__arrow { background: var(--ink); color: #fff; border-color: var(--ink); }
.pager__arrow svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   17. 页脚
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--muted); }

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.35fr);
  gap: clamp(32px, 4vw, 80px);
  padding: clamp(48px, 5vw, 84px) 0 clamp(36px, 4vw, 56px);
}

.footer-brand__row { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.footer-brand__mark {
  width: 40px; height: 40px;
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--ink);
  flex-shrink: 0;
}
.footer-brand__mark svg { width: 22px; height: 22px; }
.footer-brand__name { font-size: 18px; font-weight: 700; color: #fff; line-height: 1.2; }
.footer-brand__en {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .2em;
  color: var(--muted);
  text-transform: uppercase;
}
.footer-brand__tagline {
  font-size: var(--fs-min);
  color: var(--muted);
  max-width: 46ch;
  margin-bottom: 28px;
}

.footer-cols {
  display: grid;
  /* 联系列（地址）按内容保底宽度：长地址如「江苏省无锡市锡山区东港镇」在等宽三列下会把末字挤到第二行，
     这里给末列 min-content 下限，列不够宽时优先保它整行显示，空间充足时三列仍等宽 */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(min-content, 1fr);
  gap: clamp(20px, 2.6vw, 48px);
}
.footer-col__head {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .14em;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.footer-col__link {
  display: block;
  font-size: var(--fs-min);
  color: var(--muted);
  margin-bottom: 13px;
  word-break: break-word;
}
.footer-col__link:hover { color: #fff; }
/* 末列（联系）：地址等长文本整行显示，避免末字单独掉行 */
.footer-col:last-child { white-space: nowrap; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 24px 0 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.footer-bottom__copy,
.footer-bottom__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .08em;
  color: var(--muted);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   18. 灯箱
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 12, 26, .94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 60px);
  overflow: hidden;
}
.lightbox.is-open { display: flex; }

.lightbox__figure {
  position: relative;
  width: min(1200px, 100%);
  margin: 0;
}
.lightbox__img {
  display: block;
  width: 100%;
  height: auto;
  /* 给图片未加载/加载失败时一个稳定的展示底板，避免容器塌陷把控件挤成一团 */
  min-height: clamp(260px, 54vh, 620px);
  max-height: calc(100vh - 160px);
  object-fit: contain;
  background: var(--ink-2);
}
.lightbox__counter {
  position: absolute;
  top: -38px; left: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .7);
  text-transform: uppercase;
}
.lightbox__close {
  position: absolute;
  top: -46px; right: 0;
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  display: grid;
  place-items: center;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .14); }
.lightbox__close svg { width: 16px; height: 16px; }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  display: grid;
  place-items: center;
}
.lightbox__nav:hover { background: rgba(255, 255, 255, .14); }
.lightbox__nav svg { width: 18px; height: 18px; }
.lightbox__nav--prev { left: -68px; }
.lightbox__nav--next { right: -68px; }

.lightbox__hint {
  position: absolute;
  bottom: -38px; left: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .55);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   19. 品牌光斑 / 装饰
   -------------------------------------------------------------------------- */
.deco-rings {
  position: absolute;
  pointer-events: none;
  opacity: .06;
}
.deco-rings circle { fill: none; stroke: var(--ink); stroke-width: 1; }

/* --------------------------------------------------------------------------
   20. 响应式断点
   -------------------------------------------------------------------------- */

/* ≤1360px：栅格降列 */
@media (max-width: 1360px) {
  .shot-grid { grid-template-columns: repeat(3, 1fr); }
  .legend { grid-template-columns: repeat(3, 1fr); }
}

/* ≤1200px：导航换汉堡 */
@media (max-width: 1200px) {
  :root { --header-h: 72px; }

  .main-nav, .site-header .lang-switch { display: none; }
  .nav-toggle { display: flex; }
  .header-cta { display: none; }

  .grid--4 { grid-template-columns: repeat(2, 1fr); }

  .footer-top { grid-template-columns: 1fr; }
}

/* ≤1024px：两列变单列 */
@media (max-width: 1024px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats__item { border-bottom: 1px solid var(--line); padding: 24px var(--gap); }
  .stats__item:nth-child(2n) { border-right: 0; }
  .stats__item:nth-last-child(-n+2) { border-bottom: 0; }
  .stats__item:first-child { padding-left: 0; }
  .stats__item:nth-child(odd) { padding-left: 0; }
  .stats__item:nth-child(even) { padding-right: 0; }

  .series-row { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }

  .form-layout { grid-template-columns: 1fr; }
  .product-head { grid-template-columns: 1fr; }
  .product-head__icon { max-width: 340px; }

  .page-banner { height: 400px; }
  .page-banner__inner { align-items: flex-start; }
  .page-banner__mono { bottom: 36px; }

  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
}

/* ≤768px：手机 */
@media (max-width: 768px) {
  :root {
    --sec-pad: 52px;
    --gap-lg: 32px;
    --gap-xl: 52px;
  }

  .sec-head { align-items: flex-start; }
  .sec-head__meta, .sec-head__link { padding-bottom: 0; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

  .form-row { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* 手机端首页 banner 不用背景图：实景图在窄屏裁切后画面太乱，改用纯色 #061020 */
  .hero { min-height: 0; background: #061020; }
  .hero__media { display: none; }
  .hero__stats-row { gap: 22px 40px; }

  .page-banner { height: 320px; }
  .page-banner__mono { display: none; }   /* 手机端空间紧张，隐藏装饰性 mono 标签 */

  .shot-grid { grid-template-columns: repeat(2, 1fr); }
  .legend { grid-template-columns: repeat(2, 1fr); }

  .table-head { align-items: flex-start; }
  .table-head__spec { gap: 28px; }
  .table-head__spec-item { text-align: left; }

  .tabs__item { height: 56px; padding: 0 18px; }
  .tabs__item-name { font-size: var(--fs-min); }

  .pager { flex-direction: column; }
  .pager__item--next { justify-content: flex-end; }

  .drawing { min-height: 260px; padding: 40px 20px 56px; }
  .drawing__note { left: 20px; bottom: 16px; }

  .lightbox__nav { width: 44px; height: 44px; }
  .lightbox__counter, .lightbox__hint { display: none; }
  .lightbox__close { top: -44px; }
}

/* ≤480px：小屏 */
@media (max-width: 480px) {
  .shot-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stats__item { border-right: 0; padding: 22px 0; }
  .stats__item:first-child { padding-left: 0; }
  .stats__item:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .stats__item:last-child { border-bottom: 0; }

  .hero__ctas .btn { width: 100%; }
  .form__actions .btn { width: 100%; }
  .form__actions { gap: 14px; }
}

/* --------------------------------------------------------------------------
   21. 无障碍与打印
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .site-header, .mobile-nav, .lightbox, .hero__ctas { display: none !important; }
  .section { padding: 24px 0; }
}

/* ==========================================================================
   22. 首页专属组件
   ========================================================================== */

/* 关于明磁 */
.about-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 64px);
  align-items: stretch;
  margin-bottom: clamp(36px, 4vw, 64px);
}
.about-copy { display: flex; flex-direction: column; }
.about-copy__p {
  font-size: var(--fs-lead);
  color: var(--text);
  margin-bottom: 18px;
  max-width: 56ch;
}
.about-stats {
  margin-top: auto;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: clamp(20px, 3vw, 56px);
  justify-content: start;
}
.about-stat__value {
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.about-stat__label {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 6px;
}
.about-photo {
  position: relative;
  background: var(--bg-soft);
  overflow: hidden;
  min-height: 300px;
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

/* 横向手风琴（应用领域） */
.accordion {
  display: flex;
  gap: var(--gap);
  min-height: clamp(300px, 27vw, 440px);
}
.acc-item {
  position: relative;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  transition: flex-grow .5s cubic-bezier(.4, 0, .2, 1);
  cursor: pointer;
}
.acc-item.is-open,
.acc-item:hover { flex-grow: 2.4; }

.acc-item__media { position: absolute; inset: 0; }
.acc-item__media img { width: 100%; height: 100%; object-fit: cover; }
.acc-item__shade {
  position: absolute;
  inset: 0;
  /* 配实拍场景图：上部留亮让产品可辨，底部压暗保证文字可读 */
  background: linear-gradient(180deg, rgba(6,12,26,.12) 0%, rgba(6,12,26,.42) 46%, rgba(6,12,26,.9) 100%);
  transition: opacity .35s ease;
}
.acc-item:hover .acc-item__shade { opacity: .8; }

.acc-item__copy {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(20px, 2vw, 32px);
}
.acc-item__index {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .12em;
  color: var(--blue-soft);
  margin-bottom: 10px;
}
.acc-item__title {
  font-size: var(--fs-h3);
  color: #fff;
  white-space: nowrap;
}
.acc-item__desc {
  font-size: var(--fs-min);
  color: rgba(255, 255, 255, .72);
  margin-top: 12px;
  max-width: 34ch;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease .1s, transform .35s ease .1s;
}
.acc-item.is-open .acc-item__desc,
.acc-item:hover .acc-item__desc { opacity: 1; transform: translateY(0); }

/* 材料体系双卡行 */
.material-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

@media (max-width: 1024px) {
  .about-top { grid-template-columns: 1fr; }
  .about-photo { width: 100%; min-height: 0; aspect-ratio: 16 / 9; }
  .accordion { flex-direction: column; min-height: 0; }
  .acc-item { min-height: 190px; flex-basis: auto; flex-grow: 0; }
  .acc-item.is-open, .acc-item:hover { flex-grow: 0; }
  .acc-item__desc { opacity: 1; transform: none; }
}

@media (max-width: 768px) {
  .material-row { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .about-photo { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   23. 关于我们 / 通用补充
   ========================================================================== */

/* 深色区内的网格描边改为半透明白 */
.section--dark .grid {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .12);
}

/* 高 · 精 · 异 技术支柱卡 */
.pillar {
  background: var(--ink-2);
  padding: clamp(24px, 2.4vw, 40px);
  display: flex;
  flex-direction: column;
}
.pillar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(28px, 3vw, 48px);
}
.pillar__char {
  font-size: clamp(44px, 5vw, 76px);
  font-weight: 700;
  color: var(--blue);
  line-height: 1;
  letter-spacing: 0;
}
.pillar__mono {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .12em;
  color: var(--blue-soft);
  text-transform: uppercase;
  text-align: right;
}
.pillar__title {
  font-size: var(--fs-h3);
  color: #fff;
  margin-bottom: 12px;
}
.pillar__desc {
  font-size: var(--fs-min);
  color: var(--muted);
}

/* 业务范围标签块 */
.biz-block { margin-top: 8px; }
.biz-block__label {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* 精简版统计条（关于页 4 项带图标） */
.stats--icons .stats__item { display: flex; flex-direction: column; }

/* [hidden] 强制生效（避免被 display:flex 覆盖） */
[hidden] { display: none !important; }

/* 筛选型分段控件的计数行 */
.tabs__desc .js-shown-count {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
}

/* 场景网格 */
.app-grid { margin-top: 0; }

/* 工程图横向滚动容器（窄屏保持标注可读） */
.drawing__scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.drawing__scroll .drawing__svg { min-width: 640px; }


/* ==========================================================================
   24. 牌号资料弹窗
   —— 材料体系表格中点牌号就地查看完整规格，不跳页、不丢比对上下文
   ========================================================================== */

/* ---------- 24.1 表格内的牌号按钮 ---------- */
.data-table .td-grade { padding: 0; }

.grade-btn {
  display: block;
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--blue);
  text-align: left;
  white-space: nowrap;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.grade-btn::after {
  content: "+";
  margin-left: 9px;
  font-weight: 400;
  color: var(--muted-2);
}
.grade-btn:hover,
.grade-btn:focus-visible {
  background: var(--blue-tint);
  border-left-color: var(--blue);
  color: var(--blue-dark);
  outline: none;
}
.grade-btn:hover::after,
.grade-btn:focus-visible::after { color: var(--blue); }

/* ---------- 24.2 弹窗容器 ---------- */
.gmodal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 48px);
}
.gmodal.is-open { display: flex; }

.gmodal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(11, 23, 48, .58);
  backdrop-filter: blur(2px);
}

.gmodal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1000px, 100%);
  max-height: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 32px 80px rgba(11, 23, 48, .28);
  overflow: hidden;
}

/* ---------- 24.3 弹窗头部 ---------- */
.gmodal__head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(22px, 2.4vw, 34px) clamp(20px, 3vw, 40px) clamp(18px, 2vw, 28px);
  border-bottom: 1px solid var(--line);
}
.gmodal__headmain {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.gmodal__titlerow {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.gmodal__title {
  font-family: var(--font-mono);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .02em;
  color: var(--ink);
}
.gmodal__series {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  font-size: var(--fs-min);
  font-weight: 500;
  color: var(--blue);
  background: var(--blue-tint);
  white-space: nowrap;
}
.gmodal__desc {
  font-size: var(--fs-min);
  line-height: 1.7;
  color: var(--text);
  max-width: 68ch;
}
.gmodal__close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--ink);
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.gmodal__close svg { width: 16px; height: 16px; }
.gmodal__close:hover { background: var(--bg-soft); border-color: var(--line-2); }

/* ---------- 24.4 弹窗主体 ---------- */
.gmodal__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.4vw, 30px);
  padding: clamp(22px, 2.6vw, 32px) clamp(20px, 3vw, 40px) clamp(24px, 2.8vw, 34px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.gmodal__sechead {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gmodal__sech {
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--ink);
}

/* 规格参数定义列表 */
.spec-list { border: 1px solid var(--line); }
.spec-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hair);
}
.spec-list__row:last-child { border-bottom: 0; }
.spec-list__label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--fs-min);
  font-weight: 500;
  color: var(--ink);
}
.spec-list__unit {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  font-weight: 400;
  color: var(--muted);
}
.spec-list__value {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  text-align: right;
}

/* 特性指标块 */
.gmodal__block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gmodal__blockhead {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.gmodal__blocktitle {
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--ink);
}
.gmodal__blocken {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .1em;
  color: var(--muted-2);
  text-transform: uppercase;
}
.metric-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 132px;
  padding: 13px 15px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.metric__label {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  color: var(--muted);
  white-space: nowrap;
}
.metric__value {
  font-family: var(--font-mono);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 700;
  color: var(--ink);
}
.metric--hl {
  background: var(--blue-tint);
  border-color: var(--blue-soft);
}
.metric--hl .metric__label { color: #5A6B88; }
.metric--hl .metric__value { color: var(--blue); }
.gmodal__note {
  font-size: var(--fs-min);
  line-height: 1.65;
  color: var(--muted-2);
}

/* 推荐磁芯 / 典型应用 */
.gmodal__tags {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.gtag {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.gtag__label {
  flex: 0 0 96px;
  padding-top: 7px;
  font-size: var(--fs-min);
  font-weight: 500;
  color: var(--ink);
}
.gtag__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: var(--fs-min);
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
/* 可点击的标签（推荐磁芯 / 典型应用） */
.chip--link { text-decoration: none; cursor: pointer; transition: border-color .16s, color .16s, background .16s; }
.chip--link:hover,
.chip--link:focus-visible { border-color: var(--blue); color: var(--blue); background: #fff; }
/* 从弹窗跳过来的产品卡片高亮（products-standard.html#core-ee） */
.product-card:target { outline: 2px solid var(--blue); outline-offset: 6px; }

/* ---------- 24.5 弹窗底部操作栏 ---------- */
.gmodal__foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 20px;
  padding: 18px clamp(20px, 3vw, 40px);
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
}
.gmodal__cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.gmodal__pager {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.gmodal__hint {
  font-size: var(--fs-min);
  color: var(--muted-2);
  white-space: nowrap;
}
.pager-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-2);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.pager-btn svg { width: 14px; height: 14px; }
.pager-btn:hover {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}
.pager-count {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

/* ---------- 24.6 弹窗响应式 ---------- */
@media (max-width: 1024px) {
  .gmodal__panel { width: min(720px, 100%); }
}

@media (max-width: 768px) {
  .gmodal {
    align-items: flex-end;
    padding: 0;
  }
  .gmodal__panel {
    width: 100%;
    max-height: 92vh;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  .gmodal__head { padding: 20px 20px 16px; gap: 16px; }
  .gmodal__body { padding: 20px 20px 22px; gap: 22px; }
  .gmodal__foot {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 20px 16px;
    gap: 12px;
  }
  .gmodal__cta { flex-direction: column; }
  .gmodal__cta .btn { width: 100%; justify-content: center; }
  .gmodal__pager { margin-left: 0; justify-content: center; }
  .gmodal__hint { display: none; }

  .spec-list__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 16px;
  }
  .spec-list__value { text-align: left; }

  .gtag { flex-direction: column; gap: 9px; }
  .gtag__label { flex-basis: auto; padding-top: 0; }
}

@media (max-width: 480px) {
  .gmodal__title { font-size: 24px; }
  .metric { flex: 1 1 calc(50% - 5px); min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .grade-btn, .gmodal__close, .pager-btn { transition: none; }
}

/* ==========================================================================
   套后台补充样式（数据由后台驱动后新增）
   ========================================================================== */

/* 1. 不可点标签 —— 后台尚未建对应产品系列的磁芯（EI / EPC / UU / POT）做灰底，
      等客户在后台补上这 4 款产品，标签会自动变成可点链接 */
.chip--muted {
  color: var(--muted);
  background: var(--hair);
  border-color: var(--line);
  cursor: not-allowed;
}

/* 2. 应用卡片「典型终端 / 关键电路」之间的分隔点 */
.app-card__dot { margin: 0 6px; color: var(--muted-2); }

/* 3. 从应用页跳过来命中锚点时的闪烁提示 */
.is-flash { animation: mcFlash 1.6s ease-out 1; }
@keyframes mcFlash {
  0%   { box-shadow: 0 0 0 0 rgba(18, 87, 232, .42); }
  60%  { box-shadow: 0 0 0 7px rgba(18, 87, 232, 0); }
  100% { box-shadow: 0 0 0 0 rgba(18, 87, 232, 0); }
}

/* 4. 精密定制系列图集（.shot-grid + .shot 复用成品样式）
      图片客户统一尺寸后从后台上传替换即可；没上传时显示留位框，不会塌版 */
.shot { cursor: zoom-in; border: 0; }
/* 图片不足一行时，右侧空白保持白色（默认 grid 灰底会露出大块灰板） */
.shot-grid { background: #fff; gap: 0; }
.shot { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.shot-grid > .shot:nth-child(4n) { border-right: 0; }
.shot-grid--empty { display: block; background: #fff; }
.shot-empty {
  min-height: 200px;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(45deg, #F6F8FA 0 12px, #EDF1F6 12px 24px);
  border: 1px dashed var(--line-2);
  margin: -1px;
}
.shot-empty span { font-size: var(--fs-min); color: var(--muted); letter-spacing: .08em; }

/* 5. 站点 logo（头 / 脚）—— 直接取模板 images 目录下的图
      头部 images/toplogo.png（深色字，配浅底）/ 页脚 images/footlogo.png（白色字，配深底）
      页脚用自带的白色 logo，不再垫白底外框
      尺寸：原图 500×207（内容区占 92%×86%，四周透明留白很小），故直接按高度缩放即可
      头部 46~58px（桌面 header 高 88px / 手机 72px，上下各留 13px 以上）
      页脚 62~82px（比头部更大，作为页脚的主视觉） */
.brand__logo { display: block; height: clamp(46px, 4.1vw, 58px); width: auto; }
.footer-brand__logo {
  display: inline-flex;
  align-items: center;
}
.footer-brand__logo img { display: block; height: clamp(62px, 5.6vw, 82px); width: auto; }

/* 6. 产品中心：进入某一子系列页时只显示对应区块（服务端加 class，不依赖 JS） */
.prod-group.is-hidden { display: none; }

/* 7. 内容详情页的「系列设置 / 资料」折叠框（客户在后台编辑内容时对应查看） */
.settings-pop {
  border: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 20px 22px;
  margin-top: var(--gap-lg);
}
.settings-pop__head {
  font-family: var(--font-mono);
  font-size: var(--fs-min);
  letter-spacing: .12em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.settings-pop__row { display: flex; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.settings-pop__row:first-of-type { border-top: 0; }
.settings-pop__label { flex: 0 0 130px; font-size: var(--fs-min); color: var(--muted); }
.settings-pop__value { flex: 1; font-size: var(--fs-min); color: var(--text); word-break: break-all; }

/* 8. 型号参数表（{mc:modeltable} 服务端渲染，产品详情页） */
/* 两张表的小标题：尺寸参数（mm） / 规格参数（有效参数 / 对应材质 AL / 重量） */
.data-group__title {
  font-size: var(--fs-min);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .02em;
  margin: var(--gap-md) 0 var(--gap-sm);
  padding-left: 12px;
  border-left: 3px solid var(--blue);
}
.table-scroll .data-group__title:first-child { margin-top: 0; }
/* 材质列（磁导率列）给一点底色，从一串尺寸列里一眼分得开 */
.data-table thead th[data-kind="material"] { background: #EEF4FC; }
.data-table tbody td.td-empty { color: var(--muted-2); }
/* 型号列固定在左侧，长表横向滚动时还认得出是哪一行 */
.data-table .th-model { background: var(--ink); color: #fff; }
.data-table .th-model .th-cn { color: #fff; }
.data-table .th-model .th-en { color: rgba(255, 255, 255, .55); }
.data-table tbody td.td-grade {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  border-right: 1px solid var(--line);
}
.data-table tbody tr:hover td.td-grade { background: #FAFBFD; }

/* 9. 产品详情页头部图标：图片缺失时按正方形容器显示占位标签 */
.product-head__icon.img-fallback { min-height: 120px; }
.product-head__icon { overflow: hidden; }
.product-head__icon img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* 10. 表单必填星号 */
.req { color: #E0245E; margin-left: 3px; font-weight: 700; }

/* 11. 联系页：表单右侧「直接联系」栏 */
.contact-aside { position: sticky; top: calc(var(--header-h, 80px) + 28px); }
.contact-aside__block {
  padding: clamp(20px, 2.2vw, 32px);
  border: 1px solid var(--line);
  background: #fff;
}
.contact-aside__link {
  display: block;
  margin-top: 12px;
  font-size: var(--fs-min);
  color: var(--blue);
  text-decoration: none;
  word-break: break-all;
}
.contact-aside__link:hover { text-decoration: underline; }
.contact-aside__note {
  margin: 14px 0 0;
  font-size: var(--fs-min);
  color: var(--muted);
  line-height: 1.7;
}
@media (max-width: 960px) { .contact-aside { position: static; } }

/* 12. 应用详情页：场景图 + 典型终端 / 关键电路 */
.app-detail__photo {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  background: linear-gradient(135deg, #0B1730 0%, #123A6B 55%, #0B1730 100%);
}
.app-detail__photo img { display: block; width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.app-kv { display: grid; gap: var(--gap-md); }
.app-kv__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; }
.app-kv__label {
  font-size: var(--fs-min);
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .04em;
  padding-top: 5px;
}
@media (max-width: 560px) {
  .app-kv__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .app-kv__label { padding-top: 0; }
}

/* ==========================================================================
   90. 英文内页字号收敛（2026-09-26）
   --------------------------------------------------------------------------
   为什么单独加这一块：
   · 本样式表原样沿用了中文站（同一份 72698 字节），字号是照「中文方块字」调的。
     同一 px 下拉丁字母的字面率更高、字距更宽，视觉体量明显比中文大 —— 实测中英
     两站「计算样式完全一致」（标题 34.128px / 正文 16px / 段宽 497px），
     但英文看上去就是偏大、行也显得松，与栏宽不成比例。
   · 因此这里只收敛英文模板的「内页」字号：约 -6% ~ -15%。
   · 首页 <main class="is-home"> 不受影响（老鹅只提了内页）；
     中文站 templates/default 是另一套目录，同样不受影响。
   · 覆盖方式：在 <main> 上重定义 --fs-* 令牌 —— 令牌沿 DOM 继承，
     内页所有 var(--fs-x) 调用点自动跟着变，无需逐条改；再单独处理
     那些写死 px/clamp 的选择器（共 9 个，见下）。
   ========================================================================== */
main:not(.is-home) {
  --fs-min: 15px;                          /* 原 16px，mono 标签 / 卡片描述 */
  --fs-body: 15px;                         /* 原 16px */
  --fs-lead: clamp(15px, 0.98vw, 17px);    /* 原 clamp(16px, 1.05vw, 19px) 正文段落 */
  --fs-h4: clamp(16px, 1.05vw, 18px);      /* 原 clamp(17px, 1.15vw, 20px) 卡片标题 */
  --fs-h3: clamp(18px, 1.32vw, 23px);      /* 原 clamp(20px, 1.5vw,  26px) 区块标题 */
  --fs-h2: clamp(23px, 2.1vw, 32px);       /* 原 clamp(26px, 2.4vw,  40px) 大区块标题 */
  --fs-stat: clamp(27px, 3vw, 43px);       /* 原 clamp(30px, 3.4vw,  52px) 统计数字 */
  font-size: 15px;                         /* 兜底：未显式设字号的后代由此继承 */
}

/* 写死字号的选择器（9 个），逐个收敛 */
main:not(.is-home) .page-banner__title     { font-size: clamp(25px, 2.7vw, 38px); }    /* 原 30 / 48 */
main:not(.is-home) .tabs__item-name        { font-size: 16.5px; }                      /* 原 18 */
main:not(.is-home) .legend__letter         { font-size: 16.5px; }                      /* 原 18 */
main:not(.is-home) .table-head__spec-value { font-size: clamp(19px, 1.7vw, 26px); }    /* 原 22 / 30 */
main:not(.is-home) .meta-row__value        { font-size: clamp(17px, 1.3vw, 21px); }    /* 原 19 / 24 */
main:not(.is-home) .about-stat__value      { font-size: clamp(23px, 2.2vw, 33px); }    /* 原 26 / 40 */
main:not(.is-home) .pillar__char           { font-size: clamp(38px, 4.3vw, 64px); }    /* 原 44 / 76 */
main:not(.is-home) .gmodal__title          { font-size: clamp(21px, 2.05vw, 28px); }   /* 原 24 / 34 */
main:not(.is-home) .metric__value          { font-size: clamp(18px, 1.55vw, 21px); }   /* 原 20 / 24 */

/* 手机端 .tabs__item-name 原本改用 --fs-min（见 max-width:768px 段），
   上面的 16.5px 会把那条覆盖掉，这里把移动端的意图补回来 */
@media (max-width: 768px) {
  main:not(.is-home) .tabs__item-name { font-size: var(--fs-min); }
}



/* ==========================================================================
   §91 第二轮视觉微调（2026-09-26 夜，老鹅 4 条截图反馈）
   · 只动英文模板；中文站 template/default 是另一套目录，完全不受影响。
   · 覆盖方式说明见下，每条都带「实测数字」，改的时候照数字调。
   ========================================================================== */

/* ---- 91.1 首页 Hero 主标题：字号收敛 + 限制文字宽度，不压到右侧产品图 ----
   实测（viewport 1422，内容栏 1325px，字号单位"每 1px 字号对应多少自然宽" = 1135.2/56.88 = 19.96）：
     --fs-h1 原 clamp(34px, 4vw, 62px) → 56.88px
     span1 "High-Performance Soft Magnetic Materials"       自然宽 1135px（占内容栏 85.7%）
     span2 "Expert in High-Precision Special-Shaped Cores"  自然宽 1241px → 横跨整个 hero
   改法：字号上限 39px（-31%）；≥1100px 时标题宽度限内容栏 70%（1325×70% = 928px）。
   校验：39px 下 span1 = 780px、span2 = 853px，都 < 928 ✓ 两行收在框内（原 1135/1241）。
   ⚠ 上限 39px 是算出来的：若抬到 44px，span2 会超框再折行，"Cores" 会单独掉第三行。
   ⚠ 不能再往下降：首页区块标题 .sec-head__title 用的是 --fs-h2（1422 宽下 34.1px），
     H1 必须明显大于 H2，否则层级颠倒（这个坑我第一版就踩了：36px < 34.1px 险些齐平）。
   为什么限宽：hero 背景图右侧约 45% 是产品实拍，文字压上去看不清。 */
:root {
  --fs-h1: clamp(30px, 2.75vw, 39px);
  /* 统计数字（10+ / 20+ / Full-Process）同比收一点，但不超过 H1：
     原 clamp(30px, 3.4vw, 52px) → 1422 宽下 48.35px；现 2.5vw = 35.5px
     注：内页 .stats__value 由 §90 的 main:not(.is-home) 覆盖，不受这里影响 */
  --fs-stat: clamp(26px, 2.5vw, 36px);
}
@media (min-width: 1100px) {
  .hero__title { max-width: 70%; }
}

/* ---- 91.2 首页 Applications 卡片：未展开时标题要换行，不能被裁 ----
   实测：一卡 316px，内容区 259px；标题 21.33px 下 "Consumer and Communication" 自然宽 319px，
   原 `white-space: nowrap` + 父级 `overflow: hidden` → 直接硬切（"Communi"）。
   改成允许换行：'Consumer and' / 'Communication'（164.9px，放得下）。
   hover 展开（flex-grow 2.4）后卡片变宽，标题自然回到一行。 */
.acc-item__title {
  white-space: normal;
  overflow-wrap: break-word;
}

/* ---- 91.3 页脚：栏目列按内容自适应宽度，链接不再被挤成两行 ----
   实测（viewport 1422）：原 .footer-cols 三列等宽，末列地址 nowrap 占 397px，
   剩 585-397=188px 给两列 → 每列仅 94px，"Application"(105px) 只能断成 "Applicatio/n"，
   "About Us"/"Get a Quote" 同样折行。
   改法：① 品牌列让出宽度给链接区（1.25/1.35 → 1/1.6）
         ② 前两列改 auto（= 按内容定宽，永不折行）
         ③ 末列地址允许折行，窄屏不撑爆整行（桌面宽度下地址仍是一行）
   校验：1422 宽下前两列 → 93/87px 内容宽，第三列 527px ≥ 地址 396px ✓ 全在一行。
   ⚠⚠ 必须包在 min-width:1201px 里！本块在文件末尾，无媒体查询的规则会【反过来覆盖】
      文件前面 @media (max-width:1200px){ .footer-top{grid-template-columns:1fr} } 和
      @media (max-width:1024px){ .footer-cols{grid-template-columns:1fr} } ——
      结果是手机上页脚不堆叠、三列硬挤（我第一版就踩了，768 宽实测页脚仍是两列）。 */
@media (min-width: 1201px) {
  .footer-top  { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .footer-cols { grid-template-columns: auto auto minmax(0, 1fr); }
  .footer-col:not(:last-child) .footer-col__link { white-space: nowrap; }
  .footer-col:last-child { white-space: normal; }
}

/* ---- 91.4 关于我们「高·精·异」三卡：大字收敛，标签不再和大字叠在一起 ----
   实测（viewport 1422）：.pillar__top 内容区仅 360px；§90 已把 .pillar__char 收到 61.1px，
   但 "Special-shaped" 在 61.1px 下自然宽 450px，加 mono 标签 151px → 放不下，
   弹成 "Special-" / "shaped" 两行并与 "SPECIAL-SHAPES" 重叠。
   改法：① 字号再收到 42px（"Special-shaped" → 317px < 372 ✓ 一行）
         ② .pillar__top 允许换行，放不下时 mono 标签自己掉到第二行，绝不重叠
         ③ mono 始终靠右（margin-left:auto）—— 第 1 张卡 "High" 短、标签留在同一行右侧；
            第 2/3 张卡放不下，标签掉到第二行但仍靠右，三张卡视觉一致 */
main:not(.is-home) .pillar__char { font-size: clamp(30px, 3vw, 42px); }
.pillar__top { flex-wrap: wrap; row-gap: 4px; }
.pillar__mono { margin-left: auto; }

/* ===================== §92  2026-09-30 审查报告 P1 返修配套 =====================
   三卡英文装饰标签由 HIGH-ELECTRICAL 改为 HIGH · Electrical Performance 后文字变长：
   16px / .12em 下会折成两行、与第三卡不齐；15px 下也只剩 0 余量。此处统一微收字号与字距。 */
.pillar__mono {
  font-size: 14px;
  letter-spacing: .04em;
}