:root {
    --index: calc(1vw + 1vh);
    /* dimensions are calculated relative to 1080p resolution */
    /* 1 conditional value (index)  = 30px at 1080p */
    --size8: calc(var(--index) * 0.2667);
    --size12: calc(var(--index) * 0.4);
    --size16: calc(var(--index) * 0.5335);
    --size24: calc(var(--index) * 0.8);
    --size32: calc(var(--index) * 1.067);
    --size35: calc(var(--index) * 1.1);
    --size38: calc(var(--index) * 1.2667);
    --size40: calc(var(--index) * 1.34);
    --size48: calc(var(--index) * 1.6);
    --size54: calc(var(--index) * 1.8);
    --size56: calc(var(--index) * 1.867);
    --size68: calc(var(--index) * 2.26667);
    --size72: calc(var(--index) * 2.4);
    --size88: calc(var(--index) * 3.2);
    --size200: calc(var(--index) * 6.667);
    --size252: calc(var(--index) * 8.4);
    --size264: calc(var(--index) * 8.8);
    --size270: calc(var(--index) * 9);
    --size280: calc(var(--index) * 9.3334);
    --size320: calc(var(--index) * 10.66);
    --size408: calc(var(--index) * 13.6);
    --size429: calc(var(--index) * 14.3);
    --size450: calc(var(--index) * 18);
    --size599: calc(var(--index) * 19.96);
    --size688: calc(var(--index) * 22.94);

    /* px */
    --inputGap: 10px;

    --accentColor: #00A8FF;
    --bg-color: #111114;
    --bgSecond: #2D3A4F;
    --accentGradient: linear-gradient(132deg, #00D1FF 0%, #0CF 15.00%, #00BEFF 31.00%, #00A8FF 49.00%, #08F 67.00%, #0060FF 85.00%, #003BFF 100%);
    --bluerColor: rgba(0, 136, 255, 0.80);

    --textBlack: #121212;
    --textColor: #fff;
    --textBtn-Color: var(--bg-color);

    --border-r-56: 56px;
}

html {
    box-sizing: border-box;
    height: 100%;
}

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

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Inter-Bold.woff2') format('woff2'),
        url('../fonts/Inter-Bold.woff') format('woff');
}

a {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
}

body {
    font-family: 'Ubuntu', sans-serif;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background-color: var(--bg-color);
    font-size: var(--size24);
    font-style: normal;
    font-weight: 400;
}

.wrapper {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.upper {
    text-transform: uppercase;
}

.button {
    background: var(--accentGradient);
    border-radius: var(--border-r-56);
    padding: var(--size12) var(--size54);
    color: var(--textBlack);
    cursor: pointer;
    font-size: var(--size24);
    font-weight: 700;
    box-shadow: transparent;
    transition: box-shadow .3s ease-in-out, color .3s ease-in-out;
}

.btn-mobile-burger {
    display: none;
    position: absolute;
    right: 8.3%;
    z-index: 50;
}

.btn-mobile {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accentGradient);
}

.btn-target-svg {
    display: flex;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    border-radius: var(--border-r-56);
}

.burger-content {
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    width: 48px;
    height: 0;
    background: var(--accentGradient);
    position: absolute;
    border-radius: 56px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    top: 0;
    left: 0;
    z-index: -1;
    transition: height 0.5s ease-out, padding 0.5s ease-out, opacity 0.1s ease-out 0.5s, visibility 0.1s ease-out 0.15s;
}

.burger-content.active {
    padding: 64px 0 32px;
    height: 164px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: height 0.5s ease-in-out, padding 0.5s ease-out, opacity 0.1s ease-out, visibility 0.1s ease-out 0.15s;
}

.button:hover {
    box-shadow: 0px 0px 24px 0px #019FFF;
    color: #fff;
}

.header {
    padding-top: var(--size72);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    text-align: center;
}

.logo-content {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.header-ico {
    width: var(--size88);
}

.logo-text {
    color: var(--accentColor);
    font-size: 24px;
    font-weight: 400;
}

.header-conent {
    position: relative;
    display: flex;
    justify-content: center;
}

.btn-right {
    position: absolute;
    top: 0;
    right: 7%;
}

.btn-right::after {
    content: '';
    position: absolute;
    display: block;
    width: 600px;
    height: 600px;
    bottom: 0;
    left: 0;
    background: var(--bluerColor);
    filter: blur(150.5px);
    z-index: -1;
}


.main {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.logo {
    height: var(--size450);
}

.box-center {
    position: relative;
}

.box-text {
    text-align: left;
    position: absolute;
    bottom: 25px;
    left: -44%;
}

.text-title {
    position: relative;
}

.trigger-text-animation {
    position: absolute;
    top: calc(var(--index) * -2);
    left: calc(var(--index) * -2);
    width: calc(var(--index) * 20);
    height: calc(var(--index) * 7);
}

.text-main {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.01) 62%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: var(--size48);
    font-weight: 400;
    line-height: 100%;
    margin-bottom: 8px;
    animation-duration: .2s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}

.text-main.play-animation {
    animation-name: text-animate-title;
}

.title-inner {
    position: relative;
    padding-right: 15px;
    z-index: 3;
}

.myModal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 40;
}

