:root {
  color-scheme: dark;
}

* {
  font-family: 'Inter', sans-serif;
}

html {
  /* scroll-behavior: smooth; */
}

body {
  background: #020617;
  min-height: 100vh;
  overflow-x: hidden;
}

.glass {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(30px);
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.gradient-text {
  background-image: linear-gradient(90deg, #60a5fa, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.07), transparent 25%),
    radial-gradient(circle at 80% 15%, rgba(59, 130, 246, 0.08), transparent 20%),
    radial-gradient(circle at 50% 80%, rgba(6, 182, 212, 0.05), transparent 20%);
  opacity: 0.8;
}

button,
input,
textarea,
a {
  font: inherit;
}

input,
textarea {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.marquee{
  padding:5px 0;
  overflow:hidden;
  position:relative;
}

.marquee-track{
  display:flex;
  align-items:center;
  gap:20px;
  width:max-content;
  animation:marquee 40s linear infinite;
}

.tech-item{
  flex:none;
  padding:18px 26px;
  border-radius:20px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  font-weight:700;
  font-size:15px;
  letter-spacing:.5px;
  backdrop-filter:blur(12px);
}

.tech-item:hover{
  border-color:#06B6D4;
  transform:translateY(-2px);
  transition:.25s;
}

@keyframes marquee{

  0%{
    transform:translateX(0);
  }

  100%{
    transform:translateX(-50%);
  }

}

/* MOBILE */
@media(max-width:768px){

  .marquee-track{
    animation-duration:24s;
  }

  .tech-item{
    padding:14px 18px;
    font-size:13px;
  }

}