/* ==========================================================================
   Wonderful Alloy — Global Stylesheet
   Guang'an Wonderful New Material Co., Ltd.
   ========================================================================== */

/* --- Design Tokens ------------------------------------------------------- */
:root {
  --brand-orange: #E85D1F;
  --brand-orange-dark: #C94A11;
  --brand-red: #E63012;
  --brand-deep: #1A2332;
  --brand-slate: #4A5568;
  --brand-muted: #718096;
  --brand-light: #F7F8FA;
  --brand-line: #E2E8F0;
  --brand-accent: #FFB690;
  --brand-accent-soft: #FFF3EB;
  --white: #FFFFFF;
  --black: #0F1419;

  /* 导航配色 */
  --color-primary: #00479d;
  --color-secondary: #38BDF8;
  --nav-ink: #2D3A4A;
  --tech-blue: #0052CC;
  --btn-red: #D9383A;

  --font-en: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-zh: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-display: 'Inter', 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif;

  --container: 1240px;
  --container-wide: 1440px;
  --nav-h: 84px;
  --nav-h-scroll: 68px;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.05);
  --shadow: 0 4px 20px rgba(15, 20, 25, 0.08);
  --shadow-lg: 0 24px 48px rgba(15, 20, 25, 0.12);

  --t-fast: 180ms ease;
  --t: 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-slow: 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.65;
  color: var(--brand-deep);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  width: 100%;
  position: relative;
}
html[lang^="zh"] body { font-family: var(--font-zh); }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: transparent; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--brand-orange); }
h1, h2, h3, h4 { margin: 0 0 0.5em; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
p { margin: 0 0 1em; }
ul { padding: 0; margin: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

/* --- Layout Primitives --------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.container-wide { max-width: var(--container-wide); }

.section {
  padding: 96px 0;
  overflow-x: hidden;
}
.section-sm { padding: 64px 0; }
.section-tint { background: var(--brand-light); }
.section-dark {
  background: var(--brand-deep);
  color: var(--white);
}
/* CTA row (en homepage) */
.cta-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--white); }

.section-header {
  text-align: center;
  margin-bottom: 56px;
}
.section-header .eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brand-orange);
  margin-bottom: 12px;
}
.section-header h2 {
  font-size: clamp(28px, 3.4vw, 42px);
  margin: 0 0 12px;
}
.section-header p {
  color: var(--brand-slate);
  max-width: 640px;
  margin: 0 auto;
  font-size: 17px;
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--radius-sm);
  transition: all var(--t);
  border: 1.5px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--brand-orange);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--brand-orange-dark);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(232, 93, 31, 0.32);
}
.btn-outline {
  border-color: var(--brand-line);
  background: transparent;
  color: var(--brand-deep);
}
.btn-outline:hover {
  border-color: var(--brand-orange);
  color: var(--brand-orange);
}
.btn-ghost {
  background: transparent;
  color: var(--brand-orange);
  padding: 8px 0;
}
.btn-ghost:hover { color: var(--brand-orange-dark); gap: 12px; }
.btn .arrow { transition: transform var(--t); }
.btn:hover .arrow { transform: translateX(4px); }

/* --- Header / Nav -------------------------------------------------------- */
/* 首页：透明悬浮在轮播图上；滚动 / hover / 展开子菜单 / 内页 → 白底 */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  background: transparent;
  box-shadow: none;
  transition: background .3s ease, box-shadow .3s ease, padding-bottom .3s ease, backdrop-filter .3s ease, height .3s ease;
}
.site-header:hover,
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.site-header.is-scrolled:not(.is-inner) { position: fixed; }
.site-header.is-scrolled .header-inner { height: var(--nav-h-scroll); }
.site-header.is-scrolled .site-logo img { height: 32px; }

/* 内页：白底 + 深色文字，sticky 吸顶（占文档流，不会因切 fixed 而跳动） */
.site-header.is-inner {
  position: sticky;
  top: 0;
  background: var(--white);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .05);
}
.site-header.is-inner .site-nav > a,
.site-header.is-inner .site-nav > .nav-item > .sub-title > a,
.site-header.is-inner .lang-switch a,
.site-header.is-inner .lang-switch span,
.site-header.is-inner .nav-toggle { color: var(--nav-ink); text-shadow: none; }

/* hover 到含子菜单的项时，撑开底部给下拉留出空间 */
.site-header:has(.site-nav > .nav-item:hover) {
  background: var(--white);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .05);
  padding-bottom: 20px;
}

.site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  transition: height .3s ease;
}

/* Logo：双版叠加，用 visibility 瞬时切换避免淡入淡出闪烁 */
.site-header .site-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  position: relative;
  flex-shrink: 0;
}
.site-header .site-logo img {
  max-height: 48px;
  width: auto;
  display: block;
  transition: none !important;
}
.site-header .site-logo .logo-solid {
  visibility: hidden;
  position: absolute; top: 50%; left: 0;
  transform: translateY(-50%);
  pointer-events: none;
}
.site-header .site-logo .logo-transparent {
  visibility: visible;
  position: relative;
  pointer-events: none;
}
.site-header.is-scrolled .site-logo .logo-transparent,
.site-header.is-inner .site-logo .logo-transparent,
.site-header:hover .site-logo .logo-transparent,
.site-header:has(.site-nav > .nav-item:hover) .site-logo .logo-transparent {
  visibility: hidden;
  position: absolute; top: 50%; left: 0;
  transform: translateY(-50%);
}
.site-header.is-scrolled .site-logo .logo-solid,
.site-header.is-inner .site-logo .logo-solid,
.site-header:hover .site-logo .logo-solid,
.site-header:has(.site-nav > .nav-item:hover) .site-logo .logo-solid {
  visibility: visible;
  position: relative; top: auto;
  transform: none;
}

.site-header .site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
}

/* 顶级项：无子菜单的 <a>，或含子菜单的 .nav-item > .sub-title > a */
.site-header .site-nav > a,
.site-header .site-nav > .nav-item > .sub-title > a {
  font-size: 18px;
  color: var(--white);
  text-decoration: none;
  line-height: var(--nav-h);
  position: relative;
  display: block;
  white-space: nowrap;
  transition: color .3s;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}
.site-header.is-scrolled .site-nav > a,
.site-header.is-scrolled .site-nav > .nav-item > .sub-title > a { line-height: var(--nav-h-scroll); }

.site-header .site-nav > a:hover,
.site-header .site-nav > .nav-item:hover > .sub-title > a { color: #8fcbff; }

/* 白底态：文字转深灰蓝 */
.site-header.is-scrolled .site-nav > a,
.site-header.is-scrolled .site-nav > .nav-item > .sub-title > a,
.site-header:hover .site-nav > a,
.site-header:hover .site-nav > .nav-item > .sub-title > a,
.site-header:has(.site-nav > .nav-item:hover) .site-nav > a,
.site-header:has(.site-nav > .nav-item:hover) .site-nav > .nav-item > .sub-title > a {
  color: var(--nav-ink);
  text-shadow: none;
}
.site-header.is-scrolled .site-nav > a:hover,
.site-header.is-inner .site-nav > a:hover,
.site-header:hover .site-nav > a:hover,
.site-header.is-scrolled .site-nav > .nav-item:hover > .sub-title > a,
.site-header.is-inner .site-nav > .nav-item:hover > .sub-title > a,
.site-header:hover .site-nav > .nav-item:hover > .sub-title > a { color: var(--tech-blue); }

/* 顶部指示条 */
.site-header .site-nav > a::after,
.site-header .site-nav > .nav-item > .sub-title > a::after {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 0; height: 2px;
  background: var(--tech-blue);
  box-shadow: 0 0 8px rgba(0, 82, 204, .55);
  transform: translateX(-50%);
  transition: all .3s;
}
.site-header .site-nav > a:hover::after,
.site-header .site-nav > a.active::after,
.site-header .site-nav > .nav-item:hover > .sub-title > a::after,
.site-header .site-nav > .nav-item > .sub-title > a.active::after { width: 100%; }

/* 下拉 */
.site-header .site-nav > .nav-item { position: relative; }
.site-header .site-nav .sub-nav {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  min-width: 160px;
  padding: 8px 0;
  background: var(--white);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition: all .25s ease;
  text-align: center;
  z-index: 10;
}
.site-header .site-nav > .nav-item:hover .sub-nav { opacity: 1; visibility: visible; }
.site-header .site-nav .sub-nav-item {
  display: block;
  padding: 8px 20px;
  color: #666;
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  transition: color .2s;
}
.site-header .site-nav .sub-nav-item:hover { color: var(--color-primary); }

.site-header .site-tools {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: 32px;
  flex-shrink: 0;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--white);
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}
.lang-switch a { color: inherit; text-decoration: none; }
.lang-switch a.is-active { font-weight: 700; }
.lang-switch span { opacity: .5; }
.site-header.is-scrolled .lang-switch,
.site-header:hover .lang-switch,
.site-header:has(.site-nav > .nav-item:hover) .lang-switch { color: var(--nav-ink); text-shadow: none; }
.site-header.is-scrolled .lang-switch a.is-active,
.site-header.is-inner .lang-switch a.is-active,
.site-header:hover .lang-switch a.is-active { color: var(--color-primary); }

/* 移动端汉堡按钮 */
.site-header .nav-toggle {
  display: none;
  color: var(--white);
  cursor: pointer;
  margin-right: 10px;
  transition: color .3s;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .25);
}
.site-header .nav-toggle-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 20px; height: 20px;
}
.site-header .nav-toggle-icon span { display: block; height: 2px; background: currentColor; border-radius: 1px; }
.site-header.is-scrolled .nav-toggle,
.site-header:hover .nav-toggle,
.site-header:has(.site-nav > .nav-item:hover) .nav-toggle { color: var(--nav-ink); text-shadow: none; }

.site-header .mobile-nav-header { display: none; }
.mobile-nav-backdrop { display: none; }
/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  max-height: 780px;
  overflow: hidden;
  color: var(--white);
}
.hero-slides {
  position: absolute;
  inset: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1);
  transition: opacity 1.2s ease;
}
.hero-slide.is-active {
  opacity: 1;
  animation: heroKenburns 8s ease-out forwards;
}
@keyframes heroKenburns {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}
/* 蒙版：让白色文字在轮播图上清晰可读 */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5,15,40,.18) 0%, rgba(5,15,40,.06) 42%, transparent 62%, transparent 78%);
}
.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
  color: var(--white);
}
.hero-content-slide {
  position: absolute;
  left: 20px;
  right: 20px;
  max-width: 760px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .5s ease;
}
.hero-content-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* 文字逐条上浮入场 */
.hero-content-slide > * {
  opacity: 0;
  transform: translateY(46px) scale(0.96);
}
.hero-content-slide.is-active > * {
  animation: heroContentFadeUp 850ms cubic-bezier(.2,.8,.2,1) forwards;
}
.hero-content-slide.is-active > *:nth-child(1) { animation-delay: 250ms; }
.hero-content-slide.is-active > *:nth-child(2) { animation-delay: 430ms; }
.hero-content-slide.is-active > *:nth-child(3) { animation-delay: 610ms; }
.hero-content-slide.is-active > *:nth-child(4) { animation-delay: 790ms; }
@keyframes heroContentFadeUp {
  from { opacity: 0; transform: translateY(46px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.hero-tag {
  display: inline-block;
  padding: 6px 16px;
  margin: 0 0 22px;
  background: linear-gradient(90deg, rgba(0,71,157,.88), rgba(56,189,248,.75));
  color: var(--white);
  font-size: 13px;
  letter-spacing: 3px;
  border-radius: 999px;
}
.hero-content h1 {
  font-size: clamp(24px, 4.5vw, 50px);
  line-height: 1.24;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin: 0 0 20px;
  color: var(--white);
  white-space: nowrap;
  text-shadow: 0 2px 20px rgba(0,0,0,.35);
}
.hero-sub {
  font-size: clamp(14px, 1.8vw, 17px);
  color: rgba(255,255,255,.88);
  font-weight: 500;
  line-height: 1.7;
  margin: 0 0 32px;
  text-shadow: 0 1px 12px rgba(0,0,0,.25);
}
.hero-actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
/* 高端科技暗红实底 + 纯白文字 */
.hero-actions .btn-classic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 32px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  color: var(--white);
  background: var(--btn-red);
  border: 1.5px solid transparent;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(217, 56, 58, .28);
  transition: all 300ms cubic-bezier(.22,1,.36,1);
  text-decoration: none;
  cursor: pointer;
}
.hero-actions .btn-classic .arrow {
  display: inline-block;
  transition: transform 300ms cubic-bezier(.22,1,.36,1);
}
.hero-actions .btn-classic:hover {
  color: var(--white);
  background: #c22e30;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(217, 56, 58, .4);
}
.hero-actions .btn-classic:hover .arrow { transform: translateX(4px); }
.hero-actions .btn-classic.is-ghost {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.5);
  box-shadow: none;
}
.hero-actions .btn-classic.is-ghost:hover {
  background: rgba(255,255,255,.24);
  border-color: var(--white);
  box-shadow: none;
}
.hero-dots {
  position: absolute;
  bottom: 40px; left: 0; right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.hero-dot {
  width: 32px; height: 4px;
  background: rgba(45,58,74,.28);
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 2px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}
.hero-dot.is-active { width: 46px; }
.hero-dot.is-active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  box-shadow: 0 0 8px rgba(56, 189, 248, .6);
  transform-origin: left;
  animation: dotProgress 6s linear forwards;
}
@keyframes dotProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* --- Stats Bar ----------------------------------------------------------- */
.stats {
  padding: 48px 0;
  background: var(--brand-light);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.stat {
  text-align: center;
  padding: 24px 12px 20px;
  background: var(--white);
  border-radius: var(--radius-sm);
}
.stat-value {
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 700;
  color: var(--brand-orange);
  line-height: 1;
  margin-bottom: 0;
  letter-spacing: -0.02em;
}
.stat-value sup {
  font-size: 0.45em;
  vertical-align: super;
  margin-left: 2px;
  font-weight: 600;
}
.stat-label {
  font-size: 13px;
  color: var(--brand-slate);
  font-weight: 500;
  margin-top: 6px;
}

/* --- Feature Cards / Products Grid --------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--brand-line);
  transition: all var(--t);
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-accent);
}
.card-media {
  aspect-ratio: 4 / 3;
  background: var(--brand-light);
  position: relative;
  overflow: hidden;
}
.card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.card:hover .card-media img { transform: scale(1.05); }
.card-media.placeholder {
  background: linear-gradient(135deg, var(--brand-accent-soft) 0%, var(--white) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--brand-deep);
}
.card-title .zh {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-muted);
  margin-top: 2px;
}
.card-desc {
  color: var(--brand-slate);
  font-size: 14px;
  margin-bottom: 16px;
  flex: 1;
}
.card-link {
  color: var(--brand-orange);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--t);
}
.card:hover .card-link { gap: 10px; }

/* Product series index cards */
.series-card {
  position: relative;
  overflow: hidden;
  padding: 32px 28px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--white) 0%, var(--brand-accent-soft) 100%);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  transition: all var(--t);
}
.series-card::before {
  content: attr(data-num);
  position: absolute;
  top: 20px; right: 24px;
  font-size: 68px;
  font-weight: 800;
  color: var(--brand-orange);
  opacity: 0.14;
  line-height: 1;
  letter-spacing: -0.05em;
}
.series-card:hover {
  background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-dark) 100%);
  color: var(--white);
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(232, 93, 31, 0.25);
}
.series-card:hover::before { color: var(--white); opacity: 0.22; }
.series-card:hover .series-desc { color: rgba(255,255,255,0.85); }
.series-card:hover .series-arrow { background: var(--white); color: var(--brand-orange); }
.series-card-img { overflow: hidden; }
.series-card-img svg,
.series-card-img img {
  display: block;
  width: 100%;
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.series-card:hover .series-card-img svg,
.series-card:hover .series-card-img img { transform: scale(1.06); }
.series-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
}
.series-title-zh {
  font-size: 14px;
  opacity: 0.75;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}
