@charset "utf-8";
/* ==========================================================================
   谷歌SEO排名 主题：白底 + 谷歌四色点缀（覆盖 base.css 变量 + 组件 gseo-*）
   ========================================================================== */
:root{
  --brand:#1A73E8;
  --brand-2:#34A853;
  --accent:#EA4335;
  --bg:#FFFFFF;
  --bg-soft:#F8F9FB;
  --surface:#FFFFFF;
  --surface-2:#F5F7FA;
  --ink:#101827;
  --text:#28313F;
  --muted:#61708A;
  --border:rgba(16,24,39,.10);
  --border-strong:rgba(16,24,39,.18);
  --head-bg:rgba(255,255,255,.94);
  --head-text:#101827;
  --nav-hover-bg:rgba(26,115,232,.08);
  --foot-bg:#0D1220;
  --foot-text:#B7C1D4;
  --foot-head:#FFFFFF;
  --foot-border:rgba(255,255,255,.12);
  --radius:14px;
  --radius-sm:12px;
  --shadow:0 18px 46px rgba(16,24,39,.09);
  --shadow-sm:0 8px 22px rgba(16,24,39,.07);
}
.gseo-crumb-in{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- 首屏：居中堆叠 ---------- */
.gseo-hero{
  text-align:center;position:relative;border-bottom:1px solid var(--border);
  padding:clamp(42px,5.2vw,82px) 0 clamp(32px,4vw,56px);
  background:radial-gradient(800px 340px at 50% -10%,rgba(26,115,232,.11),transparent 70%),#fff;
}
.gseo-hero h1{max-width:920px;margin:18px auto 0;font-size:clamp(27px,4vw,46px)}
.gseo-hero .hero-lead{max-width:790px;margin:20px auto 0}
.gseo-rule{
  width:140px;height:5px;border-radius:99px;margin:22px auto;
  background:linear-gradient(90deg,var(--brand) 0 33.4%,var(--accent) 33.4% 66.7%,var(--brand-2) 66.7% 100%);
}
.gseo-hero .hero-points{justify-content:center;max-width:820px;margin:24px auto 26px}
.gseo-hero .hero-cta-box{justify-content:center;max-width:840px;margin:0 auto;text-align:left}
.gseo-hero-visual{margin-top:clamp(28px,4vw,50px)}
.gseo-hero-visual img{width:100%;border-radius:16px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow)}

/* ---------- 三色 tag 锚点导航条 ---------- */
.gseo-tags{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  padding:22px 0;background:var(--bg-soft);border-bottom:1px solid var(--border);
}
.gseo-tags a{
  padding:9px 20px;border-radius:999px;font-size:14px;font-weight:700;
  background:#fff;border:1px solid var(--border);color:var(--text);
  transition:transform .2s,box-shadow .2s,color .2s;
}
.gseo-tags a:nth-child(3n+1){color:var(--brand);border-color:rgba(26,115,232,.34)}
.gseo-tags a:nth-child(3n+2){color:var(--accent);border-color:rgba(234,67,53,.32)}
.gseo-tags a:nth-child(3n+3){color:var(--brand-2);border-color:rgba(52,168,83,.34)}
.gseo-tags a:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}

/* ---------- 左右交替图文行 ---------- */
.gseo-rows{display:grid;gap:clamp(26px,4vw,58px)}
.gseo-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.4vw,52px);align-items:center}
.gseo-row--rev .gseo-row-media{order:2}
.gseo-row-media img{width:100%;border-radius:14px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.gseo-row-body .k{display:inline-flex;align-items:center;gap:9px;font-size:12.4px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--brand)}
.gseo-row-body .k::before{content:"";width:22px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--brand),var(--accent))}
.gseo-row-body h3{font-size:clamp(19px,2vw,24px);margin:12px 0 12px}
.gseo-row-body p{font-size:14.8px;color:var(--muted)}
.gseo-row-list{display:grid;gap:10px;margin-top:16px}
.gseo-row-list li{position:relative;padding-left:24px;font-size:14.2px;color:var(--text)}
.gseo-row-list li::before{content:"";position:absolute;left:0;top:8px;width:12px;height:12px;border-radius:4px;background:var(--brand);opacity:.75}

