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

body{
font-family:Arial, Helvetica, sans-serif;
background:#080b0f;
color:#e9edf1;
line-height:1.8;
}


/* Header */

header{
padding:80px 8%;
background:
linear-gradient(135deg,#111820,#080b0f);
border-bottom:1px solid #303840;
}


.logo{
font-size:64px;
font-weight:800;
letter-spacing:14px;
color:#ffffff;
}


header p{
font-size:21px;
color:#b9c2cc;
margin-top:14px;
}



/* Navigation */

nav{
padding:22px 8%;
background:#10151b;
border-bottom:1px solid #303840;
}


nav a{
color:#d8dee5;
text-decoration:none;
margin-right:32px;
font-size:16px;
transition:.3s;
}


nav a:hover{
color:white;
}



/* Sections */

section{
max-width:1200px;
margin:auto;
padding:75px 8%;
}



h1{
font-size:52px;
line-height:1.2;
margin-bottom:30px;
color:white;
}


h2{
font-size:34px;
margin-bottom:30px;
color:white;
}


h3{
font-size:24px;
margin-bottom:18px;
color:white;
}



p{
font-size:19px;
color:#c4ccd5;
margin-bottom:25px;
}



/* Cards */

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


.card{
background:
linear-gradient(145deg,#171d24,#10151b);
border:1px solid #35404b;
padding:38px;
border-radius:12px;
transition:.35s;
}


.card:hover{
transform:translateY(-8px);
border-color:#8b98a8;
}



/* Footer */

footer{
padding:50px;
text-align:center;
background:#10151b;
border-top:1px solid #303840;
color:#aeb7c0;
font-size:16px;
}



/* Responsive */

@media(max-width:700px){

.logo{
font-size:40px;
letter-spacing:7px;
}


h1{
font-size:36px;
}


h2{
font-size:28px;
}


nav a{
display:block;
margin:12px 0;
}

}