/* ==========================================================================
   Portfolio — Krystian Korzeniowski (desktop, 1440 canvas / 1225 container)
   Zgodne z projektem Figma: node 473:20401 "Home"
   ========================================================================== */

/* ---------- Fonts ----------
   Pliki fontów NIE są dołączone (font licencjonowany) — wrzuć woff2 do /fonts/.
   Nazwy plików: AeonikTRIAL-Regular.woff2, AeonikTRIAL-Bold.woff2 */
/* Aeonik TRIAL wyłączony — plik web-trial ma 67 glifów, bez polskich znaków.
   Do włączenia po dostarczeniu pełnego fontu: odkomentuj blok.
@font-face {
  font-family: "Aeonik TRIAL";
  src: local("Aeonik TRIAL Regular"), local("AeonikTRIAL-Regular"),
       url("../fonts/AeonikTRIAL-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik TRIAL";
  src: local("Aeonik TRIAL Bold"), local("AeonikTRIAL-Bold"),
       url("../fonts/AeonikTRIAL-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*/

/* ---------- Tokens ---------- */
:root {
  --color-bg: #fdf9f8;
  --color-text: #000000;
  --color-text-muted: #6a6a6a;
  --color-rule: #bebebe;
  --color-brand-purple: #48227c;
  --font-sans: "Aeonik TRIAL", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif; /* body copy — Aeonik TRIAL nie ma polskich znaków */
  --container: 1225px;
  --radius-card: 12px;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; }

