/* =============================================================================
   style.css  —  版式 / 组件 / 响应式
   -----------------------------------------------------------------------------
   结构：
     01 RESET & BASE
     02 TYPOGRAPHY & UTILITIES
     03 BUTTONS
     04 HEADER / NAV / MOBILE MENU
     05 HERO
     06 WHAT WE DO
     07 FEATURED PRODUCTS
     08 PRODUCT MODAL
     09 CUSTOMIZATION
     10 MANUFACTURING CAPABILITY
     11 PRODUCTION PROCESS
     12 WHY CHOOSE US + ABOUT
     13 GLOBAL TRADE
     14 FACTORY GALLERY
     15 CTA / CONTACT
     16 FOOTER
     17 THEME SWITCHER (DEV)
     18 BACK TO TOP
     19 RESPONSIVE  (1440 / 1200 / 992 / 768 / 576 / 375)
     20 PRINT

   颜色全部来自 theme.css 的 CSS Variables，本文件不写死颜色。
============================================================================= */

/* =============================================================================
   01 RESET & BASE
============================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}

/* 固定导航的锚点偏移，避免点击导航后被导航栏遮住标题 */
section[id],
[id][data-anchor] {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* 页面主体锁定滚动（移动端菜单 / 弹窗打开时） */
body.is-locked {
  overflow: hidden;
}

/* =============================================================================
   02 TYPOGRAPHY & UTILITIES
============================================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: var(--section-y) 0;
  position: relative;
}
.section--alt {
  background: var(--bg-alt);
}
.section--tight {
  padding: calc(var(--section-y) * 0.68) 0;
}

/* 深色区块（Hero / 制造能力 / CTA / Footer 共用） */
.section--dark {
  background: var(--hero-bg);
  color: var(--hero-text);
}
.section--dark p {
  color: var(--hero-muted);
}

/* 区块标题行：左侧标题 + 右侧引导语（编辑式两栏排版） */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 40px 64px;
  align-items: end;
  margin-bottom: 56px;
}
.section-head__lead {
  font-size: 16px;
  color: var(--text-2);
  max-width: 46ch;
}
.section--dark .section-head__lead {
  color: var(--hero-muted);
}

/* 小标签（uppercase micro label） */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
  flex: none;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--heading);
  font-weight: 600;
}
.section--dark h1,
.section--dark h2,
.section--dark h3 {
  color: var(--hero-text);
}

h1 {
  font-size: clamp(34px, 4.5vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.025em;
}
h2 {
  font-size: clamp(28px, 3.1vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
h3 {
  font-size: 19px;
  line-height: 1.32;
  letter-spacing: -0.01em;
}

.lead {
  font-size: 17px;
  color: var(--text-2);
}

/* 文本链接箭头 */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--heading);
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 3px;
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    gap var(--dur) var(--ease);
}
.text-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  gap: 12px;
}
.section--dark .text-link {
  color: var(--hero-text);
  border-color: var(--hero-border);
}
.section--dark .text-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* 懒加载图片的柔和淡入 */
img[loading="lazy"] {
  background: var(--surface-2);
}

/* 滚动进场动画（轻量，仅位移+透明度） */
.reveal {
  opacity: 0;
  transform: translateY(18px);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}

/* 屏幕阅读器专用 */
.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;
}

/* 分隔线 */
.rule {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 0;
}
.section--dark .rule {
  background: var(--hero-border);
}

/* =============================================================================
   03 BUTTONS
============================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-align: center;
  white-space: nowrap;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.btn:active {
  transform: translateY(1px);
}

/* 主 CTA —— 全站视觉最重的按钮（Request a Quote） */
.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* 次级按钮（浅色背景） */
.btn--outline {
  background: transparent;
  color: var(--heading);
  border-color: var(--border-strong);
}
.btn--outline:hover {
  border-color: var(--heading);
  background: var(--brand-soft);
}

/* 次级按钮（深色背景上） */
.btn--ghost {
  background: transparent;
  color: var(--hero-text);
  border-color: var(--hero-border);
}
.btn--ghost:hover {
  background: var(--hero-surface);
  border-color: var(--hero-text);
}

.btn--block {
  width: 100%;
}
.btn--sm {
  padding: 11px 20px;
  font-size: 13px;
}
.btn--lg {
  padding: 17px 34px;
  font-size: 15px;
}

/* Telegram 专用（品牌蓝，克制使用） */
.btn--tg {
  background: transparent;
  color: var(--heading);
  border-color: var(--border-strong);
}
.btn--tg svg {
  color: #229ED9;
}
.btn--tg:hover {
  border-color: #229ED9;
  background: var(--brand-soft);
}
.section--dark .btn--tg {
  color: var(--hero-text);
  border-color: var(--hero-border);
}
.section--dark .btn--tg:hover {
  border-color: #229ED9;
  background: var(--hero-surface);
}

/* 图标按钮尺寸 */
.btn svg {
  width: 17px;
  height: 17px;
  flex: none;
}

/* =============================================================================
   04 HEADER / NAV / MOBILE MENU
============================================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    color 0.3s var(--ease),
    backdrop-filter 0.3s var(--ease);
}
/* 未滚动状态：压在深色 Hero 上，文字为浅色 */
.site-header .brand__name,
.site-header .nav__list a {
  color: rgba(255, 255, 255, 0.88);
}
.site-header .brand__mark {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.site-header .lang__btn {
  color: rgba(255, 255, 255, 0.62);
}
.site-header .lang__btn.is-active {
  color: #fff;
}
.site-header .lang__sep {
  color: rgba(255, 255, 255, 0.3);
}
.site-header .hamburger span {
  background: #fff;
}
.site-header .nav__list a:hover {
  color: var(--accent);
}

/* 滚动后：实底白色导航 */
.site-header.is-scrolled {
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--border);
}
.site-header.is-scrolled .brand__name,
.site-header.is-scrolled .nav__list a {
  color: var(--heading);
}
.site-header.is-scrolled .brand__mark {
  border-color: var(--border-strong);
  color: var(--heading);
}
.site-header.is-scrolled .lang__btn {
  color: var(--text-3);
}
.site-header.is-scrolled .lang__btn.is-active {
  color: var(--heading);
}
.site-header.is-scrolled .lang__sep {
  color: var(--border-strong);
}
.site-header.is-scrolled .hamburger span {
  background: var(--heading);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--header-h);
}

