@import url(https://fonts.googleapis.com/css?family=Comic+Neue:300,regular,700&display=swap);

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

* {
    padding: 0;
    margin: 0;
    border: 0
}

*,
*::after,
*::before {
    box-sizing: border-box
}

*::after,
*::before {
    display: inline-block
}

body,
html {
    height: 100%;
    min-width: 320px
}

body {
    color: #0d0505;
    line-height: 1;
    font-family: "Comic Neue";
    font-size: 1.5rem;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

button,
input,
textarea {
    font-family: "Comic Neue";
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    background-color: rgba(0, 0, 0, 0)
}

input,
textarea {
    width: 100%
}

label {
    display: inline-block
}

button,
option,
select {
    cursor: pointer
}

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

ul li {
    list-style: none
}

img {
    vertical-align: top
}

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

.lock body {
    overflow: hidden;
    touch-action: none;
    -ms-scroll-chaining: none;
    overscroll-behavior: none
}

.wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

@supports (overflow:clip) {
    .wrapper {
        overflow: clip
    }
}

.wrapper>main {
    flex: 1 1 auto
}

.wrapper>* {
    min-width: 0
}

[class*=__container] {
    max-width: 111.25rem;
    margin: 0 auto;
    padding: 0 .9375rem
}

[class*="--gc"] {
    display: grid;
    min-width: 0;
    grid-template-columns: .9375rem 1fr minmax(auto, 109.375rem) 1fr .9375rem
}

[class*="--gc"]>* {
    min-width: 0;
    grid-column: 3/4
}

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

.menu__link {
    color: #000;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    text-transform: uppercase;
    transition: color .2s ease 0s
}

.icon-menu {
    display: none
}

.ibg {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.ibg--top {
    -o-object-position: top;
    object-position: top
}

.ibg--bottom {
    -o-object-position: bottom;
    object-position: bottom
}

.ibg--left {
    -o-object-position: left;
    object-position: left
}

.ibg--right {
    -o-object-position: right;
    object-position: right
}

.ibg--contain {
    -o-object-fit: contain;
    object-fit: contain
}

.header {
    position: fixed;
    z-index: 20;
    top: .5rem;
    left: 0;
    width: 100%
}

.header__container {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.header__logo {
    position: relative;
    z-index: 2;
    width: 12.1875rem
}

.header__logo img {
    width: 100%
}

.header__right {
    display: flex;
    align-items: center;
    border-radius: .25rem;
    border: .125rem solid #000;
    background-color: #fff;
    padding-top: .5rem;
    padding-bottom: .5rem
}

.header__actions {
    display: flex;
    align-items: center;
    -webkit-column-gap: .625rem;
    -moz-column-gap: .625rem;
    column-gap: .625rem
}

.header__buy {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .25rem;
    border: .125rem solid #000;
    background-color: #a9f2ff;
    transition: border .2s ease 0s, background-color .2s ease 0s
}

.header__buy span {
    color: #000;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    text-transform: uppercase;
    transition: all .2s ease 0s
}

.header__social {
    display: flex;
    align-items: center;
    -webkit-column-gap: .625rem;
    -moz-column-gap: .625rem;
    column-gap: .625rem
}

.header__social-item {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .25rem;
    border: .125rem solid #000;
    background-color: #fff;
    transition: border .2s ease 0s
}

.header__social-item svg path {
    transition: fill .2s ease 0s
}

.footer {
    position: relative;
    z-index: 4;
    border-top: .1875rem solid #25889c;
    background: rgba(255, 255, 255, .4);
    backdrop-filter: blur(10px);
    padding: .9375rem 0
}

.footer__container {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.footer__left {
    color: #000;
    font-family: "Comic Neue";
    font-style: normal;
    font-weight: 700;
    line-height: 120%
}

.footer__right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

.footer__right>span {
    color: #000;
    text-align: right;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.footer__right>a {
    display: flex;
    align-items: center;
    flex-wrap: nowrap
}

.footer__right>a>span {
    color: #000;
    text-align: right;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    margin-right: .375rem;
    transition: color .2s ease 0s
}

.footer__right>a svg:nth-child(2) {
    width: 1.875rem;
    height: 1.8rem;
    margin-right: .125rem
}

.footer__right>a svg:nth-child(3) {
    width: 4.5rem;
    height: .825rem
}

.footer__right>a svg path {
    transition: fill .2s ease 0s
}

.menu-open-bg {
    pointer-events: none;
    position: fixed;
    z-index: 9;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(.375rem);
    opacity: 0;
    transition: opacity .3s ease 0s
}

.menu-open .menu-open-bg {
    opacity: 1
}

.snow-box {
    pointer-events: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: fixed;
    z-index: 8;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.snow-box>img {
    position: absolute;
    display: inline-block;
    z-index: 1;
    aspect-ratio: 1;
    translate: -50% -50%;
    opacity: 0;
    -webkit-animation: SnowFlakes 4s ease-out forwards;
    animation: SnowFlakes 4s ease-out forwards
}

@-webkit-keyframes SnowFlakes {
    0% {
        opacity: 0;
        translate: -50% -50%
    }

    25% {
        opacity: .5
    }

    75% {
        opacity: .5
    }

    100% {
        opacity: 0;
        translate: -50% calc(-50% + 5vh)
    }
}

@keyframes SnowFlakes {
    0% {
        opacity: 0;
        translate: -50% -50%
    }

    25% {
        opacity: .5
    }

    75% {
        opacity: .5
    }

    100% {
        opacity: 0;
        translate: -50% calc(-50% + 5vh)
    }
}

@-webkit-keyframes opacityMainAnim {
    0% {
        opacity: .2
    }

    100% {
        opacity: 1
    }
}

@keyframes opacityMainAnim {
    0% {
        opacity: .2
    }

    100% {
        opacity: 1
    }
}

.hero {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    -webkit-transform: scale(.8);
    transform: scale(.8)
}

.loaded .hero {
    -webkit-animation: heroStart .45s ease .4s forwards;
    animation: heroStart .45s ease .4s forwards
}

.hero__bg {
    pointer-events: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

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

.hero__title {
    position: relative;
    z-index: 2;
    transition: -webkit-transform .3s ease 3s;
    transition: transform .3s ease 3s;
    transition: transform .3s ease 3s, -webkit-transform .3s ease 3s;
    -webkit-transform: scale(.7);
    transform: scale(.7)
}

.loaded .hero__title {
    -webkit-animation: heroTitle .45s ease .5s forwards;
    animation: heroTitle .45s ease .5s forwards
}

.hero__title img {
    width: 100%
}

.hero__body {
    position: relative;
    z-index: 3;
    width: 100%;
    aspect-ratio: 1920/677;
    -webkit-animation: iceRotate 6s ease infinite;
    animation: iceRotate 6s ease infinite
}

.hero__body-ice {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.hero__body-ice img {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.hero__body-bear1 {
    position: absolute;
    z-index: 2;
    top: -2%;
    left: 20%;
    width: 20.56%;
    aspect-ratio: 414/490;
    -webkit-animation: bear1Translate 6s ease -3s infinite;
    animation: bear1Translate 6s ease -3s infinite
}

.hero__body-bear1 img {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.hero__body-character {
    position: absolute;
    z-index: 3;
    top: -29%;
    left: 40.4%;
    aspect-ratio: 387/589;
    width: 20.15%;
    -webkit-animation: iceRotate 6s ease infinite;
    animation: iceRotate 6s ease infinite
}

.hero__body-character img {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.hero__body-bear2 {
    position: absolute;
    z-index: 2;
    top: -18%;
    right: 18%;
    width: 22.81%;
    aspect-ratio: 438/461;
    -webkit-animation: bear2Translate 6s ease infinite;
    animation: bear2Translate 6s ease infinite
}

.hero__body-bear2 img {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.hero__actions {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-column-gap: .625rem;
    -moz-column-gap: .625rem;
    column-gap: .625rem
}

.hero__buy {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    border-radius: .25rem;
    border: .125rem solid #000;
    background-color: #ffe227;
    height: 3.5625rem;
    width: 14rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: -webkit-transform .2s ease 0s;
    transition: transform .2s ease 0s;
    transition: transform .2s ease 0s, -webkit-transform .2s ease 0s
}

.hero__buy span {
    color: #000;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    text-transform: uppercase
}

.hero__social {
    display: flex;
    align-items: center;
    -webkit-column-gap: .625rem;
    -moz-column-gap: .625rem;
    column-gap: .625rem
}

.hero__social-item {
    flex-shrink: 0;
    position: relative;
    width: 3.5rem;
    height: 3.5625rem;
    transition: -webkit-transform .2s ease 0s;
    transition: transform .2s ease 0s;
    transition: transform .2s ease 0s, -webkit-transform .2s ease 0s
}

@-webkit-keyframes iceRotate {
    0% {
        -webkit-transform: rotate(-.5deg);
        transform: rotate(-.5deg)
    }

    50% {
        -webkit-transform: rotate(.5deg);
        transform: rotate(.5deg)
    }

    100% {
        -webkit-transform: rotate(-.5deg);
        transform: rotate(-.5deg)
    }
}

@keyframes iceRotate {
    0% {
        -webkit-transform: rotate(-.5deg);
        transform: rotate(-.5deg)
    }

    50% {
        -webkit-transform: rotate(.5deg);
        transform: rotate(.5deg)
    }

    100% {
        -webkit-transform: rotate(-.5deg);
        transform: rotate(-.5deg)
    }
}

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

    50% {
        -webkit-transform: translate(2%, 3%);
        transform: translate(2%, 3%)
    }

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

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

    50% {
        -webkit-transform: translate(2%, 3%);
        transform: translate(2%, 3%)
    }

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

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

    50% {
        -webkit-transform: translate(-2%, 3%);
        transform: translate(-2%, 3%)
    }

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

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

    50% {
        -webkit-transform: translate(-2%, 3%);
        transform: translate(-2%, 3%)
    }

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

@-webkit-keyframes heroStart {
    0% {
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }

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

@keyframes heroStart {
    0% {
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }

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

@-webkit-keyframes heroTitle {
    0% {
        -webkit-transform: scale(.7);
        transform: scale(.7)
    }

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

@keyframes heroTitle {
    0% {
        -webkit-transform: scale(.7);
        transform: scale(.7)
    }

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

.about {
    position: relative;
    z-index: 2
}

.about__top {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-top: -4%
}

.about__top img {
    width: 100%
}

.about__bg {
    pointer-events: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

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

.about__container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.about__image {
    position: relative;
    flex-shrink: 0
}

.about__image::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 33.2%;
    left: 83.2%;
    width: 4%;
    aspect-ratio: 1;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: rgba(96, 211, 231, .5);
    -webkit-filter: blur(.375rem);
    -webkit-animation: aboutImageBlink 2s ease infinite;
    animation: aboutImageBlink 2s ease infinite
}

.about__image img {
    width: 100%
}

.about__content._watcher-view .about__title {
    -webkit-animation: opacityMainAnim .45s ease .2s forwards;
    animation: opacityMainAnim .45s ease .2s forwards
}

.about__content._watcher-view .about__text {
    -webkit-animation: opacityMainAnim .45s ease .4s forwards;
    animation: opacityMainAnim .45s ease .4s forwards
}

.about__content._watcher-view .about__actions {
    -webkit-animation: opacityMainAnim .45s ease .6s forwards;
    animation: opacityMainAnim .45s ease .6s forwards
}

.about__title {
    color: #0d0505;
    font-family: "Rubik One";
    font-style: normal;
    font-weight: 400;
    line-height: 88%;
    letter-spacing: -.03em;
    text-transform: uppercase;
    opacity: .2
}

.about__title span {
    color: #60d3e7
}

.about__text {
    color: #0d0505;
    font-family: "Comic Neue";
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    opacity: .2
}

.about__actions {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    -webkit-column-gap: .625rem;
    -moz-column-gap: .625rem;
    column-gap: .625rem;
    opacity: .2
}

.about__buy {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    border-radius: .25rem;
    border: .125rem solid #000;
    background-color: #ffe227;
    height: 3.5625rem;
    width: 14rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: -webkit-transform .2s ease 0s;
    transition: transform .2s ease 0s;
    transition: transform .2s ease 0s, -webkit-transform .2s ease 0s
}

.about__buy span {
    color: #000;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    text-transform: uppercase
}

.about__social {
    display: flex;
    align-items: center;
    -webkit-column-gap: .625rem;
    -moz-column-gap: .625rem;
    column-gap: .625rem
}

.about__social-item {
    flex-shrink: 0;
    position: relative;
    width: 3.5rem;
    height: 3.5625rem;
    transition: -webkit-transform .2s ease 0s;
    transition: transform .2s ease 0s;
    transition: transform .2s ease 0s, -webkit-transform .2s ease 0s
}

@-webkit-keyframes aboutImageBlink {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(.3);
        transform: translate(-50%, -50%) rotate(45deg) scale(.3)
    }

    25% {
        -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(1);
        transform: translate(-50%, -50%) rotate(45deg) scale(1)
    }

    50% {
        -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(.3);
        transform: translate(-50%, -50%) rotate(45deg) scale(.3)
    }

    100% {
        -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(.3);
        transform: translate(-50%, -50%) rotate(45deg) scale(.3)
    }
}

@keyframes aboutImageBlink {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(.3);
        transform: translate(-50%, -50%) rotate(45deg) scale(.3)
    }

    25% {
        -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(1);
        transform: translate(-50%, -50%) rotate(45deg) scale(1)
    }

    50% {
        -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(.3);
        transform: translate(-50%, -50%) rotate(45deg) scale(.3)
    }

    100% {
        -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(.3);
        transform: translate(-50%, -50%) rotate(45deg) scale(.3)
    }
}

.line {
    position: relative;
    z-index: 3;
    pointer-events: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    flex-wrap: nowrap;
    align-items: center
}

.line::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    -webkit-transform: translateX(-14%) translateY(-50%);
    transform: translateX(-14%) translateY(-50%);
    left: 0;
    width: 100%;
    aspect-ratio: 1988/786;
    background: url(../img/line/bg.png) center/contain no-repeat
}

.line::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-top: .1875rem solid #25889c;
    border-bottom: .1875rem solid #25889c;
    background: url(../img/line/ice_wall.png) center/cover no-repeat, #fff
}

.line__row {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding-left: 3.75rem;
    -webkit-column-gap: 3.75rem;
    -moz-column-gap: 3.75rem;
    column-gap: 3.75rem;
    height: 100%;
    -webkit-animation: line 36s linear infinite;
    animation: line 36s linear infinite
}

.line__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto
}

.line__item img {
    max-height: 100%
}

@-webkit-keyframes line {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

@keyframes line {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

.how {
    position: relative;
    z-index: 2
}

.how::before {
    content: "";
    pointer-events: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1920/889;
    -webkit-transform: translateY(-30%);
    transform: translateY(-30%);
    background: url(../img/how/top.png) center/cover no-repeat
}

.how__container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center
}

.how__title {
    color: #000;
    text-align: center;
    font-family: "Rubik One";
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: -.03em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    opacity: .2
}

.how__title._watcher-view {
    -webkit-animation: opacityMainAnim .45s ease .2s forwards;
    animation: opacityMainAnim .45s ease .2s forwards
}

.how__slider-box {
    position: relative;
    z-index: 2
}

.how__slide {
    color: #60d3e7;
    text-align: center;
    font-family: "Rubik One";
    font-style: normal;
    font-weight: 400;
    line-height: 88%;
    letter-spacing: -.03em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center
}

.how__slider-button {
    position: absolute;
    z-index: 2;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: .25rem;
    border: .125rem solid #000;
    width: 4rem;
    aspect-ratio: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s ease 0s, border .2s ease 0s
}

.how__slider-button:active svg {
    -webkit-transform: scale(.9);
    transform: scale(.9)
}

.how__slider-button.swiper-button-disabled {
    opacity: .5
}

.how__slider-button.swiper-button-disabled:active svg {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.how__slider-button.prev {
    right: 100%
}

.how__slider-button.next {
    left: 100%
}

.how__slider-button svg path {
    transition: stroke .2s ease 0s
}

.how__tokenomics {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%
}

.how__tokenomics-body {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.how__tokenomics-column {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.how__tokenomics-column.right {
    align-items: flex-end;
    text-align: right
}

.how__tokenomics-column-title {
    color: #000;
    font-family: "Rubik One";
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: -.03em;
    text-transform: uppercase;
    opacity: .2
}

.how__tokenomics-column-title._watcher-view {
    -webkit-animation: opacityMainAnim .45s ease .2s forwards;
    animation: opacityMainAnim .45s ease .2s forwards
}

.how__tokenomics-column-items {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

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

.right .how__tokenomics-column-item {
    align-items: flex-end
}

.how__tokenomics-column-item span:nth-child(1) {
    color: #0d0505;
    font-style: normal;
    font-weight: 700;
    line-height: 120%
}

.how__tokenomics-column-item span:nth-child(2) {
    color: #0d0505;
    font-family: "Rubik One";
    font-style: normal;
    font-weight: 400;
    line-height: 88%;
    letter-spacing: -.03em;
    text-transform: uppercase
}

.how__tokenomics-image {
    z-index: 1;
    aspect-ratio: 1125/788
}

.how__tokenomics-image img {
    position: absolute
}

.how__tokenomics-image img:nth-child(1) {
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.how__tokenomics-image img:nth-child(2) {
    z-index: 2;
    width: 65.42%;
    aspect-ratio: 1;
    bottom: 3%;
    left: 49%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-animation: characterHowAnim 6s ease infinite;
    animation: characterHowAnim 6s ease infinite
}

.how__tokenomics-ca {
    position: relative;
    z-index: 3;
    border: .125rem solid #0a6b7c;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-column-gap: .75rem;
    -moz-column-gap: .75rem;
    column-gap: .75rem;
    background: url(../img/how/ca-bg.png) center/cover no-repeat
}

.how__tokenomics-ca:has(button:hover) span {
    color: #0a6b7c
}

.how__tokenomics-ca span {
    color: #000;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: .6px;
    word-break: break-all;
    transition: color .2s ease 0s
}

.how__tokenomics-ca button {
    flex-shrink: 0;
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.how__tokenomics-ca button svg {
    width: 100%;
    height: 100%
}

.how__tokenomics-ca button svg path {
    transition: fill .2s ease 0s
}

@-webkit-keyframes characterHowAnim {
    0% {
        -webkit-transform: translateX(-50%) rotate(-1deg);
        transform: translateX(-50%) rotate(-1deg)
    }

    50% {
        -webkit-transform: translateX(-50%) rotate(1deg);
        transform: translateX(-50%) rotate(1deg)
    }

    100% {
        -webkit-transform: translateX(-50%) rotate(-1deg);
        transform: translateX(-50%) rotate(-1deg)
    }
}

@keyframes characterHowAnim {
    0% {
        -webkit-transform: translateX(-50%) rotate(-1deg);
        transform: translateX(-50%) rotate(-1deg)
    }

    50% {
        -webkit-transform: translateX(-50%) rotate(1deg);
        transform: translateX(-50%) rotate(1deg)
    }

    100% {
        -webkit-transform: translateX(-50%) rotate(-1deg);
        transform: translateX(-50%) rotate(-1deg)
    }
}

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

.treasury::before {
    content: "";
    pointer-events: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1920/854;
    -webkit-transform: translateY(-25%);
    transform: translateY(-25%);
    background: url(../img/treasury/bg.png) center/cover no-repeat
}

.treasury__container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.treasury__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.treasury__content._watcher-view .treasury__title {
    -webkit-animation: opacityMainAnim .45s ease .2s forwards;
    animation: opacityMainAnim .45s ease .2s forwards
}

.treasury__content._watcher-view .treasury__text {
    -webkit-animation: opacityMainAnim .45s ease .4s forwards;
    animation: opacityMainAnim .45s ease .4s forwards
}

.treasury__content._watcher-view .treasury__social {
    -webkit-animation: opacityMainAnim .45s ease .6s forwards;
    animation: opacityMainAnim .45s ease .6s forwards
}

.treasury__title {
    color: #0d0505;
    font-family: "Rubik One";
    font-style: normal;
    font-weight: 400;
    line-height: 88%;
    letter-spacing: -.03em;
    text-transform: uppercase;
    opacity: .2
}

.treasury__title span {
    color: #60d3e7
}

.treasury__text {
    color: #0d0505;
    font-family: "Comic Neue";
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    opacity: .2
}

.treasury__social {
    display: flex;
    align-items: center;
    -webkit-column-gap: .625rem;
    -moz-column-gap: .625rem;
    column-gap: .625rem;
    opacity: .2
}

.treasury__social-item {
    flex-shrink: 0;
    position: relative;
    
    transition: -webkit-transform .2s ease 0s;
    transition: transform .2s ease 0s;
    transition: transform .2s ease 0s, -webkit-transform .2s ease 0s
}

.treasury__image {
    -webkit-transform: rotate(11.29deg);
    transform: rotate(11.29deg)
}

.treasury__image img {
    width: 100%;
    -webkit-animation: treasuryImage 6s ease infinite;
    animation: treasuryImage 6s ease infinite
}

@-webkit-keyframes treasuryImage {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(-.625rem);
        transform: translateY(-.625rem)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes treasuryImage {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(-.625rem);
        transform: translateY(-.625rem)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.join {
    position: relative;
    z-index: 2;
    pointer-events: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.join__top {
    position: relative;
    z-index: 2;
    width: 100%
}

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

.join__bg {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    top: 7%;
    left: 0;
    width: 100%;
    height: 95%
}

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

.join__container {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center
}

.join__titile img {
    width: 100%
}

.join__actions {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-column-gap: .625rem;
    -moz-column-gap: .625rem;
    column-gap: .625rem;
    -webkit-transform: rotate(-6.72deg);
    transform: rotate(-6.72deg)
}

.join__buy {
    pointer-events: all;
    -webkit-user-select: all;
    user-select: all;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    border-radius: .25rem;
    border: .125rem solid #000;
    background-color: #ffe227;
    height: 3.5625rem;
    width: 14rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: -webkit-transform .2s ease 0s;
    transition: transform .2s ease 0s;
    transition: transform .2s ease 0s, -webkit-transform .2s ease 0s
}

.join__buy span {
    color: #000;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    text-transform: uppercase
}

.join__social {
    display: flex;
    align-items: center;
    -webkit-column-gap: .625rem;
    -moz-column-gap: .625rem;
    column-gap: .625rem
}

.join__social-item {
    pointer-events: all;
    -webkit-user-select: all;
    user-select: all;
    flex-shrink: 0;
    position: relative;
    
    transition: -webkit-transform .2s ease 0s;
    transition: transform .2s ease 0s;
    transition: transform .2s ease 0s, -webkit-transform .2s ease 0s
}

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

    41% {
        -webkit-transform: translate(-7%, 3%);
        transform: translate(-7%, 3%)
    }

    42% {
        -webkit-transform: translate(-7%, 3%);
        transform: translate(-7%, 3%)
    }

    50% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }

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

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

    41% {
        -webkit-transform: translate(-7%, 3%);
        transform: translate(-7%, 3%)
    }

    42% {
        -webkit-transform: translate(-7%, 3%);
        transform: translate(-7%, 3%)
    }

    50% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }

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

.swiper {
    overflow: hidden
}

.swiper-initialized {
    touch-action: pan-y
}

.swiper-wrapper {
    width: 100%;
    height: 100%;
    box-sizing: content-box;
    display: flex;
    position: relative
}

.swiper-vertical .swiper-wrapper {
    flex-direction: column
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start
}

.swiper-initialized .swiper-slide {
    flex-shrink: 0
}

.swiper-android .swiper-slide,
.swiper-android .swiper-wrapper {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.swiper-button-lock {
    display: none !important
}

@media (min-width:47.99875em) {
    .hero {
        aspect-ratio: 1920/1152
    }

    .hero__body {
        margin-top: 6%
    }

    .hero__actions {
        margin-top: -11%
    }

    .about__container {
        margin-top: -2%
    }

    .how__tokenomics-body {
        padding-top: 12%
    }

    .how__tokenomics-column-item.mob {
        display: none
    }

    .how__tokenomics-image {
        position: absolute;
        -webkit-transform: translateX(-50%) translateY(-8%);
        transform: translateX(-50%) translateY(-8%);
        top: 0;
        left: 50%
    }

    .treasury__title {
        margin-bottom: 1rem
    }

    .treasury__text {
        margin-bottom: 1rem
    }

    .join {
        margin-top: -14%
    }

    .join__top {
        aspect-ratio: 1920/600
    }

    .join__actions {
        align-self: flex-end
    }
}

@media (min-width:111.25em) {
    .menu__list {
        -webkit-column-gap: 1.25rem;
        -moz-column-gap: 1.25rem;
        column-gap: 1.25rem
    }

    .header__right {
        padding-right: 2.5rem
    }

    .header__right {
        padding-left: 2.5rem
    }

    .header__right {
        -webkit-column-gap: 1.875rem;
        -moz-column-gap: 1.875rem;
        column-gap: 1.875rem
    }

    .header__buy {
        width: 13rem
    }

    .footer__left {
        font-size: 1.25rem
    }

    .footer__left {
        width: 71.25rem
    }

    .page__hero {
        padding-top: 7.5rem
    }

    .page__about {
        padding-bottom: 5rem
    }

    .page__how {
        padding-top: 7.5rem
    }

    .page__how {
        padding-bottom: 3.75rem
    }

    .page__treasury {
        padding-top: 2.5rem
    }

    .page__join {
        padding-bottom: 11.875rem
    }

    .hero__title {
        width: 49.5625rem
    }

    .about__image {
        width: 59.6875rem
    }

    .about__content {
        padding-right: 1.875rem
    }

    .about__content {
        width: 43.375rem
    }

    .about__title {
        margin-bottom: 1rem
    }

    .about__title {
        font-size: 6rem
    }

    .about__text {
        margin-bottom: 1rem
    }

    .about__text {
        font-size: 1.5rem
    }

    .how__title {
        font-size: 2rem
    }

    .how__slider {
        width: 43.75rem
    }

    .how__slide {
        font-size: 4.75rem
    }

    .how__tokenomics-body {
        margin-bottom: 12.5rem
    }

    .how__tokenomics-column {
        row-gap: 1.5rem
    }

    .how__tokenomics-column-title {
        font-size: 2rem
    }

    .how__tokenomics-column-items {
        row-gap: 1.5rem
    }

    .how__tokenomics-column-item {
        row-gap: .5rem
    }

    .how__tokenomics-column-item span:nth-child(1) {
        font-size: 1.5rem
    }

    .how__tokenomics-column-item span:nth-child(2) {
        font-size: 3.5rem
    }

    .how__tokenomics-image {
        width: 70.3125rem
    }

    .how__tokenomics-ca {
        padding: .9375rem
    }

    .how__tokenomics-ca span {
        font-size: 1.25rem
    }

    .treasury__content {
        width: 42.5rem
    }

    .treasury__title {
        font-size: 6rem
    }

    .treasury__text {
        font-size: 1.5rem
    }

    .treasury__image {
        width: 50rem
    }

    .join__titile {
        width: 87.9375rem
    }

    .join__actions {
        margin-top: -6.875rem
    }

    .join__actions {
        margin-right: 20rem
    }
}

@media (max-width:20em) {
    .footer__left {
        font-size: 1rem
    }

    .page__about {
        padding-bottom: 2.5rem
    }

    .page__how {
        padding-top: 5rem
    }

    .page__how {
        padding-bottom: 2.5rem
    }

    .page__join {
        padding-bottom: 5rem
    }

    .about__title {
        margin-bottom: 1.25rem
    }

    .about__title {
        font-size: 3.25rem
    }

    .about__text {
        margin-bottom: 1.875rem
    }

    .about__text {
        font-size: 1.125rem
    }

    .how__title {
        font-size: 1.75rem
    }

    .how__slider {
        width: 12.625rem
    }

    .how__slide {
        font-size: 2.125rem
    }

    .how__tokenomics-column-title {
        font-size: 1.75rem
    }

    .how__tokenomics-column-item span:nth-child(1) {
        font-size: 1.1125rem
    }

    .how__tokenomics-column-item span:nth-child(2) {
        font-size: 1.375rem
    }

    .how__tokenomics-ca {
        padding: .625rem
    }

    .how__tokenomics-ca span {
        font-size: .725rem
    }

    .treasury__title {
        font-size: 3.25rem
    }

    .treasury__title {
        margin-bottom: 1.25rem
    }

    .treasury__text {
        font-size: 1.125rem
    }

    .treasury__text {
        margin-bottom: 1.875rem
    }
}

@media (max-width:61.99875em) {
    .menu__link {
        font-size: 1.125rem
    }

    .header__logo {
        width: 11.25rem
    }

    .header__buy {
        height: 2.375rem
    }

    .header__social-item {
        width: 2.375rem;
        height: 2.375rem
    }
}

@media (max-width:47.99875em) {
    .menu__body {
        position: fixed;
        width: auto;
        height: auto;
        right: -100%;
        top: 5.25rem;
        overflow: auto;
        padding: 1.25rem .9375rem;
        border-radius: .25rem;
        border: .125rem solid #000;
        background-color: #fff;
        transition: right .3s;
        display: flex;
        flex-direction: column;
        align-items: flex-end
    }

    .menu-open .menu__body {
        right: .9375rem
    }

    .menu__list {
        flex-direction: column;
        align-items: flex-end;
        row-gap: .9375rem;
        margin-bottom: 1.25rem
    }

    .menu__link {
        font-size: 2.125rem
    }

    .icon-menu {
        display: block;
        position: relative;
        width: 1.875rem;
        height: 1.125rem;
        z-index: 5
    }

    .icon-menu span,
    .icon-menu::after,
    .icon-menu::before {
        content: "";
        transition: all .3s ease 0s;
        right: 0;
        position: absolute;
        width: 100%;
        height: .125rem;
        background-color: #000
    }

    .icon-menu::before {
        top: 0
    }

    .icon-menu::after {
        bottom: 0
    }

    .icon-menu span {
        top: calc(50% - .0625rem)
    }

    .menu-open .icon-menu span {
        width: 0
    }

    .menu-open .icon-menu::before {
        top: calc(50% - .0625rem);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }

    .menu-open .icon-menu::after {
        bottom: calc(50% - .0625rem);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    .header {
        top: 1.25rem
    }

    .header__logo {
        width: 12.1875rem
    }

    .header__right {
        padding: .5rem .25rem
    }

    .header__actions {
        flex-direction: column-reverse;
        align-items: flex-end;
        row-gap: .625rem
    }

    .header__buy {
        width: 12.8125rem;
        height: 3rem
    }

    .header__buy span {
        font-size: 1.625rem
    }

    .header__social {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr)
    }

    .header__social-item {
        width: auto;
        height: 3rem
    }

    .header__social-item:nth-child(1) svg {
        width: 1.75rem;
        height: 1.75rem
    }

    .header__social-item:nth-child(2) svg {
        width: 1.875rem;
        height: 1.875rem
    }

    .footer__container {
        flex-direction: column;
        row-gap: 1.25rem
    }

    .footer__left {
        text-align: justify
    }

    .footer__right {
        align-items: center
    }

    .page__hero {
        padding-top: 20vh;
        padding-bottom: 5vh
    }

    .page__treasury {
        padding-top: 3.75rem
    }

    .hero {
        min-height: 100vh
    }

    .hero__bg img {
        -o-object-position: 80% top;
        object-position: 80% top
    }

    .hero__title {
        width: calc(100% - 1.875rem)
    }

    .hero__body {
        margin-top: 13vh;
        width: 220%
    }

    .hero__body-bear1 {
        top: -20%;
        left: 23.4%
    }

    .hero__body-bear2 {
        top: -16%;
        right: 22.4%
    }

    .hero__actions {
        flex-direction: column;
        row-gap: .625rem
    }

    .about__top {
        height: 6.875rem;
        margin-top: -7%
    }

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

    .about__container {
        flex-direction: column-reverse;
        row-gap: 2.5rem;
        padding-top: .9375rem
    }

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

    .about__title {
        text-align: center
    }

    .about__text {
        text-align: justify
    }

    .line {
        height: 5.625rem
    }

    .line__row {
        padding-left: 1.875rem;
        -webkit-column-gap: 1.875rem;
        -moz-column-gap: 1.875rem;
        column-gap: 1.875rem
    }

    .line__item {
        height: 75%
    }

    .how::before {
        top: 58%
    }

    .how__slider-button {
        width: 2.75rem
    }

    .how__tokenomics-body {
        flex-direction: column;
        margin-bottom: 1.875rem
    }

    .how__tokenomics-column {
        width: 100%;
        align-items: flex-start;
        row-gap: 1rem
    }

    .how__tokenomics-column:nth-child(1) {
        order: 2
    }

    .how__tokenomics-column:nth-child(3) {
        order: 3;
        display: none
    }

    .how__tokenomics-column-title {
        text-align: center;
        align-self: center
    }

    .how__tokenomics-column-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 1.25rem;
        -webkit-column-gap: .125rem;
        -moz-column-gap: .125rem;
        column-gap: .125rem
    }

    .how__tokenomics-column-item:nth-child(even) {
        align-items: flex-end;
        text-align: right
    }

    .how__tokenomics-column-item {
        row-gap: .5rem
    }

    .how__tokenomics-image {
        position: relative;
        width: 130%;
        order: 1;
        margin-bottom: 2.5rem
    }

    .how__tokenomics-ca {
        -webkit-column-gap: .5rem;
        -moz-column-gap: .5rem;
        column-gap: .5rem;
        width: 100%
    }

    .how__tokenomics-ca button {
        width: 2rem;
        height: 2rem
    }

    .treasury__container {
        flex-direction: column;
        row-gap: 2.5rem
    }

    .treasury__title {
        text-align: center
    }

    .treasury__text {
        text-align: justify
    }

    .treasury__social {
        width: 100%;
        justify-content: center
    }

    .treasury__image {
        width: 100%
    }

    .join {
        margin-top: -8%
    }

    .join__top {
        height: 11.875rem
    }

    .join__titile {
        width: 100%
    }

    .join__actions {
        flex-direction: column;
        margin-top: 1.25rem;
        row-gap: .625rem
    }
}

@media (max-width:47.99875em)and (any-hover:none) {
    .icon-menu {
        cursor: default
    }
}

@media (min-width:47.99875em)and (max-width:111.25em) {
    .menu__list {
        -webkit-column-gap: clamp(.625rem, .1507134246rem + .9881227644vw, 1.25rem);
        -moz-column-gap: clamp(.625rem, .1507134246rem + .9881227644vw, 1.25rem);
        column-gap: clamp(.625rem, .1507134246rem + .9881227644vw, 1.25rem)
    }

    .header__right {
        padding-right: clamp(.625rem, -.7978597261rem + 2.9643682931vw, 2.5rem)
    }

    .header__right {
        padding-left: clamp(.625rem, -.7978597261rem + 2.9643682931vw, 2.5rem)
    }

    .header__right {
        -webkit-column-gap: clamp(.9375rem, .226070137rem + 1.4821841466vw, 1.875rem);
        -moz-column-gap: clamp(.9375rem, .226070137rem + 1.4821841466vw, 1.875rem);
        column-gap: clamp(.9375rem, .226070137rem + 1.4821841466vw, 1.875rem)
    }

    .header__buy {
        width: clamp(7.5rem, 3.3262781368rem + 8.6954803265vw, 13rem)
    }

    .footer__left {
        font-size: clamp(1rem, .8102853699rem + .3952491057vw, 1.25rem)
    }

    .footer__left {
        width: clamp(30rem, -1.302913974rem + 65.2161024486vw, 71.25rem)
    }

    .page__hero {
        padding-top: clamp(4.375rem, 2.0035671232rem + 4.9406138219vw, 7.5rem)
    }

    .page__treasury {
        padding-top: clamp(1.875rem, 1.4007134246rem + .9881227644vw, 2.5rem)
    }

    .hero__title {
        width: clamp(16.25rem, -9.0294744669rem + 52.666943341vw, 49.5625rem)
    }

    .about__image {
        width: clamp(21.25rem, -7.9186243849rem + 60.7695500089vw, 59.6875rem)
    }

    .about__content {
        padding-right: clamp(.0000000625rem, -1.4228596162rem + 2.9643681943vw, 1.875rem)
    }

    .about__content {
        width: clamp(23.75rem, 8.8574015336rem + 31.0270548013vw, 43.375rem)
    }

    .about__title {
        margin-bottom: clamp(.75rem, .5602853699rem + .3952491057vw, 1rem)
    }

    .about__title {
        font-size: clamp(3rem, .7234244383rem + 4.742989269vw, 6rem)
    }

    .about__text {
        margin-bottom: clamp(.75rem, .5602853699rem + .3952491057vw, 1rem)
    }

    .about__text {
        font-size: clamp(1.125rem, .8404280548rem + .5928736586vw, 1.5rem)
    }

    .how__slider {
        width: clamp(38.125rem, 33.8564208217rem + 8.8931048794vw, 43.75rem)
    }

    .how__slide {
        font-size: clamp(4.125rem, 3.6507134246rem + .9881227644vw, 4.75rem)
    }

    .how__tokenomics-body {
        margin-bottom: clamp(3.125rem, -3.9892986305rem + 14.8218414656vw, 12.5rem)
    }

    .how__tokenomics-column {
        row-gap: clamp(1rem, .6205707397rem + .7904982115vw, 1.5rem)
    }

    .how__tokenomics-column-items {
        row-gap: clamp(1rem, .6205707397rem + .7904982115vw, 1.5rem)
    }

    .how__tokenomics-column-item {
        row-gap: clamp(.375rem, .2801426849rem + .1976245529vw, .5rem)
    }

    .how__tokenomics-column-item span:nth-child(1) {
        font-size: clamp(1.375rem, 1.2801426849rem + .1976245529vw, 1.5rem)
    }

    .how__tokenomics-column-item span:nth-child(2) {
        font-size: clamp(2.375rem, 1.5212841643rem + 1.7786209759vw, 3.5rem)
    }

    .how__tokenomics-image {
        width: clamp(37.5rem, 12.5999547934rem + 51.8764451295vw, 70.3125rem)
    }

    .how__tokenomics-ca {
        padding: clamp(.625rem, .3878567123rem + .4940613822vw, .9375rem)
    }

    .how__tokenomics-ca span {
        font-size: clamp(1rem, .8102853699rem + .3952491057vw, 1.25rem)
    }

    .treasury__content {
        width: clamp(23.75rem, 9.5214027391rem + 29.6436829312vw, 42.5rem)
    }

    .treasury__title {
        font-size: clamp(3rem, .7234244383rem + 4.742989269vw, 6rem)
    }

    .treasury__text {
        font-size: clamp(1.125rem, .8404280548rem + .5928736586vw, 1.5rem)
    }

    .treasury__image {
        width: clamp(21.25rem, -.5671824667rem + 45.4536471611vw, 50rem)
    }

    .join__titile {
        width: clamp(43.75rem, 10.2179391218rem + 69.8602794411vw, 87.9375rem)
    }

    .join__actions {
        margin-top: clamp(-6.875rem, 1.9192926029rem + -7.904982115vw, -1.875rem)
    }

    .join__actions {
        margin-right: clamp(2.5rem, -10.7800241102rem + 27.6674374024vw, 20rem)
    }
}

@media (min-width:20em)and (max-width:47.99875em) {
    .footer__left {
        font-size: clamp(1rem, .8214205991rem + .8928970043vw, 1.25rem)
    }

    .about__title {
        margin-bottom: clamp(1.25rem, 1.0714205991rem + .8928970043vw, 1.5rem)
    }

    .about__title {
        font-size: clamp(3.25rem, 1.2856265905rem + 9.8218670476vw, 6rem)
    }

    .about__text {
        margin-bottom: clamp(1.875rem, 1.6071308987rem + 1.3393455065vw, 2.25rem)
    }

    .about__text {
        font-size: clamp(1.125rem, .8571308987rem + 1.3393455065vw, 1.5rem)
    }

    .how__slider {
        width: clamp(12.625rem, -7.375892897rem + 100.004464485vw, 40.625rem)
    }

    .how__slide {
        font-size: clamp(2.125rem, .07133689rem + 10.2683155498vw, 5rem)
    }

    .how__tokenomics-column-item span:nth-child(1) {
        font-size: clamp(1.1125rem, .7464122282rem + 1.8304388589vw, 1.625rem)
    }

    .how__tokenomics-column-item span:nth-child(2) {
        font-size: clamp(1.375rem, .6606823965rem + 3.5715880173vw, 2.375rem)
    }

    .how__tokenomics-ca {
        padding: clamp(.625rem, .4017757489rem + 1.1161212554vw, .9375rem)
    }

    .how__tokenomics-ca span {
        font-size: clamp(.725rem, .3499832582rem + 1.8750837091vw, 1.25rem)
    }

    .treasury__title {
        font-size: clamp(3.25rem, 1.2856265905rem + 9.8218670476vw, 6rem)
    }

    .treasury__title {
        margin-bottom: clamp(1.25rem, 1.0714205991rem + .8928970043vw, 1.5rem)
    }

    .treasury__text {
        font-size: clamp(1.125rem, .8571308987rem + 1.3393455065vw, 1.5rem)
    }

    .treasury__text {
        margin-bottom: clamp(1.875rem, 1.6071308987rem + 1.3393455065vw, 2.25rem)
    }
}

@media (min-width:20em)and (max-width:111.25em) {
    .page__about {
        padding-bottom: clamp(2.5rem, 1.9520547945rem + 2.7397260274vw, 5rem)
    }

    .page__how {
        padding-top: clamp(5rem, 4.4520547945rem + 2.7397260274vw, 7.5rem)
    }

    .page__how {
        padding-bottom: clamp(2.5rem, 2.2260273973rem + 1.3698630137vw, 3.75rem)
    }

    .page__join {
        padding-bottom: clamp(5rem, 3.4931506849rem + 7.5342465753vw, 11.875rem)
    }

    .how__title {
        font-size: clamp(1.75rem, 1.6952054795rem + .2739726027vw, 2rem)
    }

    .how__tokenomics-column-title {
        font-size: clamp(1.75rem, 1.6952054795rem + .2739726027vw, 2rem)
    }
}

@media (any-hover:hover) {
    .menu__link:hover {
        color: #60d3e7
    }

    .header__buy:hover {
        border: .125rem solid #60d3e7;
        background-color: #fff
    }

    .header__buy:hover span {
        color: #60d3e7
    }

    .header__social-item:hover {
        border: .125rem solid #60d3e7
    }

    .header__social-item:hover svg path {
        fill: #60d3e7
    }

    .footer__right>a:hover span {
        color: #60d3e7
    }

    .footer__right>a:hover svg path {
        fill: #60d3e7
    }

    .hero__buy:hover {
        -webkit-transform: scale(.975);
        transform: scale(.975)
    }

    .hero__social-item:hover {
        -webkit-transform: scale(.95);
        transform: scale(.95)
    }

    .about__buy:hover {
        -webkit-transform: scale(.975);
        transform: scale(.975)
    }

    .about__social-item:hover {
        -webkit-transform: scale(.95);
        transform: scale(.95)
    }

    .how__slider-button:hover {
        border: .125rem solid #60d3e7
    }

    .how__slider-button:hover svg path {
        stroke: #60d3e7
    }

    .how__slider-button.swiper-button-disabled:hover {
        border: .125rem solid #000
    }

    .how__slider-button.swiper-button-disabled:hover svg path {
        stroke: #000
    }

    .how__tokenomics-ca button:hover svg path {
        fill: #0a6b7c
    }

    .treasury__social-item:hover {
        -webkit-transform: scale(.95);
        transform: scale(.95)
    }

    .join__buy:hover {
        -webkit-transform: scale(.975);
        transform: scale(.975)
    }

    .join__social-item:hover {
        -webkit-transform: scale(.95);
        transform: scale(.95)
    }
}