/* =========================================================
   Dom Finansowy — Marcin Sobolewski
   Prototyp demonstracyjny. Bez CMS, bez backendu, bez cookies.
   ========================================================= */

/* ---------------------------------------------------------
   Kroje pisma — hostowane lokalnie, bez odpytywania Google.
   Zdalny font przekazuje adres IP użytkownika serwerowi Google,
   a to zobowiązanie w polityce prywatności strony, która poza
   tym nie ma żadnych trackerów. Przy okazji znika jedno
   połączenie blokujące pierwsze renderowanie.

   Oba pliki to fonty zmienne, dlatego jeden plik obsługuje cały
   zakres grubości i nie ma sensu pobierać osobnych wag.
   Podział na latin i latin-ext zostaje: przeglądarka pobiera
   latin-ext dopiero, gdy na stronie pojawią się polskie znaki.
   --------------------------------------------------------- */

@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('../fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('../fonts/newsreader-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:100 700;
  font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:100 700;
  font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------------------------------------------------------
   Paleta wprost z księgi znaku: bordo #2B1518, srebro #84858B,
   biel. Pozostałe wartości to wyłącznie rozjaśnienia bordo
   (tekst pomocniczy) i srebra (akcenty), dobrane pod kontrast
   WCAG AA — księga podaje trzy kolory bazowe, a strona
   potrzebuje pełnej skali czytelności.
   --------------------------------------------------------- */
:root{
  --paper:#FAF8F7;
  --sand:#EEEAEA;
  --ink:#2B1518;            /* bordo z księgi znaku */
  --ink-hover:#431F24;
  --deep:#3F2126;
  --body:#4E3035;
  --slate:#635056;
  --muted:#6B585D;
  --muted-decor:#84858B;
  /* srebro z księgi ma 3,5:1 na papierze — jako tekst tylko --silver-dark */
  --silver:#84858B;
  --silver-dark:#5E5F66;
  --silver-pale:#C7C8CC;    /* akcenty na bordo i duże cyfry dekoracyjne */
  --line:rgba(43,21,24,.14);
  --line-strong:rgba(43,21,24,.28);
  --line-onink:rgba(250,248,247,.18);
  --paper-onink:rgba(250,248,247,.72);

  --serif:Newsreader,Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif;

  --wrap:1440px;
  --pad:48px;
}

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

/* atrybut hidden musi wygrywać z autorskimi display:grid/flex */
[hidden]{display:none!important}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

html{scroll-behavior:smooth;scroll-padding-top:24px}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto}

a{color:var(--silver-dark);text-decoration:none}
a:hover{color:var(--ink)}

button{font-family:inherit;color:inherit}

/* wskaźnik focusu: bordo na jasnych tłach (kontrast >3:1), jasne srebro na bordo */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.section--ink :focus-visible,
.callbar :focus-visible,
.panel :focus-visible,
.map__card :focus-visible{outline-color:var(--silver-pale)}
main:focus{outline:none}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--paper);padding:12px 18px;
  font:600 14px/1 var(--sans);
}
.skip-link:focus{left:12px;top:12px;color:var(--paper)}

.wrap{max-width:var(--wrap);margin:0 auto}

/* ---------- typografia wspólna ---------- */

.eyebrow{
  font:500 11px/1.6 var(--sans);
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  margin:0;
}
.eyebrow--silver{color:var(--silver-dark)}
.eyebrow--onink{color:rgba(250,248,247,.6)}

.h2{
  margin:18px 0 0;
  font:400 clamp(32px,3.4vw,50px)/1.06 var(--serif);
  letter-spacing:-.026em;
  text-wrap:balance;
}
.h2--gap{margin-bottom:56px}
.h2--narrow{max-width:18ch}
.h2--tight{margin:18px 0 6px;font-size:clamp(34px,3.6vw,54px);line-height:1.02;letter-spacing:-.028em}

.lead{
  margin:0 0 28px;max-width:44ch;
  font:400 19px/1.6 var(--sans);color:var(--deep);
  text-wrap:pretty;
}


/* ---------- sekcje ---------- */

.section{padding:0 var(--pad)}
.section__inner{padding:70px 0 78px}
.section__head{padding:70px 0 0}
.section--sand{background:var(--sand);border-top:1px solid var(--line)}
.section--ink{background:var(--ink);color:var(--paper)}
.section--ink .h2{color:var(--paper)}
.section--flush .section__head{padding-bottom:0}
.section:not(.section--sand):not(.section--ink){border-top:1px solid var(--line)}

.section__kicker{display:flex;align-items:baseline;gap:16px;margin:0}
.section__num{
  font:400 15px/1 var(--serif);color:var(--silver-dark);
  font-variant-numeric:tabular-nums;
}

/* ---------- topbar ---------- */

/* Pasek jest bordowy, bo sygnet ma srebrny gradient — na papierze
   zniknąłby, a księga znaku dopuszcza go tylko na bordo albo w wersji
   jednobarwnej. Nazwa firmy obok sygnetu to zwykły tekst strony,
   nie przerysowany logotyp. */
