.ib-b2b-matching {
  position: relative;
  overflow: clip;
  color: #fff;
  background:
    radial-gradient(circle at 12% 15%, rgba(248, 1, 155, .2), transparent 30%),
    radial-gradient(circle at 88% 65%, rgba(118, 23, 232, .18), transparent 34%),
    #07040d;
}

.ib-b2b-matching__head { max-width: 840px; margin: 0 auto 30px; text-align: center; }
.ib-b2b-matching__eyebrow { display: inline-flex; margin-bottom: 10px; color: #ff45b5; font-size: .82rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.ib-b2b-matching__head h2 span { color: #fa2d9c; background: linear-gradient(90deg, #ff2b91, #9d20ff); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.ib-b2b-matching__head p { max-width: 680px; margin: 10px auto 0; color: rgba(255, 255, 255, .74); }

.ib-b2b-matching__loading,
.ib-b2b-matching__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .05);
}
.ib-b2b-matching__loading > i,
.ib-b2b-matching__empty > i { color: #ff45b5; font-size: 1.45rem; }
.ib-b2b-matching__empty p { margin: 3px 0 0; color: rgba(255, 255, 255, .68); }

.ib-b2b-matching__visible {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 1fr);
  gap: 14px;
  overflow-x: auto;
  padding: 4px 3px 18px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #f8019b rgba(255, 255, 255, .08);
}

.ib-b2b-match-card {
  position: relative;
  min-width: 0;
  min-height: 330px;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid rgba(248, 1, 155, .78);
  border-radius: 22px;
  background: #140a1e;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .42), 0 0 18px rgba(248, 1, 155, .13);
}
.ib-b2b-match-card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ib-b2b-match-card::after { content: ''; position: absolute; inset: 28% 0 0; background: linear-gradient(180deg, transparent, rgba(5, 2, 10, .55) 34%, rgba(5, 2, 10, .98)); }
.ib-b2b-match-card__fit { position: absolute; z-index: 2; top: 12px; left: 12px; padding: 7px 11px; border: 1px solid rgba(255, 69, 181, .9); border-radius: 999px; color: #70ffd1; font-size: .88rem; font-weight: 900; background: rgba(7, 4, 13, .82); backdrop-filter: blur(8px); }
.ib-b2b-match-card__body { position: absolute; z-index: 2; inset: auto 0 0; display: grid; gap: 8px; padding: 16px; }
.ib-b2b-match-card__type { color: #ff78c9; font-size: .75rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.ib-b2b-match-card__body strong { color: #fff; font-size: 1.12rem; }
.ib-b2b-match-card__labels { display: flex; flex-wrap: wrap; gap: 7px; }
.ib-b2b-match-card__labels span { max-width: 100%; overflow: hidden; padding: 5px 9px; border: 1px solid rgba(248, 1, 155, .62); border-radius: 999px; color: rgba(255, 255, 255, .9); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; background: rgba(47, 9, 57, .78); }

.ib-b2b-matching__locked-wrap { position: relative; margin-top: 18px; }
.ib-b2b-matching__locked { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ib-b2b-match-locked { min-height: 210px; overflow: hidden; border: 1px solid rgba(248, 1, 155, .36); border-radius: 20px; background: #12091b; }
.ib-b2b-match-locked img { width: 100%; height: 100%; object-fit: cover; filter: blur(12px) brightness(.4); transform: scale(1.09); }
.ib-b2b-matching__locked-copy { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; background: rgba(10, 4, 16, .3); }
.ib-b2b-matching__locked-copy i { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border: 1px solid rgba(255, 69, 181, .72); border-radius: 50%; color: #ff78c9; background: rgba(32, 7, 42, .88); }
.ib-b2b-matching__locked-copy strong { max-width: 360px; color: #fff; font-size: 1.08rem; }
.ib-b2b-matching__cta { margin-top: 30px; text-align: center; }
.ib-b2b-matching__cta button { min-width: min(100%, 420px); }

@media (max-width: 900px) {
  .ib-b2b-matching__visible { grid-auto-columns: minmax(188px, 31vw); margin-right: -20px; }
  .ib-b2b-match-card:nth-child(n+5) { display: none; }
}

@media (max-width: 600px) {
  .ib-b2b-matching__visible { grid-auto-columns: minmax(210px, 72vw); }
  .ib-b2b-match-card { min-height: 350px; }
  .ib-b2b-match-card:nth-child(n+4) { display: none; }
  .ib-b2b-matching__locked { grid-template-columns: repeat(3, minmax(150px, 1fr)); overflow: hidden; }
  .ib-b2b-match-locked { min-height: 190px; }
  .ib-b2b-matching__locked-copy { flex-direction: column; gap: 9px; }
  .ib-b2b-matching__locked-copy strong { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ib-b2b-matching__loading .fa-spin { animation: none; }
}