/* 备案号：只在页脚底部出现（见 16 FOOTER），导航栏不再放 */
.footer__beian {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.footer__beian:hover {
  color: var(--accent);
}

/* LOGO / 品牌区 ===== USER CONFIGURATION（下标文字请改成你的公司简称） ===== */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.brand__mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition:
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.brand__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}

/* ---------------------------------------------------------------------------
   LOGO 图片模式
   SITE_CONFIG.logoImage 有值时，main.js 的 applyLogo() 会给 .brand / .brand__mark
   加上 is-logo 类并把图片放进去。此时：
     · 36×36 的文字方块退化成自适应容器
     · 文字 LOGO（含公司名）整体隐藏，只留图片
     · 尺寸读 --logo-h / --logo-w（main.js 按 logoHeight / logoWidth 写入）
   用 CSS 变量而不是写死 style.height，是为了媒体查询还能在小屏收一档。
--------------------------------------------------------------------------- */
.brand .brand__mark.is-logo {
  width: auto;
  height: auto;
  display: block;
  border: 0;
  background: none;
  line-height: 0; /* 去掉图片下方由行内基线带来的空隙 */
}
/* 高度定死、宽度按原图比例自动；object-fit 防止 logoWidth 与原图比例不符时被拉变形 */
.brand__logo {
  display: block;
  height: var(--logo-h, 40px);
  width: var(--logo-w, auto);
  object-fit: contain;
}
/* 有图片就不再显示文字 LOGO（含公司名） */
.brand.is-logo .brand__name {
  display: none;
}

/* 深色底 / 浅色底各放一张，按所在区域自动切换。
   深色底 = 首屏（未滚动的）导航栏 + 页脚；浅色底 = 滚动后的导航栏 + 移动端菜单。
   默认（浅色底）用深色版。 */
.brand__logo--light {
  display: none;
}
.site-header:not(.is-scrolled) .brand__logo--dark,
.footer__brand .brand__logo--dark {
  display: none;
}
.site-header:not(.is-scrolled) .brand__logo--light,
.footer__brand .brand__logo--light {
  display: block;
}
/* 只配了 logoImage、没配浅色版时：直接把单色 LOGO 反白，省掉再做一份白色图
   （html.brand-logo-monochrome 由 main.js 按配置添加） */
.brand-logo-monochrome .brand__logo--light {
  filter: brightness(0) invert(1);
}

/* 主导航 */
.nav {
  margin-left: auto;
}
.nav__list {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav__list a {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 0;
  transition: color var(--dur) var(--ease);
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width var(--dur) var(--ease);
}
.nav__list a:hover::after,
.nav__list a.is-active::after {
  width: 100%;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: none;
}

/* 语言切换 */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.lang__btn {
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 0;
  color: var(--text-3);
  transition: color var(--dur) var(--ease);
}
.lang__btn.is-active {
  color: var(--heading);
}
.lang__sep {
  opacity: 0.5;
}

/* 汉堡按钮 */
.hamburger {
  display: none;
  width: 40px;
  height: 40px;
  padding: 10px 8px;
  flex-direction: column;
  justify-content: space-between;
}
.hamburger span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--heading);
  transition:
    transform 0.3s var(--ease),
    opacity 0.2s var(--ease),
    background-color var(--dur);
}
.hamburger.is-open span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.hamburger.is-open span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* 移动端菜单面板 */
.mobile-menu {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(88vw, 400px);
  background: var(--bg);
  border-left: 1px solid var(--border);
  z-index: 95;
  display: flex;
  flex-direction: column;
  padding: 20px var(--gutter) 32px;
  transform: translateX(102%);
  transition: transform 0.38s var(--ease);
  overflow-y: auto;
  visibility: hidden;
}
.mobile-menu.is-open {
  transform: none;
  visibility: visible;
}
.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.mobile-menu__head .brand__name {
  color: var(--heading);
}
.mobile-menu__close {
  font-size: 26px;
  line-height: 1;
  padding: 4px 8px;
  color: var(--text-2);
}
.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
}
.mobile-menu__nav a {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--heading);
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
  transition:
    color var(--dur) var(--ease),
    padding-left var(--dur) var(--ease);
}
.mobile-menu__nav a:hover {
  color: var(--accent);
  padding-left: 6px;
}
.mobile-menu__foot {
  margin-top: auto;
  padding-top: 26px;
  display: grid;
  gap: 16px;
}
.mobile-menu__mail {
  font-size: 14px;
  color: var(--text-2);
  word-break: break-all;
}
.menu-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: 94;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s var(--ease),
    visibility 0.3s var(--ease);
}
.menu-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

/* =============================================================================
   05 HERO
============================================================================= */
.hero {
  position: relative;
  background: var(--hero-bg);
  color: var(--hero-text);
  overflow: hidden;
}
/* 细腻的网格底纹，替代廉价的渐变动画 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--hero-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hero-border) 1px, transparent 1px);
  background-size: 84px 84px;
  opacity: 0.35;
  mask-image: radial-gradient(120% 90% at 72% 30%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(
    120% 90% at 72% 30%,
    #000 0%,
    transparent 72%
  );
  pointer-events: none;
}
/* 右侧柔光，把视觉焦点推向产品图 */
.hero::after {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 62%;
  height: 120%;
  background: radial-gradient(
    closest-side,
    var(--hero-bg-2) 0%,
    transparent 78%
  );
  opacity: 0.9;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: 60px;
  align-items: center;
  padding-top: calc(var(--header-h) + 84px);
  padding-bottom: 92px;
}

