/**
 * yzmcms.com
 * 微聊
 */
:root{--primary-color:#0088ff;--secondary-color:#00c6ff;--dark-color:#1a1a2e;--light-color:#f8f9fa;--success-color:#28a745;--danger-color:#dc3545;--warning-color:#fd7e14;--info-color:#17a2b8;}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI', 'Microsoft YaHei', sans-serif;}
a{text-decoration:none;}
body{background-color:#f5f7fa;color:#333;line-height:1.6;overflow-x:hidden;}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}
/* 导航栏*/
header{background:#121212;color:white;padding:15px 0;position:fixed;width:100%;top:0;z-index:1000;box-shadow:0 4px 12px rgba(0, 0, 0, 0.1);}
.navbar{display:flex;justify-content:space-between;align-items:center;}
.logo{display:flex;align-items:center;font-size:24px;font-weight:bold;color: #fff;}
.logo i{margin-right:10px;font-size:28px;}
.nav-links{display:flex;list-style:none;}
.nav-links li{margin-left:30px;}
.nav-links a{color:white;font-weight:500;transition:all 0.3s ease;position:relative;}
.nav-links a:hover{opacity:0.8;}
.nav-links a::after{content:'';position:absolute;width:0;height:2px;background:white;bottom:-5px;left:0;transition:width 0.3s ease;}
.nav-links a:hover::after{width:100%;}
.mobile-menu-btn{display:none;background:none;border:none;color:white;font-size:24px;cursor:pointer;}
/* 英雄区域*/
.hero{padding:180px 0 100px;background:linear-gradient(135deg, #f0f3f7 0%, #2496ec 100%);position:relative;overflow:hidden;}
.hero-content{display:flex;align-items:center;justify-content:space-between;}
.hero-text{flex:1;padding-right:50px;}
.hero-text h1{font-size:48px;margin-bottom:20px;color:var(--dark-color);line-height:1.2;}
.hero-text p{font-size:18px;color:#555;margin-bottom:30px;max-width:600px;}
.btn{display:inline-block;padding:12px 30px;background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));color:white;border-radius:30px;font-weight:600;transition:all 0.3s ease;border:none;cursor:pointer;box-shadow:0 4px 15px rgba(0, 136, 255, 0.3);}
.btn:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0, 136, 255, 0.4);}
.btn-outline{background:transparent;border:2px solid var(--primary-color);color:var(--primary-color);margin-left:15px;box-shadow:none;}
.btn-outline:hover{background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));color:white;}
.hero-image{flex:1;position:relative;height:500px;}
.app-screen{position:absolute;width:280px;border-radius:4px;box-shadow:0 20px 40px rgba(0, 0, 0, 0.2);transition:all 0.5s ease;z-index:2;}
.screen-1{top:0;left:72%;transform:translateX(-50%);z-index:3;}
.screen-2{top:30px;left:30%;transform:rotate(-10deg);z-index:2;opacity:0.9;}
.screen-3{top:30px;left:60%;transform:rotate(10deg);z-index:2;opacity:0.9;}
.hero-image:hover .screen-1{transform:translateX(-50%) scale(1.05);}
.hero-image:hover .screen-2{transform:rotate(-15deg) translateY(-10px);}
.hero-image:hover .screen-3{transform:rotate(15deg) translateY(-10px);}
/* 功能特点*/
.features{padding:100px 0;background-color:white;}
.section-title{text-align:center;margin-bottom:60px;}
.section-title h2{font-size:36px;color:var(--dark-color);margin-bottom:15px;position:relative;display:inline-block;}
.section-title h2::after{content:'';position:absolute;width:60%;height:3px;background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));bottom:-10px;left:20%;}
.section-title p{color:#666;max-width:700px;margin:0 auto;}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:30px;}
.feature-card{background:white;border-radius:10px;padding:30px;box-shadow:0 10px 30px rgba(0, 0, 0, 0.05);transition:all 0.3s ease;text-align:center;border:1px solid #eee;}
.feature-card:hover{transform:translateY(-10px);box-shadow:0 15px 40px rgba(0, 0, 0, 0.1);border-color:var(--primary-color);}
.feature-icon{width:80px;height:80px;margin:0 auto 20px;background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:32px;}
.feature-card h3{font-size:22px;margin-bottom:15px;color:var(--dark-color);}
.feature-card p{color:#666;}
/* 平台支持*/
.platforms{padding:80px 0;background:linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);}
.platforms-grid{display:flex;justify-content:center;flex-wrap:wrap;gap:30px;margin-top:40px;}
.platform-card{background:white;border-radius:10px;padding:30px;width:200px;text-align:center;box-shadow:0 10px 30px rgba(0, 0, 0, 0.05);transition:all 0.3s ease;}
.platform-card:hover{transform:translateY(-10px);box-shadow:0 15px 40px rgba(0, 0, 0, 0.1);}
.platform-icon{font-size:50px;margin-bottom:20px;color:var(--primary-color);}
.platform-card h3{font-size:20px;margin-bottom:10px;color:var(--dark-color);}
/* 下载区域*/
.download{padding:100px 0;background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));color:white;text-align:center;}
.download h2{font-size:36px;margin-bottom:20px;}
.download p{font-size:18px;max-width:700px;margin:0 auto 40px;opacity:0.9;}
.download-buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;}
.download-btn{display:flex;align-items:center;background:white;color:var(--primary-color);padding:15px 30px;border-radius:8px;font-weight:600;transition:all 0.3s ease;}
.download-btn:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(0, 0, 0, 0.2);}
.download-btn i{font-size:24px;margin-right:10px;}
/* 页脚*/
footer{background-color:var(--dark-color);color:white;padding:60px 0 20px;}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:40px;margin-bottom:40px;}
.footer-column h3{font-size:20px;margin-bottom:20px;position:relative;display:inline-block;}
.footer-column h3::after{content:'';position:absolute;width:40px;height:2px;background:var(--primary-color);bottom:-8px;left:0;}
.footer-column ul{list-style:none;}
.footer-column ul li{margin-bottom:10px;}
.footer-column ul li a{color:#aaa;transition:all 0.3s ease;}
.footer-column ul li a:hover{color:white;padding-left:5px;}
.social-links{display:flex;gap:15px;margin-top:20px;}
.social-links a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:rgba(255, 255, 255, 0.1);border-radius:50%;color:white;transition:all 0.3s ease;}
.social-links a:hover{background:var(--primary-color);transform:translateY(-3px);}
.copyright{text-align:center;padding-top:20px;border-top:1px solid rgba(255, 255, 255, 0.1);color:#aaa;font-size:14px;}
/* 响应式设计*/
@media (max-width:992px){
	.hero-content{flex-direction:column;text-align:center;}
	.hero-text{padding-right:0;margin-bottom:50px;}
	.hero-image{width:100%;}
	.screen-1, .screen-2, .screen-3{position:relative;transform:none !important;left:auto !important;top:auto !important;margin:0 auto 20px;opacity:1 !important;}
	.hero-image:hover .screen-1, .hero-image:hover .screen-2, .hero-image:hover .screen-3{transform:none !important;}} @media (max-width:768px){.nav-links{position:fixed;top:70px;left:-100%;width:100%;background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));flex-direction:column;align-items:center;padding:20px 0;transition:all 0.5s ease;height:auto;}
	.nav-links.active{left:0;}
	.nav-links li{margin:15px 0;}
	.mobile-menu-btn{display:block;}
	.hero-text h1{font-size:36px;}
	.section-title h2{font-size:30px;}
	.btn-outline{margin-left:0;margin-top:15px;}} @media (max-width:576px){.hero{padding:150px 0 80px;}
	.hero-text h1{font-size:30px;}
	.download-buttons{flex-direction:column;align-items:center;}
	.download-btn{width:100%;max-width:250px;justify-content:center;}
}
/* 动画效果*/
/* @keyframes float{0%, 100%{transform:translateY(0);}
50%{transform:translateY(-10px);}} .floating{animation:float 3s ease-in-out infinite;}
.delay-1{animation-delay:0.5s;}
.delay-2{animation-delay:1s;}*/

/*下载页面*/
.download-platforms{padding:60px 0;}
.platform-section{background:white;border-radius:10px;padding:40px;margin-bottom:30px;box-shadow:0 10px 30px rgba(0, 0, 0, 0.05);}
.platform-header{display:flex;align-items:center;margin-bottom:30px;}
.platform-header i{font-size:40px;margin-right:20px;color:var(--primary-color);}
.platform-header h2{font-size:28px;color:var(--dark-color);}
.download-options{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:20px;}
.download-option{background:#f8f9fa;border-radius:8px;padding:25px;transition:all 0.3s ease;border:1px solid #eee;}
.download-option:hover{border-color:var(--primary-color);transform:translateY(-5px);box-shadow:0 10px 25px rgba(0, 0, 0, 0.1);}
.download-option h3{font-size:20px;margin-bottom:15px;color:var(--dark-color);}
.download-option p{color:#666;margin-bottom:20px;font-size:14px;}
.download-option .btn{display:block;text-align:center;margin-top:15px;}
.version-info{margin-top:10px;font-size:12px;color:#999;}