:root {
  --mb-green: #42c98a;
  --mb-blue: #5b8def;
  --mb-ink: #152238;
  --mb-muted: #60708a;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--mb-ink);
  --md-accent-fg-color: var(--mb-green);
  --md-typeset-a-color: #2768bd;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #18283f;
  --md-accent-fg-color: #63dda2;
  --md-typeset-a-color: #8db6ff;
}

.md-header {
  background: linear-gradient(110deg, #14233a 0%, #203b60 55%, #2a7e73 100%);
}

.md-tabs {
  background: rgba(20, 35, 58, .96);
}

.hero {
  padding: 3.4rem 2.2rem 2.8rem;
  margin: -1rem -1rem 2rem;
  border-radius: 0 0 1.25rem 1.25rem;
  background: radial-gradient(circle at 85% 10%, rgba(99, 221, 162, .28), transparent 35%),
              linear-gradient(135deg, #152238 0%, #234b6c 62%, #2b8378 100%);
  color: white;
}

.hero h1, .hero h2, .hero p { color: white; }
.hero h1 { font-size: clamp(2rem, 4vw, 3.25rem); margin-bottom: .65rem; }
.hero p { max-width: 48rem; opacity: .9; font-size: 1.08rem; }

.hero .md-button { margin: .35rem .45rem .2rem 0; }
.hero .md-button--primary { background: var(--mb-green); border-color: var(--mb-green); color: #10241f; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 2rem;
}

.feature-card {
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .85rem;
  background: var(--md-default-bg-color);
  box-shadow: 0 .25rem 1rem rgba(21, 34, 56, .07);
}

.feature-card h3 { margin-top: 0; font-size: 1.05rem; }
.feature-card p { color: var(--mb-muted); font-size: .9rem; margin-bottom: 0; }
[data-md-color-scheme="slate"] .feature-card p { color: #b8c4d7; }

.pill {
  display: inline-block;
  padding: .22rem .62rem;
  border-radius: 99px;
  background: rgba(66, 201, 138, .15);
  color: var(--md-accent-fg-color);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.md-typeset table th, .md-typeset table td { white-space: normal; }
.md-typeset table th { background: rgba(91, 141, 239, .10); }
.md-typeset .admonition { border-radius: .65rem; }

.small-note { color: var(--mb-muted); font-size: .88rem; }
[data-md-color-scheme="slate"] .small-note { color: #b8c4d7; }

@media screen and (max-width: 600px) {
  .hero { padding: 2.4rem 1.35rem 2rem; margin-left: -.6rem; margin-right: -.6rem; }
  .feature-grid { grid-template-columns: 1fr; }
}