/* Trenuvo: style strony testu. Kolory: tło #F3F5F8, tekst #0B0D12, niebieski #2B37FF. */

/* Archivo (Omnibus-Type, licencja SIL Open Font License 1.1), wersja zmienna: grubość 100-900, szerokość 62-125%. */
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/fonts/archivo-latin.woff2) format('woff2-variations'),url(/assets/fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2027,U+2030,U+2039,U+203A,U+20AC,U+2122,U+2190-2193,U+2212,U+FEFF}
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/fonts/archivo-pl.woff2) format('woff2-variations'),url(/assets/fonts/archivo-pl.woff2) format('woff2');unicode-range:U+0104-0107,U+0118-0119,U+0141-0144,U+015A-015B,U+0179-017C}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#F3F5F8}
body{margin:0;font-family:Archivo,system-ui,sans-serif;color:#0B0D12;background:#F3F5F8;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:#0B0D12}a:hover{color:#2B37FF}
img{max-width:100%}
:focus-visible{outline:3px solid #2B37FF;outline-offset:2px}

/* --- strona główna (z projektu na kanwie) --- */
@property --tv-t{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --tv-s{syntax:'<angle>';inherits:false;initial-value:0deg}
.tv-hero{height:650px}
.tv-h1{font-size:38px;margin:34px 0 0}
.tv-lead{font-size:17px;margin:14px 0 0;max-width:320px}
.tv-hero-photo{position:absolute;inset:0;background:#05070D url(/assets/img/przysiad-1080.jpg) 50% 0%/cover no-repeat;background-image:image-set(url(/assets/img/przysiad-1080.webp) type("image/webp"),url(/assets/img/przysiad-1080.jpg) type("image/jpeg"));animation:tv-lights 1.8s ease-out .1s both}
.tv-hero-cien{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,13,0.9) 0%,rgba(5,7,13,0.7) 30%,rgba(5,7,13,0) 54%,rgba(5,7,13,0) 80%,rgba(5,7,13,0.55) 100%)}
.tv-hero-in{position:relative;height:100%;max-width:560px;margin:0 auto;box-sizing:border-box;padding:18px 24px 22px;display:flex;flex-direction:column}
.tv-hero-dol{margin-top:auto}
@media (min-width:700px){
.tv-hero{height:680px}
.tv-h1{font-size:56px}
.tv-lead{font-size:19px;max-width:380px}
.tv-hero-photo{background-position:50% 44%;background-image:image-set(url(/assets/img/przysiad-1449.webp) type("image/webp"),url(/assets/img/przysiad-1080.jpg) type("image/jpeg"))}
}
/* Układ treści na telefonie (te same wartości co w projekcie z kanwy). Pary sekcji i kolumny cennika
   nie tworzą tu własnych pudełek (display: contents), więc telefon wygląda jak dotąd. */
.tv-main{max-width:560px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.tv-fakty{margin-top:20px}
.tv-h2{font-size:30px}
.tv-cennik{padding-top:56px;display:flex;flex-direction:column;gap:20px}
.tv-kol,.tv-para{display:contents}
.tv-jak,.tv-wyp,.tv-faq{padding-top:64px}
.tv-wyp-foto{height:230px}
.tv-dlapro{padding-top:64px}
.tv-dlapro.tv-dlapro-najpierw{padding-top:40px}
.tv-pro-foto{height:210px}
.tv-pro-tresc{padding:22px 20px 22px}
.tv-pro-h2{font-size:23px}
.tv-koniec{margin-top:64px}
.tv-stopka{margin-top:56px;padding:28px 0 40px;display:flex;flex-direction:column;gap:16px}
.tv-stopka-linki{display:flex;flex-direction:column;gap:10px}
@keyframes tv-lights{from{filter:brightness(.2) saturate(.5)}to{filter:brightness(1) saturate(1)}}
.tv-blob{position:absolute;width:560px;height:560px;border-radius:50%;will-change:transform;animation:tv-drift 24s ease-in-out infinite alternate}
@keyframes tv-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(70px,-50px,0) scale(1.14)}100%{transform:translate3d(-50px,60px,0) scale(.9)}}
.tv-glow{animation:tv-glow 7s ease-in-out infinite}
@keyframes tv-glow{0%,100%{transform:translate3d(-6%,3%,0) scale(1);opacity:.55}50%{transform:translate3d(6%,-4%,0) scale(1.1);opacity:.95}}
.tv-react{border:3px solid transparent;background:linear-gradient(#FFFFFF,#FFFFFF) padding-box,conic-gradient(from calc(var(--tv-t) + var(--tv-s)),#2B37FF 0deg,#7FA4FF 50deg,#FFFFFF 80deg,#2B37FF 130deg,#0B0D12 200deg,#2B37FF 250deg,#BFD2FF 300deg,#2B37FF 360deg) border-box;animation:tv-t 8s linear infinite}
@keyframes tv-t{to{--tv-t:360deg}}
@keyframes tv-s{to{--tv-s:720deg}}
.tv-eq{background:#DDE2EA url(/assets/img/hantle-1000.jpg) 50% 45%/cover no-repeat;background-image:image-set(url(/assets/img/hantle-1000.webp) type("image/webp"),url(/assets/img/hantle-1000.jpg) type("image/jpeg"))}
.tv-pro{background:#1A1F2B url(/assets/img/trener-1200.jpg) 50% 30%/cover no-repeat;background-image:image-set(url(/assets/img/trener-1200.webp) type("image/webp"),url(/assets/img/trener-1200.jpg) type("image/jpeg"))}
.tv-cta-photo{background:#0A0E1A url(/assets/img/wyciag-1000.jpg) 50% 30%/cover no-repeat;background-image:image-set(url(/assets/img/wyciag-1000.webp) type("image/webp"),url(/assets/img/wyciag-1000.jpg) type("image/jpeg"))}
.tv-d{display:inline-block;animation:tv-digit .35s cubic-bezier(.2,.8,.2,1) both}
.tv-d1{animation-delay:.5s}.tv-d2{animation-delay:.8s}.tv-d3{animation-delay:1.1s}.tv-d4{animation-delay:1.4s}
@keyframes tv-digit{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.tv-k{background:#FFFFFF;box-shadow:0 0 8px rgba(255,255,255,.9);animation:tv-key .25s ease-out both}
.tv-k1{animation-delay:.5s}.tv-k2{animation-delay:.8s}.tv-k3{animation-delay:1.1s}.tv-k4{animation-delay:1.4s}
@keyframes tv-key{from{background:rgba(255,255,255,.3);box-shadow:none}to{background:#FFFFFF;box-shadow:0 0 8px rgba(255,255,255,.9)}}
.tv-open{animation:tv-open .45s ease-out 1.9s both}
@keyframes tv-open{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.tv-code{view-timeline-name:--tv-code}
@supports (animation-timeline: view()){
.tv-react{animation:tv-t 8s linear infinite,tv-s linear both;animation-timeline:auto,view()}
.tv-d,.tv-k,.tv-open{animation-timeline:--tv-code;animation-delay:0s;animation-duration:auto}
.tv-d1,.tv-k1{animation-range:cover 18% cover 25%}
.tv-d2,.tv-k2{animation-range:cover 25% cover 32%}
.tv-d3,.tv-k3{animation-range:cover 32% cover 39%}
.tv-d4,.tv-k4{animation-range:cover 39% cover 46%}
.tv-open{animation-range:cover 48% cover 55%}
}

/* przyciski reakcji na cennik */
.tv-opcja{height:52px;border:1.5px solid #0B0D12;border-radius:12px;background:#FFFFFF;color:#0B0D12;font-family:Archivo,system-ui,sans-serif;font-size:15px;font-weight:600;font-stretch:88%;padding:0 4px;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,transform .1s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tv-opcja:hover{border-color:#2B37FF;color:#2B37FF}
.tv-opcja:active{transform:scale(.97)}
.tv-opcja[aria-pressed="true"]{background:#2B37FF;border-color:#2B37FF;color:#FFFFFF}

/* --- podstrony: ankieta, formularz, podziękowanie, polityka --- */
.pod{min-height:100vh;position:relative;overflow-x:clip}
.pod-tlo{position:fixed;inset:0;overflow:clip;pointer-events:none;z-index:0}
.pod-b1{top:-160px;left:50%;margin-left:-520px;background:radial-gradient(closest-side,rgba(43,55,255,.18),rgba(43,55,255,0));animation-duration:26s}
.pod-b2{top:420px;left:50%;margin-left:-60px;background:radial-gradient(closest-side,rgba(141,176,255,.3),rgba(141,176,255,0));animation-duration:29s;animation-delay:-9s}
.pod-ramka{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:18px 20px 32px;box-sizing:border-box}
.pod-gora{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 4px 0}
.pod-logo img{width:112px;height:auto;display:block}
.pod-wstecz{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:#343A46;text-decoration:none;padding:8px 4px}
.pod-naglowek{padding:28px 4px 8px}
.pod h1{margin:0;font-size:30px;line-height:1.05;font-weight:800;font-stretch:125%;letter-spacing:-.02em}
.pod-naglowek p{margin:10px 0 0;font-size:17px;line-height:1.45;color:#343A46}
.pod-naglowek .pod-mala{margin-top:8px}
.pod-mala{font-size:13px;line-height:1.4;color:#4A5160}
.pod-stopka{margin-top:40px;padding:20px 4px 0;border-top:1px solid #D5DAE3;font-size:14px;line-height:1.5;color:#4A5160}
.pod-stopka p{margin:0 0 4px}.pod-stopka a{color:#343A46}
.srodek{text-align:center}
.niewidoczne{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pulapka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.formularz{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.pyt{margin:0;border:0;background:#FFFFFF;border-radius:18px;padding:18px 16px 18px;box-shadow:0 14px 34px -20px rgba(16,24,64,.3);min-width:0}
.pyt-t{float:left;width:100%;margin:0;padding:0;font-size:18px;line-height:1.3;font-weight:700;display:flex;gap:10px;align-items:baseline}
.pyt-t+*{clear:both}
.pyt-nr{flex-shrink:0;font-size:15px;font-weight:800;font-stretch:125%;color:#2B37FF;min-width:16px}
.pyt-p{margin:6px 0 0;font-size:14px;line-height:1.4;color:#4A5160}
.pyt-grupa{margin:12px 0 0;font-size:14px;font-weight:600;color:#343A46}
.chipy{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chipy-pory{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.chipy-pory .chip span{padding:8px 2px;white-space:nowrap}
.chipy-dzielnice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.chipy-ceny .chip{flex:1 1 calc(33.33% - 8px)}
.chipy-lista{flex-direction:column}
.chip{position:relative;display:flex;-webkit-tap-highlight-color:transparent}
.chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.chip span{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;min-height:46px;padding:8px 14px;box-sizing:border-box;border:1.5px solid #D5DAE3;border-radius:12px;background:#FFFFFF;font-size:15px;line-height:1.25;font-weight:600;color:#0B0D12;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.chipy-lista .chip span{justify-content:flex-start;text-align:left}
.chip span:hover{border-color:#2B37FF}
.chip input:checked+span{background:#2B37FF;border-color:#2B37FF;color:#FFFFFF}
.chip input:focus-visible+span{outline:3px solid #2B37FF;outline-offset:2px}
.pole input{display:block;width:100%;box-sizing:border-box;margin-top:12px;height:52px;padding:0 14px;border:1.5px solid #D5DAE3;border-radius:12px;font:inherit;font-size:17px;color:#0B0D12;background:#FFFFFF}
.pole input:focus{border-color:#2B37FF;outline:none;box-shadow:0 0 0 3px rgba(43,55,255,.18)}
.zgoda{display:flex;gap:12px;align-items:flex-start;margin-top:14px;font-size:14px;line-height:1.45;color:#343A46;cursor:pointer}
.zgoda input{flex-shrink:0;width:22px;height:22px;margin:0;accent-color:#2B37FF}
.blad{margin:10px 0 0;font-size:14px;font-weight:600;color:#C21B3A}
.wyslij{height:58px;border:0;border-radius:12px;background:#2B37FF;color:#FFFFFF;font:inherit;font-size:18px;font-weight:700;cursor:pointer;box-shadow:0 14px 30px -12px rgba(43,55,255,.75);margin-top:6px}
.wyslij:hover{background:#1F2AE0}
.wyslij[disabled]{opacity:.6;cursor:wait}

.karta{background:#FFFFFF;border-radius:20px;padding:24px 20px;margin-top:16px;box-shadow:0 14px 34px -20px rgba(16,24,64,.3)}
.karta h2{margin:0 0 6px;font-size:21px;line-height:1.2;font-weight:800;font-stretch:112%}
.karta p{margin:8px 0 0;font-size:16px;line-height:1.5;color:#343A46}
.dzieki{margin-top:24px}
.dzieki h1{margin-top:12px}
.przyciski{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.przycisk{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 14px;border-radius:12px;border:1.5px solid #0B0D12;color:#0B0D12;font-size:16px;font-weight:600;text-decoration:none;margin-top:14px;box-sizing:border-box}
.przyciski .przycisk{margin-top:0}
.przycisk:hover{border-color:#2B37FF;color:#2B37FF}
.tekst h1{font-size:28px}
.tekst h2{margin:26px 0 4px;font-size:19px}
.tekst p{font-size:15px}
.tekst a{color:#2B37FF}

/* --- komputer: układ od 1000 px szerokości (16.10.2026). Telefon i tablet bez zmian. --- */
@media (min-width:1000px){
/* Na start: tekst po lewej, zdjęcie po prawej. */
.tv-hero{height:720px}
.tv-hero-photo{left:auto;width:min(54%,860px);background-position:50% 74%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
.tv-hero-cien{background:linear-gradient(180deg,rgba(5,7,13,.6) 0%,rgba(5,7,13,0) 22%,rgba(5,7,13,0) 78%,rgba(5,7,13,.5) 100%)}
.tv-hero-in{max-width:1200px;padding:28px 40px 128px}
.tv-h1{margin-top:auto;font-size:clamp(56px,5.6vw,84px);max-width:9.4em}
.tv-lead{margin-top:22px;font-size:21px;max-width:440px}
.tv-hero-dol{margin-top:40px;margin-bottom:auto}
.tv-hero-podpis{position:absolute;right:40px;bottom:14px}
/* Treść: szeroka kolumna, sekcje parami. */
.tv-main{max-width:1200px;padding:0 40px;--tv-h2:clamp(34px,3.4vw,42px)}
.tv-fakty{position:relative;z-index:2;margin-top:-58px;max-width:620px}
.tv-h2{font-size:var(--tv-h2)}
.tv-cennik{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;row-gap:28px;align-items:start;padding-top:96px}
.tv-cennik-wstep{grid-column:1/-1;max-width:660px}
.tv-kol{display:flex;flex-direction:column;gap:20px}
.tv-para{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;align-items:start;padding-top:104px}
.tv-para>.tv-jak,.tv-para>.tv-wyp,.tv-para>.tv-faq{padding-top:0}
/* Nagłówki obok siebie mają tę samą wysokość (dwa wiersze), więc treść pod nimi zaczyna się na tej samej linii. */
.tv-para>.tv-jak>.tv-h2,.tv-para>.tv-wyp>.tv-h2{min-height:2.1em;display:flex;align-items:flex-end}
.tv-wyp-foto{height:260px}
.tv-para-faq{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:64px}
/* Karta „Dowiedz się o otwarciu” zaczyna się na wysokości pierwszego pytania (nagłówek + odstęp 16 px). */
.tv-para>.tv-koniec{margin-top:calc(var(--tv-h2)*1.05 + 16px)}
/* Dla trenerów: zdjęcie i tekst obok siebie. */
.tv-dlapro{padding-top:104px}
.tv-dlapro.tv-dlapro-najpierw{padding-top:88px}
.tv-pro-karta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.tv-pro-foto{height:auto;min-height:340px}
.tv-pro-tresc{padding:48px 52px;justify-content:center}
.tv-pro-h2{font-size:32px}
.tv-pro-przycisk{align-self:flex-start;padding:0 32px}
/* Stopka w poziomie. */
.tv-stopka{margin-top:104px;padding:36px 0 56px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo linki" "opis polityka";column-gap:48px;row-gap:12px;align-items:center}
.tv-stopka-logo{grid-area:logo}
.tv-stopka-opis{grid-area:opis}
.tv-stopka-linki{grid-area:linki;flex-direction:row;gap:32px}
.tv-stopka-polityka{grid-area:polityka;justify-self:end}

/* Podstrony: szersza ramka. */
.pod-ramka{max-width:1200px;padding:28px 40px 40px}
.pod h1{font-size:44px}
.pod-naglowek p{font-size:18px}
/* Ankieta i formularz: wstęp po lewej zostaje na ekranie, pytania po prawej. */
.pod[data-strona="ankieta"] main,.pod[data-strona="pro"] main{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:80px;align-items:start}
.pod[data-strona="ankieta"] .pod-naglowek,.pod[data-strona="pro"] .pod-naglowek{position:sticky;top:0;padding:56px 0 0}
.pod[data-strona="ankieta"] .formularz,.pod[data-strona="pro"] .formularz{margin-top:56px}
.pyt{padding:22px 24px 24px}
/* Podziękowanie: karty obok siebie. */
.pod[data-strona="dziekujemy"] main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;max-width:960px;margin:0 auto}
.pod[data-strona="dziekujemy"] main>.dzieki,.pod[data-strona="dziekujemy"] main>.srodek,.pod[data-strona="dziekujemy"] main>.karta:nth-of-type(2):last-of-type{grid-column:1/-1}
/* Polityka prywatności i strony błędów: wygodna szerokość tekstu. */
.pod main>.tekst{max-width:800px;margin-left:auto;margin-right:auto;padding:40px 48px}
.pod main>div.karta:only-child{max-width:640px;margin-left:auto;margin-right:auto}
}
@media (min-width:1200px){
.chipy-pory{grid-template-columns:repeat(7,minmax(0,1fr))}
.chipy-dzielnice{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Starsze Safari (iOS 15 i wcześniej) nie zna overflow: clip; bez tego strona robi się za szeroka. */
@supports not (overflow: clip){[style*="overflow: clip"]{overflow:hidden!important}.pod{overflow-x:hidden}.pod-tlo{overflow:hidden}}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.tv-hero-photo,.tv-blob,.tv-glow,.tv-react,.tv-d,.tv-k,.tv-open{animation:none!important}}