* {
    margin: 0;
    padding: 0
}

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

:active,
:focus {
    outline: 0
}

a:active,
a:focus {
    outline: 0
}

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

body {
    min-height: 100vh;
    min-width: 100%;
    max-width: 100vw;
    overflow-x: hidden
}

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

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

button {
    cursor: pointer;
    border: none;
    background: 0 0
}

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

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

ol li,
ul li {
    list-style: none
}

img {
    vertical-align: top
}

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

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

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

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

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

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

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

@font-face {
    font-family: JosefinSans;
    font-display: swap;
    src: url(../fonts/JosefinSans-SemiBold.woff2) format("woff2"), url(../fonts/JosefinSans-SemiBold.woff) format("woff");
    font-weight: 600;
    font-style: normal
}

:root {
    --app-height: 100%;
    --white: #fff;
    --black: #050209;
    --green: #b35e41;
    --blue: #012a3c;
    /* --blue: #f2995f; */
    --red: #E54324;
    --payton: "PaytoneOne", sans-serif;
    --josefin: "JosefinSans", sans-serif;
    --bg: url("../img/loading.gif") 50% no-repeat
}

body {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: var(--white)
}

body._lock {
    overflow: hidden
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 320px;
    max-width: 100vw;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: var(--black)
}

.container {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px
}

.page {
    flex: 1 1 auto
}

.title {
    font-family: PaytoneOne, sans-serif;
    font-size: 5rem;
    text-align: center;
    line-height: 1.5
}

.title img {
    vertical-align: middle;
    margin: 0 15px
}

.intro {
    font-family: var(--josefin);
    font-weight: 700;
    text-transform: uppercase;
    color: #a4a8b0;
    text-align: center;
    margin-bottom: 20px
}

.btn_green {
    padding: 20px 30px;
    border-radius: 40px;
    background: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black);
    font-family: var(--josefin);
    font-size: 1.125rem;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    width: -moz-fit-content;
    width: fit-content;
    z-index: 1
}

.btn_green::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f2995f 0, #b35e41 100%);
    z-index: -1;
    opacity: 0;
    transition: all .5s ease
}

.btn_white {
    padding: 20px 30px;
    border-radius: 40px;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black);
    font-family: var(--josefin);
    font-size: 1.125rem;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    width: -moz-fit-content;
    width: fit-content;
    z-index: 1
}

.btn_white::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    transition: all .5s ease
}

.btn_up {
    width: 40px;
    height: 40px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 30;
    border-radius: 50%;
    background: var(--green);
    overflow: hidden;
    transform: translate(100px, 0);
    transition: all .5s ease
}

.btn_up.active {
    transform: translate(0, 0)
}

.btn_up::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f2995f 0, #b35e41 100%);
    z-index: -1;
    opacity: 0;
    transition: all .3s ease
}

.btn_up svg {
    width: 100%;
    height: 100%;
    fill: transparent
}

.header {
    top: 20px;
    left: 0;
    width: 100%;
    z-index: 100;
    min-width: 320px
}

.header.active .header__body {
    transform: translate(0, 0)
}

.header__container {
    max-width: 1330px
}

.header__body {
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    border-radius: 30px;
    transform: translate(0, -200%);
    transition: all .8s ease 1s
}

.header__menu {
    flex: 1 1 auto
}

.header__menu-icon {
    width: 32px;
    height: 32px;
    position: relative;
    display: none;
    background: rgba(255, 255, 255, .05);
    border-radius: 4px;
    transition: all .5s ease
}

.header__menu-icon::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    background: url(/coin.png) center/contain no-repeat;
    transition: all .5s ease
}

.header__menu-icon::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(../img/icons/icons.svg#close) center/contain no-repeat;
    transition: all .5s ease;
    opacity: 0
}

.header__menu-icon._active {
    background: var(--red)
}

.header__menu-icon._active::before {
    transform: translate(-50%, -50%) scale(0)
}

.header__menu-icon._active::after {
    opacity: 1
}

.menu__list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    -moz-column-gap: 30px;
    column-gap: 30px;
    row-gap: 10px
}

.menu__item.active .menu__link {
    opacity: 1
}

.menu__item.active .menu__link::after {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0)
}

.menu__link {
    font-family: var(--josefin);
    font-size: 1.125rem;
    color: var(--white);
    position: relative;
    transition: all .5s ease
}

.menu__link::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    top: 110%;
    left: 0;
    background: var(--white);
    transform: translate(0, 5px);
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease
}

.menu__btn {
    font-size: .875rem;
    font-weight: 700;
    color: var(--white);
    border-radius: 12px;
    padding: 14px 22px;
    border: 1px solid rgba(255, 255, 255, .1);
    margin-top: 60px;
    display: none;
    transition: all .5s ease
}

.menu__socials {
    flex: 1 1 auto;
    display: none
}

.logo {
    display: flex;
    align-items: center;
    font-family: PaytoneOne, sans-serif;
    font-size: 1.25rem;
    margin-right: 30px;
    color: var(--white);
    white-space: nowrap
}

.logo img {
    width: 33px;
    height: 33px;
    margin-right: 10px
}

.socials {
    flex-direction: column;
    justify-content: flex-end
}

.socials__body {
    display: flex;
    justify-content: center;
    padding: 20px;
    border-top: 1px solid #4e5156;
    margin: 0 12px
}

.socials__item {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center
}

.socials__item:not(:last-child) {
    margin-right: 10px
}

.socials__item svg {
    width: 50%;
    height: 50%;
    fill: #fff;
    transition: all .5s ease
}

.main {
    background: var(--blue);
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    margin: 20px 20px 0
}

.main.active::after {
    opacity: 1;
    transform: translate(0, 0)
}

.main::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20%;
    height: 30%;
    /* background: url(/clouds.png) bottom right/contain no-repeat; */
    z-index: 2;
    transform: translate(100%, 100%);
    opacity: 0;
    transition: all .8s ease .8s
}

.main__container {
    max-width: 1300px
}

.main__body {
    display: flex;
    align-items: center;
    padding: 150px 0 40px
}

.main__info {
    flex: 1 1 40%;
    padding-right: 30px
}

.main__title {
    margin-bottom: 50px;
    font-size: 7.5rem;
    font-family: var(--payton);
    line-height: 1;
    transform: translate(0, 50px);
    opacity: 0;
    transition: all .8s ease
}

.main__title.active {
    opacity: 1;
    transform: translate(0, 0)
}

.main__desc {
    font-family: var(--josefin);
    font-weight: 700;
    margin-bottom: 50px;
    font-size: 1.75rem;
    max-width: 420px;
    transform: translate(0, 50px);
    opacity: 0;
    transition: all .8s ease .1s
}

.main__desc.active {
    opacity: 1;
    transform: translate(0, 0)
}

.main__btn {
    width: 200px;
    transform: translate(0, 50px);
    opacity: 0;
    transition: all .8s ease .2s
}

.main__btn.active {
    opacity: 1;
    transform: translate(0, 0)
}

