@charset "utf-8";
/* ==========================================================================
   呼叫中心页专属样式（callCenter_2026.html）；#28c6dc 为本页一次性插画点缀色，不进令牌
   颜色 / 阴影 / 缓动 / 圆角 / 顶栏高度引用 base_2026.css :root；宽度断点集中在文件末尾。
   ========================================================================== */

/* ===== 呼叫中心页 ===== */
/* 同一页四种信息形态：问题双区、语音洞察图、两段业务带、非对称价值矩阵 */
/* 青色 #28c6dc 是本页一次性插画点缀（数据卡圆点、价值卡收束点），
   只以极小面积出现，不进 :root 令牌；内联 SVG 上的同色属性同理。 */
.sp-page--call .call-section-head{ max-width: 760px; margin: 0 0 48px; }

.sp-page--call .call-section-head h2{
  margin: 16px 0 0; font-size: 40px; line-height: 1.2; letter-spacing: -.04em; color: var(--ink);
}

.sp-page--call .call-section-head > p{
  margin: 17px 0 0; color: var(--ink-4); font-size: 14.5px; line-height: 1.85;
}

.sp-page--call .call-section-head--center{ margin-left: auto; margin-right: auto; text-align: center; }

.sp-page--call .call-problems{
  position: relative; overflow: hidden; padding: 96px 0 100px;
  background: var(--wash); isolation: isolate;
}

.sp-page--call .call-problems::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(43,92,230,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(43,92,230,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
}

.sp-page--call .call-problems__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.sp-page--call .call-problem{
  position: relative; overflow: hidden; min-height: 292px;
  padding: 39px 42px 42px;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(249,252,255,.78));
  box-shadow: 0 18px 54px rgba(14,20,32,.06);
}

.sp-page--call .call-problem::before,
.sp-page--call .call-problem::after{
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}

.sp-page--call .call-problem::before{
  right: -84px; top: -116px; width: 270px; height: 270px;
  border: 1px solid rgba(43,92,230,.09);
  box-shadow: 0 0 0 42px rgba(43,92,230,.018), 0 0 0 88px rgba(43,92,230,.012);
}

.sp-page--call .call-problem::after{
  right: 70px; top: 65px; width: 7px; height: 7px;
  background: var(--brand); box-shadow: 0 0 0 6px rgba(43,92,230,.08);
}

.sp-page--call .call-problem--data{
  background: linear-gradient(135deg, rgba(237,245,255,.94), rgba(250,252,255,.85));
}

.sp-page--call .call-problem--data::after{
  background: #28c6dc; box-shadow: 0 0 0 6px rgba(40,198,220,.09);
}

.sp-page--call .call-problem small{
  display: block; color: var(--brand);
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .16em;
}

.sp-page--call .call-problem h3{
  max-width: 16em; margin: 25px 0 17px;
  font-size: 25px; line-height: 1.35; letter-spacing: -.025em; color: var(--ink);
}

.sp-page--call .call-problem p{
  position: relative; z-index: 1; max-width: 47em;
  margin: 0; color: var(--ink-4); font-size: 14px; line-height: 1.95;
}

.sp-page--call .call-insight{
  position: relative; overflow: hidden; padding: 102px 0 106px;
  background: var(--paper); isolation: isolate;
  scroll-margin-top: var(--header-h);
}

