/* ============ Lion Solar — site.css ============ */
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/opensans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/opensans-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/opensans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/opensans-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/opensans-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  --bg: #0C0C0E;
  --bg-2: #101013;
  --panel: #17171B;
  --panel-2: #1F1F24;
  --line: #2B2B31;
  --text: #FFFFFF;
  --muted: #A9A9B0;
  --muted-2: #7C7C85;
  --red: #E02418;
  --red-dark: #B82B13;
  --radius: 10px;
  --container: 1140px;
  --font-head: 'Open Sans', 'Segoe UI', 'Microsoft YaHei', sans-serif; /* 全站前台统一 Open Sans（含标题/按钮/表单/导航） */
  --font-body: 'Open Sans', 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

/* 全站前台已统一 Open Sans（--font-head 全局指向 Open Sans），
   此前 Home 页的局部切换规则已随之移除。 */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
.page-sust {
  /* 背景铺整页高度（100% x 100%），随内容滚动 —— 滚动时背景与内容同步、不变化 */
  background: #000 url('/img/sust-hero-bg.jpg') no-repeat center top / 100% 100%;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.25; }
.section-title { font-size: clamp(26px, 2.6vw, 38px); margin-bottom: 20px; }
.text-red { color: var(--red); }

.divider-red { height: 3px; background: linear-gradient(90deg, #FF4A2E 0%, var(--red-dark) 70%, rgba(184,43,19,0) 100%); }
.divider-red.solid { background: var(--red-dark); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--red); color: #fff; border: none; border-radius: 999px;
  font-family: var(--font-head); font-weight: 600; font-size: 16px;
  padding: 14px 38px; transition: background .25s, transform .25s, box-shadow .25s;
}
.btn:hover { background: #F03224; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(224,36,24,.35); }
.btn:disabled { background: #3A3A40; color: var(--muted-2); cursor: not-allowed; transform: none; box-shadow: none; }
.btn svg { width: 18px; height: 18px; }

/* ============ NAV ============ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: #1F1F1F;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
/* 三列 Grid：logo 在左列内居中（即 Home 左侧留白的正中），
   菜单组在中列、右列对称留空。列宽 1.5fr:auto:1fr —— 左列比右列宽 50%，
   菜单组整体右移，消除右侧过多留白 */
.nav-inner { display: grid; grid-template-columns: minmax(0,1.5fr) auto minmax(0,1fr); align-items: center; height: 64px; max-width: 1400px; margin: 0 auto; padding: 0 28px; }
.nav-inner > a { display: block; width: 140px; line-height: 0; justify-self: start; margin-left: -24px; }   /* a 标签 = logo 实际大小（140×24），点击区域严格对齐图片 */
.nav-logo { display: block; width: 140px; max-width: none; height: auto; }
.nav-center { display: flex; align-items: center; }
.nav-links { display: flex; align-items: center; gap: 52px; }
.nav-links a {
  font-family: var(--font-head); font-weight: 600; font-size: 16px; color: #D8D8DC;
  padding: 6px 0; position: relative; transition: color .2s; white-space: nowrap;
}
.nav-links a:hover { color: #fff; }
.nav-links a.active { color: var(--red); }
.nav-links a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--red); border-radius: 2px;
}
.nav-lang { display: flex; align-items: center; gap: 7px; color: #D8D8DC; font-size: 14px; font-weight: 600; margin-left: 48px; }
  /* 语言切换紧跟链接组（48px），不拖到导航栏最右端 */
.nav-lang svg { width: 16px; height: 16px; }
.nav-burger { display: none; background: none; border: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-burger span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: .3s; }
.nav.open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ≤1240px：收窄链接间距，避免 1151~1240px 区间三列 Grid 溢出出现横向滚动 */
@media (max-width: 1240px) {
  .nav-links { gap: 32px; }
}
/* ≤1150px：三列 Grid（1.5fr:auto:1fr）会出现溢出，降级回 flex + 汉堡抽屉 */
@media (max-width: 1150px) {
  .nav-inner { display: flex; justify-content: space-between; }
  .nav-burger { display: flex; }
  .nav-logo { width: 140px; }
  .nav-links {
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: rgba(12,12,14,.98); border-bottom: 1px solid var(--line);
    max-height: 0; overflow: hidden; transition: max-height .35s ease;
  }
  .nav.open .nav-links { max-height: 480px; }
  .nav-links a { padding: 15px 24px; width: 100%; }
  .nav-links a.active::after { display: none; }
}

/* ============ HERO (home) ============ */
.hero { position: relative; height: 787px; overflow: hidden; } /* 用户指定固定高度 787px */
.hero-slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease;
  background-size: cover; background-position: center;
}
.hero-slide.active { opacity: 1; }
.hero-slide::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,12,14,.12) 0%, rgba(12,12,14,.05) 45%, rgba(12,12,14,.30) 100%);
}
.hero-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.hero-title {
  font-size: clamp(40px, 5.2vw, 72px); max-width: 760px; color: #fff;
  line-height: 1.12; text-shadow: 0 2px 18px rgba(0,0,0,.55);
  white-space: pre-line;   /* DB 标题中的 \n 换行显示（Global\nLeadership） */
}
.hero-subtitle { margin-top: 16px; max-width: 560px; color: #E8E8EC; font-size: clamp(14px, 1.2vw, 18px); text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.hero-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 28px; z-index: 3; display: flex; gap: 12px; }
.hero-dot {
  width: 26px; height: 8px; border-radius: 999px; border: none;
  background: rgba(255,255,255,.85); opacity: .75; transition: all .3s; padding: 0;
}
.hero-dot.active { width: 38px; background: var(--red); opacity: 1; }
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(12,12,14,.45); color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.hero-arrow:hover {
  background: var(--red); border-color: var(--red);
  box-shadow: 0 0 24px rgba(224,36,24,.55);
  transform: translateY(-50%) scale(1.08);
}
.hero-arrow:active { transform: translateY(-50%) scale(.96); }
.hero-arrow:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.hero-arrow svg { width: 22px; height: 22px; display: block; }
.hero-arrow-prev { left: clamp(14px, 2.2vw, 36px); }
.hero-arrow-next { right: clamp(14px, 2.2vw, 36px); }
@media (max-width: 720px) {
  .hero-arrow { width: 40px; height: 40px; }
  .hero-arrow svg { width: 18px; height: 18px; }
}

/* ============ HOME about ============ */
/* all values measured from the design file (1365x708 section crop):
   bg = near-black left -> slate #59666F top-right + faint blue glow bottom-right;
   outer disc d=65.2vw center (81.8%, 65.7%), pure black (Vector.png);
   inner disc d=34.6vw SAME center (concentric), design-cropped asset;
   text col left 180/1365, width 670/1365, font ~19.5px, line pitch 32px
   SCALING RULE: sizes are max(px floor, vw) capped at the 1365-design px value,
   so narrowing the window scales down (vw) while browser zoom-out beyond the
   design width freezes css size and shrinks physically like the rest of the page */
.home-about {
  position: relative; z-index: 2; overflow: visible;
  background:
    radial-gradient(45% 55% at 100% 95%, rgba(70,110,150,.60) 0%, rgba(70,110,150,0) 100%),
    radial-gradient(135% 150% at 100% 0%, #59666F 0%, #2E363D 25%, #141920 46%, #05070A 72%, #020405 100%);
  padding-top: min(60px, max(48px, 4.4vw));
  padding-bottom: min(117px, max(72px, 8.6vw));
  /* ratio lock: keeps section height >= design ratio (708/1365) at any viewport,
     so the discs (sized in vw) can never poke above the section top */
  min-height: min(708px, 51.9vw);
}
.home-about .container {
  max-width: min(1140px, 83.52vw);
  padding-left: min(24px, 1.76vw);
  padding-right: min(24px, 1.76vw);
}
.home-about-title {
  position: relative; z-index: 2;
  font-family: var(--font-head); font-weight: 700; color: #fff;
  font-size: min(74px, max(38px, 5.42vw)); text-align: center; margin-bottom: min(87px, max(56px, 6.4vw));
}
.home-about-grid { position: relative; }
.home-about-text { position: relative; z-index: 2; max-width: min(728px, max(493px, 53.33vw)); margin-left: min(44px, 3.2vw); }
.home-about-text p { font-size: min(19.2px, max(13px, 1.407vw)); line-height: 1.66; word-spacing: -0.026em; letter-spacing: -0.005em; color: #FFFFFF; }
.home-about-text p + p { margin-top: 3px; }
.about-accent { width: min(68px, max(44px, 5vw)); height: 5px; background: var(--red); margin-top: min(18px, max(12px, 1.32vw)); }
/* planet — concentric double disc from the design's real assets.
   The layer is anchored to the capped container box so the discs keep their
   design position both below (vw regime) and above (capped regime) 1365.

   ⚠️ home 的球是「设计稿原样」，不要拿它当模板改。
     早前把 home 与 sustainability 写成并列选择器（共用一套定义），
     结果调 Sustainability 的配色/尺寸时**连带把 home 的球也改了**，
     用户明确要求「home 的球不能动」。
     现已拆开：home 保持原参数（890/472、at 22% 26%、left 88.1%），
     sustainability 用下方独立的一套。 */
.home-about-planet {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(1140px, 83.52vw); z-index: 1; pointer-events: none;
}
.home-about-planet .orbit {
  position: absolute; width: min(890px, 65.2vw); aspect-ratio: 1; border-radius: 50%;
  left: 88.1%; top: 65.7%; transform: translate(-50%, -50%);
  /* pure CSS = vector sharp at any zoom; measured: black upper-left -> slate lower-right */
  background: radial-gradient(circle at 22% 26%, #000 0%, #000 38%, #16232E 47%, #2C4051 58%, #3E5566 72%, #4E6878 88%, #58727F 100%) #000;
}
.home-about-planet .core {
  position: absolute; width: min(472px, 34.6vw); aspect-ratio: 1; border-radius: 50%;
  left: 88.1%; top: 65.7%; transform: translate(-50%, -50%);
  /* pure CSS gradient matched to the design samples (brightest lower-right) */
  background: radial-gradient(circle at 66% 80%, #6E7D89 0%, #616F7B 30%, #55626D 55%, #46525C 82%, #3F4B54 100%);
}
/* keep the stats band imagery above the planet bleed (as in the design) */
.stats { z-index: 3; }
@media (max-width: 900px) {
  .home-about-text { max-width: 100%; margin-left: 0; }
  .home-about-planet .orbit { width: 96vw; left: 74%; top: 30%; opacity: .3; }
  .home-about-planet .core { width: 51vw; left: 74%; top: 30%; opacity: .4; }
}

/* ============ Sustainability 圆环（独立一套，不影响 home） ============
   设计提供的矢量素材直接替换原 CSS 球体：
   ① 圆环 sust-ring.png：858×837、中心镂空（内径≈295、外径≈426、带宽≈130），
      外径对齐原 orbit 的 min(694px, 50.8vw)，圆心位置不变（99% / 38%）；
   ② hero 背景替换为设计提供的 1920×1685 渐变图（右上蓝灰、左下纯黑），
      背景定位 right top，保证渐变角随视口裁切始终在右上。 */
.sust-planet {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(1140px, 83.52vw); z-index: 1; pointer-events: none;
}
/* 圆环：以 PNG 的 alpha 环带作 mask，环带内填充渐变 ——
   右上（与背景渐变同色系）→ 左下黑，形成渐变圆环。
   外径对齐原 orbit 的 min(694px, 50.8vw)，圆心 99% / 38% 不变。
   若要纯黑圆环：把 background 换成 #000 即可。 */
.sust-ring {
  /* 等比圆形（不拉伸畸变）：宽度 694、比例 950/951，mask 用 contain */
  position: absolute; width: min(694px, 50.8vw); aspect-ratio: 950 / 951;
  left: 98%; top: 49%; transform: translate(-50%, -50%);
  background: linear-gradient(225deg,
    #36454E 0%, #2C383F 18%, #1F2A31 38%, #131B20 58%, #070A0D 78%, #000 100%);
  -webkit-mask: url('/img/sust-ring.png') center / contain no-repeat;
          mask: url('/img/sust-ring.png') center / contain no-repeat;
}
@media (max-width: 900px) {
  .sust-ring { width: 96vw; height: 96.1vw; left: 74%; top: 34%; opacity: .55; }
}

/* ============ STATS band ============ */
/* values measured from the design (1920px page crop, band 768px tall);
   sizes = max(px floor, vw) capped at the 1365-design px value: window resize
   scales down via vw, browser zoom-out beyond 1365 css px freezes the design
   size so the band shrinks physically together with the rest of the page */
.stats {
  position: relative;
  padding: min(76px, max(48px, 5.6vw)) 0 min(112px, max(64px, 8.2vw));
  background-color: #040507;
  overflow: hidden;
}
/* full composition, always completely visible (contain, anchored to the bottom),
   side edges fade into the black band so the wide band never shows hard seams */
.stats::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: #040507 url('/img/stats-bg.jpg?v=5') center bottom / contain no-repeat;
}
.stats > .container { position: relative; z-index: 1; }
/* design accent: thin red bar along the bottom edge, left-anchored, ~52.5% width */
.stats::after {
  content: ''; position: absolute; left: 0; bottom: 0; z-index: 2; pointer-events: none;
  width: 52.5%; height: min(10px, max(5px, .5vw)); background: var(--red);
}
.stats .container {
  max-width: min(1140px, 83.52vw);
  padding-left: min(24px, max(20px, 1.76vw));
  padding-right: min(24px, max(20px, 1.76vw));
}
.stats-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: min(31px, max(24px, 2.3vw)); }
.stat { text-align: center; display: flex; flex-direction: column; align-items: center; }
.stat-icon {
  height: min(57px, max(34px, 4.2vw)); margin: 0 auto min(21px, max(12px, 1.55vw));
  display: flex; align-items: center; justify-content: center;
}
.stat-icon img { height: 100%; width: auto; display: block; }
.stat-label { color: #C9C9CF; font-size: min(19px, max(12px, 1.4vw)); line-height: 1.45; margin-bottom: min(33px, max(16px, 2.4vw)); max-width: 14.2em; }
.stat-value { margin-top: auto; font-family: var(--font-head); font-weight: 700; font-size: min(70px, max(42px, 5.1vw)); color: #fff; line-height: 1.05; white-space: nowrap; }
.stat-value .suffix { font-size: .42em; font-weight: 600; }
.stats-cta { position: relative; text-align: center; margin-top: min(97px, max(40px, 7.1vw)); }

/* ============ WHY cards ============ */
.why {
  /* 背景替换为 RT Intro Page (2) 设计图（1202×1920）：暗底 + 左下红光晕（无红条版本）。
     cover + 锚定底部：光晕保持设计比例不变形 */
  background: #1A1A1A url('/img/rt-intro-page-2.jpg') no-repeat center bottom / cover;
  position: relative; z-index: 3; overflow: hidden;
}
/* 原 CSS 红色圆环已删除（.why::before）：背景图自带红光晕效果 */
/* 大圆环装饰（Vector.png：黑色 alpha≈61% 的环形蒙版 626×1250）：
   叠在红光晕背景上压出深红圆环，卡片在 .container z:1 之上不受影响。
   位置按参考稿剖面实测：圆心≈(27, 1619)@1920×2023 区块，外半径≈660 */
.why-ring {
  position: absolute; left: 0; top: 47.5%;
  height: 65.2%; aspect-ratio: 626 / 1250;
  background: url('/img/why-ring.png') center / 100% 100% no-repeat;
  pointer-events: none; z-index: 0;
}
/* 底部渐隐入 footer 纯黑：消除背景图与 footer 之间的硬边隔阂（同 sust 页做法） */
.why::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 180px;
  background: linear-gradient(180deg, transparent, #000);
  pointer-events: none;
  z-index: 0;   /* 渐隐只压背景，卡片在 .container z:1 之上不受影响 */
}
.why .container { position: relative; z-index: 1; }
.why .section-title { text-align: center; margin-bottom: 56px; color: var(--red); }
/* ⚠️ 这些卡片被 JS 加了 `.rv rv-zoom`（见 public/js/site.js 的 RULES），
   而 `.rv.rv-in { transform: none }` 特异度 0,2,0 且定义在文件更靠后位置
   （SCROLL REVEAL 段），会把这里的 hover transform 覆盖掉。
   所以 hover 规则必须同样用 0,2,0 + 写在 .rv 之后才生效 ——
   本块已移到 SCROLL REVEAL 段之后声明。 */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.why-card {
  background: transparent;   /* 用户要求：图片无边框、文字区无底色，图文直接落在背景上 */
  transition: transform .38s cubic-bezier(.22,.61,.36,1);
}
.why-card.rv.rv-in:hover,
.why-card:hover {
  transform: translateY(-6px);
}
/* 悬浮红细边：包在图片外缘（参考图：环紧贴图片外侧 2-3px，与图片圆角同心）。
   不能裁剪、不能缩放图片——图片必须完整呆在环内。 */
.why-card-media {
  position: relative;
}
.why-card-media::after {
  content: '';
  position: absolute;
  inset: -4px;               /* 环外扩到图片边缘之外，紧贴图片 */
  border: 2px solid var(--red);
  border-radius: 24px;       /* 与图片圆角同心：20 + 4 */
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 2;
}
.why-card:hover .why-card-media::after { opacity: 1; }
.why-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 20px; /* 卡片图片圆角（PC/移动端一致） */
  transition: filter .4s ease;
}
.why-card:hover .why-card-img {
  filter: brightness(1.08) contrast(1.05) saturate(1.05);
}
/* 标题与正文：左右零内边距，文字与图片左右两缘齐平 */
.why-card-body {
  padding: 24px 0 28px;
  transition: transform .38s cubic-bezier(.22,.61,.36,1);
}
.why-card:hover .why-card-body { transform: translateX(4px); }
/* 顶部红线：悬浮时从左侧展开 */
.why-card-body::before {
  content: '';
  display: block;
  width: 34px;
  height: 3px;
  margin-bottom: 14px;
  border-radius: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .42s cubic-bezier(.22,.61,.36,1);
}
.why-card:hover .why-card-body::before { transform: scaleX(1); }
.why-card-title { font-size: 28.5px; font-weight: 600; margin-bottom: 10px; color: var(--red); }
.why-card-text { color: #FFFFFF; font-size: 14.1px; line-height: 1.9; } /* 全站正文标准 */

/* ============ generic page hero ============ */
.page-hero { position: relative; height: clamp(300px, 35vw, 500px); background-size: cover; background-position: center; }

/* About 页大图：581px 高 + 圆环装饰（按用户提供的示例效果）——
   照片保持清晰不糊；圆环以 screen 混合呈示例中的亮纱叠加，
   几何：高 82%、top 41% 垂直居中、水平 x=0（无 left 定位）。
   百分比定位使移动端与桌面端几何一致（hero 两端均固定 581px）。 */
/* About 页大图：581px 高 + 圆环“玻璃透镜”效果（按用户示例）——
   .about-hero-photo：基础照片，清晰不糊；
   .about-hero-lens：圆形透镜（clip-path 椭圆 = 圆环外轮廓），显示同一张照片的
   放大版本（background-size 128%）——圆内内容比圆外大一号，边界处自然错位，
   即示例中的折射观感；照片本身不变糊。
   圆环 .about-hero-ring 叠在最上层勾出轮廓。 */
.page-hero.about-hero { height: 581px; overflow: hidden; }
.about-hero-photo {
  position: absolute; inset: 0;
  background-image: var(--hero-img);
  background-size: cover; background-position: center;
}
/* Figma 设计稿：Vector (Stroke) 圆环，混合模式 Soft light、不透明度 100%。
   尺寸锚定 hero 高度（117% ≈ 680px）：hero 是固定 581px，
   浏览器放大/缩小时圆环与页面其他元素同步等比缩放；
   移动端（≤768）直径=视口宽、垂直居中完整显示。 */
.about-hero-ring {
  position: absolute;
  top: -7.67%;        /* -58 / 756 */
  left: -7.43%;       /* -107 / 1440 */
  height: 117%;       /* 680 / 581 */
  width: auto;
  max-width: none;    /* 解除全局 img max-width:100% 钳制，保持正圆 */
  mix-blend-mode: soft-light;
  opacity: 1;
  pointer-events: none;
  user-select: none;
}
/* fade the bottom of the hero image into the page background so the hard edge disappears */
.page-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(12,12,14,0) 0%,
    rgba(12,12,14,0) 85%,
    rgba(12,12,14,.55) 95%,
    var(--bg) 100%);
}
/* Solutions hero：蓝黑渐变一次贯穿整个首屏，末端收敛到 body 底色避免接缝 */
.page-hero.gradient.sol-hero-bg { height: auto; padding: 96px 0 36px;
  /* BJ5 背景（1920x972 原生匹配 hero 宽度）；底部渐变融入页面黑底，避免与特性区硬接缝 */
  background: linear-gradient(180deg, rgba(11,13,14,0) 62%, var(--bg) 100%), url('/img/bj5.jpg') center / cover no-repeat; }
.page-hero.gradient { height: auto; padding: 96px 0 84px; background: radial-gradient(1000px 500px at 85% -10%, rgba(224,36,24,.16), transparent 60%), radial-gradient(800px 480px at -10% 110%, rgba(255,255,255,.05), transparent 55%), var(--bg-2); }
.page-hero .container { position: relative; z-index: 2; }

/* ============ ABOUT page ============ */
.about-intro { background: var(--bg); }
.about-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8.4vw; align-items: start; }
.about-intro-text { padding-top: 8px; }   /* 换行与设计稿逐词一致：配合 14.1px 正文（列宽=栅格列 465px） */
.about-intro-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: min(32px, 3.6vw); padding-top: 16px; }
.about-intro-head img { width: min(260px, 26vw); height: auto; object-fit: contain; }
.about-intro-head h1 { font-size: clamp(48px, 5.6vw, 84px); color: var(--red); font-weight: 700; line-height: 1; }
.about-intro p { color: #FFFFFF; font-size: 14.1px; line-height: 1.9; }
.about-intro p + p { margin-top: 18px; }

.map-section { background: var(--bg-2); padding-top: clamp(60px, 7vw, 110px); padding-bottom: clamp(80px, 8vw, 130px); }
.map-stack { display: flex; flex-direction: column; align-items: center; gap: clamp(48px, 5.6vw, 84px); }
.map-title { font-family: var(--font-head); font-weight: 700; color: var(--red); font-size: clamp(34px, 4.2vw, 58px); line-height: 1.1; text-align: center; margin: 0; }
.map-stage { position: relative; max-width: 1080px; width: 100%; margin: 0 auto; aspect-ratio: 1028 / 746; }
.map-svg { display: block; width: 100%; height: 100%; }
/* 注意：不能给 .map-svg 加 pointer-events:none —— 会连带杀死 <object> 内部
   SVG 路径的 :hover（州悬浮放大+发光）。标记层 .map-markers 自身已是
   pointer-events:none，不影响标签/圆点的事件。 */
/* 以下三条是历史死代码：页面 CSS 无法穿透 <object> 作用到内部 SVG 文档，
   州的配色/悬浮全部由 us-map.svg 内部的 <style> 控制（保留会误导排查）。 */
.map-markers { position: absolute; inset: 0; pointer-events: none; }

/* markers rendered by site.js — placed in % of stage so they scale with the SVG */
.map-marker-dot {
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(224,36,24,.7);
  animation: mapPulse 2.2s ease-out infinite;
  animation-delay: calc(var(--d, 0) * .45s);
  transform: translate(-50%, -50%);
  pointer-events: none; /* 圆点纯装饰：让悬浮穿透到下方州路径（否则挡住州 :hover） */
}
.map-marker-dot::before, .map-marker-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--red); opacity: .35;
  animation: mapPulseRing 2.2s ease-out infinite;
  animation-delay: calc(var(--d, 0) * .45s);
}
.map-marker-dot::after { animation-delay: calc(var(--d, 0) * .45s + .7s); opacity: .2; }
.map-marker-label {
  position: absolute; transform: translate(-50%, calc(-100% - 14px));
  background: rgba(15,15,18,.92); color: #fff;
  font-family: var(--font-head); font-weight: 600; font-size: 12px;
  padding: 5px 10px; border-radius: 6px; white-space: nowrap;
  border: 1px solid rgba(224,36,24,.4);
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
  pointer-events: none;
}
.map-marker-label::after {
  content: ''; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px;
  background: rgba(15,15,18,.92); border-right: 1px solid rgba(224,36,24,.4);
  border-bottom: 1px solid rgba(224,36,24,.4);
  transform: translateX(-50%) rotate(45deg);
}
.map-labels {
  display: flex; justify-content: center; align-items: flex-start;
  gap: clamp(64px, 10vw, 160px);
  width: 100%; max-width: 1100px; margin: 0 auto;
}
.map-label {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 4px;
}
.map-dot {
  flex-shrink: 0;
  width: 12px; height: 12px; border-radius: 50%; margin-top: 8px;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(224,36,24,.7);
  animation: mapPulse 2.2s ease-out infinite;
  animation-delay: calc(var(--d, 0) * .45s);
  position: relative;
}
.map-label-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.map-label-type {
  font-family: var(--font-head); font-weight: 700; font-size: 19px;
  color: var(--red); line-height: 1.2; letter-spacing: -.005em;
}
.map-row { display: flex; align-items: center; gap: 0; }
.map-row-text { color: #FFFFFF; font-size: 14px; font-weight: 500; line-height: 1; min-width: 120px; }
.map-pill {
  background: linear-gradient(135deg, #C22A1C, #8E1F12); color: #fff;
  font-family: var(--font-head); font-weight: 600; font-size: 12px;
  padding: 5px 12px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(194,42,28,.35);
}

@keyframes mapPulse {
  0%   { box-shadow: 0 0 0 0 rgba(224,36,24,.75); }
  70%  { box-shadow: 0 0 0 18px rgba(224,36,24,0); }
  100% { box-shadow: 0 0 0 0 rgba(224,36,24,0); }
}
@keyframes mapPulseRing {
  0%   { transform: scale(1);   opacity: .55; }
  80%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .map-dot, .map-marker-dot, .map-marker-dot::before, .map-marker-dot::after { animation: none; }
}

.strengths {
  position: relative;
  background:
    radial-gradient(ellipse 32% 70% at 50% 50%, rgba(224,36,24,.42) 0%, rgba(160,24,16,.18) 35%, rgba(0,0,0,0) 70%),
    #080202;
  padding-top: clamp(80px, 9vw, 130px);
  padding-bottom: clamp(80px, 9vw, 130px);
}
.strengths .section-title {
  text-align: center;
  margin-bottom: clamp(56px, 6vw, 88px);
  color: var(--red);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: .5px;
}
.strength-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 96px); align-items: center; padding: clamp(28px, 3.4vw, 50px) 0; }
.strength-row + .strength-row { border-top: 1px solid rgba(224,36,24,.12); }
.strength-row.flip .strength-media { order: 2; }
.strength-media {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--red), 0 0 36px rgba(224,36,24,.45), 0 18px 50px rgba(0,0,0,.5);
  background: #1a1a1f;
  transition: transform .38s cubic-bezier(.22,.61,.36,1), box-shadow .38s ease;
}
/* 悬浮特效：光晕增强 + 上浮 + 图片轻微放大。
   需带 .rv.rv-in（0,3,0）压过 .rv.rv-in { transform:none }（0,2,0，定义在文件更后） */
