/* 首页专属样式：7 个 sections；通用件（页头/页脚/右悬浮）已抽 common.css */

/* 首页图层区块统一使用阿里普惠体；仅覆盖 hx-* 区块，不改共享页头/页脚及全局 body */
.hx-carousel,
.hx-notice,
.hx-about,
.hx-brand,
.hx-solution,
.hx-tech,
.hx-products,
.hx-strength,
.hx-customers,
.hx-news {
  font-family: 'AlibabaPuHuiTi-3', Inter, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ============ 轮播 hx-carousel（1920 定宽居中裁边 v3：以 HomeCarousel.vue 原案为准） ============ */
/* v2 流式 stage 回退原因：slide inset:0 全幅＋背景 cover center 对称裁，字却锚在流式 stage 固定 left，
   两种收缩基准不一致，窄屏字景脱钩（1400 下漂移 260px）；v3 字景锁死同一 1920 盒，跟旧站一致。
   坐标（组宽 1920，组相对即盒内坐标，无需减 360）：
   组38标题(246,239)/副标题(246,339)/按钮(249,396)，组412标题(242,239)/副标题(241,339)照原样用；
   品牌 slide 盒内居中（717.5+484/2≈960），left:50%+translateX(-50%)，随盒一起对称裁，零脱钩；
   圆点在 section 内 50% 居中（= 盒中心），与背景相对关系恒定。
   裁量验算（每侧 (1920−W)/2）：1600 零裁；1400 裁 260/侧，标题剩 −14（3.5%）、live −18（4.3%）、按钮 −11（5%文案无损）；
   1200 横滚布局视口裁 360/侧，标题裁 114（28%，略超 1/4，已上报，旧站同行为，字景相对位置仍一致）。
   固定高度改 min-height；层叠靠 DOM 顺序，不加 z-index；不加 media；
   hooks（#homeCarousel/.hx-carousel__slide/__dot/is-active/data-link/data-dot）不动，模板/home.js 不动 */
.hx-carousel {
  position: relative;
  width: 100%;
  min-height: 632px;
  overflow: hidden;
}

/* slides 全幅铺满，无圆角；0.6s 淡入淡出 */
.hx-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hx-carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0s;
  pointer-events: auto;
  cursor: pointer;
}

/* 1920 定宽坐标盒：left:50%+translateX(-50%) 居中，section overflow:hidden 对称裁边（跟旧站轮播一致）；
   字与背景锁死在同一 1920 盒：背景 cover center 对称中心 = slide 中心 = 盒中心（居中后重合），
   任何宽度下字景相对位置与 1920 像素级一致；cashier/live 固定 left 是盒内坐标，不动 */
.hx-carousel__stage {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 1920px;
  max-width: none;
  min-height: 632px;
  margin: 0;
}

/* 标题基类：56px/68 行，左对齐不换行；位置颜色按主题 */
.hx-carousel__title {
  position: absolute;
  margin: 0;
  font-size: 56px;
  line-height: 68px;
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}

/* 组38：标题(246,239,405×68) #FFF */
.hx-carousel__slide--cashier .hx-carousel__title {
  left: 246px;
  top: 239px;
  width: 405px;
  min-height: 68px;
  color: #fff;
}

/* 组412：标题(242,239,415×68) #153B78 */
.hx-carousel__slide--live .hx-carousel__title {
  left: 242px;
  top: 239px;
  width: 415px;
  min-height: 68px;
  color: #153b78;
}

/* 品牌 slide：标题(717.5,242,484×63) 52px #FFF 居中（717.5+484/2≈960，即 1920 中心，改 50%+translate 保窄屏仍居中） */
.hx-carousel__slide--brand .hx-carousel__title {
  left: 50%;
  top: 242px;
  transform: translateX(-50%);
  width: 484px;
  min-height: 63px;
  font-size: 52px;
  line-height: 63px;
  letter-spacing: 0.0385em;
  text-align: center;
  color: #fff;
}

/* 副标题基类：25px/30 行，左对齐不换行 */
.hx-carousel__sub {
  position: absolute;
  margin: 0;
  font-size: 25px;
  line-height: 30px;
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}

/* 组38：副标题(246,339,350×30) #FFF */
.hx-carousel__slide--cashier .hx-carousel__sub {
  left: 246px;
  top: 339px;
  width: 350px;
  min-height: 30px;
  color: #fff;
}

/* 组412：副标题(241,339,379×30) #153B78 */
.hx-carousel__slide--live .hx-carousel__sub {
  left: 241px;
  top: 339px;
  width: 379px;
  min-height: 30px;
  color: #153b78;
}

/* 品牌 slide：副标题(683.5,327,553×27) 22px #FFF .9 居中（683.5+553/2≈960，改 50%+translate） */
.hx-carousel__slide--brand .hx-carousel__sub {
  left: 50%;
  top: 327px;
  transform: translateX(-50%);
  width: 553px;
  min-height: 27px;
  font-size: 22px;
  line-height: 27px;
  text-align: center;
  color: #fff;
  opacity: 0.9;
}

/* 按钮：220×52 白底 r26；纯视觉，整张 slide 可点（高改 min-height） */
.hx-carousel__btn {
  position: absolute;
  left: 249px;
  top: 396px;
  width: 220px;
  min-height: 52px;
  border-radius: 26px;
  background: #fff;
  display: block;
}

/* 品牌 slide：按钮(850,380)（850+220/2=960 居中，改 50%+translate） */
.hx-carousel__slide--brand .hx-carousel__btn {
  left: 50%;
  transform: translateX(-50%);
  top: 380px;
}

/* 按钮文案：68×21 17px #2563C8 居中（(220-68)/2，(52-21)/2，高改 min-height） */
.hx-carousel__btn-text {
  position: absolute;
  left: 76px;
  top: 15.5px;
  width: 68px;
  min-height: 21px;
  font-size: 17px;
  line-height: 21px;
  font-weight: 400;
  text-align: center;
  color: #2563c8;
  white-space: nowrap;
}

/* 圆点：底部居中（50%+translate，窄屏仍居中），未激活 8px 半透明白圆，激活 24px 白胶囊；DOM 在 slides 之后自然盖住，不加 z-index */
.hx-carousel__dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.hx-carousel__dot {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: width 0.3s ease, background 0.3s ease;
}

.hx-carousel__dot.is-active {
  width: 24px;
  background: #fff;
}

/* ============================================================
   首页轮播 · 响应式（模块级 v1）
   项目详情页也复用同一轮播；body:has(.hx-brand) 限定只改首页。
   ≥1200：1920 定宽坐标盒不动。
   768–1199：stage 改 100%，文字从绝对坐标改流式；标题 44、副 20。
   <768：标题 32、副 16、按钮 44 高；品牌页居中、其余左对齐。
   ============================================================ */
@media (max-width: 1199px) {
  body:has(.hx-brand) .hx-carousel { min-height: 560px; }
  body:has(.hx-brand) .hx-carousel__stage {
    left: 0;
    transform: none;
    width: 100%;
    max-width: none;
    min-height: 560px;
    margin: 0;
    padding: 96px 48px 48px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
  }
  body:has(.hx-brand) .hx-carousel__title,
  body:has(.hx-brand) .hx-carousel__slide--cashier .hx-carousel__title,
  body:has(.hx-brand) .hx-carousel__slide--live .hx-carousel__title,
  body:has(.hx-brand) .hx-carousel__slide--brand .hx-carousel__title {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: auto;
    min-height: 0;
    font-size: 44px;
    line-height: 56px;
    letter-spacing: 0;
    text-align: left;
    white-space: normal;
  }
  body:has(.hx-brand) .hx-carousel__sub,
  body:has(.hx-brand) .hx-carousel__slide--cashier .hx-carousel__sub,
  body:has(.hx-brand) .hx-carousel__slide--live .hx-carousel__sub,
  body:has(.hx-brand) .hx-carousel__slide--brand .hx-carousel__sub {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: auto;
    min-height: 0;
    margin-top: 12px;
    font-size: 20px;
    line-height: 30px;
    text-align: left;
    white-space: normal;
  }
  body:has(.hx-brand) .hx-carousel__slide--brand .hx-carousel__title,
  body:has(.hx-brand) .hx-carousel__slide--brand .hx-carousel__sub {
    text-align: center;
  }
  body:has(.hx-brand) .hx-carousel__btn,
  body:has(.hx-brand) .hx-carousel__slide--brand .hx-carousel__btn {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: auto;
    min-width: 180px;
    min-height: 48px;
    margin-top: 32px;
    padding: 0 28px;
    box-sizing: border-box;
  }
  body:has(.hx-brand) .hx-carousel__slide--brand .hx-carousel__btn { align-self: center; }
  body:has(.hx-brand) .hx-carousel__btn-text {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    min-height: 0;
    font-size: 16px;
    line-height: 22px;
  }
}

@media (max-width: 767px) {
  body:has(.hx-brand) .hx-carousel,
  body:has(.hx-brand) .hx-carousel__stage { min-height: 500px; }
  body:has(.hx-brand) .hx-carousel__stage { padding: 88px 20px 40px; }
  body:has(.hx-brand) .hx-carousel__title,
  body:has(.hx-brand) .hx-carousel__slide--cashier .hx-carousel__title,
  body:has(.hx-brand) .hx-carousel__slide--live .hx-carousel__title,
  body:has(.hx-brand) .hx-carousel__slide--brand .hx-carousel__title {
    font-size: 32px;
    line-height: 42px;
  }
  body:has(.hx-brand) .hx-carousel__sub,
  body:has(.hx-brand) .hx-carousel__slide--cashier .hx-carousel__sub,
  body:has(.hx-brand) .hx-carousel__slide--live .hx-carousel__sub,
  body:has(.hx-brand) .hx-carousel__slide--brand .hx-carousel__sub {
    font-size: 16px;
    line-height: 24px;
  }
  body:has(.hx-brand) .hx-carousel__btn,
  body:has(.hx-brand) .hx-carousel__slide--brand .hx-carousel__btn {
    min-width: 160px;
    min-height: 44px;
    margin-top: 26px;
  }
  body:has(.hx-brand) .hx-carousel__dots { bottom: 12px; }
}

/* ============ 公告 hx-notice（去图层化 v2：以 HomeNotice.vue 原案为准） ============ */
/* 坐标换算（页面 = Figma x − 158；内容列相对 = 页面 − 360）：
   组40 Figma(158,632,1920×64)全幅条，组相对即页面相对；三段文本改内容列相对
   0/498/937（原 360/858/1297 各减 360，宽 343/283/268 不变），由新增 __content 承接；
   stage 删 1920 定宽改 width:100%+max-width:1920px 居中；固定高度改 min-height；
   左蓝条锚 stage 左缘，用 top:0+bottom:0 拉满（64 下与原 4×64 一致）；
   无 z-index（靠 DOM 顺序）；不加任何 media（<=1200 靠 body 横滚） */
.hx-notice {
  width: 100%;
  min-height: 64px;
  background: #deeaff;
}

.hx-notice__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  min-height: 64px;
  margin: 0 auto;
}

/* 左蓝条：宽 4，拉满 stage 高（原 0,0 4×64，64 下视觉一致） */
.hx-notice__stage::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #2563c8;
}

/* 内容列：宽 1200 居中（替代原 1920 stage 坐标系，三段文本改内容列相对值） */
.hx-notice__content {
  position: relative;
  width: 100%;
  max-width: 1200px;
  min-height: 64px;
  margin: 0 auto;
}

