/*
 * ERP 系统详情页（/project/erp，画板 0:9592，1920×4792）
 * 已完成前三个模块：hero 696→1346 / overview 1346→1908 / feature 1908→2730
 * overview 与 feature 共用整幅背景图（0:9595，1346→2730），由 .erp-mid 统一铺。
 * 依赖 common.css + home.css（main 里已引入）。
 */

/* 页面底色 = 画板 0:9592 的填充 #F9FCFF */
.erp-page { background: #f9fcff; }

/* ============================================================
   模块1 首屏 hero（696→1346，高 650）
   ============================================================ */
.erp-hero {
  position: relative;
  width: 100%;
  min-height: 650px;
  overflow: hidden;
  scroll-margin-top: 88px; /* 首页直达锚：吸顶 72＋16，id="erpb" */
}

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

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

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

.erp-hero__mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 1282px;
  height: 650px;
  background: linear-gradient(90deg, #c8dfff 0%, rgba(230, 242, 255, .55) 60%, rgba(230, 242, 255, 0) 100%);
  pointer-events: none;
}

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

.erp-hero__kicker {
  display: flex;
  align-items: center;
  height: 29px;
  margin: 0;
  font-size: 20px;
  line-height: 29px;
  font-weight: 400;
  color: #2d80ff;
}

.erp-hero__rule {
  display: block;
  width: 79px;
  height: 2px;
  margin-right: 16px;
  background: #2680eb;
}

.erp-hero__rule--right { margin-right: 0; margin-left: 20px; }

.erp-hero__title {
  margin: -5px 0 0;
  font-size: 80px;
  line-height: 116px;
  font-weight: 700;
  color: #0064ff;
}

.erp-hero__sub {
  margin: 11px 0 0;
  font-size: 28px;
  line-height: 40px;
  font-weight: 400;
  color: #165da4;
}

.erp-hero__feats {
  display: flex;
  margin: 66px 0 0;
  padding: 0;
  list-style: none;
}

.erp-hero__feat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.erp-hero__feat:nth-child(1) { width: 100px; }
.erp-hero__feat:nth-child(2) { width: 100px; margin-left: 48px; }
.erp-hero__feat:nth-child(3) { width: 125px; margin-left: 41px; }
.erp-hero__feat:nth-child(4) { width: 100px; margin-left: 42px; }
.erp-hero__feat:nth-child(5) { width: 100px; margin-left: 47px; }

.erp-hero__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #a5d5ff;
}

.erp-hero__ico img { display: block; object-fit: contain; }

.erp-hero__name {
  margin-top: 24px;
  font-size: 25px;
  line-height: 36px;
  font-weight: 400;
  color: #165da4;
  white-space: nowrap;
}

/* ============================================================
   中段共享背景（overview + feature 共用 0:9595 整幅图）
   ============================================================ */
.erp-mid {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* 装饰：整幅背景图 1920×1384，从 1346 起 */
.erp-mid__bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1920px;
  height: 1384px;
  background: url(/images/project/erp/mid-bg.webp) center top / 1920px 1384px no-repeat;
  pointer-events: none;
}

/* ============================================================
   模块2 产品概述（1346→1908，高 562）
   ============================================================ */
.erp-overview {
  position: relative;
  width: 100%;
  min-height: 562px;
  overflow: hidden;
}

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

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

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

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

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

.erp-sec-rule--334 { width: 334px; margin-top: 18px; }
.erp-sec-rule--268 { width: 268px; }
.erp-sec-rule--220 { width: 220px; }
.erp-sec-rule--300 { width: 300px; }
.erp-sec-rule--285 { width: 285px; }

.erp-overview__body {
  display: flex;
  margin-top: 71px;
  text-align: left;
}

.erp-overview__left { flex: none; width: 672px; }

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

.erp-overview__feats {
  display: flex;
  gap: 50px;
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
}

.erp-overview__feat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

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

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

.erp-overview__sub {
  margin-top: 15px;
  font-size: 17px;
  line-height: 25px;
  font-weight: 400;
  color: #888;
  white-space: nowrap;
}

