/* ==========================================================================
   申博通独立样式（shenbo-project.html 专用）
   加载顺序：位于 shenbocss/ 目录，在保研喵主 css/ 之后引入，
   本文件优先级最高，可安全覆盖外链模板的样式。
   ========================================================================== */

img { max-width:100%; height:auto; }
.preloader { display:none !important; }

/* ============ 全局 ============ */
body { font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif; }
.sb-navy { color:#0f0e4d; }
.sb-blue { color:#0d6efd; }
.sb-orange { color:#e8622a; }

.sb-sec { padding: 70px 0; }
.sb-sec-gray { background:#f6f8fc; }
.sb-sec-navy { background:#0f0e4d; color:#fff; }

.sb-title { text-align:center; margin-bottom: 14px; }
.sb-title h2 { font-size:30px; font-weight:800; color:#0f0e4d; letter-spacing:.5px; margin-bottom:12px; }
.sb-title .sb-sub { font-size:15px; color:#6a7180; line-height:1.9; max-width:820px; margin:0 auto; }
.sb-title::after { content:''; display:block; width:70px; height:3px; background:#0d6efd; margin:14px auto 0; border-radius:2px; }
.sb-sec-navy .sb-title h2 { color:#fff; }
.sb-sec-navy .sb-title .sb-sub { color:rgba(255,255,255,.72); }
.sb-sec-navy .sb-title::after { background:#ffb020; }

/* ============ 面包屑：兜底背景与白字 ============ */
/* 模板原 .breadcrumb-area 依赖 data-background 图片 + 外链 style.css，
   当 style.css 未加载时面包屑会变成空底、h2 默认黑字。
   下面两条显式兜底，图片/外链加载后仍正常叠加。 */
.breadcrumb-area { background-color:#0f0e4d; }
.breadcrumb-title h2 { color:#fff; font-size:30px; font-weight:700; }

/* ============ Hero ============ */
.sb-hero { background:linear-gradient(135deg,#0f0e4d 0%,#1c2a6b 55%,#233a8f 100%); color:#fff; padding:64px 0 0; position:relative; overflow:hidden; }
.sb-hero::before { content:''; position:absolute; right:-140px; top:-140px; width:420px; height:420px; border-radius:50%; background:rgba(255,176,32,.10); }
.sb-hero::after { content:''; position:absolute; left:-120px; bottom:-180px; width:360px; height:360px; border-radius:50%; background:rgba(13,110,253,.14); }
.sb-hero-inner { position:relative; z-index:2; }
.sb-hero-tag { display:inline-block; background:rgba(255,176,32,.16); color:#ffc65c; border:1px solid rgba(255,176,32,.4); font-size:13px; padding:6px 16px; border-radius:20px; margin-bottom:18px; font-weight:600; }
/* 关键：h1 显式白字，不依赖继承，避免被任何外链 .sb-title h2 / h1 黑色覆盖。 */
.sb-hero h1 { font-size:40px; line-height:1.35; font-weight:800; color:#fff; margin-bottom:18px; }
.sb-hero h1 em { font-style:normal; color:#ffc65c; }
.sb-hero .sb-lead { font-size:16.5px; line-height:2; color:rgba(255,255,255,.82); max-width:760px; margin:0 auto; }
.sb-hero-btns { margin:28px 0 12px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.sb-btn { display:inline-flex; align-items:center; justify-content:center; height:52px; padding:0 34px; border-radius:6px; font-size:16px; font-weight:700; text-decoration:none !important; transition:.25s; }
.sb-btn-primary { background:#ffb020; color:#1b1300; box-shadow:0 8px 22px rgba(255,176,32,.28); }
.sb-btn-primary:hover { background:#ffc03d; color:#1b1300; transform:translateY(-2px); }
.sb-btn-ghost { background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.42); }
.sb-btn-ghost:hover { background:rgba(255,255,255,.18); color:#fff; transform:translateY(-2px); }
.sb-hero-note { font-size:13.5px; color:rgba(255,255,255,.78); margin-top:16px; line-height:1.9; }
.sb-hero-note b { color:#ffc65c; }

/* 痛点卡 */
.sb-pain { background:#fff; border-radius:12px; padding:26px 24px; height:100%; box-shadow:0 6px 20px rgba(15,14,77,.08); border-top:3px solid #e8622a; }
.sb-pain .sb-pain-n { font-size:12px; font-weight:800; color:#e8622a; letter-spacing:1px; margin-bottom:8px; }
.sb-pain h4 { font-size:17px; font-weight:800; color:#0f0e4d; margin-bottom:10px; }
.sb-pain p { font-size:14px; color:#5c6473; line-height:1.85; margin:0; }

/* 数字条 */
.sb-stats { background:#fff; border-radius:12px; box-shadow:0 8px 30px rgba(15,14,77,.10); padding:26px 10px; margin-top:44px; }
.sb-stat { text-align:center; padding:8px 10px; }
.sb-stat b { display:block; font-size:32px; font-weight:800; color:#0f0e4d; line-height:1.2; }
.sb-stat b span { font-size:16px; }
.sb-stat span.sb-stat-t { display:block; font-size:13.5px; color:#6a7180; margin-top:6px; }

/* ============ 服务板块 ============ */
.sb-mod { background:#fff; border-radius:12px; box-shadow:0 4px 16px rgba(15,14,77,.07); padding:30px 28px; height:100%; border:1px solid #eef1f7; transition:.25s; position:relative; }
.sb-mod:hover { transform:translateY(-5px); box-shadow:0 12px 30px rgba(15,14,77,.13); border-color:#d9e3fb; }
.sb-mod-no { position:absolute; right:22px; top:18px; font-size:44px; font-weight:800; color:#f0f3fa; line-height:1; }
.sb-mod-ic { width:52px; height:52px; border-radius:12px; background:#eaf1ff; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.sb-mod-ic svg { width:26px; height:26px; fill:#0d6efd; }
.sb-mod h3 { font-size:20px; font-weight:800; color:#0f0e4d; margin-bottom:8px; }
.sb-mod .sb-mod-val { font-size:13.5px; color:#0d6efd; font-weight:700; background:#eaf1ff; display:inline-block; padding:4px 12px; border-radius:14px; margin-bottom:16px; }
.sb-mod ul { list-style:none; padding:0; margin:0 0 16px; }
.sb-mod ul li { position:relative; padding-left:18px; font-size:14px; color:#525a6a; line-height:1.9; }
.sb-mod ul li::before { content:''; position:absolute; left:0; top:11px; width:6px; height:6px; border-radius:50%; background:#0d6efd; }
.sb-redline { background:#fff7f3; border-left:3px solid #e8622a; border-radius:0 6px 6px 0; padding:10px 14px; font-size:13px; color:#8a4a25; line-height:1.8; }
.sb-redline b { color:#e8622a; }

/* ============ RP 专区 ============ */
.sb-rp-box { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:30px 28px; height:100%; }
.sb-rp-box h4 { font-size:19px; font-weight:800; color:#ffc65c; margin-bottom:16px; }
.sb-rp-box ol { padding-left:20px; margin:0; }
.sb-rp-box ol li { font-size:14.5px; line-height:2; color:rgba(255,255,255,.85); padding-left:4px; }
.sb-rp-box ol li::marker { color:#ffb020; font-weight:800; }
.sb-rp-badge { display:inline-block; background:#ffb020; color:#1b1300; font-size:13px; font-weight:800; padding:5px 14px; border-radius:14px; margin-bottom:14px; }

/* ============ 流程 ============ */
.sb-flow { position:relative; }
.sb-step { text-align:center; position:relative; padding:0 12px; }
.sb-step-dot { width:60px; height:60px; border-radius:50%; background:#0f0e4d; color:#fff; font-size:20px; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; box-shadow:0 6px 18px rgba(15,14,77,.22); }
.sb-step h5 { font-size:16.5px; font-weight:800; color:#0f0e4d; margin-bottom:8px; }
.sb-step p { font-size:13.5px; color:#6a7180; line-height:1.85; margin:0; }
.sb-step::after { content:''; position:absolute; top:30px; left:calc(50% + 42px); width:calc(100% - 84px); height:2px; background:repeating-linear-gradient(90deg,#c9d6f5 0 6px,transparent 6px 12px); }
.sb-step:last-child::after { display:none; }

/* ============ 套餐 ============ */
.sb-plan { background:#fff; border:2px solid #e6ebf5; border-radius:14px; padding:34px 30px; height:100%; position:relative; }
.sb-plan.hot { border-color:#0d6efd; box-shadow:0 10px 32px rgba(13,110,253,.14); }
.sb-plan-tag { position:absolute; top:-14px; left:30px; background:#0d6efd; color:#fff; font-size:12.5px; font-weight:700; padding:5px 14px; border-radius:14px; }
.sb-plan h3 { font-size:22px; font-weight:800; color:#0f0e4d; margin-bottom:6px; }
.sb-plan .sb-plan-for { font-size:14px; color:#0d6efd; font-weight:700; margin-bottom:18px; }
.sb-plan ul { list-style:none; padding:0; margin:0 0 20px; }
.sb-plan ul li { position:relative; padding-left:24px; font-size:14.5px; color:#525a6a; line-height:2; }
.sb-plan ul li::before { content:'✓'; position:absolute; left:0; top:0; color:#0d6efd; font-weight:800; }
.sb-plan .sb-plan-ft { font-size:13.5px; color:#8b93a3; border-top:1px dashed #e3e8f2; padding-top:14px; }

/* ============ 红线 ============ */
.sb-no { background:#fff; border-radius:10px; padding:20px 22px; height:100%; border:1px solid #f0e2da; }
.sb-no h5 { font-size:15.5px; font-weight:800; color:#c0392b; margin-bottom:8px; }
.sb-no p { font-size:13.5px; color:#6a7180; line-height:1.85; margin:0; }

/* ============ FAQ ============ */
.sb-faq { background:#fff; border:1px solid #eef1f7; border-radius:10px; margin-bottom:14px; overflow:hidden; }
.sb-faq-q { padding:18px 24px; font-size:16px; font-weight:700; color:#0f0e4d; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.sb-faq-q i { font-style:normal; color:#0d6efd; font-size:20px; font-weight:400; transition:.2s; }
.sb-faq.open .sb-faq-q i { transform:rotate(45deg); }
.sb-faq-a { padding:0 24px 18px; font-size:14.5px; color:#5c6473; line-height:2; display:none; border-top:1px solid #f2f5fa; padding-top:14px; }

/* ============ 联系 ============ */
.sb-contact-card { background:#fff; border-radius:12px; padding:32px 28px; height:100%; box-shadow:0 6px 22px rgba(15,14,77,.08); text-align:center; }
.sb-contact-ic { width:60px; height:60px; border-radius:50%; background:#0f0e4d; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.sb-contact-ic svg { width:28px; height:28px; fill:#fff; }
.sb-contact-card h4 { font-size:18px; font-weight:800; color:#0f0e4d; margin-bottom:10px; }
.sb-tel { display:block; font-size:28px; font-weight:800; color:#0f0e4d; text-decoration:none !important; margin-bottom:10px; letter-spacing:.5px; }
.sb-tel:hover { color:#0d6efd; }
.sb-contact-card p { font-size:14px; color:#6a7180; line-height:1.9; margin:0; }
.sb-qr { width:158px; height:158px; border:1px solid #eee; padding:5px; background:#fff; margin:12px auto; }
.sb-qr img { width:100%; height:100%; object-fit:cover; }

.sb-promise { background:#f6f8fc; border-radius:12px; padding:32px 30px; height:100%; }
.sb-promise h3 { font-size:21px; font-weight:800; color:#0f0e4d; margin-bottom:22px; }
.sb-p-item { display:flex; align-items:flex-start; margin-bottom:20px; }
.sb-p-ck { flex:0 0 22px; width:22px; height:22px; border-radius:4px; background:#0f0e4d; display:flex; align-items:center; justify-content:center; margin-right:12px; margin-top:2px; }
.sb-p-ck svg { width:14px; height:14px; fill:#fff; }
.sb-p-txt h5 { font-size:15.5px; font-weight:800; color:#0f0e4d; margin-bottom:5px; }
.sb-p-txt p { font-size:14px; color:#6a7180; line-height:1.8; margin:0; }
.sb-promise-ft { font-size:14px; color:#6a7180; line-height:1.9; margin-top:22px; padding-top:18px; border-top:1px solid #e4e9f2; }

/* ============ 移动端悬浮条 ============ */
.sb-bar { position:fixed; left:0; right:0; bottom:0; z-index:999; display:none; background:#fff; box-shadow:0 -4px 18px rgba(0,0,0,.12); padding:10px 12px; }
.sb-bar a { flex:1; height:46px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; text-decoration:none !important; margin:0 5px; }
.sb-bar .sb-bar-tel { background:#0f0e4d; color:#fff; }
.sb-bar .sb-bar-wx { background:#ffb020; color:#1b1300; }

/* ============ 资质/新闻（与 about.html 同名 class 兼容） ============ */
.license-section { padding:40px 0 20px; }
.license-title { text-align:center; font-size:28px; color:#0f0e4d; margin-bottom:40px; font-weight:600; position:relative; }
.license-title::after { content:''; display:block; width:80px; height:3px; background:#0d6efd; margin:10px auto 0; }

/* ============ 响应式 ============ */
@media (max-width:991px){
    .sb-hero h1 { font-size:30px; }
    .sb-title h2 { font-size:25px; }
    .sb-step::after { display:none; }
    .sb-step { margin-bottom:26px; }
    .sb-stat { margin-bottom:16px; }
}
@media (max-width:767px){
    .sb-hero { padding-top:44px; }
    .sb-hero h1 { font-size:25px; }
    .sb-hero .sb-lead { font-size:15px; }
    .sb-btn { width:100%; }
    .sb-sec { padding:48px 0; }
    .sb-mod, .sb-plan, .sb-rp-box, .sb-promise { padding:24px 20px; }
    .sb-bar { display:flex; }
    body { padding-bottom:66px; }
    .sb-tel { font-size:23px; }
}