:root {
	--background: #f7f6f2;
	--surface: #ffffff;
	--text: #1d1d1f;
	--muted: #5f6066;
	--line: #e3e1da;
	--accent: #e8590c;
	--accent-text: #ffffff;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: #141416;
		--surface: #1c1c20;
		--text: #ececef;
		--muted: #a2a3ab;
		--line: #2c2c32;
		--accent: #ff7a33;
		--accent-text: #141416;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--background);
	color: var(--text);
	font:
		17px / 1.6 system-ui,
		-apple-system,
		"Segoe UI",
		sans-serif;
}

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

header,
main,
footer {
	max-width: 46rem;
	margin: 0 auto;
	padding: 0 1rem;
}

header {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	align-items: center;
	justify-content: space-between;
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

header .brand {
	color: var(--text);
	font-weight: 700;
	text-decoration: none;
}

nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

nav a {
	color: var(--muted);
	text-decoration: none;
}

nav a:hover {
	color: var(--text);
}

h1 {
	font-size: 2.2rem;
	line-height: 1.2;
	margin: 2rem 0 0.75rem;
}

h2 {
	font-size: 1.35rem;
	margin: 2.5rem 0 0.5rem;
}

.lead {
	color: var(--muted);
	font-size: 1.15rem;
}

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1rem;
	padding: 0;
	list-style: none;
}

.cards li {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 1rem 1.1rem;
}

.cards strong {
	display: block;
	margin-bottom: 0.25rem;
}

.discord {
	display: inline-flex;
	gap: 0.7rem;
	align-items: center;
	margin: 0.5rem 0 0.25rem;
	padding: 0.95rem 1.8rem;
	border-radius: 12px;
	background: #5865f2;
	color: #ffffff;
	font-size: 1.2rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s;
}

.discord:hover {
	background: #4752c4;
}

.discord svg {
	width: 1.6rem;
	height: 1.6rem;
}

.price {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 1.25rem 1.4rem;
}

.price .amount {
	font-size: 1.8rem;
	font-weight: 700;
}

.updated {
	color: var(--muted);
	font-size: 0.95rem;
}

footer {
	margin-top: 4rem;
	padding-top: 1.25rem;
	padding-bottom: 2rem;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.95rem;
}