@charset "UTF-8";
/* service-speed.html · 网站加速 —— 大数字条 + 干支编号卡 + 横条对比图 */

.rv1{--d:.08s}
.rv2{--d:.18s}
.rv3{--d:.28s}

/* 00 数据条 */
.sp-stats{background:var(--paper-deep)}
.sp-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;text-align:center}
.sp-stat strong{
  display:block;font-family:var(--font-head);font-weight:800;
  font-size:clamp(30px,3.6vw,44px);color:var(--navy-900);margin-bottom:6px;
}
.sp-stat strong::after{content:"";display:block;width:44px;height:3px;background:var(--gold-500);margin:8px auto 0}
.sp-stat span{font-size:14px;color:var(--ink-2);line-height:1.8;display:block}

/* 01 干支卡 */
.sp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.sp-card{
  position:relative;background:var(--white);border:1.5px solid var(--line);
  border-radius:var(--r-lg);padding:34px 22px 26px;box-shadow:var(--shadow-sm);
  transition:transform var(--t-fast),box-shadow var(--t-fast);
}
.sp-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.sp-no{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--navy-900);color:var(--gold-300);
  font-weight:800;margin-bottom:16px;
}
.sp-h{font-size:16.5px;margin-bottom:8px}
.sp-p{font-size:13.5px;color:var(--ink-2);line-height:1.85}

/* 02 测速图文 */
.sp-io{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.sp-io-txt .sec-title{margin-bottom:16px}
.sp-io-p{color:var(--ink-2);margin-bottom:14px;line-height:1.95}
.sp-io-img img{
  width:100%;height:400px;object-fit:cover;
  border-radius:var(--r-xl) var(--r-xl) 10px var(--r-xl);
  box-shadow:var(--shadow-md);
}
.sp-inline{color:var(--gold-500);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* 03 验收指标 */
.sp-bench{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.sp-bench-item{
  background:var(--paper);border-radius:var(--r-md);
  padding:26px 22px;text-align:center;
  border-bottom:3px solid var(--gold-500);
}
.sp-bench-item strong{
  display:block;font-family:var(--font-head);font-size:19px;
  color:var(--navy-900);margin-bottom:10px;
}
.sp-bench-item span{font-size:13.5px;color:var(--ink-2);line-height:1.8}

/* 04 前后横条对比 */
.sp-compare{max-width:760px;margin:0 auto}
.sp-bar-row{margin-bottom:26px}
.sp-bar-label{display:block;font-size:14px;color:#C6CDDE;margin-bottom:8px;letter-spacing:1px}
.sp-bar-line{display:flex;flex-direction:column;gap:8px}
.sp-bar-before,.sp-bar-after{
  height:26px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:flex-end;
  padding-right:12px;color:var(--navy-900);
  font-size:13px;font-weight:700;
  transition:width 1s var(--ease);
}
.sp-bar-before{background:rgba(255,255,255,.16);color:#E8EBF4}
.sp-bar-b1{width:90%}
.sp-bar-b2{width:95%}
.sp-bar-b3{width:38%}
.sp-bar-after{background:linear-gradient(90deg,var(--gold-400),var(--gold-500))}
.sp-bar-a1{width:24%}
.sp-bar-a2{width:20%}
.sp-bar-a3{width:88%}
.sp-compare-note{text-align:center;font-size:13px;color:#9AA3BC;margin-top:18px}

/* 05 服务器 */
.sp-host{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.sp-host-img img{
  width:100%;height:360px;object-fit:cover;
  border-radius:10px var(--r-xl) var(--r-xl) var(--r-xl);box-shadow:var(--shadow-md);
}

@media (max-width:920px){
  .sp-stats-row{grid-template-columns:1fr;gap:28px}
  .sp-grid{grid-template-columns:1fr 1fr}
  .sp-io,.sp-host{grid-template-columns:1fr;gap:40px}
  .sp-bench{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .sp-grid,.sp-bench{grid-template-columns:1fr}
  .sp-io-img img,.sp-host-img img{height:250px}
}