*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #0a0a0a; }

::selection {
	background: #d2ff00;
	color: #0a0a0a;
}

html {
	scrollbar-color: #d2ff00 #0a0a0a;
	scrollbar-width: thin;
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
	border: 2px solid #0a0a0a;
	border-radius: 999px;
	background: #d2ff00;
}

.hero {
	position: relative;
	width: 100%;
	aspect-ratio: 1920 / 2160;
	overflow: hidden;
	background: #0a0a0a;
	container-type: inline-size;
	font-family: "Mulish", sans-serif;
}

.hero__bg { position: absolute; inset: 0; }
.hero__photo, .hero__gradient {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

.hero__logo {
	position: absolute; left: 2.0313%; top: 2.2685%; width: 3.8542%; height: 3.4259%;
}
.hero__logo img { display: block; width: 100%; height: 100%; }

.hero__intro {
	position: absolute; margin: 0; color: #fff;
	font-size: 1.0417cqw; line-height: 1.4; font-weight: 400;
}
.hero__intro strong { font-weight: 800; font-size: 1.1458cqw; }
.hero__intro b { font-weight: 700; }
.hero__intro--left { left: 11.7188%; top: 9.7222%; width: 27.1875%; }
.hero__intro--right { left: 65.9896%; top: 35.4167%; width: 26.1979%; }

.hero__heading {
	position: absolute; left: 16.3021%; top: 21.2963%; width: 67.4479%;
	margin: 0; color: #fff; text-align: center; text-transform: uppercase;
	font-weight: 800; font-size: 5cqw; line-height: 1; letter-spacing: -0.125cqw;
}

.hero__explore {
	position: absolute; left: 50%; top: 41.9444%; transform: translateX(-50%);
	display: flex; flex-direction: column; align-items: center; gap: 0.4167cqw;
	text-decoration: none; color: rgba(255,255,255,.7);
	font-size: 0.625cqw; font-weight: 700; letter-spacing: 0.0625cqw; text-transform: uppercase;
}
.hero__explore img { width: 0.625cqw; height: auto; aspect-ratio: 12 / 7.4; }

.hero__flow { position: absolute; inset: 0; pointer-events: none; }
.flow__graphic {
	position: absolute; left: 20.5208%; top: 56.9907%; width: 59.4792%; height: auto;
}

.flow__label {
	position: absolute; transform: translateY(-50%);
	color: #fff; font-size: 1.25cqw; line-height: 1.2; font-weight: 400; white-space: nowrap;
}
.flow__label--lime { color: #d2ff00; font-weight: 800; }
.flow__label--1 { left: 20.5208%; top: 70.3241%; }
.flow__label--2 { left: 37.6042%; top: 71.7130%; }
.flow__label--3 { left: 58.2813%; top: 64.5833%; }
.flow__label--4 { left: 72.5000%; top: 60.1389%; }

.hero__cta {
	position: absolute; left: 50%; top: 83.75%; transform: translateX(-50%);
	display: flex; align-items: center; gap: 0.8333cqw;
	background: #d2ff00; color: #0a0a0a; text-decoration: none;
	padding: 1.25cqw 3.3333cqw; border-radius: 0.625cqw;
	font-weight: 800; font-size: 1.1458cqw; letter-spacing: 0.0729cqw; text-transform: uppercase;
	text-align: center; line-height: 1.2;
}
.hero__cta-dot { width: 0.7813cqw; height: 0.7813cqw; border-radius: 50%; background: #0a0a0a; flex: none; }

.hero__tabs {
	position: sticky; top: 0; z-index: 1000; width: 100%; height: 5.9896vw;
	margin-top: -5.9896vw;
	display: flex; background: #292929;
	border-top: 1px solid rgba(255,255,255,.15);
}
.hero__tab {
	display: flex; align-items: center; justify-content: center;
	color: #fff; text-decoration: none; text-transform: uppercase;
	font-size: 1.25cqw; font-weight: 400; letter-spacing: 0.02em;
	border-left: 1px solid rgba(255,255,255,.15);
}
.hero__tab:first-child { border-left: none; }
.hero__tab:nth-child(1) { width: 25.2604%; }
.hero__tab:nth-child(2) { width: 25.3125%; }
.hero__tab:nth-child(3) { width: 24.7917%; }
.hero__tab:nth-child(4) { width: 24.6354%; }
.hero__tab--active {
	background: #d2ff00; color: #0a0a0a; font-weight: 800;
}

@media (max-width: 767px) {
	.hero {
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 24px;
		padding: 24px 20px 0;
	}
	.hero__bg { position: absolute; inset: 0; z-index: 0; }
	.hero__logo, .hero__intro, .hero__heading, .hero__explore,
	.hero__flow, .hero__cta { position: relative; z-index: 1; }

	.hero__logo { left: auto; top: auto; width: 48px; height: 48px; align-self: flex-start; }

	.hero__intro { left: auto; top: auto; width: 100%; font-size: 15px; text-align: left; }
	.hero__intro strong { font-size: 16px; }
	.hero__intro--right { order: 2; }

	.hero__heading { left: auto; top: auto; width: 100%; font-size: 40px; letter-spacing: -1px; order: 1; }

	.hero__explore { left: auto; top: auto; transform: none; order: 3; font-size: 11px; }
	.hero__explore img { width: 10px; }

	.hero__flow {
		position: relative; inset: auto; order: 4; width: 100%; margin: 20px 0;
	}
	.flow__graphic { position: relative; display: block; width: 100%; height: auto; }
	.flow__label { font-size: 13px; }
	.flow__label--1 { left: 0%; top: 82.7586%; }
	.flow__label--2 { left: 28.7215%; top: 91.3793%; }
	.flow__label--3 { left: 63.4851%; top: 47.1264%; }
	.flow__label--4 { left: auto; right: 0%; top: 19.5402%; }

	.hero__cta {
		left: auto; top: auto; transform: none; order: 5; width: 100%;
		padding: 18px 24px; font-size: 15px; justify-content: center; border-radius: 12px;
	}

	.hero__tabs {
		position: sticky; top: 0; z-index: 1000; width: calc(100% - 40px); height: auto;
		flex-wrap: wrap; margin: 48px 20px 0;
	}
	.hero__tab { width: 50% !important; padding: 16px 8px; font-size: 13px; border-left: none; border-top: 1px solid rgba(255,255,255,.15); }
}

@media (min-width: 768px) and (max-width: 1024px) {
	.flow__label { font-size: 1.9cqw; }
	.hero__cta { font-size: 1.7cqw; }
	.hero__tab { font-size: 1.9cqw; }
}

@media (max-width: 767px) {
	.flow__graphic { left: 0; top: 0; }
	.hero__cta { gap: 14px; }
	.hero__cta-dot { width: 8px; height: 8px; }
}