/* Base Styles */
body {
    position: relative;
    min-height: 100vh;
}

/* Background Image */
.fixed.inset-0 img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: -1;
}

/* Lazy Loading */
.lazy-load {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.lazy-load.loaded {
    opacity: 1;
}

/* Carousel Styles */
#screenshot-carousel {
    position: relative;
}

#carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-indicator.active {
    background-color: #fbbf24;
}

/* FAQ Styles */
.faq-question {
    cursor: pointer;
}

.faq-question.active i {
    transform: rotate(180deg);
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Section Padding */
section {
    padding: 8rem 0;
}

/* Mobile Menu */
#mobile-menu {
    transition: all 0.3s ease-in-out;
}

#mobile-menu.show {
    display: block;
}

/* Form Styles */
form input,
form textarea {
    background-color: rgba(31, 41, 55, 0.8);
    border-color: rgba(75, 85, 99, 0.8);
    color: white;
}

form input:focus,
form textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px #fbbf24;
    border-color: #fbbf24;
}

/* Card Styles */
.bg-black\/50 {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
}

/* Button Hover Effects */
button:hover {
    transform: translateY(-2px);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    section {
        padding: 4rem 0;
    }
    
    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    h3 {
        font-size: 1.5rem;
    }
}

/* Loading State */
.loading {
    opacity: 0.5;
    pointer-events: none;
}

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

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
    background: #fbbf24;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #f59e0b;
}