:root{
  --brand: #0EA5E9;
  --brand-dark: #0369A1;
  --brand-soft: #E0F2FE;
  --heading: #0F172A;
  --body: #334155;
  --muted: #64748B;
  --inverse: #FFFFFF;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --shadow-soft: 0 1px 2px rgba(2,6,23,0.04), 0 8px 24px rgba(2,6,23,0.06);
  --shadow-card: 0 2px 8px rgba(2,6,23,0.08), 0 16px 32px rgba(2,6,23,0.08);
  --container: 72rem;
}
.container { max-width: var(--container); margin-left:auto; margin-right:auto; }
.card { background:#fff; border:1px solid #e2e8f0; border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.kpi { text-align:center; padding:0.75rem; border:1px solid #e2e8f0; border-radius: 0.75rem; background:#f8fafc; }
.hero-gradient { background: radial-gradient(1000px 400px at 10% 0%, rgba(14,165,233,.15), transparent), linear-gradient(180deg, #f0f9ff 0%, #fff 100%); }
.btn-primary { background: var(--brand); color:#fff; padding:.8rem 1.2rem; border-radius: .8rem; font-weight:600; display:inline-block }
.btn-primary:hover { background: var(--brand-dark); }
.btn-outline { border:1px solid #cbd5e1; padding:.8rem 1.2rem; border-radius: .8rem; font-weight:600; display:inline-block }
.badge { background: var(--brand-soft); color:#0369A1; padding:.25rem .6rem; border-radius: 999px; border:1px solid #BAE6FD; font-size:.75rem; font-weight:600 }