:root {
	--bg: #0F172A;
	--bg-deep: #020617;
	--primary: #38BDF8;
	--accent: #22D3EE;
	--text: #F8FAFC;
	--text-muted: #94A3B8;
	--content-width: 1440px;
	--card-glass: rgba(15, 23, 42, 0.55);
}

/* ==================== 第三屏容器 ==================== */
.global-section {
	position: relative;
	width: 100%;
	min-height: auto;
	padding: 0px;
	background: linear-gradient(180deg, #0F172A 0%, #0A1225 50%, #020617 100%);
	display: flex;
	align-items: center;
	overflow: hidden;
}

/* 背景扫描线 */
.global-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(0deg,
			transparent,
			transparent 2px,
			rgba(255, 255, 255, 0.006) 2px,
			rgba(255, 255, 255, 0.006) 4px);
	pointer-events: none;
	z-index: 0;
	opacity: 0.5;
}

/* 网格叠加 */
.global-section::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(34, 211, 238, 0.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(34, 211, 238, 0.02) 1px, transparent 1px);
	background-size: 80px 80px;
	pointer-events: none;
	z-index: 0;
}

.global-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 18px 40px 16px;
	display: flex;
	align-items: center;
	gap: 44px;
}

/* ==================== 左侧文案区 (40%) ==================== */
.global-left {
	flex: 0 0 40%;
	max-width: 480px;
	z-index: 2;
}

/* 顶部状态条 */
.status-bar {
	font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 1.2px;
	color: rgba(148, 163, 184, 0.6);
	text-transform: uppercase;
	margin-bottom: 24px;
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	position: relative;
}

.status-bar .blink-sep {
	display: inline-block;
	width: 3px;
	height: 3px;
	background: #22D3EE;
	border-radius: 50%;
	margin: 0 4px;
	animation: blink 1.5s step-end infinite;
	vertical-align: middle;
}

@keyframes blink {

	0%,
	100% {
		opacity: 0.3;
	}

	50% {
		opacity: 1;
	}
}

/* 主标题 */
.global-headline {
	font-size: clamp(34px, 4.5vw, 52px);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.5px;
	color: var(--text);
	margin-bottom: 28px;
}

.global-headline .highlight {
	color: var(--accent);
	position: relative;
}

/* 大数字 */
.global-stats {
	display: flex;
	gap: 50px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.global-stat-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.global-stat-item .stat-number {
	font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
	font-size: 38px;
	font-weight: 700;
	color: var(--text);
	letter-spacing: -0.5px;
	line-height: 1;
}

.global-stat-item .stat-number .plus {
	color: var(--accent);
	font-weight: 700;
}

.global-stat-item .stat-desc {
	font-size: 13px;
	color: var(--text-muted);
	letter-spacing: 0.2px;
}

/* 业务描述 */
.global-desc {
	font-size: 15px;
	line-height: 1.7;
	color: var(--text-muted);
	max-width: 400px;
	border-left: 1px solid rgba(34, 211, 238, 0.3);
	padding-left: 18px;
}

/* ==================== 右侧地图区 (60%) ==================== */
.global-right {
	flex: 1 1 60%;
	position: relative;
	height: 56vh;
	min-height: 420px;
	z-index: 1;
}

/* SVG 地图容器 */
.map-container,
.nodes-overlay {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: auto;
	aspect-ratio: 2000 / 857;
	max-height: 100%;
	transform: translate(-50%, -50%);
}

.map-container {
	pointer-events: none;
}

/*
        !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
        !!  请将你的 SVG 地图文件放在与 HTML 相同的目录下，!!
        !!  并命名为 world-map.svg                           !!
        !!  如果文件名或路径不同，请修改下面的 src 属性      !!
        !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
        */
.map-container img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0.32;
	filter: brightness(0.9) saturate(0.5);
	/* 将地图颜色向深蓝灰偏移 */
}

/* 节点叠加层 */
.nodes-overlay {
	z-index: 2;
	pointer-events: none;
}

/* 单个节点 */
.map-node {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	transform: translate(-50%, -50%);
}

