Kalkulator Monta\u017cu CapCut<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --bg: #0a0a0f;\n --surface: #111118;\n --surface2: #18181f;\n --border: rgba(255,255,255,0.07);\n --accent: #0066ff;\n --accent2: #ff6b35;\n --green: #00c896;\n --text: #f0f0f5;\n --muted: #6b6b80;\n --glow-blue: rgba(0,102,255,0.18);\n --glow-green: rgba(0,200,150,0.18);\n --gold: #f5a623;\n --glow-gold: rgba(245,166,35,0.18);\n }\n\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n body {\n background: var(--bg);\n color: var(--text);\n font-family: 'DM Sans', sans-serif;\n min-height: 100vh;\n overflow-x: hidden;\n }\n\n body::before {\n content: '';\n position: fixed;\n inset: 0;\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'\/%3E%3C\/svg%3E\");\n opacity: 0.5;\n pointer-events: none;\n z-index: 0;\n }\n\n .container {\n position: relative;\n z-index: 1;\n max-width: 560px;\n margin: 0 auto;\n padding: 40px 20px 80px;\n }\n\n \/* SCREENS *\/\n .screen { display: none; opacity: 0; transform: translateY(16px); transition: opacity 0.45s cubic-bezier(0.22,1,0.36,1), transform 0.45s cubic-bezier(0.22,1,0.36,1); }\n .screen.active { display: block; }\n .screen.visible { opacity: 1; transform: translateY(0); }\n\n \/* HEADER *\/\n .header { text-align: center; margin-bottom: 40px; }\n\n .badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: var(--accent);\n color: #fff;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n padding: 5px 14px;\n border-radius: 100px;\n margin-bottom: 20px;\n }\n .badge.green { background: var(--green); color: #0a0a0f; }\n\n .header h1 {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(44px, 11vw, 70px);\n line-height: 0.95;\n letter-spacing: 0.01em;\n color: var(--text);\n margin-bottom: 16px;\n }\n .header h1 span { color: var(--accent); display: block; }\n .header h1 span.green { color: var(--green); }\n\n .header p {\n color: var(--muted);\n font-size: 15px;\n line-height: 1.6;\n font-weight: 300;\n max-width: 380px;\n margin: 0 auto;\n }\n\n \/* PERSONA CHOICE *\/\n .persona-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 14px;\n }\n .persona-grid .persona-card.full-width {\n grid-column: 1 \/ -1;\n }\n @media (max-width: 420px) { .persona-grid { grid-template-columns: 1fr; } .persona-grid .persona-card.full-width { grid-column: auto; } }\n\n .persona-card {\n background: var(--surface);\n border: 1.5px solid var(--border);\n border-radius: 20px;\n padding: 28px 22px;\n cursor: pointer;\n transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;\n text-align: center;\n position: relative;\n overflow: hidden;\n }\n .persona-card::after {\n content: '';\n position: absolute;\n top: 0; left: 0; right: 0;\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);\n }\n .persona-card:hover { transform: translateY(-3px); }\n .persona-card.pro:hover { border-color: rgba(0,102,255,0.4); box-shadow: 0 8px 32px rgba(0,102,255,0.15); }\n .persona-card.beginner:hover { border-color: rgba(0,200,150,0.4); box-shadow: 0 8px 32px rgba(0,200,150,0.15); }\n .persona-card.client:hover { border-color: rgba(245,166,35,0.4); box-shadow: 0 8px 32px rgba(245,166,35,0.15); }\n\n .persona-emoji { font-size: 40px; margin-bottom: 14px; display: block; }\n .persona-title { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.05em; margin-bottom: 8px; }\n .persona-card.pro .persona-title { color: var(--accent); }\n .persona-card.beginner .persona-title { color: var(--green); }\n .persona-card.client .persona-title { color: var(--gold); }\n .persona-desc { font-size: 13px; color: var(--muted); line-height: 1.5; font-weight: 300; }\n .persona-arrow { display: inline-block; margin-top: 16px; font-size: 20px; opacity: 0.4; transition: opacity 0.2s, transform 0.2s; }\n .persona-card:hover .persona-arrow { opacity: 1; transform: translateX(4px); }\n\n \/* CARD *\/\n .card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 20px;\n padding: 32px 28px;\n margin-bottom: 16px;\n position: relative;\n overflow: hidden;\n }\n .card.blue::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,102,255,0.4), transparent); }\n .card.green-line::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,200,150,0.4), transparent); }\n .card.gold-line::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(245,166,35,0.5), transparent); }\n\n \/* BACK *\/\n .btn-back {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: none;\n border: none;\n color: var(--muted);\n font-family: 'DM Sans', sans-serif;\n font-size: 13px;\n cursor: pointer;\n padding: 0;\n margin-bottom: 28px;\n transition: color 0.2s;\n }\n .btn-back:hover { color: var(--text); }\n .btn-back svg { width: 14px; height: 14px; }\n\n \/* INPUTS *\/\n .field { margin-bottom: 24px; }\n .field:last-child { margin-bottom: 0; }\n\n label {\n display: block;\n font-size: 13px;\n font-weight: 500;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n color: var(--muted);\n margin-bottom: 10px;\n }\n\n .input-wrap { position: relative; display: flex; align-items: center; }\n\n input[type=\"number\"] {\n width: 100%;\n background: var(--surface2);\n border: 1.5px solid var(--border);\n border-radius: 12px;\n color: var(--text);\n font-family: 'DM Sans', sans-serif;\n font-size: 22px;\n font-weight: 500;\n padding: 16px 60px 16px 20px;\n outline: none;\n transition: border-color 0.2s, box-shadow 0.2s;\n -moz-appearance: textfield;\n }\n input[type=\"number\"]::-webkit-inner-spin-button,\n input[type=\"number\"]::-webkit-outer-spin-button { -webkit-appearance: none; }\n\n .blue-screen input[type=\"number\"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow-blue); }\n .green-screen input[type=\"number\"]:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--glow-green); }\n .gold-screen input[type=\"number\"]:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--glow-gold); }\n .gold-screen select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--glow-gold); }\n\n select {\n width: 100%;\n background: var(--surface2);\n border: 1.5px solid var(--border);\n border-radius: 12px;\n color: var(--text);\n font-family: 'DM Sans', sans-serif;\n font-size: 18px;\n font-weight: 500;\n padding: 16px 20px;\n outline: none;\n cursor: pointer;\n appearance: none;\n transition: border-color 0.2s, box-shadow 0.2s;\n }\n .green-screen select:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--glow-green); }\n\n .select-wrap { position: relative; }\n .select-wrap::after { content: '\u25be'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-size: 14px; }\n\n .unit { position: absolute; right: 18px; font-size: 13px; font-weight: 500; color: var(--muted); pointer-events: none; }\n\n \/* CALC BUTTON *\/\n .btn-calc {\n width: 100%;\n border: none;\n border-radius: 14px;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 26px;\n letter-spacing: 0.12em;\n padding: 22px;\n cursor: pointer;\n margin-top: 8px;\n transition: transform 0.15s, box-shadow 0.15s;\n position: relative;\n overflow: hidden;\n color: #fff;\n text-shadow: 0 1px 4px rgba(0,0,0,0.25);\n }\n .btn-calc.blue { background: var(--accent); }\n .btn-calc.green-btn { background: var(--green); color: #0a0a0f; text-shadow: none; }\n .btn-calc.gold-btn { background: var(--gold); color: #0a0a0f; text-shadow: none; }\n .btn-calc::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.15); transform: translateX(-100%); transition: transform 0.4s; }\n .btn-calc:hover::before { transform: translateX(100%); }\n .btn-calc.blue:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,102,255,0.45); }\n .btn-calc.green-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,200,150,0.35); }\n .btn-calc.gold-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(245,166,35,0.4); }\n .btn-calc:active { transform: translateY(0); }\n\n \/* RESULT *\/\n .result { display: none; opacity: 0; transform: translateY(20px); transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1), transform 0.5s cubic-bezier(0.22,1,0.36,1); }\n .result.visible { display: block; opacity: 1; transform: translateY(0); }\n\n .result-header {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 13px;\n letter-spacing: 0.16em;\n color: var(--muted);\n text-transform: uppercase;\n margin-bottom: 16px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n .result-header::before, .result-header::after { content: ''; flex: 1; height: 1px; background: var(--border); }\n\n .stat-grid { display: grid; gap: 12px; }\n\n .stat {\n background: var(--surface2);\n border: 1px solid var(--border);\n border-radius: 14px;\n padding: 20px 22px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n position: relative;\n overflow: hidden;\n transition: border-color 0.2s;\n }\n .stat:hover { border-color: rgba(255,255,255,0.12); }\n\n .stat.hi-blue { background: rgba(0,102,255,0.07); border-color: rgba(0,102,255,0.25); }\n .stat.hi-blue::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); border-radius: 3px 0 0 3px; }\n .stat.hi-blue .stat-value { color: var(--accent); }\n\n .stat.hi-green { background: rgba(0,200,150,0.07); border-color: rgba(0,200,150,0.25); }\n .stat.hi-green::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--green); border-radius: 3px 0 0 3px; }\n .stat.hi-green .stat-value { color: var(--green); }\n\n .stat.hi-gold { background: rgba(245,166,35,0.07); border-color: rgba(245,166,35,0.25); }\n .stat.hi-gold::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); border-radius: 3px 0 0 3px; }\n .stat.hi-gold .stat-value { color: var(--gold); }\n\n .stat-label { font-size: 14px; color: var(--muted); line-height: 1.4; font-weight: 400; }\n .stat-value { font-family: 'Bebas Neue', sans-serif; font-size: 32px; letter-spacing: 0.02em; color: var(--text); white-space: nowrap; }\n .stat-unit { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 3px; }\n\n \/* INFO BOX *\/\n .info-box {\n border-radius: 16px;\n padding: 22px;\n margin-top: 12px;\n position: relative;\n overflow: hidden;\n }\n .info-box.orange { background: linear-gradient(135deg, rgba(255,107,53,0.08), rgba(0,102,255,0.05)); border: 1px solid rgba(255,107,53,0.2); }\n .info-box.teal { background: linear-gradient(135deg, rgba(0,200,150,0.07), rgba(0,102,255,0.04)); border: 1px solid rgba(0,200,150,0.2); }\n .info-box.gold { background: linear-gradient(135deg, rgba(245,166,35,0.08), rgba(255,107,53,0.04)); border: 1px solid rgba(245,166,35,0.2); }\n .info-box::before { position: absolute; font-size: 60px; right: -8px; top: -8px; opacity: 0.1; transform: rotate(15deg); }\n .info-box.orange::before { content: '\ud83d\udca1'; }\n .info-box.teal::before { content: '\ud83d\ude80'; }\n .info-box.gold::before { content: '\u26a1'; }\n .info-box p { font-size: 14px; line-height: 1.65; color: rgba(240,240,245,0.8); font-weight: 300; }\n .info-box strong { font-weight: 500; }\n .info-box.orange strong { color: var(--accent2); }\n .info-box.teal strong { color: var(--green); }\n .info-box.gold strong { color: var(--gold); }\n\n \/* CTA *\/\n .btn-cta {\n display: block;\n width: 100%;\n border: none;\n border-radius: 14px;\n font-family: 'DM Sans', sans-serif;\n font-size: 16px;\n font-weight: 700;\n padding: 20px;\n cursor: pointer;\n margin-top: 12px;\n text-align: center;\n text-decoration: none;\n letter-spacing: 0.01em;\n transition: transform 0.15s, box-shadow 0.2s;\n position: relative;\n overflow: hidden;\n color: #fff;\n }\n .btn-cta.orange { background: linear-gradient(135deg, var(--accent2), #ff9a6c); }\n .btn-cta.teal { background: linear-gradient(135deg, var(--green), #00e0b0); color: #0a0a0f; }\n .btn-cta.gold { background: linear-gradient(135deg, var(--gold), #ffc55a); color: #0a0a0f; }\n .btn-cta::after { content: '\u2192'; margin-left: 8px; display: inline-block; transition: transform 0.2s; }\n .btn-cta.orange:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(255,107,53,0.35); }\n .btn-cta.teal:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(0,200,150,0.35); }\n .btn-cta.gold:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(245,166,35,0.35); }\n .btn-cta:hover::after { transform: translateX(4px); }\n .btn-cta:active { transform: translateY(0); }\n\n \/* TEXT INPUT *\/\n input[type=\"text\"], input[type=\"email\"], textarea {\n width: 100%;\n background: var(--surface2);\n border: 1.5px solid var(--border);\n border-radius: 12px;\n color: var(--text);\n font-family: 'DM Sans', sans-serif;\n font-size: 16px;\n font-weight: 400;\n padding: 16px 20px;\n outline: none;\n transition: border-color 0.2s, box-shadow 0.2s;\n resize: none;\n }\n .gold-screen input[type=\"text\"]:focus,\n .gold-screen input[type=\"email\"]:focus,\n .gold-screen textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--glow-gold); }\n input[type=\"text\"]::placeholder, input[type=\"email\"]::placeholder, textarea::placeholder { color: var(--muted); }\n\n \/* BADGE GOLD *\/\n .badge.gold { background: var(--gold); color: #0a0a0f; }\n\n \/* SUCCESS STATE *\/\n .success-box {\n background: rgba(245,166,35,0.08);\n border: 1px solid rgba(245,166,35,0.25);\n border-radius: 16px;\n padding: 28px 24px;\n text-align: center;\n display: none;\n }\n .success-box.show { display: block; }\n .success-icon { font-size: 48px; margin-bottom: 12px; }\n .success-title { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 0.05em; color: var(--gold); margin-bottom: 8px; }\n .success-text { font-size: 14px; color: var(--muted); line-height: 1.6; }\n\n \/* DIVIDER *\/\n .divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }\n .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }\n\n \/* FOOTER *\/\n .footer { text-align: center; margin-top: 48px; color: var(--muted); font-size: 12px; }\n\n \/* PULSE *\/\n .pulse { display: inline-block; width: 8px; height: 8px; background: #fff; border-radius: 50%; position: relative; }\n .pulse::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: rgba(255,255,255,0.35); animation: pulseAnim 1.8s ease infinite; }\n @keyframes pulseAnim { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.8); opacity: 0; } }\n\n \/* ERROR *\/\n .error { color: #ff6b6b; font-size: 13px; margin-top: 8px; display: none; }\n\n @media (max-width: 380px) {\n .card { padding: 24px 18px; }\n .stat { flex-direction: column; align-items: flex-start; gap: 6px; }\n .stat-value { font-size: 28px; }\n }\n<\/style>\n<\/head>\n<body>\n<div class=\"container\">\n\n \n <div class=\"screen active\" id=\"screen-choose\">\n <div class=\"header\">\n <div class=\"badge\"><span class=\"pulse\"><\/span>Kalkulator CapCut<\/div>\n <h1>Kim<span>jeste\u015b?<\/span><\/h1>\n <p>Wybierz sw\u00f3j profil \u2014 poka\u017cemy Ci wyniki dopasowane w\u0142a\u015bnie do Ciebie.<\/p>\n <\/div>\n\n <div class=\"persona-grid\">\n <div class=\"persona-card pro\" onclick=\"showScreen('screen-pro')\">\n <span class=\"persona-emoji\">\ud83c\udfac<\/span>\n <div class=\"persona-title\">Ju\u017c montuj\u0119<\/div>\n <div class=\"persona-desc\">Tworz\u0119 filmy regularnie, chc\u0119 robi\u0107 to szybciej i zarabia\u0107 wi\u0119cej<\/div>\n <div class=\"persona-arrow\">\u2192<\/div>\n <\/div>\n <div class=\"persona-card beginner\" onclick=\"showScreen('screen-beginner')\">\n <span class=\"persona-emoji\">\u2728<\/span>\n <div class=\"persona-title\">Zaczynam<\/div>\n <div class=\"persona-desc\">Nie montuj\u0119 jeszcze, ale chc\u0119 zosta\u0107 monta\u017cyst\u0105 i zarabia\u0107 na wideo<\/div>\n <div class=\"persona-arrow\">\u2192<\/div>\n <\/div>\n <div class=\"persona-card client full-width\" onclick=\"showScreen('screen-client')\">\n <span class=\"persona-emoji\">\ud83d\udcbc<\/span>\n <div class=\"persona-title\">Szukam monta\u017cysty<\/div>\n <div class=\"persona-desc\">Nie mam czasu montowa\u0107 \u2014 chc\u0119 kogo\u015b, kto zajmie si\u0119 moimi rolkami profesjonalnie<\/div>\n <div class=\"persona-arrow\">\u2192<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n\n \n <div class=\"screen blue-screen\" id=\"screen-pro\">\n <button class=\"btn-back\" onclick=\"showScreen('screen-choose')\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 12H5M5 12l7-7M5 12l7 7\"\/><\/svg>\n Zmie\u0144 profil\n <\/button>\n\n <div class=\"header\">\n <div class=\"badge\">\ud83c\udfac Ju\u017c montuj\u0119<\/div>\n <h1>Ile tracisz<span>miesi\u0119cznie?<\/span><\/h1>\n <p>Wpisz swoje dane \u2014 zobaczysz dok\u0142adnie, ile czasu i pieni\u0119dzy zostawiasz na stole.<\/p>\n <\/div>\n\n <div class=\"card blue\">\n <div class=\"field\">\n <label>Filmy tygodniowo<\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"pro-films\" min=\"1\" max=\"99\" placeholder=\"3\" inputmode=\"numeric\">\n <span class=\"unit\">szt.<\/span>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>Czas monta\u017cu jednego filmu<\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"pro-time\" min=\"1\" max=\"9999\" placeholder=\"90\" inputmode=\"numeric\">\n <span class=\"unit\">min<\/span>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>Twoja stawka godzinowa<\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"pro-rate\" min=\"1\" max=\"99999\" placeholder=\"120\" inputmode=\"numeric\">\n <span class=\"unit\">PLN<\/span>\n <\/div>\n <\/div>\n <p class=\"error\" id=\"pro-error\">Uzupe\u0142nij wszystkie pola liczbami wi\u0119kszymi od 0.<\/p>\n <button class=\"btn-calc blue\" onclick=\"calcPro()\">Oblicz moje straty<\/button>\n <\/div>\n\n <div class=\"result\" id=\"pro-result\">\n <div class=\"result-header\">Twoje wyniki<\/div>\n <div class=\"stat-grid\">\n <div class=\"stat\">\n <span class=\"stat-label\">Miesi\u0119cznie<br>sp\u0119dzasz na monta\u017cu<\/span>\n <span class=\"stat-value\" id=\"pro-totalH\">\u2014<span class=\"stat-unit\">h<\/span><\/span>\n <\/div>\n <div class=\"stat\">\n <span class=\"stat-label\">Mo\u017cesz odzyska\u0107<br>dzi\u0119ki optymalizacji (35%)<\/span>\n <span class=\"stat-value\" id=\"pro-savedH\">\u2014<span class=\"stat-unit\">h<\/span><\/span>\n <\/div>\n <div class=\"stat hi-blue\">\n <span class=\"stat-label\">Warto\u015b\u0107 straconego<br>czasu miesi\u0119cznie<\/span>\n <span class=\"stat-value\" id=\"pro-savedM\">\u2014<span class=\"stat-unit\">z\u0142<\/span><\/span>\n <\/div>\n <div class=\"stat\">\n <span class=\"stat-label\">W skali roku<br>tracisz<\/span>\n <span class=\"stat-value\" id=\"pro-yearM\">\u2014<span class=\"stat-unit\">z\u0142<\/span><\/span>\n <\/div>\n <\/div>\n\n <div class=\"divider\">Jak to zmieni\u0107?<\/div>\n\n <div class=\"info-box orange\">\n <p>Gdyby\u015b u\u017cywa\u0142 <strong>gotowych preset\u00f3w, szablon\u00f3w i workflow w CapCut<\/strong>, m\u00f3g\u0142by\u015b skr\u00f3ci\u0107 czas monta\u017cu nawet o <strong>20\u201340%<\/strong>. Mniej klikania, wi\u0119cej tworzenia \u2014 zaoszcz\u0119dzony czas to nowe filmy lub czysta got\u00f3wka.<\/p>\n <\/div>\n\n <a href=\"#\" class=\"btn-cta orange\" id=\"pro-cta\">Poka\u017c mi jak odzyska\u0107 te <span id=\"pro-cta-h\">?<\/span> godzin<\/a>\n <\/div>\n\n <div class=\"footer\">Obliczenia zak\u0142adaj\u0105 35% oszcz\u0119dno\u015bci czasu dzi\u0119ki zoptymalizowanemu workflow CapCut.<\/div>\n <\/div>\n\n\n \n <div class=\"screen green-screen\" id=\"screen-beginner\">\n <button class=\"btn-back\" onclick=\"showScreen('screen-choose')\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 12H5M5 12l7-7M5 12l7 7\"\/><\/svg>\n Zmie\u0144 profil\n <\/button>\n\n <div class=\"header\">\n <div class=\"badge green\">\u2728 Zaczynam<\/div>\n <h1>Ile mo\u017cesz<span class=\"green\">zarobi\u0107?<\/span><\/h1>\n <p>Wpisz swoje plany \u2014 zobaczysz ile mo\u017cesz zarabia\u0107 miesi\u0119cznie montuj\u0105c filmy dla klient\u00f3w.<\/p>\n <\/div>\n\n <div class=\"card green-line\">\n <div class=\"field\">\n <label>Ile rolek miesi\u0119cznie chcesz montowa\u0107 dla klient\u00f3w?<\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"beg-films\" min=\"1\" max=\"999\" placeholder=\"20\" inputmode=\"numeric\">\n <span class=\"unit\">szt.<\/span>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>Twoja stawka za jedn\u0105 zmontowan\u0105 rolk\u0119<\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"beg-price\" min=\"1\" max=\"99999\" placeholder=\"150\" inputmode=\"numeric\">\n <span class=\"unit\">PLN<\/span>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>\u015aredni czas monta\u017cu jednego filmu<\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"beg-time\" min=\"1\" max=\"9999\" placeholder=\"45\" inputmode=\"numeric\">\n <span class=\"unit\">min<\/span>\n <\/div>\n <\/div>\n <p class=\"error\" id=\"beg-error\">Uzupe\u0142nij wszystkie pola liczbami wi\u0119kszymi od 0.<\/p>\n <button class=\"btn-calc green-btn\" onclick=\"calcBeginner()\">Oblicz m\u00f3j potencja\u0142<\/button>\n <\/div>\n\n <div class=\"result\" id=\"beg-result\">\n <div class=\"result-header\">Tw\u00f3j potencja\u0142<\/div>\n <div class=\"stat-grid\">\n <div class=\"stat\">\n <span class=\"stat-label\">Potencjalny przych\u00f3d<br>miesi\u0119cznie<\/span>\n <span class=\"stat-value\" id=\"beg-monthIncome\">\u2014<span class=\"stat-unit\">z\u0142<\/span><\/span>\n <\/div>\n <div class=\"stat hi-green\">\n <span class=\"stat-label\">Potencjalny przych\u00f3d<br>rocznie<\/span>\n <span class=\"stat-value\" id=\"beg-yearIncome\">\u2014<span class=\"stat-unit\">z\u0142<\/span><\/span>\n <\/div>\n <div class=\"stat\">\n <span class=\"stat-label\">Godzin pracy<br>miesi\u0119cznie<\/span>\n <span class=\"stat-value\" id=\"beg-hoursM\">\u2014<span class=\"stat-unit\">h<\/span><\/span>\n <\/div>\n <div class=\"stat\">\n <span class=\"stat-label\">Dni nauki CapCut<br>do pierwszego klienta<\/span>\n <span class=\"stat-value\" id=\"beg-learn\">\u2014<span class=\"stat-unit\">dni<\/span><\/span>\n <\/div>\n <\/div>\n\n <div class=\"divider\">Co teraz?<\/div>\n\n <div class=\"info-box teal\">\n <p id=\"beg-info\"><\/p>\n <\/div>\n\n <a href=\"#\" class=\"btn-cta teal\">Zacznij kurs CapCut od zera<\/a>\n <\/div>\n\n <div class=\"footer\">Obliczenia zak\u0142adaj\u0105 sta\u0142\u0105 liczb\u0119 klient\u00f3w i podan\u0105 stawk\u0119 za film.<\/div>\n <\/div>\n\n\n \n <div class=\"screen gold-screen\" id=\"screen-client\">\n <button class=\"btn-back\" onclick=\"showScreen('screen-choose')\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 12H5M5 12l7-7M5 12l7 7\"\/><\/svg>\n Zmie\u0144 profil\n <\/button>\n\n <div class=\"header\">\n <div class=\"badge gold\">\ud83d\udcbc Szukam monta\u017cysty<\/div>\n <h1>Zostaw<span style=\"color:var(--gold)\">kontakt<\/span><\/h1>\n <p>Napisz czego potrzebujesz \u2014 odezw\u0119 si\u0119 i ustalimy szczeg\u00f3\u0142y.<\/p>\n <\/div>\n\n <div class=\"card gold-line\" id=\"cl-form\">\n <div class=\"field\">\n <label>Ile rolek potrzebujesz miesi\u0119cznie?<\/label>\n <div class=\"select-wrap\">\n <select id=\"cl-films\">\n <option value=\"\">Wybierz zakres...<\/option>\n <option value=\"1-10\">1\u201310 rolek<\/option>\n <option value=\"11-20\">11\u201320 rolek<\/option>\n <option value=\"21-40\">21\u201340 rolek<\/option>\n <option value=\"41+\">41+ rolek<\/option>\n <\/select>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>Twoje imi\u0119<\/label>\n <input type=\"text\" id=\"cl-name\" placeholder=\"np. Marek\">\n <\/div>\n <div class=\"field\">\n <label>E-mail<\/label>\n <input type=\"email\" id=\"cl-email\" placeholder=\"np. marek@firma.pl\">\n <\/div>\n <div class=\"field\">\n <label>Telefon<\/label>\n <input type=\"text\" id=\"cl-phone\" placeholder=\"np. 600 123 456\" inputmode=\"tel\">\n <\/div>\n <div class=\"field\" style=\"margin-bottom:0\">\n <label>Kr\u00f3tki opis projektu (opcjonalnie)<\/label>\n <textarea id=\"cl-note\" rows=\"3\" placeholder=\"np. rolki na Instagram dla mojej restauracji, styl lifestyle, dostarczam surowy materia\u0142 co tydzie\u0144\"><\/textarea>\n <\/div>\n <p class=\"error\" id=\"cl-error\">Uzupe\u0142nij liczb\u0119 rolek, imi\u0119 i dane kontaktowe.<\/p>\n <button class=\"btn-calc gold-btn\" style=\"margin-top:8px\" onclick=\"submitLead()\">Chc\u0119 wycen\u0119 dla moich rolek<\/button>\n <\/div>\n\n <div class=\"success-box\" id=\"cl-success\">\n <div class=\"success-icon\">\ud83c\udf89<\/div>\n <div class=\"success-title\">Zg\u0142oszenie wys\u0142ane!<\/div>\n <p class=\"success-text\">Odezw\u0119 si\u0119 do Ciebie w ci\u0105gu 24h \u2014 ustalimy szczeg\u00f3\u0142y i wycen\u0119 dopasowan\u0105 do Twoich potrzeb.<\/p>\n <\/div>\n\n <div class=\"footer\">Twoje dane s\u0105 bezpieczne i nie b\u0119d\u0105 udost\u0119pniane osobom trzecim.<\/div>\n <\/div>\n\n<\/div>\n\n<script>\n \/\/ \u2500\u2500 Transitions \u2500\u2500\n function showScreen(id) {\n const cur = document.querySelector('.screen.active');\n const nxt = document.getElementById(id);\n if (!nxt || cur === nxt) return;\n cur.classList.remove('visible');\n setTimeout(() => {\n cur.classList.remove('active');\n nxt.classList.add('active');\n requestAnimationFrame(() => requestAnimationFrame(() => {\n nxt.classList.add('visible');\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }));\n }, 300);\n }\n\n requestAnimationFrame(() => requestAnimationFrame(() => {\n document.getElementById('screen-choose').classList.add('visible');\n }));\n\n \/\/ \u2500\u2500 PRO \u2500\u2500\n function calcPro() {\n const films = parseFloat(document.getElementById('pro-films').value);\n const time = parseFloat(document.getElementById('pro-time').value);\n const rate = parseFloat(document.getElementById('pro-rate').value);\n const err = document.getElementById('pro-error');\n\n if (!films || !time || !rate || films <= 0 || time <= 0 || rate <= 0) {\n err.style.display = 'block'; return;\n }\n err.style.display = 'none';\n\n const totalH = (films * 4 * time) \/ 60;\n const savedH = totalH * 0.35;\n const savedM = savedH * rate;\n const yearM = savedM * 12;\n\n animVal('pro-totalH', totalH, 'h', fmtH);\n animVal('pro-savedH', savedH, 'h', fmtH);\n animVal('pro-savedM', savedM, 'z\u0142', fmtM);\n animVal('pro-yearM', yearM, 'z\u0142', fmtM);\n\n document.getElementById('pro-cta-h').textContent = fmtH(savedH);\n showResult('pro-result');\n }\n\n \/\/ \u2500\u2500 BEGINNER \u2500\u2500\n const platforms = {\n tiktok: { label: 'TikTok', editMin: 35, cpm: 0.020, learnDays: 4 },\n youtube: { label: 'YouTube Shorts', editMin: 45, cpm: 0.040, learnDays: 4 },\n instagram: { label: 'Instagram Reels', editMin: 40, cpm: 0.030, learnDays: 4 },\n multi: { label: 'wszystkich platform', editMin: 50, cpm: 0.055, learnDays: 4 },\n };\n\n function calcBeginner() {\n const films = parseFloat(document.getElementById('beg-films').value);\n const price = parseFloat(document.getElementById('beg-price').value);\n const time = parseFloat(document.getElementById('beg-time').value);\n const err = document.getElementById('beg-error');\n\n if (!films || !price || !time || films <= 0 || price <= 0 || time <= 0) {\n err.style.display = 'block'; return;\n }\n err.style.display = 'none';\n\n const monthIncome = films * price;\n const yearIncome = monthIncome * 12;\n const hoursMonth = (films * time) \/ 60;\n const effectiveRate = monthIncome \/ hoursMonth;\n\n animVal('beg-monthIncome', monthIncome, 'z\u0142', fmtM);\n animVal('beg-yearIncome', yearIncome, 'z\u0142', fmtM);\n animVal('beg-hoursM', hoursMonth, 'h', fmtH);\n animVal('beg-learn', 4, 'dni', v => Math.round(v));\n\n document.getElementById('beg-info').innerHTML =\n `Przy <strong>${Math.round(films)} rolkach miesi\u0119cznie<\/strong> w stawce <strong>${Math.round(price).toLocaleString('pl-PL')} z\u0142\/rolka<\/strong>, \n Twoja efektywna stawka godzinowa wynosi <strong>${Math.round(effectiveRate).toLocaleString('pl-PL')} z\u0142\/h<\/strong>. \n Po kursie CapCut (4 dni) jeste\u015b gotowy na <strong>pierwszego p\u0142ac\u0105cego klienta<\/strong> \u2014 \n firmy, agencje i tw\u00f3rcy stale szukaj\u0105 monta\u017cyst\u00f3w, kt\u00f3rzy dostarczaj\u0105 szybko i powtarzalnie.`;\n\n showResult('beg-result');\n }\n\n \/\/ \u2500\u2500 Helpers \u2500\u2500\n function showResult(id) {\n const el = document.getElementById(id);\n el.style.display = 'block';\n requestAnimationFrame(() => requestAnimationFrame(() => {\n el.classList.add('visible');\n el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }));\n }\n\n function animVal(id, end, unit, fmt) {\n const el = document.getElementById(id);\n const unitHtml = `<span class=\"stat-unit\">${unit}<\/span>`;\n const t0 = performance.now();\n const dur = 650;\n (function tick(now) {\n const p = Math.min((now - t0) \/ dur, 1);\n const ease = 1 - Math.pow(1 - p, 3);\n el.innerHTML = fmt(end * ease) + unitHtml;\n if (p < 1) requestAnimationFrame(tick);\n })(t0);\n }\n\n function fmtH(h) {\n if (h >= 10) return Math.round(h);\n return parseFloat(h.toFixed(1)).toString().replace('.', ',');\n }\n\n function fmtM(m) { return Math.round(m).toLocaleString('pl-PL'); }\n\n \/\/ \u2500\u2500 CLIENT \u2500\u2500\n function submitLead() {\n const films = document.getElementById('cl-films').value;\n const name = document.getElementById('cl-name').value.trim();\n const email = document.getElementById('cl-email').value.trim();\n const phone = document.getElementById('cl-phone').value.trim();\n const err = document.getElementById('cl-error');\n\n if (!films || !name || (!email && !phone)) {\n err.style.display = 'block';\n err.textContent = !films || !name ? 'Uzupe\u0142nij liczb\u0119 rolek i imi\u0119.' : 'Podaj e-mail lub telefon.';\n return;\n }\n err.style.display = 'none';\n\n document.getElementById('cl-form').style.display = 'none';\n const successEl = document.getElementById('cl-success');\n successEl.classList.add('show');\n successEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n\n document.addEventListener('keydown', e => {\n if (e.key !== 'Enter') return;\n if (document.getElementById('screen-pro').classList.contains('active')) calcPro();\n if (document.getElementById('screen-beginner').classList.contains('active')) calcBeginner();\n });\n<\/script>\n<\/body>\n<\/html><\/div>\n\t\t\t\t\t\t<\/div>\n\t\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>Kalkulator Monta\u017cu CapCut Kalkulator CapCut Kimjeste\u015b? Wybierz sw\u00f3j profil \u2014 poka\u017cemy Ci wyniki dopasowane w\u0142a\u015bnie do Ciebie. \ud83c\udfac Ju\u017c montuj\u0119 Tworz\u0119 filmy regularnie, chc\u0119 robi\u0107 to szybciej i zarabia\u0107 wi\u0119cej \u2192 \u2728 Zaczynam Nie montuj\u0119 jeszcze, ale chc\u0119 zosta\u0107 monta\u017cyst\u0105 i zarabia\u0107 na wideo \u2192 \ud83d\udcbc Szukam monta\u017cysty Nie mam czasu montowa\u0107 \u2014 chc\u0119 kogo\u015b, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/www.mikolajsome.pl\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mikolajsome.pl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mikolajsome.pl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mikolajsome.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mikolajsome.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":12,"href":"https:\/\/www.mikolajsome.pl\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/www.mikolajsome.pl\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/www.mikolajsome.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\t\t

