{"id":9,"date":"2026-05-27T10:13:21","date_gmt":"2026-05-27T10:13:21","guid":{"rendered":"https:\/\/rarevision.pl\/?page_id=9"},"modified":"2026-06-25T06:13:42","modified_gmt":"2026-06-25T06:13:42","slug":"home","status":"publish","type":"page","link":"https:\/\/rarevision.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\r\n\r\nRareVision \u2014 Premium Digital Agency<\/title>\r\n<link rel=\"icon\" type=\"image\/svg+xml\" href=\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23c084fc'\/%3E%3Cstop offset='100%25' stop-color='%23e879f9'\/%3E%3C\/linearGradient%3E%3C\/defs%3E%3Crect width='64' height='64' rx='14' fill='%23060608'\/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='central' text-anchor='middle' font-family='Arial Black,sans-serif' font-weight='900' font-size='36' fill='url(%23g)'%3ER%3C\/text%3E%3C\/svg%3E\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Syne:wght@400;500;600;700;800&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n:root {\r\n --clr-bg: #060608;\r\n --clr-surface: #0d0d12;\r\n --clr-surface2: #111118;\r\n --clr-purple: #7c3aed;\r\n --clr-purple-light: #a855f7;\r\n --clr-purple-glow: #c084fc;\r\n --clr-neon: #e879f9;\r\n --clr-white: #f0eeff;\r\n --clr-gray: #8888a4;\r\n --clr-gray2: #4a4a6a;\r\n --clr-border: rgba(124, 58, 237, 0.18);\r\n --clr-glass: rgba(124, 58, 237, 0.06);\r\n --font-display: 'Syne', sans-serif;\r\n --font-mono: 'Space Mono', monospace;\r\n --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);\r\n --ease-snappy: cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\nhtml { scroll-behavior: smooth; overflow-x: hidden; }\r\nbody { font-family: var(--font-display); background: var(--clr-bg); color: var(--clr-white); overflow-x: hidden; cursor: none; }\r\nbody.loading { overflow: hidden; }\r\n\r\n\/* \u2500\u2500 UPDATE BANNER \u2500\u2500 *\/\r\n#update-banner {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n z-index: 10001;\r\n background: linear-gradient(90deg, rgba(124,58,237,0.95), rgba(168,85,247,0.95), rgba(232,121,249,0.95));\r\n backdrop-filter: blur(10px);\r\n padding: 9px 48px 9px 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n font-family: var(--font-mono);\r\n font-size: 0.72rem;\r\n letter-spacing: 0.06em;\r\n color: rgba(255,255,255,0.95);\r\n animation: bannerSlideDown 0.7s var(--ease-smooth) 1.2s both;\r\n}\r\n@keyframes bannerSlideDown {\r\n from { transform: translateY(-100%); opacity: 0; }\r\n to { transform: translateY(0); opacity: 1; }\r\n}\r\n#update-banner .banner-icon {\r\n font-size: 0.85rem;\r\n animation: spinSlow 4s linear infinite;\r\n flex-shrink: 0;\r\n}\r\n@keyframes spinSlow {\r\n from { transform: rotate(0deg); }\r\n to { transform: rotate(360deg); }\r\n}\r\n#update-banner .banner-dot {\r\n width: 5px; height: 5px; border-radius: 50%;\r\n background: rgba(255,255,255,0.7);\r\n flex-shrink: 0;\r\n}\r\n#update-banner-close {\r\n position: absolute;\r\n right: 16px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n background: none;\r\n border: none;\r\n color: rgba(255,255,255,0.7);\r\n font-size: 1rem;\r\n cursor: pointer;\r\n line-height: 1;\r\n padding: 4px;\r\n transition: color 0.2s;\r\n}\r\n#update-banner-close:hover { color: #fff; }\r\nbody.banner-visible { padding-top: 37px; }\r\nbody.banner-visible nav { top: 37px; }\r\n@media (max-width: 600px) {\r\n #update-banner { font-size: 0.62rem; letter-spacing: 0.04em; padding: 8px 40px 8px 14px; gap: 7px; }\r\n #update-banner .banner-dot { display: none; }\r\n body.banner-visible { padding-top: 34px; }\r\n body.banner-visible nav { top: 34px; }\r\n}\r\n\r\n#cursor { position: fixed; top: 0; left: 0; width: 12px; height: 12px; background: var(--clr-purple-glow); border-radius: 50%; pointer-events: none; z-index: 99999; mix-blend-mode: screen; transition: width 0.3s var(--ease-smooth), height 0.3s var(--ease-smooth), background 0.3s; transform: translate(-50%,-50%); }\r\n#cursor-ring { position: fixed; top: 0; left: 0; width: 36px; height: 36px; border: 1px solid rgba(168,85,247,0.5); border-radius: 50%; pointer-events: none; z-index: 99998; transform: translate(-50%,-50%); transition: transform 0.12s var(--ease-smooth), width 0.4s var(--ease-smooth), height 0.4s var(--ease-smooth), border-color 0.3s; }\r\nbody.cursor-hover #cursor { width: 6px; height: 6px; background: var(--clr-neon); }\r\nbody.cursor-hover #cursor-ring { width: 56px; height: 56px; border-color: var(--clr-neon); }\r\n@media (max-width: 768px) { #cursor, #cursor-ring { display: none; } body { cursor: auto; } }\r\n#noise { position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.032; background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'\/%3E%3C\/svg%3E\"); background-repeat: repeat; background-size: 180px 180px; animation: noiseShift 0.3s steps(1) infinite; }\r\n@keyframes noiseShift { 0%{background-position:0 0} 33%{background-position:-40px 20px} 66%{background-position:20px -40px} 100%{background-position:0 0} }\r\n#preloader { position: fixed; inset: 0; background: var(--clr-bg); z-index: 99990; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; transition: opacity 0.9s var(--ease-smooth), transform 0.9s var(--ease-smooth); }\r\n#preloader.hidden { opacity: 0; pointer-events: none; transform: scale(1.04); }\r\n.pre-logo { font-size: clamp(2.2rem, 6vw, 4.5rem); font-weight: 800; letter-spacing: -0.03em; background: linear-gradient(135deg, var(--clr-purple-glow), var(--clr-neon)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: preLogoPulse 2s ease-in-out infinite; position: relative; }\r\n.pre-logo::after { content: ''; position: absolute; inset: -20px; background: radial-gradient(ellipse, rgba(168,85,247,0.3) 0%, transparent 70%); animation: glowPulse 2s ease-in-out infinite; z-index: -1; }\r\n@keyframes preLogoPulse { 0%,100%{opacity:1} 50%{opacity:0.7} }\r\n@keyframes glowPulse { 0%,100%{transform:scale(1);opacity:0.4} 50%{transform:scale(1.2);opacity:0.8} }\r\n.pre-line { width: 200px; height: 1px; background: var(--clr-gray2); margin-top: 40px; position: relative; overflow: hidden; }\r\n.pre-progress { position: absolute; left: 0; top: 0; height: 100%; background: linear-gradient(90deg, var(--clr-purple), var(--clr-neon)); width: 0%; transition: width 0.05s linear; box-shadow: 0 0 10px var(--clr-purple-glow); }\r\n.pre-count { font-family: var(--font-mono); font-size: 0.75rem; color: var(--clr-gray); margin-top: 16px; letter-spacing: 0.1em; }\r\nnav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 28px 6vw; display: flex; align-items: center; justify-content: space-between; transition: background 0.4s, padding 0.4s, top 0.4s; }\r\nnav.scrolled { background: rgba(6,6,8,0.9); backdrop-filter: blur(20px); padding: 18px 6vw; border-bottom: 1px solid var(--clr-border); }\r\n.nav-logo { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.04em; background: linear-gradient(135deg, #ffffff 0%, var(--clr-purple-glow) 60%, var(--clr-neon) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-decoration: none; text-shadow: none; filter: drop-shadow(0 0 18px rgba(192,132,252,0.45)); transition: filter 0.3s; }\r\n.nav-logo:hover { filter: drop-shadow(0 0 28px rgba(232,121,249,0.65)); }\r\n.nav-links { display: flex; gap: 40px; list-style: none; }\r\n.nav-links a { font-size: 0.85rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--clr-gray); text-decoration: none; transition: color 0.3s; position: relative; }\r\n.nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--clr-purple-glow); transition: width 0.3s var(--ease-smooth); }\r\n.nav-links a:hover { color: var(--clr-white); }\r\n.nav-links a:hover::after { width: 100%; }\r\n.nav-cta { padding: 10px 24px; border: 1px solid var(--clr-purple); border-radius: 100px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--clr-purple-glow); text-decoration: none; transition: all 0.3s var(--ease-smooth); position: relative; overflow: hidden; }\r\n.nav-cta::before { content: ''; position: absolute; inset: 0; background: var(--clr-purple); transform: translateY(100%); transition: transform 0.3s var(--ease-smooth); }\r\n.nav-cta:hover { color: var(--clr-white); }\r\n.nav-cta:hover::before { transform: translateY(0); }\r\n.nav-cta span { position: relative; z-index: 1; }\r\n.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }\r\n.hamburger span { width: 26px; height: 1.5px; background: var(--clr-white); transition: all 0.3s; display: block; }\r\n.hamburger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }\r\n.hamburger.active span:nth-child(2) { opacity: 0; }\r\n.hamburger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }\r\n#hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 6vw; overflow: hidden; }\r\n.hero-bg-canvas { position: absolute; inset: 0; z-index: 0; }\r\n.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(124,58,237,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(124,58,237,0.07) 1px, transparent 1px); background-size: 80px 80px; z-index: 1; mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%); }\r\n.hero-content { position: relative; z-index: 10; max-width: 1100px; }\r\n.hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border: 1px solid var(--clr-border); border-radius: 100px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--clr-purple-glow); background: var(--clr-glass); backdrop-filter: blur(10px); margin-bottom: 32px; opacity: 0; animation: fadeSlideUp 0.8s var(--ease-smooth) 0.2s forwards; }\r\n.hero-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--clr-purple-glow); box-shadow: 0 0 8px var(--clr-purple-glow); animation: blinkDot 2s ease-in-out infinite; }\r\n@keyframes blinkDot { 0%,100%{opacity:1} 50%{opacity:0.3} }\r\n.hero-headline { font-size: clamp(3rem, 7.5vw, 8.5rem); font-weight: 800; line-height: 1.0; letter-spacing: -0.04em; margin-bottom: 32px; }\r\n.hero-headline .line { display: block; overflow: visible; padding-bottom: 0.08em; }\r\n.hero-headline .line span { display: block; transform: translateY(110%); animation: slideUp 0.9s var(--ease-smooth) forwards; }\r\n.hero-headline .line:nth-child(1) span { animation-delay: 0.4s; }\r\n.hero-headline .line:nth-child(2) span { animation-delay: 0.55s; }\r\n.hero-headline .line:nth-child(3) span { animation-delay: 0.7s; }\r\n.hero-headline .grad { background: linear-gradient(135deg, var(--clr-purple-glow) 0%, var(--clr-neon) 50%, var(--clr-purple-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n@keyframes slideUp { to { transform: translateY(0); } }\r\n@keyframes fadeSlideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }\r\n.hero-sub { font-size: clamp(0.95rem, 1.6vw, 1.15rem); color: var(--clr-gray); max-width: 520px; line-height: 1.7; margin-bottom: 48px; opacity: 0; animation: fadeSlideUp 0.8s var(--ease-smooth) 0.9s forwards; }\r\n.hero-actions { display: flex; gap: 16px; align-items: center; opacity: 0; animation: fadeSlideUp 0.8s var(--ease-smooth) 1.05s forwards; flex-wrap: wrap; }\r\n.btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 16px 36px; background: linear-gradient(135deg, var(--clr-purple), var(--clr-purple-light)); border: none; border-radius: 100px; font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.04em; color: var(--clr-white); text-decoration: none; cursor: pointer; transition: all 0.4s var(--ease-smooth); position: relative; overflow: hidden; }\r\n.btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--clr-purple-light), var(--clr-neon)); opacity: 0; transition: opacity 0.4s; }\r\n.btn-primary:hover::before { opacity: 1; }\r\n.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 60px rgba(124,58,237,0.5); }\r\n.btn-primary span { position: relative; z-index: 1; }\r\n.btn-primary .arrow { position: relative; z-index: 1; transition: transform 0.3s var(--ease-smooth); }\r\n.btn-primary:hover .arrow { transform: translateX(4px); }\r\n.btn-ghost { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; background: transparent; border: 1px solid var(--clr-gray2); border-radius: 100px; font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; color: var(--clr-gray); text-decoration: none; cursor: pointer; transition: all 0.3s var(--ease-smooth); }\r\n.btn-ghost:hover { border-color: var(--clr-purple-glow); color: var(--clr-white); }\r\n.hero-scroll-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; animation: fadeSlideUp 0.8s var(--ease-smooth) 1.5s forwards; z-index: 10; }\r\n.scroll-text { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.15em; color: var(--clr-gray2); text-transform: uppercase; }\r\n.scroll-line { width: 1px; height: 50px; background: linear-gradient(to bottom, var(--clr-purple-glow), transparent); animation: scrollPulse 2s ease-in-out infinite; }\r\n@keyframes scrollPulse { 0%,100%{opacity:0.3;transform:scaleY(0.8)} 50%{opacity:1;transform:scaleY(1)} }\r\n#sculptureCanvas { position: absolute; right: -5%; top: 50%; transform: translateY(-50%); width: 55%; max-width: 700px; height: 90vh; z-index: 5; opacity: 0; animation: fadeSlideUp 1.2s var(--ease-smooth) 0.8s forwards; }\r\n.particles-container { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }\r\n.particle { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--clr-purple-glow); animation: floatParticle linear infinite; opacity: 0; }\r\n@keyframes floatParticle { 0% { transform: translateY(100vh) translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 0.6; } 100% { transform: translateY(-100px) translateX(var(--drift)); opacity: 0; } }\r\nsection { position: relative; }\r\n.section-pad { padding: clamp(60px, 10vw, 160px) 6vw; }\r\n.section-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--clr-purple-glow); margin-bottom: 24px; }\r\n.section-tag::before { content: ''; width: 24px; height: 1px; background: var(--clr-purple-glow); }\r\n.section-headline { font-size: clamp(2.2rem, 5.5vw, 6rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; margin-bottom: 24px; }\r\n.section-sub { font-size: clamp(0.9rem, 1.4vw, 1.1rem); color: var(--clr-gray); line-height: 1.7; max-width: 560px; }\r\n.reveal { opacity: 0; transform: translateY(48px); transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth); }\r\n.reveal.visible { opacity: 1; transform: translateY(0); }\r\n.reveal-left { opacity: 0; transform: translateX(-48px); transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth); }\r\n.reveal-left.visible { opacity: 1; transform: translateX(0); }\r\n.reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth); }\r\n.reveal-scale.visible { opacity: 1; transform: scale(1); }\r\n#about { background: var(--clr-surface); overflow: hidden; }\r\n.about-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }\r\n.about-big-text { font-size: clamp(1.05rem, 2.2vw, 1.6rem); line-height: 1.5; color: var(--clr-white); font-weight: 500; margin-bottom: 40px; }\r\n.about-big-text em { font-style: normal; background: linear-gradient(135deg, var(--clr-purple-glow), var(--clr-neon)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n.about-body { color: var(--clr-gray); line-height: 1.8; font-size: 0.95rem; margin-bottom: 48px; }\r\n.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }\r\n.stat-item { padding: 20px 16px; border: 1px solid var(--clr-border); border-radius: 16px; background: var(--clr-glass); backdrop-filter: blur(10px); transition: border-color 0.3s, transform 0.3s; }\r\n.stat-item:hover { border-color: rgba(168,85,247,0.4); transform: translateY(-4px); }\r\n.stat-number { font-size: clamp(1.6rem, 3.5vw, 3rem); font-weight: 800; letter-spacing: -0.04em; background: linear-gradient(135deg, var(--clr-purple-glow), var(--clr-neon)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: block; line-height: 1; margin-bottom: 6px; }\r\n.stat-label { font-size: 0.72rem; color: var(--clr-gray); letter-spacing: 0.04em; line-height: 1.4; }\r\n.about-visual { position: relative; height: 500px; overflow: visible; }\r\n.about-visual-bg-img { position: absolute; inset: -24px; border-radius: 28px; overflow: hidden; z-index: 0; pointer-events: none; }\r\n.about-visual-bg-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 28px; display: block; will-change: transform; transform: scale(1.08); transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1); filter: brightness(0.72) saturate(1.15); }\r\n.about-visual-card { position: absolute; border: 1px solid var(--clr-border); border-radius: 20px; background: var(--clr-surface2); overflow: hidden; transition: transform 0.4s var(--ease-smooth); }\r\n.about-card-main { inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(232,121,249,0.08)); position: absolute; z-index: 2; }\r\n.about-card-main::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 70% 30%, rgba(168,85,247,0.15), transparent); }\r\n.about-year { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--clr-purple-glow); margin-bottom: 12px; position: relative; }\r\n.about-tagline { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; position: relative; }\r\n.timeline-dots { display: flex; flex-direction: column; gap: 0; padding: 0; margin-top: 40px; }\r\n.tl-item { display: flex; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--clr-border); align-items: flex-start; }\r\n.tl-year { font-family: var(--font-mono); font-size: 0.75rem; color: var(--clr-purple-glow); min-width: 50px; padding-top: 2px; flex-shrink: 0; }\r\n.tl-text { font-size: 0.88rem; color: var(--clr-gray); line-height: 1.6; }\r\n#services { overflow: hidden; }\r\n.services-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; flex-wrap: wrap; gap: 24px; }\r\n.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px; border: 1px solid var(--clr-border); border-radius: 24px; overflow: hidden; }\r\n.service-card { padding: 36px 28px; background: var(--clr-surface); border-right: 1px solid var(--clr-border); border-bottom: 1px solid var(--clr-border); transition: background 0.4s var(--ease-smooth); position: relative; overflow: hidden; cursor: pointer; }\r\n.service-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 100% 100% at 50% 110%, rgba(124,58,237,0.25), transparent 60%); opacity: 0; transition: opacity 0.4s var(--ease-smooth); }\r\n.service-card:hover::before { opacity: 1; }\r\n.service-card:hover { background: var(--clr-surface2); }\r\n.service-icon { width: 52px; height: 52px; border: 1px solid var(--clr-border); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; font-size: 1.4rem; background: var(--clr-glass); transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease-smooth); position: relative; }\r\n.service-card:hover .service-icon { border-color: rgba(168,85,247,0.6); box-shadow: 0 0 20px rgba(168,85,247,0.3); transform: scale(1.08) rotate(-4deg); }\r\n.service-name { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; transition: color 0.3s; }\r\n.service-card:hover .service-name { color: var(--clr-purple-glow); }\r\n.service-desc { font-size: 0.85rem; color: var(--clr-gray); line-height: 1.7; }\r\n.service-arrow { position: absolute; right: 28px; bottom: 28px; font-size: 1.2rem; opacity: 0; transform: translate(-8px, 8px); transition: all 0.3s var(--ease-smooth); color: var(--clr-purple-glow); }\r\n.service-card:hover .service-arrow { opacity: 1; transform: translate(0,0); }\r\n#process { background: var(--clr-surface); overflow: hidden; }\r\n.process-grid { margin-top: 72px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; position: relative; }\r\n.process-grid::before { content: ''; position: absolute; top: 28px; left: calc(100% \/ 14); right: calc(100% \/ 14); height: 1px; background: linear-gradient(90deg, transparent, var(--clr-purple), var(--clr-neon), var(--clr-purple), transparent); z-index: 0; }\r\n.process-step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 8px; position: relative; z-index: 1; cursor: pointer; }\r\n.process-dot { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--clr-border); background: var(--clr-bg); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 24px; transition: all 0.4s var(--ease-smooth); flex-shrink: 0; }\r\n.process-step:hover .process-dot { border-color: var(--clr-purple-glow); background: rgba(124,58,237,0.2); box-shadow: 0 0 30px rgba(168,85,247,0.4); transform: scale(1.1); }\r\n.process-num { font-family: var(--font-mono); font-size: 0.6rem; color: var(--clr-purple-glow); letter-spacing: 0.1em; margin-bottom: 8px; }\r\n.process-name { font-size: 0.82rem; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; transition: color 0.3s; }\r\n.process-step:hover .process-name { color: var(--clr-purple-glow); }\r\n.process-desc { font-size: 0.73rem; color: var(--clr-gray); line-height: 1.6; }\r\n#portfolio { overflow: hidden; }\r\n.portfolio-filters { display: flex; gap: 8px; margin-bottom: 48px; flex-wrap: wrap; }\r\n.filter-btn { padding: 8px 20px; border: 1px solid var(--clr-border); border-radius: 100px; background: transparent; font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; color: var(--clr-gray); cursor: pointer; transition: all 0.3s var(--ease-smooth); }\r\n.filter-btn.active, .filter-btn:hover { background: var(--clr-purple); border-color: var(--clr-purple); color: var(--clr-white); }\r\n.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }\r\n.portfolio-item { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4\/3; background: var(--clr-surface); border: 1px solid var(--clr-border); cursor: pointer; transition: transform 0.4s var(--ease-smooth); }\r\n.portfolio-item:nth-child(2) { margin-top: 40px; }\r\n.portfolio-item:nth-child(4) { grid-column: span 2; aspect-ratio: 16\/7; }\r\n.portfolio-item:nth-child(6) { margin-top: -40px; }\r\n.portfolio-item:hover { transform: scale(1.02); }\r\n.portfolio-item:hover .portfolio-overlay { opacity: 1; }\r\n.portfolio-item:hover .portfolio-thumb { transform: scale(1.08); }\r\n.portfolio-thumb { width: 100%; height: 100%; transition: transform 0.6s var(--ease-smooth); display: flex; align-items: center; justify-content: center; font-size: 3rem; }\r\n.portfolio-thumb-img { padding: 0; }\r\n.portfolio-thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\r\n.portfolio-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,6,8,0.9) 0%, rgba(124,58,237,0.3) 100%); opacity: 0; transition: opacity 0.4s var(--ease-smooth); display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; }\r\n.portfolio-cat { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.12em; color: var(--clr-purple-glow); text-transform: uppercase; margin-bottom: 6px; }\r\n.portfolio-title { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }\r\n.p1 { background: linear-gradient(135deg, #1a0533, #2d1057); }\r\n.p2 { background: linear-gradient(135deg, #051a33, #0d3357); }\r\n.p3 { background: linear-gradient(135deg, #1a0a00, #331a00); }\r\n.p4 { background: linear-gradient(135deg, #050a1a, #0d1a33); }\r\n.p5 { background: linear-gradient(135deg, #100a1a, #1f1433); }\r\n.p6 { background: linear-gradient(135deg, #0a1a05, #14330a); }\r\n.p7 { background: linear-gradient(135deg, #1a0a1a, #2d0d2d); }\r\n.p8 { background: linear-gradient(135deg, #1a1505, #332e0a); }\r\n#trusted { padding: clamp(60px, 8vw, 100px) 0; background: var(--clr-surface); overflow: hidden; }\r\n.trusted-header { text-align: center; margin-bottom: 56px; padding: 0 6vw; }\r\n.trusted-header p { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.15em; color: var(--clr-gray2); text-transform: uppercase; }\r\n.marquee-track { overflow: hidden; position: relative; }\r\n.marquee-track::before, .marquee-track::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; }\r\n.marquee-track::before { left: 0; background: linear-gradient(to right, var(--clr-surface), transparent); }\r\n.marquee-track::after { right: 0; background: linear-gradient(to left, var(--clr-surface), transparent); }\r\n.marquee-inner { display: flex; gap: 0; animation: marqueeScroll 30s linear infinite; width: max-content; }\r\n.marquee-inner:hover { animation-play-state: paused; }\r\n@keyframes marqueeScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }\r\n.logo-item { display: flex; align-items: center; justify-content: center; padding: 0 40px; min-width: 180px; height: 72px; color: var(--clr-gray2); font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; transition: color 0.3s; white-space: nowrap; }\r\n.logo-item:hover { color: var(--clr-purple-glow); }\r\n.logo-sep { width: 1px; height: 24px; background: var(--clr-border); flex-shrink: 0; align-self: center; }\r\n#testimonials { overflow: hidden; }\r\n.testimonials-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 64px; flex-wrap: wrap; gap: 24px; }\r\n.review-badges { display: flex; gap: 12px; flex-wrap: wrap; }\r\n.review-badge { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--clr-border); border-radius: 12px; background: var(--clr-glass); backdrop-filter: blur(10px); font-size: 0.8rem; font-weight: 600; }\r\n.stars { color: #fbbf24; letter-spacing: 2px; font-size: 0.75rem; }\r\n.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }\r\n.testimonial-card { padding: 32px; border: 1px solid var(--clr-border); border-radius: 24px; background: var(--clr-surface); backdrop-filter: blur(10px); position: relative; overflow: hidden; transition: all 0.4s var(--ease-smooth); cursor: pointer; }\r\n.testimonial-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 80% at 50% -20%, rgba(124,58,237,0.12), transparent); opacity: 0; transition: opacity 0.4s; }\r\n.testimonial-card:hover::before { opacity: 1; }\r\n.testimonial-card:hover { border-color: rgba(168,85,247,0.3); transform: translateY(-6px); }\r\n.testimonial-card:nth-child(2) { margin-top: 32px; }\r\n.testimonial-card:nth-child(3) { margin-top: -16px; }\r\n.quote-mark { font-size: 3rem; line-height: 1; color: var(--clr-purple-glow); opacity: 0.4; font-family: Georgia, serif; margin-bottom: 16px; display: block; }\r\n.testimonial-text { font-size: 0.9rem; line-height: 1.75; color: var(--clr-gray); margin-bottom: 28px; }\r\n.testimonial-author { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--clr-border); padding-top: 20px; }\r\n.author-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--clr-purple), var(--clr-neon)); display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; flex-shrink: 0; }\r\n.author-name { font-size: 0.88rem; font-weight: 700; letter-spacing: -0.01em; }\r\n.author-company { font-size: 0.75rem; color: var(--clr-gray); margin-top: 2px; }\r\n.testimonial-stars { margin-bottom: 20px; }\r\n.testimonial-stars span { color: #fbbf24; font-size: 0.8rem; }\r\n#technology { background: var(--clr-surface); overflow: hidden; }\r\n.tech-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }\r\n.tech-diagram { position: relative; height: 500px; }\r\n#techCanvas { width: 100%; height: 100%; border-radius: 24px; border: 1px solid var(--clr-border); background: var(--clr-bg); }\r\n.tech-features { display: flex; flex-direction: column; gap: 0; }\r\n.tech-feature { padding: 24px 0; border-bottom: 1px solid var(--clr-border); display: flex; gap: 20px; align-items: flex-start; cursor: pointer; transition: padding-left 0.3s var(--ease-smooth); }\r\n.tech-feature:hover { padding-left: 8px; }\r\n.tech-feat-icon { width: 44px; height: 44px; border: 1px solid var(--clr-border); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; background: var(--clr-glass); transition: border-color 0.3s, box-shadow 0.3s; color: var(--clr-white); }\r\n.tech-feature:hover .tech-feat-icon { border-color: rgba(168,85,247,0.5); box-shadow: 0 0 16px rgba(168,85,247,0.3); }\r\n.tech-feat-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.01em; }\r\n.tech-feat-desc { font-size: 0.82rem; color: var(--clr-gray); line-height: 1.6; }\r\n#cta-section { position: relative; overflow: hidden; text-align: center; padding: clamp(100px, 14vw, 200px) 6vw; }\r\n#cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(124,58,237,0.18), transparent 70%); }\r\n.cta-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(124,58,237,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(124,58,237,0.06) 1px, transparent 1px); background-size: 60px 60px; }\r\n.cta-headline { font-size: clamp(2.8rem, 8vw, 8rem); font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; margin-bottom: 32px; position: relative; z-index: 1; }\r\n.cta-headline .grad { background: linear-gradient(135deg, var(--clr-purple-glow), var(--clr-neon)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n.cta-sub { font-size: clamp(0.95rem, 1.4vw, 1.1rem); color: var(--clr-gray); margin-bottom: 48px; position: relative; z-index: 1; }\r\n.cta-actions { position: relative; z-index: 1; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }\r\n#contact { background: var(--clr-surface); overflow: hidden; }\r\n.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }\r\n.contact-detail { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--clr-border); }\r\n.contact-detail:first-of-type { padding-top: 40px; }\r\n.contact-detail-icon { font-size: 1.1rem; color: var(--clr-white); display: flex; align-items: center; flex-shrink: 0; margin-top: 2px; }\r\n.contact-detail-label { font-size: 0.72rem; font-family: var(--font-mono); letter-spacing: 0.1em; color: var(--clr-purple-glow); text-transform: uppercase; margin-bottom: 4px; }\r\n.contact-detail-val { font-size: 0.9rem; color: var(--clr-gray); }\r\n.form-steps { display: flex; gap: 4px; margin-bottom: 40px; }\r\n.form-step-dot { height: 3px; flex: 1; border-radius: 2px; background: var(--clr-gray2); transition: background 0.4s; }\r\n.form-step-dot.active { background: linear-gradient(90deg, var(--clr-purple), var(--clr-neon)); }\r\n.form-page { display: none; }\r\n.form-page.active { display: block; }\r\n.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\r\n.form-group { position: relative; margin-bottom: 20px; }\r\n.form-group label { position: absolute; top: 18px; left: 20px; font-size: 0.85rem; color: var(--clr-gray2); transition: all 0.3s var(--ease-smooth); pointer-events: none; z-index: 1; }\r\n.form-group input:focus ~ label, .form-group input:not(:placeholder-shown) ~ label, .form-group select:focus ~ label, .form-group textarea:focus ~ label, .form-group textarea:not(:placeholder-shown) ~ label { top: 6px; font-size: 0.65rem; color: var(--clr-purple-glow); letter-spacing: 0.08em; text-transform: uppercase; }\r\n.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 22px 20px 10px; background: var(--clr-surface2); border: 1px solid var(--clr-border); border-radius: 14px; font-family: var(--font-display); font-size: 0.9rem; color: var(--clr-white); outline: none; transition: border-color 0.3s, box-shadow 0.3s; appearance: none; }\r\n.form-group input::placeholder, .form-group textarea::placeholder { color: transparent; }\r\n.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: rgba(168,85,247,0.5); box-shadow: 0 0 0 3px rgba(124,58,237,0.1); }\r\n.form-group textarea { resize: none; min-height: 120px; }\r\n.form-group select option { background: var(--clr-surface2); }\r\n.form-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 12px; flex-wrap: wrap; }\r\n.form-step-label { font-family: var(--font-mono); font-size: 0.65rem; color: var(--clr-gray2); letter-spacing: 0.1em; }\r\nfooter { padding: 72px 6vw 40px; border-top: 1px solid var(--clr-border); }\r\n.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 60px; }\r\n.footer-logo { font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; background: linear-gradient(135deg, var(--clr-white), var(--clr-purple-glow)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: block; margin-bottom: 16px; }\r\n.footer-tagline { font-size: 0.85rem; color: var(--clr-gray); line-height: 1.65; margin-bottom: 24px; max-width: 260px; }\r\n.footer-socials { display: flex; gap: 12px; flex-wrap: wrap; }\r\n.social-link { width: 40px; height: 40px; border: 1px solid var(--clr-border); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; text-decoration: none; color: var(--clr-gray); transition: all 0.3s; }\r\n.social-link:hover { border-color: var(--clr-purple-glow); color: var(--clr-purple-glow); background: var(--clr-glass); }\r\n.footer-col-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-white); margin-bottom: 20px; }\r\n.footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }\r\n.footer-links a { font-size: 0.85rem; color: var(--clr-gray); text-decoration: none; transition: color 0.3s; }\r\n.footer-links a:hover { color: var(--clr-purple-glow); }\r\n.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; border-top: 1px solid var(--clr-border); flex-wrap: wrap; gap: 16px; }\r\n.footer-copy { font-size: 0.78rem; color: var(--clr-gray2); font-family: var(--font-mono); }\r\n#cookie-banner { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120px); background: rgba(13,13,18,0.95); backdrop-filter: blur(20px); border: 1px solid var(--clr-border); border-radius: 20px; padding: 20px 28px; display: flex; align-items: center; gap: 24px; z-index: 9990; max-width: 680px; width: calc(100% - 48px); transition: transform 0.6s var(--ease-smooth); }\r\n#cookie-banner.show { transform: translateX(-50%) translateY(0); }\r\n.cookie-text { font-size: 0.82rem; color: var(--clr-gray); line-height: 1.6; flex: 1; }\r\n.cookie-btns { display: flex; gap: 8px; flex-shrink: 0; }\r\n.cookie-accept { padding: 10px 20px; background: var(--clr-purple); border: none; border-radius: 100px; font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; color: white; cursor: pointer; transition: all 0.3s; }\r\n.cookie-accept:hover { background: var(--clr-purple-light); }\r\n.cookie-decline { padding: 10px 16px; background: transparent; border: 1px solid var(--clr-border); border-radius: 100px; font-family: var(--font-display); font-size: 0.8rem; color: var(--clr-gray); cursor: pointer; transition: all 0.3s; }\r\n.cookie-decline:hover { border-color: var(--clr-gray); color: var(--clr-white); }\r\n.mobile-menu { position: fixed; inset: 0; background: rgba(6,6,8,0.97); backdrop-filter: blur(20px); z-index: 990; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; transform: translateX(100%); transition: transform 0.5s var(--ease-smooth); }\r\n.mobile-menu.open { transform: translateX(0); }\r\n.mobile-menu a { font-size: clamp(1.8rem, 6vw, 2.4rem); font-weight: 800; letter-spacing: -0.04em; color: var(--clr-white); text-decoration: none; transition: color 0.3s; }\r\n.mobile-menu a:hover { color: var(--clr-purple-glow); }\r\n.menu-close { position: absolute; top: 28px; right: 6vw; background: none; border: none; color: var(--clr-white); font-size: 2rem; cursor: pointer; }\r\n.mobile-menu-cta { margin-top: 8px; padding: 14px 36px; background: linear-gradient(135deg, var(--clr-purple), var(--clr-purple-light)); border-radius: 100px; font-size: 1rem !important; letter-spacing: 0.02em !important; }\r\n@media (max-width: 1024px) {\r\n .about-inner { grid-template-columns: 1fr; gap: 48px; }\r\n .about-visual { display: none; }\r\n .tech-inner { grid-template-columns: 1fr; gap: 48px; }\r\n .tech-diagram { display: none; }\r\n .contact-inner { grid-template-columns: 1fr; gap: 48px; }\r\n .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }\r\n .process-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }\r\n .process-grid::before { display: none; }\r\n .process-step:nth-child(n+5) { margin-top: 32px; }\r\n #sculptureCanvas { width: 50%; opacity: 0.5; }\r\n .services-grid { grid-template-columns: repeat(2, 1fr); }\r\n .testimonials-grid { grid-template-columns: 1fr 1fr; gap: 16px; }\r\n .testimonial-card:nth-child(2) { margin-top: 0; }\r\n .testimonial-card:nth-child(3) { margin-top: 0; grid-column: span 2; }\r\n .stats-grid { grid-template-columns: repeat(3, 1fr); }\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n MOBILE RESPONSIVENESS FIXES\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\nhtml, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }\r\n\r\n\/* \u2500\u2500 UPDATE BANNER MOBILE \u2500\u2500 *\/\r\n@media (max-width: 480px) {\r\n #update-banner {\r\n font-size: 0.6rem;\r\n letter-spacing: 0.03em;\r\n padding: 7px 36px 7px 12px;\r\n gap: 6px;\r\n line-height: 1.35;\r\n flex-wrap: wrap;\r\n justify-content: flex-start;\r\n }\r\n #update-banner .banner-dot { display: none; }\r\n body.banner-visible { padding-top: 44px; }\r\n body.banner-visible nav { top: 44px; }\r\n}\r\n\r\n\/* \u2500\u2500 NAV MOBILE \u2500\u2500 *\/\r\n@media (max-width: 768px) {\r\n nav { padding: 16px 5vw; }\r\n nav.scrolled { padding: 12px 5vw; }\r\n .nav-links, .nav-cta { display: none; }\r\n .hamburger { display: flex; }\r\n .nav-logo { font-size: 1.45rem; }\r\n}\r\n\r\n\/* \u2500\u2500 HERO MOBILE \u2500\u2500 *\/\r\n@media (max-width: 768px) {\r\n #hero {\r\n padding: 90px 5vw 110px;\r\n min-height: 100svh;\r\n justify-content: center;\r\n align-items: flex-start;\r\n }\r\n .hero-content { width: 100%; }\r\n .hero-badge { font-size: 0.6rem; padding: 5px 12px; margin-bottom: 20px; gap: 6px; }\r\n .hero-headline { font-size: clamp(2.6rem, 11vw, 4rem); margin-bottom: 20px; letter-spacing: -0.035em; }\r\n .hero-sub { font-size: 0.9rem; margin-bottom: 28px; max-width: 100%; }\r\n .hero-actions { flex-direction: column; gap: 10px; width: 100%; }\r\n .btn-primary, .btn-ghost { padding: 14px 20px; font-size: 0.85rem; justify-content: center; width: 100%; }\r\n #sculptureCanvas { display: none; }\r\n .hero-scroll-indicator { bottom: 24px; }\r\n}\r\n\r\n\/* \u2500\u2500 SECTION GLOBAL MOBILE \u2500\u2500 *\/\r\n@media (max-width: 768px) {\r\n .section-pad { padding: 56px 5vw; }\r\n .section-headline { font-size: clamp(2rem, 9vw, 3rem); letter-spacing: -0.03em; margin-bottom: 16px; }\r\n .section-sub { font-size: 0.88rem; }\r\n .section-tag { font-size: 0.62rem; margin-bottom: 16px; }\r\n}\r\n\r\n\/* \u2500\u2500 ABOUT MOBILE \u2500\u2500 *\/\r\n@media (max-width: 768px) {\r\n .about-inner { grid-template-columns: 1fr; gap: 36px; }\r\n .about-big-text { font-size: 1rem; line-height: 1.55; margin-bottom: 20px; }\r\n .about-body { font-size: 0.88rem; margin-bottom: 28px; }\r\n .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }\r\n .stat-item { padding: 16px 12px; }\r\n .stat-number { font-size: clamp(1.4rem, 7vw, 2rem); }\r\n .stat-label { font-size: 0.68rem; }\r\n .timeline-dots { margin-top: 24px; }\r\n .tl-item { padding: 10px 0; gap: 14px; }\r\n .tl-year { font-size: 0.7rem; min-width: 40px; }\r\n .tl-text { font-size: 0.82rem; }\r\n}\r\n@media (max-width: 380px) {\r\n .stats-grid { grid-template-columns: 1fr; }\r\n}\r\n\r\n\/* \u2500\u2500 SERVICES MOBILE \u2500\u2500 *\/\r\n@media (max-width: 768px) {\r\n .services-header { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; }\r\n .services-grid { grid-template-columns: 1fr; gap: 1px; border-radius: 16px; }\r\n .service-card { padding: 28px 22px; }\r\n .service-icon { width: 46px; height: 46px; font-size: 1.2rem; margin-bottom: 18px; }\r\n .service-name { font-size: 1rem; }\r\n .service-desc { font-size: 0.83rem; }\r\n .service-arrow { opacity: 1; transform: translate(0,0); }\r\n}\r\n\r\n\/* \u2500\u2500 PROCESS MOBILE \u2500\u2500 *\/\r\n@media (max-width: 768px) {\r\n .process-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; margin-top: 48px; }\r\n .process-grid::before { display: none; }\r\n .process-step:nth-child(n+5) { margin-top: 0; }\r\n .process-dot { width: 48px; height: 48px; font-size: 1.1rem; margin-bottom: 16px; }\r\n .process-name { font-size: 0.8rem; }\r\n .process-desc { font-size: 0.7rem; line-height: 1.5; }\r\n .process-num { font-size: 0.58rem; }\r\n}\r\n@media (max-width: 380px) {\r\n .process-dot { width: 40px; height: 40px; }\r\n}\r\n\r\n\/* \u2500\u2500 PORTFOLIO MOBILE \u2500\u2500 *\/\r\n@media (max-width: 768px) {\r\n .portfolio-filters { gap: 6px; flex-wrap: wrap; }\r\n .filter-btn { padding: 7px 14px; font-size: 0.75rem; }\r\n .portfolio-grid { grid-template-columns: 1fr; gap: 12px; }\r\n .portfolio-item { aspect-ratio: 16\/9; border-radius: 14px; }\r\n .portfolio-item:nth-child(2) { margin-top: 0; }\r\n .portfolio-item:nth-child(4) { grid-column: span 1; aspect-ratio: 16\/9; }\r\n .portfolio-item:nth-child(6) { margin-top: 0; }\r\n \/* Always show captions on mobile (no hover) *\/\r\n .portfolio-overlay {\r\n opacity: 1;\r\n background: linear-gradient(to top, rgba(6,6,8,0.78) 0%, transparent 60%);\r\n }\r\n .portfolio-cat { font-size: 0.6rem; }\r\n .portfolio-title { font-size: 0.95rem; }\r\n}\r\n\r\n\/* \u2500\u2500 TRUSTED MOBILE \u2500\u2500 *\/\r\n@media (max-width: 768px) {\r\n #trusted { padding: 44px 0; }\r\n .logo-item { font-size: 0.88rem; padding: 0 24px; min-width: 140px; height: 56px; }\r\n .marquee-track::before, .marquee-track::after { width: 60px; }\r\n}\r\n\r\n\/* \u2500\u2500 TESTIMONIALS MOBILE \u2500\u2500 *\/\r\n@media (max-width: 768px) {\r\n .testimonials-header { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 36px; }\r\n .review-badges { flex-wrap: wrap; gap: 8px; }\r\n .review-badge { padding: 8px 14px; font-size: 0.75rem; }\r\n .testimonials-grid { grid-template-columns: 1fr; gap: 14px; }\r\n .testimonial-card { padding: 24px 20px; border-radius: 18px; }\r\n .testimonial-card:nth-child(2), .testimonial-card:nth-child(3) { margin-top: 0; grid-column: unset; }\r\n .testimonial-text { font-size: 0.85rem; margin-bottom: 20px; }\r\n .quote-mark { font-size: 2.5rem; margin-bottom: 10px; }\r\n}\r\n\r\n\/* \u2500\u2500 TECHNOLOGY MOBILE \u2500\u2500 *\/\r\n@media (max-width: 768px) {\r\n .tech-inner { grid-template-columns: 1fr; gap: 36px; }\r\n .tech-diagram { display: none; }\r\n .tech-feature { padding: 20px 0; gap: 14px; }\r\n .tech-feat-icon { width: 40px; height: 40px; font-size: 1rem; border-radius: 10px; }\r\n .tech-feat-title { font-size: 0.9rem; margin-bottom: 4px; }\r\n .tech-feat-desc { font-size: 0.78rem; line-height: 1.55; }\r\n}\r\n\r\n\/* \u2500\u2500 CTA MOBILE \u2500\u2500 *\/\r\n@media (max-width: 768px) {\r\n #cta-section { padding: 80px 5vw; }\r\n .cta-headline { font-size: clamp(2.4rem, 11vw, 3.5rem); margin-bottom: 20px; line-height: 1; }\r\n .cta-sub { font-size: 0.9rem; margin-bottom: 32px; }\r\n .cta-actions { flex-direction: column; align-items: stretch; gap: 10px; }\r\n .cta-actions .btn-primary, .cta-actions .btn-ghost { justify-content: center; width: 100%; }\r\n}\r\n\r\n\/* \u2500\u2500 CONTACT MOBILE \u2500\u2500 *\/\r\n@media (max-width: 768px) {\r\n .contact-inner { grid-template-columns: 1fr; gap: 40px; }\r\n .contact-detail:first-of-type { padding-top: 28px; }\r\n .contact-detail-val { font-size: 0.85rem; }\r\n .form-steps { margin-bottom: 28px; }\r\n .form-group { margin-bottom: 14px; }\r\n .form-group input, .form-group select, .form-group textarea {\r\n padding: 20px 16px 8px;\r\n font-size: 0.88rem;\r\n border-radius: 12px;\r\n }\r\n .form-row { grid-template-columns: 1fr; gap: 0; }\r\n .form-nav { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 4px; }\r\n .form-nav .btn-primary, .form-nav .btn-ghost { flex: 1; justify-content: center; min-width: 120px; }\r\n .form-step-label { order: -1; width: 100%; text-align: center; margin-bottom: 4px; }\r\n}\r\n\r\n\/* \u2500\u2500 FOOTER MOBILE \u2500\u2500 *\/\r\n@media (max-width: 768px) {\r\n footer { padding: 48px 5vw 32px; }\r\n .footer-top { grid-template-columns: 1fr 1fr; gap: 32px 24px; }\r\n .footer-brand { grid-column: span 2; }\r\n .footer-logo { font-size: 1.6rem; }\r\n .footer-tagline { font-size: 0.82rem; max-width: 100%; margin-bottom: 18px; }\r\n .footer-socials { gap: 8px; }\r\n .social-link { width: 36px; height: 36px; font-size: 0.82rem; }\r\n .footer-col-title { font-size: 0.72rem; margin-bottom: 14px; }\r\n .footer-links a { font-size: 0.8rem; }\r\n .footer-bottom { padding-top: 24px; flex-direction: column; align-items: flex-start; gap: 8px; }\r\n .footer-copy { font-size: 0.72rem; }\r\n}\r\n@media (max-width: 480px) {\r\n .footer-top { grid-template-columns: 1fr; }\r\n .footer-brand { grid-column: span 1; }\r\n}\r\n\r\n\/* \u2500\u2500 COOKIE BANNER MOBILE \u2500\u2500 *\/\r\n@media (max-width: 768px) {\r\n #cookie-banner {\r\n flex-direction: column;\r\n gap: 14px;\r\n padding: 18px;\r\n bottom: 12px;\r\n width: calc(100% - 24px);\r\n border-radius: 16px;\r\n }\r\n .cookie-text { font-size: 0.78rem; line-height: 1.5; }\r\n .cookie-btns { width: 100%; gap: 8px; }\r\n .cookie-accept, .cookie-decline { flex: 1; text-align: center; padding: 11px 14px; font-size: 0.82rem; }\r\n}\r\n\r\n\/* \u2500\u2500 MOBILE MENU \u2500\u2500 *\/\r\n@media (max-width: 768px) {\r\n .mobile-menu { gap: 24px; }\r\n .mobile-menu a { font-size: clamp(1.6rem, 8vw, 2.2rem); letter-spacing: -0.03em; }\r\n .mobile-menu-cta {\r\n margin-top: 4px;\r\n padding: 14px 32px !important;\r\n font-size: 0.95rem !important;\r\n background: linear-gradient(135deg, var(--clr-purple), var(--clr-purple-light));\r\n border-radius: 100px;\r\n }\r\n .menu-close { top: 20px; right: 5vw; font-size: 1.8rem; }\r\n}\r\n\r\n\/* \u2500\u2500 DISABLE HOVER EFFECTS ON TOUCH DEVICES \u2500\u2500 *\/\r\n@media (hover: none) {\r\n .service-card:hover { background: var(--clr-surface); }\r\n .service-card:hover::before { opacity: 0; }\r\n .service-card:hover .service-icon { transform: none; box-shadow: none; border-color: var(--clr-border); }\r\n .testimonial-card:hover { transform: none; }\r\n .portfolio-item:hover { transform: none; }\r\n .tech-feature:hover { padding-left: 0; }\r\n .tech-feature:hover .tech-feat-icon { border-color: var(--clr-border); box-shadow: none; }\r\n .stat-item:hover { transform: none; }\r\n .process-step:hover .process-dot { transform: none; box-shadow: none; border-color: var(--clr-border); background: var(--clr-bg); }\r\n .btn-primary:hover { transform: none; box-shadow: none; }\r\n}\r\n\r\n@keyframes borderGlow { 0%, 100% { border-color: rgba(124,58,237,0.2); } 50% { border-color: rgba(168,85,247,0.5); } }\r\n.magnetic { transition: transform 0.3s var(--ease-smooth); }\r\n<\/style>\r\n<\/head>\r\n<body class=\"loading\">\r\n<div id=\"cursor\" aria-hidden=\"true\"><\/div>\r\n<div id=\"cursor-ring\" aria-hidden=\"true\"><\/div>\r\n<div id=\"noise\" aria-hidden=\"true\"><\/div>\r\n\r\n<!-- UPDATE BANNER -->\r\n<div id=\"update-banner\" role=\"status\" aria-live=\"polite\">\r\n <span class=\"banner-icon\" aria-hidden=\"true\">\u2699<\/span>\r\n <span>Strona w trakcie aktualizacji<\/span>\r\n <div class=\"banner-dot\" aria-hidden=\"true\"><\/div>\r\n <span>Niekt\u00f3re zak\u0142adki mog\u0105 by\u0107 tymczasowo niedost\u0119pne<\/span>\r\n <button id=\"update-banner-close\" aria-label=\"Zamknij komunikat\">\u2715<\/button>\r\n<\/div>\r\n\r\n<div id=\"preloader\" role=\"status\" aria-label=\"\u0141adowanie strony\">\r\n <div class=\"pre-logo\">RareVision<\/div>\r\n <div class=\"pre-line\"><div class=\"pre-progress\" id=\"preProgress\"><\/div><\/div>\r\n <div class=\"pre-count\" id=\"preCount\">0%<\/div>\r\n<\/div>\r\n<div id=\"cookie-banner\" role=\"dialog\" aria-label=\"Zgoda na pliki cookie\">\r\n <p class=\"cookie-text\">U\u017cywamy plik\u00f3w cookie, aby zapewni\u0107 najlepsze do\u015bwiadczenie na naszej stronie.<\/p>\r\n <div class=\"cookie-btns\">\r\n <button class=\"cookie-accept\" id=\"cookieAccept\">Akceptuj<\/button>\r\n <button class=\"cookie-decline\" id=\"cookieDecline\">Odrzu\u0107<\/button>\r\n <\/div>\r\n<\/div>\r\n<div class=\"mobile-menu\" id=\"mobileMenu\" role=\"navigation\" aria-label=\"Menu mobilne\">\r\n <button class=\"menu-close\" id=\"menuClose\" aria-label=\"Zamknij menu\">\u2715<\/button>\r\n <a href=\"#about\" class=\"mobile-link\">O nas<\/a>\r\n <a href=\"#services\" class=\"mobile-link\">Us\u0142ugi<\/a>\r\n <a href=\"#portfolio\" class=\"mobile-link\">Portfolio<\/a>\r\n <a href=\"#technology\" class=\"mobile-link\">AI & Tech<\/a>\r\n <a href=\"#contact\" class=\"mobile-link mobile-menu-cta\">Wycena projektu \u2192<\/a>\r\n<\/div>\r\n<nav id=\"mainNav\" role=\"navigation\" aria-label=\"G\u0142\u00f3wna nawigacja\">\r\n <a href=\"#hero\" class=\"nav-logo\" aria-label=\"RareVision - strona g\u0142\u00f3wna\">RareVision<\/a>\r\n <ul class=\"nav-links\">\r\n <li><a href=\"#about\">O nas<\/a><\/li>\r\n <li><a href=\"#services\">Us\u0142ugi<\/a><\/li>\r\n <li><a href=\"#portfolio\">Portfolio<\/a><\/li>\r\n <li><a href=\"#process\">Proces<\/a><\/li>\r\n <li><a href=\"#technology\">AI & Tech<\/a><\/li>\r\n <\/ul>\r\n <a href=\"#contact\" class=\"nav-cta magnetic\" aria-label=\"Przejd\u017a do formularza wyceny\"><span>Wycena projektu<\/span><\/a>\r\n <button class=\"hamburger\" id=\"hamburgerBtn\" aria-label=\"Otw\u00f3rz menu\" aria-expanded=\"false\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n<\/nav>\r\n<section id=\"hero\" aria-label=\"Sekcja g\u0142\u00f3wna\">\r\n <canvas class=\"hero-bg-canvas\" id=\"heroCanvas\" aria-hidden=\"true\"><\/canvas>\r\n <div class=\"hero-grid\" aria-hidden=\"true\"><\/div>\r\n <div class=\"particles-container\" id=\"particlesContainer\" aria-hidden=\"true\"><\/div>\r\n <div class=\"hero-content\">\r\n <div class=\"hero-badge\" aria-label=\"Aktywna agencja digital\">Agencja Digital \u00b7 Aktywna od 2019<\/div>\r\n <h1 class=\"hero-headline\" aria-label=\"We build the impossible\">\r\n <span class=\"line\"><span>We build<\/span><\/span>\r\n <span class=\"line\"><span>the <span class=\"grad\">impossible.<\/span><\/span><\/span>\r\n <\/h1>\r\n <p class=\"hero-sub\">Tworzymy cyfrowe do\u015bwiadczenia, kt\u00f3re redefiniuj\u0105 granice designu i technologii. Strony, branding, AI \u2014 na poziomie, kt\u00f3rego jeszcze nie widzia\u0142e\u015b.<\/p>\r\n <div class=\"hero-actions\">\r\n <a href=\"#contact\" class=\"btn-primary magnetic\"><span>Zacznijmy projekt<\/span><span class=\"arrow\">\u2192<\/span><\/a>\r\n <a href=\"#portfolio\" class=\"btn-ghost magnetic\"><span>Zobacz portfolio<\/span><\/a>\r\n <\/div>\r\n <\/div>\r\n <canvas id=\"sculptureCanvas\" aria-hidden=\"true\"><\/canvas>\r\n <div class=\"hero-scroll-indicator\" aria-hidden=\"true\">\r\n <span class=\"scroll-text\">Scroll<\/span>\r\n <div class=\"scroll-line\"><\/div>\r\n <\/div>\r\n<\/section>\r\n<section id=\"about\" class=\"section-pad\" aria-label=\"O nas\">\r\n <div class=\"about-inner\">\r\n <div class=\"about-text-col\">\r\n <div class=\"section-tag reveal\">O nas<\/div>\r\n <h2 class=\"section-headline reveal\" style=\"transition-delay:0.1s\">Robimy <br><span style=\"background:linear-gradient(135deg,var(--clr-purple-glow),var(--clr-neon));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text\">cyfrow\u0105<\/span><br>rewolucj\u0119.<\/h2>\r\n <p class=\"about-big-text reveal\" style=\"transition-delay:0.2s\">RareVision to agencja, kt\u00f3ra <em>odrzuca przeci\u0119tno\u015b\u0107<\/em>. Od 2019 roku tworzymy projekty, kt\u00f3re wygrywaj\u0105 nagrody, zwi\u0119kszaj\u0105 sprzeda\u017c i buduj\u0105 legendarne marki.<\/p>\r\n <p class=\"about-body reveal\" style=\"transition-delay:0.3s\">\u0141\u0105czymy g\u0142\u0119bok\u0105 wiedz\u0119 technologiczn\u0105 z wizj\u0105 artystyczn\u0105. Ka\u017cdy projekt to dla nas okazja do stworzenia czego\u015b, czego \u015bwiat jeszcze nie widzia\u0142. Pracujemy z markami, kt\u00f3re rozumiej\u0105, \u017ce design to inwestycja, nie koszt.<\/p>\r\n <div class=\"stats-grid reveal\" style=\"transition-delay:0.4s\">\r\n <div class=\"stat-item\"><span class=\"stat-number counter\" data-target=\"323\">0<\/span><span class=\"stat-label\">Projekt\u00f3w zrealizowanych<\/span><\/div>\r\n <div class=\"stat-item\"><span class=\"stat-number counter\" data-target=\"97\">0<\/span><span class=\"stat-label\">% zadowolonych klient\u00f3w<\/span><\/div>\r\n <div class=\"stat-item\"><span class=\"stat-number counter\" data-target=\"6\">0<\/span><span class=\"stat-label\">Lat do\u015bwiadczenia<\/span><\/div>\r\n <\/div>\r\n <div class=\"timeline-dots reveal\" style=\"transition-delay:0.5s\" aria-label=\"Historia firmy\">\r\n <div class=\"tl-item\"><span class=\"tl-year\">2019<\/span><span class=\"tl-text\">Za\u0142o\u017cenie RareVision \u2014 start jako boutique web studio<\/span><\/div>\r\n <div class=\"tl-item\"><span class=\"tl-year\">2021<\/span><span class=\"tl-text\">Pierwsze projekty AI i automatyzacji \u2014 wej\u015bcie w nowy \u015bwiat<\/span><\/div>\r\n <div class=\"tl-item\"><span class=\"tl-year\">2023<\/span><span class=\"tl-text\">Przekroczenie 200 projekt\u00f3w. Rozbudowa o video production<\/span><\/div>\r\n <div class=\"tl-item\"><span class=\"tl-year\">2025<\/span><span class=\"tl-text\">Pe\u0142na integracja AI \u2014 323+ projekt\u00f3w, 6 lat na rynku<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"about-visual reveal-scale\" style=\"transition-delay:0.3s\" aria-hidden=\"true\">\r\n <div class=\"about-visual-bg-img\" id=\"aboutBgImg\">\r\n <img decoding=\"async\" src=\"https:\/\/rarevision.pl\/wp-content\/uploads\/2026\/06\/RareVision-idea.png\" alt=\"\" draggable=\"false\">\r\n <\/div>\r\n <div class=\"about-visual-card about-card-main\">\r\n <span class=\"about-year\">EST. 2019 \u00b7 GDA\u0143SK, PL<\/span>\r\n <p class=\"about-tagline\">Digital experiences<br>that convert.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n<section id=\"services\" class=\"section-pad\" aria-label=\"Nasze us\u0142ugi\">\r\n <div class=\"services-header\">\r\n <div>\r\n <div class=\"section-tag reveal\">Us\u0142ugi<\/div>\r\n <h2 class=\"section-headline reveal\" style=\"transition-delay:0.1s\">Pe\u0142en zakres<br>digital.<\/h2>\r\n <\/div>\r\n <p class=\"section-sub reveal\" style=\"transition-delay:0.2s\">Wszystko czego potrzebuje Twoja marka w jednym miejscu \u2014 od strategii przez design po wdro\u017cenie i wzrost.<\/p>\r\n <\/div>\r\n <div class=\"services-grid reveal\" style=\"transition-delay:0.3s\" role=\"list\">\r\n <div class=\"service-card\" role=\"listitem\" tabindex=\"0\"><div class=\"service-icon\" aria-hidden=\"true\">\u2b21<\/div><h3 class=\"service-name\">Web Design<\/h3><p class=\"service-desc\">Strony internetowe na poziomie Awwwards. Ka\u017cdy pixel przemy\u015blany, ka\u017cda interakcja zaplanowana.<\/p><span class=\"service-arrow\" aria-hidden=\"true\">\u2197<\/span><\/div>\r\n <div class=\"service-card\" role=\"listitem\" tabindex=\"0\"><div class=\"service-icon\" aria-hidden=\"true\">\u27e8\/\u27e9<\/div><h3 class=\"service-name\">Web Development<\/h3><p class=\"service-desc\">Szybkie, skalowalne, bezpieczne wdro\u017cenia. WordPress, Next.js, custom builds \u2014 bez kompromis\u00f3w.<\/p><span class=\"service-arrow\" aria-hidden=\"true\">\u2197<\/span><\/div>\r\n <div class=\"service-card\" role=\"listitem\" tabindex=\"0\"><div class=\"service-icon\" aria-hidden=\"true\">\u25c8<\/div><h3 class=\"service-name\">Branding<\/h3><p class=\"service-desc\">To\u017csamo\u015b\u0107 wizualna, kt\u00f3ra zostaje w g\u0142owie. Logo, identyfikacja, brand book \u2014 Twoja marka zapada w pami\u0119\u0107.<\/p><span class=\"service-arrow\" aria-hidden=\"true\">\u2197<\/span><\/div>\r\n <div class=\"service-card\" role=\"listitem\" tabindex=\"0\"><div class=\"service-icon\" aria-hidden=\"true\">\u25ce<\/div><h3 class=\"service-name\">SEO<\/h3><p class=\"service-desc\">Widoczno\u015b\u0107, kt\u00f3ra przynosi przych\u00f3d. Audyty, optymalizacja techniczna, content strategy.<\/p><span class=\"service-arrow\" aria-hidden=\"true\">\u2197<\/span><\/div>\r\n <div class=\"service-card\" role=\"listitem\" tabindex=\"0\"><div class=\"service-icon\" aria-hidden=\"true\">\u2726<\/div><h3 class=\"service-name\">AI Implementations<\/h3><p class=\"service-desc\">Chatboty, automatyzacje, integracje LLM. Wdra\u017camy AI, kt\u00f3re realnie oszcz\u0119dza czas i pieni\u0105dze.<\/p><span class=\"service-arrow\" aria-hidden=\"true\">\u2197<\/span><\/div>\r\n <div class=\"service-card\" role=\"listitem\" tabindex=\"0\"><div class=\"service-icon\" aria-hidden=\"true\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"23 7 16 12 23 17 23 7\"\/><rect x=\"1\" y=\"5\" width=\"15\" height=\"14\" rx=\"2\" ry=\"2\"\/><\/svg><\/div><h3 class=\"service-name\">Video Production<\/h3><p class=\"service-desc\">Brand video, reels, animacje produktowe. Tre\u015bci video, kt\u00f3re sprzedaj\u0105 i buduj\u0105 zasi\u0119g.<\/p><span class=\"service-arrow\" aria-hidden=\"true\">\u2197<\/span><\/div>\r\n <div class=\"service-card\" role=\"listitem\" tabindex=\"0\"><div class=\"service-icon\" aria-hidden=\"true\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/><path d=\"M2 17l10 5 10-5\"\/><path d=\"M2 12l10 5 10-5\"\/><\/svg><\/div><h3 class=\"service-name\">Automatyzacje<\/h3><p class=\"service-desc\">Zapier, Make, n8n, custom API. \u0141\u0105czymy systemy, eliminujemy r\u0119czn\u0105 prac\u0119, skalujemy procesy.<\/p><span class=\"service-arrow\" aria-hidden=\"true\">\u2197<\/span><\/div>\r\n <\/div>\r\n<\/section>\r\n<section id=\"process\" class=\"section-pad\" aria-label=\"Jak pracujemy\">\r\n <div style=\"text-align:center;margin-bottom:0\">\r\n <div class=\"section-tag reveal\" style=\"justify-content:center\">Proces<\/div>\r\n <h2 class=\"section-headline reveal\" style=\"transition-delay:0.1s\">Jak pracujemy<\/h2>\r\n <p class=\"section-sub reveal\" style=\"transition-delay:0.2s;margin:0 auto\">Siedem krok\u00f3w od pierwszej rozmowy do projektu, kt\u00f3ry zmienia Tw\u00f3j biznes.<\/p>\r\n <\/div>\r\n <div class=\"process-grid reveal\" style=\"transition-delay:0.3s\" role=\"list\">\r\n <div class=\"process-step\" role=\"listitem\" tabindex=\"0\"><div class=\"process-dot\" aria-hidden=\"true\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><\/svg><\/div><span class=\"process-num\">01<\/span><h3 class=\"process-name\">Discovery<\/h3><p class=\"process-desc\">Poznajemy Tw\u00f3j biznes, cele i konkurencj\u0119.<\/p><\/div>\r\n <div class=\"process-step\" role=\"listitem\" tabindex=\"0\"><div class=\"process-dot\" aria-hidden=\"true\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg><\/div><span class=\"process-num\">02<\/span><h3 class=\"process-name\">Strategy<\/h3><p class=\"process-desc\">UX research, moodboard, sitemap, plan dzia\u0142ania.<\/p><\/div>\r\n <div class=\"process-step\" role=\"listitem\" tabindex=\"0\"><div class=\"process-dot\" aria-hidden=\"true\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"\/><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"\/><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"\/><\/svg><\/div><span class=\"process-num\">03<\/span><h3 class=\"process-name\">Design<\/h3><p class=\"process-desc\">Tworzymy UI, kt\u00f3ry zachwyca. Iterujemy.<\/p><\/div>\r\n <div class=\"process-step\" role=\"listitem\" tabindex=\"0\"><div class=\"process-dot\" aria-hidden=\"true\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/><\/svg><\/div><span class=\"process-num\">04<\/span><h3 class=\"process-name\">Development<\/h3><p class=\"process-desc\">Szybki, czysty, skalowalny kod bez bug\u00f3w.<\/p><\/div>\r\n <div class=\"process-step\" role=\"listitem\" tabindex=\"0\"><div class=\"process-dot\" aria-hidden=\"true\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"\/><\/svg><\/div><span class=\"process-num\">05<\/span><h3 class=\"process-name\">Optimization<\/h3><p class=\"process-desc\">Testy, Lighthouse, A\/B. Wszystko na 100\/100.<\/p><\/div>\r\n <div class=\"process-step\" role=\"listitem\" tabindex=\"0\"><div class=\"process-dot\" aria-hidden=\"true\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 2L11 13\"\/><path d=\"M22 2L15 22 11 13 2 9l20-7z\"\/><\/svg><\/div><span class=\"process-num\">06<\/span><h3 class=\"process-name\">Launch<\/h3><p class=\"process-desc\">Mi\u0119kki i twardy launch. Monitoring i \u015bwi\u0119towanie.<\/p><\/div>\r\n <div class=\"process-step\" role=\"listitem\" tabindex=\"0\"><div class=\"process-dot\" aria-hidden=\"true\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"23 6 13.5 15.5 8.5 10.5 1 18\"\/><polyline points=\"17 6 23 6 23 12\"\/><\/svg><\/div><span class=\"process-num\">07<\/span><h3 class=\"process-name\">Growth<\/h3><p class=\"process-desc\">Skalujemy i rozwijamy razem z Tob\u0105.<\/p><\/div>\r\n <\/div>\r\n<\/section>\r\n<section id=\"portfolio\" class=\"section-pad\" aria-label=\"Portfolio\">\r\n <div class=\"services-header\">\r\n <div>\r\n <div class=\"section-tag reveal\">Portfolio<\/div>\r\n <h2 class=\"section-headline reveal\" style=\"transition-delay:0.1s\">Wybrane<br>realizacje.<\/h2>\r\n <\/div>\r\n <div class=\"portfolio-filters reveal\" style=\"transition-delay:0.2s\" role=\"group\" aria-label=\"Filtry portfolio\">\r\n <button class=\"filter-btn active\" data-filter=\"all\">Wszystkie<\/button>\r\n <button class=\"filter-btn\" data-filter=\"web\">Web<\/button>\r\n <button class=\"filter-btn\" data-filter=\"branding\">Branding<\/button>\r\n <button class=\"filter-btn\" data-filter=\"ai\">AI<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"portfolio-grid reveal\" style=\"transition-delay:0.3s\" role=\"list\">\r\n <article class=\"portfolio-item p1\" data-cat=\"web\" role=\"listitem\" tabindex=\"0\"><div class=\"portfolio-thumb portfolio-thumb-img\"><img decoding=\"async\" src=\"https:\/\/rarevision.pl\/wp-content\/uploads\/2026\/06\/speedway.png\" alt=\"Speedway Toru\u0144\" loading=\"lazy\"><\/div><div class=\"portfolio-overlay\"><span class=\"portfolio-cat\">Web Development<\/span><h3 class=\"portfolio-title\">Speedway Toru\u0144<\/h3><\/div><\/article>\r\n <article class=\"portfolio-item p2\" data-cat=\"web\" role=\"listitem\" tabindex=\"0\"><div class=\"portfolio-thumb portfolio-thumb-img\"><img decoding=\"async\" src=\"https:\/\/rarevision.pl\/wp-content\/uploads\/2026\/06\/game.png\" alt=\"The Last Song - Gra komputerowa\" loading=\"lazy\"><\/div><div class=\"portfolio-overlay\"><span class=\"portfolio-cat\">Web Design & Dev<\/span><h3 class=\"portfolio-title\">The Last Song<\/h3><\/div><\/article>\r\n <article class=\"portfolio-item p3\" data-cat=\"web\" role=\"listitem\" tabindex=\"0\"><div class=\"portfolio-thumb portfolio-thumb-img\"><img decoding=\"async\" src=\"https:\/\/rarevision.pl\/wp-content\/uploads\/2026\/06\/mjb.png\" alt=\"MJB\" loading=\"lazy\"><\/div><div class=\"portfolio-overlay\"><span class=\"portfolio-cat\">Web Design & Dev<\/span><h3 class=\"portfolio-title\">MJB<\/h3><\/div><\/article>\r\n <article class=\"portfolio-item p4\" data-cat=\"web\" role=\"listitem\" tabindex=\"0\"><div class=\"portfolio-thumb portfolio-thumb-img\"><img decoding=\"async\" src=\"https:\/\/rarevision.pl\/wp-content\/uploads\/2026\/06\/lodyweselne.png\" alt=\"Lody Tajskie Weselne\" loading=\"lazy\"><\/div><div class=\"portfolio-overlay\"><span class=\"portfolio-cat\">Web Design & Dev<\/span><h3 class=\"portfolio-title\">Lody Tajskie Weselne<\/h3><\/div><\/article>\r\n <article class=\"portfolio-item p5\" data-cat=\"web\" role=\"listitem\" tabindex=\"0\"><div class=\"portfolio-thumb portfolio-thumb-img\"><img decoding=\"async\" src=\"https:\/\/rarevision.pl\/wp-content\/uploads\/2026\/06\/dynastia.png\" alt=\"Dynastia Hetman Gniew - Klub Sportowy\" loading=\"lazy\"><\/div><div class=\"portfolio-overlay\"><span class=\"portfolio-cat\">Web Design & Dev<\/span><h3 class=\"portfolio-title\">Dynastia Hetman Gniew<\/h3><\/div><\/article>\r\n <article class=\"portfolio-item p6\" data-cat=\"web\" role=\"listitem\" tabindex=\"0\"><div class=\"portfolio-thumb portfolio-thumb-img\"><img decoding=\"async\" src=\"https:\/\/rarevision.pl\/wp-content\/uploads\/2026\/06\/szewczuk.png\" alt=\"Szewczuk Ubezpieczenia\" loading=\"lazy\"><\/div><div class=\"portfolio-overlay\"><span class=\"portfolio-cat\">Web Design & Dev<\/span><h3 class=\"portfolio-title\">Szewczuk Ubezpieczenia<\/h3><\/div><\/article>\r\n <article class=\"portfolio-item p7\" data-cat=\"web\" role=\"listitem\" tabindex=\"0\"><div class=\"portfolio-thumb portfolio-thumb-img\"><img decoding=\"async\" src=\"https:\/\/rarevision.pl\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-10-cze-2026-10_11_18.png\" alt=\"Diuban - Developer\" loading=\"lazy\"><\/div><div class=\"portfolio-overlay\"><span class=\"portfolio-cat\">Web Design & Dev<\/span><h3 class=\"portfolio-title\">Diuban - Developer<\/h3><\/div><\/article>\r\n <article class=\"portfolio-item p8\" data-cat=\"web\" role=\"listitem\" tabindex=\"0\"><div class=\"portfolio-thumb portfolio-thumb-img\"><img decoding=\"async\" src=\"https:\/\/rarevision.pl\/wp-content\/uploads\/2026\/06\/ck.png\" alt=\"Restauracja CK\" loading=\"lazy\"><\/div><div class=\"portfolio-overlay\"><span class=\"portfolio-cat\">Web Design & Dev<\/span><h3 class=\"portfolio-title\">Restauracja CK<\/h3><\/div><\/article>\r\n <\/div>\r\n<\/section>\r\n<section id=\"trusted\" aria-label=\"Zaufali nam\">\r\n <div class=\"trusted-header\">\r\n <div class=\"section-tag reveal\" style=\"justify-content:center\">Trusted by<\/div>\r\n <p class=\"reveal\" style=\"transition-delay:0.1s\">Marki, kt\u00f3rym zaufa\u0142y tysi\u0105ce klient\u00f3w<\/p>\r\n <\/div>\r\n <div class=\"marquee-track\" aria-label=\"Loga klient\u00f3w\">\r\n <div class=\"marquee-inner\">\r\n <span class=\"logo-item\">PSB Arkada<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">Diuban<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">LarpVenture<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">Restauracja CK<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">Speedway Toru\u0144<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">KIA<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">LEX Medica<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">Dynastia Hetman<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">WrathGames<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">CSCompendium<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">Gniew24<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">MJB<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">Pakery<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">Kamil Damrat<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">DietaNieKara<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">EgyptTravelz<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">PSB Arkada<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">Diuban<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">LarpVenture<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">Restauracja CK<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">Speedway Toru\u0144<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">KIA<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">LEX Medica<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">Dynastia Hetman<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">WrathGames<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">CSCompendium<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">Gniew24<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">MJB<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">Pakery<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">Kamil Damrat<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">DietaNieKara<\/span><div class=\"logo-sep\"><\/div><span class=\"logo-item\">EgyptTravelz<\/span>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n<section id=\"testimonials\" class=\"section-pad\" aria-label=\"Opinie klient\u00f3w\">\r\n <div class=\"testimonials-header\">\r\n <div>\r\n <div class=\"section-tag reveal\">Opinie<\/div>\r\n <h2 class=\"section-headline reveal\" style=\"transition-delay:0.1s\">Klienci<br>m\u00f3wi\u0105.<\/h2>\r\n <\/div>\r\n <div class=\"review-badges reveal\" style=\"transition-delay:0.2s\">\r\n <div class=\"review-badge\"><span>\ud83d\udd35 Google<\/span><div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div><span style=\"font-size:0.75rem;color:var(--clr-gray)\">5.0<\/span><\/div>\r\n <div class=\"review-badge\"><span>\ud83d\udd34 Clutch<\/span><div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div><span style=\"font-size:0.75rem;color:var(--clr-gray)\">5.0<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testimonials-grid\">\r\n <article class=\"testimonial-card reveal\" style=\"transition-delay:0.1s\"><span class=\"quote-mark\" aria-hidden=\"true\">\"<\/span><div class=\"testimonial-stars\"><span>\u2605\u2605\u2605\u2605\u2605<\/span><\/div><p class=\"testimonial-text\">RareVision ca\u0142kowicie zrewolucjonizowa\u0142o nasz\u0105 obecno\u015b\u0107 online. Nowa strona zwi\u0119kszy\u0142a konwersj\u0119 o 340% w ci\u0105gu pierwszych 3 miesi\u0119cy. To nie jest agencja \u2014 to partnerzy.<\/p><div class=\"testimonial-author\"><div class=\"author-avatar\" aria-hidden=\"true\">MK<\/div><div><p class=\"author-name\">Marcin Kowalski<\/p><p class=\"author-company\">CEO, NexusCorp<\/p><\/div><\/div><\/article>\r\n <article class=\"testimonial-card reveal\" style=\"transition-delay:0.2s\"><span class=\"quote-mark\" aria-hidden=\"true\">\"<\/span><div class=\"testimonial-stars\"><span>\u2605\u2605\u2605\u2605\u2605<\/span><\/div><p class=\"testimonial-text\">Wdro\u017cenie AI chatbota skr\u00f3ci\u0142o czas obs\u0142ugi klienta o 70%. Zesp\u00f3\u0142 RareVision rozumia\u0142 nasze potrzeby od pierwszego spotkania. Profesjonalizm na najwy\u017cszym poziomie.<\/p><div class=\"testimonial-author\"><div class=\"author-avatar\" aria-hidden=\"true\">AN<\/div><div><p class=\"author-name\">Anna Nowak<\/p><p class=\"author-company\">COO, Luminary Co.<\/p><\/div><\/div><\/article>\r\n <article class=\"testimonial-card reveal\" style=\"transition-delay:0.3s\"><span class=\"quote-mark\" aria-hidden=\"true\">\"<\/span><div class=\"testimonial-stars\"><span>\u2605\u2605\u2605\u2605\u2605<\/span><\/div><p class=\"testimonial-text\">Branding, kt\u00f3ry stworzyli, sprawi\u0142 \u017ce wygrali\u015bmy 2 przetargi z rz\u0119du. Konkurencja pyta\u0142a nas o agencj\u0119. To chyba najlepsza rekomendacja.<\/p><div class=\"testimonial-author\"><div class=\"author-avatar\" aria-hidden=\"true\">PW<\/div><div><p class=\"author-name\">Piotr Wi\u015bniewski<\/p><p class=\"author-company\">Founder, Cipher AG<\/p><\/div><\/div><\/article>\r\n <\/div>\r\n<\/section>\r\n<section id=\"technology\" class=\"section-pad\" aria-label=\"AI i technologia\">\r\n <div class=\"tech-inner\">\r\n <div>\r\n <div class=\"section-tag reveal\">AI & Technology<\/div>\r\n <h2 class=\"section-headline reveal\" style=\"transition-delay:0.1s\">Inteligentne<br>systemy<br><span style=\"background:linear-gradient(135deg,var(--clr-purple-glow),var(--clr-neon));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text\">dla Twojego<\/span><br>biznesu.<\/h2>\r\n <p class=\"section-sub reveal\" style=\"transition-delay:0.2s;margin-bottom:48px\">Wdra\u017camy AI i automatyzacje, kt\u00f3re realnie transformuj\u0105 operacje, skracaj\u0105 czas i zwi\u0119kszaj\u0105 przychody.<\/p>\r\n <div class=\"tech-features reveal\" style=\"transition-delay:0.3s\">\r\n <div class=\"tech-feature\" tabindex=\"0\"><div class=\"tech-feat-icon\" aria-hidden=\"true\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\/><\/svg><\/div><div><h3 class=\"tech-feat-title\">AI Chatboty & Asystenci<\/h3><p class=\"tech-feat-desc\">LLM-powered chatboty zintegrowane z CRM, obs\u0142ug\u0105 klienta i baz\u0105 wiedzy firmy.<\/p><\/div><\/div>\r\n <div class=\"tech-feature\" tabindex=\"0\"><div class=\"tech-feat-icon\" aria-hidden=\"true\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z\"\/><\/svg><\/div><div><h3 class=\"tech-feat-title\">Automatyzacje Proces\u00f3w<\/h3><p class=\"tech-feat-desc\">Make, n8n, Zapier \u2014 eliminujemy powtarzalne zadania i \u0142\u0105czymy systemy w jeden ekosystem.<\/p><\/div><\/div>\r\n <div class=\"tech-feature\" tabindex=\"0\"><div class=\"tech-feat-icon\" aria-hidden=\"true\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"20\" x2=\"18\" y2=\"10\"\/><line x1=\"12\" y1=\"20\" x2=\"12\" y2=\"4\"\/><line x1=\"6\" y1=\"20\" x2=\"6\" y2=\"14\"\/><line x1=\"2\" y1=\"20\" x2=\"22\" y2=\"20\"\/><\/svg><\/div><div><h3 class=\"tech-feat-title\">Data Integrations<\/h3><p class=\"tech-feat-desc\">Integracje z ERP, CRM, e-commerce, analytics. Dane w jednym miejscu, w czasie rzeczywistym.<\/p><\/div><\/div>\r\n <div class=\"tech-feature\" tabindex=\"0\"><div class=\"tech-feat-icon\" aria-hidden=\"true\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"6\" height=\"6\"\/><path d=\"M15 2v2M9 2v2M15 20v2M9 20v2M2 9h2M2 15h2M20 9h2M20 15h2\"\/><\/svg><\/div><div><h3 class=\"tech-feat-title\">Custom AI Ecosystems<\/h3><p class=\"tech-feat-desc\">Dedykowane rozwi\u0105zania AI dopasowane do specyfiki bran\u017cy. Trening, fine-tuning, RAG pipeline.<\/p><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"tech-diagram reveal-scale\" style=\"transition-delay:0.3s\" aria-hidden=\"true\">\r\n <canvas id=\"techCanvas\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n<section id=\"cta-section\" aria-label=\"Zacznij projekt\">\r\n <div class=\"cta-grid-bg\" aria-hidden=\"true\"><\/div>\r\n <div class=\"cta-headline reveal\"><span>Gotowy na<\/span><br><span class=\"grad\">next level?<\/span><\/div>\r\n <p class=\"cta-sub reveal\" style=\"transition-delay:0.2s\">Jeden projekt mo\u017ce zmieni\u0107 wszystko. Zacznijmy rozmow\u0119.<\/p>\r\n <div class=\"cta-actions reveal\" style=\"transition-delay:0.3s\">\r\n <a href=\"#contact\" class=\"btn-primary magnetic\"><span>Wycena bezp\u0142atna<\/span><span class=\"arrow\">\u2192<\/span><\/a>\r\n <a href=\"mailto:hello@rarevision.pl\" class=\"btn-ghost magnetic\"><span>hello@rarevision.pl<\/span><\/a>\r\n <\/div>\r\n<\/section>\r\n<section id=\"contact\" class=\"section-pad\" aria-label=\"Formularz wyceny\">\r\n <div class=\"contact-inner\">\r\n <div class=\"contact-info\">\r\n <div class=\"section-tag reveal\">Kontakt<\/div>\r\n <h2 class=\"section-headline reveal\" style=\"transition-delay:0.1s\">Porozmawiajmy<br>o projekcie.<\/h2>\r\n <p class=\"section-sub reveal\" style=\"transition-delay:0.2s;margin-bottom:0\">Wype\u0142nij formularz lub napisz bezpo\u015brednio. Odpowiadamy w ci\u0105gu 24h.<\/p>\r\n <div class=\"contact-detail reveal\" style=\"transition-delay:0.3s\"><span class=\"contact-detail-icon\" aria-hidden=\"true\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/><polyline points=\"22,6 12,13 2,6\"\/><\/svg><\/span><div><p class=\"contact-detail-label\">Email<\/p><p class=\"contact-detail-val\">hello@rarevision.pl<\/p><\/div><\/div>\r\n <div class=\"contact-detail reveal\" style=\"transition-delay:0.35s\"><span class=\"contact-detail-icon\" aria-hidden=\"true\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg><\/span><div><p class=\"contact-detail-label\">Lokalizacja<\/p><p class=\"contact-detail-val\">Gda\u0144sk, Polska \u00b7 Remote worldwide<\/p><\/div><\/div>\r\n <div class=\"contact-detail reveal\" style=\"transition-delay:0.4s\"><span class=\"contact-detail-icon\" aria-hidden=\"true\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg><\/span><div><p class=\"contact-detail-label\">Czas reakcji<\/p><p class=\"contact-detail-val\">Zazwyczaj w ci\u0105gu kilku godzin<\/p><\/div><\/div>\r\n <\/div>\r\n <div class=\"reveal\" style=\"transition-delay:0.3s\">\r\n <div class=\"form-steps\" role=\"tablist\" aria-label=\"Kroki formularza\">\r\n <div class=\"form-step-dot active\" id=\"step1dot\"><\/div>\r\n <div class=\"form-step-dot\" id=\"step2dot\"><\/div>\r\n <div class=\"form-step-dot\" id=\"step3dot\"><\/div>\r\n <\/div>\r\n <form class=\"contact-form\" id=\"quoteForm\" novalidate aria-label=\"Formularz wyceny projektu\">\r\n <div class=\"form-page active\" id=\"formPage1\">\r\n <div class=\"form-row\">\r\n <div class=\"form-group\"><input type=\"text\" id=\"firstName\" name=\"firstName\" placeholder=\" \" required autocomplete=\"given-name\"><label for=\"firstName\">Imi\u0119 i nazwisko<\/label><\/div>\r\n <div class=\"form-group\"><input type=\"email\" id=\"email\" name=\"email\" placeholder=\" \" required autocomplete=\"email\"><label for=\"email\">E-mail<\/label><\/div>\r\n <\/div>\r\n <div class=\"form-group\"><input type=\"text\" id=\"company\" name=\"company\" placeholder=\" \" autocomplete=\"organization\"><label for=\"company\">Firma (opcjonalnie)<\/label><\/div>\r\n <div class=\"form-nav\"><span class=\"form-step-label\">Krok 1 \/ 3 \u2014 Dane kontaktowe<\/span><button type=\"button\" class=\"btn-primary magnetic\" onclick=\"formNext(2)\"><span>Dalej<\/span><span class=\"arrow\">\u2192<\/span><\/button><\/div>\r\n <\/div>\r\n <div class=\"form-page\" id=\"formPage2\">\r\n <div class=\"form-group\"><select id=\"budget\" name=\"budget\" required><option value=\"\" disabled selected><\/option><option value=\"5k\">5 000 \u2013 15 000 PLN<\/option><option value=\"15k\">15 000 \u2013 50 000 PLN<\/option><option value=\"50k\">50 000 \u2013 150 000 PLN<\/option><option value=\"150k+\">150 000+ PLN<\/option><\/select><label for=\"budget\">Bud\u017cet projektu<\/label><\/div>\r\n <div class=\"form-group\"><select id=\"scope\" name=\"scope\" required><option value=\"\" disabled selected><\/option><option value=\"web\">Web Design & Development<\/option><option value=\"branding\">Branding & Identity<\/option><option value=\"seo\">SEO & Marketing<\/option><option value=\"ai\">AI & Automatyzacje<\/option><option value=\"video\">Video Production<\/option><option value=\"full\">Full Service<\/option><\/select><label for=\"scope\">Zakres projektu<\/label><\/div>\r\n <div class=\"form-group\"><input type=\"text\" id=\"deadline\" name=\"deadline\" placeholder=\" \"><label for=\"deadline\">Preferowany termin startu<\/label><\/div>\r\n <div class=\"form-nav\"><button type=\"button\" class=\"btn-ghost magnetic\" onclick=\"formNext(1)\">\u2190 Wr\u00f3\u0107<\/button><span class=\"form-step-label\">Krok 2 \/ 3 \u2014 Projekt<\/span><button type=\"button\" class=\"btn-primary magnetic\" onclick=\"formNext(3)\"><span>Dalej<\/span><span class=\"arrow\">\u2192<\/span><\/button><\/div>\r\n <\/div>\r\n <div class=\"form-page\" id=\"formPage3\">\r\n <div class=\"form-group\"><textarea id=\"description\" name=\"description\" placeholder=\" \" rows=\"5\" required><\/textarea><label for=\"description\">Opisz sw\u00f3j projekt<\/label><\/div>\r\n <div class=\"form-nav\"><button type=\"button\" class=\"btn-ghost magnetic\" onclick=\"formNext(2)\">\u2190 Wr\u00f3\u0107<\/button><span class=\"form-step-label\">Krok 3 \/ 3 \u2014 Opis<\/span><button type=\"submit\" class=\"btn-primary magnetic\"><span>Wy\u015blij wycen\u0119<\/span><span class=\"arrow\">\u2192<\/span><\/button><\/div>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n<footer aria-label=\"Stopka\">\r\n <div class=\"footer-top\">\r\n <div class=\"footer-brand\">\r\n <span class=\"footer-logo\">RareVision<\/span>\r\n <p class=\"footer-tagline\">Web design, branding i AI dla marek, kt\u00f3re chc\u0105 wi\u0119cej. Gda\u0144sk \u2192 ca\u0142y \u015bwiat.<\/p>\r\n <div class=\"footer-socials\" aria-label=\"Media spo\u0142eczno\u015bciowe\">\r\n <a href=\"#\" class=\"social-link\" aria-label=\"LinkedIn\">in<\/a>\r\n <a href=\"#\" class=\"social-link\" aria-label=\"Behance\">Be<\/a>\r\n <a href=\"#\" class=\"social-link\" aria-label=\"Instagram\">ig<\/a>\r\n <a href=\"#\" class=\"social-link\" aria-label=\"Dribbble\">dr<\/a>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <p class=\"footer-col-title\">Us\u0142ugi<\/p>\r\n <ul class=\"footer-links\">\r\n <li><a href=\"#services\">Web Design<\/a><\/li>\r\n <li><a href=\"#services\">Web Development<\/a><\/li>\r\n <li><a href=\"#services\">Branding<\/a><\/li>\r\n <li><a href=\"#services\">SEO<\/a><\/li>\r\n <li><a href=\"#services\">AI Implementations<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <p class=\"footer-col-title\">Firma<\/p>\r\n <ul class=\"footer-links\">\r\n <li><a href=\"#about\">O nas<\/a><\/li>\r\n <li><a href=\"#portfolio\">Portfolio<\/a><\/li>\r\n <li><a href=\"#testimonials\">Opinie<\/a><\/li>\r\n <li><a href=\"#process\">Proces<\/a><\/li>\r\n <li><a href=\"#contact\">Kontakt<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <p class=\"footer-col-title\">Kontakt<\/p>\r\n <ul class=\"footer-links\">\r\n <li><a href=\"mailto:hello@rarevision.pl\">hello@rarevision.pl<\/a><\/li>\r\n <li><a href=\"#\">Gda\u0144sk, Polska<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-bottom\">\r\n <span class=\"footer-copy\">\u00a9 2026 RareVision. Wszelkie prawa zastrze\u017cone.<\/span>\r\n <\/div>\r\n<\/footer>\r\n<script>\r\n(function() {\r\n'use strict';\r\n\/\/ Update banner\r\nconst banner = document.getElementById('update-banner');\r\nconst bannerClose = document.getElementById('update-banner-close');\r\nfunction applyBannerHeight() {\r\n if (banner && !banner.classList.contains('hidden-banner')) {\r\n document.body.classList.add('banner-visible');\r\n }\r\n}\r\napplyBannerHeight();\r\nbannerClose.addEventListener('click', () => {\r\n banner.style.transition = 'opacity 0.4s, transform 0.4s';\r\n banner.style.opacity = '0';\r\n banner.style.transform = 'translateY(-100%)';\r\n document.body.classList.remove('banner-visible');\r\n setTimeout(() => { banner.style.display = 'none'; }, 420);\r\n});\r\n\r\nconst preloader = document.getElementById('preloader');\r\nconst preProgress = document.getElementById('preProgress');\r\nconst preCount = document.getElementById('preCount');\r\nlet progress = 0;\r\nconst interval = setInterval(() => {\r\n progress += Math.random() * 12 + 3;\r\n if (progress >= 100) { progress = 100; clearInterval(interval); setTimeout(hidePreloader, 300); }\r\n preProgress.style.width = progress + '%';\r\n preCount.textContent = Math.floor(progress) + '%';\r\n}, 80);\r\nfunction hidePreloader() {\r\n document.body.classList.remove('loading');\r\n preloader.classList.add('hidden');\r\n setTimeout(() => { preloader.style.display = 'none'; }, 1000);\r\n initCookieBanner();\r\n}\r\nconst cursor = document.getElementById('cursor');\r\nconst cursorRing = document.getElementById('cursor-ring');\r\nlet mx = 0, my = 0, rx = 0, ry = 0;\r\nconst isTouchDevice = window.matchMedia('(hover: none)').matches;\r\nif (!isTouchDevice) {\r\n document.addEventListener('mousemove', e => { mx = e.clientX; my = e.clientY; });\r\n function animCursor() {\r\n rx += (mx - rx) * 0.14; ry += (my - ry) * 0.14;\r\n cursor.style.left = mx + 'px'; cursor.style.top = my + 'px';\r\n cursorRing.style.left = rx + 'px'; cursorRing.style.top = ry + 'px';\r\n requestAnimationFrame(animCursor);\r\n }\r\n animCursor();\r\n document.querySelectorAll('a,button,.service-card,.portfolio-item,.testimonial-card,.tech-feature,.process-step,.filter-btn,.stat-item').forEach(el => {\r\n el.addEventListener('mouseenter', () => document.body.classList.add('cursor-hover'));\r\n el.addEventListener('mouseleave', () => document.body.classList.remove('cursor-hover'));\r\n });\r\n}\r\nconst nav = document.getElementById('mainNav');\r\nwindow.addEventListener('scroll', () => { nav.classList.toggle('scrolled', window.scrollY > 60); }, { passive: true });\r\nconst hamburger = document.getElementById('hamburgerBtn');\r\nconst mobileMenu = document.getElementById('mobileMenu');\r\nconst menuClose = document.getElementById('menuClose');\r\nhamburger.addEventListener('click', () => { mobileMenu.classList.add('open'); hamburger.classList.add('active'); hamburger.setAttribute('aria-expanded', 'true'); document.body.style.overflow = 'hidden'; });\r\nfunction closeMenu() { mobileMenu.classList.remove('open'); hamburger.classList.remove('active'); hamburger.setAttribute('aria-expanded', 'false'); document.body.style.overflow = ''; }\r\nmenuClose.addEventListener('click', closeMenu);\r\ndocument.querySelectorAll('.mobile-link').forEach(link => { link.addEventListener('click', closeMenu); });\r\nconst heroCanvas = document.getElementById('heroCanvas');\r\nconst hCtx = heroCanvas.getContext('2d');\r\nfunction resizeHeroCanvas() { heroCanvas.width = heroCanvas.offsetWidth; heroCanvas.height = heroCanvas.offsetHeight; }\r\nresizeHeroCanvas();\r\nwindow.addEventListener('resize', resizeHeroCanvas, { passive: true });\r\nconst heroParticles = [];\r\nfor (let i = 0; i < 60; i++) { heroParticles.push({ x: Math.random() * 2000, y: Math.random() * 1200, vx: (Math.random() - 0.5) * 0.4, vy: (Math.random() - 0.5) * 0.4, r: Math.random() * 2 + 0.5 }); }\r\nlet heroMouseX = -999, heroMouseY = -999;\r\ndocument.getElementById('hero').addEventListener('mousemove', e => { const r = heroCanvas.getBoundingClientRect(); heroMouseX = e.clientX - r.left; heroMouseY = e.clientY - r.top; }, { passive: true });\r\nfunction drawHero() {\r\n const W = heroCanvas.width, H = heroCanvas.height;\r\n hCtx.clearRect(0,0,W,H);\r\n const grd = hCtx.createRadialGradient(W*0.3, H*0.5, 0, W*0.3, H*0.5, W*0.6);\r\n grd.addColorStop(0, 'rgba(124,58,237,0.08)'); grd.addColorStop(1, 'transparent');\r\n hCtx.fillStyle = grd; hCtx.fillRect(0,0,W,H);\r\n heroParticles.forEach((p, i) => {\r\n p.x += p.vx; p.y += p.vy;\r\n const fw = W * 1.2, fh = H * 1.2;\r\n if (p.x < -100) p.x = fw; if (p.x > fw) p.x = -100; if (p.y < -100) p.y = fh; if (p.y > fh) p.y = -100;\r\n const dx = p.x - heroMouseX, dy = p.y - heroMouseY, dist = Math.sqrt(dx*dx+dy*dy);\r\n if (dist < 120) { p.x += dx\/dist * 1.5; p.y += dy\/dist * 1.5; }\r\n hCtx.beginPath(); hCtx.arc(p.x, p.y, p.r, 0, Math.PI*2); hCtx.fillStyle = 'rgba(168,85,247,0.6)'; hCtx.fill();\r\n for (let j = i+1; j < heroParticles.length; j++) {\r\n const p2 = heroParticles[j], d = Math.hypot(p.x-p2.x, p.y-p2.y);\r\n if (d < 160) { hCtx.beginPath(); hCtx.moveTo(p.x, p.y); hCtx.lineTo(p2.x, p2.y); hCtx.strokeStyle = `rgba(124,58,237,${0.25*(1-d\/160)})`; hCtx.lineWidth = 0.6; hCtx.stroke(); }\r\n }\r\n });\r\n requestAnimationFrame(drawHero);\r\n}\r\ndrawHero();\r\nconst sculCanvas = document.getElementById('sculptureCanvas');\r\nif (sculCanvas && window.innerWidth > 768) {\r\n const sCtx = sculCanvas.getContext('2d');\r\n function resizeSculCanvas() { sculCanvas.width = sculCanvas.offsetWidth; sculCanvas.height = sculCanvas.offsetHeight; }\r\n resizeSculCanvas();\r\n window.addEventListener('resize', resizeSculCanvas, { passive: true });\r\n const codeChars = '01\u30a2\u30a4\u30a6\u30a8\u30aaABCDEF<\/>{}[]#@\u2726\u25c8\u25ce\u2b21\u2605'.split('');\r\n const streams = [];\r\n for (let i = 0; i < 40; i++) { streams.push({ x: Math.random()*700, y: Math.random()*-1000-100, speed: Math.random()*2+0.8, chars: Array.from({length:Math.floor(Math.random()*12+6)},()=>({char:codeChars[Math.floor(Math.random()*codeChars.length)],glow:Math.random()>0.7})), opacity: Math.random()*0.7+0.2 }); }\r\n let sculT = 0;\r\n function drawSculpture() {\r\n sculT++;\r\n const W = sculCanvas.width, H = sculCanvas.height;\r\n sCtx.clearRect(0,0,W,H);\r\n const headX=W*0.5, headY=H*0.42, headRX=W*0.26, headRY=H*0.35;\r\n const hg = sCtx.createRadialGradient(headX,headY,0,headX,headY,Math.max(headRX,headRY));\r\n hg.addColorStop(0,'rgba(168,85,247,0.18)'); hg.addColorStop(0.5,'rgba(124,58,237,0.1)'); hg.addColorStop(1,'transparent');\r\n sCtx.fillStyle=hg; sCtx.beginPath(); sCtx.ellipse(headX,headY,headRX*1.3,headRY*1.3,0,0,Math.PI*2); sCtx.fill();\r\n sCtx.beginPath(); sCtx.ellipse(headX,headY,headRX,headRY,0,0,Math.PI*2);\r\n const pulse=0.15+0.08*Math.sin(sculT*0.04); sCtx.strokeStyle=`rgba(168,85,247,${pulse})`; sCtx.lineWidth=1.5; sCtx.stroke();\r\n sCtx.strokeStyle='rgba(192,132,252,0.06)'; sCtx.lineWidth=1;\r\n for (let i=0;i<20;i++) { const y=headY-headRY+(headRY*2\/19)*i, halfW=headRX*Math.sqrt(1-Math.pow((y-headY)\/headRY,2)); if(!isNaN(halfW)){sCtx.beginPath();sCtx.moveTo(headX-halfW,y);sCtx.lineTo(headX+halfW,y);sCtx.stroke();} }\r\n streams.forEach(s => {\r\n s.y+=s.speed;\r\n if(s.y>H+200){s.y=Math.random()*-400-50;s.x=Math.random()*W;s.opacity=Math.random()*0.6+0.2;}\r\n const fontSize=11;\r\n s.chars.forEach((c,idx)=>{\r\n const cy=s.y+idx*(fontSize+3), alpha=(1-idx\/s.chars.length)*s.opacity;\r\n const dx=(s.x-headX)\/headRX, dy=(cy-headY)\/headRY, inHead=(dx*dx+dy*dy)<1;\r\n if(Math.random()<0.02)c.char=codeChars[Math.floor(Math.random()*codeChars.length)];\r\n sCtx.font=`${fontSize}px 'Space Mono',monospace`;\r\n if(inHead){sCtx.fillStyle=`rgba(232,121,249,${alpha*0.9})`;if(c.glow){sCtx.shadowColor='rgba(232,121,249,0.8)';sCtx.shadowBlur=8;}}\r\n else{sCtx.fillStyle=`rgba(168,85,247,${alpha*0.35})`;sCtx.shadowBlur=0;}\r\n sCtx.fillText(c.char,s.x,cy); sCtx.shadowBlur=0;\r\n });\r\n });\r\n if(sculT%2===0){const angle=Math.random()*Math.PI*2,ex=headX+headRX*Math.cos(angle)*(0.8+Math.random()*0.4),ey=headY+headRY*Math.sin(angle)*(0.8+Math.random()*0.4);sCtx.beginPath();sCtx.arc(ex,ey,Math.random()*2+0.5,0,Math.PI*2);sCtx.fillStyle=`rgba(200,130,255,${Math.random()*0.6+0.2})`;sCtx.shadowColor='rgba(168,85,247,0.8)';sCtx.shadowBlur=8;sCtx.fill();sCtx.shadowBlur=0;}\r\n requestAnimationFrame(drawSculpture);\r\n }\r\n drawSculpture();\r\n}\r\nconst pCont = document.getElementById('particlesContainer');\r\nfor (let i=0;i<25;i++){const p=document.createElement('div');p.className='particle';const left=Math.random()*100,dur=Math.random()*8+6,delay=Math.random()*8,drift=(Math.random()-0.5)*200;p.style.cssText=`left:${left}%;--drift:${drift}px;animation-duration:${dur}s;animation-delay:${delay}s;width:${Math.random()*3+1}px;height:${Math.random()*3+1}px`;pCont.appendChild(p);}\r\nconst techCanvas = document.getElementById('techCanvas');\r\nif (techCanvas) {\r\n const tCtx = techCanvas.getContext('2d');\r\n function resizeTechCanvas(){techCanvas.width=techCanvas.offsetWidth;techCanvas.height=techCanvas.offsetHeight;}\r\n resizeTechCanvas(); window.addEventListener('resize',resizeTechCanvas,{passive:true});\r\n const nodes=[{x:0.5,y:0.15,label:'LLM Core',size:28,color:'#a855f7'},{x:0.2,y:0.38,label:'CRM',size:18,color:'#7c3aed'},{x:0.8,y:0.38,label:'ERP',size:18,color:'#7c3aed'},{x:0.15,y:0.62,label:'Analytics',size:16,color:'#6d28d9'},{x:0.5,y:0.55,label:'Automation',size:22,color:'#c084fc'},{x:0.85,y:0.62,label:'API',size:16,color:'#6d28d9'},{x:0.3,y:0.80,label:'Database',size:16,color:'#5b21b6'},{x:0.7,y:0.80,label:'Webhooks',size:16,color:'#5b21b6'}];\r\n const edges=[[0,1],[0,2],[1,3],[1,4],[2,4],[2,5],[4,6],[4,7],[3,6],[5,7]];\r\n const pulses=edges.map(()=>({t:Math.random(),speed:0.003+Math.random()*0.003}));\r\n let tAnim=0;\r\n function drawTech(){\r\n tAnim++; const W=techCanvas.width,H=techCanvas.height;\r\n tCtx.clearRect(0,0,W,H); tCtx.fillStyle='rgba(6,6,8,0.4)'; tCtx.fillRect(0,0,W,H);\r\n edges.forEach((e,idx)=>{\r\n const a=nodes[e[0]],b=nodes[e[1]],ax=a.x*W,ay=a.y*H,bx=b.x*W,by=b.y*H;\r\n tCtx.beginPath();tCtx.moveTo(ax,ay);tCtx.lineTo(bx,by);tCtx.strokeStyle='rgba(124,58,237,0.25)';tCtx.lineWidth=1;tCtx.stroke();\r\n pulses[idx].t+=pulses[idx].speed; if(pulses[idx].t>1)pulses[idx].t=0;\r\n const t=pulses[idx].t,px=ax+(bx-ax)*t,py=ay+(by-ay)*t;\r\n tCtx.beginPath();tCtx.arc(px,py,3,0,Math.PI*2);tCtx.fillStyle='rgba(232,121,249,0.9)';tCtx.shadowColor='rgba(232,121,249,0.8)';tCtx.shadowBlur=10;tCtx.fill();tCtx.shadowBlur=0;\r\n });\r\n nodes.forEach(n=>{\r\n const x=n.x*W,y=n.y*H,pulse2=n.size*(1+0.06*Math.sin(tAnim*0.05+n.x*10));\r\n const grd=tCtx.createRadialGradient(x,y,0,x,y,pulse2*1.8);\r\n grd.addColorStop(0,n.color+'cc');grd.addColorStop(1,'transparent');\r\n tCtx.fillStyle=grd;tCtx.beginPath();tCtx.arc(x,y,pulse2*1.8,0,Math.PI*2);tCtx.fill();\r\n tCtx.beginPath();tCtx.arc(x,y,pulse2,0,Math.PI*2);tCtx.fillStyle=n.color+'55';tCtx.fill();\r\n tCtx.beginPath();tCtx.arc(x,y,pulse2*0.5,0,Math.PI*2);tCtx.fillStyle=n.color+'dd';tCtx.fill();\r\n tCtx.font=\"bold 10px 'Syne',sans-serif\";tCtx.fillStyle='rgba(240,238,255,0.8)';tCtx.textAlign='center';tCtx.fillText(n.label,x,y+pulse2+14);\r\n });\r\n requestAnimationFrame(drawTech);\r\n }\r\n drawTech();\r\n}\r\nconst reveals=document.querySelectorAll('.reveal,.reveal-left,.reveal-scale');\r\nconst revealObserver=new IntersectionObserver((entries)=>{entries.forEach(e=>{if(e.isIntersecting){setTimeout(()=>e.target.classList.add('visible'),0);revealObserver.unobserve(e.target);}});},{threshold:0.1,rootMargin:'0px 0px -40px 0px'});\r\nreveals.forEach(el=>revealObserver.observe(el));\r\nconst counterObserver=new IntersectionObserver(entries=>{entries.forEach(e=>{if(e.isIntersecting){const el=e.target,target=parseInt(el.dataset.target),duration=1800,start=performance.now();function update(time){const elapsed=time-start,progress=Math.min(elapsed\/duration,1),ease=1-Math.pow(1-progress,4);el.textContent=Math.floor(ease*target)+(el.dataset.target==='97'?'':'+');if(progress<1)requestAnimationFrame(update);}requestAnimationFrame(update);counterObserver.unobserve(el);}});},{threshold:0.5});\r\ndocument.querySelectorAll('.counter').forEach(el=>counterObserver.observe(el));\r\ndocument.querySelectorAll('.filter-btn').forEach(btn=>{btn.addEventListener('click',()=>{document.querySelectorAll('.filter-btn').forEach(b=>b.classList.remove('active'));btn.classList.add('active');const filter=btn.dataset.filter;document.querySelectorAll('.portfolio-item').forEach(item=>{const match=filter==='all'||item.dataset.cat===filter;item.style.opacity=match?'1':'0.25';item.style.transform=match?'':'scale(0.96)';item.style.transition='opacity 0.4s,transform 0.4s';});});});\r\nwindow.formNext=function(page){[1,2,3].forEach(p=>{document.getElementById('formPage'+p).classList.toggle('active',p===page);const dot=document.getElementById('step'+p+'dot');if(dot)dot.classList.toggle('active',p<=page);});};\r\ndocument.getElementById('quoteForm').addEventListener('submit',e=>{e.preventDefault();const btn=e.submitter;if(btn){btn.innerHTML='<span>Wys\u0142ano! \u2713<\/span>';btn.disabled=true;btn.style.background='linear-gradient(135deg,#059669,#10b981)';}});\r\nif(!isTouchDevice){document.querySelectorAll('.magnetic').forEach(el=>{el.addEventListener('mousemove',e=>{const r=el.getBoundingClientRect(),x=e.clientX-r.left-r.width\/2,y=e.clientY-r.top-r.height\/2;el.style.transform=`translate(${x*0.3}px,${y*0.3}px)`;});el.addEventListener('mouseleave',()=>{el.style.transform='';});});}\r\nfunction initCookieBanner(){if(localStorage.getItem('rv_cookie'))return;setTimeout(()=>{document.getElementById('cookie-banner').classList.add('show');},2500);}\r\ndocument.getElementById('cookieAccept').addEventListener('click',()=>{localStorage.setItem('rv_cookie','1');document.getElementById('cookie-banner').classList.remove('show');});\r\ndocument.getElementById('cookieDecline').addEventListener('click',()=>{document.getElementById('cookie-banner').classList.remove('show');});\r\nif(!isTouchDevice){document.addEventListener('mousemove',e=>{const mx=(e.clientX\/window.innerWidth-0.5),my=(e.clientY\/window.innerHeight-0.5);const heroContent=document.querySelector('.hero-content');if(heroContent){heroContent.style.transform=`translate(${mx*12}px,${my*8}px)`;}},{passive:true});}\r\nif(!isTouchDevice){(function(){var section=document.getElementById('about'),img=document.querySelector('.about-visual-bg-img img');if(!section||!img)return;section.addEventListener('mousemove',function(e){var rect=section.getBoundingClientRect(),cx=rect.left+rect.width\/2,cy=rect.top+rect.height\/2,dx=(e.clientX-cx)\/(rect.width*0.5),dy=(e.clientY-cy)\/(rect.height*0.5);img.style.transform='translate('+(dx*22)+'px,'+(dy*16)+'px) scale(1.08)';},{passive:true});section.addEventListener('mouseleave',function(){img.style.transform='translate(0,0) scale(1.08)';});})();}\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>RareVision \u2014 Premium Digital Agency \u2699 Strona w trakcie aktualizacji Niekt\u00f3re zak\u0142adki mog\u0105 by\u0107 tymczasowo niedost\u0119pne \u2715 RareVision 0% U\u017cywamy plik\u00f3w cookie, aby zapewni\u0107 najlepsze do\u015bwiadczenie na naszej stronie. Akceptuj Odrzu\u0107 \u2715 O nas Us\u0142ugi Portfolio AI & Tech Wycena projektu \u2192 RareVision O nas Us\u0142ugi Portfolio Proces AI & Tech Wycena projektu Agencja Digital […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rarevision.pl\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rarevision.pl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rarevision.pl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rarevision.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rarevision.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":61,"href":"https:\/\/rarevision.pl\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":104,"href":"https:\/\/rarevision.pl\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/104"}],"wp:attachment":[{"href":"https:\/\/rarevision.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}