/* ============================================================
   SAOJIE TECHNOLOGY — Foreign Trade Site Shared Stylesheet
   Brand: teal-green gradient (from logo) + red accent
   Reference layout: firstmold.com
   ============================================================ */
/* ============================================================
   Local self-hosted fonts (Inter variable + Poppins static)
   SIL Open Font License — free for commercial use.
   Files: style/fonts/
   ============================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/Inter-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Poppins-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Poppins-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Poppins-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/Poppins-ExtraBold.woff2') format('woff2');
}

:root {
  /* ============ 品牌配色（取自 logo） ============
     --brand      主蓝 #3078e0（logo 文字/环形主体色）
     --brand-2    青 teal #0ea8a0（logo 渐变环的青端）
     --accent     红 #c82028（logo 方形点缀）
     --ink/--bg   深蓝青 / 浅蓝灰，用于文字与页面底 */
  --brand: #3078e0;
  --brand-2: #0ea8a0;
  --brand-soft: #e9f2fc;
  --brand-dark: #1f63c4;
  --ink: #0b2e3b;
  --ink-2: #3d5a66;
  --gray: #687b8c;
  --line: #e2ecf2;
  --accent: #c82028;
  --accent-dark: #a5171e;
  --bg: #f4f8fb;
  --white: #ffffff;
  --radius: 14px;
  --shadow: 0 10px 34px rgba(31, 99, 196, .10);
  --shadow-lg: 0 24px 60px rgba(31, 99, 196, .16);
  --container: 1440px;

  /* ============ 深色区（hero / footer / cta）文字色阶 ============
     深色底上的文字统一走这三档，避免各处手写 #cfe0ef / #8fb4cc 不一致 */
  --on-dark: #ffffff;
  --on-dark-2: #cfe0ef;
  --on-dark-3: #8fb4cc;
  --on-dark-line: rgba(255, 255, 255, .18);

  /* ============ 强调青（深色底上的高亮/eyebrow） ============ */
  --brand-glow: #3fd6c4;

  /* ============ 动效令牌（全站统一，勿在组件里手写时长） ============
     --dur-fast   微型反馈：图标、下划线、颜色变化
     --dur        标准交互：按钮、链接、输入框、卡片 hover（默认用这个）
     --dur-slow   较大位移：图片缩放、抽屉、大面积展开
     --ease       标准缓动：通用出入
     --ease-out   强调缓动：hover 抬起（有"减速落位"的手感） */
  --dur-fast: .18s;
  --dur: .28s;
  --dur-slow: .5s;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  /* 柔性缓动：起步快、收尾极慢，用于滚动淡入 */
  --ease-soft: cubic-bezier(.16, .84, .44, 1);

  /* 卡片 hover 统一位移（全站只用一个值，保证手感一致） */
  --lift: -5px;
  --lift-sm: -3px;

  /* 统一焦点环（键盘可达性） */
  --focus-ring: 0 0 0 3px rgba(48, 120, 224, .35);
  --focus-ring-dark: 0 0 0 3px rgba(255, 255, 255, .45);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 86px
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
.font-display {
  font-family: 'Poppins', 'Inter', sans-serif;
  line-height: 1.3
}

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

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

ul {
  list-style: none
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px)
}

.section {
  padding: 80px 0
}

.section-alt {
  background: var(--bg)
}

.sec-head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center
}

.sec-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: var(--brand-soft);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.sec-head h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  color: var(--ink)
}

.sec-head h2 span {
  color: var(--brand)
}

.sec-head p {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 16.5px
}

.eyebrow-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: var(--brand-soft);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: var(--dur-fast);
  border: 2px solid transparent;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 22px rgba(200, 32, 40, .28)
}

.btn-primary:hover {
  background: var(--accent-dark);
  transform: translateY(var(--lift-sm))
}

.btn-brand {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  box-shadow: 0 8px 22px rgba(48, 120, 224, .28)
}

.btn-brand:hover {
  transform: translateY(var(--lift-sm));
  box-shadow: 0 12px 30px rgba(48, 120, 224, .38)
}

.btn-outline {
  border-color: var(--brand);
  color: var(--brand);
  background: transparent
}

.btn-outline:hover {
  background: var(--brand);
  color: #fff
}

.btn-white {
  background: #fff;
  color: var(--brand-dark)
}

.btn-white:hover {
  background: var(--brand-soft);
  transform: translateY(var(--lift-sm))
}

/* ---------- Top bar ---------- */
.topbar {
  background: var(--ink);
  color: #cfe0ef;
  font-size: 13.5px
}

.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  gap: 12px
}

.topbar a {
  color: #cfe0ef;
  transition: var(--dur-fast)
}

.topbar a:hover {
  color: #fff
}

.topbar .tb-left {
  display: flex;
  gap: 20px;
  align-items: center
}

.topbar .tb-right {
  display: flex;
  gap: 18px;
  align-items: center
}

.topbar .tb-right .sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .25)
}

.topbar svg {
  vertical-align: -2px;
  margin-right: 5px
}

@media(max-width:768px) {
  .topbar .tb-left .hide-sm {
    display: none
  }

  .topbar .tb-right {
    display: none
  }

  .topbar .tb-left {
    gap: 12px
  }
}

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
  transition: var(--dur);
  border-bottom: 1px solid transparent
}

.header.scrolled {
  box-shadow: 0 6px 24px rgba(11, 46, 59, .08);
  border-color: var(--line)
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
  gap: 20px
}

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

.logo img {
  height: 56px;
  width: auto
}

.logo .logo-txt {
  line-height: 1.1
}

.logo .logo-txt b {
  font-family: 'Poppins';
  font-size: 20px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: .5px
}

.logo .logo-txt small {
  display: block;
  font-size: 9.5px;
  letter-spacing: .3em;
  color: var(--gray);
  text-transform: uppercase
}

@media(max-width:768px) {
  .logo img {
    height: 48px
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 35px
}

.nav>li {
  position: relative
}

.nav>li>a {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  transition: var(--dur-fast);
  padding: 6px 0
}

.nav>li>a:hover,
.nav>li.active>a {
  color: var(--brand)
}

.nav>li>a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--brand);
  transition: var(--dur);
  border-radius: 2px
}

.nav>li>a:hover::after,
.nav>li.active>a::after {
  width: 100%
}

.nav .btn {
  margin-left: 6px;
  padding: 11px 20px;
  font-size: 14px
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: var(--brand-soft);
  border: 2px solid var(--brand);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  width: 46px;
  height: 44px
}

.hamburger span {
  width: 26px;
  height: 3px;
  background: var(--brand);
  border-radius: 3px;
  transition: var(--dur)
}

.hamburger.open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg)
}

.hamburger.open span:nth-child(2) {
  opacity: 0
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg)
}

@media(max-width:1024px) {
  .nav {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100vh;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 34px 30px 30px;
    gap: 8px;
    box-shadow: -20px 0 50px rgba(11, 46, 59, .15);
    transition: var(--dur);
    z-index: 998
  }

  .nav.open {
    right: 0
  }

  .nav>li {
    width: 100%
  }

  .nav>li>a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font-size: 16px
  }

  .nav .btn {
    margin: 18px 0 0;
    width: 100%
  }

  .hamburger {
    display: flex;
    z-index: 999
  }
}

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 46, 59, .5);
  z-index: 997;
  opacity: 0;
  pointer-events: none;
  transition: var(--dur)
}

.nav-overlay.show {
  opacity: 1;
  pointer-events: auto
}

/* ---------- Dropdown / Mega menu (二级栏目) ---------- */
.nav .has-drop {
  position: relative
}

.nav .has-drop>.drop-link {
  display: flex;
  align-items: center;
  gap: 5px
}

.nav .has-drop>.drop-link .chev {
  transition: var(--dur-fast)
}

.nav .has-drop:hover>.drop-link .chev,
.nav .has-drop.open>.drop-link .chev {
  transform: rotate(180deg)
}

.dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 22px 55px rgba(11, 46, 59, .18);
  border: 1px solid var(--line);
  padding: 14px;
  min-width: 230px;
  opacity: 0;
  visibility: hidden;
  transition: var(--dur);
  z-index: 990;
}

.dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px
}

.nav .has-drop:hover>.dropdown,
.nav .has-drop.open>.dropdown,
.nav .has-drop:focus-within>.dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0)
}

.dropdown.mega {
  width: 640px
}

.dropdown .drop-head {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 默认每行固定 3 个 */
  gap: 14px
}

.dropdown .drop-col {
  display: grid;
  gap: 4px;
  align-content: start
}


@media(min-width:1025px) {
  .dropdown .drop-head:has(> .drop-col:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr)
  }
}

.dropdown .drop-title {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  padding: 6px 12px 4px
}

.dropdown a {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 9px 12px;
  border-radius: 9px;
  transition: var(--dur-fast);
  border-left: 3px solid transparent
}

.dropdown a:hover {
  background: var(--brand-soft);
  border-left-color: var(--brand)
}

.dropdown a b {
  font-size: 14px;
  color: var(--ink);
  font-weight: 600
}

.dropdown a small {
  font-size: 12px;
  color: var(--gray);
  font-weight: 400
}

.dropdown.simple a {
  flex-direction: row;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink)
}

.dropdown.simple a:hover {
  color: var(--brand)
}

@media(max-width:1024px) {
  .nav .has-drop {
    position: static
  }

  .dropdown,
  .dropdown.mega {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--brand-soft);
    border-radius: 0;
    padding: 2px 0 2px 8px;
    width: 100%;
    min-width: 0;
    display: none;
    margin: 0 0 8px
  }

  .dropdown::before {
    display: none
  }

  .nav .has-drop.open .dropdown {
    display: block
  }

  .nav .has-drop>.drop-link {
    justify-content: space-between
  }

  .dropdown .drop-head {
    flex-direction: column;
    gap: 8px;
    padding: 0
  }

  .dropdown a b {
    font-size: 14px
  }

  .dropdown a small {
    font-size: 12px
  }
}

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  color: #fff;
  overflow: hidden
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0
}

.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(6, 28, 48, .93) 0%, rgba(8, 44, 66, .78) 42%, rgba(31, 99, 196, .35) 100%)
}

.hero .container {
  position: relative;
  z-index: 2;
  padding-top: 110px;
  padding-bottom: 120px
}

.hero-inner {
  max-width: 680px
}

.hero .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(6px);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 22px;
}

.hero .badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34e3c0;
  box-shadow: 0 0 0 4px rgba(63, 214, 196, .25);
  display: inline-block
}

.hero h1 {
  font-size: clamp(30px, 4.6vw, 56px);
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1.15
}

.hero h1 em {
  font-style: normal;
  color: #3fd6c4
}

.hero p.lead {
  margin: 22px 0 32px;
  font-size: clamp(15px, 1.6vw, 18px);
  color: #d6e8f0;
  max-width: 580px
}

.hero .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px
}

.hero .cert-row {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px
}

.hero .cert-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #eaf7f5;
}

.hero .cert-chip svg {
  color: #3fd6c4
}

.hero-card {
  position: absolute;
  right: 40px;
  bottom: 44px;
  z-index: 2;
  display: none;
  background: rgba(255, 255, 255, .10);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 18px;
  padding: 22px 26px;
  max-width: 340px;
  color: #fff;
}

.hero-card h4 {
  font-size: 16px;
  margin-bottom: 6px;
  color: #fff
}

.hero-card p {
  font-size: 13.5px;
  color: #d6e8f0
}

.hero-card .hc-num {
  font-size: 30px;
  font-weight: 800;
  color: #3fd6c4
}

@media(min-width:1200px) {
  .hero-card {
    display: block
  }
}

@media(max-width:768px) {
  .hero .container {
    padding-top: 70px;
    padding-bottom: 84px
  }
}

/* ---------- Inner page hero / breadcrumb ---------- */
.page-hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  padding: 74px 0 64px;
  background: linear-gradient(120deg, #083043 0%, #1f63c4 60%, #3078e0 130%)
}

.page-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(63, 214, 196, .25), transparent 70%);
  pointer-events: none
}

.page-hero .container {
  position: relative;
  z-index: 1
}

.page-hero h1 {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  margin-bottom: 12px
}

.page-hero p {
  color: #cfe0ef;
  max-width: 640px;
  font-size: 16px
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #8fb4cc;
  margin-bottom: 18px;
  flex-wrap: wrap
}

.breadcrumb a {
  color: #cfe0ef;
  transition: var(--dur-fast)
}

.breadcrumb a:hover {
  color: #fff
}

.breadcrumb .sep {
  color: #5d918a
}

.breadcrumb .cur {
  color: #3fd6c4
}

/* ---------- Stats strip ---------- */
.stats {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  padding: 46px 0
}

.stats .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px
}

.stat {
  text-align: center;
  padding: 8px
}

.stat .num {
  font-family: 'Poppins';
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 800;
  line-height: 1
}

.stat .num sup {
  font-size: .55em
}

.stat .lbl {
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 600;
  opacity: .92;
  letter-spacing: .03em
}

@media(max-width:820px) {
  .stats .container {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px
  }
}

/* ---------- Products (home grid) ---------- */
.products {
  background: var(--bg)
}

.prod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch
}

.prod-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--dur);
  display: flex;
  flex-direction: column;
}

.prod-card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-lg);
  border-color: transparent
}

.prod-card .thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #eef4f3
}

.prod-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--dur-slow)
}

.prod-card:hover .thumb img {
  transform: scale(1.06)
}

.prod-card .thumb::after {
  content: "View Details →";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent, rgba(31, 99, 196, .9));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 26px 18px 12px;
  opacity: 0;
  transition: var(--dur)
}

.prod-card:hover .thumb::after {
  opacity: 1
}

.prod-card .body {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1
}

.prod-card .tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 8px
}

.prod-card h3 {
  font-size: 17.5px;
  font-weight: 700;
  margin-bottom: 8px
}

.prod-card p {
  font-size: 13.5px;
  color: var(--ink-2);
  flex: 1
}

.prod-card .spec {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.prod-card .spec span {
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px
}

.prod-more {
  text-align: center;
  margin-top: 44px
}

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

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

/* ---------- Industries ---------- */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.ind-item {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--dur);
}

.ind-item:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow);
  transform: translateY(var(--lift-sm))
}

.ind-item .ind-img {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg)
}

.ind-item .ind-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--dur-slow)
}

.ind-item:hover .ind-img img {
  transform: scale(1.07)
}

.ind-item .ind-body {
  padding: 18px 20px 20px
}

.ind-item h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 3px
}

.ind-item p {
  font-size: 13px;
  color: var(--ink-2)
}

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

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

/* ---------- Why choose us ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.why-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: var(--dur);
  position: relative;
  overflow: hidden
}

.why-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  opacity: 0;
  transition: var(--dur)
}

.why-card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-lg)
}

.why-card:hover::before {
  opacity: 1
}

.why-card .no {
  font-family: 'Poppins';
  font-size: 15px;
  font-weight: 800;
  color: var(--brand);
  letter-spacing: .1em;
  margin-bottom: 14px
}

.why-card .ico {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand);
  margin-bottom: 18px
}

.why-card h3 {
  font-size: 18px;
  margin-bottom: 10px
}

.why-card p {
  font-size: 14px;
  color: var(--ink-2)
}

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

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

/* ---------- Process ---------- */
.process {
  background: var(--bg)
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px
}

.step {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 26px 28px;
  transition: var(--dur)
}

.step:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(var(--lift))
}

.step .s-num {
  font-family: 'Poppins';
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  margin-bottom: 18px
}

.step h3 {
  font-size: 17px;
  margin-bottom: 8px
}

.step p {
  font-size: 13.5px;
  color: var(--ink-2)
}

.step .s-arrow {
  position: absolute;
  right: -14px;
  top: 44px;
  color: var(--brand-2);
  z-index: 2;
  display: none
}

@media(min-width:1100px) {
  .step .s-arrow {
    display: block
  }
}

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

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

/* ---------- Quality split ---------- */
.ql-wrap {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center
}

.ql-media {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-lg)
}

.ql-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 420px
}

.ql-media .ql-chip {
  position: absolute;
  left: 22px;
  bottom: 22px;
  background: rgba(255, 255, 255, .94);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: var(--shadow);
  display: flex;
  gap: 16px;
  align-items: center
}

.ql-chip .n {
  font-family: 'Poppins';
  font-size: 28px;
  font-weight: 800;
  color: var(--brand)
}

.ql-chip .t {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2)
}

.ql-text h2 {
  font-size: clamp(24px, 3vw, 34px);
  margin-bottom: 18px
}

.ql-text h2 span {
  color: var(--brand)
}

.ql-text>p {
  color: var(--ink-2);
  margin-bottom: 24px
}

.tests {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.test {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px
}

.test svg {
  flex-shrink: 0;
  color: var(--brand);
  margin-top: 2px
}

.test b {
  display: block;
  font-size: 14px
}

.test span {
  font-size: 12.5px;
  color: var(--ink-2)
}

@media(max-width:960px) {
  .ql-wrap {
    grid-template-columns: 1fr;
    gap: 36px
  }
}

/* ---------- Factory ---------- */
.factory {
  background: var(--bg)
}

.fact-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 26px
}

.fact-stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px
}

.fact-stat b {
  font-family: 'Poppins';
  font-size: 26px;
  font-weight: 800;
  color: var(--brand);
  display: block
}

.fact-stat span {
  font-size: 13px;
  color: var(--ink-2)
}

/* ---------- Certifications ---------- */
.cert-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.cert-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  text-align: center;
  transition: var(--dur)
}

.cert-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(var(--lift))
}

.cert-card img.cert-img {
  max-height: 190px;
  margin: 0 auto 16px;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(11, 46, 59, .12)
}

.cert-card .cert-ico {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand)
}

.cert-card h3 {
  font-size: 16.5px;
  margin-bottom: 6px
}

.cert-card p {
  font-size: 13px;
  color: var(--ink-2)
}

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

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

/* ---------- Testimonials ---------- */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.testi-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  position: relative;
  transition: var(--dur)
}

.testi-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(var(--lift))
}

.testi-card .quote {
  font-size: 54px;
  line-height: 1;
  color: var(--brand-2);
  font-family: Georgia, serif;
  height: 30px
}

.testi-card p {
  font-size: 14.5px;
  color: var(--ink-2);
  font-style: italic;
  margin: 14px 0 22px
}

.testi-card .who {
  display: flex;
  align-items: center;
  gap: 14px
}

.testi-card .who .av {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-weight: 800;
  font-family: 'Poppins'
}

.testi-card .who b {
  display: block;
  font-size: 14.5px
}

.testi-card .who span {
  font-size: 12.5px;
  color: var(--gray)
}

.stars {
  color: #f5b50a;
  letter-spacing: 2px;
  font-size: 14px
}

@media(max-width:900px) {
  .testi-grid {
    grid-template-columns: 1fr
  }
}

/* ---------- News ---------- */
.news {
  background: var(--bg)
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.news-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--dur);
  display: flex;
  flex-direction: column
}

.news-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(var(--lift))
}

.news-card .n-date {
  font-size: 12.5px;
  color: var(--gray);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px
}

.news-card .n-date::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand)
}

.news-card .n-body {
  padding: 22px 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column
}

.news-card h3 {
  font-size: 16.5px;
  line-height: 1.5;
  margin-bottom: 10px
}

.news-card p {
  font-size: 13.5px;
  color: var(--ink-2);
  flex: 1
}

.news-card a.more {
  color: var(--brand);
  font-weight: 700;
  font-size: 13.5px;
  margin-top: 14px;
  display: inline-flex;
  gap: 6px;
  align-items: center
}

.news-card a.more:hover {
  gap: 10px
}

@media(max-width:900px) {
  .news-grid {
    grid-template-columns: 1fr
  }
}

/* ---------- Contact CTA ---------- */
.contact {
  position: relative;
  color: #fff;
  overflow: hidden
}

