body { background: #000; color: white; margin: 0; overflow-x: hidden; font-family: sans-serif; }
        #dither-container { position: fixed; inset: 0; z-index: 0; }
        .hero-title { line-height: 0.8; }
        svg { overflow: visible !important; }
        .curved-loop-section { cursor: grab; touch-action: none; position: relative; z-index: 30; }
.word 
{ 
    display: inline-block; 
    will-change: opacity, filter; }

.shiny-text {
        /* Ustawiamy gradient: Biały -> Srebrny Błysk -> Biały */
        /* Kolory z Reacta: color=#ffffff, shineColor=#a3a3a3 */
        background-image: linear-gradient(
            120deg,
            #ffffff 0%,
            #ffffff 35%,
            #fffee8 50%,
            #ffffff 65%,
            #ffffff 100%
        );
        
        /* Kluczowa linijka, której brakowała: tekst musi być przezroczysty! */
        color: transparent;
        
        /* Przycinamy tło do kształtu liter */
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        
        /* Powiększamy tło, żeby móc nim przesuwać */
        background-size: 300% auto;
        background-position: 0 0;
        
        /* Animacja */
        animation: shine 7s linear infinite;
        
        /* Ważne dla renderowania w niektórych przeglądarkach */
        display: block;
        padding-right: 1rem;
    }

    /* Ruch tła */
    @keyframes shine {
        0% {
            background-position: 200% center;
        }
        100% {
            background-position: -200% center;
        }
    }

    @font-face {
        font-family: 'Sharp Grotesque';
        src: url('fonts/Sharpe\ PERSONAL\ Light.woff2') format('woff2'),
             url('fonts/Sharpe\ PERSONAL\ Light.woff') format('woff');
    }

    .text-primary {
        color: #f5c747;
        font-family: 'Sharp Grotesque', sans-serif;
        word-spacing: 3.5px;
    }

        .text-secondary {
        color: #000000;
        font-family: 'Sharp Grotesque', sans-serif;
        word-spacing: 3.5px;
    }

            input[type=range] {
            -webkit-appearance: none;
            width: 100%;
            background: transparent;
        }
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 20px;
            width: 20px;
            border-radius: 50%;
            background: #171717;
            border: 2px solid #ffffff;
            cursor: pointer;
            margin-top: -9px; 
            box-shadow: 0 0 0 1px rgba(0,0,0,0); 
        }
        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 2px;
            cursor: pointer;
            background: #ffffff;
            border-radius: 1px;
        }
        input[type=range]::-moz-range-thumb {
            height: 20px;
            width: 20px;
            border: 2px solid #ffffff;
            border-radius: 50%;
            background: #171717;
            cursor: pointer;
        }
        input[type=range]::-moz-range-track {
            width: 100%;
            height: 2px;
            cursor: pointer;
            background: #ffffff;
        }

        /* --- CUSTOM CHECKBOX STYLING (The Fix) --- */
        /* This hides the ugly default box and uses the div next to it */
        .service-checkbox input:checked + div {
            background-color: white;
            border-color: white;
        }
        /* Add a checkmark visual when selected */
        .service-checkbox input:checked + div::after {
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            /* Optional: You can stick an SVG checkmark here if you want */
        }