/*THEME*/

:root {
    --model-max: 300px;
    --model-min: 150px;

    --color1: #0e0e0e;
    --color2: #fcfcfc;
    --color-soft: rgba(0, 0, 0, 0.65);
    --border-color: rgba(0, 0, 0, 0.25);
    --blur-color: rgba(255, 255, 255, 0.2);
    --image: url(../img/landing-light.webp);
}

.dark {
    --color1: #fcfcfc;
    --color2: #0e0e0e;
    --color-soft: rgba(255, 255, 255, 0.65);
    --border-color: rgba(255, 255, 255, 0.25);
    --blur-color: rgba(0, 0, 0, 0.2);
    --image: url(../img/landing-dark.webp);
}

@media (prefers-color-scheme: dark) {
    .system {
        --color1: #fcfcfc;
        --color2: #0e0e0e;
        --color-soft: rgba(255, 255, 255, 0.65);
        --border-color: rgba(255, 255, 255, 0.25);
        --blur-color: rgba(0, 0, 0, 0.5);
        --image: url(../img/landing-dark.webp);
    }
}


/*SETTINGS*/

* {
    padding: 0;
    margin: 0;
    border: 0;
    touch-action: manipulation;
}

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

:focus,
:active,
a:active {
    outline: none;
}

nav,
footer,
header,
aside {
    display: block;
}

body::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

html,
body {
    min-height: 100%;
    width: 100%;
    font-size: 100%;
    line-height: 1;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    overflow: auto; /* Ensure scrolling works */
}

input,
button,
textarea {
    font-family: inherit;
}

input::-ms-clear {
    display: none;
}

button {
    cursor: pointer;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

a,
a:hover,
a:focus,
a:visited {
    text-decoration: none;
}

button,
button:hover,
button:active,
input,
label,
textarea,
select,
a,
div {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    outline: none;
}

ul li {
    list-style: none;
}

img {
    vertical-align: top;
}

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



/*FONTS*/

@font-face {
    font-family: 'Font';
    src: url('../fonts/Font-Light.woff2') format('woff2'),
        url('../fonts/Font-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

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

@font-face {
    font-family: 'Font';
    src: url('../fonts/Font-Medium.woff2') format('woff2'),
        url('../fonts/Font-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}



/*MAIN*/

img,
a,
button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
    -moz-user-select: none;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

::selection {
    background-color: var(--color1);
    color: var(--color2);
}

:root {
    --size1: calc(0.5px + (1 - 0.5) * ((100vw - 320px) / (1920 - 320)));
    --size2: calc(1px + (2 - 1) * ((100vw - 320px) / (1920 - 320)));
    --size3: calc(2px + (3 - 2) * ((100vw - 320px) / (1920 - 320)));
    --size4: calc(2px + (4 - 2) * ((100vw - 320px) / (1920 - 320)));
    --size5: calc(2.5px + (5 - 2.5) * ((100vw - 320px) / (1920 - 320)));
    --size8: calc(4px + (8 - 4) * ((100vw - 320px) / (1920 - 320)));
    --size10: calc(5px + (10 - 5) * ((100vw - 320px) / (1920 - 320)));
    --size14: calc(7px + (14 - 7) * ((100vw - 320px) / (1920 - 320)));
    --size16: calc(8px + (16 - 8) * ((100vw - 320px) / (1920 - 320)));
    --size18: calc(9px + (18 - 9) * ((100vw - 320px) / (1920 - 320)));
    --size20: calc(10px + (20 - 10) * ((100vw - 320px) / (1920 - 320)));
    --size24: calc(12px + (24 - 12) * ((100vw - 320px) / (1920 - 320)));
    --size26: calc(13px + (26 - 13) * ((100vw - 320px) / (1920 - 320)));
    --size30: calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320)));
    --size32: calc(16px + (32 - 16) * ((100vw - 320px) / (1920 - 320)));
    --size34: calc(17px + (34 - 17) * ((100vw - 320px) / (1920 - 320)));
    --size36: calc(18px + (36 - 18) * ((100vw - 320px) / (1920 - 320)));
    --size40: calc(20px + (40 - 20) * ((100vw - 320px) / (1920 - 320)));
    --size42: calc(21px + (42 - 21) * ((100vw - 320px) / (1920 - 320)));
    --size44: calc(22px + (44 - 22) * ((100vw - 320px) / (1920 - 320)));
    --size46: calc(23px + (46 - 23) * ((100vw - 320px) / (1920 - 320)));
    --size48: calc(24px + (48 - 24) * ((100vw - 320px) / (1920 - 320)));
    --size50: calc(25px + (50 - 25) * ((100vw - 320px) / (1920 - 320)));
    --size60: calc(30px + (60 - 30) * ((100vw - 320px) / (1920 - 320)));
    --size70: calc(35px + (70 - 35) * ((100vw - 320px) / (1920 - 320)));
    --size80: calc(40px + (80 - 40) * ((100vw - 320px) / (1920 - 320)));
    --size84: calc(42px + (84 - 42) * ((100vw - 320px) / (1920 - 320)));
    --size96: calc(48px + (96 - 48) * ((100vw - 320px) / (1920 - 320)));
    --size100: calc(50px + (100 - 50) * ((100vw - 320px) / (1920 - 320)));
    --size120: calc(60px + (120 - 60) * ((100vw - 320px) / (1920 - 320)));
    --size150: calc(75px + (150 - 75) * ((100vw - 320px) / (1920 - 320)));
    --size200: calc(100px + (200 - 100) * ((100vw - 320px) / (1920 - 320)));
    --size250: calc(100px + (250 - 100) * ((100vw - 320px) / (1920 - 320)));
    --size400: calc(200px + (400 - 200) * ((100vw - 320px) / (1920 - 320)));
}



html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: var(--color2);
    color: var(--color1);
    font-family: 'Font';
    font-weight: 300;
}

h1 {
    font-size: var(--size250);
    font-weight: 500;
    letter-spacing: -0.08em;
}

img {
    max-width: 100%;
}



/*NAV*/

.nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: var(--size50);
    top: 50%;
    transform: translateY(-50%);
}

