:root {
  --paper: #ffffff;
  --wash: #f6f8fb;
  --ink: #0b1b33;
  --body: #44536b;
  --muted: #8493a9;
  --blue: #084693;
  --blue-deep: #063674;
  
  --blue-tint: #e9f0fa;
  --line: #e5eaf2;

  --font: "Figtree", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --site: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  /* 抽屉导航的列间距：栏目列与底部图片条共用同一个值，保证两者左右边缘严格对齐 */
  --drawer-gap: clamp(20px, 2.4vw, 40px);
  --radius: 14px;
  --ease: cubic-bezier(0.22, 0.68, 0.32, 1);

  /* 顶部固定区高度：公告条（--topbar-h，JS 按实际渲染高度同步）+ 头部收起态（--header-h） */
  --topbar-h: 30px;
  --header-h: 62px;
}


*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  overflow-x: hidden;
  /* 锚点跳转 / 页内定位时，自动让出「固定公告条 + 固定头部」的高度 */
  scroll-padding-top: calc(var(--topbar-h) + var(--header-h) + 18px);
}

/* 抽屉 / 搜索展开时锁滚动：只拦输入，不动布局，顶部固定区不受影响 */
html.is-scroll-locked {
  overscroll-behavior: none;
}




[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  max-width: var(--site);
  margin: 0 auto;
  padding-inline: var(--gutter);
}


.kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}

.kicker--lined {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.kicker--lined::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: 4px;
  border-radius: 2px;
  background: var(--blue);
}

.section-title {
  font-size: clamp(34px, 4.6vw, 58px);
  font-weight: 700;
}

.section-sub {
  max-width: 560px;
  margin-top: 18px;
  font-size: 17px;
  color: var(--body);
}


.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.35s var(--ease), background-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
  border-radius: inherit;
  z-index: 0;
}

.btn>* {
  position: relative;
  z-index: 1;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:hover::after {
  transform: translateY(0);
}

.btn:active {
  transform: translateY(0);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
}

.btn--ghost::after {
  background: var(--blue);
}

.btn--ghost:hover {
  color: #fff;
  box-shadow: inset 0 0 0 1.5px var(--blue);
}

.btn--light {
  background: #fff;
  color: var(--ink);
}

.btn--light::after {
  background: var(--blue);
}

.btn--light:hover {
  color: #fff;
}


.header {
  position: sticky;
  top: var(--topbar-h, 30px);
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 30px rgba(11, 27, 51, 0.06);
}

.header__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 76px;
  transition: height 0.3s var(--ease);
}


.header .header__grid {
  max-width: none;
  margin: 0;
  padding-inline: clamp(14px, 2vw, 28px);
}

.header .logo {
  justify-self: center;
}

.header.is-scrolled .header__grid {
  height: 62px;
}

.header__burger {
  justify-self: start;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  transition: background-color 0.25s var(--ease);
}

.header__burger:hover {
  background: var(--wash);
}

.header__burger .bars {
  position: relative;
  width: 22px;
  height: 14px;
}

.header__burger .bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.8px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.35s var(--ease), width 0.35s var(--ease), top 0.35s var(--ease);
}

.header__burger .bars i:nth-child(1) {
  top: 0;
}

.header__burger .bars i:nth-child(2) {
  top: 6px;
  width: 70%;
}

.header__burger .bars i:nth-child(3) {
  top: 12px;
}

.header__burger:hover .bars i:nth-child(2) {
  width: 100%;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.logo__img {
  display: block;
  height: 42px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

@media (max-width: 640px) {
  .logo__img {
    height: 34px;
  }
}


.header__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(2px, 0.225vw, 3.5px);
}

.header__icon {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}

.header__icon:hover {
  background: var(--wash);
  color: var(--blue);
  transform: translateY(-1px);
}

/* WhatsApp 图标不跳转，但保留悬浮效果 */
span.header__icon--wa {
  cursor: default;
}

.header__icon svg {
  display: block;
  width: 90%;
  height: 90%;
}

.header__links {
  display: contents;
}

.header__social-toggle {
  display: none;
  position: relative;
  z-index: 5;
}

@media (max-width: 640px) {
  .header__actions {
    position: relative;
    gap: 0;
  }

  .header__links {
    display: none;
  }

  .header__actions[data-open="true"] .header__links {
    display: grid;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    grid-template-columns: repeat(3, 35px);
    gap: 3px;
    padding: 10px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 14px 34px -12px rgba(11, 27, 51, 0.28);
    z-index: 60;
    animation: fade-up 0.25s var(--ease);
  }

  .header__social-toggle {
    display: grid;
  }
}


@media (max-width: 820px) {
  .header__icon {
    border-radius: 8px;
  }

  .header__actions {
    gap: 2px;
  }
}

@media (max-width: 400px) {
  .header__actions {
    gap: 1.5px;
  }

  .header__burger {
    width: 38px;
    height: 38px;
  }

  .logo__img {
    height: 28px;
  }
}


.search {
  position: fixed;
  inset: 0;
  z-index: 45;
}

.search[data-open="false"] {
  pointer-events: none;
}

.search__veil {
  position: absolute;
  inset: 0;
  background: rgba(11, 27, 51, 0.38);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.search[data-open="true"] .search__veil {
  opacity: 1;
}

.search__panel {
  position: absolute;
  top: var(--drawer-top, 103px);
  left: 0;
  width: 100%;
  max-height: 72vh;
  overflow-y: auto;
  background: var(--paper);
  padding: 22px clamp(20px, 4vw, 48px) 24px;
  transform: translateY(-102%);
  transition: transform 0.45s var(--ease);
  visibility: hidden;
  box-shadow: 0 20px 46px rgba(11, 27, 51, 0.16);
}

.search[data-open="true"] .search__panel {
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}

.search[data-open="false"] .search__panel {
  transition-delay: 0.3s;
}

.search__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.search__input {
  flex: 1;
  min-width: 0;
  padding: 6px 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 17px;
  color: var(--ink);
}

.search__input:focus {
  outline: none;
}

.search__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--wash);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), transform 0.3s var(--ease);
}

.search__close:hover {
  background: var(--line);
  transform: rotate(90deg);
}

.search__results {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
  max-width: 900px;
}

.search__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.search__item:hover,
.search__item.is-active {
  background: var(--wash);
}

.search__item-title {
  font-size: 15px;
  color: var(--ink);
}

.search__item:hover .search__item-title,
.search__item.is-active .search__item-title {
  color: var(--blue);
}

.search__item-group {
  flex: none;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.search__hint {
  padding: 14px 12px;
  font-size: 14.5px;
  color: var(--body);
}


.drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
}

.drawer[data-open="false"] {
  pointer-events: none;
}

.drawer__veil {
  position: absolute;
  inset: 0;
  background: rgba(11, 27, 51, 0.38);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.drawer[data-open="true"] .drawer__veil {
  opacity: 1;
}


.drawer__panel {
  position: absolute;
  top: 0;                /* 展开时满屏覆盖：从视口最顶部开始（盖住头部区） */
  left: 0;
  width: 100%;
  height: 100%;          /* 一直铺到视口底部 */
  background: var(--paper);

  /* 顶部留 50px：展开后栏目内容从上方 50px 处开始 */
  /* 右侧留白加大：给右上角关闭按钮让位，避免它压到最后一栏标题（7 列布局在 ~1200-1400px 时最紧） */
  padding: 50px clamp(112px, 8vw, 132px) 28px clamp(20px, 4vw, 48px);
  overflow-y: auto;
  transform: translateY(-102%);
  transition: transform 0.5s var(--ease);
  visibility: hidden;

  display: grid;
  /* 列数固定 7，与静态参照站完全一致：
     1-5 列 = 产品栏目，第 6 列 = ABOUT，第 7 列永远留空（右侧留白）。
     列数不随栏目数量变化，后台增删栏目不会改变任何一列的宽度。 */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  /* 前 N 行 = 栏目行（每行 5 个产品栏，第 6 列固定给 ABOUT），
     最后一行 = 图片条（1fr 占满剩余高度 → 贴到抽屉最底部） */
  grid-template-rows: repeat(var(--drawer-nav-rows, 1), auto) 1fr;
  gap: 10px var(--drawer-gap);
  align-content: start;
  box-shadow: 0 20px 46px rgba(11, 27, 51, 0.16);
}

.drawer[data-open="true"] .drawer__panel {
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}

.drawer[data-open="false"] .drawer__panel {
  transition-delay: 0.35s;
}


@media (max-width: 1200px) {
  .drawer__panel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;   /* 4 列时栏目占 2 行，图片条仍占满剩余高度贴底 */
  }
}

@media (max-width: 760px) {
  .drawer__panel {
    /* 手机保持原样：从头部下方下拉、限高，不全屏 */
    top: var(--drawer-top, 103px);
    height: auto;
    max-height: 60vh;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;    /* 手机高度自适应，不做拉伸贴底 */
    gap: 20px 24px;
    padding: 24px 24px 28px;
  }
}

@media (max-width: 480px) {
  .drawer__panel {
    grid-template-columns: 1fr;
    grid-template-rows: none;    /* 单列堆叠，不做拉伸贴底 */
  }
}


.drawer__close {
  position: absolute;
  top: 14px;
  right: clamp(16px, 3vw, 40px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  transition: background-color 0.25s var(--ease), transform 0.3s var(--ease);
}

.drawer__close:hover {
  background: var(--wash);
  transform: rotate(90deg);
}


/* 抽屉栏目分组：固定 6 列栅格中的自动落位单元。
   产品栏目按 1..5 顺序落位，第 6 列留给 ABOUT；
   新增产品栏目超过 5 个时自动换到第二行，绝不挤压已有列宽；
   删除栏目后剩余栏目位置不变（不重排、不塌陷）。 */
.drawer__group {
  min-width: 0;
}


.drawer__item {
  display: block;
  padding: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  opacity: 0;
  transform: translateY(-14px);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.drawer__item:hover {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

/* 当前分类（与产品总览页筛选联动时高亮） */
.drawer__item.is-current {
  color: var(--blue);
  border-bottom-color: var(--blue);
}


span.drawer__item,
span.drawer__item:hover {
  cursor: default;
  color: var(--ink);
  border-bottom-color: var(--ink);
}


.drawer__sub {
  display: block;
  padding: 7px 0 7px 14px;
  font-size: 14px;
  color: var(--body);
  border-left: 1px solid var(--line);
  opacity: 0;
  transform: translateY(-14px);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), padding-left 0.3s var(--ease);
}

.drawer__sub:hover {
  color: var(--blue);
  border-left-color: var(--blue);
  padding-left: 18px;
}

/* 当前页（如 About YH 下的 Video / Contact YH）高亮 */
.drawer__sub.is-current {
  color: var(--blue);
  border-left-color: var(--blue);
  font-weight: 600;
}

.drawer__sub--toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.drawer__sub--toggle:hover {
  padding-left: 18px;
}

.drawer__arrow {
  flex: 0 0 auto;
  margin-left: 8px;
  transition: transform 0.3s var(--ease);
}

.drawer__sub--toggle[aria-expanded="true"] .drawer__arrow {
  transform: rotate(180deg);
}

.drawer__nest {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease);
}

.drawer__nest.is-open,
.drawer__has-nest:hover .drawer__nest {
  max-height: 300px;
}

.drawer__nest .drawer__sub3 {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), padding-left 0.3s var(--ease);
}

.drawer__nest.is-open .drawer__sub3,
.drawer__has-nest:hover .drawer__sub3 {
  opacity: 1;
  transform: translateY(0);
}

.drawer__nest.is-open .drawer__sub3:nth-child(1),
.drawer__has-nest:hover .drawer__sub3:nth-child(1) { transition-delay: 0.05s; }
.drawer__nest.is-open .drawer__sub3:nth-child(2),
.drawer__has-nest:hover .drawer__sub3:nth-child(2) { transition-delay: 0.1s; }
.drawer__nest.is-open .drawer__sub3:nth-child(3),
.drawer__has-nest:hover .drawer__sub3:nth-child(3) { transition-delay: 0.15s; }
.drawer__nest.is-open .drawer__sub3:nth-child(4),
.drawer__has-nest:hover .drawer__sub3:nth-child(4) { transition-delay: 0.2s; }


.drawer__sub3 {
  display: block;
  padding: 4px 0 4px 28px;
  font-size: 12.5px;
  color: var(--body);
  border-left: 1px solid var(--line);
  opacity: 0;
  transform: translateY(-14px);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), padding-left 0.3s var(--ease);
}

.drawer__sub3::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--body);
  vertical-align: 2px;
  transition: background-color 0.25s var(--ease);
}

.drawer__sub3:hover {
  color: var(--blue);
  border-left-color: var(--blue);
  padding-left: 32px;
}

.drawer__sub3:hover::before {
  background: var(--blue);
}

.drawer[data-open="true"] .drawer__item,
.drawer[data-open="true"] .drawer__sub,
.drawer[data-open="true"] .drawer__sub3 {
  animation: drawer-in 0.55s var(--ease) forwards;
  animation-delay: calc(0.12s + var(--i) * 0.045s);
}

@keyframes drawer-in {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* 菜单底部图片条：无缝横向图带（seamless band）
   规则：① 每张图左边缘与上方对应栏目列的左边缘严格对齐（不左右移动）；
        ② 每张图向右延伸到下一张图的左边缘 —— 吞掉列间距，图与图之间零空隙；
        ③ 最后一张（CAR CARE）只占用本列，右边缘正好落在 NEWS 栏目列的左边缘
           （整条图带从 KITCHEN 左边缘到 NEWS 左边缘，共占前 5 个栏目列）；
        ④ 五张图等高，图片以 object-fit: cover 填满扩展后的宽度。
   做法：图带横跨父栅格前 5 列，内部复用同样的 5 列 + 同样列间距；
        于是第 i 张图正好落在第 i 列，宽度 = 列宽 + 列间距，
        右边缘恰好落在下一列的左边缘上（天然实现「零空隙 + 左边缘对齐」）。 */
.drawer__gallery {
  /* 跨列数 / 内部列数默认 5（与静态参照站一致），模板可内联覆盖 */
  grid-column: 1 / span var(--gal-span, 5);
  display: grid;
  grid-template-columns: repeat(var(--gal-cols, 5), minmax(0, 1fr));
  gap: 0 var(--drawer-gap);
  margin-top: clamp(20px, 2.6vw, 34px);
  align-self: end;               /* 行内靠底：图片条整体贴到抽屉最底部，自身尺寸不变 */
}

.drawer__gallery-item {
  display: block;
  overflow: hidden;
  background: var(--wash);
  line-height: 0;
  /* 竖图：宽不变，高度按红框比例截短（≈249 × 463 上下各截一条 → 249 × 377，整条约 280px）
     尺寸保持原比例不变，只整体移到抽屉底部：靠 align-self:end 贴底，不拉伸 */
  aspect-ratio: 249 / 377;
  align-self: end;
}

/* 每张图：占 1 列，宽度再向外吃进 1 个列间距 → 右边缘贴住下一列左边缘
   （--gal-pos 由模板内联指定 = 该栏目在导航里的列号，图片跟栏目走；
    未指定时回退 auto 自然排列，规则同静态站） */
.drawer__gallery-item {
  grid-column: var(--gal-pos, auto);
  width: calc(100% + var(--drawer-gap));
}

.drawer__gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;               /* 图片填满扩展后的宽度 */
  object-position: 50% 40%;        /* 上下截条时偏上取景：上少切、下多切（与红框比例一致） */
  transition: transform 0.55s var(--ease);
}

.drawer__gallery-item:hover img,
.drawer__gallery-item:focus-visible img {
  transform: scale(1.06);
}

/* 中等宽屏（父栏退为 4 列，「与上方栏目列对齐」已不成立）：
   退化为整宽无缝横带，等分数跟随图片数（--gal-cols），保持图与图零空隙 */
@media (max-width: 1200px) {
  .drawer__gallery {
    grid-template-columns: repeat(var(--gal-cols, 6), minmax(0, 1fr));
    gap: 0;
  }
  .drawer__gallery-item:nth-child(n) {
    grid-column: auto;
    width: auto;
  }
}

/* 手机 / 窄屏：栏目与图片模块纵向堆叠（同样零空隙），每张整宽、统一高度 */
@media (max-width: 760px) {
  .drawer__gallery {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 18px;
  }
  .drawer__gallery-item {
    aspect-ratio: auto;                  /* 手机端不按竖图比例（否则整宽会过高） */
    height: clamp(120px, 34vw, 184px);   /* 与桌面同步截短约 20% */
  }
}



.collage {
  position: relative;
  /* width 必须显式 100%：否则 max-height 生效时 aspect-ratio 会反推宽度，导致大屏下 hero 不满宽 */
  width: 100%;
  aspect-ratio: 1920 / 800;
  /* 大屏限高：2560 宽时按比例原本高达 1060px，封顶 820px 更协调 */
  max-height: 820px;
  height: auto;
  overflow: hidden;
  background: #f6f8fb;
  /* 作为容器，让内部标语的 cqh 单位以 hero 的实际高度为基准
     —— 各设备（含手机 16:9、大屏限高）都按同一比例缩放 */
  container-type: size;
}

/* 小屏手机：2.4:1 太扁（375 宽仅约 150px 高），改用 16:9 让首屏大图有足够高度 */
@media (max-width: 640px) {
  .collage {
    aspect-ratio: 16 / 9;
  }
}

.hero-banner {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* hero 幕布：从左到右的蓝色渐变遮罩（沿用站内 .banner::before 的写法） */
.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to right,
      rgba(8, 70, 147, 0.05) 0%,
      rgba(8, 70, 147, 0.24) 52%,
      rgba(8, 70, 147, 0.58) 100%);
}

/* 右侧居中（竖直播中、水平靠右）：主标题 + 副标题（白字 + 柔和投影，
   保证在海浪/沙滩的明暗底上都能看清） */
.hero-banner__tagline {
  position: absolute;
  z-index: 1; /* 压在幕布之上 */
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  /* width: max-content 让元素按文字自然宽度排布（避免被可用空间挤成多行）；
     上限 1640px：保证大屏下主标题 1 行、副标题 2 行（更小会让主标题孤字换行） */
  width: max-content;
  max-width: min(94%, 1640px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(4px, 0.7cqh, 12px); /* 主副标题之间的间隔（按需求收小） */
  text-align: right;
  color: #ffffff;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 2px 14px rgba(0, 0, 0, 0.35);
}

/* 主标题：按要求调到 1440 视口下 70px
   = 13.5cqh × 0.8832（13.5cqh 在 1440 视口约 79.26px） */
.hero-banner__title {
  display: block;
  font-size: clamp(15.9px, 6.27vw, 79.5px); /* 回退：= 原主标题字号 × 0.8832 */
  font-size: calc(13.5cqh * 0.8832);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* 副标题：按要求调到 1440 视口下 35px
   = 13.5cqh × 0.4416（13.5cqh 在 1440 视口约 79.26px；为主标题的 50%） */
.hero-banner__sub {
  display: block;
  font-size: clamp(7.9px, 3.14vw, 39.7px); /* 回退：= 13.5cqh × 0.4416 */
  font-size: calc(13.5cqh * 0.4416);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4;
  opacity: 0.95;
}

/* 说明：不再需要「大屏单独放大」的媒体查询——
   标语的 cqh 已随 hero 实际高度（含 max-height 限高）等比缩放，大屏自然跟着放大 */


.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.marquee {
  position: sticky;
  top: 0;
  z-index: 42;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 16px;
  overflow: hidden;
}

.marquee__text {
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

@media (max-width: 760px) {
  .marquee {
    padding: 6px 14px;
  }

  .marquee__text {
    font-size: 11px;
    letter-spacing: 0.06em;
  }
}


.carousel {
  padding: clamp(64px, 9vh, 104px) 0;
  background: var(--wash);
  border-block: 1px solid var(--line);
}


/* 轮播通栏：去掉原来的 1500px 限宽，只保留站点左右内边距，
   标题与卡片一起铺满屏幕两侧（滚动轨道仍在容器内，横向拖动不变） */
.carousel .wrap {
  max-width: none;
}

.carousel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}

.index-products .section-title {
  display: block;
}

.carousel__nav {
  display: flex;
  gap: 10px;
}

.carousel__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgb(222, 234, 246);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.carousel__btn:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  transform: translateY(-2px);
}

.carousel__track {
  display: flex;
  gap: 18px; /* 按需求收小卡片缝隙（原 26px）——同步改下面各断点的 flex-basis 间距算式 */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 6px;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__card {
  flex: 0 0 calc((100% - 54px) / 4); /* 3 个间距 × 18px */
  scroll-snap-align: start;
  min-width: 0;
}

/* 轮播卡片 hover 微放大。
   注意：.m-media img（JS 自动挂载的入场动画）在文件更靠后，会用
   `transition: scale 1.5s` 覆盖这里的 transition 简写，导致 transform 过渡时长
   归零、hover 变成瞬间跳变。此处统一加 .index-products 前缀提高特异性夺回过渡权，
   并显式把 scale 一并写进 transition，保证「入场回落」与「hover 放大」各走各的属性。 */
.index-products .carousel__frame {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: #fff;
  contain: paint; /* 裁剪限制在本层内，hover 时不外溢重绘 */
}

.index-products .carousel__frame img {
  display: block;
  width: 100%;
  aspect-ratio: 6 / 5; /* 按需求把图片向下加长（原 4/3） */
  object-fit: cover;
  backface-visibility: hidden;
  will-change: transform; /* 提前提升合成层，避免 hover 首帧卡顿 */
  transition: transform 0.45s var(--ease), scale 1.5s var(--ease);
}

.index-products .carousel__card:hover .carousel__frame img {
  transform: scale(1.05);
}

.carousel__name {
  display: block;
  margin-top: 18px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.25s var(--ease);
}

.carousel__card:hover .carousel__name {
  color: var(--blue);
}

.carousel__desc {
  display: block;
  margin-top: 5px;
  font-size: 15px;
  color: var(--muted);
}

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 36px;
}

/* 轮播圆点 = 联动指示器：
   常态为 8px 小圆点；当前页拉长为药丸，内部蓝色填充条从左向右生长，
   时长与自动播放间隔一致（4200ms）—— 圆点直接反映「还有多久翻页」。
   悬停/聚焦轮播区时自动播放暂停，填充条同步暂停。 */
.carousel__dot {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #cdd8e6;
  cursor: pointer;
  overflow: hidden;
  transition:
    background-color 0.3s var(--ease),
    transform 0.35s var(--ease),
    width 0.45s var(--ease) var(--d, 0s); /* --d = 与当前页的距离，JS 写入 */
}

.carousel__dot:hover {
  background: #aebfd6;
  transform: translateY(-2px);
}

/* 内部进度填充（::after 只负责视觉，不占布局） */
.carousel__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--blue);
  transform: scaleX(1);
  transform-origin: left center;
  opacity: 0;
  transition: opacity 0.2s linear;
}

