/* ==========================================================================
   © Pautinka Digital Develop Studio. All rights reserved.
   This template package and its custom implementation are proprietary.
   Any unauthorized third-party use, copying, redistribution, or modification
   is strictly prohibited without written permission from the studio.
   Third-party libraries retain their respective licenses.
   ========================================================================== */

.pk-gate-screen {
    --gate-open: 0;
    --gate-depth: 1;
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 100vh;
    padding: 0 !important;
    overflow: hidden;
    background: #01040a;
    color: #f4f8ff;
    isolation: isolate;
}

.pk-gate-stage {
    position: absolute;
    inset: 0;
    height: auto;
    min-height: 0;
    overflow: hidden;
    background: #01040a;
    isolation: isolate;
}

.pk-gate-stage::before,
.pk-gate-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.pk-gate-stage::before {
    z-index: 11;
    background:
        linear-gradient(90deg, #000 0%, rgba(0,0,0,.98) 8%, rgba(0,0,0,.84) 16%, rgba(0,0,0,.38) 25%, transparent 36%, transparent 64%, rgba(0,0,0,.38) 75%, rgba(0,0,0,.84) 84%, rgba(0,0,0,.98) 92%, #000 100%);
}
.pk-gate-stage::after {
    z-index: 11;
    background:
        linear-gradient(180deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.28) 10%, transparent 23%, transparent 77%, rgba(0,0,0,.36) 91%, rgba(0,0,0,.84) 100%);
}

.pk-gate-blackout {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 84%, rgba(0,0,0,.24) 100%),
        radial-gradient(circle at 50% 52%, rgba(20, 38, 70, .28), transparent 48%),
        linear-gradient(90deg, #000 0%, rgba(0,0,0,1) 7%, rgba(1,4,10,.94) 14%, rgba(1,4,10,.52) 22%, rgba(1,4,10,.34) 29%, rgba(1,4,10,.34) 71%, rgba(1,4,10,.52) 78%, rgba(1,4,10,.94) 86%, rgba(0,0,0,1) 93%, #000 100%);
}

.pk-gate-window {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    background: #020611;
}

.pk-gate-window::before,
.pk-gate-window::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24vw;
    z-index: 2;
    pointer-events: none;
}
.pk-gate-window::before {
    left: 0;
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.98) 24%, rgba(0,0,0,.74) 55%, rgba(0,0,0,0) 100%);
}
.pk-gate-window::after {
    right: 0;
    background: linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.98) 24%, rgba(0,0,0,.74) 55%, rgba(0,0,0,0) 100%);
}

.pk-gate-window__bg {
    position: absolute;
    inset: -3vh -3vw;
    width: 110vw;
    height: 110vh;
    object-fit: cover;
    object-position: 50% 54%;
    display: block;
    opacity: .96;
    filter: brightness(.74) saturate(1.08) contrast(1.03);
    transform: scale(calc(1.075 - var(--gate-open) * .015));
    animation: pkGateBgZoom 18s ease-in-out infinite alternate;
    transform-origin: 50% 50%;
    pointer-events: none;
    user-select: none;
}

.pk-gate-frame {
    position: absolute;
    z-index: 12;
    left: 50%;
    top: 50%;
    width: 146vw;
    height: 116vh;
    max-width: none;
    object-fit: fill;
    object-position: 50% 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
    filter: brightness(.82) contrast(1.08) drop-shadow(0 0 38px rgba(56, 124, 255, .22));
}