.main__image {
    flex: 1 1 60%;
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
    padding-left: 100px
}

.main__image.active img {
    animation: fadeIn .7s ease .5s forwards
}

.main__image.active svg {
    animation: draw .8s ease forwards
}

.main__image.active .main__dialog {
    animation: fadeIn .7s ease 1.3s forwards
}

.main__image.active::after {
    opacity: 1;
    transform: translate(0, 0)
}

.main__image img {
    max-width: 100%;
    height: auto;
    transform: scale(0)
}

.main__image svg {
    width: 190%;
    height: 190%;
    position: absolute;
    top: -64%;
    right: -11%;
    z-index: -1;
    pointer-events: none;
    stroke-dasharray: 1000;
    stroke-dashoffset: -1000
}

.main__image::after {
    content: "";
    position: absolute;
    top: 3%;
    right: 3%;
    width: 120px;
    height: 117px;
    background: url(/coin.png) center/contain no-repeat;
    z-index: -1;
    opacity: 0;
    transform: translate(0, -50px);
    transition: all .8s ease 1.3s
}

.main__dialog {
    position: absolute;
    left: 0;
    top: 50%;
    background: var(--white);
    font-family: var(--josefin);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--blue);
    padding: 30px 25px;
    border-radius: 30px;
    transform: scale(0)
}

.main__dialog::after {
    content: "";
    position: absolute;
    top: 85%;
    right: 10%;
    width: 51px;
    height: 35px;
    background: url(../img/main/dialog.svg) top left/contain no-repeat;
    pointer-events: none
}

.main__btns_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 50px;
    background: rgba(255, 255, 255, .1);
    border-radius: 12px;
    margin-top: 5px;
    width: 100%
}

.main__btns_lbl {
    font-size: 28px;
    font-weight: 700;
    line-height: 28px;
    text-align: left;
    font-family: var(--josefin);
    white-space: nowrap;
    color: #fff
}

.main__btns {
    position: relative;
    display: flex;
    gap: 10px;
    width: 100%;
    padding: 0 0;
    z-index: 3;
    justify-content: flex-end
}

.main__btns .main__link {
    padding: 5px 23px 5px 1px
}

.main__btns .main__link img {
    margin-right: 5px;
    width: 30px;
    height: 30px
}

.main__link {
    transform: scale(0);
    box-shadow: 6px 5px 4px rgba(0, 0, 0, .2);
    transition: all .5s ease;
    position: relative;
    white-space: nowrap
}

.main__link.active {
    animation: fadeIn .7s ease-in-out forwards
}

.main__link span {
    margin-left: 5px
}

.main__link img {
    min-width: 24px;
    width: 24px;
    height: 24px;
    margin-left: 10px;
    border-radius: 50%;
    overflow: hidden
}

.main .hero_buttons {
    display: flex;
    gap: 20px
}

.claimr {
    position: relative;
    z-index: 10
}

.claimr__container {
    padding-bottom: calc(70px + 50 * (100vw - 320px)/ 1120)
}

.socialfi-block {
    margin-top: 8vh
}

.partners {
    position: relative
}

.partners.active::after {
    transform: translate(0, -60%) scale(1);
    opacity: 1
}

.partners::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -60%) scale(0);
    width: 100%;
    aspect-ratio: 1440/1763;
    background: url(/blur.png) center/cover no-repeat;
    pointer-events: none;
    opacity: 0;
    transition: all .8s ease .5s
}

.partners__body {
    padding: 50px 0;
    position: relative
}

.partners__slider {
    overflow: hidden
}

.partners__slider.active .partners__item {
    transform: scale(1)
}

.partners__slide:nth-child(1) .partners__item {
    transition: all .5s ease
}

.partners__slide:nth-child(2) .partners__item {
    transition: all .5s ease .1s
}

.partners__slide:nth-child(3) .partners__item {
    transition: all .5s ease .2s
}

.partners__slide:nth-child(4) .partners__item {
    transition: all .5s ease .3s
}

.partners__slide:nth-child(5) .partners__item {
    transition: all .5s ease .4s
}

.partners__slide:nth-child(6) .partners__item {
    transition: all .5s ease .5s
}

.partners__item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 10px;
    background: rgba(255, 255, 255, .1);
    border-radius: 12px;
    transform: scale(0);
    position: relative;
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px)
}

.partners__item img {
    max-width: 100%;
    height: 200px
}

.story {
    position: relative
}

.story::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(20px, -45%);
    width: 99px;
    height: 197px;
    background: url(../img/story/star.webp) top right/contain no-repeat
}

.story__body {
    display: flex;
    align-items: center;
    padding: 80px 0
}

.story__image {
    flex: 1 1 50%
}

.story__image.active img {
    transform: translate(0, 0);
    opacity: 1
}

.story__image img {
    max-width: 100%;
    height: auto;
    transform: translate(-100%, 0);
    opacity: 0;
    transition: all .8s ease
}

.story__info {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 80px
}

.story__intro {
    opacity: 0;
    transform: translate(100px, 0);
    transition: all .8s ease
}

.story__intro.active {
    transform: translate(0, 0);
    opacity: 1
}

.story__title {
    margin-bottom: 50px;
    opacity: 0;
    transform: translate(100px, 0);
    transition: all .8s ease .1s
}

.story__title.active {
    transform: translate(0, 0);
    opacity: 1
}

.story__accent {
    font-family: var(--josefin);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 50px;
    opacity: 0;
    transform: translate(100px, 0);
    transition: all .8s ease .2s
}

.story__accent.active {
    transform: translate(0, 0);
    opacity: 1
}

.story__text {
    font-family: var(--josefin);
    font-size: 1.125rem;
    line-height: 1.3
}

.story__text.active p {
    transform: translate(0, 0);
    opacity: 1
}

.story__text p {
    opacity: 0;
    transform: translate(100px, 0)
}

.story__text p:nth-child(1) {
    transition: all .8s ease .3s
}

.story__text p:nth-child(2) {
    transition: all .8s ease .4s
}

.story__text p:nth-child(3) {
    transition: all .8s ease .5s
}

.story__text p:not(:last-child) {
    margin-bottom: 30px
}

.banner {
    background: var(--blue);
    border-radius: 30px;
    margin: 0 20px 50px
}

.banner__body {
    display: flex;
    align-items: center;
    padding: 50px 0;
    gap: 35px
}

.banner__info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.banner__intro {
    opacity: 0;
    transform: translate(0, 100px);
    transition: all .8s ease
}

.banner__intro.active {
    opacity: 1;
    transform: translate(0, 0)
}

.banner__title {
    text-align: left;
    line-height: 1;
    margin-bottom: 35px;
    opacity: 0;
    transform: translate(0, 100px);
    transition: all .8s ease .1s
}

.banner__title.active {
    opacity: 1;
    transform: translate(0, 0)
}

.banner__text {
    font-family: var(--josefin);
    font-size: 1.125rem;
    opacity: 0;
    transform: translate(0, 100px);
    transition: all .8s ease .2s
}

