/*
 * 工厂缺陷检测系统详情页（/project/defect，画板 0:9031，1920×5737）
 * 七个正文模块：hero 696→1346 / overview 1346→2090 / feature 2090→2858 /
 *   compare 2858→3640 / process 3640→4114 / advantage 4114→4616 / scene 4616→5194
 * 依赖 common.css + home.css（main 里已引入）。
 */

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

/* ============================================================
   模块1 首屏 hero（696→1346，高 650）
   背景 0:9033（1920×650 实景图）+ 0:9034 竖向蒙版（1426×650，E0F0FE → 透明）
   副标 40/58 #007DE2 @ (223,136)；主标 72/105 #122F8F @ (223,204)
   说明 28/40 #5B5D62 两行 @ (224,406)，宽 616
   ============================================================ */
.defect-hero {
  position: relative;
  width: 100%;
  min-height: 650px;
  overflow: hidden;
  scroll-margin-top: 88px; /* 首页直达锚：吸顶 72＋16，id="dfb" */
}

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

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

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

.defect-hero__mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 1426px;
  height: 650px;
  background: linear-gradient(90deg, #e0f0fe 0%, rgba(224, 240, 254, .95) 48%, rgba(223, 239, 253, .85) 69%, rgba(221, 237, 252, 0) 100%);
  pointer-events: none;
}

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

.defect-hero__tag {
  margin: 0;
  font-size: 40px;
  line-height: 58px;
  font-weight: 700;
  color: #007de2;
}

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

.defect-hero__desc {
  width: 616px;
  margin: 97px 0 0;
  font-size: 28px;
  line-height: 40px;
  font-weight: 400;
  color: #5b5d62;
}

/* ============================================================
   通用区块头（各模块标题 / 副标 / 下划线）
   ============================================================ */
.defect-sec-title {
  margin: 0;
  font-size: 34px;
  line-height: 49px;
  font-weight: 700;
  color: #333;
}

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

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

.defect-sec-rule--226 { width: 226px; margin-top: 18px; }
.defect-sec-rule--300 { width: 300px; }
.defect-sec-rule--284 { width: 284px; }
.defect-sec-rule--204 { width: 204px; }

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

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

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

.defect-overview__lead {
  width: 718px;
  margin: 31px auto 0;
  font-size: 24px;
  line-height: 40px;
  font-weight: 400;
  color: #0f172a;
}

/* 视觉组比 1200 列更靠左（设计 x285 < 360），用负 margin 外扩，不改内容列 */
.defect-overview__body {
  display: flex;
  margin: 62px 0 0;
  text-align: left;
}

.defect-overview__visual {
  position: relative;
  flex: none;
  width: 722px;
  height: 407px;
  margin-left: -75px;
}

/* 装饰：插画背后的渐变底衬 0:9043（628×407 @ 视觉组 (47,0)） */
.defect-overview__bg {
  position: absolute;
  top: 0;
  left: 47px;
  width: 628px;
  height: 407px;
  border-radius: 20px;
  background: linear-gradient(180deg, #f9fcff 0%, #e6f1ff 100%);
  pointer-events: none;
}

/* 插画 0:9092：节点 722×361 @ (0,30)；导出图带 10px 阴影留白，故 742×381 @ (-10,20) */
.defect-overview__pic {
  position: relative;
  display: block;
  width: 742px;
  height: 381px;
  margin: 20px 0 0 -10px;
}

/* 四个小胶囊叠在插画上：用负 margin 拉回，grid 定位到设计坐标 */
.defect-overview__chips {
  position: relative;
  display: grid;
  grid-template-columns: 70px 438px 70px;
  row-gap: 53px;
  margin: -300px 0 0 75px;
}

.defect-overview__chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 70px;
}

.defect-overview__chiptile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 14px;
}

