.visual-banners {
    position: relative;
    height: 500px;
    margin-top: 84px;
    background: #050c16;
    overflow: hidden;
}

.visual-banners + .hero {
    padding-top: 112px;
}

.banner-track {
    position: absolute;
    inset: 0;
}

.brand-mark img,
.core-logo img,
.about-monogram img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.core-logo,
.about-monogram {
    padding: 0;
    overflow: hidden;
}

.orbit-card {
    justify-content: flex-start;
    gap: 0;
    overflow: hidden;
    padding: 0;
}

.orbit-thumb {
    display: block;
    width: 100%;
    height: 58px;
    flex: 0 0 58px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.orbit-card > span:last-child {
    padding-top: 8px;
    font-size: 10px;
    line-height: 1;
}

.orbit-thumb-1 { background-image: url("/assets/images/service-1.png"); }
.orbit-thumb-2 { background-image: url("/assets/images/service-2.png"); }
.orbit-thumb-3 { background-image: url("/assets/images/service-3.png"); }
.orbit-thumb-4 { background-image: url("/assets/images/service-4.png"); }

.promo-banner {
    --banner-image: none;
    position: absolute;
    inset: 0;
    height: 100%;
    display: grid;
    align-items: center;
    color: #fff;
    isolation: isolate;
    overflow: hidden;
    background-image: var(--banner-image);
    background-size: cover;
    background-position: center;
    border-top: 1px solid rgba(255, 255, 255, .08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(1.035);
    transition: opacity .75s ease, visibility .75s ease, transform 6.4s ease;
}

.promo-banner.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
    z-index: 2;
}

.promo-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at center, rgba(5, 12, 22, .24), rgba(5, 12, 22, .02) 55%);
}

.promo-banner::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: -1;
    height: 38%;
    background: linear-gradient(transparent, rgba(3, 8, 15, .64));
}

.promo-shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(4, 10, 19, .14), rgba(4, 10, 19, .67) 38%, rgba(4, 10, 19, .74) 62%, rgba(4, 10, 19, .12));
}

.promo-content {
    width: min(610px, calc(100% - 40px));
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s ease .18s, transform .65s ease .18s;
}

.promo-banner.active .promo-content {
    opacity: 1;
    transform: translateY(0);
}

.promo-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .17em;
}

.promo-kicker::before,
.promo-kicker::after {
    content: "";
    width: 25px;
    height: 1px;
    background: currentColor;
    opacity: .65;
}

.promo-banner h2 {
    margin: 16px 0 17px;
    font-size: clamp(39px, 4.4vw, 63px);
    max-width: 720px;
    text-shadow: 0 4px 24px rgba(0, 0, 0, .5);
}

.promo-banner p {
    max-width: 570px;
    margin: 0 0 27px;
    color: #c1cee0;
    font-size: 15px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .75);
}

.promo-count {
    position: absolute;
    right: 28px;
    bottom: 22px;
    color: rgba(255, 255, 255, .55);
    font: 700 10px "Manrope", sans-serif;
    letter-spacing: .14em;
}

.promo-banner-2 .promo-shade {
    background: linear-gradient(90deg, rgba(4, 10, 19, .2), rgba(4, 10, 19, .7) 37%, rgba(4, 10, 19, .76) 63%, rgba(4, 10, 19, .18));
}

.banner-arrow {
    position: absolute;
    z-index: 6;
    top: 50%;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(5, 12, 22, .56);
    backdrop-filter: blur(12px);
    transform: translateY(-50%);
    transition: background .2s, border-color .2s, transform .2s;
}

.banner-arrow:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.banner-arrow svg { width: 18px; }
.banner-prev { left: 24px; }
.banner-prev svg { transform: rotate(180deg); }
.banner-next { right: 24px; }

.service-card {
    overflow: hidden;
}

.service-image {
    height: 220px;
    flex: 0 0 auto;
    margin: -28px -28px 23px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid #e5eaf0;
    transition: transform .45s ease, filter .45s ease;
}

.service-card:hover .service-image {
    transform: scale(1.025);
    filter: saturate(1.08) brightness(1.04);
}

