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

.fill-icon {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.text-glow {
    text-shadow: 0 0 20px rgba(212, 240, 0, 0.3);
}

.bg-grid {
    background-size: 40px 40px;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

.logo-montserrat {
    font-family: 'Montserrat', sans-serif;
}

.logo-dual {
    font-weight: 600;
}

.logo-software {
    font-weight: 200;
    letter-spacing: 0.2em;
}

@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    }

    .reveal.active {
        opacity: 1;
        transform: translateY(0);
    }

    .stagger-1 { transition-delay: 100ms; }
    .stagger-2 { transition-delay: 200ms; }
    .stagger-3 { transition-delay: 300ms; }

    .connect-line {
        width: 0;
        transition: width 1s ease-out;
        transition-delay: 400ms;
    }

    .connect-line.active {
        width: 100%;
    }
}

.spec-card {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.spec-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px -10px rgba(212, 240, 0, 0.15);
}

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 25s linear infinite;
}

.marquee-container:hover .animate-marquee {
    animation-play-state: paused;
}