.banner__text.active {
    opacity: 1;
    transform: translate(0, 0)
}

.banner__image {
    flex: 1 0 385px;
    max-width: 385px;
    position: relative
}

.banner__image.active svg {
    animation: draw .8s ease forwards
}

.banner__image.active img {
    animation: fadeIn .8s ease .5s forwards;
    position: relative;
    bottom: -50px;
    width: 113%;
    max-width: 100%;
    border-radius: 8px;
}

.banner__image.active::after,
.banner__image.active::before {
    opacity: 1
}

.banner__image.active::after {
    display: none
}

.banner__image::before {
    content: "";
    position: absolute;
    width: 15%;
    aspect-ratio: 1/1;
    bottom: 20%;
    left: 0;
    transform: translate(-50%, 0);
    background: url(/coin.png) center/contain no-repeat;
    opacity: 0;
    transition: all .8s ease 1s
}

.banner__image::after {
    content: "";
    position: absolute;
    width: 31%;
    aspect-ratio: 1/1;
    bottom: 0;
    right: 0;
    transform: translate(-30%, 10%);
    background: url(../img/banner/icon.webp) center/contain no-repeat;
    opacity: 0;
    transition: all .8s ease 1.2s
}

.banner__image img {
    max-width: 100%;
    height: auto;
    transform: scale(0)
}

.banner__image svg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-58%, -5%);
    width: 190%;
    aspect-ratio: 1/1;
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500
}

.system {
    padding: 120px 0;
    position: relative;
    z-index: 2
}

.system__container {
    max-width: 1400px
}

.system__body {
    margin-bottom: 50px
}

.system__intro {
    opacity: 0;
    transform: translate(0, 50px);
    transition: all .8s ease
}

.system__intro.active {
    opacity: 1;
    transform: translate(0, 0)
}

.system__title {
    margin-bottom: 50px;
    opacity: 0;
    transform: translate(0, 50px);
    transition: all .8s ease .1s;
    font-family: textss;
    src: url(new.ttf);

}

.system__title.active {
    opacity: 1;
    transform: translate(0, 0)
}

.system__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 10px
}

.system__list.active .system__item {
    opacity: 1;
    transform: translate(0, 0)
}

.system__item {
    padding: 40px 30px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    transform: translate(100%, 0);
    opacity: 0
}

.system__item:nth-child(1) {
    transition: all .8s ease
}

.system__item:nth-child(2) {
    transition: all .8s ease .2s
}

.system__item:nth-child(3) {
    transition: all .8s ease .4s
}

.system__item_big .system__text {
    font-size: 1.75rem;
    font-weight: 700
}

.system__icon {
    width: 50px;
    min-width: 50px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30px
}

.system__icon img {
    max-width: 100%;
    height: auto
}

.system__text {
    font-family: var(--josefin);
    font-size: 1rem;
    line-height: 1.3
}

.system__block {
    border-radius: 20px;
    background: var(--green);
    display: flex;
    align-items: center;
    overflow: hidden;
    transform: translate(0, 50%);
    opacity: 0;
    transition: all .8s ease .3s
}

.system__block.active {
    transform: translate(0, 0);
    opacity: 1
}

.system__image {
    flex: 1 1 50%;
    align-self: flex-end;
    margin-bottom: -5%;
    max-width: 685px;
    max-height: 685px;
}

.system__image img {
    max-width: 100%;
    height: auto
}

.system__info {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    padding: 30px 15px;

}

.system__info::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 95px;
    height: 95px;
    transform: translate(-100%, 0);
    background: url(/coin.png) center/contain no-repeat
}

.system__info .system__intro {
    color: var(--black);
    margin-bottom: 50px;


}

.system__desc {
    margin-bottom: 30px;
    /* font-family: var(--josefin); */
    font-size: 2rem;
    font-weight: 700;
    color: var(--black);
    max-width: 6850px;
    font-family: textss;
    src: url(new.ttf);

}

.system__btn {
    width: 200px
}

.system__marquee {
    transform: rotate(6deg) translateY(-50%) scale(2);
    opacity: 1;
    position: relative;
    opacity: 0;
    transition: all .8s ease
}

.system__marquee.active {
    opacity: 1;
    transform: rotate(6deg) translateY(-50%) scale(1)
}

.system__marquee::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(50%, -35%);
    width: 213px;
    height: 213px;
    background: url(../img/system/decor.webp) center/contain no-repeat
}

.system__marquee::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -60%);
    width: 253px;
    height: 476px;
    background: url(/coin.png) center/contain no-repeat;
    z-index: -1
}

.hopping {
    position: relative;
    z-index: 1
}

.hopping::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    width: 100%;
    aspect-ratio: 1/1;
    background: url(/blur.png) center/cover no-repeat;
    z-index: -1;
    opacity: .7
}

.hopping__body {
    padding-bottom: 120px
}

.hopping__intro {
    transform: translate(0, 50px);
    opacity: 0;
    transition: all .8s ease
}

.hopping__intro.active {
    opacity: 1;
    transform: translate(0, 0)
}

.hopping__title {
    margin-bottom: 70px;
    transform: translate(0, 50px);
    opacity: 0;
    transition: all .8s ease .1s
}

.hopping__title.active {
    opacity: 1;
    transform: translate(0, 0)
}

.hopping__block {
    display: flex;
    align-items: flex-end
}

.hopping__info {
    flex: 1 1 50%
}

.hopping__list {
    margin-bottom: 40px;
    display: grid;
    gap: 10px
}

.hopping__list.active .hopping__item {
    opacity: 1;
    transform: translate(0, 0)
}

