{"id":10,"date":"2026-02-27T10:24:05","date_gmt":"2026-02-27T09:24:05","guid":{"rendered":"https:\/\/automate.city\/?page_id=10"},"modified":"2026-03-02T07:43:46","modified_gmt":"2026-03-02T06:43:46","slug":"automatecity","status":"publish","type":"page","link":"https:\/\/automate.city\/","title":{"rendered":"AutomateCity"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\n\nAutomateCity \u2014 AI i in\u017cynieria IT po stronie wymaga\u0144 biznesowych<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap\" rel=\"stylesheet\">\n<style>\n\n\/* ============================================\n RESET & ROOT VARIABLES\n ============================================ *\/\n*, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n:root {\n --bg-base: #040812;\n --bg-card: #080f1e;\n --bg-card-hover: #0c1628;\n --bg-border: rgba(255,255,255,0.06);\n --cyan: #00d4ff;\n --cyan-dim: rgba(0,212,255,0.12);\n --cyan-glow: rgba(0,212,255,0.25);\n --violet: #7c3aed;\n --violet-dim: rgba(124,58,237,0.12);\n --violet-light: #a78bfa;\n --text-primary: #f0f4ff;\n --text-secondary: #8899b8;\n --text-muted: #4a5978;\n --font-display: 'Syne', sans-serif;\n --font-body: 'DM Sans', sans-serif;\n --transition: 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);\n --nav-h: 80px;\n}\n\nhtml {\n scroll-behavior: smooth;\n font-size: 16px;\n}\n\nbody {\n font-family: var(--font-body);\n background: var(--bg-base);\n color: var(--text-primary);\n line-height: 1.65;\n -webkit-font-smoothing: antialiased;\n overflow-x: hidden;\n}\n\nimg {\n max-width: 100%;\n display: block;\n}\n\na {\n color: inherit;\n text-decoration: none;\n}\n\n::selection {\n background: var(--cyan-dim);\n color: var(--cyan);\n}\n\n::-webkit-scrollbar {\n width: 4px;\n}\n::-webkit-scrollbar-track { background: var(--bg-base); }\n::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 2px; }\n\n\/* ============================================\n UTILS\n ============================================ *\/\n.container {\n max-width: 1180px;\n margin: 0 auto;\n padding: 0 32px;\n}\n\n.container--narrow {\n max-width: 820px;\n margin: 0 auto;\n padding: 0 32px;\n}\n\n.section {\n padding: 120px 0;\n}\n\n.section--sm {\n padding: 80px 0;\n}\n\n.tag {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-family: var(--font-body);\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--cyan);\n padding: 6px 14px;\n border: 1px solid rgba(0,212,255,0.2);\n border-radius: 100px;\n margin-bottom: 28px;\n}\n\n.tag::before {\n content: '';\n width: 5px;\n height: 5px;\n background: var(--cyan);\n border-radius: 50%;\n box-shadow: 0 0 8px var(--cyan);\n}\n\nh1, h2, h3, h4 {\n font-family: var(--font-display);\n line-height: 1.15;\n font-weight: 700;\n}\n\n.text-gradient {\n background: linear-gradient(135deg, var(--cyan) 0%, var(--violet-light) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n\/* ============================================\n NOISE OVERLAY\n ============================================ *\/\nbody::before {\n content: '';\n position: fixed;\n inset: 0;\n 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)' opacity='0.03'\/%3E%3C\/svg%3E\");\n pointer-events: none;\n z-index: 1000;\n opacity: 0.4;\n}\n\n\/* ============================================\n NAVIGATION\n ============================================ *\/\n.nav {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 950;\n height: var(--nav-h);\n display: flex;\n align-items: center;\n transition: background var(--transition), backdrop-filter var(--transition);\n}\n\n.nav.scrolled {\n background: rgba(4,8,18,0.85);\n backdrop-filter: blur(20px);\n border-bottom: 1px solid var(--bg-border);\n}\n\n.nav__inner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n gap: 48px;\n}\n\n.nav__links {\n flex: 1;\n justify-content: center;\n}\n\n.nav__logo {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.nav__logo img {\n height: 36px;\n width: auto;\n}\n\n.nav__logo-text {\n font-family: var(--font-display);\n font-weight: 700;\n font-size: 18px;\n letter-spacing: -0.02em;\n color: var(--text-primary);\n}\n\n.nav__links {\n display: flex;\n align-items: center;\n gap: 40px;\n list-style: none;\n}\n\n.nav__links a {\n font-size: 13px;\n font-weight: 400;\n color: var(--text-secondary);\n transition: color var(--transition), opacity var(--transition);\n letter-spacing: 0.01em;\n position: relative;\n}\n\n.nav__links a::after {\n content: '';\n position: absolute;\n bottom: -3px;\n left: 0;\n right: 0;\n height: 1px;\n background: var(--cyan);\n transform: scaleX(0);\n transition: transform 0.3s ease;\n transform-origin: left;\n}\n\n.nav__links a:hover {\n color: var(--text-primary);\n}\n\n.nav__links a:hover::after {\n transform: scaleX(1);\n}\n\n.nav__cta {\n padding: 9px 18px;\n font-size: 13px;\n}\n\n.nav__cta {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n font-weight: 500;\n color: var(--bg-base);\n background: var(--cyan);\n padding: 9px 18px;\n border-radius: 6px;\n transition: all var(--transition);\n white-space: nowrap;\n}\n\n.nav__cta:hover {\n background: #33ddff;\n box-shadow: 0 0 24px var(--cyan-glow);\n transform: translateY(-1px);\n}\n\n.nav__burger {\n display: none;\n flex-direction: column;\n gap: 6px;\n cursor: pointer;\n padding: 10px;\n margin-right: -10px;\n z-index: 900;\n position: relative;\n}\n\n.nav__burger span {\n width: 26px;\n height: 1.5px;\n background: var(--text-primary);\n transition: var(--transition);\n border-radius: 2px;\n}\n\n\/* ============================================\n HERO\n ============================================ *\/\n.hero {\n min-height: 100vh;\n display: flex;\n align-items: center;\n position: relative;\n overflow: hidden;\n padding: 120px 0 80px;\n}\n\n.hero__bg {\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n\/* ---- HERO SLIDESHOW ---- *\/\n.hero__slides {\n position: absolute;\n inset: 0;\n z-index: 0;\n}\n.hero__slide {\n position: absolute;\n inset: 0;\n background-size: cover;\n background-position: center;\n opacity: 0;\n transition: opacity 1.8s ease;\n}\n.hero__slide.active { opacity: 1; }\n.hero__slide-overlay {\n position: absolute;\n inset: 0;\n z-index: 1;\n background: linear-gradient(\n 105deg,\n rgba(4,8,18,0.92) 0%,\n rgba(4,8,18,0.78) 55%,\n rgba(4,8,18,0.60) 100%\n );\n}\n\/* Slide indicator dots *\/\n.slide-dots {\n position: absolute;\n bottom: 32px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 20;\n display: flex;\n gap: 8px;\n}\n.slide-dot {\n width: 20px;\n height: 2px;\n background: rgba(255,255,255,0.2);\n border-radius: 2px;\n cursor: pointer;\n transition: all 0.4s ease;\n}\n.slide-dot.active {\n background: var(--cyan);\n width: 36px;\n box-shadow: 0 0 8px var(--cyan);\n}\n\n\/* Ambient glow orbs *\/\n.hero__orb {\n position: absolute;\n border-radius: 50%;\n filter: blur(120px);\n pointer-events: none;\n}\n\n.hero__orb--1 {\n width: 600px;\n height: 600px;\n background: radial-gradient(circle, rgba(0,212,255,0.08) 0%, transparent 70%);\n top: -100px;\n right: -100px;\n animation: orbFloat 12s ease-in-out infinite;\n}\n\n.hero__orb--2 {\n width: 500px;\n height: 500px;\n background: radial-gradient(circle, rgba(124,58,237,0.1) 0%, transparent 70%);\n bottom: -50px;\n left: -50px;\n animation: orbFloat 15s ease-in-out infinite reverse;\n}\n\n.hero__orb--3 {\n width: 300px;\n height: 300px;\n background: radial-gradient(circle, rgba(0,212,255,0.05) 0%, transparent 70%);\n top: 40%;\n left: 40%;\n animation: orbFloat 18s ease-in-out infinite;\n}\n\n@keyframes orbFloat {\n 0%, 100% { transform: translate(0, 0) scale(1); }\n 33% { transform: translate(30px, -20px) scale(1.05); }\n 66% { transform: translate(-20px, 30px) scale(0.95); }\n}\n\n\/* Grid pattern *\/\n.hero__grid {\n position: absolute;\n inset: 0;\n background-image:\n linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);\n background-size: 60px 60px;\n mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);\n}\n\n.hero__content {\n position: relative;\n z-index: 2;\n max-width: 820px;\n}\n\n.hero__eyebrow {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 32px;\n opacity: 0;\n animation: fadeUp 0.8s ease 0.2s forwards;\n}\n\n.hero__eyebrow-line {\n width: 40px;\n height: 1px;\n background: var(--cyan);\n}\n\n.hero__eyebrow-text {\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--cyan);\n}\n\n.hero__h1 {\n font-size: clamp(37px, 5.5vw, 71px);\n font-weight: 800;\n line-height: 1.08;\n letter-spacing: -0.03em;\n margin-bottom: 28px;\n opacity: 0;\n animation: fadeUp 0.8s ease 0.35s forwards;\n}\n\n.hero__subtitle {\n font-size: 13px;\n font-weight: 300;\n color: var(--text-secondary);\n line-height: 1.75;\n max-width: 640px;\n margin-bottom: 48px;\n opacity: 0;\n animation: fadeUp 0.8s ease 0.5s forwards;\n}\n\n.hero__actions {\n display: flex;\n align-items: center;\n gap: 20px;\n flex-wrap: wrap;\n opacity: 0;\n animation: fadeUp 0.8s ease 0.65s forwards;\n}\n\n.btn-primary {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-family: var(--font-body);\n font-size: 15px;\n font-weight: 500;\n color: var(--bg-base);\n background: var(--cyan);\n padding: 14px 30px;\n border-radius: 6px;\n border: none;\n cursor: pointer;\n transition: all var(--transition);\n letter-spacing: -0.01em;\n}\n\n.btn-primary:hover {\n background: #33ddff;\n box-shadow: 0 0 32px rgba(0,212,255,0.35);\n transform: translateY(-2px);\n}\n\n.btn-primary svg {\n transition: transform var(--transition);\n}\n\n.btn-primary:hover svg {\n transform: translateX(4px);\n}\n\n.btn-ghost {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-family: var(--font-body);\n font-size: 15px;\n font-weight: 400;\n color: var(--text-secondary);\n background: transparent;\n padding: 14px 24px;\n border-radius: 6px;\n border: 1px solid var(--bg-border);\n cursor: pointer;\n transition: all var(--transition);\n}\n\n.btn-ghost:hover {\n color: var(--text-primary);\n border-color: rgba(255,255,255,0.15);\n background: rgba(255,255,255,0.03);\n}\n\n.hero__metrics {\n display: flex;\n align-items: center;\n gap: 48px;\n margin-top: 72px;\n padding-top: 48px;\n border-top: 1px solid var(--bg-border);\n opacity: 0;\n animation: fadeUp 0.8s ease 0.8s forwards;\n}\n\n.hero__metric-value {\n font-family: var(--font-display);\n font-size: 36px;\n font-weight: 800;\n letter-spacing: -0.04em;\n line-height: 1;\n}\n\n.hero__metric-label {\n font-size: 13px;\n color: var(--text-secondary);\n margin-top: 4px;\n font-weight: 300;\n}\n\n.hero__metric-divider {\n width: 1px;\n height: 40px;\n background: var(--bg-border);\n}\n\n\/* Video section inside hero *\/\n.hero__visual {\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n width: 45%;\n overflow: hidden;\n z-index: 1;\n}\n\n.hero__visual::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(90deg, var(--bg-base) 0%, rgba(4,8,18,0.4) 40%, rgba(4,8,18,0.6) 100%);\n z-index: 2;\n}\n\n.hero__visual-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.5;\n}\n\n@keyframes fadeUp {\n from { opacity: 0; transform: translateY(24px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n\/* ============================================\n MARQUEE \/ BRANDS\n ============================================ *\/\n.marquee-section {\n padding: 36px 0;\n background: #f0f3f9;\n border-top: 1px solid rgba(0,0,0,0.07);\n border-bottom: 1px solid rgba(0,0,0,0.07);\n overflow: hidden;\n position: relative;\n}\n\n\/* Edge fade masks *\/\n.marquee-section::before,\n.marquee-section::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n width: 140px;\n z-index: 2;\n pointer-events: none;\n}\n.marquee-section::before {\n left: 0;\n background: linear-gradient(90deg, #f0f3f9 0%, transparent 100%);\n}\n.marquee-section::after {\n right: 0;\n background: linear-gradient(270deg, #f0f3f9 0%, transparent 100%);\n}\n\n.marquee-label {\n font-size: 10px;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: #8a9ab8;\n text-align: center;\n margin-bottom: 20px;\n}\n\n.marquee-track {\n display: flex;\n gap: 64px;\n animation: marquee 30s linear infinite;\n width: max-content;\n}\n\n.marquee-track:hover {\n animation-play-state: paused;\n}\n\n.marquee-item {\n font-family: var(--font-display);\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: #3a4a6b;\n white-space: nowrap;\n display: flex;\n align-items: center;\n gap: 16px;\n transition: color 0.25s;\n}\n\n.marquee-item:hover {\n color: var(--violet);\n}\n\n.marquee-item::after {\n content: '\u00b7';\n color: var(--violet);\n font-size: 20px;\n}\n\n@keyframes marquee {\n from { transform: translateX(0); }\n to { transform: translateX(-50%); }\n}\n\n\/* ============================================\n FOR WHOM (BRANCHES)\n ============================================ *\/\n.branches {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 1px;\n background: var(--bg-border);\n border: 1px solid var(--bg-border);\n border-radius: 12px;\n overflow: hidden;\n margin-top: 64px;\n}\n\n.branch-card {\n background: var(--bg-card);\n padding: 40px 36px;\n position: relative;\n transition: background var(--transition);\n cursor: default;\n}\n\n.branch-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: linear-gradient(90deg, var(--cyan), var(--violet));\n opacity: 0;\n transition: opacity var(--transition);\n}\n\n.branch-card:hover {\n background: var(--bg-card-hover);\n}\n\n.branch-card:hover::before {\n opacity: 1;\n}\n\n.branch-icon {\n width: 44px;\n height: 44px;\n border-radius: 10px;\n background: var(--cyan-dim);\n border: 1px solid rgba(0,212,255,0.15);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 20px;\n}\n\n.branch-icon svg {\n width: 20px;\n height: 20px;\n stroke: var(--cyan);\n}\n\n.branch-name {\n font-family: var(--font-display);\n font-size: 17px;\n font-weight: 600;\n margin-bottom: 12px;\n color: var(--text-primary);\n}\n\n.branch-desc {\n font-size: 14px;\n color: var(--text-secondary);\n line-height: 1.65;\n font-weight: 300;\n}\n\n\/* ============================================\n PILLARS \/ COMPETENCIES\n ============================================ *\/\n.pillars-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 24px;\n margin-top: 64px;\n}\n\n.pillar-card {\n background: var(--bg-card);\n border: 1px solid var(--bg-border);\n border-radius: 12px;\n padding: 48px 44px;\n position: relative;\n overflow: hidden;\n transition: border-color var(--transition), box-shadow var(--transition);\n cursor: default;\n transform-style: preserve-3d;\n will-change: transform;\n}\n\n\/* Shine layer for tilt *\/\n.pillar-card-shine {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n z-index: 0;\n opacity: 0;\n transition: opacity 0.3s;\n background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 0%, transparent 65%);\n}\n.pillar-card:hover .pillar-card-shine { opacity: 1; }\n\n\/* Robot \/ AI scan canvas *\/\n#robot-canvas {\n position: fixed;\n inset: 0;\n pointer-events: none;\n z-index: 9999;\n opacity: 0.75;\n}\n\n.pillar-card::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 1px;\n background: linear-gradient(90deg, transparent, var(--cyan), transparent);\n opacity: 0;\n transition: opacity var(--transition);\n}\n\n.pillar-card:hover {\n border-color: rgba(0,212,255,0.15);\n background: var(--bg-card-hover);\n transform: translateY(-3px);\n box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 40px rgba(0,212,255,0.04);\n}\n\n.pillar-card:hover::after {\n opacity: 1;\n}\n\n.pillar-number {\n font-family: var(--font-display);\n font-size: 72px;\n font-weight: 800;\n line-height: 1;\n color: rgba(255,255,255,0.03);\n position: absolute;\n top: 24px;\n right: 32px;\n letter-spacing: -0.05em;\n user-select: none;\n}\n\n.pillar-tag {\n display: inline-flex;\n align-items: center;\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--violet-light);\n background: var(--violet-dim);\n border: 1px solid rgba(124,58,237,0.2);\n padding: 5px 12px;\n border-radius: 100px;\n margin-bottom: 24px;\n}\n\n.pillar-title {\n font-family: var(--font-display);\n font-size: 26px;\n font-weight: 700;\n letter-spacing: -0.02em;\n margin-bottom: 16px;\n color: var(--text-primary);\n}\n\n.pillar-desc {\n font-size: 15px;\n color: var(--text-secondary);\n line-height: 1.75;\n font-weight: 300;\n}\n\n.pillar-link {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 500;\n color: var(--cyan);\n margin-top: 28px;\n transition: gap var(--transition);\n}\n\n.pillar-link:hover {\n gap: 12px;\n}\n\n\/* ============================================\n CASE STUDIES\n ============================================ *\/\n.cases-grid {\n display: grid;\n gap: 2px;\n background: var(--bg-border);\n border: 1px solid var(--bg-border);\n border-radius: 12px;\n overflow: hidden;\n margin-top: 64px;\n}\n\n.case-item {\n background: var(--bg-card);\n padding: 48px 52px;\n display: grid;\n grid-template-columns: 160px 1fr 280px;\n gap: 48px;\n align-items: start;\n transition: background var(--transition);\n position: relative;\n}\n\n.case-item::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 2px;\n background: linear-gradient(180deg, var(--cyan), var(--violet));\n opacity: 0;\n transition: opacity var(--transition);\n}\n\n.case-item:hover {\n background: var(--bg-card-hover);\n}\n\n.case-item:hover::before {\n opacity: 1;\n}\n\n.case-meta-branch {\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--cyan);\n margin-bottom: 8px;\n}\n\n.case-meta-num {\n font-family: var(--font-display);\n font-size: 52px;\n font-weight: 800;\n line-height: 1;\n letter-spacing: -0.04em;\n background: linear-gradient(135deg, var(--cyan) 0%, var(--violet-light) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n.case-meta-unit {\n font-size: 13px;\n color: var(--text-secondary);\n margin-top: 4px;\n}\n\n.case-title {\n font-family: var(--font-display);\n font-size: 22px;\n font-weight: 700;\n letter-spacing: -0.02em;\n margin-bottom: 12px;\n}\n\n.case-desc {\n font-size: 14px;\n color: var(--text-secondary);\n line-height: 1.75;\n font-weight: 300;\n}\n\n.case-result {\n background: rgba(0,212,255,0.04);\n border: 1px solid rgba(0,212,255,0.1);\n border-radius: 8px;\n padding: 20px 24px;\n}\n\n.case-result-label {\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--text-muted);\n margin-bottom: 8px;\n}\n\n.case-result-text {\n font-size: 14px;\n color: var(--text-secondary);\n line-height: 1.6;\n font-weight: 300;\n}\n\n\/* ============================================\n PROCESS \/ COOPERATION\n ============================================ *\/\n.process-steps {\n margin-top: 64px;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 2px;\n background: var(--bg-border);\n border: 1px solid var(--bg-border);\n border-radius: 12px;\n overflow: hidden;\n}\n\n.process-step {\n background: var(--bg-card);\n padding: 44px 36px;\n position: relative;\n transition: background var(--transition);\n}\n\n.process-step:hover {\n background: var(--bg-card-hover);\n}\n\n.process-step__num {\n font-family: var(--font-display);\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.1em;\n color: var(--text-muted);\n margin-bottom: 20px;\n}\n\n.process-step__title {\n font-family: var(--font-display);\n font-size: 19px;\n font-weight: 700;\n margin-bottom: 14px;\n color: var(--text-primary);\n}\n\n.process-step__desc {\n font-size: 14px;\n color: var(--text-secondary);\n line-height: 1.7;\n font-weight: 300;\n}\n\n.process-step__icon {\n width: 40px;\n height: 40px;\n background: var(--violet-dim);\n border: 1px solid rgba(124,58,237,0.15);\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 20px;\n}\n\n.process-step__icon svg {\n width: 18px;\n height: 18px;\n stroke: var(--violet-light);\n}\n\n\/* ============================================\n IMAGE \/ PHOTO SECTIONS\n ============================================ *\/\n\/* ---- Photo + Text split section ---- *\/\n.photo-text-split {\n display: grid;\n grid-template-columns: 1fr 1fr;\n min-height: 520px;\n overflow: hidden;\n border: 1px solid var(--bg-border);\n border-radius: 14px;\n margin-top: 64px;\n}\n.photo-text-split--reverse .pts-photo { order: 2; }\n.photo-text-split--reverse .pts-text { order: 1; }\n\n.pts-photo {\n position: relative;\n overflow: hidden;\n}\n.pts-photo img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.6;\n transition: transform 0.9s ease, opacity 0.5s ease;\n transform: scale(1.04);\n}\n.photo-text-split:hover .pts-photo img {\n transform: scale(1.0);\n opacity: 0.75;\n}\n.pts-photo-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(90deg, transparent 50%, rgba(8,15,30,0.92) 100%);\n}\n.photo-text-split--reverse .pts-photo-overlay {\n background: linear-gradient(270deg, transparent 50%, rgba(8,15,30,0.92) 100%);\n}\n\n.pts-text {\n background: var(--bg-card);\n padding: 72px 60px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n.pts-text h2 {\n font-size: clamp(24px, 2.8vw, 36px);\n letter-spacing: -0.03em;\n margin-bottom: 20px;\n line-height: 1.15;\n}\n.pts-text p {\n font-size: 15px;\n color: var(--text-secondary);\n line-height: 1.8;\n font-weight: 300;\n margin-bottom: 14px;\n}\n.pts-stats {\n display: flex;\n gap: 28px;\n margin-top: 32px;\n padding-top: 28px;\n border-top: 1px solid var(--bg-border);\n flex-wrap: wrap;\n}\n.pts-stat-val {\n font-family: var(--font-display);\n font-size: 34px;\n font-weight: 800;\n letter-spacing: -0.04em;\n line-height: 1;\n}\n.pts-stat-label {\n font-size: 11px;\n color: var(--text-muted);\n margin-top: 4px;\n}\n\n@media (max-width: 860px) {\n .photo-text-split { grid-template-columns: 1fr; }\n .pts-photo { height: 280px; }\n .photo-text-split--reverse .pts-photo { order: 0; }\n .photo-text-split--reverse .pts-text { order: 0; }\n .pts-text { padding: 48px 32px; }\n}\n\n.photo-section {\n position: relative;\n height: 480px;\n overflow: hidden;\n}\n\n.photo-section__img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.35;\n}\n\n.photo-section__overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(\n 180deg,\n var(--bg-base) 0%,\n transparent 25%,\n transparent 75%,\n var(--bg-base) 100%\n );\n}\n\n.photo-section__content {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n flex-direction: column;\n padding: 0 32px;\n}\n\n.photo-section__stat {\n font-family: var(--font-display);\n font-size: 80px;\n font-weight: 800;\n letter-spacing: -0.05em;\n line-height: 1;\n}\n\n.photo-section__stat-text {\n font-size: 18px;\n color: var(--text-secondary);\n margin-top: 8px;\n font-weight: 300;\n}\n\n\/* ============================================\n ABOUT TEASER\n ============================================ *\/\n.about-split {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 80px;\n align-items: center;\n}\n\n.about-visual {\n position: relative;\n border-radius: 12px;\n overflow: hidden;\n aspect-ratio: 4\/3;\n}\n\n.about-visual img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.55;\n}\n\n.about-visual::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, rgba(0,212,255,0.08) 0%, rgba(124,58,237,0.08) 100%);\n border-radius: 12px;\n border: 1px solid var(--bg-border);\n}\n\n.about-glow {\n position: absolute;\n bottom: -40px;\n left: -40px;\n width: 200px;\n height: 200px;\n background: radial-gradient(circle, rgba(0,212,255,0.15) 0%, transparent 70%);\n filter: blur(40px);\n pointer-events: none;\n}\n\n.about-text .tag { margin-bottom: 20px; }\n\n.about-text h2 {\n font-size: clamp(28px, 4vw, 40px);\n letter-spacing: -0.03em;\n margin-bottom: 24px;\n}\n\n.about-text p {\n font-size: 16px;\n color: var(--text-secondary);\n line-height: 1.8;\n font-weight: 300;\n margin-bottom: 16px;\n}\n\n.about-principles {\n margin-top: 36px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.about-principle {\n display: flex;\n align-items: flex-start;\n gap: 14px;\n padding: 16px 20px;\n background: var(--bg-card);\n border: 1px solid var(--bg-border);\n border-radius: 8px;\n transition: border-color var(--transition);\n}\n\n.about-principle:hover {\n border-color: rgba(0,212,255,0.15);\n}\n\n.about-principle-dot {\n width: 6px;\n height: 6px;\n min-width: 6px;\n background: var(--cyan);\n border-radius: 50%;\n margin-top: 7px;\n box-shadow: 0 0 8px var(--cyan);\n}\n\n.about-principle-text {\n font-size: 14px;\n color: var(--text-secondary);\n font-weight: 400;\n}\n\n.about-principle-text strong {\n color: var(--text-primary);\n font-weight: 500;\n}\n\n\/* ============================================\n CTA SECTION\n ============================================ *\/\n.cta-section {\n padding: 120px 0;\n text-align: center;\n position: relative;\n overflow: hidden;\n}\n\n.cta-section::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 700px;\n height: 400px;\n background: radial-gradient(ellipse, rgba(0,212,255,0.06) 0%, transparent 70%);\n filter: blur(60px);\n pointer-events: none;\n}\n\n.cta-section::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 500px;\n height: 300px;\n background: radial-gradient(ellipse, rgba(124,58,237,0.07) 0%, transparent 70%);\n filter: blur(60px);\n pointer-events: none;\n}\n\n.cta-inner {\n position: relative;\n z-index: 2;\n max-width: 700px;\n margin: 0 auto;\n}\n\n.cta-inner h2 {\n font-size: clamp(32px, 5vw, 52px);\n letter-spacing: -0.03em;\n margin-bottom: 20px;\n}\n\n.cta-inner p {\n font-size: 17px;\n color: var(--text-secondary);\n font-weight: 300;\n line-height: 1.75;\n margin-bottom: 44px;\n}\n\n.cta-note {\n font-size: 13px;\n color: var(--text-muted);\n margin-top: 16px;\n}\n\n\/* ============================================\n FOOTER\n ============================================ *\/\n\/* ============================================\n CONTACT FORM SECTION\n ============================================ *\/\n.contact-form-section {\n padding: 0 0 100px;\n}\n\n.contact-grid {\n display: grid;\n grid-template-columns: 380px 1fr;\n gap: 64px;\n align-items: start;\n}\n\n.contact-info {}\n\n.contact-email {\n color: var(--cyan);\n font-weight: 500;\n transition: color var(--transition);\n}\n.contact-email:hover { color: #33ddff; }\n\n.contact-details {\n margin-top: 40px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n.contact-detail-item {\n display: flex;\n align-items: center;\n gap: 14px;\n font-size: 14px;\n color: var(--text-secondary);\n}\n.contact-detail-icon {\n width: 36px;\n height: 36px;\n min-width: 36px;\n background: var(--cyan-dim);\n border: 1px solid rgba(0,212,255,0.15);\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.contact-detail-icon svg { stroke: var(--cyan); }\n\n\/* Form *\/\n.contact-form {\n background: var(--bg-card);\n border: 1px solid var(--bg-border);\n border-radius: 14px;\n padding: 48px 44px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.form-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n}\n\n.form-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.form-label {\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n color: var(--text-muted);\n}\n\n.form-input {\n font-family: var(--font-body);\n font-size: 14px;\n font-weight: 400;\n color: var(--text-primary);\n background: rgba(255,255,255,0.03);\n border: 1px solid var(--bg-border);\n border-radius: 8px;\n padding: 12px 16px;\n outline: none;\n transition: border-color 0.25s, background 0.25s;\n appearance: none;\n -webkit-appearance: none;\n}\n.form-input::placeholder { color: var(--text-muted); }\n.form-input:focus {\n border-color: rgba(0,212,255,0.35);\n background: rgba(0,212,255,0.03);\n}\n\n.form-select {\n cursor: pointer;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a5978' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 14px center;\n padding-right: 40px;\n}\n.form-select option { background: #0c1628; color: var(--text-primary); }\n\n.form-textarea {\n resize: vertical;\n min-height: 130px;\n line-height: 1.65;\n}\n\n.form-submit {\n align-self: flex-start;\n margin-top: 4px;\n font-size: 15px;\n padding: 14px 32px;\n}\n\n.form-note {\n font-size: 12px;\n color: var(--text-muted);\n line-height: 1.6;\n margin-top: -8px;\n}\n\n@media (max-width: 900px) {\n .contact-grid { grid-template-columns: 1fr; gap: 48px; }\n .contact-form { padding: 36px 28px; }\n .form-row { grid-template-columns: 1fr; }\n}\n\n\/* ============================================\n FOOTER\n ============================================ *\/\n.footer {\n border-top: 1px solid var(--bg-border);\n padding: 48px 0;\n}\n\n.footer__inner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 24px;\n flex-wrap: wrap;\n}\n\n.footer__brand {\n font-family: var(--font-display);\n font-weight: 700;\n font-size: 16px;\n letter-spacing: -0.01em;\n}\n\n.footer__tagline {\n font-size: 13px;\n color: var(--text-muted);\n margin-top: 4px;\n}\n\n.footer__links {\n display: flex;\n gap: 32px;\n list-style: none;\n}\n\n.footer__links a {\n font-size: 13px;\n color: var(--text-muted);\n transition: color var(--transition);\n}\n\n.footer__links a:hover {\n color: var(--text-secondary);\n}\n\n.footer__copy {\n font-size: 12px;\n color: var(--text-muted);\n}\n\n\/* ============================================\n SECTION TITLES\n ============================================ *\/\n.section-title {\n font-size: clamp(30px, 4.5vw, 48px);\n letter-spacing: -0.03em;\n margin-bottom: 16px;\n line-height: 1.1;\n}\n\n.section-subtitle {\n font-size: 17px;\n color: var(--text-secondary);\n font-weight: 300;\n line-height: 1.75;\n max-width: 640px;\n}\n\n\/* ============================================\n SCROLL REVEAL ANIMATIONS\n ============================================ *\/\n.reveal {\n opacity: 0;\n transform: translateY(28px);\n transition: opacity 0.7s ease, transform 0.7s ease;\n}\n\n.reveal.visible {\n opacity: 1;\n transform: translateY(0);\n}\n\n.reveal-delay-1 { transition-delay: 0.1s; }\n.reveal-delay-2 { transition-delay: 0.2s; }\n.reveal-delay-3 { transition-delay: 0.3s; }\n.reveal-delay-4 { transition-delay: 0.4s; }\n\n\/* ============================================\n MOBILE NAV\n ============================================ *\/\n.mobile-nav {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(4,8,18,0.98);\n backdrop-filter: blur(24px);\n z-index: 849;\n padding: calc(var(--nav-h) + 32px) 40px 48px;\n flex-direction: column;\n justify-content: center;\n gap: 0;\n overflow-y: auto;\n}\n\n.mobile-nav.open {\n display: flex;\n}\n\n.mobile-nav a {\n font-family: var(--font-display);\n font-size: 28px;\n font-weight: 600;\n letter-spacing: -0.02em;\n color: rgba(255,255,255,0.4);\n padding: 18px 0;\n border-bottom: 1px solid rgba(255,255,255,0.05);\n transition: color 0.25s, padding-left 0.25s;\n display: block;\n}\n\n.mobile-nav a:hover {\n color: var(--text-primary);\n padding-left: 8px;\n}\n\n.mobile-nav a:last-child { border-bottom: none; }\n\n.mobile-nav .btn-primary {\n margin-top: 36px;\n justify-content: center;\n font-size: 16px;\n padding: 16px 32px;\n align-self: flex-start;\n}\n\n\/* ============================================\n KANCA.OS PRODUCT CARD\n ============================================ *\/\n.product-spotlight {\n background: linear-gradient(135deg, rgba(0,212,255,0.05) 0%, rgba(124,58,237,0.05) 100%);\n border: 1px solid rgba(0,212,255,0.12);\n border-radius: 16px;\n padding: 64px;\n margin-top: 64px;\n position: relative;\n overflow: hidden;\n}\n\n.product-spotlight::before {\n content: '';\n position: absolute;\n top: -80px;\n right: -80px;\n width: 300px;\n height: 300px;\n background: radial-gradient(circle, rgba(124,58,237,0.12) 0%, transparent 70%);\n filter: blur(60px);\n}\n\n.product-spotlight-inner {\n display: grid;\n grid-template-columns: 1fr 360px;\n gap: 64px;\n align-items: center;\n position: relative;\n z-index: 2;\n}\n\n.product-tag {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--violet-light);\n background: var(--violet-dim);\n border: 1px solid rgba(124,58,237,0.2);\n padding: 6px 14px;\n border-radius: 100px;\n margin-bottom: 24px;\n}\n\n.product-name {\n font-family: var(--font-display);\n font-size: 40px;\n font-weight: 800;\n letter-spacing: -0.04em;\n margin-bottom: 16px;\n}\n\n.product-desc {\n font-size: 16px;\n color: var(--text-secondary);\n line-height: 1.8;\n font-weight: 300;\n margin-bottom: 32px;\n}\n\n.product-stats {\n display: flex;\n gap: 32px;\n}\n\n.product-stat-val {\n font-family: var(--font-display);\n font-size: 32px;\n font-weight: 800;\n letter-spacing: -0.04em;\n color: var(--cyan);\n}\n\n.product-stat-label {\n font-size: 12px;\n color: var(--text-muted);\n margin-top: 2px;\n}\n\n.product-benefits {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.product-benefit {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 16px 18px;\n background: rgba(255,255,255,0.03);\n border: 1px solid var(--bg-border);\n border-radius: 8px;\n}\n\n.product-benefit-icon {\n width: 28px;\n height: 28px;\n min-width: 28px;\n background: var(--cyan-dim);\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.product-benefit-icon svg {\n width: 14px;\n height: 14px;\n stroke: var(--cyan);\n}\n\n.product-benefit-text {\n font-size: 14px;\n color: var(--text-secondary);\n line-height: 1.55;\n}\n\n\/* ============================================\n RESPONSIVE\n ============================================ *\/\n@media (max-width: 1280px) {\n .nav__inner {\n gap: 32px;\n }\n .nav__links {\n gap: 24px;\n }\n}\n\n@media (max-width: 1024px) {\n .nav__inner {\n gap: 24px;\n }\n .nav__links {\n gap: 18px;\n }\n .nav__links a {\n font-size: 12px;\n }\n .nav__cta {\n padding: 8px 14px;\n font-size: 12px;\n }\n}\n\n@media (max-width: 1024px) {\n .case-item {\n grid-template-columns: 120px 1fr;\n gap: 32px;\n }\n .case-result {\n grid-column: 1 \/ -1;\n }\n .product-spotlight-inner {\n grid-template-columns: 1fr;\n gap: 40px;\n }\n .branches {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n@media (max-width: 900px) {\n .nav__links { display: none; }\n .nav__cta { display: none; }\n .nav__burger { display: flex; }\n \n .hero {\n padding: 100px 0 60px;\n }\n .hero__visual { display: none; }\n \n .pillars-grid {\n grid-template-columns: 1fr;\n }\n \n .about-split {\n grid-template-columns: 1fr;\n gap: 48px;\n }\n \n .process-steps {\n grid-template-columns: repeat(2, 1fr);\n }\n \n .hero__metrics {\n gap: 28px;\n }\n \n .case-item {\n grid-template-columns: 1fr;\n gap: 24px;\n padding: 36px 32px;\n }\n \n .case-meta-num { font-size: 40px; }\n}\n\n@media (max-width: 640px) {\n .container { padding: 0 20px; }\n .container--narrow { padding: 0 20px; }\n .section { padding: 80px 0; }\n\n .mobile-nav {\n padding: calc(var(--nav-h) + 20px) 28px 40px;\n }\n .mobile-nav a {\n font-size: 22px;\n padding: 15px 0;\n }\n .mobile-nav .btn-primary {\n margin-top: 28px;\n width: 100%;\n align-self: stretch;\n }\n \n .branches {\n grid-template-columns: 1fr;\n }\n \n .process-steps {\n grid-template-columns: 1fr;\n }\n \n .hero__metrics {\n flex-wrap: wrap;\n gap: 24px;\n }\n .hero__metric-divider { display: none; }\n \n .footer__inner {\n flex-direction: column;\n align-items: flex-start;\n gap: 24px;\n }\n \n .footer__links {\n flex-wrap: wrap;\n gap: 16px;\n }\n \n .pillar-card {\n padding: 32px 28px;\n }\n \n .product-spotlight {\n padding: 36px 28px;\n }\n \n .product-stats {\n gap: 24px;\n }\n}\n\n\n\/* ============================================\n FOUNDERS \/ TEAM SECTION\n ============================================ *\/\n.founders-section {\n padding: 0 0 120px;\n}\n\n.founders-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 24px;\n margin-top: 56px;\n}\n\n.founder-card {\n background: var(--bg-card);\n border: 1px solid var(--bg-border);\n border-radius: 14px;\n overflow: hidden;\n display: grid;\n grid-template-columns: 220px 1fr;\n transition: border-color 0.35s, box-shadow 0.35s;\n}\n\n.founder-card:hover {\n border-color: rgba(0,212,255,0.15);\n box-shadow: 0 24px 60px rgba(0,0,0,0.3);\n}\n\n.founder-photo {\n position: relative;\n overflow: hidden;\n}\n\n.founder-photo img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: top center;\n filter: grayscale(20%);\n transition: filter 0.5s ease, transform 0.7s ease;\n}\n\n.founder-card:hover .founder-photo img {\n filter: grayscale(0%);\n transform: scale(1.03);\n}\n\n.founder-photo-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(90deg, transparent 60%, var(--bg-card) 100%);\n}\n\n.founder-info {\n padding: 40px 36px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n.founder-name {\n font-family: var(--font-display);\n font-size: 22px;\n font-weight: 700;\n letter-spacing: -0.02em;\n margin-bottom: 4px;\n}\n\n.founder-role {\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--cyan);\n margin-bottom: 18px;\n}\n\n.founder-bio {\n font-size: 14px;\n color: var(--text-secondary);\n line-height: 1.75;\n font-weight: 300;\n}\n\n.founder-links {\n display: flex;\n gap: 12px;\n margin-top: 20px;\n}\n\n.founder-link {\n width: 34px;\n height: 34px;\n border: 1px solid var(--bg-border);\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--text-muted);\n transition: all 0.3s;\n}\n\n.founder-link:hover {\n border-color: rgba(0,212,255,0.3);\n color: var(--cyan);\n background: var(--cyan-dim);\n}\n\n\/* ============================================\n WHITE BREATHER \u2014 horizontal accent line\n ============================================ *\/\n.white-breather {\n padding: 0;\n overflow: hidden;\n position: relative;\n}\n\n.white-breather-line {\n height: 1px;\n background: linear-gradient(\n 90deg,\n transparent 0%,\n rgba(255,255,255,0.08) 20%,\n rgba(255,255,255,0.25) 50%,\n rgba(255,255,255,0.08) 80%,\n transparent 100%\n );\n margin: 0 auto;\n}\n\n\/* White stat callout block *\/\n.white-callout {\n background: rgba(255,255,255,0.03);\n border: 1px solid rgba(255,255,255,0.07);\n border-radius: 14px;\n padding: 48px 56px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 32px;\n margin: 64px 0 0;\n position: relative;\n overflow: hidden;\n}\n\n.white-callout::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, rgba(255,255,255,0.015) 0%, transparent 60%);\n pointer-events: none;\n}\n\n.white-callout-stat {\n text-align: center;\n flex: 1;\n}\n\n.white-callout-stat + .white-callout-stat {\n border-left: 1px solid rgba(255,255,255,0.06);\n}\n\n.white-callout-val {\n font-family: var(--font-display);\n font-size: 44px;\n font-weight: 800;\n letter-spacing: -0.04em;\n color: rgba(255,255,255,0.92);\n line-height: 1;\n}\n\n.white-callout-label {\n font-size: 13px;\n color: rgba(255,255,255,0.35);\n margin-top: 6px;\n font-weight: 300;\n}\n\n@media (max-width: 900px) {\n .founders-grid { grid-template-columns: 1fr; }\n .founder-card { grid-template-columns: 1fr; }\n .founder-photo { height: 260px; }\n .founder-photo-overlay {\n background: linear-gradient(180deg, transparent 60%, var(--bg-card) 100%);\n }\n .founder-info { padding: 28px 28px 36px; }\n .white-callout { flex-direction: column; padding: 36px 28px; }\n .white-callout-stat + .white-callout-stat { border-left: none; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 24px; width: 100%; }\n}\n\n\n\/* ============================================\n LIGHT SECTION BREAK \u2014 white bg strip\n ============================================ *\/\n.section-light {\n background: rgba(255,255,255,0.028);\n border-top: 1px solid rgba(255,255,255,0.055);\n border-bottom: 1px solid rgba(255,255,255,0.055);\n position: relative;\n}\n\n.section-light::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, rgba(255,255,255,0.01) 0%, transparent 50%, rgba(0,212,255,0.01) 100%);\n pointer-events: none;\n}\n\n\/* Real white break \u2014 used for ONE key section *\/\n.section-white {\n background: #f4f6fa;\n position: relative;\n color: #0a0f1e;\n}\n.section-white .tag {\n color: var(--violet);\n border-color: rgba(124,58,237,0.25);\n background: rgba(124,58,237,0.06);\n}\n.section-white .tag::before {\n background: var(--violet);\n box-shadow: 0 0 8px var(--violet);\n}\n.section-white .section-title,\n.section-white h2 {\n color: #060c1c;\n}\n.section-white .section-subtitle,\n.section-white p {\n color: #3a4a6b;\n}\n.section-white .process-step {\n background: #fff;\n border: 1px solid rgba(0,0,0,0.07);\n box-shadow: 0 2px 12px rgba(0,0,0,0.06);\n}\n.section-white .process-step:hover {\n background: #fff;\n box-shadow: 0 8px 32px rgba(0,0,0,0.1);\n}\n.section-white .process-step__num { color: #b0bacf; }\n.section-white .process-step__title { color: #060c1c; }\n.section-white .process-step__desc { color: #3a4a6b; }\n.section-white .process-step__icon {\n background: rgba(124,58,237,0.08);\n border-color: rgba(124,58,237,0.15);\n}\n.section-white .process-step__icon svg { stroke: var(--violet); }\n.section-white .process-step:hover .process-step__num { color: var(--violet); }\n.section-white .process-step:hover .process-step__icon {\n background: rgba(124,58,237,0.14);\n border-color: rgba(124,58,237,0.25);\n}\n\n\/* Animated count-up numbers *\/\n.count-up {\n display: inline-block;\n}\n\n\/* Staggered card animation *\/\n@keyframes slideInUp {\n from { opacity: 0; transform: translateY(36px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.stagger-1 { animation-delay: 0.05s; }\n.stagger-2 { animation-delay: 0.12s; }\n.stagger-3 { animation-delay: 0.19s; }\n.stagger-4 { animation-delay: 0.26s; }\n\n\/* Hover glow on branch cards *\/\n.branch-card::after {\n content: '';\n position: absolute;\n inset: 0;\n background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(0,212,255,0.04) 0%, transparent 65%);\n opacity: 0;\n transition: opacity 0.4s;\n pointer-events: none;\n}\n.branch-card:hover::after {\n opacity: 1;\n}\n\n\/* Case item hover lift *\/\n.case-item {\n transition: background var(--transition), transform 0.3s ease;\n}\n.case-item:hover {\n transform: translateX(4px);\n}\n\n\/* Founder card shimmer on hover *\/\n.founder-card::after {\n content: '';\n position: absolute;\n top: 0; left: -100%;\n width: 60%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.02), transparent);\n transition: left 0.7s ease;\n pointer-events: none;\n}\n.founder-card {\n position: relative;\n overflow: hidden;\n}\n.founder-card:hover::after {\n left: 150%;\n}\n\n\/* Process step number counter glow *\/\n.process-step__num {\n transition: color 0.3s;\n}\n.process-step:hover .process-step__num {\n color: var(--cyan);\n}\n.process-step:hover .process-step__icon {\n background: rgba(124,58,237,0.2);\n border-color: rgba(124,58,237,0.3);\n}\n\n\n\/* ============================================\n METRICS \/ AUTOMATION STATS\n ============================================ *\/\n.metrics-section {\n padding-bottom: 80px;\n}\n\n.metrics-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n margin-top: 56px;\n}\n\n.metric-card {\n background: var(--bg-card);\n border: 1px solid var(--bg-border);\n border-radius: 12px;\n padding: 32px 36px;\n transition: border-color 0.3s, box-shadow 0.3s;\n}\n\n.metric-card:hover {\n border-color: rgba(0,212,255,0.15);\n box-shadow: 0 8px 32px rgba(0,0,0,0.25);\n}\n\n.metric-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 16px;\n margin-bottom: 20px;\n}\n\n.metric-label {\n font-size: 13px;\n color: var(--text-secondary);\n font-weight: 400;\n line-height: 1.5;\n flex: 1;\n}\n\n.metric-percent {\n font-family: var(--font-display);\n font-size: 36px;\n font-weight: 800;\n letter-spacing: -0.04em;\n line-height: 1;\n color: var(--cyan);\n white-space: nowrap;\n min-width: 72px;\n text-align: right;\n}\n\n.metric-bar-track {\n height: 3px;\n background: rgba(255,255,255,0.05);\n border-radius: 2px;\n overflow: hidden;\n margin-bottom: 14px;\n}\n\n.metric-bar {\n height: 100%;\n width: 0%;\n background: var(--bar-color, var(--cyan));\n border-radius: 2px;\n transition: width 1.4s cubic-bezier(0.25, 1, 0.5, 1);\n box-shadow: 0 0 8px var(--bar-color, var(--cyan-glow));\n}\n\n.metric-detail {\n font-size: 12px;\n color: var(--text-muted);\n line-height: 1.55;\n}\n\n\/* Callout strip *\/\n.metrics-callout {\n margin-top: 24px;\n border: 1px solid rgba(0,212,255,0.12);\n border-radius: 12px;\n background: linear-gradient(135deg, rgba(0,212,255,0.04) 0%, rgba(124,58,237,0.04) 100%);\n padding: 36px 48px;\n}\n\n.metrics-callout-inner {\n display: flex;\n align-items: center;\n gap: 48px;\n}\n\n.metrics-callout-number {\n display: flex;\n align-items: baseline;\n gap: 6px;\n flex-shrink: 0;\n}\n\n.metrics-big {\n font-family: var(--font-display);\n font-size: 72px;\n font-weight: 800;\n letter-spacing: -0.05em;\n line-height: 1;\n background: linear-gradient(135deg, var(--cyan), var(--violet-light));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n.metrics-big-unit {\n font-family: var(--font-display);\n font-size: 28px;\n font-weight: 600;\n color: var(--text-muted);\n}\n\n.metrics-callout-divider {\n width: 1px;\n height: 60px;\n background: var(--bg-border);\n flex-shrink: 0;\n}\n\n.metrics-callout-text {\n font-size: 15px;\n color: var(--text-secondary);\n line-height: 1.75;\n font-weight: 300;\n}\n\n.metrics-callout-text strong {\n color: var(--text-primary);\n font-weight: 500;\n display: block;\n margin-bottom: 6px;\n}\n\n@media (max-width: 860px) {\n .metrics-grid { grid-template-columns: 1fr; }\n .metrics-callout { padding: 28px 24px; }\n .metrics-callout-inner { flex-direction: column; gap: 24px; }\n .metrics-callout-divider { width: 60px; height: 1px; }\n .metrics-big { font-size: 52px; }\n}\n\n<\/style>\n<\/head>\n<body>\n\n<canvas id=\"robot-canvas\"><\/canvas>\n\n<nav class=\"nav\" id=\"nav\">\n <div class=\"container\">\n <div class=\"nav__inner\">\n <a href=\"#\" class=\"nav__logo\">\n <span class=\"nav__logo-text\">AutomateCity<\/span>\n <\/a>\n <ul class=\"nav__links\">\n <li><a href=\"#o-firmie\">O firmie<\/a><\/li>\n <li><a href=\"#kompetencje\">Kompetencje<\/a><\/li>\n <li><a href=\"#branze\">Bran\u017ce<\/a><\/li>\n <li><a href=\"#realizacje\">Realizacje<\/a><\/li>\n <li><a href=\"#wspolpraca\">Wsp\u00f3\u0142praca<\/a><\/li>\n <\/ul>\n <a href=\"#kontakt\" class=\"nav__cta\">\n Um\u00f3w rozmow\u0119\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n <\/a>\n <div class=\"nav__burger\" id=\"burger\" aria-label=\"Menu\" role=\"button\" tabindex=\"0\">\n <span><\/span>\n <span><\/span>\n <span><\/span>\n <\/div>\n <\/div>\n <\/div>\n<\/nav>\n\n<!-- Mobile nav -->\n<div class=\"mobile-nav\" id=\"mobile-nav\">\n <a href=\"#o-firmie\">O firmie<\/a>\n <a href=\"#kompetencje\">Kompetencje<\/a>\n <a href=\"#branze\">Bran\u017ce<\/a>\n <a href=\"#realizacje\">Realizacje<\/a>\n <a href=\"#wspolpraca\">Wsp\u00f3\u0142praca<\/a>\n <a href=\"#kontakt\" class=\"btn-primary\">Um\u00f3w rozmow\u0119 \u2192<\/a>\n<\/div>\n\n<section class=\"hero\" id=\"hero\">\n <!-- SLIDESHOW BACKGROUND -->\n <div class=\"hero__slides\" id=\"heroSlides\">\n <div class=\"hero__slide active\" style=\"background-image:url('https:\/\/images.pexels.com\/photos\/7567443\/pexels-photo-7567443.jpeg?auto=compress&cs=tinysrgb&w=1600')\"><\/div>\n <div class=\"hero__slide\" style=\"background-image:url('https:\/\/images.pexels.com\/photos\/3184291\/pexels-photo-3184291.jpeg?auto=compress&cs=tinysrgb&w=1600')\"><\/div>\n <div class=\"hero__slide\" style=\"background-image:url('https:\/\/images.pexels.com\/photos\/3861969\/pexels-photo-3861969.jpeg?auto=compress&cs=tinysrgb&w=1600')\"><\/div>\n <div class=\"hero__slide\" style=\"background-image:url('https:\/\/images.pexels.com\/photos\/1181244\/pexels-photo-1181244.jpeg?auto=compress&cs=tinysrgb&w=1600')\"><\/div>\n <div class=\"hero__slide\" style=\"background-image:url('https:\/\/images.pexels.com\/photos\/3182812\/pexels-photo-3182812.jpeg?auto=compress&cs=tinysrgb&w=1600')\"><\/div>\n <\/div>\n <!-- Dark overlay over slides -->\n <div class=\"hero__slide-overlay\"><\/div>\n\n <div class=\"hero__bg\">\n <div class=\"hero__grid\"><\/div>\n <div class=\"hero__orb hero__orb--1\"><\/div>\n <div class=\"hero__orb hero__orb--2\"><\/div>\n <div class=\"hero__orb hero__orb--3\"><\/div>\n <\/div>\n\n <div class=\"container\">\n <div class=\"hero__content\">\n <div class=\"hero__eyebrow\">\n <span class=\"hero__eyebrow-line\"><\/span>\n <span class=\"hero__eyebrow-text\">AI & In\u017cynieria IT dla biznesu<\/span>\n <\/div>\n\n <h1 class=\"hero__h1\">\n AI i in\u017cynieria IT<br>\n po stronie wymaga\u0144<br>\n <span class=\"text-gradient\">biznesowych.<\/span>\n <\/h1>\n\n <p class=\"hero__subtitle\">\n Jeste\u015bmy praktykami z wieloletnim do\u015bwiadczeniem w budowie system\u00f3w AI i rozwi\u0105za\u0144 informatycznych dla biznesu. Nie sprzedajemy technologii \u2014 rozwi\u0105zujemy problemy operacyjne i strategiczne firm z bran\u017cy nieruchomo\u015bci, prawa, finans\u00f3w, energetyki i us\u0142ug.\n <\/p>\n\n <div class=\"hero__actions\">\n <a href=\"#kontakt\" class=\"btn-primary\">\n Um\u00f3w rozmow\u0119 z naszym zespo\u0142em\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n <\/a>\n <a href=\"#realizacje\" class=\"btn-ghost\">\n Poznaj nasze realizacje \u2193\n <\/a>\n <\/div>\n\n <div class=\"hero__metrics\">\n <div>\n <div class=\"hero__metric-value text-gradient\">5+<\/div>\n <div class=\"hero__metric-label\">Bran\u017c obs\u0142ugiwanych<\/div>\n <\/div>\n <div class=\"hero__metric-divider\"><\/div>\n <div>\n <div class=\"hero__metric-value text-gradient\">65<\/div>\n <div class=\"hero__metric-label\">Narz\u0119dzi AI w produktach<\/div>\n <\/div>\n <div class=\"hero__metric-divider\"><\/div>\n <div>\n <div class=\"hero__metric-value text-gradient\">239<\/div>\n <div class=\"hero__metric-label\">Typ\u00f3w zdarze\u0144 automatyzacji<\/div>\n <\/div>\n <div class=\"hero__metric-divider\"><\/div>\n <div>\n <div class=\"hero__metric-value text-gradient\">3\u00d7<\/div>\n <div class=\"hero__metric-label\">Mniejszy zesp\u00f3\u0142 \u2014 te same wyniki<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Slide indicator dots -->\n <div class=\"slide-dots\" id=\"slideDots\"><\/div>\n<\/section>\n\n<div class=\"white-breather\">\n <div class=\"white-breather-line\"><\/div>\n<\/div>\n<div class=\"marquee-section\">\n <p class=\"marquee-label\">Obszary kompetencji<\/p>\n <div style=\"overflow:hidden\">\n <div class=\"marquee-track\">\n <span class=\"marquee-item\">Systemy AI<\/span>\n <span class=\"marquee-item\">Automatyzacja proces\u00f3w<\/span>\n <span class=\"marquee-item\">Nieruchomo\u015bci<\/span>\n <span class=\"marquee-item\">Energetyka OZE<\/span>\n <span class=\"marquee-item\">Kancelarie prawne<\/span>\n <span class=\"marquee-item\">Finanse i inwestycje<\/span>\n <span class=\"marquee-item\">Big Data<\/span>\n <span class=\"marquee-item\">Agenci AI<\/span>\n <span class=\"marquee-item\">Pozyskiwanie klient\u00f3w<\/span>\n <span class=\"marquee-item\">Systemy AI<\/span>\n <span class=\"marquee-item\">Automatyzacja proces\u00f3w<\/span>\n <span class=\"marquee-item\">Nieruchomo\u015bci<\/span>\n <span class=\"marquee-item\">Energetyka OZE<\/span>\n <span class=\"marquee-item\">Kancelarie prawne<\/span>\n <span class=\"marquee-item\">Finanse i inwestycje<\/span>\n <span class=\"marquee-item\">Big Data<\/span>\n <span class=\"marquee-item\">Agenci AI<\/span>\n <span class=\"marquee-item\">Pozyskiwanie klient\u00f3w<\/span>\n <\/div>\n <\/div>\n<\/div>\n\n<section class=\"section section-light\" id=\"branze\">\n <div class=\"container\">\n <div class=\"reveal\">\n <span class=\"tag\">Dla kogo pracujemy<\/span>\n <h2 class=\"section-title\">Pracujemy z firmami, kt\u00f3re<br>stoj\u0105 przed realnymi wyzwaniami<\/h2>\n <p class=\"section-subtitle\">\n Naszymi klientami s\u0105 firmy, kt\u00f3rych zarz\u0105dy dostrzegaj\u0105 konkretne problemy: rosn\u0105ce koszty operacyjne, brak kontroli nad przep\u0142ywem informacji, nieefektywne pozyskiwanie klient\u00f3w lub przewaga konkurencji wynikaj\u0105ca z lepszego wykorzystania technologii.\n <\/p>\n <\/div>\n\n <div class=\"branches reveal reveal-delay-2\">\n <!-- Nieruchomo\u015bci -->\n <div class=\"branch-card\">\n <div class=\"branch-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\"><path d=\"M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z\"\/><polyline points=\"9 22 9 12 15 12 15 22\"\/><\/svg>\n <\/div>\n <div class=\"branch-name\">Nieruchomo\u015bci i Land Development<\/div>\n <div class=\"branch-desc\">Analizy potencja\u0142u zabudowy, identyfikacja teren\u00f3w inwestycyjnych w skali kraju, automatyczna analiza MPZP, modele finansowe dla projekt\u00f3w inwestycyjnych.<\/div>\n <\/div>\n <!-- Energetyka -->\n <div class=\"branch-card\">\n <div class=\"branch-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"\/><\/svg>\n <\/div>\n <div class=\"branch-name\">Energetyka i OZE<\/div>\n <div class=\"branch-desc\">Identyfikacja lokalizacji pod farmy wiatrowe i PV, analiza warunk\u00f3w przy\u0142\u0105czeniowych, modelowanie op\u0142acalno\u015bci inwestycji. 3-osobowy zesp\u00f3\u0142 z wynikami lidera rynku.<\/div>\n <\/div>\n <!-- Prawo -->\n <div class=\"branch-card\">\n <div class=\"branch-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\"><path d=\"M3 6h18M3 12h18M3 18h18\"\/><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"\/><\/svg>\n <\/div>\n <div class=\"branch-name\">Bran\u017ca prawna<\/div>\n <div class=\"branch-desc\">Automatyzacja przetwarzania dokument\u00f3w, ekstrakcja informacji z um\u00f3w i akt\u00f3w, systemy nadzoru obs\u0142ugi klient\u00f3w. Procesy z godzin do minut.<\/div>\n <\/div>\n <!-- Finanse -->\n <div class=\"branch-card\">\n <div class=\"branch-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\"><line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"23\"\/><path d=\"M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6\"\/><\/svg>\n <\/div>\n <div class=\"branch-name\">Finanse i inwestycje<\/div>\n <div class=\"branch-desc\">Modele finansowe i wnioski inwestycyjne na poziomie komitetu, analizy due diligence, prognozowanie przep\u0142yw\u00f3w. Do\u015bwiadczenie w bezpo\u015bredniej pracy z zarz\u0105dami funduszy.<\/div>\n <\/div>\n <!-- Us\u0142ugi -->\n <div class=\"branch-card\">\n <div class=\"branch-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M19.07 4.93A10 10 0 006.93 19.07M4.93 4.93A10 10 0 0019.07 19.07\"\/><\/svg>\n <\/div>\n <div class=\"branch-name\">Sektor us\u0142ugowy<\/div>\n <div class=\"branch-desc\">Przewaga konkurencyjna przez redukcj\u0119 koszt\u00f3w i automatyczne zarz\u0105dzanie procesami. Wy\u017csza przepustowo\u015b\u0107 organizacji bez proporcjonalnego wzrostu zatrudnienia.<\/div>\n <\/div>\n <!-- M\u015aP -->\n <div class=\"branch-card\">\n <div class=\"branch-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\"><rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16\"\/><\/svg>\n <\/div>\n <div class=\"branch-name\">M\u015aP i du\u017ce organizacje<\/div>\n <div class=\"branch-desc\">Wsp\u00f3\u0142pracujemy zar\u00f3wno z du\u017cymi organizacjami, jak i firmami M\u015aP. Kryterium jest istnienie realnego problemu uzasadniaj\u0105cego inwestycj\u0119 w jego rozwi\u0105zanie.<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<section class=\"section\" id=\"kompetencje\" style=\"background: linear-gradient(180deg, transparent 0%, rgba(0,212,255,0.015) 50%, transparent 100%);\">\n <div class=\"container\">\n <div class=\"reveal\">\n <span class=\"tag\">Cztery filary<\/span>\n <h2 class=\"section-title\">Cztery obszary, w kt\u00f3rych<br>dostarczamy mierzalne wyniki<\/h2>\n <p class=\"section-subtitle\">\n W ka\u017cdym z tych obszar\u00f3w pracujemy po stronie wymaga\u0144 \u2014 nie po stronie dostawcy. Najpierw rozumiemy, co firma potrzebuje osi\u0105gn\u0105\u0107, a dopiero potem dobieramy technologi\u0119.\n <\/p>\n <\/div>\n\n <div class=\"pillars-grid\">\n <div class=\"pillar-card reveal reveal-delay-1\">\n <div class=\"pillar-card-shine\"><\/div>\n <div class=\"pillar-number\">01<\/div>\n <div class=\"pillar-tag\">Filar 1<\/div>\n <div class=\"pillar-title\">Pozyskiwanie klient\u00f3w<\/div>\n <p class=\"pillar-desc\">Projektujemy i realizujemy kompletne systemy pozyskiwania klient\u00f3w \u2014 od wizerunku firmy po zaawansowane \u017ar\u00f3d\u0142a lead\u00f3w. Strategia obecno\u015bci cyfrowej, produkcja tre\u015bci, kampanie precyzyjne i niestandardowe \u017ar\u00f3d\u0142a kontakt\u00f3w niedost\u0119pne dla konkurencji.<\/p>\n <a href=\"#kontakt\" class=\"pillar-link\">Dowiedz si\u0119 wi\u0119cej \u2192<\/a>\n <\/div>\n\n <div class=\"pillar-card reveal reveal-delay-2\">\n <div class=\"pillar-card-shine\"><\/div>\n <div class=\"pillar-number\">02<\/div>\n <div class=\"pillar-tag\">Filar 2<\/div>\n <div class=\"pillar-title\">Procesy i automatyzacja<\/div>\n <p class=\"pillar-desc\">Projektujemy i wdra\u017camy dedykowane ekosystemy aplikacji, kt\u00f3re porz\u0105dkuj\u0105 przep\u0142ywy informacji i eliminuj\u0105 kosztowne, powtarzalne czynno\u015bci. Audyt, projektowanie, budowa i wdro\u017cenie z partycypacj\u0105 zespo\u0142u klienta.<\/p>\n <a href=\"#kontakt\" class=\"pillar-link\">Dowiedz si\u0119 wi\u0119cej \u2192<\/a>\n <\/div>\n\n <div class=\"pillar-card reveal reveal-delay-1\">\n <div class=\"pillar-card-shine\"><\/div>\n <div class=\"pillar-number\">03<\/div>\n <div class=\"pillar-tag\">Filar 3<\/div>\n <div class=\"pillar-title\">Big Data i analityka<\/div>\n <p class=\"pillar-desc\">Pozyskujemy, porz\u0105dkujemy i przetwarzamy dane \u2014 r\u00f3wnie\u017c analogowe. Budujemy bezpieczne repozytoria wiedzy oparte o zaawansowane algorytmy indeksowania i wyszukiwania. Tysi\u0105ce dokument\u00f3w tam, gdzie cz\u0142owiek przeanalizuje kilkana\u015bcie.<\/p>\n <a href=\"#kontakt\" class=\"pillar-link\">Dowiedz si\u0119 wi\u0119cej \u2192<\/a>\n <\/div>\n\n <div class=\"pillar-card reveal reveal-delay-2\">\n <div class=\"pillar-card-shine\"><\/div>\n <div class=\"pillar-number\">04<\/div>\n <div class=\"pillar-tag\">Filar 4<\/div>\n <div class=\"pillar-title\">AI i wsparcie decyzji<\/div>\n <p class=\"pillar-desc\">Projektujemy i budujemy systemy agentowe, w kt\u00f3rych sztuczna inteligencja pracuje jako warstwa wspomagaj\u0105ca decyzje. Inteligentni asystenci, modele analityczne, identyfikacja szans rynkowych. Ka\u017cde wdro\u017cenie musi wykaza\u0107 mierzalny ROI.<\/p>\n <a href=\"#kontakt\" class=\"pillar-link\">Dowiedz si\u0119 wi\u0119cej \u2192<\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"photo-section\">\n <img decoding=\"async\"\n class=\"photo-section__img\"\n src=\"https:\/\/images.pexels.com\/photos\/3184291\/pexels-photo-3184291.jpeg?auto=compress&cs=tinysrgb&w=1600\"\n alt=\"Praca zespo\u0142u analitycznego\"\n loading=\"lazy\"\n >\n <div class=\"photo-section__overlay\"><\/div>\n <div class=\"photo-section__content\">\n <div class=\"photo-section__stat text-gradient\">18 mies.<\/div>\n <div class=\"photo-section__stat-text\">trzyosobowy zesp\u00f3\u0142 \u2014 wyniki por\u00f3wnywalne z liderem rynku OZE zatrudniaj\u0105cym 100+ os\u00f3b<\/div>\n <\/div>\n<\/div>\n\n\n<section class=\"section metrics-section\" id=\"wyniki\">\n <div class=\"container\">\n <div class=\"reveal\">\n <span class=\"tag\">Mierzalne efekty<\/span>\n <h2 class=\"section-title\">Automatyzacja w liczbach<\/h2>\n <p class=\"section-subtitle\">Konkretne wyniki z wdro\u017ce\u0144, kt\u00f3re zrealizowali\u015bmy. Nie szacunki \u2014 zmierzone oszcz\u0119dno\u015bci.<\/p>\n <\/div>\n\n <div class=\"metrics-grid reveal\">\n\n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <span class=\"metric-label\">Oszcz\u0119dno\u015b\u0107 czasu \/ prawnik \/ dzie\u0144<\/span>\n <span class=\"metric-percent\" data-count=\"75\" data-suffix=\"%\">0%<\/span>\n <\/div>\n <div class=\"metric-bar-track\">\n <div class=\"metric-bar\" data-width=\"75\"><\/div>\n <\/div>\n <div class=\"metric-detail\">3 godziny mniej r\u0119cznej pracy administracyjnej<\/div>\n <\/div>\n\n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <span class=\"metric-label\">Redukcja telefon\u00f3w od klient\u00f3w kancelarii<\/span>\n <span class=\"metric-percent\" data-count=\"80\" data-suffix=\"%\">0%<\/span>\n <\/div>\n <div class=\"metric-bar-track\">\n <div class=\"metric-bar\" data-width=\"80\"><\/div>\n <\/div>\n <div class=\"metric-detail\">Portal samoobs\u0142ugowy 24\/7 zast\u0105pi\u0142 wi\u0119kszo\u015b\u0107 zapyta\u0144 statusowych<\/div>\n <\/div>\n\n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <span class=\"metric-label\">Analiza MPZP: przyspieszenie vs. praca r\u0119czna<\/span>\n <span class=\"metric-percent\" data-count=\"99\" data-suffix=\"%\">0%<\/span>\n <\/div>\n <div class=\"metric-bar-track\">\n <div class=\"metric-bar\" data-width=\"99\" style=\"--bar-color: var(--violet-light);\"><\/div>\n <\/div>\n <div class=\"metric-detail\">Tysi\u0105ce plan\u00f3w w godzinach, nie w miesi\u0105cach<\/div>\n <\/div>\n\n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <span class=\"metric-label\">Weryfikacja konfliktu interes\u00f3w<\/span>\n <span class=\"metric-percent\" data-count=\"99\" data-suffix=\"%\">0%<\/span>\n <\/div>\n <div class=\"metric-bar-track\">\n <div class=\"metric-bar\" data-width=\"99\" style=\"--bar-color: var(--violet-light);\"><\/div>\n <\/div>\n <div class=\"metric-detail\">3 sekundy zamiast 30 minut \u2014 zautomatyzowane sprawdzenie rejestru<\/div>\n <\/div>\n\n <\/div>\n\n <div class=\"metrics-callout reveal\">\n <div class=\"metrics-callout-inner\">\n <div class=\"metrics-callout-number\">\n <span class=\"metrics-big\" data-count=\"18\" data-suffix=\"\">0<\/span>\n <span class=\"metrics-big-unit\">mies.<\/span>\n <\/div>\n <div class=\"metrics-callout-divider\"><\/div>\n <div class=\"metrics-callout-text\">\n <strong>3-osobowy zesp\u00f3\u0142 osi\u0105gn\u0105\u0142 wyniki por\u00f3wnywalne z liderem rynku OZE zatrudniaj\u0105cym ponad 100 os\u00f3b.<\/strong>\n Nie przez lepsz\u0105 sprzeda\u017c \u2014 przez lepsz\u0105 analiz\u0119, zanim ktokolwiek wyszed\u0142 w teren.\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n<\/section>\n\n<section class=\"section\" id=\"realizacje\">\n <div class=\"container\">\n <div class=\"reveal\">\n <span class=\"tag\">Realizacje<\/span>\n <h2 class=\"section-title\">Wybrane projekty<\/h2>\n <p class=\"section-subtitle\">\n Ka\u017cdy projekt zacz\u0105\u0142 si\u0119 od zrozumienia wymaga\u0144 biznesowych, a nie od wyboru technologii. Poni\u017cej \u2014 konkretne wyniki potwierdzone przez klient\u00f3w.\n <\/p>\n <\/div>\n\n <div class=\"cases-grid reveal reveal-delay-1\">\n\n <!-- Case 1 -->\n <div class=\"case-item\">\n <div>\n <div class=\"case-meta-branch\">Energetyka OZE<\/div>\n <div class=\"case-meta-num\">3\u00d7<\/div>\n <div class=\"case-meta-unit\">wi\u0119cej projekt\u00f3w \/ 3 os. vs. 100+<\/div>\n <\/div>\n <div>\n <div class=\"case-title\">Trzy osoby, wyniki por\u00f3wnywalne z liderem rynku OZE<\/div>\n <p class=\"case-desc\">Trzyosobowy zesp\u00f3\u0142 klienta vs. konkurencja z dziesi\u0105tkami os\u00f3b w ka\u017cdym wojew\u00f3dztwie. System AI przeanalizowa\u0142 tysi\u0105ce miejscowych plan\u00f3w zagospodarowania przestrzennego \u2014 prac\u0119, nad kt\u00f3r\u0105 prawnicy pracowaliby miesi\u0105cami \u2014 i wskaza\u0142 lokalizacje o najwy\u017cszym potencjale inwestycyjnym.<\/p>\n <\/div>\n <div class=\"case-result\">\n <div class=\"case-result-label\">Wynik<\/div>\n <div class=\"case-result-text\">W 18 miesi\u0119cy: 3 projekty po ok. 500 ha ka\u017cdy \u2014 tyle co najwi\u0119kszy podmiot na polskim rynku OZE. Handlowcy przyje\u017cd\u017cali na pierwsze spotkanie lepiej przygotowani ni\u017c konkurencja na spotkaniu trzecim.<\/div>\n <\/div>\n <\/div>\n\n <!-- Case 2 -->\n <div class=\"case-item\">\n <div>\n <div class=\"case-meta-branch\">Nieruchomo\u015bci<\/div>\n <div class=\"case-meta-num\">AI<\/div>\n <div class=\"case-meta-unit\">wyszukiwanie przez podobie\u0144stwo<\/div>\n <\/div>\n <div>\n <div class=\"case-title\">Inteligentny agent wyszukiwania nieruchomo\u015bci<\/div>\n <p class=\"case-desc\">Tradycyjne portale pokazuj\u0105 tylko aktywne oferty. Znaczna cz\u0119\u015b\u0107 atrakcyjnych teren\u00f3w nigdy nie jest wystawiona na sprzeda\u017c. Agent konwersacyjny pozwala opisa\u0107 preferencje w j\u0119zyku naturalnym i wyszukuje nieruchomo\u015bci przez podobie\u0144stwo \u2014 r\u00f3wnie\u017c spoza aktywnych ofert.<\/p>\n <\/div>\n <div class=\"case-result\">\n <div class=\"case-result-label\">Wynik<\/div>\n <div class=\"case-result-text\">Nowy model pozyskiwania kontakt\u00f3w handlowych. Zaawansowane analizy przestrzenne i prawne dost\u0119pne dla ka\u017cdego u\u017cytkownika przez rozmow\u0119 z agentem. System proaktywnie generuje zapotrzebowanie inwestycyjne.<\/div>\n <\/div>\n <\/div>\n\n <!-- Case 3 -->\n <div class=\"case-item\">\n <div>\n <div class=\"case-meta-branch\">Land Development<\/div>\n <div class=\"case-meta-num\">100%<\/div>\n <div class=\"case-meta-unit\">automatyczna aktualizacja danych<\/div>\n <\/div>\n <div>\n <div class=\"case-title\">Automatyczna analiza potencja\u0142u zabudowy w skali kraju<\/div>\n <p class=\"case-desc\">Ocena potencja\u0142u zabudowy dzia\u0142ki wymaga analizy MPZP \u2014 mapy i uchwa\u0142y tekstowej. R\u0119cznie: godziny pracy specjalisty na jeden plan, tysi\u0105ce plan\u00f3w aktualizowanych regularnie. Hybrydowy system AI \u0142\u0105cz\u0105cy model wizyjny (mapa) z modelem j\u0119zykowym (uchwa\u0142a) rozwi\u0105zuje ten problem w skali.<\/p>\n <\/div>\n <div class=\"case-result\">\n <div class=\"case-result-label\">Wynik<\/div>\n <div class=\"case-result-text\">Analiza ca\u0142ego miasta lub regionu zamiast miesi\u0119cy pracy zespo\u0142u. Ci\u0105g\u0142a aktualizacja eliminuje problem dezaktualizacji danych. Identyfikacja w\u0142a\u015bcicieli nie\u015bwiadomych pe\u0142nych mo\u017cliwo\u015bci zabudowy.<\/div>\n <\/div>\n <\/div>\n\n <!-- Case 4 -->\n <div class=\"case-item\">\n <div>\n <div class=\"case-meta-branch\">Prawo<\/div>\n <div class=\"case-meta-num\">\u00d7<\/div>\n <div class=\"case-meta-unit\">skr\u00f3cenie czasu wyceny spraw<\/div>\n <\/div>\n <div>\n <div class=\"case-title\">System zarz\u0105dzania procesami kancelarii prawnej<\/div>\n <p class=\"case-desc\">Kancelaria bez centralnego systemu \u2014 informacje rozproszone w mailach, notatkach i pami\u0119ci prawnik\u00f3w. W\u0142a\u015bciciel bez bie\u017c\u0105cego wgl\u0105du w jako\u015b\u0107 obs\u0142ugi. Ka\u017cda wycena wymaga\u0142a analizy do\u015bwiadczonego prawnika. Zaprojektowali\u015bmy pe\u0142ny cykl obs\u0142ugi \u2014 od zg\u0142oszenia do zamkni\u0119cia sprawy.<\/p>\n <\/div>\n <div class=\"case-result\">\n <div class=\"case-result-label\">Wynik<\/div>\n <div class=\"case-result-text\">Pe\u0142na przejrzysto\u015b\u0107 procesu obs\u0142ugi. Radykalne skr\u00f3cenie czasu reakcji na nowe sprawy. Automatyczna kategoryzacja i wst\u0119pna wycena \u2014 prawnik weryfikuje zamiast analizowa\u0107 od zera.<\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n<section class=\"section\" style=\"padding-top:40px; padding-bottom:80px;\">\n <div class=\"container\">\n <div class=\"reveal\">\n <span class=\"tag\">Nasze podej\u015bcie<\/span>\n <\/div>\n <!-- Card 1: photo left, text right -->\n <div class=\"photo-text-split reveal\">\n <div class=\"pts-photo\">\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/3184296\/pexels-photo-3184296.jpeg?auto=compress&cs=tinysrgb&w=1000\" alt=\"Praca analityczna\" loading=\"lazy\">\n <div class=\"pts-photo-overlay\"><\/div>\n <\/div>\n <div class=\"pts-text\">\n <h2>Wymagania przed technologi\u0105.<br><span class=\"text-gradient\">Zawsze.<\/span><\/h2>\n <p>Wi\u0119kszo\u015b\u0107 dostawc\u00f3w technologii pracuje po stronie realizacji \u2014 otrzymuje wymagania i je implementuje. My pracujemy po stronie wymaga\u0144. Rozumiemy kontekst biznesowy, bo sami w nim pracowali\u015bmy.<\/p>\n <p>Wiemy, czym jest wniosek inwestycyjny, komitet decyzyjny i presja wynikowa. To oznacza, \u017ce potrafimy nie tylko zbudowa\u0107 system, ale najpierw w\u0142a\u015bciwie zdefiniowa\u0107, co ten system powinien robi\u0107.<\/p>\n <div class=\"pts-stats\">\n <div>\n <div class=\"pts-stat-val text-gradient\">3h<\/div>\n <div class=\"pts-stat-label\">oszcz\u0119dno\u015bci \/ prawnik \/ dzie\u0144<\/div>\n <\/div>\n <div>\n <div class=\"pts-stat-val text-gradient\">80%<\/div>\n <div class=\"pts-stat-label\">mniej telefon\u00f3w od klient\u00f3w<\/div>\n <\/div>\n <div>\n <div class=\"pts-stat-val text-gradient\">3s<\/div>\n <div class=\"pts-stat-label\">weryfikacja konfliktu (vs. 30 min)<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Card 2: text left, photo right -->\n <div class=\"photo-text-split photo-text-split--reverse reveal\" style=\"margin-top:2px; border-top:none; border-radius: 0 0 14px 14px; margin-bottom: 0;\">\n <div class=\"pts-photo\">\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/3182812\/pexels-photo-3182812.jpeg?auto=compress&cs=tinysrgb&w=1000\" alt=\"Zesp\u00f3\u0142 AutomateCity\" loading=\"lazy\">\n <div class=\"pts-photo-overlay\"><\/div>\n <\/div>\n <div class=\"pts-text\">\n <h2>W\u0142asny produkt \u2014 <span class=\"text-gradient\">Kanca.OS<\/span><\/h2>\n <p>System operacyjny dla polskiej kancelarii prawnej. Eliminuje r\u0119czn\u0105 prac\u0119 administracyjn\u0105 wsz\u0119dzie tam, gdzie jest to technicznie mo\u017cliwe.<\/p>\n <p>Integruje si\u0119 z e-Dor\u0119czeniami, KRS, GUS, CEIDG, CRBR i Portalem S\u0105dowym. 65 narz\u0119dzi AI, 239 typ\u00f3w zdarze\u0144, pe\u0142na izolacja danych klient\u00f3w.<\/p>\n <a href=\"#kontakt\" class=\"btn-primary\" style=\"margin-top:28px; display:inline-flex; align-self:flex-start;\">\n Dowiedz si\u0119 wi\u0119cej\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<section class=\"section--sm\" style=\"padding-top:0\">\n <div class=\"container\">\n <div class=\"product-spotlight reveal\">\n <div class=\"product-spotlight-inner\">\n <div>\n <div class=\"product-tag\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"\/><\/svg>\n Produkt w\u0142asny\n <\/div>\n <div class=\"product-name\">Kanca<span class=\"text-gradient\">.OS<\/span><\/div>\n <p class=\"product-desc\">System operacyjny dla polskiej kancelarii prawnej. Eliminuje r\u0119czn\u0105 prac\u0119 administracyjn\u0105 przez automatyzacj\u0119 239 typ\u00f3w zdarze\u0144. Integracja z e-Dor\u0119czeniami, KRS, GUS, CEIDG, CRBR, Bia\u0142\u0105 List\u0105 VAT i Portalem S\u0105dowym.<\/p>\n\n <div class=\"product-stats\">\n <div>\n <div class=\"product-stat-val\">65<\/div>\n <div class=\"product-stat-label\">narz\u0119dzi AI<\/div>\n <\/div>\n <div>\n <div class=\"product-stat-val\">239<\/div>\n <div class=\"product-stat-label\">typ\u00f3w zdarze\u0144<\/div>\n <\/div>\n <div>\n <div class=\"product-stat-val\">2\u20134h<\/div>\n <div class=\"product-stat-label\">oszcz\u0119dno\u015bci \/ prawnik \/ dzie\u0144<\/div>\n <\/div>\n <\/div>\n\n <a href=\"#kontakt\" class=\"btn-primary\" style=\"margin-top: 32px; display: inline-flex;\">\n Dowiedz si\u0119 wi\u0119cej \u2192\n <\/a>\n <\/div>\n\n <div class=\"product-benefits\">\n <div class=\"product-benefit\">\n <div class=\"product-benefit-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n <\/div>\n <div class=\"product-benefit-text\">\u017baden termin procesowy nigdy nie zostanie przeoczony \u2014 automatyczne obliczanie z KPC, KPK, KPA i PPSA<\/div>\n <\/div>\n <div class=\"product-benefit\">\n <div class=\"product-benefit-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n <\/div>\n <div class=\"product-benefit-text\">Portal klienta 24\/7 \u2014 koniec z telefonami przerywaj\u0105cymi prac\u0119 merytoryczn\u0105<\/div>\n <\/div>\n <div class=\"product-benefit\">\n <div class=\"product-benefit-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n <\/div>\n <div class=\"product-benefit-text\">Dane osobowe klient\u00f3w nigdy nie opuszczaj\u0105 infrastruktury kancelarii \u2014 lokalna anonimizacja przed AI<\/div>\n <\/div>\n <div class=\"product-benefit\">\n <div class=\"product-benefit-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n <\/div>\n <div class=\"product-benefit-text\">Morning Briefing: terminy, nowe sprawy, zaleg\u0142e faktury i obci\u0105\u017cenie prawnik\u00f3w \u2014 codziennie rano<\/div>\n <\/div>\n <div class=\"product-benefit\">\n <div class=\"product-benefit-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n <\/div>\n <div class=\"product-benefit-text\">System w fazie produkcyjnej \u2014 MVP planowane w ci\u0105gu 2\u20134 tygodni<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- White stats callout -->\n <div class=\"white-callout reveal\">\n <div class=\"white-callout-stat\">\n <div class=\"white-callout-val\">3<\/div>\n <div class=\"white-callout-label\">wewn\u0119trzne zespo\u0142y<\/div>\n <\/div>\n <div class=\"white-callout-stat\">\n <div class=\"white-callout-val\">18<span style=\"font-size:24px\">mies.<\/span><\/div>\n <div class=\"white-callout-label\">najd\u0142u\u017cszy sprint projektowy<\/div>\n <\/div>\n <div class=\"white-callout-stat\">\n <div class=\"white-callout-val\">100%<\/div>\n <div class=\"white-callout-label\">w\u0142asny kod \u2014 zero gotowych szablon\u00f3w<\/div>\n <\/div>\n <div class=\"white-callout-stat\">\n <div class=\"white-callout-val\">5+<\/div>\n <div class=\"white-callout-label\">bran\u017c obs\u0142ugiwanych<\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<section class=\"section\" id=\"o-firmie\">\n <div class=\"container\">\n <div class=\"about-split\">\n <div class=\"about-visual reveal\">\n <img decoding=\"async\"\n src=\"https:\/\/images.pexels.com\/photos\/3182812\/pexels-photo-3182812.jpeg?auto=compress&cs=tinysrgb&w=900\"\n alt=\"Zesp\u00f3\u0142 AutomateCity\"\n loading=\"lazy\"\n >\n <div class=\"about-glow\"><\/div>\n <\/div>\n\n <div class=\"about-text reveal reveal-delay-2\">\n <span class=\"tag\">O firmie<\/span>\n <h2>In\u017cynierowie, kt\u00f3rzy pracowali po stronie biznesu.<\/h2>\n <p>\n AutomateCity to firma audytowo-wdro\u017ceniowa z w\u0142asnym zespo\u0142em in\u017cynierskim, analitycznym i konsultacyjnym. Dysponujemy trzema wewn\u0119trznymi zespo\u0142ami: in\u017cynierskim, analitycznym i konsultacyjnym.\n <\/p>\n <p>\n Nie jeste\u015bmy software housem realizuj\u0105cym zlecenia wed\u0142ug specyfikacji \u2014 i nie jeste\u015bmy agencj\u0105, kt\u00f3ra wczoraj zajmowa\u0142a si\u0119 czym\u015b innym, a dzi\u015b \u201ewdra\u017ca AI\". Budowali\u015bmy modele finansowe dla funduszy inwestycyjnych, tworzyli\u015bmy narz\u0119dzia dla firm z sektora nieruchomo\u015bci i energetyki, projektowali\u015bmy systemy dla kancelarii prawnych.\n <\/p>\n\n <div class=\"about-principles\">\n <div class=\"about-principle\">\n <div class=\"about-principle-dot\"><\/div>\n <div class=\"about-principle-text\"><strong>Wymagania przed technologi\u0105.<\/strong> Ka\u017cdy projekt zaczynamy od zrozumienia problemu biznesowego. Technologia jest \u015brodkiem \u2014 nigdy celem.<\/div>\n <\/div>\n <div class=\"about-principle\">\n <div class=\"about-principle-dot\"><\/div>\n <div class=\"about-principle-text\"><strong>Adekwatno\u015b\u0107 kosztowa.<\/strong> Je\u015bli proste rozwi\u0105zanie spe\u0142nia wymagania, nie proponujemy z\u0142o\u017conego systemu. Nasz model opiera si\u0119 na dostarczaniu wynik\u00f3w, nie na sprzeda\u017cy licencji.<\/div>\n <\/div>\n <div class=\"about-principle\">\n <div class=\"about-principle-dot\"><\/div>\n <div class=\"about-principle-text\"><strong>Wdro\u017cenia zorientowane na ludzi.<\/strong> Technologia jest bezu\u017cyteczna, je\u015bli osoby z niej korzystaj\u0105ce nie rozumiej\u0105 jej warto\u015bci. Ka\u017cdy projekt obejmuje prac\u0119 z zespo\u0142em klienta.<\/div>\n <\/div>\n <div class=\"about-principle\">\n <div class=\"about-principle-dot\"><\/div>\n <div class=\"about-principle-text\"><strong>Ci\u0105g\u0142a ewaluacja AI.<\/strong> Nasz zesp\u00f3\u0142 na bie\u017c\u0105co testuje nowe modele i narz\u0119dzia \u2014 zar\u00f3wno komercyjne, jak i open source. Klient zawsze otrzymuje najlepsz\u0105 dost\u0119pn\u0105 technologi\u0119.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"founders-section\">\n <div class=\"container\">\n <div class=\"reveal\">\n <span class=\"tag\">Za\u0142o\u017cyciele<\/span>\n <h2 class=\"section-title\">Ludzie za AutomateCity<\/h2>\n <p class=\"section-subtitle\">Firma zbudowana przez praktyk\u00f3w, kt\u00f3rzy wcze\u015bniej rozwi\u0105zywali te same problemy od \u015brodka.<\/p>\n <\/div>\n\n <div class=\"founders-grid\">\n\n <div class=\"founder-card reveal reveal-delay-1\">\n <div class=\"founder-photo\">\n <img decoding=\"async\"\n src=\"https:\/\/automate.city\/wp-content\/uploads\/2026\/03\/Lukasz-scaled.jpeg\"\n alt=\"\u0141ukasz \u2014 Co-founder AutomateCity\"\n loading=\"lazy\"\n >\n <div class=\"founder-photo-overlay\"><\/div>\n <\/div>\n <div class=\"founder-info\">\n <div class=\"founder-name\">\u0141ukasz<\/div>\n <div class=\"founder-role\">Co-founder \u00b7 AI Engineering<\/div>\n <p class=\"founder-bio\">\n In\u017cynier system\u00f3w AI z do\u015bwiadczeniem w projektowaniu rozwi\u0105za\u0144 dla sektora nieruchomo\u015bci, energetyki i prawa. Przez lata pracowa\u0142 po stronie wymaga\u0144 biznesowych \u2014 buduj\u0105c modele analityczne i systemy decyzyjne dla organizacji operuj\u0105cych na z\u0142o\u017conych danych.\n <\/p>\n <div class=\"founder-links\">\n <a href=\"https:\/\/www.linkedin.com\/company\/automate-city\" class=\"founder-link\" target=\"_blank\" rel=\"noopener\" aria-label=\"LinkedIn\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6z\"\/><rect x=\"2\" y=\"9\" width=\"4\" height=\"12\"\/><circle cx=\"4\" cy=\"4\" r=\"2\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"founder-card reveal reveal-delay-2\">\n <div class=\"founder-photo\">\n <img decoding=\"async\"\n src=\"https:\/\/automate.city\/wp-content\/uploads\/2026\/03\/Marcin.jpeg\"\n alt=\"Marcin \u2014 Co-founder AutomateCity\"\n loading=\"lazy\"\n >\n <div class=\"founder-photo-overlay\"><\/div>\n <\/div>\n <div class=\"founder-info\">\n <div class=\"founder-name\">Marcin<\/div>\n <div class=\"founder-role\">Co-founder \u00b7 Business Strategy<\/div>\n <p class=\"founder-bio\">\n Strateg i konsultant z zapleczem w finansach i inwestycjach. Pracowa\u0142 bezpo\u015brednio z zarz\u0105dami funduszy inwestycyjnych, odpowiadaj\u0105c za jako\u015b\u0107 danych stanowi\u0105cych podstaw\u0119 decyzji o warto\u015bci mierzonej w milionach z\u0142otych. Odpowiada za audyty procesowe i architektur\u0119 wdro\u017ce\u0144.\n <\/p>\n <div class=\"founder-links\">\n <a href=\"https:\/\/www.linkedin.com\/company\/automate-city\" class=\"founder-link\" target=\"_blank\" rel=\"noopener\" aria-label=\"LinkedIn\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6z\"\/><rect x=\"2\" y=\"9\" width=\"4\" height=\"12\"\/><circle cx=\"4\" cy=\"4\" r=\"2\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n<section class=\"section section-white\" id=\"wspolpraca\">\n <div class=\"container\">\n <div class=\"reveal\">\n <span class=\"tag\">Jak pracujemy<\/span>\n <h2 class=\"section-title\">Jak wygl\u0105da wsp\u00f3\u0142praca<\/h2>\n <p class=\"section-subtitle\">\n Ka\u017cdy projekt rozpoczynamy od zrozumienia sytuacji biznesowej klienta \u2014 nie od prezentacji technologii.\n <\/p>\n <\/div>\n\n <div class=\"process-steps reveal reveal-delay-1\">\n <div class=\"process-step\">\n <div class=\"process-step__icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"M21 21l-4.35-4.35\"\/><\/svg>\n <\/div>\n <div class=\"process-step__num\">01 \/ AUDYT<\/div>\n <div class=\"process-step__title\">Audyt i diagnoza<\/div>\n <p class=\"process-step__desc\">Analizujemy funkcjonowanie firmy i identyfikujemy obszary generuj\u0105ce najwy\u017csze straty wynikaj\u0105ce z nieefektywno\u015bci. Klient nie musi posiada\u0107 wiedzy technicznej \u2014 musi zna\u0107 swoje wyzwania.<\/p>\n <\/div>\n <div class=\"process-step\">\n <div class=\"process-step__icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\"><path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"\/><polyline points=\"14 2 14 8 20 8\"\/><line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/><line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/><polyline points=\"10 9 9 9 8 9\"\/><\/svg>\n <\/div>\n <div class=\"process-step__num\">02 \/ PROPOZYCJA<\/div>\n <div class=\"process-step__title\">Propozycja rozwi\u0105zania<\/div>\n <p class=\"process-step__desc\">Konkretna propozycja: zakres prac, harmonogram, bud\u017cet i oczekiwane rezultaty. Je\u015bli problem da si\u0119 rozwi\u0105za\u0107 pro\u015bciej ni\u017c zak\u0142adano \u2014 informujemy o tym.<\/p>\n <\/div>\n <div class=\"process-step\">\n <div class=\"process-step__icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\"><polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/><\/svg>\n <\/div>\n <div class=\"process-step__num\">03 \/ REALIZACJA<\/div>\n <div class=\"process-step__title\">Realizacja i wdro\u017cenie<\/div>\n <p class=\"process-step__desc\">Nasz zesp\u00f3\u0142 buduje rozwi\u0105zanie, a wdro\u017cenie realizujemy wsp\u00f3lnie z zespo\u0142em klienta. Organizujemy warsztaty. Wdra\u017camy etapowo, od obszar\u00f3w o najwy\u017cszym potencjale zwrotu.<\/p>\n <\/div>\n <div class=\"process-step\">\n <div class=\"process-step__icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\"><polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"\/><\/svg>\n <\/div>\n <div class=\"process-step__num\">04 \/ OPTYMALIZACJA<\/div>\n <div class=\"process-step__title\">Optymalizacja i rozw\u00f3j<\/div>\n <p class=\"process-step__desc\">Po uruchomieniu monitorujemy wyniki i optymalizujemy rozwi\u0105zanie. Warunki rynkowe i technologiczne zmieniaj\u0105 si\u0119 \u2014 nasze rozwi\u0105zania zmieniaj\u0105 si\u0119 razem z nimi.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"photo-section\" style=\"height:340px;\">\n <img decoding=\"async\"\n class=\"photo-section__img\"\n src=\"https:\/\/images.pexels.com\/photos\/3184296\/pexels-photo-3184296.jpeg?auto=compress&cs=tinysrgb&w=1600\"\n alt=\"Spotkanie strategiczne\"\n loading=\"lazy\"\n >\n <div class=\"photo-section__overlay\"><\/div>\n<\/div>\n\n<section class=\"cta-section\" id=\"kontakt\">\n <div class=\"container\">\n <div class=\"cta-inner reveal\">\n <span class=\"tag\" style=\"margin-bottom: 24px;\">Kontakt<\/span>\n <h2>Porozmawiajmy o wyzwaniach<br>Twojej firmy.<\/h2>\n <p>Ka\u017cda organizacja ma odmienn\u0105 specyfik\u0119 \u2014 dlatego nie oferujemy wycen bez uprzedniej rozmowy. Bezp\u0142atna konsultacja, ok. 30 minut, zero zobowi\u0105za\u0144.<\/p>\n <\/div>\n <\/div>\n<\/section>\n\n<section class=\"contact-form-section\">\n <div class=\"container\">\n <div class=\"contact-grid reveal\">\n\n <div class=\"contact-info\">\n <span class=\"tag\">Napisz do nas<\/span>\n <h2 class=\"section-title\" style=\"font-size:clamp(24px,3vw,36px)\">Odpiszemy<br>w ci\u0105gu 24 godzin.<\/h2>\n <p style=\"font-size:15px; color:var(--text-secondary); line-height:1.8; margin-top:16px; font-weight:300;\">\n Mo\u017cesz te\u017c napisa\u0107 bezpo\u015brednio na<br>\n <a href=\"\/cdn-cgi\/l\/email-protection#523a373e3e3d123327263d3f3326377c313b262b\" class=\"contact-email\"><span class=\"__cf_email__\" data-cfemail=\"cca4a9a0a0a38cadb9b8a3a1adb8a9e2afa5b8b5\">[email protected]<\/span><\/a>\n <\/p>\n\n <div class=\"contact-details\">\n <div class=\"contact-detail-item\">\n <div class=\"contact-detail-icon\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><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>\n <\/div>\n <span><a href=\"\/cdn-cgi\/l\/email-protection\" class=\"__cf_email__\" data-cfemail=\"adc5c8c1c1c2edccd8d9c2c0ccd9c883cec4d9d4\">[email protected]<\/a><\/span>\n <\/div>\n <div class=\"contact-detail-item\">\n <div class=\"contact-detail-icon\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\n <\/div>\n <span>Pon\u2013Pt, 9:00\u201317:00<\/span>\n <\/div>\n <div class=\"contact-detail-item\">\n <div class=\"contact-detail-icon\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\n <\/div>\n <span>Polska<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <form class=\"contact-form\" id=\"contactForm\" action=\"mailto:hello@automate.city\" method=\"post\" enctype=\"text\/plain\">\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"fname\">Imi\u0119 i nazwisko<\/label>\n <input class=\"form-input\" type=\"text\" id=\"fname\" name=\"Imie i nazwisko\" placeholder=\"Jan Kowalski\" required>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"fcompany\">Firma<\/label>\n <input class=\"form-input\" type=\"text\" id=\"fcompany\" name=\"Firma\" placeholder=\"Nazwa firmy\">\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"femail\">Adres e-mail<\/label>\n <input class=\"form-input\" type=\"email\" id=\"femail\" name=\"Email\" placeholder=\"jan@firma.pl\" required>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"fsubject\">Temat<\/label>\n <select class=\"form-input form-select\" id=\"fsubject\" name=\"Temat\">\n <option value=\"\">Wybierz temat...<\/option>\n <option>Automatyzacja proces\u00f3w<\/option>\n <option>Systemy AI \/ agenty<\/option>\n <option>Big Data i analityka<\/option>\n <option>Pozyskiwanie klient\u00f3w<\/option>\n <option>Kanca.OS \u2014 system dla kancelarii<\/option>\n <option>Inne<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"fmessage\">Wiadomo\u015b\u0107<\/label>\n <textarea class=\"form-input form-textarea\" id=\"fmessage\" name=\"Wiadomosc\" placeholder=\"Opisz kr\u00f3tko wyzwanie, z kt\u00f3rym mo\u017cemy pom\u00f3c...\" rows=\"5\" required><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"btn-primary form-submit\">\n Wy\u015blij wiadomo\u015b\u0107\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M22 2L11 13\"\/><path d=\"M22 2L15 22 11 13 2 9l20-7z\"\/><\/svg>\n <\/button>\n <p class=\"form-note\">Klikaj\u0105c \u201eWy\u015blij\" otworzysz sw\u00f3j klient pocztowy z gotow\u0105 wiadomo\u015bci\u0105 do <a href=\"\/cdn-cgi\/l\/email-protection\" class=\"__cf_email__\" data-cfemail=\"f59d9099999ab59480819a98948190db969c818c\">[email protected]<\/a><\/p>\n <\/form>\n\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"white-breather\" style=\"padding: 0 0 0;\"><div class=\"white-breather-line\"><\/div><\/div>\n\n<footer class=\"footer\">\n <div class=\"container\">\n <div class=\"footer__inner\">\n <div>\n <div class=\"footer__brand\">AutomateCity<\/div>\n <div class=\"footer__tagline\">AI i in\u017cynieria IT po stronie wymaga\u0144 biznesowych<\/div>\n <\/div>\n <ul class=\"footer__links\">\n <li><a href=\"#kontakt\">Kontakt<\/a><\/li>\n <li><a href=\"#o-firmie\">O firmie<\/a><\/li>\n <li><a href=\"#realizacje\">Realizacje<\/a><\/li>\n <li><a href=\"#\">Polityka prywatno\u015bci<\/a><\/li>\n <\/ul>\n <div class=\"footer__copy\">\n \u00a9 2026 AutomateCity. Wszelkie prawa zastrze\u017cone.\n <\/div>\n <\/div>\n <\/div>\n<\/footer>\n\n<script data-cfasync=\"false\" src=\"\/cdn-cgi\/scripts\/5c5dd728\/cloudflare-static\/email-decode.min.js\"><\/script><script data-cfasync=\"false\" src=\"\/cdn-cgi\/scripts\/5c5dd728\/cloudflare-static\/email-decode.min.js\"><\/script><script>\n\/\/ ---- Nav scroll behavior ----\nconst nav = document.getElementById('nav');\nconst scrollHandler = () => {\n nav.classList.toggle('scrolled', window.scrollY > 40);\n};\nwindow.addEventListener('scroll', scrollHandler, { passive: true });\n\n\/\/ ---- Mobile nav toggle ----\nconst burger = document.getElementById('burger');\nconst mobileNav = document.getElementById('mobile-nav');\nlet isOpen = false;\n\nburger.addEventListener('click', () => {\n isOpen = !isOpen;\n mobileNav.classList.toggle('open', isOpen);\n burger.setAttribute('aria-expanded', isOpen);\n \/\/ Animate burger\n const spans = burger.querySelectorAll('span');\n if (isOpen) {\n spans[0].style.transform = 'rotate(45deg) translate(4.5px, 4.5px)';\n spans[1].style.opacity = '0';\n spans[2].style.transform = 'rotate(-45deg) translate(4.5px, -4.5px)';\n } else {\n spans[0].style.transform = '';\n spans[1].style.opacity = '';\n spans[2].style.transform = '';\n }\n});\n\n\/\/ Close mobile nav on link click\nmobileNav.querySelectorAll('a').forEach(link => {\n link.addEventListener('click', () => {\n isOpen = false;\n mobileNav.classList.remove('open');\n const spans = burger.querySelectorAll('span');\n spans[0].style.transform = '';\n spans[1].style.opacity = '';\n spans[2].style.transform = '';\n });\n});\n\n\/\/ ---- Scroll reveal ----\nconst revealObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n}, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });\n\ndocument.querySelectorAll('.reveal').forEach(el => {\n revealObserver.observe(el);\n});\n\n\/\/ ---- Active nav link ----\nconst sections = document.querySelectorAll('section[id], div.photo-section');\nconst navLinks = document.querySelectorAll('.nav__links a');\n\nconst sectionObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n navLinks.forEach(link => {\n link.style.color = '';\n if (link.getAttribute('href') === '#' + entry.target.id) {\n link.style.color = 'var(--text-primary)';\n }\n });\n }\n });\n}, { threshold: 0.3 });\n\ndocument.querySelectorAll('section[id]').forEach(s => sectionObserver.observe(s));\n\n\/\/ ---- Subtle parallax on hero orbs ----\ndocument.addEventListener('mousemove', (e) => {\n const orbs = document.querySelectorAll('.hero__orb');\n const x = (e.clientX \/ window.innerWidth - 0.5) * 20;\n const y = (e.clientY \/ window.innerHeight - 0.5) * 20;\n orbs.forEach((orb, i) => {\n const factor = (i + 1) * 0.5;\n orb.style.transform = `translate(${x * factor}px, ${y * factor}px)`;\n });\n});\n\n\/\/ ---- Smooth anchor scroll ----\ndocument.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function(e) {\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n e.preventDefault();\n const offset = 80;\n const y = target.getBoundingClientRect().top + window.scrollY - offset;\n window.scrollTo({ top: y, behavior: 'smooth' });\n }\n });\n});\n\n\/\/ ---- Counter animation for hero metrics ----\nfunction animateCounter(el, target, duration = 1400) {\n const start = 0;\n const startTime = performance.now();\n const isDecimal = String(target).includes('.');\n \n function update(currentTime) {\n const elapsed = currentTime - startTime;\n const progress = Math.min(elapsed \/ duration, 1);\n const eased = 1 - Math.pow(1 - progress, 3);\n const current = Math.round(start + (target - start) * eased);\n el.textContent = isDecimal ? current.toFixed(1) : current;\n if (progress < 1) requestAnimationFrame(update);\n }\n requestAnimationFrame(update);\n}\n\n\n\n\/\/ ---- COUNT-UP ANIMATION ----\nfunction countUp(el, target, suffix) {\n const duration = 1600;\n const start = performance.now();\n function update(now) {\n const p = Math.min((now - start) \/ duration, 1);\n const ease = 1 - Math.pow(1 - p, 4);\n const val = Math.round(target * ease);\n el.textContent = val + (suffix || '');\n if (p < 1) requestAnimationFrame(update);\n }\n requestAnimationFrame(update);\n}\n\nconst countUpObs = new IntersectionObserver((entries) => {\n entries.forEach(e => {\n if (!e.isIntersecting) return;\n const el = e.target;\n const target = parseFloat(el.dataset.count);\n const suffix = el.dataset.suffix || '';\n countUp(el, target, suffix);\n countUpObs.unobserve(el);\n });\n}, { threshold: 0.5 });\n\ndocument.querySelectorAll('[data-count]').forEach(el => countUpObs.observe(el));\n\n\/\/ ---- BRANCH CARD MOUSE GLOW ----\ndocument.querySelectorAll('.branch-card').forEach(card => {\n card.addEventListener('mousemove', (e) => {\n const r = card.getBoundingClientRect();\n const x = ((e.clientX - r.left) \/ r.width * 100).toFixed(1);\n const y = ((e.clientY - r.top) \/ r.height * 100).toFixed(1);\n card.style.setProperty('--mx', x + '%');\n card.style.setProperty('--my', y + '%');\n });\n});\n\n\/\/ ---- STAGGERED REVEAL FOR GRIDS ----\nconst staggerObs = new IntersectionObserver((entries) => {\n entries.forEach(e => {\n if (!e.isIntersecting) return;\n const parent = e.target;\n const children = parent.querySelectorAll(':scope > *');\n children.forEach((child, i) => {\n child.style.opacity = '0';\n child.style.transform = 'translateY(28px)';\n setTimeout(() => {\n child.style.transition = 'opacity 0.55s ease, transform 0.55s ease';\n child.style.opacity = '1';\n child.style.transform = 'translateY(0)';\n }, i * 80);\n });\n staggerObs.unobserve(parent);\n });\n}, { threshold: 0.1 });\n\ndocument.querySelectorAll('.branches, .pillars-grid, .founders-grid, .process-steps').forEach(el => {\n staggerObs.observe(el);\n});\n\n\/\/ ---- SMOOTH ENTRANCE for hero content ----\ndocument.addEventListener('DOMContentLoaded', () => {\n document.querySelectorAll('.hero__content > *').forEach((el, i) => {\n el.style.opacity = '0';\n el.style.transform = 'translateY(24px)';\n setTimeout(() => {\n el.style.transition = 'opacity 0.7s ease, transform 0.7s ease';\n el.style.opacity = '1';\n el.style.transform = 'translateY(0)';\n }, 200 + i * 120);\n });\n});\n\n\/\/ ---- HERO SLIDESHOW ----\n(function() {\n const slides = document.querySelectorAll('.hero__slide');\n const dotsContainer = document.getElementById('slideDots');\n if (!slides.length || !dotsContainer) return;\n let current = 0;\n let timer;\n slides.forEach((_, i) => {\n const dot = document.createElement('div');\n dot.className = 'slide-dot' + (i === 0 ? ' active' : '');\n dot.addEventListener('click', () => goTo(i));\n dotsContainer.appendChild(dot);\n });\n function goTo(index) {\n slides[current].classList.remove('active');\n dotsContainer.children[current].classList.remove('active');\n current = index;\n slides[current].classList.add('active');\n dotsContainer.children[current].classList.add('active');\n clearInterval(timer);\n timer = setInterval(next, 5000);\n }\n function next() { goTo((current + 1) % slides.length); }\n timer = setInterval(next, 5000);\n})();\n\n\/\/ ---- TILT CARD EFFECT ----\ndocument.querySelectorAll('.pillar-card').forEach(card => {\n const shine = card.querySelector('.pillar-card-shine');\n card.addEventListener('mousemove', (e) => {\n const r = card.getBoundingClientRect();\n const x = e.clientX - r.left, y = e.clientY - r.top;\n const rotX = ((y - r.height\/2) \/ (r.height\/2)) * -7;\n const rotY = ((x - r.width\/2) \/ (r.width\/2)) * 9;\n card.style.transform = `perspective(900px) rotateX(${rotX}deg) rotateY(${rotY}deg) translateZ(6px)`;\n card.style.transition = 'transform 0.08s ease';\n if (shine) {\n shine.style.background = `radial-gradient(circle at ${(x\/r.width)*100}% ${(y\/r.height)*100}%, rgba(255,255,255,0.07) 0%, transparent 65%)`;\n shine.style.opacity = '1';\n }\n });\n card.addEventListener('mouseleave', () => {\n card.style.transform = 'perspective(900px) rotateX(0) rotateY(0) translateZ(0)';\n card.style.transition = 'transform 0.5s ease';\n if (shine) { shine.style.opacity = '0'; shine.style.background = ''; }\n });\n});\n\n\/\/ ---- ROBOT \/ AI SCAN CURSOR ----\n(function() {\n const canvas = document.getElementById('robot-canvas');\n if (!canvas) return;\n const ctx = canvas.getContext('2d');\n let W = canvas.width = window.innerWidth;\n let H = canvas.height = window.innerHeight;\n window.addEventListener('resize', () => { W = canvas.width = window.innerWidth; H = canvas.height = window.innerHeight; });\n let mx = W\/2, my = H\/2, angle = 0, trail = [];\n document.addEventListener('mousemove', e => {\n mx = e.clientX; my = e.clientY;\n trail.push({x: mx, y: my, age: 0});\n if (trail.length > 20) trail.shift();\n }, {passive: true});\n function draw() {\n ctx.clearRect(0, 0, W, H);\n const t = Date.now()\/1000;\n const pulse = Math.sin(t*3)*0.5+0.5;\n angle += 0.055;\n trail.forEach(pt => {\n pt.age += 0.07;\n const a = Math.max(0,(1-pt.age)*0.16);\n if(a<=0)return;\n ctx.beginPath(); ctx.arc(pt.x,pt.y,2.5*(1-pt.age),0,Math.PI*2);\n ctx.fillStyle=`rgba(0,212,255,${a})`; ctx.fill();\n });\n trail = trail.filter(p => p.age < 1);\n const R = 26 + pulse*3;\n for(let i=0;i<10;i++){\n const a0=(i\/10)*Math.PI*2+angle, a1=a0+(Math.PI*2\/10)*0.5;\n ctx.beginPath(); ctx.arc(mx,my,R,a0,a1);\n ctx.strokeStyle=`rgba(0,212,255,${0.22+Math.abs(Math.sin(a0+t*2))*0.45})`; ctx.lineWidth=1.5; ctx.stroke();\n }\n ctx.beginPath(); ctx.arc(mx,my,5,0,Math.PI*2);\n ctx.strokeStyle=`rgba(0,212,255,${0.55+pulse*0.35})`; ctx.lineWidth=1; ctx.stroke();\n ctx.beginPath(); ctx.arc(mx,my,2,0,Math.PI*2);\n ctx.fillStyle='rgba(0,212,255,0.9)'; ctx.fill();\n const g=8,ch=13;\n ctx.strokeStyle=`rgba(0,212,255,${0.3+pulse*0.2})`; ctx.lineWidth=1;\n [[0,-g,0,-g-ch],[0,g,0,g+ch],[-g,0,-g-ch,0],[g,0,g+ch,0]].forEach(([x1,y1,x2,y2])=>{\n ctx.beginPath(); ctx.moveTo(mx+x1,my+y1); ctx.lineTo(mx+x2,my+y2); ctx.stroke();\n });\n const sx=mx+Math.cos(angle*1.4)*(R+4), sy=my+Math.sin(angle*1.4)*(R+4);\n const grd=ctx.createLinearGradient(mx,my,sx,sy);\n grd.addColorStop(0,'rgba(0,212,255,0)'); grd.addColorStop(0.5,'rgba(0,212,255,0.16)'); grd.addColorStop(1,'rgba(0,212,255,0)');\n ctx.beginPath(); ctx.moveTo(mx,my); ctx.lineTo(sx,sy);\n ctx.strokeStyle=grd; ctx.lineWidth=2; ctx.stroke();\n const b=9,bg=R+9;\n ctx.strokeStyle=`rgba(0,212,255,${0.18+pulse*0.12})`; ctx.lineWidth=1;\n [[-1,-1],[1,-1],[-1,1],[1,1]].forEach(([sx2,sy2])=>{\n ctx.beginPath();\n ctx.moveTo(mx+sx2*(bg-b),my+sy2*bg); ctx.lineTo(mx+sx2*bg,my+sy2*bg); ctx.lineTo(mx+sx2*bg,my+sy2*(bg-b));\n ctx.stroke();\n });\n requestAnimationFrame(draw);\n }\n draw();\n})();\n\n\n\/\/ ---- METRIC BARS ANIMATION ----\nconst barObs = new IntersectionObserver((entries) => {\n entries.forEach(e => {\n if (!e.isIntersecting) return;\n \/\/ Animate bar\n const bar = e.target.querySelector('.metric-bar');\n if (bar) {\n const w = bar.dataset.width || 0;\n setTimeout(() => { bar.style.width = w + '%'; }, 120);\n }\n \/\/ Animate percent counter\n const pct = e.target.querySelector('.metric-percent[data-count]');\n if (pct) {\n const target = parseFloat(pct.dataset.count);\n const suffix = pct.dataset.suffix || '';\n const dur = 1400;\n const s = performance.now();\n function tick(now) {\n const p = Math.min((now - s) \/ dur, 1);\n const ease = 1 - Math.pow(1 - p, 3);\n pct.textContent = Math.round(target * ease) + suffix;\n if (p < 1) requestAnimationFrame(tick);\n }\n setTimeout(() => requestAnimationFrame(tick), 100);\n }\n \/\/ Animate big number\n const big = e.target.querySelector('.metrics-big[data-count]');\n if (big) {\n const target = parseFloat(big.dataset.count);\n const suffix = big.dataset.suffix || '';\n const dur = 1400;\n const s = performance.now();\n function tick2(now) {\n const p = Math.min((now - s) \/ dur, 1);\n const ease = 1 - Math.pow(1 - p, 3);\n big.textContent = Math.round(target * ease) + suffix;\n if (p < 1) requestAnimationFrame(tick2);\n }\n setTimeout(() => requestAnimationFrame(tick2), 100);\n }\n barObs.unobserve(e.target);\n });\n}, { threshold: 0.3 });\n\ndocument.querySelectorAll('.metric-card, .metrics-callout').forEach(el => barObs.observe(el));\n\n\n<\/script>\n<\/body>\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>AutomateCity \u2014 AI i in\u017cynieria IT po stronie wymaga\u0144 biznesowych AutomateCity O firmie Kompetencje Bran\u017ce Realizacje Wsp\u00f3\u0142praca Um\u00f3w rozmow\u0119 O firmie Kompetencje Bran\u017ce Realizacje Wsp\u00f3\u0142praca Um\u00f3w rozmow\u0119 \u2192 AI & In\u017cynieria IT dla biznesu AI i in\u017cynieria IT po stronie wymaga\u0144 biznesowych. Jeste\u015bmy praktykami z wieloletnim do\u015bwiadczeniem w budowie system\u00f3w AI i rozwi\u0105za\u0144 informatycznych dla […]<\/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-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/automate.city\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/automate.city\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/automate.city\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/automate.city\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/automate.city\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":7,"href":"https:\/\/automate.city\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":22,"href":"https:\/\/automate.city\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/22"}],"wp:attachment":[{"href":"https:\/\/automate.city\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}