/* components.css — reusable blocks */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-5);
}

.list {
  list-style: none; padding: 0; margin: 0;
}
.list li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}
.list li:last-child { border-bottom: 0; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

.byline { color: var(--text-dim); font-size: var(--fs-sm); }
.kicker { text-transform: uppercase; letter-spacing: .8px; color: var(--text-dim); font-size: var(--fs-sm); }

.button {
  display:inline-block; padding: 10px 14px; border-radius: 10px;
  background: var(--brand); color: #0a0f20; font-weight: 700; border: 0;
}
.button:hover { filter: brightness(1.05); text-decoration: none; }

.hero {
  display: grid; gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(154,182,255,.07), transparent 40%),
              var(--bg-elev);
}
.hero h1 a { color: var(--text); }