Hero Profile

<div class="nuda-hero">
  <div class="nuda-hero__bg" aria-hidden="true"></div>
  <div class="nuda-hero__avatar">EQ</div>
  <h2 class="nuda-hero__name">Elias Quill</h2>
  <p class="nuda-hero__role">Principal Product Designer</p>
  <div class="nuda-hero__tags">
    <span>San Francisco</span>
    <span>Open to work</span>
  </div>
</div>

/* Hero Profile
   Large profile header with gradient backdrop and gradient text name.
   Customize: --hero-bg, avatar gradient */

.nuda-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 24px 24px;
  background: #0c0c10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  overflow: hidden;
  text-align: center;
  color: #fafafa;
  font-family: system-ui, sans-serif;
  max-width: 340px;
}

.nuda-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 30% 0%, rgba(228, 255, 84, 0.18), transparent 60%),
    radial-gradient(50% 70% at 80% 20%, rgba(157, 109, 255, 0.22), transparent 60%),
    #0c0c10;
  animation: nuda-hero-float 8s ease-in-out infinite alternate;
}

.nuda-hero > *:not(.nuda-hero__bg) { position: relative; z-index: 1; }

.nuda-hero__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: #09090b;
  background: linear-gradient(135deg, #e4ff54, #ff6dd4);
  border: 3px solid #0c0c10;
  box-shadow: 0 8px 24px -8px rgba(228, 255, 84, 0.4);
}

.nuda-hero__name {
  margin: 6px 0 0;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fafafa, #a0a0a8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nuda-hero__role { margin: 0; font-size: 0.85rem; color: #a0a0a8; }

.nuda-hero__tags span {
  font-size: 0.7rem;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #a0a0a8;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

@keyframes nuda-hero-float {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-6px, 4px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-hero__bg { animation: none; }
}