{"id":6,"date":"2026-05-19T11:27:42","date_gmt":"2026-05-19T11:27:42","guid":{"rendered":"https:\/\/piximo.eu\/?page_id=6"},"modified":"2026-05-21T13:59:12","modified_gmt":"2026-05-21T13:59:12","slug":"elementor-6","status":"publish","type":"page","link":"https:\/\/piximo.eu\/","title":{"rendered":"Po\u010detna"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\npiximo \u2014 Digitalni studio \u00b7 powered by IMTAG<\/title>\r\n<meta name=\"description\" content=\"Tim koji koristi AI kao alat za br\u017eu i pristupa\u010dniju izradu web stranica, vizuala i kampanja. Vrhunska kvaliteta, ni\u017ea cijena.\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&family=Montserrat:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n TOKENS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n:root {\r\n --paper: #f5f3ee;\r\n --paper-2: #ebe8e0;\r\n --paper-3: #ffffff;\r\n --ink: #0a0a0a;\r\n --ink-2: #2a2a2a;\r\n --ink-3: #5a5a5a;\r\n --ink-4: #8a8a85;\r\n --rule: #d6d2c8;\r\n --blue: #2563eb;\r\n --blue-2: #1d4ed8;\r\n --blue-soft: rgba(37, 99, 235, 0.08);\r\n --font-display: 'Montserrat', sans-serif;\r\n --font-body: 'Poppins', sans-serif;\r\n --font-mono: 'JetBrains Mono', monospace;\r\n --container: 1320px;\r\n --gutter: 32px;\r\n}\r\n\r\n* { margin: 0; padding: 0; box-sizing: border-box; }\r\nhtml { scroll-behavior: smooth; }\r\n\r\nbody {\r\n background: var(--paper);\r\n color: var(--ink);\r\n font-family: var(--font-body);\r\n font-weight: 400;\r\n line-height: 1.55;\r\n overflow-x: hidden;\r\n -webkit-font-smoothing: antialiased;\r\n background-image:\r\n radial-gradient(at 20% 10%, rgba(255,255,255,0.5) 0, transparent 40%),\r\n radial-gradient(at 80% 80%, rgba(214,210,200,0.3) 0, transparent 50%);\r\n}\r\n\r\nimg { display: block; max-width: 100%; }\r\na { color: inherit; text-decoration: none; }\r\n\r\n.container {\r\n max-width: var(--container);\r\n margin: 0 auto;\r\n padding: 0 var(--gutter);\r\n}\r\n\r\n\/* mono label *\/\r\n.mono-label {\r\n font-family: var(--font-mono);\r\n font-size: 11px;\r\n font-weight: 500;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n color: var(--ink-3);\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n}\r\n\r\n.mono-label::before {\r\n content: '';\r\n width: 24px;\r\n height: 1px;\r\n background: var(--ink);\r\n}\r\n\r\n.mono-label.blue { color: var(--blue); }\r\n.mono-label.blue::before { background: var(--blue); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n HEADER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nheader {\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n background: rgba(245, 243, 238, 0.92);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n border-bottom: 1px solid var(--rule);\r\n}\r\n\r\n.header-inner {\r\n max-width: var(--container);\r\n margin: 0 auto;\r\n padding: 22px var(--gutter);\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 24px;\r\n}\r\n\r\n.logo { display: flex; align-items: center; gap: 14px; }\r\n.logo-icon { width: 40px; height: 40px; flex-shrink: 0; }\r\n\r\n.logo-wordmark {\r\n font-family: var(--font-display);\r\n font-weight: 800;\r\n font-size: 26px;\r\n letter-spacing: -0.5px;\r\n line-height: 1;\r\n}\r\n.logo-wordmark .px,\r\n.logo-wordmark .o { color: var(--ink); }\r\n.logo-wordmark .im { color: var(--blue); }\r\n\r\nnav.main-nav { display: flex; align-items: center; gap: 68px; }\r\n.main-nav a {\r\n font-family: var(--font-body);\r\n font-size: 14px;\r\n font-weight: 500;\r\n color: var(--ink-2);\r\n transition: color 0.2s;\r\n}\r\n.main-nav a:hover { color: var(--blue); }\r\n\r\n.btn {\r\n font-family: var(--font-display);\r\n font-weight: 600;\r\n font-size: 13px;\r\n padding: 12px 22px;\r\n background: var(--ink);\r\n color: var(--paper);\r\n border: 1px solid var(--ink);\r\n border-radius: 0;\r\n cursor: pointer;\r\n transition: all 0.25s ease;\r\n letter-spacing: 0.2px;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n}\r\n.btn:hover {\r\n background: var(--blue);\r\n border-color: var(--blue);\r\n transform: translate(-2px, -2px);\r\n box-shadow: 4px 4px 0 var(--ink);\r\n}\r\n.btn-outline {\r\n background: transparent;\r\n color: var(--ink);\r\n}\r\n.btn-outline:hover {\r\n background: var(--ink);\r\n color: var(--paper);\r\n box-shadow: 4px 4px 0 var(--blue);\r\n}\r\n.btn-arrow { width: 12px; height: 12px; transition: transform 0.25s; }\r\n.btn:hover .btn-arrow { transform: translateX(3px); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n HAMBURGER (sakriven na desktopu, vidljiv na mobitelu)\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.hamburger {\r\n display: none;\r\n background: transparent;\r\n border: 1px solid var(--ink);\r\n width: 44px;\r\n height: 44px;\r\n cursor: pointer;\r\n padding: 0;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n gap: 5px;\r\n transition: background 0.25s ease;\r\n flex-shrink: 0;\r\n}\r\n\r\n.hamburger:hover { background: var(--ink); }\r\n.hamburger:hover span { background: var(--paper); }\r\n\r\n.hamburger span {\r\n display: block;\r\n width: 20px;\r\n height: 2px;\r\n background: var(--ink);\r\n transition: all 0.3s ease;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n MOBILE DROPDOWN MENU \u2014 rolla se ispod headera\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.mobile-menu {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: var(--paper);\r\n z-index: 90; \/* ispod headera (header je 100) *\/\r\n padding: 110px var(--gutter) 40px;\r\n display: flex;\r\n flex-direction: column;\r\n max-height: 100vh;\r\n overflow-y: auto;\r\n transform: translateY(-100%);\r\n transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);\r\n pointer-events: none;\r\n}\r\n\/* kad je meni otvoren, header mora biti iznad menija da hamburger ostane klikabilan *\/\r\nbody.menu-open header {\r\n z-index: 120;\r\n}\r\n\r\n.mobile-menu::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background-image:\r\n linear-gradient(rgba(10,10,10,0.04) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(10,10,10,0.04) 1px, transparent 1px);\r\n background-size: 48px 48px;\r\n pointer-events: none;\r\n}\r\n\r\n.mobile-menu.open {\r\n transform: translateY(0);\r\n pointer-events: auto;\r\n}\r\n\r\n\/* zatvaranje sad nije vi\u0161e potrebno - hamburger se mijenja u X *\/\r\n.mobile-close { display: none; }\r\n\r\n.mobile-nav {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 32px;\r\n position: relative;\r\n z-index: 1;\r\n padding-top: 20px;\r\n border-top: 1px solid var(--rule);\r\n}\r\n\r\n.mobile-nav a {\r\n font-family: var(--font-mono);\r\n font-size: 16px;\r\n font-weight: 500;\r\n letter-spacing: 2.5px;\r\n text-transform: uppercase;\r\n color: var(--ink);\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 14px;\r\n transition: color 0.2s ease;\r\n opacity: 0;\r\n transform: translateX(-20px);\r\n}\r\n\r\n.mobile-nav a::before {\r\n content: '';\r\n width: 24px;\r\n height: 1px;\r\n background: var(--blue);\r\n transition: width 0.25s ease;\r\n}\r\n\r\n.mobile-nav a:hover { color: var(--blue); }\r\n.mobile-nav a:hover::before { width: 40px; }\r\n\r\n.mobile-menu.open .mobile-nav a {\r\n animation: slideInLeft 0.4s ease forwards;\r\n}\r\n\r\n.mobile-menu.open .mobile-nav a:nth-child(1) { animation-delay: 0.20s; }\r\n.mobile-menu.open .mobile-nav a:nth-child(2) { animation-delay: 0.27s; }\r\n.mobile-menu.open .mobile-nav a:nth-child(3) { animation-delay: 0.34s; }\r\n.mobile-menu.open .mobile-nav a:nth-child(4) { animation-delay: 0.41s; }\r\n.mobile-menu.open .mobile-nav a:nth-child(5) { animation-delay: 0.48s; }\r\n\r\n@keyframes slideInLeft {\r\n to { opacity: 1; transform: translateX(0); }\r\n}\r\n\r\n.mobile-menu-footer {\r\n padding-top: 32px;\r\n margin-top: 32px;\r\n border-top: 1px solid var(--rule);\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n position: relative;\r\n z-index: 1;\r\n opacity: 0;\r\n transform: translateY(10px);\r\n transition: opacity 0.4s ease 0.5s, transform 0.4s ease 0.5s;\r\n}\r\n\r\n.mobile-menu.open .mobile-menu-footer {\r\n opacity: 1;\r\n transform: translateY(0);\r\n}\r\n\r\n.mobile-menu-footer .btn {\r\n width: 100%;\r\n justify-content: center;\r\n padding: 16px;\r\n}\r\n\r\n\/* hamburger \u2192 X transformacija *\/\r\n.hamburger span {\r\n display: block;\r\n width: 20px;\r\n height: 2px;\r\n background: var(--ink);\r\n transition: all 0.35s cubic-bezier(0.65, 0, 0.35, 1);\r\n transform-origin: center;\r\n}\r\n\r\n.hamburger.active span:nth-child(1) {\r\n transform: translateY(7px) rotate(45deg);\r\n}\r\n.hamburger.active span:nth-child(2) {\r\n opacity: 0;\r\n transform: scale(0);\r\n}\r\n.hamburger.active span:nth-child(3) {\r\n transform: translateY(-7px) rotate(-45deg);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n HERO\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.hero {\r\n padding: 35px 0 80px;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.hero::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background-image:\r\n linear-gradient(rgba(10,10,10,0.03) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(10,10,10,0.03) 1px, transparent 1px);\r\n background-size: 48px 48px;\r\n pointer-events: none;\r\n z-index: 0;\r\n mask-image: linear-gradient(180deg, black 60%, transparent 100%);\r\n -webkit-mask-image: linear-gradient(180deg, black 60%, transparent 100%);\r\n}\r\n\r\n.hero .container { position: relative; }\r\n\r\n.hero-top {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n margin-bottom: 50px;\r\n flex-wrap: wrap;\r\n gap: 16px;\r\n}\r\n\r\n.hero-meta { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }\r\n\r\n.hero-meta span {\r\n font-family: var(--font-mono);\r\n font-size: 11px;\r\n letter-spacing: 1px;\r\n color: var(--ink-3);\r\n}\r\n\r\n.hero-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 380px;\r\n gap: 80px;\r\n align-items: end;\r\n}\r\n\r\n.hero h1 {\r\n font-family: var(--font-display);\r\n font-weight: 900;\r\n font-size: clamp(56px, 9vw, 144px);\r\n line-height: 0.92;\r\n letter-spacing: -4px;\r\n}\r\n\r\n.hero h1 .line-1 { display: block; }\r\n.hero h1 .line-2 { display: block; font-style: italic; font-weight: 400; }\r\n.hero h1 .line-3 { display: block; color: var(--blue); }\r\n\r\n.hero h1 .underline-anim { position: relative; display: inline-block; }\r\n.hero h1 .underline-anim::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 4px;\r\n left: -4px;\r\n right: -4px;\r\n height: 18px;\r\n background: var(--blue);\r\n opacity: 0.28;\r\n z-index: -1;\r\n transform-origin: left center;\r\n transform: scaleX(0) skewX(-2deg);\r\n border-radius: 4px 8px 6px 10px \/ 8px 4px 10px 6px;\r\n animation: marker-stroke 0.9s cubic-bezier(0.65, 0.05, 0.36, 1) 0.4s forwards;\r\n}\r\n\r\n@keyframes marker-stroke {\r\n 0% { transform: scaleX(0) skewX(-2deg); }\r\n 60% { transform: scaleX(1.04) skewX(-2deg); }\r\n 100% { transform: scaleX(1) skewX(-2deg); }\r\n}\r\n\r\n.hero h1 .piximo-type {\r\n display: block;\r\n color: var(--ink);\r\n min-height: 1.05em;\r\n position: relative;\r\n}\r\n.hero h1 .piximo-type .ch {\r\n display: inline-block;\r\n opacity: 0;\r\n animation: ch-in 0.001s linear forwards;\r\n}\r\n.hero h1 .piximo-type .ch.blue { color: var(--blue); }\r\n.hero h1 .piximo-type .caret {\r\n display: inline-block;\r\n width: 0.06em;\r\n height: 0.78em;\r\n background: var(--blue);\r\n vertical-align: -0.05em;\r\n margin-left: 0.04em;\r\n animation: blink 0.7s step-end infinite;\r\n}\r\n.hero h1 .piximo-type .caret.done {\r\n animation: blink 0.7s step-end 6, fade-out 0.4s ease 4.2s forwards;\r\n}\r\n\r\n@keyframes ch-in { to { opacity: 1; } }\r\n@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }\r\n@keyframes fade-out { to { opacity: 0; visibility: hidden; } }\r\n\r\n.hero-side { padding-bottom: 8px; }\r\n\r\n.hero-side p {\r\n font-size: 16px;\r\n line-height: 1.6;\r\n color: var(--ink-2);\r\n margin-bottom: 24px;\r\n}\r\n\r\n.hero-side .ctas { display: flex; gap: 10px; flex-wrap: wrap; }\r\n\r\n.hero-side .friendly-note {\r\n font-family: var(--font-mono);\r\n font-size: 12px;\r\n color: var(--blue);\r\n margin-top: 14px;\r\n margin-bottom: 0;\r\n letter-spacing: 0.2px;\r\n font-style: italic;\r\n opacity: 0;\r\n animation: fadeInNote 0.6s ease 0.8s forwards;\r\n}\r\n\r\n@keyframes fadeInNote {\r\n from { opacity: 0; transform: translateY(4px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n.hero-bottom {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n margin-top: 80px;\r\n border-top: 2px solid var(--ink);\r\n border-bottom: 1px solid var(--rule);\r\n}\r\n\r\n.hero-info {\r\n padding: 24px 24px 24px 0;\r\n border-right: 1px solid var(--rule);\r\n}\r\n\r\n.hero-info:last-child { border-right: none; }\r\n.hero-info:not(:first-child) { padding-left: 24px; }\r\n\r\n.hero-info .label {\r\n font-family: var(--font-mono);\r\n font-size: 10px;\r\n letter-spacing: 1.5px;\r\n color: var(--ink-3);\r\n text-transform: uppercase;\r\n margin-bottom: 6px;\r\n}\r\n\r\n.hero-info .value {\r\n font-family: var(--font-display);\r\n font-weight: 700;\r\n font-size: 22px;\r\n letter-spacing: -0.5px;\r\n line-height: 1.15;\r\n}\r\n\r\n.hero-info .value .accent { color: var(--blue); }\r\n\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n MARQUEE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.marquee {\r\n border-top: 1px solid var(--rule);\r\n border-bottom: 1px solid var(--rule);\r\n background: var(--ink);\r\n color: var(--paper);\r\n overflow: hidden;\r\n padding: 18px 0;\r\n}\r\n\r\n.marquee-track {\r\n display: flex;\r\n gap: 50px;\r\n width: max-content;\r\n animation: scroll 30s linear infinite;\r\n}\r\n\r\n@keyframes scroll {\r\n from { transform: translateX(0); }\r\n to { transform: translateX(-50%); }\r\n}\r\n\r\n.marquee-item {\r\n font-family: var(--font-display);\r\n font-weight: 600;\r\n font-size: 18px;\r\n letter-spacing: -0.3px;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 14px;\r\n white-space: nowrap;\r\n}\r\n\r\n.marquee-dot {\r\n width: 8px;\r\n height: 8px;\r\n background: var(--blue);\r\n border-radius: 50%;\r\n flex-shrink: 0;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n APPROACH\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.approach { padding: 140px 0; }\r\n\r\n.approach-header {\r\n display: grid;\r\n grid-template-columns: 1fr 1.5fr;\r\n gap: 80px;\r\n margin-bottom: 80px;\r\n align-items: start;\r\n}\r\n\r\n.approach-header h2 {\r\n font-family: var(--font-display);\r\n font-weight: 800;\r\n font-size: clamp(40px, 5vw, 64px);\r\n line-height: 0.95;\r\n letter-spacing: -2.5px;\r\n margin-top: 18px;\r\n}\r\n\r\n.approach-header h2 em {\r\n font-style: italic;\r\n font-weight: 400;\r\n color: var(--blue);\r\n}\r\n\r\n.approach-header .lead {\r\n font-size: 17px;\r\n line-height: 1.6;\r\n color: var(--ink-2);\r\n border-left: 2px solid var(--blue);\r\n padding-left: 22px;\r\n}\r\n\r\n.agents-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n border-top: 2px solid var(--ink);\r\n border-bottom: 2px solid var(--ink);\r\n}\r\n\r\n.agent {\r\n padding: 36px 28px;\r\n border-right: 1px solid var(--rule);\r\n background: var(--paper);\r\n transition: background 0.3s ease;\r\n cursor: pointer;\r\n}\r\n\r\n.agent:last-child { border-right: none; }\r\n\r\n.agent:hover { background: var(--ink); color: var(--paper); }\r\n.agent:hover .agent-num { color: var(--blue); }\r\n.agent:hover .agent-role { color: var(--paper); opacity: 0.6; }\r\n.agent:hover .agent-status { color: var(--blue); }\r\n\r\n.agent-num {\r\n font-family: var(--font-mono);\r\n font-size: 11px;\r\n letter-spacing: 1.5px;\r\n color: var(--ink-4);\r\n margin-bottom: 36px;\r\n display: block;\r\n transition: color 0.3s;\r\n}\r\n\r\n.agent-name {\r\n font-family: var(--font-display);\r\n font-weight: 800;\r\n font-size: 28px;\r\n letter-spacing: -1px;\r\n line-height: 1;\r\n margin-bottom: 8px;\r\n}\r\n\r\n.agent-role {\r\n font-size: 13px;\r\n color: var(--ink-3);\r\n margin-bottom: 28px;\r\n transition: color 0.3s;\r\n}\r\n\r\n.agent-status {\r\n font-family: var(--font-mono);\r\n font-size: 11px;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n color: var(--blue);\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.agent-status::before {\r\n content: '';\r\n width: 7px;\r\n height: 7px;\r\n background: var(--blue);\r\n border-radius: 50%;\r\n animation: pulse 2s ease-in-out infinite;\r\n}\r\n\r\n@keyframes pulse {\r\n 0%, 100% { opacity: 1; }\r\n 50% { opacity: 0.3; }\r\n}\r\n\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SERVICES\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.services {\r\n padding: 140px 0;\r\n background: var(--paper-2);\r\n border-top: 2px solid var(--ink);\r\n border-bottom: 2px solid var(--ink);\r\n position: relative;\r\n}\r\n\r\n.services::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background-image:\r\n linear-gradient(rgba(10,10,10,0.03) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(10,10,10,0.03) 1px, transparent 1px);\r\n background-size: 48px 48px;\r\n pointer-events: none;\r\n}\r\n\r\n.services .container { position: relative; }\r\n\r\n.services-header {\r\n display: grid;\r\n grid-template-columns: 1fr 1.4fr;\r\n gap: 80px;\r\n margin-bottom: 70px;\r\n align-items: end;\r\n}\r\n\r\n.services-header h2 {\r\n font-family: var(--font-display);\r\n font-weight: 800;\r\n font-size: clamp(40px, 5vw, 64px);\r\n line-height: 0.95;\r\n letter-spacing: -2.5px;\r\n margin-top: 14px;\r\n}\r\n\r\n.services-header h2 .blue { color: var(--blue); }\r\n\r\n.services-header .desc {\r\n font-size: 16px;\r\n line-height: 1.65;\r\n color: var(--ink-2);\r\n}\r\n\r\n.pricing-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 24px;\r\n}\r\n\r\n.price-card {\r\n background: var(--paper);\r\n border: 1px solid var(--ink);\r\n padding: 36px 32px;\r\n display: flex;\r\n flex-direction: column;\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.price-card:hover {\r\n transform: translate(-4px, -4px);\r\n box-shadow: 8px 8px 0 var(--ink);\r\n}\r\n\r\n.price-card.featured { background: var(--ink); color: var(--paper); }\r\n.price-card.featured:hover { box-shadow: 8px 8px 0 var(--blue); }\r\n\r\n.price-num {\r\n font-family: var(--font-mono);\r\n font-size: 11px;\r\n letter-spacing: 1.5px;\r\n color: var(--ink-4);\r\n margin-bottom: 24px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n\r\n.price-card.featured .price-num { color: rgba(245,243,238,0.5); }\r\n\r\n.featured-tag {\r\n background: var(--blue);\r\n color: white !important;\r\n font-family: var(--font-display);\r\n font-weight: 700;\r\n font-size: 10px;\r\n letter-spacing: 1.5px;\r\n padding: 4px 10px;\r\n text-transform: uppercase;\r\n}\r\n\r\n.price-card h3 {\r\n font-family: var(--font-display);\r\n font-weight: 800;\r\n font-size: 32px;\r\n letter-spacing: -1.2px;\r\n line-height: 1;\r\n margin-bottom: 12px;\r\n}\r\n\r\n.price-card .price-desc {\r\n font-size: 14px;\r\n line-height: 1.55;\r\n color: var(--ink-3);\r\n margin-bottom: 32px;\r\n min-height: 64px;\r\n}\r\n\r\n.price-card.featured .price-desc { color: rgba(245,243,238,0.65); }\r\n\r\n.price-amount-row {\r\n display: flex;\r\n align-items: baseline;\r\n gap: 6px;\r\n margin-bottom: 6px;\r\n padding-bottom: 24px;\r\n border-bottom: 1px solid var(--rule);\r\n}\r\n\r\n.price-card.featured .price-amount-row { border-color: rgba(245,243,238,0.15); }\r\n\r\n.price-amount-row .amount {\r\n font-family: var(--font-display);\r\n font-weight: 900;\r\n font-size: 56px;\r\n letter-spacing: -3px;\r\n line-height: 1;\r\n color: var(--blue);\r\n}\r\n\r\n.price-amount-row .currency {\r\n font-family: var(--font-display);\r\n font-weight: 600;\r\n font-size: 18px;\r\n color: var(--ink-3);\r\n}\r\n\r\n.price-card.featured .price-amount-row .currency { color: rgba(245,243,238,0.5); }\r\n\r\n.price-amount-row .period {\r\n font-family: var(--font-mono);\r\n font-size: 11px;\r\n letter-spacing: 1px;\r\n color: var(--ink-4);\r\n margin-left: auto;\r\n}\r\n\r\n.price-card.featured .price-amount-row .period { color: rgba(245,243,238,0.5); }\r\n\r\n.price-features {\r\n list-style: none;\r\n margin: 28px 0 32px;\r\n flex: 1;\r\n}\r\n\r\n.price-features li {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 12px;\r\n font-size: 14px;\r\n line-height: 1.5;\r\n padding: 9px 0;\r\n border-bottom: 1px dashed var(--rule);\r\n}\r\n\r\n.price-card.featured .price-features li { border-color: rgba(245,243,238,0.1); }\r\n.price-features li:last-child { border-bottom: none; }\r\n\r\n.feature-bullet {\r\n width: 16px;\r\n height: 16px;\r\n flex-shrink: 0;\r\n margin-top: 2px;\r\n position: relative;\r\n}\r\n\r\n.feature-bullet::before {\r\n content: '';\r\n position: absolute;\r\n inset: 4px;\r\n background: var(--blue);\r\n border-radius: 1px;\r\n}\r\n\r\n.price-cta {\r\n width: 100%;\r\n padding: 16px;\r\n background: var(--paper);\r\n border: 1px solid var(--ink);\r\n color: var(--ink);\r\n font-family: var(--font-display);\r\n font-weight: 600;\r\n font-size: 14px;\r\n cursor: pointer;\r\n transition: all 0.25s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n}\r\n\r\n.price-card.featured .price-cta {\r\n background: var(--blue);\r\n border-color: var(--blue);\r\n color: white;\r\n}\r\n\r\n.price-cta:hover { background: var(--ink); color: var(--paper); }\r\n\r\n.price-card.featured .price-cta:hover {\r\n background: var(--paper);\r\n color: var(--ink);\r\n border-color: var(--paper);\r\n}\r\n\r\n.price-cta-arrow { transition: transform 0.25s; font-size: 18px; }\r\n.price-cta:hover .price-cta-arrow { transform: translateX(4px); }\r\n\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n ADD-ONS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.addons { padding: 140px 0; }\r\n\r\n.addons-header {\r\n display: grid;\r\n grid-template-columns: 1fr 1.4fr;\r\n gap: 80px;\r\n margin-bottom: 60px;\r\n align-items: end;\r\n}\r\n\r\n.addons-header h2 {\r\n font-family: var(--font-display);\r\n font-weight: 800;\r\n font-size: clamp(36px, 4.5vw, 56px);\r\n line-height: 0.95;\r\n letter-spacing: -2px;\r\n margin-top: 14px;\r\n}\r\n\r\n.addons-header .desc {\r\n font-size: 16px;\r\n line-height: 1.65;\r\n color: var(--ink-2);\r\n}\r\n\r\n.addons-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n border-top: 2px solid var(--ink);\r\n}\r\n\r\n.addon {\r\n padding: 32px 24px;\r\n border-right: 1px solid var(--rule);\r\n border-bottom: 1px solid var(--rule);\r\n display: flex;\r\n flex-direction: column;\r\n transition: background 0.3s;\r\n cursor: pointer;\r\n background: var(--paper);\r\n}\r\n\r\n.addon:hover { background: var(--paper-3); }\r\n.addon:nth-child(4n) { border-right: none; }\r\n\r\n.addon-num {\r\n font-family: var(--font-mono);\r\n font-size: 10px;\r\n letter-spacing: 1.5px;\r\n color: var(--ink-4);\r\n margin-bottom: 24px;\r\n}\r\n\r\n.addon h4 {\r\n font-family: var(--font-display);\r\n font-weight: 700;\r\n font-size: 20px;\r\n letter-spacing: -0.5px;\r\n line-height: 1.15;\r\n margin-bottom: 10px;\r\n}\r\n\r\n.addon p {\r\n font-size: 13px;\r\n line-height: 1.55;\r\n color: var(--ink-3);\r\n margin-bottom: 28px;\r\n flex: 1;\r\n}\r\n\r\n.addon-price {\r\n display: flex;\r\n align-items: baseline;\r\n gap: 6px;\r\n padding-top: 16px;\r\n border-top: 1px dashed var(--rule);\r\n}\r\n\r\n.addon-price .from {\r\n font-family: var(--font-mono);\r\n font-size: 10px;\r\n letter-spacing: 1.5px;\r\n color: var(--ink-4);\r\n text-transform: uppercase;\r\n}\r\n\r\n.addon-price .amt {\r\n font-family: var(--font-display);\r\n font-weight: 800;\r\n font-size: 22px;\r\n color: var(--blue);\r\n letter-spacing: -0.5px;\r\n}\r\n\r\n.addon-price .unit {\r\n font-family: var(--font-mono);\r\n font-size: 11px;\r\n color: var(--ink-4);\r\n}\r\n\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n PROCESS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.process {\r\n padding: 140px 0;\r\n background: var(--ink);\r\n color: var(--paper);\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.process::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background-image:\r\n linear-gradient(rgba(245,243,238,0.04) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(245,243,238,0.04) 1px, transparent 1px);\r\n background-size: 48px 48px;\r\n pointer-events: none;\r\n}\r\n\r\n.process .container { position: relative; }\r\n\r\n.process-header {\r\n display: grid;\r\n grid-template-columns: 1fr 1.2fr;\r\n gap: 80px;\r\n margin-bottom: 80px;\r\n align-items: end;\r\n}\r\n\r\n.process-header h2 {\r\n font-family: var(--font-display);\r\n font-weight: 800;\r\n font-size: clamp(40px, 5vw, 64px);\r\n line-height: 0.95;\r\n letter-spacing: -2.5px;\r\n margin-top: 14px;\r\n}\r\n\r\n.process-header h2 em { font-style: italic; font-weight: 400; color: var(--blue); }\r\n\r\n.process-header .desc { font-size: 16px; line-height: 1.65; opacity: 0.7; }\r\n\r\n.process-header .mono-label { color: var(--blue); }\r\n.process-header .mono-label::before { background: var(--blue); }\r\n\r\n.steps {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n border-top: 1px solid rgba(245,243,238,0.15);\r\n}\r\n\r\n.step {\r\n padding: 50px 32px 50px 0;\r\n border-right: 1px solid rgba(245,243,238,0.15);\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.step:hover .step-num {\r\n -webkit-text-fill-color: var(--blue);\r\n transform: translateY(-4px);\r\n}\r\n\r\n.step:last-child { border-right: none; }\r\n.step:not(:first-child) { padding-left: 32px; }\r\n\r\n.step-num {\r\n font-family: var(--font-display);\r\n font-weight: 900;\r\n font-size: 96px;\r\n letter-spacing: -4px;\r\n line-height: 1;\r\n margin-bottom: 32px;\r\n -webkit-text-stroke: 1.5px var(--paper);\r\n -webkit-text-fill-color: transparent;\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.step h4 {\r\n font-family: var(--font-display);\r\n font-weight: 700;\r\n font-size: 22px;\r\n letter-spacing: -0.5px;\r\n margin-bottom: 12px;\r\n}\r\n\r\n.step p {\r\n font-size: 14px;\r\n line-height: 1.6;\r\n opacity: 0.65;\r\n}\r\n\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n TESTIMONIALS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.testimonials { padding: 140px 0; }\r\n\r\n.testimonials-header {\r\n display: grid;\r\n grid-template-columns: 1fr 1.5fr;\r\n gap: 80px;\r\n margin-bottom: 80px;\r\n align-items: end;\r\n}\r\n\r\n.testimonials-header h2 {\r\n font-family: var(--font-display);\r\n font-weight: 800;\r\n font-size: clamp(40px, 5vw, 64px);\r\n line-height: 0.95;\r\n letter-spacing: -2.5px;\r\n margin-top: 14px;\r\n}\r\n\r\n.testimonials-header h2 em { font-style: italic; font-weight: 400; color: var(--blue); }\r\n.testimonials-header .desc { font-size: 16px; line-height: 1.65; color: var(--ink-2); }\r\n\r\n.testimonials-grid {\r\n display: grid;\r\n grid-template-columns: repeat(12, 1fr);\r\n gap: 32px;\r\n}\r\n\r\n.testimonial {\r\n background: var(--paper);\r\n border: 1px solid var(--ink);\r\n padding: 40px 36px;\r\n display: flex;\r\n flex-direction: column;\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.testimonial:hover {\r\n transform: translate(-3px, -3px);\r\n box-shadow: 6px 6px 0 var(--ink);\r\n}\r\n\r\n.testimonial:nth-child(1) { grid-column: span 5; }\r\n.testimonial:nth-child(2) { grid-column: span 4; }\r\n.testimonial:nth-child(3) { grid-column: span 3; }\r\n\r\n.big-quote {\r\n font-family: var(--font-display);\r\n font-weight: 900;\r\n font-size: 90px;\r\n line-height: 0.6;\r\n color: var(--blue);\r\n height: 32px;\r\n}\r\n\r\n.testimonial blockquote {\r\n font-family: var(--font-display);\r\n font-weight: 500;\r\n font-size: 19px;\r\n line-height: 1.4;\r\n letter-spacing: -0.3px;\r\n margin: 24px 0 32px;\r\n flex: 1;\r\n color: var(--ink);\r\n}\r\n\r\n.testimonial:nth-child(3) blockquote { font-size: 16px; }\r\n\r\n.testimonial-meta {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding-top: 24px;\r\n border-top: 1px solid var(--rule);\r\n}\r\n\r\n.author-block .name {\r\n font-family: var(--font-display);\r\n font-weight: 700;\r\n font-size: 14px;\r\n margin-bottom: 2px;\r\n}\r\n\r\n.author-block .role {\r\n font-family: var(--font-mono);\r\n font-size: 11px;\r\n color: var(--ink-4);\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.stars {\r\n display: flex;\r\n gap: 2px;\r\n color: var(--blue);\r\n}\r\n\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n STATS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.stats {\r\n padding: 100px 0;\r\n background: var(--paper-2);\r\n border-top: 2px solid var(--ink);\r\n border-bottom: 2px solid var(--ink);\r\n}\r\n\r\n.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }\r\n\r\n.stat { padding: 0 32px; border-right: 1px solid var(--rule); }\r\n.stat:first-child { padding-left: 0; }\r\n.stat:last-child { border-right: none; padding-right: 0; }\r\n\r\n.stat-num {\r\n font-family: var(--font-display);\r\n font-weight: 900;\r\n font-size: clamp(60px, 7vw, 96px);\r\n line-height: 0.9;\r\n letter-spacing: -3.5px;\r\n color: var(--ink);\r\n margin-bottom: 14px;\r\n display: flex;\r\n align-items: baseline;\r\n gap: 4px;\r\n}\r\n\r\n.stat-num .unit {\r\n font-family: var(--font-mono);\r\n font-size: 18px;\r\n font-weight: 500;\r\n color: var(--blue);\r\n letter-spacing: 0;\r\n}\r\n\r\n.stat-label {\r\n font-family: var(--font-mono);\r\n font-size: 11px;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n color: var(--ink-3);\r\n line-height: 1.4;\r\n max-width: 180px;\r\n}\r\n\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n FINAL CTA\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.final-cta { padding: 160px 0; position: relative; overflow: hidden; }\r\n\r\n.final-cta::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background-image:\r\n linear-gradient(rgba(10,10,10,0.04) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(10,10,10,0.04) 1px, transparent 1px);\r\n background-size: 48px 48px;\r\n pointer-events: none;\r\n}\r\n\r\n.final-cta-content {\r\n position: relative;\r\n display: grid;\r\n grid-template-columns: 1.5fr 1fr;\r\n gap: 80px;\r\n align-items: end;\r\n}\r\n\r\n.final-cta h2 {\r\n font-family: var(--font-display);\r\n font-weight: 900;\r\n font-size: clamp(48px, 8vw, 128px);\r\n line-height: 0.88;\r\n letter-spacing: -4px;\r\n}\r\n\r\n.final-cta h2 em { font-style: italic; font-weight: 400; color: var(--blue); }\r\n\r\n.final-cta .right-side { padding-bottom: 12px; }\r\n\r\n.final-cta .right-side p {\r\n font-size: 16px;\r\n line-height: 1.65;\r\n color: var(--ink-2);\r\n margin-bottom: 28px;\r\n border-left: 2px solid var(--blue);\r\n padding-left: 20px;\r\n}\r\n\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n FOOTER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfooter { background: var(--ink); color: var(--paper); padding: 80px 0 30px; }\r\n\r\n.footer-top {\r\n display: grid;\r\n grid-template-columns: 2fr 1fr 1fr 1fr;\r\n gap: 60px;\r\n padding-bottom: 60px;\r\n border-bottom: 1px solid rgba(245,243,238,0.15);\r\n margin-bottom: 30px;\r\n}\r\n\r\n.footer-brand .footer-logo {\r\n display: flex;\r\n align-items: center;\r\n gap: 14px;\r\n margin-bottom: 20px;\r\n}\r\n\r\n.footer-brand .footer-logo img { width: 36px; height: 36px; }\r\n.footer-brand .logo-wordmark .px,\r\n.footer-brand .logo-wordmark .o { color: var(--paper); }\r\n\r\n.footer-tag {\r\n font-size: 14px;\r\n line-height: 1.6;\r\n opacity: 0.7;\r\n max-width: 360px;\r\n margin-bottom: 24px;\r\n}\r\n\r\n.powered-by-tag {\r\n font-family: var(--font-mono);\r\n font-size: 11px;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n opacity: 0.5;\r\n}\r\n\r\n.powered-by-tag .imtag { color: var(--blue); opacity: 1; }\r\n\r\n.footer-col h5 {\r\n font-family: var(--font-display);\r\n font-weight: 700;\r\n font-size: 13px;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n margin-bottom: 20px;\r\n color: var(--blue);\r\n}\r\n\r\n.footer-col ul {\r\n list-style: none;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n}\r\n\r\n.footer-col a {\r\n font-size: 14px;\r\n opacity: 0.7;\r\n transition: all 0.2s;\r\n}\r\n\r\n.footer-col a:hover { opacity: 1; color: var(--blue); }\r\n\r\n.footer-bottom {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n font-family: var(--font-mono);\r\n font-size: 11px;\r\n letter-spacing: 1px;\r\n opacity: 0.5;\r\n text-transform: uppercase;\r\n}\r\n\r\n.footer-bottom a { margin-left: 20px; transition: opacity 0.2s; }\r\n.footer-bottom a:hover { opacity: 1; }\r\n\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESPONSIVE \u2014 TABLET\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media (max-width: 1100px) {\r\n .hero-grid { grid-template-columns: 1fr; gap: 40px; }\r\n .hero-side { padding-bottom: 0; }\r\n .hero-bottom { grid-template-columns: repeat(2, 1fr); }\r\n .hero-info { padding: 20px !important; border-bottom: 1px solid var(--rule); }\r\n .hero-info:nth-child(2n) { border-right: none; }\r\n .agents-grid { grid-template-columns: repeat(2, 1fr); }\r\n .agent:nth-child(2n) { border-right: none; }\r\n .agent:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }\r\n .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }\r\n .addons-grid { grid-template-columns: repeat(2, 1fr); }\r\n .addon:nth-child(2n) { border-right: none; }\r\n .steps { grid-template-columns: repeat(2, 1fr); }\r\n .step:nth-child(2n) { border-right: none; }\r\n .step:nth-child(-n+2) { border-bottom: 1px solid rgba(245,243,238,0.15); }\r\n .testimonials-grid { grid-template-columns: 1fr; gap: 24px; }\r\n .testimonial { grid-column: span 12 !important; }\r\n .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }\r\n .stat { padding: 0 20px !important; border-bottom: 1px solid var(--rule); padding-bottom: 30px !important; }\r\n .stat:nth-child(2n) { border-right: none; }\r\n .stat:nth-child(n+3) { border-bottom: none; padding-top: 30px !important; padding-bottom: 0 !important; }\r\n .approach-header, .services-header, .addons-header, .process-header, .testimonials-header, .final-cta-content {\r\n grid-template-columns: 1fr;\r\n gap: 24px;\r\n }\r\n .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESPONSIVE \u2014 MOBILE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media (max-width: 900px) {\r\n \/* na mobitelu: sakri desktop nav i CTA gumb u headeru *\/\r\n .main-nav { display: none !important; }\r\n .header-inner > .btn { display: none !important; }\r\n \/* prika\u017ei hamburger *\/\r\n .hamburger { display: flex !important; }\r\n}\r\n\r\n@media (max-width: 700px) {\r\n :root { --gutter: 20px; }\r\n .hero { padding: 25px 0 50px; }\r\n .hero-top { flex-direction: column; align-items: flex-start; gap: 16px; }\r\n .approach, .services, .addons, .process, .testimonials, .final-cta { padding: 80px 0; }\r\n .stats { padding: 60px 0; }\r\n .agents-grid { grid-template-columns: 1fr; }\r\n .agent { border-right: none !important; border-bottom: 1px solid var(--rule) !important; }\r\n .agent:last-child { border-bottom: none !important; }\r\n .addons-grid { grid-template-columns: 1fr; }\r\n .addon { border-right: none !important; }\r\n .steps { grid-template-columns: 1fr; }\r\n .step { border-right: none !important; border-bottom: 1px solid rgba(245,243,238,0.15) !important; padding: 36px 0 !important; }\r\n .step:last-child { border-bottom: none !important; }\r\n .stats-grid { grid-template-columns: 1fr; }\r\n .stat { border-right: none !important; padding: 24px 0 !important; }\r\n .footer-top { grid-template-columns: 1fr; gap: 32px; }\r\n .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }\r\n .footer-bottom a { margin: 0 10px; }\r\n .header-inner { padding: 14px 14px; }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- HEADER -->\r\n<header>\r\n <div class=\"header-inner\">\r\n <a href=\"#\" class=\"logo\">\r\n <img decoding=\"async\" src=\"https:\/\/piximo.eu\/wp-content\/uploads\/2026\/05\/cropped-piximo-icon-1024px-1.png\" alt=\"piximo\" class=\"logo-icon\">\r\n <span class=\"logo-wordmark\">\r\n <span class=\"px\">pix<\/span><span class=\"im\">im<\/span><span class=\"o\">o<\/span>\r\n <\/span>\r\n <\/a>\r\n <nav class=\"main-nav\">\r\n <a href=\"#pristup\">Pristup<\/a>\r\n <a href=\"#cijene\">Cijene<\/a>\r\n <a href=\"#usluge\">Usluge<\/a>\r\n <a href=\"#proces\">Proces<\/a>\r\n <a href=\"#recenzije\">Recenzije<\/a>\r\n <\/nav>\r\n <button class=\"btn\">\r\n Zatra\u017ei ponudu\r\n <svg class=\"btn-arrow\" viewBox=\"0 0 12 12\" fill=\"none\"><path d=\"M2 6h8m0 0L6 2m4 4L6 10\" stroke=\"currentColor\" stroke-width=\"2\"\/><\/svg>\r\n <\/button>\r\n <button class=\"hamburger\" id=\"hamburger\" aria-label=\"Otvori meni\">\r\n <span><\/span>\r\n <span><\/span>\r\n <span><\/span>\r\n <\/button>\r\n <\/div>\r\n<\/header>\r\n\r\n<!-- MOBILE FULLSCREEN MENU (izvan headera, fixed preko cijelog ekrana) -->\r\n<div class=\"mobile-menu\" id=\"mobileMenu\">\r\n <nav class=\"mobile-nav\">\r\n <a href=\"#pristup\">Pristup<\/a>\r\n <a href=\"#cijene\">Cijene<\/a>\r\n <a href=\"#usluge\">Usluge<\/a>\r\n <a href=\"#proces\">Proces<\/a>\r\n <a href=\"#recenzije\">Recenzije<\/a>\r\n <\/nav>\r\n <div class=\"mobile-menu-footer\">\r\n <button class=\"btn\">\r\n Zatra\u017ei ponudu\r\n <svg class=\"btn-arrow\" viewBox=\"0 0 12 12\" fill=\"none\"><path d=\"M2 6h8m0 0L6 2m4 4L6 10\" stroke=\"currentColor\" stroke-width=\"2\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n<\/div>\r\n<!-- HERO -->\r\n<section class=\"hero\">\r\n <div class=\"container\">\r\n <div class=\"hero-top\">\r\n <div class=\"hero-meta\">\r\n <span>EST. 20xx \u2014 ZAGREB, HR<\/span>\r\n <span>VOL. 01 \/ NO. 001<\/span>\r\n <\/div>\r\n <span class=\"mono-label blue\">Studio + AI alati<\/span>\r\n <\/div>\r\n\r\n <div class=\"hero-grid\">\r\n <h1>\r\n <span class=\"line-1\">Digital,<\/span>\r\n <span class=\"line-2\">but <span class=\"underline-anim\">smarter.<\/span><\/span>\r\n <span class=\"line-3 piximo-type\" id=\"piximo-type\" aria-label=\"Piximo.\"><\/span>\r\n <\/h1>\r\n\r\n <div class=\"hero-side\">\r\n <p>\r\n Studio nove generacije. Na\u0161 tim kreira <strong>web stranice, vizuale i sadr\u017eaj\r\n za dru\u0161tvene mre\u017ee<\/strong> \u2014 uz pomo\u0107 najnaprednijih AI alata koji ubrzavaju\r\n rad bez kompromisa po kvaliteti. Mi vodimo, AI nam poma\u017ee. Vi dobijete vi\u0161e za manje.\r\n <\/p>\r\n <div class=\"ctas\">\r\n <button class=\"btn\">\r\n Pogledaj cijene\r\n <svg class=\"btn-arrow\" viewBox=\"0 0 12 12\" fill=\"none\"><path d=\"M2 6h8m0 0L6 2m4 4L6 10\" stroke=\"currentColor\" stroke-width=\"2\"\/><\/svg>\r\n <\/button>\r\n <button class=\"btn btn-outline\">Na\u0161 pristup<\/button>\r\n <\/div>\r\n <p class=\"friendly-note\">*stvarno su najni\u017ee \ud83d\ude42<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-bottom\">\r\n <div class=\"hero-info\">\r\n <div class=\"label\">\/\/ Brzina<\/div>\r\n <div class=\"value\"><span class=\"accent\">5\u00d7<\/span> br\u017ee od agencija<\/div>\r\n <\/div>\r\n <div class=\"hero-info\">\r\n <div class=\"label\">\/\/ Cijena<\/div>\r\n <div class=\"value\">od <span class=\"accent\">390 \u20ac<\/span><\/div>\r\n <\/div>\r\n <div class=\"hero-info\">\r\n <div class=\"label\">\/\/ Isporuka<\/div>\r\n <div class=\"value\"><span class=\"accent\">5\u20137<\/span> radnih dana<\/div>\r\n <\/div>\r\n <div class=\"hero-info\">\r\n <div class=\"label\">\/\/ Odgovor<\/div>\r\n <div class=\"value\">unutar <span class=\"accent\">24h<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<!-- MARQUEE -->\r\n<div class=\"marquee\">\r\n <div class=\"marquee-track\">\r\n <span class=\"marquee-item\">WEB STRANICE <span class=\"marquee-dot\"><\/span><\/span>\r\n <span class=\"marquee-item\">WEBSHOP <span class=\"marquee-dot\"><\/span><\/span>\r\n <span class=\"marquee-item\">INSTAGRAM <span class=\"marquee-dot\"><\/span><\/span>\r\n <span class=\"marquee-item\">FACEBOOK <span class=\"marquee-dot\"><\/span><\/span>\r\n <span class=\"marquee-item\">GOOGLE BUSINESS <span class=\"marquee-dot\"><\/span><\/span>\r\n <span class=\"marquee-item\">VIZUALI <span class=\"marquee-dot\"><\/span><\/span>\r\n <span class=\"marquee-item\">KAMPANJE <span class=\"marquee-dot\"><\/span><\/span>\r\n <span class=\"marquee-item\">BRAND IDENTITY <span class=\"marquee-dot\"><\/span><\/span>\r\n <span class=\"marquee-item\">WEB STRANICE <span class=\"marquee-dot\"><\/span><\/span>\r\n <span class=\"marquee-item\">WEBSHOP <span class=\"marquee-dot\"><\/span><\/span>\r\n <span class=\"marquee-item\">INSTAGRAM <span class=\"marquee-dot\"><\/span><\/span>\r\n <span class=\"marquee-item\">FACEBOOK <span class=\"marquee-dot\"><\/span><\/span>\r\n <span class=\"marquee-item\">GOOGLE BUSINESS <span class=\"marquee-dot\"><\/span><\/span>\r\n <span class=\"marquee-item\">VIZUALI <span class=\"marquee-dot\"><\/span><\/span>\r\n <span class=\"marquee-item\">KAMPANJE <span class=\"marquee-dot\"><\/span><\/span>\r\n <span class=\"marquee-item\">BRAND IDENTITY <span class=\"marquee-dot\"><\/span><\/span>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<!-- APPROACH -->\r\n<section class=\"approach\" id=\"pristup\">\r\n <div class=\"container\">\r\n <div class=\"approach-header\">\r\n <div>\r\n <span class=\"mono-label\">\/\/ 01 Pristup<\/span>\r\n <h2>Mi vodimo. <em>AI ubrzava.<\/em><\/h2>\r\n <\/div>\r\n <div>\r\n <p class=\"lead\">\r\n Klasi\u010dne agencije napla\u0107uju vam fiksne pla\u0107e cijelog tima. Mi smo to rije\u0161ili pametnije \u2014\r\n na\u0161 <strong>tim stratega, dizajnera i developera<\/strong> koristi najnaprednije AI alate kao kreativnu polugu.\r\n Rezultat: ista kvaliteta koju biste dobili u top agenciji, ali u puno kra\u0107em roku i po znatno ni\u017eoj cijeni.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"agents-grid\">\r\n <div class=\"agent\">\r\n <span class=\"agent-num\">01 \/\/ STRATEGIJA<\/span>\r\n <div class=\"agent-name\">Claude<\/div>\r\n <div class=\"agent-role\">Poma\u017ee timu s tekstom i istra\u017eivanjem<\/div>\r\n <div class=\"agent-status\">U upotrebi<\/div>\r\n <\/div>\r\n <div class=\"agent\">\r\n <span class=\"agent-num\">02 \/\/ RAZVOJ<\/span>\r\n <div class=\"agent-name\">GPT-5<\/div>\r\n <div class=\"agent-role\">Ubrzava code review i razvoj<\/div>\r\n <div class=\"agent-status\">U upotrebi<\/div>\r\n <\/div>\r\n <div class=\"agent\">\r\n <span class=\"agent-num\">03 \/\/ DIZAJN<\/span>\r\n <div class=\"agent-name\">Gemini<\/div>\r\n <div class=\"agent-role\">Prijedlozi UI rje\u0161enja i layouta<\/div>\r\n <div class=\"agent-status\">U upotrebi<\/div>\r\n <\/div>\r\n <div class=\"agent\">\r\n <span class=\"agent-num\">04 \/\/ VIZUALI<\/span>\r\n <div class=\"agent-name\">Midjourney<\/div>\r\n <div class=\"agent-role\">Generira moodboardove i vizualne ideje<\/div>\r\n <div class=\"agent-status\">U upotrebi<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<!-- SERVICES -->\r\n<section class=\"services\" id=\"cijene\">\r\n <div class=\"container\">\r\n <div class=\"services-header\">\r\n <div>\r\n <span class=\"mono-label\">\/\/ 02 Cijene<\/span>\r\n <h2>Transparentno. <span class=\"blue\">Bez iznena\u0111enja.<\/span><\/h2>\r\n <\/div>\r\n <div>\r\n <p class=\"desc\">\r\n Sve cijene su javno istaknute. Bez tajnih tro\u0161kova, bez \"ovisi\" pristupa.\r\n Odaberite paket koji odgovara fazi va\u0161eg biznisa \u2014 kombiniranje je uvijek mogu\u0107e.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pricing-grid\">\r\n <div class=\"price-card\">\r\n <div class=\"price-num\"><span>\/\/ PAKET 01<\/span><span>STARTER<\/span><\/div>\r\n <h3>Starter Web<\/h3>\r\n <p class=\"price-desc\">Jednostavna web prisutnost za male obrte i pojedince koji \u017eele biti vidljivi online.<\/p>\r\n <div class=\"price-amount-row\">\r\n <span class=\"amount\">390<\/span>\r\n <span class=\"currency\">EUR<\/span>\r\n <span class=\"period\">jednokratno<\/span>\r\n <\/div>\r\n <ul class=\"price-features\">\r\n <li><span class=\"feature-bullet\"><\/span> Web stranica do 5 sekcija<\/li>\r\n <li><span class=\"feature-bullet\"><\/span> Mobilno responzivno<\/li>\r\n <li><span class=\"feature-bullet\"><\/span> Kontakt forma + Google Maps<\/li>\r\n <li><span class=\"feature-bullet\"><\/span> Osnovni SEO setup<\/li>\r\n <li><span class=\"feature-bullet\"><\/span> Isporuka za 5\u20137 dana<\/li>\r\n <\/ul>\r\n <button class=\"price-cta\">Odaberi Starter <span class=\"price-cta-arrow\">\u2192<\/span><\/button>\r\n <\/div>\r\n\r\n <div class=\"price-card featured\">\r\n <div class=\"price-num\"><span>\/\/ PAKET 02<\/span><span class=\"featured-tag\">Najpopularnije<\/span><\/div>\r\n <h3>Business Suite<\/h3>\r\n <p class=\"price-desc\">Kompletno digitalno rje\u0161enje za firme \u2014 web, vizuali i mjese\u010dno odr\u017eavanje na jednom mjestu.<\/p>\r\n <div class=\"price-amount-row\">\r\n <span class=\"amount\">890<\/span>\r\n <span class=\"currency\">EUR<\/span>\r\n <span class=\"period\">+ 149\/mj<\/span>\r\n <\/div>\r\n <ul class=\"price-features\">\r\n <li><span class=\"feature-bullet\"><\/span> Custom web do 10 sekcija<\/li>\r\n <li><span class=\"feature-bullet\"><\/span> Vo\u0111enje 1 dru\u0161tvene mre\u017ee<\/li>\r\n <li><span class=\"feature-bullet\"><\/span> 12 vizuala mjese\u010dno<\/li>\r\n <li><span class=\"feature-bullet\"><\/span> Google Business Profil<\/li>\r\n <li><span class=\"feature-bullet\"><\/span> Odr\u017eavanje + analitika<\/li>\r\n <li><span class=\"feature-bullet\"><\/span> Prioritetna podr\u0161ka<\/li>\r\n <\/ul>\r\n <button class=\"price-cta\">Odaberi Business <span class=\"price-cta-arrow\">\u2192<\/span><\/button>\r\n <\/div>\r\n\r\n <div class=\"price-card\">\r\n <div class=\"price-num\"><span>\/\/ PAKET 03<\/span><span>E-COMMERCE<\/span><\/div>\r\n <h3>Webshop Pro<\/h3>\r\n <p class=\"price-desc\">Webshop koji prodaje \u2014 od dizajna do pla\u0107anja, sve postavljeno i spremno za rast.<\/p>\r\n <div class=\"price-amount-row\">\r\n <span class=\"amount\">1490<\/span>\r\n <span class=\"currency\">EUR<\/span>\r\n <span class=\"period\">+ 199\/mj<\/span>\r\n <\/div>\r\n <ul class=\"price-features\">\r\n <li><span class=\"feature-bullet\"><\/span> Webshop do 100 proizvoda<\/li>\r\n <li><span class=\"feature-bullet\"><\/span> Online pla\u0107anje + kartice<\/li>\r\n <li><span class=\"feature-bullet\"><\/span> Vo\u0111enje 2 dru\u0161tvene mre\u017ee<\/li>\r\n <li><span class=\"feature-bullet\"><\/span> 20 vizuala mjese\u010dno<\/li>\r\n <li><span class=\"feature-bullet\"><\/span> SEO optimizacija proizvoda<\/li>\r\n <li><span class=\"feature-bullet\"><\/span> Edukacija i predaja<\/li>\r\n <\/ul>\r\n <button class=\"price-cta\">Odaberi Webshop <span class=\"price-cta-arrow\">\u2192<\/span><\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<!-- ADD-ONS -->\r\n<section class=\"addons\" id=\"usluge\">\r\n <div class=\"container\">\r\n <div class=\"addons-header\">\r\n <div>\r\n <span class=\"mono-label\">\/\/ 03 Pojedina\u010dno<\/span>\r\n <h2>Trebate samo jedno?<\/h2>\r\n <\/div>\r\n <div>\r\n <p class=\"desc\">\r\n Sve na\u0161e usluge dostupne su i pojedina\u010dno. Cijene su po\u010detne \u2014 ovisno o opsegu mogu varirati.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"addons-grid\">\r\n <div class=\"addon\">\r\n <span class=\"addon-num\">\/\/ 01<\/span>\r\n <h4>Vo\u0111enje Instagrama<\/h4>\r\n <p>Postovi, reels, stories i interakcija. Mi pi\u0161emo, dizajniramo, objavljujemo.<\/p>\r\n <div class=\"addon-price\"><span class=\"from\">od<\/span><span class=\"amt\">199<\/span><span class=\"unit\">EUR \/ mj<\/span><\/div>\r\n <\/div>\r\n <div class=\"addon\">\r\n <span class=\"addon-num\">\/\/ 02<\/span>\r\n <h4>Vo\u0111enje Facebooka<\/h4>\r\n <p>Strate\u0161ki content plan, postovi, ogla\u0161avanje i community management.<\/p>\r\n <div class=\"addon-price\"><span class=\"from\">od<\/span><span class=\"amt\">179<\/span><span class=\"unit\">EUR \/ mj<\/span><\/div>\r\n <\/div>\r\n <div class=\"addon\">\r\n <span class=\"addon-num\">\/\/ 03<\/span>\r\n <h4>Google Business Profil<\/h4>\r\n <p>Postavljanje i optimizacija profila za lokalnu vidljivost na Mapama.<\/p>\r\n <div class=\"addon-price\"><span class=\"from\">od<\/span><span class=\"amt\">149<\/span><span class=\"unit\">EUR<\/span><\/div>\r\n <\/div>\r\n <div class=\"addon\">\r\n <span class=\"addon-num\">\/\/ 04<\/span>\r\n <h4>Vizuali za dru\u0161tvene<\/h4>\r\n <p>Mjese\u010dni paket atraktivnih grafi\u010dkih vizuala uskla\u0111en s brand identitetom.<\/p>\r\n <div class=\"addon-price\"><span class=\"from\">od<\/span><span class=\"amt\">119<\/span><span class=\"unit\">EUR \/ mj<\/span><\/div>\r\n <\/div>\r\n <div class=\"addon\">\r\n <span class=\"addon-num\">\/\/ 05<\/span>\r\n <h4>Brand identitet<\/h4>\r\n <p>Logo, paleta boja, tipografija, brand guidelines \u2014 kompletan identitet.<\/p>\r\n <div class=\"addon-price\"><span class=\"from\">od<\/span><span class=\"amt\">490<\/span><span class=\"unit\">EUR<\/span><\/div>\r\n <\/div>\r\n <div class=\"addon\">\r\n <span class=\"addon-num\">\/\/ 06<\/span>\r\n <h4>SEO optimizacija<\/h4>\r\n <p>On-page i off-page SEO, keyword research, lokalni SEO setup za Hrvatsku.<\/p>\r\n <div class=\"addon-price\"><span class=\"from\">od<\/span><span class=\"amt\">249<\/span><span class=\"unit\">EUR \/ mj<\/span><\/div>\r\n <\/div>\r\n <div class=\"addon\">\r\n <span class=\"addon-num\">\/\/ 07<\/span>\r\n <h4>Email marketing<\/h4>\r\n <p>Newsletteri, automatizacija, segmentacija \u2014 sve \u0161to treba za rast liste.<\/p>\r\n <div class=\"addon-price\"><span class=\"from\">od<\/span><span class=\"amt\">99<\/span><span class=\"unit\">EUR \/ mj<\/span><\/div>\r\n <\/div>\r\n <div class=\"addon\">\r\n <span class=\"addon-num\">\/\/ 08<\/span>\r\n <h4>Odr\u017eavanje weba<\/h4>\r\n <p>Backup, security, updateovi i tehni\u010dka podr\u0161ka za ve\u0107 postoje\u0107i web.<\/p>\r\n <div class=\"addon-price\"><span class=\"from\">od<\/span><span class=\"amt\">49<\/span><span class=\"unit\">EUR \/ mj<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<!-- PROCESS -->\r\n<section class=\"process\" id=\"proces\">\r\n <div class=\"container\">\r\n <div class=\"process-header\">\r\n <div>\r\n <span class=\"mono-label\">\/\/ 04 Proces<\/span>\r\n <h2>Od ideje do <em>isporuke<\/em>.<\/h2>\r\n <\/div>\r\n <div>\r\n <p class=\"desc\">\r\n Na\u0161 proces je transparentan i predvidljiv. Klijent zna gdje smo u svakom trenutku.\r\n Bez ghostinga, bez ka\u0161njenja, bez iznena\u0111enja \u2014 samo jasna komunikacija.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"steps\">\r\n <div class=\"step\">\r\n <div class=\"step-num\">01<\/div>\r\n <h4>Konzultacija<\/h4>\r\n <p>Besplatan razgovor o va\u0161im potrebama, ciljevima i brendu. Nema obveze.<\/p>\r\n <\/div>\r\n <div class=\"step\">\r\n <div class=\"step-num\">02<\/div>\r\n <h4>Brand brief<\/h4>\r\n <p>Detaljan brief koji precizno usmjerava na\u0161e AI agente prema rezultatu.<\/p>\r\n <\/div>\r\n <div class=\"step\">\r\n <div class=\"step-num\">03<\/div>\r\n <h4>Izrada<\/h4>\r\n <p>Na\u0161 tim radi na projektu, AI alati ubrzavaju proces. Vi pratite napredak u realnom vremenu.<\/p>\r\n <\/div>\r\n <div class=\"step\">\r\n <div class=\"step-num\">04<\/div>\r\n <h4>Isporuka<\/h4>\r\n <p>Predaja, edukacija i podr\u0161ka. Va\u0161 digitalni alat je \u017eiv i operativan.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<!-- STATS -->\r\n<section class=\"stats\">\r\n <div class=\"container\">\r\n <div class=\"stats-grid\">\r\n <div class=\"stat\">\r\n <div class=\"stat-num\">120<span class=\"unit\">+<\/span><\/div>\r\n <div class=\"stat-label\">Zavr\u0161enih projekata<\/div>\r\n <\/div>\r\n <div class=\"stat\">\r\n <div class=\"stat-num\">5<span class=\"unit\">\u00d7<\/span><\/div>\r\n <div class=\"stat-label\">Br\u017ei od klasi\u010dnih agencija<\/div>\r\n <\/div>\r\n <div class=\"stat\">\r\n <div class=\"stat-num\">98<span class=\"unit\">%<\/span><\/div>\r\n <div class=\"stat-label\">Zadovoljnih klijenata<\/div>\r\n <\/div>\r\n <div class=\"stat\">\r\n <div class=\"stat-num\">24<span class=\"unit\">h<\/span><\/div>\r\n <div class=\"stat-label\">Vrijeme odgovora<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<!-- TESTIMONIALS -->\r\n<section class=\"testimonials\" id=\"recenzije\">\r\n <div class=\"container\">\r\n <div class=\"testimonials-header\">\r\n <div>\r\n <span class=\"mono-label\">\/\/ 05 Recenzije<\/span>\r\n <h2>Rije\u010dima onih koji <em>znaju<\/em>.<\/h2>\r\n <\/div>\r\n <div>\r\n <p class=\"desc\">\r\n Vi\u0161e od 120 zadovoljnih klijenata kroz protekle dvije godine. Evo \u0161to ka\u017eu o suradnji s nama.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testimonials-grid\">\r\n <div class=\"testimonial\">\r\n <div class=\"big-quote\">\"<\/div>\r\n <blockquote>\r\n Stranicu smo dobili za 6 dana. Prije sam tra\u017eio tjednima i nisam mogao dobiti realnu cijenu nigdje drugdje. Piximo je apsolutno game-changer za male obrte u Hrvatskoj.\r\n <\/blockquote>\r\n <div class=\"testimonial-meta\">\r\n <div class=\"author-block\">\r\n <div class=\"name\">Marko Kova\u010d<\/div>\r\n <div class=\"role\">STOLARIJA KOVA\u010c \u00b7 ZAGREB<\/div>\r\n <\/div>\r\n <div class=\"stars\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\"\/><\/svg>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\"\/><\/svg>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\"\/><\/svg>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\"\/><\/svg>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testimonial\">\r\n <div class=\"big-quote\">\"<\/div>\r\n <blockquote>\r\n Vode mi Instagram ve\u0107 8 mjeseci i pratitelji su porasli s 400 na preko 3000. Vizuali su konzistentni, postovi promi\u0161ljeni.\r\n <\/blockquote>\r\n <div class=\"testimonial-meta\">\r\n <div class=\"author-block\">\r\n <div class=\"name\">Ana Peri\u0107<\/div>\r\n <div class=\"role\">BJELO CAFE \u00b7 SPLIT<\/div>\r\n <\/div>\r\n <div class=\"stars\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\"\/><\/svg>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\"\/><\/svg>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\"\/><\/svg>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\"\/><\/svg>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testimonial\">\r\n <div class=\"big-quote\">\"<\/div>\r\n <blockquote>\r\n Webshop je radio od prvog dana. Strogo preporu\u010dam svima.\r\n <\/blockquote>\r\n <div class=\"testimonial-meta\">\r\n <div class=\"author-block\">\r\n <div class=\"name\">Davor Horvat<\/div>\r\n <div class=\"role\">HORVAT SPORT<\/div>\r\n <\/div>\r\n <div class=\"stars\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\"\/><\/svg>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\"\/><\/svg>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\"\/><\/svg>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\"\/><\/svg>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<!-- FINAL CTA -->\r\n<section class=\"final-cta\" id=\"kontakt\">\r\n <div class=\"container\">\r\n <div class=\"final-cta-content\">\r\n <h2>\r\n Spremni za <em>digital,<\/em><br>\r\n ali <em>smarter?<\/em>\r\n <\/h2>\r\n <div class=\"right-side\">\r\n <p>\r\n Po\u0161aljite nam upit. Odgovorit \u0107emo u roku od 24 sata i pripremiti besplatnu ponudu prilago\u0111enu va\u0161im potrebama. Bez obveze, bez \"prodaje\".\r\n <\/p>\r\n <button class=\"btn\">\r\n Zatra\u017ei ponudu\r\n <svg class=\"btn-arrow\" viewBox=\"0 0 12 12\" fill=\"none\"><path d=\"M2 6h8m0 0L6 2m4 4L6 10\" stroke=\"currentColor\" stroke-width=\"2\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<!-- FOOTER -->\r\n<footer>\r\n <div class=\"container\">\r\n <div class=\"footer-top\">\r\n <div class=\"footer-brand\">\r\n <div class=\"footer-logo\">\r\n <img decoding=\"async\" src=\"https:\/\/piximo.eu\/wp-content\/uploads\/2026\/05\/piximo-logo-footer.png\" alt=\"piximo\">\r\n <span class=\"logo-wordmark\">\r\n <span class=\"px\">pix<\/span><span class=\"im\">im<\/span><span class=\"o\">o<\/span>\r\n <\/span>\r\n <\/div>\r\n <p class=\"footer-tag\">Digitalni studio nove generacije. Tim koji koristi AI kao alat \u2014 za web stranice, vizuale i kampanje koje izgledaju i rade vrhunski.<\/p>\r\n <div class=\"powered-by-tag\">Powered by <span class=\"imtag\">IMTAG<\/span><\/div>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h5>Usluge<\/h5>\r\n <ul>\r\n <li><a href=\"#\">Web stranice<\/a><\/li>\r\n <li><a href=\"#\">Webshop<\/a><\/li>\r\n <li><a href=\"#\">Instagram<\/a><\/li>\r\n <li><a href=\"#\">Facebook<\/a><\/li>\r\n <li><a href=\"#\">Google Business<\/a><\/li>\r\n <li><a href=\"#\">Brand identitet<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h5>Tvrtka<\/h5>\r\n <ul>\r\n <li><a href=\"#\">O nama<\/a><\/li>\r\n <li><a href=\"#\">Proces<\/a><\/li>\r\n <li><a href=\"#\">Cijene<\/a><\/li>\r\n <li><a href=\"#\">Blog<\/a><\/li>\r\n <li><a href=\"#\">Kontakt<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h5>Kontakt<\/h5>\r\n <ul>\r\n <li><a href=\"#\">hello@piximo.hr<\/a><\/li>\r\n <li><a href=\"#\">+385 99 123 4567<\/a><\/li>\r\n <li><a href=\"#\">Zagreb, Hrvatska<\/a><\/li>\r\n <li><a href=\"#\">Instagram<\/a><\/li>\r\n <li><a href=\"#\">LinkedIn<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-bottom\">\r\n <div>\u00a9 2026 PIXIMO \u2014 VOL. 01<\/div>\r\n <div>\r\n <a href=\"#\">PRIVACY<\/a>\r\n <a href=\"#\">TERMS<\/a>\r\n <a href=\"#\">COOKIES<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/footer>\r\n\r\n<script>\r\n \/\/ \u2500\u2500\u2500 Piximo typewriter \u2500\u2500\u2500\r\n (function () {\r\n const target = document.getElementById('piximo-type');\r\n if (!target) return;\r\n const chars = [\r\n { c: 'P', blue: false },\r\n { c: 'i', blue: false },\r\n { c: 'x', blue: false },\r\n { c: 'i', blue: true },\r\n { c: 'm', blue: true },\r\n { c: 'o', blue: false },\r\n { c: '.', blue: false },\r\n ];\r\n const caret = document.createElement('span');\r\n caret.className = 'caret';\r\n target.appendChild(caret);\r\n const START_DELAY = 1400;\r\n const STEP = 110;\r\n chars.forEach((info, i) => {\r\n setTimeout(() => {\r\n const span = document.createElement('span');\r\n span.className = 'ch' + (info.blue ? ' blue' : '');\r\n span.textContent = info.c;\r\n target.insertBefore(span, caret);\r\n }, START_DELAY + i * STEP);\r\n });\r\n setTimeout(() => {\r\n caret.classList.add('done');\r\n }, START_DELAY + chars.length * STEP + 200);\r\n })();\r\n\r\n \/\/ \u2500\u2500\u2500 Mobile menu open\/close \u2500\u2500\u2500\r\n \/\/ \u2500\u2500\u2500 Mobile dropdown menu \u2500\u2500\u2500\r\n (function() {\r\n const hamburger = document.getElementById('hamburger');\r\n const mobileMenu = document.getElementById('mobileMenu');\r\n if (!hamburger || !mobileMenu) return;\r\n\r\n const mobileLinks = mobileMenu.querySelectorAll('.mobile-nav a, .mobile-menu-footer .btn');\r\n\r\n function toggleMenu() {\r\n const isOpen = mobileMenu.classList.toggle('open');\r\n hamburger.classList.toggle('active', isOpen);\r\n document.body.classList.toggle('menu-open', isOpen);\r\n }\r\n\r\n function closeMenu() {\r\n mobileMenu.classList.remove('open');\r\n hamburger.classList.remove('active');\r\n document.body.classList.remove('menu-open');\r\n }\r\n\r\n hamburger.addEventListener('click', toggleMenu);\r\n mobileLinks.forEach(link => link.addEventListener('click', closeMenu));\r\n\r\n document.addEventListener('keydown', e => {\r\n if (e.key === 'Escape' && mobileMenu.classList.contains('open')) closeMenu();\r\n });\r\n })();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>piximo \u2014 Digitalni studio \u00b7 powered by IMTAG piximo Pristup Cijene Usluge Proces Recenzije Zatra\u017ei ponudu Pristup Cijene Usluge Proces Recenzije Zatra\u017ei ponudu EST. 20xx \u2014 ZAGREB, HR VOL. 01 \/ NO. 001 Studio + AI alati Digital, but smarter. Studio nove generacije. Na\u0161 tim kreira web stranice, vizuale i sadr\u017eaj za dru\u0161tvene mre\u017ee \u2014 […]<\/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-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/piximo.eu\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/piximo.eu\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/piximo.eu\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/piximo.eu\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/piximo.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":5,"href":"https:\/\/piximo.eu\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":81,"href":"https:\/\/piximo.eu\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/81"}],"wp:attachment":[{"href":"https:\/\/piximo.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}