.nav__link {
    display: flex;
    width: var(--size30);
    height: var(--size30);
    margin: 0 0 var(--size10) 0;

    border-radius: 50%;
    border: var(--size2) solid var(--color1);
    background-color: transparent;

    transition: 0.2s;
}

.nav__link:last-child {
    margin: 0;
}

.nav__link.active {
    background-color: var(--color1);
}



/*SCROLL DOWN*/

/*.scroll__btn {
    position: absolute;
    bottom: var(--size20);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.scroll__btn path {
    fill: var(--color1);
}*/



/*BACK TO TOP*/

.back-to-top {
    position: fixed;
    bottom: var(--size50);
    right: var(--size50);
    height: var(--size70);
    width: var(--size70);
    background-color: transparent;
    backdrop-filter: blur(var(--size30));
    -webkit-backdrop-filter: blur(var(--size30));
    border: var(--size2) solid var(--color1);
    border-radius: 50%;
    transition: 0.2s;
    z-index: 5;
    visibility: hidden;
    opacity: 0;
}

.back-to-top:active path {
    fill: var(--color2);
}

.back-to-top:active {
    transform: scale(0.9);
    background-color: var(--color1);
}

.back-to-top svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.back-to-top path {
    fill: var(--color1);
}

.back-to-top svg {
    width: 70%;
    height: 70%;
}

.back-to-top.active {
    visibility: visible;
    opacity: 1;
}



/*LANDING*/

.landing {
    position: relative;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: var(--size60) var(--size120);
    overflow: hidden;
    min-height: 100vh;
}

.noise {
    animation: noise 8s steps(10) infinite;
    background-image: url(../img/noise.png);
    content: "";
    height: 300%;
    left: -50%;
    opacity: 0.3;
    position: fixed;
    top: -110%;
    width: 300%;
}