.defect-overview__chip--1 .defect-overview__chiptile { background: linear-gradient(180deg, #f5f9ff 0%, #d6e7ff 100%); }
.defect-overview__chip--2 .defect-overview__chiptile { background: linear-gradient(180deg, #f4f9ff 0%, #d6e7ff 100%); }
.defect-overview__chip--3 .defect-overview__chiptile { background: linear-gradient(180deg, #eef5ff 0%, #d6e7ff 100%); }
.defect-overview__chip--4 .defect-overview__chiptile { background: linear-gradient(180deg, #ecf4ff 0%, #d6e7ff 100%); }

.defect-overview__chip--1 { grid-column: 1; grid-row: 1; }
.defect-overview__chip--2 { grid-column: 3; grid-row: 1; }
.defect-overview__chip--3 { grid-column: 1; grid-row: 2; }
.defect-overview__chip--4 { grid-column: 3; grid-row: 2; }

.defect-overview__chiptile img { display: block; }

.defect-overview__chiplabel {
  margin-top: 4px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #8f8f8f;
  white-space: nowrap;
}

.defect-overview__aside {
  flex: none;
  width: 521px;
  margin-left: 32px;
  padding-top: 4px;
}

.defect-overview__title {
  margin: 0;
  font-size: 32px;
  line-height: 46px;
  font-weight: 700;
  color: #216ab9;
}

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

.defect-overview__feats {
  display: grid;
  grid-template-columns: 260px 260px;
  row-gap: 40px;
  margin: 31px 0 0;
  padding: 0;
  list-style: none;
}

.defect-overview__feat {
  display: flex;
  align-items: flex-start;
  min-height: 58px;
}

.defect-overview__fico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #bee1ff;
}

.defect-overview__fico img { display: block; object-fit: contain; }

.defect-overview__fname {
  margin: 10px 0 0 24px;
  font-size: 23px;
  line-height: 34px;
  font-weight: 700;
  color: #1a1a2e;
  white-space: nowrap;
}

/* ============================================================
   模块3 核心功能（2090→2858，高 768，顶部 342 高 #DBE9FF 横带）
   ============================================================ */
.defect-feature {
  position: relative;
  width: 100%;
  min-height: 768px;
  overflow: hidden;
}

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

/* 装饰：顶部横带 0:9107 */
.defect-feature__bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1920px;
  height: 342px;
  background: #dbe9ff;
  pointer-events: none;
}

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

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

.defect-feature__card {
  position: relative;
  min-height: 260px;
  padding: 32px 0 0 24px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
  text-align: left;
}

/* 装饰：卡片右侧渐变面板（184×260，贴右缘） */
.defect-feature__card-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 184px;
  height: 260px;
  border-radius: 0 14px 14px 0;
  background: linear-gradient(270deg, #deebff 0%, #fff 100%);
  pointer-events: none;
}

/* 装饰：产品图下方光晕（第 2、3 卡） */
.defect-feature__glow {
  position: absolute;
  top: 173px;
  left: 203px;
  width: 168px;
  height: 78px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff 0%, #b2d3fb 100%);
  pointer-events: none;
}

.defect-feature__head {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.defect-feature__ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #1c5ed4;
}

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

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

.defect-feature__desc {
  position: relative;
  width: 204px;
  margin: 22px 0 0;
  font-size: 17px;
  line-height: 26px;
  font-weight: 400;
  color: #333;
}

.defect-feature__dots {
  position: relative;
  display: flex;
  align-items: flex-end;
  margin-top: 44px;
}

.defect-feature__dots i { display: block; margin-right: 6px; }

.defect-feature__dots i:nth-child(1) { width: 20px; height: 20px; border-radius: 5px; background: #4b86ff; }
.defect-feature__dots i:nth-child(2) { width: 16px; height: 16px; border-radius: 4px; background: #6094ff; }
.defect-feature__dots i:nth-child(3) { width: 12px; height: 12px; border-radius: 3px; background: #74a1ff; }

.defect-feature__dots b {
  display: block;
  width: 118px;
  height: 1px;
  margin-bottom: 5px;
  background: #c4d7fe;
}

/* 装饰：各卡产品插画（绝对定位在设计坐标，指针事件交给卡片） */
.defect-feature__pic {
  position: absolute;
  pointer-events: none;
}

.defect-feature__card--1 .defect-feature__pic { left: 202px; top: 41px; width: 180px; height: 220px; }
.defect-feature__card--2 .defect-feature__pic { left: 200px; top: 28px; width: 180px; height: 232px; }
.defect-feature__card--3 .defect-feature__pic { left: 194px; top: 15px; width: 190px; height: 246px; }
.defect-feature__card--4 .defect-feature__pic { left: 179px; top: 50px; width: 221px; height: 212px; }
.defect-feature__card--5 .defect-feature__pic { left: 196px; top: 64px; width: 184px; height: 188px; }
.defect-feature__card--6 .defect-feature__pic { left: 111px; top: 45px; width: 269px; height: 215px; }

/* ============================================================
   模块4 传统质检 vs 工厂缺陷检测系统（2858→3640，高 782，底 #EFF6FF）
   ============================================================ */
.defect-compare {
  position: relative;
  width: 100%;
  min-height: 782px;
  overflow: hidden;
  background: #eff6ff;
}

.defect-compare * { box-sizing: border-box; }

.defect-compare__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;
}

.defect-compare__table {
  display: grid;
  grid-template-columns: 440px 300px 440px;
  gap: 10px;
  margin-top: 60px;
}

.defect-compare__col {
  min-height: 560px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 3px 6px 0px rgba(46, 109, 246, 0.25);
}

.defect-compare__col--old,
.defect-compare__col--new { background: #f8fbff; }

.defect-compare__col--mid { background: #e4f0ff; }

.defect-compare__head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  font-size: 28px;
  line-height: 40px;
  font-weight: 700;
  color: #333;
}

.defect-compare__col--old .defect-compare__head { background: #dbdbdb; }
.defect-compare__col--new .defect-compare__head { background: #6694f9; color: #fff; }

.defect-compare__head--vs { padding: 0; }
.defect-compare__head--vs img { display: block; width: 300px; height: 80px; }

.defect-compare__row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 0 16px;
  font-size: 25px;
  line-height: 36px;
  font-weight: 400;
  color: #999;
}

.defect-compare__col--new .defect-compare__row { color: #012880; }

.defect-compare__row--label {
  color: #333;
  font-weight: 700;
}

.defect-compare__row + .defect-compare__row { border-top: 1px solid rgba(112, 112, 112, .1); }

/* ============================================================
   模块5 系统工作流程（3640→4114，高 474）
   ============================================================ */
.defect-process {
  position: relative;
  width: 100%;
  min-height: 474px;
  overflow: hidden;
}

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

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

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

.defect-process__step { flex: none; }
.defect-process__step--1 { width: 230px; }
.defect-process__step--2 { width: 230px; }
.defect-process__step--3 { width: 207px; }
.defect-process__step--4 { width: 184px; }

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

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

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

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

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

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

.defect-process__arrow--1 { margin-left: 28px; margin-right: 42px; }
.defect-process__arrow--2 { margin-left: 25px; margin-right: 49px; }
.defect-process__arrow--3 { margin-left: 36px; margin-right: 52px; }

/* ============================================================
   模块6 产品优势（4114→4616，高 502，底 #EFF6FF）
   ============================================================ */
.defect-advantage {
  position: relative;
  width: 100%;
  min-height: 502px;
  overflow: hidden;
  background: #eff6ff;
}

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

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

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

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

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

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

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

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

/* ============================================================
   模块7 适用场景（4616→5194，高 578）
   ============================================================ */
.defect-scene {
  position: relative;
  width: 100%;
  min-height: 578px;
  overflow: hidden;
}

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

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

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

.defect-scene__card {
  width: 280px;
  min-height: 292px;
  border-radius: 16px;
  overflow: hidden;
  /* 卡面图 280×280，贴底摆放；上方 12px 被实景图盖住 */
  background-color: #f8f9fd;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 280px 280px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
}

.defect-scene__card--1 { background-image: url(/images/project/defect/m7-bg1.webp); }
.defect-scene__card--2 { background-image: url(/images/project/defect/m7-bg2.webp); }
.defect-scene__card--3 { background-image: url(/images/project/defect/m7-bg3.webp); }
.defect-scene__card--4 { background-image: url(/images/project/defect/m7-bg4.webp); }

.defect-scene__pic {
  display: block;
  width: 280px;
  height: 150px;
  object-fit: cover;
}

.defect-scene__name {
  margin: 29px 0 0;
  font-size: 22px;
  line-height: 32px;
  font-weight: 700;
  color: #1e293b;
}

.defect-scene__desc {
  margin: 15px 0 0;
  font-size: 17px;
  line-height: 25px;
  font-weight: 400;
  color: #555;
}

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

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

.defect-feature__card,
.defect-advantage__card,
.defect-scene__card,
.defect-process__circle {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.defect-scene__card:hover { transform: translateY(-6px); }

.defect-process__step:hover .defect-process__circle { transform: translateY(-4px); }

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

  .defect-feature__card,
  .defect-advantage__card,
  .defect-scene__card,
  .defect-process__circle {
    transition: none;
  }

  .defect-feature__card:hover,
  .defect-advantage__card:hover,
  .defect-scene__card:hover,
  .defect-process__step:hover .defect-process__circle {
    transform: none;
  }
}