.carousel__dot.is-active {
  width: 26px;
}

.carousel__dot.is-active::after {
  opacity: 1;
  transform: scaleX(0);
  animation: carousel-dot-fill 4200ms linear forwards;
}

/* 悬停 / 键盘聚焦轮播区 → 自动播放暂停，填充条同步暂停
   （.is-paused 由 script.js 在与自动播放同一处打标记，保证两者永远同步） */
.carousel__dots.is-paused .carousel__dot.is-active::after {
  animation-play-state: paused;
}

@keyframes carousel-dot-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* 切换时的联动小动作：按与当前页的距离错峰弹一下（越远的越晚，形成波浪） */
@keyframes carousel-dot-nudge {
  0% { transform: scale(1); }
  45% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

.carousel__dot.is-nudge {
  animation: carousel-dot-nudge 0.55s var(--ease) var(--d, 0s);
}

/* 减弱动效：填充条直接满格、不弹跳 */
.carousel__dots.no-anim .carousel__dot.is-active::after {
  animation: none;
  transform: scaleX(1);
}

.carousel__dots.no-anim .carousel__dot.is-nudge {
  animation: none;
}







.banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 62vh, 560px);
  background-color: var(--blue);
  
  background-size: cover;
  
  background-position: center;
  
}


.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
      rgba(8, 70, 147, 0.28) 0%,
      rgba(8, 70, 147, 0.58) 52%,
      rgba(8, 70, 147, 0.94) 100%);
}

.banner .wrap {
  position: relative;
  z-index: 1;
  
  width: 100%;
  max-width: none;
  
  display: flex;
  justify-content: flex-end;
  
}

.banner__content {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  
  text-align: right;
  
  padding-block: clamp(48px, 7vw, 88px);
}


.banner__accent {
  width: 60px;
  height: 3px;
  border-radius: 2px;
  background: #ffffff;
  margin-bottom: 16px;
}

.banner__kicker {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.banner__title {
  margin: 12px 0 10px;
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 750;
  line-height: 1.14;
  color: #ffffff;
}

.banner__lead {
  font-size: 15px;
  line-height: 10;
  color: rgba(255, 255, 255, 0.88);
}


.banner__btn {
  margin-top: clamp(18px, 2.5vw, 28px);
  padding: 13px 28px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: var(--blue);
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.banner__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(3, 20, 45, 0.32);
}

@media (max-width: 640px) {
  .banner .wrap {
    justify-content: center;
  }

  .banner__content {
    align-items: center;
    
    text-align: center;
    padding-inline: 20px;
  }
}


.cta {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(380px, 55vh, 520px);
  background: var(--blue);
  color: #fff;
  text-align: center;
}

.cta .wrap {
  width: 100%;
  max-width: 820px;
  display: flex;
  justify-content: center;
}

.cta__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: clamp(56px, 8vw, 96px);
}

.cta__title {
  margin: 0 0 16px;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.18;
  color: #fff;
}

.cta__title strong {
  font-weight: 800;
  display: block;
}

.cta__lead {
  margin: 0 0 28px;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.cta__socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 32px;
}

.cta__social {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.cta__social:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}

.cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 34px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(3, 20, 45, 0.32);
}


.csec {
  /* 整条通栏蓝色底板；上方留出呼吸空间，避免滚动时标题顶到 sticky 头部被 logo 遮挡 */
  /* 下内边距 = 表单卡下方到页尾的蓝色留白，原 clamp(64px,9vh,110px) 偏大，改小 */
  padding: clamp(28px, 4vh, 48px) 0 clamp(32px, 4.5vh, 56px);
  background: var(--blue);
  /* 公告条 + 头部已是固定区，跳转偏移交给 html 的 scroll-padding-top，这里只补一点呼吸间距 */
  scroll-margin-top: 12px;
}

.index-contact .wrap {
  max-width: 1360px;
}

/* 内容区（标题 + 表单卡）：无框，居中排布 */
.csec__grid {
  display: grid;
  grid-template-columns: 1fr;
  /* 标题到表单卡的间距：固定 20px */
  gap: 20px;
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
}

.csec__title {
  margin: 14px 0 0;
  color: var(--blue); /* #084693 */
  /* 文案较长（三行）；联系区容器已放宽到 1360px，此处同步放大字号 */
  font-size: clamp(20px, 2.65vw, 37px);
}

.csec__points {
  list-style: none;
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.csec__points li {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 15px;
  font-weight: 550;
  color: var(--ink);
}

.csec__check {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blue);
  color: #ffffff;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 10px rgba(8, 70, 147, 0.28);
}

.csec__contact-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s var(--ease);
}

a.csec__contact-link:hover {
  transform: translateX(4px);
}

.csec__contact-text {
  display: flex;
  flex-direction: column;
  font-size: 15px;
  color: var(--ink);
}

.csec__contact-text strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


.csec .kicker {
  color: rgba(255, 255, 255, 0.72);
}

/* 蓝色底板上标题为白色 */
.csec .csec__title {
  color: #ffffff;
}

.csec .csec__points li {
  color: #ffffff;
}

.csec .csec__check {
  background: #2f7de1;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.csec .csec__contact-text {
  color: #ffffff;
}

.csec .csec__contact-text strong {
  color: rgba(255, 255, 255, 0.7);
}


.csec__card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(24px, 3vw, 42px);
  box-shadow: 0 24px 60px rgba(6, 14, 28, 0.08);
  container-type: inline-size;
  container-name: cseccard;
}

.csec__form {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

/* 首页联系区表单下方：跳转到 Contact 独立页的关联入口 */
.csec__more {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

.csec__more a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.25s var(--ease);
}

.csec__more a:hover {
  color: var(--blue-deep);
}

.csec__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
}

/* 表单卡本身较窄时（约 banner 1/3 宽），NAME/EMAIL 由并排改为上下堆叠 */
@container (max-width: 460px) {
  .csec__row {
    grid-template-columns: 1fr;
  }
}

.csec__row > .csec__field:only-child {
  grid-column: 1 / -1;
}


.csec__field {
  display: block;
}

.csec__label {
  display: block;
  margin-bottom: 5px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s var(--ease);
}

.csec__field:focus-within .csec__label {
  color: var(--blue);
}

.csec__control {
  position: relative;
  display: block;
}

.csec__input {
  width: 100%;
  border: 0;
  border-bottom: 1.5px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 11px 2px;
  font-family: inherit;
  font-size: 17.5px;
  color: var(--ink);
  transition: border-color 0.3s var(--ease);
}

.csec__input::placeholder {
  color: var(--muted);
  opacity: 0.65;
}

.csec__input:focus {
  outline: none;
  border-bottom-color: transparent;
}


.csec__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}

.csec__field:focus-within .csec__bar {
  transform: scaleX(1);
}

.csec__area {
  resize: vertical;
  min-height: 96px;
}


.csec__select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 30px;
}

.csec__select option {
  color: var(--ink);
  background: #ffffff;
}

.csec__chev {
  position: absolute;
  right: 2px;
  bottom: 14px;
  pointer-events: none;
  color: var(--blue);
  transition: transform 0.35s var(--ease);
}

.csec__field:focus-within .csec__chev {
  transform: rotate(180deg);
}


.csec__submit {
  position: relative;
  overflow: hidden;
  margin-top: 4px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: #ffffff;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.csec__submit::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 55%;
  background: linear-gradient(115deg, transparent 15%, rgba(255, 255, 255, 0.30) 50%, transparent 85%);
  transform: translateX(-160%);
  transition: transform 0.7s var(--ease);
  pointer-events: none;
}

.csec__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(8, 70, 147, 0.35);
}

.csec__submit:hover::before {
  transform: translateX(300%);
}

.csec__arrow {
  transition: transform 0.3s var(--ease);
}

.csec__submit:hover .csec__arrow {
  transform: translateX(5px);
}

@media (max-width: 560px) {
  .csec__row {
    grid-template-columns: 1fr;
  }
}


.blog {
  padding: clamp(64px, 9vh, 110px) 0;
  background: #f8fafc;
  border-top: 1px solid var(--line);
}


.blog .wrap {
  max-width: 1500px;
}


.blog__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.blog__head-text {
  max-width: 720px;
  min-width: 0;
}

.blog__head .kicker {
  color: var(--blue);
}

.blog__title {
  color: var(--blue); /* #084693 */
  font-size: clamp(28px, 3.4vw, 44px);
  margin-top: 0;
  display: block;
}

.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: clamp(30px, 4vw, 52px);
}

.blog__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.blog__media {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 4 / 3;
  background: var(--blue-tint);
}

.blog__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease);
}

.blog__card:hover .blog__media img {
  transform: scale(1.05);
}

.blog__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog__date {
  margin-top: 18px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}

.blog__card-title {
  margin: 8px 0 0;
  font-size: 19px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color 0.25s var(--ease);
}

.blog__card:hover .blog__card-title {
  color: var(--blue);
}

.blog__excerpt {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog__more {
  margin-top: auto;
  padding-top: 16px;
  align-self: flex-start;
  font-size: 14.5px;
  font-weight: 600;
  color: #084693;
  
  text-decoration: none;
}

.blog__more:hover {
  color: var(--blue-deep);
}

.blog__more:focus-visible {
  color: var(--blue-deep);
  text-decoration: underline;
}

.blog__view {
  text-decoration: none;
  flex: 0 0 auto;
}

@media (max-width: 700px) {
  .blog__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

@media (max-width: 900px) {
  .blog__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .blog__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.field__error {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--blue-deep);
}

.form__sent {
  text-align: center;
  padding: 56px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--wash);
  animation: fade-up 0.6s var(--ease);
}

.form__sent-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}

.form__sent-text {
  max-width: 420px;
  margin: 10px auto 0;
}

.form__again {
  margin-top: 22px;
  border: 0;
  background: none;
  color: var(--blue);
  font-weight: 600;
  cursor: pointer;
}

.form__again:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}


.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--d, 0s);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}


@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .drawer__item,
  .drawer__sub,
  .drawer__sub3 {
    opacity: 1;
    transform: none;
  }
}


@media (max-width: 1100px) {
  .carousel__card {
    flex-basis: calc((100% - 36px) / 3); /* 2 个间距 × 18px */
  }
}

@media (max-width: 640px) {
  .header__grid {
    height: 64px;
  }
}

@media (max-width: 700px) {

  
  .carousel__card {
    flex-basis: calc((100% - 18px) / 2); /* 1 个间距 × 18px */
  }
}

@media (max-width: 560px) {
  .carousel__card {
    flex-basis: 86%;
  }
}





.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 120;
  pointer-events: none;
}

.progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--blue), #2f8fff);
  box-shadow: 0 0 14px rgba(8, 70, 147, 0.45);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}


[data-spot] {
  position: relative;
}

[data-spot]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
      rgba(255, 255, 255, 0.30),
      rgba(255, 255, 255, 0) 62%);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}

[data-spot]:hover::after {
  opacity: 1;
}


[data-magnetic] {
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}


/* 标题逐词遮罩上浮（由 script.js 依据 [data-words] 拆分 span.word） */
.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.word > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(118%);
  opacity: 0;
  transition: transform 1s var(--ease), opacity 0.7s ease;
  transition-delay: calc(var(--i, 0) * 46ms);
  will-change: transform;
}

.in-view .word > i,
.m-words-in .word > i {
  transform: translateY(0);
  opacity: 1;
}


.draw-link {
  position: relative;
  text-decoration: none;
}

.draw-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.draw-link:hover::after,
.draw-link:focus-visible::after {
  transform: scaleX(1);
}


.banner {
  background-position: center calc(50% + var(--par, 0px));
}


/* ==========================================================================
   Blog 3D 卡片效果（原生实现：3D 倾斜 + 蓝调光影追踪 + 悬浮浮起）
   依赖 script.js 中 setupPointerFx 写入的 CSS 变量：
   --rx / --ry （倾斜角度）  --cx / --cy （光晕位置）
   ========================================================================== */

.blog__grid {
  /* 建立 3D 空间，让子卡片的旋转有纵深 */
  perspective: 1200px;
}

.blog__grid > .blog__card.reveal {
  position: relative;
  padding: 16px;
  overflow: hidden;
  /* 极浅蓝底 + 极细深蓝边框，让卡片独立于页面背景 */
  background: #f0f7ff;
  border: 1px solid rgba(8, 70, 147, 0.1);
  border-radius: 16px;
  box-shadow: 0 10px 30px -10px rgba(8, 70, 147, 0.08);
  transform: translateY(var(--ty, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1));
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
  will-change: transform;
}

/* 深蓝光影追踪（Spotlight）——跟随鼠标的极淡径向渐变 */
.blog__grid > .blog__card.reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--cx, 50%) var(--cy, 50%),
      rgba(8, 70, 147, 0.06),
      rgba(8, 70, 147, 0) 60%);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
  z-index: 3;
}

.blog__grid > .blog__card.reveal:hover::before {
  opacity: 1;
}

/* 悬浮：轻微浮起 + 蓝调阴影扩散（克制，无缩放） */
.blog__grid > .blog__card.reveal:hover {
  --ty: -4px;
  box-shadow: 0 18px 36px -12px rgba(8, 70, 147, 0.16);
}

/* 配图：内嵌式，独立圆角，干净矩形，不加任何渐变/遮罩 */
.blog__grid > .blog__card.reveal .blog__media {
  border-radius: 12px;
}

/* 卡片内文字留白由卡片 padding:16px 提供，顶部间距来自日期标签 */
.blog__grid > .blog__card.reveal .blog__body {
  padding: 0;
}

/* Read more 箭头：悬浮时右移 2px */
.blog__grid > .blog__card.reveal .blog__more::after {
  content: "\2192";
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.25s var(--ease);
}

.blog__grid > .blog__card.reveal:hover .blog__more::after {
  transform: translateX(2px);
}

/* 触屏 / 降低动效偏好：关闭倾斜与浮起，保留静态卡片外观 */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .blog__grid > .blog__card.reveal {
    transform: none;
    box-shadow: 0 10px 30px -10px rgba(8, 70, 147, 0.08);
  }

  .blog__grid > .blog__card.reveal:hover::before {
    opacity: 0;
  }
}


@media (prefers-reduced-motion: reduce) {
  .word {
    opacity: 1 !important;
    transform: none !important;
  }

  [data-spot]::after {
    display: none;
  }

  [data-magnetic] {
    transition: none;
  }

  .progress {
    display: none;
  }
}


.index-products {
  content-visibility: auto;
  contain-intrinsic-size: auto 820px;
}

/* 中部 Banner 图片：Products 与 News 之间的通栏横幅 */
.mid-banner {
  display: block;
  position: relative;
  width: 100%;
  background: #f6f8fb;
  overflow: hidden;
  line-height: 0;
}

/* 只作用于横幅大图；播放按钮图标在 <a> 内，不受此规则影响 */
.mid-banner > img {
  display: block;
  /* 恢复通栏宽度；比原 1920×799 更扁，banner 更矮（1440 下约 460px，原约 593px） */
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 620;
  /* 大屏限高：2560 宽时按比例原本高达 822px，封顶 560px */
  max-height: 560px;
  object-fit: cover;
  object-position: center;
}

/* 小屏手机：同样改用 16:9，避免横幅过扁 */
@media (max-width: 640px) {
  .mid-banner > img {
    aspect-ratio: 16 / 9;
  }
}

/* 悬浮播放按钮：居中，尺寸随视口缩放 */
.mid-banner__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  /* 原尺寸 clamp(58px, 9vw, 132px)；已连续缩小两次 1/3（×2/3 各一次）→ ×4/9 */
  width: clamp(26px, 4vw, 58px);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
}

/* 白色线稿图标：加柔和投影，保证在浅色画面上也看得清 */
.mid-banner__play img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.4));
}

.mid-banner__play:hover {
  transform: translate(-50%, -50%) scale(1.07);
}

.mid-banner__play:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 6px;
  border-radius: 50%;
}

.stories {
  content-visibility: auto;
  contain-intrinsic-size: auto 660px;
  /* 上间距：与上方通栏图片/轮播的节奏拉平（原 clamp(24px,3.4vh,42px) 偏挤）；
     下间距：与下方蓝色内容块的间距（配合 .csec 的 top padding） */
  padding: clamp(48px, 6.5vh, 84px) 0 80px;
  background: var(--paper);
}

/* News 标题文字改为蓝色 */
.stories .section-title {
  color: var(--blue);
}

.index-contact {
  content-visibility: auto;
  contain-intrinsic-size: auto 860px;
}

.banner {
  content-visibility: auto;
  contain-intrinsic-size: auto 560px;
}

/* News 板块通栏：与产品轮播一致，去掉 1500px 限宽 */
.stories .wrap {
  max-width: none;
}

/* News 标题一行：左标题 + 右 View all（跳转 News 独立页） */
.stories__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  margin-bottom: clamp(44px, 4.6vh, 62px);
}

.stories__view {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  transition: color 0.3s var(--ease), gap 0.3s var(--ease);
}

.stories__view:hover {
  color: var(--blue-deep);
  gap: 17px;
}

/* 箭头跟随字号缩放，改字号不用再单独调 svg 尺寸 */
.stories__view-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  overflow: hidden;
  /* 遮罩壳：箭头从壳内下方整块滑上来，与文字的逐词遮罩同一观感 */
}

.stories__view-arrow svg {
  flex: 0 0 auto;
  display: block;
  width: 1.05em;
  height: 1.05em;
}

/* 入场动效：与 News 标题同一套「逐词遮罩上浮」。
   script.js 会按 [data-words] 拆分文字并挂 .m-words-in；
   箭头规则用属性选择器限定（只在 JS 生效后隐藏），避免禁用脚本时图标丢失。 */
.stories__view-label {
  white-space: nowrap;
}

.stories__view[data-words="done"] .stories__view-arrow svg {
  transform: translateY(120%);
  opacity: 0;
  transition: transform 1s var(--ease) 0.15s, opacity 0.7s ease 0.15s;
}

.stories__view[data-words="done"].m-words-in .stories__view-arrow svg {
  transform: translateY(0);
  opacity: 1;
}

.stories__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 22px); /* 按需求收小卡片缝隙（原 clamp(18px,2vw,28px)） */
  align-items: stretch;
}

.newscard {
  position: relative; /* 承载整卡 overlay 链接 */
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.2vw, 30px);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(6, 14, 28, 0.06);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}

/* 整张 News 卡片可点：透明覆盖层链接（不改内部结构，hover 走 .newscard:hover） */
.newscard__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

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

.newscard:hover {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(8, 70, 147, 0.28);
}

.newscard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(18px, 2vw, 26px);
}

.newscard__date {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--body);
  transition: color 0.4s var(--ease);
}

.newscard:hover .newscard__date {
  color: rgba(255, 255, 255, 0.8);
}

.newscard__title {
  margin: 0 0 12px;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.35;
  font-weight: 700;
  color: var(--ink);
  transition: color 0.4s var(--ease);
}

.newscard:hover .newscard__title {
  color: #ffffff;
}

.newscard__text {
  margin: 0 0 clamp(20px, 2.2vw, 28px);
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--body);
  transition: color 0.4s var(--ease);
}

.newscard:hover .newscard__text {
  color: rgba(255, 255, 255, 0.8);
}

.newscard__media {
  margin-top: auto;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 16 / 11; /* 按需求把图片向下加长（原 16/10） */
  background: var(--blue-tint);
}

