/* =====================================================
   SEEK — MATCHING / CARDS SECTION (matching.css)
===================================================== */
.match-sec {
  padding: 9rem 5rem; background: var(--cream);
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 4rem; position: relative; overflow: hidden;
}
.match-sec::before {
  content: ''; position: absolute; left: -200px; top: 50%;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(203,154,45,.07), transparent 70%);
  transform: translateY(-50%); pointer-events: none;
}
.match-left { position: relative; z-index: 1; }
.match-left .section-title { margin-top: .8rem; margin-bottom: 1.2rem; }
.match-gold-line { color: var(--gold); }
.match-desc {
  font-size: clamp(.9rem, 1.2vw, 1rem); color: var(--grey);
  font-weight: 500; line-height: 1.75; max-width: 400px; margin-bottom: 2rem;
}

/* Profile Cards Stack */
.match-right {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 360px;
}
.cards-stack { position: relative; width: 320px; height: 320px; }
.profile-card {
  position: absolute; background: var(--white); border-radius: 20px;
  padding: 1.6rem; width: 200px;
  box-shadow: 0 8px 40px rgba(10,10,10,.1), 0 2px 0 rgba(0,0,0,.04);
  text-align: center;
  transition: transform .5s var(--spring), box-shadow .4s;
  cursor: none;
}
.profile-card:hover { box-shadow: 0 20px 60px rgba(10,10,10,.15); }
.pcard-1 { top: 0; left: 0; transform: rotate(-5deg); z-index: 1; }
.pcard-2 { top: 0; right: 0; transform: rotate(5deg); z-index: 1; }
.pcard-3 { bottom: 0; left: 50%; transform: translateX(-50%); z-index: 3; animation: cardFloat 4s ease-in-out infinite; }
.pcard-1:hover { transform: rotate(-2deg) scale(1.04); }
.pcard-2:hover { transform: rotate(2deg) scale(1.04); }
.pcard-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.2rem;
  margin: 0 auto .8rem; color: white;
}
.av-purple { background: #7c5cbf; }
.av-pink   { background: #e85d8a; }
.av-gold   { background: var(--gold); color: var(--black); }
.pcard-name  { font-size: .9rem; font-weight: 800; color: var(--black); margin-bottom: .2rem; }
.pcard-role  { font-size: .72rem; color: var(--grey); font-weight: 600; margin-bottom: .8rem; }
.pcard-match {
  display: inline-block; background: var(--gold); color: var(--black);
  font-size: .7rem; font-weight: 800; letter-spacing: .06em;
  padding: .25rem .75rem; border-radius: 99px;
}
/* Connection orb */
.connect-orb {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-lt), var(--gold));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(203,154,45,.4);
  z-index: 5; font-size: 1.2rem;
  animation: orbPulse 2.5s ease-in-out infinite;
}
.connect-line {
  position: absolute; top: 50%; left: 50%;
  width: 60px; height: 1.5px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform-origin: left center; opacity: .5; pointer-events: none; z-index: 4;
}
.cl-1 { transform: rotate(-30deg); }
.cl-2 { transform: rotate(30deg); }

/* Stats bar */
.stats-sec {
  background: var(--black);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; position: relative;
}
.stats-sec::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(203,154,45,.07), transparent);
}
.stat-card {
  background: var(--off-black); padding: 3rem 2.5rem;
  text-align: center; transition: background .3s; cursor: none;
}
.stat-card:hover { background: #141414; }
.stat-num {
  font-family: 'Nunito', sans-serif; font-weight: 900;
  font-size: clamp(3rem, 4.5vw, 5rem);
  color: var(--white); letter-spacing: -.02em; line-height: 1; margin-bottom: .6rem;
}
.stat-num .acc { color: var(--gold); }
.stat-divider { width: 28px; height: 2px; background: var(--gold); margin: .8rem auto; opacity: .5; }
.stat-lbl {
  font-size: .72rem; color: rgba(255,255,255,.3);
  letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
}