.pk-gate-doors {
    position: absolute;
    inset: 0;
    z-index: 10;
    overflow: hidden;
    pointer-events: none;
}
.pk-gate-doors::before,
.pk-gate-doors::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 53vw;
    height: 126vh;
    z-index: 0;
    background: linear-gradient(90deg, #03060d 0%, #0a101b 56%, #04070d 100%);
    box-shadow: inset 0 0 90px rgba(0,0,0,.86), 0 0 34px rgba(48, 116, 255, .10);
    will-change: transform;
    transition: transform .08s linear;
}
.pk-gate-doors::before {
    right: 50%;
    transform: translateY(-50%) translateX(calc(var(--gate-open) * -102%));
}
.pk-gate-doors::after {
    left: 50%;
    transform: translateY(-50%) translateX(calc(var(--gate-open) * 102%));
}
.pk-gate-door {
    position: absolute;
    z-index: 1;
    top: 50%;
    height: 126vh;
    width: auto;
    max-width: none;
    object-fit: contain;
    display: block;
    will-change: transform;
    transition: transform .08s linear;
    filter: brightness(.98) drop-shadow(0 0 18px rgba(74, 139, 255, .20));
}
.pk-gate-door--left {
    right: 50%;
    transform-origin: 100% 50%;
    transform: translateY(-50%) translateX(calc(var(--gate-open) * -102%));
}
.pk-gate-door--right {
    left: 50%;
    transform-origin: 0 50%;
    transform: translateY(-50%) translateX(calc(var(--gate-open) * 102%));
}

.pk-gate-content {
    position: absolute;
    inset: 0;
    z-index: 6;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(168px, 18vh, 210px) 10vw clamp(74px, 8vh, 106px);
    transform: translateY(calc(16px + (1 - var(--gate-open)) * 46px)) scale(calc(.82 + var(--gate-open) * .18));
    opacity: calc(.06 + var(--gate-open) * .94);
    filter: blur(calc((1 - var(--gate-open)) * 3.2px));
    transform-origin: 50% 52%;
    will-change: transform, opacity, filter;
    pointer-events: auto;
}

.pk-gate-copy {
    text-align: center;
    display: grid;
    justify-items: center;
    width: min(100%, 860px);
    flex: 0 0 auto;
    position: relative;
    z-index: 3;
}
.pk-gate-kicker {
    display: grid;
    grid-template-columns: minmax(52px, 148px) auto minmax(52px, 148px);
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
    color: #9bf8ff;
    text-transform: uppercase;
    letter-spacing: .35em;
    font-size: clamp(9px, .68vw, 13px);
    font-weight: 900;
    text-shadow: 0 0 14px rgba(100, 240, 255, .55);
}
.pk-gate-kicker span {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(107, 213, 255, .75), transparent);
}
.pk-gate-copy h2 {
    margin: 0;
    font-size: clamp(56px, 5.1vw, 98px);
    line-height: .86;
    letter-spacing: .02em;
    color: #f7fbff;
    text-transform: uppercase;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(255,255,255,.72), 0 0 34px rgba(96, 191, 255, .58), 0 0 54px rgba(144, 82, 255, .38);
}
.pk-gate-copy p {
    margin: 14px 0 0;
    max-width: 660px;
    color: rgba(247, 251, 255, .92);
    font-size: clamp(12px, .82vw, 16px);
    line-height: 1.34;
    text-shadow: 0 2px 16px rgba(0,0,0,.9);
}
.pk-gate-cta {
    margin-top: 18px;
    min-width: 205px;
    height: 38px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #eef8ff;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 900;
    font-size: 11px;
    border: 1px solid rgba(150, 214, 255, .62);
    border-radius: 9px;
    background: linear-gradient(90deg, rgba(42, 159, 255, .32), rgba(141, 70, 255, .38)), rgba(5, 11, 24, .65);
    box-shadow: 0 0 24px rgba(71, 165, 255, .28), inset 0 0 20px rgba(137, 88, 255, .22);
}
.pk-gate-cta:hover { color: #fff; filter: brightness(1.14); }
.pk-gate-cta i { font-size: 21px; line-height: 1; }

.pk-gate-carousel-wrap {
    position: relative;
    z-index: 2;
    width: min(100%, 1380px);
    margin: clamp(58px, 7vh, 92px) auto 0;
    flex: 0 0 auto;
}
.pk-gate-carousel {
    width: 100%;
    overflow: visible;
    padding: 42px 128px 52px;
}
.pk-gate-carousel .swiper-wrapper { align-items: center; }
.pk-gate-carousel .swiper-slide {
    width: clamp(260px, 19vw, 356px);
    opacity: .28;
    transition: opacity .35s ease, transform .35s ease, filter .35s ease;
    filter: saturate(.82) brightness(.58);
}
.pk-gate-carousel .swiper-slide-active { opacity: 1; filter: none; z-index: 4; }
.pk-gate-carousel .swiper-slide-prev,
.pk-gate-carousel .swiper-slide-next { opacity: .78; filter: saturate(.95) brightness(.78); z-index: 2; }
.pk-gate-carousel .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) { opacity: .10; }
.pk-gate-carousel .swiper-slide:not(.swiper-slide-active) .pk-gate-card {
    transform: scale(.82);
    transform-origin: 50% 50%;
}
.pk-gate-carousel .swiper-slide-active .pk-gate-card {
    transform: scale(1.18);
    transform-origin: 50% 50%;
}

