body {
  margin:0;
  font-family: system-ui, sans-serif;
  background:#0b1220;
  color:#e5e7eb;
}

header {
  display:flex;
  justify-content:space-between;
  padding:20px 40px;
  background:#0f172a;
}

.logo {
  font-weight:bold;
}

nav a {
  margin-left:20px;
  text-decoration:none;
  color:#94a3b8;
}

.btn {
  background:#2563eb;
  padding:8px 12px;
  border-radius:6px;
  color:white;
}

.hero {
  text-align:center;
  padding:100px 20px;
}

.cta {
  display:inline-block;
  margin-top:20px;
  padding:10px 20px;
  background:#2563eb;
  color:white;
  border-radius:6px;
  text-decoration:none;
}

.grid {
  display:flex;
  gap:20px;
  padding:40px;
}

.card {
  background:#111827;
  padding:20px;
  border-radius:10px;
  flex:1;
}

.login-box {
  max-width:300px;
  margin:120px auto;
  background:#111827;
  padding:20px;
  border-radius:10px;
}

input, button {
  width:92%;
  padding:10px;
  margin-top:10px;

}

button {
  background:#2563eb;
  color:white;
  border:none;
}

.ok {
  color:#22c55e;
}

.small {
  font-size:12px;
  color:#94a3b8;
}

footer {
  text-align:center;
  padding:20px;
  color:#64748b;
}