/* Homepage diagrams — site tokens; distinct from service octagon heroes */
.hg-scene {
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
  max-width: 100%;
}
.hg-scene--network,
.hg-scene--systems { min-height: 280px; }
.hg-scene--workflow { min-height: 140px; }

.hg-scene .hg-panel {
  fill: rgba(18, 18, 26, 0.9);
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1.2;
}
.hg-scene .hg-panel--blue { stroke: rgba(91, 140, 255, 0.55); }
.hg-scene .hg-panel--violet { stroke: rgba(168, 85, 247, 0.55); }

.hg-scene .hg-title {
  fill: #fff;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.hg-scene .hg-sub {
  fill: var(--mi-muted, #a1a1aa);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 9px;
}
.hg-scene .hg-mono {
  fill: var(--mi-blue, #5b8cff);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hg-scene .hg-path {
  fill: none;
  stroke: rgba(91, 140, 255, 0.42);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hg-scene .hg-path--violet { stroke: rgba(168, 85, 247, 0.45); }
.hg-scene .hg-path-glow {
  fill: none;
  stroke: rgba(91, 140, 255, 0.16);
  stroke-width: 4;
  stroke-linecap: round;
}
.hg-scene .hg-path-glow.hg-path--violet { stroke: rgba(168, 85, 247, 0.16); }

.hg-scene .hg-packet {
  fill: #fff;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(91, 140, 255, 0.9));
}
.hg-scene .hg-packet--violet {
  filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.9));
}

.hg-scene .hg-foot {
  fill: rgba(18, 18, 26, 0.85);
  stroke: rgba(255, 255, 255, 0.1);
}
.hg-scene .hg-hit { fill: transparent; cursor: pointer; }

.hg-scene .hg-node.is-hot .hg-panel { stroke: rgba(255, 255, 255, 0.45); }
.hg-scene .hg-node.is-lit .hg-panel { stroke: rgba(91, 140, 255, 0.9); }
.hg-scene .hg-node.is-lit .hg-panel--violet { stroke: rgba(168, 85, 247, 0.95); }

.hg-scene .hg-assemble {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.hg-scene.is-ready .hg-assemble { opacity: 1; transform: none; }
.hg-scene.is-ready .hg-d1 { transition-delay: 0.04s; }
.hg-scene.is-ready .hg-d2 { transition-delay: 0.1s; }
.hg-scene.is-ready .hg-d3 { transition-delay: 0.16s; }
.hg-scene.is-ready .hg-d4 { transition-delay: 0.22s; }
.hg-scene.is-ready .hg-d5 { transition-delay: 0.28s; }
.hg-scene.is-ready .hg-d6 { transition-delay: 0.34s; }
.hg-scene.is-ready .hg-d7 { transition-delay: 0.4s; }

.hg-scene .hg-draw {
  stroke-dasharray: 8 6;
  stroke-dashoffset: 0;
}
.hg-scene.is-playing .hg-draw {
  animation: hg-dash 1.8s linear infinite;
}
@keyframes hg-dash {
  to { stroke-dashoffset: -28; }
}

/* Workflow rail */
.hg-scene .hg-rail {
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 2;
  stroke-linecap: round;
}
.hg-scene .hg-dot {
  fill: rgba(12, 12, 18, 0.95);
  stroke: #5b8cff;
  stroke-width: 2;
}
.hg-scene .hg-dot--violet { stroke: #a855f7; }
.hg-scene .hg-dot-ring {
  fill: none;
  stroke: rgba(91, 140, 255, 0.25);
  stroke-width: 1.2;
}
.hg-scene .hg-dot-ring--violet { stroke: rgba(168, 85, 247, 0.25); }
.hg-scene .hg-node.is-lit .hg-dot {
  fill: rgba(91, 140, 255, 0.35);
  stroke: #8eb0ff;
}
.hg-scene .hg-node.is-lit .hg-dot--violet {
  fill: rgba(168, 85, 247, 0.35);
  stroke: #c084fc;
}
.hg-scene .hg-node.is-lit .hg-dot-ring {
  stroke: rgba(91, 140, 255, 0.7);
}
.hg-scene .hg-node.is-lit .hg-dot-ring--violet {
  stroke: rgba(168, 85, 247, 0.7);
}
.hg-scene .hg-node.is-complete-mark .hg-dot,
.hg-scene.is-complete .hg-node .hg-dot {
  fill: rgba(91, 140, 255, 0.45);
}
.hg-scene.is-complete .hg-node .hg-dot--violet {
  fill: rgba(168, 85, 247, 0.45);
}

/* Layout wrappers — match light/dark section plates already in site CSS */
.mi-hero__visual {
  border: 1px solid var(--mi-line, rgba(255, 255, 255, 0.1));
  border-radius: var(--mi-radius, 20px);
  background: rgba(12, 12, 18, 0.78);
  backdrop-filter: blur(12px);
  padding: 0.85rem 0.85rem 1rem;
  min-width: 0;
}
.mi-hero__visual .hg-caption {
  margin: 0.65rem 0 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mi-muted, #a1a1aa);
}
.mi-hero__status {
  margin: 0.35rem 0 0;
  color: var(--mi-muted, #a1a1aa);
  font-size: 0.9rem;
}
.mi-hero__status strong {
  color: #fff;
  font-weight: 500;
}
.mi-hero__visual .mi-progress { margin-top: 0.75rem; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mi-platform__visual--hg {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mi-platform__visual--hg .hg-caption {
  margin: 0;
  padding: 0 0.25rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mi-muted, #a1a1aa);
}

.mi-stages-wrap {
  display: grid;
  gap: 1.25rem;
}
.mi-stages-wrap .hg-scene--workflow {
  border: 1px solid var(--mi-line, rgba(255, 255, 255, 0.1));
  border-radius: var(--mi-radius, 20px);
  background: rgba(12, 12, 18, 0.55);
  padding: 0.5rem 0.25rem 0;
}

/* Phase 12 — compact / static-friendly scenes */
.hg-scene--motif,
.hg-scene--cap,
.hg-scene--app,
.hg-scene--industry,
.hg-scene--locale {
  min-height: 0;
  width: 100%;
  height: 100%;
}
/* Motifs / caps / locale stay readable without waiting for IO */
.hg-scene--motif .hg-assemble,
.hg-scene--cap .hg-assemble,
.hg-scene--locale .hg-assemble {
  opacity: 1;
  transform: none;
}
.hg-scene--delivery { min-height: 130px; }
.hg-scene--overview { min-height: 240px; }
.hg-scene--about { min-height: 280px; }

.mi-service-card__art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}
.mi-service-card__art .hg-scene { max-height: 160px; }
.mi-cap-card__art {
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0.4rem;
  background: #09090f;
}
.mi-cap-card__art .hg-scene { height: 100%; }
.mi-app-card__art {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  background: #0a0a10;
  min-height: 180px;
  height: auto;
}
.mi-method-wrap {
  display: grid;
  gap: 1.25rem;
}
.mi-method-wrap .hg-scene--delivery {
  border: 1px solid var(--mi-line, rgba(255, 255, 255, 0.1));
  border-radius: var(--mi-radius, 20px);
  background: rgba(12, 12, 18, 0.55);
  padding: 0.5rem 0.25rem 0.25rem;
}
.mi-services-overview {
  margin-bottom: 1.75rem;
  border: 1px solid var(--mi-line, rgba(255, 255, 255, 0.1));
  border-radius: var(--mi-radius, 20px);
  background: rgba(12, 12, 18, 0.55);
  padding: 0.75rem;
}
.mi-services-overview .hg-caption {
  margin: 0.5rem 0 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mi-muted, #a1a1aa);
}
.mi-industry-viz,
.mi-locale-viz {
  margin: 1.25rem 0 0;
  border: 1px solid var(--mi-line, rgba(255, 255, 255, 0.1));
  border-radius: var(--mi-radius, 20px);
  background: rgba(12, 12, 18, 0.55);
  padding: 0.75rem;
}
.mi-industry-viz .hg-caption,
.mi-locale-viz .hg-caption {
  margin: 0.45rem 0 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mi-muted, #a1a1aa);
}
.mi-about-art .hg-scene--about {
  border-radius: var(--mi-radius, 20px);
}

@media (max-width: 719px) {
  .mi-hero__visual { padding: 0.65rem; }
  .hg-scene .hg-title { font-size: 10px; }
  .hg-scene .hg-sub { font-size: 8px; }
  .hg-scene--overview .hg-title { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .hg-scene .hg-assemble {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hg-scene.is-playing .hg-draw { animation: none; }
  .hg-scene .hg-packet { opacity: 0.55; }
}