.newscard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}

.newscard:hover .newscard__media img {
  transform: scale(1.05);
}

@media (max-width: 960px) {
  .stories__grid {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin: 0 auto;
  }
}

@media (max-width: 560px) {
  .newscard {
    padding: 22px 20px 24px;
  }
}

/* ==========================================================================
   MOTION KIT —— 全站高级交互动效层
   所有页面共用本文件，动效按下方约定自动挂载：
     [data-words]   标题逐词遮罩上浮
     .m-media       媒体容器 clip-path 由下而上揭幕 + 图片回落
     [data-stagger] 网格 / 列表子项交错入场
     .m-btn         实心按钮光泽扫过
     .m-link        箭头链接下划线扫过
   关闭动效偏好（prefers-reduced-motion）时全部降级为静态。
   ========================================================================== */

/* ---------- 1. 媒体揭幕 ---------- */
.m-media {
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.15s var(--ease);
}

.m-media img {
  scale: 1.1;
  transition: scale 1.5s var(--ease);
}

.m-media.m-in {
  clip-path: inset(0 0 0 0);
}

.m-media.m-in img {
  scale: 1;
}

/* ---------- 2. 网格 / 列表交错入场 ---------- */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease), transform 0.95s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}

[data-stagger].m-in > * {
  opacity: 1;
  transform: none;
}

/* ---------- 3. 实心按钮：光泽扫过 + 轻微上浮 ---------- */
.m-btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.m-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(100deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.34) 50%,
      rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  transition: left 0.75s var(--ease);
  pointer-events: none;
}

.m-btn:hover::after {
  left: 125%;
}

.m-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px rgba(8, 70, 147, 0.5);
}

/* ---------- 4. 箭头链接：下划线扫过 ---------- */
.m-link {
  position: relative;
}

.m-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease);
}

.m-link:hover::after,
.m-link:focus-visible::after {
  transform: scaleX(1);
}

/* ---------- 5. 排版细节：避免标题孤字、正文断行更自然 ---------- */
h1,
h2,
h3,
.s-hero__title,
.a-title,
.pd-hero__title {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .m-media,
  .m-media.m-in {
    clip-path: none;
  }

  .m-media img,
  .m-media.m-in img {
    scale: 1;
  }

  [data-stagger] > *,
  [data-stagger].m-in > * {
    opacity: 1;
    transform: none;
  }

  .word > i {
    transform: none;
    opacity: 1;
  }

  .m-btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   公共页脚 SITE FOOTER
   —— 原先这段样式被复制在每个页面自己的内联 <style> 里（8 份），
      现统一收进 styles.css，后台「公共模板」里不再写任何 <style>。
      配套标记：<footer class="site-footer"> … </footer>
   ========================================================================== */
.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  background: var(--blue);
  color: #fff;
  padding: clamp(40px, 5vw, 68px) 0 0;
}

.site-footer .wrap {
  max-width: 1200px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(24px, 3.4vw, 48px);
  padding-bottom: clamp(30px, 4vw, 46px);
}

.footer__logo {
  display: inline-block;
  margin-bottom: 14px;
}

.footer__logo img {
  display: block;
  width: 108px;
  height: auto;
}

.footer__about {
  margin: 0 0 18px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.82);
  max-width: 300px;
}

.footer__title {
  margin: 0 0 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.footer__list a,
.footer__list span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
}

.footer__list a:hover {
  color: #fff;
}

.footer__list .is-current {
  color: #fff;
  font-weight: 700;
}

.footer__social {
  display: flex;
  gap: 9px;
}

.footer__social a,
.footer__social span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 9px;
  color: #fff;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.footer__social a:hover,
.footer__social span:hover {
  background: #fff;
  border-color: #fff;
  color: var(--blue);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.footer__legal a {
  color: rgba(255, 255, 255, 0.8);
}

.footer__legal a:hover {
  color: #fff;
}

@media (max-width: 980px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }

  .footer__bottom {
    justify-content: flex-start;
  }
}

/* ==========================================================================
   以下 CSS 由原各页面内联 <style> 块 / 内联 style 提取（帝国CMS迁移：HTML不再含样式）
   ========================================================================== */

/* —— 全局动画序号工具类（--i:N，跨页通用） —— */
.u-i0 { --i: 0; }
.u-i1 { --i: 1; }
.u-i2 { --i: 2; }
.u-i3 { --i: 3; }
.u-i4 { --i: 4; }
.u-i5 { --i: 5; }
.u-i6 { --i: 6; }
.u-i7 { --i: 7; }
.u-i8 { --i: 8; }
.u-i9 { --i: 9; }
.u-i10 { --i: 10; }
.u-i11 { --i: 11; }
.u-i12 { --i: 12; }
.u-i13 { --i: 13; }
.u-i14 { --i: 14; }
.u-i15 { --i: 15; }
.u-i16 { --i: 16; }

/* ===== index ===== */
/* — 原 <style> 块 — */
* {
      -webkit-user-drag: none !important;
    }
/* — 原 <style> 块 — */
[data-sp-bindable="database"] {
      outline: 1px dashed #0088ff;
      outline-offset: 2px;
      border-radius: 4px;
    }

    [data-sp-bindable="database"] * {
      pointer-events: none !important;
      transition: none !important;
      animation: none !important;
    }

    [data-sp-bindable="database"] {
      transition: none !important;
      animation: none !important;
    }
.pg-index-3 { --drawer-top: 107px; }
.pg-index-4 { -webkit-user-drag:none !important }
.pg-index-5 { transform: scaleX(0); }
.pg-index-6 { color: #084693; }
.pg-index-7 { --d: 0.1s; background-color: transparent; }
.pg-index-8 { --d: 0.12s; --mx: 42.63%; --my: 29.00%; }

/* ===== products ===== */
/* — 原 <style> 块 — */
/* ===== Products page — built on the site's design tokens ===== */
    :root {
      --primary: #084693;
      --primary-hover: #063a78;
      --bg: #ffffff;
      --border: #e5e7eb;
      --n-soft: #f8fafc;
      --n-text: #1f2937;
      --n-muted: #6b7280;
      --n-tag: #e6f0fa;
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      background: var(--bg);
      color: var(--n-text);
      font-size: 15.5px;
      line-height: 1.65;
    }
    a { color: var(--primary); text-decoration: none; }

    a:focus-visible,
    button:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
      border-radius: 4px;
    }

    .news-wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 28px 24px 0;
    }

    /* ---------- 顶部区（面包屑 + 分类筛选条）本地 token ----------
       按规格使用 --text / --muted；仅作用于本区域，避免覆盖全局 --muted(#8493a9)
       而把卡片描述、页脚等其它 12 处文字一并改色 */
    .breadcrumb,
    .pd-filter {
      --text: #1f2937;      /* 正文深灰 */
      --muted: #6b7280;     /* 次级灰（Home / 计数） */
      --ink-soft: #374151;  /* 未选中的分类项 */
    }

    /* ---------- Breadcrumb ---------- */
    .breadcrumb {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px;
      font-size: clamp(22px, 2vw, 30px);
      font-weight: 500;
      letter-spacing: 0.004em;
      color: var(--muted);
      margin-bottom: 0;
    }
    .breadcrumb a { color: var(--muted); transition: color 0.2s var(--ease); }
    .breadcrumb a:hover { color: var(--primary); }
    .breadcrumb .sep { opacity: 0.45; font-size: 0.82em; }
    .breadcrumb .current { color: var(--primary); font-weight: 600; }

    /* ---------- Footer ---------- */
    .site-footer {
      border-top: 1px solid rgba(255,255,255,0.18);
      background: var(--blue);
      color: #fff;
      padding: clamp(40px, 5vw, 68px) 0 0;
    }
    .site-footer .wrap { max-width: 1200px; }
    .footer__grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
      gap: clamp(24px, 3.4vw, 48px);
      padding-bottom: clamp(30px, 4vw, 46px);
    }
    .footer__logo { display: inline-block; margin-bottom: 14px; }
    .footer__logo img { display: block; width: 108px; height: auto; }
    .footer__about {
      margin: 0 0 18px;
      font-size: 13.5px;
      color: rgba(255,255,255,0.82);
      max-width: 300px;
    }
    .footer__title {
      margin: 0 0 14px;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #fff;
    }
    .footer__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 9px;
    }
    .footer__list a,
    .footer__list span {
      font-size: 14px;
      color: rgba(255,255,255,0.82);
    }
    .footer__list a:hover { color: #fff; }
    .footer__list .is-current { color: #fff; font-weight: 700; }
    .footer__social { display: flex; gap: 9px; }
    .footer__social a {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(255,255,255,0.35);
      border-radius: 9px;
      color: #fff;
      transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
    }
    .footer__social a:hover { background: #fff; border-color: #fff; color: var(--blue); }

    .footer__bottom {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 24px;
      align-items: center;
      justify-content: space-between;
      padding: 18px 24px 26px;
      border-top: 1px solid rgba(255,255,255,0.2);
      font-size: 13px;
      color: rgba(255,255,255,0.8);
    }
    .footer__legal { display: flex; flex-wrap: wrap; gap: 18px; }
    .footer__legal a { color: rgba(255,255,255,0.8); }
    .footer__legal a:hover { color: #fff; }

    /* ===== Products page — built on the site's design tokens =====
       规格色板：--primary #084693 / --bg #ffffff / --soft-bg #f8fafc /
       --text #1f2937 / --muted #6b7280 / --border #e5e7eb */

    /* ---------- Page container ---------- */
    .pd-wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 26px 24px 0;
    }

    /* ---------- Image placeholder module ---------- */
    .pd-ph {
      position: relative;
      display: grid;
      place-items: center;
      width: 100%;
      overflow: hidden;
      background: var(--soft-bg);
      border: 1px solid var(--border);
      color: #9aa6b8;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      transition: transform 0.4s var(--ease);
    }
    /* 真实图片填充：绝对定位居中裁切，保持模块宽高比 */
    .pd-ph img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s var(--ease);
    }
    .pd-ph--4x3 { aspect-ratio: 4 / 3; }
    .pd-ph--1x1 { aspect-ratio: 1 / 1; }
    .pd-ph--banner {
      aspect-ratio: 16 / 6;
      border-radius: 10px;
    }
    .pd-ph__label { display: inline-block; }

    /* ---------- 1. Page hero ---------- */
    .pd-hero { padding-bottom: clamp(8px, 1.2vw, 18px); }
    .pd-hero__top {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 18px 32px;
      align-items: end;
    }
    .pd-overline {
      margin: 0 0 12px;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--primary);
    }
    .pd-title {
      margin: 0 0 14px;
      font-size: clamp(30px, 4.4vw, 54px);
      font-weight: 700;
      line-height: 1.06;
      letter-spacing: -0.025em;
      color: var(--text);
    }
    .pd-lead {
      margin: 0;
      max-width: 620px;
      font-size: clamp(15.5px, 1.4vw, 17px);
      color: var(--muted);
    }
    .pd-hero__link {
      align-self: end;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
      white-space: nowrap;
    }
    .pd-arrow { display: inline-block; transition: transform 0.25s var(--ease); }
    .pd-hero__link:hover .pd-arrow { transform: translateX(4px); }
    .pd-banner { margin-top: clamp(26px, 3.4vw, 44px); }

    /* ---------- 2. Category filter bar ---------- */
    .pd-filter {
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .pd-filter__row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 14px 28px;
      padding: 18px 0;
    }
    .pd-filter__list {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px 32px;          /* 桌面：分类项之间 32px，更舒展 */
    }
    .pd-filter__btn {
      position: relative;
      padding: 4px 0;
      border: 0;
      background: none;
      font: inherit;
      font-size: 18px;
      font-weight: 600;
      letter-spacing: -0.004em;
      color: var(--ink-soft);
      cursor: pointer;
      white-space: nowrap;
      transition: color 0.2s var(--ease);
    }
    /* 选中下划线：2px #084693；下移一段距离，作为独立的编辑式横线更醒目 */
    .pd-filter__btn::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -8px;
      height: 2px;
      background: var(--primary);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.25s var(--ease);
    }
    .pd-filter__btn:hover { color: var(--primary); }
    .pd-filter__btn.is-active { color: var(--primary); }
    .pd-filter__btn.is-active::after { transform: scaleX(1); }
    .pd-filter__count {
      margin: 0;
      font-size: 16px;
      color: var(--muted);
    }

    /* ---------- 3. Product grid + card ---------- */
    .pd-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(20px, 2.2vw, 30px);
      margin-top: clamp(26px, 3.2vw, 40px);
    }
    .pd-card {
      display: flex;
      flex-direction: column;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
    }
    .pd-card:hover {
      border-color: var(--primary);
      box-shadow: 0 10px 26px rgba(8, 70, 147, 0.08);
    }
    .pd-card__media { display: block; overflow: hidden; }
    .pd-card:hover .pd-ph img { transform: scale(1.05); }
    .pd-card__body {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: clamp(16px, 1.8vw, 22px);
    }
    .pd-card__cat {
      margin: 0;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .pd-card__name {
      margin: 0;
      font-size: 16.5px;
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: -0.01em;
      color: var(--text);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      transition: color 0.25s var(--ease);
    }
    .pd-card__name a { color: inherit; }
    .pd-card:hover .pd-card__name { color: var(--primary); }
    .pd-card__desc {
      margin: 0;
      font-size: 14px;
      line-height: 1.6;
      color: var(--muted);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .pd-swatch {
      display: flex;
      gap: 7px;
      margin-top: 2px;
    }
    .pd-swatch__dot {
      width: 14px;
      height: 14px;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 3px;
      background: var(--c, #fff);
      cursor: pointer;
      transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
    }
    .pd-swatch__dot:hover { border-color: var(--primary); }
    .pd-swatch__dot.is-active {
      border-color: var(--primary);
      box-shadow: 0 0 0 1px var(--primary);
    }
    .pd-card__link {
      margin-top: auto;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 13.5px;
      font-weight: 600;
    }
    .pd-card:hover .pd-card__link .pd-arrow { transform: translateX(4px); }
    .pd-card.is-hidden { display: none; }

    /* ---------- 4. Featured product ---------- */
    .pd-feat {
      margin-top: clamp(40px, 5vw, 72px);
      padding: clamp(38px, 4.6vw, 68px) 0;
      background: var(--soft-bg);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .pd-feat__grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: clamp(24px, 3vw, 48px);
      align-items: center;
    }
    .pd-feat__media { grid-column: 1 / span 6; }
    .pd-feat__body { grid-column: 8 / span 5; }
    .pd-feat .pd-ph { background: #fff; border-radius: 8px; }
    .pd-feat__title {
      margin: 0 0 14px;
      font-size: clamp(24px, 3vw, 38px);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -0.02em;
      color: var(--text);
    }
    .pd-feat__text {
      margin: 0 0 22px;
      color: var(--muted);
    }
    .pd-feat__list {
      list-style: none;
      margin: 0 0 28px;
      padding: 0;
      display: grid;
      gap: 10px;
    }
    .pd-feat__list li {
      position: relative;
      padding-left: 19px;
      font-size: 14.5px;
      color: var(--text);
    }
    .pd-feat__list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.62em;
      width: 7px;
      height: 7px;
      border-radius: 1px;
      background: var(--primary);
    }

    /* ---------- Buttons ---------- */
    .pd-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 14px 28px;
      border: 1px solid var(--primary);
      border-radius: 6px;
      background: var(--primary);
      color: #fff;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
    }
    .pd-btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
    .pd-btn--outline { background: #fff; color: var(--primary); }
    .pd-btn--outline:hover { background: var(--primary); color: #fff; }

    /* ---------- 5. Load more ---------- */
    .pd-more {
      display: grid;
      justify-items: center;
      gap: 12px;
      margin-top: clamp(30px, 3.6vw, 48px);
      padding-top: clamp(24px, 3vw, 40px);
      border-top: 1px solid var(--border);
    }
    .pd-more__note {
      margin: 0;
      font-size: 12.5px;
      color: var(--muted);
    }

    /* ---------- 6. Call to action ---------- */
    .pd-cta {
      margin-top: clamp(48px, 6vw, 88px);
      padding: clamp(40px, 5vw, 68px) 0 clamp(46px, 5.6vw, 76px);
      border-top: 1px solid var(--border);
    }
    .pd-cta__inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 22px 32px;
      align-items: center;
    }
    .pd-cta h2 {
      margin: 0 0 12px;
      font-size: clamp(26px, 3vw, 38px);
      font-weight: 700;
      line-height: 1.14;
      letter-spacing: -0.02em;
      color: var(--text);
    }
    .pd-cta p {
      margin: 0;
      color: var(--muted);
    }
    .pd-cta__actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 22px;
    }
    .pd-cta__link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
      color: var(--primary);
    }
    .pd-cta__link:hover .pd-arrow { transform: translateX(4px); }

    /* ---------- Responsive ---------- */
    @media (max-width: 980px) {
      .pd-hero__top { grid-template-columns: 1fr; align-items: start; }
      .pd-hero__link { justify-self: start; }
      .pd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .pd-feat__media,
      .pd-feat__body { grid-column: 1 / -1; }
      .pd-cta__inner { grid-template-columns: 1fr; align-items: start; }
      .footer__grid { grid-template-columns: 1fr 1fr; }
      /* 顶部区：字号略收，间距仍然舒展 */
      .breadcrumb { font-size: 20px; margin-bottom: 8px; }
      .pd-filter__list { gap: 10px 24px; }
      .pd-filter__btn { font-size: 16.5px; }
      .pd-filter__count { font-size: 15px; }
    }
    @media (max-width: 620px) {
      .pd-wrap { padding: 22px 18px 0; }
      .pd-grid { grid-template-columns: 1fr; }
      .pd-ph--banner { aspect-ratio: 4 / 3; }
      .pd-btn { width: 100%; }
      /* 竖排，避免「满宽按钮 + 次级链接」同行溢出 */
      .pd-cta__actions { display: grid; justify-items: stretch; gap: 14px; }
      .pd-cta__link { justify-content: center; }
      .footer__grid { grid-template-columns: 1fr; }
      .footer__bottom { justify-content: flex-start; }
      /* 顶部区：面包屑整行，筛选条横向滑动（比原 13.5px 更大，保留放大的观感） */
      .breadcrumb { font-size: 18px; gap: 8px; margin-bottom: 10px; }
      .pd-filter__row { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; padding: 14px 0; }
      .pd-filter__list {
        flex-wrap: nowrap;
        gap: 0 22px;
        overflow-x: auto;
        margin: 0 -18px;                 /* 让滑动区贴到容器左右边缘 */
        padding: 2px 18px 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .pd-filter__list::-webkit-scrollbar { display: none; }
      .pd-filter__btn { font-size: 16px; padding: 4px 0; }
      .pd-filter__btn::after { bottom: -5px; }
      .pd-filter__count { font-size: 14.5px; }
    }
/* — 原 <style> 块 — */
* { -webkit-user-drag: none !important; }
/* — 原 <style> 块 — */
[data-sp-bindable="database"]{outline:1px dashed #0088ff;outline-offset:2px;border-radius:4px;}[data-sp-bindable="database"] *{pointer-events:none !important;transition:none !important;animation:none !important;}[data-sp-bindable="database"]{transition:none !important;animation:none !important;}
.pg-products-4 { --drawer-top: 107px; --topbar-h: 30px; }
.pg-products-5 { transform: scaleX(0); }
.pg-products-6 { --d: 0.06s }
.pg-products-7 { --d: 0.1s }

/* ===== story ===== */
/* — 原 <style> 块 — */
/* ===== News page — built on the site's design tokens =====
       规格色板映射：--primary #084693 / --bg #ffffff / --border #e5e7eb /
       soft #f8fafc / text #1f2937 / muted #6b7280
       （News 区专用值统一加 n- 前缀，避免覆盖站点全局 token） */
    :root {
      --primary: #084693;
      --primary-hover: #063a78;
      --bg: #ffffff;
      --border: #e5e7eb;
      --n-soft: #f8fafc;
      --n-text: #1f2937;
      --n-muted: #6b7280;
      --n-tag: #e6f0fa;
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      background: var(--bg);
      color: var(--n-text);
      font-size: 15.5px;
      line-height: 1.65;
    }
    a { color: var(--primary); text-decoration: none; }

    a:focus-visible,
    button:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
      border-radius: 4px;
    }

    .news-wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 28px 24px 0;
    }

    /* ---------- Breadcrumb ---------- */
    .breadcrumb {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      font-size: 12.5px;
      letter-spacing: 0.04em;
      color: var(--muted);
      margin-bottom: 26px;
    }
    .breadcrumb a { color: var(--muted); }
    .breadcrumb a:hover { color: var(--primary); }
    .breadcrumb .sep { opacity: 0.5; }
    .breadcrumb .current { color: var(--primary); font-weight: 600; }

    /* ---------- 1. Section header（12 栏：左标题 / 右副标题 + View All） ---------- */
    .news-head {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 22px clamp(20px, 2.6vw, 36px);
      align-items: end;
      padding-bottom: clamp(18px, 2.4vw, 28px);
      border-bottom: 1px solid var(--border);
    }
    .news-head__left { grid-column: 1 / span 7; }
    .news-head__right {
      grid-column: 9 / span 4;
      display: grid;
      gap: 14px;
      justify-items: start;
    }
    .overline {
      margin: 0 0 12px;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--primary);
    }
    .news-head__title {
      margin: 0;
      font-size: clamp(30px, 3.8vw, 48px);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.02em;
      color: var(--n-text);
    }
    .news-head__sub {
      margin: 0;
      max-width: 420px;
      font-size: 15px;
      color: var(--n-muted);
    }

    .link-arrow {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 13.5px;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: var(--primary);
    }
    .arrow {
      display: inline-block;
      transition: transform 0.25s var(--ease);
    }
    .link-arrow:hover .arrow { transform: translateX(5px); }

    /* ---------- Image placeholder module ---------- */
    .ph-media {
      display: grid;
      place-items: center;
      width: 100%;
      background: var(--n-soft);
      border: 1px solid var(--border);
      color: #9aa6b8;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      text-align: center;
      transition: transform 0.35s var(--ease);
    }
    .ph-media--16x9 { aspect-ratio: 16 / 9; }
    .ph-media--1x1 { aspect-ratio: 1 / 1; }
    .ph-media--4x3 { aspect-ratio: 4 / 3; }

    /* ---------- 2. Featured editorial grid（7 栏 featured + 5 栏列表） ---------- */
    .news-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: clamp(24px, 3vw, 44px);
      margin-top: clamp(30px, 4vw, 52px);
    }

    .featured {
      grid-column: 1 / span 7;
      display: block;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      overflow: hidden;
      transition: border-color 0.25s var(--ease);
    }
    .featured:hover { border-color: var(--primary); }
    .featured__media { overflow: hidden; }
    .featured:hover .ph-media { transform: scale(1.03); }
    .featured__body { padding: clamp(18px, 2vw, 26px); }
    .featured__title {
      margin: 0 0 12px;
      font-size: clamp(20px, 2.2vw, 28px);
      font-weight: 700;
      line-height: 1.22;
      letter-spacing: -0.01em;
      color: var(--n-text);
      transition: color 0.25s var(--ease);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .featured:hover .featured__title { color: var(--primary); }
    .featured__excerpt {
      margin: 0 0 18px;
      font-size: 15px;
      color: var(--n-muted);
    }

    .meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }
    .tag {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--primary);
      background: var(--n-tag);
      border-radius: 4px;
      padding: 4px 9px;
      white-space: nowrap;
    }
    .meta__date { font-size: 12.5px; color: var(--n-muted); }

    /* Right: latest news list —— 3 条在整列高度内分散排布，与左侧 featured 卡同高，消除底部空白 */
    .news-list {
      grid-column: 8 / span 5;
      display: grid;
      align-content: space-between;
    }
    .news-item {
      display: grid;
      grid-template-columns: 112px 1fr;
      gap: 18px;
      padding: 20px 0;
      border-top: 1px solid var(--border);
    }
    .news-item:first-child { border-top: 0; padding-top: 0; }
    .news-item:last-child { padding-bottom: 0; }
    .news-item__media { overflow: hidden; border-radius: 6px; }
    .news-item:hover .ph-media { transform: scale(1.04); }
    .news-item__media .ph-media { font-size: 9px; letter-spacing: 0.1em; }
    .news-item__meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-bottom: 7px;
    }
    .news-item__title {
      margin: 0;
      font-size: 16.5px;
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: -0.005em;
      color: var(--n-text);
      transition: color 0.25s var(--ease);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .news-item:hover .news-item__title { color: var(--primary); }
    .news-item__title .arrow {
      opacity: 0;
      transform: translateX(-6px);
      margin-left: 4px;
      color: var(--primary);
      transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
    }
    .news-item:hover .news-item__title .arrow { opacity: 1; transform: translateX(0); }

    /* ---------- 3. Secondary news row ---------- */
    .news-sec {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(20px, 2.6vw, 32px);
      margin-top: clamp(38px, 5vw, 68px);
    }
    .sec-card {
      display: grid;
      grid-template-rows: auto 1fr;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      overflow: hidden;
      transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
    }
    .sec-card:hover {
      border-color: var(--primary);
      box-shadow: 0 12px 30px rgba(11, 27, 51, 0.07);
    }
    .sec-card__media { overflow: hidden; }
    .sec-card:hover .ph-media { transform: scale(1.02); }
    .sec-card__body {
      display: grid;
      align-content: start;
      gap: 10px;
      padding: clamp(16px, 1.8vw, 22px);
    }
    .sec-card__title {
      margin: 0;
      font-size: 17px;
      font-weight: 600;
      line-height: 1.38;
      letter-spacing: -0.005em;
      color: var(--n-text);
      transition: color 0.25s var(--ease);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .sec-card:hover .sec-card__title { color: var(--primary); }
    .sec-card__excerpt {
      margin: 0;
      font-size: 14px;
      color: var(--n-muted);
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .sec-card__body .link-arrow { font-size: 13px; margin-top: 4px; }
    .sec-card .meta { margin-bottom: 2px; gap: 10px; }

    /* ---------- 4. Bottom action ---------- */
    .news-more {
      display: flex;
      justify-content: center;
      margin-top: clamp(36px, 4.6vw, 64px);
      padding: clamp(28px, 3.4vw, 44px) 0 clamp(46px, 6vw, 84px);
      border-top: 1px solid var(--border);
    }
    .btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 13px 30px;
      border: 1px solid var(--primary);
      border-radius: 8px;
      background: var(--bg);
      color: var(--primary);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
    }
    .btn-outline:hover { background: var(--primary); color: #fff; }
    .btn-outline:hover .arrow { transform: translateX(4px); }

    /* ---------- Footer ---------- */
    .site-footer {
      border-top: 1px solid rgba(255,255,255,0.18);
      background: var(--blue);
      color: #fff;
      padding: clamp(40px, 5vw, 68px) 0 0;
    }
    .site-footer .wrap { max-width: 1200px; }
    .footer__grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
      gap: clamp(24px, 3.4vw, 48px);
      padding-bottom: clamp(30px, 4vw, 46px);
    }
    .footer__logo { display: inline-block; margin-bottom: 14px; }
    .footer__logo img { display: block; width: 108px; height: auto; }
    .footer__about {
      margin: 0 0 18px;
      font-size: 13.5px;
      color: rgba(255,255,255,0.82);
      max-width: 300px;
    }
    .footer__title {
      margin: 0 0 14px;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #fff;
    }
    .footer__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 9px;
    }
    .footer__list a,
    .footer__list span {
      font-size: 14px;
      color: rgba(255,255,255,0.82);
    }
    .footer__list a:hover { color: #fff; }
    .footer__list .is-current { color: #fff; font-weight: 700; }
    .footer__social { display: flex; gap: 9px; }
    .footer__social a {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(255,255,255,0.35);
      border-radius: 9px;
      color: #fff;
      transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
    }
    .footer__social a:hover { background: #fff; border-color: #fff; color: var(--blue); }

    .footer__bottom {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 24px;
      align-items: center;
      justify-content: space-between;
      padding: 18px 24px 26px;
      border-top: 1px solid rgba(255,255,255,0.2);
      font-size: 13px;
      color: rgba(255,255,255,0.8);
    }
    .footer__legal { display: flex; flex-wrap: wrap; gap: 18px; }
    .footer__legal a { color: rgba(255,255,255,0.8); }
    .footer__legal a:hover { color: #fff; }

    /* ---------- Responsive ---------- */
    @media (max-width: 980px) {
      .news-head { align-items: start; }
      .news-head__left,
      .news-head__right { grid-column: 1 / -1; }
      .news-head__sub { max-width: 620px; }
      .featured { grid-column: 1 / -1; }
      .news-list { grid-column: 1 / -1; margin-top: clamp(26px, 3.4vw, 40px); }
      .news-sec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .footer__grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 620px) {
      .news-wrap { padding: 22px 18px 0; }
      .news-sec { grid-template-columns: 1fr; }
      .news-item { grid-template-columns: 88px 1fr; gap: 14px; }
      .news-item__title { font-size: 15.5px; }
      .footer__grid { grid-template-columns: 1fr; }
      .footer__bottom { justify-content: flex-start; }
    }

    /* ===== Story page — 与 News 页同一套 token，s- 前缀 ===== */
    .hl { color: var(--primary); font-weight: 600; }

    .s-section { margin-top: clamp(56px, 7vw, 104px); }
    .s-media-wrap { overflow: hidden; }

    /* ---------- 1. Hero ---------- */
    .s-hero {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: clamp(24px, 3vw, 44px);
      align-items: end;
      margin-top: clamp(6px, 1.2vw, 16px);
      padding-bottom: clamp(8px, 1.4vw, 18px);
    }
    .s-hero__text { grid-column: 1 / span 6; }
    .s-hero__media { grid-column: 8 / span 5; }
    .s-hero__title {
      margin: 0 0 18px;
      font-size: clamp(34px, 4.4vw, 54px);
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: var(--n-text);
    }
    .s-hero__sub {
      margin: 0;
      max-width: 460px;
      font-size: 16px;
      color: var(--n-muted);
    }
    .ph-media--tall { aspect-ratio: 4 / 5; }
    .ph-media--map { aspect-ratio: 16 / 7; }
    .ph-media--wide { aspect-ratio: 3 / 2; }

    /* ---------- 2. Who we are ---------- */
    .s-about {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: clamp(24px, 3vw, 44px);
    }
    .s-about__label { grid-column: 1 / span 3; }
    .s-about__label .overline { position: sticky; top: 116px; margin: 0; }
    .s-about__body { grid-column: 1 / -1; max-width: 1020px; }
    .s-about__body p { margin: 0; color: var(--n-muted); }
    .s-about__body p + p { margin-top: 18px; }
    .s-about__lead {
      font-size: clamp(18px, 1.85vw, 23px);
      line-height: 1.5;
      font-weight: 500;
      color: var(--n-text) !important;
    }

    /* ---------- 3. Production line flowchart ---------- */
    .s-flow { margin-top: clamp(14px, 2vw, 26px); }
    .s-flow__head { margin-bottom: clamp(26px, 3.2vw, 44px); }
    .s-flow__head .overline {
      margin: 0 0 10px;
      font-size: 11.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--primary);
      font-weight: 600;
    }
    .s-flow__heading {
      margin: 0;
      font-size: clamp(22px, 2.4vw, 32px);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--n-text);
      max-width: 20ch;
    }
    .s-flow__track {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      --flow-colgap: clamp(20px, 2.4vw, 32px);
      --flow-rowgap: clamp(28px, 3.4vw, 46px);
      column-gap: var(--flow-colgap);
      row-gap: var(--flow-rowgap);
    }
    .s-flow__connector { display: none; }
    .s-flow__node {
      position: relative;
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: clamp(14px, 1.4vw, 18px);
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 16px;
      transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    }
    .s-flow__node:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 36px -20px rgba(8,70,147,.4);
      border-color: rgba(8,70,147,.45);
    }
    .s-flow__node .ph-media { border-radius: 10px; }
    .s-flow__badge {
      position: absolute;
      top: clamp(14px, 1.4vw, 18px);
      left: clamp(14px, 1.4vw, 18px);
      z-index: 2;
      width: 36px; height: 36px;
      display: grid; place-items: center;
      border-radius: 50%;
      background: var(--primary);
      color: #fff;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: -0.02em;
      box-shadow: 0 0 0 3px var(--bg);
    }
    .s-flow__body { display: flex; flex-direction: column; gap: 5px; }
    .s-flow__title {
      margin: 0;
      font-size: clamp(15px, 1.2vw, 17px);
      font-weight: 700;
      letter-spacing: -0.015em;
      color: var(--n-text);
    }
    .s-flow__desc { margin: 0; color: var(--n-muted); font-size: 12.5px; line-height: 1.45; }
    /* serpentine: row 1 L→R, row 2 R→L (after step 3 it turns down) */
    .s-flow__node:nth-of-type(1) { grid-area: 1 / 1; }
    .s-flow__node:nth-of-type(2) { grid-area: 1 / 2; }
    .s-flow__node:nth-of-type(3) { grid-area: 1 / 3; }
    .s-flow__node:nth-of-type(4) { grid-area: 2 / 3; }
    .s-flow__node:nth-of-type(5) { grid-area: 2 / 2; }
    .s-flow__node:nth-of-type(6) { grid-area: 2 / 1; }
    /* connector = line + arrowhead, drawn into the grid gaps */
    .s-flow__node::before,
    .s-flow__node::after { content: ""; position: absolute; z-index: 3; pointer-events: none; }
    /* → right arrow out of steps 1 & 2 */
    .s-flow__node:nth-of-type(1)::before,
    .s-flow__node:nth-of-type(2)::before {
      left: 100%; top: 50%; transform: translateY(-50%);
      width: var(--flow-colgap); height: 2px; background: var(--primary);
    }
    .s-flow__node:nth-of-type(1)::after,
    .s-flow__node:nth-of-type(2)::after {
      left: calc(100% + var(--flow-colgap) - 9px); top: 50%; transform: translateY(-50%);
      width: 0; height: 0;
      border-left: 9px solid var(--primary);
      border-top: 5px solid transparent; border-bottom: 5px solid transparent;
    }
    /* ↓ turn down after step 3 */
    .s-flow__node:nth-of-type(3)::before {
      top: 100%; left: 50%; transform: translateX(-50%);
      height: var(--flow-rowgap); width: 2px; background: var(--primary);
    }
    .s-flow__node:nth-of-type(3)::after {
      top: calc(100% + var(--flow-rowgap) - 9px); left: 50%; transform: translateX(-50%);
      width: 0; height: 0;
      border-top: 9px solid var(--primary);
      border-left: 5px solid transparent; border-right: 5px solid transparent;
    }
    /* ← left arrow out of steps 4 & 5 (row 2 runs right-to-left) */
    .s-flow__node:nth-of-type(4)::before,
    .s-flow__node:nth-of-type(5)::before {
      right: 100%; top: 50%; transform: translateY(-50%);
      width: var(--flow-colgap); height: 2px; background: var(--primary);
    }
    .s-flow__node:nth-of-type(4)::after,
    .s-flow__node:nth-of-type(5)::after {
      right: calc(100% + var(--flow-colgap) - 9px); top: 50%; transform: translateY(-50%);
      width: 0; height: 0;
      border-right: 9px solid var(--primary);
      border-top: 5px solid transparent; border-bottom: 5px solid transparent;
    }
    .s-flow__connector {
      flex: 0 0 auto;
      align-self: center;
      width: clamp(14px, 1.8vw, 34px);
      height: 2px;
      background: var(--primary);
      position: relative;
    }
    .s-flow__connector::after {
      content: "";
      position: absolute;
      right: -2px;
      top: 50%;
      transform: translateY(-50%);
      width: 0; height: 0;
      border-left: 9px solid var(--primary);
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }

    @media (max-width: 980px) {
      .s-flow__track { display: flex; flex-direction: column; gap: 0; }
      .s-flow__node {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding: 14px;
      }
      .s-flow__node .ph-media { flex: 0 0 128px; width: 128px; }
      .s-flow__body { flex: 1 1 auto; gap: 4px; }
      .s-flow__badge { top: 14px; left: 14px; width: 32px; height: 32px; font-size: 13px; }
      .s-flow__node::before,
      .s-flow__node::after { display: none; }
      .s-flow__connector {
        display: block;
        width: 2px;
        height: clamp(20px, 5vw, 30px);
        align-self: center;
      }
      .s-flow__connector::after {
        right: 50%;
        top: auto;
        bottom: -2px;
        transform: translateX(50%);
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 9px solid var(--primary);
        border-bottom: 0;
      }
    }

    /* ---------- 4. Mission / Vision / Values ---------- */
    .s-mvv {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(22px, 2.8vw, 40px);
      margin-top: clamp(26px, 3vw, 42px);
    }
    .s-mvv__col { border-top: 1px solid var(--border); padding-top: 20px; }
    .s-mvv__num {
      display: block;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.16em;
      color: var(--primary);
    }
    .s-mvv__title {
      margin: 14px 0 10px;
      font-size: clamp(20px, 2vw, 26px);
      font-weight: 700;
      letter-spacing: -0.015em;
      color: var(--n-text);
    }
    .s-mvv__col p { margin: 0; color: var(--n-muted); }

    /* ---------- 5. Milestones timeline ---------- */
    .s-timeline { position: relative; margin-top: clamp(28px, 3.4vw, 46px); padding-left: 32px; }
    .s-timeline::before {
      content: "";
      position: absolute;
      left: 5px;
      top: 8px;
      bottom: 8px;
      width: 1px;
      background: var(--border);
    }
    .s-mile { position: relative; padding-bottom: clamp(30px, 3.6vw, 50px); }
    .s-mile:last-child { padding-bottom: 0; }
    .s-mile::before {
      content: "";
      position: absolute;
      left: -32px;
      top: 9px;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: var(--bg);
      border: 2px solid var(--primary);
    }
    .s-mile__year {
      font-size: clamp(23px, 2.4vw, 32px);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--primary);
    }
    .s-mile__title {
      margin: 6px 0 8px;
      font-size: 17px;
      font-weight: 600;
      color: var(--n-text);
    }
    .s-mile p { margin: 0; max-width: 660px; color: var(--n-muted); }

    /* ---------- 6. Manufacturing & quality ---------- */
    .s-mfg {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: clamp(24px, 3vw, 44px);
      align-items: center;
    }
    .s-mfg__media { grid-column: 1 / span 6; }
    .s-mfg__body { grid-column: 8 / span 5; }
    .s-mfg__body h2 {
      margin: 0 0 14px;
      font-size: clamp(24px, 2.6vw, 34px);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.02em;
      color: var(--n-text);
    }
    .s-mfg__body p { margin: 0; color: var(--n-muted); }
    .s-list { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
    .s-list li { position: relative; padding-left: 20px; color: var(--n-muted); }
    .s-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 9px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--primary);
    }

    /* ---------- 7. Global reach ---------- */
    .s-reach {
      background: var(--n-soft);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      padding: clamp(28px, 3.4vw, 50px);
    }
    .s-reach__head {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: clamp(20px, 2.4vw, 32px);
    }
    .s-reach__title {
      margin: 0;
      font-size: clamp(22px, 2.4vw, 30px);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--n-text);
    }
    .s-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(18px, 2.4vw, 32px);
      margin-top: clamp(24px, 2.8vw, 38px);
    }
    .s-stat__num {
      font-size: clamp(30px, 3.6vw, 46px);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -0.03em;
      color: var(--primary);
    }
    .s-stat__label { margin-top: 10px; font-size: 13.5px; color: var(--n-muted); }

    /* ---------- 8. Team & culture ---------- */
    .s-team {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: clamp(20px, 2.6vw, 36px);
      align-items: end;
    }
    .s-team__a { grid-column: 1 / span 7; }
    .s-team__b { grid-column: 8 / span 5; }
    .s-quote {
      grid-column: 1 / span 12;
      margin: clamp(28px, 3.4vw, 48px) 0 0;
      padding-left: 26px;
      border-left: 3px solid var(--primary);
    }
    .s-quote p {
      margin: 0;
      font-size: clamp(19px, 2vw, 25px);
      line-height: 1.5;
      font-weight: 500;
      color: var(--n-text);
    }
    .s-quote cite {
      display: block;
      margin-top: 14px;
      font-style: normal;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--n-muted);
    }

    /* ---------- 9. CTA ---------- */
    .s-cta {
      border-top: 1px solid var(--border);
      margin-top: clamp(48px, 6vw, 88px);
      padding: clamp(40px, 5vw, 68px) 0 clamp(46px, 5.6vw, 76px);
    }
    .s-cta__title {
      margin: 0 0 12px;
      font-size: clamp(26px, 3vw, 38px);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--n-text);
    }
    .s-cta__sub { margin: 0 0 26px; max-width: 520px; color: var(--n-muted); }
    .s-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
    .btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px 32px;
      border: 1px solid var(--primary);
      border-radius: 8px;
      background: var(--primary);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
    }
    .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
    .btn-primary:hover .arrow { transform: translateX(4px); }

    /* ---------- Story responsive ---------- */
    @media (max-width: 1024px) {
      .s-hero__text,
      .s-hero__media,
      .s-about__label,
      .s-about__body,
      .s-mfg__media,
      .s-mfg__body,
      .s-team__a,
      .s-team__b,
      .s-quote { grid-column: 1 / span 12; grid-row: auto; }
      .s-about__label .overline { position: static; }
      .s-mvv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 700px) {
      .s-mvv,
      .s-stats { grid-template-columns: 1fr; }
      .s-cta { text-align: left; }
      .s-cta__actions .btn-primary { width: 100%; }
      .s-reach__map .ph-media--map { aspect-ratio: 4 / 3; }
    }
