/* Studio Banana – pod agencje
   Odwzorowanie strony „Final UI” z pliku Figma (desktop 1440 / mobile 400). */

:root {
  --black: #000;
  --white: #fff;
  --yellow: #ffcf32;
  --gray-bg: #f8f8f8;
  --line: #ebebeb;
  --text-muted: #6b6b6b;
  --text-author: #6c6a6a;
  --text-eyebrow: #747474;
  --text-pill: #5e5e5e;
  --ink: #0e0e0e;

  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-input: "Instrument Sans", var(--font);

  /* wcięcie nagłówków: 219px na desktopie, 40px na mobile */
  --indent: 40px;
  --nav-h: clamp(42px, 2.92vw, 60px);

  /* hero + nawigacja + logotypy = 100svh */
  --vh: 1vh;
  /* boczny margines wszystkich sekcji: 20px przy 1440 i przy 400 */
  --edge: clamp(20px, 1.389vw, 40px);
  /* szerokość kontenera tylko do obliczeń (bez paska przewijania) */
  --wrap: calc(100vw - 2 * var(--edge));
  --logos-h: clamp(84px, calc(13 * var(--vh)), 135px);
  --hero-h: calc(100 * var(--vh) - var(--nav-h) - var(--logos-h));
}

@supports (height: 1svh) {
  :root { --vh: 1svh; }
}

@media (min-width: 1024px) {
  :root { --logos-h: clamp(56px, calc(6.6 * var(--vh)), 88px); }
}

@media (min-width: 768px) {
  :root { --indent: clamp(40px, 15.2vw, 219px); }
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  /* bez „zakotwiczenia” przewijania – po dołożeniu opinii przeglądarka nie
     przeskakuje sama, tylko zostaje tam, gdzie ustawi ją main.js */
  overflow-anchor: none;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 8px; top: -100px; z-index: 100;
  background: var(--yellow); color: var(--black); padding: 8px 12px;
}
.skip-link:focus { top: 8px; }

.container {
  width: 100%;
  margin-inline: auto;
}

/* ---------- Typografia wspólna ---------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
}

.h2 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  padding-left: var(--indent);
}
.h2 > span { display: block; width: fit-content; }
.h2--tight { letter-spacing: -0.05em; }

.highlight { background: var(--yellow); }

/* Żółte wypełnienie sterowane scrollem (--fill: 0–1 ustawia main.js).
   Bez JS / przy ograniczonym ruchu wypełnienie jest pełne. */
.highlight--scroll { position: relative; isolation: isolate; background: none; }
.highlight--scroll::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--yellow);
  transform-origin: left center;
}
.scroll-fx .highlight--scroll::after { transform: scaleX(var(--fill, 0)); }
.highlight--dark { background: var(--black); color: var(--white); }

.section-head { display: flex; flex-direction: column; gap: 12px; }

/* CTA: linia tylko pod tekstem.
   .link-cta--swap: na hover strzałka z prawej odjeżdża w prawo i znika,
   a nowa wjeżdża z lewej – przed tekst; linia wydłuża się pod nią,
   wypełnienie strzałki zmienia się na żółte. Po zjechaniu ruch w tę samą
   stronę wraca do stanu wyjściowego. Klasy .is-hover / .is-leave ustawia main.js. */
.link-cta {
  --gap: 8px;
  --icon: 16px;
  --line: 2px;
  --slot: calc(var(--icon) + var(--gap));
  --ease-cta: cubic-bezier(.65, 0, .35, 1);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--gap);
  padding-bottom: 6px;
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  text-decoration: none;
}
.link-cta::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  right: var(--slot);
  height: var(--line);
  background: currentColor;
  transition: right .4s var(--ease-cta);
}
.link-cta__icon {
  flex: none;
  display: block;
  width: var(--icon);
  height: var(--icon);
  overflow: hidden;
}
.link-cta__icon svg { width: var(--icon); height: var(--icon); max-width: none; flex: none; }

/* wariant z przekładaną strzałką: odstępy jako szerokość slotów, nie gap */
.link-cta--swap { gap: 0; }
.link-cta--swap .link-cta__icon {
  display: flex;
  height: var(--icon);
  transition: width .4s var(--ease-cta);
}
.link-cta--swap .link-cta__icon--start { width: 0; justify-content: flex-start; }
.link-cta--swap .link-cta__icon--end { width: var(--slot); justify-content: flex-end; }
.link-cta--swap .link-cta__icon--start svg { transform: translateX(-110%); }

.link-cta--swap.is-hover { --arrow-fill: var(--yellow); }
.link-cta--swap.is-hover::after { right: 0; }
.link-cta--swap.is-hover .link-cta__icon--start { width: var(--slot); }
.link-cta--swap.is-hover .link-cta__icon--end { width: 0; }
.link-cta--swap.is-hover .link-cta__icon--start svg { transform: none; animation: arrow-in-left .38s var(--ease-cta) .14s both; }
.link-cta--swap.is-hover .link-cta__icon--end svg { transform: translateX(110%); animation: arrow-out-right .3s var(--ease-cta) both; }
.link-cta--swap.is-leave .link-cta__icon--start svg { animation: arrow-out-right .3s var(--ease-cta) both; }
.link-cta--swap.is-leave .link-cta__icon--end svg { animation: arrow-in-left .38s var(--ease-cta) .14s both; }

