/* main.css —— 全局样式（布局/导航/页脚/组件/动效）
   依据 design-spec.md v1.1；所有取值引用 tokens.css 变量，不出现硬编码色值 */

/* ---------- 字体（本地 woff2，font-display: swap，不阻塞渲染） ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/noto-tc-400.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/noto-tc-500.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/noto-tc-700.woff2") format("woff2");
}

/* ---------- Reset 与基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* display:flex 等布局类不得覆盖 hidden 语义（抽屉/成功卡/横幅依赖） */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--c-link); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 { color: var(--c-heading); font-weight: 700; overflow-wrap: break-word; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: 0.02em; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: 0.01em; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 500; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 500; }

/* 无障碍：焦点态（全站统一） */
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* 跳转链接 */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -48px;
  z-index: 200;
  background: var(--c-primary);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-m);
  transition: top var(--dur-quick) var(--ease-standard);
}
.skip-link:focus { top: var(--space-2); text-decoration: none; }

/* i18n 字典加载期间防闪烁（i18n.js 就绪后移除 i18n-pending） */
html.i18n-pending body { visibility: hidden; }

/* ---------- 布局容器与区块 ---------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.section { padding-block: var(--space-9); }
/* §12.4-9 区块边界收边 */
.section--alt { background: var(--c-bg-alt); border-block: 1px solid var(--c-hairline); }
/* 相邻两个 alt 区块只保留一条线，避免 2px 双线 */
.section--alt + .section--alt { border-top: 0; }
/* §12.4-7 选材咨询区块底纹：48px 网格（同 Hero 参数，透明度减半） */
.section--ticked { position: relative; }
.section--ticked::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(27,75,122,.04) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(27,75,122,.04) 0 1px, transparent 1px 48px);
  opacity: .6;
  pointer-events: none;
}
.section--ticked > .container { position: relative; z-index: 1; }
.section-head { margin-bottom: 40px; max-width: 760px; }
.section-head p { color: var(--c-ink-secondary); margin-top: var(--space-3); }

/* 区块标题：§12.4-1 两位序号（计数器）+ §12.4-2 双段标尺
   实现取舍：计数器挂在 .section-title 上而非 .section —— 保证「有标题才有号、号必连续」，
   避免 products 页 .split 区块、CTA 区块这类无 .section-title 的 section 造成跳号。 */
body { counter-reset: sec; }
.section-title { position: relative; padding-left: 0; counter-increment: sec; }
.section-title::before {
  content: counter(sec, decimal-leading-zero);
  font-family: "Inter", var(--font-sans);
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--c-primary);
  margin-right: 12px;
  vertical-align: 2px;
  font-variant-numeric: tabular-nums;
}
.section-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--c-primary) 0 34px, transparent 34px 40px, var(--c-accent) 40px);
  margin-top: var(--space-4);
}

/* 页头带（内页 H1）+ §12.4-5 英文页名 ghost 字 */
.page-head {
  position: relative;
  overflow: hidden;
  background: var(--c-bg-alt);
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--c-border);
}
.page-ghost {
  position: absolute;
  right: 24px;
  bottom: 16px;
  font-family: "Inter", var(--font-sans);
  font-size: 56px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-primary);
  opacity: .06;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-m);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  border: 1.5px solid transparent;
  transition: background-color var(--dur-quick) var(--ease-standard),
              color var(--dur-quick) var(--ease-standard),
              transform var(--dur-quick) var(--ease-standard),
              box-shadow var(--dur-quick) var(--ease-standard);
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn--primary:active { background: var(--c-primary-darker); transform: translateY(0); }
.btn--secondary { background: transparent; border-color: var(--c-primary); color: var(--c-primary); }
.btn--secondary:hover { background: rgba(27, 75, 122, .06); }
.btn--secondary:active { background: rgba(27, 75, 122, .1); }
.btn--white { background: #fff; color: var(--c-primary-dark); }
.btn--white:hover { background: var(--c-bg-alt); transform: translateY(-1px); }
.btn:disabled { background: #A8BCCB; border-color: #A8BCCB; color: #fff; cursor: not-allowed; transform: none; box-shadow: none; }
.btn--nav { min-height: 40px; padding: 0 var(--space-4); }

/* 文字按钮（尾部箭头） */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--c-link);
  font-size: 15px;
  font-weight: 500;
  min-height: 44px;
}
.link-arrow .arrow { transition: transform var(--dur-hover) var(--ease-standard); }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover .arrow { transform: translateX(4px); }

