@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
body {
    background-color: #0A0A0A;
    color: #FFFFFF;
    font-family: "Outfit", sans-serif;
}

.neo-glass {
    background: rgba(30, 30, 30, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36);
}

.neo-liquid {
    position: relative;
    overflow: hidden;
}

.neo-liquid::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(255, 42, 60, 0.15) 0%,
        rgba(255, 42, 60, 0) 70%
    );
    animation: liquid 12s linear infinite;
    z-index: -1;
}

@keyframes liquid {
    0% {
        transform: rotate(0deg) translate(-10%, -10%);
    }
    100% {
        transform: rotate(360deg) translate(10%, 10%);
    }
}

.neo-hover {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.neo-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(255, 42, 60, 0.2);
}

.neo-text-outline {
    text-shadow: -1px -1px 0 #FF2A3C, 1px -1px 0 #FF2A3C, -1px 1px 0 #FF2A3C,
        1px 1px 0 #FF2A3C;
    color: transparent;
}

.neo-grid-pattern {
    background-image: linear-gradient(
            rgba(255, 42, 60, 0.1) 1px,
            transparent 1px
        ),
        linear-gradient(90deg, rgba(255, 42, 60, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
}