@charset "utf-8";

:root {
  --primary: #0051c3;
  --primary-light: #1d70f2;
  --text-main: #181c22;
  --text-sub: #555;
  --text-light: #888;
  --bg-light: #f4f8fd;
  --bg-soft: #f3f8fa;
  --content-width: var(--sp-1600);
  --header-h: var(--sp-88);
  --text-muted: #878b91;

  /* ---- 间距/尺寸量表（spacing tokens，单一可调源） ---- */
  --sp-n30: -30px;
  --sp-n10: -10px;
  --sp-n8: -8px;
  --sp-n6: -6px;
  --sp-n4: -4px;
  --sp-n2: -2px;
  --sp-0: 0px;
  --sp-1: 1px;
  --sp-2: 2px;
  --sp-3: 3px;
  --sp-4: 4px;
  --sp-5: 5px;
  --sp-6: 6px;
  --sp-7d5: 7.5px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-13: 13px;
  --sp-14: 14px;
  --sp-15: 15px;
  --sp-16: 16px;
  --sp-17: 17px;
  --sp-18: 18px;
  --sp-19: 19px;
  --sp-20: 20px;
  --sp-22: 22px;
  --sp-24: 24px;
  --sp-25: 25px;
  --sp-26: 26px;
  --sp-28: 28px;
  --sp-29: 29px;
  --sp-30: 30px;
  --sp-32: 32px;
  --sp-34: 34px;
  --sp-35: 35px;
  --sp-36: 36px;
  --sp-38: 38px;
  --sp-39: 39px;
  --sp-40: 40px;
  --sp-42: 42px;
  --sp-44: 44px;
  --sp-45: 45px;
  --sp-48: 48px;
  --sp-50: 50px;
  --sp-52: 52px;
  --sp-54: 54px;
  --sp-55: 55px;
  --sp-56: 56px;
  --sp-58: 58px;
  --sp-60: 60px;
  --sp-62: 62px;
  --sp-64: 64px;
  --sp-66: 66px;
  --sp-68: 68px;
  --sp-70: 70px;
  --sp-72: 72px;
  --sp-80: 80px;
  --sp-88: 88px;
  --sp-90: 90px;
  --sp-93: 93px;
  --sp-96: 96px;
  --sp-100: 100px;
  --sp-104: 104px;
  --sp-108: 108px;
  --sp-110: 110px;
  --sp-120: 120px;
  --sp-126: 126px;
  --sp-128: 128px;
  --sp-132: 132px;
  --sp-150: 150px;
  --sp-154: 154px;
  --sp-156: 156px;
  --sp-160: 160px;
  --sp-162: 162px;
  --sp-166: 166px;
  --sp-180: 180px;
  --sp-195: 195px;
  --sp-210: 210px;
  --sp-222: 222px;
  --sp-232: 232px;
  --sp-240: 240px;
  --sp-260: 260px;
  --sp-276: 276px;
  --sp-280: 280px;
  --sp-288: 288px;
  --sp-320: 320px;
  --sp-336: 336px;
  --sp-340: 340px;
  --sp-360: 360px;
  --sp-373: 373px;
  --sp-420: 420px;
  --sp-460: 460px;
  --sp-560: 560px;
  --sp-582: 582px;
  --sp-900: 900px;
  --sp-920: 920px;
  --sp-1000: 1000px;
  --sp-1180: 1180px;
  --sp-1200: 1200px;
  --sp-1400: 1400px;
  --sp-1600: 1600px;
}








* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; overflow-x: hidden; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--sp-14);
  color: var(--text-main);
  background: #fff;
  line-height: 1.6;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; border: 0; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }

.wrap {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--sp-20);
}

/* ===================== Header ===================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: #fff;
  height: var(--header-h);
  transition: box-shadow .3s;
}
.site-header.scrolled { box-shadow: 0 var(--sp-2) var(--sp-14) rgba(0,0,0,0.08); }
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.site-logo img { width: var(--sp-195); height: var(--sp-66); object-fit: contain; }
.main-nav { display: flex; align-items: center; }
.main-nav a {
  display: inline-block;
  width: var(--sp-120);
  height: var(--sp-80);
  line-height: var(--sp-80);
  text-align: center;
  font-size: var(--sp-16);
  color: var(--text-main);
  transition: color .25s;
}
.main-nav a:hover, .main-nav a.active { color: var(--primary); }
.header-right { display: flex; align-items: center; gap: var(--sp-10); }
.header-phone {
  font-size: var(--sp-20);
  font-weight: bold;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
}
.header-phone svg { width: var(--sp-22); height: var(--sp-22); margin-right: var(--sp-6); }
.header-btn {
  display: inline-block;
  width: var(--sp-93);
  height: var(--sp-40);
  line-height: var(--sp-38);
  border: var(--sp-1) solid var(--primary);
  border-radius: var(--sp-6);
  color: var(--primary);
  background: #fff;
  font-size: var(--sp-16);
  text-align: center;
  transition: all .25s;
}
.header-btn:hover { background: var(--primary-light); border-color: var(--primary-light); color: #fff; }

/* mobile hamburger (hidden on desktop) */
.nav-toggle {
  display: none;
  position: relative;
  width: var(--sp-40);
  height: var(--sp-40);
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  position: absolute;
  left: var(--sp-8);
  width: var(--sp-24);
  height: var(--sp-2);
  background: var(--text-main);
  border-radius: var(--sp-2);
  transition: transform .3s, opacity .25s, top .3s;
}
.nav-toggle span:nth-child(1) { top: var(--sp-13); }
.nav-toggle span:nth-child(2) { top: var(--sp-19); }
.nav-toggle span:nth-child(3) { top: var(--sp-25); }
.nav-toggle.open span:nth-child(1) { top: var(--sp-19); transform: rotate(45deg); background: var(--primary); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { top: var(--sp-19); transform: rotate(-45deg); background: var(--primary); }

/* mobile drawer */
.mobile-nav-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
  z-index: 200;
}
.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 78%;
  max-width: var(--sp-320);
  height: 100%;
  background: #fff;
  z-index: 201;
  padding: calc(var(--header-h) + var(--sp-10)) 0 var(--sp-24);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .32s ease;
  box-shadow: var(--sp-n6) 0 var(--sp-24) rgba(0,0,0,0.12);
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav > a {
  display: block;
  padding: var(--sp-16) var(--sp-28);
  font-size: var(--sp-16);
  color: var(--text-main);
  border-bottom: var(--sp-1) solid #f0f2f5;
  position: relative;
  transition: color .2s, background .2s;
}
.mobile-nav > a:hover, .mobile-nav > a.active { color: var(--primary); background: #f7faff; }
.mobile-nav > a.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: var(--sp-3);
  height: var(--sp-18);
  background: var(--primary);
}
.mobile-nav-btns {
  display: flex;
  gap: var(--sp-12);
  padding: var(--sp-20) var(--sp-28) 0;
}
.mobile-nav-btns .header-btn {
  display: inline-block !important;
  flex: 1;
  width: auto;
  height: var(--sp-40);
  line-height: var(--sp-38);
  padding: 0;
}
.mobile-nav-phone {
  margin-top: auto;
  padding: var(--sp-20) var(--sp-28) 0;
  font-size: var(--sp-18);
  font-weight: bold;
  color: var(--primary);
  display: flex;
  align-items: center;
  border-top: var(--sp-1) solid #f0f2f5;
}
.mobile-nav-phone svg { width: var(--sp-20); height: var(--sp-20); margin-right: var(--sp-8); }

