@charset "UTF-8";
:root {
    --font-family: "Effra", sans-serif;
    --content-width: 2000px;
    --container-offset: 0px;
    --container-width: calc(var(--content-width) + (var(--container-offset) * 2));
    --cs-white: #fff;
    --cs-body-bg: var(--cs-white);
    --cs-violet-main: #ff4521;
    --cs-violet-bright: #f86043;
    --cs-violet-light: #f68a76;
    --cs-violet-lighter: #facbc2;
    --cs-text: #000;
    --cs-text-2: #070417;
    --cs-bg-light: #F2F6FA;
    --cs-bg-lighter: #F7F8FB;
    --cs-bg-white: #F5F5F5
}

@-webkit-keyframes borderRun {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes borderRun {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes cursorAnim {
    from {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    to {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
}

@keyframes cursorAnim {
    from {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    to {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
}

@-webkit-keyframes cursorAnim2 {
    from {
        -webkit-transform: scale(.6);
        transform: scale(.6)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes cursorAnim2 {
    from {
        -webkit-transform: scale(.6);
        transform: scale(.6)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes pulseGlow {
    0% {
        text-shadow: 0 0 20px rgba(251, 99, 23, .75)
    }
    50% {
        text-shadow: 0 0 40px rgba(251, 99, 23, .5)
    }
    100% {
        text-shadow: 0 0 20px rgba(251, 103, 23, .75)
    }
}

@keyframes pulseGlow {
    0% {
        text-shadow: 0 0 20px rgba(251, 99, 23, .75)
    }
    50% {
        text-shadow: 0 0 40px rgba(251, 99, 23, .5)
    }
    100% {
        text-shadow: 0 0 20px rgba(251, 103, 23, .75)
    }
}

@-webkit-keyframes pulseShadow {
    0% {
        -webkit-box-shadow: 0 0 30px rgba(251, 99, 23, .25);
        box-shadow: 0 0 30px rgba(251, 99, 23, .25)
    }
    50% {
        -webkit-box-shadow: 0 0 30px rgba(251, 114, 23, .75);
        box-shadow: 0 0 30px rgba(251, 114, 23, .75)
    }
    100% {
        -webkit-box-shadow: 0 0 30px rgba(251, 95, 23, .25);
        box-shadow: 0 0 30px rgba(251, 95, 23, .25)
    }
}

@keyframes pulseShadow {
    0% {
        -webkit-box-shadow: 0 0 30px rgba(251, 99, 23, .25);
        box-shadow: 0 0 30px rgba(251, 99, 23, .25)
    }
    50% {
        -webkit-box-shadow: 0 0 30px rgba(251, 114, 23, .75);
        box-shadow: 0 0 30px rgba(251, 114, 23, .75)
    }
    100% {
        -webkit-box-shadow: 0 0 30px rgba(251, 95, 23, .25);
        box-shadow: 0 0 30px rgba(251, 95, 23, .25)
    }
}

@-webkit-keyframes spinBG {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes spinBG {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes spinBG2 {
    0% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        -webkit-box-shadow: 0 0 1px rgba(251, 95, 23, .5);
        box-shadow: 0 0 1px rgba(251, 95, 23, .5)
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        -webkit-box-shadow: 0 0 20px rgba(251, 95, 23, .5);
        box-shadow: 0 0 20px rgba(251, 95, 23, .5)
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-box-shadow: 0 0 1px rgba(251, 95, 23, .5);
        box-shadow: 0 0 1px rgba(251, 95, 23, .5)
    }
}

@keyframes spinBG2 {
    0% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        -webkit-box-shadow: 0 0 1px rgba(251, 95, 23, .5);
        box-shadow: 0 0 1px rgba(251, 95, 23, .5)
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        -webkit-box-shadow: 0 0 20px rgba(251, 95, 23, .5);
        box-shadow: 0 0 20px rgba(251, 95, 23, .5)
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-box-shadow: 0 0 1px rgba(251, 95, 23, .5);
        box-shadow: 0 0 1px rgba(251, 95, 23, .5)
    }
}

@-webkit-keyframes spinBG3 {
    0% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        -webkit-box-shadow: 0 0 1px rgba(251, 99, 23, .1);
        box-shadow: 0 0 1px rgba(251, 99, 23, .1)
    }
    50% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg)
    }
}

@keyframes spinBG3 {
    0% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        -webkit-box-shadow: 0 0 1px rgba(251, 99, 23, .1);
        box-shadow: 0 0 1px rgba(251, 99, 23, .1)
    }
    50% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg)
    }
}

@-webkit-keyframes spinBG4 {
    0% {
        -webkit-transform: rotate3d(1, 1, 1, 0deg);
        transform: rotate3d(1, 1, 1, 0deg)
    }
    100% {
        -webkit-transform: rotate3d(1, 1, 1, 360deg);
        transform: rotate3d(1, 1, 1, 360deg)
    }
}

@keyframes spinBG4 {
    0% {
        -webkit-transform: rotate3d(1, 1, 1, 0deg);
        transform: rotate3d(1, 1, 1, 0deg)
    }
    100% {
        -webkit-transform: rotate3d(1, 1, 1, 360deg);
        transform: rotate3d(1, 1, 1, 360deg)
    }
}

@-webkit-keyframes increaseScale {
    from {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    to {
        -webkit-transform: scale(5);
        transform: scale(5)
    }
}

@keyframes increaseScale {
    from {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    to {
        -webkit-transform: scale(5);
        transform: scale(5)
    }
}

@-webkit-keyframes decreaseOpacity {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@keyframes decreaseOpacity {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-webkit-keyframes increaseOpacity {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes increaseOpacity {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-webkit-keyframes swing {
    15% {
        -webkit-transform: translateX(9px);
        transform: translateX(9px)
    }
    30% {
        -webkit-transform: translateX(-9px);
        transform: translateX(-9px)
    }
    40% {
        -webkit-transform: translateX(6px);
        transform: translateX(6px)
    }
    50% {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px)
    }
    65% {
        -webkit-transform: translateX(3px);
        transform: translateX(3px)
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes swing {
    15% {
        -webkit-transform: translateX(9px);
        transform: translateX(9px)
    }
    30% {
        -webkit-transform: translateX(-9px);
        transform: translateX(-9px)
    }
    40% {
        -webkit-transform: translateX(6px);
        transform: translateX(6px)
    }
    50% {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px)
    }
    65% {
        -webkit-transform: translateX(3px);
        transform: translateX(3px)
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes decreaseScale {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1
    }
}

@keyframes decreaseScale {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1
    }
}

@-webkit-keyframes increaseScaleSm {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes increaseScaleSm {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes scrollRunning {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    100% {
        -webkit-transform: translate(-100%, 0);
        transform: translate(-100%, 0)
    }
}

@keyframes scrollRunning {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    100% {
        -webkit-transform: translate(-100%, 0);
        transform: translate(-100%, 0)
    }
}

@-webkit-keyframes bounce {
    100% {
        opacity: .3;
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
}

@keyframes bounce {
    100% {
        opacity: .3;
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
}

@-webkit-keyframes runSlideBg {
    0% {
        width: 0
    }
    100% {
        width: 100%
    }
}

@keyframes runSlideBg {
    0% {
        width: 0
    }
    100% {
        width: 100%
    }
}

.preloader-dots {
    position: fixed;
    background: var(--cs-bg-light);
    width: 100%;
    height: 100%;
    z-index: 1000;
    opacity: 1;
    -webkit-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
    overflow: hidden;
    pointer-events: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.preloader-dots.remove {
    -webkit-animation: 3s ease-in-out forwards decreaseOpacity;
    animation: 3s ease-in-out forwards decreaseOpacity
}

.preloader-dots div {
    width: 16px;
    height: 16px;
    margin: 32px 8px;
    background: var(--cs-violet-main);
    border-radius: 50%;
    -webkit-animation: .9s infinite alternate bounce;
    animation: .9s infinite alternate bounce
}

.preloader-dots div:nth-child(2) {
    -webkit-animation-delay: .3s;
    animation-delay: .3s
}

.preloader-dots div:last-child {
    -webkit-animation-delay: .6s;
    animation-delay: .6s
}

.section {
    padding: 100px 0
}



@font-face {
    font-family: Effra;
    src: url(../fonts/effra-medium.woff2) format("woff2");
    font-weight: 500;
    font-display: swap;
    font-style: normal
}

@font-face {
    font-family: "Gotham Pro";
    src: url(../fonts/gotham-medium.woff2) format("woff2");
    font-weight: 500;
    font-display: swap;
    font-style: normal
}

@font-face {
    font-family: "Gotham Pro";
    src: url(../fonts/gotham-bold.woff2) format("woff2");
    font-weight: 700;
    font-display: swap;
    font-style: normal
}

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

body {
    font-family: var(--font-family, sans-serif);
    font-size: 16px;
    line-height: 19px;
    font-weight: 400;
    background-color: var(--cs-body-bg);
    color: var(--cs-light);
    overflow-x: hidden
}

img {
    height: auto;
    max-width: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

a {
    text-decoration: none
}

.btn-reset {
    border: none;
    padding: 0;
    background: 0 0;
    cursor: pointer
}

.list-reset {
    list-style: none;
    margin: 0;
    padding: 0
}

.input-reset {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    border-radius: 0;
    background-color: #fff
}

.input-reset::-webkit-search-cancel-button, .input-reset::-webkit-search-decoration, .input-reset::-webkit-search-results-button, .input-reset::-webkit-search-results-decoration {
    display: none
}

.visually-hidden {
    position: absolute;
    overflow: hidden;
    margin: -1px;
    border: 0;
    padding: 0;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0)
}

.main {
    position: relative
}

.wrapper {
    margin: 0 auto;
    padding: 0 var(--container-offset);
    max-width: var(--container-width);
    width: 95%
}

.js-focus-visible :focus:not(.focus-visible) {
    outline: 0
}

.dis--scroll {
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    -ms-scroll-chaining: none;
    overscroll-behavior: none
}

.page--ios .dis--scroll {
    position: relative
}

.d-none {
    display: none !important
}

::-webkit-scrollbar {
    width: 4px;
    height: 0
}

::-webkit-scrollbar-track-piece {
    background: var(--cs-violet-lighter)
}

::-webkit-scrollbar-thumb {
    height: 10px;
    background: var(--cs-violet-light);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    border-radius: 10px;
    border: 1px solid var(--cs-violet-bright)
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cs-violet-main)
}

@media (max-width: 1920px) {
    .wrapper {
        max-width: 1520px
    }
}

@media (max-width: 1440px) {
    .wrapper {
        max-width: 1240px
    }
}

@media (max-width: 1280px) {
    .wrapper {
        max-width: 1080px
    }
}

@media (max-width: 1024px) {
    .wrapper {
        max-width: 904px
    }
}

@media (max-width: 768px) {
    .wrapper {
        max-width: 670px
    }
}

@media (max-width: 428px) {
    .wrapper {
        max-width: 388px
    }
}

.header {
    background-color: var(--cs-white);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 111;
    cursor: default;
    padding: 20px 0;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out
}

.header__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.header .logo-link .logo {
    min-width: 213px
}

.header .logo-link .logo--mob, .header__left {
    display: none
}

.header .nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    list-style: none
}

.header .nav ul li {
    position: relative
}

.header .nav ul li a {
    font-weight: 400;
    font-size: 22px;
    line-height: 100%;
    color: var(--cs-text);
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out
}

.header .nav ul li a:hover {
    background: -webkit-gradient(linear, left top, right top, from(#6b2ac8), color-stop(100.02%, #5127c6));
    background: -o-linear-gradient(left, #6b2ac8 0, #5127c6 100.02%);
    background: linear-gradient(90deg, #6b2ac8 0, #5127c6 100.02%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header .nav ul li.parent a {
    position: relative;
    padding-right: 12px
}

.header .nav ul li.parent a:hover::after {
    border-color: #5127c6;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.header .nav ul li.parent a::after {
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    border-width: 2px 0 0 2px;
    border-style: solid;
    border-color: var(--cs-text);
    top: calc(50% + 2px);
    right: 0;
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out
}

.header .nav ul li.parent ul {
    min-width: 208px;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: absolute;
    background-color: rgba(255, 255, 255, .98);
    padding: 14px 20px;
    left: -20px;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
    opacity: 0;
    pointer-events: none;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out
}

.header .nav ul li.parent ul li {
    margin-right: 0;
    margin-top: 30px
}

.header .nav ul li.parent ul li a {
    padding-right: 0
}

.header .nav ul li.parent ul li a::after {
    content: none
}

.header .nav ul li.parent:hover ul {
    pointer-events: all;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
}

.header .nav ul li:not(:last-child) {
    margin-right: 40px
}

.header__right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 20px
}

.header__right .btn-transparent {
    background: -webkit-gradient(linear, left top, right top, from(#ff4521), color-stop(100.02%, #f5775f));
    background: -o-linear-gradient(left, #ff4521 0, #f5775f 100.02%);
    background: linear-gradient(90deg, #ff4521 0, #f5775f 100.02%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding: 25px;
    border-radius: 4px;
    border: 2px solid var(--cs-violet-main);
    font-weight: 500;
    font-size: 22px;
    line-height: 100%;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out
}

.header__right .btn-transparent:hover {
    border: 2px solid var(--cs-text-2);
    -webkit-text-fill-color: var(--cs-text-2)
}

.header__right .btn-main {
    font-weight: 500;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: .02em;
    color: #fff;
    background: -webkit-gradient(linear, left top, right top, from(#ff4521), color-stop(100.02%, #f5775f));
    background: -o-linear-gradient(left, #ff4521 0, #f5775f 100.02%);
    background: linear-gradient(90deg, #ff4521 0, #f5775f 100.02%);
    border-radius: 4px;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
    padding: 22px 32px;
    cursor: pointer
}

.header__right .btn-main:hover {
    background: -webkit-gradient(linear, left top, right top, from(var(--cs-text-2)), color-stop(100.02%, var(--cs-text-2)));
    background: -o-linear-gradient(left, var(--cs-text-2) 0, var(--cs-text-2) 100.02%);
    background: linear-gradient(90deg, var(--cs-text-2) 0, var(--cs-text-2) 100.02%)
}

.header .languages ul {
    border: 2px solid #e6e6e6;
    border-radius: 4px;
    width: 60px;
    height: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    list-style: none
}

.header .languages a {
    padding: 15px
}

.header .mobile-menu {
    position: absolute;
    top: 0;
    left: -100%;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, .9);
    z-index: 11;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out
}

.header .mobile-menu__container {
    width: 80%;
    margin-right: auto;
    background: -webkit-gradient(linear, left top, right top, from(#ff4521), color-stop(100.02%, #f5775f));
    background: -o-linear-gradient(left, #ff4521 0, #f5775f 100.02%);
    background: linear-gradient(90deg, #ff4521 0, #f5775f 100.02%);
    height: 100vh
}

.header .mobile-menu.menu--active {
    left: 0
}

.header .mobile-menu__content {
    padding: 60px
}

.header .mobile-menu__top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.header .mobile-menu .nav {
    display: block;
    margin-top: 100px;
    margin-bottom: 60px
}

.header .mobile-menu .nav ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 40px
}

.header .mobile-menu .nav ul li.parent a {
    padding-right: 0
}

.header .mobile-menu .nav ul li.parent a::after {
    content: none
}

.header .mobile-menu .nav ul li.parent ul {
    display: none
}

.header .mobile-menu .nav ul li a {
    font-weight: 400;
    font-size: 36px;
    line-height: 100%;
    color: var(--cs-white)
}

.header .mobile-menu .nav ul li:not(:last-child) {
    margin-right: 0
}

.header .mobile-menu .header__right .btn-main {
    font-weight: 700;
    border: 1px solid transparent;
    padding: 16px 27px;
    max-width: 220px
}

.header .mobile-menu .header__right .btn-main--white {
    color: var(--cs-text-2);
    background: var(--cs-white)
}

.header .mobile-menu .header__right .btn-main--white:hover {
    background: 0 0;
    color: var(--cs-white);
    border: 1px solid var(--cs-white)
}

.header .mobile-menu .header__right .btn-main--black {
    color: var(--cs-white);
    background: var(--cs-text-2)
}

.header .mobile-menu .header__right .btn-main--black:hover {
    background: 0 0;
    color: var(--cs-text-2);
    border: 1px solid var(--cs-text-2)
}

.header.active-scroll {
    background-color: rgba(255, 255, 255, .98)
}

.footer {
    padding: 51px 0;
    background-color: var(--cs-text-2)
}

.footer__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.footer .nav ul {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 41px
}

.footer .nav ul li a {
    font-weight: 400;
    font-size: 22px;
    line-height: 100%;
    color: #f7f7f7;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out
}

.footer .nav ul li a:hover {
    background: -webkit-gradient(linear, left top, right top, from(#ff4521), color-stop(100.02%, #f5775f));
    background: -o-linear-gradient(left, #ff4521 0, #f5775f 100.02%);
    background: linear-gradient(90deg, #ff4521 0, #f5775f 100.02%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer .copyright {
    font-weight: 400;
    font-size: 22px;
    line-height: 100%;
    color: #f7f7f7
}

.scroll-top {
    width: 98px;
    height: 98px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(143, 77, 237, .28)), color-stop(100.02%, rgba(109, 67, 225, .28)));
    background: -o-linear-gradient(left, rgba(143, 77, 237, .28) 0, rgba(109, 67, 225, .28) 100.02%);
    background: linear-gradient(90deg, rgba(143, 77, 237, .28) 0, rgba(109, 67, 225, .28) 100.02%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    position: fixed;
    z-index: 11;
    bottom: 125px;
    right: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out
}

.scroll-top .icon {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.scroll-top:hover {
    background: -webkit-gradient(linear, left top, right top, from(#6b2ac8), color-stop(100.02%, #5127c6));
    background: -o-linear-gradient(left, #6b2ac8 0, #5127c6 100.02%);
    background: linear-gradient(90deg, #6b2ac8 0, #5127c6 100.02%)
}

.graph-modal__container {
    background: -webkit-gradient(linear, left top, right top, from(#ff4521), color-stop(100.02%, #f5775f));
    background: -o-linear-gradient(left, #ff4521 0, #f5775f 100.02%);
    background: linear-gradient(90deg, #ff4521 0, #f5775f 100.02%);
    border-radius: 16px;
    padding: 40px;
    max-width: 600px;
    width: 95%
}

.graph-modal__container .graph-modal__contanet {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.graph-modal__container .graph-modal__image .image {
    display: block;
    margin: 0 auto
}

.graph-modal__container .graph-modal__title {
    font-weight: 500;
    font-size: 40px;
    line-height: 50px;
    text-align: center;
    color: var(--cs-white);
    margin-top: 0;
    margin-bottom: 0
}

.graph-modal__container .graph-modal__text {
    font-weight: 400;
    font-size: 24px;
    line-height: 34px;
    text-align: center;
    color: var(--cs-white);
    margin-top: 14px;
    margin-bottom: 50px
}

.graph-modal__container .btn-main {
    font-weight: 500;
    letter-spacing: .02em;
    color: #fff;
    background: -webkit-gradient(linear, left top, right top, from(#ff4521), color-stop(100.02%, #f5775f));
    background: -o-linear-gradient(left, #ff4521 0, #f5775f 100.02%);
    background: linear-gradient(90deg, #ff4521 0, #f5775f 100.02%);
    border-radius: 4px;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
    padding: 26px 10px;
    max-width: 175px;
    width: 100%;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    text-align: center;
    max-width: 300px;
    position: static;
    font-size: 22px;
    line-height: 22px;
    height: inherit
}

.graph-modal__container .btn-main:hover {
    background: -webkit-gradient(linear, left top, right top, from(var(--cs-text-2)), color-stop(100.02%, var(--cs-text-2)));
    background: -o-linear-gradient(left, var(--cs-text-2) 0, var(--cs-text-2) 100.02%);
    background: linear-gradient(90deg, var(--cs-text-2) 0, var(--cs-text-2) 100.02%)
}

.graph-modal__container .btn-main--black {
    background: var(--cs-text-2)
}

.graph-modal__container .btn-main--black:hover {
    background: var(--cs-white);
    color: var(--cs-text-2)
}

@media (max-width: 576px) {
    .main, .section {
        overflow: hidden
    }

    .graph-modal__container .graph-modal__container {
        padding: 30px;
        width: 90%;
        margin: 20px auto
    }

    .graph-modal__container .graph-modal__image .image {
        width: 100px
    }

    .graph-modal__container .graph-modal__title {
        font-size: 30px;
        line-height: 40px
    }

    .graph-modal__container .graph-modal__text {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 30px
    }

    .graph-modal__container .btn-main {
        font-size: 18px;
        line-height: 20px;
        padding: 20px 10px
    }
}

.btn-fixed {
    font-weight: 700;
    font-size: 22px;
    line-height: 140%;
    text-align: center;
    letter-spacing: .02em;
    color: var(--cs-white);
    border-radius: 4px 4px 0 0;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    background-color: rgba(255, 255, 255, .2);
    padding: 22px 42px;
    position: fixed;
    z-index: 111;
    right: -110px;
    top: 550px;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out
}

.btn-fixed:hover {
    background-color: rgba(255, 255, 255, .5)
}

.main__large {
    position: relative
}

.main-screen {
    margin-top: 115px;
    background-image: linear-gradient(90deg, #5b5b5b 0, #000000 100.02%);
    padding-top: 97px;
    padding-bottom: 157px;
    height: 100%;
}

.main-screen__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    margin-bottom: 60px
}

.main-screen .title {
    font-weight: 700;
    font-size: 87px;
    line-height: 112%;
    color: var(--cs-text);
    margin-top: 0;
    margin-bottom: 0;
    max-width: 810px
}

.main-screen .title span {
    color: var(--cs-white)
}

.main-screen .text {
    font-weight: 400;
    font-size: 30px;
    line-height: 42px;
    margin-top: 30px;
    margin-bottom: 50px;
    color: var(--cs-white);
    max-width: 582px
}

.main-screen .btn-main {
    line-height: 140%;
    letter-spacing: .02em;
    color: #fff;
    background: -webkit-gradient(linear, left top, right top, from(#ff4521), color-stop(100.02%, #f5775f));
    background: -o-linear-gradient(left, #ff4521 0, #f5775f 100.02%);
    background: linear-gradient(90deg, #ff4521 0, #f5775f 100.02%);
    border-radius: 4px;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
    padding: 22px 32px;
    max-width: 175px;
    width: 100%;
    cursor: pointer;
    max-width: 300px;
    font-weight: 700;
    font-size: 22px;
    border: 1px solid transparent;
    display: block;
    text-align: center
}

.main-screen .btn-main:hover {
    background: -webkit-gradient(linear, left top, right top, from(var(--cs-text-2)), color-stop(100.02%, var(--cs-text-2)));
    background: -o-linear-gradient(left, var(--cs-text-2) 0, var(--cs-text-2) 100.02%);
    background: linear-gradient(90deg, var(--cs-text-2) 0, var(--cs-text-2) 100.02%)
}

.main-screen .btn-main--black {
    color: var(--cs-white);
    background: var(--cs-text-2)
}

.main-screen .btn-main--black:hover {
    background: var(--cs-white);
    color: var(--cs-text);
    border: 1px solid var(--cs-white)
}

.main-screen__left {
    max-width: 810px;
    width: 100%
}

.main-screen__right {
    max-width: 1200px;
    width: 100%
}

.main-screen__right .image {
    width: 100%;
    max-height: 680px;
    -o-object-fit: contain;
    object-fit: contain
}

.main-screen .main-slider__controls {
    position: static
}

.main-screen .main-slider__controls .swiper-pagination-bullet {
    border-radius: 20px;
    width: 60px;
    height: 5px;
    background: rgba(255, 255, 255, .5);
    opacity: 1;
    position: relative
}

.main-screen .main-slider__controls .swiper-pagination-bullet::after {
    content: "";
    position: absolute;
    background: var(--cs-white);
    border-radius: 30px 0 0 30px;
    width: 0;
    height: 5px;
    left: 0
}

.main-screen .main-slider__controls .swiper-pagination-bullet-active::after {
    width: 100%;
    -webkit-animation: 6s ease-in-out forwards runSlideBg;
    animation: 6s ease-in-out forwards runSlideBg
}

.main-info {
    position: absolute;
    width: 100%;
    top: 1000px;
    z-index: 1
}

.main-info__container {
    background: var(--cs-white);
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    border-radius: 16px;
    padding: 75px 158px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.main-info__container .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.main-info__container .item__accent {
    font-family: "Gotham Pro", sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 112%;
    background: -webkit-gradient(linear, left top, right top, from(#ff4521), color-stop(100.02%, #f5775f));
    background: -o-linear-gradient(left, #ff4521 0, #f5775f 100.02%);
    background: linear-gradient(90deg, #ff4521 0, #f5775f 100.02%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.main-info__container .item__accent img {
    display: block
}

.main-info__container .item__text {
    font-weight: 400;
    font-size: 30px;
    line-height: 34px;
    color: var(--cs-text)
}

.available {
    padding: 200px 0
}

.available__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.available__content {
    max-width: 720px
}

.available .title {
    margin-top: 0;
    font-weight: 500;
    font-size: 62px;
    line-height: 112%;
    color: var(--cs-text);
    margin-bottom: 28px
}

.available .text {
    font-weight: 400;
    font-size: 30px;
    line-height: 43px;
    color: var(--cs-text);
    margin-top: 0;
    margin-bottom: 28px
}

.available .text .accent {
    color: var(--cs-violet-main)
}

.available .list-check {
    margin-bottom: 50px
}

.available .list-check__item {
    font-weight: 400;
    font-size: 30px;
    line-height: 50px;
    color: var(--cs-text);
    padding-left: 36px;
    position: relative
}

.available .list-check__item::after {
    content: "";
    position: absolute;
    background-image: url(../fonts/сheck_icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 26px;
    height: 26px;
    left: 0;
    top: calc(50% - 13px)
}

.available .list-check__item:not(:last-child) {
    margin-bottom: 20px
}

.available .btn-main {
    font-weight: 500;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: .02em;
    color: #fff;
    background: -webkit-gradient(linear, left top, right top, from(#ff4521), color-stop(100.02%, #f5775f));
    background: -o-linear-gradient(left, #ff4521 0, #f5775f 100.02%);
    background: linear-gradient(90deg, #ff4521 0, #f5775f 100.02%);
    border-radius: 4px;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
    padding: 22px 32px;
    max-width: 175px;
    width: 100%;
    cursor: pointer;
    max-width: 300px;
    display: block;
    text-align: center
}

.available .btn-main:hover {
    background: -webkit-gradient(linear, left top, right top, from(var(--cs-text-2)), color-stop(100.02%, var(--cs-text-2)));
    background: -o-linear-gradient(left, var(--cs-text-2) 0, var(--cs-text-2) 100.02%);
    background: linear-gradient(90deg, var(--cs-text-2) 0, var(--cs-text-2) 100.02%)
}

.accounts {
    padding: 120px 0;
    background-color: var(--cs-bg-light)
}

.accounts .title {
    margin-top: 0;
    font-weight: 500;
    font-size: 62px;
    line-height: 112%;
    color: var(--cs-text);
    margin-bottom: 80px;
    text-align: center
}

.accounts__container {
    display: -ms-grid;
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 20px
}

.accounts .account {
    -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
    border-radius: 16px;
    background-color: var(--cs-white);
    padding-bottom: 60px;
    max-width: 460px;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out
}

.accounts .account__header {
    border-radius: 12px 12px 0 0
}

.accounts .account__label {
    border-radius: 0 0 6px 6px;
    background-color: var(--cs-bg-lighter);
    max-width: 265px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
    color: var(--cs-text-2);
    padding: 18px 0
}

.accounts .account__name {
    font-weight: 500;
    font-size: 40px;
    line-height: 100%;
    color: var(--cs-text-2);
    text-align: center;
    margin-top: 41px;
    margin-bottom: 0;
    padding-bottom: 41px;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out
}

.accounts .account__list {
    margin-top: 44px;
    margin-bottom: 38px
}

.accounts .account__list-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 16px 45px 16px 55px
}

.accounts .account__list-item .name {
    position: relative;
    padding-left: 20px
}

.accounts .account__list-item .name::before {
    content: "";
    position: absolute;
    background-image: url(../fonts/check-arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 14px;
    height: 10px;
    left: -10px;
    top: calc(50% - 5px)
}

.accounts .account__list-item .name, .accounts .account__list-item .value {
    font-weight: 400;
    font-size: 24px;
    line-height: 100%;
    color: var(--cs-text)
}

.accounts .account__list-item .value {
    font-family: "Gotham Pro", sans-serif;
    font-weight: 600
}

.accounts .account__list-item:nth-child(even) {
    background-color: rgba(207, 212, 233, .16)
}

.accounts .account .btn-main {
    font-weight: 500;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: .02em;
    color: #fff;
    background: -webkit-gradient(linear, left top, right top, from(#ff4521), color-stop(100.02%, #f5775f));
    background: -o-linear-gradient(left, #ff4521 0, #f5775f 100.02%);
    background: linear-gradient(90deg, #ff4521 0, #f5775f 100.02%);
    border-radius: 4px;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
    padding: 25px;
    max-width: 175px;
    width: 100%;
    cursor: pointer;
    display: block;
    max-width: 375px;
    text-align: center;
    margin: 0 auto
}

.accounts .account .btn-main:hover {
    background: -webkit-gradient(linear, left top, right top, from(var(--cs-text-2)), color-stop(100.02%, var(--cs-text-2)));
    background: -o-linear-gradient(left, var(--cs-text-2) 0, var(--cs-text-2) 100.02%);
    background: linear-gradient(90deg, var(--cs-text-2) 0, var(--cs-text-2) 100.02%);
    background: -webkit-gradient(linear, left top, right top, from(#6b2ac8), color-stop(100.02%, #5127c6));
    background: -o-linear-gradient(left, #6b2ac8 0, #5127c6 100.02%);
    background: linear-gradient(90deg, #6b2ac8 0, #5127c6 100.02%)
}

.accounts .account:hover {
    -webkit-filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .1));
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .1))
}

.accounts .account.standard .account__header {
    background-color: var(--cs-violet-lighter)
}

.accounts .account.swap .account__header {
    background-color: var(--cs-violet-light)
}

.accounts .account.zero .account__header {
    background-color: var(--cs-violet-bright)
}

.accounts .account.pro .account__header {
    background-color: var(--cs-violet-main)
}

.platforms {
    padding: 120px 0;
    background: url(../fonts/bg-circles.svg) center/contain no-repeat, -webkit-gradient(linear, left top, right top, from(#ff4521), color-stop(100.02%, #f5775f));
    background: url(../fonts/bg-circles.svg) center/contain no-repeat, -o-linear-gradient(left, #ff4521 0, #f5775f 100.02%);
    background: url(../fonts/bg-circles.svg) center/contain no-repeat, linear-gradient(90deg, #ff4521 0, #f5775f 100.02%)
}

.platforms .title {
    font-weight: 500;
    font-size: 62px;
    line-height: 112%;
    color: var(--cs-text);
    margin-top: 0;
    margin-bottom: 67px;
    color: var(--cs-white);
    text-align: center
}

.platforms__container {
    background: linear-gradient(90deg,#ff4521 0, #f35f45 100.02%);
    border-radius: 16px;
    padding: 40px 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 75px
}

.platforms__content {
    max-width: 792px
}

.platforms__title {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 500;
    line-height: 112%;
    color: var(--cs-text);
    font-size: 50px;
    color: var(--cs-white)
}

.platforms__text {
    font-weight: 400;
    font-size: 30px;
    line-height: 43px;
    color: var(--cs-white);
    margin-top: 30px;
    margin-bottom: 25px
}

.platforms .list {
    margin-bottom: 50px
}

.platforms .list__item {
    font-weight: 400;
    font-size: 22px;
    line-height: 42px;
    color: var(--cs-white);
    position: relative;
    padding-left: 45px
}

.platforms .list__item::after, .platforms .list__item::before {
    content: "";
    position: absolute
}

.platforms .list__item::before {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--cs-white);
    left: 0;
    top: calc(50% - 13px)
}

.platforms .list__item::after {
    width: 12px;
    height: 8px;
    background-image: url(../fonts/check-arrow-white.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    left: 7px;
    top: calc(50% - 4px)
}

.platforms__images {
    max-width: 904px
}

.platforms .btn-main {
    font-weight: 500;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: .02em;
    color: #fff;
    background: -webkit-gradient(linear, left top, right top, from(#ff4521), color-stop(100.02%, #f5775f));
    background: -o-linear-gradient(left, #ff4521 0, #f5775f 100.02%);
    background: linear-gradient(90deg, #ff4521 0, #f5775f 100.02%);
    border-radius: 4px;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
    padding: 22px 32px;
    max-width: 175px;
    width: 100%;
    cursor: pointer;
    display: block;
    max-width: 300px;
    text-align: center
}

.platforms .btn-main:hover {
    background: -webkit-gradient(linear, left top, right top, from(var(--cs-text-2)), color-stop(100.02%, var(--cs-text-2)));
    background: -o-linear-gradient(left, var(--cs-text-2) 0, var(--cs-text-2) 100.02%);
    background: linear-gradient(90deg, var(--cs-text-2) 0, var(--cs-text-2) 100.02%)
}

.platforms .btn-main--white {
    color: var(--cs-text-2);
    background: var(--cs-white)
}

.platforms .btn-main--white:hover {
    background: var(--cs-text-2);
    color: var(--cs-white);
    border: 1px solid var(--cs-text-2)
}

.platforms .subtitle {
    margin-top: 0;
    font-weight: 500;
    line-height: 112%;
    color: var(--cs-text);
    margin-bottom: 37px;
    color: var(--cs-white);
    font-size: 50px;
    text-align: center
}

.platforms__downloads {
    display: -ms-grid;
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 1579px;
    margin: 0 auto
}

.platforms__downloads .device {
    background: var(--cs-text-2);
    border-radius: 4px;
    padding: 37px 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 370px
}

.platforms__downloads .device__icon .icon {
    width: 60px;
    height: 60px;
    display: block;
    fill: #ff4521;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out
}

.platforms__downloads .device__info {
    margin-left: 23px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 5px
}

.platforms__downloads .device__name, .platforms__downloads .device__title {
    font-size: 22px;
    line-height: 24px;
    color: var(--cs-white);
    -webkit-font-feature-settings: "liga" off;
    font-feature-settings: "liga" off
}

.platforms__downloads .device__title {
    font-weight: 400
}

.platforms__downloads .device__name {
    font-weight: 700
}

.platforms__downloads .device:hover .device__icon .icon {
    fill: var(--cs-white)
}

.demo {
    padding-top: 72px;
    padding-bottom: 80px;
    background: url(/dist/images/four-phones.png) right no-repeat, rgba(242, 246, 250, .5)
}

.demo .title {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 500;
    font-size: 62px;
    line-height: 112%;
    color: var(--cs-text)
}

.demo .text {
    font-weight: 400;
    font-size: 30px;
    line-height: 43px;
    color: var(--cs-text);
    margin-top: 27px;
    margin-bottom: 52px
}

.demo .btn-main {
    font-weight: 500;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: .02em;
    color: #fff;
    background: -webkit-gradient(linear, left top, right top, from(#ff4521), color-stop(100.02%, #f5775f));
    background: -o-linear-gradient(left, #ff4521 0, #f5775f 100.02%);
    background: linear-gradient(90deg, #ff4521 0, #f5775f 100.02%);
    border-radius: 4px;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
    padding: 25px;
    max-width: 175px;
    width: 100%;
    cursor: pointer;
    max-width: 300px;
    display: block;
    text-align: center
}

.demo .btn-main:hover {
    background: -webkit-gradient(linear, left top, right top, from(var(--cs-text-2)), color-stop(100.02%, var(--cs-text-2)));
    background: -o-linear-gradient(left, var(--cs-text-2) 0, var(--cs-text-2) 100.02%);
    background: linear-gradient(90deg, var(--cs-text-2) 0, var(--cs-text-2) 100.02%)
}

.steps {
    padding-top: 120px;
    padding-bottom: 125px
}

.steps .title {
    margin-top: 0;
    font-weight: 500;
    font-size: 62px;
    line-height: 112%;
    color: var(--cs-text);
    text-align: center;
    margin-bottom: 77px
}

.steps__container {
    max-width: 1450px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.steps .step {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.steps .step__text {
    text-align: center
}

.steps .step__number {
    font-family: "Gotham Pro", sans-serif;
    background: -webkit-gradient(linear, left top, right top, from(#ff4521), color-stop(100.02%, #f5775f));
    background: -o-linear-gradient(left, #ff4521 0, #f5775f 100.02%);
    background: linear-gradient(90deg, #ff4521 0, #f5775f 100.02%);
    width: 129px;
    height: 129px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 58px;
    line-height: 112%;
    color: var(--cs-white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.steps .step__name {
    font-weight: 700;
    font-size: 30px;
    line-height: 112%;
    color: var(--cs-text);
    margin-top: 30px;
    margin-bottom: 20px
}

.steps .step__descript {
    font-weight: 400;
    font-size: 24px;
    line-height: 34px;
    color: var(--cs-text);
    margin-top: 0;
    margin-bottom: 0;
    max-width: 240px;
    text-align: center
}

.steps .step--dashed {
    position: relative
}

.steps .step--dashed::after, .steps .step--dashed::before {
    content: "";
    position: absolute;
    width: 550px;
    height: 3px;
    background-image: url(/dist/images/line.svg);
    background-position: center;
    background-size: auto;
    top: 65px;
    z-index: -1
}

.steps .step--dashed::before {
    left: -450px
}

.steps .step--dashed::after {
    right: -450px
}

.tips {
    padding: 125px 0;
    background-image: url(/dist/images/tips-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.tips__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    max-width: 1830px;
    margin: 0 auto
}

.tips .title {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 500;
    font-size: 62px;
    line-height: 112%;
    color: var(--cs-text)
}

.tips .title span {
    color: #ff4521
}

.tips .tricks {
    max-width: 822px;
    width: 100%;
    margin-right: 168px
}

.tips .tricks__item {
    background: var(--cs-white);
    border-radius: 4px
}

.tips .tricks__item:not(:last-child) {
    margin-bottom: 25px
}

.tips .tricks__question {
    cursor: pointer;
    padding: 33px 50px 33px 32px
}

.tips .tricks__title {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 400;
    font-size: 24px;
    line-height: 46px;
    color: var(--cs-text);
    position: relative
}

.tips .tricks__title::after, .tips .tricks__title::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 2px;
    border-radius: 10px;
    background-color: var(--cs-text);
    top: calc(50% - 4px);
    right: 0;
    -webkit-transition: .4s ease-out;
    -o-transition: .4s ease-out;
    transition: .4s ease-out
}

.tips .tricks__title::before {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.tips .tricks__answer {
    padding-left: 33px;
    padding-right: 50px;
    max-width: 676px;
    height: 0;
    overflow: hidden;
    padding-bottom: 0;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
    font-weight: 400;
    font-size: 22px;
    line-height: 24px;
    color: var(--cs-text);
    margin-top: 0;
    margin-bottom: 0
}

.tips .tricks__item.tricks__item--active .tricks__question .tricks__title::before {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0)
}

.tips .tricks__item.tricks__item--active .tricks__question .tricks__title::after {
    opacity: 0
}

.tips .tricks__item.tricks__item--active .tricks__answer {
    padding-bottom: 50px;
    height: auto;
    overflow: visible
}

.request {
    padding: 73px 0
}

.request__container {
    background: url(/dist/images/form-bg.jpg) center/cover no-repeat;
    border-radius: 16px;
    max-width: 1662px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 75px 93px 102px
}

.request .title {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 500;
    font-size: 62px;
    line-height: 112%;
    color: var(--cs-text)
}

.request .title .accent {
    color: var(--cs-white)
}

.request__form {
    max-width: 752px;
    width: 100%
}

.request__form .form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.request__form .form__input {
    font-weight: 400;
    font-size: 22px;
    line-height: 24px;
    color: var(--cs-text-2);
    padding: 22px;
    background: var(--cs-bg-white);
    border-radius: 4px
}

.request__form .form__input::-webkit-input-placeholder {
    color: #9da4b7
}

.request__form .form__input::-moz-placeholder {
    color: #9da4b7
}

.request__form .form__input:-ms-input-placeholder {
    color: #9da4b7
}

.request__form .form__input::-ms-input-placeholder {
    color: #9da4b7
}

.request__form .form__input::placeholder {
    color: #9da4b7
}

.request__form .form__input:not(:last-child) {
    margin-bottom: 25px
}

.request__form .form__btn {
    font-weight: 500;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: .02em;
    color: #fff;
    background: -webkit-gradient(linear, left top, right top, from(#ff4521), color-stop(100.02%, #f5775f));
    background: -o-linear-gradient(left, #ff4521 0, #f5775f 100.02%);
    background: linear-gradient(90deg, #ff4521 0, #f5775f 100.02%);
    border-radius: 4px;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
    padding: 22px 32px;
    max-width: 175px;
    width: 100%;
    cursor: pointer;
    margin-top: 50px;
    color: var(--cs-white);
    background: var(--cs-text-2);
    max-width: inherit;
    border: none
}

.request__form .form__btn:hover {
    background: -webkit-gradient(linear, left top, right top, from(var(--cs-text-2)), color-stop(100.02%, var(--cs-text-2)));
    background: -o-linear-gradient(left, var(--cs-text-2) 0, var(--cs-text-2) 100.02%);
    background: linear-gradient(90deg, var(--cs-text-2) 0, var(--cs-text-2) 100.02%);
    background: var(--cs-white);
    color: var(--cs-text)
}

.subscribe {
    padding: 121px 0;
    background: #070417;
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, .05);
    box-shadow: 0 4px 4px rgba(0, 0, 0, .05)
}

.subscribe__container {
    max-width: 1664px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.subscribe .title, .subscribe__title {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 500;
    font-size: 62px;
    line-height: 112%;
    color: var(--cs-text);
    color: var(--cs-white)
}

.subscribe__title {
    font-weight: 400;
    font-size: 46px;
    line-height: 53px;
    margin-bottom: 53px
}

.subscribe .title {
    margin-bottom: 50px
}

.subscribe .socials {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 50px;
    max-width: 390px;
    margin: 0 auto
}

.subscribe .socials__link .icon {
    display: block;
    width: 60px;
    height: 60px;
    fill: #ff4521;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out
}

.subscribe .socials__link:hover .icon {
    fill: #6b2ac8
}

.subscribe__newsletter {
    max-width: 784px;
    width: 100%
}

.subscribe .form {
    position: relative
}

.subscribe .form__input {
    font-weight: 400;
    font-size: 22px;
    line-height: 24px;
    color: #cfd4e9;
    padding: 35px 12px 35px 25px;
    border: 1px solid #cfd4e9;
    background-color: transparent;
    border-radius: 4px;
    width: 100%
}

.subscribe .form__input::-webkit-input-placeholder {
    color: #cfd4e9
}

.subscribe .form__input::-moz-placeholder {
    color: #cfd4e9
}

.subscribe .form__input:-ms-input-placeholder {
    color: #cfd4e9
}

.subscribe .form__input::-ms-input-placeholder {
    color: #cfd4e9
}

.subscribe .form__input::placeholder {
    color: #cfd4e9
}

.subscribe .form .btn-main {
    font-weight: 500;
    letter-spacing: .02em;
    color: #fff;
    background: -webkit-gradient(linear, left top, right top, from(#ff4521), color-stop(100.02%, #f5775f));
    background: -o-linear-gradient(left, #ff4521 0, #f5775f 100.02%);
    background: linear-gradient(90deg, #ff4521 0, #f5775f 100.02%);
    border-radius: 4px;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
    padding: 25px 10px;
    max-width: 175px;
    width: 100%;
    cursor: pointer;
    font-size: 22px;
    line-height: 21px;
    position: absolute;
    max-width: 300px;
    right: 12px;
    top: calc(50% - 37px);
    border: none
}

.subscribe .form .btn-main:hover {
    background: -webkit-gradient(linear, left top, right top, from(var(--cs-text-2)), color-stop(100.02%, var(--cs-text-2)));
    background: -o-linear-gradient(left, var(--cs-text-2) 0, var(--cs-text-2) 100.02%);
    background: linear-gradient(90deg, var(--cs-text-2) 0, var(--cs-text-2) 100.02%);
    background: -webkit-gradient(linear, left top, right top, from(#6b2ac8), color-stop(100.02%, #5127c6));
    background: -o-linear-gradient(left, #6b2ac8 0, #5127c6 100.02%);
    background: linear-gradient(90deg, #6b2ac8 0, #5127c6 100.02%)
}

.accept {
    padding: 140px 0;
    background: url(/dist/images/accept-bg.png) center/cover no-repeat
}

.accept .title {
    margin-top: 0;
    font-weight: 500;
    color: var(--cs-text);
    font-size: 46px;
    line-height: 112%;
    text-align: center;
    margin-bottom: 70px
}

.accept__bottom, .accept__container, .accept__top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.accept__bottom, .accept__top {
    width: 100%
}

.accept__container {
    max-width: 1664px;
    margin: 0 auto;
    gap: 102px
}

.above-footer {
    padding-top: 75px;
    padding-bottom: 60px;
    background: -webkit-gradient(linear, left top, right top, from(#ff4521), color-stop(100.02%, #f5775f));
    background: -o-linear-gradient(left, #ff4521 0, #f5775f 100.02%);
    background: linear-gradient(90deg, #ff4521 0, #f5775f 100.02%)
}

.above-footer .logo-link {
    display: block;
    max-width: 200px
}

.above-footer .logo-link .logo {
    width: 100%
}

.above-footer__container {
    margin-top: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.above-footer .item-contacts .contacts {
    margin-bottom: 25px
}

.above-footer .item-contacts__title {
    font-weight: 500;
    font-size: 30px;
    line-height: 40px;
    color: var(--cs-white);
    margin-top: 0;
    margin-bottom: 25px
}

.above-footer .item-contacts .address, .above-footer .item-contacts .email-link, .above-footer .item-contacts .phone-link {
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    color: var(--cs-white);
    display: block
}

.above-footer .item-contacts .address {
    margin-top: 0;
    margin-bottom: 0;
    max-width: 374px
}

.above-footer .item-contacts .follows .socials {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 50px;
    max-width: 390px;
    margin: 0 auto 0 0;
    max-width: 296px;
    gap: 25px
}

.above-footer .item-contacts .follows .socials__link .icon {
    display: block;
    fill: #ff4521;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
    width: 55px;
    height: 55px;
    fill: var(--cs-white);
    opacity: .4
}

.above-footer .item-contacts .follows .socials__link:hover .icon {
    fill: #6b2ac8;
    fill: var(--cs-white);
    opacity: 1
}

.above-footer .item-menu {
    margin-left: auto;
    margin-right: 163px
}

.above-footer .item-menu ul {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    list-style: none
}

.above-footer .item-menu ul li.parent a::after {
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    border-width: 2px 0 0 2px;
    border-style: solid;
    border-color: var(--cs-white);
    top: calc(50% + 2px);
    right: 0;
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out
}

.above-footer .item-menu ul li.parent a:hover::after {
    border-color: var(--cs-text-2)
}

.above-footer .item-menu ul li.parent ul {
    display: none
}

.above-footer .item-menu ul li a {
    font-weight: 500;
    font-size: 30px;
    line-height: 34px;
    color: var(--cs-white);
    padding-right: 15px;
    position: relative;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out
}

.above-footer .item-menu ul li a:hover {
    color: var(--cs-text-2)
}

.above-footer .item-menu ul li:not(:last-child) {
    margin-bottom: 20px
}

.above-footer .item-description .text {
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    color: rgba(255, 255, 255, .6);
    margin-top: 0;
    margin-bottom: 0;
    max-width: 777px
}

@media (max-width: 1920px) {
    .header .logo-link .logo {
        min-width: inherit
    }

    .header .nav ul li a {
        font-size: 18px
    }

    .header__right .btn-transparent {
        font-size: 18px;
        padding: 19px
    }

    .header__right .btn-main {
        font-size: 18px;
        padding: 17px 24px
    }
}

@media (max-width: 1440px) {
    .header .logo-link .logo {
        max-width: 174px
    }

    .header .nav {
        margin-right: auto;
        margin-left: 84px
    }

    .header .nav ul li a {
        font-size: 16px
    }

    .header .nav ul li:not(:last-child) {
        margin-right: 30px
    }

    .header__right {
        gap: 15px
    }

    .header__right .btn-transparent {
        font-size: 16px;
        padding: 12px 21px
    }

    .header__right .btn-main {
        font-size: 16px;
        padding: 11px 21px
    }

    .header__right .languages ul {
        width: 44px;
        height: 44px
    }

    .header__right .languages a {
        padding: 10px
    }
}

@media (max-width: 1280px) {
    .header .logo-link .logo {
        max-width: 164px
    }

    .header .nav {
        margin-right: inherit;
        margin-left: inherit
    }

    .header .nav ul li:not(:last-child) {
        margin-right: 24px
    }

    .header__right .btn-transparent {
        padding: 10px 18px
    }

    .header__right .btn-main {
        padding: 9px 16px
    }

    .header__right .languages ul {
        width: 40px;
        height: 40px
    }

    .header__right .languages a {
        padding: 6px
    }
}

@media (max-width: 1024px) {
    .header .logo-link .logo {
        max-width: 140px
    }

    .header .nav {
        display: none
    }

    .header__left {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 20px
    }

    .header__left .burger.btn-transparent {
        background: -webkit-gradient(linear, left top, right top, from(#ff4521), color-stop(100.02%, #f5775f));
        background: -o-linear-gradient(left, #ff4521 0, #f5775f 100.02%);
        background: linear-gradient(90deg, #ff4521 0, #f5775f 100.02%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        padding: 18px 19px;
        border-radius: 4px;
        border: 2px solid var(--cs-violet-main);
        font-weight: 500;
        line-height: 100%;
        -webkit-transition: .4s ease-in-out;
        -o-transition: .4s ease-in-out;
        transition: .4s ease-in-out;
        font-size: 18px
    }

    .header__left .burger.btn-transparent:hover {
        border: 2px solid var(--cs-text-2);
        -webkit-text-fill-color: var(--cs-text-2)
    }

    .header__left .burger.btn-transparent .icon {
        display: none
    }

    .header__right {
        gap: 20px
    }

    .header__right .btn-transparent {
        font-size: 18px;
        padding: 18px 19px
    }

    .header__right .btn-main {
        padding: 16px 27px;
        font-size: 18px
    }

    .header__right .languages {
        display: none
    }
}

@media (max-width: 768px) {
    .header .logo-link .logo {
        max-width: 120px
    }

    .header__left .burger.btn-transparent {
        font-size: 14px;
        padding: 12px
    }

    .header__left .languages ul {
        width: 42px;
        height: 42px
    }

    .header__left .languages ul a {
        padding: 7px
    }

    .header__right {
        display: none;
    }

    .header__right .btn-transparent {
        font-size: 14px;
        padding: 12px
    }

    .header__right .btn-main {
        padding: 11px 16px;
        font-size: 14px
    }
}

@media (max-width: 576px) {

    .header .mobile-menu__content {
        padding: 20px
    }

    .header .mobile-menu__top .logo-link .logo {
        display: block
    }

    .header .mobile-menu .nav {
        margin-top: 70px;
        margin-bottom: 70px
    }

    .header .mobile-menu .nav ul {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 50px
    }

    .header .mobile-menu .nav ul li a {
        font-size: 24px
    }

    .header .mobile-menu .header__right {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .header .mobile-menu .header__right .btn-main {
        max-width: inherit
    }
}

@media (max-width: 428px) {
    .header__left .languages {
        display: none
    }

    .header__left .burger.btn-transparent {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        border: none;
        padding: 0;
        gap: 6px
    }

    .header__left .burger.btn-transparent .icon {
        display: block
    }

    .header .logo-link {
        margin-left: 16px
    }

    .header__right {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
    }

    .header__right .btn-transparent {
        padding: 11px
    }

    .header__right .btn-main {
        padding: 10px 16px
    }

    .header .mobile-menu__container {
        width: 100%
    }

    .header .mobile-menu .logo-link {
        margin-right: inherit;
        margin-left: inherit
    }
}

@media (max-width: 1920px) {
    .footer {
        padding: 41px 0
    }

    .footer .nav ul {
        gap: 30px
    }

    .footer .copyright, .footer .nav ul li a {
        font-size: 18px
    }

    .scroll-top {
        width: 88px;
        height: 88px;
        bottom: 100px
    }
}

@media (max-width: 1440px) {
    .footer {
        padding: 30px 0
    }

    .footer .copyright, .footer .nav ul li a {
        font-size: 16px
    }

    .scroll-top {
        width: 70px;
        height: 70px;
        bottom: 80px;
        right: 0
    }
}

@media (max-width: 1280px) {
    .footer__container {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        gap: 20px
    }

    .footer .nav ul {
        gap: 20px
    }

    .footer .copyright, .footer .nav ul li a {
        font-size: 14px
    }

    .scroll-top {
        bottom: 110px;
        right: 10px
    }
}

@media (max-width: 768px) {
    .footer .nav {
        margin-bottom: 30px
    }

    .footer .nav ul {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 16px 40px
    }

    .scroll-top {
        bottom: 20px;
        right: 20px
    }
}

@media (max-width: 576px) {
    .footer .nav ul {
        gap: 20px
    }

    .scroll-top {
        bottom: 20px
    }
}

@media (max-width: 428px) {
    .scroll-top {
        right: 10px;
        bottom: 10px;
        width: 50px;
        height: 50px
    }

    .scroll-top .icon {
        width: 14px
    }
}

@media (max-width: 1920px) {
    .btn-fixed {
        font-size: 18px;
        padding: 17px 33px;
        right: -85px;
        top: 450px
    }

    .main-screen {
        background-image: linear-gradient(90deg, #5b5b5b 0, #000000 100.02%);
        margin-top: 100px;
        padding-top: 78px;
        padding-bottom: 120px
    }

    .main-screen__container {
        margin-bottom: 50px
    }

    .main-screen .title {
        font-size: 70px;
        max-width: 650px
    }

    .main-screen .text {
        font-size: 24px;
        line-height: 34px;
        margin-top: 24px;
        margin-bottom: 40px;
        max-width: 470px
    }

    .main-screen .btn-main {
        max-width: 240px;
        font-size: 18px;
        padding: 16px 32px
    }

    .main-screen__left {
        max-width: 650px
    }

    .main-screen__right {
        max-width: 1000px
    }

    .main-screen__right .image {
        max-height: 500px
    }

    .main-info {
        top: 760px
    }

    .main-info__container {
        padding: 57px 120px
    }

    .main-info__container .item__accent {
        font-size: 40px
    }

    .main-info__container .item__text {
        font-size: 24px
    }

    .available {
        padding: 160px 0
    }

    .available__images {
        max-width: 750px
    }

    .available__content {
        max-width: 580px
    }

    .available .title {
        font-size: 50px;
        margin-bottom: 24px
    }

    .available .text {
        font-size: 24px;
        line-height: 34px;
        margin-bottom: 24px
    }

    .available .list-check {
        margin-bottom: 40px
    }

    .available .list-check__item {
        font-size: 24px
    }

    .available .list-check__item::after {
        width: 20px;
        height: 20px;
        top: calc(50% - 10px)
    }

    .available .btn-main {
        max-width: 240px
    }

    .accounts {
        padding: 100px 0
    }

    .accounts .title {
        margin-bottom: 60px;
        font-size: 40px
    }

    .accounts__container {
        gap: 15px
    }

    .accounts .account {
        padding-bottom: 48px;
        max-width: 368px
    }

    .accounts .account__label {
        max-width: 212px;
        font-size: 16px;
        padding: 13px 0
    }

    .accounts .account__name {
        font-size: 36px;
        margin-top: 32px;
        padding-bottom: 32px
    }

    .accounts .account__list {
        margin-top: 44px;
        margin-bottom: 38px
    }

    .accounts .account__list-item {
        padding: 10px 38px 10px 47px
    }

    .accounts .account__list-item .name, .accounts .account__list-item .value {
        font-size: 18px
    }

    .accounts .account .btn-main {
        max-width: 300px;
        padding: 17px
    }

    .platforms {
        padding: 100px 0
    }

    .platforms .title {
        font-size: 50px;
        margin-bottom: 50px
    }

    .platforms__container {
        padding: 32px 60px;
        margin-bottom: 60px
    }

    .platforms__content {
        max-width: 675px
    }

    .platforms__title {
        font-size: 40px
    }

    .platforms__text {
        font-size: 24px;
        line-height: 34px;
        margin-top: 24px;
        margin-bottom: 20px
    }

    .platforms .list {
        margin-bottom: 40px
    }

    .platforms .list__item {
        font-size: 18px;
        line-height: 34px;
        padding-left: 36px
    }

    .platforms .list__item::before {
        width: 20px;
        height: 20px;
        top: calc(50% - 10px)
    }

    .platforms .list__item::after {
        width: 9px;
        height: 6px;
        left: 6px;
        top: calc(50% - 3px)
    }

    .platforms__images {
        max-width: 750px
    }

    .platforms .btn-main {
        padding: 17px;
        max-width: 240px;
        font-size: 18px
    }

    .platforms .subtitle {
        margin-bottom: 30px;
        font-size: 40px
    }

    .platforms__downloads {
        max-width: 1265px;
        gap: 10px
    }

    .platforms__downloads .device {
        padding: 32px;
        max-width: 300px
    }

    .platforms__downloads .device__icon .icon {
        width: 50px;
        height: 50px
    }

    .platforms__downloads .device__info {
        margin-left: 16px;
        gap: 3px
    }

    .platforms__downloads .device__name, .platforms__downloads .device__title {
        font-size: 18px;
        line-height: 24px
    }

    .demo {
        padding: 60px 0;
        background: url(../fonts/bg-circles.svg) right/contain no-repeat, -webkit-gradient(linear, left top, right top, from(#6b2ac8), color-stop(100.02%, #5127c6));
        background: url(../fonts/bg-circles.svg) right/contain no-repeat, -o-linear-gradient(left, #6b2ac8 0, #5127c6 100.02%);
        background: url(../fonts/bg-circles.svg) right/contain no-repeat, linear-gradient(90deg, #6b2ac8 0, #5127c6 100.02%);
        margin-top: 86px;
        padding-top: 58px;
        padding-bottom: 134px
    }

    .main-screen__container {
        margin-bottom: 33px
    }

    .main-screen .title {
        font-size: 50px;
        max-width: 465px
    }

    .main-screen .text {
        font-size: 20px;
        line-height: 30px;
        margin-top: 16px;
        margin-bottom: 36px;
        max-width: 526px
    }

    .main-screen .btn-main {
        max-width: 200px;
        font-size: 16px;
        padding: 10px 32px
    }

    .main-screen__left {
        max-width: 526px
    }

    .main-screen__right {
        max-width: 720px
    }

    .main-screen__right .image {
        max-height: 320px
    }

    .main-info {
        top: 580px
    }

    .main-info__container {
        padding: 39px 100px
    }

    .main-info__container .item__accent {
        font-size: 30px
    }

    .main-info__container .item__accent img {
        width: 30px;
        height: 30px;
        display: block
    }

    .main-info__container .item__text {
        font-size: 18px
    }

    .available__images {
        max-width: 560px
    }

    .available__content {
        max-width: 505px
    }

    .available .title {
        font-size: 40px;
        margin-bottom: 15px
    }

    .available .text {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 16px
    }

    .available .list-check {
        margin-bottom: 35px
    }

    .available .list-check__item {
        font-size: 20px;
        line-height: 40px
    }

    .available .btn-main {
        font-size: 16px;
        max-width: 200px;
        padding: 11px 22px
    }

    .accounts {
        padding: 80px 0
    }

    .accounts .title {
        margin-bottom: 40px;
        font-size: 36px
    }

    .accounts__container {
        gap: 12px
    }

    .accounts .account {
        padding-bottom: 35px;
        max-width: 276px
    }

    .accounts .account__label {
        max-width: 160px;
        font-size: 15px;
        padding: 10px 0
    }

    .accounts .account__name {
        font-size: 24px;
        margin-top: 24px;
        padding-bottom: 28px
    }

    .accounts .account__list {
        margin-top: 33px;
        margin-bottom: 30px
    }

    .accounts .account__list-item {
        padding: 7px 28px 7px 35px
    }

    .accounts .account__list-item .name, .accounts .account__list-item .value {
        font-size: 15px
    }

    .accounts .account__list-item .value {
        font-size: 16px
    }

    .accounts .account .btn-main {
        max-width: 225px;
        padding: 11px;
        font-size: 16px
    }

    .platforms {
        padding: 80px 0
    }

    .platforms .title {
        font-size: 40px;
        margin-bottom: 30px
    }

    .platforms__container {
        padding: 40px;
        margin-bottom: 30px
    }

    .platforms__content {
        max-width: 530px
    }

    .platforms__title {
        font-size: 36px;
        line-height: 46px
    }

    .platforms__text {
        font-size: 20px;
        line-height: 30px;
        margin-top: 16px;
        margin-bottom: 16px
    }

    .platforms .list {
        margin-bottom: 37px
    }

    .platforms .list__item {
        font-size: 16px;
        line-height: 30px
    }

    .platforms__images {
        max-width: 562px
    }

    .platforms .btn-main {
        padding: 10px;
        max-width: 200px;
        font-size: 16px
    }

    .platforms .subtitle {
        font-size: 36px
    }

    .platforms__downloads {
        max-width: 950px
    }

    .platforms__downloads .device {
        padding: 20px 21px;
        max-width: 224px
    }

    .platforms__downloads .device__icon .icon {
        width: 40px;
        height: 40px
    }

    .platforms__downloads .device__info {
        margin-left: 10px
    }

    .platforms__downloads .device__name, .platforms__downloads .device__title {
        font-size: 16px
    }

    .demo {
        padding: 42px 0
    }

    .demo .title {
        font-size: 40px;
        line-height: 50px
    }

    .demo .text {
        font-size: 20px;
        line-height: 30px;
        margin-top: 16px;
        margin-bottom: 36px
    }

    .demo .btn-main {
        font-size: 16px;
        max-width: 200px;
        padding: 11px
    }

    .steps {
        padding: 80px
    }

    .steps .title {
        font-size: 40px;
        margin-bottom: 40px
    }

    .steps__container {
        max-width: 735px
    }

    .steps .step__number {
        width: 77px;
        height: 77px;
        font-size: 36px
    }

    .steps .step__name {
        font-size: 20px;
        margin-bottom: 10px
    }

    .steps .step__descript {
        font-size: 16px;
        line-height: 21px;
        max-width: 170px
    }

    .steps .step--dashed::after, .steps .step--dashed::before {
        width: 300px;
        top: 35px
    }

    .steps .step--dashed::before {
        left: -200px
    }

    .steps .step--dashed::after {
        right: -200px
    }

    .tips {
        padding: 76px 0
    }

    .tips__container {
        max-width: 1111px
    }

    .tips .title {
        font-size: 40px
    }

    .tips .tricks {
        max-width: 480px;
        margin-right: 0
    }

    .tips .tricks__item:not(:last-child) {
        margin-bottom: 16px
    }

    .tips .tricks__question {
        padding: 25px 30px 25px 20px
    }

    .tips .tricks__title {
        font-size: 18px
    }

    .tips .tricks__answer {
        font-size: 16px;
        max-width: 400px;
        padding-left: 25px;
        padding-right: 0
    }

    .tips .tricks__item.tricks__item--active .tricks__question {
        padding-bottom: 10px
    }

    .tips .tricks__item.tricks__item--active .tricks__answer {
        padding-bottom: 30px
    }

    .request__container {
        max-width: 820px;
        padding: 40px 40px 60px
    }

    .request .title {
        font-size: 30px;
        line-height: 40px
    }

    .request__form {
        max-width: 400px
    }

    .request__form .form__input {
        font-size: 16px;
        padding: 10px 16px
    }

    .request__form .form__input:not(:last-child) {
        margin-bottom: 16px
    }

    .request__form .form__btn {
        margin-top: 30px;
        font-size: 16px;
        line-height: 21px;
        padding: 10px 15px
    }

    .subscribe {
        padding: 62px 0
    }

    .subscribe__container {
        max-width: 990px
    }

    .subscribe__title {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 36px
    }

    .subscribe .title {
        font-size: 40px;
        margin-bottom: 30px
    }

    .subscribe .socials {
        max-width: 234px;
        gap: 30px
    }

    .subscribe .socials__link .icon {
        width: 36px;
        height: 36px
    }

    .subscribe__newsletter {
        max-width: 515px
    }

    .subscribe .form__input {
        font-size: 16px;
        line-height: 16px;
        padding: 22px 16px
    }

    .subscribe .form .btn-main {
        font-size: 16px;
        max-width: 200px;
        padding: 12px 10px;
        right: 7px;
        top: calc(50% - 22px)
    }

    .accept {
        padding: 84px 0
    }

    .accept .title {
        margin-bottom: 30px
    }

    .accept__container {
        max-width: 950px
    }

    .accept__bottom, .accept__container, .accept__top {
        gap: 58px
    }

    .above-footer {
        padding: 40px 0
    }

    .above-footer .logo-link {
        max-width: 120px
    }

    .above-footer__container {
        margin-top: 20px
    }

    .above-footer .item-contacts .contacts {
        margin-bottom: 20px
    }

    .above-footer .item-contacts__title {
        font-size: 20px;
        line-height: 40px;
        margin-bottom: 8px
    }

    .above-footer .item-contacts .follows .socials {
        max-width: 177px;
        gap: 15px
    }

    .above-footer .item-contacts .follows .socials__link .icon {
        width: 33px;
        height: 33px
    }

    .above-footer .item-menu {
        margin-right: 65px
    }

    .above-footer .item-menu ul li a {
        font-size: 20px;
        line-height: 30px
    }

    .above-footer .item-menu ul li:not(:last-child) {
        margin-bottom: 7px
    }

    .above-footer .item-description .text {
        font-size: 14px;
        line-height: 21px;
        max-width: 505px
    }
}

@media (max-width: 1280px) {
    .main-screen {
        background-image: linear-gradient(90deg, #5b5b5b 0, #000000 100.02%);
        margin-top: 70px;
        padding-top: 50px;
        padding-bottom: 120px
    }

    .main-screen__container {
        margin-bottom: 25px
    }

    .main-screen .title {
        line-height: 58px
    }

    .main-screen .text {
        margin-top: 12px;
        margin-bottom: 30px;
        max-width: 388px
    }

    .main-screen .btn-main {
        max-width: 180px
    }

    .main-screen__right {
        max-width: 640px
    }

    .main-screen__right .image {
        max-height: 370px
    }

    .main-info {
        top: 560px
    }

    .main-info__container {
        padding: 35px 68px
    }

    .available {
        padding: 60px 0
    }

    .available__images {
        max-width: 500px
    }

    .available__content {
        max-width: 438px
    }

    .available .text {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 16px
    }

    .available .btn-main {
        max-width: 180px
    }

    .accounts {
        padding: 60px 0
    }

    .accounts__container {
        gap: 10px
    }

    .accounts .account__list-item .name, .accounts .account__list-item .value {
        font-size: 14px
    }

    .accounts .account__list-item .value {
        font-weight: 400
    }

    .platforms {
        padding: 60px 0
    }

    .platforms .title {
        margin-bottom: 50px
    }

    .platforms__content {
        max-width: 530px
    }

    .platforms__images {
        max-width: 448px
    }

    .platforms .btn-main {
        padding: 11px;
        max-width: 180px
    }

    .demo .btn-main {
        max-width: 180px;
        padding: 11px 5px
    }

    .steps {
        padding: 60px
    }

    .tips {
        padding: 58px 0
    }

    .tips__container {
        max-width: 1080px
    }

    .request {
        padding: 40px 0
    }

    .request__container {
        padding-bottom: 44px
    }

    .request__form .form__input {
        font-size: 16px;
        padding: 10px 16px
    }

    .request__form .form__input:not(:last-child) {
        margin-bottom: 16px
    }

    .request__form .form__btn {
        margin-top: 32px;
        padding: 18px 15px
    }

    .subscribe__container {
        max-width: 1080px
    }

    .subscribe .form .btn-main {
        max-width: 180px
    }

    .above-footer {
        padding-top: 40px;
        padding-bottom: 60px
    }

    .above-footer .item-contacts .contacts {
        margin-bottom: 16px
    }

    .above-footer .item-menu {
        margin-right: 30px
    }
}

@media (max-width: 1024px) {
    .btn-fixed {
        font-size: 18px;
        padding: 17px 33px;
        right: -85px;
        top: 600px
    }

    .main-screen {
        background: url(../fonts/bg-circles.svg) top/contain no-repeat, -webkit-gradient(linear, left top, right top, from(#6b2ac8), color-stop(100.02%, #5127c6));
        background: url(../fonts/bg-circles.svg) top/contain no-repeat, -o-linear-gradient(left, #6b2ac8 0, #5127c6 100.02%);
        background: url(/dist/images/bg-circles.svg) top/contain no-repeat, linear-gradient(90deg, #6b2ac8 0, #5127c6 100.02%);
        margin-top: 100px;
        padding-top: 80px;
        padding-bottom: 90px
    }

    .main-screen__container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        margin-bottom: 55px;
        gap: 38px
    }

    .main-screen .title {
        font-size: 52px;
        line-height: 112%;
        max-width: 480px
    }

    .main-screen .text {
        font-size: 24px;
        line-height: 34px;
        max-width: 466px;
        margin: 16px auto 36px
    }

    .main-screen .btn-main {
        max-width: 220px;
        font-size: 18px;
        padding: 16px 32px;
        margin: 0 auto
    }

    .main-screen__left {
        max-width: 480px;
        text-align: center
    }

    .main-screen__right {
        max-width: 970px
    }

    .main-screen__right .image {
        max-height: 540px
    }

    .main-info {
        top: 1130px
    }

    .main-info__container {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        padding: 30px 70px
    }

    .main-info__container .item {
        max-width: 105px;
        text-align: center
    }

    .main-info__container .item__accent {
        font-size: 24px
    }

    .main-info__container .item__accent img {
        width: 25px;
        height: 25px
    }

    .main-info__container .item__text {
        line-height: 24px
    }

    .available__images {
        max-width: 440px
    }

    .available .btn-main {
        max-width: 200px;
        padding: 19px 22px
    }

    .accounts .overflow-wrapper {
        overflow: auto;
        padding: 15px 0
    }

    .accounts__container {
        min-width: 1080px
    }

    .platforms {
        padding: 60px 0
    }

    .platforms .title {
        margin-bottom: 24px
    }

    .platforms__container {
        padding: 40px 0 40px 60px;
        margin-left: -50px;
        margin-right: -50px;
        margin-bottom: 40px;
        border-radius: 0
    }

    .platforms__content {
        max-width: 500px
    }

    .platforms__images {
        max-width: 460px;
        margin-right: -50px
    }

    .platforms .btn-main {
        padding: 19px;
        max-width: 200px;
        font-size: 16px
    }

    .platforms .subtitle {
        margin-bottom: 20px
    }

    .platforms__downloads {
        max-width: 910px;
        gap: 4px
    }

    .platforms__downloads .device__info {
        margin-left: 8px
    }

    .demo {
        padding: 34px 0
    }

    .demo .btn-main {
        max-width: 220px;
        padding: 19px 5px
    }

    .tips__container {
        max-width: 904px
    }

    .subscribe {
        padding: 60px 0
    }

    .subscribe__container {
        max-width: 530px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .subscribe__title {
        text-align: center
    }

    .subscribe__newsletter {
        max-width: inherit;
        margin-bottom: 58px
    }

    .subscribe .form .btn-main {
        max-width: 220px
    }

    .accept {
        padding: 37px 0
    }

    .accept .title {
        margin-bottom: 20px
    }

    .accept__container {
        max-width: 910px
    }

    .accept__bottom, .accept__container, .accept__top {
        gap: 50px
    }

    .above-footer {
        padding: 40px 0
    }

    .above-footer .item-contacts .contacts {
        margin-bottom: 16px
    }

    .above-footer .item-menu {
        margin-left: 10px;
        margin-right: 20px
    }

    .above-footer .item-description .text {
        max-width: 387px
    }
}

@media (max-width: 768px) {
    .btn-fixed {
        font-size: 16px;
        padding: 19px 43px;
        right: -90px;
        top: 400px
    }

    .main-screen {
        margin-top: 62px;
        padding-top: 60px;
        padding-bottom: 86px
    }

    .main-screen__container {
        margin-bottom: 40px;
        gap: 20px
    }

    .main-screen .title {
        font-size: 36px;
        line-height: 46px;
        max-width: 333px;
        margin-left: auto;
        margin-right: auto
    }

    .main-screen .text {
        font-size: 18px;
        line-height: 24px;
        max-width: 370px
    }

    .main-screen .btn-main {
        max-width: 200px;
        font-size: 16px
    }

    .main-screen__left {
        max-width: 370px
    }

    .main-screen__right {
        max-width: 705px
    }

    .main-screen__right .image {
        max-height: 400px
    }

    .main-info {
        top: 870px
    }

    .main-info__container {
        padding: 28px 38px
    }

    .available__images {
        max-width: 304px
    }

    .available__content {
        max-width: 323px
    }

    .available .title {
        font-size: 30px
    }

    .available .text {
        font-size: 18px;
        line-height: 27px
    }

    .available .list-check {
        margin-bottom: 30px
    }

    .available .list-check__item {
        font-size: 16px;
        line-height: 36px
    }

    .available .list-check__item:not(:last-child) {
        margin-bottom: 15px
    }

    .accounts__container {
        gap: 20px
    }

    .accounts .title {
        font-size: 30px;
        margin-bottom: 30px
    }

    .accounts .account {
        padding-bottom: 20px;
        min-width: 276px
    }

    .accounts .account__list-item .name, .accounts .account__list-item .value {
        font-size: 15px
    }

    .accounts .account__list-item .value {
        font-weight: 700;
        font-size: 16px
    }

    .accounts .account .btn-main {
        padding: 19px
    }

    .platforms .title {
        font-size: 30px;
        margin-bottom: 30px
    }

    .platforms__container {
        padding: 40px 0 40px 40px;
        margin-left: -44px;
        margin-right: -44px;
        margin-bottom: 50px
    }

    .platforms__content {
        max-width: 350px
    }

    .platforms__title {
        font-size: 24px;
        line-height: 34px
    }

    .platforms__text {
        font-size: 16px;
        line-height: 24px
    }

    .platforms .list {
        margin-bottom: 30px
    }

    .platforms .list__item {
        padding-left: 38px
    }

    .platforms .list__item::after, .platforms .list__item::before {
        content: none
    }

    .platforms__images {
        max-width: 360px;
        margin-right: -120px
    }

    .platforms .btn-main {
        max-width: 135px
    }

    .platforms .subtitle {
        font-size: 30px;
        margin-bottom: 16px
    }

    .platforms__downloads {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns:1fr 1fr;
        max-width: 460px
    }

    .platforms__downloads .device__icon .icon {
        width: 38px;
        height: 38px
    }

    .demo {
        background: url(/dist/images/four-phones.png) 300px/cover no-repeat, rgba(242, 246, 250, .5)
    }

    .demo .title {
        font-size: 30px
    }

    .demo .text {
        font-size: 18px;
        line-height: 27px;
        margin-bottom: 30px
    }

    .demo .btn-main {
        max-width: 200px
    }

    .steps {
        padding: 60px 0
    }

    .steps .title {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 20px
    }

    .steps__container {
        max-width: 570px
    }

    .steps .step__number {
        width: 62px;
        height: 62px;
        font-size: 20px;
        line-height: 30px
    }

    .steps .step__name {
        margin-top: 18px;
        margin-bottom: 12px
    }

    .steps .step__descript {
        line-height: 24px;
        max-width: 170px
    }

    .steps .step--dashed::after, .steps .step--dashed::before {
        width: 160px;
        top: 30px
    }

    .steps .step--dashed::before {
        left: -100px
    }

    .steps .step--dashed::after {
        right: -100px
    }

    .tips {
        padding: 60px 0
    }

    .tips__container {
        max-width: 480px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .tips .title {
        font-size: 30px;
        margin-bottom: 30px
    }

    .tips .tricks {
        max-width: inherit
    }

    .tips .tricks__item:not(:last-child) {
        margin-bottom: 15px
    }

    .tips .tricks__question {
        padding: 18px 23px 18px 20px
    }

    .tips .tricks__title {
        font-size: 16px;
        line-height: 24px
    }

    .tips .tricks__title::after, .tips .tricks__title::before {
        width: 15px;
        top: calc(50% - 2px)
    }

    .tips .tricks__answer {
        font-size: 15px;
        line-height: 18px;
        padding-left: 18px;
        padding-right: 5px
    }

    .tips .tricks__item.tricks__item--active .tricks__question {
        padding-bottom: 8px
    }

    .tips .tricks__item.tricks__item--active .tricks__answer {
        padding-bottom: 25px
    }

    .request {
        padding: 40px 0
    }

    .request__container {
        background: url(/dist/images/form-bg-mob.jpg) center/cover no-repeat;
        max-width: 664px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 40px 20px 206px
    }

    .request .title {
        line-height: 34px;
        text-align: center;
        margin-bottom: 42px
    }

    .request__form {
        max-width: 400px
    }

    .request__form .form__btn {
        padding: 18px 15px
    }

    .subscribe__container {
        max-width: 470px
    }

    .subscribe__title {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 30px
    }

    .subscribe .title {
        font-size: 30px;
        margin-bottom: 20px
    }

    .subscribe__newsletter {
        max-width: inherit;
        margin-bottom: 26px
    }

    .subscribe .form__input {
        padding: 29px 15px
    }

    .subscribe .form .btn-main {
        max-width: 156px;
        padding: 20px 10px;
        top: calc(50% - 30px)
    }

    .accept {
        padding: 30px 0
    }

    .accept .title {
        line-height: 40px;
        margin-bottom: 26px
    }

    .accept__container {
        display: block;
        gap: 0
    }

    .accept__top {
        margin-bottom: 22px
    }

    .accept__top .accept__image:first-child {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1
    }

    .accept__bottom .accept__image:nth-child(2) {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1
    }

    .accept__image .image {
        max-width: 70%
    }

    .above-footer__container {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .above-footer .item-contacts .contacts {
        margin-bottom: 14px
    }

    .above-footer .item-menu {
        margin-left: 72px;
        margin-right: auto
    }

    .above-footer .item-description {
        margin-top: 42px
    }

    .above-footer .item-description .text {
        max-width: inherit
    }
}

@media (max-width: 576px) {
    .btn-fixed {
        opacity: 0;
        z-index: -1;
        pointer-events: none
    }

    .btn-fixed.show {
        opacity: 1;
        z-index: 111;
        pointer-events: all
    }

    .main-info {
        overflow: auto;
        top: 800px
    }

    .main-info__container {
        min-width: 670px
    }

    .available__container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        gap: 30px
    }

    .available__images {
        max-width: 388px
    }

    .available .btn-main, .available__content {
        max-width: inherit
    }

    .platforms {
        background: -webkit-gradient(linear, left top, right top, from(#ff4521), color-stop(100.02%, #f5775f));
        background: -o-linear-gradient(left, #ff4521 0, #f5775f 100.02%);
        background: linear-gradient(90deg, #ff4521 0, #f5775f 100.02%);
        padding: 40px 0
    }

    .platforms__container {
        padding: 40px 20px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-left: -14px;
        margin-right: -14px
    }

    .platforms__content {
        max-width: inherit
    }

    .platforms .list__item {
        padding-left: 30px
    }

    .platforms .list__item::after, .platforms .list__item::before {
        content: ""
    }

    .platforms .list__item::before {
        top: 6px
    }

    .platforms .list__item::after {
        top: 13px
    }

    .platforms__images {
        max-width: 410px;
        margin-right: 0
    }

    .platforms .btn-main {
        max-width: inherit
    }

    .platforms .subtitle {
        margin-bottom: 22px
    }

    .platforms__downloads {
        max-width: 388px;
        gap: 8px
    }

    .platforms__downloads .device {
        padding: 20px 15px;
        max-width: 190px
    }

    .platforms__downloads .device__icon .icon {
        width: 40px;
        height: 40px
    }

    .platforms__downloads .device__info {
        margin-left: 5px;
        gap: 0
    }

    .platforms__downloads .device__name, .platforms__downloads .device__title {
        font-size: 14px
    }

    .platforms__downloads .device:last-child, .platforms__downloads .device:nth-child(3) {
        display: none
    }

    .demo {
        padding-top: 40px;
        padding-bottom: 270px;
        background: url(/dist/images/demo-mob.png) bottom no-repeat, rgba(242, 246, 250, .5)
    }

    .demo__container {
        text-align: center
    }

    .demo .btn-main {
        max-width: inherit
    }

    .steps .title {
        margin-bottom: 40px
    }

    .steps__container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        gap: 40px
    }

    .steps .step {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .steps .step__text {
        margin-left: 20px;
        text-align: left
    }

    .steps .step__name {
        font-size: 20px;
        margin-top: 0;
        margin-bottom: 12px
    }

    .steps .step__descript {
        font-size: 16px;
        max-width: 240px;
        text-align: left
    }

    .steps .step--dashed::after, .steps .step--dashed::before {
        width: 160px;
        top: 30px;
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    .steps .step--dashed::before {
        left: -50px
    }

    .steps .step--dashed::after {
        content: none
    }

    .tips__container {
        max-width: inherit
    }

    .tips .title {
        margin-bottom: 20px
    }

    .tips .tricks__question {
        padding-left: 16px;
        padding-right: 20px
    }

    .tips .tricks__answer {
        padding-left: 16px;
        padding-right: 5px
    }

    .tips .tricks__item.tricks__item--active .tricks__question {
        padding-bottom: 5px
    }

    .tips .tricks__item.tricks__item--active .tricks__answer {
        padding-bottom: 20px
    }

    .request {
        padding: 0;
        background: url(/dist/images/form-bg-mob.jpg) center/cover no-repeat
    }

    .request__container {
        max-width: inherit;
        background: 0 0;
        border-radius: 0;
        padding-top: 60px;
        padding-bottom: 200px
    }

    .request .title {
        margin-bottom: 30px
    }

    .request__form, .subscribe__container {
        max-width: inherit
    }

    .subscribe__newsletter {
        margin-bottom: 60px
    }

    .subscribe .form__input {
        padding: 14px 16px
    }

    .subscribe .form .btn-main {
        position: static;
        max-width: inherit;
        margin-top: 30px
    }

    .accept__image .image {
        max-width: 100%
    }

    .above-footer .logo-link {
        margin-bottom: 30px
    }

    .above-footer__container {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns:1fr 1fr
    }

    .above-footer .item-contacts .contacts {
        margin-bottom: 20px
    }

    .above-footer .item-menu {
        margin-left: 42px;
        margin-right: 0
    }

    .above-footer .item-description {
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1/3;
        margin-top: 40px
    }
}

@media (max-width: 428px) {
    .btn-fixed {
        top: 300px
    }

    .main-screen {
        padding-bottom: 100px
    }

    .main-screen__container {
        margin-bottom: 20px
    }

    .main-screen .btn-main {
        max-width: inherit;
        font-size: 18px
    }

    .main-screen__left {
        max-width: inherit
    }

    .main-screen__right {
        max-width: 410px
    }

    .main-screen__right .image {
        max-height: 230px
    }

    .main-info {
        top: 700px
    }

    .available {
        padding-top: 100px
    }

    .accounts {
        padding-top: 30px
    }

    .accounts__container {
        min-width: inherit;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .accounts .account {
        padding-bottom: 48px;
        min-width: inherit;
        max-width: 368px;
        width: 100%
    }

    .accounts .account__label {
        max-width: 212px;
        font-size: 16px;
        padding: 13px
    }

    .accounts .account__name {
        font-size: 30px;
        margin-top: 30px;
        padding-bottom: 41px
    }

    .accounts .account__list {
        margin-top: 44px;
        margin-bottom: 38px
    }

    .accounts .account__list-item {
        padding: 13px 38px 13px 45px
    }

    .accounts .account__list-item .name, .accounts .account__list-item .value {
        font-size: 16px
    }

    .accounts .account__list-item .value {
        font-weight: 700;
        font-size: 18px
    }

    .accounts .account .btn-main {
        font-size: 18px;
        padding: 17px;
        max-width: 300px
    }

    .platforms__images {
        margin-right: -220px
    }

    .steps .title {
        max-width: 256px;
        margin-left: auto;
        margin-right: auto
    }

    .tips .tricks__title {
        max-width: 330px
    }

    .tips .tricks__title::after, .tips .tricks__title::before {
        right: -15px
    }

    .tips .tricks__answer {
        max-width: 300px
    }

    .above-footer .item-menu ul li a {
        font-size: 18px
    }
}