@font-face {
	font-family	: 'Barlow';
	font-style	: normal;
	font-weight	: 400;
	font-display: swap;
	src			: url('/fonts/barlow-latin-400.woff2') format('woff2');
}

@font-face {
	font-family	: 'Barlow';
	font-style	: normal;
	font-weight	: 700;
	font-display: swap;
	src			: url('/fonts/barlow-latin-700.woff2') format('woff2');
}

:root {
	--color-bg		: #0F1115;
	--color-text	: #F2F3F5;
	--color-muted	: #A9AEB8;
	--color-accent	: #FEC631;
	--color-line	: #262A33;
	--gutter		: 16px;
	--max-width		: 720px;
}

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin			: 0;
	min-height		: 100vh;
	display			: flex;
	flex-direction	: column;
	background		: var(--color-bg);
	color			: var(--color-text);
	font-family		: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size		: 1.125rem;
	line-height		: 1.5;
}

a {
	color: var(--color-accent);
}

a:focus-visible {
	outline			: 2px solid var(--color-accent);
	outline-offset	: 3px;
}

.site-header,
.content,
.site-footer {
	width		: 100%;
	max-width	: var(--max-width);
	margin		: 0 auto;
	padding		: 0 var(--gutter);
}

.site-header {
	padding-top		: 24px;
	padding-bottom	: 24px;
}

.brand {
	display			: inline-flex;
	align-items		: center;
	gap				: 12px;
	color			: var(--color-text);
	font-size		: 1.5rem;
	font-weight		: 700;
	text-decoration	: none;
}

.brand img {
	border-radius: 8px;
}

.content {
	flex			: 1;
	padding-top		: 48px;
	padding-bottom	: 64px;
}

.badge {
	display			: inline-block;
	margin			: 0 0 16px;
	padding			: 4px 12px;
	border			: 1px solid var(--color-accent);
	border-radius	: 999px;
	color			: var(--color-accent);
	font-size		: 0.875rem;
	font-weight		: 700;
	letter-spacing	: 0.04em;
	text-transform	: uppercase;
}

h1 {
	margin		: 0 0 32px;
	font-size	: clamp(2rem, 7vw, 3.25rem);
	font-weight	: 700;
	line-height	: 1.1;
}

.features {
	margin		: 0;
	padding		: 0;
	list-style	: none;
}

.features li {
	position	: relative;
	padding		: 14px 0 14px 28px;
	border-top	: 1px solid var(--color-line);
	color		: var(--color-text);
}

.features li::before {
	content		: '';
	position	: absolute;
	left		: 0;
	top			: 24px;
	width		: 12px;
	height		: 4px;
	background	: var(--color-accent);
	transform	: skewX(-12deg);
}

.button {
	display			: inline-block;
	padding			: 10px 20px;
	border-radius	: 8px;
	background		: var(--color-accent);
	color			: var(--color-bg);
	font-weight		: 700;
	text-decoration	: none;
}

.site-footer {
	padding-top		: 24px;
	padding-bottom	: 32px;
	border-top		: 1px solid var(--color-line);
	color			: var(--color-muted);
	font-size		: 1rem;
}

.site-footer p {
	margin: 0;
}