.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #083043 0%, #1f63c4 55%, #3078e0 130%)
}

.contact .container {
  position: relative;
  z-index: 1
}

.cta-inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: start
}

.cta-txt h2 {
  font-size: clamp(24px, 3vw, 34px);
  margin-bottom: 18px
}

.cta-txt p {
  color: #cfe0ef;
  margin-bottom: 28px
}

.cta-list {
  display: grid;
  gap: 16px
}

.cta-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start
}

.cta-list .ci {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .12);
  display: grid;
  place-items: center;
  color: #3fd6c4
}

.cta-list b {
  display: block;
  font-size: 15px
}

.cta-list span {
  font-size: 13.5px;
  color: #cfe0ef
}

.quote-form {
  background: #fff;
  color: var(--ink);
  border-radius: 18px;
  padding: 34px 30px;
  box-shadow: var(--shadow-lg)
}

.quote-form h3 {
  font-size: 21px;
  margin-bottom: 6px
}

.quote-form .sub {
  font-size: 13.5px;
  color: var(--ink-2);
  margin-bottom: 22px
}

.frm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.frm .full {
  grid-column: 1/-1
}

.frm label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  display: block;
  margin-bottom: 6px
}

.frm input,
.frm select,
.frm textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: #fbfdfd;
  transition: var(--dur-fast);
  outline: none;
}

.frm input:focus,
.frm select:focus,
.frm textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 169, 157, .14)
}

.frm textarea {
  resize: vertical;
  min-height: 90px
}

.frm .btn {
  width: 100%;
  margin-top: 4px
}

.frm-note {
  grid-column: 1/-1;
  font-size: 12px;
  color: var(--gray);
  text-align: center;
  margin-top: 4px
}

@media(max-width:960px) {
  .cta-inner {
    grid-template-columns: 1fr;
    gap: 40px
  }
}

/* ---------- Footer ---------- */
.footer {
  background: #072430;
  color: #a9c3d6;
  font-size: 14px
}

.footer .container {
  padding-top: 70px;
  padding-bottom: 30px
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, .10)
}

.footer h4 {
  color: #fff;
  font-size: 15.5px;
  margin-bottom: 18px;
  font-weight: 700
}

.foot-brand p {
  margin: 16px 0 0;
  font-size: 13.5px
}

.footer ul li {
  margin-bottom: 11px
}

.footer ul li a {
  color: #a9c3d6;
  transition: var(--dur-fast);
  display: inline-flex;
  gap: 8px;
  align-items: center
}

.footer ul li a:hover {
  color: #3fd6c4;
  padding-left: 4px
}

.footer ul li a::before {
  content: "›";
  color: #3fd6c4
}

.foot-contact li {
  display: flex;
  gap: 10px;
  margin-bottom: 13px;
  align-items: flex-start
}

.foot-contact svg {
  color: #3fd6c4;
  flex-shrink: 0;
  margin-top: 3px
}

.foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 22px;
  font-size: 12.5px
}

.foot-bottom a {
  color: #3fd6c4
}

@media(max-width:960px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr
  }
}

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

/* ---------- Back to top ---------- */
#backTop {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-size: 18px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: var(--dur);
  z-index: 900
}

#backTop.show {
  opacity: 1;
  pointer-events: auto
}

@media(max-width:768px) {
  #backTop {
    right: 16px;
    bottom: 16px;
    width: 42px;
    height: 42px
  }
}

/* ---------- Reveal animation ---------- */
/* .reveal 定义已统一至文件末尾的 ANIMATION 区块 */

/* ============================================================
   INNER PAGE STYLES
   ============================================================ */

/* ---------- Two-column content layout ---------- */
.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 44px;
  align-items: start
}

.sidebar {
  position: sticky;
  top: 100px;
  display: grid;
  gap: 22px
}

.side-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden
}

.side-card h4 {
  font-size: 15px;
  font-weight: 700;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  letter-spacing: .03em
}

.side-card ul {
  padding: 8px 0
}

.side-card ul li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 20px;
  font-size: 14px;
  color: var(--ink-2);
  border-left: 3px solid transparent;
  transition: var(--dur-fast)
}

.side-card ul li a:hover,
.side-card ul li.active a {
  color: var(--brand);
  border-left-color: var(--brand);
  background: var(--brand-soft)
}

.side-card .side-contact {
  padding: 18px 20px
}

.side-card .side-contact p {
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 10px
}

.side-card .side-contact b {
  color: var(--brand);
  font-size: 15px
}

@media(max-width:960px) {
  .layout {
    grid-template-columns: 1fr
  }

  .sidebar {
    position: static;
    grid-template-columns: 1fr
  }
}

/* ---------- Tables ---------- */
.tbl-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff
}

table.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 0
}

table.spec th,
table.spec td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line)
}

table.spec th {
  background: var(--bg);
  font-weight: 700;
  color: var(--ink);
  font-size: 13.5px;
  white-space: nowrap
}

table.spec tr:last-child td {
  border-bottom: 0
}

table.spec td:first-child {
  font-weight: 600;
  color: var(--brand-dark);
  white-space: nowrap
}

table.spec tr:hover td {
  background: #fafcfc
}

/* ---------- Product list page ---------- */
.cat-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 40px
}

.cat-filter button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--dur-fast);
  font-family: inherit;
}

.cat-filter button:hover {
  border-color: var(--brand);
  color: var(--brand)
}

.cat-filter button.active {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(48, 120, 224, .25)
}

.prod-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--dur);
  margin-bottom: 20px;
}

.prod-row:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(var(--lift-sm));
  border-color: transparent
}

.prod-row .pimg {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3
}

.prod-row .pimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--dur-slow)
}

.prod-row:hover .pimg img {
  transform: scale(1.05)
}

.prod-row .pbody {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.prod-row .ptag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 6px
}

.prod-row h3 {
  font-size: 19px;
  margin-bottom: 8px
}

.prod-row p {
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 14px
}

.prod-row .spec {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px
}

.prod-row .spec span {
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 6px
}

@media(max-width:700px) {
  .prod-row {
    grid-template-columns: 1fr
  }

  .prod-row .pimg {
    aspect-ratio: 16/9
  }
}

/* ---------- Product detail ---------- */
.pd-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start
}

.pd-gallery {
  position: sticky;
  top: 100px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-lg)
}

.pd-gallery img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover
}

.pd-info .ptag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 10px
}

.pd-info h1 {
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: 12px
}

.pd-info .pd-desc {
  color: var(--ink-2);
  margin-bottom: 20px
}

.pd-info .keypoints {
  display: grid;
  gap: 10px;
  margin-bottom: 22px
}

.pd-info .keypoints li {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink)
}

.pd-info .keypoints li svg {
  color: var(--brand);
  flex-shrink: 0;
  margin-top: 3px
}

.pd-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px
}

.pd-meta {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  font-size: 13.5px
}

.pd-meta div {
  display: flex;
  gap: 10px;
  padding: 5px 0
}

.pd-meta .k {
  color: var(--gray);
  min-width: 110px
}

.pd-meta .v {
  color: var(--ink);
  font-weight: 600
}

@media(max-width:820px) {
  .pd-top {
    grid-template-columns: 1fr;
    gap: 30px
  }

  .pd-gallery {
    position: static
  }
}

/* ---------- Related products ---------- */
.related .prod-grid {
  grid-template-columns: repeat(4, 1fr)
}

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

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

/* ---------- Timeline (about) ---------- */
.timeline {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding-left: 30px
}

.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: linear-gradient(var(--brand), var(--brand-2));
  border-radius: 3px
}

.tl-item {
  position: relative;
  padding: 0 0 36px 26px
}

.tl-item::before {
  content: "";
  position: absolute;
  left: -29px;
  top: 6px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft)
}

.tl-item .year {
  font-family: 'Poppins';
  font-weight: 800;
  color: var(--brand);
  font-size: 22px;
  margin-bottom: 6px
}

.tl-item h3 {
  font-size: 17px;
  margin-bottom: 6px
}

.tl-item p {
  font-size: 14px;
  color: var(--ink-2)
}

/* ---------- Gallery grid (factory/quality) ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.g-item {
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow);
  transition: var(--dur)
}

.g-item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: var(--dur-slow)
}

.g-item:hover img {
  transform: scale(1.05)
}

.g-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent, rgba(6, 34, 52, .9));
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 40px 16px 14px
}

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

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

/* ---------- Pills / badges ---------- */
.pill {
  display: inline-block;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: 999px
}

/* ---------- FAQ ---------- */
.faq {
  max-width: 820px;
  margin: 0 auto
}

.faq details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  margin-bottom: 12px;
  overflow: hidden
}

.faq summary {
  cursor: pointer;
  padding: 18px 22px;
  font-weight: 700;
  font-size: 15.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  list-style: none
}

.faq summary::-webkit-details-marker {
  display: none
}

.faq summary::after {
  content: "+";
  font-size: 22px;
  color: var(--brand);
  font-weight: 700;
  transition: var(--dur);
  flex-shrink: 0
}

.faq details[open] summary::after {
  transform: rotate(45deg)
}

.faq details .fa-body {
  padding: 0 22px 20px;
  color: var(--ink-2);
  font-size: 14.5px
}

/* ---------- Map placeholder ---------- */
.map-box {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: linear-gradient(135deg, #e9f2fc, #cdeee9);
  display: flex;
  flex-direction: column
}

.map-box>div {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 26px 20px 20px
}

.map-box .pin {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  display: grid;
  place-items: center;
  color: #fff;
  margin: 0 auto 14px;
  box-shadow: 0 10px 24px rgba(48, 120, 224, .4)
}

.map-box p {
  color: var(--brand-dark);
  font-weight: 600;
  font-size: 15px
}

.map-box small {
  color: var(--ink-2);
  font-size: 13px
}

.map-box .map-embed {
  width: 100%;
  height: 300px;
  border: 0;
  display: block
}

/* ---------- Pagination ---------- */
.pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 44px
}

.pagination a,
.pagination span {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  background: #fff;
  transition: var(--dur-fast);
}

.pagination a:hover {
  border-color: var(--brand);
  color: var(--brand)
}

.pagination .cur {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  border-color: transparent
}

.news-list-section {
  padding-bottom: 24px;
}

/* ---------- Article / news detail ---------- */
.article {
  max-width: 860px;
  margin: 0 auto
}

.article h1 {
  font-size: clamp(24px, 3vw, 34px);
  margin-bottom: 14px
}

.article .art-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--gray);
  font-size: 13.5px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line)
}

.article .art-cover {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 28px;
  box-shadow: var(--shadow)
}

.article .art-cover img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover
}

.article h2 {
  font-size: 22px;
  margin: 28px 0 12px
}

.article h3 {
  font-size: 18px;
  margin: 22px 0 10px
}

.article p {
  color: var(--ink-2);
  margin-bottom: 16px;
  font-size: 15.5px
}

.article ul {
  list-style: disc;
  padding-left: 22px;
  color: var(--ink-2);
  margin-bottom: 16px
}

.article ul li {
  margin-bottom: 8px
}

.article blockquote {
  border-left: 4px solid var(--brand);
  background: var(--brand-soft);
  padding: 16px 20px;
  border-radius: 0 12px 12px 0;
  margin: 22px 0;
  font-style: italic;
  color: var(--brand-dark)
}

/* ---------- Contact info cards ---------- */
.info-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 48px
}

.info-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  transition: var(--dur)
}

.info-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(var(--lift))
}

.info-card .ic {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand)
}

.info-card h3 {
  font-size: 16px;
  margin-bottom: 8px
}

.info-card p {
  font-size: 14px;
  color: var(--ink-2)
}

@media(max-width:900px) {
  .info-cards {
    grid-template-columns: 1fr
  }
}

/* ============================================================
   SOCIAL / QR / FLOATING / ICON ENHANCEMENTS
   ============================================================ */
/* ---------- Social links ---------- */
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px
}

.social-links a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #cfe0ef;
  transition: var(--dur-fast);
}

.social-links a:hover {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  border-color: transparent;
  transform: translateY(var(--lift-sm))
}

.social-links.light a {
  background: var(--brand-soft);
  border-color: var(--line);
  color: var(--brand)
}

.social-links.light a:hover {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff
}

/* ---------- QR codes ---------- */
.qr-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px
}

.qr-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  padding: 10px 12px
}

.qr-item img {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  background: #fff;
  padding: 3px;
  flex-shrink: 0
}

.qr-item b {
  display: block;
  color: #fff;
  font-size: 13px
}

.qr-item span {
  font-size: 11px;
  color: #8fb4cc
}

.qr-item.light {
  background: var(--bg);
  border-color: var(--line)
}

.qr-item.light b {
  color: var(--ink)
}

.qr-item.light span {
  color: var(--gray)
}

/* ---------- Floating buttons ---------- */
.float-wa {
  position: fixed;
  right: 22px;
  bottom: 90px;
  z-index: 901;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  box-shadow: 0 10px 26px rgba(63, 214, 196, .45);
  transition: var(--dur);
  cursor: pointer;
}

.float-wa:hover {
  transform: scale(1.08)
}

.float-wa::after {
  content: "WhatsApp";
  position: absolute;
  right: 66px;
  top: 50%;
  transform: translateY(-50%);
  background: #0b2e3b;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: var(--dur-fast)
}

.float-wa:hover::after {
  opacity: 1
}

@media(max-width:768px) {
  .float-wa {
    width: 50px;
    height: 50px;
    right: 16px;
    bottom: 78px
  }
}

/* ---------- Section title with icon ---------- */
.sec-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px
}

.sec-title .st-ico {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  box-shadow: 0 6px 18px rgba(48, 120, 224, .28)
}

.sec-title h2 {
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 800
}

.sec-title p {
  color: var(--ink-2);
  font-size: 14px;
  margin-top: 2px
}

@media(max-width:560px) {
  .sec-title {
    flex-wrap: wrap
  }
}

/* ---------- Icon chips on industry cards ---------- */
.ind-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px
}

.ind-top .iico {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand)
}

.ind-top h3 {
  font-size: 18px;
  font-weight: 700
}

.typ-list {
  list-style: none;
  margin-top: 12px;
  display: grid;
  gap: 7px
}

.typ-list li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--ink-2)
}

.typ-list li svg {
  color: var(--brand);
  flex-shrink: 0;
  margin-top: 3px
}

/* ---------- Pain / solution block (why-us) ---------- */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.pain-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--dur)
}

.pain-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(var(--lift))
}

.pain-card .pc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink)
}

.pain-card .pc-head .pi {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex-shrink: 0
}

.pain-card .pc-head .pi.red {
  background: #fdecec;
  color: var(--accent)
}

.pain-card .pc-head .pi.green {
  background: var(--brand-soft);
  color: var(--brand)
}

.pain-card .pc-body {
  padding: 0 20px 20px
}

.pain-card .pc-body .dilemma {
  font-size: 13.5px;
  color: var(--ink-2);
  background: var(--bg);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 12px 14px;
  margin-bottom: 14px
}

.pain-card .pc-body .solution {
  font-size: 13.5px;
  color: var(--ink-2);
  background: var(--brand-soft);
  border-left: 3px solid var(--brand);
  border-radius: 0 10px 10px 0;
  padding: 12px 14px;
  margin-bottom: 12px
}

.pain-card .pc-body .takeaway {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-dark)
}

@media(max-width:1000px) {
  .pain-grid {
    grid-template-columns: 1fr
  }
}

/* ---------- Value cards (about) ---------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px
}

.value-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px;
  text-align: center;
  transition: var(--dur)
}

.value-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(var(--lift))
}

.value-card .vico {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  box-shadow: 0 8px 20px rgba(48, 120, 224, .28)
}

.value-card h3 {
  font-size: 16.5px;
  margin-bottom: 8px
}

.value-card p {
  font-size: 13px;
  color: var(--ink-2)
}

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

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

/* ---------- Process flow (factory) ---------- */
.flow-steps {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px
}

.flow-step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 10px;
  text-align: center;
  transition: var(--dur);
  position: relative
}

.flow-step:hover {
  box-shadow: var(--shadow);
  transform: translateY(var(--lift-sm))
}

.flow-step .f-ico {
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand)
}

.flow-step b {
  display: block;
  font-size: 12.5px;
  color: var(--ink)
}

.flow-step span {
  font-size: 11px;
  color: var(--gray)
}

.flow-step .f-num {
  position: absolute;
  top: -8px;
  left: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center
}

.flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-2);
  font-size: 18px
}

@media(max-width:1100px) {
  .flow-steps {
    grid-template-columns: repeat(4, 1fr)
  }

  .flow-arrow {
    display: none
  }
}

@media(max-width:620px) {
  .flow-steps {
    grid-template-columns: repeat(2, 1fr)
  }
}

/* ---------- News tags / share ---------- */
.news-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px
}

.news-tags a {
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 6px;
  transition: var(--dur-fast)
}

.news-tags a:hover {
  background: var(--brand);
  color: #fff
}

.share-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line)
}

.share-row .lbl {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink)
}

.share-row .social-links {
  margin: 0
}

.share-row .social-links a {
  width: 40px;
  height: 40px
}

/* ---------- Responsive-safe layout utilities (replace inline grids) ---------- */
@media(min-width:961px) {
  .layout-2col {
    grid-template-columns: 1fr 1.05fr
  }
}

@media(min-width:961px) {
  .layout-2eq {
    grid-template-columns: 1fr 1fr;
    align-items: stretch
  }
}

@media(min-width:621px) {
  .why-3 {
    grid-template-columns: repeat(3, 1fr)
  }
}

/* ---------- Product card grid (products.html) ---------- */
.p-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.p-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--dur)
}

.p-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(var(--lift))
}

.p-card .pc-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--bg)
}

.p-card .pc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--dur-slow)
}

.p-card:hover .pc-img img {
  transform: scale(1.06)
}

.p-card .pc-img .ptag {
  position: absolute;
  left: 14px;
  top: 14px;
  background: rgba(5, 24, 42, .82);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 5px 12px;
  border-radius: 20px;
  backdrop-filter: blur(4px)
}

.p-card .pc-body {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1
}

.p-card .pc-body h3 {
  font-size: 16.5px;
  line-height: 1.4;
  margin-bottom: 8px;
  font-weight: 700
}

.p-card .pc-body p {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.65;
  margin-bottom: 14px;
  flex: 1
}

.p-card .pc-body .spec {
  margin: 0 0 16px
}

.p-card .pc-body .btn {
  align-self: flex-start;
  padding: 10px 20px;
  font-size: 13.5px
}

@media(max-width:1000px) {
  .p-cards {
    grid-template-columns: repeat(2, 1fr)
  }
}

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

@media(max-width:620px) {
  .p-card .pc-img {
    aspect-ratio: 16/9
  }
}

/* ============================================================
   图标点缀（统计数字 / 流程步骤 / 规格对勾 / 新闻日历 / 侧栏箭头）
   ============================================================ */
.stats .stat .ico {
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 8px 20px rgba(6, 28, 48, .18)
}

.stats .stat .ico svg {
  width: 22px;
  height: 22px
}

.steps .step .ico {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  margin-bottom: 14px;
  box-shadow: 0 10px 24px rgba(48, 120, 224, .26)
}

.steps .step .ico svg {
  width: 24px;
  height: 24px
}

.spec span::before {
  content: "✓";
  color: var(--brand);
  font-weight: 800;
  margin-right: 4px;
  font-size: 11px
}

.news-card .n-date::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 6px;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233078e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M8 2v4M16 2v4M3 10h18'/%3E%3C/svg%3E") no-repeat center/contain
}

.sidebar .side-card ul li a::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-top: 1.5px solid var(--brand);
  border-right: 1.5px solid var(--brand);
  transform: rotate(45deg);
  vertical-align: 1px;
  transition: var(--dur-fast)
}