@keyframes noise {

    0%,
    100% {
        transform: translate(0, 0)
    }

    10% {
        transform: translate(-5%, -10%)
    }

    20% {
        transform: translate(-15%, 5%)
    }

    30% {
        transform: translate(7%, -25%)
    }

    40% {
        transform: translate(-5%, 25%)
    }

    50% {
        transform: translate(-15%, 10%)
    }

    60% {
        transform: translate(15%, 0%)
    }

    70% {
        transform: translate(0%, 15%)
    }

    80% {
        transform: translate(3%, 35%)
    }

    90% {
        transform: translate(-10%, 10%)
    }
}

.model__frame {
    background-color: var(--color2);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    width: 200%;
}

.model {
    display: flex;
    height: var(--model-max);
    mix-blend-mode: difference;
    align-items: center;
    justify-content: center;
}

.landing__img {
    content: var(--image);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.contact {
    position: absolute;
    right: var(--size50);
    bottom: var(--size50);
}

.contact__row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.contact__link {
    display: flex;
}

.contact__text {
    display: flex;
    padding: 0;
}

.contact__text span {
    color: var(--color1);
    font-size: var(--size32);
}

.contact__link path {
    fill: var(--color1);
}

.contact__icon {
    width: var(--size36);
    height: var(--size36);
    margin-bottom: var(--size4);
    transition: 0.2s;
}

.contact__link:active .contact__icon {
    transform: rotate(45deg);
}


/*controls*/
.dropdown {
    position: absolute;
    top: var(--size50);
    left: var(--size50);
    display: flex;
}

.lang {
    margin-right: var(--size20);
}

.lang,
.theme {
    border: var(--size2) solid var(--color1);
    border-radius: var(--size10);
    overflow: hidden;
}

.lang a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--size10) 0;
    padding-bottom: var(--size14);
    min-width: var(--size70);
    transition: 0.2s;
}

.theme a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--size10) var(--size14);
    padding-bottom: var(--size14);
    min-width: var(--size150);
    transition: 0.2s;
}

.lang a,
.theme a {
    display: none;
}

.lang .active,
.theme .active {
    display: flex;
    background-color: var(--color1);
    color: var(--color2);
}

.lang:hover a,
.theme:hover a {
    display: flex;
}

.en,
.ru,
.btn {
    font-size: var(--size26);
}



/*ABOUT*/

.about {
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    overflow: hidden;
}

.about__row {
    display: flex;
    padding: var(--size60) var(--size120);
}

.row__item {
    display: flex;
    flex-direction: column;
    margin: 0 var(--size60) 0 0;
    justify-content: flex-end;
}

#scroll__block {
    width: 30%;
}

#info__block {
    width: 36%;
    margin: 0 var(--size30) 0 0;
}

#about__block {
    width: 37%;
}

.row__item:last-child {
    margin: 0;
}

.row__item h2 {
    max-width: 400px;
    font-weight: 400;
    font-size: var(--size96);
    line-height: var(--size96);
    text-transform: uppercase;
}

.item__block {
    display: flex;
    flex-direction: column;
    padding: var(--size40) 0;

    border-bottom: 1px solid var(--border-color);
    ;
}

.item__block:last-child {
    border-bottom: 0;
    padding: var(--size40) 0 0 0;
}

.item__block h3 {
    padding: 0 0 var(--size16);
    0;

    font-weight: 400;
    font-size: var(--size48);
}

.item__block p,
.item__block ul li {
    max-width: 476px;
    font-size: var(--size20);
    letter-spacing: -0.01em;
    line-height: 120%;

    color: var(--color-soft);
}

.item__avatar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 var(--size50) 0;
    overflow: hidden;
}

.item__avatar img {
    width: 100%;
    border-radius: var(--size60);

}

.item__about {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 var(--size10) 0 0;
}

.about__title {
    margin: 0 0 var(--size2) 0;

    font-size: var(--size20);
    font-weight: 400;
    text-align: right;
    flex: none;
}

.about__text {
    font-weight: 300;
    font-size: var(--size20);
    letter-spacing: -0.02em;
    text-align: right;
    flex: none;

    color: var(--color-soft);
}



/*STAGES*/

.stages {
    display: flex;

    position: relative;
    overflow: hidden;
}

.stages__row {
    display: flex;
    width: 100%;
    padding: var(--size60) var(--size120);
    justify-content: space-between;
}

.stages__title {
    display: flex;
    flex-direction: column;
    margin: 0 var(--size60) 0 0;
}

