@font-face {
	font-family: Neue Montreal;
	src: url('_fonts/PPNeueMontreal-Medium.woff') format('woff2'),
		url('_fonts/PPNeueMontreal-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: Neue Montreal;
	src: url('_fonts/PPNeueMontreal-Regular.woff2') format('woff2'),
		url('_fonts/PPNeueMontreal-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

* {
	-webkit-font-smoothing: antialiased;
	-webkit-overflow-scrolling: touch;
	-webkit-appearance: none;

	/*font-family: stratos-lights, sans-serif;
	font-weight: 400;
	font-style: normal;*/

/*	transition-timing-function: var(--ease-outexpo);*/
	transition-duration: 0.4s;

	letter-spacing: -0.02em;
}

*:focus {
	outline: none;
}

:root {
	--black: #000000;
	--deepblack: #1F211C;
	--white: #FFF;
	--offwhite: #FAF8F0;

	--green:#00FF76;
	--pink:#EE6AFF;
/*	--yellow:#FFF500;*/
	--yellow: #FF7C0B;
	--blue:#003BFF;

	--ease-outexpo: cubic-bezier(0.16, 1, 0.3, 1);

	--offwhite80: #C8C6C0;
}

html {
	scroll-behavior: smooth;
}

body, html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;

	font-family: Neue Montreal, sans-serif;
	font-weight: 500;
	font-style: normal;
}

body {
	font-size: 1.1vw;
	line-height: 1.7vw;
	font-weight: normal;
	scroll-behavior: smooth;

/*	color: var(--black);*/
}

a {
	text-decoration: none;
	color: currentColor;
}

/* BACKGRUONDS  */

.bg-white {
	background-color: white;
	color: var(--black);
}

.bg-offwhite {
	background-color: var(--offwhite);
	color: var(--black);
}

.bg-black {
	background-color: var(--black);
	color: var(--offwhite);	
}

.bg-deepblack {
	background-color: var(--deepblack);
	color: var(--offwhite);	
}

.bg-green {
	background-color: var(--green);
	color: var(--offwhite);	
}

.bg-pink {
	background-color: var(--pink);
	color: var(--offwhite);	
}

.bg-yellow {
	background-color: var(--yellow);
	color: var(--offwhite);	
}

.bg-blue {
	background-color: var(--blue);
	color: var(--offwhite);	
}

/* BUTTONS */

h1, h2, h3, h4, h5 {
	padding: 0;
	margin: 0;
	font-weight: 500;
}

h1, h2 {

}

/* FONTS SIZE */

.font-size--xxl {
	font-size: 5.6vw;
	line-height: 5.6vw;
}

.font-size--xl {
	font-size: 4.8vw;
	line-height: 5.2vw;
}

.font-size--l {
	font-size: 3.2vw;
	line-height: 3.6vw;	
}

.font-size--m {
	font-size: 2.4vw;
	line-height: 2.8vw;	
}

.font-size--s {
	font-size: 1.6vw;
	line-height: 2vw;	
}

.font-size--xs {
	font-size: 1.2vw;
	line-height: 1.6vw;	
}

.font-size--fixed {
	font-size: 14px;
	line-height: 18px;
}

.font-size--fixed a {
	border-bottom: 1px solid currentColor;
}

sup {
	opacity: 0.3;
	font-weight: 200;
}

/* PAGE BASE */


.section, section {
	position: relative;
	margin: 0;
	padding: 10.4vw 0;
}

.section--margin {
	position: relative;
	width: calc(100% - 12.8vw);
	padding: 0 6.4vw;
}

.grid--12 {
	position: relative;
/*	width: 100%;*/

	width: calc(100% - 0vw);
    padding-left: 0vw;

	display: grid;
	grid-template-columns: repeat(12, [col-start] 1fr);
	gap: 2.4vw;
}

.col--1 {
	position: relative;
	grid-column: span 1;
}

.col--2 {
	position: relative;
	grid-column: span 2;
}

.col--3 {
	position: relative;
	grid-column: span 3;
}

.col--4 {
	position: relative;
	grid-column: span 4;
}

.col--5 {
	position: relative;
	grid-column: span 5;
}

.col--6 {
	position: relative;
	grid-column: span 6;
}

.col--7 {
	position: relative;
	grid-column: span 7;
}

.col--8 {
	position: relative;
	grid-column: span 8;
}

.col--9 {
	position: relative;
	grid-column: span 9;
}

.col--10 {
	position: relative;
	grid-column: span 10;
}

.col--11 {
	position: relative;
	grid-column: span 11;
}

.col--12 {
	position: relative;
	grid-column: span 12;
}

div[class^='col--'] {
/*	padding: 2vw;*/
	border-radius: 0.8vw;
}

.has--padding {
	padding: 2vw;
}

/* HEADER */

.header__fixed {
	position: fixed;
		top: 2vw;
		left: 0;

	width: 100%;
	height: 3.2vw;

	z-index: 400;
}

.header__fixed .grid--12 {
	height: 4vw;
	border-radius: 0.2vw;
}

.header__fixed .grid--12:before {
	content: "";
	position: absolute;
		top: calc(100% + 0px);
		left: 0;

	width: 100%;
	height: 6px;

	backdrop-filter: blur(10px);
}

.header__fixed .grid--12:after {
	content: "";
	position: absolute;
		top: calc(100% + 0px + 6px);
		left: 0;

	width: 100%;
	height: 6px;

	background-color: var(--deepblack);
	border-radius: 0.2vw;
}

.logo-type--icon-header {
	position: absolute;
		top: 1.2vw;
		left: 1.2vw;

	width: auto;
	height: calc(4vw - 1.2vw - 1.2vw);
}

.logo-type--word-header {
	position: absolute;
		top: 0;
		left: 3.6vw;

	line-height: 4vw;
	opacity: 1;
	text-transform: uppercase;

	background: -webkit-linear-gradient(0deg, #FFFFFF50, #FFFFFF20);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

nav {
	position: relative;
	width: 100%;
	height: 4vw;

	display: flex;
	gap: 1.6vw;
}

nav a {
	line-height: 4vw !important;
	position: relative;
	color: var(--offwhite80);
}

nav a.current:after {
	content: "";
	position: absolute;
		top: 100%;
		left: 0;

	width: 100%;
	height: 6px;

	border-radius: 1px;

	background-color: var(--green);
}

#logo__header.current:after {
	content: "";
	position: absolute;
		top: 100%;
		left: 1.3vw;

	width: calc(4vw - 1.2vw - 1.2vw - 0.2vw);
	height: 6px;

	background-color: var(--green);	

	border-radius: 1px;
}

/* HERO */

.section__hero {
	padding-top: 12.8vw;
	padding-bottom: 9.6vw;
}

.section__hero--overlay {
	position: absolute;
		left: 0;
		bottom: 0;

	width: 100%;
	height: 12.8vw;

	 background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1.0) );
}

.spline--hero {
	position: absolute;
		top: 0;
		left: 0;

	width: 100%;
	height: 100%;
}

.btn--huge {
	position: relative;
	display: inline-block;

	padding: 0 2vw;
	padding-bottom: 0.2vw;

	font-size: 2vw;
	line-height: 4.8vw;
	color: black;

	border-radius: 0.2vw;

	width: max-content;
	cursor: pointer;
}

.section__hero .btn--huge {
	margin-bottom: 3.2vw;
	padding-right: 2.4vw;
}

.section__cta .btn--huge {
	margin-top: 2.4vw;
	margin-bottom: 0vw;
}

.btn--huge:after {
	content: "";
	position: absolute;
		left: 0;
		bottom: 4px;

	width: 100%;
	height: 3px;

	background-color: black;
	transition-duration: 0.4s;
}

.btn--huge:hover {
	filter: drop-shadow(0vw 0.2vw 0.8vw var(--green));
}

.btn--huge:hover:after {
	background-color: var(--offwhite);
}

/* BENEFTIS */

.benefit--item h2 {
	padding-bottom: 4vw;
}

.benefit--item p {
	padding: 0;
	margin: 0;

	opacity: 0.4;
}

.icon--box {
	position: relative;
	width: 4.8vw;
	height: 4.8vw;

	border-radius: 0.3vw;
	border: 1px solid #636461;

	margin-bottom: 2.4vw;
}

.icon--box:after {
	content: "";
	position: absolute;
		bottom: 0.4vw;
		left: -1px;

	width: 100%;
	height: 3px;

	border: 1px solid #636461;

	opacity: 0.8;
}

.icon--box i {
	position: absolute;
		top: 0.8vw;
		left: 0.8vw;

	font-size: 1.4vw;
}

.has--icon:hover .icon--box:after {
	opacity: 1;
	background-color: white;
	transition-duration: 0.2s;
}

.has--icon:hover .icon--box i {
	filter: drop-shadow(0vw 0vw 0.4vw var(--green));
}

/* FOOTER */

footer {
	padding-top: 8vw;
	padding-bottom: 9.6vw;
}

.spacer--footer {
	position: relative;
	border-bottom: 1px solid #636461;
	padding-top: 6.4vw;
	padding-bottom: 3.2vw;
}

/* CTA */

.section__cta {
	padding-top: 16vw;
	padding-bottom: 16vw;
}

/* FAQ */

.item--faq {
	position: relative;
	border: 1px solid #636461;

	padding-bottom: 4vw;
	padding-top: 7.2vw;

	cursor: pointer;
}

.item--faq:after {
	content: "";
	position: absolute;
		bottom: 2vw;
		left: -1px;

	width: 100%;
	height: 0.4vw;

	border: 1px solid #636461;

	opacity: 0.8;
	transition-duration: 0.2s;
}

.item--faq:hover:after {
	background-color: var(--offwhite);
}

/* SHOWCASE */

.showcase__item {
	position: relative;
	width: 100%;
	padding-bottom: 100%;

	border-radius: 0.4vw;
	overflow: hidden;
}

.showcase__item--nft {
	position: absolute;
		top: 0;
		left: 0;

	width: 100%;
	height: calc(100% - 3.2vw);
}

.showcase__item--nft img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.showcase__item--domain {
	position: absolute;
		bottom: 0;
		left: 0;

	width: 100%;
	height: 3.2vw;
	line-height: 3.2vw;

	padding-left: 1vw;

	box-sizing: border-box;
}

.showcase__item--domain:after {
	content: "";
	position: absolute;
		left: 0;
		bottom: 100%;

	width: 100%;
	height: 2px;

	background-color: rgba(255, 255, 255, 0.2);
}

/* FORM */

.form__checkname {
	position: fixed;
		top: 0;
		left: 0;

	width: 100%;
	height: 100%;

	z-index: 600;

	background-color: rgba(0, 0, 0, 0.8);

	display: flex;
	align-items: center;
}

.form__checkname--margin {
	width: 100%;
}

.API__cube {
	position: relative;
	width: 20vw;
	height: 20vw;

	border-radius: 0.8vw;
	border: 1px solid var(--green);

	overflow: hidden;
}

.API__cube--extention {
	position: absolute;
		left: 0;
		bottom: 0;

	width: 100%;
	height: 3.2vw;
	line-height: 3.2vw;

	padding-left: 0.8vw;

	background-color: black;

	border-top: 2px solid var(--green);
}

.form__input--name {
	position: absolute;
		top: 1.6vw;
		left: 1.6vw;
}

.domain__list {
	position: relative;
	width: 100%;
	list-style-type: none;
	margin: 0;
	padding:0;
	padding-top: 0.8vw;
}

.domain__list li {
	border-bottom: 1px solid #FFFFFF20;
	line-height: 2.4vw;
}

.domain__list li:last-child {
	border-bottom: 0;
}

.domain__list li a {
	position: relative;
	display: block;
	width: 100%;
}


.domain__list li a:after {
	content: "Claim";
	position: absolute;
		top: 0.8vw;
		right: 0vw;

	font-size: 1vw;
	text-transform: uppercase;

	border-radius: 0.2vw;
	background-color: transparent;

	line-height: 1.2vw;
	color: white;
	padding: 0 0.2vw;
	letter-spacing: 0.08em;
	opacity: 0.1;
	border: 1px solid white;
}

.domain__list li:hover a:after {
	background-color: var(--green);
	color: black;
	opacity: 1;
	border: 1px solid var(--green);
}

#result__domain,
#result__domain_2 {
	line-height: 3.2vw;
	margin: 0;
	margin-top: 1.2vw;
	border-radius: 0.4vw;
	margin-left: -0.8vw;
	margin-right: -0.9vw;
	padding: 0 0.8vw;
}

