body {
margin:0;
font-family: 'Segoe UI', sans-serif;
background:#0b0f1a;
color:#e5e7eb;
}

.nav {
display:flex;
justify-content:space-between;
padding:15px 30px;
background:#020617;
}

.nav a {
margin:0 10px;
color:#38bdf8;
text-decoration:none;
}

.hero {
text-align:center;
padding:100px 20px;
background:linear-gradient(120deg,#0ea5e9,#9333ea);
animation:fadeIn 2s;
}

.btn {
background:#000;
color:#fff;
padding:10px 20px;
text-decoration:none;
border-radius:5px;
}

.features {
display:flex;
justify-content:space-around;
padding:40px;
}

.catalog {
padding:40px;
text-align:center;
}

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

.card {
background:#020617;
padding:20px;
border-radius:12px;
transition:0.3s;
}

.card:hover {
transform:translateY(-10px) scale(1.05);
box-shadow:0 0 20px #0ea5e9;
}

.contact {
text-align:center;
padding:60px;
}

footer {
text-align:center;
padding:20px;
background:#020617;
}

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