/* spinner（提交中） */
.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 导航栏 ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border-strong);
}
.site-nav .container {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; }
.brand img { height: 32px; width: auto; }
.brand-name { display: flex; flex-direction: column; line-height: 1.25; }
.brand-name .zh { color: var(--c-heading); font-size: 16px; font-weight: 700; }
.brand-name .en { color: var(--c-muted); font-size: 13px; font-weight: 500; }
/* 菜单保持在原位（紧跟品牌），仅语言切换+CTA 靠右：auto margin 加在 .lang-switch 上 */
.site-nav .lang-switch { margin-left: auto; }
.nav-links { display: flex; align-items: center; gap: var(--space-5); }
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-ink);
  font-size: 15px;
  font-weight: 500;
}
.nav-links a:hover { color: var(--c-primary); text-decoration: none; }
.nav-links a[aria-current="page"] {
  color: var(--c-primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: var(--c-primary);
}

/* 语言切换器（分段控件） */
.lang-switch {
  display: inline-flex;
  align-items: center;
  background: var(--c-bg-alt);
  border-radius: 999px;
  padding: 2px;
  height: 36px;
}
.lang-switch button {
  border: 0;
  background: transparent;
  color: var(--c-muted);
  font-size: 13px;
  font-weight: 500;
  height: 32px;
  padding: 0 var(--space-4);
  border-radius: 999px;
  transition: color var(--dur-quick) var(--ease-standard), background-color var(--dur-quick) var(--ease-standard);
}
.lang-switch button[aria-pressed="true"] {
  background: #fff;
  color: var(--c-primary);
  box-shadow: var(--shadow-1);
}
.lang-switch button:hover { color: var(--c-primary); }
/* §11-4 触控目标：外观保持 32px，用透明伪元素把命中区补到 44px（深底版 28px 同理） */
.lang-switch button { position: relative; }
.lang-switch button::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* 汉堡按钮（<1024 显示） */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-m);
  margin-left: auto;
  align-items: center;
  justify-content: center;
  color: var(--c-ink);
}
.nav-toggle:hover { background: var(--c-bg-alt); }

/* 抽屉 */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(18, 41, 62, .4);
  z-index: 110;
  opacity: 0;
  transition: opacity 200ms var(--ease-standard);
}
.drawer-backdrop.is-open { opacity: 1; }
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 84vw);
  background: #fff;
  box-shadow: var(--shadow-2);
  z-index: 120;
  transform: translateX(100%);
  transition: transform 240ms var(--ease-standard);
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-5);
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer-links { display: flex; flex-direction: column; }
.drawer-links a {
  display: flex;
  align-items: center;
  min-height: 56px;
  font-size: 18px;
  font-weight: 500;
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-border);
}
.drawer-links a:hover { color: var(--c-primary); text-decoration: none; }
.drawer-links a[aria-current="page"] { color: var(--c-primary); }
.drawer-foot { margin-top: auto; padding-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.drawer-foot .btn { width: 100%; }
.drawer-close {
  align-self: flex-end;
  width: 44px; height: 44px;
  border: 0; background: transparent;
  border-radius: var(--radius-m);
  color: var(--c-ink);
  display: flex; align-items: center; justify-content: center;
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-2) 0;
}
.drawer-close:hover { background: var(--c-bg-alt); }

/* ---------- Hero（首页）§12.1 ---------- */
.hero {
  position: relative;
  min-height: 640px;
  max-height: 760px;
  height: calc(100vh - var(--nav-h));
  overflow: hidden;
  /* §12.1.4 加 strip 后必须纵向 flex，居中交给 .hero-inner */
  display: flex;
  flex-direction: column;
  background: var(--grad-hero);
}
.hero-media {
  position: absolute; inset: 0;
  z-index: 0;
  will-change: transform;
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 60% 45%;
  filter: grayscale(.85) brightness(1.12) contrast(.92) saturate(.6);
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(243,247,250,.97) 0%, rgba(243,247,250,.88) 40%, rgba(243,247,250,.42) 100%);
}
.hero-grid {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(27,75,122,.05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(27,75,122,.05) 0 1px, transparent 1px 48px);
  opacity: .35;
}
.hero-glow {
  position: absolute;
  top: -20%; right: -10%;
  width: 60%; height: 80%;
  background: radial-gradient(closest-side, rgba(86,183,230,.28), transparent 70%);
  animation: hero-glow 8s var(--ease-standard) infinite alternate;
  pointer-events: none;
}
@keyframes hero-glow {
  from { transform: translateX(-2%); opacity: .5; }
  to { transform: translateX(2%); opacity: .7; }
}

/* §12.1.3-A 四角 crosshair 定位角标（工程图配准标记） */
.hero-frame {
  position: absolute;
  inset: 16px 24px calc(var(--hero-strip-h) + 16px);
  pointer-events: none;
  z-index: 1;
  --ch: rgba(27,75,122,.28);
  background:
    linear-gradient(var(--ch), var(--ch)) left  top    / 20px 1px no-repeat,
    linear-gradient(var(--ch), var(--ch)) left  top    / 1px 20px no-repeat,
    linear-gradient(var(--ch), var(--ch)) right top    / 20px 1px no-repeat,
    linear-gradient(var(--ch), var(--ch)) right top    / 1px 20px no-repeat,
    linear-gradient(var(--ch), var(--ch)) left  bottom / 20px 1px no-repeat,
    linear-gradient(var(--ch), var(--ch)) left  bottom / 1px 20px no-repeat,
    linear-gradient(var(--ch), var(--ch)) right bottom / 20px 1px no-repeat,
    linear-gradient(var(--ch), var(--ch)) right bottom / 1px 20px no-repeat;
}
/* §12.1.3-B 底部细刻度尺（焊在 strip 上沿） */
.hero-rule {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--hero-strip-h);
  height: 6px;
  background: repeating-linear-gradient(90deg, rgba(27,75,122,.22) 0 1px, transparent 1px 8px);
  opacity: .7;
  pointer-events: none;
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: var(--space-7);
  width: 100%;
}
/* 容器撑满 flex 行；文案块在其内左置（§8.1「Hero 文字左置」），620px 上限只收窄行宽 */
.hero-inner > .container { width: 100%; }
/* §12.1.1 三级字阶落差 */
.hero-copy { max-width: min(56%, 620px); }
.hero-copy .hero-kicker {
  color: var(--c-primary);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .08em;
  margin-bottom: var(--space-4);
}
.hero-copy h1 {
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: .01em;
  margin-bottom: 20px;
}
.hero-copy .hero-sub {
  font-size: var(--fs-hero-sub);
  line-height: var(--lh-hero-sub);
  font-weight: 500;
  color: var(--c-heading);
}
.hero-copy .hero-lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink-secondary);
  margin-top: 12px;
  max-width: 34em;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }

/* §12.1.2 .hero-trust → 3 组数据点（旧的 • 列表规则已删） */
.hero-trust {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 0;
  margin-top: var(--space-7);
  padding-top: 0;
  border-top: 0;
  color: inherit;
  font-size: inherit;
}
.hero-trust .trust-item {
  padding-inline: 28px;
  border-left: 1px solid var(--c-hairline-strong);
}
.hero-trust .trust-item:first-child { padding-left: 0; border-left: 0; }
.hero-trust .trust-item:last-child { padding-right: 0; }
.trust-value {
  font-family: "Inter", var(--font-sans);
  font-size: 22px; line-height: 28px;
  font-weight: 600; letter-spacing: -.01em;
  color: var(--c-heading);
  font-variant-numeric: tabular-nums;
}
.trust-label {
  margin-top: 4px;
  font-size: 12px; line-height: 18px;
  font-weight: 500; letter-spacing: .04em;
  color: var(--c-muted);
}

/* §12.1.4 底部规格 strip */
.hero-strip {
  position: relative;
  z-index: 1;
  flex: none;
  height: var(--hero-strip-h);
  display: flex;
  align-items: center;
  border-top: 1px solid var(--c-hairline);
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  overflow: hidden;
}
.hero-strip .strip-track {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-inline: 24px;
  white-space: nowrap;
  font-family: "Inter", var(--font-sans);
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(43,57,69,.55);
  font-variant-numeric: tabular-nums;
}
.hero-strip .strip-sep { color: var(--c-primary); opacity: .45; }

/* 矮屏桌面（如 1280×720）：英文 h1 折两行 + 数据点会把首屏顶出 6–14px，
   收紧字阶与内边距，保证 trust 不被 strip 压住 */
@media (min-width: 768px) and (max-height: 780px) {
  .hero-copy h1 { font-size: 44px; line-height: 56px; }
  .hero-copy .hero-sub { font-size: 18px; line-height: 28px; }
  .hero-inner { padding-block: var(--space-5); }
  .hero-trust { margin-top: var(--space-6); }
  .hero-actions { margin-top: var(--space-5); }
}

/* Hero 移动端方案 B（≤767 切换，见底部媒体查询） */
.hero-lineart { display: none; }

/* Hero 入场动效（JS 加 .is-ready 后触发） */
.hero [data-hero-step] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease-out-expo), transform 500ms var(--ease-out-expo);
}
.hero.is-ready [data-hero-step] { opacity: 1; transform: translateY(0); }
.hero.is-ready [data-hero-step="1"] { transition-delay: 0ms; }
.hero.is-ready [data-hero-step="2"] { transition-delay: 120ms; }
.hero.is-ready [data-hero-step="3"] { transition-delay: 240ms; }
.hero.is-ready [data-hero-step="4"] { transition-delay: 360ms; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  /* §12.4-3 静态 1px 冷色内描边 */
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--c-hairline);
  padding: var(--space-6);
}
.card--hover { transition: transform var(--dur-hover) var(--ease-standard), box-shadow var(--dur-hover) var(--ease-standard); }
.card--hover:hover, .card--hover:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2), inset 0 0 0 1px var(--c-accent-soft);
}

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* 图标底（40px，grad-steel，白色线性图标） */
.icon-tile {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--grad-steel);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.icon-tile svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* §12.4-10 据点卡/保障卡图标收紧：36px / 圆角 8 / 1px 内高光 */
.guarantee-item .icon-tile,
.location-card .icon-tile {
  width: 36px; height: 36px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}

/* ---------- 产业应用案例卡（§12.2 降密度） ---------- */
.grid--4.app-grid { gap: 20px; }
.app-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 14px 14px 24px;
  gap: 0;
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--c-hairline);
}
.app-card:hover,
.app-card:focus-within {
  box-shadow: var(--shadow-2), inset 0 0 0 1px var(--c-accent-soft);
}
/* 内缩图（原负 margin 出血已去掉），3:2 比 4:3 更横，文字区松出来 */
.app-card .card-media {
  position: relative;
  margin: 0 0 20px;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-img);
  overflow: hidden;
  border-bottom: 0;
  background: var(--c-bg-alt);
}
.app-card .card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(.72) contrast(1.06) brightness(1.04) saturate(.55);
  transform: scale(1);
  transition: transform var(--dur-image) var(--ease-out-expo),
              filter 320ms var(--ease-standard);
}
/* 冷调统一遮罩：4 张异色图靠它拉到同一色域 */
.app-card .card-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,41,62,.06) 0%, rgba(18,41,62,.16) 100%);
  opacity: 1;
  transition: opacity 320ms var(--ease-standard);
  pointer-events: none;
}
.app-card:hover .card-media img,
.app-card:focus-within .card-media img {
  transform: scale(1.03);
  filter: grayscale(.45) contrast(1.08) brightness(1.02) saturate(.72);
}
.app-card:hover .card-media::after,
.app-card:focus-within .card-media::after { opacity: .6; }

