/* ==========================================================================
   GlobalLink 环球专线 (v2.0 Pro 视觉增强版) — 核心样式表
   设计语言：深邃冰蓝科技感 · 3D 玻璃拟态卡片 · 微光渐变边缘 · 丝滑微交互
   ========================================================================== */

/* ---------- 1. 设计变量体系 ---------- */
:root {
	--c-bg: #ffffff;
	--c-surface: #f6f9ff;
	--c-ink: #09152b;
	--c-body: #45546d;
	--c-muted: #7b8ba5;
	--c-line: #e4ecf7;
	--c-line-strong: #cfddf2;
	--c-primary: #2456ff;
	--c-primary-hover: #1943db;
	--c-primary-2: #4b88ff;
	--c-cyan: #06b6d4;
	--c-emerald: #10b981;
	--c-dark: #071124;
	--c-dark-2: #0d1b38;
	--grad-brand: linear-gradient(135deg, #2456ff 0%, #3b82f6 52%, #06b6d4 100%);
	--grad-cta: linear-gradient(135deg, #2456ff 0%, #1d4ed8 100%);
	--grad-surface: linear-gradient(180deg, #f4f8ff 0%, #ffffff 100%);
	--r-xl: 24px;
	--r-lg: 20px;
	--r-md: 14px;
	--r-sm: 10px;
	--shadow-xs: 0 2px 6px rgba(9, 21, 43, .04);
	--shadow-sm: 0 4px 16px rgba(9, 21, 43, .06), 0 1px 3px rgba(9, 21, 43, .04);
	--shadow-md: 0 14px 36px rgba(15, 35, 75, .09), 0 4px 12px rgba(15, 35, 75, .04);
	--shadow-lg: 0 28px 68px rgba(15, 35, 75, .15), 0 8px 24px rgba(36, 86, 255, .08);
	--shadow-glow: 0 12px 32px rgba(36, 86, 255, .28);
	--nav-h: 76px;
	--font: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. 基础重置与排版 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.72;
	color: var(--c-body);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
h1, h2, h3, h4 {
	color: var(--c-ink);
	line-height: 1.24;
	margin: 0 0 .5em;
	font-weight: 800;
	letter-spacing: -.018em;
}
p { margin: 0 0 1em; }
a { color: var(--c-primary); text-decoration: none; transition: color .2s ease, opacity .2s ease; }
a:hover { color: var(--c-primary-2); }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font-family: inherit; }
.container { width: min(1240px, 100% - 48px); margin-inline: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* ---------- 3. 顶部通告条 ---------- */
.top-notice {
	background: linear-gradient(90deg, #08142c 0%, #102552 50%, #08142c 100%);
	color: rgba(255, 255, 255, .88);
	font-size: 13px;
	padding: 8px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.top-notice-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.notice-left { display: flex; align-items: center; gap: 10px; }
.notice-pill {
	background: var(--grad-brand);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	padding: 2px 8px;
	border-radius: 999px;
	letter-spacing: .04em;
}
.notice-right { display: flex; align-items: center; gap: 12px; }
.notice-link {
	background: none;
	border: 0;
	color: #67e8f9;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	padding: 0;
}
.notice-link:hover { color: #fff; text-decoration: underline; }
.notice-divider { color: rgba(255, 255, 255, .22); }
.notice-tel { color: rgba(255, 255, 255, .85); font-weight: 500; }
.notice-tel:hover { color: #fff; }

/* ---------- 4. 按钮组件 ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	border-radius: 12px;
	padding: 13px 26px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
	white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid rgba(36, 86, 255, .35); outline-offset: 2px; }
.btn-lg { padding: 16px 30px; font-size: 16px; border-radius: 14px; }
.btn-sm { padding: 10px 18px; font-size: 14px; border-radius: 10px; }
.btn-block { width: 100%; }

.btn-primary {
	background: var(--grad-cta);
	color: #fff;
	box-shadow: 0 8px 22px rgba(36, 86, 255, .28);
}
.btn-primary:hover {
	color: #fff;
	box-shadow: 0 14px 32px rgba(36, 86, 255, .4);
}
.btn-outline {
	border-color: var(--c-line-strong);
	color: var(--c-ink);
	background: #fff;
	box-shadow: var(--shadow-xs);
}
.btn-outline:hover {
	border-color: var(--c-primary);
	color: var(--c-primary);
	box-shadow: var(--shadow-sm);
}
.btn-ghost {
	color: var(--c-ink);
	background: rgba(15, 35, 75, .05);
}
.btn-ghost:hover {
	background: rgba(36, 86, 255, .1);
	color: var(--c-primary);
}
.btn-subtle {
	color: var(--c-primary);
	background: rgba(36, 86, 255, .07);
	border-color: rgba(36, 86, 255, .16);
}
.btn-subtle:hover {
	background: rgba(36, 86, 255, .13);
	color: var(--c-primary-hover);
}
.btn-light {
	background: #fff;
	color: var(--c-primary);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .24);
}
.btn-light:hover { color: var(--c-primary-hover); }
.btn-ghost-light {
	color: #fff;
	border-color: rgba(255, 255, 255, .38);
	background: rgba(255, 255, 255, .06);
	backdrop-filter: blur(8px);
}
.btn-ghost-light:hover {
	background: rgba(255, 255, 255, .15);
	color: #fff;
}

.live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--c-emerald);
	box-shadow: 0 0 0 3px rgba(16, 185, 129, .22);
	display: inline-block;
	animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
	0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, .22); }
	50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, .06); }
}

/* ---------- 5. 头部导航与二级下拉 (Mega Dropdown) ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--nav-h);
	background: rgba(255, 255, 255, .86);
	backdrop-filter: saturate(180%) blur(16px);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	border-bottom: 1px solid rgba(228, 236, 247, .7);
	transition: border-color .25s, box-shadow .25s, background .25s;
}
.site-header.is-scrolled {
	background: rgba(255, 255, 255, .95);
	border-bottom-color: var(--c-line);
	box-shadow: 0 10px 32px rgba(9, 21, 43, .06);
}
.header-inner {
	display: flex;
	align-items: center;
	gap: 28px;
	height: var(--nav-h);
}
.brand-logo {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	font-weight: 800;
	color: var(--c-ink);
}
.brand-logo:hover { color: var(--c-ink); }
.brand-mark {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--grad-brand);
	color: #fff;
	font-size: 19px;
	font-weight: 800;
	box-shadow: 0 6px 18px rgba(36, 86, 255, .32);
}
.brand-text { font-size: 21px; letter-spacing: -.025em; }
.brand-text span { color: var(--c-primary); }

.main-nav { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.nav-menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-menu > li { position: relative; }
.nav-menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 9px 14px;
	border-radius: 10px;
	color: var(--c-body);
	font-weight: 600;
	font-size: 15px;
	transition: background .2s, color .2s;
}
.nav-menu > li > a:hover,
.nav-menu > li:hover > a {
	color: var(--c-primary);
	background: rgba(36, 86, 255, .06);
}
.nav-menu .current-menu-item > a {
	color: var(--c-primary);
	background: rgba(36, 86, 255, .09);
}
.nav-menu .caret { transition: transform .22s ease; }
.nav-menu > li:hover .caret { transform: rotate(180deg); }

/* 二级下拉面板 */
.nav-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	width: 310px;
	background: #ffffff;
	border: 1px solid var(--c-line);
	border-radius: 16px;
	padding: 10px;
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .22s ease, transform .22s ease, visibility .22s;
	z-index: 120;
}
.nav-dropdown::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	height: 10px;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.drop-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 11px 12px;
	border-radius: 12px;
	transition: background .2s;
}
.drop-item:hover { background: #f4f8ff; }
.drop-icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: rgba(36, 86, 255, .08);
	color: var(--c-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 2px;
}
.drop-item strong { display: block; font-size: 14.5px; color: var(--c-ink); margin-bottom: 2px; }
.drop-item small { display: block; font-size: 12.5px; color: var(--c-muted); line-height: 1.4; }

.nav-actions { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	margin-left: auto;
	width: 42px;
	height: 42px;
	border: 1px solid var(--c-line);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	padding: 10px;
	align-items: center;
	justify-content: center;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--c-ink); border-radius: 2px; transition: transform .25s, opacity .25s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 6. Hero 首屏 ---------- */
.hero {
	position: relative;
	overflow: hidden;
	padding: 76px 0 84px;
}
.hero-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(55% 55% at 78% 22%, rgba(59, 130, 246, .16) 0%, transparent 65%),
		radial-gradient(45% 45% at 15% 85%, rgba(6, 182, 212, .13) 0%, transparent 62%),
		linear-gradient(180deg, #f3f7ff 0%, #ffffff 100%);
}
.hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(15, 35, 75, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15, 35, 75, .035) 1px, transparent 1px);
	background-size: 46px 46px;
	mask-image: radial-gradient(75% 75% at 50% 32%, #000 0%, transparent 80%);
	-webkit-mask-image: radial-gradient(75% 75% at 50% 32%, #000 0%, transparent 80%);
}
.hero-inner {
	position: relative;
	display: grid;
	grid-template-columns: 1.04fr .96fr;
	gap: 52px;
	align-items: center;
}
.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--c-primary);
	background: rgba(36, 86, 255, .08);
	border: 1px solid rgba(36, 86, 255, .18);
	padding: 7px 16px;
	border-radius: 999px;
	margin-bottom: 20px;
}
.badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--c-primary);
	box-shadow: 0 0 0 3px rgba(36, 86, 255, .2);
}
.hero-title {
	font-size: clamp(34px, 4.4vw, 54px);
	font-weight: 800;
	line-height: 1.15;
	margin-bottom: 18px;
}
.grad-text {
	background: var(--grad-brand);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.hero-sub {
	font-size: 16.5px;
	max-width: 560px;
	margin-bottom: 20px;
	color: #50607a;
}
.hero-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin-bottom: 28px;
}
.hero-tags span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: #2c3e5d;
}
.hero-tags svg { color: var(--c-emerald); }
.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 36px;
}
.hero-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}
.hstat {
	background: rgba(255, 255, 255, .9);
	border: 1px solid var(--c-line);
	border-radius: 14px;
	padding: 14px 16px;
	box-shadow: var(--shadow-xs);
	transition: transform .22s, border-color .22s;
}
.hstat:hover {
	transform: translateY(-2px);
	border-color: var(--c-line-strong);
}
.hstat-num {
	display: flex;
	align-items: baseline;
	gap: 2px;
}
.hstat strong {
	font-size: 25px;
	font-weight: 800;
	color: var(--c-ink);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}