\n\n\n\n\nKalkulator Monta\u017cu CapCut<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --bg: #0a0a0f;\n --surface: #111118;\n --surface2: #18181f;\n --border: rgba(255,255,255,0.07);\n --accent: #0066ff;\n --accent2: #ff6b35;\n --green: #00c896;\n --text: #f0f0f5;\n --muted: #6b6b80;\n --glow-blue: rgba(0,102,255,0.18);\n --glow-green: rgba(0,200,150,0.18);\n --gold: #f5a623;\n --glow-gold: rgba(245,166,35,0.18);\n }\n\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n body {\n background: var(--bg);\n color: var(--text);\n font-family: 'DM Sans', sans-serif;\n min-height: 100vh;\n overflow-x: hidden;\n }\n\n body::before {\n content: '';\n position: fixed;\n inset: 0;\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'\/%3E%3C\/svg%3E\");\n opacity: 0.5;\n pointer-events: none;\n z-index: 0;\n }\n\n .container {\n position: relative;\n z-index: 1;\n max-width: 560px;\n margin: 0 auto;\n padding: 40px 20px 80px;\n }\n\n \/* SCREENS *\/\n .screen { display: none; opacity: 0; transform: translateY(16px); transition: opacity 0.45s cubic-bezier(0.22,1,0.36,1), transform 0.45s cubic-bezier(0.22,1,0.36,1); }\n .screen.active { display: block; }\n .screen.visible { opacity: 1; transform: translateY(0); }\n\n \/* HEADER *\/\n .header { text-align: center; margin-bottom: 40px; }\n\n .badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: var(--accent);\n color: #fff;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n padding: 5px 14px;\n border-radius: 100px;\n margin-bottom: 20px;\n }\n .badge.green { background: var(--green); color: #0a0a0f; }\n\n .header h1 {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(44px, 11vw, 70px);\n line-height: 0.95;\n letter-spacing: 0.01em;\n color: var(--text);\n margin-bottom: 16px;\n }\n .header h1 span { color: var(--accent); display: block; }\n .header h1 span.green { color: var(--green); }\n\n .header p {\n color: var(--muted);\n font-size: 15px;\n line-height: 1.6;\n font-weight: 300;\n max-width: 380px;\n margin: 0 auto;\n }\n\n \/* PERSONA CHOICE *\/\n .persona-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 14px;\n }\n .persona-grid .persona-card.full-width {\n grid-column: 1 \/ -1;\n }\n @media (max-width: 420px) { .persona-grid { grid-template-columns: 1fr; } .persona-grid .persona-card.full-width { grid-column: auto; } }\n\n .persona-card {\n background: var(--surface);\n border: 1.5px solid var(--border);\n border-radius: 20px;\n padding: 28px 22px;\n cursor: pointer;\n transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;\n text-align: center;\n position: relative;\n overflow: hidden;\n }\n .persona-card::after {\n content: '';\n position: absolute;\n top: 0; left: 0; right: 0;\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);\n }\n .persona-card:hover { transform: translateY(-3px); }\n .persona-card.pro:hover { border-color: rgba(0,102,255,0.4); box-shadow: 0 8px 32px rgba(0,102,255,0.15); }\n .persona-card.beginner:hover { border-color: rgba(0,200,150,0.4); box-shadow: 0 8px 32px rgba(0,200,150,0.15); }\n .persona-card.client:hover { border-color: rgba(245,166,35,0.4); box-shadow: 0 8px 32px rgba(245,166,35,0.15); }\n\n .persona-emoji { font-size: 40px; margin-bottom: 14px; display: block; }\n .persona-title { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.05em; margin-bottom: 8px; }\n .persona-card.pro .persona-title { color: var(--accent); }\n .persona-card.beginner .persona-title { color: var(--green); }\n .persona-card.client .persona-title { color: var(--gold); }\n .persona-desc { font-size: 13px; color: var(--muted); line-height: 1.5; font-weight: 300; }\n .persona-arrow { display: inline-block; margin-top: 16px; font-size: 20px; opacity: 0.4; transition: opacity 0.2s, transform 0.2s; }\n .persona-card:hover .persona-arrow { opacity: 1; transform: translateX(4px); }\n\n \/* CARD *\/\n .card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 20px;\n padding: 32px 28px;\n margin-bottom: 16px;\n position: relative;\n overflow: hidden;\n }\n .card.blue::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,102,255,0.4), transparent); }\n .card.green-line::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,200,150,0.4), transparent); }\n .card.gold-line::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(245,166,35,0.5), transparent); }\n\n \/* BACK *\/\n .btn-back {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: none;\n border: none;\n color: var(--muted);\n font-family: 'DM Sans', sans-serif;\n font-size: 13px;\n cursor: pointer;\n padding: 0;\n margin-bottom: 28px;\n transition: color 0.2s;\n }\n .btn-back:hover { color: var(--text); }\n .btn-back svg { width: 14px; height: 14px; }\n\n \/* INPUTS *\/\n .field { margin-bottom: 24px; }\n .field:last-child { margin-bottom: 0; }\n\n label {\n display: block;\n font-size: 13px;\n font-weight: 500;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n color: var(--muted);\n margin-bottom: 10px;\n }\n\n .input-wrap { position: relative; display: flex; align-items: center; }\n\n input[type=\"number\"] {\n width: 100%;\n background: var(--surface2);\n border: 1.5px solid var(--border);\n border-radius: 12px;\n color: var(--text);\n font-family: 'DM Sans', sans-serif;\n font-size: 22px;\n font-weight: 500;\n padding: 16px 60px 16px 20px;\n outline: none;\n transition: border-color 0.2s, box-shadow 0.2s;\n -moz-appearance: textfield;\n }\n input[type=\"number\"]::-webkit-inner-spin-button,\n input[type=\"number\"]::-webkit-outer-spin-button { -webkit-appearance: none; }\n\n .blue-screen input[type=\"number\"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow-blue); }\n .green-screen input[type=\"number\"]:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--glow-green); }\n .gold-screen input[type=\"number\"]:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--glow-gold); }\n .gold-screen select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--glow-gold); }\n\n select {\n width: 100%;\n background: var(--surface2);\n border: 1.5px solid var(--border);\n border-radius: 12px;\n color: var(--text);\n font-family: 'DM Sans', sans-serif;\n font-size: 18px;\n font-weight: 500;\n padding: 16px 20px;\n outline: none;\n cursor: pointer;\n appearance: none;\n transition: border-color 0.2s, box-shadow 0.2s;\n }\n .green-screen select:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--glow-green); }\n\n .select-wrap { position: relative; }\n .select-wrap::after { content: '\u25be'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-size: 14px; }\n\n .unit { position: absolute; right: 18px; font-size: 13px; font-weight: 500; color: var(--muted); pointer-events: none; }\n\n \/* CALC BUTTON *\/\n .btn-calc {\n width: 100%;\n border: none;\n border-radius: 14px;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 26px;\n letter-spacing: 0.12em;\n padding: 22px;\n cursor: pointer;\n margin-top: 8px;\n transition: transform 0.15s, box-shadow 0.15s;\n position: relative;\n overflow: hidden;\n color: #fff;\n text-shadow: 0 1px 4px rgba(0,0,0,0.25);\n }\n .btn-calc.blue { background: var(--accent); }\n .btn-calc.green-btn { background: var(--green); color: #0a0a0f; text-shadow: none; }\n .btn-calc.gold-btn { background: var(--gold); color: #0a0a0f; text-shadow: none; }\n .btn-calc::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.15); transform: translateX(-100%); transition: transform 0.4s; }\n .btn-calc:hover::before { transform: translateX(100%); }\n .btn-calc.blue:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,102,255,0.45); }\n .btn-calc.green-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,200,150,0.35); }\n .btn-calc.gold-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(245,166,35,0.4); }\n .btn-calc:active { transform: translateY(0); }\n\n \/* RESULT *\/\n .result { display: none; opacity: 0; transform: translateY(20px); transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1), transform 0.5s cubic-bezier(0.22,1,0.36,1); }\n .result.visible { display: block; opacity: 1; transform: translateY(0); }\n\n .result-header {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 13px;\n letter-spacing: 0.16em;\n color: var(--muted);\n text-transform: uppercase;\n margin-bottom: 16px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n .result-header::before, .result-header::after { content: ''; flex: 1; height: 1px; background: var(--border); }\n\n .stat-grid { display: grid; gap: 12px; }\n\n .stat {\n background: var(--surface2);\n border: 1px solid var(--border);\n border-radius: 14px;\n padding: 20px 22px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n position: relative;\n overflow: hidden;\n transition: border-color 0.2s;\n }\n .stat:hover { border-color: rgba(255,255,255,0.12); }\n\n .stat.hi-blue { background: rgba(0,102,255,0.07); border-color: rgba(0,102,255,0.25); }\n .stat.hi-blue::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); border-radius: 3px 0 0 3px; }\n .stat.hi-blue .stat-value { color: var(--accent); }\n\n .stat.hi-green { background: rgba(0,200,150,0.07); border-color: rgba(0,200,150,0.25); }\n .stat.hi-green::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--green); border-radius: 3px 0 0 3px; }\n .stat.hi-green .stat-value { color: var(--green); }\n\n .stat.hi-gold { background: rgba(245,166,35,0.07); border-color: rgba(245,166,35,0.25); }\n .stat.hi-gold::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); border-radius: 3px 0 0 3px; }\n .stat.hi-gold .stat-value { color: var(--gold); }\n\n .stat-label { font-size: 14px; color: var(--muted); line-height: 1.4; font-weight: 400; }\n .stat-value { font-family: 'Bebas Neue', sans-serif; font-size: 32px; letter-spacing: 0.02em; color: var(--text); white-space: nowrap; }\n .stat-unit { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 3px; }\n\n \/* INFO BOX *\/\n .info-box {\n border-radius: 16px;\n padding: 22px;\n margin-top: 12px;\n position: relative;\n overflow: hidden;\n }\n .info-box.orange { background: linear-gradient(135deg, rgba(255,107,53,0.08), rgba(0,102,255,0.05)); border: 1px solid rgba(255,107,53,0.2); }\n .info-box.teal { background: linear-gradient(135deg, rgba(0,200,150,0.07), rgba(0,102,255,0.04)); border: 1px solid rgba(0,200,150,0.2); }\n .info-box.gold { background: linear-gradient(135deg, rgba(245,166,35,0.08), rgba(255,107,53,0.04)); border: 1px solid rgba(245,166,35,0.2); }\n .info-box::before { position: absolute; font-size: 60px; right: -8px; top: -8px; opacity: 0.1; transform: rotate(15deg); }\n .info-box.orange::before { content: '\ud83d\udca1'; }\n .info-box.teal::before { content: '\ud83d\ude80'; }\n .info-box.gold::before { content: '\u26a1'; }\n .info-box p { font-size: 14px; line-height: 1.65; color: rgba(240,240,245,0.8); font-weight: 300; }\n .info-box strong { font-weight: 500; }\n .info-box.orange strong { color: var(--accent2); }\n .info-box.teal strong { color: var(--green); }\n .info-box.gold strong { color: var(--gold); }\n\n \/* CTA *\/\n .btn-cta {\n display: block;\n width: 100%;\n border: none;\n border-radius: 14px;\n font-family: 'DM Sans', sans-serif;\n font-size: 16px;\n font-weight: 700;\n padding: 20px;\n cursor: pointer;\n margin-top: 12px;\n text-align: center;\n text-decoration: none;\n letter-spacing: 0.01em;\n transition: transform 0.15s, box-shadow 0.2s;\n position: relative;\n overflow: hidden;\n color: #fff;\n }\n .btn-cta.orange { background: linear-gradient(135deg, var(--accent2), #ff9a6c); }\n .btn-cta.teal { background: linear-gradient(135deg, var(--green), #00e0b0); color: #0a0a0f; }\n .btn-cta.gold { background: linear-gradient(135deg, var(--gold), #ffc55a); color: #0a0a0f; }\n .btn-cta::after { content: '\u2192'; margin-left: 8px; display: inline-block; transition: transform 0.2s; }\n .btn-cta.orange:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(255,107,53,0.35); }\n .btn-cta.teal:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(0,200,150,0.35); }\n .btn-cta.gold:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(245,166,35,0.35); }\n .btn-cta:hover::after { transform: translateX(4px); }\n .btn-cta:active { transform: translateY(0); }\n\n \/* TEXT INPUT *\/\n input[type=\"text\"], input[type=\"email\"], textarea {\n width: 100%;\n background: var(--surface2);\n border: 1.5px solid var(--border);\n border-radius: 12px;\n color: var(--text);\n font-family: 'DM Sans', sans-serif;\n font-size: 16px;\n font-weight: 400;\n padding: 16px 20px;\n outline: none;\n transition: border-color 0.2s, box-shadow 0.2s;\n resize: none;\n }\n .gold-screen input[type=\"text\"]:focus,\n .gold-screen input[type=\"email\"]:focus,\n .gold-screen textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--glow-gold); }\n input[type=\"text\"]::placeholder, input[type=\"email\"]::placeholder, textarea::placeholder { color: var(--muted); }\n\n \/* BADGE GOLD *\/\n .badge.gold { background: var(--gold); color: #0a0a0f; }\n\n \/* SUCCESS STATE *\/\n .success-box {\n background: rgba(245,166,35,0.08);\n border: 1px solid rgba(245,166,35,0.25);\n border-radius: 16px;\n padding: 28px 24px;\n text-align: center;\n display: none;\n }\n .success-box.show { display: block; }\n .success-icon { font-size: 48px; margin-bottom: 12px; }\n .success-title { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 0.05em; color: var(--gold); margin-bottom: 8px; }\n .success-text { font-size: 14px; color: var(--muted); line-height: 1.6; }\n\n \/* DIVIDER *\/\n .divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }\n .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }\n\n \/* FOOTER *\/\n .footer { text-align: center; margin-top: 48px; color: var(--muted); font-size: 12px; }\n\n \/* PULSE *\/\n .pulse { display: inline-block; width: 8px; height: 8px; background: #fff; border-radius: 50%; position: relative; }\n .pulse::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: rgba(255,255,255,0.35); animation: pulseAnim 1.8s ease infinite; }\n @keyframes pulseAnim { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.8); opacity: 0; } }\n\n \/* ERROR *\/\n .error { color: #ff6b6b; font-size: 13px; margin-top: 8px; display: none; }\n\n @media (max-width: 380px) {\n .card { padding: 24px 18px; }\n .stat { flex-direction: column; align-items: flex-start; gap: 6px; }\n .stat-value { font-size: 28px; }\n }\n<\/style>\n<\/head>\n<body>\n<div class=\"container\">\n\n \n <div class=\"screen active\" id=\"screen-choose\">\n <div class=\"header\">\n <div class=\"badge\"><span class=\"pulse\"><\/span>Kalkulator CapCut<\/div>\n <h1>Kim<span>jeste\u015b?<\/span><\/h1>\n <p>Wybierz sw\u00f3j profil \u2014 poka\u017cemy Ci wyniki dopasowane w\u0142a\u015bnie do Ciebie.<\/p>\n <\/div>\n\n <div class=\"persona-grid\">\n <div class=\"persona-card pro\" onclick=\"showScreen('screen-pro')\">\n <span class=\"persona-emoji\">\ud83c\udfac<\/span>\n <div class=\"persona-title\">Ju\u017c montuj\u0119<\/div>\n <div class=\"persona-desc\">Tworz\u0119 filmy regularnie, chc\u0119 robi\u0107 to szybciej i zarabia\u0107 wi\u0119cej<\/div>\n <div class=\"persona-arrow\">\u2192<\/div>\n <\/div>\n <div class=\"persona-card beginner\" onclick=\"showScreen('screen-beginner')\">\n <span class=\"persona-emoji\">\u2728<\/span>\n <div class=\"persona-title\">Zaczynam<\/div>\n <div class=\"persona-desc\">Nie montuj\u0119 jeszcze, ale chc\u0119 zosta\u0107 monta\u017cyst\u0105 i zarabia\u0107 na wideo<\/div>\n <div class=\"persona-arrow\">\u2192<\/div>\n <\/div>\n <div class=\"persona-card client full-width\" onclick=\"showScreen('screen-client')\">\n <span class=\"persona-emoji\">\ud83d\udcbc<\/span>\n <div class=\"persona-title\">Szukam monta\u017cysty<\/div>\n <div class=\"persona-desc\">Nie mam czasu montowa\u0107 \u2014 chc\u0119 kogo\u015b, kto zajmie si\u0119 moimi rolkami profesjonalnie<\/div>\n <div class=\"persona-arrow\">\u2192<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n\n \n <div class=\"screen blue-screen\" id=\"screen-pro\">\n <button class=\"btn-back\" onclick=\"showScreen('screen-choose')\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 12H5M5 12l7-7M5 12l7 7\"\/><\/svg>\n Zmie\u0144 profil\n <\/button>\n\n <div class=\"header\">\n <div class=\"badge\">\ud83c\udfac Ju\u017c montuj\u0119<\/div>\n <h1>Ile tracisz<span>miesi\u0119cznie?<\/span><\/h1>\n <p>Wpisz swoje dane \u2014 zobaczysz dok\u0142adnie, ile czasu i pieni\u0119dzy zostawiasz na stole.<\/p>\n <\/div>\n\n <div class=\"card blue\">\n <div class=\"field\">\n <label>Filmy tygodniowo<\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"pro-films\" min=\"1\" max=\"99\" placeholder=\"3\" inputmode=\"numeric\">\n <span class=\"unit\">szt.<\/span>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>Czas monta\u017cu jednego filmu<\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"pro-time\" min=\"1\" max=\"9999\" placeholder=\"90\" inputmode=\"numeric\">\n <span class=\"unit\">min<\/span>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>Twoja stawka godzinowa<\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"pro-rate\" min=\"1\" max=\"99999\" placeholder=\"120\" inputmode=\"numeric\">\n <span class=\"unit\">PLN<\/span>\n <\/div>\n <\/div>\n <p class=\"error\" id=\"pro-error\">Uzupe\u0142nij wszystkie pola liczbami wi\u0119kszymi od 0.<\/p>\n <button class=\"btn-calc blue\" onclick=\"calcPro()\">Oblicz moje straty<\/button>\n <\/div>\n\n <div class=\"result\" id=\"pro-result\">\n <div class=\"result-header\">Twoje wyniki<\/div>\n <div class=\"stat-grid\">\n <div class=\"stat\">\n <span class=\"stat-label\">Miesi\u0119cznie<br>sp\u0119dzasz na monta\u017cu<\/span>\n <span class=\"stat-value\" id=\"pro-totalH\">\u2014<span class=\"stat-unit\">h<\/span><\/span>\n <\/div>\n <div class=\"stat\">\n <span class=\"stat-label\">Mo\u017cesz odzyska\u0107<br>dzi\u0119ki optymalizacji (35%)<\/span>\n <span class=\"stat-value\" id=\"pro-savedH\">\u2014<span class=\"stat-unit\">h<\/span><\/span>\n <\/div>\n <div class=\"stat hi-blue\">\n <span class=\"stat-label\">Warto\u015b\u0107 straconego<br>czasu miesi\u0119cznie<\/span>\n <span class=\"stat-value\" id=\"pro-savedM\">\u2014<span class=\"stat-unit\">z\u0142<\/span><\/span>\n <\/div>\n <div class=\"stat\">\n <span class=\"stat-label\">W skali roku<br>tracisz<\/span>\n <span class=\"stat-value\" id=\"pro-yearM\">\u2014<span class=\"stat-unit\">z\u0142<\/span><\/span>\n <\/div>\n <\/div>\n\n <div class=\"divider\">Jak to zmieni\u0107?<\/div>\n\n <div class=\"info-box orange\">\n <p>Gdyby\u015b u\u017cywa\u0142 <strong>gotowych preset\u00f3w, szablon\u00f3w i workflow w CapCut<\/strong>, m\u00f3g\u0142by\u015b skr\u00f3ci\u0107 czas monta\u017cu nawet o <strong>20\u201340%<\/strong>. Mniej klikania, wi\u0119cej tworzenia \u2014 zaoszcz\u0119dzony czas to nowe filmy lub czysta got\u00f3wka.<\/p>\n <\/div>\n\n <a href=\"#\" class=\"btn-cta orange\" id=\"pro-cta\">Poka\u017c mi jak odzyska\u0107 te <span id=\"pro-cta-h\">?<\/span> godzin<\/a>\n <\/div>\n\n <div class=\"footer\">Obliczenia zak\u0142adaj\u0105 35% oszcz\u0119dno\u015bci czasu dzi\u0119ki zoptymalizowanemu workflow CapCut.<\/div>\n <\/div>\n\n\n \n <div class=\"screen green-screen\" id=\"screen-beginner\">\n <button class=\"btn-back\" onclick=\"showScreen('screen-choose')\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 12H5M5 12l7-7M5 12l7 7\"\/><\/svg>\n Zmie\u0144 profil\n <\/button>\n\n <div class=\"header\">\n <div class=\"badge green\">\u2728 Zaczynam<\/div>\n <h1>Ile mo\u017cesz<span class=\"green\">zarobi\u0107?<\/span><\/h1>\n <p>Wpisz swoje plany \u2014 zobaczysz ile mo\u017cesz zarabia\u0107 miesi\u0119cznie montuj\u0105c filmy dla klient\u00f3w.<\/p>\n <\/div>\n\n <div class=\"card green-line\">\n <div class=\"field\">\n <label>Ile rolek miesi\u0119cznie chcesz montowa\u0107 dla klient\u00f3w?<\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"beg-films\" min=\"1\" max=\"999\" placeholder=\"20\" inputmode=\"numeric\">\n <span class=\"unit\">szt.<\/span>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>Twoja stawka za jedn\u0105 zmontowan\u0105 rolk\u0119<\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"beg-price\" min=\"1\" max=\"99999\" placeholder=\"150\" inputmode=\"numeric\">\n <span class=\"unit\">PLN<\/span>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>\u015aredni czas monta\u017cu jednego filmu<\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"beg-time\" min=\"1\" max=\"9999\" placeholder=\"45\" inputmode=\"numeric\">\n <span class=\"unit\">min<\/span>\n <\/div>\n <\/div>\n <p class=\"error\" id=\"beg-error\">Uzupe\u0142nij wszystkie pola liczbami wi\u0119kszymi od 0.<\/p>\n <button class=\"btn-calc green-btn\" onclick=\"calcBeginner()\">Oblicz m\u00f3j potencja\u0142<\/button>\n <\/div>\n\n <div class=\"result\" id=\"beg-result\">\n <div class=\"result-header\">Tw\u00f3j potencja\u0142<\/div>\n <div class=\"stat-grid\">\n <div class=\"stat\">\n <span class=\"stat-label\">Potencjalny przych\u00f3d<br>miesi\u0119cznie<\/span>\n <span class=\"stat-value\" id=\"beg-monthIncome\">\u2014<span class=\"stat-unit\">z\u0142<\/span><\/span>\n <\/div>\n <div class=\"stat hi-green\">\n <span class=\"stat-label\">Potencjalny przych\u00f3d<br>rocznie<\/span>\n <span class=\"stat-value\" id=\"beg-yearIncome\">\u2014<span class=\"stat-unit\">z\u0142<\/span><\/span>\n <\/div>\n <div class=\"stat\">\n <span class=\"stat-label\">Godzin pracy<br>miesi\u0119cznie<\/span>\n <span class=\"stat-value\" id=\"beg-hoursM\">\u2014<span class=\"stat-unit\">h<\/span><\/span>\n <\/div>\n <div class=\"stat\">\n <span class=\"stat-label\">Dni nauki CapCut<br>do pierwszego klienta<\/span>\n <span class=\"stat-value\" id=\"beg-learn\">\u2014<span class=\"stat-unit\">dni<\/span><\/span>\n <\/div>\n <\/div>\n\n <div class=\"divider\">Co teraz?<\/div>\n\n <div class=\"info-box teal\">\n <p id=\"beg-info\"><\/p>\n <\/div>\n\n <a href=\"#\" class=\"btn-cta teal\">Zacznij kurs CapCut od zera<\/a>\n <\/div>\n\n <div class=\"footer\">Obliczenia zak\u0142adaj\u0105 sta\u0142\u0105 liczb\u0119 klient\u00f3w i podan\u0105 stawk\u0119 za film.<\/div>\n <\/div>\n\n\n \n <div class=\"screen gold-screen\" id=\"screen-client\">\n <button class=\"btn-back\" onclick=\"showScreen('screen-choose')\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 12H5M5 12l7-7M5 12l7 7\"\/><\/svg>\n Zmie\u0144 profil\n <\/button>\n\n <div class=\"header\">\n <div class=\"badge gold\">\ud83d\udcbc Szukam monta\u017cysty<\/div>\n <h1>Zostaw<span style=\"color:var(--gold)\">kontakt<\/span><\/h1>\n <p>Napisz czego potrzebujesz \u2014 odezw\u0119 si\u0119 i ustalimy szczeg\u00f3\u0142y.<\/p>\n <\/div>\n\n <div class=\"card gold-line\" id=\"cl-form\">\n <div class=\"field\">\n <label>Ile rolek potrzebujesz miesi\u0119cznie?<\/label>\n <div class=\"select-wrap\">\n <select id=\"cl-films\">\n <option value=\"\">Wybierz zakres...<\/option>\n <option value=\"1-10\">1\u201310 rolek<\/option>\n <option value=\"11-20\">11\u201320 rolek<\/option>\n <option value=\"21-40\">21\u201340 rolek<\/option>\n <option value=\"41+\">41+ rolek<\/option>\n <\/select>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>Twoje imi\u0119<\/label>\n <input type=\"text\" id=\"cl-name\" placeholder=\"np. Marek\">\n <\/div>\n <div class=\"field\">\n <label>E-mail<\/label>\n <input type=\"email\" id=\"cl-email\" placeholder=\"np. marek@firma.pl\">\n <\/div>\n <div class=\"field\">\n <label>Telefon<\/label>\n <input type=\"text\" id=\"cl-phone\" placeholder=\"np. 600 123 456\" inputmode=\"tel\">\n <\/div>\n <div class=\"field\" style=\"margin-bottom:0\">\n <label>Kr\u00f3tki opis projektu (opcjonalnie)<\/label>\n <textarea id=\"cl-note\" rows=\"3\" placeholder=\"np. rolki na Instagram dla mojej restauracji, styl lifestyle, dostarczam surowy materia\u0142 co tydzie\u0144\"><\/textarea>\n <\/div>\n <p class=\"error\" id=\"cl-error\">Uzupe\u0142nij liczb\u0119 rolek, imi\u0119 i dane kontaktowe.<\/p>\n <button class=\"btn-calc gold-btn\" style=\"margin-top:8px\" onclick=\"submitLead()\">Chc\u0119 wycen\u0119 dla moich rolek<\/button>\n <\/div>\n\n <div class=\"success-box\" id=\"cl-success\">\n <div class=\"success-icon\">\ud83c\udf89<\/div>\n <div class=\"success-title\">Zg\u0142oszenie wys\u0142ane!<\/div>\n <p class=\"success-text\">Odezw\u0119 si\u0119 do Ciebie w ci\u0105gu 24h \u2014 ustalimy szczeg\u00f3\u0142y i wycen\u0119 dopasowan\u0105 do Twoich potrzeb.<\/p>\n <\/div>\n\n <div class=\"footer\">Twoje dane s\u0105 bezpieczne i nie b\u0119d\u0105 udost\u0119pniane osobom trzecim.<\/div>\n <\/div>\n\n<\/div>\n\n<script>\n \/\/ \u2500\u2500 Transitions \u2500\u2500\n function showScreen(id) {\n const cur = document.querySelector('.screen.active');\n const nxt = document.getElementById(id);\n if (!nxt || cur === nxt) return;\n cur.classList.remove('visible');\n setTimeout(() => {\n cur.classList.remove('active');\n nxt.classList.add('active');\n requestAnimationFrame(() => requestAnimationFrame(() => {\n nxt.classList.add('visible');\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }));\n }, 300);\n }\n\n requestAnimationFrame(() => requestAnimationFrame(() => {\n document.getElementById('screen-choose').classList.add('visible');\n }));\n\n \/\/ \u2500\u2500 PRO \u2500\u2500\n function calcPro() {\n const films = parseFloat(document.getElementById('pro-films').value);\n const time = parseFloat(document.getElementById('pro-time').value);\n const rate = parseFloat(document.getElementById('pro-rate').value);\n const err = document.getElementById('pro-error');\n\n if (!films || !time || !rate || films <= 0 || time <= 0 || rate <= 0) {\n err.style.display = 'block'; return;\n }\n err.style.display = 'none';\n\n const totalH = (films * 4 * time) \/ 60;\n const savedH = totalH * 0.35;\n const savedM = savedH * rate;\n const yearM = savedM * 12;\n\n animVal('pro-totalH', totalH, 'h', fmtH);\n animVal('pro-savedH', savedH, 'h', fmtH);\n animVal('pro-savedM', savedM, 'z\u0142', fmtM);\n animVal('pro-yearM', yearM, 'z\u0142', fmtM);\n\n document.getElementById('pro-cta-h').textContent = fmtH(savedH);\n showResult('pro-result');\n }\n\n \/\/ \u2500\u2500 BEGINNER \u2500\u2500\n const platforms = {\n tiktok: { label: 'TikTok', editMin: 35, cpm: 0.020, learnDays: 4 },\n youtube: { label: 'YouTube Shorts', editMin: 45, cpm: 0.040, learnDays: 4 },\n instagram: { label: 'Instagram Reels', editMin: 40, cpm: 0.030, learnDays: 4 },\n multi: { label: 'wszystkich platform', editMin: 50, cpm: 0.055, learnDays: 4 },\n };\n\n function calcBeginner() {\n const films = parseFloat(document.getElementById('beg-films').value);\n const price = parseFloat(document.getElementById('beg-price').value);\n const time = parseFloat(document.getElementById('beg-time').value);\n const err = document.getElementById('beg-error');\n\n if (!films || !price || !time || films <= 0 || price <= 0 || time <= 0) {\n err.style.display = 'block'; return;\n }\n err.style.display = 'none';\n\n const monthIncome = films * price;\n const yearIncome = monthIncome * 12;\n const hoursMonth = (films * time) \/ 60;\n const effectiveRate = monthIncome \/ hoursMonth;\n\n animVal('beg-monthIncome', monthIncome, 'z\u0142', fmtM);\n animVal('beg-yearIncome', yearIncome, 'z\u0142', fmtM);\n animVal('beg-hoursM', hoursMonth, 'h', fmtH);\n animVal('beg-learn', 4, 'dni', v => Math.round(v));\n\n document.getElementById('beg-info').innerHTML =\n `Przy <strong>${Math.round(films)} rolkach miesi\u0119cznie<\/strong> w stawce <strong>${Math.round(price).toLocaleString('pl-PL')} z\u0142\/rolka<\/strong>, \n Twoja efektywna stawka godzinowa wynosi <strong>${Math.round(effectiveRate).toLocaleString('pl-PL')} z\u0142\/h<\/strong>. \n Po kursie CapCut (4 dni) jeste\u015b gotowy na <strong>pierwszego p\u0142ac\u0105cego klienta<\/strong> \u2014 \n firmy, agencje i tw\u00f3rcy stale szukaj\u0105 monta\u017cyst\u00f3w, kt\u00f3rzy dostarczaj\u0105 szybko i powtarzalnie.`;\n\n showResult('beg-result');\n }\n\n \/\/ \u2500\u2500 Helpers \u2500\u2500\n function showResult(id) {\n const el = document.getElementById(id);\n el.style.display = 'block';\n requestAnimationFrame(() => requestAnimationFrame(() => {\n el.classList.add('visible');\n el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }));\n }\n\n function animVal(id, end, unit, fmt) {\n const el = document.getElementById(id);\n const unitHtml = `<span class=\"stat-unit\">${unit}<\/span>`;\n const t0 = performance.now();\n const dur = 650;\n (function tick(now) {\n const p = Math.min((now - t0) \/ dur, 1);\n const ease = 1 - Math.pow(1 - p, 3);\n el.innerHTML = fmt(end * ease) + unitHtml;\n if (p < 1) requestAnimationFrame(tick);\n })(t0);\n }\n\n function fmtH(h) {\n if (h >= 10) return Math.round(h);\n return parseFloat(h.toFixed(1)).toString().replace('.', ',');\n }\n\n function fmtM(m) { return Math.round(m).toLocaleString('pl-PL'); }\n\n \/\/ \u2500\u2500 CLIENT \u2500\u2500\n function submitLead() {\n const films = document.getElementById('cl-films').value;\n const name = document.getElementById('cl-name').value.trim();\n const email = document.getElementById('cl-email').value.trim();\n const phone = document.getElementById('cl-phone').value.trim();\n const err = document.getElementById('cl-error');\n\n if (!films || !name || (!email && !phone)) {\n err.style.display = 'block';\n err.textContent = !films || !name ? 'Uzupe\u0142nij liczb\u0119 rolek i imi\u0119.' : 'Podaj e-mail lub telefon.';\n return;\n }\n err.style.display = 'none';\n\n document.getElementById('cl-form').style.display = 'none';\n const successEl = document.getElementById('cl-success');\n successEl.classList.add('show');\n successEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n\n document.addEventListener('keydown', e => {\n if (e.key !== 'Enter') return;\n if (document.getElementById('screen-pro').classList.contains('active')) calcPro();\n if (document.getElementById('screen-beginner').classList.contains('active')) calcBeginner();\n });\n<\/script>\n<\/body>\n<\/html><\/div>\n\t\t\t\t\t\t<\/div>\n\t\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>Kalkulator Monta\u017cu CapCut Kalkulator CapCut Kimjeste\u015b? Wybierz sw\u00f3j profil \u2014 poka\u017cemy Ci wyniki dopasowane w\u0142a\u015bnie do Ciebie. \ud83c\udfac Ju\u017c montuj\u0119 Tworz\u0119 filmy regularnie, chc\u0119 robi\u0107 to szybciej i zarabia\u0107 wi\u0119cej \u2192 \u2728 Zaczynam Nie montuj\u0119 jeszcze, ale chc\u0119 zosta\u0107 monta\u017cyst\u0105 i zarabia\u0107 na wideo \u2192 \ud83d\udcbc Szukam monta\u017cysty Nie mam czasu montowa\u0107 \u2014 chc\u0119 kogo\u015b, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/www.mikolajsome.pl\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mikolajsome.pl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mikolajsome.pl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mikolajsome.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mikolajsome.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":12,"href":"https:\/\/www.mikolajsome.pl\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/www.mikolajsome.pl\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/www.mikolajsome.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}