/* 公告文本：y25 h18（高改 min-height），14px #333333；动态标题长度不一，加 ellipsis 还原原案字面 ... 观感 */
.hx-notice__item {
  position: absolute;
  top: 25px;
  min-height: 18px;
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 三段位置（设计 0:519 板内容列相对 0/498/937，宽 343/283/268）——
   写死在组件里，不传参：任何页面都是这三个槽位，数据由各页自己查，长短靠 ellipsis 收。
   为什么不用 flex：343+155+283+156+268 = 1205 已略超内容列 1200，
   设计里本来就不是均分（间隙 155/156 恰好接近但不相等），排版意图是三个固定槽位。 */
.hx-notice__item:nth-child(1) {
  left: 0;
  width: 343px;
}

.hx-notice__item:nth-child(2) {
  left: 498px;
  width: 283px;
}

.hx-notice__item:nth-child(3) {
  left: 937px;
  width: 268px;
}

/* 公告跳转：整条可点进 /news/:id，颜色继承，hover 变蓝 */
.hx-notice__link {
  color: inherit;
  text-decoration: none;
}

.hx-notice__item:hover .hx-notice__link {
  color: #1890ff;
}

/* ============================================================
   公告 · 响应式（模块级 v1）
   首页 <1200 只显示一条，4s 自动切换（home.js）；靠左。
   项目页/品牌站复用同一公告条，保持桌面 3 槽坐标。
   ============================================================ */
@media (max-width: 1199px) {
  body:has(.hx-brand) .hx-notice,
  body:has(.hx-brand) .hx-notice__stage { min-height: 0; }

  body:has(.hx-brand) .hx-notice__content {
    position: relative;
    width: 100%;
    max-width: none;
    min-height: 0;
    height: 38px;
    overflow: hidden;
    padding: 10px 24px 10px 28px;
    box-sizing: border-box;
  }

  body:has(.hx-brand) .hx-notice__content .hx-notice__item {
    position: absolute;
    left: 28px;
    right: 24px;
    top: 10px;
    width: auto;
    min-height: 0;
    font-size: 14px;
    line-height: 18px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
  }
  body:has(.hx-brand) .hx-notice__content .hx-notice__item.is-current {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s;
  }
}

@media (max-width: 767px) {
  body:has(.hx-brand) .hx-notice__content { padding: 10px 16px 10px 20px; }
  body:has(.hx-brand) .hx-notice__content .hx-notice__item {
    left: 20px;
    right: 16px;
    top: 10px;
    font-size: 13px;
    line-height: 18px;
  }
}

/* ============ 介绍 hx-about（语义化 v2：底色上 section；hero 双层原图；正文嵌卡） ============ */
/* 坐标换算（页面相对 = Figma x - 158；内容列相对 = 页面相对 - 360）：
   内容列：Figma x518 宽1200 → 页面 x360 宽1200 → 内容列相对 0，max-width:1200px 居中；
   白卡：Figma x518 宽945 → 页面 x360 → 内容列相对 left:0；
   配图：Figma x948 宽770 → 页面 x790 → 内容列相对 left:430（430+770=1200，图右=内容列右）；
   hero 全幅：原 left:-158px宽2297px 的外扩在 1920 视口下裁掉后可见区等同 stage 100%，故改 width:100% left:0（cover 居中视觉一致）；
   层叠：photo 在 DOM 先、card 在后，card 盖住 photo 左部 515px（945-430）是原本设计，不加 z-index；标题组在 hero 上，z-index:2 保留 */
.hx-about {
  width: 100%;
  min-height: 751px;
  background: #fff;
  scroll-margin-top: 88px;
}

.hx-about__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  min-height: 751px;
  margin: 0 auto;
  overflow: hidden;
}

/* 组外标题：居中（50%+translate，窄屏仍居中），相对模块 y67，34px 白 */
.hx-about__title {
  position: absolute;
  left: 50%;
  top: 67px;
  transform: translateX(-50%);
  margin: 0;
  font-size: 34px;
  font-weight: 400;
  line-height: 41px;
  text-align: center;
  color: #fff;
  white-space: normal;
  z-index: 2;
}

/* 组外副标题：居中，相对模块 y121，17px 白 */
.hx-about__subtitle {
  position: absolute;
  left: 50%;
  top: 121px;
  transform: translateX(-50%);
  margin: 0;
  font-size: 17px;
  line-height: 21px;
  font-weight: 400;
  text-align: center;
  color: #fff;
  white-space: normal;
  z-index: 2;
}

/* hero 双层原图（对标 Nuxt HomeAbout：__bgimg 城市实拍 + __overlay 浅蓝波浪蒙版，波浪在蒙版图自身）；
   容器 100%×513，宽改 100%（原 2297px 外扩裁剪后可见一致） */
.hx-about__hero {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 513px;
  overflow: hidden;
}

.hx-about__hero-bg {
  position: absolute;
  inset: 0;
  background: url('/images/home/about-mask.jpg') center / cover no-repeat;
}

.hx-about__hero-mask {
  position: absolute;
  inset: 0;
  opacity: 0.8;
  background: url('/images/home/about-bg-custom.jpg') center / cover no-repeat;
}

/* 内容列：宽 1200 居中（替代原 group 的 -158/2297 坐标系，卡片/配图改为内容列相对值） */
.hx-about__content {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;
  min-height: 751px;
}

/* 白卡：Figma 518,277 945×378 → 内容列相对 left:0 top:277（高改 min-height 防换行撑破） */
.hx-about__card {
  position: absolute;
  left: 0;
  top: 277px;
  width: 945px;
  min-height: 378px;
  box-sizing: border-box;
  padding: 89px 54px 89px 64px;
  background: rgba(255, 255, 255, 0.92);
}

/* 正文嵌卡：20px/50px #000，内容宽 827（945-64-54）自然撑满；
   pre-line 保留原因：原文案靠源码换行分 4 行（50px 行高 ×4 + 上下 padding 89×2 = 378），去不掉 */
.hx-about__text {
  margin: 0;
  font-size: 20px;
  line-height: 50px;
  font-weight: 400;
  color: #000;
  white-space: pre-line;
}

/* 公司建筑照：Figma 948,208 770×511 r20 → 内容列相对 left:430 top:208（装饰层，保留 absolute；DOM 在卡前，卡盖住其左部 515px） */
.hx-about__photo-side {
  position: absolute;
  left: 430px;
  top: 208px;
  width: 770px;
  height: 511px;
  border-radius: 20px;
  overflow: hidden;
  background: url('/images/home/about-3-878.jpg') center / cover no-repeat;
}

/* ============================================================
   公司介绍 · 响应式（模块级 v1）
   1024/768：紧凑桌面——城市 hero 保留，白卡限宽居中；
             右侧楼宇照片保留：照片垫在卡片右侧，卡片的白色渐变
             在右段淡出，把照片露出来（与桌面「卡压照片」同一意图）。
   <768：单列，照片隐藏，正文自然换行。
   ≥1200：以上桌面规则一行不动。
   注意：/about 也复用这个模块，用 body:has(.hx-brand) 限定只改首页实例。
   ============================================================ */
@media (max-width: 1199px) {
  body:has(.hx-brand) { min-width: 0; }

  body:has(.hx-brand) .hx-about,
  body:has(.hx-brand) .hx-about__stage { min-height: 0; }

  body:has(.hx-brand) .hx-about__hero { height: 400px; }
  body:has(.hx-brand) .hx-about__title { top: 60px; }
  body:has(.hx-brand) .hx-about__subtitle { top: 110px; }

  body:has(.hx-brand) .hx-about__content {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: auto;
    max-width: 960px;
    min-height: 0;
    margin: 0 auto;
    padding: 216px 24px 48px;
    box-sizing: border-box;
  }

  body:has(.hx-brand) .hx-about__card {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    min-height: 0;
    padding: 56px 48px;
    padding-right: 30%;
    border-radius: 14px;
    background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.94) 72%,
      rgba(255, 255, 255, 0) 100%);
    z-index: 1;
  }

  /* 楼宇照片：与卡片同高，站在内容列右侧；卡片的透明右段把它露出来 */
  body:has(.hx-brand) .hx-about__photo-side {
    left: auto;
    top: 216px;
    right: 24px;
    bottom: 48px;
    width: 30%;
    height: auto;
    border-radius: 0 14px 14px 0;
    z-index: 0;
  }

  body:has(.hx-brand) .hx-about__text {
    font-size: 17px;
    line-height: 34px;
    /* 桌面靠源码硬换行排出 4 行；窄屏列宽变了，硬换行会出现“技术服务业”这种孤行，改为自然流 */
    white-space: normal;
    /* 自然流会把源码换行折叠成一个空格，中文里会出现两处可见空隙；负词距刚好抵消 */
    word-spacing: -0.25em;
  }
}

@media (max-width: 767px) {
  body:has(.hx-brand) .hx-about__hero { height: 280px; }
  body:has(.hx-brand) .hx-about__title { top: 46px; font-size: 26px; line-height: 34px; }
  body:has(.hx-brand) .hx-about__subtitle { top: 86px; font-size: 14px; line-height: 20px; }

  body:has(.hx-brand) .hx-about__content { padding: 150px 16px 36px; }

  body:has(.hx-brand) .hx-about__card {
    padding: 24px 20px;
    background: rgba(255, 255, 255, 0.92);
  }

  body:has(.hx-brand) .hx-about__photo-side { display: none; }

  body:has(.hx-brand) .hx-about__text {
    font-size: 15px;
    line-height: 26px;
    white-space: normal;
  }
}

/* 旧站策略：>1200 白边先缩、内容 1200 居中；<=1200 无断点，靠 body{min-width:1200px} 横滚保 1:1 */

/* ============ 产品 hx-products（流式 v3 方案B：以 HomeProducts.vue 原案坐标为准） ============ */
/* v2 病根：content(absolute)里全 absolute，模块高全靠 min-height:2806 硬撑；cases top:1951 写死，
   筛选剩 4 张时空 800px 白洞。v3 文档流自上而下：标题→副标题→筛选条→横幅→卡片区 grid→cases 自然跟随。
   高度账：内容实体 2707＋顶 35＋底 64 ＝ 2806 ✓满员 1:1（99 系上下合计 35+64，非全给 bottom）；
   bg-hero/mask 保留 top:1724（bottom:0 ⟺ top:1999，差 275px 错位）；模块/stage 保留 min-height:2806 保底；
   筛选后内容变矮，cases 紧跟 grid（margin-top:63），stage 靠 min-height 保底，无白洞。
   层叠靠 DOM 顺序，不加 z-index；不加任何 media（<=1200 靠 body 横滚） */
.hx-products {
  position: relative;
  width: 100%;
  min-height: 2806px;
  margin: 0 auto;
  font-family: 'AlibabaPuHuiTi-3', Inter, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 全幅 stage：100%+max-width:1920px 居中（bg 绝对层定位祖先，min-height 保底，JS 按内容实高覆盖）；
   overflow:hidden clamp 绝对背景，防止筛选后极端高度下背景溢出压到下一模块 */
.hx-products__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  min-height: 2806px;
  margin: 0 auto;
  overflow: hidden;
}

/* a75b1f67 背景（选 B 盒定宽）：盒 1920×1724 cover 同图，1920 下与改前逐像素同；
   窄屏盒 1920 居中（left:50%+translate），靠 stage overflow:hidden 对称裁边，图案不缩小；
   top:0/height 不动，JS 不碰此层 */
.hx-products__bg-a75b1f67 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1920px;
  height: 1724px;
  background: url('/images/home/product-bg-a75b1f67.webp') center / cover no-repeat;
}

/* 飞机背景（选 B 盒定宽）：图 4032×2688，1920 下 cover 实渲染 1920×1280，盒定宽后 cover 语义保留、
   1920 下逐像素一致；只改宽定位，top 由 home.js 按 H−1082 驱动（top 与 left 正交，基准 stage 不变），不动 JS */
.hx-products__bg-hero {
  position: absolute;
  top: 1724px;
  left: 50%;
  transform: translateX(-50%);
  width: 1920px;
  height: 807px;
  background: url('/images/home/product-bg-hero.jpg') center / cover no-repeat;
}

/* 飞机背景蓝色叠加：rgba(95,152,243,.4)，纯色层跟飞机层同宽（1920 居中），top 同由 JS 驱动 */
.hx-products__bg-hero-mask {
  position: absolute;
  top: 1724px;
  left: 50%;
  transform: translateX(-50%);
  width: 1920px;
  height: 807px;
  background: rgba(95, 152, 243, 0.4);
}

