/*
 * WMS 系统详情页（/project/wms，画板 0:8734，1920×5354）
 * 七个正文模块：hero 696→1346 / overview 1346→1869 / feature 1869→2679 /
 *   multi 2679→3334 / advantage 3334→3775.44 / scene 3775.44→4258 / flow 4258→4806
 * 依赖 common.css + home.css（main 里已引入），颜色取站内蓝系。
 */

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

/* ============================================================
   模块1 首屏 hero（696→1346，高 650）
   背景 0:8736（1920×650 实景图）+ 0:8737 左侧竖向蒙版（1478×650，E0F0FE → 透明）
   WMS工厂管理系统 70/101 #007DE2 @ (215,129)
   让仓储更高效 让生产更顺畅 60/87 #122F8F @ (215,250)
   说明 28/40 #5B5D62 两行 @ (215,418)，宽 728
   ============================================================ */
.wms-hero {
  position: relative;
  width: 100%;
  min-height: 650px;
  overflow: hidden;
  scroll-margin-top: 88px; /* 首页直达锚：吸顶 72＋16，id="wmsb" */
}

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

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

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

/* 装饰：左侧蒙版，让文字区压亮 */
.wms-hero__mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 1478px;
  height: 650px;
  background: linear-gradient(90deg, #e0f0fe 0%, rgba(224, 240, 254, .9) 43%, rgba(223, 239, 253, .8) 66%, rgba(221, 237, 252, 0) 100%);
  pointer-events: none;
}

/* 文本从设计 x215 起 → 容器宽 1490，居中后左缘 = 215 */
.wms-hero__content {
  position: relative;
  width: 1490px;
  margin: 0 auto;
  padding: 129px 0 0;
  font-family: 'AlibabaPuHuiTi-3', Inter, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.wms-hero__title {
  margin: 0;
  font-size: 70px;
  line-height: 101px;
  font-weight: 700;
  color: #007de2;
}

.wms-hero__sub {
  margin: 20px 0 0;
  font-size: 60px;
  line-height: 87px;
  font-weight: 700;
  color: #122f8f;
}

.wms-hero__desc {
  width: 728px;
  margin: 81px 0 0;
  font-size: 28px;
  line-height: 40px;
  font-weight: 400;
  color: #5b5d62;
}

/* ============================================================
   模块2 产品概述（1346→1869，高 523）
   标题 34/49 #333 @ y61；下划线 226×4 #2D72FF y128
   左说明 24/37 #555 三行 @ (360,188)，宽 672
   右插画 0:8745（552×341）@ (1043,161)
   4 项 @ (360/548/725/901, 331)：圆 60 #E1F1FF + 图标；名称 20/29 #1A1A2E；说明 16/24 #888
   ============================================================ */
.wms-overview {
  position: relative;
  width: 100%;
  min-height: 523px;
  overflow: hidden;
}

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

.wms-overview__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;
}

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

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

.wms-sec-rule {
  display: block;
  width: 410px;
  height: 4px;
  margin: 16px auto 0;
  border-radius: 2px;
  background: #2d72ff;
}

.wms-sec-rule--226 { width: 226px; }
.wms-sec-rule--268 { width: 268px; }
.wms-sec-rule--362 { width: 362px; }
.wms-sec-rule--252 { width: 252px; }
.wms-sec-rule--488 { width: 488px; }

.wms-overview__body {
  display: flex;
  margin: 29px 0 0;
  text-align: left;
}

.wms-overview__left {
  flex: none;
  width: 672px;
  padding: 27px 0 0;
}

.wms-overview__desc {
  margin: 0;
  font-size: 24px;
  line-height: 37px;
  font-weight: 400;
  color: #555;
}

.wms-overview__list {
  display: flex;
  gap: 76px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

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

/* 设计里 4 项列宽 112/100/100/96，间距 76 */
.wms-overview__item--1 { width: 112px; }
.wms-overview__item--2 { width: 100px; }
.wms-overview__item--3 { width: 100px; }
.wms-overview__item--4 { width: 96px; }

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

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

.wms-overview__name {
  margin: 10px 0 0;
  font-size: 20px;
  line-height: 29px;
  font-weight: 400;
  color: #1a1a2e;
  white-space: nowrap;
}

.wms-overview__sub {
  margin: 15px 0 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #888;
  white-space: nowrap;
}

.wms-overview__illu {
  flex: none;
  display: block;
  width: 552px;
  height: 341px;
  margin-left: 11px;
}

/* ============================================================
   模块3 核心功能（1869→2679，高 810，底 #E5F0FF）
   标题 34/49 @ y29；副标 16/24 y86；下划线 410×4 y126
   8 卡 268×278 @ x0/311/621/932，y190/500（白底 r20 阴影 r6，圆 86 渐变 #DCEFFE→#8CCAFE）
     标题 22/32 @ 卡内 y139；说明 17/26 #888 @ y186
   ============================================================ */
.wms-feature {
  position: relative;
  width: 100%;
  min-height: 810px;
  overflow: hidden;
  background: #e5f0ff;
}

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

.wms-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;
}

