#agent-breakout-wrap {
  position: absolute;
  --ab-line-width: 2px;
  width: 100%;
  background: #000;
  overflow: visible;
  z-index: 2;
  left: 0;
}

#agent-breakout-wrap .ab-layer-frame {
  position: relative;
  max-width: 1420px;
  margin: 0 auto;
  padding: 0 0 12px;
}

#agent-breakout-wrap .ab-layer-frame::before {
  content: "";
  position: absolute;
  top: 0;
  right: clamp(8px, 1.8vw, 24px);
  bottom: 0;
  left: clamp(8px, 1.8vw, 24px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 22px;
  pointer-events: none;
}

#agent-breakout-wrap .ab-layer-heading {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 7px 20px 6px;
  border: 1px solid rgba(233, 30, 140, 0.4);
  border-radius: 999px;
  background: rgb(10, 10, 10);
  color: rgba(255, 255, 255, 0.85);
  font-family:
    "EK Modena TRIAL  Bold",
    "EK Modena TRIAL  Bold Placeholder",
    Inter,
    sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow:
    0 0 16px rgba(233, 30, 140, 0.12);
  z-index: 4;
}

#agent-breakout-wrap .ab-c {
  max-width: 1380px;
  margin: 0 auto;
  position: relative;
  padding: 0 clamp(16px, 2.4vw, 30px);
  z-index: 1;
}

#agent-breakout-wrap .ab-w {
  position: relative;
  width: 100%;
  overflow: visible;
}

#agent-breakout-wrap .ab-w svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

#agent-breakout-wrap .ab-c {
  overflow: visible;
}

#agent-breakout-wrap .ab-hero-connector {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: var(--ab-line-width);
  top: 0;
  height: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(233, 30, 140, 0.9) 58%,
    rgba(233, 30, 140, 0.45) 100%
  );
  box-shadow: 0 0 10px rgba(233, 30, 140, 0.35);
  pointer-events: none;
  z-index: 3;
}

#agent-breakout-wrap .ab-w svg path,
#agent-breakout-wrap .ab-w svg line {
  vector-effect: non-scaling-stroke !important;
  stroke-width: var(--ab-line-width) !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes abd {
  to {
    stroke-dashoffset: -20;
  }
}

@keyframes abp {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

#agent-breakout-wrap .abl {
  stroke: rgba(255, 255, 255, 0.35) !important;
  stroke-dasharray: 7 11;
  animation: abd 1.7s linear infinite;
}

#agent-breakout-wrap .abg {
  animation: abp 3s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(233, 30, 140, 0.7));
}

@media (max-width: 809px) {
  #agent-breakout-wrap .ab-layer-frame::before {
    border-radius: 16px;
  }
  #agent-breakout-wrap .ab-layer-heading {
    font-size: 11px;
    letter-spacing: 0.12em;
    padding: 7px 16px 6px;
    top: -14px;
  }
}
