/* ==========================================================================
   Tropica Template (template-h) — Complete CSS
   Replicates https://tropica.framer.website design system
   ========================================================================== */

/* Inter 自托管（原为 render-blocking 的 fonts.googleapis.com <link>：该域名丢包不拒绝时首屏会被挂到浏览器超时，实测 62s 白屏）。
   v20 可变字体，wght 轴一个文件覆盖 400/500/600/700；unicode-range 与 Google 原声明保持一致。 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Reset & Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body {
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1a1a1a;
  background: #fff;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; height: auto; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; }

/* Design Tokens (matching Tropica Framer variables) */
:root {
  --color-white: #fff;
  --color-black: #1a1a1a;
  --color-bg-light: #f7f7f7;
  --color-border: #c4c4c4;
  --color-gray: gray;
  --color-white-50: #ffffff80;
  --color-text-2: #5e5e5e;
  --color-border-2: #c4c4c44d;
  --color-light: #ededed;
  --color-overlay: #1c1c1ce6;

  --font-display: "Inter Display", "Inter Display Placeholder", sans-serif;
  --font-body: "Inter", "Inter Placeholder", sans-serif;
  --font-heading: "Open Sauce One", sans-serif;
  --font-alan: "Alan Sans", "Alan Sans Placeholder", sans-serif;
  --font-dm: "DM Sans", "DM Sans Placeholder", sans-serif;

  --max-width: 1400px;
  --page-pad: 40px;
  --section-pad: 100px;

  /* 字号标度（2026-10-22 重新定标）
     一档只承担一个角色，各页面同类角色一律取同一个变量；要改观感就改这里，不要到下面的规则里散着写死。
     断点尺寸交给 clamp，所以原先散在 @media 里的 .hero__h1 / .page-hero__h1 / .about__body /
     .expertise__panels .expertise__name / .partners--simple .partners__name 字号覆盖一并删掉了。
     字号 <16px 的都在卡片内部（micro / label / meta），区块级的最小正文是 sm。 */
  --fs-micro: 11px;                        /* 卡内极小标注：tag / badge / 指标名 / 悬浮按钮 */
  --fs-kicker: 12px;                       /* 区块眉标（大写 + 宽字距） */
  --fs-label: 12px;                        /* 表单字段标签、pill 标签、日期 */
  --fs-meta: 13px;                         /* 元信息：时间、页脚小字、面包屑、路径 */
  --fs-sm: 14px;                           /* 卡片描述、按钮、链接式按钮 */
  --fs-body: 15px;                         /* 正文：富文本、FAQ 答案、规格值 */
  --fs-lead: 16px;                         /* 区块说明句、长文正文、顶部导航 */
  --fs-lead-lg: 18px;                      /* 首屏副标题（hero / page-hero）、引言块 */
  --fs-title: 17px;                        /* 卡片标题、条项名称 */
  --fs-h3: clamp(18px, 1.5vw, 22px);       /* 三级标题：长文小节、侧栏卡标题、弹窗标题 */
  --fs-h2: clamp(22px, 2.4vw, 34px);       /* 区块大标题（.t-h2 与各页 section title） */
  --fs-h1: clamp(26px, 3.1vw, 42px);       /* 内页主标题（page-hero / legal / 详情页标题） */
  --fs-display: clamp(30px, 4vw, 56px);    /* 首页首屏主标题、全屏菜单词条 */
  --fs-stat: clamp(28px, 3vw, 40px);       /* 大数字：stats / metric card / 年份 */
  --fs-stat-sm: 20px;                      /* 卡内小数字 */

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (max-width: 809px) {
  :root { --page-pad: 20px; --section-pad: 60px; }
}
@media (min-width: 810px) and (max-width: 1199px) {
  :root { --page-pad: 30px; --section-pad: 80px; }
}

/* Typography
   ========================================================================== */
.t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.t-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.t-kicker {
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
}
.t-body {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.5;
  font-weight: 400;
}
.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  font-weight: 400;
}
.t-mono {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.t-link {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  position: relative;
  display: inline-block;
}

/* Letter-spacing for hero h1 (F i n d ...) */
.t-spaced {
  display: inline-block;
  letter-spacing: 0.1em;
}
.t-spaced > span {
  display: inline-block;
  margin: 0 0.04em;
  transition: transform 0.6s var(--ease-smooth);
}

/* Reveal animations
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s var(--ease-smooth), transform 1.2s var(--ease-spring);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
.reveal-fade {
  opacity: 0;
  transition: opacity 1.4s var(--ease-smooth);
}
.reveal-fade.in-view {
  opacity: 1;
}

/* Layout
   ========================================================================== */
.page {
  width: 100%;
  min-height: 100vh;
  position: relative;
}
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
.section {
  padding: var(--section-pad) 0;
  position: relative;
}
/* 白底相邻两块各带一份 --section-pad，叠成 2×（桌面 200px）。/custom-solutions/ 上
   Solutions 与 How We Customize 之间是整页唯一一段纯白空档（其余缝要么只有一份 padding，
   要么被灰带边界切开），所以给后一块自己挂这个修饰类，收成一段。 */
.section--flush { padding-top: 0; }

/* 紧凑区块修饰类：上下内边距 100/100 → 64/64（≤809px 60/60 → 40/40）。
   用在 /custom-solutions/ 的四个区块（Solutions / How We Customize / PROCESS / Inquiry：
   这些块描述句已不在前台输出，标题区只剩单行，再按整段 --section-pad 留白就显得空；
   标题到内容的间距同时从 74px（60 头距 + 14 标题下距）收到 40px，移动端 28px；
   Inquiry 的标题区仍是眉标 + 大标题两行，只吃区块内边距与标题区下距（60→40），
   标题之间的 14px 不动），以及 /contact-us/ 的 FAQ 灰带（灰带自己 100/80/60 的上下
   内边距偏大，收到与本页表单区块相同的 64/40 标度），以及 /about-us/ 的四个内容区块
   （故事+特点、工厂灰带、品质管控、服务承诺：统一把 100/80/60 的区块内边距收到 64/40；
   品质管控与服务承诺仍靠 `.qc-section + .sc-section { padding-top: 0 }` 收成一段白缝）。
   标题区下距那两条只匹配 custom-solutions 的结构（.properties__head / .cs-title-swap），
   contact 页的 .faq__head 不受影响；其它页面不挂这个类，共用规则不受影响；
   块之间的白缝仍各只有一份 padding（How We Customize 继续 .section--flush），不会叠成 2×。 */
.section--cs {
  padding-top: 64px;
  padding-bottom: 64px;
}
.section--cs.section--flush { padding-top: 0; }
.section--cs .properties__head { margin-bottom: 40px; }
.section--cs .cs-title-swap > :only-child { margin-bottom: 0; }
@media (max-width: 809px) {
  .section--cs {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .section--cs.section--flush { padding-top: 0; }
  .section--cs .properties__head { margin-bottom: 28px; }
}

/* ===================== NAVIGATION ===================== */
.topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 1500px);
  z-index: 100;
  padding: 16px var(--page-pad);
  background: linear-gradient(180deg, rgba(31, 31, 31, 0.5) 0%, rgba(30, 30, 30, 0) 100%);
  border-bottom: 0.8px solid rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.3s, border-color 0.3s, padding 0.3s;
}
.topbar.solid {
  background: #1a1a1a;
  border-bottom-color: rgba(255, 255, 255, 0.1);
  padding: 12px var(--page-pad);
}
.topbar-logo {
  font-family: var(--font-display);
  font-size: 18px;
  color: #fff;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.topbar-logo span.dot { color: #fff; }
.menu-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  padding: 8px 0;
}
.menu-trigger .lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 22px;
}
.menu-trigger .lines span {
  display: block;
  height: 1.5px;
  background: #fff;
  border-radius: 1px;
  transition: transform 0.3s, opacity 0.3s;
}
.menu-trigger .lines span:nth-child(1) { width: 100%; }
.menu-trigger .lines span:nth-child(2) { width: 70%; align-self: flex-end; }
.menu-trigger.is-open .lines span:nth-child(1) { transform: rotate(45deg) translate(2px, 3px); }
.menu-trigger.is-open .lines span:nth-child(2) { transform: rotate(-45deg) translate(2px, -3px); width: 100%; }

/* Mobile Menu Overlay */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: #1a1a1a;
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: 100px var(--page-pad) 60px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-20px);
  transition: opacity 0.4s, transform 0.4s;
}
.menu-overlay.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.menu-overlay nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}
.menu-overlay nav a {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: baseline;
  gap: 16px;
  transition: opacity 0.3s, padding-left 0.4s;
}
.menu-overlay nav a:hover { padding-left: 12px; opacity: 0.8; }
.menu-overlay nav a .num {
  font-size: var(--fs-label);
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ===================== HERO ===================== */
/* 首屏随页面正常滚动。原先这里是 position:sticky + 后续 section z-index:2，
   形成「下一屏向上覆盖 Hero」的效果，按要求去掉。 */
.hero-wrap {
  height: 100vh;
  min-height: 480px;
  overflow: hidden;
}
.hero-wrap ~ section,
.hero-wrap ~ div:not(.hero-wrap) {
  position: relative;
  z-index: 2;
}

/* Page Hero — Sub-pages */
.page-hero {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 360px;
  max-height: 600px;
  /* 栏目大图为空时（后台未填）仍保证文字可读 */
  background-color: #1c1c1c;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.15) 100%);
  z-index: 1;
}
.page-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 3rem;
  color: #fff;
}
/* 案例编号（详情页 hero 与列表卡片标题上方）；未录入时不占位 */
.page-hero__kicker {
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 12px;
  color: rgba(255,255,255,0.75);
}
.page-hero__kicker:empty {
  display: none;
}
.page-hero__h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.75rem;
  color: #fff;
}
.page-hero__p {
  font-size: var(--fs-lead-lg);
  line-height: 1.5;
  margin: 0;
  color: rgba(255,255,255,0.85);
  max-width: 55ch;
}
.page-hero--short {
  height: 50vh;
  min-height: 300px;
  max-height: 500px;
}
/* Article / news detail hero — no clipping, breadcrumb close to menu */
.page-hero--article {
  height: auto;
  min-height: 360px;
  align-items: flex-end;
}
.page-hero--article .page-hero__inner {
  padding-bottom: 2.5rem;
}

/* Applications 卡片网格 — 后台应用内容一篇一张：顶部缩略图 + 编号角标 + Explore 页脚
   卡片数随内容变化，末行不足三张时与上一行左对齐（5 张 = 3 + 2） */
.app-cards {
  counter-reset: appcard;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 28px;
}
.app-card {
  counter-increment: appcard;
  position: relative;
  flex: 0 0 calc((100% - 56px) / 3);
  max-width: calc((100% - 56px) / 3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(12, 45, 66, 0.08);
  background: #eef4f8;
  color: #0e2a3f;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(12, 45, 66, 0.07);
  transition: transform 0.35s var(--ease-smooth), border-color 0.35s, box-shadow 0.35s;
}
.app-card:hover {
  transform: translateY(-4px);
  border-color: rgba(18, 180, 190, 0.5);
  box-shadow: 0 24px 48px rgba(12, 45, 66, 0.14);
}
.app-card__media {
  position: relative;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: #e4edf2;
}
.app-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-smooth);
}
.app-card:hover .app-card__media img {
  transform: scale(1.04);
}
.app-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 7px 14px;
  border-radius: 8px;
  background: rgba(10, 30, 46, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #eef5f9;
}
.app-card__badge::before {
  content: counter(appcard, decimal-leading-zero) " / ";
  color: #cfdce6;
}
.app-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 26px 26px;
}
/* 左侧青色竖线（自图片下沿向下延伸） */
.app-card__body::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 56%;
  background: linear-gradient(180deg, #2fd8dc 0%, #1fa8cf 100%);
}
.app-card__title {
  margin: 10px 0 8px;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.28;
  color: #0e2a3f;
}
.app-card__desc {
  margin: 18px 0 22px;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: #43596b;
}
.app-card__foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(14, 42, 63, 0.14);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.app-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  color: #0e2a3f;
}
.app-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #3fdede;
  color: #062233;
  transition: transform 0.3s var(--ease-smooth);
}
.app-card:hover .app-card__arrow {
  transform: translateX(4px);
}
@media (max-width: 1099px) {
  .app-cards { gap: 20px; }
  .app-card { flex: 0 0 100%; max-width: 100%; }
  .app-card__media { aspect-ratio: 21 / 9; max-height: 320px; }
  .app-card__body { padding: 22px 22px 24px; }
}

/* ===================== APPLICATION DETAIL — EDITORIAL BLOCKS =====================
   三个区块照参考图：浅色编辑排版（细横线 + 衬线标题 + 规格格）。
   数据位见 _deploy/db-migrations/db-migration-application-detail-20261026.sql：
   板块标签页 ext_app_tabs / 产品矩阵 ext_app_matrix / 支持卡 ext_app_support。 */
/* 首块是标签栏（本页二级导航），不是标题区：区块上内边距从 --section-pad（100/80/60）
   收到 64/40，否则标签会悬在一大段纯白里；下内边距仍是一份 --section-pad 去接页脚。 */
.section.appdetail {
  padding-top: 64px;
}
.appdetail > .wrap > * + * {
  margin-top: clamp(56px, 6vw, 96px);
}