.strength-media.rv.rv-in:hover,
.strength-media:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 0 2px var(--red), 0 0 64px rgba(224,36,24,.75), 0 26px 60px rgba(0,0,0,.6);
}
.strength-media img { width: 100%; height: auto; display: block; border-radius: 12px; transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .4s ease; }
.strength-media:hover img { transform: scale(1.05); filter: brightness(1.08) contrast(1.05); }
.strength-text h3 {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--red);
  line-height: 1.25;
  letter-spacing: .3px;
}
.strength-text p { color: #FFFFFF; font-size: 15px; line-height: 1.75; }

/* ============ CAPABILITIES ============ */
/* ---- Aluminum Profile block (hero + features share one gradient) ---- */
.cap-banner-wrap {
  /* 铝型材 + PV 两个组件视为一体，共用 banner.svg 一张连续背景（原始比例、顶部对齐、不拉伸） */
  background: #000000 url('/img/banner.svg?v=20261012c') no-repeat top center / 100% auto;
}
.alu-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.alu-hero { position: relative; overflow: hidden; isolation: isolate; }
.alu-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  align-items: stretch;
  padding-block: clamp(40px, 5vw, 80px) 0;
  padding-inline: 24px;
  min-height: clamp(520px, 50vw, 720px);
  gap: 0;
}
.alu-hero-text {
  position: relative;
  z-index: 3;
  padding: clamp(50px, 6vw, 110px) 0 clamp(40px, 5vw, 80px);
  padding-right: clamp(20px, 3vw, 50px);
  align-self: center;
}
/* 上提标题：必须带到 .rv.rv-in（0,3,0）才能压过 .rv.rv-in { transform:none }（0,2,0，定义靠后） */
.alu-hero-text.rv.rv-in { transform: translateY(-56px); }
.alu-hero h1 { font-size: clamp(34px, 4.6vw, 64px); color: var(--red); line-height: 1.1; }
.alu-hero-desc { margin-top: 22px; max-width: 460px; color: #D8DCE0; font-size: clamp(12px, .92vw, 14px); line-height: 1.85; white-space: pre-line; }
.alu-hero-media {
  position: relative;
  align-self: stretch;
  display: block;
  z-index: 1;
  background: transparent; /* 不垫黑底：透明抠图直接透出 banner 渐变（垫黑会出现黑框矩形） */
  min-height: clamp(520px, 50vw, 720px);
  height: clamp(520px, 50vw, 720px);
}
.alu-hero-img {
  display: block;
  position: absolute;
  top: -14%;
  right: -6%;
  width: auto;
  height: 76%;
  max-width: none;
  object-fit: contain;
  object-position: right top;
  z-index: 2; /* 图片压住 5GW 数字上沿一点 */
  z-index: 3;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.55)) drop-shadow(0 6px 18px rgba(224,36,24,.18));
  pointer-events: none;
  user-select: none;
}
.alu-hero-stat {
  position: absolute;
  right: clamp(20px, 3vw, 60px);
  bottom: clamp(168px, 19vw, 335px);
  display: flex; align-items: flex-end; gap: 0;
  z-index: 1;
  filter: drop-shadow(0 6px 24px rgba(224,36,24,.35));
}
.alu-hero-big {
  font-family: 'Open Sans', Arial, 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: clamp(160px, 22vw, 320px);
  color: var(--red);
  line-height: .85;
  letter-spacing: -.02em;
}
.alu-hero-unit {
  font-family: 'Open Sans', Arial, 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 5.6vw, 80px);
  color: var(--red);
  line-height: 1;
  margin-left: -6px; /* 贴近 5 的字碗 */
}

