@charset "utf-8";
/* ==========================================================================
   百度SEO培训 · 红蓝白教学风（覆盖 base.css 变量）
   Contact: TG:@mspseo   Q/V:897569356
   ========================================================================== */
:root{
  --brand:#E10602;
  --brand-2:#2563EB;
  --accent:#0EA5E9;
  --bg:#FFFFFF;
  --bg-soft:#FFF5F5;
  --surface:#FFFFFF;
  --surface-2:#FFF8F8;
  --ink:#1F2937;
  --text:#374151;
  --muted:#6B7280;
  --border:rgba(31,41,55,.10);
  --border-strong:rgba(31,41,55,.20);
  --head-bg:rgba(255,255,255,.93);
  --head-text:#1F2937;
  --head-border:rgba(31,41,55,.08);
  --nav-hover-bg:rgba(225,6,2,.08);
  --foot-bg:#1B1F2A;
  --foot-text:#C4CAD6;
  --foot-border:rgba(255,255,255,.10);
  --radius:18px;
}

/* ---------- 首屏（居中标题 · 浅色） ---------- */
.bds-hero{
  position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(180deg,#FFF5F5 0%,#FFFFFF 70%);
  padding:clamp(40px,5vw,78px) 0 clamp(34px,4vw,60px);
}
.bds-hero::before{
  content:"";position:absolute;inset:0;
  background-image:url("../pic/pattern-dots.svg");background-size:26px 26px;
  opacity:.35;pointer-events:none;
}
.bds-hero .container{position:relative;z-index:2}
.bds-hero h1{max-width:940px;margin:16px auto 18px}
.bds-hero .hero-lead{max-width:790px;margin-left:auto;margin-right:auto}
.bds-hero .hero-points{justify-content:center;margin-bottom:26px}
.bds-hero .hero-cta-box{max-width:800px;margin:0 auto;justify-content:center;background:#fff;box-shadow:var(--shadow-sm)}
.bds-hero-visual{max-width:940px;margin:28px auto 0}
.bds-hero-visual img{width:100%;border-radius:22px;box-shadow:0 30px 66px rgba(190,20,20,.16)}

/* ---------- 首屏三列信息卡 ---------- */
.bds-info{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px;text-align:left}
.bds-info-card{
  padding:22px;border-radius:16px;background:#fff;border:1px solid var(--border);
  border-top:4px solid var(--brand);box-shadow:0 12px 30px rgba(31,41,55,.08);
}
.bds-info-card:nth-child(2){border-top-color:var(--brand-2)}
.bds-info-card:nth-child(3){border-top-color:var(--accent)}
.bds-info-card .k{font-size:12px;font-weight:800;letter-spacing:1.6px;color:var(--brand)}
.bds-info-card:nth-child(2) .k{color:var(--brand-2)}
.bds-info-card:nth-child(3) .k{color:var(--accent)}
.bds-info-card h3{margin:9px 0 9px;font-size:17px}
.bds-info-card p{font-size:14px;color:var(--muted);margin:0}

/* ---------- 左右交替图文行 ---------- */
.bds-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,52px);align-items:center;margin-bottom:clamp(30px,4.4vw,58px)}
.bds-row:last-child{margin-bottom:0}
.bds-row.flip .bds-row-media{order:-1}
.bds-row-media img{width:100%;border-radius:18px;box-shadow:var(--shadow)}
.bds-row-body h3{font-size:clamp(19px,2vw,23px);margin-bottom:14px}
.bds-row-body p{font-size:15px;color:var(--muted)}
.bds-chip{
  display:inline-block;margin-bottom:12px;padding:4px 13px;border-radius:999px;
  font-size:12.5px;font-weight:800;color:#fff;letter-spacing:1px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
}
.bds-check{display:grid;gap:10px;margin-top:16px}
.bds-check li{position:relative;padding-left:26px;font-size:14.4px;color:var(--text)}
.bds-check li::before{
  content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:5px;
  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/11px 11px no-repeat;
}