/* spacer for fixed header */
.body-pad-top { padding-top: var(--header-h); }

/* ===================== Banner ===================== */
.banner { position: relative; width: 100%; height: calc(100dvh - var(--sp-0)); min-height: var(--sp-560); overflow: hidden; background: #000; }
.banner .swiper-container { width: 100%; height: 100%; position: relative; overflow: hidden; }
.banner .swiper-slide {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.banner .slide_bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner .swiper-slide::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(50,55,62,0) 30.34%, rgba(13,27,46,0.7) 100%);
}
.banner .swiper_content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  width: 100%;
  max-width: var(--sp-1600);
  margin: 0 auto;
  padding: 0 var(--sp-40) var(--sp-68);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}
.banner .swiper_content h3 {
  font-size: var(--sp-18);
  font-weight: normal;
  padding-bottom: var(--sp-16);
  position: relative;
  opacity: 0;
}
.banner .swiper_content h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: var(--sp-n8);
  width: 0;
  height: var(--sp-2);
  background: #fff;
}
.banner .swiper_content p {
  height: var(--sp-128);
  font-size: var(--sp-48);
  line-height: var(--sp-62);
  margin: var(--sp-32) 0 var(--sp-24);
  opacity: 0;
  font-weight: 500;
}
.banner .swiper-slide-active .swiper_content h3 {
  animation: swiper-fade .5s .5s linear forwards;
}
.banner .swiper-slide-active .swiper_content p {
  animation: swiper-fade 1s 1s linear forwards;
}
@keyframes swiper-fade {
  from { opacity: 0; transform: translateY(var(--sp-n10)); }
  to { opacity: 1; transform: translateY(0); }
}
.banner .swiper-pagination {
  position: absolute;
  left: 50% !important;
  bottom: var(--sp-232) !important;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--sp-1600);
  padding: 0 var(--sp-40);
  text-align: left;
  z-index: 5;
}
.banner .swiper-pagination .swiper-pagination-bullet {
  display: inline-block;
  width: 13%;
  height: var(--sp-3);
  background: rgba(255,255,255,0.3);
  opacity: 1;
  border-radius: 0;
  margin: 0 var(--sp-10) 0 0 !important;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.banner .swiper-pagination .swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}
.banner .swiper-pagination .swiper-pagination-bullet.bullet-progress::before {
  transform: scaleX(1);
  transition: transform 3s linear;
}

/* ===================== Section common ===================== */
.section { padding: var(--sp-80) 0; }
.section-title {
  text-align: center;
  margin-bottom: var(--sp-50);
}
.section-title h2 {
  font-size: var(--sp-34);
  font-weight: bold;
  color: var(--text-main);
  position: relative;
  display: inline-block;
  padding: 0 var(--sp-50);
}
.section-title h2::before,
.section-title h2::after {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--sp-30);
  height: var(--sp-1);
  background: #c9cfd6;
}
.section-title h2::before { left: 0; }
.section-title h2::after { right: 0; }
.section-title p {
  font-size: var(--sp-16);
  color: var(--text-sub);
  margin-top: var(--sp-16);
}

/* ===================== Solution intro ===================== */
.solution-intro {
  position: relative;
  width: 100%;
  max-width: var(--sp-1400);
  margin: 0 auto;
  height: var(--sp-222);
  background: #fff;
  text-align: center;
}
.solution-intro h2 {
  position: absolute;
  top: var(--sp-80);
  left: 0; right: 0;
  font-size: var(--sp-35);
  line-height: var(--sp-35);
  font-weight: bold;
  color: var(--text-main);
}
.solution-intro p {
  position: absolute;
  top: var(--sp-126);
  left: 0; right: 0;
  font-size: var(--sp-16);
  line-height: var(--sp-30);
  color: var(--text-muted);
}
.solution-intro .decor {
  position: absolute;
  top: var(--sp-156);
  left: 50%;
  transform: translateX(-50%);
  width: var(--sp-60);
  height: var(--sp-60);
}

