@charset "utf-8";
/*
 官网模板三（企微主题）公共样式
 覆盖：顶部导航 / 首屏 / 数据条 / 能力网格 / 流程 / 行动区 / 功能展示 / 联系我们 / 帮助中心 / 页脚
*/
:root {
	--wx-blue: #2B6CE6;
	--wx-blue-dark: #1C4FB8;
	--wx-blue-soft: #EAF1FE;
	--wx-green: #07C160;
	--wx-green-soft: #E7F8EE;
	--wx-ink: #1F2329;
	--wx-ink-2: #3D4653;
	--wx-muted: #6B7685;
	--wx-line: #E6EAF1;
	--wx-bg: #F5F7FB;
	--wx-white: #FFFFFF;
	--wx-radius: 14px;
	--wx-shadow: 0 8px 28px rgba(31, 35, 41, .06);
	--wx-shadow-hover: 0 14px 34px rgba(43, 108, 230, .14);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
	font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
	color: var(--wx-ink);
	background: var(--wx-bg);
	font-size: 15px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

img { border: 0; max-width: 100%; vertical-align: middle; }

.wrap { width: 100%; overflow: hidden; }

.flex { display: flex; }
.mid { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ============ 顶部导航 ============ */
.top_wrap {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--wx-line);
}

.top_content .content {
	align-items: center;
	height: 66px;
}

.logo { display: flex; align-items: center; min-width: 0; }

.logo img { width: 34px; height: 34px; border-radius: 8px; object-fit: contain; background: var(--wx-blue-soft); }

.logo .title {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .2px;
	margin-left: 10px;
	color: var(--wx-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 320px;
}

.top_content .item { margin-left: 44px; display: flex; align-items: center; }

.top_content .item a {
	position: relative;
	margin-right: 30px;
	font-size: 15px;
	color: var(--wx-ink-2);
	padding: 4px 0;
	transition: color .18s;
}

.top_content .item a:hover { color: var(--wx-blue); }

.top_content .item a.on { color: var(--wx-blue); font-weight: 600; }

.top_content .item a.on::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 3px;
	border-radius: 2px;
	background: var(--wx-blue);
}

.top_content .zixun,
.top_content .login {
	margin-left: 14px;
	height: 38px;
	line-height: 38px;
	padding: 0 20px;
	border-radius: 20px;
	font-size: 14px;
	cursor: pointer;
	transition: all .18s;
	white-space: nowrap;
}

/* 右侧行动按钮整组靠右：宽屏下导航左对齐、按钮贴右边界（企业微信官网版式），
   窄屏无剩余空间时 auto 自动退化为 0，不会把内容挤出容器 */
.top_content .zixun {
	margin-left: auto;
	background: var(--wx-blue);
	color: #fff;
	box-shadow: 0 6px 16px rgba(43, 108, 230, .28);
}

.top_content .zixun:hover { background: var(--wx-blue-dark); }

.top_content .login {
	border: 1px solid var(--wx-line);
	color: var(--wx-ink-2);
	background: #fff;
}

.top_content .login:hover { border-color: var(--wx-blue); color: var(--wx-blue); }

/* ============ 首屏 ============ */
.hero {
	position: relative;
	padding: 72px 0 56px;
	background:
		radial-gradient(900px 420px at 82% 6%, rgba(43, 108, 230, .14), transparent 62%),
		radial-gradient(680px 380px at 8% 92%, rgba(7, 193, 96, .10), transparent 60%),
		linear-gradient(180deg, #FFFFFF 0%, var(--wx-bg) 100%);
}

.hero .grid { display: flex; align-items: center; gap: 56px; }

.hero .left { flex: 1 1 560px; min-width: 0; }

.hero .badge {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 14px;
	border-radius: 15px;
	background: var(--wx-blue-soft);
	color: var(--wx-blue);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .3px;
}

.hero .badge i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wx-blue);
	margin-right: 8px;
	font-style: normal;
}

.hero h1 {
	margin: 20px 0 0;
	font-size: 40px;
	line-height: 1.32;
	font-weight: 800;
	letter-spacing: -.4px;
	color: var(--wx-ink);
}

.hero h1 em { font-style: normal; color: var(--wx-blue); }

.hero .sub {
	margin: 18px 0 0;
	font-size: 16px;
	color: var(--wx-muted);
	max-width: 560px;
}

