/* ============================================================
   网站维护改版 weihu.css
   布局特征：左图（悬浮时间章）右 2x2 图标网格 +
   横向行表式套餐 + 竖向时间线改版流程
   ============================================================ */
.banner-service{background-image:url('../images/banner-service.jpg');background-size:cover;background-position:center}

/* ---------- 维护内容：左图右2x2 ---------- */
.wh-content{background:var(--c-white)}
.wh-content-wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:center}
.wh-content-media{position:relative}
.wh-content-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.wh-content-ribbon{
  position:absolute;right:-18px;bottom:-22px;background:var(--c-dark);color:#fff;
  border-radius:14px;padding:16px 24px;display:flex;flex-direction:column;box-shadow:0 14px 30px rgba(15,31,61,.3);
}
.wh-content-ribbon b{font-size:26px;font-weight:800;color:#fff;line-height:1}
.wh-content-ribbon span{font-size:12px;color:#AFC6EC;margin-top:6px}
.wh-content-text h2{font-size:clamp(22px,2.6vw,32px);margin:12px 0 16px}
.wh-content-text>p{color:var(--c-text-2);margin-bottom:22px;font-size:15px}
.wh-content-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.wh-content-item{background:var(--c-ice-2);border-radius:14px;padding:22px 20px}
.wh-ic{width:44px;height:44px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:12px;box-shadow:var(--shadow)}
.wh-ic svg{width:22px;height:22px;fill:var(--c-accent)}
.wh-content-item h3{font-size:15.5px;margin-bottom:6px}
.wh-content-item p{font-size:13px;color:var(--c-text-2);margin:0;line-height:1.65}

/* ---------- 套餐：横向行表 ---------- */
.wh-plan{background:var(--c-ice-2)}
.wh-plan-table{
  background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;
}
.wh-plan-row{display:contents}
.wh-plan-row>div{padding:18px 22px;border-bottom:1px solid var(--c-line);font-size:14.5px}
.wh-plan-head>div{
  background:var(--c-dark);color:#fff;font-weight:700;font-size:15.5px;padding-top:24px;padding-bottom:24px;
}
.wh-plan-row>div:first-child{font-weight:600;color:var(--c-text)}
.wh-plan-row .hot{background:var(--c-ice);color:var(--c-primary);font-weight:700}
.wh-plan-head .hot{background:var(--c-grad);color:#fff}
.wh-plan-foot>div{border-bottom:none;padding-top:22px}

/* ---------- 改版：竖向时间线 ---------- */
.wh-redesign{background:var(--c-white)}
.wh-timeline{position:relative;max-width:760px;margin-top:30px;padding-left:36px}
.wh-timeline::before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:3px;background:linear-gradient(180deg,#2563EB,#EAF2FF)}
.wh-tl-item{position:relative;padding-bottom:30px}
.wh-tl-item:last-child{padding-bottom:0}
.wh-tl-dot{
  position:absolute;left:-32px;top:6px;width:17px;height:17px;border-radius:50%;
  background:#fff;border:4px solid var(--c-accent);box-shadow:0 0 0 4px var(--c-ice);
}
.wh-tl-card{
  background:var(--c-ice-2);border-radius:var(--radius-lg);padding:24px 28px;
}
.wh-tl-card time{
  display:inline-block;font-size:12.5px;font-weight:800;color:#fff;background:var(--c-grad);
  border-radius:999px;padding:3px 14px;margin-bottom:10px;letter-spacing:.5px;
}
.wh-tl-card h3{font-size:17px;margin-bottom:6px}
.wh-tl-card p{font-size:14px;color:var(--c-text-2);margin:0}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .wh-content-wrap{grid-template-columns:1fr;gap:44px}
  .wh-plan-table{grid-template-columns:1.2fr 1fr 1fr}
  .wh-plan-head>div:last-child,.wh-plan-row>div:last-child{display:none}
}
@media (max-width:640px){
  .wh-content-grid{grid-template-columns:1fr}
  .wh-plan-table{grid-template-columns:1.4fr 1fr}
  .wh-plan-head>div:nth-child(3),.wh-plan-row>div:nth-child(3){display:none}
  .wh-timeline{padding-left:28px}
}