.hstat-suffix {
	font-size: 14px;
	font-weight: 700;
	color: var(--c-primary);
}
.hstat-label {
	display: block;
	font-size: 12.5px;
	color: var(--c-muted);
	margin-top: 2px;
}

/* Hero 右侧 3D 主视觉与实时遥测面板 */
.hero-visual { position: relative; }
.hero-img-wrap { position: relative; }
.hero-img-frame {
	position: relative;
	border-radius: 26px;
	overflow: hidden;
	padding: 8px;
	background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(232,242,255,.8));
	border: 1px solid rgba(36, 86, 255, .14);
	box-shadow: var(--shadow-lg);
}
.hero-img-frame img {
	width: 100%;
	border-radius: 20px;
	object-fit: cover;
}
.float-card {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, .94);
	border: 1px solid var(--c-line);
	border-radius: 14px;
	padding: 10px 15px;
	box-shadow: var(--shadow-md);
	backdrop-filter: blur(10px);
	animation: floaty 5s ease-in-out infinite;
	z-index: 2;
}
.float-card strong { display: block; font-size: 13px; color: var(--c-ink); line-height: 1.25; }
.float-card small { display: block; font-size: 11.5px; color: var(--c-muted); }
.float-card .dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--c-emerald);
	box-shadow: 0 0 0 4px rgba(16, 185, 129, .18);
}
.fc-icon {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: rgba(36, 86, 255, .1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}
.fc-1 { top: 6%; left: -4%; }
.fc-2 { top: 12%; right: -3%; animation-delay: 2.2s; }
@keyframes floaty {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

/* 实时节点测速面板 */
.hero-node-bar {
	margin-top: 16px;
	background: rgba(255, 255, 255, .96);
	border: 1px solid var(--c-line);
	border-radius: 18px;
	padding: 14px 16px;
	box-shadow: var(--shadow-sm);
}
.node-bar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
	font-size: 12.5px;
}
.node-title {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 700;
	color: var(--c-ink);
}
.node-purity {
	font-weight: 600;
	color: var(--c-primary);
	background: rgba(36, 86, 255, .08);
	padding: 2px 9px;
	border-radius: 999px;
}
.node-pills {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}
.node-pill {
	background: #f5f8ff;
	border: 1px solid var(--c-line);
	border-radius: 10px;
	padding: 7px 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--c-body);
	cursor: pointer;
	transition: all .2s;
	text-align: center;
	white-space: nowrap;
}
.node-pill b { color: var(--c-emerald); font-weight: 700; margin-left: 2px; }
.node-pill:hover,
.node-pill.active {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff;
	box-shadow: 0 4px 12px rgba(36, 86, 255, .24);
}
.node-pill:hover b,
.node-pill.active b { color: #a7f3d0; }
.node-bar-foot {
	margin-top: 9px;
	font-size: 12px;
	color: var(--c-muted);
	border-top: 1px dashed var(--c-line);
	padding-top: 8px;
}

/* ---------- 7. 平台生态信任条 ---------- */
.trust-bar {
	border-block: 1px solid var(--c-line);
	background: #fafcff;
	padding: 24px 0;
}
.trust-label {
	text-align: center;
	font-size: 13.5px;
	color: var(--c-muted);
	margin-bottom: 16px;
}
.trust-label strong { color: var(--c-ink); }
.trust-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 20px;
}
.trust-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--c-line);
	font-size: 14.5px;
	font-weight: 700;
	color: #4b5b76;
	box-shadow: var(--shadow-xs);
	transition: transform .2s, border-color .2s, color .2s;
}
.trust-item:hover {
	transform: translateY(-2px);
	border-color: var(--c-primary-2);
	color: var(--c-primary);
}
.t-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--grad-brand);
}

/* ---------- 8. 通用区块标题 ---------- */
.section { padding: 92px 0; }
.section-head {
	max-width: 680px;
	margin: 0 auto 52px;
	text-align: center;
}
.section-head h2 {
	font-size: clamp(28px, 3.5vw, 38px);
	margin-bottom: 12px;
}
.section-head p {
	font-size: 16px;
	color: var(--c-muted);
}
.eyebrow {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-primary);
	background: rgba(36, 86, 255, .08);
	border: 1px solid rgba(36, 86, 255, .14);
	padding: 5px 14px;
	border-radius: 999px;
	margin-bottom: 14px;
}

/* ---------- 9. 三大核心能力卡片 ---------- */
.features { background: #ffffff; }
.features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}
.card {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
}
.feature-card {
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
	position: relative;
	overflow: hidden;
}
.feature-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--grad-brand);
	opacity: 0;
	transition: opacity .28s;
}
.feature-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
	border-color: var(--c-line-strong);
}
.feature-card:hover::before { opacity: 1; }
.f-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}
.f-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-primary);
	background: linear-gradient(135deg, rgba(36, 86, 255, .11), rgba(6, 182, 212, .11));
	border: 1px solid rgba(36, 86, 255, .15);
}
.f-tag {
	font-size: 12px;
	font-weight: 700;
	color: var(--c-primary);
	background: #f0f5ff;
	padding: 4px 11px;
	border-radius: 999px;
}
.feature-card h3 { font-size: 20px; margin-bottom: 10px; }
.feature-card p { font-size: 15px; color: var(--c-muted); flex: 1; margin-bottom: 18px; }
.f-metric {
	display: flex;
	gap: 10px;
	border-top: 1px solid var(--c-line);
	padding-top: 14px;
}
.f-metric span {
	font-size: 12.5px;
	font-weight: 600;
	color: #3b4c68;
	background: #f7faff;
	padding: 4px 10px;
	border-radius: 8px;
}

/* ---------- 10. 套餐定价与周期切换器 ---------- */
.pricing { background: linear-gradient(180deg, #f5f9ff 0%, #ffffff 55%); }
.billing-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #e9f0fb;
	padding: 6px;
	border-radius: 14px;
	margin-top: 22px;
}
.bill-btn {
	border: 0;
	background: transparent;
	color: var(--c-body);
	font-weight: 600;
	font-size: 14px;
	padding: 9px 18px;
	border-radius: 10px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all .2s ease;
}
.bill-btn.active {
	background: #fff;
	color: var(--c-ink);
	box-shadow: 0 3px 10px rgba(9, 21, 43, .08);
}
.bill-save {
	font-size: 11px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 999px;
	background: rgba(36, 86, 255, .12);
	color: var(--c-primary);
}
.bill-save.hot {
	background: var(--grad-brand);
	color: #fff;
}

.tiers-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	align-items: stretch;
}
.tier-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
	padding: 36px 30px 28px;
	transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.tier-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
	border-color: var(--c-line-strong);
}
.tier-card.popular {
	border: 2px solid transparent;
	background: linear-gradient(#fff, #fff) padding-box, var(--grad-brand) border-box;
	box-shadow: 0 20px 50px rgba(36, 86, 255, .16);
}
.tier-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--grad-cta);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 6px 18px;
	border-radius: 999px;
	box-shadow: 0 6px 16px rgba(36, 86, 255, .35);
	white-space: nowrap;
}
.tier-type {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--c-primary);
	background: rgba(36, 86, 255, .08);
	padding: 4px 11px;
	border-radius: 8px;
}
.tier-name { font-size: 22px; margin: 12px 0 6px; }
.tier-desc { font-size: 14px; color: var(--c-muted); margin-bottom: 18px; min-height: 44px; }
.tier-price-box {
	background: #f8faff;
	border: 1px solid var(--c-line);
	border-radius: 14px;
	padding: 16px 18px;
	margin-bottom: 16px;
}
.tier-price {
	display: flex;
	align-items: baseline;
	gap: 4px;
}
.tier-price .currency { font-size: 22px; font-weight: 800; color: var(--c-ink); }
.tier-price strong {
	font-size: 42px;
	font-weight: 800;
	color: var(--c-ink);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.03em;
	line-height: 1.1;
}
.tier-price span { color: var(--c-muted); font-size: 14px; }
.tier-orig { font-size: 12.5px; color: var(--c-muted); margin-top: 4px; }
.tier-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
}
.tier-tags span {
	font-size: 12px;
	font-weight: 600;
	color: #425470;
	background: #eff4fc;
	padding: 3px 10px;
	border-radius: 6px;
}
.tier-features {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	flex: 1;
}
.tier-features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 7px 0;
	font-size: 14.5px;
	color: #3b4a64;
}
.tier-features svg { color: var(--c-primary); flex-shrink: 0; margin-top: 4px; }
.tier-actions { display: flex; flex-direction: column; gap: 10px; }
.tier-trial-btn {
	background: none;
	border: 0;
	color: var(--c-muted);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	padding: 4px;
	transition: color .2s;
}
.tier-trial-btn:hover { color: var(--c-primary); }

