@charset "UTF-8";
/* service-seo.html · SEO 优化 —— 交错图文 + 金色描边卡 + 阶梯时间轴 + 数据条 */

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

/* 01 原理图文 */
.seo-io{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.seo-io-img img{
  width:100%;height:400px;object-fit:cover;
  border-radius:var(--r-xl) 8px var(--r-xl) var(--r-xl);
  box-shadow:var(--shadow-md);
}
.seo-io-txt .sec-title{margin-bottom:16px}
.seo-io-p{color:var(--ink-2);margin-bottom:14px;line-height:1.95}

/* 02 优化项卡 */
.seo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.seo-card{
  background:var(--white);border-radius:var(--r-md);
  padding:28px 26px;border:1.5px solid var(--gold-200);
  transition:border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
}
.seo-card:hover{border-color:var(--gold-500);transform:translateY(-5px);box-shadow:var(--shadow-gold)}
.seo-h{font-size:17px;margin-bottom:8px;color:var(--navy-800)}
.seo-p{font-size:14px;color:var(--ink-2);line-height:1.85}

/* 03 数据看板图文 */
.seo-dash{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.seo-dash-img img{
  width:100%;height:380px;object-fit:cover;
  border-radius:8px var(--r-xl) var(--r-xl) var(--r-xl);
  box-shadow:var(--shadow-md);
}

/* 04 阶梯时间轴 */
.seo-ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.seo-step{
  background:rgba(255,255,255,.05);border:1px solid rgba(201,169,106,.35);
  border-radius:var(--r-lg);padding:26px 22px;
}
.seo-step-m{
  display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:1px;
  color:var(--navy-900);background:var(--gold-300);
  padding:3px 12px;border-radius:var(--r-pill);margin-bottom:14px;
}
.seo-step-h{color:var(--white);font-size:17px;margin-bottom:8px}
.seo-step-p{color:#C6CDDE;font-size:13.5px;line-height:1.85}

/* 05 数据条 */
.seo-facts{background:var(--gold-200)}
.seo-facts-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.seo-fact strong{
  display:block;font-family:var(--font-head);font-weight:800;
  font-size:clamp(28px,3.4vw,42px);color:var(--navy-900);margin-bottom:4px;
}
.seo-fact span{font-size:14px;color:var(--ink-2)}

/* 06 服务边界 */
.seo-honest{
  background:var(--white);border-radius:var(--r-lg);
  padding:40px 44px;box-shadow:var(--shadow-sm);
  border-left:5px solid var(--navy-800);
}
.seo-honest .sec-title{margin-bottom:16px}
.seo-inline{color:var(--gold-500);font-weight:700;text-decoration:underline;text-underline-offset:3px}

@media (max-width:920px){
  .seo-io,.seo-dash{grid-template-columns:1fr;gap:40px}
  .seo-grid{grid-template-columns:1fr 1fr}
  .seo-ladder{grid-template-columns:1fr 1fr}
  .seo-facts-row{grid-template-columns:1fr 1fr;gap:28px}
  .seo-honest{padding:28px 24px}
}
@media (max-width:560px){
  .seo-grid,.seo-ladder{grid-template-columns:1fr}
  .seo-io-img img,.seo-dash-img img{height:250px}
}