/* ============================================================
   梦之源官网 - home.css  首页样式
   依据 Figma「首页」设计稿:
   - 首屏 Banner 轮播 (1920×960, Swiper, 纯图片 slide)
   ============================================================ */

/* ---------- 首屏 Banner ---------- */
.banner {
  position: relative;
  width: 100%;
  height: 100vh;               /* 占满当前屏幕高度 */
  min-height: 640px;           /* 小屏保底高度 */
  overflow: hidden;
  background: #101216;
}
.banner-slide {
  position: relative;
  width: 100%;
  height: 100%;
}
/* picture 容器占满 slide */
.banner-bg {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.banner-bg video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.banner-bg img,
.banner-bg .banner-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 左右箭头 (56×96, 垂直居中, 设计稿: 黑色α0.2底 + 24×24箭头 stroke3)
   细节完善: 左侧箭头圆左角, 右侧箭头圆右角 */
.banner-prev,
.banner-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.2);
  cursor: pointer;
  transition: background .3s var(--ease);
  z-index: 10;
}
.banner-prev {
  left: 0;
  border-radius: 0 8px 8px 0;   /* 左箭头: 圆右侧角 */
}
.banner-next {
  right: 0;
  border-radius: 8px 0 0 8px;   /* 右箭头: 圆左侧角 */
}
.banner-prev:hover,
.banner-next:hover { background: rgba(0,0,0,.35); }
.banner-prev svg,
.banner-next svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Swiper 不可用态: 后退到第一张/前进到最后一张时禁用 */
.banner-prev.swiper-button-disabled,
.banner-next.swiper-button-disabled {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

/* 滚动条 (设计稿: 5段 × 88×3, 白α0.35, 激活段白α1, 段距8px, 底部40px 居中)
   容器宽度自适应内容并居中, 保证无论几张 slide 都整体居中 */
.banner-progress {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 3px;
  z-index: 10;
}
.bp-bar {
  width: 88px;              /* 固定 88px, 不拉伸 */
  height: 3px;
  border-radius: 2px;       /* 细条圆角 */
  background: rgba(255,255,255,.35);
  cursor: pointer;
  transition: background .35s var(--ease), width .35s var(--ease);
}
.bp-bar.active { background: #fff; }

/* ============================================================
   Banner 响应式 (高度始终 100vh 占满屏幕)
   ============================================================ */
@media (max-width: 1100px) {
  .banner-progress { width: 320px; }
}
@media (max-width: 767px) {
  .banner { min-height: 480px; }
  .banner-prev,
  .banner-next { width: 40px; height: 64px; }
  .banner-prev svg,
  .banner-next svg { width: 18px; height: 18px; }
  .banner-progress { bottom: 24px; width: 200px; }
}

/* ============================================================
   产品系列 2×2 (设计图确认: 936×560 卡, 间距16)
   文字在左上区域(左68px 顶60px), 标题32px白粗体+阴影,
   副标题18px浅灰#CCC在标题下方, 按钮描边胶囊透明底
   ============================================================ */
.prod-zones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px;
  background: #fff;
}
.prod-zone {
  position: relative;
  display: block;
  height: 560px;
  overflow: hidden;
}
.prod-zone-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.prod-zone:hover .prod-zone-img { transform: scale(1.03); }

/* 文案块 (设计图: 左上区域) */
.prod-zone-text {
    position: absolute;
    left: 50%;
    top: 52px;
    color: #fff;
    z-index: 2;
    transform: translateX(-50%);
}
.prod-zone-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
  text-align: center;
}
.prod-zone-sub {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: rgba(255,255,255,.75);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  white-space: nowrap;
  text-align: center;
}

/* 按钮 (设计图: 描边胶囊, 透明底+白色细边框; 居中显示) */
.prod-zone-btns {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 150px;
  display: flex;
  gap: 16px;
  z-index: 2;
          width: 100%;
        margin: 0 auto;
        text-align: center;
            justify-content: center;

}
.prod-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 24px;
  border-radius: 24px;
  border: 1px solid #fff;
  background: transparent;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #fff;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.prod-btn:hover { background: #fff; color: #222426; }
.prod-btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   产品系列 响应式 (全站断点: 1336/1100/767)
   ============================================================ */
/* ≤1336: 卡片高度微降, 字号保持 */
@media (max-width: 1336px) {
  .prod-zone { height: 520px; }
}

/* ≤1100: 卡片 420, 文案按钮上移缩紧 */
@media (max-width: 1100px) {
  .prod-zones { gap: 12px; padding: 12px; }
  .prod-zone { height: 420px; }
  .prod-zone-text { left: 50%; top: 36px; }
  .prod-zone-title { font-size: 26px; line-height: 34px; }
  .prod-zone-sub { margin-top: 6px; font-size: 16px; line-height: 24px; }
  .prod-zone-btns { left: 50%; top: 116px; gap: 12px; }
  .prod-btn { height: 34px; padding: 0 20px; font-size: 13px; }
}

