/* ============================================================
   HOMEPAGE HERO: THE PLATFORM GRAPHIC (prefix mf-platform)
   Security, Industrial NDT and Medical, each drawn with the product
   scene art (css/product-scenes.css), wired to one software platform.
   Load after mindfox-redesign.css and product-scenes.css.
   The drawings are the finished state: .is-visible is never set here,
   so the product-page entrance animations do not play.
   ============================================================ */

/* The old panel was hidden below 992px. This graphic stays on every width. */
.mf-hero .mf-hero__visual--platform { display: block; min-width: 0; position: relative; z-index: 3; }

.mf-platform__net { container-type: inline-size; position: relative; width: 100%; max-width: 620px; aspect-ratio: 620 / 600; margin: 0 auto; }

.mf-platform__wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.mf-platform__wires path {
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.4;
  stroke-dasharray: 6 5;
}

/* .sc-hero supplies the drawing tokens; these rules undo its page layout. */
.mf-platform__net .mf-platform__node {
  position: absolute;
  width: 46%;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
  text-decoration: none;
}
.mf-platform__net .mf-platform__node--security { left: 0; right: auto; top: 0; }
.mf-platform__net .mf-platform__node--industrial { left: auto; right: 0; top: 0; }
.mf-platform__net .mf-platform__node--medical { left: 27%; right: auto; top: auto; bottom: 0; }

/* cqw here is the node width (.sc-hero is the container): the drawings shrink with the column and stay clear of the platform box. */
.mf-platform__art { display: flex; align-items: center; justify-content: center; width: 100%; height: 65cqw; margin-bottom: 6px; }
.mf-platform__art svg { width: auto; height: 65cqw; max-width: 100%; }
.mf-platform__node .sc-lead,
.mf-platform__node .sc-leads { display: none; }

.mf-platform__name { font-size: 14.5px; font-weight: 700; transition: color 0.2s; }
.mf-platform__node:hover .mf-platform__name,
.mf-platform__node:focus-visible .mf-platform__name { color: var(--orange); }
.mf-platform__desc { font-size: 12px; color: #AEB3BD; }

.mf-platform__core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  width: 124px;
  padding: 9px 6px;
  text-align: center;
  background: #141519;
  border: 1px solid var(--orange);
  border-radius: 10px;
  box-shadow: 0 0 28px rgba(255, 123, 28, 0.28);
}
.mf-platform__core strong { font-size: 14px; color: #fff; }
.mf-platform__core span { font-size: 10.5px; color: #AEB3BD; }

.mf-platform__stats {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mf-platform__stat { display: flex; flex: 1; flex-direction: column; gap: 2px; text-align: center; }
.mf-platform__stat strong { font-size: 20px; font-weight: 800; color: var(--orange); }
.mf-platform__stat span { font-size: 12px; color: #9AA0AC; }

@media (prefers-reduced-motion: no-preference) {
  .mf-platform__wires path { animation: mf-platform-flow 1.4s linear infinite; }
}
@keyframes mf-platform-flow { to { stroke-dashoffset: -22; } }

/* The radar is the backdrop here, so it sits behind the drawings. */
@media (min-width: 993px) {
  .mf-hero .mf-hero__radar { opacity: 0.3; }
}

/* Stacked hero: Security and Industrial side by side, the platform, then Medical. */
@media (max-width: 992px) {
  .mf-platform__net {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px 12px;
    aspect-ratio: auto;
  }
  .mf-platform__wires { display: none; }
  .mf-platform__net .mf-platform__node { position: static; width: auto; }
  .mf-platform__net .mf-platform__node--medical { grid-column: 1 / -1; grid-row: 3; }
  .mf-platform__art,
  .mf-platform__art svg { height: 150px; }
  .mf-platform__core {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    transform: none;
  }
  .mf-platform__core::before,
  .mf-platform__core::after {
    content: "";
    position: absolute;
    left: 50%;
    height: 34px;
    border-left: 1.4px dashed var(--orange);
  }
  .mf-platform__core::before { bottom: 100%; }
  .mf-platform__core::after { top: 100%; }
}

@media (max-width: 480px) {
  .mf-platform__art,
  .mf-platform__art svg { height: 120px; }
  .mf-platform__desc { font-size: 11.5px; }
  .mf-platform__stat strong { font-size: 18px; }
  .mf-platform__stat span { font-size: 11px; }
}