.hopping__item {
    padding: 10px 30px;
    background: rgba(255, 255, 255, .1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    transform: translate(-100%, 0);
    opacity: 0
}

.hopping__item:nth-child(1) {
    transition: all .8s ease
}

.hopping__item:nth-child(2) {
    transition: all .8s ease .2s
}

.hopping__item:nth-child(3) {
    transition: all .8s ease .4s
}

.hopping__item:nth-child(4) {
    transition: all .8s ease .6s
}

.hopping__icon {
    margin-right: 30px;
    width: 80px;
    height: 80px;
    min-width: 80px;
    display: flex;
    align-items: center;
    justify-content: center
}

.hopping__text {
    font-family: var(--josefin);
    font-size: 1.125rem;
    line-height: 1.3
}

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

.hopping__btns.active .hopping__btn {
    animation: fadeIn .8s ease forwards
}

.hopping__btn {
    border-radius: 10px;
    border: 1px solid rgba(245, 246, 248, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 190px;
    width: 100%;
    transition: all .5s ease;
    transform: scale(0)
}

.hopping__btn:not(:last-child) {
    margin-right: 15px
}

.hopping__btn img {
    max-width: 100%;
    height: auto
}

.hopping__image {
    flex: 1 1 50%;
    padding-left: 95px;
    position: relative
}

.hopping__image.active img {
    animation: fadeIn .8s ease forwards
}

.hopping__image.active svg {
    animation: draw 1.2s ease .5s forwards
}

.hopping__image img {
    max-width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    transform: scale(0)
}

.hopping__image svg {
    position: absolute;
    right: 7%;
    top: 7%;
    width: 120%;
    aspect-ratio: 751/746;
    stroke-dasharray: 1000;
    stroke-dashoffset: -1000
}

.hopping__video {
    position: absolute;
    width: 35%;
    height: 95%;
    top: 2%;
    right: 13%;
    border-radius: 30px;
    overflow: hidden;
    z-index: 1
}

.hopping__video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.staking__body {
    padding: 80px 0
}

.staking__intro {
    transform: translate(0, 50px);
    opacity: 0;
    transition: all .8s ease
}

.staking__intro.active {
    opacity: 1;
    transform: translate(0, 0)
}

.staking__title {
    margin-bottom: 60px;
    transform: translate(0, 50px);
    opacity: 0;
    transition: all .8s ease .2s
}

.staking__title.active {
    opacity: 1;
    transform: translate(0, 0)
}

.staking__block {
    display: flex;
    align-items: center;
    margin-bottom: 75px
}

.staking__list {
    flex: 1 1 33.333%;
    display: grid;
    gap: 50px
}

.staking__list.active .staking__item {
    opacity: 1 !important;
    transform: translate(0, 0) !important
}

.staking__list:first-child {
    padding-right: 97px
}

.staking__list:first-child .staking__item:nth-child(1) {
    transform: translate(-100%, 0);
    opacity: 0;
    transition: all .8s ease
}

.staking__list:first-child .staking__item:nth-child(2) {
    transform: translate(-100%, 0);
    opacity: 0;
    transition: all .8s ease .2s
}

.staking__list:last-child {
    padding-left: 97px
}

.staking__list:last-child .staking__item:nth-child(1) {
    transform: translate(100%, 0);
    opacity: 0;
    transition: all .8s ease
}

.staking__list:last-child .staking__item:nth-child(2) {
    transform: translate(100%, 0);
    opacity: 0;
    transition: all .8s ease .2s
}

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

.staking__icon {
    width: 100px;
    height: 100px;
    margin-right: 30px;
    border-radius: 12px
}

.staking__name {
    font-family: var(--josefin);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 15px
}

.staking__text {
    font-family: var(--josefin);
    font-size: 1.125rem;
    line-height: 1.3
}

.staking__image {
    flex: 1 1 33.333%;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center
}

.staking__image.active img {
    animation: fadeIn .8s ease .5s forwards
}

.staking__image.active::before {
    opacity: 1
}

.staking__image::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url(../img/stacking/blur.webp) center/cover no-repeat;
    height: 180%;
    aspect-ratio: 1/1;
    z-index: -1;
    opacity: 0;
    transition: all .8s ease 1s
}

.staking__image img {
    max-width: 100%;
    height: auto;
    transform: scale(0)
}

.staking__btn {
    margin: 0 auto;
    transform: scale(0)
}

.staking__btn.active {
    animation: fadeIn .6s ease forwards
}

.media {
    position: relative
}

.media.active::before {
    opacity: 1;
    transform: translate(0, -50%)
}

.media.active::after {
    opacity: 1
}

.media::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-100%, -50%);
    width: 100px;
    aspect-ratio: 100/200;
    background: url(../img/media/decor.webp) center left/contain no-repeat;
    pointer-events: none;
    opacity: 0;
    transition: all .8s ease .8s
}

.media::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -45%);
    width: 707px;
    aspect-ratio: 707/1400;
    background: url(../img/media/blur.webp) center right/cover no-repeat;
    pointer-events: none;
    opacity: 0;
    transition: all .8s ease .8s
}

.media__container {
    max-width: 1400px
}

.media__body {
    padding: 120px 0
}

.media__intro {
    transform: translate(0, 50px);
    opacity: 0;
    transition: all .8s ease
}

.media__intro.active {
    opacity: 1;
    transform: translate(0, 0)
}

.media__title {
    margin-bottom: 50px;
    transform: translate(0, 50px);
    opacity: 0;
    transition: all .8s ease .2s
}

.media__title.active {
    opacity: 1;
    transform: translate(0, 0)
}

.media__list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px
}

.media__list.active .media__item {
    transform: translate(0, 0);
    opacity: 1
}

.media__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: span 2;
    transform: translate(100%, 0);
    opacity: 0
}

.media__item:nth-child(1) {
    transition: all .8s ease
}

.media__item:nth-child(2) {
    transition: all .8s ease .1s
}

.media__item:nth-child(3) {
    transition: all .8s ease .2s
}

.media__screen {
    background: rgba(255, 255, 255, .1);
    width: 100%;
    aspect-ratio: 460/218;
    border-radius: 20px;
    margin-bottom: 20px
}

.media__text {
    font-family: var(--josefin);
    font-size: 1.125rem;
    line-height: 1.3
}

.start {
    background: var(--blue);
    margin: 0 20px;
    border-radius: 30px;
    margin-bottom: 120px;
    position: relative
}

.start::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-20px, -50%);
    width: 180px;
    aspect-ratio: 180/300;
    background: url(../img/start/decor1.webp) center left/contain no-repeat
}

.start::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(20px, -50%);
    width: 360px;
    aspect-ratio: 360/369;
    background: url(../img/start/decor2.webp) center right/contain no-repeat
}

.start__body {
    padding-top: 120px
}

.start__intro {
    transform: translate(0, 50px);
    opacity: 0;
    transition: all .8s ease
}

.start__intro.active {
    transform: translate(0, 0);
    opacity: 1
}

.start__title {
    margin-bottom: 60px;
    transform: translate(0, 50px);
    opacity: 0;
    transition: all .8s ease
}

.start__title.active {
    transform: translate(0, 0);
    opacity: 1
}

.start__slider {
    margin-bottom: 40px
}

.start__slider.active .start__block {
    opacity: 1;
    transform: translate(0, 0)
}

.start__slider.active .start__icon img {
    animation: fadeIn .8s ease .8s forwards
}

.start__slider.active .start__slide:nth-child(4) .start__block {
    opacity: .5
}

.start__slide:nth-child(1) .start__block {
    transition: all .5s ease
}

.start__slide:nth-child(2) .start__block {
    transition: all .5s ease .1s
}

.start__slide:nth-child(3) .start__block {
    transition: all .5s ease .2s
}

.start__slide:nth-child(4) .start__block {
    transition: all .5s ease .3s
}

.start__block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transform: translate(100%, 0);
    opacity: 0
}

.start__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    margin-bottom: 30px;
    background: var(--green)
}

.start__icon img {
    max-width: 100%;
    transform: scale(0)
}

.start__number {
    position: absolute;
    top: 10px;
    right: -5px;
    font-size: .625rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #111112;
    border: 1px solid var(--green);
    color: var(--white);
    background: #733dcb
}

.start__name {
    font-family: var(--josefin);
    margin-bottom: 25px;
    font-size: 1.75rem;
    font-weight: 700
}