.pk-gate-card {
    position: relative;
    height: 138px;
    border-radius: 15px;
    overflow: hidden;
    background: rgba(4, 8, 18, .82);
    box-shadow: 0 0 0 1px rgba(96, 210, 255, .42), 0 0 22px rgba(81, 130, 255, .24);
}
.pk-gate-carousel .swiper-slide-active .pk-gate-card {
    height: 202px;
    border-radius: 18px;
}
.pk-gate-card:before,
.pk-gate-card:after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pk-gate-card:before {
    border: 1px solid rgba(117, 216, 255, .7);
    border-radius: inherit;
    box-shadow: inset 0 0 18px rgba(91, 76, 255, .28), 0 0 14px rgba(92, 214, 255, .26);
}
.pk-gate-card:after { background: linear-gradient(180deg, transparent 42%, rgba(2, 5, 12, .88)); }
.pk-gate-card__link,
.pk-gate-card__media,
.pk-gate-card__shade { position: absolute; inset: 0; display: block; }
.pk-gate-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: .86;
    filter: brightness(.88) saturate(1.08);
}
.pk-gate-card__shade {
    z-index: 2;
    background: linear-gradient(90deg, rgba(0,0,0,.56), transparent 46%, rgba(0,0,0,.26)), radial-gradient(circle at 72% 28%, rgba(152, 74, 255, .28), transparent 44%);
}
.pk-gate-card__badge {
    position: absolute;
    z-index: 5;
    right: 12px;
    bottom: 10px;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(255,255,255,.6);
}
.pk-gate-carousel .swiper-slide-active .pk-gate-card__badge {
    top: 0;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    padding: 5px 18px 6px;
    background: linear-gradient(90deg, rgba(66, 123, 255, .85), rgba(178, 70, 255, .92));
    border-radius: 0 0 8px 8px;
}
.pk-gate-card__body {
    position: absolute;
    z-index: 5;
    left: 14px;
    right: 40px;
    bottom: 14px;
    display: grid;
    gap: 4px;
    color: #fff;
}
.pk-gate-card__body b {
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-transform: uppercase;
    font-size: clamp(11px, .82vw, 15px);
    line-height: .98;
    letter-spacing: .03em;
    text-shadow: 0 0 10px rgba(107, 223, 255, .62), 0 2px 8px #000;
}
.pk-gate-carousel .swiper-slide-active .pk-gate-card__body b {
    font-size: clamp(20px, 1.55vw, 30px);
    line-height: .96;
}
.pk-gate-card__body em {
    color: rgba(235, 246, 255, .78);
    font-style: normal;
    font-size: 10px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pk-gate-arrow {
    position: absolute;
    z-index: 8;
    top: 50%;
    width: 42px;
    height: 42px;
    margin-top: -28px;
    border: 1px solid rgba(122, 219, 255, .45);
    border-radius: 12px;
    background: rgba(8, 27, 50, .82);
    box-shadow: 0 0 20px rgba(65, 174, 255, .22), inset 0 0 16px rgba(83, 168, 255, .14);
    cursor: pointer;
}
.pk-gate-arrow:before {
    content: "";
    position: absolute;
    inset: 12px;
    border-top: 3px solid #a7eeff;
    border-right: 3px solid #a7eeff;
    filter: drop-shadow(0 0 8px rgba(91, 214, 255, .8));
}
.pk-gate-arrow--prev { left: 86px; }
.pk-gate-arrow--next { right: 86px; }
.pk-gate-arrow--prev:before { transform: rotate(-135deg); }
.pk-gate-arrow--next:before { transform: rotate(45deg); }
.pk-gate-carousel .swiper-pagination { bottom: 0 !important; }
.pk-gate-carousel .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    background: rgba(202, 209, 255, .45);
    opacity: 1;
}
.pk-gate-carousel .swiper-pagination-bullet-active {
    background: #b36bff;
    box-shadow: 0 0 12px rgba(177, 102, 255, .88);
}

