/* Hero tech stack — scrolling logo ribbon (marquee) */

.tech-marquee {
  width: min(1100px, 100%);
  margin: 2.25rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.tech-marquee-row {
  overflow: hidden;
  width: 100%;
}

.tech-marquee-track {
  display: flex;
  width: max-content;
  gap: 2rem;
  align-items: flex-end;
  animation: techMarquee 32s linear infinite;
  will-change: transform;
}

.tech-marquee-row--reverse .tech-marquee-track {
  animation-name: techMarqueeReverse;
  animation-duration: 36s;
}

.tech-marquee:hover .tech-marquee-track {
  animation-play-state: paused;
}

.tech-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: .4rem;
  width: 88px;
  flex: 0 0 auto;
  background: none;
  border: none;
  box-shadow: none;
  transition: transform .25s ease;
}

.tech-item img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  background: none !important;
  filter: drop-shadow(0 2px 4px rgba(15,23,42,.06));
  transition: transform .25s ease, filter .25s ease;
}

.tech-item span {
  font-size: .72rem;
  font-weight: 600;
  color: #64748b;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  transition: color .25s ease;
}

.tech-item:hover {
  transform: translateY(-4px);
}
.tech-item:hover img {
  transform: scale(1.1);
  filter: drop-shadow(0 8px 14px rgba(14,165,233,.16));
}
.tech-item:hover span {
  color: #0f172a;
}

@keyframes techMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes techMarqueeReverse {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@media (max-width: 700px) {
  .tech-item { width: 76px; }
  .tech-item img { width: 38px; height: 38px; }
  .tech-item span { font-size: .65rem; }
  .tech-marquee-track { gap: 1.35rem; animation-duration: 26s; }
  .tech-marquee-row--reverse .tech-marquee-track { animation-duration: 30s; }
}

@media (prefers-reduced-motion: reduce) {
  .tech-marquee-track {
    animation: none !important;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .tech-marquee {
    mask-image: none;
    -webkit-mask-image: none;
  }
}