/* ≤767: 单列, 卡片 360, 内容紧凑 */
@media (max-width: 767px) {
  .prod-zones { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
  .prod-zone { height: 360px; }
  .prod-zone-text { left: 50%; top: 28px; }
  .prod-zone-title { font-size: 24px; line-height: 32px; }
  .prod-zone-sub { margin-top: 4px; font-size: 15px; line-height: 22px; }
  .prod-zone-btns { left: 50%; top: 104px; gap: 10px; }
  .prod-btn { height: 32px; padding: 0 16px; font-size: 13px; border-radius: 20px; }
}

/* ============================================================
   SPanel OS 轮播 (设计稿: 1920×560)
   - 浅蓝底 #D3E3FC, 左侧文案(240,160), 右侧软件图(710,20 945×532)
   - 标题 40px W749 / 副标题 20px W513 / 了解更多胶囊 #D9D9D9深字
   - 箭头 56×96 α0.2 + 滚动条 3段×32×2
   ============================================================ */
.spanel {
  position: relative;
  width: 100%;
  height: 560px;
  overflow: hidden;
  background: #D3E3FC;
}
.spanel-slide {
  position: relative;
  width: 100%;
  height: 100%;
}
.spanel-bg {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;             /* 背景图铺满整个区块 */
  object-fit: cover;
  object-position: center;
}

/* 左侧文案 (设计稿: 240,160) */
.spanel-text {
  position: absolute;
  left: 12.5%;          /* 240/1920 设计稿: 相对区块宽度, 随屏幕自适应 */
  top: 28.6%;           /* 160/560 设计稿: 相对区块高度 */
  z-index: 2;
}
.spanel-title {
  font-size: 40px;
  font-weight: 749;
  line-height: 60px;
  letter-spacing: -.01em;
  color: #222326;
}
.spanel-sub {
    margin-top: 16px;
    font-size: 20px;
    font-weight: 513;
    line-height: 28px;
    color: #222426;
}
.spanel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 110px;
    height: 34px;
    margin-top: 24px;
    border-radius: 1000px;
    border: 1px solid #676C73;
    background: rgb(255 255 255 / 0%);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #676C73;
    transition: background .3s var(--ease), border-color .3s var(--ease);
}
.spanel-btn:hover { background: rgba(255,255,255,.8); border-color: #999; }
.spanel-btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 左右箭头 (设计图: 浅灰半透明细线 chevron, 无背景块) */
.spanel-prev,
.spanel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity .3s var(--ease);
  z-index: 10;
}
.spanel-prev { left: 8px; }
.spanel-next { right: 8px; }
.spanel-prev svg, .spanel-next svg {
  width: 24px; height: 24px;
  fill: none; stroke: #fff;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.spanel-prev:hover svg, .spanel-next:hover svg { stroke: rgba(255,255,255,.8); }
.spanel-prev.swiper-button-disabled,
.spanel-next.swiper-button-disabled { opacity: .3; cursor: default; pointer-events: none; }

/* 滚动条 (设计图: 圆角短横条 26×4, 激活深灰#333/未激活浅灰#D0D0D0) */
.spanel-progress {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 4px;
  z-index: 10;
}
.sp-bar {
    width: 32px;
    height: 2px;
    border-radius: 2px;
    background: rgb(255 255 255 / 35%);
    cursor: pointer;
    transition: background .35s var(--ease), width .35s var(--ease);
}
.sp-bar.active { background: #ffffff; }

/* SPanel OS 响应式 */
/* ≤1336: 高度降, 文案左移, 图片收窄 */
@media (max-width: 1336px) {
  .spanel { height: 480px; }
  .spanel-text { left: 12%; top: 23%; }
  .spanel-bg { width: 100%; }
  .spanel-title { font-size: 34px; line-height: 50px; }
  .spanel-sub { font-size: 18px; }
}

/* ≤1100: 平板, 文案继续左移, 图片占半 */
@media (max-width: 1100px) {
  .spanel { height: 400px; }
  .spanel-text { left: 6%; top: 20%; }
  .spanel-bg { width: 100%; }
  .spanel-title { font-size: 28px; line-height: 42px; }
  .spanel-sub { font-size: 16px; line-height: 24px; margin-top: 10px; }
  .spanel-btn { width: 100px; height: 32px; margin-top: 18px; font-size: 13px; }
}

/* ≤767: 手机, 背景图按视口比例完整展示(高度受控) + 文案居中叠加半透明遮罩 */
@media (max-width: 767px) {
  .spanel { height: auto; }
  .spanel-slide {
    position: relative;
    height: auto;
  }
  .spanel-bg {
    position: static;
    display: block;
    width: 100%;
    height: auto;              /* 高度随图片比例自适应, 完整展示不裁切 */
    min-height: 300px;         /* 高度下限: 图片过扁时保证区块高度 */
    max-height: 60vh;          /* 高度上限: 图片过高时不超出视口 60% */
    opacity: 1;
    object-fit: contain;       /* 超出上下限时完整显示, 不裁切 */
    object-position: center;
  }
  .spanel-text {
    position: absolute;
    left: 24px;                 /* 与主体内容宽度对齐 (container padding) */
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;         /* 文字居中 */
    background: rgba(211, 227, 252, 0.72);   /* 半透明遮罩, 图片透出 */
    border-radius: 14px;
    padding: 20px 16px;
    box-sizing: border-box;
  }
  .spanel-title { font-size: 24px; line-height: 34px; }
  .spanel-sub { font-size: 14px; line-height: 22px; margin-top: 8px; }
  .spanel-btn { width: 96px; height: 32px; margin-top: 16px; font-size: 13px; }
  .spanel-prev, .spanel-next { width: 36px; height: 56px; }
  .spanel-prev { left: 4px; }
  .spanel-next { right: 4px; }
.spanel-prev svg, .spanel-next svg {
        width: 40px;
        height: 40px;
}
  .spanel-progress { bottom: 16px; }
}

/* ============================================================
   企业实力 (设计稿「企业实力」1386×1161)
   - 上方: 标题 40px + 4 白色数据卡 (白底黑字)
   - 下方: 工厂实力视频区, 视差滚动 (视频背景固定, 内容滚过)
   ============================================================ */
.company {
  position: relative;
  background: #fff;
  padding: 80px 0 0;
  /* 注意: 不能 overflow:hidden, 否则内部 sticky 视频失效 */
}
/* 上方内容: 标题 + 数据卡 (白底) */
.company-inner {
  max-width: 1386px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
.company-title {
  font-size: 40px;
  font-weight: 666;
  line-height: 48px;
  color: #222426;
  text-align: center;
}
.company-title b,
.company-title strong {
  font-weight: 800;
}

/* 4 数据 (设计稿: 白色卡片 320×130, 间距32) */
.company-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-top: 85px;
}
.company-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}
.cs-num {
    position: relative;
    font-size: 90px;
    font-weight: 700;
    line-height: 90px;
    color: #222222;
    font-family: var(--font-num);
    display: flex;
    justify-content: center;
    padding-right: 10px;
}
/* + 和单位 (年/家/万台/km²) 都在数字右缘同一条竖线 (设计稿坐标):
   + 在数字右上角 (y+2), 单位在数字下部 (y≈58%) — 竖着排 */
.cs-num sup {
    position: absolute;
    left: 100%;                  /* 数字右边缘 */
    top: 2px;                    /* 数字顶部 */
    white-space: nowrap;         /* 防止绝对定位下宽度收缩换行 */
    font-size: 36px;
    font-weight: 590;
    color: #222222;
    line-height: 1;
}
.cs-num em {
    position: absolute;
    left: 100%;
    top: 68%;
    white-space: nowrap;         /* 双字单位(万台)不换行, 保持横排 */
    font-style: normal;
    font-size: 22px;
    font-weight: 590;
    color: #222426;
    line-height: 1;
}
.cs-label {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 400;
    color: #222426D9;
    text-align: center;
    display: flex;
    justify-content: center;
    width: 100%;
}
/* 工厂实力视频区 (sticky 视差:
   视频 sticky 固定视口并放大全屏,
   两处文字块叠在固定视频上依次淡入居中 → 淡出穿过) */
.company-factory {
  position: relative;
  margin-top: 80px;
  height: 220vh;               /* 容器超高: 视频固定段 + 文字穿过的滚动空间 */
  background: #fff;
}
/* sticky 视频层: 滚动时固定视口 */
.factory-bg {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  will-change: transform;
}
.fb-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(.73);       /* 最小 0.73: 视频宽 > 内容区宽, 不窄于板块主体 */
  transform-origin: center center;
  will-change: transform;      /* JS 逐帧驱动 scale, 不加 CSS 过渡避免滞后 */
}
/* 深色遮罩 (设计稿 #0044BF α0.5) — GSAP scrub 驱动, 不加 CSS 过渡避免滞后 */
.factory-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 68, 191, .5);
  opacity: 0;                   /* 初始透明, 视频放大全屏后 JS 淡入 */
  z-index: 1;
}