/* ---------- 1. 板块标签页 ---------- */
/* 一个应用一个标签，都是指向该应用详情页的链接（当前页 is-active）。 */
.apptabs__bar {
  display: flex;
  flex-wrap: wrap;
  column-gap: 28px;
  row-gap: 2px;
  border-bottom: 1px solid #e3e2dd;
}
.apptabs__tab {
  position: relative;
  padding: 0 0 14px;
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: 500;
  color: #6c7a85;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s ease;
}
.apptabs__tab:hover { color: #14232f; }
.apptabs__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
}
.apptabs__tab.is-active { color: #14232f; }
.apptabs__tab.is-active::after { background: #14232f; }
.apptabs__tab:focus-visible { outline: 2px solid #004a96; outline-offset: 4px; }
.approw {
  display: grid;
  grid-template-columns: 56px minmax(200px, 300px) minmax(0, 1fr) 288px;
  grid-template-areas: "num main copy specs";
  gap: 28px 36px;
  align-items: start;
  padding: 34px 0;
  border-bottom: 1px solid #e3e2dd;
  color: inherit;
}
.approw__num { grid-area: num; padding-top: 8px; font-family: var(--font-display); font-size: var(--fs-micro); color: #8a949c; }
.approw__main { grid-area: main; }
.approw__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #16222b;
}
.approw:hover .approw__title { text-decoration: underline; text-underline-offset: 3px; }
.approw__tag {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 10px;
  background: #f2f1ed;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  color: #39434b;
}
.approw__copy { grid-area: copy; }
.approw__copy p { font-size: var(--fs-sm); line-height: 1.7; color: #3d4a54; }
.approw__copy p + p { margin-top: 12px; }
.approw__specs {
  grid-area: specs;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #e3e2dd;
  background: #f6f5f1;
}
.approw__spec {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-height: 92px;
  padding: 12px 14px 14px;
}
.approw__spec + .approw__spec { border-left: 1px solid #e3e2dd; }
.approw__spec-value { font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; color: #1b2731; }
.approw__spec-label {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #6d7880;
}

/* ---------- 2. 产品-应用矩阵 ---------- */
.appmatrix__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 32px;
  align-items: end;
  margin-bottom: 28px;
}
.appmatrix__kicker {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a949c;
}
.appmatrix__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: #16222b;
}
.appmatrix__note { font-size: var(--fs-sm); line-height: 1.65; color: #5d6a74; }
.appmatrix__scroll { border: 1px solid #e3e2dd; }
.appmatrix__table { width: 100%; border-collapse: collapse; }
.appmatrix__table th,
.appmatrix__table td {
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #e3e2dd;
}
.appmatrix__table thead th {
  padding: 14px 20px;
  border-bottom-color: #d8d6d0;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7b858d;
}
.appmatrix__table tbody th {
  width: 26%;
  padding: 16px 20px;
  font-size: var(--fs-body);
  font-weight: 500;
  color: #1b2731;
}
.appmatrix__table td { padding: 16px 20px; font-size: var(--fs-sm); line-height: 1.55; color: #3d4a54; }
.appmatrix__table td:nth-child(2) { color: #2f5f7d; }
.appmatrix__table tbody tr:last-child th,
.appmatrix__table tbody tr:last-child td { border-bottom: 0; }
.appmatrix__table tbody tr { transition: background 0.2s ease; }
.appmatrix__table tbody tr:hover { background: #f8f7f4; }

/* ---------- 3. 支持卡 ---------- */
.appsupport {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.appsupport__kicker {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a949c;
}
.appsupport__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #16222b;
}
.appsupport__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid #e3e2dd;
}
.appsupport__card { padding: 22px 24px 24px; }
.appsupport__card:nth-child(odd) { border-right: 1px solid #e3e2dd; }
.appsupport__card:nth-child(n + 3) { border-top: 1px solid #e3e2dd; }
.appsupport__card-title { margin-bottom: 8px; font-size: var(--fs-title); font-weight: 600; color: #16222b; }
.appsupport__card-desc { font-size: var(--fs-sm); line-height: 1.65; color: #4a5761; }

@media (max-width: 1199px) {
  .approw {
    grid-template-columns: 48px minmax(0, 250px) minmax(0, 1fr);
    grid-template-areas:
      "num main copy"
      ". . specs";
  }
  .approw__specs { max-width: 480px; }
  .appmatrix__head { grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); }
  .appsupport { grid-template-columns: 1fr; }
}
@media (max-width: 809px) {
  .section.appdetail { padding-top: 40px; }
  .appdetail > .wrap > * + * { margin-top: 48px; }
  .apptabs__bar {
    flex-wrap: nowrap;
    column-gap: 24px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .apptabs__bar::-webkit-scrollbar { display: none; }
  .approw {
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-areas:
      "num main"
      ". copy"
      ". specs";
    gap: 16px 14px;
    padding: 26px 0;
  }
  .approw__num { padding-top: 6px; }
  .approw__specs { max-width: none; }
  .approw__spec { min-height: 80px; padding: 10px 10px 12px; }

  .appmatrix__head { grid-template-columns: 1fr; gap: 14px; align-items: start; }
  .appmatrix__scroll { border: 0; }
  .appmatrix__table,
  .appmatrix__table tbody,
  .appmatrix__table tr,
  .appmatrix__table th,
  .appmatrix__table td { display: block; width: 100%; }
  .appmatrix__table thead { display: none; }
  .appmatrix__table tbody tr {
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1px solid #e3e2dd;
  }
  .appmatrix__table tbody th { padding: 0 0 8px; border: 0; }
  .appmatrix__table tbody td { padding: 0; border: 0; }
  .appmatrix__table tbody td + td { margin-top: 8px; }
  .appmatrix__table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8a949c;
  }
  .appsupport__grid { grid-template-columns: 1fr; }
  .appsupport__card:nth-child(odd) { border-right: 0; }
  .appsupport__card + .appsupport__card { border-top: 1px solid #e3e2dd; }
}

.hero {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #fff;
}
.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
  transform: scale(1.05);
  animation: heroZoom 10s ease-in-out infinite alternate;
}
.hero__slide.active {
  opacity: 1;
}
@keyframes heroZoom {
  from { transform: scale(1.05); }
  to { transform: scale(1.15); }
}
.hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
}
/* 视频轮播：视频铺满整张幻灯片，仍由上面的 ::after 压一层渐变遮罩 */
.hero__slide--video {
  overflow: hidden;
}
.hero__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 var(--page-pad);
  max-width: var(--max-width);
  margin: 0 auto;
}
.hero__content {
  max-width: none;
  width: 100%;
}
.hero__text-slides {
  position: relative;
  width: 100%;
}
.hero__text-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.hero__text-slide.active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}
.hero__pagination {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: row;
  gap: 5px;
}
.hero__pagination .dot {
  width: 8px;
  height: 8px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 0.3s, width 0.3s;
  border: none;
}
.hero__pagination .dot.active {
  background: #fff;
  width: 24px;
}
.hero__h1 {
  color: #fff;
  margin-bottom: 1.25rem;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-weight: 100;
  font-size: var(--fs-display);
  line-height: 1.286;
  letter-spacing: -0.01em;
}
@media (min-width: 48em) { .hero__h1 {  line-height: 1.182; } }
@media (min-width: 61em) { .hero__h1 {  line-height: 1.154; } }
@media (min-width: 75em) { .hero__h1 {  line-height: 1.175; } }
.hero__h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: heroWord 0.8s var(--ease-smooth) forwards;
  margin-right: 0;
}
.hero__h1 .word:nth-child(1) { animation-delay: 0.1s; }
.hero__h1 .word:nth-child(2) { animation-delay: 0.18s; }
.hero__h1 .word:nth-child(3) { animation-delay: 0.26s; }
.hero__h1 .word:nth-child(4) { animation-delay: 0.34s; }
.hero__h1 .word:nth-child(5) { animation-delay: 0.42s; }
.hero__h1 .word:nth-child(6) { animation-delay: 0.5s; }
@keyframes heroWord {
  to { opacity: 1; transform: translateY(0); }
}
.hero__p {
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-weight: 100;
  font-size: var(--fs-lead-lg);
  line-height: 1.364;
  margin: 0 0 2rem;
  max-width: 46ch;
  opacity: 0;
  transform: translateY(20px);
  animation: heroWord 1s var(--ease-smooth) 0.7s forwards;
}
@media (min-width: 48em) { .hero__p {  line-height: 1.333; max-width: 44ch; } }
@media (min-width: 61em) { .hero__p {  line-height: 1.357; } }
@media (min-width: 75em) { .hero__p {  line-height: 1.333; } }
.hero__p .word {
  display: inline-block;
  margin-right: 0;
}
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #004a96;
  color: #fff;
  padding: 10px 16px;
  border-radius: 50px;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  animation: heroWord 1s var(--ease-smooth) 0.9s forwards;
  transition: background 0.3s, color 0.3s, transform 0.3s;
  text-decoration: none;
}
.hero__cta:hover { background: #7c7c7c; color: #fff; transform: none; }
.hero__cta .arrow { transition: transform 0.3s; }
.hero__cta:hover .arrow { transform: translateX(4px); }
/* 后台轮播可配两个按钮：并排显示，窄屏自动换行；第二个用描边样式区分主次 */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.hero__actions .hero__cta:nth-child(2) { animation-delay: 1s; }
.hero__cta--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.72);
  color: #fff;
  padding: 9px 15px;
}
.hero__cta--ghost:hover {
  background: #fff;
  border-color: #fff;
  color: #111;
}
.hero__avatars {
  display: flex;
  align-items: center;
  margin-top: 28px;
  opacity: 0;
  transform: translateY(20px);
  animation: heroWord 1s var(--ease-smooth) 1.1s forwards;
}
.hero__avatars .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  background-size: cover;
  background-position: center;
  margin-left: -10px;
}
.hero__avatars .avatar:first-child { margin-left: 0; }
.hero__count {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  color: #fff;
  margin-left: 12px;
}

/* ===================== ABOUT SECTION ===================== */
.about {
  background: #fff;
  color: #1a1a1a;
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: 0;
}
.about.section { padding: 0; }
.about__sticky-wrap {
  position: relative;
  overflow: hidden;
}
.about__sticky-inner {
  position: sticky;
  top: 0;
  /* 与首页其它区块同宽：用 .wrap 的同一套 --max-width + --page-pad，不再单独收 900px */
  /* 上下留白按内容排，不再撑到固定带子高度：原先 min-height 463px 是去掉滚动效果后的遗留，
     三行正文只有约 150px，多出来的高度被 justify-content 摊到上下，实测上 120 / 下 140px。 */
  padding: 60px var(--page-pad);
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.about__badge {
  display: inline-block;
  background: #f7f7f7;
  padding: 7px 15px;
  border-radius: 19px;
  font-size: var(--fs-kicker);
  font-weight: 400;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  /* 带子自己已有 60px 上内边距，这里再叠 30px 会让徽章离上一块过远 */
  margin-top: 0;
  margin-bottom: 0;
  font-family: "Inter Display", "Inter", sans-serif;
}
.about__body {
  font-family: "Inter Display", "Inter", sans-serif;
  font-size: var(--fs-lead-lg);
  line-height: 1.45;
  letter-spacing: -0.02em;
  font-weight: 400;
  /* 居中排版（与徽章、按钮同轴） */
  text-align: center;
  /* 宽度跟随 .about__sticky-inner（与其它区块的 .wrap 同宽），不再单独收 900px */
  max-width: 100%;
  margin-top: 20px;
  margin-bottom: 0px;
}
.about__body p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
  color: #000;
}
/* Learn More：正文下方居中（.about__sticky-inner 已是 align-items:center 的纵向 flex） */
.about__cta {
  margin-top: 28px;
}
@media (max-width: 768px) {
  .about__cta { margin-top: 22px; }
}

/* ===================== LIFESTYLE / HORIZONTAL SCROLL ===================== */
/* 走马灯已挪到数字优势下方，收尾留一份 --section-pad 去接下一块；
   .about + .properties 的上内边距仍为 0，所以这块间距就是唯一的一段。 */
.lifestyle {
  overflow: hidden;
  padding: 0 0 var(--section-pad);
  background: #fff;
  position: relative;
}
.lifestyle {
  overflow: hidden;
  position: relative;
}
.lifestyle__track {
  display: flex;
  gap: 24px;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.lifestyle__track::-webkit-scrollbar { display: none; }
.lifestyle__card {
  flex: 0 0 380px;
  aspect-ratio: 4/3;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  scroll-snap-align: none;
  background-size: cover;
  background-position: center;
}
/* 卡片图现在来自内容缩略图，浅色照片（如默认兜底图）会让白色文案失去对比，
   所以压暗层从底部提前到 55%（0.35）再收到 0.75，并给文字加一层柔和投影。 */
.lifestyle__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.75) 100%);
}
.lifestyle__card-inner {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.lifestyle__card-title {
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-weight: 500;
}
.lifestyle__card-desc {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 809px) {
  .lifestyle__card { flex: 0 0 280px; aspect-ratio: 4/3; }
}

/* ===================== STATS SECTION ===================== */
/* 数字优势下方紧跟走马灯，两者算一组内容：下内边距从满份 --section-pad 收到 60%
   （桌面 60 / 平板 48 / 手机 36px），区块收尾由 .lifestyle 自己撑。 */
.stats {
  background: #fff;
  padding: 0 0 calc(var(--section-pad) * 0.6);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stats__item {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #f7f7f7;
  border-radius: 10px;
  padding: 24px;
  text-align: start;
}
.stats__label {
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #1a1a1a;
  font-weight: 500;
}
.stats__num {
  display: flex;
  align-items: flex-start;
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 400;
}
.stats__num-suffix {
  font-size: 0.5em;
  margin-top: 0.1em;
}
.stats__desc {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text-2);
  max-width: 220px;
}
@media (max-width: 809px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* ===================== PROPERTIES SECTION ===================== */
.properties {
  background: #fff;
  color: #1a1a1a;
}
/* 首页上方的 .lifestyle（About 区块收尾）自带 --section-pad 下内边距，本区块又带同值上内边距，
   两者相加让两块之间空出 2×section-pad（桌面 200px）；这里收成一段间距。 */
.about + .properties {
  padding-top: 0;
}
.properties__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 60px;
  flex-wrap: wrap;
}
.properties__head-left { max-width: 800px; }
.properties__kicker {
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 16px;
}
/* 区块标题下方的一句说明（如 /custom-solutions/ 的 How We Customize） */
.properties__desc {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--color-text-2);
  margin: 16px 0 0;
  max-width: 760px;
}
/* 仅 /custom-solutions/：每个区块标题区按 DOM 顺序换档 —— 第一行大标题、第二行眉标式小标题。
   选择器只作用于 .cs-title-swap 的直接子元素，其它页面共用 .properties__head 不受影响。 */
.cs-title-swap > :first-child {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 400;
  text-transform: none;
  margin: 0 0 14px;
}
.cs-title-swap > :nth-child(2) {
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.4;
  color: inherit;
  max-width: none;
  margin: 0;
}
.properties__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media (max-width: 1199px) { .properties__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 809px) { .properties__list { grid-template-columns: 1fr; } }

/* 首页 Star products：卡片高度按内容最高的那张统一。
   grid-auto-rows:1fr 让所有隐式行等高，卡片内部再用 flex 把规格行钉到底部。 */
.properties__list--star { grid-auto-rows: 1fr; }
.properties__list--star .property-card {
  display: flex;
  flex-direction: column;
}
.properties__list--star .property-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.properties__list--star .property-card__specs { margin-top: auto; }

.property-card {
  display: block;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  color: #1a1a1a;
  transition: transform 0.4s var(--ease-smooth);
}
.property-card:hover { transform: translateY(-6px); }
.property-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 20px;
  background: #ededed;
}
.property-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-smooth);
}
.property-card:hover .property-card__media img { transform: scale(1.06); }
.property-card__body {
  padding: 24px 4px 4px;
}
.property-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.property-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  letter-spacing: -0.01em;
  font-weight: 400;
}
.property-card__price {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 500;
}
.property-card__desc {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text-2);
  margin-bottom: 20px;
}
.property-card__specs {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 12px;
  border-top: 1px solid var(--color-light);
  padding-top: 16px;
}
.property-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  flex-shrink: 0;
  margin-left: auto;
  transition: all 0.2s ease;
}
.property-card:hover .property-card__arrow {
  border-color: #004a96;
  background: #004a96;
}
.property-card__arrow svg {
  width: 14px;
  height: 14px;
  stroke: #1a1a1a;
  stroke-width: 1.5;
  fill: none;
  transition: stroke 0.2s ease;
}
.property-card:hover .property-card__arrow svg {
  stroke: #fff;
}
.property-card__spec {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* 基准 120px：2 条时与原先等宽铺满一致；3~4 条时自动换行，避免被挤压 */
  flex: 1 1 120px;
  min-width: 0;
}
/* 规格位的值不一定是数字（如 /products/ 的「Synthetic Polymer」），nowrap 会把长文案裁掉，
   这里允许换行；数字仍然走 stat-sm 一档。 */
.property-card__spec-num {
  font-family: var(--font-display);
  font-size: var(--fs-stat-sm);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.property-card__spec-label {
  font-size: var(--fs-micro);
  color: var(--color-text-2);
  letter-spacing: 0.03em;
  line-height: 1.35;
}

/* ===================== EXPERTISE / SERVICES ===================== */
.expertise {
  background: #fff;
  padding: var(--section-pad) 0;
  color: #1a1a1a;
}
/* 该区块现直接接在 Star products 白底下面：两块各带 --section-pad，
   中间空出 2×（桌面 200px）白区，收成一段。挪区块时这类 X + Y 选择器最容易失配。 */
.properties + .expertise {
  padding-top: 0;
}
.expertise__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin-bottom: 80px;
  color: #1a1a1a;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.expertise__title .word-row {
  display: flex;
  gap: 0.4em;
}
.expertise__title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s, transform 0.8s var(--ease-smooth);
}
.expertise__title.in-view .word {
  opacity: 1;
  transform: translateY(0);
}
.expertise__title .word:nth-child(1) { transition-delay: 0.0s; }
.expertise__title .word:nth-child(2) { transition-delay: 0.05s; }
.expertise__title .word:nth-child(3) { transition-delay: 0.1s; }
.expertise__title .word:nth-child(4) { transition-delay: 0.15s; }
.expertise__title .word:nth-child(5) { transition-delay: 0.2s; }
.expertise__title .word:nth-child(6) { transition-delay: 0.25s; }
.expertise__title .word:nth-child(7) { transition-delay: 0.3s; }
.expertise__title .word:nth-child(8) { transition-delay: 0.35s; }
.expertise__title .word:nth-child(9) { transition-delay: 0.4s; }
.expertise__title .word:nth-child(10) { transition-delay: 0.45s; }
.expertise__title .word:nth-child(11) { transition-delay: 0.5s; }
.expertise__title .word:nth-child(12) { transition-delay: 0.55s; }

.expertise__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  border-top: 1px solid var(--color-light);
  padding-top: 40px;
}
@media (max-width: 1199px) { .expertise__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 809px) { .expertise__grid { grid-template-columns: 1fr; } }

.expertise__item {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 8px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease;
}
a.expertise__item:hover {
  transform: translateY(-4px);
}
.expertise__num {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  color: var(--color-text-2);
  letter-spacing: 0.1em;
}
.expertise__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
  font-weight: 400;
}
.expertise__desc {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text-2);
}
.expertise__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--color-light);
}
.expertise__list li {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: 0.05em;
  color: var(--color-text-2);
}

/* Expertise hover — minimal underline accent */
.expertise__name {
  position: relative;
  transition: color 0.3s ease;
}
.expertise__name::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  width: 100%;
  height: 2px;
  background: #0a5ef0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