.series-desc {
  color: var(--brand-slate);
  font-size: 14px;
  margin: 0;
  transition: color var(--t);
}
.series-card-body { display: flex; flex-direction: column; }
.series-card-body .series-num {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--brand-orange);
  margin-bottom: 10px;
  line-height: 1;
  transition: color var(--t);
}
.series-card-body h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
}
.series-card-body p {
  color: var(--brand-slate);
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
  transition: color var(--t);
}
.series-card:hover .series-card-body .series-num,
.series-card:hover .series-card-body p { color: rgba(255, 255, 255, 0.85); }
.series-arrow {
  align-self: flex-start;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--brand-orange);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  transition: all var(--t);
}

/* --- News List ----------------------------------------------------------- */
.news-hd {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 36px;
}
.news-hd .news-word {
  font-size: 64px;
  font-weight: 800;
  line-height: .85;
  letter-spacing: 1px;
  color: var(--brand-line);
}
.news-hd .news-sub h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--brand-deep);
  margin: 0 0 4px;
}
.news-hd .news-sub p {
  margin: 0;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--brand-muted);
  text-transform: uppercase;
}
.news-hd .news-more {
  margin-left: auto;
  border: 1.5px solid var(--brand-line);
  border-radius: var(--radius-sm);
  padding: 10px 26px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-deep);
  white-space: nowrap;
  transition: all var(--t);
}
.news-hd .news-more:hover { border-color: var(--brand-orange); color: var(--brand-orange); }

/* 首页新闻：卡片网格 */
.news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.news-grid-3 { grid-template-columns: repeat(3, 1fr); }
.news-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--brand-line);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color var(--t);
  color: inherit;
}
.news-card:hover {
  box-shadow: 0 20px 40px rgba(0, 71, 157, 0.16), 0 6px 16px rgba(26, 35, 50, 0.10);
  transform: translateY(-12px);
  border-color: rgba(0, 71, 157, 0.35);
}
/* rotating brand-light ring on hover */
@property --news-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.news-card::before,
.news-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: 2px;
  background: conic-gradient(from var(--news-ang),
    transparent 0% 12%,
    rgba(0, 71, 157, 0.85) 24%,
    #7EB3EE 30%,
    rgba(0, 71, 157, 0.85) 36%,
    transparent 48% 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}
.news-card:hover::before,
.news-item:hover::before { opacity: 1; animation: news-ring 2.2s linear infinite; }
@keyframes news-ring { to { --news-ang: 360deg; } }
.news-card-thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #F4F6F9;
  position: relative;
}
.news-card-thumb::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -80%;
  width: 55%;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  pointer-events: none;
}
.news-card:hover .news-card-thumb::after { animation: thumb-shine 0.9s ease; }
@keyframes thumb-shine {
  from { left: -80%; }
  to { left: 130%; }
}
.news-card-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease; }
.news-card:hover .news-card-thumb img { transform: scale(1.08); filter: brightness(1.07) saturate(1.2); }
.news-card-body {
  padding: 18px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.news-card-meta {
  font-size: 12px;
  color: var(--brand-muted);
  font-weight: 500;
}
.news-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-deep);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card-title a { color: inherit; }
.news-card-excerpt {
  font-size: 13px;
  color: var(--brand-slate);
  line-height: 1.6;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  transition: gap var(--t);
}
.news-card:hover .news-card-link { gap: 8px; }

/* 新闻列表页：左图右文卡片 */
.news-list { display: flex; flex-direction: column; gap: 16px; }
.news-item {
  display: flex;
  align-items: stretch;
  background: var(--white);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
  position: relative;
  transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color var(--t);
}
.news-item:hover {
  box-shadow: 0 16px 36px rgba(0, 71, 157, 0.14), 0 4px 12px rgba(26, 35, 50, 0.08);
  transform: translateY(-6px);
  border-color: rgba(0, 71, 157, 0.35);
}
.news-thumb {
  width: 200px;
  flex-shrink: 0;
  overflow: hidden;
  background: #F4F6F9;
  position: relative;
}
.news-thumb::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -80%;
  width: 55%;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  pointer-events: none;
}
.news-item:hover .news-thumb::after { animation: thumb-shine 0.9s ease; }
.news-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease; }
.news-item:hover .news-thumb img { transform: scale(1.08); filter: brightness(1.07) saturate(1.2); }
.news-item-body {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.news-item-meta {
  font-size: 12px;
  color: var(--brand-muted);
  font-weight: 500;
}
.news-item-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-deep);
  margin: 0;
  line-height: 1.4;
}
.news-item-title a { color: inherit; }
.news-item-title a:hover { color: var(--color-primary); }
.news-item-excerpt {
  font-size: 14px;
  color: var(--brand-slate);
  line-height: 1.65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-item-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--t);
}
.news-item:hover .news-item-link { gap: 8px; }
.news-body {
  background: var(--white);
  padding: 22px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  transition: background var(--t);
}
.news-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-deep);
  margin: 0 0 8px;
}
.news-title a { color: inherit; }
.news-excerpt,
.news-body p {
  margin: 0;
  font-size: 14px;
  color: var(--brand-slate);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .news-body { padding: 16px 18px; }
  .news-hd .news-more { display: none; }
  .cta-row { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .cta-row .btn { width: 100%; justify-content: center; }
}

/* --- Process Steps ------------------------------------------------------- */
.process {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
}
.process::before {
  content: '';
  position: absolute;
  top: 44px; left: 10%; right: 10%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--brand-line) 0 8px, transparent 8px 16px);
  z-index: 0;
}
.process-step {
  text-align: center;
  position: relative;
  z-index: 1;
}
.process-icon {
  width: 88px; height: 88px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--brand-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-orange);
  transition: all var(--t);
}
.process-step:hover .process-icon {
  background: var(--brand-orange);
  color: var(--white);
  border-color: var(--brand-orange);
  transform: scale(1.05);
  box-shadow: 0 12px 28px rgba(232, 93, 31, 0.32);
}
.process-icon svg { width: 34px; height: 34px; }
.process-title {
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 4px;
}
.process-num {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--brand-orange);
  font-weight: 700;
}

/* --- About / Company Section --------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* Homepage about-preview: text left, stats cards right */
.about-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 840px) {
  .about-preview { grid-template-columns: 1fr; gap: 40px; }
}
.about-text h2 {
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
  color: var(--brand-deep);
}
.about-text p { color: var(--brand-slate); line-height: 1.75; margin-bottom: 16px; }
.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.about-stat-card {
  background: var(--brand-light);
  border-radius: 12px;
  padding: 24px 20px;
  border-top: 3px solid var(--brand-orange);
}
.about-stat-card .stat-val {
  font-size: 32px;
  font-weight: 800;
  color: var(--brand-deep);
  line-height: 1;
  margin-bottom: 6px;
}
.about-stat-card .stat-val span { color: var(--brand-orange); }
.about-stat-card .stat-desc {
  font-size: 13px;
  color: var(--brand-slate);
  line-height: 1.4;
}
.about-eyebrow {
  color: var(--brand-orange);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 12px;
}
.about-title {
  font-size: clamp(28px, 3vw, 40px);
  margin-bottom: 24px;
  line-height: 1.15;
}
.about-body p {
  color: var(--brand-slate);
  font-size: 16px;
  line-height: 1.85;
}
.about-media {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--brand-light);
  aspect-ratio: 4 / 3;
  position: relative;
}
.about-media img { width: 100%; height: 100%; object-fit: cover; }

/* --- World Map / Network ------------------------------------------------- */
.network {
  background: var(--brand-deep);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.network::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(232, 93, 31, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(232, 93, 31, 0.1) 0%, transparent 50%);
}
.network h2 { color: var(--white); }
.network .section-header p { color: rgba(255, 255, 255, 0.7); }

.map-wrap {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
}
.map-svg {
  width: 100%;
  height: auto;
  color: rgba(255, 255, 255, 0.15);
}
.map-svg path { fill: currentColor; stroke: rgba(255, 255, 255, 0.25); stroke-width: 0.4; }
.map-dot {
  fill: var(--brand-orange);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { r: 4; opacity: 1; }
  50% { r: 7; opacity: 0.6; }
}
.map-legend {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.map-legend-item {
  text-align: center;
}
.map-legend-num {
  font-size: 34px;
  font-weight: 800;
  color: var(--brand-orange);
  line-height: 1;
}
.map-legend-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
}