.stages__title h2 {
    max-width: 720px;
    font-weight: 400;
    font-size: var(--size96);
    line-height: var(--size96);
    text-transform: uppercase;
}

.stages__body {
    display: flex;
    width: 100%;
}

/*accordion*/
.accordion {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.accordion__item {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--size16) 0;

    border-bottom: 1px solid var(--border-color);
}

.accordion__item:first-child {
    padding: 0 0 var(--size16) 0;
}

.accordion__item:last-child {
    border-bottom: 0;
    padding: var(--size16) 0 0 0;
}

.accordion__item h3 {
    font-weight: 400;
    font-size: var(--size40);
}

.accordion__title {
    display: flex;
    justify-content: space-between;
    padding: var(--size10) 0;
}

.text__break {
    word-break: break-all;
}

.accordion__icon {
    display: flex;
    width: var(--size40);
    height: var(--size40);
    align-items: center;
    justify-content: center;
}

.accordion__icon path {
    stroke: var(--color1);
}

.accordion__text {
    font-size: var(--size20);
    letter-spacing: -0.01em;
    line-height: 140%;

    color: var(--color-soft);

    max-height: 0;
    overflow: hidden;
}

.accordion__text,
.accordion__icon {
    transition: 0.1s ease;
}

.accordion__icon svg {
    transition: transform 0.1s ease;
}

.accordion__item.active .accordion__icon svg {
    transform: rotate(-45deg);
}


/*stages blob*/

.blob {
    fill: #fff;
    width: 28vmax;
    z-index: 1;
    animation: move 10s ease-in-out infinite;
    transform-origin: 50% 50%;
    mix-blend-mode: difference;
}

@keyframes move {
    0% {
        transform: scale(1);
    }

    38% {
        transform: scale(0.8, 1) rotate(160deg);
    }

    40% {
        transform: scale(0.8, 1) rotate(160deg);
    }

    78% {
        transform: scale(1.3) rotate(-20deg);
    }

    80% {
        transform: scale(1.3) rotate(-20deg);
    }

    100% {
        transform: scale(1);
    }
}



/*CONNECT*/

.connect {
    display: flex;
    position: relative;
    overflow: hidden;
}

.connect__column {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--size60) var(--size120);
}

.connect__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.connect__title h2 {
    max-width: 1000px;
    font-weight: 400;
    font-size: var(--size96);
    line-height: var(--size96);
    text-transform: uppercase;
}

.connect__body {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin: var(--size60) 0 0 0;
}

.connect__subtitle {
    display: flex;
    font-size: var(--size40);
    margin: 0 0 var(--size40) 0;
}

.connect__subtitle h3 {
    font-weight: 400;
}

.connect__row {
    display: flex;
    justify-content: space-between;
}

.connect__links {
    display: flex;
    flex-direction: column;
    font-size: var(--size32);
    justify-content: flex-end;
}

.connect__link {
    display: flex;
    margin: 0 0 var(--size20) 0;
}

.connect__link h4 {
    font-weight: 300;
    color: var(--color1);
    margin: 0 var(--size20) 0 0;
}


/*connect form*/

.form__body {
    display: flex;
    flex-direction: column;
    margin-right: var(--size80);
}

.form {
    max-width: 100%;
    display: flex;
    flex-direction: column;

}

.form__btn {
    display: flex;
    background-color: var(--color1);
    color: var(--color2);
    font-size: var(--size26);
    border-radius: var(--size14);
    padding: var(--size14) var(--size26);
    max-width: 100%;
    width: 100%;
    justify-content: center;
    font-weight: 300;
}

.input-container {
    position: relative;
    margin-bottom: var(--size32);
    max-width: 100%;

}

.input-container input {
    font-size: var(--size20);
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--color-soft);
    padding: 3px 0;
    background-color: transparent;
    outline: none;
    color: var(--color1);
    border-radius: 0;
}

.input-container .label {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--color-soft);
    transition: all 0.2s ease;
    pointer-events: none;
    font-size: var(--size24);
}

.input-container input:focus~.label,
.input-container input:valid~.label {
    top: -16px;
    font-size: var(--size16);
    color: var(--color1);
}

