{"id":8,"date":"2026-05-15T19:46:53","date_gmt":"2026-05-15T19:46:53","guid":{"rendered":"https:\/\/marcinbilecki.pl\/?page_id=8"},"modified":"2026-06-05T12:51:10","modified_gmt":"2026-06-05T12:51:10","slug":"strona-glowna","status":"publish","type":"page","link":"https:\/\/marcinbilecki.pl\/","title":{"rendered":"Strona g\u0142\u00f3wna"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8\" class=\"elementor elementor-8\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b016af8 e-con-full e-flex jltma-glass-effect-no e-con e-parent\" data-id=\"b016af8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5015172 jltma-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"5015172\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<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=Libre+Baskerville:wght@700&family=Open+Sans:wght@400;700&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\n\n<style>\n  #custom-hero-section {\n    box-sizing: border-box !important;\n    font-family: 'Open Sans', sans-serif !important;\n    background-image: linear-gradient(to right, rgba(14, 12, 22, 0.95) 20%, rgba(14, 12, 22, 0.4) 60%, rgba(14, 12, 22, 0.1) 100%), \n                      url('https:\/\/marcinbilecki.pl\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-17-maj-2026-21_15_26.png') !important;\n    background-size: cover !important;\n    background-position: center right !important;\n    background-repeat: no-repeat !important;\n    display: flex !important;\n    flex-direction: column !important;\n    align-items: flex-start !important;\n    justify-content: center !important;\n    min-height: 100vh !important;\n    padding: 80px 10% 80px 18% !important;\n    margin: 0 !important;\n  }\n\n  #custom-hero-section * {\n    box-sizing: border-box !important;\n  }\n\n  #custom-hero-section .hero-content-inner {\n    max-width: 650px !important;\n    text-align: left !important;\n  }\n\n  #custom-hero-section .top-badge-outer {\n    display: inline-block !important;\n    padding: 1px !important;\n    border-radius: 50px !important;\n    background: linear-gradient(to right, #d9b867, #a855f7) !important;\n    margin-bottom: 30px !important;\n  }\n\n  #custom-hero-section .top-badge-inner {\n    padding: 8px 24px !important;\n    border-radius: 50px !important;\n    background-color: #0e0c16 !important;\n    font-size: 12px !important;\n    letter-spacing: 2px !important;\n    font-weight: 700 !important;\n    color: #ffffff !important;\n    text-transform: uppercase !important;\n  }\n\n  #custom-hero-section h1.hero-heading {\n    font-family: 'Libre Baskerville', serif !important;\n    font-size: 56px !important;\n    font-weight: 700 !important;\n    line-height: 1.2 !important;\n    margin-top: 0 !important;\n    margin-bottom: 25px !important;\n    color: #ffffff !important;\n  }\n\n  #custom-hero-section h1.hero-heading span.highlight {\n    color: #a855f7 !important;\n  }\n\n  #custom-hero-section p.hero-lead {\n    font-family: 'Open Sans', sans-serif !important;\n    font-size: 20px !important;\n    font-weight: 400 !important;\n    margin-bottom: 40px !important;\n    color: #ffffff !important;\n    opacity: 0.9 !important;\n  }\n\n  #custom-hero-section .tags-grid {\n    display: flex !important;\n    flex-wrap: wrap !important;\n    gap: 12px !important;\n    justify-content: flex-start !important;\n    margin-bottom: 50px !important;\n  }\n\n  #custom-hero-section .service-tag {\n    background-color: rgba(43, 40, 61, 0.75) !important;\n    border: 1px solid #3e3852 !important;\n    border-radius: 12px !important;\n    padding: 10px 20px !important;\n    display: flex !important;\n    align-items: center !important;\n    gap: 10px !important;\n    font-size: 16px !important;\n    color: #ffffff !important;\n  }\n\n  #custom-hero-section .service-tag i.fizjo {\n    color: #a0aec0 !important;\n  }\n\n  #custom-hero-section .service-tag i.jazda {\n    color: #f6ad55 !important;\n  }\n\n  #custom-hero-section .service-tag i.walki {\n    color: #c4b5fd !important;\n  }\n\n  #custom-hero-section .service-tag i.strzel {\n    color: #e9d8a6 !important;\n  }\n\n  #custom-hero-section .cta-button {\n    font-family: 'Open Sans', sans-serif !important;\n    display: inline-flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    gap: 10px !important;\n    padding: 12px 28px !important;\n    background-color: #d9b867 !important;\n    border-radius: 50px !important;\n    color: #1a1a1a !important;\n    font-size: 15px !important;\n    font-weight: 700 !important;\n    text-decoration: none !important;\n    transition: all 0.3s ease !important;\n  }\n\n  #custom-hero-section .cta-button:hover {\n    background-color: #c9a254 !important;\n    transform: translateY(-2px) !important;\n  }\n\n  #custom-hero-section .cta-button i {\n    font-size: 14px !important;\n    color: #1a1a1a !important;\n  }\n\n  @media (max-width: 1200px) {\n    #custom-hero-section h1.hero-heading {\n      font-size: 46px !important;\n    }\n\n    #custom-hero-section {\n      padding: 60px 5% 60px 10% !important;\n    }\n  }\n\n  @media (max-width: 992px) {\n    #custom-hero-section {\n      background-image: linear-gradient(to bottom, rgba(14, 12, 22, 0.9) 40%, rgba(14, 12, 22, 0.7) 100%),\n      url('https:\/\/marcinbilecki.pl\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-17-maj-2026-21_15_26.png') !important;\n      background-position: center !important;\n      align-items: center !important;\n      justify-content: center !important;\n      padding: 80px 24px !important;\n    }\n\n    .hero-content-inner {\n      max-width: 100% !important;\n      text-align: center !important;\n    }\n\n    #custom-hero-section .tags-grid {\n      justify-content: center !important;\n    }\n  }\n\n  @media (max-width: 576px) {\n    #custom-hero-section h1.hero-heading {\n      font-size: 32px !important;\n    }\n\n    #custom-hero-section p.hero-lead {\n      font-size: 16px !important;\n    }\n\n    #custom-hero-section .service-tag {\n      width: 100% !important;\n      justify-content: center !important;\n    }\n  }\n<\/style>\n\n<div id=\"custom-hero-section\">\n  <div class=\"hero-content-inner\">\n\n    <div class=\"top-badge-outer\">\n      <div class=\"top-badge-inner\">\n        NOWOCZESNE STRONY WWW\n      <\/div>\n    <\/div>\n\n    <h1 class=\"hero-heading\">\n      ...kt\u00f3re buduj\u0105 zaufanie,<br>\n      zanim klient <span class=\"highlight\">zadzwoni.<\/span>\n    <\/h1>\n\n    <p class=\"hero-lead\">\n      Tworz\u0119 strony internetowe dla bran\u017c, w kt\u00f3rych zaufanie klienta decyduje o wyborze us\u0142ugi.\n    <\/p>\n\n    <div class=\"tags-grid\">\n\n      <div class=\"service-tag\">\n        <i class=\"fa-solid fa-user-doctor fizjo\"><\/i>\n        <span>Fizjoterapia<\/span>\n      <\/div>\n\n      <div class=\"service-tag\">\n        <i class=\"fa-solid fa-car-side jazda\"><\/i>\n        <span>Nauka jazdy<\/span>\n      <\/div>\n\n      <div class=\"service-tag\">\n        <i class=\"fa-solid fa-hand-fist walki\"><\/i>\n        <span>Sztuki walki<\/span>\n      <\/div>\n\n      <div class=\"service-tag\">\n        <i class=\"fa-solid fa-crosshairs strzel\"><\/i>\n        <span>Strzelectwo<\/span>\n      <\/div>\n\n    <\/div>\n\n    <a href=\"#\" class=\"cta-button\">\n      Napisz do mnie\n      <i class=\"fa-solid fa-envelope\"><\/i>\n    <\/a>\n\n  <\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-144131c e-con-full e-flex jltma-glass-effect-no e-con e-parent\" data-id=\"144131c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5dabf8c jltma-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"5dabf8c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n<style>\n#dlaczego-warto {\n  padding: 90px 24px;\n  background: #f8f8fb;\n  font-family: sans-serif;\n  box-sizing: border-box;\n}\n\n#dlaczego-warto .why-inner {\n  max-width: 1100px;\n  margin: 0 auto;\n}\n\n#dlaczego-warto .why-header {\n  text-align: center;\n  margin-bottom: 60px;\n}\n\n#dlaczego-warto .why-badge {\n  font-size: 11px;\n  letter-spacing: 4px;\n  text-transform: uppercase;\n  color: #C9A84C;\n  font-weight: 700;\n  margin-bottom: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n}\n\n#dlaczego-warto .why-badge::before,\n#dlaczego-warto .why-badge::after {\n  content: '\u2014';\n  opacity: 0.5;\n}\n\n#dlaczego-warto h2 {\n  font-family: 'Georgia', serif;\n  font-size: 48px;\n  line-height: 1.1;\n  margin: 0 0 20px;\n  color: #111827;\n}\n\n#dlaczego-warto h2 .highlight {\n  color: #7c3aed;\n}\n\n#dlaczego-warto .subtitle {\n  font-size: 17px;\n  color: #6b7280;\n  max-width: 700px;\n  margin: 0 auto;\n  font-family: sans-serif;\n}\n\n#dlaczego-warto .grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  grid-template-rows: auto auto auto;\n  gap: 0 20px;\n  margin-top: 60px;\n  align-items: start;\n}\n\n#dlaczego-warto .col {\n  display: grid;\n  grid-template-rows: subgrid;\n  grid-row: span 3;\n}\n\n#dlaczego-warto .card {\n  border-radius: 14px;\n  padding: 24px;\n  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;\n  position: relative;\n  overflow: hidden;\n}\n\n\/* Shimmer effect on hover *\/\n#dlaczego-warto .card::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: -100%;\n  width: 60%;\n  height: 100%;\n  background: linear-gradient(\n    90deg,\n    transparent,\n    rgba(255, 255, 255, 0.35),\n    transparent\n  );\n  transition: left 0.5s ease;\n  pointer-events: none;\n}\n\n#dlaczego-warto .card:hover::before {\n  left: 150%;\n}\n\n#dlaczego-warto .problem {\n  background: #fff8f8;\n  border: 1px solid #f5c6c6;\n  box-shadow: 0 4px 16px rgba(180, 60, 60, 0.06);\n}\n\n#dlaczego-warto .problem:hover {\n  transform: translateY(-6px) scale(1.02);\n  box-shadow: 0 16px 40px rgba(180, 60, 60, 0.14);\n  border-color: #dc2626;\n}\n\n#dlaczego-warto .solution {\n  background: #fdfff8;\n  border: 1px solid #c9e8b0;\n  box-shadow: 0 4px 16px rgba(60, 140, 60, 0.06);\n}\n\n#dlaczego-warto .solution:hover {\n  transform: translateY(-6px) scale(1.02);\n  box-shadow: 0 16px 40px rgba(60, 140, 60, 0.14);\n  border-color: #16a34a;\n}\n\n#dlaczego-warto .icon {\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 20px;\n  margin-bottom: 14px;\n  transition: transform 0.3s ease;\n}\n\n#dlaczego-warto .card:hover .icon {\n  transform: rotate(10deg) scale(1.15);\n}\n\n#dlaczego-warto .problem .icon {\n  background: #fee2e2;\n  color: #dc2626;\n}\n\n#dlaczego-warto .solution .icon {\n  background: #dcfce7;\n  color: #16a34a;\n}\n\n#dlaczego-warto .label {\n  display: inline-block;\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 2px;\n  text-transform: uppercase;\n  padding: 5px 11px;\n  border-radius: 50px;\n  margin-bottom: 12px;\n  font-family: sans-serif;\n}\n\n#dlaczego-warto .problem .label {\n  background: #fee2e2;\n  color: #dc2626;\n}\n\n#dlaczego-warto .solution .label {\n  background: #dcfce7;\n  color: #15803d;\n}\n\n#dlaczego-warto h3 {\n  font-family: 'Georgia', serif;\n  font-size: 18px;\n  line-height: 1.35;\n  margin: 0 0 10px;\n  transition: color 0.2s ease;\n}\n\n#dlaczego-warto .problem h3 {\n  color: #b91c1c;\n}\n\n#dlaczego-warto .solution h3 {\n  color: #166534;\n}\n\n#dlaczego-warto p {\n  color: #6b7280;\n  font-size: 14px;\n  line-height: 1.65;\n  margin: 0;\n  font-family: sans-serif;\n}\n\n\/* Strza\u0142ka dynamiczna *\/\n#dlaczego-warto .arrow {\n  text-align: center;\n  padding: 6px 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n#dlaczego-warto .arrow-inner {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 2px;\n  animation: pulseArrow 1.8s ease-in-out infinite;\n}\n\n#dlaczego-warto .arrow-inner span {\n  display: block;\n  width: 2px;\n  border-radius: 2px;\n  background: #7c3aed;\n}\n\n#dlaczego-warto .arrow-inner span:nth-child(1) {\n  height: 10px;\n  opacity: 0.35;\n  animation: fadeDown 1.8s ease-in-out infinite 0s;\n}\n\n#dlaczego-warto .arrow-inner span:nth-child(2) {\n  height: 10px;\n  opacity: 0.65;\n  animation: fadeDown 1.8s ease-in-out infinite 0.2s;\n}\n\n#dlaczego-warto .arrow-inner span:nth-child(3) {\n  height: 10px;\n  opacity: 1;\n  animation: fadeDown 1.8s ease-in-out infinite 0.4s;\n}\n\n  #dlaczego-warto .arrow-chevron {\n  width: 0;\n  height: 0;\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-top: 8px solid #7c3aed;\n  margin-top: 2px;\n  animation: fadeDown 1.8s ease-in-out infinite 0.5s;\n}\n}\n\n@keyframes fadeDown {\n  0%, 100% { opacity: 0.2; transform: translateY(-3px); }\n  50% { opacity: 1; transform: translateY(3px); }\n}\n\n#dlaczego-warto .bottom-box {\n  margin-top: 50px;\n  max-width: 800px;\n  margin-left: auto;\n  margin-right: auto;\n  background: white;\n  border: 1px solid rgba(201, 168, 76, 0.25);\n  border-radius: 16px;\n  padding: 24px 30px;\n  text-align: center;\n  box-shadow: 0 8px 32px rgba(201, 168, 76, 0.08);\n  transition: box-shadow 0.3s ease, transform 0.3s ease;\n}\n\n#dlaczego-warto .bottom-box:hover {\n  box-shadow: 0 16px 48px rgba(201, 168, 76, 0.16);\n  transform: translateY(-3px);\n}\n\n#dlaczego-warto .bottom-box strong {\n  display: block;\n  font-size: 20px;\n  color: #111827;\n  margin-bottom: 8px;\n  font-family: 'Georgia', serif;\n}\n\n#dlaczego-warto .bottom-box p {\n  font-size: 15px;\n  color: #6b7280;\n}\n\n@media (max-width: 900px) {\n  #dlaczego-warto .grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  #dlaczego-warto .col {\n    grid-row: span 3;\n  }\n}\n\n@media (max-width: 560px) {\n  #dlaczego-warto {\n    padding: 60px 16px;\n  }\n  #dlaczego-warto h2 {\n    font-size: 32px;\n  }\n  #dlaczego-warto .grid {\n    grid-template-columns: 1fr;\n  }\n}\n<\/style>\n\n<section id=\"dlaczego-warto\">\n<div class=\"why-inner\">\n\n  <div class=\"why-header\">\n    <div class=\"why-badge\">Dlaczego warto<\/div>\n    <h2>Dlaczego konkurencja <span class=\"highlight\">odbiera<\/span> Ci klient\u00f3w?<\/h2>\n    <div class=\"subtitle\">Nie dlatego, \u017ce jest lepsza. Dlatego, \u017ce lepiej prezentuje si\u0119 w internecie.<\/div>\n  <\/div>\n\n  <div class=\"grid\">\n\n    <div class=\"col\">\n      <div class=\"card problem\">\n        <div class=\"icon\"><i class=\"fa-solid fa-face-angry\"><\/i><\/div>\n        <div class=\"label\">Problem<\/div>\n        <h3>Masz \u015bwietne us\u0142ugi, ale nikt o tym nie wie?<\/h3>\n        <p>Brak opinii i profesjonalnej prezentacji sprawia, \u017ce klient wybiera konkurencj\u0119.<\/p>\n      <\/div>\n      <div class=\"arrow\"><div class=\"arrow-inner\"><span><\/span><span><\/span><span><\/span><div class=\"arrow-chevron\"><\/div><\/div><\/div>\n      <div class=\"card solution\">\n        <div class=\"icon\"><i class=\"fa-solid fa-star\"><\/i><\/div>\n        <div class=\"label\">Rozwi\u0105zanie<\/div>\n        <h3>Opinie buduj\u0105 zaufanie od pierwszej sekundy<\/h3>\n        <p>Klienci widz\u0105 dowody spo\u0142eczne zanim jeszcze zdecyduj\u0105 si\u0119 zadzwoni\u0107.<\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"col\">\n      <div class=\"card problem\">\n        <div class=\"icon\"><i class=\"fa-solid fa-mobile-screen\"><\/i><\/div>\n        <div class=\"label\">Problem<\/div>\n        <h3>Rezerwacje przez SMS lub Messenger?<\/h3>\n        <p>Chaos, pomy\u0142ki i ci\u0105g\u0142e odpowiadanie na wiadomo\u015bci zabieraj\u0105 Tw\u00f3j czas.<\/p>\n      <\/div>\n      <div class=\"arrow\"><div class=\"arrow-inner\"><span><\/span><span><\/span><span><\/span><div class=\"arrow-chevron\"><\/div><\/div><\/div>\n      <div class=\"card solution\">\n        <div class=\"icon\"><i class=\"fa-solid fa-calendar-days\"><\/i><\/div>\n        <div class=\"label\">Rozwi\u0105zanie<\/div>\n        <h3>Terminarz online dzia\u0142a 24\/7<\/h3>\n        <p>Klienci zapisuj\u0105 si\u0119 samodzielnie nawet wtedy, gdy \u015bpisz.<\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"col\">\n      <div class=\"card problem\">\n        <div class=\"icon\"><i class=\"fa-solid fa-user\"><\/i><\/div>\n        <div class=\"label\">Problem<\/div>\n        <h3>\"Ile to kosztuje?\" odpowiadasz ka\u017cdemu osobno?<\/h3>\n        <p>Powtarzasz te same informacje dziesi\u0105tki razy w tygodniu.<\/p>\n      <\/div>\n      <div class=\"arrow\"><div class=\"arrow-inner\"><span><\/span><span><\/span><span><\/span><div class=\"arrow-chevron\"><\/div><\/div><\/div>\n      <div class=\"card solution\">\n        <div class=\"icon\"><i class=\"fa-solid fa-tags\"><\/i><\/div>\n        <div class=\"label\">Rozwi\u0105zanie<\/div>\n        <h3>Przejrzysty cennik filtruje klient\u00f3w<\/h3>\n        <p>Do kontaktu trafiaj\u0105 osoby realnie zainteresowane wsp\u00f3\u0142prac\u0105.<\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"col\">\n      <div class=\"card problem\">\n        <div class=\"icon\"><i class=\"fa-solid fa-folder\"><\/i><\/div>\n        <div class=\"label\">Problem<\/div>\n        <h3>Portfolio tkwi w Instagramie i wiadomo\u015bciach?<\/h3>\n        <p>Najlepsze realizacje s\u0105 rozproszone i trudne do znalezienia.<\/p>\n      <\/div>\n      <div class=\"arrow\"><div class=\"arrow-inner\"><span><\/span><span><\/span><span><\/span><div class=\"arrow-chevron\"><\/div><\/div><\/div>\n      <div class=\"card solution\">\n        <div class=\"icon\"><i class=\"fa-solid fa-image\"><\/i><\/div>\n        <div class=\"label\">Rozwi\u0105zanie<\/div>\n        <h3>Galeria sprzedaje za Ciebie<\/h3>\n        <p>Profesjonalna prezentacja us\u0142ug buduje warto\u015b\u0107 i przyci\u0105ga klient\u00f3w.<\/p>\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n  <div class=\"bottom-box\">\n    <strong>Dobrze zaprojektowana strona internetowa pracuje dla Ciebie 24\/7<\/strong>\n    <p>Przyci\u0105ga klient\u00f3w, odpowiada na pytania i zwi\u0119ksza liczb\u0119 rezerwacji.<\/p>\n  <\/div>\n\n<\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-54defbe e-con-full e-flex jltma-glass-effect-no e-con e-parent\" data-id=\"54defbe\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-94ef647 jltma-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"94ef647\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n.mb-about {\n  background: #0e0c16 !important; \/* Ciemne t\u0142o dopasowane do sekcji z magiem *\/\n  padding: 100px 40px;\n  font-family: 'Open Sans', sans-serif !important;\n}\n\n.mb-about__label {\n  text-align: center;\n  margin-bottom: 60px;\n}\n.mb-about__label span {\n  display: block;\n  font-size: 11px;\n  letter-spacing: 4px;\n  text-transform: uppercase;\n  color: rgba(255, 255, 255, 0.5) !important;\n  margin-bottom: 10px;\n}\n.mb-about__label h2 {\n  font-family: 'Libre Baskerville', serif !important;\n  font-size: 38px;\n  font-weight: 700;\n  color: #ffffff !important; \/* Zmiana na bia\u0142y dla kontrastu *\/\n  margin: 0 0 12px;\n}\n.mb-about__label-line {\n  width: 40px;\n  height: 3px;\n  background: #a855f7 !important; \/* Fiolet dopasowany do hedera *\/\n  margin: 0 auto;\n  border-radius: 2px;\n}\n\n.mb-about__inner {\n  max-width: 1200px;\n  margin: 0 auto;\n  display: flex;\n  align-items: center; \/* Wyr\u00f3wnanie do \u015brodka w pionie dla lepszego balansu powi\u0119kszonych zdj\u0119\u0107 *\/\n  gap: 60px;\n}\n\n\/* Powi\u0119kszenie kontenera zdj\u0119\u0107 z 52% na 58% *\/\n.mb-about__images {\n  flex: 0 0 58% !important;\n  display: flex;\n  gap: 12px;\n}\n\n\/* Zwi\u0119kszenie min-height z 380px na 440px *\/\n.mb-about__images img {\n  width: calc(33.333% - 8px) !important;\n  min-height: 440px !important;\n  aspect-ratio: 2\/3;\n  object-fit: cover;\n  object-position: top center;\n  display: block;\n  border-radius: 8px; \/* Lekko zwi\u0119kszone zaokr\u0105glenie pasuj\u0105ce do nowoczesnego stylu *\/\n  border: 1px solid rgba(255, 255, 255, 0.05);\n}\n\n\/* TEKST *\/\n.mb-about__content {\n  flex: 1;\n}\n\n.mb-about__content p {\n  font-size: 16px;\n  color: rgba(255, 255, 255, 0.85) !important; \/* Jasny tekst na ciemnym tle *\/\n  line-height: 1.85;\n  margin: 0 0 18px;\n}\n\n.mb-about__content p strong {\n  color: #ffffff !important;\n  font-weight: 700;\n}\n\n\/* Dopasowanie boksu notatki do ciemnego motywu *\/\n.mb-about__note {\n  margin-top: 32px;\n  background: rgba(255, 255, 255, 0.04) !important;\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  border-radius: 12px;\n  padding: 18px 20px;\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n}\n\n.mb-about__note-icon {\n  font-size: 22px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.mb-about__note p {\n  font-size: 14px;\n  color: rgba(255, 255, 255, 0.65) !important;\n  line-height: 1.65;\n  margin: 0;\n}\n\n@media (max-width: 992px) {\n  .mb-about__inner { flex-direction: column; gap: 40px; }\n  .mb-about__images { flex: none !important; width: 100% !important; }\n  .mb-about__images img { min-height: 360px !important; }\n  .mb-about { padding: 60px 24px; }\n}\n<\/style>\n\n<section class=\"mb-about\" id=\"o-mnie\">\n\n  <div class=\"mb-about__label\">\n    <span>\u2014 O mnie \u2014<\/span>\n    <h2>Kim jestem?<\/h2>\n    <div class=\"mb-about__label-line\"><\/div>\n  <\/div>\n\n  <div class=\"mb-about__inner\">\n\n    <div class=\"mb-about__images\">\n      <img decoding=\"async\" src=\"https:\/\/marcinbilecki.pl\/wp-content\/uploads\/2026\/05\/wmremove-transformed.png\" alt=\"Marcin Bilecki\">\n      <img decoding=\"async\" src=\"https:\/\/marcinbilecki.pl\/wp-content\/uploads\/2026\/05\/Gemini_Generated_Image_mv0nx6mv0nx6mv0n.png\" alt=\"Marcin Bilecki astronauta\">\n      <img decoding=\"async\" src=\"https:\/\/marcinbilecki.pl\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-15-maj-2026-21_05_06.png\" alt=\"Marcin Bilecki rycerz\">\n    <\/div>\n\n    <div class=\"mb-about__content\">\n      <p>Nie stworzy\u0142em jeszcze tysi\u0105ca stron internetowych.<br>\n      Nie prowadz\u0119 agencji z 40 handlowcami i automatem<br>\n      do kawy za 18 tysi\u0119cy.<\/p>\n\n      <p>Ale mam co\u015b lepszego:<br>\n      <strong>\u015bwie\u017ce pomys\u0142y, kreatywne podej\u015bcie i niezawodne wsparcie przyj<span style=\"color:#a855f7; font-weight: bold;\">AI<\/span>ci\u00f3\u0142.<\/strong><\/p>\n\n      <p>Tworz\u0119 nowoczesne strony dla ludzi, kt\u00f3rzy chc\u0105 wygl\u0105da\u0107\n      profesjonalnie \u2014 i przy tym pozosta\u0107 sob\u0105.<\/p>\n\n      <p>A je\u015bli trzeba\u2026 mog\u0119 te\u017c zrobi\u0107 stron\u0119 inspirowan\u0105\n      \u015bredniowiecznym rycerzem programuj\u0105cym MacBooka\n      przy \u015bwiecach.<\/p>\n\n      <div class=\"mb-about__note\">\n        <div class=\"mb-about__note-icon\">\ud83d\ude42<\/div>\n        <p>Tak, cz\u0119\u015b\u0107 grafik zrobi\u0142em z AI.<br>\n        Nie, AI jeszcze nie odpowiada klientom o 23:47.<\/p>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f7d7f8a e-con-full e-flex jltma-glass-effect-no e-con e-parent\" data-id=\"f7d7f8a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-72781c8 jltma-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"72781c8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<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=Libre+Baskerville:wght@700&family=Open+Sans:wght@400;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n.mb-oferta {\n  background: #f9f9fb !important; \/* Jasne t\u0142o do prze\u0142amania sekcji *\/\n  padding: 100px 40px;\n  font-family: 'Open Sans', sans-serif !important;\n}\n\n.mb-oferta__inner {\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n\/* NAG\u0141\u00d3WEK SEKCJI *\/\n.mb-section-label {\n  display: block;\n  text-align: center;\n  font-size: 11px;\n  letter-spacing: 4px;\n  text-transform: uppercase;\n  color: #b89336 !important; \/* Ciemniejszy z\u0142oty dla kontrastu na jasnym tle *\/\n  margin-bottom: 14px;\n  font-weight: 700;\n}\n\n.mb-section-label::before,\n.mb-section-label::after {\n  content: '\u2014';\n  margin: 0 10px;\n  opacity: 0.5;\n}\n\n.mb-oferta__headline {\n  text-align: center;\n  font-family: 'Libre Baskerville', serif !important;\n  font-size: clamp(30px, 3.5vw, 46px);\n  font-weight: 700;\n  color: #1a1a1a !important; \/* Ciemny tekst *\/\n  margin: 0 0 16px;\n}\n\n.mb-oferta__underline {\n  display: block;\n  width: 48px;\n  height: 3px;\n  background: linear-gradient(90deg, #d9b867, #a855f7) !important; \/* Nowe gradienty marki *\/\n  margin: 0 auto 64px;\n  border-radius: 2px;\n}\n\n\/* KARTY *\/\n.mb-oferta__grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 24px;\n  align-items: stretch;\n}\n\n.mb-card {\n  background: #ffffff !important; \/* Bia\u0142e karty *\/\n  border-radius: 16px;\n  padding: 36px 32px;\n  position: relative;\n  overflow: hidden;\n  transition: transform 0.25s ease, box-shadow 0.25s ease;\n  display: flex;\n  flex-direction: column;\n}\n\n.mb-card:hover {\n  transform: translateY(-6px);\n}\n\n\/* Karta 1 \u2014 One Page *\/\n.mb-card--onepage {\n  border: 1px solid rgba(168, 85, 247, 0.15) !important;\n  box-shadow: 0 10px 30px rgba(168, 85, 247, 0.04) !important;\n}\n.mb-card--onepage:hover {\n  box-shadow: 0 15px 40px rgba(168, 85, 247, 0.12) !important;\n}\n\n\/* Karta 2 \u2014 Rozbudowana (wyr\u00f3\u017cniona) *\/\n.mb-card--rozbudowana {\n  border: 1px solid rgba(168, 85, 247, 0.4) !important;\n  box-shadow: 0 10px 40px rgba(168, 85, 247, 0.08) !important;\n}\n.mb-card--rozbudowana:hover {\n  box-shadow: 0 15px 40px rgba(168, 85, 247, 0.18) !important;\n}\n.mb-card--rozbudowana::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background: linear-gradient(90deg, #a855f7, #c4b5fd) !important;\n}\n\n\/* Karta 3 \u2014 Projekt indywidualny *\/\n.mb-card--custom {\n  border: 1px solid rgba(217, 184, 103, 0.35) !important;\n  box-shadow: 0 10px 30px rgba(217, 184, 103, 0.04) !important;\n}\n.mb-card--custom:hover {\n  box-shadow: 0 15px 40px rgba(217, 184, 103, 0.15) !important;\n}\n.mb-card--custom::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background: linear-gradient(90deg, #d9b867, #f6ad55) !important;\n}\n\n\/* IKONY *\/\n.mb-card__icon {\n  width: 46px;\n  height: 46px;\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 24px;\n  font-size: 22px;\n}\n.mb-card--onepage .mb-card__icon {\n  background: rgba(168, 85, 247, 0.08) !important;\n}\n.mb-card--rozbudowana .mb-card__icon {\n  background: rgba(168, 85, 247, 0.12) !important;\n}\n.mb-card--custom .mb-card__icon {\n  background: rgba(217, 184, 103, 0.12) !important;\n}\n\n\/* TYTU\u0141Y I TEKSTY *\/\n.mb-card__title {\n  font-size: 22px;\n  font-weight: 700;\n  color: #1a1a1a !important;\n  margin: 0 0 6px;\n}\n.mb-card--custom .mb-card__title {\n  color: #b89336 !important;\n}\n\n.mb-card__subtitle {\n  font-size: 13px;\n  color: #666666 !important;\n  letter-spacing: 0.2px;\n  margin: 0 0 24px;\n}\n\n\/* CENY *\/\n.mb-card__price {\n  font-family: 'Libre Baskerville', serif !important;\n  font-size: clamp(26px, 2.5vw, 34px) !important;\n  font-weight: 700;\n  color: #a855f7 !important; \/* Fiolet z logo *\/\n  margin: 0;\n  line-height: 1.15;\n  height: 70px;\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n}\n.mb-card--custom .mb-card__price {\n  font-size: 23px !important;\n  color: #1a1a1a !important;\n}\n\n\/* LISTA *\/\n.mb-card__list {\n  list-style: none;\n  padding: 24px 0 0 !important;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  border-top: 1px solid #ededf2; \/* Subtelna linia oddzielaj\u0105ca cen\u0119 *\/\n}\n\n.mb-card__spacer {\n  flex-grow: 1;\n  min-height: 30px;\n}\n\n.mb-card__list li {\n  font-size: 14.5px;\n  color: #444444 !important;\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  line-height: 1.4;\n}\n\n.mb-card__list li::before {\n  content: '\u2713';\n  color: #a855f7 !important;\n  font-weight: 700;\n  flex-shrink: 0;\n}\n.mb-card--custom .mb-card__list li::before {\n  color: #d9b867 !important;\n}\n\n@media (max-width: 992px) {\n  .mb-oferta__grid {\n    grid-template-columns: 1fr;\n    max-width: 450px;\n    margin: 0 auto;\n  }\n  .mb-oferta {\n    padding: 72px 24px;\n  }\n  .mb-card__price {\n    height: auto;\n    margin-bottom: 20px;\n  }\n}\n<\/style>\n\n<section class=\"mb-oferta\" id=\"oferta\">\n  <div class=\"mb-oferta__inner\">\n\n    <span class=\"mb-section-label\">Oferta<\/span>\n    <h2 class=\"mb-oferta__headline\">Ile to kosztuje?<\/h2>\n    <span class=\"mb-oferta__underline\"><\/span>\n\n    <div class=\"mb-oferta__grid\">\n\n      <!-- KARTA 1: One Page -->\n      <div class=\"mb-card mb-card--onepage\">\n        <div class=\"mb-card__icon\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#a855f7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"\/>\n          <\/svg>\n        <\/div>\n        <h3 class=\"mb-card__title\">One Page<\/h3>\n        <p class=\"mb-card__subtitle\">Idealne na start<\/p>\n        <div class=\"mb-card__price\">do 1500 z\u0142<\/div>\n        <ul class=\"mb-card__list\">\n          <li>Strona all-in-one<\/li>\n          <li>Responsywno\u015b\u0107<\/li>\n          <li>Formularz kontaktowy<\/li>\n          <li>Szybka realizacja<\/li>\n        <\/ul>\n        <div class=\"mb-card__spacer\"><\/div>\n      <\/div>\n\n      <!-- KARTA 2: Rozbudowana -->\n      <div class=\"mb-card mb-card--rozbudowana\">\n        <div class=\"mb-card__icon\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#a855f7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/>\n            <path d=\"M2 17l10 5 10-5\"\/>\n            <path d=\"M2 12l10 5 10-5\"\/>\n          <\/svg>\n        <\/div>\n        <h3 class=\"mb-card__title\">Rozbudowana strona<\/h3>\n        <p class=\"mb-card__subtitle\">Dla firm, kt\u00f3re chc\u0105 wi\u0119cej<\/p>\n        <div class=\"mb-card__price\">2000 \u2013 3000 z\u0142<\/div>\n        <ul class=\"mb-card__list\">\n          <li>Kilka podstron<\/li>\n          <li>Oferta, portfolio, kontakt<\/li>\n          <li>SEO<\/li>\n          <li>Animacje i efekty<\/li>\n        <\/ul>\n        <div class=\"mb-card__spacer\"><\/div>\n      <\/div>\n\n      <!-- KARTA 3: Projekt indywidualny -->\n      <div class=\"mb-card mb-card--custom\">\n        <div class=\"mb-card__icon\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#d9b867\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"12\" cy=\"8\" r=\"6\"\/>\n            <path d=\"M15.477 12.89L17 22l-5-3-5 3 1.523-9.11\"\/>\n          <\/svg>\n        <\/div>\n        <h3 class=\"mb-card__title\">Projekt indywidualny<\/h3>\n        <p class=\"mb-card__subtitle\">Masz nietypowy pomys\u0142?<\/p>\n        <div class=\"mb-card__price\">Wycena indywidualna<\/div>\n        <ul class=\"mb-card__list\">\n          <li>Nietypowe pomys\u0142y<\/li>\n          <li>Custom design<\/li>\n          <li>Branding<\/li>\n          <li>Integracje i funkcjonalno\u015bci<\/li>\n        <\/ul>\n        <div class=\"mb-card__spacer\"><\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6ffbe4a e-con-full e-flex jltma-glass-effect-no e-con e-parent\" data-id=\"6ffbe4a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b64e408 jltma-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"b64e408\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"mb-examples\" id=\"przyklady\">\n  <div class=\"mb-examples__inner\">\n    <span class=\"mb-examples__label\">Przyk\u0142ady<\/span>\n    <p class=\"mb-examples__headline\">Sekcje, kt\u00f3re zmieniaj\u0105 odwiedzaj\u0105cych w klient\u00f3w.<\/p>\n\n    <div class=\"mb-carousel\">\n      <div class=\"mb-carousel__track-wrapper\">\n        <div class=\"mb-carousel__track\">\n          <div class=\"mb-carousel__slide\"><img decoding=\"async\" src=\"https:\/\/marcinbilecki.pl\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-4-cze-2026-19_28_09.png\" alt=\"Przyk\u0142ad strony 1\" class=\"mb-carousel__img\"><\/div>\n          <div class=\"mb-carousel__slide\"><img decoding=\"async\" src=\"https:\/\/marcinbilecki.pl\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-4-cze-2026-19_30_58.png\" alt=\"Przyk\u0142ad strony 2\" class=\"mb-carousel__img\"><\/div>\n          <div class=\"mb-carousel__slide\"><img decoding=\"async\" src=\"https:\/\/marcinbilecki.pl\/wp-content\/uploads\/2026\/06\/Projekt-bez-nazwy5.png\" alt=\"Przyk\u0142ad strony 3\" class=\"mb-carousel__img\"><\/div>\n          <div class=\"mb-carousel__slide\"><img decoding=\"async\" src=\"https:\/\/marcinbilecki.pl\/wp-content\/uploads\/2026\/06\/slajd_3.png\" alt=\"Przyk\u0142ad strony 4\" class=\"mb-carousel__img\"><\/div>\n          <div class=\"mb-carousel__slide\"><img decoding=\"async\" src=\"https:\/\/marcinbilecki.pl\/wp-content\/uploads\/2026\/06\/slajd_1.png\" alt=\"Przyk\u0142ad strony 5\" class=\"mb-carousel__img\"><\/div>\n        <\/div>\n      <\/div>\n\n      <button class=\"mb-carousel__btn mb-carousel__btn--prev\" aria-label=\"Poprzedni\">\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M13 4L7 10L13 16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n      <\/button>\n      <button class=\"mb-carousel__btn mb-carousel__btn--next\" aria-label=\"Nast\u0119pny\">\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M7 4L13 10L7 16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n      <\/button>\n\n      <div class=\"mb-carousel__dots\">\n        <button class=\"mb-carousel__dot mb-carousel__dot--active\" aria-label=\"Slajd 1\"><\/button>\n        <button class=\"mb-carousel__dot\" aria-label=\"Slajd 2\"><\/button>\n        <button class=\"mb-carousel__dot\" aria-label=\"Slajd 3\"><\/button>\n        <button class=\"mb-carousel__dot\" aria-label=\"Slajd 4\"><\/button>\n        <button class=\"mb-carousel__dot\" aria-label=\"Slajd 5\"><\/button>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n  .mb-examples {\n    background: #0a0a12;\n    padding: 100px 40px;\n    font-family: 'Georgia', serif;\n  }\n  .mb-examples__inner {\n    max-width: 1320px;\n    margin: 0 auto;\n    text-align: center;\n  }\n  .mb-examples__label {\n    display: block;\n    font-size: 11px;\n    letter-spacing: 4px;\n    text-transform: uppercase;\n    color: #C9A84C;\n    margin-bottom: 14px;\n    font-weight: 700;\n  }\n  .mb-examples__label::before,\n  .mb-examples__label::after {\n    content: '\u2014';\n    margin: 0 10px;\n    opacity: 0.5;\n  }\n  .mb-examples__headline {\n    font-size: clamp(30px, 3.5vw, 46px) !important;\n    font-weight: 700 !important;\n    color: #ffffff !important;\n    margin: 0 auto !important;\n    max-width: 700px;\n    padding-bottom: 64px;\n    line-height: 1.2;\n  }\n\n  \/* Carousel *\/\n  .mb-carousel {\n    position: relative;\n    max-width: 450px;\n    margin: 0 auto;\n  }\n  .mb-carousel__track-wrapper {\n    border-radius: 8px;\n    overflow: hidden;\n    border: 1px solid rgba(201, 168, 76, 0.2);\n    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);\n  }\n  .mb-carousel__track {\n    display: flex;\n    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n  .mb-carousel__slide {\n    min-width: 100%;\n  }\n  .mb-carousel__img {\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  \/* Buttons *\/\n  .mb-carousel__btn {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    background: rgba(10, 10, 18, 0.75);\n    border: 1px solid rgba(201, 168, 76, 0.3);\n    color: #C9A84C;\n    width: 44px;\n    height: 44px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: background 0.2s, border-color 0.2s;\n    z-index: 10;\n    margin-top: -20px; \/* offset dots height *\/\n  }\n  .mb-carousel__btn:hover {\n    background: rgba(201, 168, 76, 0.15);\n    border-color: rgba(201, 168, 76, 0.7);\n  }\n  .mb-carousel__btn--prev { left: -22px; }\n  .mb-carousel__btn--next { right: -22px; }\n\n  \/* Dots *\/\n  .mb-carousel__dots {\n    display: flex;\n    justify-content: center;\n    gap: 8px;\n    margin-top: 24px;\n  }\n  .mb-carousel__dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background: rgba(255, 255, 255, 0.2);\n    border: none;\n    cursor: pointer;\n    padding: 0;\n    transition: background 0.2s, transform 0.2s;\n  }\n  .mb-carousel__dot--active {\n    background: #C9A84C;\n    transform: scale(1.3);\n  }\n\n  @media (max-width: 768px) {\n    .mb-carousel__btn--prev { left: 8px; }\n    .mb-carousel__btn--next { right: 8px; }\n  }\n<\/style>\n\n<script>\n(function() {\n  var track = document.querySelector('.mb-carousel__track');\n  var dots = document.querySelectorAll('.mb-carousel__dot');\n  var btnPrev = document.querySelector('.mb-carousel__btn--prev');\n  var btnNext = document.querySelector('.mb-carousel__btn--next');\n  var total = dots.length;\n  var current = 0;\n  var autoplayInterval;\n\n  function goTo(index) {\n    current = (index + total) % total;\n    track.style.transform = 'translateX(-' + (current * 100) + '%)';\n    dots.forEach(function(d, i) {\n      d.classList.toggle('mb-carousel__dot--active', i === current);\n    });\n  }\n\n  function startAutoplay() {\n    autoplayInterval = setInterval(function() { goTo(current + 1); }, 2000);\n  }\n\n  function resetAutoplay() {\n    clearInterval(autoplayInterval);\n    startAutoplay();\n  }\n\n  btnPrev.addEventListener('click', function() { goTo(current - 1); resetAutoplay(); });\n  btnNext.addEventListener('click', function() { goTo(current + 1); resetAutoplay(); });\n  dots.forEach(function(dot, i) {\n    dot.addEventListener('click', function() { goTo(i); resetAutoplay(); });\n  });\n\n  startAutoplay();\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2fdb938 e-con-full e-flex jltma-glass-effect-no e-con e-parent\" data-id=\"2fdb938\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b969b69 jltma-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"b969b69\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ================================================\n   SEKCJA: KONTAKT (FINALNE POPRAWKI) | Do wklejenia w Elementor\n   ================================================ -->\n\n<section class=\"mb-contact\" id=\"kontakt\">\n  \n  <div class=\"mb-contact__header-wrapper\">\n    <h2 class=\"mb-section-headline\">Kontakt<\/h2>\n  <\/div>\n\n  <div class=\"mb-contact__inner\">\n    \n    <!-- LEWA KOLUMNA: Tre\u015b\u0107 i Dane (Wy\u015brodkowane w pionie do formularza) -->\n    <div class=\"mb-contact__info\">\n      <p class=\"mb-contact__text\">\n        Masz pytania dotycz\u0105ce nowej strony? Napisz bezpo\u015brednio lub skorzystaj z formularza.\n      <\/p>\n      \n      <div class=\"mb-contact__direct-item\">\n        <span class=\"mb-contact__direct-label\">Napisz do mnie:<\/span>\n        <a href=\"mailto:kontakt@marcinbilecki.pl\" class=\"mb-contact__link\">kontakt@marcinbilecki.pl<\/a>\n      <\/div>\n\n      <div class=\"mb-contact__direct-item\">\n        <span class=\"mb-contact__direct-label\">Zadzwo\u0144 bezpo\u015brednio:<\/span>\n        <a href=\"tel:885383535\" class=\"mb-contact__link\">885 383 535<\/a>\n      <\/div>\n      \n      <p class=\"mb-contact__note\">Odpisuj\u0119 zazwyczaj w ci\u0105gu 24 godzin.<\/p>\n    <\/div>\n\n    <!-- PRAWA KOLUMNA: Formularz -->\n    <div class=\"mb-contact__form-wrapper\">\n      <form class=\"mb-contact__form\" onsubmit=\"event.preventDefault();\">\n        \n        <div class=\"mb-form-group\">\n          <label for=\"name\">Imi\u0119 lub nazwa firmy<\/label>\n          <input type=\"text\" id=\"name\" required>\n          <div class=\"mb-form-line\"><\/div>\n        <\/div>\n\n        <div class=\"mb-form-group\">\n          <label for=\"email\">Adres e-mail<\/label>\n          <input type=\"email\" id=\"email\" required>\n          <div class=\"mb-form-line\"><\/div>\n        <\/div>\n\n        <div class=\"mb-form-group\">\n          <label for=\"message\">Tre\u015b\u0107 wiadomo\u015bci<\/label>\n          <textarea id=\"message\" rows=\"4\" required><\/textarea>\n          <div class=\"mb-form-line\"><\/div>\n        <\/div>\n\n        <div class=\"mb-contact__submit-container\">\n          <button type=\"submit\" class=\"mb-contact__submit\">Napisz do mnie \u2726<\/button>\n        <\/div>\n      <\/form>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n  .mb-contact {\n    background: #f4f4f6;\n    padding: 100px 24px 150px 24px; \/* Dodane 50px do dolnego paddingu (razem 150px) *\/\n    font-family: 'Georgia', serif;\n    overflow: hidden;\n  }\n\n  .mb-contact__header-wrapper {\n    max-width: 1320px;\n    margin: 0 auto 60px auto;\n    text-align: center;\n  }\n\n  .mb-section-headline {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 20px;\n    font-size: 34px;\n    font-weight: 700;\n    color: #C9A84C;\n    margin: 0;\n  }\n\n  .mb-section-headline::before,\n  .mb-section-headline::after {\n    content: '';\n    width: 32px;\n    height: 1px;\n    background: #C9A84C;\n  }\n\n  .mb-contact__inner {\n    max-width: 1320px;\n    margin: 0 auto;\n    display: flex;\n    gap: 80px;\n    align-items: center; \/* Zmieniono z flex-start na center \u2014 lewa kolumna jest teraz na \u015brodku formularza *\/\n  }\n\n  .mb-contact__info {\n    flex: 0 0 40%;\n    max-width: 40%;\n  }\n\n  .mb-contact__form-wrapper {\n    flex: 0 0 60%;\n    max-width: 60%;\n    background: rgba(10, 10, 18, 0.02);\n    padding: 40px;\n    border-radius: 8px;\n    border: 1px solid rgba(201, 168, 76, 0.15);\n  }\n\n  .mb-contact__text {\n    font-size: 17px;\n    line-height: 1.6;\n    color: rgba(10, 10, 12, 0.75);\n    margin: 0 0 40px 0;\n  }\n\n  .mb-contact__direct-item {\n    margin-bottom: 24px;\n  }\n\n  .mb-contact__direct-label {\n    display: block;\n    font-size: 13px;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    color: rgba(10, 10, 12, 0.5);\n    margin-bottom: 6px;\n  }\n\n  .mb-contact__link {\n    font-size: 22px;\n    color: #0a0a12;\n    text-decoration: none;\n    font-weight: 700;\n    transition: color 0.2s;\n    display: inline-block;\n  }\n\n  .mb-contact__link:hover {\n    color: #C9A84C;\n  }\n\n  .mb-contact__note {\n    font-size: 13px;\n    font-style: italic;\n    color: rgba(10, 10, 12, 0.4);\n    margin-top: 40px;\n  }\n\n  .mb-contact__form {\n    display: flex;\n    flex-direction: column;\n    gap: 36px;\n  }\n\n  .mb-form-group {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    position: relative;\n    width: 100%;\n  }\n\n  \/* Usuni\u0119to p\u0142ywaj\u0105ce animacje etykiet \u2014 teraz s\u0105 proste, stabilne i czytelne *\/\n  .mb-form-group label {\n    color: rgba(10, 10, 12, 0.65);\n    font-size: 15px;\n    font-weight: 700;\n    pointer-events: none;\n  }\n\n  .mb-form-group input,\n  .mb-form-group textarea {\n    width: 100%;\n    padding: 8px 0;\n    background: transparent;\n    border: none;\n    outline: none;\n    color: #0a0a12;\n    font-family: 'Georgia', serif;\n    font-size: 16px;\n    box-sizing: border-box;\n  }\n\n  .mb-form-group textarea {\n    resize: none;\n  }\n\n  .mb-form-line {\n    width: 100%;\n    height: 1px;\n    background: rgba(10, 10, 12, 0.15);\n    transition: background 0.3s;\n    margin-top: -4px;\n  }\n\n  \/* Klasyczna, prosta zmiana koloru linii na z\u0142ot\u0105 przy klikni\u0119ciu \u2014 bez skakania tekstu *\/\n  .mb-form-group input:focus ~ .mb-form-line,\n  .mb-form-group textarea:focus ~ .mb-form-line {\n    background: #C9A84C;\n  }\n\n  .mb-contact__submit-container {\n    display: flex;\n    justify-content: flex-start;\n    margin-top: 10px;\n  }\n\n  .mb-contact__submit {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 11px 28px;\n    background: #C9A84C !important;\n    color: #0a0a12 !important;\n    font-family: 'Georgia', serif;\n    font-size: 14px;\n    font-weight: 700;\n    letter-spacing: 0.5px;\n    text-decoration: none;\n    border: none !important;\n    border-radius: 50px !important;\n    cursor: pointer;\n    transition: background 0.2s, transform 0.15s, color 0.2s;\n    flex-shrink: 0;\n    width: auto;\n  }\n\n  .mb-contact__submit:hover {\n    background: #e0bc5a !important;\n    color: #0a0a12 !important;\n    transform: translateY(-1px);\n  }\n\n  @media (max-width: 900px) {\n    .mb-contact__inner {\n      flex-direction: column;\n      gap: 50px;\n      align-items: flex-start;\n    }\n    .mb-contact__info, \n    .mb-contact__form-wrapper {\n      flex: 0 0 100%;\n      max-width: 100%;\n    }\n    .mb-contact__form-wrapper {\n      padding: 30px 20px;\n    }\n    .mb-contact__submit-container {\n      justify-content: center;\n    }\n  }\n<\/style>\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>NOWOCZESNE STRONY WWW &#8230;kt\u00f3re buduj\u0105 zaufanie, zanim klient zadzwoni. Tworz\u0119 strony internetowe dla bran\u017c, w kt\u00f3rych zaufanie klienta decyduje o [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/marcinbilecki.pl\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marcinbilecki.pl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/marcinbilecki.pl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/marcinbilecki.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marcinbilecki.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":143,"href":"https:\/\/marcinbilecki.pl\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":234,"href":"https:\/\/marcinbilecki.pl\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/234"}],"wp:attachment":[{"href":"https:\/\/marcinbilecki.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}