/* Warstwa dolozona przy wpieciu pakietu w Grava.
   Pakiet 01-06 zostaje nietkniety, zeby dalo sie go podmienic na nowszy
   (i tak wlasnie zrobiono - wersja z 21.09 przyniosla komplet regul mobilnych).
   Tu trafia TYLKO to, czego pakiet nie robi: obsluga formularza Grava,
   dostepnosc i dwa zabezpieczenia layoutu. Nie duplikuj tu regul z 06. */

/* link pomijajacy nawigacje - widoczny dopiero po sfokusowaniu klawiatura */
.td-skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--lime);color:var(--ink);font-family:"Space Mono",monospace;font-size:13px;font-weight:700;padding:12px 16px;border:3px solid var(--ink);}
  .td-skip:focus{left:8px;top:8px;}
  #reel:focus{outline:none;}

/* widoczny focus na klawiaturze - w pakiecie go nie bylo */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--orange);outline-offset:3px;}
  .bg-orange a:focus-visible,.bg-orange button:focus-visible{outline-color:var(--ink);}

/* Drugi przycisk hero prowadzi do sekcji Social media (bg-cyan), wiec nosi
   jej kolor - tak samo jak pierwszy nosi pomaranczowy kolor sekcji Strony.
   Pakiet dawal tu .btn-ghost (przezroczysty), przez co oba CTA nie mowily,
   dokad prowadza. Cien zostaje z .btn, ghost go kasowal. */
.btn-cyan{background:var(--cyan);color:var(--ink);border-color:var(--ink);box-shadow:7px 7px 0 var(--ink);}

/* Szosta pozycja w menu ("Start") nie miescila sie w pasku miedzy 941 a ~1060px
   - CTA "Porozmawiajmy" wychodzilo poza ekran o kilkanascie px. Pakiet zwezal
   linki dopiero przy 1260px i to za malo. Ponizej 940px .nav i tak znika
   na rzecz burgera (06-responsive), wiec to jedyny zagrozony zakres. */
@media(min-width:941px) and (max-width:1060px){
  .nav a{padding:8px 6px;font-size:11px;letter-spacing:.02em;}
  .nav a::after{left:6px;right:6px;}
}

/* Licznik sekcji "01/09" w prawym dolnym rogu. Tylko mobile - na desktopie te
   role pelnia boczne kropki, a pakiet chowa je dopiero ponizej 760px.
   Siedzi nad dolnym paskiem CTA (.dock ma ok. 60px wysokosci), w pasie, ktory
   sekcje i tak zostawiaja pusty przez .scr{padding-bottom:84px}. */
.td-count{display:none;position:fixed;right:14px;bottom:72px;z-index:45;
  font-family:"Space Mono",monospace;font-size:11px;font-weight:700;
  letter-spacing:.14em;color:var(--ink);pointer-events:none;
  background:rgba(255,255,255,.72);padding:4px 7px;}
  /* sekcje na ciemnym tle - reel.js oznacza je klasa .inv na kropkach */
  .td-count.inv{color:var(--paper);background:rgba(10,10,10,.55);}
@media(max-width:760px){
  .td-count{display:block;}
}

/* Powrot na strone glowna w hero stron ofertowych. Celowo lekki, nie .btn -
   nie moze konkurowac z CTA "Wycen moja strone", ktore stoi nizej w tej samej
   kolumnie. Kolor dziedziczony, wiec dziala i na pomaranczowym, i na cyanowym
   hero bez wariantow. Strzalka jest w tekscie, nie w ::before - czytnik ekranu
   ma przeczytac kierunek razem z trescia linku. */
.td-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;
  font-family:"Space Mono",monospace;font-size:12.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  border:3px solid currentColor;padding:8px 12px;transition:.14s;}
  .td-back:hover{background:var(--ink);color:var(--paper);}

/* Stan aktywny w menu mobilnym. Pakiet stylizuje .act tylko w pasku gornym
   (.nav a.act), a przy burgerze to menu jest jedyna nawigacja - bez tego
   uzytkownik nie widzi, na ktorej stronie ofertowej stoi.
   Pomarancz jak w pasku; menu ma ciemne tlo, wiec kontrast jest zachowany. */