.input-container .underline {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: var(--color1);
    transform: scaleX(0);
    transition: all 0.3s ease;
}

.input-container input:focus~.underline,
.input-container input:valid~.underline {
    transform: scaleX(1);
}



/*connect circle*/

.available__frame {
    display: flex;
    max-width: 100%;
    justify-content: flex-end;
}

.square {
    position: relative;
    width: var(--size400);
    height: var(--size400);
    display: flex;
    justify-content: center;
    align-items: center;
}

.square span:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--color1);
    border-radius: 32% 58% 69% 43% / 48% 32% 59% 55%;
    transition: 0.5s;
    animation: animate 6s linear infinite;
}

.square span:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--color1);
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    transition: 0.5s;
    animation: animate 4s linear infinite;
}

.square span:nth-child(3) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--color1);
    border-radius: 31% 45% 74% 35% / 38% 56% 51% 87%;
    transition: 0.5s;
    animation: animate2 10s linear infinite;
}

.text:hover span:nth-child(1) {
    border: none;
    background: var(--color1);
}

.text:hover span:nth-child(2) {
    border: none;
    background: var(--color1);
}

.text:hover span:nth-child(3) {
    border: none;
    background: var(--color1);
}

.text:hover .square__title {
    color: var(--color2);
}

.square__title {
    position: relative;
    padding: var(--size40) var(--size60);
    color: var(--color1);
    text-align: center;
    transition: 0.5s;
    z-index: 1;
    font-size: var(--size20);
    line-height: 140%;
}

@keyframes animate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes animate2 {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}



/*WORKS*/

.works {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.works__row {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.title__padding {
    padding: 0 var(--size120);
    padding-bottom: var(--size60);
}

.works__block {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 0 var(--size30) 0;
}

.works__block:last-child {
    margin: 0 0 var(--size200) 0;
}

.block__body {
    max-width: 100%;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;


    scrollbar-width: none;
    -ms-overflow-style: none;

    padding: 5px var(--size120);
}

.block__body::-webkit-scrollbar {
    display: none;
}

.swiper-wrapper {
    display: flex;
}

.block__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--size10) var(--size120) var(--size20) var(--size120);
}

.subtitle__padding {
    padding: var(--size10) var(--size30) var(--size20) var(--size120);
}

.block__title h3 {
    letter-spacing: -0.01em;
    font-weight: 400;
    font-size: var(--size48);
}

.arrows {
    display: flex;
    margin-left: var(--size20);
}

.arrow__left svg,
.arrow__right svg,
.arrow__left-web svg,
.arrow__right-web svg {
    width: var(--size60);
    height: var(--size60);
}

.arrow__left path,
.arrow__right path,
.arrow__left-web path,
.arrow__right-web path {
    fill: var(--color1);
}

.arrow__disabled {
    opacity: 0.5;
    pointer-events: none;
}

.column__item {
    display: flex;
    margin: 0 var(--size20) 0 0;
}

.column__item:last-child {
    margin: 0;
}

.item__row {
    display: flex;
    align-items: center;
}

.item__img {
    width: var(--size400);
    display: flex;
    border-radius: var(--size20);
    transition: 0.25s;
    overflow: hidden;
}

.item__img:active {
    transform: scale(0.97, 0.96);
}

.row__img:last-child {
    margin: 0;
}

.item__link {
    width: 46%;
    display: flex;
    align-items: center;
}

.link__text {
    display: flex;
    flex: none;
    align-items: center;
    font-weight: 300;
    font-size: var(--size24);
}

.link__text span {
    display: flex;
    background-color: transparent;
    color: var(--color1);
}

.link__text:active .link__icon {
    transform: rotate(45deg);
}

.link__text-connect {
    font-weight: 300;
    font-size: var(--size32);
}

.link__icon {
    width: var(--size32);
    height: var(--size32);
    transition: 0.2s;
}

.link__icon svg {
    width: 100%;
    height: 100%;
}

.link__icon path {
    fill: var(--color1);
}

.btn__underline {
    position: relative;
    padding-bottom: 5px;
}