.topbar{padding:0 var(--pad);background:var(--ink);color:var(--paper)}
.topbar__inner{
  display:grid;grid-template-columns:1fr auto;gap:0 40px;
  padding:16px 0;align-items:center;
}
.brand{display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:inherit}
.brand:hover .brand__name{color:var(--silver-pale)}
.brand__mark{display:block;width:auto;height:42px}
.brand__text{display:flex;flex-direction:column;gap:5px}
.brand__name{font:500 19px/1 var(--serif);letter-spacing:-.01em;color:var(--paper)}
.brand__person{
  font:500 10px/1 var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--paper-onink);
}
.topbar__tel{
  font:500 20px/1.1 var(--serif);color:var(--paper);
  font-variant-numeric:tabular-nums;
}
.topbar__tel:hover{color:var(--silver-pale)}
.topbar :focus-visible{outline-color:var(--silver-pale)}

/* ---------- hero ---------- */

/* Hero niesie teraz cały kreator, więc tytuł jest o klasę mniejszy niż
   w prototypie, a odstępy krótsze — inaczej pierwsze pytanie schodzi
   pod linię zgięcia i cała zmiana traci sens. Tło piaskowe wiąże hero
   z kreatorem, który wcześniej stał w osobnej sekcji tego koloru. */
.hero{padding:0 var(--pad);background:var(--sand)}
.hero__inner{padding:64px 0 68px}
.hero__title{
  margin:20px 0 0;max-width:16ch;
  font:400 clamp(44px,6.4vw,92px)/.98 var(--serif);
  letter-spacing:-.032em;text-wrap:balance;
}
.hero__title .word{display:inline-block;opacity:0;animation:writeon .62s cubic-bezier(.22,.8,.28,1) forwards}
@keyframes writeon{from{opacity:0;transform:translateY(.32em)}to{opacity:1;transform:translateY(0)}}

.hero__lead{
  margin:26px 0 0;max-width:38ch;
  font:400 clamp(18px,1.4vw,21px)/1.5 var(--sans);color:var(--deep);
  text-wrap:pretty;
}
.hero__alt{
  margin:20px 0 0;
  font:400 15px/1.6 var(--sans);color:var(--slate);
}
/* link wpleciony w zdanie, nie samodzielne CTA — bez min-height i własnego stopnia pisma */
.hero__alt a{
  color:var(--ink);font-weight:500;
  border-bottom:1px solid var(--line-strong);padding-bottom:1px;
}
.hero__alt a:hover{border-bottom-color:var(--ink)}
/* Nad kartą kreatora, nie pod nią: pod kartą schodził poniżej linii zgięcia
   na każdym typowym ekranie, a to on ma uwiarygodnić pierwsze kliknięcie. */
.hero__proof{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;
  margin:28px 0 0;padding:18px 0 0;max-width:900px;
  list-style:none;border-top:1px solid var(--line);
  font:400 15px/1.45 var(--sans);color:var(--body);
}
.star{color:var(--silver-dark)}

/* ---------- przyciski i linki ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font:600 15px/1 var(--sans);cursor:pointer;border:0;
  transition:background .16s ease,color .16s ease;
}
.btn--ghost{
  height:50px;padding:0 24px;background:transparent;
  border:1px solid var(--ink);color:var(--ink);font-size:14px;
}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--send{
  height:54px;padding:0 30px;background:var(--ink);color:var(--paper);font-size:16px;
}
.btn--send:hover{background:var(--ink-hover)}
/* przycisk zostaje aktywny (fokusowalny), stan „niegotowy” niesie aria-disabled */
.btn--send[aria-disabled="true"]{background:var(--slate);cursor:not-allowed}
.btn--send[aria-disabled="true"]:hover{background:var(--slate)}

.form-error{
  margin:0 0 16px;max-width:60ch;
  font:500 14px/1.5 var(--sans);color:#B4261C;
}
.form-error:empty{display:none}

.link-underline{
  display:inline-flex;align-items:center;min-height:44px;
  font:500 14px/1 var(--sans);color:var(--body);
  border-bottom:1px solid rgba(43,21,24,.3);padding-bottom:6px;
}
.link-underline:hover{color:var(--ink);border-color:var(--ink)}

.link-plain{
  margin-top:16px;background:none;border:0;padding:12px 0;
  min-height:44px;
  font:500 13.5px/1 var(--sans);color:var(--muted);
  cursor:pointer;text-decoration:underline;
}
.link-plain:hover{color:var(--ink)}

.link-silver{
  display:inline-block;font:500 13.5px/1.4 var(--sans);
  border-bottom:1px solid var(--silver);padding-bottom:2px;
}
.link-silver--lg{font:400 20px/1.4 var(--serif)}

/* ---------- rail ---------- */

.rail{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:40}
.rail__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.rail__item{
  position:relative;display:block;height:24px;width:44px;
  color:var(--slate);transition:color .2s ease;
}
.rail__item:hover{color:var(--ink)}
.rail__item[aria-current="true"]{color:var(--ink)}
.rail__num{
  position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font:500 10.5px/14px var(--sans);letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}
