/* platform.html */

.page-hero--media .page-hero-bg img {
  object-position: center 42%;
}

.platform-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 36px; }
.platform-list.four { grid-template-columns: repeat(4, 1fr); }
.platform-list > div { border-top: 1px solid var(--hairline); padding-top: 22px; }
.platform-list h3 { font-size: 17px; margin-bottom: 8px; }
.platform-list p { font-size: 15px; margin: 0; }
.platform-figure { margin: 0 0 56px; }
.platform-figure img { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--hairline); box-shadow: var(--shadow-plate); }
.platform-figure figcaption { margin-top: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--text-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
.platform-figure figcaption .text-link { font-family: var(--font-sans); font-size: 13.5px; }

/* ABN network illustration */
.platform-figure--illus { margin-bottom: 56px; }
.abn-network {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 520;
  min-height: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-plate);
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--surface) 100%);
}
.abn-network-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
  background:
    repeating-linear-gradient(0deg, rgba(22, 75, 199, 0.08) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(22, 75, 199, 0.08) 0 1px, transparent 1px 28px);
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 15%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 15%, transparent 100%);
}
.abn-network-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.abn-network-flows {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .abn-network-flows,
  .abn-mobile-flows { display: none; }
}
.abn-network-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}
.abn-hub {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 168px;
  height: 168px;
  padding: 18px 16px;
  text-align: center;
  background: #fff;
  border: 2px solid rgba(22, 75, 199, 0.22);
  border-radius: 50%;
  box-shadow:
    0 0 0 8px rgba(22, 75, 199, 0.06),
    0 2px 6px rgba(12, 20, 36, 0.05),
    0 20px 48px -20px rgba(12, 20, 36, 0.18);
}
.abn-hub-ring {
  position: absolute;
  inset: -4px;
  border: 1.5px solid rgba(22, 75, 199, 0.4);
  border-radius: 50%;
  pointer-events: none;
  transform-origin: center;
}
.abn-hub-emblem { width: 34px; height: 38px; margin-bottom: 8px; }
.abn-hub-kicker {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.abn-hub-title {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin-top: 3px;
}
.abn-hub-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
}
.abn-hub-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(14, 159, 110, 0.18);
  flex: none;
}

.abn-party {
  --pin-x: 50%;
  --pin-y: 100%;
  --notch: 8px;
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 12px;
  border: none;
  border-radius: 12px;
  min-width: 0;
  width: 178px;
  box-sizing: border-box;
  background:
    radial-gradient(
      circle at var(--pin-x) var(--pin-y),
      transparent 0,
      transparent calc(var(--notch) - 1.5px),
      var(--hairline) calc(var(--notch) - 1.5px),
      var(--hairline) var(--notch),
      #fff var(--notch)
    );
  filter:
    drop-shadow(0 1px 2px rgba(12, 20, 36, 0.05))
    drop-shadow(0 10px 22px rgba(12, 20, 36, 0.12));
}
.abn-party-pin {
  position: absolute;
  left: var(--pin-x);
  top: var(--pin-y);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #164BC7;
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 1.5px rgba(22, 75, 199, 0.35);
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}
.abn-party-emblem { width: 22px; height: 24px; flex: none; }
.abn-party-role {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
}
.abn-party-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-top: 1px;
  line-height: 1.2;
  white-space: nowrap;
}
/* left/top = pin point (matches SVG endpoints); card grows away from the hub */
.abn-party--tl {
  --pin-x: 100%;
  --pin-y: 50%;
  --party-tx: -100%;
  --party-ty: -50%;
  left: 27%;
  top: 29.808%;
  transform: translate(var(--party-tx), var(--party-ty));
}
.abn-party--tr {
  --pin-x: 0%;
  --pin-y: 50%;
  --party-tx: 0%;
  --party-ty: -50%;
  left: 73%;
  top: 29.808%;
  transform: translate(var(--party-tx), var(--party-ty));
}
.abn-party--tc {
  --pin-x: 50%;
  --pin-y: 100%;
  --party-tx: -50%;
  --party-ty: -100%;
  left: 50%;
  top: 19.231%;
  transform: translate(var(--party-tx), var(--party-ty));
}
.abn-party--bl {
  --pin-x: 100%;
  --pin-y: 50%;
  --party-tx: -100%;
  --party-ty: -50%;
  left: 25.5%;
  top: 70.192%;
  transform: translate(var(--party-tx), var(--party-ty));
}
.abn-party--br {
  --pin-x: 0%;
  --pin-y: 50%;
  --party-tx: 0%;
  --party-ty: -50%;
  left: 74.5%;
  top: 70.192%;
  transform: translate(var(--party-tx), var(--party-ty));
}
.abn-party--bc {
  --pin-x: 50%;
  --pin-y: 0%;
  --party-tx: -50%;
  --party-ty: 0%;
  left: 50%;
  top: 80.769%;
  transform: translate(var(--party-tx), var(--party-ty));
}

