body{

font-family:system-ui;
margin:0;

background:#0f172a;
color:white;

}

.header{

display:flex;
justify-content:space-between;
align-items:center;

padding:20px 40px;

background:#020617;

}

.logo{

font-weight:600;

}

nav a{

margin-left:20px;
text-decoration:none;
color:white;

opacity:0.8;

}

nav a:hover{

opacity:1;

}

.hero{

text-align:center;

padding:140px 20px;

max-width:700px;
margin:auto;

}

.hero h1{

font-size:44px;

margin-bottom:20px;

}

.hero p{

color:#9ca3af;

font-size:18px;

}

.button{

display:inline-block;

margin-top:30px;

padding:12px 24px;

background:#3b82f6;

border-radius:6px;

text-decoration:none;
color:white;

}

section{

padding:70px 20px;

max-width:1000px;
margin:auto;

}

.grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:30px;

margin-top:40px;

}

.card{

background:#020617;

border:1px solid #1f2937;

border-radius:10px;

padding:30px;

text-align:center;

}

.icon{

font-size:32px;

margin-bottom:10px;

}

.card p{

color:#9ca3af;

}

.tech{

display:flex;
flex-wrap:wrap;

gap:15px;

margin-top:20px;

}

.tech span{

background:#020617;

border:1px solid #1f2937;

padding:8px 14px;

border-radius:20px;

}

footer{

text-align:center;

padding:40px;

color:#9ca3af;

}