.hero .eyebrow {
  color: var(--accent);
}
.hero__title {
  color: var(--hero-text);
  max-width: 15ch;
}
.hero__sub {
  margin-top: 26px;
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.6;
  color: var(--hero-muted);
  max-width: 52ch;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

/* Hero 底部 4 条中性卖点（不涉及任何虚构数据） */
.hero__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 28px;
  margin-top: 46px;
  padding-top: 28px;
  border-top: 1px solid var(--hero-border);
  max-width: 560px;
}
.hero__points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--hero-muted);
}
.hero__points svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

/* Hero 右侧视觉 */
.hero__media {
  position: relative;
}
.hero__frame {
  position: relative;
  aspect-ratio: 4 / 3.4;
  overflow: hidden;
  background: var(--hero-surface);
  border: 1px solid var(--hero-border);
}
.hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 左上角金色角标，增加「工业感」细节 */
.hero__frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 54px;
  height: 54px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  z-index: 3;
}

/* Hero 图片上的小卡片 */
.hero__card {
  position: absolute;
  left: -28px;
  bottom: 32px;
  width: min(300px, 82%);
  padding: 22px 24px;
  background: var(--bg);
  color: var(--text);
  border-left: 2px solid var(--accent);
  box-shadow: var(--shadow-lg);
}
.hero__card-num {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 8px;
}
.hero__card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
}

/* =============================================================================
   06 WHAT WE DO
============================================================================= */
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.card-biz {
  display: flex;
  flex-direction: column;
  padding: 36px 32px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition:
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.card-biz:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.card-biz__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
}
.card-biz__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  color: var(--accent);
  background: var(--surface-2);
}
.card-biz__icon svg {
  width: 21px;
  height: 21px;
}
.card-biz__num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-3);
}
.card-biz__title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--heading);
}
.card-biz__desc {
  margin-top: 12px;
  font-size: 15px;
  color: var(--text-2);
  flex: 1;
}
.card-biz .text-link {
  margin-top: 26px;
  align-self: flex-start;
}

/* =============================================================================
   07 FEATURED PRODUCTS
============================================================================= */
.products__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 34px;
}
.products__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.products__count {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-3);
  white-space: nowrap;
}
.filter-btn {
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  transition: all var(--dur) var(--ease);
}
.filter-btn:hover {
  color: var(--heading);
  border-color: var(--border-strong);
}
.filter-btn.is-active {
  background: var(--brand);
  color: var(--on-brand);
  border-color: var(--brand);
}

.products__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.pcard {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition:
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.pcard:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.pcard__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-2);
}
.pcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.pcard:hover .pcard__media img {
  transform: scale(1.035);
}
.pcard__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--bg);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.pcard__body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pcard__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--heading);
}
.pcard__desc {
  margin-top: 9px;
  font-size: 14px;
  color: var(--text-2);
  flex: 1;
}
.pcard__foot {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.pcard__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--heading);
  transition:
    color var(--dur) var(--ease),
    gap var(--dur) var(--ease);
}
.pcard__more svg {
  width: 15px;
  height: 15px;
}
.pcard:hover .pcard__more {
  color: var(--accent);
  gap: 12px;
}

.products__empty {
  grid-column: 1 / -1;
  padding: 56px 0;
  text-align: center;
  font-size: 15px;
  color: var(--text-3);
}

/* =============================================================================
   08 PRODUCT MODAL（产品详情弹窗 —— 纯前端，无后台）
============================================================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--overlay);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.26s var(--ease),
    visibility 0.26s var(--ease);
}
.modal.is-open {
  opacity: 1;
  visibility: visible;
}
.modal__panel {
  position: relative;
  width: min(980px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateY(14px);
  transition: transform 0.3s var(--ease);
}
.modal.is-open .modal__panel {
  transform: none;
}
.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-2);
  transition: all var(--dur) var(--ease);
}
.modal__close:hover {
  color: var(--heading);
  border-color: var(--heading);
}
.modal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.modal__media {
  background: var(--surface-2);
  aspect-ratio: 4 / 3.6;
}
.modal__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.modal__body {
  padding: 40px 38px;
}
.modal__cat {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.modal__title {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 600;
  color: var(--heading);
}
.modal__desc {
  margin-top: 14px;
  font-size: 15px;
  color: var(--text-2);
}
.modal__specs {
  margin-top: 26px;
  border-top: 1px solid var(--border);
}
.modal__specs li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.modal__specs dt,
.modal__specs .k {
  color: var(--text-2);
}
.modal__specs .v {
  color: var(--heading);
  font-weight: 500;
  text-align: right;
}
.modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* =============================================================================
   08b LIGHTBOX —— 工厂实景点击放大
   结构在 index.html，交互在 main.js 的 initLightbox()
============================================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 130; /* 压在产品弹窗（120）之上 */
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--overlay);
  /* 把背后的页面虚化掉，照片才是主角（跟随主题色，不写死颜色） */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.26s var(--ease),
    visibility 0.26s var(--ease);
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
/* 缩到图片实际宽度，这样底部说明条正好和图片一样宽 */
.lightbox__stage {
  position: relative;
  line-height: 0;
  margin: 0; /* figure 默认 margin 必须清掉 */
  max-width: min(1180px, 100%);
  max-height: 100%;
  transform: translateY(14px);
  transition: transform 0.3s var(--ease);
}
.lightbox.is-open .lightbox__stage {
  transform: none;
}
.lightbox__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 96px);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.lightbox__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 34px 16px 14px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.lightbox__count {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0.75;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover {
  color: var(--heading);
  border-color: var(--heading);
}
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.lightbox__nav svg {
  width: 20px;
  height: 20px;
}
.lightbox__close {
  top: 18px;
  right: 18px;
}
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__nav--prev {
  left: 18px;
}
.lightbox__nav--next {
  right: 18px;
}

/* =============================================================================
   09 CUSTOMIZATION
============================================================================= */
/* 能力标签（OEM / ODM / Private Label ...） */
.cap-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  margin-bottom: 72px;
}
.cap-list li {
  padding: 26px 26px 28px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  transition: background-color var(--dur) var(--ease);
}
.cap-list li:hover {
  background: var(--surface-2);
}
.cap-list__title {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--heading);
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}
.cap-list__desc {
  font-size: 14px;
  color: var(--text-2);
}

