/* zboostowani: strona główna (makieta „Strona główna, komputer”). Ładowana tylko na stronie głównej. */

@keyframes zb-unoszenie { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.zb-gradient-tekst {
	background: var(--zb-gradient);
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
}
.zb-szary { color: var(--zb-szary-jasny); }

/* 2F Pierwszy ekran: tekst po lewej, telefon z kartą usługi po prawej (runda 2, układ jak Stan) */
.zb-hero {
	position: relative;
	min-height: 760px;
	padding: 48px 40px 48px var(--zb-margines-sekcji);
	overflow: hidden;
	display: grid; grid-template-columns: minmax(0, 700px) 560px; justify-content: center; align-items: center; gap: 20px;
	/* Górna warstwa wygasza róż do bieli na dole, żeby pierwszy ekran łagodnie przechodził w nagłówek pasów platform. */
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0) 70%, #ffffff 100%),
		radial-gradient(45% 60% at 12% 75%, #fde7f3 0%, rgba(253, 231, 243, 0) 100%),
		radial-gradient(45% 60% at 82% 45%, #ede9fe 0%, rgba(237, 233, 254, 0) 100%),
		#ffffff;
}
.zb-hero__tekst { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
.zb-hero__tytul {
	margin: 0;
	font-size: 58px; line-height: 1.04; font-weight: 800; letter-spacing: -0.035em;
}
.zb-hero__opis {
	margin: 20px 0 0; max-width: 690px;
	font-size: 19px; line-height: 1.55; color: var(--zb-tekst);
}
.zb-hero__kategorie { margin-top: 30px; width: 640px; max-width: 100%; }
.zb-hero__duze { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.zb-hero__male { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.zb-hero__ikona {
	flex-shrink: 0; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 14px rgba(23, 19, 43, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.zb-hero__karta {
	display: flex; align-items: center; gap: 12px; padding: 14px;
	border-radius: 18px; background: #ffffff; border: 1px solid #ebe7f5;
	box-shadow: 0 8px 20px rgba(76, 29, 149, 0.07); color: var(--zb-tusz);
	transition: border-color .15s, box-shadow .15s;
}
.zb-hero__karta .zb-hero__ikona { width: 44px; height: 44px; border-radius: 12px; }
.zb-hero__karta-tekst { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.zb-hero__karta-tekst b { font-size: 16px; font-weight: 700; }
.zb-hero__karta-tekst span { font-size: 12.5px; color: #8a85a0; }
.zb-hero__pigulka {
	display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px 0 5px;
	border-radius: 999px; background: rgba(255, 255, 255, 0.7); border: 1px solid #ebe7f5;
	font-size: 13.5px; font-weight: 600; color: #3f3a57;
	transition: border-color .15s, color .15s;
}
.zb-hero__pigulka .zb-hero__ikona { width: 26px; height: 26px; border-radius: 50%; box-shadow: none; }
.zb-hero__karta:hover, .zb-hero__pigulka:hover { border-color: #c4b5fd; color: var(--zb-tusz); }
.zb-hero__karta:hover { box-shadow: 0 12px 28px rgba(124, 58, 237, 0.14); }
.zb-ptaszki {
	margin: 22px 0 0; padding: 0; list-style: none;
	display: flex; flex-wrap: wrap; gap: 10px 24px;
	font-size: 14px; font-weight: 600; color: var(--zb-tekst);
}
.zb-ptaszki li { display: flex; align-items: center; gap: 7px; }

/* Grafika po prawej: makieta 2N (parts/scena-hero.php, plik generowany z narzedzia/makiety).
   Układ elementów jest w samym pliku; tu tylko pudełko sceny i ruch. */
.zb-scena { position: relative; width: 560px; height: 640px; justify-self: start; }
/* Reakcje unoszą się za kartami */
@keyframes zb-wznoszenie {
	0% { opacity: 0; transform: translate(0, 0) scale(0.7); }
	12% { opacity: 0.95; }
	80% { opacity: 0.85; }
	100% { opacity: 0; transform: translate(var(--dx), -640px) scale(1.05); }
}
/* Powiadomienia jak w iPhonie: cztery po kolei, co 2 s, cykl 8 s */
@keyframes zb-wjazd8 {
	0%, 5% { opacity: 0; transform: translateY(10px) scale(0.96); }
	10%, 72% { opacity: 1; transform: none; }
	80%, 100% { opacity: 0; transform: translateY(-6px); }
}

/* 3C Platformy */

/* Najpopularniejsze platformy: makieta 8 (parts/platformy-pasy.php, plik generowany z narzedzia/makiety) */
/* Polubienie posta jak w aplikacji (cykl 5 s): krąg stuknięcia, serce na zdjęciu, czerwone serduszko i licznik 1 249 -> 1 250 */
@keyframes zb-stukniecie { 0%, 29% { opacity: 0; transform: scale(0.3); } 31% { opacity: 1; transform: scale(0.6); } 38% { opacity: 0; transform: scale(1.6); } 100% { opacity: 0; } }
@keyframes zb-serce-duze { 0%, 30% { opacity: 0; transform: scale(0); } 34% { opacity: 1; transform: scale(1.25); } 37% { transform: scale(0.92); } 40% { transform: scale(1.04); } 43%, 56% { opacity: 1; transform: scale(1); } 62% { opacity: 0; transform: scale(0.7) translateY(-14px); } 100% { opacity: 0; } }
@keyframes zb-polub { 0%, 31% { opacity: 0; transform: scale(0.4); } 35% { opacity: 1; transform: scale(1.35); } 39% { transform: scale(0.9); } 42%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }
@keyframes zb-polub-kontur { 0%, 31% { opacity: 1; } 33%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes zb-licznik-stary { 0%, 33% { opacity: 1; } 34%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes zb-licznik-nowy { 0%, 33% { opacity: 0; } 34%, 96% { opacity: 1; } 100% { opacity: 0; } }
/* Instagram: statystyki konta, licznik i słupki (makieta 9C) */
@keyframes zb-l1{0%,22%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes zb-l2{0%,22%{opacity:0;transform:translateY(10px)}25%,47%{opacity:1;transform:none}50%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes zb-l3{0%,47%{opacity:0;transform:translateY(10px)}50%,72%{opacity:1;transform:none}75%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes zb-l4{0%,72%{opacity:0;transform:translateY(10px)}75%,97%{opacity:1;transform:none}100%{opacity:0}}
@keyframes zb-slupek{0%,10%{transform:scaleY(.25)}40%,85%{transform:scaleY(1)}100%{transform:scaleY(.25)}}
/* Facebook: reklama, przybywające reakcje (makieta 10E) */
@keyframes zb-ik2{0%,22%{opacity:0;transform:scale(.3)}27%{opacity:1;transform:scale(1.25)}31%,97%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes zb-ik3{0%,47%{opacity:0;transform:scale(.3)}52%{opacity:1;transform:scale(1.25)}56%,97%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes zb-lot{0%{opacity:0;transform:translate(0,0) scale(.5)}12%{opacity:1;transform:translate(0,-14px) scale(1.1)}100%{opacity:0;transform:translate(var(--dx),-180px) scale(.9)}}
/* Instagram: profil, kliknięcie Obserwuj, dymek powiadomień (makieta 13A) */
@keyframes zb-ig-obs-stary{0%,48%{opacity:1}50%,96%{opacity:0}100%{opacity:1}}
@keyframes zb-ig-obs-nowy{0%,48%{opacity:0;transform:scale(.94)}51%{opacity:1;transform:scale(1.05)}55%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes zb-ig-klik{0%,44%{opacity:0;transform:scale(.3)}47%{opacity:1;transform:scale(.7)}55%,100%{opacity:0;transform:scale(1.6)}}
@keyframes zb-ig-pigulka{0%,58%{opacity:0;transform:translateY(8px) scale(.85)}62%{opacity:1;transform:translateY(0) scale(1.06)}65%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(4px)}}
@keyframes zb-ig-tap{0%,28%{opacity:0;transform:scale(0)}31%{opacity:.95;transform:scale(1.25)}34%{transform:scale(.92)}37%,46%{opacity:.95;transform:scale(1)}54%,100%{opacity:0;transform:scale(.6)}}
@keyframes zb-ig-serce-on{0%,31%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1.3)}39%{transform:scale(.92)}42%,94%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes zb-ig-serce-off{0%,31%{opacity:1}33%,96%{opacity:0}100%{opacity:1}}
@keyframes zb-ig-komentarz{0%,58%{opacity:0;transform:translateY(10px)}64%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes zb-ig-linia{0%,6%{stroke-dashoffset:420}80%,100%{stroke-dashoffset:0}}
@keyframes zb-ig-obszar{0%,30%{opacity:0}80%,100%{opacity:1}}
@keyframes zb-ig-pierscien{0%,6%{stroke-dasharray:0 200}70%,100%{stroke-dasharray:87 200}}
/* TikTok: film „Dla Ciebie”, podwójne stuknięcie (makieta 12D) */
@keyframes zb-tt-tap{0%,28%{opacity:0;transform:rotate(var(--r)) scale(0)}31%{opacity:1;transform:rotate(var(--r)) scale(1.35)}34%{transform:rotate(var(--r)) scale(.92)}37%,48%{opacity:1;transform:rotate(var(--r)) scale(1)}58%,100%{opacity:0;transform:rotate(var(--r)) scale(1.15) translateY(-50px)}}
@keyframes zb-tt-fala{0%,27%{opacity:0;transform:scale(.2)}29%{opacity:.55;transform:scale(.6)}38%,100%{opacity:0;transform:scale(1.8)}}
@keyframes zb-tt-serce-on{0%,31%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1.35)}39%{transform:scale(.9)}42%,94%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes zb-tt-serce-off{0%,31%{opacity:1}33%,96%{opacity:0}100%{opacity:1}}
@keyframes zb-tt-plyta{to{transform:rotate(360deg)}}
@keyframes zb-tt-plus{0%,60%{opacity:1;transform:scale(1)}66%,96%{opacity:0;transform:scale(.4)}100%{opacity:1}}
@keyframes zb-tt-ptaszek{0%,62%{opacity:0;transform:scale(.4)}68%{opacity:1;transform:scale(1.2)}72%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes zb-tt-postep{0%{width:0}100%{width:100%}}
@keyframes zb-tt-nuta{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(-28px,-50px) rotate(-20deg) scale(1)}}
@keyframes zb-tt-kamera{0%{transform:scale(1.04) translate(0,0)}50%{transform:scale(1.1) translate(-6px,-4px)}100%{transform:scale(1.04) translate(0,0)}}
@keyframes zb-tt-swiatlo{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:.8;transform:translateY(-14px)}}
@keyframes zb-tt-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* YouTube: film się uruchamia, kliknięcie Subskrybuj (makieta 11A) */
@keyframes zb-yt-stary{0%,48%{opacity:1}50%,96%{opacity:0}100%{opacity:1}}
@keyframes zb-yt-nowy{0%,48%{opacity:0;transform:scale(.9)}51%{opacity:1;transform:scale(1.08)}55%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes zb-yt-klik{0%,44%{opacity:0;transform:scale(.3)}47%{opacity:1;transform:scale(.7)}55%,100%{opacity:0;transform:scale(1.6)}}
@keyframes zb-yt-pasek{0%,10%{width:0%}100%{width:96%}}
@keyframes zb-yt-kursor{0%,10%{left:0%}100%{left:96%}}
@keyframes zb-yt-start{0%,7%{opacity:1;transform:scale(1)}9%{opacity:1;transform:scale(.88)}14%,100%{opacity:0;transform:scale(1.35)}}
@keyframes zb-yt-zaslona{0%,8%{opacity:1}16%,100%{opacity:0}}
@keyframes zb-yt-klik-play{0%,6%{opacity:0;transform:scale(.3)}8%{opacity:1;transform:scale(.8)}15%,100%{opacity:0;transform:scale(1.7)}}
@keyframes zb-yt-linia{0%,12%{stroke-dashoffset:520}88%,100%{stroke-dashoffset:0}}
@keyframes zb-yt-obszar{0%,12%{opacity:0}88%,100%{opacity:.16}}
@keyframes zb-yt-pop{0%,100%{opacity:0;transform:translateY(8px) scale(.8)}6%{opacity:1;transform:translateY(0) scale(1.06)}10%,34%{opacity:1;transform:none}44%{opacity:0;transform:translateY(-12px)}}
@keyframes zb-yt-ikona-pauza{0%,8%{opacity:0}10%,100%{opacity:1}}
@keyframes zb-yt-ikona-play{0%,8%{opacity:1}10%,100%{opacity:0}}
@keyframes zb-yt-dzwonek{0%,52%{transform:rotate(0)}55%{transform:rotate(-18deg)}58%{transform:rotate(16deg)}61%{transform:rotate(-10deg)}64%,100%{transform:rotate(0)}}
@keyframes zb-serduszka { 0% { opacity: 0; transform: translate(0, 0) scale(0.7); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), -120px) scale(1.1); } }
@keyframes zb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.zb-pasy__naglowek { padding: 40px var(--zb-margines-sekcji) 24px; max-width: 1200px; margin: 0 auto; box-sizing: content-box; }
.zb-pasy__naglowek h2 { margin: 0; font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.zb-pas a:hover { filter: brightness(1.05); }
.zb-pas .zb-pas__drugi:hover { color: var(--zb-fiolet) !important; border-color: #c4b5fd !important; filter: none; }

/* 5A Zaufanie */
.zb-zalety {
	min-height: 92px;
	padding: 16px var(--zb-margines-sekcji);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
	/* Bez własnego tła i linii: pasek stoi na bieli między wygaszonym ostatnim pasem a „Jak to działa”. */
	font-size: 16px; font-weight: 700;
}
.zb-zalety > span { display: flex; align-items: center; gap: 10px; }
.zb-zalety__ikona { width: 36px; height: 36px; border-radius: 10px; background: #f3e8ff; display: flex; align-items: center; justify-content: center; }
.zb-kroki {
	padding: 64px var(--zb-margines-sekcji) 72px;
	display: flex; flex-direction: column; gap: 40px;
	scroll-margin-top: 16px;
}
.zb-kroki h2 { margin: 0; font-size: 44px; font-weight: 800; letter-spacing: -0.03em; text-align: center; }
.zb-kroki ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.zb-kroki li {
	display: flex; flex-direction: column; align-items: center; gap: 16px;
	padding: 32px 28px; border-radius: 24px;
	background: #fdfbff; border: 1px solid var(--zb-linia);
	text-align: center;
}
.zb-kroki h3 { margin: 0; font-size: 22px; font-weight: 800; }
.zb-kroki p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--zb-tekst); }
.zb-kroki__numer {
	width: 76px; height: 76px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: #ffffff; font-size: 30px; font-weight: 800;
}
.zb-kroki__numer--1 { background: radial-gradient(circle at 32% 28%, #ffffff 0%, #c4b5fd 32%, #7c3aed 100%); box-shadow: 0 16px 30px rgba(124, 58, 237, 0.30); }
.zb-kroki__numer--2 { background: radial-gradient(circle at 32% 28%, #ffffff 0%, #fbcfe8 32%, #db2777 100%); box-shadow: 0 16px 30px rgba(219, 39, 119, 0.28); }
.zb-kroki__numer--3 { background: radial-gradient(circle at 32% 28%, #ffffff 0%, #f5d0fe 32%, #c026d3 100%); box-shadow: 0 16px 30px rgba(192, 38, 211, 0.26); }

@media (prefers-reduced-motion: reduce) {
	/* Bez ruchu: powiadomienia stoją widoczne, reakcje znikają */
	.zb-scena [style*="zb-wjazd8"] { animation: none !important; opacity: 1 !important; }
	.zb-scena img[style*="zb-wznoszenie"] { display: none; }
	.zb-pas img[style*="zb-serduszka"] { display: none; }
	.zb-pas [style*="zb-float"], .zb-pas [style*="zb-stukniecie"], .zb-pas [style*="zb-serce-duze"], .zb-pas [style*="zb-polub"], .zb-pas [style*="zb-licznik"], .zb-pas [style*="zb-slupek"] { animation: none !important; }
	.zb-pas [style*="zb-ik2"], .zb-pas [style*="zb-ik3"] { animation: none !important; opacity: 1 !important; }
	.zb-pas img[style*="zb-lot"] { display: none; }
	.zb-pas [style*="zb-yt-"] { animation: none !important; }
	.zb-pas [style*="zb-yt-start"], .zb-pas [style*="zb-yt-zaslona"], .zb-pas [style*="zb-yt-klik"], .zb-pas [style*="zb-yt-pop"], .zb-pas [style*="zb-yt-nowy"], .zb-pas [style*="zb-yt-ikona-play"] { opacity: 0 !important; }
	.zb-pas [style*="zb-yt-linia"] { stroke-dashoffset: 0 !important; }
	.zb-pas [style*="zb-tt-"] { animation: none !important; }
	.zb-pas [style*="zb-ig-"] { animation: none !important; }
	.zb-pas [style*="zb-ig-obs-nowy"], .zb-pas [style*="zb-ig-klik"], .zb-pas [style*="zb-ig-pigulka"] { opacity: 0 !important; }
	.zb-pas [style*="zb-tt-tap"], .zb-pas [style*="zb-tt-fala"], .zb-pas [style*="zb-tt-serce-on"], .zb-pas [style*="zb-tt-ptaszek"], .zb-pas [style*="zb-tt-nuta"] { opacity: 0 !important; }
	.zb-pas [style*="zb-l1 "] { opacity: 0 !important; }
	.zb-pas [style*="zb-l4 "] { animation: none !important; opacity: 1 !important; }
	html { scroll-behavior: auto; }
}

/* Węższe ekrany: wersja tymczasowa do czasu makiety telefonu */
/* Szerokie ekrany: równe marginesy, żeby tekst i telefon stały na środku */
@media (min-width: 1441px) {
	.zb-hero { padding-left: 40px; }
}
/* Laptopy: scena mniejsza, żeby zmieściła się obok tekstu */
@media (max-width: 1380px) and (min-width: 1101px) {
	.zb-hero { min-height: 640px; padding-left: 64px; grid-template-columns: minmax(0, 700px) 448px; }
	.zb-scena { zoom: 0.8; }
}
@media (max-width: 1100px) {
	.zb-pas__srodek { flex-direction: column; align-items: stretch !important; gap: 32px !important; }
	.zb-pas__grafika { order: 2; align-self: center; }
	.zb-hero { min-height: 0; grid-template-columns: minmax(0, 1fr); padding-top: 56px; padding-bottom: 56px; }
	.zb-scena { display: none; }
	.zb-hero__tytul { font-size: 52px; }
}
@media (max-width: 760px) {
	.zb-pasy__naglowek h2 { font-size: 30px; }
	.zb-pas { min-height: 0 !important; padding-top: 36px !important; padding-bottom: 36px !important; }
	.zb-pas h2 { font-size: 28px !important; }
	.zb-pas__linki { flex-wrap: wrap; gap: 10px !important; }
	.zb-pas__grafika { zoom: 0.7; }
	.zb-hero { padding-top: 40px; padding-bottom: 48px; }
	.zb-hero__tytul { font-size: 36px; }
	.zb-hero__opis { font-size: 17px; }
	.zb-hero__kategorie { margin-top: 26px; }
	.zb-hero__karta { padding: 10px; gap: 9px; border-radius: 14px; }
	.zb-hero__karta .zb-hero__ikona { width: 36px; height: 36px; border-radius: 10px; }
	.zb-hero__karta-tekst b { font-size: 14.5px; }
	.zb-hero__karta-tekst span { font-size: 11.5px; }
	.zb-kroki h2 { font-size: 30px; }
	.zb-zalety { justify-content: flex-start; }
	.zb-kroki ol { grid-template-columns: 1fr; gap: 16px; }
}