/* ========================================
   GTA-S 高级设计系统
   Premium Design System
======================================== */

/* ========== 全局样式优化 ========== */
:root {
	--primary-color: #7FD2F0;
	--primary-dark: #5db6e5;
	--primary-light: #a8e0f7;
	--accent-color: #ff205f;
	--dark-bg: #0f172a;
	--light-bg: #f8fafc;
	--text-dark: #1e293b;
	--text-light: #64748b;
	--border-color: #e2e8f0;
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
	--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
	--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.16);
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--spacing-unit: 8px;
}

body {
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--text-dark);
	line-height: 1.6;
	overflow-x: hidden;
}

/* ========== 统一区块标题样式 ========== */
.section-header {
	text-align: center;
	margin-bottom: 80px;
	position: relative;
}

.section-badge {
	display: inline-block;
	padding: 8px 24px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--primary-color);
	background: rgba(127, 210, 240, 0.1);
	border: 1px solid rgba(127, 210, 240, 0.3);
	border-radius: 50px;
	margin-bottom: 20px;
}

.section-main-title {
	font-size: 48px;
	font-weight: 700;
	color: var(--dark-bg);
	margin-bottom: 16px;
	line-height: 1.2;
}

.section-subtitle {
	font-size: 18px;
	color: var(--text-light);
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.6;
}

/* ========== 加入流程区块 ========== */
.join-steps-section {
	padding: 120px 0;
	background: linear-gradient(135deg, #f8fafc 0%, #e5edf7 100%);
	position: relative;
	overflow: hidden;
}

.join-steps-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--border-color), transparent);
}

.steps-container {
	position: relative;
	margin-top: 60px;
}

.step-card {
	background: #ffffff;
	border-radius: var(--radius-lg);
	padding: 40px 30px;
	text-align: center;
	position: relative;
	transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	border: 2px solid transparent;
	box-shadow: var(--shadow-sm);
	margin-bottom: 30px;
	height: 100%;
}

.step-card:hover {
	transform: translateY(-12px);
	box-shadow: var(--shadow-lg);
	border-color: var(--primary-color);
}

.step-number {
	position: absolute;
	top: -20px;
	right: 30px;
	font-size: 72px;
	font-weight: 900;
	color: rgba(127, 210, 240, 0.1);
	line-height: 1;
	pointer-events: none;
}

.step-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 24px;
	background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	color: #ffffff;
	box-shadow: 0 8px 24px rgba(127, 210, 240, 0.3);
	transition: all 0.3s ease;
}

.step-card:hover .step-icon {
	transform: scale(1.1) rotate(5deg);
	box-shadow: 0 12px 32px rgba(127, 210, 240, 0.5);
}

.step-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--dark-bg);
	margin-bottom: 12px;
}

.step-desc {
	font-size: 15px;
	color: var(--text-light);
	margin-bottom: 20px;
	line-height: 1.5;
}

.step-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--primary-color);
	text-decoration: none;
	transition: all 0.3s ease;
}

.step-link:hover {
	color: var(--primary-dark);
	gap: 12px;
}

.step-link i {
	transition: transform 0.3s ease;
}

.step-link:hover i {
	transform: translateX(4px);
}

/* 流程连接线 */
.steps-connector {
	display: none;
}

@media (min-width: 992px) {
	.steps-connector {
		display: block;
		position: absolute;
		top: 100px;
		left: 12.5%;
		right: 12.5%;
		height: 2px;
		background: linear-gradient(
			90deg,
			transparent 0%,
			var(--primary-color) 10%,
			var(--primary-color) 90%,
			transparent 100%
		);
		z-index: 0;
	}

	.steps-connector::before,
	.steps-connector::after {
		content: "";
		position: absolute;
		width: 12px;
		height: 12px;
		background: var(--primary-color);
		border-radius: 50%;
		top: 50%;
		transform: translateY(-50%);
	}

	.steps-connector::before {
		left: 0;
	}

	.steps-connector::after {
		right: 0;
	}

	.step-card {
		position: relative;
		z-index: 1;
	}
}

