.hex-wrapper {
  position: relative;
  width: 140px;
  height: 160px; /* מעט קטן יותר */
}

/* ----- GLOW BEHIND HEX ----- */
.hex-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 190px;
  height: 190px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(126, 220, 255, 0.82) 0%,
    rgba(126, 220, 255, 0.62) 38%,
    rgba(244, 169, 212, 0.66) 65%,
    rgba(244, 114, 182, 0.5) 78%,
    transparent 93%);
  filter: blur(26px);
  opacity: 1;
  z-index: -1;
  pointer-events: none;
}

/* ----- HEXAGON SHAPE ----- */
.hex {
  width: 138px;
  height: 146px;
  position: relative;
  overflow: visible;

  clip-path: polygon(
    50% 6%,
    90% 30%,
    90% 70%,
    50% 94%,
    10% 70%,
    10% 30%
  );

  background: rgba(236, 72, 153, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  box-shadow:
    rgba(110, 231, 255, 0.9),
    rgba(56, 189, 248, 0.9),
    rgba(238, 148, 194, 0.9),
    rgba(147, 51, 234, 0.9);
}

.hex::after {
  content: "";
  position: absolute;
  inset: -10px;
  background: radial-gradient(circle at 50% 50%,
    rgba(126, 220, 255, 0.6) 0%,
    rgba(126, 220, 255, 0.45) 38%,
    rgba(244, 169, 212, 0.55) 65%,
    rgba(244, 114, 182, 0.45) 78%,
    transparent 93%);
  filter: blur(14px);
  z-index: -2;
  pointer-events: none;
  clip-path: polygon(
    50% 6%,
    90% 30%,
    90% 70%,
    50% 94%,
    10% 70%,
    10% 30%
  );
}

/* ----- HEXAGON SHAPE (IMAGE) ----- */
.hex-img {
  width: 107%;
  height: 107%;
  object-fit: cover;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 950px;
  margin: 0 auto;
  margin-left: 200px;
  column-gap: 360px;
  justify-items: center;
  grid-template-areas:
    "a b c"
    ". d e";
}

/* מיקום גריד */
.team-box:nth-child(1) { grid-area: a; }
.team-box:nth-child(2) { grid-area: b; }
.team-box:nth-child(3) { grid-area: c; }
.team-box:nth-child(4) { grid-area: d; transform: translateX(-270px) translateY(-100px); }
.team-box:nth-child(5) { grid-area: e; transform: translateX(-270px) translateY(-100px); }

.hex-img.roni { width: 130%; height: 130%; transform: translate(2%, 15%); }
.hex-img.niv  { width: 110%; height: 110%; transform: translate(-3%, 10%); }
.hex-img.liri { width: 110%; height: 110%; transform: translate(-5%, 5%); }
.hex-img.nir  { width: 120%; height: 120%; transform: translate(0%,13.9%); }
.hex-img.eyal { object-position: 50% 50%; }

/* ------ MEMBER TEXT BELOW EACH HEX ------ */
.member-info {
  text-align: center;
  margin-top: -2px;
  max-width: 210px;
}

.member-name, .team-name {
  font-size: 18px;
  font-weight: 700;
  color: #636567;
  margin-bottom: 6px;
}

.member-role, .team-role {
  font-size: 15px;
  font-weight: 600;
  color: #6EE7FF;
  margin-bottom: 8px;
}

.member-desc {
  font-size: 15px;
  line-height: 1.45;
  color:  #909193;
  max-width: 220px;
  margin: 0 auto;
}

/* ----- Section Title ----- */
.super-title {
  max-width: 1400px;
  margin: 80px auto 50px; /* slightly larger gap from section start to title */
  font-size: clamp(3rem, 5vw, 4rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #0f172a;
  opacity: 0.95;
  text-align: left;
}



/* Mobile-first overrides for team grid */
@media (max-width: 768px) {
  .team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 20px 18px;
    margin: 0 auto;
    padding: 0 14px;
    max-width: 520px;
    justify-items: center;
  }
  .team-box:nth-child(4),
  .team-box:nth-child(5) {
    transform: none !important;
  }
  .hex-wrapper {
    width: 120px;
    height: 135px;
    transform: scale(0.88);
  }
  .hex {
    width: 115px;
    height: 125px;
  }
  .member-info {
    max-width: 170px;
  }
  .member-name, .team-name {
    font-size: 15px;
  }
  .member-role, .team-role {
    font-size: 13.5px;
  }
  .member-desc {
    font-size: 13.5px;
  }
  .super-title {
    text-align: center;
    margin: 46px auto 28px;
    font-size: clamp(2.2rem, 6.5vw, 2.8rem);
  }
}

@media (max-width: 480px) {
  .team-grid {
    gap: 18px 14px;
    padding: 0 12px;
  }
  .hex-wrapper {
    width: 110px;
    height: 122px;
    transform: scale(0.86);
  }
  .hex {
    width: 106px;
    height: 116px;
  }
  .member-info {
    max-width: 150px;
  }
  .member-name, .team-name { font-size: 14px; }
  .member-role, .team-role { font-size: 12.5px; }
  .member-desc { font-size: 12.5px; }
}

@media (max-width: 360px) {
  .team-grid { gap: 28px; padding: 0 10px; }
  .hex-wrapper { width: 110px; height: 125px; transform: scale(0.88); }
  .hex { width: 105px; height: 115px; }
  .member-info { max-width: 150px; }
  .super-title { font-size: 1.9rem !important; margin: 36px auto 20px; }
}