.form__checkname--form--form {
	position: relative;
	width: 100%;
	display: flex;

	margin-bottom: 1.6vw;
}

.form__checkname--form--form input[type="text"] {
	border: 1px solid black;
	padding: 0.8vw;
	font-size: 1.6vw;
	width: 100%;
}

.form__checkname--form--form button {
	padding: 0.8vw 1.2vw;
	border: none;
}

.form__checkname--form .btn--huge {
	width: 100%;
    box-sizing: border-box;
}

/* FAQ */


.faq__overlay {
	position: fixed;
		top: 0;
		left: 0;

	width: 100%;
	height: 100%;

	z-index: 400;

	background-color: rgba(0, 0, 0, 0.8);

/*	overflow: scroll;*/
}

.faq__overlay .section--margin {
	/*display: flex;
	align-items: center;*/
    height: calc(100% - 12.8vw);
    overflow: scroll;

    padding-top: 6.4vw;
    padding-bottom: 6.4vw;
}

.faq__overlay .grid--12 {
/*	margin: 6.4vw 0;*/
}

.faq__overlay--close-icon {
	position: absolute;
		top: -0vw;
		right: -4vw;

	width: 3.2vw;
	height: 3.2vw;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 0.4vw;

	font-size: 1.6vw;
	cursor: pointer;
}

