/* 多用户电商分销系统详情页专属样式：5 个 sections（本页无 JS；main 全局 common.css 先行，home.css 管轮播公告） */

/* ============ distribution 字体：阿里普惠体按字重映射（族在 common.css 注册） ============ */
[class*="dis-"] {
  font-family: 'AlibabaPuHuiTi-3', Inter, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ============ 通用区块头 .section-head（distribution 复用结构；几何走 inline） ============ */
.section-head {
  margin: 0;
  padding: 0;
}

.section-head__title {
  margin: 0 auto;
  padding: 0;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
}

.section-head__sub {
  margin: 14px auto 0;
  padding: 0;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
}

.section-head__line {
  height: 4px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  padding: 0;
}

/* ============ 滚动显现 reveal（同站最小一次性方案，由 common.js 全局 Observer 驱动加 .in） ============ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

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

/* ============ Banner dis-banner（相对[696,1346]高650） ============ */
/* 去图层化：section min-height:650＋overflow:hidden；bg 盒定宽 1920 居中（背景定则 B，
   bottom/cover 不动，1920 下逐像素一致，窄屏对称裁边）；stage 100%+max-width:1920px 直挂文案
   （标题左对齐 left:190px，top 不变）；右侧灰占位不渲染；无 z-index；无断点 */
.dis-banner {
  position: relative;
  width: 100%;
  min-height: 650px;
  overflow: hidden;  scroll-margin-top: 88px; /* 首页产品直达锚：吸顶 72＋16 */
}

.dis-banner__bg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 1920px;
  height: 650px;
  background: url('/images/distribution/dis-banner6.jpg') bottom / cover no-repeat;
}

.dis-banner__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  min-height: 650px;
  margin: 0 auto;
}

/* 标题：(190,232) 504×68，56px #071C48 左 */
.dis-banner__title {
  position: absolute;
  left: 190px;
  top: 232px;
  width: 504px;
  height: 68px;
  margin: 0;
  font-size: 56px;
  line-height: 68px;
  font-weight: 400;
  color: #071c48;
  text-align: left;
  white-space: nowrap;
}

/* 副标题：(190,339) 689×29，24px #3D7FD6 左 */
.dis-banner__sub {
  position: absolute;
  left: 190px;
  top: 339px;
  width: 689px;
  height: 29px;
  margin: 0;
  font-size: 24px;
  line-height: 29px;
  font-weight: 400;
  color: #3d7fd6;
  text-align: left;
  white-space: nowrap;
}

/* ============ 裂变分佣引擎 dis-engine（相对[1346,1826]高480，底 #F8FAFC） ============ */
/* 去图层化：头换 sectionHead（标题 34 #111827／副 16／线 502×5 r3 #3b82f6／缝 17），
   section 加 box-sizing＋padding-top:67（原标题 top），头高 96；
   白板改正常流（relative＋1200 居中，margin-top:57 即 220−163），板内总部/连线/角色卡相对板不动；
   纯色带 #EBF3FF 顶 315.5 高 686 保留跨区（宽 100%，section 不设 hidden；后续区透明/自带底盖住带尾）；
   stage 去 min-height；角色卡 hover 上浮（白板/总部不动）；无 z-index；无断点 */
.dis-engine {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 480px;
  padding-top: 67px;
  background: #f8fafc;
}

.dis-engine__band {
  position: absolute;
  left: 0;
  top: 315.5px;
  width: 100%;
  height: 686px;
  background: #ebf3ff;
}

.dis-engine__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.dis-engine__board {
  position: relative;
  width: 1200px;
  height: 260px;
  margin: 57px auto 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(17, 24, 39, 0.06);
}

/* 总部深块：板内(60,40) 180×180 渐变 r16 */
.dis-engine__hq {
  position: absolute;
  left: 60px;
  top: 40px;
  width: 180px;
  height: 180px;
  border-radius: 16px;
  background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
}

.dis-engine__hq-name {
  position: absolute;
  left: 42px;
  top: 41px;
  width: 96px;
  margin: 0;
  font-size: 24px;
  line-height: 29px;
  font-weight: 400;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

.dis-engine__hq-desc {
  position: absolute;
  left: 34px;
  top: 81px;
  width: 112px;
  margin: 0;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: #bfdbfe;
  text-align: center;
  white-space: nowrap;
}

.dis-engine__hq-badge {
  position: absolute;
  left: 40px;
  top: 112px;
  width: 100px;
  height: 29px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.2);
}