/* ===================== Module title (generic) ===================== */
.module-tit {
  position: relative;
  width: 100%;
  margin: 0 auto;
  height: var(--sp-180);
  background: #fff;
  text-align: center;
}
.module-tit--bg { background: #f4f8fd; height: var(--sp-150); }
.module-tit--bg .decor { top: var(--sp-90); }
.module-tit h2 {
  position: absolute;
  top: var(--sp-56);
  left: 0; right: 0;
  font-size: var(--sp-35);
  line-height: var(--sp-35);
  font-weight: bold;
  color: var(--text-main);
  margin: 0;
}
.module-tit p {
  position: absolute;
  top: var(--sp-108);
  left: 50%;
  transform: translateX(-50%);
  width: var(--sp-1000);
  max-width: 90%;
  font-size: var(--sp-16);
  line-height: var(--sp-30);
  color: var(--text-muted);
  margin: 0;
}
.module-tit .decor {
  position: absolute;
  top: var(--sp-104);
  left: 50%;
  transform: translateX(-50%);
  width: var(--sp-60);
  height: var(--sp-60);
}
.module-tit p ~ .decor { top: var(--sp-162); }

/* ===================== Subnav (3 cards) ===================== */
.subnav-section {
  background: #f3f8fa;
  padding: var(--sp-39) 0 var(--sp-32);
}
.subnav-grid {
  display: flex;
  justify-content: center;
  gap: var(--sp-154);
  flex-wrap: wrap;
}
.subnav-item { text-align: center; }
.subnav-item .img-wrap {
  width: var(--sp-180); height: var(--sp-180);
  overflow: hidden;
  border-radius: 50%;
  transition: box-shadow .35s, transform .35s;
}
.subnav-item .img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.subnav-item:hover .img-wrap { box-shadow: var(--sp-8) var(--sp-8) var(--sp-20) 0 #ababab; transform: scale(1.04); }
.subnav-item .title {
  margin-top: var(--sp-14);
  font-size: var(--sp-15);
  color: #333;
  line-height: var(--sp-26);
  transition: color .25s;
}
.subnav-item:hover .title { color: var(--primary-light); }

/* ===================== Product Ecology (accordion 4 columns) ===================== */
.ecosystem {
  background: #fff;
  padding: 0 0 var(--sp-90);
}
.eco-active-image { display: none; }
.eco-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--sp-1600);
  margin: 0 auto;
  padding: 0 var(--sp-40);
}
.eco-item {
  flex: 0 0 15.8%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: width .3s ease-out, flex .3s ease-out;
  margin-top: var(--sp-10);
  height: var(--sp-582);
}
.eco-item.active { flex: 0 0 49.5%; }
.eco-item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease-out;
}
.eco-item:hover > img { transform: scale(1.04); }
.eco-mask {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  padding: var(--sp-40) 0;
  background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 50%);
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  transition: background .3s ease-out;
}
.eco-item.active .eco-mask {
  text-align: left;
  background: url(https://static.ltdcdn.com/uploadfilev3/image/0/569/813/2025-09/17580980078339.png) center center / 100% 100% no-repeat;
}
.eco-mask h2 {
  font-size: var(--sp-26);
  font-weight: bold;
  padding: 0 var(--sp-10);
  margin: 0 0 var(--sp-20);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eco-mask p {
  font-size: var(--sp-16);
  line-height: var(--sp-30);
  padding: 0 var(--sp-10);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eco-item.active .eco-mask h2 { padding-left: var(--sp-40); padding-right: var(--sp-100); white-space: pre-wrap; }
.eco-item.active .eco-mask p { padding-left: var(--sp-40); padding-right: var(--sp-210); white-space: pre-wrap; }
.eco-mask .eco-detail {
  position: absolute;
  right: var(--sp-40);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  opacity: 0;
  overflow: hidden;
  line-height: var(--sp-54);
  color: #fff;
  text-align: center;
  font-size: var(--sp-16);
  font-weight: bold;
  border: var(--sp-2) solid rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-10);
  transition: width .3s ease-out, opacity .3s ease-out;
  white-space: nowrap;
}
.eco-item.active .eco-detail { width: var(--sp-160); opacity: 1; }
.eco-mask .eco-detail::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 100%;
  z-index: -1;
  background: #fff;
  transition: width .3s ease-out;
}
.eco-mask .eco-detail:hover {
  color: var(--primary-light);
  border-color: #fff;
}
.eco-mask .eco-detail:hover::after { width: 100%; }
.eco-mask .eco-detail svg { stroke: #fff; transition: stroke .3s; }
.eco-mask .eco-detail:hover svg { stroke: var(--primary-light); }

/* ===================== Scene (3-tab with image) ===================== */
.scene-section {
  width: 100%;
  background: #f4f8fd;
  font-family: "Microsoft YaHei", sans-serif;
  padding: var(--sp-16) 0 var(--sp-80);
}
.scene-inner {
  width: var(--sp-1600);
  max-width: 100%;
  margin: 0 auto;
}
.scene-images {
  position: relative;
  width: 100%;
}
.scene-images img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  opacity: 0;
  transition: all 0.36s;
}
.scene-images img.active { opacity: 1; }
.scene-images img:first-child { position: relative; }
.scene-card-img { display: none; }
.scene-list {
  display: flex;
  width: 100%;
  margin-top: 0;
}
.scene-list .scene-item {
  display: block;
  position: relative;
  width: calc(100% / 3);
  border-right: var(--sp-1) solid #e0e2e6;
  background: #fff;
  transition: all 0.36s;
  animation: fadeInUp 0.8s ease-in-out both;
  animation-delay: 0.1s;
}
.scene-list .scene-item:last-child { border-right: 0; }
.scene-list .scene-item.active {
  width: 40%;
  box-shadow: 0 0 var(--sp-18) rgba(71,97,134,0.22);
  z-index: 10;
  border-color: transparent;
  background: var(--primary);
  color: #fff;
}
.scene-list .scene-item.active .scene-tit,
.scene-list .scene-item.active .scene-desc,
.scene-list .scene-item.active .scene-btm-info,
.scene-list .scene-item.active .scene-btm-info p { color: #fff; }
.scene-list .scene-item .scene-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: var(--sp-55) var(--sp-30);
  box-sizing: border-box;
}
.scene-list .scene-item .scene-deco {
  position: absolute;
  top: 50%;
  right: var(--sp-n30);
  transform: translateY(-50%);
  width: var(--sp-166);
  z-index: 0;
  opacity: 0.4;
  transition: all 0.36s;
}
.scene-list .scene-item .scene-top { position: relative; z-index: 1; }
.scene-list .scene-item .scene-tit {
  margin: 0 0 var(--sp-20);
  color: #333;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  font-size: var(--sp-26);
  font-weight: bold;
  line-height: 1.3;
}
.scene-list .scene-item .scene-desc {
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: all 0.16s;
  margin-bottom: var(--sp-70);
  font-size: var(--sp-16);
  line-height: 1.75;
  color: #3d4059;
}
.scene-list .scene-item .scene-desc p { margin: 0; }
.scene-list .scene-item.active .scene-desc {
  opacity: 1;
  transition: all 0.36s 0.16s;
}
.scene-list .scene-item .scene-btm {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
.scene-list .scene-item .scene-btm-info {
  margin-bottom: var(--sp-22);
  padding: 0 var(--sp-30);
  transition: all 0.36s;
  font-size: var(--sp-16);
  line-height: 1.75;
  color: #3d4059;
}
.scene-list .scene-item .scene-btm-info p { margin: 0; line-height: 1.6; }
.scene-list .scene-item.active .scene-btm-info { opacity: 0; }
.scene-list .scene-item .scene-arrow {
  padding: 0 var(--sp-30) var(--sp-55);
  font-size: var(--sp-28);
  color: #dadada;
  transition: all 0.36s;
  width: var(--sp-28);
  position: relative;
}
.scene-list .scene-item .scene-arrow svg {
  width: var(--sp-28);
  height: var(--sp-29);
  fill: #dadada;
}
.scene-list .scene-item.active .scene-arrow svg { fill: #fff; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, var(--sp-50), 0); }
  to { opacity: 1; transform: none; }
}

/* ===================== Role cards ===================== */
.role-section { padding: var(--sp-58) 0 var(--sp-80); background: #fff; }
.role-grid {
  display: flex;
  width: var(--sp-1600);
  max-width: 100%;
  margin: 0 auto;
}
.role-item {
  flex: 0 0 20%;
  padding: 0 var(--sp-10);
  box-sizing: border-box;
  animation: fadeInUp .8s ease-in-out both;
}
.role-cover {
  position: relative;
  border-radius: var(--sp-4);
  overflow: hidden;
}
.role-cover::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--sp-260);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
  opacity: .5;
  transition: all .36s;
  z-index: 1;
}
.role-cover img {
  width: 100%;
  display: block;
}
.role-cover img.role-bg { position: relative; }
.role-cover img.role-avatar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.role-item:hover .role-cover::after { opacity: 0; }
.role-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--sp-22);
  z-index: 2;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-14);
}
.role-tag {
  display: inline-block;
  padding: var(--sp-6) var(--sp-14);
  border-radius: var(--sp-20);
  background: var(--primary);
  color: #fff;
  font-size: var(--sp-14);
  line-height: 1.3;
  align-self: center;
}
.role-title {
  font-size: var(--sp-19);
  line-height: 1.3;
  color: #fff;
  text-align: center;
}
.role-hover {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: var(--sp-20);
  border-radius: var(--sp-4);
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity .36s;
  backdrop-filter: blur(var(--sp-7d5));
  background: rgba(0,81,195,0.82);
  color: #fff;
}
.role-item:hover .role-hover { opacity: 1; }
.role-hover-inner { width: 100%; }
.role-hover .role-tag {
  background: #fff;
  color: var(--primary);
  margin-bottom: var(--sp-14);
  align-self: flex-start;
}
.role-hover .role-h-tit {
  font-size: var(--sp-14);
  color: #fff;
  margin-bottom: var(--sp-14);
}
.role-hover .role-h-tit ul { padding: 0; }
.role-hover .role-h-tit li {
  position: relative;
  padding-left: var(--sp-12);
  line-height: 1.6;
  margin-bottom: var(--sp-6);
  font-size: var(--sp-12);
}
.role-hover .role-h-tit li::before {
  content: "";
  position: absolute;
  left: 0; top: var(--sp-8);
  width: var(--sp-5); height: var(--sp-5);
  background: #fff;
  border-radius: 50%;
}
.role-hover .role-info {
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-14);
}
.role-hover .role-info p {
  position: relative;
  padding-left: var(--sp-12);
  font-size: var(--sp-12);
  line-height: 1.6;
  margin-bottom: var(--sp-6);
}
.role-hover .role-info p::before {
  content: "";
  position: absolute;
  left: 0; top: var(--sp-8);
  width: var(--sp-5); height: var(--sp-5);
  background: #fff;
  border-radius: 50%;
}

