@charset "utf-8";
/* ==========================================================================
   页面主题：谷歌SEO代运营（seo-agent-operation.html）
   风格：蓝绿清爽商务 · 浅色首屏 · 清单+数据小卡 / 周计划时间轴 / 交付物表格
   Contact: TG:@mspseo   Q/V:897569356
   ========================================================================== */
:root{
  --brand:#0D9488;
  --brand-2:#0EA5E9;
  --accent:#F59E0B;
  --bg:#FFFFFF;
  --bg-soft:#EFFCFA;
  --surface:#FFFFFF;
  --surface-2:#F5FCFB;
  --ink:#0B3B39;
  --text:#173F3D;
  --muted:#5B7C7A;
  --border:rgba(11,59,57,.10);
  --border-strong:rgba(11,59,57,.20);
  --head-bg:rgba(255,255,255,.92);
  --head-text:#0B3B39;
  --head-border:rgba(11,59,57,.08);
  --nav-hover-bg:rgba(13,148,136,.09);
  --foot-bg:#08302E;
  --foot-text:#B6D6D2;
  --foot-head:#FFFFFF;
  --foot-border:rgba(255,255,255,.12);
  --radius:18px;
}

/* ---------- 首屏（浅色左文右图） ---------- */
.sao-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#EFFCFA 0%,#F1FBFF 58%,#FFFFFF 100%);
  border-bottom:1px solid var(--border);
  padding:clamp(38px,5vw,74px) 0 clamp(34px,4vw,60px);
}
.sao-hero::after{
  content:"";position:absolute;right:-170px;top:-190px;width:540px;height:540px;border-radius:50%;
  background:radial-gradient(circle,rgba(14,165,233,.20) 0%,rgba(14,165,233,0) 70%);pointer-events:none;
}
.sao-hero .container{position:relative;z-index:2}
.sao-hero .hero-lead{color:var(--muted)}
.sao-hero .hero-visual img{
  background:#fff;border:1px solid rgba(13,148,136,.16);border-radius:20px;
  box-shadow:0 26px 62px rgba(11,59,57,.14);
}
.sao-strip{
  margin-top:clamp(24px,3.6vw,40px);display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.sao-strip li{
  background:rgba(255,255,255,.86);border:1px solid var(--border);border-radius:15px;
  padding:18px 16px;text-align:center;box-shadow:0 6px 18px rgba(11,59,57,.05);
}
.sao-strip b{display:block;font-size:clamp(19px,2.2vw,26px);color:var(--brand);line-height:1.3}
.sao-strip span{font-size:13px;color:var(--muted)}

/* ---------- 服务范围：清单 + 右侧数据小卡 ---------- */
.sao-scope{display:grid;grid-template-columns:1.22fr .78fr;gap:clamp(20px,3vw,38px);align-items:start}
.sao-scope-list{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:clamp(22px,2.6vw,32px);box-shadow:var(--shadow-sm);
}
.sao-scope-list .checklist li{font-size:14.8px;line-height:1.85}
.sao-scope-list .checklist li b{color:var(--ink)}
.sao-mini{display:grid;gap:14px}
.sao-mini-card{
  border-radius:15px;padding:18px 20px;background:linear-gradient(150deg,#0D9488,#0EA5E9);
  color:#fff;box-shadow:0 16px 36px rgba(13,148,136,.22);
}
.sao-mini-card:nth-child(2){background:linear-gradient(150deg,#0EA5E9,#22C3C9)}
.sao-mini-card:nth-child(3){background:linear-gradient(150deg,#0B7C86,#0D9488)}
.sao-mini-card:nth-child(4){background:linear-gradient(150deg,#12A594,#0EA5E9)}
.sao-mini-card b{display:block;font-size:17px;margin-bottom:6px}
.sao-mini-card span{font-size:13.2px;color:rgba(255,255,255,.9);line-height:1.7}

/* ---------- 适合谁 / 痛点 ---------- */
.sao-fit{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sao-fit-item{
  background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--brand-2);
  border-radius:15px;padding:22px;
}
.sao-fit-item h3{font-size:16.5px;margin-bottom:9px}
.sao-fit-item p{font-size:14.2px;color:var(--muted);margin:0}

/* ---------- 周计划时间轴 ---------- */
.sao-timeline{position:relative;max-width:940px;margin:0 auto;padding-left:28px;list-style:none}
.sao-timeline::before{
  content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--brand),var(--brand-2));opacity:.35;
}
.sao-timeline li{
  position:relative;display:grid;grid-template-columns:98px 1fr;gap:18px;align-items:start;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:18px 22px;margin-bottom:14px;box-shadow:0 6px 20px rgba(11,59,57,.05);
}
.sao-timeline li:last-child{margin-bottom:0}
.sao-timeline li::before{
  content:"";position:absolute;left:-28px;top:26px;width:16px;height:16px;border-radius:50%;
  background:var(--brand);border:3px solid var(--bg);
}
.sao-timeline .wk{
  display:inline-flex;justify-content:center;padding:6px 10px;border-radius:999px;
  font-size:13.4px;font-weight:800;color:var(--brand);background:var(--nav-hover-bg);
  border:1px solid var(--border);white-space:nowrap;
}
.sao-timeline h3{font-size:16.5px;margin-bottom:7px}
.sao-timeline p{font-size:14.2px;color:var(--muted);margin:0}

/* ---------- KPI 双栏 ---------- */
.sao-kpi{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,36px);align-items:start}
.sao-kpi h2{margin:14px 0 16px}
.sao-kpi p{color:var(--muted);font-size:14.8px}
.sao-kpi-side{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:clamp(22px,2.4vw,28px);box-shadow:var(--shadow-sm);
}
.sao-kpi-side h3{font-size:17px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px dashed var(--border-strong)}
.sao-kpi-side .checklist li{font-size:14.3px}

/* ---------- 优势 ---------- */
.sao-adv{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sao-adv-item{
  background:var(--surface);border:1px solid var(--border);border-radius:15px;padding:22px;
  position:relative;transition:transform .24s,box-shadow .24s;
}
.sao-adv-item::after{
  content:"";position:absolute;left:22px;bottom:0;width:34px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
}
.sao-adv-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.sao-adv-item h3{font-size:16.5px;margin-bottom:9px}
.sao-adv-item p{font-size:14.2px;color:var(--muted);margin:0}

/* ---------- 案例 ---------- */
.sao-case{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.sao-case-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 10px 28px rgba(11,59,57,.07);
}
.sao-case-card img{width:100%;background:var(--surface-2)}
.sao-case-card .bd{padding:20px 24px 24px}
.sao-case-card h3{font-size:17px;margin-bottom:10px}
.sao-case-card p{font-size:14.2px;color:var(--muted)}
.sao-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.sao-meta span{
  font-size:12.4px;font-weight:700;color:var(--brand);
  background:var(--nav-hover-bg);border-radius:999px;padding:4px 12px;
}

/* ---------- 价格 ---------- */
.sao-price{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,34px);align-items:start}
.sao-price-main h3,.sao-price-side h3{font-size:17.5px;margin-bottom:16px}
.sao-price-side{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:clamp(22px,2.6vw,30px);box-shadow:var(--shadow-sm);
}
.sao-price-side p{font-size:14.4px;color:var(--muted)}
.sao-mini-tip{
  font-size:13.6px!important;font-weight:700;color:var(--accent)!important;
  background:rgba(245,158,11,.10);border-left:3px solid var(--accent);
  padding:10px 14px;border-radius:0 10px 10px 0;margin-top:16px!important;
}
.sao-price-side .btn{margin-top:18px}

/* ---------- 通用小字 ---------- */
.img-cap{font-size:12.6px;color:var(--muted);text-align:center;margin-top:14px}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .sao-scope,.sao-kpi,.sao-price{grid-template-columns:1fr}
  .sao-fit,.sao-adv{grid-template-columns:1fr 1fr}
  .sao-case{grid-template-columns:1fr}
  .sao-mini{grid-template-columns:1fr 1fr;gap:12px}
  .sao-strip{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .sao-fit,.sao-adv,.sao-mini{grid-template-columns:1fr}
  .sao-timeline{padding-left:22px}
  .sao-timeline li{grid-template-columns:1fr;gap:10px;padding:16px 18px}
  .sao-timeline li::before{left:-24px;top:22px;width:14px;height:14px}
  .sao-strip{grid-template-columns:1fr 1fr;gap:10px}
  .sao-strip li{padding:14px 12px}
  .sao-case-card .bd{padding:18px 18px 20px}
}