/* ============================================================
   Masters of Moving, Michal Wytrychowski, Warszawa - demo
   Szablon AL-TRANS (hero full-bleed, ziarno, powolny reveal od dolu),
   przelozony na barwy z jego wlasnej grafiki z wizytowki: czern i zloto.
   Notatka Maksa: "ztonowana, czytelnie wyrazicie", stad czern jako baza
   i zloto jako jeden mocny akcent zamiast wielu kolorow.
   Zdjecia: jeden kadr z wizytowki plus kadry dogenerowane Nano Banana Pro.
   ============================================================ */

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

html { scroll-behavior: smooth; }
html.menu-open { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.container { width: min(1200px, calc(100% - 40px)); margin-inline: auto; }
@media (max-width: 640px) { .container { width: calc(100% - 32px); } }

/* --- typografia ------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.06;
  margin: 0;
}
.h2 { font-size: clamp(30px, 5vw, 54px); max-width: 20ch; }
.h2--srodek { max-width: 24ch; margin-inline: auto; text-align: center; }
p { margin: 0 0 18px; }

/* --- sekcje ---------------------------------------------------- */
.section { padding: clamp(64px, 9vw, 128px) 0; position: relative; }
.na-ciemnym {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 60%, var(--ink) 100%);
  color: #FFF;
}
.szew { height: 56px; background: linear-gradient(180deg, var(--bg), var(--surface-2)); }

.fx-grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

/* --- przyciski -------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 30px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: 16px; font-weight: 500;
  letter-spacing: -.01em; text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--czerwony { background: var(--accent); color: var(--accent-ink); }
.btn--czerwony:hover { background: var(--accent-deep); }
.btn--ciemny { background: var(--ink); color: #FFF; }
.btn--ciemny:hover { background: var(--ink-3); }
.btn--kontur { background: transparent; color: var(--text); border-color: var(--line); }
.btn--kontur:hover { border-color: var(--ink); }
.na-ciemnym .btn--kontur, .hero .btn--kontur, .opinie .btn--kontur { color: #FFF; border-color: rgba(255, 255, 255, .32); }
.na-ciemnym .btn--kontur:hover, .hero .btn--kontur:hover, .opinie .btn--kontur:hover { border-color: #FFF; background: rgba(255, 255, 255, .08); }
.btn .znak { flex: none; }

/* --- preloader --------------------------------------------------- */
#preloader {
  position: fixed; inset: 0; z-index: 999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  background: var(--ink);
  transition: opacity .5s var(--ease), visibility .5s;
}
#preloader.done { opacity: 0; visibility: hidden; }
.loader-logo { position: relative; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 8vw, 62px); letter-spacing: -.02em; }
.loader-logo .ghost { color: rgba(255, 255, 255, .16); }
.loader-logo .fill {
  position: absolute; inset: 0; color: #FFF; white-space: nowrap;
  clip-path: inset(0 100% 0 0); transition: clip-path .18s linear;
}
.loader-bar { width: min(260px, 60vw); height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.loader-bar span { display: block; height: 100%; width: 0; background: var(--accent-bright); transition: width .18s linear; }

/* --- naglowek i znak slowny -------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 90;
  background: rgba(15, 19, 22, .88);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: var(--naglowek);
  padding-block: 10px;
}
.logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.wordmark {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3.4vw, 38px); line-height: 1;
  letter-spacing: -.01em; color: #FFF;
}
.wm-linia { display: inline-flex; align-items: center; }
.wordmark .znak-strzalka { color: var(--accent-bright); margin: 0 3px; }
.wordmark small {
  font-family: var(--font-text); font-weight: 500;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-dark); margin-top: 6px;
}
.naglowek-prawa { display: flex; align-items: center; gap: 12px; }

.ikona-kolo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22); color: #FFF;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.ikona-kolo:hover { background: var(--accent); border-color: var(--accent); }

.btn-tel {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 20px 0 16px;
  border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .22);
  color: #FFF; text-decoration: none;
  font-family: var(--font-display); font-size: 16px; font-weight: 500; white-space: nowrap;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.btn-tel:hover { background: var(--accent); border-color: var(--accent); }

.menu-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; padding: 0 12px;
  background: var(--accent); border: 0; border-radius: 50%; cursor: pointer;
}
.menu-toggle span { display: block; height: 2px; border-radius: 2px; background: #FFF; }
.menu-toggle span:nth-child(2) { width: 70%; }

@media (max-width: 900px) {
  :root { --naglowek: 70px; }
  .wordmark { font-size: 24px; }
  .wordmark small { font-size: 8.5px; letter-spacing: .12em; }
  .btn-tel span { display: none; }
  .btn-tel { padding: 0; width: 46px; justify-content: center; }
}

/* --- szuflada menu ----------------------------------------------- */
.nav-overlay {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(12, 10, 13, .62);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s;
}
.nav-overlay.open { opacity: 1; visibility: visible; }
.szuflada {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 96;
  width: min(400px, 88vw);
  padding: 30px 34px 40px;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--ink); color: #FFF;
  transform: translateX(102%); transition: transform .45s var(--ease);
  overflow-y: auto;
}
.szuflada.open { transform: none; }
.szuflada-zamknij {
  align-self: flex-end; width: 44px; height: 44px; margin-bottom: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%;
  color: #FFF; cursor: pointer;
}
.szuflada-tytul { font-family: var(--font-display); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-bright); margin: 0 0 12px; }
.szuflada > a {
  font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -.02em;
  text-decoration: none; padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  opacity: 0; transform: translateX(22px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), color .2s;
}
.szuflada > a:hover { color: var(--accent-bright); }
.szuflada.open > a { opacity: 1; transform: none; }
.szuflada.open > a:nth-of-type(1) { transition-delay: .10s; }
.szuflada.open > a:nth-of-type(2) { transition-delay: .16s; }
.szuflada.open > a:nth-of-type(3) { transition-delay: .22s; }
.szuflada.open > a:nth-of-type(4) { transition-delay: .28s; }
.szuflada.open > a:nth-of-type(5) { transition-delay: .34s; }
.szuflada-stopka { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.szuflada-tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px; border-radius: var(--r-pill);
  background: var(--accent); color: #FFF; text-decoration: none;
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
}
.social-kola { display: flex; gap: 10px; justify-content: center; }

