@layer utilities {
    .content-auto {
        content-visibility: auto;
    }

    .text-shadow {
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

    .bg-glass {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .clip-path-slant {
        clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    }

    .hover-lift {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

        .hover-lift:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

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

    .section-fade {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }

        .section-fade.active {
            opacity: 1;
            transform: translateY(0);
        }

    .number-counter {
        transition: all 2s ease-out;
    }
}