html,
body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: rgba(1, 1, 1, 1);
    color: rgba(255, 255, 255, 1);
    /* 关键：让 body 占满视口高度（子元素 flex 布局生效的前提） */
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Bootstrap container-fluid already handles full width */
.container-fluid {
    min-height: 100vh;
    padding: 0;
}

/* Bootstrap container already handles max-width and centering */
/* Remove minwidth class as Bootstrap handles responsive containers */

/* Bootstrap utility classes replace these:
   .d-flex .justify-content-center .align-items-center
   .d-flex .justify-content-between .align-items-center
*/

.header {
    height: 74px;
    display: flex;
    align-items: center;
    padding: 0 15px;
}

.header img {
    height: 40px;
    width: auto;
}

.banner {
    background: url('./imgs/banner_bg.png?v=1.0.0') no-repeat center bottom;
    background-size: cover;
    padding: 40px 0 70px 0;
    text-align: center;
}

.banner img {
    max-width: 100%;
    height: auto;
}

/* 移动端优化 */
@media (max-width: 768px) {
    .banner {
        padding: 20px 0 40px 0;
    }

    .banner img {
        max-width: 90%;
    }
}

.download-btns {
    margin-top: 24px;
}

.download-btns #download-btn {
    cursor: pointer;
    transition: transform 0.3s ease;
    padding: 15px 25px;
    /* border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2); */
}

/* .download-btns #download-btn:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.15);
} */


.download-icon {
    /* PC模式下显示原始大小，不限制尺寸 */
    width: auto;
    height: auto;
    object-fit: contain;
    /* 保持图片比例 */
    flex-shrink: 1;
    /* 允许图片收缩 */
}

/* 移动端下载按钮优化 */
@media (max-width: 768px) {
    .download-icon {
        height: 35px;
        max-width: 60px;
        /* 移动端固定最大宽度 */
        max-height: 35px;
        /* 移动端固定最大高度 */
    }

    .download-btns #download-btn {
        padding: 10px 15px;
        min-width: 160px;
        /* 减小最小宽度 */
        max-width: 90%;
        /* 限制按钮最大宽度 */
        gap: 10px !important;
        /* 强制设置较小的间距 */
    }
}

.content {
    min-height: 500px;
    padding: 80px 0;
    display: flex;
    align-items: center;
}

.content1 {
    background: url('./imgs/content1_bg.png?v=1.0.0') no-repeat center center;
    background-size: cover;
}

.content2 {
    background: url('./imgs/content2_bg.png?v=1.0.0') no-repeat center center;
    background-size: cover;
}

.sub-text {
    font-size: 20px;
    line-height: 1.8;
}

/* 移动端内容区优化 */
@media (max-width: 768px) {
    .content {
        min-height: 400px;
        padding: 40px 0;
    }

    .content img {
        max-width: 100%;
        height: auto;
    }

    /* 移动端图片间距优化 - 重新设计 */
    /* 所有内容区域的列元素在移动端都有基础间距 */
    .content .row>div {
        margin-bottom: 30px;
    }

    /* 每个内容区域的最后一个视觉元素（基于order）移除下边距 */
    .content1 .order-2,
    .content2 .order-2 {
        margin-bottom: 0;
    }
}


/* 新增：img 外层容器，用 flex:1 填充中间空间，确保底部元素靠底 */
.wrapper {
    flex: 1;
    /* 自动占据中间所有可用空间 */
    /* display: flex;
    align-items: flex-start; */
    /* 让 img 靠顶部对齐 */
    margin-bottom: 1rem;
    /* 可选：与底部版权区留间距 */
}

/* 版权区样式：固定在底部，可调整内边距和字体大小 */
.copyright {
    padding: 50px 0;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.5);
}

.copyright a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.3s ease;
}

.copyright a:hover {
    text-decoration: underline;
    color: rgba(255, 255, 255, 1);
}

/* 移动端版权区域优化 */
@media (max-width: 768px) {
    .copyright {
        padding: 30px 0;
        font-size: 14px;
    }

    .copyright p {
        line-height: 1.6;
        margin-bottom: 8px;
    }
}

/* 额外的响应式优化 */
@media (max-width: 576px) {
    .header {
        height: 60px;
        padding: 0 10px;
    }

    .header img {
        height: 35px;
    }

    .banner {
        padding: 15px 0 30px 0;
    }

    .content {
        min-height: 300px;
        padding: 30px 0;
    }

    .download-btns #download-btn {
        padding: 8px 12px;
        min-width: 140px;
        /* 小屏幕最小宽度 */
        max-width: 95%;
        /* 小屏幕最大宽度 */
        gap: 8px !important;
        /* 更小的间距 */
    }

    .download-icon {
        height: 28px;
        max-width: 45px;
        /* 小屏幕固定最大宽度 */
        max-height: 28px;
        /* 小屏幕固定最大高度 */
    }

    .copyright {
        padding: 20px 0;
        font-size: 12px;
    }
}

/* 大屏优化 */
@media (min-width: 1200px) {
    .content {
        padding: 100px 0;
    }

    .banner {
        padding: 60px 0 90px 0;
    }
}