body {
color: #111;
}


.hero {
height: 90vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}


.hero h1 {
font-size: 56px;
font-weight: 700;
}


.hero p {
font-size: 20px;
color: #555;
max-width: 600px;
}


.section {
max-width: 1200px;
margin: auto;
padding: 120px 20px;
}


.section h2 {
font-size: 40px;
margin-bottom: 40px;
}


.highlight {
background: #f9f9f9;
}


.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 40px;
}


.card {
padding: 40px;
border-radius: 20px;
background: #fff;
box-shadow: 0 10px 40px rgba(0,0,0,0.05);
transition: transform .4s ease;
}


.card:hover {
transform: translateY(-10px);
}


/* animações */
.fade-in {
animation: fadeIn 1.2s ease forwards;
}


.reveal {
opacity: 0;
transform: translateY(40px);
}


.reveal.active {
opacity: 1;
transform: translateY(0);
transition: all 1s ease;
}


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