.menu a.act{color:var(--orange);}

/* mail w sekcji kontaktu - bylo inline w index.html */
.td-mail{display:inline-block;margin-top:28px;font-family:"Space Mono",monospace;font-size:15px;background:var(--lime);color:var(--ink);padding:9px 14px;font-weight:700;}

/* komunikaty wtyczki form (sukces / blad walidacji).
   UWAGA na kolor tekstu bledu: biel na --orange to kontrast ok. 3,3:1,
   czern ok. 5,9:1. README pakietu mowi to samo - na pomaranczowym tle
   drobny tekst ma byc czarny. Nie zmieniaj na #fff. */
.td-msg{grid-column:1/-1;font-family:"Space Mono",monospace;font-size:14px;font-weight:700;line-height:1.5;padding:14px 16px;border:3px solid;}
  .td-msg--success{background:var(--lime);color:var(--ink);border-color:var(--ink);}
  .td-msg--error{background:var(--orange);color:var(--ink);border-color:var(--ink);}
  .td-msg p+p{margin-top:6px;}

/* honeypot - bot wypelni, czlowiek nie zobaczy. Nie uzywamy display:none,
   bo czesc botow pomija pola ukryte tym sposobem. */
.td-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* placeholder: w pakiecie #8a8578 na tle --paper daje ok. 3,2:1.
   Formularz nie ma widocznych etykiet, wiec placeholder jest jedyna
   informacja o przeznaczeniu pola - musi byc czytelny. */