/* --- Page Banner (inner pages) ------------------------------------------- */
.page-banner {
  padding-top: 80px; /* header 已在文档流内，无需为固定头部预留 */
  padding-bottom: 100px;
  background: linear-gradient(135deg, var(--brand-deep) 0%, #2A3548 60%, #00479d 140%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.page-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(20,30,48,.65) 0%, rgba(42,53,72,.55) 60%, rgba(0,53,118,.45) 140%);
}
/* 有背景图时不加遮罩，直接呈现原图；靠文字投影保证可读性 */
.page-banner[style*="background-image"]::after { display: none; }
/* 产品页 banner 底图偏亮，单独压一层蒙版保证标题可读 */
.page-banner.pb-shade[style*="background-image"]::after {
  display: block;
  background: linear-gradient(135deg, rgba(10,18,32,.62) 0%, rgba(12,24,44,.5) 55%, rgba(0,53,118,.45) 100%);
}
.page-banner[style*="background-image"] h1,
.page-banner[style*="background-image"] .subtitle {
  text-shadow: 0 2px 12px rgba(15, 23, 42, .55), 0 1px 3px rgba(15, 23, 42, .4);
}
/* 栏目页有背景图时：导航透明悬浮于背景图上（参考首页），背景图顶到最上 */
body:has(.page-banner[style*="background-image"]) .site-header.is-inner {
  position: absolute;
  background: transparent;
  box-shadow: none;
}
/* 对齐首页：鼠标移入导航栏任意位置即变白底深色文字 */
body:has(.page-banner[style*="background-image"]) .site-header.is-inner:hover {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
body:has(.page-banner[style*="background-image"]) .site-header.is-inner:hover .site-nav > a,
body:has(.page-banner[style*="background-image"]) .site-header.is-inner:hover .site-nav > .nav-item > .sub-title > a,
body:has(.page-banner[style*="background-image"]) .site-header.is-inner:hover .lang-switch a,
body:has(.page-banner[style*="background-image"]) .site-header.is-inner:hover .lang-switch span,
body:has(.page-banner[style*="background-image"]) .site-header.is-inner:hover .nav-toggle {
  color: var(--nav-ink);
  text-shadow: none;
}
body:has(.page-banner[style*="background-image"]) .site-header.is-inner:hover .site-nav > a:hover,
body:has(.page-banner[style*="background-image"]) .site-header.is-inner:hover .site-nav > .nav-item:hover > .sub-title > a { color: var(--tech-blue); }
body:has(.page-banner[style*="background-image"]) .site-header.is-inner:hover .site-logo .logo-solid {
  visibility: visible;
  position: relative; top: auto;
  transform: none;
}
body:has(.page-banner[style*="background-image"]) .site-header.is-inner:hover .site-logo .logo-transparent {
  visibility: hidden;
  position: absolute; top: 50%; left: 0;
  transform: translateY(-50%);
}
/* hover 到含子菜单的项：撑开下拉并显示白底深色文字（同首页） */
body:has(.page-banner[style*="background-image"]) .site-header.is-inner:has(.site-nav > .nav-item:hover) {
  background: var(--white);
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
  padding-bottom: 20px;
}
body:has(.page-banner[style*="background-image"]) .site-header.is-inner:has(.site-nav > .nav-item:hover) .site-nav > a,
body:has(.page-banner[style*="background-image"]) .site-header.is-inner:has(.site-nav > .nav-item:hover) .site-nav > .nav-item > .sub-title > a,
body:has(.page-banner[style*="background-image"]) .site-header.is-inner:has(.site-nav > .nav-item:hover) .lang-switch a,
body:has(.page-banner[style*="background-image"]) .site-header.is-inner:has(.site-nav > .nav-item:hover) .lang-switch span,
body:has(.page-banner[style*="background-image"]) .site-header.is-inner:has(.site-nav > .nav-item:hover) .nav-toggle {
  color: var(--nav-ink);
  text-shadow: none;
}
body:has(.page-banner[style*="background-image"]) .site-header.is-inner:has(.site-nav > .nav-item:hover) .site-logo .logo-solid {
  visibility: visible;
  position: relative; top: auto;
  transform: none;
}
body:has(.page-banner[style*="background-image"]) .site-header.is-inner:has(.site-nav > .nav-item:hover) .site-logo .logo-transparent {
  visibility: hidden;
  position: absolute; top: 50%; left: 0;
  transform: translateY(-50%);
}
body:has(.page-banner[style*="background-image"]) .site-header.is-inner .site-nav > a,
body:has(.page-banner[style*="background-image"]) .site-header.is-inner .site-nav > .nav-item > .sub-title > a,
body:has(.page-banner[style*="background-image"]) .site-header.is-inner .lang-switch a,
body:has(.page-banner[style*="background-image"]) .site-header.is-inner .lang-switch span,
body:has(.page-banner[style*="background-image"]) .site-header.is-inner .nav-toggle {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
}
body:has(.page-banner[style*="background-image"]) .site-header.is-inner .site-logo .logo-transparent {
  visibility: visible;
  position: relative; top: auto;
  transform: none;
  pointer-events: none;
}
body:has(.page-banner[style*="background-image"]) .site-header.is-inner .site-logo .logo-solid {
  visibility: hidden;
  position: absolute; top: 50%; left: 0;
  transform: translateY(-50%);
}
/* 滚动后：恢复白底吸顶 */
body:has(.page-banner[style*="background-image"]) .site-header.is-inner.is-scrolled {
  position: fixed;
  background: rgba(255,255,255,.96);
  box-shadow: 0 1px 6px rgba(0,0,0,.08);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
body:has(.page-banner[style*="background-image"]) .site-header.is-inner.is-scrolled .site-nav > a,
body:has(.page-banner[style*="background-image"]) .site-header.is-inner.is-scrolled .site-nav > .nav-item > .sub-title > a,
body:has(.page-banner[style*="background-image"]) .site-header.is-inner.is-scrolled .lang-switch a,
body:has(.page-banner[style*="background-image"]) .site-header.is-inner.is-scrolled .lang-switch span,
body:has(.page-banner[style*="background-image"]) .site-header.is-inner.is-scrolled .nav-toggle {
  color: var(--nav-ink);
  text-shadow: none;
}
body:has(.page-banner[style*="background-image"]) .site-header.is-inner.is-scrolled .site-logo .logo-solid {
  visibility: visible;
  position: relative; top: auto;
  transform: none;
}
body:has(.page-banner[style*="background-image"]) .site-header.is-inner.is-scrolled .site-logo .logo-transparent {
  visibility: hidden;
  position: absolute; top: 50%; left: 0;
  transform: translateY(-50%);
}
/* 有背景图时 banner 顶部留出导航高度，让标题不被导航遮挡 */
.page-banner[style*="background-image"] {
  padding-top: var(--nav-h);
  padding-bottom: 0;
}
/* 有背景图时：内容（面包屑/标题/副标题）整体居中；整体高度随视口宽度缩放，1920 时约 540px */
.page-banner[style*="background-image"] .page-banner-inner {
  min-height: clamp(320px, 28.1vw - var(--nav-h), 540px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.page-banner[style*="background-image"] .breadcrumb { display: none; }
.page-banner[style*="background-image"] .subtitle {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.page-banner-inner { position: relative; z-index: 1; }
.page-banner .breadcrumb {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 16px;
  letter-spacing: 0.08em;
}
.page-banner .breadcrumb a:hover { color: var(--brand-accent); }
.page-banner .breadcrumb-sep { margin: 0 10px; color: rgba(255,255,255,0.4); }
.page-banner h1 {
  font-size: clamp(32px, 5vw, 56px);
  margin: 0 0 12px;
  color: var(--white);
}
.page-banner .subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  max-width: 640px;
}

/* --- Page Sub Nav (sticky anchor bar) ------------------------------------ */
.page-subnav {
  position: sticky;
  top: var(--nav-h-scroll);
  z-index: 900;
  background: var(--white);
}
.page-subnav-list {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 60px;
  overflow-x: auto;
  scrollbar-width: none;
}
.page-subnav-list::-webkit-scrollbar { display: none; }
.page-subnav-list a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 26px;
  font-size: 16px;
  font-weight: bold;
  color: #444;
  background: #fff;
  white-space: nowrap;
  text-decoration: none;
  transition: background .3s, color .3s;
}
.page-subnav-list a:hover { color: #114b9b; background: #f4f7fb; }
.page-subnav-list a.is-active {
  color: #fff;
  font-weight: 700;
  background: #114b9b;
}

[data-subnav-target] { scroll-margin-top: calc(var(--nav-h-scroll) + 60px + 24px); }

@media (max-width: 840px) {
  .page-subnav-list { min-height: 50px; }
  .page-subnav-list a { min-width: 120px; padding: 0 14px; font-size: 15px; }
  [data-subnav-target] { scroll-margin-top: calc(var(--nav-h-scroll) + 50px + 16px); }
}

/* --- 栏目二级 Tab（新闻/列表分类切换） ----------------------------------- */
.cat-tabs {
  position: sticky;
  top: var(--nav-h-scroll);
  z-index: 900;
  background: var(--white);
  border-bottom: 1px solid var(--brand-line);
}
.cat-tabs-list {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.cat-tabs-list::-webkit-scrollbar { display: none; }
.cat-tab {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 30px;
  min-height: 58px;
  font-size: 15px;
  font-weight: 500;
  color: #444;
  white-space: nowrap;
  transition: color .3s, background .3s;
}
.cat-tab:hover { color: var(--color-primary); background: #f4f7fb; }
.cat-tab.is-active {
  color: #fff;
  font-weight: 700;
  background: var(--color-primary);
}

/* --- 分页 ---------------------------------------------------------------- */
.wdf-page .pages {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wdf-page .pages a,
.wdf-page .pages span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 4px;
  font-size: 14px;
  color: #555;
  background: #fff;
  border: 1px solid #e3e7ee;
  transition: all .25s ease;
}
.wdf-page .pages a:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.wdf-page .pages span.current {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: 700;
}
.wdf-page .pages span.more { border: 0; background: transparent; padding: 0 4px; }

/* --- About page grids ---------------------------------------------------- */
.about-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* --- About: 公司简介（文字 3 / 配图 2 + 数据看板） ------------------------ */
.profile-row {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 48px;
  align-items: start;
}
.profile-text { max-width: 1080px; margin: 0 auto; }
.profile-text h3 {
  font-size: clamp(20px, 2.3vw, 26px);
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 20px;
}
.profile-text p {
  font-size: 15px;
  line-height: 2;
  color: var(--brand-slate);
  margin: 0 0 14px;
}
.profile-figure {
  position: relative;
  margin: 0;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(0, 71, 157, 0.1);
  box-shadow: 0 18px 44px rgba(0, 71, 157, 0.14);
}
.profile-figure img { width: 100%; height: 100%; object-fit: cover; }

.metric-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 56px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid rgba(217, 56, 58, 0.18);
  box-shadow: 0 14px 36px rgba(0, 71, 157, 0.08);
  overflow: hidden;
}
/* 城市天际线水印，呼应静态稿 */
.metric-board::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 220" preserveAspectRatio="xMidYMax meet"><g fill="none" stroke="rgba(0,71,157,0.08)" stroke-width="1.2"><path d="M0 220 L0 150 L20 150 L20 130 L40 130 L40 110 L70 110 L70 150 L90 150 L90 90 L110 90 L110 150 L130 150 L130 60 L150 60 L150 100 L170 100 L170 150 L200 150 L200 40 L220 40 L220 150 L240 150 L240 80 L260 80 L260 150 L290 150 L290 120 L320 120 L320 150 L350 150 L350 70 L380 70 L380 150 L410 150 L410 50 L440 50 L440 150 L470 150 L470 100 L500 100 L500 150 L530 150 L530 60 L560 60 L560 150 L590 150 L590 90 L620 90 L620 150 L650 150 L650 40 L680 40 L680 150 L710 150 L710 110 L740 110 L740 150 L770 150 L770 70 L800 70 L800 150 L830 150 L830 50 L860 50 L860 150 L890 150 L890 90 L920 90 L920 150 L950 150 L950 60 L980 60 L980 150 L1010 150 L1010 100 L1040 100 L1040 150 L1070 150 L1070 70 L1100 70 L1100 150 L1130 150 L1130 50 L1160 50 L1160 150 L1200 150 L1200 220 Z"/></g></svg>');
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
}
.metric-board .metric {
  position: relative;
  z-index: 1;
  padding: 22px 24px 24px;
  text-align: center;
}
.metric-board .metric + .metric::before {
  content: "";
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 1px;
  background: rgba(217, 56, 58, 0.18);
}
.metric .m-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  color: var(--btn-red);
  margin-bottom: 6px;
}
.metric .m-icon svg { width: 26px; height: 26px; }
.metric .m-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  line-height: 1;
  margin-bottom: 8px;
}
.metric .m-value em {
  font-style: normal;
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--btn-red);
}
.metric .m-value span {
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 700;
  letter-spacing: normal;
  color: var(--btn-red);
}
.metric .m-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0 0 4px;
}
.metric .m-en {
  display: block;
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(0, 71, 157, 0.45);
}

@media (max-width: 840px) {
  .profile-row { grid-template-columns: 1fr; gap: 28px; }
  .profile-figure { order: -1; aspect-ratio: 16 / 10; }
  .metric-board { grid-template-columns: repeat(2, 1fr); }
  .metric-board .metric:nth-child(2n+1)::before { display: none; }
  .metric-board .metric:nth-child(n+3) { border-top: 1px solid rgba(217, 56, 58, 0.18); }
}
@media (max-width: 560px) {
  .metric-board .metric { padding: 26px 16px 24px; }
}

@media (max-width: 840px) {
  .about-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .about-grid-3 { grid-template-columns: 1fr; gap: 18px; }
  .about-grid-3 .pcard { aspect-ratio: 16 / 9; }
  .about-grid-3 .pcard-cap { padding: 16px 18px; }
  .about-grid-3 .pcard-cap h3 { font-size: 18px; }
  .about-grid-3 .org-card-body { padding: 22px 20px 24px; }
}

/* --- Content Blocks (About, Careers, etc.) ------------------------------- */
.content-block {
  max-width: 860px;
  margin: 0 auto;
}
.content-block h3 {
  font-size: 24px;
  margin-top: 40px;
  padding-left: 16px;
  border-left: 4px solid var(--brand-orange);
}
.content-block p {
  color: var(--brand-slate);
  font-size: 16px;
  line-height: 1.85;
}

/* --- Rich text body (单页/详情富文本通用排版) ----------------------------- */
.wdf-html {
  color: var(--brand-slate);
  font-size: 16px;
  line-height: 1.85;
}
.wdf-html p { margin: 0 0 18px; }
.wdf-html h2 {
  font-size: 26px;
  margin: 44px 0 18px;
  color: var(--brand-deep);
}
.wdf-html h3 {
  font-size: 22px;
  margin: 40px 0 16px;
  padding-left: 16px;
  border-left: 4px solid var(--brand-orange);
  color: var(--brand-deep);
}
.wdf-html h4 { font-size: 18px; margin: 28px 0 12px; color: var(--brand-deep); }
.wdf-html ul, .wdf-html ol {
  margin: 0 0 18px;
  padding-left: 24px;
}
.wdf-html li {
  margin-bottom: 10px;
  line-height: 1.8;
}
.wdf-html li::marker { color: var(--brand-orange); }
.wdf-html strong { color: var(--brand-deep); }
.wdf-html a { color: var(--brand-orange); text-decoration: none; }
.wdf-html a:hover { text-decoration: underline; }
.wdf-html img { max-width: 100%; height: auto; border-radius: 12px; margin: 8px 0 18px; }
.wdf-html blockquote {
  margin: 0 0 18px;
  padding: 16px 20px;
  background: var(--brand-light);
  border-left: 4px solid var(--brand-orange);
  border-radius: 0 8px 8px 0;
}
.wdf-html table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 15px;
}
.wdf-html table th, .wdf-html table td {
  border: 1px solid var(--gray-200, #e5e7eb);
  padding: 10px 14px;
  text-align: left;
}
.wdf-html table th { background: var(--brand-light); color: var(--brand-deep); }
.wdf-html hr { border: none; border-top: 1px solid var(--gray-200, #e5e7eb); margin: 32px 0; }
.wdf-html > :first-child { margin-top: 0; }
.wdf-html > :first-child h3 { margin-top: 0; }

/* 客户在富文本里插入的附件，渲染成可点的下载条目而非普通文字链 */
.wdf-html a[href$=".pdf"],
.wdf-html a[href$=".doc"], .wdf-html a[href$=".docx"],
.wdf-html a[href$=".xls"], .wdf-html a[href$=".xlsx"],
.wdf-html a[href$=".ppt"], .wdf-html a[href$=".pptx"],
.wdf-html a[href$=".zip"], .wdf-html a[href$=".rar"] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin: 0 0 12px;
  background: var(--brand-light);
  border: 1px solid var(--brand-line);
  border-radius: 10px;
  color: var(--brand-deep);
  font-size: 15px;
  transition: all var(--t);
}
.wdf-html a[href$=".pdf"]::before,
.wdf-html a[href$=".doc"]::before, .wdf-html a[href$=".docx"]::before,
.wdf-html a[href$=".xls"]::before, .wdf-html a[href$=".xlsx"]::before,
.wdf-html a[href$=".ppt"]::before, .wdf-html a[href$=".pptx"]::before,
.wdf-html a[href$=".zip"]::before, .wdf-html a[href$=".rar"]::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--brand-orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M12 12v5'/%3E%3Cpath d='M9.5 14.5 12 17l2.5-2.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M12 12v5'/%3E%3Cpath d='M9.5 14.5 12 17l2.5-2.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wdf-html a[href$=".pdf"]::after,
.wdf-html a[href$=".doc"]::after, .wdf-html a[href$=".docx"]::after,
.wdf-html a[href$=".xls"]::after, .wdf-html a[href$=".xlsx"]::after,
.wdf-html a[href$=".ppt"]::after, .wdf-html a[href$=".pptx"]::after,
.wdf-html a[href$=".zip"]::after, .wdf-html a[href$=".rar"]::after {
  content: "下载";
  margin-left: auto;
  flex: none;
  font-size: 13px;
  color: var(--brand-orange);
}
html[lang="en"] .wdf-html a[href$=".pdf"]::after,
html[lang="en"] .wdf-html a[href$=".doc"]::after, html[lang="en"] .wdf-html a[href$=".docx"]::after,
html[lang="en"] .wdf-html a[href$=".xls"]::after, html[lang="en"] .wdf-html a[href$=".xlsx"]::after,
html[lang="en"] .wdf-html a[href$=".ppt"]::after, html[lang="en"] .wdf-html a[href$=".pptx"]::after,
html[lang="en"] .wdf-html a[href$=".zip"]::after, html[lang="en"] .wdf-html a[href$=".rar"]::after {
  content: "Download";
}
.wdf-html a[href$=".pdf"]:hover,
.wdf-html a[href$=".doc"]:hover, .wdf-html a[href$=".docx"]:hover,
.wdf-html a[href$=".xls"]:hover, .wdf-html a[href$=".xlsx"]:hover,
.wdf-html a[href$=".ppt"]:hover, .wdf-html a[href$=".pptx"]:hover,
.wdf-html a[href$=".zip"]:hover, .wdf-html a[href$=".rar"]:hover {
  background: var(--white);
  border-color: var(--brand-orange);
  text-decoration: none;
  box-shadow: var(--shadow);
}

/* --- Investor relations landing ------------------------------------------ */
.ir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.ir-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--brand-line);
  border-radius: 16px;
  padding: 32px;
  transition: all var(--t);
}
.ir-card:hover { border-color: var(--brand-orange); box-shadow: var(--shadow); transform: translateY(-4px); }
.ir-card-head { padding-bottom: 18px; border-bottom: 1px solid var(--brand-line); }
.ir-card-head h3 { font-size: 20px; color: var(--brand-deep); margin: 0; }
.ir-card-desc { font-size: 14px; line-height: 1.7; color: var(--brand-muted); margin: 8px 0 0; }
.ir-list {
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  flex: 1;
}
.ir-list li { margin-bottom: 14px; }
.ir-list a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  color: var(--brand-slate);
  font-size: 15px;
  transition: color var(--t);
}
.ir-list a:hover { color: var(--brand-orange); }
.ir-list-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ir-list-date { flex: none; font-size: 13px; color: var(--brand-muted); }
.ir-list-empty { font-size: 15px; color: var(--brand-muted); }
.ir-card-more {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--brand-line);
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-orange);
}
.ir-card-more .arrow { transition: transform var(--t); display: inline-block; }
.ir-card-more:hover .arrow { transform: translateX(4px); }

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 32px 0;
}
.pillar {
  padding: 28px 24px;
  background: var(--brand-light);
  border-radius: var(--radius);
  border-top: 3px solid var(--brand-orange);
  transition: all var(--t);
}
.pillar:hover {
  background: var(--white);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.pillar-icon {
  width: 44px; height: 44px;
  background: var(--brand-accent-soft);
  color: var(--brand-orange);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.pillar h4 {
  font-size: 17px;
  margin: 0 0 8px;
}
.pillar p {
  font-size: 14px;
  color: var(--brand-slate);
  margin: 0;
}

/* --- Job cards ----------------------------------------------------------- */
.jobs-list { display: grid; gap: 20px; }
.job-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  transition: all var(--t);
}
.job-card:hover {
  border-color: var(--brand-orange);
  box-shadow: 0 12px 32px rgba(232, 93, 31, 0.12);
  transform: translateY(-2px);
}
.job-info { min-width: 0; }
.job-card h3 {
  font-size: 19px;
  margin: 0 0 8px;
  color: var(--brand-deep);
}
.job-card h3 a { color: inherit; }
.job-card h3 a:hover { color: var(--brand-orange); }
.job-tags { margin-bottom: 4px; }
.job-card .job-tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--brand-accent-soft);
  color: var(--brand-orange);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  margin: 0 6px 8px 0;
}
.job-card p {
  color: var(--brand-slate);
  font-size: 14px;
  margin: 0;
}
.job-apply {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.job-apply-mail {
  text-align: center;
  font-size: 13px;
  color: var(--brand-muted);
}
.job-apply-mail:hover { color: var(--brand-orange); }

@media (max-width: 640px) {
  .job-card { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* --- Careers: 配色收敛 ----------------------------------------------------
   招聘相关页面以科技蓝为主色调，红色仅留给少数关键行动点。
   通过覆盖 token 生效，不改全站变量；确认效果后再决定是否推广。 */
.theme-hr {
  --brand-orange: #00479d;
  --brand-orange-dark: #003576;
  --brand-accent: #9EC5F0;
  --brand-accent-soft: #F0F5FB;
}
/* 红色点缀：稀缺使用，只标记"热招中"和主投递入口 */
.theme-hr .job-tag.hot {
  background: #FDF0F0;
  color: var(--btn-red);
}
.theme-hr .btn-accent {
  background: var(--btn-red);
  color: var(--white);
}
.theme-hr .btn-accent:hover {
  background: #B32B2D;
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(217, 56, 58, 0.32);
}

/* 部分阴影/浅底写死了橙色 rgba，无法通过变量覆盖，在作用域内单独改写 */
.theme-hr .btn-primary:hover { box-shadow: 0 8px 24px rgba(0, 71, 157, 0.32); }
.theme-hr .job-card:hover { box-shadow: 0 12px 32px rgba(0, 71, 157, 0.12); }
.theme-hr .hr-slogan-mark,
.theme-hr .benefit-icon { background: rgba(0, 71, 157, .1); }

/* --- Careers: job detail -------------------------------------------------- */
.job-detail {
  background: var(--white);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  padding: 40px;
}
.job-detail-tags { margin-bottom: 18px; }
/* .job-tag 的样式挂在 .job-card 下，详情页不在该容器内，需重新声明 */
.job-detail-tags .job-tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--brand-accent-soft);
  color: var(--brand-orange);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  margin: 0 6px 8px 0;
}
.job-detail-summary {
  font-size: 16px;
  color: var(--brand-slate);
  margin: 0 0 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--brand-line);
}
.job-detail-body h3 {
  font-size: 17px;
  color: var(--brand-deep);
  margin: 28px 0 12px;
  padding-left: 12px;
  border-left: 3px solid var(--brand-orange);
}
.job-detail-body h3:first-child { margin-top: 0; }
.job-detail-body ul { padding-left: 20px; margin: 0; list-style: disc; }
.job-detail-body li {
  color: var(--brand-slate);
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 6px;
}
.job-detail-body li::marker { color: var(--brand-orange); }
.job-detail-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 36px;
  padding: 24px 28px;
  background: var(--brand-accent-soft);
  border-radius: var(--radius);
}
.job-detail-cta-text { display: flex; flex-direction: column; gap: 4px; }
.job-detail-cta-text strong { color: var(--brand-deep); font-size: 16px; }
.job-detail-cta-text span { color: var(--brand-slate); font-size: 14px; }
.job-detail-cta-actions { display: flex; align-items: center; gap: 18px; }
.job-detail-phone { font-size: 14px; color: var(--brand-slate); }
.job-detail-phone:hover { color: var(--brand-orange); }
.job-detail-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 40px;
  font-size: 14px;
}
.job-detail-back {
  flex: none;
  padding: 8px 20px;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  color: var(--brand-slate);
}
.job-detail-back:hover { border-color: var(--brand-orange); color: var(--brand-orange); }