.sidebar .side-card ul li a:hover::before,
.sidebar .side-card ul li.active a::before {
  transform: rotate(45deg) translate(2px, -2px)
}

/* ---------- Inner-page hero banners ---------- */
.page-hero {
  background-size: cover;
  background-position: center;
  background-color: #083043
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(4, 24, 42, .94) 0%, rgba(6, 38, 58, .84) 42%, rgba(6, 38, 58, .55) 100%);
  pointer-events: none;
  z-index: 0
}

.ph-products {
  background-image: url('../images/banner-products.jpg')
}

.ph-product {
  background-image: url('../images/banner-product.jpg')
}

.ph-industries {
  background-image: url('../images/banner-industries.jpg')
}

.ph-why-us {
  background-image: url('../images/banner-why-us.jpg')
}

.ph-quality {
  background-image: url('../images/banner-quality.jpg')
}

.ph-factory {
  background-image: url('../images/banner-factory.jpg')
}

.ph-about {
  background-image: url('../images/banner-about.jpg')
}

.ph-news {
  background-image: url('../images/banner-news.jpg')
}

.ph-news-detail {
  background-image: url('../images/banner-news-detail.jpg')
}

.ph-contact {
  background-image: url('../images/banner-contact.jpg')
}

@media(max-width:620px) {
  .page-hero {
    padding: 64px 0 54px
  }
}

/* ---------- Hero slider (home 3-banner carousel) ---------- */
.hero-slides {
  display: flex;
  align-items: stretch;
  will-change: transform;
  transition: transform var(--dur-slow) var(--ease-out);
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none
}

.hero-slide {
  flex: 0 0 100%;
  position: relative;
  width: 100%
}

.hero-slide .hero-bg {
  -webkit-user-drag: none
}

.hero-slide.active .hero-bg {
  animation: kenburns 7s ease-out forwards
}

@keyframes kenburns {
  from {
    transform: scale(1)
  }

  to {
    transform: scale(1.07)
  }
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: var(--dur-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-arrow:hover {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color: transparent;
  transform: translateY(-50%) scale(1.06)
}

.hero-arrow.prev {
  left: 22px
}

.hero-arrow.next {
  right: 22px
}

.hero-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  gap: 9px
}

.hero-dots .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  cursor: pointer;
  transition: var(--dur-fast)
}

.hero-dots .dot.active {
  background: #3fd6c4;
  box-shadow: 0 0 0 4px rgba(63, 214, 196, .25);
  width: 26px;
  border-radius: 8px
}

@media(max-width:768px) {
  .hero-arrow {
    width: 38px;
    height: 38px;
    font-size: 20px
  }

  .hero-arrow.prev {
    left: 12px
  }

  .hero-arrow.next {
    right: 12px
  }

  .hero-dots {
    bottom: 14px
  }
}

/* ---------- Products: two pillars (wire harness / cable assemblies) ---------- */
.pillar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 8px
}

.pillar-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  display: block;
  min-height: 340px;
  box-shadow: var(--shadow);
  transition: var(--dur);
  text-decoration: none
}

.pillar-card:hover {
  transform: translateY(var(--lift));
  box-shadow: 0 22px 48px rgba(11, 46, 59, .18)
}

.pillar-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.pillar-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 28, 48, .28) 0%, rgba(6, 28, 48, .88) 78%, rgba(6, 28, 48, .96) 100%);
  z-index: 1
}

.pillar-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 30px 30px 26px;
  color: #fff
}

.pillar-ico {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  margin-bottom: 18px;
  box-shadow: 0 8px 22px rgba(48, 120, 224, .4)
}

.pillar-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #3fd6c4;
  margin-bottom: 6px
}

.pillar-title {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
  margin-bottom: 10px;
  line-height: 1.15
}

.pillar-desc {
  font-size: 14.5px;
  color: #d6e8f0;
  max-width: 480px;
  margin-bottom: 14px;
  line-height: 1.6
}

.pillar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px
}

.pillar-tags:before {
  content: ""
}

.pillar-tags::first-line {
  color: #3fd6c4
}

.pillar-body .pillar-tags {
  display: inline-flex
}

.pillar-tags span {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600
}

.pillar-cta {
  margin-top: auto;
  font-weight: 700;
  color: #fff;
  font-size: 14.5px;
  border-bottom: 2px solid var(--brand);
  padding-bottom: 3px;
  transition: var(--dur-fast)
}

.pillar-card:hover .pillar-cta {
  color: #3fd6c4
}

.pillar-block {
  scroll-margin-top: 90px
}

.pillar-head {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(120deg, var(--brand-soft), #fff);
  border: 1px solid #dff2ef;
  border-radius: 16px;
  padding: 22px 26px;
  margin: 46px 0 8px
}

.pillar-head h2 {
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 800
}

.pillar-head p {
  color: var(--ink-2);
  font-size: 14.5px;
  margin-top: 3px
}

.custom-wrap {
  margin-top: 52px;
  padding-top: 8px
}

.custom-wrap .sec-head {
  margin-bottom: 22px
}

@media(max-width:860px) {
  .pillar-grid {
    grid-template-columns: 1fr
  }

  .pillar-card {
    min-height: 300px
  }
}

@media(max-width:560px) {
  .pillar-body {
    padding: 22px 20px
  }

  .pillar-desc {
    font-size: 13.5px
  }
}

/* ---------- Home: two-pillar quick entry ---------- */
.home-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 4px 0 30px
}

.home-pillars .hp {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
  border: 1px solid #e2efec;
  transition: var(--dur-fast);
  box-shadow: 0 4px 14px rgba(11, 46, 59, .05);
}

.home-pillars .hp:hover {
  border-color: var(--brand);
  box-shadow: 0 10px 26px rgba(0, 169, 157, .16);
  transform: translateY(var(--lift-sm))
}

.home-pillars .hp-ico {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff
}

.home-pillars .hp b {
  display: block;
  font-size: 16.5px;
  font-weight: 800
}

.home-pillars .hp small {
  display: block;
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 2px
}

.home-pillars .hp-go {
  margin-left: auto;
  font-size: 20px;
  color: var(--brand);
  font-weight: 700
}

@media(max-width:680px) {
  .home-pillars {
    grid-template-columns: 1fr
  }
}

/* ============================================================
   Cookie 同意弹窗 & 页脚 Legal
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  background: rgba(6, 28, 48, .96);
  color: #d9e7f1;
  padding: 15px 0;
  transform: translateY(110%);
  transition: transform var(--dur-slow) ease;
  box-shadow: 0 -10px 30px rgba(6, 28, 48, .28)
}

.cookie-banner.show {
  transform: translateY(0)
}

.cb-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap
}

.cookie-banner p {
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 780px;
  margin: 0
}

.cookie-banner p a {
  color: #3fd6c4;
  text-decoration: underline
}

.cb-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0
}

.cb-actions .btn {
  padding: 9px 20px;
  font-size: 13px
}

.cb-deny {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  padding: 9px 20px;
  border-radius: var(--radius);
  font-size: 13px;
  cursor: pointer;
  transition: var(--dur-fast)
}

.cb-deny:hover {
  border-color: #3fd6c4;
  color: #3fd6c4
}

@media(max-width:640px) {
  .cb-inner {
    flex-direction: column;
    align-items: flex-start
  }

  .cb-actions {
    width: 100%
  }

  .cb-actions .btn,
  .cb-deny {
    flex: 1;
    text-align: center
  }
}

.foot-legal {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .10)
}

.foot-legal h4 {
  margin-bottom: 12px
}

.foot-links {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap
}

/* ============================================================
   Legal 页面（Privacy / Terms）
   ============================================================ */
.legal-wrap {
  max-width: 900px;
  margin: 0 auto
}

.legal-block {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin-bottom: 22px;
  box-shadow: var(--shadow)
}

.legal-block h2 {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
  padding-left: 14px;
  border-left: 4px solid var(--brand)
}

.legal-block p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.75;
  margin-bottom: 10px
}

.legal-block ul.typ-list li b {
  color: var(--ink)
}

.legal-date {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  color: var(--gray);
  font-size: 13px
}

@media(max-width:560px) {
  .legal-block {
    padding: 20px 18px
  }
}

/* ============ 图文 Mega Menu（参考 FirstMold 分类图文样式） ============ */
.dropdown.mega {
  width: 720px
}

.drop-col-card {
  display: grid;
  gap: 4px;
  align-content: start
}

.mega-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 12px;
  padding: 9px 10px !important;
  border: 1px solid #dce8f5;
  border-radius: 10px;
  background: linear-gradient(135deg, #fff, var(--brand-soft));
  margin-bottom: 8px
}

.mega-card:hover {
  background: #fff !important
}

.mega-card img {
  width: 84px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0
}

.mega-card .mc-body {
  display: flex;
  flex-direction: column;
  gap: 2px
}

.mega-card .mc-body b {
  font-size: 15px;
  color: var(--ink);
  font-weight: 700
}

.mega-card .mc-body small {
  font-size: 12px;
  color: var(--gray)
}

.drop-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e2ebf4
}

.drop-foot a {
  flex-direction: row !important;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-weight: 700;
  color: var(--brand);
  font-size: 14px;
  border-left: 0 !important
}

.drop-foot a:hover {
  background: var(--brand-soft);
  color: var(--brand-dark)
}

.drop-foot span {
  font-size: 12px;
  color: var(--gray)
}

/* 行业图文卡 */
.dropdown.mega-ind {
  width: 780px
}

.ind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px
}

.ind-chip {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  padding: 8px !important;
  border: 1px solid #e2ebf4;
  border-radius: 10px
}

.ind-chip img {
  width: 62px;
  height: 46px;
  object-fit: cover;
  border-radius: 7px;
  flex-shrink: 0
}

.ind-chip span {
  display: flex;
  flex-direction: column;
  gap: 1px
}

.ind-chip b {
  font-size: 13px;
  color: var(--ink)
}

.ind-chip small {
  font-size: 11px;
  color: var(--gray)
}

/* 公司图文卡 */
.dropdown.mega-cmp {
  width: 640px
}

.cmp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px
}

.cmp-chip {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  padding: 8px !important;
  border: 1px solid #e2ebf4;
  border-radius: 10px
}

.cmp-chip img {
  width: 62px;
  height: 46px;
  object-fit: cover;
  border-radius: 7px;
  flex-shrink: 0
}

.cmp-chip span {
  display: flex;
  flex-direction: column;
  gap: 1px
}

.cmp-chip b {
  font-size: 13px;
  color: var(--ink)
}

.cmp-chip small {
  font-size: 11px;
  color: var(--gray)
}

/* 移动端：图文卡降级为纯文字列表 */
@media(max-width:1024px) {

  .dropdown.mega,
  .dropdown.mega-ind,
  .dropdown.mega-cmp {
    width: 100%
  }

  .mega-card {
    flex-direction: column !important;
    align-items: flex-start;
    gap: 4px;
    background: none !important;
    border: 0 !important;
    padding: 6px 12px !important;
    margin: 0;
    border-radius: 0
  }

  .mega-card img,
  .ind-chip img,
  .cmp-chip img {
    display: none
  }

  .drop-foot {
    display: none
  }

  .ind-grid,
  .cmp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0
  }

  .ind-chip,
  .cmp-chip {
    flex-direction: column !important;
    align-items: flex-start;
    border: 0 !important;
    border-radius: 0;
    padding: 6px 12px !important
  }
}

/* ===== ① Mega 加宽至接近导航栏宽度 + 大卡大间距（参考 FirstMold） ===== */
.dropdown.mega {
  width: min(1120px, calc(100vw - 48px))
}

.dropdown.mega-ind {
  width: min(1180px, calc(100vw - 48px))
}

.dropdown.mega-cmp {
  width: min(840px, calc(100vw - 48px))
}

.dropdown .drop-head {
  gap: 22px
}

.drop-col-card {
  gap: 6px
}

.dropdown .drop-title {
  padding: 8px 16px 6px;
  font-size: 12px
}

.mega-card {
  gap: 16px;
  padding: 14px 16px !important;
  margin-bottom: 14px;
  border-radius: 12px
}

.mega-card img {
  width: 132px;
  height: 96px;
  border-radius: 10px
}

.mega-card .mc-body b {
  font-size: 16px
}

.mega-card .mc-body small {
  font-size: 12.5px
}

.mega-link {
  padding: 11px 16px !important
}

.mega-link b {
  font-size: 14.5px
}

.mega-link small {
  font-size: 12.5px
}

.drop-foot {
  margin-top: 16px;
  padding-top: 14px
}

.drop-foot a {
  padding: 10px 16px;
  font-size: 15px
}

.drop-foot span {
  font-size: 13px
}

.ind-grid {
  gap: 14px
}

.ind-chip {
  gap: 14px;
  padding: 12px !important;
  border-radius: 12px
}

.ind-chip img {
  width: 96px;
  height: 70px;
  border-radius: 9px
}

.ind-chip b {
  font-size: 14px
}

.ind-chip small {
  font-size: 12px
}

.cmp-grid {
  gap: 14px
}

.cmp-chip {
  gap: 14px;
  padding: 12px !important;
  border-radius: 12px
}

.cmp-chip img {
  width: 92px;
  height: 66px;
  border-radius: 9px
}

.cmp-chip b {
  font-size: 14px
}

.cmp-chip small {
  font-size: 12px
}

/* ===== ② 首页产品卡链接化 ===== */
a.prod-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit
}

a.prod-card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-lg);
  border-color: transparent
}

a.prod-card .thumb::after {
  content: "View Details →";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent, rgba(31, 99, 196, .9));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 26px 18px 12px;
  opacity: 0;
  transition: var(--dur)
}

a.prod-card:hover .thumb::after {
  opacity: 1
}

/* ===== ③ 产品页卡片更舒展 ===== */
.prod-grid {
  gap: 28px
}

.p-cards {
  gap: 30px
}

.p-card .pc-body {
  padding: 24px 24px 26px
}

.p-card .pc-body h3 {
  font-size: 18px;
  margin-bottom: 10px
}

.p-card .pc-body p {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 16px
}

.p-card .pc-body .spec {
  margin: 0 0 18px;
  gap: 7px
}

.p-card .pc-body .spec span {
  padding: 5px 12px;
  font-size: 12px
}


/* ===== ④ Mega 字距/图距协调 + 底部社媒 ===== */
.mega-card {
  display: flex !important;
  align-items: center;
  gap: 18px
}

.mega-card .mc-body {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.mega-link {
  display: flex !important;
  flex-direction: column;
  gap: 3px;
  padding: 12px 16px !important
}

.mega-link b {
  font-size: 15px
}

.mega-link small {
  font-size: 13px
}

.ind-chip {
  gap: 16px;
  padding: 13px !important
}

.ind-chip span {
  display: flex;
  flex-direction: column;
  gap: 3px
}

.ind-chip b {
  font-size: 15px
}

.ind-chip small {
  font-size: 12.5px
}

.cmp-chip {
  gap: 16px;
  padding: 13px !important
}

.cmp-chip span {
  display: flex;
  flex-direction: column;
  gap: 3px
}

.cmp-chip b {
  font-size: 15px
}

.cmp-chip small {
  font-size: 12.5px
}

.drop-head {
  gap: 24px
}

.foot-bottom .fb-social {
  display: flex;
  align-items: center;
  gap: 8px
}

.foot-bottom .fb-social a {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  color: #cbd5e1;
  transition: var(--dur);
  text-decoration: none
}

.foot-bottom .fb-social a:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff
}

.foot-bottom .fb-social svg {
  width: 15px;
  height: 15px
}

@media(max-width:760px) {
  .foot-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center
  }
}

/* ===== ⑤ 行业详情页 ===== */
.page-hero .pill {
  display: inline-block;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 24px;
  margin-bottom: 16px;
  backdrop-filter: blur(4px)
}

.page-hero h1 {
  position: relative;
  z-index: 1
}

.page-hero p {
  position: relative;
  z-index: 1
}

.ind-overview {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 44px;
  align-items: stretch
}

.ind-overview .ov-img {
  border-radius: var(--radius);
  overflow: hidden;
  /*box-shadow: var(--shadow-lg)*/
}

.ind-overview .ov-img img {
  width: 100%;
  aspect-ratio: 16/11;
  object-fit: cover
}

.ind-overview h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.3
}

.ind-overview h2 span {
  color: var(--brand)
}

.ind-overview p {
  color: var(--ink-2);
  line-height: 1.78;
  margin-bottom: 14px;
  font-size: 15px
}

.ind-overview .typ-list {
  margin-top: 10px
}

.ind-overview .typ-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 14.5px;
  color: var(--ink)
}

.ind-overview .typ-list svg {
  color: var(--brand);
  flex-shrink: 0
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px
}

.app-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: var(--dur)
}

.app-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow);
  transform: translateY(var(--lift))
}

.app-card .ac-ico {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px
}

.app-card h3 {
  font-size: 16.5px;
  font-weight: 700;
  margin-bottom: 8px
}

.app-card p {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.7
}

.rel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px
}

.rel-grid .p-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--dur)
}

.rel-grid .p-card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-lg);
  border-color: transparent
}

.rel-grid .p-card .thumb {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--bg)
}

.rel-grid .p-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--dur-slow)
}

.rel-grid .p-card:hover .thumb img {
  transform: scale(1.06)
}

.rel-grid .p-card .pbody {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1
}

.rel-grid .p-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px
}

.rel-grid .p-card p {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.65;
  flex: 1
}

.rel-grid .p-card .go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand);
  font-weight: 700;
  font-size: 13.5px;
  margin-top: 12px
}

.ind-link-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

.ind-link-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  transition: var(--dur)
}

.ind-link-chip:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow);
  transform: translateY(var(--lift-sm))
}

.ind-link-chip img {
  width: 56px;
  height: 42px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0
}

.ind-link-chip.cur {
  border-color: var(--brand);
  background: var(--brand-soft)
}

.ind-link-chip b {
  font-size: 14.5px
}

.ind-link-chip small {
  display: block;
  font-size: 12px;
  color: var(--gray);
  margin-top: 1px
}

@media(max-width:1000px) {
  .ind-overview {
    grid-template-columns: 1fr
  }

  .app-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .rel-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .ind-link-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

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

  .rel-grid {
    grid-template-columns: 1fr
  }

  .ind-link-grid {
    grid-template-columns: 1fr
  }
}

/* ===== ⑥ 行业卡链接化 ===== */
a.ind-card-link {
  display: block;
  text-decoration: none;
  color: inherit
}

a.ind-card-link:hover .ind-card {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-lg);
  border-color: transparent
}

/* ===== ⑦ 首页行业卡链接化 ===== */
a.ind-item-link {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--dur);
  text-decoration: none;
  color: inherit
}

a.ind-item-link:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow);
  transform: translateY(var(--lift-sm))
}

a.ind-item-link:hover .ind-img img {
  transform: scale(1.07)
}

/* ===== ⑧ 移动端二级导航（mega）展开修复：防溢出、图隐藏、紧凑布局 ===== */
@media(max-width:1024px) {

  .dropdown.mega,
  .dropdown.mega-ind,
  .dropdown.mega-cmp {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
    box-sizing: border-box
  }

  .dropdown .drop-head {
    min-width: 0;
    width: 100%
  }

  .drop-col,
  .drop-col-card {
    width: 100%;
    min-width: 0
  }

  .mega-card img,
  .ind-chip img,
  .cmp-chip img {
    display: none !important
  }

  .mega-card {
    flex-direction: column !important;
    align-items: flex-start;
    gap: 3px;
    background: none !important;
    border: 0 !important;
    padding: 5px 12px !important;
    margin: 0;
    border-radius: 0;
    width: 100%
  }

  .mega-card .mc-body b {
    font-size: 15px
  }

  .mega-card .mc-body small {
    font-size: 12.5px
  }

  .mega-link,
  .ind-chip,
  .cmp-chip {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%
  }

  .mega-link {
    padding: 8px 12px !important
  }

  .mega-link b {
    font-size: 14.5px
  }

  .mega-link small {
    font-size: 12px;
    word-break: break-word
  }

  .ind-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px
  }

  .cmp-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 4px
  }

  .ind-chip,
  .cmp-chip {
    flex-direction: column !important;
    align-items: flex-start;
    border: 0 !important;
    border-radius: 0;
    padding: 7px 12px !important;
    gap: 1px
  }

  .ind-chip b {
    font-size: 14px
  }

  .ind-chip small {
    font-size: 12px
  }

  .drop-foot {
    margin-top: 10px;
    padding-top: 10px
  }

  .drop-foot a {
    padding: 9px 12px;
    font-size: 14px
  }
}