.faq__overlay--close-icon:hover {
	background-color: black;
	color: var(--green);
	transition-duration: 0.2s;
}

.info--x {
	position: absolute;
		right: 0;
		top: 0;

	width: 2.4vw;
	height: 2.4vw;
	
	display: flex;
	justify-content: center;
	align-items: center;
	background: black;
	
	border-top-right-radius: 0.8vw;
	border-bottom-left-radius: 0.8vw;
}

.info--x:after {
	content: "";
	position: absolute;
		left: 50%;
		bottom: 140%;
	
	padding: 0 8px;
	line-height: 24px;
	font-size: 14px;
	color: var(--offwhite80);
	background-color: black;
	width: max-content;
	transform: translateX(-50%);
}

.info--x:hover:after {
	content: "Based on Trending Topics on X (04 OKT, 14:00)";
}

.full-hover {
	transition-duration: 0.2s;
	transition-timing-function: var(--ease-outexpo);
}

.full-hover:hover {
/*	transform: translateY(-0.4vw);*/
}

.benefit--item p {
	transition-duration: 0.4s;
	transition-timing-function: var(--ease-outexpo);
}

.full-hover:hover p {
	opacity: 0.6;
}

#benefits .grid--12:hover .col--4 {
	opacity: 0.6;
}

#benefits .grid--12 .col--4:hover {
	opacity: 1;
}