@media (max-width: 640px) {
  .job-detail { padding: 24px; }
  .job-detail-cta { flex-direction: column; align-items: flex-start; }
  .job-detail-nav { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* --- Careers: philosophy & benefits cards -------------------------------- */
/* ===== 人力资源 · 人才理念 (hr) ===== */
/* 标语框：浅蓝微渐变衬底，替代深色大图，减轻页面视觉重量 */
.hr-slogan {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
  padding: clamp(30px, 3.6vw, 46px) clamp(24px, 4vw, 56px);
  border: 1px solid #DCE7F5;
  border-radius: 16px;
  background: linear-gradient(120deg, #F2F7FE 0%, #EAF1FB 55%, #F5F7FA 100%);
}
.hr-slogan-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  color: var(--brand-orange);
  background: rgba(232, 93, 31, .1);
}
.hr-slogan-mark svg { width: 22px; height: 22px; }
.hr-slogan p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 0;
  font-size: clamp(18px, 2.1vw, 27px);
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.5;
  color: var(--brand-deep);
}
.hr-slogan-sep {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand-orange);
  opacity: .6;
}

.hr-prose {
  max-width: 900px;
  margin: 44px auto 0;
}
.hr-prose p {
  margin: 0 0 22px;
  font-size: clamp(15px, 1.1vw, 16px);
  line-height: 2.15;
  color: var(--brand-slate);
  text-indent: 2em;
  text-align: justify;
}
.hr-prose p:last-child { margin-bottom: 0; }

/* 核心要点：正文下方的金句区，蓝色方标 + 加粗 */
.hr-creeds {
  max-width: 900px;
  margin: 40px auto 0;
  padding: 30px clamp(22px, 3vw, 40px);
  list-style: none;
  border: 1px solid var(--brand-line);
  border-left: 3px solid var(--tech-blue);
  border-radius: 0 14px 14px 0;
  background: var(--brand-light);
  display: grid;
  gap: 16px;
}
.hr-creed {
  position: relative;
  padding-left: 26px;
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: .02em;
  color: var(--brand-deep);
}
.hr-creed::before {
  content: '';
  position: absolute;
  left: 0; top: .72em;
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--tech-blue);
  transform: rotate(45deg);
}

/* 底部通栏配图 */
.hr-figure {
  margin: 52px 0 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(26, 35, 50, .16);
}
.hr-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.hr-contact {
  margin-top: 40px;
  padding: 28px 32px;
  background: var(--white);
  border: 1px solid var(--brand-line);
  border-radius: 16px;
}
.hr-contact h4 {
  margin: 0 0 18px;
  padding-bottom: 14px;
  font-size: 17px;
  color: var(--brand-deep);
  border-bottom: 1px solid var(--brand-line);
}
.hr-contact ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.hr-contact li {
  display: flex;
  gap: 14px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--brand-slate);
}
.hr-contact li > span {
  flex: none;
  width: 48px;
  color: var(--brand-deep);
  font-weight: 600;
}
.hr-contact a { color: var(--brand-slate); }
.hr-contact a:hover { color: var(--brand-orange); }

@media (max-width: 640px) {
  .hr-slogan { gap: 12px; padding: 26px 20px; }
  .hr-slogan p { gap: 10px; }
  .hr-prose p { text-align: left; text-indent: 0; }
  .hr-creeds { padding: 24px 20px; }
  .hr-figure { margin-top: 36px; border-radius: 12px; }
  .hr-contact { padding: 22px 20px; }
}

.career-philosophy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.philosophy-card {
  background: var(--white);
  border: 1px solid var(--brand-line);
  border-radius: 16px;
  padding: 28px;
  transition: all var(--t);
}
.philosophy-card:hover { border-color: var(--brand-orange); box-shadow: var(--shadow); transform: translateY(-4px); }
.philosophy-card h4 { font-size: 18px; color: var(--brand-deep); margin: 0 0 12px; }
.philosophy-card p { font-size: 15px; line-height: 1.8; color: var(--brand-slate); margin: 0; }

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.benefit-item {
  background: var(--white);
  border: 1px solid var(--brand-line);
  border-radius: 16px;
  padding: 28px;
  transition: all var(--t);
}
.benefit-item:hover { border-color: var(--brand-orange); box-shadow: var(--shadow); transform: translateY(-4px); }
.benefit-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(232, 93, 31, .1);
  color: var(--brand-orange);
  margin-bottom: 18px;
}
.benefit-item h4 { font-size: 17px; color: var(--brand-deep); margin: 0 0 10px; }
.benefit-item p { font-size: 15px; line-height: 1.8; color: var(--brand-slate); margin: 0; }

/* --- Cooperation contact cards ------------------------------------------- */
.coop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.coop-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--brand-line);
  border-radius: 16px;
  padding: 32px;
  transition: all var(--t);
}
.coop-card:hover { border-color: var(--brand-orange); box-shadow: var(--shadow); transform: translateY(-4px); }
.coop-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(232, 93, 31, .1);
  color: var(--brand-orange);
  margin-bottom: 20px;
}
.coop-card h3 { font-size: 20px; color: var(--brand-deep); margin: 0 0 10px; }
.coop-card-desc { font-size: 15px; line-height: 1.8; color: var(--brand-slate); margin: 0 0 20px; }
.coop-card-contact {
  border-top: 1px solid var(--brand-line);
  padding-top: 18px;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.coop-card-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--brand-deep);
  word-break: break-all;
}
.coop-card-line svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--brand-orange); }
.coop-card-line:hover { color: var(--brand-orange); }
.coop-card-btn { margin-top: 22px; width: 100%; justify-content: center; }

