Logo Cloud Hero

<!-- Logo Cloud Hero — replace text logos with your <img> sources -->
<section class="nuda-logoc">
  <p class="nuda-logoc__label">Powering teams at</p>
  <div class="nuda-logoc__row">
    <span class="nuda-logoc__logo">◆ ARC</span>
    <span class="nuda-logoc__logo">▲ NUM</span>
    <span class="nuda-logoc__logo">● HUB</span>
    <span class="nuda-logoc__logo">■ STK</span>
  </div>
</section>

/* Logo Cloud Hero
   Greyscale logos that come to color on hover; subtle stagger entrance.
   Customize: --logoc-accent */

.nuda-logoc {
  --logoc-accent: #e4ff54;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 60px 24px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.nuda-logoc__label {
  font: 600 0.75rem ui-sans-serif, system-ui, sans-serif;
  color: #63636e;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}

.nuda-logoc__row {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: center;
}

.nuda-logoc__logo {
  font: 800 1.25rem ui-sans-serif, system-ui, sans-serif;
  color: #a1a1aa;
  filter: grayscale(1);
  opacity: 0.6;
  transition:
    filter 0.3s,
    opacity 0.3s,
    color 0.3s,
    transform 0.25s;
  cursor: pointer;
  animation: nuda-lc-up 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.nuda-logoc__logo:nth-child(1) { animation-delay: 0s; }
.nuda-logoc__logo:nth-child(2) { animation-delay: 0.1s; }
.nuda-logoc__logo:nth-child(3) { animation-delay: 0.2s; }
.nuda-logoc__logo:nth-child(4) { animation-delay: 0.3s; }

.nuda-logoc__logo:hover {
  filter: grayscale(0);
  opacity: 1;
  color: var(--logoc-accent);
  transform: translateY(-2px);
}

@keyframes nuda-lc-up {
  from { opacity: 0;   transform: translateY(8px); }
  to   { opacity: 0.6; transform: translateY(0); }
}

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