/* ==========================================================
   服务体系页专用样式  service-page.css
   逐字使用，不要改动任何数值。
   所有规则都限定在 .svc 作用域内，不会影响 header / footer / 其他页面。
   header 样式不在这里，归 common.css 管。
   ========================================================== */

:root{
  --svc-brand:#218F82;
  --svc-ink:#111;
  --svc-ink-2:#666;
  --svc-ink-3:#999;
  --svc-hairline:rgba(0,0,0,.10);
  --svc-hover-line:rgba(0,0,0,.28);

  --svc-nav-h:72px;          /* 与主导航高度一致 */
  --svc-subnav-h:52px;

  --svc-dur:700ms;
  --svc-dur-l:900ms;
  --svc-ease:cubic-bezier(.16,1,.3,1);
  --svc-shift:20px;
}

html{ scroll-behavior:smooth }

/* ---------- 作用域基线 ---------- */
.svc{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  color:var(--svc-ink);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
.svc *{ box-sizing:border-box }
.svc h1,.svc h2,.svc h3,.svc p,.svc ul,.svc li,.svc figure,.svc blockquote,.svc hr{ margin:0; padding:0 }
.svc ul{ list-style:none }
.svc a{ color:inherit; text-decoration:none }
.svc-wrap{ width:min(1280px,100% - 128px); margin-inline:auto }

/* ---------- 动效：唯一一套 ---------- */
/* 未加 reveal-ready 时元素全部可见，因此关闭 JS 也能正常阅读 */
.svc.reveal-ready [data-reveal]{
  opacity:0; transform:translateY(var(--svc-shift));
  transition:opacity var(--svc-dur) var(--svc-ease),
             transform var(--svc-dur) var(--svc-ease);
  transition-delay:var(--reveal-delay,0ms);
}
.svc [data-reveal].is-visible{ opacity:1; transform:none }

.svc .reveal-mask{ overflow:hidden; display:block }
.svc.reveal-ready .reveal-mask>span{
  display:block; transform:translateY(110%);
  transition:transform var(--svc-dur-l) var(--svc-ease);
  transition-delay:var(--reveal-delay,0ms);
}
.svc .reveal-mask.is-visible>span{ transform:none }

.svc .svc-rule{ height:1px; background:var(--svc-hairline); border:0 }
.svc.reveal-ready .svc-rule{
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--svc-dur) var(--svc-ease);
}
.svc .svc-rule.is-visible{ transform:none }

@media (prefers-reduced-motion:reduce){
  .svc.reveal-ready [data-reveal],
  .svc.reveal-ready .reveal-mask>span,
  .svc.reveal-ready .svc-rule{
    opacity:1!important; transform:none!important; transition:none!important;
  }
}

/* ---------- 页内导航：横向居中，滚出首屏才滑出 ---------- */
.svc-subnav{
  position:sticky; top:var(--svc-nav-h); z-index:49;
  height:var(--svc-subnav-h);
  background:#fff;
  border-bottom:1px solid var(--svc-hairline);
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity 300ms var(--svc-ease), transform 300ms var(--svc-ease);
}
.svc-subnav.is-on{ opacity:1; transform:none; pointer-events:auto }
.svc-subnav .svc-wrap{
  height:100%;
  display:flex; flex-direction:row;
  align-items:stretch; justify-content:center;
  gap:48px;
}
.svc-subnav a{
  position:relative; display:flex; align-items:center;
  font-size:14px; font-weight:400; color:var(--svc-ink-2);
  white-space:nowrap; text-decoration:none;
  transition:color 240ms var(--svc-ease);
}
.svc-subnav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--svc-hover-line);
  transform:scaleX(0); transform-origin:left;
  transition:transform 240ms var(--svc-ease);
}
.svc-subnav a:hover{ color:var(--svc-ink) }
.svc-subnav a:hover::after{ transform:scaleX(1) }
.svc-subnav a.is-active{ color:var(--svc-brand) }
.svc-subnav a.is-active::after{ background:var(--svc-brand); transform:scaleX(1) }

/* ---------- 通用排版 ---------- */
.svc section{ padding:132px 0 }
.svc .sec-hd{ margin-bottom:64px; padding-top:22px }
.svc .sec-hd h2{ font-size:44px; font-weight:700; letter-spacing:-.02em; line-height:1.25 }
.svc .sec-hd p{ margin-top:18px; color:var(--svc-ink-2); font-size:15px; max-width:640px }