.erp-overview__visual {
  flex: none;
  width: 506px;
  margin-top: -11px;
  margin-left: 61px;
}

.erp-overview__pic {
  display: block;
  width: 506px;
  height: 370px;
}

/* ============================================================
   模块3 核心功能（1908→2730，高 822）
   ============================================================ */
.erp-feature {
  position: relative;
  width: 100%;
  min-height: 822px;
  overflow: hidden;
}

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

.erp-feature__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;
}

.erp-feature__list {
  display: grid;
  grid-template-columns: repeat(3, 380px);
  justify-content: space-between;
  row-gap: 24px;
  margin: 60px 0 0;
  padding: 0;
  list-style: none;
}

.erp-feature__card {
  position: relative;
  width: 380px;
  min-height: 272px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, #eff4ff 100%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
  overflow: hidden;
  text-align: left;
}

.erp-feature__head {
  display: flex;
  align-items: flex-start;
  padding: 24px 0 0 24px;
}

.erp-feature__badge {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 46px;
  border-radius: 10px;
  background: linear-gradient(180deg, #84acff 0%, #4783ff 100%);
  font-size: 34px;
  line-height: 46px;
  font-weight: 700;
  color: #fff;
}

.erp-feature__name {
  margin: 5px 0 0 16px;
  font-size: 22px;
  line-height: 32px;
  font-weight: 700;
  color: #333;
  white-space: nowrap;
}

.erp-feature__desc {
  position: relative;
  width: 176px;
  margin: 22px 0 0 24px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #333;
}

/* 设计里第 2、3 卡说明列更宽（192），否则首行会多折一行 */
.erp-feature__card:nth-child(2) .erp-feature__desc,
.erp-feature__card:nth-child(3) .erp-feature__desc { width: 192px; }

/* 装饰：大号码与产品图（绝对定位在设计坐标，压在文字下层之上） */
.erp-feature__deco {
  position: absolute;
  pointer-events: none;
}

.erp-feature__deco--num {
  left: 142px;
  top: 60px;
  width: 238px;
  height: 212px;
}

.erp-feature__deco--pic {
  left: 208px;
  top: 91px;
  width: 150px;
  height: 150px;
}

.erp-feature__card:nth-child(5) .erp-feature__deco--pic {
  left: 203px;
  top: 85px;
  width: 160px;
  height: 160px;
}

/* ============================================================
   模块4 产品优势（2730→3304，高 574）
   ============================================================ */
.erp-advantage {
  position: relative;
  width: 100%;
  min-height: 574px;
  overflow: hidden;
}

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

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

.erp-advantage__body {
  display: flex;
  margin-top: 35px;
  text-align: left;
}

.erp-advantage__pic {
  flex: none;
  display: block;
  width: 440px;
  height: 414px;
  margin-left: -30px;
  margin-bottom: -5px;
}

.erp-advantage__list {
  flex: none;
  display: grid;
  grid-template-columns: 423px 423px;
  grid-auto-rows: 80px;
  align-items: start;
  row-gap: 56px;
  margin: 25px 0 0 7px;
  padding: 0;
  list-style: none;
}

.erp-advantage__item {
  display: flex;
  align-items: flex-start;
}

.erp-advantage__ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
}

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

.erp-advantage__txt { margin: -2px 0 0 24px; }

.erp-advantage__name {
  margin: 0;
  font-size: 25px;
  line-height: 36px;
  font-weight: 700;
  color: #333;
  white-space: nowrap;
}

.erp-advantage__desc {
  margin: 16px 0 0;
  font-size: 20px;
  line-height: 29px;
  font-weight: 400;
  color: #333;
  white-space: nowrap;
}

/* ============================================================
   模块5 适用行业（3304→3706，高 402，底 #ECF4FF）
   ============================================================ */
.erp-industry {
  position: relative;
  width: 100%;
  min-height: 402px;
  overflow: hidden;
  background: #ecf4ff;
}

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

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

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

