/* 服务页面沿用新版首页的品牌变量、内容宽度与按钮标准。 */
.service-page { background: var(--white); }
.service-hero { background: linear-gradient(130deg, #fff 25%, #f1f7ff 100%); border-bottom: 1px solid var(--line); }
.service-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 28px; color: var(--muted); font-size: .8125rem; }
.service-breadcrumb a:hover { color: var(--blue); }
.service-breadcrumb [aria-current] { color: var(--ink); }
.service-hero-layout { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 64px; padding-block: 32px 45px; }
.service-hero h1 { font-size: clamp(2.2rem, 3.35vw, 3.1rem); font-weight: 780; line-height: 1.28; }
.service-lead { max-width: 650px; margin-top: 22px; color: var(--muted); font-size: 1.0625rem; line-height: 1.9; }
.service-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.service-hero-media { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.service-hero-media img { display: block; width: 100%; height: auto; aspect-ratio: 1.85; object-fit: cover; }
.service-hero-media figcaption { display: flex; align-items: center; gap: 9px; padding: 12px 16px; font-size: .8125rem; color: var(--muted); }
.service-hero-media figcaption::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--blue); }
.service-navigation { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.service-navigation a { padding: 17px 12px; position: relative; text-align: center; color: var(--muted); font-size: .9375rem; font-weight: 550; }
.service-navigation a:hover { color: var(--blue); background: #edf3ff; }
.service-navigation a[aria-current="page"] { color: var(--blue); }
.service-navigation a[aria-current="page"]::after { content: ""; position: absolute; bottom: 0; left: 25%; right: 25%; height: 2px; background: var(--blue); }
.service-section { padding-block: 58px; }
.service-section .section-intro { margin-bottom: 28px; }
.service-section .section-intro p { font-size: .9375rem; }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.service-card { padding: 25px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.service-card-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.service-card-heading > span { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 6px; background: #e8f0ff; color: var(--blue); font-size: .9375rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.service-card h3 { font-size: 1.0625rem; }
.service-card p { color: var(--muted); font-size: .9375rem; line-height: 1.8; }
.service-use-cases { padding-block: 44px; border-block: 1px solid var(--line); }
.service-scenarios-layout { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 40px; }
.service-scenarios-layout .section-intro { margin: 0; }
.service-scenarios-layout h2 { font-size: 1.75rem; }
.service-scenario-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.service-scenario-list li { display: flex; align-items: center; gap: 9px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: #495c7b; font-size: .9375rem; }
.service-scenario-list .icon { width: 17px; height: 17px; color: var(--blue); }
.service-contact { padding-block: 44px 54px; }
.service-contact-box { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 32px; border: 1px solid #e7effc; border-radius: 16px; background: #eef5ff; }
.service-contact-box h2 { font-size: 1.65rem; }
.service-contact-box p { color: var(--muted); font-size: .9375rem; margin-top: 10px; }
.service-contact-box .btn { flex-shrink: 0; }
@media (max-width: 1200px) {
  .service-hero-layout { gap: 36px; }
  .service-card { padding: 22px; }
}
@media (max-width: 960px) {
  .service-hero-layout { grid-template-columns: 1.1fr .9fr; gap: 28px; }
  .service-lead { font-size: .9375rem; }
  .service-hero-media img { aspect-ratio: 1.25; }
  .service-hero-media figcaption { padding: 10px 12px; font-size: .75rem; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .service-section { padding-block: 48px; }
  .service-scenarios-layout { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 620px) {
  .service-breadcrumb { padding-top: 20px; }
  .service-hero-layout { grid-template-columns: 1fr; padding-block: 26px 30px; gap: 28px; }
  .service-hero h1 { font-size: 2.2rem; }
  .service-lead { margin-top: 16px; }
  .service-actions { gap: 10px; margin-top: 23px; }
  .service-actions .btn { padding-inline: 17px; }
  .service-hero-media img { aspect-ratio: 2; }
  .service-navigation a { padding: 15px 3px; font-size: .8125rem; }
  .service-navigation a[aria-current="page"]::after { left: 12%; right: 12%; }
  .service-section { padding-block: 38px; }
  .service-grid { grid-template-columns: 1fr; gap: 13px; }
  .service-card { padding: 21px; }
  .service-card-heading { margin-bottom: 10px; }
  .service-scenario-list { gap: 10px; }
  .service-scenario-list li { padding: 12px 10px; font-size: .8125rem; gap: 6px; }
  .service-scenario-list .icon { width: 15px; height: 15px; }
  .service-contact { padding-block: 30px 36px; }
  .service-contact-box { align-items: flex-start; flex-direction: column; gap: 23px; padding: 25px 23px; }
  .service-contact-box h2 { font-size: 1.45rem; }
}
@media print {
  .service-hero-layout { padding-block: 20px; }
  .service-card { break-inside: avoid; }
  .service-navigation, .service-actions, .service-contact { display: none; }
}