/* 横向 4 步流程 */
.steps-4 {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.steps-4::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}
.step {
  position: relative;
  padding-top: 60px;
}
.step__dot {
  position: absolute;
  top: 12px;
  left: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  font-size: 0;
}
.step__dot::after {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--accent);
}
.step__num {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-3);
  margin-bottom: 10px;
}
.step__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--heading);
}
.step__desc {
  margin-top: 10px;
  font-size: 14px;
  color: var(--text-2);
}

/* =============================================================================
   10 MANUFACTURING CAPABILITY（深色区块）
============================================================================= */
.stats-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--hero-border);
  border-left: 1px solid var(--hero-border);
}
.stat {
  padding: 32px 28px 30px;
  border-right: 1px solid var(--hero-border);
  border-bottom: 1px solid var(--hero-border);
}
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--accent);
  word-break: break-word;
}
.stat__label {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: var(--hero-muted);
}
.stat__note {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-3);
  opacity: 0.8;
}

/* =============================================================================
   11 PRODUCTION PROCESS
============================================================================= */
.flow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.flow__item {
  position: relative;
  overflow: hidden;
  padding: 28px 22px 30px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  transition: background-color var(--dur) var(--ease);
}
.flow__item:hover {
  background: var(--surface-2);
}
.flow__num {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 28px;
}
/* 每道工序的图标：作为卡片背景，贴在右上角半透明显示（纯装饰，不参与布局）。
   尺寸和字号按「图标底部不压到标题首行」来配：padding 28 + 序号行 18 + 下间距 28 = 标题从 y=74 开始，
   图标 top 12 + 高 56 = 到 y=68 结束，留 6px 安全距。 */
.flow__icon {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: var(--brand);
  opacity: 0.09;
  pointer-events: none;
  transition:
    opacity var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.flow__icon svg {
  width: 100%;
  height: 100%;
  /* 图标从 24px 放大到 56px，原始 1.6 的描边会被放大成 3.7px 显得过重，这里压细。
     CSS 规则的优先级高于 SVG 表现属性，所以能覆盖 svg 标签上的 stroke-width="1.6" */
  stroke-width: 1.15;
}
.flow__item:hover .flow__icon {
  opacity: 0.2;
  color: var(--accent);
}
.flow__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--heading);
}
.flow__desc {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}

/* =============================================================================
   12 WHY CHOOSE US + ABOUT
============================================================================= */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 40px;
}
.why__num {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.why__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--heading);
}
.why__desc {
  margin-top: 9px;
  font-size: 14px;
  color: var(--text-2);
}

/* About 条带 */
.about-band {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 32px 64px;
  align-items: start;
  margin-top: 84px;
  padding-top: 48px;
  border-top: 1px solid var(--border);
}
.about-band__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--heading);
  letter-spacing: -0.015em;
}
/* About 正文：多段排版（p1 / p2 / p4 正文，p3 品牌主张，p5 收尾句） */
.about-band__copy {
  max-width: 64ch;
}
.about-band__copy > p {
  margin: 0;
}
.about-band__copy > p + p {
  margin-top: 16px;
}
.about-band__body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-2);
}
/* 品牌主张句（第 3 段）：做成引文样式，左侧一条强调色竖线 */
.about-band__copy > .about-band__claim {
  margin-top: 26px;
  padding-left: 18px;
  border-left: 3px solid var(--accent);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--heading);
}
/* 收尾句（第 5 段）：用一条细分隔线与正文分开并加重 */
.about-band__copy > .about-band__closing {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.65;
  color: var(--brand);
}
.about-band .text-link {
  margin-top: 24px;
}

/* =============================================================================
   13 GLOBAL TRADE
============================================================================= */
.trade {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 64px;
  align-items: center;
}
.trade__visual {
  position: relative;
}
.trade__svg {
  width: 100%;
  height: auto;
  color: var(--border-strong);
}
.trade__svg .globe-line {
  stroke: currentColor;
  fill: none;
  stroke-width: 1;
}
.trade__svg .globe-route {
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.2;
  stroke-dasharray: 5 7;
  animation: dash 22s linear infinite;
}
.trade__svg .globe-node {
  fill: var(--accent);
}
.trade__svg .globe-node--soft {
  fill: var(--text-3);
  opacity: 0.55;
}
@keyframes dash {
  to {
    stroke-dashoffset: -240;
  }
}

.trade__caption {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
}

.regions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  margin-bottom: 40px;
}
.regions li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--heading);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.regions li::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--accent);
  flex: none;
}

.services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 28px;
}
.services__item h3 {
  font-size: 15px;
}
.services__item p {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--text-2);
}

