/* ------------------------------------------------------------------
   System projektowy HostingFirmowy.pl - etap 4.
   Nadbudowa nad assets/tokens.css. Zero wartosci wpisanych z reki:
   kazdy kolor, odstep i promien pochodzi ze zmiennej.

   Komponentow jest tyle, ile potrzebuje strona glowna i ani jednego
   wiecej: pasek nawigacji, przyciski, karta pakietu, pole formularza,
   pojemnik sekcji, stopka.

   Promienie: dwa ze skali, tak jak w brand booku.
   sredni - karty, plyty, panele.  maly - przyciski, pola, elementy w linii.
   ------------------------------------------------------------------ */


/* ==================================================================
   0. Podstawa
   ================================================================== */

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

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4, h5 {
  font-family: var(--kroj-naglowkowy);
  line-height: var(--interlinia-naglowkowa);
  margin: 0;
  font-weight: 600;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 {
  font-size: clamp(var(--tekst-naglowek-3), 6.4vw, var(--tekst-naglowek-1));
  line-height: var(--interlinia-ciasna);
  letter-spacing: -0.025em;
  font-weight: 700;
}

h2 {
  font-size: clamp(var(--tekst-duzy), 4.8vw, var(--tekst-naglowek-2));
  letter-spacing: -0.022em;
  font-weight: 700;
}

h3 { font-size: clamp(var(--tekst-sredni), 3.2vw, var(--tekst-naglowek-3)); letter-spacing: -0.018em; }
h4 { font-size: var(--tekst-duzy); letter-spacing: -0.015em; }
h5 { font-size: var(--tekst-sredni); letter-spacing: -0.01em; }

p { margin: 0; overflow-wrap: break-word; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--kolor-akcent); text-underline-offset: 3px; }
a:hover { color: var(--kolor-akcent-hover); }

strong, b { font-weight: 600; }

:focus-visible {
  outline: 2px solid var(--kolor-akcent);
  outline-offset: 2px;
  border-radius: var(--promien-maly);
}

