/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
	margin: 0;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: #0f172a;
	background: #f8fafc;
}

.header { text-align: center; padding: 32px 16px 8px; }
.logo { display: block; margin: 0 auto 8px; border-radius: 999px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.title { margin: 0; font-size: 32px; font-weight: 700; }
.subtitle { margin: 6px 0 0; color: #475569; }

.container { max-width: 1040px; margin: 0 auto; padding: 16px; }

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.card {
	background: #ffffff;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.card.featured { outline: 2px solid #f59e0b; }
.badge {
	position: absolute;
	top: 12px;
	right: 12px;
	background: #f59e0b;
	color: #1f2937;
	font-weight: 700;
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 999px;
}

.coin-icon { margin: 8px 0 12px; }
.pack-title { margin: 8px 0 4px; font-size: 18px; }
.price { margin: 0 0 16px; font-size: 20px; font-weight: 700; color: #0f766e; }

.buy {
	appearance: none;
	border: none;
	background: #0ea5e9;
	color: white;
	font-weight: 600;
	padding: 10px 16px;
	border-radius: 8px;
	cursor: pointer;
	transition: transform 0.05s ease, box-shadow 0.2s ease, background 0.2s ease;
	box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
}
.buy:hover { background: #0284c7; }
.buy:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35); }

.note { text-align: center; color: #64748b; margin-top: 16px; }

/* Discord CTA */
.discord-cta {
	margin-top: 24px;
	text-align: center;
	background: linear-gradient(180deg, rgba(99,102,241,0.08), rgba(99,102,241,0));
	border: 1px solid rgba(99,102,241,0.25);
	border-radius: 12px;
	padding: 20px;
}
.cta-title { margin: 0 0 6px; font-size: 22px; }
.cta-text { margin: 0 0 14px; color: #475569; }
.discord-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	background: #5865F2; /* Discord blurple */
	color: white;
	font-weight: 700;
	padding: 10px 16px;
	border-radius: 8px;
	box-shadow: 0 6px 16px rgba(88,101,242,0.35);
	transition: transform 0.05s ease, filter 0.2s ease;
}
.discord-btn:hover { filter: brightness(1.05); }
.discord-btn:active { transform: translateY(1px); }
.discord-icon { font-size: 18px; }

@media (prefers-color-scheme: dark) {
	body { color: #e2e8f0; background: #0b1220; }
	.card { background: #0f172a; box-shadow: 0 2px 12px rgba(0,0,0,0.4); }
	.subtitle { color: #94a3b8; }
	.price { color: #34d399; }
	.badge { color: #0b1220; }
	.discord-cta { background: linear-gradient(180deg, rgba(99,102,241,0.16), rgba(99,102,241,0)); border-color: rgba(99,102,241,0.35); }
	.cta-text { color: #94a3b8; }
}