.start__text {
    font-family: var(--josefin);
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 25px
}

.start__btn {
    font-family: var(--josefin);
    font-size: 1.125rem;
    font-weight: 700;
    padding: 20px 30px;
    border: 1px solid rgba(255, 255, 255, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 40px;
    color: var(--white);
    margin: 0 auto;
    transition: all .5s ease
}

.start__btn svg {
    width: 16px;
    height: 16px;
    fill: var(--white);
    margin-right: 10px
}

.start__btn.active {
    animation: fadeIn .8s ease forwards
}

.start__list {
    margin-bottom: 25px
}

.start__item {
    font-family: var(--josefin);
    font-size: 1.125rem;
    line-height: 1.3;
    padding-left: 30px;
    position: relative
}

.start__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    width: 23px;
    height: 23px;
    background: url(../img/icons/icons.svg#list2) center/contain no-repeat
}

.start__item:not(:last-child) {
    margin-bottom: 10px
}

.start__footer {
    font-family: var(--josefin);
    font-size: 1.125rem
}

.start__marquee {
    transform: rotate(0) translateY(100%) scale(2);
    opacity: 0;
    transition: all .8s ease
}

.start__marquee.active {
    opacity: 1;
    transform: rotate(-6deg) translateY(50%) scale(1)
}

.start__marquee .marquee__wrapper {
    background: var(--green)
}

.start__marquee .marquee__body {
    color: var(--blue)
}

.start__marquee .marquee__body svg {
    stroke: var(--blue)
}

.tokenomikcs {
    position: relative;
    z-index: 1
}

.tokenomikcs__container {
    max-width: 1400px
}

.tokenomikcs__body {
    padding: 120px 0
}

.tokenomikcs__intro {
    transform: translate(0, 50px);
    opacity: 0;
    transition: all .8s ease
}

.tokenomikcs__intro.active {
    transform: translate(0, 0);
    opacity: 1
}

.tokenomikcs__title {
    margin-bottom: 50px;
    transform: translate(0, 50px);
    opacity: 0;
    transition: all .8s ease
}

.tokenomikcs__title.active {
    transform: translate(0, 0);
    opacity: 1
}

.tokenomikcs__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px
}

.tokenomikcs__item {
    border-radius: 20px;
    background: #f5f6f8;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    gap: 10px;
    grid-column: span 2;
    transform: scale(0)
}

.tokenomikcs__item.active:nth-child(1) {
    animation: fadeIn .8s ease forwards
}

.tokenomikcs__item.active:nth-child(2) {
    animation: fadeIn .8s ease .1s forwards
}

.tokenomikcs__item.active:nth-child(3) {
    animation: fadeIn .8s ease .2s forwards
}

.tokenomikcs__item.active:nth-child(4) {
    animation: fadeIn .8s ease .3s forwards
}

.tokenomikcs__item.active:nth-child(5) {
    animation: fadeIn .8s ease .4s forwards
}

.tokenomikcs__item_xl,
.tokenomikcs__item_xxl {
    grid-column: span 3
}

.tokenomikcs__item_xl .tokenomikcs__info span,
.tokenomikcs__item_xxl .tokenomikcs__info span {
    font-size: 2.375rem;
    word-break: normal
}

.tokenomikcs__item_xl {
    background: var(--green)
}

.tokenomikcs__item_xl .tokenomikcs__info {
    flex: 1 1 auto;
    padding-right: 30px
}

.tokenomikcs__item_xxl {
    background: #9c4852
}

.tokenomikcs__item_xxl .tokenomikcs__image {
    transform: scale(1.4)
}

.tokenomikcs__item_xxl .tokenomikcs__info {
    color: var(--white);
    font-size: 1.75rem;
    font-weight: 400
}

.tokenomikcs__item_xxl .tokenomikcs__info span {
    color: var(--white);
    font-weight: 700
}

.tokenomikcs__info {
    font-family: var(--josefin);
    font-size: 1.125rem;
    font-weight: 700;
    color: #8c8d92;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.tokenomikcs__info span {
    color: var(--black);
    font-size: 1.75rem;
    word-break: break-all
}

.tokenomikcs__icon {
    width: 100px;
    min-width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .02);
    position: relative
}

.tokenomikcs__icon_pink {
    background: #d480ec
}

.tokenomikcs__icon_green {
    background: var(--green)
}

.tokenomikcs__icon_blue {
    background: #36ceff
}

.tokenomikcs__icon img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    -o-object-fit: contain;
    object-fit: contain
}

.tokenomikcs__image {
    position: relative
}

.tokenomikcs__image img {
    max-width: 100%;
    height: auto
}

.tokenomikcs__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.tokenomikcs__bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.tokenomikcs__form {
    padding: 10px;
    display: flex;
    align-items: center;
    background: var(--white);
    border-radius: 10px;
    width: 100%
}

.tokenomikcs__input {
    width: 50px;
    flex: 1 1 auto;
    font-family: var(--josefin);
    font-size: 1.125rem;
    font-weight: 700;
    color: #8c8d92;
    border: none;
    background: 0 0;
    margin-right: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical
}

.tokenomikcs__copy {
    width: 38px;
    min-width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    transition: all .5s ease
}

.tokenomikcs__copy svg {
    width: 60%;
    height: 60%;
    fill: var(--white)
}

.jupiter {
    background-color: #000000;
    border-radius: 20px;
    padding: 50px 90px;
    margin-top: 10px
}

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

.jupiter__body__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    max-width: 450px
}

.jupiter__title {
    line-height: 1;
    text-align: left
}

.jupiter__subtitle {
    font-family: var(--josefin);
    margin-top: 50px;
    font-size: 38px;
    font-weight: 700
}

.jupiter__widget {
    flex: 1 1 50%;
    max-width: 520px;
    background-color: #0f051e;
    padding: 40px 20px;
    border-radius: 20px
}

.contacts {
    background: var(--blue);
    border-radius: 50px;
    padding: 40px 0;
    position: relative;
    margin: 0 20px 150px
}

.contacts.active::after {
    transform: translate(20px, 40%);
    opacity: 1
}

.contacts::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(100%, 100%);
    width: 140px;
    aspect-ratio: 140/230;
    /* background: url(/clouds.png) center right/contain no-repeat; */
    opacity: 0;
    transition: all .8s ease 1s
}

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