.wms-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;
}

.wms-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);
}

.wms-feature__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: linear-gradient(136deg, #dceffe 0%, #8ccafe 100%);
}

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

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

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

/* ============================================================
   模块4 多端协同管控（2679→3334，高 655）
   组 0:8757 @ (323,2708)：标题 34/49 @ y0；副标 16/24 y58；下划线 488×4 y97
   左插画 0:8874（763×401）@ (0,161)；右 4 项 @ x854，y159/265/372/478（高 71）
     圆 64 #D1E0FF + 内圆 56 #4280FF + 图标；名称 25/36 #333 @ 圆右 24；说明 20/29 #333
   4 个箭头 0:8879~8882（107.5×52）@ (714,170/276/383/490)
   ============================================================ */
.wms-multi {
  position: relative;
  width: 100%;
  min-height: 655px;
  overflow: hidden;
}

.wms-multi * { box-sizing: border-box; }

.wms-multi__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;
}

/* 插画比 1200 列更靠左（设计 x323 < 360），用负 margin 外扩，不改内容列 */
.wms-multi__body {
  position: relative;
  display: flex;
  margin: 58px 0 0 -37px;
  text-align: left;
}

.wms-multi__illu {
  flex: none;
  display: block;
  width: 763px;
  height: 401px;
  margin-top: 2px;
}

.wms-multi__list {
  flex: none;
  margin: 0 0 0 32.5px;
  padding: 0;
  list-style: none;
}

.wms-multi__item {
  display: flex;
  align-items: flex-start;
  min-height: 71px;
}

.wms-multi__item + .wms-multi__item { margin-top: 35px; }

.wms-multi__ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-top: 7px;
  border-radius: 50%;
  background: #4280ff;
  box-shadow: 0 0 0 4px #d1e0ff;
}

.wms-multi__ico img { display: block; object-fit: contain; }

.wms-multi__txt { margin-left: 24px; }

.wms-multi__name {
  margin: 0;
  font-size: 25px;
  line-height: 36px;
  font-weight: 700;
  color: #333;
}

.wms-multi__desc {
  margin: 4px 0 0;
  font-size: 20px;
  line-height: 29px;
  font-weight: 400;
  color: #333;
  white-space: nowrap;
}

/* 插画与文字之间的连接箭头：设计 x714 压在插画右缘内 49px，用负 margin 叠上去 */
.wms-multi__arrows {
  flex: none;
  display: flex;
  flex-direction: column;
  width: 107.5px;
  margin-left: -49px;
}

.wms-multi__arrow {
  display: block;
  width: 107.5px;
  height: 52px;
}

.wms-multi__arrow--1 { margin-top: 11px; }
.wms-multi__arrow--2 { margin-top: 54px; }
.wms-multi__arrow--3 { margin-top: 55px; }
.wms-multi__arrow--4 { margin-top: 55px; }

/* ============================================================
   模块5 产品优势（3334→3775.44，高 441.44）
   顶部 330 高横带 0:8752 #D5E4FC
   标题 34/49 @ y29；副标 16/24 y87；下划线 268×4 y126
   5 卡 220×280 @ x0/245/490/735/980，y190（白底 r14 阴影 0 3 10 #4D85FF40，圆 72 #BEE1FF）
   ============================================================ */
.wms-advantage {
  position: relative;
  width: 100%;
  min-height: 486px;
  overflow: hidden;
}

.wms-advantage * { box-sizing: border-box; }

.wms-advantage__bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1920px;
  height: 330px;
  background: #d5e4fc;
  pointer-events: none;
}

.wms-advantage__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;
}

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

.wms-advantage__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 220px;
  min-height: 280px;
  padding: 40px 16px 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(77, 133, 255, .25);
}

.wms-advantage__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #bee1ff;
}

.wms-advantage__ico img { display: block; object-fit: contain; }

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

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

/* ============================================================
   模块6 运用场景（3775.44→4258，高 482.56）
   背景图 0:8751（1920×543，起点 3715 = 本段上方 60.44，被 section 裁掉）
   标题 34/49 @ y89.56；副标 16/24 y146.56；下划线 362×4 y186.56
   5 张图 214×140 r10 @ x0/247/493/740/986，y250.56；图下胶囊 140×40（渐变白→#D4E2FF→白），名称 25 #002C87
   ============================================================ */
.wms-scene {
  position: relative;
  width: 100%;
  min-height: 438px;
  overflow: hidden;
}

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

.wms-scene__bg {
  position: absolute;
  top: -105px;
  left: 50%;
  transform: translateX(-50%);
  width: 1920px;
  height: 543px;
  background: url(/images/project/wms/m6-bg.webp) center top / 1920px 543px no-repeat;
  pointer-events: none;
}

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

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