.map-node .node-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 12px rgba(34, 211, 238, 0.8), 0 0 28px rgba(34, 211, 238, 0.4);
	animation: nodePulse 3s ease-in-out infinite;
}

/* 节点光晕扩展环 */
.map-node .node-dot::after {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 1px solid rgba(34, 211, 238, 0.4);
	animation: nodeRing 3s ease-out infinite;
}

@keyframes nodePulse {

	0%,
	100% {
		transform: scale(1);
		opacity: 0.9;
	}

	50% {
		transform: scale(1.25);
		opacity: 1;
	}
}

@keyframes nodeRing {
	0% {
		transform: scale(0.8);
		opacity: 0.7;
	}

	100% {
		transform: scale(2.2);
		opacity: 0;
	}
}

.map-node .node-label {
	margin-top: 10px;
	font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 1px;
	color: rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
	animation: labelFloat 4s ease-in-out infinite;
	text-shadow: 0 0 8px rgba(34, 211, 238, 0.3);
	white-space: nowrap;
}

.map-node .node-label.label-left {
	margin-left: -34px;
}

.map-node .node-label.label-right {
	margin-left: 40px;
}

@keyframes labelFloat {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-3px);
	}
}

/* 不同节点不同的动画延迟，避免同步 */
.map-node:nth-child(1) .node-dot {
	animation-delay: 0s;
}

.map-node:nth-child(1) .node-dot::after {
	animation-delay: 0s;
}

.map-node:nth-child(2) .node-dot {
	animation-delay: 0.4s;
}

.map-node:nth-child(2) .node-dot::after {
	animation-delay: 0.4s;
}

.map-node:nth-child(3) .node-dot {
	animation-delay: 0.8s;
}

.map-node:nth-child(3) .node-dot::after {
	animation-delay: 0.8s;
}

.map-node:nth-child(4) .node-dot {
	animation-delay: 0.2s;
}

.map-node:nth-child(4) .node-dot::after {
	animation-delay: 0.2s;
}

.map-node:nth-child(5) .node-dot {
	animation-delay: 0.6s;
}

.map-node:nth-child(5) .node-dot::after {
	animation-delay: 0.6s;
}

.map-node:nth-child(6) .node-dot {
	animation-delay: 1s;
}

.map-node:nth-child(6) .node-dot::after {
	animation-delay: 1s;
}

.map-node:nth-child(7) .node-dot {
	animation-delay: 0.3s;
}

.map-node:nth-child(7) .node-dot::after {
	animation-delay: 0.3s;
}

.map-node:nth-child(8) .node-dot {
	animation-delay: 0.7s;
}

.map-node:nth-child(8) .node-dot::after {
	animation-delay: 0.7s;
}

.map-node:nth-child(9) .node-dot {
	animation-delay: 1.1s;
}

.map-node:nth-child(9) .node-dot::after {
	animation-delay: 1.1s;
}

.map-node:nth-child(10) .node-dot {
	animation-delay: 0.5s;
}

.map-node:nth-child(10) .node-dot::after {
	animation-delay: 0.5s;
}

/* 鼠标移动时微弱的视差效果（不影响布局） */
.global-right:hover .map-node {
	transition: transform 0.3s ease;
}

/* ==================== 响应式 ==================== */
@media (max-width: 1024px) {
	.global-section {
		padding: 0;
	}

	.global-inner {
		flex-direction: column;
		gap: 40px;
		padding: 60px 20px;
	}

	.global-left {
		flex: 1;
		max-width: 100%;
		text-align: center;
	}

	.global-desc {
		margin: 0 auto;
		border-left: none;
		padding-left: 0;
		border-top: 1px solid rgba(34, 211, 238, 0.3);
		padding-top: 16px;
	}

	.global-stats {
		justify-content: center;
	}

	.status-bar {
		justify-content: center;
	}

	.global-right {
		flex: 0 0 auto;
		width: 100%;
		height: clamp(360px, 43vw, 430px);
		min-height: 0;
	}
}

@media (max-width: 640px) {
	.global-headline {
		font-size: 28px;
	}

	.global-stat-item .stat-number {
		font-size: 28px;
	}

	.global-right {
		height: clamp(260px, 46vw, 320px);
		min-height: 0;
	}
}