/* ════════════════════════════════════════════════════════════
   BACE 页（深海蓝极光）各区块样式；通用组件见 glass.css
   区块顺序同 bace.html：首屏 → 选育用与数字 → 样题 → 题库 → 流程 → 报告 → 青年储备干部 → 场景 → 安全 → 试点邀请
   ════════════════════════════════════════════════════════════ */

/* ── 本页通用：彩色胶囊、蓝标签、演示数据角标、报告页框、序号 ── */
.pill--azure{background:linear-gradient(180deg,rgba(76,141,255,.24),rgba(76,141,255,.06)),rgba(6,12,30,.32);box-shadow:0 14px 34px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(76,141,255,.45)}
.pill--cyan{background:linear-gradient(180deg,rgba(53,214,229,.22),rgba(53,214,229,.05)),rgba(6,12,30,.32);box-shadow:0 14px 34px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(53,214,229,.45)}
.pill--violet{background:linear-gradient(180deg,rgba(140,124,255,.24),rgba(140,124,255,.06)),rgba(6,12,30,.32);box-shadow:0 14px 34px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(140,124,255,.45)}
.tag--azure{color:#BFD6FF;border-color:rgba(76,141,255,.5);background:rgba(76,141,255,.12)}
.demo{position:absolute;top:10px;right:10px;padding:2px 10px;border-radius:999px;font-size:11.5px;letter-spacing:.06em;color:#fff;background:rgba(5,11,28,.72);white-space:nowrap}
@media (max-width:560px){.pages .demo{top:5px;right:5px;padding:1px 6px;font-size:10px;letter-spacing:0}}   /* 手机上报告缩略图很小，角标跟着缩小 */
.page-shot{position:relative;overflow:hidden;border-radius:12px;background:#fff;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.page-shot img{width:100%;height:auto}
.pages .page-shot{aspect-ratio:3/4}.pages .page-shot img{height:100%;object-fit:contain;object-position:top}   /* 横竖不一的样张统一成 3:4 页框，底边对齐 */
.step-no{display:block;margin:10px 0 8px;font-size:30px;line-height:1;color:var(--accent-soft)}

/* ── 首屏（照 BACE 宣传片封面排） ── */
.bhero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:120px 0 80px}
.bhero-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center}
.bhero .kicker{color:var(--accent-soft);letter-spacing:.24em}
.bhero-title{margin-top:18px;font-size:clamp(42px,6.4vw,88px);line-height:1.12;font-weight:700;letter-spacing:.01em}
.bhero-lead{text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 14px rgba(0,0,0,.55);margin-top:26px;font-size:clamp(18px,2vw,24px);color:var(--ink-2)}
.bhero-pills{margin-top:16px}
.bhero-pills .pill{padding:12px 24px;font-size:clamp(17px,1.8vw,22px);font-weight:600}
.bhero .btn-row{margin-top:34px}
.bhero-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:380px}
.bhero-disc{width:clamp(220px,26vw,360px);height:clamp(220px,26vw,360px)}
.bhero-disc img{width:64%}
.halo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(185,196,220,.16);pointer-events:none}
.halo.h1{width:clamp(280px,33vw,460px);height:clamp(280px,33vw,460px)}
.halo.h2{width:clamp(340px,40vw,560px);height:clamp(340px,40vw,560px);border-color:rgba(185,196,220,.09)}
@media (max-width:960px){.bhero-in{grid-template-columns:minmax(0,1fr);text-align:center}.bhero-pills,.bhero .btn-row{justify-content:center}.bhero-art{order:-1;min-height:0}.bhero-disc{width:180px;height:180px}.halo{display:none}}

/* ── 选育用与数字 ── */
.bnum b{display:flex;align-items:baseline;gap:6px;font-size:clamp(46px,5vw,64px);line-height:1.1}
.bnum b i{font-style:normal;font-size:16px;color:var(--accent-soft)}
.bnum p{margin-top:8px;font-size:14px;color:var(--ink-2)}

