Creative Zen \u2013 Nawigacja<\/title>\r\n\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin\/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;700;800&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n ZMIENNE \u2013 sp\u00f3jne z reszt\u0105 segment\u00f3w\r\n Zmie\u0144 --accent aby zmieni\u0107 kolor akcentu\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n :root {\r\n --accent: #4ade80; \/* kolor zielonego akcentu *\/\r\n --text: #ffffff; \/* kolor tekstu *\/\r\n --nav-h: 56px; \/* wysoko\u015b\u0107 navbara \u2013 zmie\u0144 je\u015bli potrzeba *\/\r\n --px: clamp(24px, 6vw, 80px); \/* padding poziomy *\/\r\n --font: 'Inter', sans-serif;\r\n }\r\n\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n html { font-size: 16px; }\r\n body { font-family: var(--font); color: var(--text); background: transparent; }\r\n\r\n \/* \u2550\u2550 NAWIGACJA \u2013 STICKY \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n Przyklejona do g\u00f3rnej kraw\u0119dzi ekranu podczas scrollowania\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n nav {\r\n position: fixed;\r\n left: 0;\r\n right: 0;\r\n \/* \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n \u2551 MARGINES G\u00d3RNY NAVBARA (desktop) \u2551\r\n \u2551 Zmie\u0144 warto\u015b\u0107 poni\u017cej aby przesun\u0105\u0107 navbar w g\u00f3r\u0119 \u2551\r\n \u2551 lub w d\u00f3\u0142 od kraw\u0119dzi ekranu \u2551\r\n \u2551 0px = przy samej g\u00f3rze ekranu \u2551\r\n \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d *\/\r\n top: 0px; \/* \u2190 ZMIE\u0143 TEN MARGINES G\u00d3RNY *\/\r\n z-index: 200;\r\n height: var(--nav-h);\r\n \/* Glassmorphism \u2013 ciemne t\u0142o z rozmyciem *\/\r\n background: rgba(14,14,14,0.85);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n display: flex;\r\n align-items: center; \/* wy\u015brodkowanie pionowe *\/\r\n justify-content: space-between; \/* logo lewo, linki prawo *\/\r\n padding: 0 var(--px);\r\n border-bottom: 1px solid rgba(255,255,255,0.06);\r\n }\r\n\r\n \/* \u2550\u2550 LOGO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n Zmie\u0144 tekst \"CREATIVE ZEN\" je\u015bli potrzeba\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .logo {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 0.8rem;\r\n font-weight: 600;\r\n letter-spacing: 0.08em;\r\n color: var(--text);\r\n text-decoration: none;\r\n }\r\n\r\n \/* Obracaj\u0105ce si\u0119 zielone k\u00f3\u0142ko przy logo *\/\r\n .logo-ring {\r\n position: relative;\r\n width: 16px; height: 16px;\r\n flex-shrink: 0;\r\n }\r\n \/* Zewn\u0119trzny pier\u015bcie\u0144 \u2013 animacja obrotu *\/\r\n .logo-ring::before {\r\n content: '';\r\n position: absolute; inset: 0;\r\n border-radius: 50%;\r\n border: 2px solid var(--accent);\r\n border-top-color: transparent; \/* przerywa \u2192 efekt wirowania *\/\r\n animation: spinRing 3s linear infinite;\r\n }\r\n \/* Wewn\u0119trzna plamka *\/\r\n .logo-ring::after {\r\n content: '';\r\n position: absolute;\r\n top: 50%; left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 5px; height: 5px;\r\n border-radius: 50%;\r\n background: var(--accent);\r\n }\r\n @keyframes spinRing { to { transform: rotate(360deg); } }\r\n\r\n \/* \u2550\u2550 LINKI NAWIGACYJNE (DESKTOP) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n Zmie\u0144 href i etykiety w <ul class=\"nav-links\"> w HTML\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .nav-links {\r\n display: flex;\r\n gap: clamp(16px, 2.5vw, 36px);\r\n list-style: none;\r\n }\r\n .nav-links a {\r\n \/* ROZMIAR LITER W MENU \u2013 zmie\u0144 tutaj *\/\r\n font-size: 0.80rem; \/* \u2190 by\u0142o 0.67rem *\/\r\n font-weight: 600; \/* \u2190 grubo\u015b\u0107: 400=normalna, 600=pogrubiona *\/\r\n letter-spacing: 0.12em;\r\n text-transform: uppercase;\r\n \/* KOLOR LINK\u00d3W \u2013 1.00 = pe\u0142na biel, 0.68 = szary *\/\r\n color: rgba(255,255,255,1.00); \/* \u2190 ZMIE\u0143 KOLOR LINK\u00d3W *\/\r\n text-decoration: none;\r\n transition: color 0.18s;\r\n }\r\n .nav-links a:hover { color: var(--text); }\r\n\r\n \/* \u2550\u2550 HAMBURGER \u2013 widoczny tylko na mobile \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .hamburger {\r\n display: none; \/* ukryty na desktop *\/\r\n flex-direction: column;\r\n gap: 5px;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 4px;\r\n }\r\n .hamburger span {\r\n display: block;\r\n width: 22px; height: 2px;\r\n background: var(--text);\r\n border-radius: 1px;\r\n transition: all 0.25s;\r\n }\r\n \/* Animacja hamburger \u2192 X *\/\r\n .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }\r\n .hamburger.active span:nth-child(2) { opacity: 0; }\r\n .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }\r\n\r\n \/* \u2550\u2550 MOBILNE MENU ROZWIJANE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n Pokazuje si\u0119 gdy hamburger aktywny (klasa .open dodana przez JS)\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .nav-links.open {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 22px;\r\n position: fixed;\r\n top: var(--nav-h); left: 0; right: 0;\r\n background: rgba(10,10,10,0.97);\r\n padding: 28px var(--px);\r\n border-top: 1px solid rgba(255,255,255,0.07);\r\n z-index: 199;\r\n }\r\n\r\n \/* \u2550\u2550 RESPONSYWNO\u015a\u0106 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n @media (max-width: 860px) {\r\n \/* Tablet\/telefon: chowamy linki, pokazujemy hamburger *\/\r\n .nav-links { display: none; }\r\n .hamburger {\r\n display: flex;\r\n }\r\n\r\n \/* Na mobile navbar bez marginesu \u2013 przy samej g\u00f3rze *\/\r\n nav { top: 0; } \/* \u2190 MARGINES G\u00d3RNY NA MOBILE (0 = brak) *\/\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<nav>\r\n\r\n \r\n <a class=\"logo\" href=\"https:\/\/creativezen.pl\">\r\n CREATIVE ZEN\r\n <span class=\"logo-ring\" aria-hidden=\"true\"><\/span>\r\n <\/a>\r\n\r\n \r\n <ul class=\"nav-links\" id=\"navLinks\">\r\n <li><a href=\"https:\/\/creativezen.pl\/Baza-wiedzy\/\">Baza Wiedzy<\/a><\/li>\r\n <li><a href=\"https:\/\/creativezen.pl\/o-nas\/\">O Nas<\/a><\/li>\r\n <li><a href=\"https:\/\/creativezen.pl\/portfolio\/\">Us\u0142ugi<\/a><\/li>\r\n <li><a href=\"https:\/\/creativezen.pl\/blog\/\">Blog<\/a><\/li>\r\n <li><a href=\"https:\/\/creativezen.pl\/kontakt\/\">Kontakt<\/a><\/li>\r\n <\/ul>\r\n\r\n \r\n <button class=\"hamburger\" id=\"hamburger\"\r\n aria-label=\"Otw\u00f3rz menu\"\r\n aria-expanded=\"false\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n\r\n<\/nav>\r\n\r\n\r\n\r\n<script>\r\n var hamburger = document.getElementById('hamburger');\r\n var navLinks = document.getElementById('navLinks');\r\n\r\n \/* Otwiera\/zamyka mobilne menu *\/\r\n hamburger.addEventListener('click', function() {\r\n var isOpen = navLinks.classList.toggle('open');\r\n hamburger.classList.toggle('active', isOpen);\r\n hamburger.setAttribute('aria-expanded', isOpen);\r\n });\r\n\r\n \/* Zamknij menu po klikni\u0119ciu w link *\/\r\n navLinks.querySelectorAll('a').forEach(function(a) {\r\n a.addEventListener('click', function() {\r\n navLinks.classList.remove('open');\r\n hamburger.classList.remove('active');\r\n hamburger.setAttribute('aria-expanded', 'false');\r\n });\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-17715881 e-con-full e-flex e-con e-parent\" data-id=\"17715881\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-53fa9fe5 elementor-widget elementor-widget-html\" data-id=\"53fa9fe5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pl\">\r\n<head>\r\n <meta charset=\"UTF-8\"\/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Creative Zen \u2013 Hero Animacja Techniczna<\/title>\r\n\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin\/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;700;800&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n\r\n :root {\r\n --accent: #4ade80;\r\n --text: #ffffff;\r\n --nav-h: 56px;\r\n --px: clamp(24px, 6vw, 80px);\r\n --font: 'Inter', sans-serif;\r\n }\r\n\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n html { font-size: 16px; scroll-behavior: smooth; }\r\n body { font-family: var(--font); color: var(--text); background: transparent; overflow-x: hidden; }\r\n\r\n \/* \u2550\u2550 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .hero {\r\n position: relative;\r\n width: 100%;\r\n aspect-ratio: 21 \/ 9;\r\n min-height: 420px;\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n \/* \u2550\u2550 WIDEO MP4 W TLE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .hero-video {\r\n position: absolute;\r\n inset: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n object-position: center;\r\n pointer-events: none;\r\n }\r\n\r\n \/* \u2550\u2550 NAK\u0141ADKA GRADIENTOWA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .hero-overlay {\r\n position: absolute; inset: 0;\r\n z-index: 2;\r\n background:\r\n linear-gradient(to right,\r\n rgba(6,6,6,0.90) 0%,\r\n rgba(6,6,6,0.62) 38%,\r\n rgba(6,6,6,0.12) 100%),\r\n linear-gradient(to bottom,\r\n rgba(6,6,6,0.40) 0%,\r\n transparent 30%,\r\n rgba(6,6,6,0.60) 100%);\r\n }\r\n\r\n \/* \u2550\u2550 TRE\u015a\u0106 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .hero-content {\r\n position: relative;\r\n z-index: 3;\r\n padding: 0 var(--px);\r\n padding-top: var(--nav-h);\r\n max-width: 720px;\r\n }\r\n\r\n .hero-eyebrow {\r\n font-size: 0.75rem;\r\n font-weight: 400;\r\n letter-spacing: 0.22em;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,0.55);\r\n margin-bottom: 16px;\r\n animation: fadeUp 0.8s ease 0.1s both;\r\n }\r\n\r\n .hero-content h1 {\r\n font-size: clamp(4rem, 9.5vw, 8rem);\r\n font-weight: 800;\r\n line-height: 0.93;\r\n letter-spacing: -0.025em;\r\n margin-bottom: 24px;\r\n animation: fadeUp 0.8s ease 0.25s both;\r\n }\r\n\r\n .hero-desc {\r\n font-size: clamp(1rem, 1.7vw, 1.2rem);\r\n font-weight: 300;\r\n line-height: 1.68;\r\n color: rgba(255,255,255,0.80);\r\n margin-bottom: 36px;\r\n animation: fadeUp 0.8s ease 0.4s both;\r\n }\r\n\r\n .btn-outline {\r\n display: inline-block;\r\n padding: 14px 32px;\r\n border: 1.5px solid rgba(255,255,255,0.55);\r\n color: var(--text);\r\n font-family: var(--font);\r\n font-size: 0.72rem;\r\n font-weight: 600;\r\n letter-spacing: 0.18em;\r\n text-transform: uppercase;\r\n text-decoration: none;\r\n background: none;\r\n cursor: pointer;\r\n transition: background 0.2s, border-color 0.2s;\r\n animation: fadeUp 0.8s ease 0.55s both;\r\n }\r\n .btn-outline:hover {\r\n background: rgba(255,255,255,0.08);\r\n border-color: var(--text);\r\n }\r\n\r\n @keyframes fadeUp {\r\n from { opacity: 0; transform: translateY(18px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n \/* \u2550\u2550 TABLET \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n @media (max-width: 860px) {\r\n .hero { aspect-ratio: 16 \/ 9; min-height: 320px; }\r\n }\r\n\r\n \/* \u2550\u2550 MOBILE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n @media (max-width: 600px) {\r\n .hero {\r\n aspect-ratio: unset; min-height: unset;\r\n flex-direction: column; align-items: stretch;\r\n padding-top: var(--nav-h);\r\n }\r\n .hero-video {\r\n position: relative;\r\n inset: unset;\r\n width: 100%;\r\n height: auto;\r\n aspect-ratio: 16 \/ 9;\r\n object-position: center;\r\n flex-shrink: 0;\r\n }\r\n .hero-overlay {\r\n position: absolute; top: auto; bottom: 0;\r\n left: 0; right: 0; height: 50px; inset: unset;\r\n background: linear-gradient(to bottom, transparent, #060606);\r\n }\r\n .hero-content {\r\n position: static;\r\n padding: 26px 22px 44px;\r\n max-width: 100%;\r\n background: #060606;\r\n }\r\n .hero-eyebrow { font-size: 0.60rem; letter-spacing: 0.18em; margin-bottom: 12px; }\r\n .hero-content h1 { font-size: clamp(2.6rem, 13vw, 3.6rem); line-height: 0.95; margin-bottom: 16px; }\r\n .hero-desc { font-size: 0.92rem; margin-bottom: 26px; }\r\n .btn-outline { display: block; width: 100%; text-align: center; padding: 16px 20px; }\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"hero\">\r\n\r\n \r\n <video\r\n class=\"hero-video\"\r\n autoplay\r\n muted\r\n loop\r\n playsinline\r\n preload=\"auto\"\r\n >\r\n <source\r\n src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/05\/najnowsze-size.mp4\"\r\n type=\"video\/mp4\"\r\n \/>\r\n Twoja przegl\u0105darka nie obs\u0142uguje wideo HTML5.\r\n <\/video>\r\n\r\n \r\n <div class=\"hero-overlay\"><\/div>\r\n\r\n \r\n <div class=\"hero-content\">\r\n\r\n <p class=\"hero-eyebrow\">\r\n Maszyny \u2022 Urz\u0105dzenia \u2022 Linie produkcyjne \u2022 Instrukcje monta\u017cu\r\n <\/p>\r\n\r\n <h1>Animacja<br>Techniczna<\/h1>\r\n\r\n <p class=\"hero-desc\">\r\n Poka\u017c jak dzia\u0142a Tw\u00f3j produkt \u2014 zanim trafi do klienta.<br>\r\n Precyzyjne animacje 3D maszyn, urz\u0105dze\u0144 i linii produkcyjnych.\r\n <\/p>\r\n\r\n <a href=\"#kontakt\" class=\"btn-outline\">Napisz do nas<\/a>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-61d2ccf elementor-widget__width-inherit elementor-widget-tablet__width-inherit elementor-widget-mobile__width-inherit elementor-widget elementor-widget-elementskit-social-media\" data-id=\"61d2ccf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementskit-social-media.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" >\t\t\t <ul class=\"ekit_social_media\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"elementor-repeater-item-da8f4de\">\n\t\t\t\t\t <a\n\t\t\t\t\t\thref=\"https:\/\/www.facebook.com\/profile.php?viewas=100000686899395&id=61566403116140\" target=\"_blank\" aria-label=\"Facebook\" class=\"f\" >\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fab-facebook-f\" viewBox=\"0 0 320 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z\"><\/path><\/svg>\n <\/a>\n <\/li>\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"elementor-repeater-item-c8596be\">\n\t\t\t\t\t <a\n\t\t\t\t\t\thref=\"https:\/\/www.instagram.com\/creativezen.pl\/\" target=\"_blank\" aria-label=\"Instagram\" class=\"instagram\" >\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fab-instagram\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z\"><\/path><\/svg>\n <\/a>\n <\/li>\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"elementor-repeater-item-641feab\">\n\t\t\t\t\t <a\n\t\t\t\t\t\thref=\"https:\/\/www.tiktok.com\/@creativezen.pl\" target=\"_blank\" aria-label=\"TikTok\" class=\"tiktok\" >\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fab-tiktok\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z\"><\/path><\/svg>\n <\/a>\n <\/li>\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"elementor-repeater-item-7f6a243\">\n\t\t\t\t\t <a\n\t\t\t\t\t\thref=\"https:\/\/www.youtube.com\/@CreativeZen_Polska\" target=\"_blank\" aria-label=\"YouTube\" class=\"youtube\" >\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fab-youtube\" viewBox=\"0 0 576 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z\"><\/path><\/svg>\n <\/a>\n <\/li>\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"elementor-repeater-item-35f84a2\">\n\t\t\t\t\t <a\n\t\t\t\t\t\thref=\"https:\/\/www.linkedin.com\/company\/creativezen\/\" target=\"_blank\" aria-label=\"Linkedin\" class=\"linkedin\" >\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fab-linkedin\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z\"><\/path><\/svg>\n <\/a>\n <\/li>\n \t\t\t\t\t\t\t<\/ul>\n\t\t<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6a5014b1 e-con-full e-flex e-con e-parent\" data-id=\"6a5014b1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4886017d elementor-widget elementor-widget-html\" data-id=\"4886017d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!DOCTYPE html>\r\n<html lang=\"pl\">\r\n<head>\r\n <meta charset=\"UTF-8\"\/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Creative Zen \u2013 Animacje Techniczne 3D \u2013 Us\u0142ugi i cennik<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin\/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;700;800&display=swap\" rel=\"stylesheet\"\/>\r\n <style>\r\n :root {\r\n --accent: #4ade80;\r\n --text: #ffffff;\r\n --muted: rgba(255,255,255,0.52);\r\n --border: rgba(255,255,255,0.13);\r\n --acc-bg: rgba(255,255,255,0.025);\r\n --font: 'Inter', sans-serif;\r\n --px: clamp(24px, 6vw, 80px);\r\n }\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n html { font-size: 16px; }\r\n body { font-family: var(--font); color: var(--text); background: transparent; overflow-x: hidden; }\r\n\r\n .section-main {\r\n position: relative;\r\n padding: clamp(60px,9vw,110px) var(--px);\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: clamp(40px,6vw,100px);\r\n align-items: start;\r\n }\r\n\r\n .deco-tech {\r\n position: absolute; left: -20px; top: 50%;\r\n transform: translateY(-55%);\r\n opacity: 0.055; pointer-events: none;\r\n }\r\n .deco-circuit {\r\n position: absolute; bottom: 0; right: 0;\r\n opacity: 0.07; pointer-events: none;\r\n }\r\n\r\n \/* LEWA KOLUMNA *\/\r\n .col-services h2 { font-size: clamp(2rem,4.5vw,3.4rem); font-weight: 300; letter-spacing: -.015em; margin-bottom: clamp(32px,5vw,52px); line-height: 1.1; }\r\n .services { display: flex; flex-direction: column; gap: 28px; }\r\n .service { display: flex; align-items: flex-start; gap: 16px; }\r\n .service-icon { flex-shrink: 0; width: 36px; height: 36px; opacity: .70; margin-top: 1px; }\r\n .service-text h3 { font-size: .88rem; font-weight: 600; margin-bottom: 5px; color: var(--text); }\r\n .service-text p { font-size: .79rem; font-weight: 300; line-height: 1.65; color: var(--muted); }\r\n\r\n \/* PRAWA KOLUMNA \u2013 CENNIK *\/\r\n .col-pricing h2 { font-size: clamp(2rem,4.5vw,3.4rem); font-weight: 300; letter-spacing: -.015em; margin-bottom: 10px; line-height: 1.1; }\r\n\r\n .pricing-disclaimer {\r\n font-size: .75rem;\r\n font-weight: 300;\r\n line-height: 1.6;\r\n color: rgba(255,255,255,0.42);\r\n margin-bottom: clamp(18px,3vw,28px);\r\n padding: 10px 14px;\r\n border-left: 2px solid rgba(74,222,128,0.35);\r\n background: rgba(74,222,128,0.04);\r\n border-radius: 0 4px 4px 0;\r\n }\r\n\r\n .accordion { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }\r\n .acc-item { border-bottom: 1px solid var(--border); }\r\n .acc-item:last-child { border-bottom: none; }\r\n .acc-header { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; background: var(--acc-bg); color: var(--text); font-family: var(--font); font-size: .86rem; font-weight: 400; cursor: pointer; border: none; text-align: left; transition: background .18s; }\r\n .acc-header:hover { background: rgba(255,255,255,.05); }\r\n .acc-chev { flex-shrink: 0; width: 24px; height: 24px; border: 1.5px solid rgba(255,255,255,.30); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform .28s ease, border-color .2s; }\r\n .acc-item.open .acc-chev { transform: rotate(180deg); border-color: rgba(255,255,255,.65); }\r\n .acc-body { max-height: 0; overflow: hidden; transition: max-height .32s ease; }\r\n .acc-body-inner { padding: 14px 20px 20px; border-top: 1px solid rgba(255,255,255,.07); }\r\n\r\n .price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }\r\n .price-base { font-size: .72rem; font-weight: 400; color: rgba(255,255,255,.38); text-decoration: line-through; white-space: nowrap; }\r\n .price-after-label { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(74,222,128,0.75); white-space: nowrap; }\r\n .price-after-value { font-size: 1.05rem; font-weight: 700; color: var(--accent); white-space: nowrap; }\r\n .price-tag { font-size: 1.1rem; font-weight: 700; color: rgba(255,255,255,0.55); }\r\n\r\n .acc-body-inner p { font-size: .79rem; font-weight: 300; line-height: 1.65; color: var(--muted); }\r\n .price-note { display: inline-block; margin-top: 10px; font-size: .66rem; letter-spacing: .10em; text-transform: uppercase; color: rgba(255,255,255,.28); }\r\n\r\n @media (max-width: 860px) { .section-main { grid-template-columns: 1fr; gap: 52px; } }\r\n @media (max-width: 480px) { .section-main { padding-left: 18px; padding-right: 18px; } .acc-header { padding: 14px 16px; font-size: .82rem; } .acc-body-inner { padding: 12px 16px 16px; } }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"section-main\">\r\n\r\n \r\n <svg class=\"deco-tech\" width=\"260\" height=\"460\" viewBox=\"0 0 260 460\" fill=\"none\" aria-hidden=\"true\">\r\n <circle cx=\"130\" cy=\"60\" r=\"9\" stroke=\"white\" stroke-width=\"1.4\"\/>\r\n <circle cx=\"60\" cy=\"150\" r=\"9\" stroke=\"white\" stroke-width=\"1.4\"\/>\r\n <circle cx=\"200\" cy=\"150\" r=\"9\" stroke=\"white\" stroke-width=\"1.4\"\/>\r\n <circle cx=\"60\" cy=\"270\" r=\"9\" stroke=\"white\" stroke-width=\"1.4\"\/>\r\n <circle cx=\"200\" cy=\"270\" r=\"9\" stroke=\"white\" stroke-width=\"1.4\"\/>\r\n <circle cx=\"130\" cy=\"360\" r=\"9\" stroke=\"white\" stroke-width=\"1.4\"\/>\r\n <line x1=\"130\" y1=\"69\" x2=\"67\" y2=\"142\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <line x1=\"130\" y1=\"69\" x2=\"193\" y2=\"142\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <line x1=\"69\" y1=\"159\" x2=\"69\" y2=\"261\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <line x1=\"191\" y1=\"159\" x2=\"191\" y2=\"261\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <line x1=\"68\" y1=\"150\" x2=\"192\" y2=\"150\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <line x1=\"68\" y1=\"270\" x2=\"192\" y2=\"270\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <line x1=\"67\" y1=\"278\" x2=\"123\" y2=\"352\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <line x1=\"193\" y1=\"278\" x2=\"137\" y2=\"352\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <\/svg>\r\n\r\n \r\n <svg class=\"deco-circuit\" width=\"300\" height=\"170\" viewBox=\"0 0 300 170\" fill=\"none\" aria-hidden=\"true\">\r\n <circle cx=\"22\" cy=\"85\" r=\"5\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <line x1=\"27\" y1=\"85\" x2=\"75\" y2=\"85\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <circle cx=\"80\" cy=\"85\" r=\"5\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <line x1=\"85\" y1=\"85\" x2=\"85\" y2=\"45\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <line x1=\"85\" y1=\"45\" x2=\"170\" y2=\"45\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <circle cx=\"175\" cy=\"45\" r=\"4\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <line x1=\"179\" y1=\"45\" x2=\"245\" y2=\"45\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <circle cx=\"250\" cy=\"45\" r=\"3\" fill=\"white\"\/>\r\n <line x1=\"85\" y1=\"85\" x2=\"190\" y2=\"85\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <circle cx=\"195\" cy=\"85\" r=\"4\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <line x1=\"199\" y1=\"85\" x2=\"280\" y2=\"85\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <circle cx=\"285\" cy=\"85\" r=\"3\" fill=\"white\"\/>\r\n <line x1=\"85\" y1=\"85\" x2=\"85\" y2=\"130\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <line x1=\"85\" y1=\"130\" x2=\"220\" y2=\"130\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <circle cx=\"225\" cy=\"130\" r=\"4\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <line x1=\"229\" y1=\"130\" x2=\"290\" y2=\"130\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <circle cx=\"295\" cy=\"130\" r=\"3\" fill=\"white\"\/>\r\n <\/svg>\r\n\r\n\r\n \r\n <div class=\"col-services\">\r\n <h2>Co robimy?<\/h2>\r\n <div class=\"services\">\r\n\r\n \r\n <div class=\"service\">\r\n <svg class=\"service-icon\" viewBox=\"0 0 36 36\" fill=\"none\" aria-hidden=\"true\">\r\n <circle cx=\"18\" cy=\"18\" r=\"5\" stroke=\"rgba(255,255,255,0.55)\" stroke-width=\"1.4\"\/>\r\n <path d=\"M18 4v3M18 29v3M4 18h3M29 18h3M7.2 7.2l2.1 2.1M26.7 26.7l2.1 2.1M7.2 28.8l2.1-2.1M26.7 9.3l2.1-2.1\" stroke=\"rgba(255,255,255,0.45)\" stroke-width=\"1.3\" stroke-linecap=\"round\"\/>\r\n <circle cx=\"18\" cy=\"18\" r=\"9\" stroke=\"rgba(255,255,255,0.25)\" stroke-width=\"1\" stroke-dasharray=\"3 2\"\/>\r\n <\/svg>\r\n <div class=\"service-text\">\r\n <h3>Animacje maszyn i urz\u0105dze\u0144<\/h3>\r\n <p>Poka\u017c dzia\u0142anie mechanizm\u00f3w od wewn\u0105trz \u2014 przekroje, widoki rozstrzelone, ruchome cz\u0119\u015bci. Idealne do prezentacji handlowych i przetarg\u00f3w B2B.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"service\">\r\n <svg class=\"service-icon\" viewBox=\"0 0 36 36\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M22 5 L31 14 L14 31 L5 31 L5 22 Z\" stroke=\"rgba(255,255,255,0.55)\" stroke-width=\"1.3\" stroke-linejoin=\"round\"\/>\r\n <path d=\"M19 8 L28 17\" stroke=\"rgba(255,255,255,0.32)\" stroke-width=\"1\"\/>\r\n <path d=\"M8 8 Q14 12 18 18\" stroke=\"rgba(255,255,255,0.40)\" stroke-width=\"1.2\" stroke-dasharray=\"2.5 2\" stroke-linecap=\"round\"\/>\r\n <circle cx=\"8\" cy=\"8\" r=\"3\" stroke=\"rgba(255,255,255,0.40)\" stroke-width=\"1.2\"\/>\r\n <\/svg>\r\n <div class=\"service-text\">\r\n <h3>Instrukcje monta\u017cu 3D<\/h3>\r\n <p>Krok po kroku \u2014 animowane instrukcje zast\u0119puj\u0105 papierowe ulotki. Eliminuj\u0105 b\u0142\u0119dy monta\u017cowe, redukuj\u0105 koszty serwisu i skracaj\u0105 czas wdro\u017cenia.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"service\">\r\n <svg class=\"service-icon\" viewBox=\"0 0 36 36\" fill=\"none\" aria-hidden=\"true\">\r\n <rect x=\"3\" y=\"15\" width=\"30\" height=\"6\" rx=\"3\" stroke=\"rgba(255,255,255,0.55)\" stroke-width=\"1.3\"\/>\r\n <circle cx=\"9\" cy=\"18\" r=\"3\" fill=\"rgba(255,255,255,0.20)\" stroke=\"rgba(255,255,255,0.45)\" stroke-width=\"1.2\"\/>\r\n <circle cx=\"27\" cy=\"18\" r=\"3\" fill=\"rgba(255,255,255,0.20)\" stroke=\"rgba(255,255,255,0.45)\" stroke-width=\"1.2\"\/>\r\n <rect x=\"13\" y=\"10\" width=\"4\" height=\"5\" rx=\"1\" stroke=\"rgba(255,255,255,0.40)\" stroke-width=\"1\"\/>\r\n <rect x=\"19\" y=\"10\" width=\"4\" height=\"5\" rx=\"1\" stroke=\"rgba(255,255,255,0.40)\" stroke-width=\"1\"\/>\r\n <line x1=\"9\" y1=\"24\" x2=\"9\" y2=\"30\" stroke=\"rgba(255,255,255,0.30)\" stroke-width=\"1\" stroke-dasharray=\"2 2\"\/>\r\n <line x1=\"27\" y1=\"24\" x2=\"27\" y2=\"30\" stroke=\"rgba(255,255,255,0.30)\" stroke-width=\"1\" stroke-dasharray=\"2 2\"\/>\r\n <\/svg>\r\n <div class=\"service-text\">\r\n <h3>Linie produkcyjne i procesy<\/h3>\r\n <p>Wizualizacja ca\u0142ych ci\u0105g\u00f3w technologicznych \u2014 od surowca do gotowego produktu. Idealne do szkole\u0144, ISO i prezentacji dla inwestor\u00f3w.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"service\">\r\n <svg class=\"service-icon\" viewBox=\"0 0 36 36\" fill=\"none\" aria-hidden=\"true\">\r\n <rect x=\"3\" y=\"7\" width=\"30\" height=\"19\" rx=\"2\" stroke=\"rgba(255,255,255,0.55)\" stroke-width=\"1.3\"\/>\r\n <rect x=\"7\" y=\"11\" width=\"22\" height=\"11\" rx=\"1\" stroke=\"rgba(255,255,255,0.30)\" stroke-width=\"1\"\/>\r\n <path d=\"M10 19 L14 15 L17 18 L21 13 L26 17\" stroke=\"rgba(255,255,255,0.55)\" stroke-width=\"1.2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <line x1=\"13\" y1=\"26\" x2=\"23\" y2=\"26\" stroke=\"rgba(255,255,255,0.38)\" stroke-width=\"1.3\" stroke-linecap=\"round\"\/>\r\n <line x1=\"18\" y1=\"26\" x2=\"18\" y2=\"30\" stroke=\"rgba(255,255,255,0.32)\" stroke-width=\"1.2\"\/>\r\n <\/svg>\r\n <div class=\"service-text\">\r\n <h3>Animacje produktowe i targowe<\/h3>\r\n <p>Zaprezentuj produkt efektownie \u2014 na stoisku targowym, w katalogu B2B lub w materia\u0142ach sprzeda\u017cowych. Klient widzi dzia\u0142anie przed zakupem.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"col-pricing\">\r\n <h2>Otrzymaj rabat -40%<\/h2>\r\n\r\n <p class=\"pricing-disclaimer\">\r\n Ka\u017cdy projekt jest inny \u2014 z\u0142o\u017cono\u015b\u0107 modelu 3D, d\u0142ugo\u015b\u0107 animacji i dost\u0119pno\u015b\u0107 plik\u00f3w CAD maj\u0105 bezpo\u015bredni wp\u0142yw na koszt. Poni\u017csze ceny to orientacyjny punkt odniesienia, kt\u00f3ry pomo\u017ce Ci zaplanowa\u0107 bud\u017cet. Dok\u0142adn\u0105 wycen\u0119 przygotowujemy bezp\u0142atnie po kr\u00f3tkim briefie.\r\n <\/p>\r\n\r\n <div class=\"accordion\">\r\n\r\n \r\n <div class=\"acc-item open\">\r\n <button class=\"acc-header\" onclick=\"toggleAcc(this)\">\r\n Animacja instrukcji monta\u017cu 3D\r\n <span class=\"acc-chev\" aria-hidden=\"true\">\r\n <svg width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\"><path d=\"M1 1L4.5 5L8 1\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\r\n <\/span>\r\n <\/button>\r\n <div class=\"acc-body\" style=\"max-height:400px\">\r\n <div class=\"acc-body-inner\">\r\n \r\n <div class=\"price-row\">\r\n <span class=\"price-tag\">od 6 000 z\u0142<\/span>\r\n <span class=\"price-base\">do 8 500 z\u0142<\/span>\r\n <span class=\"price-after-label\">po rabacie \u221240%<\/span>\r\n <span class=\"price-after-value\">3 600 \u2013 5 100 z\u0142<\/span>\r\n <\/div>\r\n <p>Animacja 30\u201360 sek. krok po kroku zast\u0119puj\u0105ca papierow\u0105 instrukcj\u0119. Eliminuje b\u0142\u0119dy monta\u017cowe i zg\u0142oszenia serwisowe. Pakiet: scenariusz, animacja 3D, eksport MP4 i QR-kod do umieszczenia na opakowaniu.<\/p>\r\n <span class=\"price-note\">Rabat -40% dla nowych klient\u00f3w \u00b7 Demo za darmo<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"acc-item\">\r\n <button class=\"acc-header\" onclick=\"toggleAcc(this)\">\r\n Animacja maszyny \/ urz\u0105dzenia 3D\r\n <span class=\"acc-chev\" aria-hidden=\"true\">\r\n <svg width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\"><path d=\"M1 1L4.5 5L8 1\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\r\n <\/span>\r\n <\/button>\r\n <div class=\"acc-body\">\r\n <div class=\"acc-body-inner\">\r\n \r\n <div class=\"price-row\">\r\n <span class=\"price-tag\">od 8 000 z\u0142<\/span>\r\n <span class=\"price-base\">reg. 13 333 z\u0142<\/span>\r\n <span class=\"price-after-label\">po rabacie \u221240%<\/span>\r\n <span class=\"price-after-value\">od 4 800 z\u0142<\/span>\r\n <\/div>\r\n <p>Animacja 3D przedstawiaj\u0105ca dzia\u0142anie maszyny lub urz\u0105dzenia od \u015brodka \u2014 przekroje, widoki rozstrzelone, ruchome mechanizmy. Idealna do przetarg\u00f3w, katalog\u00f3w B2B i prezentacji dla klient\u00f3w. <\/p>\r\n <span class=\"price-note\">Rabat -40% dla nowych klient\u00f3w \u00b7 Demo za darmo<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"acc-item\">\r\n <button class=\"acc-header\" onclick=\"toggleAcc(this)\">\r\n Animacja linii produkcyjnej\r\n <span class=\"acc-chev\" aria-hidden=\"true\">\r\n <svg width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\"><path d=\"M1 1L4.5 5L8 1\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\r\n <\/span>\r\n <\/button>\r\n <div class=\"acc-body\">\r\n <div class=\"acc-body-inner\">\r\n \r\n <div class=\"price-row\">\r\n <span class=\"price-tag\">od 14 000 z\u0142<\/span>\r\n <span class=\"price-base\">reg. 23 333 z\u0142<\/span>\r\n <span class=\"price-after-label\">po rabacie \u221240%<\/span>\r\n <span class=\"price-after-value\">od 8 400 z\u0142<\/span>\r\n <\/div>\r\n <p>Kompleksowa wizualizacja ca\u0142ego procesu produkcji \u2014 od wsadu do produktu gotowego. Animacja zast\u0119puje drogi film fabryczny i mo\u017ce by\u0107 aktualizowana przy zmianach procesu.<\/p>\r\n <span class=\"price-note\">Rabat -40% dla nowych klient\u00f3w \u00b7 Demo za darmo<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"acc-item\">\r\n <button class=\"acc-header\" onclick=\"toggleAcc(this)\">\r\n Animacja produktowa \/ targowa\r\n <span class=\"acc-chev\" aria-hidden=\"true\">\r\n <svg width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\"><path d=\"M1 1L4.5 5L8 1\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\r\n <\/span>\r\n <\/button>\r\n <div class=\"acc-body\">\r\n <div class=\"acc-body-inner\">\r\n \r\n <div class=\"price-row\">\r\n <span class=\"price-tag\">od 5 500 z\u0142<\/span>\r\n <span class=\"price-base\">reg. 9 167 z\u0142<\/span>\r\n <span class=\"price-after-label\">po rabacie \u221240%<\/span>\r\n <span class=\"price-after-value\">od 3 300 z\u0142<\/span>\r\n <\/div>\r\n <p>Kr\u00f3tka animacja 3D produktu do zastosowa\u0144 marketingowych: strona WWW, targi, social media, katalog. Pokaz funkcji i walor\u00f3w produktu bez prototypu.<\/p>\r\n <span class=\"price-note\">Rabat -40% dla nowych klient\u00f3w \u00b7 Demo za darmo<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"acc-item\">\r\n <button class=\"acc-header\" onclick=\"toggleAcc(this)\">\r\n Animacja dla inwestor\u00f3w \/ pitch\r\n <span class=\"acc-chev\" aria-hidden=\"true\">\r\n <svg width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\"><path d=\"M1 1L4.5 5L8 1\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\r\n <\/span>\r\n <\/button>\r\n <div class=\"acc-body\">\r\n <div class=\"acc-body-inner\">\r\n \r\n <div class=\"price-row\">\r\n <span class=\"price-tag\">od 9 000 z\u0142<\/span>\r\n <span class=\"price-base\">reg. 15 000 z\u0142<\/span>\r\n <span class=\"price-after-label\">po rabacie \u221240%<\/span>\r\n <span class=\"price-after-value\">od 5 400 z\u0142<\/span>\r\n <\/div>\r\n <p>Profesjonalna animacja koncepcji technicznej lub urz\u0105dzenia do prezentacji przed inwestorami, pitch deck\u00f3w i roadshow \u2014 zanim powstanie fizyczny prototyp. Renderowany model z roz\u0142o\u017ceniem na cz\u0119\u015bci i animowanymi przekrojami.<\/p>\r\n <span class=\"price-note\">Rabat -40% dla nowych klient\u00f3w \u00b7 Demo za darmo<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n function toggleAcc(btn) {\r\n var item = btn.closest('.acc-item');\r\n var body = item.querySelector('.acc-body');\r\n var isOpen = item.classList.contains('open');\r\n document.querySelectorAll('.acc-item').forEach(function(i) {\r\n i.classList.remove('open');\r\n i.querySelector('.acc-body').style.maxHeight = '0';\r\n });\r\n if (!isOpen) { item.classList.add('open'); body.style.maxHeight = body.scrollHeight + 'px'; }\r\n }\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4bb80d07 e-con-full e-flex e-con e-parent\" data-id=\"4bb80d07\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-785e8097 elementor-widget elementor-widget-html\" data-id=\"785e8097\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin\/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n<style>\r\n#cz-pf {\r\n --accent: #4ade80;\r\n --text: #ffffff;\r\n --muted: rgba(255,255,255,0.58);\r\n --border: rgba(255,255,255,0.10);\r\n --card-bg: rgba(255,255,255,0.04);\r\n --card-glow: rgba(74,222,128,0.08);\r\n --font: 'Inter', sans-serif;\r\n --px: clamp(24px, 6vw, 80px);\r\n}\r\n\r\n#cz-pf, #cz-pf *, #cz-pf *::before, #cz-pf *::after { box-sizing: border-box; }\r\n#cz-pf {\r\n background: transparent;\r\n color: var(--text);\r\n font-family: var(--font);\r\n padding: clamp(32px, 5vw, 64px) var(--px);\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n#cz-pf h4, #cz-pf p, #cz-pf button { font-family: var(--font); }\r\n#cz-pf .cz-inner { position: relative; max-width: 1200px; margin: 0 auto; }\r\n\r\n#cz-pf .cz-stage { position: relative; padding: 0 72px; }\r\n#cz-pf .cz-viewport {\r\n overflow: hidden; border-radius: 14px;\r\n border: 1px solid var(--border);\r\n background: #000;\r\n box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 64px rgba(74,222,128,0.10);\r\n}\r\n#cz-pf .cz-track { display: flex; transition: transform .6s cubic-bezier(.65,0,.25,1); will-change: transform; }\r\n#cz-pf .cz-slide { flex: 0 0 100%; min-width: 0; aspect-ratio: 16 \/ 9; position: relative; background: #000; }\r\n\r\n#cz-pf .cz-play {\r\n all: unset; box-sizing: border-box; cursor: pointer; position: absolute; inset: 0;\r\n display: block; width: 100%; height: 100%;\r\n}\r\n#cz-pf .cz-play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease, filter .3s ease; }\r\n#cz-pf .cz-play:hover img { transform: scale(1.03); filter: brightness(.78); }\r\n#cz-pf .cz-play::after {\r\n content: \"\"; position: absolute; inset: 0;\r\n background: linear-gradient(to top, rgba(0,0,0,.45), transparent 45%); pointer-events: none;\r\n}\r\n#cz-pf .cz-play-icon {\r\n position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\r\n width: clamp(60px, 9vw, 92px); height: clamp(60px, 9vw, 92px); border-radius: 50%; z-index: 2;\r\n background: var(--accent);\r\n display: flex; align-items: center; justify-content: center;\r\n box-shadow: 0 0 48px rgba(74,222,128,0.45); transition: transform .25s ease;\r\n}\r\n#cz-pf .cz-play:hover .cz-play-icon { transform: translate(-50%, -50%) scale(1.1); }\r\n#cz-pf .cz-play-icon svg { width: 38%; height: 38%; fill: #052e16; margin-left: 6%; }\r\n#cz-pf .cz-play:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }\r\n#cz-pf .cz-slide iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }\r\n\r\n#cz-pf .cz-arrow {\r\n position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;\r\n width: 56px; height: 56px; border-radius: 14px; cursor: pointer; padding: 0;\r\n background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.18);\r\n color: rgba(255,255,255,0.80);\r\n display: flex; align-items: center; justify-content: center;\r\n transition: background .25s ease, border-color .25s ease, color .25s ease;\r\n}\r\n#cz-pf .cz-arrow:hover { background: rgba(74,222,128,0.18); border-color: var(--accent); color: var(--accent); }\r\n#cz-pf .cz-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\r\n#cz-pf .cz-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }\r\n#cz-pf .cz-prev { left: 0; }\r\n#cz-pf .cz-next { right: 0; }\r\n\r\n#cz-pf .cz-meta { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 28px 0 0; flex-wrap: wrap; }\r\n#cz-pf .cz-dots { display: flex; gap: 10px; }\r\n#cz-pf .cz-dot {\r\n width: 9px; height: 9px; border-radius: 100px; padding: 0; border: 0; cursor: pointer;\r\n background: rgba(255,255,255,0.20); transition: all .3s ease;\r\n}\r\n#cz-pf .cz-dot:hover { background: rgba(255,255,255,0.40); }\r\n#cz-pf .cz-dot.is-active { width: 32px; background: var(--accent); }\r\n#cz-pf .cz-counter {\r\n font-size: 0.70rem; font-weight: 700; letter-spacing: 0.18em;\r\n color: var(--accent); font-variant-numeric: tabular-nums;\r\n}\r\n\r\n#cz-pf .cz-cases { margin-top: clamp(28px, 4vw, 44px); }\r\n#cz-pf .cz-case {\r\n display: none; position: relative; overflow: hidden;\r\n background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;\r\n padding: clamp(24px, 3.5vw, 40px) clamp(22px, 3vw, 36px);\r\n box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 40px var(--card-glow);\r\n}\r\n#cz-pf .cz-case::before {\r\n content: ''; position: absolute; top: -30px; left: -30px;\r\n width: 140px; height: 140px; border-radius: 50%;\r\n background: radial-gradient(circle, rgba(74,222,128,0.08) 0%, transparent 70%);\r\n pointer-events: none;\r\n}\r\n#cz-pf .cz-case.is-active { display: block; animation: czFade .5s ease; }\r\n@keyframes czFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }\r\n\r\n#cz-pf .cz-case h4 {\r\n position: relative; margin: 0 0 12px; font-size: 0.70rem; font-weight: 700;\r\n letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);\r\n}\r\n#cz-pf .cz-case p {\r\n position: relative; margin: 0; font-size: clamp(0.90rem, 1.4vw, 1.02rem); font-weight: 400;\r\n line-height: 1.72; color: var(--muted);\r\n}\r\n\r\n@media (max-width: 860px) {\r\n #cz-pf .cz-stage { padding: 0 60px; }\r\n #cz-pf .cz-arrow { width: 48px; height: 48px; }\r\n}\r\n@media (max-width: 540px) {\r\n #cz-pf .cz-stage { padding: 0; }\r\n #cz-pf .cz-arrow {\r\n width: 40px; height: 40px; border-radius: 10px;\r\n background: rgba(10,14,20,0.65);\r\n -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);\r\n }\r\n #cz-pf .cz-arrow svg { width: 18px; height: 18px; }\r\n #cz-pf .cz-prev { left: 8px; }\r\n #cz-pf .cz-next { right: 8px; }\r\n #cz-pf .cz-case { padding: 22px 20px; }\r\n #cz-pf .cz-dots { gap: 7px; }\r\n #cz-pf .cz-dot.is-active { width: 22px; }\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n #cz-pf .cz-track { transition: none; }\r\n #cz-pf .cz-case.is-active { animation: none; }\r\n}\r\n<\/style>\r\n\r\n<div id=\"cz-pf\">\r\n <div class=\"cz-inner\">\r\n\r\n \r\n <div class=\"cz-stage\">\r\n <button class=\"cz-arrow cz-prev\" type=\"button\" aria-label=\"Previous video\">\r\n <svg viewBox=\"0 0 24 24\"><polyline points=\"15 18 9 12 15 6\"><\/polyline><\/svg>\r\n <\/button>\r\n\r\n <div class=\"cz-viewport\">\r\n <div class=\"cz-track\">\r\n <div class=\"cz-slide\" data-yt=\"bKLQH-ee96I\" data-title=\"Video 1\"><\/div>\r\n <div class=\"cz-slide\" data-yt=\"O7pzxLhKZ0Q\" data-title=\"Video 2\"><\/div>\r\n <div class=\"cz-slide\" data-yt=\"JL2imWXQ5bw\" data-title=\"Video 3\"><\/div>\r\n <div class=\"cz-slide\" data-yt=\"c7CvwK790eM\" data-title=\"Video 4\"><\/div>\r\n <div class=\"cz-slide\" data-yt=\"E_hmzKOA1ro\" data-title=\"Video 5\"><\/div>\r\n <div class=\"cz-slide\" data-yt=\"HLiObYGmATI\" data-title=\"Video 6\"><\/div>\r\n <div class=\"cz-slide\" data-yt=\"8tggpfUJF24\" data-title=\"Video 7\"><\/div>\r\n <div class=\"cz-slide\" data-yt=\"EY6fh6nPSoE\" data-title=\"Video 8\"><\/div>\r\n <div class=\"cz-slide\" data-yt=\"sTC1VMnf96M\" data-title=\"Video 9\"><\/div>\r\n <div class=\"cz-slide\" data-yt=\"fjKD-rwNZ64\" data-title=\"Video 10\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <button class=\"cz-arrow cz-next\" type=\"button\" aria-label=\"Next video\">\r\n <svg viewBox=\"0 0 24 24\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"cz-meta\">\r\n <div class=\"cz-dots\"><\/div>\r\n <div class=\"cz-counter\">01 \/ 10<\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"cz-cases\">\r\n\r\n <article class=\"cz-case\">\r\n <h4>What it shows<\/h4>\r\n <p>Prezentacja wideo w formie Animacji 3D - przedstawiaj\u0105ca funkcje bloku rozdzielczego, jego zalety, oraz dane techniczne.<\/p>\r\n <\/article>\r\n\r\n <article class=\"cz-case\">\r\n <h4>What it shows<\/h4>\r\n <p>Kr\u00f3tka animacja prezentuj\u0105ca instrukcj\u0119 z\u0142o\u017cenia stolika. Szybki i \u0142atwo przyswajalny tutorial wideo pozwalaj\u0105cy u\u017cytkownikowi samodzielnie z\u0142o\u017cy\u0107 zakupiony mebel.<\/p>\r\n <\/article>\r\n\r\n <article class=\"cz-case\">\r\n <h4>What it shows<\/h4>\r\n <p>Prezentacja przedstawiaj\u0105ca proces odbudowy z\u0119ba oraz wprowadzenie implantu. Cel: Zrozumia\u0142e zaprezentowanie produktu pacjentom w mniej ni\u017c minut\u0119.<\/p>\r\n <\/article>\r\n\r\n <article class=\"cz-case\">\r\n <h4>What it shows<\/h4>\r\n <p>Prezentacja przedstawiaj\u0105ca funkcje i zalety wentylatora, jego przekr\u00f3j oraz dane techniczne.<\/p>\r\n <\/article>\r\n\r\n \r\n <article class=\"cz-case\">\r\n <h4>What it shows<\/h4>\r\n <p>Animacja 3D prototypu nowoczesnej \u0142adowarki z odczepianymi ko\u0144c\u00f3wkami. Wideo kt\u00f3re \u015bwietnie sprawdzi si\u0119 na targach i kt\u00f3re przykuwa uwag\u0119. <\/p>\r\n <\/article>\r\n\r\n <article class=\"cz-case\">\r\n <h4>What it shows<\/h4>\r\n <p>Kr\u00f3tka animacja prezentuj\u0105ca przekr\u00f3j techniczny urz\u0105dzenia. <\/p>\r\n <\/article>\r\n\r\n <article class=\"cz-case\">\r\n <h4>What it shows<\/h4>\r\n <p>Prezentacja wideo w formie Animacji 3D - przedstawiaj\u0105ca funkcje bloku rozdzielczego, jego zalety, oraz dane techniczne.<\/p>\r\n <\/article>\r\n\r\n <article class=\"cz-case\">\r\n <h4>What it shows<\/h4>\r\n <p>Prezentacja wideo w formie Animacji 3D - przedstawiaj\u0105ca funkcje bloku rozdzielczego, jego zalety, oraz dane techniczne.<\/p>\r\n <\/article>\r\n\r\n <article class=\"cz-case\">\r\n <h4>What it shows<\/h4>\r\n <p>Kr\u00f3tka animacja 3D pokazuj\u0105ca funkcje i spos\u00f3b dzia\u0142ania autonomicznego urz\u0105dzania do segregowania.<\/p>\r\n <\/article>\r\n\r\n <article class=\"cz-case\">\r\n <h4>What it shows<\/h4>\r\n <p>Kr\u00f3tka animacja 3D pokazuj\u0105ca funkcje i spos\u00f3b dzia\u0142ania urz\u0105dzenia. <\/p>\r\n <\/article>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n var root = document.getElementById('cz-pf');\r\n if (!root) return;\r\n\r\n var track = root.querySelector('.cz-track');\r\n var slides = [].slice.call(root.querySelectorAll('.cz-slide'));\r\n var cases = [].slice.call(root.querySelectorAll('.cz-case'));\r\n var dotsBox = root.querySelector('.cz-dots');\r\n var counter = root.querySelector('.cz-counter');\r\n var viewport= root.querySelector('.cz-viewport');\r\n var n = slides.length;\r\n var current = 0;\r\n\r\n function pad(x) { return (x < 10 ? '0' : '') + x; }\r\n\r\n function titleOf(i) {\r\n return slides[i].getAttribute('data-title') || ('Video ' + (i + 1));\r\n }\r\n\r\n function showThumb(slide, i) {\r\n var id = slide.getAttribute('data-yt');\r\n var t = titleOf(i).replace(\/\"\/g, '');\r\n slide.innerHTML =\r\n '<button class=\"cz-play\" type=\"button\" aria-label=\"Play video: ' + t + '\">' +\r\n '<img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/' + id + '\/maxresdefault.jpg\" alt=\"' + t + '\" loading=\"' + (i === 0 ? 'eager' : 'lazy') + '\">' +\r\n '<span class=\"cz-play-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>' +\r\n '<\/button>';\r\n var img = slide.querySelector('img');\r\n var fallback = 'https:\/\/img.youtube.com\/vi\/' + id + '\/hqdefault.jpg';\r\n img.addEventListener('error', function () { if (img.src !== fallback) img.src = fallback; });\r\n img.addEventListener('load', function () {\r\n if (img.naturalWidth && img.naturalWidth <= 120 && img.src !== fallback) img.src = fallback;\r\n });\r\n slide.querySelector('.cz-play').addEventListener('click', function () { playVideo(slide, i); });\r\n slide.classList.remove('is-playing');\r\n }\r\n\r\n function playVideo(slide, i) {\r\n var id = slide.getAttribute('data-yt');\r\n slide.innerHTML =\r\n '<iframe src=\"https:\/\/www.youtube-nocookie.com\/embed\/' + id + '?autoplay=1&rel=0&modestbranding=1&playsinline=1\" ' +\r\n 'title=\"' + titleOf(i).replace(\/\"\/g, '') + '\" ' +\r\n 'allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen\" ' +\r\n 'allowfullscreen><\/iframe>';\r\n slide.classList.add('is-playing');\r\n }\r\n\r\n slides.forEach(function (s, i) {\r\n showThumb(s, i);\r\n var d = document.createElement('button');\r\n d.type = 'button';\r\n d.className = 'cz-dot';\r\n d.setAttribute('aria-label', 'Go to video ' + (i + 1));\r\n d.addEventListener('click', function () { go(i); });\r\n dotsBox.appendChild(d);\r\n });\r\n var dots = [].slice.call(dotsBox.children);\r\n\r\n function go(k) {\r\n var prev = current;\r\n current = (k + n) % n;\r\n track.style.transform = 'translateX(-' + (current * 100) + '%)';\r\n\r\n if (prev !== current && slides[prev].classList.contains('is-playing')) showThumb(slides[prev], prev);\r\n\r\n cases.forEach(function (c, i) { c.classList.toggle('is-active', i === current); });\r\n dots.forEach(function (d, i) { d.classList.toggle('is-active', i === current); });\r\n counter.textContent = pad(current + 1) + ' \/ ' + pad(n);\r\n }\r\n\r\n root.querySelector('.cz-prev').addEventListener('click', function () { go(current - 1); });\r\n root.querySelector('.cz-next').addEventListener('click', function () { go(current + 1); });\r\n\r\n root.addEventListener('keydown', function (e) {\r\n if (e.key === 'ArrowLeft') go(current - 1);\r\n if (e.key === 'ArrowRight') go(current + 1);\r\n });\r\n\r\n var sx = 0, sy = 0;\r\n viewport.addEventListener('touchstart', function (e) {\r\n sx = e.touches[0].clientX; sy = e.touches[0].clientY;\r\n }, { passive: true });\r\n viewport.addEventListener('touchend', function (e) {\r\n var dx = e.changedTouches[0].clientX - sx;\r\n var dy = e.changedTouches[0].clientY - sy;\r\n if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy)) go(dx < 0 ? current + 1 : current - 1);\r\n }, { passive: true });\r\n\r\n go(0);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-49d6735c e-con-full e-flex e-con e-parent\" data-id=\"49d6735c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d59c91d elementor-widget elementor-widget-html\" data-id=\"d59c91d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pl\">\r\n<head>\r\n <meta charset=\"UTF-8\"\/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Creative Zen \u2013 Opinie i partnerzy<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin\/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\"\/>\r\n <style>\r\n :root {\r\n --accent: #4ade80;\r\n --text: #ffffff;\r\n --muted: rgba(255,255,255,0.48);\r\n --border: rgba(255,255,255,0.10);\r\n --font: 'Inter', sans-serif;\r\n --px: clamp(20px, 5vw, 72px);\r\n --bg: #09090b;\r\n }\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n html { font-size: 16px; }\r\n body {\r\n font-family: var(--font);\r\n color: var(--text);\r\n background: transparent;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* \u2550\u2550 OPINIE + ZDJ\u0118CIE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .reviews-wrap {\r\n padding: clamp(40px, 6vw, 72px) var(--px) clamp(16px, 3vw, 28px);\r\n }\r\n .reviews-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: clamp(14px, 2vw, 22px);\r\n align-items: stretch;\r\n }\r\n .opinions-card {\r\n background: rgba(255,255,255,0.035);\r\n border: 1px solid var(--border);\r\n border-radius: 16px;\r\n padding: clamp(20px, 3vw, 36px);\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .opinions-list { display: flex; flex-direction: column; flex: 1; }\r\n .opinion { display: flex; flex-direction: column; gap: 10px; padding: clamp(16px, 2.2vw, 22px) 0; flex: 1; }\r\n .opinion + .opinion { border-top: 1px solid var(--border); }\r\n .opinion-head { display: flex; align-items: center; gap: 14px; }\r\n .opinion-photo {\r\n width: clamp(52px, 5.5vw, 68px);\r\n height: clamp(52px, 5.5vw, 68px);\r\n border-radius: 10px;\r\n object-fit: cover;\r\n object-position: center top;\r\n flex-shrink: 0;\r\n border: 1px solid rgba(255,255,255,0.10);\r\n }\r\n .opinion-name { font-size: clamp(0.70rem, 1.0vw, 0.80rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }\r\n .opinion-text { font-size: clamp(0.73rem, 1.05vw, 0.82rem); font-weight: 300; line-height: 1.70; color: var(--muted); }\r\n\r\n .reviews-photo-col {\r\n border-radius: 16px;\r\n overflow: hidden;\r\n border: 1px solid rgba(255,255,255,0.08);\r\n position: relative;\r\n min-height: 280px;\r\n }\r\n .reviews-photo {\r\n position: absolute; inset: 0; width: 100%; height: 100%;\r\n object-fit: cover; object-position: center; display: block;\r\n transition: transform 0.5s ease;\r\n }\r\n .reviews-photo-col:hover .reviews-photo { transform: scale(1.03); }\r\n\r\n .google-link-wrap { padding: clamp(14px, 2vw, 20px) var(--px) 0; }\r\n .google-link {\r\n display: inline-flex; align-items: center; gap: 10px;\r\n font-size: clamp(0.58rem, 0.85vw, 0.66rem); font-weight: 700;\r\n letter-spacing: 0.18em; text-transform: uppercase;\r\n color: rgba(255,255,255,0.38); text-decoration: none; transition: color 0.20s;\r\n }\r\n .google-link:hover { color: var(--text); }\r\n .google-link svg { width: 13px; height: 13px; flex-shrink: 0; transition: transform 0.20s; }\r\n .google-link:hover svg { transform: translateX(4px); }\r\n\r\n \/* \u2550\u2550 ZAUFALI NAM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .trusted-wrap {\r\n padding: clamp(48px, 6vw, 80px) 0 clamp(52px, 7vw, 88px);\r\n }\r\n .trusted-title {\r\n text-align: center;\r\n font-size: clamp(0.82rem, 1.6vw, 1.1rem);\r\n font-weight: 800;\r\n letter-spacing: 0.22em;\r\n text-transform: uppercase;\r\n color: var(--text);\r\n margin-bottom: clamp(32px, 4vw, 52px);\r\n }\r\n\r\n .marquee-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n position: relative;\r\n }\r\n\r\n \/* Gradient zanikania po bokach *\/\r\n .marquee-container::before,\r\n .marquee-container::after {\r\n content: '';\r\n position: absolute;\r\n top: 0; bottom: 0;\r\n width: 80px;\r\n z-index: 2;\r\n pointer-events: none;\r\n }\r\n .marquee-container::before {\r\n left: 0;\r\n background: linear-gradient(to right, var(--bg), transparent);\r\n }\r\n .marquee-container::after {\r\n right: 0;\r\n background: linear-gradient(to left, var(--bg), transparent);\r\n }\r\n\r\n .marquee-outer { overflow: hidden; width: 100%; }\r\n\r\n \/* Track z 4 kopiami logo dla p\u0142ynnej p\u0119tli *\/\r\n .marquee-track {\r\n display: flex;\r\n align-items: center;\r\n width: max-content;\r\n animation: scrollLeft 90s linear infinite;\r\n }\r\n .marquee-track:hover { animation-play-state: paused; }\r\n\r\n @keyframes scrollLeft {\r\n 0% { transform: translateX(0); }\r\n 100% { transform: translateX(-25%); }\r\n }\r\n\r\n \/* \u2550\u2550 LOGO ITEM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n Wysoko\u015b\u0107 kontenera logo \u2013 clamp(min, preferowane, max)\r\n Zmie\u0144 warto\u015bci aby dostosowa\u0107 rozmiar\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .logo-item {\r\n flex-shrink: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n \/* DESKTOP: 96px wysoko\u015b\u0107 kontenera *\/\r\n height: 96px;\r\n padding: 0 40px;\r\n \/* BIEL: opacity 0.92 = prawie pe\u0142na biel, nie szare *\/\r\n opacity: 0.92;\r\n transition: opacity 0.22s;\r\n }\r\n .logo-item:hover { opacity: 1; }\r\n\r\n .logo-item img {\r\n \/* DESKTOP: max-height 100% kontenera \u2192 96px *\/\r\n height: 100%;\r\n width: auto;\r\n max-width: 200px;\r\n display: block;\r\n object-fit: contain;\r\n \/* brightness(0) invert(1) = bia\u0142e logo niezale\u017cnie od orygina\u0142u *\/\r\n filter: brightness(0) invert(1);\r\n }\r\n\r\n\r\n \/* \u2550\u2550 RESPONSYWNO\u015a\u0106 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\n \/* Tablet \u2264 780px *\/\r\n @media (max-width: 780px) {\r\n .reviews-grid { grid-template-columns: 1fr; align-items: start; }\r\n .reviews-photo-col { position: relative; min-height: unset; width: 100%; aspect-ratio: 16 \/ 9; }\r\n .marquee-container { max-width: 100%; }\r\n\r\n \/* TABLET: logo wi\u0119ksze ni\u017c wcze\u015bniej (by\u0142o 44px \u2192 teraz 64px) *\/\r\n .logo-item {\r\n height: 64px; \/* \u2190 zmie\u0144 tutaj rozmiar na tablecie *\/\r\n padding: 0 32px;\r\n opacity: 0.92; \/* pe\u0142na biel te\u017c na tablecie *\/\r\n }\r\n }\r\n\r\n \/* Telefon \u2264 480px *\/\r\n @media (max-width: 480px) {\r\n .reviews-wrap { padding-left: 16px; padding-right: 16px; }\r\n .google-link-wrap { padding-left: 16px; }\r\n .opinion-photo { width: 46px; height: 46px; }\r\n .marquee-track { animation-duration: 22s; }\r\n .reviews-photo-col { aspect-ratio: 4 \/ 3; }\r\n\r\n \/* TELEFON: logo wyra\u017anie wi\u0119ksze ni\u017c wcze\u015bniej (by\u0142o 36px \u2192 teraz 52px) *\/\r\n .logo-item {\r\n height: 52px; \/* \u2190 zmie\u0144 tutaj rozmiar na telefonie *\/\r\n padding: 0 22px;\r\n opacity: 0.92; \/* pe\u0142na biel te\u017c na telefonie *\/\r\n }\r\n }\r\n\r\n \/* Bardzo ma\u0142y telefon \u2264 360px *\/\r\n @media (max-width: 360px) {\r\n .logo-item {\r\n height: 44px;\r\n padding: 0 16px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<div class=\"reviews-wrap\">\r\n <div class=\"reviews-grid\">\r\n <div class=\"opinions-card\">\r\n <div class=\"opinions-list\">\r\n\r\n <div class=\"opinion\">\r\n <div class=\"opinion-head\">\r\n <img decoding=\"async\" class=\"opinion-photo\"\r\n src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/05\/Moralewicz.png\"\r\n alt=\"Piotr Moralewicz\" loading=\"lazy\"\/>\r\n <div><span class=\"opinion-name\">Piotr Moralewicz \u2605\u2605\u2605\u2605\u2605<\/span><\/div>\r\n <\/div>\r\n <p class=\"opinion-text\">\r\n Wsp\u00f3\u0142praca z Paw\u0142em to czysta przyjemno\u015b\u0107. Nawet jak czego\u015b nie dookre\u015bl\u0119, to Pawe\u0142 i tak zrobi to w taki spos\u00f3b \u017ce finalnie jestem zadowolony. Chyba potrafi czyta\u0107 w my\u015blach \ud83e\udd37\u200d\u2642\ufe0f11\/10, Gor\u0105co polecam!\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"opinion\">\r\n <div class=\"opinion-head\">\r\n <img decoding=\"async\" class=\"opinion-photo\"\r\n src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/05\/Wachowicz.png\"\r\n alt=\"Tomasz Wachowicz\" loading=\"lazy\"\/>\r\n <div><span class=\"opinion-name\">Tomasz Wachowicz \u2605\u2605\u2605\u2605\u2605<\/span><\/div>\r\n <\/div>\r\n <p class=\"opinion-text\">\r\n Szuka\u0142em \u015bwie\u017cych pomys\u0142\u00f3w, ci\u0119\u017cko teraz z tym na rynku, CreativeZen dostarczy\u0142o je z nawi\u0105zk\u0105. Nazwa firmy idealnie pasuje do nich, wszystko ze spokojem i w terminie. Na pewno wr\u00f3c\u0119 z kolejnymi zleceniami.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"opinion\">\r\n <div class=\"opinion-head\">\r\n <img decoding=\"async\" class=\"opinion-photo\"\r\n src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/05\/Wiklanski.png\"\r\n alt=\"Przemys\u0142aw Wikla\u0144ski\" loading=\"lazy\"\/>\r\n <div><span class=\"opinion-name\">Przemys\u0142aw Wikla\u0144ski \u2605\u2605\u2605\u2605\u2605<\/span><\/div>\r\n <\/div>\r\n <p class=\"opinion-text\">\r\n Szuka\u0142am sprawdzonych tw\u00f3rc\u00f3w animacji medycznych \u2014 Creative Zen\r\n zaskoczy\u0142o mnie bardzo pozytywnie. Specjalizacja idealna dla\r\n naszej firmy, wszystko w terminie. Serdecznie polecam!\r\n <\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"reviews-photo-col\">\r\n \r\n <video\r\n class=\"reviews-photo\"\r\n src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/05\/size.mp4\"\r\n autoplay\r\n muted\r\n loop\r\n playsinline\r\n preload=\"auto\"\r\n disablepictureinpicture\r\n controlslist=\"nodownload nofullscreen noremoteplayback\"\r\n ><\/video>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div class=\"google-link-wrap\">\r\n <a class=\"google-link\"\r\n href=\"https:\/\/share.google\/e6et4vEUKGUhZ7j5j\"\r\n target=\"_blank\" rel=\"noopener noreferrer\">\r\n Sprawd\u017a wszystkie opinie Google\r\n <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M3 8H13M9 4L13 8L9 12\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <\/svg>\r\n <\/a>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"trusted-wrap\">\r\n <h2 class=\"trusted-title\">Zaufali nam<\/h2>\r\n\r\n <div class=\"marquee-container\">\r\n <div class=\"marquee-outer\">\r\n <div class=\"marquee-track\">\r\n\r\n \r\n <div class=\"logo-item\" title=\"Ochnik\">\r\n <img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/OCHNIK-1.webp\" alt=\"Ochnik\"\/>\r\n <\/div>\r\n <div class=\"logo-item\" title=\"NADAUP\">\r\n <img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/NADAUP.webp\" alt=\"NADAUP\"\/>\r\n <\/div>\r\n <div class=\"logo-item\" title=\"imFilter\">\r\n <img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/IMFILTER.webp\" alt=\"imFilter\"\/>\r\n <\/div>\r\n <div class=\"logo-item\" title=\"Elkat\">\r\n <img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/ELKAT.webp\" alt=\"Elkat\"\/>\r\n <\/div>\r\n <div class=\"logo-item\" title=\"Partner\">\r\n <img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/04\/Bez-nazwy-1-1.png\" alt=\"Partner\"\/>\r\n <\/div>\r\n \r\n <div class=\"logo-item\" title=\"Innowations\">\r\n <img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/10\/Innowations.webp\" alt=\"Innowations\"\/>\r\n <\/div>\r\n\r\n \r\n \r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/OCHNIK-1.webp\" alt=\"\"\/><\/div>\r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/NADAUP.webp\" alt=\"\"\/><\/div>\r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/IMFILTER.webp\" alt=\"\"\/><\/div>\r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/ELKAT.webp\" alt=\"\"\/><\/div>\r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/04\/Bez-nazwy-1-1.png\" alt=\"\"\/><\/div>\r\n \r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/10\/Innowations.webp\" alt=\"\"\/><\/div>\r\n\r\n \r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/OCHNIK-1.webp\" alt=\"\"\/><\/div>\r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/NADAUP.webp\" alt=\"\"\/><\/div>\r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/IMFILTER.webp\" alt=\"\"\/><\/div>\r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/ELKAT.webp\" alt=\"\"\/><\/div>\r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/04\/Bez-nazwy-1-1.png\" alt=\"\"\/><\/div>\r\n \r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/10\/Innowations.webp\" alt=\"\"\/><\/div>\r\n\r\n \r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/OCHNIK-1.webp\" alt=\"\"\/><\/div>\r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/NADAUP.webp\" alt=\"\"\/><\/div>\r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/IMFILTER.webp\" alt=\"\"\/><\/div>\r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/ELKAT.webp\" alt=\"\"\/><\/div>\r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/04\/Bez-nazwy-1-1.png\" alt=\"\"\/><\/div>\r\n \r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/10\/Innowations.webp\" alt=\"\"\/><\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-704c85e7 e-con-full e-flex e-con e-parent\" data-id=\"704c85e7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-777bbfc1 elementor-widget elementor-widget-html\" data-id=\"777bbfc1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!DOCTYPE html>\r\n<html lang=\"pl\">\r\n<head>\r\n <meta charset=\"UTF-8\"\/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Creative Zen \u2013 Wymierne efekty<\/title>\r\n\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin\/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n ZMIENNE GLOBALNE \u2013 sp\u00f3jne z wszystkimi poprzednimi segmentami\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n :root {\r\n --accent: #4ade80; \/* kolor akcentu \u2013 zielony *\/\r\n --text: #ffffff; \/* kolor tekstu g\u0142\u00f3wnego *\/\r\n --text-muted: rgba(255,255,255,0.52); \/* kolor tekstu drugoplanowego *\/\r\n --border: rgba(255,255,255,0.10); \/* kolor obramowa\u0144 *\/\r\n --font: 'Inter', sans-serif;\r\n --px: clamp(20px, 5vw, 72px); \/* padding poziomy sekcji *\/\r\n }\r\n\r\n \/* \u2500\u2500 RESET \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n html { font-size: 16px; }\r\n\r\n body {\r\n font-family: var(--font);\r\n color: var(--text);\r\n background: transparent; \/* \u2190 transparentne \u2013 CMS nadaje kolor strony *\/\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SEKCJA G\u0141\u00d3WNA \u2013 WRAPPER\r\n Ciemna karta z lekkim zaokr\u0105gleniem \u2013 jak na screenshocie\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .benefits-section {\r\n padding: clamp(40px, 6vw, 80px) var(--px);\r\n }\r\n\r\n \/* Wewn\u0119trzna karta \u2013 ciemne t\u0142o, zaokr\u0105glone rogi *\/\r\n .benefits-card {\r\n position: relative;\r\n \/* Ciemne t\u0142o karty jak na screenshocie *\/\r\n background: rgba(10, 12, 10, 0.88);\r\n border-radius: 20px; \/* zaokr\u0105glone rogi ca\u0142ej karty *\/\r\n overflow: hidden; \/* przycina zawarto\u015b\u0107 do zaokr\u0105gle\u0144 *\/\r\n \/* Subtelne obramowanie *\/\r\n border: 1px solid rgba(255,255,255,0.08);\r\n box-shadow: 0 20px 60px rgba(0,0,0,0.50);\r\n }\r\n\r\n \/* Dwukolumnowy grid wewn\u0105trz karty:\r\n lewa (tekst) troch\u0119 szersza, prawa (zdj\u0119cie) troch\u0119 w\u0119\u017csza *\/\r\n .benefits-inner {\r\n display: grid;\r\n \/* Proporcje jak na screenshocie: ~55% tekst, ~45% zdj\u0119cie *\/\r\n grid-template-columns: 55fr 45fr;\r\n min-height: clamp(320px, 45vw, 580px); \/* minimalna wysoko\u015b\u0107 karty *\/\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n LEWA STRONA \u2013 TYTU\u0141 + LISTA BENEFIT\u00d3W\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .benefits-left {\r\n padding: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 60px);\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center; \/* wy\u015brodkowanie pionowe *\/\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* Subtelna po\u015bwiata zielona w lewym dolnym rogu *\/\r\n .benefits-left::before {\r\n content: '';\r\n position: absolute;\r\n bottom: -40px; left: -40px;\r\n width: 300px; height: 300px;\r\n border-radius: 50%;\r\n background: radial-gradient(\r\n circle,\r\n rgba(74,222,128,0.06) 0%,\r\n transparent 70%\r\n );\r\n pointer-events: none;\r\n }\r\n\r\n \/* \u2500\u2500 TYTU\u0141 SEKCJI \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n TYTU\u0141 SEKCJI \u2013 zmie\u0144 tekst w <h2> poni\u017cej\r\n Uwaga: uppercase i bardzo du\u017ca czcionka \u2013 jak na screenshocie\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n .benefits-title {\r\n font-size: clamp(1.8rem, 3.8vw, 3rem); \/* fluid \u2013 skaluje si\u0119 z ekranem *\/\r\n font-weight: 900; \/* maksymalnie pogrubione *\/\r\n letter-spacing: 0.02em;\r\n text-transform: uppercase; \/* wielkie litery jak na screenshocie *\/\r\n line-height: 1.08;\r\n color: var(--text);\r\n margin-bottom: clamp(24px, 3.5vw, 40px);\r\n }\r\n\r\n \/* \u2500\u2500 LISTA BENEFIT\u00d3W \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n Punkty z zielonymi bulletami\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n .benefits-list {\r\n list-style: none; \/* usuwamy domy\u015blne punkty \u2013 robimy w\u0142asne *\/\r\n display: flex;\r\n flex-direction: column;\r\n gap: clamp(10px, 1.6vw, 16px); \/* odst\u0119p mi\u0119dzy punktami *\/\r\n }\r\n\r\n \/* \u2500\u2500 POJEDYNCZY BENEFIT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n BENEFIT \u2013 skopiuj <li class=\"benefit-item\"> aby doda\u0107 nowy punkt\r\n Zmie\u0144 tekst wewn\u0105trz <span> poni\u017cej\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n .benefit-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 12px; \/* odst\u0119p mi\u0119dzy bulletem a tekstem *\/\r\n }\r\n\r\n \/* Bullet \u2013 zielona kropka *\/\r\n .benefit-dot {\r\n width: 7px;\r\n height: 7px;\r\n border-radius: 50%;\r\n background: var(--text); \/* bia\u0142a kropka jak na screenshocie *\/\r\n flex-shrink: 0;\r\n margin-top: 0.45em; \/* wyr\u00f3wnanie z pierwsz\u0105 lini\u0105 tekstu *\/\r\n }\r\n\r\n \/* Tekst punktu listy *\/\r\n .benefit-text {\r\n font-size: clamp(0.88rem, 1.6vw, 1.05rem);\r\n font-weight: 400;\r\n line-height: 1.55;\r\n color: var(--text);\r\n }\r\n\r\n \/* Pogrubiona cz\u0119\u015b\u0107 w tek\u015bcie (opcjonalnie)\r\n U\u017cyj <strong> wewn\u0105trz .benefit-text je\u015bli chcesz wyr\u00f3\u017cni\u0107 s\u0142owa *\/\r\n .benefit-text strong {\r\n font-weight: 700;\r\n }\r\n\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n PRAWA STRONA \u2013 ZDJ\u0118CIE \/ GIF\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .benefits-right {\r\n position: relative;\r\n overflow: hidden;\r\n \/* Minimalna wysoko\u015b\u0107 gdy zdj\u0119cie jest niedu\u017ce *\/\r\n min-height: 280px;\r\n }\r\n\r\n \/* \u2500\u2500 ZDJ\u0118CIE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n ZDJ\u0118CIE \u2013 zmie\u0144 src na link do swojego zdj\u0119cia lub GIF-a\r\n\r\n Zalecane formaty:\r\n \u2022 Zdj\u0119cie JPG\/PNG: src=\"https:\/\/twoja-domena.pl\/zdjecie.jpg\"\r\n \u2022 GIF animowany: src=\"https:\/\/twoja-domena.pl\/animacja.gif\"\r\n \u2022 Wideo (MP4): zamie\u0144 <img> na <video autoplay loop muted playsinline>\r\n\r\n Zalecany rozmiar: min 800\u00d7600 px, proporcje 4:3 lub 16:9\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n .benefits-img {\r\n position: absolute;\r\n inset: 0; \/* rozci\u0105ga obraz na ca\u0142y kontener *\/\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover; \/* cover \u2013 wype\u0142nia bez deformacji *\/\r\n object-position: center; \/* \u015brodek obrazu \u2013 zmie\u0144 np. na \"top\" lub \"left\" *\/\r\n display: block;\r\n \/* Subtelny overlay po lewej \u2013 p\u0142ynne przej\u015bcie do ciemnego t\u0142a tekstu *\/\r\n mask-image: linear-gradient(\r\n to right,\r\n transparent 0%,\r\n rgba(0,0,0,0.05) 8%,\r\n rgba(0,0,0,1) 100%\r\n );\r\n -webkit-mask-image: linear-gradient(\r\n to right,\r\n transparent 0%,\r\n rgba(0,0,0,0.05) 8%,\r\n rgba(0,0,0,1) 100%\r\n );\r\n transition: transform 0.5s ease; \/* p\u0142ynny zoom przy hover *\/\r\n }\r\n\r\n \/* Delikatny zoom zdj\u0119cia przy najechaniu na kart\u0119 *\/\r\n .benefits-card:hover .benefits-img {\r\n transform: scale(1.03);\r\n }\r\n\r\n \/* Nak\u0142adka \u2013 przyciemnia praw\u0105 stron\u0119 dla sp\u00f3jno\u015bci z t\u0142em *\/\r\n .benefits-img-overlay {\r\n position: absolute;\r\n inset: 0;\r\n \/* Gradient od lewej (ciemny) do prawej (przezroczysty) *\/\r\n background: linear-gradient(\r\n to right,\r\n rgba(10,12,10,0.55) 0%,\r\n rgba(10,12,10,0.10) 60%,\r\n transparent 100%\r\n );\r\n z-index: 1;\r\n pointer-events: none;\r\n }\r\n\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESPONSYWNO\u015a\u0106\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\n \/* Tablet \u2264 820px \u2013 jedna kolumna, zdj\u0119cie pod tekstem *\/\r\n @media (max-width: 820px) {\r\n .benefits-inner {\r\n grid-template-columns: 1fr; \/* jedna kolumna *\/\r\n min-height: auto;\r\n }\r\n\r\n \/* Zdj\u0119cie jako statyczny blok pod tekstem *\/\r\n .benefits-right {\r\n min-height: clamp(220px, 50vw, 380px); \/* wysoko\u015b\u0107 zdj\u0119cia na tablecie *\/\r\n \/* Usu\u0144 mask przy jednej kolumnie \u2013 pe\u0142ny obraz *\/\r\n }\r\n\r\n \/* Mask na tablecie \u2013 z g\u00f3ry do do\u0142u (tekst nad zdj\u0119ciem) *\/\r\n .benefits-img {\r\n mask-image: linear-gradient(\r\n to bottom,\r\n transparent 0%,\r\n black 15%,\r\n black 100%\r\n );\r\n -webkit-mask-image: linear-gradient(\r\n to bottom,\r\n transparent 0%,\r\n black 15%,\r\n black 100%\r\n );\r\n }\r\n\r\n .benefits-left {\r\n padding-bottom: clamp(20px, 3vw, 32px);\r\n }\r\n }\r\n\r\n \/* Telefon \u2264 480px \u2013 mniejszy padding i czcionki *\/\r\n @media (max-width: 480px) {\r\n .benefits-section {\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n }\r\n\r\n .benefits-left {\r\n padding: 28px 22px;\r\n }\r\n\r\n \/* Tytu\u0142 mniejszy na telefonie *\/\r\n .benefits-title {\r\n font-size: clamp(1.55rem, 7vw, 2rem);\r\n letter-spacing: 0.01em;\r\n }\r\n\r\n \/* Tekst benefit\u00f3w mniejszy *\/\r\n .benefit-text {\r\n font-size: 0.9rem;\r\n }\r\n\r\n \/* Zdj\u0119cie ni\u017csze na telefonie *\/\r\n .benefits-right {\r\n min-height: 200px;\r\n }\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<section class=\"benefits-section\">\r\n <div class=\"benefits-card\">\r\n <div class=\"benefits-inner\">\r\n\r\n \r\n <div class=\"benefits-left\">\r\n\r\n \r\n <h2 class=\"benefits-title\">\r\n Wymierne efekty<br>dla Twojego biznesu\r\n <\/h2>\r\n\r\n \r\n <ul class=\"benefits-list\">\r\n\r\n \r\n <li class=\"benefit-item\">\r\n <span class=\"benefit-dot\" aria-hidden=\"true\"><\/span>\r\n <span class=\"benefit-text\">\r\n <strong>Zero b\u0142\u0119d\u00f3w monta\u017cowych<\/strong> \u2013 Wyeliminuj b\u0142\u0119dy monta\u017cowe dzi\u0119ki wizualizacji \u201ekrok po kroku\u201d, kt\u00f3ra nie pozostawia miejsca na domys\u0142y.\r\n <\/span>\r\n <\/li>\r\n\r\n\r\n \r\n <li class=\"benefit-item\">\r\n <span class=\"benefit-dot\" aria-hidden=\"true\"><\/span>\r\n <span class=\"benefit-text\">\r\n <strong>Targi<\/strong> \u2013 Zdobywaj kontrakty i wygrywaj przetargi, prezentuj\u0105c gotowe rozwi\u0105zania jeszcze przed etapem prototypowania.\r\n <\/span>\r\n <\/li>\r\n\r\n \r\n <li class=\"benefit-item\">\r\n <span class=\"benefit-dot\" aria-hidden=\"true\"><\/span>\r\n <span class=\"benefit-text\">\r\n <strong>Szkolenie personelu<\/strong> - Wiedza dost\u0119pna natychmiast, bez koszt\u00f3w powtarzania sesji.\r\n <\/span>\r\n <\/li>\r\n\r\n \r\n <li class=\"benefit-item\">\r\n <span class=\"benefit-dot\" aria-hidden=\"true\"><\/span>\r\n <span class=\"benefit-text\">\r\n <strong>Elastyczno\u015b\u0107 <\/strong> - Twoja inwestycja nie traci na wa\u017cno\u015bci \u2013 aktualizujemy istniej\u0105c\u0105 animacj\u0119 wraz z ewolucj\u0105 Twojego produktu.\r\n <\/span>\r\n <\/li>\r\n\r\n \r\n\r\n <\/ul>\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"benefits-right\">\r\n\r\n \r\n <img decoding=\"async\"\r\n class=\"benefits-img\"\r\n src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/05\/linia_produkcyjna_widok_z_gory_202605050335.webp\"\r\n alt=\"Animacja medyczna Creative Zen \u2013 reanimacja, szkolenie personelu medycznego\"\r\n loading=\"lazy\"\r\n \/>\r\n \r\n\r\n \r\n <div class=\"benefits-img-overlay\" aria-hidden=\"true\"><\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-123e92fd e-con-full e-flex e-con e-parent\" data-id=\"123e92fd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-5a88877b e-con-full e-flex e-con e-child\" data-id=\"5a88877b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4b5672a8 elementor-widget elementor-widget-html\" data-id=\"4b5672a8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!DOCTYPE html>\r\n<html lang=\"pl\">\r\n<head>\r\n <meta charset=\"UTF-8\"\/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Creative Zen \u2013 Proces pracy<\/title>\r\n\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin\/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n :root {\r\n --accent: #4ade80;\r\n --accent-line: rgba(74,222,128,0.40);\r\n --text: #ffffff;\r\n --muted: rgba(255,255,255,0.58); \/* ja\u015bniejszy muted dla czytelno\u015bci *\/\r\n --border: rgba(255,255,255,0.10);\r\n --card-bg: rgba(255,255,255,0.04);\r\n --card-glow: rgba(74,222,128,0.08);\r\n --font: 'Inter', sans-serif;\r\n --px: clamp(24px, 6vw, 80px);\r\n }\r\n\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n html { font-size: 16px; }\r\n body { font-family: var(--font); color: var(--text); background: transparent; overflow-x: hidden; }\r\n\r\n\r\n \/* \u2550\u2550 SEKCJA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .process-section {\r\n position: relative;\r\n padding: clamp(64px, 9vw, 112px) var(--px);\r\n overflow: hidden;\r\n }\r\n\r\n \/* Dekoracje t\u0142a *\/\r\n .deco-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }\r\n .deco-glow-top {\r\n position: absolute; top: -80px; left: 50%;\r\n transform: translateX(-50%);\r\n width: 700px; height: 320px; border-radius: 50%;\r\n background: radial-gradient(ellipse, rgba(74,222,128,0.07) 0%, transparent 70%);\r\n pointer-events: none;\r\n }\r\n .deco-left {\r\n position: absolute; left: -20px; top: 50%;\r\n transform: translateY(-50%); opacity: 0.07; pointer-events: none;\r\n }\r\n .deco-right {\r\n position: absolute; right: -20px; top: 50%;\r\n transform: translateY(-50%); opacity: 0.07; pointer-events: none;\r\n }\r\n\r\n\r\n \/* \u2550\u2550 TYTU\u0141 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .process-title {\r\n position: relative; z-index: 1;\r\n text-align: center;\r\n margin-bottom: clamp(44px, 6vw, 72px);\r\n }\r\n\r\n \/* TYTU\u0141 SEKCJI \u2013 zmie\u0144 tekst w <h2> *\/\r\n .process-title h2 {\r\n font-size: clamp(1.6rem, 4vw, 2.8rem);\r\n font-weight: 800;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n color: var(--text);\r\n line-height: 1.12;\r\n }\r\n\r\n\r\n \/* \u2550\u2550 SIATKA KROK\u00d3W \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n Uk\u0142ad: [1][2][3] g\u00f3rny rz\u0105d + [4][5] dolny rz\u0105d\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .steps-grid { position: relative; z-index: 1; }\r\n\r\n .steps-row-top {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: clamp(14px, 2vw, 22px);\r\n }\r\n\r\n .steps-row-bottom {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: clamp(14px, 2vw, 22px);\r\n max-width: 72%;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* Pionowy \u0142\u0105cznik mi\u0119dzy rz\u0119dami *\/\r\n .row-connector {\r\n display: flex; justify-content: center; align-items: center;\r\n height: clamp(24px, 3.5vw, 36px);\r\n position: relative; z-index: 1;\r\n }\r\n .row-connector::before {\r\n content: ''; position: absolute; left: 50%; top: 0; bottom: 0;\r\n width: 1px;\r\n background: linear-gradient(to bottom, var(--accent-line), transparent);\r\n transform: translateX(-50%);\r\n }\r\n .connector-diamond {\r\n width: 9px; height: 9px;\r\n border: 1.5px solid var(--accent);\r\n background: transparent;\r\n transform: rotate(45deg);\r\n z-index: 2; flex-shrink: 0;\r\n }\r\n\r\n\r\n \/* \u2550\u2550 KARTA KROKU \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .step-card {\r\n position: relative;\r\n background: var(--card-bg);\r\n border: 1px solid var(--border);\r\n border-radius: 14px;\r\n \/* Wi\u0119cej paddingu \u2013 tekst ma wi\u0119cej przestrzeni *\/\r\n padding: clamp(28px, 3.5vw, 44px) clamp(24px, 3vw, 36px);\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px; \/* wi\u0119kszy gap mi\u0119dzy elementami karty *\/\r\n box-shadow:\r\n inset 0 1px 0 rgba(255,255,255,0.06),\r\n 0 0 40px var(--card-glow);\r\n transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;\r\n overflow: hidden;\r\n }\r\n .step-card:hover {\r\n border-color: rgba(74,222,128,0.28);\r\n box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 64px rgba(74,222,128,0.14);\r\n transform: translateY(-3px);\r\n }\r\n \/* Subtelna po\u015bwiata wewn\u0105trz karty *\/\r\n .step-card::before {\r\n content: ''; position: absolute; top: -30px; left: -30px;\r\n width: 140px; height: 140px; border-radius: 50%;\r\n background: radial-gradient(circle, rgba(74,222,128,0.08) 0%, transparent 70%);\r\n pointer-events: none;\r\n }\r\n\r\n \/* Strza\u0142ka mi\u0119dzy kartami w rz\u0119dzie *\/\r\n .step-card.has-arrow-right { overflow: visible; }\r\n .step-card.has-arrow-right::after {\r\n content: ''; position: absolute; top: 50%;\r\n right: calc(-1 * clamp(14px, 2vw, 22px));\r\n width: clamp(14px, 2vw, 22px); height: 1px;\r\n background: linear-gradient(to right, var(--accent-line), transparent);\r\n transform: translateY(-50%); z-index: 2; pointer-events: none;\r\n }\r\n\r\n\r\n \/* \u2550\u2550 NUMER KROKU \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .step-number {\r\n font-size: 0.70rem; \/* nieco wi\u0119kszy od poprzedniego *\/\r\n font-weight: 700;\r\n letter-spacing: 0.18em;\r\n text-transform: uppercase;\r\n color: var(--accent);\r\n }\r\n\r\n\r\n \/* \u2550\u2550 IKONA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n Kontener ikony \u2013 wi\u0119kszy ni\u017c poprzednio\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .step-icon-wrap {\r\n width: clamp(52px, 6vw, 68px); \/* WI\u0118KSZY kontener *\/\r\n height: clamp(52px, 6vw, 68px);\r\n border-radius: 14px;\r\n background: rgba(74,222,128,0.08); \/* lekkie zielone t\u0142o ikony *\/\r\n border: 1px solid rgba(74,222,128,0.18);\r\n display: flex; align-items: center; justify-content: center;\r\n flex-shrink: 0;\r\n }\r\n .step-icon-wrap svg {\r\n width: 58%; \/* ikona zajmuje 58% kontenera *\/\r\n height: 58%;\r\n }\r\n\r\n\r\n \/* \u2550\u2550 NAZWA KROKU \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .step-name {\r\n \/* WYRA\u0179NIE WI\u0118KSZY tekst ni\u017c poprzednio *\/\r\n font-size: clamp(0.90rem, 1.5vw, 1.05rem);\r\n font-weight: 700;\r\n letter-spacing: 0.06em; \/* mniej spacing = czytelniej *\/\r\n text-transform: uppercase;\r\n color: var(--text);\r\n line-height: 1.35;\r\n margin-bottom: 0;\r\n }\r\n\r\n\r\n \/* \u2550\u2550 OPIS KROKU \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n Wyra\u017anie wi\u0119kszy i ja\u015bniejszy ni\u017c poprzednio\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .step-desc {\r\n font-size: clamp(0.83rem, 1.3vw, 0.95rem); \/* WI\u0118KSZY od poprzedniego *\/\r\n font-weight: 400; \/* normalny zamiast 300 \u2013 czytelniejszy *\/\r\n line-height: 1.72;\r\n color: var(--muted); \/* ja\u015bniejszy muted *\/\r\n }\r\n\r\n \/* Dodatkowy tag (opcjonalny) \u2013 np. \"\u2713 Akceptacja klienta\" *\/\r\n .step-tag {\r\n display: inline-flex; align-items: center; gap: 5px;\r\n font-size: 0.72rem; font-weight: 600;\r\n color: var(--accent);\r\n background: rgba(74,222,128,0.10);\r\n border: 1px solid rgba(74,222,128,0.20);\r\n border-radius: 100px;\r\n padding: 4px 10px;\r\n width: fit-content;\r\n margin-top: 4px;\r\n }\r\n\r\n\r\n \/* \u2550\u2550 RESPONSYWNO\u015a\u0106 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n @media (max-width: 860px) {\r\n .steps-row-top { grid-template-columns: repeat(2, 1fr); }\r\n .steps-row-bottom { max-width: 100%; grid-template-columns: repeat(2, 1fr); }\r\n .step-card.has-arrow-right::after { display: none; }\r\n }\r\n @media (max-width: 540px) {\r\n .steps-row-top,\r\n .steps-row-bottom { grid-template-columns: 1fr; max-width: 100%; }\r\n .step-card { padding: 24px 20px; }\r\n .row-connector { display: none; }\r\n .process-title h2 { letter-spacing: 0.03em; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"process-section\">\r\n\r\n \r\n <div class=\"deco-bg\" aria-hidden=\"true\">\r\n <div class=\"deco-glow-top\"><\/div>\r\n\r\n <svg class=\"deco-left\" width=\"220\" height=\"520\" viewBox=\"0 0 220 520\" fill=\"none\">\r\n <line x1=\"60\" y1=\"20\" x2=\"60\" y2=\"500\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <line x1=\"60\" y1=\"80\" x2=\"160\" y2=\"80\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <line x1=\"60\" y1=\"200\" x2=\"200\" y2=\"200\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <line x1=\"60\" y1=\"320\" x2=\"140\" y2=\"320\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <line x1=\"60\" y1=\"430\" x2=\"180\" y2=\"430\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <circle cx=\"60\" cy=\"80\" r=\"4\" fill=\"none\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <circle cx=\"160\" cy=\"80\" r=\"3\" fill=\"white\"\/>\r\n <circle cx=\"60\" cy=\"200\" r=\"4\" fill=\"none\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <circle cx=\"200\" cy=\"200\" r=\"3\" fill=\"white\"\/>\r\n <circle cx=\"60\" cy=\"320\" r=\"4\" fill=\"none\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <circle cx=\"140\" cy=\"320\" r=\"3\" fill=\"white\"\/>\r\n <circle cx=\"60\" cy=\"430\" r=\"4\" fill=\"none\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <circle cx=\"180\" cy=\"430\" r=\"3\" fill=\"white\"\/>\r\n <\/svg>\r\n\r\n <svg class=\"deco-right\" width=\"220\" height=\"520\" viewBox=\"0 0 220 520\" fill=\"none\">\r\n <line x1=\"160\" y1=\"20\" x2=\"160\" y2=\"500\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <line x1=\"160\" y1=\"120\" x2=\"60\" y2=\"120\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <line x1=\"160\" y1=\"240\" x2=\"20\" y2=\"240\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <line x1=\"160\" y1=\"360\" x2=\"80\" y2=\"360\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <circle cx=\"160\" cy=\"120\" r=\"4\" fill=\"none\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <circle cx=\"60\" cy=\"120\" r=\"3\" fill=\"white\"\/>\r\n <circle cx=\"160\" cy=\"240\" r=\"4\" fill=\"none\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <circle cx=\"20\" cy=\"240\" r=\"3\" fill=\"white\"\/>\r\n <circle cx=\"160\" cy=\"360\" r=\"4\" fill=\"none\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <circle cx=\"80\" cy=\"360\" r=\"3\" fill=\"white\"\/>\r\n <\/svg>\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"process-title\">\r\n <h2>Od briefu do gotowej animacji<\/h2>\r\n <\/div>\r\n\r\n\r\n <div class=\"steps-grid\">\r\n\r\n \r\n <div class=\"steps-row-top\">\r\n\r\n \r\n <div class=\"step-card has-arrow-right\">\r\n <span class=\"step-number\">Krok 01<\/span>\r\n\r\n \r\n <div class=\"step-icon-wrap\">\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\r\n \r\n <rect x=\"10\" y=\"4\" width=\"28\" height=\"36\" rx=\"3\"\r\n stroke=\"rgba(255,255,255,0.80)\" stroke-width=\"1.8\"\/>\r\n \r\n <path d=\"M28 4 L38 14 L28 14 Z\"\r\n stroke=\"rgba(255,255,255,0.55)\" stroke-width=\"1.4\"\r\n stroke-linejoin=\"round\" fill=\"rgba(255,255,255,0.06)\"\/>\r\n \r\n <line x1=\"15\" y1=\"22\" x2=\"33\" y2=\"22\" stroke=\"rgba(255,255,255,0.60)\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\r\n <line x1=\"15\" y1=\"28\" x2=\"33\" y2=\"28\" stroke=\"rgba(255,255,255,0.60)\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\r\n <line x1=\"15\" y1=\"34\" x2=\"26\" y2=\"34\" stroke=\"rgba(255,255,255,0.45)\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <\/div>\r\n\r\n \r\n <p class=\"step-name\">Brief & Materia\u0142y<\/p>\r\n\r\n \r\n <p class=\"step-desc\">\r\n Dostarczasz pliki CAD, rysunki techniczne, dokumentacj\u0119 lub szczeg\u00f3\u0142owy opis.\r\n Nie masz modelu 3D? Tworzymy go od podstaw.\r\n <\/p>\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"step-card has-arrow-right\">\r\n <span class=\"step-number\">Krok 02<\/span>\r\n\r\n \r\n <div class=\"step-icon-wrap\">\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\r\n \r\n <rect x=\"6\" y=\"10\" width=\"36\" height=\"7\" rx=\"2\"\r\n stroke=\"rgba(255,255,255,0.80)\" stroke-width=\"1.8\"\/>\r\n \r\n <line x1=\"14\" y1=\"10\" x2=\"11\" y2=\"17\" stroke=\"rgba(255,255,255,0.55)\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\r\n <line x1=\"21\" y1=\"10\" x2=\"18\" y2=\"17\" stroke=\"rgba(255,255,255,0.55)\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\r\n <line x1=\"28\" y1=\"10\" x2=\"25\" y2=\"17\" stroke=\"rgba(255,255,255,0.55)\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\r\n <line x1=\"35\" y1=\"10\" x2=\"32\" y2=\"17\" stroke=\"rgba(255,255,255,0.55)\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\r\n \r\n <rect x=\"6\" y=\"17\" width=\"36\" height=\"22\" rx=\"2\"\r\n stroke=\"rgba(255,255,255,0.80)\" stroke-width=\"1.8\"\/>\r\n \r\n <rect x=\"10\" y=\"21\" width=\"12\" height=\"9\" rx=\"1\"\r\n stroke=\"rgba(255,255,255,0.45)\" stroke-width=\"1.2\"\/>\r\n <rect x=\"26\" y=\"21\" width=\"12\" height=\"9\" rx=\"1\"\r\n stroke=\"rgba(255,255,255,0.45)\" stroke-width=\"1.2\"\/>\r\n <line x1=\"10\" y1=\"34\" x2=\"38\" y2=\"34\" stroke=\"rgba(255,255,255,0.35)\" stroke-width=\"1\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <\/div>\r\n\r\n \r\n <p class=\"step-name\">Scenariusz i storyboard<\/p>\r\n\r\n \r\n <p class=\"step-desc\">\r\n Projektujemy sekwencj\u0119 kadr\u00f3w, uj\u0119cia i narracj\u0119.\r\n Storyboard akceptujesz Ty.\r\n <\/p>\r\n <span class=\"step-tag\">\u2713 Akceptacja klienta<\/span>\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"step-card\">\r\n <span class=\"step-number\">Krok 03<\/span>\r\n\r\n \r\n <div class=\"step-icon-wrap\">\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\r\n \r\n \r\n <path d=\"M24 6 L40 15 L24 24 L8 15 Z\"\r\n stroke=\"rgba(255,255,255,0.80)\" stroke-width=\"1.8\"\r\n stroke-linejoin=\"round\" fill=\"rgba(255,255,255,0.05)\"\/>\r\n \r\n <path d=\"M8 15 L8 33 L24 42 L24 24 Z\"\r\n stroke=\"rgba(255,255,255,0.65)\" stroke-width=\"1.8\"\r\n stroke-linejoin=\"round\" fill=\"rgba(255,255,255,0.03)\"\/>\r\n \r\n <path d=\"M24 24 L24 42 L40 33 L40 15 Z\"\r\n stroke=\"rgba(255,255,255,0.80)\" stroke-width=\"1.8\"\r\n stroke-linejoin=\"round\" fill=\"rgba(255,255,255,0.07)\"\/>\r\n \r\n <line x1=\"24\" y1=\"24\" x2=\"24\" y2=\"42\"\r\n stroke=\"rgba(255,255,255,0.45)\" stroke-width=\"1.2\"\/>\r\n <\/svg>\r\n <\/div>\r\n\r\n \r\n <p class=\"step-name\">Modelowanie 3D<\/p>\r\n\r\n \r\n <p class=\"step-desc\">\r\n Budujemy precyzyjny model 3D Twojego produktu, maszyny lub urz\u0105dzenia\r\n z uwzgl\u0119dnieniem wszystkich detali mechanicznych i funkcjonalnych.\r\n <\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"row-connector\" aria-hidden=\"true\">\r\n <div class=\"connector-diamond\"><\/div>\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"steps-row-bottom\">\r\n\r\n \r\n <div class=\"step-card has-arrow-right\">\r\n <span class=\"step-number\">Krok 04<\/span>\r\n\r\n \r\n <div class=\"step-icon-wrap\">\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\r\n \r\n <rect x=\"4\" y=\"8\" width=\"40\" height=\"26\" rx=\"3\"\r\n stroke=\"rgba(255,255,255,0.80)\" stroke-width=\"1.8\"\/>\r\n \r\n <path d=\"M19 16 L34 21 L19 26 Z\"\r\n fill=\"rgba(255,255,255,0.70)\"\r\n stroke=\"rgba(255,255,255,0.70)\" stroke-width=\"1\"\r\n stroke-linejoin=\"round\"\/>\r\n \r\n <line x1=\"24\" y1=\"34\" x2=\"24\" y2=\"40\"\r\n stroke=\"rgba(255,255,255,0.55)\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\r\n \r\n <line x1=\"16\" y1=\"40\" x2=\"32\" y2=\"40\"\r\n stroke=\"rgba(255,255,255,0.55)\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/>\r\n \r\n <rect x=\"33\" y=\"11\" width=\"8\" height=\"5\" rx=\"1\"\r\n fill=\"rgba(74,222,128,0.20)\" stroke=\"rgba(74,222,128,0.50)\" stroke-width=\"1\"\/>\r\n <text x=\"34.5\" y=\"15.2\" font-size=\"3.8\"\r\n fill=\"rgba(74,222,128,0.90)\"\r\n font-family=\"Inter, sans-serif\" font-weight=\"800\">4K<\/text>\r\n <\/svg>\r\n <\/div>\r\n\r\n \r\n <p class=\"step-name\">Animacja i Rendering <\/p>\r\n\r\n \r\n <p class=\"step-desc\">\r\n Tworzymy p\u0142ynn\u0105 animacj\u0119 z pe\u0142nym renderingiem.\r\n Ruchome cz\u0119\u015bci, przekroje, widoki rozstrzelone \u2014 wszystko czego potrzebujesz.\r\n Lektor i ud\u017awi\u0119kowienie opcjonalnie.\r\n <\/p>\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"step-card\">\r\n <span class=\"step-number\">Krok 05<\/span>\r\n\r\n \r\n <div class=\"step-icon-wrap\">\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\r\n \r\n <path d=\"M24 5 L40 12 L40 26 C40 35 24 44 24 44 C24 44 8 35 8 26 L8 12 Z\"\r\n stroke=\"rgba(255,255,255,0.80)\" stroke-width=\"1.8\"\r\n stroke-linejoin=\"round\" fill=\"rgba(74,222,128,0.07)\"\/>\r\n \r\n <path d=\"M16 24 L22 30 L33 18\"\r\n stroke=\"rgba(255,255,255,0.90)\" stroke-width=\"2.4\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <\/svg>\r\n <\/div>\r\n\r\n \r\n <p class=\"step-name\">Korekty i finalizacja<\/p>\r\n\r\n \r\n <p class=\"step-desc\">\r\n Rundy korekt dop\u00f3ki efekt Ci\u0119 nie zachwyci.\r\n Eksport w wybranych formatach: MP4, MOV, p\u0119tla targowa,\r\n QR-kod do instrukcji lub opakowania. Gotowe do u\u017cycia od razu.\r\n <\/p>\r\n <span class=\"step-tag\">\u2713 Gotowe do u\u017cycia<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7be8d3a5 elementor-widget elementor-widget-html\" data-id=\"7be8d3a5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!DOCTYPE html>\r\n<html lang=\"pl\">\r\n<head>\r\n <meta charset=\"UTF-8\"\/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Creative Zen \u2013 FAQ & O w\u0142a\u015bcicielu<\/title>\r\n\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin\/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n\r\n :root {\r\n --accent: #4ade80;\r\n --text: #ffffff;\r\n --text-muted: rgba(255,255,255,0.50);\r\n --border: rgba(255,255,255,0.10);\r\n --card-bg: rgba(255,255,255,0.04);\r\n --font: 'Inter', sans-serif;\r\n --px: clamp(24px, 6vw, 80px);\r\n }\r\n\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n html { font-size: 16px; }\r\n body {\r\n font-family: var(--font);\r\n color: var(--text);\r\n background: transparent;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* \u2550\u2550 SEKCJA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .faq-section {\r\n padding: clamp(60px, 8vw, 100px) var(--px);\r\n }\r\n\r\n .faq-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: clamp(14px, 2vw, 24px);\r\n align-items: stretch; \/* \u2190 obie karty tej samej wysoko\u015bci *\/\r\n }\r\n\r\n \/* \u2550\u2550 KARTY \u2013 wsp\u00f3lne \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .card {\r\n background: var(--card-bg);\r\n border: 1px solid var(--border);\r\n border-radius: 16px;\r\n padding: clamp(28px, 4vw, 44px);\r\n box-shadow:\r\n inset 0 1px 0 rgba(255,255,255,0.06),\r\n 0 8px 40px rgba(0,0,0,0.25);\r\n \/* Kluczowe \u2013 karta wype\u0142nia ca\u0142\u0105 wysoko\u015b\u0107 kom\u00f3rki gridu *\/\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n \/* \u2550\u2550 LEWA KARTA \u2013 FAQ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .faq-title {\r\n font-size: clamp(2.8rem, 6vw, 4.2rem);\r\n font-weight: 800;\r\n letter-spacing: -0.02em;\r\n line-height: 1.0;\r\n color: var(--text);\r\n margin-bottom: clamp(24px, 3.5vw, 36px);\r\n }\r\n\r\n .faq-list {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1; \/* \u2190 lista ro\u015bnie by wype\u0142ni\u0107 kart\u0119 *\/\r\n justify-content: space-between; \/* pytania roz\u0142o\u017cone r\u00f3wnomiernie *\/\r\n }\r\n\r\n .faq-item {\r\n border-top: 1px solid var(--border);\r\n }\r\n .faq-item:last-child {\r\n border-bottom: 1px solid var(--border);\r\n }\r\n\r\n .faq-btn {\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 12px;\r\n padding: 18px 0;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n text-align: left;\r\n }\r\n\r\n .faq-q-text {\r\n font-size: clamp(0.72rem, 1.3vw, 0.84rem);\r\n font-weight: 600;\r\n letter-spacing: 0.10em;\r\n text-transform: uppercase;\r\n color: var(--text);\r\n line-height: 1.4;\r\n }\r\n\r\n .faq-chevron {\r\n flex-shrink: 0;\r\n width: 22px; height: 22px;\r\n display: flex; align-items: center; justify-content: center;\r\n transition: transform 0.28s ease;\r\n }\r\n .faq-chevron svg {\r\n width: 14px; height: 14px;\r\n stroke: rgba(255,255,255,0.60);\r\n fill: none;\r\n stroke-width: 2;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n .faq-item.open .faq-chevron { transform: rotate(180deg); }\r\n .faq-item.open .faq-chevron svg { stroke: var(--accent); }\r\n\r\n .faq-body {\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.32s ease;\r\n }\r\n .faq-item.open .faq-body { max-height: 400px; }\r\n\r\n .faq-a-text {\r\n padding-bottom: 18px;\r\n font-size: clamp(0.77rem, 1.2vw, 0.86rem);\r\n font-weight: 300;\r\n line-height: 1.72;\r\n color: var(--text-muted);\r\n }\r\n\r\n \/* \u2550\u2550 PRAWA KARTA \u2013 W\u0141A\u015aCICIEL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .owner-header {\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n gap: 16px;\r\n margin-bottom: clamp(20px, 3vw, 30px);\r\n }\r\n\r\n .owner-name {\r\n font-size: clamp(1.5rem, 3.2vw, 2.2rem);\r\n font-weight: 700;\r\n letter-spacing: -0.01em;\r\n line-height: 1.15;\r\n color: var(--text);\r\n }\r\n\r\n .owner-role {\r\n font-size: 0.75rem;\r\n font-weight: 400;\r\n color: var(--text-muted);\r\n margin-top: 5px;\r\n letter-spacing: 0.04em;\r\n }\r\n\r\n .owner-photo {\r\n width: clamp(72px, 9vw, 96px);\r\n height: clamp(72px, 9vw, 96px);\r\n border-radius: 50%;\r\n object-fit: cover;\r\n flex-shrink: 0;\r\n border: 2px solid rgba(74, 222, 128, 0.30);\r\n box-shadow: 0 0 20px rgba(74, 222, 128, 0.10);\r\n }\r\n\r\n .owner-divider {\r\n border: none;\r\n border-top: 1px solid var(--border);\r\n margin-bottom: clamp(20px, 3vw, 28px);\r\n }\r\n\r\n .owner-text {\r\n font-size: clamp(0.84rem, 1.4vw, 0.96rem);\r\n font-weight: 300;\r\n line-height: 1.78;\r\n color: rgba(255,255,255,0.80);\r\n flex: 1; \/* \u2190 tekst wype\u0142nia pozosta\u0142e miejsce w karcie *\/\r\n }\r\n\r\n .owner-text strong {\r\n font-weight: 600;\r\n color: var(--text);\r\n }\r\n\r\n .owner-cta {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n margin-top: clamp(20px, 3vw, 28px);\r\n padding: 11px 22px;\r\n background: none;\r\n border: 1.5px solid rgba(255,255,255,0.25);\r\n border-radius: 4px;\r\n color: var(--text);\r\n font-family: var(--font);\r\n font-size: 0.68rem;\r\n font-weight: 600;\r\n letter-spacing: 0.16em;\r\n text-transform: uppercase;\r\n text-decoration: none;\r\n cursor: pointer;\r\n transition: background 0.20s, border-color 0.20s;\r\n align-self: flex-start; \/* \u2190 przycisk nie rozci\u0105ga si\u0119 na ca\u0142\u0105 szeroko\u015b\u0107 *\/\r\n }\r\n .owner-cta:hover {\r\n background: rgba(255,255,255,0.06);\r\n border-color: rgba(255,255,255,0.50);\r\n }\r\n .owner-cta svg {\r\n width: 12px; height: 12px;\r\n stroke: currentColor;\r\n fill: none;\r\n stroke-width: 2;\r\n stroke-linecap: round;\r\n flex-shrink: 0;\r\n transition: transform 0.18s;\r\n }\r\n .owner-cta:hover svg { transform: translateX(3px); }\r\n\r\n \/* \u2550\u2550 RESPONSYWNO\u015a\u0106 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n @media (max-width: 760px) {\r\n .faq-grid {\r\n grid-template-columns: 1fr;\r\n gap: clamp(14px, 3vw, 20px);\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .card { padding: 22px 18px; }\r\n .faq-title { font-size: 2.4rem; }\r\n .owner-name { font-size: 1.5rem; }\r\n .owner-photo { width: 64px; height: 64px; }\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"faq-section\">\r\n <div class=\"faq-grid\">\r\n\r\n \r\n <div class=\"card\">\r\n <h2 class=\"faq-title\">FAQ<\/h2>\r\n <div class=\"faq-list\">\r\n\r\n <div class=\"faq-item\">\r\n <button class=\"faq-btn\" onclick=\"toggleFaq(this)\" aria-expanded=\"false\">\r\n <span class=\"faq-q-text\">Czy musz\u0119 dostarczy\u0107 model 3D lub pliki CAD?<\/span>\r\n <span class=\"faq-chevron\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 14 9\"><path d=\"M1 1L7 7L13 1\"\/><\/svg>\r\n <\/span>\r\n <\/button>\r\n <div class=\"faq-body\">\r\n <p class=\"faq-a-text\">\r\n Nie jest to wymagane, ale mile widziane. Je\u015bli posiadasz pliki CAD\r\n lub modele 3D urz\u0105dzenia, mo\u017cemy je wykorzysta\u0107 jako baz\u0119 \u2014 skraca to\r\n czas realizacji i obni\u017ca koszt. Je\u015bli nie masz modeli, tworzymy je\r\n od podstaw na bazie dokumentacji technicznej, zdj\u0119\u0107 referencyjnych\r\n lub Twojego opisu. \r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <button class=\"faq-btn\" onclick=\"toggleFaq(this)\" aria-expanded=\"false\">\r\n <span class=\"faq-q-text\">Ile trwa realizacja projektu?<\/span>\r\n <span class=\"faq-chevron\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 14 9\"><path d=\"M1 1L7 7L13 1\"\/><\/svg>\r\n <\/span>\r\n <\/button>\r\n <div class=\"faq-body\">\r\n <p class=\"faq-a-text\">\r\n Czas zale\u017cy od z\u0142o\u017cono\u015bci projektu. Orientacyjnie:<br><br>\r\n \u2014 Animacja 2D edukacyjna (do 60 sek.): <strong>3\u20134 tygodnie<\/strong><br>\r\n \u2014 Animacja 3D (do 90 sek.): <strong>3\u20136 tygodni<\/strong><br>\r\n \u2014 Animacja chirurgiczna \/ zaawansowana 3D: <strong>4\u20138 tygodni<\/strong><br><br>\r\n Po bezp\u0142atnej konsultacji podajemy konkretny harmonogram \u2014 je\u015bli masz\r\n kr\u00f3tki deadline, postaramy si\u0119 dostosowa\u0107.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <button class=\"faq-btn\" onclick=\"toggleFaq(this)\" aria-expanded=\"false\">\r\n <span class=\"faq-q-text\">Ile rund korekt jest wliczone w cen\u0119?<\/span>\r\n <span class=\"faq-chevron\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 14 9\"><path d=\"M1 1L7 7L13 1\"\/><\/svg>\r\n <\/span>\r\n <\/button>\r\n <div class=\"faq-body\">\r\n <p class=\"faq-a-text\">\r\n Nie ma okre\u015blonej liczby poprawek \u2014 natomiast staramy si\u0119 wzajemnie\r\n szanowa\u0107 sw\u00f3j czas i omawia\u0107 ka\u017cdy etap z osobna, by unikn\u0105\u0107 nag\u0142ych\r\n zmian wizualnych, kt\u00f3re powoduj\u0105 dodatkowy nak\u0142ad pracy.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <button class=\"faq-btn\" onclick=\"toggleFaq(this)\" aria-expanded=\"false\">\r\n <span class=\"faq-q-text\">Jakie formaty wideo dostarczacie?<\/span>\r\n <span class=\"faq-chevron\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 14 9\"><path d=\"M1 1L7 7L13 1\"\/><\/svg>\r\n <\/span>\r\n <\/button>\r\n <div class=\"faq-body\">\r\n <p class=\"faq-a-text\">\r\n Standardowo dostarczamy pliki w formatach: <strong>MP4 (H.264)<\/strong>\r\n do publikacji online, <strong>MOV<\/strong> do dalszej postprodukcji.\r\n Na \u017cyczenie przygotowujemy te\u017c wersje na ekrany targowe oraz warianty\r\n w proporcjach 1:1 i 9:16 na media spo\u0142eczno\u015bciowe. Klient powinien\r\n okre\u015bli\u0107 jaki format jest mu niezb\u0119dny jeszcze przed rozpocz\u0119ciem prac.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"card\">\r\n\r\n <div class=\"owner-header\">\r\n <div>\r\n <h3 class=\"owner-name\">Pawe\u0142 Kempisty<\/h3>\r\n <p class=\"owner-role\">Za\u0142o\u017cyciel & Creative Director<\/p>\r\n <\/div>\r\n <img decoding=\"async\" class=\"owner-photo\"\r\n src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2025\/11\/e81aa2db-6296-4edc-bd16-9026355a7cfe-e1762790081447.webp\"\r\n alt=\"Pawe\u0142 Kempisty \u2013 za\u0142o\u017cyciel Creative Zen\"\r\n loading=\"lazy\"\/>\r\n <\/div>\r\n\r\n <hr class=\"owner-divider\"\/>\r\n\r\n <p class=\"owner-text\">\r\n Jako za\u0142o\u017cyciel firmy, chcia\u0142bym serdecznie podzi\u0119kowa\u0107 za zainteresowanie\r\n naszymi us\u0142ugami! Naszym celem jest budowanie d\u0142ugotrwa\u0142ych relacji opartych\r\n na zaufaniu i wsp\u00f3\u0142pracy. Po\u0142\u0105czmy si\u0142y i stw\u00f3rzmy co\u015b niezapomnianego!\r\n <\/p>\r\n\r\n <a href=\"#kontakt\" class=\"owner-cta\">\r\n Napisz do nas\r\n <svg viewBox=\"0 0 16 16\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M3 8H13M9 4L13 8L9 12\"\/>\r\n <\/svg>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n function toggleFaq(btn) {\r\n var item = btn.closest('.faq-item');\r\n var isOpen = item.classList.contains('open');\r\n document.querySelectorAll('.faq-item.open').forEach(function(openItem) {\r\n openItem.classList.remove('open');\r\n openItem.querySelector('.faq-btn').setAttribute('aria-expanded', 'false');\r\n });\r\n if (!isOpen) {\r\n item.classList.add('open');\r\n btn.setAttribute('aria-expanded', 'true');\r\n }\r\n }\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6b01a791 e-con-full e-flex e-con e-parent\" data-id=\"6b01a791\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1030c6de elementor-widget elementor-widget-html\" data-id=\"1030c6de\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pl\">\r\n<head>\r\n <meta charset=\"UTF-8\"\/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Creative Zen \u2013 Kontakt<\/title>\r\n\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin\/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n \r\n <script async src=\"https:\/\/www.googletagmanager.com\/gtag\/js?id=AW-16743616939\"><\/script>\r\n <script>\r\n window.dataLayer = window.dataLayer || [];\r\n function gtag(){dataLayer.push(arguments);}\r\n gtag('js', new Date());\r\n gtag('config', 'AW-16743616939');\r\n <\/script>\r\n\r\n \r\n <script>\r\n function gtag_report_conversion(url) {\r\n var callback = function () {\r\n if (typeof(url) != 'undefined') {\r\n window.location = url;\r\n }\r\n };\r\n gtag('event', 'conversion', {\r\n 'send_to': 'AW-16743616939\/CpjrCKDauqgcEKuj_a8-',\r\n 'value': 1.0,\r\n 'currency': 'PLN',\r\n 'event_callback': callback\r\n });\r\n return false;\r\n }\r\n <\/script>\r\n\r\n <style>\r\n :root {\r\n --accent: #4ade80;\r\n --accent-dim: rgba(74,222,128,0.12);\r\n --text: #ffffff;\r\n --muted: rgba(255,255,255,0.48);\r\n --border: rgba(255,255,255,0.09);\r\n --border-focus: rgba(74,222,128,0.55);\r\n --font: 'Inter', sans-serif;\r\n --px: clamp(20px, 5vw, 72px);\r\n }\r\n\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n html { font-size: 16px; }\r\n body {\r\n font-family: var(--font);\r\n color: var(--text);\r\n background: transparent;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* \u2550\u2550 SEKCJA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .contact-section {\r\n padding: clamp(48px, 7vw, 96px) var(--px) 0;\r\n }\r\n\r\n \/* \u2550\u2550 NAG\u0141\u00d3WEK \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .contact-header {\r\n text-align: center;\r\n margin-bottom: clamp(36px, 5vw, 56px);\r\n }\r\n .contact-label-tag {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 0.68rem;\r\n font-weight: 600;\r\n letter-spacing: 0.18em;\r\n text-transform: uppercase;\r\n color: var(--accent);\r\n margin-bottom: 14px;\r\n }\r\n .contact-label-tag::before,\r\n .contact-label-tag::after {\r\n content: '';\r\n width: 24px; height: 1px;\r\n background: var(--accent);\r\n opacity: 0.6;\r\n }\r\n .contact-title {\r\n font-size: clamp(2rem, 4.5vw, 3.4rem);\r\n font-weight: 300;\r\n letter-spacing: -0.02em;\r\n line-height: 1.12;\r\n }\r\n .contact-title strong { font-weight: 800; }\r\n .contact-subtitle {\r\n margin-top: 14px;\r\n font-size: clamp(0.88rem, 1.3vw, 1rem);\r\n font-weight: 300;\r\n color: var(--muted);\r\n line-height: 1.7;\r\n }\r\n .contact-subtitle .highlight {\r\n color: var(--accent);\r\n font-weight: 600;\r\n }\r\n\r\n \/* \u2550\u2550 G\u0141\u00d3WNY GRID \u2013 lewa \/ prawa \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .contact-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1.35fr;\r\n gap: clamp(20px, 3vw, 36px);\r\n align-items: start;\r\n }\r\n\r\n \/* \u2550\u2550 LEWA KOLUMNA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .left-col {\r\n display: flex;\r\n flex-direction: column;\r\n gap: clamp(16px, 2.5vw, 24px);\r\n }\r\n\r\n \/* Karta danych kontaktowych *\/\r\n .info-card {\r\n background: rgba(255,255,255,0.035);\r\n border: 1px solid var(--border);\r\n border-radius: 16px;\r\n padding: clamp(20px, 3vw, 32px);\r\n display: flex;\r\n flex-direction: column;\r\n gap: clamp(18px, 2.5vw, 24px);\r\n }\r\n\r\n .contact-row {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n }\r\n .contact-icon {\r\n flex-shrink: 0;\r\n width: 46px; height: 46px;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.08);\r\n border: 1.5px solid rgba(255,255,255,0.14);\r\n display: flex; align-items: center; justify-content: center;\r\n transition: background 0.22s, border-color 0.22s;\r\n }\r\n .contact-row:hover .contact-icon {\r\n background: rgba(255,255,255,0.14);\r\n border-color: rgba(255,255,255,0.28);\r\n }\r\n .contact-icon svg {\r\n width: 20px; height: 20px;\r\n fill: var(--text);\r\n }\r\n .contact-text { display: flex; flex-direction: column; gap: 1px; }\r\n .contact-lbl {\r\n font-size: 0.60rem;\r\n font-weight: 600;\r\n letter-spacing: 0.12em;\r\n text-transform: uppercase;\r\n color: var(--muted);\r\n }\r\n .contact-val {\r\n font-size: clamp(0.88rem, 1.4vw, 1.05rem);\r\n font-weight: 500;\r\n color: var(--text);\r\n text-decoration: none;\r\n transition: color 0.2s;\r\n }\r\n a.contact-val:hover { color: var(--accent); }\r\n\r\n \/* Mapka *\/\r\n .map-wrap {\r\n border-radius: 14px;\r\n overflow: hidden;\r\n border: 1px solid rgba(255,255,255,0.10);\r\n box-shadow: 0 12px 40px rgba(0,0,0,0.45);\r\n aspect-ratio: 16 \/ 7;\r\n position: relative;\r\n }\r\n .map-wrap iframe {\r\n width: 100%; height: 100%;\r\n border: none; display: block;\r\n filter: grayscale(30%) brightness(0.82) contrast(1.05);\r\n transition: filter 0.35s;\r\n }\r\n .map-wrap:hover iframe { filter: grayscale(0%) brightness(0.94); }\r\n .map-overlay {\r\n position: absolute; inset: 0; z-index: 1; cursor: pointer;\r\n }\r\n\r\n \/* \u2550\u2550 PRAWA KOLUMNA \u2013 FORMULARZ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .right-col {}\r\n\r\n .contact-card {\r\n background: rgba(255,255,255,0.032);\r\n border: 1px solid var(--border);\r\n border-radius: 20px;\r\n padding: clamp(24px, 3.5vw, 44px);\r\n }\r\n\r\n .contact-form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: clamp(14px, 2vw, 20px);\r\n }\r\n\r\n .form-row {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: clamp(10px, 1.5vw, 16px);\r\n }\r\n\r\n .form-group {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 6px;\r\n }\r\n\r\n label {\r\n font-size: 0.66rem;\r\n font-weight: 600;\r\n letter-spacing: 0.10em;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,0.52);\r\n transition: color 0.2s;\r\n }\r\n .form-group:focus-within > label { color: var(--accent); }\r\n\r\n .req { color: var(--accent); margin-left: 2px; }\r\n\r\n input, textarea {\r\n width: 100%;\r\n background: rgba(255,255,255,0.06) !important;\r\n border: 1px solid var(--border);\r\n border-radius: 10px;\r\n padding: 13px 15px;\r\n color: #ffffff !important;\r\n -webkit-text-fill-color: #ffffff !important;\r\n font-family: var(--font);\r\n font-size: 0.88rem;\r\n font-weight: 400;\r\n line-height: 1.5;\r\n outline: none;\r\n -webkit-appearance: none;\r\n -webkit-box-shadow: 0 0 0 1000px rgba(18,18,18,0.95) inset !important;\r\n transition: border-color 0.22s, box-shadow 0.22s;\r\n }\r\n input::placeholder, textarea::placeholder {\r\n color: rgba(255,255,255,0.28) !important;\r\n -webkit-text-fill-color: rgba(255,255,255,0.28) !important;\r\n }\r\n input:focus, textarea:focus {\r\n border-color: var(--border-focus);\r\n box-shadow: 0 0 0 3px rgba(74,222,128,0.08);\r\n -webkit-box-shadow: 0 0 0 1000px rgba(10,28,14,0.97) inset !important;\r\n }\r\n textarea {\r\n resize: vertical;\r\n min-height: 120px;\r\n }\r\n\r\n \/* \u2500\u2500 Checkboxy \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n .checks-group {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n }\r\n .form-check {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 11px;\r\n cursor: pointer;\r\n }\r\n .form-check input[type=\"checkbox\"] {\r\n position: absolute;\r\n opacity: 0; width: 0; height: 0;\r\n }\r\n .check-box {\r\n width: 19px; height: 19px; min-width: 19px;\r\n border-radius: 5px;\r\n border: 1.5px solid rgba(255,255,255,0.22);\r\n background: rgba(255,255,255,0.04);\r\n display: flex; align-items: center; justify-content: center;\r\n margin-top: 1px;\r\n transition: border-color 0.2s, background 0.2s;\r\n flex-shrink: 0;\r\n }\r\n .check-box svg {\r\n width: 10px; height: 10px;\r\n stroke: #060606;\r\n opacity: 0;\r\n transition: opacity 0.15s;\r\n }\r\n .form-check input[type=\"checkbox\"]:checked ~ .check-box {\r\n background: var(--accent);\r\n border-color: var(--accent);\r\n }\r\n .form-check input[type=\"checkbox\"]:checked ~ .check-box svg { opacity: 1; }\r\n .form-check input[type=\"checkbox\"]:focus ~ .check-box {\r\n box-shadow: 0 0 0 3px rgba(74,222,128,0.20);\r\n }\r\n .check-label {\r\n font-size: 0.70rem;\r\n font-weight: 300;\r\n color: rgba(255,255,255,0.50);\r\n line-height: 1.65;\r\n text-transform: none;\r\n letter-spacing: 0;\r\n cursor: pointer;\r\n user-select: none;\r\n }\r\n .check-label a {\r\n color: rgba(255,255,255,0.72);\r\n text-decoration: underline;\r\n text-underline-offset: 2px;\r\n transition: color 0.18s;\r\n }\r\n .check-label a:hover { color: var(--accent); }\r\n\r\n \/* \u2500\u2500 Przycisk \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n .btn-submit {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n width: 100%;\r\n padding: 15px 28px;\r\n background: var(--accent);\r\n border: none;\r\n border-radius: 10px;\r\n color: #060606;\r\n font-family: var(--font);\r\n font-size: 0.76rem;\r\n font-weight: 700;\r\n letter-spacing: 0.14em;\r\n text-transform: uppercase;\r\n cursor: pointer;\r\n transition: background 0.22s, transform 0.18s, box-shadow 0.22s;\r\n margin-top: 2px;\r\n }\r\n .btn-submit:hover {\r\n background: #6ee7a0;\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 28px rgba(74,222,128,0.28);\r\n }\r\n .btn-submit:active { transform: translateY(0); }\r\n .btn-submit svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform 0.2s; }\r\n .btn-submit:hover svg { transform: translateX(3px); }\r\n .btn-submit .spinner {\r\n display: none;\r\n width: 15px; height: 15px;\r\n border: 2px solid rgba(6,6,6,0.25);\r\n border-top-color: #060606;\r\n border-radius: 50%;\r\n animation: spin 0.7s linear infinite;\r\n }\r\n .btn-submit.loading .spinner { display: block; }\r\n .btn-submit.loading .btn-text,\r\n .btn-submit.loading .btn-arrow { display: none; }\r\n @keyframes spin { to { transform: rotate(360deg); } }\r\n\r\n \/* \u2500\u2500 Sukces \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n .form-success {\r\n display: none;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: 14px;\r\n padding: clamp(24px, 4vw, 44px) 0;\r\n }\r\n .form-success.visible { display: flex; }\r\n .success-icon {\r\n width: 52px; height: 52px;\r\n border-radius: 50%;\r\n background: var(--accent-dim);\r\n border: 1px solid rgba(74,222,128,0.28);\r\n display: flex; align-items: center; justify-content: center;\r\n }\r\n .success-icon svg { width: 24px; height: 24px; color: var(--accent); }\r\n .success-title { font-size: 1.2rem; font-weight: 700; }\r\n .success-desc {\r\n font-size: 0.86rem; font-weight: 300;\r\n color: var(--muted); line-height: 1.7;\r\n max-width: 320px;\r\n }\r\n\r\n \/* \u2500\u2500 B\u0142\u0105d \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n .form-error-msg {\r\n display: none;\r\n font-size: 0.70rem; color: #f87171;\r\n text-align: center; padding: 10px 14px;\r\n background: rgba(248,113,113,0.08);\r\n border: 1px solid rgba(248,113,113,0.20);\r\n border-radius: 8px;\r\n }\r\n .form-error-msg.visible { display: block; }\r\n\r\n \/* \u2550\u2550 STOPKA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .footer-bar {\r\n margin-top: clamp(32px, 5vw, 56px);\r\n padding: clamp(14px, 2.5vw, 22px) var(--px);\r\n border-top: 1px solid var(--border);\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 16px;\r\n flex-wrap: wrap;\r\n }\r\n .footer-copy {\r\n font-size: clamp(0.72rem, 1vw, 0.82rem);\r\n font-weight: 300;\r\n color: var(--muted);\r\n }\r\n .footer-policy {\r\n font-size: clamp(0.72rem, 1vw, 0.82rem);\r\n font-weight: 400;\r\n color: var(--muted);\r\n text-decoration: none;\r\n text-underline-offset: 3px;\r\n transition: color 0.20s;\r\n }\r\n .footer-policy:hover { color: var(--text); text-decoration: underline; }\r\n\r\n \/* \u2550\u2550 RESPONSYWNO\u015a\u0106 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n @media (max-width: 860px) {\r\n .contact-grid { grid-template-columns: 1fr; }\r\n .left-col { flex-direction: row; flex-wrap: wrap; gap: 16px; }\r\n .info-card { flex: 1; min-width: 260px; }\r\n .map-wrap { flex: 1; min-width: 260px; aspect-ratio: 16\/9; }\r\n }\r\n\r\n @media (max-width: 560px) {\r\n .contact-section { padding-left: 16px; padding-right: 16px; }\r\n .form-row { grid-template-columns: 1fr; }\r\n .contact-card { padding: 22px 18px; }\r\n .left-col { flex-direction: column; }\r\n .map-wrap { aspect-ratio: 4\/3; }\r\n .footer-bar { padding-left: 16px; padding-right: 16px; flex-direction: column; align-items: flex-start; gap: 8px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"contact-section\" id=\"kontakt\">\r\n\r\n \r\n <div class=\"contact-header\">\r\n <div class=\"contact-label-tag\">Napisz do nas<\/div>\r\n <h2 class=\"contact-title\">Napisz po <strong>szybk\u0105 wycen\u0119<\/strong><\/h2>\r\n <p class=\"contact-subtitle\">\r\n Opisz sw\u00f3j projekt \u2014 <span class=\"highlight\">zazwyczaj odpowiadamy w 30 minut!<\/span>\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"contact-grid\">\r\n\r\n \r\n <div class=\"left-col\">\r\n\r\n \r\n <div class=\"info-card\">\r\n\r\n <div class=\"contact-row\">\r\n <div class=\"contact-icon\">\r\n <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2\r\n 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1\r\n C8.6 21 3 15.4 3 8.5 3 7.9 3.4 7.5 4 7.5H7.5\r\n c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"contact-text\">\r\n <span class=\"contact-lbl\">Telefon<\/span>\r\n <a class=\"contact-val\" href=\"tel:+48733024929\">+48 733 024 929<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"contact-row\">\r\n <div class=\"contact-icon\">\r\n <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M20 4H4C2.9 4 2 4.9 2 6v12c0 1.1.9 2 2 2h16\r\n c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2z\r\n M20 8l-8 5-8-5V6l8 5 8-5v2z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"contact-text\">\r\n <span class=\"contact-lbl\">E-mail<\/span>\r\n <a class=\"contact-val\" href=\"mailto:kontakt@creativezen.pl\">kontakt@creativezen.pl<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"contact-row\">\r\n <div class=\"contact-icon\">\r\n <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M12 2 L2 7 L2 22 L9 22 L9 15 L15 15 L15 22 L22 22 L22 7 Z\"\/>\r\n <rect x=\"5\" y=\"10\" width=\"3\" height=\"3\" fill=\"#09090b\" rx=\"0.3\"\/>\r\n <rect x=\"11\" y=\"10\" width=\"3\" height=\"3\" fill=\"#09090b\" rx=\"0.3\"\/>\r\n <rect x=\"16\" y=\"10\" width=\"3\" height=\"3\" fill=\"#09090b\" rx=\"0.3\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"contact-text\">\r\n <span class=\"contact-lbl\">Numer NIP<\/span>\r\n <span class=\"contact-val\">5234060479<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"map-wrap\">\r\n <a class=\"map-overlay\"\r\n href=\"https:\/\/maps.google.com\/?q=Aleje+Jerozolimskie+109,+02-011+Warszawa\"\r\n target=\"_blank\" rel=\"noopener noreferrer\"\r\n aria-label=\"Otw\u00f3rz lokalizacj\u0119 Creative Zen w Google Maps\">\r\n <\/a>\r\n <iframe\r\n src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d2444.0!2d20.9884!3d52.2215!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x471eccce28f0ef7b%3A0xdc1d19cb57c65c38!2sAleje%20Jerozolimskie%20109%2C%2002-011%20Warszawa!5e0!3m2!1spl!2spl!4v1700000000000!5m2!1spl!2spl\"\r\n allowfullscreen=\"\" loading=\"lazy\"\r\n referrerpolicy=\"no-referrer-when-downgrade\"\r\n title=\"Lokalizacja Creative Zen\">\r\n <\/iframe>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"right-col\">\r\n <div class=\"contact-card\">\r\n\r\n \r\n <div class=\"form-success\" id=\"formSuccess\">\r\n <div class=\"success-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"\/>\r\n <\/svg>\r\n <\/div>\r\n <p class=\"success-title\">Wiadomo\u015b\u0107 wys\u0142ana!<\/p>\r\n <p class=\"success-desc\">Dzi\u0119kujemy za kontakt. Odezwiemy si\u0119 najszybciej jak to mo\u017cliwe \u2014 zazwyczaj w 30 minut!<\/p>\r\n <\/div>\r\n\r\n \r\n <form class=\"contact-form\" id=\"contactForm\"\r\n action=\"https:\/\/formspree.io\/f\/xbdwyzbe\"\r\n method=\"POST\">\r\n\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"name\">Imi\u0119 i nazwisko \/ Nazwa <span class=\"req\">*<\/span><\/label>\r\n <input type=\"text\" id=\"name\" name=\"Imi\u0119 i nazwisko \/ Nazwa\"\r\n placeholder=\"Jan Kowalski \/ Firma XYZ\" required autocomplete=\"name\"\/>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"phone\">Telefon<\/label>\r\n <input type=\"tel\" id=\"phone\" name=\"Telefon\"\r\n placeholder=\"+48 500 000 000\" autocomplete=\"tel\"\/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"email\">Adres e-mail <span class=\"req\">*<\/span><\/label>\r\n <input type=\"email\" id=\"email\" name=\"Email\"\r\n placeholder=\"jan@firma.pl\" required autocomplete=\"email\"\/>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"message\">Wiadomo\u015b\u0107 <span class=\"req\">*<\/span><\/label>\r\n <textarea id=\"message\" name=\"Wiadomo\u015b\u0107\"\r\n placeholder=\"Opisz sw\u00f3j projekt \u2014 czego dotyczy, jaki masz cel, termin realizacji...\"\r\n required><\/textarea>\r\n <\/div>\r\n\r\n <div class=\"checks-group\">\r\n\r\n <label class=\"form-check\">\r\n <input type=\"checkbox\" name=\"Polityka prywatno\u015bci\"\r\n value=\"Tak, zapozna\u0142em\/am si\u0119 z polityk\u0105 prywatno\u015bci\" required\/>\r\n <span class=\"check-box\">\r\n <svg viewBox=\"0 0 12 12\" fill=\"none\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"2 6 5 9 10 3\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"check-label\">\r\n Zapozna\u0142am\/em si\u0119 z <a href=\"https:\/\/creativezen.pl\/polityka-prywatnosci\/\"\r\n target=\"_blank\" rel=\"noopener noreferrer\">\u201epolityk\u0105 prywatno\u015bci\"<\/a>. <span class=\"req\">*<\/span>\r\n <\/span>\r\n <\/label>\r\n\r\n <label class=\"form-check\">\r\n <input type=\"checkbox\" name=\"Zgoda marketingowa\"\r\n value=\"Tak, zgadzam si\u0119 na otrzymywanie informacji handlowych\"\/>\r\n <span class=\"check-box\">\r\n <svg viewBox=\"0 0 12 12\" fill=\"none\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"2 6 5 9 10 3\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"check-label\">\r\n Zgadzam si\u0119 na otrzymywanie na podany przeze mnie adres e-mail informacji handlowych.\r\n <\/span>\r\n <\/label>\r\n\r\n <\/div>\r\n\r\n <div class=\"form-error-msg\" id=\"formError\">\r\n Wysy\u0142ka nie powiod\u0142a si\u0119. Spr\u00f3buj ponownie lub napisz bezpo\u015brednio na adres e-mail.\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"btn-submit\" id=\"submitBtn\">\r\n <span class=\"btn-text\">Wy\u015blij wiadomo\u015b\u0107<\/span>\r\n <svg class=\"btn-arrow\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"1.8\" stroke-linecap=\"round\">\r\n <path d=\"M3 8h10M9 4l4 4-4 4\"\/>\r\n <\/svg>\r\n <span class=\"spinner\"><\/span>\r\n <\/button>\r\n\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<div class=\"footer-bar\">\r\n <span class=\"footer-copy\">\u00a9 2026 Creative Zen. Wszelkie prawa zastrze\u017cone.<\/span>\r\n <a class=\"footer-policy\"\r\n href=\"https:\/\/creativezen.pl\/polityka-prywatnosci\/\"\r\n target=\"_blank\" rel=\"noopener noreferrer\">\r\n Polityka prywatno\u015bci\r\n <\/a>\r\n<\/div>\r\n\r\n<script>\r\n var form = document.getElementById('contactForm');\r\n var submitBtn = document.getElementById('submitBtn');\r\n var formSuccess = document.getElementById('formSuccess');\r\n var formError = document.getElementById('formError');\r\n\r\n form.addEventListener('submit', async function(e) {\r\n e.preventDefault();\r\n formError.classList.remove('visible');\r\n submitBtn.classList.add('loading');\r\n submitBtn.disabled = true;\r\n\r\n try {\r\n var response = await fetch(form.action, {\r\n method: 'POST',\r\n body: new FormData(form),\r\n headers: { 'Accept': 'application\/json' }\r\n });\r\n if (response.ok) {\r\n form.style.display = 'none';\r\n formSuccess.classList.add('visible');\r\n \/\/ Zg\u0142o\u015b konwersj\u0119 do Google Ads\r\n gtag_report_conversion();\r\n } else {\r\n throw new Error('error');\r\n }\r\n } catch (err) {\r\n formError.classList.add('visible');\r\n submitBtn.classList.remove('loading');\r\n submitBtn.disabled = false;\r\n }\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\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>Creative Zen \u2013 Nawigacja CREATIVE ZEN Baza Wiedzy O Nas Us\u0142ugi Blog Kontakt Creative Zen \u2013 Hero Animacja Techniczna Twoja przegl\u0105darka nie obs\u0142uguje wideo HTML5. Maszyny \u2022 Urz\u0105dzenia \u2022 Linie produkcyjne \u2022 Instrukcje monta\u017cu AnimacjaTechniczna Poka\u017c jak dzia\u0142a Tw\u00f3j produkt \u2014 zanim trafi do klienta. Precyzyjne animacje 3D maszyn, urz\u0105dze\u0144 i linii produkcyjnych. Napisz do […]<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","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":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","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":"set","ast-page-background-enabled":"default","ast-page-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-6895","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Animacja techniczna -<\/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:\/\/creativezen.pl\/en\/animacja-techniczna\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animacja techniczna -\" \/>\n<meta property=\"og:description\" content=\"Creative Zen \u2013 Nawigacja CREATIVE ZEN Baza Wiedzy O Nas Us\u0142ugi Blog Kontakt Creative Zen \u2013 Hero Animacja Techniczna Twoja przegl\u0105darka nie obs\u0142uguje wideo HTML5. Maszyny \u2022 Urz\u0105dzenia \u2022 Linie produkcyjne \u2022 Instrukcje monta\u017cu AnimacjaTechniczna Poka\u017c jak dzia\u0142a Tw\u00f3j produkt \u2014 zanim trafi do klienta. Precyzyjne animacje 3D maszyn, urz\u0105dze\u0144 i linii produkcyjnych. Napisz do […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativezen.pl\/en\/animacja-techniczna\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-14T19:31:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/OCHNIK-1.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativezen.pl\\\/animacja-techniczna\\\/\",\"url\":\"https:\\\/\\\/creativezen.pl\\\/animacja-techniczna\\\/\",\"name\":\"Animacja techniczna -\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/creativezen.pl\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/creativezen.pl\\\/animacja-techniczna\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/creativezen.pl\\\/animacja-techniczna\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/creativezen.pl\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/OCHNIK-1.webp\",\"datePublished\":\"2026-05-05T00:21:14+00:00\",\"dateModified\":\"2026-10-14T19:31:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativezen.pl\\\/animacja-techniczna\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativezen.pl\\\/animacja-techniczna\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/creativezen.pl\\\/animacja-techniczna\\\/#primaryimage\",\"url\":\"https:\\\/\\\/creativezen.pl\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/OCHNIK-1.webp\",\"contentUrl\":\"https:\\\/\\\/creativezen.pl\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/OCHNIK-1.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativezen.pl\\\/animacja-techniczna\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\\\/\\\/creativezen.pl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animacja techniczna\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/creativezen.pl\\\/#website\",\"url\":\"https:\\\/\\\/creativezen.pl\\\/\",\"name\":\"CreativeZen\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/creativezen.pl\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/creativezen.pl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/creativezen.pl\\\/#organization\",\"name\":\"CreativeZen\",\"url\":\"https:\\\/\\\/creativezen.pl\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/creativezen.pl\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/creativezen.pl\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/Creative_zen_4k_transparent_logo_compressed_06-scaled.webp\",\"contentUrl\":\"https:\\\/\\\/creativezen.pl\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/Creative_zen_4k_transparent_logo_compressed_06-scaled.webp\",\"width\":2560,\"height\":421,\"caption\":\"CreativeZen\"},\"image\":{\"@id\":\"https:\\\/\\\/creativezen.pl\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.youtube.com\\\/@CreativeZen-PL\",\"https:\\\/\\\/www.instagram.com\\\/creativezen.pl\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@creativezen.pl\"]}]}<\/script>\n","yoast_head_json":{"title":"Animacja techniczna -","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:\/\/creativezen.pl\/en\/animacja-techniczna\/","og_locale":"en_GB","og_type":"article","og_title":"Animacja techniczna -","og_description":"Creative Zen \u2013 Nawigacja CREATIVE ZEN Baza Wiedzy O Nas Us\u0142ugi Blog Kontakt Creative Zen \u2013 Hero Animacja Techniczna Twoja przegl\u0105darka nie obs\u0142uguje wideo HTML5. Maszyny \u2022 Urz\u0105dzenia \u2022 Linie produkcyjne \u2022 Instrukcje monta\u017cu AnimacjaTechniczna Poka\u017c jak dzia\u0142a Tw\u00f3j produkt \u2014 zanim trafi do klienta. Precyzyjne animacje 3D maszyn, urz\u0105dze\u0144 i linii produkcyjnych. Napisz do […]","og_url":"https:\/\/creativezen.pl\/en\/animacja-techniczna\/","article_modified_time":"2026-10-14T19:31:17+00:00","og_image":[{"url":"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/OCHNIK-1.webp","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Estimated reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativezen.pl\/animacja-techniczna\/","url":"https:\/\/creativezen.pl\/animacja-techniczna\/","name":"Animacja techniczna -","isPartOf":{"@id":"https:\/\/creativezen.pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativezen.pl\/animacja-techniczna\/#primaryimage"},"image":{"@id":"https:\/\/creativezen.pl\/animacja-techniczna\/#primaryimage"},"thumbnailUrl":"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/OCHNIK-1.webp","datePublished":"2026-05-05T00:21:14+00:00","dateModified":"2026-10-14T19:31:17+00:00","breadcrumb":{"@id":"https:\/\/creativezen.pl\/animacja-techniczna\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativezen.pl\/animacja-techniczna\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/creativezen.pl\/animacja-techniczna\/#primaryimage","url":"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/OCHNIK-1.webp","contentUrl":"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/OCHNIK-1.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/creativezen.pl\/animacja-techniczna\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/creativezen.pl\/"},{"@type":"ListItem","position":2,"name":"Animacja techniczna"}]},{"@type":"WebSite","@id":"https:\/\/creativezen.pl\/#website","url":"https:\/\/creativezen.pl\/","name":"CreativeZen","description":"","publisher":{"@id":"https:\/\/creativezen.pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creativezen.pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/creativezen.pl\/#organization","name":"CreativeZen","url":"https:\/\/creativezen.pl\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/creativezen.pl\/#\/schema\/logo\/image\/","url":"https:\/\/creativezen.pl\/wp-content\/uploads\/2024\/09\/Creative_zen_4k_transparent_logo_compressed_06-scaled.webp","contentUrl":"https:\/\/creativezen.pl\/wp-content\/uploads\/2024\/09\/Creative_zen_4k_transparent_logo_compressed_06-scaled.webp","width":2560,"height":421,"caption":"CreativeZen"},"image":{"@id":"https:\/\/creativezen.pl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.youtube.com\/@CreativeZen-PL","https:\/\/www.instagram.com\/creativezen.pl\/","https:\/\/www.tiktok.com\/@creativezen.pl"]}]}},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"oo2vzexdlxrd","author_link":"https:\/\/creativezen.pl\/en\/author\/oo2vzexdlxrd\/"},"uagb_comment_info":0,"uagb_excerpt":"Creative Zen \u2013 Nawigacja CREATIVE ZEN Baza Wiedzy O Nas Us\u0142ugi Blog Kontakt Creative Zen \u2013 Hero Animacja Techniczna Twoja przegl\u0105darka nie obs\u0142uguje wideo HTML5. Maszyny \u2022 Urz\u0105dzenia \u2022 Linie produkcyjne \u2022 Instrukcje monta\u017cu AnimacjaTechniczna Poka\u017c jak dzia\u0142a Tw\u00f3j produkt \u2014 zanim trafi do klienta. Precyzyjne animacje 3D maszyn, urz\u0105dze\u0144 i linii produkcyjnych. Napisz do…","_links":{"self":[{"href":"https:\/\/creativezen.pl\/en\/wp-json\/wp\/v2\/pages\/6895","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativezen.pl\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/creativezen.pl\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/creativezen.pl\/en\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/creativezen.pl\/en\/wp-json\/wp\/v2\/comments?post=6895"}],"version-history":[{"count":76,"href":"https:\/\/creativezen.pl\/en\/wp-json\/wp\/v2\/pages\/6895\/revisions"}],"predecessor-version":[{"id":7376,"href":"https:\/\/creativezen.pl\/en\/wp-json\/wp\/v2\/pages\/6895\/revisions\/7376"}],"wp:attachment":[{"href":"https:\/\/creativezen.pl\/en\/wp-json\/wp\/v2\/media?parent=6895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Creative Zen \u2013 Nawigacja<\/title>\r\n\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin\/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;700;800&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n ZMIENNE \u2013 sp\u00f3jne z reszt\u0105 segment\u00f3w\r\n Zmie\u0144 --accent aby zmieni\u0107 kolor akcentu\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n :root {\r\n --accent: #4ade80; \/* kolor zielonego akcentu *\/\r\n --text: #ffffff; \/* kolor tekstu *\/\r\n --nav-h: 56px; \/* wysoko\u015b\u0107 navbara \u2013 zmie\u0144 je\u015bli potrzeba *\/\r\n --px: clamp(24px, 6vw, 80px); \/* padding poziomy *\/\r\n --font: 'Inter', sans-serif;\r\n }\r\n\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n html { font-size: 16px; }\r\n body { font-family: var(--font); color: var(--text); background: transparent; }\r\n\r\n \/* \u2550\u2550 NAWIGACJA \u2013 STICKY \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n Przyklejona do g\u00f3rnej kraw\u0119dzi ekranu podczas scrollowania\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n nav {\r\n position: fixed;\r\n left: 0;\r\n right: 0;\r\n \/* \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n \u2551 MARGINES G\u00d3RNY NAVBARA (desktop) \u2551\r\n \u2551 Zmie\u0144 warto\u015b\u0107 poni\u017cej aby przesun\u0105\u0107 navbar w g\u00f3r\u0119 \u2551\r\n \u2551 lub w d\u00f3\u0142 od kraw\u0119dzi ekranu \u2551\r\n \u2551 0px = przy samej g\u00f3rze ekranu \u2551\r\n \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d *\/\r\n top: 0px; \/* \u2190 ZMIE\u0143 TEN MARGINES G\u00d3RNY *\/\r\n z-index: 200;\r\n height: var(--nav-h);\r\n \/* Glassmorphism \u2013 ciemne t\u0142o z rozmyciem *\/\r\n background: rgba(14,14,14,0.85);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n display: flex;\r\n align-items: center; \/* wy\u015brodkowanie pionowe *\/\r\n justify-content: space-between; \/* logo lewo, linki prawo *\/\r\n padding: 0 var(--px);\r\n border-bottom: 1px solid rgba(255,255,255,0.06);\r\n }\r\n\r\n \/* \u2550\u2550 LOGO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n Zmie\u0144 tekst \"CREATIVE ZEN\" je\u015bli potrzeba\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .logo {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 0.8rem;\r\n font-weight: 600;\r\n letter-spacing: 0.08em;\r\n color: var(--text);\r\n text-decoration: none;\r\n }\r\n\r\n \/* Obracaj\u0105ce si\u0119 zielone k\u00f3\u0142ko przy logo *\/\r\n .logo-ring {\r\n position: relative;\r\n width: 16px; height: 16px;\r\n flex-shrink: 0;\r\n }\r\n \/* Zewn\u0119trzny pier\u015bcie\u0144 \u2013 animacja obrotu *\/\r\n .logo-ring::before {\r\n content: '';\r\n position: absolute; inset: 0;\r\n border-radius: 50%;\r\n border: 2px solid var(--accent);\r\n border-top-color: transparent; \/* przerywa \u2192 efekt wirowania *\/\r\n animation: spinRing 3s linear infinite;\r\n }\r\n \/* Wewn\u0119trzna plamka *\/\r\n .logo-ring::after {\r\n content: '';\r\n position: absolute;\r\n top: 50%; left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 5px; height: 5px;\r\n border-radius: 50%;\r\n background: var(--accent);\r\n }\r\n @keyframes spinRing { to { transform: rotate(360deg); } }\r\n\r\n \/* \u2550\u2550 LINKI NAWIGACYJNE (DESKTOP) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n Zmie\u0144 href i etykiety w <ul class=\"nav-links\"> w HTML\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .nav-links {\r\n display: flex;\r\n gap: clamp(16px, 2.5vw, 36px);\r\n list-style: none;\r\n }\r\n .nav-links a {\r\n \/* ROZMIAR LITER W MENU \u2013 zmie\u0144 tutaj *\/\r\n font-size: 0.80rem; \/* \u2190 by\u0142o 0.67rem *\/\r\n font-weight: 600; \/* \u2190 grubo\u015b\u0107: 400=normalna, 600=pogrubiona *\/\r\n letter-spacing: 0.12em;\r\n text-transform: uppercase;\r\n \/* KOLOR LINK\u00d3W \u2013 1.00 = pe\u0142na biel, 0.68 = szary *\/\r\n color: rgba(255,255,255,1.00); \/* \u2190 ZMIE\u0143 KOLOR LINK\u00d3W *\/\r\n text-decoration: none;\r\n transition: color 0.18s;\r\n }\r\n .nav-links a:hover { color: var(--text); }\r\n\r\n \/* \u2550\u2550 HAMBURGER \u2013 widoczny tylko na mobile \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .hamburger {\r\n display: none; \/* ukryty na desktop *\/\r\n flex-direction: column;\r\n gap: 5px;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 4px;\r\n }\r\n .hamburger span {\r\n display: block;\r\n width: 22px; height: 2px;\r\n background: var(--text);\r\n border-radius: 1px;\r\n transition: all 0.25s;\r\n }\r\n \/* Animacja hamburger \u2192 X *\/\r\n .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }\r\n .hamburger.active span:nth-child(2) { opacity: 0; }\r\n .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }\r\n\r\n \/* \u2550\u2550 MOBILNE MENU ROZWIJANE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n Pokazuje si\u0119 gdy hamburger aktywny (klasa .open dodana przez JS)\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .nav-links.open {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 22px;\r\n position: fixed;\r\n top: var(--nav-h); left: 0; right: 0;\r\n background: rgba(10,10,10,0.97);\r\n padding: 28px var(--px);\r\n border-top: 1px solid rgba(255,255,255,0.07);\r\n z-index: 199;\r\n }\r\n\r\n \/* \u2550\u2550 RESPONSYWNO\u015a\u0106 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n @media (max-width: 860px) {\r\n \/* Tablet\/telefon: chowamy linki, pokazujemy hamburger *\/\r\n .nav-links { display: none; }\r\n .hamburger {\r\n display: flex;\r\n }\r\n\r\n \/* Na mobile navbar bez marginesu \u2013 przy samej g\u00f3rze *\/\r\n nav { top: 0; } \/* \u2190 MARGINES G\u00d3RNY NA MOBILE (0 = brak) *\/\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<nav>\r\n\r\n \r\n <a class=\"logo\" href=\"https:\/\/creativezen.pl\">\r\n CREATIVE ZEN\r\n <span class=\"logo-ring\" aria-hidden=\"true\"><\/span>\r\n <\/a>\r\n\r\n \r\n <ul class=\"nav-links\" id=\"navLinks\">\r\n <li><a href=\"https:\/\/creativezen.pl\/Baza-wiedzy\/\">Baza Wiedzy<\/a><\/li>\r\n <li><a href=\"https:\/\/creativezen.pl\/o-nas\/\">O Nas<\/a><\/li>\r\n <li><a href=\"https:\/\/creativezen.pl\/portfolio\/\">Us\u0142ugi<\/a><\/li>\r\n <li><a href=\"https:\/\/creativezen.pl\/blog\/\">Blog<\/a><\/li>\r\n <li><a href=\"https:\/\/creativezen.pl\/kontakt\/\">Kontakt<\/a><\/li>\r\n <\/ul>\r\n\r\n \r\n <button class=\"hamburger\" id=\"hamburger\"\r\n aria-label=\"Otw\u00f3rz menu\"\r\n aria-expanded=\"false\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n\r\n<\/nav>\r\n\r\n\r\n\r\n<script>\r\n var hamburger = document.getElementById('hamburger');\r\n var navLinks = document.getElementById('navLinks');\r\n\r\n \/* Otwiera\/zamyka mobilne menu *\/\r\n hamburger.addEventListener('click', function() {\r\n var isOpen = navLinks.classList.toggle('open');\r\n hamburger.classList.toggle('active', isOpen);\r\n hamburger.setAttribute('aria-expanded', isOpen);\r\n });\r\n\r\n \/* Zamknij menu po klikni\u0119ciu w link *\/\r\n navLinks.querySelectorAll('a').forEach(function(a) {\r\n a.addEventListener('click', function() {\r\n navLinks.classList.remove('open');\r\n hamburger.classList.remove('active');\r\n hamburger.setAttribute('aria-expanded', 'false');\r\n });\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-17715881 e-con-full e-flex e-con e-parent\" data-id=\"17715881\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-53fa9fe5 elementor-widget elementor-widget-html\" data-id=\"53fa9fe5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pl\">\r\n<head>\r\n <meta charset=\"UTF-8\"\/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Creative Zen \u2013 Hero Animacja Techniczna<\/title>\r\n\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin\/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;700;800&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n\r\n :root {\r\n --accent: #4ade80;\r\n --text: #ffffff;\r\n --nav-h: 56px;\r\n --px: clamp(24px, 6vw, 80px);\r\n --font: 'Inter', sans-serif;\r\n }\r\n\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n html { font-size: 16px; scroll-behavior: smooth; }\r\n body { font-family: var(--font); color: var(--text); background: transparent; overflow-x: hidden; }\r\n\r\n \/* \u2550\u2550 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .hero {\r\n position: relative;\r\n width: 100%;\r\n aspect-ratio: 21 \/ 9;\r\n min-height: 420px;\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n \/* \u2550\u2550 WIDEO MP4 W TLE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .hero-video {\r\n position: absolute;\r\n inset: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n object-position: center;\r\n pointer-events: none;\r\n }\r\n\r\n \/* \u2550\u2550 NAK\u0141ADKA GRADIENTOWA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .hero-overlay {\r\n position: absolute; inset: 0;\r\n z-index: 2;\r\n background:\r\n linear-gradient(to right,\r\n rgba(6,6,6,0.90) 0%,\r\n rgba(6,6,6,0.62) 38%,\r\n rgba(6,6,6,0.12) 100%),\r\n linear-gradient(to bottom,\r\n rgba(6,6,6,0.40) 0%,\r\n transparent 30%,\r\n rgba(6,6,6,0.60) 100%);\r\n }\r\n\r\n \/* \u2550\u2550 TRE\u015a\u0106 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .hero-content {\r\n position: relative;\r\n z-index: 3;\r\n padding: 0 var(--px);\r\n padding-top: var(--nav-h);\r\n max-width: 720px;\r\n }\r\n\r\n .hero-eyebrow {\r\n font-size: 0.75rem;\r\n font-weight: 400;\r\n letter-spacing: 0.22em;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,0.55);\r\n margin-bottom: 16px;\r\n animation: fadeUp 0.8s ease 0.1s both;\r\n }\r\n\r\n .hero-content h1 {\r\n font-size: clamp(4rem, 9.5vw, 8rem);\r\n font-weight: 800;\r\n line-height: 0.93;\r\n letter-spacing: -0.025em;\r\n margin-bottom: 24px;\r\n animation: fadeUp 0.8s ease 0.25s both;\r\n }\r\n\r\n .hero-desc {\r\n font-size: clamp(1rem, 1.7vw, 1.2rem);\r\n font-weight: 300;\r\n line-height: 1.68;\r\n color: rgba(255,255,255,0.80);\r\n margin-bottom: 36px;\r\n animation: fadeUp 0.8s ease 0.4s both;\r\n }\r\n\r\n .btn-outline {\r\n display: inline-block;\r\n padding: 14px 32px;\r\n border: 1.5px solid rgba(255,255,255,0.55);\r\n color: var(--text);\r\n font-family: var(--font);\r\n font-size: 0.72rem;\r\n font-weight: 600;\r\n letter-spacing: 0.18em;\r\n text-transform: uppercase;\r\n text-decoration: none;\r\n background: none;\r\n cursor: pointer;\r\n transition: background 0.2s, border-color 0.2s;\r\n animation: fadeUp 0.8s ease 0.55s both;\r\n }\r\n .btn-outline:hover {\r\n background: rgba(255,255,255,0.08);\r\n border-color: var(--text);\r\n }\r\n\r\n @keyframes fadeUp {\r\n from { opacity: 0; transform: translateY(18px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n \/* \u2550\u2550 TABLET \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n @media (max-width: 860px) {\r\n .hero { aspect-ratio: 16 \/ 9; min-height: 320px; }\r\n }\r\n\r\n \/* \u2550\u2550 MOBILE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n @media (max-width: 600px) {\r\n .hero {\r\n aspect-ratio: unset; min-height: unset;\r\n flex-direction: column; align-items: stretch;\r\n padding-top: var(--nav-h);\r\n }\r\n .hero-video {\r\n position: relative;\r\n inset: unset;\r\n width: 100%;\r\n height: auto;\r\n aspect-ratio: 16 \/ 9;\r\n object-position: center;\r\n flex-shrink: 0;\r\n }\r\n .hero-overlay {\r\n position: absolute; top: auto; bottom: 0;\r\n left: 0; right: 0; height: 50px; inset: unset;\r\n background: linear-gradient(to bottom, transparent, #060606);\r\n }\r\n .hero-content {\r\n position: static;\r\n padding: 26px 22px 44px;\r\n max-width: 100%;\r\n background: #060606;\r\n }\r\n .hero-eyebrow { font-size: 0.60rem; letter-spacing: 0.18em; margin-bottom: 12px; }\r\n .hero-content h1 { font-size: clamp(2.6rem, 13vw, 3.6rem); line-height: 0.95; margin-bottom: 16px; }\r\n .hero-desc { font-size: 0.92rem; margin-bottom: 26px; }\r\n .btn-outline { display: block; width: 100%; text-align: center; padding: 16px 20px; }\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"hero\">\r\n\r\n \r\n <video\r\n class=\"hero-video\"\r\n autoplay\r\n muted\r\n loop\r\n playsinline\r\n preload=\"auto\"\r\n >\r\n <source\r\n src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/05\/najnowsze-size.mp4\"\r\n type=\"video\/mp4\"\r\n \/>\r\n Twoja przegl\u0105darka nie obs\u0142uguje wideo HTML5.\r\n <\/video>\r\n\r\n \r\n <div class=\"hero-overlay\"><\/div>\r\n\r\n \r\n <div class=\"hero-content\">\r\n\r\n <p class=\"hero-eyebrow\">\r\n Maszyny \u2022 Urz\u0105dzenia \u2022 Linie produkcyjne \u2022 Instrukcje monta\u017cu\r\n <\/p>\r\n\r\n <h1>Animacja<br>Techniczna<\/h1>\r\n\r\n <p class=\"hero-desc\">\r\n Poka\u017c jak dzia\u0142a Tw\u00f3j produkt \u2014 zanim trafi do klienta.<br>\r\n Precyzyjne animacje 3D maszyn, urz\u0105dze\u0144 i linii produkcyjnych.\r\n <\/p>\r\n\r\n <a href=\"#kontakt\" class=\"btn-outline\">Napisz do nas<\/a>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-61d2ccf elementor-widget__width-inherit elementor-widget-tablet__width-inherit elementor-widget-mobile__width-inherit elementor-widget elementor-widget-elementskit-social-media\" data-id=\"61d2ccf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementskit-social-media.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" >\t\t\t <ul class=\"ekit_social_media\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"elementor-repeater-item-da8f4de\">\n\t\t\t\t\t <a\n\t\t\t\t\t\thref=\"https:\/\/www.facebook.com\/profile.php?viewas=100000686899395&id=61566403116140\" target=\"_blank\" aria-label=\"Facebook\" class=\"f\" >\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fab-facebook-f\" viewBox=\"0 0 320 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z\"><\/path><\/svg>\n <\/a>\n <\/li>\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"elementor-repeater-item-c8596be\">\n\t\t\t\t\t <a\n\t\t\t\t\t\thref=\"https:\/\/www.instagram.com\/creativezen.pl\/\" target=\"_blank\" aria-label=\"Instagram\" class=\"instagram\" >\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fab-instagram\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z\"><\/path><\/svg>\n <\/a>\n <\/li>\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"elementor-repeater-item-641feab\">\n\t\t\t\t\t <a\n\t\t\t\t\t\thref=\"https:\/\/www.tiktok.com\/@creativezen.pl\" target=\"_blank\" aria-label=\"TikTok\" class=\"tiktok\" >\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fab-tiktok\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z\"><\/path><\/svg>\n <\/a>\n <\/li>\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"elementor-repeater-item-7f6a243\">\n\t\t\t\t\t <a\n\t\t\t\t\t\thref=\"https:\/\/www.youtube.com\/@CreativeZen_Polska\" target=\"_blank\" aria-label=\"YouTube\" class=\"youtube\" >\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fab-youtube\" viewBox=\"0 0 576 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z\"><\/path><\/svg>\n <\/a>\n <\/li>\n \t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"elementor-repeater-item-35f84a2\">\n\t\t\t\t\t <a\n\t\t\t\t\t\thref=\"https:\/\/www.linkedin.com\/company\/creativezen\/\" target=\"_blank\" aria-label=\"Linkedin\" class=\"linkedin\" >\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fab-linkedin\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z\"><\/path><\/svg>\n <\/a>\n <\/li>\n \t\t\t\t\t\t\t<\/ul>\n\t\t<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6a5014b1 e-con-full e-flex e-con e-parent\" data-id=\"6a5014b1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4886017d elementor-widget elementor-widget-html\" data-id=\"4886017d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!DOCTYPE html>\r\n<html lang=\"pl\">\r\n<head>\r\n <meta charset=\"UTF-8\"\/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Creative Zen \u2013 Animacje Techniczne 3D \u2013 Us\u0142ugi i cennik<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin\/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;700;800&display=swap\" rel=\"stylesheet\"\/>\r\n <style>\r\n :root {\r\n --accent: #4ade80;\r\n --text: #ffffff;\r\n --muted: rgba(255,255,255,0.52);\r\n --border: rgba(255,255,255,0.13);\r\n --acc-bg: rgba(255,255,255,0.025);\r\n --font: 'Inter', sans-serif;\r\n --px: clamp(24px, 6vw, 80px);\r\n }\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n html { font-size: 16px; }\r\n body { font-family: var(--font); color: var(--text); background: transparent; overflow-x: hidden; }\r\n\r\n .section-main {\r\n position: relative;\r\n padding: clamp(60px,9vw,110px) var(--px);\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: clamp(40px,6vw,100px);\r\n align-items: start;\r\n }\r\n\r\n .deco-tech {\r\n position: absolute; left: -20px; top: 50%;\r\n transform: translateY(-55%);\r\n opacity: 0.055; pointer-events: none;\r\n }\r\n .deco-circuit {\r\n position: absolute; bottom: 0; right: 0;\r\n opacity: 0.07; pointer-events: none;\r\n }\r\n\r\n \/* LEWA KOLUMNA *\/\r\n .col-services h2 { font-size: clamp(2rem,4.5vw,3.4rem); font-weight: 300; letter-spacing: -.015em; margin-bottom: clamp(32px,5vw,52px); line-height: 1.1; }\r\n .services { display: flex; flex-direction: column; gap: 28px; }\r\n .service { display: flex; align-items: flex-start; gap: 16px; }\r\n .service-icon { flex-shrink: 0; width: 36px; height: 36px; opacity: .70; margin-top: 1px; }\r\n .service-text h3 { font-size: .88rem; font-weight: 600; margin-bottom: 5px; color: var(--text); }\r\n .service-text p { font-size: .79rem; font-weight: 300; line-height: 1.65; color: var(--muted); }\r\n\r\n \/* PRAWA KOLUMNA \u2013 CENNIK *\/\r\n .col-pricing h2 { font-size: clamp(2rem,4.5vw,3.4rem); font-weight: 300; letter-spacing: -.015em; margin-bottom: 10px; line-height: 1.1; }\r\n\r\n .pricing-disclaimer {\r\n font-size: .75rem;\r\n font-weight: 300;\r\n line-height: 1.6;\r\n color: rgba(255,255,255,0.42);\r\n margin-bottom: clamp(18px,3vw,28px);\r\n padding: 10px 14px;\r\n border-left: 2px solid rgba(74,222,128,0.35);\r\n background: rgba(74,222,128,0.04);\r\n border-radius: 0 4px 4px 0;\r\n }\r\n\r\n .accordion { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }\r\n .acc-item { border-bottom: 1px solid var(--border); }\r\n .acc-item:last-child { border-bottom: none; }\r\n .acc-header { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; background: var(--acc-bg); color: var(--text); font-family: var(--font); font-size: .86rem; font-weight: 400; cursor: pointer; border: none; text-align: left; transition: background .18s; }\r\n .acc-header:hover { background: rgba(255,255,255,.05); }\r\n .acc-chev { flex-shrink: 0; width: 24px; height: 24px; border: 1.5px solid rgba(255,255,255,.30); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform .28s ease, border-color .2s; }\r\n .acc-item.open .acc-chev { transform: rotate(180deg); border-color: rgba(255,255,255,.65); }\r\n .acc-body { max-height: 0; overflow: hidden; transition: max-height .32s ease; }\r\n .acc-body-inner { padding: 14px 20px 20px; border-top: 1px solid rgba(255,255,255,.07); }\r\n\r\n .price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }\r\n .price-base { font-size: .72rem; font-weight: 400; color: rgba(255,255,255,.38); text-decoration: line-through; white-space: nowrap; }\r\n .price-after-label { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(74,222,128,0.75); white-space: nowrap; }\r\n .price-after-value { font-size: 1.05rem; font-weight: 700; color: var(--accent); white-space: nowrap; }\r\n .price-tag { font-size: 1.1rem; font-weight: 700; color: rgba(255,255,255,0.55); }\r\n\r\n .acc-body-inner p { font-size: .79rem; font-weight: 300; line-height: 1.65; color: var(--muted); }\r\n .price-note { display: inline-block; margin-top: 10px; font-size: .66rem; letter-spacing: .10em; text-transform: uppercase; color: rgba(255,255,255,.28); }\r\n\r\n @media (max-width: 860px) { .section-main { grid-template-columns: 1fr; gap: 52px; } }\r\n @media (max-width: 480px) { .section-main { padding-left: 18px; padding-right: 18px; } .acc-header { padding: 14px 16px; font-size: .82rem; } .acc-body-inner { padding: 12px 16px 16px; } }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"section-main\">\r\n\r\n \r\n <svg class=\"deco-tech\" width=\"260\" height=\"460\" viewBox=\"0 0 260 460\" fill=\"none\" aria-hidden=\"true\">\r\n <circle cx=\"130\" cy=\"60\" r=\"9\" stroke=\"white\" stroke-width=\"1.4\"\/>\r\n <circle cx=\"60\" cy=\"150\" r=\"9\" stroke=\"white\" stroke-width=\"1.4\"\/>\r\n <circle cx=\"200\" cy=\"150\" r=\"9\" stroke=\"white\" stroke-width=\"1.4\"\/>\r\n <circle cx=\"60\" cy=\"270\" r=\"9\" stroke=\"white\" stroke-width=\"1.4\"\/>\r\n <circle cx=\"200\" cy=\"270\" r=\"9\" stroke=\"white\" stroke-width=\"1.4\"\/>\r\n <circle cx=\"130\" cy=\"360\" r=\"9\" stroke=\"white\" stroke-width=\"1.4\"\/>\r\n <line x1=\"130\" y1=\"69\" x2=\"67\" y2=\"142\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <line x1=\"130\" y1=\"69\" x2=\"193\" y2=\"142\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <line x1=\"69\" y1=\"159\" x2=\"69\" y2=\"261\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <line x1=\"191\" y1=\"159\" x2=\"191\" y2=\"261\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <line x1=\"68\" y1=\"150\" x2=\"192\" y2=\"150\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <line x1=\"68\" y1=\"270\" x2=\"192\" y2=\"270\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <line x1=\"67\" y1=\"278\" x2=\"123\" y2=\"352\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <line x1=\"193\" y1=\"278\" x2=\"137\" y2=\"352\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <\/svg>\r\n\r\n \r\n <svg class=\"deco-circuit\" width=\"300\" height=\"170\" viewBox=\"0 0 300 170\" fill=\"none\" aria-hidden=\"true\">\r\n <circle cx=\"22\" cy=\"85\" r=\"5\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <line x1=\"27\" y1=\"85\" x2=\"75\" y2=\"85\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <circle cx=\"80\" cy=\"85\" r=\"5\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <line x1=\"85\" y1=\"85\" x2=\"85\" y2=\"45\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <line x1=\"85\" y1=\"45\" x2=\"170\" y2=\"45\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <circle cx=\"175\" cy=\"45\" r=\"4\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <line x1=\"179\" y1=\"45\" x2=\"245\" y2=\"45\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <circle cx=\"250\" cy=\"45\" r=\"3\" fill=\"white\"\/>\r\n <line x1=\"85\" y1=\"85\" x2=\"190\" y2=\"85\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <circle cx=\"195\" cy=\"85\" r=\"4\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <line x1=\"199\" y1=\"85\" x2=\"280\" y2=\"85\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <circle cx=\"285\" cy=\"85\" r=\"3\" fill=\"white\"\/>\r\n <line x1=\"85\" y1=\"85\" x2=\"85\" y2=\"130\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <line x1=\"85\" y1=\"130\" x2=\"220\" y2=\"130\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <circle cx=\"225\" cy=\"130\" r=\"4\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <line x1=\"229\" y1=\"130\" x2=\"290\" y2=\"130\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <circle cx=\"295\" cy=\"130\" r=\"3\" fill=\"white\"\/>\r\n <\/svg>\r\n\r\n\r\n \r\n <div class=\"col-services\">\r\n <h2>Co robimy?<\/h2>\r\n <div class=\"services\">\r\n\r\n \r\n <div class=\"service\">\r\n <svg class=\"service-icon\" viewBox=\"0 0 36 36\" fill=\"none\" aria-hidden=\"true\">\r\n <circle cx=\"18\" cy=\"18\" r=\"5\" stroke=\"rgba(255,255,255,0.55)\" stroke-width=\"1.4\"\/>\r\n <path d=\"M18 4v3M18 29v3M4 18h3M29 18h3M7.2 7.2l2.1 2.1M26.7 26.7l2.1 2.1M7.2 28.8l2.1-2.1M26.7 9.3l2.1-2.1\" stroke=\"rgba(255,255,255,0.45)\" stroke-width=\"1.3\" stroke-linecap=\"round\"\/>\r\n <circle cx=\"18\" cy=\"18\" r=\"9\" stroke=\"rgba(255,255,255,0.25)\" stroke-width=\"1\" stroke-dasharray=\"3 2\"\/>\r\n <\/svg>\r\n <div class=\"service-text\">\r\n <h3>Animacje maszyn i urz\u0105dze\u0144<\/h3>\r\n <p>Poka\u017c dzia\u0142anie mechanizm\u00f3w od wewn\u0105trz \u2014 przekroje, widoki rozstrzelone, ruchome cz\u0119\u015bci. Idealne do prezentacji handlowych i przetarg\u00f3w B2B.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"service\">\r\n <svg class=\"service-icon\" viewBox=\"0 0 36 36\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M22 5 L31 14 L14 31 L5 31 L5 22 Z\" stroke=\"rgba(255,255,255,0.55)\" stroke-width=\"1.3\" stroke-linejoin=\"round\"\/>\r\n <path d=\"M19 8 L28 17\" stroke=\"rgba(255,255,255,0.32)\" stroke-width=\"1\"\/>\r\n <path d=\"M8 8 Q14 12 18 18\" stroke=\"rgba(255,255,255,0.40)\" stroke-width=\"1.2\" stroke-dasharray=\"2.5 2\" stroke-linecap=\"round\"\/>\r\n <circle cx=\"8\" cy=\"8\" r=\"3\" stroke=\"rgba(255,255,255,0.40)\" stroke-width=\"1.2\"\/>\r\n <\/svg>\r\n <div class=\"service-text\">\r\n <h3>Instrukcje monta\u017cu 3D<\/h3>\r\n <p>Krok po kroku \u2014 animowane instrukcje zast\u0119puj\u0105 papierowe ulotki. Eliminuj\u0105 b\u0142\u0119dy monta\u017cowe, redukuj\u0105 koszty serwisu i skracaj\u0105 czas wdro\u017cenia.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"service\">\r\n <svg class=\"service-icon\" viewBox=\"0 0 36 36\" fill=\"none\" aria-hidden=\"true\">\r\n <rect x=\"3\" y=\"15\" width=\"30\" height=\"6\" rx=\"3\" stroke=\"rgba(255,255,255,0.55)\" stroke-width=\"1.3\"\/>\r\n <circle cx=\"9\" cy=\"18\" r=\"3\" fill=\"rgba(255,255,255,0.20)\" stroke=\"rgba(255,255,255,0.45)\" stroke-width=\"1.2\"\/>\r\n <circle cx=\"27\" cy=\"18\" r=\"3\" fill=\"rgba(255,255,255,0.20)\" stroke=\"rgba(255,255,255,0.45)\" stroke-width=\"1.2\"\/>\r\n <rect x=\"13\" y=\"10\" width=\"4\" height=\"5\" rx=\"1\" stroke=\"rgba(255,255,255,0.40)\" stroke-width=\"1\"\/>\r\n <rect x=\"19\" y=\"10\" width=\"4\" height=\"5\" rx=\"1\" stroke=\"rgba(255,255,255,0.40)\" stroke-width=\"1\"\/>\r\n <line x1=\"9\" y1=\"24\" x2=\"9\" y2=\"30\" stroke=\"rgba(255,255,255,0.30)\" stroke-width=\"1\" stroke-dasharray=\"2 2\"\/>\r\n <line x1=\"27\" y1=\"24\" x2=\"27\" y2=\"30\" stroke=\"rgba(255,255,255,0.30)\" stroke-width=\"1\" stroke-dasharray=\"2 2\"\/>\r\n <\/svg>\r\n <div class=\"service-text\">\r\n <h3>Linie produkcyjne i procesy<\/h3>\r\n <p>Wizualizacja ca\u0142ych ci\u0105g\u00f3w technologicznych \u2014 od surowca do gotowego produktu. Idealne do szkole\u0144, ISO i prezentacji dla inwestor\u00f3w.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"service\">\r\n <svg class=\"service-icon\" viewBox=\"0 0 36 36\" fill=\"none\" aria-hidden=\"true\">\r\n <rect x=\"3\" y=\"7\" width=\"30\" height=\"19\" rx=\"2\" stroke=\"rgba(255,255,255,0.55)\" stroke-width=\"1.3\"\/>\r\n <rect x=\"7\" y=\"11\" width=\"22\" height=\"11\" rx=\"1\" stroke=\"rgba(255,255,255,0.30)\" stroke-width=\"1\"\/>\r\n <path d=\"M10 19 L14 15 L17 18 L21 13 L26 17\" stroke=\"rgba(255,255,255,0.55)\" stroke-width=\"1.2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <line x1=\"13\" y1=\"26\" x2=\"23\" y2=\"26\" stroke=\"rgba(255,255,255,0.38)\" stroke-width=\"1.3\" stroke-linecap=\"round\"\/>\r\n <line x1=\"18\" y1=\"26\" x2=\"18\" y2=\"30\" stroke=\"rgba(255,255,255,0.32)\" stroke-width=\"1.2\"\/>\r\n <\/svg>\r\n <div class=\"service-text\">\r\n <h3>Animacje produktowe i targowe<\/h3>\r\n <p>Zaprezentuj produkt efektownie \u2014 na stoisku targowym, w katalogu B2B lub w materia\u0142ach sprzeda\u017cowych. Klient widzi dzia\u0142anie przed zakupem.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"col-pricing\">\r\n <h2>Otrzymaj rabat -40%<\/h2>\r\n\r\n <p class=\"pricing-disclaimer\">\r\n Ka\u017cdy projekt jest inny \u2014 z\u0142o\u017cono\u015b\u0107 modelu 3D, d\u0142ugo\u015b\u0107 animacji i dost\u0119pno\u015b\u0107 plik\u00f3w CAD maj\u0105 bezpo\u015bredni wp\u0142yw na koszt. Poni\u017csze ceny to orientacyjny punkt odniesienia, kt\u00f3ry pomo\u017ce Ci zaplanowa\u0107 bud\u017cet. Dok\u0142adn\u0105 wycen\u0119 przygotowujemy bezp\u0142atnie po kr\u00f3tkim briefie.\r\n <\/p>\r\n\r\n <div class=\"accordion\">\r\n\r\n \r\n <div class=\"acc-item open\">\r\n <button class=\"acc-header\" onclick=\"toggleAcc(this)\">\r\n Animacja instrukcji monta\u017cu 3D\r\n <span class=\"acc-chev\" aria-hidden=\"true\">\r\n <svg width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\"><path d=\"M1 1L4.5 5L8 1\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\r\n <\/span>\r\n <\/button>\r\n <div class=\"acc-body\" style=\"max-height:400px\">\r\n <div class=\"acc-body-inner\">\r\n \r\n <div class=\"price-row\">\r\n <span class=\"price-tag\">od 6 000 z\u0142<\/span>\r\n <span class=\"price-base\">do 8 500 z\u0142<\/span>\r\n <span class=\"price-after-label\">po rabacie \u221240%<\/span>\r\n <span class=\"price-after-value\">3 600 \u2013 5 100 z\u0142<\/span>\r\n <\/div>\r\n <p>Animacja 30\u201360 sek. krok po kroku zast\u0119puj\u0105ca papierow\u0105 instrukcj\u0119. Eliminuje b\u0142\u0119dy monta\u017cowe i zg\u0142oszenia serwisowe. Pakiet: scenariusz, animacja 3D, eksport MP4 i QR-kod do umieszczenia na opakowaniu.<\/p>\r\n <span class=\"price-note\">Rabat -40% dla nowych klient\u00f3w \u00b7 Demo za darmo<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"acc-item\">\r\n <button class=\"acc-header\" onclick=\"toggleAcc(this)\">\r\n Animacja maszyny \/ urz\u0105dzenia 3D\r\n <span class=\"acc-chev\" aria-hidden=\"true\">\r\n <svg width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\"><path d=\"M1 1L4.5 5L8 1\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\r\n <\/span>\r\n <\/button>\r\n <div class=\"acc-body\">\r\n <div class=\"acc-body-inner\">\r\n \r\n <div class=\"price-row\">\r\n <span class=\"price-tag\">od 8 000 z\u0142<\/span>\r\n <span class=\"price-base\">reg. 13 333 z\u0142<\/span>\r\n <span class=\"price-after-label\">po rabacie \u221240%<\/span>\r\n <span class=\"price-after-value\">od 4 800 z\u0142<\/span>\r\n <\/div>\r\n <p>Animacja 3D przedstawiaj\u0105ca dzia\u0142anie maszyny lub urz\u0105dzenia od \u015brodka \u2014 przekroje, widoki rozstrzelone, ruchome mechanizmy. Idealna do przetarg\u00f3w, katalog\u00f3w B2B i prezentacji dla klient\u00f3w. <\/p>\r\n <span class=\"price-note\">Rabat -40% dla nowych klient\u00f3w \u00b7 Demo za darmo<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"acc-item\">\r\n <button class=\"acc-header\" onclick=\"toggleAcc(this)\">\r\n Animacja linii produkcyjnej\r\n <span class=\"acc-chev\" aria-hidden=\"true\">\r\n <svg width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\"><path d=\"M1 1L4.5 5L8 1\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\r\n <\/span>\r\n <\/button>\r\n <div class=\"acc-body\">\r\n <div class=\"acc-body-inner\">\r\n \r\n <div class=\"price-row\">\r\n <span class=\"price-tag\">od 14 000 z\u0142<\/span>\r\n <span class=\"price-base\">reg. 23 333 z\u0142<\/span>\r\n <span class=\"price-after-label\">po rabacie \u221240%<\/span>\r\n <span class=\"price-after-value\">od 8 400 z\u0142<\/span>\r\n <\/div>\r\n <p>Kompleksowa wizualizacja ca\u0142ego procesu produkcji \u2014 od wsadu do produktu gotowego. Animacja zast\u0119puje drogi film fabryczny i mo\u017ce by\u0107 aktualizowana przy zmianach procesu.<\/p>\r\n <span class=\"price-note\">Rabat -40% dla nowych klient\u00f3w \u00b7 Demo za darmo<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"acc-item\">\r\n <button class=\"acc-header\" onclick=\"toggleAcc(this)\">\r\n Animacja produktowa \/ targowa\r\n <span class=\"acc-chev\" aria-hidden=\"true\">\r\n <svg width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\"><path d=\"M1 1L4.5 5L8 1\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\r\n <\/span>\r\n <\/button>\r\n <div class=\"acc-body\">\r\n <div class=\"acc-body-inner\">\r\n \r\n <div class=\"price-row\">\r\n <span class=\"price-tag\">od 5 500 z\u0142<\/span>\r\n <span class=\"price-base\">reg. 9 167 z\u0142<\/span>\r\n <span class=\"price-after-label\">po rabacie \u221240%<\/span>\r\n <span class=\"price-after-value\">od 3 300 z\u0142<\/span>\r\n <\/div>\r\n <p>Kr\u00f3tka animacja 3D produktu do zastosowa\u0144 marketingowych: strona WWW, targi, social media, katalog. Pokaz funkcji i walor\u00f3w produktu bez prototypu.<\/p>\r\n <span class=\"price-note\">Rabat -40% dla nowych klient\u00f3w \u00b7 Demo za darmo<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"acc-item\">\r\n <button class=\"acc-header\" onclick=\"toggleAcc(this)\">\r\n Animacja dla inwestor\u00f3w \/ pitch\r\n <span class=\"acc-chev\" aria-hidden=\"true\">\r\n <svg width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\"><path d=\"M1 1L4.5 5L8 1\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\r\n <\/span>\r\n <\/button>\r\n <div class=\"acc-body\">\r\n <div class=\"acc-body-inner\">\r\n \r\n <div class=\"price-row\">\r\n <span class=\"price-tag\">od 9 000 z\u0142<\/span>\r\n <span class=\"price-base\">reg. 15 000 z\u0142<\/span>\r\n <span class=\"price-after-label\">po rabacie \u221240%<\/span>\r\n <span class=\"price-after-value\">od 5 400 z\u0142<\/span>\r\n <\/div>\r\n <p>Profesjonalna animacja koncepcji technicznej lub urz\u0105dzenia do prezentacji przed inwestorami, pitch deck\u00f3w i roadshow \u2014 zanim powstanie fizyczny prototyp. Renderowany model z roz\u0142o\u017ceniem na cz\u0119\u015bci i animowanymi przekrojami.<\/p>\r\n <span class=\"price-note\">Rabat -40% dla nowych klient\u00f3w \u00b7 Demo za darmo<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n function toggleAcc(btn) {\r\n var item = btn.closest('.acc-item');\r\n var body = item.querySelector('.acc-body');\r\n var isOpen = item.classList.contains('open');\r\n document.querySelectorAll('.acc-item').forEach(function(i) {\r\n i.classList.remove('open');\r\n i.querySelector('.acc-body').style.maxHeight = '0';\r\n });\r\n if (!isOpen) { item.classList.add('open'); body.style.maxHeight = body.scrollHeight + 'px'; }\r\n }\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4bb80d07 e-con-full e-flex e-con e-parent\" data-id=\"4bb80d07\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-785e8097 elementor-widget elementor-widget-html\" data-id=\"785e8097\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin\/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n<style>\r\n#cz-pf {\r\n --accent: #4ade80;\r\n --text: #ffffff;\r\n --muted: rgba(255,255,255,0.58);\r\n --border: rgba(255,255,255,0.10);\r\n --card-bg: rgba(255,255,255,0.04);\r\n --card-glow: rgba(74,222,128,0.08);\r\n --font: 'Inter', sans-serif;\r\n --px: clamp(24px, 6vw, 80px);\r\n}\r\n\r\n#cz-pf, #cz-pf *, #cz-pf *::before, #cz-pf *::after { box-sizing: border-box; }\r\n#cz-pf {\r\n background: transparent;\r\n color: var(--text);\r\n font-family: var(--font);\r\n padding: clamp(32px, 5vw, 64px) var(--px);\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n#cz-pf h4, #cz-pf p, #cz-pf button { font-family: var(--font); }\r\n#cz-pf .cz-inner { position: relative; max-width: 1200px; margin: 0 auto; }\r\n\r\n#cz-pf .cz-stage { position: relative; padding: 0 72px; }\r\n#cz-pf .cz-viewport {\r\n overflow: hidden; border-radius: 14px;\r\n border: 1px solid var(--border);\r\n background: #000;\r\n box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 64px rgba(74,222,128,0.10);\r\n}\r\n#cz-pf .cz-track { display: flex; transition: transform .6s cubic-bezier(.65,0,.25,1); will-change: transform; }\r\n#cz-pf .cz-slide { flex: 0 0 100%; min-width: 0; aspect-ratio: 16 \/ 9; position: relative; background: #000; }\r\n\r\n#cz-pf .cz-play {\r\n all: unset; box-sizing: border-box; cursor: pointer; position: absolute; inset: 0;\r\n display: block; width: 100%; height: 100%;\r\n}\r\n#cz-pf .cz-play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease, filter .3s ease; }\r\n#cz-pf .cz-play:hover img { transform: scale(1.03); filter: brightness(.78); }\r\n#cz-pf .cz-play::after {\r\n content: \"\"; position: absolute; inset: 0;\r\n background: linear-gradient(to top, rgba(0,0,0,.45), transparent 45%); pointer-events: none;\r\n}\r\n#cz-pf .cz-play-icon {\r\n position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\r\n width: clamp(60px, 9vw, 92px); height: clamp(60px, 9vw, 92px); border-radius: 50%; z-index: 2;\r\n background: var(--accent);\r\n display: flex; align-items: center; justify-content: center;\r\n box-shadow: 0 0 48px rgba(74,222,128,0.45); transition: transform .25s ease;\r\n}\r\n#cz-pf .cz-play:hover .cz-play-icon { transform: translate(-50%, -50%) scale(1.1); }\r\n#cz-pf .cz-play-icon svg { width: 38%; height: 38%; fill: #052e16; margin-left: 6%; }\r\n#cz-pf .cz-play:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }\r\n#cz-pf .cz-slide iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }\r\n\r\n#cz-pf .cz-arrow {\r\n position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;\r\n width: 56px; height: 56px; border-radius: 14px; cursor: pointer; padding: 0;\r\n background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.18);\r\n color: rgba(255,255,255,0.80);\r\n display: flex; align-items: center; justify-content: center;\r\n transition: background .25s ease, border-color .25s ease, color .25s ease;\r\n}\r\n#cz-pf .cz-arrow:hover { background: rgba(74,222,128,0.18); border-color: var(--accent); color: var(--accent); }\r\n#cz-pf .cz-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\r\n#cz-pf .cz-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }\r\n#cz-pf .cz-prev { left: 0; }\r\n#cz-pf .cz-next { right: 0; }\r\n\r\n#cz-pf .cz-meta { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 28px 0 0; flex-wrap: wrap; }\r\n#cz-pf .cz-dots { display: flex; gap: 10px; }\r\n#cz-pf .cz-dot {\r\n width: 9px; height: 9px; border-radius: 100px; padding: 0; border: 0; cursor: pointer;\r\n background: rgba(255,255,255,0.20); transition: all .3s ease;\r\n}\r\n#cz-pf .cz-dot:hover { background: rgba(255,255,255,0.40); }\r\n#cz-pf .cz-dot.is-active { width: 32px; background: var(--accent); }\r\n#cz-pf .cz-counter {\r\n font-size: 0.70rem; font-weight: 700; letter-spacing: 0.18em;\r\n color: var(--accent); font-variant-numeric: tabular-nums;\r\n}\r\n\r\n#cz-pf .cz-cases { margin-top: clamp(28px, 4vw, 44px); }\r\n#cz-pf .cz-case {\r\n display: none; position: relative; overflow: hidden;\r\n background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;\r\n padding: clamp(24px, 3.5vw, 40px) clamp(22px, 3vw, 36px);\r\n box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 40px var(--card-glow);\r\n}\r\n#cz-pf .cz-case::before {\r\n content: ''; position: absolute; top: -30px; left: -30px;\r\n width: 140px; height: 140px; border-radius: 50%;\r\n background: radial-gradient(circle, rgba(74,222,128,0.08) 0%, transparent 70%);\r\n pointer-events: none;\r\n}\r\n#cz-pf .cz-case.is-active { display: block; animation: czFade .5s ease; }\r\n@keyframes czFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }\r\n\r\n#cz-pf .cz-case h4 {\r\n position: relative; margin: 0 0 12px; font-size: 0.70rem; font-weight: 700;\r\n letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);\r\n}\r\n#cz-pf .cz-case p {\r\n position: relative; margin: 0; font-size: clamp(0.90rem, 1.4vw, 1.02rem); font-weight: 400;\r\n line-height: 1.72; color: var(--muted);\r\n}\r\n\r\n@media (max-width: 860px) {\r\n #cz-pf .cz-stage { padding: 0 60px; }\r\n #cz-pf .cz-arrow { width: 48px; height: 48px; }\r\n}\r\n@media (max-width: 540px) {\r\n #cz-pf .cz-stage { padding: 0; }\r\n #cz-pf .cz-arrow {\r\n width: 40px; height: 40px; border-radius: 10px;\r\n background: rgba(10,14,20,0.65);\r\n -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);\r\n }\r\n #cz-pf .cz-arrow svg { width: 18px; height: 18px; }\r\n #cz-pf .cz-prev { left: 8px; }\r\n #cz-pf .cz-next { right: 8px; }\r\n #cz-pf .cz-case { padding: 22px 20px; }\r\n #cz-pf .cz-dots { gap: 7px; }\r\n #cz-pf .cz-dot.is-active { width: 22px; }\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n #cz-pf .cz-track { transition: none; }\r\n #cz-pf .cz-case.is-active { animation: none; }\r\n}\r\n<\/style>\r\n\r\n<div id=\"cz-pf\">\r\n <div class=\"cz-inner\">\r\n\r\n \r\n <div class=\"cz-stage\">\r\n <button class=\"cz-arrow cz-prev\" type=\"button\" aria-label=\"Previous video\">\r\n <svg viewBox=\"0 0 24 24\"><polyline points=\"15 18 9 12 15 6\"><\/polyline><\/svg>\r\n <\/button>\r\n\r\n <div class=\"cz-viewport\">\r\n <div class=\"cz-track\">\r\n <div class=\"cz-slide\" data-yt=\"bKLQH-ee96I\" data-title=\"Video 1\"><\/div>\r\n <div class=\"cz-slide\" data-yt=\"O7pzxLhKZ0Q\" data-title=\"Video 2\"><\/div>\r\n <div class=\"cz-slide\" data-yt=\"JL2imWXQ5bw\" data-title=\"Video 3\"><\/div>\r\n <div class=\"cz-slide\" data-yt=\"c7CvwK790eM\" data-title=\"Video 4\"><\/div>\r\n <div class=\"cz-slide\" data-yt=\"E_hmzKOA1ro\" data-title=\"Video 5\"><\/div>\r\n <div class=\"cz-slide\" data-yt=\"HLiObYGmATI\" data-title=\"Video 6\"><\/div>\r\n <div class=\"cz-slide\" data-yt=\"8tggpfUJF24\" data-title=\"Video 7\"><\/div>\r\n <div class=\"cz-slide\" data-yt=\"EY6fh6nPSoE\" data-title=\"Video 8\"><\/div>\r\n <div class=\"cz-slide\" data-yt=\"sTC1VMnf96M\" data-title=\"Video 9\"><\/div>\r\n <div class=\"cz-slide\" data-yt=\"fjKD-rwNZ64\" data-title=\"Video 10\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <button class=\"cz-arrow cz-next\" type=\"button\" aria-label=\"Next video\">\r\n <svg viewBox=\"0 0 24 24\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"cz-meta\">\r\n <div class=\"cz-dots\"><\/div>\r\n <div class=\"cz-counter\">01 \/ 10<\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"cz-cases\">\r\n\r\n <article class=\"cz-case\">\r\n <h4>What it shows<\/h4>\r\n <p>Prezentacja wideo w formie Animacji 3D - przedstawiaj\u0105ca funkcje bloku rozdzielczego, jego zalety, oraz dane techniczne.<\/p>\r\n <\/article>\r\n\r\n <article class=\"cz-case\">\r\n <h4>What it shows<\/h4>\r\n <p>Kr\u00f3tka animacja prezentuj\u0105ca instrukcj\u0119 z\u0142o\u017cenia stolika. Szybki i \u0142atwo przyswajalny tutorial wideo pozwalaj\u0105cy u\u017cytkownikowi samodzielnie z\u0142o\u017cy\u0107 zakupiony mebel.<\/p>\r\n <\/article>\r\n\r\n <article class=\"cz-case\">\r\n <h4>What it shows<\/h4>\r\n <p>Prezentacja przedstawiaj\u0105ca proces odbudowy z\u0119ba oraz wprowadzenie implantu. Cel: Zrozumia\u0142e zaprezentowanie produktu pacjentom w mniej ni\u017c minut\u0119.<\/p>\r\n <\/article>\r\n\r\n <article class=\"cz-case\">\r\n <h4>What it shows<\/h4>\r\n <p>Prezentacja przedstawiaj\u0105ca funkcje i zalety wentylatora, jego przekr\u00f3j oraz dane techniczne.<\/p>\r\n <\/article>\r\n\r\n \r\n <article class=\"cz-case\">\r\n <h4>What it shows<\/h4>\r\n <p>Animacja 3D prototypu nowoczesnej \u0142adowarki z odczepianymi ko\u0144c\u00f3wkami. Wideo kt\u00f3re \u015bwietnie sprawdzi si\u0119 na targach i kt\u00f3re przykuwa uwag\u0119. <\/p>\r\n <\/article>\r\n\r\n <article class=\"cz-case\">\r\n <h4>What it shows<\/h4>\r\n <p>Kr\u00f3tka animacja prezentuj\u0105ca przekr\u00f3j techniczny urz\u0105dzenia. <\/p>\r\n <\/article>\r\n\r\n <article class=\"cz-case\">\r\n <h4>What it shows<\/h4>\r\n <p>Prezentacja wideo w formie Animacji 3D - przedstawiaj\u0105ca funkcje bloku rozdzielczego, jego zalety, oraz dane techniczne.<\/p>\r\n <\/article>\r\n\r\n <article class=\"cz-case\">\r\n <h4>What it shows<\/h4>\r\n <p>Prezentacja wideo w formie Animacji 3D - przedstawiaj\u0105ca funkcje bloku rozdzielczego, jego zalety, oraz dane techniczne.<\/p>\r\n <\/article>\r\n\r\n <article class=\"cz-case\">\r\n <h4>What it shows<\/h4>\r\n <p>Kr\u00f3tka animacja 3D pokazuj\u0105ca funkcje i spos\u00f3b dzia\u0142ania autonomicznego urz\u0105dzania do segregowania.<\/p>\r\n <\/article>\r\n\r\n <article class=\"cz-case\">\r\n <h4>What it shows<\/h4>\r\n <p>Kr\u00f3tka animacja 3D pokazuj\u0105ca funkcje i spos\u00f3b dzia\u0142ania urz\u0105dzenia. <\/p>\r\n <\/article>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n var root = document.getElementById('cz-pf');\r\n if (!root) return;\r\n\r\n var track = root.querySelector('.cz-track');\r\n var slides = [].slice.call(root.querySelectorAll('.cz-slide'));\r\n var cases = [].slice.call(root.querySelectorAll('.cz-case'));\r\n var dotsBox = root.querySelector('.cz-dots');\r\n var counter = root.querySelector('.cz-counter');\r\n var viewport= root.querySelector('.cz-viewport');\r\n var n = slides.length;\r\n var current = 0;\r\n\r\n function pad(x) { return (x < 10 ? '0' : '') + x; }\r\n\r\n function titleOf(i) {\r\n return slides[i].getAttribute('data-title') || ('Video ' + (i + 1));\r\n }\r\n\r\n function showThumb(slide, i) {\r\n var id = slide.getAttribute('data-yt');\r\n var t = titleOf(i).replace(\/\"\/g, '');\r\n slide.innerHTML =\r\n '<button class=\"cz-play\" type=\"button\" aria-label=\"Play video: ' + t + '\">' +\r\n '<img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/' + id + '\/maxresdefault.jpg\" alt=\"' + t + '\" loading=\"' + (i === 0 ? 'eager' : 'lazy') + '\">' +\r\n '<span class=\"cz-play-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>' +\r\n '<\/button>';\r\n var img = slide.querySelector('img');\r\n var fallback = 'https:\/\/img.youtube.com\/vi\/' + id + '\/hqdefault.jpg';\r\n img.addEventListener('error', function () { if (img.src !== fallback) img.src = fallback; });\r\n img.addEventListener('load', function () {\r\n if (img.naturalWidth && img.naturalWidth <= 120 && img.src !== fallback) img.src = fallback;\r\n });\r\n slide.querySelector('.cz-play').addEventListener('click', function () { playVideo(slide, i); });\r\n slide.classList.remove('is-playing');\r\n }\r\n\r\n function playVideo(slide, i) {\r\n var id = slide.getAttribute('data-yt');\r\n slide.innerHTML =\r\n '<iframe src=\"https:\/\/www.youtube-nocookie.com\/embed\/' + id + '?autoplay=1&rel=0&modestbranding=1&playsinline=1\" ' +\r\n 'title=\"' + titleOf(i).replace(\/\"\/g, '') + '\" ' +\r\n 'allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen\" ' +\r\n 'allowfullscreen><\/iframe>';\r\n slide.classList.add('is-playing');\r\n }\r\n\r\n slides.forEach(function (s, i) {\r\n showThumb(s, i);\r\n var d = document.createElement('button');\r\n d.type = 'button';\r\n d.className = 'cz-dot';\r\n d.setAttribute('aria-label', 'Go to video ' + (i + 1));\r\n d.addEventListener('click', function () { go(i); });\r\n dotsBox.appendChild(d);\r\n });\r\n var dots = [].slice.call(dotsBox.children);\r\n\r\n function go(k) {\r\n var prev = current;\r\n current = (k + n) % n;\r\n track.style.transform = 'translateX(-' + (current * 100) + '%)';\r\n\r\n if (prev !== current && slides[prev].classList.contains('is-playing')) showThumb(slides[prev], prev);\r\n\r\n cases.forEach(function (c, i) { c.classList.toggle('is-active', i === current); });\r\n dots.forEach(function (d, i) { d.classList.toggle('is-active', i === current); });\r\n counter.textContent = pad(current + 1) + ' \/ ' + pad(n);\r\n }\r\n\r\n root.querySelector('.cz-prev').addEventListener('click', function () { go(current - 1); });\r\n root.querySelector('.cz-next').addEventListener('click', function () { go(current + 1); });\r\n\r\n root.addEventListener('keydown', function (e) {\r\n if (e.key === 'ArrowLeft') go(current - 1);\r\n if (e.key === 'ArrowRight') go(current + 1);\r\n });\r\n\r\n var sx = 0, sy = 0;\r\n viewport.addEventListener('touchstart', function (e) {\r\n sx = e.touches[0].clientX; sy = e.touches[0].clientY;\r\n }, { passive: true });\r\n viewport.addEventListener('touchend', function (e) {\r\n var dx = e.changedTouches[0].clientX - sx;\r\n var dy = e.changedTouches[0].clientY - sy;\r\n if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy)) go(dx < 0 ? current + 1 : current - 1);\r\n }, { passive: true });\r\n\r\n go(0);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-49d6735c e-con-full e-flex e-con e-parent\" data-id=\"49d6735c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d59c91d elementor-widget elementor-widget-html\" data-id=\"d59c91d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pl\">\r\n<head>\r\n <meta charset=\"UTF-8\"\/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Creative Zen \u2013 Opinie i partnerzy<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin\/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\"\/>\r\n <style>\r\n :root {\r\n --accent: #4ade80;\r\n --text: #ffffff;\r\n --muted: rgba(255,255,255,0.48);\r\n --border: rgba(255,255,255,0.10);\r\n --font: 'Inter', sans-serif;\r\n --px: clamp(20px, 5vw, 72px);\r\n --bg: #09090b;\r\n }\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n html { font-size: 16px; }\r\n body {\r\n font-family: var(--font);\r\n color: var(--text);\r\n background: transparent;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* \u2550\u2550 OPINIE + ZDJ\u0118CIE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .reviews-wrap {\r\n padding: clamp(40px, 6vw, 72px) var(--px) clamp(16px, 3vw, 28px);\r\n }\r\n .reviews-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: clamp(14px, 2vw, 22px);\r\n align-items: stretch;\r\n }\r\n .opinions-card {\r\n background: rgba(255,255,255,0.035);\r\n border: 1px solid var(--border);\r\n border-radius: 16px;\r\n padding: clamp(20px, 3vw, 36px);\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .opinions-list { display: flex; flex-direction: column; flex: 1; }\r\n .opinion { display: flex; flex-direction: column; gap: 10px; padding: clamp(16px, 2.2vw, 22px) 0; flex: 1; }\r\n .opinion + .opinion { border-top: 1px solid var(--border); }\r\n .opinion-head { display: flex; align-items: center; gap: 14px; }\r\n .opinion-photo {\r\n width: clamp(52px, 5.5vw, 68px);\r\n height: clamp(52px, 5.5vw, 68px);\r\n border-radius: 10px;\r\n object-fit: cover;\r\n object-position: center top;\r\n flex-shrink: 0;\r\n border: 1px solid rgba(255,255,255,0.10);\r\n }\r\n .opinion-name { font-size: clamp(0.70rem, 1.0vw, 0.80rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }\r\n .opinion-text { font-size: clamp(0.73rem, 1.05vw, 0.82rem); font-weight: 300; line-height: 1.70; color: var(--muted); }\r\n\r\n .reviews-photo-col {\r\n border-radius: 16px;\r\n overflow: hidden;\r\n border: 1px solid rgba(255,255,255,0.08);\r\n position: relative;\r\n min-height: 280px;\r\n }\r\n .reviews-photo {\r\n position: absolute; inset: 0; width: 100%; height: 100%;\r\n object-fit: cover; object-position: center; display: block;\r\n transition: transform 0.5s ease;\r\n }\r\n .reviews-photo-col:hover .reviews-photo { transform: scale(1.03); }\r\n\r\n .google-link-wrap { padding: clamp(14px, 2vw, 20px) var(--px) 0; }\r\n .google-link {\r\n display: inline-flex; align-items: center; gap: 10px;\r\n font-size: clamp(0.58rem, 0.85vw, 0.66rem); font-weight: 700;\r\n letter-spacing: 0.18em; text-transform: uppercase;\r\n color: rgba(255,255,255,0.38); text-decoration: none; transition: color 0.20s;\r\n }\r\n .google-link:hover { color: var(--text); }\r\n .google-link svg { width: 13px; height: 13px; flex-shrink: 0; transition: transform 0.20s; }\r\n .google-link:hover svg { transform: translateX(4px); }\r\n\r\n \/* \u2550\u2550 ZAUFALI NAM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .trusted-wrap {\r\n padding: clamp(48px, 6vw, 80px) 0 clamp(52px, 7vw, 88px);\r\n }\r\n .trusted-title {\r\n text-align: center;\r\n font-size: clamp(0.82rem, 1.6vw, 1.1rem);\r\n font-weight: 800;\r\n letter-spacing: 0.22em;\r\n text-transform: uppercase;\r\n color: var(--text);\r\n margin-bottom: clamp(32px, 4vw, 52px);\r\n }\r\n\r\n .marquee-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n position: relative;\r\n }\r\n\r\n \/* Gradient zanikania po bokach *\/\r\n .marquee-container::before,\r\n .marquee-container::after {\r\n content: '';\r\n position: absolute;\r\n top: 0; bottom: 0;\r\n width: 80px;\r\n z-index: 2;\r\n pointer-events: none;\r\n }\r\n .marquee-container::before {\r\n left: 0;\r\n background: linear-gradient(to right, var(--bg), transparent);\r\n }\r\n .marquee-container::after {\r\n right: 0;\r\n background: linear-gradient(to left, var(--bg), transparent);\r\n }\r\n\r\n .marquee-outer { overflow: hidden; width: 100%; }\r\n\r\n \/* Track z 4 kopiami logo dla p\u0142ynnej p\u0119tli *\/\r\n .marquee-track {\r\n display: flex;\r\n align-items: center;\r\n width: max-content;\r\n animation: scrollLeft 90s linear infinite;\r\n }\r\n .marquee-track:hover { animation-play-state: paused; }\r\n\r\n @keyframes scrollLeft {\r\n 0% { transform: translateX(0); }\r\n 100% { transform: translateX(-25%); }\r\n }\r\n\r\n \/* \u2550\u2550 LOGO ITEM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n Wysoko\u015b\u0107 kontenera logo \u2013 clamp(min, preferowane, max)\r\n Zmie\u0144 warto\u015bci aby dostosowa\u0107 rozmiar\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .logo-item {\r\n flex-shrink: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n \/* DESKTOP: 96px wysoko\u015b\u0107 kontenera *\/\r\n height: 96px;\r\n padding: 0 40px;\r\n \/* BIEL: opacity 0.92 = prawie pe\u0142na biel, nie szare *\/\r\n opacity: 0.92;\r\n transition: opacity 0.22s;\r\n }\r\n .logo-item:hover { opacity: 1; }\r\n\r\n .logo-item img {\r\n \/* DESKTOP: max-height 100% kontenera \u2192 96px *\/\r\n height: 100%;\r\n width: auto;\r\n max-width: 200px;\r\n display: block;\r\n object-fit: contain;\r\n \/* brightness(0) invert(1) = bia\u0142e logo niezale\u017cnie od orygina\u0142u *\/\r\n filter: brightness(0) invert(1);\r\n }\r\n\r\n\r\n \/* \u2550\u2550 RESPONSYWNO\u015a\u0106 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\n \/* Tablet \u2264 780px *\/\r\n @media (max-width: 780px) {\r\n .reviews-grid { grid-template-columns: 1fr; align-items: start; }\r\n .reviews-photo-col { position: relative; min-height: unset; width: 100%; aspect-ratio: 16 \/ 9; }\r\n .marquee-container { max-width: 100%; }\r\n\r\n \/* TABLET: logo wi\u0119ksze ni\u017c wcze\u015bniej (by\u0142o 44px \u2192 teraz 64px) *\/\r\n .logo-item {\r\n height: 64px; \/* \u2190 zmie\u0144 tutaj rozmiar na tablecie *\/\r\n padding: 0 32px;\r\n opacity: 0.92; \/* pe\u0142na biel te\u017c na tablecie *\/\r\n }\r\n }\r\n\r\n \/* Telefon \u2264 480px *\/\r\n @media (max-width: 480px) {\r\n .reviews-wrap { padding-left: 16px; padding-right: 16px; }\r\n .google-link-wrap { padding-left: 16px; }\r\n .opinion-photo { width: 46px; height: 46px; }\r\n .marquee-track { animation-duration: 22s; }\r\n .reviews-photo-col { aspect-ratio: 4 \/ 3; }\r\n\r\n \/* TELEFON: logo wyra\u017anie wi\u0119ksze ni\u017c wcze\u015bniej (by\u0142o 36px \u2192 teraz 52px) *\/\r\n .logo-item {\r\n height: 52px; \/* \u2190 zmie\u0144 tutaj rozmiar na telefonie *\/\r\n padding: 0 22px;\r\n opacity: 0.92; \/* pe\u0142na biel te\u017c na telefonie *\/\r\n }\r\n }\r\n\r\n \/* Bardzo ma\u0142y telefon \u2264 360px *\/\r\n @media (max-width: 360px) {\r\n .logo-item {\r\n height: 44px;\r\n padding: 0 16px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<div class=\"reviews-wrap\">\r\n <div class=\"reviews-grid\">\r\n <div class=\"opinions-card\">\r\n <div class=\"opinions-list\">\r\n\r\n <div class=\"opinion\">\r\n <div class=\"opinion-head\">\r\n <img decoding=\"async\" class=\"opinion-photo\"\r\n src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/05\/Moralewicz.png\"\r\n alt=\"Piotr Moralewicz\" loading=\"lazy\"\/>\r\n <div><span class=\"opinion-name\">Piotr Moralewicz \u2605\u2605\u2605\u2605\u2605<\/span><\/div>\r\n <\/div>\r\n <p class=\"opinion-text\">\r\n Wsp\u00f3\u0142praca z Paw\u0142em to czysta przyjemno\u015b\u0107. Nawet jak czego\u015b nie dookre\u015bl\u0119, to Pawe\u0142 i tak zrobi to w taki spos\u00f3b \u017ce finalnie jestem zadowolony. Chyba potrafi czyta\u0107 w my\u015blach \ud83e\udd37\u200d\u2642\ufe0f11\/10, Gor\u0105co polecam!\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"opinion\">\r\n <div class=\"opinion-head\">\r\n <img decoding=\"async\" class=\"opinion-photo\"\r\n src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/05\/Wachowicz.png\"\r\n alt=\"Tomasz Wachowicz\" loading=\"lazy\"\/>\r\n <div><span class=\"opinion-name\">Tomasz Wachowicz \u2605\u2605\u2605\u2605\u2605<\/span><\/div>\r\n <\/div>\r\n <p class=\"opinion-text\">\r\n Szuka\u0142em \u015bwie\u017cych pomys\u0142\u00f3w, ci\u0119\u017cko teraz z tym na rynku, CreativeZen dostarczy\u0142o je z nawi\u0105zk\u0105. Nazwa firmy idealnie pasuje do nich, wszystko ze spokojem i w terminie. Na pewno wr\u00f3c\u0119 z kolejnymi zleceniami.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"opinion\">\r\n <div class=\"opinion-head\">\r\n <img decoding=\"async\" class=\"opinion-photo\"\r\n src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/05\/Wiklanski.png\"\r\n alt=\"Przemys\u0142aw Wikla\u0144ski\" loading=\"lazy\"\/>\r\n <div><span class=\"opinion-name\">Przemys\u0142aw Wikla\u0144ski \u2605\u2605\u2605\u2605\u2605<\/span><\/div>\r\n <\/div>\r\n <p class=\"opinion-text\">\r\n Szuka\u0142am sprawdzonych tw\u00f3rc\u00f3w animacji medycznych \u2014 Creative Zen\r\n zaskoczy\u0142o mnie bardzo pozytywnie. Specjalizacja idealna dla\r\n naszej firmy, wszystko w terminie. Serdecznie polecam!\r\n <\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"reviews-photo-col\">\r\n \r\n <video\r\n class=\"reviews-photo\"\r\n src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/05\/size.mp4\"\r\n autoplay\r\n muted\r\n loop\r\n playsinline\r\n preload=\"auto\"\r\n disablepictureinpicture\r\n controlslist=\"nodownload nofullscreen noremoteplayback\"\r\n ><\/video>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div class=\"google-link-wrap\">\r\n <a class=\"google-link\"\r\n href=\"https:\/\/share.google\/e6et4vEUKGUhZ7j5j\"\r\n target=\"_blank\" rel=\"noopener noreferrer\">\r\n Sprawd\u017a wszystkie opinie Google\r\n <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M3 8H13M9 4L13 8L9 12\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <\/svg>\r\n <\/a>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"trusted-wrap\">\r\n <h2 class=\"trusted-title\">Zaufali nam<\/h2>\r\n\r\n <div class=\"marquee-container\">\r\n <div class=\"marquee-outer\">\r\n <div class=\"marquee-track\">\r\n\r\n \r\n <div class=\"logo-item\" title=\"Ochnik\">\r\n <img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/OCHNIK-1.webp\" alt=\"Ochnik\"\/>\r\n <\/div>\r\n <div class=\"logo-item\" title=\"NADAUP\">\r\n <img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/NADAUP.webp\" alt=\"NADAUP\"\/>\r\n <\/div>\r\n <div class=\"logo-item\" title=\"imFilter\">\r\n <img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/IMFILTER.webp\" alt=\"imFilter\"\/>\r\n <\/div>\r\n <div class=\"logo-item\" title=\"Elkat\">\r\n <img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/ELKAT.webp\" alt=\"Elkat\"\/>\r\n <\/div>\r\n <div class=\"logo-item\" title=\"Partner\">\r\n <img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/04\/Bez-nazwy-1-1.png\" alt=\"Partner\"\/>\r\n <\/div>\r\n \r\n <div class=\"logo-item\" title=\"Innowations\">\r\n <img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/10\/Innowations.webp\" alt=\"Innowations\"\/>\r\n <\/div>\r\n\r\n \r\n \r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/OCHNIK-1.webp\" alt=\"\"\/><\/div>\r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/NADAUP.webp\" alt=\"\"\/><\/div>\r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/IMFILTER.webp\" alt=\"\"\/><\/div>\r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/ELKAT.webp\" alt=\"\"\/><\/div>\r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/04\/Bez-nazwy-1-1.png\" alt=\"\"\/><\/div>\r\n \r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/10\/Innowations.webp\" alt=\"\"\/><\/div>\r\n\r\n \r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/OCHNIK-1.webp\" alt=\"\"\/><\/div>\r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/NADAUP.webp\" alt=\"\"\/><\/div>\r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/IMFILTER.webp\" alt=\"\"\/><\/div>\r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/ELKAT.webp\" alt=\"\"\/><\/div>\r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/04\/Bez-nazwy-1-1.png\" alt=\"\"\/><\/div>\r\n \r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/10\/Innowations.webp\" alt=\"\"\/><\/div>\r\n\r\n \r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/OCHNIK-1.webp\" alt=\"\"\/><\/div>\r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/NADAUP.webp\" alt=\"\"\/><\/div>\r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/IMFILTER.webp\" alt=\"\"\/><\/div>\r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/ELKAT.webp\" alt=\"\"\/><\/div>\r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/04\/Bez-nazwy-1-1.png\" alt=\"\"\/><\/div>\r\n \r\n <div class=\"logo-item\" aria-hidden=\"true\"><img decoding=\"async\" src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/10\/Innowations.webp\" alt=\"\"\/><\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-704c85e7 e-con-full e-flex e-con e-parent\" data-id=\"704c85e7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-777bbfc1 elementor-widget elementor-widget-html\" data-id=\"777bbfc1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!DOCTYPE html>\r\n<html lang=\"pl\">\r\n<head>\r\n <meta charset=\"UTF-8\"\/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Creative Zen \u2013 Wymierne efekty<\/title>\r\n\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin\/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n ZMIENNE GLOBALNE \u2013 sp\u00f3jne z wszystkimi poprzednimi segmentami\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n :root {\r\n --accent: #4ade80; \/* kolor akcentu \u2013 zielony *\/\r\n --text: #ffffff; \/* kolor tekstu g\u0142\u00f3wnego *\/\r\n --text-muted: rgba(255,255,255,0.52); \/* kolor tekstu drugoplanowego *\/\r\n --border: rgba(255,255,255,0.10); \/* kolor obramowa\u0144 *\/\r\n --font: 'Inter', sans-serif;\r\n --px: clamp(20px, 5vw, 72px); \/* padding poziomy sekcji *\/\r\n }\r\n\r\n \/* \u2500\u2500 RESET \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n html { font-size: 16px; }\r\n\r\n body {\r\n font-family: var(--font);\r\n color: var(--text);\r\n background: transparent; \/* \u2190 transparentne \u2013 CMS nadaje kolor strony *\/\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SEKCJA G\u0141\u00d3WNA \u2013 WRAPPER\r\n Ciemna karta z lekkim zaokr\u0105gleniem \u2013 jak na screenshocie\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .benefits-section {\r\n padding: clamp(40px, 6vw, 80px) var(--px);\r\n }\r\n\r\n \/* Wewn\u0119trzna karta \u2013 ciemne t\u0142o, zaokr\u0105glone rogi *\/\r\n .benefits-card {\r\n position: relative;\r\n \/* Ciemne t\u0142o karty jak na screenshocie *\/\r\n background: rgba(10, 12, 10, 0.88);\r\n border-radius: 20px; \/* zaokr\u0105glone rogi ca\u0142ej karty *\/\r\n overflow: hidden; \/* przycina zawarto\u015b\u0107 do zaokr\u0105gle\u0144 *\/\r\n \/* Subtelne obramowanie *\/\r\n border: 1px solid rgba(255,255,255,0.08);\r\n box-shadow: 0 20px 60px rgba(0,0,0,0.50);\r\n }\r\n\r\n \/* Dwukolumnowy grid wewn\u0105trz karty:\r\n lewa (tekst) troch\u0119 szersza, prawa (zdj\u0119cie) troch\u0119 w\u0119\u017csza *\/\r\n .benefits-inner {\r\n display: grid;\r\n \/* Proporcje jak na screenshocie: ~55% tekst, ~45% zdj\u0119cie *\/\r\n grid-template-columns: 55fr 45fr;\r\n min-height: clamp(320px, 45vw, 580px); \/* minimalna wysoko\u015b\u0107 karty *\/\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n LEWA STRONA \u2013 TYTU\u0141 + LISTA BENEFIT\u00d3W\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .benefits-left {\r\n padding: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 60px);\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center; \/* wy\u015brodkowanie pionowe *\/\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* Subtelna po\u015bwiata zielona w lewym dolnym rogu *\/\r\n .benefits-left::before {\r\n content: '';\r\n position: absolute;\r\n bottom: -40px; left: -40px;\r\n width: 300px; height: 300px;\r\n border-radius: 50%;\r\n background: radial-gradient(\r\n circle,\r\n rgba(74,222,128,0.06) 0%,\r\n transparent 70%\r\n );\r\n pointer-events: none;\r\n }\r\n\r\n \/* \u2500\u2500 TYTU\u0141 SEKCJI \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n TYTU\u0141 SEKCJI \u2013 zmie\u0144 tekst w <h2> poni\u017cej\r\n Uwaga: uppercase i bardzo du\u017ca czcionka \u2013 jak na screenshocie\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n .benefits-title {\r\n font-size: clamp(1.8rem, 3.8vw, 3rem); \/* fluid \u2013 skaluje si\u0119 z ekranem *\/\r\n font-weight: 900; \/* maksymalnie pogrubione *\/\r\n letter-spacing: 0.02em;\r\n text-transform: uppercase; \/* wielkie litery jak na screenshocie *\/\r\n line-height: 1.08;\r\n color: var(--text);\r\n margin-bottom: clamp(24px, 3.5vw, 40px);\r\n }\r\n\r\n \/* \u2500\u2500 LISTA BENEFIT\u00d3W \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n Punkty z zielonymi bulletami\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n .benefits-list {\r\n list-style: none; \/* usuwamy domy\u015blne punkty \u2013 robimy w\u0142asne *\/\r\n display: flex;\r\n flex-direction: column;\r\n gap: clamp(10px, 1.6vw, 16px); \/* odst\u0119p mi\u0119dzy punktami *\/\r\n }\r\n\r\n \/* \u2500\u2500 POJEDYNCZY BENEFIT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n BENEFIT \u2013 skopiuj <li class=\"benefit-item\"> aby doda\u0107 nowy punkt\r\n Zmie\u0144 tekst wewn\u0105trz <span> poni\u017cej\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n .benefit-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 12px; \/* odst\u0119p mi\u0119dzy bulletem a tekstem *\/\r\n }\r\n\r\n \/* Bullet \u2013 zielona kropka *\/\r\n .benefit-dot {\r\n width: 7px;\r\n height: 7px;\r\n border-radius: 50%;\r\n background: var(--text); \/* bia\u0142a kropka jak na screenshocie *\/\r\n flex-shrink: 0;\r\n margin-top: 0.45em; \/* wyr\u00f3wnanie z pierwsz\u0105 lini\u0105 tekstu *\/\r\n }\r\n\r\n \/* Tekst punktu listy *\/\r\n .benefit-text {\r\n font-size: clamp(0.88rem, 1.6vw, 1.05rem);\r\n font-weight: 400;\r\n line-height: 1.55;\r\n color: var(--text);\r\n }\r\n\r\n \/* Pogrubiona cz\u0119\u015b\u0107 w tek\u015bcie (opcjonalnie)\r\n U\u017cyj <strong> wewn\u0105trz .benefit-text je\u015bli chcesz wyr\u00f3\u017cni\u0107 s\u0142owa *\/\r\n .benefit-text strong {\r\n font-weight: 700;\r\n }\r\n\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n PRAWA STRONA \u2013 ZDJ\u0118CIE \/ GIF\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .benefits-right {\r\n position: relative;\r\n overflow: hidden;\r\n \/* Minimalna wysoko\u015b\u0107 gdy zdj\u0119cie jest niedu\u017ce *\/\r\n min-height: 280px;\r\n }\r\n\r\n \/* \u2500\u2500 ZDJ\u0118CIE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n ZDJ\u0118CIE \u2013 zmie\u0144 src na link do swojego zdj\u0119cia lub GIF-a\r\n\r\n Zalecane formaty:\r\n \u2022 Zdj\u0119cie JPG\/PNG: src=\"https:\/\/twoja-domena.pl\/zdjecie.jpg\"\r\n \u2022 GIF animowany: src=\"https:\/\/twoja-domena.pl\/animacja.gif\"\r\n \u2022 Wideo (MP4): zamie\u0144 <img> na <video autoplay loop muted playsinline>\r\n\r\n Zalecany rozmiar: min 800\u00d7600 px, proporcje 4:3 lub 16:9\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n .benefits-img {\r\n position: absolute;\r\n inset: 0; \/* rozci\u0105ga obraz na ca\u0142y kontener *\/\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover; \/* cover \u2013 wype\u0142nia bez deformacji *\/\r\n object-position: center; \/* \u015brodek obrazu \u2013 zmie\u0144 np. na \"top\" lub \"left\" *\/\r\n display: block;\r\n \/* Subtelny overlay po lewej \u2013 p\u0142ynne przej\u015bcie do ciemnego t\u0142a tekstu *\/\r\n mask-image: linear-gradient(\r\n to right,\r\n transparent 0%,\r\n rgba(0,0,0,0.05) 8%,\r\n rgba(0,0,0,1) 100%\r\n );\r\n -webkit-mask-image: linear-gradient(\r\n to right,\r\n transparent 0%,\r\n rgba(0,0,0,0.05) 8%,\r\n rgba(0,0,0,1) 100%\r\n );\r\n transition: transform 0.5s ease; \/* p\u0142ynny zoom przy hover *\/\r\n }\r\n\r\n \/* Delikatny zoom zdj\u0119cia przy najechaniu na kart\u0119 *\/\r\n .benefits-card:hover .benefits-img {\r\n transform: scale(1.03);\r\n }\r\n\r\n \/* Nak\u0142adka \u2013 przyciemnia praw\u0105 stron\u0119 dla sp\u00f3jno\u015bci z t\u0142em *\/\r\n .benefits-img-overlay {\r\n position: absolute;\r\n inset: 0;\r\n \/* Gradient od lewej (ciemny) do prawej (przezroczysty) *\/\r\n background: linear-gradient(\r\n to right,\r\n rgba(10,12,10,0.55) 0%,\r\n rgba(10,12,10,0.10) 60%,\r\n transparent 100%\r\n );\r\n z-index: 1;\r\n pointer-events: none;\r\n }\r\n\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESPONSYWNO\u015a\u0106\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\n \/* Tablet \u2264 820px \u2013 jedna kolumna, zdj\u0119cie pod tekstem *\/\r\n @media (max-width: 820px) {\r\n .benefits-inner {\r\n grid-template-columns: 1fr; \/* jedna kolumna *\/\r\n min-height: auto;\r\n }\r\n\r\n \/* Zdj\u0119cie jako statyczny blok pod tekstem *\/\r\n .benefits-right {\r\n min-height: clamp(220px, 50vw, 380px); \/* wysoko\u015b\u0107 zdj\u0119cia na tablecie *\/\r\n \/* Usu\u0144 mask przy jednej kolumnie \u2013 pe\u0142ny obraz *\/\r\n }\r\n\r\n \/* Mask na tablecie \u2013 z g\u00f3ry do do\u0142u (tekst nad zdj\u0119ciem) *\/\r\n .benefits-img {\r\n mask-image: linear-gradient(\r\n to bottom,\r\n transparent 0%,\r\n black 15%,\r\n black 100%\r\n );\r\n -webkit-mask-image: linear-gradient(\r\n to bottom,\r\n transparent 0%,\r\n black 15%,\r\n black 100%\r\n );\r\n }\r\n\r\n .benefits-left {\r\n padding-bottom: clamp(20px, 3vw, 32px);\r\n }\r\n }\r\n\r\n \/* Telefon \u2264 480px \u2013 mniejszy padding i czcionki *\/\r\n @media (max-width: 480px) {\r\n .benefits-section {\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n }\r\n\r\n .benefits-left {\r\n padding: 28px 22px;\r\n }\r\n\r\n \/* Tytu\u0142 mniejszy na telefonie *\/\r\n .benefits-title {\r\n font-size: clamp(1.55rem, 7vw, 2rem);\r\n letter-spacing: 0.01em;\r\n }\r\n\r\n \/* Tekst benefit\u00f3w mniejszy *\/\r\n .benefit-text {\r\n font-size: 0.9rem;\r\n }\r\n\r\n \/* Zdj\u0119cie ni\u017csze na telefonie *\/\r\n .benefits-right {\r\n min-height: 200px;\r\n }\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<section class=\"benefits-section\">\r\n <div class=\"benefits-card\">\r\n <div class=\"benefits-inner\">\r\n\r\n \r\n <div class=\"benefits-left\">\r\n\r\n \r\n <h2 class=\"benefits-title\">\r\n Wymierne efekty<br>dla Twojego biznesu\r\n <\/h2>\r\n\r\n \r\n <ul class=\"benefits-list\">\r\n\r\n \r\n <li class=\"benefit-item\">\r\n <span class=\"benefit-dot\" aria-hidden=\"true\"><\/span>\r\n <span class=\"benefit-text\">\r\n <strong>Zero b\u0142\u0119d\u00f3w monta\u017cowych<\/strong> \u2013 Wyeliminuj b\u0142\u0119dy monta\u017cowe dzi\u0119ki wizualizacji \u201ekrok po kroku\u201d, kt\u00f3ra nie pozostawia miejsca na domys\u0142y.\r\n <\/span>\r\n <\/li>\r\n\r\n\r\n \r\n <li class=\"benefit-item\">\r\n <span class=\"benefit-dot\" aria-hidden=\"true\"><\/span>\r\n <span class=\"benefit-text\">\r\n <strong>Targi<\/strong> \u2013 Zdobywaj kontrakty i wygrywaj przetargi, prezentuj\u0105c gotowe rozwi\u0105zania jeszcze przed etapem prototypowania.\r\n <\/span>\r\n <\/li>\r\n\r\n \r\n <li class=\"benefit-item\">\r\n <span class=\"benefit-dot\" aria-hidden=\"true\"><\/span>\r\n <span class=\"benefit-text\">\r\n <strong>Szkolenie personelu<\/strong> - Wiedza dost\u0119pna natychmiast, bez koszt\u00f3w powtarzania sesji.\r\n <\/span>\r\n <\/li>\r\n\r\n \r\n <li class=\"benefit-item\">\r\n <span class=\"benefit-dot\" aria-hidden=\"true\"><\/span>\r\n <span class=\"benefit-text\">\r\n <strong>Elastyczno\u015b\u0107 <\/strong> - Twoja inwestycja nie traci na wa\u017cno\u015bci \u2013 aktualizujemy istniej\u0105c\u0105 animacj\u0119 wraz z ewolucj\u0105 Twojego produktu.\r\n <\/span>\r\n <\/li>\r\n\r\n \r\n\r\n <\/ul>\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"benefits-right\">\r\n\r\n \r\n <img decoding=\"async\"\r\n class=\"benefits-img\"\r\n src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/05\/linia_produkcyjna_widok_z_gory_202605050335.webp\"\r\n alt=\"Animacja medyczna Creative Zen \u2013 reanimacja, szkolenie personelu medycznego\"\r\n loading=\"lazy\"\r\n \/>\r\n \r\n\r\n \r\n <div class=\"benefits-img-overlay\" aria-hidden=\"true\"><\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-123e92fd e-con-full e-flex e-con e-parent\" data-id=\"123e92fd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-5a88877b e-con-full e-flex e-con e-child\" data-id=\"5a88877b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4b5672a8 elementor-widget elementor-widget-html\" data-id=\"4b5672a8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!DOCTYPE html>\r\n<html lang=\"pl\">\r\n<head>\r\n <meta charset=\"UTF-8\"\/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Creative Zen \u2013 Proces pracy<\/title>\r\n\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin\/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n :root {\r\n --accent: #4ade80;\r\n --accent-line: rgba(74,222,128,0.40);\r\n --text: #ffffff;\r\n --muted: rgba(255,255,255,0.58); \/* ja\u015bniejszy muted dla czytelno\u015bci *\/\r\n --border: rgba(255,255,255,0.10);\r\n --card-bg: rgba(255,255,255,0.04);\r\n --card-glow: rgba(74,222,128,0.08);\r\n --font: 'Inter', sans-serif;\r\n --px: clamp(24px, 6vw, 80px);\r\n }\r\n\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n html { font-size: 16px; }\r\n body { font-family: var(--font); color: var(--text); background: transparent; overflow-x: hidden; }\r\n\r\n\r\n \/* \u2550\u2550 SEKCJA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .process-section {\r\n position: relative;\r\n padding: clamp(64px, 9vw, 112px) var(--px);\r\n overflow: hidden;\r\n }\r\n\r\n \/* Dekoracje t\u0142a *\/\r\n .deco-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }\r\n .deco-glow-top {\r\n position: absolute; top: -80px; left: 50%;\r\n transform: translateX(-50%);\r\n width: 700px; height: 320px; border-radius: 50%;\r\n background: radial-gradient(ellipse, rgba(74,222,128,0.07) 0%, transparent 70%);\r\n pointer-events: none;\r\n }\r\n .deco-left {\r\n position: absolute; left: -20px; top: 50%;\r\n transform: translateY(-50%); opacity: 0.07; pointer-events: none;\r\n }\r\n .deco-right {\r\n position: absolute; right: -20px; top: 50%;\r\n transform: translateY(-50%); opacity: 0.07; pointer-events: none;\r\n }\r\n\r\n\r\n \/* \u2550\u2550 TYTU\u0141 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .process-title {\r\n position: relative; z-index: 1;\r\n text-align: center;\r\n margin-bottom: clamp(44px, 6vw, 72px);\r\n }\r\n\r\n \/* TYTU\u0141 SEKCJI \u2013 zmie\u0144 tekst w <h2> *\/\r\n .process-title h2 {\r\n font-size: clamp(1.6rem, 4vw, 2.8rem);\r\n font-weight: 800;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n color: var(--text);\r\n line-height: 1.12;\r\n }\r\n\r\n\r\n \/* \u2550\u2550 SIATKA KROK\u00d3W \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n Uk\u0142ad: [1][2][3] g\u00f3rny rz\u0105d + [4][5] dolny rz\u0105d\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .steps-grid { position: relative; z-index: 1; }\r\n\r\n .steps-row-top {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: clamp(14px, 2vw, 22px);\r\n }\r\n\r\n .steps-row-bottom {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: clamp(14px, 2vw, 22px);\r\n max-width: 72%;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* Pionowy \u0142\u0105cznik mi\u0119dzy rz\u0119dami *\/\r\n .row-connector {\r\n display: flex; justify-content: center; align-items: center;\r\n height: clamp(24px, 3.5vw, 36px);\r\n position: relative; z-index: 1;\r\n }\r\n .row-connector::before {\r\n content: ''; position: absolute; left: 50%; top: 0; bottom: 0;\r\n width: 1px;\r\n background: linear-gradient(to bottom, var(--accent-line), transparent);\r\n transform: translateX(-50%);\r\n }\r\n .connector-diamond {\r\n width: 9px; height: 9px;\r\n border: 1.5px solid var(--accent);\r\n background: transparent;\r\n transform: rotate(45deg);\r\n z-index: 2; flex-shrink: 0;\r\n }\r\n\r\n\r\n \/* \u2550\u2550 KARTA KROKU \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .step-card {\r\n position: relative;\r\n background: var(--card-bg);\r\n border: 1px solid var(--border);\r\n border-radius: 14px;\r\n \/* Wi\u0119cej paddingu \u2013 tekst ma wi\u0119cej przestrzeni *\/\r\n padding: clamp(28px, 3.5vw, 44px) clamp(24px, 3vw, 36px);\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px; \/* wi\u0119kszy gap mi\u0119dzy elementami karty *\/\r\n box-shadow:\r\n inset 0 1px 0 rgba(255,255,255,0.06),\r\n 0 0 40px var(--card-glow);\r\n transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;\r\n overflow: hidden;\r\n }\r\n .step-card:hover {\r\n border-color: rgba(74,222,128,0.28);\r\n box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 64px rgba(74,222,128,0.14);\r\n transform: translateY(-3px);\r\n }\r\n \/* Subtelna po\u015bwiata wewn\u0105trz karty *\/\r\n .step-card::before {\r\n content: ''; position: absolute; top: -30px; left: -30px;\r\n width: 140px; height: 140px; border-radius: 50%;\r\n background: radial-gradient(circle, rgba(74,222,128,0.08) 0%, transparent 70%);\r\n pointer-events: none;\r\n }\r\n\r\n \/* Strza\u0142ka mi\u0119dzy kartami w rz\u0119dzie *\/\r\n .step-card.has-arrow-right { overflow: visible; }\r\n .step-card.has-arrow-right::after {\r\n content: ''; position: absolute; top: 50%;\r\n right: calc(-1 * clamp(14px, 2vw, 22px));\r\n width: clamp(14px, 2vw, 22px); height: 1px;\r\n background: linear-gradient(to right, var(--accent-line), transparent);\r\n transform: translateY(-50%); z-index: 2; pointer-events: none;\r\n }\r\n\r\n\r\n \/* \u2550\u2550 NUMER KROKU \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .step-number {\r\n font-size: 0.70rem; \/* nieco wi\u0119kszy od poprzedniego *\/\r\n font-weight: 700;\r\n letter-spacing: 0.18em;\r\n text-transform: uppercase;\r\n color: var(--accent);\r\n }\r\n\r\n\r\n \/* \u2550\u2550 IKONA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n Kontener ikony \u2013 wi\u0119kszy ni\u017c poprzednio\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .step-icon-wrap {\r\n width: clamp(52px, 6vw, 68px); \/* WI\u0118KSZY kontener *\/\r\n height: clamp(52px, 6vw, 68px);\r\n border-radius: 14px;\r\n background: rgba(74,222,128,0.08); \/* lekkie zielone t\u0142o ikony *\/\r\n border: 1px solid rgba(74,222,128,0.18);\r\n display: flex; align-items: center; justify-content: center;\r\n flex-shrink: 0;\r\n }\r\n .step-icon-wrap svg {\r\n width: 58%; \/* ikona zajmuje 58% kontenera *\/\r\n height: 58%;\r\n }\r\n\r\n\r\n \/* \u2550\u2550 NAZWA KROKU \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .step-name {\r\n \/* WYRA\u0179NIE WI\u0118KSZY tekst ni\u017c poprzednio *\/\r\n font-size: clamp(0.90rem, 1.5vw, 1.05rem);\r\n font-weight: 700;\r\n letter-spacing: 0.06em; \/* mniej spacing = czytelniej *\/\r\n text-transform: uppercase;\r\n color: var(--text);\r\n line-height: 1.35;\r\n margin-bottom: 0;\r\n }\r\n\r\n\r\n \/* \u2550\u2550 OPIS KROKU \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n Wyra\u017anie wi\u0119kszy i ja\u015bniejszy ni\u017c poprzednio\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .step-desc {\r\n font-size: clamp(0.83rem, 1.3vw, 0.95rem); \/* WI\u0118KSZY od poprzedniego *\/\r\n font-weight: 400; \/* normalny zamiast 300 \u2013 czytelniejszy *\/\r\n line-height: 1.72;\r\n color: var(--muted); \/* ja\u015bniejszy muted *\/\r\n }\r\n\r\n \/* Dodatkowy tag (opcjonalny) \u2013 np. \"\u2713 Akceptacja klienta\" *\/\r\n .step-tag {\r\n display: inline-flex; align-items: center; gap: 5px;\r\n font-size: 0.72rem; font-weight: 600;\r\n color: var(--accent);\r\n background: rgba(74,222,128,0.10);\r\n border: 1px solid rgba(74,222,128,0.20);\r\n border-radius: 100px;\r\n padding: 4px 10px;\r\n width: fit-content;\r\n margin-top: 4px;\r\n }\r\n\r\n\r\n \/* \u2550\u2550 RESPONSYWNO\u015a\u0106 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n @media (max-width: 860px) {\r\n .steps-row-top { grid-template-columns: repeat(2, 1fr); }\r\n .steps-row-bottom { max-width: 100%; grid-template-columns: repeat(2, 1fr); }\r\n .step-card.has-arrow-right::after { display: none; }\r\n }\r\n @media (max-width: 540px) {\r\n .steps-row-top,\r\n .steps-row-bottom { grid-template-columns: 1fr; max-width: 100%; }\r\n .step-card { padding: 24px 20px; }\r\n .row-connector { display: none; }\r\n .process-title h2 { letter-spacing: 0.03em; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"process-section\">\r\n\r\n \r\n <div class=\"deco-bg\" aria-hidden=\"true\">\r\n <div class=\"deco-glow-top\"><\/div>\r\n\r\n <svg class=\"deco-left\" width=\"220\" height=\"520\" viewBox=\"0 0 220 520\" fill=\"none\">\r\n <line x1=\"60\" y1=\"20\" x2=\"60\" y2=\"500\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <line x1=\"60\" y1=\"80\" x2=\"160\" y2=\"80\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <line x1=\"60\" y1=\"200\" x2=\"200\" y2=\"200\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <line x1=\"60\" y1=\"320\" x2=\"140\" y2=\"320\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <line x1=\"60\" y1=\"430\" x2=\"180\" y2=\"430\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <circle cx=\"60\" cy=\"80\" r=\"4\" fill=\"none\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <circle cx=\"160\" cy=\"80\" r=\"3\" fill=\"white\"\/>\r\n <circle cx=\"60\" cy=\"200\" r=\"4\" fill=\"none\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <circle cx=\"200\" cy=\"200\" r=\"3\" fill=\"white\"\/>\r\n <circle cx=\"60\" cy=\"320\" r=\"4\" fill=\"none\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <circle cx=\"140\" cy=\"320\" r=\"3\" fill=\"white\"\/>\r\n <circle cx=\"60\" cy=\"430\" r=\"4\" fill=\"none\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <circle cx=\"180\" cy=\"430\" r=\"3\" fill=\"white\"\/>\r\n <\/svg>\r\n\r\n <svg class=\"deco-right\" width=\"220\" height=\"520\" viewBox=\"0 0 220 520\" fill=\"none\">\r\n <line x1=\"160\" y1=\"20\" x2=\"160\" y2=\"500\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <line x1=\"160\" y1=\"120\" x2=\"60\" y2=\"120\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <line x1=\"160\" y1=\"240\" x2=\"20\" y2=\"240\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <line x1=\"160\" y1=\"360\" x2=\"80\" y2=\"360\" stroke=\"white\" stroke-width=\"1\"\/>\r\n <circle cx=\"160\" cy=\"120\" r=\"4\" fill=\"none\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <circle cx=\"60\" cy=\"120\" r=\"3\" fill=\"white\"\/>\r\n <circle cx=\"160\" cy=\"240\" r=\"4\" fill=\"none\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <circle cx=\"20\" cy=\"240\" r=\"3\" fill=\"white\"\/>\r\n <circle cx=\"160\" cy=\"360\" r=\"4\" fill=\"none\" stroke=\"white\" stroke-width=\"1.2\"\/>\r\n <circle cx=\"80\" cy=\"360\" r=\"3\" fill=\"white\"\/>\r\n <\/svg>\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"process-title\">\r\n <h2>Od briefu do gotowej animacji<\/h2>\r\n <\/div>\r\n\r\n\r\n <div class=\"steps-grid\">\r\n\r\n \r\n <div class=\"steps-row-top\">\r\n\r\n \r\n <div class=\"step-card has-arrow-right\">\r\n <span class=\"step-number\">Krok 01<\/span>\r\n\r\n \r\n <div class=\"step-icon-wrap\">\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\r\n \r\n <rect x=\"10\" y=\"4\" width=\"28\" height=\"36\" rx=\"3\"\r\n stroke=\"rgba(255,255,255,0.80)\" stroke-width=\"1.8\"\/>\r\n \r\n <path d=\"M28 4 L38 14 L28 14 Z\"\r\n stroke=\"rgba(255,255,255,0.55)\" stroke-width=\"1.4\"\r\n stroke-linejoin=\"round\" fill=\"rgba(255,255,255,0.06)\"\/>\r\n \r\n <line x1=\"15\" y1=\"22\" x2=\"33\" y2=\"22\" stroke=\"rgba(255,255,255,0.60)\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\r\n <line x1=\"15\" y1=\"28\" x2=\"33\" y2=\"28\" stroke=\"rgba(255,255,255,0.60)\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\r\n <line x1=\"15\" y1=\"34\" x2=\"26\" y2=\"34\" stroke=\"rgba(255,255,255,0.45)\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <\/div>\r\n\r\n \r\n <p class=\"step-name\">Brief & Materia\u0142y<\/p>\r\n\r\n \r\n <p class=\"step-desc\">\r\n Dostarczasz pliki CAD, rysunki techniczne, dokumentacj\u0119 lub szczeg\u00f3\u0142owy opis.\r\n Nie masz modelu 3D? Tworzymy go od podstaw.\r\n <\/p>\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"step-card has-arrow-right\">\r\n <span class=\"step-number\">Krok 02<\/span>\r\n\r\n \r\n <div class=\"step-icon-wrap\">\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\r\n \r\n <rect x=\"6\" y=\"10\" width=\"36\" height=\"7\" rx=\"2\"\r\n stroke=\"rgba(255,255,255,0.80)\" stroke-width=\"1.8\"\/>\r\n \r\n <line x1=\"14\" y1=\"10\" x2=\"11\" y2=\"17\" stroke=\"rgba(255,255,255,0.55)\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\r\n <line x1=\"21\" y1=\"10\" x2=\"18\" y2=\"17\" stroke=\"rgba(255,255,255,0.55)\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\r\n <line x1=\"28\" y1=\"10\" x2=\"25\" y2=\"17\" stroke=\"rgba(255,255,255,0.55)\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\r\n <line x1=\"35\" y1=\"10\" x2=\"32\" y2=\"17\" stroke=\"rgba(255,255,255,0.55)\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\r\n \r\n <rect x=\"6\" y=\"17\" width=\"36\" height=\"22\" rx=\"2\"\r\n stroke=\"rgba(255,255,255,0.80)\" stroke-width=\"1.8\"\/>\r\n \r\n <rect x=\"10\" y=\"21\" width=\"12\" height=\"9\" rx=\"1\"\r\n stroke=\"rgba(255,255,255,0.45)\" stroke-width=\"1.2\"\/>\r\n <rect x=\"26\" y=\"21\" width=\"12\" height=\"9\" rx=\"1\"\r\n stroke=\"rgba(255,255,255,0.45)\" stroke-width=\"1.2\"\/>\r\n <line x1=\"10\" y1=\"34\" x2=\"38\" y2=\"34\" stroke=\"rgba(255,255,255,0.35)\" stroke-width=\"1\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <\/div>\r\n\r\n \r\n <p class=\"step-name\">Scenariusz i storyboard<\/p>\r\n\r\n \r\n <p class=\"step-desc\">\r\n Projektujemy sekwencj\u0119 kadr\u00f3w, uj\u0119cia i narracj\u0119.\r\n Storyboard akceptujesz Ty.\r\n <\/p>\r\n <span class=\"step-tag\">\u2713 Akceptacja klienta<\/span>\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"step-card\">\r\n <span class=\"step-number\">Krok 03<\/span>\r\n\r\n \r\n <div class=\"step-icon-wrap\">\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\r\n \r\n \r\n <path d=\"M24 6 L40 15 L24 24 L8 15 Z\"\r\n stroke=\"rgba(255,255,255,0.80)\" stroke-width=\"1.8\"\r\n stroke-linejoin=\"round\" fill=\"rgba(255,255,255,0.05)\"\/>\r\n \r\n <path d=\"M8 15 L8 33 L24 42 L24 24 Z\"\r\n stroke=\"rgba(255,255,255,0.65)\" stroke-width=\"1.8\"\r\n stroke-linejoin=\"round\" fill=\"rgba(255,255,255,0.03)\"\/>\r\n \r\n <path d=\"M24 24 L24 42 L40 33 L40 15 Z\"\r\n stroke=\"rgba(255,255,255,0.80)\" stroke-width=\"1.8\"\r\n stroke-linejoin=\"round\" fill=\"rgba(255,255,255,0.07)\"\/>\r\n \r\n <line x1=\"24\" y1=\"24\" x2=\"24\" y2=\"42\"\r\n stroke=\"rgba(255,255,255,0.45)\" stroke-width=\"1.2\"\/>\r\n <\/svg>\r\n <\/div>\r\n\r\n \r\n <p class=\"step-name\">Modelowanie 3D<\/p>\r\n\r\n \r\n <p class=\"step-desc\">\r\n Budujemy precyzyjny model 3D Twojego produktu, maszyny lub urz\u0105dzenia\r\n z uwzgl\u0119dnieniem wszystkich detali mechanicznych i funkcjonalnych.\r\n <\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"row-connector\" aria-hidden=\"true\">\r\n <div class=\"connector-diamond\"><\/div>\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"steps-row-bottom\">\r\n\r\n \r\n <div class=\"step-card has-arrow-right\">\r\n <span class=\"step-number\">Krok 04<\/span>\r\n\r\n \r\n <div class=\"step-icon-wrap\">\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\r\n \r\n <rect x=\"4\" y=\"8\" width=\"40\" height=\"26\" rx=\"3\"\r\n stroke=\"rgba(255,255,255,0.80)\" stroke-width=\"1.8\"\/>\r\n \r\n <path d=\"M19 16 L34 21 L19 26 Z\"\r\n fill=\"rgba(255,255,255,0.70)\"\r\n stroke=\"rgba(255,255,255,0.70)\" stroke-width=\"1\"\r\n stroke-linejoin=\"round\"\/>\r\n \r\n <line x1=\"24\" y1=\"34\" x2=\"24\" y2=\"40\"\r\n stroke=\"rgba(255,255,255,0.55)\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\r\n \r\n <line x1=\"16\" y1=\"40\" x2=\"32\" y2=\"40\"\r\n stroke=\"rgba(255,255,255,0.55)\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/>\r\n \r\n <rect x=\"33\" y=\"11\" width=\"8\" height=\"5\" rx=\"1\"\r\n fill=\"rgba(74,222,128,0.20)\" stroke=\"rgba(74,222,128,0.50)\" stroke-width=\"1\"\/>\r\n <text x=\"34.5\" y=\"15.2\" font-size=\"3.8\"\r\n fill=\"rgba(74,222,128,0.90)\"\r\n font-family=\"Inter, sans-serif\" font-weight=\"800\">4K<\/text>\r\n <\/svg>\r\n <\/div>\r\n\r\n \r\n <p class=\"step-name\">Animacja i Rendering <\/p>\r\n\r\n \r\n <p class=\"step-desc\">\r\n Tworzymy p\u0142ynn\u0105 animacj\u0119 z pe\u0142nym renderingiem.\r\n Ruchome cz\u0119\u015bci, przekroje, widoki rozstrzelone \u2014 wszystko czego potrzebujesz.\r\n Lektor i ud\u017awi\u0119kowienie opcjonalnie.\r\n <\/p>\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"step-card\">\r\n <span class=\"step-number\">Krok 05<\/span>\r\n\r\n \r\n <div class=\"step-icon-wrap\">\r\n <svg viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\r\n \r\n <path d=\"M24 5 L40 12 L40 26 C40 35 24 44 24 44 C24 44 8 35 8 26 L8 12 Z\"\r\n stroke=\"rgba(255,255,255,0.80)\" stroke-width=\"1.8\"\r\n stroke-linejoin=\"round\" fill=\"rgba(74,222,128,0.07)\"\/>\r\n \r\n <path d=\"M16 24 L22 30 L33 18\"\r\n stroke=\"rgba(255,255,255,0.90)\" stroke-width=\"2.4\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <\/svg>\r\n <\/div>\r\n\r\n \r\n <p class=\"step-name\">Korekty i finalizacja<\/p>\r\n\r\n \r\n <p class=\"step-desc\">\r\n Rundy korekt dop\u00f3ki efekt Ci\u0119 nie zachwyci.\r\n Eksport w wybranych formatach: MP4, MOV, p\u0119tla targowa,\r\n QR-kod do instrukcji lub opakowania. Gotowe do u\u017cycia od razu.\r\n <\/p>\r\n <span class=\"step-tag\">\u2713 Gotowe do u\u017cycia<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7be8d3a5 elementor-widget elementor-widget-html\" data-id=\"7be8d3a5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!DOCTYPE html>\r\n<html lang=\"pl\">\r\n<head>\r\n <meta charset=\"UTF-8\"\/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Creative Zen \u2013 FAQ & O w\u0142a\u015bcicielu<\/title>\r\n\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin\/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n\r\n :root {\r\n --accent: #4ade80;\r\n --text: #ffffff;\r\n --text-muted: rgba(255,255,255,0.50);\r\n --border: rgba(255,255,255,0.10);\r\n --card-bg: rgba(255,255,255,0.04);\r\n --font: 'Inter', sans-serif;\r\n --px: clamp(24px, 6vw, 80px);\r\n }\r\n\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n html { font-size: 16px; }\r\n body {\r\n font-family: var(--font);\r\n color: var(--text);\r\n background: transparent;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* \u2550\u2550 SEKCJA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .faq-section {\r\n padding: clamp(60px, 8vw, 100px) var(--px);\r\n }\r\n\r\n .faq-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: clamp(14px, 2vw, 24px);\r\n align-items: stretch; \/* \u2190 obie karty tej samej wysoko\u015bci *\/\r\n }\r\n\r\n \/* \u2550\u2550 KARTY \u2013 wsp\u00f3lne \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .card {\r\n background: var(--card-bg);\r\n border: 1px solid var(--border);\r\n border-radius: 16px;\r\n padding: clamp(28px, 4vw, 44px);\r\n box-shadow:\r\n inset 0 1px 0 rgba(255,255,255,0.06),\r\n 0 8px 40px rgba(0,0,0,0.25);\r\n \/* Kluczowe \u2013 karta wype\u0142nia ca\u0142\u0105 wysoko\u015b\u0107 kom\u00f3rki gridu *\/\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n \/* \u2550\u2550 LEWA KARTA \u2013 FAQ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .faq-title {\r\n font-size: clamp(2.8rem, 6vw, 4.2rem);\r\n font-weight: 800;\r\n letter-spacing: -0.02em;\r\n line-height: 1.0;\r\n color: var(--text);\r\n margin-bottom: clamp(24px, 3.5vw, 36px);\r\n }\r\n\r\n .faq-list {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1; \/* \u2190 lista ro\u015bnie by wype\u0142ni\u0107 kart\u0119 *\/\r\n justify-content: space-between; \/* pytania roz\u0142o\u017cone r\u00f3wnomiernie *\/\r\n }\r\n\r\n .faq-item {\r\n border-top: 1px solid var(--border);\r\n }\r\n .faq-item:last-child {\r\n border-bottom: 1px solid var(--border);\r\n }\r\n\r\n .faq-btn {\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 12px;\r\n padding: 18px 0;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n text-align: left;\r\n }\r\n\r\n .faq-q-text {\r\n font-size: clamp(0.72rem, 1.3vw, 0.84rem);\r\n font-weight: 600;\r\n letter-spacing: 0.10em;\r\n text-transform: uppercase;\r\n color: var(--text);\r\n line-height: 1.4;\r\n }\r\n\r\n .faq-chevron {\r\n flex-shrink: 0;\r\n width: 22px; height: 22px;\r\n display: flex; align-items: center; justify-content: center;\r\n transition: transform 0.28s ease;\r\n }\r\n .faq-chevron svg {\r\n width: 14px; height: 14px;\r\n stroke: rgba(255,255,255,0.60);\r\n fill: none;\r\n stroke-width: 2;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n .faq-item.open .faq-chevron { transform: rotate(180deg); }\r\n .faq-item.open .faq-chevron svg { stroke: var(--accent); }\r\n\r\n .faq-body {\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.32s ease;\r\n }\r\n .faq-item.open .faq-body { max-height: 400px; }\r\n\r\n .faq-a-text {\r\n padding-bottom: 18px;\r\n font-size: clamp(0.77rem, 1.2vw, 0.86rem);\r\n font-weight: 300;\r\n line-height: 1.72;\r\n color: var(--text-muted);\r\n }\r\n\r\n \/* \u2550\u2550 PRAWA KARTA \u2013 W\u0141A\u015aCICIEL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .owner-header {\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n gap: 16px;\r\n margin-bottom: clamp(20px, 3vw, 30px);\r\n }\r\n\r\n .owner-name {\r\n font-size: clamp(1.5rem, 3.2vw, 2.2rem);\r\n font-weight: 700;\r\n letter-spacing: -0.01em;\r\n line-height: 1.15;\r\n color: var(--text);\r\n }\r\n\r\n .owner-role {\r\n font-size: 0.75rem;\r\n font-weight: 400;\r\n color: var(--text-muted);\r\n margin-top: 5px;\r\n letter-spacing: 0.04em;\r\n }\r\n\r\n .owner-photo {\r\n width: clamp(72px, 9vw, 96px);\r\n height: clamp(72px, 9vw, 96px);\r\n border-radius: 50%;\r\n object-fit: cover;\r\n flex-shrink: 0;\r\n border: 2px solid rgba(74, 222, 128, 0.30);\r\n box-shadow: 0 0 20px rgba(74, 222, 128, 0.10);\r\n }\r\n\r\n .owner-divider {\r\n border: none;\r\n border-top: 1px solid var(--border);\r\n margin-bottom: clamp(20px, 3vw, 28px);\r\n }\r\n\r\n .owner-text {\r\n font-size: clamp(0.84rem, 1.4vw, 0.96rem);\r\n font-weight: 300;\r\n line-height: 1.78;\r\n color: rgba(255,255,255,0.80);\r\n flex: 1; \/* \u2190 tekst wype\u0142nia pozosta\u0142e miejsce w karcie *\/\r\n }\r\n\r\n .owner-text strong {\r\n font-weight: 600;\r\n color: var(--text);\r\n }\r\n\r\n .owner-cta {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n margin-top: clamp(20px, 3vw, 28px);\r\n padding: 11px 22px;\r\n background: none;\r\n border: 1.5px solid rgba(255,255,255,0.25);\r\n border-radius: 4px;\r\n color: var(--text);\r\n font-family: var(--font);\r\n font-size: 0.68rem;\r\n font-weight: 600;\r\n letter-spacing: 0.16em;\r\n text-transform: uppercase;\r\n text-decoration: none;\r\n cursor: pointer;\r\n transition: background 0.20s, border-color 0.20s;\r\n align-self: flex-start; \/* \u2190 przycisk nie rozci\u0105ga si\u0119 na ca\u0142\u0105 szeroko\u015b\u0107 *\/\r\n }\r\n .owner-cta:hover {\r\n background: rgba(255,255,255,0.06);\r\n border-color: rgba(255,255,255,0.50);\r\n }\r\n .owner-cta svg {\r\n width: 12px; height: 12px;\r\n stroke: currentColor;\r\n fill: none;\r\n stroke-width: 2;\r\n stroke-linecap: round;\r\n flex-shrink: 0;\r\n transition: transform 0.18s;\r\n }\r\n .owner-cta:hover svg { transform: translateX(3px); }\r\n\r\n \/* \u2550\u2550 RESPONSYWNO\u015a\u0106 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n @media (max-width: 760px) {\r\n .faq-grid {\r\n grid-template-columns: 1fr;\r\n gap: clamp(14px, 3vw, 20px);\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .card { padding: 22px 18px; }\r\n .faq-title { font-size: 2.4rem; }\r\n .owner-name { font-size: 1.5rem; }\r\n .owner-photo { width: 64px; height: 64px; }\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"faq-section\">\r\n <div class=\"faq-grid\">\r\n\r\n \r\n <div class=\"card\">\r\n <h2 class=\"faq-title\">FAQ<\/h2>\r\n <div class=\"faq-list\">\r\n\r\n <div class=\"faq-item\">\r\n <button class=\"faq-btn\" onclick=\"toggleFaq(this)\" aria-expanded=\"false\">\r\n <span class=\"faq-q-text\">Czy musz\u0119 dostarczy\u0107 model 3D lub pliki CAD?<\/span>\r\n <span class=\"faq-chevron\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 14 9\"><path d=\"M1 1L7 7L13 1\"\/><\/svg>\r\n <\/span>\r\n <\/button>\r\n <div class=\"faq-body\">\r\n <p class=\"faq-a-text\">\r\n Nie jest to wymagane, ale mile widziane. Je\u015bli posiadasz pliki CAD\r\n lub modele 3D urz\u0105dzenia, mo\u017cemy je wykorzysta\u0107 jako baz\u0119 \u2014 skraca to\r\n czas realizacji i obni\u017ca koszt. Je\u015bli nie masz modeli, tworzymy je\r\n od podstaw na bazie dokumentacji technicznej, zdj\u0119\u0107 referencyjnych\r\n lub Twojego opisu. \r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <button class=\"faq-btn\" onclick=\"toggleFaq(this)\" aria-expanded=\"false\">\r\n <span class=\"faq-q-text\">Ile trwa realizacja projektu?<\/span>\r\n <span class=\"faq-chevron\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 14 9\"><path d=\"M1 1L7 7L13 1\"\/><\/svg>\r\n <\/span>\r\n <\/button>\r\n <div class=\"faq-body\">\r\n <p class=\"faq-a-text\">\r\n Czas zale\u017cy od z\u0142o\u017cono\u015bci projektu. Orientacyjnie:<br><br>\r\n \u2014 Animacja 2D edukacyjna (do 60 sek.): <strong>3\u20134 tygodnie<\/strong><br>\r\n \u2014 Animacja 3D (do 90 sek.): <strong>3\u20136 tygodni<\/strong><br>\r\n \u2014 Animacja chirurgiczna \/ zaawansowana 3D: <strong>4\u20138 tygodni<\/strong><br><br>\r\n Po bezp\u0142atnej konsultacji podajemy konkretny harmonogram \u2014 je\u015bli masz\r\n kr\u00f3tki deadline, postaramy si\u0119 dostosowa\u0107.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <button class=\"faq-btn\" onclick=\"toggleFaq(this)\" aria-expanded=\"false\">\r\n <span class=\"faq-q-text\">Ile rund korekt jest wliczone w cen\u0119?<\/span>\r\n <span class=\"faq-chevron\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 14 9\"><path d=\"M1 1L7 7L13 1\"\/><\/svg>\r\n <\/span>\r\n <\/button>\r\n <div class=\"faq-body\">\r\n <p class=\"faq-a-text\">\r\n Nie ma okre\u015blonej liczby poprawek \u2014 natomiast staramy si\u0119 wzajemnie\r\n szanowa\u0107 sw\u00f3j czas i omawia\u0107 ka\u017cdy etap z osobna, by unikn\u0105\u0107 nag\u0142ych\r\n zmian wizualnych, kt\u00f3re powoduj\u0105 dodatkowy nak\u0142ad pracy.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\">\r\n <button class=\"faq-btn\" onclick=\"toggleFaq(this)\" aria-expanded=\"false\">\r\n <span class=\"faq-q-text\">Jakie formaty wideo dostarczacie?<\/span>\r\n <span class=\"faq-chevron\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 14 9\"><path d=\"M1 1L7 7L13 1\"\/><\/svg>\r\n <\/span>\r\n <\/button>\r\n <div class=\"faq-body\">\r\n <p class=\"faq-a-text\">\r\n Standardowo dostarczamy pliki w formatach: <strong>MP4 (H.264)<\/strong>\r\n do publikacji online, <strong>MOV<\/strong> do dalszej postprodukcji.\r\n Na \u017cyczenie przygotowujemy te\u017c wersje na ekrany targowe oraz warianty\r\n w proporcjach 1:1 i 9:16 na media spo\u0142eczno\u015bciowe. Klient powinien\r\n okre\u015bli\u0107 jaki format jest mu niezb\u0119dny jeszcze przed rozpocz\u0119ciem prac.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"card\">\r\n\r\n <div class=\"owner-header\">\r\n <div>\r\n <h3 class=\"owner-name\">Pawe\u0142 Kempisty<\/h3>\r\n <p class=\"owner-role\">Za\u0142o\u017cyciel & Creative Director<\/p>\r\n <\/div>\r\n <img decoding=\"async\" class=\"owner-photo\"\r\n src=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2025\/11\/e81aa2db-6296-4edc-bd16-9026355a7cfe-e1762790081447.webp\"\r\n alt=\"Pawe\u0142 Kempisty \u2013 za\u0142o\u017cyciel Creative Zen\"\r\n loading=\"lazy\"\/>\r\n <\/div>\r\n\r\n <hr class=\"owner-divider\"\/>\r\n\r\n <p class=\"owner-text\">\r\n Jako za\u0142o\u017cyciel firmy, chcia\u0142bym serdecznie podzi\u0119kowa\u0107 za zainteresowanie\r\n naszymi us\u0142ugami! Naszym celem jest budowanie d\u0142ugotrwa\u0142ych relacji opartych\r\n na zaufaniu i wsp\u00f3\u0142pracy. Po\u0142\u0105czmy si\u0142y i stw\u00f3rzmy co\u015b niezapomnianego!\r\n <\/p>\r\n\r\n <a href=\"#kontakt\" class=\"owner-cta\">\r\n Napisz do nas\r\n <svg viewBox=\"0 0 16 16\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M3 8H13M9 4L13 8L9 12\"\/>\r\n <\/svg>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n function toggleFaq(btn) {\r\n var item = btn.closest('.faq-item');\r\n var isOpen = item.classList.contains('open');\r\n document.querySelectorAll('.faq-item.open').forEach(function(openItem) {\r\n openItem.classList.remove('open');\r\n openItem.querySelector('.faq-btn').setAttribute('aria-expanded', 'false');\r\n });\r\n if (!isOpen) {\r\n item.classList.add('open');\r\n btn.setAttribute('aria-expanded', 'true');\r\n }\r\n }\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6b01a791 e-con-full e-flex e-con e-parent\" data-id=\"6b01a791\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1030c6de elementor-widget elementor-widget-html\" data-id=\"1030c6de\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pl\">\r\n<head>\r\n <meta charset=\"UTF-8\"\/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Creative Zen \u2013 Kontakt<\/title>\r\n\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin\/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n \r\n <script async src=\"https:\/\/www.googletagmanager.com\/gtag\/js?id=AW-16743616939\"><\/script>\r\n <script>\r\n window.dataLayer = window.dataLayer || [];\r\n function gtag(){dataLayer.push(arguments);}\r\n gtag('js', new Date());\r\n gtag('config', 'AW-16743616939');\r\n <\/script>\r\n\r\n \r\n <script>\r\n function gtag_report_conversion(url) {\r\n var callback = function () {\r\n if (typeof(url) != 'undefined') {\r\n window.location = url;\r\n }\r\n };\r\n gtag('event', 'conversion', {\r\n 'send_to': 'AW-16743616939\/CpjrCKDauqgcEKuj_a8-',\r\n 'value': 1.0,\r\n 'currency': 'PLN',\r\n 'event_callback': callback\r\n });\r\n return false;\r\n }\r\n <\/script>\r\n\r\n <style>\r\n :root {\r\n --accent: #4ade80;\r\n --accent-dim: rgba(74,222,128,0.12);\r\n --text: #ffffff;\r\n --muted: rgba(255,255,255,0.48);\r\n --border: rgba(255,255,255,0.09);\r\n --border-focus: rgba(74,222,128,0.55);\r\n --font: 'Inter', sans-serif;\r\n --px: clamp(20px, 5vw, 72px);\r\n }\r\n\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n html { font-size: 16px; }\r\n body {\r\n font-family: var(--font);\r\n color: var(--text);\r\n background: transparent;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* \u2550\u2550 SEKCJA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .contact-section {\r\n padding: clamp(48px, 7vw, 96px) var(--px) 0;\r\n }\r\n\r\n \/* \u2550\u2550 NAG\u0141\u00d3WEK \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .contact-header {\r\n text-align: center;\r\n margin-bottom: clamp(36px, 5vw, 56px);\r\n }\r\n .contact-label-tag {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 0.68rem;\r\n font-weight: 600;\r\n letter-spacing: 0.18em;\r\n text-transform: uppercase;\r\n color: var(--accent);\r\n margin-bottom: 14px;\r\n }\r\n .contact-label-tag::before,\r\n .contact-label-tag::after {\r\n content: '';\r\n width: 24px; height: 1px;\r\n background: var(--accent);\r\n opacity: 0.6;\r\n }\r\n .contact-title {\r\n font-size: clamp(2rem, 4.5vw, 3.4rem);\r\n font-weight: 300;\r\n letter-spacing: -0.02em;\r\n line-height: 1.12;\r\n }\r\n .contact-title strong { font-weight: 800; }\r\n .contact-subtitle {\r\n margin-top: 14px;\r\n font-size: clamp(0.88rem, 1.3vw, 1rem);\r\n font-weight: 300;\r\n color: var(--muted);\r\n line-height: 1.7;\r\n }\r\n .contact-subtitle .highlight {\r\n color: var(--accent);\r\n font-weight: 600;\r\n }\r\n\r\n \/* \u2550\u2550 G\u0141\u00d3WNY GRID \u2013 lewa \/ prawa \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .contact-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1.35fr;\r\n gap: clamp(20px, 3vw, 36px);\r\n align-items: start;\r\n }\r\n\r\n \/* \u2550\u2550 LEWA KOLUMNA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .left-col {\r\n display: flex;\r\n flex-direction: column;\r\n gap: clamp(16px, 2.5vw, 24px);\r\n }\r\n\r\n \/* Karta danych kontaktowych *\/\r\n .info-card {\r\n background: rgba(255,255,255,0.035);\r\n border: 1px solid var(--border);\r\n border-radius: 16px;\r\n padding: clamp(20px, 3vw, 32px);\r\n display: flex;\r\n flex-direction: column;\r\n gap: clamp(18px, 2.5vw, 24px);\r\n }\r\n\r\n .contact-row {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n }\r\n .contact-icon {\r\n flex-shrink: 0;\r\n width: 46px; height: 46px;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.08);\r\n border: 1.5px solid rgba(255,255,255,0.14);\r\n display: flex; align-items: center; justify-content: center;\r\n transition: background 0.22s, border-color 0.22s;\r\n }\r\n .contact-row:hover .contact-icon {\r\n background: rgba(255,255,255,0.14);\r\n border-color: rgba(255,255,255,0.28);\r\n }\r\n .contact-icon svg {\r\n width: 20px; height: 20px;\r\n fill: var(--text);\r\n }\r\n .contact-text { display: flex; flex-direction: column; gap: 1px; }\r\n .contact-lbl {\r\n font-size: 0.60rem;\r\n font-weight: 600;\r\n letter-spacing: 0.12em;\r\n text-transform: uppercase;\r\n color: var(--muted);\r\n }\r\n .contact-val {\r\n font-size: clamp(0.88rem, 1.4vw, 1.05rem);\r\n font-weight: 500;\r\n color: var(--text);\r\n text-decoration: none;\r\n transition: color 0.2s;\r\n }\r\n a.contact-val:hover { color: var(--accent); }\r\n\r\n \/* Mapka *\/\r\n .map-wrap {\r\n border-radius: 14px;\r\n overflow: hidden;\r\n border: 1px solid rgba(255,255,255,0.10);\r\n box-shadow: 0 12px 40px rgba(0,0,0,0.45);\r\n aspect-ratio: 16 \/ 7;\r\n position: relative;\r\n }\r\n .map-wrap iframe {\r\n width: 100%; height: 100%;\r\n border: none; display: block;\r\n filter: grayscale(30%) brightness(0.82) contrast(1.05);\r\n transition: filter 0.35s;\r\n }\r\n .map-wrap:hover iframe { filter: grayscale(0%) brightness(0.94); }\r\n .map-overlay {\r\n position: absolute; inset: 0; z-index: 1; cursor: pointer;\r\n }\r\n\r\n \/* \u2550\u2550 PRAWA KOLUMNA \u2013 FORMULARZ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .right-col {}\r\n\r\n .contact-card {\r\n background: rgba(255,255,255,0.032);\r\n border: 1px solid var(--border);\r\n border-radius: 20px;\r\n padding: clamp(24px, 3.5vw, 44px);\r\n }\r\n\r\n .contact-form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: clamp(14px, 2vw, 20px);\r\n }\r\n\r\n .form-row {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: clamp(10px, 1.5vw, 16px);\r\n }\r\n\r\n .form-group {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 6px;\r\n }\r\n\r\n label {\r\n font-size: 0.66rem;\r\n font-weight: 600;\r\n letter-spacing: 0.10em;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,0.52);\r\n transition: color 0.2s;\r\n }\r\n .form-group:focus-within > label { color: var(--accent); }\r\n\r\n .req { color: var(--accent); margin-left: 2px; }\r\n\r\n input, textarea {\r\n width: 100%;\r\n background: rgba(255,255,255,0.06) !important;\r\n border: 1px solid var(--border);\r\n border-radius: 10px;\r\n padding: 13px 15px;\r\n color: #ffffff !important;\r\n -webkit-text-fill-color: #ffffff !important;\r\n font-family: var(--font);\r\n font-size: 0.88rem;\r\n font-weight: 400;\r\n line-height: 1.5;\r\n outline: none;\r\n -webkit-appearance: none;\r\n -webkit-box-shadow: 0 0 0 1000px rgba(18,18,18,0.95) inset !important;\r\n transition: border-color 0.22s, box-shadow 0.22s;\r\n }\r\n input::placeholder, textarea::placeholder {\r\n color: rgba(255,255,255,0.28) !important;\r\n -webkit-text-fill-color: rgba(255,255,255,0.28) !important;\r\n }\r\n input:focus, textarea:focus {\r\n border-color: var(--border-focus);\r\n box-shadow: 0 0 0 3px rgba(74,222,128,0.08);\r\n -webkit-box-shadow: 0 0 0 1000px rgba(10,28,14,0.97) inset !important;\r\n }\r\n textarea {\r\n resize: vertical;\r\n min-height: 120px;\r\n }\r\n\r\n \/* \u2500\u2500 Checkboxy \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n .checks-group {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n }\r\n .form-check {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 11px;\r\n cursor: pointer;\r\n }\r\n .form-check input[type=\"checkbox\"] {\r\n position: absolute;\r\n opacity: 0; width: 0; height: 0;\r\n }\r\n .check-box {\r\n width: 19px; height: 19px; min-width: 19px;\r\n border-radius: 5px;\r\n border: 1.5px solid rgba(255,255,255,0.22);\r\n background: rgba(255,255,255,0.04);\r\n display: flex; align-items: center; justify-content: center;\r\n margin-top: 1px;\r\n transition: border-color 0.2s, background 0.2s;\r\n flex-shrink: 0;\r\n }\r\n .check-box svg {\r\n width: 10px; height: 10px;\r\n stroke: #060606;\r\n opacity: 0;\r\n transition: opacity 0.15s;\r\n }\r\n .form-check input[type=\"checkbox\"]:checked ~ .check-box {\r\n background: var(--accent);\r\n border-color: var(--accent);\r\n }\r\n .form-check input[type=\"checkbox\"]:checked ~ .check-box svg { opacity: 1; }\r\n .form-check input[type=\"checkbox\"]:focus ~ .check-box {\r\n box-shadow: 0 0 0 3px rgba(74,222,128,0.20);\r\n }\r\n .check-label {\r\n font-size: 0.70rem;\r\n font-weight: 300;\r\n color: rgba(255,255,255,0.50);\r\n line-height: 1.65;\r\n text-transform: none;\r\n letter-spacing: 0;\r\n cursor: pointer;\r\n user-select: none;\r\n }\r\n .check-label a {\r\n color: rgba(255,255,255,0.72);\r\n text-decoration: underline;\r\n text-underline-offset: 2px;\r\n transition: color 0.18s;\r\n }\r\n .check-label a:hover { color: var(--accent); }\r\n\r\n \/* \u2500\u2500 Przycisk \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n .btn-submit {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n width: 100%;\r\n padding: 15px 28px;\r\n background: var(--accent);\r\n border: none;\r\n border-radius: 10px;\r\n color: #060606;\r\n font-family: var(--font);\r\n font-size: 0.76rem;\r\n font-weight: 700;\r\n letter-spacing: 0.14em;\r\n text-transform: uppercase;\r\n cursor: pointer;\r\n transition: background 0.22s, transform 0.18s, box-shadow 0.22s;\r\n margin-top: 2px;\r\n }\r\n .btn-submit:hover {\r\n background: #6ee7a0;\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 28px rgba(74,222,128,0.28);\r\n }\r\n .btn-submit:active { transform: translateY(0); }\r\n .btn-submit svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform 0.2s; }\r\n .btn-submit:hover svg { transform: translateX(3px); }\r\n .btn-submit .spinner {\r\n display: none;\r\n width: 15px; height: 15px;\r\n border: 2px solid rgba(6,6,6,0.25);\r\n border-top-color: #060606;\r\n border-radius: 50%;\r\n animation: spin 0.7s linear infinite;\r\n }\r\n .btn-submit.loading .spinner { display: block; }\r\n .btn-submit.loading .btn-text,\r\n .btn-submit.loading .btn-arrow { display: none; }\r\n @keyframes spin { to { transform: rotate(360deg); } }\r\n\r\n \/* \u2500\u2500 Sukces \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n .form-success {\r\n display: none;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: 14px;\r\n padding: clamp(24px, 4vw, 44px) 0;\r\n }\r\n .form-success.visible { display: flex; }\r\n .success-icon {\r\n width: 52px; height: 52px;\r\n border-radius: 50%;\r\n background: var(--accent-dim);\r\n border: 1px solid rgba(74,222,128,0.28);\r\n display: flex; align-items: center; justify-content: center;\r\n }\r\n .success-icon svg { width: 24px; height: 24px; color: var(--accent); }\r\n .success-title { font-size: 1.2rem; font-weight: 700; }\r\n .success-desc {\r\n font-size: 0.86rem; font-weight: 300;\r\n color: var(--muted); line-height: 1.7;\r\n max-width: 320px;\r\n }\r\n\r\n \/* \u2500\u2500 B\u0142\u0105d \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n .form-error-msg {\r\n display: none;\r\n font-size: 0.70rem; color: #f87171;\r\n text-align: center; padding: 10px 14px;\r\n background: rgba(248,113,113,0.08);\r\n border: 1px solid rgba(248,113,113,0.20);\r\n border-radius: 8px;\r\n }\r\n .form-error-msg.visible { display: block; }\r\n\r\n \/* \u2550\u2550 STOPKA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .footer-bar {\r\n margin-top: clamp(32px, 5vw, 56px);\r\n padding: clamp(14px, 2.5vw, 22px) var(--px);\r\n border-top: 1px solid var(--border);\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 16px;\r\n flex-wrap: wrap;\r\n }\r\n .footer-copy {\r\n font-size: clamp(0.72rem, 1vw, 0.82rem);\r\n font-weight: 300;\r\n color: var(--muted);\r\n }\r\n .footer-policy {\r\n font-size: clamp(0.72rem, 1vw, 0.82rem);\r\n font-weight: 400;\r\n color: var(--muted);\r\n text-decoration: none;\r\n text-underline-offset: 3px;\r\n transition: color 0.20s;\r\n }\r\n .footer-policy:hover { color: var(--text); text-decoration: underline; }\r\n\r\n \/* \u2550\u2550 RESPONSYWNO\u015a\u0106 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n @media (max-width: 860px) {\r\n .contact-grid { grid-template-columns: 1fr; }\r\n .left-col { flex-direction: row; flex-wrap: wrap; gap: 16px; }\r\n .info-card { flex: 1; min-width: 260px; }\r\n .map-wrap { flex: 1; min-width: 260px; aspect-ratio: 16\/9; }\r\n }\r\n\r\n @media (max-width: 560px) {\r\n .contact-section { padding-left: 16px; padding-right: 16px; }\r\n .form-row { grid-template-columns: 1fr; }\r\n .contact-card { padding: 22px 18px; }\r\n .left-col { flex-direction: column; }\r\n .map-wrap { aspect-ratio: 4\/3; }\r\n .footer-bar { padding-left: 16px; padding-right: 16px; flex-direction: column; align-items: flex-start; gap: 8px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"contact-section\" id=\"kontakt\">\r\n\r\n \r\n <div class=\"contact-header\">\r\n <div class=\"contact-label-tag\">Napisz do nas<\/div>\r\n <h2 class=\"contact-title\">Napisz po <strong>szybk\u0105 wycen\u0119<\/strong><\/h2>\r\n <p class=\"contact-subtitle\">\r\n Opisz sw\u00f3j projekt \u2014 <span class=\"highlight\">zazwyczaj odpowiadamy w 30 minut!<\/span>\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"contact-grid\">\r\n\r\n \r\n <div class=\"left-col\">\r\n\r\n \r\n <div class=\"info-card\">\r\n\r\n <div class=\"contact-row\">\r\n <div class=\"contact-icon\">\r\n <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2\r\n 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1\r\n C8.6 21 3 15.4 3 8.5 3 7.9 3.4 7.5 4 7.5H7.5\r\n c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"contact-text\">\r\n <span class=\"contact-lbl\">Telefon<\/span>\r\n <a class=\"contact-val\" href=\"tel:+48733024929\">+48 733 024 929<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"contact-row\">\r\n <div class=\"contact-icon\">\r\n <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M20 4H4C2.9 4 2 4.9 2 6v12c0 1.1.9 2 2 2h16\r\n c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2z\r\n M20 8l-8 5-8-5V6l8 5 8-5v2z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"contact-text\">\r\n <span class=\"contact-lbl\">E-mail<\/span>\r\n <a class=\"contact-val\" href=\"mailto:kontakt@creativezen.pl\">kontakt@creativezen.pl<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"contact-row\">\r\n <div class=\"contact-icon\">\r\n <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M12 2 L2 7 L2 22 L9 22 L9 15 L15 15 L15 22 L22 22 L22 7 Z\"\/>\r\n <rect x=\"5\" y=\"10\" width=\"3\" height=\"3\" fill=\"#09090b\" rx=\"0.3\"\/>\r\n <rect x=\"11\" y=\"10\" width=\"3\" height=\"3\" fill=\"#09090b\" rx=\"0.3\"\/>\r\n <rect x=\"16\" y=\"10\" width=\"3\" height=\"3\" fill=\"#09090b\" rx=\"0.3\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"contact-text\">\r\n <span class=\"contact-lbl\">Numer NIP<\/span>\r\n <span class=\"contact-val\">5234060479<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"map-wrap\">\r\n <a class=\"map-overlay\"\r\n href=\"https:\/\/maps.google.com\/?q=Aleje+Jerozolimskie+109,+02-011+Warszawa\"\r\n target=\"_blank\" rel=\"noopener noreferrer\"\r\n aria-label=\"Otw\u00f3rz lokalizacj\u0119 Creative Zen w Google Maps\">\r\n <\/a>\r\n <iframe\r\n src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d2444.0!2d20.9884!3d52.2215!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x471eccce28f0ef7b%3A0xdc1d19cb57c65c38!2sAleje%20Jerozolimskie%20109%2C%2002-011%20Warszawa!5e0!3m2!1spl!2spl!4v1700000000000!5m2!1spl!2spl\"\r\n allowfullscreen=\"\" loading=\"lazy\"\r\n referrerpolicy=\"no-referrer-when-downgrade\"\r\n title=\"Lokalizacja Creative Zen\">\r\n <\/iframe>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"right-col\">\r\n <div class=\"contact-card\">\r\n\r\n \r\n <div class=\"form-success\" id=\"formSuccess\">\r\n <div class=\"success-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"\/>\r\n <\/svg>\r\n <\/div>\r\n <p class=\"success-title\">Wiadomo\u015b\u0107 wys\u0142ana!<\/p>\r\n <p class=\"success-desc\">Dzi\u0119kujemy za kontakt. Odezwiemy si\u0119 najszybciej jak to mo\u017cliwe \u2014 zazwyczaj w 30 minut!<\/p>\r\n <\/div>\r\n\r\n \r\n <form class=\"contact-form\" id=\"contactForm\"\r\n action=\"https:\/\/formspree.io\/f\/xbdwyzbe\"\r\n method=\"POST\">\r\n\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"name\">Imi\u0119 i nazwisko \/ Nazwa <span class=\"req\">*<\/span><\/label>\r\n <input type=\"text\" id=\"name\" name=\"Imi\u0119 i nazwisko \/ Nazwa\"\r\n placeholder=\"Jan Kowalski \/ Firma XYZ\" required autocomplete=\"name\"\/>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"phone\">Telefon<\/label>\r\n <input type=\"tel\" id=\"phone\" name=\"Telefon\"\r\n placeholder=\"+48 500 000 000\" autocomplete=\"tel\"\/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"email\">Adres e-mail <span class=\"req\">*<\/span><\/label>\r\n <input type=\"email\" id=\"email\" name=\"Email\"\r\n placeholder=\"jan@firma.pl\" required autocomplete=\"email\"\/>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"message\">Wiadomo\u015b\u0107 <span class=\"req\">*<\/span><\/label>\r\n <textarea id=\"message\" name=\"Wiadomo\u015b\u0107\"\r\n placeholder=\"Opisz sw\u00f3j projekt \u2014 czego dotyczy, jaki masz cel, termin realizacji...\"\r\n required><\/textarea>\r\n <\/div>\r\n\r\n <div class=\"checks-group\">\r\n\r\n <label class=\"form-check\">\r\n <input type=\"checkbox\" name=\"Polityka prywatno\u015bci\"\r\n value=\"Tak, zapozna\u0142em\/am si\u0119 z polityk\u0105 prywatno\u015bci\" required\/>\r\n <span class=\"check-box\">\r\n <svg viewBox=\"0 0 12 12\" fill=\"none\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"2 6 5 9 10 3\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"check-label\">\r\n Zapozna\u0142am\/em si\u0119 z <a href=\"https:\/\/creativezen.pl\/polityka-prywatnosci\/\"\r\n target=\"_blank\" rel=\"noopener noreferrer\">\u201epolityk\u0105 prywatno\u015bci\"<\/a>. <span class=\"req\">*<\/span>\r\n <\/span>\r\n <\/label>\r\n\r\n <label class=\"form-check\">\r\n <input type=\"checkbox\" name=\"Zgoda marketingowa\"\r\n value=\"Tak, zgadzam si\u0119 na otrzymywanie informacji handlowych\"\/>\r\n <span class=\"check-box\">\r\n <svg viewBox=\"0 0 12 12\" fill=\"none\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"2 6 5 9 10 3\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"check-label\">\r\n Zgadzam si\u0119 na otrzymywanie na podany przeze mnie adres e-mail informacji handlowych.\r\n <\/span>\r\n <\/label>\r\n\r\n <\/div>\r\n\r\n <div class=\"form-error-msg\" id=\"formError\">\r\n Wysy\u0142ka nie powiod\u0142a si\u0119. Spr\u00f3buj ponownie lub napisz bezpo\u015brednio na adres e-mail.\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"btn-submit\" id=\"submitBtn\">\r\n <span class=\"btn-text\">Wy\u015blij wiadomo\u015b\u0107<\/span>\r\n <svg class=\"btn-arrow\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"1.8\" stroke-linecap=\"round\">\r\n <path d=\"M3 8h10M9 4l4 4-4 4\"\/>\r\n <\/svg>\r\n <span class=\"spinner\"><\/span>\r\n <\/button>\r\n\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<div class=\"footer-bar\">\r\n <span class=\"footer-copy\">\u00a9 2026 Creative Zen. Wszelkie prawa zastrze\u017cone.<\/span>\r\n <a class=\"footer-policy\"\r\n href=\"https:\/\/creativezen.pl\/polityka-prywatnosci\/\"\r\n target=\"_blank\" rel=\"noopener noreferrer\">\r\n Polityka prywatno\u015bci\r\n <\/a>\r\n<\/div>\r\n\r\n<script>\r\n var form = document.getElementById('contactForm');\r\n var submitBtn = document.getElementById('submitBtn');\r\n var formSuccess = document.getElementById('formSuccess');\r\n var formError = document.getElementById('formError');\r\n\r\n form.addEventListener('submit', async function(e) {\r\n e.preventDefault();\r\n formError.classList.remove('visible');\r\n submitBtn.classList.add('loading');\r\n submitBtn.disabled = true;\r\n\r\n try {\r\n var response = await fetch(form.action, {\r\n method: 'POST',\r\n body: new FormData(form),\r\n headers: { 'Accept': 'application\/json' }\r\n });\r\n if (response.ok) {\r\n form.style.display = 'none';\r\n formSuccess.classList.add('visible');\r\n \/\/ Zg\u0142o\u015b konwersj\u0119 do Google Ads\r\n gtag_report_conversion();\r\n } else {\r\n throw new Error('error');\r\n }\r\n } catch (err) {\r\n formError.classList.add('visible');\r\n submitBtn.classList.remove('loading');\r\n submitBtn.disabled = false;\r\n }\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\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>Creative Zen \u2013 Nawigacja CREATIVE ZEN Baza Wiedzy O Nas Us\u0142ugi Blog Kontakt Creative Zen \u2013 Hero Animacja Techniczna Twoja przegl\u0105darka nie obs\u0142uguje wideo HTML5. Maszyny \u2022 Urz\u0105dzenia \u2022 Linie produkcyjne \u2022 Instrukcje monta\u017cu AnimacjaTechniczna Poka\u017c jak dzia\u0142a Tw\u00f3j produkt \u2014 zanim trafi do klienta. Precyzyjne animacje 3D maszyn, urz\u0105dze\u0144 i linii produkcyjnych. Napisz do […]<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","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":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","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":"set","ast-page-background-enabled":"default","ast-page-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-6895","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Animacja techniczna -<\/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:\/\/creativezen.pl\/en\/animacja-techniczna\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animacja techniczna -\" \/>\n<meta property=\"og:description\" content=\"Creative Zen \u2013 Nawigacja CREATIVE ZEN Baza Wiedzy O Nas Us\u0142ugi Blog Kontakt Creative Zen \u2013 Hero Animacja Techniczna Twoja przegl\u0105darka nie obs\u0142uguje wideo HTML5. Maszyny \u2022 Urz\u0105dzenia \u2022 Linie produkcyjne \u2022 Instrukcje monta\u017cu AnimacjaTechniczna Poka\u017c jak dzia\u0142a Tw\u00f3j produkt \u2014 zanim trafi do klienta. Precyzyjne animacje 3D maszyn, urz\u0105dze\u0144 i linii produkcyjnych. Napisz do […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativezen.pl\/en\/animacja-techniczna\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-14T19:31:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/OCHNIK-1.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativezen.pl\\\/animacja-techniczna\\\/\",\"url\":\"https:\\\/\\\/creativezen.pl\\\/animacja-techniczna\\\/\",\"name\":\"Animacja techniczna -\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/creativezen.pl\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/creativezen.pl\\\/animacja-techniczna\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/creativezen.pl\\\/animacja-techniczna\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/creativezen.pl\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/OCHNIK-1.webp\",\"datePublished\":\"2026-05-05T00:21:14+00:00\",\"dateModified\":\"2026-10-14T19:31:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativezen.pl\\\/animacja-techniczna\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativezen.pl\\\/animacja-techniczna\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/creativezen.pl\\\/animacja-techniczna\\\/#primaryimage\",\"url\":\"https:\\\/\\\/creativezen.pl\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/OCHNIK-1.webp\",\"contentUrl\":\"https:\\\/\\\/creativezen.pl\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/OCHNIK-1.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativezen.pl\\\/animacja-techniczna\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\\\/\\\/creativezen.pl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animacja techniczna\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/creativezen.pl\\\/#website\",\"url\":\"https:\\\/\\\/creativezen.pl\\\/\",\"name\":\"CreativeZen\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/creativezen.pl\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/creativezen.pl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/creativezen.pl\\\/#organization\",\"name\":\"CreativeZen\",\"url\":\"https:\\\/\\\/creativezen.pl\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/creativezen.pl\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/creativezen.pl\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/Creative_zen_4k_transparent_logo_compressed_06-scaled.webp\",\"contentUrl\":\"https:\\\/\\\/creativezen.pl\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/Creative_zen_4k_transparent_logo_compressed_06-scaled.webp\",\"width\":2560,\"height\":421,\"caption\":\"CreativeZen\"},\"image\":{\"@id\":\"https:\\\/\\\/creativezen.pl\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.youtube.com\\\/@CreativeZen-PL\",\"https:\\\/\\\/www.instagram.com\\\/creativezen.pl\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@creativezen.pl\"]}]}<\/script>\n","yoast_head_json":{"title":"Animacja techniczna -","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:\/\/creativezen.pl\/en\/animacja-techniczna\/","og_locale":"en_GB","og_type":"article","og_title":"Animacja techniczna -","og_description":"Creative Zen \u2013 Nawigacja CREATIVE ZEN Baza Wiedzy O Nas Us\u0142ugi Blog Kontakt Creative Zen \u2013 Hero Animacja Techniczna Twoja przegl\u0105darka nie obs\u0142uguje wideo HTML5. Maszyny \u2022 Urz\u0105dzenia \u2022 Linie produkcyjne \u2022 Instrukcje monta\u017cu AnimacjaTechniczna Poka\u017c jak dzia\u0142a Tw\u00f3j produkt \u2014 zanim trafi do klienta. Precyzyjne animacje 3D maszyn, urz\u0105dze\u0144 i linii produkcyjnych. Napisz do […]","og_url":"https:\/\/creativezen.pl\/en\/animacja-techniczna\/","article_modified_time":"2026-10-14T19:31:17+00:00","og_image":[{"url":"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/OCHNIK-1.webp","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Estimated reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativezen.pl\/animacja-techniczna\/","url":"https:\/\/creativezen.pl\/animacja-techniczna\/","name":"Animacja techniczna -","isPartOf":{"@id":"https:\/\/creativezen.pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativezen.pl\/animacja-techniczna\/#primaryimage"},"image":{"@id":"https:\/\/creativezen.pl\/animacja-techniczna\/#primaryimage"},"thumbnailUrl":"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/OCHNIK-1.webp","datePublished":"2026-05-05T00:21:14+00:00","dateModified":"2026-10-14T19:31:17+00:00","breadcrumb":{"@id":"https:\/\/creativezen.pl\/animacja-techniczna\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativezen.pl\/animacja-techniczna\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/creativezen.pl\/animacja-techniczna\/#primaryimage","url":"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/OCHNIK-1.webp","contentUrl":"https:\/\/creativezen.pl\/wp-content\/uploads\/2026\/03\/OCHNIK-1.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/creativezen.pl\/animacja-techniczna\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/creativezen.pl\/"},{"@type":"ListItem","position":2,"name":"Animacja techniczna"}]},{"@type":"WebSite","@id":"https:\/\/creativezen.pl\/#website","url":"https:\/\/creativezen.pl\/","name":"CreativeZen","description":"","publisher":{"@id":"https:\/\/creativezen.pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creativezen.pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/creativezen.pl\/#organization","name":"CreativeZen","url":"https:\/\/creativezen.pl\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/creativezen.pl\/#\/schema\/logo\/image\/","url":"https:\/\/creativezen.pl\/wp-content\/uploads\/2024\/09\/Creative_zen_4k_transparent_logo_compressed_06-scaled.webp","contentUrl":"https:\/\/creativezen.pl\/wp-content\/uploads\/2024\/09\/Creative_zen_4k_transparent_logo_compressed_06-scaled.webp","width":2560,"height":421,"caption":"CreativeZen"},"image":{"@id":"https:\/\/creativezen.pl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.youtube.com\/@CreativeZen-PL","https:\/\/www.instagram.com\/creativezen.pl\/","https:\/\/www.tiktok.com\/@creativezen.pl"]}]}},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"oo2vzexdlxrd","author_link":"https:\/\/creativezen.pl\/en\/author\/oo2vzexdlxrd\/"},"uagb_comment_info":0,"uagb_excerpt":"Creative Zen \u2013 Nawigacja CREATIVE ZEN Baza Wiedzy O Nas Us\u0142ugi Blog Kontakt Creative Zen \u2013 Hero Animacja Techniczna Twoja przegl\u0105darka nie obs\u0142uguje wideo HTML5. Maszyny \u2022 Urz\u0105dzenia \u2022 Linie produkcyjne \u2022 Instrukcje monta\u017cu AnimacjaTechniczna Poka\u017c jak dzia\u0142a Tw\u00f3j produkt \u2014 zanim trafi do klienta. Precyzyjne animacje 3D maszyn, urz\u0105dze\u0144 i linii produkcyjnych. Napisz do…","_links":{"self":[{"href":"https:\/\/creativezen.pl\/en\/wp-json\/wp\/v2\/pages\/6895","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativezen.pl\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/creativezen.pl\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/creativezen.pl\/en\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/creativezen.pl\/en\/wp-json\/wp\/v2\/comments?post=6895"}],"version-history":[{"count":76,"href":"https:\/\/creativezen.pl\/en\/wp-json\/wp\/v2\/pages\/6895\/revisions"}],"predecessor-version":[{"id":7376,"href":"https:\/\/creativezen.pl\/en\/wp-json\/wp\/v2\/pages\/6895\/revisions\/7376"}],"wp:attachment":[{"href":"https:\/\/creativezen.pl\/en\/wp-json\/wp\/v2\/media?parent=6895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}