/* =============================================================================
   14 FACTORY GALLERY
   版式图（桌面端 4 列 × 4 行）—— 16 格全部占满，底边自然齐平，不留空洞：
     r1  a a b c
     r2  a a d c
     r3  e f g h
     r4  i j k h
   字母对应 index.html 里的 gallery__item--a…--k。
   只换照片的话改 src 就行；要增删照片，必须同步改下面的 grid-template-areas
   （以及 768px / 576px 两个断点里的同名版式图），否则又会出现空格。
============================================================================= */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 200px;
  gap: 14px;
  grid-template-areas:
    "a a b c"
    "a a d c"
    "e f g h"
    "i j k h";
}
/* 注意：<figure> 自带浏览器默认样式 margin: 1em 40px。
   不清掉的话每张图会缩在格子里 —— 横缝比竖缝宽一大截、底部也对不齐。
   这一行是「填满 + 底部对齐」的关键。 */
.gallery__item {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.gallery__item--a {
  grid-area: a;
}
.gallery__item--b {
  grid-area: b;
}
.gallery__item--c {
  grid-area: c;
}
.gallery__item--d {
  grid-area: d;
}
.gallery__item--e {
  grid-area: e;
}
.gallery__item--f {
  grid-area: f;
}
.gallery__item--g {
  grid-area: g;
}
.gallery__item--h {
  grid-area: h;
}
.gallery__item--i {
  grid-area: i;
}
.gallery__item--j {
  grid-area: j;
}
.gallery__item--k {
  grid-area: k;
}
/* 整张照片就是一个按钮 —— 鼠标点、键盘 Enter 都能打开大图 */
.gallery__btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: zoom-in;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.6s var(--ease),
    opacity var(--dur) var(--ease);
}
.gallery__item:hover img {
  transform: scale(1.05);
}
/* 键盘聚焦：轮廓给到整格（按钮自带轮廓会被裁掉，所以去掉） */
.gallery__btn:focus-visible {
  outline: none;
}
.gallery__item:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* 右上角「可放大」角标 */
.gallery__item::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  background: rgba(0, 0, 0, 0.55)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.7-3.7M11 8.4v5.2M8.4 11h5.2'/%3E%3C/svg%3E")
    center / 16px 16px no-repeat;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
  pointer-events: none;
}
.gallery__item:hover::after,
.gallery__item:focus-within::after {
  opacity: 1;
  transform: none;
}
.gallery__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 16px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* =============================================================================
   15 CTA / CONTACT
============================================================================= */
.cta {
  background: var(--hero-bg);
  color: var(--hero-text);
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -10%;
  width: 60%;
  height: 140%;
  background: radial-gradient(
    closest-side,
    var(--hero-bg-2) 0%,
    transparent 76%
  );
  pointer-events: none;
}
.cta__inner {
  position: relative;
  z-index: 2;
}

.cta__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 64px;
}
.cta__title {
  color: var(--hero-text);
}
.cta__sub {
  margin-top: 18px;
  font-size: 17px;
  color: var(--hero-muted);
  max-width: 44ch;
}
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-end;
}

/* 联系信息三条 */
.contact-lines {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hero-border);
  border-left: 1px solid var(--hero-border);
  margin-bottom: 56px;
}
.contact-line {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  border-right: 1px solid var(--hero-border);
  border-bottom: 1px solid var(--hero-border);
  transition: background-color var(--dur) var(--ease);
}
.contact-line:hover {
  background: var(--hero-surface);
}
.contact-line svg {
  width: 19px;
  height: 19px;
  color: var(--accent);
  flex: none;
}
.contact-line__label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hero-muted);
}
.contact-line__value {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--hero-text);
  word-break: break-word;
}

/* mailto 报价表单 */
.quote-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 36px;
  background: var(--hero-surface);
  border: 1px solid var(--hero-border);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field--full {
  grid-column: 1 / -1;
}
.field label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hero-muted);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 13px 14px;
  font-size: 15px;
  color: var(--hero-text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hero-border);
  border-radius: var(--radius);
  transition:
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}
.field textarea {
  resize: vertical;
  min-height: 118px;
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(255, 255, 255, 0.38);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.07);
}
.field select option {
  color: #111;
  background: #fff;
}

.form__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 6px;
}
.form__note {
  font-size: 12.5px;
  color: var(--hero-muted);
  max-width: 52ch;
}
.form__status {
  grid-column: 1 / -1;
  font-size: 14px;
  color: var(--accent);
  min-height: 20px;
}

/* =============================================================================
   16 FOOTER
============================================================================= */
.site-footer {
  background: var(--hero-bg);
  color: var(--hero-muted);
  border-top: 1px solid var(--hero-border);
  padding: 72px 0 0;
  font-size: 14px;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 56px;
}
.footer__brand .brand__name {
  color: var(--hero-text);
  font-size: 16px;
}
.footer__brand .brand__mark {
  border-color: var(--hero-border);
  color: var(--hero-text);
}
.footer__about {
  margin-top: 20px;
  max-width: 36ch;
  line-height: 1.7;
}
.footer__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hero-text);
  margin-bottom: 18px;
}
.footer__list {
  display: grid;
  gap: 11px;
}
.footer__list a {
  transition: color var(--dur) var(--ease);
  word-break: break-word;
}
.footer__list a:hover {
  color: var(--accent);
}

/* 页脚联系方式：图标 + label + 值（三行结构，和 CTA 区块的 contact-line 一致） */
.footer__list--contact {
  gap: 16px;
}
.footer__list--contact li > a,
.footer__list--contact .footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.footer__list--contact svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
  color: var(--accent);
}
.footer__label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 3px;
}
.footer__value {
  display: block;
  word-break: break-word;
}
/* 底部一行三列：版权贴左 | 备案号居中 | 回到顶部贴右。
   左右两列都是 minmax(0,1fr) 且等宽，所以中间 auto 列的圆心永远落在整行中点上；
   备案号留空被隐藏时 auto 列塌成 0 宽，左右两项仍各贴一边。 */
