/* Blend sections above industries with hero tone. Does NOT touch #industries. */

.hero-section {
    position: relative;
}

/* Soft bridge from hero image to first content block */
.hero-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 210px;
    background: linear-gradient(
        180deg,
        rgba(10, 18, 30, 0) 0%,
        rgba(18, 31, 46, 0.54) 42%,
        rgba(46, 67, 90, 0.48) 70%,
        rgba(78, 99, 124, 0.38) 86%,
        rgba(108, 129, 154, 0.28) 100%
    );
    pointer-events: none;
}

.top-blend,
.top-blend-products {
    position: relative;
    overflow: hidden;
}

.top-blend::before,
.top-blend-products::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../img/hero.jpg');
    background-size: cover;
    background-position: center;
    filter: blur(16px) saturate(48%);
    transform: scale(1.12);
    opacity: 0.16;
    pointer-events: none;
}

/* Keep original layout, only tune color continuity */
.top-blend-1 {
    background: linear-gradient(180deg, #243b52 0%, #738aa3 34%, #bacadb 70%, #c8d5e3 100%);
}

.top-blend-2 {
    background: linear-gradient(180deg, #aec0d3 0%, #c2d1e0 100%);
}

.top-blend-3 {
    background: linear-gradient(180deg, #b8c8d9 0%, #c8d5e3 100%);
}

.top-blend-products {
    background: linear-gradient(180deg, #c5d2e0 0%, #d5dfeb 100%);
}

/* Shared soft dark veil across the three capability sections for smoother tonal continuity */
.top-blend::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18, 32, 48, 0.34) 0%, rgba(18, 32, 48, 0.22) 34%, rgba(18, 32, 48, 0.14) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Replace flat white mask with a lighter business mask */
.top-blend-products::before {
    z-index: 1;
}

.top-blend-products::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(17, 30, 45, 0.12) 0%, rgba(17, 30, 45, 0.18) 100%);
    z-index: 2;
    pointer-events: none;
}

.top-blend-products .content-container {
    position: relative;
    z-index: 3;
}

/* Slightly harmonize card tone while keeping original size/interaction */
.top-blend .product-link {
    position: relative;
    z-index: 2;
    background: linear-gradient(145deg, rgba(202, 216, 232, 0.52) 0%, rgba(183, 200, 218, 0.42) 100%);
    border-color: rgba(255, 255, 255, 0.34);
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    box-shadow:
        0 14px 30px rgba(8, 20, 34, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.top-blend .product-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 38%);
    pointer-events: none;
}

.top-blend .product-link:hover {
    border-color: rgba(255, 255, 255, 0.44);
    box-shadow:
        0 18px 34px rgba(8, 20, 34, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

/* Industries section: darken overall region with a smooth top transition only */
.homepage #industries {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #c7d1df 0%, #bec9d8 100%);
}

.homepage #industries::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(15, 30, 46, 0.18) 0%,
        rgba(15, 30, 46, 0.13) 28%,
        rgba(15, 30, 46, 0.1) 100%
    );
    z-index: 0;
    pointer-events: none;
}

.homepage #industries > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .hero-section::after {
        height: 140px;
    }
}