/* ---------- 补充模块 ---------- */
.gseo-more{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(26px,4vw,48px)}
.gseo-more article{padding:26px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border)}
.gseo-more b{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#fff;border:1px solid var(--border);color:var(--brand);font-size:14px;margin-bottom:14px}
.gseo-more h3{font-size:17px;margin-bottom:9px}
.gseo-more p{font-size:14.2px;color:var(--muted)}

/* ---------- 适合客户 ---------- */
.gseo-fit{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.gseo-fit article{padding:26px;border-radius:14px;background:#fff;border:1px solid var(--border);border-top:3px solid var(--brand)}
.gseo-fit article:nth-child(2){border-top-color:var(--accent)}
.gseo-fit article:nth-child(3){border-top-color:var(--brand-2)}
.gseo-fit article:nth-child(4){border-top-color:var(--brand)}
.gseo-fit h3{font-size:17px;margin-bottom:9px}
.gseo-fit p{font-size:14.2px;color:var(--muted);margin:0}

/* ---------- 时间轴流程 ---------- */
.gseo-timeline{position:relative;display:grid;gap:22px;padding-left:34px}
.gseo-timeline::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--brand),var(--brand-2),var(--accent))}
.gseo-timeline li{position:relative}
.gseo-timeline li::before{content:"";position:absolute;left:-34px;top:4px;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--brand)}
.gseo-timeline li:nth-child(2)::before{border-color:var(--brand-2)}
.gseo-timeline li:nth-child(3)::before{border-color:var(--accent)}
.gseo-timeline h3{font-size:16.6px;margin-bottom:7px}
.gseo-timeline p{font-size:14.3px;color:var(--muted);margin:0}

/* ---------- 优势（四色点） ---------- */
.gseo-adv{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.gseo-adv li{padding:24px;border-radius:14px;background:#fff;border:1px solid var(--border)}
.gseo-adv b{display:block;width:30px;height:5px;border-radius:3px;background:var(--brand);margin-bottom:16px}
.gseo-adv li:nth-child(2) b{background:var(--accent)}
.gseo-adv li:nth-child(3) b{background:var(--brand-2)}
.gseo-adv li:nth-child(4) b{background:linear-gradient(90deg,var(--brand),var(--accent))}
.gseo-adv h3{font-size:16.4px;margin-bottom:8px}
.gseo-adv p{font-size:14.1px;color:var(--muted);margin:0}

/* ---------- 案例 ---------- */
.gseo-case{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;align-items:stretch}
.gseo-case article{border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.gseo-case img{width:100%;background:var(--surface-2);border-bottom:1px solid var(--border)}
.gseo-case .bd{padding:20px 22px 24px}
.gseo-case h3{font-size:16.8px;margin-bottom:9px}
.gseo-case p{font-size:14.2px;color:var(--muted)}
.gseo-case .list{padding:24px;display:grid;gap:14px;align-content:start}
.gseo-case .list li{padding-left:20px;position:relative;font-size:14.2px;color:var(--text)}
.gseo-case .list li::before{content:"";position:absolute;left:0;top:8px;width:10px;height:10px;border-radius:50%;background:var(--brand-2)}

/* ---------- 价格（横向行） ---------- */
.gseo-plan{display:grid;gap:16px}
.gseo-plan>li{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(16px,3vw,34px);padding:26px;border-radius:14px;background:#fff;border:1px solid var(--border);align-items:start}
.gseo-plan>li:nth-child(2){border-color:rgba(26,115,232,.32);box-shadow:var(--shadow-sm)}
.gseo-plan .hd strong{display:block;font-size:18px;color:var(--ink)}
.gseo-plan .hd em{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:6px}
.gseo-plan .bd p{font-size:14.3px;color:var(--muted);margin:0}
.gseo-plan .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.gseo-plan .chips span{font-size:12.6px;font-weight:700;color:var(--brand);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:5px 13px}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .gseo-row,.gseo-case{grid-template-columns:1fr}
  .gseo-row--rev .gseo-row-media{order:0}
  .gseo-adv{grid-template-columns:1fr 1fr}
  .gseo-plan>li{grid-template-columns:1fr}
}
@media (max-width:720px){
  .gseo-more,.gseo-fit,.gseo-adv{grid-template-columns:1fr}
  .gseo-hero .hero-points{justify-content:flex-start;text-align:left}
  .gseo-hero .hero-cta-box{text-align:left}
  .gseo-tags{gap:9px;padding:16px 0}
  .gseo-tags a{padding:8px 15px;font-size:13.2px}
  .gseo-timeline{padding-left:26px}
  .gseo-timeline li::before{left:-26px;width:16px;height:16px}
}