/* ============================================================
   BusGeriau — marketing pages shared design system
   Conservative financial-grade look.
   Navy chrome, single blue accent, hairline borders.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
  --navy-900: #0a1628;
  --navy-800: #0f1f3a;
  --navy-700: #1a2f4f;
  --navy-100: #e6ebf3;
  --blue-700: #1e40af;
  --blue-600: #2459c9;
  --blue-50:  #eef3fb;
  --ink:      #0b1426;
  --ink-2:    #2c3a52;
  --muted:    #5b6b85;
  --muted-2:  #94a3b8;
  --line:     #e8ecf2;
  --line-2:   #f1f4f8;
  --bg:       #f7f9fc;
  --paper:    #ffffff;
  --ok:       #2f6b4f;
  --ok-bg:    #eef5f0;
  --warn:     #8a6a2a;
  --warn-bg:  #f9f3e6;
  --err:      #a64545;
  --err-bg:   #f9eded;
  --neut:     #475569;
  --neut-bg:  #eef1f5;
  --radius:   10px;
  --radius-lg:14px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

/* ── Brand mark ──────────────────────────────────────── */
.bg-brand {
  font-weight: 700; font-size: 17px; letter-spacing: -.01em;
  color: var(--ink); display: inline-flex; align-items: center;
  gap: 9px; text-decoration: none; line-height: 1;
}
.bg-brand .mark {
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--blue-700); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0; flex-shrink: 0;
}
.bg-brand.on-dark { color: #fff; }
.bg-brand.on-dark .mark { background: #fff; color: var(--navy-900); }
.bg-brand .e- { color: var(--blue-700); }
.bg-brand.on-dark .e- { color: #60a5fa; }

/* ── Layout ──────────────────────────────────────────── */
.bg-wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* ── Topbar ──────────────────────────────────────────── */
.bg-topbar {
  height: 68px; background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
}
.bg-topbar .row {
  height: 100%; display: flex;
  align-items: center; justify-content: space-between;
}
.bg-topbar nav { display: flex; gap: 32px; }
.bg-topbar nav a {
  color: var(--ink-2); font-size: 13.5px; font-weight: 500;
  text-decoration: none; transition: color .15s;
}
.bg-topbar nav a:hover,
.bg-topbar nav a.active { color: var(--blue-700); }
.bg-topbar .cta { display: flex; gap: 10px; align-items: center; }
.bg-topbar .mobile-menu { display: none; background: none; border: none; cursor: pointer; color: var(--ink); font-size: 22px; }

/* ── Buttons ─────────────────────────────────────────── */
.bg-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 8px; font-weight: 600;
  font-size: 13.5px; border: 1px solid transparent; cursor: pointer;
  font-family: inherit; transition: all .15s ease;
  line-height: 1; text-decoration: none;
}
.bg-btn--primary { background: var(--blue-700); color: #fff; }
.bg-btn--primary:hover { background: #16348f; color: #fff; }
.bg-btn--outline { background: var(--paper); color: var(--ink); border-color: var(--line); }
.bg-btn--outline:hover { background: var(--bg); border-color: #d6dde8; color: var(--ink); }
.bg-btn--ghost { background: transparent; color: var(--ink-2); }
.bg-btn--ghost:hover { background: var(--line-2); color: var(--ink); }
.bg-btn--dark { background: var(--ink); color: #fff; }
.bg-btn--dark:hover { background: var(--navy-800); color: #fff; }
.bg-btn--lg { padding: 13px 24px; font-size: 14.5px; border-radius: 10px; }
.bg-btn--block { width: 100%; justify-content: center; }

/* ── Eyebrow label ───────────────────────────────────── */
.bg-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue-700);
  background: var(--blue-50); padding: 6px 14px;
  border-radius: 100px; border: 1px solid #d8e3f5;
}
.bg-eyebrow .dot { width: 5px; height: 5px; background: var(--blue-700); border-radius: 50%; }

/* ── Typography ──────────────────────────────────────── */
.bg-display { font-size: 54px; line-height: 1.07; letter-spacing: -.025em; font-weight: 600; color: var(--ink); margin: 0; }
.bg-h1      { font-size: 34px; line-height: 1.15; letter-spacing: -.02em;  font-weight: 600; color: var(--ink); margin: 0; }
.bg-h2      { font-size: 24px; line-height: 1.25; letter-spacing: -.015em; font-weight: 600; color: var(--ink); margin: 0; }
.bg-lede    { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 0; }

/* ── Status pills ────────────────────────────────────── */
.bg-pill { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 100px; font-size: 11.5px; font-weight: 600; letter-spacing: .005em; }
.bg-pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.bg-pill--ok   { background: var(--ok-bg);   color: var(--ok);   } .bg-pill--ok   .dot { background: #3f9b73; }
.bg-pill--warn { background: var(--warn-bg); color: var(--warn); } .bg-pill--warn .dot { background: #c79a3a; }
.bg-pill--err  { background: var(--err-bg);  color: var(--err);  } .bg-pill--err  .dot { background: #c45b5b; }
.bg-pill--neut { background: var(--neut-bg); color: var(--neut); } .bg-pill--neut .dot { background: #94a3b8; }

/* ── Trust strip ─────────────────────────────────────── */
.bg-trust { padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.bg-trust__label { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 22px; }
.bg-trust__row { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; color: var(--muted); font-weight: 600; font-size: 15px; }
.bg-trust__row span { display: inline-flex; align-items: center; gap: 8px; }

/* ── Footer ──────────────────────────────────────────── */
.bg-footer { padding: 48px 0 36px; background: var(--navy-900); color: #9bb0cf; font-size: 13px; }
.bg-footer .grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 36px; border-bottom: 1px solid var(--navy-700); }
.bg-footer h5 { color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 16px; }
.bg-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.bg-footer a { color: #9bb0cf; text-decoration: none; }
.bg-footer a:hover { color: #fff; }
.bg-footer .meta { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; color: #6b7d99; font-size: 12px; flex-wrap: wrap; gap: 12px; }
.bg-footer .meta .badges { display: flex; gap: 14px; color: #9bb0cf; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
  .bg-wrap { padding: 0 20px; }
  .bg-display { font-size: 34px; }
  .bg-h1 { font-size: 26px; }
  .bg-lede { font-size: 15px; }
  .bg-topbar nav,
  .bg-topbar .cta .bg-btn--ghost { display: none; }
  .bg-topbar .mobile-menu { display: block; }
  .bg-topbar .cta .bg-btn--primary { padding: 8px 14px; font-size: 13px; }
  .bg-footer .grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .bg-trust__row { gap: 24px; font-size: 13px; }
}

@media (max-width: 480px) {
  .bg-footer .grid { grid-template-columns: 1fr; }
  .bg-footer .meta { flex-direction: column; align-items: flex-start; }
}