/* ===================== CTA banner ===================== */
.cta-section {
  position: relative;
  width: 100%;
  height: var(--sp-280);
  background: var(--primary-light) url(../images/cta-banner-bg.png?v=2) center center / cover no-repeat;
  color: #fff;
}
.cta-inner {
  position: relative;
  width: 100%;
  max-width: var(--sp-1600);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--sp-40);
}
.cta-text {
  position: absolute;
  top: 50%;
  left: var(--sp-40);
  right: var(--sp-40);
  transform: translateY(-50%);
  font-family: "微软雅黑", "Microsoft YaHei", sans-serif;
  font-size: var(--sp-35);
  font-weight: normal;
  line-height: 1.6;
  color: #fff;
}
.cta-line { display: block; }
.cta-strong { font-weight: bold; }
.cta-highlight {
  display: block;
  font-size: var(--sp-18);
  font-weight: normal;
  font-style: normal;
  color: inherit;
}



/* ===================== Footer ===================== */
.footer {
  background: rgb(24,48,75);
  color: #fff;
  padding: var(--sp-44) 0 0;
}
.footer-inner {
  display: grid;
  grid-template-columns: var(--sp-195) 1fr var(--sp-373);
  gap: var(--sp-60);
  width: 100%;
  max-width: var(--sp-1600);
  margin: 0 auto;
  padding: 0 var(--sp-40);
  box-sizing: border-box;
}
.footer .footer-logo img { width: var(--sp-195); height: var(--sp-66); object-fit: contain; }
.footer .footer-copyright {
  margin-top: var(--sp-8);
  font-size: var(--sp-14);
  line-height: var(--sp-26);
  color: rgba(255,255,255,0.6);
  text-align: left;
}
.footer .footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-30);
  padding-top: var(--sp-45);
}
.footer .footer-links ul { list-style: none; margin: 0; padding: 0; }
.footer .footer-links a {
  display: block;
  font-size: var(--sp-14);
  line-height: var(--sp-32);
  color: rgba(255,255,255,0.6);
}
.footer .footer-links a:hover { color: #fff; }
.footer .footer-contact {
  padding-top: var(--sp-45);
  font-size: var(--sp-14);
  line-height: var(--sp-32);
  color: rgba(255,255,255,0.6);
}
.footer-bottom {
  border-top: var(--sp-1) solid rgba(102,102,102,0.25);
  margin-top: var(--sp-30);
  padding: var(--sp-14) 0;
  text-align: center;
  font-size: var(--sp-14);
  line-height: var(--sp-26);
  color: rgba(204,204,204,0.6);
}
.footer-bottom a { color: rgba(204,204,204,0.6); margin: 0 var(--sp-10); }
.footer-bottom a:hover { color: #fff; }

/* ===================== Back to top ===================== */
.back-to-top {
  position: fixed;
  right: var(--sp-30);
  bottom: var(--sp-40);
  width: var(--sp-48);
  height: var(--sp-48);
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--sp-20));
  transition: all .3s;
  z-index: 90;
  box-shadow: 0 var(--sp-6) var(--sp-16) rgba(0,81,195,0.35);
}
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--primary-light); }
.back-to-top svg { width: var(--sp-22); height: var(--sp-22); }