/* ---------- 11. 完善的代理解决方案（三大图文产品卡） ---------- */
.solutions { background: #ffffff; }
.solutions-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}
.sol-card {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.sol-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
	border-color: var(--c-line-strong);
}
.sol-img {
	position: relative;
	overflow: hidden;
	background: #eef4ff;
}
.sol-img img {
	width: 100%;
	height: 215px;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.sol-card:hover .sol-img img { transform: scale(1.05); }
.sol-chip {
	position: absolute;
	top: 14px;
	left: 14px;
	background: rgba(9, 21, 43, .76);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 999px;
	backdrop-filter: blur(8px);
}
.sol-chip.hot { background: var(--grad-cta); }
.sol-body {
	padding: 26px 26px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.sol-body h3 { font-size: 21px; margin-bottom: 10px; }
.sol-body p { font-size: 14.5px; color: var(--c-muted); flex: 1; margin-bottom: 16px; }
.sol-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}
.sol-meta span {
	font-size: 12px;
	font-weight: 600;
	color: var(--c-primary);
	background: rgba(36, 86, 255, .07);
	padding: 4px 10px;
	border-radius: 8px;
}
.sol-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid var(--c-line);
	padding-top: 16px;
}
.sol-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: 14.5px;
	color: var(--c-primary);
}
.sol-test {
	background: #f4f8ff;
	border: 1px solid var(--c-line);
	color: var(--c-ink);
	font-size: 13px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 8px;
	cursor: pointer;
	transition: all .2s;
}
.sol-test:hover {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff;
}

/* ---------- 12. 三大技术优势交替图文区 ---------- */
.deep-showcase {
	background: linear-gradient(180deg, #f6f9ff 0%, #ffffff 50%, #f6f9ff 100%);
}
.feature-split {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 56px;
	align-items: center;
	margin-bottom: 88px;
}
.feature-split:last-child { margin-bottom: 0; }
.feature-split.reverse { grid-template-columns: .95fr 1.05fr; }
.feature-split.reverse .split-visual { order: 2; }
.feature-split.reverse .split-copy { order: 1; }

.visual-card {
	position: relative;
	border-radius: 24px;
	padding: 10px;
	background: #fff;
	border: 1px solid var(--c-line);
	box-shadow: var(--shadow-md);
}
.visual-card img {
	width: 100%;
	border-radius: 18px;
	object-fit: cover;
}
.visual-badge {
	position: absolute;
	left: 24px;
	right: 24px;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(10px);
	border: 1px solid var(--c-line);
	border-radius: 12px;
	padding: 10px 16px;
	font-size: 13px;
	color: var(--c-ink);
	box-shadow: var(--shadow-sm);
	text-align: center;
}
.visual-badge strong { color: var(--c-primary); }
.vb-bottom { bottom: 22px; }
.vb-top { top: 22px; }

.split-copy h2 { font-size: clamp(26px, 3.2vw, 35px); margin-bottom: 14px; }
.split-copy p { font-size: 15.5px; color: var(--c-muted); margin-bottom: 20px; }

.region-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}
.region-pills span {
	background: #fff;
	border: 1px solid var(--c-line);
	padding: 6px 13px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-ink);
	box-shadow: var(--shadow-xs);
}
.purity-metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 20px;
}
.pm-item {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: 12px;
	padding: 12px 14px;
	text-align: center;
}
.pm-item strong { display: block; font-size: 20px; font-weight: 800; color: var(--c-primary); }
.pm-item span { font-size: 12px; color: var(--c-muted); }

.protocol-badges {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 24px;
}
.proto-box {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: 12px;
	padding: 14px;
}
.proto-box strong { display: block; font-size: 14px; color: var(--c-ink); margin-bottom: 4px; }
.proto-box span { display: block; font-size: 12px; color: var(--c-muted); line-height: 1.4; }

