/* =========================================
   PABOLAE.COM — styl.css
   Układ: stały lewy sidebar
   Paleta: głęboki niebieski #1a2744 + złoto #c9a84c + biały
   ========================================= */

:root {
  --kol-glowny: #1a2744;
  --kol-glowny-jasny: #243560;
  --kol-zloto: #c9a84c;
  --kol-zloto-ciemne: #a8883a;
  --kol-bialy: #ffffff;
  --kol-tlo: #f4f6fa;
  --kol-tlo-ciemne: #e8ecf5;
  --kol-tekst: #1a2744;
  --kol-tekst-jasny: #4a5878;
  --kol-ramka: #d0d8e8;
  --kol-sukces: #2e7d32;
  --kol-blad: #c62828;

  --czcionka-tytul: 'Georgia', 'Times New Roman', serif;
  --czcionka-tresc: 'Arial', 'Helvetica Neue', sans-serif;
  --czcionka-mono: 'Courier New', Courier, monospace;

  --sidebar-szer: 260px;
  --przerwa-s: 1rem;
  --przerwa-m: 2rem;
  --przerwa-l: 4rem;
  --promien: 2px;
  --cien: 0 2px 12px rgba(26, 39, 68, 0.12);
  --cien-mocny: 0 4px 24px rgba(26, 39, 68, 0.2);
}

/* =========================================
   RESET & BASE
   ========================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--czcionka-tresc);
  color: var(--kol-tekst);
  background: var(--kol-tlo);
  line-height: 1.65;
  display: flex;
  min-height: 100vh;
}

img { max-width: 100%; display: block; }
a { color: var(--kol-zloto); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; }

/* =========================================
   SIDEBAR (PASEK BOCZNY)
   ========================================= */
.pasek-boczny {
  width: var(--sidebar-szer);
  min-width: var(--sidebar-szer);
  background: var(--kol-glowny);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  z-index: 200;
  overflow-y: auto;
  border-right: 3px solid var(--kol-zloto);
}

.pasek-logo {
  padding: 2rem 1.5rem 1.5rem;
  border-bottom: 1px solid rgba(201, 168, 76, 0.3);
}

.pasek-logo a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  text-decoration: none;
}

.pasek-logo-nazwa {
  font-family: var(--czcionka-tytul);
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--kol-bialy);
  letter-spacing: 0.04em;
}

.pasek-logo-tagline {
  font-size: 0.72rem;
  color: var(--kol-zloto);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.pasek-nawigacja {
  flex: 1;
  padding: 1.5rem 0;
}

.pasek-nawigacja ul {
  display: flex;
  flex-direction: column;
}

.pasek-nawigacja li a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.pasek-nawigacja li a:hover,
.pasek-nawigacja li a.aktywny {
  background: rgba(201, 168, 76, 0.1);
  color: var(--kol-zloto);
  border-left-color: var(--kol-zloto);
}

.pasek-nawigacja .nw-ikona {
  width: 16px;
  height: 16px;
  opacity: 0.7;
  flex-shrink: 0;
}

.pasek-kontakt-info {
  padding: 1.5rem;
  border-top: 1px solid rgba(201, 168, 76, 0.3);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.8;
}

.pasek-kontakt-info strong {
  color: var(--kol-zloto);
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Hamburger (mobile) */
.hamburger {
  display: none;
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 300;
  background: var(--kol-glowny);
  border: 2px solid var(--kol-zloto);
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--kol-bialy);
}

/* =========================================
   GŁÓWNA TREŚĆ
   ========================================= */
.glowna-tresc {
  margin-left: var(--sidebar-szer);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* =========================================
   HERO — split (tekst lewa / formularz prawa)
   ========================================= */
.sek-hero {
  background: var(--kol-glowny);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.sek-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 40px,
    rgba(201, 168, 76, 0.03) 40px,
    rgba(201, 168, 76, 0.03) 80px
  );
  pointer-events: none;
}

.hero-lewa {
  padding: 5rem 3rem 5rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.hero-etykieta {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--kol-zloto);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hero-etykieta::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--kol-zloto);
}