/* ===================== Reveal animation ===================== */
.reveal { opacity: 0; transform: translateY(var(--sp-30)); transition: opacity .7s ease, transform .7s ease; }
.reveal.reveal-in { opacity: 1; transform: none; }

/* ===================== Responsive ===================== */

/* ---- <= 1400: 角色卡片 5→4 列，提前减列以避免 hover 内容溢出 ---- */
@media (max-width: 1400px) {
  .role-grid { flex-wrap: wrap; justify-content: center; }
  .role-item { flex: 0 0 calc(25% - var(--sp-20)); margin: 0 var(--sp-10) var(--sp-24); padding: 0; }
}

/* ---- <= 1200: 内容区收缩、隐藏次要元素 ---- */
@media (max-width: 1200px) {
  .main-nav a { width: var(--sp-96); font-size: var(--sp-15); }
  .header-phone { display: none; }
  .eco-list { height: auto; }
  .eco-item .eco-mask h2 { font-size: var(--sp-24); }
}

/* ---- <= 1100: 角色卡片 4→3 列 ---- */
@media (max-width: 1100px) {
  .role-item { flex: 0 0 calc(33.333% - var(--sp-20)); margin: 0 var(--sp-10) var(--sp-24); padding: 0; }
}

/* ===================== 关于我们独立页 - 基础视觉（>=993px 与 <993px 共用） ===================== */
.about-hero {
  background: linear-gradient(135deg, rgba(29, 86, 214, 0.78) 0%, rgba(20, 60, 150, 0.82) 100%), url(../images/about-hero-bg.jpg) center center / cover no-repeat;
  color: #fff;
  text-align: center;
  padding: var(--sp-150) var(--sp-20) var(--sp-90);
  box-sizing: border-box;
}
.about-hero h1 {
  font-size: var(--sp-42);
  font-weight: 700;
  letter-spacing: var(--sp-2);
  margin: 0 0 var(--sp-16);
}
.about-hero p {
  font-size: var(--sp-18);
  opacity: .92;
  margin: 0;
  letter-spacing: var(--sp-1);
}
.about-block { padding: var(--sp-72) 0; }
.about-block.about-block--gray { background: #f4f8fd; }
.about-company { background: #fff; }
.about-company-inner {
  display: grid;
  grid-template-columns: 1fr var(--sp-460);
  gap: var(--sp-70);
  align-items: center;
}
.about-company-text { color: var(--text-main); }
.about-company-label {
  font-size: var(--sp-16);
  font-weight: 600;
  color: var(--primary);
  letter-spacing: var(--sp-1);
  margin: 0 0 var(--sp-14);
}
.about-company-text h2 {
  font-size: var(--sp-32);
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 var(--sp-24);
  line-height: 1.3;
}
.about-company-text p {
  font-size: var(--sp-15);
  line-height: 1.95;
  color: var(--text-sub);
  margin: 0;
}
.about-company-media { display: flex; justify-content: center; }
.h-collage-single {
  width: var(--sp-420);
  height: var(--sp-340);
  border-radius: var(--sp-26);
  overflow: hidden;
  box-shadow: 0 var(--sp-16) var(--sp-40) rgba(0, 81, 195, 0.14);
}
.h-collage-single img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-22);
  max-width: var(--sp-1200);
  margin: 0 auto;
}
.partner-card {
  background: #fff;
  border: var(--sp-1) solid #e3e9f2;
  border-radius: var(--sp-10);
  padding: var(--sp-30) var(--sp-20);
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.partner-card:hover {
  transform: translateY(var(--sp-n4));
  box-shadow: 0 var(--sp-14) var(--sp-34) rgba(0,81,195,.12);
}
.partner-card h4 {
  font-size: var(--sp-19);
  color: var(--primary);
  margin: 0 0 var(--sp-12);
}
.partner-card p {
  font-size: var(--sp-15);
  line-height: 1.8;
  color: var(--text-sub);
  margin: 0;
}
.about-cta {
  background: linear-gradient(135deg, #1d56d6 0%, #2f80ed 100%);
  color: #fff;
  text-align: center;
  padding: var(--sp-70) var(--sp-20);
}
.about-cta h2 {
  font-size: var(--sp-28);
  margin: 0 0 var(--sp-14);
  font-weight: 700;
}
.about-cta p {
  font-size: var(--sp-16);
  opacity: .9;
  margin: 0 0 var(--sp-28);
}
.about-cta-btn {
  display: inline-block;
  cursor: pointer;
  border: none;
  background: #fff;
  color: var(--primary);
  font-size: var(--sp-16);
  font-weight: 600;
  padding: var(--sp-13) var(--sp-38);
  border-radius: var(--sp-30);
  transition: transform .2s ease, box-shadow .2s ease;
}
.about-cta-btn:hover {
  transform: translateY(var(--sp-n2));
  box-shadow: 0 var(--sp-10) var(--sp-24) rgba(0,0,0,.18);
}


/* ---- <= 992: 平板，导航隐藏 ---- */
@media (max-width: 992px) {
  /* ===== 移动端(<=992px) 响应式分区 =====
     横向滚动轮播(eco/scene/role)必须 justify-content:flex-start，
     否则首卡被推到滚动区外、不可达（经典坑，勿改回 center）。
  ===== */

  

  

  

  

  

  

  

  :root { --header-h: var(--sp-64); }
  .main-nav { display: none; }
  .header-right { display: none; }
  .nav-toggle { display: block; }
  .site-logo img { height: var(--sp-40); width: auto; }

  .cta-text { font-size: var(--sp-22); }
  .cta-highlight { font-size: var(--sp-14); }
  .cta-section { height: auto; background-position: center top; }
  .cta-inner { height: auto; padding: var(--sp-40) var(--sp-20); }
  .cta-text { position: static; transform: none; left: auto; right: auto; }

  /* Banner：移动端压缩高度，避免满屏都是头图 */
  .banner { height: 42dvh; min-height: var(--sp-276); max-height: var(--sp-336); }
  .banner .swiper_content { padding: 0 var(--sp-24) var(--sp-80); }
  .banner .swiper_content h3 { font-size: var(--sp-15); padding-bottom: var(--sp-12); }
  .banner .swiper_content h3::after { width: var(--sp-30); height: var(--sp-2); }
  .banner .swiper_content p { height: auto; font-size: var(--sp-26); line-height: 1.35; margin-top: var(--sp-18); }
  .banner .swiper-pagination { bottom: var(--sp-36) !important; }

  /* 解决方案导语：改静态流式布局，防移动端文字重叠 */
  .solution-intro { height: auto; padding: var(--sp-28) var(--sp-20) var(--sp-8); text-align: center; }
  .solution-intro h2 { position: static; font-size: var(--sp-22); line-height: 1.4; }
  .solution-intro p { position: static; display: inline-block; max-width: 100%; font-size: var(--sp-13); line-height: 1.7; margin-top: var(--sp-12); text-align: left; }
  .solution-intro .decor { position: static; display: block; margin: var(--sp-8) auto 0; width: var(--sp-48); height: var(--sp-12); transform: none; object-fit: cover; object-position: center; }

  /* 模块主标题：改静态流式布局，防移动端文字重叠 */
  .module-tit { height: auto; padding: var(--sp-28) var(--sp-20) var(--sp-8); text-align: center; }
  .module-tit h2 { position: static; font-size: var(--sp-22); line-height: 1.4; }
  .module-tit p { position: static; transform: none; display: inline-block; max-width: 100%; font-size: var(--sp-13); line-height: 1.7; margin-top: var(--sp-12); text-align: left; }
  .module-tit .decor { position: static; display: block; margin: var(--sp-8) auto 0; width: var(--sp-48); height: var(--sp-12); transform: none; object-fit: cover; object-position: center; }
  .module-tit p ~ .decor { top: auto; }
  .module-tit--bg { height: auto; padding: var(--sp-28) 0 0; margin-top: var(--sp-28); }

  /* 横向轮播通用：隐藏滚动条（统一替代各组件重复声明） */
  .eco-list, .scene-list, .role-grid {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .eco-list::-webkit-scrollbar,
  .scene-list::-webkit-scrollbar,
  .role-grid::-webkit-scrollbar { display: none; }

  /* 生态：横向轮播，4 张全激活，全部显示完整内容 */
  .ecosystem { padding-bottom: 0; }
  .eco-list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;
    gap: var(--sp-14);
    height: auto;
    padding: var(--sp-16) var(--sp-20) var(--sp-16);
  }
  .eco-item, .eco-item.active {
    flex: 0 0 calc(100vw - var(--sp-40));
    max-width: calc(100vw - var(--sp-40));
    height: var(--sp-460);
    min-height: var(--sp-460);
    margin: 0;
    scroll-snap-align: start;
    transition: none;
  }
  .eco-item > img { transition: none; }
  .eco-item .eco-mask,
  .eco-item.active .eco-mask {
    text-align: left;
    padding: var(--sp-28) var(--sp-24) var(--sp-26) var(--sp-30);
    background: url(https://static.ltdcdn.com/uploadfilev3/image/0/569/813/2025-09/17580980078339.png) center center / 100% 100% no-repeat;
    transition: none !important;
  }
  .eco-mask h2,
  .eco-item.active .eco-mask h2 {
    font-size: var(--sp-24);
    padding: 0 0 var(--sp-10);
    margin: 0 0 var(--sp-10);
    white-space: normal;
  }
  .eco-mask p,
  .eco-item.active .eco-mask p {
    font-size: var(--sp-14);
    line-height: 1.7;
    padding: 0;
    margin: 0 0 var(--sp-18);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .eco-mask .eco-detail,
  .eco-item.active .eco-mask .eco-detail {
    position: static;
    transform: none;
    width: var(--sp-132);
    height: var(--sp-40);
    line-height: normal;
    opacity: 1;
    margin: 0;
    font-size: var(--sp-14);
    border-color: rgba(255,255,255,0.7);
    transition: none;
  }

  /* ===== 场景区：移动端横向轮播（白底轻灰卡，露下一张边） ===== */
  .scene-section { padding: var(--sp-8) 0 var(--sp-28); }
  .scene-images { display: none; }
  .scene-list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;
    gap: var(--sp-14);
    width: 100%;
    padding: 0 var(--sp-20) var(--sp-4);
    box-sizing: border-box;
    align-items: stretch;
    margin-top: 0;
  }
  .scene-list .scene-item,
  .scene-list .scene-item.active {
    flex: 0 0 85%;
    max-width: 85%;
    width: auto;
    border-right: 0;
    background: #f8f9fb;
    border-radius: var(--sp-14);
    overflow: hidden;
    box-shadow: 0 var(--sp-2) var(--sp-12) rgba(0,0,0,0.06);
    z-index: auto;
    color: var(--text-main);
    scroll-snap-align: start;
    transition: none;
  }
  .scene-list .scene-item .scene-card-img,
  .scene-list .scene-item.active .scene-card-img {
    display: block;
    width: 100%;
    height: var(--sp-180);
    object-fit: cover;
    object-position: bottom;
    border-bottom: var(--sp-1) solid #ebedf0;
    margin-bottom: var(--sp-16);
  }
  .scene-list .scene-item .scene-wrap,
  .scene-list .scene-item.active .scene-wrap {
    position: static;
    height: auto;
    padding: var(--sp-32) var(--sp-18) var(--sp-20);
  }
  .scene-list .scene-item .scene-deco,
  .scene-list .scene-item.active .scene-deco { display: none; }
  .scene-list .scene-item .scene-top,
  .scene-list .scene-item.active .scene-top { position: static; z-index: auto; }
  .scene-list .scene-item .scene-tit,
  .scene-list .scene-item.active .scene-tit {
    margin: 0 0 var(--sp-10);
    font-size: var(--sp-20);
    color: var(--text-main);
  }
  .scene-list .scene-item .scene-desc,
  .scene-list .scene-item.active .scene-desc {
    position: static;
    opacity: 1;
    color: var(--text-muted);
    font-size: var(--sp-14);
    line-height: 1.7;
    margin-bottom: var(--sp-16);
  }
  .scene-list .scene-item .scene-desc p,
  .scene-list .scene-item.active .scene-desc p { color: var(--text-muted); }
  .scene-list .scene-item .scene-btm,
  .scene-list .scene-item.active .scene-btm {
    position: static;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: var(--sp-1) solid #ebedf0;
    padding-top: var(--sp-14);
  }
  .scene-list .scene-item .scene-btm-info,
  .scene-list .scene-item.active .scene-btm-info { opacity: 1; }
  .scene-list .scene-item .scene-btm-info p,
  .scene-list .scene-item.active .scene-btm-info p { color: var(--text-main); font-size: var(--sp-13); line-height: 1.6; }
  .scene-list .scene-item .scene-arrow,
  .scene-list .scene-item.active .scene-arrow { padding: 0; }
  .scene-list .scene-item .scene-arrow svg,
  .scene-list .scene-item.active .scene-arrow svg { fill: var(--primary); }

  /* ===== 角色区：移动端横向轮播（白底轻灰卡+完整内容） ===== */
  .role-section { padding: var(--sp-16) 0 var(--sp-60); }
  .role-grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;
    gap: var(--sp-14);
    width: 100%;
    padding: 0 var(--sp-20) var(--sp-4);
    box-sizing: border-box;
    align-items: stretch;
  }
  .role-item {
    flex: 0 0 85%;
    max-width: 85%;
    padding: 0;
    margin: 0;
    scroll-snap-align: start;
    display: flex;
  }
  .role-cover {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    min-height: 0;
    width: 100%;
    border-radius: var(--sp-14);
    overflow: hidden;
    background: #f8f9fb;
    border: var(--sp-1) solid #ebedf0;
    padding: var(--sp-18) var(--sp-18) var(--sp-20);
    box-sizing: border-box;
    box-shadow: 0 var(--sp-2) var(--sp-12) rgba(0,0,0,0.06);
  }
  .role-cover::after { display: none; }
  .role-cover img.role-bg { display: none; }
  .role-cover img.role-avatar {
    position: static;
    flex: 0 0 var(--sp-56);
    width: var(--sp-56);
    height: var(--sp-56);
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    margin: 0 var(--sp-14) 0 0;
  }
  .role-caption {
    position: static;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    padding: 0;
    z-index: auto;
    color: var(--text-main);
    margin-bottom: 0;
  }
  .role-caption .role-tag {
    align-self: flex-start;
    background: rgba(29,112,242,0.1);
    color: var(--primary);
    font-size: var(--sp-13);
  }
  .role-caption .role-title {
    text-align: left;
    font-size: var(--sp-17);
    color: var(--text-main);
    line-height: 1.4;
  }
  .role-hover {
    position: static;
    flex: 0 0 100%;
    inset: auto;
    opacity: 1;
    padding: var(--sp-16) 0 0;
    margin-top: var(--sp-16);
    background: none;
    backdrop-filter: none;
    border-top: var(--sp-1) solid #ebedf0;
    display: block;
  }
  .role-hover .role-tag {
    background: var(--primary);
    color: #fff;
    margin-bottom: var(--sp-12);
  }
  .role-hover .role-info { color: var(--text-muted); margin: 0 0 var(--sp-14); }
  .role-hover .role-info p { color: var(--text-muted); font-size: var(--sp-13); }
  .role-hover .role-h-tit { color: var(--text-main); margin-bottom: 0; }
  .role-hover .role-h-tit li { color: var(--text-main); font-size: var(--sp-13); }
  .role-hover .role-h-tit li::before,
  .role-hover .role-info p::before { background: var(--primary); }
  .role-item:hover .role-hover { opacity: 1; }

  /* 页脚：移动端左右分布，缩短纵向长度 */
  .footer { padding: var(--sp-32) var(--sp-20) 0; }
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-24) var(--sp-20);
    text-align: left;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer .footer-logo img { margin: 0; display: block; }
  .footer .footer-copyright { text-align: left; }
  .footer .footer-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    padding-top: 0;
    justify-content: flex-start;
  }
  .footer .footer-links ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }
  .footer .footer-links a { white-space: normal; }
  .footer .footer-contact {
    padding-top: 0;
    text-align: left;
  }
  .footer-bottom { text-align: left; }

  /* 关于我们页：移动端继承 PC 端蓝底白字 hero、渐变 CTA 等视觉，仅做窄屏必要折叠 */
  .about-hero { padding: var(--sp-120) var(--sp-20) var(--sp-70); }
  .about-hero h1 { font-size: var(--sp-34); }
  .about-hero p { font-size: var(--sp-17); }
  .about-block { padding: var(--sp-56) 0; }
  /* 平板（768-992px）仍保持左右布局；更窄屏幕在 <=480 单列 */
  .about-company-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-36);
  }
  .about-company-text { width: 100%; min-width: 0; }
  .about-company-text h2 {
    font-size: var(--sp-26);
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .about-company-text p { font-size: var(--sp-14); line-height: 1.85; word-break: break-word; overflow-wrap: break-word; }
  .h-collage-single {
    width: 100%;
    max-width: var(--sp-420);
    height: var(--sp-260);
    border-radius: var(--sp-20);
  }
  .about-partner-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-22); }
  .partner-card { padding: var(--sp-26) var(--sp-20); }
  .partner-card h4 { font-size: var(--sp-18); }
  .partner-card p { font-size: var(--sp-15); line-height: 1.8; }
  .about-cta { padding: var(--sp-60) var(--sp-20); }
  .about-cta h2 { font-size: var(--sp-26); }
  .about-cta p { font-size: var(--sp-16); margin-bottom: var(--sp-28); }
}