.btn__underline:after {
    content: "";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: var(--color1);
    border-radius: 5px;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.block__item {
    display: flex;
    flex-direction: column;
    padding: 0 0 var(--size20) 0;
}

.block__item:last-child {
    padding: 0;
}

.block__column {
    display: flex;
    flex-direction: column;
    margin: 0 var(--size20) 0 0;
}

.block__column:last-child {
    margin: 0;
}

.row__img {
    width: var(--size400);
    display: flex;
    margin: 0 0 var(--size20) 0;
    justify-content: center;
    transition: 0.25s;
    border-radius: var(--size20);
    overflow: hidden;
}

.row__img:active {
    transform: scale(0.97, 0.96);
}


.row__img:last-child {
    margin: 0;
}



/*POPUP*/

.popup__uiux {
    display: none;
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 2;
    overflow: hidden;
}

.popup__website {
    display: none;
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 2;
}

.popup__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    backdrop-filter: blur(var(--size120));
    -webkit-backdrop-filter: blur(var(--size120));
    background-color: var(--blur-color);
    /*    border-radius: var(--size120);*/
    padding: var(--size60) var(--size80);
}

.popup__header {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

.header__icon path {
    stroke: var(--color1);
}

.popup__content {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    padding: 0 0 var(--size50) 0;
}

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

.item__img-popup {
    width: 50%;
    border-radius: var(--size40);
    overflow: hidden;
    -webkit-box-shadow: 0px 0px 70px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 70px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 70px 0px rgba(0, 0, 0, 0.2);
}

.popup__links {
    display: flex;
    flex-direction: column;
    margin-left: var(--size60);
}

.item__link-popup {
    margin: 0 0 var(--size30) 0;
}

.item__link-popup:last-child {
    margin: 0;
}

.link__text-popup {
    font-size: var(--size48);
}

.link__icon-popup {
    width: var(--size60);
    height: var(--size60);
}

.btn__underline-popup {
    padding-bottom: var(--size10);
}

.btn__underline-popup:after {
    content: "";
    height: var(--size2);
    border-radius: var(--size10);
}

#popup-1,
#popup-2,
#popup-3,
#popup-4,
#popup-5,
#popup-6,
#popup-7,
#popup-8,
#popup-9,
#popup-10,
#popup-11,
#popup-12,
#popup-13,
#popup-14,
#popup-15,
#popup-16,
#popup-17,
#popup-18,
#popup-19,
#popup-20,
#popup-21,
#popup-22,
#popup-23,
#popup-24,
#popup-25 {
    display: none;
}

#popupweb-1,
#popupweb-2,
#popupweb-3,
#popupweb-4,
#popupweb-5,
#popupweb-6,
#popupweb-7,
#popupweb-8,
#popupweb-9,
#popupweb-10,
#popupweb-11,
#popupweb-12,
#popupweb-13,
#popupweb-14,
#popupweb-15,
#popupweb-16,
#popupweb-17,
#popupweb-18,
#popupweb-19,
#popupweb-20 {
    display: none;
}



/*MEDIA*/

@media (min-width: 1025px) {

    .landing,
    .about,
    .stages,
    .connect,
    .works {
        min-height: 100vh;
    }
}

@media (max-width: 1300px) {
    #scroll__block {
        display: none;
    }

    #info__block {
        width: 60%;
    }

    #about__block {
        width: 40%;
    }
}

@media (max-width: 1200px) {
    .connect__row {
        flex-direction: column;
    }

    .form__body {
        margin: 0;
    }

    .form {
        margin-bottom: var(--size40);
    }

    .connect__links {
        margin-top: var(--size40);
    }
}