.hero-tytul {
  font-family: var(--czcionka-tytul);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: bold;
  color: var(--kol-bialy);
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

.hero-tytul em {
  color: var(--kol-zloto);
  font-style: normal;
}

.hero-opis {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.75);
  max-width: 480px;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

.hero-dane {
  display: flex;
  gap: 2.5rem;
  margin-top: 2rem;
}

.hero-dana-elem {
  text-align: left;
}

.hero-dana-liczba {
  font-family: var(--czcionka-tytul);
  font-size: 2rem;
  font-weight: bold;
  color: var(--kol-zloto);
  line-height: 1;
}

.hero-dana-opis {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.3rem;
}

.hero-prawa {
  background: rgba(255, 255, 255, 0.04);
  border-left: 1px solid rgba(201, 168, 76, 0.2);
  padding: 5rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* =========================================
   FORMULARZ
   ========================================= */
.form-tytul {
  font-family: var(--czcionka-tytul);
  font-size: 1.3rem;
  color: var(--kol-bialy);
  margin-bottom: 0.5rem;
}

.form-podtytul {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 2rem;
}

.form-pole {
  margin-bottom: 1.2rem;
}

.form-pole label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.4rem;
}

.form-pole input,
.form-pole select,
.form-pole textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(201, 168, 76, 0.3);
  color: var(--kol-bialy);
  padding: 0.75rem 1rem;
  font-family: var(--czcionka-tresc);
  font-size: 0.9rem;
  border-radius: var(--promien);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.form-pole input::placeholder,
.form-pole textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.form-pole input:focus,
.form-pole select:focus,
.form-pole textarea:focus {
  border-color: var(--kol-zloto);
  background: rgba(255, 255, 255, 0.1);
}

.form-pole select option { background: var(--kol-glowny); }

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

.form-pole.blad input,
.form-pole.blad select,
.form-pole.blad textarea {
  border-color: #ff6b6b;
}

.form-blad-msg {
  font-size: 0.75rem;
  color: #ff6b6b;
  margin-top: 0.3rem;
  display: none;
}

.form-pole.blad .form-blad-msg { display: block; }

.przycisk-glowny {
  width: 100%;
  background: var(--kol-zloto);
  color: var(--kol-glowny);
  border: none;
  padding: 0.9rem 2rem;
  font-family: var(--czcionka-tresc);
  font-size: 0.85rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  border-radius: var(--promien);
  transition: background 0.2s, transform 0.1s;
}

.przycisk-glowny:hover { background: var(--kol-zloto-ciemne); }
.przycisk-glowny:active { transform: scale(0.99); }

.przycisk-glowny:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Przycisk drugorzędny */
.przycisk-drugo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--kol-zloto);
  border: 1px solid var(--kol-zloto);
  padding: 0.7rem 1.5rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  font-family: var(--czcionka-tresc);
  text-decoration: none;
  border-radius: var(--promien);
  transition: background 0.2s, color 0.2s;
}

.przycisk-drugo:hover {
  background: var(--kol-zloto);
  color: var(--kol-glowny);
  text-decoration: none;
}

/* =========================================
   UKOŚNY SEPARATOR
   ========================================= */
.ukosy-separator {
  height: 80px;
  background: var(--kol-glowny);
  clip-path: polygon(0 0, 100% 0, 100% 30%, 0 100%);
  margin-bottom: -2px;
}

.ukosy-separator--odwrocony {
  background: var(--kol-tlo);
  clip-path: polygon(0 0, 100% 70%, 100% 100%, 0 100%);
}

.ukosy-separator--zloty {
  background: var(--kol-zloto);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
}

/* =========================================
   SEKCJE OGÓLNE
   ========================================= */
.sek-padding {
  padding: var(--przerwa-l) 3.5rem;
}

.sek-tytul-blok {
  margin-bottom: 3rem;
}

.sek-etykieta {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--kol-zloto);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sek-etykieta::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--kol-zloto);
}

.sek-naglowek {
  font-family: var(--czcionka-tytul);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--kol-glowny);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.sek-naglowek--bialy { color: var(--kol-bialy); }

.sek-podtytul {
  font-size: 1rem;
  color: var(--kol-tekst-jasny);
  max-width: 600px;
  line-height: 1.7;
}

/* =========================================
   SEKCJA USŁUG — zygzak (naprzemiennie)
   ========================================= */
.sek-uslugi { background: var(--kol-bialy); }

.usluga-rzad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  border-bottom: 1px solid var(--kol-ramka);
}

.usluga-rzad:last-child { border-bottom: none; }

.usluga-rzad--odwrocony .usluga-grafika { order: -1; }