/* --- Contact ------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: start;
}
.contact-info {
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--tech-blue) 100%);
  color: var(--white);
  padding: 40px;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.contact-items {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.contact-info::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.35) 0%, transparent 70%);
}
.contact-info h3 {
  color: var(--white);
  font-size: 22px;
}
.contact-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.contact-item:last-child { border-bottom: 0; }
.contact-item-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-item-label {
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 2px;
}
.contact-item-value {
  color: var(--white);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
}
.contact-item-value a { color: var(--white); }
.contact-item-value a:hover { color: var(--color-secondary); }
.contact-item-empty { color: rgba(255, 255, 255, 0.5); font-weight: 400; }

.contact-form .btn-primary { background: var(--color-primary); }
.contact-form .btn-primary:hover {
  background: var(--tech-blue);
  box-shadow: 0 8px 24px rgba(0, 71, 157, 0.30);
}

.contact-form {
  padding: 40px;
  background: var(--white);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.form-field { display: flex; flex-direction: column; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--brand-slate);
}
.form-field input,
.form-field textarea,
.form-field select {
  padding: 12px 14px;
  border: 1.5px solid var(--brand-line);
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--brand-deep);
  background: var(--white);
  transition: all var(--t);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 4px rgba(232, 93, 31, 0.12);
}
.form-field textarea { min-height: 140px; resize: vertical; }

/* --- Product Detail Page ------------------------------------------------- */
.product-detail {
  padding: 80px 0;
}
.product-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
  align-items: center;
}
.product-image {
  aspect-ratio: 1 / 1;
  background: var(--brand-accent-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.product-image img { width: 100%; height: 100%; object-fit: cover; }
.product-name-en { font-size: 34px; margin: 0 0 6px; }
.product-name-zh { color: var(--brand-muted); font-size: 18px; margin-bottom: 24px; }
.product-section { margin-bottom: 32px; }
.product-section h4 {
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brand-orange);
  margin-bottom: 8px;
}
.product-section p { color: var(--brand-slate); }

/* Chemical composition table */
.spec-table {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--brand-line);
  font-size: 14px;
}
.spec-table th, .spec-table td {
  padding: 12px 14px;
  text-align: center;
  border-bottom: 1px solid var(--brand-line);
  border-right: 1px solid var(--brand-line);
}
.spec-table th:last-child, .spec-table td:last-child { border-right: 0; }
.spec-table thead th {
  background: var(--brand-orange);
  color: var(--white);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.spec-table thead tr:nth-child(2) th {
  background: var(--brand-orange-dark);
  font-weight: 500;
  font-size: 13px;
}
.spec-table tbody tr:nth-child(even) { background: var(--brand-light); }
.spec-table tbody tr:hover { background: var(--brand-accent-soft); }
.spec-table tbody td:first-child { font-weight: 700; color: var(--brand-deep); }

/* Rare earth grid */
.element-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.element {
  padding: 18px 16px;
  background: var(--white);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-sm);
  transition: all var(--t);
}
.element:hover {
  border-color: var(--brand-orange);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.element-symbol {
  display: inline-block;
  padding: 3px 10px;
  background: var(--brand-orange);
  color: var(--white);
  font-weight: 700;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 8px;
}
.element-name {
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 4px;
}
.element-forms {
  color: var(--brand-muted);
  font-size: 12px;
}

/* --- Footer：浅灰白极简 ---------------------------------------------------- */
.site-footer {
  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
  color: #475569;
  font-size: 14px;
  position: relative;
  border-top: 1px solid #E2E8F0;
  overflow-x: hidden;
}
.site-footer a { color: #475569; text-decoration: none; word-break: break-word; overflow-wrap: break-word; }
.site-footer a:hover { color: var(--btn-red, #D9383A); }

.site-footer .footer-main { padding: 56px 0 40px; }
.site-footer .footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr;
  gap: 56px;
}
.site-footer .footer-cols > * { min-width: 0; }
.site-footer .footer-col h4 {
  font-size: 15px; font-weight: 700; color: #0F172A;
  margin: 0 0 20px; letter-spacing: .5px;
}
.site-footer .footer-col ul { list-style: none; padding: 0; margin: 0; }
.site-footer .footer-col li { margin-bottom: 11px; }
.site-footer .footer-col li a {
  font-size: 14px;
  color: #475569;
  transition: color .25s ease;
}

.site-footer .footer-contact-info { color: #475569; font-size: 14px; }
.site-footer .footer-contact-info > div {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 13px; line-height: 1.6;
}
.site-footer .footer-contact-info svg {
  width: 16px; height: 16px; flex: 0 0 16px; margin-top: 3px;
  fill: none; stroke: #94A3B8; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

.site-footer .footer-bottom {
  background: #FFFFFF;
  border-top: 1px solid #E2E8F0;
  padding: 20px 0;
}
.site-footer .footer-bottom-inner {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.site-footer .footer-logo {
  font-size: 15px; font-weight: 600; letter-spacing: .5px;
  color: #334155;
}
.site-footer .footer-copy {
  color: #94A3B8; font-size: 12px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0;
}
.site-footer .footer-copy a { color: #94A3B8; }
.site-footer .footer-copy .sep { color: #CBD5E1; margin: 0 10px; }

@media (max-width: 991px) {
  .site-footer .footer-main { padding: 44px 0; }
  .site-footer .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px 40px; }
  .site-footer .footer-bottom { padding: 18px 0; }
  .site-footer .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 575px) {
  .site-footer .footer-cols { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .site-footer .footer-col:last-child { grid-column: 1 / -1; }
  .site-footer .footer-col h4 { margin-bottom: 14px; }
  .site-footer .footer-col li { margin-bottom: 8px; }
  .site-footer .footer-col li a { font-size: 13px; }
  .site-footer .footer-copy { font-size: 11px; }
  .site-footer .footer-copy .sep { margin: 0 6px; }
}

/* --- Reveal on scroll ---------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms ease, transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-reveal="left"] { transform: translateX(-48px); }
[data-reveal="right"] { transform: translateX(48px); }
[data-reveal="flip"] {
  transform: perspective(1200px) rotateY(-16deg) translateX(48px);
  transition-duration: 1000ms;
}
[data-reveal="zoom"] { transform: scale(0.92); }
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
/* Staggered children: add .reveal-stagger to a revealed parent */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal-stagger.is-revealed > *:nth-child(1) { transition-delay: 80ms; }
.reveal-stagger.is-revealed > *:nth-child(2) { transition-delay: 200ms; }
.reveal-stagger.is-revealed > *:nth-child(3) { transition-delay: 320ms; }
.reveal-stagger.is-revealed > *:nth-child(4) { transition-delay: 440ms; }
.reveal-stagger.is-revealed > *:nth-child(5) { transition-delay: 560ms; }
.reveal-stagger.is-revealed > * {
  opacity: 1;
  transform: none;
}

/* Product cards: springy rise + photo zoom-settle on reveal */
.pcard[data-reveal],
.series-card[data-reveal],
.org-card[data-reveal] {
  transition: opacity 700ms ease, transform 950ms cubic-bezier(0.16, 1.18, 0.3, 1);
}
.pcard[data-reveal]:not(.is-revealed),
.series-card[data-reveal]:not(.is-revealed),
.org-card[data-reveal]:not(.is-revealed) {
  transform: translateY(56px) scale(0.93);
}
.card-grid > .pcard[data-reveal]:nth-child(odd):not(.is-revealed),
.card-grid > .series-card[data-reveal]:nth-child(odd):not(.is-revealed),
.card-grid > .org-card[data-reveal]:nth-child(odd):not(.is-revealed) {
  transform: translateY(56px) scale(0.93) rotate(-1.2deg);
}
.card-grid > .pcard[data-reveal]:nth-child(even):not(.is-revealed),
.card-grid > .series-card[data-reveal]:nth-child(even):not(.is-revealed),
.card-grid > .org-card[data-reveal]:nth-child(even):not(.is-revealed) {
  transform: translateY(56px) scale(0.93) rotate(1.2deg);
}
.pcard[data-reveal]:not(.is-revealed) .pcard-media img,
.series-card[data-reveal]:not(.is-revealed) .series-card-img img,
.org-card[data-reveal]:not(.is-revealed) .org-card-media img {
  transform: scale(1.28);
  filter: saturate(0.2) brightness(1.15);
}
.pcard[data-reveal].is-revealed .pcard-media img,
.series-card[data-reveal].is-revealed .series-card-img img,
.org-card[data-reveal].is-revealed .org-card-media img {
  animation: img-settle 1200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes img-settle {
  from { transform: scale(1.28); filter: saturate(0.2) brightness(1.15); }
}
.pcard[data-reveal] .pcard-cap,
.series-card[data-reveal] .series-card-body,
.org-card[data-reveal] .org-card-body {
  transition: opacity 600ms ease 250ms, transform 700ms cubic-bezier(0.2, 0.9, 0.25, 1.15) 250ms;
}
.pcard[data-reveal]:not(.is-revealed) .pcard-cap,
.series-card[data-reveal]:not(.is-revealed) .series-card-body,
.org-card[data-reveal]:not(.is-revealed) .org-card-body {
  opacity: 0;
  transform: translateY(16px);
}

/* News cards: springy rise + photo settle on reveal */
.news-card[data-reveal],
.news-item[data-reveal] {
  transition: opacity 600ms ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color var(--t);
}
.news-card[data-reveal]:not(.is-revealed) { transform: translateY(48px) scale(0.93); }
.news-item[data-reveal]:not(.is-revealed) { transform: translateY(36px) scale(0.97); }
.news-card[data-reveal]:not(.is-revealed) .news-card-thumb img,
.news-item[data-reveal]:not(.is-revealed) .news-thumb img {
  transform: scale(1.25);
  filter: saturate(0.3) brightness(1.1);
}
.news-card[data-reveal].is-revealed .news-card-thumb img,
.news-item[data-reveal].is-revealed .news-thumb img {
  animation: img-settle 1100ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.news-card[data-reveal] .news-card-body,
.news-item[data-reveal] .news-item-body {
  transition: opacity 500ms ease 200ms, transform 600ms cubic-bezier(0.2, 0.9, 0.25, 1.15) 200ms;
}
.news-card[data-reveal]:not(.is-revealed) .news-card-body,
.news-item[data-reveal]:not(.is-revealed) .news-item-body {
  opacity: 0;
  transform: translateY(14px);
}

/* About visual: decorative frame + hover motion */
.about-visual {
  position: relative;
}
.about-visual::before {
  content: "";
  position: absolute;
  top: 24px; left: 24px; right: -14px; bottom: -14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(232, 93, 31, 0.22), rgba(232, 93, 31, 0.04));
  z-index: 0;
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.about-visual img {
  position: relative;
  z-index: 1;
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 600ms ease;
}
.about-visual:hover img {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 24px 48px rgba(26, 35, 50, 0.18);
}
.about-visual:hover::before {
  transform: translate(6px, 6px);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .reveal-stagger > *, .hero-content-slide > * { transition: none; transform: none; opacity: 1; }
  [data-reveal]:not(.is-revealed) .pcard-media img,
  [data-reveal]:not(.is-revealed) .series-card-img img { transform: none; filter: none; }
  [data-reveal].is-revealed .pcard-media img,
  [data-reveal].is-revealed .series-card-img img { animation: none; }
  [data-reveal]:not(.is-revealed) .pcard-cap,
  [data-reveal]:not(.is-revealed) .series-card-body { transition: none; transform: none; opacity: 1; }
  .hero-slide.is-active, .hero-dot.is-active::after { animation: none; }
  .news-card:hover .news-card-thumb::after,
  .news-item:hover .news-thumb::after { animation: none; }
  .news-card:hover::before, .news-item:hover::before { animation: none; }
  [data-reveal]:not(.is-revealed) .news-card-thumb img,
  [data-reveal]:not(.is-revealed) .news-thumb img { transform: none; filter: none; }
  [data-reveal].is-revealed .news-card-thumb img,
  [data-reveal].is-revealed .news-thumb img { animation: none; }
  [data-reveal]:not(.is-revealed) .news-card-body,
  [data-reveal]:not(.is-revealed) .news-item-body { transition: none; transform: none; opacity: 1; }
}

/* --- Product List (homepage overview) ------------------------------------ */
.product-overview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.product-group {
  background: var(--white);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  padding: 24px 28px;
  transition: all var(--t);
}
.product-group:hover {
  border-color: var(--brand-orange);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.product-group h4 {
  font-size: 15px;
  color: var(--brand-orange);
  margin: 0 0 12px;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.product-group-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.product-group-item {
  display: inline-block;
  padding: 4px 14px;
  background: var(--brand-accent-soft);
  color: var(--brand-deep);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  transition: all var(--t);
}
.product-group-item:hover {
  background: var(--brand-orange);
  color: var(--white);
}

/* --- Utilities ----------------------------------------------------------- */
.text-center { text-align: center; }
.text-orange { color: var(--brand-orange); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.divider {
  height: 1px;
  background: var(--brand-line);
  margin: 48px 0;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .site-header .site-nav { gap: 22px; }
  .site-header .site-nav > a,
  .site-header .site-nav > .nav-item > .sub-title > a { font-size: 17px; }
  .site-header .site-tools { margin-left: 20px; }
  .about-grid, .contact-grid, .product-header { grid-template-columns: 1fr; gap: 32px; }
  .news-grid, .news-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* --- 移动端导航：左侧抽屉 --------------------------------------------- */
@media (max-width: 991px) {
  :root { --nav-h: 60px; --nav-h-scroll: 60px; }

  .site-header .header-inner { padding-left: 15px; padding-right: 15px; }
  .site-header .site-logo img { max-height: 36px; }
  .site-header .nav-toggle { display: inline-block; order: -1; margin-left: 0; }
  .site-header:has(.site-nav > .nav-item:hover) { padding-bottom: 0; }

  .site-header .site-nav {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 78%;
    max-width: 320px;
    height: 100vh;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    margin: 0;
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 200;
    overflow-y: auto;
    box-shadow: 2px 0 12px rgba(0, 0, 0, .08);
  }
  .site-header .site-nav.open { transform: translateX(0); }

  .site-header .mobile-nav-header {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 16px 18px 12px;
  }
  .site-header .mobile-nav-header .close-btn {
    font-size: 22px;
    color: var(--color-primary);
    cursor: pointer;
    line-height: 1;
    width: 24px; height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .site-header .mobile-nav-header .mobile-logo { display: inline-flex; align-items: center; }
  .site-header .mobile-nav-header .mobile-logo img { max-height: 28px; display: block; }

  .site-header .site-nav > a,
  .site-header .site-nav > .nav-item { width: 100%; border-bottom: 1px solid #f2f2f2; }
  .site-header .site-nav > a,
  .site-header .site-nav > .nav-item > .sub-title > a {
    line-height: 44px;
    width: 100%;
    padding: 0 20px;
    font-size: 15px;
    color: #333 !important;
    text-shadow: none;
    display: block;
  }
  .site-header .site-nav > a::after,
  .site-header .site-nav > .nav-item > .sub-title > a::after { display: none; }

  /* 含子菜单的项：右侧 ▾，点击展开 */
  .site-header .site-nav > .nav-item > .sub-title { position: relative; }
  .site-header .site-nav > .nav-item > .sub-title::after {
    content: "▾";
    position: absolute;
    right: 20px; top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 12px;
    transition: transform .25s;
    pointer-events: none;
  }
  .site-header .site-nav > .nav-item.expanded > .sub-title::after {
    transform: translateY(-50%) rotate(180deg);
    color: var(--color-primary);
  }
  .site-header .site-nav > .nav-item.expanded > .sub-title > a { color: var(--color-primary) !important; }

  .site-header .site-nav .sub-nav {
    position: static !important;
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: #fafbfd;
    text-align: left;
    min-width: 0 !important;
  }
  .site-header .site-nav > .nav-item.expanded > .sub-nav { display: block !important; }
  .site-header .site-nav > .nav-item:hover:not(.expanded) .sub-nav { display: none !important; }
  .site-header .site-nav .sub-nav-item {
    display: block !important;
    padding: 0 20px 0 36px !important;
    line-height: 42px !important;
    font-size: 14px !important;
    color: #333 !important;
    border-bottom: 1px solid #f2f2f2;
    white-space: normal;
  }

  .mobile-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 150;
  }
  .mobile-nav-backdrop.open { display: block; }

  .site-header .site-tools { margin-left: auto; gap: 12px; }

  .hero { height: 70vh; min-height: 420px; }
  .hero-dots { bottom: 24px; }
  .hero-content h1 { white-space: normal; }
}

@media (max-width: 840px) {
  .hero { margin-top: 0; }
  .section { padding: 64px 0; }
  .section-sm { padding: 48px 0; }
  .news-grid, .news-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .news-item { flex-direction: column; }
  .news-thumb { width: 100%; height: 160px; }
  .page-banner { padding-top: 60px; padding-bottom: 60px; }
}
@media (max-width: 480px) {
  .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; }
  .element-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid, .news-grid-3 { grid-template-columns: 1fr; }
}

/* Print */
@media print {
  .site-header, .site-footer, .hero-dots, .hero-scroll { display: none; }
  .hero { margin-top: 0; }
}

/* --- Photo product cards (hover mask) ------------------------------------ */
.pcard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.pcard {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--brand-deep);
  box-shadow: 0 4px 16px rgba(26, 35, 50, 0.08);
  transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 500ms ease;
}
.pcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(26, 35, 50, 0.22);
}
.pcard-media {
  position: absolute;
  inset: 0;
}
.pcard-media svg,
.pcard-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pcard:hover .pcard-media svg,
.pcard:hover .pcard-media img { transform: scale(1.08); }
/* org chart cards (about page) */
.org-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(26, 35, 50, 0.06);
  transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 500ms ease, border-color var(--t);
}
.org-card:hover {
  transform: translateY(-6px);
  border-color: var(--brand-accent);
  box-shadow: 0 22px 46px rgba(26, 35, 50, 0.16);
}
.org-card-media {
  position: relative;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  background: var(--brand-light);
  border-bottom: 1px solid var(--brand-line);
}
.org-card-media img,
.org-card-media svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.org-card:hover .org-card-media img,
.org-card:hover .org-card-media svg { transform: scale(1.06); }
.org-card-body { padding: 24px 24px 28px; }
.org-card-body h3 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
  color: var(--brand-deep);
}
.org-card-body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--brand-slate);
}
/* caption strip (default state) */
.pcard-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(0deg, rgba(15, 22, 34, 0.85), rgba(15, 22, 34, 0));
  color: var(--white);
  transition: opacity 400ms ease, transform 400ms ease;
}
.pcard-cap h3 { margin: 0; font-size: 17px; font-weight: 700; }
.pcard-num {
  font-size: 12px;
  font-weight: 800;
  color: #9EC5F0;
  letter-spacing: 0.08em;
}
/* hover mask */
.pcard-mask {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 22px 20px;
  background: linear-gradient(15deg, rgba(0, 71, 157, 0.92) 0%, rgba(26, 35, 50, 0.88) 70%);
  color: var(--white);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 450ms ease, transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pcard:hover .pcard-mask { opacity: 1; transform: translateY(0); }
.pcard:hover .pcard-cap { opacity: 0; transform: translateY(8px); }
.pcard-mask h3 { margin: 0; font-size: 19px; font-weight: 800; }
.pcard-mask p { margin: 0; font-size: 13.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.92); }
.pcard-link { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
/* CTA card */
.pcard--cta {
  background: linear-gradient(135deg, #00479d 0%, #003576 100%);
}
.pcard--cta .pcard-cta-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 24px 22px;
  color: var(--white);
}
.pcard--cta h3 { margin: 0; font-size: 20px; font-weight: 800; }
.pcard--cta p { margin: 0; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.88); }
@media (max-width: 1024px) {
  .pcard-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pcard-grid { grid-template-columns: 1fr; }
  /* touch devices: show mask content via caption only */
}
@media (hover: none) {
  .pcard-cap { opacity: 1 !important; transform: none !important; }
  .pcard-mask { display: none; }
}

/* --- Leaflet global map --------------------------------------------------- */
.map-hq {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-deep);
  background: var(--white);
  border-radius: 20px;
  padding: 3px 10px 3px 6px;
  box-shadow: 0 2px 10px rgba(26, 35, 50, 0.25);
}
.map-hq span {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--brand-orange);
  position: relative;
}
.map-hq span::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--brand-orange);
  animation: hqPulse 1.8s ease-out infinite;
}
@keyframes hqPulse {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
/* 底色与 CARTO light 海面同色，瓦片偶发加载失败时不显形 */
#global-map { z-index: 0; background: #d4dadc; }

/* 底图亮色系，无需额外滤镜 */
#global-map .leaflet-tile-pane { filter: none; }

/* 深色板块内文字配色 */
.section-dark .section-eyebrow { color: var(--brand-accent); }
.section-dark .section-sub { color: rgba(255, 255, 255, 0.62); }

/* 地图边框：亮色系 */
.world-map-wrap #global-map { border: 1px solid var(--brand-line); }

/* 内阴影暗角 */
.world-map-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.08);
  pointer-events: none;
  z-index: 500;
}

/* 左下角信息标牌（亮色系） */
.map-caption {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(232, 93, 31, 0.2);
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  pointer-events: none;
}
.map-caption strong {
  color: var(--brand-deep);
  font-size: 15px;
  letter-spacing: 0.04em;
}
.map-caption span {
  color: var(--brand-slate);
  font-size: 12px;
}

/* 国家节点：橙点 + 波纹 */
.map-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--brand-orange);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 10px 2px rgba(232, 93, 31, 0.55);
  position: relative;
  cursor: pointer;
  transition: transform 0.25s ease;
}
.map-dot:hover { transform: scale(1.4); }
.map-dot::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--brand-orange);
  animation: hqPulse 2.2s ease-out infinite;
  animation-delay: calc(var(--i, 0) * 0.15s);
}

/* 常驻国家名标签（亮色系） */
.leaflet-tooltip.map-label {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(232, 93, 31, 0.35);
  border-radius: 20px;
  color: var(--brand-deep);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  pointer-events: none;
}
.leaflet-tooltip.map-label::before { display: none; }

/* 流动光点（彗星） */
.map-comet {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #FFD9C2;
  box-shadow: 0 0 8px 3px rgba(255, 156, 102, 0.85);
  transition: opacity 0.3s ease;
}

