/* 智能客服管理系统详情页专属样式：5 个 sections（本页无 JS；main 全局 common.css 先行，home.css 管轮播公告） */

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

/* ============ 通用区块头 .section-head（service 复用结构；几何走 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 svc-banner（区间[699,1349]高650） ============ */
/* 去图层化：section min-height:650＋overflow:hidden；bg 盒定宽 1920 居中（背景定则 B，
   center/cover 不动，1920 下逐像素一致，窄屏对称裁边）；stage 100%+max-width:1920px 直挂文案
   （标题左对齐 left:177px，top 不变）；组124 视频占位已删；无 z-index；无断点 */
.svc-banner {
  position: relative;
  width: 100%;
  min-height: 650px;
  overflow: hidden;  scroll-margin-top: 88px; /* 首页产品直达锚：吸顶 72＋16 */
}

.svc-banner__bg {
  position: absolute;
  left: max(0px, calc(50% - 960px));
  top: 0;
  width: 1920px;
  height: 650px;
  background: url('/images/service/svc-banner-5031.jpg') center / cover no-repeat;
}

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

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

/* 副标题：(177,341) 695×29，24px #BFDBFE 左 */
.svc-banner__sub {
  position: absolute;
  left: 177px;
  top: 341px;
  width: 695px;
  height: 29px;
  margin: 0;
  font-size: 24px;
  line-height: 29px;
  font-weight: 400;
  color: #bfdbfe;
  text-align: left;
  white-space: nowrap;
}

/* ============ 智能路由 svc-route（区间[1349,1851]高502；底白） ============ */
/* 去图层化：头换 sectionHead（标题 34 #0f172a／副 16／线 408×5 #2563eb／缝 17），
   section 加 box-sizing＋padding-top:67（原标题 top），头高 96；
   白卡改正常流（relative＋1200 居中，margin-top:59 即 222−163；内改 flex 流，静态不 hover）；
   stage 去 min-height；section 保 min-height:518（502＋16 下垫，卡底齐平留阴影位）；reveal 由 common.js 驱动；
   整卡静态不 hover；无 z-index；无断点 */
.svc-route {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 518px;
  padding-top: 67px;
  padding-bottom: 16px;
  background: #fff;
}

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

/* 白卡：1200×280 r20 投影（整幅展示板，静态不 hover；
 * 内改 flex 流：边垫 60/60＋来源列 180＋连接段 110＋AI 220＋连接段 110＋路由列 460（合计 1200 闭合）；
 * 卡 padding-top:26（取三顶最小）；AI/路由列 margin-top:7/14；连接段 align-self:center；
 * 来源标题压板边 -10 还原；分发标题 margin-left:141 原位；minis 行缝 40 居中） */
.svc-route__card {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  width: 1200px;
  height: 280px;
  margin: 59px auto 0;
  padding: 26px 60px 0;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgb(15 23 42 / 8%);
}

/* 来源列：标题居中＋面板（标题进面板内 margin-top:26，行高 19 还原缓存 19.36；首条 margin-top:17 落面板 62） */
.svc-route__src-col {
  flex: none;
  width: 180px;
}

.svc-route__src-title {
  margin: 26px 0 0;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  color: #1e293b;
  text-align: center;
  white-space: nowrap;
}