.sp-page--call .call-insight::before{
  content: ""; position: absolute; inset: 0 0 0 42%; z-index: -2;
  background-image: linear-gradient(rgba(43,92,230,.043) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(43,92,230,.043) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 58% 50%, #000 0, rgba(0,0,0,.74) 46%, transparent 82%);
  mask-image: radial-gradient(ellipse at 58% 50%, #000 0, rgba(0,0,0,.74) 46%, transparent 82%);
}

.sp-page--call .call-insight__grid{
  display: grid; grid-template-columns: minmax(420px,.92fr) minmax(520px,1.08fr);
  align-items: center; gap: 44px; min-height: 560px;
}

.sp-page--call .call-insight__copy{ position: relative; z-index: 2; }

.sp-page--call .call-insight__copy h2{
  max-width: 570px; margin: 17px 0 27px;
  font-size: 43px; line-height: 1.2; letter-spacing: -.045em; color: var(--ink);
}

.sp-page--call .call-insight__intro{ max-width: 610px; color: var(--ink-3); font-size: 15px; line-height: 1.95; }

.sp-page--call .call-insight__intro p{ margin: 0; }

.sp-page--call .call-insight__intro p:first-child{ color: var(--ink-2); font-size: 16px; font-weight: 500; }

.sp-page--call .call-insight__intro p + p{
  margin-top: 20px; padding: 21px 23px;
  background: linear-gradient(100deg, rgba(238,245,255,.9), rgba(247,250,255,.34));
}

.sp-page--call .call-insight__scope{
  display: grid; grid-template-columns: 1.15fr .85fr .8fr;
  margin: 32px 0 0; padding: 0; background: var(--wash);
}

.sp-page--call .call-insight__scope div{ position: relative; min-width: 0; padding: 20px 18px 21px 25px; }

.sp-page--call .call-insight__scope div + div::before{
  content: ""; position: absolute; left: 0; top: 19px; bottom: 19px;
  width: 1px; background: var(--line-soft);
}

.sp-page--call .call-insight__scope dt{ font-size: 13px; font-weight: 600; color: var(--ink); }

.sp-page--call .call-insight__scope dd{ margin: 7px 0 0; color: var(--ink-4); font-size: 11.5px; line-height: 1.65; }

.sp-page--call .call-insight__visual{
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 500px; margin: 0 -84px 0 -62px; pointer-events: none;
}

.sp-page--call .call-insight__visual::before{
  content: ""; position: absolute; inset: 10% 3%; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(43,92,230,.12), rgba(43,92,230,.028) 52%, transparent 73%);
  filter: blur(17px);
}

.sp-page--call .call-insight__visual img{
  display: block; width: 122%; max-width: none; height: auto;
  opacity: .88; filter: saturate(.78) contrast(.98);
}

.sp-page--call .call-program{ padding: 104px 0 110px; background: var(--wash); }

.sp-page--call .call-program__groups{ display: grid; gap: 20px; }

.sp-page--call .call-program__group{
  display: grid; grid-template-columns: 230px 1fr; min-height: 248px;
  border: 1px solid var(--line); background: var(--paper);
  box-shadow: 0 18px 50px rgba(14,20,32,.05);
}

.sp-page--call .call-program__group > header{
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 34px 32px;
  background: linear-gradient(145deg, var(--tint), #f7faff 78%);
}

/* 第二组头部用极浅青色区分，属同一一次性插画色 */
.sp-page--call .call-program__group:nth-child(2) > header{
  background: linear-gradient(145deg, #edf7fb, #f8fbfd 78%);
}

.sp-page--call .call-program__group > header small{
  color: var(--brand); font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -.025em;
}

.sp-page--call .call-program__group > header p{
  margin: 13px 0 0; color: var(--ink-4); font-size: 12.5px; line-height: 1.75;
}

.sp-page--call .call-program__group ol{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
}

.sp-page--call .call-program__group li{ position: relative; padding: 34px 27px 31px; }

.sp-page--call .call-program__group li + li::before{
  content: ""; position: absolute; left: 0; top: 30px; bottom: 30px;
  width: 1px; background: var(--line-soft);
}

.sp-page--call .call-program__group li > span{
  color: var(--brand); font-family: var(--mono);
  font-size: 10px; font-weight: 600; letter-spacing: .15em;
}

.sp-page--call .call-program__group h4{
  margin: 22px 0 11px; font-size: 17px; line-height: 1.45; letter-spacing: -.02em; color: var(--ink);
}

.sp-page--call .call-program__group li p{ margin: 0; color: var(--ink-4); font-size: 12.8px; line-height: 1.82; }

.sp-page--call .call-value{ position: relative; overflow: hidden; padding: 104px 0 108px; background: var(--paper); }

.sp-page--call .call-value__layout{
  display: grid; grid-template-columns: minmax(330px,.78fr) minmax(560px,1.22fr);
  gap: 22px; align-items: stretch;
}

.sp-page--call .call-value__lead{
  position: relative; overflow: hidden; min-height: 330px;
  padding: 42px 42px 40px;
  background: linear-gradient(150deg, var(--tint), #f8fbff 72%);
}

.sp-page--call .call-value__lead::before{
  content: ""; position: absolute; right: -96px; bottom: -128px;
  width: 310px; height: 310px; border-radius: 50%;
  border: 1px solid rgba(43,92,230,.12);
  box-shadow: 0 0 0 43px rgba(43,92,230,.03), 0 0 0 92px rgba(43,92,230,.018);
}

.sp-page--call .call-value__lead small{
  color: var(--brand); font-family: var(--mono);
  font-size: 10px; font-weight: 600; letter-spacing: .16em;
}

.sp-page--call .call-value__lead h3{
  position: relative; z-index: 1; margin: 30px 0 18px;
  font-size: 31px; line-height: 1.3; letter-spacing: -.035em; color: var(--ink);
}

.sp-page--call .call-value__lead p{
  position: relative; z-index: 1; max-width: 28em;
  margin: 0; color: var(--ink-4); font-size: 14px; line-height: 1.9;
}

.sp-page--call .call-value__lead > div{
  position: absolute; left: 42px; bottom: 42px; display: flex; align-items: center; gap: 9px;
}

.sp-page--call .call-value__lead i{
  display: block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 5px rgba(43,92,230,.08);
}

.sp-page--call .call-value__lead i:nth-child(2){
  width: 32px; height: 1px; border-radius: 0;
  background: rgba(43,92,230,.3); box-shadow: none;
}

.sp-page--call .call-value__lead i:nth-child(3){ background: #28c6dc; box-shadow: none; }

.sp-page--call .call-value__support{
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
}

.sp-page--call .call-value__support article{ min-height: 164px; padding: 34px 34px 30px; background: var(--paper); }

.sp-page--call .call-value__support article:nth-child(2),
.sp-page--call .call-value__support article:nth-child(3){ background: var(--wash); }

.sp-page--call .call-value__support h3{ margin: 0; font-size: 18px; line-height: 1.45; letter-spacing: -.02em; color: var(--ink); }

.sp-page--call .call-value__support p{ margin: 12px 0 0; color: var(--ink-4); font-size: 13px; line-height: 1.8; }

/* ===== 响应式 ===== */
/* ===== ≤1200px ===== */
@media (max-width: 1200px){
  .sp-page--call .call-insight__grid{
  grid-template-columns: minmax(380px,.92fr) minmax(440px,1.08fr);
  }
  .sp-page--call .call-insight__visual{ margin-right: -42px; }
  .sp-page--call .call-program__group{ grid-template-columns: 205px 1fr; }
  .sp-page--call .call-program__group li{ padding-left: 22px; padding-right: 22px; }
}

/* ===== ≤1024px ===== */
@media (max-width: 1024px){
  /* ===== 呼叫中心 ===== */
  .sp-page--call .call-problems,
  .sp-page--call .call-program,
  .sp-page--call .call-value{ padding: 76px 0 80px; }
  .sp-page--call .call-section-head h2{ font-size: 34px; }
  .sp-page--call .call-problems__grid{ grid-template-columns: 1fr; }
  .sp-page--call .call-problem{ min-height: 0; }
  .sp-page--call .call-insight{ padding: 78px 0 82px; }
  .sp-page--call .call-insight__grid{ grid-template-columns: 1fr; gap: 24px; min-height: 0; }
  .sp-page--call .call-insight__copy h2{ font-size: 36px; }
  .sp-page--call .call-insight__visual{ min-height: 350px; margin: -12px -60px -28px; }
  .sp-page--call .call-insight__visual img{ width: 108%; max-width: 820px; }
  .sp-page--call .call-program__group{ grid-template-columns: 1fr; }
  .sp-page--call .call-program__group > header{ padding: 27px 28px; }
  .sp-page--call .call-program__group > header p{ max-width: 32em; }
  .sp-page--call .call-value__layout{ grid-template-columns: 1fr; }
}

/* ===== ≤768px ===== */
@media (max-width: 768px){
  /* ===== 呼叫中心 ===== */
  .sp-page--call .call-section-head{ margin-bottom: 34px; }
  .sp-page--call .call-section-head h2{ font-size: 30px; }
  .sp-page--call .call-problem{ padding: 30px 24px 32px; }
  .sp-page--call .call-problem h3{ font-size: 22px; }
  .sp-page--call .call-insight__copy h2{ font-size: 31px; }
  .sp-page--call .call-insight__intro{ font-size: 14.5px; }
  .sp-page--call .call-insight__intro p:first-child{ font-size: 15px; }
  .sp-page--call .call-insight__scope{ grid-template-columns: 1fr; }
  .sp-page--call .call-insight__scope div{ padding: 16px 20px; }
  .sp-page--call .call-insight__scope div + div::before{
  left: 20px; right: 20px; top: 0; bottom: auto; width: auto; height: 1px;
  }
  .sp-page--call .call-insight{ padding: 32px 0; }
  .sp-page--call .call-insight__visual{ height: 250px; min-height: 0; margin: 4px -50px -20px; overflow: hidden; }
  .sp-page--call .call-insight__visual img{ width: 80%; }
  .sp-page--call .call-program__group ol{ grid-template-columns: 1fr; }
  .sp-page--call .call-program__group li{ padding: 27px 24px 28px; }
  .sp-page--call .call-program__group li + li::before{
  left: 24px; right: 24px; top: 0; bottom: auto; width: auto; height: 1px;
  }
  .sp-page--call .call-program__group h4{ margin-top: 15px; }
  .sp-page--call .call-value__lead{ min-height: 300px; padding: 34px 28px; }
  .sp-page--call .call-value__lead > div{ left: 28px; bottom: 32px; }
  .sp-page--call .call-value__support{ grid-template-columns: 1fr; }
  .sp-page--call .call-value__support article:nth-child(n){ min-height: 0; padding: 28px 26px; background: var(--paper); }
  .sp-page--call .call-value__support article:nth-child(even){ background: var(--wash); }

  .sp-page--call .call-problems, 
  .sp-page--call .call-program, 
  .sp-page--call .call-value{ padding: 32px 0; }
}

/* ===== ≤480px ===== */
@media (max-width: 480px){
  .sp-page--news .nitem{ gap: 12px; padding-right: 12px; }
  .sp-page--call .call-section-head--center{ text-align: left; }
}