:root {
            --primary: #ff6a00;
            --primary-light: #fff5ee;
            --android: #2ecc71;
            --apple: #222222;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #fff; color: #333; }
        a { text-decoration: none; }

        /* 导航栏 */
        nav {
            display: flex;
            align-items: center;
            padding: 15px 10%;
            background: #fff;
            box-shadow: 0 2px 10px rgba(0,0,0,0.03);
        }
        .logo-img { height: 35px; width: auto; margin-right: 10px; }
        .logo-text { font-size: 20px; font-weight: bold; color: var(--primary); }

        /* 主视口 - 默认电脑端布局 */
        .hero {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 60px 10%;
            background: linear-gradient(135deg, #fffcf9 0%, #ffffff 100%);
        }

        .hero-text { flex: 1; }
        .hero-text h1 { font-size: 40px; margin-bottom: 20px; color: #222; }
        .hero-text p { font-size: 18px; color: #666; margin-bottom: 35px; }

        .download-area { display: flex; gap: 20px; }
        
        /* 下载按钮 - 纯文字居中样式 */
        .btn {
            display: flex;
            align-items: center;
            justify-content: center; /* 确保文字绝对居中 */
            width: 200px;
            height: 55px;
            border-radius: 30px;
            color: #fff;
            font-weight: 600;
            font-size: 16px;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            text-align: center;
        }
        
        .btn-android { background: var(--android); }
        .btn-ios { background: var(--apple); }
        .btn:hover { transform: translateY(-3px); filter: brightness(1.1); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }

        /* 演示图片 (电脑端) */
        .hero-img { flex: 1; text-align: right; }
        .hero-img img {
            width: 280px; 
            border-radius: 35px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.08);
            border: none;
        }

        /* 介绍区域 */
        .features {
            padding: 80px 10%;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
            background: #fdfdfd;
        }
        .f-card {
            background: #fff;
            padding: 40px 20px;
            border-radius: 20px;
            text-align: center;
            border: 1px solid #f0f0f0;
        }
        .feature-img {
            width: 48px; 
            height: 48px;
            margin-bottom: 20px;
            object-fit: contain;
        }
        .f-card h3 { font-size: 18px; margin-bottom: 10px; color: #333; }
        .f-card p { font-size: 14px; color: #888; }

        footer { padding: 40px; text-align: center; color: #ccc; font-size: 13px; }

        /* ================= 移动端适配 ================= */
        @media (max-width: 768px) {
            nav { justify-content: center; }
            .hero { flex-direction: column; padding: 40px 20px; text-align: center; }
            .hero-text h1 { font-size: 28px; }
            .hero-text p { font-size: 15px; }
            
            /* 按钮区域垂直排列并居中 */
            .download-area {
                flex-direction: column;
                align-items: center;
                margin-bottom: 40px; 
            }
            .btn { width: 220px; height: 50px; } /* 移动端按钮稍微收窄 */

            /* 图片强制排在按钮下方 */
            .hero-img { order: 3; text-align: center; width: 100%; }
            .hero-img img { width: 75%; max-width: 250px; }

            .features { grid-template-columns: repeat(2, 1fr); padding: 40px 20px; gap: 15px; }
        }