/* Hero Home illustration — dark theme */
.hero-illu {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px; padding: 18px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 13px; overflow: hidden;
}
.hi-win {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: 7px 12px; margin-bottom: 14px;
}
.dots { display:flex; gap:4px; }
.dots i { width:8px; height:8px; border-radius:50%; display:block; }
.dots i:nth-child(1){background:#ef4444}
.dots i:nth-child(2){background:#fbbf24}
.dots i:nth-child(3){background:#22c55e}
.hi-win-title { font-size:11px; font-weight:700; color:rgba(255,255,255,.7); flex:1; }
.hi-live { font-size:10px; font-weight:700; color:#6ee7b7; }

.hi-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.hi-kpi {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 11px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.hi-kpi-lbl { font-size:10px; font-weight:600; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.4px; }
.hi-kpi-val { font-size:18px; font-weight:800; line-height:1.1; }
.hi-up   { font-size:10px; font-weight:700; color:#6ee7b7; }
.hi-warn { font-size:10px; font-weight:700; color:#fcd34d; }

.hi-body { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }

.hi-chart {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px; padding: 12px;
}
.hi-chart-title { font-size:10px; font-weight:700; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px; }

/* SVG bars — scaleY animation via .bar class in illu.css */
.hi-bars-svg { width:100%; height:52px; display:block; overflow:visible; }
.hi-bars-svg rect.bar {
  transform-origin: bottom center;
  transform-box: fill-box;
}
.hi-bar-lbls { display:flex; justify-content:space-between; margin-top:4px; }
.hi-bar-lbls span { font-size:9px; color:rgba(255,255,255,.4); font-weight:600; text-align:center; flex:1; }

.hi-feed {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px; padding: 12px;
}
.hi-feed-title { font-size:10px; font-weight:700; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px; }
.hi-feed p {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; color: rgba(255,255,255,.65);
  padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.05);
  margin: 0;
}
.hi-feed p:last-child { border-bottom: none; }
.hi-feed p b { margin-left:auto; font-weight:700; }
.d-g,.d-b,.d-y { width:6px; height:6px; border-radius:50%; flex-shrink:0; display:inline-block; }
.d-g { background:#22c55e; }
.d-b { background:#00b4d8; }
.d-y { background:#fbbf24; }
.v-green  { color:#6ee7b7; }
.v-cyan   { color:#7dd3e8; }
.v-orange { color:#fcd34d; }

.hi-progs {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px; padding: 12px; margin-bottom: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.hi-prog-row { display:flex; align-items:center; gap:8px; }
.hi-prog-row > span { font-size:10px; color:rgba(255,255,255,.6); font-weight:600; width:120px; flex-shrink:0; }
.hi-prog-track { flex:1; background:rgba(255,255,255,.1); border-radius:99px; height:6px; overflow:hidden; }
/* .pf from illu.css handles animation */
.hi-prog-row > b { font-size:10px; width:28px; text-align:right; }

.hi-footer { display:flex; gap:6px; flex-wrap:wrap; }
.hi-pill {
  font-size:10px; font-weight:700;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.75); padding:3px 10px; border-radius:99px;
}
.hi-new { background:rgba(0,180,216,.2); border-color:rgba(0,180,216,.4); color:#7dd3e8; }