.wms-scene__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 214px;
}

/* 场景图：直接用设计里的原图，圆角与投影改由 CSS 承担——整块导出节点会把 r10 和投影
   （0/3、模糊 6、#0C45BB 30%）烘进图片，并让导出框外扩 6px/边，浏览器里看着就是一圈白边 */
.wms-scene__pic {
  display: block;
  width: 214px;
  height: 140px;
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(12, 69, 187, 0.30);
  object-fit: cover;
}

.wms-scene__name {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  min-height: 40px;
  margin: 22px 0 0;
  background: linear-gradient(90deg, #f9fbff 0%, #d4e2ff 50%, #fcfdff 100%);
  font-size: 25px;
  line-height: 26px;
  font-weight: 700;
  color: #002c87;
  white-space: nowrap;
}

/* ============================================================
   模块7 智能作业链路（4258→4806，高 548）
   背景 0:8750 竖向渐变 #F9FCFF→#E5F0FF
   标题 34/49 @ y29；副标 16/24 y87；下划线 252×4 y126
   白卡 0:8949（1200×262 r20 渐变 #FFFFFF→#F8FBFF + 阴影 0 3 6 #5F93FF66）@ y190
   卡内 5 步 @ x56/306/555/805/1054，y40：外圆 64 #CDDDFE + 内圆 52 渐变，图标；
     名称 23/34 @ y77；说明 20/30 #888 @ y121
   卡内 4 箭头 50×50 @ x201/451/700/949，y105
   ============================================================ */
.wms-flow {
  position: relative;
  width: 100%;
  min-height: 548px;
  overflow: hidden;
  background: linear-gradient(180deg, #f9fcff 0%, #e5f0ff 100%);
}

.wms-flow * { box-sizing: border-box; }

.wms-flow__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;
}

.wms-flow__card {
  display: grid;
  grid-template-columns: 92px 53px 50px 55px 92px 53px 50px 54px 92px 53px 50px 55px 92px 52px 50px 55px 92px;
  align-items: start;
  min-height: 262px;
  margin: 60px 0 0;
  padding: 40px 0 0 56px;
  border-radius: 20px;
  background: linear-gradient(133deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 3px 6px rgba(95, 147, 255, .4);
  text-align: center;
}

.wms-flow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 9 个子元素落在 17 列模板的奇数列上（偶数列是设计里各不相同的空隙） */
.wms-flow__card > :nth-child(1) { grid-column: 1; }
.wms-flow__card > :nth-child(2) { grid-column: 3; }
.wms-flow__card > :nth-child(3) { grid-column: 5; }
.wms-flow__card > :nth-child(4) { grid-column: 7; }
.wms-flow__card > :nth-child(5) { grid-column: 9; }
.wms-flow__card > :nth-child(6) { grid-column: 11; }
.wms-flow__card > :nth-child(7) { grid-column: 13; }
.wms-flow__card > :nth-child(8) { grid-column: 15; }
.wms-flow__card > :nth-child(9) { grid-column: 17; }

.wms-flow__circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #cdddfe;
}

.wms-flow__circle::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(137deg, #aac6ff 0%, #5b8ff7 100%);
}

.wms-flow__circle img {
  position: relative;
  display: block;
  object-fit: contain;
}

.wms-flow__name {
  margin: 13px 0 0;
  font-size: 23px;
  line-height: 34px;
  font-weight: 700;
  color: #1a1a2e;
  white-space: nowrap;
}

.wms-flow__desc {
  margin: 10px 0 0;
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  color: #888;
  white-space: nowrap;
}

.wms-flow__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin-top: 65px;
}

.wms-flow__arrow img { display: block; width: 50px; height: 50px; object-fit: contain; }

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

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

.wms-feature__card,
.wms-advantage__card,
.wms-scene__pic {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* 场景图只抬图片、h3 不动：文案是图片之外的独立胶囊标签，跟着整体上浮会像悬空（整卡上浮只用于
   标题在卡内的卡片，如 MES 场景 / 缺陷场景 / ERP 行业卡）；hover 仍挂在 item 上，命中区不变 */
.wms-scene__item:hover .wms-scene__pic {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(12, 69, 187, .24);
}

.wms-overview__ico,
.wms-multi__ico {
  transition: transform 0.3s ease;
}

.wms-overview__item:hover .wms-overview__ico,
.wms-multi__item:hover .wms-multi__ico {
  transform: translateY(-4px);
}

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

  .wms-feature__card,
  .wms-advantage__card,
  .wms-scene__pic,
  .wms-overview__ico,
  .wms-multi__ico {
    transition: none;
  }

  .wms-feature__card:hover,
  .wms-advantage__card:hover,
  .wms-scene__item:hover .wms-scene__pic,
  .wms-overview__item:hover .wms-overview__ico,
  .wms-multi__item:hover .wms-multi__ico {
    transform: none;
  }
}