/* ---- <= 480: 手机 ---- */
@media (max-width: 480px) {
  :root { --header-h: var(--sp-56); }
  .site-logo img { height: var(--sp-34); }

  .banner { height: 37dvh; min-height: var(--sp-240); max-height: var(--sp-288); }
  .banner .swiper_content { padding: 0 var(--sp-20) var(--sp-64); }
  .banner .swiper_content h3 { font-size: var(--sp-14); }
  .banner .swiper_content p { font-size: var(--sp-22); }
  .banner .swiper-pagination { bottom: var(--sp-28) !important; }

  /* 页脚：超窄屏下保持左右两栏，仅收紧字号与间距 */
  .footer-inner { gap: var(--sp-20) var(--sp-16); }
  .footer .footer-links { gap: var(--sp-6); }
  .footer .footer-links a { font-size: var(--sp-13); }
  .footer .footer-contact { font-size: var(--sp-13); line-height: 1.8; }
  .footer-bottom { font-size: var(--sp-13); }

  .cta-text { font-size: var(--sp-18); }
  .cta-highlight { font-size: var(--sp-10); }

  /* 关于我们页：超窄屏仅做最小收敛，尽量与 PC 一致 */
  .section-title h2 { font-size: var(--sp-30); }
  .about-hero { padding: var(--sp-100) var(--sp-20) var(--sp-60); }
  .about-hero h1 { font-size: var(--sp-30); }
  .about-hero p { font-size: var(--sp-16); }
  .about-company-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-30);
  }
  .about-company-text h2 { font-size: var(--sp-24); }
  .h-collage-single { height: var(--sp-220); border-radius: var(--sp-16); }
  .about-partner-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-14); }
  .partner-card { padding: var(--sp-22) var(--sp-16); }
  .partner-card h4 { font-size: var(--sp-17); }
  .partner-card p { font-size: var(--sp-14); }
  .about-cta { padding: var(--sp-56) var(--sp-20); }
  .about-cta h2 { font-size: var(--sp-24); }
  .about-cta p { font-size: var(--sp-15); }
  .about-cta-btn { padding: var(--sp-12) var(--sp-32); font-size: var(--sp-15); }
}