.rail__tick{
  position:absolute;right:0;top:50%;height:1px;width:8px;
  background:currentColor;transition:width .2s ease;
}
.rail__item[aria-current="true"] .rail__tick{width:16px}
.rail__label{
  position:absolute;right:44px;top:50%;transform:translateY(-50%);white-space:nowrap;
  font:500 10px/14px var(--sans);letter-spacing:.09em;text-transform:uppercase;
  opacity:0;transition:opacity .2s ease;
}
.rail__item[aria-current="true"] .rail__label,
.rail__item:hover .rail__label{opacity:1}

.rail.is-ondark .rail__item{color:rgba(250,248,247,.75)}
.rail.is-ondark .rail__item[aria-current="true"],
.rail.is-ondark .rail__item:hover{color:var(--paper)}

/* ---------- panel kontekstowy ---------- */

.panel{
  position:fixed;right:78px;bottom:34px;z-index:39;width:308px;
  background:var(--ink);color:var(--paper);padding:22px 22px 20px;
}
.panel__label{margin:0;font:500 10px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--silver-pale)}
.panel__line{margin:12px 0 16px;font:400 22px/1.3 var(--serif);text-wrap:pretty}
.panel__cta{
  width:100%;height:46px;background:var(--paper);color:var(--ink);
  border:0;font:600 14px/1 var(--sans);cursor:pointer;transition:background .16s ease;
}
.panel__cta:hover{background:var(--silver-pale)}

/* ---------- callbar (mobile) ---------- */

.callbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;
  height:64px;background:var(--ink);align-items:stretch;
}
.callbar__tel{
  flex:1.4;display:flex;align-items:center;justify-content:center;gap:10px;
  color:var(--paper);font:600 16px/1 var(--sans);
}
.callbar__tel span{color:var(--silver-pale)}
.callbar__cta{
  flex:1;display:flex;align-items:center;justify-content:center;
  background:var(--silver);color:var(--ink);
  font:600 14px/1.2 var(--sans);text-align:center;padding:0 12px;
}

/* ---------- kreator ---------- */

/* Biała karta na piaskowym hero: kreator ma być pierwszą rzeczą, na której
   oko się zatrzymuje po tytule. */
.creator{
  margin:28px 0 0;padding:28px 32px 30px;max-width:1100px;scroll-margin-top:24px;
  background:var(--paper);border:1px solid var(--line);
}
.creator__kicker{display:flex;align-items:baseline;gap:16px;margin:0 0 14px}
.creator__ask{margin:0;font:400 clamp(28px,2.6vw,38px)/1.1 var(--serif);letter-spacing:-.02em}
.creator__hint{
  margin:12px 0 22px;max-width:56ch;
  font:400 15.5px/1.55 var(--sans);color:var(--slate);text-wrap:pretty;
}

/* Pułapka na boty: poza kadrem, ale wciąż w drzewie dostępności wyłączonym
   przez aria-hidden. Bez display:none — część botów pomija ukryte pola. */
.trap{
  position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
}