.footer__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px 20px;
  padding: 22px 0 26px;
  border-top: 1px solid var(--hero-border);
  font-size: 13px;
}
.footer__bottom > p {
  grid-column: 1;
  margin: 0;
}
.footer__beian-row {
  grid-column: 2;
  text-align: center;
}
.footer__bottom-links {
  grid-column: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 22px;
}
.footer__bottom a:hover {
  color: var(--accent);
}

/* =============================================================================
   17 THEME SWITCHER (DEV ONLY)
   —— 生产环境把 SITE_CONFIG.enableThemeSwitcher 设为 false 即可隐藏
============================================================================= */
.theme-dock {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 130;
}
.theme-dock__toggle {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--heading);
  color: var(--bg);
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur) var(--ease);
}
.theme-dock__toggle:hover {
  transform: scale(1.06);
}
.theme-dock__toggle svg {
  width: 19px;
  height: 19px;
}
.theme-panel {
  position: absolute;
  right: 0;
  bottom: 56px;
  width: 226px;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.22s var(--ease),
    visibility 0.22s var(--ease),
    transform 0.22s var(--ease);
}
.theme-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.theme-panel__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}
.theme-swatch {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  font-size: 13px;
  color: var(--text-2);
  border: 1px solid transparent;
  text-align: left;
  transition: all var(--dur) var(--ease);
}
.theme-swatch:hover {
  background: var(--surface-2);
  color: var(--heading);
}
.theme-swatch.is-active {
  border-color: var(--border-strong);
  color: var(--heading);
  background: var(--surface-2);
}
.theme-swatch__chip {
  width: 26px;
  height: 18px;
  flex: none;
  display: flex;
  border: 1px solid rgba(0, 0, 0, 0.14);
  overflow: hidden;
}
.theme-swatch__chip i {
  flex: 1;
  display: block;
}

/* =============================================================================
   18 BACK TO TOP
============================================================================= */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 76px;
  z-index: 88;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--dur) var(--ease);
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.to-top:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.to-top svg {
  width: 17px;
  height: 17px;
}

/* =============================================================================
   19 RESPONSIVE
============================================================================= */

/* ---------- 1440px ---------- */
@media (max-width: 1440px) {
  :root {
    --container: 1180px;
  }
}

/* ---------- 1200px ---------- */
@media (max-width: 1200px) {
  :root {
    --section-y: 88px;
    --gutter: 22px;
  }
  .hero__inner {
    gap: 44px;
  }
  .nav__list {
    gap: 22px;
  }
  .header__inner {
    gap: 22px;
  }
  .footer__grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

/* ---------- 992px：平板，导航折叠为汉堡菜单 ---------- */
@media (max-width: 992px) {
  :root {
    --section-y: 72px;
    --header-h: 68px;
  }

  .nav {
    display: none;
  }
  .hamburger {
    display: flex;
  }
  .header__cta {
    display: none;
  }
  .header__inner {
    justify-content: space-between;
  }
  .header__actions {
    margin-left: auto;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding-top: calc(var(--header-h) + 56px);
    padding-bottom: 68px;
  }
  .hero__title {
    max-width: 18ch;
  }
  .hero__card {
    left: 16px;
    bottom: 16px;
  }
  .hero__frame {
    aspect-ratio: 16 / 10;
  }

  .section-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 40px;
  }

  .cards-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cap-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 56px;
  }
  .steps-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
  }
  .steps-4::before {
    display: none;
  }
  .step {
    padding-top: 46px;
  }

  .stats-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 32px;
  }
  .about-band {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin-top: 60px;
    padding-top: 40px;
  }

  /* About 多段正文在窄屏收一档字号与间距 */
  .about-band__copy > .about-band__claim {
    margin-top: 22px;
    padding-left: 14px;
    font-size: 18px;
  }
  .about-band__copy > .about-band__closing {
    margin-top: 22px;
    padding-top: 18px;
    font-size: 16px;
  }

  .trade {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  .gallery {
    grid-auto-rows: 170px;
  }

  .cta__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-bottom: 48px;
  }
  .cta__actions {
    justify-content: flex-start;
  }
  .contact-lines {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .quote-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 28px;
  }

  .modal__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .modal__media {
    aspect-ratio: 16 / 9;
  }
  .modal__body {
    padding: 30px 26px;
  }

  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px;
  }
}

/* ---------- 768px ---------- */
@media (max-width: 768px) {
  :root {
    --section-y: 64px;
    --gutter: 20px;
  }
  body {
    font-size: 15.5px;
  }

  .cards-3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .steps-4 {
    grid-template-columns: minmax(0, 1fr);
  }
  .why-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 160px;
    gap: 12px;
    /* 与桌面端同一套版式图，只是改成两列 */
    grid-template-areas:
      "a a"
      "a a"
      "b c"
      "d c"
      "e f"
      "g h"
      "i j"
      "k k";
  }

  /* 图片变窄后按钮挪到画面内侧一点，别顶到边上 */
  .lightbox {
    padding: 16px;
  }
  .lightbox__nav--prev {
    left: 10px;
  }
  .lightbox__nav--next {
    right: 10px;
  }
  .lightbox__close {
    top: 10px;
    right: 10px;
  }

  .quote-form {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px;
  }
  .field--span2 {
    grid-column: 1 / -1;
  }
  .contact-lines {
    grid-template-columns: minmax(0, 1fr);
  }
  .services {
    grid-template-columns: minmax(0, 1fr);
  }
  .regions {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__points {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 34px;
  }
  .hero__card {
    position: static;
    width: 100%;
    margin-top: 14px;
    box-shadow: var(--shadow-md);
  }

  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-bottom: 40px;
  }
}

