body {
  margin:0;
  font-family: 'Inter', sans-serif;
  background:#02040a;
  color:#e6edf3;
}

/* NAV */
header {
  position:sticky;
  top:0;
  background:rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  padding:15px 5%;
  z-index:1000;
}
nav {
  display:flex;
  justify-content:space-between;
}
nav a {
  color:#fff;
  margin-left:20px;
  text-decoration:none;
}

/* HERO */
.hero {
  padding:120px 20px;
  text-align:center;
  background:linear-gradient(#02040a,#050a1a);
}
.hero h1 {font-size:42px;}
.hero p {max-width:650px;margin:auto;}

/* BUTTON */
.btn {
  display:inline-block;
  padding:14px 28px;
  margin-top:15px;
  background:#fff;
  color:#000;
  border-radius:6px;
  text-decoration:none;
}

/* GRID */
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:25px;
}

/* SECTION */
.section {padding:70px 5%;}

/* CARD */
.card {
  background:#0a0f1f;
  padding:25px;
  border-radius:10px;
}

/* FOOTER */
footer {
  background:#02040a;
  padding:40px;
  font-size:14px;
}

/* MOBILE */
@media(max-width:768px){
.hero h1 {font-size:30px;}
}