@charset "utf-8";
/* ==========================================================================
   新一点网络「网站建设报价方案」落地页  page_baojia.html
   命名前缀统一为 .bj- ，避免与站点 common.css / meun.css / aigaizao.css / waimao.css 冲突
   配色：深宝蓝 #1d4ed8 + 金 #f5a623（报价 / 商务感），底 #081226
   版式：居中 Hero + 价格锚定条（与 aigaizao / waimao 的左文右卡版式区分）
   ========================================================================== */

.bj-page {
	--bj-blue: #1d4ed8;
	--bj-blue-d: #1739a8;
	--bj-navy: #14306b;
	--bj-gold: #f5a623;
	--bj-gold-d: #d98a06;
	--bj-deep: #081226;
	--bj-ink: #1b2740;
	--bj-sub: #5d6b83;
	--bj-line: #e3e9f6;
	--bj-soft: #f4f7fd;
	/* 右侧固定客服条 #hr-menu-right 占视口最右约 160px 的避让量 */
	--bj-avoid: clamp(0px, calc(832px - 50vw), 150px);
	background: #fff;
	color: var(--bj-ink);
	font-family: "Microsoft Yahei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.85;
	-webkit-font-smoothing: antialiased;
}
.bj-page * { box-sizing: border-box; }
.bj-page img { max-width: 100%; border: 0; }
.bj-page a { text-decoration: none; color: inherit; transition: all .3s; }
.bj-page ul, .bj-page li { margin: 0; padding: 0; list-style: none; }
.bj-page p { margin: 0; }
.bj-page h1, .bj-page h2, .bj-page h3, .bj-page h4 { margin: 0; font-weight: 700; line-height: 1.35; }

.bj-wrap { width: 1320px; max-width: 94%; margin: 0 auto; }

