:root {
  --mx-bg: #f6f8ff;
  --mx-surface: #ffffff;
  --mx-surface-2: #f4f7ff;
  --mx-text: #15162c;
  --mx-text-soft: #5a607c;
  --mx-border: #dfe5ff;
  --mx-accent: #5b6cff;
  --mx-accent-2: #7a3cff;
  --mx-pink: #ec4899;
  --mx-cyan: #38bdf8;
  --mx-lime: #d4ff00;
  --mx-grad: linear-gradient(135deg, #5b6cff 0%, #7a3cff 45%, #ec4899 100%);
  --mx-shadow-sm: 0 6px 16px rgba(76, 91, 190, 0.1);
  --mx-shadow-md: 0 20px 48px rgba(64, 16, 230, 0.14);
  --mx-radius-sm: 10px;
  --mx-radius-md: 16px;
  --mx-radius-lg: 24px;
}

body {
  background: var(--mx-bg);
  color: var(--mx-text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 300;
  border-bottom: 1px solid rgba(89, 111, 255, 0.1);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
}

.site-main {
  max-width: 1200px;
  padding: 1.5rem 1.25rem 2.5rem;
}

.site-main--landing {
  max-width: none;
  margin: 0;
  padding: 0;
}

.site-logo__wordmark {
  text-decoration: none;
}

.flash {
  border: 1px solid transparent;
  box-shadow: var(--mx-shadow-sm);
}

.flash--error {
  background: #fff0f4;
  color: #8a1345;
  border-color: #ffc2da;
}

.flash--success {
  background: #f2fff0;
  color: #1f5f2a;
  border-color: #beedb3;
}

.btn {
  border-radius: 999px;
  border: 1px solid var(--mx-border);
  background: var(--mx-surface);
}

.btn--primary {
  border: none;
  background: var(--mx-grad);
  color: #fff;
}

@media (max-width: 780px) {
  .site-main {
    padding-inline: 0.85rem;
  }
}