:root {
	--bg: #050507;
	--panel-top: #101115;
	--panel-bottom: #060608;
	--text: #ededf1;
	--muted: #b9bbc4;
	--line: rgba(255, 255, 255, 0.14);
	--steel: #d9dbe2;
	--red: #d8141d;
	--red-dark: #84070b;
	--radius-lg: 20px;
	--radius-md: 10px;
	--shadow: 0 28px 72px rgba(0, 0, 0, 0.62);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	min-height: 100vh;
	font-family: "Rajdhani", sans-serif;
	color: var(--text);
	background:
		radial-gradient(circle at 22% 8%, rgba(216, 20, 29, 0.26), transparent 34%),
		radial-gradient(circle at 80% 72%, rgba(216, 20, 29, 0.2), transparent 36%),
		linear-gradient(180deg, #111218 0%, var(--bg) 55%, #030305 100%);
	display: grid;
	place-items: center;
	padding: 22px 12px;
	overflow-x: hidden;
}

.grain {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: -1;
	opacity: 0.18;
	background-image: radial-gradient(rgba(255, 255, 255, 0.11) 0.75px, transparent 0.75px);
	background-size: 4px 4px;
	mix-blend-mode: soft-light;
}

.vignette {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: -1;
	background: radial-gradient(circle, transparent 36%, rgba(0, 0, 0, 0.65) 100%);
}

.wrapper {
	width: min(1080px, 100%);
	background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	overflow: hidden;
	animation: rise 820ms ease-out both;
	position: relative;
}

.wrapper::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(108deg, rgba(217, 219, 226, 0.1), transparent 35%, rgba(216, 20, 29, 0.12)),
		repeating-linear-gradient(180deg, transparent 0, transparent 22px, rgba(255, 255, 255, 0.02) 22px, rgba(255, 255, 255, 0.02) 23px);
	opacity: 0.55;
	pointer-events: none;
}

.top {
	padding: 14px clamp(16px, 4vw, 34px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	border-bottom: 1px solid var(--line);
	background: linear-gradient(90deg, rgba(216, 20, 29, 0.22), rgba(216, 20, 29, 0));
	position: relative;
	z-index: 1;
}

.tag {
	font-family: "Teko", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--steel);
	border: 1px solid rgba(214, 215, 220, 0.4);
	background: rgba(214, 215, 220, 0.08);
	border-radius: 999px;
	padding: 7px 14px;
	white-space: nowrap;
}

.tag-alt {
	color: #ff6469;
	border-color: rgba(255, 100, 105, 0.5);
	background: rgba(255, 100, 105, 0.1);
}

.content {
	padding: clamp(24px, 5vw, 54px);
	display: grid;
	gap: 24px;
	position: relative;
	z-index: 1;
}

.hero {
	display: grid;
	gap: 16px;
	justify-items: center;
	text-align: center;
}

.hero-logo {
	width: min(420px, 80vw);
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.64));
	opacity: 0;
	transform: translateY(14px) scale(0.98);
	animation: reveal-scale 720ms 120ms ease forwards;
}

.eyebrow {
	font-family: "Teko", sans-serif;
	font-size: 1.14rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #ff5d63;
	opacity: 0;
	transform: translateY(12px);
	animation: reveal 620ms 220ms ease forwards;
}

h1 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	font-family: "Teko", sans-serif;
	font-weight: 700;
	line-height: 0.9;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	max-width: none;
	color: #f2f3f8;
	text-shadow: none;
	opacity: 1;
	transform: none;
	animation: none;
}

.title-top {
	font-size: clamp(2.3rem, 5.8vw, 4.4rem);
}

.title-main {
	font-size: clamp(3.5rem, 10.5vw, 7rem);
	line-height: 0.86;
}

.sub {
	max-width: 56ch;
	font-size: clamp(1.12rem, 2.55vw, 1.35rem);
	line-height: 1.5;
	color: var(--muted);
	opacity: 0;
	transform: translateY(12px);
	animation: reveal 620ms 380ms ease forwards;
}

.meta-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	opacity: 0;
	transform: translateY(12px);
	animation: reveal 620ms 440ms ease forwards;
}

.chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.95rem;
	color: #f1f1f4;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.06);
}

.cta-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	opacity: 0;
	transform: translateY(12px);
	animation: reveal 620ms 520ms ease forwards;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-family: "Teko", sans-serif;
	font-size: 1.15rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 11px 20px;
	border-radius: var(--radius-md);
	transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.btn-primary {
	color: #fff;
	background: linear-gradient(180deg, #e31f28, var(--red-dark));
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 12px 28px rgba(143, 9, 13, 0.56);
}

.btn-primary:hover,
.btn-primary:focus-visible {
	transform: translateY(-2px);
	filter: brightness(1.08);
	box-shadow: 0 14px 30px rgba(143, 9, 13, 0.6);
}

.banner-link {
	display: block;
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.48);
	transition: transform 180ms ease, box-shadow 180ms ease;
	opacity: 0;
	animation: reveal 760ms 620ms ease forwards;
}

.banner-link:hover,
.banner-link:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 18px 38px rgba(0, 0, 0, 0.56);
}

.banner {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.banner-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 12px 16px;
	font-family: "Teko", sans-serif;
	font-size: 1rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78));
}

.foot {
	text-align: center;
	font-size: 1rem;
	letter-spacing: 0.04em;
	color: #aeb1bc;
	opacity: 0;
	transform: translateY(12px);
	animation: reveal 620ms 760ms ease forwards;
}

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes reveal {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes reveal-scale {
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (max-width: 720px) {
	.top {
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
	}

	.tag {
		font-size: 0.84rem;
	}

	.sub {
		font-size: 1.05rem;
	}

	.hero-logo {
		width: min(330px, 84vw);
	}

	.title-main {
		line-height: 0.85;
	}

	.btn {
		width: 100%;
	}

	.banner-caption {
		font-size: 0.92rem;
	}
}