/* 航线流动动画 */
.flow-line {
  stroke-dasharray: 5 8;
  animation: flowDash 1.1s linear infinite;
}
@keyframes flowDash {
  to { stroke-dashoffset: -13; }
}

/* 滚动进入视口：标记逐个弹出（离开后重置，可重播） */
.map-node {
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.map-live .map-node {
  opacity: 1;
  transform: scale(1);
}
.world-map-wrap .leaflet-overlay-pane,
.world-map-wrap .leaflet-tooltip.map-label,
.world-map-wrap .map-comet {
  opacity: 0;
  transition: opacity 0.8s ease 0.6s;
}
.map-live .leaflet-overlay-pane { opacity: 1; }
.map-live .leaflet-tooltip.map-label { opacity: 1 !important; transition-delay: 1s; }
.map-live .map-comet { opacity: 1; }

@media (max-width: 640px) {
  .leaflet-tooltip.map-label { display: none; }
  .map-caption { left: 12px; bottom: 12px; padding: 9px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-line, .map-dot::after { animation: none; }
  .map-node, .world-map-wrap .leaflet-overlay-pane,
  .world-map-wrap .leaflet-tooltip.map-label, .world-map-wrap .map-comet { opacity: 1; transform: none; transition: none; }
}

/* --- Screenshot mode: html.no-anim (?noanim=1) disables all animation --- */
.no-anim *, .no-anim *::before, .no-anim *::after {
  transition: none !important;
  animation: none !important;
}
.no-anim [data-reveal], .no-anim .reveal-stagger > *,
.no-anim .map-node, .no-anim .map-comet,
.no-anim .world-map-wrap .leaflet-overlay-pane,
.no-anim .leaflet-tooltip.map-label,
.no-anim .hero-content-slide > * {
  opacity: 1 !important;
  transform: none !important;
}

/* --- Product Detail (CMS) ------------------------------------------------ */
.pd-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 10px;
}
.pd-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: center;
}
.pd-hero-nomedia { grid-template-columns: minmax(0, 820px); justify-content: center; }
.pd-block { margin-bottom: 36px; }
.pd-block:last-of-type { margin-bottom: 0; }
.pd-h {
  position: relative;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--brand-deep);
  margin: 0 0 16px;
  padding-left: 14px;
}
.pd-h::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 2px;
  background: var(--brand-orange);
}
.pd-lead p {
  color: var(--brand-slate);
  font-size: 16px;
  line-height: 1.9;
  margin: 0;
}
.pd-apply {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pd-apply li {
  padding: 7px 14px;
  background: var(--brand-accent-soft);
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  font-size: 14px;
  color: var(--brand-slate);
}
.pd-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--brand-line);
}
.pd-media {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--brand-light);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
}
.pd-media img { width: 100%; height: 100%; object-fit: cover; }

.pd-spec { overflow-x: auto; }
.pd-spec .spec-table { width: 100%; background: var(--white); }

/* 同系列卡片：按实际数量排布，不足 4 个也不会被拉伸成巨图 */
.pd-more .pcard-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
  justify-content: center;
}

.pd-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.pd-cta h2 { font-size: clamp(20px, 2.6vw, 28px); margin: 0 0 6px; }
.pd-cta p { color: rgba(255, 255, 255, 0.7); margin: 0; }
.pd-nav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}
.pd-nav a { color: rgba(255, 255, 255, 0.85); }
.pd-nav a:hover { color: var(--brand-orange); }

@media (max-width: 1080px) {
  .pd-hero { grid-template-columns: 1fr; gap: 36px; }
  .pd-media { order: -1; }
}

/* --- 产品页配色收敛：与 .theme-hr 同思路，作用域内覆盖 token 换成科技蓝 --- */
.theme-product {
  --brand-orange: #00479d;
  --brand-orange-dark: #003576;
  --brand-accent: #9EC5F0;
  --brand-accent-soft: #F0F5FB;
}
/* 写死橙色 rgba 的规则无法通过变量覆盖，在作用域内单独改写 */
.theme-product .btn-primary:hover { box-shadow: 0 8px 24px rgba(0, 71, 157, 0.32); }

/* --- Home: 走进华铸（统一标题 + 旋转圆环数据） --------------------------- */
.section-heading {
  text-align: center;
  margin-bottom: 64px;
}
.section-heading .subtitle {
  display: block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 12px;
}
.section-heading .title {
  display: inline-block;
  position: relative;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.3;
  font-weight: 700;
  color: var(--brand-deep);
  margin: 0;
}
.section-heading .title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  margin: 16px auto 0;
}

.section.about-section {
  background:
    radial-gradient(ellipse 70% 60% at 88% 38%, rgba(0,71,157,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 6% 92%, rgba(0,71,157,0.035) 0%, transparent 60%),
    var(--white);
}
.about-section .about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}
@media (min-width: 1024px) {
  .about-section .about-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: 72px;
  }
}
.about-content { position: relative; }
.about-content .about-lead {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .3px;
  color: #334155;
  margin: 0 0 22px;
}
.about-content .about-intro {
  font-size: 16px;
  line-height: 1.8;
  color: var(--brand-slate);
  margin-bottom: 26px;
}
.about-intro p { margin: 0 0 16px; }
.about-intro p:last-child { margin-bottom: 0; }
/* 查看更多 胶囊按钮（沿用轮播图暗红按钮配色） */
.about-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 32px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--white);
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--btn-red);
  box-shadow: 0 6px 18px rgba(217,56,58,.28);
  transition: all 300ms cubic-bezier(.22,1,.36,1);
}
.about-more i {
  font-style: normal;
  transition: transform 300ms cubic-bezier(.22,1,.36,1);
}
.about-more:hover {
  background: #c22e30;
  color: var(--white);
  box-shadow: 0 12px 28px rgba(217,56,58,.4);
  transform: translateY(-3px);
}
.about-more:hover i { transform: translateX(4px); }

.about-ring {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}
.about-ring::before {
  content: "";
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(0,71,157,0.06) 0%, rgba(0,71,157,0.025) 45%, transparent 66%);
  z-index: 0;
  pointer-events: none;
}
.about-ring::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 60%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed rgba(0,71,157,0.18);
  z-index: 1;
  pointer-events: none;
}
.about-ring-bg {
  position: absolute;
  inset: 2%;
  background: url(../images/about-ring.png) no-repeat center center / contain;
  filter: grayscale(1) brightness(1.15) opacity(0.32);
  animation: aboutRingSpin 42s linear infinite;
  z-index: 1;
}
@keyframes aboutRingSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.about-ring-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 42%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid var(--white);
  background: #dbe6f2;
  box-shadow: 0 16px 38px rgba(15,23,42,0.22), inset 0 0 0 1px rgba(15,23,42,0.04);
  z-index: 2;
}
.about-ring-core img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 58% 42%;
  border-radius: 50%;
  filter: contrast(1.04) saturate(1.06);
}
.about-ring-core::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(0,71,157,0.22);
  animation: aboutCorePulse 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes aboutCorePulse {
  0%, 100% { opacity: 0.2; transform: scale(0.99); }
  50% { opacity: 0.5; transform: scale(1.03); }
}
.about-nodes {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0; padding: 0;
  z-index: 3;
}
.about-nodes li {
  position: absolute;
  width: 116px;
  line-height: 1.4;
  opacity: 0;
}
/* 节点随圆环入场：各自从所在方位飞入 + 回弹 */
.about-ring.is-revealed .about-nodes .n1 { animation: aboutNodeTL .9s cubic-bezier(.34,1.7,.5,1) .28s forwards; }
.about-ring.is-revealed .about-nodes .n2 { animation: aboutNodeTR .9s cubic-bezier(.34,1.7,.5,1) .46s forwards; }
.about-ring.is-revealed .about-nodes .n3 { animation: aboutNodeBL .9s cubic-bezier(.34,1.7,.5,1) .64s forwards; }
.about-ring.is-revealed .about-nodes .n4 { animation: aboutNodeBR .9s cubic-bezier(.34,1.7,.5,1) .82s forwards; }
@keyframes aboutNodeTL {
  0%   { opacity: 0; transform: translate(-56px, -34px) scale(.5); }
  60%  { opacity: 1; transform: translate(6px, 4px) scale(1.12); }
  100% { opacity: 1; transform: none; }
}
@keyframes aboutNodeTR {
  0%   { opacity: 0; transform: translate(56px, -34px) scale(.5); }
  60%  { opacity: 1; transform: translate(-6px, 4px) scale(1.12); }
  100% { opacity: 1; transform: none; }
}
@keyframes aboutNodeBL {
  0%   { opacity: 0; transform: translate(-56px, 34px) scale(.5); }
  60%  { opacity: 1; transform: translate(6px, -4px) scale(1.12); }
  100% { opacity: 1; transform: none; }
}
@keyframes aboutNodeBR {
  0%   { opacity: 0; transform: translate(56px, 34px) scale(.5); }
  60%  { opacity: 1; transform: translate(-6px, -4px) scale(1.12); }
  100% { opacity: 1; transform: none; }
}
.about-nodes li::before {
  content: "";
  position: absolute;
  top: 6px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #CBD5E1;
  box-shadow: 0 0 0 5px rgba(203,213,225,0.28);
  transition: transform .3s ease, box-shadow .3s ease;
}
.about-nodes li p {
  margin: 4px 0 0;
  font-size: 12px;
  color: #64748B;
  letter-spacing: .3px;
}
.about-nodes .about-stat-value {
  font-family: "DIN Alternate", "Inter", "Roboto", "Segoe UI", system-ui, sans-serif;
  font-size: 38px;
  font-weight: 700;
  color: #1E293B;
  line-height: 1.05;
  letter-spacing: -0.5px;
  white-space: nowrap;
  margin: 0;
  transition: color .3s ease;
}
.about-nodes .about-stat-value span {
  font-family: var(--font-zh);
  font-size: 15px;
  font-weight: 700;
  margin-left: 4px;
  color: #64748B;
  letter-spacing: 0;
}
/* 万绿丛中一点红：第二组数据高亮 */
.about-nodes .n2 .about-stat-value,
.about-nodes .n2 .about-stat-value span { color: var(--btn-red); }
.about-nodes li:hover::before {
  transform: scale(1.4);
  box-shadow: 0 0 0 7px rgba(148,163,184,0.32);
}
.about-nodes li:hover .about-stat-value { color: #0F172A; }
.about-nodes .n2:hover .about-stat-value,
.about-nodes .n2:hover .about-stat-value span { color: #c22e30; }
.about-nodes .n1 { top: 8%;  left: 6%;  text-align: left; }
.about-nodes .n1::before { right: -16px; }
.about-nodes .n2 { top: 8%;  right: 6%; text-align: right; }
.about-nodes .n2::before { left: -16px; }
.about-nodes .n3 { bottom: 8%; left: 6%; text-align: left; }
.about-nodes .n3::before { right: -16px; }
.about-nodes .n4 { bottom: 8%; right: 6%; text-align: right; }
.about-nodes .n4::before { left: -16px; }

@media (max-width: 991px) {
  .about-ring { max-width: 400px; }
  .about-nodes li { width: 100px; }
  .about-nodes .about-stat-value { font-size: 26px; }
}
@media (max-width: 640px) {
  .about-ring { max-width: 320px; }
  .about-nodes li { width: 84px; }
  .about-nodes li p { font-size: 11px; }
  .about-nodes .about-stat-value { font-size: 21px; }
  .about-nodes li::before {
    width: 8px; height: 8px;
    box-shadow: 0 0 0 4px rgba(0,71,157,0.14);
  }
  .about-nodes .n1::before, .about-nodes .n3::before { right: -12px; }
  .about-nodes .n2::before, .about-nodes .n4::before { left: -12px; }
}
.no-anim .about-nodes li { opacity: 1 !important; }

/* --- Home: 产品中心（粒子背景 + 悬浮展开卡片） ------------------------- */
.section.products-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #EEF2F7 0%, #F5F8FB 100%);
}
.section.products-section::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 85%; height: 75%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(0,71,157,0.05) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}
#products-particles-canvas {
  position: absolute;
  top: -20%; left: 0;
  width: 100%; height: 140%;
  z-index: 1;
  pointer-events: none;
}
.products-section .container { position: relative; z-index: 10; }
.products-container {
  max-width: 1280px;
  margin: 0 auto;
  overflow: hidden;
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.product-card {
  position: relative;
  height: 380px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(15,23,42,.08);
  transition: transform .8s cubic-bezier(.16,1.1,.3,1), box-shadow .4s ease, opacity .7s ease;
}
.product-card[data-reveal] { transform: translateY(72px) scale(0.9); }
.product-card[data-reveal].is-revealed { transform: none; }
.product-media { position: absolute; inset: 0; z-index: 1; }
.product-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.95) contrast(1.02);
  transform: scale(1.18);
  transition: transform .9s cubic-bezier(.22,1,.36,1);
}
.product-card.is-revealed .product-media img { transform: none; }
.product-media::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(6,17,34,.82) 0%, rgba(6,17,34,.12) 46%, transparent 70%);
  transition: background .45s ease;
}
.product-serial {
  position: absolute; top: 18px; left: 20px; z-index: 3;
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(255,255,255,.55);
}
.product-content {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 0 26px 28px;
  color: #fff;
}
.product-content h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
  transition: transform .5s cubic-bezier(.16,1.1,.3,1);
}
/* 描述与按钮默认收起，hover 时展开 */
.product-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.9);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(18px);
  transition: max-height .55s cubic-bezier(.16,1.1,.3,1), opacity .45s ease,
              transform .55s cubic-bezier(.16,1.1,.3,1), margin .55s ease;
}
.product-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(24px);
  transition: max-height .55s cubic-bezier(.16,1.1,.3,1), opacity .45s ease .08s,
              transform .55s cubic-bezier(.16,1.1,.3,1) .08s, margin .55s ease,
              background .3s ease, border-color .3s ease, color .3s ease;
}
.product-more i { font-style: normal; transition: transform .3s ease; }
.product-card[data-reveal]:hover {
  transform: translateY(-16px) scale(1.02);
  transition-delay: 0s;
  box-shadow: 0 30px 60px rgba(15,23,42,.3);
}
.product-card[data-reveal]:hover .product-media img { transform: scale(1.14); }
.product-card:hover .product-media::after {
  background: linear-gradient(to top, rgba(6,17,34,.94) 0%, rgba(6,17,34,.6) 55%, rgba(6,17,34,.2) 100%);
}
.product-card:hover .product-content h3 { transform: translateY(-2px); }
.product-card:hover .product-desc { max-height: 140px; opacity: 1; transform: none; margin: 16px 0 0; }
.product-card:hover .product-more { max-height: 60px; opacity: 1; transform: none; margin-top: 22px; }
.product-more:hover {
  background: var(--btn-red);
  color: #fff;
  border-color: var(--btn-red);
}
.product-more:hover i { transform: translateX(4px); }

@media (min-width: 640px) and (max-width: 1023px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .product-card { height: 340px; }
}
@media (max-width: 639px) {
  .products-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .product-card { min-width: 82%; height: 360px; flex-shrink: 0; scroll-snap-align: center; }
}
/* 触屏无 hover，文案常驻 */
@media (hover: none) {
  .product-desc { max-height: 140px; opacity: 1; transform: none; margin: 14px 0 0; }
  .product-more { max-height: 60px; opacity: 1; transform: none; margin-top: 18px; }
}
.no-anim .product-media img { transform: none !important; }

