@charset "utf-8";
/*============================================================================
   产品服务保障公共组件样式
   对应模板：templates/1/default/inc_service_assure.html
   由 inc_style.css 公共层抽取，单独维护，支持多页面复用。
   ============================================================================*/
.service-assure { padding: 6rem 0 clamp(4.5rem,6vw,6rem); background: var(--builder-service-assure-background, #fff); scroll-margin-top: 4.4rem; }
.service-assure-heading h2 { margin: 1.25rem 0 1rem; color: #252a31; font-size: clamp(2rem,3.5vw,3.25rem); font-weight: 700; line-height: 1.2; letter-spacing: -.04em; }
.service-assure-heading p { max-width: 45rem; margin: 0 auto; }
.service-assure-packages { display: flex; height: 27.25rem; gap: 1.25rem; }
.service-assure-package { --package-accent: #0ebac9; --package-soft: #d8fbfd; position: relative; min-width: 0; flex: 1 1 0; padding: 2rem 2.25rem; overflow: hidden; border: 1px solid rgba(68,132,151,.08); border-radius: 1rem; background: linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.78)), linear-gradient(135deg,var(--package-soft),#f8feff 72%); color: #252a31; text-align: left; box-shadow: 0 1rem 2.5rem rgba(38,88,112,.04); outline: 0; transition: flex-grow .3s ease,flex-basis .3s ease,box-shadow .3s ease,transform .3s ease; }
.service-assure-packages:hover .service-assure-package, .service-assure-packages:focus-within .service-assure-package { flex-grow: .84; }
.service-assure-packages .service-assure-package:hover, .service-assure-packages .service-assure-package:focus { flex-grow: 1.48; box-shadow: 0 1.5rem 3.25rem rgba(38,88,112,.12); transform: translateY(-.25rem); }
.service-assure-package::before, .service-assure-package::after { content: ""; position: absolute; pointer-events: none; }
.service-assure-package::before { right: -3.25rem; bottom: -4.5rem; width: 14rem; height: 14rem; border: 1px solid color-mix(in srgb,var(--package-accent) 25%,transparent); border-radius: 50%; box-shadow: 0 0 0 2.2rem color-mix(in srgb,var(--package-accent) 7%,transparent); }
.service-assure-package::after { right: 4.2rem; bottom: 3.2rem; width: 7rem; height: 3rem; border-radius: 50%; background: color-mix(in srgb,var(--package-accent) 18%,transparent); filter: blur(1rem); }
.service-assure-package-standard { --package-accent: #086cf6; --package-soft: #dcecff; }
.service-assure-package-advanced { --package-accent: #613ef8; --package-soft: #e8e1ff; }
.service-assure-package-deluxe { --package-accent: #ff7200; --package-soft: #fff0dd; }
.service-assure-package-icon { position: absolute; right: 1.75rem; bottom: 1.25rem; z-index: 1; display: grid; width: 8.5rem; height: 8.5rem; place-items: center; border: 1px solid rgba(255,255,255,.72); border-radius: 2rem 2rem 4.5rem 2rem; background: linear-gradient(145deg,rgba(255,255,255,.92),color-mix(in srgb,var(--package-accent) 28%,#fff)); color: var(--package-accent); font-size: 4rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1.25rem 2.5rem color-mix(in srgb,var(--package-accent) 20%,transparent); transform: rotate(-8deg); transition: transform .3s ease; }
.service-assure-package:hover .service-assure-package-icon, .service-assure-package:focus .service-assure-package-icon { transform: rotate(-3deg) translateY(-.4rem) scale(1.04); }
.service-assure-package h3, .service-assure-package p, .service-assure-package ul { position: relative; z-index: 2; }
.service-assure-package h3 { margin: 0; font-size: 2rem; font-weight: 700; line-height: 1.2; }
.service-assure-package>p { margin: .5rem 0 2.25rem; color: #454c53; font-size: 1.05rem; }
.service-assure-package ul { max-width: 13.5rem; margin: 0; padding: 0; list-style: none; }
.service-assure-package li { position: relative; margin-bottom: .8rem; padding-left: 1.15rem; color: #333940; font-size: .92rem; line-height: 1.45; }
.service-assure-package li::before { content: ""; position: absolute; top: .55em; left: 0; width: .38rem; height: .38rem; border-radius: 50%; background: var(--package-accent); opacity: .48; }
.service-assure-package-badge { position: absolute; z-index: 3; top: 1.1rem; right: 1.1rem; padding: .38rem .85rem; border-radius: 2rem; background: #ff7200; color: #fff; font-size: .72rem; font-weight: 700; box-shadow: 0 .5rem 1rem rgba(255,114,0,.22); }
.service-assure-period { margin-top: 1rem; padding: 2rem 4.5rem 1.75rem; border: 1px solid transparent; border-radius: 1rem; background: transparent; box-shadow: none; text-align: center; }
.service-assure-period>h3 { margin: 0 0 2.75rem; color: #252a31; font-size: 2rem; font-weight: 700; }
.service-assure-track { position: relative; display: grid; grid-template-columns: repeat(3,1fr); min-height: 18.25rem; }
.service-assure-track::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3.5rem; border-radius: 3rem; background: linear-gradient(90deg,#e0edfc 0%,#d6edff 53%,#e3eefb 100%); }
.service-assure-track::after { content: ""; position: absolute; right: 0; bottom: .2rem; left: 0; height: .22rem; border-radius: 1rem; background: repeating-linear-gradient(90deg,#9cccf8 0,#9cccf8 .6rem,transparent .6rem,transparent 1.1rem); opacity: .85; }
.service-assure-stage { position: relative; z-index: 1; min-width: 0; }
.service-assure-stage::after { content: ""; position: absolute; top: 6.75rem; right: 0; width: 1px; height: 8.25rem; background: linear-gradient(180deg, transparent 0%, rgba(var(--builder-period-line-rgb, 75, 167, 239), .72) 18%, rgba(var(--builder-period-line-rgb, 75, 167, 239), .72) 78%, transparent 100%); box-shadow: 0 0 .5rem rgba(var(--builder-period-line-rgb, 75, 167, 239), .18); }
.service-assure-stage:last-child::after { display: none; }
.service-assure-stage::before { content: ""; position: absolute; z-index: 2; bottom: -.14rem; left: 50%; width: .9rem; height: .9rem; border: .18rem solid #fff; border-radius: 50%; background: linear-gradient(160deg,#5089ff,#50d7ef); box-shadow: 0 .15rem .5rem rgba(80,137,255,.35); transform: translateX(-50%); }
.service-assure-stage.is-primary::before { transform: translateX(-50%) scale(1.2); box-shadow: 0 0 0 .25rem rgba(80,137,255,.18),0 .2rem .65rem rgba(80,137,255,.4); }
.service-assure-stage header { display: flex; height: 3.5rem; align-items: center; gap: 1rem; text-align: left; }
.service-assure-stage header b { display: grid; width: 5.75rem; height: 5.75rem; flex: 0 0 5.75rem; place-items: center; border-radius: 50%; background: #a9c9f8; color: #fff; font-size: 2rem; font-weight: 700; }
.service-assure-stage.is-primary header b { background: linear-gradient(160deg,#5089ff,#50d7ef); }
.service-assure-stage header strong { color: #343940; font-size: 1.45rem; white-space: nowrap; }
.service-assure-stage header span { color: #737c85; font-size: .9rem; white-space: nowrap; }
.service-assure-tasks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; padding: 3.5rem 2rem 2rem; }
.service-assure-stage:first-child .service-assure-tasks { grid-template-columns: 1fr; padding-right: 3.5rem; padding-left: 3.5rem; }
.service-assure-tasks span { display: grid; min-height: 3.5rem; place-items: center; padding: .65rem 1rem; border-radius: 2rem; background: #d9e9f8; color: #4e5861; font-size: .92rem; }
.service-assure-stage.is-primary .service-assure-tasks span { background: #cbe5fb; }
.service-assure-tasks .wide { grid-column: 1/-1; }
.service-assure-summary { display: flex; align-items: baseline; justify-content: center; gap: .38rem; margin: 1rem 0 0; color: #26364d; font-size: 1.05rem; }
.service-assure-summary strong { font-weight: 680; }
.service-assure-summary span { margin-left: 0; color: #748297; font-size: .88rem; }
.service-assure-heading { text-align: center; max-width: 62rem; margin: 0 auto 3.75rem; }
@media (max-width: 1199.98px) {
  .service-assure-packages { gap: .75rem; }
  .service-assure-package { padding: 1.75rem 1.5rem; }
  .service-assure-package h3 { font-size: 1.65rem; }
  .service-assure-package>p { font-size: .92rem; }
  .service-assure-package-icon { right: .75rem; width: 7rem; height: 7rem; font-size: 3.2rem; }
  .service-assure-period { padding-right: 2.25rem; padding-left: 2.25rem; }
  .service-assure-stage header { gap: .65rem; }
  .service-assure-stage header b { width: 4.75rem; height: 4.75rem; flex-basis: 4.75rem; font-size: 1.65rem; }
  .service-assure-stage header strong { font-size: 1.15rem; }
  .service-assure-stage header span { font-size: .78rem; }
  .service-assure-tasks { padding-right: 1.2rem; padding-left: 1.2rem; }
}
@media (max-width: 991.98px) {
  .service-assure { padding-top: 5rem; }
  .service-assure-packages { display: grid; height: auto; grid-template-columns: repeat(2,1fr); }
  .service-assure-package { min-height: 25rem; }
  .service-assure-packages:hover .service-assure-package, .service-assure-packages:focus-within .service-assure-package, .service-assure-packages .service-assure-package:hover, .service-assure-packages .service-assure-package:focus { transform: none; }
  .service-assure-period { margin-top: 1.5rem; padding: 2rem 1.25rem; }
  .service-assure-track { grid-template-columns: 1fr; gap: 1rem; min-height: 0; }
  .service-assure-track::before,.service-assure-track::after { display: none; }
  .service-assure-stage { padding-bottom: 1.25rem; border-right: 0; border-bottom: 1px solid #bcd8ed; }
  .service-assure-stage::before,.service-assure-stage::after { display: none; }
  .service-assure-stage:last-child { border-bottom: 0; }
  .service-assure-stage header { padding-right: 1rem; border-radius: 3rem; background: #dcecf9; }
  .service-assure-tasks,.service-assure-stage:first-child .service-assure-tasks { padding: 2rem 1rem .5rem; }
}
@media (max-width:575.98px) {
  .service-assure { padding-top: 4.5rem; padding-bottom: 4rem; }
  .service-assure-heading h2 { font-size: 2.15rem; }
  .service-assure-packages { grid-template-columns: 1fr; }
  .service-assure-package { min-height: 23rem; padding: 1.75rem; }
  .service-assure-package-icon { right: 1.25rem; }
  .service-assure-period { margin-right: -.75rem; margin-left: -.75rem; border-radius: 0; }
  .service-assure-period>h3 { margin-bottom: 2rem; font-size: 1.75rem; }
  .service-assure-stage header { gap: .55rem; }
  .service-assure-stage header b { width: 3.75rem; height: 3.75rem; flex-basis: 3.75rem; font-size: 1.3rem; }
  .service-assure-stage header strong { font-size: 1rem; }
  .service-assure-stage header span { font-size: .72rem; }
  .service-assure-tasks,.service-assure-stage:first-child .service-assure-tasks { padding-right: .25rem; padding-left: .25rem; }
  .service-assure-summary { font-size: .92rem; }
  .service-assure-summary span { display: block; margin: .35rem 0 0; font-size: .76rem; }
  .service-assure-heading { margin-bottom: 2.5rem; }
}