/* ===== ⑨ 移动端菜单交互修复：抽屉关闭按钮 ===== */
@media(max-width:1024px) {
  .nav>li>a::after {
    display: none
  }

  .nav-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--brand);
    cursor: pointer;
    z-index: 999;
    transition: var(--dur-fast)
  }

  .nav-close:hover {
    background: var(--brand);
    color: #fff;
    transform: rotate(90deg)
  }

  .nav {
    padding-top: 74px
  }

  .nav .has-drop:hover>.dropdown {
    opacity: 1;
    visibility: visible;
    transform: none
  }
}

.nav-close {
  display: none
}

/* 移动端抽屉内不再显示第二个关闭按钮，统一由 header 右上角 hamburger（打开时变为 X）关闭 */
.nav-close {
  display: none
}

/* ===== ⑩ 产品页分类间距优化：大分类/小分类间隔加大 ===== */
.pillar-block {
  scroll-margin-top: 110px
}

.pillar-head {
  margin: 76px 0 14px
}

.sec-title {
  margin: 62px 0 26px
}

.pillar-head+.sec-title {
  margin-top: 16px
}

@media(max-width:768px) {
  .pillar-head {
    margin: 46px 0 10px
  }

  .sec-title {
    margin: 40px 0 20px
  }
}

/* ===== ⑪ 规格表格移动端适配：不溢出、字号收缩 ===== */
@media(max-width:768px) {
  table.spec {
    font-size: 12.5px;
    min-width: 0
  }

  table.spec th,
  table.spec td {
    padding: 9px 7px
  }

  table.spec th:first-child,
  table.spec td:first-child {
    white-space: nowrap
  }
}

/* ===== ⑫ 筛选按钮小屏适配：一行排布不换行 ===== */
@media(max-width:560px) {
  .cat-filter {
    gap: 8px;
    margin-bottom: 32px
  }

  .cat-filter button {
    font-size: 12px;
    padding: 7px 12px
  }
}

/* ===== ⑬ News 二级导航宽度 ===== */
.dropdown.mega-news {
  width: min(1060px, calc(100vw - 48px))
}

@media(max-width:1024px) {
  .dropdown.mega-news {
    width: 100% !important;
    max-width: 100% !important
  }
}

/* ===== ⑭ 桌面 mega 图-文字间距优化 ===== */
@media(min-width:1025px) {
  .dropdown .mega-card {
    gap: 20px;
    padding: 16px 20px !important;
    margin-bottom: 16px;
    border-radius: 12px
  }

  .dropdown .mega-card img {
    width: 132px;
    height: 96px;
    border-radius: 10px;
    flex-shrink: 0
  }

  .dropdown .mega-card .mc-body {
    display: flex;
    flex-direction: column;
    gap: 5px
  }

  .dropdown .mega-card .mc-body b {
    font-size: 16px
  }

  .dropdown .mega-card .mc-body small {
    font-size: 12.5px;
    line-height: 1.45
  }

  .dropdown .mega-link {
    padding: 12px 18px !important
  }

  .ind-grid .ind-chip {
    gap: 18px;
    padding: 14px 16px !important;
    border-radius: 12px
  }

  .cmp-grid .cmp-chip {
    gap: 18px;
    padding: 14px 16px !important;
    border-radius: 12px
  }

  .ind-grid .ind-chip span,
  .cmp-grid .cmp-chip span {
    gap: 4px
  }
}

/* ===== ⑮ 新闻卡片封面图 ===== */
.news-card .n-img {
  display: block;
  position: relative;
  height: 212px;
  overflow: hidden;
  background: var(--brand-soft)
}

.news-card .n-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--dur-slow)
}

.news-card:hover .n-img img {
  transform: scale(1.06)
}

.news-card .n-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(6, 28, 48, .25));
  pointer-events: none
}

@media(max-width:768px) {
  .news-card .n-img {
    height: 190px
  }
}

/* ===== ⑯ 服务页 / FAQ 页样式 ===== */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.svc-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 24px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: var(--dur)
}

.svc-card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-lg);
  border-color: var(--brand)
}

.svc-ico {
  width: 54px;
  height: 54px;
  border-radius: 13px;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center
}

.svc-card h3 {
  font-size: 18px;
  font-weight: 700
}

.svc-card p {
  color: var(--ink-2);
  font-size: 14px;
  flex: 1
}

.svc-card .go {
  color: var(--brand);
  font-weight: 700;
  font-size: 13.5px
}

.svc-card:hover .go {
  color: var(--brand-dark)
}

.caps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.cap-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: var(--dur)
}

.cap-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow)
}

.cap-ico {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center
}

.cap-card h3 {
  font-size: 16.5px;
  font-weight: 700
}

.cap-card p {
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.6
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px
}

.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px
}

.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 14px
}

.step h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px
}

.step p {
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.6
}

.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 46px;
  align-items: center
}

.split-txt h2 {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  margin: 12px 0 14px
}

.split-txt p {
  color: var(--ink-2);
  line-height: 1.75;
  margin-bottom: 12px
}

.split-img img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: var(--shadow-lg)
}

@media(max-width:900px) {

  .svc-grid,
  .caps-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .steps-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .split {
    grid-template-columns: 1fr;
    gap: 28px
  }
}

@media(max-width:560px) {

  .svc-grid,
  .caps-grid,
  .steps-grid {
    grid-template-columns: 1fr
  }
}

/* ===== ⑰ mega 下拉与顶部导航容器等宽对齐（桌面） ===== */
@media(min-width:1025px) {
  .header .container {
    position: relative
  }

  .nav>li,
  .nav>li.has-drop,
  .nav .has-drop {
    position: static
  }

  .nav>li>.dropdown,
  .nav .has-drop>.dropdown {
    position: absolute !important;
    top: calc(100% + 0px) !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    transform: none !important;
  }

  .nav .has-drop:hover>.dropdown,
  .nav .has-drop.open>.dropdown,
  .nav .has-drop:focus-within>.dropdown {
    transform: none !important
  }

  .dropdown.mega,
  .dropdown.mega-ind,
  .dropdown.mega-cmp,
  .dropdown.mega-news,
  .dropdown.mega-svc {
    width: auto !important;
    max-width: none !important
  }

  /* 宽容器下内部布局适配 */
  .cmp-grid {
    grid-template-columns: repeat(4, 1fr) !important
  }

  .cmp-chip {
    justify-content: flex-start
  }

  .ind-grid {
    grid-template-columns: repeat(3, 1fr) !important
  }

  .ind-chip {
    gap: 18px;
    padding: 15px 18px !important
  }

  .drop-head {
    gap: 28px
  }

  .dropdown .drop-head {
    justify-content: flex-start
  }

  /* News mega：分类列定宽 + 新闻卡列横排 */
  .mega-news .drop-head {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 34px
  }

  .mega-news .drop-col-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-content: start
  }

  .mega-news .mega-card {
    margin: 0 !important
  }

  .mega-news .mega-card img {
    width: 100%;
    height: 150px;
    object-fit: cover
  }

  .mega-news .mega-card {
    flex-direction: column !important;
    align-items: flex-start;
    gap: 12px;
    padding: 16px !important
  }
}
/* ---------- Footer layout ----------
   Keep the document in normal flow. Do not create a viewport-sized spacer
   after the news content or grow main before the footer. */
html,
body {
  background: #ffffff;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { margin-bottom: 0; }
footer.footer { margin-top: auto; margin-bottom: 0; }

.news-list-section {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* ============================================================
   ============================================================
   PRODUCT PAGES v2 — 产品列表页 / 产品详情页 组件样式
   ------------------------------------------------------------
   配套模板：cplist.html（列表）· product-detail.html（详情）
   全部基于 :root 品牌变量，改主题色不破坏本区块
   ============================================================
   ============================================================ */

/* ---------- 1. 栏目列表页 Hero ---------- */
.cat-hero { padding: 84px 0 76px; }

.cat-hero-top {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px
}

.cat-hero-ico {
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  display: grid;
  place-items: center
}

.cat-hero-ico img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.cat-hero h1 {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0
}

.cat-hero-sub {
  font-size: 17px;
  color: #cfe0ef;
  max-width: 720px;
  margin-bottom: 34px
}

/* 数据条 */
.cat-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 52px;
  margin: 0 0 34px;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .16)
}

.chs-num {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  color: #fff;
  line-height: 1
}

.chs-num span {
  font-size: .58em;
  margin-left: 1px
}

.chs-lbl {
  font-size: 13px;
  color: rgba(255, 255, 255, .78);
  margin-top: 7px;
  letter-spacing: .02em
}

.cat-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px
}

/* 浅色描边按钮（深色底上用） */
.btn-ghost-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .45)
}

.btn-ghost-light:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .8);
  color: #fff
}

/* ---------- 2. 认证信任条 ---------- */
.trust-bar {
  background: #f7fafd;
  border-bottom: 1px solid var(--line);
  padding: 18px 0
}

.trust-bar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 38px
}

.tb-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2)
}

.tb-item svg {
  width: 17px;
  height: 17px;
  color: var(--brand);
  flex: 0 0 auto
}

/* ---------- 3. 栏目介绍 ---------- */
.cat-intro { padding-bottom: 8px }

/* ---------- 4. 子栏目筛选 ---------- */
.cat-filter-auto {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 42px
}

.cf-btn {
  padding: 10px 22px;
  border-radius: 50px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  transition: var(--dur-fast)
}

.cf-btn:hover {
  border-color: var(--brand);
  color: var(--brand)
}

.cf-btn.active {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px rgba(48, 120, 224, .28)
}

/* ---------- 5. 产品卡片（列表页，3 列大卡） ---------- */
.prod-grid-cat {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 30px
}

.prod-card .thumb {
  display: block;
  position: relative
}

.pc-cat {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  background: rgba(6, 32, 52, .82);
  color: #fff;
  backdrop-filter: blur(4px)
}

.prod-card h3 a { color: inherit }

.prod-card h3 a:hover { color: var(--brand) }

.pc-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 16px;
  padding: 0;
  list-style: none
}

.pc-spec li {
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px
}

.prod-card .pc-spec { margin-top: auto }

.pc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line)
}

.pc-quote {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray);
  white-space: nowrap;
  transition: var(--dur-fast)
}

.pc-quote:hover { color: var(--brand) }

/* ---------- 6. 分页条 ---------- */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 52px
}

.pg-btn,
.pager .page-num {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  transition: var(--dur-fast)
}

.pg-btn:hover,
.pager .page-num:hover {
  border-color: var(--brand);
  color: var(--brand)
}

.pager .page-num-current {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff
}

.pg-nums {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px
}

/* ---------- 7. 制造能力网格 ---------- */
.cap-sec { padding-top: 76px }

.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.cap-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  transition: var(--dur)
}

.cap-card:hover {
  transform: translateY(var(--lift));
  border-color: transparent;
  box-shadow: var(--shadow-lg)
}

.cap-ico {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  margin-bottom: 16px;
  box-shadow: 0 10px 24px rgba(48, 120, 224, .24)
}

.cap-ico svg { width: 24px; height: 24px }

.cap-card h3 {
  font-size: 17.5px;
  font-weight: 700;
  margin-bottom: 9px
}

.cap-card p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.7
}

/* ---------- 8. 流程步骤（通用，替换旧内联样式） ---------- */
.flow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  counter-reset: flow
}

.flow-step {
  text-align: center;
  position: relative
}

.flow-step::after {
  content: "";
  position: absolute;
  top: 30px;
  right: -14px;
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand), transparent);
  opacity: .35
}

.flow-step:last-child::after { display: none }

.flow-num {
  width: 60px;
  height: 60px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Poppins', sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 10px 26px rgba(48, 120, 224, .3)
}

.flow-step h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px
}

.flow-step p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.7
}

.flow-cta {
  text-align: center;
  margin-top: 46px
}

/* ---------- 9. FAQ 手风琴 ---------- */
.faq-list {
  max-width: 900px;
  margin: 0 auto
}

.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
  transition: var(--dur-fast)
}

.faq-item[open] {
  border-color: rgba(48, 120, 224, .35);
  box-shadow: var(--shadow)
}

.faq-item summary {
  cursor: pointer;
  padding: 20px 56px 20px 24px;
  font-family: 'Poppins', sans-serif;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  position: relative;
  transition: var(--dur-fast)
}

.faq-item summary::-webkit-details-marker { display: none }

.faq-item summary:hover { color: var(--brand) }

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 400;
  color: var(--brand);
  transition: var(--dur-fast);
  line-height: 1
}

.faq-item[open] summary::after {
  content: "\2212";
  transform: translateY(-50%) rotate(180deg)
}

.fa-body {
  padding: 0 24px 22px;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.85
}

/* ---------- 10. 底部 CTA 区块 ---------- */
.cta-sec { padding: 78px 0 }

.cta-box {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 44px;
  align-items: center;
  padding: 52px 56px;
  border-radius: 22px;
  background: linear-gradient(120deg, #083043 0%, #1f63c4 58%, #3078e0 125%);
  color: #fff;
  position: relative;
  overflow: hidden
}

.cta-box::after {
  content: "";
  position: absolute;
  right: -110px;
  top: -110px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(63, 214, 196, .28), transparent 70%)
}

.cta-copy,
.cta-actions { position: relative; z-index: 1 }

.cta-copy h2 {
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 800;
  margin-bottom: 12px;
  color: #fff
}

.cta-copy p {
  color: #cfe0ef;
  font-size: 15.5px;
  line-height: 1.8;
  margin-bottom: 18px;
  max-width: 560px
}

.cta-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px
}

.cta-points li {
  font-size: 13.5px;
  color: #cfe0ef;
  display: flex;
  align-items: center;
  gap: 7px
}

.cta-points li::before {
  content: "\2713";
  color: var(--brand-2);
  font-weight: 800
}

.cta-actions {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.cta-actions .btn {
  width: 100%;
  text-align: center
}

.cta-actions .btn-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .45)
}

.cta-actions .btn-outline:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: #fff
}

.cta-note {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .72);
  text-align: center
}

/* ============================================================
   产品详情页专属
   ============================================================ */

.pd-hero { padding: 68px 0 62px }

.pd-hero-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px
}

.pd-hero-cat {
  display: inline-block;
  padding: 6px 15px;
  border-radius: 50px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .03em;
  transition: var(--dur-fast)
}

.pd-hero-cat:hover { background: rgba(255, 255, 255, .26) }

.pd-hero-badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #7fe3d8
}

.pd-hero h1 {
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.02em;
  margin-bottom: 14px
}

.pd-hero-sub {
  font-size: 17px;
  color: #cfe0ef;
  max-width: 720px;
  margin-bottom: 30px
}

.pd-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px
}

.pd-hero-trust {
  font-size: 13px;
  color: rgba(255, 255, 255, .76);
  letter-spacing: .02em
}

/* 参数速览条 */
.pd-specbar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 18px rgba(31, 99, 196, .06)
}

.pd-specbar-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0
}

.sb-item {
  padding: 20px 22px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 5px
}

.sb-item:last-child { border-right: none }

.sb-k {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray)
}

.sb-v {
  font-family: 'Poppins', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink)
}

/* 概览区 */
.pd-overview { padding-top: 66px }

.pd-main-img {
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg)
}

.pd-main-img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover
}

.pd-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px
}

.pd-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: var(--dur-fast)
}

.pd-thumbs img:hover {
  border-color: var(--brand);
  transform: translateY(var(--lift-sm))
}

.pd-info h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  margin: 9px 0 15px;
  line-height: 1.25
}

.pd-info .pd-desc {
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.85;
  margin-bottom: 22px
}

.pd-keypoints {
  display: grid;
  gap: 11px;
  margin-bottom: 24px
}

.pd-keypoints li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.6
}

.pd-keypoints li svg {
  color: var(--brand);
  flex: 0 0 auto;
  margin-top: 3px
}

/* ============================================================
   后台富文本正文组件（.product-rich-content 内部）
   后台「内容」字段粘贴 HTML 时使用这些类名
   ============================================================ */
.product-rich-content {
  max-width: 940px;
  margin: 0 auto;
  line-height: 1.9;
  color: var(--ink-2)
}

.product-rich-content>h2:first-child { margin-top: 0 }

.product-rich-content h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(21px, 2.3vw, 27px);
  font-weight: 700;
  color: var(--ink);
  margin: 54px 0 20px;
  padding-bottom: 13px;
  border-bottom: 2px solid var(--line);
  line-height: 1.3
}

.product-rich-content h3 {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin: 34px 0 14px
}

.product-rich-content h4 {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 22px 0 9px
}

.product-rich-content p {
  margin-bottom: 17px;
  font-size: 15.5px;
  color: var(--ink-2)
}

.product-rich-content .pd-sub {
  font-size: 16px;
  color: var(--gray);
  margin: -8px 0 22px
}

.product-rich-content ul,
.product-rich-content ol {
  margin: 0 0 22px;
  padding-left: 0;
  list-style: none
}

.product-rich-content ol { counter-reset: olc }

.product-rich-content ol>li {
  counter-increment: olc;
  position: relative;
  padding-left: 34px
}

.product-rich-content ol>li::before {
  content: counter(olc);
  position: absolute;
  left: 0;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center
}

.product-rich-content li {
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.75
}

.product-rich-content strong {
  color: var(--ink);
  font-weight: 700
}

.product-rich-content em { color: var(--gray) }

.product-rich-content a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px
}

.product-rich-content img {
  border-radius: 14px;
  margin: 26px 0;
  box-shadow: var(--shadow);
  width: 100%;
  height: auto
}

.product-rich-content blockquote {
  border-left: 4px solid var(--brand);
  padding: 18px 22px;
  background: var(--brand-soft);
  border-radius: 0 12px 12px 0;
  margin: 26px 0;
  color: var(--ink-2)
}

.product-rich-content hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 40px 0
}

/* 表格 */
.product-rich-content .pd-table-wrap {
  overflow-x: auto;
  margin: 26px 0;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow)
}

.product-rich-content table,
.product-rich-content .pd-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 14.5px;
  background: #fff
}

.product-rich-content th,
.product-rich-content .pd-table th {
  background: linear-gradient(135deg, #eef5fd, #e6f4f3);
  padding: 15px 18px;
  text-align: left;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .03em;
  color: var(--ink);
  border-bottom: 2px solid var(--line);
  white-space: nowrap
}

.product-rich-content td,
.product-rich-content .pd-table td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  vertical-align: top;
  line-height: 1.7
}

.product-rich-content tbody tr:last-child td,
.product-rich-content .pd-table tbody tr:last-child td { border-bottom: none }

.product-rich-content tbody tr:nth-child(even),
.product-rich-content .pd-table tbody tr:nth-child(even) { background: #fafcfe }

.product-rich-content td:first-child,
.product-rich-content .pd-table td:first-child {
  color: var(--ink);
  font-weight: 600;
  width: 34%
}

/* 优势卡片网格 */
.pd-adv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 26px 0
}

.pd-adv {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 12px;
  padding: 20px 20px 18px;
  transition: var(--dur)
}

.pd-adv:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-lg);
  border-left-color: var(--brand-2)
}