/* Body copy w case studies na Helvetice (Aeonik TRIAL gubi polskie znaki) — nagłówki, labele i eyebrow zostają na --font-sans */
.play p:not(.play__label):not(.play__eyebrow):not(.play__h42):not(.play__h40),
.play li { font-family: var(--font-body); }

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, p { margin: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ---------- Utility ---------- */
.only-mobile { display: none; }
@media (max-width: 767px) {
  .only-mobile { display: inline; }
  .only-desktop { display: none; }
}

/* ---------- Layout ---------- */
.page {
  width: var(--container);
  margin: 0 auto;
  padding-top: 40px;
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: relative;
  height: 29px;
  display: flex;
  align-items: flex-start;
}

.nav__logo img {
  width: 49px;
  height: 29px;
  object-fit: cover;
}

.nav__menu {
  position: absolute;
  left: 50%;
  top: 3px;
  transform: translateX(-50%);
  display: flex;
  gap: 24px;
  white-space: nowrap;
}

.nav__menu a {
  font-size: 15px;
  line-height: 24px;
  transition: opacity 0.2s ease;
}

.nav__menu a:hover { opacity: 0.55; }

.nav__actions {
  position: absolute;
  right: 2.5px; /* 1162.5 + 60 = prawa krawędź kontenera */
  top: 3px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav__theme {
  width: 24px;
  height: 24px;
  border: 1px solid var(--color-text);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav__lang {
  width: 24px;
  height: 24px;
}

.nav__lang img { width: 24px; height: 24px; }

.nav__theme:hover,
.nav__lang:hover { opacity: 0.55; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  margin-top: 117px;
  height: 331px;
}

.hero__title {
  position: absolute;
  left: 0;
  top: 33px;
  width: 912px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-weight: 700;
}

.hero__title-line1 {
  font-size: 100px;
  line-height: 84px;
  display: flex;
  align-items: center;
  height: 84px;
}

.hero__title-line2 {
  font-size: 108px;
  line-height: 96px;
  display: flex;
  align-items: center;
  height: 96px;
  white-space: nowrap;
}

.hero__desc {
  position: absolute;
  left: 0;
  top: 270px; /* 33 + 249 - 12 (środek linii) */
  font-size: 15px;
  line-height: 24px;
  white-space: nowrap;
}

.hero__current {
  position: absolute;
  left: 0;
  top: 306px; /* 33 + 273 */
  display: flex;
  align-items: flex-end;
  gap: 6px;
  font-size: 15px;
  line-height: 24px;
}

.hero__current img {
  width: 79px;
  height: 25px;
  object-fit: cover;
}

.hero__right { position: static; }

.hero__photo {
  position: absolute;
  right: 7px; /* left 1118 + 100 = 1218; 1225 - 1218 = 7 */
  top: 0;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  object-fit: cover;
  mix-blend-mode: luminosity;
}

.hero__signature {
  position: absolute;
  right: 129px; /* prawa krawędź tekstu = x1096 */
  top: 33px;
  width: 284px;
  height: 37px;
}

/* ---------- Pozioma linia ---------- */
.rule {
  border: none;
  border-top: 1px solid var(--color-rule);
  margin: 60px 0 0;
}

/* ==========================================================================
   PROJEKTY
   ========================================================================== */
.projects {
  margin-top: 60px;
}

.projects__label {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 24px;
}

/* Siatka odwzorowuje dokładne pozycje z Figmy (kontener 1224 × 3865) */
.projects__grid {
  position: relative;
  width: 1224px;
  height: 3865px;
  margin-top: 16px;
}

.card {
  position: absolute;
}

.card__link {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.card__media {
  border-radius: var(--radius-card);
  overflow: hidden;
  transform: translateZ(0); /* stabilne przycinanie rogów przy skalowaniu (Safari) */
  /* Safari: wymuszenie przycinania rogów na warstwie kompozytora */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.card__media img,
.card__media picture,
.card__media > video { display: block; }

.card__media > picture > img {
  width: 100%;
  height: auto;
}

/* ---------- Meta pod kartą ---------- */
.card__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 68px;
}

.card__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.card__title {
  font-size: 24px;
  line-height: 24px;
  font-weight: 400;
}

.card__arrow img {
  width: 32px;
  height: 32px;
  transition: transform 0.3s ease;
}

.card__link:hover .card__arrow img {
  transform: translateX(6px);
}

.card__tags {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 24px;
  white-space: nowrap;
}

/* ---------- Pozycje kart (dokładnie wg Figmy) ---------- */
.card--play-home   { left: 0;      top: 0;      width: 622px;  }
.card--tvn24       { left: 728px;  top: 0;      width: 496px;  }
.card--traddly     { left: 0;      top: 552px;  width: 496px;  }
.card--memecrypto  { left: 624px;  top: 794px;  width: 600px;  }
.card--miloka      { left: 0;      top: 1314px; width: 1224px; }
.card--izbicko     { left: 0;      top: 1986px; width: 600px;  }
.card--play-lp     { left: 728px;  top: 1986px; width: 496px;  }
.card--meetio      { left: 0;      top: 2506px; width: 496px;  }
.card--landing     { left: 624px;  top: 2753px; width: 600px;  }
.card--retention   { left: 0;      top: 3273px; width: 1224px; }

/* ---------- Karta Zielone Izbicko (HTML, nie bitmapa) ---------- */
.card__media--izbicko {
  height: 348px;
  background: #ffffff;
  border: 1px solid #e7e7e7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.izbicko-logo {
  display: flex;
  align-items: flex-start;
  gap: 19px;
  height: 90px;
}

.izbicko-logo img:first-child { margin-top: 6px; }
.izbicko-logo img:last-child  { margin-top: 9px; }

/* ---------- Dekoracja (gwiazdka) ---------- */
.projects__deco {
  position: absolute;
  left: 1108px;
  top: 1385px;
  width: 79px;
  height: 74px;
  pointer-events: none;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  position: relative;
  height: 93px;
  margin-top: 60px;
  width: 1224px;
}

.footer::before,
.footer::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  border-top: 1px solid var(--color-rule);
}

.footer::before { top: 31px; }
.footer::after  { top: 92px; }

.footer__logo-wrap {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 69px;
  height: 61px;
  background: var(--color-bg);
  display: flex;
  justify-content: center;
  z-index: 1;
}

.footer__logo-wrap img {
  margin-top: 16px;
  width: 49px;
  height: 29px;
  object-fit: cover;
}

.footer__copy {
  position: absolute;
  left: calc(50% - 91.5px);
  top: 57px; /* środek na 69px, linia 24px */
  font-size: 15px;
  line-height: 24px;
  white-space: nowrap;
}

/* ==========================================================================
   ANIMACJE
   ========================================================================== */

/* ---------- 1. Podpis — pisanie litera po literze ---------- */
/* Każda litera (subścieżka) to osobny stroke rysowany sekwencyjnie
   (--sd = opóźnienie, --sp = czas jednej litery), a wypełnienie
   odsłania się tuż za "piórem" maską przesuwającą się w prawo. */
.sig-letter {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.fonts-ready .sig-letter {
  animation: sig-draw var(--sp, 0.12s) linear var(--sd, 0s) forwards;
}

@keyframes sig-draw {
  to { stroke-dashoffset: 0; }
}

/* atrybut width=290 to bezpieczny fallback — jeśli przeglądarka nie umie
   animować geometrii SVG z CSS, wypełnienie jest po prostu widoczne od razu */
.fonts-ready .sig-wipe {
  animation: sig-wipe 2.8s linear 0.62s both;
}

@keyframes sig-wipe {
  from { width: 0; }
  to   { width: 290px; }
}

/* po zakończeniu pisania kontury znikają, zostaje czyste wypełnienie */
.sig-strokes {
  transition: opacity 0.6s ease 3.5s;
}

.fonts-ready .sig-strokes { opacity: 0; }

/* ---------- 2. Fade-in tekstów (hero od razu, reszta na scroll) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* karty: transform na .reveal nadpisuje absolute positioning? Nie — translateY
   działa niezależnie od left/top, więc pozycje z Figmy zostają nietknięte. */

/* ---------- 3. Zdjęcie w hero — miękki zoom-in ---------- */
.hero__photo.reveal-photo {
  opacity: 0;
  transform: scale(1.18);
  filter: blur(6px);
  transition:
    opacity 1.1s ease 0.35s,
    transform 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.35s,
    filter 1.1s ease 0.35s;
}

.hero__photo.reveal-photo.is-visible {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* hover-zoom na kartach — powolny, symetryczny, bez szarpnięcia na starcie */
.card__media > picture > img,
.card__media > video {
  width: 100%;
  height: auto;
  transform: translateZ(0) scale(1.001); /* warstwa GPU + brak "przeskoku" subpikselowego */
  transition: transform 1.5s cubic-bezier(0.33, 0.0, 0.15, 1);
  will-change: transform;
  backface-visibility: hidden;
}

.card__link:hover .card__media > picture > img,
.card__link:hover .card__media > video {
  transform: translateZ(0) scale(1.03);
}

/* karta Zielone Izbicko jest HTML-em (nie bitmapą), więc zoomujemy logo */
.izbicko-logo {
  transform: translateZ(0) scale(1.001);
  transition: transform 1.5s cubic-bezier(0.33, 0.0, 0.15, 1);
  will-change: transform;
}

.card__link:hover .izbicko-logo {
  transform: translateZ(0) scale(1.03);
}

/* ---------- 4. Pixel-load obrazków na scrollu ---------- */
.pix-host {
  position: relative;
}

.pix {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  image-rendering: -webkit-optimize-contrast; /* fallback dla starych WebKitów */
  image-rendering: pixelated;                 /* Chrome + Safari 10+ */
  pointer-events: none;
}

/* ostry obraz leży pod nakładką od początku — nakładka po prostu znika,
   bez crossfade'u/błysku */
.pix-host.pix-done .pix {
  display: none;
}

/* ---------- Dostępność ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .hero__photo.reveal-photo {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .sig-letter, .sig-wipe, .sig-strokes {
    animation: none !important;
    transition: none !important;
  }
  .sig-strokes { opacity: 0; }
  .pix { display: none; }
  .card__media > picture > img,
  .card__media > video,
  .card__arrow img { transition: none; }
}

/* ==========================================================================
   MOBILE (≤767px) — projekt Figma 473:20400 "home-mobile", canvas 360px
   ========================================================================== */

/* mobilne elementy ukryte na desktopie */
.nav__burger,
.hero__signature--mobile { display: none; }

/* animacja podpisu mobilnego (2 linie — wipe idzie linia po linii) */
.fonts-ready .msig-wipe--l1 { animation: msig-wipe 1.15s linear 0.62s both; }
.fonts-ready .msig-wipe--l2 { animation: msig-wipe 1.75s linear 1.63s both; }

@keyframes msig-wipe {
  from { width: 0; }
  to   { width: 107px; }
}

@media (prefers-reduced-motion: reduce) {
  .msig-wipe { animation: none !important; }
}

@media (max-width: 767px) {
  /* twarda blokada poziomego przewijania (clip ucina też panowanie w iOS,
     czego overflow:hidden na body nie gwarantuje) */
  html, body {
    overflow-x: hidden; /* fallback dla starszych przeglądarek */
    overflow-x: clip;
  }

  body {
    font-size: 14px;
    line-height: 22px;
  }

  .page {
    width: 100%;
    max-width: 420px;
    padding: 63px 12px 0;
  }

  /* ---------- NAV: hamburger po lewej, logo w centrum ---------- */
  .nav {
    height: 30px;
    align-items: center;
  }

  .nav__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1.4px solid var(--color-rule);
    border-radius: 4px;
  }

  .nav__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .nav__menu,
  .nav__actions { display: none; }

  /* ---------- HERO ---------- */
  .hero {
    position: relative;
    height: auto;
    margin-top: 31px; /* logo top 63 + 30 → blok hero top 124 */
  }

  .hero__signature { display: none; }
  .hero__signature--mobile { display: block; }

  /* podpis+zdjęcie: absolutnie w prawym górnym rogu hero —
     tytuł płynie pod spodem i nigdy na nie nie nachodzi:
     podpis kończy się na y=60, a druga linia tytułu zaczyna od y=59+
     tylko przy krótkiej pierwszej linii ("Senior" nie sięga prawej strony) */
  .hero__right {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    height: 60px;
    z-index: 1;
  }

  .hero__signature--mobile {
    /* KLUCZOWE: zdjęcie dziedziczenia desktopowego position:absolute/top/right
       z bazowej reguły .hero__signature — to ono spychało podpis na 2. linię */
    position: static;
    top: auto;
    right: auto;
    width: 103px;
    height: 41px;
    margin-top: 19px;
  }

  .hero__photo,
  .hero__photo.reveal-photo {
    position: static;
    width: 60px;
    height: 60px;
    border-radius: 6px;
  }

  .hero__title {
    position: static;
    width: auto;
    max-width: 318px;
    gap: 0;
    /* wg poprawionego projektu: tytuł 40px od góry bloku hero —
       podpis (kończy się na y=60) ma ~15px prześwitu nad 2. linią (start y=75) */
    padding-top: 40px;
  }

  .hero__title-line1,
  .hero__title-line2 {
    font-size: 28px;
    line-height: 35px;
    height: 35px;
  }

  .hero__desc {
    position: static;
    margin-top: 24px;
    font-size: 14px;
    line-height: 22px;
    white-space: normal;
  }

  .hero__current {
    position: static;
    margin-top: 23px;
    font-size: 14px;
    line-height: 22px;
    align-items: center;
  }

  .rule { margin-top: 32px; }

  /* ---------- PROJEKTY ---------- */
  .projects { margin-top: 20px; }

  .projects__label {
    font-size: 14px;
    line-height: 22px;
  }

  .projects__grid {
    position: static;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 12px;
  }

  .card {
    position: static;
    width: 100% !important;
  }

  /* kolejność mobilna (Figma): ...play-lp przed Izbickiem, retencja przed LP */
  .card--play-home   { order: 1; }
  .card--tvn24       { order: 2; }
  .card--traddly     { order: 3; }
  .card--memecrypto  { order: 4; }
  .card--miloka      { order: 5; }
  .card--play-lp     { order: 6; }
  .card--izbicko     { order: 7; }
  .card--meetio      { order: 8; }
  .card--retention   { order: 9; }
  .card--landing     { order: 10; }

  .card__link { gap: 12px; }

  .card__media {
    aspect-ratio: 336 / 230;
  }

  .card__media > picture > img,
  .card__media > video {
    height: 100%;
    object-fit: cover;
  }

  .card__media--izbicko {
    height: auto;
  }

  .izbicko-logo {
    height: 70px;
    gap: 15px;
  }

  .izbicko-logo img:first-child { width: 60px; height: 60px; margin-top: 5px; }
  .izbicko-logo img:last-child  { width: 96px; height: 50px; margin-top: 7px; }

  /* meta: kategoria NAD tytułem, strzałka 24px */
  .card__meta {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
  }

  .card__tags {
    order: -1;
    font-size: 14px;
    line-height: 22px;
  }

  .card__info { gap: 4px; }

  .card__meta { gap: 4px; }

  .card__title {
    font-size: 18px;
    line-height: 24px;
  }

  .card__arrow img {
    width: 24px;
    height: 24px;
  }

  .projects__deco { display: none; }

  /* ---------- FOOTER ---------- */
  .footer {
    width: 100%;
    height: 92px;
    margin-top: 36px;
  }

  .footer::before { top: 26px; }
  .footer::after  { top: 86px; }

  .footer__logo-wrap {
    width: 57px;
    height: 50px;
  }

  .footer__logo-wrap img {
    margin-top: 13px;
    width: 40px;
    height: 24px;
  }

  .footer__copy {
    left: calc(50% - 85px);
    top: 52px;
    font-size: 14px;
    line-height: 22px;
  }
}

/* ==========================================================================
   PODSTRONA "O MNIE" (desktop) — Figma 543:5725
   ========================================================================== */
.page-about { overflow-x: hidden; }

.about {
  position: relative;
  height: 1575px; /* footer ląduje na y=1644 jak w projekcie */
}

/* watermark logo w tle po lewej: tor (rail) na całą resztę wysokości strony,
   a logo jest position:sticky — "blokuje się" przy scrollu prawej kolumny */
.about__rail {
  position: absolute;
  left: -232px;
  top: 688px;
  bottom: 0;
  width: 429px;
  pointer-events: none;
}

.about__watermark {
  position: sticky;
  position: -webkit-sticky; /* Safari */
  top: calc(50vh - 204px);
  display: block;
  height: 408px;
  width: auto;
  user-select: none;
}

.about__photo {
  position: absolute;
  left: 0;
  top: 99px;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  object-fit: cover;
  mix-blend-mode: luminosity;
}

.about__heading {
  position: absolute;
  left: 0;
  top: 239px;
  width: 926px;
  font-size: 40px;
  font-weight: 400;
  line-height: 58px;
}

.about__heading strong { font-weight: 700; }

.br-m { display: none; } /* łamanie linii tylko dla mobile */

/* prawa kolumna treści */
.about__intro {
  position: absolute;
  left: 415px;
  top: 517px;
  width: 808px;
  font-size: 15px;
  line-height: 24px;
}

.about__intro strong { font-weight: 700; }

.about__label {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 24px;
}

/* ---------- Narzędzia + tooltipy ---------- */
.about__tools {
  position: absolute;
  left: 415px;
  top: 597px;
}

.tools {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  gap: 12px;
}

.tool {
  position: relative;
  width: 40px;
  height: 40px;
}

.tool img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  transition: transform 0.45s cubic-bezier(0.33, 0, 0.15, 1);
}

.tool:hover img {
  transform: translateY(-4px) scale(1.08);
}

.tool__tip {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translate(-50%, -4px);
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 24px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.33, 0, 0.15, 1);
}

.tool:hover .tool__tip,
.tool:focus-within .tool__tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Doświadczenie / timeline ---------- */
.about__experience {
  position: absolute;
  left: 415px;
  top: 735px;
  width: 323px;
  height: 640px;
}

.about__experience > .about__label {
  position: absolute;
  top: 0;
  left: 0;
}

.timeline {
  position: absolute;
  inset: 0;
}

/* jedna ciągła linia przez wszystkie wpisy: od 1. do ostatniej kropki */
.tl-line {
  position: absolute;
  left: 129px;
  top: 52px;   /* 40 + 12 */
  width: 1px;
  height: 546px; /* do ostatniej kropki (y 592+6) */
  background: #d9d9d9;
}

.tl-group {
  position: absolute;
  left: 0;
  top: var(--y);
}

.tl-logo { display: block; }

.tl-logo--darken { mix-blend-mode: darken; }

.tl-entry {
  position: absolute;
  left: 150px;
  top: var(--y);
  width: 172px;
}

.tl-dot {
  position: absolute;
  left: -26px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d9d9d9;
}

.tl-role {
  font-size: 15px;
  line-height: 24px;
}

.tl-date {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 24px;
}

/* ---------- Języki ---------- */
.about__languages {
  position: absolute;
  left: 415px;
  top: 1407px;
  width: 808px;
}

.languages {
  margin: 16px 0 0;
  padding-left: 22.5px;
  font-size: 15px;
  line-height: 24px;
}

/* ==========================================================================
   ANIMACJE — "O mnie"
   ========================================================================== */

/* generyczne elementy animowane przez IntersectionObserver (klasa .anim) */
.anim--pop {
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.5s ease var(--d, 0s),
    transform 0.6s cubic-bezier(0.34, 1.4, 0.5, 1) var(--d, 0s);
}

.anim--pop.is-visible {
  opacity: 1;
  transform: scale(1);
}

.anim--line {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.4s cubic-bezier(0.33, 0, 0.15, 1) 0.1s;
}

.anim--line.is-visible { transform: scaleY(1); }

.anim--dot {
  opacity: 0;
  transform: scale(0);
  transition:
    opacity 0.3s ease var(--d, 0s),
    transform 0.45s cubic-bezier(0.34, 1.5, 0.5, 1) var(--d, 0s);
}

.anim--dot.is-visible {
  opacity: 1;
  transform: scale(1);
}

.anim--entry .tl-role,
.anim--entry .tl-date {
  opacity: 0;
  transform: translateX(14px);
  transition:
    opacity 0.6s ease var(--d, 0s),
    transform 0.7s cubic-bezier(0.33, 0, 0.15, 1) var(--d, 0s);
}

.anim--entry.is-visible .tl-role,
.anim--entry.is-visible .tl-date {
  opacity: 1;
  transform: none;
}

.anim--watermark {
  opacity: 0;
  transition: opacity 1.6s ease 0.4s;
}

.anim--watermark.is-visible {
  opacity: 1;
  animation: watermark-float 9s ease-in-out 2s infinite alternate;
}

@keyframes watermark-float {
  from { translate: 0 0; }
  to   { translate: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .anim--pop, .anim--dot, .anim--line, .anim--watermark,
  .anim--entry .tl-role, .anim--entry .tl-date {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .tool img, .tool__tip { transition: none; }
}

/* ==========================================================================
   LOGO — hover easter egg
   ========================================================================== */
/* nav: pełny obrót ze sprężystym dojazdem; animacja (nie transition),
   więc po zjechaniu kursorem logo nie kręci się wstecz */
.nav__logo img { will-change: transform; }

.nav__logo:hover img {
  animation: logo-spin 0.8s cubic-bezier(0.34, 1.35, 0.45, 1);
}

@keyframes logo-spin {
  from { transform: rotate(0deg) scale(1); }
  55%  { transform: rotate(300deg) scale(1.15); }
  to   { transform: rotate(360deg) scale(1); }
}

/* footer: obrót monety w 3D (rotateY) — inna niespodzianka na dole strony */
.footer__logo-wrap { perspective: 400px; }

.footer__logo-wrap:hover img {
  animation: logo-coin 0.9s cubic-bezier(0.33, 0, 0.2, 1);
}

@keyframes logo-coin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nav__logo:hover img,
  .footer__logo-wrap:hover img { animation: none; }
}

/* ==========================================================================
   ZDJĘCIE — kolor na hover (crossfade B&W → kolor)
   ========================================================================== */
.photo-swap {
  display: block;
  overflow: hidden;
  /* wrapper NIE może mieć luminosity — zszarzyłby też warstwę kolorową */
  mix-blend-mode: normal;
}

.photo-swap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  mix-blend-mode: normal;
}

.photo-swap__color {
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 0.55s ease,
    transform 0.9s cubic-bezier(0.33, 0, 0.15, 1);
}

.photo-swap:hover .photo-swap__color {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .photo-swap__color { transition: none; transform: none; }
}

/* ==========================================================================
   "O MNIE" — MOBILE (≤767px) — Figma 562:6335 "omnie-mobile"
   ========================================================================== */
@media (max-width: 767px) {
  .about {
    position: relative;
    height: auto;
    padding-top: 31px; /* padding, nie margines dziecka — bez margin collapse */
    padding-bottom: 0;
  }

  .about__rail { display: none; }

  .about__photo {
    position: absolute;
    left: auto;  /* neutralizacja desktopowego left:0 — inaczej wygrywa z right */
    right: 0;
    top: 31px;
    width: 60px;
    height: 60px;
    border-radius: 6px;
  }

  .about__heading {
    position: static;
    width: auto;
    margin-top: 37px; /* 31 + 37 = 68px pod navem */
    font-size: 20px;
    line-height: 32px;
  }

  .br-m { display: inline; }

  .about__intro {
    position: static;
    width: auto;
    margin-top: 20px;
    font-size: 14px;
    line-height: 24px;
  }

  .about__label {
    font-size: 14px;
    line-height: 24px;
  }

  /* ---------- Narzędzia: 8px pod intro, ikony 8px pod labelem ---------- */
  .about__tools {
    position: static;
    margin-top: 8px;
  }

  .tools { margin-top: 8px; }

  /* ---------- Doświadczenie ---------- */
  .about__experience {
    position: static;
    width: auto;
    height: auto;
    margin-top: 32px;
  }

  .about__experience > .about__label { position: static; }

  .timeline {
    position: relative;
    inset: auto;
    margin-top: 8px;
    padding-left: 26px;
  }

  /* oś: x=5 (środek kropek), od 1. kropki (y48) do środka ostatniej */
  .tl-line {
    left: 5px;
    top: 48px;
    bottom: 37px;
    height: auto;
  }

  .tl-group {
    position: static;
    margin: 24px 0 12px;
  }

  .tl-group:first-of-type { margin-top: 0; }

  .tl-logo { margin: 0 !important; }

  /* rozmiary logotypów wg projektu mobile */
  .tl-logo[src*="play-brand"]  { width: 73px; height: 24px; }
  .tl-logo[src*="exlabs"]      { width: 73px; height: 18px; }
  .tl-logo[src*="skycash"]     { width: 73px; height: 10px; margin-top: 5px !important; }
  .tl-logo[src*="mobeedick"]   { width: 56px; height: 30px; }

  .tl-entry {
    position: relative;
    /* desktopowe left:150/top:var(--y) DZIAŁAJĄ na position:relative —
       muszą być wyzerowane, inaczej wpisy odjeżdżają w prawo i w dół */
    left: auto;
    top: auto;
    width: auto;
    margin-bottom: 12px; /* wpisy co 60px (48 wysokości + 12) */
  }

  .tl-entry:last-of-type { margin-bottom: 0; }

  .tl-dot {
    left: -26px;
    top: 6px;
  }

  /* na mobile nie ma wpisu Freelancing (wg projektu) */
  .tl-m4nu { display: none; }

  /* wpisy wjeżdżają z dołu, nie z prawej */
  .anim--entry .tl-role,
  .anim--entry .tl-date {
    transform: translateY(10px);
  }

  /* ---------- Języki ---------- */
  .about__languages {
    position: static;
    width: auto;
    margin-top: 32px;
  }

  .languages {
    margin-top: 20px;
    padding-left: 21px;
    font-size: 14px;
    line-height: 24px;
  }

  /* ---------- Footer (wg projektu: h86, linie 26/86) ---------- */
  .page-about .footer { margin-top: 32px; }

  .page-about .footer { height: 87px; }
  .page-about .footer::before { top: 26px; }
  .page-about .footer::after  { top: 86px; }
  .page-about .footer__copy   { top: 50px; }
}

/* ==========================================================================
   MOBILE MENU — fullscreen overlay + burger→X
   ========================================================================== */
.mmenu { display: none; }

@media (max-width: 767px) {
  /* nav (logo + burger/X) zostaje NAD overlayem */
  .nav { z-index: 60; }

  /* ---------- burger: 3 kreski rysowane w CSS ---------- */
  .nav__burger {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    z-index: 61;
  }

  .nav__burger-bar {
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: var(--color-text);
    transition:
      transform 0.3s cubic-bezier(0.33, 0, 0.2, 1),
      opacity 0.2s ease;
  }

  /* burger → X */
  .nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
  }
  .nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.4);
  }
  .nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
  }

  /* ---------- overlay ---------- */
  .mmenu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--color-bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }

  .mmenu.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease;
  }

  .mmenu__nav {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 160px;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .mmenu__nav a {
    font-size: 28px;
    line-height: 35px;
    font-weight: 700;
    width: fit-content;
  }

  .mmenu__social {
    position: absolute;
    left: 12px;
    bottom: 40px;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .mmenu__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--color-text);
    border-radius: 4px;
  }

  /* lekka animacja wejścia: pozycje wjeżdżają kaskadowo z dołu */
  .mmenu__nav a,
  .mmenu__social {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .mmenu.is-open .mmenu__nav a,
  .mmenu.is-open .mmenu__social {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.45s ease var(--d, 0s),
      transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s);
  }

  /* zablokuj scroll strony pod otwartym menu */
  body.menu-open {
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__burger-bar,
  .mmenu,
  .mmenu__nav a,
  .mmenu__social {
    transition: none !important;
  }
}