.modal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 3;
    background: #121212;
    backdrop-filter: blur(5px);
    display: none;
}

.modal-con {
    display: flex;
    gap: var(--size40);
}

.modal-form,
.modal-numbers {
    filter: drop-shadow(0px 0px 24px var(--accentColor));
    align-self: flex-start;
    position: relative;
}

.modal-form::after {
    content: '';
    position: absolute;
    top: calc(var(--size48) * -1);
    left: calc(var(--size72) * -1);
    width: var(--size252);
    height: var(--size252);
    background-color: rgba(0, 136, 255, 0.20);
    filter: blur(100px);
    z-index: -1;
}

.modal-numbers::after {
    content: '';
    position: absolute;
    bottom: calc(var(--size48) * -1);
    right: calc(var(--size72) * -1);
    width: var(--size252);
    height: var(--size252);
    background-color: rgba(0, 136, 255, 0.20);
    filter: blur(100px);
    z-index: -1;
}

.form-mobile-content {
    filter: drop-shadow(0px 0px 24px var(--accentColor));
    position: relative;
    align-self: flex-end;
}

.delimiter {
    align-self: center;
}

.form-bg {
    width: var(--size688);
}

.numbers-bg {
    width: var(--size408);
}

.text-main-shadow {
    display: block;
    position: absolute;
    top: calc(var(--size12) * -1);
    left: calc(var(--index) * 0.1);
    font-size: var(--size48);
    color: transparent;
    z-index: -4;
    -webkit-text-stroke: 1px transparent;
    animation-duration: .6s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}

.text-main-shadow.play-animation {
    animation-name: text-animate-shadow;
}

.text-descr {
    /* color: var(--accentColor); */
    font-size: var(--size24);
    font-weight: 400;
    margin: 0;
    line-height: 1;
    background: linear-gradient(90deg, rgba(0, 168, 255, 0) 50%, #00A8FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation-duration: .2s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    line-height: 1.2;
}

.text-descr.play-animation {
    animation-name: text-animate-text;
}


.form-body {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: var(--size48);
}


.contacts {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--size48) var(--size32);
    display: flex;
    flex-direction: column;
    gap: var(--size16);
    text-align: center;
    color: var(--textColor);
}


.label-form {
    display: block;
    font-family: 'Inter';
    font-size: var(--size12);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.80);
}

.input {
    display: block;
    font-size: var(--size16);
    border: none;
    outline: none;
    background-color: transparent;
    padding: 6px 0 8px;
    color: #fff;
    border-bottom: 2px solid var(--accentColor);
    border-radius: 2px;
    width: var(--size280);
}

.input::placeholder,
.textarea-msg::placeholder {
    color: #fff;
}

.form-row {
    display: flex;
    justify-content: space-between;
    gap: var(--inputGap);
    margin-bottom: var(--size38);
}

.textarea-msg {
    border-radius: 16px;
    border: 1px solid var(--accentColor);
    background: var(--bgSecond);
    outline: none;
    padding: var(--size16);
    font-size: var(--size12);
    color: #fff;
    width: 100%;
    height: var(--size200);
}

.text-placeholder {
    position: relative;
    z-index: -1;
    display: block;
    font-size: var(--size16);
    transform: translateY(var(--size38));
    height: var(--size24);
    transition: transform .2s ease-in-out, font-size .2s ease-in-out;
}

.text-placeholder.active-focus {
    font-size: var(--size12);
    transform: translateY(0);
}

.sub-btn {
    padding: 6px;
    color: var(--textBlack);
    max-width: var(--size264);
    width: 100%;
    height: var(--size54);
    background: var(--accentGradient);
    font-size: var(--size24);
    font-weight: 700;
    border-radius: var(--border-r-56);
    margin-left: auto;
}

.btn-hov {
    transition: box-shadow .2s ease-in-out;
}

.btn-hov:hover {
    box-shadow: 0px 0px 24px 0px #019FFF;
}

.contact {
    border-radius: var(--border-r-56);
    border: 1px solid var(--accentColor);
    padding: var(--size12);
    font-size: var(--size16);
    position: relative;
    background-color: var(--bgSecond);
    z-index: 1;
    transition: opacity .3s ease-in-out;
}

.contact::after {
    content: '';
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--accentGradient);
    border-radius: var(--border-r-56);
    z-index: -1;
    transition: opacity .3s ease-in-out;
}

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

.bord-line {
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--accentColor);
}

.icon img,
.icon {
    height: var(--size32);
}

.modal-close {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    font-size: var(--size24);
    color: var(--accentColor);
    gap: var(--size8);
    cursor: pointer;
    z-index: 10;
}

.modal-close img {
    height: var(--size24);
}

#modal_form,
#modal_form_mobile,
#modal_numbers_mobile {
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    height: 0;
}

#modal_form.active,
#modal_form_mobile.active,
#modal_numbers_mobile.active {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    height: auto;
    transition: opacity .5s ease-in-out;
}

.modal-overlay.active {
    display: flex;
}

.bg-top {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5;
    width: 100vw;
    overflow: hidden;
}

