* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: default;
}

a {
    cursor: pointer;
}

:root {
    --index: (1vh + 1vw)
}

@font-face {
    font-family: CS_regular;
    src: url(../fonts/Intro.otf);
}

body {
    background-color: #258bff;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    /* background: linear-gradient(180deg, rgba(9, 148, 204, 1) 0%, rgba(212,182,169,.4) 23%, rgba(255, 137, 186, 0.1) 50%, rgba(173, 219, 248, 0.23) 100%); */
    background: linear-gradient(rgba(0, 154, 209, .36) 0%, rgba(0, 154, 209, .1) 40%, rgba(173, 219, 248, 0.23) 100%);
}

.container {
    width: 90vw;
    max-width: 1200px;
    margin: 0 auto;
    z-index: 10;
}

.header__outer {
    position: fixed;
    z-index: 100;
    width: 100%;
}

.header {
    height: 95px;
    background-color: rgba(0, 0, 0, 0);
    border-bottom: 1px var(--swap_clr) solid;
    display: flex;
    justify-content: space-between;
    padding: 0 40px;
    backdrop-filter: blur(6px);
}

.header_items {
    height: 100%;
    width: 540px;
    display: flex;
    justify-content: space-evenly;
    box-sizing: border-box;
}

.header_item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    margin-right: 20px;
    transition: all .2s ease-in-out;
}

.fullblackbox {
    width: 100%;
    height: 100%;
    background-color: #121121;
}

/*  */

.header_item a{
    color: #323232;
    color: var(--swap_clr);
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    transition: padding .2s cubic-bezier(0.075, 0.82, 0.165, 1), color .3s ease;
}

.header_item .na[data-text]::before {
    content: attr(data-text);
    opacity: .64;
}

.header_item .na[data-text]:hover:before {
    content: "В разработке";
}

.header_item:hover a {
    padding-bottom: 5px;
    border-bottom: 1px var(--swap_clr) solid;
}

.header_item:has(.na):hover a{
    border: none;
    padding: 0;
}

/*  */

.prx_intro {
    position: relative;
}

