* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Arial, sans-serif;
}

body,
html {
	height: 100%;
}

.page {
	position: relative;
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;

	/* Anima */
	--y-0: 80%;
	--c-0: hsla(150.8823529411765, 52%, 83%, 1);
	--x-0: 85%;
	--c-1: hsla(219.99999999999997, 100%, 82%, 1);
	--y-1: 24%;
	--x-1: 60%;
	--y-2: 82%;
	--x-2: 13%;
	--c-2: hsla(297.7941176470588, 100%, 65%, 0.49);
	--x-3: 24%;
	--c-3: hsla(182, 72%, 68%, 1);
	--y-3: 7%;
	background-color: hsla(358.0000000000001, 0%, 100%, 1);
	background-image: radial-gradient(
			circle at var(--x-0) var(--y-0),
			var(--c-0) var(--s-start-0),
			transparent var(--s-end-0)
		),
		radial-gradient(
			circle at var(--x-1) var(--y-1),
			var(--c-1) var(--s-start-1),
			transparent var(--s-end-1)
		),
		radial-gradient(
			circle at var(--x-2) var(--y-2),
			var(--c-2) var(--s-start-2),
			transparent var(--s-end-2)
		),
		radial-gradient(
			circle at var(--x-3) var(--y-3),
			var(--c-3) var(--s-start-3),
			transparent var(--s-end-3)
		);
	animation: hero-gradient-animation 10s linear infinite alternate;
	background-blend-mode: normal, normal, normal, normal;
}

/* .overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(3px);
} */

.content {
	position: relative;
	text-align: center;
	max-width: 480px;
	color: #000;
	z-index: 2;
	display: flex;
	flex-direction: column;
	top: -20%;
}

.main-text {
	font-size: 1.5rem;
	margin-bottom: 30px;
	line-height: 1.4;
	color: #000;
}

.btn {
	position: relative;
	display: inline-block;
	padding: 16px 32px;
	background: linear-gradient(135deg, #ffffff 0%, #f3f7ff 100%);
	border: 1px solid rgba(0, 0, 0, 0.1);
	color: #1a1a1a;
	font-weight: 600;
	text-decoration: none;
	font-size: 1.1rem;
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.4s ease;
	text-transform: uppercase;
	letter-spacing: 1px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: -120%;
		width: 100%;
		height: 100%;
		background: linear-gradient(
			90deg,
			transparent,
			rgba(255, 255, 255, 0.7),
			transparent
		);
		transition: 0.5s ease;
	}

	&:hover {
		background: linear-gradient(135deg, #ffffff 0%, #e8eeff 100%);
		transform: translateY(-3px);
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
		border-color: rgba(0, 0, 0, 0.2);

		&::before {
			left: 120%;
		}
	}

	&:active {
		transform: translateY(-1px);
	}
}

.privacy-link {
	display: inline-block;
	color: #000;
	font-size: 0.95rem;
	text-decoration: underline;
	opacity: 0.8;
	transition: 0.2s;
}

.privacy-link:hover {
	opacity: 1;
}

.links {
	position: absolute;
	bottom: 20px;
	z-index: 2;
	font-size: 16px;
	color: #000;

	a {
		text-decoration: none;
		margin: 0 8px;

		&:hover {
			text-decoration: underline;
		}
	}
}

@keyframes hero-gradient-animation {
	0% {
		--y-0: 80%;
		--s-start-0: 9%;
		--s-end-0: 55%;
		--c-0: hsla(150.8823529411765, 52%, 83%, 1);
		--x-0: 85%;
		--c-1: hsla(219.99999999999997, 100%, 82%, 1);
		--y-1: 24%;
		--x-1: 60%;
		--s-start-1: 5%;
		--s-end-1: 72%;
		--y-2: 82%;
		--x-2: 13%;
		--c-2: hsla(297.7941176470588, 100%, 65%, 0.49);
		--s-start-2: 5%;
		--s-end-2: 52%;
		--x-3: 24%;
		--c-3: hsla(182, 72%, 68%, 1);
		--s-start-3: 13%;
		--s-end-3: 68%;
		--y-3: 7%;
	}

	100% {
		--y-0: 94%;
		--s-start-0: 9%;
		--s-end-0: 55%;
		--c-0: hsla(150.8823529411765, 52%, 83%, 1);
		--x-0: 31%;
		--c-1: hsla(220, 82%, 95%, 1);
		--y-1: 25%;
		--x-1: 2%;
		--s-start-1: 5%;
		--s-end-1: 72%;
		--y-2: 20%;
		--x-2: 98%;
		--c-2: hsla(297.7941176470588, 100%, 65%, 0.49);
		--s-start-2: 5%;
		--s-end-2: 52%;
		--x-3: 95%;
		--c-3: hsla(182, 72%, 68%, 1);
		--s-start-3: 13%;
		--s-end-3: 68%;
		--y-3: 92%;
	}
}

@property --y-0 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 80%;
}

@property --s-start-0 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 9%;
}

@property --s-end-0 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 55%;
}

@property --c-0 {
	syntax: "<color>";
	inherits: false;
	initial-value: hsla(150.8823529411765, 52%, 83%, 1);
}

@property --x-0 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 85%;
}

@property --c-1 {
	syntax: "<color>";
	inherits: false;
	initial-value: hsla(219.99999999999997, 100%, 82%, 1);
}

@property --y-1 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 24%;
}

@property --x-1 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 60%;
}

@property --s-start-1 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 5%;
}

@property --s-end-1 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 72%;
}

@property --y-2 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 82%;
}

@property --x-2 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 13%;
}

@property --c-2 {
	syntax: "<color>";
	inherits: false;
	initial-value: hsla(297.7941176470588, 100%, 65%, 0.49);
}

@property --s-start-2 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 5%;
}

@property --s-end-2 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 52%;
}

@property --x-3 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 24%;
}

@property --c-3 {
	syntax: "<color>";
	inherits: false;
	initial-value: hsla(182, 72%, 68%, 1);
}

@property --s-start-3 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 13%;
}

@property --s-end-3 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 68%;
}

@property --y-3 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 7%;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}