/* 文字块: absolute 叠在视频上, GSAP ScrollTrigger 控制逐字显示 + 平滑穿过
   设计稿「工厂实力」1920×1080:
   - 块1 顶距视频顶 450px (41.7%), 块2 顶距 820px (75.9%)
   - 两块垂直间距 370px (≈视口高 34%), 文字左对齐 x=240
   - 时序: 放大 + 块1 从下方升起进入 → 块2 从下方进入 →
     块1 完全滚出 → 块2 居中停留 → 块2 逐渐滚出 → 视频滚出 */
.factory-text {
  position: absolute;
  left: 240px;
  z-index: 2;
  color: #fff;
  opacity: 0;
  will-change: transform, opacity;
}
/* 块1: 上位; 块2: 下位 */
.ftext-1 { top: 40%; }
.ftext-2 { top: 74%; }
/* 逐字 span: JS 按滚动进度逐帧设置 opacity (不加 CSS 过渡, 与滚动 1:1 同步) */
.factory-text .ch {
  display: inline;
  opacity: 0;
  white-space: pre;
}
/* 两段文字样式一致: 40px / W666 / 行高 60 */
.factory-text h3 {
  white-space: pre;               /* 保留字符间距, 逐字不塌陷 */
  font-size: 40px;
  font-weight: 666;
  line-height: 66px;            /* 设计稿行高 66 */
  color: #fff;
}
/* 了解更多按钮 (透明底 + 白字 + 白边框, 114×36 胶囊; 文字打完才显示) */
.ftext-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 114px;
  height: 36px;
  margin-top: 24px;
  border-radius: 1000px;
  border: 1px solid #fff;        /* 边框白色 */
  background: transparent;        /* 背景透明 */
  font-size: 14px;
  font-weight: 400;
  color: #fff;                    /* 字体白色 */
  opacity: 0;                    /* JS 在文字打字结束后显示 */
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), opacity .2s linear;
}
.ftext-btn:hover { background: #fff; color: #393C40; border-color: #fff; }
.ftext-btn svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* 企业实力响应式 */
@media (max-width: 1100px) {
  .company-title { font-size: 32px; line-height: 42px; }
  .company-stats { gap: 20px; margin-top: 48px; }
  .cs-num { font-size: 44px; line-height: 48px; padding-right: 5px;}
  .factory-text { left: 96px; }
}
/* 平板竖屏 (≤900): 数据卡改 2×2 更舒展, 数字加大; 工厂文字降到 34px */
@media (max-width: 900px) {
  .company-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 48px;
  }
  .cs-num { font-size: 52px; line-height: 56px; }
  .cs-num sup { font-size: 22px; }
  .cs-num em { font-size: 16px; }
  .cs-label { font-size: 16px; margin-top: 10px; }
  .factory-text { left: 48px; }
  .ftext-1 { top: 36%; }
  .ftext-2 { top: 68%; }
  .factory-text h3 { font-size: 34px; line-height: 50px; }
  .ftext-btn { width: 110px; height: 36px; }
}
@media (max-width: 767px) {
  .company { padding: 48px 0 0; }
  .company-title { font-size: 24px; line-height: 34px; }
  .company-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 36px; }
  .company-stat { height: 112px; }
  .cs-num { font-size: 34px; line-height: 38px; }
  /* 手机: + 更贴数字右上, 单位按设计稿比例(数字下部 54%)、间距收紧 */
  .cs-num sup { font-size: 18px; top: 2px; }
  .cs-num em { font-size: 15px; top: 54%;  }
  .cs-label { font-size: 13px; margin-top: 10px; }
  /* 手机: 文字块右移, 两段统一缩小字号, 间距按比例保持 */
  .factory-text { left: 24px; right: 24px; }
  .ftext-1 { top: 32%; }
  .ftext-2 { top: 62%; }
  .factory-text h3 { font-size: 24px; line-height: 38px; }
  .ftext-btn { width: 104px; height: 34px; margin-top: 16px; font-size: 13px; }
}
/* 小屏手机 (≤400): 数字再收小防拥挤 */
@media (max-width: 400px) {
  .company-stats { gap: 12px; }
  .cs-num { font-size: 30px; line-height: 34px; }
.cs-num sup {
        font-size: 18px;
        top: -8px;
    }
    .company-factory {
    margin-top: 0;
}
  .cs-num em { font-size: 14px; }
  .cs-label { font-size: 13px; margin-top: 8px; }
  .factory-text h3 { font-size: 22px; line-height: 34px; }
}

