:root {
 	--primary: #2760ea;
 	--primary-light: #4d7fed;
 	--secondary: #722ed1;
 	--dark: #1f1f2c;
 	--light: #f5f7fa;
 	--text: #1f1f2c;
 	--text-light: #6b7280;
 	--white: #ffffff;
 	--gray: #e5e7eb;
 	--dark-bg: #14141f;
 }

 * {
 	margin: 0;
 	padding: 0;
 	box-sizing: border-box;
 	font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
 }

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

 .container {
 	max-width: 1400px;
 	margin: 0 auto;
 	padding: 0 15px;
 }

 /* 顶部导航 */
 .top-nav {
 	background-color: var(--white);
 	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 	padding: 12px 0;
 	position: sticky;
 	top: 0;
 	z-index: 100;
 }

 .nav-container {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 }

 .brand {
 	display: flex;
 	align-items: center;
 }

 .brand-logo {
 	height: 40px;
 	margin-right: 10px;
 }

 .brand-name {
 	font-size: 22px;
 	font-weight: 700;
 	color: var(--primary);
 }

 .main-nav {
 	display: flex;
 	align-items: center;
 }

 .nav-items {
 	display: flex;
 	list-style: none;
 }

 .nav-items li {
 	margin: 0 12px;
 	position: relative;
 }

 .nav-items a {
 	color: var(--text);
 	text-decoration: none;
 	font-weight: 500;
 	font-size: 15px;
 	transition: all 0.3s;
 	padding: 8px 0;
 	display: flex;
 	align-items: center;
 }

 .nav-items a i {
 	margin-right: 6px;
 	font-size: 16px;
 }

 .nav-items a:hover {
 	color: var(--primary);
 }

 .nav-items a.active {
 	color: var(--primary);
 	font-weight: 600;
 }

 .nav-items a.active::after {
 	content: '';
 	position: absolute;
 	bottom: 0;
 	left: 0;
 	width: 100%;
 	height: 3px;
 	background: var(--primary);
 	border-radius: 3px;
 }

 .nav-actions {
 	display: flex;
 	align-items: center;
 	margin-left: 20px;
 }

 /* 汉堡菜单 */
 .menu-toggle {
 	display: none;
 	flex-direction: column;
 	justify-content: space-between;
 	width: 28px;
 	height: 20px;
 	cursor: pointer;
 	z-index: 101;
 }

 .menu-toggle span {
 	display: block;
 	height: 2px;
 	width: 100%;
 	background-color: var(--primary);
 	border-radius: 2px;
 	transition: all 0.3s;
 }

 /* 按钮样式 */
 .btn {
 	display: inline-block;
 	padding: 10px 24px;
 	border-radius: 6px;
 	text-decoration: none;
 	font-weight: 600;
 	font-size: 14px;
 	transition: all 0.3s;
 	text-align: center;
 }

 .btn-primary {
 	background-color: var(--primary);
 	color: var(--white);
 	box-shadow: 0 4px 12px rgba(39, 96, 234, 0.25);
 }

 .btn-primary:hover {
 	background-color: var(--primary-light);
 	transform: translateY(-2px);
 	box-shadow: 0 6px 16px rgba(39, 96, 234, 0.3);
 }

 .btn-outline {
 	border: 1px solid var(--primary);
 	color: var(--primary);
 	margin-left: 12px;
 }

 .btn-outline:hover {
 	background-color: rgba(39, 96, 234, 0.05);
 }

 .btn-dark {
 	background-color: var(--dark);
 	color: var(--white);
 }

 .btn-dark:hover {
 	background-color: #2a2a3a;
 }

 /* 主图展示 */
 .main-banner {
 	position: relative;
 	border-radius: 12px;
 	overflow: hidden;
 	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 	margin: 30px 0;
 }

 .main-banner img {
 	width: 100%;
 	display: block;
 }

 .banner-content {
 	position: absolute;
 	bottom: 0;
 	left: 0;
 	right: 0;
 	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
 	padding: 40px;
 	color: var(--white);
 }

 .banner-title {
 	font-size: 32px;
 	font-weight: 700;
 	margin-bottom: 15px;
 }

 .banner-desc {
 	font-size: 18px;
 	opacity: 0.9;
 	margin-bottom: 25px;
 	max-width: 600px;
 }

 /* 平台公告 */
 .announcement-section {
 	padding: 30px 0;
 	background-color: var(--white);
 }

 .announcement-container {
 	background-color: var(--light);
 	border-radius: 10px;
 	padding: 20px;
 	display: flex;
 	align-items: center;
 }

 .announcement-icon {
 	font-size: 24px;
 	color: var(--primary);
 	margin-right: 15px;
 }

 .announcement-content {
 	flex: 1;
 	overflow: hidden;
 }

 .announcement-title {
 	font-weight: 600;
 	margin-bottom: 5px;
 }

 .announcement-text {
 	color: var(--text-light);
 	font-size: 14px;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }

 .announcement-more {
 	color: var(--primary);
 	font-weight: 500;
 	margin-left: 15px;
 	white-space: nowrap;
 }

 /* 产品特色 */
 .features-section {
 	padding: 60px 0;
 	background-color: var(--light);
 }

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

 .section-title {
 	font-size: 32px;
 	font-weight: 700;
 	color: var(--dark);
 	margin-bottom: 15px;
 }

 .section-subtitle {
 	font-size: 16px;
 	color: var(--text-light);
 	max-width: 700px;
 	margin: 0 auto;
 }

 .features-grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 	gap: 30px;
 }

 .feature-card {
 	background: var(--white);
 	border-radius: 12px;
 	padding: 30px;
 	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
 	transition: all 0.3s;
 	text-align: center;
 }

 .feature-card:hover {
 	transform: translateY(-5px);
 	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 .feature-icon {
 	width: 60px;
 	height: 60px;
 	border-radius: 50%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	margin: 0 auto 20px;
 	background: linear-gradient(135deg, var(--primary), var(--secondary));
 	color: var(--white);
 	font-size: 24px;
 }

 .feature-title {
 	font-size: 20px;
 	font-weight: 600;
 	margin-bottom: 15px;
 }

 .feature-desc {
 	font-size: 15px;
 	color: var(--text-light);
 }

 /* 交易产品 */
 .products-section {
 	padding: 60px 0;
 	background-color: var(--white);
 }

 .products-tabs {
 	display: flex;
 	justify-content: center;
 	margin-bottom: 30px;
 	flex-wrap: wrap;
 }

 .product-tab {
 	padding: 10px 20px;
 	background: none;
 	border: none;
 	font-size: 16px;
 	font-weight: 600;
 	color: var(--text-light);
 	cursor: pointer;
 	position: relative;
 	transition: all 0.3s;
 }

 .product-tab.active {
 	color: var(--primary);
 }

 .product-tab.active::after {
 	content: '';
 	position: absolute;
 	bottom: 0;
 	left: 20px;
 	right: 20px;
 	height: 2px;
 	background: var(--primary);
 }

 .products-grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 	gap: 20px;
 }

 .product-card {
 	background: var(--light);
 	border-radius: 10px;
 	padding: 25px;
 	text-align: center;
 	transition: all 0.3s;
 }

 .product-card:hover {
 	transform: translateY(-5px);
 	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
 }

 .product-icon {
 	font-size: 40px;
 	color: var(--primary);
 	margin-bottom: 20px;
 }

 .product-title {
 	font-size: 18px;
 	font-weight: 600;
 	margin-bottom: 15px;
 }

 .product-desc {
 	font-size: 14px;
 	color: var(--text-light);
 	margin-bottom: 20px;
 }

 /* 新手引导 */
 .guide-section {
 	padding: 60px 0;
 	background: linear-gradient(135deg, rgba(39, 96, 234, 0.05) 0%, rgba(114, 46, 209, 0.05) 100%);
 }

 .guide-container {
 	display: flex;
 	align-items: center;
 }

 .guide-image {
 	flex: 1;
 	padding-right: 50px;
 }

 .guide-image img {
 	width: 100%;
 	border-radius: 12px;
 	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
 }

 .guide-content {
 	flex: 1;
 }

 .guide-title {
 	font-size: 28px;
 	font-weight: 700;
 	margin-bottom: 20px;
 }

 .guide-steps {
 	margin-top: 30px;
 }

 .guide-step {
 	display: flex;
 	margin-bottom: 25px;
 }

 .step-number {
 	width: 36px;
 	height: 36px;
 	border-radius: 50%;
 	background: linear-gradient(135deg, var(--primary), var(--secondary));
 	color: var(--white);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	font-weight: 700;
 	margin-right: 15px;
 	flex-shrink: 0;
 }

 .step-content h4 {
 	font-size: 18px;
 	margin-bottom: 8px;
 }

 .step-content p {
 	font-size: 14px;
 	color: var(--text-light);
 }

 /* 底部 */
 .footer-section {
 	background-color: var(--dark-bg);
 	color: var(--white);
 	padding: 60px 0 30px;
 }

 .footer-grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 	gap: 40px;
 	margin-bottom: 50px;
 }

 .footer-brand {
 	margin-bottom: 25px;
 }

 .footer-logo {
 	display: flex;
 	align-items: center;
 	margin-bottom: 15px;
 }

 .footer-logo img {
 	height: 36px;
 	margin-right: 10px;
 }

 .footer-logo-text {
 	font-size: 20px;
 	font-weight: 700;
 	color: var(--white);
 }

 .footer-about {
 	color: rgba(255, 255, 255, 0.7);
 	font-size: 14px;
 	line-height: 1.7;
 	margin-bottom: 20px;
 }

 .footer-social {
 	display: flex;
 }

 .social-icon {
 	width: 36px;
 	height: 36px;
 	border-radius: 50%;
 	background: rgba(255, 255, 255, 0.1);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	margin-right: 10px;
 	color: var(--white);
 	transition: all 0.3s;
 }

 .social-icon:hover {
 	background: var(--primary);
 	transform: translateY(-3px);
 }

 .footer-column h3 {
 	font-size: 18px;
 	margin-bottom: 25px;
 	position: relative;
 	padding-bottom: 10px;
 	color: var(--white);
 }

 .footer-column h3::after {
 	content: '';
 	position: absolute;
 	left: 0;
 	bottom: 0;
 	width: 40px;
 	height: 2px;
 	background: var(--primary);
 }

 .footer-links {
 	list-style: none;
 }

 .footer-links li {
 	margin-bottom: 12px;
 }

 .footer-links a {
 	color: rgba(255, 255, 255, 0.7);
 	text-decoration: none;
 	font-size: 14px;
 	transition: color 0.3s;
 }

 .footer-links a:hover {
 	color: var(--white);
 }

 .footer-bottom {
 	text-align: center;
 	padding-top: 30px;
 	border-top: 1px solid rgba(255, 255, 255, 0.1);
 	color: rgba(255, 255, 255, 0.5);
 	font-size: 14px;
 }

 /* 响应式设计 */
 @media (max-width: 1200px) {
 	.guide-container {
 		flex-direction: column;
 	}

 	.guide-image {
 		padding-right: 0;
 		margin-bottom: 40px;
 	}

 	.banner-title {
 		font-size: 28px;
 	}

 	.banner-desc {
 		font-size: 16px;
 	}
 }

 @media (max-width: 992px) {
 	.section-title {
 		font-size: 28px;
 	}

 	.feature-card {
 		padding: 25px 20px;
 	}

 	.banner-content {
 		padding: 30px;
 	}
 }

 @media (max-width: 768px) {
 	.menu-toggle {
 		display: flex;
 	}

 	.main-nav {
 		position: fixed;
 		top: 0;
 		right: -100%;
 		width: 80%;
 		max-width: 300px;
 		height: 100vh;
 		background: var(--white);
 		flex-direction: column;
 		align-items: flex-start;
 		padding: 80px 30px 30px;
 		transition: right 0.3s;
 		box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
 	}

 	.main-nav.active {
 		right: 0;
 	}

 	.nav-items {
 		flex-direction: column;
 		width: 100%;
 		margin-bottom: 30px;
 	}

 	.nav-items li {
 		margin: 0 0 20px 0;
 	}

 	.nav-actions {
 		flex-direction: column;
 		margin-left: 0;
 		width: 100%;
 	}

 	.btn-outline {
 		margin-left: 0;
 		margin-top: 15px;
 	}

 	.banner-title {
 		font-size: 24px;
 	}

 	.banner-desc {
 		font-size: 14px;
 		margin-bottom: 15px;
 	}

 	.banner-content {
 		padding: 20px;
 	}

 	.announcement-container {
 		flex-direction: column;
 		text-align: center;
 	}

 	.announcement-icon {
 		margin-right: 0;
 		margin-bottom: 15px;
 	}

 	.announcement-more {
 		margin-left: 0;
 		margin-top: 15px;
 	}

 	.products-tabs {
 		justify-content: flex-start;
 		overflow-x: auto;
 		padding-bottom: 10px;
 		-webkit-overflow-scrolling: touch;
 	}

 	.product-tab {
 		white-space: nowrap;
 	}
 }

 @media (max-width: 576px) {
 	.section-title {
 		font-size: 26px;
 	}

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

 	.features-grid {
 		grid-template-columns: 1fr;
 	}

 	.products-grid {
 		grid-template-columns: 1fr;
 	}

 	.footer-grid {
 		grid-template-columns: 1fr;
 		gap: 30px;
 	}

 	.footer-about {
 		font-size: 13px;
 	}

 	.footer-links a {
 		font-size: 13px;
 	}

 	.footer-bottom {
 		font-size: 12px;
 	}

 	.banner-title {
 		font-size: 20px;
 	}
 }

 @media (max-width: 400px) {
 	.brand-name {
 		font-size: 18px;
 	}

 	.brand-logo {
 		height: 32px;
 	}

 	.guide-title {
 		font-size: 24px;
 	}

 	.banner-content {
 		padding: 15px;
 	}
 }