/* §12.2.3 编号 01–04 移到标题左侧做索引 */
.app-card .app-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.app-card .app-num {
  font-family: "Inter", var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  padding-right: 10px;
  border-right: 1px solid var(--c-hairline-strong);
  flex: none;
}
.app-card h3 { margin-top: 0; }

/* 卡片组通用 */
.feature-card h3 { margin-top: var(--space-4); }
.feature-card p { color: var(--c-ink-secondary); margin-top: var(--space-2); font-size: 15px; line-height: 26px; }

/* 产品系列卡 */
.product-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.product-card .card-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.product-card .card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-bottom: 1px solid var(--c-border);
  transition: transform var(--dur-image) var(--ease-out-expo);
}
/* §12.4-4 系列卡图 hover 轻推（弱于应用卡的 1.03） */
.product-card:hover .card-img img,
.product-card:focus-within .card-img img { transform: scale(1.02); }
/* 实拍图统一冷调微调（design-spec §9.6） */
.photo-warm { filter: grayscale(.2) saturate(.85); }
.product-card .card-body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
.product-card .card-body p { color: var(--c-ink-secondary); margin-top: var(--space-2); font-size: 15px; line-height: 26px; flex: 1; }
.product-card .card-body .link-arrow { margin-top: var(--space-4); }

/* 应用卡文字区：§12.2.4 等高 + 3 行截断（排除「对应产品」行，它不参与截断） */
.app-card > p:not(.app-for) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  min-height: calc(3 * 26px);
  color: var(--c-ink-secondary);
  font-size: 15px;
  line-height: 26px;
  margin-top: var(--space-2);
}
.app-card .app-for { margin-top: var(--space-3); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-ink-secondary); }
.app-card .app-for strong { color: var(--c-primary); font-weight: 500; }
.app-card .link-arrow { margin-top: auto; padding-top: var(--space-3); font-size: 14px; }

/* 保障卡（横向：左图标右文）—— §12.4-3 与其它卡统一为「白面 + 1px 冷色内描边」 */
.guarantee-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  background: var(--c-surface);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--c-hairline);
}
.guarantee-item h3 { font-size: 18px; line-height: 28px; }
.guarantee-item p { color: var(--c-ink-secondary); font-size: 15px; line-height: 26px; margin-top: var(--space-1); }

/* ---------- 徽章 ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--c-bg-alt);
  color: var(--c-primary);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.badge--info { background: var(--c-info-bg); color: var(--c-info); }
/* 徽章行内的徽章允许换行：短标签仍算得 24px 高（20 行高 + 2×2 内边距），长短句在窄屏自动折行不撑破容器 */
.badge-row .badge {
  height: auto;
  min-height: 24px;
  padding: 2px 10px;
  line-height: 20px;
  white-space: normal;
  max-width: 100%;
  text-align: left;
  overflow-wrap: break-word;
}

/* ---------- 提示条 ---------- */
.alert {
  display: flex;
  gap: var(--space-3);
  border-radius: var(--radius-m);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-note);
  line-height: var(--lh-note);
}
.alert svg { width: 20px; height: 20px; flex: none; margin-top: 2px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.alert--info { background: var(--c-info-bg); color: var(--c-info); }
.alert--info svg { stroke: var(--c-info); }
.alert--info a { color: var(--c-info); font-weight: 500; }
.alert--success { background: var(--c-success-bg); border: 1px solid var(--c-success-border); color: var(--c-success); }
.alert--success svg { stroke: var(--c-success); }
.alert--danger { background: var(--c-danger-bg); border: 1px solid var(--c-danger); color: var(--c-danger); }
.alert--danger svg { stroke: var(--c-danger); }
.alert--danger a { color: var(--c-danger); font-weight: 600; }
.alert p { flex: 1; }

/* ---------- CTA 条 ---------- */
.cta-bar {
  position: relative;
  overflow: hidden;
  background: var(--grad-cta);
  border-radius: var(--radius-l);
  padding-block: var(--space-7);
  padding-inline: var(--space-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  /* §12.4-6 45° 极淡斜纹 + 1px 内高光边框 */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.cta-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 12px);
  pointer-events: none;
}
.cta-bar > * { position: relative; z-index: 1; }
.cta-bar h2 { color: #fff; }
.cta-bar .cta-sub { color: rgba(255,255,255,.85); font-size: 15px; margin-top: var(--space-2); }
.cta-bar .btn { flex: none; }
/* 双按钮组（联络页「立即与业务代表连系」） */
.cta-bar-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; flex: none; }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.62); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; transform: translateY(-1px); }
.btn--ghost:active { background: rgba(255,255,255,.22); }

/* ---------- 页脚 §12.3 新层级：品牌通栏 / ghost 字标 / 三列 / 底栏 ---------- */
.site-footer { background: var(--c-footer); color: #C7D3DE; margin-top: var(--space-9); }
.site-footer .footer-main { display: block; }

/* 上排：品牌通栏 + ghost 字标 */
.site-footer .footer-top {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-8);
  padding-block: 56px 40px;
  border-bottom: 1px solid var(--c-on-dark-line);
  overflow: hidden;
}
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; }
.footer-brand img { height: 40px; width: auto; mix-blend-mode: screen; margin-bottom: var(--space-4); }
.footer-brand .footer-tagline {
  font-size: var(--fs-note); line-height: var(--lh-note);
  max-width: 380px;
  color: #C7D3DE;
}
/* ghost 字标（纯装饰，opacity 上限 .06） */
.footer-wordmark {
  font-family: "Inter", var(--font-sans);
  font-size: 88px;
  line-height: .86;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #FFFFFF;
  opacity: .06;
  white-space: nowrap;
  align-self: flex-end;
  margin-bottom: -6px;
  user-select: none;
  pointer-events: none;
}

/* 页脚社交图标（六枚：FB/IG/YT/X/LinkedIn/TikTok） */
.site-footer .footer-social { display: flex; flex-direction: row; gap: 10px; margin-top: 20px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .06);
  color: #C7D3DE;
  transition: background-color var(--dur-quick) var(--ease-standard),
              color var(--dur-quick) var(--ease-standard),
              transform var(--dur-hover) var(--ease-standard);
}
.footer-social a:hover { background: rgba(255, 255, 255, .16); color: #fff; transform: translateY(-2px); }
.footer-social svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* 下排三列 */
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.15fr 1.15fr 1fr;
  gap: 40px 56px;
  padding-block: 40px 48px;
}
.footer-col h3 {
  margin: 0 0 18px;
  padding-top: 14px;
  border-top: 1px solid var(--c-on-dark-line);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #FFFFFF;
  opacity: .9;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  font-size: 14px;
  line-height: 22px;
  color: #C7D3DE;
  transition: color var(--dur-quick) var(--ease-standard),
              padding-left var(--dur-quick) var(--ease-standard);
}
.footer-col a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 2px; height: 12px;
  margin-top: -6px;
  background: var(--c-accent);
  transform: scaleY(0);
  transition: transform var(--dur-quick) var(--ease-standard);
}
.footer-col a:hover { color: #FFFFFF; padding-left: 14px; text-decoration: none; }
.footer-col a:hover::before { transform: scaleY(1); }
.footer-col li { font-size: 14px; line-height: 22px; color: #C7D3DE; }
.footer-col .loc-line { font-size: 14px; line-height: 22px; color: #C7D3DE; }

/* 底栏：左版权 / 中语言 / 右回顶 */
.site-footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-block: 20px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-5);
  font-size: 13px;
  line-height: 20px;
  color: #8FA3B5;
}
.footer-bottom p { font-size: 13px; line-height: 20px; color: #8FA3B5; }
/* 公司名 + 統一編號：原来一直 hidden 所以没有样式，露出后必须给分隔，否则与版权粘成一串 */
.footer-reg { margin-left: var(--space-3); color: #7E93A5; }
.footer-reg::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 11px;
  margin-right: var(--space-3);
  background: rgba(255, 255, 255, .22);
  vertical-align: -1px;
}
@media (max-width: 560px) {
  .footer-reg { display: block; margin-left: 0; margin-top: 2px; }
  .footer-reg::before { content: none; }
}
.footer-bottom .to-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: #C7D3DE;
  font-size: 13px;
}
.footer-bottom .to-top:hover { color: #FFFFFF; text-decoration: none; }
.footer-bottom .to-top svg { transition: transform var(--dur-quick) var(--ease-standard); }
.footer-bottom .to-top:hover svg { transform: translateY(-2px); }

/* 深底版语言切换器（footer-bottom 内，独立于导航栏那枚） */
.footer-bottom .lang-switch { background: rgba(255,255,255,.08); height: 32px; }
.footer-bottom .lang-switch button { height: 28px; font-size: 12px; color: #A9BBCA; }
.footer-bottom .lang-switch button[aria-pressed="true"] {
  background: rgba(255,255,255,.16);
  color: #FFFFFF;
  box-shadow: none;
}

/* 公差范围图（specs 页 Tab 内） */
.tol-fig { margin: var(--space-4) 0 0; }
.tol-fig img { width: 100%; height: auto; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-m); display: block; }
.tol-fig figcaption { margin-top: var(--space-2); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-muted); }
/* 右栏两枚断面图：第二枚不放大超过原生宽度，避免线稿发虚。
   不做 sticky —— 左栏在「日標／歐標」两个 Tab 下比右栏矮，
   sticky 的 top 偏移会把图顶出卡片底边（实测溢出 55px）。 */
.tol-media .tol-fig + .tol-fig { margin-top: var(--space-5); }
.tol-media .tol-fig:last-child img { width: 100%; max-width: 380px; margin-inline: auto; }

/* 公差对照表：Tab 面板内的窄版表格。
   .data-table 为全宽规格表设计（min-width 760 + 首列 sticky），放进卡片首列会强制造横滚，
   这里取消吸附与最小宽度，首列改为色底标签列。 */
.tol-cap,
.tol-note {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-muted);
}
.tol-note { margin: var(--space-2) 0 0; }

