:root {
				--bg-color: #ffffff;
				--text-color: #1d1d1f;
				--primary-color: #0071e3;
				--secondary-color: #86868b;
				--accent-color: #f5f5f7;
				--card-bg: #fbfbfd;
				--shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
				--transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
			}

			.dark-mode {
				--bg-color: #1d1d1f;
				--text-color: #f5f5f7;
				--primary-color: #2997ff;
				--secondary-color: #a1a1a6;
				--accent-color: #2c2c2e;
				--card-bg: #2c2c2e;
				--shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
			}

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

			body {
				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
				background-color: var(--bg-color);
				color: var(--text-color);
				line-height: 1.5;
				transition: var(--transition);
				overflow-x: hidden;
			}

			/* 头部样式 */
			header {
				position: sticky;
				top: 0;
				z-index: 100;
				background-color: rgba(var(--bg-color), 0.8);
				backdrop-filter: blur(20px);
				-webkit-backdrop-filter: blur(20px);
				padding: 0 22px;
				height: 44px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid rgba(var(--text-color), 0.1);
				transition: var(--transition);
			}

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

			.nav-links li {
				margin: 0 15px;
			}

			.nav-links a {
				text-decoration: none;
				color: var(--text-color);
				font-size: 12px;
				font-weight: 400;
				opacity: 0.8;
				transition: opacity 0.3s;
			}

			.nav-links a:hover {
				opacity: 1;
			}

			/* 主题切换按钮 */
			.theme-toggle {
				background: none;
				border: none;
				color: var(--text-color);
				cursor: pointer;
				font-size: 16px;
				padding: 5px;
				opacity: 0.7;
				transition: opacity 0.3s;
			}

			.theme-toggle:hover {
				opacity: 1;
			}

			/* 英雄区域 */
			.hero {
				min-height: 80vh;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text-align: center;
				padding: 0 22px;
				position: relative;
				overflow: hidden;
			}

			.hero h1 {
				font-size: 45px;
				font-weight: 600;
				margin: 50px 0 20px 0;
				background: linear-gradient(45deg, var(--primary-color), #34c759);
				-webkit-background-clip: text;
				background-clip: text;
				color: transparent;
				animation: fadeInUp 1s ease-out;
			}

			.hero .hero-p{
				font-size: 20px;
				max-width: 800px;
				margin-bottom: 20px;
				opacity: 0;
				animation: fadeInUp 1s ease-out 0.3s forwards;
				padding: 10px;
			}
			.hero-p p{
			    display: block;
			    font-size: 20px;
				width: 100%;
				margin-bottom: 20px;
				opacity: 0;
				animation: fadeInUp 1s ease-out 0.3s forwards;
				text-align: left;
				letter-spacing: 0.02em;
                line-height: 1.6;
			}
			.hero-p1{
                width: 100vw;
                text-align: right;
                font-size: 20px;
                padding: 0.5rem 5rem 5rem 0;
                animation: fadeInUp 1s ease-out 0.3s forwards;
				letter-spacing: 0.02em;
                line-height: 1.6;
                box-sizing: border-box;
			}
			.hero .cta {
				display: inline-block;
				background-color: var(--primary-color);
				color: white;
				padding: 12px 22px;
				border-radius: 30px;
				text-decoration: none;
				font-size: 17px;
				font-weight: 500;
				margin-top: 20px;
				transition: transform 0.3s, background-color 0.3s;
				opacity: 0;
				animation: fadeInUp 1s ease-out 0.6s forwards;
			}

			.hero .cta:hover {
				transform: scale(1.05);
				background-color: #0077ed;
			}

			/* 特性部分 */
			.features {
				padding: 100px 22px;
				max-width: 1200px;
				margin: 0 auto;
			}

			.features h2 {
				font-size: 40px;
				font-weight: 600;
				text-align: center;
				margin-bottom: 60px;
			}

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

			.feature-card {
				background-color: var(--card-bg);
				border-radius: 18px;
				padding: 30px;
				box-shadow: var(--shadow);
				transition: var(--transition);
				opacity: 0;
				transform: translateY(20px);
				
			}

			.feature-card.visible {
				opacity: 1;
				transform: translateY(0);
			}

			.feature-card:hover {
				transform: translateY(-5px);
				transform: scale(1.1);
			}

			.feature-card::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(45deg, rgba(110, 142, 251, 0.2), rgba(167, 119, 227, 0.2));
				opacity: 0;
				transition: opacity 0.5s ease;
				border-radius: 10px;
				z-index: 1;

			}

			.feature-card:hover::before {
				opacity: 1;
			}

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

			.feature-card h3 {
				font-size: 24px;
				margin-bottom: 15px;
				font-weight: 600;
			}

			.feature-card p {
				color: var(--secondary-color);
				font-size: 17px;
			}

			/* 页脚 */
			footer {
				background-color: var(--accent-color);
				padding: 40px 22px;
				text-align: center;
			}

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

			.footer-links a,
			.footer-links span {
				color: var(--secondary-color);
				text-decoration: none;
				margin: 0 15px;
				font-size: 12px;
				transition: color 0.3s;
			}

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

			.copyright {
				color: var(--secondary-color);
				font-size: 12px;
				margin-top: 20px;
			}

			/* 动画 */
			@keyframes fadeInUp {
				from {
					opacity: 0;
					transform: translateY(20px);
				}

				to {
					opacity: 1;
					transform: translateY(0);
				}
			}

			/* 响应式设计 */
			@media (max-width: 768px) {
				.hero h1 {
					font-size: 40px;
				}

				.hero p {
					font-size: 21px;
				}

				.features h2 {
					font-size: 32px;
				}

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

			/* 新增的底部区域样式 */
			.bottom-section {
				/*margin-top: 60px;*/
				text-align: center;
				padding: 40px 0;
				background-color: var(--card-bg);
				border-radius: 10px;
			}

			.image-container {
				position: relative;
				width: 20%;
				max-width: 360px;
				margin: 0 auto 40px;
				overflow: hidden;
				border-radius: 10px;
				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
			}

			.image-container img {
				width: 100%;
				display: block;
				/*text-align: center;*/
				transition: transform 0.5s ease;
				transform-origin: center center;
			}

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

			.image-container::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(45deg, rgba(110, 142, 251, 0.2), rgba(167, 119, 227, 0.2));
				opacity: 0;
				transition: opacity 0.5s ease;
				z-index: 1;
			}

			.image-container:hover::before {
				opacity: 1;
			}

			/* 客户评价区域 */
			.testimonials {
				margin-top: 50px;
				position: relative;
				height: 200px;
				perspective: 1000px;
			}

			.testimonial {
				position: absolute;
				width: 50%;
				padding: 20px;
				margin: 0 23%;
				background-color: var(--card-bg);
				border-radius: 10px;
				box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
				opacity: 0;
				transform-style: preserve-3d;
				transition: all 1s ease;
				backface-visibility: hidden;
			}

			.testimonial.active {
				opacity: 1;
				transform: rotateY(0deg);
			}

			.testimonial::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(45deg, rgba(110, 142, 251, 0.2), rgba(167, 119, 227, 0.2));
				opacity: 0;
				transition: opacity 0.5s ease;
				z-index: 1;
			}

			.testimonial:hover::before {
				opacity: 1;
			}


			.testimonial.next {
				transform: rotateY(180deg);
			}

			.testimonial.prev {
				transform: rotateY(-180deg);
			}

			.testimonial-content {
				font-style: italic;
				margin-bottom: 15px;
			}

			.testimonial-author {
				font-weight: bold;
				color: #6e8efb;
			}

			/* 动画效果 */
			@keyframes float {
				0% {
					transform: translateY(0px);
				}

				50% {
					transform: translateY(-15px);
				}

				100% {
					transform: translateY(0px);
				}
			}

			.floating {
				animation: float 3s ease-in-out infinite;
			}

			/*弹窗*/
			.trigger-btn {
				padding: 12px 24px;
				background-color: var(--card-bg);
				color: white;
				border: none;
				border-radius: 4px;
				font-size: 16px;
				cursor: pointer;
				margin: 20px;
				transition: all 0.3s;
			}

			.trigger-btn:hover {
				background: #3367d6;
				transform: translateY(-2px);
			}

			.privacy-overlay {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: var(--card-bg);
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 1000;
				opacity: 0;
				pointer-events: none;
				transition: opacity 0.3s;
			}

			.privacy-overlay.active {
				opacity: 1;
				pointer-events: all;
			}

			.privacy-container {
				width: 90%;
				max-width: 600px;
				max-height: 90vh;
				background-color: var(--card-bg);
				color: var(--text-color);
				border-radius: 12px;
				overflow: hidden;
				box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
				transform: scale(0.9);
				transition: transform 0.3s;
			}

			.privacy-overlay.active .privacy-container {
				transform: scale(1);
			}

			.privacy-header {
				padding: 16px 24px;
				background-color: var(--card-bg);
				border-bottom: 1px solid var(--card-bg);
				font-size: 18px;
				font-weight: bold;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.privacy-content {
				padding: 24px;
				overflow-y: auto;
				max-height: 60vh;
				line-height: 1.6;
			}

			.privacy-content h3 {
				text-align: left;
				margin-bottom: 1vh;
			}

			.privacy-footer {
				padding: 16px 24px;
				background-color: var(--card-bg);
				border-top: 1px solid var(--card-bg);
				display: flex;
				justify-content: flex-end;
				gap: 12px;
			}

			.privacy-btn {
				padding: 8px 16px;
				border-radius: 4px;
				cursor: pointer;
				font-size: 14px;
				transition: all 0.2s;
			}

			.privacy-btn.cancel {
				background: #f1f3f4;
				color: #5f6368;
			}

			.privacy-btn.cancel:hover {
				background: #e8eaed;
			}

			.privacy-btn.agree {
				background: #1a73e8;
				color: white;
			}

			.privacy-btn.agree:hover {
				background: #1765cc;
			}

			@media (max-width: 480px) {
				.privacy-container {
					width: 95%;
				}

				.privacy-footer {
					flex-direction: column;
				}
			}

			/*弹窗*/

			.counter-container {
				background-color: var(--card-bg);
				font-family: 'Arial Black', sans-serif;
				text-align: center;
				padding: 50px 0;
				perspective: 1000px;
			}

			.counter-text {
				font-size: 24px;
				color: var(--text-color);
				padding-bottom: 15px;
				/*margin-bottom: 15px;*/
			}

			.counter-number {
				display: inline-block;
				font-size: 72px;
				font-weight: 900;
				color: #ff4d4d;
				text-shadow: 0 5px 15px rgba(255, 77, 77, 0.3);
				transform-style: preserve-3d;
				animation: bounce 1.5s infinite alternate;
			}

			@keyframes bounce {
				0% {
					transform: translateY(0) rotateX(0);
				}

				100% {
					transform: translateY(-20px) rotateX(20deg);
				}
			}

			.plus-sign {
				font-size: 60px;
				vertical-align: top;
				color: #ff4d4d;
				animation: pulse 2s infinite;
			}

			@keyframes pulse {
				0% {
					opacity: 0.7;
				}

				50% {
					opacity: 1;
				}

				100% {
					opacity: 0.7;
				}
			}

			.highlight-text {
				display: inline-block;
				font-size: 36px;
				background: linear-gradient(45deg, #ff4d4d, #ff9966);
				-webkit-background-clip: text;
				background-clip: text;
				color: transparent;
				padding: 0 10px;
				animation: shine 3s infinite;
			}

			@keyframes shine {
				0% {
					filter: brightness(1);
				}

				50% {
					filter: brightness(1.3);
				}

				100% {
					filter: brightness(1);
				}
			}
			
			
			.gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .feature-icon {
            width: 70px;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin: 0 auto 1rem;
        }
        .bg-white,.bg-gray-50,.bg-gray-100,.to-indigo-50{
            background-color: var(--card-bg) !important;
			color: var(--text-color) !important;
        }
        .text-gray-800{
            color: #00409a !important;
        }