/* — 原 <style> 块 — */
* { -webkit-user-drag: none !important; }
/* — 原 <style> 块 — */
[data-sp-bindable="database"]{outline:1px dashed #0088ff;outline-offset:2px;border-radius:4px;}[data-sp-bindable="database"] *{pointer-events:none !important;transition:none !important;animation:none !important;}[data-sp-bindable="database"]{transition:none !important;animation:none !important;}
.pg-story-4 { --drawer-top: 103px; --topbar-h: 40px; }
.pg-story-5 { transform: scaleX(0.358); }

/* ===== news ===== */
/* — 原 <style> 块 — */
/* ===== News page — built on the site's design tokens =====
       规格色板映射：--primary #084693 / --bg #ffffff / --border #e5e7eb /
       soft #f8fafc / text #1f2937 / muted #6b7280
       （News 区专用值统一加 n- 前缀，避免覆盖站点全局 token） */
    :root {
      --primary: #084693;
      --primary-hover: #063a78;
      --bg: #ffffff;
      --border: #e5e7eb;
      --n-soft: #f8fafc;
      --n-text: #1f2937;
      --n-muted: #6b7280;
      --n-tag: #e6f0fa;
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      background: var(--bg);
      color: var(--n-text);
      font-size: 15.5px;
      line-height: 1.65;
    }
    a { color: var(--primary); text-decoration: none; }

    a:focus-visible,
    button:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
      border-radius: 4px;
    }

    .news-wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 28px 24px 0;
    }

    /* ---------- Breadcrumb ---------- */
    .breadcrumb {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      font-size: 12.5px;
      letter-spacing: 0.04em;
      color: var(--muted);
      margin-bottom: 26px;
    }
    .breadcrumb a { color: var(--muted); }
    .breadcrumb a:hover { color: var(--primary); }
    .breadcrumb .sep { opacity: 0.5; }
    .breadcrumb .current { color: var(--primary); font-weight: 600; }

    /* ---------- 1. Section header（12 栏：左标题 / 右副标题 + View All） ---------- */
    .news-head {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 22px clamp(20px, 2.6vw, 36px);
      align-items: end;
      padding-bottom: clamp(18px, 2.4vw, 28px);
      border-bottom: 1px solid var(--border);
    }
    .news-head__left { grid-column: 1 / span 7; }
    .news-head__right {
      grid-column: 9 / span 4;
      display: grid;
      gap: 14px;
      justify-items: start;
    }
    .overline {
      margin: 0 0 12px;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--primary);
    }
    .news-head__title {
      margin: 0;
      font-size: clamp(30px, 3.8vw, 48px);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.02em;
      color: var(--n-text);
    }
    .news-head__sub {
      margin: 0;
      max-width: 420px;
      font-size: 15px;
      color: var(--n-muted);
    }

    .link-arrow {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 13.5px;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: var(--primary);
    }
    .arrow {
      display: inline-block;
      transition: transform 0.25s var(--ease);
    }
    .link-arrow:hover .arrow { transform: translateX(5px); }

    /* ---------- Image placeholder module ---------- */
    .ph-media {
      display: grid;
      place-items: center;
      width: 100%;
      background: var(--n-soft);
      border: 1px solid var(--border);
      color: #9aa6b8;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      text-align: center;
      transition: transform 0.35s var(--ease);
    }
    .ph-media--16x9 { aspect-ratio: 16 / 9; }
    .ph-media--1x1 { aspect-ratio: 1 / 1; }
    .ph-media--4x3 { aspect-ratio: 4 / 3; }
    /* 真实图片填充占位模块：绝对定位强制裁切，保持 16:9/1:1/4:3 短长方形 */
    .ph-media { position: relative; }
    .ph-media img {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* ---------- 2. Featured editorial grid（左：7 栏头条 / 右：5 栏竖排列表） ---------- */
    .news-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: clamp(24px, 3vw, 44px);
      margin-top: clamp(30px, 4vw, 52px);
    }

    .featured {
      grid-column: 1 / span 7;
      display: block;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      overflow: hidden;
      transition: border-color 0.25s var(--ease);
    }
    .featured:hover { border-color: var(--primary); }
    .featured__media { overflow: hidden; }
    .featured:hover .ph-media { transform: scale(1.03); }
    .featured__body { padding: clamp(18px, 2vw, 26px); }
    .featured__title {
      margin: 0 0 12px;
      font-size: clamp(20px, 2.2vw, 28px);
      font-weight: 700;
      line-height: 1.22;
      letter-spacing: -0.01em;
      color: var(--n-text);
      transition: color 0.25s var(--ease);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .featured:hover .featured__title { color: var(--primary); }
    .featured__excerpt {
      margin: 0 0 18px;
      font-size: 15px;
      color: var(--n-muted);
    }

    .meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }
    .tag {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--primary);
      background: var(--n-tag);
      border-radius: 4px;
      padding: 4px 9px;
      white-space: nowrap;
    }
    .meta__date { font-size: 12.5px; color: var(--n-muted); }

    /* Right: latest news list —— 3 条在整列高度内分散排布，与左侧 featured 卡同高，消除底部空白 */
    .news-list {
      grid-column: 8 / span 5;
      display: grid;
      align-content: space-between;
    }
    .news-item {
      display: grid;
      grid-template-columns: 112px 1fr;
      gap: 18px;
      padding: 20px 0;
      border-top: 1px solid var(--border);
    }
    .news-item:first-child { border-top: 0; padding-top: 0; }
    .news-item:last-child { padding-bottom: 0; }
    .news-item__media { overflow: hidden; border-radius: 6px; }
    .news-item:hover .ph-media { transform: scale(1.04); }
    .news-item__media .ph-media { font-size: 9px; letter-spacing: 0.1em; }
    .news-item__meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-bottom: 7px;
    }
    .news-item__title {
      margin: 0;
      font-size: 16.5px;
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: -0.005em;
      color: var(--n-text);
      transition: color 0.25s var(--ease);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .news-item:hover .news-item__title { color: var(--primary); }
    .news-item__title .arrow {
      opacity: 0;
      transform: translateX(-6px);
      margin-left: 4px;
      color: var(--primary);
      transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
    }
    .news-item:hover .news-item__title .arrow { opacity: 1; transform: translateX(0); }

    /* ---------- 3. Secondary news row ---------- */
    .news-sec {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(20px, 2.6vw, 32px);
      margin-top: clamp(38px, 5vw, 68px);
    }
    .sec-card {
      display: grid;
      grid-template-rows: auto 1fr;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      overflow: hidden;
      transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
    }
    .sec-card:hover {
      border-color: var(--primary);
      box-shadow: 0 12px 30px rgba(11, 27, 51, 0.07);
    }
    .sec-card__media { overflow: hidden; }
    .sec-card:hover .ph-media { transform: scale(1.02); }
    .sec-card__body {
      display: grid;
      align-content: start;
      gap: 10px;
      padding: clamp(16px, 1.8vw, 22px);
    }
    .sec-card__title {
      margin: 0;
      font-size: 17px;
      font-weight: 600;
      line-height: 1.38;
      letter-spacing: -0.005em;
      color: var(--n-text);
      transition: color 0.25s var(--ease);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .sec-card:hover .sec-card__title { color: var(--primary); }
    .sec-card__excerpt {
      margin: 0;
      font-size: 14px;
      color: var(--n-muted);
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .sec-card__body .link-arrow { font-size: 13px; margin-top: 4px; }
    .sec-card .meta { margin-bottom: 2px; gap: 10px; }

    /* ---------- 4. Bottom action ---------- */
    .news-more {
      display: flex;
      justify-content: center;
      margin-top: clamp(36px, 4.6vw, 64px);
      padding: clamp(28px, 3.4vw, 44px) 0 clamp(46px, 6vw, 84px);
      border-top: 1px solid var(--border);
    }
    .btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 13px 30px;
      border: 1px solid var(--primary);
      border-radius: 8px;
      background: var(--bg);
      color: var(--primary);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
    }
    .btn-outline:hover { background: var(--primary); color: #fff; }
    .btn-outline:hover .arrow { transform: translateX(4px); }

    /* ---------- Pagination（1/2/3 页码切换） ---------- */
    .n-pager {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      margin-top: clamp(14px, 3.4vw, 36px);
      margin-bottom: clamp(26px, 3.6vw, 48px);
    }
    .n-pager__btn,
    .n-pager__num {
      min-width: 42px;
      height: 42px;
      padding: 0 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: #fff;
      color: var(--n-text);
      font: inherit;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
    }
    .n-pager__btn:hover:not(:disabled),
    .n-pager__num:hover { border-color: var(--primary); color: var(--primary); }
    .n-pager__num.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
    .n-pager__btn:disabled { opacity: 0.4; cursor: default; }
    [data-news-page][hidden] { display: none !important; }

    /* ---------- Footer ---------- */
    .site-footer {
      border-top: 1px solid rgba(255,255,255,0.18);
      background: var(--blue);
      color: #fff;
      padding: clamp(40px, 5vw, 68px) 0 0;
    }
    .site-footer .wrap { max-width: 1200px; }
    .footer__grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
      gap: clamp(24px, 3.4vw, 48px);
      padding-bottom: clamp(30px, 4vw, 46px);
    }
    .footer__logo { display: inline-block; margin-bottom: 14px; }
    .footer__logo img { display: block; width: 108px; height: auto; }
    .footer__about {
      margin: 0 0 18px;
      font-size: 13.5px;
      color: rgba(255,255,255,0.82);
      max-width: 300px;
    }
    .footer__title {
      margin: 0 0 14px;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #fff;
    }
    .footer__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 9px;
    }
    .footer__list a,
    .footer__list span {
      font-size: 14px;
      color: rgba(255,255,255,0.82);
    }
    .footer__list a:hover { color: #fff; }
    .footer__list .is-current { color: #fff; font-weight: 700; }
    .footer__social { display: flex; gap: 9px; }
    .footer__social a {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(255,255,255,0.35);
      border-radius: 9px;
      color: #fff;
      transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
    }
    .footer__social a:hover { background: #fff; border-color: #fff; color: var(--blue); }

    .footer__bottom {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 24px;
      align-items: center;
      justify-content: space-between;
      padding: 18px 24px 26px;
      border-top: 1px solid rgba(255,255,255,0.2);
      font-size: 13px;
      color: rgba(255,255,255,0.8);
    }
    .footer__legal { display: flex; flex-wrap: wrap; gap: 18px; }
    .footer__legal a { color: rgba(255,255,255,0.8); }
    .footer__legal a:hover { color: #fff; }

    /* ---------- Responsive ---------- */
    @media (max-width: 980px) {
      .news-head { align-items: start; }
      .news-head__left,
      .news-head__right { grid-column: 1 / -1; }
      .news-head__sub { max-width: 620px; }
      .featured { grid-column: 1 / -1; }
      .news-list { grid-column: 1 / -1; margin-top: clamp(26px, 3.4vw, 40px); }
      .news-sec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .footer__grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 620px) {
      .news-wrap { padding: 22px 18px 0; }
      .news-sec { grid-template-columns: 1fr; }
      .news-item { grid-template-columns: 88px 1fr; gap: 14px; }
      .news-item__title { font-size: 15.5px; }
      .footer__grid { grid-template-columns: 1fr; }
      .footer__bottom { justify-content: flex-start; }
    }
/* — 原 <style> 块 — */
* { -webkit-user-drag: none !important; }
/* — 原 <style> 块 — */
[data-sp-bindable="database"]{outline:1px dashed #0088ff;outline-offset:2px;border-radius:4px;}[data-sp-bindable="database"] *{pointer-events:none !important;transition:none !important;animation:none !important;}[data-sp-bindable="database"]{transition:none !important;animation:none !important;}
.pg-news-4 { --drawer-top: 93px; --topbar-h: 30px; }
.pg-news-5 { transform: scaleX(0.3379); }

/* ===== news-detail ===== */
/* — 原 <style> 块 — */
/* ===== News page — built on the site's design tokens =====
       规格色板映射：--primary #084693 / --bg #ffffff / --border #e5e7eb /
       soft #f8fafc / text #1f2937 / muted #6b7280
       （News 区专用值统一加 n- 前缀，避免覆盖站点全局 token） */
    :root {
      --primary: #084693;
      --primary-hover: #063a78;
      --bg: #ffffff;
      --border: #e5e7eb;
      --n-soft: #f8fafc;
      --n-text: #1f2937;
      --n-muted: #6b7280;
      --n-tag: #e6f0fa;
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      background: var(--bg);
      color: var(--n-text);
      font-size: 15.5px;
      line-height: 1.65;
    }
    a { color: var(--primary); text-decoration: none; }

    a:focus-visible,
    button:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
      border-radius: 4px;
    }

    .news-wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 28px 24px 0;
    }

    /* ---------- Breadcrumb ---------- */
    .breadcrumb {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      font-size: 12.5px;
      letter-spacing: 0.04em;
      color: var(--muted);
      margin-bottom: 26px;
    }
    .breadcrumb a { color: var(--muted); }
    .breadcrumb a:hover { color: var(--primary); }
    .breadcrumb .sep { opacity: 0.5; }
    .breadcrumb .current { color: var(--primary); font-weight: 600; }

    /* ---------- 1. Section header（12 栏：左标题 / 右副标题 + View All） ---------- */
    .news-head {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 22px clamp(20px, 2.6vw, 36px);
      align-items: end;
      padding-bottom: clamp(18px, 2.4vw, 28px);
      border-bottom: 1px solid var(--border);
    }
    .news-head__left { grid-column: 1 / span 7; }
    .news-head__right {
      grid-column: 9 / span 4;
      display: grid;
      gap: 14px;
      justify-items: start;
    }
    .overline {
      margin: 0 0 12px;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--primary);
    }
    .news-head__title {
      margin: 0;
      font-size: clamp(30px, 3.8vw, 48px);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.02em;
      color: var(--n-text);
    }
    .news-head__sub {
      margin: 0;
      max-width: 420px;
      font-size: 15px;
      color: var(--n-muted);
    }

    .link-arrow {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 13.5px;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: var(--primary);
    }
    .arrow {
      display: inline-block;
      transition: transform 0.25s var(--ease);
    }
    .link-arrow:hover .arrow { transform: translateX(5px); }

    /* ---------- Image placeholder module ---------- */
    .ph-media {
      display: grid;
      place-items: center;
      width: 100%;
      background: var(--n-soft);
      border: 1px solid var(--border);
      color: #9aa6b8;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      text-align: center;
      transition: transform 0.35s var(--ease);
    }
    .ph-media--16x9 { aspect-ratio: 16 / 9; }
    .ph-media--1x1 { aspect-ratio: 1 / 1; }
    .ph-media--4x3 { aspect-ratio: 4 / 3; }
    /* 真实图片填充占位模块：绝对定位强制裁切，保持 16:9/1:1/4:3 短长方形 */
    .ph-media { position: relative; }
    .ph-media img {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* ---------- 2. Featured editorial grid（7 栏 featured + 5 栏列表） ---------- */
    .news-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: clamp(24px, 3vw, 44px);
      margin-top: clamp(30px, 4vw, 52px);
    }

    .featured {
      grid-column: 1 / span 7;
      display: block;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      overflow: hidden;
      transition: border-color 0.25s var(--ease);
    }
    .featured:hover { border-color: var(--primary); }
    .featured__media { overflow: hidden; }
    .featured:hover .ph-media { transform: scale(1.03); }
    .featured__body { padding: clamp(18px, 2vw, 26px); }
    .featured__title {
      margin: 0 0 12px;
      font-size: clamp(20px, 2.2vw, 28px);
      font-weight: 700;
      line-height: 1.22;
      letter-spacing: -0.01em;
      color: var(--n-text);
      transition: color 0.25s var(--ease);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .featured:hover .featured__title { color: var(--primary); }
    .featured__excerpt {
      margin: 0 0 18px;
      font-size: 15px;
      color: var(--n-muted);
    }

    .meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }
    .tag {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--primary);
      background: var(--n-tag);
      border-radius: 4px;
      padding: 4px 9px;
      white-space: nowrap;
    }
    .meta__date { font-size: 12.5px; color: var(--n-muted); }

    /* Right: latest news list —— 3 条在整列高度内分散排布，与左侧 featured 卡同高，消除底部空白 */
    .news-list {
      grid-column: 8 / span 5;
      display: grid;
      align-content: space-between;
    }
    .news-item {
      display: grid;
      grid-template-columns: 112px 1fr;
      gap: 18px;
      padding: 20px 0;
      border-top: 1px solid var(--border);
    }
    .news-item:first-child { border-top: 0; padding-top: 0; }
    .news-item:last-child { padding-bottom: 0; }
    .news-item__media { overflow: hidden; border-radius: 6px; }
    .news-item:hover .ph-media { transform: scale(1.04); }
    .news-item__media .ph-media { font-size: 9px; letter-spacing: 0.1em; }
    .news-item__meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-bottom: 7px;
    }
    .news-item__title {
      margin: 0;
      font-size: 16.5px;
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: -0.005em;
      color: var(--n-text);
      transition: color 0.25s var(--ease);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .news-item:hover .news-item__title { color: var(--primary); }
    .news-item__title .arrow {
      opacity: 0;
      transform: translateX(-6px);
      margin-left: 4px;
      color: var(--primary);
      transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
    }
    .news-item:hover .news-item__title .arrow { opacity: 1; transform: translateX(0); }

    /* ---------- 3. Secondary news row ---------- */
    .news-sec {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(20px, 2.6vw, 32px);
      margin-top: clamp(38px, 5vw, 68px);
    }
    .sec-card {
      display: grid;
      grid-template-rows: auto 1fr;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      overflow: hidden;
      transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
    }
    .sec-card:hover {
      border-color: var(--primary);
      box-shadow: 0 12px 30px rgba(11, 27, 51, 0.07);
    }
    .sec-card__media { overflow: hidden; }
    .sec-card:hover .ph-media { transform: scale(1.02); }
    .sec-card__body {
      display: grid;
      align-content: start;
      gap: 10px;
      padding: clamp(16px, 1.8vw, 22px);
    }
    .sec-card__title {
      margin: 0;
      font-size: 17px;
      font-weight: 600;
      line-height: 1.38;
      letter-spacing: -0.005em;
      color: var(--n-text);
      transition: color 0.25s var(--ease);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .sec-card:hover .sec-card__title { color: var(--primary); }
    .sec-card__excerpt {
      margin: 0;
      font-size: 14px;
      color: var(--n-muted);
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .sec-card__body .link-arrow { font-size: 13px; margin-top: 4px; }
    .sec-card .meta { margin-bottom: 2px; gap: 10px; }

    /* ---------- 4. Bottom action ---------- */
    .news-more {
      display: flex;
      justify-content: center;
      margin-top: clamp(36px, 4.6vw, 64px);
      padding: clamp(28px, 3.4vw, 44px) 0 clamp(46px, 6vw, 84px);
      border-top: 1px solid var(--border);
    }
    .btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 13px 30px;
      border: 1px solid var(--primary);
      border-radius: 8px;
      background: var(--bg);
      color: var(--primary);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
    }
    .btn-outline:hover { background: var(--primary); color: #fff; }
    .btn-outline:hover .arrow { transform: translateX(4px); }

    /* ---------- Footer ---------- */
    .site-footer {
      border-top: 1px solid rgba(255,255,255,0.18);
      background: var(--blue);
      color: #fff;
      padding: clamp(40px, 5vw, 68px) 0 0;
    }
    .site-footer .wrap { max-width: 1200px; }
    .footer__grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
      gap: clamp(24px, 3.4vw, 48px);
      padding-bottom: clamp(30px, 4vw, 46px);
    }
    .footer__logo { display: inline-block; margin-bottom: 14px; }
    .footer__logo img { display: block; width: 108px; height: auto; }
    .footer__about {
      margin: 0 0 18px;
      font-size: 13.5px;
      color: rgba(255,255,255,0.82);
      max-width: 300px;
    }
    .footer__title {
      margin: 0 0 14px;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #fff;
    }
    .footer__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 9px;
    }
    .footer__list a,
    .footer__list span {
      font-size: 14px;
      color: rgba(255,255,255,0.82);
    }
    .footer__list a:hover { color: #fff; }
    .footer__list .is-current { color: #fff; font-weight: 700; }
    .footer__social { display: flex; gap: 9px; }
    .footer__social a {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(255,255,255,0.35);
      border-radius: 9px;
      color: #fff;
      transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
    }
    .footer__social a:hover { background: #fff; border-color: #fff; color: var(--blue); }

    .footer__bottom {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 24px;
      align-items: center;
      justify-content: space-between;
      padding: 18px 24px 26px;
      border-top: 1px solid rgba(255,255,255,0.2);
      font-size: 13px;
      color: rgba(255,255,255,0.8);
    }
    .footer__legal { display: flex; flex-wrap: wrap; gap: 18px; }
    .footer__legal a { color: rgba(255,255,255,0.8); }
    .footer__legal a:hover { color: #fff; }

    /* ---------- Responsive ---------- */
    @media (max-width: 980px) {
      .news-head { align-items: start; }
      .news-head__left,
      .news-head__right { grid-column: 1 / -1; }
      .news-head__sub { max-width: 620px; }
      .featured { grid-column: 1 / -1; }
      .news-list { grid-column: 1 / -1; margin-top: clamp(26px, 3.4vw, 40px); }
      .news-sec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .footer__grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 620px) {
      .news-wrap { padding: 22px 18px 0; }
      .news-sec { grid-template-columns: 1fr; }
      .news-item { grid-template-columns: 88px 1fr; gap: 14px; }
      .news-item__title { font-size: 15.5px; }
      .footer__grid { grid-template-columns: 1fr; }
      .footer__bottom { justify-content: flex-start; }
    }
      /* ===== News detail (article) page — 规格见编辑风 Article Detail =====
       沿用本页已有的 :root 令牌：--primary / --primary-hover / --bg / --border
       / --n-soft / --n-text / --n-muted / --n-tag（a- 前缀为本页专用） */
    .article-wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 28px 24px 0;
    }

    /* ---------- 1. Article header（与配图同宽，全宽编辑风栏） ---------- */
    .a-head {
      display: grid;
      justify-items: start;
      gap: 18px;
      /* 封面不进正文时，用分隔线把标题区与正文区分开 */
      padding-bottom: clamp(22px, 2.6vw, 30px);
      border-bottom: 1px solid var(--border);
      margin-bottom: clamp(30px, 4vw, 44px);
    }
    .a-title {
      margin: 0;
      font-size: clamp(28px, 4.2vw, 52px);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -0.025em;
      color: var(--n-text);
    }
    .a-dek {
      margin: 0;
      font-size: clamp(16px, 1.5vw, 18.5px);
      line-height: 1.62;
      color: var(--n-muted);
    }
    .a-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      padding-top: 8px;
      font-size: 13.5px;
      color: var(--n-muted);
      border-top: 1px solid var(--border);
      width: 100%;
      margin-top: 4px;
      padding-top: 18px;
    }
    .a-meta__who { color: var(--n-text); font-weight: 600; }
    .a-meta__dot { opacity: 0.45; }
    .a-avatar {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--n-soft);
      display: grid;
      place-items: center;
      font-size: 6.5px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      text-align: center;
      color: #9aa6b8;
      flex: 0 0 auto;
    }
    .a-avatar--lg { width: 56px; height: 56px; font-size: 7.5px; }

    /* ---------- 2. Figures（featured 16:9 宽幅 + 文内 4:3） ---------- */
    .a-figure {
      margin: clamp(30px, 4vw, 46px) 0 clamp(30px, 4vw, 48px);
    }
    .a-figure .ph-media { border-radius: 8px; overflow: hidden; }
    .a-figure--inline {
      margin: clamp(30px, 3.6vw, 44px) 0;
    }
    .a-cap {
      margin-top: 12px;
      font-size: 13px;
      line-height: 1.6;
      color: var(--n-muted);
    }

    /* ---------- 3. Article body（与配图同宽） ---------- */
    .a-body {
      font-size: 17px;
      line-height: 1.75;
      color: var(--n-text);
    }
    .a-body p { margin: 0 0 22px; }
    .a-body h2 {
      margin: clamp(38px, 4.4vw, 56px) 0 16px;
      font-size: clamp(22px, 2.4vw, 30px);
      font-weight: 700;
      line-height: 1.24;
      letter-spacing: -0.02em;
      color: var(--n-text);
    }
    .a-body h3 {
      margin: 30px 0 12px;
      font-size: 19px;
      font-weight: 700;
      color: var(--n-text);
    }
    .a-body .hl { color: var(--primary); font-weight: 600; }
    .a-body ul {
      margin: 0 0 24px;
      padding: 0;
      list-style: none;
    }
    .a-body ul li {
      position: relative;
      padding-left: 24px;
      margin-bottom: 11px;
    }
    .a-body ul li::before {
      content: "";
      position: absolute;
      left: 3px;
      top: 11px;
      width: 6px;
      height: 6px;
      border-radius: 1px;
      background: var(--primary);
    }
    .a-body ol {
      margin: 0 0 24px;
      padding-left: 22px;
    }
    .a-body ol li { margin-bottom: 10px; }
    .a-body ol li::marker { color: var(--primary); font-weight: 700; }

    /* ---------- 3.1 正文表格（后台粘贴/上传的 table 自动获得样式） ---------- */
    .a-body .a-table {
      position: relative;
      margin: 0 0 26px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--paper);
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
    }
    .a-body .a-table table { margin: 0; border-radius: 10px; }
    .a-body table {
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
      margin: 0 0 26px;
      font-size: 15px;
      line-height: 1.6;
      color: var(--body);
    }
    .a-body table th,
    .a-body table td {
      padding: 12px 16px;
      text-align: left;
      vertical-align: top;
      border-bottom: 1px solid var(--line);
      border-right: 1px solid var(--line);
      word-break: break-word;
    }
    .a-body table tr > *:last-child { border-right: 0; }
    .a-body table thead th,
    .a-body table thead td {
      background: #eef4fc;
      color: var(--blue-deep);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
      letter-spacing: 0.01em;
      vertical-align: middle;
      border-bottom: 1px solid #d9e3f1;
    }
    .a-body table tbody tr:nth-child(even) > td { background: #fafbfe; }
    .a-body table tbody tr:hover > td { background: #f3f7fd; }
    .a-body table tbody tr:last-child > td { border-bottom: 0; }
    .a-body table td strong,
    .a-body table th strong { color: var(--ink); font-weight: 700; }
    /* 两列表（参数名 / 参数值）：首列当标签列 */
    .a-body table.is-kv tbody td:first-child {
      width: 34%;
      background: #f6f9fd;
      color: var(--ink);
      font-weight: 600;
      border-right: 1px solid var(--line);
    }
    .a-body table.is-kv tbody tr:nth-child(even) td:first-child { background: #f1f6fd; }
    .a-body table.is-kv tbody tr:hover td:first-child { background: #eaf1fb; }
    /* 多列表格：窄屏不挤压，改为容器内横向滚动 */
    .a-body .a-table--scroll table { min-width: 620px; }

    /* Pull quote */
    .a-quote {
      margin: clamp(30px, 3.6vw, 46px) 0;
      padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 32px);
      background: var(--n-soft);
      border-left: 3px solid var(--primary);
      border-radius: 0 8px 8px 0;
      font-size: clamp(17px, 1.9vw, 21px);
      font-style: italic;
      font-weight: 500;
      line-height: 1.55;
      letter-spacing: -0.01em;
      color: var(--n-text);
    }

    /* ---------- 4. Article footer（tags + share） ---------- */
    .a-foot {
      margin: clamp(38px, 4.4vw, 58px) 0 0;
      padding-top: clamp(20px, 2.4vw, 28px);
      border-top: 1px solid var(--border);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }
    .a-tags { display: flex; flex-wrap: wrap; gap: 9px; }
    .a-tag {
      font-size: 12.5px;
      font-weight: 600;
      padding: 7px 13px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--n-soft);
      color: var(--n-text);
      transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
    }
    .a-tag:hover,
    .a-tag.is-active {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
    }
    .a-share { display: flex; align-items: center; gap: 10px; }
    .a-share__label {
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--n-muted);
      margin-right: 2px;
    }
    .a-share__ic {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      color: var(--n-muted);
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.04em;
      transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
    }
    .a-share__ic:hover { color: var(--primary); border-color: var(--primary); }

    /* ---------- 5. Author box ---------- */
    .a-author {
      margin: clamp(28px, 3.4vw, 44px) 0 0;
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: clamp(16px, 2vw, 22px);
      align-items: start;
      padding: clamp(20px, 2.4vw, 28px);
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
    }
    .a-author__name {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      color: var(--n-text);
    }
    .a-author__bio {
      margin: 7px 0 12px;
      font-size: 14.5px;
      line-height: 1.65;
      color: var(--n-muted);
    }
    .a-author .link-arrow { font-size: 13.5px; }

    /* ---------- 6. Related articles（3 / 2 / 1 栏） ---------- */
    .a-related { margin-top: clamp(46px, 5.4vw, 78px); }
    .a-related__head {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      justify-content: space-between;
      gap: 14px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--border);
    }
    .a-related__title {
      margin: 0;
      font-size: clamp(22px, 2.6vw, 32px);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--n-text);
    }
    .a-related .link-arrow { font-size: 13.5px; }
    .a-related__grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(20px, 2.6vw, 32px);
      margin-top: clamp(22px, 2.6vw, 34px);
    }
    .a-card {
      display: grid;
      grid-template-rows: auto 1fr;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
    }
    .a-card:hover {
      border-color: var(--primary);
      box-shadow: 0 12px 30px rgba(11, 27, 51, 0.07);
    }
    .a-card__media { overflow: hidden; }
    .a-card:hover .ph-media { transform: scale(1.02); }
    .a-card__body {
      display: grid;
      align-content: start;
      gap: 10px;
      padding: clamp(16px, 1.8vw, 22px);
    }
    .a-card .meta { margin-bottom: 2px; gap: 10px; }
    .a-card__title {
      margin: 0;
      font-size: 17px;
      font-weight: 600;
      line-height: 1.38;
      letter-spacing: -0.005em;
      color: var(--n-text);
      transition: color 0.25s var(--ease);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .a-card:hover .a-card__title { color: var(--primary); }
    .a-card__body .link-arrow { font-size: 13px; margin-top: 4px; }

    /* ---------- 7. Call to action ---------- */
    .a-cta {
      margin-top: clamp(48px, 6vw, 88px);
      padding: clamp(40px, 5vw, 68px) 0 clamp(46px, 5.6vw, 76px);
      border-top: 1px solid var(--border);
      text-align: center;
    }
    .a-cta h2 {
      margin: 0 0 12px;
      font-size: clamp(26px, 3vw, 38px);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--n-text);
    }
    .a-cta p {
      margin: 0 0 26px;
      font-size: 16px;
      color: var(--n-muted);
    }
    .a-cta__actions {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
    }
    .btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px 34px;
      border: 1px solid var(--primary);
      border-radius: 8px;
      background: var(--primary);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
    }
    .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
    .btn-primary .arrow { transition: transform 0.25s var(--ease); }
    .btn-primary:hover .arrow { transform: translateX(4px); }
    .a-cta__link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
      color: var(--primary);
    }
    .a-cta__link .arrow { transition: transform 0.25s var(--ease); }
    .a-cta__link:hover .arrow { transform: translateX(4px); }

    /* ---------- Article responsive ---------- */
    @media (max-width: 980px) {
      .a-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 700px) {
      .a-related__grid { grid-template-columns: 1fr; }
      .a-body { font-size: 16px; line-height: 1.72; }
      .a-title { font-size: clamp(26px, 8vw, 34px); }
      .a-foot { align-items: flex-start; flex-direction: column; }
      .a-cta { text-align: left; }
      .a-cta__actions { align-items: stretch; }
      .a-cta__actions .btn-primary { width: 100%; }
      .a-cta__link { justify-content: center; }
    }