/* 可收合的断面标注图（原图为直立长幅，展开会拉高整张卡片） */
.tol-details { margin-top: var(--space-4); border: 1px solid var(--c-border); border-radius: var(--radius-m); background: var(--c-surface); }
.tol-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px var(--space-4);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--c-heading);
  cursor: pointer;
  list-style: none;
}
.tol-details > summary::-webkit-details-marker { display: none; }
.tol-details > summary:hover { background: var(--c-bg-alt); }
.tol-details > summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-quick) var(--ease-standard);
}
.tol-details[open] > summary {
  border-bottom: 1px solid var(--c-border);
  box-shadow: inset 0 2px 0 var(--c-primary);
}
.tol-details[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; }
.tol-details-body { padding: var(--space-4); }
.tol-details-body img { width: 100%; height: auto; display: block; border: 1px solid var(--c-border); border-radius: var(--radius-s); background: #fff; }
.tol-details-body .tol-note { margin-top: var(--space-3); }
/* 页脚内通用链接/列表（收窄作用域，避免污染 .to-top / 语言切换器） */
.site-footer a { color: #C7D3DE; }
.site-footer a:hover { color: #FFFFFF; }

/* ---------- 回到顶部 ---------- */
.back-to-top {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 90;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-primary);
  box-shadow: var(--shadow-1);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 200ms var(--ease-standard), transform 200ms var(--ease-standard);
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { box-shadow: var(--shadow-2); }

/* ---------- 滚动渐入 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-reveal) var(--ease-out-expo), transform var(--dur-reveal) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- 规格表（specs 页） ---------- */
.table-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll.is-scrollable::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 24px;
  background: linear-gradient(90deg, transparent, var(--c-bg));
  pointer-events: none;
}
.data-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: var(--fs-table); line-height: var(--lh-table); }
.data-table th {
  background: var(--c-bg-alt);
  color: var(--c-heading);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  height: 48px;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--c-border-strong);
  white-space: nowrap;
}
/* §12.4-8 表头顶部 2px 主色线 —— 只挂在 thead 上，
   否则每行行首 <th scope="row"> 都会多出一条蓝线（specs 各表首列即 th） */
.data-table thead th { box-shadow: inset 0 2px 0 var(--c-primary); }
.data-table td {
  padding: var(--space-3) var(--space-4);
  min-height: 52px;
  border-bottom: 1px solid #E3EAF0;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.data-table tbody tr:hover { background: #F6FAFD; }
/* 首列 sticky + 白底遮罩 + 分隔阴影（易走样点：白底必须有） */
.data-table th:first-child,
.data-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--c-surface);
  box-shadow: 6px 0 8px -6px rgba(16, 42, 67, .15);
  font-weight: 500;
  color: var(--c-heading);
}
/* 首列表头同时保留顶部主色线 + 右向分隔阴影 */
.data-table thead th:first-child {
  background: var(--c-bg-alt);
  box-shadow: inset 0 2px 0 var(--c-primary), 6px 0 8px -6px rgba(16, 42, 67, .15);
}
/* §12.4-8 hover 行左缘 2px accent —— 两段 box-shadow 必须同时写，漏掉分隔阴影 sticky 列会透字；
   用 :first-child 覆盖行首（specs 表为 th、其他表为 td） */
.data-table tbody tr:hover > :first-child {
  box-shadow: inset 2px 0 0 var(--c-accent), 6px 0 8px -6px rgba(16, 42, 67, .15);
}
.data-table td .badge { margin-inline: 2px; }
.table-thumb { height: 64px; width: auto; max-width: 120px; object-fit: contain; background: #fff; }
.table-note { margin-top: var(--space-3); }

/* 公差对照表（Tab 面板内的窄版表格）
   必须写在 .data-table 之后：两者特异性相同，靠顺序覆盖 min-width:760px 与首列吸附。 */
.data-table--tight { min-width: 0; }
.data-table--tight th {
  height: auto;
  padding: 9px 10px;
  font-size: 13px;
  white-space: normal;
  vertical-align: middle;
}
.data-table--tight td { padding: 9px 10px; }
/* 数值表居中，首列标签列保持左对齐 */
.data-table--tight td,
.data-table--tight th:not(:first-child) { text-align: center; }
.data-table--tight th:first-child,
.data-table--tight td:first-child {
  position: static;
  box-shadow: none;
  background: var(--c-bg-alt);
  font-weight: 600;
}
/* 两级表头：顶部 2px 主色线只加一次，行间再补一条分隔线 */
.data-table--tight thead tr:first-child th { box-shadow: inset 0 2px 0 var(--c-primary); }
.data-table--tight thead tr + tr th { box-shadow: none; border-bottom: 1px solid var(--c-border-strong); }
/* 窄屏：4 栏数值表在 280px 里放不下，收字号与内边距让它整体塞得下。
   不改成 nowrap 横滚 —— 那样「不等邊角鋼」整列会被藏到屏幕外，
   比折行更难读。只有明确不该断的串（如 +6.0／−4.0）用 .nw 锁住。 */
.nw { white-space: nowrap; }
@media (max-width: 560px) {
  .data-table--tight,
  .data-table--tight th { font-size: 12px; }
  .data-table--tight th,
  .data-table--tight td { padding: 7px 6px; }
}
/* 卡片内的横滚渐隐用卡片底色，否则会透出一条页面底色 */
.card .table-scroll.is-scrollable::after { background: linear-gradient(90deg, transparent, var(--c-surface)); }

/* 公差 Tab（分段控件，同语言切换器） */
.tabs {
  display: inline-flex;
  align-items: center;
  background: var(--c-bg-alt);
  border-radius: 999px;
  padding: 2px;
}
.tabs [role="tab"] {
  border: 0;
  background: transparent;
  color: var(--c-muted);
  font-size: 13px;
  font-weight: 500;
  height: 36px;
  padding: 0 var(--space-4);
  border-radius: 999px;
}
.tabs [role="tab"][aria-selected="true"] { background: #fff; color: var(--c-primary); box-shadow: var(--shadow-1); }
.tabs [role="tab"]:hover { color: var(--c-primary); }
.tab-panel { margin-top: var(--space-4); }
.tab-panel[hidden] { display: none; }
.tab-panel.is-active { animation: tab-fade 120ms var(--ease-standard); }
@keyframes tab-fade { from { opacity: 0; } to { opacity: 1; } }

/* 产品列表（products 页两列清单） */
.spec-list { columns: 2; column-gap: var(--space-6); }
.spec-list li { break-inside: avoid; border-bottom: 1px solid var(--c-border); }
.spec-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 52px; color: var(--c-ink); font-size: 15px; }
.spec-list a:hover { color: var(--c-primary); text-decoration: none; }
.spec-list a .arrow { color: var(--c-primary); flex: none; }

/* 文图交替区块（products 页） */
.split { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-7); align-items: center; }
/* grid 子项默认 min-width:auto，长单词/徽章行会把轨道撑破（英文态 390 尤其明显） */
.split > * { min-width: 0; }
.split--flip .split-media { order: -1; }
.split-media { position: relative; }
.split-media .media-frame {
  background: var(--c-bg-alt);
  border-radius: var(--radius-l);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}
