/*
 * MES 系统详情页（/project/mes，画板 0:8098，1920×5714）
 * 七个正文模块：hero 696→1346 / overview 1346→1950 / feature 1950→2760 /
 *   industry 2760→3526 / video 3526→4264 / adv 4264→4740 / scene 4740→5166
 * 依赖 common.css + home.css（main 里已引入），颜色取站内蓝系。
 */

/* 页面底色 = 画板 0:8098 的填充 #F9FCFF；模块自己没铺矩形的就不写 background，透出这一层 */
.mes-page { background: #f9fcff; }

/* ============================================================
   模块1 首屏 hero（696→1346，高 650）
   背景 0:8141（1920×650 实景图，压平成 RGB）
   副标 40/58 #ADCDFE @ (222,175)；主标 72/105 #FFFFFF @ (222,243)
   标签 28/40 #CCCCCC @ (222,381)
   ============================================================ */
.mes-hero {
  position: relative;
  width: 100%;
  min-height: 650px;
  overflow: hidden;
  scroll-margin-top: 88px; /* 首页直达锚：吸顶 72＋16，id="mesb" */
  background: #0d2b52;
}

.mes-hero * { box-sizing: border-box; }

.mes-hero__stage {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 1920px;
  min-height: 650px;
}

.mes-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 650px;
  background: url(/images/project/mes/hero-bg.webp) center top / 1920px 650px no-repeat;
}

/* 文本从设计 x222 起（比 1200 内容列更靠左）→ 容器宽 1476，居中后左缘 = 222 */
.mes-hero__content {
  position: relative;
  width: 1476px;
  margin: 0 auto;
  padding: 175px 0 0;
  font-family: 'AlibabaPuHuiTi-3', Inter, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.mes-hero__sub {
  margin: 0;
  font-size: 40px;
  line-height: 58px;
  font-weight: 700;
  color: #adcdfe;
}

.mes-hero__title {
  margin: 10px 0 0;
  font-size: 72px;
  line-height: 105px;
  font-weight: 700;
  color: #fff;
}

.mes-hero__tags {
  margin: 33px 0 0;
  font-size: 28px;
  line-height: 40px;
  font-weight: 400;
  color: #ccc;
}

/* ============================================================
   模块2 产品概述（1346→1950，高 604）
   标题图 0:8102（229×67 @ 段内 846,64）；说明 24/40 #0F172A 两行居中 @ (689,166)
   5 项 @ 段内 y308：圆 120×120 #E1F1FF + 图标 @ x387/648/897/1147/1410
     名称 28/40 #1A1A2E；说明 22/34 #888888 两行
   项间竖线 0:8109~8112：1×224 #B2DBFF @ (588/827/1087/1326, 1675)
   ============================================================ */
.mes-overview {
  position: relative;
  width: 100%;
  min-height: 604px;
  overflow: hidden;
}

.mes-overview * { box-sizing: border-box; }

.mes-overview__content {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  padding: 64px 0 32px;
  text-align: center;
  font-family: 'AlibabaPuHuiTi-3', Inter, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.mes-overview__title-img {
  display: block;
  width: 229px;
  height: 67px;
  margin: 0 auto;
}

.mes-overview__desc {
  width: 552px;
  margin: 35px auto 0;
  font-size: 24px;
  line-height: 40px;
  font-weight: 400;
  color: #0f172a;
}

.mes-overview__list {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 62px 0 0;
  padding: 0;
  list-style: none;
}

.mes-overview__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mes-overview__item--1 { width: 176px; }
.mes-overview__item--2 { width: 132px; }
.mes-overview__item--3 { width: 154px; }
.mes-overview__item--4 { width: 132px; }
.mes-overview__item--5 { width: 180px; }

.mes-overview__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #e1f1ff;
}

.mes-overview__ico img { display: block; object-fit: contain; }

.mes-overview__name {
  margin: 22px 0 0;
  font-size: 28px;
  line-height: 40px;
  font-weight: 700;
  color: #1a1a2e;
  white-space: nowrap;
}

.mes-overview__sub {
  margin: 14px 0 0;
  font-size: 22px;
  line-height: 34px;
  font-weight: 400;
  color: #888;
  white-space: nowrap;
}

/* 装饰：项间竖线 1×224 #B2DBFF（设计 rotation=-90，DSL 记成 224×0，别当横线写） */
.mes-overview__line {
  position: absolute;
  top: 329px;
  width: 1px;
  height: 224px;
  background: #b2dbff;
  pointer-events: none;
}

.mes-overview__line--1 { left: 228px; }
.mes-overview__line--2 { left: 467px; }
.mes-overview__line--3 { left: 727px; }
.mes-overview__line--4 { left: 966px; }

/* ============================================================
   模块3 核心功能（1950→2760，高 810，底 #E5F0FF）
   标题 34/49 #333 @ 段内 y29；副标 16/24 #555 y87；下划线 394×4 #2D72FF y126
   8 卡 268×278 @ x0/311/621/932，y 190/500（白底 r20 阴影 r6）
     圆 86×86 渐变小图 @ 卡内 (91,32)；标题 22/32 #1A1A2E @ y139；
     说明 17/26 #888 两行 @ y186
   ============================================================ */
.mes-feature {
  position: relative;
  width: 100%;
  min-height: 810px;
  overflow: hidden;
  background: #e5f0ff;
}

.mes-feature * { box-sizing: border-box; }

.mes-feature__content {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  padding: 29px 0 0;
  text-align: center;
  font-family: 'AlibabaPuHuiTi-3', Inter, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.mes-sec-title {
  margin: 0;
  font-size: 34px;
  line-height: 49px;
  font-weight: 700;
  color: #333;
}

.mes-sec-sub {
  margin: 9px 0 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #555;
}

.mes-sec-rule {
  display: block;
  width: 394px;
  height: 4px;
  margin: 15px auto 0;
  border-radius: 2px;
  background: #2d72ff;
}

.mes-feature__list {
  display: grid;
  grid-template-columns: repeat(4, 268px);
  justify-content: space-between;
  row-gap: 32px;
  margin: 60px 0 0;
  padding: 0;
  list-style: none;
}

.mes-feature__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 278px;
  padding: 32px 20px 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
}

.mes-feature__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
}