/* ============================================================
   研发能力 (设计稿「研发能力-默认」1920×876 @y5107)
   - 深色背景 #1B1C1F, 标题居中
   - 桌面: 5 等分紧贴, 悬停某卡按比例展开 27%, 其余均等压缩,
     展开卡显示图标上移 + 描述 (仅 hover 设备, 纯 CSS)
   - 移动端 (≤767): 单列堆叠, 图标+名称+描述全部直接显示, 无点击交互
   ============================================================ */
/* ============================================================
    全球触达 (设计稿「全球客户」1920×742 @y5967)
   - 区块背景 #F0F3FA, 标题 40px W666 #222426 居中
   - 地图区 1440×508 底 #EBEFFA, 世界地图图 + 连接线 + 16 国旗 + 中心 logo
   - 流动箭头沿 5 条主线循环发射 (SVG animateMotion, 无需 JS)
   ============================================================ */
.global-reach {
  position: relative;
  background: #F0F3FA;
  padding: 119px 0 0;            /* 标题顶距区块顶 119px */
  text-align: center;
}
.gr-title {
  font-size: 40px;
  font-weight: 666;
  line-height: 60px;
  color: #222426;
  letter-spacing: -.01em;
  text-align: center;
}
/* 地图区外层 */
.gr-map-wrap {
  margin-top: 55px;              /* 标题底 6146 → 地球容器顶 6201 = 55px */
}
/* 地球容器 (设计稿 #4:231 1440×508, aspect-ratio 等比缩放) */
.gr-map {
  position: relative;
  width: 100%;
  max-width: 1440px;
  aspect-ratio: 1440 / 508;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
}
/* 白色渐变穹顶 (设计稿椭圆 #4:233 1362×1300, 白→透明41%, 被容器裁成穹顶) */
.gr-ellipse {
  position: absolute;
  left: 2.71%;
  top: 0.59%;
  width: 94.58%;
  height: 255.91%;
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 41%);
  border-radius: 50%;
  pointer-events: none;
}
.gr-map-img {
  position: absolute;
  left: 10.97%;
  top: 0.20%;
  width: 75.90%;
  height: 98.62%;                 /* 设计稿 image 16 尺寸 */
  object-fit: fill;               /* 设计稿 scaleMode STRETCH */
  pointer-events: none;
}
/* 连接线 SVG 铺满地图区 */
.gr-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* ============================================================
   流动箭头: 纯 CSS offset-path 动画 (无 JS)
   - 客户要求: 箭头随机跑, 不要只跑固定的 5 个国家
   - 实现: 16 条连接线按方向分 5 组, 每组 3 条复合为一条
     offset-path (M 跳回中心 = 从中心再发射到下一国方向)
   - 5 个箭头负 delay 错峰, 覆盖多个国家方向
   - offset-distance 0%→100% 沿整条复合路径匀速飞行
   ============================================================ */