@keyframes arrow-out-right { from { transform: none; } to { transform: translateX(110%); } }
@keyframes arrow-in-left   { from { transform: translateX(-110%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .link-cta--swap .link-cta__icon, .link-cta::after { transition: none; }
  .link-cta--swap .link-cta__icon svg { animation: none !important; }
}

.section { padding: 40px var(--edge); background: var(--white); }

/* Hero zostaje w miejscu, a pasek logotypów i kolejne sekcje wjeżdżają
   na nie (każda ma własne tło i leży wyżej). Treść hero przygasa do 30%
   (--hero-fade ustawia main.js). */
.hero {
  position: sticky;
  top: var(--nav-h);
  z-index: 0;
}
.hero__inner { opacity: var(--hero-fade, 1); }
main > section:not(.hero), .footer { position: relative; z-index: 1; }
/* na niskich ekranach (telefon poziomo) hero bywa wyższe niż ekran – bez przypinania */
@media (max-height: 500px) { .hero { position: relative; } }

@media (min-width: 768px) {
  .eyebrow { font-size: 14px; padding-left: var(--indent); }
  .services .eyebrow { font-size: 14px; }
  .h2 { font-size: clamp(36px, 3.9vw, 56px); }
}

/* ---------- Navbar ---------- */

.navbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: clamp(10px, 0.83vw, 16px);
  height: var(--nav-h);
  padding: 0 var(--edge);
  background: var(--black);
  color: var(--white);
}
.navbar__logo img { width: auto; height: clamp(18px, 1.53vw, 28px); }
.navbar__nav { display: none; gap: clamp(6px, 0.56vw, 12px); }
.navbar__nav a, .navbar__cta {
  font-size: clamp(14px, 1.11vw, 20px); font-weight: 500; line-height: 1;
  letter-spacing: -0.04em;
  text-decoration: none;
}
.navbar__cta { --icon: 0.625em; --gap: 0.5em; --line: 1px; display: none; padding: 0.2em 0 0.25em; }

/* Linki nawigacji: podkreślenie rośnie od strony, z której wjeżdża kursor,
   i chowa się w stronę, w którą kursor wyjeżdża (--origin ustawia JS) */
.navbar__nav a {
  position: relative;
  padding: 0.2em 0 0.25em;
}
.navbar__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: var(--origin, left) center;
  transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}
.navbar__nav a.is-hovered::after,
.navbar__nav a:focus-visible::after { transform: scaleX(1); }
.navbar__burger { margin-left: auto; display: grid; place-items: center; width: 40px; height: 40px; margin-right: -8px; }

@media (min-width: 900px) {
  .navbar__nav, .navbar__cta { display: flex; }
  .navbar__burger { display: none; }
}

/* ---------- Hero ----------
   Nawigacja + hero + pasek logotypów = dokładnie 100svh.
   Hero dostaje to, co zostaje: --hero-h. Kontenery hero i paska: 90vw. */

.hero {
  display: flex;
  flex-direction: column;
  min-height: var(--hero-h);
  padding-block: clamp(14px, calc(4 * var(--vh)), 40px);
}
.hero__inner {
  position: relative;
  flex: 1;
  margin-inline: var(--edge);
  display: flex; flex-direction: column;
  gap: clamp(10px, calc(2.2 * var(--vh)), 20px);
}

.hero__pills {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(9px, 2.5vw, 12px);
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-pill);
  display: flex; flex-direction: column; gap: 0.2em;
}

.hero__title {
  /* mobile: rośnie z szerokością, ale hamuje przy niskich ekranach */
  font-size: clamp(32px, min(10.5vw, calc(5.2 * var(--vh))), 84px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -0.05em;
  display: flex; flex-direction: column;
}
.hero__line { display: block; white-space: nowrap; }
.hero__line--indent { padding-left: 1.43em; }
.hero__line--accent { align-self: flex-end; margin-top: 0.48em; }

.highlight--marker {
  position: relative; display: inline-block;
  isolation: isolate;
  background: none;
}
/* kwadrat w rogu */
.highlight--marker::before {
  content: ""; position: absolute; z-index: 1;
  left: -0.095em; top: -0.095em; width: 0.19em; height: 0.19em;
  background: var(--black);
}
/* żółte wypełnienie jako osobna warstwa – da się je animować */
.highlight--marker::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--yellow);
  transform-origin: left center;
}

