/**
 * 首页 Hero — 静态背景
 */

.home-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: linear-gradient(145deg, #E8F8F1 0%, #F4FBF8 42%, #FAFCFB 100%);
}

.home-hero-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.home-hero-bg-picture {
    position: absolute;
    inset: 0;
    display: block;
}

.home-hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 68% center;
    opacity: 0.42;
    -webkit-mask-image: linear-gradient(
        95deg,
        transparent 0%,
        rgba(0, 0, 0, 0.15) 28%,
        rgba(0, 0, 0, 0.75) 55%,
        rgba(0, 0, 0, 0.95) 100%
    );
    mask-image: linear-gradient(
        95deg,
        transparent 0%,
        rgba(0, 0, 0, 0.15) 28%,
        rgba(0, 0, 0, 0.75) 55%,
        rgba(0, 0, 0, 0.95) 100%
    );
}

.home-hero-vignette {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg, rgba(244, 251, 248, 0.94) 0%, rgba(244, 251, 248, 0.72) 38%, rgba(244, 251, 248, 0.18) 62%, transparent 100%),
        radial-gradient(ellipse 90% 80% at 18% 50%, rgba(255, 255, 255, 0.85) 0%, transparent 65%);
}

.home-hero > .container {
    position: relative;
    z-index: 2;
}

.home-hero h1,
.home-hero h1 span {
    color: var(--hero-dark-text, #12181B) !important;
    -webkit-text-fill-color: unset !important;
    background: none !important;
}

.home-hero h1 .gradient-text {
    color: var(--hero-dark-text-accent, #177A59) !important;
}

.home-hero p,
.home-hero .stat-label {
    color: var(--hero-dark-text-muted, #4B5854);
}

.home-hero .stat-value {
    color: var(--hero-dark-text-accent, #177A59) !important;
    background: none !important;
    -webkit-text-fill-color: unset !important;
}

.home-hero .hero-badge {
    background: rgba(32, 212, 146, 0.12) !important;
    border: 1px solid rgba(23, 122, 89, 0.22);
    color: var(--hero-dark-text-accent, #177A59) !important;
    box-shadow: none !important;
    animation: none;
}

.home-hero .btn-outline {
    color: var(--hero-dark-text, #12181B);
    border-color: rgba(23, 122, 89, 0.35);
}

.home-hero .btn-outline:hover {
    background: rgba(23, 122, 89, 0.08);
    border-color: var(--hero-dark-text-accent, #177A59);
    color: var(--hero-dark-text-accent, #177A59);
}

@media (max-width: 768px) {
    .home-hero-bg-img {
        object-position: 75% center;
        opacity: 0.28;
    }
}