.check-list { list-style: none; margin: 0 0 24px; padding: 0; }
.check-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	font-weight: 600;
	font-size: 15px;
	color: #33435d;
}
.check-list svg { color: var(--c-primary); flex-shrink: 0; }
.split-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 13. 多业务场景矩阵 ---------- */
.scenes { background: #fff; }
.scene-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.scene-item {
	background: #f8faff;
	border: 1px solid var(--c-line);
	border-radius: 18px;
	padding: 26px 24px;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.scene-item:hover {
	transform: translateY(-5px);
	background: #fff;
	box-shadow: var(--shadow-md);
	border-color: var(--c-line-strong);
}
.scene-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(36, 86, 255, .1);
	color: var(--c-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.scene-item h4 { font-size: 18px; margin-bottom: 8px; }
.scene-item p { font-size: 14px; color: var(--c-muted); margin: 0; }

/* ---------- 14. 跨境知识分享（焦点卡片 + 列表网格） ---------- */
.knowledge { background: linear-gradient(180deg, #f6f9ff 0%, #ffffff 55%); }
.knowledge-spotlight {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 36px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-xl);
	padding: 34px 36px;
	margin-bottom: 32px;
	box-shadow: var(--shadow-sm);
}
.ks-tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: var(--grad-brand);
	padding: 4px 12px;
	border-radius: 999px;
	margin-bottom: 12px;
}
.ks-copy h3 { font-size: 24px; margin-bottom: 12px; }
.ks-copy p { font-size: 15px; color: var(--c-muted); margin-bottom: 20px; }
.ks-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ks-visual img {
	width: 100%;
	height: 240px;
	object-fit: cover;
	border-radius: 16px;
}

.post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.post-card {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .28s, box-shadow .28s, border-color .28s;
}
.post-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
	border-color: var(--c-line-strong);
}
.post-cover { display: block; overflow: hidden; background: #eef4ff; }
.post-cover img {
	width: 100%;
	height: 204px;
	object-fit: cover;
	transition: transform .5s ease;
}
.post-card:hover .post-cover img { transform: scale(1.05); }
.post-body {
	padding: 22px 24px 26px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.post-meta {
	font-size: 12px;
	font-weight: 700;
	color: var(--c-primary);
	letter-spacing: .02em;
	margin-bottom: 8px;
}
.post-body h3 { font-size: 18px; margin-bottom: 10px; line-height: 1.42; }
.post-body h3 a { color: var(--c-ink); }
.post-body h3 a:hover { color: var(--c-primary); }
.post-body p { font-size: 14px; color: var(--c-muted); flex: 1; margin-bottom: 14px; }
.post-more { font-size: 14px; font-weight: 700; color: var(--c-primary); }

/* ---------- 15. 底部 CTA 横幅 ---------- */
.cta {
	position: relative;
	overflow: hidden;
	padding: 84px 0;
	background: var(--c-dark);
}
.cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(50% 70% at 20% 20%, rgba(59, 130, 246, .35) 0%, transparent 62%),
		radial-gradient(45% 60% at 85% 80%, rgba(6, 182, 212, .24) 0%, transparent 62%);
}
.cta-inner {
	position: relative;
	display: grid;
	grid-template-columns: 1.12fr .88fr;
	gap: 48px;
	align-items: center;
}
.cta-pill {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	color: #67e8f9;
	background: rgba(6, 182, 212, .14);
	border: 1px solid rgba(103, 232, 249, .28);
	padding: 5px 14px;
	border-radius: 999px;
	margin-bottom: 14px;
}
.cta-copy h2 { color: #fff; font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 12px; }
.cta-copy p { color: rgba(255, 255, 255, .76); margin-bottom: 28px; font-size: 16px; }
.cta-visual img {
	border-radius: 20px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
	border: 1px solid rgba(255, 255, 255, .14);
}

/* ---------- 16. 内页 Hero / 对比表 / FAQ / 文章详情 ---------- */
.page-hero {
	position: relative;
	overflow: hidden;
	padding: 72px 0 60px;
	text-align: center;
	background: linear-gradient(180deg, #eff5ff 0%, #ffffff 100%);
}
.page-hero h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 10px; }
.page-hero p { max-width: 580px; margin: 0 auto; color: var(--c-muted); }

.compare { background: #fff; }
.table-wrap {
	overflow-x: auto;
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
}
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare-table th, .compare-table td { padding: 16px 22px; text-align: left; font-size: 15px; }
.compare-table thead th {
	background: linear-gradient(135deg, rgba(36, 86, 255, .08), rgba(6, 182, 212, .08));
	color: var(--c-ink);
	font-weight: 700;
	border-bottom: 1px solid var(--c-line);
	white-space: nowrap;
}
.compare-table tbody tr { border-top: 1px solid var(--c-line); transition: background .2s; }
.compare-table tbody tr:hover { background: #f7faff; }
.compare-table td:first-child { font-weight: 700; color: var(--c-ink); white-space: nowrap; }

.faq { background: linear-gradient(180deg, #f6f9ff 0%, #ffffff 50%); }
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: border-color .25s, box-shadow .25s;
}
.faq-item.open { border-color: rgba(36, 86, 255, .4); box-shadow: var(--shadow-sm); }
.faq-q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: none;
	border: 0;
	padding: 18px 22px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 700;
	color: var(--c-ink);
	text-align: left;
}
.faq-q svg { flex-shrink: 0; color: var(--c-muted); transition: transform .3s; }
.faq-item.open .faq-q svg { transform: rotate(180deg); color: var(--c-primary); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a p { margin: 0; padding: 0 22px 20px; font-size: 15px; color: var(--c-muted); }

.article-page { padding: 64px 0 88px; }
.article-head { max-width: 820px; margin: 0 auto 30px; }
.back-link { display: inline-block; margin-bottom: 18px; font-size: 14px; font-weight: 600; color: var(--c-muted); }
.article-head h1 { font-size: clamp(28px, 3.8vw, 42px); margin: 10px 0 0; }
.article-cover { max-width: 820px; margin: 0 auto 34px; }
.article-cover img { border-radius: 20px; box-shadow: var(--shadow-md); width: 100%; }
.article-content { max-width: 820px; margin: 0 auto; font-size: 16.5px; line-height: 1.9; color: #3d4a63; }
.article-foot { max-width: 820px; margin: 44px auto 0; text-align: center; }

.pagination { margin-top: 48px; text-align: center; }
.pagination .nav-links { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: 11px;
	border: 1px solid var(--c-line);
	color: var(--c-body);
	font-weight: 600;
	font-size: 14px;
}
.pagination .page-numbers.current {
	background: var(--grad-cta);
	border-color: transparent;
	color: #fff;
}

/* ---------- 17. 页脚 ---------- */
.site-footer { background: var(--c-dark); color: #94a3bd; }
.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.25fr;
	gap: 40px;
	padding: 68px 0 48px;
}
.site-footer .brand-logo { color: #fff; }
.footer-desc { margin: 16px 0 18px; font-size: 14px; color: #8496b4; max-width: 320px; }
.footer-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.f-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #cbd5e1;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .1);
	padding: 4px 10px;
	border-radius: 8px;
}
.f-badge svg { color: #38bdf8; }
.footer-socials { display: flex; gap: 10px; }
.footer-socials a, .footer-socials .social-btn {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .07);
	color: #aab6cd;
	transition: all .22s;
}
.footer-socials a:hover, .footer-socials .social-btn:hover {
	background: var(--grad-cta);
	color: #fff;
	transform: translateY(-3px);
}
.footer-col h4 { color: #fff; font-size: 15px; margin-bottom: 18px; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 11px; }
.footer-links a, .footer-link-btn {
	color: #8fa0bc;
	font-size: 14px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.footer-links a:hover, .footer-link-btn:hover { color: #fff; }
.footer-contact p { margin-bottom: 12px; font-size: 14px; }
.contact-label { display: block; font-size: 12px; color: #64748b; margin-bottom: 2px; }
.footer-contact a, .footer-contact span { color: #e2e8f0; font-weight: 600; }
.footer-phone a { font-size: 14px; color: #e2e8f0; font-weight: 600; }
.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding: 22px 0 28px;
	font-size: 13px;
	color: #64748b;
}
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.footer-legal a, .edi-cert { color: #8fa0bc; }
.footer-legal a:hover { color: #fff; }

/* ---------- 18. 悬浮快捷栏 & 咨询模态框 ---------- */
.floating-dock {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 95;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-end;
}
.dock-btn {
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 14px;
	box-shadow: 0 10px 28px rgba(36, 86, 255, .36);
	transition: transform .25s, opacity .25s, visibility .25s;
}
.dock-consult {
	background: var(--grad-cta);
	color: #fff;
	padding: 12px 16px;
	font-size: 13.5px;
	font-weight: 700;
}
.dock-consult:hover { transform: translateY(-3px); }
.back-top {
	width: 46px;
	height: 46px;
	background: #fff;
	color: var(--c-ink);
	border: 1px solid var(--c-line);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
}
.back-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-top:hover { transform: translateY(-3px); color: var(--c-primary); }

/* 模态框 */
.gl-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
}
.gl-modal.open { opacity: 1; visibility: visible; }
.gl-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(7, 17, 36, .62);
	backdrop-filter: blur(6px);
}
.gl-modal-dialog {
	position: relative;
	width: min(540px, 100%);
	background: #fff;
	border-radius: 24px;
	padding: 34px 32px 28px;
	box-shadow: 0 32px 72px rgba(7, 17, 36, .35);
	transform: translateY(16px) scale(.98);
	transition: transform .28s cubic-bezier(.16,1,.3,1);
	max-height: 92vh;
	overflow-y: auto;
}
.gl-modal.open .gl-modal-dialog { transform: translateY(0) scale(1); }
.gl-modal-close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	border: 1px solid var(--c-line);
	background: #f8faff;
	color: var(--c-body);
	cursor: pointer;
	font-size: 16px;
}
.gl-modal-close:hover { color: var(--c-ink); background: #eef4ff; }
.gl-modal-head h3 { font-size: 22px; margin-bottom: 6px; }
.gl-modal-head p { font-size: 14px; color: var(--c-muted); margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { margin-bottom: 14px; }
.form-group label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--c-ink);
	margin-bottom: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--c-line-strong);
	border-radius: 11px;
	font-size: 14px;
	color: var(--c-ink);
	background: #fbfdff;
	transition: border-color .2s, box-shadow .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	outline: none;
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px rgba(36, 86, 255, .14);
	background: #fff;
}
.form-feedback {
	font-size: 13.5px;
	font-weight: 600;
	margin-bottom: 12px;
	border-radius: 10px;
}
.form-feedback.ok {
	padding: 10px 14px;
	background: #ecfdf5;
	color: #047857;
	border: 1px solid #a7f3d0;
}
.form-feedback.err {
	padding: 10px 14px;
	background: #fef2f2;
	color: #b91c1c;
	border: 1px solid #fecaca;
}
.form-foot-note {
	text-align: center;
	font-size: 12px;
	color: var(--c-muted);
	margin: 12px 0 0;
}

/* ---------- 19. 渐入动效 ---------- */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .65s ease, transform .65s cubic-bezier(.16,1,.3,1);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
	html { scroll-behavior: auto; }
}

.empty-tip { text-align: center; color: var(--c-muted); padding: 60px 0; }
.page-content { max-width: 820px; margin: 0 auto; font-size: 16.5px; line-height: 1.9; color: #3d4a63; }
.err-code {
	display: block;
	font-size: 88px;
	font-weight: 800;
	line-height: 1;
	color: transparent;
	background: var(--grad-brand);
	-webkit-background-clip: text;
	background-clip: text;
	margin-bottom: 8px;
}
.err-hero { padding: 110px 0; }

/* ---------- 20. 响应式适配 ---------- */
@media (max-width: 1060px) {
	.hero-inner { grid-template-columns: 1fr; gap: 44px; }
	.features-grid, .tiers-grid, .solutions-grid, .post-grid { grid-template-columns: repeat(2, 1fr); }
	.feature-split, .feature-split.reverse { grid-template-columns: 1fr; gap: 32px; margin-bottom: 64px; }
	.feature-split.reverse .split-visual { order: 1; }
	.feature-split.reverse .split-copy { order: 2; }
	.knowledge-spotlight { grid-template-columns: 1fr; }
	.cta-inner { grid-template-columns: 1fr; gap: 32px; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
	.top-notice-inner { justify-content: center; text-align: center; }
	.notice-right { display: none; }
	.nav-toggle { display: flex; }
	.main-nav {
		position: absolute;
		top: var(--nav-h);
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: rgba(255, 255, 255, .98);
		backdrop-filter: blur(16px);
		border-bottom: 1px solid var(--c-line);
		padding: 16px 24px 24px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity .25s, transform .25s, visibility .25s;
		box-shadow: 0 20px 40px rgba(9, 21, 43, .1);
	}
	.main-nav.open { opacity: 1; visibility: visible; transform: none; }
	.nav-menu { flex-direction: column; align-items: stretch; gap: 4px; margin-bottom: 16px; }
	.nav-dropdown {
		position: static;
		width: 100%;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		background: #f6f9ff;
		margin-top: 4px;
	}
	.nav-actions { flex-wrap: wrap; }
	.nav-actions .btn { flex: 1; }
	.hero { padding: 48px 0 60px; }
	.hero-stats { grid-template-columns: repeat(2, 1fr); }
	.node-pills { grid-template-columns: repeat(2, 1fr); }
	.float-card { display: none; }
	.section { padding: 64px 0; }
	.features-grid, .tiers-grid, .solutions-grid, .scene-grid, .post-grid { grid-template-columns: 1fr; }
	.purity-metrics, .protocol-badges, .form-row { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; gap: 32px; padding: 48px 0 36px; }
	.footer-bottom { flex-direction: column; align-items: flex-start; }
}


/* ==========================================================================
   v3.0 升级样式：
   1. 平台生态图标条（官方全彩图标 + 鼠标悬停弹簧放大弹起交互）
   2. 三大核心能力 3D 拟物光感立体图标
   3. 多页面独立视图架构（SPA 路由切换 + 面包屑 + 子标签页）
   4. 首屏图片与套餐价格可视化快改演示栏
   ========================================================================== */

/* --- 图2改造：平台生态信任条（带彩色品牌图标与弹起放大交互） --- */
.trust-bar {
	border-block: 1px solid var(--c-line);
	background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
	padding: 28px 0 32px;
}
.trust-label {
	text-align: center;
	font-size: 14px;
	color: var(--c-muted);
	margin-bottom: 20px;
}
.trust-label strong { color: var(--c-ink); font-weight: 800; }
.trust-logos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px 18px;
	max-width: 1080px;
	margin: 0 auto;
}
.trust-item {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 11px 16px 11px 12px;
	border-radius: 16px;
	background: #ffffff;
	border: 1px solid var(--c-line);
	box-shadow: 0 3px 10px rgba(9, 21, 43, 0.04);
	cursor: pointer;
	position: relative;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.35s ease, background 0.3s ease;
	user-select: none;
}
.trust-item .plat-icon {
	width: 44px;
	height: 44px;
	border-radius: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(9, 21, 43, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.35);
	transition: transform 0.48s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
	will-change: transform;
}
.trust-item .plat-info {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	min-width: 0;
}
.trust-item .plat-info strong {
	font-size: 15px;
	font-weight: 800;
	color: var(--c-ink);
	transition: color 0.25s ease;
}
.trust-item .plat-info small {
	font-size: 12px;
	color: var(--c-muted);
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.trust-item:hover {
	transform: translateY(-5px);
	border-color: var(--p-color, var(--c-primary));
	background: linear-gradient(145deg, #ffffff 0%, #f5f9ff 100%);
	box-shadow: 0 16px 32px -6px var(--p-glow, rgba(36, 86, 255, 0.22));
}
.trust-item:hover .plat-icon {
	transform: translateY(-8px) scale(1.28) rotate(-5deg);
	box-shadow: 0 14px 26px -3px var(--p-glow, rgba(36, 86, 255, 0.38)), inset 0 1.5px 2px rgba(255, 255, 255, 0.6);
}
.trust-item:hover .plat-info strong {
	color: var(--p-color, var(--c-primary));
}

/* --- 图3改造：三大核心能力 3D 拟物光感图标 Logo --- */
.f-icon-3d {
	width: 68px;
	height: 68px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background: linear-gradient(145deg, #ffffff 0%, #eef5ff 100%);
	border: 1px solid rgba(36, 86, 255, 0.18);
	box-shadow:
		0 14px 28px -6px rgba(20, 50, 130, 0.16),
		0 4px 10px rgba(36, 86, 255, 0.08),
		inset 0 2px 3px rgba(255, 255, 255, 0.95);
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}
.f-icon-3d.f-icon-globe {
	background: linear-gradient(145deg, #eff6ff 0%, #dbeafe 100%);
	border-color: rgba(37, 99, 235, 0.24);
}
.f-icon-3d.f-icon-shield {
	background: linear-gradient(145deg, #ecfdf5 0%, #e0f2fe 100%);
	border-color: rgba(16, 185, 129, 0.26);
}
.f-icon-3d.f-icon-bolt {
	background: linear-gradient(145deg, #eef2ff 0%, #e0f2fe 100%);
	border-color: rgba(99, 102, 241, 0.25);
}
.f-icon-badge {
	position: absolute;
	top: -7px;
	right: -9px;
	background: linear-gradient(135deg, #2456ff 0%, #06b6d4 100%);
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	padding: 2px 7px;
	border-radius: 999px;
	box-shadow: 0 4px 10px rgba(36, 86, 255, 0.35);
	border: 1.5px solid #fff;
	letter-spacing: 0.02em;
	line-height: 1.3;
}
.f-icon-badge.emerald {
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	box-shadow: 0 4px 10px rgba(16, 185, 129, 0.35);
}
.f-icon-badge.cyan {
	background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
	box-shadow: 0 4px 10px rgba(99, 102, 241, 0.35);
}
.feature-card:hover .f-icon-3d {
	transform: translateY(-6px) scale(1.12) rotate(-3deg);
	box-shadow:
		0 20px 36px -6px rgba(36, 86, 255, 0.26),
		0 6px 14px rgba(36, 86, 255, 0.14),
		inset 0 2px 4px rgba(255, 255, 255, 1);
}

/* --- 图5改造：多页面独立视图切换架构 (SPA Multi-Page Router) --- */
.page-view {
	display: none;
	animation: glPageFadeIn 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-view.active {
	display: block;
}
@keyframes glPageFadeIn {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

/* 内页顶部横幅与面包屑 */
.subpage-hero {
	position: relative;
	overflow: hidden;
	padding: 56px 0 48px;
	background:
		radial-gradient(50% 60% at 80% 20%, rgba(36, 86, 255, 0.12) 0%, transparent 65%),
		radial-gradient(40% 50% at 15% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 65%),
		linear-gradient(180deg, #eef4ff 0%, #ffffff 100%);
	border-bottom: 1px solid var(--c-line);
}
.breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--c-muted);
	margin-bottom: 14px;
}
.breadcrumb a {
	color: var(--c-body);
	font-weight: 600;
	cursor: pointer;
}
.breadcrumb a:hover { color: var(--c-primary); }
.breadcrumb .sep { color: #cbd5e1; }
.breadcrumb .cur { color: var(--c-primary); font-weight: 700; }

/* 页内产品子分类切换 Tab */
.subpage-tabs {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
	background: #e9f0fb;
	padding: 6px;
	border-radius: 14px;
	margin-top: 22px;
}
.sub-tab-btn {
	border: 0;
	background: transparent;
	color: var(--c-body);
	font-weight: 700;
	font-size: 14px;
	padding: 10px 20px;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.22s ease;
}
.sub-tab-btn:hover { color: var(--c-primary); }
.sub-tab-btn.active {
	background: #ffffff;
	color: var(--c-primary);
	box-shadow: 0 4px 12px rgba(9, 21, 43, 0.08);
}

/* 首页「关于我们与公司实力」板块 */
.company-about {
	background: linear-gradient(180deg, #f5f9ff 0%, #ffffff 100%);
}
.about-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 48px;
	align-items: center;
}
.about-metrics {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-top: 24px;
}
.am-box {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: 16px;
	padding: 20px;
	box-shadow: var(--shadow-xs);
}
.am-box strong {
	display: block;
	font-size: 26px;
	font-weight: 800;
	color: var(--c-primary);
	margin-bottom: 4px;
}
.am-box span {
	font-size: 13.5px;
	color: var(--c-body);
	font-weight: 600;
}

/* 首屏图片快捷更换按钮（供用户直观体验图1换图效果） */
.hero-img-Changer {
	position: absolute;
	bottom: 18px;
	right: 18px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(9, 21, 43, 0.78);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.25);
	padding: 7px 13px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	backdrop-filter: blur(8px);
	transition: background 0.2s, transform 0.2s;
}
.hero-img-Changer:hover {
	background: var(--c-primary);
	transform: translateY(-2px);
}

@media (max-width: 960px) {
	.trust-logos { grid-template-columns: repeat(2, 1fr); }
	.about-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.trust-logos { grid-template-columns: 1fr; }
}


/* 预览版顶部当前页面状态指示器与子分类切换增强 */
.page-indicator-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	color: #67e8f9;
	background: rgba(6, 182, 212, 0.16);
	border: 1px solid rgba(103, 232, 249, 0.3);
	padding: 2px 10px;
	border-radius: 999px;
}
.proxy-filter-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 24px;
}
.pf-btn {
	border: 1px solid var(--c-line-strong);
	background: #ffffff;
	color: var(--c-body);
	font-weight: 700;
	font-size: 14px;
	padding: 10px 22px;
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.22s ease;
}
.pf-btn:hover {
	border-color: var(--c-primary);
	color: var(--c-primary);
}
.pf-btn.active {
	background: var(--grad-cta);
	border-color: transparent;
	color: #ffffff;
	box-shadow: 0 6px 18px rgba(36, 86, 255, 0.28);
}
.node-table-wrap {
	margin-top: 40px;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: 20px;
	overflow-x: auto;
	box-shadow: var(--shadow-sm);
}
.status-ok {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: #059669;
	background: #ecfdf5;
	padding: 4px 10px;
	border-radius: 999px;
}

/* ==========================================================================
   v3.2 极简纯享版微信二维码弹窗样式（仅显示二维码，无滚动条）
   ========================================================================== */
.gl-wx-modal-dialog {
	width: min(360px, 90vw);
	padding: 14px;
	text-align: center;
	overflow: hidden;
	max-height: none;
	border-radius: 22px;
	background: #ffffff;
}
.gl-wx-modal-dialog .gl-modal-close {
	top: 10px;
	right: 10px;
	z-index: 10;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(9, 21, 43, 0.08);
	border: 0;
	color: var(--c-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	backdrop-filter: blur(4px);
}
.gl-wx-modal-dialog .gl-modal-close:hover {
	background: rgba(9, 21, 43, 0.18);
	color: var(--c-ink);
}
.wx-qr-img-wrap {
	position: relative;
	width: 100%;
	margin: 0 auto;
	border-radius: 14px;
	overflow: hidden;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wx-qr-img-wrap img {
	width: 100%;
	max-height: 78vh;
	height: auto;
	object-fit: contain;
	display: block;
	border-radius: 12px;
}
.btn-wechat {
	background: linear-gradient(135deg, #07c160 0%, #059669 100%);
	color: #fff;
	box-shadow: 0 8px 22px rgba(7, 193, 96, 0.28);
	border: 0;
}
.btn-wechat:hover {
	color: #fff;
	box-shadow: 0 12px 28px rgba(7, 193, 96, 0.4);
}
.hero-cert-badge {
	position: absolute;
	bottom: 18px;
	right: 18px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(9, 21, 43, 0.82);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.22);
	padding: 7px 13px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 600;
	backdrop-filter: blur(8px);
}


/* ==========================================================================
   v3.3 视觉与交互升级：
   1. 品牌 Logo 图像自适应圆角框（顶栏「小白科技」/ 页脚「XiaobaiStudio」）
   2. 方案定价卡片（图2）：鼠标悬停任意卡片动态上浮放大 + 发光蓝框 +「立即购买」自动变蓝
   3. 应用场景 6 大定制图标（图1）：TikTok / iPhone 18 Pro Max / Shopify / 地球 / 上升数据曲线 / Google Ads
   ========================================================================== */
.brand-mark {
	overflow: hidden;
	padding: 0;
	background: #ffffff;
	border: 1.5px solid rgba(36, 86, 255, 0.18);
}
.brand-mark img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}

/* 图2：方案定价卡片丝滑放大与按钮变蓝微交互 */
.tier-card,
.tier-card.reveal.in {
	transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.36s ease, border-color 0.3s ease, background 0.3s ease;
	will-change: transform, box-shadow;
	cursor: pointer;
}
.tier-card .tier-actions .btn {
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), background 0.28s ease, color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.tier-card:hover,
.tier-card.reveal.in:hover,
.tier-card.is-active,
.tier-card.reveal.in.is-active {
	transform: translateY(-10px) scale(1.038);
	border: 2px solid transparent;
	background: linear-gradient(#ffffff, #ffffff) padding-box, var(--grad-brand) border-box;
	box-shadow: 0 26px 60px rgba(36, 86, 255, 0.22), 0 8px 24px rgba(6, 182, 212, 0.12);
	z-index: 5;
}
.tier-card:hover .tier-price-box,
.tier-card.is-active .tier-price-box {
	background: linear-gradient(135deg, rgba(36, 86, 255, 0.06) 0%, rgba(6, 182, 212, 0.06) 100%);
	border-color: rgba(36, 86, 255, 0.24);
}
.tier-card:hover .tier-price strong,
.tier-card.is-active .tier-price strong {
	color: var(--c-primary);
}
.tier-card:hover .tier-actions .btn,
.tier-card.is-active .tier-actions .btn {
	background: var(--grad-cta);
	color: #ffffff;
	border-color: transparent;
	box-shadow: 0 10px 26px rgba(36, 86, 255, 0.38);
	transform: translateY(-2px);
}

/* 图1：应用场景 6 大专属图标样式与悬停弹跳效果 */
.scene-item,
.scene-item.reveal.in {
	transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease, border-color 0.28s ease, background 0.28s ease;
}
.scene-item:hover,
.scene-item.reveal.in:hover {
	transform: translateY(-7px);
	background: #ffffff;
	box-shadow: var(--shadow-md);
	border-color: rgba(36, 86, 255, 0.28);
}
.scene-icon {
	width: 54px;
	height: 54px;
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.32s ease;
	box-shadow: 0 6px 16px rgba(15, 35, 75, 0.08);
}
.scene-item:hover .scene-icon {
	transform: translateY(-4px) scale(1.14) rotate(-3deg);
	box-shadow: 0 12px 24px rgba(36, 86, 255, 0.18);
}
.scene-icon-tiktok {
	background: linear-gradient(135deg, #0b0f17 0%, #1e2638 100%);
	box-shadow: 0 8px 18px rgba(254, 44, 85, 0.2);
}
.scene-icon-iphone {
	background: linear-gradient(145deg, #eef4ff 0%, #dbeafe 100%);
	border: 1px solid rgba(37, 99, 235, 0.18);
}
.scene-icon-shopify {
	background: linear-gradient(145deg, #f0fdf4 0%, #dcfce7 100%);
	border: 1px solid rgba(94, 142, 62, 0.22);
}
.scene-icon-globe {
	background: linear-gradient(145deg, #ecfeff 0%, #dbeafe 100%);
	border: 1px solid rgba(6, 182, 212, 0.22);
}
.scene-icon-chart {
	background: linear-gradient(145deg, #eff6ff 0%, #e0e7ff 100%);
	border: 1px solid rgba(37, 99, 235, 0.2);
}
.scene-icon-gads {
	background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
	border: 1px solid rgba(66, 133, 244, 0.22);
}


/* ==========================================================================
   v3.4 升级：
   1. 全平台兼容内联 SVG 国旗/区旗图标与弹簧弹动按钮 (.region-pill / .flag-icon)
   2. 代理产品专页 4 大子选项各自独立的专属参数表与技术规格面板 (.proxy-detail-panel)
   ========================================================================== */
.flag-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	flex-shrink: 0;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(9, 21, 43, 0.18);
	line-height: 0;
}
.flag-icon svg {
	display: block;
	border-radius: 2px;
}
.region-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}
.region-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #ffffff;
	border: 1.5px solid var(--c-line-strong);
	padding: 8px 15px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--c-ink);
	box-shadow: 0 3px 10px rgba(9, 21, 43, 0.05);
	cursor: pointer;
	user-select: none;
	transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
	will-change: transform;
}
.region-pill .flag-icon {
	transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pillSpringBounce {
	0% { transform: translateY(0) scale(1); }
	35% { transform: translateY(-8px) scale(1.08); }
	65% { transform: translateY(-3px) scale(1.03); }
	85% { transform: translateY(-6px) scale(1.06); }
	100% { transform: translateY(-5px) scale(1.05); }
}
@keyframes flagWaveBounce {
	0% { transform: scale(1) rotate(0deg); }
	40% { transform: translateY(-2px) scale(1.26) rotate(-8deg); }
	75% { transform: translateY(0) scale(1.14) rotate(5deg); }
	100% { transform: translateY(-1px) scale(1.18) rotate(-4deg); }
}
.region-pill:hover {
	animation: pillSpringBounce 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	border-color: var(--c-primary);
	color: var(--c-primary);
	background: linear-gradient(135deg, #ffffff 0%, #f0f6ff 100%);
	box-shadow: 0 12px 24px rgba(36, 86, 255, 0.2);
}
.region-pill:hover .flag-icon {
	animation: flagWaveBounce 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.region-pill.active {
	border-color: var(--c-primary);
	background: linear-gradient(135deg, #eef4ff 0%, #dbeafe 100%);
	color: var(--c-primary);
	box-shadow: 0 8px 20px rgba(36, 86, 255, 0.18);
}
.region-pill.is-bouncing {
	animation: pillSpringBounce 0.52s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.region-live-status {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-body);
	background: #f4f8ff;
	border: 1px dashed rgba(36, 86, 255, 0.28);
	padding: 9px 14px;
	border-radius: 12px;
	margin-bottom: 20px;
}
.region-live-status strong {
	color: var(--c-primary);
}
.node-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: transform 0.36s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.node-pill:hover {
	transform: translateY(-4px) scale(1.04);
}
.proxy-detail-panel {
	margin-top: 44px;
	animation: glPageFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.proxy-detail-head {
	text-align: center;
	max-width: 680px;
	margin: 0 auto 24px;
}
.proxy-detail-head h3 {
	font-size: 24px;
	margin-bottom: 8px;
}
.proxy-detail-head p {
	font-size: 14.5px;
	color: var(--c-muted);
	margin: 0;
}
.proxy-Addon-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 28px;
}
.p-addon-card {
	background: #ffffff;
	border: 1px solid var(--c-line);
	border-radius: 16px;
	padding: 20px 22px;
	box-shadow: var(--shadow-xs);
}
.p-addon-card strong {
	display: block;
	font-size: 16px;
	color: var(--c-ink);
	margin-bottom: 6px;
}
.p-addon-card p {
	font-size: 13.5px;
	color: var(--c-muted);
	margin: 0;
	line-height: 1.6;
}
.td-flag-wrap {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
@media (max-width: 768px) {
	.proxy-Addon-cards { grid-template-columns: 1fr; }
}


/* ==========================================================================
   v3.5 视觉与对齐全面升级：
   1. 图1修复：静态住宅代理左侧 3D 立体大图饱满填充 + 右侧 15 个国家节点 3×5 严整网格对齐（消除东一个西一个与嵌套边框问题）
   2. 图2修复：动态住宅代理（及所有交替图文块）左右两栏等宽对称、3大指标卡片 100% 撑满与正文右边界齐平、底部双按钮与正文左右边界严格对齐
   3. 图3修复：跨境专线页（及所有子页面）顶部横幅文字块与「两大 TikTok 跨境专线对比」章节标题块 100% 居中对齐
   ========================================================================== */

/* 图1 & 图2：图文分栏严格 50% : 50% 对称布局与 3D 立体卡片饱满填充 */
.feature-split,
.feature-split.reverse {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
	gap: 48px !important;
	align-items: stretch !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 88px !important;
	box-sizing: border-box !important;
}
.feature-split:last-child {
	margin-bottom: 0 !important;
}
.feature-split.reverse .split-visual {
	order: 2 !important;
}
.feature-split.reverse .split-copy {
	order: 1 !important;
}
.split-visual {
	display: flex !important;
	flex-direction: column !important;
	justify-content: stretch !important;
	width: 100% !important;
	min-width: 0 !important;
}
.visual-card {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 420px !important;
	border-radius: 26px !important;
	padding: 12px !important;
	background: linear-gradient(145deg, #ffffff 0%, #eef5ff 100%) !important;
	border: 1.5px solid rgba(36, 86, 255, 0.18) !important;
	box-shadow:
		0 26px 58px rgba(11, 26, 51, 0.14),
		0 6px 18px rgba(36, 86, 255, 0.10),
		inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
	transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.38s ease !important;
	box-sizing: border-box !important;
}
.visual-card:hover {
	transform: perspective(1000px) translateY(-6px) rotateX(1.2deg) rotateY(-1.2deg) !important;
	box-shadow:
		0 34px 68px rgba(11, 26, 51, 0.18),
		0 10px 26px rgba(36, 86, 255, 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
.visual-card img {
	width: 100% !important;
	height: 100% !important;
	min-height: 396px !important;
	flex: 1 1 auto !important;
	border-radius: 18px !important;
	object-fit: cover !important;
	object-position: center center !important;
	box-shadow: 0 10px 28px rgba(9, 21, 43, 0.14) !important;
	display: block !important;
}
.feature-split[data-proxy-cat="static"] .visual-card,
#static-isp .visual-card {
	min-height: 520px !important;
}
.feature-split[data-proxy-cat="static"] .visual-card img,
#static-isp .visual-card img {
	min-height: 496px !important;
}

/* 图1：消除旧版 .region-pills span 嵌套胶囊冲突，改为 3列×5行 严整矩阵网格 */
.region-pills {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 10px !important;
	width: 100% !important;
	margin: 0 0 16px 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}
.region-pills > span {
	background: #fff;
	border: 1px solid var(--c-line);
	padding: 6px 13px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-ink);
	box-shadow: var(--shadow-xs);
	text-align: center;
}
.region-pill {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	width: 100% !important;
	height: 42px !important;
	padding: 0 14px !important;
	gap: 9px !important;
	background: #ffffff !important;
	border: 1.5px solid #d5e2f6 !important;
	border-radius: 12px !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: var(--c-ink) !important;
	box-shadow: 0 3px 10px rgba(9, 21, 43, 0.04) !important;
	cursor: pointer !important;
	user-select: none !important;
	box-sizing: border-box !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.22s ease, background 0.22s ease, color 0.22s ease !important;
}
.region-pill > span {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	color: inherit !important;
	line-height: 1.2 !important;
}
.region-pill > span.flag-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 21px !important;
	height: 14px !important;
	flex-shrink: 0 !important;
	border-radius: 3px !important;
	overflow: hidden !important;
	box-shadow: 0 1px 3px rgba(9, 21, 43, 0.18) !important;
}
.region-pill:hover {
	border-color: var(--c-primary) !important;
	color: var(--c-primary) !important;
	background: linear-gradient(135deg, #ffffff 0%, #f0f6ff 100%) !important;
	box-shadow: 0 10px 22px rgba(36, 86, 255, 0.16) !important;
}
.region-pill.active {
	border-color: var(--c-primary) !important;
	background: linear-gradient(135deg, #eef4ff 0%, #dbeafe 100%) !important;
	color: var(--c-primary) !important;
	box-shadow: 0 6px 16px rgba(36, 86, 255, 0.16) !important;
}

/* 图2：文字块、三列指标卡片 (.purity-metrics / .protocol-badges) 与底部操作按钮 (.split-actions) 左右边缘严格齐平 */
.split-copy {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: stretch !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
	box-sizing: border-box !important;
}
.split-copy .eyebrow {
	align-self: flex-start !important;
	margin-left: 0 !important;
	margin-bottom: 14px !important;
}
.split-copy h2 {
	width: 100% !important;
	margin: 0 0 14px 0 !important;
	text-align: left !important;
}
.split-copy p {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 20px 0 !important;
	text-align: justify !important;
	text-justify: inter-ideograph !important;
	line-height: 1.78 !important;
}
.purity-metrics,
.protocol-badges {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 12px !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 22px 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}
.pm-item,
.proto-box {
	width: 100% !important;
	margin: 0 !important;
	padding: 14px 12px !important;
	background: #ffffff !important;
	border: 1.5px solid var(--c-line-strong) !important;
	border-radius: 14px !important;
	text-align: center !important;
	box-shadow: 0 4px 14px rgba(9, 21, 43, 0.04) !important;
	box-sizing: border-box !important;
}
.split-actions {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 14px !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 4px 0 0 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}
.split-actions .btn {
	width: 100% !important;
	min-height: 48px !important;
	padding: 13px 20px !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	border-radius: 12px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	box-sizing: border-box !important;
}
.split-actions .btn-ghost {
	background: #ffffff !important;
	border: 1.5px solid var(--c-line-strong) !important;
	color: var(--c-ink) !important;
}
.split-actions .btn-ghost:hover {
	border-color: var(--c-primary) !important;
	color: var(--c-primary) !important;
	background: #f4f8ff !important;
	box-shadow: var(--shadow-sm) !important;
}

/* 图3：所有内页顶部横幅 (.subpage-hero / .page-hero) 与章节标题块 (.section-head 等) 强制水平居中对齐 */
.subpage-hero,
.subpage-hero > .container,
.page-hero,
.page-hero > .container,
.section-head,
.sec-head,
.subpage-head,
.lines-head,
.proxy-detail-head,
.compare-head {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.subpage-hero h1,
.page-hero h1,
.section-head h2,
.sec-head h2,
.subpage-head h2,
.lines-head h2,
.proxy-detail-head h3,
.compare-head h2 {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.subpage-hero p,
.page-hero p,
.section-head p,
.sec-head p,
.subpage-head p,
.lines-head p,
.proxy-detail-head p,
.compare-head p {
	max-width: 680px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
}
/* 兼容 WordPress 自定义页面中直接放在 .container 或 div 下的章节标题块 */
.section > .container > .eyebrow {
	display: table !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.section > .container > h1,
.section > .container > h2,
.section > .container > h3 {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.section > .container > p {
	text-align: center !important;
	max-width: 680px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.section .container > div:has(> .eyebrow):not(.split-copy):not(.about-copy):not(.cta-copy):not(.ks-copy):not(.article-head):not(.hero-copy),
.page-content > div:has(> .eyebrow):not(.split-copy):not(.about-copy):not(.cta-copy):not(.ks-copy):not(.article-head):not(.hero-copy) {
	text-align: center !important;
	max-width: 720px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-bottom: 48px !important;
}
.section .container > div:has(> .eyebrow):not(.split-copy):not(.about-copy):not(.cta-copy):not(.ks-copy):not(.article-head):not(.hero-copy) p,
.page-content > div:has(> .eyebrow):not(.split-copy):not(.about-copy):not(.cta-copy):not(.ks-copy):not(.article-head):not(.hero-copy) p {
	text-align: center !important;
	max-width: 680px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

@media (max-width: 1060px) {
	.feature-split,
	.feature-split.reverse {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
		margin-bottom: 64px !important;
	}
	.feature-split.reverse .split-visual { order: 1 !important; }
	.feature-split.reverse .split-copy { order: 2 !important; }
	.visual-card,
	.feature-split[data-proxy-cat="static"] .visual-card,
	#static-isp .visual-card {
		min-height: 340px !important;
	}
	.visual-card img,
	.feature-split[data-proxy-cat="static"] .visual-card img,
	#static-isp .visual-card img {
		min-height: 316px !important;
	}
}
@media (max-width: 640px) {
	.region-pills {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.purity-metrics,
	.protocol-badges,
	.split-actions {
		grid-template-columns: 1fr !important;
	}
}


/* ==========================================================================
   v3.6 页脚布局优化：
   1. 「预约 1 对 1 线路测试」按钮移至左侧品牌栏底部，与上方徽章/简介左右齐平
   2. 四列页脚顶部与底部基线严格对齐，消除底部多余空白
   ========================================================================== */
.site-footer .footer-grid {
	display: grid;
	grid-template-columns: 1.55fr 1fr 1fr 1.2fr;
	gap: 36px;
	padding: 44px 0 24px;
	align-items: stretch;
}
.site-footer .footer-brand {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}
.site-footer .footer-brand-top {
	width: 100%;
	max-width: 320px;
}
.site-footer .footer-desc {
	margin: 12px 0 14px;
	font-size: 13.5px;
	line-height: 1.65;
	color: #8496b4;
	max-width: 320px;
}
.site-footer .footer-badges {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	width: 100%;
	max-width: 320px;
	margin-bottom: 14px;
}
.site-footer .f-badge {
	justify-content: center;
	padding: 5px 8px;
	font-size: 12px;
	white-space: nowrap;
}
.site-footer .footer-cta-btn {
	width: 100%;
	max-width: 320px;
	padding: 11px 18px;
	font-size: 14px;
	font-weight: 700;
	border-radius: 10px;
	margin-top: auto;
}
.site-footer .footer-col {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.site-footer .footer-col h4 {
	color: #fff;
	font-size: 15px;
	margin: 4px 0 16px;
	line-height: 1.3;
}
.site-footer .footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1;
	gap: 8px;
}
.site-footer .footer-links li {
	margin-bottom: 0;
	line-height: 1.5;
}
.site-footer .footer-contact-list {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1;
	gap: 10px;
}
.site-footer .footer-contact p {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
}
.site-footer .footer-bottom {
	padding: 16px 0 18px;
	border-top: 1px solid rgba(255, 255, 255, .08);
}
@media (max-width: 1060px) {
	.site-footer .footer-grid {
		grid-template-columns: 1fr 1fr;
		padding: 36px 0 22px;
	}
}
@media (max-width: 768px) {
	.site-footer .footer-grid {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 32px 0 20px;
	}
}


/* ==========================================================================
   v4.0 全新升级：
   1. 图3彻底修复：页脚上方 CTA 横幅 100% 居中对称排版、均衡不断行、新增 4 大信任亮点胶囊条
   2. 图4彻底修复：5大独立产品专页子导航切换胶囊栏 (.subpage-nav-pills / .sp-pill)
   3. 图1/图2/全站权限：WordPress 后台「小白科技设置」与「文章分类隔离发布」可视化交互面板
   ========================================================================== */
.cta.cta-centered-section {
	padding: 76px 0 80px !important;
	text-align: center !important;
}
.cta-inner.cta-centered-inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	max-width: 900px !important;
	margin: 0 auto !important;
	gap: 0 !important;
}
.cta-copy.cta-centered-copy {
	width: 100% !important;
	max-width: 840px !important;
	margin: 0 auto !important;
	text-align: center !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
}
.cta-copy.cta-centered-copy .cta-pill {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 auto 18px !important;
	padding: 6px 18px !important;
	font-size: 13px !important;
}
.cta-copy.cta-centered-copy h2 {
	color: #ffffff !important;
	font-size: clamp(28px, 3.6vw, 40px) !important;
	line-height: 1.28 !important;
	margin: 0 auto 16px !important;
	text-align: center !important;
	max-width: 780px !important;
}
.cta-copy.cta-centered-copy p.cta-balanced-desc {
	color: rgba(255, 255, 255, 0.84) !important;
	font-size: 16.5px !important;
	line-height: 1.85 !important;
	max-width: 740px !important;
	margin: 0 auto 24px !important;
	text-align: center !important;
	text-wrap: balance !important;
}
.cta-trust-pills {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: 10px 14px !important;
	margin: 0 auto 30px !important;
	max-width: 820px !important;
}
.cta-trust-pills span {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #e2e8f0 !important;
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	padding: 6px 15px !important;
	border-radius: 999px !important;
	backdrop-filter: blur(6px) !important;
}
.cta-centered-actions {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 16px !important;
	margin: 0 auto !important;
}
.subpage-nav-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 24px;
}
.sp-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 22px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	background: #ffffff;
	color: var(--c-body);
	border: 1.5px solid var(--c-line-strong);
	box-shadow: 0 3px 10px rgba(9, 21, 43, 0.04);
	transition: all 0.22s ease;
	text-decoration: none;
	cursor: pointer;
}
.sp-pill:hover {
	border-color: var(--c-primary);
	color: var(--c-primary);
	transform: translateY(-2px);
}
.sp-pill.active {
	background: var(--grad-cta);
	color: #ffffff;
	border-color: transparent;
	box-shadow: 0 6px 18px rgba(36, 86, 255, 0.28);
}
.wp-admin-bar-btn {
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	color: #fff !important;
	border: 0;
	padding: 3px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}
.wp-admin-bar-btn:hover {
	opacity: 0.92;
}
.wp-sim-box {
	background: #ffffff;
	border: 1.5px solid var(--c-line-strong);
	border-radius: 20px;
	padding: 28px;
	box-shadow: var(--shadow-sm);
	margin-bottom: 28px;
}
.wp-sim-box h3 {
	font-size: 20px;
	margin: 0 0 8px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.wp-sim-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	margin-top: 16px;
}
.wp-sim-field label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--c-ink);
	margin-bottom: 6px;
}
.wp-sim-field input,
.wp-sim-field select,
.wp-sim-field textarea {
	width: 100%;
	padding: 10px 13px;
	border: 1.5px solid var(--c-line-strong);
	border-radius: 10px;
	font-size: 14px;
	color: var(--c-ink);
	background: #f8faff;
}
.wp-sim-field input:focus,
.wp-sim-field select:focus,
.wp-sim-field textarea:focus {
	outline: none;
	border-color: var(--c-primary);
	background: #fff;
}
.wp-toast {
	display: none;
	margin-top: 14px;
	padding: 11px 16px;
	border-radius: 10px;
	background: #ecfdf5;
	border: 1px solid #6ee7b7;
	color: #047857;
	font-size: 13.5px;
	font-weight: 700;
}
.wp-toast.show {
	display: block;
}

/* ==========================================================================
   v4.2 专项修复与视觉升级：
   1. 图1修复：首屏「进入小白科技商城」独立外链按钮 (.btn-mall)，彻底解决移动端/桌面端触摸点击冲突
   2. 图2修复：顶部通告栏「客服微信」按钮 (.notice-wx-btn) 样式
   3. 图3修复：页脚「联系我们」移除电话号码改为客服微信，修复 18px 字号过大问题，全列统一 14px 对齐
   4. 图4修复：方案定价三档卡片顶部蓝色胶囊提示标签 (.tier-badge) 与高亮边框统一展示
   ========================================================================== */
.btn-mall {
	background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
	color: #ffffff !important;
	border: 1px solid transparent !important;
	box-shadow: 0 8px 22px rgba(16, 185, 129, 0.28) !important;
	position: relative !important;
	z-index: 10 !important;
	pointer-events: auto !important;
	touch-action: manipulation !important;
	-webkit-tap-highlight-color: transparent !important;
	text-decoration: none !important;
	cursor: pointer !important;
}
.btn-mall:hover,
.btn-mall:focus-visible {
	background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
	color: #ffffff !important;
	box-shadow: 0 14px 32px rgba(16, 185, 129, 0.4) !important;
	transform: translateY(-2px) !important;
}
.btn-mall:active {
	transform: translateY(0) !important;
}
.hero-actions {
	position: relative;
	z-index: 10;
}
.notice-wx-btn {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: 13px !important;
	color: rgba(255, 255, 255, 0.9) !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	transition: color 0.2s ease !important;
}
.notice-wx-btn:hover {
	color: #67e8f9 !important;
	text-decoration: underline !important;
}
/* 图3修复：页脚联系我们全列字体大小与行高 100% 严格对齐（消除原 18px 电话大字号不协调） */
.footer-phone a,
.footer-wx-contact a,
.footer-wx-contact .footer-link-btn,
.footer-contact a,
.footer-contact span:not(.contact-label),
.footer-contact .footer-link-btn {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #e2e8f0 !important;
	line-height: 1.5 !important;
	text-align: left !important;
	display: inline-block !important;
}
.footer-contact .footer-link-btn:hover,
.footer-contact a:hover {
	color: #38bdf8 !important;
}