@media (max-width: 1024px) {
    .nav {
        display: none;
    }

    /*.scroll__btn {
        display: none;
    }*/

    .back-to-top {
        height: var(--size100);
        width: var(--size100);
        border: var(--size3) solid var(--color1);
    }

    .landing {
        padding: var(--size400) var(--size120);
    }

    #info__block {
        width: 100%;
    }

    #about__block {
        width: 100%;
    }

    .item__about {
        padding: 0 var(--size10) 0 0;
    }

    .item__block h3 {
        font-size: var(--size40);
    }

    .item__block p,
    .item__block ul li {
        font-size: var(--size26);
    }

    .about__title,
    .about__text {
        font-size: var(--size26);
    }

    .works__row {
        flex-direction: column;
    }

    .works__block {
        margin: 0 0 var(--size30) 0;
    }

    .works__block:last-child {
        padding: 0;
    }

    .block__item {
        padding: 0 0 var(--size80) 0;
    }

    .block__title {
        padding: var(--size10) 0 var(--size40) 0;
    }

    .subtitle__padding {
        padding-bottom: var(--size20);
    }

    .link__text {
        font-size: var(--size26);
    }

    .row__img:active {
        transform: scale(0.98, 0.96);
        transition: 0.2s;
    }

    .row__img {
        border-radius: var(--size24);
    }

    .popup__uiux {
        padding: 0;
    }

    .popup__body {
        border-radius: 0;
        padding: var(--size50);
    }

    .popup__links {
        padding: 0;
    }

    .popup__content {
        padding: 0 0 var(--size50) 0;
        width: 80%;
    }

    .link__text-popup {
        font-size: var(--size48);
    }

    .btn__underline-popup {
        padding-bottom: var(--size10);
    }

    .btn__underline-popup:after {
        content: "";
        height: var(--size2);
        border-radius: var(--size10);
    }

    .item__img-popup {
        width: 100%;
    }

    .stages__title h2,
    .connect__title h2 {
        font-size: var(--size70);
        line-height: var(--size70);
    }

    .item__img {
        border-radius: var(--size24);
    }

    .form {
        max-width: 100%;
    }

    .form__btn {
        font-size: var(--size32);
        border-radius: var(--size16);
        padding: var(--size16) var(--size32);
    }

    .input-container {
        margin-bottom: var(--size40);
    }

    .input-container input {
        font-size: var(--size24);
        width: 100%;
        padding: 3px 0;
    }

    .input-container .label {
        font-size: var(--size32);
    }

    .input-container input:focus~.label,
    .input-container input:valid~.label {
        top: -14px;
        font-size: var(--size20);
    }

    .input-container .underline {
        height: 2px;
    }

    .subtitle__padding {
        padding: var(--size10) var(--size30) var(--size20) var(--size120);
    }

}

@media (max-width: 960px) {
    .stages__row {
        flex-direction: column;
    }

    .stages__title h2,
    .connect__title h2 {
        font-size: var(--size96);
        line-height: var(--size96);
    }

    .accordion__item h3 {
        font-size: var(--size40);
    }

    .accordion__item {
        padding: var(--size20) 0;
    }

    .accordion__item:first-child {
        padding: 0 0 var(--size20) 0;
    }

    .accordion__item:last-child {
        padding: var(--size20) 0 0 0;
    }

    .accordion__title {
        padding: var(--size20) 0;
    }

    .accordion__icon {
        width: var(--size48);
        height: var(--size48);
    }

    .blob {
        width: 50vmax;
        max-height: 250px;
    }
}

@media (max-width: 850px) {
    .contact__icon {
        width: var(--size50);
        height: var(--size50);
        margin-bottom: var(--size4);
    }

    .contact__text span {
        font-size: var(--size40);
    }

    .square {
        align-self: flex-end;
    }

    /*connect form*/
    .form {
        margin-bottom: var(--size80);
    }

    .connect__links {
        margin-top: var(--size80);
    }

    .item__img-popup {
        margin: 0 0 var(--size20) 0;
    }
}

