:root {
				--primary-color: #3498db;
				--secondary-color: #2c3e50;
				--accent-color: #e74c3c;
				--light-color: #ecf0f1;
				--dark-color: #2c3e50;
				--transition-speed: 0.3s;
				--container-width: 980px;
}

* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
}

body {
				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
				line-height: 1.6;
				color: var(--dark-color);
				background-color: #f9f9f9;
				overflow-x: hidden;
				padding: 20px;
}

.container {
				max-width: var(--container-width);
				margin: 0 auto;
				background-color: white;
				border-radius: 12px;
				overflow: hidden;
				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* 语言切换按钮 */
.lang-toggle {
				position: fixed;
				top: 20px;
				right: 20px;
				z-index: 1000;
				background: white;
				border-radius: 50%;
				width: 50px;
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
				transition: all 0.3s ease;
				font-weight: bold;
}

.lang-toggle:hover {
				transform: translateY(-3px) rotate(5deg);
				box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* 顶部样式 */
.top-section {
				background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
				color: white;
				padding: 2.5rem;
				text-align: center;
				position: relative;
				overflow: hidden;
}

.top-section::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0, 0.1);
				z-index: 1;
}

.top-content {
				position: relative;
				z-index: 2;
}

.domain-name {
				font-size: 3.5rem;
				font-weight: 700;
				margin-bottom: 1rem;
				text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
				transition: transform var(--transition-speed);
}

.domain-name:hover {
				transform: scale(1.05);
}

.domain-desc {
				font-size: 1.2rem;
				margin-bottom: 2rem;
				opacity: 0.9;
}

.contact-info {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: 1.5rem;
				margin-top: 2rem;
}

.contact-item {
				display: flex;
				align-items: center;
				transition: transform var(--transition-speed);
				background: rgba(255, 255, 255, 0.1);
				padding: 0.8rem 1.5rem;
				border-radius: 50px;
}

.contact-item:hover {
				transform: translateY(-5px);
				background: rgba(255, 255, 255, 0.2);
}

/* 中部样式 */
.middle-section {
				padding: 2.5rem;
				background-color: white;
}

.platforms {
				margin-bottom: 2rem;
}

.platform-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 1rem;
				margin-top: 1.5rem;
}

.platform-btn {
				background-color: var(--light-color);
				border: none;
				padding: 1rem;
				border-radius: 8px;
				cursor: pointer;
				transition: all var(--transition-speed);
				font-weight: 500;
				font-size: 1rem;
}

.platform-btn:hover {
				background-color: var(--primary-color);
				color: white;
				transform: translateY(-5px);
				box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 底部样式 */
.bottom-section {
				padding: 2.5rem;
				background-color: #f8f9fa;
				border-top: 1px solid #eee;
}

.process {
				margin-top: 1rem;
}

.process-item {
				margin-bottom: 1.5rem;
				padding-left: 1.5rem;
				border-left: 3px solid var(--primary-color);
				transition: all var(--transition-speed);
}

.process-item:hover {
				border-left: 3px solid var(--accent-color);
				transform: translateX(5px);
}


/* 页脚 */
footer {
				text-align: center;
				padding: 1.5rem;
				background-color: var(--secondary-color);
				color: white;
}

/* 响应式设计 */
@media (max-width: 1000px) {
				.container {
								margin: 0 10px;
				}
}

@media (max-width: 768px) {
				.domain-name {
								font-size: 2.5rem;
				}

				.platform-grid {
								grid-template-columns: repeat(2, 1fr);
				}

				.contact-info {
								flex-direction: column;
								align-items: center;
				}
}

@media (max-width: 480px) {
				.platform-grid {
								grid-template-columns: 1fr;
				}

				.domain-name {
								font-size: 2rem;
				}

				.top-section,
				.middle-section,
				.bottom-section {
								padding: 1.5rem;
				}
}

/* 动画效果 */
@keyframes fadeIn {
				from { opacity: 0; transform: translateY(20px); }
				to { opacity: 1; transform: translateY(0); }
}

.animated {
				opacity: 0;
				animation: fadeIn 0.6s ease forwards;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }