:root {
  --bp-bg: #f5f8ff;
  --bp-surface: #ffffff;
  --bp-ink: #0f172a;
  --bp-muted: #52607a;
  --bp-brand-1: #0a5eb5;
  --bp-brand-2: #0ea5a8;
  --bp-brand-3: #ff8a3d;
  --bp-border: #d5def1;
}

.md-header {
  background: linear-gradient(95deg, var(--bp-brand-1), var(--bp-brand-2));
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.18);
}

.md-tabs {
  background: rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(4px);
}

.md-main {
  background:
    radial-gradient(circle at 10% 10%, rgba(14, 165, 168, 0.12), transparent 34%),
    radial-gradient(circle at 90% 0%, rgba(10, 94, 181, 0.12), transparent 36%),
    var(--bp-bg);
}

.md-typeset .bp-hero {
  background: linear-gradient(145deg, #ffffff, #eef5ff);
  border: 1px solid var(--bp-border);
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  margin: 0 0 1.5rem;
}

.md-typeset .bp-hero h2 {
  margin: 0 0 0.55rem;
}

.md-typeset .bp-subtitle {
  margin: 0;
  color: var(--bp-muted);
}

.md-typeset .bp-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.9rem;
  margin-top: 1rem;
}

.md-typeset .bp-card {
  display: block;
  color: inherit;
  text-decoration: none;
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  border-radius: 14px;
  padding: 0.9rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.md-typeset .bp-card:hover {
  transform: translateY(-2px);
  border-color: var(--bp-brand-2);
  box-shadow: 0 10px 24px rgba(10, 94, 181, 0.15);
}

.md-typeset .bp-card strong {
  color: var(--bp-ink);
  display: block;
  margin-bottom: 0.25rem;
}

.md-typeset .bp-card span {
  color: var(--bp-muted);
  font-size: 0.88rem;
}

.bp-footer {
  margin-top: 2.2rem;
  color: #e9f8ff;
  background:
    radial-gradient(circle at 0% 0%, rgba(14, 165, 168, 0.36), transparent 38%),
    radial-gradient(circle at 100% 0%, rgba(10, 94, 181, 0.36), transparent 42%),
    linear-gradient(105deg, #0a5eb5 0%, #0c76ba 45%, #0ea5a8 100%);
}

.bp-footer__panel {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: 2.1rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 28px;
  padding: 1.45rem 1.5rem;
  margin: 1.3rem 0 0.95rem;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  box-shadow: 0 18px 50px rgba(40, 10, 70, 0.22);
  backdrop-filter: blur(3px);
}

.bp-footer__eyebrow {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 700;
  color: #d9f6ff;
}

.bp-footer__title {
  margin: 0.2rem 0 0.3rem;
  color: #ffffff;
  font-size: clamp(1.4rem, 2vw, 2.05rem);
  line-height: 1.15;
}

.bp-footer__text {
  margin: 0 0 0.55rem;
  color: #d7eef9;
  font-size: 0.95rem;
}

.bp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.bp-footer__subscribe {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 520px;
  margin: 0 0 0.65rem;
}

.bp-footer__subscribe input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(217, 246, 255, 0.5);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  padding: 0.58rem 0.85rem;
  outline: none;
}

.bp-footer__subscribe input::placeholder {
  color: rgba(233, 248, 255, 0.86);
}

.bp-footer__subscribe input:focus {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.bp-footer__subscribe button {
  border: 0;
  border-radius: 999px;
  padding: 0.58rem 1rem;
  background: #e9f8ff;
  color: #0a4e8d;
  font-weight: 700;
  cursor: pointer;
}

.bp-footer__subscribe button:hover {
  background: #ffffff;
}

.bp-footer__hint {
  margin: 0;
  color: #cce9f7;
  font-size: 0.82rem;
}

.bp-footer__heading {
  margin: 0 0 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.9rem;
  color: #ffffff;
  font-weight: 800;
}

.bp-footer__list {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.bp-footer__list a {
  color: #d8f3ff;
  text-decoration: none;
  width: fit-content;
}

.bp-footer__list a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.bp-footer__bar {
  padding: 0.1rem 0 1rem;
}

.bp-footer__bar p {
  margin: 0;
  color: #d4efff;
  text-align: center;
  font-size: 0.9rem;
}

@media (max-width: 980px) {
  .bp-footer__panel {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .bp-footer__panel {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    border-radius: 20px;
    padding: 1rem;
  }

  .bp-footer__subscribe {
    flex-direction: column;
    align-items: stretch;
  }
}