a.expertise__item:hover .expertise__name { color: #0a5ef0; }
a.expertise__item:hover .expertise__name::after { transform: scaleX(1); }

/* ===================== EXPERTISE 图片手风琴（首页 Application Scenarios） =====================
   参照 en.vontron.com 首页同类型块：一排等高图片格，默认只有背景图 + 序号 + 标题，
   hover 的那格变宽、其余收缩（flex-grow 过渡），格内正文与特性列表浮现在图片上。
   /applications/ 页仍用上面的 .expertise__grid 卡片版，所以这里全部限定在 .expertise__panels 下。 */
.expertise__panels {
  display: flex;
  align-items: stretch;
  height: 520px;
  overflow: hidden;
}
.expertise__panels .expertise__item {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  color: #fff;
  transition: flex-grow 0.5s var(--ease-smooth);
}
/* 手风琴靠宽度变化表达，不再沿用卡片版的上浮与蓝色下划线 */
.expertise__panels .expertise__item:hover { transform: none; }
.expertise__panels .expertise__name::after { display: none; }
.expertise__panels .expertise__item:hover .expertise__name { color: #fff; }
.expertise__panels:hover .expertise__item { flex-grow: 0.7; }
/* :focus-visible 与 :hover 同态，键盘 Tab 过来也能读到收起的正文 */
.expertise__panels .expertise__item:hover,
.expertise__panels .expertise__item:focus-visible { flex-grow: 2.8; }
.expertise__panels .expertise__panel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s var(--ease-smooth);
}
.expertise__panels:hover .expertise__panel-img { opacity: 0.4; }
.expertise__panels .expertise__item:hover .expertise__panel-img,
.expertise__panels .expertise__item:focus-visible .expertise__panel-img { opacity: 1; }
/* 底部压暗渐变：白字在任意底图上都要可读 */
.expertise__panels .expertise__item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 65%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0) 100%);
}
.expertise__panels .expertise__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 28px;
}
.expertise__panels .expertise__num { color: rgba(255, 255, 255, 0.65); }
.expertise__panels .expertise__name {
  font-size: var(--fs-h3);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.expertise__panels .expertise__item:hover .expertise__name,
.expertise__panels .expertise__item:focus-visible .expertise__name { -webkit-line-clamp: 3; }
/* 正文 + 特性：默认收起，hover 展开（max-height 与宽度过渡同时长，整格一起动） */
.expertise__panels .expertise__more {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: max-height 0.5s var(--ease-smooth), opacity 0.35s ease;
}
.expertise__panels .expertise__item:hover .expertise__more,
.expertise__panels .expertise__item:focus-visible .expertise__more {
  max-height: 320px;
  opacity: 1;
}
.expertise__panels .expertise__desc {
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
  max-width: 460px;
}
.expertise__panels .expertise__list {
  border-top-color: rgba(255, 255, 255, 0.25);
  margin-top: 0;
}
.expertise__panels .expertise__list li { color: rgba(255, 255, 255, 0.7); }
@media (max-width: 1199px) { .expertise__panels { height: 440px; } }
/* 触屏没有 hover：正文直接展开，避免内容永远读不到 */
@media (hover: none) {
  .expertise__panels .expertise__more { max-height: 320px; opacity: 1; }
  .expertise__panels:hover .expertise__panel-img { opacity: 1; }
}
/* 窄屏改成竖排一格一屏，手风琴的横向展开没有意义 */
@media (max-width: 809px) {
  .expertise__panels { display: block; height: auto; }
  .expertise__panels .expertise__item { height: auto; min-height: 320px; margin-bottom: 12px; }
  .expertise__panels .expertise__item:last-child { margin-bottom: 0; }
  /* 竖排时正文必须常驻（没有 hover 可用），文字撑高度、图片仍铺满格 */
  .expertise__panels .expertise__panel {
    position: relative;
    min-height: 320px;
    justify-content: flex-end;
    padding: 24px 20px;
  }
  .expertise__panels .expertise__more { max-height: 320px; opacity: 1; }
  /* 竖排时文字铺满整格，底部 65% 的渐变罩不够用：改成整格压暗，白字才稳 */
  .expertise__panels .expertise__item::after {
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.72) 55%, rgba(0, 0, 0, 0.85) 100%);
  }
  .expertise__panels .expertise__panel-img { opacity: 0.75; }
}

/* Expertise Card Variant (with image) */
.expertise__grid--full {
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 1024px) { .expertise__grid--full { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .expertise__grid--full { grid-template-columns: 1fr; } }

.expertise__item--card {
  background: #f7f7f7;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.expertise__item--card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}
.expertise__card-img {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.expertise__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.expertise__item--card:hover .expertise__card-img img {
  transform: scale(1.05);
}
.expertise__card-body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.expertise__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #004a96;
  margin-top: 8px;
}
.expertise__item--card:hover .expertise__link {
  gap: 10px;
}

/* ===================== PARTNERS SECTION ===================== */
.partners {
  position: relative;
  color: #fff;
  padding: var(--section-pad) 0;
  overflow: hidden;
  background: #1a1a1a;
}
.partners__parallax-bg {
  position: absolute;
  inset: 0;
  background-image: url('../images/banner-2.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: 0;
}
.partners::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
}
.partners > .wrap,
.partners__marquee {
  position: relative;
  z-index: 2;
}
.partners__head {
  margin-bottom: 80px;
}
.partners__kicker {
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 24px;
}
.partners__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 700px;
  margin-bottom: 24px;
}
.partners__desc {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  max-width: 500px;
}
/* 商标声明：图中第三方 Logo 的指代性使用说明，需在深色背景上清晰可读但不抢主体视觉 */
.partners__disclaimer {
  position: relative;
  z-index: 2;
  margin-top: 56px;
  font-size: var(--fs-label);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.45);
  max-width: 880px;
}
.partners__disclaimer:empty { display: none; }
.partners__marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.partners__track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.partners__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 190px;
  margin-right: 64px;
  flex-shrink: 0;
}
.partners__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 136px;
  height: 68px;
  background: #fff;
  border-radius: 10px;
  padding: 12px 18px;
  transition: transform 0.3s, box-shadow 0.3s;
}
.partners__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(0.15);
}
.partners__item:hover .partners__logo {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
}
.partners__name {
  font-family: var(--font-heading);
  font-size: var(--fs-title);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  text-align: center;
  transition: color 0.3s;
}
.partners__item:hover .partners__name { color: #fff; }

/* 首页简化版：浅灰带 + 一行 Logo（原色）直接流动，Logo 下方带企业名，
   去掉视差照片层、白色卡片和区块标题。
   /our-partners/ 页沿用上面的完整版（视差底 + 标题 + 白卡片），互不影响。 */
.partners--simple {
  background: #f7f7f7;
  color: #1a1a1a;
  padding: 60px 0;
}
/* 深色遮罩是给照片底用的，简化版没有照片 */
.partners--simple::after { display: none; }
/* main.js 会把整条轨道再克隆一份（实测 192px/s），时长补回一倍到约 96px/s */
.partners--simple .partners__track {
  animation-duration: 80s;
}
.partners--simple .partners__item {
  width: 170px;
  margin-right: 70px;
  gap: 12px;
}
/* 宽度必须给确定值：width:auto 时 Logo 盒会随无固有宽度的 SVG（SNF / SLB / BASF）塌成 0，
   图片按 max-width:100% 解析不出来就整条不显示。这里让盒子占满条目宽度，图片再 contain 居中。 */
.partners--simple .partners__logo {
  width: 100%;
  height: 44px;
  padding: 0;
  background: none;
  border-radius: 0;
}
/* 原色呈现：上面的完整版给 Logo 加了灰度，简化版按品牌色直接铺在浅灰带上 */
.partners--simple .partners__logo img {
  max-height: 44px;
  filter: none;
  opacity: 1;
}
.partners--simple .partners__item:hover .partners__logo {
  transform: none;
  box-shadow: none;
}
/* 名称与 Logo 同源（后台 ext_partners 的 name）；基础色是给深色带用的，这里改浅带可读的深灰 */
.partners--simple .partners__name {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: .01em;
  color: #333;
}
.partners--simple .partners__item:hover .partners__name { color: #333; }
@media (max-width: 768px) {
  .partners--simple { padding: 40px 0; }
  .partners--simple .partners__item { width: 130px; margin-right: 44px; gap: 8px; }
  .partners--simple .partners__logo img { max-height: 34px; }
}

/* ===================== APP PARALLAX SECTIONS ===================== */
.app-parallax {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  overflow: hidden;
}
.app-parallax::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
}
.app-parallax__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1;
}
.app-parallax__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  color: #fff;
  text-align: center;
}
.app-parallax__stat {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin-bottom: 16px;
}
.app-parallax__label,
.app-parallax__quote {
  font-size: var(--fs-lead-lg);
  line-height: 1.5;
  max-width: 700px;
  margin: 0 auto;
  opacity: 0.9;
  color: #fff;
}
.app-parallax__quote {
  font-style: italic;
  font-weight: 300;
}

@media (max-width: 809px) {
  .app-parallax {
    background-attachment: scroll;
    min-height: 280px;
  }
}

/* ===================== TESTIMONIALS ===================== */
.testimonials {
  background: #fff;
  color: #1a1a1a;
  padding: var(--section-pad) 0;
}
.testimonials__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 60px;
  max-width: 700px;
}
.testimonials__kicker {
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
}
.testimonials__viewport {
  position: relative;
  overflow: hidden;
}
.testimonials__track {
  display: flex;
  gap: 24px;
  transition: transform 0.6s var(--ease-smooth);
}
.testimonial-card {
  flex: 0 0 calc((100% - 48px) / 3);
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.testimonial-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #ededed;
  overflow: hidden;
  border-radius: 20px;
}
.testimonial-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-smooth);
}
.testimonial-card:hover .testimonial-card__media img { transform: scale(1.05); }
.testimonial-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.testimonial-card__play .play-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s, background 0.3s;
}
.testimonial-card__play:hover .play-btn {
  transform: scale(1.1);
  background: #1a1a1a;
  color: #fff;
}
.testimonial-card__play .play-btn svg { margin-left: 4px; }
.testimonial-card__body {
  padding: 24px 8px 8px;
}
.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.testimonial-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ededed;
  background-size: cover;
  background-position: center;
}
.testimonial-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 500;
}
.testimonial-card__role {
  font-size: var(--fs-label);
  color: var(--color-text-2);
}
.testimonial-card__quote {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text-2);
}
.testimonials__controls {
  display: flex;
  gap: 12px;
  margin-top: 40px;
}
.testimonials__btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-light);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.testimonials__btn:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.testimonials__btn svg { width: 16px; height: 16px; }
@media (max-width: 1199px) { .testimonial-card { flex: 0 0 calc((100% - 24px) / 2); } }
@media (max-width: 809px) { .testimonial-card { flex: 0 0 100%; } }

/* ===================== BLOG SECTION ===================== */
.blog-section {
  background: #fff;
  padding: var(--section-pad) 0;
  color: #1a1a1a;
}
/* 首页该区块现直接接在 Application Scenarios 白底下面：两块各带 --section-pad，
   中间空出 2×（桌面实测 200px）白区，收成一段。 */
.expertise + .blog-section {
  padding-top: 0;
}

/* News Layout - Featured + Grid */
.news-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.news-featured {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0;
  background: #f7f7f7;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: #1a1a1a;
  transition: transform 0.4s;
}
.news-featured:hover { transform: translateY(-4px); }
.news-featured__content {
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.news-featured__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.news-tag {
  background: #1a1a1a;
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: var(--fs-label);
  font-weight: 500;
}
.news-time {
  font-size: var(--fs-meta);
  color: #666;
}
.news-featured__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin-bottom: 16px;
}
.news-featured__desc {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: #666;
  margin-bottom: 24px;
}
.news-featured__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.news-featured__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ededed;
  background-size: cover;
  background-position: center;
}
.news-featured__name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.news-featured__role {
  font-size: var(--fs-label);
  color: #666;
}
.news-featured__media {
  position: relative;
  overflow: hidden;
  /* 留白交给图片自身的内缩（见下），这里不用 padding/flex：
     WebKit(Safari) 会把 flex 子项的 height:100% 解析成容器整高（含 padding），
     导致头条图片被撑满、上下没有留白。改为绝对定位内缩后各浏览器一致 */
  /* 桌面端两列布局：头条容器比卡片宽，在同样的 20px 留白下用 1.64 才能让图片可见比例
     与卡片一致（卡片图片可见比例 = 384/225 ≈ 1.707，头条 680/398 ≈ 1.707）；
     align-self 避免被右侧文案撑高导致图片被拉成竖长条 */
  aspect-ratio: 1.64;
  align-self: center;
}
.news-featured__media img {
  /* 绝对定位 + 四边内缩 20px：与新闻卡片 .news-card__media 的 20px 留白完全一致，
     且不依赖百分比高度，Safari/Chrome 均严格 20px。
     注意图片是替换元素，必须显式写死宽高，auto 会退回图片固有尺寸 */
  position: absolute;
  top: 20px;
  left: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  object-fit: cover;
  border-radius: 12px;
  transition: filter 0.3s;
}
.news-featured:hover .news-featured__media img { filter: blur(4px); }
.news-featured__overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.news-featured:hover .news-featured__overlay { opacity: 1; }
.news-view-btn {
  background: rgba(255,255,255,0.9);
  color: #1a1a1a;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: var(--fs-sm);
  font-weight: 500;
  backdrop-filter: blur(4px);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.news-card {
  display: flex;
  flex-direction: column;
  background: #f7f7f7;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: #1a1a1a;
  transition: transform 0.4s;
}
.news-card:hover { transform: translateY(-4px); }
.news-card__media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  padding: 20px;
}
.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  transition: filter 0.3s;
}
.news-card:hover .news-card__media img { filter: blur(4px); }
.news-card__overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.news-card:hover .news-card__overlay { opacity: 1; }
.news-card__body {
  padding: 24px;
}
.news-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.news-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin: 0 0 8px;
}
.news-card__desc {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: #666;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 1199px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 809px) {
  .news-featured { grid-template-columns: 1fr; }
  .news-featured__content { padding: 32px; }
  /* 单列布局：头条与卡片等宽，直接用与卡片相同的 20px 留白 + 16:10，完全对齐（原为 16:9） */
  .news-featured__media { aspect-ratio: 16 / 10; padding: 20px; }
  .news-grid { grid-template-columns: 1fr; }
}

/* Legacy blog styles */
.blog-section__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
  flex-wrap: wrap;
  gap: 30px;
}
.blog-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
}
@media (max-width: 1199px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  color: #1a1a1a;
  transition: transform 0.4s;
}
.blog-card:hover { transform: translateY(-4px); }
.blog-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #ededed;
  overflow: hidden;
  border-radius: 20px;
}
.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-smooth);
}
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.blog-card__body {
  padding: 20px 4px 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-2);
}
.blog-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.blog-card__excerpt {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text-2);
}
.blog-card__author {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.blog-card__author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ededed;
  background-size: cover;
  background-position: center;
}
.blog-card__author-name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.blog-card__author-role {
  font-size: var(--fs-label);
  color: var(--color-text-2);
}

.blog-mini-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.blog-mini {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  border: 1px solid var(--color-light);
  color: #1a1a1a;
  transition: border-color 0.3s, transform 0.3s;
}
.blog-mini:hover { border-color: #1a1a1a; transform: translateX(4px); }
.blog-mini__meta {
  display: flex;
  gap: 8px;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-2);
  margin-bottom: 8px;
}
.blog-mini__title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 400;
}

/* ===================== FAQ ===================== */
.faq {
  background: #fff;
  padding: var(--section-pad) 0;
  border-top: 1px solid var(--color-light);
}
.faq__head {
  margin-bottom: 60px;
  max-width: 700px;
}
.faq__kicker {
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 16px;
}
.faq__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.faq__list {
  border-top: 1px solid var(--color-light);
}
.faq__item {
  border-bottom: 1px solid var(--color-light);
}
.faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 0;
  font-family: var(--font-display);
  font-size: var(--fs-title);
  text-align: left;
  letter-spacing: -0.01em;
  font-weight: 400;
  cursor: pointer;
  transition: opacity 0.3s;
}
.faq__q:hover { opacity: 0.6; }
.faq__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  margin-left: 24px;
  transition: background 0.3s, transform 0.4s;
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  background: #1a1a1a;
}
.faq__icon::before { width: 12px; height: 1.5px; }
.faq__icon::after { width: 1.5px; height: 12px; transition: transform 0.3s; }
.faq__item.open .faq__icon { background: #1a1a1a; }
.faq__item.open .faq__icon::before, .faq__item.open .faq__icon::after { background: #fff; }
.faq__item.open .faq__icon::after { transform: rotate(90deg); }
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-smooth), padding 0.5s;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text-2);
}
.faq__item.open .faq__a {
  max-height: 300px;
  padding-bottom: 28px;
}

/* product page FAQ + related products section titles (bold) */
.faq__title--product {
  font-weight: 700;
}
.related-products__title {
  font-weight: 700;
}
/* FAQ 区块自带 --section-pad 下内边距，Related Products 又带同值上内边距，
   两者相加让两块之间空出 2×section-pad（桌面 200px）；这里收成一段间距。 */
.faq + .related-products {
  padding-top: 0;
}
.related-products .properties__head {
  margin-bottom: 40px;
}

/* 产品详情页：正文区块下内边距与 FAQ 上内边距各一份 --section-pad，
   Storage 正文到 FAQ 眉标叠成 224px，FAQ 到 Related Products 又是 100px。
   这里统一收到 64/40 标度（与 .section--cs 同档）：正文下 64 + 分割线 + FAQ 上 64，
   FAQ 下边距同步 64（.faq + .related-products 的 padding-top:0 不动）。
   首页与联系页的 FAQ 不挂这个类，不受影响。 */
