.glass-card {
    background: rgba(18, 18, 18, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-card:hover {
    border-color: rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
}

.text-glow {
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

/* Intense Neon Glow for Logos */
.logo-glow {
    transition: all 0.3s ease;
    opacity: 0.8;
    filter: drop-shadow(0 0 0 rgba(0, 255, 255, 0));
    /* Default state */
}

.logo-glow:hover {
    opacity: 1 !important;
    /* Force full visibility */
    transform: scale(1.1);
    /* Multi-layered shadow for solid, intense glow */
    filter: drop-shadow(0 0 2px #00ffff) drop-shadow(0 0 8px #00ffff);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
    /* Ensure visibility if JS fails - fallback strategy not easily possible in pure CSS without impacting animation,
       but we ensure opacity 1 is the default state if no JS acts? No, default is opacity 0.
       We rely on JS.
    */
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
/* Scrollbar Utilities */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}