/* --- hero -------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex; align-items: flex-end;
  padding: calc(var(--naglowek) + 56px) 0 clamp(48px, 7vw, 96px);
  background: var(--ink);
  overflow: hidden;
}
.hero__tlo {
  position: absolute; inset: 0;
  background: url("images/hero.jpg") center 42% / cover no-repeat;
  animation: kenburns 26s var(--ease) infinite alternate;
}
@keyframes kenburns { from { transform: scale(1.06); } to { transform: scale(1.16) translate3d(-1.5%, -1%, 0); } }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(15, 19, 22, .78) 0%, rgba(15, 19, 22, .30) 34%, rgba(15, 19, 22, .86) 78%, rgba(15, 19, 22, .96) 100%),
    linear-gradient(96deg, rgba(15, 19, 22, .74) 0%, rgba(15, 19, 22, .12) 62%);
}
.hero .container { position: relative; z-index: 2; }
.hero h1 {
  color: #FFF;
  font-size: clamp(38px, 6.4vw, 84px);
  font-weight: 500;
  max-width: 16ch;
  margin: 0 0 34px;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .45);
}
.hero h1 .miasto { color: var(--accent-bright); }
.hero__akcje { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__akcje .btn { min-width: 262px; }
@media (max-width: 520px) {
  .hero__akcje { flex-direction: column; align-items: stretch; }
  .hero__akcje .btn { min-width: 0; width: 100%; }
}

/* --- pasek uslug -------------------------------------------------- */
.pasek { background: var(--accent); color: #FFF; padding: 20px 0; }
.pasek ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 26px;
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
}
.pasek li { display: inline-flex; align-items: center; gap: 26px; }
.pasek li::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.pasek li:last-child::after { display: none; }
@media (max-width: 760px) { .pasek li::after { display: none; } .pasek ul { gap: 8px 20px; } }