/* ========== 服务器特色区块 ========== */
.features-showcase-section {
	padding: 120px 0;
	background: #ffffff;
}

.features-grid {
	margin-top: 60px;
}

.feature-showcase-card {
	background: #ffffff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	transition: all 0.4s ease;
	margin-bottom: 30px;
	border: 1px solid var(--border-color);
}

.feature-showcase-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-lg);
}

.feature-image-wrapper {
	position: relative;
	height: 240px;
	overflow: hidden;
}

.feature-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.feature-showcase-card:hover .feature-image {
	transform: scale(1.1);
}

.feature-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(15, 23, 42, 0.9) 0%,
		rgba(15, 23, 42, 0.4) 50%,
		transparent 100%
	);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.feature-showcase-card:hover .feature-overlay {
	opacity: 1;
}

.feature-icon-large {
	font-size: 64px;
	color: #ffffff;
	transform: scale(0.8);
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feature-showcase-card:hover .feature-icon-large {
	transform: scale(1);
}

.feature-content {
	padding: 32px 28px;
}

.feature-badge {
	display: inline-block;
	padding: 6px 16px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 50px;
	margin-bottom: 16px;
}

.badge-update {
	background: rgba(59, 130, 246, 0.1);
	color: #3b82f6;
	border: 1px solid rgba(59, 130, 246, 0.3);
}

.badge-rp {
	background: rgba(16, 185, 129, 0.1);
	color: #10b981;
	border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-team {
	background: rgba(245, 158, 11, 0.1);
	color: #f59e0b;
	border: 1px solid rgba(245, 158, 11, 0.3);
}

.feature-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--dark-bg);
	margin-bottom: 12px;
	line-height: 1.3;
}

.feature-description {
	font-size: 15px;
	color: var(--text-light);
	line-height: 1.7;
	margin-bottom: 16px;
}

.feature-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--primary-color);
	font-weight: 500;
}

.feature-meta i {
	font-size: 16px;
}

/* ========== 社区平台区块 - 简化版 ========== */
.community-section {
	padding: 120px 0;
	background: linear-gradient(135deg, #f8fafc 0%, #e5edf7 100%);
}

.community-platforms {
	margin-top: 60px;
}

.community-card-simple {
	background: #ffffff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	transition: all 0.4s ease;
	margin-bottom: 30px;
	border: 2px solid transparent;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.community-card-simple:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-lg);
	border-color: var(--primary-color);
}

.community-card-header {
	padding: 40px 32px 24px;
	background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
	display: flex;
	align-items: center;
	gap: 20px;
}

.platform-logo {
	width: 70px;
	height: 70px;
	background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	color: #ffffff;
	box-shadow: 0 8px 24px rgba(127, 210, 240, 0.3);
	flex-shrink: 0;
}

.qq-card .platform-logo {
	background: linear-gradient(135deg, #12b7f5, #0e9ad6);
}

.platform-info h3 {
	font-size: 24px;
	font-weight: 700;
	color: var(--dark-bg);
	margin-bottom: 4px;
}

.platform-tag {
	display: inline-block;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 600;
	background: rgba(127, 210, 240, 0.2);
	color: var(--primary-dark);
	border-radius: 50px;
}

.community-card-body {
	padding: 32px;
	flex: 1;
}

.community-desc {
	font-size: 16px;
	color: var(--text-light);
	line-height: 1.8;
	margin-bottom: 0;
}

.community-card-footer {
	padding: 0 32px 32px;
}

.community-join-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	justify-content: center;
	padding: 16px 32px;
	font-size: 16px;
	font-weight: 600;
	color: #ffffff;
	background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: all 0.3s ease;
	box-shadow: 0 4px 16px rgba(127, 210, 240, 0.3);
}

.community-join-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(127, 210, 240, 0.5);
	color: #ffffff;
}

/* ========== 城市组织区块 ========== */
.organizations-section {
	padding: 120px 0;
	background: #ffffff;
}

.orgs-grid {
	margin-top: 60px;
}

