@charset "utf-8";
/* ==========================================================================
   页面主题：Facebook投流代运营（Facebook-services.html）
   风格：Facebook 蓝 + 白 · 深蓝首屏 + 白色卡片浮层 · 层级结构 / 双列对照 / 数据条
   Contact: TG:@mspseo   Q/V:897569356
   ========================================================================== */
:root{
  --brand:#1877F2;
  --brand-2:#0B5FCC;
  --accent:#22C55E;
  --bg:#FFFFFF;
  --bg-soft:#F0F6FF;
  --surface:#FFFFFF;
  --surface-2:#F5F8FF;
  --ink:#0B1B33;
  --text:#16233D;
  --muted:#5A6B87;
  --border:rgba(11,27,51,.10);
  --border-strong:rgba(11,27,51,.20);
  --head-bg:rgba(255,255,255,.93);
  --head-text:#0B1B33;
  --head-border:rgba(11,27,51,.08);
  --nav-hover-bg:rgba(24,119,242,.09);
  --foot-bg:#071B3A;
  --foot-text:#B4C8E6;
  --foot-head:#FFFFFF;
  --foot-border:rgba(255,255,255,.12);
  --radius:18px;
}

/* ---------- 首屏：深蓝底 + 白色卡片浮层 ---------- */
.fb-hero{
  position:relative;overflow:hidden;color:#E8F1FF;
  background:linear-gradient(155deg,#0A2A5E 0%,#0B4CA8 56%,#1877F2 100%);
  padding:clamp(38px,5vw,78px) 0 clamp(32px,4vw,60px);
}
.fb-hero::before{
  content:"";position:absolute;inset:0;background-image:url("../pic/pattern-grid.svg");
  background-size:130px 130px;opacity:.26;pointer-events:none;
}
.fb-hero::after{
  content:"";position:absolute;left:-170px;bottom:-210px;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,197,94,.26) 0%,rgba(34,197,94,0) 70%);pointer-events:none;
}
.fb-hero .container{position:relative;z-index:2}
.fb-hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(22px,3.4vw,46px);align-items:center}
.fb-hero-card{
  background:#fff;border-radius:22px;padding:clamp(24px,3vw,38px);
  box-shadow:0 30px 72px rgba(4,16,40,.34);
}
.fb-hero-card h1{margin:14px 0 16px;color:var(--ink)}
.fb-hero-card .hero-lead{color:var(--muted);font-size:clamp(15px,1.4vw,17px);max-width:none}
.fb-hero-card .hero-note{color:var(--muted)}
.fb-hero-card .hero-cta-box{background:var(--surface-2);box-shadow:none}
.fb-hero-visual img{
  width:100%;border-radius:20px;border:1px solid rgba(255,255,255,.22);
  box-shadow:0 30px 76px rgba(3,12,32,.5);
}
.fb-strip{
  margin-top:clamp(22px,3.4vw,38px);display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.18);
  border-radius:16px;overflow:hidden;
}
.fb-strip li{background:rgba(255,255,255,.07);padding:18px 16px;text-align:center}
.fb-strip b{display:block;font-size:15.5px;color:#fff;line-height:1.45}
.fb-strip span{font-size:12.8px;color:rgba(216,232,255,.78)}

/* ---------- 服务卡片 ---------- */
.fb-svc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fb-svc-card{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;
  box-shadow:0 8px 22px rgba(11,27,51,.05);transition:transform .24s,box-shadow .24s;
}
.fb-svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.fb-svc-card h3{font-size:17px;margin-bottom:9px}
.fb-svc-card p{font-size:14.2px;color:var(--muted);margin:0}

/* ---------- 账户结构：层级缩进列表 ---------- */
.fb-tree{max-width:980px;margin:0 auto;display:grid;gap:14px}
.fb-tree li{
  background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--brand);
  border-radius:14px;padding:18px 22px;
}
.fb-tree li>b{font-size:16px;color:var(--ink)}
.fb-tree li>p{font-size:14.3px;color:var(--muted);margin:8px 0 0}
.fb-tree ul{margin-top:14px;padding-left:20px;border-left:2px dashed var(--border-strong);display:grid;gap:12px}
.fb-tree ul li{border-left:3px solid var(--brand-2);background:var(--surface-2);padding:14px 18px;border-radius:12px}
.fb-tree ul li>p{font-size:13.8px}
.fb-tree ul ul li{border-left-color:var(--accent)}
.fb-tree ul ul li b{font-size:14.6px}

