/* =========================================================
   case-v2.css  服信通 · 成功案例
   视觉：藏青 #071d3b + 电光青 #36c4df，整页浅色
   排版：紧凑 Hero → 品牌墙（原图完整保留）→ 服务覆盖 → CTA
   ========================================================= */
:root{
  --cs-navy:#071d3b;
  --cs-blue:#1267c8;
  --cs-cyan:#36c4df;
  --cs-ink:#142641;
  --cs-body:#5a6a7d;
  --cs-pale:#f5f8fc;
  --cs-hair:rgba(20,38,65,.13);
}

.cs-eyebrow{
  font-family:Georgia,"Times New Roman",serif;font-style:italic;
  letter-spacing:.22em;text-transform:uppercase;font-size:12px;
  color:var(--cs-blue);margin:0 0 12px;
}
.cs-hero .cs-eyebrow{color:#8fe3ef}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

/* ---------- Hero ---------- */
.cs-hero{
  color:#fff;padding:160px 0 72px;position:relative;overflow:hidden;
  background:
    radial-gradient(680px 300px at 88% 18%,rgba(54,196,223,.22),transparent 70%),
    linear-gradient(120deg,#071d3b 26%,#0d3159 64%,#1267c8 100%);
  background-color:var(--cs-navy);
}
.cs-hero h1{margin:0 0 16px;font-size:clamp(38px,4.8vw,58px);line-height:1.14;letter-spacing:-.035em;font-weight:700}
.cs-hero h1 em{font-style:normal;color:var(--cs-cyan)}
.cs-hero p{margin:0 0 30px;max-width:560px;color:rgba(255,255,255,.84);font-size:15.5px;line-height:1.95}
.cs-actions{display:flex;flex-wrap:wrap;gap:12px}
.cs-hero .btn-primary{background:var(--cs-cyan);color:#06213e;box-shadow:none}
.cs-hero .btn-primary:hover{background:#6be4f1}
.cs-hero .btn-ghost{border-color:rgba(255,255,255,.45)}
.cs-hero .btn-ghost:hover{background:#fff;color:var(--cs-navy)}

/* ---------- 品牌墙 ---------- */
.cs-wall{padding:88px 0;background:var(--cs-pale)}
.cs-sec-head{max-width:680px;margin:0 auto 46px;text-align:center}
.cs-sec-head h2{margin:0 0 12px;font-size:clamp(26px,3.2vw,36px);letter-spacing:-.025em;color:var(--cs-ink);font-weight:700}
.cs-sec-head p{margin:0;color:var(--cs-body);line-height:1.9;font-size:15px}
.cs-frame{background:#fff;border:1px solid var(--cs-hair);border-radius:18px;box-shadow:0 24px 60px rgba(20,58,100,.09);padding:34px 30px}
.cs-frame img{display:block;width:100%;height:auto}

/* ---------- 服务覆盖 ---------- */
.cs-cover{padding:88px 0;background:#fff}
.cs-cities{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--cs-hair);border:1px solid var(--cs-hair);border-radius:12px;overflow:hidden;max-width:880px;margin:0 auto}
.cs-cities div{background:#fff;padding:18px 20px;text-align:center}
.cs-cities b{display:block;font-size:15px;color:var(--cs-ink);font-weight:600;margin-bottom:4px}
.cs-cities span{font-size:12.5px;color:var(--cs-body)}

/* ---------- CTA ---------- */
.cs-cta{background:var(--cs-navy);padding:76px 0;text-align:center;color:#fff}
.cs-cta h2{margin:0 0 12px;font-size:clamp(22px,2.8vw,30px);font-weight:700}
.cs-cta p{margin:0 0 28px;color:rgba(255,255,255,.78)}
.cs-cta .cs-actions{justify-content:center}
.cs-cta .btn-primary{background:var(--cs-cyan);color:#06213e;box-shadow:none}
.cs-cta .btn-primary:hover{background:#6be4f1}
.cs-cta .btn-ghost{border-color:rgba(255,255,255,.45)}
.cs-cta .btn-ghost:hover{background:#fff;color:var(--cs-navy)}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .cs-hero{padding:132px 0 56px}
  .cs-wall,.cs-cover{padding:64px 0}
  .cs-frame{padding:22px 18px}
}
@media (max-width:600px){
  .cs-hero{padding:112px 0 44px}
  .cs-hero h1{font-size:32px}
  .cs-hero p{font-size:14px}
  .cs-wall,.cs-cover{padding:48px 0}
  .cs-sec-head{margin-bottom:30px}
  .cs-frame{padding:14px 10px;border-radius:12px}
  .cs-cities{grid-template-columns:repeat(2,1fr)}
  .cs-cta{padding:56px 0}
}