/* ---- Aluminum features row (transparent — sits on .alu-section gradient) ---- */
.alu-features {
  background: transparent;
  /* 中间留空缩短：只上提本行，hero 顶部构图不动 */
  margin-top: calc(-1 * clamp(80px, 15vw, 190px));
  padding: clamp(20px, 3vw, 50px) 0 clamp(60px, 7vw, 110px);
}
.alu-features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.5vw, 22px); }
.alu-feature h3 { font-size: clamp(19px, 1.6vw, 23px); font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 14px; white-space: pre-line; }
.alu-feature p { color: #FFFFFF; font-size: min(11.3px, .87vw); letter-spacing: -.01em; line-height: 1.7; white-space: pre-line; }
.alu-feature .badge-strip { display: flex; flex-wrap: nowrap; gap: clamp(6px, .6vw, 10px); margin-top: 18px; }
.alu-feature .badge-strip img { height: clamp(40px, 3.6vw, 52px); width: auto; max-width: 100%; object-fit: contain; display: block; flex-shrink: 0; }

/* ---- PV Module ---- */
.pv-section { padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(48px, 5vw, 80px); }  /* 20261019t 底部 130→80，用户反馈与下节间距过大 */
.pv-grid {
  display: grid;
  grid-template-columns: 550px auto minmax(0, 1fr);
  column-gap: clamp(24px, 2.5vw, 48px);
  align-items: end; /* 文字底对齐图片底：缩放/放大时相对位置稳定，不错位 */
}
.pv-media { position: relative; z-index: 2; width: 550px; max-width: 100%; }
.pv-media img { width: 100%; height: auto; border-radius: 0; border: 0; display: block; background: transparent; position: relative; z-index: 2; }
.pv-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: start;
  line-height: .85;
  margin-top: 120px; /* "2" 上移到图片中段，GW 落在图片底部下方 */
  margin-left: -160px; /* 2GW 左移，左缘被图片遮住 */
  filter: drop-shadow(0 8px 28px rgba(224,36,24,.35));
  position: relative;
  z-index: 1; /* 在图片下层：图片遮住 2 的左缘 */
}
.pv-stat-num {
  font-family: 'Open Sans', Arial, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: clamp(260px, 35vw, 380px);
  color: var(--red);
  line-height: .82;
  letter-spacing: -.02em;
  margin-top: -139px; /* "2" 上移 139px，让字形顶部超出图片顶约 20px（line box 顶超 25px，font ascent 111px） */
}
.pv-stat-unit {
  font-family: 'Open Sans', Arial, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: clamp(54px, 6.4vw, 76px);
  color: var(--red);
  line-height: 1;
  margin-top: -.02em;
  margin-left: 60px; /* GW 往右挪 60px（align-items:center 下 GW 中心右移 ~30px），GW 右边仍在 "2" 范围内 */
}
/* inline-block 会按内容宽度收缩/撑开，窄屏下压不掉 → 允许收缩并换行 */
.pv-info { align-self: center; padding-bottom: 120px; max-width: 100%; overflow-wrap: break-word; }
.pv-info h2 { font-size: clamp(34px, 4.2vw, 56px); color: var(--red); margin-bottom: 24px; line-height: 1.1; overflow-wrap: break-word; }
.pv-info p { color: #FFFFFF; font-size: clamp(14px, 1vw, 16px); line-height: 1.9; max-width: 540px; overflow-wrap: break-word; }

/* ---- Supply Chain Traceability ---- */
.trace { background: #000000; padding-top: clamp(24px, 2.5vw, 40px); padding-bottom: clamp(70px, 8vw, 120px); }  /* 20261019t 顶部 120→40（与 pv 底部留白叠加过大），用户反馈 */
.trace-title { color: var(--red); text-align: left; margin-bottom: clamp(36px, 4vw, 60px); }
.trace-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(20px, 2.6vw, 32px); row-gap: clamp(28px, 3vw, 44px); }
.trace-cell { display: flex; flex-direction: column; gap: clamp(14px, 1.4vw, 20px); }
.trace-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid var(--red);
  background: #000;
  /* 悬浮：抬升 + 边框提亮 + 外发光。缓动与 portfolio 统一 */
  transition: transform .38s cubic-bezier(.22,.61,.36,1),
              border-color .3s, box-shadow .38s ease;
}
/* ⚠️ 父级 .trace-cell 被 JS 加了 `rv rv-up`，而
   `.rv.rv-in { transform: none }`（0,2,0，定义在文件更靠后）会覆盖
   `.trace-card:hover` 的 transform —— 必须提到 .rv.rv-in 级别才生效。
   （本项目第三次同类问题，见 RUNBOOK 第 9 节） */
.trace-cell.rv.rv-in .trace-card:hover,
.trace-card:hover {
  transform: translateY(-6px);
  border-color: #FF3A2C;
  box-shadow: 0 18px 42px rgba(0,0,0,.6), 0 0 22px rgba(224,36,24,.32);
}
/* 图片推近：由 .trace-card 的 overflow:hidden 裁在圆角内 */
.trace-card img {
  width: 100%;
  aspect-ratio: 1717/916;
  display: block;
  transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .4s ease;
}
.trace-card:hover img {
  transform: scale(1.06);
  filter: brightness(1.1) contrast(1.06) saturate(1.05);
}
/* 20261019n：应用户要求，卡4 的 transform 补偿也已移除（与卡1 一致，素材原样渲染）。
   四张卡片现在均为纯图片渲染：无 object-fit、无 transform、无 transform-origin */