.pk-gate-features {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: clamp(42px, 5vh, 60px);
    width: min(70vw, 1040px);
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 1px solid rgba(132, 208, 255, .22);
    border-radius: 14px;
    background: rgba(5, 13, 28, .78);
    box-shadow: 0 0 30px rgba(46, 131, 255, .16), inset 0 0 28px rgba(80, 83, 255, .08);
    backdrop-filter: blur(9px);
    overflow: hidden;
}
.pk-gate-feature {
    min-height: 68px;
    padding: 12px 14px 11px 50px;
    position: relative;
    border-right: 1px solid rgba(132, 208, 255, .16);
    display: grid;
    align-content: center;
    gap: 3px;
}
.pk-gate-feature:last-child { border-right: 0; }
.pk-gate-feature i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(151, 208, 255, .28);
    border-radius: 9px;
    background: rgba(86, 101, 255, .22);
    color: #c9f4ff;
    font-size: 16px;
    box-shadow: 0 0 14px rgba(98, 119, 255, .2);
}
.pk-gate-feature b {
    color: #fff;
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: .08em;
    line-height: 1.06;
}
.pk-gate-feature span {
    color: rgba(236, 243, 255, .78);
    font-size: 9.5px;
    line-height: 1.18;
}

.pk-gate-scroll {
    position: absolute;
    z-index: 13;
    left: 50%;
    bottom: 14px;
    width: 42px;
    height: 42px;
    transform: translateX(-50%);
    border: 1px solid rgba(117, 220, 255, .4);
    border-radius: 50%;
    background: rgba(5, 15, 30, .62);
    box-shadow: 0 0 18px rgba(79, 187, 255, .18), inset 0 0 14px rgba(93, 83, 255, .18);
}
.pk-gate-scroll span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 13px;
    height: 13px;
    border-right: 2px solid #bdf3ff;
    border-bottom: 2px solid #bdf3ff;
    transform: translate(-50%, -65%) rotate(45deg);
}

@keyframes pkGateBgZoom {
    from { transform: scale(calc(1.075 - var(--gate-open) * .015)) translate3d(0, 0, 0); }
    to { transform: scale(calc(1.105 - var(--gate-open) * .015)) translate3d(0, -1.2%, 0); }
}

@media (max-height: 820px) and (min-width: 981px) {
    .pk-gate-content { padding-top: 142px; padding-bottom: 58px; }
    .pk-gate-carousel-wrap { margin-top: 42px; }
    .pk-gate-card { height: 122px; }
    .pk-gate-carousel .swiper-slide-active .pk-gate-card { height: 176px; }
    .pk-gate-features { bottom: 40px; transform: translateX(-50%) scale(.92); }
}

@media (max-width: 980px) {
    .pk-gate-screen { height: auto; min-height: 820px; }
    .pk-gate-stage { height: 100vh; }
    .pk-gate-frame { left: 50%; top: 50%; width: 166vw; height: 116vh; transform: translate(-50%, -50%); object-fit: fill; }
    .pk-gate-window::before, .pk-gate-window::after { width: 22vw; }
    .pk-gate-door { height: 118vh; }
    .pk-gate-doors::before, .pk-gate-doors::after { width: 68vw; height: 118vh; }
    .pk-gate-content { padding: 110px 7vw 54px; }
    .pk-gate-copy h2 { font-size: clamp(44px, 13vw, 70px); }
    .pk-gate-copy p br { display: none; }
    .pk-gate-carousel-wrap { margin-top: 42px; }
    .pk-gate-carousel { padding: 18px 52px 40px; }
    .pk-gate-carousel .swiper-slide { width: min(78vw, 390px); }
    .pk-gate-features {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        width: min(92vw, 720px);
        margin: 34px auto 72px;
        grid-template-columns: 1fr;
    }
    .pk-gate-feature { min-height: 64px; border-right: 0; border-bottom: 1px solid rgba(132,208,255,.14); }
    .pk-gate-feature:last-child { border-bottom: 0; }
}