/* 内容列：正常流，宽 1200 居中，padding-top:35（原 top:35）＋padding-bottom:64（原底白边）；
   position:relative（无偏移无 z-index，不脱离文档流）：三背景是 absolute 定位层，static 内容会被盖住，
   relative 把内容抬到定位层，靠 DOM 顺序（背景先、内容后）压住背景 */
.hx-products__content {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 35px 0 64px;
}

/* 标题：流式居中（原中心 601≈600），34px #1A2332 */
.hx-products__title {
  margin: 0;
  font-size: 34px;
  line-height: 41px;
  font-weight: 400;
  color: #1a2332;
  text-align: center;
  white-space: nowrap;
}

/* 副标题：流式居中，margin-top:13（54−41），17px #888888 */
.hx-products__subtitle {
  margin: 13px 0 0;
  font-size: 17px;
  line-height: 21px;
  font-weight: 400;
  color: #888888;
  text-align: center;
  white-space: nowrap;
}

/* 筛选条：flex 横排，margin-top:66（141−54−21），高 74，垂直居中即原 top:20/19/28 */
.hx-products__filter {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 74px;
  margin: 66px 0 0;
  padding: 0 42px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.hx-products__filter-label {
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: #333333;
  white-space: nowrap;
}

/* 按用途组推右齐（原右缘 1155.92＋右 pad 42，auto margin 恰好右齐） */
.hx-products__filter-label--use {
  margin-left: auto;
}

.hx-products__pill {
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 17px;
  background: #f5f5f5;
  font-size: 14px;
  line-height: 34px;
  font-weight: 400;
  color: #666666;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

.hx-products__pill.is-active {
  background: #2563c8;
  color: #fff;
}

/* 横幅：流式块，margin-top:32（247−141−74），1200×458（内部 absolute 不动，需 relative 定位上下文） */
/* 横幅底图水印裁切：图 3488×1280，水印右下约 x3250+/y1180+；盒 1200×458 固定（body 横滚锁 1200，一次算死）。
   原 center/cover：scale=max(1200/3488,458/1280)=0.358，渲染 1248×458，可视 x67..3421 → 水印漏入。
   现手写 1395px 512px（scale 0.40，+11.8%）＋left center：可视 x0..1200/0.4=0..3000，
   右缘 3000＜3200（距水印 250px 余量），纵 center 裁后 y67..1213；左缘多露 0..67，主体（手机/骑手/建筑）保留；
   文案系 HTML 覆盖层（左 x56 起），只动背景，文字零影响 */
.hx-products__hero {
  position: relative;
  margin: 32px 0 0;
  width: 1200px;
  height: 458px;
  border-radius: 14px;
  overflow: hidden;
  background: url('/images/home/prod-banner-77968c.webp') left center / cover no-repeat;
  background-size: 108% auto;
}

.hx-products__hero-title {
  position: absolute;
  left: 55.92px;
  top: 112px;
  width: 428px;
  height: 73px;
  margin: 0;
  font-size: 60px;
  line-height: 73px;
  font-weight: 400;
  color: #1a1a2e;
  white-space: nowrap;
}

.hx-products__hero-desc {
  position: absolute;
  left: 55.92px;
  top: 208px;
  width: 303px;
  height: 24px;
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  color: #1890ff;
  white-space: nowrap;
}

.hx-products__hero-platform {
  position: absolute;
  left: 55.92px;
  top: 251px;
  width: 214px;
  height: 22px;
  margin: 0;
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
  color: #1a1a2e;
  white-space: nowrap;
}

.hx-products__hero-btn {
  position: absolute;
  left: 55.92px;
  top: 291px;
  width: 187px;
  height: 61px;
  border-radius: 32px;
  background: #fff;
  text-decoration: none;
  display: block;
}

.hx-products__hero-btn-text {
  position: absolute;
  left: 40px;
  top: 19px;
  width: 108px;
  height: 22px;
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
  color: #1890ff;
  text-align: center;
  white-space: nowrap;
}

/* 卡片区 grid：4 列×284px，列间距 21px（305−284），行间距 25px（1129−737−367），
   4×284+3×21=1199 居中；margin-top:32（737−247−458）；筛选 display:none 后自动重排，cases 紧跟 */
.hx-products__grid {
  display: grid;
  grid-template-columns: repeat(4, 284px);
  column-gap: 21px;
  row-gap: 25px;
  justify-content: center;
  margin: 32px 0 0;
}

.hx-products__card {
  position: relative;
  width: 284px;
  height: 367px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hx-products__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(37, 99, 200, 0.25);
}

.hx-products__card-icon {
  position: absolute;
  left: 114px;
  top: 48px;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(37, 99, 200, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hx-products__card-icon img {
  display: block;
  object-fit: contain;
}

.hx-products__card-title {
  position: absolute;
  top: 121px;
  height: 22px;
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
  color: #1a2332;
  white-space: nowrap;
}

.hx-products__card-desc {
  position: absolute;
  top: 178px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #888888;
  text-align: center;
  white-space: nowrap;
}

.hx-products__card-line {
  position: absolute;
  left: 53px;
  top: 161px;
  width: 178px;
  height: 1px;
  background: #2563c8;
}

.hx-products__card-support {
  position: absolute;
  left: 114px;
  top: 222px;
  height: 17px;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: #2563c8;
  white-space: nowrap;
}

.hx-products__card-tag {
  position: absolute;
  top: 257px;
  width: 46px;
  height: 24px;
  border-radius: 4px;
  background: #ebf3ff;
  font-size: 11px;
  line-height: 24px;
  font-weight: 400;
  color: #2563c8;
  text-align: center;
  white-space: nowrap;
}

.hx-products__card-btn {
  position: absolute;
  top: 297px;
  width: 110px;
  height: 38px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 38px;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  padding: 0;
}

.hx-products__card-btn--ghost {
  left: 25px;
  background: #fff;
  border: 1.5px solid #2563c8;
  color: #2563c8;
  box-sizing: border-box;
}

.hx-products__card-btn--solid {
  left: 149px;
  background: #2563c8;
  border: 1.5px solid #2563c8;
  color: #fff;
  box-sizing: border-box;
}

/* 案例卡容器：流式 flex，margin-top:63（1951−737−1151，紧跟卡区，无白洞），gap:11px（原缝 11/11） */
.hx-products__cases {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 63px 0 0;
}

.hx-cases__card {
  position: relative;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  overflow: hidden;
}

/* 中卡：450×756（DOM 顺序左/中/右即 flex 顺序，left 定位删除） */
.hx-cases__card--center {
  width: 450px;
  height: 756px;
}

/* 左卡：364×611，top:73 改 margin-top:73 */
.hx-cases__card--left {
  margin-top: 73px;
  width: 364px;
  height: 611px;
}

/* 右卡：364×611，同上 */
.hx-cases__card--right {
  margin-top: 73px;
  width: 364px;
  height: 611px;
}

/* 案例图水印裁切（包 div 真裁版）：图均为 2240×1888，水印右下约 x2050+/y1800+；
   病根修正：img scale(1.08) 后视觉 373.7 向下 spill 进正文区（body 顶 346/280），卡片 overflow:hidden
   只管卡外边，不管 img 框边——此前“卡 overflow 兜住”假设作废；现 imgbox 定尺寸＋overflow:hidden 真裁。
   可视窗口验算保持成立：中 y83..1677、侧 y82..1678，水印出局；origin 50% 0 以上缘为轴，头顶对齐不变。
   圆角从 img 搬到盒上（避免双圆角）；img 改 width/height:100%＋cover 填盒再整体 scale */
.hx-cases__imgbox {
  overflow: hidden;
  border-radius: 14px 14px 0 0;
}

.hx-cases__imgbox--center {
  width: 450px;
  height: 346px;
}

.hx-cases__imgbox--side {
  width: 364px;
  height: 280px;
}

.hx-cases__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transform-origin: 50% 0;
}

.hx-cases__body {
  position: relative;
}

.hx-cases__body--center {
  height: 410px;
}

.hx-cases__body--side {
  height: 331px;
}

/* 标题 #2A25BF，Regular 400 */
.hx-cases__title {
  position: absolute;
  margin: 0;
  color: #2a25bf;
  font-weight: 400;
}

.hx-cases__title--center {
  top: 43px;
  left: 40px;
  width: 224px;
  height: 39px;
  font-size: 32px;
  line-height: 39px;
  white-space: nowrap;
}

.hx-cases__title--side {
  top: 35px;
  left: 32px;
  width: 74px;
  height: 30px;
  font-size: 25px;
  line-height: 30px;
  white-space: nowrap;
}

.hx-cases__title--robot {
  width: 175px;
}

.hx-cases__bar {
  position: absolute;
  background: #8699f8;
  border-radius: 12px;
}

.hx-cases__bar--center {
  top: 93px;
  left: 40px;
  width: 224px;
  height: 8px;
}

.hx-cases__bar--side {
  top: 76px;
  left: 32px;
  width: 73px;
  height: 6px;
}

.hx-cases__bar--robot {
  width: 175px;
}

.hx-cases__text {
  position: absolute;
  margin: 0;
  color: #666666;
  white-space: pre-line;
}

.hx-cases__text--center {
  top: 129px;
  left: 40px;
  width: 360px;
  height: 200px;
  font-size: 24px;
  line-height: 40px;
}

.hx-cases__text--side {
  top: 103px;
  left: 32px;
  width: 285px;
  height: 128px;
  font-size: 19px;
  line-height: 32px;
}

/* ============ 资质 hx-strength（去图层化 v2：以 HomeStrength.vue 原案为准） ============ */
/* 坐标换算（页面 = Figma x − 158；内容列相对 = 页面 − 360）：
   组206(@x158,1920×678)，组相对即页面相对；描边卡(360,36)→内容列(0,36) /
   中图(619,59)→(259,59) / 四宫格(1001,63)→(641,63，641+559=1200 格右齐内容列右）；
   中图压卡右缘 25px 是原案设计，DOM 顺序 card→hero→grid 保持覆盖，不加 z-index；
   stage 删 1920 定宽改 width:100%+max-width:1920px 居中，新增 __content（1200 居中）承接卡/图/格；
   固定高度改 min-height；不加任何 media（<=1200 靠 body 横滚） */
/* 实力底（选 A 尺寸锁死）：图 4032×2688，1920 下 cover 实渲染 1920×1280（scale 0.476），
   手写 1920px auto 即 1920×1280，position center 同，中央 678 显示区逐像素一致；
   窄屏背景 1920 定宽相对 section（W）center，超 border-box 部分不绘制 = 纯裁边，图案元素不缩小；
   不动模板（背景仍画 section 上） */
.hx-strength {
  width: 100%;
  min-height: 678px;
  background: url('/images/home/strength-bg.jpg') center / 1920px auto no-repeat;
}

.hx-strength__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  min-height: 678px;
  margin: 0 auto;
}

/* 内容列：宽 1200 居中（替代原 1920 stage 坐标系，卡/图/格改内容列相对值） */
.hx-strength__content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 100%;
  max-width: 1200px;
  min-height: 678px;
}

/* 左侧描边卡：内容列相对(0,36) 284×606，10px 描边（高改 min-height） */
.hx-strength__card {
  position: absolute;
  left: 0;
  top: 36px;
  width: 284px;
  min-height: 606px;
  background: transparent;
  border: 10px solid #2563c8;
  border-radius: 14px;
  box-sizing: border-box;
}

/* 卡内竖条：x400 y236 10×64 */
.hx-strength__card-bar {
  position: absolute;
  left: 30px;
  top: 190px;
  width: 10px;
  height: 64px;
  background: #2563c8;
}

/* 「资质 / 与实力」40px/50px #000 */
.hx-strength__card-title {
  position: absolute;
  left: 64px;
  top: 182px;
  width: 120px;
  height: 100px;
  margin: 0;
  font-size: 40px;
  line-height: 50px;
  font-weight: 400;
  color: #000;
  white-space: pre-line;
}

/* 「十年深耕 / 值得信赖的合作伙伴」16px/24px #888 */
.hx-strength__card-desc {
  position: absolute;
  left: 30px;
  top: 365px;
  width: 144px;
  height: 48px;
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: #888;
  white-space: pre-line;
}

/* 中图：内容列相对(259,59) 338×560 r14（压卡右缘 25px 是原案设计，DOM 在卡后自然盖住） */
.hx-strength__hero {
  position: absolute;
  left: 259px;
  top: 59px;
  width: 338px;
  height: 560px;
  border-radius: 14px;
  overflow: hidden;
  background: url('/images/home/hero-3-1017.jpg') center / cover no-repeat;
}

/* 右侧四宫格容器：内容列相对(641,63) 559×560，格间距15 */
.hx-strength__grid {
  position: absolute;
  left: 641px;
  top: 63px;
  width: 559px;
  height: 560px;
}

.hx-strength__cell {
  position: absolute;
  width: 272px;
  height: 272px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hx-strength__cell:hover {
  transform: translateY(-6px);
}

.hx-strength__cell--1 {
  left: 0;
  top: 0;
}

.hx-strength__cell--2 {
  left: 287px;
  top: 0;
}

.hx-strength__cell--3 {
  left: 0;
  top: 288px;
}

.hx-strength__cell--4 {
  left: 287px;
  top: 288px;
}

/* 格内上图：272×173，上圆角14 */
.hx-strength__cell-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 272px;
  height: 173px;
  border-radius: 14px 14px 0 0;
  background: url('/images/home/strength-cell.jpg') center / cover no-repeat;
}

/* 格内下条：272×99，下圆角14，180deg 渐变 */
.hx-strength__cell-band {
  position: absolute;
  left: 0;
  top: 173px;
  width: 272px;
  height: 99px;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #266cde, #1d55af);
}

/* 图标：相对格精确坐标 */
.hx-strength__cell-icon {
  position: absolute;
  object-fit: contain;
  user-select: none;
}

/* 格内文字：20px/24px 白 */
.hx-strength__cell-text {
  position: absolute;
  top: 211px;
  height: 24px;
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

.hx-strength__cell--1 .hx-strength__cell-text {
  left: 47px;
  width: 180px;
}

.hx-strength__cell--2 .hx-strength__cell-text {
  left: 77px;
  width: 120px;
}

.hx-strength__cell--3 .hx-strength__cell-text {
  left: 57px;
  width: 160px;
}

.hx-strength__cell--4 .hx-strength__cell-text {
  left: 38px;
  width: 200px;
}

/* ============================================================
   资质与实力 · 响应式（模块级 v1）
   ≥1200：桌面 1200 坐标，不动。
   768–1199：左列「描边卡 + 中图」竖排，右侧 2×2 宫格；
             内容列限宽 960，宫格随宽度等比收缩。
   <768：横排描边卡 → 200 高中图 → 2×2 宫格。
   ============================================================ */
@media (max-width: 1199px) {
  .hx-strength {
    min-height: 0;
    background-size: cover;
    background-position: center;
  }
  .hx-strength__stage { min-height: 0; }

  .hx-strength__content {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: auto;
    max-width: 960px;
    min-height: 0;
    margin: 0 auto;
    padding: 40px 24px 48px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "card grid"
      "hero grid";
    gap: 20px 24px;
  }

  .hx-strength__card {
    position: relative;
    left: auto;
    top: auto;
    grid-area: card;
    width: auto;
    min-height: 0;
    padding: 24px;
    border-width: 6px;
  }
  .hx-strength__card-bar { display: none; }
  .hx-strength__card-title {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    font-size: 28px;
    line-height: 38px;
    white-space: pre-line;
  }
  .hx-strength__card-desc {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    margin-top: 8px;
    white-space: pre-line;
  }

  .hx-strength__hero {
    position: static;
    left: auto;
    top: auto;
    grid-area: hero;
    width: 100%;
    height: 100%;
    min-height: 200px;
  }

  .hx-strength__grid {
    position: static;
    left: auto;
    top: auto;
    grid-area: grid;
    width: auto;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .hx-strength__cell,
  .hx-strength__cell--1,
  .hx-strength__cell--2,
  .hx-strength__cell--3,
  .hx-strength__cell--4 {
    position: relative;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    aspect-ratio: 1;
  }
  .hx-strength__cell-img { width: 100%; height: 62%; }
  .hx-strength__cell-band { top: 62%; width: 100%; height: 38%; }
  .hx-strength__cell-icon {
    left: 50% !important;
    top: 26px !important;
    width: 30% !important;
    height: auto !important;
    transform: translateX(-50%);
  }
  .hx-strength__cell-text {
    left: 0 !important;
    width: 100% !important;
    top: auto;
    bottom: 10px;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    white-space: normal;
  }
}

@media (max-width: 767px) {
  .hx-strength__content { padding: 28px 16px 36px; display: block; }
  .hx-strength__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
    padding: 18px 20px;
  }
  .hx-strength__card-title { font-size: 24px; line-height: 34px; }
  .hx-strength__card-desc { margin-top: 0; font-size: 14px; line-height: 20px; }
  .hx-strength__hero { height: 200px; min-height: 0; margin-bottom: 16px; }
  .hx-strength__grid { gap: 10px; }
  .hx-strength__cell-icon {
    top: 20px !important;
    width: 30% !important;
    height: auto !important;
  }
  .hx-strength__cell-text { bottom: 8px; font-size: 13px; line-height: 18px; }
}

/* 1024–1199：宫格更大，文字跟着上一档 */
@media (min-width: 1024px) and (max-width: 1199px) {
  .hx-strength__cell-text { font-size: 18px; }
}

/* ============ 客户 hx-customers（去图层化 v2：以 HomeCustomers.vue 原案为准） ============ */
/* 坐标换算（页面 = Figma x − 158；内容列相对 = 页面 − 360）：
   组207 Figma(518,4964,1200×561) → 页面(360,35) → 内容列相对(0,0)，卡片/圆环已是内容列相对坐标，
   照原样用（列 475/726/977，977+223=1200 右齐；行 154/261/368/475，475+73=548≤561）；
   本模块无 1920 全幅背景/装饰，section 本身 width:100% 即全幅包裹，不新增 stage；
   __content 已是宽 1200 margin-auto 居中（margin-top:35 即模块内 y35）；
   标题中心 597.56≈600、副标题中心 596.56≈600，改 left:50%+translateX(-50%) 保窄屏仍居中；
   固定高度改 min-height；层叠靠 DOM 顺序，无 z-index；不加任何 media（<=1200 靠 body 横滚） */
.hx-customers {
  width: 100%;
  min-height: 660px;
}

/* 内容列：y35，1200×561 居中（margin-top:35 即相对模块 y35） */
.hx-customers__content {
  position: relative;
  width: 1200px;
  min-height: 561px;
  margin: 35px auto 0;
}

/* 标题：34px #1A2332（512.56+170/2≈600 居中，改 50%+translate） */
.hx-customers__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 170px;
  height: 41px;
  margin: 0;
  font-size: 34px;
  font-weight: 400;
  line-height: 41px;
  text-align: center;
  color: #1a2332;
}

/* 副标题：17px #888888（520.06+153/2≈600 居中，改 50%+translate） */
.hx-customers__subtitle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 54px;
  width: 153px;
  height: 21px;
  margin: 0;
  font-size: 17px;
  line-height: 21px;
  text-align: center;
  color: #888;
}