/* ===================== 关于我们 ===================== */
.about-section { background: #fff; }
.about-inner { max-width: var(--sp-1180); margin: 0 auto; padding: 0 var(--sp-20); box-sizing: border-box; }
.about-intro {
  max-width: var(--sp-900);
  margin: 0 auto var(--sp-56);
  text-align: center;
  font-size: var(--sp-16);
  line-height: 1.9;
  color: var(--text-sub);
}
.about-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-24);
  margin-bottom: var(--sp-56);
}
.value-item {
  background: #f4f8fd;
  border-radius: var(--sp-8);
  padding: var(--sp-30) var(--sp-24);
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.value-item:hover { transform: translateY(var(--sp-n4)); box-shadow: 0 var(--sp-12) var(--sp-30) rgba(0,81,195,0.12); }
.value-item h3 { font-size: var(--sp-18); color: var(--primary); margin-bottom: var(--sp-14); }
.value-item p { font-size: var(--sp-15); line-height: 1.85; color: var(--text-sub); }
.about-partners { text-align: center; }
.about-partners h3 { font-size: var(--sp-18); color: var(--text-main); margin-bottom: var(--sp-22); }
.about-partners ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-20); padding: 0; margin: 0; }
.about-partners li {
  font-size: var(--sp-16);
  color: var(--text-sub);
  padding: var(--sp-10) var(--sp-30);
  border: var(--sp-1) solid #e3e9f2;
  border-radius: var(--sp-30);
}