.liczba {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* tresc pomocnicza dla czytnikow ekranu */
.tylko-dla-czytnika {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* skok do tresci glownej */
.skok {
  position: absolute;
  left: var(--odstep-4);
  top: var(--odstep-2);
  z-index: 40;
  transform: translateY(-200%);
  padding: var(--odstep-3) var(--odstep-4);
  background: var(--kolor-akcent);
  color: var(--kolor-tekst-na-akcencie);
  border-radius: var(--promien-maly);
  font-weight: 600;
  text-decoration: none;
}
.skok:focus-visible {
  transform: translateY(0);
  color: var(--kolor-tekst-na-akcencie);
}

.slabszy { color: var(--kolor-tekst-drugorzedny); }
.drobny { font-size: var(--tekst-maly); }
.lead {
  font-size: clamp(17px, 2.4vw, var(--tekst-sredni));
  color: var(--kolor-tekst-drugorzedny);
  max-width: 58ch;
}
.proza { max-width: 66ch; }


/* ==================================================================
   1. Pojemnik sekcji
   ================================================================== */

.powloka {
  width: 100%;
  max-width: var(--siatka-maks-szerokosc);
  margin-inline: auto;
  /* wciecie rosnie o wciecie ekranu, zeby tresc nie wchodzila pod wciecie
     obudowy telefonu trzymanego poziomo */
  padding-left: calc(var(--odstep-5) + env(safe-area-inset-left));
  padding-right: calc(var(--odstep-5) + env(safe-area-inset-right));
}

@media (max-width: 359px) {
  .powloka {
    padding-left: calc(var(--odstep-4) + env(safe-area-inset-left));
    padding-right: calc(var(--odstep-4) + env(safe-area-inset-right));
  }
}

.sekcja {
  padding-block: clamp(var(--odstep-7), 8vw, var(--odstep-9));
}

/* pasek jest przyklejony, wiec kotwica nie moze konczyc pod nim */
:target,
[id] { scroll-margin-top: var(--odstep-9); }

.sekcja-plyta {
  background: var(--kolor-tlo-karty);
  border-block: 1px solid var(--kolor-obramowanie);
}

.sekcja-naglowek {
  display: grid;
  gap: var(--odstep-4);
  margin-bottom: var(--odstep-7);
  max-width: 62ch;
}


/* ==================================================================
   2. Pasek nawigacji
   ================================================================== */

.pasek {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--kolor-tlo-strony);
  border-bottom: 1px solid var(--kolor-obramowanie);
}

.pasek-tresc {
  display: flex;
  align-items: center;
  gap: var(--odstep-4);
  min-height: 64px;
  padding-block: var(--odstep-2);
}

.pasek-marka {
  display: flex;
  align-items: center;
  gap: var(--odstep-3);
  min-width: 0;
  margin-right: auto;
  color: var(--kolor-tekst-glowny);
  text-decoration: none;
}

/* prog przelaczenia znaku: ponizej 64 px szerokosci sam sygnet,
   powyzej pelny lockup. Sygnet dostaje 32 px, czyli granice,
   ponizej ktorej obowiazuje wariant jednobarwny. */
.pasek-znak { width: 32px; height: auto; flex: none; }

.pasek-nazwa {
  font-family: var(--kroj-naglowkowy);
  font-size: var(--tekst-bazowy);
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.pasek-nazwa b { font-weight: 700; }
.pasek-nazwa i {
  font-style: normal;
  font-size: 0.72em;
  letter-spacing: 0.06em;
  color: var(--kolor-tekst-drugorzedny);
}

.pasek-odnosniki {
  display: none;
  align-items: center;
  gap: var(--odstep-5);
}

.pasek-odnosniki a {
  color: var(--kolor-tekst-drugorzedny);
  text-decoration: none;
  font-size: var(--tekst-maly);
  font-weight: 500;
  white-space: nowrap;
}
.pasek-odnosniki a:hover { color: var(--kolor-tekst-glowny); }

.pasek-narzedzia {
  display: flex;
  align-items: center;
  gap: var(--odstep-2);
}

/* Ponizej 560 px w pasku nie ma miejsca na trzy rzeczy naraz.
   Wypada wezwanie, bo stoi nietkniete pol ekranu nizej, w pierwszym
   ekranie. Przelacznik motywu zostaje: nie ma go gdzie indziej. */
@media (max-width: 559px) {
  .pasek-narzedzia .przycisk-glowny { display: none; }
}

/* Ponizej 360 px nazwa obok sygnetu przestaje sie miescic w jednej
   linii razem z przelacznikiem, wiec schodzi. Wyzej stoi, bo pasek
   z samym sygnetem i jednym przyciskiem wyglada na niedokonczony. */
@media (max-width: 359px) {
  .pasek-nazwa { display: none; }
}

@media (min-width: 860px) {
  .pasek-odnosniki { display: flex; }
  .pasek-nazwa { font-size: var(--tekst-sredni); }
  .pasek-znak { width: 36px; }
}


/* ==================================================================
   3. Przyciski
   ================================================================== */

.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--odstep-2);
  min-height: 44px;
  padding: var(--odstep-2) var(--odstep-5);
  border: 1px solid transparent;
  border-radius: var(--promien-maly);
  font-family: var(--kroj-tekstowy);
  font-size: var(--tekst-bazowy);
  font-weight: 600;
  line-height: var(--interlinia-naglowkowa);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  background: transparent;
  color: var(--kolor-tekst-glowny);
  transition-property: background-color, border-color, color, transform;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.przycisk:active { transform: translateY(1px); }

.przycisk-glowny {
  background: var(--kolor-akcent);
  border-color: var(--kolor-akcent);
  color: var(--kolor-tekst-na-akcencie);
}
.przycisk-glowny:hover {
  background: var(--kolor-akcent-hover);
  border-color: var(--kolor-akcent-hover);
  color: var(--kolor-tekst-na-akcencie);
}

.przycisk-drugorzedny {
  border-color: var(--kolor-akcent);
  color: var(--kolor-akcent);
}
.przycisk-drugorzedny:hover {
  border-color: var(--kolor-akcent-hover);
  color: var(--kolor-akcent-hover);
}

/* wariant cichy: przelacznik motywu w pasku */
.przycisk-cichy {
  min-height: 40px;
  padding: var(--odstep-2) var(--odstep-3);
  border-color: var(--kolor-obramowanie);
  color: var(--kolor-tekst-drugorzedny);
  font-size: var(--tekst-maly);
  font-weight: 500;
}
.przycisk-cichy:hover {
  border-color: var(--kolor-obramowanie-pola);
  color: var(--kolor-tekst-glowny);
}

.przycisk[disabled],
.przycisk[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
}

.przyciski {
  display: flex;
  flex-wrap: wrap;
  gap: var(--odstep-3);
}


/* ==================================================================
   4. Karta pakietu
   ================================================================== */

.karta-pakietu {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--odstep-3);
  padding: var(--odstep-5);
  background: var(--kolor-tlo-karty);
  border: 1px solid var(--kolor-obramowanie);
  border-radius: var(--promien-sredni);
  transition-property: border-color, transform;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.karta-pakietu:hover {
  border-color: var(--kolor-obramowanie-pola);
  transform: translateY(-2px);
}

.karta-pakietu h3 {
  font-size: var(--tekst-duzy);
  letter-spacing: -0.015em;
}

.karta-cena {
  font-family: var(--kroj-naglowkowy);
  font-size: var(--tekst-naglowek-3);
  font-weight: 700;
  line-height: var(--interlinia-ciasna);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.karta-cena span {
  display: block;
  font-family: var(--kroj-tekstowy);
  font-size: var(--tekst-maly);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--kolor-tekst-drugorzedny);
}

/* Metka siedzi na krawedzi karty, a nie w jej srodku: dzieki temu
   wiersze cen i czasow stoja w jednej linii we wszystkich czterech
   kartach, mimo ze wyrozniona ma o jeden element wiecej. */
.karta-metka {
  position: absolute;
  top: 0;
  left: var(--odstep-5);
  transform: translateY(-50%);
  padding: var(--odstep-1) var(--odstep-3);
  border-radius: var(--promien-pelny);
  background: var(--kolor-akcent);
  color: var(--kolor-tekst-na-akcencie);
  font-family: var(--kroj-naglowkowy);
  font-size: var(--tekst-drobny);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Osia roznicy miedzy pakietami jest czas odpowiedzi, wiec to on, a nie
   pojemnosc, jest w karcie rysunkiem. Zdanie pod liczba zostaje w pelnym
   brzmieniu, bo obietnica bez "w dni robocze" obejmuje niedziele. */
.karta-czas {
  display: flex;
  align-items: baseline;
  gap: var(--odstep-3);
  padding-top: var(--odstep-4);
  border-top: 1px solid var(--kolor-obramowanie);
}

.karta-czas-liczba {
  flex: none;
  font-family: var(--kroj-naglowkowy);
  font-size: var(--tekst-naglowek-2);
  font-weight: 700;
  line-height: var(--interlinia-ciasna);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--kolor-akcent);
}
.karta-czas-opis {
  font-size: var(--tekst-maly);
  color: var(--kolor-tekst-drugorzedny);
  line-height: var(--interlinia-tekstowa);
}

.karta-opis {
  margin-top: auto;
  padding-top: var(--odstep-1);
  font-size: var(--tekst-maly);
  color: var(--kolor-tekst-drugorzedny);
}

/* jeden pakiet niesie zdanie z biblioteki o tym, co wystarcza najczesciej,
   wiec to on dostaje obwodke akcentu zamiast cienia */
.karta-wyrozniona {
  border-color: var(--kolor-akcent);
  box-shadow: inset 0 0 0 1px var(--kolor-akcent);
}
.karta-wyrozniona:hover { border-color: var(--kolor-akcent); }


/* ==================================================================
   5. Pole formularza, wszystkie stany
   ================================================================== */

.pole {
  display: grid;
  gap: var(--odstep-2);
}

.pole-etykieta {
  font-family: var(--kroj-naglowkowy);
  font-size: var(--tekst-maly);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.pole-etykieta em {
  font-style: normal;
  color: var(--kolor-akcent);
}

.pole-podpowiedz {
  font-size: var(--tekst-maly);
  color: var(--kolor-tekst-drugorzedny);
  line-height: var(--interlinia-tekstowa);
}

.pole input,
.pole textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--odstep-3);
  font-family: var(--kroj-tekstowy);
  font-size: var(--tekst-bazowy);
  line-height: var(--interlinia-tekstowa);
  color: var(--kolor-tekst-glowny);
  background: var(--kolor-tlo-strony);
  border: 1px solid var(--kolor-obramowanie-pola);
  border-radius: var(--promien-maly);
  transition-property: border-color, background-color;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.pole textarea {
  min-height: 140px;
  resize: vertical;
}

.pole input::placeholder,
.pole textarea::placeholder {
  color: var(--kolor-tekst-drugorzedny);
  opacity: 1;
}

.pole input:hover,
.pole textarea:hover { border-color: var(--kolor-tekst-glowny); }

.pole input:focus-visible,
.pole textarea:focus-visible {
  outline: 2px solid var(--kolor-akcent);
  outline-offset: 1px;
  border-color: var(--kolor-akcent);
}

/* stan bledu: ramka plus komunikat pod polem, nigdy sam kolor */
.pole[data-stan="blad"] input,
.pole[data-stan="blad"] textarea {
  border-color: var(--kolor-blad);
  border-width: 2px;
}

.pole-komunikat {
  display: none;
  font-size: var(--tekst-maly);
  font-weight: 500;
  line-height: var(--interlinia-tekstowa);
  color: var(--kolor-blad);
}
.pole[data-stan="blad"] .pole-komunikat { display: block; }

.pole input:disabled,
.pole textarea:disabled {
  cursor: not-allowed;
  color: var(--kolor-tekst-drugorzedny);
  border-color: var(--kolor-obramowanie);
  background: var(--kolor-tlo-karty);
}

/* odpowiedz formularza po wyslaniu */
.odpowiedz {
  display: none;
  gap: var(--odstep-3);
  padding: var(--odstep-4);
  border: 1px solid var(--kolor-obramowanie);
  border-left: 4px solid var(--kolor-obramowanie);
  border-radius: var(--promien-maly);
  font-size: var(--tekst-maly);
  line-height: var(--interlinia-tekstowa);
}
.odpowiedz[data-stan="przyjete"],
.odpowiedz[data-stan="niedoszlo"] { display: grid; }
.odpowiedz[data-stan="przyjete"] { border-left-color: var(--kolor-sukces); }
.odpowiedz[data-stan="niedoszlo"] { border-left-color: var(--kolor-blad); }
.odpowiedz b { font-family: var(--kroj-naglowkowy); }


/* ==================================================================
   6. Stopka
   ================================================================== */

.stopka {
  background: var(--kolor-tlo-karty);
  border-top: 1px solid var(--kolor-obramowanie);
  padding-block: var(--odstep-8) var(--odstep-7);
  font-size: var(--tekst-maly);
}

.stopka-uklad {
  display: grid;
  gap: var(--odstep-7);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .stopka-uklad { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--odstep-6) var(--odstep-7); }
}