.hero .btns { margin-top: 30px; display: flex; align-items: center; gap: 14px; }

.btn_main,
.btn_ghost {
	height: 46px;
	line-height: 46px;
	padding: 0 28px;
	border-radius: 23px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all .18s;
	border: 0;
	font-family: inherit;
}

.btn_main {
	background: linear-gradient(135deg, #3D7BF0, var(--wx-blue));
	color: #fff;
	box-shadow: 0 10px 24px rgba(43, 108, 230, .30);
}

.btn_main:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(43, 108, 230, .36); }

.btn_ghost {
	background: #fff;
	color: var(--wx-ink-2);
	border: 1px solid var(--wx-line);
}

.btn_ghost:hover { border-color: var(--wx-blue); color: var(--wx-blue); }

.hero .trust {
	margin-top: 22px;
	font-size: 13px;
	color: var(--wx-muted);
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.hero .trust span::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wx-green);
	margin-right: 7px;
	vertical-align: 2px;
}

/* 首屏右侧：会话示意（纯 CSS，无外部图片依赖） */
.hero .right { flex: 0 0 420px; }

.chatcard {
	position: relative;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 24px 60px rgba(31, 35, 41, .12);
	padding: 18px 18px 20px;
	border: 1px solid var(--wx-line);
}

.chatcard .head {
	display: flex;
	align-items: center;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--wx-line);
}

.chatcard .head .avatar {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--wx-blue), #6FA0F5);
	margin-right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

.chatcard .head .who { font-size: 14px; font-weight: 700; }

.chatcard .head .who small { display: block; font-weight: 400; color: var(--wx-muted); font-size: 12px; }

.chatcard .head .tag {
	margin-left: auto;
	font-size: 12px;
	color: var(--wx-green);
	background: var(--wx-green-soft);
	border-radius: 10px;
	padding: 2px 10px;
}

.chatcard .row { display: flex; margin-top: 14px; }

.chatcard .row .bubble {
	max-width: 82%;
	padding: 10px 14px;
	border-radius: 12px;
	font-size: 13.5px;
	line-height: 1.6;
	background: #F2F4F8;
	color: var(--wx-ink-2);
}

.chatcard .row.me { justify-content: flex-end; }

.chatcard .row.me .bubble { background: var(--wx-blue); color: #fff; }

.chatcard .panel {
	margin-top: 16px;
	border: 1px dashed var(--wx-line);
	border-radius: 12px;
	padding: 12px 14px;
	background: #FBFCFF;
}

.chatcard .panel .k { font-size: 12px; color: var(--wx-muted); }

.chatcard .panel .v { font-size: 13.5px; font-weight: 600; margin-top: 2px; }

.chatcard .panel .v b { color: var(--wx-blue); }

/* ============ 数据条 ============ */
.stats { background: #fff; border-top: 1px solid var(--wx-line); border-bottom: 1px solid var(--wx-line); }

.stats .mid { display: flex; padding: 30px 24px; }

.stats .item { flex: 1; text-align: center; position: relative; }

.stats .item + .item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12%;
	height: 76%;
	width: 1px;
	background: var(--wx-line);
}

.stats .num { font-size: 30px; font-weight: 800; color: var(--wx-blue); letter-spacing: -.5px; }

.stats .num small { font-size: 16px; font-weight: 700; margin-left: 2px; }

.stats .txt { font-size: 13.5px; color: var(--wx-muted); margin-top: 2px; }

/* ============ 通用区块 ============ */
.section { padding: 68px 0; }

.section.grey { background: var(--wx-bg); }

.section.white { background: #fff; }

.sec_head { text-align: center; max-width: 720px; margin: 0 auto 42px; }

.sec_head .tag {
	display: inline-block;
	font-size: 12.5px;
	color: var(--wx-blue);
	background: var(--wx-blue-soft);
	border-radius: 11px;
	padding: 3px 12px;
	font-weight: 600;
	letter-spacing: .4px;
}

.sec_head h2 {
	margin: 14px 0 0;
	font-size: 28px;
	line-height: 1.4;
	font-weight: 800;
	letter-spacing: -.3px;
}

.sec_head p { margin: 12px 0 0; font-size: 15px; color: var(--wx-muted); }

/* ============ 能力网格 ============ */
.cards { display: flex; flex-wrap: wrap; margin: -10px; }

.cards .card {
	flex: 0 0 calc(33.333% - 20px);
	margin: 10px;
	background: #fff;
	border: 1px solid var(--wx-line);
	border-radius: var(--wx-radius);
	padding: 26px 24px;
	box-shadow: var(--wx-shadow);
	transition: all .2s;
}

.cards .card:hover { transform: translateY(-3px); box-shadow: var(--wx-shadow-hover); border-color: #C9DAFB; }

.cards .card .ico {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--wx-blue-soft);
	color: var(--wx-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 800;
	margin-bottom: 16px;
}

.cards .card.green .ico { background: var(--wx-green-soft); color: var(--wx-green); }

.cards .card h3 { margin: 0; font-size: 17px; font-weight: 700; }

.cards .card p { margin: 8px 0 0; font-size: 14px; color: var(--wx-muted); }

.cards .card .points { margin: 14px 0 0; padding: 0; list-style: none; }

.cards .card .points li {
	position: relative;
	padding-left: 16px;
	font-size: 13.5px;
	color: var(--wx-ink-2);
	line-height: 2;
}

.cards .card .points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #C9DAFB;
}

/* ============ 流程 ============ */
.flow { display: flex; flex-wrap: wrap; margin: -10px; }

.flow .step {
	flex: 0 0 calc(33.333% - 20px);
	margin: 10px;
	background: #fff;
	border: 1px solid var(--wx-line);
	border-radius: var(--wx-radius);
	padding: 26px 24px;
	position: relative;
}

.flow .step .no {
	font-size: 13px;
	font-weight: 800;
	color: var(--wx-blue);
	letter-spacing: 1px;
}

.flow .step h3 { margin: 8px 0 0; font-size: 17px; font-weight: 700; }

.flow .step p { margin: 8px 0 0; font-size: 14px; color: var(--wx-muted); }

.flow .step .bar {
	margin-top: 18px;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--wx-blue), rgba(43, 108, 230, .06));
}

