/* białe studio — wspólne style */
/* --teal   = teal na TLE (przyciski, obramowania). Biały tekst na nim: 4,52:1.
   --teal-text = teal jako TEKST. Ciemniejszy, bo napisy stoją też na tle sekcji
   naprzemiennych (--bg-alt #f3f1ec), gdzie --teal daje tylko 4,18:1 — poniżej
   progu WCAG AA. Ten sam odcień ma już aplikacja rezerwacji jako --sage-text. */
:root{
  --bg:#fbfaf8; --bg-alt:#f3f1ec; --ink:#17150f; --teal:#357f77; --teal-text:#2c6a62; --teal-l:#7ab8af;
  --line:rgba(23,21,15,.12); --muted:rgba(23,21,15,.65); --err:#b4483c;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:Manrope,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--teal-text);text-decoration:none}
a:hover{color:var(--ink)}
img{max-width:100%}
input,select,button,textarea{font-family:Manrope,sans-serif}
h1,h2,h3,p{margin:0}

/* animacje */
@keyframes bsUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes bsBlob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(180px,-110px) scale(1.28)}66%{transform:translate(-150px,80px) scale(.88)}}
@keyframes bsFlowA{0%,100%{transform:translate(-8%,-6%) rotate(-10deg) scale(1)}50%{transform:translate(16%,12%) rotate(12deg) scale(1.3)}}
@keyframes bsFlowB{0%,100%{transform:translate(10%,6%) rotate(8deg) scale(1.15)}50%{transform:translate(-18%,-12%) rotate(-14deg) scale(.9)}}
@keyframes bsFlowC{0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}33%{transform:translate(-14%,10%) rotate(9deg) scale(1.35)}66%{transform:translate(12%,-10%) rotate(-7deg) scale(.92)}}
@keyframes bsLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* nagłówek */
/* Sticky header — matowe szkło. Tło jest ZAWSZE (wcześniej pojawiało się dopiero
   po przewinięciu, więc treść przebijała przez nagłówek). Prefiks -webkit- jest
   konieczny dla Safari, które bez niego w ogóle nie rozmywa tła. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;
  background:var(--ink);color:var(--bg);border-radius:0 0 8px 0;font-size:14px;font-weight:600}
/* Wyciągamy z ekranu pozycją, nie display:none — element ukryty tak drugą metodą
   wypada z kolejności tabulacji i skip-link nie dałby się w ogóle sfokusować. */
.skip-link:focus{left:0}
/* Cel skoku do kotwicy chowałby się pod przyklejonym nagłówkiem (zmierzone:
   97 px na każdej szerokości). Selektor `[id]` zamiast listy konkretnych kotwic —
   działa wyłącznie w momencie przewijania do elementu, więc jest nieszkodliwy,
   a nowa kotwica dostaje zapas sama, bez dopisywania jej tutaj. */
[id]{scroll-margin-top:112px}
.site-head{position:sticky;top:0;z-index:60;
  background:rgba(251,250,248,.72);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid rgba(23,21,15,.06);
  transition:background .3s,box-shadow .3s,border-color .3s}
.site-head.scrolled{background:rgba(251,250,248,.9);
  border-bottom-color:rgba(23,21,15,.1);
  box-shadow:0 8px 30px -18px rgba(23,21,15,.28)}
/* Gdy przeglądarka nie umie rozmyć tła, samo półprzezroczyste tło dałoby
   prześwitującą treść — wtedy krycie prawie pełne. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-head{background:rgba(251,250,248,.97)}
  .site-head.scrolled{background:#fbfaf8}
}
.head-in{max-width:1400px;margin:0 auto;padding:18px clamp(20px,4vw,56px);display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav{display:flex;gap:26px;font-family:'IBM Plex Mono',monospace;font-size:14px;color:rgba(23,21,15,.62)}
.nav a{color:inherit}
.nav-link{position:relative;transition:color .25s}
.nav-link::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.nav-link:hover{color:var(--teal)}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link.is-active{color:var(--ink)}
.nav-link.is-active::after{transform:scaleX(1);background:var(--ink)}
/* prawa strona nagłówka: przełącznik języka + CTA */
.head-side{display:flex;align-items:center;gap:clamp(12px,2vw,20px)}
.lang{display:flex;align-items:center;gap:5px;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.04em}
.lang-on{color:var(--ink);font-weight:600}
.lang-sep{color:rgba(23,21,15,.28)}
/* Padding powiększa pole dotyku do sensownego rozmiaru, ujemny margines cofa
   wpływ na układ — sam napis ma dwa znaki i byłby zbyt małym celem dla palca. */
