
/* Custom Styles for the new landing page design */
body.landing-page-active {
    font-family: 'Heebo', sans-serif;
    background-color: #111827; /* Dark background */
    color: #E5E7EB; /* Light text */
}

/* Custom Styles for the new landing page design */
        body.landing-page-active {
            font-family: 'Heebo', sans-serif;
            background-color: #111827; /* Dark background */
            color: #E5E7EB; /* Light text */
        }
        .gradient-text {
            background: linear-gradient(90deg, #8B5CF6, #3B82F6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .cta-button {
            background: linear-gradient(90deg, #8B5CF6, #6366F1);
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
        }
        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
        }
        .feature-card {
            background-color: #1F2937;
            border: 1px solid #374151;
            transition: all 0.3s ease;
        }
        .feature-card:hover {
            border-color: #8B5CF6;
            transform: translateY(-5px);
        }
        .feature-icon {
            background: linear-gradient(135deg, #8B5CF6, #3B82F6);
        }
        .visual-glow {
            box-shadow: 0 0 40px rgba(139, 92, 246, 0.2), 0 0 15px rgba(59, 130, 246, 0.1);
        }
        .reveal {
            position: relative;
            transform: translateY(100px);
            opacity: 0;
            transition: 1s all ease;
        }
        .reveal.active {
            transform: translateY(0);
            opacity: 1;
        }
        .bg-grid-pattern {
            background-image: linear-gradient(to right, rgba(55, 65, 81, 0.2) 1px, transparent 1px), linear-gradient(to bottom, rgba(55, 65, 81, 0.2) 1px, transparent 1px);
            background-size: 2rem 2rem;
        }
        .monitor-wrapper {
            position: relative;
            max-width: 900px;
            margin: 0 auto;
            padding: 0 1rem;
        }
        .monitor-screen {
            background: #1F2937;
            border: 1rem solid #000;
            border-bottom-width: 2rem;
            border-radius: 1.5rem;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 10px 30px rgba(0,0,0,0.3);
            overflow: hidden;
            position: relative;
            z-index: 1;
        }
        .monitor-stand {
            width: 2rem;
            height: 4rem;
            background: #374151;
            margin: 0 auto;
        }
        .monitor-base {
            width: 12rem;
            height: 0.75rem;
            background: #4B5563;
            margin: 0 auto;
            border-radius: 0.25rem 0.25rem 0 0;
        }
        #video-headline {
            transition: opacity 0.3s ease-in-out;
        }
        #video-headline.fade-out {
            opacity: 0;
        }
        
/* הסתרת הפוטר בטעינה הראשונית והכנתו לאנימציה */
#site-footer {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
}

/* קלאס שנוסיף עם JavaScript כדי להציג את הפוטר */
#site-footer.visible {
    opacity: 1;
    visibility: visible;
}