.pd-adv h4 {
  margin: 0 0 8px;
  font-size: 15.5px;
  color: var(--ink)
}

.pd-adv p {
  margin: 0;
  font-size: 13.8px;
  color: var(--ink-2);
  line-height: 1.72
}

/* 应用领域列表 */
.pd-apps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 26px 0
}

.pd-apps li {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 0;
  transition: var(--dur-fast)
}

.pd-apps li:hover {
  border-color: rgba(48, 120, 224, .4);
  box-shadow: var(--shadow)
}

.pd-apps li strong {
  display: block;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 6px
}

.pd-apps li span {
  font-size: 13.8px;
  color: var(--ink-2);
  line-height: 1.7
}

/* 痛点区块 */
.pd-pain {
  background: #fff7f7;
  border: 1px solid #f6dcdc;
  border-radius: 14px;
  padding: 26px 28px;
  margin: 30px 0
}

.pd-pain h4 {
  margin: 0 0 16px;
  font-size: 16.5px;
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  gap: 9px
}

.pd-pain h4::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: 3px;
  background: var(--accent)
}

.pd-pain ul { margin: 0; padding: 0; list-style: none }

.pd-pain li {
  display: grid;
  grid-template-columns: minmax(190px, 34%) 1fr;
  gap: 6px 20px;
  padding: 11px 0;
  border-bottom: 1px dashed #f0d2d2;
  margin: 0;
  font-size: 14.5px
}

.pd-pain li:last-child { border-bottom: none }

.pd-pain li strong {
  color: var(--accent-dark);
  font-size: 14.2px
}

.pd-pain li span { color: var(--ink-2) }

/* 材料选型网格 */
.pd-mat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 26px 0
}

.pd-mat {
  background: linear-gradient(160deg, #fbfdff, #f4f9f9);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 22px;
  transition: var(--dur-fast)
}

.pd-mat:hover {
  border-color: rgba(14, 168, 160, .45);
  box-shadow: 0 12px 30px rgba(14, 168, 160, .12)
}

.pd-mat-cond {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 6px
}

.pd-mat-choice {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 8px;
  line-height: 1.4
}

.pd-mat p {
  margin: 0;
  font-size: 13.8px;
  color: var(--ink-2);
  line-height: 1.7
}

/* 流程步骤（正文内） */
.pd-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 28px 0
}

.pd-step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 24px 22px;
  position: relative;
  transition: var(--dur)
}

.pd-step:hover {
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  transform: translateY(var(--lift))
}

.pd-step-num {
  font-family: 'Poppins', sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px
}

.pd-step h4 { margin: 0 0 8px; font-size: 16px }

.pd-step p {
  margin: 0;
  font-size: 13.8px;
  color: var(--ink-2);
  line-height: 1.72
}

/* FAQ（正文内） */
.pd-faqs { margin: 26px 0 }

.pd-faq {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: var(--dur-fast)
}

.pd-faq[open] {
  border-color: rgba(48, 120, 224, .35);
  box-shadow: var(--shadow)
}

.pd-faq summary {
  cursor: pointer;
  padding: 17px 54px 17px 22px;
  font-family: 'Poppins', sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  position: relative;
  transition: var(--dur-fast)
}

.pd-faq summary::-webkit-details-marker { display: none }

.pd-faq summary:hover { color: var(--brand) }

.pd-faq summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--brand);
  line-height: 1
}

.pd-faq[open] summary::after {
  content: "\2212";
  transform: translateY(-50%) rotate(180deg)
}

.pd-faq-body {
  padding: 0 22px 20px;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.85
}

/* 正文 CTA 框 */
.pd-cta-box {
  background: linear-gradient(120deg, #eef6ff, #e8f6f5);
  border: 1px solid #d5e8f7;
  border-left: 4px solid var(--brand);
  border-radius: 14px;
  padding: 30px 32px;
  margin: 40px 0 12px
}

.pd-cta-box h4 {
  margin: 0 0 9px;
  font-size: 19px;
  color: var(--brand-dark)
}

.pd-cta-box p {
  margin: 0 0 18px;
  font-size: 14.8px;
  color: var(--ink-2);
  max-width: 720px
}

/* ---------- 相关产品区 ---------- */
.related-sec { padding-top: 74px }

.related-grid { grid-template-columns: repeat(4, 1fr) }

/* ============================================================
   响应式
   ============================================================ */
@media(max-width:1100px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr) }
  .related-grid { grid-template-columns: repeat(2, 1fr) }
  .cta-box { grid-template-columns: 1fr; gap: 30px; padding: 42px 36px }
  .cta-actions { flex-direction: row; flex-wrap: wrap }
  .cta-actions .btn { width: auto; flex: 1 1 220px }
  .cta-note { width: 100% }
  .pd-specbar-inner { grid-template-columns: repeat(2, 1fr) }
  .sb-item:nth-child(2) { border-right: none }
  .sb-item:nth-child(1),
  .sb-item:nth-child(2) { border-bottom: 1px solid var(--line) }
}

@media(max-width:980px) {
  .flow-grid { grid-template-columns: repeat(2, 1fr) }
  .flow-step::after { display: none }
  .pd-adv-grid { grid-template-columns: repeat(2, 1fr) }
}

@media(max-width:820px) {
  .cat-hero { padding: 62px 0 56px }
  .cat-hero-stats { gap: 30px 38px }
  .pd-hero { padding: 52px 0 48px }
  .pd-apps { grid-template-columns: 1fr }
  .pd-mat-grid { grid-template-columns: 1fr }
  .pd-steps { grid-template-columns: 1fr }
  .pd-thumbs { grid-template-columns: repeat(3, 1fr) }
}

@media(max-width:620px) {
  .trust-bar-inner { justify-content: flex-start; gap: 10px 20px }
  .tb-item { font-size: 12.5px }
  .cap-grid { grid-template-columns: 1fr }
  .related-grid { grid-template-columns: 1fr }
  .flow-grid { grid-template-columns: 1fr }
  .pd-specbar-inner { grid-template-columns: 1fr }
  .sb-item { border-right: none; border-bottom: 1px solid var(--line); padding: 15px 0 }
  .sb-item:last-child { border-bottom: none }
  .pd-adv-grid { grid-template-columns: 1fr }
  .cta-box { padding: 34px 24px; border-radius: 16px }
  .pd-cta-box { padding: 24px 22px }
  .pd-pain { padding: 20px 18px }
  .pd-pain li { grid-template-columns: 1fr; gap: 3px }
  .faq-item summary { font-size: 15.5px; padding: 17px 46px 17px 18px }
  .fa-body { padding: 0 18px 18px }
  .product-rich-content td:first-child { width: auto }
}

/* ============================================================
   ============================================================
   UNIFIED INTERACTION LAYER — 全站统一交互规范
   ------------------------------------------------------------
   本区块是全站"手感"的唯一出口：
     · 焦点环（键盘可达性）
     · 链接 hover 下划线动画
     · 按钮统一按压反馈
     · 卡片统一悬浮
     · 图片统一缩放
     · 无障碍：prefers-reduced-motion 降级
   新增组件请复用这里的令牌与类，不要再手写时长/位移。
   ============================================================
   ============================================================ */

/* ---------- 1. 键盘焦点环（全站统一） ----------
   只在键盘操作时出现，鼠标点击不显示，避免影响观感 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 深色底上的焦点环改为白色，保证可见 */
.page-hero a:focus-visible,
.page-hero button:focus-visible,
.footer a:focus-visible,
.footer button:focus-visible,
.cta-box a:focus-visible,
.cta-box button:focus-visible {
  outline-color: var(--on-dark);
}

/* 去掉鼠标点击时的默认描边（保留 focus-visible 的） */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible) {
  outline: none;
}

/* ---------- 2. 统一链接 hover 下划线动画 ----------
   正文与导航里的文字链接，hover 时从左侧生长下划线 */
.link-underline {
  position: relative;
  display: inline-block;
}

.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}

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

/* 页脚 / 侧栏纯文字链接统一 hover 位移 */
.footer ul a,
.foot-links a {
  transition: color var(--dur-fast) var(--ease),
              padding-left var(--dur-fast) var(--ease);
}

.footer ul a:hover {
  color: var(--on-dark);
  padding-left: 3px;
}

/* ---------- 3. 按钮统一按压与聚焦 ---------- */
.btn {
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease-out);
  will-change: transform;
}

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

.btn:focus-visible {
  box-shadow: var(--focus-ring);
}

/* ---------- 4. 卡片统一悬浮 ----------
   所有卡片共用同一套 hover 语义：抬起 + 阴影加深 + 边框隐去 */
.prod-card,
.p-card,
.why-card,
.news-card,
.cap-card,
.svc-card,
.cert-card,
.testi-card,
.info-card,
.pain-card,
.value-card,
.app-card,
.ind-card,
.pillar-card,
.pd-adv,
.pd-step,
.prod-row {
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

/* 键盘 Tab 到卡片时也给出同样的视觉反馈 */
.prod-card:focus-within,
.p-card:focus-within,
.why-card:focus-within,
.cap-card:focus-within,
.pd-adv:focus-within {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-lg);
}

/* ---------- 5. 图片统一缩放 ----------
   卡片缩略图 hover 时放大，倍率全站统一为 1.05 */
.prod-card .thumb img,
.p-card .pc-img img,
.prod-row .pimg img,
.ind-card img,
.news-card img {
  transition: transform var(--dur-slow) var(--ease-out);
}

.prod-card:hover .thumb img,
.p-card:hover .pc-img img,
.prod-row:hover .pimg img {
  transform: scale(1.05);
}

/* ---------- 6. 表格行 hover 高亮 ---------- */
.product-rich-content tbody tr,
.pd-table tbody tr {
  transition: background var(--dur-fast) var(--ease);
}

.product-rich-content tbody tr:hover,
.pd-table tbody tr:hover {
  background: var(--brand-soft);
}

/* ---------- 7. FAQ 手风琴统一过渡 ---------- */
.faq-item summary,
.pd-faq summary {
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}

.faq-item summary:hover,
.pd-faq summary:hover {
  background: rgba(48, 120, 224, .04);
}

.faq-item summary::after,
.pd-faq summary::after {
  transition: transform var(--dur) var(--ease-out);
}

/* ---------- 8. 横向滚动条统一（分类筛选等） ---------- */
.cat-filter,
.news-filter {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.cat-filter::-webkit-scrollbar,
.news-filter::-webkit-scrollbar {
  height: 6px;
}

.cat-filter::-webkit-scrollbar-thumb,
.news-filter::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}

/* ---------- 9. 滚动显现动画（柔和淡入）----------
   生硬原因：位移 26px 偏大、时长偏短、缓动是线性感较强的 ease。
   改法：位移减到 14px，时长放长到 .7s，缓动改为"缓慢收尾"曲线，
        并让透明度先行、位移稍后完成，形成柔和的浮入感。 */
.reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity .55s var(--ease-soft) 0s,
    transform .75s var(--ease-soft) 0s;
  will-change: opacity, transform;
}

.reveal.in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  /* 动画结束后释放 GPU 图层，避免长页面内存占用 */
  will-change: auto;
}

/* 错峰出现：用 CSS 变量 + 自定义属性控制，
   不受 nth-child 数量限制，第 7 个之后也能依次出现 */
.reveal[data-delay="1"] { transition-delay: .08s, .08s }
.reveal[data-delay="2"] { transition-delay: .16s, .16s }
.reveal[data-delay="3"] { transition-delay: .24s, .24s }
.reveal[data-delay="4"] { transition-delay: .32s, .32s }
.reveal[data-delay="5"] { transition-delay: .40s, .40s }
.reveal[data-delay="6"] { transition-delay: .48s, .48s }

/* 兜底：超出的元素也给递增延迟，避免同一时刻齐刷刷弹出 */
.reveal:nth-child(n+7):nth-child(-n+20) {
  transition-delay: .1s, .1s;
}

/* 卡片类元素浮入更柔：轻微缩放配合位移，比纯位移自然 */
.prod-card.reveal,
.p-card.reveal,
.cap-card.reveal,
.why-card.reveal,
.news-card.reveal,
.pd-adv.reveal {
  transform: translate3d(0, 16px, 0) scale(.985);
}

.prod-card.reveal.in,
.p-card.reveal.in,
.cap-card.reveal.in,
.why-card.reveal.in,
.news-card.reveal.in,
.pd-adv.reveal.in {
  transform: translate3d(0, 0, 0) scale(1);
}

/* 标题与文字块：只淡入不上移，避免大段文字整体位移显得晃 */
.sec-head.reveal,
.ov-text.reveal,
.cta-copy.reveal {
  transform: none;
}

.sec-head.reveal.in,
.ov-text.reveal.in,
.cta-copy.reveal.in {
  transform: none;
}

/* ---------- 9b. 首屏元素入场（不用等滚动，直接柔性淡入）---------- */
@keyframes softRise {
  from { opacity: 0; transform: translate3d(0, 18px, 0) }
  to   { opacity: 1; transform: translate3d(0, 0, 0) }
}

@keyframes softFade {
  from { opacity: 0 }
  to   { opacity: 1 }
}

.hero-inner > * {
  animation: softRise .85s var(--ease-soft) both;
}

.hero-inner > *:nth-child(1) { animation-delay: .05s }
.hero-inner > *:nth-child(2) { animation-delay: .14s }
.hero-inner > *:nth-child(3) { animation-delay: .23s }
.hero-inner > *:nth-child(4) { animation-delay: .32s }
.hero-inner > *:nth-child(5) { animation-delay: .41s }

.hero-card {
  animation: softRise 1s var(--ease-soft) .5s both;
}

/* 板块小标签（eyebrow）单独慢淡入，层次更细腻 */
.sec-head .eyebrow,
.eyebrow {
  animation: softFade .8s var(--ease-soft) both;
}

/* ---------- 9c. 页面切换：整页柔性淡入 ---------- */
main {
  animation: softFade .45s var(--ease-soft) both;
}

/* 滚动锚点跳转时不做整页动画，避免闪烁 */
@media(prefers-reduced-motion: no-preference) {
  html:target main {
    animation: none;
  }
}

/* ---------- 10. 导航下拉统一过渡 ---------- */
.nav a,
.nav .drop-link,
.dropdown a {
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}

/* 顶部导航下划线指示 */
.nav > li > a {
  position: relative;
}

.nav > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width var(--dur) var(--ease-out);
}

.nav > li > a:hover::after,
.nav > li.active > a::after {
  width: calc(100% - 24px);
}

/* ---------- 11. 表单控件统一 ---------- */
input,
textarea,
select {
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

input:hover,
textarea:hover,
select:hover {
  border-color: var(--brand);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}

/* ---------- 12. 悬浮按钮统一 ---------- */
#backTop,
.float-wa {
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease);
}

.float-wa:hover {
  transform: translateY(var(--lift-sm)) scale(1.06);
}

#backTop:hover {
  transform: translateY(var(--lift-sm));
}

/* ---------- 13. 深色区文字色统一（避免各处手写十六进制） ---------- */
.page-hero p,
.cat-hero-sub,
.pd-hero-sub,
.cta-copy p {
  color: var(--on-dark-2);
}

.page-hero .breadcrumb,
.breadcrumb {
  color: var(--on-dark-3);
}

.breadcrumb a {
  color: var(--on-dark-2);
  transition: color var(--dur-fast) var(--ease);
}

.breadcrumb a:hover {
  color: var(--on-dark);
}

.pd-hero-badge,
.cta-points li::before {
  color: var(--brand-glow);
}

.pd-hero-trust,
.cat-hero .chs-lbl,
.cta-note {
  color: rgba(255, 255, 255, .76);
}

/* ============================================================
   无障碍：尊重系统"减少动态效果"设置
   开启后关闭所有位移/缩放动画，仅保留必要的颜色过渡
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto;
  }

  /* 内容必须可见——reveal 未触发时不能留在透明态 */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .prod-card:hover,
  .p-card:hover,
  .why-card:hover,
  .cap-card:hover,
  .prod-card:hover .thumb img,
  .p-card:hover .pc-img img,
  .prod-row:hover .pimg img,
  .btn:active {
    transform: none !important;
  }

  .float-wa:hover,
  #backTop:hover {
    transform: none !important;
  }
}

/* ============================================================
   BUTTON COLOR GUARD — 按钮配色保护层
   ------------------------------------------------------------
   问题：导航/页脚等处的文字规则（如 .nav>li>a{color:var(--ink)}）
   特异性高于 .btn-primary{color:#fff}，导致"红底深字"看不清。

   方案：用 :where() 将选择器特异性归零，再统一声明按钮文字色，
   使任何文字规则都无法覆盖按钮自身配色。新增按钮请加进列表。
   ============================================================ */
:where(.btn.btn-primary,
  .btn.btn-brand,
  .btn.btn-ghost-light,
  .btn.btn-white,
  .btn.btn-dark,
  a.btn.btn-primary,
  a.btn.btn-brand,
  a.btn.btn-ghost-light) {
  color: #fff;
}

:where(.btn.btn-primary, a.btn.btn-primary):hover,
:where(.btn.btn-primary, a.btn.btn-primary):focus-visible {
  color: #fff;
}

:where(.btn.btn-brand, a.btn.btn-brand):hover,
:where(.btn.btn-brand, a.btn.btn-brand):focus-visible {
  color: #fff;
}

:where(.btn.btn-white, a.btn.btn-white) {
  color: var(--brand-dark);
}

/* 导航内按钮：显式覆盖 .nav>li>a 的深色文字 */
.nav>li>a.btn,
.nav>li>a.btn:hover,
.nav>li>a.btn:focus,
.nav>li>a.btn:visited {
  font-weight: 700;
}

.nav>li>a.btn-primary,
.nav>li>a.btn-primary:hover,
.nav>li>a.btn-primary:focus {
  color: #fff;
}

.nav>li>a.btn-brand,
.nav>li>a.btn-brand:hover,
.nav>li>a.btn-brand:focus {
  color: #fff;
}

.nav>li>a.btn-ghost-light,
.nav>li>a.btn-ghost-light:hover,
.nav>li>a.btn-ghost-light:focus {
  color: #fff;
}

/* 导航按钮不做下划线指示条（它是按钮不是文字链接） */
.nav>li>a.btn::after {
  display: none;
}

/* ---------- 顺带修正：页脚链接深色底可读性 ---------- */
.footer ul a,
.footer .foot-contact span,
.footer p {
  color: var(--on-dark-2);
}

.footer ul a:hover {
  color: var(--on-dark);
}

/* ---------- 深色区块内的按钮对比度兜底 ---------- */
.page-hero .btn-outline,
.cta-box .btn-outline,
.hero-slide .btn-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
}

.page-hero .btn-outline:hover,
.cta-box .btn-outline:hover,
.hero-slide .btn-outline:hover {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border-color: #fff;
}

/* ============================================================
   BUTTON VARIANTS — 补齐未定义按钮变体
   ------------------------------------------------------------
   问题：模板中使用 .btn-light(10处) 与 .btn-lg(10处) 但从未定义，
   导致按钮透明无底、大小与普通按钮一致，在深色 CTA 区几乎看不见。
   ============================================================ */

/* 浅色实心按钮：用于深色 CTA 区块、深色 hero */
.btn-light {
  background: #fff;
  color: var(--brand-dark);
  box-shadow: 0 8px 22px rgba(6, 28, 48, .18);
}

.btn-light:hover {
  background: var(--brand-soft);
  color: var(--brand-dark);
  transform: translateY(var(--lift-sm));
  box-shadow: 0 12px 28px rgba(6, 28, 48, .26);
}

/* 大号按钮：用于区块末尾主 CTA */
.btn-lg {
  padding: 16px 34px;
  font-size: 16px;
  border-radius: 999px;
}