.bg-top .default {
    height: var(--size599);
    max-width: fit-content;
}

.bg-bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -5;
}

.bg-bottom .default {
    height: var(--size429);
    max-width: fit-content;
}


.muose-blur {
    position: absolute;
    width: 370px;
    height: 370px;
    background: var(--bluerColor);
    filter: blur(150.5px);
    top: 0;
    left: 0;
    z-index: -3;
}

.footer {
    position: fixed;
    bottom: var(--size56);
    left: 0;
    right: 0;
    width: var(--size270);
    margin: 0 auto;
    /* border: 1px solid red; */
}

.footer-text {
    color: var(--accentColor);
    font-size: var(--size24);
    font-weight: 400;
    line-height: 100%;
    margin: 0;
}

.footer-text:not(:last-child){
    margin-bottom: var(--size8);
}

.footer-text-up {
    text-align: left;
}

.footer-text-down {
    text-align: right;
}

@keyframes text-animate-title {
    0% {
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.01) 52%, #FFFFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    20% {
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.01) 46%, #FFFFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    40% {
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.01) 35%, #FFFFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    60% {
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.01) 26%, #FFFFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    80% {
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.16) 16%, #FFFFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    100% {
        background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, #FFFFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

}

@keyframes text-animate-text {
    0% {
        background: linear-gradient(90deg, rgba(0, 168, 255, 0) 50%, #00A8FF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    30% {
        background: linear-gradient(90deg, rgba(0, 168, 255, 0.1) 30%, #00A8FF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    60% {
        background: linear-gradient(90deg, rgba(0, 168, 255, 0.16) 20%, #00A8FF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    100% {
        background: linear-gradient(90deg, rgba(0, 168, 255, 1) 0%, #00A8FF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

}


@keyframes text-animate-shadow {
    0% {
        -webkit-text-stroke: 1px transparent;
    }

    100% {
        -webkit-text-stroke: 1px var(--accentColor);
    }

}


@media (max-width: 550px) {
    .header {
        padding-top: 32px;
    }

    .logo-text {
        font-size: 18px;
    }

    .header-ico {
        width: 48px;
    }

    .btn-right {
        display: none;
    }

    .btn-mobile-burger {
        display: block;
    }

    .btn-target-phone {
        background-image: url('../images/phone-w.svg');
    }

    .btn-target-mail {
        background-image: url('../images/mail.svg');
    }

    .logo {
        height: 320px;
    }

    .box-text {
        bottom: -8px;
        left: -3%;
    }

    .text-main,
    .title-inner span {
        font-size: 24px;
    }

    .title-inner span {
        top: -6px;
        left: 2px;
    }

    .text-descr {
        font-size: 16px;
    }

    .form-body {
        padding: 32px;
    }

    #modal_form_mobile,
    #modal_numbers_mobile {
        padding: 10% 0;
    }

    .form-mobile-content {
        position: relative;
        /* margin-bottom: 13%; */
    }

    .form-bg-mobile {
        width: 358px;
        height: 624px;
    }


    .form-row {
        margin-bottom: 38px;
    }

    .label-form {
        font-size: 12px;
    }

    .input {
        width: 135px;
        font-size: 14px;
    }

    .textarea-msg {
        height: 200px;
        font-size: 12px;
        padding: 16px;
    }

    .sub-btn {
        margin-left: 0;
        max-width: 264px;
        height: 56px;
        border-radius: 56px;
        font-size: 24px;
    }

    .modal-close img {
        height: 24px;
    }

    .modal-close {
        font-size: 16px;
        gap: 8px;
    }

    .contacts {
        padding: 16px 26px 26px;
        gap: 16px;
    }

    .icon,
    .icon img {
        height: 32px;
    }

    .contact {
        border-radius: var(--border-r-56);
        padding: 8px 12px;
        font-size: 18px;
    }

    .bg-top .default {
        width: 320px;
        height: 376px;
    }

    .bg-bottom .default {
        width: 304px;
        height: 176px;
    }

    .text-placeholder {
        display: block;
        font-size: 14px;
        transform: translateY(30px);
        height: 18px;
        transition: transform .2s ease-in-out, font-size .2s ease-in-out;
    }

    .text-placeholder.active-focus {
        font-size: 12px;
        transform: translateY(0);
    }

    .footer {
        width: 210px;
        bottom: 64px;
    }

    .footer-text {
        font-size: 18px;
    }

    .footer-text:not(:last-child){
        margin-bottom: 10px;
    }

    @media (max-height: 720px) {
        .logo {
            height: 300px;
        }

        .form-bg-mobile {
            width: 301px;
            height: 510px;
        }

        .icon,
        .icon img {
            height: 24px;
        }

        .contacts {
            gap: 10px;
        }

        .contact {
            font-size: 14px;
        }

        .form-row {
            margin-bottom: 25px;
        }

        .text-placeholder {
            height: 12px;
            font-size: 12px;
            line-height: 1;
        }

        .input {
            width: 110px;
            font-size: 12px;
        }

        .sub-btn {
            max-width: 200px;
            height: 35px;
            font-size: 18px;
        }
    }
}