.lang-off{color:rgba(23,21,15,.5);padding:10px 6px;margin:-10px -6px;transition:color .25s;-webkit-tap-highlight-color:transparent}
.lang-off:hover{color:var(--teal)}
.lang-off:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}
.burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform .3s,opacity .2s}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mob-nav{display:none;position:fixed;inset:0;z-index:55;background:var(--bg);padding:100px clamp(20px,6vw,40px) 40px;flex-direction:column;gap:2px}
.mob-nav.open{display:flex}
.mob-nav a{font-family:'Instrument Serif',serif;font-size:34px;color:var(--ink);padding:14px 0;border-bottom:1px solid rgba(23,21,15,.1)}
/* color MUSI być tu powtórzony: reguła .mob-nav a jest bardziej specyficzna
   niż .btn-teal i bez tego przycisk CTA dostawał ciemny tekst na tealu
   (3,87:1 — poniżej progu WCAG AA). */
.mob-nav .btn-teal{font-family:Manrope,sans-serif;font-size:16px;margin-top:24px;border-bottom:none;text-align:center;color:var(--bg)}

/* layout */
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.wrap-n{max-width:840px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.sec{padding:clamp(64px,9vw,104px) 0}
.sec-alt{background:var(--bg-alt);border-top:1px solid rgba(23,21,15,.07)}
.sec-dark{background:var(--ink);color:var(--bg);position:relative;overflow:hidden}

/* typografia */
.over{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.04em;color:rgba(23,21,15,.55)}
.sec-dark .over{color:rgba(251,250,248,.55)}
.h1{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(42px,7vw,82px);line-height:1.04;letter-spacing:-.015em;margin-top:20px;text-wrap:pretty}
.h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(32px,5.4vw,52px);line-height:1.12;letter-spacing:-.01em;margin-top:20px;text-wrap:pretty}
.h3{font-weight:800;font-size:21px;line-height:1.3}
.em{font-style:italic;color:var(--teal)}
.em.u{position:relative;display:inline-block}
.em.u::after{content:"";position:absolute;left:0;bottom:.09em;width:100%;height:.085em;background:rgba(83,158,149,.35);transform-origin:left;animation:bsLine .9s .7s ease-out both}
.sec-dark .em{color:var(--teal-l)}
.lead{font-size:18px;line-height:1.7;color:rgba(23,21,15,.72);max-width:620px;margin-top:24px;text-wrap:pretty}
.sec-dark .lead{color:rgba(251,250,248,.72)}
.body{font-size:15.5px;line-height:1.7;color:rgba(23,21,15,.72);text-wrap:pretty}
.small{font-size:13.5px;line-height:1.6;color:rgba(23,21,15,.6)}
.mono{font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(23,21,15,.55)}
.num{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--teal-text)}

/* hero podstrony */
.page-hero{position:relative;overflow:hidden;padding:clamp(48px,7vw,88px) 0 clamp(40px,5vw,64px)}
.blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.blobs div{position:absolute;border-radius:50%}
.b1{top:-40%;left:-12%;width:1100px;height:700px;background:radial-gradient(closest-side,rgba(83,158,149,.5),transparent 68%);filter:blur(70px);animation:bsFlowA 9s ease-in-out infinite}
.b2{top:-30%;right:-18%;width:980px;height:660px;background:radial-gradient(closest-side,rgba(219,190,138,.55),transparent 68%);filter:blur(80px);animation:bsFlowB 11s ease-in-out infinite}
.b3{bottom:-60%;left:14%;width:900px;height:620px;background:radial-gradient(closest-side,rgba(122,184,175,.4),transparent 68%);filter:blur(80px);animation:bsFlowC 14s ease-in-out infinite}

