@charset "utf-8";
/*
 官网模板四（物业主题）公共样式
 覆盖：顶部导航 / 首屏 / 生态圆环 / 数据条 / 能力网格 / 四端 / 流程 / 行动区 / 功能矩阵 / 联系我们 / 帮助中心 / 页脚
 色彩取自物业行业惯用的深藏青 + 蓝，主亮色沿用系统既有 #1E9FFF，与商城后台同源。
*/
:root {
	--pm-navy: #0B2540;
	--pm-navy-2: #10365A;
	--pm-navy-3: #0E4470;
	--pm-blue: #1E9FFF;
	--pm-blue-dark: #0B7BD6;
	--pm-blue-soft: #E8F4FF;
	--pm-cyan: #17B8A6;
	--pm-cyan-soft: #E6F8F5;
	--pm-gold: #F0A93B;
	--pm-ink: #17202B;
	--pm-ink-2: #3D4A5C;
	--pm-muted: #6E7B8C;
	--pm-line: #E3EAF3;
	--pm-bg: #F4F7FB;
	--pm-white: #FFFFFF;
	--pm-radius: 16px;
	--pm-radius-sm: 10px;
	--pm-shadow: 0 8px 28px rgba(23, 32, 43, .06);
	--pm-shadow-md: 0 12px 32px rgba(11, 37, 64, .09);
	--pm-shadow-hover: 0 16px 38px rgba(30, 159, 255, .16);
	--pm-ease: cubic-bezier(.4, .16, .2, 1);
	--pm-mint: #4FE3CE;
}

* { 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(--pm-ink);
	background: var(--pm-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; }

::selection { background: rgba(30, 159, 255, .22); color: var(--pm-navy); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--pm-blue);
	outline-offset: 2px;
	border-radius: var(--pm-radius-sm);
}

/*
  overflow:hidden 会把 .wrap 变成滚动容器，内部 position:sticky 的导航因此吸不住顶。
  用 overflow:clip 替代：同样裁掉横向溢出，但不建立滚动容器，吸顶才能生效。
  老浏览器不认 clip，保留上面一行退化为裁剪。
*/
.wrap { width: 100%; overflow: hidden; overflow: clip; }

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

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

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

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

.logo img { height: 34px; width: auto; margin-right: 10px; }

.logo .title {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .5px;
	color: var(--pm-navy);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

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

.top_content .item a {
	position: relative;
	padding: 0 14px;
	line-height: 66px;
	font-size: 15px;
	color: var(--pm-ink-2);
	transition: color .2s;
}

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

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

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

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

.top_content .zixun {
	background: var(--pm-blue);
	color: #fff;
	box-shadow: 0 6px 16px rgba(30, 159, 255, .28);
}

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

.top_content .login {
	margin-left: 10px;
	border: 1px solid var(--pm-line);
	color: var(--pm-navy);
	background: #fff;
}

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

/* 阅读进度：贴在吸顶导航下沿，2px，随滚动线性推进 */
.top_prog {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	pointer-events: none;
	overflow: hidden;
}

.top_prog i {
	display: block;
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, var(--pm-blue), var(--pm-cyan));
	box-shadow: 0 0 10px rgba(30, 159, 255, .6);
	transition: width .1s linear;
}

/* ============ 首屏 ============ */
.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: calc(100vh - 180px);
	padding: 84px 0 96px;
	background:
		linear-gradient(180deg, rgba(6, 20, 35, 0) 52%, rgba(6, 20, 35, .58) 100%),
		linear-gradient(135deg, var(--pm-navy) 0%, var(--pm-navy-2) 52%, var(--pm-navy-3) 100%);
	color: #fff;
	overflow: hidden;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(120% 90% at 62% 40%, #000 0%, rgba(0, 0, 0, .62) 46%, transparent 82%);
	mask-image: radial-gradient(120% 90% at 62% 40%, #000 0%, rgba(0, 0, 0, .62) 46%, transparent 82%);
	pointer-events: none;
}

.hero::after {
	content: "";
	position: absolute;
	right: -180px;
	top: -220px;
	width: 760px;
	height: 760px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(30, 159, 255, .28) 0%, rgba(30, 159, 255, 0) 62%);
	pointer-events: none;
	animation: pm-halo 9s ease-in-out infinite;
}

/* 首屏扫描光带：一条极淡的横向亮带自上而下缓慢掠过 */
.hero .scan {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(30, 159, 255, 0) 0%, rgba(127, 200, 255, .07) 46%, rgba(127, 200, 255, .13) 50%, rgba(30, 159, 255, 0) 100%);
	background-size: 100% 32%;
	background-repeat: no-repeat;
	background-position: 0 -40%;
	animation: pm-scan 12s linear infinite;
}

.hero .grid {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 40px;
}

.hero .left { flex: 1 1 56%; min-width: 0; }
.hero .right { flex: 0 0 41%; min-width: 0; }

.hero .badge {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 16px 0 12px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .16);
	font-size: 13.5px;
	color: #D6E6F5;
	letter-spacing: .3px;
}

.hero .badge i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pm-cyan);
	margin-right: 8px;
	box-shadow: 0 0 0 4px rgba(23, 184, 166, .18);
}

.hero h1 {
	margin: 26px 0 0;
	font-size: 52px;
	line-height: 1.26;
	font-weight: 700;
	letter-spacing: -1px;
}

.hero h1 em {
	display: block;
	font-style: normal;
	color: #7FC8FF;
	position: relative;
}

/* 支持渐变裁切的浏览器上给主标题第二行加一层金属感渐变，否则回退纯色 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.hero h1 em {
		background: linear-gradient(96deg, #8FD2FF 0%, #CBE9FF 46%, #7FC8FF 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

.hero .sub {
	margin-top: 26px;
	max-width: 660px;
	font-size: 17px;
	line-height: 1.85;
	color: #B7CBDE;
}

.hero .sub span { display: block; }

/* 桌面端标题一行放得下，语义换行只在小屏启用 */
.hero h1 br { display: none; }

.hero .sub br { display: none; }

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

.btn_main,
.btn_ghost {
	height: 52px;
	padding: 0 34px;
	border-radius: 26px;
	border: 0;
	font-size: 16px;
	font-family: inherit;
	cursor: pointer;
	transition: all .2s;
}

.btn_main {
	background: var(--pm-blue);
	color: #fff;
	box-shadow: 0 10px 24px rgba(30, 159, 255, .32);
}

.btn_main:hover { background: var(--pm-blue-dark); }

.btn_ghost {
	background: rgba(255, 255, 255, .06);
	color: #E3EEF8;
	border: 1px solid rgba(255, 255, 255, .22);
}

.btn_ghost:hover { background: rgba(255, 255, 255, .13); }

.hero .trust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 34px;
}

.hero .trust span {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 15px;
	border-radius: 6px;
	background: rgba(255, 255, 255, .07);
	font-size: 13.5px;
	color: #A9C1D6;
}

/* ============ 生态圆环 ============ */
.ring {
	position: relative;
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
}

/* 环外一圈静止刻度，仪表盘的观感 */
.ring::before {
	content: "";
	position: absolute;
	inset: -22px;
	border-radius: 50%;
	background: repeating-conic-gradient(from 0deg, rgba(127, 200, 255, .5) 0deg .35deg, rgba(127, 200, 255, 0) .35deg 6deg);
	-webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 11px), #000 calc(100% - 11px));
	mask: radial-gradient(circle closest-side, transparent calc(100% - 11px), #000 calc(100% - 11px));
	opacity: .72;
	pointer-events: none;
}

.ring .orbit {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(127, 200, 255, .24);
}

.ring .o1 { inset: 0; animation: pm-spin 30s linear infinite; }
.ring .o2 { inset: 13%; border-style: dashed; border-color: rgba(127, 200, 255, .2); animation: pm-spin 90s linear infinite; }
.ring .o3 { inset: 27%; border-color: rgba(23, 184, 166, .3); animation: pm-spin 64s linear infinite reverse; }

/* 外环上的跑光点：让环不再是静止的圆圈 */
.ring .o1::after {
	content: "";
	position: absolute;
	left: 50%;
	top: -3px;
	width: 6px;
	height: 6px;
	margin-left: -3px;
	border-radius: 50%;
	background: #7FC8FF;
	box-shadow: -7px 0 7px rgba(127, 200, 255, .8), -15px 0 11px rgba(127, 200, 255, .35), 0 0 12px 2px rgba(127, 200, 255, .55);
}

/* 扫描弧段：外环上一段发光的弧在走，像仪表在自检 */
.ring .sweep {
	position: absolute;
	inset: 7%;
	border-radius: 50%;
	border: 1.6px solid transparent;
	border-top-color: rgba(160, 226, 255, .82);
	border-left-color: rgba(160, 226, 255, .16);
	filter: drop-shadow(0 0 4px rgba(120, 205, 255, .5));
	animation: pm-spin 7s linear infinite;
}

.ring .sweep::before {
	content: "";
	position: absolute;
	inset: 13%;
	border-radius: 50%;
	border: 1.2px solid transparent;
	border-bottom-color: rgba(23, 184, 166, .5);
	border-right-color: rgba(23, 184, 166, .1);
	animation: pm-spin 11s linear infinite reverse;
}

/* 中心到四端的数据链路 */
.ring .link {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	z-index: 0;
}