/* ===================== 关于我们独立页（桌面端 ≥993px，覆盖基础视觉中的响应式差异） ===================== */
@media (min-width: 993px) {
.about-hero {
  background: linear-gradient(135deg, rgba(29, 86, 214, 0.78) 0%, rgba(20, 60, 150, 0.82) 100%), url(../images/about-hero-bg.jpg) center center / cover no-repeat;
  color: #fff;
  text-align: center;
  padding: var(--sp-150) var(--sp-20) var(--sp-90);
  box-sizing: border-box;
}
.about-hero h1 { font-size: var(--sp-42); font-weight: 700; letter-spacing: var(--sp-2); margin: 0 0 var(--sp-16); }
.about-hero p { font-size: var(--sp-18); opacity: .92; margin: 0; letter-spacing: var(--sp-1); }
.about-block { padding: var(--sp-72) 0; }
.about-block.about-block--gray { background: #f4f8fd; }
.about-lead {
  max-width: var(--sp-920); margin: 0 auto;
  font-size: var(--sp-17); line-height: 2; color: var(--text-sub); text-align: center;
}
.about-pos {
  max-width: var(--sp-920); margin: var(--sp-36) auto 0;
  background: #eef4ff; border-left: var(--sp-4) solid var(--primary);
  border-radius: var(--sp-6); padding: var(--sp-22) var(--sp-28);
  font-size: var(--sp-19); line-height: 1.8; color: var(--text-main); font-weight: 600;
}
.about-pos span { color: var(--primary); }
.about-partner-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-22);
  max-width: var(--sp-1200); margin: 0 auto;
}
.partner-card {
  background: #fff; border: var(--sp-1) solid #e3e9f2; border-radius: var(--sp-10);
  padding: var(--sp-30) var(--sp-20); text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.partner-card:hover { transform: translateY(var(--sp-n4)); box-shadow: 0 var(--sp-14) var(--sp-34) rgba(0,81,195,.12); }
.partner-card h4 { font-size: var(--sp-19); color: var(--primary); margin: 0 0 var(--sp-12); }
.partner-card p { font-size: var(--sp-15); line-height: 1.8; color: var(--text-sub); margin: 0; }
.about-cta {
  background: linear-gradient(135deg, #1d56d6 0%, #2f80ed 100%);
  color: #fff; text-align: center; padding: var(--sp-70) var(--sp-20);
}
.about-cta h2 { font-size: var(--sp-28); margin: 0 0 var(--sp-14); font-weight: 700; }
.about-cta p { font-size: var(--sp-16); opacity: .9; margin: 0 0 var(--sp-28); }
.about-cta-btn {
  display: inline-block; cursor: pointer; border: none;
  background: #fff; color: var(--primary);
  font-size: var(--sp-16); font-weight: 600; padding: var(--sp-13) var(--sp-38); border-radius: var(--sp-30);
  transition: transform .2s ease, box-shadow .2s ease;
}
.about-cta-btn:hover { transform: translateY(var(--sp-n2)); box-shadow: 0 var(--sp-10) var(--sp-24) rgba(0,0,0,.18); }
/* ===================== 关于我们-公司简介（左文右图） ===================== */
.about-company { background: #fff; }
.about-company-inner {
  display: grid;
  grid-template-columns: 1fr var(--sp-460);
  gap: var(--sp-70);
  align-items: center;
}
.about-company-text { color: var(--text-main); }
.about-company-label {
  font-size: var(--sp-16);
  font-weight: 600;
  color: var(--primary);
  letter-spacing: var(--sp-1);
  margin: 0 0 var(--sp-14);
}
.about-company-text h2 {
  font-size: var(--sp-32);
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 var(--sp-24);
  line-height: 1.3;
}
.about-company-text p {
  font-size: var(--sp-15);
  line-height: 1.95;
  color: var(--text-sub);
  margin: 0;
}
.about-company-media { display: flex; justify-content: center; }
.h-collage-single {
  width: var(--sp-420);
  height: var(--sp-340);
  border-radius: var(--sp-26);
  overflow: hidden;
  box-shadow: 0 var(--sp-16) var(--sp-40) rgba(0, 81, 195, 0.14);
}
.h-collage-single img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
}