.hero-section .section__inner {
	padding: 32px 0px;
}




  .hero {
    padding: clamp(24px, 4vw, 29px) clamp(16px, 4vw, 32px) clamp(32px, 4vw, 42px);
    overflow: hidden;
  }

  .hero__inner {
    /* „Okno” na mozaikę w pikselach z Figmy (współrzędne grupy 1183 × 679).
       Zmieniając --vx / --vw w media queries, przycinamy widok bez ruszania HTML. */
    --vx: 0;
    --vw: 1183;
    --H: 679;
    /* ODSTĘP między kafelkami w px z Figmy (w makiecie = 16).
       Skaluje się razem z mozaiką. Zmień np. na 24 albo 8. */
    --gap: 16;
    --d: calc((var(--gap) - 16) / 2);   /* o ile każdy kafelek „chudnie” z każdej strony */
    position: relative;
    max-width: 1183px;
    margin-inline: auto;
    container-type: inline-size;
  }

  .mosaic {
    position: relative;
    aspect-ratio: var(--vw) / var(--H);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .tile {
    position: absolute;
    left:   calc((var(--x) - var(--vx) + var(--d)) / var(--vw) * 100%);
    top:    calc((var(--y) + var(--d)) / var(--H) * 100%);
    width:  calc((var(--w) - 2 * var(--d)) / var(--vw) * 100%);
    height: calc((var(--h) - 2 * var(--d)) / var(--H) * 100%);
    background: var(--bg);
    overflow: hidden;
  }
  .tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 15%;
  }

  /* Nagłówek – prawdziwy tekst w „dziurze” mozaiki */
  .hero__title {
    position: absolute;
    z-index: 1;
    left:  calc((456 - var(--vx)) / var(--vw) * 100%);
    top:   calc(286 / var(--H) * 100%);
    width: calc(325 / var(--vw) * 100%);
    margin: 0;
    text-align: right;
    font-weight: 400;
    font-size: calc(34 / var(--vw) * 100cqi);   /* 34px przy pełnej szerokości */
    line-height: 1.18;
    letter-spacing: -0.01em;
  }
  .hero__title .line  { display: block; white-space: nowrap; }
  .hero__title strong { font-weight: 700; }
  .hero__title .dot   { color: var(--accent); }

  /* =========================================================
     ANIMACJA WEJŚCIA (3 etapy, startuje gdy hero jest na ekranie)
       1. kafelki pojawiają się po kolei wg --i
       2. dwa kafelki nad i pod tekstem (.tile--split) startują
          złączone na środku tekstu i rozsuwają się na swoje miejsca
       3. dopiero potem pojawia się napis
     Wszystkie czasy ustawiasz tutaj: */
  .hero {
    --step: 90ms;          /* odstęp między kolejnymi kafelkami */
    --dur: 500ms;          /* czas pojawienia się jednego kafelka */
    --tiles: 16;           /* ile kafelków (do policzenia końca etapu 1) */
    --split-dur: 800ms;    /* czas rozsuwania */
    --title-dur: 600ms;    /* czas pojawienia się napisu */
    --split-start: calc((var(--tiles) - 1) * var(--step) + var(--dur));
    --title-start: calc(var(--split-start) + var(--split-dur));
  }

  /* Stan początkowy – tylko gdy JS włączył animację (bez JS wszystko jest widoczne od razu) */
  .hero.js-anim .tile,
  .hero.js-anim .hero__title { opacity: 0; }

  /* Etap 1: kafelki po kolei */
  .hero.is-ready .tile {
    animation: tile-in var(--dur) cubic-bezier(.2,.7,.2,1) both;
    animation-delay: calc(var(--i) * var(--step));
  }

  /* Etap 2: kafelki nad/pod tekstem – złączone, potem się rozsuwają.
     --shift = o ile px z Figmy kafelek jest przesunięty do środka tekstu
     (dodatni = w dół, ujemny = w górę). */
  .hero.is-ready .tile--split {
    animation-name: tile-in, split-open;
    animation-duration: var(--dur), var(--split-dur);
    animation-delay: calc(var(--i) * var(--step)), var(--split-start);
    animation-timing-function: cubic-bezier(.2,.7,.2,1), cubic-bezier(.65,0,.35,1);
    animation-fill-mode: both;
  }

  /* Etap 3: napis */
  .hero.is-ready .hero__title {
    animation: title-in var(--title-dur) cubic-bezier(.2,.7,.2,1) both;
    animation-delay: var(--title-start);
  }

  @keyframes tile-in  { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
  @keyframes split-open {
    from { translate: 0 calc(var(--shift) / (var(--h) - 2 * var(--d)) * 100%); }
    to   { translate: 0 0; }
  }
  @keyframes title-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }

  /* ---------- TABLET: obcinamy skrajne kolumny ---------- */
  @media (max-width: 1023px) {
    .hero__inner { --vx: 148; --vw: 846; }   /* widok od kolumny 2 do 6 */
    .tile--edge  { display: none; }           /* kafelki całkowicie poza widokiem */
  }

  /* ---------- MOBILE: tekst nad zdjęciami + masonry ---------- */
  @media (max-width: 599px) {
    .hero__inner { container-type: normal; }

    .hero__title {
      position: static;
      width: auto;
      margin-bottom: 24px;
      text-align: left;
      font-size: clamp(26px, 8vw, 34px);
    }

    .mosaic {
      aspect-ratio: auto;
      columns: 3;
      column-gap: calc(var(--gap) * 0.5px);   /* na telefonie połowa odstępu z desktopu */
    }
    .tile {
      position: static;
      width: auto;
      height: auto;
      aspect-ratio: var(--w) / var(--h);   /* proporcje kafelka z Figmy */
      margin-bottom: calc(var(--gap) * 0.5px);
      break-inside: avoid;
    }
    .tile--edge { display: block; }
    .tile--desktop { display: none; }      /* na telefonie wystarczy 12 zdjęć */

    /* Na telefonie tekst jest nad zdjęciami, więc bez rozsuwania –
       napis pojawia się zaraz po ostatnim kafelku */
    .hero.is-ready .tile--split {
      animation: tile-in var(--dur) cubic-bezier(.2,.7,.2,1) both;
      animation-delay: calc(var(--i) * var(--step));
    }
    .hero { --title-start: var(--split-start); }
  }