/* =========================================================
   INDUSTRIES HERO  (LAZY VERSION)
   ========================================================= */

.page-hero {
    position: relative;
    display: flex;
    align-items: center;

    /* 不再寫 background-image */
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

/* Hero Overlay */
.page-hero .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(12,14,18,0.85) 0%,
        rgba(12,14,18,0.65) 45%,
        rgba(12,14,18,0.45) 75%,
        rgba(12,14,18,0.35) 100%
    );
}


/* =========================================================
   FULL BACKGROUND INDUSTRY SECTIONS (LAZY)
   ========================================================= */

.industry-section {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;

    /* 不再寫 background-image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.industry-section .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(12,14,18,0.55) 0%,
        rgba(12,14,18,0.65) 60%,
        rgba(12,14,18,0.85) 100%
    );
}

.industry-section .industry-content {
    position: relative;
    z-index: 2;
    max-width: 820px;
    text-shadow:
        0 2px 6px rgba(0,0,0,0.9),
        0 8px 24px rgba(0,0,0,0.6);
}

.industry-section h2 {
    font-size: 34px;
    margin-bottom: 24px;
    color: #ffffff;
}

.industry-section p {
    line-height: 1.8;
    margin-bottom: 18px;
    color: #e2e8f0;
}


/* =========================================================
   LAZY BACKGROUND CLASS
   ========================================================= */

.bg-lazy {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* =========================================================
   CTA SECTION
   ========================================================= */

.industry-cta {
    padding: 110px 0;
    background:
        linear-gradient(
            180deg,
            #0f1115 0%,
            #0b0d11 100%
        );
}

.cta-text {
    margin-top: 20px;
    margin-bottom: 28px;
    color: #cbd5e1;
}


/* =========================================================
   ANIMATION
   ========================================================= */

.hero-content,
.industry-content {
    opacity: 0;
    transform: translate3d(0,30px,0);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.hero-content.animate,
.industry-content.animate {
    opacity: 1;
    transform: translate3d(0,0,0);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .industry-section {
        min-height: 60vh;
        padding: 70px 0;
    }

    .industry-content {
        padding: 0 20px;
    }
}

.page-hero,
.industry-section {
    overflow-x: hidden;
}