.faq--product {
  padding-top: 64px;
  padding-bottom: 64px;
}
.section--product-body {
  padding-bottom: 64px;
}
@media (max-width: 809px) {
  .faq--product {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .section--product-body {
    padding-bottom: 40px;
  }
}

/* sidebar related news card */
.product-news-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.product-news-item {
  display: block;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.product-news-item:hover {
  border-color: #004a96;
}
.product-news-item__tag {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #004a96;
  margin-bottom: 4px;
}
.product-news-item__title {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: #1a1a1a;
  font-weight: 500;
}

/* ===================== FOOTER ===================== */
.footer {
  background: #1a1a1a;
  color: #fff;
}
.footer__cta {
  padding: var(--section-pad) var(--page-pad) 0;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  background-image: url('../images/banner-1.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  min-height: 80vh;
}
.footer__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 0;
}
.footer__cta > * {
  position: relative;
  z-index: 1;
}
.footer__cta .footer__bottom {
  margin-top: auto;
}
.footer__h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin-bottom: 24px;
  color: #fff;
}
.footer__h1 .word {
  display: inline-block;
  margin: 0 0.02em;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s, transform 0.8s var(--ease-smooth);
}
.footer__h1.in-view .word { opacity: 1; transform: translateY(0); }
.footer__h1 .space { width: 0.4em; display: inline-block; }
.footer__p {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.5;
  letter-spacing: -0.01em;
  max-width: 700px;
  margin: 0 auto 50px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
}
.footer__p .word {
  display: inline-block;
  margin: 0 0.06em;
}
.footer__cta-btn {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 6px;
  background: #fff;
  color: #1a1a1a;
  padding: 12px 20px;
  border-radius: 50px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: transform 0.3s, background 0.3s;
  width: auto;
  max-width: fit-content;
}
.footer__cta-btn:hover { transform: translateY(-2px); background: #ededed; }

/* 页脚 Quick Quote（Email + 图形验证码）：贴在深色 CTA 背景上，桌面端一行排满，
   输入框用半透明白底以保证任意底图下的对比度；提交按钮复用 .footer__cta-btn 的胶囊样式。 */
.footer__quote {
  align-self: center;
  width: 100%;
  max-width: 720px;
}
.footer__quote-fields {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.footer__quote-input {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50px;
  padding: 12px 18px;
  font-family: var(--font-display);
  font-size: 13px;
  color: #1a1a1a;
}
.footer__quote-input::placeholder { color: rgba(26, 26, 26, 0.55); }
.footer__quote-input:focus { outline: 2px solid #fff; outline-offset: 1px; background: #fff; }
/* .is-error 由 sample-modal.js 的必填/邮箱校验挂上 */
.footer__quote-input.is-error { border-color: #e05b4d; background: #fff5f4; }
.footer__quote-code {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.footer__quote-input--code { flex: 0 0 110px; }
.footer__quote .form-code-img { border-color: rgba(255, 255, 255, 0.4); }
.footer__quote .footer__cta-btn {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  /* 「Get a Quote」+ 箭头不换行，保证按钮自身是一行 */
  white-space: nowrap;
}
.footer__quote .form-feedback { margin-top: 14px; }
@media (max-width: 768px) {
  .footer__quote-fields { flex-direction: column; }
  .footer__quote-fields > *,
  .footer__quote-code { flex: 0 0 auto; width: 100%; }
  .footer__quote-input--code { flex: 1 1 auto; }
  .footer__quote .footer__cta-btn { align-self: center; }
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 30px var(--page-pad);
  /* 右下角的悬浮联系按钮是 fixed 的，会压在底行右侧的版权行上（公司名换成法定全称后更明显）；
     给底行预留它占的横向空间：桌面按钮组宽约 130 + 30 右边距，移动端折叠成图标约 48 + 30。 */
  padding-right: calc(var(--page-pad) + 150px);
}
@media (max-width: 768px) {
  .footer__bottom { padding-right: calc(var(--page-pad) + 70px); }
}
.footer__links {
  display: flex;
  gap: 30px;
}
.footer__links a {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s;
}
.footer__links a:hover { color: #fff; }
.footer__brand {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 500;
  color: #fff;
}
.footer__copy {
  font-size: var(--fs-meta);
  color: rgba(255, 255, 255, 0.5);
}
.footer__copy a { text-decoration: underline; }

/* ===================== PROPERTIES PAGE ===================== */
.page-header {
  position: relative;
  padding: 140px var(--page-pad) 60px;
  background: #1a1a1a;
  color: #fff;
  overflow: hidden;
}
.page-header--light {
  background: #fff;
  color: #1a1a1a;
  border-bottom: 1px solid var(--color-light);
}
.page-header__h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  max-width: 900px;
  margin-bottom: 24px;
}
.page-header__h1 .word { display: inline-block; margin-right: 0.25em; }
.page-header__p {
  font-size: var(--fs-lead-lg);
  line-height: 1.5;
  color: inherit;
  opacity: 0.7;
  max-width: 600px;
  margin-bottom: 40px;
}
.page-header__search {
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50px;
  padding: 6px 6px 6px 24px;
  max-width: 500px;
  margin-top: 30px;
}
.page-header--light .page-header__search {
  border-color: var(--color-light);
  background: #fff;
}
.page-header__search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 12px 0;
  color: inherit;
  font-size: 14px;
}
.page-header__search input::placeholder { color: inherit; opacity: 0.5; }
.page-header__search button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1a1a1a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}
.page-header--light .page-header__search button { background: #1a1a1a; color: #fff; }

.properties-page {
  background: #fff;
  padding: 80px 0 var(--section-pad);
}
.properties-page .properties__list { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1199px) { .properties-page .properties__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 809px) { .properties-page .properties__list { grid-template-columns: 1fr; } }

/* ===================== PROPERTY DETAIL ===================== */
.breadcrumb {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  padding: 0 0 16px;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  line-height: 1.5;
}
.breadcrumb a { opacity: 0.7; transition: opacity 0.3s; }
.breadcrumb a:hover { opacity: 1; }
.breadcrumb .sep { opacity: 0.4; }
.breadcrumb .current { opacity: 1; }
/* 面包屑列表（{pboot:position} 输出）：项与项之间 12px，分隔符紧随其前一项，间距与设计一致 */
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  margin: 0;
  padding: 0;
}
.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.property-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  margin-top: -90px;
  overflow: hidden;
  background: #000;
  color: #fff;
}
.property-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}
.property-hero__slide.active { opacity: 1; }
.property-hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.7) 100%);
}
.property-hero__pagination {
  position: absolute;
  bottom: 40px;
  left: var(--page-pad);
  display: flex;
  gap: 12px;
  z-index: 5;
}
.property-hero__pagination .dot {
  width: 40px;
  height: 3px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 0.3s;
}
.property-hero__pagination .dot.active { background: #fff; }
.property-hero__nav {
  position: absolute;
  bottom: 30px;
  right: var(--page-pad);
  display: flex;
  gap: 12px;
  z-index: 5;
}
.property-hero__nav button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 0.3s;
}
.property-hero__nav button:hover { background: #fff; color: #1a1a1a; }

.property-detail {
  background: #fff;
  padding: 100px 0;
}
.property-detail__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
}
@media (max-width: 1199px) { .property-detail__grid { grid-template-columns: 1fr; gap: 40px; } }
.property-detail__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  letter-spacing: -0.02em;
  font-weight: 400;
  margin-bottom: 12px;
}
.property-detail__location {
  font-size: var(--fs-lead);
  color: var(--color-text-2);
  margin-bottom: 24px;
}
.property-detail__desc {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--color-text-2);
  margin-bottom: 60px;
}
.property-detail__info-label {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 24px;
}
.property-detail__info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  border-top: 1px solid var(--color-light);
  padding-top: 30px;
  margin-bottom: 60px;
}
.property-detail__info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.property-detail__info-key {
  font-size: var(--fs-meta);
  color: var(--color-text-2);
}
.property-detail__info-val {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.property-detail__features-label {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 24px;
}
.property-detail__features {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.feature {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-light);
}
.feature__name {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.feature__desc {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text-2);
}
.property-detail__side {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.tour-card {
  background: #1a1a1a;
  color: #fff;
  border-radius: 20px;
  padding: 40px;
  position: sticky;
  top: 120px;
}
.tour-card__kicker {
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 12px;
}
.tour-card__p {
  font-family: var(--font-display);
  font-size: var(--fs-lead-lg);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 30px;
  font-weight: 400;
}
.tour-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #1a1a1a;
  padding: 14px 28px;
  border-radius: 50px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: background 0.3s, transform 0.3s;
}
.tour-card__btn:hover { background: #ededed; transform: translateY(-2px); }

.more-properties {
  background: #f7f7f7;
  padding: var(--section-pad) 0;
}
.more-properties__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
  flex-wrap: wrap;
  gap: 30px;
}

/* ===================== BLOG PAGES ===================== */
.blog-page {
  background: #fff;
  padding: 80px 0 var(--section-pad);
}
.blog-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1199px) { .blog-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 809px) { .blog-list { grid-template-columns: 1fr; } }

.blog-detail {
  background: #fff;
  padding: 60px 0 var(--section-pad);
}
.blog-detail__head {
  max-width: 800px;
  margin: 0 auto 60px;
  padding: 0 var(--page-pad);
}
.blog-detail__h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin-bottom: 30px;
}
.blog-detail__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  color: var(--color-text-2);
  letter-spacing: 0.05em;
}
.blog-detail__meta .cat { color: #1a1a1a; font-weight: 500; }
.blog-detail__body {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--page-pad);
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: #2a2a2a;
}
.blog-detail__body h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
  margin: 50px 0 20px;
  font-weight: 500;
}
.blog-detail__body p { margin-bottom: 24px; }
.blog-detail__body blockquote {
  border-left: 3px solid #1a1a1a;
  padding: 20px 30px;
  margin: 40px 0;
  font-style: italic;
  font-size: var(--fs-lead-lg);
  line-height: 1.5;
  color: #1a1a1a;
}
.blog-detail__author {
  max-width: 720px;
  margin: 60px auto;
  padding: 30px var(--page-pad);
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--color-light);
  border-bottom: 1px solid var(--color-light);
}
.blog-detail__author-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ededed;
  background-size: cover;
  background-position: center;
}
.blog-detail__author-name {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 500;
}
.blog-detail__author-role {
  font-size: var(--fs-label);
  color: var(--color-text-2);
}

/* ===================== CONTACT PAGE ===================== */
.contact-page {
  background: #fff;
}
.contact-page__head {
  padding: 140px var(--page-pad) 60px;
  text-align: center;
}
.contact-page__h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin-bottom: 20px;
}
.contact-page__p {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--color-text-2);
}
.contact-page__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  padding: 60px var(--page-pad) var(--section-pad);
  max-width: var(--max-width);
  margin: 0 auto;
}
@media (max-width: 1199px) { .contact-page__grid { grid-template-columns: 1fr; } }
.contact-info { display: flex; flex-direction: column; gap: 16px; }
.contact-info__item {
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-light);
}
.contact-info__label {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-2);
  margin-bottom: 6px;
}
.contact-info__value {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  letter-spacing: -0.01em;
}
.contact-info__social {
  display: flex;
  gap: 16px;
  margin-top: 20px;
}
.contact-info__social a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-light);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.contact-info__social a:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.contact-info__map {
  width: 100%;
  height: 240px;
  border-radius: 16px;
  overflow: hidden;
  background: #ededed;
  margin-top: 20px;
}
.contact-info__map iframe { width: 100%; height: 100%; border: 0; }

/* ===================== CONTACT PAGE LAYOUT ===================== */
/* /contact-us/ 首段说明句（后台「联系我们」栏目内容）：上方原本是一整份 --section-pad（100px），
   下方与表单卡片之间是 0，读起来一头松一头挤。上边收到 64px（≤809px 40px），
   下边留 40px（≤809px 28px），与 /custom-solutions/ 的标题/内容间距同一尺度。
   区块底边原先仍是满份 --section-pad（100/80/60px），而下一块 FAQ 是紧贴着的灰带，
   白区空档全在这一侧；收到 64px（≤809px 40px），与本区块上边距、以及
   /custom-solutions/ 的 Inquiry 区块（64/64）一致。
   首段正文比全站正文（16px）大一档，用 --fs-lead-lg（18px）并放宽行高。 */
.contact-page { background: #fff; padding-top: 64px; padding-bottom: 64px; }
@media (max-width: 809px) { .contact-page { padding-top: 40px; padding-bottom: 40px; } }
.contact__content { margin-bottom: 40px; }
@media (max-width: 809px) { .contact__content { margin-bottom: 28px; } }
.contact__content p { font-size: var(--fs-lead-lg); line-height: 1.7; }

.contact__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 1000px) { .contact__grid { grid-template-columns: 1fr; } }

.contact__form-card {
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 20px;
  padding: 44px 48px;
}
@media (max-width: 560px) {
  .contact__form-card { padding: 32px 24px; }
}
.contact__kicker { display: block; margin-bottom: 14px; }
.contact__title { margin-bottom: 10px; }
.contact__sub {
  font-family: var(--font-body);
  color: var(--color-text-2);
  line-height: 1.6;
  margin-bottom: 34px;
  max-width: 560px;
}

.form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 560px) { .form__grid { grid-template-columns: 1fr; } }

.contact__aside { display: flex; flex-direction: column; gap: 20px; }

.contact__info-card {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 20px;
  padding: 32px 32px 10px;
}
.contact__aside-title { margin-bottom: 6px; }
.contact__info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}
.contact__info-item:last-of-type { border-bottom: none; }
.contact__info-icon {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: #f2f2f2;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact__info-icon svg { width: 18px; height: 18px; }
.contact__info-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 4px;
  min-width: 0;
}
.contact__info-label {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-2);
}
.contact__info-value {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: #1a1a1a;
  text-decoration: none;
  word-break: break-word;
}
a.contact__info-value:hover { text-decoration: underline; }

.contact__map {
  height: 220px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  background: #f2f2f2;
}
.contact__map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ===================== PRODUCTS OVERVIEW LAYOUT ===================== */
.products-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 8px;
}
@media (max-width: 1100px) { .products-layout { grid-template-columns: 1fr; } }

/* 侧栏跟随滚动：右侧产品列表上万像素高，左侧 BROWSE CATEGORIES 下方无内容，
   钉在固定顶栏（高 80px）下方 16px 处。z-index 取 60：低于固定顶栏 102 / 头栏 101，
   但要高于同级的产品列，否则 hover 浮出的深层分类面板会被产品卡片盖住。
   窄屏单列时不跟随——侧栏在列表上方，钉住会一直挡住内容。 */
@media (min-width: 1101px) {
  .products-sidebar {
    position: sticky;
    top: 96px;
    z-index: 60;
    align-self: start;
  }
}

.products-tree {
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 20px;
  padding: 24px;
}
.products-tree__title {
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 8px;
}
.products-tree__group { padding: 14px 0; border-top: 1px solid #ececec; }
.products-tree__group:first-of-type { border-top: none; }
.products-tree__cat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  line-height: 1.35;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #1a1a1a;
  text-decoration: none;
  margin-bottom: 6px;
}
.products-tree__cat > span:first-child { min-width: 0; }
.products-tree__cat:hover { color: #333; }
.products-tree__count {
  flex: none;
  white-space: nowrap;
  font-size: var(--fs-micro);
  color: #8a8a8a;
  background: #fff;
  border: 1px solid #ececec;
  padding: 1px 8px;
  border-radius: 20px;
}
.products-tree__items { list-style: none; margin: 0; padding: 0; }
.products-tree__items li { margin: 0; }
.products-tree__items a {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text-2);
  padding: 6px 0 6px 2px;
  text-decoration: none;
  transition: color 0.2s, padding-left 0.2s;
}
.products-tree__items a::before { content: "—"; color: #c9c9c9; margin-right: 8px; }
.products-tree__items a:hover { color: #1a1a1a; padding-left: 6px; }

.products-content { min-width: 0; }

.products-tree__group { padding: 10px 0; }
.products-tree__items { list-style: none; margin: 2px 0 0; padding: 0; }
.products-tree__items li { margin: 0; }
.products-tree__items a {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text-2);
  padding: 5px 0 5px 20px;
  text-decoration: none;
  position: relative;
}
.products-tree__items a::before {
  content: "—";
  position: absolute;
  left: 2px;
  color: #c9c9c9;
}

/* product card row: name + tag stacked on two lines (name wraps fully) */
.products-content .property-card__row {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 12px;
}
.products-content .property-card__name { line-height: 1.15; }
.products-content .property-card__price { font-size: var(--fs-sm); color: var(--color-text-2); }

.form { display: flex; flex-direction: column; gap: 24px; }
.form__row { display: flex; flex-direction: column; gap: 8px; }
.form__label {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-2);
  font-weight: 500;
}
.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: 16px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-light);
  font-size: 16px;
  color: #1a1a1a;
  transition: border-color 0.3s;
  outline: none;
  border-radius: 0;
  font-family: var(--font-body);
}
.form__input:focus,
.form__select:focus,
.form__textarea:focus { border-bottom-color: #1a1a1a; }
.form__input::placeholder,
.form__textarea::placeholder { color: #c4c4c4; }
.form__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='%231a1a1a' stroke-width='1.5' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 14px;
  padding-right: 30px;
}
.form__textarea {
  resize: vertical;
  min-height: 100px;
  padding: 16px;
  border: 1px solid var(--color-light);
  border-radius: 12px;
}
.form__submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1a1a1a;
  color: #fff;
  padding: 16px 36px;
  border-radius: 50px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  margin-top: 16px;
  transition: background 0.3s, transform 0.3s;
}
.form__submit:hover { background: #333; transform: translateY(-2px); }

/* ===================== LEGAL PAGES ===================== */
.legal-page {
  padding: 140px var(--page-pad) 80px;
  max-width: 800px;
  margin: 0 auto;
}
.legal-page h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  font-weight: 400;
}
.legal-page .meta {
  color: var(--color-text-2);
  margin-bottom: 40px;
  font-size: var(--fs-meta);
}
.legal-page h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  margin: 40px 0 12px;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.legal-page p, .legal-page li {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: #2a2a2a;
  margin-bottom: 12px;
}
.legal-page ul { padding-left: 20px; }