/* --- Home: 资质荣誉（横排轮播 + 点击放大） ------------------------------- */
.honor-section { background: #F4F7FA; }
.honor-section .container { position: relative; z-index: 1; }
.honor-carousel { position: relative; }
.honor-carousel-wrap { position: relative; }
.honor-viewport {
  overflow: hidden;
  padding: 12px 4px 16px;
}
.honor-track {
  --honor-per: 4;
  --honor-gap: 20px;
  display: flex;
  gap: var(--honor-gap);
  align-items: stretch;
  will-change: transform;
}
.honor-slide {
  flex: 0 0 calc((100% - (var(--honor-per) - 1) * var(--honor-gap)) / var(--honor-per));
  box-sizing: border-box;
}
.honor-frame {
  width: 100%;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(15,23,42,0.06);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.honor-frame:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(15,23,42,0.12);
}
.honor-frame .img-inner {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
  background: #fff;
}
.honor-frame .img-inner img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
}
/* 逐张上浮入场；动画挂在 slide 上，不干扰 frame 的 hover 位移 */
@keyframes honorCardRise {
  from { opacity: 0; transform: translateY(52px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
.honor-carousel[data-reveal] { opacity: 1; transform: none; }
.honor-carousel:not(.is-revealed) .honor-slide { opacity: 0; }
.honor-carousel.is-revealed .honor-slide {
  animation: honorCardRise .75s cubic-bezier(.22,1,.36,1) both;
}
.honor-carousel.is-revealed .honor-slide:nth-child(1) { animation-delay: .06s; }
.honor-carousel.is-revealed .honor-slide:nth-child(2) { animation-delay: .16s; }
.honor-carousel.is-revealed .honor-slide:nth-child(3) { animation-delay: .26s; }
.honor-carousel.is-revealed .honor-slide:nth-child(4) { animation-delay: .36s; }
.honor-carousel.is-revealed .honor-slide:nth-child(5) { animation-delay: .46s; }
.honor-carousel.is-revealed .honor-slide:nth-child(n+6) { animation-delay: .52s; }

.honor-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #d9dfe7;
  color: #9aa6b4;
  box-shadow: 0 4px 14px rgba(15,23,42,0.14);
  transition: border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.honor-nav:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 6px 18px rgba(0,71,157,0.2);
}
.honor-nav.prev { left: -10px; }
.honor-nav.next { right: -10px; }
.honor-nav::before {
  content: "";
  display: block;
  width: 11px; height: 11px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
}
.honor-nav.prev::before { transform: rotate(-45deg); margin-left: 3px; }
.honor-nav.next::before { transform: rotate(135deg); margin-right: 3px; }
.honor-carousel:not(.is-revealed) .honor-nav { opacity: 0; }
.honor-carousel.is-revealed .honor-nav.prev { animation: honorNavIn .5s cubic-bezier(.34,1.56,.5,1) .5s both; }
.honor-carousel.is-revealed .honor-nav.next { animation: honorNavIn .5s cubic-bezier(.34,1.56,.5,1) .58s both; }
@keyframes honorNavIn {
  from { opacity: 0; transform: translateY(-50%) scale(0.55); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

@media (max-width: 1023px) {
  .honor-track { --honor-per: 3; --honor-gap: 18px; }
}
@media (max-width: 991px) {
  .honor-track { --honor-per: 2; --honor-gap: 16px; }
  .honor-frame .img-inner { height: 260px; }
  .honor-nav.prev { left: 0; }
  .honor-nav.next { right: 0; }
}
@media (max-width: 640px) {
  .honor-track { --honor-per: 1.2; --honor-gap: 12px; }
  .honor-frame .img-inner { height: 220px; padding: 14px; }
  .honor-nav { width: 40px; height: 40px; }
}

/* 点击放大 */
.honor-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15,23,42,.6);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s ease;
}
.honor-lightbox.is-open { display: flex; opacity: 1; }
.honor-lightbox img {
  max-width: 90vw; max-height: 90vh;
  object-fit: contain;
  background: #fff;
  border-radius: 4px;
}
.honor-lightbox .lb-close {
  position: absolute; top: 24px; right: 32px;
  width: 40px; height: 40px;
  line-height: 1;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
}
.honor-lightbox .lb-close:hover { background: #fff; color: #0F172A; }
.honor-lightbox .lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  z-index: 2;
  cursor: pointer;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.honor-lightbox .lb-nav:hover { background: #fff; color: #0F172A; border-color: #fff; }
.honor-lightbox .lb-nav::before {
  content: ""; display: block;
  width: 12px; height: 12px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
}
.honor-lightbox .lb-prev { left: 32px; }
.honor-lightbox .lb-prev::before { transform: rotate(-45deg); margin-left: 4px; }
.honor-lightbox .lb-next { right: 32px; }
.honor-lightbox .lb-next::before { transform: rotate(135deg); margin-right: 4px; }
@media (max-width: 640px) {
  .honor-lightbox .lb-nav { width: 40px; height: 40px; }
  .honor-lightbox .lb-prev { left: 12px; }
  .honor-lightbox .lb-next { right: 12px; }
}
.no-anim .honor-slide { opacity: 1 !important; animation: none !important; }
.no-anim .honor-nav { opacity: 1 !important; animation: none !important; }

/* --- Home: 销售网络（ECharts 地图 + PixiJS 动效覆盖层） ------------------- */
.sales-section { background: #fff; }
.sales-slogan {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
  color: #475569;
}
.world-map-wrap { position: relative; margin-top: 40px; }
/* 入场只能用 translate，不能 scale：缩放会让 getBoundingClientRect 返回缩放后尺寸，
   ECharts convertToPixel 会算出错位的标签坐标 */
.world-map-wrap[data-reveal] { transform: translateY(28px); }
.world-map-wrap[data-reveal].is-revealed { transform: none; }
.world-map-wrap #salesMap {
  transition: filter 1200ms ease .15s, opacity 1200ms ease .15s;
}
.world-map-wrap:not(.is-revealed) #salesMap {
  filter: brightness(0.45) saturate(0.6);
  opacity: .5;
}
.world-map-wrap #salesMapPixi,
.world-map-wrap #salesMapLabels { transition: opacity 900ms ease .5s; }
.world-map-wrap:not(.is-revealed) #salesMapPixi,
.world-map-wrap:not(.is-revealed) #salesMapLabels { opacity: 0; }

#salesMap {
  height: 560px;
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(130% 100% at 50% 42%, #123566 0%, #0a2447 45%, #071630 100%);
  border: 1px solid rgba(60,140,255,.35);
  box-shadow: 0 20px 56px rgba(0,18,60,.55), inset 0 0 120px rgba(20,75,160,.4);
  z-index: 0;
}
#salesMapPixi {
  position: absolute; inset: 0; z-index: 500;
  pointer-events: none; border-radius: 16px; overflow: hidden;
}
#salesMapPixi canvas { width: 100% !important; height: 100% !important; }
#salesMapLabels { position: absolute; inset: 0; z-index: 550; pointer-events: none; }
#salesMapLabels .node-label {
  position: absolute; transform: translate(-50%, -140%);
  white-space: nowrap; padding: 3px 11px; font-size: 11px;
  color: #eaf6ff; letter-spacing: .5px;
  background: rgba(10,30,60,.45);
  border: 1px solid rgba(120,200,255,.35);
  border-radius: 20px;
  backdrop-filter: blur(3px);
  box-shadow: 0 0 8px rgba(0,160,255,.25);
}
#salesMapLabels .node-label.hq {
  color: #fff; font-weight: 600;
  background: linear-gradient(90deg, rgba(255,40,60,.85), rgba(255,80,60,.7));
  border-color: rgba(255,140,140,.55);
  transform: translate(12px, -50%);
}
/* 点阵科技纹理，叠在地图上层 */
.world-map-wrap::before {
  content: '';
  position: absolute; inset: 0; border-radius: 16px; z-index: 400;
  pointer-events: none;
  background-image: radial-gradient(rgba(90,170,255,.18) 1px, transparent 1.4px);
  background-size: 12px 12px;
  mix-blend-mode: screen;
  opacity: .25;
}
.world-map-wrap .map-caption {
  position: absolute; left: 20px; bottom: 20px; z-index: 600;
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 18px; border-radius: 12px;
  background: rgba(8,25,55,.75);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(60,150,255,.4);
  box-shadow: 0 4px 25px rgba(10,40,100,.55), inset 0 0 25px rgba(40,120,255,.12);
  pointer-events: none;
}
.world-map-wrap .map-caption strong {
  color: #cfe4ff; font-size: 15px; letter-spacing: .06em;
  text-shadow: 0 0 12px rgba(80,150,255,.8);
}
.world-map-wrap .map-caption span { color: #95b9e8; font-size: 12px; }

@media (max-width: 768px) { #salesMap { height: 420px; } }
@media (max-width: 640px) {
  .world-map-wrap .map-caption { left: 12px; bottom: 12px; padding: 9px 14px; }
}
.no-anim .world-map-wrap:not(.is-revealed) #salesMap { filter: none; opacity: 1; }

/* ==========================================================================
   走进华铸：证书轮播标题、发展历程、社会责任、企业风采、企业文化、创新优势、联系我们
   ========================================================================== */

/* --- 证书轮播：复用 .honor-* 结构，补标题行 ------------------------------ */
.cert-carousel .cert-name {
  margin: 12px 0 0; font-size: 14px; font-weight: 600; line-height: 1.5;
  color: var(--brand-deep); text-align: center;
}
.cert-carousel .cert-en {
  margin: 4px 0 0; font-size: 11px; letter-spacing: 1px; color: #94A3B8; text-align: center;
}
.cert-carousel .honor-frame .img-inner { height: 200px; }
.cert-carousel.is-portrait .honor-frame .img-inner { height: 420px; }
/* 管理体系竖版图：每屏只显 3 张，让图更显眼 */
.cert-carousel.is-portrait .honor-track { --honor-per: 3; }
/* 企业荣誉：参考管理体系（每屏 3 张），但荣誉图多为横版，高度收一些避免上下大量留白 */
.cert-carousel.is-honor-large .honor-frame .img-inner { height: 300px; }
.cert-carousel.is-honor-large .cert-name { font-size: 15px; margin-top: 14px; }
@media (max-width: 991px) {
  .cert-carousel .honor-frame .img-inner { height: 180px; }
  .cert-carousel.is-portrait .honor-frame .img-inner { height: 360px; }
  .cert-carousel.is-honor-large .honor-frame .img-inner { height: 260px; }
}

/* --- 发展历程 ------------------------------------------------------------ */
.history-section { position: relative; padding: 0; overflow: hidden; background: #fff; }
.htl-hero {
  position: relative;
  background: url("/vendor/ThemeWdf/images/about/plant_aerial.jpg") center 42%/cover no-repeat;
  padding: 64px 0 90px;
}
.htl-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,16,42,.72) 0%, rgba(4,16,42,.62) 100%);
}
.htl-hero > .container { position: relative; z-index: 2; }
.history-section .section-heading .subtitle { color: rgba(255,255,255,.6); }
.history-section .section-heading .title { color: #fff; }
.history-section .section-heading .title::after { background: linear-gradient(90deg, var(--btn-red), var(--color-secondary)); }

.htl-circles {
  position: relative; display: grid;
  grid-template-columns: repeat(var(--htl-cols, 6), 1fr);
  margin-top: 10px;
  width: 100vw; margin-left: calc(50% - 50vw);
}
.htl-circles::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(255,255,255,.35);
}
.htl-circle {
  position: relative; z-index: 2; justify-self: center;
  width: 104px; height: 104px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,16,42,.92); border: 1.5px solid rgba(255,255,255,.7);
  color: #fff; cursor: pointer; padding: 0;
  font-weight: 700; letter-spacing: .5px;
  transition: all .35s cubic-bezier(.22,1,.36,1);
}
.htl-circle .hc-y { font-size: 24px; font-weight: 800; }
.htl-circle .hc-suf { font-size: 13px; margin-left: 2px; font-weight: 600; }
.htl-circle:hover { border-color: #fff; background: rgba(4,16,42,1); transform: scale(1.05); }
.htl-circle.is-active {
  background: var(--btn-red); border-color: var(--btn-red);
  box-shadow: 0 0 0 6px rgba(217,56,58,.18);
}
.htl-circle.is-pop { animation: htlPop .55s cubic-bezier(.22,1,.36,1); }
@keyframes htlPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); box-shadow: 0 0 0 10px rgba(217,56,58,.25); }
  100% { transform: scale(1); }
}