.ring .link .w { stroke: rgba(127, 200, 255, .34); stroke-width: .34; }

.ring .link .p {
	stroke: #8FD8FF;
	stroke-width: .72;
	stroke-linecap: round;
	stroke-dasharray: 2.2 5.8;
	filter: drop-shadow(0 0 .5px rgba(92, 190, 255, .9));
	animation: pm-flow 3.6s linear infinite;
}

.ring .link .p2 { animation-delay: -.9s; }
.ring .link .p3 { animation-delay: -1.8s; }
.ring .link .p4 { animation-delay: -2.7s; }

.ring .glow {
	position: absolute;
	inset: 27%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(30, 159, 255, .34) 0%, rgba(30, 159, 255, 0) 70%);
}

.ring .core {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	width: 146px;
	height: 146px;
	border-radius: 50%;
	background: linear-gradient(160deg, #14406B, #0A2038);
	border: 1px solid rgba(127, 200, 255, .34);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .08);
	animation: pm-breathe 5.5s var(--pm-ease) infinite;
}

.ring .core b {
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 3px;
	color: #fff;
	line-height: 1.2;
}

.ring .core small {
	margin-top: 7px;
	font-size: 11.5px;
	letter-spacing: .6px;
	color: #7FA6C4;
}

.ring .node {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	height: 38px;
	padding: 0 16px;
	border-radius: 19px;
	background: rgba(11, 37, 64, .86);
	border: 1px solid rgba(127, 200, 255, .26);
	backdrop-filter: blur(6px);
	font-size: 13.5px;
	color: #DCEAF6;
	white-space: nowrap;
	transform: translate(-50%, -50%);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .26);
}

.ring .node i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	margin-right: 8px;
	background: var(--pm-blue);
	box-shadow: 0 0 0 3px rgba(30, 159, 255, .2);
	animation: pm-pulse 2.8s ease-in-out infinite;
}

.ring .n1 i { animation-delay: 0s; }
.ring .n2 i { animation-delay: .7s; }
.ring .n3 i { animation-delay: 1.4s; }
.ring .n4 i { animation-delay: 2.1s; }

.ring .node.c i { background: var(--pm-cyan); box-shadow: 0 0 0 3px rgba(23, 184, 166, .2); }

.ring .n1 { left: 50%; top: 9%; }
.ring .n2 { left: 87%; top: 50%; }
.ring .n3 { left: 50%; top: 91%; }
.ring .n4 { left: 13%; top: 50%; }

.ring .note {
	position: absolute;
	left: 50%;
	bottom: -6px;
	transform: translateX(-50%);
	font-size: 12px;
	color: #7FA6C4;
	letter-spacing: .6px;
	white-space: nowrap;
}

/* ============ 数据条 ============ */
.stats {
	position: relative;
	z-index: 3;
	margin-top: -52px;
	padding: 0 24px;
}

.stats .mid {
	position: relative;
	display: flex;
	background: #fff;
	border-radius: var(--pm-radius);
	box-shadow: 0 14px 40px rgba(11, 37, 64, .1);
	overflow: hidden;
}

/* 数据条顶沿的一道渐隐亮线，呼应首屏的科技调性 */
.stats .mid::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, rgba(30, 159, 255, .5) 16%, rgba(23, 184, 166, .5) 84%, transparent 100%);
}

.stats .item {
	flex: 1;
	text-align: center;
	padding: 34px 12px 30px;
	position: relative;
	transition: background .2s;
}

.stats .item:hover { background: #FAFCFF; }

.stats .item + .item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 32px;
	bottom: 32px;
	width: 1px;
	background: var(--pm-line);
}

.stats .num {
	font-size: 46px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--pm-navy);
	letter-spacing: -1.4px;
	font-variant-numeric: tabular-nums;
	transition: color .26s;
}

.stats .item:hover .num { color: var(--pm-blue-dark); }

.stats .num small {
	display: inline-block;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	color: var(--pm-blue);
	margin-left: 3px;
	letter-spacing: 0;
	vertical-align: 8px;
}

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

/* ============ 通用区块 ============ */
.section { padding: 104px 0; }
.section.white { background: #fff; }
.section.grey {
	background-color: var(--pm-bg);
	background-image: radial-gradient(rgba(17, 42, 70, .055) 1px, transparent 1px);
	background-size: 22px 22px;
}

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

.sec_head .tag {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 15px;
	border-radius: 15px;
	background: var(--pm-blue-soft);
	color: var(--pm-blue-dark);
	font-size: 13px;
	letter-spacing: .6px;
}

.sec_head .tag::before {
	content: "";
	width: 5px;
	height: 5px;
	margin-right: 7px;
	border-radius: 50%;
	background: var(--pm-blue);
}

.sec_head h2 {
	margin: 18px 0 0;
	font-size: 34px;
	line-height: 1.34;
	font-weight: 600;
	color: var(--pm-navy);
	letter-spacing: -.6px;
	text-wrap: balance;
}

.sec_head p {
	margin: 16px 0 0;
	font-size: 15px;
	line-height: 1.85;
	color: var(--pm-muted);
	text-wrap: pretty;
}

/* 左标题 + 右导语：用于打破全篇居中标题的节奏 */
.sec_head.split {
	display: grid;
	grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
	gap: 0 56px;
	align-items: end;
	max-width: none;
	text-align: left;
	margin: 0 0 56px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--pm-line);
}

.sec_head.split .sh_l { min-width: 0; }

.sec_head.split h2 { margin-top: 16px; }

.sec_head.split p {
	margin: 0 0 4px;
	max-width: 480px;
}

/* ============ 二级锚点栏（首页专用） ============ */
/*
 长页面的章节导航：滚过数据条后贴在吸顶导航下沿，点击直接跳到对应区块。
 吸顶偏移取导航实际高度 67px（66 + 1px 下边框），两条都吸住时不会互相遮挡。
*/
.subnav {
	position: sticky;
	top: 67px;
	z-index: 80;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--pm-line);
	box-shadow: 0 6px 18px rgba(11, 37, 64, .05);
}

.subnav .mid { display: flex; }

.sn {
	display: flex;
	align-items: center;
	gap: 2px;
	overflow-x: auto;
	scrollbar-width: none;
}

.sn::-webkit-scrollbar { display: none; }

.sn a {
	position: relative;
	flex: none;
	height: 52px;
	line-height: 52px;
	padding: 0 16px;
	font-size: 14px;
	color: var(--pm-ink-2);
	white-space: nowrap;
	transition: color .18s;
}

.sn a:hover { color: var(--pm-blue); }

.sn a.on { color: var(--pm-navy); font-weight: 600; }

.sn a.on::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 0;
	height: 2px;
	border-radius: 2px 2px 0 0;
	background: linear-gradient(90deg, var(--pm-blue), var(--pm-cyan));
}

/* 锚点跳转时给吸顶头让位（导航 67 + 锚点栏 52 + 9 间距） */
.section[id] { scroll-margin-top: 128px; }

/* ============ 能力网格 ============ */
.cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--pm-line);
	border-radius: var(--pm-radius);
	padding: 28px 24px 26px;
	overflow: hidden;
	transition: transform .24s, box-shadow .24s, border-color .24s;
}

.card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 16px;
	height: 16px;
	border-top: 2px solid rgba(30, 159, 255, .45);
	border-left: 2px solid rgba(30, 159, 255, .45);
	border-top-left-radius: 5px;
	opacity: .55;
	transition: opacity .24s, width .3s var(--pm-ease), height .3s var(--pm-ease);
}

.card:hover::before { opacity: 1; width: 22px; height: 22px; }

.card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--pm-blue), var(--pm-cyan));
	opacity: 0;
	transition: opacity .24s;
}

.section.grey .card { background: #fff; }

.card:hover {
	border-color: rgba(30, 159, 255, .38);
	box-shadow: var(--pm-shadow-hover);
	transform: translateY(-4px);
}

.card:hover::after { opacity: 1; }

.card .ico {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: linear-gradient(150deg, #EDF6FF, #D9EBFF);
	color: var(--pm-blue-dark);
	font-size: 18px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 0 0 1px rgba(30, 159, 255, .1);
}

.card.cyan .ico {
	background: linear-gradient(150deg, #EAFBF8, #D3F3EE);
	color: #0E8C7E;
	box-shadow: inset 0 0 0 1px rgba(23, 184, 166, .12);
}

/*
 图标统一走内联 SVG：24 视框、1.7 描边、颜色继承 currentColor。
 与字符图标相比，描边粗细与重心在任何字号、任何缩放下都一致，不会随字体回退变形。
*/
.card .ico svg,
.gi svg,
.mi svg {
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.card .ico svg { width: 21px; height: 21px; }

.card:hover .ico { transform: translateY(-1px); transition: transform .24s var(--pm-ease); }

.card h3 {
	margin: 16px 0 0;
	font-size: 17.5px;
	font-weight: 600;
	letter-spacing: -.2px;
	color: var(--pm-navy);
}

.card p {
	margin: 8px 0 16px;
	font-size: 13px;
	line-height: 1.75;
	color: var(--pm-muted);
}

.card .points {
	margin: auto 0 0;
	padding: 14px 0 0;
	border-top: 1px dashed var(--pm-line);
	list-style: none;
}

.card .points li {
	position: relative;
	padding-left: 14px;
	font-size: 13px;
	line-height: 1.85;
	color: var(--pm-ink-2);
}

.card .points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--pm-blue);
	opacity: .55;
}

/* ============ 业务全景 ============ */
.domains {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.domain {
	position: relative;
	background: #fff;
	border: 1px solid var(--pm-line);
	border-radius: var(--pm-radius);
	padding: 20px 20px 18px;
	overflow: hidden;
	transition: transform .24s, box-shadow .24s, border-color .24s;
}

.domain:hover {
	border-color: rgba(30, 159, 255, .38);
	box-shadow: var(--pm-shadow-md);
	transform: translateY(-3px);
}

/* 卡片顶沿亮条 + 右上角刻度，做成仪表盘的观感 */
.domain::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--pm-blue), var(--pm-cyan));
	opacity: 0;
	transition: opacity .24s;
}