/* maska do wjazdu słów od dołu; zapas na ogonki liter (g, j, y) */
.mask {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.mask__in { display: inline-block; }

/* Zdjęcie: jedna fotografia w dwóch warstwach o identycznym kadrze.
   Warstwa spadu (20% krycia) wypełnia różową ramkę, warstwa właściwa jest
   przycięta do niebieskiej ramki – spad jest więc dokładnym przedłużeniem kadru.
   --inset: odległość niebieskiej ramki od krawędzi (25px przy 1440 / 400). */
.photo-comp {
  --inset: clamp(14px, 6.25vw, 32px);
  --mark-gap: calc(var(--inset) * 0.2);
  position: relative;
  flex: 1 1 0;
  min-height: clamp(110px, calc(16 * var(--vh)), 240px);
  overflow: hidden;
}
.photo-comp__frame {
  position: absolute; inset: 0;
  border: 2px solid #ff87ff;
}
.photo-comp__bleed,
.photo-comp__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.photo-comp__bleed { opacity: .2; }
.photo-comp__img { clip-path: inset(var(--inset)); }
.photo-comp__crop {
  position: absolute; inset: var(--inset);
  border: 2px solid #51b1ff;
}
/* znaczniki cięcia w spadzie, w linii niebieskiej ramki */
.photo-comp__mark { position: absolute; width: var(--inset); height: var(--inset); }
.photo-comp__mark::before,
.photo-comp__mark::after { content: ""; position: absolute; background: var(--black); }
.photo-comp__mark::before { height: 1px; width: calc(var(--inset) - var(--mark-gap)); top: calc(var(--inset) + var(--mark-gap)); }
.photo-comp__mark::after  { width: 1px; height: calc(var(--inset) - var(--mark-gap)); left: calc(var(--inset) + var(--mark-gap)); }
.photo-comp__mark--tl { left: 0; top: 0; }
.photo-comp__mark--tr { right: 0; top: 0; transform: scaleX(-1); }
.photo-comp__mark--bl { left: 0; bottom: 0; transform: scaleY(-1); }
.photo-comp__mark--br { right: 0; bottom: 0; transform: scale(-1); }
.photo-comp__mark::before { left: 0; }
.photo-comp__mark::after  { top: 0; }

.hero__content {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: clamp(10px, calc(2 * var(--vh)), 20px);
}
.hero__copy {
  align-self: stretch;
  font-size: clamp(15px, min(4.2vw, calc(2.1 * var(--vh))), 22px);
  line-height: 1.2;
}
.hero .link-cta {
  --icon: 0.5em; --gap: 0.25em; --line: max(1px, 0.0625em);
  padding-bottom: 0.19em;
  font-size: clamp(24px, min(8vw, calc(3.9 * var(--vh))), 40px);
}

/* Desktop / poziome ekrany: kompozycja z Figmy (1400 × 808 w kontenerze).
   --u = 1px projektu; dobierany tak, żeby kompozycja zmieściła się
   jednocześnie w 90vw i w wysokości hero. Wszystkie wymiary to N × --u. */
@media (min-width: 768px) and (min-aspect-ratio: 1/1) {
  .hero {
    --u: clamp(0.3px, min(calc(var(--wrap) / 1400), calc(var(--hero-h) / 928)), 1.6px);
    justify-content: center;
    padding-block: clamp(18px, calc(60 * var(--u)), 96px);
  }
  .hero__inner { flex: none; display: block; }

  .hero__pills {
    position: absolute; right: 0; top: calc(1 * var(--u));
    /* 270px przy 12px – kolumna stałej szerokości, linie: lewo / środek / prawo */
    width: 22.5em;
    display: grid; justify-items: start; gap: 0.33em;
    font-size: clamp(9px, calc(12 * var(--u)), 19px);
  }
  .hero__pills li:nth-child(2) { justify-self: center; }
  .hero__pills li:nth-child(3) { justify-self: end; }

  .hero__title {
    position: relative; z-index: 1;
    font-size: clamp(30px, calc(100 * var(--u)), 160px);
  }
  .hero__line--indent { padding-left: 2.19em; }
  .hero__line--accent { margin-top: 1.64em; }

  .photo-comp {
    --inset: clamp(10px, calc(32 * var(--u)), 52px);
    position: absolute;
    left: calc(54 * var(--u));
    top: calc(198 * var(--u));
    width: clamp(141px, calc(470 * var(--u)), 752px);
    height: clamp(177px, calc(590 * var(--u)), 944px);
    min-height: 0;
  }
  .photo-comp__bleed, .photo-comp__img { object-position: 50% 50%; }

  .hero__content {
    flex-direction: row; align-items: flex-start; justify-content: space-between;
    padding-top: calc(40 * var(--u));
  }
  .hero__copy {
    align-self: auto;
    font-size: clamp(15px, calc(24 * var(--u)), 38px);
    padding-top: calc(128 * var(--u));
    padding-left: calc(620 * var(--u));
    /* 594px przy 24px – szerokość w em trzyma łamanie wierszy jak w Figmie */
    max-width: calc(620 * var(--u) + 25em);
  }
  .hero .link-cta { flex: none; font-size: clamp(20px, calc(32 * var(--u)), 51px); }
}

/* ---------- Animacja startowa hero ----------
   html.intro  – elementy w stanie początkowym (ustawiane w <head>)
   html.intro-play – start osi czasu (po załadowaniu fontów, main.js)
   Cała oś czasu w jednym miejscu: */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-nav: 0ms;
  --t-nav-item: 280ms;   /* logo; kolejne elementy co 70ms */
  --t-pills: 520ms;
  --t-w1: 700ms;         /* Projektowanie */
  --t-w2: 880ms;         /* graficzne */
  --t-photo: 1000ms;     /* kadr w niebieskiej ramce */
  --t-w3: 1850ms;        /* zwymiarowane + wyjazd spadu */
  --t-marks: 2750ms;     /* znaczniki cięcia */
  --t-w4: 3000ms;        /* pod agencje */
  --t-fill: 3300ms;
  --t-square: 3650ms;
  --t-cta: 3850ms;
  --t-type: 4250ms;      /* pisanie tekstu (main.js); po nim wjeżdża pasek logotypów */
}

