.elementor-481 .elementor-element.elementor-element-8d8bd77{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:9999;}.elementor-481 .elementor-element.elementor-element-e86a5f8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:15px;--padding-right:0px;}.elementor-481 .elementor-element.elementor-element-2047fb6{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-481 .elementor-element.elementor-element-d8020f6 .elementor-nav-menu .elementor-item{font-family:"Inter", Sans-serif;font-size:14px;font-weight:600;}.elementor-481 .elementor-element.elementor-element-d8020f6 .elementor-nav-menu--main .elementor-item{color:#7A7A7A;fill:#7A7A7A;padding-top:5px;padding-bottom:5px;}.elementor-481 .elementor-element.elementor-element-d8020f6 .elementor-nav-menu--main .elementor-item:hover,
					.elementor-481 .elementor-element.elementor-element-d8020f6 .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-481 .elementor-element.elementor-element-d8020f6 .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-481 .elementor-element.elementor-element-d8020f6 .elementor-nav-menu--main .elementor-item:focus{color:#1677E8;fill:#1677E8;}.elementor-481 .elementor-element.elementor-element-d8020f6 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-481 .elementor-element.elementor-element-d8020f6 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:#61CE7000;}.elementor-481 .elementor-element.elementor-element-d8020f6 .e--pointer-framed .elementor-item:before,
					.elementor-481 .elementor-element.elementor-element-d8020f6 .e--pointer-framed .elementor-item:after{border-color:#61CE7000;}.elementor-481 .elementor-element.elementor-element-d8020f6 .e--pointer-framed .elementor-item:before{border-width:0px;}.elementor-481 .elementor-element.elementor-element-d8020f6 .e--pointer-framed.e--animation-draw .elementor-item:before{border-width:0 0 0px 0px;}.elementor-481 .elementor-element.elementor-element-d8020f6 .e--pointer-framed.e--animation-draw .elementor-item:after{border-width:0px 0px 0 0;}.elementor-481 .elementor-element.elementor-element-d8020f6 .e--pointer-framed.e--animation-corners .elementor-item:before{border-width:0px 0 0 0px;}.elementor-481 .elementor-element.elementor-element-d8020f6 .e--pointer-framed.e--animation-corners .elementor-item:after{border-width:0 0px 0px 0;}.elementor-481 .elementor-element.elementor-element-d8020f6 .e--pointer-underline .elementor-item:after,
					 .elementor-481 .elementor-element.elementor-element-d8020f6 .e--pointer-overline .elementor-item:before,
					 .elementor-481 .elementor-element.elementor-element-d8020f6 .e--pointer-double-line .elementor-item:before,
					 .elementor-481 .elementor-element.elementor-element-d8020f6 .e--pointer-double-line .elementor-item:after{height:0px;}.elementor-481 .elementor-element.elementor-element-6e9774a{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:15px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-481 .elementor-element.elementor-element-c20774b .elementor-button{background-color:#FFFFFF;font-family:"Inter Tight", Sans-serif;font-size:13px;font-weight:600;fill:#374151;color:#374151;border-radius:11px 11px 11px 11px;padding:12px 15px 12px 15px;}.elementor-481 .elementor-element.elementor-element-c20774b:hover{--e-transform-translateY:-3px;}.elementor-481 .elementor-element.elementor-element-c20774b{border-style:solid;border-width:1px 1px 1px 1px;border-color:#0F172A17;border-radius:11px 11px 11px 11px;box-shadow:0px 0px 10px 0px rgba(14.999999999999995, 23.000000000000007, 41.99999999999999, 0.0392156862745098);}.elementor-481 .elementor-element.elementor-element-c20774b .elementor-button-content-wrapper{flex-direction:row;}.elementor-481 .elementor-element.elementor-element-c20774b .elementor-button:hover, .elementor-481 .elementor-element.elementor-element-c20774b .elementor-button:focus{color:#1677E8;}.elementor-481 .elementor-element.elementor-element-c20774b .elementor-button:hover svg, .elementor-481 .elementor-element.elementor-element-c20774b .elementor-button:focus svg{fill:#1677E8;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-481 .elementor-element.elementor-element-e86a5f8{--width:45%;--padding-top:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:0px;}.elementor-481 .elementor-element.elementor-element-6e9774a{--width:55%;--justify-content:flex-end;--flex-wrap:nowrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:10px;}.elementor-481 .elementor-element.elementor-element-c20774b{z-index:1;}.elementor-481 .elementor-element.elementor-element-c20774b .elementor-button{font-size:14px;}}@media(min-width:768px){.elementor-481 .elementor-element.elementor-element-8d8bd77{--content-width:1240px;}.elementor-481 .elementor-element.elementor-element-e86a5f8{--width:15%;}.elementor-481 .elementor-element.elementor-element-2047fb6{--width:60%;}.elementor-481 .elementor-element.elementor-element-6e9774a{--width:25%;}}@media(max-width:1024px) and (min-width:768px){.elementor-481 .elementor-element.elementor-element-e86a5f8{--width:25%;}.elementor-481 .elementor-element.elementor-element-2047fb6{--width:50%;}.elementor-481 .elementor-element.elementor-element-6e9774a{--width:25%;}}/* Start custom CSS for html, class: .elementor-element-a38ae79 */<div class="theme-switcher" aria-label="Wybierz motyw">
    <button class="theme-button" data-theme-choice="light" title="Jasny motyw" aria-label="Jasny motyw">☀</button>
    <button class="theme-button" data-theme-choice="dark" title="Ciemny motyw" aria-label="Ciemny motyw">☾</button>
</div>

<style>


/* =====================================================
   REGUŁY KOLORÓW WYŁĄCZNIE DLA H1 I H2
===================================================== */

/* Jasny motyw (Domyślny) */
h1, h2 {
    color: var(--text, #111827) !important;
    transition: color 0.3s ease !important;
}

/* Ciemny motyw (Dark Mode) */
[data-theme="dark"] h1,
[data-theme="dark"] h3,
[data-theme="dark"] h2 {
    color: #f3f4f6 !important;
}

/* Motyw systemowy (gdy w systemie jest Dark Mode) */
@media (prefers-color-scheme: dark) {
    [data-theme="system"] h1,
    [data-theme="system"] h3,
    [data-theme="system"] h2,
    :root:not([data-theme]) h1,
    :root:not([data-theme]) h2 {
        color: #f3f4f6 !important;
    }
}

    /* =====================================================
   THEME SWITCHER STYLES
===================================================== */

.theme-switcher {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 4px !important;
    border: 1px solid var(--border, rgba(15,23,42,.09)) !important;
    border-radius: 12px !important;
    background: var(--card, #ffffff) !important;
    box-shadow: 0 5px 20px rgba(15,23,42,.04) !important;
}

.theme-button {
    width: 31px !important;
    height: 31px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--text-muted, #6b7280) !important;
    cursor: pointer !important;
    font-size: 14px !important;
    transition: all .2s ease !important;
}

.theme-button:hover {
    color: var(--blue, #1677e8) !important;
    background: rgba(22, 119, 232, .06) !important;
}

.theme-button.active {
    background: var(--blue, #1677e8) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(22, 119, 232, .22) !important;
}

/* Wersja na urządzenia mobilne */
@media (max-width: 650px) {
    .theme-switcher {
        padding: 3px !important;
    }

    .theme-button {
        width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
    }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const themeButtons = document.querySelectorAll(".theme-button");
    const root = document.documentElement;

    // Funkcja do wykrywania preferencji systemowych (zwraca tylko 'dark' lub 'light')
    function getSystemPreference() {
        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
    }

    // Pobieramy zapisany motyw lub uruchamiamy automat systemowy (light / dark)
    const savedTheme = localStorage.getItem("polecajnik-theme");
    const initialTheme = savedTheme ? savedTheme : getSystemPreference();

    setTheme(initialTheme);

    function setTheme(theme) {
        root.setAttribute("data-theme", theme);
        localStorage.setItem("polecajnik-theme", theme);
        updateActiveButton(theme);
    }

    function updateActiveButton(theme) {
        themeButtons.forEach(button => {
            const choice = button.getAttribute("data-theme-choice");
            button.classList.toggle("active", choice === theme);
        });
    }

    themeButtons.forEach(button => {
        button.addEventListener("click", function () {
            const theme = this.getAttribute("data-theme-choice");
            setTheme(theme);
        });
    });

    // Reaguj na zmianę motywu w systemie tylko jeśli użytkownik nie zapisał własnego wyboru
    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function (e) {
        if (!localStorage.getItem("polecajnik-theme")) {
            setTheme(e.matches ? "dark" : "light");
        }
    });
});
</script>/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8d8bd77 *//* =====================================================
   1. ZMIENNE NAGŁÓWKA
===================================================== */

[data-theme="light"] {
    --header-bg: rgba(255, 255, 255, 1);
    --header-border: rgba(15, 23, 42, 0.09);
    --header-text: #0f172a;
    --header-text-hover: #1677e8;
    --header-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}

[data-theme="dark"] {
    --header-bg: rgb(5 7 11 / 78%);
    --header-border: #1e293b;
    --header-text: #f8fafc;
    --header-text-hover: #38bdf8;
    --header-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}


/* =====================================================
   2. HEADER
===================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: var(--header-bg);

    border-bottom: 1px solid var(--header-border);

    box-shadow: var(--header-shadow);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}


/* =====================================================
   3. WYMUSZENIE BORDERU DLA JASNEGO MOTYWU
===================================================== */

[data-theme="light"] .site-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.09);
}

[data-theme="dark"] .site-header {
    border-bottom: 1px solid #1e293b;
}


/* =====================================================
   4. KONTENER HEADERA
===================================================== */

.header-container {
    max-width: 1200px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* =====================================================
   5. LOGO
===================================================== */

.header-logo {
    display: flex;
    align-items: center;

    font-size: 20px;
    font-weight: 800;

    color: var(--header-text);
    text-decoration: none;

    transition: color 0.25s ease;
}

.header-logo:hover {
    color: var(--header-text-hover);
}


/* =====================================================
   6. NAWIGACJA
===================================================== */

.header-nav {
    display: flex;
    align-items: center;
    gap: 32px;
}


/* Linki */

.nav-link {
    font-size: 14px;
    font-weight: 500;

    color: var(--header-text);
    text-decoration: none;

    position: relative;

    transition: color 0.25s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--header-text-hover);
}


/* Podkreślenie */

.nav-link::after {
    content: '';

    position: absolute;

    bottom: 0;
    left: 0;

    width: 0%;
    height: 2px;

    background: var(--header-text-hover);

    transition: width 0.25s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}


/* =====================================================
   7. AKCJE HEADERA
===================================================== */

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}


/* =====================================================
   8. PRZYCISK CTA
===================================================== */

.header-btn {
    border-radius: 9px;

    background: var(--blue, #1677e8);
    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.header-btn:hover {
    background: var(--blue-light, #2563eb);

    box-shadow:
        0 0 20px rgba(22, 119, 232, 0.3);
}


/* =====================================================
   9. MOBILE
===================================================== */

@media (max-width: 768px) {

    .header-nav {
        display: none;
    }

    .header-nav.is-open {
        display: flex;

        flex-direction: column;

        position: absolute;

        top: 100%;
        left: 0;

        width: 100%;

        background: var(--header-bg);

        border-bottom: 1px solid var(--header-border);

        gap: 20px;
    }
}/* End custom CSS */