@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

:root{
 --bg:#0b0b12;
 --card:#151522;
 --blue:#215af2;
 --text:#fff;
}

*{box-sizing:border-box}
body{
 margin:0;
 min-height:100vh;
 background:var(--bg);
 color:var(--text);
 font-family:Inter,sans-serif;
}

.top{
 height:70px;
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:0 40px;
}

.logo{
 font-size:28px;
 font-weight:800;
 color:#215af2;
}

button{
 background:#215af2;
 color:white;
 border:0;
 border-radius:14px;
 padding:12px 20px;
}

main{
 padding:40px;
}

.hero{
 text-align:center;
 padding-top:120px;
}

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

.card,.cards a{
 background:var(--card);
 border-radius:22px;
 padding:25px;
 color:white;
 text-decoration:none;
}