@charset "utf-8";
/* ==========================================================================
   妙排网络 · SEO服务页面样式（浅色薄荷 + 深林绿）
   仅作用于 seo-services.html，前缀 sv- 避免与其它页面冲突
   ========================================================================== */
:root{
  --brand:#047857;
  --brand-2:#0B9E8E;
  --accent:#C2410C;
  --ink:#07271F;
  --text:#1F3A33;
  --muted:#5A7A71;
  --bg:#FFFFFF;
  --bg-soft:#F1FAF6;
  --surface:#FFFFFF;
  --surface-2:#F4FBF8;
  --border:rgba(4,120,87,.14);
  --border-strong:rgba(4,120,87,.30);
  --head-bg:rgba(255,255,255,.94);
  --head-text:#07271F;
  --head-border:rgba(4,120,87,.12);
  --nav-hover-bg:rgba(4,120,87,.08);
  --foot-bg:#052E23;
  --foot-text:#A8CFC3;
  --foot-head:#FFFFFF;
  --foot-border:rgba(255,255,255,.10);
  --shadow:0 22px 56px rgba(6,60,45,.12);
  --shadow-sm:0 10px 26px rgba(6,60,45,.08);
}
body{background:var(--bg);color:var(--text)}
::selection{background:var(--brand);color:#fff}

/* ---------- 公共组件微调 ---------- */
.btn-primary{background:linear-gradient(135deg,#047857 0%,#0B9E8E 100%);
  box-shadow:0 10px 26px rgba(4,120,87,.26)}
.btn-primary:hover{box-shadow:0 16px 34px rgba(4,120,87,.32)}
.cta-band{
  background-image:
    linear-gradient(135deg,rgba(4,8,24,.10),rgba(4,8,24,.26)),
    linear-gradient(135deg,#046C4E 0%,#0B7A6E 100%);
}
.num-list li::before{background:linear-gradient(135deg,#046C4E,#0B7A6E)}
.card-ico{background:rgba(4,120,87,.07)}
.stats b small{font-size:.5em;font-weight:800;margin-left:2px}

/* ---------- 1. 首屏：薄荷底 + 左文右图 ---------- */
.sv-hero{position:relative;overflow:hidden;
  padding:clamp(40px,5.4vw,78px) 0 clamp(38px,4.6vw,68px);
  background:
    radial-gradient(820px 420px at 88% -10%,rgba(11,158,142,.20),transparent 62%),
    radial-gradient(620px 380px at 0% 10%,rgba(4,120,87,.12),transparent 66%),
    linear-gradient(180deg,#F7FDFA 0%,#F1FAF6 62%,#EAF6F1 100%);
}
.sv-hero h1{max-width:640px}
.sv-hero .hero-lead{max-width:600px}
.sv-hero .eyebrow{background:rgba(4,120,87,.09);border-color:var(--border-strong)}
.sv-cta{background:rgba(255,255,255,.94);border-color:var(--border-strong)}
.sv-cta .t{flex:1 1 100%;font-size:13px}
.sv-cta .t b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}
.sv-hero .hero-visual{position:relative}
.sv-hero .hero-visual img{border:1px solid var(--border-strong);border-radius:22px;
  box-shadow:0 30px 64px rgba(6,60,45,.18)}
.sv-hero .hero-visual::after{
  content:"";position:absolute;inset:auto -6% -8% -6%;height:52%;z-index:0;
  background:radial-gradient(closest-side,rgba(4,120,87,.16),transparent 74%);
}
.sv-hero .hero-visual img{position:relative;z-index:1}

/* ---------- 2. 九项服务卡 ---------- */
.sv-svc-grid{gap:20px}
.sv-svc{
  position:relative;display:block;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:26px 24px 22px;box-shadow:var(--shadow-sm);
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.sv-svc::before{
  content:"";position:absolute;left:0;top:0;width:4px;height:100%;
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  transform:scaleY(0);transform-origin:top;transition:transform .3s;
}
.sv-svc:hover{transform:translateY(-5px);border-color:var(--border-strong);box-shadow:var(--shadow)}
.sv-svc:hover::before{transform:scaleY(1)}
.sv-svc b{
  display:inline-block;font-size:13px;font-weight:800;letter-spacing:1.4px;
  color:var(--brand);padding:3px 10px;border-radius:8px;background:rgba(4,120,87,.08);
}
.sv-svc h3{margin:12px 0 8px;font-size:17.5px;color:var(--ink)}
.sv-svc p{color:var(--muted);font-size:14.4px;margin:0 0 14px}
.sv-svc .sv-more{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:800;color:var(--brand);
}
.sv-svc .sv-more::after{content:"→";transition:transform .25s}
.sv-svc:hover .sv-more::after{transform:translateX(4px)}

/* ---------- 3. 合作流程：横向四步 ---------- */
.sv-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:n}
.sv-flow li{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:18px;padding:26px 22px;box-shadow:var(--shadow-sm);
  transition:transform .25s,border-color .25s;
}
.sv-flow li:hover{transform:translateY(-4px);border-color:var(--border-strong)}
.sv-flow li:not(:last-child)::after{
  content:"";position:absolute;right:-14px;top:44px;width:10px;height:10px;
  border-top:2.4px solid var(--border-strong);border-right:2.4px solid var(--border-strong);
  transform:rotate(45deg);
}
.sv-flow b{font-size:12.5px;font-weight:800;letter-spacing:1.4px;color:var(--brand-2)}
.sv-flow h3{margin:10px 0 8px;font-size:17px}
.sv-flow p{color:var(--muted);font-size:14.3px;margin:0}

/* ---------- 4. 蜘蛛池原理 ---------- */
.sv-spider{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(24px,3.4vw,48px);align-items:center}
.sv-spider-txt h2{margin:12px 0 14px}
.sv-spider-txt > p{color:var(--muted);font-size:15px;line-height:1.9}
.sv-steps li{font-size:14.8px;line-height:1.88;color:var(--muted)}
.sv-steps li strong{display:block;margin-bottom:4px;color:var(--ink);font-size:16px}
.sv-spider-btns{margin-top:26px}
.sv-spider-visual{position:relative}
.sv-spider-visual img{width:100%;border:1px solid var(--border-strong);border-radius:22px;
  background:var(--surface-2);box-shadow:0 26px 58px rgba(6,60,45,.16)}
.sv-cap{margin:12px 0 0;text-align:center;font-size:13px;color:var(--muted)}

/* ---------- 5. 为什么选我们 ---------- */
.sv-why article{
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:26px 22px;box-shadow:var(--shadow-sm);
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.sv-why article:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:var(--shadow)}
.sv-why h3{margin:14px 0 9px;font-size:17px}
.sv-why p{color:var(--muted);font-size:14.4px;margin:0}

/* ---------- 6. FAQ ---------- */
.sv-faq details[open]{border-color:var(--brand-2)}

/* ---------- 7. 响应式 ---------- */
@media (max-width:1080px){
  .sv-flow{grid-template-columns:1fr 1fr}
  .sv-flow li:not(:last-child)::after{display:none}
  .sv-spider{grid-template-columns:1fr;gap:30px}
  .sv-spider-visual{order:-1}
  .sv-hero h1,.sv-hero .hero-lead{max-width:none}
}
@media (max-width:720px){
  .sv-flow{grid-template-columns:1fr}
  .sv-svc{padding:22px 18px 20px}
  .sv-flow li{padding:22px 18px}
  .sv-why article{padding:22px 18px}
  .sv-spider-btns .btn{width:100%}
}