:root{
  --brand: #0ea5e9;        /* sky-500 */
  --ink: #0b7285;
}
.hero-about{
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(14,165,233,.12), transparent 60%),
    radial-gradient(1000px 500px at 90% 20%, rgba(14,165,233,.10), transparent 60%);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.badge-brand{ background: var(--brand); }
.section-card{
  border:1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
}
.feature-icon{
  width: 48px; height: 48px;
  display:flex; align-items:center; justify-content:center;
  border-radius: .75rem; background: rgba(14,165,233,.12);
}
.kpi{
  border-radius: 1rem; border:1px dashed rgba(0,0,0,.08);
  padding:1.25rem; text-align:center;
}
.kpi h3{ font-size: clamp(1.5rem, 2.2vw, 2rem); margin:0; }
.kpi p{ margin:0; color: #6c757d; }
@media (prefers-color-scheme: dark){
  .hero-about{ border-bottom-color: rgba(255,255,255,.12); }
  .section-card{ border-color: rgba(255,255,255,.12); }
  .kpi{ border-color: rgba(255,255,255,.18); }
}