.org-card {
	display: block;
	background: #ffffff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	transition: all 0.4s ease;
	text-decoration: none;
	margin-bottom: 30px;
	border: 2px solid transparent;
}

.org-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-lg);
	border-color: var(--primary-color);
}

.org-image-wrapper {
	position: relative;
	height: 200px;
	overflow: hidden;
}

.org-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.org-card:hover .org-image {
	transform: scale(1.1);
}

.org-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(15, 23, 42, 0.85) 0%,
		rgba(15, 23, 42, 0.3) 60%,
		transparent 100%
	);
	display: flex;
	align-items: flex-end;
	padding: 20px;
}

.org-badge {
	padding: 8px 20px;
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
	border-radius: var(--radius-sm);
	letter-spacing: 1px;
}

.badge-lspd {
	background: linear-gradient(135deg, #3b82f6, #2563eb);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.badge-lsfd {
	background: linear-gradient(135deg, #ef4444, #dc2626);
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.badge-lssd {
	background: linear-gradient(135deg, #10b981, #059669);
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.badge-sahp {
	background: linear-gradient(135deg, #f59e0b, #d97706);
	box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.org-content {
	padding: 24px;
}

.org-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--dark-bg);
	margin-bottom: 12px;
	transition: color 0.3s ease;
}

.org-card:hover .org-title {
	color: var(--primary-color);
}

.org-desc {
	font-size: 14px;
	color: var(--text-light);
	line-height: 1.6;
	margin-bottom: 16px;
}

.org-footer {
	padding-top: 16px;
	border-top: 1px solid var(--border-color);
}

.org-link-text {
	font-size: 14px;
	font-weight: 600;
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: gap 0.3s ease;
}

.org-card:hover .org-link-text {
	gap: 12px;
}

.org-link-text i {
	transition: transform 0.3s ease;
}

.org-card:hover .org-link-text i {
	transform: translateX(4px);
}

/* ========== 响应式设计 ========== */
@media (max-width: 991px) {
	.section-main-title {
		font-size: 38px;
	}

	.section-subtitle {
		font-size: 16px;
	}

	.join-steps-section,
	.features-showcase-section,
	.community-section,
	.organizations-section {
		padding: 80px 0;
	}

	.section-header {
		margin-bottom: 60px;
	}
}

@media (max-width: 767px) {
	.section-main-title {
		font-size: 32px;
	}

	.section-subtitle {
		font-size: 15px;
	}

	.join-steps-section,
	.features-showcase-section,
	.community-section,
	.organizations-section {
		padding: 60px 0;
	}

	.section-header {
		margin-bottom: 40px;
	}

	.step-card,
	.feature-showcase-card,
	.community-card,
	.org-card {
		margin-bottom: 20px;
	}
}

/* ========== 视频展示区块 ========== */
.video-showcase-section {
	padding: 120px 0;
	background: linear-gradient(135deg, #f8fafc 0%, #e5edf7 100%);
	position: relative;
}

.video-content-wrapper {
	margin-top: 60px;
}

.video-player-container {
	position: relative;
}

.video-wrapper {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	background: #000;
}

.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-info {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
	padding: 16px 20px;
	background: #ffffff;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	font-size: 14px;
	color: var(--text-light);
}

.video-info i {
	font-size: 20px;
	color: var(--primary-color);
}

.video-info a {
	color: var(--primary-color);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.3s ease;
}

.video-info a:hover {
	color: var(--primary-dark);
}

.video-description {
	padding: 40px;
	background: #ffffff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	height: 100%;
}

.brand-showcase {
	text-align: center;
	margin-bottom: 40px;
	padding-bottom: 30px;
	border-bottom: 2px solid var(--border-color);
}

.brand-logo {
	max-width: 180px;
	margin-bottom: 20px;
}

.brand-tagline {
	font-size: 18px;
	font-weight: 600;
	color: var(--text-dark);
	line-height: 1.5;
}

.video-highlights {
	display: grid;
	gap: 16px;
}

.highlight-item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	color: var(--text-dark);
	padding: 12px;
	background: rgba(127, 210, 240, 0.05);
	border-radius: var(--radius-sm);
	transition: all 0.3s ease;
}

.highlight-item:hover {
	background: rgba(127, 210, 240, 0.1);
	transform: translateX(4px);
}

.highlight-item i {
	font-size: 18px;
	color: var(--primary-color);
	flex-shrink: 0;
}

/* 响应式 */
@media (max-width: 991px) {
	.video-showcase-section {
		padding: 80px 0;
	}

	.video-description {
		margin-top: 30px;
		padding: 30px;
	}
}

@media (max-width: 767px) {
	.video-showcase-section {
		padding: 60px 0;
	}

	.video-description {
		padding: 24px;
	}

	.brand-logo {
		max-width: 140px;
	}

	.brand-tagline {
		font-size: 16px;
	}
}

/* ========== 页脚优化 ========== */
.footer-section {
	background: var(--dark-bg);
	padding: 40px 0;
	border-top: 1px solid rgba(127, 210, 240, 0.2);
}

.footer-menu {
	list-style: none;
	float: right;
	margin: 0;
	padding: 0;
}

.footer-menu li {
	display: inline-block;
}

.footer-menu li a {
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	color: #94a3b8;
	margin-left: 32px;
	padding: 8px 0;
	transition: color 0.3s ease;
	position: relative;
}

.footer-menu li a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--primary-color);
	transition: width 0.3s ease;
}

.footer-menu li a:hover {
	color: var(--primary-color);
}

.footer-menu li a:hover::after {
	width: 100%;
}

.copyright {
	float: left;
	margin-bottom: 0;
	font-weight: 500;
	color: #94a3b8;
	font-size: 14px;
}

.copyright a {
	color: var(--primary-color);
	text-decoration: none;
	transition: color 0.3s ease;
}

.copyright a:hover {
	color: var(--primary-light);
}

@media (max-width: 767px) {
	.footer-section {
		padding: 30px 0 20px;
		text-align: center;
	}

	.footer-menu,
	.copyright {
		float: none;
	}

	.footer-menu {
		margin-bottom: 20px;
	}

	.footer-menu li:first-child a {
		margin-left: 0;
	}

	.footer-menu li a {
		margin: 0 12px;
	}
}

/* ========== 公告栏优化 ========== */
.latest-news-section {
	background: var(--dark-bg);
	border-bottom: 1px solid rgba(127, 210, 240, 0.2);
}

.ln-title {
	background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
	color: var(--dark-bg);
	font-weight: 600;
}

.news-ticker-contant .nt-item {
	font-size: 15px;
	color: #e2e8f0;
}

.news-ticker-contant .nt-item span.new {
	background: var(--accent-color);
	border-radius: 4px;
	padding: 5px 18px;
}

/* ========== 导航栏优化 ========== */
.header-section {
	background: var(--dark-bg);
	border-bottom: 1px solid rgba(127, 210, 240, 0.2);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.main-menu ul li a {
	position: relative;
	transition: color 0.3s ease;
}

.main-menu ul li a::after {
	content: "";
	position: absolute;
	bottom: 5px;
	left: 5px;
	right: 5px;
	height: 2px;
	background: var(--primary-color);
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.main-menu ul li a:hover::after {
	transform: scaleX(1);
}

.user-panel {
	background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
	box-shadow: 0 4px 12px rgba(127, 210, 240, 0.3);
	transition: all 0.3s ease;
}

.user-panel:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(127, 210, 240, 0.4);
}

/* ========== 全局动画优化 ========== */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.section-header {
	animation: fadeInUp 0.8s ease-out;
}

/* ========== 滚动条美化 ========== */
::-webkit-scrollbar {
	width: 12px;
}

::-webkit-scrollbar-track {
	background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
	border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(135deg, var(--primary-dark), #3ba8e5);
}

/* ========== 选中文本样式 ========== */
::selection {
	background: var(--primary-color);
	color: #ffffff;
}

::-moz-selection {
	background: var(--primary-color);
	color: #ffffff;
}