/* ══════════════════════════════════════════════════════════════════
   Peak Lab — nowa strona, wersja v4 (2026-08-03)
   Wspólny arkusz stylów dla strony głównej i podstron dyscyplin.
   Baza: mock-up v3 launch-safe (2026-06-12) · identyfikacja: brand/STYL.md
   Nowe w v4: matryca dyscyplin, karta „personalizowany”, sekcja metabolizmu,
              nagłówek i okruszki podstron, zastrzeżenie medyczne.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --bg:#101317; --bg2:#1B1F25; --bg3:#22262D;
  --line:#262A31; --line2:#343943;
  --tx:#FFFFFF; --tx2:#C7CACD; --tx3:#A6ABB2; --tx4:#8A8F96; --tx5:#5F646B;
  --silver:#C0C0C0; --red:#E2483D;
  --fs-12:12px; --fs-13:13.5px; --fs-15:15px; --fs-16:16px; --fs-18:18px; --fs-21:21px;
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* Safari na iOS potrafi samodzielnie powiększyć tekst po obróceniu telefonu
   do poziomu — to rozjeżdża układ w sposób trudny do odtworzenia. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Zabezpieczenie na przyszłe grafiki: żadna nie wypchnie strony poza ekran.
   Reguły z konkretnymi wysokościami (logo, stopka) stoją niżej i wygrywają. */
img{max-width:100%;height:auto}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--tx);line-height:1.6;font-size:var(--fs-16)}
h1,h2,h3,.osw{font-family:'Oswald',sans-serif;text-transform:uppercase;line-height:1.1;font-weight:600;letter-spacing:.01em}
section,.index{scroll-margin-top:72px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--silver);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.sec{padding:96px 0}
.sec-alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec h2{font-size:clamp(26px,3.4vw,40px);margin:10px 0 14px}
.eyebrow{font-family:'Oswald';text-transform:uppercase;letter-spacing:.22em;font-size:var(--fs-12);font-weight:500;color:var(--tx4)}
.lead{font-size:var(--fs-18);color:var(--tx3);max-width:680px}
.lead b{color:var(--tx);font-weight:500}
.btn{display:inline-block;font-family:'Oswald';padding:14px 28px;text-decoration:none;text-transform:uppercase;letter-spacing:.07em;font-size:var(--fs-13);font-weight:500;transition:.18s;border:0;cursor:pointer}
.btn-w{background:#fff;color:var(--bg)}
.btn-w:hover{background:var(--silver)}
.btn-o{border:1px solid var(--line2);color:#fff;background:transparent}
.btn-o:hover{border-color:var(--silver);background:rgba(255,255,255,.04)}

/* ── topbar ── */
.topbar{position:sticky;top:0;z-index:90;background:rgba(16,19,23,.93);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:22px;height:64px}
.logo{display:block}
/* Logo: 34 px w pasku wysokim na 64 px. Proporcja znaku to 2,49:1, więc każdy
   piksel wysokości kosztuje 2,5 px szerokości — a w pasku siedzą jeszcze CTA
   i „Menu". Powyżej ~40 px znak zaczyna przytłaczać pasek, poniżej 320 px
   ekranu przestaje się mieścić (zabezpieczenie w progu 359 px na końcu pliku). */
.logo img{height:34px;display:block}
.menu{display:flex;gap:18px}
.menu a{font-family:'Oswald';font-size:var(--fs-12);letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);text-decoration:none;padding:4px 0}
.menu a:hover{color:#fff}
.top-cta{display:flex;gap:10px;margin-left:auto}
.top-cta .btn{padding:9px 16px;font-size:var(--fs-12)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line2);color:#fff;font-family:'Oswald';font-size:var(--fs-12);letter-spacing:.1em;text-transform:uppercase;padding:9px 14px;cursor:pointer}
.mobile-nav{display:none;background:var(--bg2);border-bottom:1px solid var(--line)}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:14px 28px;border-top:1px solid var(--line);font-family:'Oswald';font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx2);text-decoration:none}