@media (max-width: 767px) {
    .pk-gate-screen {
        height: auto;
        min-height: 100svh;
        overflow: hidden;
        background: #01040a;
    }

    .pk-gate-stage {
        position: relative;
        inset: auto;
        min-height: 100svh;
        height: auto;
        overflow: hidden;
        padding: 0;
        background: #01040a;
    }

    .pk-gate-stage::before {
        z-index: 11;
        background:
            linear-gradient(90deg, rgba(0,0,0,.98) 0%, rgba(0,0,0,.72) 12%, rgba(0,0,0,.18) 28%, transparent 42%, transparent 58%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.72) 88%, rgba(0,0,0,.98) 100%);
    }

    .pk-gate-stage::after {
        z-index: 11;
        background:
            linear-gradient(180deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.36) 14%, transparent 32%, transparent 70%, rgba(0,0,0,.58) 100%);
    }

    .pk-gate-blackout {
        background:
            radial-gradient(circle at 50% 38%, rgba(36, 68, 118, .34), transparent 44%),
            linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.18) 34%, rgba(0,0,0,.76) 100%),
            #01040a;
    }

    .pk-gate-window__bg {
        inset: -6vh -22vw;
        width: 144vw;
        height: 116vh;
        object-position: 50% 48%;
        opacity: .9;
        filter: brightness(.58) saturate(1.12) contrast(1.05);
        transform: scale(calc(1.12 - var(--gate-open) * .025));
        animation-duration: 16s;
    }

    .pk-gate-window::before,
    .pk-gate-window::after {
        width: 28vw;
    }

    .pk-gate-frame {
        left: 50%;
        top: 47%;
        width: 245vw;
        height: 112vh;
        transform: translate(-50%, -50%);
        object-fit: cover;
        object-position: 50% 50%;
        opacity: .82;
        filter: brightness(.72) contrast(1.08) drop-shadow(0 0 20px rgba(80, 140, 255, .2));
    }

    .pk-gate-doors::before,
    .pk-gate-doors::after {
        width: 62vw;
        height: 112vh;
    }

    .pk-gate-door {
        height: 112vh;
        max-height: none;
        opacity: .92;
    }

    .pk-gate-door--left,
    .pk-gate-doors::before {
        right: 50%;
        transform: translateY(-50%) translateX(calc(var(--gate-open) * -108%));
    }

    .pk-gate-door--right,
    .pk-gate-doors::after {
        left: 50%;
        transform: translateY(-50%) translateX(calc(var(--gate-open) * 108%));
    }

    .pk-gate-content {
        position: relative;
        inset: auto;
        min-height: 100svh;
        overflow: visible;
        padding: 96px 18px 34px;
        justify-content: flex-start;
        transform: translateY(calc(10px + (1 - var(--gate-open)) * 34px)) scale(calc(.88 + var(--gate-open) * .12));
        transform-origin: 50% 44%;
    }

    .pk-gate-copy {
        width: min(100%, 440px);
        margin-inline: auto;
    }

    .pk-gate-kicker {
        grid-template-columns: 44px auto 44px;
        gap: 9px;
        margin-bottom: 8px;
        font-size: 9px;
        letter-spacing: .22em;
    }

    .pk-gate-copy h2 {
        font-size: clamp(42px, 15vw, 68px);
        line-height: .84;
        text-shadow: 0 0 10px rgba(255,255,255,.58), 0 0 28px rgba(96,191,255,.46);
    }

    .pk-gate-copy p {
        width: min(92vw, 350px);
        margin-top: 12px;
        font-size: 12px;
        line-height: 1.32;
    }

    .pk-gate-copy p br {
        display: none;
    }

    .pk-gate-cta {
        min-width: 176px;
        height: 36px;
        margin-top: 15px;
        font-size: 10px;
        border-radius: 10px;
    }

    .pk-gate-carousel-wrap {
        width: 100vw;
        margin-top: 44px;
        left: 50%;
        transform: translateX(-50%);
    }

    .pk-gate-carousel {
        overflow: hidden;
        padding: 32px 0 40px;
    }

    .pk-gate-carousel .swiper-slide {
        width: min(84vw, 370px);
        opacity: .16;
        filter: saturate(.7) brightness(.48);
    }

    .pk-gate-carousel .swiper-slide-prev,
    .pk-gate-carousel .swiper-slide-next {
        opacity: .38;
        filter: saturate(.8) brightness(.58);
    }

    .pk-gate-carousel .swiper-slide:not(.swiper-slide-active) .pk-gate-card {
        transform: scale(.82);
    }

    .pk-gate-carousel .swiper-slide-active .pk-gate-card {
        transform: scale(1);
        height: 204px;
        border-radius: 18px;
    }

    .pk-gate-card {
        height: 176px;
        border-radius: 17px;
    }

    .pk-gate-carousel .swiper-slide-active .pk-gate-card__body b {
        font-size: clamp(19px, 7vw, 28px);
        line-height: .94;
    }

    .pk-gate-card__body {
        left: 16px;
        right: 48px;
        bottom: 16px;
    }

    .pk-gate-arrow {
        display: none;
    }

    .pk-gate-carousel .swiper-pagination {
        bottom: 4px !important;
    }

    .pk-gate-features {
        position: relative;
        left: 50%;
        bottom: auto;
        width: 100vw;
        margin: 24px 0 66px;
        transform: translateX(-50%);
        display: flex;
        gap: 10px;
        padding: 0 18px 8px;
        overflow-x: auto;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        scrollbar-width: none;
    }

    .pk-gate-features::-webkit-scrollbar {
        display: none;
    }

    .pk-gate-feature {
        flex: 0 0 220px;
        min-height: 70px;
        padding: 12px 14px 12px 48px;
        border: 1px solid rgba(132,208,255,.20);
        border-radius: 14px;
        background: rgba(5,13,28,.72);
        box-shadow: 0 0 18px rgba(46,131,255,.12), inset 0 0 22px rgba(80,83,255,.08);
    }

    .pk-gate-scroll {
        bottom: 18px;
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 420px) {
    .pk-gate-content {
        padding-top: 90px;
    }

    .pk-gate-frame {
        width: 270vw;
        height: 112vh;
    }

    .pk-gate-carousel-wrap {
        margin-top: 36px;
    }

    .pk-gate-carousel .swiper-slide {
        width: 86vw;
    }

    .pk-gate-carousel .swiper-slide-active .pk-gate-card {
        height: 190px;
    }
}

