body { background-color: #050505; font-family: 'Poppins', sans-serif; }
        
        /* NOWE TŁO: Radial Mesh Gradient */
        .bg-mesh {
            background: 
                radial-gradient(circle at 0% 0%, rgba(117, 70, 232, 0.15) 0%, transparent 35%),
                radial-gradient(circle at 100% 100%, rgba(117, 70, 232, 0.1) 0%, transparent 35%),
                #050505;
        }

        .task-item.active {
            border-color: #7546E8 !important;
            background: rgba(117, 70, 232, 0.05);
        }

        /* Usunięcie kursywy globalnie */
        h1, h2, h3, p, span, div { font-style: normal !important; }

    /* ... twoje poprzednie style ... */

    /* Nowy styl dla mniejszych bloków */
    .task-item {
        transition: all 0.3s ease;
    }
    .task-item:hover {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, 0.03);
    }
    .task-item.active {
        border-color: #7546E8 !important;
        background: rgba(117, 70, 232, 0.08) !important;
    }
    .task-item.active .inner-dot {
        background-color: #7546E8;
        box-shadow: 0 0 8px #7546E8;
    }
    .task-item.active .check-circle {
        border-color: #7546E8;

        body { padding-bottom: 150px; } 

    /* Styl dla okienka z przykładem */
    .preview-box {
        background-size: cover;
        background-position: center;
        transition: transform 0.5s ease;
    }
    .card-hover:hover .preview-box {
        transform: scale(1.05);
    }
    }

    .bg-text {
    font-family: 'Poppins', sans-serif;
    line-height: 0.8;
    -webkit-text-stroke: 1px rgba(255,255,255,0.3)
    color: transparent;
}

/* Wszystkie Twoje główne sekcje muszą mieć wyższy z-index niż tło */
section, header, footer, #tabs-container, #services-grid {
    position: relative;
    z-index: 10;
}

/* Body nie może mieć koloru tła, który przykryje obrazek */
body {
    background-color: #020202; /* To jest OK, o ile tło jest NAD tym */
    min-height: 100%;
    position: relative;
}


/* --- OPTYMALIZACJA MOBILE --- */
@media (max-width: 768px) {
    /* Zmniejszamy paddingi głównego kafelka */
    .service-item > div > div:first-child {
        padding: 1.5rem !important; /* Mniej miejsca po bokach */
        border-radius: 2rem !important;
    }

    .service-item {
    scroll-margin-top: 150px;
}

    /* Dopasowanie nagłówka */
    .service-item h2 {
        font-size: 1.5rem !important; /* Mniejszy, zgrabniejszy tytuł */
        margin-bottom: 0.75rem !important;
    }

    /* Opis pod tytułem */
    .service-item p {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
        margin-bottom: 1.5rem !important;
    }

    /* Linia separująca */
    .service-item .h-px {
        margin: 1.5rem 0 !important; /* Mniejszy odstęp wokół linii */
    }

    /* LISTA PUNKTÓW (Checklist) */
    /* Robimy 2 kolumny nawet na mobile, jeśli teksty są krótkie */
    .service-item .grid {
        grid-template-cols: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    .service-item .grid > div {
        gap: 0.5rem !important;
    }

    /* Ikona "ptaszka" - mniejsza na telefonie */
    .service-item .grid svg {
        width: 0.6rem !important;
        height: 0.6rem !important;
    }

    /* Tekst podpunktu */
    .service-item .grid span {
        font-size: 10px !important; /* Bardzo czytelny, techniczny font */
        letter-spacing: 0.1em !important;
    }

    /* Taby (Przyciski kategorii) */
    #tabs-container {
        gap: 0.5rem !important;
        margin-bottom: 2rem !important;
    }

    #tabs-container button {
        padding: 0.6rem 1rem !important;
        font-size: 9px !important;
    }
}

.hero-bg {
    /* Łączymy overlay i obrazek w jedno wywołanie */
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
                url('images/oferta.webp'); 
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-color: #020202; 
    width: 100vw;
    height: 100vh;
}

/* Efekt winiety, który skupia wzrok na środku */
.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 0%, rgba(2, 2, 2, 0.4) 100%);
    pointer-events: none;
}

/* Subtelny ruch napisu */
h1 {
    text-shadow: 0 0 30px rgba(117, 70, 232, 0.2);
    letter-spacing: -0.02em;
}

/* Animacja dla kropki w linii */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 15px #7546E8; transform: scale(1); }
    50% { box-shadow: 0 0 30px #7546E8; transform: scale(1.2); }
}

.shadow-\[0_0_15px_#7546E8\] {
    animation: pulse-glow 3s infinite ease-in-out;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 3px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(117, 70, 232, 0.3);
    border-radius: 10px;
}

@keyframes fadeInSlide {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}
.animate-fade-in {
    animation: fadeInSlide 0.4s ease forwards;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;  
    scrollbar-width: none; 
}

html body, main {
    overflow: visible !important;
    overflow-x: clip !important; /* Pozwala na sticky, a ucina to co wystaje na boki */
  }