{"id":5616,"date":"2026-02-12T11:55:21","date_gmt":"2026-02-12T10:55:21","guid":{"rendered":"https:\/\/portfolio.anmcollective.pl\/?page_id=5616"},"modified":"2026-04-06T15:54:21","modified_gmt":"2026-04-06T13:54:21","slug":"zumba-4","status":"publish","type":"page","link":"https:\/\/portfolio.anmcollective.pl\/?page_id=5616","title":{"rendered":"zumba"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5616\" class=\"elementor elementor-5616\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-293c712e e-flex e-con-boxed e-con e-parent\" data-id=\"293c712e\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-20382d84 elementor-widget elementor-widget-html\" data-id=\"20382d84\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=DynaPuff:wght@400;700&family=Numans&display=swap\" rel=\"stylesheet\">\n    <style>\n        :root {\n            --fiolet: #2d0a2d;\n            --pink: #FF1493;\n            --gold: #FFD700;\n        }\n\n        \/* STYLIZACJA INTRO *\/\n        #introContainer {\n            position: fixed;\n            top: 0; left: 0; width: 100%; height: 100%;\n            z-index: 99999; \/* Bardzo wysoki z-index, aby przykry\u0107 wszystko *\/\n            background: #000;\n            display: flex; align-items: center; justify-content: center;\n            overflow: hidden;\n        }\n\n        .particles-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }\n\n        .counter-wrap { position: relative; z-index: 20; text-align: center; }\n\n        #counter {\n            font-family: 'DynaPuff', cursive;\n            font-size: clamp(5rem, 15vw, 12rem);\n            background: linear-gradient(to bottom, #fff, var(--pink));\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            filter: drop-shadow(0 0 20px rgba(255, 20, 147, 0.5));\n            line-height: 1;\n        }\n\n        .loading-text {\n            color: var(--pink);\n            letter-spacing: 5px;\n            font-size: 0.9rem;\n            text-transform: uppercase;\n            margin-top: 10px;\n            opacity: 0.8;\n            font-family: 'Numans', sans-serif;\n        }\n\n        .logo-reveal {\n            position: absolute;\n            width: 350px; height: 350px;\n            opacity: 0; transform: translate(-50%, -50%) scale(0);\n            top: 50%; left: 50%; z-index: 30;\n        }\n        .logo-reveal img { width: 100%; height: 100%; object-fit: contain; }\n\n        .big-text {\n            font-family: 'DynaPuff', cursive;\n            font-size: clamp(3rem, 12vw, 9rem);\n            color: white;\n            text-align: center;\n            opacity: 0;\n            z-index: 25;\n        }\n\n        .gradient-text {\n            background: linear-gradient(135deg, var(--pink), var(--gold));\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n        }\n\n        \/* --- BLOKADA DLA EDYTORA ELEMENTOR --- *\/\n        \/* Je\u015bli edytor jest w\u0142\u0105czony, chowamy intro i pokazujemy stron\u0119 *\/\n        .elementor-editor-active #introContainer {\n            display: none !important;\n        }\n        .elementor-editor-active body {\n            overflow: auto !important;\n        }\n    <\/style>\n<\/head>\n<body class=\"zumba-intro-body\">\n\n    <div id=\"introContainer\">\n        <canvas class=\"particles-canvas\" id=\"particlesCanvas\"><\/canvas>\n        \n        <div class=\"counter-wrap\" id=\"counterWrap\">\n            <div id=\"counter\">0<\/div>\n            <p class=\"loading-text\">\u0141adowanie energii...<\/p>\n        <\/div>\n\n        <div class=\"logo-reveal\" id=\"logoReveal\">\n            <img decoding=\"async\" src=\"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/02\/zumba.png\" alt=\"Zumba Logo\">\n        <\/div>\n\n        <div class=\"big-text\" id=\"introText\">\n            ZUMBA<br><span class=\"gradient-text\">VIBES<\/span>\n        <\/div>\n    <\/div>\n\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\n\n    <script>\n        \/\/ BEZPIECZNIK JS DLA ELEMENTORA\n        const isElementor = window.location.href.indexOf(\"elementor\") > -1 || document.body.classList.contains('elementor-editor-active');\n        \n        if (isElementor) {\n            document.getElementById('introContainer').style.display = 'none';\n            document.body.style.overflow = 'auto';\n        } else {\n            \/\/ URUCHOM ENGIN ANIMACJI TYLKO JE\u015aLI TO NIE EDYTOR\n            const canvas = document.getElementById('particlesCanvas');\n            const ctx = canvas.getContext('2d');\n            canvas.width = window.innerWidth;\n            canvas.height = window.innerHeight;\n\n            let particles = [];\n            class Particle {\n                constructor(x, y, color, speedMult = 1) {\n                    this.x = x; this.y = y;\n                    this.size = Math.random() * 4 + 1;\n                    this.speedX = (Math.random() - 0.5) * (15 * speedMult);\n                    this.speedY = (Math.random() - 0.5) * (15 * speedMult);\n                    this.color = color || (Math.random() > 0.5 ? '#FF1493' : '#FFD700');\n                    this.life = 1;\n                    this.decay = Math.random() * 0.02 + 0.01;\n                }\n                update() {\n                    this.x += this.speedX; this.y += this.speedY;\n                    this.speedX *= 0.96; this.speedY *= 0.96;\n                    this.life -= this.decay;\n                }\n                draw() {\n                    ctx.globalAlpha = this.life;\n                    ctx.fillStyle = this.color;\n                    ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill();\n                }\n            }\n\n            function createExplosion(x, y, count, color, speed) {\n                for (let i = 0; i < count; i++) particles.push(new Particle(x, y, color, speed));\n            }\n\n            function animate() {\n                ctx.fillStyle = 'rgba(0, 0, 0, 0.15)';\n                ctx.fillRect(0, 0, canvas.width, canvas.height);\n                particles = particles.filter(p => p.life > 0);\n                particles.forEach(p => { p.update(); p.draw(); });\n                requestAnimationFrame(animate);\n            }\n            animate();\n\n            const tl = gsap.timeline();\n\n            tl.to({val: 0}, {\n                val: 100, duration: 3, ease: \"none\",\n                onUpdate: function() {\n                    const current = Math.ceil(this.targets()[0].val);\n                    document.getElementById('counter').innerText = current;\n                    if(current % 20 === 0) {\n                        gsap.fromTo('#counter', {scale: 1}, {scale: 1.2, duration: 0.2, yoyo: true, repeat: 1});\n                        createExplosion(window.innerWidth\/2, window.innerHeight\/2, 20, '#FF1493', 0.5);\n                    }\n                }\n            })\n            .to('#counterWrap', { \n                scale: 2, opacity: 0, duration: 0.4, ease: \"power2.in\",\n                onStart: () => createExplosion(window.innerWidth\/2, window.innerHeight\/2, 100, '#fff', 2)\n            })\n            .to('#logoReveal', { \n                opacity: 1, scale: 1, duration: 0.6, ease: \"back.out(2)\",\n                onStart: () => createExplosion(window.innerWidth\/2, window.innerHeight\/2, 150, null, 1.5)\n            })\n            .to('#logoReveal', { rotation: 10, yoyo: true, repeat: 3, duration: 0.1 })\n            .to('#logoReveal', { \n                scale: 4, opacity: 0, duration: 0.5, ease: \"power2.in\",\n                onStart: () => createExplosion(window.innerWidth\/2, window.innerHeight\/2, 300, '#FF1493', 3)\n            })\n            .to('#introText', { opacity: 1, scale: 1.1, duration: 0.8, ease: \"power4.out\" })\n            .to('#introText', { letterSpacing: \"20px\", opacity: 0, duration: 1, delay: 1 })\n            .to('#introContainer', { \n                opacity: 0, duration: 1, \n                onComplete: () => {\n                    document.getElementById('introContainer').style.display = 'none';\n                    document.body.style.overflow = 'auto';\n                }\n            });\n\n            window.addEventListener('resize', () => {\n                canvas.width = window.innerWidth;\n                canvas.height = window.innerHeight;\n            });\n        }\n    <\/script>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7e075e4e e-flex e-con-boxed e-con e-parent\" data-id=\"7e075e4e\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6f64c3b0 elementor-widget elementor-widget-html\" data-id=\"6f64c3b0\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"portfolio-dock-wrapper\">\n    <div class=\"dock-notice\">\n        Ogl\u0105dasz portfolio <strong>ANM Collective<\/strong>\n    <\/div>\n\n    <div class=\"portfolio-nav-dock\">\n        <div class=\"dock-signature\">\n            <a href=\"https:\/\/portfolio.anmcollective.pl\/\" class=\"signature-link\">\n                <img decoding=\"async\" src=\"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/01\/logo-bez-tla-1.webp\" alt=\"ANM Collective\">\n                <div class=\"signature-text\">\n                    <span>Created by<\/span>\n                    <strong>ANM Collective<\/strong>\n                <\/div>\n            <\/a>\n        <\/div>\n\n        <div class=\"dock-divider\"><\/div>\n\n        <div class=\"dock-scroll-viewport\">\n            <div class=\"dock-container\" id=\"dockContainerScroll\">\n                <div class=\"dock-item\">\n                    <a href=\"https:\/\/portfolio.anmcollective.pl\/?page_id=1548\"><img decoding=\"async\" src=\"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/01\/lapkaweb.webp\" alt=\"\u0141apka\"><\/a>\n                    <span class=\"tooltip\">\u0141apka<\/span>\n                <\/div>\n                <div class=\"dock-item\">\n                    <a href=\"https:\/\/portfolio.anmcollective.pl\/?page_id=22\"><img decoding=\"async\" src=\"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/01\/makramoreweb.webp\" alt=\"Makramore\"><\/a>\n                    <span class=\"tooltip\">Makramore<\/span>\n                <\/div>\n                <div class=\"dock-item\">\n                    <a href=\"https:\/\/portfolio.anmcollective.pl\/?page_id=2248\"><img decoding=\"async\" src=\"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/01\/old-town-bez-tlaweb.webp\" alt=\"Old Town\"><\/a>\n                    <span class=\"tooltip\">Old Town<\/span>\n                <\/div>\n                <div class=\"dock-item\">\n                    <a href=\"https:\/\/portfolio.anmcollective.pl\/?page_id=881\"><img decoding=\"async\" src=\"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/01\/logoqubic-ezgif.com-video-to-webp-converter.webp\" alt=\"Qubis form\"><\/a>\n                    <span class=\"tooltip\">Qubis Form<\/span>\n                <\/div>\n                <div class=\"dock-item\">\n                    <a href=\"https:\/\/portfolio.anmcollective.pl\/?page_id=2244\"><img decoding=\"async\" src=\"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/04\/szafir.png\" alt=\"Szafir\"><\/a>\n                    <span class=\"tooltip\">Szafir<\/span>\n                <\/div>\n                <div class=\"dock-item\">\n                    <a href=\"https:\/\/portfolio.anmcollective.pl\/?page_id=2246\"><img decoding=\"async\" src=\"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/01\/slow-nestweb.webp\" alt=\"Slow Nest\"><\/a>\n                    <span class=\"tooltip\">Slow Nest<\/span>\n                <\/div>\n                <div class=\"dock-item\">\n                    <a href=\"https:\/\/portfolio.anmcollective.pl\/?page_id=3179\"><img decoding=\"async\" src=\"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/01\/lukierowniaweb.webp\" alt=\"Lukrownia\"><\/a>\n                    <span class=\"tooltip\">Lukrownia<\/span>\n                <\/div>\n                <div class=\"dock-item\">\n                    <a href=\"https:\/\/portfolio.anmcollective.pl\/?page_id=3181\"><img decoding=\"async\" src=\"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/01\/ekodomweb.webp\" alt=\"Eco dom\"><\/a>\n                    <span class=\"tooltip\">Eco dom<\/span>\n                <\/div>\n                <div class=\"dock-item\">\n                    <a href=\"https:\/\/portfolio.anmcollective.pl\/?page_id=5616\"><img decoding=\"async\" src=\"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/01\/zumbaweb.webp\" alt=\"Zumba\"><\/a>\n                    <span class=\"tooltip\">Zumba<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"dock-divider\"><\/div>\n\n        <div class=\"dock-arrows\">\n            <button type=\"button\" class=\"dock-arrow\" onclick=\"document.getElementById('dockContainerScroll').scrollBy({left: -150, behavior: 'smooth'})\">\u2039<\/button>\n            <button type=\"button\" class=\"dock-arrow\" onclick=\"document.getElementById('dockContainerScroll').scrollBy({left: 150, behavior: 'smooth'})\">\u203a<\/button>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n\/* G\u0142\u00f3wny kontener i ZMIENNE KOLORYSTYCZNE *\/\n.portfolio-dock-wrapper {\n    \/* ========================================== *\/\n    \/* \ud83d\udfe2 WASZ KOLOR T\u0141A (#253A2A)               *\/\n    \/* ========================================== *\/\n    --anm-bg-rgb: 37, 58, 42; \n\n    \/* Nieco ja\u015bniejsza ziele\u0144 do po\u015bwiaty, aby \u0142adnie odcina\u0142a si\u0119 od ciemnego t\u0142a *\/\n    --anm-glow-rgb: 70, 140, 90;\n\n    \/* Przezroczysto\u015bci dla po\u015bwiaty *\/\n    --anm-glow-strong: rgba(var(--anm-glow-rgb), 0.5);\n    --anm-glow-soft:   rgba(var(--anm-glow-rgb), 0.3);\n    --anm-glow-edge:   rgba(var(--anm-glow-rgb), 0.2);\n    --anm-glow-hover:  rgba(var(--anm-glow-rgb), 0.5);\n    \n    position: fixed;\n    bottom: 25px;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: 2147483647 !important;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 12px;\n    pointer-events: none; \n}\n\n\/* Stylizacja notki nad paskiem (T\u0141O W KOLORZE #253A2A) *\/\n.dock-notice {\n    background: rgba(var(--anm-bg-rgb), 0.95);\n    color: rgba(255, 255, 255, 0.9);\n    padding: 6px 20px;\n    border-radius: 30px;\n    font-size: 12px;\n    letter-spacing: 1.5px;\n    text-transform: uppercase;\n    backdrop-filter: blur(10px);\n    -webkit-backdrop-filter: blur(10px);\n    border: 1px solid rgba(255, 255, 255, 0.2);\n    pointer-events: auto;\n    \/* Delikatna po\u015bwiata notki *\/\n    box-shadow: 0 5px 15px var(--anm-glow-soft), 0 2px 10px rgba(0,0,0,0.5);\n    font-family: sans-serif;\n}\n\n.dock-notice strong {\n    color: #ffffff;\n    font-weight: bold;\n}\n\n\/* Powi\u0119kszony panel dock (T\u0141O W KOLORZE #253A2A) *\/\n.portfolio-nav-dock {\n    position: relative;\n    display: flex !important;\n    align-items: center;\n    background: rgba(var(--anm-bg-rgb), 0.95) !important;\n    padding: 0 30px;\n    border-radius: 100px;\n    backdrop-filter: blur(20px);\n    -webkit-backdrop-filter: blur(20px);\n    border: 1px solid rgba(255, 255, 255, 0.2);\n    height: 75px; \n    pointer-events: auto !important; \n    \n    \/* Wielowarstwowe pod\u015bwietlenie *\/\n    box-shadow: \n        0 10px 30px rgba(0, 0, 0, 0.9),           \n        0 15px 45px var(--anm-glow-strong),       \n        0 0 20px var(--anm-glow-soft),          \n        inset 0 -2px 10px var(--anm-glow-edge); \n}\n\n\/* Powi\u0119kszony obszar przewijania *\/\n.dock-scroll-viewport {\n    width: 380px; \n    overflow: hidden;\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.dock-container {\n    display: flex;\n    align-items: center;\n    gap: 20px; \n    overflow-x: auto;\n    scroll-behavior: smooth;\n    scrollbar-width: none;\n    padding: 0 10px;\n    pointer-events: all !important;\n}\n.dock-container::-webkit-scrollbar { display: none; }\n\n.dock-item {\n    position: relative;\n    flex-shrink: 0;\n    width: 50px;\n    display: flex;\n    justify-content: center;\n}\n\n\/* Powi\u0119kszone ikony portfolio *\/\n.dock-item img {\n    width: 46px; \n    height: 46px; \n    object-fit: contain;\n    filter: grayscale(100%) opacity(0.6);\n    transition: 0.3s ease;\n}\n\n.dock-item:hover img {\n    filter: grayscale(0%) opacity(1);\n    transform: scale(1.2);\n}\n\n\/* Dostosowane Tooltipy *\/\n.tooltip {\n    position: absolute;\n    bottom: 80px; \n    left: 50%;\n    transform: translateX(-50%) translateY(10px);\n    background: #fff;\n    color: #000;\n    padding: 7px 15px; \n    border-radius: 8px;\n    font-size: 13px; \n    font-weight: bold;\n    opacity: 0;\n    pointer-events: none;\n    transition: 0.2s ease;\n    white-space: nowrap;\n    box-shadow: 0 5px 15px var(--anm-glow-soft);\n}\n\n.dock-item:hover .tooltip {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n}\n\n.dock-arrows {\n    display: flex;\n    gap: 12px;\n    pointer-events: all !important;\n}\n\n\/* Powi\u0119kszone przyciski strza\u0142ek *\/\n.dock-arrow {\n    background: rgba(255,255,255,0.15) !important;\n    border: 1px solid rgba(255,255,255,0.1) !important;\n    color: white !important;\n    width: 40px; \n    height: 40px; \n    border-radius: 50%;\n    cursor: pointer !important;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 24px; \n    z-index: 10;\n    pointer-events: all !important;\n    transition: 0.3s;\n}\n\n.dock-arrow:hover {\n    background: rgba(255,255,255,0.3) !important;\n    box-shadow: 0 0 15px var(--anm-glow-hover); \n}\n\n\/* Powi\u0119kszone logo i teksty *\/\n.signature-link { display: flex; align-items: center; gap: 10px; text-decoration: none; }\n.dock-signature img { width: 40px; height: 40px; } \n.signature-text strong { font-size: 12px; color: #fff; white-space: nowrap; display: block; } \n.signature-text span { font-size: 9px; color: rgba(255,255,255,0.7); display: block; } \n.dock-divider { width: 1px; height: 30px; background: rgba(255,255,255,0.2); margin: 0 20px; } \n\n\/* Responsywno\u015b\u0107 dla telefon\u00f3w *\/\n@media (max-width: 768px) {\n    .dock-scroll-viewport { width: 160px; }\n    .signature-text { display: none; }\n    .portfolio-nav-dock { padding: 0 15px; height: 65px; }\n    .dock-item img { width: 38px; height: 38px; }\n    .dock-notice { font-size: 10px; padding: 5px 15px; }\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-39fa393b e-flex e-con-boxed e-con e-parent\" data-id=\"39fa393b\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3632b31b elementor-widget elementor-widget-html\" data-id=\"3632b31b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style> <\/   \/* 1. IMPORT CZCIONEK (Zabezpieczenie) *\/\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=DynaPuff:wght@400;700;900&family=Numans&display=swap');\n\n    \/* 2. GLOBALNE USTAWIENIA TEKSTU *\/\n    body, p, span, li, div {\n        font-family: 'Numans', sans-serif !important;\n        color: #ffffff !important; \/* Wszystkie zwyk\u0142e teksty b\u0119d\u0105 bia\u0142e *\/\n    }\n\n    \/* 3. MEGA NAG\u0141\u00d3WKI (H1, H2) *\/\n    h1, h2, .section-title, .mega-title, .h-title {\n        font-family: 'DynaPuff', cursive !important;\n        font-weight: 900 !important;\n        text-transform: uppercase !important;\n        line-height: 0.9 !important;\n        letter-spacing: -2px !important;\n        color: #ffffff !important; \/* Startowo bia\u0142e *\/\n        \n        \/* Gradientowy efekt dla wszystkich g\u0142\u00f3wnych tytu\u0142\u00f3w *\/\n        background: linear-gradient(135deg, #FF1493 0%, #FFD700 100%) !important;\n        -webkit-background-clip: text !important;\n        -webkit-text-fill-color: transparent !important;\n        \n        \/* Wielko\u015b\u0107 nag\u0142\u00f3wk\u00f3w - du\u017ca i responsywna *\/\n        font-size: clamp(2.8rem, 8vw, 6rem) !important;\n        margin-bottom: 20px !important;\n    }\n\n    \/* 4. NAG\u0141\u00d3WKI KAFELK\u00d3W I MNIEJSZE (H3, H4) *\/\n    h3, h4, .card-title, .program-name, .sub-gradient-text {\n        font-family: 'DynaPuff', cursive !important;\n        font-weight: 700 !important;\n        text-transform: none !important;\n        letter-spacing: 0 !important;\n        \n        \/* Nadpisujemy kolor motywu Twoim gradientem *\/\n        background: linear-gradient(135deg, #FF1493 0%, #FFD700 100%) !important;\n        -webkit-background-clip: text !important;\n        -webkit-text-fill-color: transparent !important;\n        \n        font-size: clamp(1.5rem, 3vw, 2.5rem) !important;\n        margin-bottom: 10px !important;\n    }\n\n    \/* 5. FIX DLA WIDOCZNO\u015aCI FORMULARZY I PRZYCISK\u00d3W *\/\n    input, textarea {\n        color: #000000 !important; \/* Tekst w polach wpisywania musi by\u0107 czarny *\/\n    }\n\n    .cta-button, button, .tab-button {\n        font-family: 'DynaPuff', cursive !important;\n        text-transform: uppercase !important;\n        color: #ffffff !important;\n        -webkit-text-fill-color: #ffffff !important; \/* Przyciski zostaj\u0105 bia\u0142e *\/\n    }\n\n    \/* 6. DODATKOWE WYMUSZENIE DLA TWOICH KLAS *\/\n    .numans-font { font-family: 'Numans', sans-serif !important; color: #ffffff !important; }\n    .dyna-puff { font-family: 'DynaPuff', cursive !important; }\n\n    \/* Usuwamy wszelkie cienie z motywu, kt\u00f3re mog\u0105 brudzi\u0107 tekst *\/\n    h1, h2, h3, p { text-shadow: none !important; }\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-706259b1 e-flex e-con-boxed e-con e-parent\" data-id=\"706259b1\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1e171aaa elementor-widget elementor-widget-html\" data-id=\"1e171aaa\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"sky-master-fixed\">\n    <div class=\"cloud-layer cloud-fast\"><\/div>\n    <div class=\"cloud-layer cloud-slow\"><\/div>\n<\/div>\n\n<style>\n    :root {\n        \/* Ciemny fiolet z palety logo *\/\n        --sky-top: #210124;    \n        --sky-bottom:#210124; \n    }\n\n    \/* ODBLOKOWANIE PRZEZROCZYSTO\u015aCI *\/\n    html, body, \n    #page, \n    .site-content, \n    .elementor, \n    .elementor-section-wrap,\n    .elementor-section, \n    .elementor-container, \n    .elementor-column, \n    .elementor-widget-wrap {\n        background-color: transparent !important;\n        background-image: none !important;\n    }\n\n    \/* KONTENER G\u0141\u00d3WNY NIEBA *\/\n    .sky-master-fixed {\n        position: fixed !important;\n        top: 0 !important;\n        left: 0 !important;\n        width: 100vw !important;\n        height: 100vh !important;\n        z-index: -2 !important; \n        pointer-events: none !important;\n        overflow: hidden !important;\n        \/* Ciemnofioletowe t\u0142o *\/\n        background: linear-gradient(to bottom, var(--sky-top) 0%, var(--sky-bottom) 100%) !important;\n    }\n\n    \/* WARSTWY CHMUR *\/\n    .cloud-layer {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 400%; \n        height: 100%;\n        background-image: url('https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/02\/tlozumba.webp') !important;\n        background-repeat: repeat-x !important;\n        background-position: center 35% !important; \n        background-size: 45% auto !important; \n        will-change: transform;\n    }\n\n    .cloud-fast {\n        opacity: 0.4; \n        filter: contrast(1.2) brightness(0.8) hue-rotate(280deg); \/* Dopasowanie chmur do fioletu *\/\n        animation: cloudDrift 130s linear infinite !important; \n    }\n\n    .cloud-slow {\n        opacity: 0.2;\n        filter: blur(8px) brightness(0.6) hue-rotate(280deg);\n        transform: scale(1.8); \n        animation: cloudDrift 210s linear infinite reverse !important;\n    }\n\n    @keyframes cloudDrift {\n        from { transform: translate3d(0, 0, 0); }\n        to { transform: translate3d(-50%, 0, 0); }\n    }\n<\/style>\n\n<script>\n    (function() {\n        const forceClear = () => {\n            const el = document.querySelectorAll('.elementor-section, .elementor-column, .elementor-widget-wrap');\n            el.forEach(e => {\n                e.style.setProperty('background-color', 'transparent', 'important');\n                e.style.setProperty('background-image', 'none', 'important');\n            });\n        };\n        \n        window.addEventListener('load', forceClear);\n        setTimeout(forceClear, 500);\n        setTimeout(forceClear, 2000);\n    })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2f028570 e-flex e-con-boxed e-con e-parent\" data-id=\"2f028570\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4da9f75b elementor-widget elementor-widget-html\" data-id=\"4da9f75b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js\"><\/script>\n\n<section class=\"story-hero-section\">\n    <div class=\"hero-bg-image\" style=\"background-image: url('https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/02\/ezgif.com-video-to-webp-converter.webp');\"><\/div>\n    <div class=\"hero-bg-overlay\"><\/div>\n\n    <div class=\"story-container\">\n        <div class=\"story-content-inner\">\n            <div class=\"hero-logo-wrapper\" id=\"anim-logo\">\n                <img decoding=\"async\" src=\"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/02\/zumba.png\" alt=\"Logo\" class=\"main-logo\">\n            <\/div>\n\n            <div class=\"hero-content-wrapper\" id=\"anim-content\">\n                <span class=\"hero-label numans-font\">POCZUJ RYTM<\/span>\n                <h1 class=\"dyna-puff hero-title\">ZACZNIJ SWOJ\u0104 <br><span class=\"gradient-text\">PRZYGOD\u0118 Z ZUMB\u0104<\/span><\/h1>\n                <p class=\"hero-description numans-font\">Dopasuj Grup\u0119 Do Swojego Temperamentu.<\/p>\n            <\/div>\n\n            <div class=\"hero-form-wrapper\" id=\"anim-form\">\n                <div class=\"quiz-container\">\n                    <div class=\"progress-bar\"><div class=\"progress-fill\" id=\"pBar\"><\/div><\/div>\n                    \n                    <div class=\"quiz-step active\" id=\"step1\">\n                        <h4 class=\"dyna-puff\">Jaki jest Tw\u00f3j cel?<\/h4>\n                        <div class=\"quiz-options\">\n                            <div class=\"option-card\" onclick=\"nextStep(2, 'Spalanie')\"><span>\ud83d\udd25<\/span><h6 class=\"numans-font\">Spalanie<\/h6><\/div>\n                            <div class=\"option-card\" onclick=\"nextStep(2, 'Fun')\"><span>\ud83d\udc83<\/span><h6 class=\"numans-font\">Czysty Fun<\/h6><\/div>\n                            <div class=\"option-card\" onclick=\"nextStep(2, 'Si\u0142a')\"><span>\ud83d\udcaa<\/span><h6 class=\"numans-font\">Si\u0142a<\/h6><\/div>\n                            <div class=\"option-card\" onclick=\"nextStep(2, 'Flow')\"><span>\ud83c\udf0a<\/span><h6 class=\"numans-font\">Flow<\/h6><\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"quiz-step\" id=\"step2\">\n                        <h4 class=\"dyna-puff\">Kiedy masz czas?<\/h4>\n                        <div class=\"quiz-options\">\n                            <div class=\"option-card\" onclick=\"nextStep(3, 'Rano')\"><h6 class=\"numans-font\">Poranki<\/h6><\/div>\n                            <div class=\"option-card\" onclick=\"nextStep(3, 'Wiecz\u00f3r')\"><h6 class=\"numans-font\">Wieczory<\/h6><\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"quiz-step\" id=\"step3\">\n                        <h4 class=\"dyna-puff\">Mamy to!<\/h4>\n                        <input type=\"text\" id=\"userName\" placeholder=\"Twoje imi\u0119\" class=\"numans-font\">\n                        <input type=\"email\" id=\"userEmail\" placeholder=\"Tw\u00f3j e-mail\" class=\"numans-font\">\n                        <button class=\"btn-next dyna-puff\" onclick=\"finishQuiz()\">Odbierz darmowy trening<\/button>\n                    <\/div>\n\n                    <div class=\"quiz-step\" id=\"stepDone\">\n                        <h4 class=\"dyna-puff\" style=\"color: #ffbb00\">Gotowe! \ud83d\ude80<\/h4>\n                        <p class=\"numans-font\">Sprawd\u017a maila!<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n    :root { --primary: #ff007a; --accent: #ffbb00; }\n\n    .story-hero-section {\n        position: relative;\n        height: 100vh;\n        width: 100%;\n        background: #000;\n        margin: 0 !important;\n        padding: 0 !important;\n    }\n\n    .hero-bg-image {\n        position: absolute;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background-size: cover; background-position: center;\n        opacity: 0.5; \/* Zwi\u0119kszona jasno\u015b\u0107 zdj\u0119cia *\/\n    }\n\n    .hero-bg-overlay {\n        position: absolute;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, transparent 50%, rgba(0,0,0,0.8) 100%);\n    }\n\n    .story-content-inner {\n        position: relative;\n        width: 100%;\n        height: 100vh;\n        max-width: 100%; \/* Wykorzystujemy pe\u0142n\u0105 szeroko\u015b\u0107 ekranu *\/\n    }\n\n    .hero-logo-wrapper, .hero-content-wrapper, .hero-form-wrapper {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        opacity: 0;\n        visibility: hidden;\n        z-index: 20;\n    }\n\n    .main-logo { width: 380px; height: auto; }\n\n    \/* Rozszerzony tekst, by nie robi\u0142 \"kolumny\" na \u015brodku *\/\n    .hero-content-wrapper {\n        width: 100%;\n        max-width: 700px; \/* Szerszy kontener na tekst *\/\n        text-align: left;\n    }\n\n    .hero-title { \n        font-size: clamp(2.5rem, 6vw, 4.5rem); \n        color: white; \n        line-height: 1;\n        text-transform: uppercase;\n    }\n\n    \/* Formularz *\/\n    .hero-form-wrapper { width: 420px; }\n\n    .quiz-container {\n        background: rgba(10, 10, 10, 0.8);\n        backdrop-filter: blur(15px);\n        padding: 30px;\n        border-radius: 30px;\n        border: 1px solid rgba(255,255,255,0.1);\n        min-height: 380px;\n    }\n\n    .quiz-step { display: none; opacity: 0; }\n    .quiz-step.active { display: block; opacity: 1; }\n\n    .quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }\n    .option-card { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; cursor: pointer; text-align: center; border: 1px solid transparent; transition: 0.3s; }\n    .option-card:hover { border-color: var(--primary); background: rgba(255,0,122,0.1); }\n\n    .progress-bar { width: 100%; height: 4px; background: rgba(255,255,255,0.1); margin-bottom: 20px; border-radius: 2px; }\n    .progress-fill { width: 33%; height: 100%; background: var(--primary); transition: 0.5s; }\n\n    .btn-next { background: var(--primary); color: white; border: none; padding: 12px; border-radius: 30px; width: 100%; cursor: pointer; font-weight: bold; margin-top: 15px; }\n\n    .gradient-text { background: linear-gradient(to right, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }\n\n    @media (max-width: 1024px) {\n        .hero-logo-wrapper, .hero-content-wrapper, .hero-form-wrapper { width: 90%; left: 50% !important; text-align: center !important; }\n        .hero-title { font-size: 2.2rem; }\n    }\n<\/style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n    gsap.registerPlugin(ScrollTrigger);\n    \n    let mm = gsap.matchMedia();\n\n    \/\/ DESKTOP: Rozsuwamy na boki\n    mm.add(\"(min-width: 1025px)\", () => {\n        const tl = gsap.timeline({\n            scrollTrigger: {\n                trigger: \".story-hero-section\",\n                start: \"top top\",\n                end: \"+=4000\",\n                pin: true,\n                scrub: 1\n            }\n        });\n\n        tl.to(\"#anim-logo\", { autoAlpha: 1, scale: 1, duration: 2 })\n          .to(\"#anim-logo\", { left: \"12%\", top: \"12%\", scale: 0.3, duration: 3, ease: \"power2.inOut\" })\n          \n          .to(\"#anim-content\", { autoAlpha: 1, duration: 2 }, \"-=1\")\n          .to(\"#anim-content\", { left: \"25%\", top: \"50%\", duration: 3, ease: \"power2.inOut\" })\n          \n          .to(\"#anim-form\", { autoAlpha: 1, duration: 2 }, \"-=1.5\")\n          .to(\"#anim-form\", { left: \"80%\", top: \"50%\", duration: 3, ease: \"power2.inOut\" });\n    });\n\n    \/\/ MOBILE: Uk\u0142adamy pionowo (nie zas\u0142aniamy bok\u00f3w)\n    mm.add(\"(max-width: 1024px)\", () => {\n        const tl = gsap.timeline({\n            scrollTrigger: {\n                trigger: \".story-hero-section\",\n                start: \"top top\",\n                end: \"+=3000\",\n                pin: true,\n                scrub: 1\n            }\n        });\n\n        tl.to(\"#anim-logo\", { autoAlpha: 1, scale: 0.6, top: \"15%\", duration: 2 })\n          .to(\"#anim-content\", { autoAlpha: 1, top: \"40%\", duration: 2 })\n          .to(\"#anim-form\", { autoAlpha: 1, top: \"75%\", duration: 2 });\n    });\n});\n\n\/\/ LOGIKA QUIZU\nfunction nextStep(step, val) {\n    const current = document.querySelector('.quiz-step.active');\n    const next = document.getElementById(step === 'Done' ? 'stepDone' : 'step' + step);\n    \n    if(step === 2) document.getElementById('pBar').style.width = \"66%\";\n    if(step === 3) document.getElementById('pBar').style.width = \"100%\";\n\n    gsap.to(current, { opacity: 0, duration: 0.2, onComplete: () => {\n        current.classList.remove('active');\n        next.classList.add('active');\n        gsap.to(next, { opacity: 1, duration: 0.3 });\n    }});\n}\n\nfunction finishQuiz() {\n    if(!document.getElementById('userName').value) return alert(\"Podaj imi\u0119!\");\n    nextStep('Done');\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6d683d64 e-transform e-flex e-con-boxed e-con e-parent\" data-id=\"6d683d64\" data-element_type=\"container\" data-settings=\"{&quot;sticky&quot;:&quot;top&quot;,&quot;_transform_translateY_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:-28,&quot;sizes&quot;:[]},&quot;_ha_eqh_enable&quot;:false,&quot;sticky_on&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;],&quot;sticky_offset&quot;:0,&quot;sticky_effects_offset&quot;:0,&quot;sticky_anchor_link_offset&quot;:0,&quot;_transform_translateX_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fb26a72 elementor-widget elementor-widget-html\" data-id=\"fb26a72\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"wave-menu-wrapper\">\n    \n    <div class=\"header-wave-mirror\">\n        <svg class=\"waves-mirror\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n            <defs>\n                <path id=\"menu-wave-path\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" \/>\n            <\/defs>\n            <g class=\"parallax-mirror\">\n                <use xlink:href=\"#menu-wave-path\" x=\"48\" y=\"0\" fill=\"rgba(255,20,147,0.3)\" \/>\n                <use xlink:href=\"#menu-wave-path\" x=\"48\" y=\"3\" fill=\"rgba(255,215,0,0.3)\" \/>\n                <use xlink:href=\"#menu-wave-path\" x=\"48\" y=\"5\" fill=\"rgba(255,255,255,0.05)\" \/>\n                <use xlink:href=\"#menu-wave-path\" x=\"48\" y=\"7\" fill=\"#1a1a1a\" \/>\n            <\/g>\n        <\/svg>\n    <\/div>\n\n    <nav class=\"dance-nav-container\">\n        <ul class=\"main-dance-nav\">\n            <li class=\"dance-item\" data-animation=\"shake\">\n                <a href=\"#o-zumbie\" class=\"dance-link\" data-text=\"O ZUMBIE\">O ZUMBIE<\/a>\n                <div class=\"note-pop\">\ud83c\udfb5<\/div>\n                <div class=\"sparkle-container\"><\/div>\n            <\/li>\n            <li class=\"dance-item\" data-animation=\"wave\">\n                <a href=\"#o-nas\" class=\"dance-link\" data-text=\"O NAS\">O NAS<\/a>\n                <div class=\"note-pop\">\ud83c\udfb6<\/div>\n                <div class=\"sparkle-container\"><\/div>\n            <\/li>\n            <li class=\"dance-item\" data-animation=\"bounce\">\n                <a href=\"#program\" class=\"dance-link\" data-text=\"PROGRAM\">PROGRAM<\/a>\n                <div class=\"note-pop\">\u266a<\/div>\n                <div class=\"sparkle-container\"><\/div>\n            <\/li>\n            <li class=\"dance-item\" data-animation=\"spin\">\n                <a href=\"#trenerzy\" class=\"dance-link\" data-text=\"TRENERZY\">TRENERZY<\/a>\n                <div class=\"note-pop\">\u266b<\/div>\n                <div class=\"sparkle-container\"><\/div>\n            <\/li>\n            <li class=\"dance-item\" data-animation=\"wiggle\">\n                <a href=\"#kontakt\" class=\"dance-link\" data-text=\"KONTAKT\">KONTAKT<\/a>\n                <div class=\"note-pop\">\ud83c\udfb5<\/div>\n                <div class=\"sparkle-container\"><\/div>\n            <\/li>\n        <\/ul>\n    <\/nav>\n<\/div>\n\n<style>\n    :root {\n        --pink: #FF1493;\n        --gold: #FFD700;\n        --jasny: #ffffff;\n    }\n\n    .wave-menu-wrapper {\n        position: relative;\n        width: 100%;\n        height: 160px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: visible;\n    }\n\n    \/* FALA JAKO T\u0141O *\/\n    .header-wave-mirror {\n        position: absolute;\n        top:0; left: 0; width: 100%; height: 120px;\n        transform: rotate(180deg);\n        z-index: 1;\n        pointer-events: none;\n    }\n    .waves-mirror { width: 100%; height: 100%; }\n\n    .parallax-mirror > use { animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite; }\n    .parallax-mirror > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }\n    .parallax-mirror > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }\n    .parallax-mirror > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }\n    .parallax-mirror > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; }\n\n    @keyframes move-forever {\n        0% { transform: translate3d(-90px,0,0); }\n        100% { transform: translate3d(85px,0,0); }\n    }\n\n    \/* MENU - STYLIZACJA LITER *\/\n    .dance-nav-container { position: relative; z-index: 10; padding-bottom: 20px; }\n    .main-dance-nav { display: flex; gap: 2rem; list-style: none; }\n\n    .dance-link {\n        font-family: 'DynaPuff', cursive !important;\n        font-size: 1.6rem;\n        font-weight: 700;\n        color: var(--jasny) !important;\n        text-decoration: none !important;\n        text-transform: uppercase;\n        display: inline-block;\n        text-shadow: 0 0 10px rgba(0,0,0,0.5);\n    }\n\n    \/* Klasa .char jest kluczowa dla animacji *\/\n    .dance-link .char {\n        display: inline-block;\n        transition: color 0.3s;\n    }\n\n    .dance-item:hover .dance-link .char {\n        background: linear-gradient(135deg, var(--pink), var(--gold));\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n    }\n\n    \/* Iskry i nutki (pozostaj\u0105 bez zmian) *\/\n    .sparkle-container { position: absolute; inset: 0; pointer-events: none; }\n    .note-pop { position: absolute; top: -30px; left: 50%; opacity: 0; color: var(--pink); font-size: 1.5rem; }\n<\/style>\n\n<script>\n(function() {\n    \/\/ FUNKCJA ROZBIJAJ\u0104CA TEKST (Przywraca taniec)\n    function prepareDanceText() {\n        document.querySelectorAll('.dance-link').forEach(link => {\n            const text = link.getAttribute('data-text');\n            if (!text) return;\n            link.innerHTML = '';\n            [...text].forEach((char, i) => {\n                const span = document.createElement('span');\n                span.className = 'char';\n                span.textContent = char === ' ' ? '\\u00A0' : char;\n                link.appendChild(span);\n            });\n        });\n    }\n\n    prepareDanceText();\n\n    \/\/ LOGIKA ANIMACJI\n    document.querySelectorAll('.dance-item').forEach(item => {\n        const link = item.querySelector('.dance-link');\n        const animType = item.getAttribute('data-animation');\n\n        item.addEventListener('mouseenter', () => {\n            const chars = link.querySelectorAll('.char');\n            item.classList.add('active');\n            \n            chars.forEach((char, i) => {\n                const d = i * 0.04;\n                if(animType === 'shake') gsap.to(char, { x: 2, yoyo: true, repeat: 5, duration: 0.1, delay: d });\n                else if(animType === 'wave') gsap.to(char, { y: -12, duration: 0.3, yoyo: true, repeat: 1, delay: d });\n                else if(animType === 'bounce') gsap.to(char, { scaleY: 0.7, y: -15, duration: 0.2, yoyo: true, repeat: 3, delay: d });\n                else if(animType === 'spin') gsap.to(char, { rotationY: 360, duration: 0.5, delay: d });\n                else if(animType === 'wiggle') gsap.to(char, { rotation: 12, duration: 0.1, yoyo: true, repeat: 5, delay: d });\n            });\n\n            \/\/ Iskry\n            const container = item.querySelector('.sparkle-container');\n            for(let i=0; i<6; i++) {\n                const s = document.createElement('div');\n                s.className = 'sparkle';\n                s.style.cssText = `position:absolute;width:5px;height:5px;border-radius:50%;background:${Math.random()>0.5?'#FF1493':'#FFD700'}`;\n                container.appendChild(s);\n                gsap.fromTo(s, {x:0,y:0,opacity:1}, {\n                    x:(Math.random()-0.5)*80, y:(Math.random()-0.5)*80, opacity:0, scale:0, duration:0.6, onComplete:()=>s.remove()\n                });\n            }\n        });\n\n        item.addEventListener('mouseleave', () => {\n            const chars = link.querySelectorAll('.char');\n            gsap.to(chars, { x: 0, y: 0, rotationY: 0, rotation: 0, scale: 1, scaleY: 1, duration: 0.3 });\n        });\n    });\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7aed7264 e-flex e-con-boxed e-con e-parent\" data-id=\"7aed7264\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2e24c75c elementor-widget elementor-widget-html\" data-id=\"2e24c75c\" data-element_type=\"widget\" id=\"o-zumbie\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DynaPuff:wght@400;700;900&family=Numans&display=swap\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js\"><\/script>\n\n<section class=\"horizontal-history-wrapper\">\n    <div class=\"horizontal-sticky\">\n        <div class=\"h-bg-text dyna-puff\"><\/div>\n\n        <div class=\"h-scroll-content\">\n            <div class=\"h-panel h-intro\">\n                <div class=\"section-label numans-font\">03. DZIEDZICTWO<\/div>\n                <h3 class=\"h-title main-gradient-text\">HISTORIA<br>ZUMBY<\/h1>\n                <div class=\"scroll-hint numans-font\">PRZESU\u0143 PALCEM <span class=\"arrow-anim\">\u2192<\/span><\/div>\n            <\/div>\n\n            <div class=\"h-panel h-item\">\n                <div class=\"h-year dyna-puff\">1990<\/div>\n                <div class=\"h-card glass-effect\">\n                    <h3 class=\"dyna-puff sub-gradient-text\">Odkrycie<\/h3>\n                    <p class=\"numans-font\">Beto Perez zapomina kasety na aerobik. Improwizacja do latynoskich rytm\u00f3w zmienia fitness na zawsze.<\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"h-panel h-item\">\n                <div class=\"h-year dyna-puff\">2001<\/div>\n                <div class=\"h-card glass-effect\">\n                    <h3 class=\"dyna-puff sub-gradient-text\">Globalny Start<\/h3>\n                    <p class=\"numans-font\">Oficjalne wej\u015bcie na rynek USA. Powstaje marka, kt\u00f3ra staje si\u0119 synonimem rado\u015bci i energii.<\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"h-panel h-item\">\n                <div class=\"h-year dyna-puff\">2012<\/div>\n                <div class=\"h-card glass-effect\">\n                    <h3 class=\"dyna-puff sub-gradient-text\">Era Cyfrowa<\/h3>\n                    <p class=\"numans-font\">Zumba dociera do dom\u00f3w milion\u00f3w ludzi przez gry i aplikacje, \u0142\u0105cz\u0105c pokolenia przed ekranami.<\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"h-panel h-item\">\n                <div class=\"h-year dyna-puff\">NOW<\/div>\n                <div class=\"h-card glass-effect accent-card\">\n                    <h3 class=\"dyna-puff sub-gradient-text\">Rewolucja<\/h3>\n                    <p class=\"numans-font\">Ponad 15 mln tancerzy tygodniowo. Jeste\u015bmy cz\u0119\u015bci\u0105 najwi\u0119kszej spo\u0142eczno\u015bci na \u015bwiecie.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n       \n\n        <div class=\"h-progress-bar\">\n            <div class=\"h-progress-fill\"><\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n    :root {\n        --z-pink: #FF1493;\n        --z-gold: #FFD700;\n        --z-gradient: linear-gradient(135deg, #FF1493 0%, #FFD700 100%);\n    }\n\n    \/* TYPOGRAFIA DLA TEJ SEKCJI *\/\n    .dyna-puff { font-family: 'DynaPuff', cursive !important; }\n    .numans-font { font-family: 'Numans', sans-serif !important; }\n\n    .horizontal-history-wrapper {\n        background: transparent !important;\n        height: 350vh; \/* Kontrola d\u0142ugo\u015bci scrolla i dziury na dole *\/\n        position: relative;\n        touch-action: pan-y; \n    }\n\n    .horizontal-sticky {\n        position: sticky;\n        top: 0;\n        height: 90vh;\n        width: 100%;\n        overflow: hidden;\n        display: flex;\n        align-items: center;\n        z-index: 10;\n    }\n\n    \/* MEGA TYTU\u0141 \"HISTORIA ZUMBY\" *\/\n    .h-title {\n        font-family: 'DynaPuff', cursive !important;\n        font-weight: 900 !important;\n        line-height: 0.85 !important;\n        text-transform: uppercase;\n        margin: 20px 0;\n        font-size: clamp(3.5rem, 12vw, 10rem) !important;\n        background: var(--z-gradient);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        filter: drop-shadow(0 10px 20px rgba(255, 20, 147, 0.3));\n    }\n\n    \/* NAPIS W TLE *\/\n    .h-bg-text {\n        position: absolute;\n        font-size: 30vw;\n        font-weight: 900;\n        color: transparent;\n        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);\n        white-space: nowrap;\n        pointer-events: none;\n        z-index: 1;\n        line-height: 0.8;\n        top: 50%;\n        left: 0;\n        transform: translateY(-50%);\n    }\n\n    .h-scroll-content {\n        display: flex;\n        height: 100%;\n        position: relative;\n        z-index: 5;\n        padding-left: 10vw;\n        will-change: transform;\n    }\n\n    .h-panel {\n        width: 100vw;\n        height: 100%;\n        flex-shrink: 0;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        padding-right: 15vw;\n    }\n\n    .h-year {\n        font-size: clamp(5rem, 15vw, 15rem);\n        color: rgba(255, 255, 255, 0.03);\n        margin-bottom: -4vw;\n        font-weight: 900;\n        transition: all 0.5s ease;\n    }\n\n    .active-panel .h-year {\n        color: var(--z-pink);\n        opacity: 0.4;\n        transform: scale(1.1);\n    }\n\n    .h-card {\n        background: rgba(255, 255, 255, 0.05);\n        border-radius: 40px;\n        padding: clamp(25px, 5vw, 50px);\n        backdrop-filter: blur(20px);\n        -webkit-backdrop-filter: blur(20px);\n        width: 550px;\n        max-width: 85vw;\n        border: 1px solid rgba(255, 255, 255, 0.1);\n        box-shadow: 0 30px 60px rgba(0,0,0,0.3);\n    }\n\n    .sub-gradient-text {\n        background: var(--z-gradient);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        font-size: clamp(1.8rem, 4vw, 2.5rem);\n        margin-bottom: 15px;\n        font-weight: 700;\n    }\n\n    \/* WSKA\u0179NIK *\/\n    .scroll-down-notice {\n        position: absolute;\n        bottom: 80px;\n        left: 50%;\n        transform: translateX(-50%);\n        color: rgba(255, 255, 255, 0.4);\n        font-size: 0.7rem;\n        letter-spacing: 3px;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 10px;\n        opacity: 0;\n        transition: opacity 0.5s ease;\n        z-index: 20;\n    }\n\n    .mouse-icon {\n        width: 20px;\n        height: 35px;\n        border: 2px solid rgba(255, 255, 255, 0.3);\n        border-radius: 20px;\n        position: relative;\n    }\n\n    .mouse-icon::before {\n        content: '';\n        position: absolute;\n        width: 4px; height: 8px;\n        background: var(--z-pink);\n        left: 50%; transform: translateX(-50%);\n        top: 6px; border-radius: 2px;\n        animation: scrollWheel 1.5s infinite;\n    }\n\n    @keyframes scrollWheel {\n        0% { opacity: 1; top: 6px; }\n        100% { opacity: 0; top: 18px; }\n    }\n\n    .h-progress-bar {\n        position: absolute;\n        bottom: 35px;\n        left: 10vw;\n        width: 80vw;\n        height: 2px;\n        background: rgba(255,255,255,0.1);\n        z-index: 20;\n    }\n\n    .h-progress-fill {\n        height: 100%; width: 0%;\n        background: var(--z-gradient);\n    }\n\n    @media (max-width: 768px) {\n        .h-panel { padding-right: 5vw; }\n        .h-card { width: 300px; padding: 25px; }\n        .h-bg-text { font-size: 50vw; }\n        .horizontal-history-wrapper { height: 300vh; } \n    }\n<\/style>\n\n<script>\n    document.addEventListener(\"DOMContentLoaded\", function() {\n        if (typeof gsap === \"undefined\") return;\n        gsap.registerPlugin(ScrollTrigger);\n        \n        const scrollContent = document.querySelector(\".h-scroll-content\");\n        const bgText = document.querySelector(\".h-bg-text\");\n        const notice = document.querySelector(\".scroll-down-notice\");\n\n        \/\/ 1. POZIOMY SCROLL\n        let scrollTween = gsap.to(scrollContent, {\n            x: () => -(scrollContent.scrollWidth - window.innerWidth),\n            ease: \"none\",\n            scrollTrigger: {\n                trigger: \".horizontal-history-wrapper\",\n                start: \"top top\",\n                end: \"bottom bottom\",\n                pin: true,\n                scrub: 1,\n                invalidateOnRefresh: true,\n                anticipatePin: 1,\n                onToggle: self => {\n                    notice.style.opacity = self.isActive ? \"1\" : \"0\";\n                }\n            }\n        });\n\n        \/\/ 2. PARALAKSA T\u0141A (Historia)\n        gsap.to(bgText, {\n            x: () => (window.innerWidth * 0.4), \n            ease: \"none\",\n            scrollTrigger: {\n                trigger: \".horizontal-history-wrapper\",\n                start: \"top top\",\n                end: \"bottom bottom\",\n                scrub: 2\n            }\n        });\n\n        \/\/ 3. POD\u015aWIETLANIE PANELI\n        gsap.utils.toArray(\".h-panel\").forEach((panel) => {\n            ScrollTrigger.create({\n                trigger: panel,\n                containerAnimation: scrollTween,\n                start: \"left center\",\n                end: \"right center\",\n                onToggle: self => {\n                    if (self.isActive) panel.classList.add(\"active-panel\");\n                    else panel.classList.remove(\"active-panel\");\n                }\n            });\n        });\n\n        \/\/ 4. PASEK POST\u0118PU\n        gsap.to(\".h-progress-fill\", {\n            width: \"100%\",\n            ease: \"none\",\n            scrollTrigger: {\n                trigger: \".horizontal-history-wrapper\",\n                start: \"top top\",\n                end: \"bottom bottom\",\n                scrub: 0.3\n            }\n        });\n    });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-157a607 e-flex e-con-boxed e-con e-parent\" data-id=\"157a607\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-54f7b576 elementor-widget elementor-widget-html\" data-id=\"54f7b576\" data-element_type=\"widget\" id=\"o-nas\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js\"><\/script>\n\n<section id=\"zumba-about-explosion\">\n    <div class=\"about-grid-container\">\n        \n        <div class=\"about-info-box\">\n            <span class=\"label-accent numans-font\">POZNAJ NASZ\u0104 PASJ\u0118<\/span>\n            <h2 class=\"dyna-puff explosion-title\">Jeste\u015bmy <br><span class=\"gradient-text\">ZumbaVibes<\/span><\/h2>\n            <p class=\"numans-font\">Miejsce, gdzie fitness spotyka si\u0119 z czyst\u0105 przyjemno\u015bci\u0105.<\/p>\n        <\/div>\n\n        <div class=\"about-tile tile-A\" id=\"about-card-1\">\n            <div class=\"tile-inner glass-effect\">\n                <div class=\"tile-bg\" style=\"background-image: url('https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/02\/egwggwr.webp');\"><\/div>\n                <div class=\"tile-content-layer\">\n                    <div class=\"tile-icon\">\ud83d\udd25<\/div>\n                    <h3 class=\"dyna-puff\">Pasja<\/h3>\n                    <p class=\"numans-font\">Instruktorzy z pasj\u0105.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"about-tile tile-B\" id=\"about-card-2\">\n            <div class=\"tile-inner glass-effect\">\n                <div class=\"tile-bg\" style=\"background-image: url('https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/02\/afefeq.webp');\"><\/div>\n                <div class=\"tile-content-layer\">\n                    <div class=\"tile-icon\">\ud83c\udf1f<\/div>\n                    <h3 class=\"dyna-puff\">Ludzie<\/h3>\n                    <p class=\"numans-font\">Ponad 500 os\u00f3b.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"about-tile tile-C\" id=\"about-stats\">\n            <div class=\"tile-inner stats-box\">\n                <div class=\"stat-item\">\n                    <span class=\"stat-number dyna-puff\" data-target=\"98\">0<\/span>\n                    <span class=\"stat-label numans-font\">% Fun<\/span>\n                <\/div>\n                <div class=\"stat-item\">\n                    <span class=\"stat-number dyna-puff\" data-target=\"15\">0<\/span>\n                    <span class=\"stat-label numans-font\">Lat exp<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"about-tile tile-D\" id=\"about-card-3\">\n            <div class=\"tile-inner glass-effect\">\n                <div class=\"tile-bg\" style=\"background-image: url('https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/02\/kjhvuvt.webp');\"><\/div>\n                <div class=\"tile-content-layer\">\n                    <div class=\"tile-icon\">\ud83d\udcaa<\/div>\n                    <h3 class=\"dyna-puff\">Efekty<\/h3>\n                    <p class=\"numans-font\">Wida\u0107 ju\u017c po miesi\u0105cu!<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=DynaPuff:wght@400;700&family=Numans&display=swap');\n\n    #zumba-about-explosion {\n        position: relative;\n        width: 100%;\n        height: 90vh;\n        background: transparent !important;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        \/* Dodatkowy padding u g\u00f3ry, by sekcja nie by\u0142a za wysoko *\/\n        padding-top: 5vh;\n    }\n\n    .about-grid-container {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        grid-template-rows: repeat(2, 1fr);\n        gap: 20px;\n        max-width: 1400px;\n        width: 100%;\n        \/* Ograniczenie wysoko\u015bci grida, aby zmie\u015bci\u0142 si\u0119 na ekranie *\/\n        height: 80vh;\n        position: relative;\n    }\n\n    .dyna-puff { font-family: 'DynaPuff', cursive !important; }\n    .numans-font { font-family: 'Numans', sans-serif !important; }\n\n    .about-info-box {\n        grid-column: 1 \/ span 2;\n        grid-row: 1;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        z-index: 10;\n        padding-right: 20px;\n    }\n\n    .explosion-title { font-size: clamp(2.2rem, 4.5vw, 4rem); line-height: 1.1; color: white; margin: 10px 0; }\n    \n    .gradient-text {\n        background: linear-gradient(135deg, #FF1493, #FFA500);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n    }\n\n    .label-accent { color: #FFD700; letter-spacing: 2px; font-weight: bold; font-size: 12px; }\n\n    .about-tile { opacity: 0; position: relative; height: 100%; width: 100%; }\n\n    .tile-inner {\n        position: relative;\n        height: 100%;\n        width: 100%;\n        border-radius: 30px;\n        overflow: hidden;\n        border: 1px solid rgba(255, 255, 255, 0.15);\n    }\n\n    \/* T\u0141O ZDJ\u0118CIA W KAFELKU *\/\n    .tile-bg {\n        position: absolute;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background-size: cover;\n        background-position: center;\n        z-index: 1;\n    }\n\n    \/* WARSTWA TEKSTU NAD ZDJ\u0118CIEM *\/\n    .tile-content-layer {\n        position: relative;\n        z-index: 2;\n        height: 100%;\n        padding: 25px;\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-end;\n        background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.1) 100%);\n    }\n\n    .glass-effect {\n        backdrop-filter: blur(10px);\n        -webkit-backdrop-filter: blur(10px);\n    }\n\n    .stats-box {\n        background: linear-gradient(135deg, #FF1493, #FF6B9D);\n        color: white;\n        display: flex;\n        justify-content: space-around;\n        align-items: center;\n        z-index: 2;\n    }\n\n    .tile-icon { font-size: 2.5rem; margin-bottom: 10px; }\n    .about-tile h3 { color: white; font-size: 1.5rem; margin: 5px 0; }\n    .about-tile p { color: rgba(255,255,255,0.85); font-size: 0.9rem; }\n\n    .stat-item { text-align: center; }\n    .stat-number { font-size: clamp(2rem, 3vw, 3rem); display: block; font-weight: 700; }\n    .stat-label { font-size: 0.7rem; text-transform: uppercase; opacity: 0.9; }\n\n    \/* Uk\u0142ad Grida - Desktop *\/\n    .tile-A { grid-column: 3; grid-row: 1; }\n    .tile-B { grid-column: 4; grid-row: 1 \/ span 2; }\n    .tile-C { grid-column: 1 \/ span 2; grid-row: 2; }\n    .tile-D { grid-column: 3; grid-row: 2; }\n\n    \/* RESPONSIVE MOBILE - 2 KOLUMNY ZAMIAST LISTY *\/\n    @media (max-width: 768px) {\n     #zumba-about-explosion {\n    position: relative;\n    width: 100%;\n    min-height: 100vh; \/* Pe\u0142na wysoko\u015b\u0107 ekranu *\/\n    background: transparent !important;\n    display: flex;\n    align-items: center; \/* To wycentruje grid pionowo *\/\n    justify-content: center;\n    overflow: hidden;\n    padding-top: 80px; \/* Margines bezpiecze\u0144stwa na Tw\u00f3j pasek Dock *\/\n    box-sizing: border-box;\n}\n\n        .about-info-box { grid-column: 1 \/ span 2; text-align: center; padding-right: 0; margin-bottom: 10px; }\n        .explosion-title { font-size: 1.8rem; }\n        \n        \/* Ustawienie kafelk\u00f3w w siatce 2x2 na mobile *\/\n        .tile-A { grid-column: 1; grid-row: 2; height: 160px; }\n        .tile-B { grid-column: 2; grid-row: 2; height: 160px; }\n        .tile-C { grid-column: 1 \/ span 2; grid-row: 3; height: 100px; }\n        .tile-D { grid-column: 1 \/ span 2; grid-row: 4; height: 140px; }\n\n        .tile-content-layer { padding: 15px; }\n        .tile-icon { font-size: 1.8rem; }\n        .about-tile h3 { font-size: 1.1rem; }\n    }\n<\/style>\n\n<script>\n    (function() {\n        const initAboutExplosion = () => {\n            if (typeof gsap === \"undefined\") return;\n            gsap.registerPlugin(ScrollTrigger);\n\n            const tl = gsap.timeline({\n                scrollTrigger: {\n                    trigger: \"#zumba-about-explosion\",\n                    start: \"top 60px\",\n                    end: \"+=1600\",\n                    scrub: 0.6,\n                    pin: true,\n                    anticipatePin: 1\n                }\n            });\n\n            \/\/ Wlot nag\u0142\u00f3wka\n            tl.from(\".about-info-box\", { y: -50, opacity: 0, duration: 1 }, 0);\n\n            \/\/ Eksplozja kafelk\u00f3w (zmienione warto\u015bci, by nie wyje\u017cd\u017ca\u0142y za wysoko)\n            tl.fromTo(\"#about-card-1\", { x: 300, y: -100, rotate: 15 }, { x: 0, y: 0, rotate: 0, opacity: 1, duration: 2 }, 0.2);\n            tl.fromTo(\"#about-card-2\", { x: 300, y: 300, rotate: -10 }, { x: 0, y: 0, rotate: 0, opacity: 1, duration: 2 }, 0.4);\n            tl.fromTo(\"#about-stats\", { y: 400, opacity: 0 }, { y: 0, opacity: 1, duration: 2 }, 0.3);\n            tl.fromTo(\"#about-card-3\", { x: -300, y: 200, rotate: -15 }, { x: 0, y: 0, rotate: 0, opacity: 1, duration: 2 }, 0.5);\n\n            \/\/ Animacja licznika\n            const stats = document.querySelectorAll('.stat-number');\n            stats.forEach(stat => {\n                const target = parseInt(stat.getAttribute('data-target'));\n                tl.to(stat, {\n                    innerText: target,\n                    duration: 1.5,\n                    snap: { innerText: 1 },\n                    ease: \"none\"\n                }, 0.8);\n            });\n            \n            ScrollTrigger.refresh();\n        };\n\n        let checkGSAP = setInterval(() => {\n            if (typeof gsap !== \"undefined\" && typeof ScrollTrigger !== \"undefined\") {\n                clearInterval(checkGSAP);\n                initAboutExplosion();\n            }\n        }, 100);\n    })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2c10403 e-flex e-con-boxed e-con e-parent\" data-id=\"2c10403\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a40ce5a elementor-widget elementor-widget-html\" data-id=\"a40ce5a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"zumba-stats-section\" id=\"stats-trigger\">\n    <div class=\"stats-container\">\n        <div class=\"stat-card glass-effect\">\n            <div class=\"stat-icon\">\ud83d\udd25<\/div>\n            <div class=\"stat-value dyna-puff\" data-target=\"85000\">0<\/div>\n            <div class=\"stat-label numans-font\">Spalonych Kalorii \/ msc<\/div>\n            <div class=\"stat-bar\"><div class=\"bar-fill pink-glow\"><\/div><\/div>\n        <\/div>\n\n        <div class=\"stat-card glass-effect\">\n            <div class=\"stat-icon\">\ud83d\udc83<\/div>\n            <div class=\"stat-value dyna-puff\" data-target=\"1240\">0<\/div>\n            <div class=\"stat-label numans-font\">Przeta\u0144czonych Godzin<\/div>\n            <div class=\"stat-bar\"><div class=\"bar-fill gold-glow\"><\/div><\/div>\n        <\/div>\n\n        <div class=\"stat-card glass-effect\">\n            <div class=\"stat-icon\">\u2728<\/div>\n            <div class=\"stat-value dyna-puff\" data-target=\"100\">0<\/div>\n            <div class=\"stat-label numans-font\">% Pozytywnej Energii<\/div>\n            <div class=\"stat-bar\"><div class=\"bar-fill blue-glow\"><\/div><\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n    .zumba-stats-section {\n        padding: 60px 20px;\n        background: transparent;\n    }\n\n    .stats-container {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n        gap: 30px;\n        max-width: 1200px;\n        margin: 0 auto;\n    }\n\n    .stat-card {\n        padding: 40px 30px;\n        text-align: center;\n        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    }\n\n    .stat-card:hover {\n        transform: translateY(-10px) scale(1.02);\n    }\n\n    .stat-icon {\n        font-size: 40px;\n        margin-bottom: 15px;\n        filter: drop-shadow(0 0 10px rgba(255,255,255,0.3));\n    }\n\n    .stat-value {\n        font-size: 3.5rem;\n        color: #fff;\n        margin-bottom: 10px;\n        text-shadow: 0 0 20px rgba(255, 20, 147, 0.4);\n    }\n\n    .stat-label {\n        font-size: 14px;\n        text-transform: uppercase;\n        letter-spacing: 2px;\n        color: #FFD700;\n        margin-bottom: 20px;\n    }\n\n    \/* Paski post\u0119pu pod cyframi *\/\n    .stat-bar {\n        width: 100%;\n        height: 4px;\n        background: rgba(255,255,255,0.1);\n        border-radius: 2px;\n        overflow: hidden;\n    }\n\n    .bar-fill {\n        width: 0%; \/* Animowane przez GSAP *\/\n        height: 100%;\n        transition: width 2s ease-out;\n    }\n\n    .pink-glow { background: #FF1493; box-shadow: 0 0 10px #FF1493; }\n    .gold-glow { background: #FFD700; box-shadow: 0 0 10px #FFD700; }\n    .blue-glow { background: #00D2FF; box-shadow: 0 0 10px #00D2FF; }\n\n    @media (max-width: 768px) {\n        .stat-value { font-size: 2.5rem; }\n    }\n<\/style>\n\n<script>\n(function() {\n    const initZumbaCounters = () => {\n        if (typeof gsap === \"undefined\") return;\n\n        gsap.utils.toArray(\".stat-card\").forEach((card) => {\n            const valueDisplay = card.querySelector(\".stat-value\");\n            const targetValue = parseInt(valueDisplay.getAttribute(\"data-target\"));\n            const bar = card.querySelector(\".bar-fill\");\n\n            ScrollTrigger.create({\n                trigger: card,\n                start: \"top 85%\",\n                onEnter: () => {\n                    \/\/ Animacja licznika\n                    let current = { val: 0 };\n                    gsap.to(current, {\n                        val: targetValue,\n                        duration: 2.5,\n                        ease: \"power2.out\",\n                        onUpdate: () => {\n                            valueDisplay.innerText = Math.floor(current.val).toLocaleString() + (targetValue === 100 ? \"%\" : \"\");\n                        }\n                    });\n                    \n                    \/\/ Animacja paska pod spodem\n                    gsap.to(bar, { width: \"100%\", duration: 2, ease: \"power4.out\" });\n                    \n                    \/\/ Lekki podskok karty przy aktywacji\n                    gsap.from(card, { y: 30, opacity: 0, duration: 1, ease: \"back.out\" });\n                },\n                once: true \/\/ Odpala tylko raz przy pierwszym przescrollowaniu\n            });\n        });\n    };\n\n    if (window.gsap && window.ScrollTrigger) initZumbaCounters();\n    else window.addEventListener('load', initZumbaCounters);\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5e56ed47 e-flex e-con-boxed e-con e-parent\" data-id=\"5e56ed47\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3acc1db8 elementor-widget elementor-widget-html\" data-id=\"3acc1db8\" data-element_type=\"widget\" id=\"program\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js\"><\/script>\n\n<div class=\"zumba-programs-wrapper\">\n    <section class=\"programs-section\" id=\"programy\">\n        <div class=\"programs-container\">\n            <div class=\"section-header\">\n                <div class=\"section-label numans-font\">Znajd\u017a Swoj\u0105 Energi\u0119<\/div>\n                <h2 class=\"section-title dyna-puff main-gradient-text\">Nasze Programy<\/h2>\n                <p class=\"section-subtitle numans-font\">Wybierz intensywno\u015b\u0107 dopasowan\u0105 do Twoich cel\u00f3w. Od tanecznej zabawy po ekstremalny wycisk.<\/p>\n            <\/div>\n\n            <div class=\"programs-tabs\">\n                <button class=\"tab-button active dyna-puff\" data-tab=\"classic\">Zumba Classic<\/button>\n                <button class=\"tab-button dyna-puff\" data-tab=\"strong\">Zumba Strong<\/button>\n                <button class=\"tab-button dyna-puff\" data-tab=\"toning\">Zumba Toning<\/button>\n                <button class=\"tab-button dyna-puff\" data-tab=\"gold\">Zumba Gold<\/button>\n            <\/div>\n\n            <div class=\"programs-content\">\n                <div class=\"program-panel active\" data-panel=\"classic\">\n                    <div class=\"program-grid\">\n                        <div class=\"program-image glass-effect\">\n                            <img decoding=\"async\" src=\"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/02\/g453h64h4.webp\" alt=\"Zumba Classic\">\n                        <\/div>\n                        <div class=\"program-details glass-effect\">\n                            <h3 class=\"program-name dyna-puff\">Zumba Classic<\/h3>\n                            <p class=\"program-tagline numans-font\">Oryginalna Eksplozja Energii<\/p>\n                            <p class=\"program-description numans-font\">Salsa, merengue i reggaeton w jednym! To taneczna podr\u00f3\u017c, kt\u00f3ra spala kalorie i buduje u\u015bmiech. Idealna dla ka\u017cdego.<\/p>\n                            <div class=\"program-cta\">\n                                <button class=\"cta-button cta-primary dyna-puff open-form\">Zapisz Si\u0119<\/button>\n                                <button class=\"cta-button cta-secondary dyna-puff open-schedule\">Grafik<\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"program-panel\" data-panel=\"strong\">\n                    <div class=\"program-grid\">\n                        <div class=\"program-image glass-effect\">\n                            <img decoding=\"async\" src=\"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/02\/g453h64h4.webp\" alt=\"Zumba Strong\" style=\"filter: hue-rotate(280deg) saturate(1.5);\">\n                        <\/div>\n                        <div class=\"program-details glass-effect\">\n                            <h3 class=\"program-name dyna-puff\">Zumba Strong<\/h3>\n                            <p class=\"program-tagline numans-font\">HIIT w Rytmie Muzyki<\/p>\n                            <p class=\"program-description numans-font\">To nie taniec, to wyzwanie! Wysokointensywny trening interwa\u0142owy, gdzie ka\u017cdy ruch ma sw\u00f3j bit. Buduj si\u0142\u0119 i wytrzyma\u0142o\u015b\u0107.<\/p>\n                            <div class=\"program-cta\">\n                                <button class=\"cta-button cta-primary dyna-puff open-form\">Zapisz Si\u0119<\/button>\n                                <button class=\"cta-button cta-secondary dyna-puff open-schedule\">Grafik<\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"program-panel\" data-panel=\"toning\">\n                    <div class=\"program-grid\">\n                        <div class=\"program-image glass-effect\">\n                            <img decoding=\"async\" src=\"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/02\/g453h64h4.webp\" alt=\"Zumba Toning\" style=\"filter: hue-rotate(150deg);\">\n                        <\/div>\n                        <div class=\"program-details glass-effect\">\n                            <h3 class=\"program-name dyna-puff\">Zumba Toning<\/h3>\n                            <p class=\"program-tagline numans-font\">Rze\u017aba z Muzyk\u0105<\/p>\n                            <p class=\"program-description numans-font\">Wykorzystaj ci\u0119\u017carki Zumba Toning Sticks, aby doda\u0107 op\u00f3r do swoich ruch\u00f3w. Modeluj ramiona, uda i brzuch \u015bwietnie si\u0119 bawi\u0105c.<\/p>\n                            <div class=\"program-cta\">\n                                <button class=\"cta-button cta-primary dyna-puff open-form\">Zapisz Si\u0119<\/button>\n                                <button class=\"cta-button cta-secondary dyna-puff open-schedule\">Grafik<\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"program-panel\" data-panel=\"gold\">\n                    <div class=\"program-grid\">\n                        <div class=\"program-image glass-effect\">\n                            <img decoding=\"async\" src=\"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/02\/g453h64h4.webp\" alt=\"Zumba Gold\" style=\"filter: sepia(0.5) contrast(1.1);\">\n                        <\/div>\n                        <div class=\"program-details glass-effect\">\n                            <h3 class=\"program-name dyna-puff\">Zumba Gold<\/h3>\n                            <p class=\"program-tagline numans-font\">Dla Senior\u00f3w i Pocz\u0105tkuj\u0105cych<\/p>\n                            <p class=\"program-description numans-font\">Bezpieczne tempo, \u0142atwe kroki i ta sama fantastyczna atmosfera. Idealny wyb\u00f3r, by zacz\u0105\u0107 dba\u0107 o zdrowie i kondycj\u0119.<\/p>\n                            <div class=\"program-cta\">\n                                <button class=\"cta-button cta-primary dyna-puff open-form\">Zapisz Si\u0119<\/button>\n                                <button class=\"cta-button cta-secondary dyna-puff open-schedule\">Grafik<\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n<\/div>\n\n<div class=\"zumba-popup\" id=\"schedule-popup\">\n    <div class=\"popup-content glass-effect\">\n        <button class=\"close-popup\">&times;<\/button>\n        <h2 class=\"dyna-puff main-gradient-text\">Grafik Zaj\u0119\u0107<\/h2>\n        <div class=\"schedule-table numans-font\">\n            <div class=\"sched-item\"><span>PN - 18:00<\/span> <strong>Classic<\/strong><\/div>\n            <div class=\"sched-item\"><span>WT - 19:30<\/span> <strong>Strong<\/strong><\/div>\n            <div class=\"sched-item\"><span>CZ - 18:00<\/span> <strong>Toning<\/strong><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"zumba-popup\" id=\"form-popup\">\n    <div class=\"popup-content glass-effect\">\n        <button class=\"close-popup\">&times;<\/button>\n        <h2 class=\"dyna-puff main-gradient-text\">Do\u0142\u0105cz do nas!<\/h2>\n        <form id=\"zumba-join-form\" class=\"numans-font\">\n            <div class=\"input-group\"><input type=\"text\" placeholder=\"Twoje Imi\u0119\" required><\/div>\n            <div class=\"input-group\"><input type=\"email\" placeholder=\"Tw\u00f3j Email\" required><\/div>\n            <button type=\"submit\" class=\"cta-button cta-primary dyna-puff submit-btn\">Wchodz\u0119 w to! \ud83d\udd25<\/button>\n        <\/form>\n        <div class=\"success-message dyna-puff\">Witamy w ekipie! \ud83d\udc83<\/div>\n    <\/div>\n<\/div>\n\n<style>\n    .main-gradient-text {\n        background: linear-gradient(135deg, #FF1493, #FFD700);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n    }\n\n    .programs-section { padding: 40px 5%; position: relative; }\n    .programs-container { max-width: 1000px; margin: 0 auto; }\n\n    .section-header { text-align: center; margin-bottom: 30px; }\n    .section-title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 10px; color: white; }\n    .section-subtitle { opacity: 0.7; max-width: 600px; margin: 0 auto; color: white; font-size: 0.9rem; }\n\n    .programs-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 30px; flex-wrap: wrap; }\n    .tab-button {\n        padding: 8px 18px; background: rgba(255,255,255,0.05);\n        border: 1px solid rgba(255,255,255,0.1); border-radius: 50px;\n        color: white; cursor: pointer; transition: 0.3s; font-size: 0.85rem;\n    }\n    .tab-button.active { background: linear-gradient(135deg, #FF1493, #FFD700); border-color: transparent; box-shadow: 0 5px 15px rgba(255, 20, 147, 0.3); }\n\n    .program-panel { display: none; opacity: 0; transform: translateY(10px); }\n    .program-panel.active { display: block; opacity: 1; transform: translateY(0); }\n    .program-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 20px; align-items: center; }\n\n    .program-image { height: 320px; border-radius: 25px; overflow: hidden; }\n    .program-image img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s ease; }\n\n    .glass-effect {\n        background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(20px);\n        border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 25px;\n    }\n\n    .program-details { padding: 25px; display: flex; flex-direction: column; justify-content: center; color: white; }\n    .program-name { font-size: 1.8rem; margin-bottom: 5px; color: white; }\n    .program-tagline { color: #FFD700; font-size: 1rem; margin-bottom: 12px; }\n    .program-description { line-height: 1.5; opacity: 0.8; margin-bottom: 15px; font-size: 0.9rem; }\n\n    .program-cta { display: flex; gap: 10px; margin-top: 10px; }\n    .cta-button { padding: 10px 20px; border-radius: 50px; cursor: pointer; border: none; font-weight: bold; transition: 0.3s; font-size: 0.9rem; }\n    .cta-primary { background: linear-gradient(45deg, #FF1493, #FF8C00); color: white; }\n    .cta-secondary { background: transparent; border: 1px solid white; color: white; }\n\n    .zumba-popup {\n        position: fixed; top: 0; left: 0; width: 100%; height: 100%;\n        background: rgba(0,0,0,0.9); display: none; align-items: center; justify-content: center;\n        z-index: 99999; opacity: 0;\n    }\n    .popup-content { width: 90%; max-width: 450px; padding: 40px; text-align: center; position: relative; color: white; }\n    .close-popup { position: absolute; top: 15px; right: 20px; background: none; border: none; color: white; font-size: 2rem; cursor: pointer; }\n    .sched-item { display: flex; justify-content: space-between; padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); }\n    .input-group input { width: 100%; padding: 12px; margin-bottom: 10px; border-radius: 10px; background: rgba(0,0,0,0.5); color: white; border: 1px solid rgba(255,255,255,0.2); }\n    .success-message { display: none; font-size: 1.2rem; color: #FFD700; margin-top: 20px; }\n\n    @media (max-width: 968px) {\n        .program-grid { grid-template-columns: 1fr; }\n        .program-image { height: 220px; }\n        .program-details { padding: 20px; }\n    }\n<\/style>\n\n<script>\n(function() {\n    const initZumbaPrograms = () => {\n        if (typeof gsap === \"undefined\") return;\n        gsap.registerPlugin(ScrollTrigger);\n\n        const tabs = document.querySelectorAll('.tab-button');\n        const panels = document.querySelectorAll('.program-panel');\n\n        tabs.forEach(tab => {\n            tab.addEventListener('click', () => {\n                const target = tab.dataset.tab;\n                const currentPanel = document.querySelector('.program-panel.active');\n                const nextPanel = document.querySelector(`[data-panel=\"${target}\"]`);\n\n                if (currentPanel === nextPanel) return;\n\n                tabs.forEach(t => t.classList.remove('active'));\n                tab.classList.add('active');\n\n                gsap.to(currentPanel, { opacity: 0, y: 10, duration: 0.3, onComplete: () => {\n                    currentPanel.classList.remove('active');\n                    nextPanel.classList.add('active');\n                    gsap.fromTo(nextPanel, { opacity: 0, y: 10 }, { opacity: 1, y: 0, duration: 0.4 });\n                }});\n            });\n        });\n\n        const openPopup = (id) => {\n            const p = document.getElementById(id);\n            if (!p) return;\n            p.style.display = 'flex';\n            gsap.to(p, { opacity: 1, duration: 0.3 });\n            gsap.fromTo(p.querySelector('.popup-content'), { scale: 0.8, y: 20 }, { scale: 1, y: 0, duration: 0.4, ease: \"back.out(1.7)\" });\n        };\n\n        const closePopups = () => {\n            gsap.to('.zumba-popup', { opacity: 0, duration: 0.2, onComplete: () => {\n                document.querySelectorAll('.zumba-popup').forEach(p => p.style.display = 'none');\n            }});\n        };\n\n        document.body.addEventListener('click', (e) => {\n            if(e.target.classList.contains('open-form')) openPopup('form-popup');\n            if(e.target.classList.contains('open-schedule')) openPopup('schedule-popup');\n            if(e.target.classList.contains('close-popup') || e.target.classList.contains('zumba-popup')) closePopups();\n        });\n\n        const form = document.getElementById('zumba-join-form');\n        const successMsg = document.querySelector('.success-message');\n        if(form) {\n            form.addEventListener('submit', (e) => {\n                e.preventDefault();\n                gsap.to(form, { opacity: 0, scale: 0.9, onComplete: () => {\n                    form.style.display = 'none';\n                    successMsg.style.display = 'block';\n                    gsap.fromTo(successMsg, { opacity: 0, y: 10 }, { opacity: 1, y: 0 });\n                }});\n            });\n        }\n    };\n\n    if (window.gsap) {\n        initZumbaPrograms();\n    } else {\n        window.addEventListener('load', initZumbaPrograms);\n    }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1bee68e2 e-flex e-con-boxed e-con e-parent\" data-id=\"1bee68e2\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7a67ccc0 elementor-widget elementor-widget-html\" data-id=\"7a67ccc0\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"zumba-marquee\">\n    <div class=\"marquee-content\">\n        <span>ZUMBA \u2022 ENERGY \u2022 DANCE \u2022 BURN \u2022 FLOW \u2022 <\/span>\n        <span>ZUMBA \u2022 ENERGY \u2022 DANCE \u2022 BURN \u2022 FLOW \u2022 <\/span>\n        <span>ZUMBA \u2022 ENERGY \u2022 DANCE \u2022 BURN \u2022 FLOW \u2022 <\/span>\n    <\/div>\n<\/div>\n\n<style>\n.zumba-marquee {\n    background: #FF0080; \/* Kolor fuksji z logo *\/\n    padding: 20px 0;\n    overflow: hidden;\n    display: flex;\n    white-space: nowrap;\n    transform: rotate(-2deg); \/* Lekki skos dodaje dynamiki *\/\n    margin: 40px 0;\n    border-top: 4px solid #FF8C00;\n    border-bottom: 4px solid #FF8C00;\n}\n\n.marquee-content {\n    display: flex;\n    animation: marquee 20s linear infinite;\n}\n\n.marquee-content span {\n    font-family: 'DynaPuff', cursive;\n    font-size: 4rem;\n    color: white;\n    padding: 0 20px;\n    text-transform: uppercase;\n}\n\n@keyframes marquee {\n    0% { transform: translateX(0); }\n    100% { transform: translateX(-50%); }\n}\n\n\/* Interakcja: po najechaniu tekst staje si\u0119 obrysem *\/\n.zumba-marquee:hover .marquee-content span {\n    -webkit-text-stroke: 2px white;\n    color: transparent;\n    cursor: pointer;\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-46a39f3b e-flex e-con-boxed e-con e-parent\" data-id=\"46a39f3b\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1a7d0647 elementor-widget elementor-widget-html\" data-id=\"1a7d0647\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"schedule-section\">\n    <div class=\"section-header\" style=\"text-align: center; margin-bottom: 50px;\">\n        <span class=\"label-accent numans-font\" style=\"color: #FFD700; letter-spacing: 3px; font-weight: bold;\">SPRAWD\u0179 TERMINY<\/span>\n        <h2 class=\"dyna-puff schedule-title\">Tw\u00f3j <span class=\"gradient-text\">Grafik<\/span> Energii<\/h2>\n    <\/div>\n\n    <div class=\"days-nav\">\n        <button class=\"day-btn active dyna-puff\" onclick=\"showDay('mon', this)\">PON<\/button>\n        <button class=\"day-btn dyna-puff\" onclick=\"showDay('tue', this)\">WT<\/button>\n        <button class=\"day-btn dyna-puff\" onclick=\"showDay('wed', this)\">\u015aR<\/button>\n        <button class=\"day-btn dyna-puff\" onclick=\"showDay('thu', this)\">CZW<\/button>\n        <button class=\"day-btn dyna-puff\" onclick=\"showDay('fri', this)\">PT<\/button>\n    <\/div>\n\n    <div class=\"classes-container\" id=\"scheduleBox\">\n        <div class=\"class-item mon active-flex\">\n            <div class=\"class-time dyna-puff\">18:00<\/div>\n            <div class=\"class-details\">\n                <h4 class=\"dyna-puff\">Zumba Classic<\/h4>\n                <span class=\"numans-font\">Instruktor: Anna Nowak | Sala: A (Lustrzana)<\/span>\n            <\/div>\n            <button class=\"btn-join dyna-puff\" onclick=\"openPopup('Zumba Classic - Pon 18:00')\">Zapisz si\u0119<\/button>\n        <\/div>\n        \n        <div class=\"class-item mon active-flex\">\n            <div class=\"class-time dyna-puff\">20:00<\/div>\n            <div class=\"class-details\">\n                <h4 class=\"dyna-puff\">Strong Nation<\/h4>\n                <span class=\"numans-font\">Instruktor: Marek Rythmos | Sala: B (Cross)<\/span>\n            <\/div>\n            <button class=\"btn-join dyna-puff\" onclick=\"openPopup('Strong Nation - Pon 20:00')\">Zapisz si\u0119<\/button>\n        <\/div>\n\n        <div class=\"class-item tue\">\n            <div class=\"class-time dyna-puff\">17:30<\/div>\n            <div class=\"class-details\">\n                <h4 class=\"dyna-puff\">Zumba Kids<\/h4>\n                <span class=\"numans-font\">Instruktor: Sonia Dance | Sala: A (Lustrzana)<\/span>\n            <\/div>\n            <button class=\"btn-join dyna-puff\" onclick=\"openPopup('Zumba Kids - Wt 17:30')\">Zapisz si\u0119<\/button>\n        <\/div>\n\n        <div class=\"class-item wed\">\n            <div class=\"class-time dyna-puff\">18:30<\/div>\n            <div class=\"class-details\">\n                <h4 class=\"dyna-puff\">Zumba Toning<\/h4>\n                <span class=\"numans-font\">Instruktor: Barbara K. | Sala: B (Cross)<\/span>\n            <\/div>\n            <button class=\"btn-join dyna-puff\" onclick=\"openPopup('Zumba Toning - \u015ar 18:30')\">Zapisz si\u0119<\/button>\n        <\/div>\n\n        <div class=\"class-item thu\">\n            <div class=\"class-time dyna-puff\">19:30<\/div>\n            <div class=\"class-details\">\n                <h4 class=\"dyna-puff\">Zumba Gold<\/h4>\n                <span class=\"numans-font\">Instruktor: Anna Nowak | Sala: A (Lustrzana)<\/span>\n            <\/div>\n            <button class=\"btn-join dyna-puff\" onclick=\"openPopup('Zumba Gold - Czw 19:30')\">Zapisz si\u0119<\/button>\n        <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"zumba-popup-overlay\" id=\"zumbaPopup\">\n    <div class=\"zumba-popup-content glass-effect\">\n        <button class=\"close-popup dyna-puff\" onclick=\"closePopup()\">&times;<\/button>\n        <h3 class=\"dyna-puff gradient-text\" id=\"popupTitle\">Zapisz si\u0119 na Kurs<\/h3>\n        <form class=\"zumba-form numans-font\">\n            <input type=\"text\" placeholder=\"Imi\u0119 i Nazwisko\" required>\n            <input type=\"email\" placeholder=\"Tw\u00f3j E-mail\" required>\n            <input type=\"tel\" placeholder=\"Numer Telefonu\" required>\n            <button type=\"submit\" class=\"dyna-puff submit-btn\">Potwierdzam udzia\u0142<\/button>\n        <\/form>\n    <\/div>\n<\/div>\n\n<style>\n    \/* STYL GRAFIKU - PRZEZROCZYSTY *\/\n    .schedule-section { padding: 80px 5%; background: transparent !important; }\n    .schedule-title { font-size: clamp(2.5rem, 6vw, 4rem); color: white; margin-top: 10px; }\n\n    .days-nav { display: flex; justify-content: center; gap: 12px; margin-bottom: 40px; flex-wrap: wrap; }\n    \n    .day-btn {\n        padding: 12px 30px; border-radius: 40px; border: 1px solid rgba(255, 255, 255, 0.2);\n        background: rgba(255, 255, 255, 0.05); color: white; cursor: pointer; transition: 0.3s; backdrop-filter: blur(10px);\n    }\n    .day-btn.active { background: linear-gradient(135deg, #FF1493, #FFA500); border-color: transparent; transform: scale(1.1); }\n\n    .class-item {\n        display: none; align-items: center; background: rgba(255, 255, 255, 0.05);\n        margin-bottom: 15px; padding: 25px; border-radius: 25px; border: 1px solid rgba(255, 255, 255, 0.1);\n        backdrop-filter: blur(15px); transition: 0.3s;\n    }\n    .class-item.active-flex { display: flex; }\n    .class-item:hover { border-color: #FF1493; transform: translateX(10px); background: rgba(255, 255, 255, 0.08); }\n\n    .class-time { font-size: 1.6rem; background: linear-gradient(135deg, #FF1493, #FFA500); -webkit-background-clip: text; -webkit-text-fill-color: transparent; min-width: 100px; }\n    .class-details h4 { font-size: 1.4rem; color: white; margin-bottom: 5px; }\n    .class-details span { color: rgba(255,255,255,0.6); font-size: 0.9rem; }\n\n    \/* PRZYCISKI - GRADIENT ZAMIAST BIA\u0141EGO *\/\n    .btn-join {\n        background: linear-gradient(135deg, #FF1493, #FFA500);\n        color: white; border: none; padding: 10px 25px; border-radius: 50px;\n        font-weight: bold; cursor: pointer; transition: 0.3s;\n    }\n    .btn-join:hover { transform: scale(1.1); box-shadow: 0 0 20px rgba(255, 20, 147, 0.5); }\n\n    \/* POPUP STYL *\/\n    .zumba-popup-overlay {\n        position: fixed; top: 0; left: 0; width: 100%; height: 100%;\n        background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center;\n        z-index: 10000; opacity: 0;\n    }\n    .zumba-popup-content {\n        width: 90%; max-width: 500px; padding: 50px; border-radius: 40px;\n        position: relative; text-align: center; border: 1px solid rgba(255,255,255,0.1);\n    }\n    .zumba-form input {\n        width: 100%; padding: 15px; margin-bottom: 15px; border-radius: 20px;\n        border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: white;\n    }\n    .submit-btn {\n        width: 100%; padding: 15px; border-radius: 50px; border: none;\n        background: linear-gradient(135deg, #FF1493, #FFA500); color: white; font-weight: bold; cursor: pointer;\n    }\n    .close-popup { position: absolute; top: 20px; right: 25px; background: none; border: none; color: white; font-size: 2rem; cursor: pointer; }\n\n    @media (max-width: 600px) { .class-item { flex-direction: column; text-align: center; gap: 15px; } .class-time { min-width: auto; } }\n<\/style>\n\n<script>\n\/\/ Poka\u017c dzie\u0144\nfunction showDay(day, btn) {\n    document.querySelectorAll('.day-btn').forEach(b => b.classList.remove('active'));\n    btn.classList.add('active');\n\n    const selected = document.querySelectorAll('.' + day);\n    gsap.to(\".class-item\", {\n        opacity: 0, x: -20, duration: 0.2, \n        onComplete: () => {\n            document.querySelectorAll('.class-item').forEach(i => { i.style.display='none'; i.classList.remove('active-flex'); });\n            selected.forEach(i => { i.style.display='flex'; i.classList.add('active-flex'); });\n            gsap.fromTo(selected, {opacity: 0, x: 30}, {opacity: 1, x: 0, duration: 0.4, stagger: 0.1});\n        }\n    });\n}\n\n\/\/ Obs\u0142uga Popup\nfunction openPopup(title) {\n    const popup = document.getElementById('zumbaPopup');\n    document.getElementById('popupTitle').innerText = title;\n    popup.style.display = 'flex';\n    gsap.to(popup, {opacity: 1, duration: 0.3});\n}\n\nfunction closePopup() {\n    const popup = document.getElementById('zumbaPopup');\n    gsap.to(popup, {opacity: 0, duration: 0.3, onComplete: () => popup.style.display = 'none'});\n}\n\n\/\/ Zamknij po klikni\u0119ciu w t\u0142o\nwindow.onclick = function(event) {\n    const popup = document.getElementById('zumbaPopup');\n    if (event.target == popup) closePopup();\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-69ae1455 e-flex e-con-boxed e-con e-parent\" data-id=\"69ae1455\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-78976542 elementor-widget elementor-widget-html\" data-id=\"78976542\" data-element_type=\"widget\" id=\"trenerzy\" data-widget_type=\"html.default\">\n\t\t\t\t\t <section class=\"stack-section-wrapper\" id=\"coach-stack-trigger\">\n\n    <div class=\"stack-intro\">\n\n        <span class=\"numans-font accent-label\">POZNAJ NASZ TEAM<\/span>\n\n        <h2 class=\"dyna-puff stack-title gradient-text\">Nasi Trenerzy<\/h2>\n\n    <\/div>\n\n\n    <div class=\"cards-stack-container\">\n\n        <div class=\"coach-card card-1\" style=\"background-image: url('https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/02\/anna.webp');\">\n\n            <div class=\"card-text-zone\">\n\n                <div class=\"trainer-badge numans-font\">Head Instructor<\/div>\n\n                <div class=\"card-content\">\n\n                    <h3 class=\"dyna-puff\">Maria Lopez<\/h3>\n\n                    <p class=\"trainer-specialty numans-font\">Zumba Master & Choreograf<\/p>\n\n                    <p class=\"trainer-bio numans-font\">12 lat do\u015bwiadczenia w ta\u0144cu latino. Jej energia i pasja s\u0105 zara\u017aliwe!<\/p>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n\n        <div class=\"coach-card card-2\" style=\"background-image: url('https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/02\/carlos.webp');\">\n\n            <div class=\"card-text-zone\">\n\n                <div class=\"trainer-badge numans-font\">Senior Instructor<\/div>\n\n                <div class=\"card-content\">\n\n                    <h3 class=\"dyna-puff\">Carlos Santos<\/h3>\n\n                    <p class=\"trainer-specialty numans-font\">Salsa & Reggaeton Expert<\/p>\n\n                    <p class=\"trainer-bio numans-font\">Urodzony tancerz z Brazylii. \u0141\u0105czy tradycyjne rytmy z nowoczesnymi beatami.<\/p>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n\n        <div class=\"coach-card card-3\" style=\"background-image: url('https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/02\/hbbby.webp');\">\n\n            <div class=\"card-text-zone\">\n\n                <div class=\"trainer-badge numans-font\">Fitness Specialist<\/div>\n\n                <div class=\"card-content\">\n\n                    <h3 class=\"dyna-puff\">Anna Salsa<\/h3>\n\n                    <p class=\"trainer-specialty numans-font\">Zumba Strong & HIIT<\/p>\n\n                    <p class=\"trainer-bio numans-font\">Anna \u0142\u0105czy wysokointensywny trening z rytmem, tworz\u0105c najbardziej efektywne zaj\u0119cia.<\/p>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<style>\n\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=DynaPuff:wght@400;700&family=Numans&display=swap');\n\n\n    .stack-section-wrapper {\n\n        position: relative;\n\n        width: 100%;\n\n        padding: 60px 0;\n\n        overflow: visible; \/* Wa\u017cne dla GSAP *\/\n\n    }\n\n\n    .stack-title { font-size: clamp(2.5rem, 6vw, 5rem); text-align: center; margin-bottom: 90px; line-height: 1.1; }\n\n    .accent-label { display: block; text-align: center; color: #FF9800; letter-spacing: 4px; font-weight: 900; font-size: 14px; }\n\n\n    .cards-stack-container {\n\n        position: relative;\n\n        max-width: 1100px;\n\n        margin: 0 auto;\n\n        padding: 0 20px;\n\n        display: flex;\n\n        flex-direction: column;\n\n        align-items: center;\n\n    }\n\n\n    .coach-card {\n\n        position: relative;\n\n        height: 75vh;\n\n        width: 100%;\n\n        border-radius: 40px;\n\n        background-size: cover;\n\n        background-position: center top;\n\n        overflow: hidden;\n\n        margin-bottom: 80px; \/* Backup dla braku JS *\/\n\n        box-shadow: 0 20px 50px rgba(0,0,0,0.3);\n\n    }\n\n\n    \/* Gradient na dole karty *\/\n\n    .card-text-zone {\n\n        position: absolute;\n\n        bottom: 0;\n\n        left: 0;\n\n        width: 100%;\n\n        padding: 40px;\n\n        background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);\n\n        color: white;\n\n    }\n\n\n    .trainer-badge {\n\n        display: inline-block;\n\n        background: #FF1493;\n\n        padding: 8px 20px;\n\n        border-radius: 50px;\n\n        font-size: 0.8rem;\n\n        font-weight: 900;\n\n        text-transform: uppercase;\n\n        margin-bottom: 15px;\n\n    }\n\n\n    .card-content h3 { font-size: clamp(2rem, 4vw, 3rem); margin: 0; color: white; }\n\n    .trainer-specialty { color: #FFD700; font-size: 1.2rem; margin-bottom: 10px; font-weight: 700; }\n\n    .trainer-bio { color: rgba(255,255,255,0.9); max-width: 600px; font-size: 1rem; line-height: 1.4; }\n\n\n    .gradient-text {\n\n        background: linear-gradient(135deg, #FF1493 0%, #FFD700 100%);\n\n        -webkit-background-clip: text;\n\n        -webkit-text-fill-color: transparent;\n\n    }\n\n\n    .numans-font { font-family: 'Numans', sans-serif !important; }\n\n    .dyna-puff { font-family: 'DynaPuff', cursive !important; }\n\n\n    \/* Na mobile karty s\u0105 mniejsze *\/\n\n    @media (max-width: 768px) {\n\n        .coach-card { height: 60vh; border-radius: 30px; }\n\n        .card-text-zone { padding: 25px; }\n\n    }\n\n<\/style>\n\n\n<script>\n\n    (function() {\n\n        const initStack = () => {\n\n            if (typeof gsap === \"undefined\") return;\n\n            gsap.registerPlugin(ScrollTrigger);\n\n\n            const cards = gsap.utils.toArray(\".coach-card\");\n\n            \n\n            \/\/ Ka\u017cda karta (poza ostatni\u0105) ma zosta\u0107 \"przypi\u0119ta\"\n\n            cards.forEach((card, i) => {\n\n                if (i < cards.length - 1) {\n\n                    ScrollTrigger.create({\n\n                        trigger: card,\n\n                        start: \"top 65px\", \/\/ Gdzie karta ma si\u0119 zatrzyma\u0107\n\n                        endTrigger: \"#coach-stack-trigger\",\n\n                        end: \"bottom bottom\",\n\n                        pin: true,\n\n                        pinSpacing: false, \/\/ Pozwala kolejnym kartom wchodzi\u0107 NA t\u0119 kart\u0119\n\n                        scrub: true\n\n                    });\n\n\n                    \/\/ Efekt znikania\/skalowania karty, gdy wchodzi kolejna\n\n                    gsap.to(card, {\n\n                        scrollTrigger: {\n\n                            trigger: cards[i + 1],\n\n                            start: \"top 65%\",\n\n                            end: \"top 100px\",\n\n                            scrub: 1\n\n                        },\n\n                        scale: 0.92,\n\n                        opacity: 0.5,\n\n                        filter: \"blur(4px)\" \/\/ Opcjonalnie: lekki blur dla g\u0142\u0119bi\n\n                    });\n\n                }\n\n            });\n\n        };\n\n\n        \/\/ Czekamy na biblioteki\n\n        let checkGSAP = setInterval(() => {\n\n            if (typeof gsap !== \"undefined\" && typeof ScrollTrigger !== \"undefined\") {\n\n                clearInterval(checkGSAP);\n\n                initStack();\n\n            }\n\n        }, 100);\n\n    })();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7145db07 e-flex e-con-boxed e-con e-parent\" data-id=\"7145db07\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7fac0adc elementor-widget elementor-widget-html\" data-id=\"7fac0adc\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js\"><\/script>\n\n<section id=\"zumba-social-explosion-v4\">\n    <div class=\"social-v4-container\">\n        \n        <div class=\"social-v4-info\">\n            <span class=\"label-accent numans-font\">WASZE HISTORIE<\/span>\n            <h2 class=\"dyna-puff mega-title\">Energia <br><span class=\"gradient-text\">Waszymi Oczami<\/span><\/h2>\n            <p class=\"numans-font desc\">Zobacz, jak Zumba zmienia codzienno\u015b\u0107 i do\u0142\u0105cz do nas.<\/p>\n        <\/div>\n\n        <div class=\"v4-tile test-card\" id=\"v4-t1\">\n            <div class=\"v4-inner glass-effect\">\n                <div class=\"quote-mark dyna-puff\">\u201c<\/div>\n                <p class=\"testimonial-text numans-font\">Zumba zmieni\u0142a moje \u017cycie! Schud\u0142am 15 kg i POKOCHA\u0141AM trening!<\/p>\n                <div class=\"author-box\">\n                    <div class=\"avatar\">\ud83d\udc69<\/div>\n                    <h4 class=\"dyna-puff\">Anna Nowak<\/h4>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"v4-tile img-card\" id=\"v4-g1\" style=\"background-image: url('https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/02\/summer.webp');\">\n            <div class=\"item-overlay\"><span class=\"dyna-puff\">Summer Festival<\/span><\/div>\n        <\/div>\n\n        <div class=\"v4-tile img-card wide\" id=\"v4-g2\" style=\"background-image: url('https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/02\/air.webp');\">\n            <div class=\"item-overlay\"><span class=\"dyna-puff\">Open Air Vibes<\/span><\/div>\n        <\/div>\n\n        <div class=\"v4-tile test-card\" id=\"v4-t2\">\n            <div class=\"v4-inner glass-effect\">\n                <div class=\"quote-mark dyna-puff\">\u201c<\/div>\n                <p class=\"testimonial-text numans-font\">Wiek to tylko liczba. Zumba Gold to najlepsza decyzja w moim \u017cyciu!<\/p>\n                <div class=\"author-box\">\n                    <div class=\"avatar\">\ud83d\udc75<\/div>\n                    <h4 class=\"dyna-puff\">Barbara K.<\/h4>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <div class=\"v4-tile img-card\" id=\"v4-g3\" style=\"background-image: url('https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/02\/neon.webp');\">\n            <div class=\"item-overlay\"><span class=\"dyna-puff\">Neon Night<\/span><\/div>\n        <\/div>\n\n    <\/div>\n<\/section>\n\n<style>\n    #zumba-social-explosion-v4 {\n        position: relative;\n        width: 100%;\n        min-height: 100vh;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 50px 0;\n        background: transparent !important;\n    }\n\n    .social-v4-container {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        grid-auto-rows: minmax(250px, auto); \/* Pozwala rz\u0119dom rosn\u0105\u0107 je\u015bli tekst jest d\u0142ugi *\/\n        gap: 20px;\n        width: 90%;\n        max-width: 1400px;\n    }\n\n    \/* KAFELKI *\/\n    .v4-tile {\n        opacity: 0;\n        border-radius: 35px;\n        overflow: hidden;\n        position: relative;\n        min-height: 250px;\n    }\n\n    .v4-inner {\n        height: 100%;\n        padding: 25px;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        border: 1px solid rgba(255,255,255,0.1);\n    }\n\n    .img-card {\n        background-size: cover;\n        background-position: center;\n        background-repeat: no-repeat;\n    }\n\n    \/* UK\u0141AD *\/\n    .social-v4-info { grid-column: 1 \/ span 2; grid-row: 1; display: flex; flex-direction: column; justify-content: center; }\n    #v4-t1 { grid-column: 3; grid-row: 1; }\n    #v4-g1 { grid-column: 4; grid-row: 1; }\n    #v4-g2 { grid-column: 1 \/ span 2; grid-row: 2; }\n    #v4-t2 { grid-column: 3; grid-row: 2; }\n    #v4-g3 { grid-column: 4; grid-row: 2; }\n\n    \/* Fixy dla ucinania *\/\n    .mega-title { font-size: clamp(2rem, 5vw, 4rem); margin: 10px 0; }\n    .testimonial-text { font-size: 0.95rem; line-height: 1.4; }\n\n    \/* RESPONSYWNO\u015a\u0106 *\/\n    @media (max-width: 1024px) {\n        .social-v4-container { grid-template-columns: repeat(2, 1fr); }\n        .social-v4-info, #v4-g2 { grid-column: span 2; }\n        #v4-t1, #v4-g1, #v4-t2, #v4-g3 { grid-column: span 1; }\n    }\n\n    @media (max-width: 600px) {\n        .social-v4-container { grid-template-columns: 1fr; }\n        .social-v4-info, .v4-tile { grid-column: span 1; }\n    }\n<\/style>\n\n<script>\n    (function() {\n        const initV4 = () => {\n            if (typeof gsap === \"undefined\") return;\n            gsap.registerPlugin(ScrollTrigger);\n\n            const tl = gsap.timeline({\n                scrollTrigger: {\n                    trigger: \"#zumba-social-explosion-v4\",\n                    start: \"top 85px\",\n                    end: \"+=1700\",\n                    scrub: 1,\n                    pin: true,\n                    anticipatePin: 1\n                }\n            });\n\n            tl.from(\".social-v4-info\", { x: -100, opacity: 0, duration: 1 });\n            tl.fromTo(\"#v4-t1\", { x: 300, opacity: 0 }, { x: 0, opacity: 1, duration: 2 }, 0.2);\n            tl.fromTo(\"#v4-g1\", { y: -300, opacity: 0 }, { y: 0, opacity: 1, duration: 2 }, 0.3);\n            tl.fromTo(\"#v4-g2\", { x: -400, opacity: 0 }, { x: 0, opacity: 1, duration: 2 }, 0.4);\n            tl.fromTo(\"#v4-t2\", { y: 300, opacity: 0 }, { y: 0, opacity: 1, duration: 2 }, 0.5);\n            tl.fromTo(\"#v4-g3\", { scale: 0.5, opacity: 0 }, { scale: 1, opacity: 1, duration: 2 }, 0.6);\n\n            ScrollTrigger.refresh();\n        };\n\n        let check = setInterval(() => {\n            if (typeof gsap !== \"undefined\" && typeof ScrollTrigger !== \"undefined\") {\n                clearInterval(check);\n                initV4();\n            }\n        }, 100);\n    })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3ca5a8b e-flex e-con-boxed e-con e-parent\" data-id=\"3ca5a8b\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-9e14066 e-con-full e-flex e-con e-child\" data-id=\"9e14066\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bbda20e elementor-widget elementor-widget-html\" data-id=\"bbda20e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"zumba-calc-wrapper\">\n    <div class=\"zumba-calc-container glass-effect\">\n        <div class=\"calc-icon-header\">\ud83d\udd25<\/div>\n        <h3 class=\"dyna-puff\">Tw\u00f3j Kalkulator Energii<\/h3>\n        <p class=\"numans-font\" style=\"opacity: 0.8; margin-bottom: 20px;\">Sprawd\u017a, ile kalorii spalisz bawi\u0105c si\u0119 z nami!<\/p>\n        \n        <div class=\"calc-row\">\n            <div class=\"input-field\">\n                <label class=\"numans-font\">Twoja waga (kg)<\/label>\n                <input type=\"number\" id=\"weight\" placeholder=\"np. 65\">\n            <\/div>\n            <div class=\"input-field\">\n                <label class=\"numans-font\">Wybierz program<\/label>\n                <select id=\"program\">\n                    <option value=\"600\">Zumba Fitness<\/option>\n                    <option value=\"400\">Zumba Gold<\/option>\n                    <option value=\"850\">Strong Nation<\/option>\n                    <option value=\"500\">Zumba Toning<\/option>\n                <\/select>\n            <\/div>\n        <\/div>\n\n        <button class=\"btn-calculate dyna-puff\" onclick=\"calculateBurn()\">Oblicz Efekt Wow! \ud83d\ude80<\/button>\n        \n        <div id=\"resultWrapper\" class=\"glass-effect\">\n            <p class=\"numans-font\">Trenuj\u0105c 3x w tygodniu przez 3 miesi\u0105ce:<\/p>\n            <div class=\"results-grid\">\n                <div class=\"res-box\">\n                    <span class=\"result-number dyna-puff\" id=\"kcalResult\">0<\/span>\n                    <label class=\"numans-font\">SPALONYCH KCAL<\/label>\n                <\/div>\n                <div class=\"res-box\">\n                    <span class=\"result-number dyna-puff\" id=\"kgResult\">0<\/span>\n                    <label class=\"numans-font\">MNIEJ KILOGRAM\u00d3W<\/label>\n                <\/div>\n            <\/div>\n            <p class=\"calc-disclaimer numans-font\">*Wynik przybli\u017cony, zale\u017cy od Twojej intensywno\u015bci!<\/p>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n    .zumba-calc-wrapper {\n        padding: 50px 20px;\n        display: flex;\n        justify-content: center;\n    }\n\n    .glass-effect {\n        background: rgba(255, 255, 255, 0.05);\n        backdrop-filter: blur(15px);\n        -webkit-backdrop-filter: blur(15px);\n        border: 1px solid rgba(255, 255, 255, 0.1);\n        border-radius: 40px;\n    }\n\n    .zumba-calc-container {\n        padding: 50px;\n        max-width: 650px;\n        width: 100%;\n        text-align: center;\n        box-shadow: 0 30px 60px rgba(0,0,0,0.5);\n    }\n\n    .calc-icon-header {\n        font-size: 50px;\n        margin-bottom: 10px;\n        animation: pulse-fire 2s infinite;\n    }\n\n    .zumba-calc-container h3 {\n        font-size: 32px;\n        margin-bottom: 10px;\n        background: linear-gradient(to right, #FF1493, #FFD700);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n    }\n\n    .calc-row {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 20px;\n        margin: 30px 0;\n    }\n\n    .input-field {\n        text-align: left;\n    }\n\n    .input-field label {\n        display: block;\n        font-size: 12px;\n        color: #FFD700;\n        margin-bottom: 8px;\n        margin-left: 10px;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n    }\n\n    .zumba-calc-container input, .zumba-calc-container select {\n        width: 100%;\n        background: rgba(255,255,255,0.08);\n        border: 1px solid rgba(255,255,255,0.2);\n        padding: 15px 20px;\n        border-radius: 20px;\n        color: #fff;\n        font-family: 'Numans', sans-serif;\n        transition: 0.3s;\n    }\n\n    .zumba-calc-container input:focus {\n        border-color: #FF1493;\n        box-shadow: 0 0 15px rgba(255, 20, 147, 0.3);\n        outline: none;\n    }\n\n    .btn-calculate {\n        background: linear-gradient(45deg, #FF1493, #FF8C00);\n        border: none;\n        padding: 20px 40px;\n        border-radius: 25px;\n        color: white;\n        font-size: 20px;\n        cursor: pointer;\n        width: 100%;\n        transition: 0.3s;\n        box-shadow: 0 10px 25px rgba(255, 20, 147, 0.4);\n    }\n\n    .btn-calculate:hover {\n        transform: translateY(-5px) scale(1.02);\n        box-shadow: 0 15px 35px rgba(255, 20, 147, 0.6);\n    }\n\n    #resultWrapper {\n        margin-top: 40px;\n        padding: 30px;\n        display: none;\n        background: rgba(0, 0, 0, 0.3);\n    }\n\n    .results-grid {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 20px;\n        margin: 20px 0;\n    }\n\n    .res-box {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n    }\n\n    .result-number {\n        font-size: 40px;\n        color: #FFD700;\n        text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);\n    }\n\n    .res-box label {\n        font-size: 10px;\n        opacity: 0.6;\n        letter-spacing: 2px;\n    }\n\n    .calc-disclaimer {\n        font-size: 11px;\n        opacity: 0.4;\n        margin-top: 15px;\n    }\n\n    @keyframes pulse-fire {\n        0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px #FF8C00); }\n        50% { transform: scale(1.1); filter: drop-shadow(0 0 20px #FF1493); }\n    }\n\n    @media (max-width: 600px) {\n        .calc-row { grid-template-columns: 1fr; }\n        .results-grid { grid-template-columns: 1fr; }\n    }\n<\/style>\n\n<script>\nfunction animateValue(obj, start, end, duration, suffix = \"\") {\n    let startTimestamp = null;\n    const step = (timestamp) => {\n        if (!startTimestamp) startTimestamp = timestamp;\n        const progress = Math.min((timestamp - startTimestamp) \/ duration, 1);\n        const current = Math.floor(progress * (end - start) + start);\n        obj.innerHTML = current.toLocaleString() + suffix;\n        if (progress < 1) {\n            window.requestAnimationFrame(step);\n        }\n    };\n    window.requestAnimationFrame(step);\n}\n\nfunction calculateBurn() {\n    const w = document.getElementById('weight').value;\n    const kcalPerHour = document.getElementById('program').value;\n    const resultWrapper = document.getElementById('resultWrapper');\n    \n    if(!w || w <= 0) {\n        gsap.to(\".zumba-calc-container\", {x: 10, repeat: 5, yoyo: true, duration: 0.05});\n        return;\n    }\n\n    const totalKcal = kcalPerHour * 3 * 12;\n    const kgLost = (totalKcal \/ 7700).toFixed(1);\n\n    resultWrapper.style.display = \"block\";\n    gsap.fromTo(\"#resultWrapper\", {opacity: 0, y: 30}, {opacity: 1, y: 0, duration: 0.6, ease: \"back.out(1.7)\"});\n\n    \/\/ Animacja cyferek\n    animateValue(document.getElementById('kcalResult'), 0, totalKcal, 1500, \"\");\n    \n    \/\/ Dla kilogram\u00f3w (liczby z przecinkiem)\n    let kgObj = { val: 0 };\n    gsap.to(kgObj, {\n        val: kgLost,\n        duration: 1.5,\n        onUpdate: function() {\n            document.getElementById('kgResult').innerHTML = kgObj.val.toFixed(1);\n        }\n    });\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0edab6c e-con-full e-flex e-con e-child\" data-id=\"0edab6c\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-218fad0 elementor-widget elementor-widget-html\" data-id=\"218fad0\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js\"><\/script>\n\n<div class=\"zumba-faq-outer\">\n    <section class=\"faq-cloud-section\">\n        <div class=\"section-header\">\n            <div class=\"section-label dyna-puff\">Masz pytania?<\/div>\n            <h2 class=\"section-title dyna-puff gradient-text\">FAQ<\/h2>\n        <\/div>\n\n        <div class=\"faq-grid\">\n            <div class=\"faq-bubble glass-effect size-l\" data-answer=\"Absolutnie NIE! Zumba jest dla WSZYSTKICH - od ca\u0142kowitych pocz\u0105tkuj\u0105cych po do\u015bwiadczonych tancerzy. Instruktorzy pokazuj\u0105 ruchy krok po kroku, a spo\u0142eczno\u015b\u0107 jest niezwykle wspieraj\u0105ca. Najwa\u017cniejsze to si\u0119 bawi\u0107!\">\n                <span>\ud83e\udd14 Czy musz\u0119 umie\u0107 ta\u0144czy\u0107?<\/span>\n            <\/div>\n            <div class=\"faq-bubble glass-effect size-m\" data-answer=\"Pierwsze zaj\u0119cia GRATIS! Potem oferujemy elastyczne karnety (4 wej\u015bcia, 8 wej\u015b\u0107 lub OPEN) ju\u017c od 140 PLN. Mamy te\u017c zni\u017cki studenckie!\">\n                <span>\ud83d\udcb0 Ile kosztuj\u0105 zaj\u0119cia?<\/span>\n            <\/div>\n            <div class=\"faq-bubble glass-effect size-m\" data-answer=\"Wygodny str\u00f3j sportowy, buty z dobr\u0105 amortyzacj\u0105, r\u0119cznik i obowi\u0105zkowo butelka wody. Dobre nastawienie dostaniesz na miejscu! \ud83d\ude0a\">\n                <span>\ud83c\udf92 Co zabra\u0107 ze sob\u0105?<\/span>\n            <\/div>\n            <div class=\"faq-bubble glass-effect size-l\" data-answer=\"TAK! Zumba to pot\u0119\u017cny trening cardio. Podczas godziny zaj\u0119\u0107 mo\u017cesz spali\u0107 od 500 do nawet 1000 kcal, rze\u017abi\u0105c przy tym ca\u0142e cia\u0142o.\">\n                <span>\ud83d\udd25 Czy schudn\u0119 na Zumbie?<\/span>\n            <\/div>\n            <div class=\"faq-bubble glass-effect size-s\" data-answer=\"Dla najlepszych efekt\u00f3w zalecamy 2-3 razy w tygodniu, ale ka\u017cdy rytm jest dobry!\">\n                <span>\ud83d\udcc5 Jak cz\u0119sto \u0107wiczy\u0107?<\/span>\n            <\/div>\n            <div class=\"faq-bubble glass-effect size-m\" data-answer=\"TAK! Mamy program Zumbatomic dla dzieci w wieku 4-12 lat. Zaj\u0119cia s\u0105 w ka\u017cd\u0105 sobot\u0119 o 10:00. Pierwsze zaj\u0119cia pr\u00f3bne free!\">\n                <span>\ud83d\udc67 S\u0105 zaj\u0119cia dla dzieci?<\/span>\n            <\/div>\n        <\/div>\n\n        <div class=\"faq-overlay\">\n            <div class=\"faq-modal glass-effect\">\n                <button class=\"close-faq\" aria-label=\"Zamknij\">&times;<\/button>\n                <h3 class=\"modal-q dyna-puff\"><\/h3>\n                <div class=\"modal-a numans-font\"><\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n<\/div>\n\n<style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=DynaPuff:wght@400;700&family=Numans&display=swap');\n\n    .zumba-faq-outer {\n        position: relative;\n        z-index: 20;\n        width: 100%;\n        background: transparent !important;\n    }\n\n    .dyna-puff { font-family: 'DynaPuff', cursive !important; }\n    .numans-font { font-family: 'Numans', sans-serif !important; }\n\n    .faq-cloud-section {\n        padding: 100px 5%;\n        text-align: center;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        overflow: hidden;\n    }\n\n    .section-title { font-size: clamp(3rem, 8vw, 5rem); margin-bottom: 40px; }\n    .gradient-text {\n        background: linear-gradient(135deg, #FF1493 0%, #FFD700 100%);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n    }\n\n    \/* GRID \/ CHMURA Pyta\u0144 *\/\n    .faq-grid {\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: center;\n        align-items: center;\n        gap: 25px;\n        max-width: 1300px; \/* Zwi\u0119kszona szeroko\u015b\u0107 kontenera *\/\n    }\n\n    \/* STYL B\u0104BELK\u00d3W - POWI\u0118KSZONY *\/\n    .faq-bubble {\n        padding: 30px 45px; \/* Wi\u0119kszy padding *\/\n        border-radius: 100px;\n        cursor: pointer;\n        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s, box-shadow 0.3s;\n        font-weight: 700;\n        color: white;\n        border: 1px solid rgba(255,255,255,0.15);\n        background: rgba(255, 255, 255, 0.05);\n        backdrop-filter: blur(15px);\n        -webkit-backdrop-filter: blur(15px);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        text-align: center;\n        font-family: 'Numans', sans-serif;\n    }\n\n    \/* R\u00f3\u017cne rozmiary dla efektu chmury na desktopie *\/\n    .size-l { font-size: 1.5rem; padding: 40px 60px; }\n    .size-m { font-size: 1.25rem; padding: 30px 50px; }\n    .size-s { font-size: 1.1rem; padding: 25px 40px; }\n\n    .faq-bubble:hover {\n        transform: scale(1.08) rotate(2deg);\n        background: linear-gradient(135deg, #FF1493, #FF9800);\n        border-color: transparent;\n        box-shadow: 0 20px 40px rgba(255, 20, 147, 0.4);\n    }\n\n    \/* RESPONSIVE - KLUCZOWE POPRAWKI *\/\n    @media (max-width: 1024px) {\n        .faq-grid { gap: 15px; }\n        .faq-bubble { width: 100%; max-width: 600px; border-radius: 30px; padding: 20px 30px; }\n        .size-l, .size-m, .size-s { font-size: 1.1rem; padding: 20px 30px; }\n    }\n\n    @media (max-width: 480px) {\n        .faq-bubble { font-size: 1rem; padding: 15px 20px; }\n        .section-title { font-size: 2.5rem; }\n    }\n\n    \/* MODAL *\/\n    .faq-overlay {\n        position: fixed;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background: rgba(0,0,0,0.9);\n        display: none;\n        align-items: center;\n        justify-content: center;\n        z-index: 100000;\n        padding: 20px;\n    }\n\n    .faq-modal {\n        max-width: 600px;\n        width: 100%;\n        padding: 60px 40px;\n        border-radius: 50px;\n        position: relative;\n        border: 1px solid rgba(255,255,255,0.2);\n        background: rgba(255, 255, 255, 0.1);\n        text-align: center;\n    }\n\n    .close-faq {\n        position: absolute; top: 20px; right: 25px;\n        background: none; border: none; color: white;\n        font-size: 3rem; cursor: pointer;\n        line-height: 1;\n    }\n\n    .modal-q { color: #FFD700; font-size: clamp(1.5rem, 4vw, 2.2rem); margin-bottom: 25px; line-height: 1.2; }\n    .modal-a { color: rgba(255,255,255,0.9); font-size: 1.2rem; line-height: 1.7; }\n<\/style>\n\n<script>\n(function() {\n    function initZumbaFaq() {\n        if (typeof gsap === \"undefined\") return;\n        gsap.registerPlugin(ScrollTrigger);\n\n        \/\/ Animacja wlotu (na desktopie kaskadowo, na mobile jeden po drugim)\n        gsap.from(\".faq-bubble\", {\n            scrollTrigger: {\n                trigger: \".faq-grid\",\n                start: \"top 90%\"\n            },\n            y: 50,\n            scale: 0.8,\n            opacity: 0,\n            duration: 0.7,\n            stagger: 0.1,\n            ease: \"back.out(1.4)\"\n        });\n\n        const bubbles = document.querySelectorAll('.faq-bubble');\n        const overlay = document.querySelector('.faq-overlay');\n        const modalQ = document.querySelector('.modal-q');\n        const modalA = document.querySelector('.modal-a');\n\n        bubbles.forEach(bubble => {\n            bubble.addEventListener('click', () => {\n                modalQ.innerText = bubble.querySelector('span').innerText;\n                modalA.innerText = bubble.getAttribute('data-answer');\n                overlay.style.display = 'flex';\n                gsap.fromTo(overlay, {opacity: 0}, {opacity: 1, duration: 0.3});\n                gsap.fromTo(\".faq-modal\", {scale: 0.7, y: 30}, {scale: 1, y: 0, duration: 0.4, ease: \"back.out(1.5)\"});\n            });\n        });\n\n        const close = () => {\n            gsap.to(overlay, {opacity: 0, duration: 0.3, onComplete: () => {\n                overlay.style.display = 'none';\n            }});\n        };\n\n        document.querySelector('.close-faq').addEventListener('click', close);\n        overlay.addEventListener('click', (e) => { if(e.target === overlay) close(); });\n    }\n\n    \/\/ Sprawdzanie bibliotek\n    let check = setInterval(() => {\n        if (typeof gsap !== \"undefined\" && typeof ScrollTrigger !== \"undefined\") {\n            clearInterval(check);\n            initZumbaFaq();\n        }\n    }, 100);\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ac4c677 e-flex e-con-boxed e-con e-parent\" data-id=\"ac4c677\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-395a4f00 elementor-widget elementor-widget-html\" data-id=\"395a4f00\" data-element_type=\"widget\" id=\"kontakt\" data-widget_type=\"html.default\">\n\t\t\t\t\t <footer class=\"zumba-solid-footer\">\n\n    <div class=\"footer-wave-container\">\n\n        <svg class=\"waves\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n\n            <defs>\n\n                <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" \/>\n\n            <\/defs>\n\n            <g class=\"parallax\">\n\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,20,147,0.3)\" \/>\n\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,215,0,0.3)\" \/>\n\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"5\" fill=\"rgba(255,255,255,0.05)\" \/>\n\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#1a1a1a\" \/>\n\n            <\/g>\n\n        <\/svg>\n\n    <\/div>\n\n\n    <div class=\"footer-main-content\">\n\n        <div class=\"footer-grid\">\n\n            <div class=\"footer-col\">\n\n                <h2 class=\"dyna-puff footer-logo\">ZUMBA<span class=\"gradient-text\">VIBES<\/span><\/h2>\n\n                <p class=\"numans-font\">Energia, kt\u00f3rej nie da si\u0119 opisa\u0107. Do\u0142\u0105cz do nas i poczuj rytm!<\/p>\n\n                <div class=\"social-row\">\n\n                    <a href=\"#\" class=\"social-btn\">FB<\/a>\n\n                    <a href=\"#\" class=\"social-btn\">IG<\/a>\n\n                    <a href=\"#\" class=\"social-btn\">TT<\/a>\n\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"footer-col\">\n\n                <h4 class=\"dyna-puff\">NA SKR\u00d3TY<\/h4>\n\n                <ul class=\"footer-nav numans-font\">\n\n                    <li><a href=\"#o-nas\">O nas<\/a><\/li>\n\n                    <li><a href=\"#programy\">Programy<\/a><\/li>\n\n                    <li><a href=\"#grafik\">Grafik<\/a><\/li>\n\n                <\/ul>\n\n            <\/div>\n\n\n            <div class=\"footer-col\">\n\n                <h4 class=\"dyna-puff\">STUDIO<\/h4>\n\n                <p class=\"numans-font\">ul. Taneczna 15, Warszawa<\/p>\n\n                <p class=\"numans-font\">hej@zumbavibes.pl<\/p>\n\n                <p class=\"numans-font\">+48 123 456 789<\/p>\n\n            <\/div>\n\n        <\/div>\n\n\n        <div class=\"footer-bottom\">\n\n            <p class=\"numans-font\">&copy; 2026 ZumbaVibes | Wszystkie prawa zastrze\u017cone<\/p>\n\n        <\/div>\n\n    <\/div>\n\n<\/footer>\n\n\n<style>\n\n    .zumba-solid-footer {\n\n        background: #1a1a1a; \/* Solidne ciemne t\u0142o - koniec z prze\u015bwitami! *\/\n\n        position: relative;\n\n        width: 100%;\n\n        margin-top: 100px;\n\n        z-index: 20;\n\n    }\n\n\n    \/* Styl fal *\/\n\n    .footer-wave-container {\n\n        position: absolute;\n\n        top: -100px; \/* Wysuni\u0119cie fali nad stopk\u0119 *\/\n\n        width: 100%;\n\n        height: 100px;\n\n        overflow: hidden;\n\n    }\n\n\n    .waves {\n\n        position: relative;\n\n        width: 100%;\n\n        height: 100px;\n\n        margin-bottom: -7px; \/* Fix dla luki *\/\n\n    }\n\n\n    \/* Animacja fal *\/\n\n    .parallax > use {\n\n        animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;\n\n    }\n\n    .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }\n\n    .parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }\n\n    .parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }\n\n    .parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; }\n\n\n    @keyframes move-forever {\n\n        0% { transform: translate3d(-90px,0,0); }\n\n        100% { transform: translate3d(85px,0,0); }\n\n    }\n\n\n    .footer-main-content {\n\n        max-width: 1400px;\n\n        margin: 0 auto;\n\n        padding: 50px 5% 30px 5%;\n\n    }\n\n\n    .footer-grid {\n\n        display: grid;\n\n        grid-template-columns: 2fr 1fr 1fr;\n\n        gap: 50px;\n\n        border-bottom: 1px solid rgba(255,255,255,0.05);\n\n        padding-bottom: 50px;\n\n    }\n\n\n    .footer-logo { font-size: 2.5rem; margin-bottom: 15px; }\n\n    \n\n    .footer-nav { list-style: none; padding: 0; }\n\n    .footer-nav li { margin-bottom: 10px; }\n\n    .footer-nav a { color: rgba(255,255,255,0.6); text-decoration: none; transition: 0.3s; }\n\n    .footer-nav a:hover { color: #FF1493; }\n\n\n    .social-row { display: flex; gap: 10px; margin-top: 20px; }\n\n    .social-btn {\n\n        width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.1);\n\n        border-radius: 50%; display: flex; align-items: center; justify-content: center;\n\n        text-decoration: none; color: white; font-size: 0.7rem; transition: 0.3s;\n\n    }\n\n    .social-btn:hover { background: #FF1493; border-color: #FF1493; transform: scale(1.1); }\n\n\n    .footer-bottom { padding-top: 30px; text-align: center; opacity: 0.4; font-size: 0.8rem; }\n\n\n    @media (max-width: 768px) {\n\n        .footer-grid { grid-template-columns: 1fr; text-align: center; }\n\n        .social-row { justify-content: center; }\n\n        .footer-wave-container { height: 60px; top: -60px; }\n\n        .waves { height: 60px; }\n\n    }\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1d70db70 e-flex e-con-boxed e-con e-parent\" data-id=\"1d70db70\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5f47c1e9 elementor-widget elementor-widget-html\" data-id=\"5f47c1e9\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"zumba-scroll-indicator\">\n    <div class=\"mouse-icon\">\n        <div class=\"wheel\"><\/div>\n    <\/div>\n    <div class=\"scroll-text dyna-puff\">SCROLL<\/div>\n    <div class=\"zumba-ring\"><\/div>\n<\/div>\n\n<style>\n    .zumba-scroll-indicator {\n        position: fixed;\n        right: 40px; \/* Umieszczony z boku *\/\n        bottom: 40px;\n        z-index: 9999;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 10px;\n        pointer-events: none; \/* Nie blokuje klikni\u0119\u0107 pod spodem *\/\n        opacity: 0.8;\n        transition: opacity 0.3s ease;\n    }\n\n    \/* Wyra\u017aniejszy na hover (opcjonalnie, je\u015bli zmienisz pointer-events) *\/\n    .zumba-scroll-indicator:hover { opacity: 1; }\n\n    \/* Ikona myszki *\/\n    .mouse-icon {\n        width: 30px;\n        height: 50px;\n        border: 2px solid #ffffff;\n        border-radius: 20px;\n        position: relative;\n        background: rgba(0, 0, 0, 0.3);\n        backdrop-filter: blur(5px);\n    }\n\n    .wheel {\n        width: 4px;\n        height: 8px;\n        background: #FF1493; \/* Tw\u00f3j r\u00f3\u017cowy kolor *\/\n        border-radius: 2px;\n        position: absolute;\n        top: 8px;\n        left: 50%;\n        transform: translateX(-50%);\n        animation: scroll-wheel 1.5s infinite;\n    }\n\n    \/* Napis SCROLL *\/\n    .scroll-text {\n        color: #ffffff;\n        font-size: 10px;\n        letter-spacing: 3px;\n        text-transform: uppercase;\n        text-shadow: 0 0 10px #FF1493;\n    }\n\n    \/* Zumbiasty wiruj\u0105cy pier\u015bcie\u0144 *\/\n    .zumba-ring {\n        position: absolute;\n        top: -10px;\n        width: 70px;\n        height: 70px;\n        border: 2px dashed #FFD700; \/* Z\u0142oty kolor *\/\n        border-radius: 50%;\n        opacity: 0.3;\n        animation: spin-ring 10s linear infinite;\n    }\n\n    \/* ANIMACJE *\/\n    @keyframes scroll-wheel {\n        0% { opacity: 1; transform: translate(-50%, 0); }\n        100% { opacity: 0; transform: translate(-50%, 20px); }\n    }\n\n    @keyframes spin-ring {\n        from { transform: rotate(0deg); }\n        to { transform: rotate(360deg); }\n    }\n\n    \/* Ukrywamy indicator, gdy u\u017cytkownik jest na samym dole strony (opcjonalnie) *\/\n    .hide-indicator {\n        opacity: 0;\n        visibility: hidden;\n    }\n\n    @media (max-width: 768px) {\n        .zumba-scroll-indicator {\n            right: 20px;\n            bottom: 20px;\n            transform: scale(0.8); \/* Mniejszy na mobile *\/\n        }\n    }\n<\/style>\n\n<script>\n    window.addEventListener('scroll', function() {\n        const indicator = document.querySelector('.zumba-scroll-indicator');\n        \/\/ Je\u015bli u\u017cytkownik zjedzie na sam d\u00f3\u0142 (np. do stopki), ukrywamy znaczek\n        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 100) {\n            indicator.classList.add('hide-indicator');\n        } else {\n            indicator.classList.remove('hide-indicator');\n        }\n    });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>0 \u0141adowanie energii&#8230; ZUMBAVIBES Ogl\u0105dasz portfolio ANM Collective Created by ANM Collective \u0141apka Makramore Old Town Qubis Form Szafir Slow Nest Lukrownia Eco dom Zumba \u2039 \u203a POCZUJ RYTM ZACZNIJ SWOJ\u0104 PRZYGOD\u0118 Z ZUMB\u0104 Dopasuj Grup\u0119 Do Swojego Temperamentu. Jaki jest Tw\u00f3j cel? \ud83d\udd25 Spalanie \ud83d\udc83 Czysty Fun \ud83d\udcaa Si\u0142a \ud83c\udf0a Flow Kiedy masz czas?&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-5616","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>zumba - ANM Collective<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/portfolio.anmcollective.pl\/?page_id=5616\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"zumba - ANM Collective\" \/>\n<meta property=\"og:description\" content=\"0 \u0141adowanie energii&#8230; ZUMBAVIBES Ogl\u0105dasz portfolio ANM Collective Created by ANM Collective \u0141apka Makramore Old Town Qubis Form Szafir Slow Nest Lukrownia Eco dom Zumba \u2039 \u203a POCZUJ RYTM ZACZNIJ SWOJ\u0104 PRZYGOD\u0118 Z ZUMB\u0104 Dopasuj Grup\u0119 Do Swojego Temperamentu. Jaki jest Tw\u00f3j cel? \ud83d\udd25 Spalanie \ud83d\udc83 Czysty Fun \ud83d\udcaa Si\u0142a \ud83c\udf0a Flow Kiedy masz czas?...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/portfolio.anmcollective.pl\/?page_id=5616\" \/>\n<meta property=\"og:site_name\" content=\"ANM Collective\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-06T13:54:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/02\/zumba.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data1\" content=\"49 minut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/portfolio.anmcollective.pl\/?page_id=5616\",\"url\":\"https:\/\/portfolio.anmcollective.pl\/?page_id=5616\",\"name\":\"zumba - ANM Collective\",\"isPartOf\":{\"@id\":\"https:\/\/portfolio.anmcollective.pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/portfolio.anmcollective.pl\/?page_id=5616#primaryimage\"},\"image\":{\"@id\":\"https:\/\/portfolio.anmcollective.pl\/?page_id=5616#primaryimage\"},\"thumbnailUrl\":\"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/02\/zumba.png\",\"datePublished\":\"2026-02-12T10:55:21+00:00\",\"dateModified\":\"2026-04-06T13:54:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/portfolio.anmcollective.pl\/?page_id=5616#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/portfolio.anmcollective.pl\/?page_id=5616\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/portfolio.anmcollective.pl\/?page_id=5616#primaryimage\",\"url\":\"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/02\/zumba.png\",\"contentUrl\":\"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/02\/zumba.png\",\"width\":500,\"height\":500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/portfolio.anmcollective.pl\/?page_id=5616#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/portfolio.anmcollective.pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"zumba\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/portfolio.anmcollective.pl\/#website\",\"url\":\"https:\/\/portfolio.anmcollective.pl\/\",\"name\":\"ANM Collective\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/portfolio.anmcollective.pl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/portfolio.anmcollective.pl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/portfolio.anmcollective.pl\/#organization\",\"name\":\"ANM Collective\",\"url\":\"https:\/\/portfolio.anmcollective.pl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/portfolio.anmcollective.pl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/01\/cropped-eg.webp\",\"contentUrl\":\"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/01\/cropped-eg.webp\",\"width\":500,\"height\":481,\"caption\":\"ANM Collective\"},\"image\":{\"@id\":\"https:\/\/portfolio.anmcollective.pl\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"zumba - ANM Collective","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/portfolio.anmcollective.pl\/?page_id=5616","og_locale":"pl_PL","og_type":"article","og_title":"zumba - ANM Collective","og_description":"0 \u0141adowanie energii&#8230; ZUMBAVIBES Ogl\u0105dasz portfolio ANM Collective Created by ANM Collective \u0141apka Makramore Old Town Qubis Form Szafir Slow Nest Lukrownia Eco dom Zumba \u2039 \u203a POCZUJ RYTM ZACZNIJ SWOJ\u0104 PRZYGOD\u0118 Z ZUMB\u0104 Dopasuj Grup\u0119 Do Swojego Temperamentu. Jaki jest Tw\u00f3j cel? \ud83d\udd25 Spalanie \ud83d\udc83 Czysty Fun \ud83d\udcaa Si\u0142a \ud83c\udf0a Flow Kiedy masz czas?...","og_url":"https:\/\/portfolio.anmcollective.pl\/?page_id=5616","og_site_name":"ANM Collective","article_modified_time":"2026-04-06T13:54:21+00:00","og_image":[{"url":"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/02\/zumba.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Szacowany czas czytania":"49 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/portfolio.anmcollective.pl\/?page_id=5616","url":"https:\/\/portfolio.anmcollective.pl\/?page_id=5616","name":"zumba - ANM Collective","isPartOf":{"@id":"https:\/\/portfolio.anmcollective.pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/portfolio.anmcollective.pl\/?page_id=5616#primaryimage"},"image":{"@id":"https:\/\/portfolio.anmcollective.pl\/?page_id=5616#primaryimage"},"thumbnailUrl":"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/02\/zumba.png","datePublished":"2026-02-12T10:55:21+00:00","dateModified":"2026-04-06T13:54:21+00:00","breadcrumb":{"@id":"https:\/\/portfolio.anmcollective.pl\/?page_id=5616#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/portfolio.anmcollective.pl\/?page_id=5616"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/portfolio.anmcollective.pl\/?page_id=5616#primaryimage","url":"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/02\/zumba.png","contentUrl":"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/02\/zumba.png","width":500,"height":500},{"@type":"BreadcrumbList","@id":"https:\/\/portfolio.anmcollective.pl\/?page_id=5616#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/portfolio.anmcollective.pl\/"},{"@type":"ListItem","position":2,"name":"zumba"}]},{"@type":"WebSite","@id":"https:\/\/portfolio.anmcollective.pl\/#website","url":"https:\/\/portfolio.anmcollective.pl\/","name":"ANM Collective","description":"","publisher":{"@id":"https:\/\/portfolio.anmcollective.pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/portfolio.anmcollective.pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/portfolio.anmcollective.pl\/#organization","name":"ANM Collective","url":"https:\/\/portfolio.anmcollective.pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/portfolio.anmcollective.pl\/#\/schema\/logo\/image\/","url":"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/01\/cropped-eg.webp","contentUrl":"https:\/\/portfolio.anmcollective.pl\/wp-content\/uploads\/2026\/01\/cropped-eg.webp","width":500,"height":481,"caption":"ANM Collective"},"image":{"@id":"https:\/\/portfolio.anmcollective.pl\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/portfolio.anmcollective.pl\/index.php?rest_route=\/wp\/v2\/pages\/5616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portfolio.anmcollective.pl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/portfolio.anmcollective.pl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/portfolio.anmcollective.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/portfolio.anmcollective.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5616"}],"version-history":[{"count":28,"href":"https:\/\/portfolio.anmcollective.pl\/index.php?rest_route=\/wp\/v2\/pages\/5616\/revisions"}],"predecessor-version":[{"id":6788,"href":"https:\/\/portfolio.anmcollective.pl\/index.php?rest_route=\/wp\/v2\/pages\/5616\/revisions\/6788"}],"wp:attachment":[{"href":"https:\/\/portfolio.anmcollective.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}