.profile-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 20px 16px;
}

.profile-hero__info {
  flex: 1;
  min-width: 0;
}

.profile-hero__name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-hero__name {
  color: $fg;
  font-family: $font-display;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
}

.profile-hero__level {
  padding: 2px 8px;
  border-radius: 6px;
  background: linear-gradient(90deg, $accent 0%, $accent-2 100%);
  color: $primary-on;
  font: 700 10px / 1.2 $font-display;
}

.profile-hero__sub {
  display: block;
  margin-top: 6px;
  color: $fg-2;
  font: 400 12px / 1.4 $font-body;
}

.profile-hero__badges {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.profile-hero__badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: $radius-pill;
  background: rgba(45, 34, 85, 0.4);
  border: 1px solid rgba(216, 180, 255, 0.08);
  color: $fg-2;
  font: 500 10px / 1 $font-body;
}

.profile-hero__badge .icon {
  color: $accent;
}