/* przyciski */
.btn-teal,.btn-dark,.btn-out{display:inline-block;border-radius:999px;font-weight:700;cursor:pointer;border:none;text-align:center}
.btn-teal{background:var(--teal);color:var(--bg);padding:17px 32px;font-size:16px;transition:transform .25s,box-shadow .25s}
.btn-teal:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(55,131,122,.6);color:var(--bg)}
.btn-dark{background:var(--ink);color:var(--bg);padding:11px 24px;font-size:13.5px;font-weight:600;transition:transform .25s,box-shadow .25s}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(23,21,15,.5);color:var(--bg)}
.btn-out{padding:16px 28px;font-size:16px;font-weight:600;border:1px solid rgba(23,21,15,.25);color:var(--ink);transition:border-color .25s}
.btn-out:hover{border-color:var(--ink);color:var(--ink)}
.sec-dark .btn-out{border-color:rgba(251,250,248,.3);color:var(--bg)}
.sec-dark .btn-out:hover{border-color:var(--bg);color:var(--bg)}
.btns{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:34px}

/* karty i siatki */
.card{background:#fff;border:1px solid rgba(23,21,15,.1);border-radius:16px;padding:34px 32px}
.hv-card{transition:transform .3s,box-shadow .3s}
.hv-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px -24px rgba(23,21,15,.25)}
.hv-lift{transition:transform .3s}
.hv-lift:hover{transform:translateY(-6px)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.grid-2-founder{display:grid;grid-template-columns:1.2fr 1fr;gap:26px;align-items:stretch}
.grid-2-eq{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.grid-2-a{display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:start}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.rows{display:flex;flex-direction:column}
.row{padding:24px 0;border-top:1px solid rgba(23,21,15,.14)}
.rows .row:last-child{border-bottom:1px solid rgba(23,21,15,.14)}
.sec-dark .row{border-top-color:rgba(251,250,248,.14)}
.sec-dark .rows .row:last-child{border-bottom-color:rgba(251,250,248,.14)}
.step{border-top:2px solid rgba(23,21,15,.15);padding-top:20px}
.step.first{border-top-color:var(--teal)}
.ticks{display:flex;flex-direction:column;gap:11px;margin-top:22px;font-size:14.5px;line-height:1.55;color:rgba(23,21,15,.75)}
.ticks>div{display:flex;gap:10px}
.ticks .d{color:var(--teal);flex:none}
.price{font-family:'Instrument Serif',serif;font-size:40px;margin-top:18px;line-height:1}
.price small{font-size:19px;color:rgba(23,21,15,.6)}
.badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);padding:7px 18px;border-radius:999px;background:var(--teal);color:var(--bg);font-family:'IBM Plex Mono',monospace;font-size:11.5px;white-space:nowrap}

/* pasek CTA */
.cta-band{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:64px;padding:32px 44px;border:1px solid rgba(23,21,15,.1);border-radius:999px;background:#fff}
.cta-band .t{font-family:'Instrument Serif',serif;font-size:clamp(21px,3.2vw,27px)}
.band-accent{background:var(--teal);color:var(--bg);border-radius:22px;padding:clamp(30px,4vw,44px);display:grid;grid-template-columns:1.4fr auto;gap:32px;align-items:center}
.band-accent .btn-out{border-color:rgba(251,250,248,.55);color:var(--bg);white-space:nowrap}
.band-accent .btn-out:hover{background:var(--bg);color:var(--teal);border-color:var(--bg)}

/* trust bar */
.trust{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:rgba(23,21,15,.6)}
.trust span::before{content:"· ";color:var(--teal)}
.trust span:first-child::before{content:""}

/* zdjęcie założyciela */
.founder{display:flex;gap:32px;background:#fff;border:1px solid rgba(23,21,15,.1);border-radius:18px;padding:36px}
.founder-img{flex:none;width:220px;height:270px;border-radius:12px;overflow:hidden}
/* Zdjęcie jest portretem 2:3 (600×900), a kontenery są szersze — cover musi
   coś uciąć. object-position przesuwa kadr do góry, żeby zabierał koszulę,
   a nie głowę. Twarz zajmuje pionowo 4,4%–58% wysokości pliku; przy 10%
   okno kadru zaczyna się na ~3% i mieści ją w całości w każdej proporcji
   używanej niżej. Bez tego domyślne 50% wycinało środek, czyli brodę. */
.founder-img img{width:100%;height:100%;object-fit:cover;object-position:50% 10%;display:block}

/* podglądy projektów */
/* Rotator realizacji — slajdy leżą jeden na drugim w JEDNEJ komórce gridu.
   Grid zamiast position:absolute, bo dzięki temu kontener sam bierze wysokość
   najwyższego slajdu i nie trzeba jej wpisywać na sztywno.
   visibility (a nie samo opacity) wyłącza nieaktywny slajd z klikania i z
   czytników ekranu — inaczej ukryta karta przechwytywałaby kliknięcia. */
.shots{display:grid;position:relative}
.shots>.shot{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility .55s}
.shots>.shot.is-on{opacity:1;visibility:visible}
/* Wysokość wynika z proporcji zrzutu, nie ze sztywnej liczby pikseli. Wcześniej
   pudełko miało na stałe 560 px i object-fit:cover — na desktopie wychodziło to
   mniej więcej na proporcję 16:9, ale na telefonie ten sam obraz musiał nadal
   mieć 560 px wysokości, więc przeglądarka rozciągała go na ~1000 px szerokości
   i pokazywała samą środkową część strony. */
.shot img{width:100%;height:auto;display:block}
/* Strzałki leżą NA karcie, nie obok niej: przy 20 px paddingu sekcji nie ma na
   telefonie miejsca, żeby wystawić je poza krawędź. */
.shots-nav{position:absolute;top:50%;z-index:2;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);cursor:pointer;
  background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--ink);display:grid;place-items:center;-webkit-tap-highlight-color:transparent;
  box-shadow:0 12px 30px -14px rgba(23,21,15,.5);transition:background .25s,color .25s}