.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tile{
  min-height:120px;padding:18px;text-align:left;cursor:pointer;
  font:400 clamp(17px,1.5vw,21px)/1.25 var(--serif);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  background:transparent;color:var(--ink);border:1px solid var(--line-strong);
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.tile__sub{
  font:500 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:10px;color:var(--silver-dark);
}
.tile[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tile[aria-pressed="true"] .tile__sub{color:rgba(250,248,247,.62)}

.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  min-height:44px;padding:10px 17px;text-align:left;cursor:pointer;
  font:400 15.5px/1.3 var(--sans);
  background:transparent;color:var(--ink);border:1px solid var(--line-strong);
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.step{margin-top:30px;border-top:1px solid var(--line);padding-top:26px}
#q2Block{margin-top:42px}
#contactBlock{margin-top:38px;padding-top:28px}
.step__title{margin:0 0 16px;font:400 25px/1.2 var(--serif)}

.fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:660px}
.field{display:block}
.field__label{
  display:block;font:500 10.5px/1 var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px;
}
.field__input{
  width:100%;height:50px;border:1px solid rgba(43,21,24,.3);
  /* 16px — poniżej tej wartości iOS Safari sam przybliża stronę przy focusie */
  padding:0 13px;font:400 16px/1 var(--sans);background:#FDFBFB;color:var(--ink);
  border-radius:0;
}
.field__input:hover{border-color:var(--ink)}

/* nota informacyjna pod formularzem — obowiązek z art. 13 RODO, nie zgoda */
.consent{
  padding:18px 0 16px;max-width:70ch;
  font:400 12.5px/1.55 var(--sans);color:var(--body);
}

.done{max-width:60ch;margin-top:20px}
/* ekran po wysłaniu to ta sama karta co kreator, tylko treść trzyma się
   szerokości czytelnej dla oka */
.creator.done{max-width:1100px;margin-top:34px}
.creator.done > *{max-width:60ch}
.done__title{
  margin:0 0 22px;
  font:400 clamp(32px,3.4vw,50px)/1.06 var(--serif);letter-spacing:-.026em;
}
.done__p{margin:0 0 14px;font:400 19px/1.6 var(--sans);color:var(--deep);text-wrap:pretty}
.done__sign{margin:8px 0 0;font:400 22px/1 var(--serif);font-style:italic;color:var(--silver-dark)}
.done__foot{
  margin-top:26px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;gap:26px;align-items:center;flex-wrap:wrap;
  font:400 14px/1.5 var(--sans);color:var(--slate);
}
.done__foot .link-plain{margin-top:0}
.done__foot a{font-weight:500}

/* ---------- manifest ---------- */

.manifest__inner{padding:clamp(90px,13vh,150px) 0}
.manifest__claim{
  margin:0;max-width:19ch;
  font:400 clamp(38px,5.6vw,84px)/1.04 var(--serif);
  letter-spacing:-.028em;text-wrap:balance;
}
.versus{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(28px,5vw,72px);
  margin:clamp(44px,6vh,68px) 0 0;
}
.versus__col{border-top:1px solid var(--line-onink);padding-top:20px}
.versus__n{
  margin:0;font:400 clamp(56px,7vw,104px)/.92 var(--serif);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--paper);
}
.versus__n--dim{color:var(--silver-pale);opacity:.5}
.versus__t{
  margin:12px 0 0;max-width:24ch;
  font:400 clamp(15px,1.3vw,17px)/1.55 var(--sans);
  color:var(--paper-onink);text-wrap:pretty;
}
.manifest__lead{
  margin:clamp(40px,6vh,64px) 0 0;max-width:62ch;
  font:400 clamp(17px,1.5vw,20px)/1.65 var(--sans);
  color:var(--paper-onink);text-wrap:pretty;
}
.stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 40px;
  margin:clamp(56px,8vh,90px) 0 0;padding-top:24px;
  border-top:1px solid var(--line-onink);
}
.stat__v{
  margin:0;font:400 clamp(40px,4.4vw,64px)/1 var(--serif);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--paper);
}
.stat__t{
  margin:10px 0 0;font:400 14px/1.5 var(--sans);
  color:rgba(250,248,247,.66);text-wrap:pretty;
}

/* ---------- oferta ---------- */

.offers{margin-top:40px}
.offer{border-top:1px solid var(--line)}
.offer__head{
  width:100%;display:grid;
  grid-template-columns:96px minmax(0,1fr) minmax(0,.9fr) 40px;gap:0 28px;
  padding:26px 0;background:none;border:0;text-align:left;cursor:pointer;align-items:center;
}
.offer__num{font:400 44px/1 var(--serif);color:var(--silver-pale);font-variant-numeric:tabular-nums}
.offer__title{font:400 clamp(26px,2.4vw,36px)/1.12 var(--serif);letter-spacing:-.02em}
.offer__short{font:400 15.5px/1.5 var(--sans);color:var(--slate)}
.offer__sign{font:400 26px/1 var(--sans);color:var(--muted);text-align:right}
.offer__head:hover .offer__title{color:var(--silver-dark)}
.offer__body{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 28px;padding:0 0 34px}
.offer__meta{font:500 11px/1.6 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--silver-dark)}
.offer__text{margin:0;max-width:58ch;font:400 17px/1.62 var(--sans);color:var(--body);text-wrap:pretty}

/* ---------- kroki ---------- */

.steps{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;
  list-style:none;margin:0;padding:0;
}
.stepcard{border-top:1px solid rgba(43,21,24,.22);padding-top:18px}
.stepcard__num{
  display:block;font:400 clamp(56px,5.2vw,78px)/1 var(--serif);
  color:var(--silver-pale);font-variant-numeric:tabular-nums;
}
.stepcard__title{margin:12px 0 0;font:400 26px/1.15 var(--serif);letter-spacing:-.018em}
.stepcard__body{margin:10px 0 0;font:400 15.5px/1.55 var(--sans);color:var(--body);text-wrap:pretty}
.stepcard__who{
  margin:16px 0 0;font:500 10.5px/1 var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--silver-dark);
}

/* ---------- split (mieszkanie / marcin / kontakt) ---------- */

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:0 64px;padding:64px 0}
.split--center{align-items:center}
.split--top{align-items:start;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);padding:76px 0}