.split-media .media-frame img { width: 100%; height: auto; }
.split-media .media-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-muted); text-align: right; align-self: flex-end; }
.split-media .photo-frame { border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-1); }
.split-media .photo-frame img { width: 100%; height: auto; }

/* 20MnSiV 徽章行 */
.badge-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* ---------- 手风琴（FAQ） ---------- */
.accordion { border-top: 1px solid var(--c-border); }
.accordion details { border-bottom: 1px solid var(--c-border); }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
  padding-block: var(--space-3);
  cursor: pointer;
  font-weight: 500;
  color: var(--c-heading);
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "";
  width: 10px; height: 10px;
  border-right: 2px solid var(--c-primary);
  border-bottom: 2px solid var(--c-primary);
  transform: rotate(45deg);
  transition: transform var(--dur-quick) var(--ease-standard);
  flex: none;
}
.accordion details[open] summary::after { transform: rotate(225deg); }
.accordion .accordion-body { padding-bottom: var(--space-4); color: var(--c-ink-secondary); font-size: 15px; line-height: 26px; }

/* ---------- 据点卡 ---------- */
.location-card h3 { display: flex; align-items: center; gap: var(--space-3); }
.location-card .loc-role { color: var(--c-ink-secondary); font-size: var(--fs-note); line-height: var(--lh-note); margin-top: var(--space-2); }
.location-card .loc-addr { margin-top: var(--space-3); font-size: var(--fs-note); line-height: var(--lh-note); color: var(--c-heading); font-weight: 500; }
.location-card .loc-addr--pending { color: var(--c-warning); font-weight: 400; }

/* 总部位置 / 生产基地：7:5 双栏（E2），两张卡同款同高 */
.loc-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-6);
}
.loc-grid .card h3 { display: flex; align-items: center; gap: var(--space-3); }
.loc-grid .card .loc-role { color: var(--c-ink-secondary); font-size: var(--fs-note); line-height: var(--lh-note); margin-top: var(--space-2); }
.loc-grid .card .loc-plant {
  font-size: 15px;
  line-height: 26px;
  color: var(--c-heading);
  font-weight: 500;
}
.loc-grid .card .loc-plant + .loc-plant { margin-top: var(--space-1); }
.loc-grid .card .loc-addr { margin-top: var(--space-4); font-size: var(--fs-note); line-height: var(--lh-note); color: var(--c-heading); font-weight: 500; }

/* ---------- 联络页 Email 卡 ---------- */
.email-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.email-card .email-note { color: var(--c-ink-secondary); margin-top: var(--space-2); }

/* 联络方式两张卡（来信 / 来电）纵向堆叠，各占满宽 */
.contact-methods { display: grid; gap: var(--space-4); }

/* ---------- 窄栏（about 品牌起源） ---------- */
.narrow { max-width: 760px; margin-inline: auto; }

/* 品牌起源：左图右文 */
.story-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-7); align-items: center; }
.story-media {
  margin: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-1);
}
.story-media img { display: block; width: 100%; height: auto; }