::placeholder{color:#6b6559;opacity:1;}

/* zdjecia zespolu po podmianie placeholderow FOTO */
img.avatar{object-fit:cover;}

/* Zabezpieczenie layoutu: w gridzie 1fr znaczy minmax(auto,1fr), wiec kolumna
   nie moze zwezic sie ponizej min-content zawartosci i dlugie slowo rozpycha
   cala siatke poza ekran. Pakiet omija to chowajac karte cennika na mobile,
   ale ten sam blad wracal w tym motywie juz kilka razy - zostawiamy furtke.

   UWAGA: nie dopisuj tu .inner{max-width:100%}. Kasuje to projektowy limit
   1320px z 03-layout.css na KAZDEJ szerokosci - na 1920px kolumna rosla
   do 1792px i zmieniala cala kompozycje. Do ochrony siatki wystarcza min-width. */
.split>*,.cards>*{min-width:0;}

/* ---- MOBILE: sekcje, ktore nie miescily sie w jednym ekranie ----
   Snap zabrania tym sekcjom rosnac ponad okno (min-height rozjezdza punkty
   zatrzymania), wiec zamiast pozwolic im przewijac sie wewnatrz - zbijamy je.
   Na 390x844 kontakt wystawal o 301px, a "Kim jestesmy" o 127px.
   Nie ruszamy rozmiaru pol formularza ponizej 16px: iOS przy mniejszej czcionce
   sam przybliza strone przy wejsciu w pole. Skracamy padding, nie tekst. */
@media(max-width:760px){
  /* --- sekcja kontaktu (na wszystkich trzech stronach) --- */
  #kontakt .split{gap:16px;}
  #kontakt .rule{margin-top:14px;margin-bottom:14px;}
  #kontakt .lead{font-size:14px;line-height:1.35;}
  #kontakt .td-mail{margin-top:14px;font-size:13px;padding:7px 11px;}
  #kontakt form{gap:9px;}
  #kontakt input,#kontakt select,#kontakt textarea{padding:11px 13px;}
  #kontakt textarea{min-height:64px;}
  #kontakt .submit{padding:14px;font-size:13px;}
  /* Stopka w sekcji kontaktu: linki nawigacyjne duplikuja menu pod burgerem,
     wiec na telefonie schodza. Zostaje copyright i mail - jedyne, czego
     nie ma nigdzie indziej. */
  #kontakt .foot{margin-top:12px;padding-top:10px;}
  #kontakt .foot nav{display:none;}

  /* --- sekcja "Kim jestesmy" (tylko strona glowna) --- */
  #kim-jestesmy .cards{margin-top:22px;gap:14px;}
  #kim-jestesmy .card{padding:14px;}
  #kim-jestesmy .card h3{font-size:24px;}
  #kim-jestesmy .avatar{width:52px;height:52px;font-size:10px;}
  #kim-jestesmy .card .who{gap:14px;}
  #kim-jestesmy .card p{font-size:14.5px;line-height:1.35;margin-top:10px;}
  #kim-jestesmy .chips{margin-top:10px;gap:7px;}
  #kim-jestesmy .chip{font-size:10.5px;padding:5px 9px;}

  /* --- "Jak pracujemy" (obie strony ofertowe) ---
     Pakiet ustawia cztery kroki w jednej kolumnie i sekcja wystawala o 283px.
     Samo zbijanie paddingow tego nie ratowalo (max ok. -200px), wiec kroki
     ida w siatke 2x2. Terminy ("dzien 1", "tydzien 1-2") zostaja - to one
     niosa obietnice dwoch tygodni i nie ma czego z nich wycinac. */
  .steps{grid-template-columns:1fr 1fr;}
  .steps .step{padding:14px 12px;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);}
  .steps .step:nth-child(2n){border-right:0;}
  .steps .step:nth-child(n+3){border-bottom:0;}
  .steps .step .sn{font-size:26px;}
  .steps .step h4{font-size:15px;margin:8px 0 6px;}
  .steps .step p{font-size:12.5px;line-height:1.35;}
  .steps .step .when{font-size:9.5px;margin-top:8px;padding:3px 6px;}

  /* --- "Zakres" / pakiety (strona sociali) ---
     Trzy karty cenowe, sekcja wystawala o 321px. Tu siatka nie pomoze
     (nieparzysta liczba kart, a przy dwoch kolumnach tekst rozbija sie
     na wiecej linii niz zyskujemy), wiec zbijamy typografie i odstepy. */
  /* Nazwa pakietu i cena ida w JEDEN wiersz - pionowo ustawione zjadaly
     ok. 35px na karte, a na telefonie to i tak naturalna para "co / za ile".
     Flex z zawijaniem, nie grid: plakietka "najczesciej wybierane" jest tylko
     w jednej karcie, wiec siatka z jawnymi wierszami rozjechalaby pozostale. */
  .plans .plan{padding:9px 14px;flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:10px;}
  .plans .plan .tagbest{flex:0 0 100%;}
  .plans .plan .nm{flex:1 1 auto;font-size:17px;}
  .plans .plan .pr{flex:0 0 auto;margin:0;font-size:21px;}
  .plans .plan .per{flex:0 0 100%;font-size:10px;margin-top:2px;}
  .plans .plan ul{flex:0 0 100%;margin-top:6px;gap:3px;}
  .plans .plan li{font-size:12.5px;line-height:1.25;}
  .plans .plan .tagbest{margin-bottom:7px;}
  /* naglowek sekcji i przypis - same karty nie oddaly jeszcze 132px.
     Przypis o budzecie Meta znika tylko na telefonie: ta sama informacja
     stoi w FAQ dwie sekcje dalej ("Ile kosztuja reklamy?"), wiec nie ginie. */
  #zakres .kick{display:none;}
  #zakres h2.big{font-size:26px;margin-bottom:16px;}
  #zakres .forwho{display:none;}

  /* --- "Co wchodzi w cene" (strona stron WWW) --- */
  .scope{gap:10px;}
  .scope .item{padding:12px 14px;box-shadow:5px 5px 0 var(--ink);}
  .scope .item .ic{font-size:20px;margin-bottom:6px;}
  .scope .item h4{font-size:15px;margin-bottom:6px;}
  .scope .item p{font-size:12.5px;line-height:1.35;}
}

/* Drugi prog: NISKIE telefony (iPhone SE i pokrewne, ok. 667px wysokosci).
   Powyzszych ciec tam nie starcza - kontakt wystawal jeszcze o 179px,
   a "Kim jestesmy" o 145px. Cieciami objete sa tylko rzeczy zdublowane
   gdzie indziej na tym samym ekranie albo drugorzedne. */
