/* TECH-2448 - test A/B T10, strona główna: warianty B i C pierwszego ekranu. 1:1 z T10-B-final-v2.html (<style data-z="t10-warianty">,
   część po wspólnej karcie). Ładowane tylko na stronie głównej PL. Karta: css/ab-tests/form-card.css. */
/* ==========================================================================
   T10 · pierwszy ekran strony głównej (wspólne dla B i C). Runda 4: style dotyczą TYLKO nowych sekcji
   (.t10-hero wewnątrz div.ab-t10-b / div.ab-t10-c); obecny hero (ab-t10-a) zostaje 1:1 jak dziś.
   ========================================================================== */
/* --- przełączanie wariantów: CSS STRONY (webdev). Nowe sekcje domyślnie ukryte; pokazuje je Omniconvert (README). --- */
.ab-t10-b, .ab-t10-c { display: none; }
/* hero: wysokość = treść (dziś 100% ekranu); zdjęcie zespołu jako tło, bez rozmycia */
.t10-hero.hero--static--homepage { height: auto !important; min-height: 0 !important; }
.t10-hero.hero--static--homepage picture { position: absolute; inset: 0; z-index: 0; max-height: none; min-height: 0; }
.t10-hero.hero--static--homepage picture img { height: 100%; min-height: 0 !important; max-height: none !important; object-position: 50% 62%; }
/* przyciemnienie: najciemniej pod tekstem (lewa strona), jaśniej pod kartą */
.t10-hero.hero--static--homepage picture::before { height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .74) 45%, rgba(0, 0, 0, .58) 100%); }
.pv-hero { position: relative; z-index: 6; width: 100%; font-family: "Raleway", sans-serif; }

/* układ: lewa kolumna (tytuł, lead, dół) + karta ~450 px po prawej */
/* runda 5: lewa kolumna (tytuł + lead + dowody) wyśrodkowana w pionie względem karty, jak w T02 (puste wiersze 1fr nad i pod).
   Gdy lewa kolumna jest wyższa od karty, wiersze 1fr znikają, a karta centruje się sama (align-self). */
.pv-g { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 450px; grid-template-areas: ". karta" "tekst karta" "dol karta" ". karta";
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: 64px; align-items: start; max-width: 1440px; margin: 0 auto;
  padding: 193px 102px 106px 64px; } /* runda 3 (uwaga #11): +60 px na górze i na dole (było 133 / 46), sekcja była ściśnięta */
