/* 社区O2O详情页专属样式：6 个 sections（本页无 JS；main 全局 common.css 先行） */

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

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

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

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

/* 标题：stage(172,212) 344×68，56px #FFF 左（文案直挂 stage，无中转层） */
.sq-banner__title {
  position: absolute;
  left: 172px;
  top: 212px;
  width: 344px;
  height: 68px;
  margin: 0;
  font-size: 56px;
  line-height: 68px;
  font-weight: 400;
  color: #ffffff;
  text-align: left;
  white-space: nowrap;
}

/* 副标题：stage(172,319) 643×29，24px #F8FAFC 左 */
.sq-banner__sub {
  position: absolute;
  left: 172px;
  top: 319px;
  width: 643px;
  height: 29px;
  margin: 0;
  font-size: 24px;
  line-height: 29px;
  font-weight: 400;
  color: #f8fafc;
  text-align: left;
  white-space: nowrap;
}

/* 口号：stage(172,368) 309×29，24px #9AFFE9 左 */
.sq-banner__slogan {
  position: absolute;
  left: 172px;
  top: 368px;
  width: 309px;
  height: 29px;
  margin: 0;
  font-size: 24px;
  line-height: 29px;
  font-weight: 400;
  color: #9affe9;
  text-align: left;
  white-space: nowrap;
}

/* ============ 生态 sq-eco（相对[1346,1940]高594，底 #F8FAFC） ============ */
/* 去图层化 v2：头改正常流（标题 margin:0 居中，线 margin:12px auto 0）；
   section 加 padding-top:67（原标题 top）＋box-sizing:border-box，头高 67+41+12+4=124；
   卡片区 margin-top:64（原卡 top:188−头高 124），grid 4 列 280px、缝 26 均匀
   （4×280+3×26=1198，justify-content:center→首卡 x=1，与原 1/307/613/919 一致）；
   卡内改 flex 纵排居中＋文字块正常流（图 205／标题 margin-top:26／描述 27／11，纵节奏与原 top 231/282/310 一致）；
   stage 去 min-height（高度归 section 管，防双重撑高）；无 z-index；无断点 */
.sq-eco {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 594px;
  padding-top: 67px;
  background: #f8fafc;
}

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

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

.sq-eco__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 280px;
  height: 373px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.sq-eco__pic {
  display: block;
  width: 280px;
  height: 205px;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
  transition: transform 0.3s ease;
}

.sq-eco__card:hover .sq-eco__pic {
  transform: scale(1.2);
}

.sq-eco__card-title {
  height: 24px;
  margin: 26px 0 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  color: #1f293b;
  text-align: center;
  white-space: nowrap;
}

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

.sq-eco__desc--l1 {
  margin-top: 27px;
}

.sq-eco__desc--l2 {
  margin-top: 11px;
}

/* ============ 物业端 sq-property（相对[1940,2555]高615，底 #EBF3FF） ============ */
/* 去图层化 v2：头改正常流（标题 margin:0 居中，副标题 margin:14px auto 0，线 margin:17px auto 0）；
   section 加 padding-top:34（原标题 top）＋box-sizing:border-box，
   头高 34+41+14+19+17+4=129（副标题 top:89／线 top:125 与原一致）；
   仪表盘整图改正常流块（1200×390 尺寸／contain 不拉伸不动），content margin-top:64
   （原图 top:193−头高 129）；头以外不动；stage 去 min-height；无 z-index；无断点 */
.sq-property {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 615px;
  padding-top: 34px;
  background: #ebf3ff;
}

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

.sq-property__content {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 64px auto 0;
}

.sq-property__dash {
  width: 1200px;
  height: 390px;
  overflow: hidden;
}

.sq-property__dash-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.sq-property__dash-img text {
  font-family: 'AlibabaPuHuiTi-3', Inter, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ============ 三端 sq-showcase（相对[2555,3096]高541，白底，零图片） ============ */
/* 去图层化 v2：头改正常流（标题 margin:0 居中，副标题 margin:14px auto 0，线 margin:17px auto 0）；
   section 加 padding-top:38（原标题 top）＋box-sizing:border-box，
   头高 38+41+14+19+17+4=133（副标题 top:93／线 top:129 与原一致）；
   卡片区 margin-top:64（原卡 top:197−头高 133），grid 3 列 360px、缝 60 均匀
   （3×360+2×60=1200 整，0/420/840 与原一致）；
   卡内改 flex 纵排居中＋文字块正常流（顶条 10／图标 margin-top:40／标题 25／三行 20/9/9，
   纵节奏与原 50/123/170/197/224 一致，图标原居中 left:156→margin auto）；
   图标系手拼 SVG，按 key 条件渲染；stage 去 min-height；无 z-index；无断点 */
.sq-showcase {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 541px;
  padding-top: 38px;
  background: #fff;
}

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

.sq-showcase__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 360px);
  column-gap: 60px;
  width: 100%;
  max-width: 1200px;
  margin: 64px auto 0;
}

.sq-showcase__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 360px;
  height: 280px;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.sq-showcase__bar {
  width: 360px;
  height: 10px;
}

