/* 全域社交电商系统详情页专属样式：6 个 sections（本页无 JS；main 全局 common.css 先行，home.css 管轮播公告） */

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

/* ============ 通用区块头 .section-head（social 复用结构；几何走 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 so-banner（banner 相对[696,1346]高650） ============ */
/* 去图层化：section min-height:650＋overflow:hidden；bg 盒定宽 1920 居中（背景定则 B，
   bottom/cover 不动，1920 下逐像素一致，窄屏对称裁边）；stage 100%+max-width:1920px 直挂文案
   （标题左对齐 left:230px，top 不变）；徽章盒本页特有保留；无 z-index；无断点 */
.so-banner {
  position: relative;
  width: 100%;
  min-height: 650px;
  overflow: hidden;  scroll-margin-top: 88px; /* 首页产品直达锚：吸顶 72＋16 */
}

.so-banner__bg {
  position: absolute;
  left: max(0px, calc(50% - 960px));
  top: 0;
  width: 1920px;
  height: 650px;
  background: url('/images/social/so-svg64.jpg') bottom / cover no-repeat;
}

/* v2 坐标统一：底图与 stage 同用 max(0px, 50% - 960px)——>=1920 居中，<1920 左缘贴视口只裁右边，
   两层同一坐标原点，文案不再随浏览器宽度相对底图漂移 */
.so-banner__stage {
  position: relative;
  width: 1920px;
  min-height: 650px;
  margin-left: max(0px, calc(50% - 960px));
}

/* 标题：(230,211) 448×68，56px #FFF 左 */
.so-banner__title {
  position: absolute;
  left: 230px;
  top: 211px;
  width: 448px;
  height: 68px;
  margin: 0;
  font-size: 56px;
  line-height: 68px;
  font-weight: 400;
  color: #fff;
  text-align: left;
  white-space: nowrap;
}

/* 副标题：(230,310) 569×29，24px #CBD5E1 左 */
.so-banner__sub {
  position: absolute;
  left: 230px;
  top: 310px;
  width: 569px;
  height: 29px;
  margin: 0;
  font-size: 24px;
  line-height: 29px;
  font-weight: 400;
  color: #cbd5e1;
  text-align: left;
  white-space: nowrap;
}

/* 徽章盒：(230,373) 367×56 r12 渐变＋描边；内文 20px #453693 */
.so-banner__badge {
  position: absolute;
  left: 230px;
  top: 373px;
  width: 367px;
  height: 56px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #fff 0%, #efd9ff 100%);
  border: 1px solid #707070;
  border-radius: 12px;
}

.so-banner__badge-text {
  position: absolute;
  left: 16px;
  top: 16px;
  width: 335px;
  height: 24px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  color: #453693;
  text-align: left;
  white-space: nowrap;
}

/* ============ 引擎 so-engine（engine 相对[1346,1731]高385；底白） ============ */
/* 去图层化：头换 sectionHead（标题 34 #0f172a／线 442×5 r3 #e11d48／缝 12，无副标题），
   section 加 box-sizing＋padding-top:67（原标题 top），头高 58；
   四卡改 grid 4 列 270px、列缝 40 均匀（930+270=1200 整，无需垫片），
   卡片区 margin-top:60（185−125）；卡改 relative；
   卡内图标/标题/双行相对卡不动（标题色/描述色/底色/图标左走数据）；
   色带 #EBF3FF (0,290,1920×437) absolute 宽 100%（溢出 342 进场景区，section 不设 hidden）；
   stage 去 min-height；section 保 min-height:385＋底白；reveal 由 common.js 驱动；
   hover 卡上浮（图标不动）；无 z-index；无断点 */
.so-engine {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 385px;
  padding-top: 67px;
  background: #fff;
}

.so-engine__band {
  position: absolute;
  left: 0;
  top: 290px;
  width: 100%;
  height: 437px;
  background: #ebf3ff;
}

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

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

