/* ─── TEAM PAGE ─── */

.team-section { padding-top: clamp(50px,7vw,90px) }

.team-section .sh h1 {
  font-size: clamp(36px,5.5vw,60px);
}

/* ══ GRID ══════════════════════════════ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: var(--max);
  margin: 0 auto 32px;
}

@media(min-width:1025px){
  .team-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
  }
  .team-grid .team-card:nth-child(1){ grid-column: 1 / 3 }
  .team-grid .team-card:nth-child(2){ grid-column: 3 / 5 }
  .team-grid .team-card:nth-child(3){ grid-column: 5 / 7 }
  .team-grid .team-card:nth-child(4){ grid-column: 2 / 4 }
  .team-grid .team-card:nth-child(5){ grid-column: 4 / 6 }
}

@media(min-width:601px) and (max-width:1024px){
  .team-grid{ grid-template-columns: repeat(2,1fr); gap:16px }
}
@media(max-width:600px){
  .team-grid{ grid-template-columns: 1fr; gap:14px }
}

/* ══ CARD ══════════════════════════════ */
.team-card {
  background: #07090f;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  overflow: hidden;
  transition: box-shadow .4s cubic-bezier(.25,.8,.25,1), border-color .3s;
  position: relative;
  cursor: default;
}

/* Left accent strip on hover */
.team-card::before {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: linear-gradient(to bottom, var(--green) 0%, rgba(97,231,134,.25) 100%);
  opacity: 0; transition: opacity .35s;
  z-index: 4;
}

@media(hover:hover) {
  .team-card:hover {
    border-color: rgba(97,231,134,.22);
    box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 36px rgba(97,231,134,.07);
  }
  .team-card:hover::before { opacity: 1 }
  .team-card:hover .team-photo img { transform: scale(1.08) }
  .team-card:hover .team-photo::before { opacity: 1 }
  .team-card:hover .team-info h2 { color: var(--green) }
}

/* ══ PHOTO ══════════════════════════════ */
.team-photo {
  width: 100%;
  height: clamp(340px, 42vw, 520px);
  overflow: hidden;
  position: relative;
  background: #0a0e19;
}

/* Green tint overlay — appears on hover via parent selector above */
.team-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(97,231,134,.1) 0%, transparent 45%);
  opacity: 0;
  transition: opacity .45s;
  pointer-events: none;
  z-index: 2;
}

/* Bottom gradient — opaque at bottom, seamlessly merges into card bg */
.team-photo::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(
    to bottom,
    rgba(7,9,15,0) 0%,
    rgba(7,9,15,.65) 50%,
    rgba(7,9,15,1) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;
  display: block;
  background: #0a0e19;
  transition: transform .6s cubic-bezier(.25,.8,.25,1);
}

/* ══ INFO ═══════════════════════════════ */
.team-info {
  padding: 14px 20px 20px;
  position: relative;
  z-index: 2;
}

.team-info h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.3vw, 18px);
  color: #fff;
  letter-spacing: -.015em;
  margin: 0 0 8px;
  transition: color .25s;
}

/* Role badge */
.team-info span {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(97,231,134,.09);
  border: 1px solid rgba(97,231,134,.2);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--green);
}

.team-info .role-founder {
  background: rgba(97,231,134,.16);
  border-color: rgba(97,231,134,.45);
  color: #7ef5a8;
  box-shadow: 0 0 12px rgba(97,231,134,.12);
}

/* ══ CTA ════════════════════════════════ */
.cta-center {
  text-align: center;
  max-width: var(--max);
  margin: 12px auto 0;
}
.cta-center .btn { padding: 14px 32px; font-size: 15px }

/* ══ RESPONSIVE photo heights ══════════ */
@media(max-width:1024px){
  .team-photo{ height: clamp(280px, 52vw, 400px) }
}
@media(max-width:600px){
  .team-photo{ height: 72vw; max-height: 340px; }
}