{"id":224,"date":"2026-03-22T19:37:17","date_gmt":"2026-03-22T18:37:17","guid":{"rendered":"https:\/\/showroom.emiliaruszczyk.pl\/?page_id=224"},"modified":"2026-03-23T16:27:07","modified_gmt":"2026-03-23T15:27:07","slug":"architektura","status":"publish","type":"page","link":"https:\/\/showroom.emiliaruszczyk.pl\/?page_id=224","title":{"rendered":"Architektura"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"224\" class=\"elementor elementor-224\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b857443 e-flex e-con-boxed e-con e-parent\" data-id=\"b857443\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9b2c50e elementor-widget elementor-widget-html\" data-id=\"9b2c50e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&amp;display=swap\" rel=\"stylesheet\">\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/lucide@0.263.0\/dist\/umd\/lucide.min.js\"><\/script>\r\n\r\n<div id=\"premium-glass-header\">\r\n    <style>\r\n        \/* RESET I PODSTAWA *\/\r\n        body, html { margin: 0 !important; padding: 0 !important; }\r\n\r\n        #premium-glass-header {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            z-index: 99999; \r\n            padding: 25px 0;\r\n            transition: all 0.4s ease;\r\n            font-family: 'Poppins', sans-serif !important;\r\n            pointer-events: none; \r\n        }\r\n\r\n        #premium-glass-header.scrolled {\r\n            padding: 12px 0;\r\n            background: rgba(10, 10, 12, 0.8);\r\n            backdrop-filter: blur(15px);\r\n            -webkit-backdrop-filter: blur(15px);\r\n            border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n        }\r\n\r\n        .header-inner {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            padding: 0 30px;\r\n            pointer-events: auto; \r\n        }\r\n\r\n        .header-logo {\r\n            font-size: 24px;\r\n            font-weight: 700;\r\n            color: #ffffff !important;\r\n            text-decoration: none;\r\n            z-index: 100001; \/* Logo zawsze na wierzchu *\/\r\n        }\r\n\r\n        .header-logo span {\r\n            background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n        }\r\n\r\n        .header-nav { display: flex; gap: 35px; align-items: center; }\r\n\r\n        .header-nav a {\r\n            color: rgba(255, 255, 255, 0.8);\r\n            text-decoration: none;\r\n            font-size: 14px;\r\n            font-weight: 500;\r\n            transition: 0.3s;\r\n        }\r\n\r\n        .cta-header-btn {\r\n            background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);\r\n            color: #fff !important;\r\n            padding: 12px 24px;\r\n            border-radius: 14px;\r\n            font-weight: 600;\r\n        }\r\n\r\n        \/* PRZYCISK MENU \/ X *\/\r\n        .mobile-menu-toggle {\r\n            display: none;\r\n            background: none;\r\n            border: none;\r\n            color: white;\r\n            cursor: pointer;\r\n            z-index: 100001; \/* Przycisk zawsze nad menu *\/\r\n            padding: 10px;\r\n            transition: transform 0.3s ease;\r\n        }\r\n\r\n        .mobile-menu-toggle:active { transform: scale(0.9); }\r\n\r\n        \/* RESPONSYWNO\u015a\u0106 SMARTFON *\/\r\n        @media (max-width: 767px) {\r\n            .mobile-menu-toggle { display: block; }\r\n\r\n            .header-nav {\r\n                position: fixed;\r\n                top: 0;\r\n                right: -100%;\r\n                width: 100%;\r\n                height: 100vh;\r\n                background: rgba(10, 10, 12, 0.98);\r\n                backdrop-filter: blur(20px);\r\n                flex-direction: column;\r\n                justify-content: center;\r\n                transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n            }\r\n\r\n            .header-nav.active { right: 0; }\r\n\r\n            .header-nav a {\r\n                font-size: 24px;\r\n                margin: 15px 0;\r\n                color: #fff;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"header-inner\">\r\n        <a href=\"https:\/\/emiliaruszczyk.pl\/\" class=\"header-logo\">\r\n            Emilia<span>Ruszczyk<\/span>\r\n        <\/a>\r\n\r\n        <button class=\"mobile-menu-toggle\" id=\"menuToggle\" aria-label=\"Menu\">\r\n            <i data-lucide=\"menu\" id=\"menuIcon\"><\/i>\r\n        <\/button>\r\n\r\n        <nav class=\"header-nav\" id=\"navMenu\">\r\n            \r\n            <a href=\"https:\/\/showroom.emiliaruszczyk.pl\/\" target=\"_blank\" rel=\"noopener\" translate=\"no\">SHOWROOM&nbsp;<\/a>\r\n            \r\n            <a href=\"#kontakt\" class=\"cta-header-btn\">Bezp\u0142atna wycena<\/a>\r\n        <\/nav>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    (function() {\r\n        const header = document.getElementById('premium-glass-header');\r\n        const menuToggle = document.getElementById('menuToggle');\r\n        const navMenu = document.getElementById('navMenu');\r\n        const menuIcon = document.getElementById('menuIcon');\r\n\r\n        \/\/ Scroll effect\r\n        window.addEventListener('scroll', () => {\r\n            if (window.scrollY > 30) header.classList.add('scrolled');\r\n            else header.classList.remove('scrolled');\r\n        });\r\n\r\n        \/\/ Funkcja prze\u0142\u0105czania menu\r\n        function toggleMenu() {\r\n            const isOpen = navMenu.classList.toggle('active');\r\n            \r\n            \/\/ Zmiana ikony: je\u015bli otwarte -> 'x', je\u015bli zamkni\u0119te -> 'menu'\r\n            if (window.lucide) {\r\n                menuIcon.setAttribute('data-lucide', isOpen ? 'x' : 'menu');\r\n                lucide.createIcons(); \/\/ Od\u015bwie\u017cenie ikon Lucide\r\n            }\r\n            \r\n            \/\/ Blokada scrollowania strony w tle\r\n            document.body.style.overflow = isOpen ? 'hidden' : '';\r\n        }\r\n\r\n        menuToggle.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            toggleMenu();\r\n        });\r\n\r\n        \/\/ Zamkni\u0119cie menu po klikni\u0119ciu w dowolny link\r\n        document.querySelectorAll('.header-nav a').forEach(link => {\r\n            link.addEventListener('click', () => {\r\n                if(navMenu.classList.contains('active')) toggleMenu();\r\n            });\r\n        });\r\n\r\n        \/\/ Inicjalizacja ikon na starcie\r\n        if (window.lucide) lucide.createIcons();\r\n    })();\r\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-1f72e0b e-flex e-con-boxed e-con e-parent\" data-id=\"1f72e0b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-1d59d94 e-con-full e-flex e-con e-child\" data-id=\"1d59d94\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1b8fa3a elementor-widget elementor-widget-html\" data-id=\"1b8fa3a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap');\r\n\r\n.card-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\r\n  gap: 20px;\r\n  max-width: 1200px;\r\n  margin: 20px auto;\r\n  font-family: 'Plus Jakarta Sans', sans-serif;\r\n}\r\n\r\n.p-card {\r\n  background: #18181b; \/* Ciemne t\u0142o zgodne z Twoim cennikiem *\/\r\n  border: 1px solid #27272a;\r\n  border-radius: 20px;\r\n  padding: 30px;\r\n  text-align: left;\r\n  color: #ffffff;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: space-between;\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n.p-card:hover { \r\n  transform: translateY(-5px); \r\n  border-color: #a855f7; \/* Tw\u00f3j fioletowy akcent ze screena *\/\r\n}\r\n\r\n.p-icon {\r\n  width: 48px;\r\n  height: 48px;\r\n  background: rgba(168, 85, 247, 0.1);\r\n  border-radius: 12px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 1.5rem;\r\n  margin-bottom: 20px;\r\n  border: 1px solid rgba(168, 85, 247, 0.3);\r\n}\r\n\r\n.p-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 10px; color: #ffffff; }\r\n.p-desc { font-size: 0.95rem; color: #a1a1aa; margin-bottom: 25px; line-height: 1.5; }\r\n\r\n.p-features { list-style: none; padding: 0; margin: 0 0 30px 0; }\r\n.p-features li {\r\n  font-size: 0.9rem;\r\n  color: #e4e4e7;\r\n  margin-bottom: 12px;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n}\r\n\r\n.p-features li::before {\r\n  content: '\u2713';\r\n  color: #a855f7;\r\n  font-weight: 800;\r\n}\r\n\r\n.p-price { font-size: 1.8rem; font-weight: 800; color: #ffffff; margin-bottom: 20px; }\r\n\r\n.p-btn {\r\n  width: 100%;\r\n  background: #a855f7;\r\n  color: white;\r\n  border: none;\r\n  padding: 14px;\r\n  border-radius: 12px;\r\n  font-weight: 800;\r\n  cursor: pointer;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  font-size: 0.95rem;\r\n  transition: background 0.2s;\r\n  display: block;\r\n}\r\n.p-btn:hover { background: #9333ea; }\r\n<\/style>\r\n\r\n<div class=\"card-grid\">\r\n\r\n  <div class=\"p-card\">\r\n    <div>\r\n      <div class=\"p-icon\">\ud83d\udcd0<\/div>\r\n      <div class=\"p-title\">Modu\u0142 Studia Projektowego<\/div>\r\n      <div class=\"p-desc\">Kompleksowy system wycen i doboru pakiet\u00f3w projektowych dla architekt\u00f3w i projektant\u00f3w wn\u0119trz.<\/div>\r\n      <ul class=\"p-features\">\r\n        <li>Inteligentny suwak przeliczania ceny za m\u00b2<\/li>\r\n        <li>Wygodny podzia\u0142 na pakiety (Koncepcja, Kompleksowy)<\/li>\r\n        <li>Wizualny i czytelny dla klienta cennik us\u0142ug<\/li>\r\n        <li>Generuje gotowe zapytania briefowe (Leady)<\/li>\r\n      <\/ul>\r\n    <\/div>\r\n    <div>\r\n      <div class=\"p-price\">od 650 z\u0142<\/div>\r\n      <a href=\"#kontakt\" class=\"p-btn\">Wdr\u00f3\u017c u Klienta<\/a>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-14f3344 e-con-full e-flex e-con e-child\" data-id=\"14f3344\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3c2f4b7 elementor-widget elementor-widget-html\" data-id=\"3c2f4b7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap');\r\n\r\n.arc-widget {\r\n  font-family: 'Plus Jakarta Sans', sans-serif;\r\n  max-width: 500px;\r\n  margin: 20px auto;\r\n  background: #ffffff;\r\n  border-radius: 20px;\r\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);\r\n  overflow: hidden;\r\n  border: 1px solid #f1f5f9;\r\n}\r\n\r\n.arc-header {\r\n  background: #1e293b; \/* Ciemny, elegancki antracytowy *\/\r\n  color: white;\r\n  padding: 25px 20px;\r\n  text-align: center;\r\n}\r\n\r\n.arc-header h3 {\r\n  margin: 0 0 8px 0;\r\n  font-size: 1.25rem;\r\n  font-weight: 800;\r\n  color: #ffffff;\r\n}\r\n\r\n.arc-header p {\r\n  margin: 0;\r\n  font-size: 0.9rem;\r\n  opacity: 0.8;\r\n  color: #ffffff;\r\n}\r\n\r\n.arc-body {\r\n  padding: 20px;\r\n}\r\n\r\n\/* Kontener por\u00f3wnania zdj\u0119\u0107 *\/\r\n.arc-comparison {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 300px;\r\n  border-radius: 12px;\r\n  overflow: hidden;\r\n  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n  user-select: none; \/* Blokuje zaznaczanie tekstu przy przeci\u0105ganiu *\/\r\n}\r\n\r\n.arc-image {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-size: cover;\r\n  background-position: center;\r\n}\r\n\r\n\/* Zdj\u0119cie \"PRZED\" to t\u0142o (background), a \"PO\" jest na wierzchu i je zas\u0142ania *\/\r\n.arc-before {\r\n  background-image: url('https:\/\/images.unsplash.com\/photo-1513694203232-719a280e022f?q=80&w=1000&auto=format&fit=crop'); \/* Jasny, pusty pok\u00f3j *\/\r\n}\r\n\r\n.arc-after {\r\n  background-image: url('https:\/\/images.unsplash.com\/photo-1618221195710-dd6b41fa90a8?q=80&w=1000&auto=format&fit=crop'); \/* Pi\u0119knie urz\u0105dzony salon *\/\r\n  width: 50%; \/* Startujemy od po\u0142owy *\/\r\n}\r\n\r\n\/* Etykiety tekstowe \"Przed\" i \"Po\" *\/\r\n.arc-label {\r\n  position: absolute;\r\n  bottom: 15px;\r\n  padding: 6px 12px;\r\n  background: rgba(15, 23, 42, 0.8);\r\n  color: white;\r\n  font-size: 0.75rem;\r\n  font-weight: 800;\r\n  border-radius: 6px;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.05em;\r\n}\r\n\r\n.label-before {\r\n  right: 15px;\r\n}\r\n\r\n.label-after {\r\n  left: 15px;\r\n}\r\n\r\n\/* Suwak (dr\u0105\u017cek przeci\u0105gania) *\/\r\n.arc-slider-handle {\r\n  position: absolute;\r\n  top: 0;\r\n  bottom: 0;\r\n  left: 50%; \/* Startuje od \u015brodka *\/\r\n  width: 4px;\r\n  background: #ffffff;\r\n  cursor: ew-resize;\r\n  transform: translateX(-50%);\r\n}\r\n\r\n.arc-slider-button {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  width: 40px;\r\n  height: 40px;\r\n  background: #ffffff;\r\n  border-radius: 50%;\r\n  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: #1e293b;\r\n  font-weight: 800;\r\n  font-size: 1.1rem;\r\n}\r\n\r\n.arc-footer {\r\n  padding: 15px 20px;\r\n  background-color: #f8fafc;\r\n  border-top: 1px solid #e2e8f0;\r\n  text-align: center;\r\n}\r\n\r\n.arc-footer span {\r\n  font-size: 0.85rem;\r\n  color: #64748b;\r\n  font-weight: 600;\r\n}\r\n<\/style>\r\n\r\n\r\n<div class=\"arc-widget\">\r\n  <div class=\"arc-header\">\r\n    <h3>\ud83d\udcd0 Studio Projektowe<\/h3>\r\n    <p>Przeci\u0105gnij suwak i zobacz magi\u0119 aran\u017cacji<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"arc-body\">\r\n    \r\n    <div class=\"arc-comparison\" id=\"comparison-container\">\r\n      \r\n      <div class=\"arc-image arc-before\"><\/div>\r\n      <span class=\"arc-label label-before\">Przed<\/span>\r\n\r\n      <div class=\"arc-image arc-after\" id=\"after-img\"><\/div>\r\n      <span class=\"arc-label label-after\">Po<\/span>\r\n\r\n      <div class=\"arc-slider-handle\" id=\"slider-handle\">\r\n        <div class=\"arc-slider-button\">\u21c4<\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"arc-footer\">\r\n    <span>\ud83d\udca1 Interaktywne portfolio podnosi konwersj\u0119 o 45%<\/span>\r\n  <\/div>\r\n<\/div>\r\n\r\n\r\n<script>\r\n(function() {\r\n  function initImageSlider() {\r\n    const container = document.getElementById('comparison-container');\r\n    const afterImg = document.getElementById('after-img');\r\n    const handle = document.getElementById('slider-handle');\r\n\r\n    if (!container || !afterImg || !handle) return;\r\n\r\n    let isResizing = false;\r\n\r\n    function moveSlider(clientX) {\r\n      const containerRect = container.getBoundingClientRect();\r\n      let x = clientX - containerRect.left;\r\n\r\n      \/\/ Ograniczenia przeci\u0105gania (\u017ceby nie wyj\u015b\u0107 poza obrazek)\r\n      if (x < 0) x = 0;\r\n      if (x > containerRect.width) x = containerRect.width;\r\n\r\n      const percentage = (x \/ containerRect.width) * 100;\r\n\r\n      \/\/ Aktualizacja szeroko\u015bci zdj\u0119cia \"PO\" oraz pozycji r\u0105czki suwaka\r\n      afterImg.style.width = percentage + \"%\";\r\n      handle.style.left = percentage + \"%\";\r\n    }\r\n\r\n    \/\/ --- Myszk\u0105 (Komputery) ---\r\n    handle.addEventListener('mousedown', function(e) {\r\n      e.preventDefault(); \/\/ Blokujemy domy\u015blne przeci\u0105ganie obrazk\u00f3w w przegl\u0105darce\r\n      isResizing = true;\r\n    });\r\n\r\n    window.addEventListener('mouseup', function() {\r\n      isResizing = false;\r\n    });\r\n\r\n    window.addEventListener('mousemove', function(e) {\r\n      if (!isResizing) return;\r\n      moveSlider(e.clientX);\r\n    });\r\n\r\n    \/\/ --- Dotykiem (Telefony\/Tablety) ---\r\n    handle.addEventListener('touchstart', function(e) {\r\n      isResizing = true;\r\n    });\r\n\r\n    window.addEventListener('touchend', function() {\r\n      isResizing = false;\r\n    });\r\n\r\n    window.addEventListener('touchmove', function(e) {\r\n      if (!isResizing) return;\r\n      if (e.touches && e.touches.length > 0) {\r\n        moveSlider(e.touches[0].clientX);\r\n      }\r\n    });\r\n\r\n    \/\/ Klikni\u0119cie w kontener powoduje natychmiastowe przesuni\u0119cie\r\n    container.addEventListener('click', function(e) {\r\n      if (e.target === handle || handle.contains(e.target)) return;\r\n      moveSlider(e.clientX);\r\n    });\r\n  }\r\n\r\n  if (document.readyState === \"loading\") {\r\n    document.addEventListener(\"DOMContentLoaded\", initImageSlider);\r\n  } else {\r\n    initImageSlider();\r\n  }\r\n})();\r\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-e9d5d68 e-flex e-con-boxed e-con e-parent\" data-id=\"e9d5d68\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-c14e903 e-con-full e-flex e-con e-child\" data-id=\"c14e903\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7cabd92 elementor-widget elementor-widget-html\" data-id=\"7cabd92\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap');\r\n\r\n.quiz-widget {\r\n  font-family: 'Plus Jakarta Sans', sans-serif;\r\n  max-width: 450px;\r\n  margin: 20px auto;\r\n  background: #ffffff;\r\n  border-radius: 20px;\r\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);\r\n  overflow: hidden;\r\n  border: 1px solid #f1f5f9;\r\n}\r\n\r\n.quiz-header {\r\n  background: #0f172a;\r\n  color: white;\r\n  padding: 25px 20px;\r\n  text-align: center;\r\n}\r\n\r\n.quiz-header h3 {\r\n  margin: 0 0 8px 0;\r\n  font-size: 1.25rem;\r\n  font-weight: 800;\r\n  color: #ffffff;\r\n}\r\n\r\n.quiz-header p {\r\n  margin: 0;\r\n  font-size: 0.9rem;\r\n  opacity: 0.8;\r\n  color: #ffffff;\r\n}\r\n\r\n.quiz-body {\r\n  padding: 25px 20px;\r\n  min-height: 320px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: space-between;\r\n}\r\n\r\n.quiz-step-info {\r\n  font-size: 0.8rem;\r\n  font-weight: 800;\r\n  color: #64748b;\r\n  text-transform: uppercase;\r\n  margin-bottom: 5px;\r\n  text-align: left;\r\n}\r\n\r\n.quiz-question {\r\n  font-size: 1.1rem;\r\n  font-weight: 800;\r\n  color: #1e293b;\r\n  margin-bottom: 20px;\r\n  text-align: left;\r\n}\r\n\r\n.quiz-options {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 12px;\r\n}\r\n\r\n.quiz-option {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 15px;\r\n  background: #f8fafc;\r\n  padding: 15px;\r\n  border-radius: 12px;\r\n  border: 1px solid #e2e8f0;\r\n  cursor: pointer;\r\n  transition: all 0.2s ease;\r\n}\r\n\r\n.quiz-option:hover {\r\n  background: #f1f5f9;\r\n  border-color: #cbd5e1;\r\n  transform: translateX(5px);\r\n}\r\n\r\n.quiz-opt-icon {\r\n  width: 40px;\r\n  height: 40px;\r\n  background: #ffffff;\r\n  border-radius: 10px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 1.4rem;\r\n  border: 1px solid #e2e8f0;\r\n}\r\n\r\n.quiz-opt-text {\r\n  font-weight: 600;\r\n  color: #334155;\r\n  font-size: 0.95rem;\r\n}\r\n\r\n\/* Widok wynik\u00f3w *\/\r\n.quiz-result-box {\r\n  text-align: center;\r\n  padding: 10px 0;\r\n}\r\n\r\n.quiz-result-icon {\r\n  font-size: 3.5rem;\r\n  margin-bottom: 15px;\r\n  animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n}\r\n\r\n.quiz-result-title {\r\n  font-size: 1.4rem;\r\n  font-weight: 800;\r\n  color: #0f172a;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.quiz-result-desc {\r\n  font-size: 0.95rem;\r\n  color: #64748b;\r\n  line-height: 1.5;\r\n  margin-bottom: 25px;\r\n}\r\n\r\n.quiz-btn-action {\r\n  width: 100%;\r\n  background: #0f172a;\r\n  color: white;\r\n  border: none;\r\n  padding: 14px;\r\n  border-radius: 12px;\r\n  font-size: 1rem;\r\n  font-weight: 800;\r\n  cursor: pointer;\r\n  transition: all 0.2s;\r\n  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);\r\n}\r\n\r\n.quiz-btn-action:hover {\r\n  background: #1e293b;\r\n  transform: translateY(-2px);\r\n}\r\n\r\n.quiz-reset-btn {\r\n  background: none;\r\n  border: none;\r\n  color: #64748b;\r\n  font-size: 0.85rem;\r\n  cursor: pointer;\r\n  text-decoration: underline;\r\n  margin-top: 15px;\r\n}\r\n\r\n@keyframes popIn {\r\n  0% { transform: scale(0.5); opacity: 0; }\r\n  100% { transform: scale(1); opacity: 1; }\r\n}\r\n<\/style>\r\n\r\n\r\n<div class=\"quiz-widget\">\r\n  <div class=\"quiz-header\">\r\n    <h3>\ud83c\udfe1 Quiz: Znajd\u017a sw\u00f3j styl<\/h3>\r\n    <p>Odpowiedz na 3 pytania i odkryj swoje wymarzone wn\u0119trze<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"quiz-body\" id=\"quiz-content\">\r\n    <\/div>\r\n<\/div>\r\n\r\n\r\n<script>\r\n(function() {\r\n  \/\/ Baza pyta\u0144\r\n  const questions = [\r\n    {\r\n      title: \"Jaka paleta kolor\u00f3w najbardziej Ci si\u0119 podoba?\",\r\n      options: [\r\n        { text: \"Biele, be\u017ce, jasne drewno\", icon: \"\ud83c\udf66\", points: \"skandynawski\" },\r\n        { text: \"Beton, ceg\u0142a, czer\u0144, metal\", icon: \"\ud83e\uddf1\", points: \"industrialny\" },\r\n        { text: \"Z\u0142oto, marmur, g\u0142\u0119boka ziele\u0144\", icon: \"\u2728\", points: \"glamour\" }\r\n      ]\r\n    },\r\n    {\r\n      title: \"Wybierz sw\u00f3j wymarzony mebel wypoczynkowy:\",\r\n      options: [\r\n        { text: \"Prosta, lniana, mega wygodna kanapa\", icon: \"\ud83d\udecb\ufe0f\", points: \"skandynawski\" },\r\n        { text: \"Sk\u00f3rzana, lekko przetarta sofa\", icon: \"\ud83d\udcbc\", points: \"industrialny\" },\r\n        { text: \"Pikowany szezlong z aksamitu\", icon: \"\ud83d\udc51\", points: \"glamour\" }\r\n      ]\r\n    },\r\n    {\r\n      title: \"Jakie dekoracje wolisz?\",\r\n      options: [\r\n        { text: \"Ro\u015bliny, wiklina, du\u017co naturalnego \u015bwiat\u0142a\", icon: \"\ud83c\udf3f\", points: \"skandynawski\" },\r\n        { text: \"Surowe \u017car\u00f3wki Edisona, plakaty vintage\", icon: \"\ud83d\udca1\", points: \"industrialny\" },\r\n        { text: \"Wielkie lustra, kryszta\u0142owe wazony\", icon: \"\ud83e\ude9e\", points: \"glamour\" }\r\n      ]\r\n    }\r\n  ];\r\n\r\n  \/\/ Baza wynik\u00f3w\r\n  const results = {\r\n    skandynawski: {\r\n      title: \"Styl Skandynawski (Scandi)\",\r\n      icon: \"\ud83c\udf3f\",\r\n      desc: \"Cenisz sobie spok\u00f3j, natur\u0119 i funkcjonalno\u015b\u0107. Twoje idealne wn\u0119trze jest jasne, przestronne i pe\u0142ne ciep\u0142ych, naturalnych materia\u0142\u00f3w.\"\r\n    },\r\n    industrialny: {\r\n      title: \"Styl Industrialny (Loft)\",\r\n      icon: \"\ud83e\uddf1\",\r\n      desc: \"Lubisz surowy, wielkomiejski klimat. Ods\u0142oni\u0119ta ceg\u0142a, beton konstrukcyjny i metalowe dodatki to Twoja bajka.\"\r\n    },\r\n    glamour: {\r\n      title: \"Styl Glamour \/ Nowojorski\",\r\n      icon: \"\u2728\",\r\n      desc: \"Kochasz elegancj\u0119, luksus i blask. Marmury, b\u0142yszcz\u0105ce powierzchnie i welurowe meble to \u015brodowisko, w kt\u00f3rym czujesz si\u0119 najlepiej.\"\r\n    }\r\n  };\r\n\r\n  let currentStep = 0;\r\n  let score = { skandynawski: 0, industrialny: 0, glamour: 0 };\r\n\r\n  function renderQuiz() {\r\n    const container = document.getElementById('quiz-content');\r\n    if (!container) return;\r\n\r\n    \/\/ Sprawdzenie czy to ju\u017c koniec\r\n    if (currentStep >= questions.length) {\r\n      showResult(container);\r\n      return;\r\n    }\r\n\r\n    const currentQuestion = questions[currentStep];\r\n\r\n    container.innerHTML = `\r\n      <div>\r\n        <div class=\"quiz-step-info\">Krok ${currentStep + 1} z ${questions.length}<\/div>\r\n        <div class=\"quiz-question\">${currentQuestion.title}<\/div>\r\n        \r\n        <div class=\"quiz-options\">\r\n          ${currentQuestion.options.map((opt, index) => `\r\n            <div class=\"quiz-option\" onclick=\"chooseOption('${opt.points}')\">\r\n              <div class=\"quiz-opt-icon\">${opt.icon}<\/div>\r\n              <div class=\"quiz-opt-text\">${opt.text}<\/div>\r\n            <\/div>\r\n          `).join('')}\r\n        <\/div>\r\n      <\/div>\r\n    `;\r\n  }\r\n\r\n  \/\/ Funkcja przypisana do window aby Elementor odpali\u0142 j\u0105 w onclicku\r\n  window.chooseOption = function(styleType) {\r\n    score[styleType]++;\r\n    currentStep++;\r\n    renderQuiz();\r\n  };\r\n\r\n  function showResult(container) {\r\n    \/\/ Znajd\u017a styl z najwi\u0119ksz\u0105 liczb\u0105 punkt\u00f3w\r\n    let highestStyle = 'skandynawski';\r\n    let maxScore = score.skandynawski;\r\n\r\n    if (score.industrialny > maxScore) {\r\n      highestStyle = 'industrialny';\r\n      maxScore = score.industrialny;\r\n    }\r\n    if (score.glamour > maxScore) {\r\n      highestStyle = 'glamour';\r\n    }\r\n\r\n    const result = results[highestStyle];\r\n\r\n    container.innerHTML = `\r\n      <div class=\"quiz-result-box\">\r\n        <div class=\"quiz-result-icon\">${result.icon}<\/div>\r\n        <div class=\"quiz-result-title\">${result.title}<\/div>\r\n        <div class=\"quiz-result-desc\">${result.desc}<\/div>\r\n        \r\n        <button type=\"button\" class=\"quiz-btn-action\">Porozmawiaj o projekcie<\/button>\r\n        <button type=\"button\" class=\"quiz-reset-btn\" onclick=\"resetQuiz()\">Rozwi\u0105\u017c jeszcze raz<\/button>\r\n      <\/div>\r\n    `;\r\n  }\r\n\r\n  window.resetQuiz = function() {\r\n    currentStep = 0;\r\n    score = { skandynawski: 0, industrialny: 0, glamour: 0 };\r\n    renderQuiz();\r\n  };\r\n\r\n  \/\/ Start\r\n  if (document.readyState === \"loading\") {\r\n    document.addEventListener(\"DOMContentLoaded\", renderQuiz);\r\n  } else {\r\n    renderQuiz();\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6df162d e-con-full e-flex e-con e-child\" data-id=\"6df162d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-90105fe elementor-widget elementor-widget-html\" data-id=\"90105fe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap');\r\n\r\n.card-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\r\n  gap: 20px;\r\n  max-width: 1200px;\r\n  margin: 20px auto;\r\n  font-family: 'Plus Jakarta Sans', sans-serif;\r\n}\r\n\r\n.p-card {\r\n  background: #18181b; \/* Luksusowe, ciemne t\u0142o Twojej oferty *\/\r\n  border: 1px solid #27272a;\r\n  border-radius: 20px;\r\n  padding: 30px;\r\n  text-align: left;\r\n  color: #ffffff;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: space-between;\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n.p-card:hover { \r\n  transform: translateY(-5px); \r\n  border-color: #a855f7; \/* Tw\u00f3j fioletowy akcent ze screena *\/\r\n}\r\n\r\n.p-icon {\r\n  width: 48px;\r\n  height: 48px;\r\n  background: rgba(168, 85, 247, 0.1);\r\n  border-radius: 12px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 1.5rem;\r\n  margin-bottom: 20px;\r\n  border: 1px solid rgba(168, 85, 247, 0.3);\r\n}\r\n\r\n.p-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 10px; color: #ffffff; }\r\n.p-desc { font-size: 0.95rem; color: #a1a1aa; margin-bottom: 25px; line-height: 1.5; }\r\n\r\n.p-features { list-style: none; padding: 0; margin: 0 0 30px 0; }\r\n.p-features li {\r\n  font-size: 0.9rem;\r\n  color: #e4e4e7;\r\n  margin-bottom: 12px;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n}\r\n\r\n.p-features li::before {\r\n  content: '\u2713';\r\n  color: #a855f7;\r\n  font-weight: 800;\r\n}\r\n\r\n.p-price { font-size: 1.8rem; font-weight: 800; color: #ffffff; margin-bottom: 20px; }\r\n\r\n.p-btn {\r\n  width: 100%;\r\n  background: #a855f7;\r\n  color: white;\r\n  border: none;\r\n  padding: 14px;\r\n  border-radius: 12px;\r\n  font-weight: 800;\r\n  cursor: pointer;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  font-size: 0.95rem;\r\n  transition: background 0.2s;\r\n  display: block;\r\n}\r\n.p-btn:hover { background: #9333ea; }\r\n<\/style>\r\n\r\n<div class=\"card-grid\">\r\n\r\n  <div class=\"p-card\">\r\n    <div>\r\n      <div class=\"p-icon\">\ud83c\udfe1<\/div>\r\n      <div class=\"p-title\">Quiz: Znajd\u017a Sw\u00f3j Styl<\/div>\r\n      <div class=\"p-desc\">Narz\u0119dzie lead-magnet dla architekt\u00f3w i projektant\u00f3w wn\u0119trz, profiluj\u0105ce estetyczne gusta klienta.<\/div>\r\n      <ul class=\"p-features\">\r\n        <li>Automatyczna kwalifikacja lead\u00f3w (styl, bud\u017cet, metra\u017c)<\/li>\r\n        <li>Wyszczeg\u00f3lnia profile Scandi, Loft, Glamour, Boho<\/li>\r\n        <li>Generuje wysoki wsp\u00f3\u0142czynnik konwersji (Engagement)<\/li>\r\n        <li>Brak prze\u0142adowania strony (Szybki i lekki JS)<\/li>\r\n      <\/ul>\r\n    <\/div>\r\n    <div>\r\n      <div class=\"p-price\">od 450 z\u0142<\/div>\r\n      <a href=\"#kontakt\" class=\"p-btn\">Wdr\u00f3\u017c u Klienta<\/a>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/div>\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-f707135 e-flex e-con-boxed e-con e-parent\" data-id=\"f707135\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-35ebb91 e-con-full e-flex e-con e-child\" data-id=\"35ebb91\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-794f4db elementor-widget elementor-widget-html\" data-id=\"794f4db\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap');\r\n\r\n.card-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\r\n  gap: 20px;\r\n  max-width: 1200px;\r\n  margin: 20px auto;\r\n  font-family: 'Plus Jakarta Sans', sans-serif;\r\n}\r\n\r\n.p-card {\r\n  background: #18181b; \/* Luksusowe, ciemne t\u0142o z Twojego cennika *\/\r\n  border: 1px solid #27272a;\r\n  border-radius: 20px;\r\n  padding: 30px;\r\n  text-align: left;\r\n  color: #ffffff;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: space-between;\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n.p-card:hover { \r\n  transform: translateY(-5px); \r\n  border-color: #a855f7; \/* Tw\u00f3j fioletowy akcent ze screena *\/\r\n}\r\n\r\n.p-icon {\r\n  width: 48px;\r\n  height: 48px;\r\n  background: rgba(168, 85, 247, 0.1);\r\n  border-radius: 12px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 1.5rem;\r\n  margin-bottom: 20px;\r\n  border: 1px solid rgba(168, 85, 247, 0.3);\r\n}\r\n\r\n.p-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 10px; color: #ffffff; }\r\n.p-desc { font-size: 0.95rem; color: #a1a1aa; margin-bottom: 25px; line-height: 1.5; }\r\n\r\n.p-features { list-style: none; padding: 0; margin: 0 0 30px 0; }\r\n.p-features li {\r\n  font-size: 0.9rem;\r\n  color: #e4e4e7;\r\n  margin-bottom: 12px;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n}\r\n\r\n.p-features li::before {\r\n  content: '\u2713';\r\n  color: #a855f7;\r\n  font-weight: 800;\r\n}\r\n\r\n.p-price { font-size: 1.8rem; font-weight: 800; color: #ffffff; margin-bottom: 20px; }\r\n\r\n.p-btn {\r\n  width: 100%;\r\n  background: #a855f7;\r\n  color: white;\r\n  border: none;\r\n  padding: 14px;\r\n  border-radius: 12px;\r\n  font-weight: 800;\r\n  cursor: pointer;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  font-size: 0.95rem;\r\n  transition: background 0.2s;\r\n  display: block;\r\n}\r\n.p-btn:hover { background: #9333ea; }\r\n<\/style>\r\n\r\n<div class=\"card-grid\">\r\n\r\n  <div class=\"p-card\">\r\n    <div>\r\n      <div class=\"p-icon\">\ud83d\udcb0<\/div>\r\n      <div class=\"p-title\">Kalkulator Projektowy<\/div>\r\n      <div class=\"p-desc\">Suwak wyboru metra\u017cu z dynamicznym przeliczaniem ceny projektu na \u017cywo dla architekt\u00f3w.<\/div>\r\n      <ul class=\"p-features\">\r\n        <li>Zdejmuje barier\u0119 strachu przed \"ukrytymi kosztami\"<\/li>\r\n        <li>Odsiewa klient\u00f3w z nierealnym bud\u017cetem<\/li>\r\n        <li>Wygodny dob\u00f3r pakietu projektu (Pod klucz \/ Koncepcja)<\/li>\r\n        <li>B\u0142yskawiczne dzia\u0142anie bez prze\u0142adowania strony<\/li>\r\n      <\/ul>\r\n    <\/div>\r\n    <div>\r\n      <div class=\"p-price\">od 400 z\u0142<\/div>\r\n      <a href=\"#kontakt\" class=\"p-btn\">Wdr\u00f3\u017c u Klienta<\/a>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a163c83 e-con-full e-flex e-con e-child\" data-id=\"a163c83\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4910f68 elementor-widget elementor-widget-html\" data-id=\"4910f68\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap');\r\n\r\n.calc-widget {\r\n  font-family: 'Plus Jakarta Sans', sans-serif;\r\n  max-width: 450px;\r\n  margin: 20px auto;\r\n  background: #ffffff;\r\n  border-radius: 20px;\r\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);\r\n  overflow: hidden;\r\n  border: 1px solid #f1f5f9;\r\n}\r\n\r\n.calc-header {\r\n  background: #0f172a;\r\n  color: white;\r\n  padding: 25px 20px;\r\n  text-align: center;\r\n}\r\n\r\n.calc-header h3 {\r\n  margin: 0 0 8px 0;\r\n  font-size: 1.25rem;\r\n  font-weight: 800;\r\n  color: #ffffff;\r\n}\r\n\r\n.calc-header p {\r\n  margin: 0;\r\n  font-size: 0.9rem;\r\n  opacity: 0.8;\r\n  color: #ffffff;\r\n}\r\n\r\n.calc-body {\r\n  padding: 25px 20px;\r\n}\r\n\r\n.calc-section {\r\n  margin-bottom: 25px;\r\n  text-align: left;\r\n}\r\n\r\n.calc-label {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  font-weight: 800;\r\n  color: #334155;\r\n  font-size: 0.85rem;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.05em;\r\n  margin-bottom: 12px;\r\n}\r\n\r\n.calc-val-badge {\r\n  background: #f1f5f9;\r\n  padding: 4px 10px;\r\n  border-radius: 8px;\r\n  color: #0f172a;\r\n  font-weight: 800;\r\n  font-size: 0.9rem;\r\n}\r\n\r\n\/* Suwak metra\u017cu *\/\r\n.calc-range {\r\n  -webkit-appearance: none;\r\n  width: 100%;\r\n  height: 8px;\r\n  background: #e2e8f0;\r\n  border-radius: 4px;\r\n  outline: none;\r\n}\r\n\r\n.calc-range::-webkit-slider-thumb {\r\n  -webkit-appearance: none;\r\n  width: 24px;\r\n  height: 24px;\r\n  background: #0f172a;\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  box-shadow: 0 2px 6px rgba(0,0,0,0.2);\r\n  transition: transform 0.2s;\r\n}\r\n\r\n.calc-range::-webkit-slider-thumb:hover {\r\n  transform: scale(1.1);\r\n}\r\n\r\n\/* Kafelki opcji *\/\r\n.calc-options {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 12px;\r\n}\r\n\r\n.calc-option-item {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  background: #f8fafc;\r\n  padding: 15px;\r\n  border-radius: 12px;\r\n  border: 1px solid #e2e8f0;\r\n  cursor: pointer;\r\n  transition: all 0.2s ease;\r\n}\r\n\r\n.calc-option-item:hover {\r\n  border-color: #cbd5e1;\r\n  background: #f1f5f9;\r\n}\r\n\r\n.calc-option-item.active {\r\n  border-color: #0f172a;\r\n  background: #f1f5f9;\r\n  box-shadow: 0 0 0 2px #0f172a;\r\n}\r\n\r\n.calc-opt-left {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.calc-opt-title {\r\n  font-weight: 600;\r\n  color: #1e293b;\r\n  font-size: 0.95rem;\r\n}\r\n\r\n.calc-opt-desc {\r\n  font-size: 0.8rem;\r\n  color: #64748b;\r\n  margin-top: 2px;\r\n}\r\n\r\n.calc-opt-price {\r\n  font-weight: 800;\r\n  color: #0f172a;\r\n  font-size: 0.9rem;\r\n}\r\n\r\n.calc-footer {\r\n  padding: 20px;\r\n  background-color: #f8fafc;\r\n  border-top: 1px solid #e2e8f0;\r\n}\r\n\r\n.calc-total-box {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  background: #ffffff;\r\n  padding: 15px;\r\n  border-radius: 12px;\r\n  border: 2px solid #0f172a;\r\n  margin-bottom: 15px;\r\n}\r\n\r\n.calc-total-label {\r\n  font-weight: 600;\r\n  color: #334155;\r\n}\r\n\r\n.calc-total-val {\r\n  font-size: 1.4rem;\r\n  font-weight: 800;\r\n  color: #0f172a;\r\n}\r\n\r\n.calc-btn-order {\r\n  width: 100%;\r\n  background: #0f172a;\r\n  color: white;\r\n  border: none;\r\n  padding: 14px;\r\n  border-radius: 12px;\r\n  font-size: 1rem;\r\n  font-weight: 800;\r\n  cursor: pointer;\r\n  transition: all 0.2s;\r\n}\r\n\r\n.calc-btn-order:hover {\r\n  background: #1e293b;\r\n  transform: translateY(-2px);\r\n}\r\n<\/style>\r\n\r\n\r\n<div class=\"calc-widget\">\r\n  <div class=\"calc-header\">\r\n    <h3>\ud83d\udcb0 Kalkulator Projektowy<\/h3>\r\n    <p>Oszacuj koszt projektu wn\u0119trza na \u017cywo<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"calc-body\">\r\n    \r\n    <div class=\"calc-section\">\r\n      <div class=\"calc-label\">\r\n        <span>Powierzchnia wn\u0119trza:<\/span>\r\n        <span class=\"calc-val-badge\" id=\"area-val\">40 m\u00b2<\/span>\r\n      <\/div>\r\n      <input type=\"range\" id=\"area-range\" class=\"calc-range\" min=\"20\" max=\"150\" value=\"40\" step=\"5\">\r\n    <\/div>\r\n\r\n    <div class=\"calc-section\">\r\n      <div class=\"calc-label\">Wybierz zakres prac:<\/div>\r\n      \r\n      <div class=\"calc-options\">\r\n        \r\n        <div class=\"calc-option-item active\" id=\"opt-koncepcja\" onclick=\"togglePackage('koncepcja', 80)\">\r\n          <div class=\"calc-opt-left\">\r\n            <span class=\"calc-opt-title\">Koncepcja (uk\u0142ad funkcjonalny)<\/span>\r\n            <span class=\"calc-opt-desc\">Uk\u0142ad \u015bcian, mebli i instalacji<\/span>\r\n          <\/div>\r\n          <span class=\"calc-opt-price\">80 z\u0142 \/ m\u00b2<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"calc-option-item\" id=\"opt-wizualizacje\" onclick=\"togglePackage('wizualizacje', 120)\">\r\n          <div class=\"calc-opt-left\">\r\n            <span class=\"calc-opt-title\">Komplet (Koncepcja + Wizualizacje 3D)<\/span>\r\n            <span class=\"calc-opt-desc\">Realistyczny wygl\u0105d Twojego domu<\/span>\r\n          <\/div>\r\n          <span class=\"calc-opt-price\">120 z\u0142 \/ m\u00b2<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"calc-option-item\" id=\"opt-nadzor\" onclick=\"togglePackage('nadzor', 50)\">\r\n          <div class=\"calc-opt-left\">\r\n            <span class=\"calc-opt-title\">Nadz\u00f3r wykonawczy (dodatkowo)<\/span>\r\n            <span class=\"calc-opt-desc\">Opieka na budowie i zakupy<\/span>\r\n          <\/div>\r\n          <span class=\"calc-opt-price\">+50 z\u0142 \/ m\u00b2<\/span>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"calc-footer\">\r\n    <div class=\"calc-total-box\">\r\n      <span class=\"calc-total-label\">Szacowany koszt:<\/span>\r\n      <span id=\"total-price\" class=\"calc-total-val\">3200 z\u0142<\/span>\r\n    <\/div>\r\n    <button type=\"button\" class=\"calc-btn-order\">Zapytaj o wolny termin<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n\r\n<script>\r\n(function() {\r\n  let area = 40;\r\n  let activeBaseRate = 80; \/\/ Domy\u015blnie Koncepcja\r\n  let supervisionSelected = false; \/\/ Nadz\u00f3r jako dodatek\r\n\r\n  function calculate() {\r\n    let rate = activeBaseRate;\r\n    if (supervisionSelected) {\r\n      rate += 50; \/\/ Dodajemy koszt nadzoru\r\n    }\r\n\r\n    const total = area * rate;\r\n\r\n    const totalDisplay = document.getElementById('total-price');\r\n    if (totalDisplay) {\r\n      totalDisplay.innerText = total + \" z\u0142\";\r\n    }\r\n  }\r\n\r\n  window.togglePackage = function(type, price) {\r\n    const optKoncepcja = document.getElementById('opt-koncepcja');\r\n    const optWizualizacje = document.getElementById('opt-wizualizacje');\r\n    const optNadzor = document.getElementById('opt-nadzor');\r\n\r\n    if (type === 'koncepcja' || type === 'wizualizacje') {\r\n      activeBaseRate = price;\r\n      \r\n      optKoncepcja.classList.remove('active');\r\n      optWizualizacje.classList.remove('active');\r\n\r\n      if (type === 'koncepcja') optKoncepcja.classList.add('active');\r\n      if (type === 'wizualizacje') optWizualizacje.classList.add('active');\r\n    }\r\n\r\n    if (type === 'nadzor') {\r\n      supervisionSelected = !supervisionSelected;\r\n      if (supervisionSelected) {\r\n        optNadzor.classList.add('active');\r\n      } else {\r\n        optNadzor.classList.remove('active');\r\n      }\r\n    }\r\n\r\n    calculate();\r\n  };\r\n\r\n  function initCalculator() {\r\n    const rangeInput = document.getElementById('area-range');\r\n    const areaDisplay = document.getElementById('area-val');\r\n\r\n    if (rangeInput && areaDisplay) {\r\n      rangeInput.addEventListener('input', function() {\r\n        area = parseInt(this.value);\r\n        areaDisplay.innerText = area + \" m\u00b2\";\r\n        calculate();\r\n      });\r\n    }\r\n    calculate();\r\n  }\r\n\r\n  if (document.readyState === \"loading\") {\r\n    document.addEventListener(\"DOMContentLoaded\", initCalculator);\r\n  } else {\r\n    initCalculator();\r\n  }\r\n})();\r\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-778c40c e-flex e-con-boxed e-con e-parent\" data-id=\"778c40c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-f089f97 e-con-full e-flex e-con e-child\" data-id=\"f089f97\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c7e507f elementor-widget elementor-widget-html\" data-id=\"c7e507f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap');\r\n\r\n.rzut-widget {\r\n  font-family: 'Plus Jakarta Sans', sans-serif;\r\n  max-width: 450px;\r\n  margin: 20px auto;\r\n  background: #ffffff;\r\n  border-radius: 20px;\r\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);\r\n  overflow: hidden;\r\n  border: 1px solid #f1f5f9;\r\n}\r\n\r\n.rzut-header {\r\n  background: #1e293b;\r\n  color: white;\r\n  padding: 25px 20px;\r\n  text-align: center;\r\n}\r\n\r\n.rzut-header h3 {\r\n  margin: 0 0 8px 0;\r\n  font-size: 1.25rem;\r\n  font-weight: 800;\r\n  color: #ffffff;\r\n}\r\n\r\n.rzut-header p {\r\n  margin: 0;\r\n  font-size: 0.9rem;\r\n  opacity: 0.8;\r\n  color: #ffffff;\r\n}\r\n\r\n.rzut-body {\r\n  padding: 20px;\r\n  background: #f8fafc;\r\n}\r\n\r\n\/* Wizualizacja rzutu mieszkania w CSS *\/\r\n.rzut-plan {\r\n  width: 100%;\r\n  height: 300px;\r\n  background: #ffffff;\r\n  border: 2px solid #e2e8f0;\r\n  border-radius: 16px;\r\n  position: relative;\r\n  overflow: hidden;\r\n  box-shadow: inset 0 2px 10px rgba(0,0,0,0.02);\r\n}\r\n\r\n\/* \u015aciany rysowane za pomoc\u0105 CSS Grid i linii *\/\r\n.rzut-grid-bg {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-size: 30px 30px;\r\n  background-image: linear-gradient(to right, #f1f5f9 1px, transparent 1px),\r\n                    linear-gradient(to bottom, #f1f5f9 1px, transparent 1px);\r\n}\r\n\r\n\/* Pulsuj\u0105ce punkty (Hotspots) *\/\r\n.hotspot {\r\n  position: absolute;\r\n  width: 20px;\r\n  height: 20px;\r\n  background: #0f172a;\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  z-index: 10;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: white;\r\n  font-size: 0.7rem;\r\n  font-weight: 800;\r\n  border: 2px solid #ffffff;\r\n  box-shadow: 0 2px 6px rgba(0,0,0,0.3);\r\n}\r\n\r\n.hotspot::before {\r\n  content: '';\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 50%;\r\n  background: #0f172a;\r\n  opacity: 0.6;\r\n  animation: pulse 2s infinite;\r\n  z-index: -1;\r\n}\r\n\r\n@keyframes pulse {\r\n  0% { transform: scale(1); opacity: 0.6; }\r\n  100% { transform: scale(2.5); opacity: 0; }\r\n}\r\n\r\n\/* Lokalizacje punkt\u00f3w na rzucie *\/\r\n#spot-salon { top: 30%; left: 30%; }\r\n#spot-kuchnia { top: 30%; left: 70%; }\r\n#spot-sypialnia { top: 70%; left: 40%; }\r\n#spot-lazienka { top: 70%; left: 80%; }\r\n\r\n\/* Panel informacyjny pod rzutem *\/\r\n.rzut-info-panel {\r\n  margin-top: 20px;\r\n  background: #ffffff;\r\n  padding: 20px;\r\n  border-radius: 16px;\r\n  border: 1px solid #e2e8f0;\r\n  min-height: 110px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  text-align: left;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n.rzut-info-title {\r\n  font-size: 1.1rem;\r\n  font-weight: 800;\r\n  color: #1e293b;\r\n  margin-bottom: 5px;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n}\r\n\r\n.rzut-info-desc {\r\n  font-size: 0.9rem;\r\n  color: #64748b;\r\n  line-height: 1.5;\r\n}\r\n\r\n.rzut-tip {\r\n  font-size: 0.8rem;\r\n  color: #94a3b8;\r\n  margin-top: 10px;\r\n  text-align: center;\r\n}\r\n<\/style>\r\n\r\n\r\n<div class=\"rzut-widget\">\r\n  <div class=\"rzut-header\">\r\n    <h3>\ud83d\udcd0 Interaktywny Rzut Projektu<\/h3>\r\n    <p>Kliknij w punkty na planie, aby zobaczy\u0107 detale<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"rzut-body\">\r\n    \r\n    <div class=\"rzut-plan\">\r\n      <div class=\"rzut-grid-bg\"><\/div>\r\n\r\n      <div class=\"hotspot\" id=\"spot-salon\" onclick=\"showRoom('salon')\">1<\/div>\r\n      <div class=\"hotspot\" id=\"spot-kuchnia\" onclick=\"showRoom('kuchnia')\">2<\/div>\r\n      <div class=\"hotspot\" id=\"spot-sypialnia\" onclick=\"showRoom('sypialnia')\">3<\/div>\r\n      <div class=\"hotspot\" id=\"spot-lazienka\" onclick=\"showRoom('lazienka')\">4<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"rzut-tip\">\ud83d\udc46 Kliknij w czarne punkty na planie mieszkania<\/div>\r\n\r\n    <div class=\"rzut-info-panel\" id=\"room-info\">\r\n      <div class=\"rzut-info-title\">\ud83d\udd0d Kliknij w punkt<\/div>\r\n      <div class=\"rzut-info-desc\">Wybierz pomieszczenie ze rzutu 2D powy\u017cej, aby zobaczy\u0107 jego specyfikacj\u0119 techniczn\u0105 i styl.<\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n\r\n<script>\r\n(function() {\r\n  const rooms = {\r\n    salon: {\r\n      title: \"\ud83d\udecb\ufe0f Przestronny Salon (28 m\u00b2)\",\r\n      desc: \"Otwarta strefa dzienna z widokiem na ogr\u00f3d. Zastosowano naturalne drewno d\u0119bowe oraz ukryte o\u015bwietlenie LED w sufitach podwieszanych.\"\r\n    },\r\n    kuchnia: {\r\n      title: \"\ud83c\udf73 Kuchnia z Wysp\u0105 (12 m\u00b2)\",\r\n      desc: \"Zabudowa pod sam sufit w matowym graficie. Blaty wykonane ze spieku kwarcowego, odpornego na zarysowania i wysok\u0105 temperatur\u0119.\"\r\n    },\r\n    sypialnia: {\r\n      title: \"\ud83d\udecf\ufe0f Sypialnia Master (16 m\u00b2)\",\r\n      desc: \"Prywatna oaza spokoju z garderob\u0105. \u015aciana za \u0142\u00f3\u017ckiem wyko\u0144czona tapicerowanymi panelami w kolorze butelkowej zieleni.\"\r\n    },\r\n    lazienka: {\r\n      title: \"\ud83d\udebf \u0141azienka w stylu SPA (8 m\u00b2)\",\r\n      desc: \"W\u0142oskie p\u0142ytki wielkoformatowe (imitacja marmuru Calacatta). Prysznic typu walk-in z odp\u0142ywem liniowym i armatur\u0105 w szczotkowanym z\u0142ocie.\"\r\n    }\r\n  };\r\n\r\n  window.showRoom = function(roomKey) {\r\n    const infoPanel = document.getElementById('room-info');\r\n    if (!infoPanel) return;\r\n\r\n    const room = rooms[roomKey];\r\n\r\n    \/\/ Ma\u0142a animacja przej\u015bcia (fade in)\r\n    infoPanel.style.opacity = '0';\r\n    infoPanel.style.transform = 'translateY(5px)';\r\n\r\n    setTimeout(() => {\r\n      infoPanel.innerHTML = `\r\n        <div class=\"rzut-info-title\">${room.title}<\/div>\r\n        <div class=\"rzut-info-desc\">${room.desc}<\/div>\r\n      `;\r\n      infoPanel.style.opacity = '1';\r\n      infoPanel.style.transform = 'translateY(0)';\r\n    }, 200);\r\n  };\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dfd4bea e-con-full e-flex e-con e-child\" data-id=\"dfd4bea\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-175a015 elementor-widget elementor-widget-html\" data-id=\"175a015\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap');\r\n\r\n.card-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\r\n  gap: 20px;\r\n  max-width: 1200px;\r\n  margin: 20px auto;\r\n  font-family: 'Plus Jakarta Sans', sans-serif;\r\n}\r\n\r\n.p-card {\r\n  background: #18181b; \/* Luksusowe, ciemne t\u0142o z Twojego cennika *\/\r\n  border: 1px solid #27272a;\r\n  border-radius: 20px;\r\n  padding: 30px;\r\n  text-align: left;\r\n  color: #ffffff;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: space-between;\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n.p-card:hover { \r\n  transform: translateY(-5px); \r\n  border-color: #a855f7; \/* Tw\u00f3j fioletowy akcent ze screena *\/\r\n}\r\n\r\n.p-icon {\r\n  width: 48px;\r\n  height: 48px;\r\n  background: rgba(168, 85, 247, 0.1);\r\n  border-radius: 12px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 1.5rem;\r\n  margin-bottom: 20px;\r\n  border: 1px solid rgba(168, 85, 247, 0.3);\r\n}\r\n\r\n.p-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 10px; color: #ffffff; }\r\n.p-desc { font-size: 0.95rem; color: #a1a1aa; margin-bottom: 25px; line-height: 1.5; }\r\n\r\n.p-features { list-style: none; padding: 0; margin: 0 0 30px 0; }\r\n.p-features li {\r\n  font-size: 0.9rem;\r\n  color: #e4e4e7;\r\n  margin-bottom: 12px;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n}\r\n\r\n.p-features li::before {\r\n  content: '\u2713';\r\n  color: #a855f7;\r\n  font-weight: 800;\r\n}\r\n\r\n.p-price { font-size: 1.8rem; font-weight: 800; color: #ffffff; margin-bottom: 20px; }\r\n\r\n.p-btn {\r\n  width: 100%;\r\n  background: #a855f7;\r\n  color: white;\r\n  border: none;\r\n  padding: 14px;\r\n  border-radius: 12px;\r\n  font-weight: 800;\r\n  cursor: pointer;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  font-size: 0.95rem;\r\n  transition: background 0.2s;\r\n  display: block;\r\n}\r\n.p-btn:hover { background: #9333ea; }\r\n<\/style>\r\n\r\n<div class=\"card-grid\">\r\n\r\n  <div class=\"p-card\">\r\n    <div>\r\n      <div class=\"p-icon\">\ud83d\udd0d<\/div>\r\n      <div class=\"p-title\">Interaktywny Rzut Projektu<\/div>\r\n      <div class=\"p-desc\">Modu\u0142 wizualizacji rzutu 2D\/3D z interaktywnymi punktami (Hotspots) wy\u015bwietlaj\u0105cymi opisy pomieszcze\u0144.<\/div>\r\n      <ul class=\"p-features\">\r\n        <li>Pulsuj\u0105ce znaczniki przykuwaj\u0105ce wzrok (Animowane)<\/li>\r\n        <li>Brak prze\u0142adowania strony (Szybki i lekki kod JS)<\/li>\r\n        <li>Opisy i specyfikacje wyskakuj\u0105ce najechania i klikni\u0119ciu<\/li>\r\n        <li>Wygodny dla deweloper\u00f3w i biur architektonicznych<\/li>\r\n      <\/ul>\r\n    <\/div>\r\n    <div>\r\n      <div class=\"p-price\">od 550 z\u0142<\/div>\r\n      <a href=\"#kontakt\" class=\"p-btn\">Wdr\u00f3\u017c u Klienta<\/a>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/div>\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-d810076 e-flex e-con-boxed e-con e-parent\" data-id=\"d810076\" data-element_type=\"container\" data-e-type=\"container\" id=\"kontakt\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fbf362a elementor-widget elementor-widget-html\" data-id=\"fbf362a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap\" rel=\"stylesheet\">\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/lucide@0.263.0\/dist\/umd\/lucide.min.js\"><\/script>\r\n\r\n<div id=\"wrapper-kontakt-premium\">\r\n    <style>\r\n        #wrapper-kontakt-premium, #wrapper-kontakt-premium * {\r\n            font-family: 'Poppins', sans-serif !important;\r\n            box-sizing: border-box !important;\r\n        }\r\n\r\n        #wrapper-kontakt-premium {\r\n            background: #0a0a0c !important;\r\n            padding: 80px 20px;\r\n            color: #ffffff;\r\n            width: 100%;\r\n            display: flex;\r\n            justify-content: center;\r\n        }\r\n\r\n        .contact-container {\r\n            width: 100%;\r\n            max-width: 1100px;\r\n            display: grid;\r\n            grid-template-columns: 1fr 1.2fr;\r\n            gap: 60px;\r\n            align-items: center;\r\n        }\r\n\r\n        \/* LEWA STRONA *\/\r\n        .contact-info h2 {\r\n            font-size: clamp(30px, 4vw, 42px) !important;\r\n            font-weight: 700;\r\n            margin-bottom: 20px;\r\n            background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n        }\r\n\r\n        .contact-info p { color: #94a3b8; font-size: 16px; margin-bottom: 30px; font-weight: 300; }\r\n\r\n        .benefit-card {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n            padding: 12px;\r\n            background: rgba(255, 255, 255, 0.03);\r\n            border-radius: 12px;\r\n            margin-bottom: 12px;\r\n            border: 1px solid rgba(255, 255, 255, 0.05);\r\n        }\r\n        .benefit-card i { color: #ec4899; }\r\n\r\n        \/* PRAWA STRONA - FORMULARZ *\/\r\n        .form-glass {\r\n            background: rgba(255, 255, 255, 0.02);\r\n            backdrop-filter: blur(20px);\r\n            border: 1px solid rgba(255, 255, 255, 0.1);\r\n            border-radius: 24px;\r\n            padding: 35px;\r\n        }\r\n\r\n        .form-group { margin-bottom: 18px; position: relative; }\r\n\r\n        .form-group label {\r\n            display: block;\r\n            font-size: 12px;\r\n            color: #94a3b8;\r\n            margin-bottom: 6px;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n        }\r\n\r\n        \/* NAPRAWIONE INPUTY I SELECT *\/\r\n        .input-control {\r\n            width: 100%;\r\n            height: 54px; \/* Sztywna wysoko\u015b\u0107 dla wszystkich p\u00f3l *\/\r\n            background: rgba(255, 255, 255, 0.05);\r\n            border: 1px solid rgba(255, 255, 255, 0.1);\r\n            border-radius: 12px;\r\n            padding: 0 15px 0 45px; \/* Wy\u015brodkowanie tekstu w pionie przez padding 0 *\/\r\n            color: #fff;\r\n            font-size: 15px;\r\n            transition: all 0.3s ease;\r\n            display: flex;\r\n            align-items: center;\r\n        }\r\n\r\n        \/* SPECJALNA NAPRAWA DLA SELECTA *\/\r\n        select.input-control {\r\n            cursor: pointer;\r\n            appearance: none !important;\r\n            -webkit-appearance: none !important;\r\n            background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'\/%3E%3C\/svg%3E\") !important;\r\n            background-repeat: no-repeat !important;\r\n            background-position: right 15px center !important;\r\n            background-size: 16px !important;\r\n            line-height: 54px !important; \/* Wymuszenie centrowania w niekt\u00f3rych przegl\u0105darkach *\/\r\n        }\r\n\r\n        \/* Textarea musi mie\u0107 auto wysoko\u015b\u0107 *\/\r\n        textarea.input-control {\r\n            height: auto !important;\r\n            min-height: 100px;\r\n            padding-top: 15px !important;\r\n            line-height: 1.5;\r\n        }\r\n\r\n        .form-group i.field-icon {\r\n            position: absolute;\r\n            left: 15px;\r\n            top: 36px; \/* Idealne wyr\u00f3wnanie przy labelu *\/\r\n            color: #64748b;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .submit-btn {\r\n            width: 100%;\r\n            background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);\r\n            color: #fff;\r\n            border: none;\r\n            height: 56px;\r\n            border-radius: 12px;\r\n            font-weight: 600;\r\n            font-size: 16px;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 10px;\r\n            margin-top: 10px;\r\n        }\r\n\r\n        .submit-btn:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 10px 20px rgba(236, 72, 153, 0.3);\r\n        }\r\n\r\n        .success-overlay { display: none; text-align: center; color: #4ade80; margin-top: 15px; font-size: 14px; }\r\n\r\n        @media (max-width: 900px) {\r\n            .contact-container { grid-template-columns: 1fr; gap: 40px; }\r\n            .form-glass { padding: 25px; }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"contact-container\">\r\n        <div class=\"contact-info\">\r\n            <h2>Porozmawiajmy o Twoim projekcie<\/h2>\r\n            <p>Napisz kilka s\u0142\u00f3w o swoim biznesie, a zaproponuj\u0119 najlepsze rozwi\u0105zanie.<\/p>\r\n            \r\n            <div class=\"benefit-card\"><i data-lucide=\"zap\" size=\"18\"><\/i><span>Szybka odpowied\u017a w 24h<\/span><\/div>\r\n            <div class=\"benefit-card\"><i data-lucide=\"shield-check\" size=\"18\"><\/i><span>Pe\u0142ne bezpiecze\u0144stwo danych<\/span><\/div>\r\n            <div class=\"benefit-card\"><i data-lucide=\"cpu\" size=\"18\"><\/i><span>Wsparcie AI i automatyzacji<\/span><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"form-wrapper\">\r\n            <form id=\"premium-contact-form\" class=\"form-glass\">\r\n                <div class=\"form-group\">\r\n                    <label>Imi\u0119 i nazwisko<\/label>\r\n                    <i data-lucide=\"user\" size=\"18\" class=\"field-icon\"><\/i>\r\n                    <input type=\"text\" class=\"input-control\" placeholder=\"Twoje imi\u0119...\" required>\r\n                <\/div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label>Adres e-mail<\/label>\r\n                    <i data-lucide=\"mail\" size=\"18\" class=\"field-icon\"><\/i>\r\n                    <input type=\"email\" class=\"input-control\" placeholder=\"twoj@email.pl\" required>\r\n                <\/div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label>Opis projektu<\/label>\r\n                    <i data-lucide=\"message-square\" size=\"18\" class=\"field-icon\"><\/i>\r\n                    <textarea class=\"input-control\" placeholder=\"W czym mog\u0119 Ci pom\u00f3c?\"><\/textarea>\r\n                <\/div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label>Przybli\u017cony bud\u017cet<\/label>\r\n                    <i data-lucide=\"banknote\" size=\"18\" class=\"field-icon\"><\/i>\r\n                    <select class=\"input-control\">\r\n                        <option value=\"\" disabled selected>Wybierz zakres (opcjonalnie)<\/option>\r\n                        <option value=\"1\">Poni\u017cej 5 000 PLN<\/option>\r\n                        <option value=\"2\">5 000 - 15 000 PLN<\/option>\r\n                        <option value=\"3\">Powy\u017cej 15 000 PLN<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n\r\n                <button type=\"submit\" class=\"submit-btn\">\r\n                    <span>Wy\u015blij zapytanie<\/span>\r\n                    <i data-lucide=\"send\" size=\"18\"><\/i>\r\n                <\/button>\r\n\r\n                <div id=\"form-success\" class=\"success-overlay\">\r\n                    <i data-lucide=\"check-circle\" size=\"18\" style=\"vertical-align: middle; margin-right: 5px;\"><\/i> \r\n                    Wiadomo\u015b\u0107 wys\u0142ana! Odpowiem niebawem.\r\n                <\/div>\r\n            <\/form>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    (function() {\r\n        if (window.lucide) lucide.createIcons();\r\n        const form = document.getElementById('premium-contact-form');\r\n        const successMsg = document.getElementById('form-success');\r\n\r\n        form.addEventListener('submit', function(e) {\r\n            e.preventDefault();\r\n            const btn = form.querySelector('.submit-btn');\r\n            btn.innerHTML = 'Wysy\u0142anie...';\r\n            btn.style.opacity = '0.7';\r\n\r\n            setTimeout(() => {\r\n                form.reset();\r\n                btn.innerHTML = 'Wy\u015blij zapytanie <i data-lucide=\"send\" size=\"18\"><\/i>';\r\n                btn.style.opacity = '1';\r\n                successMsg.style.display = 'block';\r\n                if (window.lucide) lucide.createIcons();\r\n                setTimeout(() => { successMsg.style.display = 'none'; }, 5000);\r\n            }, 1200);\r\n        });\r\n    })();\r\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-257c6b4 e-flex e-con-boxed e-con e-parent\" data-id=\"257c6b4\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c511f55 elementor-widget elementor-widget-html\" data-id=\"c511f55\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<footer id=\"premium-footer\">\r\n    <style>\r\n        \/* Wymuszenie czcionki dla WSZYSTKICH element\u00f3w wewn\u0105trz stopki *\/\r\n        #premium-footer, \r\n        #premium-footer * {\r\n            font-family: 'Poppins', sans-serif !important;\r\n        }\r\n\r\n        #premium-footer {\r\n            background: #0a0a0c;\r\n            color: #ffffff;\r\n            padding: 80px 0 30px 0;\r\n            border-top: 1px solid rgba(255, 255, 255, 0.05);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        \/* Po\u015bwiata w tle *\/\r\n        #premium-footer::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: -150px;\r\n            right: -150px;\r\n            width: 300px;\r\n            height: 300px;\r\n            background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, transparent 70%);\r\n            pointer-events: none;\r\n        }\r\n\r\n        .footer-container {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 0 30px;\r\n            display: grid;\r\n            grid-template-columns: 1.5fr 1fr 1fr 1.2fr;\r\n            gap: 40px;\r\n        }\r\n\r\n        \/* LOGO *\/\r\n        .footer-logo {\r\n            font-size: 24px;\r\n            font-weight: 700;\r\n            margin-bottom: 20px;\r\n            display: block;\r\n            text-decoration: none;\r\n            color: #fff !important;\r\n        }\r\n\r\n        .footer-logo span {\r\n            background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n        }\r\n\r\n        .footer-bio {\r\n            color: rgba(255, 255, 255, 0.6);\r\n            font-size: 14px;\r\n            line-height: 1.6;\r\n            margin-bottom: 25px;\r\n        }\r\n\r\n        \/* TYTU\u0141Y SEKCJI - Teraz na 100% Poppins *\/\r\n        .footer-heading {\r\n            font-size: 16px;\r\n            font-weight: 600;\r\n            margin-bottom: 25px;\r\n            color: #ffffff;\r\n            text-transform: none; \/* Zapobiega wymuszaniu wielkich liter przez niekt\u00f3re motywy *\/\r\n            letter-spacing: 0.5px;\r\n        }\r\n\r\n        \/* LINKI *\/\r\n        .footer-links {\r\n            list-style: none;\r\n            padding: 0;\r\n            margin: 0;\r\n        }\r\n\r\n        .footer-links li {\r\n            margin-bottom: 12px;\r\n        }\r\n\r\n        .footer-links a {\r\n            color: rgba(255, 255, 255, 0.6);\r\n            text-decoration: none;\r\n            font-size: 14px;\r\n            transition: all 0.3s ease;\r\n            display: inline-block;\r\n        }\r\n\r\n        .footer-links a:hover {\r\n            color: #ec4899;\r\n            padding-left: 5px;\r\n        }\r\n\r\n        \/* KONTAKT I SOCIALE *\/\r\n        .footer-contact-item {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n            color: rgba(255, 255, 255, 0.6);\r\n            font-size: 14px;\r\n            margin-bottom: 15px;\r\n        }\r\n\r\n        .social-icons {\r\n            display: flex;\r\n            gap: 15px;\r\n            margin-top: 25px;\r\n        }\r\n\r\n        .social-icons a {\r\n            width: 40px;\r\n            height: 40px;\r\n            background: rgba(255, 255, 255, 0.03);\r\n            border: 1px solid rgba(255, 255, 255, 0.08);\r\n            border-radius: 12px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: white;\r\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n            text-decoration: none;\r\n        }\r\n\r\n        .social-icons a:hover {\r\n            background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);\r\n            border-color: transparent;\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 10px 20px rgba(236, 72, 153, 0.2);\r\n        }\r\n\r\n        \/* DOLNY PASEK *\/\r\n        .footer-bottom {\r\n            max-width: 1200px;\r\n            margin: 60px auto 0 auto;\r\n            padding: 30px 30px 0 30px;\r\n            border-top: 1px solid rgba(255, 255, 255, 0.05);\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            font-size: 13px;\r\n            color: rgba(255, 255, 255, 0.4);\r\n        }\r\n\r\n        \/* RESPONSYWNO\u015a\u0106 *\/\r\n        @media (max-width: 991px) {\r\n            .footer-container { grid-template-columns: 1fr 1fr; }\r\n        }\r\n\r\n        @media (max-width: 600px) {\r\n            #premium-footer { padding: 60px 0 30px 0; }\r\n            .footer-container { grid-template-columns: 1fr; text-align: center; }\r\n            .footer-contact-item, .social-icons { justify-content: center; }\r\n            .footer-bottom { flex-direction: column; gap: 15px; text-align: center; }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"footer-container\">\r\n        <div class=\"footer-col\">\r\n            <a href=\"\/\" class=\"footer-logo\">\r\n                Emilia<span>Ruszczyk<\/span>\r\n            <\/a>\r\n            <p class=\"footer-bio\">\r\n                Projektuj\u0119 nowoczesne do\u015bwiadczenia cyfrowe. Tworz\u0119 strony, kt\u00f3re \u0142\u0105cz\u0105 estetyk\u0119 z wysok\u0105 konwersj\u0105 i automatyzacj\u0105.\r\n            <\/p>\r\n        <\/div>\r\n\r\n\r\n        <div class=\"footer-col\">\r\n            <h4 class=\"footer-heading\">Eksploruj<\/h4>\r\n            <ul class=\"footer-links\">\r\n                <li><a href=\"https:\/\/showroom.emiliaruszczyk.pl\/\" target=\"_blank\" rel=\"noopener\">Showroom<\/a><\/li>\r\n                <li><a href=\"#polityka\">Polityka prywatno\u015bci<\/a><\/li>\r\n                <li><a href=\"#cookies\">Cookies<\/a><\/li>\r\n            <\/ul>\r\n        <\/div>\r\n\r\n        <div class=\"footer-col\">\r\n            <h4 class=\"footer-heading\">Kontakt<\/h4>\r\n            <div class=\"footer-contact-item\">\r\n                <i data-lucide=\"mail\" size=\"18\"><\/i>\r\n                ignisdigital@emiliaruszczyk.pl\r\n            <\/div>\r\n            <div class=\"social-icons\">\r\n                <a href=\"https:\/\/www.linkedin.com\/in\/emilia-ruszczyk-78055719a\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"LinkedIn\">\r\n        <i data-lucide=\"linkedin\" size=\"20\"><\/i>\r\n    <\/a>\r\n                <a href=\"https:\/\/www.instagram.com\/nowoczesny_wymiar_stron\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram\">\r\n        <i data-lucide=\"instagram\" size=\"20\"><\/i>\r\n    <\/a>\r\n                \r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"footer-bottom\">\r\n        <p>\u00a9 2026 Emilia Ruszczyk. Wszystkie prawa zastrze\u017cone.<\/p>\r\n        <p>Design & Code: Emilia Ruszczyk<\/p>\r\n    <\/div>\r\n<\/footer>\r\n\r\n<script>\r\n    if (window.lucide) lucide.createIcons();\r\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>EmiliaRuszczyk SHOWROOM&nbsp; Bezp\u0142atna wycena \ud83d\udcd0 Modu\u0142 Studia Projektowego Kompleksowy system wycen i doboru pakiet\u00f3w projektowych dla architekt\u00f3w i projektant\u00f3w wn\u0119trz. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-224","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/showroom.emiliaruszczyk.pl\/index.php?rest_route=\/wp\/v2\/pages\/224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/showroom.emiliaruszczyk.pl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/showroom.emiliaruszczyk.pl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/showroom.emiliaruszczyk.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/showroom.emiliaruszczyk.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=224"}],"version-history":[{"count":10,"href":"https:\/\/showroom.emiliaruszczyk.pl\/index.php?rest_route=\/wp\/v2\/pages\/224\/revisions"}],"predecessor-version":[{"id":270,"href":"https:\/\/showroom.emiliaruszczyk.pl\/index.php?rest_route=\/wp\/v2\/pages\/224\/revisions\/270"}],"wp:attachment":[{"href":"https:\/\/showroom.emiliaruszczyk.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}