/* 大圆：420×420，外阴影 */
.hx-customers__circle {
  position: absolute;
  left: 0;
  top: 141px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: url('/images/home/customer-circle.jpg') center / cover no-repeat;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

/* 内圆：119×119 白，内阴影；正中心（验算 (420−119)/2=150.5 两轴，原案 left:149.83/top:119 y 上偏 31.5px，
   用户已确认取正中心；用 50%+translate 两轴天然精确，与标题居中手法统一） */
.hx-customers__circle-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 119px;
  height: 119px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.16);
}

/* 列容器：absolute 定位三列（x=475/726/977，977+223=1200 右齐），top:154；
   列高 4×73+3×34=394，154+394=548≤561 与原底一致 */
.hx-customers__col {
  position: absolute;
  top: 154px;
  width: 223px;
}

.hx-customers__col--1 {
  left: 475px;
}

.hx-customers__col--2 {
  left: 726px;
}

.hx-customers__col--3 {
  left: 977px;
}

/* 卡：列内正常流（relative 保 logo/卡名定位上下文），首张 top:0，其余 margin-top:34（261−154−73）；
   白 r14，阴影；hover 上浮 */
.hx-customers__card {
  position: relative;
  width: 223px;
  height: 73px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hx-customers__card + .hx-customers__card {
  margin-top: 34px;
}

.hx-customers__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(37, 99, 200, 0.22);
}

/* logo：48×48 r34，坐标相对卡 */
.hx-customers__card-logo {
  position: absolute;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 34px;
}

/* 卡名：18px/22px #000 居中，坐标相对卡 */
.hx-customers__card-name {
  position: absolute;
  margin: 0;
  font-size: 18px;
  line-height: 22px;
  color: #000;
  text-align: center;
  overflow: hidden;
}

.hx-customers__card--double .hx-customers__card-name {
  white-space: pre-line;
}

/* ============================================================
   我们的客户 · 响应式（模块级 v1）
   ≥1200：桌面 1200 坐标（圆环 + 三列 4 行），不动。
   768–1199：隐藏装饰圆环，12 张卡改成 4/3 列网格（1024 四列、768 三列）。
   <768：两列，卡内 logo/名字坐标重排，长名字自然换行。
   ============================================================ */
@media (max-width: 1199px) {
  .hx-customers { min-height: 0; }

  .hx-customers__content {
    width: auto;
    max-width: 960px;
    min-height: 0;
    margin: 0 auto;
    padding: 40px 24px 48px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    column-gap: 20px;
    row-gap: 12px;
  }

  .hx-customers__title,
  .hx-customers__subtitle {
    position: static;
    left: auto;
    transform: none;
    grid-column: 1 / -1;
    width: auto;
    height: auto;
    margin: 0;
    text-align: center;
  }
  .hx-customers__subtitle { margin-top: -4px; }
  .hx-customers__circle { display: none; }

  .hx-customers__col {
    display: contents;
  }
  .hx-customers__card {
    width: auto;
    height: 73px;
    margin-top: 0;
  }
  .hx-customers__card + .hx-customers__card { margin-top: 0; }
}

@media (max-width: 767px) {
  .hx-customers__content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    padding: 32px 16px 40px;
  }
  .hx-customers__title { font-size: 26px; line-height: 36px; }
  .hx-customers__subtitle { font-size: 14px; line-height: 20px; }

  .hx-customers__card-logo {
    left: 16px !important;
    top: 16px !important;
    width: 40px;
    height: 40px;
  }
  .hx-customers__card-name {
    left: 64px !important;
    top: 25px !important;
    width: auto !important;
    height: auto !important;
    font-size: 15px;
    line-height: 18px;
    text-align: left;
  }
  .hx-customers__card--double .hx-customers__card-name {
    top: 16px !important;
    line-height: 18px;
  }
}

/* ============ 新闻 hx-news（去图层化 v2：以 HomeNews.vue 原案为准） ============ */
/* 坐标换算（页面 = Figma x − 158；内容列相对 = 页面 − 360）：
   组外标题 Figma(1050,5624)→页面(892,35)，中心 892+136/2=960（1920 中心）；
   组外副标题 Figma(1033,5678)→页面(875,89)，中心 875+170/2=960；
   两者改 left:50%+translateX(-50%) 保窄屏仍居中；
   组213 Figma(518,5765,1200×584)→页面(360,176)：1920 下 (1920−1200)/2=360 与原 left:360px 一致，
   改 left:50%+translate＋width:100%+max-width:1200px（窄屏仍居中，横滚布局 1200 下 left:0 保 1:1）；
   组内 hero/小卡已是内容列相对，照原样用；section/stage/group 高改 min-height，stage 删 1920 定宽；
   层叠靠 DOM 顺序（bg 先、stage 后），不加 z-index；不加任何 media（<=1200 靠 body 横滚） */