@media (min-width: 1000px) {
  .stopka-uklad {
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
    gap: var(--odstep-7);
  }
}

.stopka-znak { width: 104px; height: auto; margin-bottom: var(--odstep-4); }

.stopka h2 {
  font-size: var(--tekst-maly);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kolor-tekst-drugorzedny);
  margin-bottom: var(--odstep-4);
}

.stopka ul { display: grid; gap: var(--odstep-3); }
.stopka a { text-decoration: none; }
.stopka a:hover { text-decoration: underline; }

.stopka-kanal {
  display: grid;
  gap: var(--odstep-1);
}
.stopka-kanal span {
  font-size: var(--tekst-drobny);
  color: var(--kolor-tekst-drugorzedny);
}

/* Dane rejestrowe to nie sa kanaly kontaktu, tylko metryczka. Ciasniejszy
   rytm i slabszy kolor odrozniaja je od kolumny z telefonami, ktora ma byc
   klikalna. Nazwa firmy zostaje w kolorze tekstu glownego jako punkt
   zaczepienia; NIP, REGON i KRS ida cyframi tabelarycznymi, zeby stanely
   w kolumnie. */
.stopka-dane {
  gap: var(--odstep-2);
  font-size: var(--tekst-maly);
  color: var(--kolor-tekst-drugorzedny);
  font-variant-numeric: tabular-nums;
}
.stopka-dane li:first-child {
  margin-bottom: var(--odstep-1);
  font-family: var(--kroj-naglowkowy);
  font-weight: 600;
  font-size: var(--tekst-bazowy);
  color: var(--kolor-tekst-glowny);
}