.usluga-tekst {
  padding: 4rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.usluga-numer {
  font-family: var(--czcionka-mono);
  font-size: 0.7rem;
  color: var(--kol-zloto);
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.usluga-naglowek {
  font-family: var(--czcionka-tytul);
  font-size: 1.7rem;
  color: var(--kol-glowny);
  margin-bottom: 1.2rem;
  line-height: 1.2;
}

.usluga-opis {
  font-size: 0.95rem;
  color: var(--kol-tekst-jasny);
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.usluga-lista {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.usluga-lista li {
  font-size: 0.88rem;
  color: var(--kol-tekst-jasny);
  padding-left: 1.4rem;
  position: relative;
}

.usluga-lista li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--kol-zloto);
  font-weight: bold;
}

.usluga-grafika {
  background: var(--kol-tlo-ciemne);
  border-left: 4px solid var(--kol-zloto);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  overflow: hidden;
}

.usluga-rzad--odwrocony .usluga-grafika {
  border-left: none;
  border-right: 4px solid var(--kol-zloto);
}

/* =========================================
   QUIZ — wieloetapowy
   ========================================= */
.sek-quiz {
  background: var(--kol-glowny);
  padding: var(--przerwa-l) 3.5rem;
  position: relative;
  overflow: hidden;
}

.sek-quiz::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 0; right: 0;
  height: 80px;
  background: var(--kol-bialy);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 30%);
}

.quiz-kontener {
  max-width: 720px;
  margin: 0 auto;
}

.quiz-pasek-postepu {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}

.quiz-krok-indikator {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  transition: background 0.3s;
}

.quiz-krok-indikator.aktywny { background: var(--kol-zloto); }
.quiz-krok-indikator.zaliczony { background: rgba(201, 168, 76, 0.5); }

.quiz-pytanie { display: none; }
.quiz-pytanie.widoczny { display: block; }

.quiz-pytanie-tresc {
  font-family: var(--czcionka-tytul);
  font-size: 1.5rem;
  color: var(--kol-bialy);
  margin-bottom: 0.75rem;
}

.quiz-pytanie-opis {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 2rem;
}

.quiz-opcje {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.quiz-opcja {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.25);
  color: rgba(255, 255, 255, 0.8);
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-size: 0.88rem;
  text-align: left;
  border-radius: var(--promien);
  transition: all 0.2s;
  font-family: var(--czcionka-tresc);
}

.quiz-opcja:hover { border-color: var(--kol-zloto); color: var(--kol-bialy); }
.quiz-opcja.wybrana {
  background: rgba(201, 168, 76, 0.15);
  border-color: var(--kol-zloto);
  color: var(--kol-zloto);
}

.quiz-nawigacja {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.quiz-info-krok {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-left: auto;
  font-family: var(--czcionka-mono);
}

.quiz-wynik { display: none; }
.quiz-wynik.widoczny { display: block; }

.quiz-wynik-ramka {
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid var(--kol-zloto);
  padding: 2.5rem;
  text-align: center;
}

.quiz-wynik-tytul {
  font-family: var(--czcionka-tytul);
  font-size: 1.6rem;
  color: var(--kol-zloto);
  margin-bottom: 1rem;
}

.quiz-wynik-opis {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  margin-bottom: 2rem;
}

/* =========================================
   CASE STUDIES — blok zaufania
   ========================================= */
.sek-kejs { background: var(--kol-tlo); padding: var(--przerwa-l) 3.5rem; }

.kejs-siatka {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.kejs-karta {
  background: var(--kol-bialy);
  border-top: 4px solid var(--kol-glowny);
  padding: 2rem;
  box-shadow: var(--cien);
}

.kejs-etap {
  font-size: 0.7rem;
  font-family: var(--czcionka-mono);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--kol-zloto);
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.kejs-etap-elem { display: flex; flex-direction: column; gap: 0.2rem; }

.kejs-etap-nazwa {
  font-size: 0.62rem;
  color: var(--kol-tekst-jasny);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.kejs-etap-wartosc {
  font-size: 0.85rem;
  color: var(--kol-tekst);
  font-family: var(--czcionka-tresc);
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
}

.kejs-wynik-linia {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--kol-ramka);
}

.kejs-wynik-ikona {
  width: 32px;
  height: 32px;
  background: var(--kol-glowny);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kejs-wynik-tekst {
  font-size: 0.88rem;
  color: var(--kol-tekst);
  font-weight: bold;
  line-height: 1.3;
}

/* =========================================
   STOPKA
   ========================================= */
.stopka {
  background: var(--kol-glowny);
  padding: 3rem 3.5rem;
  margin-top: auto;
}

.stopka-siatka {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
}

.stopka-kol-tytul {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--kol-zloto);
  margin-bottom: 1rem;
}

.stopka-kol-nazwa {
  font-family: var(--czcionka-tytul);
  font-size: 1.3rem;
  color: var(--kol-bialy);
  margin-bottom: 0.5rem;
}

.stopka-kol-opis {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.7;
}

.stopka-kol ul { display: flex; flex-direction: column; gap: 0.5rem; }

.stopka-kol ul li a {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.2s;
}

.stopka-kol ul li a:hover { color: var(--kol-zloto); }

.stopka-kontakt-elem {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0.4rem;
}

.stopka-dolna {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.stopka-copy {
  font-size: 0.77rem;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--czcionka-mono);
}

.stopka-linki {
  display: flex;
  gap: 1.5rem;
}

.stopka-linki a {
  font-size: 0.77rem;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color 0.2s;
}

.stopka-linki a:hover { color: var(--kol-zloto); }

/* =========================================
   STRONA WEWNĘTRZNA — hero
   ========================================= */
.sek-hero-podstrona {
  background: var(--kol-glowny);
  padding: 4rem 3.5rem 5rem;
  position: relative;
  overflow: hidden;
}

.sek-hero-podstrona::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: var(--kol-tlo);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.hero-pod-okruszki {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 1.5rem;
  font-family: var(--czcionka-mono);
}

.hero-pod-okruszki a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
}

.hero-pod-okruszki a:hover { color: var(--kol-zloto); }

.hero-pod-tytul {
  font-family: var(--czcionka-tytul);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  color: var(--kol-bialy);
  margin-bottom: 1rem;
  max-width: 700px;
}

.hero-pod-opis {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.65);
  max-width: 600px;
  line-height: 1.7;
}