.pv-tekst { grid-area: tekst; color: #fff; }
.pv-karta { grid-area: karta; align-self: center; }
.pv-dol { grid-area: dol; margin-top: 28px; color: #fff; }

.pv-tytul { margin: 0; padding: 0; color: #fff; font: 700 60px/1.12 "Raleway", sans-serif; letter-spacing: -1.8px; }
.pv-tytul em { font-style: normal; color: var(--primary-color, #41c207); }
.pv-lead { max-width: 640px; margin: 18px 0 0; padding: 0; color: #fff; font: 500 19px/1.55 "Raleway", sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }

/* dowody: pigułki ocen + banery partnerów (banery bez tła, jak na grafikach) */
.dowody { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.dowody__ocena { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .28); color: #fff; font: 500 14px/1.2 "Raleway", sans-serif; white-space: nowrap; }
.dowody__ocena b { font-size: 17px; font-weight: 700; }
.dowody__ocena svg { width: 17px; height: 17px; }
.dowody__ocena small { font-size: 13px; opacity: .85; }
.dowody__odznaki { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.dowody__odznaki li { display: flex; align-items: center; margin: 0; padding: 0; border: 0; background: none; }
.dowody__odznaki li::before { content: none; }
.dowody__odznaki img { display: block; width: auto; height: 40px; border-radius: 4px; }

/* węższe komputery */
@media (min-width: 992px) and (max-width: 1300px) {
  .pv-g { column-gap: 40px; padding-left: 40px; padding-right: 40px; }
  .pv-tytul { font-size: 52px; }
}
@media (min-width: 992px) and (max-width: 1140px) {
  .pv-g { grid-template-columns: minmax(0, 1fr) 410px; column-gap: 28px; padding-left: 28px; padding-right: 28px; }
  .pv-tytul { font-size: 44px; }
  .pv-lead { font-size: 17px; }
}

/* telefon i tablet: tytuł wyśrodkowany, z większym oddechem nad i pod nim */
@media (max-width: 991px) {
  /* runda 3 (uwaga #10): mocniejsze przyciemnienie, najciemniej pod tytułem i leadem. Uwaga: wcześniejsze „równe .7” w ogóle
     nie działało, bo CSS strony (.hero.hero--subpage.hero--static--homepage picture::before, mocniejszy selektor) nakładał swój
     gradient .62 → .34 (22%, czyli pod tytułem) → .52 → .60 → .82. Stąd selektor z pełnym zestawem klas strony. */
  .t10-hero.hero.hero--subpage.hero--static--homepage picture::before { background: linear-gradient(180deg, rgba(0, 0, 0, .84) 0%, rgba(0, 0, 0, .8) 45%, rgba(0, 0, 0, .76) 100%); }
  .pv-g { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tekst" "karta" "dol"; grid-template-rows: none; column-gap: 0; padding: 104px 10px 0; }
  .pv-tekst { padding: 0 6px; text-align: center; }
  .pv-tytul { font-size: 30px; line-height: 1.16; letter-spacing: -.6px; }
  .pv-lead { margin: 14px auto 0; font-size: 14.5px; line-height: 1.5; }
  .pv-karta { margin-top: 26px; }
  .dowody__ocena { gap: 4px; height: 30px; padding: 0 9px; font-size: 12px; }
  .dowody__ocena b { font-size: 14px; }
  .dowody__ocena small { font-size: 10.5px; }
  .dowody__ocena svg { width: 14px; height: 14px; }
  .dowody__odznaki { gap: 8px; }
  .dowody__odznaki img { height: 30px; }
}
@media (max-width: 991px) and (max-height: 780px) {
  .pv-g { padding-top: 96px; }
  .pv-tytul { font-size: 27px; }
  .pv-karta { margin-top: 22px; }
}

/* ==========================================================================
   T10 · WARIANT B (sekcja div.ab-t10-b)
   ========================================================================== */
.pv-mini { display: block; margin: 0 0 10px; font: 600 12px/1.2 "Raleway", sans-serif; letter-spacing: .6px; text-transform: uppercase; opacity: .85; }
.pv-kafelki { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; max-width: 760px; }
.pv-kafelek { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 44px 14px 16px; border-radius: 10px; background: rgba(0, 0, 0, .42);
  border: 1px solid rgba(255, 255, 255, .22); color: #fff; text-align: left; text-decoration: none; cursor: pointer;
  animation: pv-wjazd .5s ease-out backwards;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1.3), box-shadow .28s, background .2s, border-color .2s; }
.pv-kafelek:nth-child(2) { animation-delay: .12s; }
.pv-kafelek:nth-child(3) { animation-delay: .24s; }
.pv-kafelek:nth-child(4) { animation-delay: .36s; }
.pv-kafelek > div { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.pv-kafelek > svg { flex: 0 0 34px; width: 34px; height: 34px; }
.pv-kafelek > svg * { stroke-dasharray: 160; stroke-dashoffset: 160; animation: pv-rysuj 1.4s ease-out forwards; }
.pv-kafelek:nth-child(1) > svg * { animation-delay: .45s; }
.pv-kafelek:nth-child(2) > svg * { animation-delay: .65s; }
.pv-kafelek:nth-child(3) > svg * { animation-delay: .85s; }
.pv-kafelek:nth-child(4) > svg * { animation-delay: 1.05s; }
.pv-kafelek b { display: block; font: 700 17px/1.2 "Raleway", sans-serif; }
.pv-kafelek span { display: block; margin-top: 2px; font: 500 13.5px/1.3 "Raleway", sans-serif; opacity: .88; }
.pv-kafelek__strz { position: absolute; right: 12px; top: 50%; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 50%; background: rgba(65, 194, 7, .16); color: var(--primary-color, #41c207); transform: translateY(-50%);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1.3), background .2s, color .2s; }
.pv-kafelek__strz svg { width: 14px; height: 14px; }
.pv-kafelek:hover, .pv-kafelek:focus-visible { background: rgba(65, 194, 7, .22); border-color: var(--primary-color, #41c207); color: #fff;
  transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .35); outline: none; }
.pv-kafelek:hover .pv-kafelek__strz, .pv-kafelek:focus-visible .pv-kafelek__strz { background: var(--primary-color, #41c207); color: #fff; transform: translate(4px, -50%); }
.pv-kafelek:hover > svg { animation: pv-ikona .6s ease-in-out; }
.ab-t10-b .pv-dol .dowody { margin-top: 18px; }

@keyframes pv-wjazd { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes pv-rysuj { to { stroke-dashoffset: 0; } }
@keyframes pv-ikona { 0% { transform: none; } 30% { transform: scale(1.18) rotate(-8deg); } 60% { transform: scale(.96) rotate(4deg); } 100% { transform: none; } }

/* telefon i tablet: pod kartą, na białym tle, kafelki i dowody */
@media (max-width: 991px) {
  .ab-t10-b .pv-dol { margin: 28px -10px 0; padding: 20px 15px 28px; background: #fff; color: #000; }
  .pv-mini { text-align: center; opacity: 1; color: #000; }
  .pv-kafelki { gap: 10px; max-width: none; }
  /* wąsko: ikona nad tekstem, strzałka w prawym górnym rogu; nazwy usług bez dzielenia wyrazów */
  .pv-kafelek { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; background: #f0f0f0; border-color: #e3e3e3; color: #000; }
  .pv-kafelek > div { overflow-wrap: normal; hyphens: manual; }
  .pv-kafelek > svg { flex-basis: auto; width: 28px; height: 28px; }
  .pv-kafelek b { font-size: 15px; }
  .pv-kafelek span { font-size: 12.5px; }
  .pv-kafelek__strz { top: 14px; right: 10px; width: 24px; height: 24px; transform: none; }
  .pv-kafelek:hover .pv-kafelek__strz, .pv-kafelek:focus-visible .pv-kafelek__strz { transform: translateX(3px); }
  .pv-kafelek:hover, .pv-kafelek:focus-visible { background: #eaf7e3; color: #000; box-shadow: 0 10px 22px rgba(0, 0, 0, .12); }
  .ab-t10-b .pv-dol .dowody { justify-content: center; }
  .ab-t10-b .dowody__ocena { background: #f2f2f2; border-color: #e3e3e3; color: #000; }
}
/* niskie telefony (np. 360 x 740): bez leadu, żeby przycisk wysyłki był jak najwyżej */
@media (max-width: 991px) and (max-height: 780px) {
  .ab-t10-b .pv-lead { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pv-hero *, .pv-hero *::before, .pv-hero *::after { animation: none !important; transition: none !important; }
  .pv-kafelek > svg * { stroke-dashoffset: 0; }
}

/* ==========================================================================
   T10 · WARIANT C (sekcja div.ab-t10-c). Prawa karta w stylu wspólnej karty formularza (klasy kf-* z karta.css):
   belka, treść, „Bez zobowiązań.” + termin, pasek dyżuru. Zamiast pól: 3 kroki + pomarańczowy przycisk.
   Selektory .kf.kf.t10c-karta …: karta.css zaczyna reguły od .kf.kf (odporność na style strony), więc C musi być mocniejsze.
   ========================================================================== */
/* runda 3 (uwaga #12): belka „Umów rozmowę z ekspertem” bez dodatkowej zieleni, w kolorach paska dyżuru (jasnoszare tło, czarny tekst) */
.kf.kf.t10c-karta .kf-belka { background: #f4f4f4; color: #000; border-bottom: 1px solid #e4e4e4; }
.kf.kf.t10c-karta .kf-belka__tytul { color: #000; }
.ab-t10-c .pv-dol { margin-top: 36px; }
.kf.kf.t10c-karta .kf-tresc { padding-top: 20px; }
.kf.kf.t10c-karta .t10c-etykieta { color: #2f8f05; font: 700 13px/1.2 "Raleway", sans-serif; letter-spacing: .6px; text-transform: uppercase; }
.kf.kf.t10c-karta .t10c-kroki { display: grid; gap: 14px; margin: 14px 0 0; padding: 0; list-style: none; }
.kf.kf.t10c-karta .t10c-kroki li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: center; margin: 0; padding: 0; }
.kf.kf.t10c-karta .t10c-kroki li::before { content: none; }
.kf.kf.t10c-karta .t10c-kroki span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(65, 194, 7, .12);
  color: #2f8f05; font: 700 15px/1 "Raleway", sans-serif; }
.kf.kf.t10c-karta .t10c-kroki p { color: #1d1d1d; font: 500 16.5px/1.4 "Raleway", sans-serif; }
/* przycisk jak w prototypie Mateusza: pomarańcz #F97316, hover #EA580C; geometria jak przycisk wspólnej karty */
.kf.kf.t10c-karta .t10c-cta { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 52px;
  margin: 22px 0 0; padding: 0 18px; border-radius: 4px; background: #f97316; color: #fff; cursor: pointer;
  font: 700 14px/1.15 "Raleway", sans-serif; letter-spacing: .6px; text-transform: uppercase; text-align: center; transition: background-color .3s; }
.kf.kf.t10c-karta .t10c-cta:hover { background: #ea580c; }
.kf.kf.t10c-karta .t10c-cta:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
.kf.kf.t10c-karta .t10c-cta svg { flex: 0 0 16px; width: 16px; height: 16px; animation: kf-strzalka 1.5s ease-in-out 1s infinite; }
@container kf (max-width: 420px) {
  .kf.kf.t10c-karta .t10c-etykieta { font-size: 12px; text-align: center; }
  .kf.kf.t10c-karta .t10c-kroki { gap: 12px; margin-top: 12px; }
  .kf.kf.t10c-karta .t10c-kroki li { grid-template-columns: 28px 1fr; gap: 12px; }
  .kf.kf.t10c-karta .t10c-kroki span { width: 28px; height: 28px; font-size: 13px; }
  .kf.kf.t10c-karta .t10c-kroki p { font-size: 15px; }
  .kf.kf.t10c-karta .t10c-cta { margin-top: 18px; }
}
/* telefon: dowody pod kartą, na zdjęciu; banery partnerów w osobnym wierszu, z odstępem od pigułek ocen */
@media (max-width: 991px) {
  .ab-t10-c .pv-dol { margin-top: 22px; padding-bottom: 32px; }
  .ab-t10-c .pv-dol .dowody { justify-content: center; gap: 6px; }
  .ab-t10-c .dowody__odznaki { flex: 1 0 100%; justify-content: center; margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) { .kf.kf.t10c-karta .t10c-cta svg { animation: none; } }

/* hero wariantów B i C na pełną szerokość okna: wrapper jest elementem flex w .row i bez tego bierze szerokość treści (maks. 1440 px) */
.ab-t10-b, .ab-t10-c { width: 100%; }

/* karta 40 px pod menu (było 193 px od góry strony = 76 px pod menu) */
@media (min-width: 992px) {
  .ab-t10-b .pv-g, .ab-t10-c .pv-g { padding-top: 157px; }
}
/* od 1441 px menu jest wyższe */
@media (min-width: 1441px) {
  .ab-t10-b .pv-g, .ab-t10-c .pv-g { padding-top: 179px; }
}