@charset "utf-8";
/* ==========================================================================
   独立站代运营 Spider-Pool-Rental.html · 稳重深灰蓝主题
   浅色首屏 + 深色数据条，仅本页使用，前缀 sp-
   ========================================================================== */
:root{
  --brand:#1E5FA8;
  --brand-2:#38BDF8;
  --accent:#F97316;
  --bg:#FFFFFF;
  --bg-soft:#F1F5F9;
  --ink:#0F172A;
  --text:#25344A;
  --muted:#5B6B80;
  --surface:#FFFFFF;
  --surface-2:#F8FAFC;
  --border:rgba(15,23,42,.12);
  --border-strong:rgba(15,23,42,.22);
  --head-bg:rgba(255,255,255,.94);
  --head-text:#0F172A;
  --head-border:rgba(15,23,42,.1);
  --nav-hover-bg:rgba(30,95,168,.09);
  --foot-bg:#0B1F38;
  --foot-text:#B7C6DA;
  --shadow:0 22px 56px rgba(11,31,56,.14);
  --shadow-sm:0 10px 26px rgba(11,31,56,.08);
}
.eyebrow{color:var(--brand);background:rgba(30,95,168,.08)}
.eyebrow::before{background:var(--brand)}

/* ---------- 首屏：文左图右 ---------- */
.sp-hero{
  position:relative;overflow:hidden;
  padding:clamp(46px,5.6vw,82px) 0 clamp(40px,5vw,66px);
  background:
    radial-gradient(700px 340px at 6% 0%,rgba(56,189,248,.16),transparent 70%),
    linear-gradient(180deg,#F1F5F9 0%,#FFFFFF 86%);
}
.sp-hero h1{margin:16px 0 18px}
.sp-hero .hero-points{color:var(--text)}
.sp-hero .hero-points li::before{background:var(--brand)}
.sp-hero .btn-primary{background:linear-gradient(135deg,#1E5FA8,#38BDF8);box-shadow:0 12px 30px rgba(30,95,168,.3)}
.sp-hero .btn-accent{background:linear-gradient(135deg,#F97316,#EA580C)}
.sp-hero .hero-visual img{
  border-radius:18px;border:1px solid rgba(30,95,168,.16);
  box-shadow:0 26px 60px rgba(11,31,56,.18);
}

/* ---------- 深色数据条 ---------- */
.sp-band{background:linear-gradient(100deg,#0B1F38 0%,#123A63 55%,#1E5FA8 100%);padding:0}
.sp-band-list{
  display:grid;grid-template-columns:repeat(4,1fr);
}
.sp-band-list li{
  padding:30px 22px;color:#DCE8F5;border-right:1px solid rgba(255,255,255,.12);
}
.sp-band-list li:last-child{border-right:0}
.sp-band-list b{
  display:block;font-size:clamp(24px,2.8vw,36px);line-height:1.15;
  color:#fff;letter-spacing:.5px;
}
.sp-band-list span{font-size:13.5px;color:rgba(219,232,245,.78)}

/* ---------- 服务模块矩阵 2×3 ---------- */
.sp-matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sp-item{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:26px 24px;box-shadow:var(--shadow-sm);
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.sp-item:hover{transform:translateY(-5px);border-color:rgba(56,189,248,.5);box-shadow:var(--shadow)}
.sp-ico{
  display:grid;place-items:center;width:50px;height:50px;border-radius:14px;
  color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));
}
.sp-item h3{margin:16px 0 9px;color:var(--ink)}
.sp-item p{margin:0;color:var(--muted);font-size:14.5px}

/* ---------- 适合谁 / 痛点 ---------- */
.sp-why{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,46px);align-items:start}
.sp-why h2{margin:12px 0 20px}
.sp-pain{display:grid;gap:12px}
.sp-pain li{
  background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent);
  border-radius:12px;padding:14px 16px;font-size:14.5px;color:var(--muted);
}
.sp-pain li b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}
.sp-tip{margin-top:18px;font-size:14px;color:var(--muted);border-left:3px solid var(--brand);padding-left:14px}
.sp-tip a{color:var(--brand);font-weight:700}
.sp-tip--mid{max-width:940px;margin:26px auto 0}

/* ---------- 流程步骤 ---------- */
.sp-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:sp}
.sp-steps li{
  position:relative;background:var(--surface-2);border:1px solid var(--border);
  border-radius:14px;padding:24px 20px;border-top:3px solid var(--brand);
}
.sp-steps li b{
  display:block;font-size:22px;font-weight:900;color:rgba(30,95,168,.28);margin-bottom:10px;
}
.sp-steps h3{font-size:16.5px;margin-bottom:8px;color:var(--ink)}
.sp-steps p{margin:0;font-size:14px;color:var(--muted)}

/* ---------- 优势 ---------- */
.sp-adv{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.sp-adv article{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px 22px;
  box-shadow:var(--shadow-sm);
}
.sp-adv h3{margin-bottom:9px;color:var(--ink);font-size:17px}
.sp-adv p{margin:0;color:var(--muted);font-size:14.5px}
.sp-note{margin-top:18px}

/* ---------- 三张图表错位排列 ---------- */
.sp-charts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.sp-chart{
  margin:0;background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:16px;box-shadow:var(--shadow-sm);
}
.sp-chart--mid{margin-top:38px}
.sp-chart img{border-radius:10px}
.sp-chart figcaption{
  margin-top:12px;font-size:13.5px;color:var(--muted);text-align:center;font-weight:600;
}
.sp-disclaim{margin-top:20px;font-size:12.8px;color:var(--muted);text-align:center}

/* ---------- 托管范围 ---------- */
.sp-scope{display:grid;grid-template-columns:1.05fr .95fr;gap:20px}
.sp-scope-col{border-radius:16px;padding:26px 24px;border:1px solid var(--border)}
.sp-scope-col--in{background:linear-gradient(170deg,#EDF5FF,#fff);border-left:4px solid var(--brand)}
.sp-scope-col--out{background:linear-gradient(170deg,#FFF6EE,#fff);border-left:4px solid var(--accent)}
.sp-scope-col h3{margin-bottom:16px;color:var(--ink)}
.sp-no-list{display:grid;gap:11px}
.sp-no-list li{position:relative;padding-left:26px;font-size:14.5px;color:var(--muted)}
.sp-no-list li::before{
  content:"×";position:absolute;left:2px;top:0;font-size:15px;font-weight:800;color:var(--accent);
}

/* ---------- FAQ 单列 ---------- */
.sp-faq{max-width:940px}
.sp-faq details{background:#fff;border-radius:14px;box-shadow:var(--shadow-sm)}
.sp-faq summary{font-size:15.5px}
.sp-faq summary::after{border-color:var(--brand)}
.sp-faq details[open]{border-color:var(--brand)}
.sp-faq .faq-body{color:var(--muted)}

/* ---------- CTA ---------- */
.cta-band{background:linear-gradient(135deg,#0B1F38 0%,#1E5FA8 58%,#38BDF8 100%)}
.cta-band .btn-light{color:var(--brand)}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .sp-matrix,.sp-adv{grid-template-columns:1fr 1fr}
  .sp-band-list{grid-template-columns:1fr 1fr}
  .sp-band-list li:nth-child(2){border-right:0}
  .sp-band-list li:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12)}
  .sp-steps{grid-template-columns:1fr 1fr}
  .sp-charts{grid-template-columns:1fr}
  .sp-chart--mid{margin-top:0}
  .sp-why,.sp-scope{grid-template-columns:1fr}
}
@media (max-width:720px){
  .sp-matrix,.sp-adv,.sp-steps{grid-template-columns:1fr}
  .sp-band-list{grid-template-columns:1fr}
  .sp-band-list li{border-right:0;border-bottom:1px solid rgba(255,255,255,.12);padding:22px 18px}
  .sp-band-list li:last-child{border-bottom:0}
  .sp-item{padding:22px 18px}
  .sp-adv article{padding:20px 18px}
}