/* =========================================
   STRONA KONTAKT
   ========================================= */
.sek-kontakt { background: var(--kol-bialy); padding: var(--przerwa-l) 3.5rem; }

.kontakt-siatka {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}

.kontakt-info-elem {
  display: flex;
  gap: 1.2rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--kol-ramka);
}

.kontakt-info-elem:last-child { border-bottom: none; }

.kontakt-ikona-kolo {
  width: 44px;
  height: 44px;
  background: var(--kol-glowny);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kontakt-info-tytul {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--kol-tekst-jasny);
  margin-bottom: 0.3rem;
}

.kontakt-info-wartosc {
  font-size: 0.95rem;
  color: var(--kol-tekst);
  font-weight: 600;
}

.kontakt-form-opakowanie {
  background: var(--kol-tlo);
  padding: 2.5rem;
  border-left: 4px solid var(--kol-glowny);
}

.kontakt-form-opakowanie .form-pole label { color: var(--kol-tekst-jasny); }

.kontakt-form-opakowanie .form-pole input,
.kontakt-form-opakowanie .form-pole select,
.kontakt-form-opakowanie .form-pole textarea {
  background: var(--kol-bialy);
  border-color: var(--kol-ramka);
  color: var(--kol-tekst);
}

.kontakt-form-opakowanie .form-pole input::placeholder,
.kontakt-form-opakowanie .form-pole textarea::placeholder {
  color: rgba(74, 88, 120, 0.5);
}

.kontakt-form-opakowanie .form-pole input:focus,
.kontakt-form-opakowanie .form-pole textarea:focus,
.kontakt-form-opakowanie .form-pole select:focus {
  border-color: var(--kol-glowny);
  background: var(--kol-bialy);
}

/* =========================================
   CENNIK
   ========================================= */
.sek-cennik { background: var(--kol-bialy); padding: var(--przerwa-l) 3.5rem; }

.cennik-tabela-opakowanie { overflow-x: auto; margin-top: 2.5rem; }

.cennik-tabela {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--kol-ramka);
}

.cennik-tabela th {
  background: var(--kol-glowny);
  color: var(--kol-bialy);
  padding: 1.2rem 1.5rem;
  text-align: left;
  font-family: var(--czcionka-tytul);
  font-size: 1rem;
  font-weight: normal;
}

.cennik-tabela th.wyroznionyy {
  background: var(--kol-zloto);
  color: var(--kol-glowny);
}

.cennik-tabela td {
  padding: 0.9rem 1.5rem;
  border-bottom: 1px solid var(--kol-ramka);
  font-size: 0.88rem;
  color: var(--kol-tekst);
}

.cennik-tabela td:first-child { font-weight: 600; }

.cennik-tabela tr:last-child td { border-bottom: none; }

.cennik-tabela tr:nth-child(even) td { background: var(--kol-tlo); }

