/* Scrollbar fix – wymagane reguły, bo przez scroll reveal animations tworzy się błąd - divy mają scrollbar. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { 
    overflow-x: clip; 
    scroll-behavior: smooth;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative;
    left: 0;
    right: 0;
}

html, body { 
    overflow-x: hidden; 
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.section, .reveal-parent { 
    overflow: clip; /* fallback: hidden */ 
}

.reveal { 
    opacity: 0; 
    transform: translateY(24px); 
    will-change: transform, opacity; 
    transition: transform 320ms cubic-bezier(0.22,1,0.36,1), opacity 320ms ease-out; 
}

.reveal.is-visible { 
    opacity: 1; 
    transform: translateY(0); 
}

@media (prefers-reduced-motion: reduce) { 
    .reveal { 
        transition: none; 
        transform: none; 
        opacity: 1; 
    } 
}

:root { 
    scrollbar-gutter: stable;
}

/* Global transitions for interactive elements */
a, button {
    transition: all 200ms ease;
}

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

/* ========================================
   Services Horizontal Carousel Styles
   ======================================== */

/* Carousel Container */
.services-carousel-container {
    position: relative;
}

/* Carousel Track */
.carousel-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Service Card */
.service-card {
    position: relative;
    min-height: 350px;
}

/* Large Background Icon */
.service-bg-icon {
    opacity: 1;
    z-index: 0;
}

.service-bg-icon i {
    color: #e5e7eb;
    font-size: 140px;
    line-height: 1;
}

/* Card hover effect */
.carousel-card:hover .service-card h3 {
    color: #1e40af;
}

.carousel-card {
    transition: transform 0.3s ease;
}

.carousel-card:hover {
    transform: translateY(-5px);
}

/* Navigation Arrows */
.carousel-prev,
.carousel-next {
    transition: all 0.3s ease;
}

.carousel-prev:hover,
.carousel-next:hover {
    transform: translateY(-50%) scale(1.05);
}

.carousel-prev:active,
.carousel-next:active {
    transform: translateY(-50%) scale(0.95);
}

/* Indicator Lines */
.carousel-indicator {
    height: 4px;
    border-radius: 0;
    transition: all 0.3s ease;
}

.carousel-indicator:hover {
    background-color: #9ca3af;
}

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

/* Scroll to top button */
#scroll-top {
    transition: all 0.3s ease;
}

#scroll-top.visible {
    opacity: 1;
    pointer-events: auto;
}

#scroll-top:hover {
    transform: translateY(-3px);
}

/* Mobile responsiveness */
@media (max-width: 1024px) {
    .carousel-prev,
    .carousel-next {
        width: 48px;
        height: 48px;
    }
    
    .service-bg-icon i {
        font-size: 100px;
    }
    
    .service-card {
        min-height: 300px;
    }
    
    .carousel-indicator {
        width: 40px;
    }
}

@media (max-width: 768px) {
    .carousel-prev {
        left: -8px;
    }
    
    .carousel-next {
        right: -8px;
    }
    
    .carousel-viewport {
        margin-left: 40px;
        margin-right: 40px;
    }
    
    .carousel-prev,
    .carousel-next {
        width: 40px;
        height: 40px;
    }
    
    .service-bg-icon i {
        font-size: 80px;
    }
    
    .service-card {
        min-height: 280px;
        padding-top: 80px !important;
    }
    
    .service-card h3 {
        font-size: 1.5rem !important;
    }
    
    .carousel-indicator {
        width: 32px;
    }
    
    #scroll-top {
        left: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 640px) {
    .carousel-viewport {
        margin-left: 32px;
        margin-right: 32px;
    }
    
    .carousel-prev,
    .carousel-next {
        width: 36px;
        height: 36px;
    }
    
    .carousel-prev i,
    .carousel-next i {
        font-size: 14px;
    }
    
    .carousel-indicator {
        width: 24px;
        gap: 8px;
    }
    
    .carousel-indicators {
        gap: 8px;
    }
}