.mes-feature__card:nth-child(1) .mes-feature__ico { background: linear-gradient(135deg, #dceffe 0%, #8ccafe 100%); }
.mes-feature__card:nth-child(2) .mes-feature__ico { background: linear-gradient(140deg, #d3ebfe 0%, #95cefe 100%); }
.mes-feature__card:nth-child(3) .mes-feature__ico { background: linear-gradient(138deg, #e1f1ff 0%, #96cffe 100%); }
.mes-feature__card:nth-child(4) .mes-feature__ico { background: linear-gradient(144deg, #d1eafe 0%, #97cffe 100%); }
.mes-feature__card:nth-child(5) .mes-feature__ico { background: linear-gradient(139deg, #d4ebfe 0%, #94cefe 100%); }
.mes-feature__card:nth-child(6) .mes-feature__ico { background: linear-gradient(143deg, #d2ebfe 0%, #97cffe 100%); }
.mes-feature__card:nth-child(7) .mes-feature__ico { background: linear-gradient(140deg, #ddefff 0%, #9ad0fe 100%); }
.mes-feature__card:nth-child(8) .mes-feature__ico { background: linear-gradient(144deg, #daedff 0%, #9cd1fe 100%); }

.mes-feature__ico img { display: block; object-fit: contain; }

.mes-feature__name {
  margin: 21px 0 0;
  font-size: 22px;
  line-height: 32px;
  font-weight: 700;
  color: #1a1a2e;
  white-space: nowrap;
}

.mes-feature__desc {
  margin: 15px 0 0;
  font-size: 17px;
  line-height: 26px;
  font-weight: 400;
  color: #888;
}

/* ============================================================
   模块4 行业解决方案（2760→3526，高 766）
   标题 34/49 y29；副标 16/24 y87；下划线 394×4 y126
   6 个胶囊 166×60 r30 @ x0/207/414/620/827/1034，y190
     选中 #2563EB + 白字，其余 #E1F1FF + #333；字号 25/26
   白卡 1200×420 r20 @ y282（渐变 #FFFFFF→#F3FAFF + 阴影）
     图 598×388 r16 @ (24,16) / 标题 31 #1846A4 @ (662,15)
     说明 22/34 #1A1A2E @ (662,74)；三条胶囊 301×44 r22 #487DF3 @ (662,216/276/336)
   ============================================================ */
.mes-industry {
  position: relative;
  width: 100%;
  min-height: 766px;
  overflow: hidden;
}

.mes-industry * { box-sizing: border-box; }

.mes-industry__content {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  padding: 29px 0 0;
  text-align: center;
  font-family: 'AlibabaPuHuiTi-3', Inter, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.mes-industry__tabs {
  display: flex;
  gap: 41px;
  margin: 60px 0 0;
  padding: 0;
  list-style: none;
}

.mes-industry__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 166px;
  min-height: 60px;
  padding: 0;
  border: 0;
  border-radius: 30px;
  background: #e1f1ff;
  font-family: inherit;
  font-size: 25px;
  line-height: 26px;
  font-weight: 400;
  color: #333;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}

.mes-industry__tab:hover {
  background: #cfe4ff;
}

.mes-industry__tab--on {
  background: #2563eb;
  font-weight: 700;
  color: #fff;
}

.mes-industry__tab--on:hover { background: #2563eb; }

/* 卡片区：六个行业面板叠在同一位置，只有 --on 的那个显示（面板同高 420，切换不跳版） */
.mes-industry__panels {
  position: relative;
  margin: 32px 0 0;
}

.mes-industry__panel { display: none; }

.mes-industry__panel--on {
  display: flex;
  animation: mes-panel-in .45s ease both;
}

@keyframes mes-panel-in {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}

.mes-industry__card {
  position: relative;
  min-height: 420px;
  padding: 16px 16px 16px 24px;
  border-radius: 20px;
  background: linear-gradient(135deg, #fff 0%, #f3faff 100%);
  box-shadow: 0 0 10px rgba(0, 0, 0, .16);
  text-align: left;
}

.mes-industry__pic {
  flex: none;
  display: block;
  width: 598px;
  height: 388px;
  border-radius: 16px;
  object-fit: cover;
}

.mes-industry__body {
  flex: 1;
  min-width: 0;
  padding: 0 0 0 40px;
}

.mes-industry__name {
  margin: -1px 0 0;
  font-size: 31px;
  line-height: 45px;
  font-weight: 700;
  color: #1846a4;
}

.mes-industry__desc {
  margin: 14px 0 0;
  font-size: 22px;
  line-height: 34px;
  font-weight: 400;
  color: #1a1a2e;
}

/* 三条胶囊同宽 = 该行业最宽的那条（稿子里 装备 301 / 电子 390 / 医药 424 / 食品·更多 432） */
.mes-industry__points {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.mes-industry__point {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 24px 0 16px;
  border-radius: 22px;
  background: #487df3;
  font-size: 19px;
  line-height: 34px;
  color: #fff;
}

.mes-industry__point img {
  display: block;
  width: 17px;
  height: 12px;
  margin-right: 16px;
  object-fit: contain;
}

/* ============================================================
   模块5 产品视频演示（3526→4264，高 738）
   背景 0:8245 实景图 + 0:8246 渐变蒙版（#1A4277BF→#325BB8D9）
   标题 34/49 #FFF y29；副标 16/24 #B2D0FF y86；下划线 394×4 #FFF y126
   视频占位 860×484 r20 #C5DEFF @ (360,190)
   右侧 4 项 @ x1252，y188/325/463/600：72×72 r14 #92B8FF + 图标；
     标题 25/36 #FFF；说明 20/26 #CFE2FF
   ============================================================ */
.mes-video {
  position: relative;
  width: 100%;
  min-height: 738px;
  overflow: hidden;
  background: #1a4277;
}

.mes-video * { box-sizing: border-box; }

.mes-video__bg,
.mes-video__mask {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1920px;
  height: 738px;
  pointer-events: none;
}

.mes-video__bg { background: url(/images/project/mes/m5-bg.webp) center top / 1920px 738px no-repeat; }

.mes-video__mask { background: linear-gradient(135deg, rgba(26, 66, 119, .75) 0%, rgba(50, 91, 184, .85) 100%); }

.mes-video__content {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  padding: 29px 0 0;
  text-align: center;
  font-family: 'AlibabaPuHuiTi-3', Inter, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.mes-video__title {
  margin: 0;
  font-size: 34px;
  line-height: 49px;
  font-weight: 700;
  color: #fff;
}

.mes-video__sub {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #b2d0ff;
}

.mes-video__rule {
  display: block;
  width: 394px;
  height: 4px;
  margin: 16px auto 0;
  border-radius: 2px;
  background: #fff;
}

.mes-video__body {
  display: flex;
  margin: 60px 0 0;
  text-align: left;
}

.mes-video__screen {
  flex: none;
  width: 860px;
  min-height: 484px;
  border-radius: 20px;
  background: #c5deff;
}

.mes-video__list {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0 0 0 32px;
  list-style: none;
}

.mes-video__item {
  display: flex;
  align-items: flex-start;
}

.mes-video__item + .mes-video__item { margin-top: 63px; }

.mes-video__ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-top: 2px;
  border-radius: 14px;
  background: #92b8ff;
}

.mes-video__ico img { display: block; object-fit: contain; }

.mes-video__txt { margin-left: 16px; }

.mes-video__name {
  margin: 0;
  font-size: 25px;
  line-height: 36px;
  font-weight: 700;
  color: #fff;
}

.mes-video__desc {
  margin: 8px 0 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 400;
  color: #cfe2ff;
}

/* ============================================================
   模块6 产品优势（4264→4740，高 476）
   标题 34/49 #333 @ 段内 y61；下划线 188×4 #2D72FF
   5 卡 224×252 @ x0/244/488/732/976，y192（白底 r12 阴影 r6）
     圆 68×68 渐变 @ 卡内 (78,40)；标题 20/29；说明 16/24 #888
   ============================================================ */
.mes-adv {
  position: relative;
  width: 100%;
  min-height: 476px;
  overflow: hidden;
}

.mes-adv * { box-sizing: border-box; }

.mes-adv__content {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  padding: 61px 0 0;
  text-align: center;
  font-family: 'AlibabaPuHuiTi-3', Inter, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.mes-adv__rule {
  display: block;
  width: 188px;
  height: 4px;
  margin: 18px auto 0;
  border-radius: 2px;
  background: #2d72ff;
}

.mes-adv__list {
  display: flex;
  justify-content: space-between;
  margin: 61px 0 0;
  padding: 0;
  list-style: none;
}

.mes-adv__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 224px;
  min-height: 252px;
  padding: 40px 0 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
}

.mes-adv__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8f4fd 0%, #80c5ff 100%);
}

.mes-adv__ico img { display: block; object-fit: contain; }

.mes-adv__name {
  margin: 14px 0 0;
  font-size: 20px;
  line-height: 29px;
  font-weight: 700;
  color: #1a1a2e;
  white-space: nowrap;
}

.mes-adv__desc {
  margin: 15px 0 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #888;
}

/* ============================================================
   模块7 典型应用场景（4740→5166，高 426，底 #E5F0FF）
   标题 34/49 #333 @ 段内 y29；副标 16/24 y86；下划线 394×4 y126
   6 砖 190×140 r10 @ x0/202/404/606/808/1010，y184
     背景图 + 渐变蒙版（#326DCC33→#1E427E）；图标 32 #FFF @ (79,34)；
     名称 17/25 #FFF @ (45,80)
   ============================================================ */
.mes-scene {
  position: relative;
  width: 100%;
  min-height: 426px;
  overflow: hidden;
  background: #e5f0ff;
}

.mes-scene * { box-sizing: border-box; }

.mes-scene__content {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  padding: 29px 0 0;
  text-align: center;
  font-family: 'AlibabaPuHuiTi-3', Inter, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.mes-scene__list {
  display: flex;
  justify-content: space-between;
  margin: 60px 0 0;
  padding: 0;
  list-style: none;
}

.mes-scene__item {
  position: relative;
  flex: none;
  width: 190px;
  min-height: 140px;
  border-radius: 10px;
  overflow: hidden;
  text-align: left;
}

.mes-scene__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 190px;
  height: 140px;
}

.mes-scene__item--1 .mes-scene__bg { background: url(/images/project/mes/m7-bg-1.webp) center / 190px 140px no-repeat; }
.mes-scene__item--2 .mes-scene__bg { background: url(/images/project/mes/m7-bg-2.webp) center / 190px 140px no-repeat; }
.mes-scene__item--3 .mes-scene__bg { background: url(/images/project/mes/m7-bg-3.webp) center / 190px 140px no-repeat; }
.mes-scene__item--4 .mes-scene__bg { background: url(/images/project/mes/m7-bg-4.webp) center / 190px 140px no-repeat; }
.mes-scene__item--5 .mes-scene__bg { background: url(/images/project/mes/m7-bg-5.webp) center / 190px 140px no-repeat; }
.mes-scene__item--6 .mes-scene__bg { background: url(/images/project/mes/m7-bg-6.webp) center / 190px 140px no-repeat; }

.mes-scene__mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 190px;
  height: 140px;
  background: linear-gradient(180deg, rgba(50, 109, 204, .2) 0%, #1e427e 100%);
  pointer-events: none;
}

.mes-scene__ico {
  position: relative;
  display: block;
  margin: 34px 0 0 79px;
  width: 32px;
  height: 32px;
}

.mes-scene__ico img { display: block; object-fit: contain; }

.mes-scene__name {
  position: relative;
  margin: 14px 0 0 45px;
  font-size: 17px;
  line-height: 25px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

/* ============================================================
   动效（与 drone / grass 等项目页同一套）
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* 卡片抬升：核心功能 / 产品优势 / 应用场景 */
.mes-feature__card,
.mes-adv__card,
.mes-scene__item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mes-feature__card:hover,
.mes-adv__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(35, 99, 235, .18);
}

.mes-scene__item:hover { transform: translateY(-6px); }

/* 圆形图标轻抬：产品概述 / 视频演示 */
.mes-overview__ico,
.mes-video__ico {
  transition: transform 0.3s ease;
}

.mes-overview__item:hover .mes-overview__ico,
.mes-video__item:hover .mes-video__ico {
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .mes-industry__panel--on { animation: none; }

  .mes-industry__tab,
  .mes-feature__card,
  .mes-adv__card,
  .mes-scene__item,
  .mes-overview__ico,
  .mes-video__ico {
    transition: none;
  }

  .mes-feature__card:hover,
  .mes-adv__card:hover,
  .mes-scene__item:hover,
  .mes-overview__item:hover .mes-overview__ico,
  .mes-video__item:hover .mes-video__ico {
    transform: none;
  }
}