.mv-system-explorer {
  position: relative;
  padding: 92px 0;
  overflow: hidden;
  background: #f3f7f6;
  color: #173035;
}

.mv-system-explorer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: #d5e2df;
}

.mv-system-explorer__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .7fr);
  align-items: end;
  gap: 64px;
  margin-bottom: 42px;
}

.mv-system-explorer__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  color: #2d806d;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  text-transform: uppercase;
}

.mv-system-explorer__head h2 {
  max-width: 820px;
  margin: 0;
  color: #173035;
  font-size: 48px;
  line-height: 1.08;
  letter-spacing: 0;
}

.mv-system-explorer__head p {
  margin: 0;
  color: #5e7174;
  font-size: 17px;
  line-height: 1.7;
}

.mv-system-explorer__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(310px, .55fr);
  min-height: 530px;
  border: 1px solid #283b40;
  background: #101c21;
  box-shadow: 0 26px 70px rgba(24, 47, 52, .14);
}

.mv-system-canvas {
  position: relative;
  min-width: 0;
  min-height: 530px;
  padding: 72px 42px 56px;
  overflow: hidden;
  color: #fff;
}

.mv-system-canvas__grid {
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(rgba(138, 201, 187, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138, 201, 187, .16) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 92%);
}

.mv-system-canvas__nodes {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.mv-system-node {
  position: relative;
  display: grid;
  grid-template-columns: 34px 46px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 96px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 6px;
  background: rgba(255, 255, 255, .045);
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .22s ease, background .22s ease, transform .22s ease, box-shadow .22s ease;
}

.mv-system-node:hover,
.mv-system-node:focus-visible,
.mv-system-node.is-active {
  transform: translateY(-4px);
  border-color: #70d6bd;
  outline: 0;
  background: rgba(70, 151, 132, .19);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(112, 214, 189, .12);
}

.mv-system-node::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 10px;
  left: 14px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: #70d6bd;
  transition: transform .22s ease;
}

.mv-system-node.is-active::after,
.mv-system-node:hover::after { transform: scaleX(1); }

.mv-system-node__index {
  color: rgba(255, 255, 255, .42);
  font-size: 11px;
  font-weight: 800;
}

.mv-system-node__icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(112, 214, 189, .34);
  border-radius: 50%;
  background: #17292e;
  color: #77d9c1;
  font-size: 20px;
}