/* ==========================================================================
   CASE STUDY: PLAY — REDESIGN STRONY GŁÓWNEJ (desktop) — Figma 566:5920
   Współrzędne = Figma y − 69 (nav kończy się na y=69). Kontener 1224.
   ========================================================================== */
.page-play { overflow-x: hidden; }

.play {
  position: relative;
  height: 14344px;
  color: var(--color-text);
}

/* pełna szerokość (sekcje fioletowe) */
.play .bleed {
  position: absolute;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #48227c;
  overflow: hidden;
}

/* ---------- typografia case study ---------- */
.play__label {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 24px;
  margin-bottom: 16px;
}

.play__eyebrow {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(128, 128, 128, 0.85);
}

.play__eyebrow--bold  { font-weight: 700; }
.play__eyebrow--white { color: rgba(255, 255, 255, 0.85); }

.play__h42 {
  font-size: 42px;
  line-height: 1.4;
  font-weight: 400;
}

.play__h42--white   { color: #fff; }

.play__h40 {
  font-size: 40px;
  line-height: 58px;
  font-weight: 400;
  white-space: nowrap;
}

.play__h40--gray { color: var(--color-text-muted); }

.play__num {
  color: #6c43bf;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
}

/* ---------- 1. tytuł ---------- */
.play__title {
  position: absolute;
  left: 50%;
  top: 100px;
  transform: translateX(-50%);
  width: 926px;
  text-align: center;
  font-size: 40px;
  line-height: 58px;
  font-weight: 400;
  display: flex;
  flex-direction: column;
}

.play__title-sub { color: var(--color-text-muted); }

/* reveal + translateX na tytule — łączymy transformacje */
.play__title.reveal { transform: translate(-50%, 22px); }
.play__title.reveal.is-visible { transform: translate(-50%, 0); }

/* ---------- 2. hero ---------- */
.play__hero {
  position: absolute;
  left: 0;
  top: 310px;
  width: 1224px;
  height: 624px;
  border-radius: 16px;
  overflow: hidden;
}

.play__hero img,
.play__frame img,
.play__mock img,
.play__comp img,
.play__phones img,
.play__banners-img img,
.play__ux-photo img,
.play__results-photo img,
.play__challenge-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 3. kontekst + narzędzia ---------- */
.play__context {
  position: absolute;
  left: 0;
  top: 974px;
  width: 808px;
  font-size: 15px;
  line-height: 24px;
}

.play__context p + p:not(.play__label) { margin-top: 24px; }
.play__context strong { font-weight: 700; }

.play__tools {
  position: absolute;
  left: 1040px;
  top: 974px;
  width: 150px;
}

.play__tools .tools { margin-top: 0; }

/* ---------- 4. wyzwania ---------- */
.play__h2 {
  position: absolute;
  left: 0;
  font-size: 40px;
  line-height: 58px;
  font-weight: 400;
}

.play__h2--wyzwania { top: 1222px; }

/* ---------- 5. karta operator konwergentny ---------- */
.play__challenge {
  position: absolute;
  left: 0;
  top: 1320px;
  width: 1224px;
  height: 500px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}

.play__challenge-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 626px;
  height: 500px;
  overflow: hidden;
  border-radius: 16px 0 0 16px;
}