/* stan początkowy */
.intro .navbar,
.intro .navbar__logo, .intro .navbar__nav a, .intro .navbar__cta, .intro .navbar__burger,
.intro .hero__pills li,
.intro .hero .link-cta,
.intro .logos { opacity: 0; }
.intro .mask__in { transform: translateY(135%); }
.intro .photo-comp__img,
.intro .photo-comp__crop,
.intro .photo-comp__bleed,
.intro .photo-comp__frame,
.intro .photo-comp__mark { visibility: hidden; }
.intro .highlight--marker::after,
.intro .highlight--marker::before { transform: scale(0); }
.intro .hero__copy { visibility: hidden; }

/* odtwarzanie */
.intro-play .navbar { animation: slide-down .7s var(--ease-out) var(--t-nav) both; }
.intro-play .navbar__logo,
.intro-play .navbar__nav a,
.intro-play .navbar__cta,
.intro-play .navbar__burger { animation: drop-in .6s var(--ease-out) calc(var(--t-nav-item) + var(--i, 0) * 70ms) both; }
.navbar__nav a:nth-child(1) { --i: 1; }
.navbar__nav a:nth-child(2) { --i: 2; }
.navbar__nav a:nth-child(3) { --i: 3; }
.navbar__nav a:nth-child(4) { --i: 4; }
.navbar__cta, .navbar__burger { --i: 5; }

.intro-play .hero__pills li { animation: fade-up .6s var(--ease-out) calc(var(--t-pills) + var(--i, 0) * 90ms) both; }
.hero__pills li:nth-child(2) { --i: 1; }
.hero__pills li:nth-child(3) { --i: 2; }

.intro-play .mask__in { animation: word-up .9s var(--ease-out) var(--d) both; }
.hero__line:nth-child(1) .mask__in { --d: var(--t-w1); }
.hero__line:nth-child(2) .mask__in { --d: var(--t-w2); }
.hero__line:nth-child(3) .mask__in { --d: var(--t-w3); }
.hero__line--accent .mask__in { --d: var(--t-w4); }

.intro-play .highlight--marker::after { animation: fill-x .6s var(--ease-io) var(--t-fill) both; }
.intro-play .highlight--marker::before { animation: pop .5s cubic-bezier(.34, 1.56, .64, 1) var(--t-square) both; }

/* zdjęcie: 1) kadr w niebieskiej ramce, 2) spad wyjeżdża spod kadru
   w pełnym kryciu i przygasa do 20%, 3) znaczniki cięcia */
.intro-play .photo-comp__img,
.intro-play .photo-comp__crop { animation: wipe-down .85s var(--ease-io) var(--t-photo) both; }
.intro-play .photo-comp__crop { animation-name: wipe-down-box; }
.intro-play .photo-comp__bleed { animation: bleed-out 1.7s var(--ease-io) var(--t-w3) forwards; }
.intro-play .photo-comp__frame { animation: frame-out 1.7s var(--ease-io) var(--t-w3) forwards; }
.intro-play .photo-comp__mark { animation: show 0s linear var(--t-marks) both; }
.intro-play .photo-comp__mark::before { animation: draw-x .45s var(--ease-out) var(--t-marks) both; }
.intro-play .photo-comp__mark::after { animation: draw-y .45s var(--ease-out) calc(var(--t-marks) + 120ms) both; }

.intro-play .hero .link-cta { animation: fade-up .7s var(--ease-out) var(--t-cta) both; }
.intro-play .logos.is-in { animation: slide-up .8s var(--ease-out) both; }