@media screen and (max-width: 1200px) {



}

@media screen and (max-width: 1080px) {



}

@media screen and (max-width: 768px){

.grid--12 {
	gap: 6.4vw 2.4vw;
}

.col--1 {
	position: relative;
	grid-column: span 12;
}

.col--2 {
	position: relative;
	grid-column: span 12;
}

.col--3 {
	position: relative;
	grid-column: span 12;
}

.col--4 {
	position: relative;
	grid-column: span 12;
}

.col--5 {
	position: relative;
	grid-column: span 12;
}

.col--6 {
	position: relative;
	grid-column: span 12;
}

.col--7 {
	position: relative;
	grid-column: span 12;
}

.col--8 {
	position: relative;
	grid-column: span 12;
}

.col--10 {
	position: relative;
	grid-column: span 12;
}

.col--12 {
	position: relative;
	grid-column: span 12;
}

.font-size--xxl {
	font-size: 12vw;
	line-height: 12vw;
}

.font-size--xl {
	font-size: 8vw;
	line-height: 8vw;
}

.font-size--l {
	font-size: 8vw;
	line-height: 8.8vw;
}

.font-size--m {
	font-size: 6.4vw;
	line-height: 7.2vw;
}

.font-size--s {
	font-size: 4.8vw;
	line-height: 6.4vw;
}

.font-size--xs {
	font-size: 4vw;
	line-height: 6.4vw;
}

.has--padding {
	padding: 4vw;
}

div[class^='col--'] {
    border-radius: 1.6vw;
}

.icon--box {
	position: relative;
	width: 16vw;
	height: 16vw;
	border-radius: 0.8vw;
	border: 1px solid #636461;
	margin-bottom: 12.8vw;
}

.icon--box:after {
	bottom: 2.4vw;
	height: 4px;
}

.icon--box i {
	top: 2vw;
	left: 2vw;
	font-size: 5.6vw;
}

.mobile-last-col {
	order: 10;
}

.showcase__item {
	border-radius: 0.8vw;
}

section.splide {
	padding: 0 !important;
	margin-right: -4vw !important;
	margin-top: 5.6vw !important;
}

.showcase--carousel-progress {
	margin-top: 5.6vw !important;
	background: rgba(255, 255, 255, 0.2);
	margin-bottom: 0.8vw !important;
	margin-right: 4vw !important;
}

.showcase__item--domain {
    height: 12.8vw;
    line-height: 12.8vw;
    padding-left: 2.4vw;
}

.item--faq {
	padding-bottom: 9.6vw;
	padding-top: 12.8vw;
}

.item--faq:after {
	bottom: 4vw;
	height: 6px;
}

.item--faq .font-size--s {
font-size: 6.4vw;
    line-height: 7.2vw;
}

footer .col--6.font-size--fixed {
	text-align: left !important;
}

header {
	pointer-events: none;
}

#header .bg-deepblack {
	background-color: transparent;
}