/* Bez skalowania w :hover — transform trzyma tu wyśrodkowanie w pionie. */
.shots-nav:hover{background:#fff;color:var(--teal)}
.shots-nav:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.shots-nav.prev{left:14px}
.shots-nav.next{right:14px}
.shots-dots{display:flex;justify-content:center;margin-top:18px}
/* Kropka jest mała (9 px), ale klikalny przycisk ma 24 px — sama kropka byłaby
   zbyt małym celem dla palca. Widoczne kółko rysuje ::before. */
.shots-dots button{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.shots-dots button::before{content:"";width:9px;height:9px;border-radius:50%;
  background:rgba(23,21,15,.2);transition:background .25s,transform .25s}
.shots-dots button:hover::before{background:rgba(23,21,15,.42)}
.shots-dots button[aria-selected="true"]::before{background:var(--teal);transform:scale(1.25)}
.shots-dots button:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.shot{display:block;color:inherit;border-radius:14px;border:1px solid var(--line);background:#fff;box-shadow:0 30px 70px -30px rgba(23,21,15,.3);overflow:hidden;transition:box-shadow .35s}
.shot:hover{box-shadow:0 40px 90px -30px rgba(23,21,15,.4)}
.shot .inner{transition:transform .35s ease}
.shot:hover .inner{transform:scale(1.03)}
.shot .bar{display:flex;gap:7px;padding:12px 16px;border-bottom:1px solid rgba(23,21,15,.08)}
.shot .bar i{width:9px;height:9px;border-radius:50%;background:rgba(23,21,15,.15)}
.shot .cap{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-top:1px solid rgba(23,21,15,.08);font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(23,21,15,.6)}

/* FAQ */
.faq{border-bottom:1px solid rgba(23,21,15,.14)}
.faq-item{border-top:1px solid rgba(23,21,15,.14)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;cursor:pointer;transition:color .25s}
.faq-q:hover{color:var(--teal-text)}
.faq-q h3{font-weight:700;font-size:17.5px;line-height:1.4}
.faq-sign{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(23,21,15,.2);display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--teal-text)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{font-size:15.5px;line-height:1.7;color:rgba(23,21,15,.72);padding:0 44px 22px 4px;max-width:680px;text-wrap:pretty}
.faq-group-label{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--teal-text);margin:44px 0 12px;letter-spacing:.04em}

/* formularz */
.form{display:flex;flex-direction:column;gap:18px}
.form label{display:flex;flex-direction:column;gap:8px;font-size:13.5px;font-weight:700}
.f-input{padding:15px 16px;border-radius:12px;border:1px solid rgba(23,21,15,.18);background:#fff;font-size:15px;outline:none;transition:border-color .2s;color:var(--ink)}
.f-input:focus{border-color:var(--teal)}
.f-input.err{border-color:rgba(180,72,60,.7)}
.f-err{display:none;font-size:12.5px;font-weight:600;color:var(--err)}
.f-err.show{display:block}
.f-hp{position:absolute;left:-9999px;width:1px;height:1px}
.form-card{background:var(--bg);color:var(--ink);border-radius:20px;padding:clamp(26px,4vw,42px) clamp(20px,4vw,40px);box-shadow:0 40px 90px -40px rgba(0,0,0,.6)}
.consent{flex-direction:row!important;align-items:flex-start;gap:11px;cursor:pointer;font-weight:400!important}
.consent input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--teal);cursor:pointer}
.consent span{font-size:12.5px;line-height:1.55;color:rgba(23,21,15,.7)}

/* stopka */
.site-foot{background:var(--ink);color:var(--bg);border-top:1px solid rgba(251,250,248,.12)}
.foot-in{max-width:1200px;margin:0 auto;padding:34px clamp(20px,4vw,40px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(251,250,248,.6)}
/* „ustawienia cookies" nie nawiguje — otwiera panel zgód. Rola ma odpowiadać
   zachowaniu (WCAG 4.1.2), a przy okazji przycisk reaguje na Enter ORAZ spację,
   podczas gdy odnośnik tylko na Enter. Klasa zdejmuje domyślny wygląd przycisku;
   selektory obok zrównują go z sąsiednimi odnośnikami stopki. */
.link-like{background:none;border:0;padding:0;font:inherit;color:inherit;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.foot-links a,.foot-links .link-like{color:inherit}
.foot-links a:hover,.foot-links .link-like:hover{color:var(--teal-l)}
.foot-meta{font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(251,250,248,.6)}


/* --- P2-3: cele dotykowe na mobile ---------------------------------------
   Minimum 44×44 px. Powiększamy OBSZAR KLIKNIĘCIA paddingiem i wymiarem
   przycisku, nie rozmiarem pisma ani widoczną grafiką — układ i wygląd
   zostają bez zmian, rośnie tylko to, w co trafia palec. */
@media (max-width:768px){
  .lang-off,.lang-on{display:inline-flex;align-items:center;justify-content:center;
    min-width:44px;min-height:44px;margin:0;padding:0}
  .shots-nav{width:44px;height:44px}
  /* Kropka pozostaje 9 px (rysuje ją ::before) — rośnie sam przycisk. */
  .shots-dots button{width:44px;height:44px}
  /* .link-like ma padding:0 — bez wymienienia go tutaj przycisk straciłby cel
     dotykowy 44 px, który dołożyliśmy w P2-3. Selektor jest bardziej szczegółowy
     od samego .link-like, więc wygrywa. */
  .foot-links a,.foot-meta a,.foot-links .link-like{display:inline-block;padding:14px 0}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (max-width:1100px){
  .grid-3{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
  .grid-2-founder,.grid-2-eq{grid-template-columns:1fr}
  .founder{flex-direction:column}
  /* Było: width:100%;height:260px — proporcja kontenera zmieniała się razem
     z szerokością okna (na ~1000 px robił się pasek 700×260, czyli 2,7:1)
     i cover wycinał z portretu poziomy wycinek. aspect-ratio trzyma stałe
     kadrowanie niezależnie od rozdzielczości, a max-width nie pozwala
     zdjęciu urosnąć na tablecie do pół ekranu. */
  .founder-img{width:100%;height:auto;aspect-ratio:1/1;max-width:320px;margin-inline:auto}
  .grid-2-a{grid-template-columns:1fr;gap:44px}
  .grid-4{grid-template-columns:1fr 1fr;gap:28px}
  .band-accent{grid-template-columns:1fr}
}
@media (max-width:900px){
  /* Chowa się menu i przycisk CTA, ale NIE przełącznik języka — ma być widoczny
     od razu, bez otwierania hamburgera. */
  .nav,.head-side .btn-dark{display:none}
  .burger{display:flex}
  .grid-2{grid-template-columns:1fr}
  .founder{flex-direction:column}
  .founder-img{width:100%;height:auto;aspect-ratio:1/1;max-width:320px;margin-inline:auto}
  .cta-band{flex-direction:column;border-radius:28px;text-align:center;gap:18px}
  .foot-in{flex-direction:column;text-align:center}
}
@media (max-width:620px){
  .grid-4{grid-template-columns:1fr}
  .faq-a p{padding-right:8px}
  /* Rozmiar strzałek NIE jest tu nadpisywany: 44×44 z bloku 768 px to wymóg
     celu dotykowego. Wcześniej stało tu 38 px („kółko zasłania zrzut") i — jako
     reguła późniejsza w pliku — wygrywało, cicho psując dostępność. */
  .shots-nav.prev{left:10px}
  .shots-nav.next{right:10px}
}