/* Global background & glassmorphism helpers */
.glass {
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(100px);
  border: 2px solid rgba(18, 137, 206, 0.12);
}
@keyframes scrollbelt {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Gradient background behind the whole site */
.grad {
  background:
    radial-gradient(1000px 600px at 20% -10%, rgba(63, 140, 255, .25), transparent),
    radial-gradient(800px 500px at 110% 10%, rgba(191, 199, 213, .18), transparent),
    #0B1B2B;
}

/* (Optional) subtle float animation you can apply with class="float" */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.float { animation: float 4s ease-in-out infinite; }

/* You can add more custom CSS tweaks here if needed */
/* Auto-scrolling partners track */
.partners-track {
  width: max-content;
  animation: partners-marquee 28s linear infinite;
}

/* Pause scroll on hover (desktop) so users can click easily */
.partners-track:hover {
  animation-play-state: paused;
}

@keyframes partners-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* 3D button style */
.partner-btn {
  display: inline-block;
  text-decoration: none;
  transform-style: preserve-3d;
}

.partner-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.08), rgba(63,140,255,0.35)),
    radial-gradient(circle at 0 0, rgba(255,255,255,0.15), transparent 55%);
  border: 1px solid rgba(191,199,213,0.5);
  box-shadow:
    0 10px 25px rgba(0,0,0,0.45),
    0 0 18px rgba(63,140,255,0.4);
  transition:
    transform 0.18s ease-out,
    box-shadow 0.2s ease-out,
    border-color 0.2s ease-out,
    background 0.25s ease-out;
}

.partner-btn:hover .partner-inner,
.partner-btn:focus-visible .partner-inner {
  transform: translateY(-4px) translateZ(0) scale(1.03);
  box-shadow:
    0 16px 40px rgba(0,0,0,0.55),
    0 0 24px rgba(63,140,255,0.7);
  border-color: rgba(255,255,255,0.8);
  outline: none;
}

/* Slight tilt on hover for extra 3D feel */
.partner-btn:hover .partner-inner {
  transform: translateY(-4px) translateZ(0) scale(1.03) rotateX(4deg) rotateY(-6deg);
}

/* Logo + Label */
.partner-logo {
  height: 2rem;
  max-width: 3.5rem;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.7));
}

.partner-name {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #BFC7D5;
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .partner-inner {
    padding: 0.5rem 0.9rem;
  }

  .partner-logo {
    height: 1.6rem;
    max-width: 3rem;
  }

  .partner-name {
    display: none; /* only logo on very small devices */
  }

  .partners-track {
    animation-duration: 22s;
  }
}