/* ============================================================
   CIFACI — HOMEPAGE ORIGINAL DESIGN / DESKTOP REPAIR
   Keeps the original visual concept shown by the user.
   Only repairs desktop/laptop sizing and positioning.
   ============================================================ */

/* ---------- HERO: NEED -> CIFACI -> CAPABILITY ---------- */
.marketing-hero-grid,
.marketing-hero-grid > *,
.marketing-hero-copy,
.marketing-hero-visual,
.nc-system,
.nc-system > * {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.marketing-hero-visual {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Keep the original horizontal visual on real desktop */
@media (min-width: 1121px) {
  .marketing-hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(500px, .92fr) !important;
    gap: 34px !important;
    align-items: center !important;
  }

  .marketing-hero-visual {
    min-height: 530px !important;
    padding: 28px !important;
  }

  .nc-system {
    display: grid !important;
    width: 100% !important;
    grid-template-columns:
      minmax(105px, 1fr)
      28px
      minmax(140px, 1.16fr)
      28px
      minmax(105px, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 12px !important;
  }

  .nc-pole,
  .nc-center {
    width: 100% !important;
    max-width: 100% !important;
    padding: 17px 9px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  .nc-pole b,
  .nc-center b {
    display: block !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  .nc-pole small,
  .nc-center small {
    display: block !important;
    margin-top: 8px !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .nc-center img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 78px !important;
    max-height: 74px !important;
    object-fit: contain !important;
    margin: 0 auto 8px !important;
  }

  .nc-arrow {
    width: 28px !important;
    min-width: 28px !important;
    text-align: center !important;
    font-size: 25px !important;
    line-height: 1 !important;
    transform: none !important;
    overflow: visible !important;
  }

  .nc-flow {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  .nc-flow span {
    min-width: 0 !important;
    padding: 9px 5px !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .marketing-hero-proof {
    margin-top: 16px !important;
    width: 100% !important;
  }
}

/* Laptop / smaller desktop:
   preserve the original visual, but give it the whole row instead of cropping it */
@media (min-width: 761px) and (max-width: 1120px) {
  .marketing-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .marketing-hero-visual {
    width: min(100%, 860px) !important;
    justify-self: center !important;
    min-height: auto !important;
    padding: 28px !important;
  }

  .nc-system {
    display: grid !important;
    grid-template-columns:
      minmax(135px, 1fr)
      34px
      minmax(170px, 1.15fr)
      34px
      minmax(135px, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .nc-arrow {
    transform: none !important;
    font-size: 27px !important;
  }

  .nc-center img {
    max-width: 90px !important;
    margin: 0 auto 8px !important;
  }

  .nc-flow {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* Phone remains vertical */
@media (max-width: 760px) {
  .nc-system {
    grid-template-columns: 1fr !important;
  }
  .nc-arrow {
    transform: rotate(90deg) !important;
  }
  .nc-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---------- ORIGINAL CIRCULAR NETWORK, FIXED POSITIONS ---------- */
/*
   The original design is kept: CIFACI in the center, 8 nodes around it.
   Instead of CSS angle arithmetic (which caused all nodes to overlap in
   some browsers), each node receives a browser-safe fixed coordinate.
*/
@media (min-width: 761px) {
  .network-ecosystem {
    position: relative !important;
    display: block !important;
    width: min(100%, 980px) !important;
    height: 500px !important;
    min-height: 500px !important;
    margin: 18px auto 34px !important;
    overflow: visible !important;
  }

  .network-center {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 190px !important;
    height: 190px !important;
    margin: 0 !important;
    z-index: 5 !important;
  }

  .network-center img {
    width: 120px !important;
    max-width: 120px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .network-node {
    position: absolute !important;
    width: 176px !important;
    min-height: 68px !important;
    left: auto !important;
    top: auto !important;
    transform: translate(-50%, -50%) !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    padding: 10px 12px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    z-index: 3 !important;
  }

  /* 8 positions around CIFACI — clockwise */
  .network-ecosystem > .network-node:nth-child(2) { left: 50% !important; top: 9% !important; }
  .network-ecosystem > .network-node:nth-child(3) { left: 78% !important; top: 20% !important; }
  .network-ecosystem > .network-node:nth-child(4) { left: 88% !important; top: 50% !important; }
  .network-ecosystem > .network-node:nth-child(5) { left: 78% !important; top: 80% !important; }
  .network-ecosystem > .network-node:nth-child(6) { left: 50% !important; top: 91% !important; }
  .network-ecosystem > .network-node:nth-child(7) { left: 22% !important; top: 80% !important; }
  .network-ecosystem > .network-node:nth-child(8) { left: 12% !important; top: 50% !important; }
  .network-ecosystem > .network-node:nth-child(9) { left: 22% !important; top: 20% !important; }

  .network-node:hover {
    transform: translate(-50%, -50%) translateY(-4px) scale(1.03) !important;
    z-index: 7 !important;
  }

  .partner-logo-zone {
    clear: both !important;
    margin-top: 12px !important;
  }
}

/* Compact laptop orbit */
@media (min-width: 761px) and (max-width: 980px) {
  .network-ecosystem {
    height: 460px !important;
    min-height: 460px !important;
    max-width: 760px !important;
  }

  .network-center {
    width: 165px !important;
    height: 165px !important;
  }

  .network-center img {
    width: 105px !important;
  }

  .network-node {
    width: 150px !important;
    min-height: 62px !important;
    font-size: 12px !important;
  }

  .network-ecosystem > .network-node:nth-child(3),
  .network-ecosystem > .network-node:nth-child(5) { left: 76% !important; }

  .network-ecosystem > .network-node:nth-child(4) { left: 86% !important; }
  .network-ecosystem > .network-node:nth-child(7),
  .network-ecosystem > .network-node:nth-child(9) { left: 24% !important; }
  .network-ecosystem > .network-node:nth-child(8) { left: 14% !important; }
}

/* Mobile keeps the existing simple grid rather than the orbit */
@media (max-width: 760px) {
  .network-ecosystem {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .network-center {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    grid-column: 1 / -1 !important;
    margin: 0 auto 10px !important;
  }

  .network-node {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    min-height: 62px !important;
  }
}

@media (max-width: 520px) {
  .network-ecosystem {
    grid-template-columns: 1fr !important;
  }
}