/* barnabapyrak.pl — kierunek „Siatka”.
   Cała strona to jeden moduł siatki jak znak: sekcje i kolumny rozdzielone
   liniami 1px atramentu. Na mobile kolumny składają się do jednej —
   linie pionowe znikają, poziome zostają. Mobile first. */

:root{
  --ink:#1C1617;
  --accent:#D9A521;
  --paper:#FAF9F4;
  --gray:#6D685F;
  --line:#E5E1D8;      /* linia wewnątrz kolumny, jaśniejsza od ramki siatki */
  --placeholder:#d8d4cb;
  --base:#0053e2;      /* WYŁĄCZNIE badge certyfikatu, nigdzie indziej */
  --err:#A03418;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 15px/1.6 Archivo,system-ui,sans-serif;
  text-wrap:pretty;
}

a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
a:hover{color:#8a6a10}

/* Pierścień ogniskowania jest dwutonowy z premedytacją: sama żółć ma wobec
   papieru 2,13:1 i nie spełnia wymogu 3:1 dla wskaźnika fokusu (WCAG 2.4.11).
   Żółć wobec atramentu to 7,95:1, atrament wobec papieru 16,9:1 — dopiero
   oba pierścienie razem dają wskaźnik widoczny na każdym tle. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:0;
  box-shadow:0 0 0 4px var(--ink);
}

.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}

/* ---------- rama siatki ---------- */
.rama{
  max-width:960px;
  margin:0 auto;
  border:1px solid var(--ink);
  background:var(--paper);
}
@media(max-width:640px){
  .rama{border-left:0;border-right:0}
}

.pas{border-bottom:1px solid var(--ink)}
.pas:last-child{border-bottom:0}

/* Dwie kolumny na desktopie, jedna na telefonie. Linia pionowa tylko
   wtedy, gdy kolumny faktycznie stoją obok siebie. */
.kol2{display:grid;grid-template-columns:1fr}
.kol2>*+*{border-top:1px solid var(--ink)}
@media(min-width:760px){
  .kol2{grid-template-columns:1fr 1fr}
  .kol2>*+*{border-top:0;border-left:1px solid var(--ink)}
}

.pole{padding:28px 20px}
@media(min-width:760px){.pole{padding:36px 32px}}

/* ---------- nav ---------- */
.nav{display:grid;grid-template-columns:1fr auto;align-items:stretch}
.nav-marka{
  display:flex;align-items:center;gap:12px;
  padding:16px 20px;
  border-right:1px solid var(--ink);
}
@media(min-width:760px){.nav-marka{padding:18px 32px}}
.nav-marka svg{height:32px;display:block;flex:none}
/* Brandbook v2: nazwa w logotypie ZAWSZE wersalikami, Archivo 700,
   letter-spacing 0.03em. Wersaliki bez rozstrzelenia zbijają się w plamę —
   stąd dodatnie światło, odwrotnie niż w nagłówkach treści (-0.01em). */
.nav-nazwa{font:700 16px/1 Archivo,sans-serif;letter-spacing:.03em;white-space:nowrap}
/* Deskryptor z v2 — Plex Mono, pod nazwą. Na wąskich ekranach znika,
   żeby nie łamać nazwy na dwie linie (zakazane w nagłówkach). */
.nav-deskryptor{
  display:none;
  font:400 10px/1 "IBM Plex Mono",monospace;
  letter-spacing:.12em;color:var(--gray);text-transform:uppercase;
  margin-top:5px;
}
@media(min-width:560px){
  .nav-marka{flex-wrap:wrap}
  .nav-deskryptor{display:block;flex-basis:100%;margin-left:44px}
}
.nav-cta{
  display:flex;align-items:center;
  padding:0 18px;
  background:var(--ink);color:#fff;
  font:600 14px/1 Archivo,sans-serif;
  text-decoration:none;
  white-space:nowrap;
}
@media(min-width:760px){.nav-cta{padding:0 32px}}
.nav-cta:hover{background:#000;color:#fff}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1fr}
@media(min-width:860px){.hero{grid-template-columns:1fr 240px}}
.hero-tekst{padding:44px 20px 40px}
@media(min-width:760px){.hero-tekst{padding:64px 32px 56px}}
h1{
  font:700 clamp(30px,7vw,46px)/1.1 Archivo,sans-serif;
  letter-spacing:-0.01em;
  margin:0 0 18px;
}
.hero-pod{
  font-size:17px;color:var(--gray);
  margin:0 0 28px;max-width:52ch;
}
.hero-akcje{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
/* Znak w prawej kolumnie hero to dekoracja — na telefonie znika. */
.hero-znak{
  display:none;
  border-left:1px solid var(--ink);
  align-items:center;justify-content:center;padding:32px;
}
@media(min-width:860px){.hero-znak{display:flex}}
.hero-znak svg{width:140px;display:block}

/* ---------- przyciski ---------- */
.btn{
  display:inline-block;
  font:600 16px/1 Archivo,sans-serif;
  color:#fff;background:var(--ink);
  border:2px solid var(--ink);
  padding:15px 28px;
  text-decoration:none;cursor:pointer;
}
.btn:hover{background:#000;color:#fff}
.btn:disabled{opacity:.6;cursor:wait}
.btn-maly{font-size:15px;padding:14px 24px}

/* ---------- nagłówki sekcji ---------- */
h2{
  font:600 13px/1 Archivo,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);
  margin:0 0 20px;
}

/* ---------- usługi ---------- */
.usluga{display:flex;flex-direction:column;gap:16px}
.usluga-glowa{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.usluga-nazwa{font:600 24px/1 Archivo,sans-serif}
.usluga-nr{font:400 11px/1 "IBM Plex Mono",monospace;color:var(--gray)}
.usluga-opis{font-size:15px}
.usluga-szczegoly{font-size:13px;line-height:1.75;color:var(--gray)}
.usluga-szczegoly strong{color:var(--ink)}
.usluga-stopka{
  margin-top:auto;
  border-top:1px solid var(--line);
  padding-top:14px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font:400 11px/1.5 "IBM Plex Mono",monospace;color:var(--gray);
}
.badge-base{
  font:700 12px/1 Archivo,sans-serif;
  color:#fff;background:var(--base);
  padding:5px 8px;flex:none;
}

/* ---------- słoń ---------- */
.slon{
  padding:36px 20px;
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;
}
@media(min-width:760px){.slon{padding:44px 32px;gap:28px}}
.slupki{display:flex;gap:5px;align-items:flex-end;flex:none}
.slupki i{display:block;width:12px;background:var(--ink)}
.slupki i:nth-child(1){height:36px}
.slupki i:nth-child(2){height:26px}
.slupki i:nth-child(3){height:18px;background:var(--accent)}
.slupki i:nth-child(4){height:12px}
.slon h3{font:600 clamp(20px,4vw,26px)/1.2 Archivo,sans-serif;margin:0 0 8px}
.slon p{font-size:15px;line-height:1.55;color:var(--gray);margin:0;max-width:62ch}

/* ---------- listy dowodów ---------- */
.projekty{display:flex;flex-direction:column;font-size:14px;line-height:1.5}
.projekty div{padding:10px 0;border-bottom:1px solid var(--line)}
.projekty div:last-child{border-bottom:0}

.osoby{display:flex;flex-direction:column;gap:16px}
.osoba{display:flex;align-items:center;gap:14px}
.osoba img{width:52px;height:52px;object-fit:cover;flex:none;display:block}
.osoba-imie{font:600 14px/1.3 Archivo,sans-serif}
.osoba-rola{font:400 12px/1.3 Archivo,sans-serif;color:var(--gray)}

/* ---------- newsletter ---------- */
.newsletter{background:#fff;padding:24px 20px}
@media(min-width:760px){.newsletter{padding:30px 32px}}
.lockup{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.lockup svg{height:44px;display:block;flex:none}
.lockup-nazwa{font:700 22px/1 Archivo,sans-serif;letter-spacing:.03em}
.lockup-pod{font:400 11px/1 "IBM Plex Mono",monospace;color:var(--gray);margin-top:6px}
.newsletter-wiersz{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:620px){.newsletter-wiersz{grid-template-columns:1fr auto}}
@media(min-width:900px){
  .newsletter-glowa{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center}
  .lockup{margin-bottom:0}
}

/* ---------- pola formularzy ---------- */
input[type=email],input[type=text],textarea{
  width:100%;
  font:400 14px/1.3 Archivo,sans-serif;
  padding:12px 14px;
  border:2px solid var(--ink);
  border-radius:0;
  background:#fff;color:var(--ink);
  min-width:0;
}
textarea{height:96px;resize:vertical;line-height:1.5}
::placeholder{color:var(--gray);opacity:1}

.zgoda{
  display:flex;gap:9px;align-items:flex-start;
  font:400 12px/1.5 Archivo,sans-serif;color:var(--gray);
}
.zgoda input{
  width:16px;height:16px;flex:none;margin:2px 0 0;
  accent-color:var(--ink);
}

.komunikat{margin-top:12px;font-size:13px;display:none}
.komunikat.blad{color:var(--err);display:block}
.komunikat.ok{
  display:block;background:var(--paper);
  border:2px solid var(--ink);padding:14px 16px;font-size:14px;
}
.komunikat.ok strong{display:block;margin-bottom:4px}

/* Honeypot: poza ekranem, nie display:none — boty omijają ukryte na sztywno. */
.pulapka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- o mnie ---------- */
.o-mnie{display:grid;grid-template-columns:1fr}
@media(min-width:760px){.o-mnie{grid-template-columns:280px 1fr}}
.o-mnie-foto{padding:20px;display:flex;flex-direction:column;gap:10px}
@media(min-width:760px){
  .o-mnie-foto{padding:32px;border-right:1px solid var(--ink)}
}
.o-mnie-foto img{width:100%;height:auto;display:block}
.o-mnie-podpis{font:700 11px/1 Archivo,sans-serif;letter-spacing:.03em;color:var(--ink)}
.o-mnie-tekst p{font-size:15px;line-height:1.7;margin:0;max-width:58ch}

/* ---------- kontakt ---------- */
.kontakt{display:grid;grid-template-columns:1fr}
@media(min-width:760px){.kontakt{grid-template-columns:1fr 280px}}
.kontakt-form{padding:28px 20px}
@media(min-width:760px){.kontakt-form{padding:36px 32px;border-right:1px solid var(--ink)}}
.kontakt-pola{display:flex;flex-direction:column;gap:10px}
.kontakt-para{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:520px){.kontakt-para{grid-template-columns:1fr 1fr}}
.kontakt-bok{
  padding:28px 20px;display:flex;flex-direction:column;gap:12px;
  border-top:1px solid var(--ink);
}
@media(min-width:760px){.kontakt-bok{padding:36px 32px;border-top:0}}
.kontakt-bok .pytanie{font-size:13px;color:var(--gray)}
.kontakt-telefon{font:500 15px/1 "IBM Plex Mono",monospace;color:var(--ink);text-decoration:none}

/* ---------- stopka ---------- */
.stopka{
  padding:20px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font:400 12px/1.6 "IBM Plex Mono",monospace;color:var(--gray);
}
@media(min-width:760px){.stopka{padding:22px 32px}}
.stopka a{color:var(--gray)}
.stopka svg{height:20px;display:block;flex:none}

/* ---------- podstrony (polityka prywatności) ---------- */
.tresc h1{font-size:clamp(24px,5vw,32px)}
.tresc h2{
  font:600 18px/1.3 Archivo,sans-serif;
  letter-spacing:0;text-transform:none;color:var(--ink);
  margin:32px 0 10px;
}
.tresc p,.tresc li{font-size:15px}
.tresc table{border-collapse:collapse;font-size:13px;width:100%}
.tresc th,.tresc td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}

/* ---------- klienci wdrożeń base ---------- */
.klienci-rzad{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;
  background:var(--line);          /* szczeliny udają linie siatki */
  border:1px solid var(--line);
}
.klient{
  background:#fff;
  padding:20px 16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  text-align:center;min-height:112px;
}
.klient img{
  max-width:100%;max-height:34px;width:auto;height:auto;display:block;
  /* Cudze znaki sprowadzone do wspólnego mianownika, żeby nie rozbijały
     stonowanej palety strony. Pełny kolor wraca po najechaniu. */
  filter:grayscale(1);opacity:.75;
  transition:filter .25s ease,opacity .25s ease;
}
.klient:hover img{filter:none;opacity:1}
.klient span{
  font:400 11px/1.3 "IBM Plex Mono",monospace;
  color:var(--gray);
}

/* ---------- znak jako zabawka ---------- */
.znak-zabawka{
  background:none;border:0;padding:0;cursor:pointer;
  display:block;line-height:0;
}
.znak-zabawka svg{display:block}
.znak-zabawka rect{
  transform-box:fill-box;
  transform-origin:center;
}
/* Każda animacja rusza klockami po kolei — opóźnienie ustawia JS
   zmienną --i, żeby układ „przebiegał” przez siatkę, a nie skakał naraz. */
.gra-fala rect{animation:fala .9s ease both;animation-delay:calc(var(--i)*60ms)}
@keyframes fala{
  0%{transform:translateY(0)}
  40%{transform:translateY(-9px)}
  100%{transform:translateY(0)}
}
.gra-obrot rect{animation:obrot 1s cubic-bezier(.5,0,.2,1) both;animation-delay:calc(var(--i)*45ms)}
@keyframes obrot{
  0%{transform:rotate(0) scale(1)}
  50%{transform:rotate(90deg) scale(.55)}
  100%{transform:rotate(180deg) scale(1)}
}
.gra-rozsyp rect{animation:rozsyp 1.1s cubic-bezier(.34,1.3,.5,1) both;animation-delay:calc(var(--i)*35ms)}
@keyframes rozsyp{
  0%{transform:translate(0,0)}
  45%{transform:translate(var(--dx),var(--dy)) rotate(25deg)}
  100%{transform:translate(0,0) rotate(0)}
}
.gra-puls rect{animation:puls .8s ease both;animation-delay:calc(var(--i)*55ms)}
@keyframes puls{
  0%,100%{transform:scale(1)}
  45%{transform:scale(.25)}
}
.gra-domino rect{animation:domino 1s ease both;animation-delay:calc(var(--i)*70ms)}
@keyframes domino{
  0%{transform:scaleY(1)}
  35%{transform:scaleY(.15)}
  70%{transform:scaleY(1.15)}
  100%{transform:scaleY(1)}
}

/* Kto prosi o mniej ruchu, dostaje mniej ruchu. */
@media(prefers-reduced-motion:reduce){
  .znak-zabawka rect{animation:none !important}
  .klient img{transition:none}
}

/* ---------- logotypy przy zrealizowanych projektach ----------
   Cudze znaki (IKEA, Microsoft) w szarości i w kontekście „gdzie pracowałem”,
   a nie „moi partnerzy”. Pełny kolor dopiero po najechaniu — ta sama zasada
   co przy klientach, żeby cztery obce palety nie rozbijały strony. */
.projekt{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.projekt:last-child{border-bottom:0}
.projekt img{
  width:34px;height:18px;object-fit:contain;object-position:left center;flex:none;
  filter:grayscale(1);opacity:.6;transition:filter .25s ease,opacity .25s ease;
}
.projekt:hover img{filter:none;opacity:1}
.projekt-bez-logo{width:34px;flex:none}
@media(prefers-reduced-motion:reduce){.projekt img{transition:none}}

/* ---------- pasek zgody na statystyki ----------
   Pojawia się tylko przy pierwszej wizycie. Sam baner nie zakłada cookies —
   wybór ląduje w localStorage. Do czasu kliknięcia GA4 ma odmówioną zgodę
   i nie zapisuje niczego. */
#zgoda{
  position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:300;
  max-width:min(620px,94vw);
  background:#fff;border:2px solid var(--ink);
  padding:16px 18px;
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  font-size:13px;line-height:1.5;color:var(--gray);
}
#zgoda[hidden]{display:none}
#zgoda p{margin:0;flex:1;min-width:220px}
.zgoda-akcje{display:flex;gap:8px;flex:none}
#zgoda button{
  font:600 13px/1 Archivo,sans-serif;
  padding:9px 14px;border:2px solid var(--ink);
  background:#fff;color:var(--ink);cursor:pointer;
}
#zgoda button.tak{background:var(--ink);color:#fff}
#zgoda button:hover{background:var(--ink);color:#fff}

/* Logo partnera w stopce karty usługi — ta sama zasada co przy klientach:
   szarość, pełny kolor po najechaniu, żeby obca paleta nie rozbijała karty. */
.logo-partner{display:inline-flex;flex:none;text-decoration:none;line-height:0}
.logo-partner img{
  height:18px;width:auto;display:block;
  filter:grayscale(1);opacity:.7;transition:filter .25s ease,opacity .25s ease;
}
.logo-partner:hover img{filter:none;opacity:1}
@media(prefers-reduced-motion:reduce){.logo-partner img{transition:none}}