/* ===================== UTILITIES ===================== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1a1a1a;
  color: #fff;
  padding: 16px 32px;
  border-radius: 50px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background 0.3s, transform 0.3s;
}
.btn-primary:hover { background: #333; transform: translateY(-2px); }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #1a1a1a;
  padding: 14px 28px;
  border-radius: 50px;
  border: 1px solid #1a1a1a;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.btn-ghost:hover { background: #1a1a1a; color: #fff; }

.btn-ghost--light {
  color: #fff;
  border-color: #fff;
}
.btn-ghost--light:hover { background: #fff; color: #1a1a1a; }

/* Generic btn system (BEM) — used across generated sub-pages */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
}
.btn--primary {
  background: #004a96;
  color: #fff;
  border-color: #004a96;
}
.btn--primary:hover {
  background: #002c5a;
  border-color: #002c5a;
  transform: translateY(-2px);
}
.btn--outline {
  background: #f7f7f7;
  color: #1a1a1a;
  border-color: #c4c4c4;
}
.btn--outline:hover {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}

/* Topbar on dark pages (contact, etc) */
.topbar--light {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
.topbar--light .topbar-logo { color: #1a1a1a; }
.topbar--light .menu-trigger { color: #1a1a1a; }
.topbar--light .menu-trigger .lines span { background: #1a1a1a; }
.topbar--light.solid {
  background: #fff;
  border-bottom-color: var(--color-light);
}

/* ==========================================================================
   WXP HEADER / MENU — replicated from template-f-basf 2
   Variables scoped to .wxp-overlay-container to avoid conflicts
   ========================================================================== */
.wxp-overlay-container {
  --wxp-ui-blue-dark-50: #e5edf4;
  --wxp-ui-blue-dark-500: #004a96;
  --wxp-ui-blue-dark-700: #002c5a;
  --wxp-ui-blue-dark-800: #001e3c;
  --wxp-ui-blue-light-500: #21a0d2;
  --wxp-menu-icon-burger-color: #fff;
  --wxp-menu-icon-burger-background: transparent;
  --wxp-menu-icon-close-color: #fff;
  --wxp-menu-icon-close-background: transparent;
  --wxp-menu-icon-hover-color: #fff;
  --wxp-menu-border-lateral: #fff;
  --wxp-menu-identifier-color: #fff;
  --wxp-menuitem-span-color: #fff;
  --wxp-menuitem-chevron-color: #fff;
  --wxp-header-background-color: transparent;
  --wxp-color-primary: #004a96;
  --wxp-color-primary-dark: #002c5a;
  --wxp-color-accent: #21a0d2;
  --wxp-color-text: #1a1a1a;
  --wxp-color-text-pale: #6b6b6b;
  --wxp-color-surface: #fff;
  --wxp-color-pale: #e5edf4;
  --wxp-color-gray: #f4f4f4;
  --wxp-color-gray-mid: #e8e8e8;
  --wxp-color-border: #dcdcdc;
  --wxp-color-border-pale: #ececec;
  --wxp-font: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  --wxp-content-max: 77.875rem;
  --wxp-bar-height: 5rem;
  --wxp-bar-top: 0;
  --wxp-side-space: 1.5rem;
}
@media (min-width: 48em) {
  .wxp-overlay-container {
    --wxp-bar-height: 5rem;
    --wxp-bar-top: 0;
  }
}

.wxp-overlay-container { position: fixed; top: 0; left: 0; right: 0; z-index: 102; }
.wxp-overlay-container.closed .wxp-overlay { display: none; }
.wxp-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 100; display: none; }

.wxp-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 102; }

.wxp-header {
  width: 100%; display: flex; align-items: stretch;
  background: var(--wxp-header-background-color);
  height: var(--wxp-bar-height);
  position: fixed; top: var(--wxp-bar-top); left: 0; right: 0;
  z-index: 101; transition: background 0.3s ease, top 0.3s ease;
  will-change: background;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.wxp-header.scrolled, .wxp-header.sticky {
  background: #fff;
  top: 0;
  border-bottom-color: rgba(0,0,0,0.08);
  --wxp-header-background-color: #fff;
  --wxp-menu-icon-burger-color: #1a1a1a;
  --wxp-menu-icon-close-color: #1a1a1a;
  --wxp-menu-icon-hover-color: #004a96;
  --wxp-menu-identifier-color: #1a1a1a;
  --wxp-menuitem-span-color: #1a1a1a;
  --wxp-menuitem-chevron-color: #1a1a1a;
}
.wxp-header-inner {
  width: 100%; max-width: var(--max-width);
  margin: 0 auto; display: flex; align-items: stretch;
  height: 100%;
  padding: 0 var(--page-pad);
}
.wxp-header-inner .wxp-menubar { flex: 1; }

.wxp-menubar { display: flex; align-items: stretch; flex: 1; height: 100%; padding: 0; }

.wxp-burger { display: none !important; }
@media (max-width: 820px) {
  .wxp-burger {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem;
    background: none; border: none; cursor: pointer;
    color: inherit; padding: 0;
  }
  .wxp-burger svg { width: 1.5rem; height: 1.5rem; }
  .wxp-burger:hover { opacity: 0.7; }
}

.wxp-menu-identifier { color: var(--wxp-menu-identifier-color); font-weight: 500; display: block; }

.wxp-top-bar-links {
  display: flex; align-items: stretch; height: 100%;
  margin-left: 1rem; gap: 0; flex-wrap: nowrap;
}
.wxp-top-bar-links .wxp-link {
  display: inline-flex; align-items: center; height: 100%;
  padding: 0 1.1rem; color: var(--wxp-menuitem-span-color);
  text-decoration: none; font-size: var(--fs-lead);
  font-weight: 600; text-transform: none;
  transition: all 0.2s ease; border-bottom: 3px solid transparent;
}
.wxp-top-bar-links .wxp-link:hover {
  color: #fff;
  border-bottom: 3px solid var(--wxp-color-accent);
  text-decoration: none;
}
.wxp-header.scrolled .wxp-top-bar-links .wxp-link:hover,
.wxp-header.sticky .wxp-top-bar-links .wxp-link:hover {
  color: #1a1a1a;
}
.wxp-top-bar-links .wxp-link:focus { outline: none; }
.wxp-top-bar-links .wxp-link:focus-visible { outline: 2px solid var(--wxp-menuitem-chevron-color); outline-offset: 2px; }
.wxp-top-bar-links .wxp-link--cta {
  background: transparent;
  color: var(--wxp-menuitem-span-color);
  border-radius: 0;
  margin: 0;
  padding: 0 1.1rem;
  height: 100%;
  border-bottom: 3px solid transparent;
}
.wxp-top-bar-links .wxp-link--cta:hover {
  background: transparent;
  border-bottom: 3px solid var(--wxp-color-accent);
  color: #fff;
}
.wxp-header.scrolled .wxp-top-bar-links .wxp-link--cta:hover,
.wxp-header.sticky .wxp-top-bar-links .wxp-link--cta:hover {
  color: #1a1a1a;
}

/* 821–1080px：7 个一级项在 1rem 字号下会把右侧搜索/语言图标顶出视口，此区间收回 0.9375rem + 更紧的左右内边距，加粗保持不变。 */
@media (min-width: 821px) and (max-width: 1080px) {
  .wxp-top-bar-links .wxp-link { font-size: 0.9375rem; padding: 0 0.6rem; }
}

.wxp-top-bar-icons {
  margin-left: auto; display: flex; align-items: center;
  gap: 0.25rem; height: 100%; padding-right: var(--wxp-side-space);
}
.wxp-top-bar-icons .wxp-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 100%; color: var(--wxp-menuitem-span-color);
  text-decoration: none; background: none; border: none; cursor: pointer;
  transition: opacity 0.2s;
}
.wxp-top-bar-icons .wxp-icon:hover { opacity: 0.65; text-decoration: none; }
.wxp-top-bar-icons .wxp-icon svg { width: 1.25rem; height: 1.25rem; }

.wxp-search-wrapper { position: relative; }
.wxp-search-toggle { background: none; border: none; cursor: pointer; }
.wxp-search-box {
  position: absolute; top: 100%; right: 0;
  background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 0.75rem; border-radius: 4px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  width: 320px; z-index: 1000;
}
.wxp-search-wrapper.active .wxp-search-box { opacity: 1; visibility: visible; transform: translateY(0); }
.wxp-search-form { display: flex; gap: 0.5rem; }
.wxp-search-form input {
  flex: 1; padding: 0.5rem 0.75rem; border: 1px solid #ddd;
  font-size: 0.875rem; outline: none; border-radius: 2px;
  font-family: inherit;
}
.wxp-search-form input:focus { border-color: var(--wxp-color-primary); }
.wxp-search-form button {
  background: var(--wxp-color-primary); color: #fff; border: none;
  padding: 0.5rem 0.75rem; cursor: pointer; border-radius: 2px;
  display: flex; align-items: center;
}
.wxp-search-form button svg { width: 1rem; height: 1rem; }
.wxp-search-form button:hover { background: var(--wxp-color-primary-dark); }

.wxp-lang-wrapper { position: relative; }
.wxp-lang-toggle { background: none; border: none; cursor: pointer; }
.wxp-lang-dropdown {
  position: absolute; top: 100%; right: 0;
  background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 4px; min-width: 140px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  z-index: 1000; overflow: hidden;
}
.wxp-lang-wrapper:hover .wxp-lang-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.wxp-lang-option {
  display: block; padding: 0.5rem 1rem; font-size: var(--fs-sm);
  color: var(--wxp-color-text); text-decoration: none;
  transition: background 0.15s;
}
.wxp-lang-option:hover { background: rgba(0,0,0,0.04); color: var(--wxp-color-primary); }
.wxp-lang-option.active { font-weight: 600; color: var(--wxp-color-primary); }

.wxp-basf-logo {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; padding: 0 1rem 0 0;
  text-decoration: none; color: #fff; line-height: 1;
  min-width: 8rem; height: 100%; background: transparent;
  transition: background 0.3s ease;
}
.wxp-header.scrolled .wxp-basf-logo, .wxp-header.sticky .wxp-basf-logo { background: transparent; color: #1a1a1a; }
.wxp-header.scrolled .wxp-basf-logo__main, .wxp-header.sticky .wxp-basf-logo__main { color: #1a1a1a; }
.wxp-header.scrolled .wxp-basf-logo__tag, .wxp-header.sticky .wxp-basf-logo__tag { color: #6b6b6b; }
.wxp-basf-logo__img {
  display: block;
  height: 60px;
  width: auto;
  object-fit: contain;
}
@media (max-width: 820px) {
  .wxp-basf-logo__img { height: 52px; }
}
.wxp-basf-logo:hover { text-decoration: none; }
.wxp-basf-logo__main {
  font-size: 1.5rem; font-weight: 700; letter-spacing: 0.06em;
  font-family: var(--wxp-font); display: block; color: #fff;
}
.wxp-basf-logo__tag {
  font-size: 0.75rem; font-weight: 400; margin-top: 0.25rem;
  opacity: 0.9; display: block; color: #fff; letter-spacing: 0.02em;
}

@media (max-width: 820px) {
  .wxp-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 200; display: block; opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
  }
  .wxp-overlay-container:not(.closed) .wxp-overlay { opacity: 1; pointer-events: auto; }
}
.wxp-overlay-nav {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 280px; max-width: 80vw;
  background: #fff; z-index: 201;
  display: flex; flex-direction: column; gap: 0;
  transform: translateX(100%); transition: transform 0.3s ease;
  overflow-y: auto; padding: 4.5rem 0 2rem;
}
.wxp-overlay-nav.open { transform: translateX(0); }
.wxp-overlay-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--wxp-color-text); padding: 0;
}
.wxp-overlay-close svg { width: 1.5rem; height: 1.5rem; }
.wxp-overlay-close:hover { color: var(--wxp-color-primary); }
.wxp-overlay-nav .wxp-link {
  display: block; padding: 0.875rem 1.5rem; border-bottom: 1px solid var(--wxp-color-gray);
  font-size: var(--fs-sm); font-weight: 600; color: var(--wxp-color-text); text-decoration: none;
}
.wxp-overlay-nav .wxp-link:hover { text-decoration: none; color: var(--wxp-color-primary); background: var(--wxp-color-gray); }

.wxp-top-bar-links .has-dd { position: relative; }
.wxp-top-bar-links .has-dd .dd-arrow {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  display: block; font-size: 0.6rem; color: var(--wxp-menuitem-chevron-color); line-height: 1;
}
.wxp-top-bar-links .dd-panel {
  display: none; position: absolute; top: 100%; left: 0;
  background: var(--wxp-color-surface); border: 1px solid var(--wxp-color-border);
  padding: 1rem 1.5rem; margin-top: 0; width: max-content; min-width: 200px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.12); z-index: 102; white-space: nowrap;
}
.wxp-top-bar-links .dd-panel.open { display: block; }
.wxp-top-bar-links .dd-panel a {
  display: block; font-size: var(--fs-meta); color: var(--wxp-color-text);
  padding: 0.375rem 0; text-decoration: none;
}
.wxp-top-bar-links .dd-panel a:hover { color: var(--wxp-color-primary); text-decoration: none; }

.wxp-menu-item { position: relative; }
.wxp-menu-item > .wxp-link { display: inline-flex; align-items: center; gap: 0.35rem; }
.wxp-chevron { width: 10px; height: 6px; transition: transform 0.25s ease; }
.wxp-menu-item:hover .wxp-chevron { transform: rotate(180deg); }

.wxp-dropdown {
  display: none; position: fixed;
  top: calc(var(--wxp-bar-top) + var(--wxp-bar-height));
  left: 0; right: 0;
  background: #fff;
  box-shadow: 0 14px 34px rgba(0,0,0,0.12);
  z-index: 200;
  border-top: 1px solid var(--wxp-color-border);
}
.wxp-header.scrolled .wxp-dropdown, .wxp-header.sticky .wxp-dropdown { top: var(--wxp-bar-height); }
.wxp-menu-item:hover .wxp-dropdown { display: block; }
.wxp-dropdown::before {
  content: ""; position: absolute; top: -20px; left: 0; right: 0; height: 20px;
}
.wxp-dropdown-inner {
  width: 100%; max-width: var(--max-width);
  margin: 0 auto; display: flex; gap: 0; padding: 0 var(--page-pad);
}
.wxp-dropdown-menu { flex: 1; padding: 1.5rem 0; }

.wxp-dropdown-mega-cols { display: flex; gap: 0; flex: 1; }
/* Applications 下拉：条目数随后台内容变化，沿用三列卡片版式（列内 h4 / p / Learn More），
   每列宽度与原来固定 3 条时一致；超过 3 条换到第二行，不与第一行共用竖分隔线 */
.wxp-dropdown-mega-cols--apps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wxp-dropdown-mega-cols--apps .wxp-dropdown-mega-col:nth-child(3n) { border-right: none; }
.wxp-dropdown-mega-cols--apps .wxp-dropdown-mega-col:nth-child(n+4) { border-top: 1px solid var(--wxp-color-border); }
/* 窄屏桌面（821–999）里右侧菜单广告固定占 380px，三列只剩约 127px，两行会把下拉顶出视口；
   这一档先收起该广告，让三列回到单行三条时相同的宽度。≤820 整个下拉隐藏、改走移动菜单。 */
@media (max-width: 999px) {
  .wxp-dropdown--apps .wxp-dropdown-banner { display: none; }
}
.wxp-dropdown-mega-col { flex: 1; padding: 1.5rem 0; border-right: 1px solid var(--wxp-color-border); }
.wxp-dropdown-mega-col:last-child { border-right: none; }
.wxp-dropdown-mega-col h4 {
  font-size: var(--fs-kicker); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; margin: 0 0 0.75rem; padding: 0 1.5rem;
  color: var(--wxp-color-primary); display: flex; align-items: center; justify-content: space-between;
}
.wxp-dropdown-mega-col h4 a { color: inherit; text-decoration: none; padding: 0; }
.wxp-dropdown-mega-col h4 a:hover { text-decoration: underline; }
.wxp-dropdown-mega-col h4 .wxp-arrow { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.2s ease; }
.wxp-dropdown-mega-col h4:hover .wxp-arrow { transform: translateX(3px); }
.wxp-dropdown-mega-col ul { list-style: none; margin: 0; padding: 0; }
.wxp-dropdown-mega-col li { margin: 0; }
.wxp-dropdown-mega-col a {
  display: block; padding: 0.375rem 1.5rem; font-size: var(--fs-sm);
  color: var(--wxp-color-text); text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.wxp-dropdown-mega-col a:hover { background: rgba(0,0,0,0.04); color: var(--wxp-color-primary); }
.wxp-dropdown-mega-col p {
  font-size: var(--fs-meta); line-height: 1.5; color: #666;
  margin: 0 0 0.5rem; padding: 0 1.5rem;
}
.wxp-dropdown-learn {
  font-size: var(--fs-meta); font-weight: 600; color: var(--wxp-color-primary) !important;
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0 1.5rem;
}
.wxp-dropdown-learn::after { content: '→'; transition: transform 0.2s ease; }
.wxp-dropdown-learn:hover { text-decoration: underline; }
.wxp-dropdown-learn:hover::after { transform: translateX(3px); }

/* Products 下拉：列内是产品列表页左侧 BROWSE CATEGORIES 的同一棵分类树。
   列表首层与浮层子项同字重，不加粗；再下一级默认收起，鼠标 hover（或键盘聚焦）时向右浮出白卡，
   与左侧栏「一级展开、再下一级 hover 浮出」的层级一致。
   无悬停能力（触屏平板）时保持内联缩进，列表过长在菜单区内滚动。 */
.wxp-dropdown-menu {
  /* 只减顶部栏高度：--wxp-bar-top 是无单位 0，混进 calc 会让整条声明失效 */
  max-height: calc(100vh - var(--wxp-bar-height) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.wxp-dropdown-mega-col .wxp-mega-list > li > a { color: var(--wxp-color-text); }
.wxp-dropdown-mega-col--tree { padding: 1.25rem 0; }
.wxp-dropdown-mega-col--tree .wxp-mega-list a { padding-top: 0.3rem; padding-bottom: 0.3rem; }
.wxp-dropdown-mega-col .wxp-mega-sub {
  margin: 0.125rem 0 0.3rem 1.5rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--wxp-color-border-pale);
}
.wxp-dropdown-mega-col .wxp-mega-sub a {
  padding: 0.2rem 0;
  font-size: var(--fs-meta);
  color: var(--wxp-color-text-pale);
}
.wxp-dropdown-mega-col .wxp-mega-sub a:hover { background: none; color: var(--wxp-color-primary); }

@media (hover: hover) and (pointer: fine) {
  /* 浮层要越过菜单区右边界，这一档取消限高与滚动，避免子级被裁掉 */
  .wxp-dropdown-menu { max-height: none; overflow: visible; }

  .wxp-mega-list > li, .wxp-mega-sub > li { position: relative; }
  .wxp-mega-list > li.has-children > a,
  .wxp-mega-sub > li.has-children > a {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  }
  .wxp-mega-list > li.has-children > a::after,
  .wxp-mega-sub > li.has-children > a::after {
    content: "\203A"; flex: none; font-size: 1.15rem; line-height: 1;
    color: var(--wxp-color-text-pale); transition: color 0.2s ease;
  }
  .wxp-mega-list > li.has-children:hover > a,
  .wxp-mega-list > li.has-children:focus-within > a,
  .wxp-mega-sub > li.has-children:hover > a,
  .wxp-mega-sub > li.has-children:focus-within > a {
    color: var(--wxp-color-primary); background: rgba(0, 0, 0, 0.04);
  }
  .wxp-mega-list > li.has-children:hover > a::after,
  .wxp-mega-list > li.has-children:focus-within > a::after,
  .wxp-mega-sub > li.has-children:hover > a::after,
  .wxp-mega-sub > li.has-children:focus-within > a::after { color: var(--wxp-color-primary); }

  .wxp-dropdown-mega-col .wxp-mega-sub {
    position: absolute; top: -0.75rem; left: 100%;
    z-index: 2;
    min-width: 220px; width: max-content; max-width: 300px;
    margin: 0; padding: 0.5rem 1rem;
    border: 1px solid var(--wxp-color-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.13);
    opacity: 0; pointer-events: none;
    transition: opacity 0.16s ease;
  }
  /* 与条目之间补一条透明桥，斜着移进浮层时不会闪断 */
  .wxp-dropdown-mega-col .wxp-mega-sub::before {
    content: ""; position: absolute; top: -10px; bottom: -10px; left: -18px; width: 18px;
  }
  .wxp-mega-list > li.has-children:hover > .wxp-mega-sub,
  .wxp-mega-list > li.has-children:focus-within > .wxp-mega-sub,
  .wxp-mega-sub > li.has-children:hover > .wxp-mega-sub,
  .wxp-mega-sub > li.has-children:focus-within > .wxp-mega-sub { opacity: 1; pointer-events: auto; }

  /* 浮层里的更深层级继续向右浮出；1rem 是浮层左/右内边距，跨过它才不会压住父层 */
  .wxp-dropdown-mega-col .wxp-mega-sub .wxp-mega-sub { left: calc(100% + 1rem); top: -0.6rem; }
  .wxp-dropdown-mega-col .wxp-mega-sub a {
    padding: 0.3rem 0;
    font-size: var(--fs-sm);
    color: var(--wxp-color-text);
  }
  .wxp-dropdown-mega-col .wxp-mega-sub a:hover { background: none; color: var(--wxp-color-primary); }
}

.wxp-dropdown-banner { flex: 0 0 380px; display: flex; flex-direction: column; overflow: hidden; }
/* 面板很高时（Products 下拉）让图片吸收多余高度，文案块保持自身高度，避免拉出一大片纯色块 */
.wxp-dropdown-banner-img { flex: 1 1 auto; min-height: 200px; overflow: hidden; }
.wxp-dropdown-banner-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wxp-dropdown-banner-text {
  padding: 1.5rem; background: var(--wxp-color-primary); color: #fff; flex: 0 0 auto;
}
.wxp-dropdown-banner-text h4 { font-size: var(--fs-title); font-weight: 600; margin: 0 0 0.5rem; color: #fff; }
.wxp-dropdown-banner-text p { font-size: var(--fs-sm); margin: 0 0 1rem; opacity: 0.85; line-height: 1.5; }
.wxp-dropdown-banner-text a {
  color: #fff; font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.wxp-dropdown-banner-text a:hover { text-decoration: underline; }
.wxp-arrow { width: 16px; height: 16px; transition: transform 0.2s ease; }
.wxp-dropdown-banner-text a:hover .wxp-arrow { transform: translateX(3px); }

/* ===================== FLOATING CONTACT BUTTONS ===================== */
.floating-contact {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.floating-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 130px;
  padding: 10px 10px;
  border-radius: 10px;
  background: #1a1a1a;
  color: #fff;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.floating-btn:hover {
  background: #333;
}
.floating-btn--phone:hover {
  background: #25d366;
}
.floating-btn--whatsapp,
.floating-btn--email {
  background: #fff;
  color: #1a1a1a;
}
.floating-btn--whatsapp:hover,
.floating-btn--email:hover {
  background: #1a1a1a;
  color: #fff;
}
.floating-btn--email:hover {
  background: #fff;
  color: #1a1a1a;
}
/* 悬浮工具最下方：回到页面顶部（button 需清掉浏览器默认外观，否则会带斜面边框） */
.floating-btn--top {
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background: #fff;
  color: #1a1a1a;
}
.floating-btn--top:hover {
  background: #1a1a1a;
  color: #fff;
}
.floating-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}
.floating-btn__icon svg {
  width: 12px;
  height: 12px;
}

/* Product Grid — All Products Catalog */
.product-grid--all {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.product-grid--all .product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.product-grid--all .product-card:hover {
  border-color: #1a1a1a;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.product-grid--all .product-card h3 {
  font-size: var(--fs-title);
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: #1a1a1a;
}
.product-grid--all .product-card p {
  font-size: var(--fs-sm);
  color: #666;
  margin: 0;
  line-height: 1.5;
}

/* Freshness Tag */
.freshness-tag {
  display: inline-block;
  background: #e8f5e9;
  color: #2e7d32;
  font-size: var(--fs-label);
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 1.5rem;
}

/* Badges */
.badge {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 0.25rem;
}
.badge--zdhc {
  background: #e8f5e9;
  color: #2e7d32;
}
.badge--nsf {
  background: #e3f2fd;
  color: #1565c0;
}

/* Custom Solutions Grid */
.custom-solutions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-bottom: 32px;
}
@media (max-width: 768px) { .custom-solutions-grid { grid-template-columns: 1fr; } }

/* Solutions Grid (Homepage lifestyle cards as grid) */
/* 方案卡片：跟随后台内容，本栏目每篇已发布内容一张（当前 6 张 → 3 列 2 行），
   卡片为上图下文。缩略图为空时由解析器补兜底图，这里不处理。
   卡片现在是纯展示块（前台不再输出 <a>），所以 hover 抬升/阴影一并去掉——
   那是「可点」的暗示，留着会让人以为点了没反应。 */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) { .solutions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .solutions-grid { grid-template-columns: 1fr; } }

.solution-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-light);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  color: #1a1a1a;
}
.solution-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f2f2f2;
}
.solution-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.solution-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.solution-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 600;
}
.solution-card__desc {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: #555;
}