.layers,
.layers_footer {
    height: 136vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.layer {
    width: 100%;
    height: 100%;
    position: absolute;
    background-position: center 0;
    background-size: cover;
    will-change: transform;
}

.layer__intro {
    width: 100%;
    margin: 0 auto;
    display: flex;
    position: absolute;
    top: 41vh;
    z-index: 4;
    height: 60vh;
    flex-direction: column;
}

.layers_footer {
    height: calc(var(--index)*57);
    background-position: center;
    align-items: center;
}

.layers_subtitle {
    z-index: 6;
    font-size: calc(var(--index) * .6);
    letter-spacing: 8px;
    font-family: CS_regular;
    color: #282828;
    text-shadow: #fff 0 0 40px;
    will-change: transform;
}

.layers__title {
    z-index: 5;
    font-size: calc(var(--index) * 3.8);
    letter-spacing: 8px;
    font-family: CS_regular;
    color: #282828;
    text-shadow: #fff 0 0 40px;
    will-change: transform;
}

.pi_layer0 {
    transform: translate3d(0, calc(var(--scroll) / 3.2), 0);
    height: 70%;
    top: 0;
}

.pi_layer1 {
    transform: translate3d(0, calc(var(--scroll) / 4), 0);
    z-index: 1;
}

.pi_layer2 {
    transform: translate3d(0, calc(var(--scroll) / 10), 0);
    z-index: 2;
}

.pi_layer3 {
    transform: translate3d(0, calc(var(--scroll) / 4.4), 0);
    z-index: 3;
}

.pi_layer4 {
    transform: translate3d(0, calc(var(--scroll) / 6.2), 0);
    z-index: 4;
}

.pi_layer5 {
    position: absolute;
    z-index: 5;
}

.layers_subtitle {
    transform: translate3d(0, calc(var(--scroll) / 2.05), 0);
    will-change: transform;
    animation-duration: 4s;
    animation-name: fadeOutIn;
    animation-iteration-count: infinite;
}

.layers__title {
    transform: translate3d(0, calc(var(--scroll) / 2.15), 0);
    will-change: transform;
    animation-duration: 4s;
    animation-name: fadeOutIn;
    animation-iteration-count: infinite;
}

.f_l0 {
    transform: translate3d(0, calc((var(--scroll) / 4.6) - 144%), 0);
    height: 70%;
    background-position: center 0;
    top: 0;
    filter: blur(2px);
    opacity: .28;
}

.f_l1 {
    transform: translate3d(0, calc((var(--scroll) / 4.6) - 75vh), 0);
    height: 50%;
    background-position: center 0;
    top: 0;
    filter: blur(2px);
}

.f_l2 {
    transform: translate3d(0, calc((var(--scroll) / 5.7) - 61vh), 0);
    height: 70%;
    top: 0;
    filter: blur(.4px);
}

.cloud1 {
    transform: translate3d(0, calc((var(--scroll) / 3.4) - calc(var(--index)*96)), 0);
    height: 70%;
    top: 0;
    filter: blur(4.6px);

}

.cloud2 {
    transform: translate3d(0, calc((var(--scroll) / 3.4) - calc(var(--index)*116)), 0);
    height: 70%;
    top: 0;
    filter: blur(4.6px);
}

.fix_pos {
    margin-top: 10vh;
}

.big_space {
    margin-top: 100vh;
}


.block {
    position: relative;
    z-index: 10;
    box-sizing: border-box;
}

.block__wrapper {
    display: flex;
    flex-direction: column;
    align-items: left;
    text-align: left;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
}

.block__wrapper h2 a {
    text-decoration: none;
    border-bottom: 1px #bababa solid;
    transition: border 1.6s cubic-bezier(0.075, 0.82, 0.165, 1);
    color: #313131;
}

.block__wrapper h2 a:hover {
    border-bottom: 1px #121121 solid;
}

.block__wrapper h1 {
    font-size: calc(var(--index) * 1.3);
    padding: 0 0 calc(var(--index)*1.333) 0;
    font-weight: 500;
    font-family: CS_regular;
    letter-spacing: 5px;
    text-transform: none;
    color: #282828;
    transition: padding .2s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.block__wrapper h1 p {
    display: inline;
    color: #282828;
}

.block__wrapper h2 {
    font-size: calc(var(--index) * .63);
    letter-spacing: 4px;
    line-height: calc(var(--index) * 1.05);
    font-family: CS_regular;
    font-weight: 400;
    color: #606060;
    transition: padding .2s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.block__wrapper h1:hover,
.block__wrapper h2:hover {
    padding-left: calc(var(--index)*.5);
}

.price_items {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.price_item {
    width: 32%;
    height: calc(var(--index)* 8);
    background-color: #fff;
    font-family: CS_regular;
    padding: calc(var(--index)* 1) calc(var(--index)* 1);
    padding-right: calc(var(--index)* 1.3);
    margin-bottom: calc(var(--index)* .7);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.price_text h3 {
    margin-bottom: calc(var(--index)* .8);
    font-size: calc(var(--index)* .42);
    font-weight: 400;
    letter-spacing: 1.2px;
    line-height: calc(var(--index)* .5);
}

.price_text {
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.price_info {
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.price_info h4 {
    color: #606060;
    font-size: calc(var(--index)* .32);
    font-weight: 300;
    margin-left: 5%;
    display: list-item;
    padding-bottom: calc(var(--index)*.2);
}

.footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(1px);
    z-index: 15;
}

.footer__wrapper {
    height: 14.4vh;
    color: #fff;
    padding: 15px 25;
    display: flex;
}

.footer_items {
    font-size: var(--index);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px;
    min-width: 210px;
}

.footer_items a {
    font-size: calc(var(--index) * .4);
    color: #fff;
    text-decoration: none;
    text-align: left;
    transition: padding .2s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.footer_items a:first-child {
    padding-top: 0;
}

.footer_items a:last-child {
    padding-bottom: 0;
}

.footer_items a:hover {
    padding-left: 12px;
    text-shadow: #fff 0 0 2px;
}

.block__features {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    backdrop-filter: blur(8px);
    margin-top: calc(var(--index) * .74);
}

.block__feature {
    width: 100%;
    height: 16.5vh;
    display: flex;
    justify-content: space-between;
    border-bottom: calc(var(--index) * .14) #121121 solid;
    padding-top: calc(var(--index) * .74);
    padding-bottom: calc(var(--index) * .74);
}

.feature_text {
    padding: calc(var(--index) * .36) 0;
    width: 85%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.feature_index {
    width: 14%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.feature_index:hover {
    transform: scale(1.21);
}

.feature_index p {
    font-size: calc(var(--index) * 3.6);
    font-family: CS_regular;
    display: inline-block;
    color: #202020;

}

.block__feature h3 {
    letter-spacing: 8px;
    font-size: calc(var(--index) * 1.04);
    font-family: CS_regular;
    transition: padding .2s cubic-bezier(0.075, 0.82, 0.165, 1);
    color: #282828;
}

.feature_index p:hover {
    animation-duration: 3s;
    animation-name: rotate-y;
    animation-iteration-count: infinite;
    will-change: top;

}

.block__feature h4 {
    letter-spacing: calc(var(--index)*.1);
    font-family: CS_regular;
    font-size: calc(var(--index) * .46);
    line-height: calc(var(--index)*.7);
    color: #363636;
    transition: padding .2s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.block__feature h4:hover,
.block__feature h3:hover {
    padding-left: calc(var(--index)*.5);
}

.p_big {
    position: relative;
    padding: calc(var(--index)*.3) 0 calc(var(--index)*.3) calc(var(--index)*.8);
    margin-left: calc(var(--index)*.16);
    width: 100%;
    letter-spacing: calc(var(--index)*.042);
    font-family: CS_regular;
    font-size: calc(var(--index) * .54);
    line-height: calc(var(--index)*.9);
    color: #363636;
    cursor: default;
    transition: margin .2s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.p_big:hover::after {
    opacity: .6;
    height: 93.75%;
    width: calc(var(--index)*.12);
    top: 2.62%;
}

.p_big:hover {
    margin-left: calc(var(--index)*.3);
}

.p_big::after {
    position: absolute;
    width: calc(var(--index)*.14);
    height: 100%;
    left: 0;
    top: 0;
    content: "";
    background-color: #121121;
    opacity: 0.4;
    height: 97%;
    transition: all .2s cubic-bezier(0.075, 0.82, 0.165, 1);
}


.block_contacts, .block_contact_us {
    height: 80px;
    width: 100%;
    background-color: #fff;
    margin-bottom: calc(var(--index)* .7);
}

.block_contact_us {
    height: 400px;
    background-color: rgba(0, 0, 0, .06);
    backdrop-filter: blur(30px);
}


@keyframes fadeOutIn {
    from {
        opacity: .96;
    }

    50% {
        opacity: 0.82;
    }

    to {
        opacity: .96;
    }
}