.svc-route__src {
  box-sizing: border-box;
  height: 200px;
  margin-top: 14px;
  padding-top: 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

/* 来源蓝条：166×30 居中，纵缝 10；条文 margin-left 走数据（9/12/31 原位），垂向 flex 居中 */
.svc-route__bar {
  display: flex;
  align-items: center;
  width: 166px;
  height: 30px;
  margin: 10px auto 0;
  background: #dbeafe;
  border-radius: 6px;
}

.svc-route__bar:first-child { margin-top: 17px; }

.svc-route__bar-text {
  margin: 0;
  font-size: 13px;
  line-height: 16px;
  font-weight: 400;
  color: #1d4ed8;
  white-space: nowrap;
}

/* 连接段：80 虚线＋末端 10 箭头 ::after（Figma 画布实测箭头；仿 dr-arch 做法，压线尾落线端；
 * 纵向显式 margin-top:109 落 135（align-self:center 在 stretch 行里定的是容器高，差 20px 的坑已填，永不用）） */
.svc-route__conn {
  flex: none;
  display: flex;
  align-items: flex-start;
  width: 110px;
  margin-top: 109px;
}

.svc-route__line {
  position: relative;
  width: 80px;
  height: 0;
  margin-top: 5px;
  margin-left: 15px;
  border-top: 3px dashed #3b82f6;
}

.svc-route__conn .svc-route__line:last-child::after {
  content: "";
  position: absolute;
  left: 73px;
  top: -5.5px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 10px solid #3b82f6;
}

/* AI 卡：220×206 渐变（min-height 保底，内容 179；渐变起止缓存未载，近似值目验可纠）；
 * 圆 flex 居中；标题/副 margin-left 原位 57/45 */
.svc-route__ai {
  flex: none;
  width: 220px;
  height: 200px;
  margin-top: 14px;
  background: linear-gradient(135deg, #3b82f6, #1e40af);
  border-radius: 12px;
}

.svc-route__ai-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 26px auto 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.svc-route__ai-glyph {
  display: block;
  width: 43px;
  height: 63px;
}

.svc-route__ai-title {
  margin: 14px 0 0 57px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
}

.svc-route__ai-sub {
  margin: 11px 0 0 45px;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: #bfdbfe;
  white-space: nowrap;
}

/* 路由列 460：面板 padding-top:25＋标题 margin-left:141 原位＋小白卡行（缝 40 居中，缝 31） */
.svc-route__dispatch-col {
  flex: none;
  width: 460px;
  margin-top: 14px;
}

.svc-route__dispatch {
  box-sizing: border-box;
  height: 200px;
  padding-top: 25px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.svc-route__dispatch-title {
  margin: 0 0 0 141px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #1e293b;
  white-space: nowrap;
}

.svc-route__minis {
  display: flex;
  gap: 40px;
  justify-content: center;
  margin: 31px 0 0;
  padding: 0;
}

/* 分发小白卡：180×90（内容 64，底 slack 原样）；标题色走数据 */
.svc-route__mini {
  width: 180px;
  height: 90px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
}

.svc-route__mini-title {
  margin: 21px 0 0;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
}

.svc-route__mini-desc {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: #64748b;
  text-align: center;
  white-space: nowrap;
}

/* ============ 功能矩阵 svc-feat（区间[1851,2365]高514） ============ */
/* 去图层化：头换 sectionHead（标题 34 #0f172a／线 374×5 #2563eb／缝 12，无副标题），
   section 加 box-sizing＋padding-top:67（原标题 top），头高 58；
   六卡改 grid 3 列 380px、列缝 40、行缝 30，卡片区 margin-top:59（184−125）；
   卡改 relative；卡内圆点/图标/标题/描述相对卡不动；
   stage 去 min-height；section 保 min-height:530（514＋16 下垫，卡底齐平留阴影位）；
   hover 卡上浮（图标不动）；无 z-index；无断点 */
.svc-feat {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 530px;
  padding-top: 67px;
  padding-bottom: 16px;
  overflow: hidden;
}

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

.svc-feat__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 380px);
  column-gap: 40px;
  row-gap: 30px;
  width: 100%;
  max-width: 1200px;
  margin: 59px auto 0;
}

/* 功能卡：380×150 白底 r16 投影 */
.svc-feat__card {
  position: relative;
  width: 380px;
  height: 150px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* 圆点：24,51 48×48 #DBEAFE */
.svc-feat__dot {
  position: absolute;
  left: 24px;
  top: 51px;
  width: 48px;
  height: 48px;
  background: #dbeafe;
  border-radius: 50%;
}

.svc-feat__icon {
  position: absolute;
  object-fit: contain;
}

/* 卡标题：96,39 20px #1E293B 左；描述 96,74 268 14px/21px #64748B pre-line */
.svc-feat__card-title {
  position: absolute;
  left: 96px;
  top: 39px;
  height: 30px;
  margin: 0;
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  color: #1e293b;
  text-align: left;
  white-space: nowrap;
}

.svc-feat__desc {
  position: absolute;
  left: 96px;
  top: 74px;
  width: 268px;
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: #64748b;
  text-align: left;
  white-space: pre-line;
}

/* ============ 数据大屏 svc-dash（区间[2365,3049]高684） ============ */
/* 去图层化：头换 sectionHead（标题 34 #0f172a／线 340×5 #2563eb／缝 12，无副标题），
   section 加 box-sizing＋padding-top:67（原标题 top），头高 58；
   浏览器框改正常流（relative＋1200 居中，margin-top:59 即 184−125），
   框内坐标全换算框相对（框＝模块−(360,184)）；KPI 循环走数据；趋势 SVG 原样保留；
   stage 去 min-height；section 保 min-height:700（684＋16 下垫，框底齐平留阴影位）；reveal 由 common.js 驱动；
   hover 整框上浮（框内不动）；无 z-index；无断点 */
.svc-dash {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 700px;
  padding-top: 67px;
  padding-bottom: 16px;
}

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

/* 浏览器框：1200×500 白底 r20 投影 */
.svc-dash__browser {
  position: relative;
  width: 1200px;
  height: 500px;
  margin: 59px auto 0;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.svc-dash__topbar {
  position: absolute;
  left: 0;
  top: 0;
  width: 1200px;
  height: 40px;
  background: #f1f5f9;
  border-radius: 20px 20px 0 0;
}

.svc-dash__dot {
  position: absolute;
  top: 14px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.svc-dash__dot--r { left: 32px; background: #ef4444; }
.svc-dash__dot--y { left: 52px; background: #f59e0b; }
.svc-dash__dot--g { left: 72px; background: #10b981; }

/* KPI 卡：框内 top:64 h106 #F8FAFC r12（left/宽走数据） */
.svc-dash__kpi {
  position: absolute;
  top: 64px;
  height: 106px;
  background: #f8fafc;
  border-radius: 12px;
}

.svc-dash__kpi-label {
  position: absolute;
  left: 24px;
  top: 21px;
  margin: 0;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: #64748b;
  white-space: nowrap;
}

.svc-dash__kpi-value {
  position: absolute;
  left: 24px;
  top: 44px;
  margin: 0;
  font-size: 32px;
  line-height: 39px;
  font-weight: 400;
  white-space: nowrap;
}

/* 大表：框内(40,194) 1120×282，#F8FAFC r12（缓存矩形 3:5251 真值） */
.svc-dash__table {
  position: absolute;
  left: 40px;
  top: 194px;
  width: 1120px;
  height: 282px;
  background: #f8fafc;
  border-radius: 12px;
}

.svc-dash__table-title {
  position: absolute;
  left: 64px; /* 缓存真值 14354−13930−360−40＝64，原 104 系误读 */
  top: 220px;
  margin: 0;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  color: #1e293b;
  white-space: nowrap;
}

/* 趋势块：框内(40,263) 1120×188（缓存路径 109 真值，原 289 系误读低 26px）；
   下圆角 12 呼应表底（SVG 盒裁剪）；线宽 1 系路径 428 真值 */
.svc-dash__trend {
  position: absolute;
  left: 40px;
  top: 263px;
  width: 1120px;
  height: 188px;
  overflow: hidden;
}

/* ============ 场景应用 svc-scenarios（区间[3049,3679]高630；底图下方对齐） ============ */
/* 去图层化：头换 sectionHead（标题 34 #0f172a／线 408×5 #2563eb／缝 12，无副标题），
   section 加 box-sizing＋padding-top:67（原标题 top），头高 58；
   四卡改 grid 4 列 280px、列缝 26 居中（末缝差 2px 可忽略），卡片区 margin-top:59（184−125）；
   卡改 relative；卡内灰占位/头图/标题/三行相对卡不动；
   bg 盒下方对齐全幅（bottom:0＋1920 定宽居中，背景定则 B，cover 不动，窄屏对称裁边，
   底图共用 /images/home/chg-bg-a75b1f.jpg，不搬）；
   stage 去 min-height；section 保 min-height:630＋overflow:hidden；
   hover 卡上浮＋图缩放；无 z-index；无断点 */
.svc-scenarios {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 630px;
  padding-top: 67px;
  overflow: hidden;
}

.svc-scenarios__bg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 1920px;
  height: 630px;
  background: url('/images/home/chg-bg-a75b1f.jpg') center bottom / cover no-repeat;
}

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

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

/* 场景卡：280×350 白底 r16 */
.svc-scenarios__card {
  position: relative;
  width: 280px;
  height: 350px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.svc-scenarios__pic-gray {
  position: absolute;
  left: 0;
  top: 0;
  width: 280px;
  height: 200px;
  background: #d9d9d9;
  border-radius: 16px;
}

.svc-scenarios__pic {
  position: absolute;
  left: 0;
  top: 0;
  width: 280px;
  height: 184px;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
  transition: transform 0.3s ease;
}

.svc-scenarios__card:hover .svc-scenarios__pic {
  transform: scale(1.2);
}

.svc-scenarios__card-title {
  position: absolute;
  left: 20px;
  top: 210px;
  height: 24px;
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  color: #1e293b;
  text-align: left;
  white-space: nowrap;
}

.svc-scenarios__desc {
  position: absolute;
  left: 20px;
  height: 16px;
  margin: 0;
  font-size: 13px;
  line-height: 16px;
  font-weight: 400;
  color: #64748b;
  text-align: left;
  white-space: nowrap;
}

.svc-scenarios__desc--l1 { top: 253px; }
.svc-scenarios__desc--l2 { top: 277px; }
.svc-scenarios__desc--l3 { top: 301px; }