/* Features Grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .features-grid { grid-template-columns: 1fr; } }

.feature-card {
  background: #f7f7f7;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}
.feature-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 14px;
  margin: 0 auto 20px;
  color: #004a96;
}
.feature-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 600;
  margin: 0 0 12px;
  color: #1a1a1a;
}
.feature-card__desc {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: #666;
  margin: 0;
}

/* How We Customize 区块的皮肤：复用 .features-grid + .feature-card 的版式，
   但改成白底细描边 + 浅蓝图标底 —— 它下面紧挨着的是灰底的流程区块（COOPERATION PROCESS），
   灰卡片会跟那条灰带连成一片。 */
.customize-grid .feature-card {
  background: #fff;
  border: 1px solid var(--color-light);
}
.customize-grid .feature-card__icon {
  background: #f2f6fb;
}
/* 四张卡改成 2×2 后卡面变宽，卡内文字用同一套标度上调一档：
   标题 17px（--fs-title）→ --fs-h3（18–22px），描述 14px（--fs-sm）→ --fs-lead（16px）。 */
.customize-grid .feature-card__title { font-size: var(--fs-h3); }
.customize-grid .feature-card__desc { font-size: var(--fs-lead); }
/* How We Customize 的四张卡按一行 2 个排（2×2），与上面 Solutions 的两列卡片对齐；
   ≤640px 仍单列，所以这里自带 640 覆盖（.features-grid 自己的 4→2→1 断点不再决定本块）。 */
.customize-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .customize-grid { grid-template-columns: 1fr; } }

/* Process Timeline
   栏数按条目数自适应：这个区块的条数后台可加到 6（cs_process_limit），写死 repeat(4,1fr)
   会让第 5 条掉到第二行变成孤零零一栏。单列回落断点取 800px：auto-fit 要 5×150px + 页面
   内边距才排得下，768–798px 之间会先出现 4+1，所以提前到 800 整段收成单列。 */
.process-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  position: relative;
}
.process-timeline::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, #004a96, #0073e6);
}
@media (max-width: 800px) {
  .process-timeline { grid-template-columns: 1fr; gap: 24px; }
  .process-timeline::before { display: none; }
}

.process-timeline__item {
  text-align: center;
  position: relative;
  padding: 0 16px;
}
.process-timeline__num {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #004a96;
  color: #fff;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin: 0 auto 20px;
  position: relative;
  z-index: 1;
}
.process-timeline__content h3 {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 600;
  margin: 0 0 8px;
  color: #1a1a1a;
}
.process-timeline__content p {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: #666;
  margin: 0;
}

/* Custom Layout (Main + Sidebar) */
.custom-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
}
@media (max-width: 1024px) { .custom-layout { grid-template-columns: 1fr; } }

.custom-layout__main {
  background: #f7f7f7;
  border-radius: 20px;
  padding: 40px;
}
.custom-layout__sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sidebar-card {
  background: #f7f7f7;
  border-radius: 16px;
  padding: 28px;
}
.sidebar-card--highlight {
  background: #004a96;
  color: #fff;
}
.sidebar-card--highlight .sidebar-card__desc {
  color: rgba(255,255,255,0.85);
}
.sidebar-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 600;
  margin: 0 0 12px;
}
.sidebar-card__desc {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: #666;
  margin: 0 0 20px;
}

.sidebar-contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sidebar-contact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 10px;
  text-decoration: none;
  color: #1a1a1a;
  transition: all 0.2s ease;
}
.sidebar-contact:hover {
  background: #004a96;
  color: #fff;
}
.sidebar-contact__icon {
  font-size: 1.125rem;
}
.sidebar-contact__text {
  font-size: var(--fs-sm);
  font-weight: 500;
}

.wizard-mini {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wizard-mini select,
.wizard-mini input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 0.875rem;
}
.wizard-mini select option {
  color: #1a1a1a;
  background: #fff;
}
.wizard-mini input::placeholder {
  color: rgba(255,255,255,0.6);
}
.btn--sm {
  padding: 10px 20px;
  font-size: var(--fs-sm);
}

/* Inquiry Form */
.form-intro {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: #666;
  margin: 0 0 2rem;
}

.inquiry-form__section {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.inquiry-form__section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 1.5rem;
}

.inquiry-form__section-title {
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #004a96;
  margin-bottom: 1.25rem;
}

.inquiry-form__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 640px) { .inquiry-form__row { grid-template-columns: 1fr; } }

.inquiry-form__field {
  display: flex;
  flex-direction: column;
}

.inquiry-form__label {
  font-size: var(--fs-label);
  font-weight: 500;
  color: #1a1a1a;
  margin-bottom: 8px;
}
.inquiry-form__label .required {
  color: #e53935;
}

.inquiry-form__input,
.inquiry-form__select,
.inquiry-form__textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  background: #fff;
  font-size: 0.9375rem;
  color: #1a1a1a;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.inquiry-form__input:focus,
.inquiry-form__select:focus,
.inquiry-form__textarea:focus {
  outline: none;
  border-color: #004a96;
  box-shadow: 0 0 0 3px rgba(0,74,150,0.1);
}
.inquiry-form__input::placeholder,
.inquiry-form__textarea::placeholder {
  color: #aaa;
}

.inquiry-form__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}

.inquiry-form__textarea {
  resize: vertical;
  min-height: 100px;
}

.inquiry-form__footer {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.inquiry-form__note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-meta);
  color: #888;
}
.inquiry-form__note svg {
  flex-shrink: 0;
  color: #aaa;
}

/* Pillar Intro */
.pillar-intro {
  max-width: 800px;
}
.pillar-intro p {
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: #444;
  margin: 0 0 1rem;
}
.pillar-intro p:last-child {
  margin-bottom: 0;
}

/* Custom Solutions 详情页（solutiondetail.html）：正文 + 底部操作按钮 */
.solution-detail__body {
  max-width: 820px;
}
.solution-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
  max-width: 820px;
}

/* Hub Product Grid */
.hub-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) { .hub-product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .hub-product-grid { grid-template-columns: 1fr; } }

.hub-product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: #1a1a1a;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hub-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
.hub-product-card__img {
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.hub-product-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.hub-product-card:hover .hub-product-card__img img {
  transform: scale(1.05);
}
.hub-product-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.hub-product-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.hub-product-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 600;
  margin: 0;
}
.hub-product-card__desc {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: #666;
  margin: 0 0 16px;
  flex: 1;
}
.hub-product-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.hub-product-card__specs span {
  font-size: var(--fs-micro);
  font-weight: 500;
  color: #004a96;
  background: rgba(0,74,150,0.06);
  padding: 4px 8px;
  border-radius: 4px;
}

/* Product Breadcrumbs (below fixed header) */
.product-breadcrumbs {
  padding: 100px var(--page-pad) 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.breadcrumb--light {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-bottom: 20px;
  color: #5e5e5e;
}
.breadcrumb--light a { opacity: 1; color: #004a96; }
.breadcrumb--light a:hover { opacity: 0.75; }
.breadcrumb--light .sep { opacity: 0.4; }

/* Product Hero */
.product-hero {
  max-width: var(--max-width);
  margin: 0 auto;
  /* 下内边距归零：紧随其后的 .section 自带 --section-pad 上内边距，
     两者相加会让 Overview 离 Hero 达到 2×section-pad（桌面 200px），间距过大 */
  padding: 48px var(--page-pad) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 768px) {
  .product-hero { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; }
}

.product-hero__gallery { min-width: 0; }

.product-hero__slider {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}
.product-hero__slide {
  display: none;
}
.product-hero__slide:first-child {
  display: block;
}
.product-hero__slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}
.product-hero__thumbs {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}
.product-hero__thumb {
  width: 112px;
  height: 70px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}
.product-hero__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-hero__thumb:hover {
  opacity: 0.8;
}
.product-hero__thumb.is-active {
  border-color: #004a96;
}
.product-hero h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 1rem;
  color: #1a1a1a;
}
.product-hero p {
  font-size: var(--fs-lead-lg);
  line-height: 1.6;
  margin: 0 0 1rem;
  color: #5e5e5e;
}
.product-hero__actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
@media (max-width: 1024px) {
  .product-hero__actions .btn { flex: 1 1 auto; }
}
.product-hero .badge {
  display: inline-block;
  margin-bottom: 1rem;
}
.product-hero__category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #004a96;
  margin-bottom: 1rem;
}
.product-hero__category::before {
  content: "";
  width: 18px;
  height: 2px;
  background: #004a96;
}
.product-hero .product-hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  margin: 0 0 1.5rem;
  color: #1a1a1a;
}
.product-hero__highlights {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.product-hero__highlights li {
  position: relative;
  padding-left: 28px;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: #444;
}
.product-hero__highlights li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #004a96;
  font-weight: 700;
}