/* ── hero ── */
.hero{padding:84px 0 60px;border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:46px;align-items:center}
.hero h1{font-size:clamp(40px,5.6vw,76px)}
.hero .lead{margin:22px 0 32px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-note{margin-top:20px;font-size:var(--fs-13);color:var(--tx3)}
.chart{margin:0;background:#0B0D10;border:1px solid var(--line);overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.18)}
.chart img{display:block;width:100%;height:auto}

/* ── index strip ── */
.index{border-bottom:1px solid var(--line);padding:24px 0 26px;background:var(--bg)}
.index .wrap{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:36px;align-items:center}
.index .lab{font-family:'Oswald';font-size:var(--fs-12);letter-spacing:.16em;color:var(--tx4);text-transform:uppercase;border-right:1px solid var(--line);padding-right:32px}
.index .lab b{display:block;color:#fff;font-size:var(--fs-13)}
.stat b{font-family:'Oswald';font-size:30px;color:#fff;font-weight:600}
.stat > span{display:block;font-size:var(--fs-12);color:var(--tx3);margin-top:2px}
.index .stamp{grid-column:1/-1;font-size:var(--fs-12);color:var(--tx5);padding-top:6px}

/* ── objawy ── */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.card{background:var(--bg);border:1px solid var(--line);padding:28px 26px}
.card .q{font-style:italic;font-size:17px;color:#fff;display:block;margin-bottom:12px;line-height:1.5}
.card p{font-size:var(--fs-15);color:var(--tx3)}
.card .hint{margin-top:16px;font-size:var(--fs-13);color:var(--tx3)}
.card .hint b{font-family:'Oswald';color:var(--red);text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.card a{display:inline-block;margin-top:14px;color:#fff;font-weight:600;font-size:var(--fs-13);text-decoration:underline;text-underline-offset:4px}

/* ── jak badamy: oś czasu ── */
.tl{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:46px;position:relative}
.tl::before{content:"";position:absolute;top:7px;left:2%;right:2%;height:2px;background:var(--line2)}
.tstep{padding:0 14px 0 0;position:relative}
.tstep i{display:block;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--silver);margin-bottom:14px;position:relative}
.tstep.hot i{border-color:var(--red);background:var(--red)}
.tstep b{font-family:'Oswald';text-transform:uppercase;font-size:var(--fs-15);font-weight:500;letter-spacing:.04em;display:block;color:#fff}
.tstep span{font-size:var(--fs-13);color:var(--tx3);display:block;margin-top:6px}
.tl-meta{margin-top:34px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px;font-size:var(--fs-13);color:var(--tx3)}
.tl-meta b{color:#fff}
.limbar{margin-top:40px;border:1px solid var(--line);background:var(--bg);padding:20px 24px;display:flex;gap:8px 24px;flex-wrap:wrap;align-items:center}
.limbar .lab{font-size:var(--fs-13);color:var(--tx3);width:100%;margin-bottom:4px}
.limbar span{font-family:'Oswald';text-transform:uppercase;font-size:var(--fs-13);letter-spacing:.08em;color:var(--tx2)}
.limbar .dot{width:4px;height:4px;background:var(--tx5);border-radius:50%}

/* ── raport/panel ── */
.proof .wrap{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.proof ul{list-style:none;margin-top:22px}
.proof li{padding:11px 0;border-bottom:1px solid var(--line);font-size:var(--fs-15);color:var(--tx2)}
.proof li b{font-family:'Oswald';text-transform:uppercase;font-weight:500;letter-spacing:.04em;color:#fff}
.repbox{border:1px solid var(--line2);background:var(--bg)}
.repbox .bar{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);align-items:center}
.repbox .bar i{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.repbox .bar span{margin-left:8px;font-size:var(--fs-12);color:var(--tx4)}
.repbox .body{padding:30px 28px}
.repbox blockquote{font-size:17px;font-style:italic;color:var(--tx2);line-height:1.6;border-left:3px solid var(--red);padding-left:18px}
.repbox .src{font-size:var(--fs-12);color:var(--tx4);margin:14px 0 24px}
.repbox .btn{width:100%;text-align:center}
.repbox .note{font-size:var(--fs-12);color:var(--tx4);margin-top:12px;text-align:center}

/* ── dyscypliny ── */
.disc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.dt{border:1px solid var(--line);background:var(--bg);padding:24px;text-decoration:none;transition:.15s;display:block}
.dt:hover{border-color:var(--silver);background:var(--bg3)}
.dt b{font-family:'Oswald';text-transform:uppercase;font-size:var(--fs-18);color:#fff;font-weight:500;letter-spacing:.04em;display:flex;justify-content:space-between}
.dt b i{font-style:normal;color:var(--tx5)}
.dt span{display:block;font-size:var(--fs-13);color:var(--tx3);margin-top:8px}
.dt span em{font-style:normal;color:var(--red)}
.dt.own{border-color:var(--line2)}
.dt.own:hover{border-color:var(--silver)}
/* Kafelek „i wszystko inne” — pełna szerokość na końcu siatki dyscyplin.
   Sześć kafelków czyta się jako zamknięta lista tego, co umiemy; ten siódmy
   ma jawnie powiedzieć, że lista nie jest granicą. Obramowanie przerywane,
   bo to nie kolejna dyscyplina, tylko zaproszenie do rozmowy. */
.dt.otwarte{grid-column:1/-1;border-style:dashed;border-color:var(--line2)}
.dt.otwarte b i{color:var(--silver)}

/* ── pakiety ── */
.pack{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px;align-items:stretch}
.pc{border:1px solid var(--line);background:var(--bg);padding:30px 26px;display:flex;flex-direction:column}
.pc h3{font-size:17px;color:#fff}
.pc .price{font-family:'Oswald';font-size:34px;margin:8px 0 6px;color:#fff}
.pc p{font-size:var(--fs-15);color:var(--tx3);margin-bottom:14px}
.pc ul{list-style:none;margin:0 0 24px}
.pc li{padding:7px 0;border-bottom:1px solid var(--line);font-size:var(--fs-13);color:var(--tx2)}
.pc li::before{content:"— ";color:var(--tx5)}
.pc .btn{margin-top:auto;text-align:center}
.pc.featured{background:#fff;border-color:#fff;position:relative}
.pc.featured h3,.pc.featured .price{color:var(--bg)}
.pc.featured p{color:#3A3F46}
.pc.featured li{color:#15181C;border-color:#E2E4E8}
.pc.featured::before{content:"NAJCZĘŚCIEJ WYBIERANY";position:absolute;top:-11px;left:24px;background:#15181C;color:#fff;font-family:'Oswald';font-size:11px;letter-spacing:.14em;padding:3px 10px}
.pc.featured .btn{background:var(--bg);color:#fff}
.pc.featured .btn:hover{background:#000}
/* Jasna karta bez twierdzenia o popularności. Używana tam, gdzie wyróżnienie
   wynika z zawartości oferty („to jest w cenie”), a nie ze sprzedaży.
   Performance Year nie jest jeszcze sprzedawany — etykieta „najczęściej
   wybierany” byłaby przy nim po prostu nieprawdą. */
.pc.featured.wcenie::before{content:"W CENIE"}
/* karta personalizowana — bez ceny, wycena po rozmowie */
.pc.quote{border-style:dashed;border-color:var(--line2)}
.pc.quote .price{font-size:var(--fs-21);color:var(--tx2);letter-spacing:.03em;line-height:1.3;margin:10px 0 8px}
.trustline{margin-top:26px;display:flex;gap:10px 26px;flex-wrap:wrap;align-items:center;font-size:var(--fs-13);color:var(--tx3)}
.trustline b{color:#fff}
.trustline .tel{font-family:'Oswald';font-size:var(--fs-15);letter-spacing:.06em;color:#fff}
.reassure{margin-top:14px;font-size:var(--fs-12);color:var(--tx4)}
/* zastrzeżenie: profil sportowy, nie diagnoza medyczna */
.disclaimer{margin-top:18px;border-left:2px solid var(--line2);padding:8px 0 8px 14px;font-size:var(--fs-12);color:var(--tx4);max-width:720px}

/* ── matryca: co ten poziom znaczy w Twojej dyscyplinie ── */
.matrix{margin-top:40px;border:1px solid var(--line);background:var(--bg)}
.mrow{display:grid;grid-template-columns:1fr 1.5fr 1.5fr;border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:0}
.mrow.head{background:var(--bg3)}
.mrow.head .mcell{font-family:'Oswald';text-transform:uppercase;letter-spacing:.08em;font-size:var(--fs-12);color:var(--tx2);font-weight:500}
.mcell{padding:14px 18px;font-size:var(--fs-13);color:var(--tx3);border-right:1px solid var(--line)}
.mcell:last-child{border-right:0}
.mcell.d{color:#fff;font-family:'Oswald';text-transform:uppercase;letter-spacing:.05em;font-size:var(--fs-13);font-weight:500;display:flex;align-items:center;justify-content:space-between;gap:10px}
.mcell.d a{color:#fff;text-decoration:none}
.mcell.d a:hover{color:var(--silver)}
.mcell.d i{font-style:normal;color:var(--tx5);font-family:'Inter'}
.matrix-note{margin-top:12px;font-size:var(--fs-12);color:var(--tx4)}

/* ── opinie ── */
.rcard{background:var(--bg);border:1px solid var(--line);padding:26px}
.rcard .stars{color:var(--silver);letter-spacing:3px;margin-bottom:12px}
.rcard p{font-size:var(--fs-15);font-style:italic;color:var(--tx2)}
.rcard span{display:block;margin-top:14px;font-size:var(--fs-12);color:var(--tx4)}

/* ── historie ── */
.stories .head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.scard{background:var(--bg);border:1px solid var(--line);padding:26px;display:flex;flex-direction:column;gap:10px}
.scard .tag{font-family:'Oswald';font-size:11px;letter-spacing:.16em;color:var(--tx4);text-transform:uppercase}
.scard h3{font-size:var(--fs-18);line-height:1.3}
.scard .delta{font-size:var(--fs-13);color:var(--tx3);border:1px solid var(--line);padding:10px 12px;margin-top:4px}
.scard .delta b{color:var(--red)}
.scard .meta{font-size:var(--fs-12);color:var(--tx4);margin-top:auto;padding-top:10px}

/* ── performance year ── */
.py .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center}
.py .pill{display:inline-block;font-family:'Oswald';font-size:11px;letter-spacing:.16em;border:1px solid var(--silver);color:var(--silver);padding:4px 12px;text-transform:uppercase;margin-bottom:16px}
.py ul{list-style:none;margin:20px 0 30px}
.py li{padding:9px 0;font-size:var(--fs-15);color:var(--tx2);border-bottom:1px solid var(--line)}
.py li b{color:#fff}
.py-side{border:1px solid var(--line);padding:28px;background:var(--bg)}
.py-side .row{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--fs-13);color:var(--tx3)}
.py-side .row b{font-family:'Oswald';color:#fff;font-weight:500;letter-spacing:.04em;text-align:right}
.py-side .small{font-size:var(--fs-12);color:var(--tx3);margin-top:14px}

/* ── trenerzy ── */
.coach{padding:56px 0;border-top:1px solid var(--line)}
.coach .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.coach h3{font-size:var(--fs-21)}
.coach p{font-size:var(--fs-15);color:var(--tx3);max-width:600px;margin-top:6px}

/* ── FAQ ── */
.faq details{border:1px solid var(--line);background:var(--bg);margin-top:12px}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 24px;font-family:'Oswald';font-size:var(--fs-15);text-transform:uppercase;letter-spacing:.05em;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;color:var(--tx4)}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 24px 22px;font-size:var(--fs-15);color:var(--tx3);max-width:820px}
.faq .a b{color:#fff}
.faq-tel{margin-top:26px;font-size:var(--fs-15);color:var(--tx3)}
.faq-tel b{font-family:'Oswald';color:#fff;letter-spacing:.06em;font-size:var(--fs-18)}

/* ── final ── */
.final{text-align:center;padding:110px 0}
.final h2,.final h1{font-size:clamp(30px,4.6vw,54px)}
.final p{margin:18px auto 36px;max-width:560px;color:var(--tx3)}

/* ══ PODSTRONY DYSCYPLIN ══ */
.crumbs{padding:18px 0 0;font-size:var(--fs-12);color:var(--tx5)}
.crumbs a{color:var(--tx4);text-decoration:none}
.crumbs a:hover{color:#fff}
.crumbs i{font-style:normal;padding:0 8px;color:var(--line2)}
.subhero{padding:44px 0 66px;border-bottom:1px solid var(--line)}
.subhero h1{font-size:clamp(32px,4.6vw,58px);margin-top:12px}
.subhero .lead{margin:20px 0 30px;max-width:720px}
.subhero .hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.subhero .claim{margin-top:26px;border-left:3px solid var(--red);padding:6px 0 6px 18px;font-size:17px;font-style:italic;color:var(--tx2);max-width:640px}
/* „co mierzymy” — lista dowodowa na podstronie */
.mez{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:36px}
.mez .card p{margin-top:8px}
.mez .card b{font-family:'Oswald';text-transform:uppercase;letter-spacing:.05em;color:#fff;font-weight:500;font-size:var(--fs-15)}
.forwho{margin-top:40px;border:1px solid var(--line);background:var(--bg);padding:26px 28px}
.forwho h3{font-size:var(--fs-18);margin-bottom:12px}
.forwho ul{list-style:none}
.forwho li{padding:9px 0;border-bottom:1px solid var(--line);font-size:var(--fs-15);color:var(--tx2)}
.forwho li:last-child{border-bottom:0}
.forwho li::before{content:"— ";color:var(--tx5)}

/* ══ FORMULARZE ZGŁOSZENIOWE (Performance Year, Dla trenerów) ══ */
.formbox{margin-top:38px;border:1px solid var(--line2);background:var(--bg);padding:34px 32px}
.formbox .intro{font-size:var(--fs-15);color:var(--tx3);max-width:720px;margin-bottom:24px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.field{display:flex;flex-direction:column;gap:7px}
.field.wide{grid-column:1/-1}
.field label{font-family:'Oswald';text-transform:uppercase;letter-spacing:.08em;font-size:var(--fs-12);color:var(--tx2);font-weight:500}
.field label .req{color:var(--red)}
.field .hint{font-size:var(--fs-12);color:var(--tx5);margin-top:-2px}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{
  font-family:'Inter',system-ui,sans-serif;font-size:var(--fs-15);color:#fff;background:var(--bg2);
  border:1px solid var(--line2);padding:12px 14px;width:100%;transition:.15s}
.field textarea{min-height:110px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--silver);background:var(--bg3)}
.field input::placeholder,.field textarea::placeholder{color:var(--tx5)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--tx4) 50%),linear-gradient(135deg,var(--tx4) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(1em + 2px),calc(100% - 15px) calc(1em + 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px}
.checks{display:flex;flex-wrap:wrap;gap:8px 10px}
.checks label{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);padding:9px 14px;cursor:pointer;
  font-family:'Inter';text-transform:none;letter-spacing:0;font-size:var(--fs-13);color:var(--tx2);font-weight:400;transition:.15s}
.checks label:hover{border-color:var(--silver)}
.checks input{accent-color:var(--red);width:15px;height:15px}
.consent{grid-column:1/-1;display:flex;gap:11px;align-items:flex-start;border-top:1px solid var(--line);padding-top:20px;margin-top:4px}
.consent input{accent-color:var(--red);width:16px;height:16px;margin-top:3px;flex:none}
/* Treść zgody jest etykietą pola, nie zwykłym tekstem — dzięki temu klika się
   ją w całości (na telefonie kwadracik 16 px to realna bariera) i czytnik
   ekranu odczytuje, na co dokładnie wyrażana jest zgoda. Przy zgodzie RODO
   to nie kosmetyka. */
.consent label,.consent span{font-size:var(--fs-12);color:var(--tx4);line-height:1.55}
.consent label{cursor:pointer}
.consent a{color:var(--tx2)}
.form-submit{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.form-submit .after{font-size:var(--fs-12);color:var(--tx4);max-width:420px}
.form-submit .btn[disabled]{opacity:.5;cursor:default}
/* komunikat błędu wysyłki — nigdy nie udajemy, że formularz zadziałał */
.form-blad{grid-column:1/-1;border-left:3px solid var(--red);background:rgba(226,72,61,.07);
  padding:14px 16px;font-size:var(--fs-13);color:var(--tx2);margin-top:4px}

/* ── jak to działa: kroki numerowane ── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px;counter-reset:krok}
.step{border:1px solid var(--line);background:var(--bg);padding:26px 24px;position:relative}
.step::before{counter-increment:krok;content:counter(krok);font-family:'Oswald';font-size:34px;color:var(--line2);line-height:1;display:block;margin-bottom:12px}
.step b{font-family:'Oswald';text-transform:uppercase;letter-spacing:.05em;color:#fff;font-weight:500;font-size:var(--fs-15);display:block}
.step span{display:block;font-size:var(--fs-13);color:var(--tx3);margin-top:8px}

/* ── co dostajesz / czego nie robimy ── */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px}
.panel{border:1px solid var(--line);background:var(--bg);padding:28px 26px}
.panel.warn{border-left:3px solid var(--red)}
.panel h3{font-size:var(--fs-18);margin-bottom:14px}
.panel ul{list-style:none}
.panel li{padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--fs-15);color:var(--tx2)}
.panel li:last-child{border-bottom:0}
.panel li::before{content:"— ";color:var(--tx5)}
.panel li b{color:#fff}

/* ══ BANER ZGODY NA COOKIES ══
   RODO/EDPB: odmowa musi być równie łatwa jak zgoda — oba przyciski mają
   ten sam rozmiar i wagę wizualną. Żadnego „X” zamiast odmowy, żadnego
   przycisku odmowy schowanego w linku. */
/* ⚠️ KONSTRUKCJA ODPORNA NA AWARIĘ: baner jest widoczny OD RAZU po wstawieniu
   do strony, a animacja tylko go „wsuwa". Wcześniej było odwrotnie — element
   był schowany transformacją i pokazywała go dopiero animacja. To znaczyło,
   że gdy animacja nie ruszy (karta w tle, oszczędzanie energii, nietypowy stan
   renderowania), baner zostaje poza ekranem i użytkownik NIE MOŻE ani wyrazić
   zgody, ani odmówić. Przy elemencie wymaganym prawem to niedopuszczalne.
   Teraz brak animacji oznacza tylko brak efektu, nie brak banera. */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--bg2);
  border-top:1px solid var(--line2);box-shadow:0 -14px 40px rgba(0,0,0,.4);
  animation:cookiesWjazd .28s ease-out}
@keyframes cookiesWjazd{from{transform:translateY(100%)}to{transform:translateY(0)}}
.cookies.zamykanie{opacity:0;transition:opacity .2s ease-out}
@media(prefers-reduced-motion:reduce){
  .cookies{animation:none}
  .cookies.zamykanie{transition:none}
}
.cookies .wrap{display:flex;gap:26px;align-items:center;justify-content:space-between;
  padding:20px 28px;flex-wrap:wrap}
.cookies p{font-size:var(--fs-13);color:var(--tx3);max-width:640px;line-height:1.6;margin:0}
.cookies p b{color:var(--tx2);font-weight:500}
.cookies a{color:var(--tx2);text-underline-offset:3px}
.cookies-akcje{display:flex;gap:10px;flex-wrap:wrap;flex:none}
.cookies-akcje .btn{padding:12px 22px;font-size:var(--fs-12);min-width:150px;text-align:center}
/* odnośnik do zmiany decyzji — w stopce, żeby wycofanie zgody było możliwe zawsze */
.zmien-zgode{background:none;border:0;padding:0;cursor:pointer;font:inherit;
  color:var(--tx5);text-decoration:underline;text-underline-offset:3px}
.zmien-zgode:hover{color:var(--tx2)}

/* duże ekrany: proporcjonalne skalowanie całości (docelowo: jednostki rem) */
@media(min-width:1500px){body{zoom:1.15}}
@media(min-width:1900px){body{zoom:1.3}}
@media(min-width:2400px){body{zoom:1.5}}

footer{background:#0C0E11;border-top:1px solid var(--line);color:var(--tx4);padding:54px 0 38px;font-size:var(--fs-13)}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px}
footer h4{font-family:'Oswald';text-transform:uppercase;color:#fff;font-size:var(--fs-13);letter-spacing:.1em;margin-bottom:14px;font-weight:500}
footer a{color:var(--tx4);text-decoration:none;display:block;padding:3px 0}
footer a:hover{color:#fff}
.flogo img{height:28px;display:block;margin-bottom:16px}
footer .tel{color:#fff;font-family:'Oswald';letter-spacing:.06em}
.legal{border-top:1px solid var(--line);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:var(--fs-12);color:var(--tx5)}

/* ══════════════════════════════════════════════════════════════════
   PROGI RESPONSYWNE — ZAWSZE NA KOŃCU ARKUSZA
   ══════════════════════════════════════════════════════════════════
   Ten blok stał wcześniej w środku pliku, PRZED regułami stopki.
   Skutek: `footer .wrap{grid-template-columns:1fr 1fr}` przegrywało
   kaskadę z regułą desktopową zapisaną niżej (równa siła selektora →
   wygrywa późniejsza). Stopka zostawała w czterech kolumnach o łącznej
   szerokości 482 px i rozpychała dokument na KAŻDYM telefonie:
   +162 px przy 320, +122 przy 360, +52 nawet na iPhone Pro Max.

   ⛔ Nie przenoś tego bloku wyżej i nie dopisuj reguł bazowych POD nim.
   Nowe reguły responsywne dokładaj tutaj, na końcu.
   Pomiary i uzasadnienie: artefakty/2026-08-05_audyt_mobile_strona_v4.md
   ══════════════════════════════════════════════════════════════════ */

@media(max-width:920px){
  .menu,.top-cta .btn-o{display:none}
  .burger{display:block;margin-left:0}
  /* CTA zostaje po PRAWEJ, tak jak na desktopie. Wcześniej reguła mobilna
     kasowała mu margin-left:auto i przerzucała je na burgera — przez co
     telefon dostawał inny układ niż komputer (logo|CTA … burger), z 75 px
     dziury w środku. Teraz: tożsamość po lewej, akcje po prawej. */
  .top-cta{margin-left:auto}
  .hero .wrap,.proof .wrap,.py .wrap{grid-template-columns:1fr}
  .grid3,.disc,.pack,.mez,.form,.twocol{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .formbox{padding:26px 20px}
  .pc.featured{order:-1}
  .tl{grid-template-columns:1fr;gap:22px}
  .tl::before{display:none}
  .tstep i{margin-bottom:8px}
  .index .wrap{grid-template-columns:1fr 1fr;gap:20px}
  .index .lab{grid-column:1/-1;border-right:none;border-bottom:1px solid var(--line);padding:0 0 12px}
  .index .stamp{grid-column:1/-1}
  .mrow{grid-template-columns:1fr}
  .mcell{border-right:0;border-bottom:1px solid var(--line)}
  .mrow.head{display:none}
  .mcell.d{background:var(--bg3)}
  footer .wrap{grid-template-columns:1fr 1fr}
  .sec{padding:64px 0}
  .hero{padding:52px 0 44px}
  .subhero{padding:28px 0 48px}

  /* Safari na iOS przybliża całą stronę, gdy klikniesz w pole o czcionce
     mniejszej niż 16 px — użytkownik musi potem odszczypywać widok.
     Na desktopie zostaje 15 px; ta reguła działa wyłącznie na dotyku. */
  .field input[type=text],.field input[type=email],.field input[type=tel],
  .field select,.field textarea{font-size:16px}

  /* Cele dotyku. Norma: 44×44 px (Apple), 48×48 px (Google Material).
     Palec nie ma kursora — element mniejszy niż paznokieć to nie estetyka,
     tylko chybione kliknięcia. Zmieniamy wyłącznie odstępy wewnętrzne,
     więc typografia i kolory zostają nietknięte. */
  .logo{padding:9px 0}              /* 26 → 44 · mieści się w pasku 64 px */
  .burger{padding:13px 16px}        /* 37 → 45 · jedyne wejście do nawigacji */
  .top-cta .btn{padding:13px 18px}  /* 37 → 45 */
  footer a{padding:11px 0}          /* 28 → 44 */
  .card a{padding:11px 0}           /* 22 → 44 · odnośniki „… →" */
  .checks label{padding:12px 14px}  /* 41 → 47 · pola wyboru w formularzach */
}

/* ── baner zgody na telefonie ──
   Przyciski miały min-width:150px, więc przy 360 px nie mieściły się obok
   siebie i łamały na dwa wiersze — baner puchł do 182 px, czyli ~23% ekranu.
   env(safe-area-inset-bottom) odsuwa je znad paska gestów iPhone'a; przy
   elemencie wymaganym prawem przycisk pod paskiem systemowym to realny
   problem, a nie kosmetyka. */
@media(max-width:640px){
  .cookies .wrap{gap:16px;padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px))}
  .cookies-akcje{width:100%}
  .cookies-akcje .btn{flex:1;min-width:0}
}

/* ── telefon ──
   Największy telefon ma 430 px, tablety zaczynają się od ~600 px, więc ten
   próg dotyczy wyłącznie telefonów. Wcześniej strona miała JEDEN próg (920 px):
   telefon 360 px dostawał dokładnie ten sam układ co tablet 900 px. */
@media(max-width:520px){
  /* podpisy i etykiety w górę o ~1 px — 12 px na ekranie trzymanym
     na wyciągnięcie ręki to granica, przy której część ludzi przestaje czytać */
  :root{--fs-12:13px; --fs-13:14px}
  .wrap{padding:0 20px}             /* 304 → 320 px treści przy ekranie 360 */
  .mobile-nav a{padding:14px 20px}  /* równo z nową szerokością treści */
  .py .pill,.scard .tag{font-size:12px}

  /* Podnosimy tekst DO CZYTANIA, nie etykiety kontrolek. Napis na przycisku
     ma stałą długość i musi się zmieścić — większa czcionka rozpycha pasek
     górny (przy 320 px logo + CTA + burger przestawały się mieścić) i łamie
     napisy na banerze zgody na dwa wiersze. */
  .topbar .wrap{gap:12px}
  .top-cta .btn{font-size:12px;padding:13px 14px}
  /* mniejsze marginesy boczne, żeby „Tylko niezbędne" mieściło się w jednym
     wierszu — przy dwóch wierszach przycisk rósł do 60 px i puchł cały baner */
  .cookies-akcje .btn{font-size:12px;padding:13px 10px}

  /* Baner ma 206 px przy 390 px szerokości i przycinał główne przyciski:
     drugie CTA na stronie głównej o 18 px, oba CTA Performance Year o 11 px.
     Ciaśniejsza interlinia (1,45 — nadal w normie czytelności) i mniejsze
     marginesy wewnętrzne oddają ~30 px. ⛔ Czcionki samej zgody NIE
     zmniejszamy — to byłby ciemny wzorzec, a nie optymalizacja. */
  .cookies p{line-height:1.45}
  .cookies .wrap{gap:12px;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px))}

  /* Dwie kontrolki, które umknęły przy pierwszym przejściu.
     „Ustawienia cookies" to nie ozdobnik — RODO wymaga, żeby wycofanie zgody
     było równie łatwe jak jej udzielenie, a 21 px wysokości tego nie spełnia. */
  .crumbs a{display:inline-block;padding:14px 0}  /* 16 → 44 */
  .zmien-zgode{padding:12px 0}                    /* 21 → 45 */
  /* dwie kolumny kroków przy 360 px dawały 156 i 130 px szerokości,
     z czego na tekst zostawało 108 i 82 px — kafelki puchły do 393 px
     wysokości, bo tekst spływał po dwa słowa w wierszu */
  .steps{grid-template-columns:1fr}
  .sec{padding:56px 0}
}

/* ── najwęższe ekrany (iPhone SE 1. generacji) ──
   Przy 320 px w pasku górnym zostaje 13 px luzu, więc logo w docelowym
   rozmiarze (34 px wysokości = 85 px szerokości) wypchnęłoby pasek poza ekran. */
@media(max-width:359px){
  .logo img{height:28px}
}