.htl-body { background: #fff; padding: 64px 0 80px; }
.htl-grid { display: grid; grid-template-columns: repeat(var(--htl-cols, 6), 1fr); }
.htl-col { position: relative; padding: 0 22px; }
.htl-col + .htl-col { border-left: 1px solid #EEF2F7; }
.htl-col-year {
  font-size: 30px; font-weight: 800; color: #666;
  line-height: 1; padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid #E5EBF2;
}
.htl-col.is-active .htl-col-year { color: var(--btn-red); border-bottom-color: var(--btn-red); }
.htl-col-events ul { list-style: none; margin: 0; padding: 0; }
.htl-col-events li { position: relative; padding-left: 16px; margin-bottom: 10px; }
.htl-col-events li:last-child { margin-bottom: 0; }
.htl-col-events li p { font-size: 14px; line-height: 1.85; color: #666; margin: 0; }
.htl-col-events li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 5px; height: 5px; border-radius: 50%; background: #888;
}
.htl-col.is-active .htl-col-events li::before { background: var(--btn-red); }
.htl-col.is-active .htl-col-events li { animation: htlItemIn .5s cubic-bezier(.22,1,.36,1) both; }
.htl-col.is-active .htl-col-events li:nth-child(1) { animation-delay: .05s; }
.htl-col.is-active .htl-col-events li:nth-child(2) { animation-delay: .13s; }
.htl-col.is-active .htl-col-events li:nth-child(3) { animation-delay: .21s; }
.htl-col.is-active .htl-col-events li:nth-child(4) { animation-delay: .29s; }
.htl-col.is-active .htl-col-events li:nth-child(n+5) { animation-delay: .37s; }
@keyframes htlItemIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.htl-col.is-active .htl-col-year { animation: htlYearIn .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes htlYearIn { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }

/* --- 社会责任 ------------------------------------------------------------ */
.duty-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.duty-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid #E8ECF1; box-shadow: 0 10px 30px rgba(15,23,42,.08);
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
  isolation: isolate;
}
.duty-card:hover { transform: translateY(-8px); }
.duty-card .duty-media { position: absolute; inset: 0; z-index: 0; background: #EEF3F7; }
.duty-card .duty-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.duty-card:hover .duty-media img { transform: scale(1.07); }
.duty-card::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.duty-card:nth-child(1)::before { background: linear-gradient(180deg, rgba(0,71,157,.05) 0%, rgba(0,71,157,.02) 30%, rgba(0,71,157,.5) 68%, rgba(0,40,100,.78) 100%); }
.duty-card:nth-child(2)::before { background: linear-gradient(180deg, rgba(8,110,95,.05) 0%, rgba(8,110,95,.02) 30%, rgba(8,110,95,.5) 68%, rgba(4,75,65,.78) 100%); }
.duty-card:nth-child(3)::before { background: linear-gradient(180deg, rgba(196,80,40,.05) 0%, rgba(196,80,40,.02) 30%, rgba(196,80,40,.5) 68%, rgba(140,50,20,.78) 100%); }
.duty-card .duty-body { position: relative; z-index: 2; padding: 36px 32px 34px; color: #fff; }
.duty-card .duty-body::before {
  content: ""; display: block; width: 44px; height: 3px; margin-bottom: 18px;
  border-radius: 2px; transition: width .45s ease;
  background: linear-gradient(90deg, #fff, rgba(255,255,255,.3));
}
.duty-card:nth-child(1) .duty-body::before { background: linear-gradient(90deg, #6FB5F5, rgba(111,181,245,.3)); }
.duty-card:nth-child(2) .duty-body::before { background: linear-gradient(90deg, #4FD1B8, rgba(79,209,184,.3)); }
.duty-card:nth-child(3) .duty-body::before { background: linear-gradient(90deg, #FF9A6A, rgba(255,154,106,.3)); }
.duty-card:hover .duty-body::before { width: 72px; }
.duty-card h3 {
  font-size: 26px; font-weight: 700; margin: 0 0 12px; letter-spacing: 4px; color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.duty-card p {
  font-size: 15px; line-height: 1.9; margin: 0; color: rgba(255,255,255,.9);
  text-shadow: 0 1px 8px rgba(0,0,0,.25);
}
.duty-card:nth-child(1):hover { box-shadow: 0 26px 60px rgba(0,71,157,.28); }
.duty-card:nth-child(2):hover { box-shadow: 0 26px 60px rgba(8,110,95,.28); }
.duty-card:nth-child(3):hover { box-shadow: 0 26px 60px rgba(196,80,40,.28); }

/* --- 企业风采：复用 .honor-* 轮播结构，卡片为 3:2 实拍图 + 底部渐变字幕 ---- */
.gallery-carousel .honor-track { --honor-per: 3; }
.gallery-item {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 10px 30px rgba(15,23,42,.08); transition: box-shadow .45s ease;
}
.gallery-item:hover { box-shadow: 0 20px 46px rgba(0,71,157,.18); }
.gallery-item .gi-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #EEF4FB; }
.gallery-item .gi-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s cubic-bezier(.22,1,.36,1);
}
.gallery-item:hover .gi-media img { transform: scale(1.06); }
.gallery-item .gi-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 60px 26px 24px; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(4,16,42,.55) 45%, rgba(4,16,42,.92));
}
.gallery-item .gi-caption strong {
  display: block; font-size: 19px; font-weight: 700; margin-bottom: 6px;
  padding-left: 12px; border-left: 3px solid var(--btn-red); line-height: 1.3;
}
.gallery-item .gi-caption span {
  display: block; font-size: 14px; color: rgba(255,255,255,.72);
  padding-left: 15px; line-height: 1.6;
}
@media (max-width: 991px) {
  .gallery-carousel .honor-track { --honor-per: 2; }
}
@media (max-width: 575px) {
  .gallery-carousel .honor-track { --honor-per: 1.15; }
  .gallery-item .gi-caption { padding: 44px 18px 18px; }
  .gallery-item .gi-caption strong { font-size: 16px; }
}

/* --- 企业文化 ------------------------------------------------------------ */
/* --- 企业文化：3 大卡片 -------------------------------------------------- */
.culture-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.cul-card {
  position: relative;
  padding: 60px 40px 48px;
  border-radius: var(--radius-lg);
  background: #EDEFF2;
  text-align: center;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, background .4s ease, color .4s ease;
}
.cul-card::before {
  content: '';
  position: absolute;
  left: 50%; top: 0;
  width: 0; height: 4px;
  background: var(--btn-red);
  transform: translateX(-50%);
  transition: width .4s ease;
}
.cul-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 44px rgba(15,23,42,.14);
}
.cul-card:hover::before { width: 100%; }
.cul-card .cul-icon {
  width: 64px; height: 64px; margin: 0 auto 24px;
  display: flex; align-items: center; justify-content: center;
  color: var(--btn-red);
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.cul-card .cul-icon svg { width: 56px; height: 56px; }
.cul-card h3 {
  font-size: 22px; font-weight: 700; margin: 0 0 18px;
  color: var(--brand-deep);
}
.cul-card p {
  font-size: 16px; line-height: 1.9; margin: 0;
  color: #6b7280;
}
.cul-card:hover .cul-icon { transform: scale(1.12); }

/* --- 创新优势 ------------------------------------------------------------ */
.innov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 56px; }
.innov-text p { font-size: 15px; line-height: 2.05; color: var(--brand-slate); margin: 0 0 16px; }
.innov-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15,23,42,.14);
}
.innov-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.innov-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.innov-stat {
  position: relative;
  padding: 24px 16px 8px;
  text-align: center;
}
.innov-stat::before {
  content: "COMPANY PROFILE";
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(217,56,58,.07);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.innov-stat .is-value {
  position: relative;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--btn-red);
}
.innov-stat .is-value em { font-style: normal; }
.innov-stat .is-value span { font-size: 0.5em; font-weight: 700; margin-left: 3px; color: var(--btn-red); vertical-align: super; }
.innov-stat .is-label {
  margin: 14px 0 0;
  font-size: 14px;
  color: #6b7280;
}
.innov-partners { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.innov-partners span {
  padding: 9px 20px; border-radius: 999px; font-size: 14px;
  color: var(--color-primary); background: rgba(0,71,157,.06); border: 1px solid rgba(0,71,157,.14);
  transition: all .3s ease;
}
.innov-partners span:hover {
  background: var(--color-primary); color: #fff; border-color: var(--color-primary);
  transform: translateY(-2px);
}

/* --- 联系我们 ------------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.contact-card {
  background: #fff; border: 1px solid var(--brand-line); border-radius: var(--radius-lg);
  padding: 40px 36px; box-shadow: 0 6px 28px rgba(15,23,42,.05);
}
.contact-card h3 { font-size: 20px; font-weight: 700; color: var(--brand-deep); margin: 0 0 26px; }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 0; border-bottom: 1px dashed rgba(0,71,157,.12);
}
.contact-list li:last-child { border-bottom: 0; }
.contact-list .ci-icon {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  background: rgba(0,71,157,.07); display: flex; align-items: center; justify-content: center;
}
.contact-list .ci-icon svg { width: 20px; height: 20px; fill: none; stroke: var(--color-primary); stroke-width: 1.7; }
.contact-list .ci-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.contact-list .ci-label { font-size: 13px; color: #94A3B8; margin-bottom: 4px; }
.contact-list .ci-value { font-size: 16px; color: var(--brand-deep); font-weight: 500; line-height: 1.6; word-break: break-all; }
.contact-map {
  border-radius: var(--radius-lg); overflow: hidden; min-height: 320px;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(56,189,248,.18), transparent 60%),
    linear-gradient(135deg, #FFFFFF 0%, #F4F8FC 60%, #EAF6FF 100%);
  border: 1px solid rgba(56,189,248,.35);
  box-shadow: 0 14px 36px rgba(0,71,157,.08);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px;
}
.contact-map .cm-title { font-size: 22px; font-weight: 700; letter-spacing: 2px; margin-bottom: 14px; color: var(--brand-deep); }
.contact-map .cm-addr { font-size: 15px; line-height: 1.9; color: var(--brand-slate); max-width: 380px; margin: 0; }

/* --- 响应式 -------------------------------------------------------------- */
@media (max-width: 991px) {
  .htl-hero { padding: 50px 0 60px; }
  .htl-circles { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
  .htl-circles::before { display: none; }
  .htl-circle { width: 80px; height: 80px; }
  .htl-circle .hc-y { font-size: 19px; }
  .htl-body { padding: 44px 0 56px; }
  .htl-grid { grid-template-columns: repeat(2, 1fr); }
  .htl-col { padding: 18px 20px; }
  .htl-col:nth-child(odd) { border-left: 0; }
  .htl-col:nth-child(n+3) { border-top: 1px solid #EEF2F7; }
  .duty-grid { grid-template-columns: 1fr; }
  .culture-cards { grid-template-columns: 1fr; }
  .cul-card { padding: 40px 28px; }
  .innov-grid { grid-template-columns: 1fr; gap: 32px; margin-bottom: 40px; }
  .innov-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-card { padding: 30px 24px; }
}
@media (max-width: 575px) {
  .htl-circles { grid-template-columns: repeat(2, 1fr); }
  .htl-grid { grid-template-columns: 1fr; }
  .htl-col { border-left: 0 !important; padding: 18px 4px; }
  .htl-col + .htl-col { border-top: 1px solid #EEF2F7; }
  .htl-col-year { font-size: 26px; }
  .innov-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ===== 产品及服务 · 系列大图页 (product-series) ===== */
/* 每块都配了实景底图，统一深色遮罩：左侧压暗保证文案可读，右侧留出图片主体 */
.ps-block {
  position: relative;
  padding: clamp(70px, 8.5vw, 150px) 0;
  background: var(--brand-deep) center/cover no-repeat;
  color: #fff;
}
.ps-block::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(8, 14, 26, .95) 0%, rgba(8, 14, 26, .88) 42%, rgba(8, 14, 26, .55) 68%, rgba(8, 14, 26, .3) 100%);
}
.ps-block:not([style*="background-image"]) {
  background: linear-gradient(135deg, #1A2332 0%, #223047 55%, #16233A 100%);
}
.ps-block:not([style*="background-image"])::before { display: none; }
.ps-block > .container { position: relative; z-index: 2; }
.ps-block + .ps-block { border-top: 1px solid rgba(255, 255, 255, .06); }

/* 每块换一个色调，避免连续深色看起来是同一屏 */
.ps-block:nth-child(4n+1)::before {
  background: linear-gradient(100deg, rgba(7, 12, 24, .95) 0%, rgba(9, 15, 28, .88) 42%, rgba(11, 19, 34, .54) 68%, rgba(12, 21, 38, .26) 100%);
}
.ps-block:nth-child(4n+2)::before {
  background: linear-gradient(100deg, rgba(6, 26, 42, .95) 0%, rgba(8, 38, 58, .88) 42%, rgba(10, 56, 80, .56) 68%, rgba(12, 72, 100, .3) 100%);
}
.ps-block:nth-child(4n+3)::before {
  background: linear-gradient(100deg, rgba(20, 14, 40, .95) 0%, rgba(30, 20, 58, .88) 42%, rgba(44, 30, 84, .56) 68%, rgba(58, 40, 108, .3) 100%);
}
.ps-block:nth-child(4n+4)::before {
  background: linear-gradient(100deg, rgba(8, 26, 24, .95) 0%, rgba(10, 40, 36, .88) 42%, rgba(12, 60, 52, .56) 68%, rgba(14, 78, 66, .3) 100%);
}

/* 标题下划线跟随区块色调，进一步强化切换感 */
.ps-block:nth-child(4n+2) .ps-msg h2::after { background: #2FA8DF; }
.ps-block:nth-child(4n+3) .ps-msg h2::after { background: #8A7BE8; }
.ps-block:nth-child(4n+4) .ps-msg h2::after { background: #2FBF95; }

.ps-msg { width: min(560px, 100%); }
.ps-img {
  width: 240px; height: 240px; margin-bottom: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 18px; overflow: hidden;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.ps-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ps-msg h2 {
  position: relative;
  padding-bottom: 18px; margin-bottom: 22px;
  font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.ps-msg h2::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 52px; height: 3px; background: var(--brand-orange);
}
.ps-msg p {
  font-size: clamp(14px, 1.05vw, 16px); line-height: 2;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}
.ps-msg .ps-label {
  font-weight: bold;
  font-size: 18px;
  color: rgba(255, 255, 255, .9);
  margin-right: 8px;
}
.ps-msg .ps-extra {
  margin-top: 14px; padding-top: 14px;
  font-size: clamp(13px, .95vw, 15px);
  color: rgba(255, 255, 255, .7);
  border-top: 1px solid rgba(255, 255, 255, .2);
}

.ps-more {
  display: inline-block; margin-top: 40px;
  padding: 0 34px; height: 52px; line-height: 50px;
  font-size: 15px; color: #fff;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 26px;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all .35s ease;
}
.ps-more::after { content: ' →'; }
.ps-more:hover { color: #fff; background: var(--brand-orange); border-color: var(--brand-orange); }

@media (max-width: 840px) {
  .ps-block { padding: 56px 0; }
  .ps-block::before {
    background: linear-gradient(180deg, rgba(10, 17, 32, .88) 0%, rgba(10, 17, 32, .74) 100%);
  }
  .ps-msg { width: 100%; }
  .ps-img { width: 168px; height: 168px; margin-bottom: 20px; }
  .ps-msg .ps-label { font-size: 16px; }
  .ps-more { margin-top: 28px; }
}

/* ==========================================================================
   销售网络（栏目模板 network.blade.php）
   ========================================================================== */
.network-slogan {
  text-align: center;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--brand-deep);
  margin: 0 0 48px;
}
.network-slogan::after {
  content: ""; display: block; width: 60px; height: 3px; margin: 18px auto 0;
  background: linear-gradient(90deg, var(--btn-red), var(--color-secondary));
  border-radius: 2px;
}
.network-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.network-card {
  display: flex; flex-direction: column;
  padding: 40px 36px; background: var(--white);
  border: 1px solid var(--brand-line); border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
  transition: transform .4s ease, box-shadow .4s ease;
}
.network-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(0, 71, 157, .14); }
.network-card .nc-icon {
  width: 60px; height: 60px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.network-card.domestic .nc-icon { background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); }
.network-card.global .nc-icon { background: linear-gradient(135deg, var(--btn-red), #E54B4D); }
.network-card .nc-icon svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 1.7; }
.network-card .nc-en {
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--tech-blue); margin-bottom: 6px;
}
.network-card.global .nc-en { color: var(--btn-red); }
.network-card h3 { font-size: 24px; font-weight: 800; color: var(--brand-deep); margin: 0 0 16px; }
.network-card > p { font-size: 15px; line-height: 1.95; color: var(--brand-slate); margin: 0 0 24px; }

.nc-metas, .nc-body {
  margin-top: auto; padding-top: 22px;
  border-top: 1px dashed var(--brand-line);
}
.nc-meta + .nc-meta { margin-top: 18px; }
.nc-meta-label {
  display: block; font-size: 14px; font-weight: 700; color: var(--brand-deep);
  padding-left: 14px; position: relative; margin-bottom: 5px;
}
.nc-meta-label::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--tech-blue);
}
.network-card.global .nc-meta-label::before { background: var(--btn-red); }
.nc-meta-value { display: block; padding-left: 14px; font-size: 14px; line-height: 1.8; color: var(--brand-slate); }
.nc-body { font-size: 14px; line-height: 1.9; color: var(--brand-slate); }
.nc-body p { margin: 0 0 10px; }
.nc-body p:last-child { margin-bottom: 0; }

.nc-btn {
  align-self: flex-start; margin-top: 24px;
  display: inline-flex; align-items: center; gap: 8px;
}
.nc-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.network-card.domestic .nc-btn { background: var(--color-primary); border-color: var(--color-primary); }
.network-card.domestic .nc-btn:hover { background: var(--tech-blue); border-color: var(--tech-blue); }
.network-card.global .nc-btn { background: var(--btn-red); border-color: var(--btn-red); }
.network-card.global .nc-btn:hover { background: #C22F31; border-color: #C22F31; }

.network-banner {
  grid-column: 1 / -1; margin-top: 12px;
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 36px; align-items: center;
  padding: 46px 52px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #F3F8FD, #EDF3FA);
  border: 1px solid rgba(0, 71, 157, .10);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
}
.network-banner h3 {
  font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; margin: 0; line-height: 1.5;
  color: var(--color-primary); padding-left: 18px; border-left: 4px solid var(--color-secondary);
}
.network-banner p { font-size: 15px; line-height: 2; margin: 0; color: var(--brand-slate); }

@media (max-width: 991px) {
  .network-grid { grid-template-columns: 1fr; }
  .network-card { padding: 32px 26px; }
  .network-banner { grid-template-columns: 1fr; gap: 16px; padding: 36px 28px; }
}