/* 深色底上的 .btn-light 文字保护（防止被容器文字规则覆盖） */
:where(.cta-band, .page-hero, .cta-box, .hero-slide) .btn-light,
:where(.cta-band, .page-hero, .cta-box, .hero-slide) .btn-light:hover {
  color: var(--brand-dark);
}

/* ============================================================
   CTA BAND — 行业页底部转化区（原来完全未定义，渲染为裸文字）
   ============================================================ */
.cta-band {
  position: relative;
  background: linear-gradient(120deg, #083043 0%, #1f63c4 60%, #3078e0 130%);
  color: #fff;
  padding: 62px 0;
  text-align: center;
  overflow: hidden;
}

.cta-band::after {
  content: "";
  position: absolute;
  right: -100px;
  top: -100px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(63, 214, 196, .26), transparent 70%);
  pointer-events: none;
}

.cta-band .container {
  position: relative;
  z-index: 1;
}

.cta-band h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.3;
}

.cta-band p {
  color: var(--on-dark-2);
  font-size: 16px;
  max-width: 620px;
  margin: 0 auto 26px;
}

/* ============================================================
   补齐其他未定义容器类，避免"裸样式"区块
   ============================================================ */
.cta-band + .cta-band,
.why-sec,
.faq-sec,
.cat-list,
.pd-detail {
  /* 语义锚点：已有 .section 提供内边距，这里只兜底防止完全无样式 */
  display: block;
}

.card-body {
  padding: 20px 22px;
}

/* 地图展开按钮 */
.map-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brand-dark);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.map-open:hover {
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: var(--shadow);
}

/* 概览文字块 */
.ov-text {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  color: var(--ink-2);
  font-size: 16.5px;
  line-height: 1.85;
}

/* ============================================================
   ICON SYSTEM — 图标统一规范
   ------------------------------------------------------------
   问题：模板中 283 个内联 SVG 用了 9 种尺寸、5 种描边粗细
        （stroke-width 1.8/1.9/2/2.2/2.5），同一排图标粗细不一，
        视觉上"忽胖忽瘦"，是显得不精致的主因。

   方案：不改 283 处 HTML，用 CSS 统一几何属性：
        · 圆角端点与圆角连接（比默认方角更柔和精致）
        · 非填充图标统一描边宽度
        · 统一垂直对齐，图标与文字基线对齐
        · 统一过渡，hover 时可随按钮/卡片联动
   ============================================================ */

/* 所有内联 SVG 默认几何规范 */
svg {
  flex-shrink: 0;
  vertical-align: middle;
  /* 圆角端点 + 圆角拐角：线条更柔和，观感更精致 */
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* 线性图标（fill=none）统一描边粗细，覆盖模板里的 1.8~2.5 */
svg[fill="none"],
svg:not([fill]) {
  stroke-width: 1.9;
}

/* 保持小尺寸图标的清晰度：小图标略细，避免糊成一团 */
svg[width="14"],
svg[width="15"],
svg[width="16"],
svg[width="17"] {
  stroke-width: 2;
}

/* 大尺寸装饰图标略细，避免显得笨重 */
svg[width="28"],
svg[width="30"],
svg[width="32"],
svg[width="34"] {
  stroke-width: 1.7;
}

/* ---------- 图标容器统一（圆形/方形底板）---------- */
.ico,
.cap-ico,
.hp-ico,
.step .ico,
.why-card .ico,
.stat .ico {
  display: grid;
  place-items: center;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease);
}

/* 卡片 hover 时图标轻微放大，增强反馈一致性 */
.why-card:hover .ico,
.cap-card:hover .cap-ico,
.pd-adv:hover::before {
  transform: scale(1.06);
}

/* ---------- 箭头字符统一 ----------
   模板里混用 →(109处) 与 ›(41处)，统一由 CSS 控制间距与位移 */
.hp-go,
.pc-quote::after,
.btn .arrow {
  transition: transform var(--dur) var(--ease-out);
}

.hp:hover .hp-go {
  transform: translateX(4px);
}

.btn:hover .arrow {
  transform: translateX(3px);
}

/* ---------- 星级评分统一 ---------- */
.stars {
  color: #f5a623;
  letter-spacing: 2px;
  font-size: 15px;
  line-height: 1;
}

/* ---------- 小图标与文字并排时的统一间距 ---------- */
.btn > svg + span,
.cert-chip > svg,
.tb-item > svg,
.breadcrumb > svg {
  margin-right: 6px;
}

/* 最后一个子元素若是图标则不需要右边距 */
.btn > span + svg,
.cert-chip > span + svg {
  margin-right: 0;
  margin-left: 6px;
}

/* ============================================================
   TYPOGRAPHY SYSTEM — 字体统一规范
   ------------------------------------------------------------
   问题：样式表里正文出现了 10 种字号（13/13.5/14/14.5/15/15.5/16/
        16.5/17/17.5px），行高也有 10 种（1/1.15/1.3/1.4/1.65/
        1.7/1.72/1.75/1.85 等）。半像素字号混杂会让整站显得零碎。

   方案：建立 6 级字号阶梯 + 3 档行高，正文统一 15.5px/1.75。
        新增内容请复用 --fs-* 变量，不要再写半像素字号。
   ============================================================ */

:root {
  /* 字号阶梯 */
  --fs-xs: 12.5px;   /* 角标、标签、辅助说明 */
  --fs-sm: 13.5px;   /* 卡片摘要、表格正文 */
  --fs-base: 15.5px; /* 正文（默认） */
  --fs-md: 16.5px;   /* 引导段落 */
  --fs-lg: 19px;     /* 小标题 h4 */
  --fs-xl: 24px;     /* 区块小标题 h3 */

  /* 行高三档 */
  --lh-tight: 1.3;   /* 标题 */
  --lh-normal: 1.6;  /* 卡片、按钮 */
  --lh-relaxed: 1.78; /* 正文段落 */
}

/* ---------- 正文基准统一 ---------- */
body {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
}

/* 段落统一行高与下间距，消除 1.65/1.7/1.72/1.75 混杂 */
p {
  line-height: var(--lh-relaxed);
}

/* ---------- 标题层级统一（严格递减，不跳级）---------- */
h1 {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.14;
  letter-spacing: -.02em;
  font-weight: 800;
}

h2 {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.22;
  letter-spacing: -.015em;
  font-weight: 800;
}

h3 {
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  font-weight: 700;
}

h4 {
  font-size: var(--fs-lg);
  line-height: 1.35;
  font-weight: 700;
}

/* 正文中 h2/h3 的上下间距统一，避免疏密不均 */
.sec-head h2,
.section h2 {
  margin-bottom: 14px;
}

