@charset "UTF-8";
@media only screen and (min-width: 1000px) {
		.tokenomics:last-child {
				margin-bottom: calc(62px - var(--vspace-small));
		}
}
.tokenomics .head {
		position: relative;
		overflow: hidden;
		backface-visibility: hidden;
}
.tokenomics .head .container {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 100vh;
		min-height: 100svh;
}
.tokenomics .head .video-desktop video, .tokenomics .head .video-mobile video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
}
.tokenomics .head .h1 {
		font-weight: 600;
		line-height: 1.1;
		position: relative;
		margin: 0;
}
.tokenomics .head .h1 > * {
		display: inline-block;
		vertical-align: top;
}
.tokenomics .head .big {
		display: block;
		line-height: 1.2;
}
.tokenomics .head .hft {
		position: absolute;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--black);
		font-weight: 800;
		background: var(--grad2-rev);
}
.tokenomics .head .line-down {
		bottom: 50px;
}
.tokenomics .head .bottom {
		position: relative;
		z-index: 3;
		flex: 0 0 auto;
		width: 100%;
		text-align: center;
		white-space: nowrap;
		font-weight: 600;
		font-size: 2.5rem;
		line-height: 1.1;
		color: var(--white);
		transition-delay: 0.4s;
}
.tokenomics .head .bottom .title {
		font-weight: 500;
		font-size: 14px;
		line-height: 1.2;
		color: var(--grey);
		margin: 0 0 16px 0;
}
.tokenomics .head .bottom .row {
		display: flex;
		align-items: center;
		list-style: none;
		margin: 0;
		padding: 0;
		gap: 10px;
		justify-content: center;
}
.tokenomics .head .bottom ul.row {
		gap: 12.5px;
}
.tokenomics .head .bottom .row > * {
		flex: 0 0 auto;
		margin: 0;
		padding: 0;
}
.tokenomics .head .bottom .row li:before {
		display: none;
}
.tokenomics .head .bottom img {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		object-fit: cover;
		object-position: center;
}
.tokenomics .head .bottom.r .row {
		justify-content: flex-end;
}
.tokenomics .head .bottom.r .title {
		font-size: 12px;
}
@media only screen and (min-width: 760px), only screen and (orientation: landscape) and (max-width: 759px) {
		.tokenomics .head .video-mobile {
				display: none;
		}
		.tokenomics .head .container {
				padding-top: 188px;
				padding-bottom: 120px;
		}
		.tokenomics .head .video-desktop {
				z-index: 2;
				position: absolute;
				top: 50%;
				left: 50%;
				width: calc(110.277777% - var(--side-padding) * 2);
				max-width: calc(1588px - var(--side-padding) * 2);
				transform: translate3d(-50%, -50%, 0);
				background: var(--black);
				aspect-ratio: 1588/1080;
		}
		.tokenomics .head .big {
				font-size: 21.7rem; /*280px*/
				letter-spacing: 0.105em;
				margin-top: -2rem;
				margin-left: -0.075em;
		}
		.tokenomics .head .hft {
				transform: translate3d(0, -50%, 0);
		}
		.tokenomics .head .bottom {
				position: absolute;
				bottom: 50px;
				width: auto;
		}
		.tokenomics .head .bottom.l {
				left: var(--side-padding);
				text-align: left;
		}
		.tokenomics .head .bottom.r {
				right: var(--side-padding);
				text-align: right;
		}
		.tokenomics .head .bottom .row {
				min-height: 60px;
		}
}
@media only screen and (min-width: 760px) {
		.tokenomics .head .h1 {
				font-size: 2.75rem; /*44px*/
		}
		.tokenomics .head .hft {
				top: 1.5125rem;
				right: -0.5rem;
				font-size: 1.125rem;
				width: 5rem;
				height: 5rem;
		}
}
@media only screen and (orientation: landscape) and (max-width: 759px) {
		.tokenomics .head .container {
				padding-top: 152px;
		}
		.tokenomics .head .h1 {
				font-size: 0.75rem;
		}
		.tokenomics .head .hft {
				font-size: 0.325rem;
				width: 1.375rem;
				height: 1.375rem;
				top: 0.4rem;
				margin-right: 0;
				right: -0.125rem;
		}
		.tokenomics .head .big {
				font-size: 5.95rem;
				margin-top: -0.1em;
		}
		.tokenomics .head .line-down {
				bottom: 20px;
		}
		.tokenomics .head .bottom {
				font-size: 0.75rem;
				bottom: 20px;
		}
}
@media only screen and (orientation: portrait) and (max-width: 759px) {
		.tokenomics .head {
				text-align: center;
				margin-bottom: 80px;
		}
		.tokenomics .head .container {
				padding-top: 30px;
				padding-bottom: 30px;
		}
		.tokenomics .head .video-desktop {
				display: none;
		}
		.tokenomics .head .video-mobile {
				flex: 1 0 auto;
				position: relative;
				width: 100%;
		}
		.tokenomics .head .h1 {
				font-size: 1.25rem;
				margin: 0 0 35px 0;
		}
		.tokenomics .head .big {
				font-size: 6.25rem;
		}
		.tokenomics .head .hft {
				bottom: 100%;
				right: 0;
				font-size: 13.5px;
				width: 60px;
				height: 60px;
				margin-bottom: 10px;
		}
		.tokenomics .head .bottom {
				font-size: 40px;
		}
		.tokenomics .head .bottom.r, .tokenomics .head .line-down {
				display: none;
		}
}
.tokenomics .total {
		overflow: hidden;
		display: flex;
		align-items: center;
		background: var(--grad3);
		color: var(--black);
		font-weight: bold;
		font-size: 52px;
		line-height: 1.1;
		text-align: center;
		padding: 57px 0;
}
.tokenomics:not(.ready) .total {
		opacity: 0;
}
.tokenomics .total .title {
		font-weight: bold;
		font-size: 16px;
		line-height: 1.4;
		color: inherit;
		margin: 0;
		text-transform: uppercase;
}
.tokenomics .total .inner {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
}
.tokenomics.ready .total .inner {
		animation: menu-line linear 30s infinite;
}
.tokenomics .total .inner > * {
		flex: 0 0 auto;
		padding-left: 40px;
}
@media only screen and (min-width: 1000px) {
		.tokenomics .total {
				font-size: 5.125rem;
		}
		.tokenomics .total .title {
				font-size: 1.25rem;
		}
		.tokenomics .total .inner > * {
				padding-left: 3.75rem;
		}
}
.tokenomics .stat {
		list-style: none;
		margin: 55px auto 0 auto;
		max-width: 1052px;
		padding: 0;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 50px 20px;
		text-align: center;
		font-size: 14px;
		font-weight: 500;
}
@media only screen and (min-width: 760px) {
		.tokenomics .stat {
				grid-template-columns: repeat(4, 1fr);
		}
}
@media only screen and (min-width: 1000px) {
		.tokenomics .stat {
				margin-top: 74px;
				font-size: 16px;
				gap: 60px 40px;
		}
}
.tokenomics .stat li:before {
		display: none;
}
.tokenomics .stat li {
		margin: 0 auto;
		padding: 0;
		max-width: 14.5625rem;
		width: 100%;
}
.tokenomics .stat strong {
		display: block;
		color: var(--white);
		font-weight: 500;
		font-size: 64px;
}
.tokenomics .use-cases {
		margin-top: 80px;
}
.tokenomics .use-cases .h2 {
		text-align: center;
		font-size: 3.8125rem;
		line-height: 1;
		margin: 0 auto 50px auto;
		max-width: 7.15em;
}
.tokenomics .use-cases .h2 > * {
		display: block;
}
.tokenomics .use-cases .h2 > *:not(:first-child) {
		margin-top: -0.05em;
}
@media only screen and (min-width: 760px) {
		.tokenomics .use-cases .h2 {
				font-size: 9.5625rem;
		}
		.tokenomics .use-cases .h2 > *:nth-child(1) {
				text-align: left;
		}
		.tokenomics .use-cases .h2 > *:nth-child(2) {
				text-align: right;
		}
}
@media only screen and (min-width: 1000px) {
		.tokenomics .use-cases {
				margin-top: 114px;
		}
		.tokenomics .use-cases .h2 {
				margin-bottom: 168px;
		}
}
.tokenomics .use-cases .video {
		position: relative;
		aspect-ratio: 1/1;
		--height: 100px;
}
@media only screen and (max-width: 759px) {
		.tokenomics .use-cases .video {
				display: none;
		}
}
.tokenomics .use-cases .wrap {
		transition-delay: 0.2s;
}
@media only screen and (min-width: 760px) {
		.tokenomics .use-cases .wrap {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
		}
		.tokenomics .use-cases .video {
				flex: 0 0 auto;
				width: 52%;
				margin-right: calc(var(--side-padding) / -2);
				position: sticky;
				top: calc(50vh - var(--height) / 2);
				top: calc(50svh - var(--height) / 2);
		}
		.tokenomics .use-cases .list {
				flex: 0 0 auto;
				width: 48%;
		}
}
.tokenomics .use-cases .list {
		list-style: none;
		margin: 0;
		padding: 0;
		counter-reset: to;
		font-weight: 600;
		font-size: 24px;
		line-height: 1.3;
		color: var(--white);
}
.tokenomics .use-cases .list li {
		margin: 0;
		padding: 37px 0 53px 40px;
		position: relative;
		--percent: 0;
}
.tokenomics .use-cases .list .line {
		--height: 100px;
		position: absolute;
		top: 47px;
		bottom: -47px;
		min-width: 0;
		margin: 0;
		padding: 0;
		left: 5px;
		width: 1px;
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%), var(--grad);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: 0 calc(var(--height) * var(--percent)), 50% 50%;
}
.tokenomics .use-cases .list li:last-child .line {
		bottom: 0;
}
.tokenomics .use-cases .list .line:before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate3d(-50%, -1px, 0);
		width: 11px;
		height: 11px;
		background: #273114;
		border-radius: 50%;
		transition: background 0.2s var(--move-timing);
}
.tokenomics .use-cases .list li.ready .line:before {
		background: #B8F54B;
}
.tokenomics .use-cases .list li:before {
		display: none;
}
.tokenomics .use-cases .list .num {
		display: block;
		margin: 0 0 20px 0;
		padding: 0;
		text-align: inherit;
		color: #B8F54B;
		font-weight: 600;
		font-size: 20px;
		line-height: 1.1;
		overflow: hidden;
}
.tokenomics .use-cases .list .num span {
		display: inline-block;
		vertical-align: top;
}
.tokenomics .use-cases .list .num span:before {
		content: counter(to, decimal-leading-zero);
		counter-increment: to;
}
.tokenomics .use-cases .list li .text {
		max-width: 15.555em;
}
.tokenomics .use-cases .list li .text span {
		display: inline-block;
		vertical-align: top;
		backface-visibility: hidden;
}
.tokenomics .use-cases .list li .text > * {
		overflow: hidden;
}
@media only screen and (max-width: 759px) {
		.tokenomics .use-cases .list .num, .tokenomics .use-cases .list .text {
				transition: opacity 0.5s var(--move-timing);
				opacity: 0.2;
		}
		.tokenomics .use-cases .list li.ready .num, .tokenomics .use-cases .list li.ready .text {
				opacity: 1;
		}
}
@media only screen and (min-width: 760px) {
		.tokenomics .use-cases .list .num span, .tokenomics .use-cases .list .text span span {
				backface-visibility: hidden;
				transform: translate3d(0, 100%, 0);
				transition: transform 1s var(--move-timing);
		}
		.tokenomics .use-cases .list li.ready .num span, .tokenomics .use-cases .list li.ready .text span span {
				transform: translate3d(0, 0, 0);
		}
}
@media only screen and (min-width: 1000px) {
		.tokenomics .use-cases .list {
				font-size: 2.25rem;
		}
		.tokenomics .use-cases .list li {
				padding-left: 72px;
				padding-bottom: 114px;
				padding-top: 22px;
		}
		.tokenomics .use-cases .list .num {
				font-size: 24px;
				margin-bottom: 16px;
		}
		.tokenomics .use-cases .list .line {
				top: 32px;
		}
		.tokenomics .use-cases .list li:not(:last-child) .line {
				bottom: -32px;
		}
}