.hx-news {
  position: relative;
  width: 100%;
  min-height: 856px;
}

/* 背景图片：页面(0,0) 1920×436 全幅（选 A 尺寸锁死）：图 1920×600，1920 下 cover 实渲染即 1920×600
   （scale 1），手写 1920px auto 逐像素一致，中央 436 显示区同；盒仍 left:0/width:100% 跟视口，
   窄屏背景 1920 定宽 center，超盒部分不绘制 = 纯裁边 */
.hx-news__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 436px;
  background: url('/images/home/section-bg-10276.jpg') center / 1920px auto no-repeat;
}

/* 全幅 stage：100%+max-width:1920px 居中（替代原 1920 定宽坐标框） */
.hx-news__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  min-height: 856px;
  margin: 0 auto;
}

/* 组外标题：y35，34px #1A2332（892+136/2=960 居中，改 50%+translate） */
.hx-news__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 35px;
  width: 136px;
  height: 41px;
  margin: 0;
  font-size: 34px;
  font-weight: 400;
  line-height: 41px;
  text-align: center;
  color: #1a2332;
}

/* 组外副标题：y89，17px #888888（875+170/2=960 居中，改 50%+translate） */
.hx-news__subtitle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 89px;
  width: 170px;
  height: 21px;
  margin: 0;
  font-size: 17px;
  line-height: 21px;
  text-align: center;
  color: #888;
}

/* 组213容器：y176，1200×584 居中（1920 下居中 left=(1920−1200)/2=360 与原值一致，高改 min-height） */
.hx-news__group {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 176px;
  width: 100%;
  max-width: 1200px;
  min-height: 584px;
}

/* 大图卡底图：0,0 686×584 r12 */
.hx-news__hero {
  position: absolute;
  left: 0;
  top: 0;
  width: 686px;
  height: 584px;
  border-radius: 12px;
  overflow: hidden;
  background: url('/images/home/news-main.webp') center / cover no-repeat;
}

/* 大图下白条：0,367 686×217，下圆角12 */
.hx-news__hero-mask {
  position: absolute;
  left: 0;
  top: 367px;
  width: 686px;
  height: 217px;
  border-radius: 0 0 12px 12px;
  background: rgba(255, 255, 255, 0.8);
}

/* 蓝徽章：40,395 183×58 r12 */
.hx-news__hero-badge {
  position: absolute;
  left: 40px;
  top: 395px;
  width: 183px;
  height: 58px;
  border-radius: 12px;
  background: #2563c8;
  font-size: 24px;
  line-height: 58px;
  text-align: center;
  color: #fff;
}

/* 大标题：40,472 28px #1A2332 */
.hx-news__hero-title {
  position: absolute;
  left: 40px;
  top: 472px;
  width: 448px;
  height: 34px;
  margin: 0;
  font-size: 28px;
  line-height: 34px;
  color: #1a2332;
  white-space: nowrap;
}

/* 日期：40,527 24px #AAAAAA */
.hx-news__hero-date {
  position: absolute;
  left: 40px;
  top: 527px;
  width: 136px;
  height: 29px;
  margin: 0;
  font-size: 24px;
  line-height: 29px;
  color: #aaa;
}

/* 右侧卡：x712 488×184 白 r12 阴影；hover 上浮 */
.hx-news__card {
  position: absolute;
  left: 712px;
  width: 488px;
  height: 184px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hx-news__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(37, 99, 200, 0.22);
}

.hx-news__card--1 {
  top: 0;
}

.hx-news__card--2 {
  top: 200px;
}

.hx-news__card--3 {
  top: 400px;
}

/* 卡左侧条：0,0 23×184，左圆角12 */
.hx-news__card-side {
  position: absolute;
  left: 0;
  top: 0;
  width: 23px;
  height: 184px;
  border-radius: 12px 0 0 12px;
  background: #247cf1;
}

/* 图标占位：39,24 130×44 */
.hx-news__card-icon {
  position: absolute;
  left: 39px;
  top: 24px;
  width: 130px;
  height: 44px;
}

/* 徽章字：20px 白居中（相对卡） */
.hx-news__card-badge {
  position: absolute;
  left: 25px;
  top: 10px;
  width: 80px;
  height: 24px;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  color: #fff;
}

/* 卡标题：39,86 24px #1A2332 */
.hx-news__card-title {
  position: absolute;
  left: 39px;
  top: 86px;
  height: 29px;
  margin: 0;
  font-size: 24px;
  line-height: 29px;
  color: #1a2332;
  white-space: nowrap;
}

/* 卡日期：39,135 20px #AAAAAA（仅第一卡有） */
.hx-news__card-date {
  position: absolute;
  left: 39px;
  top: 135px;
  width: 113px;
  height: 24px;
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  color: #aaa;
}

/* ============================================================
   新闻动态 · 响应式（模块级 v1）
   ≥1200：桌面 686 大图 + 488 三卡，不动。
   768–1199：大图占 58%，三张卡在右侧竖排（3×184 + 2×16 = 584）；
             标题/副标题改文档流，大图文字贴底。
   <768：大图 280 高，三卡单列，卡内文字改文档流。
   ============================================================ */
@media (max-width: 1199px) {
  .hx-news,
  .hx-news__stage { min-height: 0; }
  .hx-news__bg { background-size: cover; background-position: center top; }

  .hx-news__title,
  .hx-news__subtitle {
    position: static;
    left: auto;
    transform: none;
    width: auto;
    height: auto;
    text-align: center;
  }
  .hx-news__title { padding-top: 40px; }
  .hx-news__subtitle { margin-top: 8px; }

  .hx-news__group {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: auto;
    max-width: 960px;
    min-height: 0;
    margin: 24px auto 0;
    padding: 0 24px 48px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 58% minmax(0, 1fr);
    grid-template-rows: repeat(3, 184px);
    gap: 16px 20px;
  }

  .hx-news__hero {
    position: relative;
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 100%;
    height: 100%;
  }
  .hx-news__hero-mask {
    top: auto;
    bottom: 0;
    width: 100%;
    height: 45%;
  }
  .hx-news__hero-badge {
    left: 24px;
    top: auto;
    bottom: 96px;
    width: auto;
    padding: 0 16px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
  }
  .hx-news__hero-title {
    left: 24px;
    top: auto;
    bottom: 48px;
    width: calc(100% - 48px);
    height: auto;
    font-size: 20px;
    line-height: 28px;
    white-space: normal;
  }
  .hx-news__hero-date {
    left: 24px;
    top: auto;
    bottom: 16px;
    height: auto;
    font-size: 14px;
  }

  .hx-news__card {
    position: relative;
    left: 0;
    top: auto;
    grid-column: 2;
    width: auto;
    height: 184px;
    padding: 16px 20px 16px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hx-news__card-side { height: 100%; }
  .hx-news__card-icon { position: static; margin-bottom: 8px; }
  .hx-news__card-badge { display: block; position: static; margin: 10px auto 0; }
  .hx-news__card-title {
    position: static;
    width: auto;
    height: auto;
    margin-top: 8px;
    font-size: 18px;
    line-height: 24px;
    white-space: normal;
  }
  .hx-news__card-date {
    position: static;
    width: auto;
    height: auto;
    margin-top: 6px;
    font-size: 16px;
    line-height: 22px;
  }
}

@media (max-width: 767px) {
  .hx-news__title { font-size: 26px; line-height: 36px; padding-top: 32px; }
  .hx-news__subtitle { font-size: 14px; line-height: 20px; }

  .hx-news__group {
    max-width: none;
    margin-top: 24px;
    padding: 0 16px 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .hx-news__hero {
    width: 100%;
    height: 280px;
  }
  .hx-news__hero-badge {
    bottom: 100px;
    height: 36px;
    line-height: 36px;
    font-size: 15px;
  }
  .hx-news__hero-title { bottom: 54px; font-size: 17px; line-height: 24px; }
  .hx-news__hero-date { bottom: 16px; font-size: 14px; }

  .hx-news__card {
    width: 100%;
    height: auto;
    min-height: 120px;
    padding: 16px 20px 16px 24px;
    box-sizing: border-box;
  }
  .hx-news__card-side { height: 100%; }
  .hx-news__card-icon { position: static; margin-bottom: 8px; }
  .hx-news__card-badge { display: block; position: static; margin: 10px auto 0; }
  .hx-news__card-title {
    position: static;
    width: auto;
    height: auto;
    margin-top: 8px;
    font-size: 16px;
    line-height: 24px;
    white-space: normal;
  }
  .hx-news__card-date {
    position: static;
    width: auto;
    height: auto;
    margin-top: 6px;
    font-size: 14px;
    line-height: 20px;
  }
}

/* ============ 自主品牌标准化 hx-brand（Pixso 画板「首页-改」0:519，模块 y1445→1931 高486） ============ */
/* Pixso 页面 x360 = 内容列左（内容列 1200 居中，三段自然堆叠，无坐标直译）：
   标题 y29（34px/49 居中）；副标题 +8（17px/25 居中）；三卡 +65（384×310 gap24，360+3×384+2×24=1560 齐内容列右）；
   卡内 padding 34/24/24/32：顶行 88（左簇 名40+gap8+定位语29=77，右插画 88，两者 align center）；
   描述 +56 两行 lh26（122+56=178，230=178+52）；按钮 +20 高36（250，250+36+24=310 收底）。
   背景 0:523 原图 1920×1358，与下一模块「行业数字化解决方案」共用，本模块只取上半：
   定宽 1920 居中、只裁边不缩小（背景定则），高度 486 由 stage overflow 裁掉。
   已知取舍：卡2/卡3 插画右基准按统一 24（稿内 21/38），卡3 品牌标与卡1 同图（稿子如此）。 */
.hx-brand {
  /* relative + z-index：卡片下沿与模块下沿重合（176+310=486），9px 阴影必须溢出到下一个模块背景之上，
     稿内阴影就是压在下一模块上的；不加这两行会被 .hx-solution 的背景盖掉 */
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 486px;
  background: #fff;
}

.hx-brand__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  min-height: 486px;
  margin: 0 auto;
  /* 不再 overflow:hidden —— 卡片阴影需溢出；底图改由自身盒高裁（见 __bg） */
  overflow: visible;
}

/* 装饰层：品牌底图（1358 高的图，盒子只占模块 486 高，靠 border-box 裁掉下半，与之前裁切结果一致） */
.hx-brand__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url('/images/home/brand-bg.jpg') top center / 1920px 1358px no-repeat;
}

/* 内容列：正常流 + relative（抬到背景层之上，不偏移） */
.hx-brand__content {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 29px;
  box-sizing: border-box;
}

.hx-brand__title {
  margin: 0;
  font-size: 34px;
  line-height: 49px;
  font-weight: 400;
  color: #1a2332;
  text-align: center;
}

.hx-brand__subtitle {
  margin: 8px 0 0;
  font-size: 17px;
  line-height: 25px;
  font-weight: 400;
  color: #888;
  text-align: center;
}

/* 卡片行：3×384 + gap24 = 1200 */
.hx-brand__list {
  display: flex;
  gap: 24px;
  margin-top: 65px;
}

.hx-brand__card {
  display: flex;
  flex: 0 0 384px;
  flex-direction: column;
  min-height: 310px;
  box-sizing: border-box;
  padding: 34px 24px 24px 32px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff 18%, #d5e5ff 82%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

/* 顶行：左「标+品牌名 / 定位语」，右插画，两端对齐、垂直居中 */
.hx-brand__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 88px;
}

.hx-brand__intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hx-brand__name-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* 品牌标：稿内比品牌名基线低 8px，用 flex-start+margin 还原（卡2 标 24×32） */
.hx-brand__mark {
  display: block;
  align-self: flex-start;
  margin-top: 8px;
}

.hx-brand__name {
  margin: 0;
  font-size: 28px;
  line-height: 40px;
  font-weight: 400;
  color: #1a2332;
  white-space: nowrap;
}

.hx-brand__slogan {
  margin: 0;
  font-size: 20px;
  line-height: 29px;
  font-weight: 400;
  color: #2468d6;
  white-space: nowrap;
}