/* ── 样题 ── */
.qcard{max-width:920px;margin:0 auto;padding:34px 40px}
.qcard-top{display:flex;flex-wrap:wrap;gap:10px}
.qstem{margin:22px 0 18px;font-size:clamp(18px,2vw,22px);line-height:1.6;font-weight:500}
.qopts li{display:flex;align-items:flex-start;gap:14px;padding:12px 16px;border-radius:14px;font-size:15.5px;color:var(--ink-2)}
.qopts li+li{margin-top:8px}
.qopts .k{flex:none;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-size:13px;font-weight:600;color:var(--ink);border:1px solid rgba(255,255,255,.22)}
.qopts .ok{color:var(--ink);background:rgba(47,217,181,.12);box-shadow:inset 0 0 0 1px rgba(47,217,181,.45)}
.qopts .ok .k{color:#04141A;background:var(--teal);border-color:var(--teal)}
.qcard-foot{margin-top:18px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--ink-3)}
.qcard-foot b{font-weight:600;color:var(--teal)}
@media (max-width:560px){.qcard{padding:24px 20px}}

/* ── 题库 ── */
.mx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mx{padding:18px 20px}
.mx h3{font-size:16.5px}
.mx p{margin-top:4px;font-size:13.5px;color:var(--ink-2)}
.mx-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
@media (max-width:960px){.mx-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.mx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mx{padding:16px 14px}.mx h3{font-size:15px}}   /* 八个字的岗位名一行放下 */

/* ── 流程 ── */
.bstep .ico{width:28px;height:28px}
.bstep h3{margin-bottom:12px}
.phones{margin-top:40px;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,3vw,40px)}
.phone{width:clamp(170px,18vw,230px);text-align:center}
.phone-frame{position:relative;padding:8px;border-radius:34px;background:#0B1226;box-shadow:0 30px 60px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.10)}
.phone-frame img{width:100%;height:auto;border-radius:27px}
.phone figcaption{text-shadow:0 1px 2px rgba(0,0,0,.8);margin-top:12px;font-size:14px;color:var(--ink-2)}
.phone .demo{top:-10px;right:50%;transform:translateX(50%);font-size:10.5px;padding:1px 9px}   /* 手机界面的角标挂在机身顶框正中，不盖界面内容 */
@media (max-width:560px){.phone{width:calc(50% - 10px)}}

/* ── 报告 ── */
.rpt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.rpt h3{font-size:21px}
.rpt-meta{margin:6px 0 14px;font-size:13.5px;color:var(--ink-3)}
.rpt .list-dot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px}
.rpt .list-dot li+li{margin-top:0}
.pages{margin-top:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.rpt-note{display:table;margin:18px auto 0;padding:4px 14px;border-radius:999px;background:rgba(var(--veil),.75);color:var(--ink-2)}   /* 小字底注垫深色胶囊 */
@media (max-width:960px){.rpt-grid{grid-template-columns:minmax(0,1fr)}}

/* ── 青年储备干部 ── */
.hipo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.disclaim{text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 14px rgba(0,0,0,.55);margin-top:18px;font-size:13.5px;color:var(--ink-3)}
@media (max-width:960px){.hipo-grid{grid-template-columns:minmax(0,1fr)}}

/* ── 场景与安全 ── */
.scene h3,.sec h3{font-size:17.5px}
.scene p{margin-top:8px;font-size:14px;color:var(--ink-2)}
.sec .ico{width:28px;height:28px;margin-bottom:12px}
.sec .list-dot{margin-top:10px}

/* ── 试点邀请与联系 ── */
.invite{text-align:center}
.invite-disc{width:150px;height:150px;margin:0 auto 26px}
.invite h2{text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 14px rgba(0,0,0,.55);font-size:clamp(30px,4.4vw,54px);line-height:1.25;font-weight:600}
.invite .lede{margin:12px auto 0}
.invite-card{max-width:760px;margin:36px auto 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;padding:26px 30px;text-align:left}
.qr-mini{width:132px;text-align:center}
.qr-mini img{width:100%;height:auto;border-radius:12px;background:#fff;padding:6px}
.qr-mini figcaption{margin-top:8px;font-size:12.5px;color:var(--ink-3)}
.invite .btn-row{justify-content:center;margin-top:30px}
@media (max-width:560px){.invite-card{grid-template-columns:minmax(0,1fr);justify-items:center}}

/* ── 降级：不支持模糊的浏览器里，三枚彩色胶囊改为深色实底（glass.css 的降级块会被上面的彩色胶囊样式盖掉） ── */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .pill--azure,.pill--cyan,.pill--violet{background:rgba(6,12,30,.92)}
}
/* 手机：首屏三枚胶囊收紧，排成一行 */
@media (max-width:420px){.bhero-pills{gap:8px}.bhero-pills .pill{padding:9px 12px;font-size:14px}.bhero-pills .pill .ico{width:18px;height:18px}}