/* ---------- 标签云 + 分组列表 ---------- */
.bds-cloud{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:clamp(26px,3.4vw,42px)}
.bds-cloud span{
  padding:7px 16px;border-radius:999px;font-size:13.2px;font-weight:700;
  color:var(--ink);background:#fff;border:1px solid var(--border);
}
.bds-cloud span:nth-child(3n){background:rgba(225,6,2,.08);color:#B00500;border-color:rgba(225,6,2,.22)}
.bds-cloud span:nth-child(3n+1){background:rgba(37,99,235,.08);color:#1D4ED8;border-color:rgba(37,99,235,.22)}
.bds-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bds-group{background:#fff;border:1px solid var(--border);border-left:4px solid var(--brand-2);border-radius:16px;padding:22px 24px}
.bds-group h3{font-size:16.5px;margin-bottom:14px}
.bds-group li{position:relative;padding-left:18px;font-size:14.2px;color:var(--muted);margin-bottom:10px}
.bds-group li:last-child{margin-bottom:0}
.bds-group li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;background:var(--brand)}

/* ---------- 适合人群 / 痛点 ---------- */
.bds-fit{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bds-fit-item{padding:24px 22px;border-radius:16px;background:var(--surface-2);border:1px solid var(--border);position:relative}
.bds-fit-item b{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;
  font-size:13px;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));margin-bottom:12px;
}
.bds-fit-item h3{font-size:16.5px;margin-bottom:9px}
.bds-fit-item p{font-size:14px;color:var(--muted);margin:0}

/* ---------- 服务流程（横向圆点轨道） ---------- */
.bds-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:s;position:relative;padding-top:26px}
.bds-flow::before{content:"";position:absolute;left:8%;right:8%;top:24px;height:2px;background:linear-gradient(90deg,var(--brand),var(--brand-2));opacity:.32}
.bds-flow li{
  position:relative;z-index:1;padding:52px 18px 20px;border-radius:16px;background:#fff;
  border:1px solid var(--border);box-shadow:0 8px 22px rgba(31,41,55,.07);
}
.bds-flow li::before{
  counter-increment:s;content:counter(s);position:absolute;top:-24px;left:50%;transform:translateX(-50%);
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:4px solid #fff;
  font-size:17px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 12px 26px rgba(225,6,2,.28);
}
.bds-flow h3{font-size:15.5px;margin-bottom:8px}
.bds-flow p{font-size:13.6px;color:var(--muted);margin:0}

/* ---------- 优势 ---------- */
.bds-adv{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bds-adv-item{padding:24px;border-radius:16px;background:#fff;border:1px solid var(--border);border-bottom:3px solid var(--brand-2)}
.bds-adv-item h3{font-size:16.5px;margin-bottom:9px}
.bds-adv-item p{font-size:14px;color:var(--muted);margin:0}

/* ---------- 数据条 ---------- */
.bds-bars{display:grid;gap:20px;max-width:880px;margin:0 auto}
.bds-bar .t{display:flex;justify-content:space-between;gap:12px;font-size:14.4px;font-weight:700;color:var(--ink);margin-bottom:9px}
.bds-bar .track{height:12px;border-radius:999px;background:#fff;border:1px solid var(--border);overflow:hidden}
.bds-bar .fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand-2))}

/* ---------- 学习方案 ---------- */
.bds-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bds-plan{padding:26px 24px;border-radius:18px;background:#fff;border:1px solid var(--border);box-shadow:0 8px 24px rgba(31,41,55,.06)}
.bds-plan.hot{border-color:var(--brand);box-shadow:0 24px 52px rgba(225,6,2,.16)}
.bds-plan h3{font-size:19px}
.bds-price{margin:8px 0 18px;font-size:13.6px;font-weight:700;color:var(--brand-2)}
.bds-list{display:grid;gap:11px}
.bds-list li{position:relative;padding-left:20px;font-size:14.2px;color:var(--text)}
.bds-list li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;background:var(--brand)}

/* ---------- FAQ 两列 ---------- */
.bds-faq2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.bds-faq2 .faq{max-width:none;margin:0}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .bds-info,.bds-groups,.bds-fit,.bds-adv,.bds-plans{grid-template-columns:1fr 1fr}
  .bds-flow{grid-template-columns:1fr 1fr}
  .bds-flow::before{display:none}
  .bds-row{grid-template-columns:1fr}
  .bds-row.flip .bds-row-media{order:0}
  .bds-faq2{grid-template-columns:1fr}
}
@media (max-width:720px){
  .bds-info,.bds-groups,.bds-fit,.bds-adv,.bds-plans,.bds-flow{grid-template-columns:1fr}
  .bds-hero .hero-cta-box{flex-direction:column;align-items:stretch}
  .bds-hero .hero-cta-box .btn{width:100%}
  .bds-flow{padding-top:0}
  .bds-flow li{padding-top:24px}
  .bds-flow li::before{position:static;transform:none;margin-bottom:12px}
}