:root{
	font-size: 10px;
}

body{
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	font-size: 1.6rem;
	background: #0A0A0A;
    font-family: 'Syne', sans-serif;
    color: #fff;
}

@font-face {
    font-family: 'Syne';
    src: url('../font/Syne-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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

a, button, input, textarea, select{
	transition: .2s linear;
	font-size: 1.6rem;
    font-family: 'Syne', sans-serif;
}

a{
	text-decoration: none;
	color: #fff;
}

ul{
	margin: 0;
	padding: 0;
}

li{
	list-style-type: none;
}

h1, h2, h3, h4, h5, h5, p{
	margin: 0;
	font-weight: normal;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
	appearance: none;
}

.button, .input{
	border: none;
	cursor: pointer;
	background: none;
	outline: none;
}

.input{
	cursor: text;
}

.input:focus::placeholder{
	opacity: 0;	
}

.container{
	width: 100%;
	max-width: 1920px;
	padding: 0rem 2.8rem;
	margin: 0 auto;
}

/* Header */
.header{
	width: 100%;
	padding: 2rem 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
}

.header__inner{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header__logo{
	width: 100%;
	display: flex;
	max-width: 300px;
}

.header__logo img{
	width: 100%;
}

.header__nav{
	display: flex;
	align-items: center;
	gap: 30px;
}

.header__nav--link{
	color: #C2C2C2;
	font-size: 1.4rem;
}

.header__wrapper{
	display: flex;
	align-items: center;
	gap: 24px;
}

.header__whitepaper{
	padding: 0.9rem 3.8rem;
	border: 1px solid #fff;
	position: relative;
}

.header__whitepaper:before{
	content: "";
	display: block;
	width: 0%;
	height: 100%;
	background: #fff;
	transition: .2s linear;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

.header__menu{
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	width: 25px;
	height: 25px;
}

.header__menu.active .menu, .header__menu:not(.active) .cross{
	display: none;
}

.header__menu.active .cross{
	display: flex;
}

.mobile__menu{
	width: 100%;
	display: none;
	transform: translateX(-110%);
	opacity: 0;
	transition: .2s linear;
	pointer-events: none;
	background: #0A0A0A;
	padding: 4rem 0;
	position: absolute;
	top: 65px;
	left: 0;
	z-index: 8;
}

.mobile__menu--content{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 80px;
}

/* Main */
.main{
	width: 100%;
	padding: 9rem 0;
	position: relative;
	min-height: 100dvh;
	display: flex;
	align-items: center;
}

.main__inner{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	pointer-events: none;
	text-align: center;
}

.main__bg{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.main__title{
	font-size: 6.4rem;
	max-width: 420px;
	line-height: 1.16;
}

.main__title span{
	color: #F7FF98;
}

.main__text{
	margin-top: 1.8rem;
	width: 100%;
	max-width: 290px;
	font-size: 1.8rem;
	color: #D9D9D9;
}

.services{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.services__item{
	text-align: center;
	padding: 2.7rem 2rem;
	border: 1px solid #181818;
	width: calc(100% / 6);
	background: #0B0B0B;
	font-size: 1.4rem;
	color: #808080;
}

/* Token usecase */
.token{
	width: 100%;
	padding: 10rem 0rem 4rem 0;
}

.token__inner{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.token__cube{
	width: 67px;
}

.token__suptitle{
	font-size: 1.4rem;
	color: #808080;
	text-align: center;
}

.token__title{
	text-align: center;
	width: 100%;
	max-width: 300px;
	font-size: 4.2rem;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.token__title span{
	color: #F7FF98;
}

.token__wrap{
	width: 100%;
	position: sticky;
	top: 0;
	overflow-x: auto;
	margin-top: 3rem;
	display: flex;
}

.token__content{
	display: flex;
	flex-shrink: 0;
}

.token__wrap::-webkit-scrollbar{
	width: 0;
	height: 0;
}

.token__item{
	min-width: 365px;
	flex-shrink: 0;
	border: 1px solid #333;
	border-right: none;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
	padding: 5rem 2rem;
}

.token__item--text{
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
}

.token__item:last-child{
	border-right: 1px solid #333;
}

.token__item--wrapper{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
	max-width: 100px;
}

.token__item--number{
	padding: 0.4rem;
	border: 1px solid #fff;
	border-radius: 7px;
}

.token__item--name{
	font-size: 1.8rem;
	color: #fff;
}

.token__item--title{
	width: 100%;
	max-width: 115px;
	font-size: 2.8rem;
	color: #fff;
}

.token__item--text--value{
	font-size: 1.4rem;
	font-weight: 300;
	color: #fff;
	max-width: 320px;
}

/* Road map */
.road{
	width: 100%;
	position: relative;
	padding: 4rem 0rem 7rem 0;
}

.road__bg1, .road__bg2{
	width: 430px;
	max-width: 100%;
	position: absolute;
	top: -100px;
	left: 0;
	pointer-events: none;
}

.road__bg2{
	top: auto;
	left: auto;
	bottom: -270px;
	right: 0;
}

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

.road__title{
	font-size: 4.2rem;
	color: #fff;
	text-align: center;
}

.road__title span{
	color: #F7FF98;
}

.suptitle{
	color: #808080;
	font-size: 1.4rem;
	text-align: center;
}

.road__suptitle{
	margin-top: 0.4rem;
}

.road__subtitle{
	text-align: center;
	margin-top: 2.4rem;
	color: #D9D9D9;
	font-size: 2.2rem;
	text-transform: uppercase;
}

.road__text{
	text-align: center;
	color: #808080;
	font-size: 1.4rem;
	width: 100%;
	max-width: 480px;
	margin-top: 1.9rem;
}

.road__text span{
	color: #fff;
}

.road__content{
	margin-top: 6rem;
	width: 100%;
	max-width: 830px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 88px 44px;
}

.road__item{
	width: calc(100% / 3 - 88px / 3);
	background: rgba(15, 15, 15, .46);
	padding: 1rem 1.9rem;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
}

.road__item.margin{
	top: 50px;
}

.road__item:before{
	content: "";
	display: block;
	width: 75px;
	height: 75px;
	border-radius: 50%;
	background: rgba(147, 147, 147, .59);
	filter: blur(50px);
	position: absolute;
	top: 100%;
	transform: translateY(-20px);
	right: 36px;
}

.road__item--top{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.road__item--name, .road__item--number{
	font-size: 1.4rem;
	color: #fff;
}

.road__item--bottom{
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

.road__item--title{
	font-size: 2.2rem;
	color: #F7FF98;
}

.road__item--square{
	position: relative;
	width: 16px;
	height: 16px;
	border: 1px solid #747474;
}

.road__item--square:before{
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	background: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.brack{
	background: #747474;
	position: absolute;
	transition: .2s ease-in-out;
}

.gorizontal{
	width: 12px;
	height: 1px;
}

.vertical{
	width: 1px;
	height: 12px;
}

.top{
	top: 5px;
}

.left{
	left: 5px;
}

.bottom{
	bottom: 5px;
}

.right{
	right: 5px;
}

/* Posts */
.posts{
	width: 100%;
	padding: 7rem 0 0 0;
}

.posts__inner{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.posts__title{
	font-size: 4.2rem;
	color: #fff;
}

.posts__title span{
	color: #F7FF98;
}

.posts__content{
	width: 100%;
	max-width: 1844px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	margin-top: 3rem;
}

.post__item{
	width: calc(100% / 3);
	position: relative;
	padding: 1.2rem 2.8rem 6rem 2.8rem;
	min-height: 400px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	border: 1px solid #333;
	background: linear-gradient(-135deg, #0A0A0A 0%, rgba(10, 10, 10, .25) 100%);
}

.post__name{
	font-size: 1.4rem;
	color: #808080;
}

.post__wrapper{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 11px;
}

.post__title{
	font-size: 1.8rem;
	color: #D9D9D9;
	text-transform: uppercase;
}

.post__text{
	width: 100%;
	max-width: 280px;
	font-size: 1.4rem;
	color: #808080;
}

.post__item--img{
	position: absolute;
	top: 0;
	right: 0;
	pointer-events: none;
	max-width: 400px;
}

.posts__arrows{
	display: flex;
	align-items: center;
	gap: 14px;
}

.post__arrow{
	padding: 1.4rem 2.4rem;
	border: 1px solid rgba(24, 24, 24, 1);
	color: #fff;
}

.post__arrow:hover{
	border: 1px solid #fff;
}

.post__arrow.swiper-button-disabled{
	pointer-events: none;
	color: #808080;
}

/* Community */
.discord{
	width: 100%;
	padding: 15rem 0rem 10rem 0;
	position: relative;
	border-bottom: 2px solid #232325;
}

.discord__bg{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	pointer-events: none;
}

.discord__inner{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 33px;
}

.discord__title{
	font-size: 4.2rem;
	text-align: center;
	width: 100%;
	max-width: 820px;
}

.discord__title span{
	color: #F7FF98;
}

.discord__link{
	display: flex;
	align-items: center;
	gap: 8px;
	position: relative;
	font-size: 1.5rem;
	border: 1px solid #fff;
	padding: 1.4rem 3.1rem;
}

.discord__link:before{
	content: "";
	display: block;
	width: 0%;
	height: 100%;
	transition: .2s linear;
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	z-index: -1;
}

/* Perspective */
.perspective{
	width: 100%;
	padding: 7rem 0;
}

.perspective__inner{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
}

.perspective__title{
	font-size: 4.2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #fff;
	line-height: 1.2;
	text-align: center;
}

.perspective__title span:first-child{
	color: #F7FF98;
}

.perspective__tabs{
	border: 1px solid #fff;
	padding: 0.7rem;
	display: flex;
	gap: 7px;
}

.parspective__tab{
	padding: 1.6rem 4.7rem;
	color: rgba(255, 255, 255, .6);
	font-weight: 600;
}

.parspective__tab.active{
	background: #fff;
	color: #000;
}

.perspective__content{
	width: 100%;
	max-width: 1844px;
	margin: 0 auto;
	margin-top: 4rem;
	border: 1px solid #333;
	display: none;
	position: relative;
}

.perspective__content.active{
	display: flex;
}

.perspective__bg{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: -1;
	object-fit: cover;
}

.persepctive__text--inner{
	width: 50%;
	border-right: 1px solid #333;
	padding: 3rem 3rem 4rem 4rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.perspective__more{
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 2.2rem;
	color: #fff;
	border-bottom: 1px solid #fff;
	margin-top: 2.7rem;
}

.perspective__text{
	width: 100%;
	max-width: 475px;
	color: #808080;
	font-size: 1.4rem;
	margin-top: 2rem;
}

.perspective__text--title{
	text-transform: uppercase;
	font-size: 2.2rem;
	color: #d9d9d9;
	width: 100%;
	max-width: 480px;
	margin-top: 4.8rem;
}

.perspective__name{
	font-weight: 600;
	font-size: 1.2rem;
	color: #fff;
	width: 100%;
	max-width: 80px;
	text-transform: uppercase;
}

.persepctive__blocks{
	width: 50%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	padding: 2.6rem 5rem 2.6rem 8.3rem;
}

.perspective__block{
	width: 100%;
	max-width: 233px;
	padding: 1.7rem 1.7rem 1.7rem 3.5rem;
	background: #0B0B0B;
	border: 1px solid #333;
	color: #fff;
	font-size: 1.2rem;
	font-family: "Chakra Petch", sans-serif;
	min-height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.perspective__block:nth-child(2){
	margin-left: 5rem;
}

.perspective__block:nth-child(3){
	margin-left: 10rem;
}

.perspective__block:nth-child(4){
	margin-left: 15rem;
}

/* Footer */
.footer{
	width: 100%;
	padding: 5.6rem 0rem 1.4rem 0;
}

.footer__inner{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.footer__bottom{
	width: 100%;
	border-top: 1px solid #333;
	padding-top: 1.1rem;
	margin-top: 3.3rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.footer__wrapper{
	display: flex;
	align-items: center;
	gap: 24px;
}

.footer__link, .footer__copy{
	font-size: 1.2rem;
	color: #808080;
}

.up__button{
	display: flex;
	align-items: center;
	gap: 6px;
	color: #808080;
}

.footer__top{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 33px;
}

.footer__top--wrapper{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.footer__logo{
	width: 100%;
	max-width: 145px;
	display: flex;
}

.footer__logo img{
	width: 100%;
}

.footer__nav{
	display: flex;
	align-items: center;
	gap: 47px;
}

.footer__social--inner{
	display: flex;
	align-items: center;
	gap: 15px;
}

.footer__social--link{
	display: flex;
	max-width: 24px;
}

.footer__social--link svg{
	flex-shrink: 0;
	width: 100%;
}

.main__bg--img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	z-index: -1;
	display: none;
}

@media (any-hover: hover) {
	.header__nav--link:hover, .footer__link:hover, .parspective__tab:not(.active):hover{
		color: #fff;
	}

	.header__whitepaper:hover, .discord__link:hover{
		color: #0A0A0A;
	}

	.header__whitepaper:hover:before, .discord__link:hover:before{
		width: 100%;
	}

	.road__item:hover .gorizontal{
		width: calc(50% - 4px);
	}

	.road__item:hover .vertical{
		height: calc(50% - 4px);
	}

	.perspective__more:hover{
		color: #F7FF98;
		border-bottom: 1px solid #F7FF98;
	}

	.post__item:hover{
		border: 1px solid rgba(128, 128, 128, 1);
	}
}

/* Responsive */
@media(max-width: 1200px){
	
}
@media (max-width: 1120px) {
	.header__nav:not(.mobile), .header__wrapper:not(.mobile){
		display: none;
	}

	.header__nav.mobile{
		flex-direction: column;
	}

	.header__menu{
		display: flex;
	}

	.header{
		transition: .2s linear;
	}

	.header.active{
		background: #0A0A0A;
	}

	.mobile__menu{
		display: flex;
	}

	.mobile__menu.active{
		transform: translateX(0);
		opacity: 1;
		pointer-events: all;
	}
}
@media(max-width: 998px){
	.services__item{
		width: calc(100% / 3);
	}

	.footer__nav{
		gap: 30px;
	}

	.post__item--img{
		max-width: 300px;
	}

	.post__item{
		padding: 1.2rem 1.6rem 4rem;
	}

	.perspective__block:nth-child(2){
		margin-left: 3rem;
	}

	.perspective__block:nth-child(3){
		margin-left: 6rem;
	}

	.perspective__block:nth-child(4){
		margin-left: 9rem;
	}

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

	.persepctive__text--inner, .persepctive__blocks{
		width: 100%;
	}

	.persepctive__text--inner{
		border-right: none;
		border-bottom: 1px solid #333;
	}

	.perspective__text{
		max-width: 600px;
	}
}
@media (max-width: 900px) {
	.footer__top--wrapper{
		flex-wrap: wrap;
		gap: 21px;
	}

	.discord__title{
		font-size: 3.2rem;
	}

	.discord{
		padding: 10rem 0rem 6rem 0;
	}
}
@media(max-width: 768px){
	.main__title{
		font-size: 4.4rem;
		max-width: 300px;
	}

	.main__text{
		margin-top: 1.2rem;
		font-size: 1.4rem;
		max-width: 230px;
	}

	.main{
		min-height: 80dvh;
		padding: 7rem 0;
	}

	.services__item{
		padding: 1.6rem;
		font-size: 1rem;
	}

	.token{
		padding: 5rem 0rem 4rem 0;
	}

	.token__cube{
		width: 50px;
	}

	.token__title, .posts__title, .perspective__title{
		font-size: 2.8rem;
	}

	.discord__title{
		font-size: 2.4rem;
	}

	.road__title{
		font-size: 2.8rem;
	}

	.road__subtitle{
		font-size: 1.8rem;
	}

	.road__content{
		gap: 80px 20px;
	}

	.road__item{
		width: calc(100% / 3 - 40px / 3);
	}

	.road__item--name, .road__item--number{
		font-size: 1.2rem;
	}

	.road__item--title{
		font-size: 1.8rem;
	}

	.road__content{
		margin-top: 4rem;
	}

	.road{
		padding: 2.5rem 0rem 4rem 0;
	}

	.post__item, .post__item:last-child, .post__item:first-child{
		border-right: none;
		border-left: none;
	}

	.posts__content{
		margin-top: 2rem;
	}

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

	.main__bg--img{
		display: flex;
	}

	.main__bg{
		display: none;
	}
}
@media (max-width: 700px) {
	.footer__top--wrapper{
		flex-direction: column;
	}

	.footer__social, .up__button{
		display: none;
	}

	.footer{
		padding: 2.9rem 0rem 1.6rem 0;
	}

	.footer__nav{
		gap: 15px 25px;
		flex-wrap: wrap;
		justify-content: center;
	}

	.footer__nav .header__nav--link{
		font-size: 1.4rem;
	}

	.footer__logo{
		max-width: 100px;
	}

	.discord{
		padding: 5rem 0rem 3rem 0;
	}

	.posts{
		padding: 5rem 0rem 0 0;
	}
}
@media (max-width: 650px) {
	.road__item{
		width: calc(100% / 2 - 20px / 2);
	}

	.road__item.margin{
		top: 0;
	}

	.road__content{
		gap: 20px;
	}
}
@media (max-width: 600px) {
	.footer__bottom{
		flex-direction: column;
		gap: 15px;
	}
}
@media(max-width: 480px){
	.discord__title, .road__title, .posts__title, .perspective__title{
		font-size: 2rem;
	}

	.road__item--title{
		font-size: 1.6rem;
	}

	.road__item{
		width: 100%;
	}

	.road__bg1, .road__bg2{
		opacity: 0.5;
	}

	.post__item{
		min-height: 300px;
	}

	.posts{
		padding: 3rem 0rem 0rem 0;
	}

	.parspective__tab{
		font-size: 1.4rem;
		padding: 1.2rem 2rem;
	}

	.persepctive__text--inner, .persepctive__blocks{
		padding: 2rem;
	}

	.perspective__block{
		min-height: 60px;
		max-width: 200px;
		padding: 1.5rem;
	}

	.post__arrow{
		padding: 1rem 1.5rem;
	}

	.perspective__content{
		width: calc(100% - 56px);
		margin: 4rem 2.8rem 0 2.8rem;
	}

	.perspective{
		padding: 3rem 0;
	}

	.perspective__text--title{
		font-size: 1.8rem;
	}
}
@media (max-width: 410px) {
	.perspective__block:nth-child(2){
		margin-left: 2rem;
	}

	.perspective__block:nth-child(3){
		margin-left: 4rem;
	}

	.perspective__block:nth-child(4){
		margin-left: 6rem;
	}
}