.ladder{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ladder li{font:400 clamp(24px,2.5vw,34px)/1.35 var(--serif)}
.ladder__last{color:var(--silver-dark)}

#mieszkanie .btn--ghost{margin-top:26px}

/* ---------- marcin ---------- */

.marcin__inner>div{max-width:64ch}

/* ---------- pasmo typograficzne ---------- */

.band{background:var(--sand);border-top:1px solid var(--line);padding:0 var(--pad)}
.band__line{
  max-width:var(--wrap);margin:0 auto;padding:clamp(56px,8vw,88px) 0;
  font:400 clamp(24px,3vw,42px)/1.25 var(--serif);
  letter-spacing:-.018em;color:var(--ink);text-wrap:balance;
}
.marcin__arc{
  margin:0 0 18px;max-width:26ch;
  font:400 clamp(21px,2vw,29px)/1.3 var(--serif);
  letter-spacing:-.018em;text-wrap:balance;
}
.marcin__role{margin:0 0 26px;font:400 15px/1.5 var(--sans);color:var(--muted)}
.creds{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 32px;
  border-top:1px solid var(--line);padding-top:18px;max-width:520px;margin:0;
}
.creds dt{font:400 22px/1.2 var(--serif)}
.creds dd{margin:5px 0 0;font:400 13px/1.5 var(--sans);color:var(--slate);font-variant-numeric:tabular-nums}

/* ---------- opinie ---------- */

.rating{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 48px;align-items:center;padding:26px 0 46px}
.rating__score{
  margin:0;font:400 clamp(120px,16vw,236px)/.78 var(--serif);
  letter-spacing:-.05em;font-variant-numeric:tabular-nums;
}
.rating .h2{margin-top:0;font-size:clamp(26px,2.6vw,38px);line-height:1.12;letter-spacing:-.022em;max-width:16ch}
.rating__meta{margin:14px 0 10px;font:400 15px/1.5 var(--sans);color:var(--slate)}

.review{border-top:1px solid var(--line)}
.review__grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0 48px;padding:34px 0;align-items:start}
.review__who{margin:0;font:500 15px/1.35 var(--sans)}
.review__when{margin:4px 0 0;font:400 12.5px/1.5 var(--sans);color:var(--muted)}
.review__stars{margin:8px 0 0;font:400 15px/1.5 var(--sans);color:var(--silver-dark)}
.review__quote{margin:0;max-width:52ch;font:400 clamp(21px,1.9vw,27px)/1.42 var(--serif);text-wrap:pretty}
.review__reply{display:grid;grid-template-columns:78px minmax(0,1fr);gap:0 24px;margin-top:18px;max-width:56ch}
.review__replyWho{font:500 11px/1.7 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--silver-dark)}
.review__replyText{margin:0;font:400 16px/1.6 var(--sans);color:var(--body);text-wrap:pretty}
.reviews__more{border-top:1px solid var(--line)}
.reviews__more .review__grid{padding:24px 0 36px;align-items:baseline}

/* ---------- koszt ---------- */

.costs{margin:34px 0 0;border-top:1px solid var(--line-onink)}
.cost{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:0 48px;padding:22px 0;align-items:center;
  max-width:var(--wrap);margin:0 auto;
}
.cost + .cost{border-top:1px solid var(--line-onink)}
.cost__q{margin:0;font:400 20px/1.45 var(--sans);color:var(--paper-onink);max-width:40ch}
.cost__a{margin:0;font:400 16px/1.55 var(--sans);color:var(--paper);text-wrap:pretty}
.cost__a--big{font:400 clamp(40px,4.6vw,68px)/1 var(--serif)}
.costs__tail{border-top:1px solid var(--line-onink);height:44px}

/* ---------- kontakt ---------- */