.abn-party-list { display: contents; }
.abn-mobile-stack { display: contents; }
.abn-mobile-drop,
.abn-mobile-elbow,
.abn-mobile-spine { display: none; }
.abn-mobile-flows { display: none; }

@media (max-width: 920px) {
  .platform-list, .platform-list.four { grid-template-columns: 1fr; }
  .abn-network {
    --abn-spine: rgba(22, 75, 199, 0.5);
    aspect-ratio: auto;
    min-height: auto;
    display: block;
    padding: 0;
    overflow: hidden;
  }
  .abn-network-lines,
  .abn-network-grid { display: none; }
  .abn-mobile-stack {
    --abn-spine-col: 28px;
    --abn-spine-x: 14px;
    --abn-card-gap: 14px;
    --abn-connector-gap: 14px;
    --abn-card-mid: 23px;
    position: relative;
    display: grid;
    grid-template-columns: var(--abn-spine-col) 1fr;
    grid-template-rows: auto 12px 2px auto;
    gap: 0 var(--abn-card-gap);
    width: min(100%, 300px);
    margin: 0 auto;
    padding: 32px 16px 28px;
    box-sizing: border-box;
  }
  .abn-network-core {
    position: relative;
    display: flex;
    justify-content: center;
    grid-column: 1 / -1;
    grid-row: 1;
    width: auto;
    margin: 0;
    z-index: 7;
  }
  .abn-network-core::after { display: none; }
  .abn-hub {
    width: 132px;
    height: 132px;
    padding: 12px 10px;
    margin: 0;
    box-shadow:
      0 0 0 6px rgba(22, 75, 199, 0.06),
      0 2px 6px rgba(12, 20, 36, 0.05),
      0 12px 32px -16px rgba(12, 20, 36, 0.16);
  }
  .abn-hub-ring {
    animation: none;
    opacity: 0.4;
    inset: -2px;
  }
  .abn-hub-emblem { width: 26px; height: 30px; margin-bottom: 5px; }
  .abn-hub-kicker { font-size: 8.5px; }
  .abn-hub-title { font-size: 13.5px; }
  .abn-mobile-drop {
    display: block;
    position: relative;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    width: 2px;
    height: 12px;
    margin-bottom: -1px;
    background: var(--abn-spine);
    overflow: visible;
    z-index: 0;
  }
  .abn-mobile-elbow {
    display: block;
    grid-column: 1 / -1;
    grid-row: 3;
    position: relative;
    height: 2px;
    margin-left: var(--abn-spine-x);
    width: calc(50% - var(--abn-spine-x));
    background: var(--abn-spine);
    overflow: visible;
    z-index: 0;
  }
  .abn-mobile-spine {
    display: block;
    position: relative;
    grid-column: 1;
    grid-row: 3 / 5;
    width: 2px;
    justify-self: center;
    align-self: start;
    height: calc(100% - var(--abn-card-mid));
    margin-top: 0;
    margin-bottom: 0;
    background: var(--abn-spine);
    overflow: visible;
    z-index: 0;
  }
  .abn-mobile-flows {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    overflow: visible;
  }
  .abn-party-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    grid-column: 2;
    grid-row: 4;
    position: relative;
    width: auto;
    margin: 0;
    padding: var(--abn-connector-gap) 0 0;
    box-sizing: border-box;
    z-index: 2;
  }
  .abn-party-list::before,
  .abn-party-list::after { display: none; }
  .abn-party,
  .abn-party--tl,
  .abn-party--tr,
  .abn-party--tc,
  .abn-party--bl,
  .abn-party--br,
  .abn-party--bc {
    --pin-x: 0%;
    --pin-y: 50%;
    --notch: 7px;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    min-width: 0;
    width: 100%;
    max-width: none;
    border: none;
    background:
      radial-gradient(
        circle at var(--pin-x) var(--pin-y),
        transparent 0,
        transparent calc(var(--notch) - 1.5px),
        var(--hairline) calc(var(--notch) - 1.5px),
        var(--hairline) var(--notch),
        #fff var(--notch)
      );
    filter: none;
    box-shadow: 0 1px 2px rgba(12, 20, 36, 0.04), 0 8px 20px -12px rgba(12, 20, 36, 0.14);
    padding: 10px 12px;
    gap: 8px;
    box-sizing: border-box;
    overflow: visible;
    z-index: 2;
  }
  .abn-party::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: calc(var(--abn-spine-col) + var(--abn-card-gap) - var(--abn-spine-x));
    height: 2px;
    background: var(--abn-spine);
    transform: translate(-100%, -50%);
    z-index: 0;
  }
  .abn-party::after { display: none; }
  .abn-party-pin {
    display: block;
    left: var(--pin-x);
    top: var(--pin-y);
    width: 11px;
    height: 11px;
    transform: translate(-50%, -50%);
    z-index: 3;
  }
  .abn-party-emblem { width: 20px; height: 22px; }
  .abn-party-role { font-size: 8.5px; white-space: normal; }
  .abn-party-name { font-size: 13.5px; white-space: normal; }
  .platform-figure--illus.in .abn-party,
  .platform-figure--illus.in .abn-hub {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .abn-hub-ring {
    animation: abn-hub-pulse 2.6s ease-out infinite;
  }
  @keyframes abn-hub-pulse {
    0% {
      transform: scale(1);
      opacity: 0.55;
    }
    100% {
      transform: scale(1.65);
      opacity: 0;
    }
  }
  .abn-hub-dot {
    animation: abn-dot-pulse 1.8s ease-out infinite;
  }
  @keyframes abn-dot-pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(14, 159, 110, 0.45);
      transform: scale(1);
    }
    70% {
      box-shadow: 0 0 0 8px rgba(14, 159, 110, 0);
      transform: scale(1);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(14, 159, 110, 0);
      transform: scale(1);
    }
  }
  .platform-figure--illus.in .abn-party {
    animation: abn-party-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .platform-figure--illus.in .abn-party--tl { animation-delay: 0.12s; }
  .platform-figure--illus.in .abn-party--tr { animation-delay: 0.18s; }
  .platform-figure--illus.in .abn-party--tc { animation-delay: 0.06s; }
  .platform-figure--illus.in .abn-party--bl { animation-delay: 0.24s; }
  .platform-figure--illus.in .abn-party--br { animation-delay: 0.3s; }
  .platform-figure--illus.in .abn-party--bc { animation-delay: 0.36s; }
  .platform-figure--illus.in .abn-hub {
    animation: pp-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes abn-party-in {
    from { opacity: 0; transform: translate(var(--party-tx), var(--party-ty)) translateY(10px); }
    to { opacity: 1; transform: translate(var(--party-tx), var(--party-ty)); }
  }
}

@media (max-width: 920px) and (prefers-reduced-motion: no-preference) {
  .abn-mobile-flow-dot {
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #164BC7;
    opacity: 0;
    offset-path: var(--flow-path);
    offset-distance: 0%;
    offset-rotate: 0deg;
    animation: abn-mobile-hub-flow 5.5s linear infinite;
  }
  @keyframes abn-mobile-hub-flow {
    0% { offset-distance: 0%; opacity: 0; }
    3% { opacity: 0.75; }
    35% { offset-distance: 50%; opacity: 0.75; }
    45% { offset-distance: 50%; opacity: 0.75; }
    65% { offset-distance: 100%; opacity: 0.75; }
    97% { opacity: 0; }
    100% { offset-distance: 100%; opacity: 0; }
  }
  .platform-figure--illus.in .abn-party {
    animation: none;
    opacity: 1;
    transform: none;
  }
}