/* ==========================================================================
   home.css — landing page only
   Hero band and the card grid that indexes hosted pages.
   Load after base.css.
   ========================================================================== */

body.home { background: var(--bg-alt); }

/* --- hero ---------------------------------------------------------------- */

.hero {
  background: linear-gradient(135deg, var(--sf-blue-darker) 0%, var(--sf-blue-deep) 55%, var(--sf-blue) 100%);
  color: #fff;
  padding: 56px 0 52px;
  border-bottom: 3px solid var(--sf-blue);
}
.hero-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.hero-brand svg { display: block; flex: 0 0 auto; }
.hero-brand-name {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-cyan);
}
.hero h1 { color: #fff; font-size: 2.125rem; font-weight: 650; margin: 0 0 12px; letter-spacing: -0.015em; }
.hero p { margin: 0; max-width: 640px; font-size: 1.0625rem; color: rgba(255, 255, 255, 0.86); }

/* --- page list -----------------------------------------------------------
   The card grid itself lives in base.css, shared with doc hub pages.
   ------------------------------------------------------------------------- */

.home-main { padding: 44px 0 64px; }
.section-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 18px;
}

/* --- footer -------------------------------------------------------------- */

.home-footer {
  border-top: 1px solid var(--border-strong);
  padding: 28px 0 40px;
  margin-top: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  background: var(--bg);
}
.home-footer p { margin: 0 0 6px; }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 640px) {
  .hero { padding: 40px 0 38px; }
  .hero h1 { font-size: 1.75rem; }
  .home-main { padding: 32px 0 48px; }
}