{"id":3512,"date":"2026-07-13T22:31:28","date_gmt":"2026-07-13T20:31:28","guid":{"rendered":"https:\/\/www.kanda.sk\/?page_id=3512"},"modified":"2026-07-14T21:55:09","modified_gmt":"2026-07-14T19:55:09","slug":"websize","status":"publish","type":"page","link":"https:\/\/www.kanda.sk\/en\/websize\/","title":{"rendered":"WebSize"},"content":{"rendered":"\n\t\t
<\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t
\n\t\t
\n\t\t\t\n\n\n\n\nWebSize \u2013 Optimaliz\u00e1cia obr\u00e1zkov za 3 sekundy | macOS<\/title>\n<meta name=\"description\" content=\"WebSize je macOS menu bar aplik\u00e1cia na optimaliz\u00e1ciu obr\u00e1zkov pre web. JPEG, PNG, WebP, AVIF, HEIC, PDF, RAW. Drag & drop, 100% lok\u00e1lne, \u017eiadny cloud.\">\n<meta property=\"og:title\" content=\"WebSize \u2013 Obr\u00e1zky na web za 3 sekundy\">\n<meta property=\"og:description\" content=\"Presu\u0148 obr\u00e1zky na \u26a1 ikonu v menu bare. Hotovo. JPEG, PNG, WebP, AVIF, PDF, RAW \u2013 100% lok\u00e1lne.\">\n<meta property=\"og:type\" content=\"website\">\n<meta name=\"twitter:card\" content=\"summary_large_image\">\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=Space+Grotesk:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n RESET & BASE\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n:root {\n --bg: #0A0908;\n --bg-s: #111009;\n --bg-r: #1A1814;\n --border: #2A2720;\n --border-subtle: #1A1814;\n --text: #EDE9E3;\n --text-2: #8A8070;\n --text-3: #544E46;\n --accent: #F5C518;\n --accent-d: rgba(245,197,24,.10);\n --grad: linear-gradient(90deg, #FFD93D 0%, #F5A623 100%);\n --font: 'Space Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;\n --mono: 'SF Mono', 'Menlo', 'Monaco', monospace;\n --r-sm: 8px;\n --r-md: 14px;\n --r-xl: 28px;\n}\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\nhtml { scroll-behavior: smooth; }\nbody {\n font-family: var(--font);\n background: var(--bg);\n color: var(--text);\n line-height: 1.6;\n overflow-x: hidden;\n -webkit-font-smoothing: antialiased;\n}\na { color: inherit; text-decoration: none; }\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n NAV (RAVEN Hub style)\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.wm-nav {\n position: sticky; top: 0; z-index: 9999; width: 100%;\n background: rgba(10,9,8,.6);\n backdrop-filter: blur(22px) saturate(160%);\n -webkit-backdrop-filter: blur(22px) saturate(160%);\n transition: background .3s;\n font-family: var(--font);\n}\n.wm-nav::after {\n content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;\n background: linear-gradient(90deg, transparent, rgba(245,197,24,.4) 50%, transparent);\n}\n.wm-nav.wm-scrolled { background: rgba(10,9,8,.92); box-shadow: 0 12px 40px rgba(0,0,0,.4); }\n.wm-nav-inner {\n max-width: 1180px; margin: 0 auto; padding: 0 28px;\n display: flex; align-items: center; justify-content: space-between; gap: 40px; height: 74px;\n}\n\n\/* Logo *\/\n.wm-logo {\n display: flex; align-items: center; gap: 9px; flex-shrink: 0;\n text-decoration: none; padding: 6px; margin: -6px; border-radius: 12px;\n transition: background .2s;\n}\n.wm-logo:hover { background: rgba(255,255,255,.05); }\n.wm-logo-bolt { font-size: 22px; filter: drop-shadow(0 0 10px rgba(245,197,24,.8)); line-height: 1; }\n.wm-logo-name { font-size: 17px; font-weight: 800; letter-spacing: -.3px; color: #EDE9E3; line-height: 1; }\n\n\/* Center *\/\n.wm-nav-center { display: flex; align-items: center; justify-content: center; gap: 20px; flex: 1; }\n.wm-nav-links { display: flex; align-items: center; gap: 4px; }\n.wm-nav-link {\n position: relative; display: flex; align-items: center; gap: 5px;\n background: none; border: none; padding: 8px 14px; font-family: inherit;\n font-size: 14.5px; font-weight: 600; color: rgba(237,233,227,.68);\n text-decoration: none; cursor: pointer; transition: color .2s; border-radius: 8px;\n white-space: nowrap;\n}\n.wm-nav-link::after {\n content: ''; position: absolute; left: 50%; bottom: 2px;\n width: 0; height: 2px; border-radius: 2px;\n background: var(--grad); transform: translateX(-50%); transition: width .25s;\n}\n.wm-nav-link:hover, .wm-nav-link.wm-active { color: #fff; }\n.wm-nav-link:hover::after, .wm-nav-link.wm-active::after { width: 18px; }\n.wm-chevron { width: 13px; height: 13px; transition: transform .2s; }\n.wm-dropdown.open .wm-chevron { transform: rotate(180deg); }\n.wm-dropdown.open .wm-dropdown-btn { color: #fff; }\n\n\/* Mega dropdown *\/\n.wm-dropdown { position: relative; }\n.wm-mega {\n position: absolute; top: 100%; left: 50%;\n transform: translateX(-50%) translateY(-4px);\n width: 460px; padding-top: 12px;\n opacity: 0; visibility: hidden; pointer-events: none;\n transition: opacity .15s, transform .15s, visibility .15s;\n}\n.wm-dropdown.open .wm-mega {\n opacity: 1; visibility: visible; pointer-events: auto;\n transform: translateX(-50%) translateY(0);\n}\n.wm-mega-card {\n background: rgba(17,16,9,.98); backdrop-filter: blur(20px);\n border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 10px;\n display: grid; grid-template-columns: 1fr 1fr; gap: 4px;\n box-shadow: 0 30px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(245,197,24,.06);\n}\n.wm-mega-item {\n display: flex; align-items: flex-start; gap: 12px; padding: 12px;\n border-radius: 12px; text-decoration: none; transition: background .15s;\n}\n.wm-mega-item:hover { background: rgba(245,197,24,.09); }\n.wm-mega-icon {\n flex-shrink: 0; display: flex; align-items: center; justify-content: center;\n width: 34px; height: 34px; border-radius: 9px;\n background: rgba(245,197,24,.12); border: 1px solid rgba(245,197,24,.25);\n}\n.wm-mega-icon svg { width: 18px; height: 18px; color: #F5C518; }\n.wm-mega-text { display: flex; flex-direction: column; gap: 2px; }\n.wm-mega-text strong { font-size: 13.5px; font-weight: 700; color: #EDE9E3; line-height: 1.3; }\n.wm-mega-text small { font-size: 12px; color: rgba(237,233,227,.5); font-weight: 500; }\n\n\/* Lang switcher *\/\n.wm-lang-sw {\n display: flex; align-items: center; gap: 2px; padding: 3px;\n border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);\n flex-shrink: 0;\n}\n.wm-lang-btn {\n display: flex; align-items: center; gap: 5px; padding: 6px 13px;\n border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .5px;\n color: rgba(237,233,227,.55); text-decoration: none; transition: background .2s, color .2s;\n white-space: nowrap;\n}\n.wm-lang-btn:hover { color: #fff; }\n.wm-lang-btn.wm-active { background: var(--grad); color: #1a0e00; box-shadow: 0 0 14px rgba(245,197,24,.35); }\n\n\/* Nav actions *\/\n.wm-nav-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }\n.wm-fb-btn {\n display: flex; align-items: center; gap: 7px; padding: 9px 16px;\n border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);\n color: rgba(237,233,227,.8); font-family: inherit; font-size: 14px; font-weight: 600;\n cursor: pointer; transition: background .2s, border-color .2s, color .2s; white-space: nowrap;\n}\n.wm-fb-btn:hover { background: rgba(245,197,24,.1); border-color: rgba(245,197,24,.35); color: #fff; }\n.wm-fb-btn svg { width: 16px; height: 16px; flex-shrink: 0; }\n.wm-cta {\n display: inline-flex; align-items: center; gap: 7px; padding: 11px 20px;\n border-radius: 10px; font-size: 14.5px; font-weight: 700; white-space: nowrap;\n color: #1a0e00; text-decoration: none; background: var(--grad);\n box-shadow: 0 0 20px rgba(245,197,24,.3);\n transition: box-shadow .25s, transform .2s, filter .2s;\n animation: wm-pulse 2.8s ease-in-out infinite;\n}\n.wm-cta:hover { filter: brightness(1.06); transform: translateY(-1px); animation-play-state: paused; box-shadow: 0 0 34px rgba(245,197,24,.55); }\n.wm-cta-arrow { display: inline-block; transition: transform .2s; font-size: 13px; }\n.wm-cta:hover .wm-cta-arrow { transform: translate(2px,-2px); }\n@keyframes wm-pulse { 0%,100%{box-shadow:0 0 16px rgba(245,197,24,.25)} 50%{box-shadow:0 0 30px rgba(245,197,24,.5)} }\n\n\/* Burger *\/\n.wm-burger {\n display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;\n width: 42px; height: 42px; background: none; border: none; cursor: pointer; padding: 0;\n}\n.wm-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #EDE9E3; transition: transform .3s, opacity .2s; }\n\n\/* Mobile overlay *\/\n.wm-overlay {\n position: fixed; inset: 0; z-index: 10000;\n background: rgba(10,9,8,.99); backdrop-filter: blur(24px);\n display: flex; flex-direction: column; padding: 22px 26px 32px;\n opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-12px);\n transition: opacity .3s, transform .3s, visibility .3s; font-family: var(--font);\n}\n.wm-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }\n.wm-overlay-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }\n.wm-overlay-logo { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; color: #EDE9E3; }\n.wm-overlay-close {\n width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.06);\n border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;\n}\n.wm-overlay-close svg { width: 18px; height: 18px; }\n.wm-overlay-links { display: flex; flex-direction: column; margin-top: 28px; gap: 2px; overflow-y: auto; }\n.wm-overlay-link {\n display: flex; align-items: center; justify-content: space-between; padding: 18px 4px;\n font-size: 22px; font-weight: 700; color: #fff; text-decoration: none;\n border-bottom: 1px solid rgba(255,255,255,.07);\n background: none; width: 100%; text-align: left; font-family: inherit; cursor: pointer;\n border-left: none; border-right: none; border-top: none;\n opacity: 0; transform: translateY(-10px);\n transition: opacity .4s, transform .4s, color .2s;\n}\n.wm-overlay.open .wm-overlay-link { opacity: 1; transform: translateY(0); }\n.wm-overlay.open .wm-overlay-links > *:nth-child(1) { transition-delay: .08s; }\n.wm-overlay.open .wm-overlay-links > *:nth-child(2) { transition-delay: .13s; }\n.wm-overlay.open .wm-overlay-links > *:nth-child(3) { transition-delay: .18s; }\n.wm-overlay.open .wm-overlay-links > *:nth-child(4) { transition-delay: .23s; }\n.wm-overlay-acc-btn .wm-chevron { width: 16px; height: 16px; }\n.wm-overlay-acc-btn.open .wm-chevron { transform: rotate(180deg); }\n.wm-overlay-sub { max-height: 0; overflow: hidden; display: flex; flex-direction: column; transition: max-height .35s; }\n.wm-overlay-sub.open { max-height: 300px; }\n.wm-overlay-sublink {\n padding: 13px 4px 13px 14px; font-size: 16px; font-weight: 600;\n color: rgba(237,233,227,.55); text-decoration: none;\n border-bottom: 1px solid rgba(255,255,255,.05);\n}\n.wm-overlay-actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 24px; opacity: 0; transform: translateY(-10px); transition: opacity .4s ease .3s, transform .4s ease .3s; }\n.wm-overlay.open .wm-overlay-actions { opacity: 1; transform: translateY(0); }\n.wm-lang-sw-mob { width: 100%; padding: 4px; }\n.wm-lang-sw-mob .wm-lang-btn { flex: 1; justify-content: center; padding: 12px; font-size: 15px; }\n.wm-fb-btn-mob { width: 100%; justify-content: center; padding: 15px; font-size: 15px; }\n.wm-cta-mob { justify-content: center; padding: 15px; font-size: 15px; }\n\nbody.wm-locked { overflow: hidden; }\n\n\/* Feedback modal *\/\n.wm-fb-modal {\n position: fixed; inset: 0; z-index: 10001;\n display: flex; align-items: flex-start; justify-content: center; padding: 100px 20px 20px;\n background: rgba(6,6,9,.6); backdrop-filter: blur(6px);\n opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility .2s;\n}\n.wm-fb-modal.open { opacity: 1; visibility: visible; pointer-events: auto; }\n.wm-fb-card {\n width: 100%; max-width: 440px;\n background: rgba(17,16,9,.98); backdrop-filter: blur(20px);\n border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 20px;\n box-shadow: 0 30px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(245,197,24,.06);\n transform: translateY(-12px); transition: transform .2s; font-family: var(--font);\n}\n.wm-fb-modal.open .wm-fb-card { transform: translateY(0); }\n.wm-fb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }\n.wm-fb-title { font-size: 16px; font-weight: 700; color: #EDE9E3; }\n.wm-fb-x {\n width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;\n border-radius: 8px; background: rgba(255,255,255,.06); border: none;\n color: rgba(237,233,227,.7); cursor: pointer; transition: background .2s, color .2s;\n}\n.wm-fb-x:hover { color: #fff; background: rgba(255,255,255,.12); }\n.wm-fb-x svg { width: 15px; height: 15px; }\n.wm-fb-textarea {\n display: block; width: 100%; min-height: 120px; resize: vertical;\n background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);\n border-radius: 12px; padding: 12px 14px; font-family: inherit; font-size: 14px;\n color: #EDE9E3; line-height: 1.5; transition: border-color .2s;\n}\n.wm-fb-textarea::placeholder { color: rgba(237,233,227,.35); }\n.wm-fb-textarea:focus { outline: none; border-color: rgba(245,197,24,.5); }\n.wm-fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }\n.wm-fb-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; }\n.wm-fb-note { font-size: 12px; color: rgba(237,233,227,.45); line-height: 1.4; }\n.wm-fb-submit {\n flex-shrink: 0; padding: 10px 22px; border-radius: 10px; border: none;\n font-family: inherit; font-size: 14px; font-weight: 700; color: #1a0e00;\n background: var(--grad); cursor: pointer; transition: filter .2s, transform .2s;\n}\n.wm-fb-submit:hover { filter: brightness(1.08); }\n.wm-fb-submit:disabled { opacity: .6; cursor: default; }\n\n\/* Responsive nav *\/\n@media (max-width: 960px) {\n .wm-nav-center, .wm-nav-actions { display: none !important; }\n .wm-burger { display: flex; }\n .wm-nav-inner { height: 64px; }\n}\n@media (min-width: 961px) {\n .wm-overlay { display: none !important; }\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n CONTENT STYLES\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.sec-div { height: 1px; background: var(--border-subtle); max-width: 1100px; margin: 0 auto; }\nsection { padding: 96px 24px; }\n.wrap { max-width: 1100px; margin: 0 auto; }\n.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }\n.title { font-size: clamp(28px, 4vw, 50px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.08; text-wrap: balance; margin-bottom: 18px; }\n.sub { font-size: 18px; color: var(--text-2); line-height: 1.6; max-width: 520px; }\n\n\/* Hero *\/\n.hero {\n min-height: 100vh; display: flex; flex-direction: column;\n align-items: center; justify-content: center; text-align: center;\n padding: 130px 24px 80px; position: relative; overflow: hidden;\n}\n.hero::before {\n content: ''; position: absolute; top: 15%; left: 50%; transform: translateX(-50%);\n width: 700px; height: 700px;\n background: radial-gradient(circle, rgba(245,197,24,.10) 0%, rgba(245,197,24,.04) 35%, transparent 65%);\n pointer-events: none;\n}\n.hero-bolt {\n font-size: 72px; margin-bottom: 20px;\n filter: drop-shadow(0 0 28px rgba(245,197,24,.75)) drop-shadow(0 0 60px rgba(245,197,24,.3));\n animation: bob 4s ease-in-out infinite; position: relative; z-index: 1;\n}\n@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }\n.hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 22px; position: relative; z-index: 1; }\n.hero h1 { font-size: clamp(44px, 7.5vw, 86px); font-weight: 800; letter-spacing: -3px; line-height: 1.03; text-wrap: balance; max-width: 820px; margin-bottom: 26px; position: relative; z-index: 1; }\n.hero h1 em { font-style: normal; color: var(--accent); }\n.hero-sub { font-size: clamp(17px, 2.4vw, 21px); color: var(--text-2); max-width: 540px; margin: 0 auto 40px; line-height: 1.55; position: relative; z-index: 1; }\n.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 18px; position: relative; z-index: 1; }\n.btn-p { display: inline-flex; align-items: center; gap: 8px; padding: 14px 30px; background: var(--grad); color: #1a0e00; border-radius: 50px; font-size: 16px; font-weight: 700; transition: all .18s; text-decoration: none; box-shadow: 0 0 20px rgba(245,197,24,.2); }\n.btn-p:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(245,197,24,.4); }\n.btn-s { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: transparent; color: var(--text-2); border-radius: 50px; font-size: 16px; font-weight: 600; border: 1px solid var(--border); transition: all .18s; text-decoration: none; }\n.btn-s:hover { color: var(--text); border-color: var(--text-3); }\n.hero-fine { font-size: 13px; color: var(--text-3); position: relative; z-index: 1; }\n.hero-fine span { color: var(--text-2); }\n\n\/* App mockup *\/\n.hero-mock { margin-top: 64px; width: 100%; max-width: 520px; position: relative; z-index: 1; }\n.mock-win { background: #131210; border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.06); aspect-ratio: 4\/3; position: relative; }\n.mock-bar { position: absolute; top: 0; left: 0; right: 0; height: 44px; display: flex; align-items: center; padding: 0 16px; gap: 8px; border-bottom: 1px solid rgba(255,255,255,.05); }\n.dot { width: 11px; height: 11px; border-radius: 50%; }\n.dot-r{background:#FF5F57}.dot-y{background:#FFBD2E}.dot-g{background:#28CA41}\n.mock-title { flex: 1; text-align: center; margin-right: 47px; font-size: 12px; font-weight: 600; color: var(--text-2); }\n.mock-body { position: absolute; top: 44px; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; padding: 16px; }\n.mock-dz { width: 100%; height: 100%; border: 1.5px dashed rgba(245,197,24,.22); border-radius: 10px; background: rgba(245,197,24,.025); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }\n.mock-dz-icon { font-size: 36px; opacity: .35; }\n.mock-dz-txt { font-size: 13px; font-weight: 500; color: var(--text-2); }\n.mock-dz-fmt { font-size: 10px; color: var(--text-3); font-family: var(--mono); }\n\n\/* Pain *\/\n.pain { text-align: center; }\n.pain-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; margin-top: 56px; }\n.pain-card { padding: 32px 24px; background: var(--bg-s); }\n.pain-card:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }\n.pain-card:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }\n.pain-em { margin-bottom: 14px; }\n.pain-em svg { display: inline-block; }\n.pain-card p { font-size: 15px; color: var(--text-2); line-height: 1.55; }\n.pain-card strong { color: var(--text); font-weight: 600; }\n\n\/* Features *\/\n.feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; margin-top: 60px; }\n.feat-card { padding: 34px 30px; background: var(--bg-s); border-radius: var(--r-md); transition: background .2s; }\n.feat-card:hover { background: var(--bg-r); }\n.feat-ico { width: 44px; height: 44px; background: var(--accent-d); border: 1px solid rgba(245,197,24,.15); border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }\n.feat-ico svg { display: block; }\n.feat-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; letter-spacing: -.2px; }\n.feat-card p { font-size: 15px; color: var(--text-2); line-height: 1.6; }\n\n\/* How *\/\n.how { background: var(--bg-s); }\n.how-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }\n.how-steps { display: flex; flex-direction: column; gap: 30px; margin-top: 48px; }\n.how-step { display: flex; gap: 18px; align-items: flex-start; }\n.step-n { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: var(--accent-d); border: 1px solid rgba(245,197,24,.2); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--accent); }\n.step-c h4 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }\n.step-c p { font-size: 15px; color: var(--text-2); line-height: 1.6; }\n.how-vis { aspect-ratio: 1; background: var(--bg-r); border: 1px solid var(--border); border-radius: var(--r-xl); display: flex; align-items: center; justify-content: center; font-size: 72px; position: relative; overflow: hidden; }\n.how-vis::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 55% 40%, rgba(245,197,24,.08) 0%, transparent 60%); }\n\n\/* Formats *\/\n.fmts { text-align: center; }\n.fmt-section { margin-top: 52px; }\n.fmt-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }\n.fmt-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }\n.fmt-tag { padding: 6px 16px; background: var(--bg-s); border: 1px solid var(--border); border-radius: 50px; font-size: 13px; font-weight: 600; font-family: var(--mono); color: var(--text-2); }\n.fmt-tags.out .fmt-tag { border-color: rgba(245,197,24,.25); color: var(--accent); background: var(--accent-d); }\n.fmt-divider { width: 1px; height: 40px; background: var(--border); margin: 20px auto; }\n\n\/* Pricing *\/\n.pricing { text-align: center; }\n.price-card { max-width: 420px; margin: 52px auto 0; background: var(--bg-s); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; position: relative; }\n.price-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad); }\n.price-glow { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 320px; height: 180px; background: radial-gradient(circle, rgba(245,197,24,.1) 0%, transparent 70%); pointer-events: none; }\n.price-head { padding: 40px 40px 28px; }\n.price-badge { display: inline-block; padding: 4px 13px; margin-bottom: 24px; background: var(--accent-d); border: 1px solid rgba(245,197,24,.2); border-radius: 20px; font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: .8px; text-transform: uppercase; }\n.price-num { font-size: 72px; font-weight: 800; letter-spacing: -4px; line-height: 1; margin-bottom: 6px; }\n.price-num sup { font-size: 30px; vertical-align: top; margin-top: 16px; display: inline-block; letter-spacing: 0; }\n.price-period { font-size: 14px; color: var(--text-3); margin-bottom: 2px; }\n.price-vat { font-size: 12px; color: var(--text-3); margin-bottom: 4px; }\n.price-sub-note { font-size: 13px; color: var(--text-2); }\n.price-feats { padding: 0 40px 28px; display: flex; flex-direction: column; gap: 13px; }\n.pf { display: flex; align-items: center; gap: 11px; font-size: 15px; color: var(--text-2); text-align: left; }\n.pf-chk { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; background: var(--accent-d); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--accent); }\n.price-cta { padding: 0 40px 56px; }\n.btn-buy { display: block; width: 100%; padding: 16px; background: var(--grad); color: #1a0e00; border-radius: 50px; font-size: 17px; font-weight: 700; text-align: center; transition: all .18s; border: none; cursor: pointer; font-family: var(--font); text-decoration: none; box-shadow: 0 0 20px rgba(245,197,24,.2); }\n.btn-buy:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(245,197,24,.4); }\n.price-trial { margin-top: 14px; font-size: 13px; color: var(--text-3); }\n.price-trial a { color: var(--accent); text-decoration: underline; }\n\n\/* Story *\/\n.story { background: var(--bg-s); }\n.story-inner { display: grid; grid-template-columns: 1fr 1.7fr; gap: 80px; align-items: start; }\n.story-photo { aspect-ratio: 4\/5; background: var(--bg-r); border: 1px solid var(--border); border-radius: var(--r-xl); position: relative; overflow: hidden; }\n.story-ph-ico { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-58%); font-size: 88px; opacity: .1; }\n.story-ph-lbl { position: absolute; bottom: 18px; left: 18px; right: 18px; background: rgba(10,9,8,.82); backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; }\n.story-ph-lbl strong { display: block; font-size: 14px; }\n.story-ph-lbl span { font-size: 12px; color: var(--text-2); }\n.story-con { padding-top: 4px; }\n.story-quote { font-size: clamp(20px, 3vw, 28px); font-weight: 800; line-height: 1.3; letter-spacing: -.5px; margin-bottom: 30px; text-wrap: balance; }\n.story-quote em { font-style: normal; color: var(--accent); }\n.story-body { font-size: 16px; color: var(--text-2); line-height: 1.8; display: flex; flex-direction: column; gap: 16px; }\n.story-sig { color: var(--accent); font-weight: 700; }\n\n\/* FAQ *\/\n.faq-list { margin-top: 52px; display: flex; flex-direction: column; gap: 2px; }\n.faq-item { background: var(--bg-s); border-radius: var(--r-sm); overflow: hidden; }\n.faq-q { width: 100%; padding: 20px 22px; display: flex; justify-content: space-between; align-items: center; background: none; border: none; color: var(--text); font-size: 16px; font-weight: 600; cursor: pointer; text-align: left; gap: 14px; font-family: var(--font); }\n.faq-ico { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: var(--bg-r); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-3); transition: transform .28s; }\n.faq-item.open .faq-ico { transform: rotate(180deg); }\n.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }\n.faq-item.open .faq-a { max-height: 300px; }\n.faq-a p { padding: 0 22px 22px; font-size: 15px; color: var(--text-2); line-height: 1.7; }\n\n\/* Final CTA *\/\n.cta-fin { text-align: center; position: relative; overflow: hidden; }\n.cta-fin::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 900px; height: 500px; background: radial-gradient(ellipse, rgba(245,197,24,.07) 0%, transparent 65%); pointer-events: none; }\n.cta-fin h2 { font-size: clamp(34px, 5vw, 62px); font-weight: 800; letter-spacing: -2px; line-height: 1.08; text-wrap: balance; max-width: 680px; margin: 0 auto 28px; position: relative; }\n.cta-fin h2 em { font-style: normal; color: var(--accent); }\n.cta-bolt { font-size: 58px; margin-bottom: 22px; display: block; filter: drop-shadow(0 0 28px rgba(245,197,24,.75)) drop-shadow(0 0 60px rgba(245,197,24,.3)); animation: bob 4s ease-in-out infinite; position: relative; z-index: 1; }\n\n\/* Footer *\/\nfooter { padding: 36px 28px; border-top: 1px solid var(--border-subtle); font-family: var(--font); }\n.foot-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }\n.foot-logo { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }\n.foot-logo-bolt { filter: drop-shadow(0 0 5px rgba(245,197,24,.65)); }\n.foot-sub { font-size: 12px; color: var(--text-3); font-weight: 400; }\n.foot-links { display: flex; gap: 20px; }\n.foot-link { font-size: 13px; color: var(--text-3); transition: color .15s; text-decoration: none; }\n.foot-link:hover { color: var(--text-2); }\n.foot-copy { font-size: 12px; color: var(--text-3); }\n\n\/* Responsive content *\/\n@media (max-width: 900px) {\n .pain-grid { grid-template-columns: repeat(2,1fr); }\n .pain-card:first-child { border-radius: var(--r-md) var(--r-md) 0 0; }\n .pain-card:nth-child(2){ border-radius: 0; }\n .pain-card:nth-child(3){ border-radius: 0; }\n .pain-card:last-child { border-radius: 0 0 var(--r-md) var(--r-md); }\n .feat-grid { grid-template-columns: repeat(2,1fr); }\n .how-inner { grid-template-columns: 1fr; gap: 40px; }\n .how-vis { aspect-ratio: 16\/9; }\n .story-inner { grid-template-columns: 1fr; gap: 40px; }\n .story-photo { aspect-ratio: 16\/9; }\n}\n@media (max-width: 600px) {\n section { padding: 72px 18px; }\n .feat-grid { grid-template-columns: 1fr; }\n .pain-grid { grid-template-columns: 1fr; }\n .pain-card { border-radius: 0 !important; }\n .pain-card:first-child { border-radius: var(--r-md) var(--r-md) 0 0 !important; }\n .pain-card:last-child { border-radius: 0 0 var(--r-md) var(--r-md) !important; }\n}\n\n\/* scroll-margin for sticky nav *\/\n#features, #how, #pricing, #story, #formats, #faq, #download { scroll-margin-top: 90px; }\n<\/style>\n<\/head>\n<body>\n\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\n NAV\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 -->\n<header class=\"wm-nav\" id=\"wm-nav\">\n <div class=\"wm-nav-inner\">\n\n <a href=\"#\" class=\"wm-logo\">\n <span class=\"wm-logo-bolt\">\u26a1<\/span>\n <span class=\"wm-logo-name\">WebSize<\/span>\n <\/a>\n\n <div class=\"wm-nav-center\">\n <nav class=\"wm-nav-links\">\n <a href=\"#features\" class=\"wm-nav-link\" data-target=\"#features\">Funkcie<\/a>\n <a href=\"#how\" class=\"wm-nav-link\" data-target=\"#how\">Ako funguje<\/a>\n <a href=\"#pricing\" class=\"wm-nav-link\" data-target=\"#pricing\">Cena<\/a>\n\n <div class=\"wm-dropdown\" id=\"wm-dropdown\">\n <button type=\"button\" class=\"wm-nav-link wm-dropdown-btn\" id=\"wm-more-btn\" aria-expanded=\"false\">\n Viac\n <svg class=\"wm-chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\n <\/button>\n <div class=\"wm-mega\">\n <div class=\"wm-mega-card\">\n <a href=\"#story\" class=\"wm-mega-item\" data-target=\"#story\">\n <span class=\"wm-mega-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z\"\/><\/svg><\/span>\n <span class=\"wm-mega-text\"><strong>Pr\u00edbeh<\/strong><small>Pre\u010do vznikol WebSize<\/small><\/span>\n <\/a>\n <a href=\"#formats\" class=\"wm-mega-item\" data-target=\"#formats\">\n <span class=\"wm-mega-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg><\/span>\n <span class=\"wm-mega-text\"><strong>Form\u00e1ty<\/strong><small>JPEG, PNG, WebP, AVIF, PDF, RAW<\/small><\/span>\n <\/a>\n <a href=\"#faq\" class=\"wm-mega-item\" data-target=\"#faq\">\n <span class=\"wm-mega-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z\"\/><\/svg><\/span>\n <span class=\"wm-mega-text\"><strong>\u010cast\u00e9 ot\u00e1zky<\/strong><small>Odpovede pred n\u00e1kupom<\/small><\/span>\n <\/a>\n <a href=\"#download\" class=\"wm-mega-item\" data-target=\"#download\">\n <span class=\"wm-mega-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3\"\/><\/svg><\/span>\n <span class=\"wm-mega-text\"><strong>Stiahnu\u0165<\/strong><small>7-d\u0148ov\u00fd trial zadarmo<\/small><\/span>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/nav>\n\n <div class=\"wm-lang-sw\">\n <a href=\"\/websize\/\" class=\"wm-lang-btn\" data-lang=\"sk\">SK<\/a>\n <a href=\"\/en\/websize\/\" class=\"wm-lang-btn\" data-lang=\"en\">EN<\/a>\n <\/div>\n <\/div>\n\n <div class=\"wm-nav-actions\">\n <button type=\"button\" class=\"wm-fb-btn\" id=\"wm-fb-btn\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z\"\/><\/svg>\n <span>Feedback<\/span>\n <\/button>\n <a href=\"https:\/\/websize.lemonsqueezy.com\/checkout\/buy\/44340b04-a7ea-437d-9065-a8ada9b5208f\" class=\"wm-cta\" target=\"_blank\" rel=\"noopener\">\n K\u00fapi\u0165 \u2014 \u20ac9.99 <span class=\"wm-cta-arrow\">\u2197<\/span>\n <\/a>\n <\/div>\n\n <button type=\"button\" class=\"wm-burger\" id=\"wm-burger\" aria-label=\"Menu\" aria-expanded=\"false\">\n <span><\/span><span><\/span><span><\/span>\n <\/button>\n <\/div>\n<\/header>\n\n<!-- Mobile overlay -->\n<div class=\"wm-overlay\" id=\"wm-overlay\">\n <div class=\"wm-overlay-top\">\n <span class=\"wm-overlay-logo\"><span class=\"wm-logo-bolt\">\u26a1<\/span> WebSize<\/span>\n <button type=\"button\" class=\"wm-overlay-close\" id=\"wm-overlay-close\" aria-label=\"Zavrie\u0165\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg>\n <\/button>\n <\/div>\n <nav class=\"wm-overlay-links\">\n <a href=\"#features\" class=\"wm-overlay-link\">Funkcie<\/a>\n <a href=\"#how\" class=\"wm-overlay-link\">Ako funguje<\/a>\n <a href=\"#pricing\" class=\"wm-overlay-link\">Cena<\/a>\n <button type=\"button\" class=\"wm-overlay-link wm-overlay-acc-btn\" id=\"wm-more-mob\" aria-expanded=\"false\">\n Viac\n <svg class=\"wm-chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\n <\/button>\n <div class=\"wm-overlay-sub\" id=\"wm-more-sub\">\n <a href=\"#story\" class=\"wm-overlay-sublink\">Pr\u00edbeh<\/a>\n <a href=\"#formats\" class=\"wm-overlay-sublink\">Form\u00e1ty<\/a>\n <a href=\"#faq\" class=\"wm-overlay-sublink\">\u010cast\u00e9 ot\u00e1zky<\/a>\n <a href=\"#download\" class=\"wm-overlay-sublink\">Stiahnu\u0165<\/a>\n <\/div>\n <\/nav>\n <div class=\"wm-overlay-actions\">\n <div class=\"wm-lang-sw wm-lang-sw-mob\">\n <a href=\"\/websize\/\" class=\"wm-lang-btn\" data-lang=\"sk\">SK<\/a>\n <a href=\"\/en\/websize\/\" class=\"wm-lang-btn\" data-lang=\"en\">EN<\/a>\n <\/div>\n <button type=\"button\" class=\"wm-fb-btn wm-fb-btn-mob\" id=\"wm-fb-btn-mob\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z\"\/><\/svg>\n <span>Feedback<\/span>\n <\/button>\n <a href=\"https:\/\/websize.lemonsqueezy.com\/checkout\/buy\/44340b04-a7ea-437d-9065-a8ada9b5208f\" class=\"wm-cta wm-cta-mob\" target=\"_blank\" rel=\"noopener\">K\u00fapi\u0165 \u2014 \u20ac9.99 <span class=\"wm-cta-arrow\">\u2197<\/span><\/a>\n <\/div>\n<\/div>\n\n<!-- Feedback modal -->\n<div class=\"wm-fb-modal\" id=\"wm-fb-modal\">\n <div class=\"wm-fb-card\">\n <div class=\"wm-fb-head\">\n <span class=\"wm-fb-title\">Feedback<\/span>\n <button type=\"button\" class=\"wm-fb-x\" id=\"wm-fb-close\" aria-label=\"Zavrie\u0165\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg>\n <\/button>\n <\/div>\n <form id=\"wm-fb-form\">\n <textarea id=\"wm-fb-text\" class=\"wm-fb-textarea\" placeholder=\"Nap\u00ed\u0161 n\u00e1m \u010doko\u013evek \u2014 n\u00e1pad, chybu, pripomienku\u2026\" required><\/textarea>\n <input type=\"text\" name=\"website\" class=\"wm-fb-hp\" tabindex=\"-1\" autocomplete=\"off\" aria-hidden=\"true\" id=\"wm-fb-hp\">\n <div class=\"wm-fb-footer\">\n <span class=\"wm-fb-note\" id=\"wm-fb-status\">V\u00e1\u017eime si ka\u017ed\u00fd feedback. Na spr\u00e1vy neodpoved\u00e1me, ale ka\u017ed\u00fa si pre\u010d\u00edtame.<\/span>\n <button type=\"submit\" class=\"wm-fb-submit\" id=\"wm-fb-submit\">Odosla\u0165<\/button>\n <\/div>\n <\/form>\n <\/div>\n<\/div>\n\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\n HERO\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 -->\n<section class=\"hero\">\n <p class=\"hero-eyebrow\">macOS Menu Bar App<\/p>\n <div class=\"hero-bolt\">\u26a1<\/div>\n <h1>Obr\u00e1zky na web.<br><em>Za 3 sekundy.<\/em><\/h1>\n <p class=\"hero-sub\">Presu\u0148 obr\u00e1zky na \u26a1 ikonu v menu bare. Hotovo. \u017diadne uploady, \u017eiadne okn\u00e1 navy\u0161e, \u017eiadne straten\u00e9 min\u00faty.<\/p>\n <div class=\"hero-btns\">\n <a href=\"https:\/\/www.kanda.sk\/websize_update\/WebSize.zip\" class=\"btn-p\">\u2b07 Stiahnu\u0165 zadarmo<\/a>\n <a href=\"#how\" class=\"btn-s\">Ako to funguje<\/a>\n <\/div>\n <p class=\"hero-fine\"><span>7 dn\u00ed zadarmo<\/span> \u00b7 bez kreditnej karty \u00b7 macOS 14+ \u00b7 Apple Silicon & Intel<\/p>\n <div class=\"hero-mock\">\n <div class=\"mock-win\">\n <div class=\"mock-bar\">\n <div class=\"dot dot-r\"><\/div><div class=\"dot dot-y\"><\/div><div class=\"dot dot-g\"><\/div>\n <div class=\"mock-title\">\u26a1 WebSize<\/div>\n <\/div>\n <div class=\"mock-body\">\n <div class=\"mock-dz\">\n <div class=\"mock-dz-icon\">\ud83d\uddbc\ufe0f<\/div>\n <div class=\"mock-dz-txt\">Presu\u0148 obr\u00e1zky sem<\/div>\n <div class=\"mock-dz-fmt\">JPEG \u00b7 PNG \u00b7 HEIC \u00b7 WebP \u00b7 AVIF \u00b7 PDF \u00b7 RAW<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"sec-div\"><\/div>\n\n<!-- PAIN -->\n<section class=\"pain\">\n <div class=\"wrap\">\n <p class=\"eyebrow\">Pozn\u00e1 to ka\u017ed\u00fd<\/p>\n <h2 class=\"title\">Str\u00e1ca\u0161 \u010das zbyto\u010dnos\u0165ami.<\/h2>\n <p class=\"sub\" style=\"margin:0 auto\">Photoshop kv\u00f4li jednej fotke. Online n\u00e1stroje \u010do uploaduj\u00fa tvoje obr\u00e1zky na cudzie servery. \u017diadna batch optimaliz\u00e1cia. St\u00e1le dookola.<\/p>\n <div class=\"pain-grid\">\n <div class=\"pain-card\">\n <div class=\"pain-em\"><svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8A8070\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg><\/div>\n <p><strong>Photoshop kv\u00f4li jednej fotke.<\/strong> Export, \u010dakanie, premenovanie. Ka\u017ed\u00fd de\u0148 to ist\u00e9.<\/p>\n <\/div>\n <div class=\"pain-card\">\n <div class=\"pain-em\"><svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8A8070\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"16 16 12 12 8 16\"\/><line x1=\"12\" y1=\"12\" x2=\"12\" y2=\"21\"\/><path d=\"M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3\"\/><\/svg><\/div>\n <p><strong>Upload na cudzie servery.<\/strong> Tvoje fotky cestuj\u00fa niekam na internet. A st\u00e1le mus\u00ed\u0161 \u010daka\u0165.<\/p>\n <\/div>\n <div class=\"pain-card\">\n <div class=\"pain-em\"><svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8A8070\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/><\/svg><\/div>\n <p><strong>10 obr\u00e1zkov = 10\u00d7 to ist\u00e9.<\/strong> \u017diadna d\u00e1vkov\u00e1 optimaliz\u00e1cia, len klikanie.<\/p>\n <\/div>\n <div class=\"pain-card\">\n <div class=\"pain-em\"><svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8A8070\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"\/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/><\/svg><\/div>\n <p><strong>Fotky klientov na cudz\u00edch serveroch.<\/strong> GDPR. NDA. Nepr\u00edjemn\u00fd pocit.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"sec-div\"><\/div>\n\n<!-- FEATURES -->\n<section id=\"features\">\n <div class=\"wrap\">\n <p class=\"eyebrow\">Funkcie<\/p>\n <h2 class=\"title\">V\u0161etko \u010do potrebuje\u0161.<br>Ni\u010d \u010do nepotrebuje\u0161.<\/h2>\n <div class=\"feat-grid\">\n <div class=\"feat-card\">\n <div class=\"feat-ico\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F5C518\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"13 2 13 9 20 9\"\/><polygon points=\"22 12 12 2 2 12 2 22 22 22 22 12\"\/><\/svg><\/div>\n <h3>Drag & Drop do menu baru<\/h3>\n <p>Presu\u0148 obr\u00e1zky priamo na \u26a1 ikonu. Okno sa otvor\u00ed samo, kompresia be\u017e\u00ed okam\u017eite \u2014 bez klikania.<\/p>\n <\/div>\n <div class=\"feat-card\">\n <div class=\"feat-ico\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F5C518\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2\"\/><line x1=\"12\" y1=\"12\" x2=\"12\" y2=\"16\"\/><line x1=\"10\" y1=\"14\" x2=\"14\" y2=\"14\"\/><\/svg><\/div>\n <h3>D\u00e1vkov\u00e1 kompresia<\/h3>\n <p>Vyber desiatky obr\u00e1zkov z Finderu, presu\u0148 ich naraz. WebSize ich spracuje v\u0161etky s progress barom v re\u00e1lnom \u010dase.<\/p>\n <\/div>\n <div class=\"feat-card\">\n <div class=\"feat-ico\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F5C518\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"4\" y1=\"21\" x2=\"4\" y2=\"14\"\/><line x1=\"4\" y1=\"10\" x2=\"4\" y2=\"3\"\/><line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"3\"\/><line x1=\"20\" y1=\"21\" x2=\"20\" y2=\"16\"\/><line x1=\"20\" y1=\"12\" x2=\"20\" y2=\"3\"\/><line x1=\"1\" y1=\"14\" x2=\"7\" y2=\"14\"\/><line x1=\"9\" y1=\"8\" x2=\"15\" y2=\"8\"\/><line x1=\"17\" y1=\"16\" x2=\"23\" y2=\"16\"\/><\/svg><\/div>\n <h3>Presn\u00e9 nastavenia<\/h3>\n <p>Max ve\u013ekos\u0165 v KB, limit dlh\u0161ej strany, v\u00fdstupn\u00fd form\u00e1t, vlastn\u00fd suffix \u2014 v\u0161etko nastavite\u013en\u00e9.<\/p>\n <\/div>\n <div class=\"feat-card\">\n <div class=\"feat-ico\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F5C518\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg><\/div>\n <h3>100% lok\u00e1lne<\/h3>\n <p>V\u0161etko prebieha na tvojom Macu. \u017diadny server, \u017eiadny upload, \u017eiadne riziko pre s\u00fakromie.<\/p>\n <\/div>\n <div class=\"feat-card\">\n <div class=\"feat-ico\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F5C518\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg><\/div>\n <h3>V\u0161etky form\u00e1ty<\/h3>\n <p>JPEG, PNG, WebP, AVIF, HEIC, TIFF, BMP, GIF, PDF a Camera RAW \u2014 CR2, ARW, NEF, DNG a \u010fal\u0161ie.<\/p>\n <\/div>\n <div class=\"feat-card\">\n <div class=\"feat-ico\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F5C518\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"\/><\/svg><\/div>\n <h3>Inteligentn\u00e1 kompresia<\/h3>\n <p>Automaticky n\u00e1jde najlep\u0161\u00ed pomer kvalita\/ve\u013ekos\u0165. Ak kompresia nepom\u00f4\u017ee, origin\u00e1l nech\u00e1 na pokoji.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"sec-div\"><\/div>\n\n<!-- HOW -->\n<section class=\"how\" id=\"how\">\n <div class=\"wrap\">\n <div class=\"how-inner\">\n <div>\n <p class=\"eyebrow\">Ako to funguje<\/p>\n <h2 class=\"title\">Tri kroky.<br>Jeden pohyb my\u0161ou.<\/h2>\n <div class=\"how-steps\">\n <div class=\"how-step\">\n <div class=\"step-n\">1<\/div>\n <div class=\"step-c\">\n <h4>Spusti WebSize<\/h4>\n <p>App sed\u00ed v menu bare, v\u017edy po ruke. Nastav \"Launch at Login\" a zabudne\u0161, \u017ee tam je.<\/p>\n <\/div>\n <\/div>\n <div class=\"how-step\">\n <div class=\"step-n\">2<\/div>\n <div class=\"step-c\">\n <h4>Presu\u0148 obr\u00e1zky<\/h4>\n <p>Priamo na \u26a1 ikonu \u2014 alebo klikni a otvor\u00ed sa drop z\u00f3na. Multi-select, PDF, RAW, cel\u00e9 prie\u010dinky.<\/p>\n <\/div>\n <\/div>\n <div class=\"how-step\">\n <div class=\"step-n\">3<\/div>\n <div class=\"step-c\">\n <h4>Hotovo<\/h4>\n <p>Skomprimovan\u00e9 s\u00fabory s\u00fa ved\u013ea origin\u00e1lov s tvoj\u00edm suffixom (napr. <code style=\"font-family:var(--mono);font-size:13px;color:var(--accent)\">foto-web.jpg<\/code>). Origin\u00e1l nedotknut\u00fd.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"how-vis\">\n <span style=\"position:relative;z-index:1;filter:drop-shadow(0 0 28px rgba(245,197,24,.7))\">\u26a1<\/span>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"sec-div\"><\/div>\n\n<!-- FORMATS -->\n<section class=\"fmts\" id=\"formats\">\n <div class=\"wrap\">\n <p class=\"eyebrow\">Podporovan\u00e9 form\u00e1ty<\/p>\n <h2 class=\"title\">\u010co dok\u00e1\u017ee WebSize spracova\u0165<\/h2>\n <div class=\"fmt-section\">\n <div class=\"fmt-label\">Vstupn\u00e9 form\u00e1ty<\/div>\n <div class=\"fmt-tags\">\n <span class=\"fmt-tag\">JPEG<\/span><span class=\"fmt-tag\">PNG<\/span><span class=\"fmt-tag\">WebP<\/span>\n <span class=\"fmt-tag\">AVIF<\/span><span class=\"fmt-tag\">HEIC<\/span><span class=\"fmt-tag\">HEIF<\/span>\n <span class=\"fmt-tag\">TIFF<\/span><span class=\"fmt-tag\">BMP<\/span><span class=\"fmt-tag\">GIF<\/span>\n <span class=\"fmt-tag\">PDF<\/span><span class=\"fmt-tag\">RAW<\/span><span class=\"fmt-tag\">CR2<\/span>\n <span class=\"fmt-tag\">ARW<\/span><span class=\"fmt-tag\">NEF<\/span><span class=\"fmt-tag\">DNG<\/span>\n <span class=\"fmt-tag\">RW2<\/span>\n <\/div>\n <\/div>\n <div class=\"fmt-divider\"><\/div>\n <div class=\"fmt-section\">\n <div class=\"fmt-label\">V\u00fdstupn\u00e9 form\u00e1ty<\/div>\n <div class=\"fmt-tags out\">\n <span class=\"fmt-tag\">JPEG<\/span><span class=\"fmt-tag\">PNG<\/span>\n <span class=\"fmt-tag\">WebP<\/span><span class=\"fmt-tag\">AVIF<\/span>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"sec-div\"><\/div>\n\n<!-- PRICING -->\n<section class=\"pricing\" id=\"pricing\">\n <div class=\"wrap\">\n <p class=\"eyebrow\">Cena<\/p>\n <h2 class=\"title\">Jednoduch\u00e9. Jednorazov\u00e9.<\/h2>\n <p class=\"sub\" style=\"margin:0 auto\">\u017diadne predplatn\u00e9. Zaplat\u00ed\u0161 raz, pou\u017e\u00edva\u0161 nav\u017edy.<\/p>\n <div class=\"price-card\">\n <div class=\"price-glow\"><\/div>\n <div class=\"price-head\">\n <div class=\"price-badge\">Do\u017eivotn\u00e1 licencia<\/div>\n <div class=\"price-num\"><sup>\u20ac<\/sup>9<span style=\"font-size:38px;letter-spacing:-1px\">.99<\/span><\/div>\n <p class=\"price-period\">jednorazov\u00e1 platba<\/p>\n <p class=\"price-vat\">bez DPH \u00b7 na jeden Mac<\/p>\n <p class=\"price-sub-note\">aktualiz\u00e1cie zadarmo<\/p>\n <\/div>\n <div class=\"price-feats\">\n <div class=\"pf\"><div class=\"pf-chk\">\u2713<\/div><span>Neobmedzen\u00e9 pou\u017eitie<\/span><\/div>\n <div class=\"pf\"><div class=\"pf-chk\">\u2713<\/div><span>V\u0161etky form\u00e1ty \u2014 JPEG, PNG, WebP, AVIF, PDF, RAW<\/span><\/div>\n <div class=\"pf\"><div class=\"pf-chk\">\u2713<\/div><span>Bud\u00face aktualiz\u00e1cie zadarmo<\/span><\/div>\n <div class=\"pf\"><div class=\"pf-chk\">\u2713<\/div><span>100% lok\u00e1lne \u2014 \u017eiadny cloud<\/span><\/div>\n <div class=\"pf\"><div class=\"pf-chk\">\u2713<\/div><span>Notarizovan\u00e1 Apple Developer ID<\/span><\/div>\n <\/div>\n <div class=\"price-cta\">\n <a href=\"https:\/\/websize.lemonsqueezy.com\/checkout\/buy\/44340b04-a7ea-437d-9065-a8ada9b5208f\" class=\"btn-buy\" target=\"_blank\" rel=\"noopener\">K\u00fapi\u0165 WebSize<\/a>\n <p class=\"price-trial\">alebo <a href=\"#download\">stiahnu\u0165 7-d\u0148ov\u00fd trial zadarmo<\/a><\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"sec-div\"><\/div>\n\n<!-- STORY -->\n<section class=\"story\" id=\"story\">\n <div class=\"wrap\">\n <div class=\"story-inner\">\n <div class=\"story-photo\">\n <span class=\"story-ph-ico\">\ud83d\udc68\u200d\ud83d\udcbb<\/span>\n <div class=\"story-ph-lbl\">\n <strong>Peter Kanda<\/strong>\n <span>Webdeveloper & Designer \u00b7 Slovensko<\/span>\n <\/div>\n <\/div>\n <div class=\"story-con\">\n <p class=\"eyebrow\">Pr\u00edbeh<\/p>\n <blockquote class=\"story-quote\">\"Nezn\u00e1\u0161al som otv\u00e1ra\u0165 Photoshop kv\u00f4li jednej fotke. <em>Tak som nap\u00edsal nie\u010do lep\u0161ie.<\/em>\"<\/blockquote>\n <div class=\"story-body\">\n <p>Som webdeveloper a grafik. Ka\u017ed\u00fd de\u0148 pracujem s obr\u00e1zkami \u2014 pre weby, pre klientov, pre seba. A ka\u017ed\u00fd de\u0148 som str\u00e1cal \u010das na to ist\u00e9: otvori\u0165 Photoshop, exportova\u0165, \u010daka\u0165, stiahnu\u0165, premenova\u0165.<\/p>\n <p>H\u013eadal som nie\u010do, \u010do sed\u00ed v rohu obrazovky a sprav\u00ed pr\u00e1cu za m\u0148a \u2014 bez klikania, bez uploadu, bez \u010dakania. Nena\u0161iel som to. Tak som si to nap\u00edsal.<\/p>\n <p>WebSize vznikol z osobnej frustr\u00e1cie \u2014 a z presved\u010denia, \u017ee n\u00e1stroje pre v\u00fdvoj\u00e1rov a grafikov by mali by\u0165 r\u00fdchle, jednoduch\u00e9 a re\u0161pektova\u0165 tvoje s\u00fakromie.<\/p>\n <p class=\"story-sig\">\u2014 Peter Kanda, KANDA Production s.r.o.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"sec-div\"><\/div>\n\n<!-- FAQ -->\n<section id=\"faq\">\n <div class=\"wrap\">\n <p class=\"eyebrow\">FAQ<\/p>\n <h2 class=\"title\">\u010cast\u00e9 ot\u00e1zky<\/h2>\n <div class=\"faq-list\" id=\"faq-list\"><\/div>\n <\/div>\n<\/section>\n\n<div class=\"sec-div\"><\/div>\n\n<!-- FINAL CTA -->\n<section class=\"cta-fin\" id=\"download\">\n <div class=\"wrap\">\n <span class=\"cta-bolt\">\u26a1<\/span>\n <h2>Presta\u0165 str\u00e1ca\u0165 \u010das.<br>Za\u010dni <em>o 30 sek\u00fand.<\/em><\/h2>\n <div class=\"hero-btns\" style=\"margin-top:30px\">\n <a href=\"https:\/\/www.kanda.sk\/websize_update\/WebSize.zip\" class=\"btn-p\" style=\"font-size:17px;padding:15px 34px\">\u2b07 Stiahnu\u0165 zadarmo<\/a>\n <\/div>\n <p style=\"margin-top:14px;font-size:13px;color:var(--text-3)\">7-d\u0148ov\u00fd trial \u00b7 bez kreditnej karty \u00b7 macOS 14+ \u00b7 Apple Silicon & Intel<\/p>\n <\/div>\n<\/section>\n\n<!-- FOOTER -->\n<footer>\n <div class=\"foot-inner\">\n <div class=\"foot-logo\">\n <span class=\"foot-logo-bolt\">\u26a1<\/span>\n <span>WebSize<\/span>\n <span class=\"foot-sub\">by KANDA Production<\/span>\n <\/div>\n <div class=\"foot-links\">\n <a href=\"mailto:kanda.photography.sk@gmail.com\" class=\"foot-link\">Kontakt<\/a>\n <a href=\"https:\/\/www.kanda.sk\" class=\"foot-link\">kanda.sk<\/a>\n <a href=\"#\" class=\"foot-link\">Podmienky<\/a>\n <a href=\"#\" class=\"foot-link\">Ochrana s\u00fakromia<\/a>\n <\/div>\n <p class=\"foot-copy\">\u00a9 2026 KANDA Production s.r.o.<\/p>\n <\/div>\n<\/footer>\n\n<script>\n(function () {\n \/* \u2500\u2500 Nav scroll \u2500\u2500 *\/\n var nav = document.getElementById('wm-nav');\n window.addEventListener('scroll', function () {\n nav.classList.toggle('wm-scrolled', window.scrollY > 12);\n }, { passive: true });\n\n \/* \u2500\u2500 Lang switcher \u2500\u2500 *\/\n var langPaths = { sk: '\/websize\/', en: '\/en\/websize\/' };\n var activeLang = window.location.pathname.indexOf('\/en\/') !== -1 ? 'en' : 'sk';\n document.querySelectorAll('.wm-lang-btn').forEach(function (btn) {\n var lang = btn.getAttribute('data-lang');\n btn.classList.toggle('wm-active', lang === activeLang);\n btn.addEventListener('click', function (e) {\n e.preventDefault();\n if (lang === activeLang) return;\n window.location.href = window.location.origin + langPaths[lang];\n });\n });\n\n \/* \u2500\u2500 Mega dropdown \u2500\u2500 *\/\n var dropdown = document.getElementById('wm-dropdown');\n var moreBtn = document.getElementById('wm-more-btn');\n var closeTimer = null;\n function openDrop() { clearTimeout(closeTimer); dropdown.classList.add('open'); moreBtn.setAttribute('aria-expanded','true'); }\n function closeDrop() { dropdown.classList.remove('open'); moreBtn.setAttribute('aria-expanded','false'); }\n function schedClose(){ clearTimeout(closeTimer); closeTimer = setTimeout(closeDrop, 300); }\n if (dropdown && moreBtn) {\n dropdown.addEventListener('mouseenter', openDrop);\n dropdown.addEventListener('mouseleave', schedClose);\n moreBtn.addEventListener('click', function (e) { e.preventDefault(); dropdown.classList.contains('open') ? closeDrop() : openDrop(); });\n document.addEventListener('click', function (e) { if (!dropdown.contains(e.target)) closeDrop(); });\n document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeDrop(); });\n }\n\n \/* \u2500\u2500 Mobile menu \u2500\u2500 *\/\n var burger = document.getElementById('wm-burger');\n var overlay = document.getElementById('wm-overlay');\n var closeBtn = document.getElementById('wm-overlay-close');\n var moreMob = document.getElementById('wm-more-mob');\n var moreSub = document.getElementById('wm-more-sub');\n function openMenu() { overlay.classList.add('open'); document.body.classList.add('wm-locked'); burger.setAttribute('aria-expanded','true'); }\n function closeMenu() { overlay.classList.remove('open'); document.body.classList.remove('wm-locked'); burger.setAttribute('aria-expanded','false'); }\n if (burger && overlay) {\n burger.addEventListener('click', openMenu);\n closeBtn.addEventListener('click', closeMenu);\n overlay.querySelectorAll('a').forEach(function (a) { a.addEventListener('click', closeMenu); });\n window.addEventListener('resize', function () { if (window.innerWidth > 960) closeMenu(); });\n }\n if (moreMob && moreSub) {\n moreMob.addEventListener('click', function () {\n var o = moreSub.classList.toggle('open');\n moreMob.classList.toggle('open', o);\n moreMob.setAttribute('aria-expanded', o ? 'true' : 'false');\n });\n }\n\n \/* \u2500\u2500 Feedback modal \u2500\u2500 *\/\n var fbModal = document.getElementById('wm-fb-modal');\n var fbForm = document.getElementById('wm-fb-form');\n var fbText = document.getElementById('wm-fb-text');\n var fbSubmit = document.getElementById('wm-fb-submit');\n var fbStatus = document.getElementById('wm-fb-status');\n var fbClose = document.getElementById('wm-fb-close');\n var fbHp = document.getElementById('wm-fb-hp');\n function openFb() { fbModal.classList.add('open'); document.body.classList.add('wm-locked'); setTimeout(function(){fbText&&fbText.focus();},50); }\n function closeFb() { fbModal.classList.remove('open'); document.body.classList.remove('wm-locked'); }\n ['wm-fb-btn','wm-fb-btn-mob'].forEach(function (id) {\n var btn = document.getElementById(id);\n if (btn) btn.addEventListener('click', function () { closeMenu(); openFb(); });\n });\n if (fbClose) fbClose.addEventListener('click', closeFb);\n if (fbModal) fbModal.addEventListener('click', function (e) { if (e.target === fbModal) closeFb(); });\n document.addEventListener('keydown', function (e) { if (e.key === 'Escape') { closeFb(); closeDrop(); } });\n if (fbForm) {\n fbForm.addEventListener('submit', function (e) {\n e.preventDefault();\n var msg = fbText.value.trim();\n if (!msg || (fbHp && fbHp.value)) return;\n fbSubmit.disabled = true; fbSubmit.textContent = 'Odosielam\u2026';\n var fd = new FormData();\n fd.append('action', 'wm_send_feedback');\n fd.append('message', msg);\n fd.append('page_url', window.location.href);\n fetch(window.location.origin + '\/wp-admin\/admin-ajax.php', { method: 'POST', body: fd })\n .then(function (r) { return r.json(); })\n .then(function (d) {\n if (d && d.success) {\n fbText.style.display = 'none'; fbSubmit.style.display = 'none';\n fbStatus.textContent = '\u010eakujeme! Spr\u00e1vu sme dostali.';\n setTimeout(closeFb, 1800);\n } else { throw new Error(); }\n })\n .catch(function () {\n fbStatus.textContent = 'Nie\u010do sa pokazilo \u2014 sk\u00fas to pros\u00edm nesk\u00f4r.';\n fbSubmit.disabled = false; fbSubmit.textContent = 'Odosla\u0165';\n });\n });\n }\n\n \/* \u2500\u2500 Scroll-spy \u2500\u2500 *\/\n var spyLinks = document.querySelectorAll('[data-target]');\n var sections = ['#features','#how','#pricing','#story','#formats','#faq','#download']\n .map(function (id) { return document.querySelector(id); }).filter(Boolean);\n if (sections.length && 'IntersectionObserver' in window) {\n sections.forEach(function (sec) {\n new IntersectionObserver(function (entries) {\n if (entries[0].isIntersecting) {\n var id = '#' + sec.id;\n spyLinks.forEach(function (el) { el.classList.toggle('wm-active', el.getAttribute('data-target') === id); });\n }\n }, { rootMargin: '-35% 0px -55% 0px' }).observe(sec);\n });\n }\n\n \/* \u2500\u2500 FAQ accordion \u2500\u2500 *\/\n var faqData = [\n { q: \"Funguje WebSize na Apple Silicon aj Intel Macu?\", a: \"\u00c1no. WebSize je univerz\u00e1lna app \u2014 be\u017e\u00ed nat\u00edvne na Apple Silicon (M1\/M2\/M3\/M4) aj na Intel Macoch.\" },\n { q: \"Kde sa ukladaj\u00fa skomprimovan\u00e9 s\u00fabory?\", a: \"Ved\u013ea origin\u00e1lov, s tvoj\u00edm suffixom (predvolene <code style='font-family:monospace;color:#F5C518'>-web<\/code>). Tak\u017ee foto.jpg \u2192 foto-web.jpg. Origin\u00e1l ost\u00e1va nedotknut\u00fd. M\u00f4\u017ee\u0161 nastavi\u0165 aj vlastn\u00fa v\u00fdstupn\u00fa zlo\u017eku.\" },\n { q: \"Id\u00fa moje obr\u00e1zky na nejak\u00fd server?\", a: \"V\u00f4bec nie. WebSize be\u017e\u00ed 100% lok\u00e1lne na tvojom Macu. \u017diadny upload, \u017eiadny server, \u017eiadne riziko pre s\u00fakromie. Tvoje obr\u00e1zky neopustia tvoj po\u010d\u00edta\u010d.\" },\n { q: \"Ak\u00fd je rozdiel medzi AVIF a WebP?\", a: \"AVIF je nov\u0161\u00ed form\u00e1t s e\u0161te lep\u0161ou kompresiou \u2014 rovnak\u00e1 vizu\u00e1lna kvalita, ale s\u00fabor je o 20\u201330% men\u0161\u00ed ako WebP. Podporuj\u00fa ho v\u0161etky modern\u00e9 prehliada\u010de (Chrome, Safari, Firefox).\" },\n { q: \"Funguje PDF kompresia aj pre viac-stranov\u00e9 dokumenty?\", a: \"\u00c1no. WebSize renderuje ka\u017ed\u00fa stranu PDF ako samostatn\u00fd obr\u00e1zok (PDF-web-p1.jpg, p2.jpg...) v rozl\u00ed\u0161en\u00ed 144 dpi \u2014 ide\u00e1lne pre web.\" },\n { q: \"M\u00f4\u017eem WebSize pou\u017e\u00edva\u0165 bez internetu?\", a: \"\u00c1no. V\u0161etko prebieha lok\u00e1lne. Internet potrebuje\u0161 iba pre aktiv\u00e1ciu licencie a kontrolu aktualiz\u00e1ci\u00ed.\" },\n { q: \"Ko\u013eko zariaden\u00ed m\u00f4\u017eem aktivova\u0165?\", a: \"Licencia je na jeden Mac. Ak si k\u00fapi\u0161 nov\u00fd Mac, m\u00f4\u017ee\u0161 deaktivova\u0165 star\u00fd cez Nastavenia \u2192 Licencia \u2192 Deaktivova\u0165 a aktivova\u0165 nov\u00fd.\" },\n { q: \"\u010co ak WebSize nedok\u00e1\u017ee zmen\u0161i\u0165 s\u00fabor?\", a: \"Ak je origin\u00e1l u\u017e dobre optimalizovan\u00fd, WebSize ho nech\u00e1 na pokoji. M\u00f4\u017ee\u0161 nastavi\u0165 minim\u00e1lne percento \u00faspory \u2014 ak nie je dosiahnut\u00e9, v\u00fdstupn\u00fd s\u00fabor sa nevytvor\u00ed.\" }\n ];\n var faqList = document.getElementById('faq-list');\n if (faqList) {\n faqData.forEach(function (item) {\n var el = document.createElement('div');\n el.className = 'faq-item';\n el.innerHTML = '<button class=\"faq-q\" onclick=\"(function(b){var i=b.parentElement,was=i.classList.contains(\\'open\\');document.querySelectorAll(\\'.faq-item\\').forEach(function(x){x.classList.remove(\\'open\\')});if(!was)i.classList.add(\\'open\\')})(this)\"><span>' + item.q + '<\/span><div class=\"faq-ico\">\u25be<\/div><\/button><div class=\"faq-a\"><p>' + item.a + '<\/p><\/div>';\n faqList.appendChild(el);\n });\n }\n})();\n<\/script>\n\n<style>\n\/* \u2500\u2500 Entrance animations \u2500\u2500 *\/\n@media (prefers-reduced-motion: no-preference) {\n .wm-reveal {\n opacity: 0;\n transform: translateY(28px);\n transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);\n }\n .wm-reveal.wm-visible { opacity: 1; transform: none; }\n\n \/* stagger siblings *\/\n .wm-reveal[data-delay=\"1\"] { transition-delay: .08s; }\n .wm-reveal[data-delay=\"2\"] { transition-delay: .16s; }\n .wm-reveal[data-delay=\"3\"] { transition-delay: .24s; }\n .wm-reveal[data-delay=\"4\"] { transition-delay: .32s; }\n .wm-reveal[data-delay=\"5\"] { transition-delay: .40s; }\n .wm-reveal[data-delay=\"6\"] { transition-delay: .48s; }\n\n \/* scale variant pre cards *\/\n .wm-reveal-scale {\n opacity: 0;\n transform: translateY(20px) scale(.97);\n transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);\n }\n .wm-reveal-scale.wm-visible { opacity: 1; transform: none; }\n}\n<\/style>\n\n<script>\n(function () {\n if (!('IntersectionObserver' in window)) return;\n\n \/* pridaj triedy na elementy ktor\u00e9 chceme animova\u0165 *\/\n function tag(sel, cls, delayFn) {\n document.querySelectorAll(sel).forEach(function (el, i) {\n el.classList.add(cls);\n if (delayFn) el.setAttribute('data-delay', delayFn(i));\n });\n }\n\n \/* sekcie \u2014 plain fade-up *\/\n tag('section.pain', 'wm-reveal');\n tag('section#features','wm-reveal');\n tag('section.how', 'wm-reveal');\n tag('section.fmts', 'wm-reveal');\n tag('section.pricing', 'wm-reveal');\n tag('section.story', 'wm-reveal');\n tag('.faq-wrap', 'wm-reveal');\n tag('.cta-sec', 'wm-reveal');\n\n \/* karty \u2014 stagger scale *\/\n tag('.pain-card', 'wm-reveal-scale', function(i){ return i+1; });\n tag('.feat-card', 'wm-reveal-scale', function(i){ return i+1; });\n tag('.how-step', 'wm-reveal', function(i){ return i+1; });\n tag('.price-card', 'wm-reveal-scale');\n tag('.story-inner > *', 'wm-reveal', function(i){ return i+1; });\n\n var io = new IntersectionObserver(function (entries) {\n entries.forEach(function (e) {\n if (e.isIntersecting) {\n e.target.classList.add('wm-visible');\n io.unobserve(e.target);\n }\n });\n }, { threshold: 0.12 });\n\n document.querySelectorAll('.wm-reveal, .wm-reveal-scale').forEach(function (el) {\n io.observe(el);\n });\n})();\n<\/script>\n<\/body>\n<\/html>\n\n\t\t<\/div>\n\t<\/div>\n\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"WebSize \u2013 Optimaliz\u00e1cia obr\u00e1zkov za 3 sekundy | macOS \u26a1 WebSize Funkcie Ako funguje Cena Viac Pr\u00edbehPre\u010do vznikol WebSize Form\u00e1tyJPEG, PNG, WebP, AVIF, PDF, RAW \u010cast\u00e9 ot\u00e1zkyOdpovede pred n\u00e1kupom Stiahnu\u01657-d\u0148ov\u00fd...","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-no-header.php","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-3512","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/www.kanda.sk\/en\/wp-json\/wp\/v2\/pages\/3512","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kanda.sk\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.kanda.sk\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.kanda.sk\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kanda.sk\/en\/wp-json\/wp\/v2\/comments?post=3512"}],"version-history":[{"count":10,"href":"https:\/\/www.kanda.sk\/en\/wp-json\/wp\/v2\/pages\/3512\/revisions"}],"predecessor-version":[{"id":3527,"href":"https:\/\/www.kanda.sk\/en\/wp-json\/wp\/v2\/pages\/3512\/revisions\/3527"}],"wp:attachment":[{"href":"https:\/\/www.kanda.sk\/en\/wp-json\/wp\/v2\/media?parent=3512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}