.sec-head p {
  font-size: var(--fs-md);
  color: var(--ink-2);
  line-height: var(--lh-relaxed);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 卡片与列表文字统一到两档 ---------- */
.prod-card p,
.p-card .pc-body p,
.news-card p,
.cap-card p,
.why-card p,
.pd-adv p,
.pd-mat p,
.pd-step p,
.app-card p,
.ind-card p {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* 表格文字统一 */
table,
.pd-table,
.product-rich-content table {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* 辅助/标签类文字统一 */
.tag,
.ptag,
.pc-cat,
.eyebrow,
.sb-k,
.pd-mat-cond,
.breadcrumb,
.cert-chip,
.tb-item {
  font-size: var(--fs-xs);
}

/* ---------- 中文排版优化 ---------- */
:lang(zh),
.lang-zh {
  word-break: break-word;
  line-height: 1.8;
}

/* 长英文单词/型号不撑破容器 */
h1, h2, h3, h4, p, li, td {
  overflow-wrap: break-word;
}

/* ---------- 数字统一使用等宽表格数字，对齐更整齐 ---------- */
.stat .num,
.chs-num,
.hc-num,
.pd-step-num,
.sb-v,
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ============================================================
   SPEC TAGS — 卡片规格标签整齐化
   ------------------------------------------------------------
   问题：3 个标签宽度不一，换行后出现"2 个 + 1 个孤儿"的参差布局，
        卡片底部高度也不一致。
   方案：改为等宽三列，标签始终排成整齐一行（窄屏自动降为两列）。
   ============================================================ */
.prod-card .spec {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
}

.prod-card .spec span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 6px;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* 勾选符号与文字统一间距 */
.prod-card .spec span::before {
  margin-right: 2px;
  font-size: 10.5px;
}

/* 窄屏退化为两列，避免挤压 */
@media(max-width:1100px) {
  .prod-card .spec {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:620px) {
  .prod-card .spec {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 卡片正文高度对齐：标题固定两行位，摘要固定三行位 */
.prod-card h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.4em * 2);
}

.prod-card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   SOFT MOTION PASS — 消除生硬感
   ------------------------------------------------------------
   原理：生硬 = 位移大 + 时长短 + 缓动线性感强。
   逐一软化：卡片 hover 改用"缓出"曲线并延长到 .34s，
   图片缩放放慢、按钮按压加回弹，抽屉/下拉用柔性曲线。
   ============================================================ */

/* ---------- 卡片 hover：时间稍长，落位更柔 ---------- */
.prod-card,
.p-card,
.why-card,
.news-card,
.cap-card,
.svc-card,
.cert-card,
.testi-card,
.info-card,
.pain-card,
.value-card,
.app-card,
.ind-card,
.pillar-card,
.pd-adv,
.pd-step,
.prod-row {
  transition:
    transform .34s var(--ease-soft),
    box-shadow .34s var(--ease-soft),
    border-color .3s var(--ease);
}

/* ---------- 图片缩放：放慢，避免"抽一下" ---------- */
.prod-card .thumb img,
.p-card .pc-img img,
.prod-row .pimg img,
.ind-card img,
.news-card img {
  transition: transform .65s var(--ease-soft);
}

/* ---------- 按钮：hover 落位柔和，按压有轻微回弹 ---------- */
.btn {
  transition:
    background .3s var(--ease-soft),
    color .3s var(--ease-soft),
    border-color .3s var(--ease-soft),
    box-shadow .34s var(--ease-soft),
    transform .34s var(--ease-soft);
}

.btn:hover {
  transform: translateY(var(--lift-sm));
}

.btn:active {
  /* 按下时轻微内收，松开自然回弹 */
  transform: translateY(0) scale(.975);
  transition-duration: .1s;
}

/* ---------- 导航下拉：展开用柔性曲线 ---------- */
.dropdown,
.mega {
  transition:
    opacity .28s var(--ease-soft),
    transform .32s var(--ease-soft),
    visibility .28s;
}

/* ---------- 手风琴展开：高度过渡更柔 ---------- */
.faq-item,
.pd-faq {
  transition:
    border-color .3s var(--ease-soft),
    box-shadow .34s var(--ease-soft);
}

.fa-body,
.pd-faq-body {
  animation: softFade .4s var(--ease-soft) both;
}

/* ---------- 轮播：切换曲线更顺滑 ---------- */
.hero-slides {
  transition: transform .9s cubic-bezier(.25, .8, .35, 1) !important;
}

/* ---------- 分页/筛选按钮 ---------- */
.pg-btn,
.pager .page-num,
.cf-btn,
.cat-filter button,
.news-filter button {
  transition:
    background .28s var(--ease-soft),
    color .28s var(--ease-soft),
    border-color .28s var(--ease-soft),
    transform .28s var(--ease-soft),
    box-shadow .3s var(--ease-soft);
}

.cf-btn:active,
.pg-btn:active,
.cat-filter button:active,
.news-filter button:active {
  transform: scale(.97);
}

/* ---------- 悬浮按钮：出现/消失更柔 ---------- */
#backTop,
.float-wa {
  transition:
    opacity .35s var(--ease-soft),
    transform .4s var(--ease-soft),
    box-shadow .35s var(--ease-soft);
}

/* ---------- 表单控件：聚焦过渡柔和 ---------- */
input,
textarea,
select {
  transition:
    border-color .25s var(--ease-soft),
    box-shadow .3s var(--ease-soft),
    background .25s var(--ease-soft);
}

/* ---------- 表格行高亮：淡入而非瞬变 ---------- */
.product-rich-content tbody tr,
.pd-table tbody tr {
  transition: background .22s var(--ease-soft);
}

/* ============================================================
   无障碍：减少动效时彻底关闭动画（含新增的 keyframes）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-inner > *,
  .hero-card,
  .eyebrow,
  main,
  .fa-body,
  .pd-faq-body {
    animation: none !important;
  }

  .reveal,
  .prod-card.reveal,
  .p-card.reveal,
  .cap-card.reveal,
  .why-card.reveal,
  .news-card.reveal,
  .pd-adv.reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }

  .btn:hover,
  .btn:active,
  .prod-card:hover,
  .p-card:hover,
  .why-card:hover,
  .cap-card:hover {
    transform: none !important;
  }
}

/* ============================================================
   HERO / BANNER 重构 — 全屏自适应，内容不再溢出
   ------------------------------------------------------------
   原问题：
     1. .hero .container 用固定 padding(110px/120px)，hero 总高
        在 900px 视口下超过一屏，hero-card 被挤出屏幕外
     2. 内容顶部对齐，下方留大量空白，未垂直居中
     3. 超宽屏(2560px)下文字块贴左、图片主体被裁
     4. 轮播箭头与文字重叠

   方案（外贸站通用做法）：
     · 用 clamp() 让高度随视口缩放，最小 560px、最大 780px
     · 内容垂直居中，不再靠固定 padding 撑高
     · 超宽屏限制文字块宽度并保持左侧对齐，右侧留给图像
     · 箭头移到安全位置，不与文字重叠
   ============================================================ */

/* ---------- 1. Hero 总高度：随视口自适应 ---------- */
.hero {
  position: relative;
  min-height: clamp(560px, 78vh, 780px);
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
}

.hero-slide {
  position: relative;
  width: 100%;
  min-height: clamp(560px, 78vh, 780px);
  display: flex;
  align-items: center;
}

/* ---------- 2. 容器：垂直居中，去掉固定大 padding ---------- */
.hero .container {
  position: relative;
  z-index: 2;
  padding-top: clamp(28px, 5vh, 60px);
  padding-bottom: clamp(28px, 5vh, 60px);
  width: 100%;
}

/* ---------- 3. 文字块：超宽屏不再无限拉宽 ---------- */
.hero-inner {
  max-width: min(660px, 52vw);
}

/* 超宽屏（2000px+）保持左侧对齐，右侧留给图像主体 */
@media(min-width:1900px) {
  .hero-inner {
    max-width: 720px;
  }
}

/* ---------- 4. Hero 卡片：改为流式定位，不再掉出屏幕 ---------- */
.hero-card {
  position: absolute;
  right: clamp(20px, 3vw, 56px);
  bottom: clamp(20px, 4vh, 44px);
  z-index: 2;
  display: none;
  max-width: min(340px, 26vw);
}

/* 只在足够宽的屏幕上显示卡片，避免与文字抢空间 */
@media(min-width:1200px) {
  .hero-card {
    display: block;
  }
}

/* ---------- 5. 轮播箭头：移到安全位置，不与文字重叠 ---------- */
.hero-arrow {
  z-index: 3;
}

.hero-arrow.prev {
  left: clamp(8px, 1.5vw, 24px);
}

.hero-arrow.next {
  right: clamp(8px, 1.5vw, 24px);
}

/* 文字与箭头之间保留呼吸空间 */
.hero .container {
  padding-left: clamp(56px, 6vw, 96px);
  padding-right: clamp(56px, 6vw, 96px);
}

/* ---------- 6. 背景图：优化裁切焦点，避免主体被切 ---------- */
.hero-bg {
  object-position: center 42%;
}

/* 首屏大图保留清晰度，但限制在合理尺寸 */
@media(min-width:1900px) {
  .hero-bg {
    object-position: 62% center;
  }
}

/* ---------- 7. 轮播圆点：下移，避开内容 ---------- */
.hero-dots {
  bottom: clamp(14px, 3vh, 28px);
  z-index: 3;
}

/* ---------- 8. 标题字号：随视口缩放，避免超宽屏过大 ---------- */
.hero h1 {
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.12;
  margin-bottom: clamp(12px, 2vh, 20px);
}

.hero p.lead {
  font-size: clamp(14.5px, 1.1vw, 17px);
  line-height: 1.7;
  margin-bottom: clamp(18px, 3vh, 28px);
}

/* ---------- 9. 矮屏（笔记本 768px 高）压缩间距 ---------- */
@media(max-height:800px) and (min-width:1024px) {
  .hero,
  .hero-slide {
    min-height: 540px;
  }

  .hero h1 {
    font-size: clamp(26px, 3vw, 40px);
  }

  .hero p.lead {
    font-size: 15px;
    margin-bottom: 18px;
  }

  .hero .container {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .hero-card {
    display: none;
  }
}

/* ---------- 10. 平板与手机 ---------- */
@media(max-width:1024px) {
  .hero,
  .hero-slide {
    min-height: 520px;
  }

  .hero-inner {
    max-width: 100%;
  }

  .hero .container {
    padding-left: clamp(20px, 5vw, 48px);
    padding-right: clamp(20px, 5vw, 48px);
  }
}

@media(max-width:768px) {
  .hero,
  .hero-slide {
    min-height: 480px;
  }

  .hero h1 {
    font-size: clamp(24px, 6.4vw, 34px);
  }

  .hero .badge {
    font-size: 11.5px;
    padding: 6px 12px;
  }

  .hero .cta-row {
    gap: 10px;
  }

  .hero .cert-row {
    gap: 8px;
    margin-top: 16px;
  }
}

@media(max-width:480px) {
  .hero,
  .hero-slide {
    min-height: 440px;
  }

  .hero .container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .hero h1 {
    font-size: 23px;
  }

  .hero p.lead {
    font-size: 14px;
  }

  /* 小屏隐藏轮播箭头，靠滑动切换 */
  .hero-arrow {
    display: none;
  }
}

/* ---------- 11. 超长内容保护：文字绝不溢出 hero ---------- */
.hero-inner {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ============================================================
   HERO 移动端溢出修复
   ------------------------------------------------------------
   现象：430px 宽下 badge（Automotive · Medical · Industrial ·
        Telecommunication）与 cert-chip 文字被右侧裁切。
   原因：文字为长英文串，容器未限制宽度、未允许换行。
   ============================================================ */

/* 徽标：允许换行并限制在容器内 */
.hero .badge {
  max-width: 100%;
  white-space: normal;
  line-height: 1.45;
  flex-wrap: wrap;
  row-gap: 4px;
}

/* 认证 chips：允许收缩与换行 */
.hero .cert-row {
  max-width: 100%;
}

.hero .cert-chip {
  max-width: 100%;
  white-space: normal;
  line-height: 1.4;
}

/* 图标不被压缩，但文字可以换行 */
.hero .badge i,
.hero .cert-chip svg {
  flex: 0 0 auto;
}

/* 超小屏进一步压缩 */
@media(max-width:520px) {
  .hero .badge {
    font-size: 11px;
    padding: 6px 11px;
    gap: 6px;
  }

  .hero .cert-chip {
    font-size: 11.5px;
    padding: 5px 10px;
    gap: 5px;
  }

  .hero .cert-row {
    gap: 6px;
  }

  .hero .cta-row .btn {
    padding: 11px 18px;
    font-size: 13.5px;
  }

  /* 手机端标语简化显示，避免过长换行 */
  .hero p.lead {
    font-size: 13.5px;
    line-height: 1.65;
  }
}

/* 全局兜底：任何容器都不产生横向滚动 */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

.hero,
.hero-slide,
.hero .container,
.hero-inner {
  max-width: 100%;
}

/* ============================================================
   MOBILE DRAWER 溢出修复（根治）
   ------------------------------------------------------------
   根因：移动端导航抽屉用 .nav{right:-320px} 停靠在视口右侧外。
        虽然 html/body 设了 overflow-x:hidden，但
        · .header 是 position:sticky，会建立新的层叠/包含块
        · 抽屉 fixed 定位仍参与布局宽度计算
        最终导致整页被撑宽 320px，页面右移、左右两端被裁。

   方案：改用 transform 移出屏幕（不参与布局宽度），
        并给抽屉容器加 will-change 提升为独立图层。
   ============================================================ */

@media(max-width:1024px) {

  /* 抽屉：用 transform 隐藏，不再用负 right 撑宽页面 */
  .nav {
    right: 0 !important;
    width: min(320px, 86vw);
    transform: translateX(105%);
    transition: transform var(--dur) var(--ease-soft);
    will-change: transform;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav.open {
    transform: translateX(0);
  }

  /* 打开时禁止背景滚动 */
  body.nav-open {
    overflow: hidden;
  }
}

/* 移动端顶栏与 hero 的左右内边距统一，避免贴边被裁 */
@media(max-width:768px) {
  .header .container,
  .hero .container,
  .section .container,
  .container {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* 全局兜底：确保任何 fixed 元素都不会撑宽文档 */
html,
body {
  overflow-x: clip;
  /* clip 比 hidden 更彻底：不产生滚动容器，也不影响 sticky */
}

/* 兼容不支持 overflow:clip 的浏览器时退回 hidden */
@supports not (overflow: clip) {

  html,
  body {
    overflow-x: hidden;
  }
}

/* ============================================================
   1. BANNER 提亮 — 消除"黑沉沉"观感
   ------------------------------------------------------------
   实测：原遮罩为 rgba(6,28,48,.93)→rgba(31,99,196,.35)，
        明度仅 33~74，整体压得过暗。
   改法：降低遮罩不透明度，改用"左深右透"的渐变，
        左侧保文字可读，右侧露出图片本色，层次更通透。
   ============================================================ */
.hero-slide::before {
  background:
    linear-gradient(100deg,
      rgba(4, 26, 44, .90) 0%,
      rgba(8, 46, 74, .70) 38%,
      rgba(14, 62, 104, .42) 62%,
      rgba(20, 80, 130, .22) 100%);
}

/* 叠加一层极淡的顶部高光，让画面通气不闷 */
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 80% at 78% 18%,
      rgba(120, 200, 255, .14), transparent 58%);
}

/* 背景图本身提亮一点对比，避免发灰 */
.hero-bg {
  filter: brightness(1.14) contrast(1.06) saturate(1.08);
}

/* ============================================================
   2. STATS 板块 — 降低高度、数字更协调
   ------------------------------------------------------------
   实测：原高度约 250px，偏厚；数字 clamp(30,3.6vw,46) 与
        标签 13.5px 差距过大，显得头重脚轻。
   改法：整体压缩到约 150px，改用横向图标+文字布局，
        数字与标签比例协调，视觉更精致。
   ============================================================ */
.stats {
  background: linear-gradient(120deg, #2f74dd 0%, #2b8fd4 50%, #17a8a8 100%);
  padding: 30px 0;
}

.stats .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: center;
}

/* 每个统计项：图标在左、数字标签在右，横向排布更省高度 */
.stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  text-align: left;
  padding: 4px 6px;
}

.stats .stat .ico {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  margin: 0;
  border-radius: 11px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .26);
}

.stats .stat .ico svg {
  width: 19px;
  height: 19px;
}

/* 数字与标签改为上下紧排，字号差距收窄 */
.stat .txt {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.stat .num {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(21px, 1.9vw, 27px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.01em;
}

.stat .lbl {
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 500;
  opacity: .88;
  letter-spacing: .01em;
  line-height: 1.3;
}

/* 数字单位（+ m² %）统一为小号上标风格，视觉更整齐 */
.stat .num sup,
.stat .num .u {
  font-size: .58em;
  font-weight: 700;
  margin-left: 1px;
  vertical-align: super;
  line-height: 0;
}

/* 分隔线：替代原来大面积色块，更轻盈 */
.stat + .stat {
  border-left: 1px solid rgba(255, 255, 255, .16);
}

/* 平板：2 列 */
@media(max-width:820px) {
  .stats {
    padding: 24px 0;
  }

  .stats .container {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 10px;
  }

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

  .stat + .stat {
    border-left: none;
  }

  .stat:nth-child(even) {
    border-left: 1px solid rgba(255, 255, 255, .16);
    padding-left: 16px;
  }
}

/* 手机：保持 2 列，字号进一步收 */
@media(max-width:520px) {
  .stats .container {
    gap: 14px 8px;
  }

  .stat {
    gap: 10px;
  }

  .stats .stat .ico {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  .stats .stat .ico svg {
    width: 16px;
    height: 16px;
  }

  .stat .num {
    font-size: 19px;
  }

  .stat .lbl {
    font-size: 11.5px;
  }

  .stat:nth-child(even) {
    padding-left: 12px;
  }
}

/* ============================================================
   BANNER 全屏改造 + 数字板块下移
   ------------------------------------------------------------
   目标：
     · 桌面/平板/手机 三端 banner 都是「首屏整屏」
     · 手机端使用独立的 9:16 竖屏长图，铺满整屏
     · 数字板块从 banner 内移出，作为独立区块排在下方
   ============================================================ */

/* ---------- 1. Hero 改为真正的整屏高 ---------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;             /* 移动端浏览器地址栏收缩时更稳定 */
  min-height: 560px;
  max-height: none;
  display: block;
  overflow: hidden;
}

.hero-slides {
  height: 100vh;
  height: 100svh;
  min-height: 560px;
}

.hero-slide {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  display: flex;
  align-items: center;
}

/* ---------- 2. 背景图：整屏铺满，三端各自取图 ---------- */
.hero-slide picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 桌面宽屏：焦点略偏右，露出主体 */
@media(min-width:1200px) {
  .hero-bg {
    object-position: 58% center;
  }
}

/* 手机竖屏：长图居中，保证主体完整 */
@media(max-width:768px) {
  .hero-bg {
    object-position: center 45%;
    filter: brightness(1.05) contrast(1.04) saturate(1.06);
  }
}

/* ---------- 3. 内容垂直居中 ---------- */
.hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
}

.hero-inner {
  width: 100%;
}

/* ---------- 4. 手机端排版：竖屏长图下内容居中偏上 ---------- */
@media(max-width:768px) {
  .hero-slide {
    align-items: center;
    padding-top: 12vh;
  }

  .hero .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero-inner {
    max-width: 100%;
    text-align: left;
  }

  /* 竖屏图更依赖遮罩保证文字可读 */
  .hero-slide::before {
    background:
      linear-gradient(180deg,
        rgba(4, 26, 44, .78) 0%,
        rgba(4, 30, 50, .58) 42%,
        rgba(4, 34, 56, .82) 100%);
  }
}

/* 超小屏：进一步压缩，避免内容超出整屏 */
@media(max-width:480px) {
  .hero h1 {
    font-size: 26px;
    line-height: 1.18;
  }

  .hero .badge {
    font-size: 10.5px;
    padding: 5px 10px;
  }

  .hero p.lead {
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 16px;
  }

  .hero .cta-row {
    gap: 8px;
  }

  .hero .cta-row .btn {
    padding: 11px 16px;
    font-size: 13px;
  }

  .hero .cert-row {
    gap: 6px;
    margin-top: 14px;
  }

  .hero .cert-chip {
    font-size: 10.5px;
    padding: 4px 8px;
  }
}

/* ---------- 5. 数字板块：从 banner 移出，独立成块 ---------- */
.hero + .stats,
.stats {
  position: relative;
  z-index: 3;
}

/* ---------- 6. 矮屏保护：不能让内容溢出整屏 ---------- */
@media(max-height:680px) and (min-width:769px) {
  .hero,
  .hero-slides,
  .hero-slide {
    height: auto;
    min-height: 520px;
  }

  .hero .container {
    padding-top: 90px;
    padding-bottom: 70px;
  }

  .hero-card {
    display: none;
  }
}

/* ---------- 7. 移动端隐藏 hero-card，避免遮挡 ---------- */
@media(max-width:768px) {
  .hero-card {
    display: none !important;
  }

  .hero-arrow {
    display: none;
  }

  .hero-dots {
    bottom: 20px;
  }
}

/* ============================================================
   HERO 文字溢出修复（根治）
   ------------------------------------------------------------
   根因：.hero-inner{max-width:min(660px,52vw)} 是为超宽屏设计的，
        但在 430px 手机上 52vw = 224px，远小于可用宽度，
        文字被压在一个过窄的盒子里 → 溢出到画布边缘被裁。

   改法：max-width 只在桌面端生效，移动/平板一律 100%。
   ============================================================ */

/* 默认（含移动端）：占满容器 */
.hero-inner {
  max-width: 100%;
  width: 100%;
}

/* 仅桌面端限制宽度（保证行长舒适，右侧留给图像） */
@media(min-width:1025px) {
  .hero-inner {
    max-width: min(660px, 56vw);
  }
}

@media(min-width:1900px) {
  .hero-inner {
    max-width: 720px;
  }
}

/* 容器内边距：移动端统一 20px，桌面端才有大留白 */
@media(max-width:1024px) {
  .hero .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media(max-width:768px) {
  .hero .container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* 文字强制在盒内换行，任何情况下不溢出 */
.hero h1,
.hero p.lead,
.hero .badge,
.hero .cert-chip {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 手机端标题允许自然断行，避免长单词撑破 */
@media(max-width:768px) {
  .hero h1 {
    font-size: clamp(25px, 7.2vw, 32px);
    line-height: 1.16;
    letter-spacing: -.01em;
  }

  .hero p.lead {
    font-size: 14px;
    line-height: 1.62;
  }
}

@media(max-width:480px) {
  .hero h1 {
    font-size: 24px;
  }

  .hero p.lead {
    font-size: 13.5px;
  }
}

/* ============================================================
   移动端抽屉菜单 —— 布局修复（乱码/挤成一列）
   ------------------------------------------------------------
   根因：桌面端 mega 菜单用 grid-template-columns:repeat(3,1fr)
        三列并排。手机抽屉宽仅 300px，三列每列不到 90px，
        中文被逐字挤成竖排，看起来像"乱码"。
   改法：移动端一律改为单列纵向堆叠，卡片改为横向小图，
        文字正常横排。
   ============================================================ */
@media(max-width:1024px) {

  /* 抽屉内的下拉：单列、可滚动、去掉桌面样式 */
  .nav .dropdown,
  .nav .dropdown.mega,
  .nav .dropdown.mega-svc,
  .nav .dropdown.mega-ind,
  .nav .dropdown.mega-cmp,
  .nav .dropdown.mega-news {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 6px 0 10px 12px !important;
    margin: 0 !important;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition: max-height .38s var(--ease-soft);
  }

  .nav .has-drop.open > .dropdown {
    max-height: 1400px;
    overflow-y: auto;
  }

  /* 隐藏桌面端的箭头小三角 */
  .dropdown::before { display: none !important; }

  /* 关键：所有网格一律单列，文字不再被挤成竖排 */
  .dropdown .drop-head,
  .dropdown .drop-col,
  .drop-col-card,
  .dropdown .drop-head[class] {
    display: block !important;
    grid-template-columns: none !important;
    gap: 4px !important;
  }

  /* 卡片：改为「小图 + 文字」横排，紧凑清晰 */
  .mega-card {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 10px !important;
    margin: 0 0 4px !important;
    border-radius: 9px !important;
    background: var(--bg) !important;
  }

  .mega-card img,
  .mega-card .mc-body img {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    border-radius: 7px !important;
    object-fit: cover !important;
  }

  .mega-card .mc-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .mega-card .mc-body b {
    font-size: 13.5px !important;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal !important;
    word-break: break-word;
  }

  .mega-card .mc-body small {
    font-size: 11.5px !important;
    color: var(--gray);
    line-height: 1.35;
    white-space: normal !important;
  }

  /* 普通链接：单行文字，左对齐 */
  .mega-link,
  .dropdown .drop-col a:not(.mega-card) {
    display: block !important;
    padding: 8px 10px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-break: break-word;
  }

  .mega-link b {
    display: block;
    font-size: 13px !important;
    font-weight: 500;
    white-space: normal !important;
  }

  .mega-link small {
    display: block;
    font-size: 11.5px !important;
    color: var(--gray);
    margin-top: 1px;
    white-space: normal !important;
  }

  /* 下拉底部的 "All ..." 行 */
  .drop-foot {
    display: block !important;
    padding: 10px 10px 4px !important;
    border-top: 1px solid var(--line);
    margin-top: 6px;
  }

  .drop-foot a {
    font-size: 13px !important;
    white-space: normal !important;
  }

  .drop-foot span {
    display: block;
    font-size: 11.5px;
    color: var(--gray);
    margin-top: 3px;
    line-height: 1.4;
    white-space: normal !important;
  }

  /* 二级菜单的分组标题 */
  .dropdown .drop-title {
    padding: 10px 10px 4px !important;
    font-size: 11px !important;
    letter-spacing: .1em;
    color: var(--gray);
  }
}

/* 超窄屏进一步压缩卡片图片 */
@media(max-width:400px) {
  .mega-card img,
  .mega-card .mc-body img {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
  }
}

/* ============================================================
   TRANSPARENT HEADER — 首屏透明导航，下拉变实色
   ------------------------------------------------------------
   效果：页面刚打开时（滚动条在顶部）
         · 导航背景透明，与 banner 融为一体 → banner 显大
         · 文字/图标/logo 全部白色
         · 顶部信息条也透明
         向下滚动后恢复现有白底深字样式。
   仅首页启用（内页保持实色，避免与浅色 hero 冲突）。
   ============================================================ */

/* 默认：首页顶部状态 —— 透明 + 白字 */
body.has-transparent-header .header:not(.scrolled) {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

/* 顶部信息条一起透明 */
body.has-transparent-header .topbar:not(.solid) {
  background: transparent !important;
  border-bottom-color: rgba(255, 255, 255, .14) !important;
}

body.has-transparent-header .topbar:not(.solid) a,
body.has-transparent-header .topbar:not(.solid) span,
body.has-transparent-header .topbar:not(.solid) .tb-right a {
  color: rgba(255, 255, 255, .88) !important;
}

body.has-transparent-header .topbar:not(.solid) a:hover {
  color: #fff !important;
}

/* 导航文字变白 */
body.has-transparent-header .header:not(.scrolled) .nav > li > a {
  color: #fff !important;
}

body.has-transparent-header .header:not(.scrolled) .nav > li > a:hover,
body.has-transparent-header .header:not(.scrolled) .nav > li.active > a {
  color: #fff !important;
  opacity: .78;
}

/* 导航下划线指示条改为白色 */
body.has-transparent-header .header:not(.scrolled) .nav > li > a::after {
  background: #fff !important;
}

/* 下拉箭头变白 */
body.has-transparent-header .header:not(.scrolled) .nav .chev {
  color: #fff !important;
}

/* 汉堡按钮变白 */
body.has-transparent-header .header:not(.scrolled) .hamburger {
  background: rgba(255, 255, 255, .14) !important;
  border-color: rgba(255, 255, 255, .28) !important;
}

body.has-transparent-header .header:not(.scrolled) .hamburger span {
  background: #fff !important;
}

/* Logo 反白：用 filter 把深色 logo 转成白色 */
body.has-transparent-header .header:not(.scrolled) .logo img {
  filter: brightness(0) invert(1);
}

/* 「Get a Quote」按钮在透明状态下保持红底白字，作为视觉焦点 */
body.has-transparent-header .header:not(.scrolled) .nav .btn-primary {
  box-shadow: 0 8px 24px rgba(200, 32, 40, .35);
}

/* ---------- 滚动后：恢复现有白底深字 ---------- */
body.has-transparent-header .header.scrolled {
  background: #fff !important;
  border-bottom-color: var(--line) !important;
  box-shadow: 0 6px 24px rgba(11, 46, 59, .08) !important;
}

body.has-transparent-header .header.scrolled .nav > li > a {
  color: var(--ink) !important;
}

body.has-transparent-header .header.scrolled .nav > li > a:hover,
body.has-transparent-header .header.scrolled .nav > li.active > a {
  color: var(--brand) !important;
  opacity: 1;
}

body.has-transparent-header .header.scrolled .nav > li > a::after {
  background: var(--brand) !important;
}

body.has-transparent-header .header.scrolled .nav .chev {
  color: currentColor !important;
}

body.has-transparent-header .header.scrolled .logo img {
  filter: none;
}

body.has-transparent-header .header.scrolled .hamburger {
  background: var(--brand-soft) !important;
  border-color: transparent !important;
}

body.has-transparent-header .header.scrolled .hamburger span {
  background: var(--ink) !important;
}

/* 顶部信息条：滚动后收起（给 banner 更多空间） */
body.has-transparent-header .topbar {
  transition: color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              max-height var(--dur) var(--ease),
              opacity var(--dur) var(--ease),
              padding var(--dur) var(--ease);
  overflow: hidden;
  max-height: 60px;
}

body.has-transparent-header .topbar.solid {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-color: transparent !important;
}

/* 过渡：颜色与背景平滑切换，避免"闪一下" */
body.has-transparent-header .header,
body.has-transparent-header .header .nav > li > a,
body.has-transparent-header .header .logo img {
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              filter var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}

/* 移动端抽屉打开时，header 必须回到实色，否则抽屉内文字看不清 */
body.nav-open .header,
body.nav-open .header:not(.scrolled) {
  background: #fff !important;
}

body.nav-open .header:not(.scrolled) .nav > li > a {
  color: var(--ink) !important;
}

body.nav-open .header:not(.scrolled) .logo img {
  filter: none;
}

body.nav-open .header:not(.scrolled) .hamburger {
  background: var(--brand-soft) !important;
}

body.nav-open .header:not(.scrolled) .hamburger span {
  background: var(--ink) !important;
}


/* ============================================================
   透明导航修正 —— header 必须浮在 banner 之上
   ------------------------------------------------------------
   原问题：topbar(40px) + header(78px) 处于正常文档流，
          ​banner 从 y=118px 才开始 → 导航下方是白底，白字看不见。
   改法：首页让 topbar + header 脱离文档流（fixed），
          banner 顶到 y=0 铺满整屏，导航真正叠在图片上。
   ============================================================ */

/* ---------- 首页：导航固定悬浮，banner 顶到顶部 ---------- */
body.has-transparent-header .topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

body.has-transparent-header .header {
  position: fixed;
  top: 40px;              /* 让出顶部信息条高度 */
  left: 0;
  right: 0;
  z-index: 999;
  background: transparent;
}

/* banner 顶到页面最上方，被导航覆盖 */
body.has-transparent-header .hero {
  margin-top: 0;
}

/* hero 首屏高度补偿：fixed 导航不再占据文档流，
   hero 用 100vh 正好铺满整屏 */
body.has-transparent-header .hero,
body.has-transparent-header .hero-slides,
body.has-transparent-header .hero-slide {
  height: 100vh;
  height: 100svh;
}

/* ---------- 滚动后：导航收回实色并固定 ---------- */
body.has-transparent-header .topbar.solid {
  max-height: 0;
  opacity: 0;
  border-bottom-color: transparent;
}

body.has-transparent-header .header.scrolled {
  top: 0;                 /* 信息条收起后，导航顶到最上 */
}

/* hero 内容下移，避免被固定导航压住 */
body.has-transparent-header .hero .container {
  padding-top: 130px;
}

/* ---------- 移动端：信息条较矮 ---------- */
@media(max-width:768px) {
  body.has-transparent-header .header {
    top: 36px;
  }

  body.has-transparent-header .hero .container {
    padding-top: 108px;
  }
}

/* ---------- 内页不受影响：保持正常文档流 ---------- */
body:not(.has-transparent-header) .topbar,
body:not(.has-transparent-header) .header {
  position: sticky;
  top: 0;
}

/* ============================================================
   内页导航 —— 显式锁定（防止任何首页规则意外泄漏）
   ------------------------------------------------------------
   首页用 body.has-transparent-header 触发透明导航。
   这里为「非首页」显式声明实色导航，双重保险：
   即使将来首页规则写漏了 body 限定，内页也不会受影响。
   ============================================================ */

/* 非首页：导航恒为白底深字（不随滚动变化） */
body:not(.has-transparent-header) .header,
body:not(.has-transparent-header) .header.scrolled {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom-color: transparent;
}

body:not(.has-transparent-header) .header.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgba(11, 46, 59, .08);
}

/* 导航文字恒为深色 */
body:not(.has-transparent-header) .header .nav > li > a,
body:not(.has-transparent-header) .header.scrolled .nav > li > a {
  color: var(--ink);
}

body:not(.has-transparent-header) .header .nav > li > a:hover,
body:not(.has-transparent-header) .header .nav > li.active > a,
body:not(.has-transparent-header) .header.scrolled .nav > li > a:hover,
body:not(.has-transparent-header) .header.scrolled .nav > li.active > a {
  color: var(--brand);
}

/* 下划线指示条为品牌蓝 */
body:not(.has-transparent-header) .header .nav > li > a::after {
  background: var(--brand);
}

/* Logo 保持原色，绝不反白 */
body:not(.has-transparent-header) .header .logo img,
body:not(.has-transparent-header) .header.scrolled .logo img {
  filter: none;
}

/* 汉堡按钮用浅蓝底 */
body:not(.has-transparent-header) .header .hamburger,
body:not(.has-transparent-header) .header.scrolled .hamburger {
  background: var(--brand-soft);
  border-color: transparent;
}

body:not(.has-transparent-header) .header .hamburger span,
body:not(.has-transparent-header) .header.scrolled .hamburger span {
  background: var(--ink);
}

/* 汉堡展开箭头保持深色 */
body:not(.has-transparent-header) .header .nav .chev {
  color: currentColor;
}

/* 顶部信息条：内页恒为深色底、浅色字（与首页透明无关） */
body:not(.has-transparent-header) .topbar {
  position: static;
  background: var(--ink);
  border-bottom-color: transparent;
  max-height: none;
  opacity: 1;
}

body:not(.has-transparent-header) .topbar a,
body:not(.has-transparent-header) .topbar span {
  color: #cfe0ef;
}

body:not(.has-transparent-header) .topbar a:hover {
  color: #fff;
}

/* ============================================================
   NEWS CARD — 新闻卡片标题（新增 n-title）
   ============================================================ */
.news-card .n-title {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.4;
  margin: 8px 0 10px;
}

.news-card .n-title a {
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease);
}

.news-card:hover .n-title a {
  color: var(--brand);
}

/* 标题锁两行，保证卡片高度一致 */
.news-card .n-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.4em * 2);
}

/* 摘要锁三行 */
.news-card .n-body p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 无 tags 时不再留空块 */
.news-card .news-tags:empty {
  display: none;
}

/* ============================================================
   NEWS 无缩略图兜底
   ------------------------------------------------------------
   后台未上传缩略图的新闻会输出 /static/images/nopic.png，
   默认显示为一张模糊占位图，观感差。
   这里统一改为品牌色渐变底 + 居中图标，视觉上更完整。
   ============================================================ */

/* 缩略图容器统一底色，图片缺失时不会露出破图 */
.news-card .n-img {
  background: linear-gradient(135deg, var(--brand-soft), #e6f4f3);
  display: block;
  position: relative;
  overflow: hidden;
}

/* 占位图（nopic.png）视觉弱化：作为浅色底纹而非主图 */
.news-card .n-img img[src*="nopic"] {
  opacity: .28;
  filter: grayscale(1);
  object-fit: contain;
  padding: 28px;
}

/* 图片加载失败时隐藏破图图标，只留渐变底 */
.news-card .n-img img {
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease-out);
}

/* 卡片级 hover 时图片轻微放大 */
.news-card:hover .n-img img {
  transform: scale(1.04);
}

/* 让 news-card 布局与其他卡片统一 */
.news-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.news-card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.news-card .n-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-card .n-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--gray);
  letter-spacing: .01em;
}

.news-card .n-body p {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 14px;
}

.news-card .more {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--brand);
  margin-top: auto;
  transition: gap var(--dur-fast) var(--ease);
}

.news-card .more:hover {
  color: var(--brand-dark);
}

/* ============================================================
   图片加载失败兜底 —— 隐藏浏览器破图图标
   ------------------------------------------------------------
   后台若引用了外部图床（如 51cto 等）的图片，该域名可能拒绝
   外链或被墙，导致浏览器显示破图图标 + alt 文字，观感差。
   这里统一：加载失败的图片只保留容器渐变底，不显示破图。
   ============================================================ */

/* 图片加载失败时由 JS 打上 .img-fallback 类 */
img.img-fallback {
  opacity: 0 !important;
  visibility: hidden;
}

.news-card .n-img.img-error,
.media-cover.img-error {
  background: linear-gradient(135deg, var(--brand-soft), #e6f4f3);
}

/* 兜底：容器始终有底色，图片缺失时不会露出空白 */
.news-card .n-img {
  background: linear-gradient(135deg, var(--brand-soft), #e6f4f3);
}

/* ============================================================
   内页 BANNER 加高 + 内容重新设计
   ------------------------------------------------------------
   原高度约 527px（含导航），内容只有面包屑/标题/一行简介，
   下方大片空白，显得又窄又空。
   改法：提高到 clamp(360px~440px) 主体高度，垂直居中，
        并补齐「图标 + 标题 + 副标题 + 关键信息条」的层次。
   ============================================================ */

.page-hero {
  /* 主体高度：桌面 380~440px，移动端 260~320px */
  min-height: clamp(420px, 52vh, 540px);
  display: flex;
  align-items: center;
  padding: clamp(52px, 8vh, 84px) 0;
  background-size: cover;
  background-position: center;
  background-color: #083043;
  position: relative;
  color: #fff;
  overflow: hidden;
}

/* 内容垂直居中 */
.page-hero .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* 面包屑与标题之间留出呼吸空间 */
.page-hero .breadcrumb {
  margin-bottom: 18px;
}

.page-hero h1 {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.02em;
  margin-bottom: 14px;
  color: #fff;
}

.page-hero > .container > p {
  font-size: clamp(15px, 1.15vw, 17px);
  color: var(--on-dark-2);
  line-height: 1.7;
  max-width: 680px;
  margin-bottom: 0;
}

/* ---------- 内页 banner 增强遮罩：左深右透，层次更清楚 ---------- */
.page-hero::before {
  background: linear-gradient(100deg,
      rgba(4, 24, 42, .93) 0%,
      rgba(6, 36, 58, .82) 40%,
      rgba(8, 46, 74, .58) 70%,
      rgba(14, 62, 104, .38) 100%);
}

/* 右上角柔光点缀，避免大图发闷 */
.page-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(63, 214, 196, .22), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- banner 底部分隔过渡：与下方内容衔接更自然 ---------- */
.page-hero + .section {
  padding-top: clamp(48px, 6vh, 72px);
}

/* ---------- 响应式 ---------- */
@media(max-width:1024px) {
  .page-hero {
    min-height: clamp(300px, 38vh, 360px);
    padding: 46px 0;
  }

  .page-hero h1 {
    font-size: clamp(24px, 4.4vw, 34px);
  }
}

@media(max-width:620px) {
  .page-hero {
    min-height: 260px;
    padding: 38px 0;
  }

  .page-hero h1 {
    font-size: clamp(22px, 6.4vw, 28px);
    margin-bottom: 10px;
  }

  .page-hero .breadcrumb {
    margin-bottom: 12px;
    font-size: 12px;
  }

  .page-hero > .container > p {
    font-size: 14px;
  }
}

/* ---------- 内页 banner 里的统计条（cat-hero 专用） ---------- */
.cat-hero {
  min-height: clamp(460px, 58vh, 600px);
  padding: clamp(44px, 7vh, 72px) 0;
}

@media(max-width:620px) {
  .cat-hero {
    min-height: 340px;
  }
}

/* ============================================================
   分页条留白修复
   ------------------------------------------------------------
   原问题：分页条 margin-top 44px，与页脚仅隔约 140px，
          cookie 弹窗出现时还会遮住分页，观感很挤。
   改法：加大上下留白，并给页面底部预留安全距离。
   ============================================================ */

/* 分页条（两种类名都覆盖） */
.pagination,
.pager {
  margin-top: clamp(48px, 6vh, 68px);
  margin-bottom: clamp(24px, 4vh, 48px);
  padding-bottom: 8px;
}

/* 内容区底部留白，避免最后一屏贴住页脚 */
.news-list-section,
.cat-list,
.section:last-of-type {
  padding-bottom: clamp(40px, 6vh, 72px);
}

/* 分页按钮：尺寸与圆角统一，hover 更柔和 */
.pagination a,
.pagination span,
.pager .pg-btn,
.pager .page-num {
  min-width: 44px;
  height: 44px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  transition: all var(--dur) var(--ease-soft);
}

.pagination a:hover,
.pager .pg-btn:hover,
.pager .page-num:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-2px);
}

.pagination .cur,
.pagination .page-num-current,
.pager .page-num-current {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(48, 120, 224, .28);
}

/* 移动端：分页条紧凑化，避免换行占太多高度 */
@media(max-width:620px) {
  .pagination,
  .pager {
    gap: 6px;
    margin-top: 36px;
    margin-bottom: 32px;
  }

  .pagination a,
  .pagination span,
  .pager .pg-btn,
  .pager .page-num {
    min-width: 38px;
    height: 38px;
    font-size: 13px;
    border-radius: 8px;
  }

  /* 小屏隐藏 First/Last，只留 Prev/Next 与页码 */
  .pager .pg-btn:first-child,
  .pager .pg-btn:last-child {
    display: none;
  }
}

/* ---------- cookie 弹窗出现时，页面底部预留空间，防止遮挡分页 ---------- */
body.cookie-open .pagination,
body.cookie-open .pager {
  margin-bottom: 120px;
}

/* ============================================================
   内页 BANNER 内容增强
   ------------------------------------------------------------
   加高后需要内容支撑，否则会显空。这里为 banner 补充：
     · 顶部品牌小标（eyebrow）
     · 标题下方的关键信息条（可选）
     · 右侧装饰图形，填充视觉重心
   ============================================================ */

/* ---------- banner 内的 eyebrow 小标 ---------- */
.page-hero .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}

.page-hero .hero-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-glow);
  box-shadow: 0 0 10px var(--brand-glow);
}

