@charset "utf-8";
/* ==========================================================================
   百度SEO排名 主题：红蓝对撞 + 深色首屏（覆盖 base.css 变量 + 组件 baidu-*）
   ========================================================================== */
:root{
  --brand:#2932E1;
  --brand-2:#3B82F6;
  --accent:#E10602;
  --bg:#FFFFFF;
  --bg-soft:#F5F6FF;
  --surface:#FFFFFF;
  --surface-2:#F3F5FF;
  --ink:#0D1235;
  --text:#232A4D;
  --muted:#5E6689;
  --border:rgba(13,18,53,.10);
  --border-strong:rgba(13,18,53,.18);
  --head-bg:rgba(255,255,255,.94);
  --head-text:#0D1235;
  --nav-hover-bg:rgba(41,50,225,.08);
  --foot-bg:#080C2A;
  --foot-text:#B6BCE0;
  --foot-head:#FFFFFF;
  --foot-border:rgba(255,255,255,.12);
  --radius:16px;
  --radius-sm:12px;
  --shadow:0 20px 50px rgba(13,18,53,.11);
  --shadow-sm:0 8px 22px rgba(13,18,53,.07);
}
.baidu-crumb-in{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- 首屏：深蓝底 + 红色高亮 CTA ---------- */
.baidu-hero{
  position:relative;overflow:hidden;color:#E9EEFF;
  padding:clamp(40px,5.2vw,82px) 0 clamp(40px,5vw,70px);
  background:linear-gradient(140deg,#0A1450 0%,#141D70 55%,#1B0E4A 100%);
}
.baidu-hero::before{
  content:"";position:absolute;inset:0;background-image:url("../pic/pattern-grid.svg");
  background-size:120px 120px;opacity:.42;pointer-events:none;
}
.baidu-hero::after{
  content:"";position:absolute;left:-170px;bottom:-280px;width:580px;height:580px;
  background:radial-gradient(circle,rgba(225,6,2,.42) 0%,rgba(225,6,2,0) 70%);pointer-events:none;
}
.baidu-hero .container{position:relative;z-index:2}
.baidu-hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(26px,4vw,56px);align-items:center}
.baidu-hero h1{color:#fff;margin:16px 0}
.baidu-hero .eyebrow{color:#C7D3FF;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.baidu-hero .eyebrow::before{background:#FF3B30;box-shadow:0 0 12px #FF3B30}
.baidu-hero .hero-lead{color:rgba(224,232,255,.86);max-width:none}
.baidu-hero .hero-points{color:#D7E0FF}
.baidu-hero .hero-points li::before{background-color:#E10602}
.baidu-hero .hero-cta-box{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);box-shadow:none}
.baidu-hero .hero-cta-box .t{color:rgba(206,218,255,.8)}
.baidu-hero .hero-cta-box .t b{color:#fff}
.baidu-hero .hero-note{color:rgba(206,218,255,.72)}
.baidu-hero .btn-accent{background:linear-gradient(135deg,#FF2D20,#C00400);box-shadow:0 14px 34px rgba(225,6,2,.42)}
.baidu-hero .btn-light{background:#fff;color:var(--brand);box-shadow:0 12px 30px rgba(3,7,26,.32)}
.baidu-hero-visual img{
  width:100%;border-radius:18px;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 34px 80px rgba(3,7,25,.58);
}

/* ---------- 第二屏：红蓝双色痛点对照 ---------- */
.baidu-split{
  display:grid;grid-template-columns:1fr 1fr;border-radius:18px;overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff;
}
.baidu-split .side{padding:clamp(24px,3vw,38px)}
.baidu-split .side--pain{background:linear-gradient(160deg,#FFF4F3,#FFE8E6);border-right:1px solid rgba(225,6,2,.16)}
.baidu-split .side--fix{background:linear-gradient(160deg,#EFF2FF,#E2E9FF)}
.baidu-split h3{font-size:18px;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.baidu-split .side--pain h3{color:#A50400}
.baidu-split .side--fix h3{color:#1B21A8}
.baidu-split .side--pain h3::before{content:"";width:22px;height:4px;border-radius:2px;background:var(--accent)}
.baidu-split .side--fix h3::before{content:"";width:22px;height:4px;border-radius:2px;background:var(--brand)}
.baidu-split ul{display:grid;gap:14px}
.baidu-split li{position:relative;padding-left:24px;font-size:14.4px;line-height:1.8;color:var(--text)}
.baidu-split .side--pain li::before{content:"!";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:900;display:grid;place-items:center;line-height:1}
.baidu-split .side--fix li::before{content:"";position:absolute;left:0;top:8px;width:14px;height:14px;border-radius:50%;background:var(--brand-2) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px 9px no-repeat}
.baidu-split li b{color:var(--ink)}

/* ---------- 服务清单：带左侧竖条的表格式列表 ---------- */
.baidu-list{border-top:1px solid var(--border)}
.baidu-list>li{
  display:grid;grid-template-columns:.4fr 1fr;gap:clamp(14px,2.6vw,34px);
  padding:22px 0 22px 24px;border-bottom:1px solid var(--border);
  border-left:4px solid var(--brand);transition:background .22s;
}
.baidu-list>li:nth-child(2n){border-left-color:var(--accent)}
.baidu-list>li:hover{background:var(--surface-2)}
.baidu-list h3{font-size:17px;margin-bottom:8px}
.baidu-list .bd p{font-size:14.3px;color:var(--muted);margin:0}
.baidu-list .out{display:inline-block;margin-top:10px;font-size:12.6px;font-weight:700;color:var(--brand);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:4px 12px}

/* ---------- 流程：图文 + 竖条步骤行 ---------- */
.baidu-flow{display:grid;gap:24px;align-items:start}
.baidu-flow-head{margin:0 0 8px;text-align:left}
.baidu-flow-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(20px,3vw,44px);align-items:center}
.baidu-flow-grid img{width:100%;border-radius:16px;border:1px solid var(--border);box-shadow:var(--shadow)}
.baidu-flow-list>li{border-left:4px solid var(--brand);border-bottom:1px solid var(--border);padding:16px 0 16px 20px}
.baidu-flow-list>li:nth-child(2n){border-left-color:var(--accent)}
.baidu-flow-list h3{font-size:16.4px;margin-bottom:6px}
.baidu-flow-list p{font-size:14.1px;color:var(--muted);margin:0}

/* ---------- 适合客户：分隔线分栏（无卡片） ---------- */
.baidu-fit{display:grid;grid-template-columns:repeat(4,1fr)}
.baidu-fit li{padding:0 clamp(16px,2vw,28px);border-left:1px solid var(--border)}
.baidu-fit li:first-child{border-left:0;padding-left:0}
.baidu-fit b{display:block;font-size:12.6px;font-weight:800;letter-spacing:1.6px;color:var(--accent);margin-bottom:12px}
.baidu-fit h3{font-size:16.6px;margin-bottom:9px}
.baidu-fit p{font-size:14.1px;color:var(--muted);margin:0}

/* ---------- 优势 ---------- */
.baidu-adv{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.baidu-adv li{display:flex;gap:16px;padding:20px 22px;border-radius:12px;background:#fff;border:1px solid var(--border)}
.baidu-adv b{flex:0 0 auto;font-size:26px;font-weight:900;line-height:1;color:rgba(41,50,225,.18)}
.baidu-adv h3{font-size:16.4px;margin-bottom:7px}
.baidu-adv p{font-size:14.1px;color:var(--muted);margin:0}

/* ---------- 案例：上下两层错位卡片 ---------- */
.baidu-cases{display:grid;gap:22px}
.baidu-case{
  display:grid;gap:clamp(18px,3vw,34px);align-items:center;
  border-radius:18px;overflow:hidden;background:#fff;
  border:1px solid var(--border);box-shadow:var(--shadow-sm);
}
.baidu-case--a{grid-template-columns:1.32fr .68fr;margin-left:clamp(0px,5vw,84px)}
.baidu-case--b{grid-template-columns:.68fr 1.32fr;margin-right:clamp(0px,5vw,84px)}
.baidu-case img{width:100%;background:var(--surface-2);border-right:1px solid var(--border)}
.baidu-case--b img{border-right:0;border-left:1px solid var(--border)}
.baidu-case .bd{padding:22px 24px}
.baidu-case h3{font-size:17px;margin-bottom:10px}
.baidu-case p{font-size:14.2px;color:var(--muted)}
.baidu-case .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.baidu-case .row span{font-size:12.4px;font-weight:700;color:var(--accent);background:#FFF3F2;border-radius:999px;padding:4px 12px}

/* ---------- FAQ：左侧问题导航 + 右侧答案 ---------- */
.baidu-faq{display:grid;grid-template-columns:.34fr .66fr;gap:clamp(20px,3vw,40px);align-items:start}
.baidu-faq-nav{position:sticky;top:96px;padding:22px;border-radius:14px;background:var(--bg-soft);border:1px solid var(--border)}
.baidu-faq-nav h3{font-size:16px;margin-bottom:14px}
.baidu-faq-nav li{margin-bottom:11px}
.baidu-faq-nav a{position:relative;display:block;padding-left:16px;font-size:14.2px;line-height:1.6;color:var(--brand)}
.baidu-faq-nav a::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.faq.baidu-faq-list{max-width:none;margin:0}
.faq.baidu-faq-list details{scroll-margin-top:96px}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .baidu-hero-grid{grid-template-columns:1fr}
  .baidu-hero-visual{order:-1}
  .baidu-split{grid-template-columns:1fr}
  .baidu-split .side--pain{border-right:0;border-bottom:1px solid rgba(225,6,2,.16)}
  .baidu-fit{grid-template-columns:1fr 1fr;gap:26px 0}
  .baidu-fit li:nth-child(3){border-left:0;padding-left:0}
  .baidu-case--a,.baidu-case--b{grid-template-columns:1fr;margin:0}
  .baidu-case img,.baidu-case--b img{border:0;border-bottom:1px solid var(--border)}
  .baidu-case--b img{order:-1}
  .baidu-flow-grid{grid-template-columns:1fr}
  .baidu-faq{grid-template-columns:1fr}
  .baidu-faq-nav{position:static}
}
@media (max-width:720px){
  .baidu-list>li{grid-template-columns:1fr;gap:8px;padding-left:18px}
  .baidu-flow-list>li{padding-left:14px}
  .baidu-fit{grid-template-columns:1fr}
  .baidu-fit li{border-left:0;padding:0 0 20px;border-bottom:1px solid var(--border)}
  .baidu-fit li:last-child{border-bottom:0;padding-bottom:0}
  .baidu-adv{grid-template-columns:1fr}
  .baidu-hero .hero-cta-box{flex-direction:column;align-items:stretch}
  .baidu-hero .hero-cta-box .btn{width:100%}
}