.server-strip {
  padding: 36px 0;
  overflow: hidden;
}

.server-strip > p {
  margin: 0 20px 24px;
  text-align: center;
}

.marquee {
  width: 100%;
  overflow: hidden;
}

.marquee + .marquee {
  margin-top: 16px;
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: 24px;
  animation: beacon-server-loop 90s linear infinite;
}

.marquee--right .marquee__track {
  animation-direction: reverse;
}

.server-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 4px 13px;
  flex: 0 0 300px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: var(--panel, #151515);
}

.server-avatar {
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  background: #ffc31c;
  color: #171100;
  font-weight: 800;
}

.server-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-card small {
  color: var(--muted, #b7bbc8);
}

.feature-showcase__visual {
  min-width: 0;
}

.feature-showcase__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

@keyframes beacon-server-loop {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 12px)); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}