/* ---------- 首屏 ---------- */
.svc .hero{ padding:110px 0 96px }
.svc .hero-grid{ display:grid; grid-template-columns:1fr 440px; gap:80px; align-items:center }
.svc .hero h1{ font-size:62px; font-weight:700; letter-spacing:-.035em; line-height:1.2 }
.svc .hero .lede{ margin-top:32px; font-size:16px; color:var(--svc-ink-2); max-width:560px }
.svc .hero-art{ width:100% }
.svc .hero-art svg,.svc .hero-art img{ width:100%; height:auto; display:block }

.svc .toc{ margin-top:88px; max-width:720px }
.svc .toc a{
  display:grid; grid-template-columns:64px 1fr; align-items:center; gap:12px;
  padding:22px 0; border-top:1px solid var(--svc-hairline);
  transition:color 240ms var(--svc-ease);
}
.svc .toc a:last-child{ border-bottom:1px solid var(--svc-hairline) }
.svc .toc .n{ font-size:13px; color:var(--svc-ink-3); letter-spacing:.06em }
.svc .toc .t{ font-size:19px; font-weight:600; transition:transform 240ms var(--svc-ease) }
.svc .toc a:hover{ color:var(--svc-brand) }
.svc .toc a:hover .t{ transform:translateX(4px) }

/* ---------- 两大赋能：双栏，左栏 sticky ---------- */
.svc .duo{
  display:grid; grid-template-columns:34% 1fr; gap:72px;
  padding:56px 0; border-top:1px solid var(--svc-hairline);
}
.svc .duo:last-of-type{ border-bottom:1px solid var(--svc-hairline) }
.svc .duo-l{
  position:sticky;
  top:calc(var(--svc-nav-h) + var(--svc-subnav-h) + 48px);
  align-self:start;
}
.svc .duo-l h3{ font-size:32px; font-weight:700; letter-spacing:-.02em }
.svc .duo-l .role{ margin-top:12px; font-size:13px; color:var(--svc-brand); letter-spacing:.1em }
.svc .duo-r p{ font-size:16px; color:var(--svc-ink-2) }
.svc .duo-pts{ margin-top:36px }
.svc .duo-pts li{
  padding:16px 0; border-top:1px solid var(--svc-hairline);
  font-size:16px; font-weight:500;
}

/* ---------- 四项护航：行式列表 + 悬停揭示 ---------- */
.svc .guard{ border-top:1px solid var(--svc-hairline) }
.svc .guard-row{
  display:grid; grid-template-columns:180px 1fr 300px; gap:40px; align-items:center;
  padding:34px 0; border-bottom:1px solid var(--svc-hairline);
  cursor:default; outline:none;
  transition:border-color 240ms var(--svc-ease);
}
.svc .guard-row:hover,.svc .guard-row:focus-visible{ border-bottom-color:var(--svc-brand) }
.svc .guard-name{
  font-size:24px; font-weight:700; letter-spacing:-.01em;
  transition:transform 240ms var(--svc-ease), color 240ms var(--svc-ease);
}
.svc .guard-row:hover .guard-name,
.svc .guard-row:focus-visible .guard-name{ transform:translateX(4px); color:var(--svc-brand) }
.svc .guard-desc{ font-size:15px; color:var(--svc-ink-2) }
.svc .guard-kw{
  font-size:13px; color:var(--svc-ink-3); letter-spacing:.04em; text-align:right;
  opacity:0; transform:translateY(8px);
  transition:opacity 240ms var(--svc-ease), transform 240ms var(--svc-ease);
}
.svc .guard-row:hover .guard-kw,
.svc .guard-row:focus-visible .guard-kw{ opacity:1; transform:none }

