:root {
  --brand: #1d4ed8;
  --brand-dark: #1e40af;
  --bg: #f5f8fd;
  --line: #dfe6f2;
}
.site-head { box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.hero { background: linear-gradient(180deg, #eef4ff 0%, #f5f8fd 100%); }
.hero h1 { color: #0f2557; }
.btn-inline { width: auto; padding: 12px 26px; margin-top: 26px; border-radius: 999px; }
.band { background: #0f2557; color: #fff; }
.band-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 26px 20px; text-align: center; }
.band-inner strong { display: block; font-size: 22px; }
.band-inner span { font-size: 13px; color: #b9c8e8; }
.card { border-color: #e3eaf6; box-shadow: 0 2px 10px rgba(29, 78, 216, .04); }
.auth { background: linear-gradient(180deg, #eef4ff 0%, #f5f8fd 100%); }
.auth-card { border-top: 3px solid var(--brand); }
.admin-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.admin-brand .mark { width: 34px; height: 34px; border-radius: 9px; background: var(--brand); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 13px; }
@media (max-width: 640px) { .band-inner { grid-template-columns: repeat(2, 1fr); } }