@media (max-width: 680px) {

    .lang,
    .theme {
        border: var(--size3) solid var(--color1);
        border-radius: var(--size14);
    }

    .lang a {
        font-size: var(--size32);
        padding: var(--size14) 0;
        padding-bottom: var(--size18);
        min-width: var(--size100);
    }

    .theme a {
        font-size: var(--size32);
        padding: var(--size14) 0;
        padding-bottom: var(--size18);
        min-width: var(--size200);
    }

    .about__row {
        flex-direction: column;
        align-items: center;
        padding: var(--size60) var(--size60);
    }

    #about__block {
        order: 1;
        width: 100%;
        margin: 0 0 var(--size40) 0;
    }

    #info__block {
        order: 2;
        width: 100%;
        margin: 0;
    }

    .item__avatar {
        margin: 0 0 var(--size32) 0;
    }

    .item__avatar img {
        width: 80%;
    }

    .item__about {
        padding: 0 var(--size20) 0 0;
    }

    .row__item {
        margin: 0;
    }

    .popup__container {
        flex-direction: column;
        align-items: flex-start;
    }

    .popup__links {
        margin-left: var(--size24);
    }

    .item__img-popup {
        margin: 0 0 var(--size24) 0;
    }

    .stages__row {
        padding: var(--size60) var(--size60);
    }

    .accordion__text {
        font-size: var(--size26);
    }

    .connect__column {
        padding: var(--size60) var(--size60);
    }

    .block__body {
        padding: 3px var(--size60);
    }

    .row__img {
        border-radius: var(--size30);
    }

    .item__img {
        border-radius: var(--size30);
    }

    .title__padding {
        padding: 0 var(--size60);
    }

    .title__padding {
        padding-bottom: var(--size60);
    }

    .block__title {
        justify-content: space-between;
    }

    .subtitle__padding {
        padding: var(--size10) var(--size30) var(--size20) var(--size60);
    }
}

@media (max-width: 600px) {

    .stages__title h2,
    .connect__title h2 {
        font-size: var(--size60);
        line-height: var(--size60);
    }

    .blob {
        width: 30vmax;
        max-height: 200px;
    }

    .connect__row {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 550px) {
    .row__img {
        border-radius: var(--size26);
    }

    .item__img {
        border-radius: var(--size26);
    }
}

@media (max-width: 500px) {
    .popup__content {
        width: 100%;
    }

    .available__frame {
        justify-content: center;
    }
}

@media (max-width: 400px) {
    .block__column {
        flex-direction: column;
    }

    .stages__title h2 {
        font-size: var(--size60);
        line-height: var(--size60);
    }

    .accordion__item h3 {
        font-size: var(--size40);
    }

    .accordion__icon {
        width: var(--size40);
        height: var(--size40);
    }

    .connect__links {
        padding: 0;
    }

    .item__avatar img {
        width: 100%;
    }

    .item__about {
        padding: 0;
    }

    .about__row,
    .stages__row,
    .connect__column {
        padding: var(--size60) var(--size40);
    }

    .title__padding {
        padding: 0 var(--size40) var(--size60) var(--size40);
    }

    .subtitle__padding {
        padding: var(--size10) var(--size40) var(--size20) var(--size40);
    }

    .block__body {
        padding: 3px var(--size40);
    }
}

@media (hover: hover) {

    /*PSEUDO*/
    .contact__link:hover .contact__icon {
        transform: rotate(45deg);
    }

    .contact__link:active .contact__icon {
        transform: rotate(45deg);
    }

    .back-to-top:hover {
        background-color: var(--color1);
    }

    .back-to-top:hover path {
        fill: var(--color2);
    }

    .back-to-top:active {
        transform: scale(0.8);
    }

    .link__text:hover .link__icon {
        transform: rotate(45deg);
    }

    .link__text:active .link__icon {
        transform: rotate(45deg);
    }

    .link__text:hover .btn__underline:after {
        transform: scaleX(1);
        transform-origin: bottom left;
    }

    .row__img:hover {
        transform: scale(1.02, 1.04);
    }

    .row__img:active {
        transform: scale(0.97, 0.96);
    }

    .item__img:hover {
        transform: scale(1.02, 1.03);
    }

    .item__img:active {
        transform: scale(0.97, 0.96);
    }

    body,
    a,
    button {
        cursor: none;
    }

    .custom-cursor {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #fff;
        position: fixed;
        transform: translate(-50%, -50%);
        transition: width 0.2s, height 0.2s;
        pointer-events: none;
        mix-blend-mode: difference;
        z-index: 50;
    }



    @media (max-width: 1024px) {
        .row__img:hover {
            transform: scale(1.02, 1.04);
        }

        .row__img:active {
            transform: scale(0.98, 0.96);
        }
    }

}