.footer {
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	padding-block: var(--space-12) var(--space-8);
}
.footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--space-10);
	margin-bottom: var(--space-10);
}
.footer__brand-desc {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	max-width: 32ch;
	margin-top: var(--space-3);
	line-height: 1.6;
}
.footer__col-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-sm);
	color: var(--color-text);
	margin-bottom: var(--space-4);
	text-transform: uppercase;
	letter-spacing: 0.07em;
}
.footer__links {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.footer__link {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	transition: color var(--transition);
}
.footer__link:hover {
	color: var(--color-text);
}
.footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-divider);
	font-size: var(--text-xs);
	color: var(--color-text-faint);
}
.footer__socials {
	display: flex;
	gap: var(--space-3);
}
.social-btn {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-full);
	border: 1px solid var(--color-border);
	color: var(--color-text-muted);
	transition:
		color var(--transition),
		border-color var(--transition),
		background var(--transition);
}
.social-btn:hover {
	color: var(--color-text);
	border-color: var(--color-primary);
	background: var(--color-surface-offset);
}
.social-btn svg {
	width: 14px;
	height: 14px;
}