/* 引擎卡：270×200 r12（底色走数据） */
.so-engine__card {
  position: relative;
  width: 270px;
  height: 200px;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* 图标：48×48 实图自带底色原样铺（left 走数据，top 23.1） */
.so-engine__icon {
  position: absolute;
  top: 23.1px;
  width: 48px;
  height: 48px;
  object-fit: fill;
}

.so-engine__card-title {
  position: absolute;
  top: 93px;
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  white-space: nowrap;
}

.so-engine__desc {
  position: absolute;
  left: 0;
  width: 270px;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
}

.so-engine__desc--l1 { top: 132px; }
.so-engine__desc--l2 { top: 158px; }

/* ============ 场景 so-scenes（相对[1731,2234]高503；底透明，引擎色带垫底） ============ */
/* 去图层化：头换 sectionHead（标题 34 #0f172a／线 374×5 r3 #e11d48／缝 12，无副标题；
   标题原 top:66，padding-top 取 66），头高 58；
   四卡改 grid 4 列 270px、列缝 40 均匀（930+270=1200 整，无需垫片），
   卡片区 margin-top:59（183−124）；卡改 relative；
   封面 div 换 img 真图（cover 上圆角，hover 缩放）；
   卡内标题/双行相对卡不动；stage 去 min-height；
   section 保 min-height:519（503＋16 下垫，卡底齐平留阴影位）；
   reveal 由 common.js 驱动；hover 卡上浮＋图缩放（overflow:hidden 防溢出）；
   无 z-index；无断点 */
.so-scenes {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 519px;
  padding-top: 66px;
  padding-bottom: 16px;
}

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

.so-scenes__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 270px);
  column-gap: 40px;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  margin: 59px auto 0;
}

/* 场景卡：270×320 白底 r12＋投影 */
.so-scenes__card {
  position: relative;
  width: 270px;
  height: 320px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.so-scenes__cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 270px;
  height: 160px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
  transition: transform 0.3s ease;
}

.so-scenes__card:hover .so-scenes__cover {
  transform: scale(1.2);
}

.so-scenes__card-title {
  position: absolute;
  top: 198px;
  left: 24px;
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  color: #111827;
  white-space: nowrap;
}

.so-scenes__desc {
  position: absolute;
  left: 24px;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #64748b;
  white-space: nowrap;
}

.so-scenes__desc--l1 { top: 241px; }
.so-scenes__desc--l2 { top: 269px; }

/* ============ 功能 so-functions（相对[2266,3184]高918，底 #EBF3FF） ============ */
/* 去图层化：头换 sectionHead（标题 34 #0f172a／线 272×5 r3 #e11d48／缝 12，无副标题），
   section 加 box-sizing＋padding-top:35（原标题 top），头高 58；
   六卡改 grid 3 列 368px、列缝 48、行缝 46，卡片区 margin-top:59（152−93）；
   卡改 relative；卡内图标盒/标题/双行相对卡不动（图标手拼 SVG 按 key 分支内联原样保留，
   0KB 无导出，真图导出后替换，见原案 TODO）；
   stage 去 min-height；section 保 min-height:918；reveal 由 common.js 驱动；
   hover 卡上浮（图标不动）；无 z-index；无断点 */
.so-functions {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 918px;
  padding-top: 35px;
  background: #ebf3ff;
}

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

.so-functions__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 368px);
  column-gap: 48px;
  row-gap: 46px;
  width: 100%;
  max-width: 1200px;
  margin: 59px auto 0;
}

/* 功能卡：368×344 白底 r16＋投影 */
.so-functions__card {
  position: relative;
  width: 368px;
  height: 344px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* 图标盒：卡内(134,48) 100×100 r16 #E1EDFF，flex 居中图标 */
.so-functions__icon {
  position: absolute;
  left: 134px;
  top: 48px;
  width: 100px;
  height: 100px;
  background: #e1edff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.so-functions__card-title {
  position: absolute;
  top: 175px;
  left: 0;
  width: 100%;
  margin: 0;
  font-size: 36px;
  line-height: 44px;
  font-weight: 400;
  color: #00467c;
  text-align: center;
  white-space: nowrap;
}

.so-functions__desc {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
  color: #000;
  text-align: center;
  white-space: nowrap;
}

.so-functions__desc--a { top: 247px; }
.so-functions__desc--b { top: 269px; }

/* ============ 裂变上 so-fission1（相对[3184,4822]高1638；底图下半垫底） ============ */
/* 去图层化：头换 sectionHead（标题 34 #0f172a／线 204×5 r3 #e11d48／缝 12，无副标题；
   标题原 left:858 即居中），section padding-top:36（原标题 top），头高 58；
   12 项＋手机改正常流容器（relative＋1200×877 居中，margin-top:49 即 143−94），
   项内坐标全换算容器相对（容器＝模块−(360,143)）；
   项循环（标题/描述/坐标走数据，图标按 key 分支手拼 SVG 内联原样保留，0KB 无导出）；
   手机样机＋屏按 bbox 叠放（屏压框内）；底图 absolute top:0 高 1066 宽 100% cover 置底，
   z-index:-1 沉底，尾部留空（原案 4250 后无底图）；section 保 min-height:1638＋overflow:hidden；
   stage 去 min-height；reveal 由 common.js 驱动；整区静态不 hover；
   无 z-index 叠顺序（底图沉底除外）；无断点 */
.so-fission1 {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 1638px;
  padding-top: 36px;
  overflow: hidden;
}

.so-fission1__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1066px;
  object-fit: cover;
  object-position: bottom center;
  z-index: -1;
}

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

