/* 全局样式 */
:root {
	--primary-color: #3a7bd5;
	--dark-color: #1a1a25;
	--light-color: #f8fafc;
	--gray-color: #94a3b8;
	--text: #ccc;
	--text-light: #a0a0b0;
	--accent: #0b7dda;
	--accent-dark: #3A86FF;
}

@supports (width: clamp(10px, 3vw, 20px)) {
	:root {
		--ideal-viewport-width: 1920;
		--current-viewport-width: 100vw;
		--min-viewport-width: 768px;
		--max-viewport-width: 3840px;
		--clamped-viewport-width: clamp(var(--min-viewport-width), var(--current-viewport-width), var(--max-viewport-width));
		/* --ratio: var(--clamped-viewport-width) /var(--ideal-viewport-width) */
	}
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Segoe UI', Arial, sans-serif;
}

body {
	line-height: 1.6;
	color: var(--dark-color);
	background: var(--dark-color);
	overflow-x: hidden;
	color: var(--text);
}

section {
	padding: 80px 0;
}

h2 {
	font-size: 2.5rem;
	margin-bottom: 25px;
	text-align: center;
	position: relative;
}

h2::after {
	content: '';
	display: block;
	width: 80px;
	height: 4px;
	background: var(--primary-color);
	margin: 15px auto;
}

/* 页脚 */
.footer {
	background: var(--dark-color);
	color: var(--text);
	padding: 30px 0;
	text-align: center;
}

.container-footer {
	align-items: center;
	display: inline-block;
	margin: 0 auto;
	max-width: var(--max-viewport-width);
	padding: 0 calc(var(--ratio) * 144);
	margin: 0 auto;
	padding: 0 20px;
}

.social-links {
	margin-top: 20px;
}

.social-links a {
	color: var(--text);
	font-size: 1.5rem;
	margin: 0 10px;
	transition: color 0.3s;
}

.social-links a:hover {
	color: var(--primary-color);
}

/* 响应式设计 */
@media (max-width: 768px) {
	.navbar {
		position: fixed;
		top: 70px;
		left: -100%;
		background: white;
		width: 100%;
		height: calc(100vh - 70px);
		transition: all 0.3s;
	}

	.navbar.active {
		left: 0;
	}

	.navbar ul {
		flex-direction: column;
		padding: 20px;
	}

	.hero h1 {
		font-size: 2.5rem;
	}
}

/* 语言切换器样式 */
.language-switcher {
	display: flex;
	position: absolute;
	right: 20px;
	z-index: 1000;
	font-family: Arial, sans-serif;
	padding: calc(var(--ratio) * 19) 0;
	height: 50%;
}

.lang-btn {
	/* background: none; */
	background: var(--primary-color);
	border: 1px solid var(--primary-color);
	color: var(--text);
	padding: 5px 10px;
	cursor: pointer;
	transition: all 0.3s;
	border-radius: 5px;
}

.lang-btn.active {
	background: var(--primary-color);
	color: white;
}