/* Hero Section styles */
.hero {
    text-align: center;
    margin: 2vh 0 1rem; /* Using vh for better responsiveness */
    animation: fade-in 0.8s ease-out forwards;
}
  
.hero h1 {
font-size: clamp(2rem, 6vw, 4rem);
font-weight: 800;
margin-bottom: 1rem;
line-height: 1.1;
letter-spacing: -0.02em;
}

.hero h1 span {
background: linear-gradient(135deg, var(--md-primary-fg-color), #2196f3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.hero p {
font-size: 1rem;
color: var(--md-default-fg-color--light);
max-width: 750px;
margin: 0 auto 2rem;
line-height: 1.2;
opacity: 0;
animation: slide-up 0.8s ease-out 0.2s forwards;
}

.hero-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
opacity: 0;
animation: slide-up 0.8s ease-out 0.4s forwards;
}

/* Animations */
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes slide-up {
from { 
    opacity: 0;
    transform: translateY(20px);
}
to { 
    opacity: 1;
    transform: translateY(0);
}
}

/* Card enhancements */
.grid.cards {
margin-top: 2rem;
}

.grid.cards > ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
justify-content: center;
}

.grid.cards > ul > li {
text-align: center;
padding: 2rem;
height: 100%;
border: 1px solid var(--md-default-fg-color--lightest);
border-radius: 12px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
background: var(--md-default-bg-color);
}

.grid.cards > ul > li:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
border-color: var(--md-primary-fg-color);
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
.hero { margin: 4rem 0; }
.hero h1 { font-size: 2.5rem; }
}