.cennik-pakiet-cena {
  font-family: var(--czcionka-tytul);
  font-size: 1.2rem;
  color: var(--kol-glowny);
  font-weight: bold;
}

.cennik-pakiet-cena.zloty { color: var(--kol-zloto-ciemne); }

.cennik-znacznik {
  color: var(--kol-sukces);
  font-size: 1rem;
}

.cennik-uwaga {
  margin-top: 1.5rem;
  font-size: 0.82rem;
  color: var(--kol-tekst-jasny);
  line-height: 1.6;
  padding: 1rem 1.5rem;
  border-left: 3px solid var(--kol-zloto);
  background: var(--kol-tlo);
}

/* =========================================
   STRONA POLITYKI
   ========================================= */
.sek-polityki { background: var(--kol-bialy); padding: var(--przerwa-l) 3.5rem; }

.polityki-tresc {
  max-width: 800px;
}

.polityki-tresc h2 {
  font-family: var(--czcionka-tytul);
  font-size: 1.2rem;
  color: var(--kol-glowny);
  margin: 2.5rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--kol-ramka);
  counter-increment: sekcja;
}

.polityki-tresc h2::before {
  content: counter(sekcja) '. ';
  color: var(--kol-zloto);
  font-family: var(--czcionka-mono);
}

.polityki-tresc { counter-reset: sekcja; }

.polityki-tresc p {
  font-size: 0.92rem;
  color: var(--kol-tekst-jasny);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.polityki-tresc ol,
.polityki-tresc ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.polityki-tresc ol { list-style: decimal; }
.polityki-tresc ul { list-style: disc; }

.polityki-tresc li {
  font-size: 0.9rem;
  color: var(--kol-tekst-jasny);
  line-height: 1.7;
  margin-bottom: 0.4rem;
}

.polityki-tresc strong { color: var(--kol-tekst); }

.polityki-tresc a { color: var(--kol-glowny); }

.polityki-data {
  font-size: 0.8rem;
  color: var(--kol-tekst-jasny);
  font-family: var(--czcionka-mono);
  margin-bottom: 2rem;
  padding: 0.75rem 1rem;
  background: var(--kol-tlo);
  display: inline-block;
}

/* =========================================
   STRONA 404
   ========================================= */
.sek-404 {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--przerwa-l) 3.5rem;
  background: var(--kol-bialy);
}

.blad-404-opakowanie { text-align: center; max-width: 500px; }

.blad-404-cyfra {
  font-family: var(--czcionka-tytul);
  font-size: 8rem;
  color: var(--kol-ramka);
  line-height: 1;
  margin-bottom: 1rem;
  letter-spacing: -0.05em;
}

.blad-404-tytul {
  font-family: var(--czcionka-tytul);
  font-size: 1.6rem;
  color: var(--kol-glowny);
  margin-bottom: 1rem;
}

.blad-404-opis {
  font-size: 0.92rem;
  color: var(--kol-tekst-jasny);
  line-height: 1.7;
  margin-bottom: 2rem;
}

/* =========================================
   TOAST
   ========================================= */
.toast-pojemnik {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.toast {
  background: var(--kol-glowny);
  color: var(--kol-bialy);
  padding: 1rem 1.5rem;
  border-left: 4px solid var(--kol-zloto);
  font-size: 0.88rem;
  min-width: 280px;
  box-shadow: var(--cien-mocny);
  animation: toast-wejscie 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.toast--sukces { border-left-color: #4caf50; }
.toast--blad { border-left-color: #f44336; }

@keyframes toast-wejscie {
  from { transform: translateX(110%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes toast-wyjscie {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(110%); opacity: 0; }
}

.toast.wychodze {
  animation: toast-wyjscie 0.3s ease forwards;
}

/* =========================================
   COOKIE BANNER
   ========================================= */
.cookie-zaslon {
  position: fixed;
  inset: 0;
  background: rgba(26, 39, 68, 0.6);
  z-index: 8000;
  backdrop-filter: blur(2px);
}

.cookie-pasek {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-szer);
  right: 0;
  z-index: 8001;
  background: var(--kol-glowny);
  border-top: 3px solid var(--kol-zloto);
  padding: 1.5rem 2.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
}

.cookie-tekst {
  flex: 1;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  min-width: 260px;
}

.cookie-tekst strong { color: var(--kol-bialy); }

.cookie-tekst a { color: var(--kol-zloto); }

.cookie-przyciski {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.cookie-btn-akceptuj {
  background: var(--kol-zloto);
  color: var(--kol-glowny);
  border: none;
  padding: 0.65rem 1.5rem;
  font-size: 0.82rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  font-family: var(--czcionka-tresc);
  border-radius: var(--promien);
  transition: background 0.2s;
}

.cookie-btn-akceptuj:hover { background: var(--kol-zloto-ciemne); }

.cookie-btn-odrzuc {
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 0.65rem 1.2rem;
  font-size: 0.82rem;
  cursor: pointer;
  font-family: var(--czcionka-tresc);
  border-radius: var(--promien);
  transition: border-color 0.2s, color 0.2s;
}

.cookie-btn-odrzuc:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--kol-bialy);
}

/* =========================================
   UKOŚNY SEPARATOR — powtórny styl
   ========================================= */
.pasy-ukosne {
  height: 70px;
  position: relative;
  overflow: hidden;
}

.pasy-ukosne--ciemne-na-jasne {
  background: var(--kol-glowny);
  clip-path: polygon(0 0, 100% 0, 100% 20%, 0 100%);
}

.pasy-ukosne--jasne-na-ciemne {
  background: var(--kol-tlo);
  clip-path: polygon(0 0, 100% 80%, 100% 100%, 0 100%);
}

/* =========================================
   SEKCJA SPRZĄTANIE BIUR / MIESZKAŃ itp.
   ========================================= */
.sek-szczegoly { background: var(--kol-bialy); padding: var(--przerwa-l) 3.5rem; }

.szczegoly-siatka {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  margin-top: 2rem;
}

.szczegoly-lista-pkt {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.szczegoly-pkt {
  display: flex;
  gap: 1.2rem;
}

.szczegoly-pkt-num {
  font-family: var(--czcionka-mono);
  font-size: 0.9rem;
  color: var(--kol-zloto);
  font-weight: bold;
  min-width: 32px;
  margin-top: 0.15rem;
}

.szczegoly-pkt-tytul {
  font-family: var(--czcionka-tytul);
  font-size: 1rem;
  color: var(--kol-glowny);
  margin-bottom: 0.4rem;
}

.szczegoly-pkt-opis {
  font-size: 0.88rem;
  color: var(--kol-tekst-jasny);
  line-height: 1.7;
}

.szczegoly-ramka {
  background: var(--kol-tlo);
  border: 1px solid var(--kol-ramka);
  border-top: 4px solid var(--kol-glowny);
  padding: 2rem;
}

.szczegoly-ramka-tytul {
  font-family: var(--czcionka-tytul);
  font-size: 1.1rem;
  color: var(--kol-glowny);
  margin-bottom: 1.2rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--kol-ramka);
}

/* =========================================
   RESPONSYWNOŚĆ
   ========================================= */
@media (max-width: 1100px) {
  .sek-hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-lewa { padding: 4rem 2.5rem 2rem; }
  .hero-prawa { padding: 2rem 2.5rem 4rem; border-left: none; border-top: 1px solid rgba(201,168,76,0.2); }
  .kejs-siatka { grid-template-columns: 1fr; }
  .stopka-siatka { grid-template-columns: 1fr 1fr; }
  .cennik-tabela th, .cennik-tabela td { padding: 0.8rem 1rem; }
}

@media (max-width: 900px) {
  .usluga-rzad { grid-template-columns: 1fr; }
  .usluga-rzad--odwrocony .usluga-grafika { order: 0; }
  .usluga-grafika { min-height: 240px; border-left: none !important; border-right: none !important; border-top: 4px solid var(--kol-zloto); }
  .kontakt-siatka { grid-template-columns: 1fr; }
  .szczegoly-siatka { grid-template-columns: 1fr; }
  .quiz-opcje { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .pasek-boczny {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  .pasek-boczny.otwarty { transform: translateX(0); }
  .hamburger { display: flex; }
  .glowna-tresc { margin-left: 0; }
  .cookie-pasek { left: 0; }
  .sek-padding, .sek-quiz, .sek-kejs, .sek-cennik, .sek-kontakt, .sek-uslugi, .sek-polityki, .sek-szczegoly { padding: 3rem 1.5rem; }
  .sek-hero-podstrona { padding: 3rem 1.5rem 4rem; }
  .stopka { padding: 2.5rem 1.5rem; }
  .stopka-siatka { grid-template-columns: 1fr; gap: 2rem; }
  .hero-lewa, .hero-prawa { padding: 3rem 1.5rem; }
  .usluga-tekst { padding: 2.5rem 1.5rem; }
}