/* ============================================================
   网络推广服务 tuiguang.css
   布局特征：三色顶横条方式卡（3列）+ 左图右文预算清单 +
   中间带 VS 的双栏对照 + 横向编号步骤
   ============================================================ */
.banner-tech{background-image:url('../images/banner-tech.jpg');background-size:cover;background-position:center}

/* ---------- 三种方式：顶横条卡片 ---------- */
.tg-way{background:var(--c-white)}
.tg-way-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.tg-way-card{
  background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-lg);
  padding:0 30px 30px;overflow:hidden;box-shadow:var(--shadow);transition:transform var(--trans),box-shadow var(--trans);
}
.tg-way-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.tg-way-top{height:8px;margin:0 -30px 26px}
.tg-way-top svg{display:none}
.tg-way-card{position:relative}
.tg-way-card h3{font-size:18.5px;margin-bottom:12px}
.tg-way-card>p{font-size:14px;color:var(--c-text-2);margin-bottom:14px}
.tg-way-card ul{display:grid;gap:8px;padding-top:14px;border-top:1px dashed var(--c-line)}
.tg-way-card li{position:relative;padding-left:22px;font-size:13.5px;color:var(--c-text)}
.tg-way-card li::before{content:"";position:absolute;left:0;top:8px;width:12px;height:12px;border-radius:3px;background:var(--c-ice)}
/* 三色顶条 */
.tg-way-card:nth-child(1) .tg-way-top{background:linear-gradient(90deg,#1B3A6B,#2563EB)}
.tg-way-card:nth-child(2) .tg-way-top{background:linear-gradient(90deg,#2563EB,#3B82F6)}
.tg-way-card:nth-child(3) .tg-way-top{background:linear-gradient(90deg,#3B82F6,#7DB3FF)}

/* ---------- 预算：左图右文 ---------- */
.tg-budget{background:var(--c-ice-2)}
.tg-budget-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
.tg-budget-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.tg-budget-text h2{font-size:clamp(22px,2.6vw,32px);margin:12px 0 18px}
.tg-budget-text>p{color:var(--c-text-2);margin-bottom:16px;font-size:15px}
.tg-budget-list{display:grid;gap:12px;margin-bottom:16px}
.tg-budget-list li{
  background:#fff;border-radius:12px;padding:16px 22px;display:flex;align-items:center;gap:18px;
  box-shadow:var(--shadow);
}
.tg-budget-list b{color:var(--c-accent);font-size:17px;white-space:nowrap;flex-shrink:0}
.tg-budget-list span{font-size:14px;color:var(--c-text-2)}

/* ---------- 与SEO配合：双栏对照 ---------- */
.tg-compare{background:var(--c-white)}
.tg-compare-grid{
  display:grid;grid-template-columns:1fr 70px 1fr;gap:0;align-items:stretch;
  max-width:980px;margin:0 auto;
}
.tg-compare-col{
  background:var(--c-ice-2);border-radius:var(--radius-lg);padding:36px 32px;
  display:flex;flex-direction:column;
}
.tg-compare-col:nth-child(3){background:var(--c-dark);background-image:radial-gradient(circle at 90% 0%,rgba(37,99,235,.25),transparent 50%)}
.tg-compare-head{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.tg-compare-head svg{width:34px;height:34px;fill:var(--c-accent)}
.tg-compare-head h3{font-size:19px}
.tg-compare-col:nth-child(3) .tg-compare-head h3{color:#fff}
.tg-compare-col ul{display:grid;gap:12px;flex:1;margin-bottom:24px}
.tg-compare-col li{position:relative;padding-left:26px;font-size:14.5px;color:var(--c-text)}
.tg-compare-col li::before{
  content:"";position:absolute;left:0;top:8px;width:12px;height:7px;
  border-left:2.5px solid var(--c-accent);border-bottom:2.5px solid var(--c-accent);transform:rotate(-45deg);
}
.tg-compare-col:nth-child(3) li{color:#D6E2F6}
.tg-compare-col:nth-child(3) li::before{border-color:#3B82F6}
.tg-compare-vs{
  display:flex;align-items:center;justify-content:center;
}
.tg-compare-vs{
  width:64px;height:64px;border-radius:50%;background:var(--c-grad);color:#fff;
  font-weight:800;font-size:15px;align-self:center;box-shadow:0 10px 24px rgba(37,99,235,.35);margin:0 auto;
}

/* ---------- 代运营：横向编号步骤 ---------- */
.tg-work{background:var(--c-ice-2)}
.tg-work-line{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tg-work-item{background:#fff;border-radius:var(--radius-lg);padding:30px 24px;text-align:center;box-shadow:var(--shadow)}
.tg-work-item b{
  display:inline-flex;width:52px;height:52px;border-radius:50%;background:var(--c-grad);
  color:#fff;font-size:20px;font-weight:800;align-items:center;justify-content:center;margin-bottom:16px;
}
.tg-work-item h3{font-size:16px;margin-bottom:8px}
.tg-work-item p{font-size:13.5px;color:var(--c-text-2);margin:0}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .tg-way-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .tg-budget-wrap{grid-template-columns:1fr;gap:40px}
  .tg-compare-grid{grid-template-columns:1fr}
  .tg-compare-vs{margin:18px auto}
  .tg-work-line{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .tg-work-line{grid-template-columns:1fr}
  .tg-budget-list li{flex-direction:column;align-items:flex-start;gap:4px}
}