.stopka-dol {
  margin-top: var(--odstep-7);
  padding-top: var(--odstep-5);
  border-top: 1px solid var(--kolor-obramowanie);
  color: var(--kolor-tekst-drugorzedny);
  font-size: var(--tekst-drobny);
}


/* ==================================================================
   7. Uklady strony glownej, zlozone z powyzszych czesci

   Kazda sekcja ma inny ksztalt, bo dwanascie tych samych blokow tekstu
   pod soba to jest to, co sie nie udalo za pierwszym razem. Kolejno:
   podzial ze zdjeciem, pasek, plyta w akcencie, podzial ze zdjeciem
   przyklejonym, pasmo pelnej szerokosci, siatka kart, cztery kolumny
   listy, bento promocji, podzial z dowodem, rozwijane pytania, panel
   formularza.
   ================================================================== */

/* --- zdjecia: wspolne zasady ------------------------------------
   Kazdy obrazek ma w HTML wpisane width i height, wiec przegladarka
   rezerwuje miejsce przed pobraniem. Tu ustawiamy tylko kadr. */
.hero-foto,
.filary-obraz,
.dowod-obraz,
.promocja-obraz { margin: 0; }

.hero-foto img,
.filary-obraz img,
.dowod-obraz img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--promien-duzy);
  background: var(--kolor-tlo-karty);
}