/* --- karty uslug ------------------------------------------------- */
.siatka-uslug { display: grid; gap: 22px; grid-template-columns: 1fr; margin-top: 54px; }
@media (min-width: 660px) { .siatka-uslug { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .siatka-uslug { grid-template-columns: repeat(3, 1fr); } }
.usluga {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 16px 16px 30px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.usluga:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.usluga__foto { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3 / 2; margin-bottom: 22px; }
.usluga__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.usluga:hover .usluga__foto img { transform: scale(1.06); }
.usluga h3 { font-size: 23px; padding: 0 12px; margin-bottom: 10px; }
.usluga p { padding: 0 12px; color: var(--muted); font-size: 15.5px; margin-bottom: 18px; }
.usluga .chipy { margin-top: auto; }
.chipy { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px; list-style: none; margin: 0; }
.chipy li {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 500; letter-spacing: .04em;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--muted);
}
.pod-siatka { margin-top: 46px; text-align: center; }

/* --- dlaczego my (alternating-split) ----------------------------- */
.split {
  display: grid; gap: clamp(32px, 5vw, 74px);
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split__foto { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; }
.split__foto img { width: 100%; height: 100%; object-fit: cover; }
.cytat {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(19px, 2.1vw, 24px); line-height: 1.42;
  color: var(--text); margin: 0 0 12px;
  padding-left: 22px; border-left: 3px solid var(--accent);
}
.cytat-autor { font-size: 14px; color: var(--muted); margin-bottom: 34px; }
.fakty { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fakty li {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 18px 22px;
}
.fakty b { font-family: var(--font-display); font-weight: 600; display: block; font-size: 17px; margin-bottom: 3px; }
.fakty span { color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.fakty .znak { flex: none; color: var(--accent); margin-top: 3px; }

/* --- proces ------------------------------------------------------ */
.kroki { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 54px; }
.krok {
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg);
  padding: 30px 26px 32px;
}
.krok__nr {
  font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .16em;
  color: var(--accent-bright); display: block; margin-bottom: 26px;
}
.krok h3 { font-size: 22px; color: #FFF; margin-bottom: 10px; }
.krok p { color: var(--muted-dark); font-size: 15.5px; margin: 0; }

/* --- opinie na zdjeciu, kafelki liquid glass --------------------- */
.opinie {
  background: url("images/opinie-tlo.jpg") center / cover no-repeat;
  color: #FFF;
}
.opinie::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 19, 22, .92) 0%, rgba(15, 19, 22, .66) 44%, rgba(15, 19, 22, 1) 100%);
}
.opinie > .container { position: relative; z-index: 1; }
.gwiazdki { color: var(--accent-bright); letter-spacing: 2px; font-size: 18px; }
.karuzela { position: relative; margin-top: 30px; }
.karuzela__tor {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  /* pionowy padding: overflow-x:auto obcina cien kafelka bez tego zapasu */
  padding: 16px 0 28px;
  scrollbar-width: none;
}
.karuzela__tor::-webkit-scrollbar { display: none; }
.opinia {
  flex: 0 0 100%; scroll-snap-align: start;
  border-radius: var(--r-xl);
  padding: 32px 30px;
  display: flex; flex-direction: column;
  background: linear-gradient(148deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .07) 55%, rgba(255, 255, 255, .04) 100%);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .28);
  color: #FFF;
}
@media (min-width: 700px) { .opinia { flex-basis: calc((100% - 20px) / 2); } }
@media (min-width: 1040px) { .opinia { flex-basis: calc((100% - 40px) / 3); } }
.opinia .gwiazdki { margin-bottom: 16px; }
.opinia p { font-size: 16.5px; color: rgba(255, 255, 255, .93); margin-bottom: 22px; }
.opinia footer { margin-top: auto; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: #FFF; }
.opinia footer small { display: block; font-family: var(--font-text); font-weight: 400; color: rgba(255, 255, 255, .66); font-size: 13.5px; margin-top: 3px; }
.karuzela__nawigacja { display: flex; gap: 10px; justify-content: center; margin-top: 32px; }
.karuzela__btn {
  width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28); color: #FFF;
  background: rgba(255, 255, 255, .10);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.karuzela__btn:hover { background: var(--accent); border-color: var(--accent); }

/* --- kontakt ----------------------------------------------------- */
.kontakt-uklad { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); margin-top: 54px; }
@media (max-width: 900px) { .kontakt-uklad { grid-template-columns: 1fr; } }
.kontakt-kafle { display: grid; gap: 16px; align-content: start; }
.kafel {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: var(--r-lg);
  padding: 26px 28px;
}
.kafel h3 { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-bright); font-weight: 500; margin-bottom: 14px; }
.kafel .z-ikona { display: flex; gap: 13px; align-items: flex-start; color: #FFF; font-size: 17px; text-decoration: none; }
.kafel .z-ikona .znak { flex: none; color: var(--accent-bright); margin-top: 3px; }
.kafel .uzupelnic { color: var(--muted-dark); font-size: 15px; margin: 0; }
.godziny { list-style: none; margin: 0; padding: 0; }
.godziny li { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; color: var(--muted-dark); font-size: 15.5px; }
.godziny li b { font-weight: 500; color: #FFF; }
.godziny .kropki { flex: 1; border-bottom: 1px dotted rgba(255, 255, 255, .25); transform: translateY(-4px); }
.godziny li span:last-child { color: #FFF; font-variant-numeric: tabular-nums; }
.kontakt-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.kontakt-cta .btn { flex: 1 1 auto; }
@media (max-width: 560px) { .kontakt-cta { flex-direction: column; } }
.mapa { border-radius: var(--r-xl); overflow: hidden; min-height: 430px; border: 1px solid rgba(255, 255, 255, .11); }
.mapa iframe { width: 100%; height: 100%; min-height: 430px; border: 0; display: block; filter: grayscale(.35) contrast(1.05); }

/* --- stopka ------------------------------------------------------ */
.stopka { background: var(--ink); color: var(--muted-dark); padding: 64px 0 40px; border-top: 1px solid var(--line-dark); }
.stopka__gora { display: grid; gap: 40px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 760px) { .stopka__gora { grid-template-columns: 1fr 1fr; } .stopka__gora > div { grid-column: 1 / -1; } }
.stopka .wordmark { margin-bottom: 18px; }
.stopka__nap { font-size: 15.5px; line-height: 1.75; }
.stopka__nap a { color: #FFF; text-decoration: none; }
.stopka__linki { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-family: var(--font-display); font-size: 15.5px; }
.stopka__linki a { text-decoration: none; }
.stopka__linki a:hover { color: var(--accent-bright); }
.stopka__dol {
  margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 13.5px;
}

/* --- reveal ------------------------------------------------------ */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv:nth-child(2) { transition-delay: .07s; }
.rv:nth-child(3) { transition-delay: .14s; }
.rv:nth-child(4) { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .hero__tlo { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* --- MVT: znak z logo w wordmarku, lead pod H1 -------------------- */
.wm-znak {
  height: .70em; width: auto; display: block;
  margin-right: .30em; flex: none;
}
.hero h1 { margin-bottom: 20px; }
.hero__lead {
  color: rgba(255, 255, 255, .88);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  max-width: 46ch;
  margin: 0 0 32px;
  text-shadow: 0 2px 18px rgba(15, 19, 22, .6);
}
@media (max-width: 900px) {
  .hero__lead { font-size: 16px; margin-bottom: 26px; }
}
@media (max-width: 640px) {
  /* telefon tnie kadr 16:9 do slupka, wiec przesuwamy go na kabine */
  .hero__tlo { background-position: 34% 46%; }
}


/* --- Masters of Moving: zloto niesie czarna typografie --------------
   Szablon zaklada bialy tekst na akcencie, a tu akcentem jest zloto
   z jego znaczka: biel dawalaby 1,5:1. Wszedzie, gdzie zloto jest
   wypelnieniem, tekst i ikony ida na czern (12,6:1). */
.pasek { color: var(--accent-ink); }
.pasek li::after { color: var(--accent-ink); opacity: .45; }
.szuflada-tel { color: var(--accent-ink); }
.szuflada-tel .znak { color: var(--accent-ink); }
.menu-toggle span { background: var(--accent-ink); }
.ikona-kolo:hover, .btn-tel:hover { color: var(--accent-ink); }
.ikona-kolo:hover .znak, .btn-tel:hover .znak { color: var(--accent-ink); }
.karuzela__btn:hover { color: var(--accent-ink); }
.btn--czerwony:hover { background: var(--accent-deep); color: var(--accent-ink); }

/* znak slowny: "Masters of" bialo, "Moving" zlotem */
.wm-akcent { color: var(--accent-bright); }

/* kafle uslug z ikona, wysrodkowane */
.siatka-uslugi-ikony {
  display: grid; gap: 20px; margin-top: 52px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.karta-ikona {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--r-md);
  padding: 28px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.karta-ikona .ikona {
  width: 42px; height: 42px; flex: none; margin: 0 auto;
  fill: none; stroke: var(--accent-bright); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.karta-ikona h3 {
  margin: 28px 0 0;
  font-family: var(--font-display); font-size: 19px; font-weight: 500; color: #FFF;
}
.karta-ikona p { margin: 10px 0 0; color: var(--muted-dark); font-size: 15.5px; line-height: 1.55; }
@media (max-width: 1000px) { .siatka-uslugi-ikony { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .siatka-uslugi-ikony { grid-template-columns: 1fr; }
  .karta-ikona { padding: 22px; }
  .karta-ikona h3 { margin-top: 20px; }
}
.opinie-przypis { color: var(--muted-dark); font-size: 14px; }

/* dwuwyrazowy znak slowny i kroki na jasnym tle */
.wordmark--dlugi { font-size: clamp(17px, 2.2vw, 26px); letter-spacing: -.01em; }
.wordmark--dlugi small { font-size: 9.5px; letter-spacing: .13em; }
@media (max-width: 900px) {
  .wordmark--dlugi { font-size: 15px; }
  .wordmark--dlugi small { font-size: 8px; letter-spacing: .08em; }
}
.kroki--jasne .krok { background: var(--surface); border-color: var(--line); }
.kroki--jasne .krok h3 { color: var(--text); }
.kroki--jasne .krok p { color: var(--muted); }

/* .wm-linia to inline-flex, wiec spacja miedzy "Masters of" a zlotym
   "Moving" znika jako odstep miedzy elementami flexa - oddajemy ja marginesem */
.wm-akcent { margin-left: .26em; }

/* ============================================================
   MVS Ubezpieczenia i Transport, Znin - warstwa marki
   Szablon przelozony z jasnego na ciemny, bo caly material klienta
   (logo, banery OC granicznego, rejestracji i rzeczoznawcy) jest
   czarno-zloty. Serif Cormorant idzie za krojem slowa TRANSPORT
   w logo, Cinzel za wersalikami z banerow, Barlow niesie tresc.
   ============================================================ */

body { font-family: var(--font-text); font-size: 17.5px; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.01em; }
.h2 { font-size: clamp(34px, 5.4vw, 60px); line-height: 1.02; }

/* naglowek: logo klienta zamiast znaku slownego */
.site-header { background: rgba(11, 11, 12, .9); backdrop-filter: blur(14px); }
.logo-mvs { height: 42px; width: auto; }
@media (max-width: 640px) { .logo-mvs { height: 34px; } }
.logo-podpis {
  display: block; font-family: "Cinzel", serif; font-size: 9.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent-bright);
  margin-top: 4px;
}
@media (max-width: 520px) { .logo-podpis { display: none; } }

/* nawigacja pozioma na szerokim ekranie */
.nav-poziomo { display: none; gap: 26px; align-items: center; }
.nav-poziomo a {
  font-family: "Cinzel", serif; font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(242, 239, 233, .82); text-decoration: none;
  transition: color .25s var(--ease);
}
.nav-poziomo a:hover, .nav-poziomo a[aria-current="page"] { color: var(--accent-bright); }
@media (min-width: 1040px) {
  .nav-poziomo { display: flex; }
  .menu-toggle { display: none; }
}

/* hero: dwa zdjecia, mniejsze na telefon */
.hero { min-height: 88vh; }
.hero__tlo { background-image: url("images/hero-ubezpieczenia-sm.jpg"); background-position: center 46%; }
@media (min-width: 900px) { .hero__tlo { background-image: url("images/hero-ubezpieczenia.jpg"); } }
.hero--transport .hero__tlo { background-image: url("images/hero-transport-sm.jpg"); }
@media (min-width: 900px) { .hero--transport .hero__tlo { background-image: url("images/hero-transport.jpg"); } }
.hero::before {
  background:
    linear-gradient(180deg, rgba(11, 11, 12, .82) 0%, rgba(11, 11, 12, .34) 30%, rgba(11, 11, 12, .88) 76%, rgba(11, 11, 12, .99) 100%),
    linear-gradient(96deg, rgba(11, 11, 12, .8) 0%, rgba(11, 11, 12, .1) 64%);
}
.hero h1 { font-size: clamp(42px, 7vw, 92px); max-width: 15ch; margin-bottom: 18px; }
.hero__nadtytul {
  font-family: "Cinzel", serif; font-size: 12px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--accent-bright); margin: 0 0 18px;
}
.hero__lead {
  color: rgba(242, 239, 233, .9); font-size: clamp(17px, 2vw, 20px);
  max-width: 54ch; margin: 0 0 32px;
}
.hero__ocena {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 30px;
  font-size: 15px; color: rgba(242, 239, 233, .82);
}
.hero__ocena .gwiazdki { font-size: 15px; }

/* pasek zlota pod hero */
.pasek { background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright) 45%, var(--accent-deep)); color: var(--accent-ink); }
.pasek ul { font-family: "Cinzel", serif; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.pasek li::after { background: rgba(11, 11, 12, .45); }

/* dwie galezie firmy: karty ubezpieczen i transportu */
.galezie { display: grid; gap: 22px; grid-template-columns: 1fr; margin-top: 54px; }
@media (min-width: 860px) { .galezie { grid-template-columns: 1fr 1fr; } }
.galaz {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: linear-gradient(160deg, rgba(224, 172, 74, .09), rgba(255, 255, 255, .02) 60%);
  padding: 34px 32px 32px;
}
.galaz__etykieta {
  font-family: "Cinzel", serif; font-size: 11.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--accent-bright); margin-bottom: 16px;
}
.galaz h3 { font-size: 30px; margin-bottom: 14px; }
.galaz p { color: var(--muted); font-size: 16.5px; }
.galaz ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.galaz li { display: flex; gap: 11px; align-items: flex-start; color: var(--text); font-size: 16px; }
.galaz li .znak { flex: none; color: var(--accent); margin-top: 4px; }
.galaz .btn { margin-top: auto; align-self: flex-start; }

/* uprawnienia i certyfikaty */
.papiery { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 44px; }
@media (min-width: 720px) { .papiery { grid-template-columns: repeat(3, 1fr); } }
.papier {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px 24px 26px; background: rgba(255, 255, 255, .03);
}
.papier .ikona { width: 30px; height: 30px; stroke: var(--accent-bright); fill: none; stroke-width: 1.5; margin-bottom: 14px; }
.papier h3 { font-size: 21px; margin-bottom: 8px; }
.papier p { color: var(--muted); font-size: 15.5px; margin: 0; }

/* ludzie */
.ludzie { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 40px; }
@media (min-width: 760px) { .ludzie { grid-template-columns: 1fr 1fr; } }
.czlowiek {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px 28px 30px; background: rgba(255, 255, 255, .03);
}
.czlowiek h3 { font-size: 25px; margin-bottom: 4px; }
.czlowiek .rola {
  font-family: "Cinzel", serif; font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent-bright); margin-bottom: 16px;
}
.czlowiek ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
.czlowiek li { color: var(--muted); font-size: 15.5px; display: flex; gap: 10px; }
.czlowiek li::before { content: "\00b7"; color: var(--accent); }
.czlowiek .tel { color: var(--accent-bright); text-decoration: none; font-size: 16.5px; }

/* galeria transportu */
.galeria { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); margin-top: 48px; }
@media (min-width: 900px) { .galeria { grid-template-columns: repeat(4, 1fr); } }
.galeria figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.galeria img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s var(--ease); }
.galeria figure:hover img { transform: scale(1.05); }

/* FAQ */
.faq { display: grid; gap: 12px; margin-top: 44px; max-width: 860px; margin-inline: auto; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .03); padding: 4px 24px;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 0;
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  display: flex; justify-content: space-between; gap: 18px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-bright); font-size: 26px; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { color: var(--muted); font-size: 16px; margin: 0 0 20px; }

/* karty uslug z ikona na ciemnym */
.karta-ikona { background: rgba(255, 255, 255, .035); border-color: var(--line); }
.karta-ikona .ikona { stroke: var(--accent-bright); }

/* kroki: ciemne takze w wersji "jasnej" */
.kroki--jasne .krok { background: rgba(255, 255, 255, .035); border-color: var(--line); }
.kroki--jasne .krok h3 { color: var(--text); }
.kroki--jasne .krok p { color: var(--muted); }

/* drobne */
.cytat { color: var(--text); }
.fakty span { color: var(--muted); }
.stopka { background: #08080A; }
.stopka__nap a { color: var(--accent-bright); }
.uzupelnic { color: var(--muted); }
.mapa iframe { filter: grayscale(.5) contrast(1.06) brightness(.92); }
.opinie-przypis { color: var(--muted); }
.btn { font-family: "Cinzel", serif; letter-spacing: .06em; font-size: 14.5px; }
.btn-tel { font-family: var(--font-text); }
.szuflada > a { font-family: var(--font-display); font-size: 27px; }
.szuflada { background: #0B0B0C; }
.section--jasny { background: var(--surface-2); }

/* --- runda 2: poprawki po pierwszym renderze ---------------------- */

/* zdjecie w sekcji "dlaczego" wypelnia kolumne, zamiast wisiec u gory */
.split { align-items: center; }
.split__foto { aspect-ratio: 5 / 4; }

/* welon na sekcji opinii byl za slaby - bialy jeep przebijal w polowie */
.opinie::before {
  background: linear-gradient(180deg, rgba(11, 11, 12, .95) 0%, rgba(11, 11, 12, .86) 42%, rgba(11, 11, 12, .97) 100%);
}

/* jasna mapa Google razila na czarnej stronie */
.mapa iframe { filter: invert(.9) hue-rotate(180deg) saturate(.5) contrast(.92) brightness(1.02); }

/* H1 podstrony transportu jest dlugi (fraza z silnika SEO), wiec mniejszy stopien */
.hero--transport h1 { font-size: clamp(33px, 4.4vw, 60px); max-width: 18ch; }

/* O nas: na telefonie akapit do lewej, wysrodkowany zostaje na desktopie */
@media (max-width: 720px) { .o-nas-lead { text-align: left !important; } }

/* --- runda 3: formularz wyceny, mapa pod godzinami, miejsca na portrety --- */

/* kontakt: lewa kolumna kafle + mapa, prawa kolumna formularz */
.kontakt-uklad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 980px) { .kontakt-uklad { grid-template-columns: 1fr; } }
.kontakt-kafle .mapa { min-height: 320px; margin-top: 2px; }
.kontakt-kafle .mapa iframe { min-height: 320px; }

/* formularz */
.formularz {
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: linear-gradient(160deg, rgba(224, 172, 74, .1), rgba(255, 255, 255, .025) 55%);
  padding: 32px 30px 30px;
}
.na-ciemnym .formularz { border-color: rgba(255, 255, 255, .14); }
.formularz h3 {
  font-size: 27px; margin-bottom: 8px;
}
.formularz__wstep { color: var(--muted); font-size: 15.5px; margin-bottom: 24px; }
.pole { display: grid; gap: 7px; margin-bottom: 16px; }
.pole--para { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-bottom: 0; }
@media (max-width: 520px) { .pole--para { grid-template-columns: 1fr; gap: 0; } }
.pole > label, .pole--para label {
  font-family: "Cinzel", serif; font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-bright);
}
.pole input, .pole select, .pole textarea {
  width: 100%; font-family: var(--font-text); font-size: 16px; color: var(--text);
  background: rgba(11, 11, 12, .55); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-sm); padding: 12px 14px; appearance: none;
}
.pole textarea { min-height: 104px; resize: vertical; }
.pole select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%23F0C863' stroke-width='2'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
.pole select option { background: #131316; color: #F2EFE9; }
.pole input:focus, .pole select:focus, .pole textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(224, 172, 74, .18);
}
.pole input::placeholder, .pole textarea::placeholder { color: rgba(173, 167, 156, .7); }
.zgoda { display: flex; gap: 11px; align-items: flex-start; margin: 4px 0 20px; }
.zgoda input { width: 18px; height: 18px; flex: none; margin-top: 3px; accent-color: var(--accent); }
.zgoda span { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.formularz .btn { width: 100%; justify-content: center; }
.formularz__stopka { color: var(--muted); font-size: 13px; margin: 16px 0 0; text-align: center; }
.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formularz__dziekujemy {
  display: none; text-align: center; padding: 26px 0 10px;
}
.formularz.wyslany .formularz__dziekujemy { display: block; }
.formularz.wyslany form { display: none; }
.formularz__dziekujemy .ptak { width: 46px; height: 46px; stroke: var(--accent-bright); fill: none; stroke-width: 1.6; margin: 0 auto 16px; }
.formularz__dziekujemy h4 { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin-bottom: 10px; }
.formularz__dziekujemy p { color: var(--muted); font-size: 15.5px; margin: 0; }

/* sekcja wyceny na stronie glownej: tekst z lewej, formularz z prawej */
.wycena-uklad { display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; margin-top: 46px; }
@media (max-width: 980px) { .wycena-uklad { grid-template-columns: 1fr; } }
.wycena-tekst p { color: var(--muted); font-size: 16.5px; }
.wycena-tekst ul { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 13px; }
.wycena-tekst li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.wycena-tekst li .znak { flex: none; color: var(--accent); margin-top: 4px; }

/* miejsce na zdjecia wlascicieli */
.czlowiek { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 560px) { .czlowiek { grid-template-columns: 1fr; gap: 16px; } }
.czlowiek__tresc { min-width: 0; }
.portret {
  aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden;
  border: 1px dashed rgba(224, 172, 74, .5); background: rgba(224, 172, 74, .06);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; padding: 12px; text-align: center;
}
@media (max-width: 560px) { .portret { aspect-ratio: 4 / 3; max-width: 200px; } }
.portret svg { width: 30px; height: 30px; stroke: var(--accent-bright); fill: none; stroke-width: 1.5; }
.portret span { font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.portret img { width: 100%; height: 100%; object-fit: cover; }

/* --- runda 4: inny krój nagłówków, logo w preloaderze, zdjęcia w usługach --- */

/* Cormorant ustąpił Bodoni Moda - wyższy kontrast kresek, bliżej wersalikom
   z banerów klienta i do złota na czerni. Wagi 600/700, bo 400 znika na ciemnym. */
:root { --font-display: "Bodoni Moda", "Didot", "Times New Roman", serif; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.005em; }
.h2 { font-size: clamp(32px, 5vw, 56px); line-height: 1.06; }
.hero h1 { font-size: clamp(40px, 6.4vw, 84px); line-height: 1.04; }
.hero--transport h1 { font-size: clamp(31px, 4.1vw, 56px); }
.faq summary { font-size: 21px; font-weight: 700; }
.galaz h3, .czlowiek h3 { font-weight: 700; }

/* preloader: prawdziwe logo klienta zamiast napisu */
#preloader { gap: 26px; }
.loader-znak {
  width: min(340px, 62vw); height: auto; display: block;
  opacity: 0; transform: scale(.94);
  animation: znak-wchodzi .9s var(--ease) forwards;
}
@keyframes znak-wchodzi { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .loader-znak { animation: none; opacity: 1; transform: none; }
}

/* numery Pauliny i Bartosza: wyśrodkowane, w zaokrąglonej ramce */
.czlowiek .tel {
  display: block; margin-top: 4px; text-align: center;
  border: 1px solid rgba(224, 172, 74, .55); border-radius: var(--r-pill);
  padding: 11px 18px; font-size: 18px; letter-spacing: .04em;
  background: rgba(224, 172, 74, .08);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.czlowiek .tel:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* większe miejsce na zdjęcia właścicieli */
.czlowiek { grid-template-columns: 210px minmax(0, 1fr); gap: 26px; }
@media (max-width: 900px) { .czlowiek { grid-template-columns: 170px minmax(0, 1fr); gap: 20px; } }
@media (max-width: 620px) { .czlowiek { grid-template-columns: 1fr; gap: 18px; } }
.portret { border-radius: var(--r-lg); }
@media (max-width: 620px) { .portret { aspect-ratio: 4 / 3; max-width: none; } }
.portret svg { width: 36px; height: 36px; }
.portret span { font-size: 12.5px; }

/* karty usług ze zdjęciem zamiast ikony */
.karta-ikona.z-fotem { padding: 0; overflow: hidden; text-align: left; }
.karta-ikona.z-fotem > img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  transition: transform .8s var(--ease);
}
.karta-ikona.z-fotem:hover > img { transform: scale(1.04); }
.karta-ikona__tresc { padding: 24px 26px 28px; }
.karta-ikona.z-fotem h3 { margin: 0 0 10px; font-size: 22px; }
.karta-ikona.z-fotem p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
/* karta jako grid, nie flex: w kolumnie flexowej wysokosc obrazka liczy sie
   z jego wymiaru wlasnego ZANIM szerokosc dojedzie do 100%, wiec aspect-ratio
   jest ignorowane i zdjecie wychodzi 600 px wysokie. Grid liczy najpierw
   kolumny, potem wiersze, wiec proporcja 3:2 trzyma. */
.siatka-uslugi-ikony { align-items: stretch; }
.karta-ikona.z-fotem { display: grid; grid-template-rows: auto 1fr; }
.karta-ikona.z-fotem > img { height: auto; }

/* --- runda 5: Marcellus, menu jak w Shivie, talia opinii, zdjecia w kaflach --- */

/* Bodoni ustąpił Marcellusowi: rzymska antykwa o grubszych kreskach, bliżej
   inskrypcji z logo, i czyta się na czerni lepiej niż cienkie szeryfy Didone. */
:root { --font-display: "Marcellus", "Trajan Pro", "Times New Roman", serif; }
h1, h2, h3, h4 { font-weight: 400; letter-spacing: .005em; }
.h2 { font-size: clamp(34px, 5.2vw, 58px); line-height: 1.08; }
.hero h1 { font-size: clamp(42px, 6.6vw, 86px); line-height: 1.06; font-weight: 400; }
.hero--transport h1 { font-size: clamp(32px, 4.3vw, 58px); }
.faq summary { font-size: 22px; font-weight: 400; }
.galaz h3, .czlowiek h3, .karta-ikona h3, .papier h3, .krok h3 { font-weight: 400; }

/* --- nagłówek: większe logo, bez podpisu, numer w złotej ramce ------------- */
.logo-mvs { height: 60px; }
@media (max-width: 640px) { .logo-mvs { height: 46px; } }
.logo-podpis { display: none; }
.nav-poziomo { display: none !important; }
.btn-tel {
  border: 1.5px solid var(--accent); color: var(--accent-bright);
  background: rgba(224, 172, 74, .1); border-radius: var(--r-pill);
  padding: 11px 20px; font-weight: 500; letter-spacing: .02em;
}
.btn-tel .znak { color: var(--accent-bright); }
.btn-tel:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-tel:hover .znak { color: var(--accent-ink); }

/* hamburger zawsze widoczny, zmienia się w krzyżyk (wzorzec Shiva Dance) */
.menu-toggle { display: inline-block !important; border: 0; background: none; padding: 10px 4px; cursor: pointer; line-height: 0; }
.menu-toggle span {
  display: block; width: 26px; height: 2px; margin: 6px 0; border-radius: 2px;
  background: var(--accent-bright);
  transition: transform .3s var(--ease), opacity .2s, width .3s var(--ease);
}
.menu-toggle span:nth-child(2) { width: 26px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* panel wysuwany z prawej: pozycje wjeżdżają z prawej, kolejno */
.szuflada {
  width: min(400px, 88vw); padding: 92px 38px 38px;
  background: linear-gradient(180deg, #17171B 0%, #0B0B0C 100%);
  box-shadow: -24px 0 60px rgba(0, 0, 0, .5);
  transform: translateX(104%);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.szuflada.open { transform: none; }
.szuflada-zamknij {
  top: 24px; right: 26px; width: 46px; height: 46px; border-radius: var(--r-pill);
  border: 1px solid rgba(224, 172, 74, .45); background: rgba(224, 172, 74, .08);
  color: var(--accent-bright);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.szuflada-zamknij:hover { background: var(--accent); color: var(--accent-ink); transform: rotate(90deg); }
.szuflada > a {
  display: block; padding: 15px 0; font-size: clamp(23px, 3vw, 29px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  opacity: 0; transform: translateX(40px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), color .18s, padding-left .18s;
}
.szuflada > a:hover { color: var(--accent-bright); padding-left: 10px; }
.szuflada.open > a { opacity: 1; transform: none; }
.szuflada.open > a:nth-of-type(1) { transition-delay: .07s; }
.szuflada.open > a:nth-of-type(2) { transition-delay: .12s; }
.szuflada.open > a:nth-of-type(3) { transition-delay: .17s; }
.szuflada.open > a:nth-of-type(4) { transition-delay: .22s; }
.szuflada.open > a:nth-of-type(5) { transition-delay: .27s; }
.szuflada.open > a:nth-of-type(6) { transition-delay: .32s; }
.szuflada.open > a:nth-of-type(7) { transition-delay: .37s; }
.szuflada-stopka { padding-top: 30px; }
.szuflada-tel {
  border: 1.5px solid var(--accent); border-radius: var(--r-pill);
  background: rgba(224, 172, 74, .1); color: var(--accent-bright); padding: 13px 24px;
}
.szuflada-tel .znak { color: var(--accent-bright); }
.szuflada-tel:hover { background: var(--accent); color: var(--accent-ink); }
.szuflada-tel:hover .znak { color: var(--accent-ink); }

/* --- plansza startowa: logo wjeżdża i przechodzi po nim złoty blask ------- */
.loader-znak-box { position: relative; display: block; overflow: hidden; width: min(340px, 64vw); }
.loader-znak { width: 100%; height: auto; display: block; opacity: 0; transform: scale(.93) translateY(8px); animation: znak-wchodzi .85s var(--ease) forwards; }
.loader-blysk {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(104deg, transparent 38%, rgba(255, 238, 190, .75) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: blysk 1.5s var(--ease) .45s 2;
}
@keyframes znak-wchodzi { to { opacity: 1; transform: none; } }
@keyframes blysk { to { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) {
  .loader-znak { animation: none; opacity: 1; transform: none; }
  .loader-blysk { animation: none; opacity: 0; }
}

/* --- karty osób: numer równo u dołu, na całej szerokości karty ------------ */
.ludzie { align-items: stretch; }
.czlowiek__tresc { display: flex; flex-direction: column; height: 100%; }
.czlowiek ul { margin-bottom: 22px; }
.czlowiek .tel { margin-top: auto; width: 100%; }

/* --- dwie gałęzie ze zdjęciem, przyciski identyczne ----------------------- */
.galaz { padding: 0; overflow: hidden; }
.galaz > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; height: auto; }
.galaz__tresc { padding: 30px 32px 32px; display: flex; flex-direction: column; flex: 1; }
.galaz { display: grid; grid-template-rows: auto 1fr; }

/* --- kafle uprawnień ze zdjęciem, treść i ikona wyśrodkowane -------------- */
.papier.z-fotem { padding: 0; overflow: hidden; display: grid; grid-template-rows: auto 1fr; text-align: center; }
.papier.z-fotem > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; height: auto; }
.papier__tresc { padding: 26px 26px 30px; }
.papier.z-fotem .ikona { margin: 0 auto 14px; display: block; }

/* --- kontakt: kafle rozciągnięte do wysokości formularza, mapa pod spodem - */
.kontakt-kafle { align-content: space-between; height: 100%; }
.mapa--szeroka { margin-top: 22px; min-height: 380px; }
.mapa--szeroka iframe { min-height: 380px; }

/* --- talia opinii (biblioteka: „Opinie w talii kartek") -------------------
   Wzorzec ze zbioru komponentów, przełożony na czerń i złoto MVS: kartka
   365 px, sąsiedzi obróceni o ±2,5° i opuszczeni o 80/50 px, środkowa prosto
   i na wierzchu. Znak obrotu idzie parzystością odległości od środka. */
.talia {
  --op-kartka: 360px; --op-odstep: 240px; --op-obrot: 2.5deg;
  --op-pad: 30px; --op-rog: 44px; --op-scena: 560px;
  position: relative; height: var(--op-scena); overflow: hidden; margin-top: 34px;
}
.op-kartka {
  position: absolute; top: 50%; left: 50%;
  width: var(--op-kartka); height: var(--op-kartka); padding: var(--op-pad);
  background: #17171B; color: var(--text); border: 1px solid rgba(224, 172, 74, .28);
  transform: translate(-50%, -50%) translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg));
  transition: transform .5s cubic-bezier(.4, 0, .2, 1), background-color .5s var(--ease), color .5s var(--ease);
  clip-path: polygon(0 0, calc(100% - var(--op-rog)) 0, 100% var(--op-rog), 100% 100%, 0 100%);
  will-change: transform;
}
.op-kartka::after {
  content: ""; position: absolute; right: 0; top: 0;
  width: var(--op-rog); height: var(--op-rog);
  background: rgba(224, 172, 74, .3); clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.op-kartka[data-srodek] { background: var(--accent); color: var(--accent-ink); z-index: 5; border-color: var(--accent); }
.op-kartka[data-srodek]::after { background: var(--accent-deep); }
.op-osoba { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.op-inicjaly {
  flex: none; width: 48px; height: 56px; display: grid; place-items: center;
  background: rgba(224, 172, 74, .22); color: var(--accent-bright);
  font-family: "Cinzel", serif; font-size: 19px; letter-spacing: .04em;
}
.op-kartka[data-srodek] .op-inicjaly { background: rgba(11, 11, 12, .18); color: var(--accent-ink); }
.op-kto { display: block; font-family: var(--font-display); font-size: 18px; line-height: 1.2; }
.op-meta { display: block; font-size: 12.5px; opacity: .72; margin-top: 3px; }
.op-kartka blockquote { margin: 0; font-size: 17px; line-height: 1.5; }
.op-podpis {
  position: absolute; left: var(--op-pad); right: var(--op-pad); bottom: var(--op-pad);
  font-size: 13.5px; font-style: italic; opacity: .72; margin: 0;
}
.talia-sterowanie { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.talia-sterowanie button {
  width: 54px; height: 54px; display: grid; place-items: center; background: none;
  border: 1.5px solid rgba(224, 172, 74, .5); border-radius: var(--r-pill);
  color: var(--accent-bright); cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.talia-sterowanie button:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
@media (max-width: 900px) {
  .talia { --op-kartka: 278px; --op-odstep: 184px; --op-scena: 452px; --op-pad: 22px; --op-rog: 34px; }
  .op-kartka blockquote { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) { .op-kartka { transition-duration: .01ms; } }

/* po usunieciu cytatu i trzeciego faktu kolumna ma tylko naglowek i dwa punkty,
   wiec odstep pod H2 trzeba dolozyc recznie (wczesniej robil go cytat) */
.split .fakty { margin-top: 30px; }

/* --- runda 6: krój nagłówków jak w materiałach dla Klaudii Pach ------------
   Instrument Serif: display z wysokim kontrastem kresek, jedna waga 400.
   Przy jednej wadze stopnie muszą być odważniejsze, a odstępy ciaśniejsze,
   inaczej nagłówek gubi się na czerni. */
:root { --font-display: "Instrument Serif", "Times New Roman", serif; }
h1, h2, h3, h4 { font-weight: 400; letter-spacing: -.01em; }
.h2 { font-size: clamp(40px, 6vw, 68px); line-height: 1.02; }
.hero h1 { font-size: clamp(48px, 7.4vw, 98px); line-height: 1; letter-spacing: -.015em; }
.hero--transport h1 { font-size: clamp(36px, 4.9vw, 66px); }
.faq summary { font-size: 25px; }
.galaz h3 { font-size: 33px; }
.czlowiek h3 { font-size: 28px; }
.karta-ikona.z-fotem h3 { font-size: 25px; }
.papier h3 { font-size: 24px; }
.krok h3 { font-size: 25px; }
.formularz h3 { font-size: 31px; }
.op-kto { font-size: 19px; }
.fakty b { font-size: 19px; }
.szuflada > a { font-size: clamp(26px, 3.2vw, 33px); }
.formularz__dziekujemy h4 { font-size: 30px; }

/* ============================================================
   RUNDA 7: typografia z landingu Klaudii Pach (Outfit + Open Sans)
   Grotesk zamiast szeryfów, więc stopnie w dół i wagi w górę.
   Cinzel wypada z zestawu - etykiety idą Outfitem 700 z rozstrzeleniem,
   dokładnie jak klasa .lab na tamtym landingu.
   ============================================================ */
:root {
  --font-display: "Outfit", "Open Sans", system-ui, sans-serif;
  --font-text: "Open Sans", system-ui, -apple-system, sans-serif;
}
body { font-size: 16.5px; line-height: 1.65; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.01em; }
.h2 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.1; }
.hero h1 { font-size: clamp(40px, 6vw, 78px); line-height: 1.04; letter-spacing: -.025em; font-weight: 800; }
.hero--transport h1 { font-size: clamp(31px, 4vw, 54px); }
.hero__lead { font-size: clamp(16.5px, 1.8vw, 19px); }
.faq summary { font-size: 20px; font-weight: 700; }
.galaz h3 { font-size: 27px; }
.czlowiek h3 { font-size: 23px; }
.karta-ikona.z-fotem h3 { font-size: 21px; }
.papier h3 { font-size: 20px; }
.krok h3 { font-size: 21px; }
.formularz h3 { font-size: 25px; }
.formularz__dziekujemy h4 { font-size: 24px; }
.op-kto { font-size: 17px; font-weight: 700; }
.fakty b { font-size: 17.5px; }
.szuflada > a { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; }

/* etykiety: dawny Cinzel -> Outfit 700 z rozstrzeleniem */
.btn, .pasek ul, .hero__nadtytul, .logo-podpis, .galaz__etykieta,
.czlowiek .rola, .kafel h3, .szuflada-tytul, .pole > label, .pole--para label,
.op-inicjaly, .nav-poziomo a {
  font-family: var(--font-display);
  font-weight: 700;
}
.btn { font-size: 14.5px; letter-spacing: .02em; text-transform: none; }
.pasek ul { font-size: 12.5px; letter-spacing: .14em; }
.galaz__etykieta, .czlowiek .rola, .kafel h3, .szuflada-tytul { letter-spacing: .16em; }
.pole > label, .pole--para label { letter-spacing: .14em; font-size: 11px; }
.krok__nr { font-family: var(--font-display); font-weight: 700; }

/* --- talia opinii: koniec z twardym ucięciem sąsiadów ---------------------
   Scena ma overflow:hidden, więc boczne kartki kończyły się prostą krawędzią
   w połowie zdania. Maska wygasza je do tła sekcji, a kartka rośnie z treści,
   żeby dłuższe opinie nie były przycinane od dołu. */
.talia {
  --op-kartka: 340px; --op-odstep: 368px; --op-scena: 600px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.op-kartka {
  height: auto; min-height: var(--op-kartka);
  display: flex; flex-direction: column;
}
.op-kartka blockquote { font-size: 16px; line-height: 1.55; }
.op-podpis { position: static; margin-top: auto; padding-top: 20px; }
@media (max-width: 900px) {
  .talia {
    --op-kartka: 272px; --op-odstep: 296px; --op-scena: 520px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  }
  .op-kartka blockquote { font-size: 15px; }
}

/* --- runda 8: plansza startowa na rozbitym logo ---------------------------
   Sygnet i część słowna to teraz dwa pliki (cięcie na x=358 w logo-mvs.png),
   więc każdy może wejść inaczej: tarcza przyjeżdża z obrotem, napis odsłania
   się spod niej od lewej, na koniec po całości przelatuje złoty blask. */
.loader-znak-box {
  display: flex; align-items: center; justify-content: center;
  width: min(380px, 70vw); padding: 14px 0;
  /* blask ma przelecieć PO logo, a nie świecić prostokątem obok niego */
  overflow: hidden;
}
.loader-sygnet, .loader-napis { display: block; height: auto; }
.loader-sygnet {
  width: 40.7%;
  opacity: 0; transform: scale(.7) rotate(-14deg);
  animation: sygnet-wjazd .75s cubic-bezier(.2, .9, .25, 1.15) forwards;
}
.loader-napis {
  width: 59.3%;
  opacity: 0; transform: translateX(-26px);
  clip-path: inset(0 100% 0 0);
  animation: napis-odslona .8s cubic-bezier(.22, .72, .2, 1) .32s forwards;
}
@keyframes sygnet-wjazd { to { opacity: 1; transform: none; } }
@keyframes napis-odslona { to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
.loader-blysk { animation-delay: 1.05s; animation-iteration-count: 1; }
@media (prefers-reduced-motion: reduce) {
  .loader-sygnet, .loader-napis { animation: none; opacity: 1; transform: none; clip-path: none; }
}

/* ============================================================
   RUNDA 9: Lato w wersji pogrubionej
   Jedna rodzina na całość: nagłówki 900, etykiety i wyróżnienia 700,
   tekst 400. Lato jest węższe i niższe w oczku niż Outfit, więc stopnie
   nagłówków idą w górę, a rozstrzelenie wersalików trochę w dół.
   ============================================================ */
:root {
  --font-display: "Lato", "Segoe UI", system-ui, sans-serif;
  --font-text: "Lato", "Segoe UI", system-ui, sans-serif;
}
body { font-size: 17px; line-height: 1.66; }
h1, h2, h3, h4 { font-weight: 900; letter-spacing: -.015em; }
.h2 { font-size: clamp(34px, 4.9vw, 56px); line-height: 1.08; }
.hero h1 { font-size: clamp(42px, 6.3vw, 82px); line-height: 1.06; letter-spacing: -.03em; font-weight: 900; }
.hero--transport h1 { font-size: clamp(38px, 5vw, 68px); line-height: 1.04; }
.faq summary { font-size: 21px; font-weight: 900; }
.galaz h3 { font-size: 28px; }
.czlowiek h3 { font-size: 24px; }
.karta-ikona.z-fotem h3 { font-size: 22px; }
.papier h3 { font-size: 21px; }
.krok h3 { font-size: 22px; }
.formularz h3 { font-size: 26px; }
.formularz__dziekujemy h4 { font-size: 25px; }
.op-kto { font-size: 17px; font-weight: 900; }
.fakty b { font-size: 18px; font-weight: 900; }
.szuflada > a { font-size: clamp(23px, 2.7vw, 29px); font-weight: 900; }
.pasek ul { font-size: 12.5px; letter-spacing: .12em; font-weight: 900; }
.galaz__etykieta, .czlowiek .rola, .kafel h3, .szuflada-tytul { letter-spacing: .14em; font-weight: 900; }
.pole > label, .pole--para label { letter-spacing: .12em; font-weight: 900; }
.btn { font-weight: 900; letter-spacing: .01em; font-size: 15px; }
.krok__nr { font-weight: 900; }
.op-inicjaly { font-weight: 900; }

/* --- runda 10: lżejsze przyciemnienie hero -------------------------------
   Welon zjadał zdjęcie: auto i bus ginęły pod czernią. Krycie w dół, ale
   pas pod samym tekstem zostaje na tyle gęsty, żeby biała typografia
   trzymała kontrast na jasnych fragmentach kadru. */
.hero::before {
  background:
    radial-gradient(96% 78% at 12% 74%, rgba(11, 11, 12, .82) 0%, rgba(11, 11, 12, .46) 38%, rgba(11, 11, 12, 0) 74%),
    linear-gradient(180deg, rgba(11, 11, 12, .44) 0%, rgba(11, 11, 12, .06) 26%, rgba(11, 11, 12, .48) 72%, rgba(11, 11, 12, .95) 100%);
}
/* H1 transportu ma trzy linie, więc plama cienia siedzi wyżej */
.hero--transport::before {
  background:
    radial-gradient(92% 82% at 11% 60%, rgba(11, 11, 12, .84) 0%, rgba(11, 11, 12, .5) 40%, rgba(11, 11, 12, 0) 76%),
    linear-gradient(180deg, rgba(11, 11, 12, .44) 0%, rgba(11, 11, 12, .06) 24%, rgba(11, 11, 12, .48) 72%, rgba(11, 11, 12, .95) 100%);
}
@media (max-width: 900px) {
  /* na słupku tekst leży na środku kadru, więc pas pod nim musi być gęstszy */
  .hero::before {
    background:
      linear-gradient(180deg, rgba(11, 11, 12, .5) 0%, rgba(11, 11, 12, .1) 24%, rgba(11, 11, 12, .72) 66%, rgba(11, 11, 12, .96) 100%);
  }
}

/* --- runda 11: dwa skróty na pasku obok wysuwanego menu -------------------
   Reszta pozycji zostaje w szufladzie; na pasku siedzą tylko dwie gałęzie
   firmy, bo to jedyny wybór, który odwiedzający musi zrobić od razu.
   Poniżej 760 px pasek ma już logo, telefon i hamburger, więc skróty znikają. */
.nav-poziomo { display: none !important; }
@media (min-width: 760px) {
  .nav-poziomo { display: flex !important; gap: 30px; align-items: center; }
}
.nav-poziomo a {
  position: relative; font-family: var(--font-display); font-weight: 900;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(242, 239, 233, .82); text-decoration: none; padding: 6px 0;
  transition: color .25s var(--ease);
}
.nav-poziomo a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav-poziomo a:hover { color: var(--accent-bright); }
.nav-poziomo a:hover::after { transform: scaleX(1); }
.nav-poziomo a[aria-current="page"] { color: var(--accent-bright); }
.nav-poziomo a[aria-current="page"]::after { transform: scaleX(1); }

/* --- runda 12: kroki bez numerków, z wyśrodkowaną ikoną ------------------- */
.krok { text-align: center; }
.krok__nr { display: none; }
.krok .ikona {
  width: 36px; height: 36px; display: block; margin: 0 auto 16px;
  color: var(--accent-bright);
}
.kroki--jasne .krok .ikona { color: var(--accent); }
.krok h3 { margin-bottom: 10px; }