/* =========================================================
   valueadd.html 增值服务页独有样式
   版式：不对称 hero（图偏右下）+ 编号服务卡 + 等级对比表 + 运维流程方卡 + 承诺图文
   ========================================================= */

/* ---------- 1. 不对称 hero ---------- */
.va-hero {
  position: relative;
  padding: calc(var(--header-h) + var(--topbar-h) + 60px) 0 100px;
  background: linear-gradient(155deg, var(--cream) 0%, var(--yellow) 130%);
  overflow: hidden;
}
.va-hero-inner {
  display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px;
  align-items: center;
}
.va-bread { margin-bottom: 18px; font-size: .88rem; color: var(--ink-3); }
.va-bread a { font-weight: 600; color: var(--ink-2); }
.va-bread span { margin: 0 8px; }
.va-bread em { font-style: normal; color: var(--green-3); font-weight: 600; }
.va-kicker { font-size: .82rem; letter-spacing: 3px; color: var(--green-3); font-weight: 700; margin-bottom: 12px; }
.va-hero-copy h1 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); margin-bottom: 18px; }
.va-sub { max-width: 540px; margin-bottom: 26px; }
.va-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.va-hero-figure {
  border-radius: 30% 70% 60% 40% / 55% 45% 55% 45%;
  overflow: hidden;
  box-shadow: var(--clay-shadow-lg);
  transform: translateY(26px);
}
.va-hero-figure img { width: 100%; height: 280px; object-fit: cover; }

/* ---------- 2. 六类服务卡 ---------- */
.va-list-sec { background: var(--cream); }
.va-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.va-card { padding: 30px 26px; }
.va-card-no {
  display: inline-block; margin-bottom: 12px;
  background: var(--green); color: #3F5238;
  padding: 3px 14px; border-radius: 999px; font-size: .82rem;
}
.va-card h3 { margin-bottom: 10px; }
.va-card p { font-size: .93rem; }

/* ---------- 3. 等级对比表 ---------- */
.va-level-sec { background: var(--cream-2); }
.va-level-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--clay-shadow-sm); }
.va-level-table { width: 100%; min-width: 640px; border-collapse: collapse; background: #FFFDF6; }
.va-level-table th, .va-level-table td {
  padding: 15px 22px; text-align: left; font-size: .95rem;
  border-bottom: 1px dashed var(--line);
}
.va-level-table thead th { background: var(--green); color: #3F5238; }
.va-level-table tbody tr:last-child td { border-bottom: 0; }
.va-level-table td:first-child { font-weight: 700; white-space: nowrap; }
.va-level-table td:nth-child(3) { background: rgba(191,216,178,.2); }

/* ---------- 4. 运维流程 ---------- */
.va-flow-sec { background: var(--cream); }
.va-flow-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.va-flow { padding: 28px 22px; }
.va-flow b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FDF6E4, var(--yellow-2));
  margin-bottom: 12px;
}
.va-flow h3 { font-size: 1.02rem; margin-bottom: 8px; }
.va-flow p { font-size: .9rem; }

/* ---------- 5. 服务承诺 ---------- */
.va-promise-sec { background: var(--cream-2); }
.va-promise-inner {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center;
}
.va-promise-copy .sec-kicker {
  display: inline-block; font-size: .82rem; letter-spacing: 3px;
  color: var(--green-3); font-weight: 700; margin-bottom: 10px;
}
.va-promise-copy h2 { margin-bottom: 18px; }
.va-promise-img { border-radius: 36px; overflow: hidden; box-shadow: var(--clay-shadow); }
.va-promise-img img { width: 100%; height: 320px; object-fit: cover; }

/* ---------- 6. CTA ---------- */
.va-cta-sec {
  background: linear-gradient(150deg, var(--green) 0%, var(--yellow) 130%);
  padding: clamp(56px, 8vw, 96px) 0;
}
.va-cta-inner { text-align: center; }
.va-cta-inner h2 { margin-bottom: 14px; }
.va-cta-inner p { margin-bottom: 26px; color: var(--ink); }
.va-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- 响应式 ---------- */
.va-level-note, .va-flow-note { text-align: center; font-size: .92rem; margin-top: 18px; }

/* ---------- 5b. 为什么要运维 ---------- */
.va-final-sec { background: var(--cream); }
.va-final-copy { max-width: 760px; margin: 0 auto; text-align: center; font-size: 1.02rem; line-height: 1.9; }

/* ---------- 5c. 运维日常 ---------- */
.va-story-sec { background: var(--cream); }
.va-story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.va-story { padding: 28px 26px; }
.va-story h3 { margin-bottom: 10px; color: var(--green-3); font-size: 1.02rem; }
.va-story p { font-size: .93rem; }
@media (max-width: 768px) { .va-story-grid { grid-template-columns: 1fr; } }

@media (max-width: 1024px) {
  .va-hero-inner { grid-template-columns: 1fr; }
  .va-card-grid { grid-template-columns: repeat(2, 1fr); }
  .va-flow-list { grid-template-columns: repeat(2, 1fr); }
  .va-promise-inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .va-card-grid, .va-flow-list { grid-template-columns: 1fr; }
}