/* Base Styles & Utilities */
html { scroll-behavior: smooth; }
body { background-color: #ffffff; color: #1E293B; overflow-x: hidden; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #F8FAFC; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* Page Transitions */
.page-section {
    display: none; /* Hidden by default */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.page-section.active {
    display: block; /* Shown when active */
    opacity: 1;
    transform: translateY(0);
}

/* Scroll Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Loader */
#loader {
    position: fixed;
    inset: 0;
    background: white;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
}
.loader-ring {
    width: 80px;
    height: 80px;
    border: 4px solid #F1F5F9;
    border-top: 4px solid #1E293B;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Mockup Devices CSS */
.mockup-laptop {
    background: #F8FAFC;
    border: 8px solid #E2E8F0;
    border-radius: 12px 12px 0 0;
    position: relative;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
.mockup-laptop::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: -10%;
    width: 120%;
    height: 16px;
    background: #CBD5E1;
    border-radius: 0 0 16px 16px;
}

/* Filter buttons active state */
.filter-btn.active {
    background-color: #1E293B;
    color: white;
}

.blob-bg {
    position: absolute;
    filter: blur(80px);
    z-index: -1;
    opacity: 0.6;
}

/* FAQ Styles */
.faq-item.active .faq-answer { display: block; }
.faq-item.active .faq-icon { transform: rotate(180deg); }


/* Smooth Marquee Testimonials */
.testimonialSwiper .swiper-wrapper {
    transition-timing-function: linear !important;
}