/* 插画位：固定 88 高槽（稿内行高 88，卡3 插画 101 高按设计外溢居中，不撑高行） */
.hx-brand__illus {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  height: 88px;
  margin-left: 12px;
}

/* relative：保证插画画在光晕之上（光晕 absolute，DOM 在前） */
.hx-brand__illus-img {
  position: relative;
  display: block;
}

/* 装饰层：插画光晕（120×17 椭圆，渐变 #D7DCFC→#EBEFFF，垫在插画下方 —— DOM 在前） */
.hx-brand__illus-shadow {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 120px;
  height: 17px;
  margin-left: -60px;
  border-radius: 50%;
  background: linear-gradient(180deg, #d7dcfc 0%, #ebefff 100%);
}

.hx-brand__desc {
  margin: 56px 0 0;
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: #888;
}

/* 按钮：157×36 r18（padding 0 24 + 字 71 + gap10 + 箭头 28） */
.hx-brand__btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  min-width: 157px;
  justify-content: center;
  min-height: 36px;
  margin-top: 20px;
  padding: 0 24px;
  box-sizing: border-box;
  border-radius: 18px;
  background: #2468d6;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s;
}

.hx-brand__btn:hover {
  background: #1e56b8;
}

.hx-brand__btn-text {
  font-size: 17px;
  line-height: 25px;
  font-weight: 400;
}

.hx-brand__btn-arrow {
  display: block;
  width: 28px;
  height: auto;
}

/* ============================================================
   自主品牌标准化 · 响应式（模块级 v1）
   768–1199：紧凑桌面——保持三卡构图，列数按可用宽度自动 3→2，
             卡片不再被拉满整行；
   <768：单列，字号/插画再收一档；
   ≥1200：以上桌面规则完全不动。
   说明：body 的 1200 最小宽只在首页解除（.hx-brand 是首页专属模块）。
   其他模块还没做，<1200 时页面仍可能被未适配的模块撑出横滚，属过渡状态。
   ============================================================ */
@media (max-width: 1199px) {
  body:has(.hx-brand) { min-width: 0; }

  .hx-brand__content { padding: 32px 24px 40px; }

  /* 3 列（1024+）/ 2 列（768–1023）自动切换；2 列时第三张居中，见下一段 */
  .hx-brand__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 40px;
  }

  .hx-brand__card {
    flex: none;
    width: auto;
    padding: 28px 20px 24px;
  }

  .hx-brand__name { font-size: 26px; line-height: 36px; }
  .hx-brand__slogan { font-size: 16px; line-height: 23px; white-space: normal; }
  .hx-brand__illus { height: 76px; }
  .hx-brand__illus-img { max-width: 120px; height: auto; }
  .hx-brand__desc { margin-top: 32px; font-size: 15px; line-height: 24px; }
  .hx-brand__btn { margin-top: 18px; }
}

@media (max-width: 767px) {
  .hx-brand__content { padding: 28px 16px 36px; }
  .hx-brand__title { font-size: 26px; line-height: 36px; }
  .hx-brand__subtitle { font-size: 14px; line-height: 20px; }
  .hx-brand__list { grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
  .hx-brand__card { min-height: 0; padding: 24px 20px 22px; }
  .hx-brand__name { font-size: 24px; line-height: 34px; }
  .hx-brand__slogan { font-size: 15px; line-height: 22px; }
  .hx-brand__illus { height: 68px; }
  .hx-brand__illus-img { max-width: 100px; }
  .hx-brand__desc { margin-top: 24px; }
}

/* 640–1023：两列；第三张跨两列居中（大屏手机/平板）。
   放在 767 段之后，640–767 才能从单列覆盖回两列。 */
@media (min-width: 640px) and (max-width: 1023px) {
  .hx-brand__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-brand__card:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 8px);
  }
}

/* <640：单列时卡片限宽居中，避免 500–639 把卡片拉成通栏、插画被甩到最右 */
@media (max-width: 639px) {
  .hx-brand__card { justify-self: center; width: 100%; max-width: 440px; }
}

/* ============ 行业数字化解决方案 hx-solution（收起态 y1931→2803 高872；悬浮展开态取自画板 0:1333 / 0:5976） ============ */
/* 收起：内容列 1200 居中，五列 230×600 gap 12.5；纵向 61+49+8+25+65+600+64=872。
 * 悬浮：被悬浮列 814 = 卡 230 + 间距 12 + 面板 572，其余四列 84；4×84+814+4×12.5=1200，永远不越界。
 *   收窄态：卡内改居中、左右 padding 归零（图标 45→居中留 19.5，与稿 +20 一致），标题 31 宽逐字换行（4×40=160），
 *   定位语/描述隐藏，背景 cover 自然裁窄。
 * 面板：572×600，radius 14，渐变 #FFFFFF→#E7EBFF + 0 0 6 阴影；内部 padding 25/32：
 *   头部图标 + 分类名(31/#465BC9) → 分割线 508×1 #BFC8FF(+10) → 条目区(+23)；
 *   条目 246×70（border #BAC4FF r10），50×50 圆角14 底 #D4DBFF + 文案 20/29 + 右箭头 22×14，两列 gap 16/12。
 *   政企合作版式不同：描述 500 宽 20/30 六行(+20) → 4×120×166 竖卡 gap 9(+25) → 160×50「了解详情」右对齐(+24)。
 * 交互纯 CSS：.item:hover / :has(:focus-visible) 控制宽度 0.25s（后者只认键盘焦点，鼠标点击不会钉住）；面板用 opacity+visibility 收放，
 *   visibility:hidden 确保收起时里面的链接不会被 Tab 聚焦。 */
.hx-solution {
  width: 100%;
  min-height: 872px;
  background: #fff;
}

.hx-solution__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  min-height: 872px;
  margin: 0 auto;
  overflow: hidden;
}

/* 装饰层：全幅底图（取 0:523 的下半段：垂直偏移 −486） */
.hx-solution__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url('/images/home/brand-bg.jpg') 50% -486px / 1920px 1358px no-repeat;
}

/* 内容列：正常流 + relative（抬到背景层之上，不偏移） */
.hx-solution__content {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 61px 0 64px;
  box-sizing: border-box;
}

.hx-solution__title {
  margin: 0;
  font-size: 34px;
  line-height: 49px;
  font-weight: 400;
  color: #1a2332;
  text-align: center;
}

.hx-solution__subtitle {
  margin: 8px 0 0;
  font-size: 17px;
  line-height: 25px;
  font-weight: 400;
  color: #888;
  text-align: center;
}

/* 列间距不用 gap，而是并进每列右 padding：gap 会形成"无人区"（鼠标划过列间就全部塌陷），
   padding 属于命中区域，列与列首尾相接。
   width:fit-content 让列表宽度跟着列宽收缩（收窄态整行只剩 470），
   否则列表恒占 1200，右侧空出的那截也算"列表被悬浮"→ 五列会永久卡在收窄态。 */
.hx-solution__list {
  display: flex;
  align-items: flex-start;
  width: fit-content;
  margin-top: 65px;
}

/* 每一列 = 卡 230 + 12.5 间距（末列无间距） */
.hx-solution__item {
  display: flex;
  width: 242.5px;
  padding-right: 12.5px;
  box-sizing: border-box;
  transition: width 0.25s ease;
}

.hx-solution__item:last-child {
  width: 230px;
  padding-right: 0;
}

/* 桌面 hover 交互只在 ≥1200 生效：<1200 是手风琴，触屏的 :hover 会粘住，
   这些列宽规则如果还在，点一张卡会让其余卡被收窄、间距乱跳。 */
@media (min-width: 1200px) {
/* 有任一列被悬浮/键盘聚焦：其余列收窄（84 + 自己的 12.5 间距）
   注意判定条件必须是「某一列被悬浮」，不能是「列表被悬浮」——
   否则指针落在列表的空白区（收窄后每列只剩 84，列表右侧空出大半）时，
   没有任何列被悬浮却仍判为"已悬浮"，五列就永久卡在收窄态。 */
.hx-solution__list:hover .hx-solution__item,
.hx-solution__list:has(:focus-visible) .hx-solution__item {
  width: 96.5px;
}

.hx-solution__list:hover .hx-solution__item:last-child,
.hx-solution__list:has(:focus-visible) .hx-solution__item:last-child {
  width: 84px;
}

/* 被悬浮/键盘聚焦的那一列：卡 230 + 间距 12 + 面板 572（+ 自己的 12.5 间距） */
.hx-solution__list .hx-solution__item:hover,
.hx-solution__list .hx-solution__item:has(:focus-visible) {
  width: 826.5px;
}

.hx-solution__list .hx-solution__item:last-child:hover,
.hx-solution__list .hx-solution__item:last-child:has(:focus-visible) {
  width: 814px;
}
}

.hx-solution__card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 600px;
  box-sizing: border-box;
  padding: 40px 24px 24px;
  border-radius: 14px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
}

.hx-solution__card:focus-visible {
  outline: 2px solid #148bff;
  outline-offset: 2px;
}

.hx-solution__card--community {
  background-image: url('/images/home/solution-community.webp');
}

.hx-solution__card--iot {
  background-image: url('/images/home/solution-iot.webp');
}

.hx-solution__card--retail {
  background-image: url('/images/home/solution-retail.webp');
}

.hx-solution__card--manufacture {
  background-image: url('/images/home/solution-manufacture.webp');
}

.hx-solution__card--gov {
  background-image: url('/images/home/solution-gov.webp');
}

/* ---- 收窄态（悬浮别的列时）—— 只在 ≥1200 生效 ---- */
@media (min-width: 1200px) {
.hx-solution__list:hover .hx-solution__item:not(:hover) .hx-solution__card,
.hx-solution__list:has(:focus-visible) .hx-solution__item:not(:has(:focus-visible)) .hx-solution__card {
  align-items: center;
  padding-left: 0;
  padding-right: 0;
}

.hx-solution__list:hover .hx-solution__item:not(:hover) .hx-solution__icon,
.hx-solution__list:has(:focus-visible) .hx-solution__item:not(:has(:focus-visible)) .hx-solution__icon {
  justify-content: center;
}

.hx-solution__list:hover .hx-solution__item:not(:hover) .hx-solution__name,
.hx-solution__list:has(:focus-visible) .hx-solution__item:not(:has(:focus-visible)) .hx-solution__name {
  width: 31px;
  line-height: 40px;
  white-space: normal;
}

.hx-solution__list:hover .hx-solution__item:not(:hover) .hx-solution__tagline,
.hx-solution__list:hover .hx-solution__item:not(:hover) .hx-solution__desc,
.hx-solution__list:has(:focus-visible) .hx-solution__item:not(:has(:focus-visible)) .hx-solution__tagline,
.hx-solution__list:has(:focus-visible) .hx-solution__item:not(:has(:focus-visible)) .hx-solution__desc {
  display: none;
}
}

/* 图标槽固定 44 高：图标顶对齐，名称起点恒为 40+44+9=93 */
.hx-solution__icon {
  display: flex;
  align-items: flex-start;
  min-height: 44px;
}

.hx-solution__icon-img {
  display: block;
}

.hx-solution__name {
  margin: 9px 0 0;
  font-size: 31px;
  line-height: 45px;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
}

.hx-solution__tagline {
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 25px;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
}

.hx-solution__desc {
  margin: 2px 0 0;
  font-size: 17px;
  line-height: 24px;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
}

/* ---- 面板（594 宽槽位内含 572 面板；收起时宽度 0 + 不可见/不可聚焦） ---- */
.hx-solution__panel {
  flex: 0 0 0;
  width: 0;
  margin-left: 0;
  overflow: hidden;
  border-radius: 14px;
  opacity: 0;
  visibility: hidden;
  transition: width 0.25s ease, flex-basis 0.25s ease, margin-left 0.25s ease, opacity 0.2s ease;
}