@media (max-width: 767px) {
    .pk-gate-frame {
        display: none !important;
    }

    .pk-gate-stage::before,
    .pk-gate-stage::after {
        display: none !important;
    }

    .pk-gate-content {
        padding-bottom: 72px;
    }

    .pk-gate-carousel-wrap {
        margin-top: 38px;
    }

    .pk-gate-features {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        width: min(92vw, 420px) !important;
        margin: 28px auto 78px !important;
        transform: none !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    .pk-gate-feature {
        width: 100% !important;
        min-height: 76px !important;
        flex: none !important;
        padding: 14px 16px 14px 54px !important;
        border: 1px solid rgba(132, 208, 255, .24) !important;
        border-radius: 16px !important;
        background: linear-gradient(180deg, rgba(8, 18, 38, .78), rgba(4, 10, 22, .72)) !important;
        box-shadow: 0 0 18px rgba(46, 131, 255, .14), inset 0 0 24px rgba(80, 83, 255, .10) !important;
    }

    .pk-gate-feature i {
        left: 16px !important;
        width: 30px !important;
        height: 30px !important;
    }

    .pk-gate-feature b {
        font-size: 12px !important;
    }

    .pk-gate-feature span {
        font-size: 11px !important;
        line-height: 1.28 !important;
    }
}

@media (max-width: 420px) {
    .pk-gate-frame {
        display: none !important;
    }

    .pk-gate-features {
        width: min(90vw, 380px) !important;
        margin-top: 24px !important;
    }
}

@media (max-width: 767px) {
    .pk-gate-doors {
        display: none !important;
    }

    .pk-gate-content {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }

    .pk-gate-carousel,
    .pk-gate-carousel .swiper-wrapper,
    .pk-gate-carousel .swiper-slide-active,
    .pk-gate-carousel .swiper-slide-active .pk-gate-card,
    .pk-gate-carousel .swiper-slide-active .pk-gate-card__link,
    .pk-gate-carousel .swiper-slide-active .pk-gate-card__media,
    .pk-gate-carousel .swiper-slide-active .pk-gate-card__media img {
        opacity: 1 !important;
        filter: none !important;
    }

    .pk-gate-carousel .swiper-slide-active .pk-gate-card {
        box-shadow: 0 0 0 1px rgba(110, 220, 255, .72), 0 0 28px rgba(80, 150, 255, .34) !important;
    }

    .pk-gate-carousel .swiper-slide-prev,
    .pk-gate-carousel .swiper-slide-next {
        opacity: .46 !important;
        filter: brightness(.7) saturate(.9) !important;
    }

    .pk-gate-card__shade {
        background: linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.10) 42%, rgba(2, 5, 12, .70) 100%) !important;
    }
}

