:root {
	--bg: #161616;
	--text-soft: #777777;
	--text-bright: #f9f9f9;
	--text-dim: #656565;
	--page-height: 100vh;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	min-width: 320px;
	background: var(--bg);
}

body {
	color: var(--text-bright);
	font-family: 'Inter', sans-serif;
}

img {
	display: block;
	max-width: 100%;
}

.page {
	min-height: var(--page-height);
	background:
		radial-gradient(
			circle at 50% 100%,
			rgba(255, 255, 255, 0.06),
			transparent 38%
		),
		var(--bg);
}

.hero {
	position: relative;
	width: 100%;
	min-height: max(var(--page-height), 1205px);
	overflow: hidden;
	background: var(--bg);
}

.hero__intro {
	position: absolute;
	top: 0;
	left: 50%;
	display: flex;
	width: min(100%, 390px);
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: 120px 16px 0;
	transform: translateX(-50%);
	z-index: 3;
}

.hero__mark {
	width: 41px;
	height: 64px;
}

.hero__intro-copy {
	display: flex;
	width: 100%;
	max-width: 370px;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.hero__eyebrow {
	margin: 0;
	color: var(--text-soft);
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 0.28px;
	text-transform: uppercase;
}

.hero__statement,
.hero__title,
.hero__footer {
	margin: 0;
	font-family: 'Lora', serif;
	background: linear-gradient(
		90deg,
		var(--text-bright) 0%,
		var(--text-dim) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	padding-bottom: 0.3em;
}

.hero__statement {
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
}

.hero__title {
	position: absolute;
	top: 466px;
	left: 50%;
	z-index: 1;
	width: 358px;
	transform: translateX(-50%);
	text-align: center;
	font-size: 82px;
	font-weight: 500;
	line-height: 0.86;
}

.hero__clouds {
	position: absolute;
	top: 473px;
	left: 50%;
	width: 100%;
	height: 732px;
	transform: translateX(-50%);
	z-index: 2;
}

.hero__clouds::after {
	content: '';
	position: absolute;
	width: 100%;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(22, 22, 22, 0) 0%,
		rgba(22, 22, 22, 1) 80%
	);
}

.hero__clouds-image {
	position: absolute;
	top: -5%;
	width: 108%;
	height: 112%;
	object-fit: cover;
}

.hero__footer {
	position: absolute;
	bottom: 81px;
	left: 50%;
	z-index: 3;
	transform: translateX(-50%);
	text-align: center;
	font-size: 26px;
	font-weight: 500;
	line-height: 0.8;
	white-space: nowrap;
}

@media (min-width: 768px) {
	.hero {
		min-height: max(var(--page-height), 1187px);
	}

	.hero__intro {
		width: 612px;
		padding: 120px 120px 0;
	}

	.hero__title {
		top: 386px;
		width: 1024px;
		font-size: 126px;
		line-height: 1.2;
	}

	.hero__clouds {
		top: 455px;
		left: 0;
		width: 100%;
		height: 732px;
		transform: none;
	}

	.hero__clouds-image {
		top: -31.15%;
		left: 0;
		width: 100%;
		height: 131.15%;
	}

	.hero__footer {
		bottom: 59px;
		font-size: 44px;
	}
}