@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .text-shadow {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  .card-hover {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .card-hover:hover {
    transform: translateY(-6px);
    box-shadow: var(--tw-shadow-tech-hover);
  }
  .glass {
    background: rgba(17, 24, 39, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .gradient-text {
    background: linear-gradient(
      90deg,
      #165dff,
      #1cc88a
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .bg-gradient-tech {
    background: linear-gradient(135deg, #111827 0%, #0b1120 100%);
  }
  .bg-grid {
    position: relative;
  }
  .bg-grid::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background-image:
      linear-gradient(rgba(22, 93, 255, 0.1) 1px, transparent 1px),
      linear-gradient(90deg, rgba(22, 93, 255, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: rotate(-5deg);
    animation: gridMove 20s linear infinite;
    z-index: -1;
    pointer-events: none;
  }
  @keyframes gridMove {
    0% {
      transform: rotate(-5deg) translate(0, 0);
    }
    50% {
      transform: rotate(-5deg) translate(-25px, -25px);
    }
    100% {
      transform: rotate(-5deg) translate(0, 0);
    }
  }
}

html,
body {
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
  min-height: 100vh;
}