/* ============================================================
   Service detail pages — Process Mining & Process Orchestration
   (ported from the original *.html <style> blocks; relies on the
    --color-* / --radius-* / --shadow-* vars from art-original.css.
    Shared section styles — benefits grid, approach cards, integration
    badges, breadcrumb — already live in art-crm.css.)
   ============================================================ */

/* ── Hero glow: Process Mining (analytical blue/purple wash) ── */
#mining-hero { position: relative; overflow: hidden; }
#mining-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 55% at 75% 35%, rgba(124,58,237,.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 45% at 85% 70%, rgba(14,165,233,.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
#mining-hero > * { position: relative; z-index: 1; }

/* ── Hero glow: Process Orchestration (purple-led wash) ── */
#orch-hero { position: relative; overflow: hidden; }
#orch-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 55% at 75% 35%, rgba(124,58,237,.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 45% at 85% 70%, rgba(208,44,145,.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
#orch-hero > * { position: relative; z-index: 1; }

/* ── Reusable stacked module visual (hero right column) ── */
.svc-visual {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 420px;
}
.svc-module {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s;
}
.svc-module:hover {
  transform: translateX(6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(124,58,237,.3);
}
.svc-module__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.svc-module__icon svg { width: 22px; height: 22px; color: #fff; }

/* Process Mining icon variants */
.svc-module__icon--discover { background: linear-gradient(135deg, #d02c91, #9b1b6c); }
.svc-module__icon--monitor  { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.svc-module__icon--conform  { background: linear-gradient(135deg, #0ea5e9, #0369a1); }
.svc-module__icon--optimise { background: linear-gradient(135deg, #f59e0b, #d97706); }

/* Process Orchestration icon variants */
.svc-module__icon--people  { background: linear-gradient(135deg, #d02c91, #9b1b6c); }
.svc-module__icon--systems { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.svc-module__icon--devices { background: linear-gradient(135deg, #0ea5e9, #0369a1); }
.svc-module__icon--ai      { background: linear-gradient(135deg, #f59e0b, #d97706); }

.svc-module__label { font-size: 14px; font-weight: 700; color: var(--color-text); margin-bottom: 2px; }
.svc-module__desc  { font-size: 12px; color: var(--color-text-muted); max-width: none; }

/* ── Orchestration vs automation — comparison cards ── */
.compare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
}
.compare-card {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
}
.compare-card--accent {
  border-color: rgba(124,58,237,.35);
  background: linear-gradient(160deg, rgba(124,58,237,.05), rgba(208,44,145,.04));
  box-shadow: var(--shadow-md);
}
.compare-card__kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-text-light);
  margin-bottom: var(--space-sm);
}
.compare-card--accent .compare-card__kicker { color: var(--color-accent); }
.compare-card__title {
  font-size: 22px; font-weight: 700; color: var(--color-text);
  margin-bottom: var(--space-sm); letter-spacing: -0.015em;
}
.compare-card__desc {
  font-size: 15px; color: var(--color-text-muted); line-height: 1.7;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .svc-visual { max-width: 100%; }
}
@media (max-width: 768px) {
  .compare__grid { grid-template-columns: 1fr; }
}