@media (max-width: 767px) {
    .pk-gate-stage {
        background: #01040a !important;
    }

    .pk-gate-blackout {
        background:
            linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .30) 38%, rgba(0, 0, 0, .78) 76%, #01040a 100%),
            radial-gradient(circle at 50% 22%, rgba(48, 90, 160, .22), transparent 52%),
            #01040a !important;
    }

    .pk-gate-window {
        inset: 0 !important;
        background: #01040a !important;
    }

    .pk-gate-window__bg {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: 50% 32% !important;
        opacity: .94 !important;
        filter: brightness(.66) saturate(1.12) contrast(1.05) !important;
        transform: scale(calc(1.06 + var(--gate-open) * .035)) !important;
        transform-origin: 50% 38% !important;
    }

    .pk-gate-window::before,
    .pk-gate-window::after {
        display: block !important;
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        pointer-events: none !important;
    }

    .pk-gate-window::before {
        top: 0 !important;
        bottom: auto !important;
        height: 38% !important;
        z-index: 2 !important;
        background: linear-gradient(180deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.28) 58%, rgba(0,0,0,0) 100%) !important;
    }

    .pk-gate-window::after {
        top: auto !important;
        bottom: 0 !important;
        height: 62% !important;
        z-index: 2 !important;
        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.52) 48%, #01040a 100%) !important;
    }

    .pk-gate-doors {
        display: block !important;
        z-index: 5 !important;
        opacity: .95 !important;
    }

    .pk-gate-doors::before,
    .pk-gate-doors::after {
        display: block !important;
        width: 62vw !important;
        height: 112svh !important;
        background: linear-gradient(90deg, #02050b 0%, #08101d 55%, #02050b 100%) !important;
        opacity: calc(.16 + (1 - var(--gate-open)) * .84) !important;
    }

    .pk-gate-door {
        display: block !important;
        height: 112svh !important;
        width: auto !important;
        max-width: none !important;
        opacity: calc(.22 + (1 - var(--gate-open)) * .78) !important;
        filter: brightness(.82) drop-shadow(0 0 16px rgba(74, 139, 255, .22)) !important;
    }

    .pk-gate-door--left,
    .pk-gate-doors::before {
        right: 50% !important;
        transform: translateY(-50%) translateX(calc(var(--gate-open) * -112%)) !important;
    }

    .pk-gate-door--right,
    .pk-gate-doors::after {
        left: 50% !important;
        transform: translateY(-50%) translateX(calc(var(--gate-open) * 112%)) !important;
    }

    .pk-gate-content {
        position: relative !important;
        z-index: 7 !important;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        padding-top: 104px !important;
    }

    .pk-gate-carousel-wrap {
        z-index: 8 !important;
    }

    .pk-gate-carousel .swiper-slide-active,
    .pk-gate-carousel .swiper-slide-active .pk-gate-card,
    .pk-gate-carousel .swiper-slide-active .pk-gate-card__link,
    .pk-gate-carousel .swiper-slide-active .pk-gate-card__media,
    .pk-gate-carousel .swiper-slide-active .pk-gate-card__media img {
        opacity: 1 !important;
        filter: none !important;
    }

    .pk-gate-card__shade {
        background: linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.12) 46%, rgba(2,5,12,.68) 100%) !important;
    }
}