/*    21. RESPONSIVE — SMALL MOBILE (max-width: 480px)
   ------------------------------------------- */
@media (max-width: 480px) {
	:root {
		--text-6xl: 2.8rem;
		--text-5xl: 2.2rem;
		--text-4xl: 1.8rem;
	}

	.hero-title {
		font-size: var(--text-6xl);
	}

	.hero-badge {
		font-size: 0.6rem;
	}

	.error-404-title {
		font-size: 4rem;
	}

	.tech-stack-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Portal CTA */
	.portal-cta-features {
		grid-template-columns: 1fr;
		max-width: 280px;
	}

	.portal-cta-title {
		font-size: var(--text-2xl);
	}

	.portal-cta-card {
		max-width: 100%;
	}

	.portal-cta-card-body {
		padding: 16px;
	}

	.portal-cta-card-row {
		font-size: 0.8rem;
		padding: 8px 0;
	}
}