#header .grid--12:before,
#header .grid--12:after {
	content: unset;
}

#header .section--margin {
    position: relative;
    width: calc(100% - 0vw);
    padding: 0 0.8vw;
}

.page__base {
    width: calc(100% - 4vw);
    padding-left: 4vw;
}

.logo-type--word-header {
	display: none;
}

.logo-type--icon-header {
    position: absolute;
    top: 1.2vw;
    left: 1.2vw;
    width: auto;
    height: calc(4.8vw);
}

nav {
	position: relative;
	width: 4vw;
	height: 100%;
	display: flex;
	gap: 6.6vw;
	flex-flow: wrap;
	padding-top: 4vw;
}

nav a {
    writing-mode: vertical-rl;
    transform: scale(-1);
    line-height: 7.2vw !important;
    color: #FFFFFF50;
    pointer-events: auto;
}

nav a.current:after {
    top: 0%;
    left: 100%;
    width: 6px;
    height: 100%;
}

#logo__header.current:after {
	content: unset;
}

.section__hero .btn--huge {
    margin-bottom: 3.2vw;
    padding-right: 4vw;
}

.btn--huge {
    position: relative;
    display: inline-block;
    padding: 0 4vw;
    padding-bottom: 0.8vw;
    font-size: 6.4vw;
    line-height: 12.8vw;
    color: black;
    border-radius: 0.4vw;
    width: max-content;
    cursor: pointer;
}

#index .font-size--xxl {
	transform: translateY(-14vw);
	padding-bottom: 12.8vw;
}

.form__checkname {
	display: block;
	overflow: scroll;
	padding-bottom: 7.2vw;
	height: calc(100% - 7.2vw);
}

.form__checkname .font-size--fixed {
	position: relative !important;
}

.domain__list {
	font-size: 4vw;
}

.domain__list li {
	line-height: 7.2vw;
}

.faq__overlay .section--margin {
    height: calc(100% - 40vw);
}

}