.play__challenge-icons {
  position: absolute;
  left: 674px;
  top: 48px;
}

.play__challenge-text {
  position: absolute;
  left: 674px;
  top: 287px;
  width: 499px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* ---------- 6. karty wyzwań ---------- */
.play__cards {
  position: absolute;
  left: 0;
  top: 1844px;
  width: 1224px;
  height: 328px;
  display: flex;
  gap: 24px;
}

.pcard {
  width: 288px;
  height: 328px;
  background: #fff;
  border-radius: 16px;
  padding: 32px 40px 0 20px;
  color: #26232c;
}

.pcard > .pcard__icon { margin-bottom: 20px; }

.pcard__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #f9f5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pcard h3 {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 700;
}

.pcard p {
  font-size: 15px;
  line-height: 1.5;
}

/* ---------- 7. band ---------- */
.play__band {
  position: absolute;
  left: 0;
  top: 2196px;
  width: 1224px;
  height: 186px;
  background: #fff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  text-align: center;
}

.play__band .play__h42 { width: 713px; }

/* ---------- 8. workflow ---------- */
.play__workflow {
  top: 2462px;
  height: 621px;
}

/* wewnętrzny kontener 1224 wycentrowany w bleedzie */
.play__workflow > *:not(.play__lines) {
  position: absolute;
}

.play__lines {
  position: absolute;
  left: 50%;
  top: 51px;
  width: 1224px;
  height: 782px;
  margin-left: -612px;
  pointer-events: none;
}

.play__lines i {
  position: absolute;
  top: 0;
  width: 3px;
  height: 100%;
  opacity: 0.38;
  background: linear-gradient(to bottom, #48227c 0%, rgba(132, 82, 199, 0.85) 54%, #fff 100%);
}

.play__lines i:nth-child(1)  { left: -26px; }
.play__lines i:nth-child(2)  { left: 102px; }
.play__lines i:nth-child(3)  { left: 230px; }
.play__lines i:nth-child(4)  { left: 358px; }
.play__lines i:nth-child(5)  { left: 486px; }
.play__lines i:nth-child(6)  { left: 614px; }
.play__lines i:nth-child(7)  { left: 742px; }
.play__lines i:nth-child(8)  { left: 870px; }
.play__lines i:nth-child(9)  { left: 998px; }
.play__lines i:nth-child(10) { left: 1126px; }

.play__workflow-head {
  left: calc(50% - 611px);
  top: 100px;
  width: 360px;
}

.wf {
  list-style: none;
  margin: 0;
  padding: 0;
  left: calc(50% - 611px);
  top: 228px;
  width: 1224px;
  height: 305px;
}

.wf__item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 336px;
}

.wf__pill {
  position: relative;
  display: block;
  height: 59px;
  border-radius: 64px;
  background: #fff;
  padding: 19px 0 0 32px;
  color: #6c43bf;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
}

