body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:#0b0f0d;
  color:#e9f1ec;
}

.wrap{max-width:1100px;margin:auto;padding:20px}

/* NAV */
.nav{
  background:#070a09;
  border-bottom:1px solid #1a1f1c;
}
.nav-inner{
  display:flex;
  align-items:center;
  padding:15px 0;
}
.brand{
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:900;
}
.logo{
  width:36px;height:36px;
  border-radius:10px;
  background:#3ddc84;
  color:#062;
  display:flex;
  align-items:center;
  justify-content:center;
}
.brand-sub{font-size:12px;color:#aaa}

/* HERO */
.hero{
  background:#111815;
  padding:60px 40px;
  border-radius:18px;
  margin-top:20px;
}
.pill{
  background:#3ddc84;
  color:#062;
  padding:6px 12px;
  border-radius:30px;
  font-size:12px;
  font-weight:900;
}
h1{font-size:48px;margin:20px 0}
h1 span{color:#3ddc84}
.tagline{color:#aaa;max-width:600px}

/* BUTTONS */
.buttons{margin-top:20px}
.btn{
  padding:12px 16px;
  border-radius:12px;
  text-decoration:none;
  font-weight:900;
  margin-right:10px;
  display:inline-block;
}
.btn.solid{background:#3ddc84;color:#062}
.btn.ghost{border:1px solid #333;color:#eee}

/* SECTIONS */
.section{padding:50px 0}
.section.dark{
  background:#0f1412;
  border-radius:18px;
  padding:40px;
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;
}
.card{
  background:#111815;
  border-radius:16px;
  overflow:hidden;
  text-align:center;
}
.card img{
  width:100%;
  height:150px;
  object-fit:cover;
}
.card h3{margin:12px}

/* FOOTER */
.footer{
  text-align:center;
  color:#777;
  padding:30px 0;
}
.big{font-size:22px;color:#3ddc84}