/* ---------- 三大产品：主次分化 + 客户证据 ---------- */
.svc .prod{ padding:64px 0; border-top:1px solid var(--svc-hairline) }
.svc .prod:last-of-type{ border-bottom:1px solid var(--svc-hairline) }
.svc .prod .pname{ font-size:13px; letter-spacing:.1em; color:var(--svc-ink-3); margin-bottom:20px }
.svc .prod .claim{ font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1.4 }
.svc .prod p{ margin-top:20px; font-size:15px; color:var(--svc-ink-2); max-width:660px }
.svc .prod--lead{ padding:80px 0 }
.svc .prod--lead .claim{ font-size:44px; letter-spacing:-.03em }
.svc .prod--lead p{ font-size:16px; max-width:720px }
.svc .evid{ margin-top:36px; display:flex; align-items:baseline; gap:20px; flex-wrap:wrap }
.svc .evid .lb{ font-size:12px; letter-spacing:.16em; color:var(--svc-ink-3) }
.svc .evid a{ position:relative; font-size:15px; font-weight:500 }
.svc .evid a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:var(--svc-brand); transform:scaleX(0); transform-origin:left;
  transition:transform 240ms var(--svc-ease);
}
.svc .evid a:hover{ color:var(--svc-brand) }
.svc .evid a:hover::after{ transform:scaleX(1) }

/* ---------- 证言：人像 + 引言左右交替 ---------- */
.svc .who .nm{ font-size:15px; font-weight:600 }
.svc .who .tt{ font-size:13px; color:var(--svc-ink-3); margin-top:4px }
.svc .voices{
  border-top:1px solid var(--svc-hairline);
}
.svc .voice{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:56px;
  align-items:center;
  padding:56px 0;
  border-bottom:1px solid var(--svc-hairline);
}
.svc .voice--flip{
  grid-template-columns:1fr 180px;
}
.svc .voice--flip .voice-ph{ order:2 }
.svc .voice--flip .voice-tx{ order:1; text-align:right }
.svc .voice-ph{
  aspect-ratio:4/5;
  overflow:hidden;
  background:#F2F5F4;
}
.svc .voice-ph img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.svc .voice blockquote{
  margin:0;
  font-size:19px;
  font-weight:400;
  line-height:1.85;
  color:var(--svc-ink-2);
}
.svc .voice .who{ margin-top:24px }

/* ---------- 结尾 ---------- */
.svc .tail{ background:#F2F5F4; padding:120px 0 }
.svc .tail h2{ font-size:44px; font-weight:700; letter-spacing:-.02em }
.svc .tail p{ margin-top:24px; font-size:16px; color:var(--svc-ink-2); max-width:720px }
.svc .tail ul{ margin-top:40px; max-width:520px }
.svc .tail li{
  padding:16px 0; border-top:1px solid rgba(0,0,0,.12);
  font-size:16px; font-weight:500;
}
.svc .tail .clients{
  margin-top:44px; font-size:15px; color:var(--svc-ink-2);
  letter-spacing:.02em; max-width:780px;
}
.svc .cta{
  display:inline-block; margin-top:48px; padding:17px 34px;
  border:1px solid var(--svc-brand); color:var(--svc-brand);
  font-size:15px; font-weight:500;
  transition:background-color 200ms var(--svc-ease), color 200ms var(--svc-ease);
}
.svc .cta:hover{ background:var(--svc-brand); color:#fff }

/* ---------- 移动端 ---------- */
@media (max-width:900px){
  :root{ --svc-nav-h:60px; --svc-shift:12px }
  .svc-wrap{ width:calc(100% - 48px) }
  .svc-subnav{ display:none }              /* 移动端不 sticky，只保留首屏 01/02/03 */
  .svc section{ padding:80px 0 }

  .svc .hero{ padding:56px 0 48px }
  .svc .hero-grid{ grid-template-columns:1fr; gap:44px }
  .svc .hero h1{ font-size:36px }
  .svc .hero-art{ max-width:280px; margin:0 auto }
  .svc .toc{ margin-top:56px }

  .svc .sec-hd h2{ font-size:30px }
  .svc .duo{ grid-template-columns:1fr; gap:28px }
  .svc .duo-l{ position:static }

  .svc .guard-row{ grid-template-columns:1fr; gap:12px; padding:26px 0 }
  .svc .guard-kw{ opacity:1; transform:none; text-align:left }   /* 常显，无悬停依赖 */

  .svc .prod--lead .claim{ font-size:28px }
  .svc .prod .claim{ font-size:22px }

  .svc .voice,
  .svc .voice--flip{ grid-template-columns:1fr; gap:24px; padding:44px 0 }
  .svc .voice--flip .voice-ph{ order:0 }
  .svc .voice--flip .voice-tx{ order:0; text-align:left }
  .svc .voice-ph{ width:120px }
  .svc .voice blockquote{ font-size:17px }

  .svc .tail h2{ font-size:30px }
}