/* ============================================================
   VANTAGE POINT — growth pipeline CONVEYOR (leadsify match, LIGHT)
   logos ride in (left, on a rail)  ->  white VP engine (center, overflows)
   ->  white result cards roll out (right).  In the hero pill.
   ============================================================ */
.vp-wrap { position: absolute; inset: 0; z-index: 6; overflow: visible; }
.vp-inner { position: absolute; inset: 0; overflow: hidden; border-radius: 999px; display: grid; grid-template-columns: 1fr 300px 1fr; align-items: center; font-family: "Inter Tight","Inter",system-ui,sans-serif;
  background: linear-gradient(180deg, #f5f6f9 0%, #e9ebf1 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 0 1px rgba(0,0,0,.05); }
.vp-mid { height: 100%; }

/* LEFT — logos travelling in on a rail */
.vp-belt-left { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 18px; overflow: hidden; padding-left: 24px; border-radius: 999px 0 0 999px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 84%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 84%, transparent 100%); }
/* RIGHT — results emerging */
.vp-belt-right { position: relative; height: 100%; display: flex; align-items: center; overflow: hidden; padding-right: 24px; border-radius: 0 999px 999px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%); }

.vp-row { position: relative; display: flex; gap: 16px; width: max-content; will-change: transform; }
.vp-row::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: rgba(20,22,40,.14); z-index: 0; }
.vp-belt-left .vp-row.r1 { animation: vp-conveyor 30s linear infinite; }
.vp-belt-left .vp-row.r2 { animation: vp-conveyor 38s linear infinite; }
.vp-belt-right .vp-row { animation: vp-conveyor 34s linear infinite; }
@keyframes vp-conveyor { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* light chips */
.vp-logo { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(20,22,40,.1); background: #ffffff; white-space: nowrap; flex: none; box-shadow: 0 2px 8px rgba(20,22,40,.06); }
.vp-logo .ic { width: 22px; height: 22px; border-radius: 6px; flex: none; }
.vp-logo .ic.inv { filter: invert(1); }
.vp-logo .nm { font-size: 13px; font-weight: 600; color: #14151c; }

/* white result cards */
.vp-case { width: 224px; flex: none; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(20,22,40,.08); background: #ffffff; box-shadow: 0 4px 16px rgba(20,22,40,.08); }
.vp-case .top { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.vp-case .ic { width: 24px; height: 24px; border-radius: 7px; }
.vp-case .ic.inv { filter: invert(1); }
.vp-case .src { font-size: 12.5px; font-weight: 600; color: #14151c; letter-spacing: -.01em; white-space: nowrap; }
.vp-case .gm { margin-left: auto; width: 22px; height: 18px; flex: none; }
.vp-case h4 { margin: 0 0 5px; font-size: 14px; font-weight: 700; line-height: 1.2; color: #14151c; letter-spacing: -.01em; }
.vp-case .metric { font-size: 12px; font-weight: 600; color: #7c4dff; margin-bottom: 11px; }
.vp-case .ln { height: 7px; border-radius: 4px; background: #eceef3; margin-bottom: 7px; }
.vp-case .ln.s { width: 60%; }
.vp-case .btns { display: flex; gap: 7px; margin-top: 11px; }
.vp-case .btns i { height: 18px; border-radius: 6px; display: block; }
.vp-case .btns .g { width: 52px; background: #e7e9ef; }
.vp-case .btns .c { width: 46px; background: #9ddcff; }

/* CENTER engine — bright white circle, overflows the pill (sits above the clipped belts) */
.vp-engine { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 12; display: flex; align-items: center; justify-content: center; }
.vp-engine .ring { position: relative; width: 360px; height: 360px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(124,77,255,.4) 0%, rgba(90,120,255,.18) 42%, rgba(0,0,0,0) 66%); }
.vp-engine .disc { width: 300px; height: 300px; border-radius: 50%; background: #ffffff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 80px rgba(124,77,255,.45), 0 10px 40px rgba(20,22,40,.18); animation: vp-pulse 3.6s ease-in-out infinite; }
.vp-engine .disc img { width: 188px; height: 188px; object-fit: contain; filter: invert(1); -webkit-mask-image: radial-gradient(52% 52% at 50% 50%, #000 56%, transparent 78%); mask-image: radial-gradient(52% 52% at 50% 50%, #000 56%, transparent 78%); }
@keyframes vp-pulse { 0%,100% { box-shadow: 0 0 70px rgba(124,77,255,.38), 0 10px 40px rgba(20,22,40,.18); } 50% { box-shadow: 0 0 110px rgba(124,77,255,.6), 0 10px 40px rgba(20,22,40,.18); } }

@media (max-width: 820px) {
  .vp-inner { grid-template-columns: 1fr 190px; }
  .vp-belt-right { display: none; }
  .vp-engine .ring { width: 200px; height: 200px; }
  .vp-engine .disc { width: 150px; height: 150px; }
  .vp-engine .disc img { width: 96px; height: 96px; }
}