/* --- pierwszy ekran --------------------------------------------- */

.hero { padding-block: clamp(var(--odstep-6), 5vw, var(--odstep-8)); }

.hero-uklad {
  display: grid;
  gap: var(--odstep-6);
  align-items: center;
  grid-template-columns: 1fr;
}
.hero-tresc { display: grid; gap: var(--odstep-5); justify-items: start; }
.hero-tresc .przyciski { margin-top: var(--odstep-2); }
.hero-foto img { aspect-ratio: 4 / 3; }

@media (min-width: 900px) {
  .hero-uklad {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--odstep-8);
  }
  .hero-foto img { aspect-ratio: 6 / 7; }
}


/* --- pasek zaufania: staz i klienci pod pierwszym ekranem -------- */

.zaufanie {
  background: var(--kolor-tlo-karty);
  border-block: 1px solid var(--kolor-obramowanie);
  padding-block: var(--odstep-5);
}

.zaufanie-uklad {
  display: grid;
  gap: var(--odstep-4);
  align-items: center;
  grid-template-columns: 1fr;
}

.zaufanie-liczba {
  font-family: var(--kroj-naglowkowy);
  font-size: var(--tekst-duzy);
  font-weight: 700;
  line-height: var(--interlinia-ciasna);
  letter-spacing: -0.02em;
}

.zaufanie-klienci {
  display: flex;
  flex-wrap: wrap;
  gap: var(--odstep-3) var(--odstep-6);
}
.zaufanie-klienci li {
  font-family: var(--kroj-naglowkowy);
  font-size: var(--tekst-bazowy);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--kolor-tekst-drugorzedny);
}

@media (min-width: 900px) {
  .zaufanie-uklad { grid-template-columns: auto minmax(0, 1fr); gap: var(--odstep-7); }
  .zaufanie-staz {
    padding-right: var(--odstep-7);
    border-right: 1px solid var(--kolor-obramowanie);
  }
  .zaufanie-klienci { justify-content: space-between; gap: var(--odstep-5); }
  .zaufanie-klienci li { font-size: var(--tekst-sredni); }
}


/* --- rama porownania: jedyna plyta w kolorze akcentu -------------
   Cena marki nie stoi obok ceny hostingu nigdy, tylko obok kosztu
   godziny informatyka. To jest najwazniejsze zdanie na stronie,
   wiec dostaje jedyny pelny blok koloru. Nasza liczba stoi na
   karcie, cudza plasko na tle: hierarchia jest w materiale. */

.rama {
  background: var(--kolor-akcent);
  color: var(--kolor-tekst-na-akcencie);
}

.rama-uklad {
  display: grid;
  gap: var(--odstep-7);
  grid-template-columns: 1fr;
}

.rama-tekst { display: grid; gap: var(--odstep-5); max-width: 58ch; }
.rama h2 { font-size: clamp(var(--tekst-naglowek-3), 5.2vw, var(--tekst-naglowek-1)); }
.rama-tekst p { line-height: var(--interlinia-tekstowa); }

.rama-liczby { display: grid; gap: var(--odstep-5); margin: 0; }

.rama-liczby dt {
  font-size: var(--tekst-maly);
  font-weight: 500;
  margin-bottom: var(--odstep-2);
}
.rama-liczby dd {
  margin: 0;
  font-family: var(--kroj-naglowkowy);
  font-size: clamp(var(--tekst-naglowek-3), 4.6vw, var(--tekst-naglowek-2));
  font-weight: 700;
  line-height: var(--interlinia-ciasna);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.rama-liczby dd span {
  display: block;
  margin-top: var(--odstep-2);
  font-family: var(--kroj-tekstowy);
  font-size: var(--tekst-maly);
  font-weight: 500;
  letter-spacing: 0;
}

/* Kreska stoi MIEDZY dwiema liczbami, nie nad pierwsza. To jest cale
   zdanie tej sekcji: po jednej stronie cudza cena, po drugiej nasza. */
.rama-obca {
  position: relative;
  padding-bottom: var(--odstep-5);
}
.rama-obca::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.rama-nasza {
  padding: var(--odstep-6);
  border-radius: var(--promien-sredni);
  background: var(--kolor-tlo-karty);
  color: var(--kolor-tekst-glowny);
}
.rama-nasza dt { color: var(--kolor-tekst-drugorzedny); }
.rama-nasza dd { color: var(--kolor-akcent); }
.rama-nasza dd span { color: var(--kolor-tekst-drugorzedny); }

@media (min-width: 940px) {
  .rama-uklad {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--odstep-8);
    align-items: center;
  }
}


/* --- trzy filary przy zdjeciu ------------------------------------
   Kolejnosc jest wiazaca: obietnica, dowod, przewidywalnosc.
   Zdjecie zostaje w kadrze przez cala liste, bo to ono mowi,
   kto odbiera telefon. */

.filary-uklad {
  display: grid;
  gap: var(--odstep-7);
  grid-template-columns: 1fr;
}
.filary-obraz img { aspect-ratio: 4 / 5; }

/* Prawa kolumna podzialu: naglowek i trzy filary stoja pod soba,
   wyrownane do gory, zeby przy sklejonym zdjeciu nie plywaly w pionie. */
.filary-tresc {
  display: grid;
  gap: 0;
  align-content: start;
  min-width: 0;
}

.filary { display: grid; gap: var(--odstep-6); }
.filar { display: grid; gap: var(--odstep-3); align-content: start; }
.filar svg { width: 28px; height: 28px; color: var(--kolor-akcent); }
.filar h3 { font-size: var(--tekst-duzy); }
.filar p { color: var(--kolor-tekst-drugorzedny); }
.filar + .filar {
  padding-top: var(--odstep-6);
  border-top: 1px solid var(--kolor-obramowanie);
}

@media (min-width: 940px) {
  .filary-uklad {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--odstep-8);
    align-items: start;
  }
  .filary-obraz { position: sticky; top: calc(64px + var(--odstep-5)); }
}


/* --- jak to dziala: pasmo zdjecia i trzy kroki ------------------- */

.sekcja-pasmo { padding-bottom: clamp(var(--odstep-7), 8vw, var(--odstep-9)); }

.pasmo {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  background: var(--kolor-tlo-karty);
}
@media (min-width: 760px) { .pasmo { aspect-ratio: 32 / 9; } }

.pasmo-tresc { padding-top: clamp(var(--odstep-7), 6vw, var(--odstep-8)); }

.kroki {
  display: grid;
  gap: var(--odstep-6);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 820px) {
  .kroki { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--odstep-6); }
}

.krok {
  display: grid;
  gap: var(--odstep-3);
  align-content: start;
  padding-top: var(--odstep-4);
  border-top: 2px solid var(--kolor-akcent);
}
.krok h3 { font-size: var(--tekst-duzy); }
.krok p { color: var(--kolor-tekst-drugorzedny); }

/* zdanie, ktore klient naprawde dostaje, wyjete z maila */
.krok .krok-wiadomosc {
  margin-top: var(--odstep-2);
  padding: var(--odstep-4);
  background: var(--kolor-tlo-karty);
  border: 1px solid var(--kolor-obramowanie);
  border-radius: var(--promien-sredni);
  font-family: var(--kroj-naglowkowy);
  font-weight: 500;
  font-size: var(--tekst-maly);
  line-height: var(--interlinia-tekstowa);
  color: var(--kolor-tekst-glowny);
}


/* --- pakiety ----------------------------------------------------- */

.pakiety {
  display: grid;
  gap: var(--odstep-5);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .pakiety { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pakiety { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pakiety-wspolne {
  margin-top: var(--odstep-5);
  padding: var(--odstep-5);
  background: var(--kolor-tlo-strony);
  border: 1px solid var(--kolor-obramowanie);
  border-radius: var(--promien-sredni);
  max-width: 82ch;
}


/* --- zakres obslugi ---------------------------------------------- */

.grupy {
  display: grid;
  gap: var(--odstep-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .grupy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--odstep-7); } }
@media (min-width: 1000px) { .grupy { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--odstep-6); } }

.grupa { display: grid; gap: var(--odstep-3); align-content: start; }
.grupa-tytul {
  display: flex;
  align-items: center;
  gap: var(--odstep-2);
  padding-bottom: var(--odstep-3);
  border-bottom: 2px solid var(--kolor-akcent);
}
.grupa-tytul svg { width: 22px; height: 22px; flex: none; color: var(--kolor-akcent); }
.grupa-tytul h3 { font-size: var(--tekst-sredni); }
.grupa ul { display: grid; gap: var(--odstep-3); font-size: var(--tekst-maly); }
.grupa li {
  display: flex;
  gap: var(--odstep-3);
  color: var(--kolor-tekst-drugorzedny);
  line-height: var(--interlinia-tekstowa);
}
/* punktor jest belka o proporcji daszka ze znaku, nie ikona */
.grupa li::before {
  content: "";
  flex: none;
  width: var(--odstep-3);
  height: var(--odstep-1);
  margin-top: calc((var(--tekst-maly) * var(--interlinia-tekstowa) - var(--odstep-1)) / 2);
  background: var(--kolor-akcent);
}

.wykluczenia {
  margin-top: var(--odstep-8);
  padding: var(--odstep-6);
  background: var(--kolor-tlo-karty);
  border: 1px solid var(--kolor-obramowanie);
  border-radius: var(--promien-sredni);
}
.wykluczenia ul {
  display: grid;
  gap: var(--odstep-3);
  margin-block: var(--odstep-5);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .wykluczenia ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wykluczenia li {
  display: flex;
  gap: var(--odstep-3);
  line-height: var(--interlinia-tekstowa);
}
.wykluczenia li::before {
  content: "";
  flex: none;
  width: var(--odstep-3);
  height: var(--odstep-1);
  margin-top: calc((var(--tekst-bazowy) * var(--interlinia-tekstowa) - var(--odstep-1)) / 2);
  background: var(--kolor-obramowanie-pola);
}
.wykluczenia-zdanie {
  padding-top: var(--odstep-5);
  border-top: 1px solid var(--kolor-obramowanie);
  font-size: var(--tekst-sredni);
  font-family: var(--kroj-naglowkowy);
  font-weight: 500;
  line-height: var(--interlinia-naglowkowa);
  letter-spacing: -0.01em;
}


/* --- trzy promocje ----------------------------------------------
   Przeprowadzka jest szersza od dwoch pozostalych, bo to ona zdejmuje
   jedyna realna przeszkode przed zmiana dostawcy. Trzy tresci, trzy
   pola siatki, zadnego pustego. */

.promocje {
  display: grid;
  gap: var(--odstep-5);
  grid-template-columns: 1fr;
}

.promocja {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--kolor-tlo-strony);
  border: 1px solid var(--kolor-obramowanie);
  border-radius: var(--promien-sredni);
}
.promocja-obraz img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--kolor-tlo-karty);
}
.promocja-tresc {
  display: grid;
  gap: var(--odstep-3);
  align-content: start;
  padding: clamp(var(--odstep-5), 3vw, var(--odstep-6));
}
.promocja-tresc p { color: var(--kolor-tekst-drugorzedny); }
.promocja-lead {
  font-family: var(--kroj-naglowkowy);
  font-size: var(--tekst-sredni);
  font-weight: 500;
  line-height: var(--interlinia-naglowkowa);
  letter-spacing: -0.01em;
  color: var(--kolor-tekst-glowny);
}
.promocja-tresc .przycisk { justify-self: start; margin-top: var(--odstep-3); }

@media (min-width: 820px) {
  .promocje { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promocja-szeroka {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: stretch;
  }
  .promocja-szeroka .promocja-obraz { height: 100%; }
  .promocja-szeroka .promocja-obraz img {
    height: 100%;
    min-height: 300px;
    aspect-ratio: auto;
  }
  .promocja-szeroka .promocja-tresc { align-content: center; padding: var(--odstep-7); }
}


/* --- dowod: co klient moze sprawdzic sam ------------------------- */

.dowod-uklad {
  display: grid;
  gap: var(--odstep-7);
  grid-template-columns: 1fr;
  align-items: center;
}
.dowod-obraz img { aspect-ratio: 5 / 4; }

/* Prawa kolumna dowodu. Naglowek niesie wlasny odstep dolny, wiec
   tutaj tylko porzadek pionowy i zabezpieczenie przed rozpychaniem
   siatki przez dlugi numer telefonu. */
.dowod-tresc {
  display: grid;
  gap: 0;
  align-content: center;
  min-width: 0;
}

.dowod-lista { display: grid; gap: var(--odstep-4); }
.dowod-lista li {
  padding-top: var(--odstep-4);
  border-top: 1px solid var(--kolor-obramowanie);
  font-size: clamp(var(--tekst-bazowy), 2vw, var(--tekst-sredni));
  line-height: var(--interlinia-naglowkowa);
  color: var(--kolor-tekst-drugorzedny);
}
.dowod-lista li b {
  font-family: var(--kroj-naglowkowy);
  color: var(--kolor-tekst-glowny);
}

@media (min-width: 900px) {
  .dowod-uklad {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--odstep-8);
  }
}


