/* --- 主页: 英雄区域 --- */
.hero-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 80px 0;
    gap: 40px;
}

.hero-text {
    flex: 1;
    max-width: 500px;
}

/* .hero-top-info {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 8px;
}

.hero-top-info p {
    margin-bottom: 0;
} */

/* 修改居中文本样式 */
.feature-text-centered {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}

    .feature-text-centered ul {
        display: flex;
        flex-direction: column;
        align-items: center; /* 使所有列表项居中 */
        padding-left: 0;
        list-style: none;
    }

        .feature-text-centered ul li {
            text-align: center;
            margin-bottom: 0.8em;
            width: 100%; /* 确保每行宽度充满容器 */
            display: flex;
            justify-content: center; /* 使每行文本居中 */
        }

/* 确保在小屏幕上也能正确显示 */
@media (max-width: 768px) {
    .feature-text-centered ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .feature-text-centered ul li {
            text-align: center;
            display: flex;
            justify-content: center;
        }
}

.download-stats-display {
    /* 确保它与前面的文本有视觉分离，可以是一个空格或者一个小的左外边距 */
    margin-left: 10px; /* 添加一个小左外边距，模拟自然间距 */
    font-size: 1rem; /* 下载统计文本的基础字号 */
    color: var(--text-color);
    white-space: nowrap; /* 防止“总下载量: XXXXX”换行 */
}

.download-stats-number {
    font-size: 1.2em; /* 数字比周围文字稍大 */
    font-weight: 700; /* 数字加粗 */
    color: var(--primary-color); /* 数字使用主蓝色，非渐变 */
}
/* END CHANGES */

.main-headline {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.sub-headline {
    font-size: 1.2rem;
    max-width: 450px;
    margin-bottom: 2rem;
}

.action-buttons {
    display: flex;
    gap: 15px;
}

.hero-image-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- 主页: 特性介绍区 --- */
.features-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 100px 0;
}

.feature-section {
    padding: 60px 0;
    border-top: 1px solid var(--secondary-color);
}

.features-wrapper .feature-section:first-child {
    border-top: none;
}

.feature-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.feature-text {
    flex: 1;
    max-width: 480px;
}

    .feature-text h2 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 1rem;
        color: var(--headline-color);
    }

    .feature-text p {
        font-size: 1.1rem;
        color: var(--text-color);
    }

    .feature-text ul {
        list-style: none;
        padding-left: 0;
        text-align: left;
    }

.feature-text ul li {
    margin-bottom: 0.5em;
    font-size: 1.1rem;
    color: var(--text-color);
}

/* 通用提示样式 */
.hint-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hint-text {
    text-decoration: underline;
    text-decoration-color: var(--primary-color);
    text-underline-offset: 2px;
}

.hint-icon svg {
    width: 1em;
    height: 1em;
    fill: var(--primary-color);
    vertical-align: middle;
}

.hint-tooltip {
    position: absolute;
    left: 0;
    top: calc(100% + 10px);
    min-width: 450px;
    max-width: 600px;
    background-color: #1a1a1a;
    border: 1px solid var(--secondary-color);
    border-radius: 12px;
    padding: 14px 16px;
    color: var(--text-color);
    box-shadow: 0 10px 24px rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: all 0.18s ease;
    z-index: 20;
}

.hint-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 16px;
    width: 12px;
    height: 12px;
    background-color: #1a1a1a;
    border-left: 1px solid var(--secondary-color);
    border-top: 1px solid var(--secondary-color);
    transform: rotate(45deg);
}

/* 右侧避让 */
.hint-tooltip.pos-right {
    left: calc(100% + 10px);
    right: auto;
}
.hint-tooltip.pos-right::before {
    left: -6px;
    top: 50%;
    border-left: 1px solid var(--secondary-color);
    border-top: 1px solid var(--secondary-color);
    transform: translateY(-50%) rotate(45deg);
}

/* 左侧避让 */
.hint-tooltip.pos-left {
    left: auto;
    right: calc(100% + 10px);
}
.hint-tooltip.pos-left::before {
    right: -6px;
    left: auto;
    top: 50%;
    border-right: 1px solid var(--secondary-color);
    border-top: 1px solid var(--secondary-color);
    transform: translateY(-50%) rotate(45deg);
}

.hint-info:hover .hint-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.hint-tooltip a {
    color: var(--primary-color);
    text-decoration: underline;
    text-decoration-color: var(--primary-color);
}

.hint-tooltip p {
    margin: 0.3em 0;
    line-height: 1.7;
}

.hint-tooltip strong {
    color: var(--primary-color);
    font-weight: 700;
}

/* --- **最终修正**: 重写双列清单样式 --- */


/* 直接定义清单布局 */
.feature-checklist {
    display: flex; /* 使用 flex 布局创建双列 */
    gap: 60px; /* 定义两列之间的固定间距 */
    margin-top: 20px;
    /* 作为一个块级元素，它会自动向左与上方的标题对齐 */
}

    /* 定义勾选符号的样式 */
    .feature-checklist .highlight-blue {
        margin-right: 8px;
    }

.feature-image {
    flex: 1;
}

.feature-section-reversed .feature-container {
    flex-direction: row-reverse;
}

/* --- 主页: 响应式设计 --- */
@media (max-width: 768px) {
    .hero-section,
    .feature-container {
        flex-direction: column;
        text-align: center;
    }

    .feature-section-reversed .feature-container {
        flex-direction: column;
    }

    .sub-headline, .feature-text {
        margin-left: auto;
        margin-right: auto;
    }

    .action-buttons {
        justify-content: center;
    }

    .main-headline {
        font-size: 3rem;
    }

    .feature-text h2 {
        font-size: 2.2rem;
    }

    .features-wrapper {
        margin: 60px 0;
    }

    .feature-text {
        max-width: 100%;
        margin-bottom: 30px;
    }

    /* 在小屏幕上，让清单作为一个整体居中，但内部文字保持左对齐 */
    .feature-checklist {
        display: inline-flex; /* 让其可以被父元素的 text-align:center 影响 */
        text-align: left; /* 确保内部文字依然是左对齐的 */
    }

    /* START CHANGES */
    /* 移除了 hero-top-info 的响应式样式，因为它已被移除 */
    /* .hero-top-info {
        flex-direction: column;
        gap: 5px;
        align-items: center;
    } */

    /* 在小屏幕上，如果文字和下载量过长，允许换行，但整体段落居中 */
    .hero-text p {
        text-align: center;
    }

    .download-stats-display {
        margin-left: 0; /* 在小屏幕上，如果换行了就不需要左边距了 */
        display: block; /* 强制换行到下一行，以避免在小屏幕上过于拥挤 */
    }
}

/* --- 主页下载模块的样式 --- */
.home-download-section {
    padding: 80px 0;
    border-top: 1px solid var(--secondary-color);
    margin-top: 100px;
}