* {

box-sizing:border-box;

}



body {


background:#0f1012;

color:#e5e5e5;

font-family:Arial, Helvetica, sans-serif;

letter-spacing:0.05em;

line-height:1.6;

margin:0;


}



.container {


max-width:900px;

margin:80px auto;

padding:0 40px;


}





.top {


display:flex;

justify-content:space-between;

align-items:center;

border-bottom:1px solid #292929;

padding-bottom:25px;


}





.logo {


font-size:24px;

letter-spacing:0.3em;

font-weight:600;


}





nav a {


color:#888;

text-decoration:none;

margin-left:25px;

font-size:13px;


}



nav a:hover {


color:white;


}





.hero {


padding:100px 0 80px;

}



.hero h1 {


font-size:48px;

font-weight:300;

letter-spacing:0.18em;

line-height:1.3;


}



.hero p {


max-width:600px;

color:#999;

font-size:18px;


}





section {


border-top:1px solid #252525;

padding:50px 0;


}



h2 {


font-size:18px;

font-weight:400;

letter-spacing:0.25em;

margin-bottom:30px;


}



.grid {


display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;


}





.card {


border:1px solid #242424;

padding:25px;

transition:.4s;


}



.card:hover {


border-color:#6256a8;


}



.card h3 {


color:#6256a8;

font-weight:400;


}



.card h4 {


font-weight:400;

}



.card p {


color:#999;

font-size:14px;


}





.system p {


border-bottom:1px solid #222;

padding:12px 0;


}



.system span {


float:right;

color:#6256a8;


}





.buttons {


margin-top:40px;


}



.buttons a {


display:inline-block;

border:1px solid #444;

padding:15px 25px;

margin-right:15px;

color:white;

text-decoration:none;

font-size:13px;

transition:.3s;


}



.buttons a:hover {


border-color:#6256a8;

color:#b8afff;


}





footer {


border-top:1px solid #222;

padding-top:30px;

color:#666;

font-size:12px;

text-align:center;


}