join {
  position: relative;
  z-index: 1;
  padding: 80px 24px 40px;
}
.join-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.join h2 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: 760px;
  background: linear-gradient(180deg, #ffffff, rgba(255,255,255,0.65));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
}

.perks-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .perks-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .perks-grid { grid-template-columns: repeat(3, 1fr); }
}

.perk {
  padding: 24px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.perk:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.perk-icon {
  font-size: 28px;
  margin-bottom: 14px;
  line-height: 1;
}
.perk h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.perk p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}