.wf__pill--done {
  background: linear-gradient(90deg, #0a9653 55.5%, #54f6a8 110%);
  color: #fff;
    padding-left: 36px;
}

.wf__pill--done img {
  position: absolute;
  right: 16px;
  top: 15px;
}

.wf__desc {
  position: absolute;
  left: 32px;
  top: 68px;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}

.wf__desc--15 {
  top: 71px;
  font-size: 15px;
}

/* ---------- 9. mockupy + UX ---------- */
.play__ux {
  position: absolute;
  left: 1px;
  top: 3163px;
  width: 1223px;
  height: 1430px;
}

.play__ux-photo {
  position: absolute;
  left: 554px;
  top: 0;
  width: 777px;
  z-index: 0;
}

.play__mock { z-index: 2; }
.play__ux-heading,
.play__ux-list { z-index: 1; }

.play__ux-heading {
  position: absolute;
  left: -1px;
  top: 88px;
  width: 692px;
}

.play__ux-list {
  position: absolute;
  left: -1px;
  top: 235px;
  width: 613px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  color: #26232c;
  font-size: 15px;
  line-height: 1.5;
}

.play__ux-list hr {
  margin: 0;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.play__mock {
  position: absolute;
  border-radius: 16px;
  overflow: hidden;
}

.play__mock--laptop { left: 0;     top: 561px;  width: 600px; }
.play__mock--iphone { left: 624px; top: 618px;  width: 599px; }
.play__mock--ipad   { left: 0;     top: 1007px; width: 600px; }

/* ---------- 10–13. grids + desktop ---------- */
.play__grids,
.play__desktop { position: absolute; left: 0; width: 1224px; }

.play__grids  { top: 4673px; }
.play__desktop { top: 6212px; }

.play__grids h2,
.play__desktop h2 { position: absolute; left: 0; top: 0; width: 645px; }

.play__grids-desc {
  position: absolute;
  left: 0;
  top: 83px;
  width: 597px;
  color: #26232c;
  font-size: 15px;
  line-height: 1.5;
}

.play__frame {
  position: absolute;
  left: 0;
  display: block;
  border-radius: 16px;
  overflow: hidden;
}

.play__frame--wireframe { top: 170px; width: 1224px; }
.play__frame--desktop   { top: 99px;  width: 1224px; }

/* ---------- 14. porównanie mobile ---------- */
.play__compare {
  position: absolute;
  left: 0;
  top: 10233px;
  width: 1224px;
  height: 1073px;
}

.play__compare h2 { position: absolute; left: 0; top: 0; }

.play__compare-old { position: absolute; left: 285px; top: 138px; }
.play__compare-new { position: absolute; left: 840px; top: 142px; }

.play__phones {
  position: absolute;
  left: 58px;
  top: 195px;
  width: 1107px;
}

/* ---------- 15–17. komponenty ---------- */
.play__components {
  position: absolute;
  left: 0;
  top: 11387px;
  width: 1224px;
}

.play__components h2 { position: absolute; left: 0; top: 0; width: 692px; }

.play__components-desc {
  position: absolute;
  left: 0;
  top: 83px;
  width: 613px;
  color: #26232c;
  font-size: 16px;
  line-height: 1.5;
}

.play__comp {
  position: absolute;
  display: block;
  border-radius: 16px;
  overflow: hidden;
}

.play__comp--main   { left: 0;     top: 179px; width: 1224px; }
.play__comp--wide   { left: 0;     top: 703px; width: 912px; }
.play__comp--narrow { left: 936px; top: 703px; width: 288px; }

/* ---------- 18–19. guidelines ---------- */
.play__guidelines {
  position: absolute;
  left: 0;
  top: 12603px;
  width: 1224px;
}

.play__guidelines h2 { position: absolute; left: 0; top: 0; width: 692px; }

.play__guidelines-desc {
  position: absolute;
  left: 0;
  top: 83px;
  width: 613px;
  color: #26232c;
  font-size: 15px;
  line-height: 1.5;
}

.play__banners {
  position: absolute;
  left: 61px;
  top: 192px;
  width: 1102px;
  height: 589px;
}

.play__banners-old { position: absolute; left: 225px; top: 0; }
.play__banners-new { position: absolute; left: 780px; top: 0; }

.play__banner {
  position: absolute;
  top: 82px;
  width: 544.5px;
  display: block;
}

.play__banner img { width: 100%; height: auto; display: block; }
.play__banner--old { left: 0; }
.play__banner--new { left: 559px; }

/* ---------- 20. wynik ---------- */
.play__results {
  top: 13464px;
  height: 880px;
}

.play__results-inner {
  position: absolute;
  left: 50%;
  top: 80px;
  width: 1225px;
  height: 378px;
  margin-left: -612px;
}

.play__results-head {
  position: absolute;
  left: 0;
  top: 0;
  width: 360px;
}

.mcard {
  position: absolute;
  left: var(--x);
  top: 116px;
  width: 288px;
  height: 262px;
  background: #fff;
  border-radius: 8px;
  padding: 20px 20px 0 19px;
  color: #26232c;
  }

.mcard .pcard__icon { margin-bottom: 20px; }

.mcard h3 {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 700;
}

.mcard p {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
}

.play__results-photo {
  position: absolute;
  left: 50%;
  top: 473px;
  width: 720px;
  margin-left: -359.5px;
}

/* ---------- footer na tej stronie ---------- */
.page-play .footer { margin-top: 60px; }

/* ---------- parallax: warstwa GPU ---------- */
[data-parallax] {
  will-change: transform;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  [data-parallax] { transform: none !important; }
}


/* ---------- obrazy poniżej hero: spokojne wejście (scale-in) zamiast parallaxy ---------- */
.img-in img {
  transform: scale(1.04);
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.img-in.is-visible img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .img-in img { transform: none; transition: none; }
}

/* ==========================================================================
   CASE STUDY PLAY — automatyczna zmiana ekranów w telefonach (Stare / Nowe)
   ========================================================================== */
.play__phones { position: absolute; left: 58px; top: 195px; width: 1107px; height: 977px; }
.play__phones > picture img { width: 100%; height: auto; display: block; }

.phone {
  position: absolute;
  top: 0;
  width: 553.5px;
}

.phone--old { left: 0; }
.phone--new { left: 553.5px; }

.phone > picture img { width: 100%; height: auto; display: block; }

/* obszar ekranu wewnątrz ramki — w procentach, żeby skalował się na mobile
   (wykryty na eksporcie 2x: x86.5 y80.5 w374.5 h777.5 w telefonie 553.5×977) */
.pscreen {
  position: absolute;
  left: 15.63%;
  top: 8.24%;
  width: 67.66%;
  height: 79.58%;
  border-radius: 6.5% / 4.6%;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.pscreen__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.pscreen__slide img { width: 100%; height: 100%; display: block; }

.pscreen__slide.is-active { opacity: 1; }

/* loader / wskaźnik: 4 kropki, aktywna wydłuża się i wypełnia w tempie zmiany */
.pdots {
  position: absolute;
  left: 58px;
  top: 1105px;
  width: 1107px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.pdots__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #d9d9d9;
  overflow: hidden;
  transition: width 0.35s cubic-bezier(0.33, 0, 0.2, 1);
}

.pdots__dot i {
  position: absolute;
  inset: 0;
  background: var(--color-text);
  transform: scaleX(0);
  transform-origin: left;
}

.pdots__dot.is-active { width: 32px; }

.pdots__dot.is-active i {
  animation: pdot-fill var(--pdur, 4.5s) linear forwards;
}

@keyframes pdot-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pscreen__slide { transition: none; }
  .pdots__dot.is-active i { animation: none; transform: scaleX(1); }
}

/* ---------- swipe (mobile) — na desktopie neutralne ---------- */
.sdots { display: none; }

/* ---------- lightbox (powiększenie obrazów) ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 16, 24, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}

.lightbox__scroll {
  position: absolute;
  inset: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 56px 12px 24px;
}

.lightbox__scroll img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-zoom] { cursor: zoom-in; }

/* ==========================================================================
   CASE STUDY PLAY — MOBILE (≤767px) — Figma 584:7805 + wytyczne
   Marginesy 12px, zdjęcia pełnej szerokości 336, 12px między zdjęciami
   ========================================================================== */
@media (max-width: 767px) {
  .page-play .page { max-width: 420px; min-width: 0; }
  .page-play, .page-play html { overflow-x: clip; }

  .play { height: auto; padding-top: 39px; } /* 132 − 93 (dół nava) */

  .play .bleed {
    position: relative;
    left: 50%;
    top: auto;      /* desktopowe top: 2462/13464px działa na relative — wyzerowane */
    height: auto;   /* desktopowe 621/880px */
    width: 100vw;
    transform: translateX(-50%);
  }

  /* wspólne: sekcje w flow */
  .play__title, .play__hero, .play__context, .play__tools, .play__h2,
  .play__challenge, .play__cards, .play__band, .play__ux, .play__grids, .play__desktop,
  .play__compare, .play__components, .play__guidelines,
  .play__ux-heading, .play__ux-list, .play__mock, .play__grids h2, .play__desktop h2,
  .play__grids-desc, .play__frame, .play__compare h2, .play__compare-old, .play__compare-new,
  .play__phones, .pdots, .play__components h2, .play__components-desc, .play__comp,
  .play__guidelines h2, .play__guidelines-desc, .play__banners, .play__banners-old,
  .play__banners-new, .play__banner, .play__results-inner, .play__results-head, .play__results-photo,
  .phone, .wf, .wf__item, .play__workflow-head {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
    height: auto;
    margin-left: 0;
    transform: none;
  }

  /* typografia mobile */
  .play__h42, .play__h40, .play__h2, .play__title {
    font-size: 24px;
    line-height: 32px;
    white-space: normal;
  }

  .play__title { text-align: center; gap: 0; }
  .play__title.reveal { transform: translateY(22px); }
  .play__title.reveal.is-visible { transform: none; }

  .play__label { margin-bottom: 8px; }

  /* 2. hero */
  .play__hero { margin-top: 24px; height: auto; border-radius: 4.4px; }
  .play__hero img { width: 100%; height: auto; display: block; }

  /* 3. kontekst + narzędzia */
  .play__context { margin-top: 24px; font-size: 14px; }
  .play__context p + p:not(.play__label) { margin-top: 16px; }
  .play__tools { margin-top: 24px; }
  .play__tools .play__label { margin-bottom: 11px; }

  /* 4. wyzwania */
  .play__h2--wyzwania { margin-top: 40px; }

  /* 5. karta konwergentna */
  .play__challenge {
    margin-top: 40px;
    height: auto;
    border: 1px solid #e4e4e4;
    border-radius: 12px;
    padding: 0 20px 32px;
  }

  .play__challenge-img {
    position: relative;
    width: calc(100% + 40px);
    margin: 0 -20px;
    height: 280px;
    border-radius: 12px 12px 0 0;
  }

  .play__challenge-img img { width: 100%; height: 100%; object-fit: cover; }

  .play__challenge-icons {
    position: static;
    display: block;
    width: 172px;
    height: auto;
    margin-top: 40px;
  }

  .play__challenge-text {
    position: static;
    width: auto;
    margin-top: 24px;
    gap: 12px;
  }

  /* 6. karty wyzwań — swipe */
  .swipe {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px;
    padding: 0 12px;
  }

  .swipe::-webkit-scrollbar { display: none; }

  .swipe > article {
    flex: 0 0 268px;
    scroll-snap-align: start;
    border: 1px solid #e4e4e4;
  }

  .play__cards { margin-top: 16px; position: relative; }

  .sdots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
  }

  .sdots i {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #d6d6d6;
    transition: background 0.3s ease, width 0.3s ease;
  }

  .sdots i.is-active { background: #000; }
  .sdots--light i { background: rgba(255, 255, 255, 0.35); }
  .sdots--light i.is-active { background: #fff; }

  /* 7. band */
  .play__band {
    margin-top: 40px;
    height: 173px;
    border: 1px solid #e4e4e4;
    border-radius: 12px;
    gap: 12px;
  }

  .play__band .play__h42 { width: auto; }

  /* 8. workflow */
  .play__workflow {
    margin-top: 40px;
    padding: 51px 12px 51px;
  }

  .play__workflow > *:not(.play__lines) { position: static; }

  .play__lines { position: absolute; left: 0; top: 51px; width: 100%; margin-left: 0; height: 782px; }
  .play__lines i:nth-child(1) { left: 83px; }
  .play__lines i:nth-child(2) { left: 211px; }
  .play__lines i:nth-child(3) { left: 339px; }
  .play__lines i:nth-child(n+4) { display: none; }

  .play__workflow-head { position: relative; padding-left: 16px; width: 259px; }
  .play__workflow-head .play__h42 { margin-top: 12px; }

  .wf { position: relative; margin-top: 36px; display: flex; flex-direction: column; gap: 24px; }
  .wf__item { position: relative; width: 100%; }
  .wf__pill { position: relative; }
  .wf__desc { position: static; display: block; width: auto !important; margin: 12px 0 0 32px; }

  /* 9. UX: bez zdjęcia, mockupy jeden pod drugim */
  .play__ux { margin-top: 40px; display: flex; flex-direction: column; }
  .play__ux-photo { display: none; }
  .play__ux-heading { order: 1; }
  .play__ux-list { order: 2; margin-top: 8px; font-size: 14px; }
  .play__ux-list hr { width: 100% !important; }
  .play__mock { border-radius: 12px; }
  .play__mock--laptop { order: 3; margin-top: 24px; }
  .play__mock--ipad   { order: 4; margin-top: 12px; }
  .play__mock--iphone { order: 5; margin-top: 12px; border: 1px solid #e4e4e4; }
  .play__mock img { width: 100%; height: auto; }

  /* 10–13. grids + desktop: heading, body, foto */
  .play__grids, .play__desktop { margin-top: 40px; }
  .play__grids-desc { margin-top: 8px; font-size: 14px; line-height: 24px; }
  .play__frame { margin-top: 24px; border-radius: 12px; }
  .play__frame img { width: 100%; height: auto; }

  /* 14. porównanie: Nowe → telefon → Stare → telefon → kropki (kolejność DOM ustawia JS) */
  .play__compare { margin-top: 40px; display: flex; flex-direction: column; }
  .play__compare-new,
  .play__compare-old { margin-top: 24px; }
  .phone { position: relative; width: 100%; margin-top: 12px; }
  .pdots { margin-top: 16px; }

  /* 15–17. komponenty */
  .play__components { margin-top: 40px; }
  .play__components-desc { margin-top: 8px; font-size: 14px; line-height: 24px; }
  .play__comp { border-radius: 12px; margin-top: 12px; }
  .play__comp--main { margin-top: 24px; }
  .play__comp img { width: 100%; height: auto; }

  /* 18–19. guidelines: Nowe, potem Stare */
  .play__guidelines { margin-top: 40px; }
  .play__guidelines-desc { margin-top: 8px; font-size: 14px; line-height: 24px; }
  .play__banners { margin-top: 24px; display: flex; flex-direction: column; }
  .play__banners-new { order: 1; }
  .play__banner--new { order: 2; margin-top: 12px; }
  .play__banners-old { order: 3; margin-top: 24px; }
  .play__banner--old { order: 4; margin-top: 12px; }
  .play__banner img { width: 100%; height: auto; }

  /* 20. wynik */
  .play__results { margin-top: 40px; padding: 51px 12px 0; }
  .play__results-inner { width: auto; }
  .play__results-head .play__h42 { margin-top: 12px; }
  .mcards { margin-top: 32px; }
  .mcard { position: relative; left: auto; top: auto; height: auto; min-height: 262px; border-radius: 16px; border: none; }
  .play__results-photo { margin: 32px auto 0; width: 100%; }
  .play__results-photo img { width: 100%; height: auto; }

  .page-play .footer { margin-top: 36px; }
}

/* ==========================================================================
   CASE STUDY: TVN24 — REDESIGN MOBILNEJ STRONY GŁÓWNEJ (desktop) — Figma 584:8263
   Współrzędne = Figma y − 69. Bazuje na komponentach case study Play.
   ========================================================================== */
.play.tvn { height: 15034px; }

.tvn__h-bench  { top: 1150px; }
.tvn__h-design { top: 1938px; }

.tvn__bench {
  position: absolute;
  left: 0;
  top: 1248px;
  width: 1224px;
  display: block;
  border-radius: 16px;
  overflow: hidden;
}

.tvn__bench img { width: 100%; height: auto; display: block; }

/* Wersja A / B */
.tvn__ab {
  position: absolute;
  left: 0;
  top: 2036px;
  width: 1224px;
  height: 841px;
}

.tvn__version {
  position: absolute;
  top: 0;
  width: 600px;
  margin: 0;
}

.tvn__version--a { left: 0; }
.tvn__version--b { left: 624px; }

.tvn__version img { width: 100%; height: auto; display: block; }

.tvn__version figcaption {
  position: absolute;
  left: 0;
  right: 0;
  top: 42px;
  text-align: center;
  z-index: 1;
}

/* Adnotowany zrzut wersji B */
.tvn__anno {
  position: absolute;
  left: 0;
  top: 3015px;
  width: 1224px;
  height: 12088px;
}

.tvn__anno-eyebrow {
  position: absolute;
  left: 565px; /* środek linii i ekranu (blok 13→1117), nie kontenera */
  top: 0;
  transform: translateX(-50%);
  padding: 0 24px;
  background: var(--color-bg); /* plakietka przykrywa linię */
  text-align: center;
  white-space: nowrap;
  z-index: 1;
}

.tvn__anno-eyebrow.reveal { transform: translate(-50%, 22px); }
.tvn__anno-eyebrow.reveal.is-visible { transform: translate(-50%, 0); }

.tvn__anno-rule {
  position: absolute;
  left: 13px;
  top: 9px;
  width: 1104px;
  margin: 0;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.tvn__screen {
  position: absolute;
  left: 390px;
  top: 37px;
  width: 360px;
}

.tvn__screen picture { display: block; }
.tvn__screen img { width: 100%; height: auto; display: block; }

/* adnotacje: linia 100px + etykieta 16px bold */
.note {
  position: absolute;
  top: calc(var(--y) - 3015px);
  height: 24px;
  color: #26232c;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  white-space: nowrap;
}

.note__line {
  position: absolute;
  top: 13px;
  width: 100px;
  border-top: 1px solid #000;
  transform-origin: left;
}

/* lewa strona — lustrzane odbicie prawej: linia 378→478 (kończy 20px przed ekranem),
   etykieta 10px przed linią */
.note--left { right: 964px; text-align: right; } /* etykieta kończy się na x=260 (kontener), linia 270→370, ekran od 390 */
.note--left .note__line { left: 100%; margin-left: 10px; }

.note--right { left: 880px; }
.note--right .note__line { right: 100%; margin-right: 10px; }

.note__text { display: block; }

/* animacja wejścia adnotacji: linia rysuje się od ekranu do etykiety, etykieta fade */
.note.reveal { opacity: 1; transform: none; }
.note .note__line { transform: scaleX(0); transition: transform 0.6s cubic-bezier(0.33, 0, 0.15, 1) 0.1s; }
.note--left .note__line { transform-origin: right; }
.note .note__text { opacity: 0; transition: opacity 0.5s ease 0.5s; }
.note.is-visible .note__line { transform: scaleX(1); }
.note.is-visible .note__text { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .note .note__line, .note .note__text { transform: none !important; opacity: 1 !important; transition: none !important; }
}


/* ==========================================================================
   TVN24 — MOBILE (≤767px), wzorzec z case study Play
   ========================================================================== */
@media (max-width: 767px) {
  .play.tvn { height: auto; }

  .tvn__h-bench, .tvn__h-design { margin-top: 40px; }

  .tvn__bench {
    position: static;
    width: 100%;
    margin-top: 24px;
    border-radius: 12px;
  }

  /* Wersja A / B — jedna pod drugą */
  .tvn__ab {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .tvn__version {
    position: relative;
    left: auto;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
  }

  .tvn__version figcaption { top: 7%; }

  /* Adnotowany zrzut */
  .tvn__anno {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
  }

  /* "Projekt wersji B" jako nagłówek sekcji (jak "Design"), do lewej */
  .tvn__anno-eyebrow {
    position: static;
    transform: none;
    padding: 0;
    order: 1;
    font-size: 24px;
    line-height: 32px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text);
    text-align: left;
    background: none;
    white-space: normal;
  }

  .tvn__anno-eyebrow.reveal { transform: translateY(22px); }
  .tvn__anno-eyebrow.reveal.is-visible { transform: none; }

  .tvn__anno-rule { display: none; }

  .tvn__screen {
    order: 2;
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin-top: 24px;
    border-radius: 12px;
    overflow: visible;
  }

  .tvn__screen picture:first-of-type img { border-radius: 12px 12px 0 0; }
  .tvn__screen picture:last-of-type img  { border-radius: 0 0 12px 12px; }

  .note { display: none; }
}

/* ==========================================================================
   CASE STUDY: MEMECRYPTO — desktop — Figma 586:25668 (y − 69), kontener 1224
   ========================================================================== */
.play.meme { height: 15546px; } /* koniec ostatniej miniatury (14033 + 1513) */

.meme__tools { left: 1027px; width: 197px; }

.meme__section { position: absolute; left: 0; width: 1224px; }
.meme__section > h2 { position: absolute; left: 0; top: 0; }

.meme__section picture { display: block; }
.meme__section img { width: 100%; height: auto; display: block; }

/* Branding */
.meme__branding { top: 1126px; height: 622px; }
.meme__brand { position: absolute; top: 98px; border-radius: 16px; overflow: hidden; }
.meme__brand--1 { left: 0; width: 457px; }
.meme__brand--2 { left: 470px; width: 754px; }

/* UI/UX Design — full-bleed 1452px od lewej krawędzi strony */
.meme__ux {
  top: 1807px;
  left: -108px;
  width: 1452px;
  height: 1531px; /* mieści cień pod telefonami */
}

.meme__ux > h2 { left: 108px; }

.meme__uxcard { position: absolute; border-radius: 16px; overflow: hidden; }
.meme__uxcard--1 { left: 108px; top: 100px; width: 703px; }
.meme__uxcard--2 { left: 838px; top: 99px; width: 496px; }

.meme__phones { position: absolute; left: 0; top: 675px; width: 1440px; }

/* Długie zrzuty */
.meme__homepage { top: 3454px; height: 2864px; }
.meme__article  { top: 6399px; height: 3338px; }
.meme__mobile   { top: 9801px; height: 4151px; }

.meme__long { position: absolute; top: 98px; border-radius: 16px; overflow: hidden; }
.meme__long--home    { left: 0; width: 1223px; }
.meme__long--article { left: 0; width: 1224px; }
.meme__long--mobile  { left: 260px; width: 704.5px; }

/* YouTube */
.meme__yt { top: 14033px; height: 1513px; }
.meme__thumb { position: absolute; left: 0; width: 1223px; border-radius: 16px; overflow: hidden; }
.meme__thumb--1 { top: 98px; }
.meme__thumb--2 { top: 825px; }

/* ==========================================================================
   MEMECRYPTO — MOBILE (≤767px), wzorzec z case study Play
   ========================================================================== */
@media (max-width: 767px) {
  .play.meme { height: auto; }

  .meme__section {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 40px;
    left: auto;
    top: auto;
    overflow: visible;
  }

  .meme__section > h2 { position: static; }

  .meme__brand, .meme__uxcard, .meme__phones, .meme__long, .meme__thumb {
    position: static;
    width: 100%;
    margin-top: 12px;
    border-radius: 12px;
  }

  .meme__brand--1, .meme__uxcard--1, .meme__long, .meme__thumb--1 { margin-top: 24px; }

  .meme__ux > h2 { left: auto; }
}

/* ==========================================================================
   CASE STUDY: PLAY — LANDING PAGE USŁUG HOME — desktop — Figma 586:32014
   Współrzędne = Figma y − 69, x − 108. Kontener 1224.
   ========================================================================== */
.play.lp { height: 15332px; }

.lp__tools { left: 1045px; width: 145px; }

/* Wyzwania */
.lp__challenges { position: absolute; left: 0; top: 1126px; width: 808px; }
.lp__challenges .play__label { margin-bottom: 16px; }
.lp__list { position: static; width: 613px; }

/* Workflow */
.lpwf { position: absolute; left: 0; top: 1530px; width: 1224px; height: 233px; }
.lpwf__head { position: absolute; left: 0; top: 0; width: 360px; }

.lpwf__bar {
  position: absolute;
  left: 0;
  top: 214.5px;
  width: 1221.8px;
  height: 11px;
  border-radius: 26.5px;
  background: linear-gradient(90deg, #efefef 1%, #512c9a 47.5%, #efefef 100%);
}

.lpwf__steps { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; top: 116px; width: 1224px; height: 117px; }

.lpwf__step { position: absolute; top: 0; height: 117px; }
.lpwf__step--1 { left: 0;        width: 143.9px; }
.lpwf__step--2 { left: 229.1px;  width: 143.9px; }
.lpwf__step--3 { left: 458.2px;  width: 252.3px; }
.lpwf__step--4 { left: 795.7px;  width: 171.5px; }
.lpwf__step--5 { left: 1052.5px; width: 171.5px; }

.lpwf__pill {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 66.4px;
  border-radius: 70.8px;
  background: #efe9fd;
  color: #6c43bf;
  font-size: 15.5px;
  font-weight: 700;
  text-align: center;
  padding-top: 22px;
  line-height: 1.5;
  white-space: nowrap;
}

.lpwf__pill--two { padding-top: 13px; line-height: 1.3; }

.lpwf__arrow {
  position: absolute;
  left: 50%;
  top: 59.8px;
  width: 31px;
  height: 15.5px;
  transform: translateX(-50%) rotate(180deg);
}

.lpwf__dot {
  position: absolute;
  left: 50%;
  top: 90.75px;
  width: 26.6px;
  height: 26.6px;
  transform: translateX(-50%);
}

/* pasek rysuje się poziomo, pigułki wchodzą kaskadowo */
.anim--line-x { transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(0.33, 0, 0.15, 1); }
.anim--line-x.is-visible { transform: scaleX(1); }

/* PlayLAB */
.lplab { position: absolute; left: 0; top: 1843px; width: 1224px; height: 1426px; }
.lplab__head { position: absolute; left: 0; top: 0; width: 360px; }

.lplab__photo { position: absolute; display: block; border-radius: 16px; overflow: hidden; }
.lplab__photo img { width: 100%; height: auto; display: block; }
.lplab__photo--1    { left: 0;     top: 116px; width: 660px; }
.lplab__photo--2    { left: 680px; top: 532px; width: 262px; }
.lplab__photo--3    { left: 962px; top: 532px; width: 262px; }
.lplab__photo--wide { left: 0;     top: 864px; width: 1226.5px; }

.lplab__card {
  position: absolute;
  left: 676px;
  top: 116px;
  width: 546px;
  height: 396px;
  background: #fff;
  border-radius: 16px;
  padding: 48px 35px 0 32px;
  color: #26232c;
}

.lplab__card .pcard__icon { margin-bottom: 20px; }
.lplab__card h3 { margin: 0 0 16px; font-size: 20px; line-height: 1.5; font-weight: 700; }
.lplab__card p { font-size: 16px; line-height: 1.5; width: 479px; }

/* Mobile first */
.lpmob { position: absolute; left: 0; top: 3349px; width: 1224px; height: 11983px; }
.lpmob > h2 { position: absolute; left: 0; top: 0; width: 495px; }

.lpcard {
  position: absolute;
  width: 542px;
  height: 585px;
  margin: 0;
  background: #fff;
  border-radius: 16px;
}

.lpcard figcaption {
  position: absolute;
  left: 0; right: 0;
  top: 38px;
  text-align: center;
}

.lpcard picture { position: absolute; left: 106px; top: 80px; display: block; }
.lpcard img { display: block; height: auto; }

.lpcard--1 { left: 56px;  top: 173px; }
.lpcard--2 { left: 635px; top: 173px; }
.lpcard--3 { left: 48px;  top: 1270px; }
.lpcard--4 { left: 627px; top: 1270px; }
.lpcard--5 { left: 56px;  top: 1907px; }
.lpcard--6 { left: 635px; top: 1907px; }

.lpcard--1 picture { width: 333px; }
.lpcard--2 picture { width: 331px; }
.lpcard--3 picture { left: 103px; top: -171px; width: 335px; }
.lpcard--4 picture { left: 106px; top: -166px; width: 331px; }
.lpcard--3 figcaption, .lpcard--4 figcaption { top: -213px; }
.lpcard--5 picture { width: 331px; }
.lpcard--6 picture { width: 332px; }

.lpmob__rule { position: absolute; left: 55px; top: 2747px; width: 1105px; margin: 0; border: none; border-top: 1px solid rgba(0,0,0,.1); }
.lpmob__old { position: absolute; left: 255px; top: 2827px; }
.lpmob__new { position: absolute; left: 873px; top: 2827px; }

.lpmob__long { position: absolute; top: 2927px; }
.lpmob__long picture { display: block; }
.lpmob__long img { width: 100%; height: auto; display: block; }
.lpmob__long--old { left: 109px; width: 358.5px; }
.lpmob__long--new { left: 735px; width: 362px; }

/* ==========================================================================
   PLAY LP — MOBILE (≤767px)
   ========================================================================== */
@media (max-width: 767px) {
  .play.lp { height: auto; }

  .lp__challenges { position: static; width: auto; margin-top: 40px; }
  .lp__list { width: auto; font-size: 14px; }
  .lp__list hr { width: 100% !important; }

  .lpwf { position: static; width: auto; height: auto; margin-top: 40px; }
  .lpwf__head { position: static; width: auto; }
  .lpwf__head .play__h42 { margin-top: 12px; }
  .lpwf__bar, .lpwf__arrow, .lpwf__dot { display: none; }
  .lpwf__steps { position: static; width: auto; height: auto; margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
  .lpwf__step { position: static; width: auto !important; height: auto; }
  .lpwf__pill {
    position: static;
    display: block;
    height: auto;             /* sztywne 59px ucinało dwuliniowy tekst */
    padding: 18px 16px;
    line-height: 1.5;
    white-space: normal;
  }
  .lpwf__pill--two { padding: 18px 16px; }

  .lplab { position: static; width: auto; height: auto; margin-top: 40px; display: flex; flex-direction: column; }
  .lplab__head { position: static; width: auto; }
  .lplab__head .play__h42 { margin-top: 12px; }
  .lplab__photo { position: static; width: 100% !important; margin-top: 12px; border-radius: 12px; }
  .lplab__photo--1 { margin-top: 24px; }
  .lplab__card { position: static; width: auto; height: auto; margin-top: 12px; padding: 32px 20px; }
  .lplab__card p { width: auto; font-size: 14px; }

  .lpmob { position: static; width: auto; height: auto; margin-top: 40px; display: flex; flex-direction: column; }
  .lpmob > h2 { position: static; width: auto; }
  .lpcard {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: 100%;
    height: 480px;          /* telefon przycięty dołem karty, jak na desktopie */
    margin-top: 12px;
    padding: 24px 0 0;
    border-radius: 12px;
    overflow: hidden;
  }
  .lpcard--1 { margin-top: 24px; }
  .lpcard figcaption { position: static; }
  /* telefon: wycentrowany, skalowany do karty (desktopowe left/top/width wyzerowane) */
  .lpcard picture,
  .lpcard--3 picture,
  .lpcard--4 picture {
    position: static;
    left: auto;
    top: auto;
    width: 280px;
    max-width: calc(100% - 32px);
    margin: 16px auto 0;
  }
  .lpcard--3 figcaption, .lpcard--4 figcaption { top: auto; }
  .lpcard img { width: 100%; height: auto; }
  .lpcard picture { position: static; width: 62% !important; margin: 20px auto 0; }
  .lpcard--3 figcaption, .lpcard--4 figcaption { top: auto; }
  .lpmob__rule,
  .lpmob__new,
  .lpmob__old,
  .lpmob__long--old { display: none; } /* mobile: tylko nowy projekt */
  .lpmob__long--new { position: static; order: 11; width: 100%; margin-top: 24px; }
  .lpmob__long { border-radius: 12px; overflow: hidden; }
}

/* ==========================================================================
   CASE STUDY: MEETIO — desktop — Figma 591:39445 (y − 69, x − 108), kontener 1224
   ========================================================================== */
.play.meet { height: 6725px; } /* koniec ostatniego ekranu (2270 + 3619 + 836) */

.meet__tools { left: 1045px; width: 145px; }

.meet__section { position: absolute; left: 0; width: 1224px; }
.meet__section > h2 { position: absolute; left: 0; top: 0; }

.meet__section picture { display: block; }
.meet__section img { width: 100%; height: auto; display: block; }

/* Branding */
.meet__branding { top: 1126px; height: 1064px; }
.meet__brand { position: absolute; border-radius: 16px; overflow: hidden; }
.meet__brand--top    { left: 0;       top: 98px;     width: 598.6px; }
.meet__brand--phone  { left: 620.7px; top: 98px;     width: 603px; }
.meet__brand--bottom { left: 0;       top: 737.6px;  width: 598.6px; }

/* UI Design */
.meet__ui { top: 2270px; height: 4455px; }

.meet__mockup { position: absolute; left: 0; top: 98px; width: 1224px; border-radius: 16px; overflow: hidden; }

.meet__screen { position: absolute; width: 360px; border-radius: 16px; overflow: hidden; }
.meet__screen--1 { left: 244px; top: 778px; }
.meet__screen--2 { left: 628px; top: 778px; }
.meet__screen--3 { left: 628px; top: 1614px; }
.meet__screen--4 { left: 244px; top: 2309px; }
.meet__screen--5 { left: 628px; top: 2811px; }
.meet__screen--6 { left: 628px; top: 3619px; }

/* ==========================================================================
   MEETIO — MOBILE (≤767px), wzorzec z case study memecrypto
   ========================================================================== */
@media (max-width: 767px) {
  .play.meet { height: auto; }

  .meet__section {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 40px;
    left: auto;
    top: auto;
    overflow: visible;
  }

  .meet__section > h2 { position: static; }

  .meet__brand, .meet__mockup, .meet__screen {
    position: static;
    width: 100%;
    margin-top: 12px;
    border-radius: 12px;
  }

  .meet__brand--top, .meet__mockup { margin-top: 24px; }
}

/* ==========================================================================
   CASE STUDY: LANDING PAGES — desktop — Figma 598:44649 (y − 69, x − 108), kontener 1224
   ========================================================================== */
.play.lps { height: 20631px; } /* koniec obrazu Play x HBO Max (15716 + 99 + 4816) */

.lps__section { position: absolute; left: 0; width: 1224px; }
.lps__section > h2 { position: absolute; left: 0; top: 0; }

.lps__section picture { display: block; }
.lps__section img { width: 100%; height: auto; display: block; }

/* Arion Hotel — desktop + mobile obok siebie */
.lps__arion { top: 974px; height: 5453.9px; }
.lps__arion-desktop { position: absolute; left: 0; top: 98px; width: 821.3px; border-radius: 16px; overflow: hidden; }
.lps__arion-mobile  { position: absolute; left: 871.3px; top: 98px; width: 352.5px; border-radius: 16px; overflow: hidden; }

/* Dentalcare */
.lps__dental { top: 6508px; height: 5261.9px; }

/* DILLUXE */
.lps__dilluxe { top: 11860px; height: 3775.9px; }

/* Play x HBO Max */
.lps__hbo { top: 15716px; height: 4915px; }

.lps__long { position: absolute; left: 0; top: 98px; width: 1223.8px; border-radius: 16px; overflow: hidden; }
.lps__long--hbo { top: 99px; width: 1224px; }

/* ==========================================================================
   LANDING PAGES — MOBILE (≤767px), wzorzec z case study memecrypto
   ========================================================================== */
@media (max-width: 767px) {
  .play.lps { height: auto; }

  .lps__section {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 40px;
    left: auto;
    top: auto;
    overflow: visible;
  }

  .lps__section > h2 { position: static; }

  .lps__arion-desktop, .lps__arion-mobile, .lps__long {
    position: static;
    width: 100%;
    margin-top: 12px;
    border-radius: 12px;
  }

  .lps__arion-desktop, .lps__long { margin-top: 24px; }
  .lps__arion-mobile { width: 70%; margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   CASE STUDY: PLAY — OFERTA PRE-RETENCYJNA — desktop — Figma 605:8245
   Współrzędne = Figma y − 69, x − 108. Kontener 1224.
   ========================================================================== */
.play.ret { height: 10603px; } /* koniec sekcji Wynik (9723 + 880) */

.ret__tools { left: 1045px; width: 145px; }

.ret__section { position: absolute; left: 0; width: 1224px; }
.ret__section > h2 { position: absolute; left: 0; top: 0; }
.ret__section picture { display: block; }
.ret__section picture img { width: 100%; height: auto; display: block; }

/* Najważniejsze painy — karty jak .pcard (play-redesign), grid 1104 przesunięty o 61px */
.ret__pains { top: 1238px; height: 816px; }
.ret__grid { position: absolute; left: 61px; top: 98px; width: 1104px; height: 718px; }

.ret__card {
  position: absolute;
  width: 266px;
  height: 285px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e4e4e4;
  padding: 32px 20px 0 20px;
  color: #26232c;
}
.ret__card .pcard__icon { margin-bottom: 20px; }
.ret__card h3 { margin: 0 0 12px; font-size: 20px; line-height: 1.5; font-weight: 700; }
.ret__card p { margin: 0; font-size: 15px; line-height: 1.5; }

.pcard__icon--bad  { background: #fdedee; }
.pcard__icon--good { background: #e3ffe6; }

.ret__grid img.ret__arrow { position: absolute; top: 309px; width: 11.5px; height: 105.3px; transform: translateX(-50%); }

/* Analiza */
.ret__analysis { top: 2134px; height: 3153px; }
.ret__collage { position: absolute; left: 60px; top: 98px; width: 1104px; border-radius: 16px; overflow: hidden; }

/* Design */
.ret__design { top: 5367px; height: 4276px; }
.ret__design-mobile  { position: absolute; left: 59px;  top: 98px; width: 323px; border-radius: 16px; overflow: hidden; }
.ret__design-desktop { position: absolute; left: 400px; top: 98px; width: 764px; border-radius: 16px; overflow: hidden; }

/* Wynik — wzorzec .play__results/.bleed z play-redesign; tylko inny top + grafika podium */
.play__results.ret__results { top: 9723px; }
.ret__podium.play__results-photo { top: 572px; width: 1365.5px; margin-left: -682.75px; }
.ret__podium img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   PLAY PRE-RETENCJA — MOBILE (≤767px), wzorzec z case study play-redesign / memecrypto
   ========================================================================== */
@media (max-width: 767px) {
  .play.ret { height: auto; }

  .ret__section {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 40px;
    left: auto;
    top: auto;
    overflow: visible;
  }

  .ret__section > h2 { position: static; }

  /* painy — stack */
  .ret__grid { position: static; width: 100%; height: auto; margin-top: 24px; }
  .ret__card { position: static !important; width: 100%; height: auto; margin-top: 12px; padding-bottom: 32px; border-radius: 12px; }
  .ret__card:first-child { margin-top: 0; }
  .ret__grid img.ret__arrow { display: none; }

  .ret__collage,
  .ret__design-mobile,
  .ret__design-desktop {
    position: static;
    width: 100%;
    margin-top: 12px;
    border-radius: 12px;
  }
  .ret__collage, .ret__design-mobile { margin-top: 24px; }
  .ret__design-mobile { width: 70%; margin-left: auto; margin-right: auto; }

  /* Wynik — dziedziczy z .play__results mobile (swipe + kropki); podium jak results-photo */
  .play__results.ret__results { top: auto; }
  .ret__podium.play__results-photo { width: 140%; margin: 32px 0 0 -20%; }
}

/* ==========================================================================
   CASE STUDY: TRADDLY — desktop — Figma 605:11873 (y − 69, x − 108), kontener 1224
   ========================================================================== */
.play.trd { height: 20488px; } /* koniec obrazu Raporty (14728 + 192 + 5568) */

.trd__tools { left: 1027px; width: 197px; }

.trd__section { position: absolute; left: 0; width: 1224px; }
.trd__section > h2 { position: absolute; left: 0; top: 0; }
.trd__section picture { display: block; }
.trd__section picture img { width: 100%; height: auto; display: block; }

/* Branding — dwa kafle */
.trd__branding { top: 1262px; height: 622px; }
.trd__brand-left  { position: absolute; left: 0;        top: 98px; width: 456.6px; border-radius: 16px; overflow: hidden; }
.trd__brand-right { position: absolute; left: 469.8px;  top: 98px; width: 753.9px; border-radius: 16px; overflow: hidden; }

/* UI/UX Design — iPad + iPhone */
.trd__ui { top: 1963px; height: 668px; }
.trd__ui-ipad   { position: absolute; left: 0;     top: 100px;  width: 703px; border-radius: 16px; overflow: hidden; }
.trd__ui-iphone { position: absolute; left: 730px; top: 98.9px; width: 496px; border-radius: 16px; overflow: hidden; }

/* Homepage — pełny projekt */
.trd__homepage { top: 2721px; height: 5720px; }
.trd__long { position: absolute; left: 0; top: 98px; width: 1224px; border-radius: 16px; overflow: hidden; }

/* Wskaźniki — długi zrzut wdrożenia + nakładka aktualnego hero */
.trd__wskazniki { top: 8527px; height: 6111px; }
.trd__shot { position: absolute; left: 0; top: 117.8px; width: 1222px; }
.trd__shot-long { display: block; border-radius: 16px; overflow: hidden; }
.trd__shot-top {
  position: absolute;
  left: 6.955%;   /* 85 / 1222 */
  top: 0.0703%;   /* (122 − 117.8) / 5993 */
  width: 87.643%; /* 1071 / 1222 */
  display: block;
}

/* Raporty */
.trd__raporty { top: 14728px; height: 5760px; }
.trd__long--raporty { top: 192px; width: 1223.5px; }

/* ==========================================================================
   TRADDLY — MOBILE (≤767px), wzorzec z case study memecrypto
   ========================================================================== */
@media (max-width: 767px) {
  .play.trd { height: auto; }

  .trd__section {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 40px;
    left: auto;
    top: auto;
    overflow: visible;
  }

  .trd__section > h2 { position: static; }

  .trd__brand-left, .trd__brand-right,
  .trd__ui-ipad, .trd__ui-iphone,
  .trd__long {
    position: static;
    width: 100%;
    margin-top: 12px;
    border-radius: 12px;
  }
  .trd__brand-left, .trd__ui-ipad, .trd__long { margin-top: 24px; }

  .trd__shot { position: relative; width: 100%; margin-top: 24px; }
  .trd__shot-long { border-radius: 12px; }
  /* nakładka zostaje w tych samych proporcjach nad zrzutem */
}

/* ==========================================================================
   CASE STUDY: MILOKA — desktop — Figma 608:9335 (y − 69, x − 108), kontener 1224
   Branding i UI/UX reużywają siatki traddly (identyczne pozycje w Figmie).
   ========================================================================== */
.play.mlk { height: 9624px; } /* koniec obrazu Karta produktu (6900 + 98 + 2626) */

.mlk__tools { left: 1027px; width: 144px; }

/* Homepage — 4 zrzuty wdrożonego sklepu jako jeden obraz */
.mlk__homepage { top: 2721px; height: 4089px; }

/* Karta produktu */
.mlk__karta { top: 6900px; height: 2724px; }

/* Mobile dziedziczy w całości z reguł .trd__* (≤767px). */

/* MILOKA — MOBILE: reguły .mlk__* stoją w arkuszu za mobilnym resetem .trd__*,
   więc sztywne height/top wygrywały kaskadą — tu je zerujemy. */
@media (max-width: 767px) {
  .play.mlk { height: auto; }
  .mlk__homepage, .mlk__karta { top: auto; height: auto; }
}

/* ==========================================================================
   CASE STUDY: ZIELONE IZBICKO — desktop — Figma 608:10567 (y − 69, x − 108)
   Branding i UI/UX reużywają siatki traddly; narzędzia siatki miloka.
   ========================================================================== */
.play.izb { height: 10300.7px; } /* koniec obrazu Onepage (2721 + 98 + 7481.7) */

/* Onepage — pełny projekt jako jeden obraz */
.izb__onepage { top: 2721px; height: 7579.7px; }

/* ZIELONE IZBICKO — MOBILE (≤767px): reset wymiarów (kaskada za resetem .trd__*) */
@media (max-width: 767px) {
  .play.izb { height: auto; }
  .izb__onepage { top: auto; height: auto; }
}

/* Nowy film karty Play (16:9) wypełnia dotychczasowy box 622×380 bez zniekształceń */
.card--play-home .card__media > video { aspect-ratio: 622 / 380; height: auto; object-fit: cover; }

/* Spot wideo w karcie "Rozszerzenie swojego portfolio usług" (Wyzwania, play-redesign):
   wypełnia box 626×500 na desktopie i 280px full-width na mobile — kadr centralny bez zniekształceń */
.play__challenge-img video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}