{"id":2013,"date":"2023-10-27T22:36:27","date_gmt":"2023-10-27T22:36:27","guid":{"rendered":"https:\/\/ashley-demo.bslthemes.com\/?page_id=15"},"modified":"2026-04-17T04:20:07","modified_gmt":"2026-04-17T02:20:07","slug":"home","status":"publish","type":"page","link":"https:\/\/graczakdesign.pl\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Graczak Design<\/title>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n \r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n\r\n :root {\r\n --brand-purple: #7c3aed;\r\n }\r\n\r\n body, html { margin: 0; padding: 0; scroll-behavior: smooth; background-color: #ffffff; font-family: 'Inter', sans-serif; }\r\n \r\n #hero-static-clean {\r\n position: relative;\r\n width: 100%;\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n overflow: hidden;\r\n background: #ffffff;\r\n }\r\n\r\n \/* FIOLETOWA PO\u015aWIATA W TLE HERO *\/\r\n .hero-aurora {\r\n position: absolute; left: 50%; top: 50%; height: 70vh; width: 80vw;\r\n transform: translate(-50%, -50%); border-radius: 50%;\r\n filter: blur(100px); pointer-events: none; z-index: 0;\r\n background: radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.15) 0%, rgba(124, 58, 237, 0.05) 40%, transparent 70%);\r\n animation: hero-breathe 8s ease-in-out infinite alternate;\r\n }\r\n @keyframes hero-breathe { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; } 100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } }\r\n\r\n #dots-canvas-static { position: absolute; inset: 0; z-index: 1; pointer-events: none; }\r\n\r\n \/* === PRZYKLEJONE LOGO (FIXED) === *\/\r\n .fixed-logo-container {\r\n position: fixed; top: 0; left: 0;\r\n padding: 40px 60px; z-index: 5006; height: 140px;\r\n display: flex; align-items: center;\r\n transition: opacity 0.3s ease;\r\n }\r\n .fixed-logo-container img { height: 60px; width: auto; display: block; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; }\r\n .fixed-logo-container:hover img { transform: scale(1.05); }\r\n\r\n \/* === G\u00d3RNY HEADER (MENU DESKTOPOWE) === *\/\r\n .main-header {\r\n position: absolute;\r\n top: 0; left: 0; width: 100%;\r\n padding: 40px 60px;\r\n z-index: 100;\r\n box-sizing: border-box;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n transition: opacity 0.5s ease;\r\n }\r\n\r\n body.menu-open .main-header { opacity: 0; pointer-events: none; }\r\n\r\n .nav-center-list {\r\n display: flex; list-style: none; gap: 40px; margin: 0; padding: 0;\r\n align-items: center;\r\n }\r\n\r\n .nav-main-link {\r\n text-decoration: none; color: #111; font-weight: 600; font-size: 17px;\r\n position: relative; padding: 5px 0; transition: color 0.3s;\r\n }\r\n\r\n .nav-main-link.active {\r\n background: linear-gradient(135deg, #4F46E5 0%, #A855F7 100%);\r\n -webkit-background-clip: text; -webkit-text-fill-color: transparent;\r\n font-weight: 800;\r\n }\r\n\r\n .nav-main-link::after {\r\n content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px;\r\n background: linear-gradient(135deg, #4F46E5 0%, #A855F7 100%);\r\n transition: width 0.4s ease;\r\n }\r\n .nav-main-link:hover::after { width: 100%; }\r\n\r\n \/* === BURGER === *\/\r\n .fixed-ui-container { \r\n position: fixed; top: 0; right: 0; \r\n padding: 40px 60px; z-index: 5005; height: 140px; \r\n display: flex; align-items: center;\r\n }\r\n .menu-toggle { width: 60px; height: 60px; cursor: pointer; display: flex; align-items: center; justify-content: center; }\r\n .hamburger { width: 36px; height: 16px; position: relative; }\r\n .hamburger span {\r\n display: block; position: absolute; height: 3px; width: 100%;\r\n background: #111; border-radius: 3px; transition: all .4s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .hamburger span:nth-child(1) { top: 0; }\r\n .hamburger span:nth-child(2) { bottom: 0; width: 70%; right: 0; }\r\n #menu-toggle.open .hamburger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }\r\n #menu-toggle.open .hamburger span:nth-child(2) { transform: translateY(-6.5px) rotate(-45deg); width: 100%; }\r\n\r\n \/* === MENU OVERLAY === *\/\r\n .menu-overlay {\r\n position: fixed; inset: 0; background: #fff; z-index: 5000;\r\n display: flex; align-items: center; justify-content: center;\r\n clip-path: circle(0% at 95% 5%);\r\n transition: clip-path 0.8s cubic-bezier(0.85, 0, 0.15, 1);\r\n }\r\n .menu-overlay.active { clip-path: circle(150% at 95% 5%); }\r\n .overlay-content { text-align: left; width: 100%; max-width: 1200px; padding: 0 60px; }\r\n .overlay-nav { display: flex; flex-direction: column; gap: 5px; }\r\n .nav-item-wrap { overflow: hidden; display: flex; flex-direction: column; }\r\n \r\n \/* HOVER: \"WYPE\u0141NIANIE KOLOREM\" (TEXT FILL) *\/\r\n .overlay-link {\r\n font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 800; text-decoration: none; color: #111; \r\n line-height: 1.1; letter-spacing: -0.04em; display: inline-block; transform: translateY(100%);\r\n cursor: pointer; position: relative;\r\n transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .overlay-link::before {\r\n content: attr(data-text); position: absolute; left: 0; top: 0; width: 0; height: 100%;\r\n background: linear-gradient(135deg, #4F46E5 0%, #A855F7 100%);\r\n -webkit-background-clip: text; -webkit-text-fill-color: transparent;\r\n overflow: hidden; white-space: nowrap; transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .overlay-link:hover { transform: translateX(15px); }\r\n .overlay-link:hover::before { width: 100%; }\r\n\r\n .overlay-footer { margin-top: 40px; opacity: 0; transform: translateY(20px); }\r\n\r\n \/* CZARNY EMAIL Z FIOLETOWYM PODKRE\u015aLENIEM + POWIADOMIENIE *\/\r\n .overlay-email-link {\r\n text-decoration: none; color: #111; font-weight: 800; font-size: 24px;\r\n position: relative; display: inline-block; padding-bottom: 2px; cursor: pointer;\r\n }\r\n .overlay-email-link::after {\r\n content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px;\r\n background-color: var(--brand-purple); border-radius: 2px;\r\n transform: scaleX(0); transform-origin: right; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .overlay-email-link:hover::after {\r\n transform: scaleX(1); transform-origin: left;\r\n }\r\n\r\n .copy-notification {\r\n position: absolute; left: 100%; top: 50%; transform: translateY(-50%);\r\n margin-left: 15px; background: var(--brand-purple); color: #fff;\r\n padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700;\r\n white-space: nowrap; opacity: 0; pointer-events: none;\r\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .copy-notification.show {\r\n opacity: 1; transform: translateY(-50%) translateX(10px);\r\n }\r\n\r\n \/* === HERO CONTENT === *\/\r\n .hero-content { position: relative; z-index: 2; text-align: center; }\r\n .elegant-title { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.04em; }\r\n .rotator-container { display: inline-flex; flex-direction: column; height: 1.1em; overflow: hidden; vertical-align: top; text-align: left; margin-left: 0.2em; min-width: 300px; }\r\n #word-rotator-static { display: flex; flex-direction: column; }\r\n .rot-word { height: 1.1em; display: flex; align-items: center; background: linear-gradient(135deg, #4F46E5 0%, #A855F7 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }\r\n .line-2 { font-weight: 300; display: block; margin-top: 5px; }\r\n \r\n .btn-outline-elegant { \r\n display: inline-block; margin-top: 30px; padding: 16px 36px; border-radius: 100px; \r\n background: transparent; color: #111; border: 2px solid #111; font-weight: 600; font-size: 16px;\r\n text-decoration: none; position: relative; overflow: hidden; transition: 0.3s; z-index: 1;\r\n cursor: pointer;\r\n }\r\n .btn-outline-elegant::after {\r\n content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;\r\n background: linear-gradient(135deg, #4F46E5 0%, #A855F7 100%);\r\n transform: scaleX(0); transform-origin: right; transition: transform 0.5s ease; z-index: -1;\r\n }\r\n .btn-outline-elegant:hover { color: #fff; border-color: transparent; }\r\n .btn-outline-elegant:hover::after { transform: scaleX(1); transform-origin: left; }\r\n\r\n @media (max-width: 1024px) { .nav-center-list { display: none; } }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section id=\"hero-static-clean\">\r\n <div class=\"hero-aurora\"><\/div>\r\n <canvas id=\"dots-canvas-static\"><\/canvas>\r\n\r\n <div class=\"fixed-logo-container\">\r\n <a href=\"javascript:void(0)\" id=\"logo-link\"><img decoding=\"async\" src=\"https:\/\/graczakdesign.pl\/wp-content\/uploads\/2023\/10\/logo-ikonka-2__1_-removebg-preview.png\" alt=\"Logo\"><\/a>\r\n <\/div>\r\n\r\n <header class=\"main-header\">\r\n <div style=\"width: 60px;\"><\/div>\r\n <nav>\r\n <ul class=\"nav-center-list\">\r\n <li><a href=\"https:\/\/graczakdesign.pl\/\" class=\"nav-main-link active\">Home<\/a><\/li>\r\n <li><a href=\"https:\/\/graczakdesign.pl\/index.php\/services\/\" class=\"nav-main-link\">Us\u0142ugi<\/a><\/li>\r\n <li><a href=\"https:\/\/graczakdesign.pl\/index.php\/portfolio\/\" class=\"nav-main-link\">Portfolio<\/a><\/li>\r\n <li><a href=\"https:\/\/graczakdesign.pl\/index.php\/blog\/\" class=\"nav-main-link\">Blog<\/a><\/li>\r\n <li><a href=\"javascript:void(0)\" id=\"header-contact-link\" class=\"nav-main-link\">Kontakt<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n <div style=\"width: 60px;\"><\/div>\r\n <\/header>\r\n\r\n <div class=\"fixed-ui-container\">\r\n <div class=\"menu-toggle\" id=\"menu-toggle\">\r\n <div class=\"hamburger\">\r\n <span><\/span>\r\n <span><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"menu-overlay\" id=\"menu-overlay\">\r\n <div class=\"overlay-content\">\r\n <nav class=\"overlay-nav\">\r\n <div class=\"nav-item-wrap\"><a href=\"https:\/\/graczakdesign.pl\/\" class=\"overlay-link\" data-text=\"Home\">Home<\/a><\/div>\r\n <div class=\"nav-item-wrap\"><a href=\"https:\/\/graczakdesign.pl\/index.php\/services\/\" class=\"overlay-link\" data-text=\"Us\u0142ugi\">Us\u0142ugi<\/a><\/div>\r\n <div class=\"nav-item-wrap\"><a href=\"https:\/\/graczakdesign.pl\/index.php\/portfolio\/\" class=\"overlay-link\" data-text=\"Portfolio\">Portfolio<\/a><\/div>\r\n <div class=\"nav-item-wrap\"><a href=\"https:\/\/graczakdesign.pl\/index.php\/blog\/\" class=\"overlay-link\" data-text=\"Blog\">Blog<\/a><\/div>\r\n <div class=\"nav-item-wrap\"><a href=\"javascript:void(0)\" id=\"overlay-contact-link\" class=\"overlay-link\" data-text=\"Kontakt\">Kontakt<\/a><\/div>\r\n <\/nav>\r\n <div class=\"overlay-footer\" id=\"overlay-footer\">\r\n <p style=\"font-size: 12px; letter-spacing: 2px; color: #999; margin-bottom: 5px; text-transform: uppercase; font-weight: 600;\">Zacznijmy wsp\u00f3lny projekt<\/p>\r\n <div style=\"position: relative; display: inline-block;\">\r\n <a href=\"javascript:void(0)\" class=\"overlay-email-link\" id=\"copy-email-btn\">kontakt@graczakdesign.pl<\/a>\r\n <span class=\"copy-notification\" id=\"copy-notification\">Skopiowano do schowka!<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-content\">\r\n <h1 class=\"elegant-title\">\r\n <span class=\"static-part\">Projektujemy<\/span> \r\n <span class=\"rotator-container\">\r\n <div id=\"word-rotator-static\">\r\n <span class=\"rot-word\">Wizerunki<\/span>\r\n <span class=\"rot-word\">Brandingi<\/span>\r\n <span class=\"rot-word\">Interfejsy<\/span>\r\n <span class=\"rot-word\">Strony WWW<\/span>\r\n <span class=\"rot-word\">Sklepy online<\/span>\r\n <span class=\"rot-word\">Projekty 2D<\/span>\r\n <span class=\"rot-word\" aria-hidden=\"true\">Wizerunki<\/span>\r\n <\/div>\r\n <\/span>\r\n <div class=\"line-2\">kt\u00f3re dzia\u0142aj\u0105.<\/div>\r\n <\/h1>\r\n <a href=\"javascript:void(0)\" onclick=\"window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });\" class=\"btn-outline-elegant\">Bezp\u0142atna konsultacja<\/a>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n (() => {\r\n const btn = document.getElementById('menu-toggle');\r\n const overlay = document.getElementById('menu-overlay');\r\n const footer = document.getElementById('overlay-footer');\r\n\r\n const menuTl = gsap.timeline({ paused: true });\r\n menuTl.to(\".overlay-link\", { translateY: 0, stagger: 0.1, duration: 0.6, ease: \"power3.out\" })\r\n .to(footer, { opacity: 1, translateY: 0, duration: 0.4 }, \"-=0.3\");\r\n\r\n btn.addEventListener('click', () => {\r\n const isOpen = btn.classList.toggle('open');\r\n overlay.classList.toggle('active');\r\n document.body.classList.toggle('menu-open');\r\n if (isOpen) menuTl.play(); else menuTl.reverse();\r\n });\r\n\r\n \/\/ 1. LOGO PRZENOSI NA G\u00d3R\u0118 STRONY\r\n document.getElementById('logo-link').addEventListener('click', (e) => {\r\n e.preventDefault();\r\n if(document.body.classList.contains('menu-open')) { btn.click(); }\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n });\r\n\r\n \/\/ 2. KOPIOWANIE E-MAILA\r\n document.getElementById('copy-email-btn').addEventListener('click', (e) => {\r\n e.preventDefault();\r\n navigator.clipboard.writeText('kontakt@graczakdesign.pl').then(() => {\r\n const notif = document.getElementById('copy-notification');\r\n notif.classList.add('show');\r\n setTimeout(() => { notif.classList.remove('show'); }, 2000);\r\n });\r\n });\r\n\r\n \/\/ 3. PRZEWIJANIE DO STOPKI\r\n document.getElementById('header-contact-link').addEventListener('click', (e) => {\r\n e.preventDefault();\r\n window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });\r\n });\r\n\r\n document.getElementById('overlay-contact-link').addEventListener('click', (e) => {\r\n e.preventDefault();\r\n btn.click();\r\n setTimeout(() => {\r\n window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });\r\n }, 400); \r\n });\r\n\r\n window.addEventListener('load', () => {\r\n gsap.from(\".main-header\", { y: -20, opacity: 0, duration: 1, ease: \"power3.out\" });\r\n gsap.from(\".fixed-logo-container\", { y: -20, opacity: 0, duration: 1, ease: \"power3.out\" });\r\n gsap.from(\".hero-content\", { y: 30, opacity: 0, duration: 1, delay: 0.3 });\r\n });\r\n\r\n const canvas = document.getElementById('dots-canvas-static');\r\n const ctx = canvas.getContext('2d');\r\n let w, h, dots = [];\r\n const mouse = { x: -1000, y: -1000 };\r\n\r\n class Dot {\r\n constructor(x, y) { this.x = x; this.y = y; this.bx = x; this.by = y; this.vx = 0; this.vy = 0; }\r\n update() {\r\n let dx = mouse.x - this.x, dy = mouse.y - this.y;\r\n let d = Math.sqrt(dx*dx + dy*dy);\r\n if (d < 150) { \r\n let force = (150 - d) \/ 150, angle = Math.atan2(dy, dx);\r\n this.vx -= Math.cos(angle) * force * 3; this.vy -= Math.sin(angle) * force * 3;\r\n }\r\n this.vx += (this.bx - this.x) * 0.02; this.vy += (this.by - this.y) * 0.02;\r\n this.vx *= 0.9; this.vy *= 0.9; this.x += this.vx; this.y += this.vy;\r\n }\r\n draw() { ctx.fillStyle = '#DDD'; ctx.beginPath(); ctx.arc(this.x, this.y, 1.5, 0, Math.PI*2); ctx.fill(); }\r\n }\r\n\r\n function init() {\r\n w = canvas.width = window.innerWidth; h = canvas.height = window.innerHeight;\r\n dots = [];\r\n for (let x = 20; x < w; x += 40) for (let y = 20; y < h; y += 40) dots.push(new Dot(x, y));\r\n }\r\n function anim() { ctx.clearRect(0, 0, w, h); for(let d of dots) { d.update(); d.draw(); } requestAnimationFrame(anim); }\r\n window.addEventListener('mousemove', e => { mouse.x = e.clientX; mouse.y = e.clientY; });\r\n window.addEventListener('resize', init);\r\n init(); anim();\r\n\r\n let idx = 0;\r\n setInterval(() => {\r\n idx++;\r\n gsap.fromTo(\"#word-rotator-static\", { y: -((idx-1) * 1.1) + \"em\"}, { y: -(idx * 1.1) + \"em\", duration: 0.8, ease: \"power4.inOut\" });\r\n if (idx === 6) setTimeout(() => { gsap.set(\"#word-rotator-static\", { y: 0 }); idx = 0; }, 800);\r\n }, 2500);\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<div class=\"elementor-element elementor-element-5202f14 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"5202f14\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"_ha_eqh_enable":false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6f1c408 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"6f1c408\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n \/* --- G\u0141\u00d3WNA SEKCJA --- *\/\r\n .ff-section-bg {\r\n width: 100vw;\r\n position: relative;\r\n left: 50%;\r\n right: 50%;\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n background: linear-gradient(180deg, #ffffff 0%, #F2F2F2 100%) !important; \/* Jasne t\u0142o *\/\r\n padding: 100px 20px; \r\n font-family: 'Inter', sans-serif;\r\n overflow: hidden; \r\n display: block;\r\n }\r\n\r\n \/* --- ANIMACJA TYTU\u0141U --- *\/\r\n .ff-wrapper-title {\r\n font-size: clamp(32px, 5vw, 56px);\r\n font-weight: 400;\r\n text-align: center;\r\n color: #1a1a1a; \/* Ciemny tytu\u0142 *\/\r\n margin-bottom: 60px;\r\n letter-spacing: -0.03em;\r\n line-height: 1.2;\r\n }\r\n\r\n .ff-wrapper-title .letter {\r\n display: inline-block;\r\n opacity: 0;\r\n filter: blur(12px);\r\n transform: translateY(30px);\r\n transition: all 0.9s cubic-bezier(0.2, 0.6, 0.2, 1);\r\n }\r\n\r\n .ff-wrapper-title .letter.active {\r\n opacity: 1;\r\n filter: blur(0px);\r\n transform: translateY(0px);\r\n }\r\n\r\n \/* --- KONTENER KART --- *\/\r\n .ff-container {\r\n max-width: 1200px;\r\n margin: 0 auto; \r\n display: flex !important;\r\n flex-direction: row !important;\r\n gap: 15px;\r\n height: 550px !important; \r\n align-items: stretch !important;\r\n }\r\n\r\n .ff-card {\r\n position: relative;\r\n flex: 1 1 0% !important; \r\n height: 100% !important; \r\n min-width: 80px; \r\n border-radius: 36px;\r\n overflow: hidden; \r\n cursor: pointer;\r\n transition: flex 0.7s cubic-bezier(0.16, 1, 0.3, 1);\r\n opacity: 0;\r\n transform: translateY(60px);\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); \/* Delikatny cie\u0144 dla jasnego motywu *\/\r\n }\r\n\r\n .ff-revealed .ff-card { opacity: 1; transform: translateY(0); }\r\n .ff-revealed .ff-card:nth-child(1) { transition: transform 1s ease 0.1s, opacity 1s ease 0.1s, flex 0.7s cubic-bezier(0.16, 1, 0.3, 1); }\r\n .ff-revealed .ff-card:nth-child(2) { transition: transform 1s ease 0.2s, opacity 1s ease 0.2s, flex 0.7s cubic-bezier(0.16, 1, 0.3, 1); }\r\n .ff-revealed .ff-card:nth-child(3) { transition: transform 1s ease 0.3s, opacity 1s ease 0.3s, flex 0.7s cubic-bezier(0.16, 1, 0.3, 1); }\r\n .ff-revealed .ff-card:nth-child(4) { transition: transform 1s ease 0.4s, opacity 1s ease 0.4s, flex 0.7s cubic-bezier(0.16, 1, 0.3, 1); }\r\n\r\n .ff-card.active { flex: 5 1 0% !important; cursor: default; }\r\n\r\n .ff-bg {\r\n position: absolute; inset: 0; width: 100% !important; height: 100% !important;\r\n object-fit: cover !important; transition: filter 0.5s ease, opacity 0.5s ease;\r\n filter: brightness(0.8) grayscale(0.2); \/* Ja\u015bniejsze t\u0142a kart *\/\r\n z-index: 1;\r\n }\r\n\r\n .ff-portfolio-preview {\r\n position: absolute; inset: 0; width: 100% !important; height: 100% !important;\r\n object-fit: cover !important; opacity: 0; z-index: 2; transition: opacity 0.4s ease;\r\n filter: brightness(0.9); \/* Zwi\u0119kszona jasno\u015b\u0107 na hover *\/\r\n pointer-events: none;\r\n }\r\n\r\n .ff-card.active:has(.ff-step-1:hover) .ff-portfolio-preview-1,\r\n .ff-card.active:has(.ff-step-2:hover) .ff-portfolio-preview-2 { opacity: 1; }\r\n\r\n \/* Gradient zmieniony na jasny (#F2F2F2) aby tekst by\u0142 czytelny *\/\r\n .ff-gradient {\r\n position: absolute; inset: 0;\r\n background: linear-gradient(to top, rgba(242, 242, 242, 1) 0%, rgba(242, 242, 242, 0) 75%);\r\n opacity: 0; transition: opacity 0.8s ease; z-index: 3;\r\n }\r\n .ff-card.active .ff-gradient { opacity: 1; }\r\n\r\n \/* --- NAPRAWA TEKSTU --- *\/\r\n .ff-bottom-content {\r\n position: absolute; bottom: 30px; left: 30px; right: 30px;\r\n display: flex; justify-content: space-between; align-items: flex-end; z-index: 10;\r\n pointer-events: none;\r\n white-space: nowrap; \r\n }\r\n\r\n .ff-text { \r\n width: 450px; \r\n opacity: 0; \r\n transform: translateX(-20px); \r\n transition: opacity 0.2s ease, transform 0.4s ease; \r\n }\r\n\r\n .ff-card.active .ff-text { \r\n opacity: 1; \r\n transform: translateX(0); \r\n pointer-events: auto;\r\n transition: opacity 0.5s ease 0.4s, transform 0.5s ease 0.4s; \r\n white-space: normal; \r\n }\r\n\r\n .ff-text h3 { font-size: 32px; color: #1a1a1a; margin-bottom: 12px; font-weight: bold; line-height: 1.15; } \/* Ciemny tekst *\/\r\n .ff-text p { font-size: 16px; color: rgba(26, 26, 26, 0.85); line-height: 1.5; } \/* Ciemny tekst z opacity *\/\r\n\r\n \/* --- TAGI I KROKI --- *\/\r\n .ff-tag {\r\n background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); border-radius: 30px; color: #1a1a1a; \/* Jasny tag, ciemny tekst *\/\r\n padding: 10px 20px; font-weight: 600; font-size: 14px; border: 1px solid rgba(0, 0, 0, 0.1);\r\n transition: all 0.3s ease;\r\n }\r\n .ff-card.active .ff-tag { opacity: 0; transform: translateY(-15px); }\r\n\r\n .ff-steps { display: flex; gap: 15px; pointer-events: auto; }\r\n .ff-step {\r\n width: 140px; height: 140px; border-radius: 20px;\r\n background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(12px); \/* Jasny krok *\/\r\n padding: 10px; opacity: 0; transform: translateY(40px);\r\n transition: all 0.3s ease;\r\n border: 1px solid rgba(0, 0, 0, 0.05);\r\n }\r\n .ff-card.active .ff-step-1 { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }\r\n .ff-card.active .ff-step-2 { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }\r\n .ff-step img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }\r\n\r\n @media (max-width: 900px) {\r\n .ff-container { flex-direction: column !important; height: 1000px !important; }\r\n .ff-text { width: 100%; }\r\n .ff-step { width: 100px; height: 100px; }\r\n }\r\n<\/style>\r\n\r\n<div class=\"ff-section-bg\" id=\"flipper-section\">\r\n <h2 class=\"ff-wrapper-title\">Nasze rozwi\u0105zania dla Twojego biznesu.<\/h2>\r\n\r\n <div class=\"ff-container\">\r\n <div class=\"ff-card active\" onmouseenter=\"toggleFlipperCard(this)\" onclick=\"toggleFlipperCard(this)\">\r\n <img decoding=\"async\" class=\"ff-bg\" src=\"https:\/\/framerusercontent.com\/images\/N6nWcGmKkdYDhvYS1RN1VoX05k.jpg\">\r\n <img decoding=\"async\" class=\"ff-portfolio-preview ff-portfolio-preview-1\" src=\"https:\/\/framerusercontent.com\/images\/N6nWcGmKkdYDhvYS1RN1VoX05k.jpg\">\r\n <img decoding=\"async\" class=\"ff-portfolio-preview ff-portfolio-preview-2\" src=\"https:\/\/framerusercontent.com\/images\/xWq5qlnMo4nwNQlhbzFUKWqikwQ.jpg\">\r\n <div class=\"ff-gradient\"><\/div>\r\n <div class=\"ff-top-bar\"><div class=\"ff-tag\"><span>Branding<\/span><\/div><\/div>\r\n <div class=\"ff-bottom-content\">\r\n <div class=\"ff-text\">\r\n <h3>Branding oraz identyfikacja wizualna<\/h3>\r\n <p>Tworzymy unikalne wizerunki marek, kt\u00f3re zapadaj\u0105 w pami\u0119\u0107 i buduj\u0105 silne zaufanie.<\/p>\r\n <\/div>\r\n <div class=\"ff-steps\">\r\n <div class=\"ff-step ff-step-1\"><img decoding=\"async\" src=\"https:\/\/framerusercontent.com\/images\/L3ZUTuktdTUOnh2MVQpop8r4M8.png\"><\/div>\r\n <div class=\"ff-step ff-step-2\"><img decoding=\"async\" src=\"https:\/\/framerusercontent.com\/images\/d1Tgw9tBpOs9466ASU4fWd6j1w.png\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ff-card\" onmouseenter=\"toggleFlipperCard(this)\" onclick=\"toggleFlipperCard(this)\">\r\n <img decoding=\"async\" class=\"ff-bg\" src=\"https:\/\/framerusercontent.com\/images\/xWq5qlnMo4nwNQlhbzFUKWqikwQ.jpg\">\r\n <img decoding=\"async\" class=\"ff-portfolio-preview ff-portfolio-preview-1\" src=\"https:\/\/framerusercontent.com\/images\/xWq5qlnMo4nwNQlhbzFUKWqikwQ.jpg\">\r\n <img decoding=\"async\" class=\"ff-portfolio-preview ff-portfolio-preview-2\" src=\"https:\/\/framerusercontent.com\/images\/N6nWcGmKkdYDhvYS1RN1VoX05k.jpg\">\r\n <div class=\"ff-gradient\"><\/div>\r\n <div class=\"ff-top-bar\"><div class=\"ff-tag\"><span>Webdev<\/span><\/div><\/div>\r\n <div class=\"ff-bottom-content\">\r\n <div class=\"ff-text\">\r\n <h3>Projektowanie i optymalizacja stron<\/h3>\r\n <p>Projektujemy nowoczesne i responsywne strony internetowe, kt\u00f3re skutecznie konwertuj\u0105.<\/p>\r\n <\/div>\r\n <div class=\"ff-steps\">\r\n <div class=\"ff-step ff-step-1\"><img decoding=\"async\" src=\"https:\/\/framerusercontent.com\/images\/d1Tgw9tBpOs9466ASU4fWd6j1w.png\"><\/div>\r\n <div class=\"ff-step ff-step-2\"><img decoding=\"async\" src=\"https:\/\/framerusercontent.com\/images\/L3ZUTuktdTUOnh2MVQpop8r4M8.png\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ff-card\" onmouseenter=\"toggleFlipperCard(this)\" onclick=\"toggleFlipperCard(this)\">\r\n <img decoding=\"async\" class=\"ff-bg\" src=\"https:\/\/framerusercontent.com\/images\/N6nWcGmKkdYDhvYS1RN1VoX05k.jpg\">\r\n <img decoding=\"async\" class=\"ff-portfolio-preview ff-portfolio-preview-1\" src=\"https:\/\/framerusercontent.com\/images\/N6nWcGmKkdYDhvYS1RN1VoX05k.jpg\">\r\n <img decoding=\"async\" class=\"ff-portfolio-preview ff-portfolio-preview-2\" src=\"https:\/\/framerusercontent.com\/images\/xWq5qlnMo4nwNQlhbzFUKWqikwQ.jpg\">\r\n <div class=\"ff-gradient\"><\/div>\r\n <div class=\"ff-top-bar\"><div class=\"ff-tag\"><span>Motion<\/span><\/div><\/div>\r\n <div class=\"ff-bottom-content\">\r\n <div class=\"ff-text\">\r\n <h3>Efektywny motion design 2D i 3D<\/h3>\r\n <p>O\u017cywiamy statyczne projekty poprzez dynamiczne animacje, przyci\u0105gaj\u0105c uwag\u0119 odbiorc\u00f3w.<\/p>\r\n <\/div>\r\n <div class=\"ff-steps\">\r\n <div class=\"ff-step ff-step-1\"><img decoding=\"async\" src=\"https:\/\/framerusercontent.com\/images\/L3ZUTuktdTUOnh2MVQpop8r4M8.png\"><\/div>\r\n <div class=\"ff-step ff-step-2\"><img decoding=\"async\" src=\"https:\/\/framerusercontent.com\/images\/d1Tgw9tBpOs9466ASU4fWd6j1w.png\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ff-card\" onmouseenter=\"toggleFlipperCard(this)\" onclick=\"toggleFlipperCard(this)\">\r\n <img decoding=\"async\" class=\"ff-bg\" src=\"https:\/\/framerusercontent.com\/images\/xWq5qlnMo4nwNQlhbzFUKWqikwQ.jpg\">\r\n <img decoding=\"async\" class=\"ff-portfolio-preview ff-portfolio-preview-1\" src=\"https:\/\/framerusercontent.com\/images\/xWq5qlnMo4nwNQlhbzFUKWqikwQ.jpg\">\r\n <img decoding=\"async\" class=\"ff-portfolio-preview ff-portfolio-preview-2\" src=\"https:\/\/framerusercontent.com\/images\/N6nWcGmKkdYDhvYS1RN1VoX05k.jpg\">\r\n <div class=\"ff-gradient\"><\/div>\r\n <div class=\"ff-top-bar\"><div class=\"ff-tag\"><span>DTP i Druk<\/span><\/div><\/div>\r\n <div class=\"ff-bottom-content\">\r\n <div class=\"ff-text\">\r\n <h3>Us\u0142ugi DTP oraz druk na \u017c\u0105danie<\/h3>\r\n <p>Przygotowujemy materia\u0142y do druku z najwy\u017csz\u0105 staranno\u015bci\u0105 i realizujemy zam\u00f3wienia na czas.<\/p>\r\n <\/div>\r\n <div class=\"ff-steps\">\r\n <div class=\"ff-step ff-step-1\"><img decoding=\"async\" src=\"https:\/\/framerusercontent.com\/images\/d1Tgw9tBpOs9466ASU4fWd6j1w.png\"><\/div>\r\n <div class=\"ff-step ff-step-2\"><img decoding=\"async\" src=\"https:\/\/framerusercontent.com\/images\/L3ZUTuktdTUOnh2MVQpop8r4M8.png\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n function toggleFlipperCard(el) {\r\n if (el.classList.contains('active')) return;\r\n const cards = el.closest('.ff-container').querySelectorAll('.ff-card');\r\n cards.forEach(c => c.classList.remove('active'));\r\n el.classList.add('active');\r\n }\r\n\r\n function setupScrollReveal() {\r\n const title = document.querySelector('.ff-wrapper-title');\r\n const section = document.getElementById('flipper-section');\r\n if (!title) return;\r\n\r\n const text = title.innerText;\r\n title.innerHTML = '';\r\n [...text].forEach((char, i) => {\r\n const span = document.createElement('span');\r\n span.className = 'letter';\r\n span.innerText = char === ' ' ? '\\u00A0' : char;\r\n span.style.transitionDelay = (i * 0.03) + 's';\r\n title.appendChild(span);\r\n });\r\n\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(e => {\r\n if (e.isIntersecting) {\r\n title.querySelectorAll('.letter').forEach(l => l.classList.add('active'));\r\n section.classList.add('ff-revealed');\r\n observer.unobserve(e.target);\r\n }\r\n });\r\n }, { threshold: 0.2 });\r\n\r\n observer.observe(section);\r\n }\r\n\r\n document.addEventListener('DOMContentLoaded', setupScrollReveal);\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<section class=\"elementor-element elementor-element-b1ad760 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-child\" data-id=\"b1ad760\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic","animation":"none","_ha_eqh_enable":false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b7c91b3 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"b7c91b3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n<section id=\"wp-cito-process-v3-full\">\r\n <svg style=\"width:0;height:0;position:absolute;\" aria-hidden=\"true\" focusable=\"false\">\r\n <defs>\r\n <linearGradient id=\"purpleGrad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\r\n <stop offset=\"0%\" stop-color=\"#4F46E5\" \/>\r\n <stop offset=\"100%\" stop-color=\"#A855F7\" \/>\r\n <\/linearGradient>\r\n <\/defs>\r\n <\/svg>\r\n\r\n <style>\r\n #wp-cito-process-v3-full {\r\n background-color: #F2F2F2;\r\n padding: 120px 0;\r\n color: #1a1a1a;\r\n font-family: \"Inter\", sans-serif;\r\n overflow: hidden;\r\n box-sizing: border-box;\r\n display: block;\r\n width: 100vw;\r\n position: relative;\r\n left: 50%; right: 50%;\r\n margin-left: -50vw; margin-right: -50vw;\r\n }\r\n\r\n #wp-cito-process-v3-full .container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 0 60px;\r\n }\r\n\r\n #wp-cito-process-v3-full .header-flex {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 80px;\r\n gap: 40px;\r\n }\r\n\r\n \/* NAG\u0141\u00d3WEK: INTER 400 (Waga jak na zdj\u0119ciu) *\/\r\n #wp-cito-process-v3-full h2.reveal-text {\r\n font-size: 38px;\r\n font-weight: 400;\r\n line-height: 1.3;\r\n flex: 1;\r\n margin: 0;\r\n color: #1a1a1a;\r\n letter-spacing: -0.01em;\r\n }\r\n\r\n #wp-cito-process-v3-full .header-desc {\r\n font-size: 18px;\r\n color: #666666;\r\n max-width: 450px;\r\n line-height: 1.6;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n transition: all 1s ease 0.6s; \r\n }\r\n\r\n #wp-cito-process-v3-full .header-desc.active { opacity: 1; transform: translateY(0); }\r\n\r\n \/* ANIMACJA LITER *\/\r\n #wp-cito-process-v3-full .letter {\r\n display: inline-block;\r\n opacity: 0;\r\n filter: blur(12px);\r\n transform: translateY(30px);\r\n transition: all 0.9s cubic-bezier(0.2, 0.6, 0.2, 1);\r\n }\r\n\r\n #wp-cito-process-v3-full .letter.active {\r\n opacity: 1;\r\n filter: blur(0px);\r\n transform: translateY(0px);\r\n }\r\n\r\n #wp-cito-process-v3-full .cards-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 40px;\r\n }\r\n\r\n #wp-cito-process-v3-full .card {\r\n background-color: #F2F2F2;\r\n border: 1px solid rgba(0,0,0,0.1);\r\n border-top-right-radius: 32px;\r\n border-bottom-left-radius: 32px;\r\n padding: 48px 40px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 60px;\r\n transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n opacity: 0;\r\n transform: translateY(40px);\r\n }\r\n\r\n #wp-cito-process-v3-full .card.active { opacity: 1; transform: translateY(0); }\r\n #wp-cito-process-v3-full .card:hover { transform: translateY(-10px); background-color: #ffffff; border-color: #A855F7; }\r\n\r\n #wp-cito-process-v3-full .card-num { font-size: 72px; font-weight: 600; color: #1a1a1a; line-height: 1; }\r\n #wp-cito-process-v3-full .card-time { display: flex; align-items: center; gap: 8px; color: #666666; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }\r\n #wp-cito-process-v3-full .clock-icon { width: 18px; height: 18px; stroke: #A855F7; stroke-width: 2; fill: none; }\r\n\r\n #wp-cito-process-v3-full .card-content h3 { font-size: 28px; font-weight: 600; margin-bottom: 20px; }\r\n #wp-cito-process-v3-full .card-content p { font-size: 16px; opacity: 0.8; line-height: 1.6; }\r\n\r\n #wp-cito-process-v3-full .cta-btn {\r\n position: relative;\r\n display: inline-block;\r\n border: 1px solid #A855F7; \r\n padding: 16px 32px;\r\n text-decoration: none;\r\n border-radius: 0 16px 0 16px;\r\n font-weight: 500;\r\n color: #1a1a1a;\r\n overflow: hidden;\r\n z-index: 1;\r\n transition: all 0.5s ease;\r\n }\r\n\r\n #wp-cito-process-v3-full .cta-btn::before {\r\n content: \"\"; position: absolute; top: 0; left: 0; width: 100%; height: 100%;\r\n background: linear-gradient(90deg, #4F46E5, #A855F7);\r\n z-index: -1; opacity: 0; transition: opacity 0.6s ease;\r\n }\r\n\r\n #wp-cito-process-v3-full .cta-btn:hover { color: #fff; border-color: transparent; }\r\n #wp-cito-process-v3-full .cta-btn:hover::before { opacity: 1; }\r\n\r\n @media (max-width: 768px) {\r\n #wp-cito-process-v3-full .container { padding: 0 30px; }\r\n #wp-cito-process-v3-full h2.reveal-text { font-size: 28px; }\r\n #wp-cito-process-v3-full .cards-grid { grid-template-columns: 1fr; }\r\n }\r\n <\/style>\r\n\r\n <div class=\"container\">\r\n <div class=\"header-flex\">\r\n <h2 class=\"reveal-text\">Jak wygl\u0105da wsp\u00f3\u0142praca?<\/h2>\r\n <div class=\"header-desc\">Analizujemy cele, dobieramy technologi\u0119 i dostarczamy gotowe rozwi\u0105zania.<\/div>\r\n <\/div>\r\n <div class=\"cards-grid\">\r\n <div class=\"card\">\r\n <div class=\"card-top\"><span class=\"card-num\">01<\/span><div class=\"card-time\">Teraz<\/div><\/div>\r\n <div class=\"card-content\"><h3>Analiza<\/h3><p>Kr\u00f3tka rozmowa o tym, czego potrzebujesz i jaki efekt ma przynie\u015b\u0107 projekt.<\/p><a href=\"#\" class=\"cta-btn js-scroll-full\">Otrzymaj ofert\u0119<\/a><\/div>\r\n <\/div>\r\n <div class=\"card\">\r\n <div class=\"card-top\"><span class=\"card-num\">02<\/span><div class=\"card-time\">1-2 dni<\/div><\/div>\r\n <div class=\"card-content\"><h3>Strategia<\/h3><p>Prezentacja optymalnego rozwi\u0105zania i planu wdro\u017cenia krok po kroku.<\/p><\/div>\r\n <\/div>\r\n <div class=\"card\">\r\n <div class=\"card-top\"><span class=\"card-num\">03<\/span><div class=\"card-time\">Realizacja<\/div><\/div>\r\n <div class=\"card-content\"><h3>Wdro\u017cenie<\/h3><p>Produkcja, start projektu oraz pe\u0142ne wsparcie powdro\u017ceniowe.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n (function() {\r\n const sec = document.querySelector('#wp-cito-process-v3-full');\r\n const title = sec.querySelector('.reveal-text');\r\n const desc = sec.querySelector('.header-desc');\r\n const cards = sec.querySelectorAll('.card');\r\n\r\n const txt = title.innerText;\r\n title.innerHTML = '';\r\n [...txt].forEach((char, i) => {\r\n const s = document.createElement('span');\r\n s.className = 'letter';\r\n s.innerText = char === ' ' ? '\\u00A0' : char;\r\n s.style.transitionDelay = (i * 0.04) + 's';\r\n title.appendChild(s);\r\n });\r\n\r\n const obs = new IntersectionObserver((entries) => {\r\n entries.forEach(e => {\r\n if (e.isIntersecting) {\r\n title.querySelectorAll('.letter').forEach(l => l.classList.add('active'));\r\n if (desc) desc.classList.add('active');\r\n cards.forEach((c, idx) => setTimeout(() => c.classList.add('active'), 400 + (idx * 150)));\r\n obs.unobserve(e.target);\r\n }\r\n });\r\n }, { threshold: 0.1 });\r\n obs.observe(sec);\r\n })();\r\n <\/script>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t<section class=\"elementor-element elementor-element-72d951f e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"72d951f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic","_ha_eqh_enable":false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6640f5f exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"6640f5f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"cito-v2-fullwidth\">\r\n <div class=\"header-container\">\r\n <h2 class=\"section-title\">Ka\u017cdy projekt dopasowany<br>do konkretnego biznesu<\/h2>\r\n <a class=\"btn-primary\" href=\".\/case-studies\">Zobacz wi\u0119cej realizacji<\/a>\r\n <\/div>\r\n\r\n <div class=\"ticker-container\">\r\n <ul class=\"ticker-list\" id=\"citoTickerV2\">\r\n \r\n <li class=\"ticker-item\">\r\n <a class=\"case-card\" href=\"https:\/\/graczakdesign.pl\/index.php\/contact\/\" target=\"_blank\">\r\n <div class=\"image-wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/framerusercontent.com\/images\/N9tvLxX3xtaDFS4rcUwGoPZaw.jpg?width=1080\" class=\"img-main\" alt=\"Lumea 1\">\r\n <img decoding=\"async\" src=\"https:\/\/framerusercontent.com\/images\/s8Q4zygnVjoXbSme85gD2eb68ws.jpg?width=1080\" class=\"img-hover\" alt=\"Lumea 2\">\r\n <\/div>\r\n <div class=\"card-body\">\r\n <span class=\"client-label\">Lumea (Klinika)<\/span>\r\n <h4 class=\"case-title\">Identyfikacja wizualna i system rezerwacji dla kliniki<\/h4>\r\n <div class=\"tag-row\">\r\n <span class=\"tag\">web design<\/span>\r\n <span class=\"tag\">UI\/UX<\/span>\r\n <span class=\"tag\">branding<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/a>\r\n <\/li>\r\n\r\n <li class=\"ticker-item\">\r\n <a class=\"case-card\" href=\"https:\/\/graczakdesign.pl\/index.php\/contact\/\" target=\"_blank\">\r\n <div class=\"image-wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/framerusercontent.com\/images\/s8Q4zygnVjoXbSme85gD2eb68ws.jpg?width=1080\" class=\"img-main\" alt=\"Velocity 1\">\r\n <img decoding=\"async\" src=\"https:\/\/framerusercontent.com\/images\/N9tvLxX3xtaDFS4rcUwGoPZaw.jpg?width=1080\" class=\"img-hover\" alt=\"Velocity 2\">\r\n <\/div>\r\n <div class=\"card-body\">\r\n <span class=\"client-label\">Velocity Detailing<\/span>\r\n <h4 class=\"case-title\">Kompleksowa identyfikacja i design<\/h4>\r\n <div class=\"tag-row\">\r\n <span class=\"tag\">identyfikacja wizualna<\/span>\r\n <span class=\"tag\">logo design<\/span>\r\n <span class=\"tag\">UI\/UX<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/a>\r\n <\/li>\r\n\r\n <li class=\"ticker-item\">\r\n <a class=\"case-card\" href=\"https:\/\/graczakdesign.pl\/index.php\/contact\/\" target=\"_blank\">\r\n <div class=\"image-wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/framerusercontent.com\/images\/P0whR5a3EkmKxv9fohg1HKr1kM.png?width=1080\" class=\"img-main\" alt=\"RGE 1\">\r\n <img decoding=\"async\" src=\"https:\/\/framerusercontent.com\/images\/FDN7k5cURjfA5MDXb29efw5A.png?width=1081\" class=\"img-hover\" alt=\"RGE 2\">\r\n <\/div>\r\n <div class=\"card-body\">\r\n <span class=\"client-label\">RGE Solutions<\/span>\r\n <h4 class=\"case-title\">Strona korporacyjna i branding dla sektora OZE<\/h4>\r\n <div class=\"tag-row\">\r\n <span class=\"tag\">web design<\/span>\r\n <span class=\"tag\">OZE<\/span>\r\n <span class=\"tag\">B2B Design<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/a>\r\n <\/li>\r\n\r\n <li class=\"ticker-item\">\r\n <a class=\"case-card\" href=\"https:\/\/graczakdesign.pl\/index.php\/contact\/\" target=\"_blank\">\r\n <div class=\"image-wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/framerusercontent.com\/images\/FDN7k5cURjfA5MDXb29efw5A.png?width=1081\" class=\"img-main\" alt=\"Amaranth 1\">\r\n <img decoding=\"async\" src=\"https:\/\/framerusercontent.com\/images\/P0whR5a3EkmKxv9fohg1HKr1kM.png?width=1080\" class=\"img-hover\" alt=\"Amaranth 2\">\r\n <\/div>\r\n <div class=\"card-body\">\r\n <span class=\"client-label\">Amaranth<\/span>\r\n <h4 class=\"case-title\">Materia\u0142y reklamowe i animacje 3D<\/h4>\r\n <div class=\"tag-row\">\r\n <span class=\"tag\">motion design<\/span>\r\n <span class=\"tag\">animacja 3D<\/span>\r\n <span class=\"tag\">social media<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/a>\r\n <\/li>\r\n\r\n <li class=\"ticker-item\">\r\n <a class=\"case-card\" href=\"https:\/\/graczakdesign.pl\/index.php\/contact\/\" target=\"_blank\">\r\n <div class=\"image-wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/framerusercontent.com\/images\/N9tvLxX3xtaDFS4rcUwGoPZaw.jpg?width=1080\" class=\"img-main\" alt=\"Gemini 1\">\r\n <img decoding=\"async\" src=\"https:\/\/framerusercontent.com\/images\/s8Q4zygnVjoXbSme85gD2eb68ws.jpg?width=1080\" class=\"img-hover\" alt=\"Gemini 2\">\r\n <\/div>\r\n <div class=\"card-body\">\r\n <span class=\"client-label\">Gemini<\/span>\r\n <h4 class=\"case-title\">Projekt strony i marketing internetowy<\/h4>\r\n <div class=\"tag-row\">\r\n <span class=\"tag\">web design<\/span>\r\n <span class=\"tag\">animacja 3D<\/span>\r\n <span class=\"tag\">marketing<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/a>\r\n <\/li>\r\n\r\n <li class=\"ticker-item\">\r\n <a class=\"case-card\" href=\"https:\/\/graczakdesign.pl\/index.php\/contact\/\" target=\"_blank\">\r\n <div class=\"image-wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/framerusercontent.com\/images\/P0whR5a3EkmKxv9fohg1HKr1kM.png?width=1080\" class=\"img-main\" alt=\"Avalanche 1\">\r\n <img decoding=\"async\" src=\"https:\/\/framerusercontent.com\/images\/FDN7k5cURjfA5MDXb29efw5A.png?width=1081\" class=\"img-hover\" alt=\"Avalanche 2\">\r\n <\/div>\r\n <div class=\"card-body\">\r\n <span class=\"client-label\">Avalanche<\/span>\r\n <h4 class=\"case-title\">Branding marki streetwearowej<\/h4>\r\n <div class=\"tag-row\">\r\n <span class=\"tag\">branding<\/span>\r\n <span class=\"tag\">projektowanie odzie\u017cy<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/a>\r\n <\/li>\r\n\r\n <li class=\"ticker-item\">\r\n <a class=\"case-card\" href=\"https:\/\/graczakdesign.pl\/index.php\/contact\/\" target=\"_blank\">\r\n <div class=\"image-wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/framerusercontent.com\/images\/s8Q4zygnVjoXbSme85gD2eb68ws.jpg?width=1080\" class=\"img-main\" alt=\"Internal 1\">\r\n <img decoding=\"async\" src=\"https:\/\/framerusercontent.com\/images\/N9tvLxX3xtaDFS4rcUwGoPZaw.jpg?width=1080\" class=\"img-hover\" alt=\"Internal 2\">\r\n <\/div>\r\n <div class=\"card-body\">\r\n <span class=\"client-label\">Internal constructions<\/span>\r\n <h4 class=\"case-title\">Animacje produktowe dla bran\u017cy OZE<\/h4>\r\n <div class=\"tag-row\">\r\n <span class=\"tag\">video explainer<\/span>\r\n <span class=\"tag\">motion design<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/a>\r\n <\/li>\r\n\r\n <li class=\"ticker-item\">\r\n <a class=\"case-card\" href=\"https:\/\/graczakdesign.pl\/index.php\/contact\/\" target=\"_blank\">\r\n <div class=\"image-wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/framerusercontent.com\/images\/FDN7k5cURjfA5MDXb29efw5A.png?width=1081\" class=\"img-main\" alt=\"Amar 1\">\r\n <img decoding=\"async\" src=\"https:\/\/framerusercontent.com\/images\/P0whR5a3EkmKxv9fohg1HKr1kM.png?width=1080\" class=\"img-hover\" alt=\"Amar 2\">\r\n <\/div>\r\n <div class=\"card-body\">\r\n <span class=\"client-label\">Wydawnictwo Amar<\/span>\r\n <h4 class=\"case-title\">Opracowanie graficzne publikacji<\/h4>\r\n <div class=\"tag-row\">\r\n <span class=\"tag\">sk\u0142ad DTP<\/span>\r\n <span class=\"tag\">ilustracja<\/span>\r\n <span class=\"tag\">typografia<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n<\/div>\r\n\r\n<style>\r\n .cito-v2-fullwidth {\r\n --c-w: 400px;\r\n --c-gap: 40px;\r\n --c-speed: 45s;\r\n --c-bg: #F2F2F2; \r\n --c-text: #1a1a1a; \r\n --c-gray: #666666; \r\n --page-bg: #F2F2F2; \r\n \r\n width: 100%;\r\n max-width: 100vw;\r\n position: relative;\r\n overflow: hidden;\r\n padding: 100px 0;\r\n background: var(--page-bg);\r\n margin: 0;\r\n }\r\n\r\n .cito-v2-fullwidth * { box-sizing: border-box; }\r\n\r\n \/* STYLIZACJA NAG\u0141\u00d3WKA I GUZIKA *\/\r\n .header-container {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n width: 100%;\r\n max-width: 1400px; \r\n margin: 0 auto 60px auto;\r\n padding: 0 60px; \r\n position: relative;\r\n z-index: 20; \r\n }\r\n\r\n .section-title {\r\n font-family: \"Space Grotesk\", sans-serif;\r\n font-size: 38px; \r\n font-weight: 400;\r\n color: var(--c-text);\r\n margin: 0;\r\n line-height: 1.3;\r\n }\r\n\r\n \/* ANIMACJA LITER DLA TYTU\u0141U *\/\r\n .section-title .letter {\r\n display: inline-block;\r\n opacity: 0;\r\n filter: blur(12px);\r\n transform: translateY(30px);\r\n transition: all 0.9s cubic-bezier(0.2, 0.6, 0.2, 1);\r\n }\r\n\r\n .section-title .letter.active {\r\n opacity: 1;\r\n filter: blur(0px);\r\n transform: translateY(0px);\r\n }\r\n\r\n \/* --- ZMODYFIKOWANY PRZYCISK --- *\/\r\n .btn-primary {\r\n position: relative;\r\n background-color: transparent;\r\n color: var(--c-text);\r\n \/* Zmiana ramki na fioletowy pasuj\u0105cy do gradientu *\/\r\n border: 1px solid #A855F7;\r\n text-decoration: none !important;\r\n padding: 16px 32px;\r\n font-family: \"Space Grotesk\", sans-serif;\r\n font-size: 16px;\r\n font-weight: 500;\r\n border-radius: 0 16px 0 16px;\r\n overflow: hidden; \r\n transition: color 0.6s ease-in-out, border-color 0.6s ease-in-out, transform 0.5s ease-in-out;\r\n z-index: 1; \r\n display: inline-block;\r\n }\r\n\r\n \/* Fioletowy gradient do animacji *\/\r\n .btn-primary::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, #4F46E5, #A855F7); \/* Zmiana na fioletowy gradient *\/\r\n z-index: -1; \r\n transition: opacity 0.6s ease-in-out;\r\n opacity: 0; \r\n }\r\n\r\n .btn-primary:hover {\r\n color: #FFFFFF; \r\n border-color: transparent; \r\n transform: scale(1.03); \r\n }\r\n\r\n .btn-primary:hover::before {\r\n opacity: 1; \r\n }\r\n \/* --- KONIEC MODYFIKACJI PRZYCISKU --- *\/\r\n\r\n \/* PE\u0141NOWYMIAROWE GRADIENTY BOCZNE *\/\r\n .cito-v2-fullwidth::before,\r\n .cito-v2-fullwidth::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n height: 100%;\r\n width: 25%;\r\n z-index: 10;\r\n pointer-events: none;\r\n }\r\n\r\n .cito-v2-fullwidth::before {\r\n left: 0;\r\n background: linear-gradient(to right, \r\n var(--page-bg) 0%, \r\n rgba(242, 242, 242, 0.95) 15%, \r\n rgba(242, 242, 242, 0.7) 40%, \r\n rgba(242, 242, 242, 0.3) 70%, \r\n transparent 100%);\r\n }\r\n\r\n .cito-v2-fullwidth::after {\r\n right: 0;\r\n background: linear-gradient(to left, \r\n var(--page-bg) 0%, \r\n rgba(242, 242, 242, 0.95) 15%, \r\n rgba(242, 242, 242, 0.7) 40%, \r\n rgba(242, 242, 242, 0.3) 70%, \r\n transparent 100%);\r\n }\r\n\r\n .cito-v2-fullwidth .ticker-container {\r\n display: flex;\r\n width: 100%;\r\n }\r\n\r\n .cito-v2-fullwidth .ticker-list {\r\n display: flex;\r\n gap: var(--c-gap);\r\n padding: 0;\r\n margin: 0;\r\n list-style: none;\r\n animation: citoAnim var(--c-speed) linear infinite;\r\n }\r\n\r\n .cito-v2-fullwidth .ticker-item {\r\n flex-shrink: 0;\r\n width: var(--c-w);\r\n }\r\n\r\n \/* KARTA *\/\r\n .cito-v2-fullwidth .case-card {\r\n display: flex;\r\n flex-direction: column;\r\n text-decoration: none !important;\r\n background-color: var(--c-bg);\r\n border-bottom-left-radius: 32px;\r\n border-top-right-radius: 32px;\r\n overflow: hidden;\r\n height: 600px;\r\n transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n box-shadow: none; \r\n }\r\n\r\n .cito-v2-fullwidth .case-card:hover {\r\n transform: translateY(-15px) scale(1.03);\r\n background-color: #ffffff; \r\n box-shadow: none; \r\n }\r\n\r\n .cito-v2-fullwidth .image-wrapper {\r\n position: relative;\r\n width: 100%;\r\n height: 380px;\r\n overflow: hidden;\r\n background: #e0e0e0; \r\n }\r\n\r\n .cito-v2-fullwidth .image-wrapper img {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n transition: opacity 0.7s ease-in-out, transform 0.8s ease-in-out;\r\n }\r\n\r\n .cito-v2-fullwidth .img-hover { opacity: 0; }\r\n .cito-v2-fullwidth .case-card:hover .img-main { opacity: 0; }\r\n .cito-v2-fullwidth .case-card:hover .img-hover { opacity: 1; transform: scale(1.1); }\r\n\r\n .cito-v2-fullwidth .card-body {\r\n padding: 30px 20px;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .cito-v2-fullwidth .client-label {\r\n font-family: \"Space Grotesk\", sans-serif;\r\n font-size: 14px;\r\n color: var(--c-gray);\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .cito-v2-fullwidth .case-title {\r\n font-family: \"Space Grotesk\", sans-serif;\r\n font-size: 26px;\r\n font-weight: 700;\r\n color: var(--c-text);\r\n margin: 0 0 20px 0;\r\n line-height: 1.2;\r\n height: 64px;\r\n overflow: hidden;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n }\r\n\r\n .cito-v2-fullwidth .tag-row {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n height: 70px;\r\n align-content: flex-start;\r\n }\r\n\r\n .cito-v2-fullwidth .tag {\r\n font-family: \"Space Mono\", monospace;\r\n font-size: 11px;\r\n text-transform: uppercase;\r\n padding: 8px 16px;\r\n border: 1px solid rgba(0, 0, 0, 0.1);\r\n border-bottom-left-radius: 14px;\r\n border-top-right-radius: 14px;\r\n color: var(--c-text);\r\n background: rgba(0, 0, 0, 0.05);\r\n }\r\n\r\n @media (min-width: 1200px) {\r\n .cito-v2-fullwidth {\r\n margin-left: calc(50% - 50vw);\r\n margin-right: calc(50% - 50vw);\r\n width: 100vw;\r\n }\r\n }\r\n\r\n \/* RWD dla mobilnych urz\u0105dze\u0144 *\/\r\n @media (max-width: 768px) {\r\n .header-container {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 20px;\r\n padding: 0 30px;\r\n margin-bottom: 40px;\r\n }\r\n .section-title {\r\n font-size: 28px;\r\n }\r\n .cito-v2-fullwidth { --c-w: 300px; padding: 60px 0; }\r\n .cito-v2-fullwidth .case-card { height: 500px; }\r\n .cito-v2-fullwidth .image-wrapper { height: 280px; }\r\n .cito-v2-fullwidth .case-title { font-size: 20px; height: 50px; }\r\n .cito-v2-fullwidth::before, .cito-v2-fullwidth::after { width: 15%; height: 100%; top: 0; }\r\n }\r\n\r\n @keyframes citoAnim {\r\n 0% { transform: translateX(0); }\r\n 100% { transform: translateX(calc(-1 * (var(--c-w) * 8 + var(--c-gap) * 8))); }\r\n }\r\n<\/style>\r\n\r\n<script>\r\n (function() {\r\n const list = document.getElementById('citoTickerV2');\r\n if (list) {\r\n const content = list.innerHTML;\r\n list.innerHTML = content + content + content + content + content;\r\n }\r\n\r\n function initTitleAnimation() {\r\n const title = document.querySelector('.cito-v2-fullwidth .section-title');\r\n if (!title || title.getAttribute('data-animated') === 'true') return;\r\n title.setAttribute('data-animated', 'true');\r\n\r\n const childNodes = Array.from(title.childNodes);\r\n title.innerHTML = '';\r\n let letterIndex = 0;\r\n\r\n childNodes.forEach(node => {\r\n if (node.nodeType === 3) { \r\n const text = node.textContent;\r\n for (let i = 0; i < text.length; i++) {\r\n const span = document.createElement('span');\r\n span.className = 'letter';\r\n span.innerText = text[i] === ' ' ? '\\u00A0' : text[i];\r\n span.style.transitionDelay = (letterIndex * 0.04) + 's'; \r\n title.appendChild(span);\r\n letterIndex++;\r\n }\r\n } else if (node.nodeName === 'BR') { \r\n title.appendChild(document.createElement('br'));\r\n }\r\n });\r\n\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n title.querySelectorAll('.letter').forEach(l => l.classList.add('active'));\r\n observer.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.1 });\r\n\r\n observer.observe(title);\r\n }\r\n\r\n if (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', initTitleAnimation);\r\n } else {\r\n initTitleAnimation();\r\n }\r\n })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t<section data-wpr-sticky-section=\"yes\" data-wpr-position-type=\"sticky\" data-wpr-position-offset=\"0\" data-wpr-position-location=\"top\" data-wpr-sticky-devices=\"desktop_sticky\" data-wpr-custom-breakpoints=\"\" data-wpr-active-breakpoints=\"mobile_sticky tablet_sticky desktop_sticky\" data-wpr-z-index=\"10\" data-wpr-sticky-hide=\"\" data-wpr-replace-header=\"\" data-wpr-animation-duration=\"\" data-wpr-sticky-type=\"sticky\" class=\"elementor-element elementor-element-7d399ab wpr-sticky-section-yes e-flex e-con-boxed wpr-jarallax-no wpr-parallax-no wpr-equal-height-no e-con e-parent\" data-id=\"7d399ab\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic","animation":"none","_ha_eqh_enable":false,"position_offset":0,"position_offset_tablet":0,"position_offset_mobile":0}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a1345b7 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"a1345b7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n \/* KONTENER G\u0141\u00d3WNY - 100VW *\/\r\n .logos-section-full {\r\n --page-bg: #F2F2F2; \r\n width: 100vw;\r\n position: relative;\r\n left: 50%;\r\n right: 50%;\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n padding: 100px 0;\r\n background-color: var(--page-bg); \r\n overflow: hidden;\r\n font-family: \"Inter\", sans-serif;\r\n }\r\n\r\n .logos-container-full {\r\n width: 100%;\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n \/* TYTU\u0141 - POWI\u0118KSZONY I WYRA\u0179NIEJSZY *\/\r\n .logos-title-full {\r\n color: #1a1a1a;\r\n text-align: center;\r\n font-size: 1.6rem; \/* Zwi\u0119kszone z 1.2rem *\/\r\n font-weight: 500; \/* Zwi\u0119kszone z 400 *\/\r\n letter-spacing: 3px;\r\n margin-bottom: 60px;\r\n opacity: 0.7; \/* Lekko zwi\u0119kszona widoczno\u015b\u0107 *\/\r\n text-transform: uppercase;\r\n }\r\n\r\n \/* GRADIENTY BOCZNE *\/\r\n .logos-container-full::before,\r\n .logos-container-full::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n width: 15%;\r\n z-index: 1; \r\n pointer-events: none;\r\n }\r\n\r\n .logos-container-full::before {\r\n left: 0;\r\n background: linear-gradient(to right, var(--page-bg) 0%, rgba(242, 242, 242, 0.9) 20%, rgba(242, 242, 242, 0) 100%);\r\n }\r\n\r\n .logos-container-full::after {\r\n right: 0;\r\n background: linear-gradient(to left, var(--page-bg) 0%, rgba(242, 242, 242, 0.9) 20%, rgba(242, 242, 242, 0) 100%);\r\n }\r\n\r\n \/* ANIMACJA KARUZELI *\/\r\n .logos-track-full {\r\n display: flex;\r\n align-items: center;\r\n width: max-content;\r\n animation: scrollRightFull 25s linear infinite;\r\n padding: 20px 0;\r\n }\r\n\r\n @keyframes scrollRightFull {\r\n 0% { transform: translateX(-50%); }\r\n 100% { transform: translateX(0); }\r\n }\r\n\r\n .logo-item-full {\r\n flex: 0 0 auto;\r\n width: 250px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0 60px;\r\n cursor: pointer; \r\n }\r\n\r\n \/* MASKA CSS DLA LOGOTYP\u00d3W *\/\r\n .logo-mask {\r\n width: 100%;\r\n height: 50px; \r\n background: #1a1a1a; \r\n opacity: 0.4;\r\n -webkit-mask-size: contain;\r\n -webkit-mask-position: center;\r\n -webkit-mask-repeat: no-repeat;\r\n mask-size: contain;\r\n mask-position: center;\r\n mask-repeat: no-repeat;\r\n transition: opacity 0.4s ease, transform 0.4s ease, background 0.4s ease; \r\n will-change: transform, opacity, background;\r\n }\r\n\r\n .logo-item-full:hover .logo-mask {\r\n opacity: 1;\r\n transform: scale(1.1); \r\n background: linear-gradient(135deg, #4F46E5 0%, #A855F7 100%);\r\n }\r\n\r\n \/* Responsywno\u015b\u0107 dla mniejszych ekran\u00f3w *\/\r\n @media (max-width: 768px) {\r\n .logos-title-full {\r\n font-size: 1.2rem;\r\n letter-spacing: 2px;\r\n }\r\n .logo-item-full {\r\n width: 180px;\r\n padding: 0 30px;\r\n }\r\n }\r\n<\/style>\r\n\r\n<div class=\"logos-section-full\">\r\n <h2 class=\"logos-title-full\">Tworzymy dla was w<\/h2>\r\n \r\n <div class=\"logos-container-full\">\r\n <div class=\"logos-track-full\" id=\"logoTrackFull\">\r\n <div class=\"logo-item-full\"><div class=\"logo-mask\" style=\"-webkit-mask-image: url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/2f\/Google_2015_logo.svg'); mask-image: url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/2f\/Google_2015_logo.svg');\"><\/div><\/div>\r\n <div class=\"logo-item-full\"><div class=\"logo-mask\" style=\"-webkit-mask-image: url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/5\/51\/IBM_logo.svg'); mask-image: url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/5\/51\/IBM_logo.svg');\"><\/div><\/div>\r\n <div class=\"logo-item-full\"><div class=\"logo-mask\" style=\"-webkit-mask-image: url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/9\/96\/Microsoft_logo_%282012%29.svg'); mask-image: url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/9\/96\/Microsoft_logo_%282012%29.svg');\"><\/div><\/div>\r\n <div class=\"logo-item-full\"><div class=\"logo-mask\" style=\"-webkit-mask-image: url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/a\/a9\/Amazon_logo.svg'); mask-image: url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/a\/a9\/Amazon_logo.svg');\"><\/div><\/div>\r\n <div class=\"logo-item-full\"><div class=\"logo-mask\" style=\"-webkit-mask-image: url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/0\/08\/Netflix_2015_logo.svg'); mask-image: url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/0\/08\/Netflix_2015_logo.svg');\"><\/div><\/div>\r\n <div class=\"logo-item-full\"><div class=\"logo-mask\" style=\"-webkit-mask-image: url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/2f\/Google_2015_logo.svg'); mask-image: url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/2f\/Google_2015_logo.svg');\"><\/div><\/div>\r\n <div class=\"logo-item-full\"><div class=\"logo-mask\" style=\"-webkit-mask-image: url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/5\/51\/IBM_logo.svg'); mask-image: url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/5\/51\/IBM_logo.svg');\"><\/div><\/div>\r\n <div class=\"logo-item-full\"><div class=\"logo-mask\" style=\"-webkit-mask-image: url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/9\/96\/Microsoft_logo_%282012%29.svg'); mask-image: url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/9\/96\/Microsoft_logo_%282012%29.svg');\"><\/div><\/div>\r\n <div class=\"logo-item-full\"><div class=\"logo-mask\" style=\"-webkit-mask-image: url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/a\/a9\/Amazon_logo.svg'); mask-image: url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/a\/a9\/Amazon_logo.svg');\"><\/div><\/div>\r\n <div class=\"logo-item-full\"><div class=\"logo-mask\" style=\"-webkit-mask-image: url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/0\/08\/Netflix_2015_logo.svg'); mask-image: url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/0\/08\/Netflix_2015_logo.svg');\"><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t<section class=\"elementor-element elementor-element-412725a e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"412725a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic","_ha_eqh_enable":false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2bc4636 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"2bc4636\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n \/* G\u0141\u00d3WNY KONTENER *\/\r\n .custom-projects-list {\r\n width: 100%;\r\n font-family: 'Inter', sans-serif; \/* Zmieniono ze Space Grotesk *\/\r\n color: #1a1a1a;\r\n position: relative;\r\n padding-bottom: 50px;\r\n }\r\n\r\n \/* NAG\u0141\u00d3WEK *\/\r\n .projects-heading {\r\n font-size: 13px;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n font-weight: 600;\r\n margin-bottom: 20px;\r\n font-family: 'Inter', sans-serif;\r\n }\r\n\r\n \/* POJEDYNCZY WIERSZ (PROJEKT) *\/\r\n .project-item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 40px 20px;\r\n border-top: 1px solid rgba(26, 26, 26, 0.2); \r\n text-decoration: none;\r\n background-color: transparent;\r\n position: relative;\r\n transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n\r\n .project-item:last-of-type {\r\n border-bottom: 1px solid rgba(26, 26, 26, 0.2);\r\n }\r\n\r\n \/* TYTU\u0141 PROJEKTU *\/\r\n .project-title {\r\n font-size: 48px;\r\n margin: 0;\r\n font-weight: 400;\r\n color: #1a1a1a;\r\n transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), \r\n opacity 0.4s ease;\r\n font-family: 'Inter', sans-serif; \/* Zapewnienie czcionki Inter *\/\r\n }\r\n\r\n \/* STRZA\u0141KA SVG *\/\r\n .project-arrow {\r\n width: 32px;\r\n height: 32px;\r\n color: #1a1a1a;\r\n transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n\r\n \/* =============== EFEKTY HOVER =============== *\/\r\n .project-item:hover .project-title,\r\n .project-item:hover .project-arrow {\r\n background: linear-gradient(135deg, #4F46E5 0%, #A855F7 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .project-item:hover .project-arrow {\r\n fill: url(#purpleArrowGrad);\r\n }\r\n\r\n .project-item:hover .project-title {\r\n transform: translateX(20px);\r\n }\r\n \r\n .project-item:hover .project-arrow {\r\n transform: translateX(-20px);\r\n }\r\n\r\n \/* =============== POD\u0104\u017bAJ\u0104CY OBRAZEK =============== *\/\r\n .hover-img-wrap {\r\n position: fixed; \r\n top: 0; left: 0;\r\n pointer-events: none; \r\n z-index: 100;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.15s ease-out;\r\n }\r\n\r\n .hover-img-wrap img {\r\n width: 350px; \r\n height: 250px; \r\n object-fit: cover;\r\n border-radius: 10px;\r\n transform: translate(-50%, -50%) scale(1.15);\r\n clip-path: inset(25% 25% 25% 25% round 10px);\r\n transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),\r\n clip-path 0.75s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n\r\n .project-item:hover .hover-img-wrap {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n\r\n .project-item:hover .hover-img-wrap img {\r\n transform: translate(-50%, -50%) scale(1);\r\n clip-path: inset(0% 0% 0% 0% round 10px);\r\n }\r\n\r\n @media screen and (max-width: 992px) {\r\n .hover-img-wrap { display: none !important; }\r\n .project-title { font-size: 32px; }\r\n .project-item { padding: 25px 10px; }\r\n }\r\n @media screen and (max-width: 480px) {\r\n .project-title { font-size: 26px; }\r\n }\r\n\r\n \/* STOPKA I LINKI *\/\r\n .projects-footer {\r\n display: flex;\r\n justify-content: flex-end;\r\n padding-top: 30px;\r\n }\r\n\r\n .more-link, .contact-link {\r\n font-size: 16px;\r\n color: #121213;\r\n text-decoration: none;\r\n font-weight: 600;\r\n position: relative;\r\n font-family: 'Inter', sans-serif;\r\n transition: color 0.3s ease;\r\n }\r\n \r\n .contact-link {\r\n font-size: 14px;\r\n font-weight: 800;\r\n }\r\n\r\n .more-link::after, .contact-link::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -4px; \r\n left: 0;\r\n width: 100%; \r\n height: 2px;\r\n background: linear-gradient(135deg, #4F46E5 0%, #A855F7 100%);\r\n transform: scaleX(0);\r\n transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n transform-origin: right;\r\n }\r\n\r\n .more-link:hover, .contact-link:hover {\r\n color: #A855F7;\r\n }\r\n\r\n .more-link:hover::after, .contact-link:hover::after {\r\n transform: scaleX(1);\r\n transform-origin: left;\r\n }\r\n<\/style>\r\n\r\n<svg style=\"width:0;height:0;position:absolute;\" aria-hidden=\"true\" focusable=\"false\">\r\n <defs>\r\n <linearGradient id=\"purpleArrowGrad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\r\n <stop offset=\"0%\" stop-color=\"#4F46E5\" \/>\r\n <stop offset=\"100%\" stop-color=\"#A855F7\" \/>\r\n <\/linearGradient>\r\n <\/defs>\r\n<\/svg>\r\n\r\n<div class=\"custom-projects-list\">\r\n \r\n <div class=\"projects-heading\">Us\u0142ugi DTP & Nadruki POD<\/div>\r\n\r\n <a href=\"#\" class=\"project-item\">\r\n <h2 class=\"project-title\">Odzie\u017c i tekstylia<\/h2>\r\n <svg class=\"project-arrow\" stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"60 58 140 140\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M198,64V168a6,6,0,0,1-12,0V78.48L68.24,196.24a6,6,0,0,1-8.48-8.48L177.52,70H88a6,6,0,0,1,0-12H192A6,6,0,0,1,198,64Z\"><\/path><\/svg>\r\n <div class=\"hover-img-wrap\">\r\n <img decoding=\"async\" src=\"https:\/\/osiemsiedem.pl\/wp-content\/uploads\/2026\/01\/www-obrazki_8-scaled.png\" alt=\"Koszulki i bluzy\">\r\n <\/div>\r\n <\/a>\r\n\r\n <a href=\"#\" class=\"project-item\">\r\n <h2 class=\"project-title\">Plakaty i obrazy Canvas<\/h2>\r\n <svg class=\"project-arrow\" stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"60 58 140 140\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M198,64V168a6,6,0,0,1-12,0V78.48L68.24,196.24a6,6,0,0,1-8.48-8.48L177.52,70H88a6,6,0,0,1,0-12H192A6,6,0,0,1,198,64Z\"><\/path><\/svg>\r\n <div class=\"hover-img-wrap\">\r\n <img decoding=\"async\" src=\"https:\/\/osiemsiedem.pl\/wp-content\/uploads\/2026\/02\/branding-und-digitale-praesenz-fuer-agentur-fuer-schauspiel-ensemble-aus-muenchen.jpeg\" alt=\"Wall Art\">\r\n <\/div>\r\n <\/a>\r\n\r\n <a href=\"#\" class=\"project-item\">\r\n <h2 class=\"project-title\">Kubki i fotoprezenty<\/h2>\r\n <svg class=\"project-arrow\" stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"60 58 140 140\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M198,64V168a6,6,0,0,1-12,0V78.48L68.24,196.24a6,6,0,0,1-8.48-8.48L177.52,70H88a6,6,0,0,1,0-12H192A6,6,0,0,1,198,64Z\"><\/path><\/svg>\r\n <div class=\"hover-img-wrap\">\r\n <img decoding=\"async\" src=\"https:\/\/osiemsiedem.pl\/wp-content\/uploads\/2026\/02\/73951.jpeg\" alt=\"Kubki i gad\u017cety\">\r\n <\/div>\r\n <\/a>\r\n\r\n <a href=\"#\" class=\"project-item\">\r\n <h2 class=\"project-title\">Etui i akcesoria GSM<\/h2>\r\n <svg class=\"project-arrow\" stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"60 58 140 140\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M198,64V168a6,6,0,0,1-12,0V78.48L68.24,196.24a6,6,0,0,1-8.48-8.48L177.52,70H88a6,6,0,0,1,0-12H192A6,6,0,0,1,198,64Z\"><\/path><\/svg>\r\n <div class=\"hover-img-wrap\">\r\n <img decoding=\"async\" src=\"https:\/\/osiemsiedem.pl\/wp-content\/uploads\/2026\/02\/Grafika_bez_nazwy-scaled.png\" alt=\"Akcesoria\">\r\n <\/div>\r\n <\/a>\r\n\r\n <div class=\"projects-footer\">\r\n <a href=\"#\" class=\"more-link\">Zobacz pe\u0142n\u0105 ofert\u0119 druku<\/a>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const projectItems = document.querySelectorAll('.project-item');\r\n\r\n projectItems.forEach(item => {\r\n const imgWrap = item.querySelector('.hover-img-wrap');\r\n \r\n if (imgWrap) {\r\n item.addEventListener('mouseenter', function(e) {\r\n imgWrap.style.transition = 'opacity 0.4s ease, visibility 0.4s ease, transform 0s';\r\n imgWrap.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;\r\n void imgWrap.offsetWidth;\r\n imgWrap.style.transition = 'opacity 0.4s ease, visibility 0.4s ease, transform 0.15s ease-out';\r\n });\r\n\r\n item.addEventListener('mousemove', function(e) {\r\n imgWrap.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;\r\n });\r\n }\r\n });\r\n });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t<section class=\"elementor-element elementor-element-51135a6 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"51135a6\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic","_ha_eqh_enable":false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-19093eb e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-child\" data-id=\"19093eb\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic","_ha_eqh_enable":false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2d30534 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"2d30534\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n\r\n .testimonials-main-wrap {\r\n background-color: #F2F2F2;\r\n padding: 0 0 100px 0;\r\n font-family: 'Inter', sans-serif; \/* Zmieniono globalnie na Inter *\/\r\n width: 100vw;\r\n position: relative;\r\n left: 50%;\r\n right: 50%;\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n }\r\n\r\n \/* Animowany Nag\u0142\u00f3wek *\/\r\n .testi-header-container {\r\n text-align: center;\r\n padding: 60px 24px;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n .testi-animated-title {\r\n font-family: 'Inter', sans-serif; \/* Zmieniono na Inter *\/\r\n font-size: clamp(2.5rem, 5vw, 4rem);\r\n font-weight: 300;\r\n line-height: 1.2;\r\n letter-spacing: -0.03em;\r\n margin: 0;\r\n color: #09090b;\r\n opacity: 0; \r\n transform: translateY(30px);\r\n transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n\r\n .testi-gradient-text {\r\n font-weight: 600; \/* Lekko zwi\u0119kszona grubo\u015b\u0107 dla Inter *\/\r\n background: linear-gradient(135deg, #4F46E5 0%, #A855F7 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n }\r\n\r\n .testi-animated-title.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n \/* Siatka opinii *\/\r\n .testimonials-wrap {\r\n overflow: hidden;\r\n background: transparent;\r\n position: relative;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n\r\n .testimonials-grid {\r\n display: flex;\r\n justify-content: center;\r\n gap: 25px;\r\n height: 850px; \r\n mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);\r\n -webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);\r\n }\r\n\r\n .testimonial-column {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 25px;\r\n width: 340px;\r\n will-change: transform;\r\n }\r\n\r\n \/* Animacje p\u0119tli *\/\r\n @keyframes scrollUp {\r\n 0% { transform: translateY(0); }\r\n 100% { transform: translateY(-50%); }\r\n }\r\n\r\n @keyframes scrollDown {\r\n 0% { transform: translateY(-50%); }\r\n 100% { transform: translateY(0); }\r\n }\r\n\r\n \/* Kierunki i czasy przewijania *\/\r\n .col-1 { animation: scrollUp 25s linear infinite; }\r\n .col-2 { animation: scrollDown 30s linear infinite; }\r\n .col-3 { animation: scrollUp 28s linear infinite; }\r\n\r\n .testimonial-card {\r\n background: #ffffff;\r\n border: 1px solid rgba(0,0,0,0.05);\r\n border-radius: 25px;\r\n padding: 30px;\r\n box-shadow: 0 12px 35px rgba(0,0,0,0.04);\r\n flex-shrink: 0;\r\n transition: transform 0.3s ease, border-color 0.3s ease;\r\n }\r\n\r\n .testimonial-card:hover {\r\n transform: translateY(-5px) scale(1.02);\r\n border-color: #A855F7;\r\n }\r\n\r\n .user-box {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n margin-top: 20px;\r\n }\r\n\r\n .user-box img {\r\n width: 45px;\r\n height: 45px;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n }\r\n\r\n .mil-bold { font-weight: 600; display: block; color: #111; font-family: 'Inter', sans-serif; font-size: 15px;}\r\n .mil-thin { font-weight: 400; display: block; color: #555; font-family: 'Inter', sans-serif; line-height: 1.6; font-size: 15px; }\r\n\r\n @media (max-width: 1050px) { .col-3 { display: none; } }\r\n @media (max-width: 700px) { .col-2 { display: none; } }\r\n<\/style>\r\n\r\n<section class=\"testimonials-main-wrap\">\r\n \r\n <div class=\"testi-header-container\">\r\n <h2 class=\"testi-animated-title\" id=\"testi-title\">\r\n Wasze zadowolenie jest nasz\u0105<br><span class=\"testi-gradient-text\">najlepsz\u0105 wizyt\u00f3wk\u0105<\/span>\r\n <\/h2>\r\n <\/div>\r\n\r\n <div class=\"testimonials-wrap\">\r\n <div class=\"testimonials-grid\">\r\n \r\n <div class=\"testimonial-column col-1\">\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Ten ERP ca\u0142kowicie zmieni\u0142 nasze podej\u015bcie do finans\u00f3w. Wszystko dzia\u0142a b\u0142yskawicznie.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/women\/1.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Anna Kowalska<\/span><span class=\"mil-thin\">Financial Director<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Wsparcie techniczne reaguje w kilka minut. To rzadko\u015b\u0107, bardzo to doceniamy.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/men\/2.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Marek Nowak<\/span><span class=\"mil-thin\">IT Manager<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"System jest bardzo intuicyjny. Wdro\u017cenie zespo\u0142u zaj\u0119\u0142o nam tylko jeden dzie\u0144.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/women\/3.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Ewa Mazur<\/span><span class=\"mil-thin\">Operations Manager<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Automatyzacja raport\u00f3w zaoszcz\u0119dzi\u0142a nam oko\u0142o 20 godzin pracy miesi\u0119cznie.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/men\/4.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Piotr Wi\u015bniewski<\/span><span class=\"mil-thin\">CEO<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Bezpiecze\u0144stwo danych na najwy\u017cszym poziomie. Czujemy si\u0119 spokojni o nasze pliki.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/women\/5.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Katarzyna Lis<\/span><span class=\"mil-thin\">Security Lead<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Ten ERP ca\u0142kowicie zmieni\u0142 nasze podej\u015bcie do finans\u00f3w. Wszystko dzia\u0142a b\u0142yskawicznie.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/women\/1.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Anna Kowalska<\/span><span class=\"mil-thin\">Financial Director<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Wsparcie techniczne reaguje w kilka minut. To rzadko\u015b\u0107, bardzo to doceniamy.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/men\/2.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Marek Nowak<\/span><span class=\"mil-thin\">IT Manager<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"System jest bardzo intuicyjny. Wdro\u017cenie zespo\u0142u zaj\u0119\u0142o nam tylko jeden dzie\u0144.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/women\/3.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Ewa Mazur<\/span><span class=\"mil-thin\">Operations Manager<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Automatyzacja raport\u00f3w zaoszcz\u0119dzi\u0142a nam oko\u0142o 20 godzin pracy miesi\u0119cznie.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/men\/4.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Piotr Wi\u015bniewski<\/span><span class=\"mil-thin\">CEO<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Bezpiecze\u0144stwo danych na najwy\u017cszym poziomie. Czujemy si\u0119 spokojni o nasze pliki.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/women\/5.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Katarzyna Lis<\/span><span class=\"mil-thin\">Security Lead<\/span><\/div><\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"testimonial-column col-2\">\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Praca w chmurze to strza\u0142 w dziesi\u0105tk\u0119. Mamy dost\u0119p do firmy z ka\u017cdego miejsca.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/men\/6.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Tomasz Wilk<\/span><span class=\"mil-thin\">Logistics Manager<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Najlepsza inwestycja w oprogramowanie od lat. Skalowalno\u015b\u0107 jest niesamowita.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/women\/7.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Zofia Adamczyk<\/span><span class=\"mil-thin\">Marketing Director<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Integracja z naszymi starymi systemami przebieg\u0142a bez \u017cadnych problem\u00f3w.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/men\/8.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Janusz B\u0105k<\/span><span class=\"mil-thin\">CTO<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Dzi\u0119ki analityce real-time podejmujemy lepsze decyzje biznesowe.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/women\/9.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Marta Kr\u00f3l<\/span><span class=\"mil-thin\">Business Analyst<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Nasi pracownicy pokochali ten system od pierwszego wejrzenia.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/men\/10.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Robert Wo\u017aniak<\/span><span class=\"mil-thin\">HR Specialist<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Praca w chmurze to strza\u0142 w dziesi\u0105tk\u0119. Mamy dost\u0119p do firmy z ka\u017cdego miejsca.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/men\/6.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Tomasz Wilk<\/span><span class=\"mil-thin\">Logistics Manager<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Najlepsza inwestycja w oprogramowanie od lat. Skalowalno\u015b\u0107 jest niesamowita.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/women\/7.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Zofia Adamczyk<\/span><span class=\"mil-thin\">Marketing Director<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Integracja z naszymi starymi systemami przebieg\u0142a bez \u017cadnych problem\u00f3w.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/men\/8.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Janusz B\u0105k<\/span><span class=\"mil-thin\">CTO<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Dzi\u0119ki analityce real-time podejmujemy lepsze decyzje biznesowe.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/women\/9.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Marta Kr\u00f3l<\/span><span class=\"mil-thin\">Business Analyst<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Nasi pracownicy pokochali ten system od pierwszego wejrzenia.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/men\/10.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Robert Wo\u017aniak<\/span><span class=\"mil-thin\">HR Specialist<\/span><\/div><\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"testimonial-column col-3\">\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Modu\u0142 magazynowy jest genialny. Koniec z pomy\u0142kami w inwentaryzacji.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/men\/11.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Adam G\u00f3rski<\/span><span class=\"mil-thin\">Warehouse Manager<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Wszystkie faktury w jednym miejscu, posegregowane i gotowe dla ksi\u0119gowo\u015bci.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/women\/12.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Monika Dubiel<\/span><span class=\"mil-thin\">Accountant<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Bardzo dobra cena w stosunku do oferowanych mo\u017cliwo\u015bci.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/men\/13.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Filip Jurek<\/span><span class=\"mil-thin\">Startup Founder<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"System sam przypomina o terminach p\u0142atno\u015bci, co znacznie poprawi\u0142o nasz cashflow.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/women\/14.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Alicja Nowacka<\/span><span class=\"mil-thin\">CFO<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Obs\u0142uga klienta na poziomie premium. Zawsze pomocni i u\u015bmiechni\u0119ci.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/men\/15.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">\u0141ukasz Pytel<\/span><span class=\"mil-thin\">Sales Lead<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Modu\u0142 magazynowy jest genialny. Koniec z pomy\u0142kami w inwentaryzacji.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/men\/11.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Adam G\u00f3rski<\/span><span class=\"mil-thin\">Warehouse Manager<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Wszystkie faktury w jednym miejscu, posegregowane i gotowe dla ksi\u0119gowo\u015bci.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/women\/12.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Monika Dubiel<\/span><span class=\"mil-thin\">Accountant<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Bardzo dobra cena w stosunku do oferowanych mo\u017cliwo\u015bci.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/men\/13.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Filip Jurek<\/span><span class=\"mil-thin\">Startup Founder<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"System sam przypomina o terminach p\u0142atno\u015bci, co znacznie poprawi\u0142o nasz cashflow.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/women\/14.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">Alicja Nowacka<\/span><span class=\"mil-thin\">CFO<\/span><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><span class=\"mil-thin\">\"Obs\u0142uga klienta na poziomie premium. Zawsze pomocni i u\u015bmiechni\u0119ci.\"<\/span><div class=\"user-box\"><img decoding=\"async\" src=\"https:\/\/randomuser.me\/api\/portraits\/men\/15.jpg\"><div class=\"user-info\"><span class=\"mil-bold\">\u0141ukasz Pytel<\/span><span class=\"mil-thin\">Sales Lead<\/span><\/div><\/div><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n const titleElement = document.getElementById('testi-title');\r\n \r\n const titleObserver = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('visible');\r\n titleObserver.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.5 }); \r\n\r\n if (titleElement) {\r\n titleObserver.observe(titleElement);\r\n }\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-374c3ee exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-menu-anchor\" data-id=\"374c3ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"opinie\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-180d6a0 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"180d6a0\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic","_ha_eqh_enable":false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a490983 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"a490983\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n\r\n #stats-section-v1 {\r\n background-color: #F2F2F2;\r\n padding: 120px 24px;\r\n font-family: 'Inter', sans-serif; \/* G\u0142\u00f3wne ustawienie na Inter *\/\r\n color: #1a1a1a;\r\n width: 100vw;\r\n position: relative;\r\n left: 50%;\r\n right: 50%;\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n }\r\n\r\n #stats-section-v1 .container {\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n }\r\n\r\n .stats-header {\r\n text-align: center;\r\n margin-bottom: 80px;\r\n }\r\n\r\n .stats-title {\r\n font-family: 'Inter', sans-serif; \/* Zmieniono na Inter *\/\r\n font-size: clamp(2.5rem, 5vw, 3.8rem);\r\n font-weight: 300; \/* Lekka waga dla sp\u00f3jno\u015bci z Hero i Realizacjami *\/\r\n line-height: 1.2;\r\n letter-spacing: -0.03em;\r\n margin: 0;\r\n color: #09090b;\r\n }\r\n\r\n .stats-grid {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .stat-divider {\r\n width: 1px;\r\n height: 80px;\r\n background-color: rgba(26, 26, 26, 0.15);\r\n }\r\n\r\n .stat-item {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n padding: 20px;\r\n cursor: default;\r\n }\r\n\r\n .stat-number-wrap {\r\n display: flex;\r\n align-items: baseline;\r\n justify-content: center;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .stat-number {\r\n font-family: 'Inter', sans-serif; \/* Zmieniono na Inter *\/\r\n font-size: clamp(3.5rem, 6vw, 5.5rem);\r\n font-weight: 800;\r\n line-height: 1;\r\n display: inline-block;\r\n \r\n background-image: linear-gradient(to right, #888888 0%, #888888 45%, #4F46E5 55%, #A855F7 100%);\r\n background-size: 220% 100%;\r\n background-position: 0% 0%;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n color: transparent;\r\n \r\n transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), \r\n background-position 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n will-change: transform, background-position;\r\n }\r\n\r\n .stat-suffix {\r\n font-family: 'Inter', sans-serif; \/* Zmieniono na Inter *\/\r\n font-size: clamp(2rem, 3vw, 3rem);\r\n font-weight: 800;\r\n color: #888888;\r\n transition: color 0.6s ease, transform 0.5s ease;\r\n }\r\n\r\n .stat-item:hover .stat-number {\r\n transform: scale(1.1) translateY(-5px);\r\n background-position: 100% 0%;\r\n }\r\n\r\n .stat-item:hover .stat-suffix {\r\n color: #A855F7;\r\n transform: scale(1.1) translateY(-5px);\r\n }\r\n\r\n .stat-label {\r\n font-family: 'Inter', sans-serif; \/* Zmieniono na Inter *\/\r\n font-size: 14px;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n color: #1a1a1a;\r\n opacity: 0.8;\r\n }\r\n\r\n @media (max-width: 992px) {\r\n .stats-grid { flex-direction: column; gap: 30px; }\r\n .stat-item { width: 100%; padding: 10px; }\r\n .stat-divider { width: 60px; height: 1px; margin: 15px 0; }\r\n }\r\n<\/style>\r\n\r\n<section id=\"stats-section-v1\">\r\n <div class=\"container\">\r\n <div class=\"stats-header\">\r\n <h2 class=\"stats-title\">Liczby m\u00f3wi\u0105 same za siebie<\/h2>\r\n <\/div>\r\n\r\n <div class=\"stats-grid\" id=\"counters-container\">\r\n <div class=\"stat-item\">\r\n <div class=\"stat-number-wrap\"><span class=\"stat-number\" data-target=\"67\">0<\/span><\/div>\r\n <div class=\"stat-label\">Zadowolonych klient\u00f3w<\/div>\r\n <\/div>\r\n <div class=\"stat-divider\"><\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-number-wrap\"><span class=\"stat-number\" data-target=\"17\">0<\/span><\/div>\r\n <div class=\"stat-label\">Zrealizowanych stron<\/div>\r\n <\/div>\r\n <div class=\"stat-divider\"><\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-number-wrap\"><span class=\"stat-number\" data-target=\"142\">0<\/span><span class=\"stat-suffix\">+<\/span><\/div>\r\n <div class=\"stat-label\">Projekt\u00f3w DTP i Graficznych<\/div>\r\n <\/div>\r\n <div class=\"stat-divider\"><\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-number-wrap\"><span class=\"stat-number\" data-target=\"5\">0<\/span><\/div>\r\n <div class=\"stat-label\">Lat do\u015bwiadczenia<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n const counters = document.querySelectorAll('.stat-number');\r\n const section = document.getElementById('counters-container');\r\n let hasAnimated = false;\r\n\r\n function easeOutQuart(x) { return 1 - Math.pow(1 - x, 4); }\r\n\r\n function startCounters() {\r\n if (hasAnimated) return;\r\n hasAnimated = true;\r\n\r\n counters.forEach(counter => {\r\n const target = parseInt(counter.getAttribute('data-target'), 10);\r\n const duration = 2500; \r\n let startTimestamp = null;\r\n\r\n const step = (timestamp) => {\r\n if (!startTimestamp) startTimestamp = timestamp;\r\n const progress = Math.min((timestamp - startTimestamp) \/ duration, 1);\r\n const easeProgress = easeOutQuart(progress);\r\n const currentCount = Math.floor(easeProgress * target);\r\n \r\n counter.innerText = currentCount;\r\n if (progress < 1) {\r\n window.requestAnimationFrame(step);\r\n } else {\r\n counter.innerText = target; \r\n }\r\n };\r\n window.requestAnimationFrame(step);\r\n });\r\n }\r\n\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n startCounters();\r\n observer.unobserve(entry.target); \r\n }\r\n });\r\n }, { threshold: 0.3 }); \r\n\r\n if (section) observer.observe(section);\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<section class=\"elementor-element elementor-element-98a5bc3 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"98a5bc3\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic","_ha_eqh_enable":false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a1be626 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"a1be626\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n\r\n<style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');\r\n\r\n #graczak-faq-v4 {\r\n background-color: #F2F2F2;\r\n color: #09090b;\r\n padding: 100px 0 0 0;\r\n font-family: 'Inter', sans-serif;\r\n width: 100%;\r\n overflow: hidden;\r\n position: relative;\r\n -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);\r\n mask-image: linear-gradient(to bottom, black 85%, transparent 100%);\r\n }\r\n\r\n #graczak-faq-v4 .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 24px 150px 24px;\r\n }\r\n\r\n .faq-header {\r\n text-align: center;\r\n margin-bottom: 40px;\r\n perspective: 1200px;\r\n }\r\n\r\n .faq-title, .faq-subtitle, .tab-btn, .faq-item {\r\n opacity: 0;\r\n }\r\n\r\n .faq-title {\r\n font-size: clamp(2rem, 5vw, 4rem);\r\n font-weight: 300;\r\n letter-spacing: -0.04em;\r\n line-height: 1.1;\r\n margin: 0;\r\n color: #09090b;\r\n display: block;\r\n font-family: 'Inter', sans-serif;\r\n }\r\n\r\n .faq-subtitle {\r\n font-size: 1rem;\r\n font-weight: 500;\r\n color: #6b7280;\r\n margin-top: 15px;\r\n display: block;\r\n line-height: 1.6;\r\n font-family: 'Inter', sans-serif;\r\n }\r\n\r\n .faq-rotator-wrapper {\r\n display: inline-flex;\r\n height: 1.2em;\r\n overflow: hidden;\r\n vertical-align: bottom;\r\n }\r\n\r\n #faq-word-rotator {\r\n display: flex;\r\n flex-direction: column;\r\n transform: translateY(0);\r\n text-align: left;\r\n }\r\n\r\n .faq-rot-word {\r\n height: 1.2em;\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n padding-bottom: 0.1em;\r\n background: linear-gradient(135deg, #4F46E5 0%, #A855F7 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n font-weight: 700;\r\n }\r\n\r\n .contact-link-gradient {\r\n background: linear-gradient(135deg, #4F46E5 0%, #A855F7 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n position: relative;\r\n padding-bottom: 2px;\r\n font-weight: 800;\r\n text-decoration: none;\r\n cursor: pointer;\r\n display: inline-block;\r\n }\r\n\r\n .contact-link-gradient::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0; left: 0;\r\n width: 100%; height: 2px;\r\n background: linear-gradient(135deg, #4F46E5 0%, #A855F7 100%);\r\n transform: scaleX(0);\r\n transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n transform-origin: right;\r\n }\r\n\r\n .contact-link-gradient:hover::after { transform: scaleX(1); transform-origin: left; }\r\n\r\n .faq-tabs {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 15px;\r\n margin: 30px 0 50px 0;\r\n }\r\n\r\n .tab-btn {\r\n background: #FFFFFF;\r\n border: 1px solid rgba(0,0,0,0.05);\r\n padding: 14px 28px;\r\n border-radius: 9999px;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n color: #1a1a1a;\r\n cursor: pointer;\r\n font-family: 'Inter', sans-serif;\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n box-shadow: 0 4px 6px rgba(0,0,0,0.02);\r\n }\r\n\r\n .tab-btn:hover {\r\n transform: scale(1.08);\r\n border-color: #A855F7;\r\n }\r\n\r\n .tab-btn.active {\r\n background: #111111;\r\n color: #ffffff;\r\n border-color: #111111;\r\n }\r\n\r\n .faq-list { border-top: 1px solid rgba(9,9,11,0.1); }\r\n .faq-item { border-bottom: 1px solid rgba(9,9,11,0.1); }\r\n \r\n .faq-question {\r\n width: 100%;\r\n padding: 35px 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n text-align: left;\r\n font-family: 'Inter', sans-serif;\r\n }\r\n\r\n .question-text { \r\n font-size: clamp(1.1rem, 2vw, 1.4rem); \r\n font-weight: 600; \r\n padding-right: 20px; \r\n color: #09090b;\r\n transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease;\r\n }\r\n\r\n .icon-box { \r\n width: 24px; height: 24px; position: relative; flex-shrink: 0; \r\n transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n \r\n .icon-line { \r\n position: absolute; \r\n background: #09090b; \r\n border-radius: 2px; \r\n transition: transform 0.4s ease; \r\n }\r\n\r\n .line-h { width: 20px; height: 2px; top: 11px; left: 2px; }\r\n .line-v { width: 2px; height: 20px; top: 2px; left: 11px; }\r\n\r\n .faq-item:not(.active):hover .question-text {\r\n transform: translateX(15px);\r\n background: linear-gradient(135deg, #4F46E5 0%, #A855F7 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n }\r\n\r\n .faq-answer { height: 0; overflow: hidden; font-family: 'Inter', sans-serif; }\r\n .answer-inner { padding-bottom: 32px; font-size: 1.05rem; line-height: 1.6; color: #4b5563; max-width: 850px; font-weight: 400; }\r\n\r\n .category-group { display: none; opacity: 0; }\r\n .category-group.active { display: block; opacity: 1; }\r\n<\/style>\r\n\r\n<section id=\"graczak-faq-v4\">\r\n <div class=\"container\">\r\n <div class=\"faq-header\">\r\n <h2 class=\"faq-title\" id=\"animated-title\">\r\n Masz pytanie o \r\n <span class=\"faq-rotator-wrapper\">\r\n <span id=\"faq-word-rotator\">\r\n <span class=\"faq-rot-word\">wycen\u0119?<\/span>\r\n <span class=\"faq-rot-word\">wsp\u00f3\u0142prac\u0119?<\/span>\r\n <span class=\"faq-rot-word\">czas realizacji?<\/span>\r\n <span class=\"faq-rot-word\">pozycjonowanie?<\/span>\r\n <span class=\"faq-rot-word\" aria-hidden=\"true\">wycen\u0119?<\/span>\r\n <\/span>\r\n <\/span>\r\n <\/h2>\r\n <span class=\"faq-subtitle\">\r\n Nie mo\u017cesz znale\u017a\u0107 odpowiedzi na pytanie? \r\n <a class=\"contact-link-gradient\" id=\"scroll-to-bottom\">Napisz do nas<\/a>\r\n <\/span>\r\n <\/div>\r\n\r\n <div class=\"faq-tabs\">\r\n <button class=\"tab-btn active\" data-target=\"webdesign\">Webdesign & Motion<\/button>\r\n <button class=\"tab-btn\" data-target=\"ecommerce\">Sklepy e-commerce<\/button>\r\n <button class=\"tab-btn\" data-target=\"dtp\">Branding & Druk<\/button>\r\n <button class=\"tab-btn\" data-target=\"seo\">SEO & Marketing<\/button>\r\n <button class=\"tab-btn\" data-target=\"wspolpraca\">Wsp\u00f3\u0142praca<\/button>\r\n <\/div>\r\n\r\n <div class=\"faq-list\">\r\n <div class=\"category-group active\" id=\"webdesign\">\r\n <div class=\"faq-item\">\r\n <button class=\"faq-question\">\r\n <span class=\"question-text\">Czy po zako\u0144czeniu projektu b\u0119d\u0119 m\u00f3g\u0142 sam edytowa\u0107 tre\u015bci?<\/span>\r\n <div class=\"icon-box\"><div class=\"icon-line line-h\"><\/div><div class=\"icon-line line-v\"><\/div><\/div>\r\n <\/button>\r\n <div class=\"faq-answer\"><div class=\"answer-inner\">Tak. Strony buduj\u0119 w oparciu o intuicyjne systemy zarz\u0105dzania tre\u015bci\u0105 (CMS). Po wdro\u017ceniu otrzymasz instrukcj\u0119 wideo, jak samodzielnie zmienia\u0107 teksty czy zdj\u0119cia.<\/div><\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <button class=\"faq-question\">\r\n <span class=\"question-text\">Ile czasu trwa stworzenie strony od zera?<\/span>\r\n <div class=\"icon-box\"><div class=\"icon-line line-h\"><\/div><div class=\"icon-line line-v\"><\/div><\/div>\r\n <\/button>\r\n <div class=\"faq-answer\"><div class=\"answer-inner\">Zazwyczaj proces zajmuje od 3 do 6 tygodni, zale\u017cnie od stopnia skomplikowania. Kluczowe jest szybkie dostarczenie materia\u0142\u00f3w i sprawna komunikacja na etapie poprawek.<\/div><\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <button class=\"faq-question\">\r\n <span class=\"question-text\">Moja obecna strona jest wolna. Czy mo\u017cecie j\u0105 tylko \"od\u015bwie\u017cy\u0107\"?<\/span>\r\n <div class=\"icon-box\"><div class=\"icon-line line-h\"><\/div><div class=\"icon-line line-v\"><\/div><\/div>\r\n <\/button>\r\n <div class=\"faq-answer\"><div class=\"answer-inner\">Zawsze zaczynamy od audytu. Czasem wystarczy optymalizacja, ale cz\u0119sto lepszym i ta\u0144szym rozwi\u0105zaniem jest postawienie nowej, lekkiej struktury na nowoczesnym silniku.<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"category-group\" id=\"ecommerce\">\r\n <div class=\"faq-item\">\r\n <button class=\"faq-question\">\r\n <span class=\"question-text\">Pomo\u017cecie mi po\u0142\u0105czy\u0107 sklep z kurierami i p\u0142atno\u015bciami?<\/span>\r\n <div class=\"icon-box\"><div class=\"icon-line line-h\"><\/div><div class=\"icon-line line-v\"><\/div><\/div>\r\n <\/button>\r\n <div class=\"faq-answer\"><div class=\"answer-inner\">Oczywi\u015bcie. Integrujemy systemy p\u0142atno\u015bci (jak PayU, Przelewy24) oraz modu\u0142y wysy\u0142kowe (InPost, DPD), aby ca\u0142y proces sprzeda\u017cy by\u0142 w pe\u0142ni automatyczny.<\/div><\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <button class=\"faq-question\">\r\n <span class=\"question-text\">Czy sklep poradzi sobie z du\u017c\u0105 ilo\u015bci\u0105 produkt\u00f3w?<\/span>\r\n <div class=\"icon-box\"><div class=\"icon-line line-h\"><\/div><div class=\"icon-line line-v\"><\/div><\/div>\r\n <\/button>\r\n <div class=\"faq-answer\"><div class=\"answer-inner\">Tak, dobieramy silnik sklepu (np. WooCommerce lub Shopify) do skali Twojego biznesu, dbaj\u0105c o to, by przy tysi\u0105cach produkt\u00f3w strona nadal \u0142adowa\u0142a si\u0119 b\u0142yskawicznie.<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"category-group\" id=\"dtp\">\r\n <div class=\"faq-item\">\r\n <button class=\"faq-question\">\r\n <span class=\"question-text\">Czy przygotujecie pliki bezpo\u015brednio pod moj\u0105 drukarni\u0119?<\/span>\r\n <div class=\"icon-box\"><div class=\"icon-line line-h\"><\/div><div class=\"icon-line line-v\"><\/div><\/div>\r\n <\/button>\r\n <div class=\"faq-answer\"><div class=\"answer-inner\">Tak, dostarczamy gotowe pliki produkcyjne (PDF\/X) z uwzgl\u0119dnieniem spad\u00f3w, margines\u00f3w i odpowiedniej palety kolorystycznej CMYK, zgodnie z wytycznymi Twojej drukarni.<\/div><\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <button class=\"faq-question\">\r\n <span class=\"question-text\">Dostan\u0119 od Was logo w formacie, kt\u00f3ry mog\u0119 powi\u0119kszy\u0107 bez utraty jako\u015bci?<\/span>\r\n <div class=\"icon-box\"><div class=\"icon-line line-h\"><\/div><div class=\"icon-line line-v\"><\/div><\/div>\r\n <\/button>\r\n <div class=\"faq-answer\"><div class=\"answer-inner\">Zawsze. Przekazujemy komplet plik\u00f3w wektorowych (SVG, EPS, AI), kt\u00f3re mo\u017cesz nadrukowa\u0107 zar\u00f3wno na d\u0142ugopisie, jak i na ogromnym billboardzie bez obaw o piksele.<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"category-group\" id=\"seo\">\r\n <div class=\"faq-item\">\r\n <button class=\"faq-question\">\r\n <span class=\"question-text\">Po jakim czasie zobacz\u0119 pierwsze efekty w Google?<\/span>\r\n <div class=\"icon-box\"><div class=\"icon-line line-h\"><\/div><div class=\"icon-line line-v\"><\/div><\/div>\r\n <\/button>\r\n <div class=\"faq-answer\"><div class=\"answer-inner\">SEO to maraton. Pierwsze stabilne wzrosty widoczne s\u0105 zazwyczaj po 3-6 miesi\u0105cach intensywnych dzia\u0142a\u0144, cho\u0107 popraw\u0119 techniczn\u0105 Google zauwa\u017ca ju\u017c po kilku tygodniach.<\/div><\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <button class=\"faq-question\">\r\n <span class=\"question-text\">Czy gwarantujecie 1. miejsce w wynikach wyszukiwania?<\/span>\r\n <div class=\"icon-box\"><div class=\"icon-line line-h\"><\/div><div class=\"icon-line line-v\"><\/div><\/div>\r\n <\/button>\r\n <div class=\"faq-answer\"><div class=\"answer-inner\">Nikt uczciwy tego nie obieca, bo algorytm Google jest niezale\u017cny. Gwarantujemy jednak znacz\u0105cy wzrost widoczno\u015bci na kluczowe dla Twojej bran\u017cy frazy i wy\u017csz\u0105 jako\u015b\u0107 ruchu.<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"category-group\" id=\"wspolpraca\">\r\n <div class=\"faq-item\">\r\n <button class=\"faq-question\">\r\n <span class=\"question-text\">Jak wygl\u0105da kwestia p\u0142atno\u015bci \u2013 czy musz\u0119 p\u0142aci\u0107 ca\u0142o\u015b\u0107 z g\u00f3ry?<\/span>\r\n <div class=\"icon-box\"><div class=\"icon-line line-h\"><\/div><div class=\"icon-line line-v\"><\/div><\/div>\r\n <\/button>\r\n <div class=\"faq-answer\"><div class=\"answer-inner\">Standardowo dzielimy projekt na etapy. Rozpoczynamy od zadatku (zazwyczaj 30-50%), a reszt\u0119 rozliczamy po akceptacji finalnego projektu lub konkretnych kamieni milowych.<\/div><\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <button class=\"faq-question\">\r\n <span class=\"question-text\">A co je\u015bli w trakcie projektu zmieni mi si\u0119 koncepcja?<\/span>\r\n <div class=\"icon-box\"><div class=\"icon-line line-h\"><\/div><div class=\"icon-line line-v\"><\/div><\/div>\r\n <\/button>\r\n <div class=\"faq-answer\"><div class=\"answer-inner\">Jeste\u015bmy elastyczni. Je\u015bli zmiana jest drobna, wprowadzamy j\u0105 w ramach projektu. Przy wi\u0119kszych rewolucjach wsp\u00f3lnie oceniamy wp\u0142yw na bud\u017cet i czas realizacji.<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n if(typeof gsap !== \"undefined\" && typeof ScrollTrigger !== \"undefined\") {\r\n gsap.registerPlugin(ScrollTrigger);\r\n\r\n const mainTl = gsap.timeline({\r\n scrollTrigger: { trigger: \"#graczak-faq-v4\", start: \"top 75%\", once: true }\r\n });\r\n\r\n mainTl.fromTo(\"#animated-title\", { y: 60, opacity: 0 }, { y: 0, opacity: 1, duration: 1, ease: \"power4.out\" })\r\n .fromTo(\".faq-subtitle\", { y: 20, opacity: 0 }, { y: 0, opacity: 1, duration: 0.6 }, \"-=0.6\")\r\n .fromTo(\".tab-btn\", { scale: 0.8, opacity: 0 }, { scale: 1, opacity: 1, stagger: 0.1, duration: 0.5 }, \"-=0.4\")\r\n .fromTo(\".faq-item\", { y: 30, opacity: 0 }, { y: 0, opacity: 1, stagger: 0.05, duration: 0.7 }, \"-=0.3\");\r\n }\r\n\r\n const scrollBtn = document.getElementById('scroll-to-bottom');\r\n if(scrollBtn) {\r\n scrollBtn.addEventListener('click', (e) => {\r\n e.preventDefault();\r\n window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' });\r\n });\r\n }\r\n\r\n const faqItems = document.querySelectorAll('.faq-item');\r\n faqItems.forEach(item => {\r\n const question = item.querySelector('.faq-question');\r\n question.addEventListener('click', () => {\r\n const isActive = item.classList.contains('active');\r\n faqItems.forEach(i => { if(i!==item) { i.classList.remove('active'); gsap.to(i.querySelector('.faq-answer'), {height:0}); }});\r\n item.classList.toggle('active');\r\n gsap.to(item.querySelector('.faq-answer'), { height: isActive ? 0 : \"auto\", duration: 0.5, ease: \"power2.inOut\" });\r\n });\r\n });\r\n\r\n const tabBtns = document.querySelectorAll('.tab-btn');\r\n const groups = document.querySelectorAll('.category-group');\r\n tabBtns.forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n tabBtns.forEach(b => b.classList.remove('active'));\r\n btn.classList.add('active');\r\n const target = btn.getAttribute('data-target');\r\n gsap.to(groups, { opacity: 0, y: 10, duration: 0.2, onComplete: () => {\r\n groups.forEach(g => g.classList.remove('active'));\r\n const next = document.getElementById(target);\r\n if(next) {\r\n next.classList.add('active');\r\n gsap.fromTo(next, { opacity: 0, y: 10 }, { opacity: 1, y: 0, duration: 0.4 });\r\n }\r\n }});\r\n });\r\n });\r\n\r\n let faqIndex = 0; \r\n const faqRotator = document.getElementById('faq-word-rotator');\r\n if(faqRotator) {\r\n setInterval(() => { \r\n faqIndex++;\r\n faqRotator.style.transition = `transform 600ms cubic-bezier(0.65, 0, 0.35, 1)`;\r\n faqRotator.style.transform = `translateY(-${faqIndex * 1.2}em)`; \r\n if (faqIndex === 4) {\r\n setTimeout(() => {\r\n faqRotator.style.transition = 'none';\r\n faqRotator.style.transform = `translateY(0)`;\r\n faqIndex = 0;\r\n }, 600); \r\n }\r\n }, 2500); \r\n }\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Graczak Design Home Us\u0142ugi Portfolio Blog Kontakt Home Us\u0142ugi Portfolio Blog Kontakt Zacznijmy wsp\u00f3lny projekt kontakt@graczakdesign.pl Skopiowano do schowka! Projektujemy.. <span class=\"mil-el-more\"><span class=\"mil-link mil-dark mil-arrow-place mil-up\"><span>Read more<\/span><\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":2040,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-layout-builder.php","meta":{"_acf_changed":false,"_eb_attr":"","inline_featured_image":false,"footnotes":""},"class_list":["post-2013","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"aioseo_notices":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/graczakdesign.pl\/index.php\/wp-json\/wp\/v2\/pages\/2013","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graczakdesign.pl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/graczakdesign.pl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/graczakdesign.pl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graczakdesign.pl\/index.php\/wp-json\/wp\/v2\/comments?post=2013"}],"version-history":[{"count":2179,"href":"https:\/\/graczakdesign.pl\/index.php\/wp-json\/wp\/v2\/pages\/2013\/revisions"}],"predecessor-version":[{"id":5533,"href":"https:\/\/graczakdesign.pl\/index.php\/wp-json\/wp\/v2\/pages\/2013\/revisions\/5533"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graczakdesign.pl\/index.php\/wp-json\/wp\/v2\/media\/2040"}],"wp:attachment":[{"href":"https:\/\/graczakdesign.pl\/index.php\/wp-json\/wp\/v2\/media?parent=2013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}