/* — 原 <style> 块 — */
* { -webkit-user-drag: none !important; }
/* — 原 <style> 块 — */
[data-sp-bindable="database"]{outline:1px dashed #0088ff;outline-offset:2px;border-radius:4px;}[data-sp-bindable="database"] *{pointer-events:none !important;transition:none !important;animation:none !important;}[data-sp-bindable="database"]{transition:none !important;animation:none !important;}
.pg-news-detail-4 { --drawer-top: 63px; }
.pg-news-detail-5 { transform: scaleX(0.5967); }

/* ===== contact ===== */
/* — 原 <style> 块 — */
/* ===== Contact page — built on the site's design tokens =====
       规格色值映射：--primary #084693 / --bg #ffffff / --text 近黑 / --border 浅灰 */
    :root {
      --primary: #084693;
      --primary-hover: #063a78;
      --bg: #ffffff;
      --text: #1f2937;
      --border: #e5e7eb;
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      background: var(--bg);
      color: var(--text);
      line-height: 1.65;
      font-size: 15px;
    }
    a { color: var(--primary); text-decoration: none; }

    .contact-wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 28px 24px 0;
    }

    /* ---------- Breadcrumb ---------- */
    .breadcrumb {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      font-size: 12.5px;
      letter-spacing: 0.04em;
      color: var(--muted);
      margin-bottom: 26px;
    }
    .breadcrumb a { color: var(--muted); }
    .breadcrumb a:hover { color: var(--primary); }
    .breadcrumb .sep { opacity: 0.5; }
    .breadcrumb .current { color: var(--primary); font-weight: 600; }

    /* ---------- Page hero ---------- */
    .contact-hero {
      padding: 8px 0 clamp(16px, 2.4vw, 28px);
      border-bottom: 1px solid var(--border);
      margin-bottom: clamp(18px, 3vw, 38px);
    }
    .contact-hero__title {
      margin: 0 0 14px;
      font-size: clamp(30px, 4.4vw, 54px);
      line-height: 1.08;
      letter-spacing: -0.01em;
      color: var(--primary);
    }
    .contact-hero__sub {
      margin: 0;
      font-size: clamp(15px, 1.5vw, 17.5px);
      color: var(--muted);
    }

    /* ---------- Main section = 白底双栏 + 整宽表单 ----------
       第一行：左栏「联系信息 + 地址」/ 右栏「地图」；第二行：表单横跨两栏。
       本区块是 <main> 的直接子元素 → 天然满宽；左右内边距自己算出 1200px 栅格的留白，
       与上方 .contact-wrap 里的 hero 左缘严格对齐（--page-pad 对应 wrap 的水平内边距）。 */
    .contact-grid {
      --page-pad: 24px;
      --wrap-max: 1200px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(30px, 4vw, 54px) clamp(28px, 4.4vw, 64px);
      align-items: stretch;
      background: none;
      padding: 0 calc(max(0px, (100% - var(--wrap-max)) / 2) + var(--page-pad)) clamp(46px, 6vw, 84px);
    }
    /* 窄屏（手机）改为单列：联系信息 → 地图 → 表单 纵向堆叠 */
    @media (max-width: 640px) {
      .contact-grid { --page-pad: 18px; grid-template-columns: 1fr; }
      .map-card__map { min-height: clamp(170px, 46vw, 240px); }
    }

    .contact-info h2,
    .contact-form-card h2 {
      margin: 0 0 22px;
      font-size: clamp(19px, 2vw, 24px);
      letter-spacing: 0.01em;
      color: var(--ink);
    }

    /* 联系信息：无卡片、无底色、无边框；纵向单列、左对齐（图标在左，标签 + 内容在右） */
    .contact-info { background: none; border: 0; padding: 0; margin-left: 30px; }
    .contact-info__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
      justify-items: start;
      text-align: left;
      gap: clamp(20px, 2.2vw, 30px);
    }
    .contact-info__row {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 14px;
      min-width: 0;
      text-align: left;
    }
    /* 每项：图标在左，标签 + 内容在右侧左对齐堆叠 */
    .contact-info__row > span:not(.contact-info__icon) {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      min-width: 0;
      text-align: left;
    }
    .contact-info__row .contact-info__label { margin-bottom: 0; flex: none; white-space: nowrap; }
    .contact-info__row .contact-info__value { min-width: 0; }
    /* 图标：只保留品牌蓝描边图标本身（无底、无边框、无卡片） */
    .contact-info__icon {
      flex: none;
      display: grid;
      place-items: center;
      color: var(--primary);
    }
    .contact-info__row .contact-info__icon svg {
      width: 20px;
      height: 20px;
    }
    .contact-info__label {
      display: block;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 3px;
    }
    .contact-info__value {
      display: block;
      font-size: 16px;
      color: var(--ink);
      word-break: break-word;
    }
    .contact-info__value a { color: var(--primary); }
    .contact-info__value a:hover { text-decoration: underline; text-underline-offset: 3px; }
    /* 待补内容用浅色方括号标出，方便直接替换 */
    .ph { color: var(--muted); }

    /* ---------- Address 地图模块 ----------
       左栏信息列表下方：地址文字 + View on map 链接；右栏：地图占位区。
       后期接入 Google Maps：删掉 .map-card__map 里的 .map-card__ph，
       换成 <iframe class="map-card__frame" src="https://www.google.com/maps/embed?pb=...">
       即可（.map-card__frame 已铺满整个占位区），同时把 .map-card__link 的 href
       换成 Google Maps 的地址链接。 */
    .map-card__info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      min-width: 0;
      margin-top: clamp(22px, 2.6vw, 32px);
      padding-top: clamp(22px, 2.6vw, 32px);
      border-top: 1px solid var(--border);
    }
    .map-card__head {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--primary);
    }
    .map-card__head .contact-info__label { margin-bottom: 0; }
    .map-card__value {
      font-size: 16.5px;
      line-height: 1.6;
      color: var(--ink);
      max-width: 46ch;
    }
    .map-card__link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--primary);
      border-bottom: 1px solid currentColor;
      padding-bottom: 3px;
      transition: opacity 0.25s var(--ease), gap 0.25s var(--ease);
    }
    .map-card__link:hover { opacity: 0.72; gap: 12px; }

    /* 地图占位区：浅色地图底纹 + 居中定位针（接入 iframe 后自动被覆盖） */
    .map-card__map {
      position: relative;
      min-height: clamp(190px, 22vw, 250px);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      background-color: #eef3f9;
      background-image:
        repeating-linear-gradient(0deg, rgba(8, 70, 147, 0.07) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(90deg, rgba(8, 70, 147, 0.07) 0 1px, transparent 1px 34px),
        linear-gradient(122deg, transparent 0 44%, rgba(8, 70, 147, 0.1) 44% 46.6%, transparent 46.6% 100%),
        linear-gradient(58deg, transparent 0 61%, rgba(8, 70, 147, 0.08) 61% 63.2%, transparent 63.2% 100%);
    }
    .map-card__frame {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }
    .map-card__ph {
      position: absolute;
      inset: 0;
      display: grid;
      place-content: center;
      justify-items: center;
      gap: 10px;
      padding: 16px;
      text-align: center;
      color: var(--primary);
    }
    .map-card__ph-pin {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--primary);
      color: #ffffff;
      box-shadow: 0 10px 24px rgba(8, 70, 147, 0.28);
    }
    .map-card__ph-text {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .contact-info__social {
      display: flex;
      gap: 10px;
      padding-top: 4px;
      border-top: 1px solid var(--border);
      padding-top: 20px;
    }
    .contact-info__social a,
    .contact-info__social span {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border: 1px solid var(--border);
      border-radius: 9px;
      color: var(--primary);
      transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
    }
    .contact-info__social a:hover {
      background: var(--primary);
      border-color: var(--primary);
      color: #ffffff;
    }

    /* 表单卡：白底 + 浅灰细边 + 轻阴影；单列布局下占满容器宽度 */
    .contact-form-card {
      grid-column: 1 / -1;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: clamp(28px, 3.4vw, 52px);
      box-shadow: 0 18px 44px rgba(6, 14, 28, 0.07);
      container-type: inline-size;
    }

    .form__sent {
      text-align: center;
      padding: clamp(26px, 5vw, 54px) 0;
    }
    .form__sent-title {
      font-size: 21px;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 8px;
    }
    .form__sent-text { color: var(--muted); margin: 0 0 22px; }
    .form__again {
      font: inherit;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-size: 12.5px;
      color: var(--primary);
      background: none;
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 11px 22px;
      cursor: pointer;
      transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
    }
    .form__again:hover { border-color: var(--primary); }

    .cform { display: grid; gap: clamp(16px, 2vw, 22px); }
    .cform__row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(16px, 2vw, 22px);
    }
    @container (max-width: 520px) {
      .cform__row { grid-template-columns: 1fr; }
    }

    .cform__field { display: block; }
    .cform__label {
      display: block;
      margin-bottom: 6px;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      transition: color 0.3s var(--ease);
    }
    .cform__field:focus-within .cform__label { color: var(--primary); }
    .req { color: var(--primary); margin-left: 3px; }

    .cform__control { position: relative; display: block; }
    .cform__input {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 9px;
      background: var(--bg);
      padding: 12px 13px;
      font-family: inherit;
      font-size: 15.5px;
      color: var(--ink);
      transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
    }
    .cform__input::placeholder { color: var(--muted); opacity: 0.7; }
    .cform__input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(8, 70, 147, 0.12);
    }
    .cform__area { resize: vertical; min-height: 110px; }

    .field__error {
      display: block;
      margin-top: 6px;
      font-size: 12.5px;
      color: #c0392b;
    }

    /* Consent checkbox */
    .cform__consent {
      display: grid;
      grid-template-columns: 20px 1fr;
      gap: 11px;
      align-items: start;
      font-size: 13.5px;
      color: var(--muted);
      cursor: pointer;
    }
    .cform__consent input {
      appearance: none;
      -webkit-appearance: none;
      width: 19px;
      height: 19px;
      margin: 2px 0 0;
      border: 1.5px solid var(--border);
      border-radius: 5px;
      background: var(--bg);
      cursor: pointer;
      position: relative;
      transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
    }
    .cform__consent input:checked {
      background: var(--primary);
      border-color: var(--primary);
    }
    .cform__consent input:checked::after {
      content: "";
      position: absolute;
      left: 5px;
      top: 1.5px;
      width: 5px;
      height: 10px;
      border: solid #ffffff;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }
    .cform__consent input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

    /* Submit */
    .cform__submit {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 50px;
      padding: 0 30px;
      border: 0;
      border-radius: 999px;
      background: var(--primary);
      color: #ffffff;
      font: inherit;
      font-size: 13.5px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
    }
    .cform__submit:hover {
      background: var(--primary-hover);
      transform: translateY(-2px);
      box-shadow: 0 12px 26px rgba(8, 70, 147, 0.24);
    }
    .cform__submit:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

    /* ---------- Figure 2：表单视觉规格（下划线输入框 + 大药丸按钮） ---------- */
    .contact-form-card h2 {
      margin: 0 0 clamp(22px, 2.4vw, 32px);
      font-size: clamp(22px, 2.3vw, 30px);
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--text);
    }
    .cform { gap: clamp(20px, 2.4vw, 28px); }
    .cform__row { gap: clamp(20px, 2.6vw, 34px); }

    /* 标签：小字号、全大写、加粗、深灰蓝 */
    .cform__label {
      margin-bottom: 2px;
      font-size: 11.5px;
      letter-spacing: 0.14em;
      color: #334155;
    }

    /* 输入框：只要一条下划线，透明底、无圆角；聚焦时下划线变品牌蓝 */
    .cform__input {
      border: 0;
      border-bottom: 1px solid var(--border);
      border-radius: 0;
      background: transparent;
      padding: 10px 0 11px;
      font-size: 16px;
    }
    .cform__input:focus,
    .cform__input:focus-visible {
      outline: none;
      border-radius: 0;
      border-color: var(--primary);
      box-shadow: none;
    }
    .cform__area { min-height: 96px; }

    /* 提交按钮：大号、全宽、药丸形，白字 + 右箭头 */
    .cform__submit {
      width: 100%;
      min-height: 56px;
      margin-top: clamp(4px, 1vw, 10px);
      padding: 0 32px;
      font-size: 14px;
      letter-spacing: 0.12em;
      box-shadow: 0 14px 30px rgba(8, 70, 147, 0.22);
    }
    .cform__submit svg { transition: transform 0.25s var(--ease); }
    .cform__submit:hover svg { transform: translateX(4px); }

    /* 卡片底部备注（白卡内、表单下方） */
    .cform__note {
      margin: clamp(20px, 2.4vw, 28px) 0 0;
      padding-top: clamp(16px, 1.8vw, 22px);
      border-top: 1px solid var(--border);
      font-size: 13.5px;
      color: var(--muted);
    }
    .cform__note a {
      color: var(--primary);
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    /* ---------- Map section (placeholder module) ---------- */
    .map-section {
      padding-bottom: clamp(46px, 6vw, 84px);
    }
    .map-ph {
      position: relative;
      display: grid;
      place-items: center;
      width: 100%;
      min-height: clamp(240px, 32vw, 420px);
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--wash);
      color: var(--muted);
      text-align: center;
      padding: 24px;
    }
    .map-ph__inner {
      display: grid;
      gap: 8px;
      justify-items: center;
      border: 1px dashed #cfd8e5;
      border-radius: 10px;
      padding: 26px 34px;
    }
    .map-ph__label {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--primary);
    }
    .map-ph__note { font-size: 13px; }

    /* ---------- Footer ---------- */
    .site-footer {
      border-top: 1px solid rgba(255,255,255,0.18);
      background: var(--blue);
      color: #fff;
      padding: clamp(40px, 5vw, 68px) 0 0;
    }
    .site-footer .wrap { max-width: 1200px; }
    .footer__grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
      gap: clamp(24px, 3.4vw, 48px);
      padding-bottom: clamp(30px, 4vw, 46px);
    }
    .footer__logo { display: inline-block; margin-bottom: 14px; }
    .footer__logo img { display: block; width: 108px; height: auto; }
    .footer__about {
      margin: 0 0 18px;
      font-size: 13.5px;
      color: rgba(255,255,255,0.82);
      max-width: 300px;
    }
    .footer__title {
      margin: 0 0 14px;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #fff;
    }
    .footer__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 9px;
    }
    .footer__list a,
    .footer__list span {
      font-size: 14px;
      color: rgba(255,255,255,0.82);
    }
    .footer__list a:hover { color: #fff; }
    .footer__list .is-current { color: #fff; font-weight: 700; }
    .footer__social { display: flex; gap: 9px; }
    .footer__social a,
    .footer__social span {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(255,255,255,0.35);
      border-radius: 9px;
      color: #fff;
      transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
    }
    .footer__social a:hover { background: #fff; border-color: #fff; color: var(--blue); }

    .footer__bottom {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 24px;
      align-items: center;
      justify-content: space-between;
      padding: 18px 24px 26px;
      border-top: 1px solid rgba(255,255,255,0.2);
      font-size: 13px;
      color: rgba(255,255,255,0.8);
    }
    .footer__legal { display: flex; flex-wrap: wrap; gap: 18px; }
    .footer__legal a { color: rgba(255,255,255,0.8); }
    .footer__legal a:hover { color: #fff; }

    /* ---------- Responsive ---------- */
    /* 窄屏收紧信息行字号 */
    @media (max-width: 1100px) {
      .contact-info__row .contact-info__label { font-size: 11.5px; }
    }
    @media (max-width: 980px) {
      .footer__grid { grid-template-columns: 1fr 1fr; }
    }
    /* 地图模块：窄屏改为上下排列（地址在上、地图在下）；信息行并成一列 */
    @media (max-width: 860px) {
      .map-card { grid-template-columns: 1fr; }
      .map-card__map {
        border-left: 0;
        border-top: 1px solid var(--border);
        min-height: 200px;
      }
      .contact-info__list { grid-template-columns: 1fr; }
    }
    /* 小屏：信息行自然换行堆叠 */
    @media (max-width: 620px) {
      .contact-form-card { border-radius: 16px; }
      .contact-info__list { gap: 12px; }
      .contact-info__row { gap: 8px; }
      .contact-info__row > span:not(.contact-info__icon) { gap: 8px; }
    }
    @media (max-width: 620px) {
      .contact-wrap { padding: 22px 18px 0; }
      .cform__row { grid-template-columns: 1fr; }
      .cform__submit { width: 100%; }
      .footer__grid { grid-template-columns: 1fr; }
      .footer__bottom { justify-content: flex-start; }
    }
/* — 原 <style> 块 — */
* { -webkit-user-drag: none !important; }
/* — 原 <style> 块 — */
[data-sp-bindable="database"]{outline:1px dashed #0088ff;outline-offset:2px;border-radius:4px;}[data-sp-bindable="database"] *{pointer-events:none !important;transition:none !important;animation:none !important;}[data-sp-bindable="database"]{transition:none !important;animation:none !important;}
.pg-contact-4 { --drawer-top: 103px; --topbar-h: 40px; }
.pg-contact-5 { transform: scaleX(0.1695); }

/* ===== video ===== */
/* — 原 <style> 块 — */
/* ===== Video Gallery — built on the site's design tokens ===== */
    main.vg {
      --primary: #084693;
      --primary-hover: #063a78;
      --bg: #ffffff;
      --soft-bg: #f8fafc;
      --text: #1f2937;
      --muted: #6b7280;
      --border: #e5e7eb;
      --vg-wrap: 1200px;
      --vg-pad: 24px;
      --ease: cubic-bezier(0.22, 0.68, 0.32, 1);
      display: block;
      background: var(--bg);
      color: var(--text);
    }
    @media (max-width: 620px) { main.vg { --vg-pad: 18px; } }

    .vg-wrap {
      max-width: var(--vg-wrap);
      margin: 0 auto;
      padding-inline: var(--vg-pad);
    }

    /* ---------- Breadcrumb ---------- */
    .vg-crumb {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      padding-top: 28px;
      font-size: 12.5px;
      letter-spacing: 0.04em;
      color: var(--muted);
    }
    .vg-crumb a { color: var(--muted); transition: color 0.25s var(--ease); }
    .vg-crumb a:hover { color: var(--primary); }
    .vg-crumb__sep { opacity: 0.5; }
    .vg-crumb__current { color: var(--primary); font-weight: 600; }

    /* ---------- Page hero ---------- */
    .vg-hero {
      padding: 22px 0 clamp(30px, 4.4vw, 52px);
      border-bottom: 1px solid var(--border);
      margin-bottom: clamp(30px, 4.4vw, 52px);
    }
    .vg-overline {
      margin: 0 0 12px;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--primary);
    }
    .vg-hero__title {
      margin: 0 0 12px;
      font-size: clamp(32px, 4.6vw, 54px);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.02em;
      color: var(--text);
    }
    .vg-hero__sub {
      max-width: 640px;
      margin: 0;
      font-size: clamp(15px, 1.4vw, 16.5px);
      line-height: 1.7;
      color: var(--muted);
    }

    /* ---------- Filter bar ---------- */
    .vg-filters {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: clamp(18px, 2.6vw, 36px);
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border);
      margin-bottom: clamp(24px, 3vw, 36px);
    }
    .vg-filter {
      position: relative;
      padding: 4px 2px 12px;
      border: 0;
      background: none;
      font: inherit;
      font-size: 13.5px;
      font-weight: 600;
      letter-spacing: 0.06em;
      color: var(--muted);
      cursor: pointer;
      transition: color 0.25s var(--ease);
    }
    .vg-filter:hover { color: var(--primary); }
    .vg-filter.is-active { color: var(--primary); }
    .vg-filter.is-active::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      border-radius: 2px;
      background: var(--primary);
    }
    .vg-filter:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }

    .vg-empty {
      display: none;
      padding: 48px 0 8px;
      text-align: center;
      font-size: 15px;
      color: var(--muted);
    }
    .vg-empty.is-visible { display: block; }

    /* ---------- Video grid ---------- */
    .vg-grid-section {
      padding-bottom: clamp(46px, 6vw, 84px);
    }
    .vg-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(24px, 2.4vw, 32px);
    }
    @media (max-width: 980px) { .vg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 620px) { .vg-grid { grid-template-columns: minmax(0, 1fr); } }

    .vg-card {
      display: flex;
      flex-direction: column;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
    }
    .vg-card:hover,
    .vg-card:focus-within {
      border-color: var(--primary);
      box-shadow: 0 12px 32px rgba(8, 70, 147, 0.12);
      transform: translateY(-2px);
    }

    /* 16:9 module placeholder */
    .vg-thumb {
      position: relative;
      aspect-ratio: 16 / 9;
      background: var(--soft-bg);
      border-bottom: 1px solid var(--border);
      overflow: hidden;
    }
    .vg-thumb__inner {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background:
        repeating-linear-gradient(45deg, rgba(8, 70, 147, 0.028) 0 12px, transparent 12px 24px);
      transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
    }
    .vg-card:hover .vg-thumb__inner,
    .vg-card:focus-within .vg-thumb__inner { transform: scale(1.02); }

    .vg-thumb__label {
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .vg-thumb__play {
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: #fff;
      color: var(--muted);
      transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
        background-color 0.25s var(--ease), transform 0.25s var(--ease);
    }
    .vg-card:hover .vg-thumb__play,
    .vg-card:focus-within .vg-thumb__play {
      color: #fff;
      background: var(--primary);
      border-color: var(--primary);
      transform: scale(1.08);
    }
    .vg-thumb__ratio {
      position: absolute;
      right: 10px;
      bottom: 10px;
      padding: 2px 7px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.86);
      border: 1px solid var(--border);
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 0.08em;
      color: var(--muted);
      transition: opacity 0.25s var(--ease);
    }

    .vg-card__body {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
      padding: 18px 20px 20px;
    }
    .vg-card__title {
      margin: 0;
      font-size: 17px;
      font-weight: 600;
      line-height: 1.35;
      letter-spacing: -0.01em;
      color: var(--text);
    }
    .vg-card__desc {
      margin: 0;
      font-size: 15px;
      line-height: 1.6;
      color: var(--muted);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .vg-card__meta {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: auto;
      padding-top: 6px;
      font-size: 12.5px;
      letter-spacing: 0.04em;
      color: var(--muted);
    }
    .vg-card__meta .dot {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: currentColor;
      opacity: 0.6;
    }

    /* ---------- Load more ---------- */
    .vg-more {
      display: flex;
      justify-content: center;
      margin-top: clamp(32px, 4vw, 52px);
    }
    .vg-btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 34px;
      border: 1px solid var(--primary);
      border-radius: 6px;
      background: transparent;
      color: var(--primary);
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
    }
    .vg-btn-outline:hover,
    .vg-btn-outline:focus-visible { background: var(--primary); color: #fff; }

    /* ---------- Call to action ---------- */
    .vg-cta {
      background: var(--soft-bg);
      border-top: 1px solid var(--border);
      padding: clamp(46px, 6vw, 76px) 0;
    }
    .vg-cta__title {
      margin: 0 0 10px;
      font-size: clamp(24px, 3vw, 36px);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text);
    }
    .vg-cta__sub {
      max-width: 560px;
      margin: 0 0 26px;
      font-size: 15.5px;
      line-height: 1.7;
      color: var(--muted);
    }
    .vg-cta__actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px 24px;
    }
    .vg-btn {
      display: inline-flex;
      align-items: center;
      padding: 14px 32px;
      border-radius: 6px;
      background: var(--primary);
      color: #fff;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      transition: background-color 0.25s var(--ease);
    }
    .vg-btn:hover { background: var(--primary-hover); }
    .vg-link {
      color: var(--primary);
      font-size: 14px;
      font-weight: 600;
      transition: gap 0.25s var(--ease);
    }
    .vg-link:hover { text-decoration: underline; text-underline-offset: 3px; }

    /* ---------- Inline player（占位：直接在卡片小窗内播放，不再弹模态框） ---------- */
    .vg-card.is-playing {
      border-color: var(--primary);
      box-shadow: 0 12px 32px rgba(8, 70, 147, 0.14);
    }
    .vg-card.is-playing:hover { transform: none; }
    /* 播放中隐藏原占位内容与角标，露出播放器面板 */
    .vg-card.is-playing .vg-thumb__inner { opacity: 0; transform: none; }
    .vg-card.is-playing .vg-thumb__ratio { opacity: 0; }

    .vg-player {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px clamp(14px, 4%, 26px) 46px;
      background: radial-gradient(130% 130% at 50% -10%, #11406f 0%, #0b2140 55%, #071626 100%);
      color: #fff;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.28s var(--ease), visibility 0.28s var(--ease);
    }
    .vg-card.is-playing .vg-player { opacity: 1; visibility: visible; }

    .vg-player__status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 5px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: rgba(255, 255, 255, 0.1);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .vg-player__dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #7fb3ff;
      animation: vgPulse 1.5s ease-out infinite;
    }
    @keyframes vgPulse {
      0% { box-shadow: 0 0 0 0 rgba(127, 179, 255, 0.5); }
      70%, 100% { box-shadow: 0 0 0 9px rgba(127, 179, 255, 0); }
    }
    .vg-player__caption {
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #fff;
    }
    .vg-player__note {
      font-size: 11.5px;
      line-height: 1.5;
      text-align: center;
      color: rgba(255, 255, 255, 0.62);
    }
    .vg-player__stop {
      position: absolute;
      top: 10px;
      right: 10px;
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.28);
      background: rgba(255, 255, 255, 0.12);
      color: #fff;
      transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
    }
    .vg-card:hover .vg-player__stop { background: rgba(255, 255, 255, 0.24); transform: scale(1.06); }
    .vg-player__bottom {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 26px 14px 12px;
      background: linear-gradient(to top, rgba(4, 12, 24, 0.9), rgba(4, 12, 24, 0));
      font-size: 11px;
      letter-spacing: 0.04em;
      color: rgba(255, 255, 255, 0.75);
    }
    .vg-player__track {
      position: relative;
      flex: 1;
      height: 3px;
      border-radius: 2px;
      background: rgba(255, 255, 255, 0.22);
      overflow: hidden;
    }
    .vg-player__fill {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 0;
      border-radius: 2px;
      background: #7fb3ff;
    }
    .vg-player__time { font-variant-numeric: tabular-nums; }

    /* ---------- 卡内真实播放（覆盖占位播放器）：iframe 直接嵌进卡片小窗 ---------- */
    .vg-embed {
      position: absolute;
      inset: 0;
      z-index: 2;
      background: #000;
    }
    .vg-embed iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }
    .vg-embed-stop {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 3;
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.32);
      background: rgba(3, 12, 24, 0.68);
      color: #fff;
      cursor: pointer;
      transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
    }
    .vg-embed-stop:hover {
      background: rgba(3, 12, 24, 0.88);
      transform: scale(1.08);
    }
    .vg-card.is-playing .vg-player { opacity: 0; visibility: hidden; }
    @media (max-width: 620px) {
      .vg-player { gap: 8px; padding-bottom: 40px; }
      .vg-player__caption { font-size: 11.5px; }
      .vg-player__note { display: none; }
    }
    @media (prefers-reduced-motion: reduce) { .vg-player__dot { animation: none; } }

    /* ---------- Footer（与 story/news/products/contact 同一套，变量收在 .site-footer 上） ---------- */
    .site-footer {
      --primary: #084693;
      --bg: #ffffff;
      --border: #e5e7eb;
      border-top: 1px solid rgba(255,255,255,0.18);
      background: var(--blue);
      color: #fff;
      padding: clamp(40px, 5vw, 68px) 0 0;
    }
    .site-footer .wrap { max-width: 1200px; }
    .footer__grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
      gap: clamp(24px, 3.4vw, 48px);
      padding-bottom: clamp(30px, 4vw, 46px);
    }
    .footer__logo { display: inline-block; margin-bottom: 14px; }
    .footer__logo img { display: block; width: 108px; height: auto; }
    .footer__about {
      margin: 0 0 18px;
      font-size: 13.5px;
      color: rgba(255,255,255,0.82);
      max-width: 300px;
    }
    .footer__title {
      margin: 0 0 14px;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #fff;
    }
    .footer__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 9px;
    }
    .footer__list a,
    .footer__list span {
      font-size: 14px;
      color: rgba(255,255,255,0.82);
    }
    .footer__list a:hover { color: #fff; }
    .footer__list .is-current { color: #fff; font-weight: 700; }
    .footer__social { display: flex; gap: 9px; }
    .footer__social a {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(255,255,255,0.35);
      border-radius: 9px;
      color: #fff;
      transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
    }
    .footer__social a:hover { background: #fff; border-color: #fff; color: var(--blue); }
    .footer__bottom {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 24px;
      align-items: center;
      justify-content: space-between;
      padding: 18px 24px 26px;
      border-top: 1px solid rgba(255,255,255,0.2);
      font-size: 13px;
      color: rgba(255,255,255,0.8);
    }
    .footer__legal { display: flex; flex-wrap: wrap; gap: 18px; }
    .footer__legal a { color: rgba(255,255,255,0.8); }
    .footer__legal a:hover { color: #fff; }
    @media (max-width: 980px) {
      .footer__grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 620px) {
      .footer__grid { grid-template-columns: 1fr; }
      .footer__bottom { justify-content: flex-start; }
    }

    /* ---------- Fade-up on scroll ---------- */
    .vg-up {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    }
    .vg-up.is-in { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      .vg-up { opacity: 1; transform: none; transition: none; }
    }
/* — 原 <style> 块 — */
* { -webkit-user-drag: none !important; }
/* — 原 <style> 块 — */
[data-sp-bindable="database"]{outline:1px dashed #0088ff;outline-offset:2px;border-radius:4px;}[data-sp-bindable="database"] *{pointer-events:none !important;transition:none !important;animation:none !important;}[data-sp-bindable="database"]{transition:none !important;animation:none !important;}
.pg-video-4 { --drawer-top: 107px; --topbar-h: 30px; }
.pg-video-5 { transform: scaleX(0); }
.pg-video-6 { transition-delay: 0ms; }
.pg-video-7 { transition-delay: 60ms; }
.pg-video-8 { transition-delay: 120ms; }

/* ===== microfiber-towel ===== */
/* — 原 <style> 块 — */
/* ===== Product detail page — styled with the site's design tokens ===== */
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--paper);
    color: var(--ink);
    line-height: 1.6;
    font-size: 15px;
  }
  a { color: var(--blue); text-decoration: none; }

  /* ---------- Page container ---------- */
  .pdp-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px var(--gutter) 64px;
  }

  /* ---------- Product top section ---------- */
  .product {
    display: grid;
    /* 左列加宽：容器内容区 1152px 时左列 = 652px、右列 = 464px，
       左列 652 = 缩略图栏 114 + 间距 16 + 主图框 522（对齐参考图红框宽度） */
    grid-template-columns: 1.405fr 1fr;
    gap: 36px;
    /* 两栏各自按内容高度，不再拉伸对齐：右栏展开手风琴变高时，左图不跟着变高/位移 */
    align-items: start;
  }

  /* Gallery: thumbnails column + main image */
  .gallery {
    display: flex;
    gap: 16px;
    /* 右栏内容很长（特点手风琴全展开）时，图片列跟着页面粘住，不随内容滚动/下移 */
    position: sticky;
    top: calc(var(--topbar-h, 30px) + var(--header-h, 62px) + 16px);
    align-self: start;
  }
  /* 缩略图外框：竖排滚动条 + 上下箭头（箭头只在图片超出时出现） */
  .thumbs-rail {
    flex: 0 0 110px;
    align-self: start;              /* 高度随内容，不被右侧主图拉高 */
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .thumbs-rail > .thumbs { flex: 0 1 auto; }
  .thumbs-nav {
    display: grid;
    place-items: center;
    width: 100%;
    height: 26px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #ffffff;
    color: var(--blue);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  }
  .thumbs-nav[hidden] { display: none; }
  .thumbs-nav:hover { background: var(--blue); border-color: var(--blue); color: #ffffff; }
  .thumbs-nav:disabled,
  .thumbs-nav:disabled:hover {
    background: #ffffff;
    border-color: var(--line);
    color: var(--blue);
    opacity: 0.3;
    cursor: default;
  }
  .thumbs {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 12px;
    flex: 0 0 110px;
    max-height: 420px;              /* 约 3.5 张 110px 缩略图；再多的图纵向滚动 */
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--blue) #eeeeee;
    scroll-behavior: smooth;
  }
  .thumbs::-webkit-scrollbar { width: 8px; }
  .thumbs::-webkit-scrollbar-track { background: #eeeeee; border-radius: 4px; }
  .thumbs::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 4px; }
  .thumbs::-webkit-scrollbar-thumb:hover { background: var(--blue-deep); }
  .thumb {
    flex: 0 0 110px;
    width: 110px;
    height: 110px;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0.5px;
    background: #fafafa;
    cursor: pointer;
    transition: border-color 0.15s ease;
  }
  .thumb:hover,
  .thumb.is-active { border-color: var(--blue); border-width: 2px; }
  .main-image {
    position: relative;
    flex: 1 1 auto;
    /* 固定高度（沿用设计稿主图框 493px），只跟列宽无关，
       不再随右栏文字多少伸缩 —— 展开特点、加长文案，图片都纹丝不动 */
    align-self: start;
    height: 493px;
    border: 0;                       /* 去掉主图边框（原为黑框→蓝框） */
    border-radius: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 14px;
    letter-spacing: 1px;
    background: #fcfcfc;
  }

  /* ---------- Images fill their frames ---------- */
  .thumb img,
  .op-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .main-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ---------- Breadcrumb ---------- */
  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    padding: 4px 0 16px;
    letter-spacing: 0.2px;
  }
  .breadcrumb a { color: var(--muted); }
  .breadcrumb a:hover { color: var(--blue); }
  .breadcrumb .sep { opacity: 0.5; }
  .breadcrumb .current { color: var(--ink); font-weight: 600; }

  /* ---------- Product info panel ---------- */
  /* 右栏只剩 Product No + 标题（色卡/按钮已移走），用 min-height 保住原来的行高，
     主图才能维持搬迁前的 493px（桌面实测值），不被压成 232px */
  .info { padding-top: 4px; min-height: 493px; }
  .field-label {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 14px;
  }
  .field-value {
    color: var(--ink);
    font-size: 15px;
    margin-top: 2px;
  }
  .product-title {
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--ink);
  }
  /* 产品没填编号时，PRODUCT NO 区块整块不输出，标题顶上来的间距与有编号时保持一致 */
  .info > .product-title:first-child { margin-top: 14px; }

  /* COLOR swatch grid: 7 columns x 5 rows = 35 swatches */
  .swatches {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-top: 8px;
    max-width: 392px;
  }
  /* 色卡：纯展示（点击选择效果已按需求去掉），不可交互 */
  .swatch {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 48px;
    justify-self: center;
    border-radius: 50%;
    border: 2px solid var(--line);
  }

  /* 色卡板块（原右侧信息栏 → Color 区块）：小色卡，两排（18+18）整齐排开、无点击效果 */
  .color-section .swatches {
    grid-template-columns: repeat(18, minmax(0, 1fr));
    gap: 6px;
    margin-top: 18px;
    max-width: none;
  }

  /* ---------- Description ---------- */
  .section { margin-top: 56px; }
  .section h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--blue);
    display: inline-block;
  }
  /* OTHER PRODUCTS 标题：居中 + 蓝色下划线（与目标图一致），字号 50px */
  .section h2.other-title {
    display: block;
    width: fit-content;
    margin-inline: auto;
    padding-bottom: 6px;
    border-bottom: 3px solid var(--blue);
    font-size: 45px;
  }
  .description-text {
    color: var(--muted);
    /* 详细描述：不设宽度上限，铺满页面内容区 */
  }
  /* 信息栏内的 Features（特点）区块：去掉 .section 默认的 56px 上间距，紧贴标题下方 */
  .info .section.pdp-features { margin-top: 22px; }
  .feature-list {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    max-width: 460px;
  }
  .feature-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 10px;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.55;
  }
  .feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--blue);
  }

  /* OTHER PRODUCTS — related product cards */
  .other-products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 20px;
  }
  .op-card {
    display: block;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  }
  .op-card:hover,
  .op-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(11, 27, 51, 0.10);
    border-color: var(--blue);
    outline: none;
  }
  .op-image {
    aspect-ratio: 4 / 3;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0.5px;
    background: #fafafa;
  }
  /* 卡片名与 OTHER PRODUCTS 标题同字号（20px） */
  .op-name {
    padding: 10px 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
  }

  /* ---------- Inquiry bar (banner + email + submit) ---------- */
  /* 整组（左按钮 + 输入框 + 右按钮）在页面容器内水平居中，间距 16px 均等 */
  .inquiry-bar {
    margin-top: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  .unlock-banner {
    background: var(--blue);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 15px 38px;
    transform: skewX(-18deg);
    white-space: nowrap;
  }
  .unlock-banner span {
    display: inline-block;
    transform: skewX(18deg);
  }
  /* 表单盒子不参与布局（display:contents）：input 与 SUBMIT 直接作为 .inquiry-bar 的
     弹性子项，这样输入框的百分比宽度才对「页面容器」计算，而不是对表单自身（否则循环）。 */
  .inquiry-form {
    display: contents;
  }
  /* EMAIL* 输入框宽度：介于「一张卡」与「两张卡+间距」之间，取略窄一档
     （OTHER PRODUCTS 卡片栅格 = repeat(4,1fr) gap 18px，原为 50% - 9px = 567px） */
  .inquiry-form input {
    flex: 0 0 auto;
    width: calc(44% - 10px);
    min-width: 0;
    padding: 12px 14px;
    border: 2px solid #111;
    border-radius: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--ink);
    background: #fff;
  }
  .inquiry-form input::placeholder {
    color: #333;
    font-weight: 700;
    letter-spacing: 1px;
  }
  .inquiry-form input:focus {
    outline: none;
    border-color: var(--blue);
  }
  .submit-pill {
    background: #fff;
    color: var(--blue);
    border: 2px solid var(--blue);
    border-radius: 999px;
    padding: 9px 28px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .submit-pill:hover {
    background: var(--blue);
    color: #fff;
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 860px) {
    .product {
      grid-template-columns: 1fr;
      gap: 28px;
    }
    /* 单列布局：撤掉桌面那条保主图高度的 min-height，否则标题下方会空出 493px */
    .info { min-height: 0; }
    /* 窄屏：色卡改整齐 9 列（4 排），不自动折行、保持小尺寸 */
    .color-section .swatches {
      grid-template-columns: repeat(9, minmax(0, 1fr));
      gap: 10px;
    }
    .gallery {
      flex-direction: column-reverse;
      min-width: 0; /* 网格子项默认 min-width:auto，会被缩略图内容宽度撑破视口 */
      /* 单列布局取消粘附，否则图片会压住下面的文字 */
      position: static;
      top: auto;
    }
    /* 手机：缩略图改横排滑动，竖排箭头隐藏 */
    .thumbs-rail {
      flex: none;
      width: 100%;
      min-width: 0;
    }
    .thumbs-rail > .thumbs { flex: none; }
    .thumbs-nav { display: none; }
    .thumbs {
      flex: none;
      flex-direction: row;
      width: 100%;
      min-width: 0;
      max-height: none;
      overflow-x: auto;
      overflow-y: hidden;
    }
    .thumb {
      flex: 0 0 90px;
      width: 90px;
      height: 90px;
    }
    /* 手机/平板单列：主图恢复「整宽 + 固定最小高度」，不套用桌面固定高度 */
    .main-image { min-height: 320px; height: auto; aspect-ratio: auto; align-self: stretch; }
    .other-products { grid-template-columns: repeat(2, 1fr); }
  }

  /* 底部 CTA：视口窄到「左按钮 + 输入框 + 右按钮」一行放不下时（约 <980px），
     改为纵向堆叠，各占整宽 —— 避免 flex-wrap 产生 awkward 的断行 */
  @media (max-width: 980px) {
    .inquiry-bar { flex-direction: column; align-items: stretch; gap: 16px; }
    .unlock-banner { text-align: center; }
    /* .inquiry-form 是 display:contents，input / SUBMIT 直接跟随父级纵向堆叠 */
    .inquiry-form input { width: 100%; }
    .submit-pill { width: 100%; padding: 12px 0; }
  }

  @media (max-width: 520px) {
    .other-products { grid-template-columns: 1fr; }
    .pdp-wrap { padding: 24px 16px 48px; }
    .product-title { font-size: 24px; }
    .section h2.other-title { font-size: 34px; padding-bottom: 4px; }
  }

  /* 菜单里当前正在浏览的产品高亮 */
  .drawer__sub3.is-current,
  .drawer__sub.is-current { color: var(--blue); font-weight: 700; }
  .drawer__gallery-item.is-current img { outline: 2px solid var(--blue); outline-offset: -2px; }

  /* ---------- Footer（蓝底白字，与全站页脚一致） ---------- */
  .site-footer {
    border-top: 1px solid rgba(255,255,255,0.18);
    background: var(--blue);
    color: #fff;
    padding: clamp(40px, 5vw, 68px) 0 0;
  }
  .site-footer .wrap { max-width: 1200px; }
  .footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: clamp(24px, 3.4vw, 48px);
    padding-bottom: clamp(30px, 4vw, 46px);
  }
  .footer__logo { display: inline-block; margin-bottom: 14px; }
  .footer__logo img { display: block; width: 108px; height: auto; }
  .footer__about {
    margin: 0 0 18px;
    font-size: 13.5px;
    color: rgba(255,255,255,0.82);
    max-width: 300px;
  }
  .footer__title {
    margin: 0 0 14px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
  }
  .footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 9px;
  }
  .footer__list a,
  .footer__list span {
    font-size: 14px;
    color: rgba(255,255,255,0.82);
  }
  .footer__list a:hover { color: #fff; }
  .footer__list .is-current { color: #fff; font-weight: 700; }
  .footer__social { display: flex; gap: 9px; }
  .footer__social a,
  .footer__social span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 9px;
    color: #fff;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }
  .footer__social a:hover { background: #fff; border-color: #fff; color: var(--blue); }

  .footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 26px;
    border-top: 1px solid rgba(255,255,255,0.2);
    font-size: 13px;
    color: rgba(255,255,255,0.8);
  }
  .footer__legal { display: flex; flex-wrap: wrap; gap: 18px; }
  .footer__legal a { color: rgba(255,255,255,0.8); }
  .footer__legal a:hover { color: #fff; }
/* — 原 <style> 块 — */
* { -webkit-user-drag: none !important; }
/* — 原 <style> 块 — */
[data-sp-bindable="database"]{outline:1px dashed #0088ff;outline-offset:2px;border-radius:4px;}[data-sp-bindable="database"] *{pointer-events:none !important;transition:none !important;animation:none !important;}[data-sp-bindable="database"]{transition:none !important;animation:none !important;}
.pg-microfiber-towel-4 { --drawer-top: 93px; --topbar-h: 30px; }
.pg-microfiber-towel-5 { transform: scaleX(0.7547); }


/* ===== 询盘表单：验证码 / 错误提示 / 蜜罐（后台可查收） ===== */
.form__captcha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 2px;
}

.form__captcha-label {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.form__captcha-img {
  display: block;
  width: 86px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #f8efda;
}

.form__captcha-input {
  width: 92px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: 600 13px/1 var(--font);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  outline: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.form__captcha-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-tint);
}

.form__captcha-refresh {
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--wash);
  color: var(--blue);
  font: 600 12px/1 var(--font);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.form__captcha-refresh:hover {
  background: var(--blue-tint);
  border-color: #c9d9f1;
}

.form__captcha .field__error {
  flex: 1 1 100%;
  margin-top: 0;
  color: #c0392b;
}

.form__error {
  display: block;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #c0392b;
}

.form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.inquiry-form input.is-invalid {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

/* ===== News 列表页：正文与蓝色页脚之间的呼吸间距（原 news-wrap 下内边距为 0，卡片贴页脚） ===== */
.news-wrap {
  padding-bottom: clamp(72px, 9vh, 120px);
}

/* ===== NEWS LIST — vertical list style (matches local static site news.html, 2026-10-20) ===== */
/* List occupies full content width, aligned with the NEWS heading left edge */
.news-grid {
  display: block;
  margin-top: clamp(26px, 4vw, 44px);
}
.news-list {
  display: block;
  max-width: none;
  margin: 0;
}
/* Row: thumbnail left, text right, top-aligned */
.news-item {
  display: grid;
  grid-template-columns: 196px 1fr;
  gap: 22px;
  align-items: start;
  padding: 24px 0;
  border-top: 1px solid var(--border);
}
.news-item:first-child { border-top: 0; padding-top: 0; }
.news-item:last-child { padding-bottom: 0; }
.news-item__media { border-radius: 10px; overflow: hidden; }
.news-item__title { font-size: 18px; line-height: 1.35; }
/* Intro text below title (from smalltext field), no width limit */
.news-item__excerpt {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
  max-width: none;
}
/* Arrow always visible on list rows */
.news-item__title .arrow { opacity: 1; transform: none; margin-left: 6px; color: var(--primary); }
.news-item:hover .news-item__title .arrow { transform: translateX(3px); }
/* Featured big card removed from template; hide as safety net */
.featured { display: none !important; }
@media (max-width: 620px) {
  .news-item { grid-template-columns: 92px 1fr; gap: 14px; padding: 18px 0; }
  .news-item__title { font-size: 15.5px; }
}

/* ==================== Search page ==================== */
.srch { grid-column: 1 / -1; }
.srch__form { display: flex; gap: 10px; margin: 20px 0 0; }
.srch__input {
  flex: 1 1 auto; min-width: 0; height: 54px; padding: 0 22px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font-family: inherit; font-size: 16px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.srch__input::placeholder { color: var(--muted); }
.srch__input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-tint); }
.srch__btn {
  flex: 0 0 auto; height: 54px; padding: 0 32px;
  border: 0; border-radius: 999px; background: var(--blue); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: .02em;
  cursor: pointer; transition: background-color .2s var(--ease);
}
.srch__btn:hover { background: var(--blue-deep); }
.srch__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.srch__tags-label { font-size: 13px; color: var(--muted); margin-right: 4px; align-self: center; }
.srch__tag {
  padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; color: var(--body); text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.srch__tag:hover { border-color: var(--blue); color: var(--blue); }
.srch__count { grid-column: 1 / -1; margin: 22px 0 0; font-size: 14px; color: var(--muted); }
.srch__count b { color: var(--ink); font-weight: 700; }
.srch__group {
  grid-column: 1 / -1; margin: 34px 0 0;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.srch__grid {
  grid-column: 1 / -1; margin-top: 14px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px);
}
.srch-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color: inherit; text-decoration: none;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.srch-card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: 0 14px 32px rgba(8, 70, 147, .10); }
.srch-card__media { aspect-ratio: 1 / 1; background: var(--wash); overflow: hidden; }
.srch-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.srch-card__body { padding: 12px 14px 16px; }
.srch-card__cat { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.srch-card__title { margin: 4px 0 0; font-size: 15px; line-height: 1.4; color: var(--ink); }
.srch__empty { grid-column: 1 / -1; padding: 64px 0; text-align: center; }
.srch__empty-title { margin: 0 0 8px; font-size: 20px; color: var(--ink); }
.srch__empty-text { margin: 0; color: var(--muted); font-size: 15px; }
.srch mark { padding: 0 2px; border-radius: 3px; background: #fff2b8; color: inherit; }

@media (max-width: 900px) {
  .srch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .srch__form { flex-direction: column; }
  .srch__btn { width: 100%; }
}

/* Search page: keep the footer close to the viewport bottom on short pages */
.news-wrap.srch-page { min-height: calc(100vh - 520px); }
@media (max-width: 900px) {
  .news-wrap.srch-page { min-height: calc(100vh - 420px); }
}

/* Search page: never let the field push the layout wider than the viewport */
@media (max-width: 900px) {
  .srch, .srch__form, .srch__tags, .srch__grid, .srch__input, .srch__btn { max-width: 100%; min-width: 0; }
  .srch__input { width: 100%; }
}

/* Footer: make the mobile stacking rules actually win (they were losing to later duplicates) */
@media (max-width: 620px) {
  .site-footer .wrap.footer__grid { grid-template-columns: 1fr; gap: 26px; }
  .footer__about { max-width: none; }
}
@media (min-width: 621px) and (max-width: 980px) {
  .site-footer .wrap.footer__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

  /* ===== 富文本输出（后台产品特点 / 产品详情信息） ===== */
  .feature-rich { font-size: 14px; line-height: 1.65; color: var(--ink); }
  .feature-rich p { margin: 0 0 10px; }
  .feature-rich ul, .feature-rich ol { margin: 0 0 10px 20px; padding: 0; }
  .feature-rich li { margin: 6px 0; }
  .feature-rich strong, .feature-rich b { font-weight: 700; }
  .feature-rich img { max-width: 100%; height: auto; border-radius: 8px; }
  .feature-rich a { color: var(--blue); text-decoration: underline; }

  .description-rich { color: var(--muted); font-size: 15px; line-height: 1.85; }
  .description-rich p { margin: 0 0 14px; }
  .description-rich ul, .description-rich ol { margin: 0 0 14px 20px; padding: 0; }
  .description-rich li { margin: 6px 0; }
  .description-rich h3, .description-rich h4 { margin: 22px 0 10px; color: var(--ink); font-size: 18px; line-height: 1.4; }
  .description-rich strong, .description-rich b { color: var(--ink); font-weight: 700; }
  .description-rich img { max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0; }
  .description-rich a { color: var(--blue); text-decoration: underline; }
  .description-rich table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
  .description-rich th, .description-rich td { padding: 10px 12px; border: 1px solid #e2ebf2; text-align: left; vertical-align: top; }
  .description-rich th { background: #f5f9fc; color: var(--ink); font-weight: 700; }

  /* ===== 产品详情：FEATURE 标题（下划线拉满整列） ===== */
  .info .section.pdp-features > h2 {
    display: block;
    width: 100%;
    margin: 0 0 14px;
    padding-bottom: 9px;
    border-bottom: 2px solid var(--blue);
    font-size: 20px;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  /* ===== 产品详情：特点手风琴 ===== */
  .pdp-acc {
    margin-top: 2px;
    border-top: 1px solid var(--line);
  }
  .pdp-acc__item {
    border-bottom: 1px solid var(--line);
  }
  /* 高度过渡：JS 只负责设 height，动效全交给 CSS，避免逐帧重排抖动 */
  .pdp-acc.is-acc-ready .pdp-acc__item {
    overflow: hidden;
    transition: height .32s cubic-bezier(.22, .61, .36, 1);
  }
  .pdp-acc.is-acc-ready .pdp-acc__item.is-animating {
    will-change: height;
  }
  .pdp-acc__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 2px;
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--ink);
    transition: color .15s ease;
    outline: none;
  }
  .pdp-acc__head::-webkit-details-marker { display: none; }
  .pdp-acc__head:hover { color: var(--blue); }
  .pdp-acc__head:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
  .pdp-acc__title { flex: 1 1 auto; min-width: 0; }
  .pdp-acc__icon {
    position: relative;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-top: 3px;
  }
  .pdp-acc__icon::before,
  .pdp-acc__icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--blue);
    border-radius: 1px;
    transform: translate(-50%, -50%);
  }
  .pdp-acc__icon::before { width: 12px; height: 2px; }
  .pdp-acc__icon::after { width: 2px; height: 12px; transition: transform .2s ease, opacity .2s ease; }
  .pdp-acc__item[open] .pdp-acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
  .pdp-acc__body {
    padding: 0 2px 14px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--muted);
  }
  .pdp-acc__body p { margin: 0 0 8px; }
  .pdp-acc__body p:last-child { margin-bottom: 0; }
  .pdp-acc__body strong, .pdp-acc__body b { color: var(--ink); }
  .pdp-acc__body img { max-width: 100%; height: auto; border-radius: 8px; }
  /* 没有详情文字的条目：纯文字行，不可点击、不显示 +/− */
  .pdp-acc__item--flat { border-bottom: 1px solid var(--line); }
  .pdp-acc__item--flat:last-child { border-bottom: 0; }
  .pdp-acc__head.is-static { cursor: default; }
  .pdp-acc__head.is-static:hover { color: var(--ink); }