@keyframes slide-down { from { transform: translateY(-100%); opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes slide-up   { from { transform: translateY(100%); opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes drop-in    { from { transform: translateY(-140%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-up    { from { transform: translateY(0.6em); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes word-up    { from { transform: translateY(135%); } to { transform: none; } }
@keyframes fill-x     { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pop        { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes show       { to { visibility: visible; } }
@keyframes wipe-down {
  from { visibility: visible; clip-path: inset(var(--inset) var(--inset) calc(100% - var(--inset)) var(--inset)); }
  to   { visibility: visible; clip-path: inset(var(--inset)); }
}
@keyframes wipe-down-box {
  from { visibility: visible; clip-path: inset(0 0 100% 0); }
  to   { visibility: visible; clip-path: inset(0); }
}
@keyframes bleed-out {
  0%   { visibility: visible; clip-path: inset(var(--inset)); opacity: 1; }
  50%  { clip-path: inset(0); opacity: 1; }
  65%  { clip-path: inset(0); opacity: 1; }
  100% { visibility: visible; clip-path: inset(0); opacity: .2; }
}
@keyframes frame-out {
  0%   { visibility: visible; inset: var(--inset); opacity: 0; }
  8%   { opacity: 1; }
  50%  { inset: 0; }
  100% { visibility: visible; inset: 0; opacity: 1; }
}
@keyframes draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.photo-comp__mark::before { transform-origin: left center; }
.photo-comp__mark::after { transform-origin: center top; }

/* pisanie na klawiaturze */
.hero__copy.is-typing { visibility: visible; }
.type__ch { visibility: hidden; }
.type__ch.is-on { visibility: visible; }
.type__ch { position: relative; }
/* karetka doklejona do ostatniego znaku – nie łamie się do nowego wiersza */
.type__ch.is-caret::after,
.type__ch.is-caret-before::before {
  content: ""; position: absolute; top: 0.1em;
  width: 2px; height: 1em;
  background: currentColor;
  visibility: visible;
  animation: caret-blink 1s steps(1) infinite;
}
.type__ch.is-caret::after { left: calc(100% + 1px); }
.type__ch.is-caret-before::before { left: -1px; }
@keyframes caret-blink { 50% { opacity: 0; } }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Logotypy ---------- */

.logos {
  height: var(--logos-h);
  display: flex; align-items: center;
  background: var(--gray-bg);
  overflow: hidden;
}
.logos__inner {
  flex: 1;
  min-width: 0;
  margin-inline: var(--edge);
  display: flex; flex-direction: column;
  gap: clamp(2px, calc(1 * var(--vh)), 10px);
}
.logos__text { font-family: var(--font-mono); font-size: clamp(11px, 3.4vw, 14px); line-height: 1.2; }
.logos__viewport {
  display: flex;
  margin-inline: calc(-1 * var(--edge));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos__track {
  display: flex; align-items: center; flex: none;
  animation: marquee 22s linear infinite;
}
.logos__track li {
  flex: none; display: grid; place-items: center;
  height: clamp(36px, calc(6 * var(--vh)), 68px);
  padding-inline: clamp(12px, 5vw, 24px);
}
.logos__track img { width: auto; height: auto; max-height: clamp(18px, calc(3.2 * var(--vh)), 34px); }

@keyframes marquee { to { transform: translateX(-100%); } }

@media (min-width: 1024px) {
  .logos__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: clamp(16px, 2vw, 48px); }
  .logos__text { font-size: clamp(12px, 0.97vw, 18px); }
  .logos__viewport { width: auto; margin: 0; -webkit-mask-image: none; mask-image: none; }
  .logos__track { animation: none; }
  .logos__track li { height: var(--logos-h); padding-inline: clamp(10px, 1.39vw, 28px); }
  .logos__track img { max-height: clamp(20px, calc(var(--logos-h) * 0.5), 46px); }
  .logos__track--clone { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .logos__track { animation: none; }
  .logos__viewport { overflow-x: auto; }
}

/* ---------- Usługi / portfolio ---------- */

.services { border-bottom: 1px solid var(--line); }
.services .container { display: flex; flex-direction: column; }
.services .eyebrow { font-size: 11px; }

/* Filtr (taby): przyklejony pod nawigacją, dopóki widać listę projektów.
   Nagłówek sekcji przewija się normalnie. Na mobile taby w jednym
   rzędzie z przewijaniem w bok, żeby przyklejony pasek był niski. */
.tabs {
  position: sticky;
  top: var(--nav-h);
  z-index: 3;
  display: flex; gap: 8px;
  margin: 8px calc(-1 * var(--edge)) 0;
  padding: 12px var(--edge);
  background: var(--white);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__tab {
  flex: none;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  background: #f2f2f2;
  color: var(--text-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}
.tabs__tab:hover { background: #e6e6e6; color: var(--black); }
.tabs__tab[aria-selected="true"] { background: var(--black); color: var(--white); }

/* Lista projektów
   mobile / tablet: kafle jeden pod drugim (zdjęcie, tytuł, opis);
   desktop: wiersze na całą szerokość z przerywaną linią – tytuł do lewej,
   opis do prawej, a na środku listy podgląd zdjęcia najechanego wiersza
   (pierwszy widoczny od początku). */
.projects { display: flex; flex-direction: column; gap: 32px; margin-top: 20px; }
.project { display: grid; gap: 8px; }
.project__media { overflow: hidden; aspect-ratio: 458 / 346; background: #111; }
.project__media img { width: 100%; height: 100%; object-fit: cover; }
.project__media--light { background: #f7f6f7; }

/* pusta kategoria („Projekty pojawią się wkrótce”) */
.projects__empty {
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(32px, 4vw, 64px) 0;
}
.projects__empty .eyebrow { padding-left: 0; }
.projects__empty-text { font-size: clamp(20px, 1.8vw, 30px); line-height: 1.2; }
.project__title { font-size: 20px; font-weight: 400; line-height: 1.2; }
.project__text { font-size: 16px; line-height: 1.2; color: var(--text-muted); }

/* filtrowanie: lista znika i wraca z wierszami po kolei */
.projects.is-entering .project { animation: fade-up .6s var(--ease-out) calc(var(--k, 0) * 70ms) both; }
.projects.is-leaving { animation: fade-out .2s ease both; }
@keyframes fade-out { to { opacity: 0; } }

@media (min-width: 768px) {
  .services .eyebrow { font-size: 14px; }
  .tabs {
    flex-wrap: wrap; gap: 10px; overflow: visible;
    margin: 8px 0 0;
    padding: 12px 0 12px var(--indent);
  }
  .tabs__tab { font-size: 12px; }
  .projects { gap: 48px; margin-top: clamp(24px, 3vw, 48px); }
  .project__title { font-size: clamp(20px, 1.8vw, 30px); }
  .project__text { font-size: clamp(16px, 1.25vw, 20px); }
}

@media (min-width: 1024px) {
  .projects {
    /* podgląd 259 × 300 przy 1400 (60% poprzedniego) */
    --preview-w: calc((100vw - 2 * var(--edge)) * 259 / 1400);
    position: relative;
    gap: 0;
    /* zapas, żeby podgląd przy pierwszym i ostatnim wierszu nie wchodził na taby */
    padding-block: max(0px, calc(var(--preview-w) * 250 / 432 - 90px));
  }
  .project {
    grid-template-columns: 1fr var(--preview-w) 1fr;
    column-gap: clamp(24px, 3vw, 56px);
    align-items: center;
    padding: clamp(18px, 1.6vw, 26px) 0;
    background: linear-gradient(90deg, var(--black) 50%, transparent 0) left bottom / 10px 1px repeat-x;
  }
  .project__title { grid-column: 1; }
  .project__text { grid-column: 3; justify-self: end; text-align: right; max-width: 26em; }

  /* zdjęcia wierszy lądują w podglądzie na środku listy w poziomie, a w pionie
     na wysokości środka aktywnego wiersza (--preview-y z main.js) – przy zmianie
     wiersza podgląd płynnie tam przejeżdża. Widoczny cały czas, zdjęcie tylko
     się podmienia. Leży nad przerywanymi liniami wierszy. */
  .projects { isolation: isolate; }
  .project__media {
    position: absolute;
    left: 50%; top: var(--preview-y, 50%);
    width: var(--preview-w);
    aspect-ratio: 432 / 500;
    translate: -50% -50%;
    z-index: 1;
    opacity: 0;
    transition: opacity .4s ease, top .5s var(--ease-io);
    pointer-events: none;
  }
  .project.is-active .project__media { z-index: 2; opacity: 1; }
  /* poprzednie zdjęcie zostaje pełne pod spodem, aż nowe się pojawi –
     linie nigdy nie prześwitują przez podgląd */
  .project.was-active .project__media { z-index: 1; opacity: 1; transition: top .5s var(--ease-io); }

  /* najechany wiersz wyróżniony, reszta lekko przygaszona */
  .project__title, .project__text { transition: opacity .3s ease; }
  .projects:has(.project.is-active:hover) .project:not(:hover) :is(.project__title, .project__text) { opacity: .45; }

  /* animacja wierszy bez przesunięcia – podgląd jest pozycjonowany względem listy */
  .projects.is-entering .project { animation-name: fade-in; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .projects.is-entering .project, .projects.is-leaving { animation: none; }
  .project__media, .project__media img { transition: none !important; }
}

/* ---------- Opinie ---------- */

/* Stos opinii: każda karta przykleja się niżej o --step i najeżdża
   na poprzednią – z wcześniejszych zostaje widoczny tylko żółty pasek.
   Nagłówek siedzi w tej samej siatce: na desktopie przykleja się razem
   z pierwszą kartą i odjeżdża razem ze stosem. */
.testimonials__stack {
  --stick: calc(var(--nav-h) + 20px);
  --step: 36px;
  /* karty równej wysokości – przy odjeździe stosu żadna nie wystaje nad inne;
     --n = liczba widocznych opinii (HTML / main.js), ostatni wiersz to dystans */
  display: grid;
  grid-template-rows: auto repeat(var(--n, 3), 1fr) auto;
  gap: 20px;
}
/* dystans, przez który ułożony stos stoi, zanim odjedzie
   (musi być treścią, nie paddingiem – sticky kończy się na treści rodzica) */
.testimonials__stack::after {
  content: "";
  height: clamp(80px, calc(25 * var(--vh)), 320px);
}
.testimonial {
  position: sticky;
  top: calc(var(--stick) + var(--i, 0) * var(--step));
  display: flex; flex-direction: column; gap: 16px;
  padding-bottom: 20px;
  /* przerywana linia 5/5 jak w Figmie */
  background:
    linear-gradient(90deg, var(--black) 50%, transparent 0) left bottom / 10px 1px repeat-x,
    var(--white);
}
.testimonial:nth-of-type(2) { --i: 1; }
.testimonial:nth-of-type(3) { --i: 2; }
.testimonial:nth-of-type(4) { --i: 3; }
.testimonial:nth-of-type(5) { --i: 4; }
.testimonial:nth-of-type(6) { --i: 5; }
.testimonial:nth-of-type(7) { --i: 6; }
.testimonial:nth-of-type(8) { --i: 7; }
.testimonial__tag { font-size: 18px; line-height: 1.2; }
.testimonial__author { display: flex; align-items: flex-end; gap: 8px; color: var(--text-author); font-size: 14px; }
.testimonial__author img { width: 124px; height: 124px; object-fit: cover; flex: none; }
/* gdy nie ma zdjęcia autora: inicjały */
.testimonial__initials {
  flex: none;
  display: grid; place-items: center;
  width: 124px; height: 124px;
  background: #f2f2f2;
  color: var(--black);
  font-family: var(--font-mono); font-size: 28px; letter-spacing: 0.05em;
}
.testimonial__quote { font-size: 18px; line-height: 1.3; }

.testimonial--extra.is-revealed { animation: fade-up .6s var(--ease-out) calc(var(--k, 0) * 120ms) both; }

.testimonials__more {
  --gap: 20px; --icon: 12px;
  display: flex; width: fit-content;
  margin: clamp(24px, 3.3vw, 48px) 0 0 auto;
  font-size: 26px;
}

@media (min-width: 768px) {
  .testimonials__stack {
    --stick: calc(var(--nav-h) + 40px); --step: 42px;
    grid-template-columns: 550fr 790fr;
    grid-template-rows: repeat(var(--n, 3), 1fr) auto;
    gap: 60px;
  }
  .testimonials__head {
    grid-column: 1; grid-row: 1;
    position: sticky; top: var(--stick);
    align-self: stretch;
  }
  .testimonial, .testimonials__stack::after { grid-column: 2; }
  .testimonial { gap: 32px; }
  .testimonial__tag { font-size: 22px; }
  .testimonial__author { font-size: 18px; }
  .testimonial__quote { font-size: 22px; }
  .testimonials__more { font-size: 32px; }
}

/* ---------- Proces ---------- */

.process { background: var(--gray-bg); }
.process .container { display: flex; flex-direction: column; gap: 20px; }
.process__steps { display: flex; flex-direction: column; gap: 16px; }
.step { display: flex; flex-direction: column; gap: 8px; }
/* kroki wjeżdżają po kolei i płyną z różną prędkością (--p, --drift: main.js) */
.scroll-fx .step {
  opacity: var(--p, 0);
  translate: 0 calc((1 - var(--p, 0)) * 56px + var(--drift, 0px));
  will-change: opacity, translate;
}
.step__num { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; letter-spacing: -0.05em; color: #767676; }
.step__title { font-size: 20px; font-weight: 400; line-height: 1.2; }
.step__text { font-size: 16px; color: var(--text-muted); }

@media (min-width: 768px) {
  .process .container { gap: 60px; }
  .process__steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 16px; padding: 20px; }
  .step__title { font-size: 26px; }
  .step__text { font-size: 18px; }
}
@media (min-width: 1100px) {
  .process__steps { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- O mnie ---------- */

.about__inner { display: flex; flex-direction: column; gap: 20px; }
.about__left { display: flex; flex-direction: column; gap: 20px; }
.about__head { gap: 8px; }
.about__photo { position: relative; width: min(320px, 100%); aspect-ratio: 408 / 515; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.about__pills {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-mono); font-weight: 500;
  font-size: 10px; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--white);
}
.about__content { display: flex; flex-direction: column; gap: 19px; font-size: 16px; }
.about__content .link-cta { align-self: flex-end; margin-top: 13px; }

@media (min-width: 768px) {
  .about__inner { display: grid; grid-template-columns: 717fr 683fr; gap: 0; }
  .about__left { gap: 0; }
  .about__head { position: relative; z-index: 1; }
  .about__photo {
    width: 56.9%;
    margin-left: 49.4%;
    margin-top: -37px;
  }
  .about__pills { font-size: 12px; letter-spacing: 0.1em; }
  .about__content {
    justify-content: flex-end;
    padding: 0 18.7% 0 9.4%;
    font-size: 18px;
    gap: 22px;
  }
  .about__content .link-cta { margin-top: 10px; }
}

/* tekst obok zdjęcia wjeżdża, gdy widać połowę zdjęcia (main.js: .is-in) */
.scroll-fx [data-reveal-after] > * { opacity: 0; transform: translateY(32px); }
.scroll-fx [data-reveal-after].is-in > * {
  animation: fade-up-lg .8s var(--ease-out) calc(var(--k, 0) * 140ms) both;
}
.scroll-fx [data-reveal-after] > :nth-child(2) { --k: 1; }
.scroll-fx [data-reveal-after] > :nth-child(3) { --k: 2; }
@keyframes fade-up-lg { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }

/* ---------- Stopka ---------- */

.footer { background: var(--black); color: var(--white); padding: 40px var(--edge); }
.footer .container { display: flex; flex-direction: column; gap: 32px; }
.footer__logo { width: 100%; }
.footer__logo--desktop { display: none; }
.footer__bar { display: flex; flex-direction: column; gap: 32px; font-size: 12px; line-height: 1; }
.footer__links { display: flex; flex-direction: column; gap: 16px; }
.footer__links a { display: inline-block; padding: 16px 0; text-decoration: none; color: #fcfbfb; }
.footer__links a:hover { text-decoration: underline; }
.footer__copy { color: #fcfbfb; }

@media (min-width: 768px) {
  .footer__logo--desktop { display: block; padding: 10px; }
  .footer__logo--mobile { display: none; }
  .footer__bar { flex-direction: row; align-items: center; justify-content: space-between; }
  .footer__links { flex-direction: row; }
}

/* ---------- Polityka prywatności ---------- */

.legal { padding-block: clamp(40px, 5vw, 80px); }
.legal__inner { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 56px); }
.legal__title { font-size: clamp(36px, 3.9vw, 56px); }
.legal__updated { padding-left: var(--indent); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--text-eyebrow); }
.legal__body {
  max-width: 760px;
  padding-left: var(--indent);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.55;
  letter-spacing: -0.01em;
}
.legal__body h2 {
  margin: 2.4em 0 .6em;
  font-size: clamp(22px, 1.8vw, 28px); font-weight: 500; line-height: 1.2;
  letter-spacing: -0.03em;
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body h3 { margin: 1.6em 0 .4em; font-size: 1.05em; font-weight: 500; }
.legal__body p, .legal__body ul, .legal__body dl { margin: 0 0 1em; }
.legal__body ul { list-style: disc; padding-left: 1.2em; }
.legal__body li { margin-bottom: .3em; }
.legal__body dt { font-weight: 500; margin-top: .8em; }
.legal__body dd { margin: .2em 0 0; color: var(--text-muted); }
.legal__body strong { font-weight: 500; }
.legal__body a { text-underline-offset: 3px; }
.legal__link { font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.legal__address { padding-left: 1em; border-left: 2px solid var(--yellow); }

/* ---------- Zgoda na cookies ---------- */

.footer__cookies {
  padding: 16px 0;
  font-size: 12px; line-height: 1;
  color: #fcfbfb;
}
.footer__cookies:hover { text-decoration: underline; }

.consent-banner {
  position: fixed; z-index: 55;
  left: var(--edge); right: var(--edge); bottom: var(--edge);
  max-width: 420px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px;
  background: var(--black); color: var(--white);
  font-size: 14px; line-height: 1.35;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
  animation: fade-up .5s var(--ease-out) both;
}
.consent-banner .eyebrow { padding-left: 0; color: #a3a3a3; font-size: 12px; }
.consent-banner__text a { color: inherit; }
.consent-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px; }
.consent-banner__accept {
  height: 40px; padding: 0 18px;
  background: var(--yellow); color: var(--black);
  font-weight: 500; letter-spacing: -0.02em;
  transition: opacity .2s ease;
}
.consent-banner__accept:hover { opacity: .85; }
.consent-banner__deny { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.consent-banner__deny:hover { opacity: .7; }

/* ---------- Overlaye ---------- */

.menu, .brief {
  position: fixed; inset: 0; z-index: 60;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: overlay-in .25s ease;
}
.menu[hidden], .brief[hidden] { display: none; }
@keyframes overlay-in { from { opacity: 0; transform: translateY(-12px); } }

.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; }
.icon-btn:hover { opacity: .6; }

/* Menu mobilne */
.menu {
  background: var(--black); color: var(--white);
  display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
  gap: 64px;
  padding: 10px var(--edge) 20px;
}
.menu__nav { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.menu__nav a, .menu__cta {
  font-weight: 500; line-height: 1; letter-spacing: -0.04em;
  text-decoration: underline; text-underline-offset: 5px;
}
.menu__nav a { font-size: 32px; padding: 10px 0; }
.menu__cta { font-size: 52px; text-decoration-thickness: 3px; }
.menu__footer { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; }
.menu__footer a { display: block; padding: 16px 0; text-decoration: none; }

/* Formularz briefu */
.brief { background: var(--yellow); padding: 48px var(--edge); }
.brief__inner {
  position: relative;
  max-width: 928px; margin-inline: auto;
  display: flex; flex-direction: column; gap: 32px;
  padding-top: 72px;
}
.brief__close { position: absolute; top: 0; right: 0; color: var(--ink); }
.brief__head { display: flex; flex-direction: column; gap: 8px; }
.brief__head .eyebrow { color: #4e4e4e; padding-left: 0; }
.brief__head .h2 { font-size: 42px; }

.brief__form { display: flex; flex-direction: column; gap: 16px; }

.field {
  position: relative; display: block;
  border: 1px solid var(--ink);
  min-height: 52px;
}
.field input, .field textarea {
  display: block; width: 100%;
  border: 0; outline: 0; background: transparent;
  font-family: var(--font-input); font-weight: 500; font-size: 16px; line-height: 1.3;
  letter-spacing: -0.02em; color: var(--black);
  padding: 22px 16px 8px;
}
.field textarea { resize: vertical; min-height: 85px; padding-top: 26px; }
.field__label {
  position: absolute; left: 16px; top: 16px;
  font-family: var(--font-mono); font-weight: 500; font-size: 14px; line-height: 1.3;
  letter-spacing: -0.02em; text-transform: uppercase; color: #3e3e3e;
  pointer-events: none;
  transform-origin: left top;
  transition: transform .15s ease;
}
.field:focus-within { box-shadow: inset 0 0 0 1px var(--ink); }
.field:focus-within .field__label,
.field input:not(:placeholder-shown) + .field__label,
.field textarea:not(:placeholder-shown) + .field__label { transform: translateY(-10px) scale(.72); }
.field.is-invalid { border-color: #c4001a; box-shadow: inset 0 0 0 1px #c4001a; }

.consent {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; line-height: 1.3; color: #3e3e3e;
  cursor: pointer;
}
.consent input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; }
.consent__box { flex: none; width: 24px; height: 24px; border: 1px solid var(--ink); display: grid; place-items: center; }
.consent input:checked + .consent__box::after {
  content: ""; width: 12px; height: 7px;
  border-left: 2px solid var(--black); border-bottom: 2px solid var(--black);
  transform: translateY(-2px) rotate(-45deg);
}
.consent input:focus-visible + .consent__box { outline: 2px solid var(--black); outline-offset: 2px; }
.consent.is-invalid .consent__box { border-color: #c4001a; box-shadow: inset 0 0 0 1px #c4001a; }

.brief__error { font-size: 14px; color: #c4001a; }
.brief__submit { align-self: flex-end; }

@media (min-width: 768px) {
  .brief { padding: 48px var(--edge); display: flex; align-items: flex-end; justify-content: center; }
  .brief__inner { width: 100%; padding-top: 20px; }
  .brief__close { top: 20px; }
  .brief__head .h2 { font-size: 56px; padding-left: 128px; }
}
@media (min-height: 760px) and (min-width: 768px) {
  .brief { align-items: center; }
}