:root {
    --primary: #06b6d4;
    --secondary: #10b981;
    --accent: #8b5cf6;
}

body {
    font-family: "Inter", sans-serif;
}

.glass-card {
    background: rgba(17, 24, 39, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.neuro-card {
    background: rgba(17, 24, 39, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.gradient-border {
    background: linear-gradient(
        135deg,
        var(--primary),
        var(--secondary),
        var(--accent)
    );
    padding: 2px;
    border-radius: 12px;
}

.hover-tilt {
    transition: transform 0.3s ease;
}

.hover-tilt:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(5deg);
}

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

@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite alternate;
}

@keyframes pulse-glow {
    from {
        box-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
    }

    to {
        box-shadow: 0 0 20px rgba(6, 182, 212, 0.6);
    }
}

.typewriter {
    overflow: hidden;
    border-right: 2px solid var(--primary);
    white-space: nowrap;
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes blink-caret {
    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: var(--primary);
    }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(17, 24, 39, 0.5);
}

::-webkit-scrollbar-thumb {
    background: rgba(6, 182, 212, 0.5);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(6, 182, 212, 0.8);
}

.contact {
    margin-top: 70px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.register {
    margin-top: 40px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.verify-email {
    margin-top: 20px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.about {
    margin-top: 70px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}