.bigtel{
  display:block;margin:20px 0 0;
  font:400 clamp(48px,7vw,104px)/1 var(--serif);letter-spacing:-.03em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.bigtel:hover{color:var(--silver-dark)}
.kontakt__note{margin:16px 0 0;font:400 16px/1.6 var(--sans);color:var(--slate)}
.kontakt__facts{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;
  margin:34px 0 0;padding:18px 0 0;max-width:640px;list-style:none;
  border-top:1px solid var(--line);
  font:400 15px/1.55 var(--sans);color:var(--body);
}
.kontakt__side{display:flex;flex-direction:column;gap:24px;padding-top:8px}
.kontakt__side .eyebrow{
  font-size:10.5px;line-height:1;letter-spacing:.09em;margin-bottom:8px;
}
.kontakt__addr{margin:0;font:400 21px/1.45 var(--serif)}
.kontakt__hours{margin:0;font:400 15px/1.6 var(--sans);color:var(--body)}
.kontakt__hours a{font-variant-numeric:tabular-nums}

/* ---------- mapa ---------- */

.map{border-top:1px solid var(--line);position:relative}
.map__frame{height:clamp(300px,42vh,440px);background:var(--sand)}
.map__frame iframe{display:block;width:100%;height:100%;border:0;filter:grayscale(.35) contrast(.95)}
.map__placeholder{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:24px;text-align:center;
  background:
    repeating-linear-gradient(45deg,rgba(43,21,24,.035) 0 12px,transparent 12px 24px),
    var(--sand);
}
.map__ph-text{margin:0;max-width:46ch;font:400 15px/1.6 var(--sans);color:var(--slate)}
.map__card{
  position:absolute;left:var(--pad);bottom:44px;max-width:280px;
  background:var(--ink);color:var(--paper);padding:20px 24px;
}
.map__card .eyebrow--silver{color:var(--silver-pale);font-size:10px}
.map__addr{margin:10px 0 0;font:400 22px/1.35 var(--serif)}
.map__note{margin:10px 0 0;font:400 14px/1.6 var(--sans);color:var(--paper-onink)}
.map__card .link-silver{margin-top:14px;color:var(--silver-pale);border-color:rgba(199,200,204,.5)}
.map__card .link-silver:hover{color:var(--paper)}

/* ---------- stopka ---------- */

.footer{padding:0 var(--pad);border-top:1px solid var(--line)}
.footer__inner{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 40px;
  padding:24px 0;align-items:center;
}
.footer__brand{display:flex;align-items:center;gap:26px}
/* wersja jednobarwna z księgi znaku — plik ma fill:currentColor,
   a wstawiony przez <img> renderuje się w 100% czerni */
.footer__logo{display:block;width:auto;height:104px;flex:none}
.footer__legal{margin:0;font:400 12.5px/1.7 var(--sans);color:var(--muted)}
.footer__nav{display:flex;gap:20px;font:400 12.5px/1.6 var(--sans)}
.footer__nav a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- strony treściowe (polityka prywatności) ---------- */

.doc{padding:0 var(--pad)}
.doc__inner{max-width:74ch;margin:0 auto;padding:80px 0 96px}
.doc h1{margin:18px 0 8px;font:400 clamp(34px,4vw,54px)/1.04 var(--serif);letter-spacing:-.028em}
.doc h2{margin:44px 0 12px;font:400 clamp(22px,2.2vw,30px)/1.2 var(--serif);letter-spacing:-.02em}
.doc p,.doc li{font:400 16.5px/1.7 var(--sans);color:var(--body)}
.doc ul{padding-left:20px}
.doc__back{display:inline-block;margin-top:40px}

/* =========================================================
   Responsywność
   ========================================================= */

@media (max-width:1180px){
  .rail,.panel{display:none!important}
}

@media (max-width:1024px){
  :root{--pad:32px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .offer__head{grid-template-columns:64px minmax(0,1fr) 40px}
  .offer__short{display:none}
  .offer__body{grid-template-columns:64px minmax(0,1fr)}
  .split{grid-template-columns:1fr;gap:40px}
  .split--top{grid-template-columns:1fr}
  .map__card{position:static;max-width:none;margin:0}
}

@media (max-width:900px){
  :root{--pad:20px}
  .callbar{display:flex}
  body{padding-bottom:64px}

  .hero__inner{padding:44px 0 48px}
  .hero__proof{grid-template-columns:1fr;gap:10px;margin-top:22px}
  .creator{margin-top:26px;padding:24px 20px 26px}
  .creator.done{margin-top:26px}
  .topbar__inner{gap:0 20px}
  .brand{gap:12px}
  .brand__mark{height:34px}
  .brand__name{font-size:17px}
  .footer__brand{gap:18px}
  .footer__logo{height:74px}

  .section__inner{padding:52px 0 60px}
  .section__head{padding-top:52px}

  .tiles{grid-template-columns:1fr 1fr}
  .tile{min-height:96px}
  .fields{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr;gap:26px 20px}
  .versus{gap:0 20px}
  .steps{grid-template-columns:1fr;gap:26px}
  .creds{grid-template-columns:1fr;gap:20px}
  .kontakt__facts{grid-template-columns:1fr;gap:10px}

  .band__line{padding:44px 0 48px;font-size:clamp(22px,5.8vw,30px)}

  .rating{grid-template-columns:1fr;gap:12px;padding:20px 0 32px}
  .rating__score{font-size:clamp(88px,26vw,140px)}
  .review__grid{grid-template-columns:1fr;gap:14px;padding:26px 0}
  .review__reply{grid-template-columns:1fr;gap:6px}
  .reviews__more .review__grid{gap:8px}

  .cost{grid-template-columns:1fr;gap:8px;padding:18px 0}
  .cost__a--big{font-size:clamp(34px,10vw,48px)}

  .footer__inner{grid-template-columns:1fr;gap:14px}
  .doc__inner{padding:56px 0 72px}
}

@media (max-width:480px){
  /* Cztery kafle jeden pod drugim zepchnęłyby dowód spod linii zgięcia —
     na telefonie zostają dwie kolumny, tylko niższe. */
  .tiles{grid-template-columns:1fr 1fr;gap:8px}
  .tile{min-height:84px;padding:12px;font-size:16px}
  .tile__sub{margin-bottom:6px}
  .btn--send{width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .hero__title .word{opacity:1!important;transform:none!important}
}

@media print{
  /* srebrny gradient na białym papierze jest nieczytelny — na wydruku
     zostaje sama nazwa firmy i jednobarwny logotyp w stopce */
  .rail,.panel,.callbar,.map,.skip-link,.brand__mark{display:none!important}
  .topbar{background:none!important}
  .brand__name,.brand__person,.topbar__tel{color:#000!important}
  body{background:#fff;color:#000}
}


/* =========================================================
   Poradnik — listing, wpis, karty, CTA, autor
   Nowe klasy w istniejących tokenach kolorów i krojów.
   ========================================================= */

/* ---------- pasek górny: link „Poradnik” ---------- */

.topbar__inner{grid-template-columns:1fr auto auto}
.topbar__nav{display:flex}
.topbar__link{
  display:inline-flex;align-items:center;min-height:44px;padding:0 4px;
  font:500 11px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--paper-onink);border-bottom:1px solid transparent;
}
.topbar__link:hover,.topbar__link[aria-current="true"]{color:var(--paper)}
.topbar__link[aria-current="true"]{border-bottom-color:var(--silver-pale)}

/* ---------- karty wpisów (sekcja 08, listing, „czytaj też”) ---------- */

.posts{border-top:1px solid var(--line)}
.post-card{
  display:grid;grid-template-columns:200px minmax(0,1fr);gap:0 48px;
  padding:30px 0;border-bottom:1px solid var(--line);align-items:start;
}
.post-card__kicker{margin:0;font:500 11px/1.6 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--silver-dark)}
.post-card__kicker a{color:inherit}
.post-card__kicker a:hover{color:var(--ink)}
.post-card__time{margin:6px 0 0;font:400 12.5px/1.5 var(--sans);color:var(--muted)}
.post-card__title{margin:0;font:400 clamp(24px,2.2vw,32px)/1.18 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.post-card__title a{color:var(--ink)}
.post-card__title a:hover{color:var(--silver-dark)}
.post-card__desc{margin:10px 0 0;max-width:58ch;font:400 16px/1.6 var(--sans);color:var(--body);text-wrap:pretty}
.posts__more{padding:28px 0 64px}
.posts__empty{margin:0;padding:34px 0;font:400 17px/1.6 var(--sans);color:var(--slate)}
#poradnik .posts{margin-top:40px}

/* ---------- listing /poradnik/ i strony kategorii ---------- */

.post-list__head{padding:56px 0 34px}
.post-list__title{margin-top:14px}
.post-list .lead{margin-top:18px;max-width:52ch}
.filters{display:flex;flex-wrap:wrap;gap:8px 8px;margin:6px 0 0}
.filters__item{
  display:inline-flex;align-items:center;min-height:40px;padding:0 14px;
  border:1px solid var(--line-strong);font:500 13px/1 var(--sans);color:var(--body);
}
.filters__item:hover{border-color:var(--ink);color:var(--ink)}
.filters__item[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.post-list .posts{margin-bottom:0}
.pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:26px 0 64px}
.pager__link{display:inline-flex;align-items:center;min-height:44px;font:500 14px/1 var(--sans);color:var(--body)}
.pager__link[rel="next"]{justify-self:end}
.pager__link:hover{color:var(--ink)}
.pager__pos{font:400 12.5px/1.5 var(--sans);color:var(--muted)}

/* ---------- okruszki ---------- */

.crumbs__list{display:flex;flex-wrap:wrap;gap:0 6px;list-style:none;margin:0 0 22px;padding:0;font:400 13px/1.6 var(--sans);color:var(--muted)}
.crumbs__list li+li::before{content:"›";margin-right:6px;color:var(--silver)}
.crumbs__list a{color:var(--slate)}
.crumbs__list a:hover,.crumbs__list a[aria-current]{color:var(--ink)}

/* ---------- wpis ---------- */

.draftbar{
  margin:0;padding:12px var(--pad);
  background:var(--sand);border-bottom:1px solid var(--line);
  font:500 12.5px/1.5 var(--sans);letter-spacing:.02em;color:var(--body);text-align:center;
}
.post__inner{max-width:68ch;margin:0 auto;padding:56px var(--pad) 72px}
.post__kicker{margin:0;font:500 11px/1.7 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--silver-dark)}
.post__kicker a{color:inherit}
.post__kicker a:hover{color:var(--ink)}
.post__title{
  margin:14px 0 18px;
  font:400 clamp(34px,4vw,54px)/1.06 var(--serif);letter-spacing:-.028em;text-wrap:balance;
}
.post__lead{max-width:none;margin-bottom:0}

.toc{margin:40px 0 0;padding:22px 24px;border:1px solid var(--line);background:var(--sand)}
.toc__title{margin:0 0 10px}
.toc ul{list-style:none;margin:0;padding:0}
.toc li{font:400 16px/1.5 var(--sans)}
.toc li+li{margin-top:8px}
.toc a{color:var(--body);border-bottom:1px solid var(--line-strong);padding-bottom:1px}
.toc a:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- treść ---------- */

.prose{margin-top:44px;font:400 17px/1.7 var(--sans);color:var(--body)}
.prose>*:first-child{margin-top:0}
.prose h2{margin:52px 0 14px;font:400 clamp(26px,2.4vw,34px)/1.18 var(--serif);letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
.prose h3{margin:34px 0 10px;font:400 clamp(21px,1.8vw,25px)/1.25 var(--serif);letter-spacing:-.015em;color:var(--ink)}
.prose p{margin:0 0 20px;text-wrap:pretty}
.prose ul,.prose ol{margin:0 0 20px;padding-left:22px}
.prose li{margin:0 0 8px}
.prose li::marker{color:var(--silver-dark)}
.prose strong{font-weight:600;color:var(--ink)}
.prose em{font-style:italic}
.prose a{color:var(--ink);border-bottom:1px solid var(--line-strong);padding-bottom:1px}
.prose a:hover{border-bottom-color:var(--ink)}
.prose blockquote{
  margin:28px 0;padding:6px 0 6px 24px;border-left:2px solid var(--silver-pale);
  font:400 clamp(19px,1.7vw,23px)/1.45 var(--serif);color:var(--deep);
}
.prose blockquote p{margin:0}
.prose blockquote p+p{margin-top:12px}
.prose hr{margin:40px 0;border:0;border-top:1px solid var(--line)}
.prose img{display:block}
.prose figure{margin:28px 0}
.prose figcaption{margin-top:8px;font:400 13px/1.5 var(--sans);color:var(--muted)}
.prose code{font-size:.92em;background:var(--sand);padding:1px 5px}
.prose__table{margin:28px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose table{border-collapse:collapse;width:100%;min-width:480px;font:400 15px/1.5 var(--sans)}
.prose th,.prose td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.prose th{font:500 11px/1.6 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--silver-dark);border-bottom-color:var(--line-strong)}
.prose .ta-center{text-align:center}
.prose .ta-right{text-align:right}

/* ---------- wstawka CTA w treści ({{< cta >}}) ---------- */

.cta-box{margin:36px 0;padding:26px 28px;background:var(--sand);border-top:2px solid var(--ink)}
.cta-box__text{margin:0 0 18px;max-width:46ch;font:400 clamp(19px,1.7vw,23px)/1.4 var(--serif);color:var(--ink);text-wrap:pretty}
.cta-box__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin:0}
.cta-box__tel{font:500 20px/1.1 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums}
/* wstawka stoi wewnątrz .prose, którego reguła dla linków (kolor bordo,
   podkreślenie) zjadłaby tekst przycisku — bordo na bordo */
.prose .cta-box .btn{color:var(--paper);border-bottom:0;padding-bottom:0}
.prose .cta-box .btn:hover{color:var(--paper)}
.prose .cta-box__tel{border-bottom:1px solid var(--line-strong);padding-bottom:1px}
.cta-box__tel:hover{color:var(--silver-dark)}

/* ---------- CTA końcowe (bordowe) ---------- */

.cta-end__inner{
  padding:64px 0 68px;max-width:none;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:0 64px;align-items:start;
}
.cta-end__title{max-width:20ch}
.cta-end__text{margin:20px 0 0;max-width:46ch;font:400 17px/1.6 var(--sans);color:var(--paper-onink);text-wrap:pretty}
.cta-end__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:30px}
.btn--paper{height:54px;padding:0 30px;background:var(--paper);color:var(--ink);font-size:16px}
.btn--paper:hover{background:var(--silver-pale)}
.cta-end__tel{font:500 22px/1.1 var(--serif);color:var(--paper);font-variant-numeric:tabular-nums}
.cta-end__tel:hover{color:var(--silver-pale)}
/* podpis autora — druga kolumna CTA, na wąskim ekranie ląduje pod treścią */
.cta-end__author{
  padding-top:26px;max-width:44ch;
  border-top:1px solid rgba(250,248,247,.22);
}
.cta-end__author-name{margin:10px 0 0;font:400 22px/1.2 var(--serif);letter-spacing:-.015em;color:var(--paper)}
.cta-end__author-text{margin:6px 0 12px;font:400 15px/1.55 var(--sans);color:var(--paper-onink);text-wrap:pretty}
.cta-end__author-link{
  display:inline-block;font:500 13.5px/1.4 var(--sans);color:var(--paper);
  border-bottom:1px solid var(--silver-dark);padding-bottom:2px;
}
.cta-end__author-link:hover{color:var(--silver-pale);border-bottom-color:var(--silver-pale)}

/* ---------- stopka wpisu: autor, czytaj też ---------- */

.post__foot{padding:56px 0 72px}
.related{margin-top:0}
.related__title{margin-bottom:14px}
.related .posts{border-top:1px solid var(--line-strong)}

/* ---------- responsywność poradnika ---------- */

@media (max-width:900px){
  .topbar__inner{grid-template-columns:1fr auto auto;gap:0 16px}
  .post-card{grid-template-columns:1fr;gap:10px;padding:24px 0}
  .post-card__time{margin:0 0 0 12px;display:inline}
  .post-list__head{padding:40px 0 26px}
  .post__inner{padding:40px var(--pad) 56px}
  .cta-end__inner{padding:52px 0 56px;grid-template-columns:1fr;gap:44px 0}
  .post__foot{padding:44px 0 56px}
  .pager{grid-template-columns:1fr;justify-items:center;gap:10px}
  .pager__link[rel="next"]{justify-self:center}
}

@media (max-width:480px){
  .topbar__link{font-size:10px;padding:0}
  .cta-box{padding:22px 20px}
  .cta-box .btn--send{width:100%}
  .btn--paper{width:100%}
}

@media print{
  .draftbar,.cta-box,.cta-end,.topbar__nav{display:none!important}
}