/* 20261019o：卡1 图片内容下移 1.4%（≈4px）使图标与卡2/3 对齐；红框为卡片边框，
   不受 img transform 影响，大小位置不变；纯位移无缩放。hover 带同样位移防止跳动 */
/* 20261019q：卡1/卡4 内容下移对齐图标——不留空白版：
   图片盒加高同等比例并下移（top = height 增量），上缘由图片自身补满、零空白；
   无 transform、无 object-fit、无缩放，红框不变；垂直拉伸 ~1.2-1.4% 不可见。
   （20261019p 的纯 translateY 会露出上缘空白，已替换） */
/* 20261019r：应用户要求移除卡1 的 top 偏移（卡1 完全原样渲染）；卡4 保留微调 */
.trace-cell:nth-child(4) .trace-card img { position: relative; top: 1.2%; height: calc(100% + 1.2%); }
.trace-desc { color: #FFFFFF; font-size: 15px; line-height: 1.7; padding: 0 4px; margin: 0; transition: color .3s ease, transform .38s cubic-bezier(.22,.61,.36,1); }
.trace-cell.rv.rv-in .trace-card:hover + .trace-desc,
.trace-card:hover + .trace-desc { color: #FFFFFF; transform: translateX(4px); }
/* 20261019n：应用户要求，卡4 的 transform 补偿也已移除（与卡1 一致，素材原样渲染）。
   四张卡片现在均为纯图片渲染：无 object-fit、无 transform、无 transform-origin */

/* ---- Quality Assurance ---- */
/* ============ QUALITY ASSURANCE ============ */
.quality { 
  background: #000000; 
  padding-top: clamp(70px, 8vw, 120px); 
  padding-bottom: clamp(40px, 4vw, 60px); 
  position: relative; 
}
/* 左右 carousel 滑动指示条 —— 已按需求移除（红色竖线） */
.quality::before, .quality::after { display: none; }

.quality-title {
  text-align: left;
  color: var(--red);
  font-size: clamp(32px, 3.2vw, 44px);
  font-weight: 800;
  margin-bottom: clamp(40px, 5vw, 70px);
  display: block;
  position: relative;
  letter-spacing: -.01em;
}

.quality-cols { 
  display: grid; 
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); 
  gap: clamp(40px, 5vw, 80px); 
  align-items: start; 
}
.warranty-block { 
  grid-column: 1; 
  grid-row: 1;
  margin-bottom: 0; 
}
.quality-col-left { 
  grid-column: 1; 
  grid-row: 2 / span 2;
  /* 徽章框底端与右侧 cert-wall 底端对齐：
     徽章框放大后左列变高，用负 margin-top 把整列上推。
     margin 参与布局流，能同时调整与上方 Warranty 的间距。 */
  margin-top: clamp(-86px, -8.2vw, -114px);
}
.quality-col-right { 
  grid-column: 2; 
  grid-row: 1 / span 3;
}
.q-section-head { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(6px, .8vw, 10px); margin: clamp(8px, 1vw, 14px) 0 clamp(14px, 1.6vw, 22px); position: relative; }
.q-section-head:first-child { margin-top: 0; }
.q-section-head .q-bar { width: clamp(28px, 2.8vw, 40px); height: 6px; background: var(--red); border-radius: 2px; flex-shrink: 0; }
.q-section-head h3 { font-size: clamp(22px, 1.8vw, 28px); font-weight: 700; color: #fff; margin: 0; }
.quality-col-left > .q-section-head:first-child { margin-bottom: clamp(12px, 1.4vw, 18px); }

/* Warranty — 15 | 25 with vertical divider */
.warranty-row { display: flex; align-items: flex-start; gap: 0; padding: 6px 0 clamp(6px, .8vw, 12px); }
.warranty-item { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(6px, .8vw, 10px); min-width: 0; }
.warranty-item:nth-child(1) { flex: 0 0 auto; }
.warranty-item:nth-child(3) { flex: 0 1 auto; max-width: clamp(215px, 26vw, 290px); }
.warranty-head { display: flex; align-items: flex-end; gap: clamp(4px, .6vw, 8px); }
.warranty-num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(54px, 5vw, 70px);
  color: var(--red);
  line-height: .9;
  letter-spacing: -.03em;
  filter: drop-shadow(0 4px 18px rgba(224,36,24,.28));
}
.warranty-unit { color: var(--red); font-weight: 700; font-size: clamp(16px, 1.2vw, 20px); line-height: 1.2; padding-bottom: clamp(4px, .5vw, 7px); }
.warranty-label { color: #fff; font-size: clamp(12px, .95vw, 14px); font-weight: 500; line-height: 1.5; overflow-wrap: break-word; }
/* 竖线用 margin:auto 推到内容区正中：
   两个 item 之间剩余空间被均分，竖线到左右内容的空白距离天然相等，
   不用任何 calc 补偿（item1 右侧被 "Year" 占住的空白也自动算进去）。 */
.warranty-divider { width: 2px; height: clamp(34px, 4vw, 52px); background: #ffffff; align-self: flex-start; margin: clamp(4px, .5vw, 8px) auto; flex-shrink: 0; }

/* Product Quality bullets */
.q-list { list-style: none; padding: 0; margin: 0; }
/* white-space:nowrap 会让长英文串（IQC/IPQC/OQC…）在窄屏撑破容器 —— 去掉它，
   并给 flex 子项加 min-width:0 + overflow-wrap，让长词正常换行。 */
.q-list li { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; color: #fff; font-size: clamp(12px, .86vw, 13.5px); line-height: 1.5; overflow-wrap: break-word; }
/* flex 子项默认 min-width:auto，不加这行文本不收缩，仍会撑破 */
.q-list li > span:last-child { min-width: 0; overflow-wrap: break-word; }
.q-bullet {
  width: 11px; height: 11px; flex-shrink: 0;
  margin-top: 4px;
  background: var(--red);
}

/* Certifications right column */
.key-certs-label {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 6px 14px;
  border-radius: 4px;
  margin-bottom: 22px;
  letter-spacing: .3px;
}
/* Global Certifications 标签与左侧 Industry Recognition 短红线对齐 */
.key-certs-label.global-label { margin-top: clamp(28px, 2.8vw, 39px); }
.iso-row { display: grid; grid-template-columns: 96px 1fr; gap: clamp(14px, 1.6vw, 24px); align-items: center; }
.iso-logo { width: 96px; height: auto; }
.iso-list { list-style: none; padding: 0; margin: 0; }
.iso-list li {
  display: flex; gap: clamp(8px, 1vw, 14px); align-items: flex-start;
  padding: clamp(8px, .9vw, 12px) 0;
  border-bottom: 1px solid rgba(255,255,255,.28);
}
.iso-list li:last-child { border-bottom: none; }
.iso-code { color: var(--red); font-weight: 700; font-size: clamp(14px, 1vw, 16px); flex-shrink: 0; min-width: 76px; }
.iso-text { color: #fff; font-size: clamp(13px, .95vw, 15px); line-height: 1.5; }
/* 前两条（Quality / Environmental Management Systems）强制单行 */
.iso-list li:nth-child(1) .iso-text,
.iso-list li:nth-child(2) .iso-text { white-space: nowrap; }
/* 第三条（Occupational Health and Safety Management Systems）允许两行 */
.iso-list li:nth-child(3) .iso-text { max-width: 30ch; }
/* cert-wall：多图网格。
   布局 4 + 4 + 2：前 8 个方形小图，最后 2 个长图各占半行。
   图片用绝对 max 尺寸限制，绝不放大（原图小于此值时按原尺寸显示，避免模糊失真）。 */
.cert-wall {
  border: 0;
  border-radius: var(--radius);
  padding: clamp(14px, 1.8vw, 26px) clamp(14px, 1.7vw, 24px);
  /* 与左侧徽章一致的黑蓝渐变 */
  background: linear-gradient(168deg, #000000 0%, #000000 22%, #04101A 55%, #0C2740 100%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(30px, 4vw, 58px) clamp(26px, 3.4vw, 48px);
  align-content: space-between;
}
.cert-wall-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: clamp(60px, 6vw, 84px);
}
.cert-wall img {
  max-width: clamp(52px, 5.2vw, 74px);
  max-height: clamp(52px, 5.2vw, 74px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* 最后 2 个（USPTO / EUIPO 长图）：各跨 2 列占半行 */
.cert-wall-cell:nth-last-child(-n+2) {
  grid-column: span 2;
}
.cert-wall-cell:nth-last-child(-n+2) img {
  max-width: clamp(120px, 13vw, 184px);
  max-height: clamp(38px, 3.6vw, 52px);
}

/* Industry Recognition */
.recognition-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.2vw, 28px); padding: 8px 0 10px; }
.recog-card {
  /* 顶部纯黑 → 底部蓝青，中间无红色光晕 */
  background: linear-gradient(168deg, #000000 0%, #000000 22%, #04101A 55%, #0C2740 100%);
  border: 0; border-radius: var(--radius);
  padding: clamp(14px, 1.6vw, 20px) clamp(18px, 2vw, 26px) clamp(13px, 1.5vw, 19px);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: clamp(9px, 1.1vw, 14px);
  min-height: 0; justify-content: flex-end;
  position: relative;
  overflow: hidden;
}
.recog-card img { max-height: clamp(40px, 4.4vw, 62px); width: auto; max-width: clamp(96px, 10vw, 142px); object-fit: contain; position: relative; z-index: 1; }
.recog-card span { font-size: clamp(13px, .95vw, 15px); color: #E8F0F5; font-weight: 600; line-height: 1.45; position: relative; z-index: 1; }
/* 第2、4 个徽章（Global Top 500 / Dun & Bradstreet）：logo 原图留白多，显得偏小偏下，
   单独放大并上移 */
.recog-card:nth-child(2) img,
.recog-card:nth-child(4) img { max-height: clamp(56px, 6.2vw, 86px); max-width: clamp(130px, 13.6vw, 192px); transform: translateY(clamp(-10px, -1vw, -6px)); }

/* ---- Third-party verified ---- */
.third { background: #000000; padding-top: clamp(24px, 2.6vw, 40px); padding-bottom: clamp(70px, 8vw, 120px); }
.third-heading-pill {
  display: flex; justify-content: flex-start;
  margin-bottom: clamp(26px, 2.8vw, 38px);
}
.third-heading-pill span {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  padding: 10px 26px;
  border-radius: 4px;
}
.third-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 36px); }
.third-card {
  /* 与上方徽章一致的黑蓝渐变 */
  background: linear-gradient(168deg, #000000 0%, #000000 22%, #04101A 55%, #0C2740 100%);
  border: 0;
  border-radius: var(--radius);
  padding: clamp(28px, 3vw, 44px) clamp(28px, 3vw, 44px) clamp(28px, 3.2vw, 44px);
}
.third-logo { height: clamp(48px, 4.2vw, 64px); width: auto; margin-bottom: clamp(20px, 2.4vw, 28px); display: block; }
.third-name { color: var(--red); font-size: clamp(17px, 1.4vw, 20px); font-weight: 700; margin-bottom: clamp(18px, 2vw, 26px); }
.third-list { list-style: none; padding: 0; margin: 0; }
.third-list li { color: #FFFFFF; font-size: clamp(14px, 1vw, 15px); line-height: 1.55; padding: clamp(10px, 1.2vw, 14px) 0; border-top: 1px solid var(--line); }
.third-list li:first-child { border-top: none; }

/* ============ SOLUTIONS ============ */
/* Solutions — hero 全部左对齐 + 蓝黑渐变背景 */
.sol-hero { text-align: left; }
.sol-hero h1 { font-size: clamp(40px, 5.2vw, 68px); color: var(--red); line-height: 1.05; }
.sol-hero h2 { font-size: clamp(20px, 2vw, 28px); font-weight: 600; margin-top: 14px; }
.sol-hero p { margin: 26px 0 0; max-width: 760px; color: var(--muted); font-size: 16px; }

/* ---- Sustainability hero：标题两行 + 右侧球体 ----
   球径 694px、球心上移到 38%（球上缘出血 20px）。
   min-height 收窄到 0.62×球径 + 标题区，保证不浪费纵向空间。 */
.sust-hero {
  position: relative;
  overflow: visible;   /* 圆环下沿延伸到 ESG 区、印在文字后面（hidden 会把下半截裁掉） */
  padding: clamp(64px, 7vw, 104px) 0 clamp(24px, 2vw, 32px);
  min-height: calc(min(694px, 50.8vw) * 0.62 + clamp(100px, 10vw, 140px));
}
/* 标题限宽 —— "Sustainability Commitment" 在此宽度下正好断成两行。
   实测 660px / 68px 字号时 "Sustainability" 恰好占满一行、"Commitment" 换行，
   与参考图一致。min() 第二参数按视口比例兜底，窄屏不会挤成四五行。
   margin-top 让标题从 hero 顶部再往下沉一截，与上移后的球体拉开呼吸感。 */
/* ⚠️ 选择器必须带 .page-hero.sust-hero 前缀（0,2,0）：
   section 上残留了 .sol-hero 类（复制 Solutions 页时带入），
   其 `.sol-hero h1 { line-height:1.05 }`（0,1,1）会压过裸 .sust-hero-title，
   导致标题两行间距一直偏紧。 */
.page-hero.sust-hero .sust-hero-title {
  max-width: min(660px, 58vw);
  line-height: 1.45;     /* Sustainability / Commitment 两行间距加大 */
  margin-top: clamp(28px, 5vw, 72px);
}
/* 副标题 "Energy for a Shared Planet"：放大字号 + 与标题拉开间距 */
.page-hero.sust-hero h2 {
  font-size: clamp(22px, 2.1vw, 30px);
  margin-top: clamp(20px, 2.6vw, 36px);
  color: #fff;
}
/* 正文：白色，与上方文字层级一致。
   ① white-space:pre-line 让 DB 文案中的 \n 渲染为换行（两句话各占一行）；
   ② max-width 必须放得下第一句（实测 ~858px），否则每句还会被自然折行，
      两行变四行 —— 原值 720px 就是这个原因。 */
.page-hero.sust-hero p {
  color: #fff;
  white-space: pre-line;
  margin-top: clamp(16px, 2vw, 26px);
  max-width: min(920px, 94%);
}
/* 球体的尺寸、渐变、位置全部定义在文件上方「Sustainability 球体」段
   （与 home 完全独立的一套，两页互不影响）。 */
/* 文字层必须在球体之上 */
.sust-hero .container { position: relative; z-index: 1; }

/* Sustainability hero 背景：**纯黑 #000**。
   原先是 `#08090B` + 右上角蓝色光晕（继承自 .page-hero.gradient 的
   rgba(224,36,24,.16) 红晕 + 自加的 rgba(60,92,118,.20) 蓝晕），
   导致背景比外圈球体（纯 #000）更亮 —— 球看起来像"贴在灰底上的黑盘"，
   边界反而更生硬。参考图整块背景与球体同为纯黑，两者靠边缘羽化区分。 */
.page-hero.gradient.sust-hero {
  background: transparent;
}
/* Sustainability hero 必须关掉 .page-hero::after 的灰蒙层。
   该伪元素是给「有背景图」的 hero 用的底部压暗过渡（rgba(12,12,14,.55)），
   但它 `inset:0` 覆盖整个 hero，在左上区域留下 #0D1013 的灰雾 ——
   实测 (600,150) 处 lum=15.6，正是用户截图里球体左上方那片发灰污渍，
   会让"边框"看起来模糊不清。Sustainability hero 是纯黑背景、无背景图，
   不需要这层过渡。 */
.page-hero.gradient.sust-hero::after { content: none; }

@media (max-width: 900px) {
  /* 窄屏球体缩小并降低不透明度，避免压住标题。
     标题保持两行（限宽收窄即可），不退回一行 —— 与桌面观感一致。
     core/orbit 仍保持 0.251 的实测比例，不可沿用旧的 46vw（那是 0.52，会变靶心）。 */
  .sust-hero-title { max-width: min(420px, 78vw); }
  /* 窄屏取消正文强制换行：DB 文案里的 \n 在窄屏会把 "environmental
     responsibility," 孤成一行很难看，改回自然流动（换行结构仅桌面保留）。 */
  .page-hero.sust-hero p { white-space: normal; }
  /* 窄屏沿用 home 的降级参数（在文件上方共用规则里已设 96vw/51vw），
     这里只调 hero 高度与球心上移量，保证标题不被压住。 */
  .sust-hero { min-height: calc(96vw * 0.72 + clamp(150px, 34vw, 260px)); }
  /* 窄屏只隐藏压暗盘（用户框出的深色「阴影圆盘」，即圆环中央那块），
     渐变圆环本身保留（96vw/74%/34%/.55，见上方共用规则） */
  .sust-planet::before { display: none; }
}

/* Solutions 特性区：完全透明，靠 hero 渐变延伸到底部纯黑（避免两段渐变交界出现色阶接缝） */
.sol-features { background: transparent; }
.sol-features.section { padding-top: 12px; } /* 间距缩小：紧跟 hero 描述文字（原 .section 88px 顶部内边距） */
.sol-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 48px; }
.sol-feature { padding-top: 0; }
/* 红色短横条移到标题下方，变短加高（对齐参考图 ~11x6px）；
   悬浮条目时红线延长成整条（宽度过渡到 100%） */
.sol-feature h3 { font-size: 19px; font-weight: 600; color: #fff; margin-bottom: 10px; }
.sol-feature h3::after {
  content: '';
  display: block;
  width: clamp(10px, .9vw, 13px);
  height: 6px;
  margin-top: 10px;
  background: var(--red);
  border-radius: 1px;
  transition: width .45s cubic-bezier(.22,.61,.36,1);
}
.sol-feature:hover h3::after { width: 100%; }
.sol-feature p { display: none; }

.series .section-title { text-align: right; color: var(--red); font-size: clamp(34px, 4.4vw, 60px); font-weight: 800; letter-spacing: -.01em; margin-bottom: clamp(24px, 2.6vw, 36px); }
.portfolio .section-title { text-align: center; margin-bottom: 50px; }

/* ---- Product Series：上下堆叠大卡片 ---- */
.series-stack { display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 52px); }
.series-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  align-items: center;
  gap: clamp(20px, 2.2vw, 34px);
  padding: clamp(28px, 3.6vw, 56px) clamp(30px, 4vw, 64px);
  border-radius: clamp(16px, 1.5vw, 22px);
  overflow: hidden;
  isolation: isolate;
  /* 背景图（Frame 992440523：顶部黑 → 底部蓝青渐变，1400x796），
     cover 铺满面板；圆角由面板自身 overflow:hidden 裁切 */
  background: url('/img/series-bg.png') center / cover no-repeat;
  background-color: #0E1418;
}
/* 图片底部过渡层：**已移除**。
   原先是一个高 46% 的矩形渐变色块（rgba(31,54,68,.9)），用来"压暗图片底部"。
   但它自身的颜色与卡片纵向渐变并不匹配，叠加后在卡片右侧形成一块
   亮度均匀的区域，被读作矩形边框。素材已裁切干净，不需要任何色块覆盖。 */
.series-panel::after { display: none; }
/* 第二张：左右镜像（文字在左、图片在右） */
.series-panel.is-flip { grid-template-columns: minmax(0, 52%) minmax(0, 48%); }
.series-panel.is-flip .series-panel-media { order: 2; }
.series-panel.is-flip .series-panel-body { order: 1; }

/* Product Series 标题：放进第一张卡片内部，右对齐 */
.series-panel-title {
  grid-column: 1 / -1;
  grid-row: 1;
  text-align: right;
  color: var(--red);
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 clamp(8px, 1vw, 14px);
  position: relative;
  z-index: 2;
}

.series-panel-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  position: relative;
  z-index: 1;
  /* 发光溢出容器时会被父级裁切形成矩形边 —— 显式放开 */
  overflow: visible;
}
.series-panel.is-flip .series-panel-media { grid-row: 2; }
.series-panel.is-flip .series-panel-body { grid-row: 2; }
.series-panel-body { min-width: 0; position: relative; z-index: 1; }
.series-panel:not(.is-flip) .series-panel-media { grid-row: 2; }
.series-panel:not(.is-flip) .series-panel-body { grid-row: 2; }

/* 图片底部融合层：**已移除**。
   原先用一个矩形渐变遮罩（.series-panel-media::after，height:20%）想让图片下缘
   与卡片底色衔接，但它自身的颜色 rgb(21,36,46) 与卡片纵向渐变
   (#04070A → #24404F) 并不匹配，于是矩形边界在深色卡片上清晰可见。
   素材裁切后已无空白边框、光晕由 drop-shadow 统一还原，无需任何遮罩。
   —— 结论：半透明矩形色块叠在渐变背景上必然显形，除非颜色与背景严格同源。 */
.series-panel-media::after { display: none; }

/* 图片：**完全不加 mask**，避免对不同区域施加不同透明度
   （那会导致电池片与外壳渲染不一致）。
   素材裁切时已去掉外围全透明空白，剩余的光晕用 drop-shadow 统一还原，
   整图受同一套滤镜影响，渲染完全一致。 */
.series-panel-media img {
  width: auto;
  height: auto;
  max-width: min(100%, 470px);
  max-height: clamp(340px, 38vw, 520px);
  object-fit: contain;
  /* 去掉调色滤镜，只保留沿面板轮廓的柔光（参考图效果）：
     两层 drop-shadow，近层贴轮廓较亮、远层大半径扩散，
     透明底 PNG 的 drop-shadow 天然沿产品轮廓发光 */
  filter:
    drop-shadow(0 0 16px rgba(170, 205, 230, .30))
    drop-shadow(0 0 42px rgba(140, 180, 210, .18));
}

.series-panel-head { margin-bottom: clamp(14px, 1.6vw, 22px); }
/* 标题上方的短红条 —— 默认靠右对齐（文字在右的卡片）
   镜像卡片（文字在左）改用左对齐，见下方 .is-flip 覆盖规则 */
.series-panel-bar {
  display: block;
  width: clamp(56px, 6vw, 84px);
  height: 6px;
  border-radius: 1px;
  background: var(--red);
  margin: 0 0 clamp(12px, 1.4vw, 18px) auto;
}
/* 镜像卡片：红条与标题一起改为左对齐，与左对齐的正文左边缘对齐 */
.series-panel.is-flip .series-panel-bar { margin: 0 0 clamp(12px, 1.4vw, 18px) 0; }
.series-panel-head h3 {
  font-size: clamp(19px, 1.7vw, 26px);
  font-weight: 600;
  color: #EAF1F5;
  text-align: right;
  line-height: 1.25;
}
.series-panel.is-flip .series-panel-head h3 { text-align: left; }
/* 描述段落。此前用 #9FB0BC（偏暗偏蓝），与同卡片内
   sp-label / sp-line em 的纯白 #FFFFFF 不一致，整块文字在深色卡片上
   明显"发灰、显小、像次要信息"。改为与下方说明文字同色同号，
   仅保留略大的字号以承担段落角色。 */
.series-panel-desc {
  color: #FFFFFF;
  font-size: clamp(12px, .92vw, 14px);
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 clamp(18px, 2vw, 28px);
}

.series-panel-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px) clamp(20px, 2.2vw, 34px);
}
.series-panel-list li { display: block; min-width: 0; }
/* 加粗小标题独占一行 */
.series-panel-list .sp-label {
  display: block;
  color: #FFFFFF;
  font-size: clamp(12px, .95vw, 14px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 7px;
}
/* 3 项内容时，最后一项会独占第二行的左半列。
   像 "Lower Degradation over 30 Years" 这样的长标题在半宽列里必然折成两行，
   这里让"落单的最后一项"跨满整行，标题即可稳定保持单行。 */
.series-panel-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* 标题占满整行，但说明文字仍要按上方两列的宽度换行，
   否则会被拉成一整行长句，与上面两条的行宽不一致。
   列宽 = (100% - gap) / 2 = 50% - gap/2，gap 为 clamp(20px,2.2vw,34px)。 */
.series-panel-list li:last-child:nth-child(odd) .sp-line {
  max-width: calc(50% - clamp(10px, 1.1vw, 17px));
}
/* ## 图标 + 说明文字同行（对齐参考图：## 与描述文字齐平，不与小标题齐平） */
.series-panel-list .sp-line { display: flex; gap: 9px; align-items: flex-start; }
.series-panel-list .sp-mark {
  flex-shrink: 0;
  width: clamp(13px, 1.15vw, 17px);
  display: block;
  margin-top: 3px;
}
.series-panel-list .sp-mark img { width: 100%; height: auto; display: block; }
.series-panel-list em {
  display: block;
  font-style: normal;
  color: #FFFFFF;
  font-size: clamp(11px, .85vw, 13px);
  line-height: 1.55;
  min-width: 0;
}

/* ---- Project Portfolio：纯黑底 + 红色大标题 + 斜角四边形堆叠 ---- */
.portfolio {
  /* 参考图要求这一区是纯黑。但页面底色是 --bg (#0C0C0E)，
     直接写 background:#000 会在两区交界形成一条硬边界（实测 y=3088 处
     亮度从 12.2 突降到 0，肉眼可见明显分层）。
     解法：顶部留一段渐变，从页面底色平滑过渡到纯黑，
     下方保持纯黑 —— 既满足"背景够黑"，又没有色差断层。 */
  background: linear-gradient(180deg, #0C0C0E 0%, #000 260px);
  background-color: #000;
}
.portfolio.section { padding: clamp(72px, 8vw, 118px) 0 clamp(84px, 9vw, 132px); }
.portfolio .section-title {
  color: var(--red);
  font-size: clamp(38px, 4.8vw, 66px);
  font-weight: 800;
  letter-spacing: -.01em;
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 74px);
}

/* 堆叠：三张等宽卡片互相叠压。
   改用 flex 而非 grid —— grid 的 1fr 列会被负 margin 挤压成
   不同宽度（实测 354/524/514px），导致卡片大小不一、标签被切。
   flex + flex-basis 固定基准宽，三张卡始终等宽。 */
.portfolio-strip {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 clamp(4px, 1vw, 16px);
}
.portfolio-desc {
  max-width: 660px;
  margin: clamp(28px, 4vw, 56px) auto 0;
  color: #FFFFFF;
  font-size: 13px;
  line-height: 1.85;
  letter-spacing: -.01em;
}
.pf-card {
  position: relative;
  margin: 0;
  /* 卡宽加大到接近参考图占比（参考图 卡宽/总宽 ≈ 34%） */
  flex: 0 0 clamp(340px, 41%, 540px);
  min-width: 0;
  /* 入场动画：与前几页同一套 .rv 机制。
     只用 opacity（不碰 transform），因为叠压次序依赖 z-index:2/3，
     且 is-mid/is-right 上没有 transform，改动风险最小。 */
  opacity: 0;
  transform: translateY(38px);
  transition:
    opacity .85s cubic-bezier(.22,.61,.36,1),
    transform .85s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--pf-delay, 0ms);
  will-change: opacity, transform;
}
.pf-card.pf-in { opacity: 1; transform: translateY(0); }
/* 窄屏降级时卡片已改为纵向排列，动画方向保持一致即可 */
@media (prefers-reduced-motion: reduce) {
  .pf-card { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* 互相堆叠：负 margin 让后一张压住前一张。
   三张卡保持同一水平线（不做 translateY 阶梯），
   只靠 z-index 决定谁压谁，形成平面的层叠关系。
   重叠量约卡宽 18%，形成参考图那种明显的叠压感。
   用 flex-basis 固定基准宽 —— 重叠不会改变卡片自身宽度
   （grid 的 1fr 会被负 margin 挤成不等宽，已避免）。 */
.pf-card.is-mid {
  margin-left: clamp(-116px, -8.4vw, -54px);
  z-index: 2;
}
.pf-card.is-right {
  margin-left: clamp(-116px, -8.4vw, -54px);
  z-index: 3;
}

/* 斜切外框：卡片左右边向右下倾斜，四角为真圆角。
   参数 SLANT=16%（斜切量相对卡宽）、RADIUS=14%（圆角），
   由 .workbuddy/work/gen_slant_clip3.py 生成。

   注意：早期版本用 `d = R / |u.x|` 算沿边退让量，斜边 u.x≈0.196 时
   退让被放大到 5R，单个角吃掉 65% 边长，圆角退化成尖角。
   现改为标准几何公式 t = R / tan(φ/2)（实测退让 11.9%），圆角才圆润。

   纯 clip-path 只有尖角、纯 border-radius 没有斜边，
   故用 28 点二次贝塞尔多边形拟合「斜边 + 圆角」。
   用 clip-path 而非 rotate/skew：照片内容保持水平正立，只有轮廓被斜切。

   ⚠️ 斜切轮廓放在 .pf-card-clip（外层），.pf-card-frame 只负责 overflow:hidden。
   若把 overflow:hidden 和 clip-path 放在同一元素上，Chrome 会先用 overflow
   建立矩形裁剪，把 clip-path 的圆角斜边压成直角 —— 悬浮放大时尤其明显
   （图片超出边框、轮廓变方）。两层分工后各司其职，互不干扰。 */
.pf-card-clip {
  display: block;
  position: relative;
  clip-path: polygon(
    14.11% 11.79%, 15.02% 8.19%, 16.49% 5.24%, 18.51% 2.95%,
    21.10% 1.31%, 24.24% 0.33%, 27.94% 0.00%, 83.58% 0.00%,
    88.53% 0.45%, 92.41% 1.80%, 95.25% 4.05%, 97.02% 7.21%,
    97.74% 11.26%, 97.41% 16.21%, 85.89% 88.21%, 84.98% 91.81%,
    83.51% 94.76%, 81.49% 97.05%, 78.90% 98.69%, 75.76% 99.67%,
    72.06% 100.00%, 16.42% 100.00%, 11.47% 99.55%, 7.59% 98.20%,
    4.75% 95.95%, 2.98% 92.79%, 2.26% 88.74%, 2.59% 83.79%
  );
}
.pf-card-frame {
  display: block;
  position: relative;
  overflow: hidden;
  background: #0A0A0C;
}

.pf-card-frame img {
  display: block;
  width: 100%;
  height: auto;
  /* 参考图卡片接近方形（宽:高 ≈ 400:404），比常规 4:3 更方正 */
  aspect-ratio: 1 / 1.02;
  object-fit: cover;
  filter: brightness(1.03) contrast(1.04);
  /* 悬浮：缓慢放大 + 提亮。用 overflow:hidden 裁在斜切框内，
     移出 transform 避免与 .pf-card 的 translateY 叠加重叠。 */
  transition: transform .85s cubic-bezier(.22,.61,.36,1), filter .45s ease;
}

/* ---- 悬浮特效：图片推近 + 提亮 + 红色外发光 ----
   外发光挂在 .pf-card-clip 上：clip-path 斜切之后，
   filter:drop-shadow 会沿真实轮廓（含圆角斜边）生成光晕，
   而普通 box-shadow 会被 clip-path 裁掉、在斜角处失效。 */
.pf-card-clip {
  transition: filter .5s ease;
}
.pf-card:hover .pf-card-clip {
  filter: drop-shadow(0 22px 42px rgba(224, 36, 24, .30))
          drop-shadow(0 10px 22px rgba(0, 0, 0, .55));
}
.pf-card:hover .pf-card-frame img {
  transform: scale(1.07);
  filter: brightness(1.12) contrast(1.08) saturate(1.06);
}
/* 悬浮时标签略微提亮，呼应图片变化 */
.pf-card:hover .pf-card-label {
  background: rgba(8, 8, 10, .22);
  border-color: rgba(255, 255, 255, .55);
}

/* 图上标签：深色半透明胶囊，贴在图片底部。
   透明度按参考图调高 —— 底色明显透出照片内容，仅轻微压暗，
   胶囊轮廓靠白色描边区分。
   left 用 50% 居中：卡片已改为 flex 等宽，斜切由 clip-path 内部处理，
   标签不再需要偏移补偿。z-index 提到 10，确保始终在叠压卡片之上可见。 */
.pf-card-label {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 2.8vw, 40px);
  transform: translateX(-50%);
  z-index: 10;
  max-width: 70%;
  padding: clamp(6px, .7vw, 10px) clamp(16px, 1.8vw, 28px);
  border-radius: 999px;
  background: rgba(8, 8, 10, .3);
  backdrop-filter: blur(3px) saturate(115%);
  -webkit-backdrop-filter: blur(3px) saturate(115%);
  border: 1px solid rgba(255, 255, 255, .4);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .3);
  color: #FFFFFF;
  font-family: var(--font-head);
  font-size: clamp(13px, 1.1vw, 17px);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: .01em;
  text-align: center;
  text-wrap: balance;
  white-space: normal;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}

/* ============ SUSTAINABILITY ============ */
/* ESG 区块：无卡片面板版，按设计稿（1287×851）实测复刻：
   每列 = 红条 32×10(#D72403) → 白标题 30px → 方图(圆角14, 342:338)
        → 红条 → 白正文 16px；全部直铺在纯黑背景上。
   纵向节奏（ink 实测）：红条底→标题顶 22px；标题底→图顶 59px；
   图底→红条 66px；红条底→正文顶 19px。margin 值已按行高盒模型换算。 */
.sust-esg {
  position: relative;
  padding-top: 0; margin-top: -60px;
  /* 背景透明：透出 body.page-sust 的整页背景图 */
  background: transparent;
}
/* 底部渐隐入 footer 纯黑，避免 fixed 背景在区块末端被截断出硬边 */
.sust-esg::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 200px;
  background: linear-gradient(180deg, transparent, #000);
  pointer-events: none;
  z-index: 0;   /* 渐隐只压背景，不压正文（正文在 .container z:1 之上层） */
}
.sust-esg .container { position: relative; z-index: 1; }
  /* hero 自带 padding-bottom 84px，设计稿正文→红条净距 51px：84-33=51 */
.esg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; margin-top: 0; }
.esg-card { background: none; border: none; border-radius: 0; overflow: visible;
  transition: transform .38s cubic-bezier(.22,.61,.36,1); }
/* .rv 自带 white-space:normal / text-wrap:balance / text-shadow，会冲掉
   esg p 的 pre-line 逐行断行 —— 覆写回默认（换行保护，配合 site.js 的 .esg-card 入场规则） */
.esg-card.rv { text-wrap: initial; text-shadow: none; }
.esg-card.rv.rv-in:hover,
.esg-card:hover { transform: translateY(-6px); }
.esg-media { margin-top: 50px; border-radius: 14px; overflow: hidden;
  transition: box-shadow .38s ease; }
.esg-card:hover .esg-media { box-shadow: 0 0 0 2px rgba(224,36,24,.6), 0 0 44px rgba(224,36,24,.35); }
.esg-tick { display: block; width: 32px; height: 10px; background: #D72403; }
.esg-card h3 { color: #fff; font-size: 30px; font-weight: 700; line-height: 1.2; margin: 18px 0 0; }
.esg-card img { width: 100%; aspect-ratio: 342/338; object-fit: cover; border-radius: 14px; display: block;
  transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .4s ease; }
.esg-card:hover img { transform: scale(1.05); filter: brightness(1.08) contrast(1.04); }
.esg-card .esg-tick { margin-top: 66px; }
.esg-card p { color: #fff; font-size: 14.1px; line-height: 1.9; margin: 9px 0 0; white-space: pre-line; } /* 全站正文标准 */
  /* DB 文案中的 \n 渲染为换行（Environment 按设计稿逐行断行；其余卡片自然流动） */

/* ============ DOWNLOADS ============ */
/* 顶部区按参考稿：背景 = solutions 2.png（1920×252 角部光晕条）拉伸铺满区块；
   红色居中大标题（比例法：字号/视口 ≈ 0.041，1920 下 ~80px）+ 居中灰 intro。
   2026-10-09 晚：该背景移交给 Contact Us 页，downloads 背景恢复纯黑 #000000 */
.dl-hero { background: #000000; }
.dl-hero .section-title { color: var(--red); text-align: center; font-size: clamp(40px, 4.15vw, 80px); margin-bottom: 50px; }
.dl-intro { font-size: 14.1px; line-height: 1.9; max-width: 760px; margin: 0; text-align: left; } /* 左对齐+加宽：左缘与 Company Profile 标题/卡片图片对齐（颜色走文末全站正文标准） */
/* 按参考稿（1620 宽截图，比例法实测）：
   分类标题 = 红色大标题（字号≈容器内容宽×0.036，1920 下 ~52px）+ 2px 红条全宽；
   条目 = 竖排（封面 ≈ 内容宽×0.18 ≈ 197px，圆角，文件名在下），无卡片面板、无按钮；
   分类块间距 ≈ 内容宽×0.142 ≈ 155px。 */
.dl-cat { margin-bottom: 150px; }
.dl-cat:last-child { margin-bottom: 0; }
.dl-cat h2 {
  color: var(--red); font-size: clamp(34px, 2.75vw, 52px); font-weight: 700; line-height: 1.15;
  margin-bottom: 0; padding-bottom: 18px; border-bottom: 2px solid rgba(224,36,24,.85);
}
.dl-grid { display: grid; grid-template-columns: 1fr; gap: 44px; margin-top: 24px; }
.dl-card { background: none; border: none; padding: 0; }
.dl-item { display: block; width: fit-content; text-decoration: none; }
.dl-cover { width: 197px; border-radius: 10px; overflow: hidden;
  /* 悬浮红细边：outline 画在图片外缘（offset 2px 留缝），跟随圆角；
     画在 .dl-cover 上（box-shadow 会被自身 overflow 裁剪，outline 不会） */
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color .3s ease; }
.dl-card:hover .dl-cover { outline-color: var(--red); }
.dl-cover img { width: 100%; aspect-ratio: 262/153; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .4s ease; }
.dl-card:hover .dl-cover img { transform: scale(1.05); filter: brightness(1.08); }
.dl-item h3 { color: #fff; font-size: 15px; font-weight: 500; margin: 18px 0 0; overflow-wrap: break-word; transition: color .25s; }
.dl-card:hover .dl-item h3 { color: var(--red); }
.dl-empty { color: var(--muted-2); font-size: 14px; padding: 8px 0; }

/* ============ CONTACT ============ */
/* 按参考稿（1521 视口 1:1 实测）：背景 = dl-bg.png 拉伸铺满区块；
   无表单面板（字段直铺背景上）、标签红色、输入框白底、红色胶囊 Submit；
   标题红色居中大字（~78px@1521）；intro 16px/640px 居中，3 行断行与参考稿一致 */
.contact-hero { background: #000 url('/img/dl-bg.png') no-repeat center top / 100% 100%; }
.contact-wrap { max-width: var(--container); margin: 0 auto; text-align: center; }
.contact-wrap .section-title { color: var(--red); font-size: clamp(40px, 5.1vw, 80px); margin-bottom: 24px; }
.contact-wrap > p { color: var(--muted); font-size: 16px; line-height: 1.75; max-width: 600px; margin: 0 auto 46px; }
.form-card { background: none; border: none; border-radius: 0; padding: 0; text-align: left; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 26px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 15px; color: var(--red); font-weight: 700; }
.form-field label .req { color: var(--red); }
.form-field input, .form-field textarea {
  background: #FFFFFF; border: none; border-radius: 6px;
  color: #333; font-family: var(--font-body); font-size: 15px;
  padding: 14px 16px; outline: none; width: 100%;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: #9B9B9B; }
/* Focus 态：红圈 + 外圈淡红光晕（设计稿 Focus） */
.form-field input:focus, .form-field textarea:focus {
  box-shadow: 0 0 0 2px var(--red), 0 0 0 6px rgba(224,36,24,.16);
}
.phone-group:focus-within .phone-prefix { box-shadow: 0 0 0 2px var(--red), 0 0 0 6px rgba(224,36,24,.16); }
.phone-group:focus-within input[name=phone] { margin-left: 5px; }
/* Error 态：仅红圈，无光晕（设计稿 Error） */
.form-field.has-error input, .form-field.has-error textarea { box-shadow: 0 0 0 2px var(--red); }
/* 前缀框内层的数字小输入框不参与 Error 红圈（否则红圈紧箍在「+1」上）；
   前缀整体也不圈（设计稿 Error：仅号码框红圈） */
.form-field.has-error .phone-prefix, .form-field.has-error .phone-prefix input { box-shadow: none; }
/* Disable 态：米白底 + 灰字（设计稿 Disable） */
.form-field input:disabled, .form-field textarea:disabled {
  background: #FAF8F2; color: #9B9B9B; box-shadow: none;
}
.form-field textarea { min-height: 130px; resize: vertical; }
/* Error 文案：红色 + 红色三角警示图标（仅在有内容时显示图标） */
.form-field .err { color: #E02418; font-size: 13px; min-height: 16px; display: flex; align-items: center; gap: 7px; }
.form-field .err:not(:empty)::before {
  content: ''; flex-shrink: 0; width: 15px; height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath fill='%23E02418' d='M12 0L0 22h24L12 0z'/%3E%3Crect x='10.8' y='7' width='2.4' height='8' fill='%23fff'/%3E%3Crect x='10.8' y='17' width='2.4' height='2.4' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* 字数计数 0/128：文本域右下角 */
.char-count { text-align: right; color: #9B9B9B; font-size: 12px; margin-top: 5px; }
.phone-group { display: flex; }
.phone-prefix {
  flex: 0 0 60px; width: 60px; padding: 0;
  background: #FFFFFF; border: none; border-right: 1px solid #DDDDDD;
  border-radius: 6px 0 0 6px; color: #333;
  display: flex; align-items: center; font-size: 15px;
}
.phone-plus { color: #666; padding-left: 12px; }
.phone-prefix input {
  width: 34px; background: transparent; border: none; outline: none;
  color: #333; font-family: var(--font-body); font-size: 15px; padding: 0 2px 0 0;
}
.phone-prefix input:focus { box-shadow: none; }
.phone-group input { border-radius: 0 6px 6px 0; }
.captcha-group { display: flex; gap: 14px; align-items: stretch; }
.captcha-group input { flex: 1; }
.captcha-img { height: 49px; border-radius: 6px; cursor: pointer; border: none; background: #f5f5f5; }
.form-submit { text-align: center; margin-top: 8px; }
.form-submit .btn { border-radius: 999px; min-width: 160px; padding: 13px 40px; font-weight: 700; }
.form-note { display: none; text-align: center; margin-top: 18px; font-size: 14px; }
.form-note.ok { display: block; color: #4ADE80; }
.form-note.fail { display: block; color: #FF6B5E; }
/* 提交成功弹框：居中白卡 + 绿色对勾描画动画，约 2.2s 后自动刷新 */
.success-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.66); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  animation: smFade .3s ease;
}
@keyframes smFade { from { opacity: 0; } to { opacity: 1; } }
.success-modal-card {
  background: #FFFFFF; border-radius: 16px; text-align: center;
  padding: 44px 56px 36px; max-width: 420px; width: calc(100% - 48px);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  animation: smPop .38s cubic-bezier(.22,.61,.36,1);
}
@keyframes smPop { from { transform: translateY(16px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.success-modal-card svg { width: 64px; height: 64px; display: block; margin: 0 auto 14px; }
.success-modal-card svg circle { stroke: #22C55E; stroke-width: 3; stroke-dasharray: 158; stroke-dashoffset: 158; animation: smCircle .5s .1s ease forwards; }
.success-modal-card svg path { stroke: #22C55E; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; animation: smCircle .35s .55s ease forwards; }
@keyframes smCircle { to { stroke-dashoffset: 0; } }
.success-modal-card h3 { color: #1A1A1A; font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.success-modal-card p { color: #666; font-size: 15px; line-height: 1.6; }

/* ============ FOOTER ============ */
.footer { background: #000000; position: relative; }
/* footer 顶部红色装饰条 —— 已按需求移除 */
.footer::before { display: none; }
/* 参考稿实测：内容区宽 1212（1260 含内边距），左缘 235 / 右缘 1447 @1677 视口 */
.footer .container { max-width: 1260px; }
.footer-top { display: grid; grid-template-columns: 1fr auto; gap: 60px; padding: 66px 0 46px; }
.footer-slogan { font-family: var(--font-head); font-weight: 600; font-size: 21px; line-height: 29px; color: var(--red); }
.footer-contacts { display: flex; flex-direction: column; gap: 14px; }
.footer-contact { display: flex; align-items: center; gap: 9px; color: #E6E6EA; font-size: 16px; line-height: 20px; }
.footer-contact .ic {
  width: auto; height: auto; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  /* 圆框与红色背景已移除（用户要求） */
}
.footer-contact .ic svg { width: 17px; height: 17px; }
.footer-contact .ic img { width: 14px; height: 14px; object-fit: contain; display: block; }
/* 网址 / 邮箱为可点击链接：外观与普通文字一致，悬停变品牌红 */
.footer-contact a { color: inherit; text-decoration: none; transition: color .25s; }
.footer-contact a:hover { color: var(--red); }
/* 社交图标：34px 图标、gap 20。20261019g：图标行右移 12px（用户反馈），与 logo 左缘错开；
   移动端堆叠布局仍复位为与 logo 左对齐。历史：20261019a 37px→30px，c 放大 34px，
   d 右移 8px，e 居中（弃用），f 左对齐，g 右移 12px */
.footer-socials { display: flex; gap: 20px; margin-top: 7px; margin-left: 12px; align-self: flex-start; }
.footer-socials a {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; color: #fff; transition: color .25s;
}
.footer-socials a:hover { color: var(--red); }
.footer-socials svg { width: 100%; height: 100%; }
.footer-socials img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 右列顶部对齐（与 slogan 同高起始），logo 右缘贴容器右缘；图标行与 logo 间距 43px */
/* 20261019b：整体左移 24px（用户反馈 logo+社交图标整体往左挪一点点），不再贴右缘 */
.footer-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 43px; margin-right: 24px; }
.footer-logo { display: flex; justify-content: flex-end; align-items: flex-start; }
.footer-logo img { width: 285px; height: auto; opacity: .95; }  /* 20261019b 由 305px 再缩至 285px（初版由 349px 缩小） */
.footer-bottom { border-top: 1px solid rgba(255,255,255,.05); padding: 20px 0 26px; text-align: center; color: var(--muted-2); font-size: 13px; }

/* ============ 404 ============ */
.nf { min-height: 50vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .nav-links { gap: 26px; }
  .nav-links a { font-size: 14px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 24px; }
  .alu-features-grid { grid-template-columns: repeat(2, 1fr); }
  .alu-features { margin-top: 0; } /* 移动端 hero 单列堆叠，不适用负边距上提 */
  .alu-hero-inner { grid-template-columns: 1fr; gap: 24px; align-items: end; }
  .alu-hero-stat { right: 0; bottom: 0; }
  .pv-stat { margin-right: 0; margin-left: 0; } /* 移动端单列，取消负边距避免溢出屏幕 */
  .pv-media { width: 100%; }
  .pv-stat { margin-right: 0; } /* 移动端单列，取消负边距避免溢出屏幕 */

  /* ---- 移动端 Capabilities 紧凑布局（对齐桌面观感）----
     图片改为文档流内自适应高度，删除桌面端的绝对定位/固定 520px 媒体盒，
     消除 hero 内外的大片黑空隙；5GW 与 PC 端同款遮罩：数字在图片下层，
     上缘被图片盖住，下缘露出在黑底上。 */
  .alu-hero-inner { min-height: 0; padding-block: clamp(28px, 7vw, 44px) 0; }
  .alu-hero-media { min-height: 0; height: auto; margin-bottom: 50px; background: transparent; /* 移动端透出下层 5GW，金属遮住上缘 */ }
  .alu-hero-img { position: relative; z-index: 2; top: auto; right: auto; width: 100%; height: auto; margin: 0; }
  .alu-hero-stat { right: 12px; bottom: -10px; z-index: 1; } /* 数字上半探入金属本体后方被遮住 */
  .alu-hero-text.rv.rv-in { transform: none; } /* 移动端取消桌面端的居中上提位移 */
  .alu-feature p { font-size: 12px; line-height: 1.7; }
  .pv-section { padding-top: 36px; padding-bottom: 28px; } /* 20261019t 底部 56→28，移动端与 trace 间距收紧 */
  .section.pv-section { padding-bottom: 28px; }            /* 双类提优先级：防止被 ≤768 的 .section 覆盖 */
  .section.trace { padding-top: 16px; }                    /* 20261019t 移动端顶部 24→16 */
  .pv-grid { gap: 28px; }

  /* 2GW 与 PC 端同款遮罩：图片缩小左置，2GW 右侧叠压——图片(z2)遮住数字左缘 */
  .pv-media { width: 66%; justify-self: start; }
  .pv-stat {
    justify-self: end;
    margin-top: -190px;
    margin-right: 6px;
    margin-left: 0;
    z-index: 1; /* 在图片下层 */
  }
  .sol-features-grid { grid-template-columns: repeat(2, 1fr); }
  .esg-grid, .recognition-grid { grid-template-columns: repeat(2, 1fr); }
  .about-intro-grid, .pv-grid, .quality-cols { grid-template-columns: 1fr; gap: 40px; }
  .map-labels { flex-direction: column; align-items: flex-start; gap: 40px; }
  /* Product Series 大卡片：窄屏改为上下堆叠，取消左右镜像 */
  .series-panel, .series-panel.is-flip { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 32px); }
  .series-panel.is-flip .series-panel-media, .series-panel.is-flip .series-panel-body { order: initial; }
  /* 单列时必须解除桌面端的显式 grid 定位。
     桌面端为了让标题占满整行、媒体与文字并排，给子元素写了
     `grid-row: 2`（为标题 grid-row:1 让位）和 media/body 的 order。
     切到单列后若不归零，会出现两种故障：
       ① 有标题的卡片（如第 1 张）：三者挤在同一行互相压盖；
       ② 无标题的卡片（第 2/3 张，标题仅在 i===0 时渲染）：
          media 与 body 同处第 2 行第 1 列，轨道被内容挤成
          `0px 262px` —— media 尺寸为 0 → IntersectionObserver
          判定不可见 → 动画永不触发 → 卡片永久停在 opacity:0，窄屏彻底不显示。
     所以这里把 grid 定位与 order 一并归零，让子元素按文档顺序自然堆叠。 */
  .series-panel.is-flip .series-panel-media, .series-panel.is-flip .series-panel-body { order: initial; }
  /* 关键：桌面端用的是 `.series-panel:not(.is-flip) .series-panel-media`（特异度 0,2,0）
     和 `.series-panel.is-flip .series-panel-media`（0,2,0），
     比裸类名 `.series-panel-media`（0,1,0）**更高**。
     所以这里必须用同等特异度的选择器覆盖，否则 grid-row:2 依然生效。
     用 `:where()` 可以零特异度，但为了可读性这里直接对齐桌面端的选择器。 */
  .series-panel:not(.is-flip) .series-panel-media,
  .series-panel:not(.is-flip) .series-panel-body,
  .series-panel.is-flip .series-panel-media,
  .series-panel.is-flip .series-panel-body {
    grid-row: auto;
    grid-column: auto;
  }
  .series-panel-title { grid-column: 1 / -1; grid-row: auto; }
  .series-panel-media { width: 100%; }
  .series-panel-media img { max-width: min(300px, 62vw); max-height: 46vw; }
  .series-panel-list { grid-template-columns: 1fr; }
  /* 单列后不存在"落单项"，跨列规则必须解除，否则 li 会被推到独立的行/列 */
  .series-panel-list li:last-child:nth-child(odd) { grid-column: auto; }
  .series-panel-list li:last-child:nth-child(odd) .sp-line { max-width: none; }
  /* 窄屏标题字号收敛，并给顶部留出安全高度，避免被固定导航栏遮住 */
  .series-panel-title { font-size: clamp(26px, 7vw, 40px); margin-bottom: clamp(6px, 1.4vw, 12px); }
  .series-panel { padding-top: clamp(52px, 9vw, 72px); }
  /* 桌面端的负边距/位移在窄屏会把容器压窄导致文字溢出 —— 窄屏全部归零 */
  .pv-info { margin-left: 0; transform: none; display: block; }
  .alu-hero-text { padding-right: 0; }
  .alu-hero-inner, .pv-grid { min-width: 0; }
  /* 桌面端是 1fr 1.55fr 双列，minmax(0,...) 让两列都能被压到极窄，
     文字区只剩约 130px 导致 h1 溢出。窄屏必须真正切单列并给文字区完整宽度。 */
  .alu-hero-inner { grid-template-columns: 1fr; }
  .alu-hero-text { grid-column: 1 / -1; width: 100%; }
  .alu-hero-text, .pv-info { min-width: 0; max-width: 100%; }
  .pv-media img { max-width: 100%; } /* 移动端恢复自适应，避免原始尺寸溢出屏幕 */
  .alu-hero h1, .pv-info h2 { overflow-wrap: break-word; word-break: break-word; }
  .alu-hero-desc, .pv-info p { max-width: 100%; overflow-wrap: break-word; }
  /* 单列时必须解除桌面端的 grid-row 跨行占位，
     否则 warranty / quality-col-left / quality-col-right 三块会叠在同一行，
     行高被最矮的一块决定 → 内容溢出父级 → IntersectionObserver 判定为"不可见"，
     滚动动画永远不触发（cert-wall / iso-row / q-section-head 会卡在 opacity:0）。 */
  .warranty-block, .quality-col-left, .quality-col-right { grid-column: 1; grid-row: auto; }
  .quality-col-left { margin-top: 0; }
  .trace-grid, .trace-desc-grid, .third-grid { grid-template-columns: 1fr; }
  /* 20261019q：单列堆叠时收紧卡片与说明文字、上下卡片之间的间距（用户反馈中间空隙偏大） */
  .trace-grid { row-gap: 18px; }
  .trace-cell { gap: 10px; }
  /* 20261019r→s：窄屏 hero 改大高度（470-640px），素材 cover 取中间构图——
     完整等比显示上限只有 292px（用户反馈太小）；cover 是移动端轮播标准做法 */
  .hero { height: clamp(430px, 120vw, 640px); }
  .iso-row { grid-template-columns: 110px 1fr; }
  /* 移动端必须解除 ISO 前两条的强制单行：nowrap 的 min-content 宽度
     会把 grid 的 1fr 列（minmax(auto,1fr)）撑破容器，
     造成整页横向溢出——所有区块右侧留白消失、出现横向滚动条。 */
  .iso-list { min-width: 0; }
  .iso-list li:nth-child(1) .iso-text,
  .iso-list li:nth-child(2) .iso-text { white-space: normal; }
  .iso-list li:nth-child(3) .iso-text { max-width: none; }
  /* Warranty 移动端保持一行显示（15 | 25 同 PC），仅收紧间距；竖分隔线沿用基础样式 */
  .warranty-row { gap: clamp(18px, 4vw, 28px); }
  .footer-top { grid-template-columns: 1fr; }
  .footer-logo { justify-content: flex-start; }
  .footer-logo img { max-width: 245px; }  /* 20261019b 由 262px 同步缩小（桌面 285/305 比例） */
  .footer-right { align-items: flex-start; justify-content: flex-start; margin-right: 0; }   /* 堆叠布局恢复左对齐，并取消桌面端左移 */
  .footer-socials { margin-top: 0; margin-left: 0; align-self: flex-start; }  /* 堆叠布局：取消居中，与左对齐 logo 平齐 */
  /* Project Portfolio 斜角叠压只适合宽屏。
     窄屏下负边距会把卡片压死、标签互相遮挡，必须退回单列纵向堆叠。
     注意：桌面端已是 flex 布局（不是 grid），这里不能用 grid-template-columns。 */
  .portfolio-strip { flex-direction: column; align-items: stretch; gap: 30px; padding: 0; }
  .pf-card { flex: 0 0 auto; width: 100%; }
  .pf-card.is-mid, .pf-card.is-right { transform: none; margin-left: 0; }
  .pf-card-clip { clip-path: none; }  /* 移动端去斜角 */
  .pf-card-frame { border-radius: 14px; }  /* 普通圆角矩形 */
  .pf-card-label { left: 50%; max-width: 76%; }
}
@media (max-width: 768px) {
  .section { padding: 60px 0; }
  .nav-burger { display: flex; }
  .alu-features-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; } /* 一排显示两个 */
  .alu-features { padding-bottom: 40px; }
  /* 恢复文档流：抽屉菜单 .nav-links 的 absolute 定位需以 .nav 为锚点 */
  .nav-center { position: static; transform: none; }
  .nav-links {
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: rgba(12,12,14,.98); border-bottom: 1px solid var(--line);
    max-height: 0; overflow: hidden; transition: max-height .35s ease;
  }
  .nav.open .nav-links { max-height: 480px; }
  .nav-links a { padding: 15px 24px; width: 100%; }
  .nav-links a.active::after { display: none; }
  .nav-lang { display: none; }
  .why-grid, .trace-grid, .third-grid, .dl-grid, .form-row, .strength-row { grid-template-columns: 1fr; }
  .strength-row.flip .strength-media { order: 0; }
  .esg-grid, .sol-features-grid, .portfolio-strip { grid-template-columns: 1fr; }
  /* Industry Recognition 奖项卡：移动端保持一行两个（与 1024 断点一致），仅收紧间距 */
  .recognition-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .recog-card { padding: 14px 10px 12px; }
  .certs-grid { grid-template-columns: 1fr; }
  .cert-wall { padding: 24px; }
  /* 单列后栅格子项解除 min-width:auto，杜绝任何子内容把列撑出容器 */
  .quality-col-left, .quality-col-right, .quality-cols > * { min-width: 0; max-width: 100%; }
  /* 移动端：直径=视口宽（放大），top 与 PC 同比例 -7.67%——
     圆环顶部被 hero 上缘遮掉一点，与 PC/Figma 观感一致 */
  .about-hero-ring {
    width: 100%;
    height: auto;
    max-width: none;
    top: -7.67%;
  }
  /* 移动端 hero 高度：与圆环最下缘平齐。
     圆环直径=100vw、top=-7.67%×H，底缘 = -0.0767H + 100vw，
     令其等于 H → H = 100vw/1.0767 ≈ 92.9vw，任意屏宽下底缘自动对齐 */
  .page-hero.about-hero { height: 92.9vw; }
  /* form-card 已无面板样式，窄屏无需额外覆盖 */
  /* dl-card 已是竖排封面样式，窄屏无需额外覆盖 */
  .warranty-row { gap: 16px; }
  /* 窄屏下第二个 warranty 的说明文字放宽可用宽度，避免挤压换行过多 */
  .warranty-item:nth-child(3) { max-width: none; flex: 1 1 auto; }
}

/* ============ SCROLL REVEAL ============ */
/* JS adds .rv + direction variant; .rv-in flips state on viewport entry. */
.rv {
  opacity: 0;
  transition:
    opacity .85s cubic-bezier(.22,.61,.36,1),
    transform .85s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--rv-delay, 0ms);
  will-change: opacity, transform;
}
.rv-up    { transform: translateY(38px); }
.rv-left  { transform: translateX(-44px); }
.rv-right { transform: translateX(44px); }
.rv-zoom  { transform: scale(.92) translateY(16px); }
.rv.rv-in { opacity: 1; transform: none; }

/* strength media keeps its shadow intact while sliding in */
.strength-media.rv { transition-property: opacity, transform; }

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

/* ============ 全站正文标准样式 ============
   以 About 页导语为基准统一所有大段正文：
   14.1px / 行高 1.9 / 字距与词距 normal / 颜色 #FFFFFF（原 #D6D6DC，应用户要求全改纯白）。
   只覆盖排版属性，各段落原有的 margin/max-width/白空格设置保留；
   放在文件末尾，等特异度下覆盖上方的页面级定义。 */
.home-about-text p,
.strength-text p,
.alu-hero-desc,
.pv-info p,
.trace-desc,
.sol-hero p,
.series-panel-desc,
.portfolio-desc,
.page-hero p,
.dl-intro,
.contact-wrap > p {
  font-size: 14.1px;
  line-height: 1.9;
  letter-spacing: normal;
  word-spacing: normal;
  color: #FFFFFF;
}