.domain:hover::before { opacity: 1; }

.domain:not(.total)::after {
	content: "";
	position: absolute;
	right: 12px;
	top: 12px;
	width: 14px;
	height: 14px;
	border-top: 1px solid rgba(30, 159, 255, .3);
	border-right: 1px solid rgba(30, 159, 255, .3);
	border-top-right-radius: 4px;
	transition: border-color .24s;
}

.domain:hover:not(.total)::after { border-color: rgba(30, 159, 255, .72); }

.domain .n {
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.8px;
	color: var(--pm-navy);
	font-variant-numeric: tabular-nums;
}

.domain:not(.total) .n {
	background: linear-gradient(158deg, #123A61 0%, #1B6AAE 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.domain .n small {
	display: inline-block;
	margin-left: 4px;
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	color: var(--pm-muted);
	vertical-align: 4px;
}

.domain:not(.total) .n small { -webkit-text-fill-color: var(--pm-blue-dark); }

.domain h3 {
	margin: 15px 0 0;
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: -.1px;
	color: var(--pm-navy);
}

.domain p {
	margin: 7px 0 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--pm-muted);
}

.domain.total {
	background: linear-gradient(150deg, var(--pm-navy-2), var(--pm-navy));
	border-color: transparent;
}

.domain.total::after {
	content: "";
	position: absolute;
	right: -34px;
	top: -44px;
	width: 130px;
	height: 130px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(30, 159, 255, .38) 0%, rgba(30, 159, 255, 0) 70%);
}

.domain.total .n { color: #fff; }
.domain.total .n small { color: #9FBBD4; }
.domain.total h3 { color: #fff; }
.domain.total p { color: #A9C1D6; }

/* ============ 四端 ============ */
.terminals {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.terminal {
	position: relative;
	background: linear-gradient(168deg, #123A61 0%, #0A2038 100%);
	border: 1px solid rgba(127, 200, 255, .16);
	border-radius: var(--pm-radius);
	padding: 24px;
	text-align: left;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(11, 37, 64, .18);
	transition: transform .28s var(--pm-ease), box-shadow .28s, border-color .28s;
}

/* 右上角柔光与 hover 顶沿流光 */
.terminal::after {
	content: "";
	position: absolute;
	right: -30px;
	top: -40px;
	width: 130px;
	height: 130px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(30, 159, 255, .24) 0%, rgba(30, 159, 255, 0) 70%);
	pointer-events: none;
}

.terminal::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(79, 180, 255, .85), transparent);
	opacity: 0;
	transition: opacity .3s;
}

.terminal:hover {
	border-color: rgba(79, 180, 255, .42);
	box-shadow: 0 18px 40px rgba(11, 37, 64, .28);
	transform: translateY(-4px);
}

.terminal:hover::before { opacity: 1; }

/* 端类型标识行：小圆点带呼吸，标出这是哪一类端 */
.terminal .th {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 1.6px;
	color: #6FA8CE;
}

.terminal .th i {
	width: 6px;
	height: 6px;
	margin-right: 7px;
	border-radius: 50%;
	background: var(--pm-mint);
	box-shadow: 0 0 0 3px rgba(79, 227, 206, .16);
	animation: pm-pulse 2.6s ease-in-out infinite;
}

.terminal:nth-child(2) .th i { animation-delay: .6s; }
.terminal:nth-child(3) .th i { animation-delay: 1.2s; }
.terminal:nth-child(4) .th i { animation-delay: 1.8s; }

.terminal h3 {
	position: relative;
	z-index: 1;
	margin: 14px 0 0;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
}

.terminal .who {
	position: relative;
	z-index: 1;
	margin-top: 5px;
	font-size: 12px;
	color: #5CBEFF;
}

.terminal p {
	position: relative;
	z-index: 1;
	margin: 11px 0 0;
	font-size: 13px;
	line-height: 1.8;
	color: #9FB6CB;
}

/* ============ 三步流程 ============ */
.flow {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.step {
	position: relative;
	background: #fff;
	border: 1px solid var(--pm-line);
	border-radius: var(--pm-radius);
	padding: 32px 30px 34px;
	overflow: hidden;
	transition: border-color .24s, box-shadow .24s;
}

.step:hover {
	border-color: rgba(30, 159, 255, .32);
	box-shadow: var(--pm-shadow);
}

.step .no {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 1.8px;
	color: var(--pm-blue);
}

.step h3 {
	margin: 12px 0 0;
	font-size: 19px;
	font-weight: 600;
	color: var(--pm-navy);
}

.step p {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.85;
	color: var(--pm-muted);
}

.step .bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, rgba(30, 159, 255, .62) 0%, rgba(23, 184, 166, .26) 40%, rgba(30, 159, 255, 0) 82%);
}

/* ============ 收费主线 ============ */
.payline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}

.payline::before {
	content: "";
	position: absolute;
	left: 7.14%;
	right: 7.14%;
	top: 19px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, rgba(30, 159, 255, .06), rgba(30, 159, 255, .34) 14%, rgba(30, 159, 255, .34) 86%, rgba(30, 159, 255, .06));
}

/* 沿收费线走的一颗光点，从计费规则一路走到票据开出 */
.payline::after {
	content: "";
	position: absolute;
	top: 16px;
	left: 7.14%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #BFE4FF;
	box-shadow: 0 0 7px 1px rgba(92, 190, 255, .55);
	will-change: left;
	z-index: 0;
	animation: pm-travel 7.5s linear infinite;
}

.pl {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 9px;
	text-align: center;
}

.pl_dot {
	position: relative;
	z-index: 1;
	width: 40px;
	height: 40px;
	border: 2px solid rgba(30, 159, 255, .30);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 5px rgba(245, 247, 250, .96);
	color: var(--pm-blue-dark);
	font-size: 12px;
	font-weight: 700;
	line-height: 36px;
	letter-spacing: .3px;
	font-variant-numeric: tabular-nums;
	transition: background .26s, border-color .26s, color .26s, box-shadow .26s, transform .26s;
}

.pl:hover .pl_dot {
	background: var(--pm-blue);
	border-color: var(--pm-blue);
	color: #fff;
	box-shadow: 0 0 0 6px rgba(30, 159, 255, .12);
	transform: translateY(-2px);
}

.pl h3 {
	margin: 16px 0 0;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--pm-navy);
}

.pl p {
	margin: 9px 0 0;
	min-height: 3.5em;
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--pm-muted);
	text-wrap: pretty;
}

/* ============ 深色区块（合规与留痕） ============ */
.section.dark {
	position: relative;
	overflow: hidden;
	border-top: 1px solid rgba(127, 200, 255, .14);
	background:
		radial-gradient(900px 420px at 78% -12%, rgba(30, 159, 255, .16), transparent 62%),
		radial-gradient(680px 360px at 10% 108%, rgba(23, 184, 166, .12), transparent 66%),
		linear-gradient(160deg, #0A2038 0%, #0B2540 52%, #0C2C4C 100%);
}

.section.dark::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
	background-size: 56px 56px;
}

.section.dark .mid { position: relative; z-index: 1; }

.section.dark .sec_head .tag {
	background: rgba(30, 159, 255, .16);
	color: #9AD0FF;
}