.dis-engine__hq-badge span {
  position: absolute;
  left: 9px;
  top: 7px;
  width: 82px;
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

/* 连接线：板内 top:130 高 3 #3B82F6＋三角箭头 */
.dis-engine__link {
  position: absolute;
  top: 130px;
  height: 3px;
  background: #3b82f6;
}

.dis-engine__link::after {
  content: '';
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 15px solid #3b82f6;
}

.dis-engine__link--1 {
  left: 252px;
  width: 80px;
}

.dis-engine__link--2 {
  left: 551px;
  width: 70px;
}

.dis-engine__link--3 {
  left: 840px;
  width: 70px;
}

/* 角色卡：板内 top:55 180×150 r12 双色边框 */
.dis-engine__role {
  position: absolute;
  top: 55px;
  width: 180px;
  height: 150px;
  border-radius: 12px;
  border: 2px solid;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.dis-engine__role--1 {
  left: 359px;
  background: #eff6ff;
  border-color: #bfdbfe;
}

.dis-engine__role--2 {
  left: 648px;
  background: #f0fdf4;
  border-color: #a7f3d0;
}

.dis-engine__role--3 {
  left: 937px;
  background: #fffbeb;
  border-color: #fde68a;
}

.dis-engine__role--1 .dis-engine__role-name { color: #1e3a8a; }
.dis-engine__role--2 .dis-engine__role-name { color: #065f46; }
.dis-engine__role--3 .dis-engine__role-name { color: #92400e; }

.dis-engine__role-name {
  position: absolute;
  left: 0;
  right: 0;
  top: 30px;
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
}

.dis-engine__role-desc {
  position: absolute;
  left: 0;
  right: 0;
  top: 65px;
  margin: 0;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: #64748b;
  text-align: center;
  white-space: nowrap;
}

.dis-engine__role-badge {
  position: absolute;
  left: 40px;
  top: 96px;
  width: 100px;
  height: 27px;
  border-radius: 14px;
}

.dis-engine__role-badge span {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
}

.dis-engine__role--1 .dis-engine__role-badge {
  background: #dbeafe;
}

.dis-engine__role--1 .dis-engine__role-badge span { color: #1d4ed8; }

.dis-engine__role--2 .dis-engine__role-badge {
  background: #d1fae5;
}

.dis-engine__role--2 .dis-engine__role-badge span { color: #047857; }

.dis-engine__role--3 .dis-engine__role-badge {
  background: #fef3c7;
}

.dis-engine__role--3 .dis-engine__role-badge span { color: #b45309; }

/* ============ 工具箱 dis-toolbox（相对[1826,2348]高522＋10px 呼吸位；底透明，引擎色带垫底） ============ */
/* 去图层化：头换 sectionHead（标题 34 #111827／线 568×5 r3 #3b82f6／缝 12），
   section 加 box-sizing＋padding-top:67（原标题 top），头高 58；
   四卡改 grid 4 列 280px、列缝 26（三缝均匀，末卡 918+280=1198≈1200 右齐），
   卡片区 margin-top:59（184−125）；卡改 relative；
   卡内改流式（图 160／名 margin-top:26／三行 margin 19/11/11，纵节奏与原 186/229/257/285 一致），
   卡 padding-bottom:26（302+26=328 与原高一致，换文案自动撑高）；mask 渐变罩仅卡 1 保留，随图；
   stage 去 min-height；section 保 min-height:522；reveal 由 common.js 驱动；
   hover 卡上浮＋图缩放（overflow:hidden 防溢出）；无 z-index；无断点 */
.dis-toolbox {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 522px;
  padding-top: 67px;
  background: transparent;
  overflow: hidden;
}

.dis-toolbox__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.dis-toolbox__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 280px);
  column-gap: 26px;
  width: 100%;
  max-width: 1200px;
  margin: 59px auto 0;
}

.dis-toolbox__card {
  position: relative;
  width: 280px;
  padding-bottom: 26px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(17, 24, 39, 0.06);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.dis-toolbox__pic {
  position: relative;
  width: 280px;
  height: 160px;
  overflow: hidden;
}

.dis-toolbox__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.dis-toolbox__card:hover .dis-toolbox__pic img {
  transform: scale(1.2);
}

.dis-toolbox__mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0) 55%, rgba(17, 24, 39, 0.08) 100%);
}

.dis-toolbox__name {
  margin: 26px 0 0 24px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  color: #1f2937;
  white-space: nowrap;
}

.dis-toolbox__d1,
.dis-toolbox__d2,
.dis-toolbox__d3 {
  margin: 0 0 0 24px;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: #6b7280;
  white-space: nowrap;
}

.dis-toolbox__d1 { margin-top: 19px; }
.dis-toolbox__d2 { margin-top: 11px; }
.dis-toolbox__d3 { margin-top: 11px; }

/* ============ 核心功能 dis-core（相对[2338,3286]高948；底白→浅蓝渐变直接画 section） ============ */
/* 去图层化：头换 sectionHead（标题 36 #111827／副 16／线 330×5 r3 #3b82f6／缝 17），
   section 加 box-sizing＋padding-top:67（原标题 top），头高 99；
   八卡改 grid 4 列 272px、列缝 37（缝 37/38/37，居中后最大差 1px 可忽略）、行缝 48，
   卡片区 margin-top:58（224−166）；卡改 relative；
   卡内图标盒/名/三行相对卡不动（图标盒 flex 居中沿用，圆点 i 保留）；
   stage 去 min-height；section 保 min-height:948；reveal 由 common.js 驱动；
   hover 卡上浮（图标不动）；无 z-index；无断点 */
.dis-core {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 948px;
  padding-top: 67px;
  background: linear-gradient(180deg, #ffffff 0%, #f2f7ff 100%);
  overflow: hidden;
}

.dis-core__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.dis-core__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 272px);
  column-gap: 37px;
  row-gap: 48px;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  margin: 58px auto 0;
}

.dis-core__card {
  position: relative;
  width: 272px;
  height: 322px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* 图标盒：卡内(91,32) 90×90 r20 #E1EDFF，flex 居中图标 */
.dis-core__icon {
  position: absolute;
  left: 91px;
  top: 32px;
  width: 90px;
  height: 90px;
  border-radius: 20px;
  background: #e1edff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dis-core__icon img {
  display: block;
  max-width: 40px;
  max-height: 40px;
  object-fit: contain;
}

/* 名：28px #003A9A 居中；行 20px #111827＋6px 圆点 */
.dis-core__name {
  position: absolute;
  left: 0;
  top: 149px;
  width: 100%;
  margin: 0;
  font-size: 28px;
  line-height: 34px;
  font-weight: 400;
  color: #003a9a;
  text-align: center;
  white-space: nowrap;
}

.dis-core__row {
  position: absolute;
  left: 74px;
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  color: #111827;
  white-space: nowrap;
}

.dis-core__row--1 { top: 204px; }
.dis-core__row--2 { top: 234px; }
.dis-core__row--3 { top: 264px; }

.dis-core__row i {
  position: absolute;
  left: -14px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6c5ce7;
  opacity: 0.6;
}

/* ============ 行业方案 dis-solutions（相对[3286,3826]；底白） ============ */
/* 去图层化：头换 sectionHead（标题 34 #0a1128／副 16／线 476×4 r2 #3b82f6／缝 17），
   section 加 box-sizing＋padding-top:35（原标题 top），头高 95；
   四卡改 grid 4 列 280px、列缝 26 居中（末缝差 2px 可忽略），卡片区 margin-top:60（190−130）；
   卡改 relative；卡内改流式（图 150／名 margin-top:33／两行 margin 19/13，卡高 350 保留底纹不走形）；
   头图 cover＋上圆角（overflow:hidden）；卡底纹 bottom/106% 原样保留；
   stage 去 min-height；section 保 min-height:636；reveal 由 common.js 驱动；
   hover 卡上浮＋图缩放；无 z-index；无断点 */
.dis-solutions {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 636px;
  padding-top: 35px;
  background: #fff;
  overflow: hidden;
}

.dis-solutions__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.dis-solutions__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 280px);
  column-gap: 26px;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  margin: 60px auto 0;
}

.dis-solutions__card {
  position: relative;
  width: 280px;
  height: 350px;
  /* 卡底图已裁透明边（源 292×362 四边透明 6/17/6/9，现 280×336 实 content），cover 底部对齐铺满，无间隙 */
  background: url('/images/distribution/dis-solutions-cardbg.jpg') no-repeat center bottom / cover #f9fafe;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(17, 24, 39, 0.06);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.dis-solutions__pic {
  position: relative;
  width: 280px;
  height: 150px;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

.dis-solutions__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.dis-solutions__card:hover .dis-solutions__pic img {
  transform: scale(1.2);
}

.dis-solutions__name {
  margin: 33px 0 0;
  font-size: 22px;
  line-height: 27px;
  font-weight: 400;
  color: #1e293b;
  text-align: center;
  white-space: nowrap;
}

.dis-solutions__d1,
.dis-solutions__d2 {
  margin: 0;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: #64748b;
  text-align: center;
  white-space: nowrap;
}

.dis-solutions__d1 { margin-top: 19px; }
.dis-solutions__d2 { margin-top: 13px; }