.contacts__form {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.contacts__form.active .contacts__input,
.contacts__form.active .contacts__intro,
.contacts__form.active .contacts__title {
    opacity: 1;
    transform: translate(0, 0)
}

.contacts__form.active .contacts__submit {
    animation: fadeIn .8s ease .5s forwards
}

.contacts__intro {
    text-align: left;
    transform: translate(-100%, 0);
    opacity: 0;
    transition: all .8s ease
}

.contacts__title {
    margin-bottom: 20px;
    line-height: 1;
    text-align: left;
    transform: translate(-100%, 0);
    opacity: 0;
    transition: all .8s ease .1s
}

.contacts__input {
    font-family: var(--josefin);
    font-size: .875rem;
    line-height: 1.3;
    padding: 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #f5f6f8;
    width: 100%;
    transform: translate(-100%, 0);
    opacity: 0
}

.contacts__input.error {
    background: rgba(229, 67, 36, .3);
    border: 1px solid #e54324
}

.contacts__input:nth-child(3) {
    transition: all .8s ease .2s
}

.contacts__input:nth-child(4) {
    transition: all .8s ease .3s
}

.contacts__input:nth-child(5) {
    transition: all .8s ease .4s
}

.contacts__input::-moz-placeholder {
    opacity: 1;
    color: #ccc
}

.contacts__input::placeholder {
    opacity: 1;
    color: #ccc
}

.contacts__input:not(:last-child) {
    margin-bottom: 12px
}

.contacts__submit {
    margin-top: 40px;
    transform: scale(0)
}

.contacts__submit svg {
    width: 16px;
    height: 16px;
    margin-right: 10px
}

.contacts__graph {
    flex: 1 1 50%;
    display: flex;
    justify-content: flex-end;
    padding-left: 100px
}

.contacts__image {
    position: relative
}

.contacts__image.active svg {
    animation: draw .8s ease .5s forwards
}

.contacts__image.active img {
    animation: fadeIn .8s ease forwards
}

.contacts__image.active .contacts__dialog,
.contacts__image.active::after {
    opacity: 1
}

.contacts__image::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 27%;
    aspect-ratio: 1/1;
    background: url(../img/contacts/icon.webp) center/contain no-repeat;
    opacity: 0;
    transition: all .8s ease .5s
}

.contacts__image img {
    max-width: 100%;
    height: auto;
    transform: scale(0)
}

.contacts__image svg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-55%, -5%);
    width: 200%;
    aspect-ratio: 1/1;
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500
}

.contacts__dialog {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -70%);
    background: var(--white);
    font-family: var(--josefin);
    font-size: 1.4375rem;
    font-weight: 700;
    color: var(--blue);
    padding: 25px;
    border-radius: 30px;
    opacity: 0;
    transition: all .8s ease .7s
}

.contacts__dialog::after {
    content: "";
    position: absolute;
    top: 85%;
    right: 10%;
    width: 51px;
    height: 35px;
    background: url(../img/main/dialog.svg) top left/contain no-repeat;
    pointer-events: none
}

.play {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(15px, auto) minmax(auto, 700px) minmax(auto, 700px) minmax(15px, auto)
}

.play__graph {
    grid-column: span 2;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start
}

.play__graph.active .play__image {
    animation: vibroLeft .8s ease .5s forwards
}

.play__image {
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: 90px;
    transform: translate(-100%, 0);
    opacity: 0
}

.play__image::after {
    content: "";
    position: absolute;
    top: 0;
    left: -90px;
    width: 154%;
    max-width: 730px;
    aspect-ratio: 730/820;
    /* background: url(/clouds.png) center left/contain no-repeat; */
    z-index: -1
}

.play__image img {
    max-width: 100%;
    height: auto
}

.play__info {
    padding: 80px 0 150px 80px
}

.play__intro {
    text-align: left;
    transform: translate(0, 50px);
    opacity: 0;
    transition: all .8s ease
}

.play__intro.active {
    opacity: 1;
    transform: translate(0, 0)
}

.play__title {
    margin-bottom: 35px;
    line-height: 1;
    text-align: left;
    transform: translate(0, 50px);
    opacity: 0;
    transition: all .8s ease .2s
}

.play__title.active {
    opacity: 1;
    transform: translate(0, 0)
}

.play__accent {
    font-family: var(--josefin);
    font-size: 2.375rem;
    font-weight: 700;
    transform: translate(0, 50px);
    opacity: 0;
    transition: all .8s ease .4s
}

.play__accent.active {
    opacity: 1;
    transform: translate(0, 0)
}

.marquee {
    margin: 0 -25px
}

.marquee__wrapper {
    display: flex;
    align-items: center;
    position: relative;
    background: var(--blue)
}

.marquee__body {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex: 1 0 100%;
    font-size: 2.5rem;
    font-family: var(--payton);
    gap: 15px;
    padding: 10px 7.5px;
    animation: marquee 10s linear infinite
}

.marquee__body svg {
    width: 46px;
    height: 46px;
    stroke: var(--white)
}

@keyframes marquee {
    100% {
        transform: translate(-100%, 0)
    }
}

.footer {
    position: relative;
    z-index: 2;
    margin: 0 20px 20px
}

.footer::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(20px, -50%);
    max-width: 260px;
    width: 30%;
    aspect-ratio: 260/470;
    background: url(/coin.png) top right/contain no-repeat;
    transform: scale(0)
}

.footer::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(20px, -50%);
    max-width: 245px;
    width: 30%;
    aspect-ratio: 245/435;
    background: url(/coin.png) top right/contain no-repeat;
    transform: scale(0)
}

.footer.active .footer__body {
    transform: translate(0, 0)
}

.footer.active::before {
    animation: fadeInFooter .8s ease .1s forwards
}

.footer.active::after {
    animation: fadeInFooter .8s ease forwards
}

.footer__wrapper {
    position: relative;
    border-radius: 30px 30px 0 0;
    background: var(--blue);
    overflow: hidden
}

.footer__body {
    padding-top: 120px;
    transform: translate(0, 100%);
    transition: all .5s ease
}

.footer__main {
    display: flex;
    gap: 30px;
    margin-bottom: 40px
}

.footer__left {
    flex: 1 1 50%
}

.footer__logo {
    margin-bottom: 20px
}

.footer__text {
    font-family: var(--josefin);
    font-size: .875rem;
    line-height: 1.5;
    opacity: .5;
    max-width: 330px
}

.footer__right {
    flex: 1 1 50%;
    display: flex;
    justify-content: flex-end
}

.footer__screen {
    border-radius: 30px;
    background: rgba(255, 255, 255, .02);
    flex: 1 1 auto
}

.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    padding: 20px 0;
    border-top: 1px solid #4e5156
}

.footer__socials .socials__body {
    margin: 0;
    padding: 0;
    border: none
}

.footer__rights {
    font-family: var(--josefin);
    font-size: .875rem;
    color: var(--white);
    opacity: .5;
    text-align: center
}

.menu-footer__list {
    -moz-columns: 2 200px;
    columns: 2 200px
}

.menu-footer__item:not(:last-child) {
    margin-bottom: 20px
}

.menu-footer__item.active .menu-footer__link {
    opacity: 1
}

.menu-footer__item.active .menu-footer__link::after {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0)
}

.menu-footer__link {
    font-family: var(--payton);
    font-size: 1.25rem;
    color: var(--white);
    position: relative;
    transition: all .5s ease
}

.menu-footer__link::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    top: 110%;
    left: 0;
    background: var(--white);
    transform: translate(0, 5px);
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease
}