/* ---------- banner 内的关键信息条 ---------- */
.page-hero .hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.page-hero .hero-facts span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .88);
}

.page-hero .hero-facts span svg {
  width: 16px;
  height: 16px;
  color: var(--brand-glow);
  flex: 0 0 auto;
}

/* ---------- banner 右侧装饰：同心圆 + 网格 ---------- */
.page-hero .hero-deco {
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
  height: 320px;
  pointer-events: none;
  opacity: .16;
  z-index: 0;
}

.page-hero .hero-deco::before,
.page-hero .hero-deco::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .5);
}

.page-hero .hero-deco::after {
  inset: 22%;
  border-color: rgba(63, 214, 196, .7);
}

/* 只在宽屏显示装饰，窄屏隐藏避免拥挤 */
@media(max-width:1100px) {
  .page-hero .hero-deco {
    display: none;
  }
}

/* ---------- banner 内容整体限宽，右侧留给装饰 ---------- */
.page-hero .container > * {
  max-width: min(760px, 62%);
}

@media(max-width:1100px) {
  .page-hero .container > * {
    max-width: 100%;
  }
}

/* ---------- 移动端：加高后内容仍要居中舒适 ---------- */
@media(max-width:620px) {
  .page-hero .hero-facts {
    gap: 8px 16px;
    margin-top: 16px;
    padding-top: 14px;
  }

  .page-hero .hero-facts span {
    font-size: 12.5px;
  }

  .page-hero .hero-eyebrow {
    font-size: 11px;
    padding: 5px 11px;
    margin-bottom: 12px;
  }
}

/* ============================================================
   导航按钮配色 —— 最终修正（消除 !important 冲突）
   ------------------------------------------------------------
   根因：透明导航的滚动/抽屉状态用了
        .nav > li > a { color: var(--ink) !important }
   该选择器把「Get a Quote」按钮也一并改成了深色，
   导致红底深字看不清。

   方案：用同等 !important 但更高特异性的规则，
        把按钮文字色单独锁定为白色，覆盖上述状态规则。
   ============================================================ */

/* 所有状态下，导航内的实心按钮文字恒为白色 */
body .header .nav > li > a.btn-primary,
body .header .nav > li > a.btn-primary:hover,
body .header .nav > li > a.btn-primary:focus,
body .header .nav > li > a.btn-primary:visited,
body .header .nav > li > a.btn-primary:active,
body.has-transparent-header .header.scrolled .nav > li > a.btn-primary,
body.has-transparent-header .header.scrolled .nav > li > a.btn-primary:hover,
body.nav-open .header .nav > li > a.btn-primary,
body.nav-open .header:not(.scrolled) .nav > li > a.btn-primary {
  color: #fff !important;
}

/* 品牌渐变按钮同理 */
body .header .nav > li > a.btn-brand,
body .header .nav > li > a.btn-brand:hover,
body .header .nav > li > a.btn-brand:focus,
body.has-transparent-header .header.scrolled .nav > li > a.btn-brand,
body.nav-open .header .nav > li > a.btn-brand {
  color: #fff !important;
}

/* 浅色描边按钮（深色底）保持白字 */
body .header .nav > li > a.btn-ghost-light,
body .header .nav > li > a.btn-ghost-light:hover,
body.has-transparent-header .header.scrolled .nav > li > a.btn-ghost-light {
  color: #fff !important;
}

/* 白色实心按钮保持深蓝字 */
body .header .nav > li > a.btn-white,
body .header .nav > li > a.btn-white:hover,
body.has-transparent-header .header.scrolled .nav > li > a.btn-white {
  color: var(--brand-dark) !important;
}

/* 顺带修正：页脚内的按钮同样保护 */
body .footer a.btn-primary,
body .footer a.btn-primary:hover,
body .footer a.btn-brand,
body .footer a.btn-brand:hover {
  color: #fff !important;
}

/* ============================================================
   COOKIE CONSENT — 响应式重写（桌面 / 平板 / 手机全兼容）
   ------------------------------------------------------------
   原问题：底部横条在手机上文字被右侧裁切、按钮溢出屏幕。
   方案：桌面横排、平板/手机纵向堆叠，按钮等宽满铺；
        并补充偏好设置面板与无障碍属性。
   ============================================================ */

/* ---------- 容器 ---------- */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  background: rgba(6, 28, 48, .97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #d9e7f1;
  padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%);
  transition: transform .45s var(--ease-soft), opacity .3s var(--ease);
  box-shadow: 0 -10px 40px rgba(6, 28, 48, .32);
  border-top: 1px solid rgba(255, 255, 255, .10);
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cookie-banner[hidden] { display: none; }

.cookie-banner.show {
  transform: translateY(0);
}

/* ---------- 内层布局：桌面横排 ---------- */
.cb-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 48px);
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cb-text {
  flex: 1 1 480px;
  min-width: 0;
}

/* ---------- 标题行 ---------- */
.cb-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}

.cb-head strong {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .01em;
}

.cb-ico {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: rgba(63, 214, 196, .16);
  color: var(--brand-glow);
}

.cb-ico svg {
  width: 16px;
  height: 16px;
}

/* ---------- 说明文字 ---------- */
.cb-text p {
  font-size: 13.5px;
  line-height: 1.65;
  color: #c3d6e4;
  margin: 0;
  max-width: 76ch;
}

.cb-text p a {
  color: var(--brand-glow);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease);
}

.cb-text p a:hover {
  color: #fff;
}

/* ---------- 按钮区 ---------- */
.cb-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.cb-btn {
  padding: 10px 22px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
}

.cb-actions .btn.cb-btn {
  padding: 10px 22px;
  font-size: 13.5px;
}

.cb-deny {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .38);
  color: #fff;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.cb-deny:hover {
  border-color: var(--brand-glow);
  background: rgba(63, 214, 196, .12);
  color: #fff;
}

.cb-pref-toggle {
  background: none;
  border: 0;
  padding: 10px 6px;
  color: #9fb8ca;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}

.cb-pref-toggle:hover {
  color: #fff;
}

/* ---------- 偏好面板 ---------- */
.cb-prefs {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  display: grid;
  gap: 12px;
  animation: softFade .35s var(--ease-soft) both;
}

.cb-prefs[hidden] { display: none; }

.cb-opt {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
}

.cb-opt input[type="checkbox"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--brand-2);
  cursor: pointer;
}

.cb-opt input[disabled] {
  cursor: not-allowed;
  opacity: .6;
}

.cb-opt-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cb-opt-body b {
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
}

.cb-opt-body small {
  font-size: 12px;
  color: #9fb8ca;
  line-height: 1.5;
}

/* ============================================================
   响应式
   ============================================================ */

/* ---------- 平板 ---------- */
@media(max-width:1024px) {
  .cb-inner {
    gap: 16px;
  }

  .cb-text {
    flex: 1 1 100%;
  }

  .cb-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
}

/* ---------- 手机：纵向堆叠，按钮满宽 ---------- */
@media(max-width:620px) {
  .cookie-banner {
    padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
    max-height: 82vh;
  }

  .cb-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 0 16px;
  }

  /* 文字区不再限高，允许完整换行 */
  .cb-text {
    flex: 1 1 auto;
    width: 100%;
  }

  .cb-head strong {
    font-size: 14.5px;
  }

  .cb-ico {
    width: 24px;
    height: 24px;
  }

  /* 关键修复：文字强制在容器内换行，不再被裁切 */
  .cb-text p {
    font-size: 12.8px;
    line-height: 1.62;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* 按钮区：主次按钮各占一行，等宽满铺 */
  .cb-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .cb-btn,
  .cb-actions .btn.cb-btn {
    width: 100%;
    padding: 12px 18px;
    font-size: 14px;
    text-align: center;
    justify-content: center;
  }

  /* 主次顺序：手机上把「接受全部」放最上更易点 */
  .cb-actions #cbAccept { order: 1; }
  .cb-actions #cbDeny   { order: 2; }
  .cb-actions #cbPrefToggle { order: 3; padding: 8px 6px; }

  .cb-prefs {
    padding: 12px 13px;
    gap: 11px;
  }

  .cb-opt-body b { font-size: 13px; }
  .cb-opt-body small { font-size: 11.5px; }
}

/* ---------- 超小屏 ---------- */
@media(max-width:380px) {
  .cb-inner { padding: 0 13px; }

  .cb-text p { font-size: 12.2px; }

  .cb-btn,
  .cb-actions .btn.cb-btn {
    padding: 11px 14px;
    font-size: 13.2px;
  }
}

/* ---------- 横屏矮屏：限制高度，内部可滚动 ---------- */
@media(max-height:520px) and (orientation:landscape) {
  .cookie-banner {
    max-height: 92vh;
    padding: 10px 0;
  }

  .cb-text p {
    font-size: 12.5px;
    line-height: 1.5;
  }

  .cb-prefs { display: none; }
}

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: none;
  }
  .cookie-banner.show {
    transform: none;
  }
}

/* ============================================================
   COOKIE 弹窗桌面端对齐微调
   ------------------------------------------------------------
   宽屏下按钮区贴顶，与文字首行基线不齐。
   改为与文字块顶部对齐，并给按钮区一点上边距补偿。
   ============================================================ */
@media(min-width:1025px) {
  .cb-inner {
    align-items: flex-start;
  }

  .cb-actions {
    /* 与标题行视觉居中对齐 */
    padding-top: 2px;
    align-self: center;
  }

  .cb-text {
    flex: 1 1 560px;
  }
}

/* 超宽屏：文字不过长，保持可读性 */
@media(min-width:1600px) {
  .cb-text p {
    max-width: 92ch;
  }
}