*, :after, :before {
    box-sizing: inherit;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

html {
    box-sizing: border-box
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0
}

p {
    margin: 0
}

picture {
    display: block
}

img {
    display: block;
    border: none
}

img, svg {
    vertical-align: middle
}

a {
    background-color: transparent;
    color: inherit;
    text-decoration: none
}

:focus {
    outline: none
}

:root {
    --promo-code-fs-coeff: 1;
}

button {
    all: unset
}

body {
    font-style: normal;
    display: flex;
    flex-direction: column;
    height: 100svh;
    position: relative;
    background: linear-gradient(to bottom, #0F0000 4%, #14043D 26%, #11021F 48%, #15054A 67%, #11021F 94%);
}

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.content {
    position: relative;
    z-index: auto;
    height: 100%;
}

.description {
    /*z-index: 6;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.logo {
    position: relative;
    z-index: 6;
    aspect-ratio: 346 / 76;
    width: calc(var(--var-promo-w) * var(--logo-w-coeff));
    margin-bottom: calc(var(--var-promo-w) * var(--logo-mb-coeff));
    height: auto;
    display: block;
}

.title {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    line-height: 1.36;
    -webkit-filter: drop-shadow(-3px 4px 40px rgba(50, 170, 255, 0.48));
    filter: drop-shadow(-3px 4px 40px rgba(50, 170, 255, 0.48));
    text-align: center;
    text-transform: uppercase;
}

.title__1 {
    position: relative;
    z-index: 6;
    font-size: calc(var(--var-promo-w) * var(--title-1-fs-coeff));
    color: #fff;
}

.title__2 {
    position: relative;
    z-index: 6;
    font-size: calc(var(--var-promo-w) * var(--title-2-fs-coeff));
    margin-bottom: calc(var(--var-promo-w) * var(--title-2-mb-coeff));
    display: inline-block;
    background: linear-gradient(to right, #20A9FE 0%, #BDA7FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.promo__subtitle {
    position: relative;
    z-index: 6;
    font-family: "Roboto Flex", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    color: #fff;
    font-size: calc(var(--var-promo-w) * var(--promo-subtitle-w-coeff));
    margin-bottom: calc(var(--var-promo-w) * var(--promo-subtitle-mb-coeff));
    line-height: 0.78;
    text-align: center;
    -webkit-filter: drop-shadow(-3px 4px 34px #1BA0FF);
    filter: drop-shadow(-3px 4px 34px #1BA0FF);
}

.promo_btn {
    aspect-ratio: 818 / 172;
    position: relative;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--var-promo-w) * var(--var-promo-gap-coeff));
    border-radius: 999px;
    background: transparent;
    box-shadow: inset 0 1px 4px 4px rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    width: var(--var-promo-w);
    margin-bottom: calc(var(--var-promo-w) * var(--var-promo-mb-coeff));
    padding: 0 calc(var(--var-promo-w) * var(--var-promo-p-coeff));
}

.promo_btn:before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(-76deg, #D9C1F9 0%, #FFFFFF 43%, #68B9FF 100%);
    opacity: 0.8;
    z-index: 0;
    pointer-events: none;
}

.promo_btn > span {
    width: 100%;
    position: relative;
    z-index: 1;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-variation-settings:
            "wdth" 100;
    display: inline-block;
    color: #001667;
    font-size: calc(var(--var-promo-w) * var(--promo-code-fs-coeff));
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
}

.copy-btn {
    width: calc(var(--var-promo-w) * var(--copy-btn-w-coeff));
    aspect-ratio: 1;
    position: relative;
    z-index: 1;
    cursor: pointer;
    background: image-set(
            url("../../img/copy/copy@1x.webp") 1x,
            url("../../img/copy/copy@2x.webp") 2x
    ) center/cover no-repeat;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.copy-btn:active {
    transform: scale(0.96);
}

.vpn {
    position: relative;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto calc(var(--var-promo-w) * var(--var-vpn-mb-coeff));
    border-radius: 999px;
    background: transparent;
    justify-self: center;
    padding: 1.5% 5%;
    isolation: isolate;
}

.vpn:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200%;
    height: 165%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
            ellipse farthest-side at 50% 50%,
            #070751 0 46%,
            rgba(34, 18, 112, 0.01) 100%
    );
    z-index: 0;
    pointer-events: none;
    opacity: 0.95;
}

.vpn > * {
    position: relative;
    z-index: 1;
}

.vpn__logo {
    width: calc(var(--var-promo-w) * var(--var-vpn-logo-w-coeff));
    aspect-ratio: 1;
    max-width: calc(var(--var-promo-w) * var(--var-vpn-logo-w-coeff));
    flex-shrink: 0;
    height: auto;
}

.vpn__title {
    font-family: "Roboto Flex", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    color: #fff;
    font-size: calc(var(--var-promo-w) * var(--var-vpn-title-fs-coeff));
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-filter: drop-shadow(0 0 6px rgba(12, 3, 23, 0.8));
    filter: drop-shadow(0 0 6px rgba(12, 3, 23, 0.8));
}

.footer {
    position: relative;
    z-index: 7;
    overflow: hidden;
}

.footer:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
            90deg,
            rgba(137, 165, 255, 0.39) 0%,
            rgba(48, 52, 177, 0.39) 100%
    );
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    pointer-events: none;
}

.footer > * {
    position: relative;
    z-index: 1;
}

.google-play-link {
    aspect-ratio: 181 / 60;
    display: block;
    width: var(--google-play-link-w);
    height: auto;
}

.btn {
    position: relative;
    aspect-ratio: 530 / 144;
    max-width: 530px;
    height: fit-content;
    color: #fff;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--var-promo-w) * var(--btn-w-coeff));
    font-size: calc(var(--var-promo-w) * var(--btn-fs-coeff));
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: auto;
    text-transform: uppercase;
    font-weight: 900;
}

.btn > span {
    position: relative;
    z-index: 2;
    font-family: "Roboto Flex", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    display: inline-block;
    background: linear-gradient(84deg, #060D4E 0%, #0E1EB4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.btn:after,
.btn:before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    pointer-events: none;
    transition: opacity 0.2s ease;
    -webkit-filter: drop-shadow(0 0 66px rgba(0, 255, 21, 0.28));
    filter: drop-shadow(0 0 66px rgba(0, 255, 21, 0.28));
    box-shadow: inset 3px 2px 4px 2px #fff;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: opacity, filter;
}

.btn:before {
    background: linear-gradient(to right, #1FFF32 0%, #96FEA4 100%);
    opacity: 1;
}

.btn:after {
    background: linear-gradient(to right, #39FF52 0%, #B8FFC3 100%);
    opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
    .btn:hover::before {
        opacity: 0;
    }

    .btn:hover::after {
        opacity: 1;
    }
}

@supports (-webkit-touch-callout: none) {
    .btn:before,
    .btn:after {
        -webkit-animation: ios-btn-shadow-refresh 0.12s ease-out 1;
        animation: ios-btn-shadow-refresh 0.12s ease-out 1;
    }
}

.btn-pulse {
    -webkit-animation: pulse 1.5s ease-in-out infinite;
    animation: pulse 1.5s ease-in-out infinite;
}

.btn:active {
    -webkit-animation: none;
    animation: none;
    transform: scale(0.98) translateY(1px);
}

.player__wrapper {
    position:  relative;
    aspect-ratio: 802 / 1071;
    will-change: transform;
    pointer-events: none;
    z-index: 6;
}

.player__image {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.player__image--mask {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    animation: fadeInOut 5s ease-in-out infinite;
    -webkit-animation: fadeInOut 5s ease-in-out infinite;
    z-index: 5;
}

.beams {
    position: absolute;
    aspect-ratio: 1166 / 444;
    width: 180%;
    display: block;
    pointer-events: none;
    z-index: 3;
    transform: rotate(-25deg);
    bottom: 0;
    left: -70%;
}

.notify {
    position: fixed;
    right: 1%;
    top: 1%;
    z-index: 100;
    background: linear-gradient(to right, #1FFF32 0%, #96FEA4 100%);
    padding: clamp(4px, min(1vw, 2svh), 18px);
    border-radius: clamp(4px, min(1vw, 2svh), 12px);
    opacity: 0;
    transform: translateY(-120%);
    pointer-events: none;
    transition: transform 300ms ease, opacity 300ms ease;
    font-size: clamp(12px, min(1vw, 2svh), 18px);
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings:
            "wdth" 100;
}

.notify.show {
    opacity: 1;
    transform: translateY(0);
}

.notify > span {
    display: inline-block;
    background: linear-gradient(84deg, #060D4E 0%, #0E1EB4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .social > a:hover {
        transform: scale(1.06);
    }
}

@media (orientation: portrait) and (min-width: 0px) {
    :root {
        --player-w: clamp(100px, min(58vw, 32svh), 802px);
        --var-promo-w: clamp(100px, min(79vw, 45svh), 600px);
        --var-promo-mb-coeff: 0;
        --var-promo-p-coeff: 0.07334;
        --var-promo-gap-coeff: 0.02;
        --copy-btn-w-coeff: 0.09779;
        --logo-w-coeff: 0.5229;
        --logo-mb-coeff: 0.08889;
        --title-1-fs-coeff: 0.1491;
        --title-2-fs-coeff: 0.0819;
        --title-2-mb-coeff: 0.04889;
        --promo-subtitle-w-coeff: 0.0819;
        --promo-subtitle-mb-coeff: 0.03178;
        --var-vpn-mb-coeff: 0.044;
        --var-vpn-logo-w-coeff: 0.10946;
        --var-vpn-title-fs-coeff: 0.041033;
        --btn-w-coeff: 0.9;
        --btn-fs-coeff: 0.0801;
        --google-play-link-w: clamp(40px, min(34vw, 20svh), 181px);
    }

    .btn {
        aspect-ratio: 289 / 64;
        max-width: 380px;
    }

    .content {
        height: 100%;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: flex-end;
        padding-top: clamp(24px, min(8vw, 5svh), 46px);
    }

    .player__wrapper {
        width: auto;
        height: 100%;
        right: 5%;
    }

    .player__image {
        background: url("../../img/player/player_mobile.webp") center/cover no-repeat;
    }

    .player__image--mask {
        background: url("../../img/player/player_neon_mobile.webp") center/cover no-repeat;
    }

    .description__footer {
        position: absolute;
        z-index: 8;
        bottom: clamp(12px, min(6vw, 4svh), 24px);
    }

    .vpn__logo {
        background: image-set(
                url("../../img/vpn/vpn_mobile@1x.webp") 1x,
                url("../../img/vpn/vpn_mobile@2x.webp") 2x
        ) center/cover no-repeat;
    }

    .google-play-link {
        background: image-set(
                url("../../img/app_store/app_store_mobile@1x.webp") 1x,
                url("../../img/app_store/app_store_mobile@2x.webp") 2x
        ) center/cover no-repeat;
    }

    .google-play-link {
        margin: 0 auto;
    }

    .footer {
        padding: clamp(6px, min(4vw, 3svh), 14px);
    }

    /*.description {*/
    /*    position: relative;*/
    /*    z-index: 7;*/
    /*}*/
}

@media (orientation: portrait) and (min-width: 768px) and (min-height: 800px) {
    :root {
        --logo-w-coeff: 0.45;
        --logo-mb-coeff: 0.03889;
        --title-1-fs-coeff: 0.1291;
        --title-2-fs-coeff: 0.0649;
        --title-2-mb-coeff: 0.02889;
        --promo-subtitle-w-coeff: 0.0649;
        --promo-subtitle-mb-coeff: 0.03178;
        --var-vpn-mb-coeff: 0.044;
        --var-vpn-logo-w-coeff: 0.08946;
        --var-vpn-title-fs-coeff: 0.034033;
        --btn-fs-coeff: 0.05301;
    }

    .player__image {
        background: url("../../img/player/player_tablet.webp") center/cover no-repeat;
    }

    .player__image--mask {
        background: url("../../img/player/player_neon_tablet.webp") center/cover no-repeat;
    }

    .vpn__logo {
        background: image-set(
                url("../../img/vpn/vpn_tablet@1x.webp") 1x,
                url("../../img/vpn/vpn_tablet@2x.webp") 2x
        ) center/cover no-repeat;
    }

    .google-play-link {
        background: image-set(
                url("../../img/app_store/app_store_desktop@1x.webp") 1x,
                url("../../img/app_store/app_store_desktop@2x.webp") 2x
        ) center/cover no-repeat;
    }

    .player__wrapper {
        right: 10%;
    }
}

@media (orientation: portrait) and (min-width: 1280px) and (min-height: 800px) {
    .player__image {
        background: url("../../img/player/player_laptop.webp") center/cover no-repeat;
    }

    .player__image--mask {
        background: url("../../img/player/player_neon_laptop.webp") center/cover no-repeat;
    }

    .vpn__logo {
        background: image-set(
                url("../../img/vpn/vpn_desktop@1x.webp") 1x,
                url("../../img/vpn/vpn_desktop@2x.webp") 2x
        ) center/cover no-repeat;
    }
}

@media (orientation: portrait) and (min-width: 1640px) and (min-height: 800px) {
    .player__image {
        background: url("../../img/player/player_desktop.webp") center/cover no-repeat;
    }

    .player__image--mask {
        background: url("../../img/player/player_neon_desktop.webp") center/cover no-repeat;
    }
}

@media (orientation: landscape) and (min-width: 0px) {
    :root {
        --player-w: clamp(100px, min(32vw, 61svh), 802px);
        --var-promo-w: clamp(100px, min(32vw, 62svh), 818px);
        --var-promo-mb-coeff: 0.04156;
        --var-promo-p-coeff: 0.07334;
        --var-promo-gap-coeff: 0.02;
        --copy-btn-w-coeff: 0.09779;
        --logo-w-coeff: 0.4229;
        --logo-mb-coeff: 0.04889;
        --title-1-fs-coeff: 0.1491;
        --title-2-fs-coeff: 0.0819;
        --title-2-mb-coeff: 0.04889;
        --promo-subtitle-w-coeff: 0.0819;
        --promo-subtitle-mb-coeff: 0.03178;
        --var-vpn-mb-coeff: 0.044;
        --var-vpn-logo-w-coeff: 0.07946;
        --var-vpn-title-fs-coeff: 0.02933;
        --btn-w-coeff: 0.5647;
        --btn-fs-coeff: 0.0501;
        --google-play-link-w: clamp(40px, min(7vw, 14svh), 181px);
    }

    .google-play-link {
        margin-left: auto;
    }

    .footer {
        padding: clamp(10px, min(0.8vw, 1.6svh), 20px);
    }

    .content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .player__wrapper {
        width: var(--player-w);
    }

    .description {
        position: relative;
        left: 2%;
    }

    .vpn__logo {
        background: image-set(
                url("../../img/vpn/vpn_mobile@1x.webp") 1x,
                url("../../img/vpn/vpn_mobile@2x.webp") 2x
        ) center/cover no-repeat;
    }

    .google-play-link {
        background: image-set(
                url("../../img/app_store/app_store_mobile@1x.webp") 1x,
                url("../../img/app_store/app_store_mobile@2x.webp") 2x
        ) center/cover no-repeat;
    }

    .player__image {
        background: url("../../img/player/player_mobile.webp") center/cover no-repeat;
    }

    .player__image--mask {
        background: url("../../img/player/player_neon_mobile.webp") center/cover no-repeat;
    }

    .description__footer {
        position: relative;
        z-index: 8;
    }
}

@media (orientation: landscape) and (min-width: 1024px) {
    .vpn__logo {
        background: image-set(
                url("../../img/vpn/vpn_tablet@1x.webp") 1x,
                url("../../img/vpn/vpn_tablet@2x.webp") 2x
        ) center/cover no-repeat;
    }

    .google-play-link {
        background: image-set(
                url("../../img/app_store/app_store_desktop@1x.webp") 1x,
                url("../../img/app_store/app_store_desktop@2x.webp") 2x
        ) center/cover no-repeat;
    }

    .player__image {
        background: url("../../img/player/player_tablet.webp") center/cover no-repeat;
    }

    .player__image--mask {
        background: url("../../img/player/player_neon_tablet.webp") center/cover no-repeat;
    }
}

@media (orientation: landscape) and (min-width: 1280px) {
    .player__image {
        background: url("../../img/player/player_laptop.webp") center/cover no-repeat;
    }

    .player__image--mask {
        background: url("../../img/player/player_neon_laptop.webp") center/cover no-repeat;
    }
}

@media (orientation: landscape) and (min-width: 1640px) {
    .vpn__logo {
        background: image-set(
                url("../../img/vpn/vpn_desktop@1x.webp") 1x,
                url("../../img/vpn/vpn_desktop@2x.webp") 2x
        ) center/cover no-repeat;
    }

    .player__image {
        background: url("../../img/player/player_desktop.webp") center/cover no-repeat;
    }

    .player__image--mask {
        background: url("../../img/player/player_neon_desktop.webp") center/cover no-repeat;
    }
}