.sq-showcase__icon {
  width: 48px;
  height: 48px;
  margin: 40px auto 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sq-showcase__card-title {
  height: 27px;
  margin: 25px 0 0;
  font-size: 22px;
  line-height: 27px;
  font-weight: 400;
  color: #0f172a;
  text-align: center;
  white-space: nowrap;
}

.sq-showcase__row {
  height: 18px;
  margin: 0;
  font-size: 15px;
  line-height: 18px;
  font-weight: 400;
  color: #64748b;
  text-align: center;
  white-space: nowrap;
}

.sq-showcase__row--l1 {
  margin-top: 20px;
}

.sq-showcase__row--l2 {
  margin-top: 9px;
}

.sq-showcase__row--l3 {
  margin-top: 9px;
}

/* ============ 场景 sq-scenes（相对[3096,3668]高572，底 #EBF3FF） ============ */
/* 去图层化 v2：头改正常流（标题 margin:0 居中，副标题 margin:14px auto 0，线 margin:17px auto 0）；
   section 加 padding-top:3（原标题 top）＋box-sizing:border-box，
   头高 3+41+14+19+17+4=98（副标题 top:58／线 top:94 与原一致）；
   卡片区 margin-top:60（原卡 top:158−头高 98），grid 4 列 280px、缝 26
   （原 x 0/306/612/920，前两缝 26、末缝 28；末卡 relative left:2px 归整保像素）；
   卡内改 flex 纵排居中＋文字块正常流（头图 150／标题 margin-top:33／两行 19/13，
   纵节奏与原 183/229/259 一致）；卡底共用 product-bg（cover 照原案）；
   stage 去 min-height；无 z-index；无断点 */
.sq-scenes {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 572px;
  padding-top: 3px;
  background: #ebf3ff;
}

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

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

.sq-scenes__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 280px;
  height: 350px;
  background: url('/images/home/product-bg-a75b1f67.png') center / cover no-repeat;
  border-radius: 16px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.sq-scenes__card:last-child {
  left: 2px; /* 末缝原 28（920+280=1200 右齐），grid 统一缝 26 后末卡右移 2px 归整 */
}

.sq-scenes__head {
  display: block;
  width: 280px;
  height: 150px;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
  transition: transform 0.3s ease;
}

.sq-scenes__card:hover .sq-scenes__head {
  transform: scale(1.2);
}

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

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

.sq-scenes__row--l1 {
  margin-top: 19px;
}

.sq-scenes__row--l2 {
  margin-top: 13px;
}

/* ============ 优势 sq-features（相对[3668,4356]高688，白底，零图片） ============ */
/* 去图层化 v2：头改正常流（标题 margin:0 居中，线 margin:11px auto 0）；
   section 加 padding-top:3（原标题 top）＋box-sizing:border-box，头高 3+44+11+4=62
   （线 top:58 与原一致；此处缝 11 非统一 12，为保像素实测值）；
   卡片区 margin-top:60（原上行卡 top:122−头高 62），grid 3 列 370px、列缝 45 均匀
   （3×370+2×45=1200 整，0/415/830 与原一致）、行缝 30（原 y122/372：372−122−220）；
   卡内文字块改正常流（图标 absolute(32,32) 保留作装饰定位；标题 margin:38px 0 0 92px；
   三行 margin-top 27/11/11，纵节奏与原 92/120/148 一致）；
   卡底渐变统一 linear-gradient(135deg,#fff,#f9fbff)；行对齐类 --gray/--top/--bottom 保留
   （--top/--bottom 行左对齐 padding-left:92，原 left:92 等价）；
   图标系手拼 SVG，按 key 条件渲染；stage 去 min-height（卡底 592，余 96 下垫由 section min-height:688 兜）；
   无 z-index；无断点 */
.sq-features {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 688px;
  padding-top: 3px;
  background: #fff;
}

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

.sq-features__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 370px);
  column-gap: 45px;
  row-gap: 30px;
  width: 100%;
  max-width: 1200px;
  margin: 60px auto 0;
}

.sq-features__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 370px;
  height: 220px;
  background: linear-gradient(135deg, #fff 0%, #f9fbff 100%);
  border-radius: 16px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.sq-features__icon {
  position: absolute;
  left: 32px;
  top: 32px;
  width: 40px;
  height: 40px;
  background: #e8f1ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sq-features__card-title {
  width: 88px;
  height: 27px;
  margin: 38px 0 0 92px;
  font-size: 22px;
  line-height: 27px;
  font-weight: 400;
  color: #333;
  text-align: left;
  white-space: nowrap;
}

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

.sq-features__row--l1 {
  margin-top: 27px;
}

.sq-features__row--l2 {
  margin-top: 11px;
}

.sq-features__row--l3 {
  margin-top: 11px;
}

.sq-features__card--gray .sq-features__row {
  color: #666;
}

.sq-features__card--top .sq-features__row,
.sq-features__card--bottom .sq-features__row {
  box-sizing: border-box;
  padding-left: 92px;
  text-align: left;
}

/* ============ 滚动显现 reveal（最小一次性 Observer，由 shequo2o/index 底部内联 JS 驱动加 .in） ============ */
/* 无 home 现成显现写法（home 全站 grep 无 reveal/Observer/wow），故用最小方案：transition 0.6s 一次性；
   property 整图不加 hover，但显现照常跟随 section；reduced-motion 下直接全显 */
.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;
  }
}

/* ============ 通用区块头 .section-head（shequo2o 五头收敛；旧 sq-*__title/sub/line 原样保留零回归，新 DOM 只用此类） ============ */
/* 结构：外壳零边距零内边距不占高；标题 margin:0 居中（字号/行高/色走 inline：34→41、36→44 由模板派生）；
   副标题 margin:14px auto 0、16px/19px（色走 inline；三处有副标题的顶边距皆 14，已统一）；
   线高 4、底 #0d9488、左右 auto＋下 0（宽/顶边距/圆角走 inline；圆角由模板按线宽派生：<=236→2px，其余 0，
   对应 scenes/features 有圆角、eco/property/showcase 无圆角；线色五头皆 #0d9488 已硬编码） */
.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;
  background: #0d9488;
}