/* ---------- 576px ---------- */
@media (max-width: 576px) {
  :root {
    --section-y: 56px;
    --gutter: 18px;
    --header-h: 64px;
  }

  .brand__name {
    font-size: 13.5px;
    letter-spacing: 0.03em;
  }
  .brand__mark {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  /* LOGO 图片在小屏收一档（导航栏高度同时从 76 收到 64） */
  .brand__logo {
    height: calc(var(--logo-h, 40px) * 0.8);
  }

  h1 {
    font-size: clamp(28px, 8.4vw, 38px);
  }
  h2 {
    font-size: clamp(24px, 7vw, 30px);
  }

  .hero__actions .btn {
    flex: 1 1 100%;
  }
  .hero__frame {
    aspect-ratio: 4 / 3;
  }
  .hero__frame::before {
    width: 40px;
    height: 40px;
  }

  .products__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .stats-4 {
    grid-template-columns: minmax(0, 1fr);
  }
  .flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cap-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .gallery {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 190px;
    /* 单列：一张一行，顺序直接照版式图 a→k */
    grid-template-areas:
      "a"
      "b"
      "c"
      "d"
      "e"
      "f"
      "g"
      "h"
      "i"
      "j"
      "k";
  }

  .lightbox__close,
  .lightbox__nav {
    width: 38px;
    height: 38px;
    font-size: 22px;
  }
  .lightbox__img {
    max-height: calc(100vh - 120px);
  }

  .card-biz {
    padding: 28px 24px 26px;
  }
  .cta__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cta__actions .btn {
    width: 100%;
  }
  .form__foot {
    flex-direction: column;
    align-items: stretch;
  }
  .form__foot .btn {
    width: 100%;
  }

  .modal {
    padding: 12px;
  }
  .modal__panel {
    max-height: calc(100vh - 24px);
  }
  .modal__body {
    padding: 24px 20px;
  }
  .modal__title {
    font-size: 22px;
  }
  .modal__actions .btn {
    width: 100%;
  }
}

/* ---------- 375px：小屏手机，重点保障不溢出 ---------- */
@media (max-width: 375px) {
  :root {
    --gutter: 15px;
    --section-y: 48px;
  }

  body {
    font-size: 15px;
    line-height: 1.6;
  }

  .brand__name {
    font-size: 12.5px;
  }
  .header__inner {
    gap: 12px;
  }
  .lang {
    font-size: 12px;
    gap: 6px;
  }

  h1 {
    font-size: 26px;
    line-height: 1.12;
  }
  h2 {
    font-size: 22px;
  }
  h3 {
    font-size: 17px;
  }

  .eyebrow {
    font-size: 11px;
    letter-spacing: 0.14em;
    margin-bottom: 14px;
  }
  .hero__sub {
    font-size: 15px;
  }
  .hero__points li {
    font-size: 13px;
  }
  .hero__card {
    padding: 18px 18px;
  }

  .btn {
    padding: 14px 20px;
    font-size: 13.5px;
    white-space: normal;
  }
  .btn--lg {
    padding: 15px 22px;
    font-size: 14px;
  }

  .card-biz__title {
    font-size: 19px;
  }
  .stat__value {
    font-size: 22px;
  }
  .flow__item {
    padding: 22px 16px 24px;
  }
  .flow__num {
    margin-bottom: 18px;
  }
  .flow__icon {
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
  }
  .quote-form {
    padding: 20px 16px;
    gap: 14px;
  }
  .mobile-menu {
    width: 100%;
  }

  .contact-line {
    padding: 18px 16px;
    gap: 11px;
  }
  /* 窄屏放不下「左-中-右」三列，退化为三行居中，备案号仍在中间 */
  .footer__bottom {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 10px;
    font-size: 12px;
    text-align: center;
  }
  .footer__bottom > p,
  .footer__beian-row,
  .footer__bottom-links {
    grid-column: 1;
  }
  .footer__bottom-links {
    justify-content: center;
  }
}

/* =============================================================================
   20 PRINT
============================================================================= */
@media print {
  .site-header,
  .mobile-menu,
  .menu-backdrop,
  .theme-dock,
  .to-top,
  .modal {
    display: none !important;
  }
  body {
    color: #000;
    background: #fff;
  }
  .section {
    padding: 24px 0;
  }
}

/* =============================================================================
   ===== 产品图：首页杂志式拼贴 + gallery.html 无限滚动画廊 =====
   图片清单见 products-data.js（由 build-products.js 从 asset/product 生成）
============================================================================= */

/* ---------------------------------------------------------------------------
   01  首页拼贴 —— 5 列 × 6 行版式图，共 20 格
   a / g = 2×2 大图，c / k = 1×2 竖图，b / d = 2×1 横图，其余为单格
   行高由 product-gallery.js 按容器实测宽度写进 --cell，保证每格都是正方形
   （原图就是 800×800，正方形格 + object-fit:cover 不裁不糊）
--------------------------------------------------------------------------- */
.p-collage {
  --cell: 210px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(6, var(--cell));
  gap: 14px;
  grid-template-areas:
    "a a b b c"
    "a a d d c"
    "e f g g h"
    "i j g g k"
    "l m n o k"
    "p q r s t";
}
.p-collage > * {
  min-width: 0;
  min-height: 0;
}
.p-a { grid-area: a; }
.p-b { grid-area: b; }
.p-c { grid-area: c; }
.p-d { grid-area: d; }
.p-e { grid-area: e; }
.p-f { grid-area: f; }
.p-g { grid-area: g; }
.p-h { grid-area: h; }
.p-i { grid-area: i; }
.p-j { grid-area: j; }
.p-k { grid-area: k; }
.p-l { grid-area: l; }
.p-m { grid-area: m; }
.p-n { grid-area: n; }
.p-o { grid-area: o; }
.p-p { grid-area: p; }
.p-q { grid-area: q; }
.p-r { grid-area: r; }
.p-s { grid-area: s; }
.p-t { grid-area: t; }

/* 单格外观：拼贴与画廊共用 */
.p-tile,
.pg-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
  animation: ppm-in 0.5s var(--ease) both;
}
.p-tile__btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.p-tile__btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.p-tile:hover .p-tile__btn img,
.pg-tile:hover .p-tile__btn img {
  transform: scale(1.05);
}
/* 悬停压一层渐变，暗示「可点开放大」 */
.p-tile::after,
.pg-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 14, 26, 0.34), transparent 42%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.p-tile:hover::after,
.pg-tile:hover::after,
.p-tile:focus-within::after,
.pg-tile:focus-within::after {
  opacity: 1;
}
.p-tile:focus-within,
.pg-tile:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@keyframes ppm-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-tile,
  .pg-tile {
    animation: none;
  }
  .p-tile__btn img {
    transition: none;
  }
}