.mv-system-node__label {
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.mv-system-canvas__flow {
  position: absolute;
  inset: 48% 7% auto;
  z-index: 1;
  height: 5px;
  border-radius: 4px;
  background: linear-gradient(90deg, #5cc9e5 0 48%, #77d9c1 48% 70%, #f0a86b 70% 100%);
  opacity: .58;
}

.mv-system-canvas__flow::before,
.mv-system-canvas__flow::after,
.mv-system-canvas__flow span {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 16px #70d6bd;
  animation: mv-system-flow 4.4s linear infinite;
}

.mv-system-canvas__flow::after { animation-delay: -1.45s; }
.mv-system-canvas__flow span:nth-child(1) { animation-delay: -2.9s; }
.mv-system-canvas__flow span:nth-child(2),
.mv-system-canvas__flow span:nth-child(3) { display: none; }

@keyframes mv-system-flow {
  from { left: 0; transform: translate(-50%, -50%); }
  to { left: 100%; transform: translate(-50%, -50%); }
}

.mv-system-canvas__legend {
  position: absolute;
  right: 32px;
  bottom: 24px;
  left: 32px;
  z-index: 2;
  display: flex;
  gap: 22px;
  color: rgba(255, 255, 255, .62);
  font-size: 12px;
}

.mv-system-canvas__legend span { display: inline-flex; align-items: center; gap: 7px; }
.mv-system-dot { width: 8px; height: 8px; border-radius: 50%; }
.mv-system-dot--supply { background: #5cc9e5; }
.mv-system-dot--extract { background: #f0a86b; }

.mv-system-explorer--conditioning .mv-system-canvas__nodes,
.mv-system-explorer--object .mv-system-canvas__nodes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mv-system-explorer--conditioning .mv-system-canvas__flow {
  inset: 15% 12% 18%;
  width: auto;
  height: auto;
  border: 3px solid #5cc9e5;
  background: transparent;
}

.mv-system-explorer--conditioning .mv-system-canvas__flow::before,
.mv-system-explorer--conditioning .mv-system-canvas__flow::after,
.mv-system-explorer--conditioning .mv-system-canvas__flow span { display: none; }

.mv-system-explorer--object .mv-system-canvas {
  background: linear-gradient(145deg, #102126, #1a3035);
}

.mv-system-explorer--object .mv-system-node {
  min-height: 150px;
  align-content: center;
  background: rgba(255, 255, 255, .055);
}

.mv-system-explorer--object .mv-system-canvas__flow { top: 50%; }

.mv-system-explorer__details {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 42px 36px 34px;
  border-left: 1px solid rgba(255, 255, 255, .14);
  background: #f8fbfa;
  color: #173035;
}

.mv-system-explorer__hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 34px;
  color: #6a7c7f;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.mv-system-detail { animation: mv-detail-in .25s ease both; }
.mv-system-detail[hidden] { display: none; }

@keyframes mv-detail-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.mv-system-detail__icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 22px;
  place-items: center;
  border-radius: 50%;
  background: #dff2ed;
  color: #26735f;
  font-size: 25px;
}

.mv-system-detail h3 {
  margin: 0 0 16px;
  color: #173035;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: 0;
}

.mv-system-detail p {
  margin: 0 0 26px;
  color: #53676a;
  font-size: 15px;
  line-height: 1.7;
}

.mv-system-detail__check {
  padding: 18px 0 0 18px;
  border-top: 1px solid #d8e4e1;
  border-left: 3px solid #5ebda5;
}

.mv-system-detail__check span {
  display: block;
  margin-bottom: 7px;
  color: #2d806d;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.mv-system-detail__check strong {
  display: block;
  color: #263e43;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.55;
}

.mv-system-explorer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  margin-top: auto;
  padding: 12px 16px;
  border: 1px solid #2f806d;
  border-radius: 5px;
  background: #2f806d;
  color: #fff;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
}

.mv-system-explorer__cta:hover,
.mv-system-explorer__cta:focus-visible { background: #236c5b; color: #fff; }

@media (max-width: 991px) {
  .mv-system-explorer__head { grid-template-columns: 1fr; gap: 20px; }
  .mv-system-explorer__layout { grid-template-columns: 1fr; }
  .mv-system-explorer__details { min-height: 410px; border-top: 1px solid #d5e2df; border-left: 0; }
}

@media (max-width: 767px) {
  .mv-system-explorer { padding: 62px 0; }
  .mv-system-explorer__head { margin-bottom: 30px; }
  .mv-system-explorer__head h2 { font-size: 34px; }
  .mv-system-explorer__head p { font-size: 15px; }
  .mv-system-canvas { min-height: auto; padding: 30px 16px 58px; }
  .mv-system-canvas__nodes,
  .mv-system-explorer--conditioning .mv-system-canvas__nodes,
  .mv-system-explorer--object .mv-system-canvas__nodes { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mv-system-node,
  .mv-system-explorer--object .mv-system-node {
    grid-template-columns: 30px 40px minmax(0, 1fr);
    min-height: 92px;
    padding: 12px 10px;
  }
  .mv-system-node__icon { width: 40px; height: 40px; font-size: 18px; }
  .mv-system-node__label { font-size: 12px; }
  .mv-system-canvas__flow { display: none; }
  .mv-system-canvas__legend { right: 16px; bottom: 20px; left: 16px; }
  .mv-system-explorer__details { min-height: 430px; padding: 30px 24px; }
  .mv-system-detail h3 { font-size: 27px; }
}

@media (max-width: 420px) {
  .mv-system-explorer__head h2 { font-size: 31px; }
  .mv-system-node { grid-template-columns: 1fr; justify-items: start; min-height: 116px; }
  .mv-system-node__index { position: absolute; top: 10px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .mv-system-canvas__flow::before,
  .mv-system-canvas__flow::after,
  .mv-system-canvas__flow span,
  .mv-system-detail { animation: none; }
  .mv-system-node { transition: none; }
}