css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


body {
font-family: 'Inter', sans-serif;
background: #020617;
color: #e5e7eb;
scroll-behavior: smooth;
}


section, header {
padding: 5rem 1.5rem;
max-width: 1100px;
margin: auto;
}


h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
h2 { margin-bottom: 1rem; }


.accent { color: #818cf8; }


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


.buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}


.btn {
padding: 0.75rem 1.5rem;
border-radius: 12px;
font-weight: 600;
}

.primary { background: #6366f1; color: white; }
.secondary { background: #111827; color: white; }
.outline { border: 1px solid #374151; }


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


.card {
background: #020617;
border: 1px solid #1f2937;
border-radius: 16px;
padding: 1.5rem;
}


.highlight { text-align: center; font-size: 1.4rem; }
.highlight span { font-size: 0.9rem; color: #9ca3af; }


footer {
text-align: center;
padding: 2rem;
border-top: 1px solid #1f2937;
color: #6b7280;
}


/* Animations */
.fade { opacity: 0; transform: translateY(20px); animation: fadeIn 1s forwards; }
.delay { animation-delay: 0.4s; }
.delay-2 { animation-delay: 0.8s; }


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


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