/* ============ 行动区 ============ */
.cta {
	background: linear-gradient(135deg, #2456C8 0%, var(--wx-blue) 52%, #4C86F2 100%);
	border-radius: 18px;
	padding: 46px 48px;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 30px;
	box-shadow: 0 20px 44px rgba(36, 86, 200, .26);
}

.cta .t1 { font-size: 24px; font-weight: 800; letter-spacing: -.2px; }

.cta .t2 { margin-top: 8px; font-size: 14.5px; color: rgba(255, 255, 255, .84); }

.cta .btns { margin-left: auto; display: flex; gap: 12px; flex-shrink: 0; }

.cta .btn_main { background: #fff; color: var(--wx-blue); box-shadow: none; }

.cta .btn_ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }

.cta .btn_ghost:hover { border-color: #fff; color: #fff; }

/* ============ 页面头部（内页） ============ */
.pagehead {
	padding: 46px 0 38px;
	background:
		radial-gradient(700px 320px at 88% 0%, rgba(43, 108, 230, .13), transparent 62%),
		linear-gradient(180deg, #FFFFFF 0%, var(--wx-bg) 100%);
	border-bottom: 1px solid var(--wx-line);
}

.pagehead .t1 { font-size: 30px; font-weight: 800; letter-spacing: -.3px; }

.pagehead .t2 { margin-top: 10px; font-size: 15px; color: var(--wx-muted); }

.crumb { font-size: 13.5px; color: var(--wx-muted); margin-bottom: 10px; }

.crumb a { color: var(--wx-muted); }

.crumb a:hover { color: var(--wx-blue); }

/* ============ 功能展示（分组卡片） ============ */
.groups { display: flex; flex-wrap: wrap; margin: -10px; }

.groups .group {
	flex: 0 0 calc(50% - 20px);
	margin: 10px;
	background: #fff;
	border: 1px solid var(--wx-line);
	border-radius: var(--wx-radius);
	padding: 24px 26px;
	box-shadow: var(--wx-shadow);
}

.groups .group h3 {
	margin: 0 0 4px;
	font-size: 16.5px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 10px;
}

.groups .group h3 .no {
	font-size: 12px;
	font-weight: 800;
	color: var(--wx-blue);
	background: var(--wx-blue-soft);
	border-radius: 8px;
	padding: 2px 8px;
}

.groups .group .desc { font-size: 13.5px; color: var(--wx-muted); }

.groups .group ul { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; }

.groups .group ul li {
	flex: 0 0 50%;
	font-size: 13.5px;
	color: var(--wx-ink-2);
	line-height: 2.1;
	position: relative;
	padding-left: 16px;
}

.groups .group ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wx-green);
	opacity: .55;
}

/* ============ 联系我们 ============ */
.contact { display: flex; flex-wrap: wrap; margin: -12px; align-items: flex-start; }

.contact .info,
.contact .form {
	margin: 12px;
	background: #fff;
	border: 1px solid var(--wx-line);
	border-radius: var(--wx-radius);
	box-shadow: var(--wx-shadow);
	padding: 30px 30px 34px;
}

.contact .info { flex: 0 0 calc(40% - 24px); }

.contact .form { flex: 1 1 480px; min-width: 0; }

.contact .brand { display: flex; align-items: center; margin-bottom: 18px; }

.contact .brand img { width: 46px; height: 46px; border-radius: 12px; object-fit: contain; background: var(--wx-blue-soft); }

.contact .brand .name { margin-left: 12px; font-size: 18px; font-weight: 700; }

.contact .brand .name small { display: block; font-size: 12.5px; color: var(--wx-muted); font-weight: 400; }

.contact .line { display: flex; padding: 12px 0; border-top: 1px dashed var(--wx-line); font-size: 14px; }

.contact .line .k { flex: 0 0 62px; color: var(--wx-muted); }

.contact .line .v { flex: 1; color: var(--wx-ink-2); word-break: break-all; }

.contact .form .title { font-size: 18px; font-weight: 700; }

.contact .form .title small { display: block; font-size: 13px; color: var(--wx-muted); font-weight: 400; margin-top: 4px; }

.contact .field { margin-top: 16px; }

.contact .field input[type=text],
.contact .captcha input[type=text],
.contact textarea {
	width: 100%;
	border: 1px solid var(--wx-line);
	border-radius: 10px;
	padding: 11px 14px;
	font-size: 14px;
	font-family: inherit;
	color: var(--wx-ink);
	background: #FBFCFE;
	outline: none;
	transition: border-color .18s, background .18s;
}

.contact .field input[type=text]:focus,
.contact .captcha input[type=text]:focus,
.contact textarea:focus { border-color: var(--wx-blue); background: #fff; }

.contact textarea { height: 120px; resize: vertical; margin-top: 16px; }

.contact .row2 { display: flex; gap: 12px; }

.contact .row2 > * { flex: 1; min-width: 0; }

.contact .captcha { display: flex; gap: 12px; align-items: center; margin-top: 16px; }

.contact .captcha input { flex: 1; }

.contact .captcha img {
	height: 44px;
	width: 132px;
	border-radius: 8px;
	border: 1px solid var(--wx-line);
	cursor: pointer;
	background: #fff;
}

.contact .submit {
	margin-top: 20px;
	width: 100%;
	height: 46px;
	border: 0;
	border-radius: 10px;
	background: var(--wx-blue);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background .18s;
}

.contact .submit:hover { background: var(--wx-blue-dark); }

/* ============ 帮助中心 ============ */
.helpsearch { display: flex; gap: 12px; max-width: 560px; margin-top: 18px; }

.helpsearch input {
	flex: 1;
	height: 44px;
	border: 1px solid var(--wx-line);
	border-radius: 22px;
	padding: 0 20px;
	font-size: 14px;
	font-family: inherit;
	outline: none;
	background: #fff;
}

.helpsearch input:focus { border-color: var(--wx-blue); }

.helpsearch button {
	height: 44px;
	padding: 0 26px;
	border: 0;
	border-radius: 22px;
	background: var(--wx-blue);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
}

.helplist { display: flex; flex-wrap: wrap; margin: -8px; }

.helplist .row {
	flex: 0 0 calc(50% - 16px);
	margin: 8px;
	background: #fff;
	border: 1px solid var(--wx-line);
	border-radius: 12px;
	padding: 16px 18px;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	transition: all .18s;
}

.helplist .row:hover { border-color: #C9DAFB; box-shadow: var(--wx-shadow); transform: translateY(-2px); }

.helplist .row .name { flex: 1; font-size: 14.5px; color: var(--wx-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.helplist .row .dir { font-size: 12px; color: var(--wx-blue); background: var(--wx-blue-soft); border-radius: 8px; padding: 1px 8px; flex-shrink: 0; }

.helplist .row .arrow { color: #B9C3D2; font-size: 13px; }

.helpwrap { display: flex; flex-wrap: wrap; align-items: flex-start; margin: 0 -12px; }

.helpside {
	flex: 0 0 288px;
	margin: 0 12px;
	background: #fff;
	border: 1px solid var(--wx-line);
	border-radius: var(--wx-radius);
	padding: 18px 12px;
	max-height: 820px;
	overflow: auto;
	box-shadow: var(--wx-shadow);
}

.helpside .hd {
	font-size: 14.5px;
	font-weight: 700;
	padding: 0 10px 12px;
	border-bottom: 1px solid var(--wx-line);
}

.helpside ul { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13.5px; line-height: 2.2; }

.helpside ul li a { color: var(--wx-ink-2); display: block; padding: 1px 10px; border-radius: 8px; }

.helpside ul li a:hover { color: var(--wx-blue); background: #F5F8FF; }

.helpside ul li.on a { color: var(--wx-blue); background: var(--wx-blue-soft); font-weight: 700; }

.helpcon {
	flex: 1 1 520px;
	min-width: 0;
	margin: 0 12px;
	background: #fff;
	border: 1px solid var(--wx-line);
	border-radius: var(--wx-radius);
	padding: 28px 30px 34px;
	box-shadow: var(--wx-shadow);
}

.helpcon .ti { font-size: 21px; font-weight: 800; line-height: 1.5; }

.helpcon .sendtime { font-size: 13px; color: var(--wx-muted); margin: 6px 0 20px; }

.helpcon .detail { font-size: 14.5px; color: var(--wx-ink-2); line-height: 1.9; }

.helpcon .detail img { max-width: 100%; height: auto; }

/* 富文本对齐类：后台编辑器写入 align-* 类，模板侧必须给出对应样式，否则居中/右对齐全部失效 */
.helpcon .detail .align-center { text-align: center; }

.helpcon .detail .align-right { text-align: right; }

.helpcon .detail .align-left { text-align: left; }

.helpcon .detail table { max-width: 100%; border-collapse: collapse; }

.helpcon .detail h1, .helpcon .detail h2, .helpcon .detail h3 { line-height: 1.5; margin: 18px 0 10px; }

.helpcon .detail pre { overflow: auto; background: #F6F8FA; padding: 12px; border-radius: 8px; }

.helpcon .detail blockquote {
	margin: 12px 0;
	padding: 5px 5px 5px 15px;
	background: #fff;
	border-left: 4px solid var(--wx-line);
	color: var(--sem-muted-fg, #6D6D6D);
	font-size: 14px;
}

/* 引用块四色语义（与后台编辑器对齐：danger / warning / info / success） */
.helpcon .detail blockquote.danger { border-left-color: #D9534F; color: var(--sem-danger-text, #BE3A31); background-color: #FDF7F7; }

.helpcon .detail blockquote.warning { border-left-color: #F0AD4E; color: var(--sem-warning-text, #9C5600); background-color: #FCF8F2; }

.helpcon .detail blockquote.info { border-left-color: #5BC0DE; color: var(--sem-info, #2F54EB); background-color: #F4F8FA; }

.helpcon .detail blockquote.success { border-left-color: #50AF51; color: var(--sem-success-text, #007000); background-color: #F3F8F3; }

.helpcon .detail blockquote h1, .helpcon .detail blockquote h2, .helpcon .detail blockquote h3,
.helpcon .detail blockquote h4, .helpcon .detail blockquote h5, .helpcon .detail blockquote h6 {
	margin: 6px 0;
	font-size: 15px;
	color: inherit;
}

.helpcon .detail blockquote p { margin: 6px 0; }

.helpcon .detail blockquote strong { vertical-align: middle; }

/* 分页：分页器由框架 paginate()->render() 直出 <ul class="pagination"><li>…</li></ul>，
   必须显式清掉 ul/li 的默认列表符号与块级堆叠，否则会竖排成带圆点的乱序列表 */
.pagebox { margin-top: 26px; }

.pagebox ul.pagination {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.pagebox ul.pagination li { list-style: none; margin: 0; padding: 0; }

.pagebox a, .pagebox span {
	display: inline-block;
	min-width: 36px;
	height: 36px;
	line-height: 34px;
	margin: 0;
	border: 1px solid var(--wx-line);
	border-radius: 10px;
	background: #fff;
	font-size: 13.5px;
	color: var(--wx-ink-2);
	padding: 0 10px;
	text-align: center;
}

.pagebox ul.pagination li.active span { background: var(--wx-blue); border-color: var(--wx-blue); color: #fff; }

.pagebox ul.pagination li.disabled span { color: #BFC7D4; background: #F7F9FC; }

.pagebox span.current { background: var(--wx-blue); border-color: var(--wx-blue); color: #fff; }

/* ============ 页脚 ============ */
.bottombox {
	background: #1B2330;
	color: #A9B4C4;
	padding: 44px 0 34px;
	margin-top: 0;
}

.bottombox .mid { display: flex; flex-wrap: wrap; gap: 24px; }

.bottombox .col { flex: 1 1 220px; }

.bottombox .col .h { color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 12px; }

.bottombox .col a { display: block; font-size: 13.5px; color: #A9B4C4; line-height: 2.2; }

.bottombox .col a:hover { color: #fff; }

.bottombox .col .txt { font-size: 13.5px; line-height: 2.2; word-break: break-all; }

.bottombox .copy {
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: 13px;
	color: #86929F;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	align-items: center;
}

.bottombox .copy a { color: #86929F; }

.bottombox .copy a:hover { color: #fff; }

/* ============ 响应式 ============ */
@media (max-width: 1080px) {
	.hero .grid { flex-wrap: wrap; gap: 36px; }
	.hero .right { flex: 1 1 100%; }
	.chatcard { max-width: 460px; }
	.cards .card, .flow .step { flex: 0 0 calc(50% - 20px); }
	.groups .group { flex: 0 0 calc(100% - 20px); }
}

@media (max-width: 760px) {
	.mid { padding: 0 16px; }
	.top_content .content { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 8px; row-gap: 4px; }
	/* 窄屏导航不在首行挤占空间：整行下移到第二行并可横向滑动，避免「手机端无导航入口」 */
	.top_content .item { order: 3; width: 100%; margin-left: 0; overflow-x: auto; padding-bottom: 2px; }
	.top_content .item a { margin-right: 20px; font-size: 14px; white-space: nowrap; }
	.logo .title { max-width: 150px; font-size: 15px; }
	.top_content .zixun, .top_content .login { height: 34px; line-height: 34px; padding: 0 14px; font-size: 13px; }
	.hero { padding: 44px 0 36px; }
	.hero h1 { font-size: 27px; }
	.hero .sub { font-size: 14.5px; }
	.stats .mid { flex-wrap: wrap; padding: 20px 16px; }
	.stats .item { flex: 0 0 50%; padding: 12px 0; }
	.stats .item + .item::before { display: none; }
	.section { padding: 44px 0; }
	.sec_head h2 { font-size: 22px; }
	.cards .card, .flow .step, .groups .group { flex: 0 0 calc(100% - 20px); }
	.cta { flex-direction: column; align-items: flex-start; padding: 30px 24px; }
	.cta .btns { margin-left: 0; width: 100%; }
	.cta .btns .btn_main, .cta .btns .btn_ghost { flex: 1; text-align: center; padding: 0 14px; }
	.contact .info, .contact .form { flex: 0 0 calc(100% - 24px); }
	/* 窄屏两列表单字段改单列，避免「称呼 / 联系方式」各挤成半格 */
	.contact .row2 { flex-direction: column; gap: 0; }
	.helplist .row { flex: 0 0 calc(100% - 16px); }
	.helpside { flex: 0 0 calc(100% - 24px); max-height: none; }
	.helpcon { flex: 0 0 calc(100% - 24px); padding: 20px 18px 26px; }
	.pagehead { padding: 32px 0 26px; }
	.pagehead .t1 { font-size: 23px; }
	.bottombox .mid { flex-direction: column; gap: 8px; }
	/* 窄屏断行：标题与三行步骤说明均衡分行，避免「私 / 域」被拆到两行、末行只剩两三个字；
	   卡片与分组描述只有一两行，均衡反而会把「等级」这类词从中间截断，故只用 pretty 留默认断点。
	   旧内核不认识这两个值，按默认规则换行，零副作用。 */
	.hero h1, .sec_head h2, .pagehead .t1, .cta .t1, .flow .step p { text-wrap: balance; }
	.cards .card p, .groups .group .desc, .cta .t2, .helpcon p { text-wrap: pretty; }
}