/* ============================================================
   云主机服务器服务 kongjian.css
   布局特征：3列配置卡（含规格清单）+ 上图下文 CDN 介绍 +
   横向字母编号步骤 + 深色保障数据条
   ============================================================ */
.banner-tech{background-image:url('../images/banner-tech.jpg');background-size:cover;background-position:center}

/* ---------- 配置卡：3列 ---------- */
.kj-type{background:var(--c-white)}
.kj-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.kj-type-card{
  position:relative;background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-lg);
  padding:36px 30px;display:flex;flex-direction:column;box-shadow:var(--shadow);
  transition:transform var(--trans),box-shadow var(--trans);
}
.kj-type-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.kj-type-hot{border:2px solid var(--c-accent)}
.kj-type-tag{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--c-grad);color:#fff;
  font-size:12.5px;font-weight:700;padding:5px 18px;border-radius:999px;white-space:nowrap;
}
.kj-type-head{border-bottom:1px dashed var(--c-line);padding-bottom:18px;margin-bottom:18px}
.kj-type-head h3{font-size:19px;margin-bottom:8px}
.kj-type-price{font-size:34px;font-weight:800;color:var(--c-primary)}
.kj-type-price span{font-size:13px;font-weight:500;color:var(--c-muted);margin-left:4px}
.kj-type-card ul{display:grid;gap:10px;margin-bottom:26px;flex:1}
.kj-type-card li{font-size:14px;color:var(--c-text-2);padding-left:18px;position:relative}
.kj-type-card li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:2px;background:var(--c-ice);border:1px solid var(--c-accent)}

/* ---------- CDN：上图下文 ---------- */
.kj-cdn{background:var(--c-ice-2)}
.kj-cdn-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
.kj-cdn-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.kj-cdn-text h2{font-size:clamp(22px,2.6vw,32px);margin:12px 0 18px}
.kj-cdn-text p{color:var(--c-text-2);margin-bottom:16px;font-size:15px}

/* ---------- 迁移：字母编号步骤 ---------- */
.kj-migrate{background:var(--c-white)}
.kj-migrate-line{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.kj-migrate-item{
  background:var(--c-ice-2);border-radius:var(--radius-lg);padding:28px 22px;text-align:center;
}
.kj-migrate-step{
  display:inline-flex;width:52px;height:52px;border-radius:14px;background:var(--c-dark);color:#fff;
  font-size:22px;font-weight:800;align-items:center;justify-content:center;margin-bottom:16px;
}
.kj-migrate-item h3{font-size:16px;margin-bottom:8px}
.kj-migrate-item p{font-size:13.5px;color:var(--c-text-2);margin:0;line-height:1.65}
.kj-migrate-item a{color:var(--c-accent);font-weight:600}

/* ---------- 保障数据条 ---------- */
.kj-guarantee{padding-bottom:96px}
.kj-guarantee-band{
  background:var(--c-dark);background-image:radial-gradient(circle at 80% 0%,rgba(37,99,235,.3),transparent 50%);
  border-radius:var(--radius-lg);padding:54px 40px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.kj-gu-item{text-align:center;color:#fff}
.kj-gu-item b{display:block;font-size:clamp(28px,3vw,40px);font-weight:800;line-height:1;margin-bottom:8px}
.kj-gu-item b span{font-size:.55em;color:var(--c-accent-2);margin-left:2px}
.kj-gu-item span:last-child{font-size:13.5px;color:#AFC6EC}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .kj-type-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}
  .kj-cdn-wrap{grid-template-columns:1fr;gap:36px}
  .kj-migrate-line{grid-template-columns:repeat(2,1fr)}
  .kj-guarantee-band{grid-template-columns:repeat(2,1fr);padding:40px 24px}
}
@media (max-width:640px){
  .kj-migrate-line{grid-template-columns:1fr}
}