/* ---------- 面包屑（位于 hero 内部深色底上） ---------- */
.bj-crumb {
	position: relative;
	z-index: 2;
	font-size: 13px;
	color: rgba(255,255,255,.68);
	line-height: 1.6;
	margin-bottom: 30px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.bj-crumb a { color: rgba(255,255,255,.68); }
.bj-crumb a:hover { color: #fff; }

/* ==================== Hero（居中版式） ==================== */
.bj-hero {
	position: relative;
	overflow: hidden;
	background-color: #081226;              /* 渐变不可用时的兜底纯色 */
	background-image:
		linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 48%),
		linear-gradient(122deg, #05101f 0%, #0d2352 38%, #1b3f8f 72%, #1d4ed8 100%);
	color: #fff;
	padding: 118px 0 60px;
	text-align: center;
}
.bj-hero::before,
.bj-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
/* 右上角金色光斑 */
.bj-hero::before {
	width: 620px; height: 620px;
	right: -180px; top: -320px;
	background: radial-gradient(circle, rgba(245,166,35,.30) 0%, rgba(245,166,35,0) 68%);
}
/* 左下角蓝色光斑 */
.bj-hero::after {
	width: 520px; height: 520px;
	left: -200px; bottom: -300px;
	background: radial-gradient(circle, rgba(93,168,255,.30) 0%, rgba(93,168,255,0) 70%);
}
.bj-hero-in { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }
.bj-badge {
	display: inline-block;
	font-size: 13px;
	letter-spacing: .5px;
	color: #ffe9c2;
	background: rgba(245,166,35,.14);
	border: 1px solid rgba(245,166,35,.46);
	border-radius: 40px;
	padding: 5px 18px;
	margin-bottom: 22px;
}
.bj-hero h1 {
	font-size: 42px;
	line-height: 1.28;
	letter-spacing: .5px;
	color: #fff;
	text-shadow: 0 2px 18px rgba(0,0,0,.2);
	overflow-wrap: break-word;
}
.bj-hero h1 em { font-style: normal; color: var(--bj-gold); }
/* H1 第二行：降一档字号，避免长句在窄容器里溢出断字 */
.bj-hero h1 .bj-h1-sub {
	display: block;
	margin: 14px auto 0;
	max-width: 780px;
	font-size: 20px;
	line-height: 1.6;
	font-weight: 500;
	letter-spacing: .3px;
	color: #c9dcff;
	text-shadow: none;
}
.bj-hero h1 .bj-h1-sub b { font-weight: 700; color: #ffd98a; }
.bj-hero-desc {
	margin: 20px auto 0;
	max-width: 820px;
	font-size: 15px;
	line-height: 1.9;
	color: rgba(255,255,255,.82);
}
.bj-hero-btns { margin-top: 30px; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* ---------- 通用按钮 ---------- */
.bj-btn {
	display: inline-block;
	height: 52px;
	line-height: 52px;
	padding: 0 32px;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .5px;
	cursor: pointer;
	transition: all .3s;
}
.bj-btn-main {
	background: linear-gradient(90deg, #ffb648, #f5a623);
	color: #17223b;
	box-shadow: 0 14px 30px rgba(245,166,35,.34);
}
.bj-btn-main:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(245,166,35,.46); }
.bj-btn-ghost {
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.42);
	color: #fff;
}
.bj-btn-ghost:hover { background: rgba(255,255,255,.18); }
.bj-btn-blue {
	background: var(--bj-blue);
	color: #fff;
	box-shadow: 0 12px 26px rgba(29,78,216,.28);
}
.bj-btn-blue:hover { background: var(--bj-blue-d); transform: translateY(-2px); }

/* ---------- Hero 内价格锚定条 ---------- */
.bj-pricebar {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	margin-top: 44px;
	margin-right: var(--bj-avoid);
}
.bj-pricebar-item {
	flex: 0 0 292px;
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 10px;
	padding: 18px 20px 16px;
	text-align: left;
	backdrop-filter: blur(2px);
}
.bj-pricebar-item.is-hot {
	background: rgba(245,166,35,.13);
	border-color: rgba(245,166,35,.5);
}
.bj-pricebar-item .t { display: block; font-size: 14px; color: rgba(255,255,255,.85); }
.bj-pricebar-item .p {
	display: block;
	margin-top: 6px;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--bj-gold);
	letter-spacing: .5px;
}
.bj-pricebar-item .p i { font-size: 14px; font-style: normal; font-weight: 500; color: rgba(255,255,255,.6); margin-left: 4px; }
.bj-pricebar-item .d { display: block; margin-top: 6px; font-size: 12.5px; color: rgba(255,255,255,.6); line-height: 1.6; }
.bj-pricebar-tip {
	position: relative;
	z-index: 2;
	margin-top: 18px;
	font-size: 13px;
	color: rgba(255,255,255,.62);
}

/* ==================== 区块通用 ==================== */
.bj-sec { padding: 76px 0; }
.bj-sec-soft { background: var(--bj-soft); }
.bj-sec-dark {
	position: relative;
	background-color: #081226;
	background-image: linear-gradient(120deg, #081226 0%, #0e2354 55%, #14336b 100%);
	color: #fff;
}
.bj-head { text-align: center; max-width: 860px; margin: 0 auto 46px; }
.bj-eyebrow {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 3px;
	color: var(--bj-blue);
	text-transform: uppercase;
	margin-bottom: 12px;
}
.bj-sec-dark .bj-eyebrow { color: var(--bj-gold); }
.bj-head h2 { font-size: 32px; line-height: 1.4; color: var(--bj-ink); }
.bj-sec-dark .bj-head h2 { color: #fff; }
.bj-head h2 em { font-style: normal; color: var(--bj-blue); }
.bj-sec-dark .bj-head h2 em { color: var(--bj-gold); }
.bj-h2line { width: 56px; height: 3px; border-radius: 2px; background: var(--bj-gold); margin: 16px auto 18px; }
.bj-head p { font-size: 14.5px; line-height: 1.9; color: var(--bj-sub); }
.bj-sec-dark .bj-head p { color: rgba(255,255,255,.72); }

/* ==================== 三种报价方案（价格卡） ==================== */
.bj-plans {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 22px;
	/* 价格卡是本页核心内容，整体避让右侧客服条 */
	margin-right: var(--bj-avoid);
}
.bj-plan {
	flex: 0 0 388px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--bj-line);
	border-radius: 12px;
	padding: 30px 28px 26px;
	box-shadow: 0 10px 30px rgba(20,48,107,.06);
	transition: all .3s;
}
.bj-plan:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(20,48,107,.14); }
.bj-plan.is-feat {
	border: 2px solid var(--bj-blue);
	box-shadow: 0 22px 50px rgba(29,78,216,.18);
	position: relative;
}
.bj-plan-tag {
	position: absolute;
	top: -14px; left: 50%;
	transform: translateX(-50%);
	background: var(--bj-gold);
	color: #17223b;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 1px;
	border-radius: 30px;
	padding: 4px 18px;
	white-space: nowrap;
}
.bj-plan-name { font-size: 19px; color: var(--bj-ink); }
.bj-plan-name span { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 500; color: #8d99ad; letter-spacing: 1px; }
.bj-plan-price {
	margin-top: 16px;
	padding-bottom: 18px;
	border-bottom: 1px dashed var(--bj-line);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--bj-blue);
	letter-spacing: .5px;
}
.bj-plan-price i { font-size: 14px; font-style: normal; font-weight: 500; color: var(--bj-sub); }
.bj-plan-fit {
	margin-top: 16px;
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--bj-sub);
	background: var(--bj-soft);
	border-radius: 6px;
	padding: 10px 14px;
}
.bj-plan-fit b { color: var(--bj-ink); }
.bj-plan-list { margin-top: 18px; flex: 1 1 auto; }
.bj-plan-list li {
	position: relative;
	padding-left: 24px;
	font-size: 14px;
	line-height: 2;
	color: #3c4a63;
}
.bj-plan-list li::before {
	content: "";
	position: absolute;
	left: 2px; top: 12px;
	width: 12px; height: 7px;
	border-left: 2px solid var(--bj-gold-d);
	border-bottom: 2px solid var(--bj-gold-d);
	transform: rotate(-45deg);
}
.bj-plan-btn {
	display: block;
	margin-top: 22px;
	height: 48px;
	line-height: 48px;
	text-align: center;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 700;
	background: var(--bj-soft);
	color: var(--bj-blue);
	border: 1px solid #cfdcf5;
}
.bj-plan-btn:hover { background: var(--bj-blue); color: #fff; border-color: var(--bj-blue); }
.bj-plan.is-feat .bj-plan-btn {
	background: linear-gradient(90deg, #2563eb, #1d4ed8);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 12px 26px rgba(29,78,216,.3);
}
.bj-plan.is-feat .bj-plan-btn:hover { background: linear-gradient(90deg, #3b74f0, #2154e0); }
/* ---------- 说明条（keynote 式：左色条 + 左标签 + 右正文，与卡片网格左对齐） ---------- */
.bj-note {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin-top: 30px;
	/* 与上方网格同宽对齐，并避让右侧固定客服条 */
	margin-right: var(--bj-avoid);
	background: linear-gradient(90deg, #f5f8ff 0%, #ffffff 62%);
	border: 1px solid #d8e2f8;
	border-left: 5px solid var(--bj-blue);
	border-radius: 10px;
	padding: 20px 26px;
}
.bj-note-t {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.9;
	color: var(--bj-blue);
	white-space: nowrap;
}
.bj-note p {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	line-height: 1.9;
	color: #3d4759;
}
.bj-note b { color: var(--bj-blue); font-weight: 700; white-space: nowrap; }
/* 结论 / 警示变体（金色） */
.bj-note.is-warn {
	background: linear-gradient(90deg, #fffaf0 0%, #ffffff 62%);
	border-color: #f6e3c2;
	border-left-color: var(--bj-gold);
}
.bj-note.is-warn .bj-note-t { color: var(--bj-gold-d); }
.bj-note.is-warn p { color: #4a3a24; }

/* ==================== 便宜的网站省在哪（对照两栏） ==================== */
.bj-save {
	border: 1px solid var(--bj-line);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	margin-right: var(--bj-avoid);
}
.bj-save-head {
	display: flex;
	background: #0f2a5c;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .5px;
}
.bj-save-head > span { padding: 14px 26px; }
.bj-save-head .c1 { flex: 0 0 42%; }
.bj-save-head .c2 { flex: 1 1 auto; }
.bj-save-row { display: flex; border-top: 1px solid var(--bj-line); }
.bj-save-row:nth-child(even) { background: #fafcff; }
.bj-save-row > div { padding: 16px 26px; font-size: 14px; line-height: 1.85; }
.bj-save-cut {
	flex: 0 0 42%;
	color: #7a879c;
	position: relative;
	padding-left: 50px !important;
}
.bj-save-cut::before {
	content: "×";
	position: absolute;
	left: 22px; top: 15px;
	width: 20px; height: 20px;
	line-height: 20px;
	text-align: center;
	border-radius: 50%;
	background: #f0f3f9;
	color: #9aa6ba;
	font-size: 13px;
	font-weight: 700;
}
.bj-save-cost {
	flex: 1 1 auto;
	color: #2c3a52;
}
.bj-save-cost b { color: #c0392b; font-weight: 700; }

/* ==================== 影响报价的 6 个变量 ==================== */
.bj-vars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-right: var(--bj-avoid); }
.bj-var {
	display: flex;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--bj-line);
	border-left: 4px solid var(--bj-blue);
	border-radius: 8px;
	padding: 20px 20px 18px;
	transition: all .3s;
}
.bj-var:hover { box-shadow: 0 12px 30px rgba(20,48,107,.1); transform: translateY(-3px); }
.bj-var-no {
	flex: 0 0 42px;
	height: 42px;
	line-height: 42px;
	text-align: center;
	border-radius: 8px;
	background: var(--bj-soft);
	color: var(--bj-blue);
	font-size: 17px;
	font-weight: 700;
}
.bj-var-body { flex: 1 1 auto; min-width: 0; }
.bj-var-body h3 { font-size: 16px; color: var(--bj-ink); }
.bj-var-body p { margin-top: 6px; font-size: 13.5px; line-height: 1.85; color: var(--bj-sub); }
.bj-var-lv { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 700; border-radius: 30px; padding: 2px 12px; }
.bj-var-lv.lv-h { background: #fff1e6; color: #c2661b; }
.bj-var-lv.lv-m { background: #eef3ff; color: #2b57c9; }
.bj-var-lv.lv-l { background: #eef8f1; color: #1f7a4c; }

/* ==================== 报价清单（两栏） ==================== */
.bj-scope { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-right: var(--bj-avoid); }
.bj-scope-col {
	background: #fff;
	border: 1px solid var(--bj-line);
	border-radius: 12px;
	padding: 26px 26px 22px;
}
.bj-scope-col h3 { font-size: 17px; color: var(--bj-ink); display: flex; align-items: center; gap: 10px; }
.bj-scope-col h3 i {
	font-style: normal;
	width: 26px; height: 26px;
	line-height: 26px;
	text-align: center;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}
.bj-scope-in h3 i { background: #1f7a4c; }
.bj-scope-out h3 i { background: #96a3b8; }
.bj-scope-col > p { margin-top: 8px; font-size: 13px; color: var(--bj-sub); }
.bj-scope-list { margin-top: 16px; }
.bj-scope-list li {
	position: relative;
	padding-left: 26px;
	font-size: 14px;
	line-height: 2.05;
	color: #3c4a63;
}
.bj-scope-list li::before {
	position: absolute;
	left: 0; top: 0;
	font-size: 14px;
	font-weight: 700;
}
.bj-scope-in .bj-scope-list li::before { content: "✓"; color: #1f7a4c; }
.bj-scope-out .bj-scope-list li::before { content: "·"; color: #96a3b8; font-size: 20px; line-height: 1.5; }

/* ==================== 服务流程（4 步） ==================== */
.bj-flow { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-right: var(--bj-avoid); }
.bj-flow-item {
	flex: 0 0 calc(25% - 14px);
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 10px;
	padding: 24px 22px 22px;
}
.bj-flow-no {
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	color: rgba(245,166,35,.9);
	letter-spacing: 1px;
}
.bj-flow-item h3 { margin-top: 14px; font-size: 16.5px; color: #fff; }
.bj-flow-item p { margin-top: 8px; font-size: 13.5px; line-height: 1.85; color: rgba(255,255,255,.72); }

/* ==================== FAQ ==================== */
.bj-faq { max-width: 980px; margin: 0 auto; margin-right: auto; }
.bj-faq details {
	background: #fff;
	border: 1px solid var(--bj-line);
	border-radius: 8px;
	margin-bottom: 12px;
	overflow: hidden;
}
.bj-faq details[open] { border-color: #bdd0f2; box-shadow: 0 10px 26px rgba(20,48,107,.08); }
.bj-faq summary {
	position: relative;
	cursor: pointer;
	list-style: none;
	padding: 16px 52px 16px 22px;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--bj-ink);
	line-height: 1.7;
}
.bj-faq summary::-webkit-details-marker { display: none; }
.bj-faq summary::after {
	content: "+";
	position: absolute;
	right: 20px; top: 50%;
	transform: translateY(-50%);
	width: 24px; height: 24px;
	line-height: 22px;
	text-align: center;
	border-radius: 50%;
	background: var(--bj-soft);
	color: var(--bj-blue);
	font-size: 17px;
	font-weight: 700;
}
.bj-faq details[open] summary::after { content: "−"; background: var(--bj-blue); color: #fff; }
.bj-faq-a { padding: 0 22px 18px; font-size: 14px; line-height: 1.95; color: var(--bj-sub); }

/* ==================== CTA + 表单 ==================== */
.bj-cta {
	position: relative;
	overflow: hidden;
	background-color: #081226;
	background-image: linear-gradient(120deg, #081226 0%, #10265a 52%, #1a3f8c 100%);
	padding: 76px 0;
	color: #fff;
}
.bj-cta::before {
	content: "";
	position: absolute;
	width: 560px; height: 560px;
	right: -180px; top: -260px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245,166,35,.26) 0%, rgba(245,166,35,0) 70%);
	pointer-events: none;
}
.bj-cta-in { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 56px; }
.bj-cta-left { flex: 1 1 auto; min-width: 0; }
.bj-cta-left h2 { font-size: 30px; line-height: 1.45; color: #fff; }
.bj-cta-left h2 em { font-style: normal; color: var(--bj-gold); }
.bj-cta-left > p { margin-top: 16px; font-size: 14.5px; line-height: 1.95; color: rgba(255,255,255,.78); }
.bj-cta-contact { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 28px; }
.bj-cta-contact dl { min-width: 210px; }
.bj-cta-contact dt { font-size: 12.5px; color: rgba(255,255,255,.55); letter-spacing: .5px; }
.bj-cta-contact dd { margin: 4px 0 0; font-size: 19px; font-weight: 700; color: var(--bj-gold); }
.bj-cta-contact dd a { color: var(--bj-gold); }
.bj-cta-contact dd a:hover { color: #ffd98a; }
.bj-cta-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.bj-cta-tags span {
	font-size: 12.5px;
	color: #d5e2ff;
	background: rgba(255,255,255,.09);
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 30px;
	padding: 5px 15px;
}

.bj-form {
	flex: 0 0 400px;
	/* 避让右侧固定客服条（#hr-menu-right） */
	margin-right: var(--bj-avoid);
	background: #fff;
	border-radius: 12px;
	padding: 28px 28px 26px;
	box-shadow: 0 26px 60px rgba(4,12,30,.42);
	color: var(--bj-ink);
}
.bj-form h3 { font-size: 21px; text-align: center; color: var(--bj-ink); }
.bj-form .bj-form-sub { text-align: center; font-size: 13px; color: #8b95a8; margin-top: 7px; margin-bottom: 20px; }
.bj-form .each-input {
	display: flex;
	align-items: center;
	border: 1px solid var(--bj-line);
	border-radius: 6px;
	margin-bottom: 13px;
	background: #fbfcff;
	transition: all .3s;
}
.bj-form .each-input:focus-within { border-color: var(--bj-blue); background: #fff; box-shadow: 0 0 0 3px rgba(29,78,216,.1); }
.bj-form .label-wrap { flex: 0 0 68px; text-align: center; font-size: 14px; color: #7d879b; border-right: 1px solid var(--bj-line); }
.bj-form .input-wrap { flex: 1 1 auto; }
.bj-form .input-text {
	width: 100%;
	height: 50px;
	line-height: 50px;
	border: 0;
	outline: 0;
	background: transparent;
	padding: 0 14px;
	font-size: 14px;
	color: var(--bj-ink);
	font-family: inherit;
}
.bj-form .input-text::placeholder { color: #a9b2c3; }
/* 蜜罐字段：视觉隐藏，真人不可见，仅用于识别自动化脚本 */
.bj-form .bj-hp {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.bj-form .submit-wrap { margin-top: 20px; }
.bj-form .input-submit {
	display: block;
	width: 100%;
	height: 52px;
	line-height: 52px;
	border: 0;
	border-radius: 6px;
	background: linear-gradient(90deg, #ffb648, #f5a623);
	color: #17223b;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 2px;
	cursor: pointer;
	font-family: inherit;
	transition: all .3s;
}
.bj-form .input-submit:hover { background: linear-gradient(90deg, #ffc463, #ffb02e); box-shadow: 0 12px 26px rgba(245,166,35,.42); }
.bj-form .bj-form-safe { text-align: center; font-size: 12px; color: #a9b2c3; margin-top: 14px; }
.bj-form-msg { display: none; font-size: 13.5px; line-height: 1.7; border-radius: 6px; padding: 10px 14px; margin-bottom: 14px; text-align: center; }
.bj-form-msg.is-ok { display: block; background: #eefaf3; border: 1px solid #bfe9d2; color: #1c7a47; }
.bj-form-msg.is-err { display: block; background: #fff4f1; border: 1px solid #ffd6c7; color: #c0392b; }

/* ==================== 响应式 ==================== */
@media (max-width: 1240px) {
	.bj-plan { flex: 0 0 340px; }
	.bj-vars { grid-template-columns: repeat(2, 1fr); }
	.bj-flow-item { flex: 0 0 calc(50% - 9px); }
}
@media (max-width: 1100px) {
	.bj-hero h1 { font-size: 34px; }
	.bj-hero h1 .bj-h1-sub { font-size: 18px; }
	.bj-pricebar-item { flex: 0 0 260px; }
	.bj-cta-in { flex-direction: column; gap: 38px; }
	.bj-form { flex: 1 1 auto; width: 100%; }
}
@media (max-width: 900px) {
	.bj-hero { padding: 100px 0 50px; }
	.bj-hero h1 { font-size: 27px; }
	.bj-hero h1 .bj-h1-sub { font-size: 16px; }
	.bj-hero-desc { font-size: 14.5px; }
	.bj-head h2 { font-size: 25px; }
	.bj-sec, .bj-cta { padding: 54px 0; }
	.bj-note { flex-direction: column; gap: 4px; }
	.bj-note-t { white-space: normal; }
	.bj-plan { flex: 1 1 100%; }
	.bj-scope { grid-template-columns: 1fr; }
	.bj-save-head .c1, .bj-save-cut { flex: 0 0 40%; }
	.bj-save-head > span { padding: 12px 16px; }
	.bj-save-row > div { padding: 13px 16px; font-size: 13.5px; }
	.bj-save-cut { padding-left: 36px !important; }
	.bj-save-cut::before { left: 12px; }
	.bj-cta-left h2 { font-size: 24px; }
}
@media (max-width: 680px) {
	/* 手机端：把避让量归零 —— 原来靠 margin-right 单向缩进会让整块内容左偏、
	   右边空一大截；改由 .bj-wrap 的左右对称内边距提供留白，内容才是真正居中。 */
	.bj-page { --bj-avoid: 0px; }
	.bj-wrap { max-width: 100%; padding-left: 16px; padding-right: 16px; }
	/* 手机端隐藏 PC 版右侧客服竖条：160px 红块已被站点隐藏，剩下的 37px 小图标
	   仍会持续压住内容右边缘（实测盖到卡片文字）。本页 hero 已有电话按钮、
	   页面底部有询盘表单，移动端入口不丢。要恢复就删掉这一行。
	   注：该元素带 visible-lg/visible-md 类，且 kf.css 在本页 CSS 之后加载，
	   所以必须用 ID 选择器 + !important 才能压过它。 */
	#hr-menu-right { display: none !important; }
	.bj-head h2 { font-size: 21px; }
	/* 卡片内边距 ≥ 20px：既保证文字不被右侧 37px 客服条压到，也不显得挤 */
	.bj-plan { padding: 24px 20px 22px; }
	.bj-pricebar-item { flex: 1 1 100%; padding: 16px 20px 14px; }
	.bj-var { padding: 18px 20px 16px; }
	.bj-scope-col { padding: 22px 20px 18px; }
	.bj-flow-item { flex: 1 1 100%; padding: 20px 20px 18px; }
	.bj-note { padding: 16px 20px; }
	.bj-form { padding: 24px 20px 22px; }
	.bj-vars { grid-template-columns: 1fr; }
	.bj-crumb { text-align: left; }
	.bj-save-head { display: none; }
	.bj-save-row { display: block; }
	.bj-save-row > div { padding: 12px 20px; font-size: 13.5px; }
	.bj-save-cut { padding-left: 34px !important; }
	.bj-save-cost { border-top: 1px dashed var(--bj-line); background: #fff; }
	.bj-faq-a { font-size: 13.5px; }
	.bj-hero { padding: 6px 0 46px; }
	.bj-hero h1 { font-size: 23px; }
	.bj-hero h1 .bj-h1-sub { font-size: 15px; }
}