.service-image-1 { background-image: url("/assets/images/service-1.png"); }
.service-image-2 { background-image: url("/assets/images/service-2.png"); }
.service-image-3 { background-image: url("/assets/images/service-3.png"); }
.service-image-4 { background-image: url("/assets/images/service-4.png"); }
.service-image-5 { background-image: url("/assets/images/service-5.png"); }
.service-image-6 { background-image: url("/assets/images/service-6.png"); }

.circuit-board {
    background-image: linear-gradient(135deg, rgba(7, 17, 31, .26), rgba(7, 17, 31, .76)), url("/assets/images/banner-computer-security.png");
    background-size: cover;
    background-position: left center;
}

.circuit-board::before {
    background: linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
    background-size: 40px 40px;
}

.process-section {
    position: relative;
    isolation: isolate;
    background: #07111f;
    overflow: hidden;
}

.process-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(rgba(5, 12, 22, .84), rgba(5, 12, 22, .93)), url("/assets/images/banner-computer-security.png");
    background-size: cover;
    background-position: center;
}

.contact-section {
    background-image: linear-gradient(115deg, rgba(5, 12, 22, .96) 15%, rgba(8, 27, 52, .88) 62%, rgba(5, 12, 22, .9)), url("/assets/images/banner-tv-satellite.png");
    background-size: cover;
    background-position: center;
}

.call-float {
    position: fixed;
    z-index: 90;
    right: 22px;
    bottom: 76px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 15px;
    border-radius: 99px;
    color: #fff;
    background: var(--primary);
    box-shadow: 0 12px 35px rgba(37, 99, 235, .3);
    font-size: 12px;
    font-weight: 700;
    transition: transform .2s, background .2s;
}

.call-float:hover {
    transform: translateY(-3px);
    background: #1d4ed8;
}

.call-float svg { width: 21px; }

.whatsapp-float svg {
    width: 22px;
    height: 22px;
}

@media (max-width: 820px) {
    .visual-banners {
        height: 570px;
        margin-top: 72px;
    }

    .visual-banners + .hero { padding-top: 90px; }

    .promo-banner {
        background-position: center;
    }

    .promo-banner::before {
        background: linear-gradient(rgba(4, 10, 19, .28), rgba(4, 10, 19, .8));
    }

    .promo-shade,
    .promo-banner-2 .promo-shade {
        background: linear-gradient(180deg, rgba(4, 10, 19, .08), rgba(4, 10, 19, .82) 48%, rgba(4, 10, 19, .96));
    }

    .promo-content {
        align-self: end;
        padding-bottom: 65px;
    }

    .promo-banner h2 {
        font-size: clamp(36px, 9vw, 50px);
    }
}

@media (max-width: 560px) {
    .visual-banners {
        height: 540px;
    }

    .visual-banners + .hero { padding-top: 75px; }

    .call-float {
        right: 81px;
        bottom: 22px;
        width: 51px;
        height: 51px;
        padding: 0;
        justify-content: center;
    }

    .call-float span { display: none; }

    .promo-banner {
        background-size: auto 100%;
    }

    .promo-banner-1 { background-position: 54% center; }
    .promo-banner-2 { background-position: 49% center; }
    .promo-banner-3 { background-position: 50% center; }
    .promo-banner-4 { background-position: 50% center; }
    .promo-banner-5 { background-position: 50% center; }

    .banner-arrow {
        top: auto;
        bottom: 13px;
        width: 34px;
        height: 34px;
        transform: none;
    }

    .banner-prev { left: 14px; }
    .banner-next { right: 14px; }

    .promo-content {
        width: calc(100% - 28px);
        padding-bottom: 48px;
    }

    .promo-banner h2 {
        font-size: 35px;
    }

    .promo-banner p {
        font-size: 13px;
    }

    .promo-count {
        right: 14px;
        bottom: 13px;
    }

    .service-image {
        height: 205px;
    }

    .orbit-thumb {
        height: 46px;
        flex-basis: 46px;
    }

    .orbit-card > span:last-child {
        padding-top: 7px;
        font-size: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-image,
    .promo-banner,
    .promo-content { transition: none; }
}