/* ===================== Systems: custom dashboards =====================
   Systems have nothing to preview in an iframe — the block sells the idea
   with a mock dashboard, then lets the visitor tick the modules they need
   so the enquiry arrives as a concrete list. */
.systems-block[hidden] { display: none; }
.grid[hidden] { display: none; }

.sys-hero {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 34px;
  align-items: center;
  margin: 0 0 52px;
  padding: 34px 30px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: background-color .45s ease, border-color .45s ease;
}
.sys-hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ramp-1), var(--ramp-3), var(--ramp-5));
}
.sys-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 999px;
  margin-bottom: 12px;
}
.sys-hero__title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.3;
}
.sys-hero__desc {
  font-size: .95rem;
  color: var(--ink-soft);
  line-height: 1.75;
  margin: 0 0 18px;
}
.sys-hero__desc strong { color: var(--primary); font-weight: 800; }
.sys-hero__points { display: flex; flex-direction: column; gap: 9px; }
.sys-hero__points li {
  font-size: .88rem;
  color: var(--ink);
  padding-inline-start: 24px;
  position: relative;
}
.sys-hero__points li::before {
  content: '✓';
  position: absolute; inset-inline-start: 0; top: 0;
  color: var(--ramp-3); font-weight: 800;
}

/* ---- Mock dashboard ---- */
.sys-mock {
  border-radius: 14px;
  overflow: hidden;
  background: var(--ramp-1);
  box-shadow: 0 24px 48px -22px var(--shadow-deep);
  border: 1px solid var(--ramp-3);
  direction: rtl;
  min-width: 0;
}
.sys-mock__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: var(--ramp-2);
  border-bottom: 1px solid var(--on-dark-line);
}
.sys-mock__chrome span {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--on-dark-faint);
}
.sys-mock__chrome em {
  margin-inline-start: auto;
  font-style: normal;
  font-size: .68rem;
  color: var(--on-dark-muted);
  direction: ltr;
}
.sys-mock__body { display: grid; grid-template-columns: 116px 1fr; min-height: 300px; }
.sys-mock__side {
  padding: 14px 10px;
  background: var(--ramp-1);
  border-inline-end: 1px solid var(--on-dark-line);
}
.sys-mock__logo {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  color: var(--ramp-5);
  margin-bottom: 12px;
  padding-inline-start: 6px;
}
.sys-mock__side ul { display: flex; flex-direction: column; gap: 4px; }
.sys-mock__side li {
  font-size: .7rem;
  color: var(--on-dark-muted);
  padding: 7px 8px;
  border-radius: 8px;
}
.sys-mock__side li.is-active { background: var(--on-dark-veil); color: var(--on-dark); font-weight: 700; }
.sys-mock__main { padding: 14px; background: var(--ramp-2); display: flex; flex-direction: column; gap: 12px; }
.sys-mock__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sys-mock__kpi {
  background: var(--on-dark-veil);
  border: 1px solid var(--on-dark-line);
  border-radius: 10px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sys-mock__kpi span { font-size: .62rem; color: var(--on-dark-muted); }
.sys-mock__kpi strong { font-size: .95rem; color: var(--on-dark); font-weight: 800; }
.sys-mock__kpi em { font-style: normal; font-size: .6rem; font-weight: 700; }
.sys-mock__kpi em.is-up { color: var(--ramp-5); }
.sys-mock__kpi em.is-down { color: var(--ramp-6); }
.sys-mock__chart {
  background: var(--on-dark-veil);
  border: 1px solid var(--on-dark-line);
  border-radius: 10px;
  padding: 10px;
}
.sys-mock__chart-head { font-size: .64rem; color: var(--on-dark-muted); margin-bottom: 8px; }
.sys-mock__bars { display: flex; align-items: flex-end; gap: 6px; height: 62px; }
.sys-mock__bars i {
  flex: 1;
  height: var(--h);
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--ramp-5), var(--ramp-3));
  transform-origin: bottom;
  animation: sys-bar-grow .7s cubic-bezier(.2, .7, .3, 1) backwards;
}
.sys-mock__bars i:nth-child(2) { animation-delay: .06s; }
.sys-mock__bars i:nth-child(3) { animation-delay: .12s; }
.sys-mock__bars i:nth-child(4) { animation-delay: .18s; }
.sys-mock__bars i:nth-child(5) { animation-delay: .24s; }
.sys-mock__bars i:nth-child(6) { animation-delay: .30s; }
.sys-mock__bars i:nth-child(7) { animation-delay: .36s; }
@keyframes sys-bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.sys-mock__table {
  background: var(--on-dark-veil);
  border: 1px solid var(--on-dark-line);
  border-radius: 10px;
  overflow: hidden;
}
.sys-mock__row {
  display: grid;
  grid-template-columns: 1.4fr .7fr .7fr .8fr;
  gap: 6px;
  align-items: center;
  padding: 7px 10px;
  font-size: .66rem;
  color: var(--on-dark-strong);
  border-bottom: 1px solid var(--on-dark-line);
}
.sys-mock__row:last-child { border-bottom: none; }
.sys-mock__row--head { color: var(--on-dark-faint); font-weight: 700; font-size: .6rem; }
.sys-mock__row .is-low { color: var(--ramp-6); font-weight: 800; }
.sys-mock__ops { display: flex; gap: 5px; justify-content: flex-end; }
.sys-mock__ops b {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: 5px;
  background: var(--on-dark-line);
  font-size: .6rem;
  font-weight: 400;
}

.sys-request {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding: 22px 26px;
  border-radius: var(--radius);
  background: var(--grad-night);
  color: var(--on-dark);
  box-shadow: 0 18px 40px -20px var(--shadow-deep);
}
.sys-request__summary { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sys-request__summary strong { font-size: 1rem; font-weight: 800; }
.sys-request__summary span { font-size: .84rem; color: var(--on-dark-muted); line-height: 1.6; }
.sys-request__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sys-request__actions .btn--outline { border-color: var(--on-dark-line); color: var(--on-dark); }
.sys-request__actions .btn--outline:hover { background: var(--on-dark-veil); color: var(--on-dark); }

@media (prefers-reduced-motion: reduce) {
  .sys-mock__bars i { animation: none; }
}