.gr-arrows {
  /* 箭头定位完全由 CSS offset-path 驱动 */
}
.gr-arrow {
  fill: #3888FC;
  offset-rotate: auto;
  animation: gr-fly 10.8s linear infinite;
}
/* 组1: 右上(2) + 右上(6) + 右(3) */
.gr-arrow-1 {
  offset-path: path('M970 137.8 C988.4 136.2 1016.6 140.0 1041.1 163.1 M970 137.8 C986.1 126.7 1045.6 116.0 1094.7 163.6 M970 137.8 C992.1 143.5 1048.1 198.1 1074.6 256.1');
  animation-delay: -0s;
}
/* 组2: 右下短(4) + 右下(7) + 左长(10) */
.gr-arrow-2 {
  offset-path: path('M970 137.8 C980.6 146.1 987.1 181.6 974.1 233.1 M970 137.8 C1002.6 154.6 1011.6 273.1 999.1 302.1 M970 137.8 C876.0 107.0 605.9 69.0 362.3 243.6');
  animation-delay: -2.16s;
}
/* 组3: 右下长(5) + 下(8) + 左中(12) */
.gr-arrow-3 {
  offset-path: path('M970 137.8 C980.6 146.1 1038.6 185.1 1062.1 359.2 M970 137.8 C970.6 161.1 947.1 217.1 913.6 232.6 M970 137.8 C870.5 138.0 736.5 167.6 674.9 254.1');
  animation-delay: -4.32s;
}
/* 组4: 左下(9) + 左上(11) + 左上(14) */
.gr-arrow-4 {
  offset-path: path('M970 137.8 C911.6 143.0 845.5 167.1 803.0 198.6 M970 137.8 C870.5 126.0 796.5 107.5 667.4 152.6 M970 137.8 C811.0 68.0 629.4 86.5 506.9 121.0');
  animation-delay: -6.48s;
}
/* 组5: 左上长(13) + 左下(15) + 左下长(16) */
.gr-arrow-5 {
  offset-path: path('M970 137.8 C826.5 4.0 505.4 21.5 381.8 175.1 M970 137.8 C931.2 215.9 771.0 320.6 422.3 340.1 M970 137.8 C933.1 234.6 735.5 344.1 434.3 421.7');
  animation-delay: -8.64s;
}
@keyframes gr-fly {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}
/* 不支持 offset-path 的旧浏览器: 隐藏箭头避免堆在左上角 */
@supports not (offset-path: path('M0 0')) {
  .gr-arrow { display: none; }
}
/* 中心 logo: 外圈光晕 + 内圆 + 白色花朵, 百分比尺寸随地球容器等比缩放
   (桌面 63px = 4.375% 容器宽, 移动端同比例缩小) */