/* Product Layout (Main + Sidebar) */
.product-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
}
@media (max-width: 1024px) { .product-layout { grid-template-columns: 1fr; } }

.product-layout__main h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 3rem 0 1.25rem;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 0;
}
.product-layout__main h2::before {
  content: "";
  width: 4px;
  height: 22px;
  border-radius: 2px;
  background: #004a96;
  flex-shrink: 0;
}
.product-layout__main h2:first-child {
  margin-top: 0;
}
.product-layout__main p {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: #444;
  margin: 0 0 1.25rem;
}

/* Spec Table */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
.spec-table th,
.spec-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.spec-table th {
  font-weight: 600;
  color: #1a1a1a;
  background: #f7f7f7;
  width: 40%;
}
.spec-table td {
  color: #444;
}

/* Product Apps — 复用 Applications 列表页卡片（expertise__item--card）。
   该区块位于产品详情页主栏，宽度窄于 Applications 列表页，故收成 2 列并收紧内边距。
   卡片为纵向 flex：正文区撑满剩余高度，Explore 用 margin-top:auto 固定在卡片底部，
   这样同行卡片等高、且每张卡片的 Explore 位置统一，不受标题/描述字数影响。 */
.product-app-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* 与原静态标题一致：上 3rem、下 1.25rem（与网格 1.5rem 外间距折叠，保持卡片位置不变） */
  margin: 3rem 0 1.25rem;
}
/* 标题进 flex 容器后由容器控制间距，自身不再留外边距 */
.product-app-head h2 {
  margin: 0;
}
.product-app-nav {
  display: flex;
  gap: 10px;
}
.product-app-navbtn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e3e6ea;
  background: #fff;
  color: #1a1a1a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background .2s, color .2s, border-color .2s;
}
.product-app-navbtn:hover:not(:disabled) {
  background: #004a96;
  border-color: #004a96;
  color: #fff;
}
.product-app-navbtn:disabled {
  opacity: .35;
  cursor: default;
}
.product-app-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  border-top: 0;
  padding-top: 0;
  margin: 1.5rem 0;
}
/* 应用场景超过 2 个：卡片轨道横向排列，左右切换键按「一屏（2 张）」翻页 */
.product-app-grid.is-slider {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 24px) / 2);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.product-app-grid.is-slider::-webkit-scrollbar { display: none; }
.product-app-grid .expertise__item--card {
  display: flex;
  flex-direction: column;
}
.product-app-grid .expertise__card-img {
  flex: none;
}
.product-app-grid .expertise__card-body {
  flex: 1 1 auto;
  padding: 24px;
  gap: 12px;
}
.product-app-grid .expertise__name {
  font-size: var(--fs-h3);
  line-height: 1.3;
}
.product-app-grid .expertise__link {
  margin-top: auto;
  padding-top: 12px;
}
/* 产品页卡片不展示「应用要点」列表（expertise__list），仅 Applications 列表页保留 */
@media (max-width: 700px) {
  .product-app-grid { grid-template-columns: 1fr; }
  .product-app-grid.is-slider { grid-template-columns: none; grid-auto-columns: 100%; }
}

/* Packaging — 卡片只有图片（未上传时显示占位块）；下方 1-2 段说明文字见 .product-rich-text */
.packaging-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 1.5rem 0;
}
@media (max-width: 520px) { .packaging-grid { grid-template-columns: 1fr; } }
.packaging-card {
  display: block;
  overflow: hidden;
  background: #f7f7f7;
  border-radius: 14px;
}
.packaging-card__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #ececec;
  overflow: hidden;
}
.packaging-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 未上传图片时的占位块（浅灰底 + 图片图示），保证每张卡片版式一致 */
.packaging-card__ph {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ededed;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23b9b9b9' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px 40px;
}
/* Packaging / Storage 两个区块的说明文字（1-2 段，后台富文本维护） */
.product-rich-text--packaging {
  margin: 20px 0 1.5rem;
}
.product-rich-text {
  margin: 0 0 1.5rem;
}
.product-rich-text p {
  margin: 0 0 0.85em;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: #555;
}
.product-rich-text p:last-child {
  margin-bottom: 0;
}
.product-rich-text ul,
.product-rich-text ol {
  margin: 0 0 0.85em 1.2em;
  color: #555;
  line-height: 1.7;
}

/* Product Sidebar */
.product-sidebar-card {
  background: #f7f7f7;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
}
.product-sidebar-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 600;
  margin: 0 0 1rem;
  color: #1a1a1a;
}
.product-sidebar-card__product {
  font-size: var(--fs-sm);
  color: #666;
  margin: 0 0 1rem;
}

.product-sidebar-form .form-group {
  margin-bottom: 1rem;
}
.product-sidebar-form label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 500;
  margin-bottom: 6px;
  color: #1a1a1a;
}
.product-sidebar-form input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  font-size: 0.875rem;
}
.product-sidebar-form input:focus {
  outline: none;
  border-color: #004a96;
}
.product-sidebar-form .btn {
  width: 100%;
  margin-top: 0.25rem;
}

.product-downloads {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.product-download-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #1a1a1a;
  text-decoration: none;
  transition: all 0.2s ease;
}
.product-download-btn:hover {
  border-color: #004a96;
  color: #004a96;
}

.product-range-list {
  margin: 1rem 0;
  padding-left: 1.5rem;
}
.product-range-list li {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: #444;
  margin-bottom: 0.5rem;
}

.custom-form-card,
.custom-contact-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px;
}
.custom-form-card__title,
.custom-contact-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  margin: 0 0 1.5rem;
  color: #1a1a1a;
}

.custom-contact-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.custom-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.custom-contact-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 10px;
  font-size: 1.125rem;
  flex-shrink: 0;
}
.custom-contact-label {
  font-size: var(--fs-label);
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.custom-contact-value {
  font-size: var(--fs-body);
  color: #1a1a1a;
  font-weight: 500;
}

/* Wizard Card */
.wizard-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  border: 2px dashed rgba(0,74,150,0.2);
}
.wizard-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: #1a1a1a;
}
.wizard-card__desc {
  font-size: var(--fs-body);
  color: #666;
  margin: 0 0 1.5rem;
}
.wizard-form__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) { .wizard-form__row { grid-template-columns: 1fr; } }

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 0 1rem;
  border-top: 1px solid rgba(0,0,0,0.08);
  margin-top: 2rem;
}
.pagination__info {
  font-size: var(--fs-meta);
  color: #666;
}
.pagination__links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pagination__btn,
.pagination__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  color: #1a1a1a;
  text-decoration: none;
}
.pagination__btn:hover:not(.pagination__btn--disabled),
.pagination__num:hover {
  border-color: #004a96;
  color: #004a96;
}
.pagination__num--active {
  background: #004a96;
  color: #fff;
  border-color: #004a96;
}
.pagination__btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
@media (max-width: 61em) {
  .pagination { flex-direction: column; gap: 1rem; align-items: flex-start; }
}

@media (max-width: 820px) {
  .wxp-top-bar-links { display: none; }
  .wxp-dropdown { display: none !important; }
  .floating-contact { bottom: 20px; right: 20px; }
  .floating-btn { min-width: auto; padding: 10px 12px; }
  .floating-btn__label { display: none; }
  .floating-btn { gap: 0; }
  .product-grid--all { grid-template-columns: 1fr; }
}

/* ===================== Application Pages ===================== */

/* Application Pages — 后台未录入内容的模块整块隐藏（HOW WE DEPLOY 步骤 / FIELD RESULTS 案例 / FAQ）：
   模块内容为空时不再只留一个标题；老浏览器不支持 :has() 时优雅降级为显示空模块。 */
.section:has(.stats__grid:empty),
.section:has(.case-grid:empty),
.faq:has(.faq__list:empty) {
  display: none;
}

/* Application Challenge Section */
.app-challenge {
  background: #f7f7f7;
}
.app-challenge__inner {
  max-width: 820px;
}
.app-challenge__kicker {
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: #004a96;
  margin-bottom: 16px;
}
.app-challenge__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin-bottom: 24px;
  color: #1a1a1a;
}
.app-challenge__text {
  font-size: var(--fs-lead);
  line-height: 1.75;
  color: #444;
}
/* 这个区块是后台富文本原样输出（当前是一条 h3 + 一条 p），主题只 reset 了 margin，
   没给裸标题定标，于是 h3 掉到浏览器默认 1.17em（18.72px），跟标度对不上；
   这里按标度补齐，顺带把被 reset 抹掉的段距补回来。 */
.app-challenge__inner h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.2;
  margin-bottom: 16px;
}
.app-challenge__inner h3,
.app-challenge__inner h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.3;
  margin-bottom: 12px;
}
.app-challenge__inner p {
  font-size: var(--fs-lead);
  line-height: 1.75;
  color: #444;
}
.app-challenge__inner p + p,
.app-challenge__inner ul {
  margin-top: 12px;
}
.app-challenge__inner li {
  font-size: var(--fs-lead);
  line-height: 1.75;
}

/* Recommended Chemistry Combo */
.app-combo__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) { .app-combo__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .app-combo__grid { grid-template-columns: 1fr; } }

.app-combo__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 16px;
  padding: 28px 24px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.app-combo__card:hover {
  border-color: #004a96;
  box-shadow: 0 12px 40px rgba(0,74,150,0.1);
  transform: translateY(-4px);
}
.app-combo__num {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,74,150,0.08);
  color: #004a96;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 700;
  margin-bottom: 16px;
}
.app-combo__name {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 600;
  margin-bottom: 8px;
  color: #1a1a1a;
}
.app-combo__role {
  font-size: var(--fs-label);
  line-height: 1.5;
  color: #666;
  margin-bottom: 16px;
  flex: 1;
}
.app-combo__link {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #004a96;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}
.app-combo__card:hover .app-combo__link { gap: 10px; }

/* Section Kicker / Title (reusable) */
.app-section-head {
  margin-bottom: 48px;
}
/* 标题区整体水平居中（About 页 Our Factory）；描述自带 max-width，需要左右 auto 才居中 */
.app-section-head--center {
  text-align: center;
}
.app-section-head--center .properties__desc {
  margin-left: auto;
  margin-right: auto;
}
.app-section-kicker {
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: #004a96;
  margin-bottom: 16px;
}
.app-section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: #1a1a1a;
}

/* Field Result Entry */
.app-result {
  background: #f7f7f7;
}
.app-result__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 16px;
  padding: 32px 36px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.app-result__card:hover {
  border-color: #004a96;
  box-shadow: 0 12px 40px rgba(0,74,150,0.1);
  transform: translateY(-2px);
}
.app-result__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(0,74,150,0.08);
  color: #004a96;
  flex-shrink: 0;
}
.app-result__body {
  flex: 1;
}
.app-result__label {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: #004a96;
  margin-bottom: 8px;
}
.app-result__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: #1a1a1a;
}
.app-result__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s;
}
.app-result__card:hover .app-result__arrow { background: #004a96; }
.app-result__arrow svg { width: 18px; height: 18px; stroke: #fff; }
@media (max-width: 768px) {
  .app-result__card { flex-direction: column; align-items: flex-start; }
  .app-result__arrow { align-self: flex-end; }
}

/* Case Study Grid */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1199px) { .case-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 809px) { .case-grid { grid-template-columns: 1fr; } }

.case-card {
  display: block;
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.case-card:hover {
  border-color: #004a96;
  box-shadow: 0 12px 40px rgba(0,74,150,0.1);
  transform: translateY(-4px);
}
.case-card__media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #ededed;
}
.case-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-smooth);
}
.case-card:hover .case-card__media img { transform: scale(1.05); }
.case-card__body {
  padding: 24px;
}
.case-card__kicker {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: #004a96;
  margin-bottom: 8px;
}
.case-card__kicker:empty {
  display: none;
}

.case-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
  margin-bottom: 8px;
}
.case-card__desc {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text-2);
}

/* Case detail：图文编排（概述 → 编号区块 → 指标卡 / 时间线步骤 / 结果图） */
.case-body {
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: 1040px;
  margin: 0 auto;
}
.case-intro {
  font-size: var(--fs-lead-lg);
  line-height: 1.7;
  color: var(--color-text-2);
}
.case-intro p:last-child {
  margin-bottom: 0;
}

.case-block {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.case-block__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-light);
}
.case-block__no {
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #004a96;
}
.case-block__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0;
}
.case-block__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Challenge：正文 + 缩略图分栏；无图时正文占满 */
.case-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 40px;
  align-items: start;
}
.case-split--solo {
  grid-template-columns: minmax(0, 1fr);
}
.case-figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-light);
}
.case-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 768px) {
  .case-split { grid-template-columns: 1fr; gap: 24px; }
}

.case-prose p {
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--color-text-2);
  margin-bottom: 16px;
}
.case-prose p:last-child {
  margin-bottom: 0;
}
.case-prose ul,
.case-prose ol {
  margin: 0 0 16px 24px;
}
.case-prose li {
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--color-text-2);
  margin-bottom: 8px;
}
.case-body blockquote {
  border-left: 3px solid #004a96;
  padding: 24px 32px;
  margin: 32px 0 0;
  font-style: italic;
  font-size: var(--fs-lead-lg);
  line-height: 1.5;
  color: #1a1a1a;
  background: #f7f7f7;
  border-radius: 0 16px 16px 0;
}
.case-body blockquote cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-size: var(--fs-meta);
  color: var(--color-text-2);
}

/* Solution 步骤：后台「解决方案步骤」可视化行编辑器维护的 [{title,desc}]，行顺序即前台步骤顺序 */
.case-steps {
  list-style: none;
  counter-reset: cs-step;
  margin: 0;
  padding: 0;
}
.case-steps .case-step {
  position: relative;
  padding: 0 0 32px 60px;
  margin: 0;
  counter-increment: cs-step;
}
.case-steps .case-step:last-child {
  padding-bottom: 0;
}
/* 圆形序号 + 竖向连接线 */
.case-steps .case-step::before {
  content: counter(cs-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #d8e3f0;
  border-radius: 50%;
  background: #f4f8fd;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1;
  color: #004a96;
}
.case-steps .case-step::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 40px;
  bottom: 4px;
  width: 1px;
  background: var(--color-light);
}
.case-steps .case-step:last-child::after {
  display: none;
}
.case-steps .case-step__title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: 1.3;
  color: #1a1a1a;
  margin: 0 0 8px;
  padding-top: 4px;
}
.case-steps .case-step p {
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--color-text-2);
  margin-bottom: 8px;
}
.case-steps .case-step p:last-child {
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .case-steps .case-step { padding-left: 48px; }
}

/* Results 指标卡：后台「结果指标卡」维护的 [{value,label,note}] */
.case-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.case-metric {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f7f7f7;
  border-radius: 16px;
  padding: 26px 28px;
}
.case-metric__label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #004a96;
  margin: 0;
}
.case-metric__value {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  margin: 0;
}
.case-metric__note {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text-2);
  margin: 0;
}
@media (max-width: 900px) {
  .case-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 奇数张时末张铺满一行，避免半行空位 */
  .case-metric:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (max-width: 560px) {
  .case-metrics { grid-template-columns: 1fr; }
  .case-metric:last-child:nth-child(odd) { grid-column: auto; }
}

/* Gallery */
.case-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0;
}
@media (max-width: 768px) {
  .case-gallery { grid-template-columns: 1fr; }
}
.case-gallery__item {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 16px;
  overflow: hidden;
  background: #ededed;
}
.case-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-smooth);
}
.case-gallery__item:hover img { transform: scale(1.03); }

/* Products */
.case-products {
  background: #f7f7f7;
  border-radius: 16px;
  padding: 36px;
}
.case-products h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  margin-bottom: 20px;
}
.case-products__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.case-products__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 50px;
  padding: 12px 24px;
  font-size: var(--fs-label);
  color: #1a1a1a;
  text-decoration: none;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s;
}
.case-products__tag:hover {
  border-color: #004a96;
  box-shadow: 0 6px 20px rgba(0,74,150,0.12);
  transform: translateY(-2px);
}
.case-products__tag svg {
  width: 16px;
  height: 16px;
  stroke: #004a96;
}

/* CTA */
.case-cta {
  background: #004a96;
  color: #fff;
  border-radius: 20px;
  padding: 48px 40px;
  text-align: center;
  margin-top: 16px;
}
.case-cta h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  margin-bottom: 16px;
}
.case-cta p {
  font-size: var(--fs-lead);
  opacity: 0.9;
  margin-bottom: 28px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.case-cta .btn {
  background: #fff;
  color: #004a96;
}
.case-cta .btn:hover {
  background: #ededed;
}

/* Pagination (listing page) */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--color-light);
}
.pagination__info {
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  color: var(--color-text-2);
}
.pagination__links {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pagination__btn,
.pagination__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  background: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #1a1a1a;
  text-decoration: none;
  transition: all 0.3s;
}
/* Previous / Next 为文字按钮 → 自适应宽度胶囊,避免被圆形裁切 */
.pagination__btn {
  min-width: 44px;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  white-space: nowrap;
  gap: 6px;
}
.pagination__num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.pagination__btn:hover,
.pagination__num:hover {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}
.pagination__btn--disabled {
  opacity: 0.4;
  pointer-events: none;
}
.pagination__num--active {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}