@keyframes fadeIn {
    0% {
        transform: scale(0)
    }

    20% {
        transform: scale(1.05)
    }

    40% {
        transform: scale(.95)
    }

    60% {
        transform: scale(1.03)
    }

    80% {
        transform: scale(.97)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes fadeInFooter {
    0% {
        transform: scale(0) translate(20px, -50%)
    }

    20% {
        transform: scale(1.05) translate(20px, -50%)
    }

    40% {
        transform: scale(.95) translate(20px, -50%)
    }

    60% {
        transform: scale(1.03) translate(20px, -50%)
    }

    80% {
        transform: scale(.97) translate(20px, -50%)
    }

    100% {
        transform: scale(1) translate(20px, -50%)
    }
}

@keyframes draw {
    80% {
        stroke-dashoffset: 0;
        stroke-dasharray: 1000
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 2 8
    }
}

@keyframes vibroLeft {
    0% {
        opacity: 0;
        transform: translate(-100%, 0)
    }

    20% {
        opacity: 0;
        transform: translate(-100%, 0)
    }

    40% {
        opacity: 1;
        transform: translate(10%, 0)
    }

    50% {
        opacity: 1;
        transform: translate(-10%, 0)
    }

    60% {
        opacity: 1;
        transform: translate(5%, 0)
    }

    70% {
        opacity: 1;
        transform: translate(-5%, 0)
    }

    80% {
        opacity: 1;
        transform: translate(2%, 0)
    }

    90% {
        opacity: 1;
        transform: translate(-2%, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@media (min-width:768px) {
    .story__image.active img {
        max-width: 150%;

        width: 85%
    }
}

@media (max-width:1536px) {
    .hopping__video {
        right: 2%;
        width: 39.5%
    }
}

@media (max-width:1440px) {
    .title {
        font-size: calc(2.5rem + 40 * (100vw - 20rem)/ 1120)
    }

    .main__title {
        font-size: calc(3rem + 72 * (100vw - 20rem)/ 1120)
    }

    .main__desc {
        font-size: calc(1.375rem + 6 * (100vw - 20rem)/ 1120)
    }

    .main__dialog {
        font-size: calc(1.375rem + 6 * (100vw - 20rem)/ 1120);
        padding-block: calc(15px + 15 * (100vw - 320px)/ 1120);
        padding-inline: calc(15px + 10 * (100vw - 320px)/ 1120)
    }

    .main__link {
        font-size: calc(1rem + 6 * (100vw - 20rem)/ 1120)
    }

    .story__info {
        padding-left: calc(10px + 70 * (100vw - 320px)/ 1120)
    }

    .system {
        padding: calc(70px + 50 * (100vw - 320px)/ 1120) 0
    }

    .system__desc {
        font-size: calc(1.75rem + 10 * (100vw - 20rem)/ 1120)
    }

    .system__marquee::before {
        width: calc(140px + 73 * (100vw - 320px)/ 1120);
        height: calc(140px + 73 * (100vw - 320px)/ 1120);
        transform: translate(calc(25% + 25 * (100vw - 320px)/ 1120), -35%)
    }

    .system__marquee::after {
        width: calc(150px + 103 * (100vw - 320px)/ 1120);
        height: calc(210px + 266 * (100vw - 320px)/ 1120)
    }

    .hopping__body {
        padding-bottom: calc(70px + 50 * (100vw - 320px)/ 1120)
    }

    .staking__list:first-child {
        padding-right: calc(10px + 87 * (100vw - 320px)/ 1120)
    }

    .staking__list:last-child {
        padding-left: calc(10px + 87 * (100vw - 320px)/ 1120)
    }

    .media::before {
        width: calc(50px + 50 * (100vw - 320px)/ 1120)
    }

    .media::after {
        width: calc(400px + 307 * (100vw - 320px)/ 1120)
    }

    .media__body {
        padding: calc(70px + 50 * (100vw - 320px)/ 1120) 0
    }

    .start::before {
        width: calc(70px + 110 * (100vw - 320px)/ 1120)
    }

    .start::after {
        width: calc(150px + 210 * (100vw - 320px)/ 1120)
    }

    .start {
        margin-bottom: calc(70px + 50 * (100vw - 320px)/ 1120)
    }

    .start__body {
        padding-top: calc(70px + 50 * (100vw - 320px)/ 1120)
    }

    .tokenomikcs__body {
        padding: calc(70px + 50 * (100vw - 320px)/ 1120) 0
    }

    .tokenomikcs__item_xl .tokenomikcs__info span,
    .tokenomikcs__item_xxl .tokenomikcs__info span {
        font-size: calc(1.75rem + 10 * (100vw - 20rem)/ 1120)
    }

    .tokenomikcs__icon {
        width: calc(70px + 30 * (100vw - 320px)/ 1120);
        height: calc(70px + 30 * (100vw - 320px)/ 1120);
        min-width: calc(70px + 30 * (100vw - 320px)/ 1120)
    }

    .contacts {
        margin-bottom: calc(70px + 80 * (100vw - 320px)/ 1120)
    }

    .contacts::after {
        width: calc(70px + 70 * (100vw - 320px)/ 1120)
    }

    .contacts__dialog {
        padding: calc(15px + 15 * (100vw - 320px)/ 1120)
    }

    .marquee__body {
        font-size: calc(1.75rem + 12 * (100vw - 20rem)/ 1120)
    }

    .footer__body {
        padding-top: calc(70px + 50 * (100vw - 320px)/ 1120)
    }
}

@media (max-width:1280px) {
    .main__btns_wrapper {
        flex-direction: column;
        gap: 20px
    }

    .main__btns {
        justify-content: space-between
    }

    .hopping__video {
        width: 37.5%;
        border-radius: 20px;
        height: 94.5%
    }
}

@media (max-width:1200px) {
    .staking__image {
        flex: 1 1 20%
    }
}

@media (max-width:1024px) {
    .hopping__video {
        width: 34.3%;
        border-radius: 15px
    }

    .jupiter__body {
        flex-direction: column;
        gap: 40px
    }

    .jupiter {
        padding: 40px 20px
    }
}

@media (max-width:993px) {
    .main__body {
        flex-direction: column
    }

    .staking__image {
        margin-bottom: 50px
    }
}

@media (max-width:992px) {
    .header__menu-icon {
        display: block
    }

    .menu__body {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: scale(2);
        opacity: 0;
        visibility: hidden;
        display: flex;
        flex-direction: column;
        transition: all .5s ease;
        background: var(--black);
        padding: 100px 0 0;
        z-index: 50
    }

    .menu__body::before {
        content: "";
        position: absolute;
        width: 330px;
        height: 330px;
        transform: translate(20%, -20%);
        top: 0;
        right: 0;
        border-radius: 50%;
        background: url(../img/main/decor3.webp) center/contain no-repeat
    }

    .menu__body._active {
        transform: scale(1);
        opacity: 1;
        visibility: visible
    }

    .menu__wrapper {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow-y: auto;
        margin: 50px 0;
        scrollbar-width: thin;
        scrollbar-color: #5f5f5f transparent
    }

    .menu__wrapper::-webkit-scrollbar {
        width: 1px;
        height: 100%
    }

    .menu__wrapper::-webkit-scrollbar-thumb {
        background: #5f5f5f
    }

    .menu__list {
        flex-direction: column;
        row-gap: 30px
    }

    .menu__btn {
        display: block
    }

    .menu__socials {
        display: flex
    }

    .main::after {
        width: 35%;
        height: 45%
    }

    .main__info {
        padding-right: 0;
        margin-bottom: 70px
    }

    .main__title {
        margin-bottom: 30px;
        text-align: center
    }

    .main__desc {
        margin-bottom: 30px;
        max-width: unset;
        text-align: center
    }

    .main__btn {
        margin: 0 auto
    }

    .system__list {
        grid-template-columns: 1fr
    }

    .system__block {
        flex-direction: column-reverse;
        align-items: stretch
    }

    .system__image {
        margin-bottom: -10%
    }

    .system__info {
        align-items: center;
        padding-bottom: 0
    }

    .system__desc {
        max-width: unset
    }

    .system__marquee {
        transform: rotate(6deg) translateY(-70%)
    }

    .hopping__block {
        flex-direction: column;
        align-items: stretch
    }

    .hopping__info {
        margin-bottom: 50px
    }

    .hopping__list {
        display: grid;
        grid-template-columns: repeat(2, 1fr)
    }

    .hopping__btns {
        justify-content: center
    }

    .hopping__image {
        padding-left: 0;
        display: flex;
        justify-content: center
    }

    .hopping__image svg {
        display: none
    }

    .hopping__video {
        width: 36%;
        border-radius: 30px;
        right: 13%
    }

    .staking__block {
        flex-direction: column;
        align-items: stretch
    }

    .staking__list {
        grid-template-columns: repeat(2, 1fr)
    }

    .staking__list:first-child {
        padding: 0;
        margin-bottom: 50px
    }

    .staking__list:last-child {
        padding: 0
    }

    .media__item {
        grid-column: span 3
    }

    .media__item:first-child {
        grid-column: span 6
    }

    .tokenomikcs__item {
        grid-column: span 6
    }

    .tokenomikcs__item_xl,
    .tokenomikcs__item_xxl {
        grid-column: span 3;
        flex-direction: column;
        align-items: center
    }

    .tokenomikcs__item_xl .tokenomikcs__info,
    .tokenomikcs__item_xxl .tokenomikcs__info {
        align-items: center;
        text-align: center
    }

    .tokenomikcs__item_xl .tokenomikcs__info {
        padding: 0;
        width: 100%
    }

    .play {
        grid-template-columns: 1fr
    }

    .play__graph {
        order: 2
    }

    .play__image {
        margin: 0 20px
    }

    .play__info {
        order: 1;
        padding: 50px 20px;
        display: flex;
        flex-direction: column;
        align-items: center
    }

    .footer__left {
        flex: 1 1 40%
    }

    .footer__right {
        flex: 1 1 60%
    }

    .menu-footer__list {
        -moz-columns: 2 150px;
        columns: 2 150px
    }
}

@media (max-width:768px) {
    .main__btns {
        padding: 0 80px;
        justify-content: center;
        flex-wrap: wrap;
        position: relative;
        bottom: 0;
        margin-bottom: 0
    }

    .story__body {
        flex-direction: column
    }

    .story__image {
        margin-bottom: 50px
    }

    .story__info {
        padding-left: 0
    }

    .banner__body {
        flex-direction: column
    }

    .banner__image {
        flex: unset
    }

    .hopping__list {
        grid-template-columns: 1fr
    }

    .hopping__image {
        width: -moz-fit-content;
        width: fit-content
    }

    .hopping__video {
        width: 47%;
        border-radius: calc(20px + 10 * (100vw - 320px)/ 448);
        right: 2%
    }

    .staking__list {
        grid-template-columns: 1fr
    }

    .media__item {
        grid-column: span 6
    }

    .jupiter__title {
        text-align: center
    }

    .contacts__body {
        flex-direction: column;
        align-items: stretch
    }

    .contacts__form {
        margin-bottom: 50px
    }

    .contacts__intro {
        text-align: center;
        width: 100%
    }

    .contacts__title {
        text-align: center;
        width: 100%
    }

    .contacts__submit {
        margin: 40px auto 0
    }

    .contacts__graph {
        justify-content: center
    }

    .footer__main {
        flex-direction: column
    }

    .footer__text {
        max-width: unset
    }

    .footer__right {
        justify-content: center
    }

    .menu-footer__item {
        text-align: center
    }

    .menu-footer__link {
        text-align: center
    }
}

@media (max-width:576px) {
    .main__image {
        padding: 0
    }

    .main__dialog {
        top: 0;
        left: -2%;
        transform: translate(0, -50%) scale(0)
    }

    .main__dialog::after {
        right: unset;
        left: 20%
    }

    .main__link span {
        display: none
    }

    .main__link img {
        min-width: 34px;
        width: 34px;
        height: 34px
    }

    .main .hero_buttons {
        flex-direction: column
    }

    .tokenomikcs__item_xl,
    .tokenomikcs__item_xxl {
        grid-column: span 6
    }

    .contacts__graph {
        padding: 0
    }

    .contacts__dialog {
        top: 0;
        left: 0;
        transform: translate(0, -50%)
    }

    .contacts__dialog::after {
        right: unset;
        left: 20%
    }

    .footer__bottom {
        flex-direction: column;
        align-items: center
    }
}

@media (max-width:480px) {
    .header__body {
        padding: 20px
    }

    .main__btns {
        padding: 0 20px
    }

    .menu-footer__list {
        -moz-columns: 2 50%;
        columns: 2 50%
    }
}

@media (any-hover:hover) {
    .btn_green:hover::before {
        opacity: 1
    }

    .btn_white:hover::before {
        opacity: 1
    }

    .btn_up:hover::before {
        opacity: 1
    }

    .menu__item:hover .menu__link {
        opacity: 1
    }

    .menu__item:hover .menu__link::after {
        opacity: 1;
        visibility: visible;
        transform: translate(0, 0)
    }

    .menu__btn:hover {
        border: 1px solid rgba(255, 255, 255, .15);
        background: rgba(255, 255, 255, .02)
    }

    .socials__item:hover svg {
        opacity: .5
    }

    .hopping__btn:hover {
        border: 1px solid rgba(245, 246, 248, .7);
        background: rgba(255, 255, 255, .1)
    }

    .start__btn:hover {
        border: 1px solid rgba(255, 255, 255, .7);
        background: rgba(255, 255, 255, .1)
    }

    .tokenomikcs__copy:hover {
        background: var(--blue)
    }

    .menu-footer__item:hover .menu-footer__link {
        opacity: 1
    }

    .menu-footer__item:hover .menu-footer__link::after {
        opacity: 1;
        visibility: visible;
        transform: translate(0, 0)
    }
}