body {
    background-color: #000000;
    color: #000000;
}


.glass-panel {
    background: rgba(24, 24, 27, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-nav {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.grid-bg {
    background-size: 40px 40px;
    mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
}

/* Custom Scrollbar for the 'editor' look */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 3px;
}

.invisible {
    visibility: hidden !important;
}

.font-jakarta {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.font-geist {
    font-family: 'Geist', sans-serif !important;
}

@keyframes infinite-scroll {
    0% {
        transform: translateX(0);
    }

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

.animate-infinite-scroll {
    animation: infinite-scroll 40s linear infinite;
}

/* Pause animation on hover for better UX */
.group:hover .animate-infinite-scroll {
    animation-play-state: paused;
}

.testimonial-card {
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), opacity 500ms ease, box-shadow 500ms ease;
    transform-origin: center center;
    will-change: transform, box-shadow, opacity;
}

@keyframes float {
    0% {
        transform: translateY(0px) rotateX(0deg) rotateY(0deg);
    }

    50% {
        transform: translateY(-10px) rotateX(2deg) rotateY(2deg);
    }

    100% {
        transform: translateY(0px) rotateX(0deg) rotateY(0deg);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Custom perspective classes for the 3D mockup feel */
.perspective-1000 {
    perspective: 1000px;
}

.preserve-3d {
    transform-style: preserve-3d;
}

.rotate-x-60 {
    transform: rotateX(60deg);
}

@keyframes fadeSlideIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0px);
    }
}