/* 全局样式 */
 :root {
 	--primary-color: #2563eb;
 	--secondary-color: #3b82f6;
 	--text-color: #1f2937;
 	--light-text: #6b7280;
 	--background: #ffffff;
 	--section-bg: #f3f4f6;
 	--transition: all 0.3s ease;
 }

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

 html {
 	scroll-behavior: smooth;
 }

 body {
 	font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 	line-height: 1.6;
 	color: var(--text-color);
 }

 .container {
 	max-width: 1200px;
 	margin: 0 auto;
 	padding: 0 20px;
 }

 /* 导航栏样式 */
 .navbar {
 	position: fixed;
 	top: 0;
 	left: 0;
 	width: 100%;
 	background: rgba(255, 255, 255, 0.95);
 	backdrop-filter: blur(10px);
 	z-index: 1000;
 	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }

 .nav-content {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	height: 70px;
 	padding: 0 30px;
 }

 .logo a {
 	font-size: 24px;
 	font-weight: bold;
 	color: var(--primary-color);
 	text-decoration: none;
 }

 .nav-links {
 	display: flex;
 	list-style: none;
 	gap: 30px;
 }

 .nav-links a {
 	text-decoration: none;
 	color: var(--text-color);
 	font-weight: 500;
 	transition: var(--transition);
 }

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

 .menu-btn {
 	display: none;
 	cursor: pointer;
 }

 /* 移动端导航样式 */
 @media (max-width: 768px) {
 	.menu-btn {
 		display: block;
 		font-size: 24px;
 	}

 	.nav-links {
 		position: absolute;
 		top: 70px;
 		left: 0;
 		width: 100%;
 		background: #fff;
 		flex-direction: column;
 		gap: 0;
 		height: 0;
 		overflow: hidden;
 		transition: height 0.3s ease;
 	}

 	.nav-links.active {
 		height: 200px;
 		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 	}

 	.nav-links li {
 		width: 100%;
 	}

 	.nav-links a {
 		display: block;
 		padding: 15px 30px;
 		text-align: center;
 		border-bottom: 1px solid #eee;
 	}

 	.nav-links li:last-child a {
 		border-bottom: none;
 	}
 }

 /* 移除冲突的响应式样式 */
 @media (max-width: 768px) {
 	.nav-links {
 		display: flex;
 		flex-direction: column;
 	}
 }

 /* 英雄区域样式 */
 .hero {
 	height: 100vh;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	text-align: center;
 	padding: 0 20px;
 	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
 }

 .hero-content {
 	max-width: 800px;
 }

 .hero h1 {
 	font-size: 3.5rem;
 	margin-bottom: 20px;
 	opacity: 0;
 	transform: translateY(20px);
 	animation: fadeInUp 0.8s forwards;
 }

 .hero p {
 	font-size: 1.5rem;
 	color: var(--light-text);
 	margin-bottom: 30px;
 	opacity: 0;
 	transform: translateY(20px);
 	animation: fadeInUp 0.8s 0.2s forwards;
 }

 .highlight {
 	color: var(--primary-color);
 }

 /* 按钮样式 */
 .btn {
 	display: inline-block;
 	padding: 12px 30px;
 	border-radius: 25px;
 	text-decoration: none;
 	font-weight: 500;
 	transition: var(--transition);
 	margin: 10px;
 }

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

 .btn.secondary {
 	background: transparent;
 	border: 2px solid var(--primary-color);
 	color: var(--primary-color);
 }

 .btn:hover {
 	transform: translateY(-2px);
 	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }

 /* 滚动指示器 */
 .scroll-indicator {
 	position: absolute;
 	bottom: 30px;
 	left: 50%;
 	transform: translateX(-50%);
 }

 .mouse {
 	width: 30px;
 	height: 50px;
 	border: 2px solid var(--text-color);
 	border-radius: 15px;
 	position: relative;
 }

 .mouse::before {
 	content: '';
 	position: absolute;
 	width: 4px;
 	height: 8px;
 	background: var(--text-color);
 	left: 50%;
 	transform: translateX(-50%);
 	top: 8px;
 	border-radius: 2px;
 	animation: scroll 2s infinite;
 }

 /* 关于部分样式 */
 .about {
 	padding: 100px 0;
 	background: var(--section-bg);
 }

 .section-title {
 	text-align: center;
 	font-size: 2.5rem;
 	margin-bottom: 50px;
 }

 .about-content {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
 	gap: 50px;
 	align-items: center;
 	max-width: 1200px;
 	margin: 0 auto;
 	padding: 0 20px;
 }

 .about-text p {
 	margin-bottom: 20px;
 	color: var(--light-text);
 	line-height: 1.8;
 }

 .about-stats {
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
 	gap: 20px;
 	margin-top: 30px;
 }

 .stat-item {
 	text-align: center;
 	padding: 20px;
 	background: white;
 	border-radius: 10px;
 	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 	transition: var(--transition);
 }

 .stat-item:hover {
 	transform: translateY(-5px);
 }

 .stat-item .number {
 	font-size: 2rem;
 	font-weight: bold;
 	color: var(--primary-color);
 	display: block;
 }

 /* 技能部分样式 */
 .skills {
 	padding: 100px 0;
 }

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

 .skill-card {
 	padding: 30px;
 	background: white;
 	border-radius: 15px;
 	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 	transition: var(--transition);
 }

 .skill-card:hover {
 	transform: translateY(-5px);
 }

 .skill-card i {
 	font-size: 2.5rem;
 	color: var(--primary-color);
 	margin-bottom: 20px;
 }

 .skill-bar {
 	height: 6px;
 	background: #e5e7eb;
 	border-radius: 3px;
 	margin-top: 15px;
 	overflow: hidden;
 }

 .skill-progress {
 	height: 100%;
 	background: var(--primary-color);
 	width: 0;
 	transition: width 1.5s ease-in-out;
 }

 .skill-progress.animate {
 	width: var(--progress);
 }

 /* 项目部分样式 */
 .projects {
 	padding: 100px 0;
 	background: var(--section-bg);
 }

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

 .project-card {
 	background: white;
 	border-radius: 15px;
 	overflow: hidden;
 	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 	transition: var(--transition);
 }

 .project-card:hover {
 	transform: translateY(-5px);
 }

 .project-info {
 	padding: 20px;
 }

 .project-info h3 {
 	margin-bottom: 10px;
 	color: var(--text-color);
 }

 .project-info p {
 	color: var(--light-text);
 	margin-bottom: 15px;
 }

 .project-tags {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 8px;
 	margin-bottom: 15px;
 }

 .tag {
 	padding: 4px 12px;
 	background-color: var(--section-bg);
 	color: var(--primary-color);
 	border-radius: 15px;
 	font-size: 0.85rem;
 	font-weight: 500;
 }

 .project-image {
 	position: relative;
 	overflow: hidden;
 }

 .project-image img {
 	width: 100%;
 	height: 220px;
 	object-fit: cover;
 	transition: transform 0.3s ease;
 }

 .project-card:hover .project-image img {
 	transform: scale(1.05);
 }

 /* 联系部分样式 */
 .contact {
 	padding: 100px 0;
 	background: var(--background);
 }

 .contact-content {
 	display: grid;
 	grid-template-columns: 1fr 2fr;
 	gap: 50px;
 	max-width: 1200px;
 	margin: 0 auto;
 	padding: 0 20px;
 }

 .contact-form {
 	background: white;
 	padding: 30px;
 	border-radius: 15px;
 	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 	display: grid;
 	gap: 20px;
 }

 .form-group {
 	display: grid;
 	gap: 10px;
 }

 .form-group label {
 	font-weight: 500;
 	color: var(--text-color);
 }

 .form-group input,
 .form-group textarea {
 	width: 100%;
 	padding: 12px 15px;
 	border: 1px solid #e5e7eb;
 	border-radius: 8px;
 	font-size: 1rem;
 	transition: all 0.3s ease;
 }

 .form-group input:focus,
 .form-group textarea:focus {
 	outline: none;
 	border-color: var(--primary-color);
 	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
 }

 .form-group textarea {
 	height: 150px;
 	resize: none;
 }

 .contact-info {
 	background: white;
 	padding: 30px;
 	border-radius: 15px;
 	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 	display: flex;
 	flex-direction: column;
 	gap: 20px;
 }

 .info-item {
 	display: flex;
 	align-items: center;
 	gap: 15px;
 	padding: 10px 0;
 }

 .info-item i {
 	font-size: 1.5rem;
 	color: var(--primary-color);
 	width: 40px;
 	height: 40px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	background: rgba(37, 99, 235, 0.1);
 	border-radius: 50%;
 }

 .info-item .info-text {
 	flex: 1;
 }

 .info-item .info-text h4 {
 	font-weight: 600;
 	margin-bottom: 5px;
 	color: var(--text-color);
 }

 .info-item .info-text p {
 	color: var(--light-text);
 }

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

 .social-links {
 	display: flex;
 	justify-content: center;
 	gap: 20px;
 	margin-bottom: 20px;
 }

 .social-links a {
 	color: white;
 	font-size: 1.5rem;
 	transition: var(--transition);
 }

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

 /* 动画 */
 @keyframes fadeInUp {
 	to {
 		opacity: 1;
 		transform: translateY(0);
 	}
 }

 @keyframes scroll {
 	0% {
 		transform: translate(-50%, 0);
 		opacity: 1;
 	}

 	100% {
 		transform: translate(-50%, 15px);
 		opacity: 0;
 	}
 }

 /* 响应式设计 */
 @media (max-width: 768px) {
 	.about-content {
 		grid-template-columns: 1fr;
 		gap: 30px;
 		padding: 0 20px;
 	}

 	.about-stats {
 		grid-template-columns: repeat(2, 1fr);
 		margin-top: 20px;
 	}

 	.contact-content {
 		grid-template-columns: 1fr;
 		gap: 30px;
 		padding: 0 20px;
 	}

 	.contact-info,
 	.contact-form {
 		padding: 20px;
 	}

 	.info-item {
 		padding: 8px 0;
 	}
 }

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

 	.stat-item {
 		padding: 15px;
 	}

 	.section-title {
 		font-size: 2rem;
 		margin-bottom: 30px;
 	}
 }

 /* 返回顶部按钮样式 */
 #back-to-top {
 	position: fixed;
 	bottom: 30px;
 	right: 30px;
 	width: 40px;
 	height: 40px;
 	background-color: var(--primary-color);
 	color: white;
 	border-radius: 50%;
 	text-align: center;
 	line-height: 40px;
 	cursor: pointer;
 	display: none;
 	z-index: 999;
 	transition: var(--transition);
 	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 }

 #back-to-top:hover {
 	background-color: var(--secondary-color);
 	transform: translateY(-3px);
 }

 #back-to-top i {
 	font-size: 20px;
 }