/* ==========================================================================
   PrawkoAPP – WERSJA POŚREDNIA (archiwum / zapas)

   To NIE jest aktywny arkusz strony. Aktywny plik to style.css.

   Poziomy animacji FAQ / dymków sklepów na telefonie:
     1) Pierwsza (oryginał):  grid-template-rows 0fr→1fr + backdrop-filter
     2) POŚREDNIA (ten plik): max-height + opacity, bez blur na kartach/dymkach
     3) Aktualna (style.css): ten sam układ co (1), ale transition: none

   Żeby przetestować tę wersję: w index.html zamień
     href="style.css"  →  href="style-posredni-animacje.css"

   Wszystkie liczby w calc() to wartosci wprost z projektu Figma (makieta 1920 px).
   Skaluja je dwie zmienne, przelaczane w media queries na dole pliku:
     --u  skala odstepow, ikon i elementow graficznych
     --f  skala typografii (maleje wolniej, zeby tekst pozostal czytelny)
   Szerokosc kart jest plynna, wiec przy zwezaniu okna najpierw znikaja
   marginesy boczne, a dopiero potem zmniejsza sie zawartosc.

   --zoom powieksza lub pomniejsza cala strone naraz, na kazdej szerokosci
   okna. 1 to skala 1:1 z Figmy, 1.1 to odpowiednik 110% w przegladarce.
   ========================================================================== */

:root {
  --zoom: 1.1;
  --u: calc(1px * var(--zoom));
  --f: calc(1px * var(--zoom));
  --card-w: calc(1401px * var(--zoom));
  --gutter: 24px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: 'Inter', sans-serif;
}

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

.page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  /* Miejsce na fixed pastylke: padding-top + wysokosc .nav */
  padding-top: calc(79 * var(--u));
  padding-bottom: calc(26 * var(--u));
}

.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;
}

/* Ikony zrodlowe sa czarne lub szare - w projekcie sa biale. */
.icon--white {
  filter: brightness(0) invert(1);
}

/* ==========================================================================
   Nawigacja
   ========================================================================== */

.nav-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: calc(24 * var(--u)) var(--gutter) 0;
  pointer-events: none;
  transition: padding 0.28s ease;
}

.nav {
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(18 * var(--u));
  min-height: calc(55 * var(--u));
  padding: calc(6 * var(--u)) calc(16 * var(--u)) calc(6 * var(--u)) calc(20 * var(--u));
  background: rgba(91, 37, 0, 0.63);
  backdrop-filter: blur(10.15px);
  -webkit-backdrop-filter: blur(10.15px);
  border-radius: calc(22.8755 * var(--u));
  transition:
    gap 0.28s ease,
    min-height 0.28s ease,
    padding 0.28s ease,
    border-radius 0.28s ease;
}

.nav a {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: calc(26.6881 * var(--f));
  line-height: 1.5;
  transition: font-size 0.28s ease;
}

.nav__logo {
  width: calc(43 * var(--u));
  height: calc(38 * var(--u));
  object-fit: cover;
  transition: width 0.28s ease, height 0.28s ease;
}

/* Desktop: po zjechaniu pastylka lekko sie kurczy. */
@media (min-width: 761px) {
  .nav-wrap.is-scrolled {
    padding-top: calc(12 * var(--u));
  }

  .nav-wrap.is-scrolled .nav {
    gap: calc(14 * var(--u));
    min-height: calc(42 * var(--u));
    padding: calc(4 * var(--u)) calc(14 * var(--u)) calc(4 * var(--u)) calc(16 * var(--u));
    border-radius: calc(18 * var(--u));
  }

  .nav-wrap.is-scrolled .nav a {
    font-size: calc(22 * var(--f));
  }

  .nav-wrap.is-scrolled .nav__logo {
    width: calc(34 * var(--u));
    height: calc(30 * var(--u));
  }
}

/* ==========================================================================
   Karty sekcji
   ========================================================================== */

.card {
  width: min(var(--card-w), calc(100% - 2 * var(--gutter)));
  margin: calc(68 * var(--u)) auto 0;
  border-radius: calc(33 * var(--u));
  backdrop-filter: blur(5.25px);
  -webkit-backdrop-filter: blur(5.25px);
  scroll-margin-top: calc(100 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* z-index podnosi karte nad kolejne sekcje - inaczej dymek "wkrotce na iOS",
   ktory wychodzi ponizej karty, chowalby sie za sekcja Opinie. */
.card--hero {
  position: relative;
  z-index: 2;
  margin-top: calc(37 * var(--u));
  padding: calc(45 * var(--u)) 0 calc(54 * var(--u));
  background: rgba(69, 46, 30, 0.49);
}

.card--opinie {
  padding: calc(22 * var(--u)) 0 calc(137 * var(--u));
  background: linear-gradient(180deg, rgba(69, 46, 30, 0.49) 0%, rgba(11, 28, 32, 0.49) 100%);
}

.card--faq {
  padding: calc(24 * var(--u)) 0 calc(41 * var(--u));
  background: rgba(11, 28, 32, 0.49);
}

.card--kontakt {
  padding: calc(22 * var(--u)) 0 calc(54 * var(--u));
  background: rgba(11, 28, 32, 0.49);
}

/* ==========================================================================
   Hero - naglowek
   ========================================================================== */

.hero__title {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  margin: 0 0 calc(48 * var(--u));
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: calc(48 * var(--f));
  line-height: 1.2;
}

/* Ten sam kadr logo co na pasku nawigacji, tylko wiekszy. */
.hero__title img {
  width: calc(60 * var(--u));
  height: calc(53 * var(--u));
  object-fit: cover;
}

/* ==========================================================================
   Hero - karuzela ekranow aplikacji

   Slajd bazowy ma rozmiar srodkowego kadru. Slajdy boczne to ten sam kadr
   przeskalowany i przesuniety w procentach wlasnej szerokosci, dzieki czemu
   cala karuzela zwega sie razem z kontenerem.
   ========================================================================== */

/* W projekcie karuzela zajmuje polowe szerokosci karty; 340 px to prog,
   ponizej ktorego ekrany telefonow bylyby juz nieczytelne. */
.carousel {
  position: relative;
  width: min(100%, max(50%, 340px));
  max-width: 700px;
  aspect-ratio: 700 / 573;
}

.slide {
  position: absolute;
  left: 26.929%;
  top: 0;
  width: 46.143%;
  height: 100%;
  background: #d9d9d9;
  border-radius: calc(13 * var(--u));
  opacity: 0;
  z-index: 1;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.slide img {
  position: absolute;
  left: 2.786%;
  top: 1.222%;
  width: 94.737%;
  height: 97.556%;
  border-radius: calc(13 * var(--u));
  object-fit: cover;
}

.slide.is-active {
  transform: translateX(0) scale(1);
  opacity: 1;
  z-index: 3;
}

.slide.is-prev,
.slide.is-next {
  opacity: 1;
  z-index: 2;
}

.slide.is-prev,
.slide.is-hidden-left {
  transform: translateX(-64.86%) scale(0.8726);
}

.slide.is-next,
.slide.is-hidden-right {
  transform: translateX(64.86%) scale(0.8726);
}

.carousel.no-anim .slide {
  transition: none;
}

/* Reczne przesuwanie - okragle przyciski po bokach karuzeli. */

.carousel__nav {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(53 * var(--u));
  height: calc(53 * var(--u));
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(32, 31, 31, 0.24);
  backdrop-filter: blur(3.3px);
  -webkit-backdrop-filter: blur(3.3px);
  transform: translateY(-50%);
  transition: background 0.2s ease;
  cursor: pointer;
  z-index: 4;
}

.carousel__nav:hover {
  background: rgba(32, 31, 31, 0.45);
}

.carousel__nav--prev { left: calc(-79 * var(--u)); }
.carousel__nav--next { right: calc(-79 * var(--u)); }

/* Strzalka jest odsunieta o 2.13 px w strone, w ktora wskazuje - tak samo jak
   w SVG z Figmy. Geometryczny srodek kola wyglada dla szewronu na przesuniety. */
.carousel__nav svg {
  display: block;
  width: calc(13.26 * var(--u));
  height: calc(21.5 * var(--u));
  transform: translateX(calc(2.13 * var(--u)));
}

.carousel__nav--prev svg {
  transform: scaleX(-1) translateX(calc(2.13 * var(--u)));
}

.hero__label {
  margin: calc(36 * var(--u)) 0 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: calc(28.6881 * var(--f));
  line-height: 1.499;
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: calc(21 * var(--u));
  margin-top: calc(17 * var(--u));
}

.badge img {
  display: block;
  height: calc(72 * var(--u));
  width: auto;
}

/* Dymki pod przyciskami sklepow (Android / iOS). */

.badge--store {
  position: relative;
}

.badge--store:focus {
  outline: none;
}

.store-tip {
  position: absolute;
  left: 0;
  top: calc(100% + 12 * var(--u));
  width: min(calc(364 * var(--u)), calc(100vw - 2 * var(--gutter)));
  padding: calc(17 * var(--u));
  background: rgba(32, 31, 31, 0.69);
  backdrop-filter: blur(3.3px);
  -webkit-backdrop-filter: blur(3.3px);
  border-radius: calc(18 * var(--u));
  font-weight: 600;
  font-size: calc(17 * var(--f));
  line-height: calc(21 * var(--f));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 5;
}

/* Niewidoczny mostek przez odstep, zeby dymek nie znikal w drodze do linku. */
.store-tip::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-12 * var(--u));
  height: calc(12 * var(--u));
}

.store-tip a {
  color: #00ccff;
  text-decoration: underline;
}

.badge--store:hover .store-tip,
.badge--store:focus .store-tip,
.badge--store:focus-within .store-tip,
.badge--store.is-open .store-tip {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   Tablica rejestracyjna - naglowek sekcji

   Wszystko wewnatrz jest w em, wiec tablica skaluje sie razem z napisem,
   a jej szerokosc wynika z dlugosci tekstu.
   ========================================================================== */

.plate {
  position: relative;
  display: inline-block;
  padding: 0 0.13936em 0 0.46859em;
  font-weight: 700;
  font-size: calc(57.4056 * var(--f));
  line-height: 1.2019;
  color: #000;
  white-space: nowrap;
}

/* Ciemna ramka 2 px dookola calej tablicy. */
.plate::before {
  content: '';
  position: absolute;
  left: -0.03484em;
  right: -0.03484em;
  top: 0.01742em;
  height: 1.14972em;
  background: #242121;
  border-radius: 0.19161em;
}

.plate__body {
  position: absolute;
  left: 0.19161em;
  right: 0;
  top: 0.05226em;
  height: 1.08004em;
  background: #d9d9d9;
  border-radius: 0.15678em;
}

.plate__strip {
  position: absolute;
  left: 0;
  top: 0.05226em;
  width: 0.40484em;
  height: 1.08004em;
  background: #0043a2;
  border-radius: 0.15678em 0 0 0.15678em;
}

.plate__strip img {
  position: absolute;
  left: 0.06532em;
  width: 0.27122em;
  height: 0.24074em;
  object-fit: cover;
}

.plate__strip img:first-child { top: 0.17855em; }
.plate__strip img:last-child  { top: 0.67136em; }

.plate__text {
  position: relative;
}

/* ==========================================================================
   Sekcja opinii
   ========================================================================== */

.opinie__text {
  max-width: calc(746 * var(--u));
  margin: calc(114 * var(--u)) 0 0;
  padding: 0 var(--gutter);
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: calc(39.6881 * var(--f));
  line-height: 1.512;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq {
  width: 81.23%;
  margin: calc(61 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}

.faq__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  transition: padding-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  scroll-margin-top: calc(80 * var(--u));
}

/* Odstep pod odpowiedzia musi byc tutaj, a nie na akapicie - padding elementu
   siatki wlicza sie do minimalnej wysokosci wiersza i nie dalby sie zwinac. */
.faq__item.is-open {
  padding-bottom: calc(20 * var(--u));
}

.faq__item:last-child {
  border-bottom: none;
}

.faq__q {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  width: 100%;
  margin: 0;
  padding: calc(14 * var(--u)) 0 calc(14 * var(--u)) calc(10 * var(--u));
  border: none;
  background: none;
  color: inherit;
  font-family: inherit;
  font-weight: 500;
  font-size: calc(28.4056 * var(--f));
  line-height: 1.197;
  text-align: left;
  cursor: pointer;
}

/* Rozwijanie odpowiedzi. Wiersz siatki przechodzi z 0fr na 1fr, czyli z zera
   do naturalnej wysokosci tekstu - dzieki temu karta rosnie plynnie razem z
   odpowiedzia, bez sztywnej wysokosci podanej z gory. */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}

.faq__a > p {
  overflow: hidden;
  min-height: 0;
  margin: 0;
  padding: 0 calc(20 * var(--u)) 0 calc(52 * var(--u));
  font-weight: 400;
  font-size: calc(22 * var(--f));
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.faq__plus {
  position: relative;
  flex: 0 0 calc(22 * var(--u));
  height: calc(22 * var(--u));
}

.faq__plus::before,
.faq__plus::after {
  content: '';
  position: absolute;
  background: rgba(217, 217, 217, 0.5);
}

/* Pionowa kreska obraca sie o 90 stopni i naklada na pozioma, wiec plus
   zamienia sie w minus. */
.faq__plus::before {
  left: calc(10 * var(--u));
  top: 0;
  width: calc(2 * var(--u));
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq__item.is-open .faq__plus::before {
  transform: rotate(90deg);
}

.faq__plus::after {
  left: 0;
  top: calc(10 * var(--u));
  width: 100%;
  height: calc(2 * var(--u));
}

.faq__q:hover .faq__plus::before,
.faq__q:hover .faq__plus::after {
  background: rgba(217, 217, 217, 0.9);
}

/* ==========================================================================
   Kontakt
   ========================================================================== */

.kontakt__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(40 * var(--u));
  width: 100%;
  margin-top: calc(15 * var(--u));
  padding: 0 9.636%;
}

.kontakt__list {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
}

.kontakt__row {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  font-weight: 600;
  font-size: calc(37.4056 * var(--f));
  line-height: 1.203;
}

.kontakt__icon {
  flex: 0 0 calc(46 * var(--u));
  display: flex;
  justify-content: center;
}

.kontakt__icon img {
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
}

/* Glif TikToka jest optycznie przesuniety w lewo i w gore wzgledem ramki SVG. */
.kontakt__icon--tiktok {
  transform: translate(calc(4 * var(--u)), calc(3 * var(--u)));
}

.kontakt__icon .kontakt__icon--mail {
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
}

.kontakt__boxes {
  display: flex;
  gap: calc(34 * var(--u));
}

.kontakt__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(93 * var(--u));
  height: calc(93 * var(--u));
  background: #100f0f;
  border: 1px solid #132d33;
  border-radius: calc(13 * var(--u));
}

.kontakt__box img {
  width: calc(67 * var(--u));
  height: calc(67 * var(--u));
}

.kontakt__box--mail img {
  width: calc(75 * var(--u));
  height: calc(75 * var(--u));
}

/* ==========================================================================
   Stopka
   ========================================================================== */

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(31 * var(--u));
  width: min(calc(578 * var(--u)), calc(100% - 2 * var(--gutter)));
  margin: calc(115 * var(--u)) auto 0;
  padding: calc(43 * var(--u)) calc(24 * var(--u));
  background: linear-gradient(180deg, rgba(11, 28, 32, 0.49) 0%, rgba(9, 15, 19, 0.49) 100%);
  backdrop-filter: blur(5.25px);
  -webkit-backdrop-filter: blur(5.25px);
  border-radius: calc(99 * var(--u));
}

.footer__logo {
  flex: none;
  width: calc(101 * var(--u));
  height: calc(90 * var(--u));
  object-fit: cover;
}

.footer__text {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  font-weight: 400;
  font-size: calc(19.4056 * var(--f));
  line-height: 1.185;
}

.footer__row {
  display: flex;
  gap: calc(17 * var(--u));
}

/* ==========================================================================
   Punkty zmiany skali
   ========================================================================== */

@media (max-width: 1600px) { :root { --u: calc(0.88px * var(--zoom)); --f: calc(0.92px * var(--zoom)); } }
@media (max-width: 1300px) { :root { --u: calc(0.76px * var(--zoom)); --f: calc(0.82px * var(--zoom)); } }
@media (max-width: 1050px) { :root { --u: calc(0.64px * var(--zoom)); --f: calc(0.72px * var(--zoom)); } }
@media (max-width:  850px) { :root { --u: calc(0.56px * var(--zoom)); --f: calc(0.64px * var(--zoom)); } }
@media (max-width:  650px) { :root { --u: calc(0.50px * var(--zoom)); --f: calc(0.58px * var(--zoom)); } }

/* Waskie okno, ale jeszcze uklad desktopowy - kontakt lamie sie na dwa rzedy. */
@media (min-width: 761px) and (max-width: 900px) {
  .kontakt__inner {
    flex-direction: column;
    align-items: center;
    padding: 0 var(--gutter);
  }
}

/* <br class="br-m"> dziala tylko na telefonie. */
@media (min-width: 761px) {
  .br-m { display: none; }
}

/* ==========================================================================
   Wersja mobilna

   Osobny projekt z Figmy, makieta 1022 px szerokosci. Liczby w tym bloku sa
   wprost z tamtego pliku, a --u przelicza je na szerokosc ekranu telefonu.
   Nadpisujemy tylko to, co rozni sie od desktopu.
   ========================================================================== */

@media (max-width: 760px) {

  :root {
    --u: calc(100vw / 1022);
    --f: calc(100vw / 1022);
    --gutter: calc(85 * var(--u));
  }

  .page {
    /* Na telefonie pastylka jest w normalnym flow, nie fixed. */
    padding-top: 0;
    padding-bottom: calc(41 * var(--u));
  }

  /* Projekt obcina gore tla i dokleja jego dol do konca strony. */
  .bg {
    object-position: center bottom;
  }

  /* --- Nawigacja --- */

  .nav-wrap {
    position: relative;
    left: auto;
    right: auto;
    z-index: auto;
    padding: calc(34 * var(--u)) calc(46 * var(--u)) 0;
    pointer-events: auto;
  }

  .nav {
    gap: calc(36 * var(--u));
    min-height: calc(111 * var(--u));
    padding: calc(8 * var(--u)) calc(33 * var(--u)) calc(8 * var(--u)) calc(40 * var(--u));
    background: rgba(64, 28, 3, 0.68);
    border-radius: calc(46.167 * var(--u));
  }

  .nav a {
    font-size: calc(53.8615 * var(--f));
  }

  .nav__logo {
    width: calc(86.61 * var(--u));
    height: calc(76.85 * var(--u));
  }

  /* --- Karty --- */

  .card {
    margin-top: calc(45 * var(--u));
    scroll-margin-top: calc(34 * var(--u));
    /* Blur na karcie + animacja dymka = ~1 fps w Chrome na Androidzie. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .card--hero {
    margin-top: calc(53 * var(--u));
    padding: calc(30 * var(--u)) 0 calc(25 * var(--u));
    background: rgba(69, 46, 30, 0.72);
  }
  .card--opinie {
    padding: calc(28 * var(--u)) 0 calc(74 * var(--u));
    background: linear-gradient(180deg, rgba(69, 46, 30, 0.72) 0%, rgba(11, 28, 32, 0.72) 100%);
  }
  .card--faq     { padding: calc(28 * var(--u)) 0 calc(32 * var(--u)); background: rgba(11, 28, 32, 0.72); }
  .card--kontakt { padding: calc(28 * var(--u)) 0 calc(22 * var(--u)); background: rgba(11, 28, 32, 0.72); }

  /* --- Naglowek hero (dodany poza projektem mobilnym) --- */

  .hero__title {
    gap: calc(14 * var(--u));
    margin-bottom: calc(30 * var(--u));
    font-size: calc(80 * var(--f));
  }

  .hero__title img {
    width: calc(100 * var(--u));
    height: calc(89 * var(--u));
  }

  /* --- Karuzela --- */

  .carousel {
    width: 96%;
    max-width: none;
    aspect-ratio: 767 / 771;
  }

  .slide {
    left: 23.26%;
    width: 56.65%;
    border-radius: calc(17.4921 * var(--u));
  }

  .slide img {
    border-radius: calc(17.4921 * var(--u));
  }

  /* Mniejszy translate = boczne kadry bardziej schowane pod srodkowym.
     Skala i proporcja slajdu bez zmian. */
  .slide.is-prev,
  .slide.is-hidden-left {
    transform: translateX(-38%) scale(0.8726);
  }

  .slide.is-next,
  .slide.is-hidden-right {
    transform: translateX(38%) scale(0.8726);
  }

  /* Zamiast strzalek karuzela reaguje na przesuniecie palcem (script.js). */
  .carousel__nav {
    display: none;
  }

  /* --- Przyciski sklepow --- */

  .hero__label {
    margin-top: calc(62 * var(--u));
    font-size: calc(49.3703 * var(--f));
  }

  .hero__badges {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    justify-items: center;
    align-items: start;
    gap: calc(16 * var(--u)) calc(16 * var(--u));
    width: 92%;
    margin-top: calc(9 * var(--u));
  }

  .badge img {
    height: calc(105 * var(--u));
  }

  /* display:contents wyciaga dymek do siatki odznak, zeby mogl zajac cala
     szerokosc karty i rozepchac ja w dol. Absolute + backdrop-filter na
     karcie obcinalby go tak, ze chowal sie za sekcja Opinie. */
  .badge--store {
    display: contents;
  }

  .badge--android > img {
    grid-column: 1;
    grid-row: 1;
  }

  .badge--ios > img {
    grid-column: 2;
    grid-row: 1;
  }

  /* Wersja pośrednia: max-height + opacity, bez backdrop-filter. */
  .store-tip {
    grid-column: 1 / -1;
    grid-row: 2;
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    max-width: none;
    margin-top: 0;
    padding: 0 calc(28 * var(--u));
    border-radius: calc(28 * var(--u));
    font-size: calc(32 * var(--f));
    line-height: 1.3;
    background: rgba(32, 31, 31, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.28s ease, opacity 0.22s ease, margin-top 0.28s ease,
                padding-top 0.28s ease, padding-bottom 0.28s ease;
  }

  .store-tip::before {
    display: none;
  }

  .store-tip__body {
    overflow: hidden;
  }

  .badge--store.is-open .store-tip,
  .badge--store:focus-within .store-tip {
    max-height: 20em;
    opacity: 1;
    margin-top: calc(16 * var(--u));
    padding-top: calc(28 * var(--u));
    padding-bottom: calc(28 * var(--u));
    pointer-events: auto;
  }

  /* Tablice skalują się z font-size (wszystko wewnątrz jest w em). */
  .plate {
    font-size: calc(66 * var(--f));
  }

  /* --- Opinie --- */

  /* Projekt daje 742 px, czyli dokladnie tyle ile ma najdluzsza linia -
     przy tej szerokosci tekst lamalby sie losowo, wiec jest lekki zapas. */
  .opinie__text {
    width: 92%;
    max-width: none;
    padding: 0;
    margin-top: calc(53 * var(--u));
    font-size: calc(50.6881 * var(--f));
    line-height: 1.4995;
  }

  /* --- FAQ --- */

  .faq {
    width: 90%;
    margin-top: calc(16 * var(--u));
  }

  /* Projektowe 36.4 px daje na telefonie niecale 14 px, wiec caly blok jest
     podbity prawie dwukrotnie, a wiersze maja wiecej powietrza nad i pod kreska. */
  .faq__q {
    gap: calc(18 * var(--u));
    padding: calc(30 * var(--u)) 0 calc(30 * var(--u)) calc(8 * var(--u));
    font-size: calc(50 * var(--f));
    line-height: 1.25;
  }

  .faq__plus {
    flex-basis: calc(30 * var(--u));
    height: calc(30 * var(--u));
  }

  .faq__plus::before {
    left: calc(13 * var(--u));
    width: calc(4 * var(--u));
  }

  .faq__plus::after {
    top: calc(13 * var(--u));
    height: calc(4 * var(--u));
  }

  .faq__item.is-open {
    padding-bottom: calc(28 * var(--u));
  }

  /* Wersja pośrednia FAQ: max-height + opacity zamiast grid-template-rows. */
  .faq__a {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.28s ease, opacity 0.22s ease;
  }

  .faq__item.is-open .faq__a {
    max-height: 80em;
    opacity: 1;
  }

  .faq__a > p {
    min-height: 0;
    padding: 0 calc(12 * var(--u)) 0 calc(56 * var(--u));
    font-size: calc(42 * var(--f));
    line-height: 1.45;
  }

  /* --- Kontakt --- */

  /* Lista i przyciski stoja obok siebie w flexie, przyciski sie nie kurcza.
     Projektowe 93 px + padding 41 px wypychalo siatke poza karte, wiec
     kwadraty sa troche mniejsze i padding wewnetrzny ciaśniejszy. */
  .kontakt__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: calc(16 * var(--u));
    width: 100%;
    margin-top: calc(32 * var(--u));
    padding: 0 calc(28 * var(--u)) 0 calc(36 * var(--u));
    box-sizing: border-box;
  }

  .kontakt__list {
    min-width: 0;
    gap: calc(8 * var(--u));
    padding-top: calc(6 * var(--u));
  }

  .kontakt__row {
    gap: calc(14 * var(--u));
    font-size: calc(44 * var(--f));
    line-height: 1.2;
  }

  .kontakt__icon {
    flex-basis: calc(40 * var(--u));
  }

  .kontakt__icon img {
    width: calc(34 * var(--u));
    height: calc(34 * var(--u));
  }

  .kontakt__icon .kontakt__icon--mail {
    width: calc(40 * var(--u));
    height: calc(40 * var(--u));
  }

  .kontakt__boxes {
    position: static;
    flex: none;
    display: grid;
    grid-template-columns: repeat(2, calc(78 * var(--u)));
    gap: calc(14 * var(--u)) calc(16 * var(--u));
  }

  .kontakt__boxes > :nth-child(1) { grid-area: 1 / 2; }
  .kontakt__boxes > :nth-child(2) { grid-area: 1 / 1; }
  .kontakt__boxes > :nth-child(3) { grid-area: 2 / 2; }

  .kontakt__box {
    width: calc(78 * var(--u));
    height: calc(78 * var(--u));
  }

  .kontakt__box img {
    width: calc(56 * var(--u));
    height: calc(56 * var(--u));
  }

  .kontakt__box--mail img {
    width: calc(62 * var(--u));
    height: calc(62 * var(--u));
  }

  /* --- Stopka --- */

  .footer {
    width: fit-content;
    margin-top: calc(49 * var(--u));
    padding: calc(32 * var(--u)) calc(22 * var(--u));
    gap: calc(38 * var(--u));
  }

  .footer__logo {
    width: calc(125.68 * var(--u));
    height: calc(111.52 * var(--u));
  }

  .footer__text {
    gap: calc(14 * var(--u));
    font-size: calc(34 * var(--f));
  }

  .footer__row {
    gap: calc(24 * var(--u));
  }

}