.so-fission1__content {
  position: relative;
  width: 1200px;
  height: 877px;
  margin: 49px auto 0;
}

/* 裂变项：328×100（坐标走数据循环） */
.so-fission1__item {
  position: absolute;
  width: 328px;
  height: 100px;
}

.so-fission1__icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  background: #1a7af5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.so-fission1__item-title {
  position: absolute;
  left: 68px;
  top: 5px;
  width: 260px;
  margin: 0;
  font-size: 28px;
  line-height: 34px;
  font-weight: 400;
  color: #1a1a1a;
  text-align: left;
  white-space: nowrap;
}

.so-fission1__item-desc {
  position: absolute;
  left: 68px;
  top: 52px;
  width: 260px;
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  color: #888;
  text-align: left;
}

/* 手机样机＋屏按 bbox 叠放（容器相对） */
.so-fission1__phone {
  position: absolute;
  left: 404px;
  top: 96px;
  width: 392px;
  height: 697px;
  object-fit: fill;
}

.so-fission1__screen {
  position: absolute;
  left: 468px;
  top: 156px;
  width: 270px;
  height: 559px;
  object-fit: fill;
}

/* ============ 裂变下 so-fission2（相对[4250,5253]高1003；白底盖裂变上空尾） ============ */
/* 去图层化：头换 sectionHead（标题 34 #0f172a／线 204×5 #e11d48／缝 12，无副标题；
   只用 Y 轴靠下的标题，上面那个是裂变 1 的不许用）；
   section 负边距 margin-top:-572 拉回设计绝对位置（裂变上尾部是空的压不到东西，页面到底无后续），
   加 box-sizing＋padding-top:67（原标题 top），头高 58；
   组改正常流（relative＋1200×723 居中，margin-top:59 即 184−125），组内卡片/中部整图相对组不动；
   四卡循环（标题/描述/修饰走数据；815/819 标题偏移例外走修饰；描述 <br /> 走 Html 原样）；
   中部整图等比铺（组内 377,66.17；卡片 z-index:2 压图、图 z-index:0，原案层叠保留）；
   section 保 min-height:1003＋overflow:hidden；z-index:1 已删（DOM 顺序足够）；
   stage 去 min-height；reveal 由 common.js 驱动；hover 卡上浮（整图不动）；无断点 */
.so-fission2 {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 1003px;
  margin-top: -572px;
  padding-top: 67px;
  overflow: hidden;
  background: #fff;
}

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

.so-fission2__group {
  position: relative;
  width: 1200px;
  height: 723px;
  margin: 59px auto 0;
}

.so-fission2__art {
  position: absolute;
  top: 66.17px;
  left: 377px;
  width: 446px;
  height: 594.67px;
  z-index: 0;
  object-fit: contain;
}

.so-fission2__card {
  position: absolute;
  z-index: 2;
  width: 420px;
  height: 204px;
  border-radius: 12px;
  background: linear-gradient(90deg, #d8eafc 0%, #f2f9ff 100%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.so-fission2__card--815 { top: 0; left: 0; }
.so-fission2__card--819 { top: 0; left: 780px; }
.so-fission2__card--820 { top: 519px; left: 0; }
.so-fission2__card--821 { top: 519px; left: 780px; }

.so-fission2__title {
  position: absolute;
  top: 35px;
  left: 34px;
  width: 238px;
  margin: 0;
  font-size: 34px;
  line-height: 41px;
  font-weight: 400;
  color: #4086f3;
  text-align: center;
  white-space: nowrap;
}

.so-fission2__title--815 {
  left: 32px;
  width: 206px;
}

.so-fission2__title--819 {
  width: 204px;
}

.so-fission2__desc {
  position: absolute;
  top: 90px;
  left: 36px;
  width: 340px;
  margin: 0;
  font-size: 20px;
  line-height: 24.2px;
  font-weight: 400;
  color: #000;
  text-align: left;
}