/* ============================================================
   SEO优化服务 seo.css
   布局特征：左文右图（圆形徽章）+ 大号数字竖向问题列表 +
   四步编号卡（顶部胶囊标签）+ 横向阶段时间轴 + 双列 FAQ
   ============================================================ */
.banner-service{background-image:url('../images/banner-service.jpg');background-size:cover;background-position:center}

/* ---------- SEO 是什么：左文右图 ---------- */
.seo-what{background:var(--c-white)}
.seo-what-wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.seo-what-text h2{font-size:clamp(24px,2.8vw,34px);margin:14px 0 20px}
.seo-what-text p{color:var(--c-text-2);margin-bottom:16px;font-size:15.5px}
.seo-what-text a{color:var(--c-accent);font-weight:600}
.seo-what-media{position:relative}
.seo-what-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.seo-what-note{
  position:absolute;right:-20px;top:32px;background:var(--c-grad);color:#fff;
  border-radius:50%;width:132px;height:132px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;box-shadow:0 14px 30px rgba(37,99,235,.35);
}
.seo-what-note b{font-size:26px;font-weight:800;line-height:1}
.seo-what-note span{font-size:11.5px;margin-top:6px;color:#D6E2F6;line-height:1.4}

/* ---------- 问题列表：大号数字 ---------- */
.seo-why{background:var(--c-ice-2)}
.seo-why-list{display:grid;gap:18px;max-width:960px;margin:0 auto}
.seo-why-item{
  display:flex;gap:26px;background:#fff;border-radius:var(--radius-lg);padding:30px 34px;
  box-shadow:var(--shadow);border-left:5px solid var(--c-accent);transition:transform var(--trans);
}
.seo-why-item:hover{transform:translateX(8px)}
.seo-why-item>b{font-size:46px;font-weight:800;color:var(--c-ice);line-height:1.1;flex-shrink:0}
.seo-why-item h3{font-size:18px;margin-bottom:8px}
.seo-why-item p{font-size:14.5px;color:var(--c-text-2);margin:0}

/* ---------- 怎么做：四步卡（顶部胶囊标签） ---------- */
.seo-how{background:var(--c-white)}
.seo-how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.seo-how-card{
  background:var(--c-ice-2);border-radius:var(--radius-lg);padding:30px 24px;
  border-bottom:4px solid var(--c-accent-2);
}
.seo-how-step{
  display:inline-block;font-size:12.5px;font-weight:700;color:var(--c-accent);
  background:#fff;border:1px solid var(--c-line);border-radius:999px;padding:4px 14px;margin-bottom:16px;
}
.seo-how-card h3{font-size:16.5px;margin-bottom:10px;line-height:1.5}
.seo-how-card p{font-size:13.5px;color:var(--c-text-2);margin:0}

/* ---------- 效果周期：横向阶段轴 ---------- */
.seo-cycle{background:var(--c-dark);background-image:radial-gradient(circle at 80% 20%,rgba(37,99,235,.25),transparent 45%)}
.seo-cycle .sec-head h2{color:#fff}
.seo-cycle .sec-head p{color:#AFC6EC}
.seo-cycle-line{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.seo-cycle-line::before{content:"";position:absolute;top:21px;left:5%;right:5%;height:2px;background:rgba(255,255,255,.18)}
.seo-cycle-item{position:relative;padding:0 18px}
.seo-cycle-item time{
  position:relative;z-index:2;display:inline-block;background:var(--c-grad);color:#fff;
  font-size:13px;font-weight:700;padding:7px 18px;border-radius:999px;margin-bottom:18px;
}
.seo-cycle-item h3{color:#fff;font-size:17px;margin-bottom:8px}
.seo-cycle-item p{font-size:13.5px;color:#AFC6EC;margin:0}

/* ---------- FAQ 双列 ---------- */
.seo-faq{background:var(--c-ice-2)}
.seo-faq-wrap{max-width:1000px}
.seo-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.seo-faq-item{background:#fff;border-radius:14px;padding:0 24px;box-shadow:var(--shadow)}
.seo-faq-item summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-weight:700;color:var(--c-primary);padding:18px 0;font-size:15px;
}
.seo-faq-item summary::-webkit-details-marker{display:none}
.seo-faq-item summary::after{content:"+";font-size:20px;color:var(--c-accent);transition:transform var(--trans);flex-shrink:0}
.seo-faq-item[open] summary::after{transform:rotate(45deg)}
.seo-faq-item p{padding:0 0 20px;color:var(--c-text-2);font-size:14px;margin:0}
.seo-faq-item p a{color:var(--c-accent);font-weight:600}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .seo-what-wrap{grid-template-columns:1fr;gap:44px}
  .seo-how-grid{grid-template-columns:repeat(2,1fr)}
  .seo-cycle-line{grid-template-columns:repeat(2,1fr);gap:30px 0}
  .seo-cycle-line::before{display:none}
  .seo-faq-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .seo-how-grid{grid-template-columns:1fr}
  .seo-cycle-line{grid-template-columns:1fr}
  .seo-what-note{right:0;width:110px;height:110px}
  .seo-why-item{flex-direction:column;gap:10px}
}