/* ---------- 响应式 ---------- */
/* 平板 768–1279 */
@media (min-width: 768px) and (max-width: 1279px) {
  h1 { font-size: 38px; line-height: 50px; }
  .section { padding-block: var(--space-8); }
  .section-head { margin-bottom: var(--space-6); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .footer-wordmark { font-size: 64px; }
  /* strip：1280 以下只保留 MATERIAL 组（三组全上会 1154px 超出容器） */
  .hero-strip .strip-track { gap: 24px; font-size: 10px; letter-spacing: .14em; }
  .hero-strip .strip-track > *:nth-child(n+2) { display: none; }
}

/* 移动 ≤767 */
@media (max-width: 767px) {
  :root { --container-pad: 20px; }
  /* 字号阶梯覆写（§3.2 移动档） */
  h1 { font-size: 30px; line-height: 40px; }
  h2 { font-size: 24px; line-height: 34px; }
  h3 { font-size: 20px; line-height: 30px; }
  h4 { font-size: 17px; line-height: 26px; }
  :root { --fs-lead: 17px; --lh-lead: 30px; }
  .section { padding-block: 56px; }
  .section-head { margin-bottom: var(--space-5); }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; gap: var(--space-4); }
  .story-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .loc-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .split { grid-template-columns: 1fr; gap: var(--space-5); }
  .split--flip .split-media { order: 0; }
  .spec-list { columns: 1; }
  .cta-bar { flex-direction: column; align-items: flex-start; padding: var(--space-6) var(--space-5); }
  .cta-bar .btn { width: 100%; }
  .cta-bar-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .email-card { flex-direction: column; align-items: flex-start; }
  .email-card .btn { width: 100%; }

  /* Hero 移动端：方案 B（纯 CSS/SVG，≤767 一律切换，省流量） */
  .hero { height: auto; min-height: 0; max-height: none; padding-block: 0; }
  .hero-inner { padding-block: 56px var(--space-7); }
  .hero-media { display: none; }
  .hero-overlay { background: rgba(243, 247, 250, .92); }
  .hero-copy { max-width: 100%; }
  /* §12.1.1 移动字阶 */
  .hero-copy h1 { font-size: 32px; line-height: 44px; letter-spacing: .01em; }
  .hero-copy .hero-sub { font-size: 18px; line-height: 30px; }
  .hero-copy .hero-lead { font-size: 15px; line-height: 26px; margin-top: 10px; }
  /* §12.1.2 三组数据点铺满一行 */
  .hero-trust { grid-template-columns: repeat(3, 1fr); width: 100%; }
  .hero-trust .trust-item { padding-inline: 12px; }
  .trust-value { font-size: 16px; line-height: 22px; }
  .trust-label { font-size: 11px; line-height: 16px; }
  .hero-lineart {
    display: block;
    margin-top: var(--space-6);
    opacity: .85;
  }
  .hero-lineart svg { width: 100%; height: auto; }
  .hero-glow { animation: none; }
  /* 移动端 strip：只保留第一组（MATERIAL 行），放不下时折两行而不是被裁切 */
  .hero-strip { height: auto; min-height: var(--hero-strip-h); }
  .hero-strip .strip-track {
    flex-wrap: wrap;
    white-space: normal;
    gap: 6px 0;
    padding: 10px 20px;
    font-size: 10px;
    letter-spacing: .12em;
    line-height: 16px;
  }
  .hero-strip .strip-track > *:nth-child(n+2) { display: none; }
  /* strip 变高后刻度尺会压到带上，移动端直接隐藏（装饰件） */
  .hero-rule { display: none; }
  /* 表格横向滚动提示 */
  .table-hint { display: flex !important; }
  .back-to-top { right: var(--space-4); bottom: var(--space-4); }

  /* 页脚 §12.3.6 移动端：品牌 → 三列 → 底栏，不做 order 重排 */
  .site-footer .footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    padding-block: 40px 32px;
  }
  .site-footer .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-block: 32px;
  }
  .site-footer .footer-bottom {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: var(--space-3);
    padding-block: 16px 24px;
  }
  .footer-col a { min-height: 44px; }
  .site-footer a[href^="mailto:"] { overflow-wrap: anywhere; }
}

/* 导航切换点：<1024 用汉堡抽屉 */
@media (max-width: 1023px) {
  .nav-links, .site-nav .lang-switch, .site-nav .btn--nav { display: none; }
  .nav-toggle { display: flex; }
  .brand img { height: 28px; }
  /* §12.3.2 / §12.4-5 窄屏隐藏 ghost 装饰（避免与正文抢位、避免横向溢出） */
  .footer-wordmark { display: none; }
  .page-ghost { display: none; }
}

@media (min-width: 1024px) {
  .nav-toggle, .drawer, .drawer-backdrop { display: none !important; }
}

/* ---------- reduced-motion 降级（design-spec §7 全项） ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* 渐入类：直接可见 */
  .reveal, .hero [data-hero-step] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* 视差/光效关闭 */
  .hero-media { transform: none !important; }
  .hero-glow { animation: none; }
  /* hover：保留变色，去位移 */
  .card--hover:hover, .card--hover:focus-within { transform: none; }
  .btn:hover, .btn--white:hover { transform: none; }
  .link-arrow:hover .arrow { transform: none; }
  /* 抽屉：直接显示/隐藏（backdrop fade ≤100ms） */
  .drawer { transition: none; }
  .drawer-backdrop { transition-duration: 100ms; }
  /* 提示类直接显示 */
  .tab-panel.is-active { animation: none; }
  .spinner { animation-duration: 0s; }

  /* §12.5 追加 3 条 —— 无位移即不算动效，但保留「信息变化」 */
  /* 12 应用卡图片：不缩放，保留滤镜对焦变化 */
  .app-card:hover .card-media img,
  .app-card:focus-within .card-media img { transform: none; }
  .product-card:hover .card-img img,
  .product-card:focus-within .card-img img { transform: none; }
  /* 13 页脚链接竖条：无过渡直接出现，且不推 padding（否则 hover 仍会「推一下」） */
  .footer-col a { transition: none; }
  .footer-col a:hover { padding-left: 0; }
  .footer-col a:hover::before { transform: none; }
  /* 14 Hero strip 跑马灯（本期静态，规则先留位） */
  .hero-strip .strip-track--scroll { animation: none; }
  .footer-social a:hover { transform: none; }
  .footer-bottom .to-top:hover svg { transform: none; }
  /* 15 公差断面图收合箭头：直接翻转，不做过渡 */
  .tol-details > summary::after { transition: none; }
}