:root {
  --brand-primary: #2D6CDF;
  --brand-primary-dark: #1E4EC8;
  --brand-primary-light: #E8F0FF;
  --brand-ink: #0F172A;
  --brand-muted: #64748B;
  --brand-border: #E2E8F0;
  --brand-bg: #F8FAFC;

  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: 45,108,223;
  --bs-success: #16A34A;
  --bs-warning: #D97706;
  --bs-danger: #DC2626;
  --bs-info: #0EA5E9;
}

.navbar-brand {
  font-weight: 800;
  letter-spacing: -0.02em;
}
.btn-primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-primary:hover {
  background: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
}
.badge-brand {
  background: var(--brand-primary-light);
  color: var(--brand-primary);
  border: 1px solid var(--brand-border);
}
/* Brand header sizing + subtle sticky polish */
.brand-logo { height: 40px; width: auto; }
@media (max-width: 576px){ .brand-logo { height: 28px; } }

.navbar { transition: box-shadow .2s, backdrop-filter .2s, background-color .2s; }
.navbar.nav-scrolled {
  box-shadow: 0 4px 12px rgba(15,23,42,.06);
  backdrop-filter: saturate(140%) blur(6px);
  background: rgba(255,255,255,.85) !important;
}
/* Light brand tint to echo the landing hero */
.subhero {
  background: linear-gradient(180deg, var(--brand-primary-light) 0%, #ffffff 100%);
}
.brand-logo-horizontal { height: 40px; width: auto; }
.brand-logo-icon { height: 24px; width: auto; }
.brand-logo-text { font-weight: 800; font-size: 1.125rem; letter-spacing: -.02em; }

@media (max-width: 576px){
  .brand-logo-horizontal { height: 28px; }   /* if it ever appears on small screens */
  .brand-logo-icon { height: 22px; }
}
/* Chips */
.chip{
  line-height: 1; padding: .5rem .75rem; border-radius: 9999px;
  border:1px solid #e5e9f2; background:#fff; font-weight:600; font-size:.85rem;
  transition: background-color .15s, border-color .15s, color .15s;
}
.chip:hover{
  background: var(--brand-primary-light);
  border-color: var(--brand-border);
  color: var(--brand-primary);
}

/* Section chrome */
.section-title { font-weight:700; letter-spacing:-.01em; margin-bottom:.75rem; }
.section-sub { color:#6c757d; }

/* Cards */
.feature-card{ border:1px solid #e9ecef; border-radius:.75rem; }
.feature-card .icon{
  width:3rem; height:3rem; border-radius:.75rem;
  display:inline-flex; align-items:center; justify-content:center;
  background:#eef5ff; color:var(--brand-primary);
  font-size:1.25rem; font-weight:700;
}

/* Example result */
.example { border:1px dashed #cdd6e1; border-radius:.75rem; }

/* Footer */
.site-footer { border-top:1px solid #e9ecef; color:#6c757d; }
.brand-logo { height: 40px; width: auto; }
.brand-icon { height: 28px; width: auto; }
.brand-text { font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.btn-outline-secondary{
  color:#334155; border-color:#e2e8f0; background:#fff;
}
.btn-outline-secondary:hover{
  color:#1f2937; border-color:#d1d9e6; background:#eef2f7;
}
section{ scroll-margin-top: 80px; }
/* Defer work for below-the-fold sections */
#how, .site-footer, section.py-5, section.py-5.bg-light {
  content-visibility: auto;
  contain-intrinsic-size: 1px 1000px;
}