:root {
  --md-primary-fg-color: #4f46e5;
  --md-accent-fg-color: #6366f1;
}

.md-grid { max-width: 70rem; }

/* --- Hero ------------------------------------------------------------ */
.hero {
  margin: 1rem 0 2rem;
  padding: 2.75rem 2rem;
  border-radius: 1rem;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(99,102,241,.20), transparent 55%),
    radial-gradient(120% 120% at 100% 0%, rgba(168,85,247,.16), transparent 55%),
    linear-gradient(180deg, rgba(79,70,229,.06), transparent);
  border: 1px solid var(--md-default-fg-color--lightest);
}
.hero h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 2.3rem;
  line-height: 1.12;
  margin: 0 0 .6rem;
}
.hero .tagline {
  font-size: 1.02rem;
  color: var(--md-default-fg-color--light);
  max-width: 44rem;
  margin: 0;
}
.hero .cta {
  margin-top: 1.4rem;
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

/* --- Status pills ---------------------------------------------------- */
.pill {
  display: inline-block;
  padding: .12rem .55rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  vertical-align: middle;
  letter-spacing: .01em;
}
.pill-live { background: rgba(16,185,129,.16); color: #059669; }
.pill-wip  { background: rgba(245,158,11,.16); color: #b45309; }
.pill-info { background: rgba(79,70,229,.16); color: #4f46e5; }
[data-md-color-scheme="slate"] .pill-live { color: #34d399; }
[data-md-color-scheme="slate"] .pill-wip  { color: #fbbf24; }
[data-md-color-scheme="slate"] .pill-info { color: #a5b4fc; }

/* Native Material grid cards: subtle lift on hover */
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 6px 22px rgba(79,70,229,.12);
  transform: translateY(-2px);
}