/* 桌面 hover/键盘聚焦展开面板——只在 ≥1200 生效；<1200 由手风琴 .is-open 控制 */
@media (min-width: 1200px) {
.hx-solution__list .hx-solution__item:hover .hx-solution__panel,
.hx-solution__list .hx-solution__item:has(:focus-visible) .hx-solution__panel {
  flex: 0 0 572px;
  width: 572px;
  margin-left: 12px;
  opacity: 1;
  visibility: visible;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
}
}

.hx-solution__panel-inner {
  display: flex;
  flex-direction: column;
  width: 572px;
  min-height: 600px;
  box-sizing: border-box;
  padding: 25px 32px 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff 0%, #e7ebff 100%);
}

.hx-solution__panel-head {
  display: flex;
  align-items: center;
  gap: 19px;
  min-height: 45px;
}

.hx-solution__panel-icon {
  display: block;
}

.hx-solution__panel-title {
  font-size: 31px;
  line-height: 45px;
  font-weight: 400;
  color: #465bc9;
}

.hx-solution__panel-line {
  display: block;
  height: 1px;
  margin-top: 10px;
  background: #bfc8ff;
}

/* 条目区：两列 246 gap 16，行高 70 gap 12 */
.hx-solution__links {
  display: grid;
  grid-template-columns: repeat(2, 246px);
  gap: 12px 16px;
  margin-top: 23px;
}

.hx-solution__link {
  display: flex;
  align-items: center;
  height: 70px;
  padding: 0 16px;
  box-sizing: border-box;
  border: 1px solid #bac4ff;
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.hx-solution__link:hover {
  border-color: #8ea4ff;
  box-shadow: 0 2px 8px rgba(70, 91, 201, 0.18);
}

.hx-solution__link-badge {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: #d4dbff;
}

.hx-solution__link-icon {
  display: block;
}

.hx-solution__link-text {
  margin-left: 12px;
  font-size: 20px;
  line-height: 29px;
  font-weight: 400;
  color: #1a2332;
  white-space: nowrap;
}

.hx-solution__link-arrow {
  display: block;
  flex: none;
  width: 22px;
  height: 14px;
  margin-left: auto;
}

/* ---- 政企合作：单独版式 ---- */
.hx-solution__panel-desc {
  margin: 20px 0 0;
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  color: #1a2332;
}

.hx-solution__gov-grid {
  display: grid;
  grid-template-columns: repeat(4, 120px);
  gap: 9px;
  margin-top: 25px;
}

.hx-solution__gov-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 166px;
  box-sizing: border-box;
  padding-top: 24px;
  border: 1px solid #bac4ff;
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.hx-solution__gov-card:hover {
  border-color: #8ea4ff;
  box-shadow: 0 2px 8px rgba(70, 91, 201, 0.18);
}

.hx-solution__gov-name {
  margin-top: 13px;
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
  color: #1a2332;
  text-align: center;
  white-space: nowrap;
}

.hx-solution__gov-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  justify-content: center;
  gap: 12px;
  width: 160px;
  min-height: 50px;
  margin-top: 24px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #148bff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  color: #fff;
  font-size: 20px;
  line-height: 28px;
  text-decoration: none;
  transition: background-color 0.2s;
}

.hx-solution__gov-cta:hover {
  background: #0f7ae0;
}

.hx-solution__gov-cta .hx-solution__link-arrow {
  margin-left: 0;
}

/* ============================================================
   行业数字化解决方案 · 响应式（模块级 v1）
   ≥1200：五列 hover 展开，一行不动。
   <1200：触屏没有 hover，改成手风琴——分类卡横排信息，点卡片展开
           该分类面板，一次只开一个，首项默认展开。
           1024/768 内容列限宽 880 居中，面板链接两列；
           <768 单列，链接一列，政企四卡 2×2。
   旧 hover 的列宽/收窄/面板展开规则在本段全部覆盖回 100%，避免
   触屏上 hover 粘住导致布局卡死。
   ============================================================ */
@media (max-width: 1199px) {
  .hx-solution,
  .hx-solution__stage { min-height: 0; }

  /* 手风琴会撑高模块；底图固定 1920×1358 时下面会露白，改成整块 cover */
  .hx-solution__bg {
    background-size: cover;
    background-position: center top;
  }

  /* 触屏没有列宽过渡，关掉避免任何残留动画 */
  .hx-solution__item,
  .hx-solution__panel { transition: none; }

  /* 右悬浮在 <1200 会压住 880 内容列的右缘（解决方案/技术都受影响），首页先隐藏；
     在线咨询入口留到页脚/骨架阶段统一处理 */
  body:has(.hx-brand) .box { display: none; }

  .hx-solution__content {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 40px 24px 48px;
    box-sizing: border-box;
  }

  .hx-solution__list {
    display: flex;
    flex-direction: column;
    width: auto;
    margin-top: 32px;
  }

  /* 旧 hover 的列宽/收窄规则全部还原 */
  .hx-solution__item,
  .hx-solution__item:last-child,
  .hx-solution__list:hover .hx-solution__item,
  .hx-solution__list:hover .hx-solution__item:last-child,
  .hx-solution__list .hx-solution__item:hover,
  .hx-solution__list .hx-solution__item:last-child:hover,
  .hx-solution__list:has(:focus-visible) .hx-solution__item,
  .hx-solution__list:has(:focus-visible) .hx-solution__item:last-child,
  .hx-solution__list .hx-solution__item:has(:focus-visible),
  .hx-solution__list .hx-solution__item:last-child:has(:focus-visible) {
    display: block;
    width: 100%;
    padding-right: 0;
  }
  .hx-solution__item + .hx-solution__item { margin-top: 12px; }

  /* 分类卡：图标 / 名称+定位语+说明 / 右侧箭头，背景图继续做底 */
  .hx-solution__card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto auto;
    column-gap: 20px;
    align-content: center;
    width: 100%;
    min-height: 150px;
    padding: 24px 64px 24px 24px;
    overflow: hidden;
    border-radius: 14px;
    cursor: pointer;
  }
  .hx-solution__card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 30, 75, 0.62) 0%, rgba(10, 30, 75, 0.12) 70%, rgba(10, 30, 75, 0.04) 100%);
    pointer-events: none;
  }
  .hx-solution__card::after {
    content: '';
    position: absolute;
    right: 28px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -7px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
  }
  .hx-solution__item.is-open .hx-solution__card::after {
    transform: rotate(-135deg);
  }
  .hx-solution__icon,
  .hx-solution__name,
  .hx-solution__tagline,
  .hx-solution__desc {
    position: relative;
    z-index: 1;
  }
  .hx-solution__icon {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
    justify-content: flex-start;
    min-height: 44px;
  }
  .hx-solution__name {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 26px;
    line-height: 36px;
    white-space: normal;
  }
  .hx-solution__tagline {
    grid-column: 2;
    grid-row: 2;
    margin: 2px 0 0;
    font-size: 14px;
    line-height: 22px;
    white-space: normal;
  }
  .hx-solution__desc {
    grid-column: 2;
    grid-row: 3;
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    white-space: normal;
  }

  /* 触屏上 hover 可能粘住：把“其余列收窄”的旧规则反向覆盖 */
  .hx-solution__list:hover .hx-solution__item:not(:hover) .hx-solution__card,
  .hx-solution__list:has(:focus-visible) .hx-solution__item:not(:has(:focus-visible)) .hx-solution__card {
    align-items: stretch;
    padding-left: 24px;
    padding-right: 64px;
  }
  .hx-solution__list:hover .hx-solution__item:not(:hover) .hx-solution__icon,
  .hx-solution__list:has(:focus-visible) .hx-solution__item:not(:has(:focus-visible)) .hx-solution__icon {
    justify-content: flex-start;
  }
  .hx-solution__list:hover .hx-solution__item:not(:hover) .hx-solution__name,
  .hx-solution__list:has(:focus-visible) .hx-solution__item:not(:has(:focus-visible)) .hx-solution__name {
    width: auto;
    line-height: 36px;
    white-space: normal;
  }
  .hx-solution__list:hover .hx-solution__item:not(:hover) .hx-solution__tagline,
  .hx-solution__list:hover .hx-solution__item:not(:hover) .hx-solution__desc,
  .hx-solution__list:has(:focus-visible) .hx-solution__item:not(:has(:focus-visible)) .hx-solution__tagline,
  .hx-solution__list:has(:focus-visible) .hx-solution__item:not(:has(:focus-visible)) .hx-solution__desc {
    display: block;
  }

  /* 面板：默认收起，is-open 才占位 */
  .hx-solution__panel,
  .hx-solution__list .hx-solution__item:hover .hx-solution__panel,
  .hx-solution__list .hx-solution__item:has(:focus-visible) .hx-solution__panel {
    display: none;
    flex: none;
    width: 100%;
    margin: 12px 0 0;
    opacity: 1;
    visibility: visible;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
  }
  .hx-solution__list .hx-solution__item.is-open .hx-solution__panel { display: block; }

  .hx-solution__panel-inner {
    width: 100%;
    min-height: 0;
    padding: 20px;
    box-sizing: border-box;
  }
  .hx-solution__panel-head { min-height: 40px; }
  .hx-solution__panel-title { font-size: 26px; line-height: 36px; }
  .hx-solution__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin-top: 16px;
  }
  .hx-solution__link {
    height: auto;
    min-height: 56px;
    padding: 8px 12px;
  }
  .hx-solution__link-text {
    font-size: 16px;
    line-height: 24px;
    white-space: normal;
  }
  .hx-solution__panel-desc {
    margin-top: 16px;
    font-size: 15px;
    line-height: 24px;
  }
  .hx-solution__gov-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
  }
  .hx-solution__gov-card { min-height: 120px; padding: 16px 8px 12px; }
  .hx-solution__gov-name { font-size: 14px; line-height: 20px; white-space: normal; }
  .hx-solution__gov-cta {
    width: 100%;
    align-self: stretch;
    justify-content: center;
    margin-top: 16px;
  }

  /* 文案里的 <br> 是桌面排版用的，窄屏改自然流 */
  .hx-solution__tagline br,
  .hx-solution__desc br,
  .hx-solution__link-text br,
  .hx-solution__panel-desc br,
  .hx-solution__gov-name br { display: none; }
}