/* ---------- 受众 × 素材：两列对照 ---------- */
.fb-compare{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fb-compare-col{
  background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:26px;
  box-shadow:var(--shadow-sm);
}
.fb-compare-col h3{font-size:18px;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--brand)}
.fb-compare-col--alt h3{border-bottom-color:var(--accent)}
.fb-compare-col .checklist li{font-size:14.2px}

/* ---------- 转化承接 + 像素卡 ---------- */
.fb-conv{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(22px,3vw,40px);align-items:start}
.fb-conv h2{margin:12px 0 16px}
.fb-conv p{color:var(--muted);font-size:14.6px}
.fb-conv .checklist{margin-top:18px}
.fb-conv .checklist li{font-size:14.3px}
.fb-pixel{
  background:linear-gradient(160deg,#0B4CA8,#1877F2);border-radius:18px;padding:26px;
  color:#EAF2FF;box-shadow:0 20px 48px rgba(11,76,168,.28);
}
.fb-pixel h3{color:#fff;font-size:17px;margin-bottom:16px}
.fb-pixel-list{display:grid;gap:12px}
.fb-pixel-list li{border-bottom:1px dashed rgba(255,255,255,.24);padding-bottom:11px}
.fb-pixel-list li:last-child{border-bottom:0;padding-bottom:0}
.fb-pixel-list b{display:block;font-size:13.8px;color:#fff}
.fb-pixel-list span{font-size:13.2px;color:rgba(226,238,255,.8)}
.fb-pixel-note{
  margin:16px 0 0;font-size:13px;color:rgba(226,238,255,.86);
  background:rgba(255,255,255,.1);border-radius:10px;padding:12px 14px;
}

/* ---------- 指标 + 数据条 ---------- */
.fb-metric{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(22px,3vw,42px);align-items:center}
.fb-bars{display:grid;gap:16px}
.fb-bars li{
  display:grid;grid-template-columns:136px 1fr;gap:4px 14px;align-items:center;
  grid-template-areas:"lb bar" "lb note";
}
.fb-bars li span{grid-area:lb;font-size:13.6px;font-weight:700;color:var(--ink)}
.fb-bars li i{
  grid-area:bar;display:block;height:12px;border-radius:99px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  box-shadow:0 4px 12px rgba(24,119,242,.28);
}
.fb-bars li b{grid-area:note;font-size:12.6px;font-weight:600;color:var(--muted)}
.fb-bars-cap{font-size:12.4px;color:var(--muted);margin-top:14px}
.fb-metric-side img{width:100%;border-radius:16px;border:1px solid var(--border);background:var(--surface-2)}

/* ---------- 预算三阶段 ---------- */
.fb-budget{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fb-budget-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px 22px}
.fb-budget-card .tag{margin-bottom:12px}
.fb-budget-card h3{font-size:16.5px;margin-bottom:10px}
.fb-budget-card p{font-size:14.2px;color:var(--muted);margin:0}

/* ---------- 合规：能做 / 不做 ---------- */
.fb-safe{display:grid;gap:clamp(18px,2.6vw,30px)}
.fb-safe h2{margin:12px 0 14px}
.fb-safe>div>p{color:var(--muted);font-size:14.6px;max-width:880px}
.fb-safe-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fb-safe-yes,.fb-safe-no{border-radius:16px;padding:24px;border:1px solid var(--border)}
.fb-safe-yes{background:rgba(34,197,94,.07);border-color:rgba(34,197,94,.30)}
.fb-safe-no{background:var(--surface-2)}
.fb-safe-yes h3,.fb-safe-no h3{font-size:16.5px;margin-bottom:14px}
.fb-safe-list li{position:relative;padding-left:24px;font-size:14.2px;color:var(--muted);margin-bottom:11px}
.fb-safe-list li:last-child{margin-bottom:0}
.fb-safe-list li::before{content:"×";position:absolute;left:0;top:-1px;color:#94A3B8;font-weight:900}

/* ---------- 适合谁 ---------- */
.fb-fit{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fb-fit-item{
  background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--brand);
  border-radius:15px;padding:22px;
}
.fb-fit-item h3{font-size:16.4px;margin-bottom:9px}
.fb-fit-item p{font-size:14.2px;color:var(--muted);margin:0}

/* ---------- 流程步骤条 ---------- */
.fb-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.fb-steps li{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px 20px;position:relative}
.fb-steps li b{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-size:13px;margin-bottom:12px;
}
.fb-steps li h3{font-size:15.6px;margin-bottom:8px}
.fb-steps li p{font-size:13.6px;color:var(--muted);margin:0}
.fb-steps li:not(:last-child)::after{
  content:"";position:absolute;right:-9px;top:38px;width:14px;height:2px;background:var(--border-strong);
}

/* ---------- 案例 ---------- */
.fb-case{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(22px,3vw,42px);align-items:center}
.fb-case-visual img{width:100%;border-radius:18px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-sm)}
.fb-case-body h3{font-size:19px;margin-bottom:14px}
.fb-case-body p{font-size:14.4px;color:var(--muted)}
.fb-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.fb-meta li{font-size:12.5px;font-weight:700;color:var(--brand);background:var(--nav-hover-bg);border-radius:999px;padding:5px 13px}

/* ---------- 优势 ---------- */
.fb-adv{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fb-adv-item{background:var(--surface);border:1px solid var(--border);border-radius:15px;padding:22px}
.fb-adv-item h3{font-size:16.2px;margin-bottom:9px}
.fb-adv-item p{font-size:14px;color:var(--muted);margin:0}

/* ---------- 费用说明 ---------- */
.fb-price{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(22px,3vw,40px);align-items:start}
.fb-price h2{margin:12px 0 16px}
.fb-price>div>p{color:var(--muted);font-size:14.8px}
.fb-price .checklist{margin-top:18px}
.fb-price .checklist li{font-size:14.3px}
.fb-price-side{
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:clamp(22px,2.6vw,30px);box-shadow:var(--shadow-sm);
}
.fb-price-side h3{font-size:17px;margin-bottom:16px}
.fb-need{display:grid;gap:11px}
.fb-need li{position:relative;padding-left:26px;font-size:14.2px;color:var(--muted)}
.fb-need li::before{
  content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:4px;
  background:var(--nav-hover-bg);border:1px solid var(--brand);
}
.fb-price-side .btn{margin-top:20px}
.fb-price-note{margin-top:16px;font-size:13px;color:var(--muted)}

/* ---------- FAQ 折叠面板 ---------- */
.fb-faq details{border-radius:0 14px 14px 0;border-left:4px solid var(--brand)}
.fb-faq details[open]{border-left-color:var(--accent)}
.fb-faq details[open] summary{color:var(--brand)}
.fb-faq .faq-body{border-top:1px dashed var(--border-strong);padding:14px 0 20px}

/* ---------- 通用小字 ---------- */
.img-cap{font-size:12.6px;color:var(--muted);text-align:center;margin-top:14px}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .fb-hero-grid,.fb-conv,.fb-metric,.fb-case,.fb-price{grid-template-columns:1fr}
  .fb-svc,.fb-fit,.fb-budget,.fb-adv{grid-template-columns:1fr 1fr}
  .fb-steps{grid-template-columns:1fr 1fr}
  .fb-steps li:not(:last-child)::after{display:none}
  .fb-strip{grid-template-columns:1fr 1fr}
  .fb-hero-card{padding:26px 22px}
}
@media (max-width:720px){
  .fb-svc,.fb-fit,.fb-budget,.fb-adv,.fb-compare,.fb-safe-grid,.fb-steps{grid-template-columns:1fr}
  .fb-bars li{grid-template-columns:1fr;grid-template-areas:"lb" "bar" "note"}
  .fb-tree ul{padding-left:12px}
  .fb-strip{grid-template-columns:1fr 1fr;gap:10px}
  .fb-strip li{padding:14px 12px}
  .fb-hero-card{padding:22px 18px;border-radius:18px}
  .fb-hero-card .hero-cta-box .btn{width:100%}
}