/* ============================================================
   服务页专属样式（配合 home-v2.css 使用）
   设计语言与首页一致：深色剧场、无圆角、品牌红点缀
   ============================================================ */

/* ---------- 服务优势 5 格（原版这里是 5 个 tab，会溢出容器） ---------- */
.adv-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.adv-grid li{
  padding:clamp(22px,3.2vh,36px) clamp(12px,1.3vw,20px);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:15px;
  transition:background .4s var(--ease);
}
.adv-grid li:last-child{border-right:0}
.adv-grid li:hover{background:rgba(255,255,255,.035)}
/* 2026-10-09：li 内容加 <a> 包裹（链向对应服务落地页）。
   <a> 需接住 li 的 flex 布局，并清掉浏览器默认链接样式。
   视觉零变化：li 的 padding/border/hover 全部保留，<a> 只做透明容器。 */
.adv-grid .adv-link{
  display:flex;flex-direction:column;gap:15px;
  color:inherit;text-decoration:none;cursor:pointer;
}
/* 原图标是彩色小图，深色页面上做单色化 */
.adv-grid img{
  width:36px;height:36px;object-fit:contain;
  filter:grayscale(1) invert(1) brightness(1.55);opacity:.78;
  transition:opacity .35s var(--ease);
}
.adv-grid li:hover img{opacity:1}
.adv-grid span{font-size:clamp(13px,.95vw,15px);color:var(--fg2);line-height:1.55}

/* ---------- 服务详情：交错左右，取代原来 5 屏雷同的轮播 ---------- */
.svc-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,4.2vw,72px);align-items:center;
  padding:clamp(40px,6.4vh,76px) 0;
  border-bottom:1px solid var(--line);
}
.svc-row:first-of-type{border-top:1px solid var(--line)}
.svc-row:nth-child(even) .pic{order:2}
.svc-row .pic{overflow:hidden;background:#141414;aspect-ratio:4/3}
.svc-row .pic img{
  width:100%;height:100%;object-fit:cover;filter:brightness(.92);
  transition:transform 1.2s var(--ease),filter .5s var(--ease);
}
.svc-row:hover .pic img{transform:scale(1.04);filter:brightness(1)}
.svc-row .no{
  font-family:var(--mono);font-size:12px;letter-spacing:.22em;
  color:var(--brand);margin:0 0 13px;font-variant-numeric:tabular-nums;
}
.svc-row h3{margin:0 0 20px;font-size:clamp(21px,2.3vw,33px);font-weight:500;letter-spacing:-.02em}
.svc-row .pts{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.svc-row .pts li{
  font-size:clamp(13px,.97vw,15px);line-height:1.85;color:var(--fg2);
  padding-left:17px;position:relative;
}
.svc-row .pts li::before{
  content:"";position:absolute;left:0;top:.75em;width:6px;height:1px;background:var(--brand);
}
.svc-row .pts b{color:#fff;font-weight:500;margin-right:7px}

/* ---------- 能力细分 ---------- */
.cap-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(13px,1.5vw,22px)}
.cap{
  display:block;cursor:pointer;color:inherit;text-decoration:none;
  background:#131313;border:1px solid rgba(255,255,255,.08);
  padding:clamp(19px,2.3vh,29px);
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.cap:hover{border-color:rgba(255,255,255,.22);transform:translateY(-3px)}
.cap-en{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--brand);margin:0 0 11px}
.cap h3{margin:0 0 8px;font-size:clamp(15px,1.25vw,19px);font-weight:500}
.cap-note{margin:0 0 15px;font-size:13px;line-height:1.7;color:var(--fg3)}
.cap-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.cap-tags li{
  font-size:12px;color:var(--fg2);border:1px solid rgba(255,255,255,.16);
  padding:4px 11px;border-radius:20px;
}

/* ---------- 页尾 CTA ---------- */
.cta-sec{text-align:center;padding:clamp(60px,9.5vh,110px) var(--gut)}
.cta-sec h2{margin:0 0 15px;font-size:clamp(23px,2.9vw,42px);font-weight:500;letter-spacing:-.02em}
.cta-sec p{margin:0 0 30px;font-size:clamp(14px,1vw,16px);color:var(--fg2)}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  .adv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .adv-grid li:nth-child(3){border-right:0}
  .adv-grid li:nth-child(n+4){border-top:1px solid var(--line)}
  .cap-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .svc-row{grid-template-columns:1fr}
  .svc-row:nth-child(even) .pic{order:0}
  .page-hero h1 .l{white-space:normal}
}
@media (max-width:640px){
  .adv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .adv-grid li:nth-child(3){border-right:1px solid var(--line)}
  .adv-grid li:nth-child(2n){border-right:0}
  .adv-grid li:nth-child(n+3){border-top:1px solid var(--line)}
  .cap-list{grid-template-columns:1fr}
}