:root {
  --bg: #0e0f11;
  --ink: #e9eef3;
  --muted: #b8c2cc;
  --accent: #3ddc97;
  --card: #1a1d21;
}

* { box-sizing: border-box; }

body {
  font-family: "Montserrat", sans-serif;
  background: #000000;
  color: var(--ink);
}

.hero {
  background: linear-gradient(120deg, #0e0f11, #12161c 50%, #0e0f11);
}

.tag {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.section-title {
  font-weight: 800;
  letter-spacing: 0.02em;
}

.code-card, .step-card, .box {
  background: var(--card);
  border: 1px solid #222831;
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.step-card pre, .code-card pre, .box pre {
  background: #0b0d10;
  color: #cde7d8;
  padding: 0.75rem;
  border-radius: 10px;
  font-family: "Source Code Pro", monospace;
  font-size: 0.85rem;
  margin-bottom: 0;
}

.step-num {
  display: inline-block;
  background: var(--accent);
  color: #0e0f11;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

footer {
  border-top: 1px solid #1f242b;
  color: var(--muted);
}