body {
  background: #0b0b0b;
  color: #fff;
  font-family: Arial;
}

/* HEADER */
.sd-header {
  text-align: center;
  padding: 50px 20px;
  background: #111;
}

.sd-header h1 {
  color: #ff9933;
}

/* HERO */
.sd-hero {
  text-align: center;
  padding: 70px 20px;
  background: radial-gradient(circle, #1a1a1a, #000);
}

/* SECTIONS */
section {
  padding: 60px 20px;
  text-align: center;
}

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

/* CARD */
.card {
  background: #1a1a1a;
  padding: 20px;
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  transition: 0.3s;
}

.card:hover {
  background: #222;
  transform: translateY(-5px);
}

/* CONCEPT */
.concept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.concept {
  background: #1a1a1a;
  padding: 20px;
  border-radius: 10px;
  color: white;
  text-decoration: none;
}

/* POPULAR */
.sd-popular ul {
  list-style: none;
}

.sd-popular a {
  color: #ff9933;
}

/* QUOTE */
.sd-quote {
  background: #111;
  padding: 50px;
  font-style: italic;
}