@font-face {
  font-family: "Sora";
  src: url("../fonts/Sora[wght].woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
}

:focus-visible {
  outline: 3px solid #06b6d4;
  outline-offset: 3px;
}
.hero-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black 38%, transparent 88%);
}
.product-glow::before {
  content: "";
  position: absolute;
  inset: -25% auto auto 58%;
  width: 23rem;
  height: 23rem;
  border-radius: 9999px;
  background: var(--product-glow);
  filter: blur(74px);
  opacity: 0.14;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}