/* =========================================================
   ИТ - Сопровождение бизнеса PREMIUM INFRASTRUCTURE VISUAL
   Restrained product-style presentation
   ========================================================= */

:root {
    --zt-ink: #07111f;
    --zt-text: #0f172a;
    --zt-muted: #64748b;
    --zt-blue: #276cf4;
    --zt-cyan: #7ad8ff;
}

/* Hero environment */

.zc-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 76% 28%,
            rgba(62, 126, 255, .10),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8faff 100%
        );
}

.zc-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -34%;
    right: -12%;
    width: 64%;
    height: 160%;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at center,
            rgba(85, 145, 255, .11),
            transparent 68%
        );
    filter: blur(38px);
}

/* Main visual */

.zc-premium-visual {
    position: relative;
    width: min(100%, 680px);
    margin-left: auto;
    padding: 54px 10px 8px;
}

.zc-premium-visual__stage {
    position: relative;
    min-height: 390px;
    display: grid;
    place-items: center;
    perspective: 1600px;
}

.zc-premium-visual__halo {
    position: absolute;
    width: 82%;
    height: 70%;
    border-radius: 50%;
    background:
        radial-gradient(
            ellipse at center,
            rgba(53, 117, 238, .22),
            rgba(93, 190, 255, .08) 40%,
            transparent 72%
        );
    filter: blur(52px);
}

/* Layered object */

.zc-premium-core {
    position: relative;
    width: min(100%, 540px);
    height: 330px;
    transform-style: preserve-3d;
    transition:
        transform .65s cubic-bezier(.2, .8, .2, 1);
}

.zc-premium-core__layer {
    position: absolute;
    left: 50%;
    width: 86%;
    height: 205px;
    overflow: hidden;
    border-radius: 34px;
    transform-style: preserve-3d;
}

.zc-premium-core__layer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            125deg,
            rgba(255, 255, 255, .55),
            transparent 27%,
            transparent 70%,
            rgba(255, 255, 255, .08)
        );
}

.zc-premium-core__layer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 13%;
    width: 74%;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .72),
            transparent
        );
}

.zc-premium-core__layer--rear {
    top: 20px;
    background:
        linear-gradient(
            145deg,
            #e8edf4 0%,
            #bcc6d3 48%,
            #8f9cac 100%
        );
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow:
        0 28px 60px rgba(15, 23, 42, .10);
    transform:
        translateX(-50%)
        translateZ(-100px)
        rotateX(60deg)
        scale(.87);
    opacity: .48;
}

.zc-premium-core__layer--middle {
    top: 66px;
    background:
        linear-gradient(
            145deg,
            #526279 0%,
            #2e4057 48%,
            #16263a 100%
        );
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow:
        0 34px 70px rgba(15, 23, 42, .14);
    transform:
        translateX(-50%)
        translateZ(-46px)
        rotateX(54deg)
        scale(.94);
    opacity: .84;
}

.zc-premium-core__layer--front {
    top: 116px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 31px 33px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 76% 4%,
            rgba(75, 143, 255, .25),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #192b45 0%,
            #0c1829 56%,
            #06111e 100%
        );
    border: 1px solid rgba(158, 190, 238, .24);
    box-shadow:
        0 50px 100px rgba(7, 18, 35, .25),
        0 14px 36px rgba(7, 18, 35, .14),
        inset 0 1px 0 rgba(255, 255, 255, .09);
    transform:
        translateX(-50%)
        rotateX(47deg);
}

.zc-premium-core__brand {
    position: relative;
    z-index: 2;
}

.zc-premium-core__brand span {
    display: block;
    margin-bottom: 7px;
    color: #78a8ff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
}

.zc-premium-core__brand strong {
    display: block;
    color: #f7faff;
    font-size: clamp(25px, 3vw, 36px);
    font-weight: 650;
    line-height: 1;
    letter-spacing: -.045em;
}

.zc-premium-core__indicator {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 5px;
    color: #a9b8cb;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

.zc-premium-core__indicator span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #55db91;
    box-shadow: 0 0 14px rgba(85, 219, 145, .65);
}

.zc-premium-core__light {
    position: absolute;
    top: 245px;
    left: 50%;
    width: 72%;
    height: 54px;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(66, 132, 238, .18),
            transparent
        );
    filter: blur(18px);
    transform: translateX(-50%);
}

/* Caption */

.zc-premium-visual__caption {
    position: relative;
    z-index: 3;
    max-width: 510px;
    margin: -3px auto 0;
    text-align: center;
}

.zc-premium-visual__caption span {
    display: block;
    color: var(--zt-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.zc-premium-visual__caption p {
    max-width: 480px;
    margin: 12px auto 0;
    color: #687b94;
    font-size: 13px;
    line-height: 1.65;
}

/* Section reveal */

[data-zt-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity .7s cubic-bezier(.2, .8, .2, 1),
        transform .7s cubic-bezier(.2, .8, .2, 1);
}

[data-zt-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Responsive */

@media (max-width: 1080px) {
    .zc-premium-visual {
        margin-right: auto;
    }
}

@media (max-width: 680px) {
    .zc-premium-visual {
        padding: 28px 0 0;
    }

    .zc-premium-visual__stage {
        min-height: 315px;
    }

    .zc-premium-core {
        height: 280px;
    }

    .zc-premium-core__layer {
        width: 95%;
        height: 172px;
        border-radius: 24px;
    }

    .zc-premium-core__layer--rear {
        top: 5px;
    }

    .zc-premium-core__layer--middle {
        top: 40px;
    }

    .zc-premium-core__layer--front {
        top: 76px;
        padding: 24px;
    }

    .zc-premium-core__brand strong {
        font-size: 24px;
    }

    .zc-premium-core__indicator {
        display: none;
    }

    .zc-premium-visual__caption p {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zc-premium-core,
    [data-zt-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}