/* 拼贴下方的「查看全部」——首页最醒目的入口 */
.ppm-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 52px;
  text-align: center;
}
.ppm-cta__count {
  font-size: 15px;
  color: var(--text-2);
  margin: 0;
}
.ppm-cta__count strong {
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}
.ppm-cta .btn--lg {
  padding-inline: 44px;
}
/* 一圈呼吸光环，视线扫过很难错过 */
.ppm-cta .btn--primary {
  position: relative;
  box-shadow: 0 12px 32px rgba(192, 154, 69, 0.3);
}
.ppm-cta .btn--primary::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 1px solid var(--accent);
  animation: ppm-pulse 2.6s var(--ease) infinite;
  pointer-events: none;
}
.ppm-cta .btn--primary:hover::after {
  animation-play-state: paused;
  opacity: 0;
}
@keyframes ppm-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.045);
    opacity: 0.05;
  }
}

/* ---------------------------------------------------------------------------
   02  画廊页（gallery.html）—— 无限滚动 + 懒加载
--------------------------------------------------------------------------- */
.pg-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.pg-status {
  font-size: 14px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.pg-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.pg-tile {
  aspect-ratio: 1 / 1;
  min-width: 0;
}
.pg-sentinel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
}
.pg-sentinel[hidden],
.pg-end[hidden] {
  display: none;
}
.pg-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  animation: pg-spin 0.8s linear infinite;
}
@keyframes pg-spin {
  to {
    transform: rotate(360deg);
  }
}
.pg-end {
  padding: 44px 0 6px;
  text-align: center;
  font-size: 14px;
  color: var(--text-3);
}

/* ---------------------------------------------------------------------------
   03  响应式
--------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .pg-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
/* 拼贴：≤900px 放弃版式图，退化为等宽方阵（仍是大图，只是不再错落） */
@media (max-width: 900px) {
  .p-collage {
    grid-template-areas: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 12px;
  }
  .p-collage > * {
    grid-area: auto !important;
    aspect-ratio: 1 / 1;
  }
  .pg-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .ppm-cta {
    margin-top: 40px;
  }
  .ppm-cta .btn--lg {
    width: 100%;
    max-width: 340px;
  }
  .pg-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
}
@media (max-width: 560px) {
  .p-collage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .pg-bar {
    justify-content: center;
  }
  .pg-status {
    width: 100%;
    text-align: center;
  }
}
@media (max-width: 375px) {
  .pg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

/* 画廊页：正文从固定导航下方开始（首页由 Hero 撑开，子页面得自己留白） */
.page-photos {
  padding-top: calc(var(--header-h) + 8px);
}

/* ---------------------------------------------------------------------------
   子页面（无深色 Hero）：导航栏从头就是「实底」样式
   默认的 .site-header 是透明底 + 白字，靠压深色 Hero 才看得见；
   子页面是白底，必须换成实底白底 + 深色文字/图标/LOGO，否则白底白字看不见。
   与 .site-header.is-scrolled 同一套视觉；这里由 body.page-sub 静态生效，
   JS 尚未执行时也不会先闪一下白字。main.js 的 initHeader 也会兜底补 .is-scrolled。
--------------------------------------------------------------------------- */
body.page-sub .site-header {
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--border);
}
body.page-sub .site-header .brand__name,
body.page-sub .site-header .nav__list a {
  color: var(--heading);
}
body.page-sub .site-header .brand__mark {
  border-color: var(--border-strong);
  color: var(--heading);
}
body.page-sub .site-header .lang__btn {
  color: var(--text-3);
}
body.page-sub .site-header .lang__btn.is-active {
  color: var(--heading);
}
body.page-sub .site-header .lang__sep {
  color: var(--border-strong);
}
body.page-sub .site-header .hamburger span {
  background: var(--heading);
}
/* 浅色底 → 用深色版 LOGO（单色图由 html.brand-logo-monochrome 反白规则处理） */
body.page-sub .site-header .brand__logo--dark {
  display: block;
}
body.page-sub .site-header .brand__logo--light {
  display: none;
}

/* 子页面的区块标题是 H1（每页必须有且仅有一个 H1），
   但视觉上要与首页的 H2 区块标题保持一致 —— 这里把 H1 的尺寸压回 H2 的档位 */
.section-head h1,
.pg-title {
  font-size: clamp(28px, 3.1vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
@media (max-width: 992px) {
  .section-head h1,
  .pg-title {
    font-size: clamp(24px, 7vw, 30px);
  }
}
@media (max-width: 576px) {
  .section-head h1,
  .pg-title {
    font-size: 22px;
  }
}

/* 画廊页底部：看完全部产品图后的询价入口 */
.pg-cta {
  margin-top: 40px;
  text-align: center;
}
@media (max-width: 768px) {
  .pg-cta .btn--lg {
    width: 100%;
    max-width: 340px;
  }
}