/*--------------------------
General
---------------------------*/
:root{
	--color-1: #6C72CB;
	--color-2: #CCFF00;

	--color-1--50: #6C72CB80;
	--color-2--50: #CCFF0080;

	--color-1--10: #6C72CB08;
	--color-2--10: #CCFF0008;

	--color-1--5: #6C72CB16;
	--color-2--5: #CCFF0016;

	--black: #17181F;
	--white: #EEEDF0;

	--fs-1:clamp(1.9rem, 1.9rem + 2vw, 5rem);
	--fs-2:clamp(1rem, 1rem + 0.5vw, 2rem);
	--fs-3:clamp(0.85rem, 0.85rem + 0.5vw, 1.5rem);
	--fs-4:clamp(0.7rem, 0.7rem + 0.5vw, 1.1rem);

	--margin-1: 24vh;
	--margin-2: 16vh;
	--margin-3: 8vh;
	--margin-4: 2vh;

	--timing: cubic-bezier(0,0,1,0.5)

}


*, *::before,*::after{margin: 0; padding: 0; box-sizing: border-box;}
body{font-family: 'Inter', sans-serif; color:var(--white); background-color: var(--black);}
h1, h2, h3, h4, h5, h6{font-weight: 500; margin-block-end: var(--margin-4);  line-height: 1.5;} 
p{font-size: var(--fs-3); font-weight: 400; line-height: 2;}
a{color: inherit; cursor: pointer;}
img{width: 100%; height: auto;}
section{margin: var(--margin-1) auto !important;}



@media (max-width: 1024px) {
	:root{
	
		--margin-1: 12vh;
		--margin-2: 8vh;
		--margin-3: 4vh;
		--margin-4: 1.8vh;
	
	}
	}

/*--------------------------
Helpers
---------------------------*/
.container{ width: 86%; margin: 0 auto;}
.container--small{ width: 60%; margin: 0 auto;}

.text-gradient{background: linear-gradient(90deg, white, transparent); background-clip: text; -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; display: inline-block; background-size: 100%; }
.text-gradient--vertical{background: linear-gradient(180deg, white, transparent ); background-clip: text; -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; display: inline-block; background-size: 100%;}

@media (max-width: 1024px) {
.container--small{width: 100%; }
.container .container{width: 100%;}
}





/*--------------------------
Button
---------------------------*/
.button{display:inline-flex; border: 2px solid var(--color-2); justify-content: space-between; padding: 1rem; border-radius: 3rem; font-size: var(--fs-2); gap: 1rem; align-items: center; text-decoration: none; transition: color 0.4s var(--timing); text-transform: uppercase; position: relative;}
.button::before{content: ''; position: absolute; inset: 0; height: 100%; width: 5%;  background-color: var(--color-2); transition: 0.4s var(--timing); z-index: -1; border-radius: 3rem; opacity: 0; transition: 0.4s var(--timing);}


.button img {filter: invert(84%) sepia(72%) saturate(652%) hue-rotate(15deg) brightness(103%) contrast(105%); height: var(--fs-1); width: auto;}

.button:hover::before{width: 100%; height: 100%; inset: 0;  border-radius: 3rem; opacity: 1;}
.button:hover{color: var(--black);}
.button:hover img{ filter: invert(6%) sepia(5%) saturate(3620%) hue-rotate(195deg) brightness(95%) contrast(91%);}

/*--------------------------
Heaader
---------------------------*/
.header{text-align: center; margin: var(--margin-2) auto;}
.header__text h1{font-size: var(--fs-1);}
.header__text h1 span{display: block;}
.header__text p{margin-bottom: var(--margin-3); font-size: var(--fs-2);  text-wrap: balance;}

.header__media{	margin-top: var(--margin-2); }
.header__media video{ width: 100%; height: 100%; object-fit: cover;}


@media (max-width: 1024px) {
	.header__media video{ height: 70vh; }
}


/*--------------------------
Features
---------------------------*/
.features__header{text-align: center;}
.features__header h2{font-size: var(--fs-1);}
.features__header p{text-wrap: balance;}


.features__grid{
	margin: var(--margin-3) auto; display: grid; grid-template-rows: repeat(3, auto); grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
	grid-template-areas: 
		"grid-item-1 grid-item-2 grid-item-2 grid-item-3"
		"grid-item-4 grid-item-4 grid-item-5 grid-item-5"
		"grid-item-6 grid-item-7 grid-item-7 grid-item-8"
	;
}

.features__grid--small{
	grid-template-columns: repeat(4, 1fr); gap: 20px;
	grid-template-areas: 
		"grid-item-1 grid-item-2 grid-item-3 grid-item-4"
	;
}