@media(max-width:760px) and (max-height:780px){
  /* hero: zabraklo 16px */
  .tag{padding:7px 12px;}
  .cred{margin-top:12px;}
  .actions{margin-top:16px;}

  /* Lead i chip z mailem znikaja: ten sam mail stoi nizej w stopce tej samej
     sekcji, a formularz i tak mowi, co zrobic. Naglowek zostaje. */
  #kontakt .lead{display:none;}
  #kontakt .td-mail{display:none;}
  #kontakt .kick{display:none;}
  #kontakt h2.big{font-size:26px;}
  #kontakt .rule{margin-top:10px;margin-bottom:10px;}
  #kontakt input,#kontakt select,#kontakt textarea{padding:9px 12px;}
  #kontakt textarea{min-height:56px;}
  #kontakt form{gap:7px;}
  #kontakt .submit{padding:11px;}
  #kontakt .foot{margin-top:8px;padding-top:8px;}

  /* Bio skrocone do trzech linii zamiast ukrywania - nadal je widac,
     a wysokosc przestaje zalezec od dlugosci tekstu. Plakietki schodza,
     bo powtarzaja to, co mowi bio. */
  /* powrot na strone glowna zjadal 59px hero na niskich ekranach */
  .td-back{margin-bottom:10px;padding:6px 10px;font-size:11px;}

  /* strony ofertowe: kroki, pakiety i "co w cenie" na niskim ekranie */
  .steps .step{padding:10px;}
  .steps .step .sn{font-size:21px;}
  .steps .step h4{font-size:14px;margin:6px 0 4px;}
  .steps .step p{font-size:11.5px;}
  .steps .step .when{margin-top:6px;}
  #jak-pracujemy .kick{display:none;}
  #jak-pracujemy h2.big{font-size:24px;margin-bottom:16px;}

  #w-cenie .kick{display:none;}
  #w-cenie h2.big{font-size:24px;margin-bottom:16px;}
  #w-cenie .scope{gap:7px;}
  #w-cenie .scope .item{padding:9px 12px;}
  #w-cenie .scope .item p{font-size:11.5px;}
  #w-cenie .forwho{font-size:12px;margin-top:12px;}

  #zakres h2.big{font-size:23px;margin-bottom:12px;}
  #zakres .plans .plan{padding:6px 12px;}
  #zakres .kick{display:none;}
  #zakres .plans .plan .pr{font-size:19px;}
  #zakres .plans .plan li{font-size:11.5px;}
  /* jednostka wskakuje w ten sam wiersz co cena: "od 500 zl miesiecznie"
     zamiast dwoch wierszy - trzy karty, wiec to kolejne ok. 42px */
  #zakres .plans .plan .per{flex:0 0 auto;margin-top:0;}
  #zakres .plans .plan ul{margin-top:4px;gap:2px;}
  #zakres .plans .plan li{line-height:1.2;}
  #zakres .plans .plan .tagbest{margin-bottom:4px;}

  /* lead na niskich ekranach - dotyczy tez hero stron ofertowych,
     gdzie brakowalo ostatnich kilkunastu pikseli */
  .lead{font-size:14px;line-height:1.35;}
  .rule{margin:10px 0;}

  #kim-jestesmy h2.big{font-size:26px;}
  #kim-jestesmy .cards{gap:10px;margin-top:16px;}
  #kim-jestesmy .card{padding:12px;}
  #kim-jestesmy .avatar{width:46px;height:46px;}
  #kim-jestesmy .card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  #kim-jestesmy .chips{display:none;}
}

/* Na telefonie pasek adresu chowa sie przy przewijaniu i zmienia wysokosc okna.
   height:100% liczy sie wtedy od nieaktualnej wartosci i sekcja przestaje
   zgadzac sie z punktem zatrzymania snapa. dvh sledzi te zmiane. */
@supports (height:100dvh){
  @media(max-width:940px){
    html,body{height:100dvh;}
    .reel,.scr{height:100dvh;}
  }
}

/* pakiet wycisza tylko animacje wejscia; tu dochodzi ticker i strzalka,
   ktore chodza w petli i przy reduced-motion sa najbardziej meczace */
@media(prefers-reduced-motion:reduce){
  .strip .tr{animation:none;}
  .hint{animation:none;}
  .reel{scroll-behavior:auto;}
}