:root{
  --brand:#0ea5e9; /* sky-500 */
  --dark:#0f172a;  /* slate-900 */
  --light:#f8fafc; /* slate-50 */
  --accent:#22c55e;/* green-500 */
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji';background:var(--light);color:#111}
.navbar{background:#fff; box-shadow:0 6px 24px rgba(15,23,42,.06);}
.hero{
  background: radial-gradient(1200px 500px at 80% -10%, rgba(14,165,233,.25), transparent 60%),
              radial-gradient(1000px 400px at -10% -10%, rgba(34,197,94,.25), transparent 55%),
              linear-gradient(180deg, #fff, #f1f5f9);
  padding: 72px 0 48px;
}
.btn-brand{background:var(--brand); color:#fff; border:none}
.btn-brand:hover{background:#0284c7; color:#fff}
.badge-soft{background:rgba(14,165,233,.12); color:#0369a1; padding:.5rem .75rem; border-radius:9999px; font-weight:600}
.card{border:0; border-radius:1rem; box-shadow:0 8px 40px rgba(2,6,23,.08);}
.card img{border-top-left-radius:1rem; border-top-right-radius:1rem;}
.section{padding:48px 0}
.footer{background:#0b1220; color:#cbd5e1; padding:32px 0}
.searchbar{border-radius:9999px; padding:.85rem 1.25rem; border:1px solid #e2e8f0; width:100%}
.grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.kpi{display:flex; align-items:center; gap:12px; padding:16px; background:#fff; border-radius:1rem; box-shadow:0 8px 24px rgba(2,6,23,.06)}
.kpi .num{font-size:1.25rem; font-weight:800}
.table thead th{background:#f1f5f9}
a{color:#0ea5e9; text-decoration:none}
a:hover{text-decoration:underline}