@media (max-width: 767px) {
  .hx-solution__content { max-width: none; padding: 32px 16px 40px; }
  .hx-solution__title { font-size: 26px; line-height: 36px; }
  .hx-solution__subtitle { font-size: 14px; line-height: 20px; }
  .hx-solution__card { min-height: 136px; padding: 20px 52px 20px 20px; }
  .hx-solution__name { font-size: 22px; line-height: 30px; }
  .hx-solution__tagline,
  .hx-solution__desc { font-size: 14px; line-height: 22px; }
  .hx-solution__links { grid-template-columns: 1fr; }
  .hx-solution__link-badge { width: 40px; height: 40px; border-radius: 10px; }
  .hx-solution__panel-title { font-size: 22px; line-height: 32px; }
  .hx-solution__gov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============ 自研底层技术 hx-tech（Pixso 画板「首页-改」0:519，模块 y2803→3793 高990；内容容器 0:609 = 1200×894 @360,2832） ============ */
/* 内容列 1200 居中，padding 29/67：标题 34/49 → +8 副标题 17/25 → +65 主体 628 → +21 蓝条 98 = 894。
   主体 = grid 三列 314/572/314（1200）：左面板 314×588、核心 572（高 628，与面板顶对齐）、右面板。
   面板 = flex column：蓝头 90（30/44 白字）→ 行区 padding 24/16/38 gap16；行高 74、padding-left 24、gap16
   （46 圆徽章 + 20/29 文案）；5×74 + 4×16 + 24 + 38 + 90 + 边框2 = 588。
   核心 = flex column align center：圆环 352（四层同心 352边/304边/256底/224球）+ 平台图 600×300（上叠 −24px）
   + 4 条层名在同一格叠放（padding-top 81、gap 27，落在四条平台上）。
   蓝条 = flex（space-between + 左右 padding 152）：4 条 30/44 白字 + 3 条 8×42 白分隔，分隔实测落在 332/581/830。
   装饰：两片渐变楔形（按截图实测轮廓 158.5×182，纵向中线 y=329、水平渐变「底边浅→顶点深」，内含
   「能力输入 / 价值输出」两行字与箭头）+ 圆环上 20×20 小圆点；楔形底边落在面板之下（面板 position:relative
   压在上面），可见起点与稿一致贴面板边缘。 */
.hx-tech {
  width: 100%;
  min-height: 990px;
  background: linear-gradient(135deg, #fcfdff 0%, #eef4ff 100%);
}

.hx-tech__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  min-height: 990px;
  margin: 0 auto;
  overflow: hidden;
}

.hx-tech__content {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 29px 0 67px;
  box-sizing: border-box;
}

.hx-tech__title {
  margin: 0;
  font-size: 34px;
  line-height: 49px;
  font-weight: 400;
  color: #1a2332;
  text-align: center;
}

.hx-tech__subtitle {
  margin: 8px 0 0;
  font-size: 17px;
  line-height: 25px;
  font-weight: 400;
  color: #888;
  text-align: center;
}

.hx-tech__body {
  position: relative;
  display: grid;
  grid-template-columns: 314px 572px 314px;
  align-items: start;
  margin-top: 65px;
}

/* ---- 装饰层：两片楔形（能力输入 / 价值输出） ---- */
.hx-tech__deco--wing-left,
.hx-tech__deco--wing-right {
  position: absolute;
  top: 91px;
  display: flex;
  align-items: center;
  width: 158.5px;
  min-height: 182px;
  box-sizing: border-box;
  padding-bottom: 16px;
}

.hx-tech__deco--wing-left {
  left: 302.5px;
  padding-right: 47px;
}

.hx-tech__deco--wing-right {
  left: 740px;
  padding-left: 46px;
}

.hx-tech__wing-tri {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}

.hx-tech__deco--wing-left .hx-tech__wing-tri {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background-image: url('/images/icons/icon-tech-arrow-left.svg'), linear-gradient(90deg, #e7effd 0%, #a7c6fe 100%);
  background-position: 101.5px 85px, 0 0;
  background-size: 34px 16px, 100% 100%;
}

.hx-tech__deco--wing-right .hx-tech__wing-tri {
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  background-image: url('/images/icons/icon-tech-arrow-right.svg'), linear-gradient(90deg, #a7c6fe 0%, #e7effd 100%);
  background-position: 22px 85px, 0 0;
  background-size: 34px 16px, 100% 100%;
}

.hx-tech__wing-label {
  position: relative;
  width: 100%;
  margin: 0;
  font-size: 20px;
  line-height: 20px;
  font-weight: 400;
  color: #1a2332;
  text-align: center;
}

/* ---- 左右面板 ---- */
.hx-tech__panel {
  /* relative：把面板抬到楔形（定位层）之上，可见起点落在面板边缘，与稿一致 */
  position: relative;
  display: flex;
  flex-direction: column;
  width: 314px;
  min-height: 588px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #c8ddff;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 15px rgba(48, 120, 238, 0.3);
}

.hx-tech__panel-head {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  background: #4a8fff;
}

.hx-tech__panel-title {
  margin: 0;
  font-size: 30px;
  line-height: 44px;
  font-weight: 400;
  color: #fff;
}

.hx-tech__rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 24px 16px 38px;
  list-style: none;
}

.hx-tech__row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 74px;
  box-sizing: border-box;
  padding-left: 24px;
  border: 1px solid #639fff;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 6px rgba(48, 120, 238, 0.3);
}

.hx-tech__row-badge {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  min-height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e9f1ff 0%, #c8dfff 100%);
}

.hx-tech__row-icon {
  display: block;
}

.hx-tech__row-text {
  font-size: 20px;
  line-height: 29px;
  color: #1a2332;
  white-space: nowrap;
}

/* ---- 中间核心：同心圆环 + 平台图 ---- */
.hx-tech__core {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hx-tech__rings {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 352px;
  min-height: 352px;
}

.hx-tech__ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 50%;
}

.hx-tech__ring--outer {
  width: 352px;
  min-height: 352px;
  border: 1px solid #d4e4ff;
}

.hx-tech__ring--mid {
  width: 304px;
  min-height: 304px;
  border: 1px solid #eef4ff;
}

.hx-tech__ring--inner {
  width: 256px;
  min-height: 256px;
  background: #cbdfFF;
}

.hx-tech__orb {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 224px;
  min-height: 224px;
  box-sizing: border-box;
  padding-top: 24px;
  border-radius: 50%;
  background: linear-gradient(180deg, #276ee2 0%, #3b86ff 100%);
  box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.5);
}

.hx-tech__orb-icon {
  display: block;
  margin-top: 0;
}

.hx-tech__orb-title {
  margin: 6px 0 0;
  font-size: 20px;
  line-height: 29px;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
}

.hx-tech__orb-text {
  margin: 1px 0 0;
  font-size: 20px;
  line-height: 21px;
  font-weight: 400;
  color: #fff;
  text-align: center;
}

/* 装饰层：圆环上的小圆点 */
.hx-tech__deco--dot {
  position: absolute;
  left: 277px;
  top: 31px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #5194ff;
}

/* 平台图与层名同格叠放（grid 同一个 cell） */
.hx-tech__stackwrap {
  display: grid;
  grid-template-columns: 600px;
  margin-top: -24px;
}

.hx-tech__stack {
  display: block;
  grid-area: 1 / 1;
  justify-self: center;
  width: 600px;
  height: auto;
}

.hx-tech__stack-labels {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 27px;
  grid-area: 1 / 1;
  justify-self: center;
  align-self: start;
  padding-top: 81px;
  box-sizing: border-box;
}

.hx-tech__stack-label {
  font-size: 20px;
  line-height: 29px;
  color: #003b9b;
  white-space: nowrap;
}

/* ---- 底部蓝条 ---- */
.hx-tech__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 98px;
  margin-top: 21px;
  padding: 0 152px;
  box-sizing: border-box;
  border: 1px solid #c8ddff;
  border-radius: 14px;
  background: linear-gradient(135deg, #4d90fc 0%, #2f75e8 100%);
  box-shadow: 0 0 15px rgba(48, 120, 238, 0.3);
}

.hx-tech__strip-item {
  font-size: 30px;
  line-height: 44px;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
}

.hx-tech__strip-div {
  flex: none;
  width: 8px;
  min-height: 42px;
  background: #fff;
}

/* ============================================================
   自研底层技术 · 响应式（模块级 v1）
   ≥1200：三列 314/572/314，一行不动。
   768–1199：主体改两列——左右面板并排，核心（圆环 + 平台图）跨两列
             在下方；楔形装饰隐藏；蓝条收成一行居中。
   <768：单列，面板 → 核心 → 面板；圆环缩到 0.6；平台图 100%；蓝条 2×2。
   ============================================================ */
@media (max-width: 1199px) {
  .hx-tech,
  .hx-tech__stage { min-height: 0; }

  .hx-tech__content {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 24px 48px;
    box-sizing: border-box;
  }

  .hx-tech__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "left right"
      "core core";
    gap: 24px;
    margin-top: 32px;
  }
  .hx-tech__panel { grid-area: left; width: 100%; min-height: 0; }
  .hx-tech__panel--right { grid-area: right; }
  .hx-tech__core { grid-area: core; width: 100%; min-width: 0; }
  .hx-tech__deco--wing-left,
  .hx-tech__deco--wing-right { display: none; }

  .hx-tech__stackwrap {
    width: 100%;
    max-width: 600px;
    grid-template-columns: 1fr;
    margin: 16px auto 0;
  }
  .hx-tech__stack { width: 100%; }

  .hx-tech__strip {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 16px;
    min-height: 0;
    padding: 16px 24px;
  }
  .hx-tech__strip-item { font-size: 20px; line-height: 28px; }
  .hx-tech__strip-div { width: 1px; min-height: 24px; }
}

@media (max-width: 767px) {
  .hx-tech__content { max-width: none; padding: 32px 16px 40px; }
  .hx-tech__title { font-size: 26px; line-height: 36px; }
  .hx-tech__subtitle { font-size: 14px; line-height: 20px; }

  .hx-tech__body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "right"
      "core";
    gap: 20px;
    margin-top: 28px;
  }

  /* 两个面板改手风琴：默认只开第一组，标题栏就是开关 */
  .hx-tech__panel { min-height: 0; }
  .hx-tech__panel-head {
    position: relative;
    min-height: 64px;
    padding: 0 20px;
    cursor: pointer;
  }
  .hx-tech__panel-head::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
  }
  .hx-tech__panel.is-open .hx-tech__panel-head::after {
    margin-top: -2px;
    transform: rotate(-135deg);
  }
  .hx-tech__panel-title { font-size: 22px; line-height: 30px; }

  .hx-tech__rows {
    display: none;
    gap: 12px;
    padding: 16px 16px 20px;
  }
  .hx-tech__panel.is-open .hx-tech__rows { display: flex; }
  .hx-tech__row { min-height: 60px; padding-left: 16px; gap: 12px; }
  .hx-tech__row-badge { width: 38px; min-height: 38px; }
  .hx-tech__row-text { font-size: 15px; line-height: 22px; white-space: normal; }

  /* 核心：去掉同心圆环，只留一个小 AI 徽章 + 平台图 + 4 条层名 */
  .hx-tech__rings {
    width: auto;
    min-height: 0;
    margin-bottom: 0;
    transform: none;
  }
  .hx-tech__ring--outer,
  .hx-tech__ring--mid,
  .hx-tech__ring--inner {
    width: auto;
    min-height: 0;
    border: 0;
    background: none;
  }
  .hx-tech__orb {
    width: 112px;
    min-height: 112px;
    padding-top: 10px;
  }
  .hx-tech__orb-icon { width: 38px; height: auto; }
  .hx-tech__orb-title { margin-top: 2px; font-size: 12px; line-height: 16px; }
  .hx-tech__orb-text { font-size: 11px; line-height: 15px; }
  .hx-tech__deco--dot { display: none; }

  .hx-tech__stackwrap { margin-top: 12px; }
  .hx-tech__stack-labels { padding-top: 45px; gap: 15px; }
  .hx-tech__stack-label { font-size: 14px; line-height: 20px; }

  /* 蓝条：2×2 → 单行 4 个小标签 */
  .hx-tech__strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    min-height: 0;
    padding: 10px 8px;
  }
  .hx-tech__strip-item { font-size: 12px; line-height: 18px; }
  .hx-tech__strip-div { display: none; }
}

/* 1024–1199：恢复桌面「左面板—核心—右面板」的横向叙事。
   内容列放宽到 1008（内宽 960），三列 250 / 420 / 250，gap 20；
   768–1023 仍走上面的「两面板 + 核心」。 */
@media (min-width: 1024px) and (max-width: 1199px) {
  .hx-tech__content { max-width: 1008px; }

  .hx-tech__body {
    grid-template-columns: 250px minmax(0, 1fr) 250px;
    grid-template-areas: "left core right";
    gap: 20px;
    align-items: start;
  }
  .hx-tech__panel { grid-area: left; width: 100%; }
  .hx-tech__panel--right { grid-area: right; }
  .hx-tech__core { grid-area: core; }

  .hx-tech__panel-head { min-height: 78px; }
  .hx-tech__panel-title { font-size: 26px; line-height: 36px; }
  .hx-tech__rows { gap: 12px; padding: 20px 14px 24px; }
  .hx-tech__row {
    min-height: 66px;
    padding-left: 16px;
    gap: 12px;
  }
  .hx-tech__row-badge { width: 38px; min-height: 38px; }
  .hx-tech__row-text { font-size: 17px; line-height: 24px; white-space: normal; }

  .hx-tech__rings {
    transform: scale(0.85);
    transform-origin: top center;
    margin-bottom: -53px;
  }
  .hx-tech__stackwrap {
    max-width: 420px;
    margin: 12px auto 0;
  }
  .hx-tech__stack-labels { padding-top: 57px; gap: 19px; }
  .hx-tech__stack-label { font-size: 14px; line-height: 20px; }
}