.modern-card {
	background: #ffffff;
	border: 1px solid rgba(226, 232, 240, 0.9);
	border-radius: 1rem;
	box-shadow:
		0 1px 3px 0 rgba(15, 23, 42, 0.04),
		0 1px 2px -1px rgba(15, 23, 42, 0.04);
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.modern-card:hover {
	border-color: rgba(203, 213, 225, 0.9);
	box-shadow:
		0 10px 25px -5px rgba(15, 23, 42, 0.06),
		0 8px 10px -6px rgba(15, 23, 42, 0.04);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.modern-card,
	.modern-card:hover {
		transition: none;
		transform: none;
	}
}

#hero-typing-badge::after {
	content: "\200B";
}