:root {
  --pg-role-owner: #ffcf5a;
  --pg-role-support: #5ae5ff;
  --pg-role-ts: #9d8bff;
  --pg-role-it: #8dff99;
}

.pg-team-hero {
  max-width: 980px;
  margin: 2.4rem auto 1.8rem;
  padding: 1.2rem 1.2rem 0.4rem;
}

.pg-team-hero h1 {
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: 0.04em;
  color: #f4f7ff;
  text-shadow: 0 0 14px rgba(0, 245, 255, 0.34);
}

.pg-team-hero p {
  max-width: 720px;
  margin-top: 0.75rem;
}

.pg-team-overview {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.85rem;
}

.pg-team-stat {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 0.9rem 0.85rem;
  background: linear-gradient(150deg, rgba(24, 16, 56, 0.92), rgba(12, 8, 30, 0.92));
}

.pg-team-stat strong {
  display: block;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.34rem;
  margin-bottom: 0.15rem;
}

.pg-team-stat span {
  color: var(--pg-muted);
  font-size: 0.92rem;
}

.pg-team-stat.owner strong { color: var(--pg-role-owner); }
.pg-team-stat.support strong { color: var(--pg-role-support); }
.pg-team-stat.ts strong { color: var(--pg-role-ts); }
.pg-team-stat.it strong { color: var(--pg-role-it); }

.pg-role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.pg-role-card {
  border-radius: 14px;
  border: 1px solid rgba(0, 245, 255, 0.25);
  background: linear-gradient(160deg, rgba(23, 16, 54, 0.95), rgba(12, 8, 30, 0.95));
  padding: 1rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.pg-role-card h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 0.65rem;
  gap: 0.8rem;
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
}

.pg-role-badge {
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.16rem 0.54rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.pg-role-badge.owner {
  color: #281600;
  background: linear-gradient(135deg, #ffd67a, #ffbf42);
  border-color: rgba(255, 207, 90, 0.85);
}

.pg-role-badge.support {
  color: #041d24;
  background: linear-gradient(135deg, #8af4ff, #4fdff6);
  border-color: rgba(90, 229, 255, 0.85);
}

.pg-role-badge.ts {
  color: #110a31;
  background: linear-gradient(135deg, #c4b8ff, #9d8bff);
  border-color: rgba(157, 139, 255, 0.85);
}

.pg-role-badge.it {
  color: #0d210f;
  background: linear-gradient(135deg, #bcffc3, #8dff99);
  border-color: rgba(141, 255, 153, 0.85);
}

.pg-role-badge.cta {
  color: #241200;
  background: linear-gradient(135deg, #ffd28c, #ff9f57);
  border-color: rgba(255, 167, 91, 0.9);
}

.pg-role-card-cta {
  border-color: rgba(255, 167, 91, 0.45);
  background: linear-gradient(160deg, rgba(59, 33, 14, 0.95), rgba(20, 12, 28, 0.95));
}

.pg-role-card p {
  margin: 0.45rem 0;
}

.pg-role-members {
  margin-top: 0.85rem;
  margin-bottom: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 0.72rem;
  background: linear-gradient(150deg, rgba(30, 22, 64, 0.88), rgba(14, 10, 34, 0.9));
}

.pg-role-members-title {
  margin: 0 0 0.5rem;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d7e4ff;
}

.pg-member-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.pg-member-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.38rem 0.74rem;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #f5f8ff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: linear-gradient(130deg, rgba(66, 48, 122, 0.96), rgba(34, 25, 74, 0.98));
  box-shadow: 0 0 12px rgba(0, 245, 255, 0.15);
  text-decoration: none;
  cursor: pointer;
}

.pg-member-chip:visited {
  color: inherit;
}

.pg-role-members.owner .pg-member-chip {
  color: #2a1600;
  background: linear-gradient(130deg, #ffe194, #ffc44f);
  border-color: rgba(255, 207, 90, 0.85);
  box-shadow: 0 0 14px rgba(255, 207, 90, 0.35);
}

.pg-role-members.support .pg-member-chip {
  color: #031e24;
  background: linear-gradient(130deg, #a6f8ff, #56e3f8);
  border-color: rgba(90, 229, 255, 0.85);
  box-shadow: 0 0 14px rgba(90, 229, 255, 0.3);
}

.pg-role-members.ts .pg-member-chip {
  color: #1a1139;
  background: linear-gradient(130deg, #d7ccff, #a895ff);
  border-color: rgba(157, 139, 255, 0.9);
  box-shadow: 0 0 14px rgba(157, 139, 255, 0.34);
}

.pg-role-members.it .pg-member-chip {
  color: #0f2b12;
  background: linear-gradient(130deg, #cbffd0, #92ff9f);
  border-color: rgba(141, 255, 153, 0.9);
  box-shadow: 0 0 14px rgba(141, 255, 153, 0.3);
}

.pg-role-members.cta .pg-member-chip {
  color: #301800;
  background: linear-gradient(130deg, #ffe0af, #ffb46d);
  border-color: rgba(255, 167, 91, 0.9);
  box-shadow: 0 0 14px rgba(255, 167, 91, 0.28);
}

.pg-role-points {
  margin-top: 0.65rem;
  color: #c3d0ef;
  font-size: 0.95rem;
}

.pg-role-points p {
  margin: 0.26rem 0;
}

.pg-team-cta {
  display: flex;
  justify-content: center;
}

@media (max-width: 991px) {
  .pg-team-overview {
    flex-wrap: wrap;
  }

  .pg-role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .pg-team-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .pg-role-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 460px) {
  .pg-team-overview {
    grid-template-columns: 1fr;
  }
}