.section.dark .sec_head .tag::before { background: #4FB4FF; }

.section.dark .sec_head h2 { color: #fff; }

.section.dark .sec_head p { color: #A6BCD2; }

.section.dark .sec_head.split { border-bottom-color: rgba(255, 255, 255, .12); }

/* ============ 经营看板（后台界面示意） ============ */
.board {
	background:
		radial-gradient(780px 340px at 50% -4%, rgba(30, 159, 255, .24), transparent 68%),
		radial-gradient(620px 320px at 92% 108%, rgba(23, 184, 166, .12), transparent 66%),
		linear-gradient(160deg, #0A2038 0%, #0B2540 52%, #0C2C4C 100%);
}

.ui {
	position: relative;
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	box-shadow:
		0 34px 70px -26px rgba(0, 0, 0, .78),
		0 0 0 1px rgba(127, 200, 255, .22);
}

.ui_bar {
	display: flex;
	align-items: center;
	height: 42px;
	padding: 0 16px;
	background: #EFF4FA;
	border-bottom: 1px solid #DDE6F1;
}

.ui_bar .ud {
	width: 10px;
	height: 10px;
	margin-right: 7px;
	border-radius: 50%;
	background: #D3DDE9;
}

.ui_bar .ud:nth-child(1) { background: #E9A29B; }
.ui_bar .ud:nth-child(2) { background: #EDCB8B; }
.ui_bar .ud:nth-child(3) { background: #A8CE9C; }

.ui_url {
	flex: 1;
	min-width: 0;
	margin-left: 12px;
	height: 24px;
	line-height: 22px;
	padding: 0 12px;
	border: 1px solid #E2EAF4;
	border-radius: 12px;
	background: #fff;
	font-size: 12px;
	color: #8795A8;
	letter-spacing: .2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ui_flag {
	margin-left: 10px;
	padding: 1px 7px;
	border: 1px solid #DCE6F2;
	border-radius: 4px;
	font-size: 11.5px;
	color: #7086A0;
	white-space: nowrap;
}

.ui_body {
	display: grid;
	grid-template-columns: 196px minmax(0, 1fr);
}

.ui_side {
	padding: 16px 12px 20px;
	background: #F7FAFE;
	border-right: 1px solid #E7EEF7;
}

.ui_brand {
	display: flex;
	align-items: center;
	height: 30px;
	margin-bottom: 10px;
	padding: 0 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--pm-navy);
	white-space: nowrap;
}

.ui_brand i {
	width: 16px;
	height: 16px;
	margin-right: 8px;
	border-radius: 5px;
	background: linear-gradient(140deg, #1E9FFF, #17B8A6);
}

.ui_grp {
	margin: 14px 0 5px;
	padding: 0 8px;
	font-size: 11px;
	letter-spacing: 1px;
	color: #9AA9BC;
}

.ui_li {
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	border-radius: 6px;
	font-size: 12.5px;
	color: #5A6B80;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ui_li.on {
	background: #E8F3FF;
	color: var(--pm-blue-dark);
	font-weight: 600;
	box-shadow: inset 2px 0 0 var(--pm-blue);
}

.ui_main {
	min-width: 0;
	padding: 18px 22px 20px;
	background: #fff;
}

.ui_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.ui_t {
	font-size: 16px;
	font-weight: 600;
	color: var(--pm-navy);
	letter-spacing: -.2px;
}

.ui_tools { display: flex; }

.ui_tools span {
	height: 26px;
	line-height: 24px;
	padding: 0 10px;
	border: 1px solid #E3EAF3;
	border-radius: 6px;
	font-size: 12px;
	color: var(--pm-muted);
}

.ui_tools span + span { margin-left: 8px; }

.ui_kpi {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 12px;
}

.ui_kpi .k {
	padding: 11px 14px 12px;
	border: 1px solid #E9F0F8;
	border-radius: 10px;
	background: linear-gradient(180deg, #FBFDFF, #F5F9FF);
	min-width: 0;
}

.ui_kpi .k > span {
	display: block;
	font-size: 11.5px;
	color: #8795A8;
}

.ui_kpi .k b {
	display: block;
	margin-top: 3px;
	font-size: 21px;
	line-height: 1.15;
	font-weight: 600;
	letter-spacing: -.6px;
	color: var(--pm-navy);
	font-variant-numeric: tabular-nums;
}

.ui_kpi .k b s {
	margin-left: 3px;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0;
	text-decoration: none;
	color: #9AA9BC;
}

.ui_kpi .k em {
	display: block;
	margin-top: 4px;
	font-style: normal;
	font-size: 11px;
	color: #9DAAB9;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ui_kpi .k.up b,
.ui_kpi .k.up em { color: #0E8F84; }

.ui_row {
	display: grid;
	grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
	gap: 12px;
}

.ui_row.two {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	margin-top: 12px;
}

.ui_panel {
	padding: 12px 14px 12px;
	border: 1px solid #E9F0F8;
	border-radius: 10px;
	background: #fff;
	min-width: 0;
}

.p_h {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 6px;
}

.p_h b {
	font-size: 13px;
	font-weight: 600;
	color: #2B3A4C;
}

.p_h span { font-size: 11px; color: #A3B0C0; }

.p_plot { position: relative; }

.p_chart {
	display: block;
	width: 100%;
	height: 112px;
}

.p_chart .gl { stroke: #EDF3FA; stroke-width: 1; }

.p_chart .ar { fill: url(#pmArea); }

.p_chart .ln {
	fill: none;
	stroke: url(#pmLine);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.p_pt {
	position: absolute;
	top: 25.8%;
	right: 2.4%;
	width: 8px;
	height: 8px;
	margin: -4px -4px 0 0;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #17B8A6;
	box-shadow: 0 0 0 4px rgba(23, 184, 166, .16);
}

.p_foot {
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
	font-size: 11px;
	color: #A3B0C0;
}

.age {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.age li {
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr) 32px;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: #6E7B8C;
}

.age i {
	position: relative;
	display: block;
	height: 7px;
	border-radius: 4px;
	background: #EDF3FA;
	overflow: hidden;
}

.age i::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--w, 50%);
	border-radius: 4px;
	background: linear-gradient(90deg, #4FB4FF, #1E9FFF);
}

.age .b2::after { background: linear-gradient(90deg, #34C8D8, #17B8A6); }
.age .b3::after { background: linear-gradient(90deg, #F5C06A, #E9A13A); }
.age .b4::after { background: linear-gradient(90deg, #EF9A9A, #DE6E6E); }

.age .b1 { --w: 42%; }
.age .b2 { --w: 27%; }
.age .b3 { --w: 18%; }
.age .b4 { --w: 13%; }

.age em {
	font-style: normal;
	text-align: right;
	color: #3D4A5C;
	font-variant-numeric: tabular-nums;
}

.wk {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-top: 4px;
}

.wk .w {
	padding: 7px 4px 8px;
	border-radius: 8px;
	background: #F7FAFE;
	text-align: center;
}

.wk .w b {
	display: block;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--pm-navy);
	font-variant-numeric: tabular-nums;
}

.wk .w span { font-size: 11px; color: #8795A8; }

.wk .w.ok b { color: #0E8F84; }

.dev {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px 18px;
	margin-top: 6px;
}

.dev .d {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	color: #6E7B8C;
}

.dev .d b {
	font-weight: 600;
	color: #2B3A4C;
	font-variant-numeric: tabular-nums;
}

.dev .d b::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 6px;
	border-radius: 50%;
	background: #17B8A6;
	vertical-align: 1px;
}

.ui_cap {
	margin: 18px 0 0;
	font-size: 12.5px;
	line-height: 1.8;
	color: #7F94AB;
	text-align: center;
}

.guar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.g {
	padding: 26px 24px 26px;
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: var(--pm-radius);
	background: linear-gradient(170deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
	transition: background .26s, border-color .26s, transform .26s;
}

.g:hover {
	background: linear-gradient(170deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .045));
	border-color: rgba(79, 180, 255, .42);
	transform: translateY(-3px);
}

.gi {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(30, 159, 255, .30);
	border-radius: 11px;
	background: linear-gradient(150deg, rgba(30, 159, 255, .26), rgba(30, 159, 255, .08));
	color: #8FCBFF;
	font-size: 16px;
	font-weight: 600;
}

.gi svg { width: 20px; height: 20px; }

.g h3 {
	margin: 15px 0 0;
	font-size: 17px;
	font-weight: 600;
	color: #fff;
}

.g p {
	margin: 10px 0 0;
	font-size: 13.5px;
	line-height: 1.8;
	color: #A6BCD2;
	text-wrap: pretty;
}

/* ============ 现场作业（移动端界面示意） ============ */
.mob {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 64px;
	align-items: center;
}

.mob_l {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.phone {
	position: relative;
	width: 320px;
	padding: 9px;
	border-radius: 40px;
	background: linear-gradient(165deg, #1A3A5C 0%, #0B2540 58%, #08192C 100%);
	box-shadow: 0 30px 64px rgba(11, 37, 64, .30), inset 0 0 0 1px rgba(127, 200, 255, .16);
}

/* 右侧的音量键，一枚就够，多了像模型图 */
.phone::after {
	content: "";
	position: absolute;
	right: -2px;
	top: 140px;
	width: 2px;
	height: 52px;
	border-radius: 0 2px 2px 0;
	background: rgba(127, 200, 255, .28);
}

.ph_scr {
	position: relative;
	height: 620px;
	border-radius: 32px;
	overflow: hidden;
	background: var(--pm-bg);
}

.ph_top {
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 3;
	transform: translateX(-50%);
	width: 78px;
	height: 11px;
	border-radius: 0 0 9px 9px;
	background: #08192C;
}

.ph_st {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 26px;
	padding: 0 16px;
	background: #fff;
	font-size: 10.5px;
	font-weight: 600;
	color: #33475F;
	letter-spacing: .3px;
}

.ph_sig {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
}

.ph_sig i {
	width: 3px;
	border-radius: 1px;
	background: #33475F;
}

.ph_sig i:nth-child(1) { height: 4px; }
.ph_sig i:nth-child(2) { height: 6px; }
.ph_sig i:nth-child(3) { height: 8px; }

.ph_sig b {
	width: 15px;
	height: 8px;
	margin-left: 4px;
	border: 1px solid #33475F;
	border-radius: 2px;
	background: linear-gradient(90deg, #33475F 72%, transparent 72%);
}

.ph_hd {
	padding: 14px 16px 16px;
	background: linear-gradient(135deg, var(--pm-blue), var(--pm-blue-dark));
	color: #fff;
}

.ph_hd b {
	display: block;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .4px;
}

.ph_hd small {
	display: block;
	margin-top: 5px;
	font-size: 11px;
	opacity: .86;
}

.ph_tabs {
	display: flex;
	padding: 8px 12px 0;
	background: #fff;
	border-bottom: 1px solid #E9EFF7;
}

.ph_tabs span {
	position: relative;
	flex: 1;
	padding: 6px 0 10px;
	text-align: center;
	font-size: 11.5px;
	color: var(--pm-muted);
}

.ph_tabs span.on {
	color: var(--pm-blue-dark);
	font-weight: 600;
}

.ph_tabs span.on::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 18px;
	height: 2px;
	border-radius: 1px;
	transform: translateX(-50%);
	background: var(--pm-blue);
}

.ph_card {
	margin: 10px 12px 0;
	padding: 12px 13px 14px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 10px rgba(17, 42, 70, .06);
}

.ph_r1 {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ph_r1 b {
	font-size: 13px;
	font-weight: 600;
	color: var(--pm-ink);
}

.ph_r1 em {
	padding: 2px 6px;
	border-radius: 4px;
	background: #FFF3E2;
	color: #C97A10;
	font-size: 10px;
	font-style: normal;
}

.ph_r1 u {
	margin-left: auto;
	color: #E0663F;
	font-size: 10px;
	text-decoration: none;
}

.ph_meta {
	margin-top: 7px;
	font-size: 10.5px;
	line-height: 1.6;
	color: #7A8798;
}

.ph_note {
	margin-top: 10px;
	padding: 7px 9px;
	border-radius: 6px;
	background: #FFF6EC;
	color: #B4661A;
	font-size: 10px;
	line-height: 1.55;
}

.ph_sec {
	margin: 14px 12px 0;
	font-size: 10.5px;
	letter-spacing: .3px;
	color: #8996A6;
}

.ph_card.sm {
	margin-top: 8px;
	padding: 12px 13px;
}

.ph_r1 em.b {
	background: #E8F3FF;
	color: var(--pm-blue-dark);
}

.ph_btns {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 16px;
	display: flex;
	gap: 8px;
}

.ph_btns span {
	flex: 1;
	height: 36px;
	line-height: 36px;
	border-radius: 10px;
	text-align: center;
	font-size: 12px;
}

.ph_btns .gh {
	flex: 0 0 34%;
	border: 1px solid #D7E3F0;
	background: #fff;
	color: var(--pm-ink-2);
}

.ph_btns .mn {
	background: linear-gradient(120deg, var(--pm-blue), var(--pm-blue-dark));
	color: #fff;
	font-weight: 600;
}

.mob_cap {
	margin-top: 18px;
	font-size: 12px;
	color: var(--pm-muted);
	letter-spacing: .2px;
}

.mob_r {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mob_r li {
	display: flex;
	gap: 16px;
}

.mi {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(30, 159, 255, .18);
	border-radius: 11px;
	background: linear-gradient(150deg, #EAF5FF, #D8EAFF);
	color: var(--pm-blue-dark);
	font-size: 15px;
	font-weight: 600;
}

.mi svg { width: 18px; height: 18px; }

.mb h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.2px;
	color: var(--pm-navy);
}

.mb p {
	margin: 8px 0 0;
	max-width: 560px;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--pm-muted);
	text-wrap: pretty;
}

.mk {
	display: inline-block;
	margin-top: 10px;
	padding: 3px 9px;
	border-radius: 5px;
	background: var(--pm-blue-soft);
	color: var(--pm-blue-dark);
	font-size: 11.5px;
	letter-spacing: .2px;
}

/* ============ 常见问题 ============ */
.faq {
	display: grid;
	gap: 12px;
	max-width: 920px;
	margin: 0 auto;
}

.q {
	border: 1px solid var(--pm-line);
	border-radius: var(--pm-radius-sm);
	background: #fff;
	overflow: hidden;
	transition: border-color .24s, box-shadow .24s;
}

.q:hover { border-color: rgba(30, 159, 255, .28); }

.q[open] {
	border-color: rgba(30, 159, 255, .36);
	box-shadow: var(--pm-shadow);
}

.q summary {
	position: relative;
	padding: 19px 52px 19px 22px;
	list-style: none;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	color: var(--pm-navy);
	transition: color .2s;
}

.q summary::-webkit-details-marker { display: none; }

.q summary:hover,
.q[open] summary { color: var(--pm-blue-dark); }

.q summary::after {
	content: "";
	position: absolute;
	right: 21px;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -6px;
	border-right: 2px solid var(--pm-muted);
	border-bottom: 2px solid var(--pm-muted);
	transform: rotate(45deg);
	transition: transform .26s, border-color .26s, margin-top .26s;
}

.q[open] summary::after {
	margin-top: -2px;
	border-color: var(--pm-blue);
	transform: rotate(-135deg);
}

.q .a {
	padding: 0 20px 19px;
	font-size: 14px;
	line-height: 1.85;
	color: var(--pm-muted);
	text-wrap: pretty;
}

/* ============ 行动区 ============ */
.cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 60px 64px;
	border-radius: 20px;
	background: linear-gradient(120deg, var(--pm-navy) 0%, var(--pm-navy-3) 100%);
	color: #fff;
	position: relative;
	overflow: hidden;
}

.cta::before {
	content: "";
	position: absolute;
	right: -60px;
	bottom: -120px;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	border: 1px solid rgba(127, 200, 255, .10);
	box-shadow: 0 0 0 46px rgba(127, 200, 255, .035), 0 0 0 92px rgba(127, 200, 255, .022);
	pointer-events: none;
}

.cta::after {
	content: "";
	position: absolute;
	right: -60px;
	bottom: -120px;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	border: 1px solid rgba(127, 200, 255, .18);
	pointer-events: none;
}

.cta .t1 {
	font-size: 34px;
	line-height: 1.32;
	font-weight: 600;
	letter-spacing: -.6px;
	text-wrap: balance;
	position: relative;
	z-index: 2;
}

.cta .t2 {
	margin-top: 14px;
	font-size: 15px;
	line-height: 1.8;
	color: #AFC6DA;
	max-width: 680px;
	position: relative;
	z-index: 2;
}

.cta .btns {
	display: flex;
	gap: 12px;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
}

.cta .btn_ghost { border-color: rgba(255, 255, 255, .3); }

/* ============ 内页头 ============ */
.pagehead {
	padding: 48px 0 44px;
	background: linear-gradient(135deg, var(--pm-navy) 0%, var(--pm-navy-3) 100%);
	color: #fff;
	position: relative;
	overflow: hidden;
}

.pagehead::after {
	content: "";
	position: absolute;
	right: -140px;
	top: -160px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(30, 159, 255, .24) 0%, rgba(30, 159, 255, 0) 64%);
}

.pagehead .mid { position: relative; z-index: 2; }

.pagehead .crumb {
	font-size: 13px;
	color: #8FB0CA;
	margin-bottom: 12px;
}

.pagehead .crumb a { color: #8FB0CA; }
.pagehead .crumb a:hover { color: #fff; }

.pagehead .t1 {
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -.3px;
	line-height: 1.4;
	text-wrap: balance;
}

.pagehead .t2 {
	margin-top: 10px;
	font-size: 14.5px;
	color: #AFC6DA;
	max-width: 700px;
	line-height: 1.8;
}

.pagehead .helpsearch {
	display: flex;
	max-width: 520px;
	margin-top: 22px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 24px;
	padding: 5px;
}

.pagehead .helpsearch input {
	flex: 1;
	height: 38px;
	border: 0;
	background: transparent;
	padding: 0 16px;
	font-size: 14px;
	font-family: inherit;
	color: #fff;
	outline: none;
}

.pagehead .helpsearch input::placeholder { color: #90AEC7; }

.pagehead .helpsearch button {
	height: 38px;
	padding: 0 24px;
	border: 0;
	border-radius: 20px;
	background: var(--pm-blue);
	color: #fff;
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	transition: background .2s;
}

.pagehead .helpsearch button:hover { background: var(--pm-blue-dark); }

/* ============ 功能矩阵 ============ */
/* 功能模块页的分组锚点：被吸顶头遮挡，留出导航高度 */
.group[id] { scroll-margin-top: 88px; }

.groups {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.group {
	position: relative;
	background: #fff;
	border: 1px solid var(--pm-line);
	border-radius: var(--pm-radius);
	padding: 24px 24px 22px;
	overflow: hidden;
	transition: transform .24s, box-shadow .24s, border-color .24s;
}

.group::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--pm-blue), var(--pm-cyan));
	opacity: 0;
	transition: opacity .24s;
}

.group:hover {
	border-color: rgba(30, 159, 255, .38);
	box-shadow: var(--pm-shadow-md);
	transform: translateY(-3px);
}

.group:hover::after { opacity: 1; }

.group h3 {
	display: flex;
	align-items: center;
	margin: 0;
	font-size: 16.5px;
	font-weight: 600;
	letter-spacing: -.2px;
	color: var(--pm-navy);
}

.group h3 .no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 24px;
	margin-right: 10px;
	border-radius: 6px;
	background: var(--pm-blue-soft);
	color: var(--pm-blue-dark);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .5px;
	font-variant-numeric: tabular-nums;
}

.group .desc {
	margin-top: 11px;
	padding-bottom: 13px;
	border-bottom: 1px dashed var(--pm-line);
	font-size: 12.5px;
	line-height: 1.75;
	min-height: 1.75em;
	color: var(--pm-muted);
}

.group ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px 12px;
	margin: 13px 0 0;
	padding: 0;
	list-style: none;
}

.group ul li {
	position: relative;
	padding-left: 13px;
	font-size: 13px;
	line-height: 2;
	color: var(--pm-ink-2);
}

.group ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--pm-blue);
	opacity: .45;
}

/* ============ 完整功能清单 ============ */
.fulllist {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.fl {
	position: relative;
	background: #fff;
	border: 1px solid var(--pm-line);
	border-radius: 14px;
	padding: 18px 20px 16px;
	transition: border-color .24s, box-shadow .24s;
}

.fl:hover {
	border-color: rgba(30, 159, 255, .34);
	box-shadow: var(--pm-shadow-md);
}

/* 项数多的域（车位设备 102 项）独占整行，标签横向铺开不拉成独柱 */
.fl.wide { grid-column: 1 / -1; }

.fl_head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 11px;
	border-bottom: 1px solid var(--pm-line);
}

.fl_no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 22px;
	flex: 0 0 auto;
	border-radius: 5px;
	background: var(--pm-blue-soft);
	color: var(--pm-blue-dark);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .4px;
	font-variant-numeric: tabular-nums;
}

.fl_head h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.2px;
	color: var(--pm-navy);
}

.fl_n {
	margin-left: auto;
	font-size: 11.5px;
	color: var(--pm-muted);
	font-variant-numeric: tabular-nums;
}

.fl_desc {
	margin-top: 10px;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--pm-muted);
	/* 窄屏两行描述压掉段末孤字（「…权限从这里往下分」的「分」独占一行）。
	   用 pretty 保住默认断点，不用 balance —— 均衡分行会把「等级」这类词劈到两行。 */
	text-wrap: pretty;
}

.fl_tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 11px;
}

.fl_tags span {
	padding: 4px 9px;
	border: 1px solid transparent;
	border-radius: 6px;
	background: #F3F7FB;
	font-size: 12px;
	line-height: 1.5;
	color: var(--pm-ink-2);
	transition: background .18s, border-color .18s, color .18s;
}

.fl_tags span:hover {
	background: var(--pm-blue-soft);
	border-color: rgba(30, 159, 255, .3);
	color: var(--pm-blue-dark);
}

/* ============ 联系我们 ============ */
.contact {
	display: flex;
	gap: 24px;
	align-items: stretch;
}

.contact .info {
	flex: 0 0 360px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: linear-gradient(160deg, var(--pm-navy-2), var(--pm-navy));
	border-radius: var(--pm-radius);
	padding: 32px 30px;
	color: #fff;
}

.contact .info .brand {
	display: flex;
	align-items: center;
	padding-bottom: 22px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.contact .info .brand img {
	height: 40px;
	width: auto;
	margin-right: 12px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .08);
}

.contact .info .brand .name {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	min-width: 0;
}

.contact .info .brand .name small {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	font-weight: 400;
	color: #93B2CB;
}

.contact .info .line {
	display: flex;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	font-size: 14px;
	line-height: 1.7;
}

.contact .info .line .k {
	flex: 0 0 56px;
	color: #8FB0CA;
	font-size: 13px;
}

.contact .info .line .v { flex: 1; color: #E4EFF8; word-break: break-all; }

.contact .form {
	flex: 1;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--pm-line);
	border-radius: var(--pm-radius);
	padding: 32px 32px 30px;
}

.contact .form .title {
	font-size: 20px;
	font-weight: 600;
	color: var(--pm-navy);
	padding-bottom: 18px;
	border-bottom: 1px dashed var(--pm-line);
	margin-bottom: 22px;
}

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

.contact .field { display: flex; gap: 14px; margin-bottom: 14px; }

.contact .field input { flex: 1; min-width: 0; }

.contact .field input[type=text],
.contact .captcha input[type=text],
.contact textarea {
	height: 46px;
	border: 1px solid var(--pm-line);
	border-radius: 10px;
	background: #FBFCFE;
	padding: 0 16px;
	font-size: 14px;
	font-family: inherit;
	color: var(--pm-ink);
	outline: none;
	transition: all .2s;
}

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

.contact textarea {
	display: block;
	width: 100%;
	height: 132px;
	padding: 13px 16px;
	line-height: 1.8;
	resize: vertical;
	margin-bottom: 14px;
}

.contact .captcha {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-bottom: 22px;
}

.contact .captcha input { flex: 1; min-width: 0; }

.contact .captcha img {
	width: 132px;
	height: 46px;
	border-radius: 10px;
	border: 1px solid var(--pm-line);
	cursor: pointer;
	background: #fff;
	flex-shrink: 0;
}

.contact .submit {
	display: block;
	width: 100%;
	height: 48px;
	border: 0;
	border-radius: 10px;
	background: var(--pm-blue);
	color: #fff;
	font-size: 15.5px;
	font-family: inherit;
	letter-spacing: 2px;
	cursor: pointer;
	transition: background .2s;
	box-shadow: 0 10px 22px rgba(30, 159, 255, .26);
}

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

/* ============ 帮助中心列表 ============ */
.helplist {
	background: #fff;
	border: 1px solid var(--pm-line);
	border-radius: var(--pm-radius);
	overflow: hidden;
}

.helplist .row {
	display: flex;
	align-items: center;
	padding: 0 24px;
	height: 58px;
	border-bottom: 1px solid var(--pm-line);
	cursor: pointer;
	transition: background .18s;
}

.helplist .row:last-child { border-bottom: 0; }

.helplist .row:hover { background: #F7FAFE; }

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

.helplist .row .dir {
	margin-right: 12px;
	padding: 0 8px;
	height: 22px;
	line-height: 22px;
	border-radius: 4px;
	background: var(--pm-blue-soft);
	color: var(--pm-blue-dark);
	font-size: 12px;
}

.helplist .row .arrow { color: #B8C4D3; font-size: 14px; }

/* ============ 分页 ============ */
.pagebox { margin-top: 26px; text-align: center; }

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

.pagebox ul.pagination li {
	list-style: none;
	display: inline-flex;
}

.pagebox ul.pagination li a,
.pagebox ul.pagination li span,
.pagebox > a,
.pagebox > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--pm-line);
	border-radius: 9px;
	background: #fff;
	font-size: 13.5px;
	color: var(--pm-ink-2);
	transition: all .18s;
}

.pagebox ul.pagination li a:hover,
.pagebox > a:hover { border-color: var(--pm-blue); color: var(--pm-blue); }

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

.pagebox ul.pagination li.disabled span { color: #C2CCD8; }

/* ============ 帮助详情 ============ */
.helpwrap { display: flex; gap: 24px; align-items: flex-start; }

.helpside {
	flex: 0 0 268px;
	background: #fff;
	border: 1px solid var(--pm-line);
	border-radius: var(--pm-radius);
	overflow: hidden;
}

.helpside .hd {
	height: 50px;
	line-height: 50px;
	padding: 0 20px;
	border-bottom: 1px solid var(--pm-line);
	font-size: 15px;
	font-weight: 600;
	color: var(--pm-navy);
	background: #F8FAFD;
}

.helpside ul {
	margin: 0;
	padding: 8px 0;
	list-style: none;
	max-height: 640px;
	overflow: auto;
}

.helpside ul li { list-style: none; }

.helpside ul li a {
	display: block;
	padding: 10px 20px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--pm-ink-2);
	border-left: 3px solid transparent;
	transition: all .16s;
}

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

.helpside ul li.on a {
	background: var(--pm-blue-soft);
	color: var(--pm-blue-dark);
	border-left-color: var(--pm-blue);
	font-weight: 600;
}

.helpcon {
	flex: 1;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--pm-line);
	border-radius: var(--pm-radius);
	padding: 30px 34px 40px;
}

.helpcon .crumb { font-size: 13px; color: var(--pm-muted); margin-bottom: 14px; }
.helpcon .crumb a { color: var(--pm-muted); }
.helpcon .crumb a:hover { color: var(--pm-blue); }

.helpcon .ti {
	font-size: 25px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--pm-navy);
	letter-spacing: -.2px;
}

.helpcon .sendtime {
	margin-top: 10px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--pm-line);
	font-size: 13px;
	color: #9AA7B6;
}

.helpcon .detail {
	padding-top: 22px;
	font-size: 15px;
	line-height: 1.95;
	color: var(--pm-ink-2);
	word-break: break-word;
}

.helpcon .detail p { margin: 0 0 14px; }
.helpcon .detail h1 { font-size: 24px; }
.helpcon .detail h2 { font-size: 21px; }
.helpcon .detail h3 { font-size: 18px; }
.helpcon .detail h4 { font-size: 16px; }
.helpcon .detail h5 { font-size: 15px; }
.helpcon .detail h6 { font-size: 14px; }

.helpcon .detail h1,
.helpcon .detail h2,
.helpcon .detail h3,
.helpcon .detail h4,
.helpcon .detail h5,
.helpcon .detail h6 {
	color: var(--pm-navy);
	font-weight: 600;
	line-height: 1.5;
	margin: 22px 0 12px;
}

.helpcon .detail strong { color: var(--pm-ink); font-weight: 600; }
.helpcon .detail a { color: var(--pm-blue); text-decoration: underline; }

.helpcon .detail img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 14px auto;
	border-radius: 10px;
	box-shadow: 0 4px 18px rgba(23, 32, 43, .08);
}

.helpcon .detail table {
	width: 100%;
	max-width: 100%;
	margin: 16px 0;
	border-collapse: collapse;
	font-size: 14px;
	display: block;
	overflow-x: auto;
}

.helpcon .detail table th,
.helpcon .detail table td {
	border: 1px solid var(--pm-line);
	padding: 9px 13px;
	text-align: left;
}

.helpcon .detail table th { background: #F6F9FD; color: var(--pm-navy); font-weight: 600; }

.helpcon .detail pre {
	overflow: auto;
	background: #F6F8FA;
	padding: 14px 16px;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.8;
}

.helpcon .detail code { background: #F2F5F9; padding: 1px 6px; border-radius: 4px; font-size: 13.5px; }
.helpcon .detail pre code { background: transparent; padding: 0; }

.helpcon .detail ul,
.helpcon .detail ol { margin: 0 0 14px; padding-left: 22px; }
.helpcon .detail ul li,
.helpcon .detail ol li { margin-bottom: 6px; }

.helpcon .detail blockquote {
	margin: 16px 0;
	padding: 12px 16px;
	border-left: 4px solid var(--pm-line);
	border-radius: 0 8px 8px 0;
	background: #F8FAFD;
	color: var(--pm-muted);
	font-size: 14px;
}

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

.helpcon .detail blockquote.danger { border-left-color: #E5484D; background: #FDF1F1; color: #A32A2E; }
.helpcon .detail blockquote.warning { border-left-color: var(--pm-gold); background: #FEF8ED; color: #8A5E10; }
.helpcon .detail blockquote.info { border-left-color: var(--pm-blue); background: #EDF6FE; color: #0B5A96; }
.helpcon .detail blockquote.success { border-left-color: #17A673; background: #EAF8F2; color: #0C6A4A; }

.helpcon .detail blockquote h1,
.helpcon .detail blockquote h2,
.helpcon .detail blockquote h3,
.helpcon .detail blockquote h4 { color: inherit; margin: 0 0 6px; }

.helpcon .detail blockquote p { margin: 0 0 6px; }
.helpcon .detail blockquote p:last-child { margin-bottom: 0; }

/* ============ 页脚 ============ */
.bottombox {
	position: relative;
	background: var(--pm-navy);
	color: #A9BFD3;
	padding: 64px 0 0;
}

/* 与上方白色区块之间留一条细光带，深色块不至于硬切 */
.bottombox::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(127, 200, 255, .34), transparent);
}

.fb_main {
	display: grid;
	grid-template-columns: 1.5fr .85fr .75fr 1.05fr;
	gap: 48px;
	padding-bottom: 48px;
}

.fb_logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.fb_logo img { height: 30px; width: auto; }

.fb_logo span {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .5px;
	color: #fff;
}

.fb_brand p {
	margin: 18px 0 0;
	max-width: 340px;
	font-size: 13px;
	line-height: 1.95;
	color: #8FA9C0;
}

.fb_meta {
	margin-top: 18px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 12.5px;
	line-height: 1.7;
	color: #7089A0;
}

.fb_col .h {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 16px;
	letter-spacing: .4px;
}

.fb_col a {
	display: block;
	width: fit-content;
	font-size: 13px;
	line-height: 2.1;
	color: #8FA9C0;
	transition: color .18s, transform .18s var(--pm-ease);
}

.fb_col a:hover { color: #fff; transform: translateX(3px); }

.fb_col .txt {
	font-size: 13px;
	line-height: 2.1;
	color: #8FA9C0;
	word-break: break-all;
}

.fb_cta {
	display: inline-flex;
	align-items: center;
	height: 38px;
	margin-top: 20px;
	padding: 0 20px;
	border-radius: 19px;
	background: linear-gradient(120deg, var(--pm-blue), var(--pm-blue-dark));
	color: #fff;
	font-size: 13px;
	cursor: pointer;
	transition: transform .2s, box-shadow .2s;
}

.fb_cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(30, 159, 255, .38); }

.bottombox .copy {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding: 22px 0 26px;
	font-size: 12.5px;
	color: #7C97AF;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.bottombox .copy a { color: #7C97AF; }

/*
 手机端底部固定条：只在窄屏出现，宽屏 display:none。
 位置固定在视口底部，靠 .wrap 的底部内边距让开，避免压住版权行。
*/
.m_cta { display: none; }
.bottombox .copy a:hover { color: #fff; }

/* ============ 响应式 ============ */
/* ============ 动效 ============ */
@keyframes pm-spin {
	to { transform: rotate(360deg); }
}

@keyframes pm-flow {
	to { stroke-dashoffset: -7; }
}

@keyframes pm-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .35; }
}

@keyframes pm-breathe {
	0%, 100% { box-shadow: 0 18px 44px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 0 rgba(30, 159, 255, .3); }
	50% { box-shadow: 0 22px 52px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 16px rgba(30, 159, 255, 0); }
}

@keyframes pm-travel {
	0% { left: 7.14%; opacity: 0; }
	6% { opacity: 1; }
	94% { opacity: 1; }
	100% { left: 92.86%; opacity: 0; }
}

@keyframes pm-scan {
	0% { background-position: 0 -40%; }
	100% { background-position: 0 140%; }
}

@keyframes pm-halo {
	0%, 100% { opacity: .85; }
	50% { opacity: 1; }
}

/* ============ 滚入进场（脚本可用时启用，脚本缺席不隐藏任何内容） ============ */
.motion [data-reveal] {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition: opacity .72s var(--pm-ease), transform .72s var(--pm-ease);
	will-change: opacity, transform;
}

.motion [data-reveal].is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

.motion .sec_head[data-reveal] + [data-reveal] { transition-delay: .09s; }

@media (prefers-reduced-motion: reduce) {
	.motion [data-reveal] { opacity: 1; transform: none; transition: none; }
}

@media (min-width: 1081px) and (max-width: 1279px) {
	/* 容器尚未到 1240 满宽时，主标题降一档，避免第二行被压成折行 */
	.hero h1 { font-size: 44px; }
}

@media (max-width: 1080px) {
	.hero { min-height: 0; padding: 64px 0 76px; }
	.hero h1 { font-size: 40px; }
	.hero .grid { gap: 24px; }
	.hero .left { flex: 1 1 56%; }
	.hero .right { flex: 0 0 40%; }
	.sec_head h2 { font-size: 30px; }
	.stats .num { font-size: 38px; letter-spacing: -1px; }
	.stats .txt { font-size: 13px; text-wrap: balance; }
	.sec_head.split { grid-template-columns: 1fr; gap: 18px 0; align-items: start; padding-bottom: 24px; margin-bottom: 44px; }
	.sec_head.split p { max-width: 100%; }
	.cards { grid-template-columns: repeat(2, 1fr); }
	.domains { grid-template-columns: repeat(2, 1fr); }
	.groups { grid-template-columns: repeat(2, 1fr); }
	.fulllist { grid-template-columns: 1fr; }
	.terminals { grid-template-columns: repeat(2, 1fr); }
	.payline { grid-template-columns: repeat(4, 1fr); gap: 26px 18px; }
	.payline::before,
	.payline::after { display: none; }
	.pl { align-items: flex-start; padding: 0; text-align: left; }
	.pl_dot { width: 34px; height: 34px; margin: 0; font-size: 11px; line-height: 30px; }
	.pl h3 { margin-top: 11px; font-size: 14.5px; }
	.pl p { min-height: 0; font-size: 12.5px; }
	.guar { grid-template-columns: repeat(2, 1fr); }
	.ui_body { grid-template-columns: 1fr; }
	.ui_side { display: none; }
	.ui_kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ui_row { grid-template-columns: 1fr; }
	.p_chart { height: 186px; }
	.mob { grid-template-columns: 1fr; gap: 44px; }
	.mob_l { align-items: center; }
	.mob_r { gap: 24px; }
	.fb_main { grid-template-columns: 1fr 1fr; gap: 34px 40px; }
	.fb_brand { grid-column: 1 / -1; }
	.fb_brand p { max-width: 100%; }
	.fb_col:last-child { grid-column: 1 / -1; }
	.fb_col .txt { word-break: normal; overflow-wrap: break-word; }
	.contact .info { flex: 0 0 300px; }
}

/* 平板竖屏：首屏改上下堆叠，避免左栏被压到 400px 以内导致文案挤断 */
@media (max-width: 900px) {
	/* 窄屏两条吸顶会吃掉近半屏，章节栏直接不显示，锚点跳转只让位给导航 */
	.subnav { display: none; }
	.section[id] { scroll-margin-top: 70px; }

	/* 滚动后收起次级导航行，把吸顶头的高度收掉一半；停在首屏之上时保持完整 */
	.top_content .item {
		max-height: 70px;
		transition: max-height .3s var(--pm-ease), opacity .2s, padding .3s;
	}

	.top_wrap.is-min .top_content .item {
		max-height: 0;
		padding-bottom: 0;
		opacity: 0;
		pointer-events: none;
	}

	.top_wrap.is-min .top_content .content {
		padding-top: 6px;
		padding-bottom: 6px;
		min-height: 52px;
	}

	.cta { flex-direction: column; align-items: flex-start; gap: 24px; }
	.cta .t1 { font-size: 23px; }

	.hero .grid { flex-direction: column; gap: 36px; }
	.hero .left, .hero .right { flex: none; width: 100%; }
	.hero .right { margin-top: 4px; }
	.hero .sub { max-width: 100%; }
	.ring { max-width: 400px; }
}

@media (max-width: 760px) {
	.mid { padding: 0 18px; }

	.top_content .content {
		height: auto;
		min-height: 58px;
		flex-wrap: wrap;
		padding-top: 10px;
		padding-bottom: 8px;
		row-gap: 8px;
	}

	.top_content .item {
		order: 3;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		overflow-x: auto;
		padding-bottom: 2px;
		-webkit-overflow-scrolling: touch;
	}

	.top_content .item a { line-height: 34px; padding: 0 12px; font-size: 14px; white-space: nowrap; }
	.top_content .item a.on::after { bottom: 2px; left: 12px; right: 12px; }

	.top_content .zixun { margin-left: auto; height: 34px; line-height: 34px; padding: 0 16px; font-size: 13px; }
	.top_content .login { height: 34px; line-height: 34px; padding: 0 16px; font-size: 13px; }
	.logo .title { font-size: 16px; }
	.logo img { height: 28px; }

	.hero { padding: 36px 0 50px; }
	.hero .scan { display: none; }
	.hero .grid { flex-direction: column; gap: 34px; }
	.hero .left, .hero .right { flex: none; width: 100%; }
	.hero h1 { font-size: 28px; line-height: 1.4; }
	.hero h1 br { display: inline; }
	.hero .sub { font-size: 15px; }
	.hero .btns { margin-top: 26px; }
	.btn_main, .btn_ghost { height: 44px; padding: 0 22px; font-size: 14px; }
	.hero .trust { margin-top: 24px; gap: 8px; }
	.hero .trust span { height: 27px; padding: 0 10px; font-size: 12px; }
	.hero .sub br { display: inline; }
	.ring { max-width: 290px; }
	.ring .core { width: 100px; height: 100px; }
	.ring .core b { font-size: 18px; }
	.ring .node { height: 30px; padding: 0 10px; font-size: 12px; }
	.ring .n2 { left: 88%; }
	.ring .n4 { left: 12%; }

	.stats { margin-top: -32px; padding: 0 18px; }
	.stats .mid { flex-wrap: wrap; }
	.stats .item { flex: 0 0 50%; padding: 24px 8px; }
	.stats .item + .item::before { display: none; }
	.stats .item:nth-child(even)::before { display: block; content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 1px; background: var(--pm-line); }
	.stats .num { font-size: 30px; letter-spacing: -.8px; }
	.stats .num small { font-size: 12.5px; vertical-align: 5px; }
	.stats .txt { margin-top: 8px; font-size: 12.5px; line-height: 1.6; text-wrap: balance; }

	.section { padding: 60px 0; }
	.domain { padding: 16px 16px 14px; }
	.domain .n { font-size: 22px; }
	.domain h3 { margin-top: 10px; }
	.sec_head { margin-bottom: 34px; }
	.sec_head h2 { font-size: 25px; letter-spacing: -.3px; }
	.sec_head p { font-size: 14.5px; }
	.sec_head.split { gap: 14px 0; padding-bottom: 20px; margin-bottom: 30px; }
	.cards, .groups, .terminals, .flow, .domains { grid-template-columns: 1fr; gap: 14px; }

	.mob { gap: 34px; }
	.phone { width: 280px; padding: 8px; border-radius: 36px; }
	.ph_scr { height: 570px; border-radius: 29px; }
	.ph_hd { padding: 12px 14px 14px; }
	.ph_hd b { font-size: 14px; }
	.ph_card { margin: 9px 10px 0; padding: 11px 12px 13px; }
	.ph_btns { left: 10px; right: 10px; bottom: 13px; }
	.ph_btns span { height: 34px; line-height: 34px; font-size: 11.5px; }
	.mob_cap { margin-top: 14px; font-size: 11.5px; }
	.mob_r { gap: 20px; }
	.mb h3 { font-size: 15px; }
	.mb p { font-size: 13px; }
	.mk { margin-top: 8px; font-size: 11px; }

	.fb_main { grid-template-columns: 1fr 1fr; gap: 30px 20px; padding-bottom: 34px; }
	.fb_brand { grid-column: 1 / -1; }
	.fb_brand p { margin-top: 14px; }
	.fb_col .h { margin-bottom: 10px; }
	.fb_col:last-child { grid-column: 1 / -1; }
	.fb_col .txt { word-break: normal; overflow-wrap: break-word; }
	.fb_cta { margin-top: 14px; }
	.bottombox { padding-top: 46px; }
	.fl { padding: 16px 16px 14px; }
	.fl_tags { gap: 5px; }
	.fl_tags span { padding: 3px 8px; font-size: 11.5px; }

	.payline { grid-template-columns: 1fr; gap: 0; }
	.payline::before,
	.payline::after { display: none; }
	.pl { align-items: flex-start; padding: 0 0 22px 54px; text-align: left; }
	.pl::after {
		content: "";
		position: absolute;
		left: 18px;
		top: 19px;
		bottom: 0;
		width: 2px;
		background: linear-gradient(180deg, rgba(30, 159, 255, .30), rgba(30, 159, 255, .16));
	}
	.pl:last-child::after { display: none; }
	.pl_dot { position: absolute; left: 0; top: 0; width: 38px; height: 38px; line-height: 34px; margin: 0; }
	.pl h3 { margin: 6px 0 0; font-size: 15px; }
	.pl p { margin: 6px 0 0; min-height: 0; font-size: 13px; }

	.guar { grid-template-columns: 1fr; gap: 12px; }
	.g { padding: 20px 18px 18px; }

	.ui_bar { height: 36px; padding: 0 12px; }
	.ui_url { display: none; }
	.ui_flag { margin-left: auto; }
	.ui_main { padding: 14px 14px 16px; }
	.ui_kpi { gap: 8px; margin-bottom: 10px; }
	.ui_kpi .k { padding: 9px 11px 10px; }
	.ui_kpi .k b { font-size: 17px; letter-spacing: -.4px; }
	.ui_kpi .k em { font-size: 10.5px; }
	.ui_row, .ui_row.two { grid-template-columns: 1fr; gap: 10px; }
	.ui_row.two { margin-top: 10px; }
	.p_chart { height: 104px; }
	.wk .w b { font-size: 15px; }
	.dev { gap: 8px 12px; }
	.ui_cap { margin-top: 14px; font-size: 12px; text-align: left; }

	.faq { gap: 10px; }
	.q summary { padding: 15px 44px 15px 16px; font-size: 14.5px; }
	.q summary::after { right: 18px; }
	.q .a { padding: 0 16px 17px; font-size: 13.5px; }

	.pagehead { padding: 32px 0 30px; }
	.pagehead .t1 { font-size: 23px; }
	.pagehead .t2 { font-size: 13.5px; }
	.pagehead .helpsearch { margin-top: 18px; }

	.contact { flex-direction: column; }
	.contact .info, .contact .form { flex: none; width: 100%; }
	.contact .info { padding: 26px 22px; }
	.contact .form { padding: 24px 20px; }
	.contact .field { flex-direction: column; gap: 12px; }
	.contact .captcha { gap: 10px; }
	.contact .captcha img { width: 108px; }

	.helpwrap { flex-direction: column; }
	.helpside { flex: none; width: 100%; }
	.helpside ul { max-height: 260px; }
	.helpcon { padding: 22px 18px 28px; }
	.helpcon .ti { font-size: 20px; }

	.helplist .row { padding: 0 16px; height: 54px; }
	.helplist .row .name { font-size: 14px; }

	.cta { flex-direction: column; align-items: flex-start; padding: 34px 26px; gap: 22px; }
	.cta .t1 { font-size: 22px; }
	.cta .btns { width: 100%; }

	.bottombox { padding-top: 40px; }
	.bottombox .copy { flex-direction: column; gap: 4px; }

	/* 底部固定条：窄屏才出现，为它留出让位高度，避免压住版权行 */
	.wrap { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }

	.m_cta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 95;
		display: flex;
		gap: 10px;
		padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, .97);
		backdrop-filter: saturate(180%) blur(12px);
		border-top: 1px solid var(--pm-line);
		box-shadow: 0 -8px 22px rgba(11, 37, 64, .08);
	}

	.m_cta a {
		flex: 1;
		height: 44px;
		line-height: 44px;
		border-radius: 22px;
		text-align: center;
		font-size: 14.5px;
		font-weight: 600;
		letter-spacing: .2px;
	}

	.m_cta .tel {
		color: var(--pm-navy);
		background: #fff;
		border: 1px solid var(--pm-line);
	}

	.m_cta .main {
		color: #fff;
		background: linear-gradient(96deg, var(--pm-blue), #2B8FEA);
		box-shadow: 0 6px 16px rgba(30, 159, 255, .3);
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}