.hero {
background: linear-gradient(180deg, #0a0a0a 0%, #121212 100%);
border-bottom: 1px solid var(--color-graphite);
}

.hero h1 {
letter-spacing: 0.04em;
text-transform: uppercase;
}

.card {
position: relative;
overflow: hidden;
transition: var(--transition-base);
}

.card:hover {
border-color: var(--color-accent);
transform: translateY(-4px);
}

.card h2 {
text-transform: uppercase;
letter-spacing: 0.03em;
}

.card p {
color: var(--color-light-gray);
}

@media (max-width: 640px) {
.hero {
padding-top: var(--space-xl);
}
}