/* --- trzy pytania ------------------------------------------------ */

.pytania {
  max-width: 84ch;
  border-top: 1px solid var(--kolor-obramowanie);
}

.pytanie { border-bottom: 1px solid var(--kolor-obramowanie); }

.pytanie summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--odstep-5);
  padding-block: var(--odstep-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--kroj-naglowkowy);
  font-size: clamp(var(--tekst-sredni), 2.6vw, var(--tekst-duzy));
  font-weight: 600;
  line-height: var(--interlinia-naglowkowa);
  letter-spacing: -0.015em;
}
.pytanie summary::-webkit-details-marker { display: none; }

.pytanie summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  margin-right: var(--odstep-1);
  border-right: 2px solid var(--kolor-akcent);
  border-bottom: 2px solid var(--kolor-akcent);
  transform: rotate(45deg);
  transition-property: transform;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.pytanie[open] summary::after { transform: rotate(225deg); }
.pytanie summary:hover { color: var(--kolor-akcent); }

.pytanie-tresc {
  display: grid;
  gap: var(--odstep-4);
  max-width: 68ch;
  padding-bottom: var(--odstep-6);
  color: var(--kolor-tekst-drugorzedny);
}

/* Otwarcie ma byc plynne, ale krotkie: odpowiedz wsuwa sie spod
   pytania zamiast pojawiac sie skokiem. Ruch jest na opacity
   i transform, wiec nie przelicza ukladu. Przy ograniczeniu ruchu
   blok z rozdzialu 8 skraca go do niezauwazalnego. */
@media (prefers-reduced-motion: no-preference) {
  .pytanie[open] .pytanie-tresc {
    animation: pytanie-otwarcie 260ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@keyframes pytanie-otwarcie {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}


/* --- formularz --------------------------------------------------- */

.formularz-uklad {
  display: grid;
  gap: var(--odstep-6);
  grid-template-columns: 1fr;
  align-items: start;
}
.formularz-naglowek { margin-bottom: 0; }

@media (min-width: 940px) {
  .formularz-uklad {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--odstep-8);
  }
  .formularz-naglowek { position: sticky; top: calc(64px + var(--odstep-6)); }
}

.formularz-panel {
  display: grid;
  gap: var(--odstep-5);
  width: 100%;
  max-width: 900px;
  grid-template-columns: 1fr;
  justify-self: stretch;
  padding: clamp(var(--odstep-5), 4vw, var(--odstep-7));
  background: var(--kolor-tlo-karty);
  border: 1px solid var(--kolor-obramowanie);
  border-radius: var(--promien-sredni);
}
.formularz-panel .pole input,
.formularz-panel .pole textarea { background: var(--kolor-tlo-strony); }

.formularz-stopka { display: grid; gap: var(--odstep-3); justify-items: start; }

/* Pola zostaja jedno pod drugim w kazdej szerokosci. Formularz prosi
   o jedna rzecz naraz, tak samo jak reszta obslugi. Przycisk i zdanie
   o czasie odpowiedzi staja obok siebie, gdy jest na to miejsce. */
@media (min-width: 720px) {
  .formularz-stopka {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--odstep-5);
  }
}


/* ==================================================================
   8. Ruch: tylko tam, gdzie jest odpowiedzia na dzialanie
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* Wejscie w kadr. Uruchamia je JavaScript, ustawiajac data-ruch na
   korzeniu dokumentu, wiec bez skryptu i przy prefers-reduced-motion
   wszystko stoi widoczne od poczatku. */
[data-ruch="tak"] .wejscie {
  opacity: 0;
  transform: translateY(12px);
  transition-property: opacity, transform;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
[data-ruch="tak"] .wejscie[data-widoczne="tak"] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-ruch="tak"] .wejscie { opacity: 1; transform: none; }
}