/* ==================================================================
   qiuzhibao · 求职宝产品介绍页
   ------------------------------------------------------------------
   复用站点头部（#header + .column-search-panel，固定 191px）与页脚；
   中间为产品价值模块。品牌色沿用站点 --epjob-red(#d61518)。
   ================================================================== */

/* ---- 页面基底：对齐站点（#f7f7f7 底 + 站点字体栈） ---- */
html{ scroll-behavior:smooth; }
body.qiuzhibao-body{
    background:#f7f7f7; color:#333;
    font-family:arial,verdana,helvetica,"PingFang SC","HanHei SC",STHeitiSC-Light,sans-serif;
}
/* 共用 epjob-chrome.css 的 #wrap 头部占位，不再重复添加 191px。 */
.qb-page{ width:1184px; margin:0 auto; padding:0 0 72px; color:#222; }
/* 锚点定位：避开固定头部（191 + 23 呼吸位） */
.qb-page section, .qb-module{ scroll-margin-top:214px; }
.qb-page *, .qb-page *:before, .qb-page *:after{ box-sizing:border-box; }
.qb-page h1,.qb-page h2,.qb-page h3,.qb-page h4{ margin:0; font-weight:700; color:#1a1a1a; }
.qb-page p{ margin:0; }
.qb-page ul,.qb-page ol{ margin:0; padding:0; list-style:none; }
.qb-page img{ display:block; border:0; }
.qb-page a{ text-decoration:none; }

/* ---- ① HERO ---- */
.qb-hero{
    position:relative; display:flex; align-items:center; justify-content:space-between;
    gap:48px; padding:52px 56px; overflow:hidden;
    background:linear-gradient(120deg,#ffffff 0%,#fff8f7 46%,#fdeeed 100%);
    border:1px solid #f6dedd; border-radius:16px;
    box-shadow:0 10px 30px rgba(214,21,24,.06);
}
.qb-hero:before{
    content:""; position:absolute; right:-110px; top:-150px; width:440px; height:440px;
    background:radial-gradient(circle, rgba(214,21,24,.10) 0, rgba(214,21,24,0) 68%);
}
.qb-hero:after{
    content:""; position:absolute; left:-120px; bottom:-170px; width:380px; height:380px;
    background:radial-gradient(circle, rgba(214,21,24,.055) 0, rgba(214,21,24,0) 70%);
}
.qb-hero-main{ position:relative; z-index:1; flex:1 1 auto; min-width:0; }
/* 标题 + slogan 同一行：slogan 放 H1 右侧，基线对齐 */
.qb-hero-title{ display:flex; align-items:baseline; flex-wrap:wrap; gap:0 18px; }
.qb-h1{ font-size:52px; line-height:1.08; letter-spacing:3px; }
.qb-slogan{ font-size:19px; font-weight:600; color:#c4141a; letter-spacing:.5px; }
.qb-hero-desc{ margin-top:18px; max-width:600px; font-size:15px; line-height:27px; color:#5a5a5a; }
.qb-audience{ margin-top:20px; }
.qb-aud{
    display:inline-block; margin-right:10px; padding:6px 14px;
    border:1px solid #f0cfcd; border-radius:999px; background:#fff;
    font-size:13px; color:#c4141a;
}
.qb-hero-btns{ margin-top:28px; }
.qb-btn{
    display:inline-block; height:46px; line-height:46px; padding:0 30px;
    border-radius:999px; font-size:15px; font-weight:600;
    transition:all .2s linear; vertical-align:middle;
}
.qb-btn-primary{ background:#d61518; color:#fff; box-shadow:0 6px 16px rgba(214,21,24,.28); }
.qb-btn-primary:hover{ background:#bf1215; box-shadow:0 8px 20px rgba(214,21,24,.36); }
.qb-btn-plain{ margin-left:14px; border:1px solid #e4c6c4; color:#c4141a; background:#fff; }
.qb-btn-plain:hover{ border-color:#d61518; color:#d61518; }
.qb-trust{ margin-top:24px; font-size:13px; color:#8b8b8b; }
.qb-trust-item b{ font-size:18px; color:#c4141a; margin-right:4px; font-weight:800; }
.qb-trust-sep{
    display:inline-block; width:1px; height:14px; margin:0 16px;
    background:#e0d0cf; vertical-align:middle;
}
/* HERO 右侧：扫码卡 */
.qb-hero-scan{ position:relative; z-index:1; flex:0 0 auto; text-align:center; }
.qb-scan-card{
    width:302px; padding:24px 22px 20px; background:#fff;
    border:1px solid #f2dedd; border-radius:16px;
    box-shadow:0 14px 34px rgba(214,21,24,.10);
}
.qb-scan-qr{ width:180px; height:180px; margin:0 auto; border-radius:12px; }
.qb-scan-main{ margin-top:14px; font-size:16px; font-weight:700; color:#1a1a1a; }
.qb-scan-sub{ margin-top:6px; font-size:13px; color:#8b8b8b; }

/* ---- ② 痛点 ---- */
.qb-pain{ margin-top:64px; text-align:center; }
.qb-pain-title{ font-size:26px; }
.qb-pain-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:26px; }
.qb-pain-list span{
    position:relative; padding:10px 22px 10px 40px; background:#fff;
    border:1px solid #ececec; border-radius:999px; font-size:14px; color:#555;
}
.qb-pain-list span:before{
    content:"\2715"; position:absolute; left:18px; top:50%; transform:translateY(-50%);
    font-size:11px; color:#d61518; font-weight:700;
}
.qb-pain-foot{ margin-top:24px; font-size:15px; color:#666; }

/* ---- 通用区块标题 ---- */
.qb-sec-head{ text-align:center; margin-bottom:34px; }
.qb-sec-head h2{ font-size:28px; letter-spacing:.5px; }
.qb-sec-head h2:after{
    content:""; display:block; width:44px; height:4px; margin:14px auto 0;
    border-radius:2px; background:#d61518;
}
.qb-sec-head p{ margin-top:14px; font-size:15px; color:#8b8b8b; }

/* ---- ③ 四大 AI 法宝（单列；01/03 左文右图，02/04 左图右文 交替） ---- */
.qb-modules{ margin-top:76px; }
.qb-module-grid{ display:flex; flex-direction:column; gap:22px; }
.qb-module{
    position:relative; display:flex; align-items:center; gap:56px;
    padding:40px 48px; background:#fff; border:1px solid #eeeeee; border-radius:16px;
    transition:all .22s ease; overflow:hidden;
}
.qb-module.qb-mod-alt{ flex-direction:row-reverse; }
.qb-module:hover{
    border-color:#f6d9d8; box-shadow:0 18px 40px rgba(214,21,24,.09); transform:translateY(-3px);
}
/* 序号：背景装饰水印 —— 置于「文字侧」上角，01/03 左上、02/04 右上，随版式左右交替 */
.qb-mod-no{
    position:absolute; top:8px; left:34px; z-index:0;
    font-size:158px; font-weight:800; line-height:1; letter-spacing:2px;
    color:rgba(214,21,24,.11);
    background-image:linear-gradient(180deg,rgba(214,21,24,.21),rgba(214,21,24,.02) 78%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    pointer-events:none; user-select:none;
}
.qb-module.qb-mod-alt .qb-mod-no{ left:auto; right:34px; }
.qb-mod-text{ position:relative; z-index:1; flex:1 1 auto; min-width:0; }
.qb-mod-head{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.qb-mod-icon{
    flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    width:56px; height:56px; border-radius:16px;
    background:linear-gradient(135deg,#fdeceb,#fbe0de); color:#d61518;
}
.qb-mod-icon svg{ width:28px; height:28px; }
.qb-mod-name{ font-size:24px; }
.qb-mod-tag{
    padding:4px 14px; border-radius:999px;
    background:#fdeceb; color:#c4141a; font-size:13px; font-weight:600;
}
.qb-mod-desc{ max-width:560px; font-size:14px; line-height:26px; color:#5f5f5f; }
.qb-mod-list{ margin-top:20px; padding-top:18px; border-top:1px dashed #eee; max-width:560px; }
.qb-mod-list li{ position:relative; padding-left:18px; font-size:13.5px; line-height:24px; color:#4a4a4a; }
.qb-mod-list li + li{ margin-top:10px; }
.qb-mod-list li:before{
    content:""; position:absolute; left:0; top:8px; width:6px; height:6px;
    border-radius:50%; background:#d61518;
}
.qb-mod-figure{
    position:relative; z-index:1; flex:0 0 340px; height:440px;
    display:flex; align-items:center; justify-content:center;
}
.qb-mod-figure img{
    display:block; max-width:100%; max-height:100%; width:auto; height:auto;
    filter:drop-shadow(0 14px 30px rgba(214,21,24,.12));
}

/* ---- ④ 服务流程 ---- */
.qb-flow{ margin-top:76px; }
.qb-flow-list{ display:flex; gap:16px; }
.qb-flow-list li{
    position:relative; flex:1 1 0; padding:24px 18px 22px; background:#fff;
    border:1px solid #eee; border-radius:12px; text-align:center; transition:all .2s ease;
}
.qb-flow-list li:hover{ border-color:#f6d9d8; box-shadow:0 10px 24px rgba(214,21,24,.07); }
.qb-flow-list li b{
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:50%; background:#fdeceb; color:#c4141a;
    font-size:14px; font-weight:800;
}
.qb-flow-list li h4{ margin-top:14px; font-size:15px; }
.qb-flow-list li p{ margin-top:8px; font-size:12.5px; line-height:20px; color:#8b8b8b; }
.qb-flow-list li + li:before{
    content:""; position:absolute; left:-11px; top:50%; margin-top:-5px;
    width:6px; height:6px; border-top:1.6px solid #e2c9c7; border-right:1.6px solid #e2c9c7;
    transform:rotate(45deg);
}

/* ---- ⑤ 数据与口碑 ---- */
.qb-proof{ margin-top:76px; }
.qb-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.qb-stat{
    padding:28px 18px; text-align:center; border-radius:12px;
    background:linear-gradient(180deg,#fff7f6 0%,#ffffff 100%);
    border:1px solid #f6dedd;
}
.qb-stat b{ display:block; font-size:34px; font-weight:800; color:#d61518; letter-spacing:.5px; }
.qb-stat span{ display:block; margin-top:10px; font-size:14px; color:#666; }
.qb-quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px; }
.qb-quote{ position:relative; margin:0; padding:28px 24px 22px; background:#fff; border:1px solid #eee; border-radius:12px; }
.qb-quote:before{
    content:"\201C"; position:absolute; left:20px; top:4px;
    font-family:Georgia,serif; font-size:52px; line-height:1; color:#f6dedd;
}
.qb-quote p{ position:relative; font-size:14px; line-height:25px; color:#4a4a4a; }
.qb-quote cite{ display:block; margin-top:16px; font-style:normal; font-size:13px; color:#9a9a9a; }
.qb-quote cite:before{ content:"— "; }

/* ---- ⑥ 底部 CTA ---- */
.qb-cta{
    position:relative; display:flex; align-items:center; justify-content:space-between;
    gap:40px; margin-top:76px; padding:42px 56px; border-radius:16px; overflow:hidden;
    background:linear-gradient(120deg,#d61518 0%,#e74345 100%);
    box-shadow:0 16px 40px rgba(214,21,24,.22);
}
.qb-cta:before{
    content:""; position:absolute; right:180px; top:-120px; width:340px; height:340px;
    background:radial-gradient(circle, rgba(255,255,255,.16) 0, rgba(255,255,255,0) 70%);
}
.qb-cta-text{ position:relative; z-index:1; }
.qb-cta-text h2{ font-size:26px; color:#fff; }
.qb-cta-text p{ margin-top:14px; max-width:560px; font-size:15px; line-height:26px; color:rgba(255,255,255,.92); }
.qb-cta-qr{
    position:relative; z-index:1; flex:0 0 auto; padding:14px 14px 10px;
    background:#fff; border-radius:14px; text-align:center;
    box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.qb-cta-qr img{ width:132px; height:132px; }
.qb-cta-qr span{ display:block; margin-top:8px; font-size:12px; color:#8b8b8b; }

/* ---- 响应式兜底 ---- */
@media (max-width:1240px){ .qb-page{ width:auto; margin:0 16px; } }
@media (max-width:1000px){
    .qb-hero{ flex-direction:column; align-items:flex-start; padding:40px 32px; }
    .qb-hero-scan{ align-self:center; }
    .qb-stats, .qb-quotes{ grid-template-columns:1fr 1fr; }
    .qb-module, .qb-module.qb-mod-alt{ flex-direction:column; align-items:stretch; gap:30px; padding:34px 30px; }
    /* 折行后文字铺满整行、标题行左侧已占位 → 序号统一移到右上角的空白区，避免压住图标/标题 */
    .qb-mod-no, .qb-module.qb-mod-alt .qb-mod-no{ top:2px; left:auto; right:20px; font-size:96px; letter-spacing:1px; }
    .qb-mod-desc, .qb-mod-list{ max-width:none; }
    .qb-mod-figure{ flex:0 0 auto; height:auto; }
    .qb-mod-figure img{ max-width:300px; max-height:none; }
    .qb-flow-list{ flex-wrap:wrap; }
    .qb-flow-list li{ flex:1 1 30%; }
    .qb-flow-list li + li:before{ content:none; }
    .qb-cta{ flex-direction:column; align-items:flex-start; padding:34px 32px; }
}
@media (max-width:680px){
    .qb-stats, .qb-quotes{ grid-template-columns:1fr; }
    .qb-flow-list li{ flex:1 1 100%; }
    .qb-h1{ font-size:40px; }
    .qb-hero-title{ flex-direction:column; align-items:flex-start; gap:8px 0; }
    .qb-module{ padding:26px 22px; }
    .qb-mod-no, .qb-module.qb-mod-alt .qb-mod-no{ top:0; left:auto; right:14px; font-size:70px; letter-spacing:1px; }
}