/* CTA Banner */
.app-cta-banner {
  background: #004a96;
}
.app-cta-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.app-cta-banner__text {
  font-family: var(--font-display);
  font-size: var(--fs-lead-lg);
  font-weight: 500;
  color: #fff;
  line-height: 1.4;
  flex: 1;
  min-width: 280px;
}
.app-cta-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #004a96;
  padding: 16px 32px;
  border-radius: 50px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s, transform 0.3s;
}
.app-cta-banner__btn:hover {
  background: #f0f0f0;
  transform: translateY(-2px);
}

/* ===================== RESOURCE PAGES ===================== */
.section--gray { background: #f7f7f7; }

/* Resource Hub intro */
.res-intro {
  font-family: var(--font-display);
  font-size: var(--fs-lead-lg);
  line-height: 1.6;
  color: var(--color-text-2);
  max-width: 900px;
  margin: 0 auto 56px;
  text-align: center;
}

/* Resource category cards */
.res-grid {
  display: grid;
  /* auto-fit：卡片数量变化时自动铺满，不残留空列（原为固定 4 列，移除 FAQ 卡片后会出现空缺） */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
@media (max-width: 1024px) { .res-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .res-grid { grid-template-columns: 1fr; } }

.res-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 16px;
  padding: 30px 28px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.res-card:hover {
  border-color: #004a96;
  box-shadow: 0 12px 40px rgba(0,74,150,0.1);
  transform: translateY(-3px);
}
.res-card__icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(0,74,150,0.08);
  color: #004a96;
  margin-bottom: 8px;
}
.res-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: -0.01em;
}
.res-card__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-2);
  line-height: 1.6;
  flex: 1;
}
.res-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #004a96;
  margin-top: 6px;
}
.res-card__link svg { transition: transform 0.3s; }
.res-card:hover .res-card__link svg { transform: translateX(3px); }

/* Article (detail) page */
.article-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.article-meta__item {
  font-size: var(--fs-meta);
  color: var(--color-text-2);
}
.article-content {
  font-size: var(--fs-lead);
  line-height: 1.8;
  color: #333;
}
.article-content p { margin-bottom: 1.4em; }
.article-content h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: #1a1a1a;
  margin: 1.8em 0 0.6em;
  letter-spacing: -0.01em;
}
.article-content h3 {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 600;
  color: #1a1a1a;
  margin: 1.5em 0 0.5em;
}
.article-content ul,
.article-content ol {
  margin: 0 0 1.4em;
  padding-left: 1.25em;
}
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li { margin-bottom: 0.5em; }
.article-content blockquote {
  border-left: 3px solid #004a96;
  padding: 8px 0 8px 24px;
  margin: 1.6em 0;
  font-family: var(--font-display);
  font-size: var(--fs-lead-lg);
  line-height: 1.5;
  color: #1a1a1a;
  font-style: italic;
}
.article-content blockquote cite {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-meta);
  font-style: normal;
  color: var(--color-text-2);
}
.article-content a:not(.btn) {
  color: #004a96;
  text-decoration: underline;
}
/* 后台编辑器会给图片写死内联 height，宽度被 max-width 收窄后高度不跟随，
   图片会被纵向拉长；这里强制按比例缩放（需 !important 才能压过内联样式）。 */
.article-content img { height: auto !important; }

/* Article byline (blog / news author bar) */
.article-byline {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  margin-bottom: 28px;
  border-top: 1px solid var(--color-light);
  border-bottom: 1px solid var(--color-light);
}
.article-byline__avatar {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,74,150,0.1);
  color: #004a96;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.article-byline__meta { min-width: 0; }
.article-byline__name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 6px;
}
.article-byline__tags {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.article-byline__tags .news-tag { margin: 0; }
.article-byline__tags .article-meta__item { margin: 0; }

/* Article inline CTA row */
.article-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--color-light);
}
.article-cta .btn { margin: 0; }

/* Article / news two-column layout */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px;
  align-items: start;
}
.article-main { min-width: 0; }
.article-main .article-content { max-width: 46em; }
.article-main .article-byline { margin-bottom: 28px; }
.article-aside {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.article-aside .doc-card { position: static; }
.article-aside .btn { justify-content: center; }
.article-back { margin-top: 4px; }
@media (max-width: 1024px) {
  .article-layout { grid-template-columns: 1fr; gap: 40px; }
  .article-aside { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 640px) { .article-aside { grid-template-columns: 1fr; } }

/* Document (detail) page */
.doc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px;
  align-items: start;
}
.doc-aside {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 1024px) {
  .doc-layout { grid-template-columns: 1fr; gap: 40px; }
  .doc-aside { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) { .doc-aside { grid-template-columns: 1fr; } }

/* Key facts strip */
.doc-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 32px 0;
  margin-bottom: 56px;
  border-top: 1px solid var(--color-light);
  border-bottom: 1px solid var(--color-light);
}
@media (max-width: 1024px) { .doc-facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .doc-facts { grid-template-columns: 1fr; } }
.doc-facts__item {
  background: #f7f7f7;
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}
.doc-facts__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.06);
}
.doc-facts__value {
  font-family: var(--font-display);
  font-size: var(--fs-stat-sm);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: #004a96;
  margin-bottom: 6px;
}
.doc-facts__label {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text-2);
}

.doc-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.doc-main p {
  font-size: var(--fs-lead);
  line-height: 1.8;
  color: #333;
  margin-bottom: 1.2em;
}
.doc-subtitle {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: #1a1a1a;
  margin: 2em 0 0.8em;
  padding-top: 1.2em;
  border-top: 1px solid var(--color-light);
}
.doc-main .spec-table { margin-bottom: 1.5em; }
.doc-main .spec-table td { width: 60%; }
.doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--color-light);
}
.doc-main .btn { margin: 0; }

.doc-list {
  margin-bottom: 1.5em;
  padding-left: 0;
}
.doc-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 0.6em;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: #333;
}
.doc-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.7em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #004a96;
}
.doc-card {
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 16px;
  padding: 28px;
}
.doc-card--help {
  background: #f7f7f7;
  border-color: transparent;
}
.doc-card__label {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-2);
  margin: 14px 0 4px;
}
.doc-card__label:first-child { margin-top: 0; }
.doc-card__value {
  font-size: var(--fs-body);
  font-weight: 500;
  color: #1a1a1a;
}
.doc-card__title-sm {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}
.doc-card__help-text {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--color-text-2);
  margin-bottom: 16px;
}
.doc-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #004a96;
}
.doc-card__link svg { transition: transform 0.3s; }
.doc-card__link:hover svg { transform: translateX(3px); }

/* ===================== DOWNLOADS PAGE ===================== */
.downloads-intro {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--color-text-2);
}
.downloads-intro a {
  color: #004a96;
  text-decoration: underline;
}
.downloads-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) { .downloads-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .downloads-grid { grid-template-columns: 1fr; } }

.download-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 16px;
  padding: 28px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.download-card:hover {
  border-color: #004a96;
  box-shadow: 0 12px 40px rgba(0,74,150,0.1);
  transform: translateY(-3px);
}
.download-card__badge {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #004a96;
  background: rgba(0,74,150,0.08);
  border: 1px solid rgba(0,74,150,0.18);
  padding: 5px 12px;
  border-radius: 20px;
}
.download-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.download-card__desc {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text-2);
  flex: 1;
}
.download-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding-top: 4px;
  border-top: 1px dashed #e4e4e4;
}
.download-card__meta span {
  font-size: var(--fs-meta);
  color: #999;
}
.download-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
  background: #004a96;
  border-radius: 50px;
  padding: 12px 24px;
  margin-top: 8px;
  transition: background 0.3s, transform 0.3s;
}
.download-card__btn svg { transition: transform 0.3s; }
.download-card:hover .download-card__btn {
  background: #003a78;
  transform: translateY(-1px);
}
.download-card:hover .download-card__btn svg { transform: translateY(2px); }

/* ===================== ABOUT US PAGE ===================== */

/* About lead paragraph */
.about-lead {
  max-width: 820px;
  font-family: var(--font-display);
  font-size: var(--fs-lead-lg);
  line-height: 1.7;
  color: var(--color-text-2);
  margin: -24px 0 40px;
}

/* Company story intro — media + text two columns */
.about-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 60px;
  align-items: center;
  margin-bottom: 64px;
}
@media (max-width: 1024px) {
  .about-story { grid-template-columns: 1fr; gap: 40px; }
}
.about-story__media {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}
.about-story__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}
.about-story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 5 / 4;
  display: block;
  transition: transform 0.6s ease;
}
.about-story__media:hover img { transform: scale(1.04); }
.about-story__badge {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 2;
  background: #fff;
  border-radius: 14px;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.16);
}
.about-story__badge strong {
  font-family: var(--font-display);
  font-size: var(--fs-stat-sm);
  font-weight: 700;
  color: #004a96;
  letter-spacing: -0.01em;
}
.about-story__badge span {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  color: var(--color-text-2);
}
.about-story__text p {
  font-size: var(--fs-lead);
  line-height: 1.85;
  color: #444;
  margin-bottom: 1.1em;
}
.about-story__text p:last-child { margin-bottom: 0; }
.about-story__points {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.about-story__points li {
  position: relative;
  padding-left: 26px;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: #333;
}
.about-story__points li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.42em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #004a96;
}
.about-story__points li strong { font-weight: 600; color: #1a1a1a; }

/* About 页的四个特点（.stats__grid.about-stats）：整块只有一个底色容器，条目不再各自画卡片。
   2026-10-23 从「四张灰卡 + 大数字」改成「一个灰面板 + 大图标 + 小标题 + 描述」，
   数值不再输出（见 ParserController::parserStats 的 design 分支）。 */
.about-stats {
  margin-bottom: 0;
  background: var(--color-bg-light);
  border-radius: 20px;
  padding: 40px;
  gap: 40px;
}
.about-stats .stats__item {
  background: none;
  border-radius: 0;
  padding: 0;
  gap: 12px;
}
.about-stats .stats__icon {
  font-size: var(--fs-stat);
  line-height: 1;
  color: #004a96;
}
/* 条目小标题在后台是按 Title Case 录入的（如 Years of Industry Experience），
   通用 .stats__label 的 uppercase + 2.4px 字距把它全变成大写；这里恢复原样，
   并比下方 14px 描述大一档（16px），否则去掉大写后会比描述还小、不像标题。 */
.about-stats .stats__label {
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.35;
}
.about-stats .stats__desc { max-width: none; }
@media (max-width: 809px) {
  .about-stats { padding: 24px; gap: 24px; }
}

/* Certification image cards */
.about-cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) { .about-cert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .about-cert-grid { grid-template-columns: 1fr; } }

.about-cert-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.about-cert-card:hover {
  border-color: #004a96;
  box-shadow: 0 12px 40px rgba(0,74,150,0.1);
  transform: translateY(-3px);
}
.about-cert-card > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: #fdf6e3;
}
.about-cert-card__body {
  padding: 20px 22px 24px;
}
.about-cert-card__body h3 {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 6px;
}
.about-cert-card__body p {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--color-text-2);
  margin: 0;
}
/* 证书可核验要素（编号 / 发证机构 / 发证日期 / 有效期 / 认证范围）
   后台补录后自动出现；未填写时该 <dl> 不会输出 */
.about-cert-card__meta {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 4px;
}
.about-cert-card__meta > div {
  display: flex;
  gap: 8px;
  font-size: var(--fs-meta);
  line-height: 1.45;
}
.about-cert-card__meta dt {
  flex: none;
  min-width: 74px;
  color: var(--color-text-3);
}
.about-cert-card__meta dd {
  margin: 0;
  color: var(--color-text-2);
  word-break: break-word;
}

/* ---------- 专家团队（关于我们页，E-E-A-T 的 Expertise 维度） ---------- */
/* 数据源：后台「关于我们 → 高级选项 → 专家团队」；无数据时整段不输出 */
.expert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
@media (max-width: 560px) { .expert-grid { grid-template-columns: 1fr; } }
.expert-card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  padding: 26px 24px;
}
.expert-card__photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 14px;
  background: #f2f4f5;
}
.expert-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.expert-card__photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.02em;
}
.expert-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 4px;
}
.expert-card__role { font-size: var(--fs-label); color: var(--color-accent); margin-bottom: 10px; }
.expert-card__bio { font-size: var(--fs-sm); line-height: 1.6; color: var(--color-text-2); margin: 0 0 12px; }
.expert-card__link { font-size: var(--fs-sm); color: var(--color-text-2); text-decoration: none; }
.expert-card__link:hover { color: var(--color-accent); }

/* ---------- 文章署名职务 + 文末作者简介卡 ---------- */
.article-byline__role { font-size: var(--fs-label); color: var(--color-text-3); margin-top: 2px; }
.article-byline__role:empty { display: none; }   /* 未录入职务时不占位 */
.author-card {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  padding: 22px 24px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: #fafafa;
}
.author-card__avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-accent);
}
.author-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-card__name { font-family: var(--font-display); font-size: var(--fs-title); font-weight: 600; color: #1a1a1a; }
.author-card__role { font-size: var(--fs-label); color: var(--color-accent); margin-bottom: 6px; }
.author-card__bio { font-size: var(--fs-sm); line-height: 1.6; color: var(--color-text-2); margin: 0 0 10px; }
.author-card__links { display: flex; gap: 16px; font-size: var(--fs-sm); }
.author-card__links a { color: var(--color-text-2); text-decoration: none; }
.author-card__links a:hover { color: var(--color-accent); }
@media (max-width: 560px) { .author-card { flex-direction: column; gap: 12px; } }

/* Milestone timeline grid */
.about-timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) { .about-timeline { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .about-timeline { grid-template-columns: 1fr; } }

.about-timeline__item {
  position: relative;
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 16px;
  padding: 28px;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.about-timeline__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #004a96, #0073e6);
}
.about-timeline__item:hover {
  border-color: #004a96;
  box-shadow: 0 12px 36px rgba(0,74,150,0.08);
  transform: translateY(-3px);
}
.about-timeline__year {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #004a96;
  line-height: 1;
  margin-bottom: 14px;
}
.about-timeline__text {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text-2);
  margin: 0;
}

/* Factory gallery */
.about-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) { .about-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .about-gallery { grid-template-columns: 1fr; } }
/* 3 列下末尾落单的那张（总数 3n+1）挪到中列，与上方居中的标题区对齐，而不是孤零零贴在左边 */
@media (min-width: 1025px) { .about-gallery__item:last-child:nth-child(3n + 1) { grid-column: 2; } }

.about-gallery__item {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.about-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.about-gallery__item:hover img { transform: scale(1.05); }

/* About 页「Manufacturing & Quality Control」：参考图为左文案 / 右主图两列，窄屏堆叠。
   字号一律取标度变量：大标题复用 .app-section-title(--fs-h2)、描述 --fs-lead、措施 --fs-title、附加说明 --fs-body。 */
.qc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.qc-text .app-section-title { margin: 0 0 20px; }
.qc-desc { color: var(--color-text-2); }
.qc-desc p { font-size: var(--fs-lead); line-height: 1.65; margin: 0 0 14px; }
.qc-desc ul, .qc-desc ol { font-size: var(--fs-lead); line-height: 1.65; margin: 0 0 14px; padding-left: 22px; }
.qc-desc p:last-child, .qc-desc ul:last-child, .qc-desc ol:last-child { margin-bottom: 0; }
.qc-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.qc-list li {
  position: relative;
  padding-left: 30px;
  font-size: var(--fs-title);
  line-height: 1.5;
  color: var(--color-black);
}
.qc-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: #004a96;
  font-weight: 700;
}
.qc-note {
  margin: 40px 0 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text-2);
}
.qc-media {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}
.qc-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1024px) {
  .qc-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* About — Our Service Commitment（{sort:ext_sc}）
   与上面 .qc-* 同一套两栏几何：两个区块版式相同，只差列表与按钮，
   所以必须靠底色/换序区分，不能照抄一份不同标度的样式。 */
.sc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.sc-text .app-section-title { margin: 0 0 20px; }
.sc-desc { color: var(--color-text-2); }
.sc-desc p { font-size: var(--fs-lead); line-height: 1.65; margin: 0 0 14px; }
.sc-desc ul, .sc-desc ol { font-size: var(--fs-lead); line-height: 1.65; margin: 0 0 14px; padding-left: 22px; }
.sc-desc p:last-child, .sc-desc ul:last-child, .sc-desc ol:last-child { margin-bottom: 0; }
.sc-list {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sc-list li {
  position: relative;
  padding-left: 30px;
  font-size: var(--fs-title);
  line-height: 1.5;
  color: var(--color-black);
}
.sc-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: #004a96;
  font-weight: 700;
}
.sc-cta { margin-top: 44px; }
.sc-media {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}
.sc-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 品质管控与服务承诺同为白底、版式同形，相邻时 100+100 会铺出 200px 白带（已报过四次的那类）。
   这里把后一块的上内边距收成一段；两块若换序或挪走，这条选择器必须一起重指。 */
.qc-section + .sc-section { padding-top: 0; }
@media (max-width: 1024px) {
  .sc-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}