/* 卡面 = 蓝色渐变压在实景图上（渐变在上层），一起做卡片的背景 */
.erp-industry__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 220px;
  height: 180px;
  padding-top: 45px;
  border-radius: 14px;
  overflow: hidden;
  background-repeat: no-repeat, no-repeat;
  background-size: 220px 180px, 220px 180px;
  background-position: center, center;
}

.erp-industry__card--1 { background-image: linear-gradient(180deg, rgba(148, 193, 255, .25) 0%, rgba(57, 140, 249, .84) 100%), url(/images/project/erp/m5-pic1.webp); }
.erp-industry__card--2 { background-image: linear-gradient(180deg, rgba(148, 193, 255, .25) 0%, rgba(57, 140, 249, .84) 100%), url(/images/project/erp/m5-pic2.webp); }
.erp-industry__card--3 { background-image: linear-gradient(180deg, rgba(148, 193, 255, .25) 0%, rgba(57, 140, 249, .84) 100%), url(/images/project/erp/m5-pic3.webp); }
.erp-industry__card--4 { background-image: linear-gradient(180deg, rgba(148, 193, 255, .25) 0%, rgba(57, 140, 249, .84) 100%), url(/images/project/erp/m5-pic4.webp); }
.erp-industry__card--5 { background-image: linear-gradient(180deg, rgba(148, 193, 255, .25) 0%, rgba(57, 140, 249, .84) 100%), url(/images/project/erp/m5-pic5.webp); }

.erp-industry__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
}

.erp-industry__ico img { display: block; object-fit: contain; }

.erp-industry__name {
  margin: 20px 0 0;
  font-size: 23px;
  line-height: 32px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

/* ============================================================
   模块6 使用流程（3706→4244，高 538）
   ============================================================ */
.erp-process {
  position: relative;
  width: 100%;
  min-height: 538px;
  overflow: hidden;
}

.erp-process * { box-sizing: border-box; }

.erp-process__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;
}

.erp-process__steps {
  display: flex;
  align-items: flex-start;
  margin-top: 60px;
}

.erp-process__step { flex: none; }
.erp-process__step--1 { width: 184px; }
.erp-process__step--2 { width: 184px; }
.erp-process__step--3 { width: 161px; }
.erp-process__step--4 { width: 138px; }

.erp-process__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  margin: 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #d8edff 0%, #9ad0ff 100%);
}

.erp-process__circle img { display: block; object-fit: contain; }

.erp-process__name {
  margin: 22px 0 0;
  font-size: 28px;
  line-height: 40px;
  font-weight: 700;
  color: #333;
  white-space: nowrap;
}

.erp-process__desc {
  margin: 23px 0 0;
  font-size: 23px;
  line-height: 34px;
  font-weight: 400;
  color: #888;
  white-space: nowrap;
}

.erp-process__arrow {
  flex: none;
  display: block;
  margin-top: 50px;
}

.erp-process__arrow img { display: block; width: 40px; height: 40px; }

.erp-process__steps > .erp-process__arrow:nth-of-type(1) { margin-left: 68px; margin-right: 71px; }
.erp-process__steps > .erp-process__arrow:nth-of-type(2) { margin-left: 68px; margin-right: 70px; }
.erp-process__steps > .erp-process__arrow:nth-of-type(3) { margin-left: 67px; margin-right: 71px; }

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

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

.erp-feature__card,
.erp-industry__card,
.erp-hero__ico,
.erp-overview__ico,
.erp-advantage__ico {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.erp-industry__card:hover { transform: translateY(-6px); }

.erp-hero__feat:hover .erp-hero__ico,
.erp-overview__feat:hover .erp-overview__ico,
.erp-advantage__item:hover .erp-advantage__ico {
  transform: translateY(-4px);
}

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

  .erp-feature__card,
  .erp-hero__ico,
  .erp-overview__ico {
    transition: none;
  }

  .erp-feature__card:hover,
  .erp-hero__feat:hover .erp-hero__ico,
  .erp-overview__feat:hover .erp-overview__ico {
    transform: none;
  }
}