.gl-center {
  position: absolute;
  width: 4.375%;               /* 63/1440 */
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  background: rgba(0, 90, 250, .2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gl-center-core {
  width: 81%;                  /* 51/63 */
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  background: #3888FC;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gl-center-core img {
  width: 57%;                  /* 36/63 */
  height: auto;
}
/* 国家标记: 圆形国旗 + 名称 (名称以图标中心为基准居中) */
.gl-country {
  position: absolute;
  width: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;                      /* 图标底 → 名称顶 28-24 = 4px */
}
.gl-flag {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}
.gl-name {
  font-size: 13px;
  font-weight: 513;
  line-height: 20px;
  color: #222426;
  white-space: nowrap;
}

/* 全球触达响应式 */
@media (max-width: 1100px) {
  .global-reach { padding: 80px 0 0; }
  .gr-title { font-size: 32px; line-height: 46px; }
  .gr-map-wrap { margin-top: 40px; }
}
/* 移动端: 地图随视口等比缩小, 全貌可见无需滑动;
   国家名称隐藏只留国旗点, logo/国旗缩小, 箭头动画仍保留 */
@media (max-width: 767px) {
  .global-reach { padding: 56px 0 0; }
  .gr-title { font-size: 24px; line-height: 36px; padding: 0 20px; }
  .gr-map-wrap { margin-top: 28px; }
  .gl-name { display: none; }
  .gl-country { width: 14px; gap: 0; }
  .gl-flag { width: 14px; height: 14px; }
}

.rd {
  background: #1B1C1F;
  padding: clamp(56px, 5.5vw, 100px) 0 0;
}
.rd-inner {
  max-width: 1920px;
  margin: 0 auto;
}
.rd-title {
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 666;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  letter-spacing: -.01em;
  padding: 0 24px;
}
/* 5 等分弹性容器 */
.rd-grid {
  display: flex;
  gap: 0;
  height: clamp(360px, 33.3vw, 640px);
  margin-top: clamp(40px, 4vw, 76px);
}
.rd-card {
  flex: 1 1 0;                   /* 默认 5 等分 */
  min-width: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: var(--rd-base, #9A9A9A);
  cursor: pointer;
  transition: flex-grow .5s var(--ease), flex-basis .5s var(--ease);
}
/* 背景产品图 */
.rd-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
/* 压暗遮罩 (设计稿 #272B34 0→70%) */
.rd-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(39,43,52,0) 0%, rgba(39,43,52,.7) 100%);
  z-index: 1;
}
/* 悬停额外深色遮罩 (#1C1A18 75%) */
.rd-dark {
  position: absolute;
  inset: 0;
  background: rgba(28, 26, 24, .75);
  opacity: 0;
  transition: opacity .4s var(--ease);
  z-index: 1;
}
/* 图标 + 名称 (卡片下部; 悬停上移) */
.rd-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 65px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 2;
  transition: bottom .4s var(--ease);
}
.rd-icon {
  width: 64px;
  height: 64px;
  display: block;
}
.rd-name {
  font-size: 22px;
  font-weight: 513;
  line-height: 28px;
  color: #fff;
  white-space: nowrap;
}
/* 描述 (悬停展开时淡入) */
.rd-desc {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 56%;
  z-index: 2;
  opacity: 0;
  transition: opacity .4s var(--ease);
  text-align: center;
}
.rd-line {
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 auto 20px;
  background: #fff;
  opacity: .85;
}
.rd-desc p {
  font-size: clamp(12px, 0.75vw, 14px);
  font-weight: 489;
  line-height: 1.9;
  color: #fff;
}
/* 悬停交互: 仅 hover 设备生效 */
@media (hover: hover) {
  .rd-card:hover { flex: 0 0 27%; }
  .rd-card:hover .rd-img { transform: scale(1.08); }
  .rd-card:hover .rd-dark { opacity: 1; }
  .rd-card:hover .rd-info { bottom: 50%; }
  .rd-card:hover .rd-desc { opacity: 1; }
}
/* 小屏: 收紧 */
@media (max-width: 900px) {
  .rd-icon { width: 48px; height: 48px; }
  .rd-name { font-size: 18px; line-height: 24px; }
  .rd-info { gap: 8px; }
}
/* 手机 (≤767): 单列堆叠, 全部内容直接显示, 无交互 */
@media (max-width: 767px) {
  .rd { padding: 48px 0 0; }
  .rd-title { font-size: 22px; line-height: 32px; }
  .rd-grid {
    flex-direction: column;
    height: auto;
    gap: 12px;                     /* 卡片间留呼吸感 */
    margin-top: 44px;              /* 标题与卡片拉开层级 */
  }
  .rd-card {
    flex: none;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 32px;
    cursor: default;
  }
  .rd-shade {
    background: linear-gradient(180deg,
      rgba(39,43,52,.78) 0%,
      rgba(39,43,52,.36) 50%,
      rgba(39,43,52,.84) 100%);
  }
  .rd-dark { display: none; }       /* 无悬停, 深色层不需要 */
  .rd-info {
    position: relative;
    z-index: 2;
    gap: 10px;
    bottom: 20px;
  }
  .rd-icon { width: 56px; height: 56px; }
  .rd-name { font-size: 20px; line-height: 26px; }
.rd-desc {
        position: relative;
        z-index: 2;
        opacity: 1;
        display: block;
        margin-top: 22px;
        max-width: 360px;
        text-align: center;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
  .rd-line { margin: 0 auto 14px; }
  .rd-desc p {
    font-size: 14px;
    line-height: 26px;
    color: rgba(255,255,255,.95);  /* 提高对比度 */
  }
}

/* ============================================================
   解决方案 (设计稿「解决方案」#4:601 3446×756 轮播)
   - 3 张卡 1138×640 轮播 (间距16, 左右箭头 + 底部滚动条3段)
   - 餐饮门店卡: 顶部棕色渐变遮罩 + 底部浅棕渐变 + 标题/描述/了解更多
   - 商超零售/酒店物业: 图占位 (设计稿无文案)
   ============================================================ */
.solution {
  position: relative;
  background: #fff;
  padding: 120px 0 20px;
  text-align: center;
  overflow: hidden;
}
.solu-title {
  font-size: 40px;
  font-weight: 666;
  line-height: 60px;
  color: #222426;
  letter-spacing: -.01em;
}
.solu-slider {
  position: relative;
  width: 100%;                   /* 全屏轮播 */
  margin: 60px auto 0;
}
.solu-slide {
  position: relative;
  width: 100%;                   /* 基础: 移动端全宽 */
  aspect-ratio: 1138 / 640;    /* 设计稿卡片比例 */
  height: auto;
  overflow: hidden;
  background: #979797;           /* 设计稿卡片灰底 */
  transition: opacity .5s var(--ease);
}
/* 桌面 (≥768px): 中间卡固定设计稿宽度 1138px, 两侧卡露边 */
@media (min-width: 768px) {
  .solu-slide {
    width: 1138px;               /* 设计稿卡片原始宽度 */
  }
}
/* 轮播: 只突出中间卡, 两侧卡淡化 (居中聚焦效果) */
.solu-slide:not(.swiper-slide-active) {
  opacity: 1;
}
.solu-slide:not(.swiper-slide-active) .solu-body {
  opacity: 0;                    /* 非中间卡不显示文案 */
  transform: translateX(-50%) translateY(24px);  /* 初始下移, 激活时随图片同步淡入上移 */
}
.solu-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 餐饮卡顶部棕色渐变遮罩 (设计稿 #4:606, 0deg 从下到上: 透明→α0.51→实色) */
/*.solu-shade {*/
/*  position: absolute;*/
/*  left: 0;*/
/*  right: 0;*/
/*  top: 0;*/
/*  height: 240px;*/
/*  background: linear-gradient(0deg, rgba(121,76,45,0) 0%, rgba(121,76,45,0.51) 27%, rgba(121,76,45,1) 100%);*/
/*}*/
/* 商超/酒店卡通用深色渐变遮罩 (保证白字可读) */
.solu-shade--dark {
  background: linear-gradient(0deg, rgba(10,14,20,0) 0%, rgba(10,14,20,0.55) 32%, rgba(10,14,20,0.88) 100%);
}
/* 文案区 (设计稿 (318,48) 557×148 居中) */
.solu-body {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 48px;
  width: 557px;
  max-width: 90%;
  text-align: center;
  color: #fff;
  z-index: 2;
  transition: opacity .6s var(--ease), transform .6s var(--ease);  /* 与图片滚动(speed 600ms)完全同步 */
}
.solu-name {
  font-size: 28px;
  font-weight: 666;
  line-height: 40px;
  color: #fff;
}
.solu-desc {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 466;
  line-height: 28px;
  color: #fff;
}
.solu-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 489;
  color: #fff;
  opacity: .9;
  transition: opacity .3s var(--ease);
}
.solu-more:hover { opacity: 1; }
.solu-more svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 左右箭头 (白色 48px, 贴中间卡两侧, 垂直居中) */
.solu-prev,
.solu-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;                 /* 白色箭头 */
  cursor: pointer;
  z-index: 10;
  transition: opacity .3s var(--ease);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); /* 图上可见 */
}
.solu-prev { left: calc(50% - 569px - -20px); }   /* 中间卡 1138px 左侧 */
.solu-next { right: calc(50% - 569px - -20px); }
.solu-prev svg,
.solu-next svg {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.solu-prev:hover,
.solu-next:hover { opacity: .75; }
.solu-prev.swiper-button-disabled,
.solu-next.swiper-button-disabled { opacity: .35; cursor: default; pointer-events: none; }

/* 滚动条 (叠在图片上, 3段 24×2, 居中) */
.solu-progress {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 28px;                /* 叠在卡片图片底部 */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 2px;
  z-index: 10;
}
.solu-bar {
  width: 24px;                 /* 设计稿: 每段 24px 长 */
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .4);  /* 图上可见: 白色半透明 */
  cursor: pointer;
  transition: background .35s var(--ease);
}
.solu-bar.active { background: #fff; }

/* 解决方案响应式 */
@media (max-width: 1100px) {
  .solution { padding: 80px 0 20px; }
  .solu-title { font-size: 32px; line-height: 46px; }
}
@media (max-width: 767px) {
  .solution { padding: 56px 0 20px; }
  .solu-title { font-size: 24px; line-height: 36px; padding: 0 20px; }
  .solu-slider { margin-top: 32px; }
  .solu-slide { aspect-ratio: auto; height: 400px; }
  .solu-body { top: 32px; }
  .solu-name { font-size: 24px; line-height: 34px; }
  .solu-desc { font-size: 14px; line-height: 24px; }
  .solu-prev,
  .solu-next { display: none; }  /* 移动端隐藏箭头, 触摸滑动 */
}

/* ============================================================
   品质服务 (设计稿「品质服务」#4:380 1920×500)
   - 桌面背景图 images/pzfw-bg.png (1920×500, 含商务合照)
   - 移动端背景图 images/mob-pzfw.png (1058×454)
   - 左侧文案: 标题40px + 副标题18px + 电话33px W749 + 了解更多胶囊
   ============================================================ */
.quality {
  position: relative;
  height: 500px;
  overflow: hidden;
}
/* 背景图层 (用户 HTML: img src=images/pzfw-bg.png, 铺满) */
.quality-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* 文案 (设计稿 240,148) */
.quality-body {
  position: absolute;
  left: 12.5%;          /* 240/1920 设计稿: 相对区块宽度, 随屏幕自适应 */
  top: 29.6%;           /* 148/500 设计稿: 相对区块高度 */
  z-index: 2;
}
.quality-title {
  font-size: 40px;
  font-weight: 666;
  line-height: 56px;
  color: #222426;
  letter-spacing: -.01em;
}
.quality-sub {
  margin-top: 16px;              /* 标题底 → 副标题 16px */
  font-size: 18px;
  font-weight: 466;
  line-height: 32px;
  color: #222426;
}
.quality-phone {
  margin-top: 7px;               /* 副标题底 → 电话 7px */
  font-size: 33px;
  font-weight: 749;
  line-height: 56px;
  color: #222426;
  font-family: var(--font-num);
  letter-spacing: -.01em;
}
/* 了解更多描边胶囊 (设计稿 114×36, 描边 #676C73 深字) */
.quality-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 114px;
  height: 36px;
  margin-top: 16px;
  border: 1px solid #676C73;
  border-radius: 1000px;
  font-size: 14px;
  font-weight: 489;
  color: #393C40;
  transition: all .3s var(--ease);
}
.quality-more:hover { border-color: var(--c-primary); color: var(--c-primary); }
.quality-more svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 品质服务响应式 */
@media (max-width: 1100px) {
  .quality-body { left: 8.7%; }
}
@media (max-width: 767px) {
  /* 移动端: 切换 mob-pzfw 背景图, 隐藏桌面背景 img */

  .quality {
    height: auto;
    padding: 56px 24px;
    background: url('../images/mob-pzfw.png') center / cover no-repeat;
  }
  .quality-img { display: none; }
  /* 深色半透明遮罩: 保证文字可读 */
  .quality::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(12, 18, 28, .55);
    z-index: 1;
  }
  .quality-body {
    position: relative;
    left: auto;
    top: auto;
    text-align: center;
    z-index: 2;
  }
  .quality-title { font-size: 28px; line-height: 40px; color: #fff; }
  .quality-sub { font-size: 15px; line-height: 26px; color: rgba(255,255,255,.92); }
  .quality-phone { font-size: 26px; line-height: 40px; color: #fff; }
  .quality-more {
    margin: 16px auto 0;
    border-color: rgba(255, 255, 255, .75);
    color: #fff;
  }
  .quality-more:hover { border-color: #fff; color: #fff; }
}

/* ============================================================
   滚动文字交互动画 (.ani 由 JS 添加, 进入视口播放)
   - 初始: 透明 + 下移 28px
   - 进入视口 (.in-view): 淡入上移, 支持递进 delay
   ============================================================ */
.ani {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
.ani.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* 解决方案卡片文字: 轮播激活时由 .solu-body opacity 过渡控制 (与图片滚动 600ms 同步);
   不再叠加 ani 滚动入场 delay, 保证文字随图片立即显示 */

/* 移动端: 关闭文字滚动交互动画 (文字始终正常显示) */
@media (max-width: 767px) {
  .ani {
    opacity: 1;
    transform: none;
    transition: none;
  }
}