.features__grid__item{border: 2px solid var(--color-1--50); padding: var(--fs-2); border-radius: 2rem; background-color: var(--color-1--5); transition: 0.4s;}
.features__grid__item:hover{background-color: var(--color-2); color: var(--black); border: 2px solid var(--color-2--50); }

.features__grid__item:nth-child(1){grid-area: grid-item-1;}
.features__grid__item:nth-child(2){grid-area: grid-item-2;}
.features__grid__item:nth-child(3){grid-area: grid-item-3;}
.features__grid__item:nth-child(4){grid-area: grid-item-4;}
.features__grid__item:nth-child(5){grid-area: grid-item-5;}
.features__grid__item:nth-child(6){grid-area: grid-item-6;}
.features__grid__item:nth-child(7){grid-area: grid-item-7;}
.features__grid__item:nth-child(8){grid-area: grid-item-8;}

.features__grid__item h3{font-size: var(--fs-2); }
.features__grid__item p{font-size: var(--fs-4); margin-block-end: var(--margin-4);}


@media (max-width: 1024px) {
	.features__grid{
		grid-template-rows: repeat(4, auto); grid-template-columns: repeat(2, 1fr);
		grid-template-areas: 
			"grid-item-1 grid-item-2"
			"grid-item-5 grid-item-5"
			"grid-item-3 grid-item-4"
			"grid-item-7 grid-item-7"
			"grid-item-6 grid-item-8"
		;
	}

	.features__grid--small{
		grid-template-rows: repeat(2, auto); grid-template-columns: repeat(2, 1fr);
		grid-template-areas: 
			"grid-item-1 grid-item-2"
			"grid-item-3 grid-item-4"
		;
	}
}


@media (max-width: 600px) {
	.features__grid{
		grid-template-rows: repeat(8, auto); grid-template-columns: repeat(1, 1fr);
		grid-template-areas: 
			"grid-item-1"
			"grid-item-2"
			"grid-item-3"
			"grid-item-4"
			"grid-item-5"
			"grid-item-6"
			"grid-item-7"
			"grid-item-8"
		;
	}

	.features__grid--small{
		grid-template-rows: repeat(4, auto); grid-template-columns: repeat(1, 1fr); 
		grid-template-areas: 
		"grid-item-1"
		"grid-item-2"
		"grid-item-3"
		"grid-item-4"
		;
	}

	.features__grid__item{ border-radius: 1rem;}
}





/*--------------------------
Faq
---------------------------*/
.faq__header{text-align: center; }
.faq__header h2{font-size: var(--fs-1);}
.faq__header p {text-wrap: balance;}

.faq__list{list-style-type: none; margin: var(--margin-3) auto; display: flex; flex-direction: column; gap: 1.5rem;}
.faq__list__item{cursor: pointer; border: 2px solid var(--color-1--50); padding: var(--fs-2); border-radius: 1rem; background-color: var(--color-1--5); transition: 0.4s;  overflow: hidden;  }

.faq__list__item:hover{background-color: var(--color-2); color: var(--black); border: 2px solid var(--color-2);}

.faq__list__item__question{display: flex; justify-content: space-between; align-items: center;  gap: 1rem ; padding: 0.8rem 0;}
.faq__list__item__question h3{margin-block-end: 0; font-weight: 400; font-size: var(--fs-3);}
.faq__list__item__question img{width: 1.5rem; filter: invert(45%) sepia(25%) saturate(1136%) hue-rotate(198deg) brightness(96%) contrast(85%); transition: transform 0.4s;}

.faq__list__item__answer{max-height: 0; overflow: hidden; transition: max-height 0.4s; }
.faq__list__item__answer p {font-size: var(--fs-4);  opacity: 0.8; }

.faq__list__item--open .faq__list__item__question img{transform: rotate(135deg);}
.faq__list__item--open .faq__list__item__answer{max-height: 10rem; padding-bottom: 0.8rem;}


.footer{text-align: center; margin-bottom: var(--margin-1); }
.footer h2{font-size: var(--fs-1);}
.footer p {text-wrap: balance; margin-bottom: var(--margin-3);}



/*--------------------------
Policy
---------------------------*/
.policy p{text-align: center; font-size: var(--fs-4);}
.policy p a {text-decoration: none;}
.policy p a:hover{color: var(--color-2);}
/*--------------------------
Animation
---------------------------*/

.watch--reveal { overflow: hidden;}
.watch--reveal .watch__item{transform: translateY(150%); transition: transform 0.8s;}
.watch--reveal.in-view .watch__item{transform: translateY(0);}

.watch--fade { opacity: 0; transform: scale(0.8); transition: 0.8s;}
.watch--fade.in-view {transform: scale(1); opacity: 1;}


.delay-1{transition-delay: 0.4s;}
.delay-2{transition-delay: 0.8s;}