/* 自定义样式 */
html {
    margin: 0;
    padding: 0;
    width: 100%;
    /* 禁用 CSS 滚动捕捉，改由 JS 逻辑接管，以解决部分浏览器下的失灵问题 */
    scroll-snap-type: none;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    /* 移除 min-height: 100% */
}

.h-21 {
	height: 6rem;
}

.text-sm-cus {
    font-size: 1.1rem;
    line-height: 1.25rem;
}

.text-brand-orange {
    --tw-text-opacity: 1;
    color: #F58C30;
	font-weight: bold;
}

.text-gray-600-cus {
	font-weight: bold;
}

/* 隐藏滚动条但保留滚动功能 - 应用于 html */
html.no-scrollbar::-webkit-scrollbar {
    display: none;
}
html.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 全屏滚动容器 - 现在仅作为布局容器 */
.snap-container {
    width: 100%;
}

.snap-section {
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: normal; /* 允许在快速滚动时跳过多个 section，减少粘滞感 */
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 提示浏览器该元素会有位移变化，开启 GPU 加速 */
    will-change: transform;
}

#hero.snap-section {
    padding-top: 0; /* 第一屏不需要 padding-top，避免出现空白行 */
}

section:not(#hero).snap-section {
    padding-top: 120px; /* 进一步增加顶部边距，确保标题不被导航栏遮挡 */
}

/* 背景渐变蒙版 */
.bg-overlay {
    background: linear-gradient(to bottom, rgba(30, 58, 138, 0.7), rgba(30, 58, 138, 0.2));
}

/* Swiper 自定义样式 */
.swiper-pagination-bullet {
    background: #fff;
    opacity: 0.5;
}
.swiper-pagination-bullet-active {
    background: #fbbf24 !important; /* Tailwind yellow-400 */
    opacity: 1;
}

/* 移动端适配调整 */
@media (max-width: 768px) {
    .snap-container {
        scroll-snap-type: none; /* 移动端有时禁用强制捕捉体验更好 */
        height: auto;
        overflow-x: hidden;
    }
    .snap-section {
        height: auto;
        min-height: 100vh;
        scroll-snap-align: none;
        padding-top: 80px; /* 移动端增加顶部内边距，防止内容被导航栏遮挡 */
    }
    #hero.snap-section {
        height: 100vh; /* 确保第一屏在移动端依然是全屏高度 */
        padding-top: 0;
    }
}