html {
      scroll-behavior: smooth;
    }

    body {
      background: #08090A;
      overflow-x: hidden;
      cursor: none;
    }

    /* =========================
       CUSTOM CURSOR
    ========================== */

    .cursor-dot {
      width: 10px;
      height: 10px;
      background: #E2E8F0;
      border-radius: 999px;
      position: fixed;
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%);
      transition: transform 0.08s ease;
      mix-blend-mode: difference;
    }

    .cursor-outline {
      width: 42px;
      height: 42px;
      border: 1px solid rgba(148, 163, 184, 0.5);
      border-radius: 999px;
      position: fixed;
      pointer-events: none;
      z-index: 9998;
      transform: translate(-50%, -50%);
      transition: all 0.15s ease-out;
    }

    .hover-target:hover ~ .cursor-outline {
      transform: translate(-50%, -50%) scale(1.4);
    }

    /* =========================
       REVEAL ANIMATION
    ========================== */

    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: all 1s ease;
    }

    .reveal.active {
      opacity: 1;
      transform: translateY(0);
    }

    /* =========================
       GLASS EFFECT
    ========================== */

    .glass {
      background: rgba(22, 24, 28, 0.65);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    /* =========================
       NAV HOVER EFFECT
    ========================== */

    .nav-link {
      position: relative;
    }

    .nav-link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -6px;
      width: 0%;
      height: 1px;
      background: #94A3B8;
      transition: width 0.35s ease;
    }

    .nav-link:hover::after {
      width: 100%;
    }

    /* =========================
       3D HOVER
    ========================== */

    .hover-3d {
      transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
      transform-style: preserve-3d;
    }

    .hover-3d:hover {
      transform:
        rotateX(6deg)
        rotateY(-6deg)
        translateY(-4px);

      box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.35),
        0 0 20px rgba(148, 163, 184, 0.08);
    }

    /* =========================
       NO CURSOR MOBILE
    ========================== */

    @media (max-width: 768px) {
      body {
        cursor: auto;
      }

      .cursor-dot,
      .cursor-outline {
        display: none;
      }
    }
/* HIDE SCROLLBAR */

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}