/* 全局样式 */
*{margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft YaHei",sans-serif}
img{max-width:100%;display:block} /* 修复：移动端图片100%宽度 */
a{text-decoration:none;color:inherit}
ul{list-style:none}

/* 基础容器适配 - 移除固定宽度限制 */
body{min-width:unset;overflow-x:hidden;} /* 取消最小宽度，防止移动端横向滚动 */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 15px}



/* 顶部导航（固定顶部） */
.header{background:#ffffff;padding:12px 0;border-bottom:1px solid #eee;position:fixed;top:0;left:0;right:0;z-index:999;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 16%), 0 1px 3px 0 rgb(0 0 0 / 12%)}
.header .container{display:flex;justify-content:space-between;align-items:center}
.logo{font-size:18px;font-weight:bold;color:#333}
.nav{display:flex;gap:15px; /* 移动端缩小间距 */overflow-x:auto;padding-bottom:5px;} /* 导航横向滚动 */
.nav a{font-size:16px;color:#666;padding:8px 0;position:relative;transition:color 0.3s;white-space:nowrap;} /* 禁止文字换行 */
.nav a.active{color:#0066cc;font-weight:500}
.nav a.active::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:#0066cc}

/* 下载主区域 */
.download-main{padding:40px 0;background:#fff;margin:20px auto;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,0.05)}
.download-wrap{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap;margin-top: 56px;}

/* 二维码区域 */
.qrcode-box{text-align:center}
.qrcode-img{width:200px;height:200px;margin:0 auto 15px;border:1px solid #eee;padding:10px;background:#fff}
.qrcode-box p{font-size:14px;color:#666;margin-bottom:8px}
.qrcode-box .tips{font-size:12px;color:#999}

/* 下载按钮区域 */
.download-btn-box{text-align:center}
.download-title{margin-bottom:30px}
.download-title h2{font-size:24px;color:#333;margin-bottom:8px}
.download-title p{font-size:14px;color:#999}

/* 下载按钮样式 */
.download-btns{display:flex;flex-direction:column;gap:15px}
.download-btn{display:flex;align-items:center;justify-content:center;gap:15px;width:260px;height:55px;border-radius:30px;background:#ff6685;color:#fff;font-size:16px;cursor:pointer;transition:all 0.3s}
.download-btn:hover{background:#ff4a70;transform:translateY(-2px)}
.download-btn .icon{font-size:24px}
.download-btn.android{background:#4cd964}
.download-btn.android:hover{background:#34c759}
.download-btn.windows{background:#0078d7}
.download-btn.windows:hover{background:#0067b8}




/* 页脚 */
.footer{background:#fff;padding:20px 0;border-top:1px solid #eee;margin-top:30px}
.footer-grid{display:grid;grid-template-columns:1fr;gap:15px;margin-bottom:15px}
.footer-col h4{font-size:14px;color:#333;margin-bottom:10px}
.footer-col li{font-size:12px;color:#999;margin-bottom:6px;line-height:1.5}
.copyright{text-align:center;font-size:11px;color:#999;padding-top:15px;border-top:1px solid #eee}

/* 移动端隐藏二维码区域（767px及以下为手机端） */
@media (max-width: 767px) {
  .qrcode-box {
    display: none !important; /* !important 确保优先级最高 */
  }

  .download-btns {
    margin: 0 auto;
  }
}

/* 桌面端恢复多列 */
@media (min-width: 768px) {
  .nav{gap:30px;}
  .nav a{font-size:15px;}
  .features-grid{grid-template-columns:repeat(4,1fr);gap:25px}
  .footer-grid{grid-template-columns:repeat(4,1fr);gap:20px}
}


.container {
            width: 100%;
            max-width: 1400px; /* 扩大容器最大宽度，给居中留空间 */
            margin: 0 auto;
             /* padding: 0 20px; */
        }

        /* 功能模块 - 基础布局（核心优化：限制宽度+居中） */
        .feature-section {
            display: flex;
            align-items: center;
            justify-content: center; /* 改为居中对齐，而非两端对齐 */
            gap: 60px; /* 加大文字和图片间距，更舒展 */
            /* margin: 80px 0; */
            max-width: 1000px; /* 限制模块最大宽度，实现居中效果 */
            margin-left: auto;
            margin-right: auto; /* 模块整体水平居中 */
        }

        /* 文字区域样式 */
        .feature-content {
            flex: 0 0 45%; /* 固定宽度占比，避免内容过宽 */
            text-align: left;
        }
        /* 图片区域样式 */
        .feature-img-wrap {
            flex: 0 0 45%; /* 固定宽度占比，和文字区域对称 */
        }
        .feature-title {
            font-size: 36px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #222;
        }
        .feature-desc {
            font-size: 18px;
            color: #666;
            margin-bottom: 25px;
            line-height: 1.8;
        }
        .detail-link {
            font-size: 18px;
            color: #409eff;
            text-decoration: none;
            display: inline-block;
            margin-bottom: 0;
            transition: color 0.3s;
        }
        .detail-link:hover {
            color: #267fff;
        }
        .feature-img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }

        /* 偶数模块反向布局 */
        .feature-section.reverse {
            flex-direction: row-reverse;
        }
        .feature-section.reverse .feature-content {
            text-align: right;
        }

        /* ====================== 手机端修复（重点） ====================== */
        @media (max-width: 768px) {
        /*
            body {
                overflow-x: hidden;
            }
            .container {
                padding: 0 15px !important;
                width: 100% !important;
                max-width: 100% !important;
                overflow: hidden;
            }*/
            .feature-section {
                flex-direction: column;
                gap: 20px;
                margin: 40px 0;
                width: 100%;
                max-width: 100%; /* 移动端取消最大宽度限制 */
            }
            .feature-section.reverse {
                flex-direction: column;
            }
            .feature-content,
            .feature-section.reverse .feature-content {
                text-align: center;
                width: 100%;
                flex: none; /* 取消移动端固定宽度 */
            }
            .feature-img-wrap {
                width: 100%;
                flex: none; /* 取消移动端固定宽度 */
            }
            .feature-img {
                max-width: 100%;
                display: block;
            }
            .feature-title {
                font-size: 28px;
            }
            .feature-desc {
                font-size: 16px;
            }
            .phone-feature .feature-img {
                max-width: 300px;
                margin: 0 auto;
            }
        }