:root {
  --brand-accent: #0a4b9c;
}
.topbar {
  border-bottom: 3px solid var(--brand-accent);
}
.site-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1rem;
  margin: 1rem;
  padding: 1.25rem;
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-accent) 20%, #0a0f1f), #0f172a);
  color: #eef2ff;
}
.site-hero h1 { margin: 0 0 .5rem 0; font-size: 2rem; }
.site-hero p { margin: 0; line-height: 1.5; }
.site-hero img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,.28);
}
@media (max-width: 900px) {
  .site-hero { grid-template-columns: 1fr; }
  .site-hero img { height: 200px; }
}