/* hipoteki.app — system wizualny
   Ton: instytucjonalny, spokojny, drogi. Granat + szampan, dużo powietrza. */

:root {
  --navy-900: #0d1826;
  --navy-800: #142334;
  --navy-700: #1d3049;
  --navy-600: #2a4463;
  --gold: #c9a227;
  --gold-soft: #e8d08b;
  --paper: #fbfaf7;
  --paper-2: #f3f1ea;
  --ink: #16202c;
  --ink-soft: #4a5867;
  --line: #e2ded3;
  --ok: #2f7d55;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --wrap: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--navy-700); text-decoration-color: rgba(201,162,39,.45); text-underline-offset: 3px; }
a:hover { color: var(--gold); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 780px; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.22; letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); margin-top: 1.6em; }
/* naglowek z kilku zdan: w pelnym stopniu zajalby pol ekranu i przestal byc
   naglowkiem, a stal sie akapitem zlozonym wieksza czcionka */
.naglowek-dlugi { font-size: clamp(1.4rem, 2.3vw, 1.95rem); line-height: 1.3; max-width: 22ch; }
h3 { font-size: 1.25rem; margin-top: 1.8em; }
p { margin: 0 0 1.15em; }
.lead { font-size: 1.2rem; color: var(--ink-soft); }
.eyebrow {
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin-bottom: 1rem; display: block;
}

/* ---------- nagłówek ---------- */
.top { background: var(--navy-900); color: #f4f1e9; position: sticky; top: 0; z-index: 40; }
.top .wrap { display: flex; align-items: center; gap: 32px; height: 78px; }
.top a { color: inherit; text-decoration: none; }
.brand { display: flex; align-items: center; color: #f4f1e9; }
.brand svg { height: 46px; width: auto; }
.nav { display: flex; gap: 26px; margin-left: auto; align-items: center; font-size: .95rem; }
.nav a { opacity: .85; min-height: 44px; display: flex; align-items: center; padding: 8px 12px; margin: -8px -12px; }
.nav a:hover, .nav a.on { opacity: 1; color: var(--gold-soft); }
.nav-cta {
  border: 1px solid rgba(232,208,139,.55); padding: 10px 20px; border-radius: 2px;
  color: var(--gold-soft) !important; opacity: 1 !important;
  min-height: 44px; display: flex; align-items: center;
}
.nav-cta:hover { background: var(--gold); color: var(--navy-900) !important; border-color: var(--gold); }
.burger { display: none; margin-left: auto; background: none; border: 0; color: #f4f1e9; font-size: 1.5rem; cursor: pointer; }

/* ---------- hero ---------- */
/* Fotografia jako TŁO, nie ozdoba: zdjęcie przyciemnione gradientem marki, żeby tekst
   zachował kontrast, a złote akcenty nadal się wybijały. Bez zdjęcia hero nadal działa. */
.hero { position: relative; background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-700) 100%); color: #f4f1e9; padding: 92px 0 84px; overflow: hidden; }
.hero-podstrona { padding: 64px 0 56px; }
.hero-podstrona h1 { max-width: 24ch; font-size: clamp(2rem, 4.2vw, 3.2rem); }
.hero-podstrona .lead { max-width: 62ch; margin-bottom: 0; }
.hero-podstrona .btns { margin-top: 26px; }
.hero-artykul h1 { max-width: 28ch; }

.faq-sekcja { background: #fff; }
.faq-head { margin-bottom: 24px; }
.faq-lista { border-top: 1px solid var(--line); }
.faq-pozycja { border-bottom: 1px solid var(--line); }
.faq-pozycja summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 22px 56px 22px 0;
  color: var(--navy);
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.3;
}
.faq-pozycja summary::-webkit-details-marker { display: none; }
.faq-pozycja summary::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 4px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(201, 157, 31, .55);
  color: var(--gold-dark);
  font-family: var(--sans);
  font-size: 1.25rem;
  line-height: 28px;
  text-align: center;
  transform: translateY(-50%);
}
.faq-pozycja[open] summary::after { content: '−'; }
.faq-pozycja summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.faq-odpowiedz { padding: 0 56px 22px 0; }
.faq-odpowiedz p { margin: 0; color: var(--ink-soft); }
.hero > .wrap { position: relative; z-index: 3; }
.hero-foto { position: absolute; inset: 0; z-index: 0; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%;
  filter: saturate(.62) contrast(1.04); }
.hero-foto::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(163deg, rgba(13,24,38,.86) 0%, rgba(13,24,38,.62) 42%, rgba(29,48,73,.74) 100%),
    linear-gradient(90deg, rgba(13,24,38,.72) 0%, rgba(13,24,38,.18) 52%, transparent 100%),
    radial-gradient(120% 90% at 80% 16%, rgba(201,162,39,.14) 0%, transparent 60%); }

/* Fotografia NIGDY jako osobny blok obrazka — wyłącznie jako tło pod treścią.
   Sekcja .z-foto zachowuje się jak zwykła ciemna sekcja, tyle że zamiast płaskiego
   granatu ma pod spodem stonowane zdjęcie. */
.z-foto { position: relative; overflow: hidden; }
.z-foto > .wrap { position: relative; z-index: 3; }
.tlo-foto { position: absolute; inset: 0; z-index: 0; }
.tlo-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%;
  filter: saturate(.45) contrast(1.02); }
.tlo-foto::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(13,24,38,.95) 0%, rgba(13,24,38,.86) 48%, rgba(20,35,52,.80) 100%),
    radial-gradient(90% 80% at 12% 0%, rgba(201,162,39,.10) 0%, transparent 58%); }
.hero h1 { color: #fff; max-width: 17ch; }
.hero .lead { color: rgba(244,241,233,.82); max-width: 56ch; font-size: 1.24rem; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; }
.hero-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(232,208,139,.28);
  padding: 32px; border-radius: 3px; backdrop-filter: blur(3px);
}
.hero-card h3 { color: var(--gold-soft); margin-top: 0; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; font-family: var(--sans); font-weight: 600; }
.hero-card-intro { font-size: .97rem; opacity: .85; }
.hero-card-cta { width: 100%; }
.hero-card-note { font-size: .78rem; opacity: .6; margin: 14px 0 0; }
/* wyliczenie w karcie: zdejmuje obawe "ile mnie to kosztuje pracy" dokladnie
   w miejscu decyzji, zamiast zostawiac dol karty pusty */
.karta-etykieta {
  font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-soft); opacity: .8; margin: 26px 0 10px;
  padding-top: 18px; border-top: 1px solid rgba(232,208,139,.16);
}
.karta-lista { list-style: none; margin: 0 0 18px; padding: 0; }
.karta-lista li {
  position: relative; padding-left: 20px; margin-bottom: 9px;
  font-size: .95rem; line-height: 1.5;
}
.karta-lista li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 7px; height: 1px; background: var(--gold-soft); opacity: .75;
}
/* sygnatura pod nagłówkiem — sama w sobie brzmiałaby dwuznacznie,
   po zdaniu wyjaśniającym działa jak podpis marki */
.claim { font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--gold-soft);
  letter-spacing: .005em; margin: -.25em 0 1.15em; }

/* trzy fakty zamiast akapitu — na telefonie skanuje sie wzrokiem, nie czyta */
.fakty { list-style: none; margin: 0 0 6px; padding: 0; }
.fakty li { position: relative; padding-left: 26px; margin-bottom: 9px;
  color: rgba(244,241,233,.88); font-size: 1rem; line-height: 1.5; }
.fakty li::before { content: ""; position: absolute; left: 2px; top: .62em;
  width: 12px; height: 2px; background: var(--gold); }

.stat-row { display: flex; gap: 34px; margin-top: 26px; flex-wrap: wrap; }
.stat b { display: block; font-family: var(--serif); font-size: 2rem; color: var(--gold-soft); line-height: 1.1; }
.stat span { font-size: .84rem; opacity: .72; letter-spacing: .04em; }

.hero-koszty {
  display: grid; grid-template-columns: repeat(2, minmax(0, 210px)); gap: 10px;
  max-width: 430px; margin: 24px 0 0; padding: 18px 0 0;
  border-top: 1px solid rgba(232,208,139,.22); list-style: none;
}
.hero-koszty li { display: grid; gap: 1px; }
.hero-koszty span {
  color: rgba(244,241,233,.62); font-size: .7rem; line-height: 1.35;
  letter-spacing: .1em; text-transform: uppercase;
}
.hero-koszty strong {
  color: var(--gold-soft); font-family: var(--serif); font-size: 1.18rem; font-weight: 400;
}

/* ---------- przyciski ---------- */
.btn {
  display: inline-block; padding: 15px 34px; border-radius: 2px; font-weight: 600;
  font-size: .97rem; letter-spacing: .02em; text-decoration: none; border: 1px solid transparent;
  cursor: pointer; transition: .18s;
}
.btn-primary { background: var(--gold); color: var(--navy-900); }
.btn-primary:hover { background: var(--gold-soft); color: var(--navy-900); }
.btn-ghost { border-color: rgba(232,208,139,.5); color: var(--gold-soft); }
.btn-ghost:hover { background: rgba(232,208,139,.12); color: var(--gold-soft); }
.btn-dark { background: var(--navy-800); color: #f4f1e9; }
.btn-dark:hover { background: var(--navy-700); color: #fff; }
.btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

/* ---------- sekcje ---------- */
section { padding: 76px 0; }
section.alt { background: var(--paper-2); }
section.dark { background: var(--navy-900); color: #f4f1e9; }
section.dark h2 { color: #fff; }
section.dark .lead { color: rgba(244,241,233,.75); }
.sec-head { max-width: 62ch; margin-bottom: 44px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }

.card {
  background: #fff; border: 1px solid var(--line); padding: 30px; border-radius: 3px;
  transition: .2s; display: flex; flex-direction: column;
}
.card:hover { border-color: var(--gold); box-shadow: 0 10px 34px rgba(13,24,38,.07); }
.card h3 { margin-top: 0; }
.card .num {
  font-family: var(--serif); font-size: 2.6rem; color: var(--gold); line-height: 1; margin-bottom: 14px; opacity: .9;
}

/* ---------- katalog ---------- */
.filters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; align-items: center; }
.filters select, .filters a.chip {
  padding: 10px 16px; border: 1px solid var(--line); background: #fff; border-radius: 2px;
  font-family: var(--sans); font-size: .93rem; color: var(--ink); text-decoration: none;
}
.listing { background: #fff; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; }
.listing:hover { border-color: var(--gold); }
.listing-top { background: var(--navy-800); color: #f4f1e9; padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.listing-top .typ { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft); }
.listing-body { padding: 24px; flex: 1; }
.listing h3 { margin: 0 0 14px; font-size: 1.28rem; }
/* Rejestr zakresu. Poprzednio: flex ze `space-between` i linia kropkowana —
   uklad cennika. Wartosci wyrownane do prawej daja postrzepiona lewa krawedz,
   wiec oko nie ma od czego zaczac czytania kolumny. Do tego kwalifikator byl
   grubszy i ciemniejszy niz pojecie, czyli hierarchia stala na glowie.
   Teraz: siatka o stalej kolumnie pojec — obie krawedzie rowne, waga
   typograficzna po stronie pojecia. Obie kolumny sekcji maja te sama
   strukture, wiec ciezar po dwoch stronach linii jest identyczny. */
.rejestr {
  margin: 0; display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  font-size: .97rem;
}
.rejestr dt,
.rejestr dd { padding: 12px 0; border-top: 1px solid var(--line); line-height: 1.45; }
.rejestr dt { padding-right: 24px; font-weight: 600; color: var(--ink); }
.rejestr dd { margin: 0; color: var(--ink-soft); }
.rejestr > :nth-child(1),
.rejestr > :nth-child(2) { border-top: 0; padding-top: 0; }
/* wykluczenia czyta sie ciszej niz zakres — ta sama siatka, mniejszy kontrast */
.rejestr-nie dt { font-weight: 600; color: var(--ink-soft); }
.rejestr-stopka {
  margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--ink);
  font-weight: 600; color: var(--ink);
}

.params { list-style: none; margin: 0 0 18px; padding: 0; font-size: .95rem; }
.params li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.params li:last-child { border-bottom: 0; }
.params span:first-child { color: var(--ink-soft); }
.params span:last-child { font-weight: 600; }
.badge { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: 5px 12px; border-radius: 2px; font-weight: 600; }
.badge-ok { background: rgba(47,125,85,.12); color: var(--ok); }
.badge-res { background: rgba(201,162,39,.16); color: #8a6d12; }
.badge-gold { background: var(--gold); color: var(--navy-900); }

/* ---------- treść / blog ---------- */
.article { max-width: 760px; margin: 0 auto; }
.article h2 { margin-top: 2em; }
.article ul, .article ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.article li { margin-bottom: .5em; }
.article blockquote {
  margin: 1.8em 0; padding: 20px 28px; background: var(--paper-2);
  border-left: 3px solid var(--gold); font-family: var(--serif); font-size: 1.1rem;
}
.article table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .95rem; }
.article th, .article td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.article th { background: var(--paper-2); font-family: var(--sans); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.meta { color: var(--ink-soft); font-size: .9rem; margin-bottom: 2rem; }
.toc { background: var(--paper-2); border: 1px solid var(--line); padding: 24px 28px; margin: 0 0 2.4em; }
.toc strong { display: block; margin-bottom: 10px; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }

.post-list { display: grid; gap: 22px; }
.post {
  background: #fff; border: 1px solid var(--line); padding: 28px 30px; border-radius: 3px;
  text-decoration: none; color: inherit; display: block; transition: .18s;
}
.post:hover { border-color: var(--gold); transform: translateY(-2px); }
.post h3 { margin: 0 0 8px; }
.post p { margin: 0; color: var(--ink-soft); font-size: .97rem; }
.kat { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 600; }

/* ---------- formularz ---------- */
.form { background: #fff; border: 1px solid var(--line); padding: 38px; border-radius: 3px; }
.form label { display: block; font-size: .87rem; font-weight: 600; margin: 0 0 7px; color: var(--ink-soft); }
.form input, .form select, .form textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 2px;
  font-family: var(--sans); font-size: 1rem; margin-bottom: 20px; background: var(--paper);
}
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--gold); border-color: transparent; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.note { font-size: .85rem; color: var(--ink-soft); }
.alert-ok { background: rgba(47,125,85,.1); border: 1px solid rgba(47,125,85,.3); color: var(--ok); padding: 18px 22px; margin-bottom: 26px; border-radius: 2px; }

/* ---------- stopka ---------- */
/* Bez margin-top. Te 20 px pokazywalo papierowe tlo body miedzy sekcja a stopka —
   na jasnych stronach niewidoczne, na ciemnym terminalu bialy pas przez cala
   szerokosc. Odstep robi wewnetrzny padding stopki, nie luka pod nia. */
footer { background: var(--navy-900); color: rgba(244,241,233,.72); padding: 30px 0 22px; font-size: .9rem; }
footer a { color: rgba(244,241,233,.72); text-decoration: none; }
footer a:hover { color: var(--gold-soft); }

/* Elegancka stopka: wyśrodkowana, powietrzna, czysta typografia. */
.foot-inner { display: grid; justify-items: center; gap: 10px; text-align: center; }

.foot-brand { display: block; }
.foot-domain { font-family: var(--serif); font-size: 1.12rem; color: #f4f1e9; letter-spacing: .01em; }

.foot-nav {
  display: flex; column-gap: 22px; row-gap: 2px; flex-wrap: wrap; justify-content: center;
  font-size: .88rem;
}
.foot-nav a { display: inline-flex; align-items: center; min-height: 30px; }

.foot-mail { font-size: .88rem; color: var(--gold-soft); }
.foot-mail:hover { color: #fff; }
.foot-contact { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.foot-contact > span { opacity: .42; }
.foot-phone { color: var(--gold-soft); }
.foot-phone:hover { color: #fff; }

.foot-meta {
  display: flex; gap: 20px; justify-content: center; align-items: center; flex-wrap: wrap;
  font-size: .8rem; opacity: .65;
}
.foot-meta a, .foot-privacy { display: inline-flex; align-items: center; min-height: 26px; }
.foot-privacy {
  appearance: none; border: 0; background: none; padding: 0; margin: 0;
  color: inherit; font: inherit; cursor: pointer;
}
.foot-privacy:hover { color: var(--gold-soft); }

.foot-rejestr { font-size: .74rem; opacity: .4; letter-spacing: .03em; }

/* ---------- admin ---------- */
.adm { max-width: 1240px; margin: 0 auto; padding: 30px 24px; }
.adm table { width: 100%; border-collapse: collapse; background: #fff; font-size: .9rem; }
.adm th, .adm td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.adm th { background: var(--navy-800); color: #f4f1e9; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.adm details { background: #fff; border: 1px solid var(--line); padding: 20px; margin-bottom: 24px; }
.adm summary { cursor: pointer; font-weight: 600; }

/* ============ TELEFON: zachowanie aplikacji ============ */
.pasek-mob { display: none; }
.przesun { display: none; }

@media (max-width: 900px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overscroll-behavior-y: contain; padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  a, button, input, select, textarea { -webkit-tap-highlight-color: rgba(201,162,39,.18); touch-action: manipulation; }

  .hero-grid, .grid-3, .grid-2, .form-row { grid-template-columns: 1fr; }
  .nav { display: none; }
  .nav.open { display: flex; flex-direction: column; position: absolute; top: 78px; left: 0; right: 0; background: var(--navy-800); padding: 22px 24px; gap: 16px; }
  .nav.open a { min-height: 44px; display: flex; align-items: center; }
  .burger { display: block; min-width: 44px; min-height: 44px; }
  section { padding: 54px 0; }
  .hero { padding: 62px 0 56px; }

  /* TYPOGRAFIA NA TELEFON: mniejsza skala i ciasniejsza interlinia — inaczej
     hero to sciana tekstu i CTA lezy pod zagieciem */
  body { font-size: 16px; line-height: 1.6; }
  h1 { font-size: 1.72rem; line-height: 1.16; letter-spacing: -.015em; }
  h2 { font-size: 1.42rem; line-height: 1.2; margin-top: 1.1em; }
  h3 { font-size: 1.08rem; }
  .lead { font-size: 1.02rem; line-height: 1.55; }
  .hero .lead { font-size: 1.04rem; line-height: 1.5; color: rgba(244,241,233,.92); max-width: none; }
  .fakty li { font-size: .96rem; }
  .claim { font-size: 1.18rem; margin: -.1em 0 1em; }
  .eyebrow { font-size: .68rem; letter-spacing: .18em; margin-bottom: .7rem; }
  .hero { padding: 34px 0 42px; }
  .hero-card { padding: 24px 20px; }
  .stat-row { gap: 20px 26px; margin-top: 22px; }
  .stat b { font-size: 1.5rem; }
  .stat span { font-size: .7rem; }
  .sec-head { margin-bottom: 30px; }
  .card { padding: 24px 22px; }
  .article p, .article li { font-size: 1rem; }

  /* fotografia MUSI byc widoczna: rozjasnione tlo u gory, ciemniej dopiero pod tekstem */
  .hero-foto img { object-position: center 28%; }
  .hero-foto::after { background:
    linear-gradient(180deg, rgba(13,24,38,.34) 0%, rgba(13,24,38,.58) 26%,
                    rgba(13,24,38,.86) 52%, rgba(20,35,52,.95) 100%); }
  .tlo-foto::after { background:
    linear-gradient(180deg, rgba(13,24,38,.93) 0%, rgba(13,24,38,.88) 55%, rgba(20,35,52,.92) 100%); }

  /* bezpieczne marginesy przy notchu i pasku gestow */
  .top { padding-top: env(safe-area-inset-top); }
  .wrap { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }

  /* cele dotykowe */
  .btn { min-height: 52px; display: flex; align-items: center; justify-content: center; width: 100%; }
  .btns { gap: 10px; }
  /* 16px na KAZDYM polu — ponizej tej wartosci iOS przybliza ekran przy dotknieciu pola */
  input, select, textarea { font-size: 16px !important; }
  .form input, .form select, .form textarea,
  .filters select, .filters input, .hero-card input { min-height: 50px; }
  .filters { gap: 10px; }
  .filters select { flex: 1 1 100%; }

  /* stopka na telefonie: wyśrodkowana, zwarta */
  .foot-inner { gap: 7px; }
  .foot-nav { column-gap: 14px; row-gap: 0; }
  footer { padding: 22px 0 16px; }

  /* katalog i kroki jako karuzele z przyciaganiem — inaczej strona ma 13 ekranow scrolla */
  .grid-3.katalog, .grid-3.kroki { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px;
    margin-inline: -20px; padding: 2px 20px 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .grid-3.katalog::-webkit-scrollbar, .grid-3.kroki::-webkit-scrollbar { display: none; }
  .grid-3.katalog > .listing, .grid-3.kroki > .card { flex: 0 0 84%; scroll-snap-align: center; }
  .przesun { display: block; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-muted); margin-top: 12px; }

  /* pasek akcji w zasiegu kciuka */
  .pasek-mob { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: 10px;
    padding: 10px max(14px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));
    background: rgba(13,24,38,.94); backdrop-filter: blur(12px); border-top: 1px solid rgba(232,208,139,.3); }
  .pasek-mob a { flex: 1; min-height: 50px; display: flex; align-items: center; justify-content: center;
    font-size: .84rem; font-weight: 600; letter-spacing: .04em; text-decoration: none;
    border: 1px solid var(--gold-soft, #e8d08b); color: #f4f1e9; border-radius: 2px; }
  .pasek-mob a.glowna { background: var(--gold); color: var(--navy-900); border-color: var(--gold); flex: 1.6; }
  .pasek-mob a:active { opacity: .72; }
}

/* --- zgoda na pomiar --- */
.zgoda {
  position: fixed; z-index: 70; right: 24px; bottom: 24px; max-width: 420px;
  background: var(--navy-800); color: #f4f1e9; border: 1px solid rgba(232,208,139,.35);
  border-radius: 3px; padding: 22px 24px; box-shadow: 0 18px 48px rgba(13,24,38,.4);
}
.zgoda-tekst { font-size: .92rem; line-height: 1.6; margin: 0 0 16px; color: #e6e2d8; }
.zgoda-tekst a { color: var(--gold-soft); }
.zgoda-akcje { display: flex; gap: 10px; flex-wrap: wrap; }
.zgoda-akcje .btn { font-size: .84rem; padding: 10px 18px; }

@media (max-width: 860px) {
  .zgoda {
    right: 14px; left: 14px; max-width: none;
    bottom: calc(78px + env(safe-area-inset-bottom));
    padding: 18px 18px 20px;
  }
  .zgoda-akcje { flex-direction: column; }
  .zgoda-akcje .btn { width: 100%; min-height: 46px; }

  /* na waskim ekranie stala kolumna pojec zdusilaby kwalifikator do dwoch
     slow w linii — kazda pozycja schodzi wiec do dwoch wierszy */
  .rejestr { grid-template-columns: 1fr; }
  .rejestr dt { padding: 14px 0 0; border-top: 1px solid var(--line); }
  .rejestr dd { padding: 2px 0 14px; border-top: 0; }
  .rejestr > :nth-child(2) { padding-top: 2px; }
}

/* pulapka na boty — niewidoczna dla czlowieka, obecna w DOM dla bota */
.pole-ukryte { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- obiekty pogladowe: jawne oznaczenie, zeby nikt nie wzial ich za oferte --- */
.badge-pogladowy {
  background: rgba(244,241,233,.14); color: #f0ece0;
  border: 1px solid rgba(232,208,139,.55);
}
.listing-pogladowy { border-style: dashed; border-color: rgba(201,162,39,.55); }
.listing-pogladowy .listing-top { background: var(--navy-700); }

.nota-pogladowa {
  background: rgba(201,162,39,.09); border-left: 3px solid var(--gold);
  padding: 16px 20px; margin: 0 0 26px; font-size: .95rem; line-height: 1.62;
  color: var(--ink-soft); border-radius: 0 2px 2px 0;
}
.nota-pogladowa strong { color: var(--ink); }

.znacznik-pogladowy {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 18px 0 0; font-size: .95rem; color: var(--ink-soft); max-width: 62ch;
}
.znacznik-pogladowy .badge-pogladowy {
  background: rgba(201,162,39,.14); color: #8a6d12; border-color: rgba(201,162,39,.5);
}


/* --- kroki w karcie hero (zastapily mini-formularz) --- */
.hero-kroki {
  list-style: none; counter-reset: hk; margin: 18px 0 22px; padding: 0;
  border-top: 1px solid rgba(232,208,139,.22);
}
.hero-kroki li {
  counter-increment: hk; position: relative; padding: 11px 0 11px 30px;
  border-bottom: 1px solid rgba(232,208,139,.14); font-size: .92rem; line-height: 1.5;
}
.hero-kroki li::before {
  content: counter(hk, decimal-leading-zero); position: absolute; left: 0; top: 11px;
  font-variant-numeric: tabular-nums; font-size: .78rem; letter-spacing: .06em;
  color: var(--gold-soft); opacity: .8;
}

/* --- blok zastepujacy formularz na stronie posrednikow --- */
.cta-terminal {
  border-left: 3px solid var(--gold); background: rgba(201,162,39,.07);
  padding: 22px 24px; margin-top: 8px;
}
.cta-terminal p { margin: 0 0 18px; line-height: 1.65; }
.cta-terminal strong { display: block; margin-bottom: 6px; }


/* ============================================================
   SEKCJA "PROBLEM" — trzy slepe uliczki + zwrot
   Poprzednio: biale kafle z wloskowa ramka na kremowym tle (#fbfaf7), czyli
   kontrast na granicy widzialnosci, przy zerowej funkcji — bez interakcji,
   przycisku i liczby. Pudelka byly chromem. Teraz kolumny rozdzielone linia:
   na papierowym tle czyta sie redakcyjnie, nie jak szablon.
   ============================================================ */

/* Wstep w jednej kolumnie — pustka po prawej ma byc swiatlem, nie brakiem tresci. */
.problem-wstep { max-width: 58ch; }

.uliczki {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 30px;
  border-top: 1px solid var(--line); padding-top: 30px;
}
.uliczki > li { position: relative; counter-increment: ul; }
.uliczki { counter-reset: ul; }
.uliczki > li::before {
  content: counter(ul, decimal-leading-zero);
  display: block; margin-bottom: 10px;
  font-size: .74rem; letter-spacing: .12em; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.uliczki h3 { margin: 0 0 8px; font-size: 1.18rem; line-height: 1.3; }
.uliczki p { margin: 0; color: var(--ink-soft); font-size: .97rem; line-height: 1.65; }

/* Zwrot w narracji: to jedyne miejsce, gdzie czytelnik dowiaduje sie, ze wyjscie
   istnieje. Musi miec inna wage niz akapit, ktory postawil problem. */
.zwrot {
  margin-top: 46px; padding: 30px 0 0; border-top: 2px solid var(--navy-900);
  display: grid; gap: 22px;
}
.zwrot-teza {
  margin: 0; font-family: var(--serif); font-size: clamp(1.3rem, 3.2vw, 1.75rem);
  line-height: 1.34; color: var(--ink); max-width: 30ch;
}
.zwrot-podstawa {
  margin: 0; font-size: .97rem; line-height: 1.7; color: var(--ink-soft); max-width: 62ch;
}

@media (min-width: 861px) {
  .uliczki { grid-template-columns: repeat(3, 1fr); gap: 42px; }
  /* Linie miedzy kolumnami zamiast ramek wokol nich. */
  .uliczki > li + li { padding-left: 42px; border-left: 1px solid var(--line); }
  .zwrot { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
  .zwrot-teza { max-width: none; }
}


/* ============================================================
   PRZEBIEG — rejestr odpowiedzialnosci
   Wartoscia tej sekcji jest KTO wykonuje krok. W kaflach ta informacja byla
   drobnym nadtytulem nad tytulem; tutaj dostaje wlasna kolumne i daje sie
   przeczytac pionowo: Ty · My · My · Bank · Notariusz · Po splacie.
   ============================================================ */
.przebieg { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.przebieg > li {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: 4px 14px;
  padding: 24px 0; border-bottom: 1px solid var(--line);
}
.pb-nr {
  grid-row: 1 / 3; font-variant-numeric: tabular-nums; font-size: .78rem;
  letter-spacing: .1em; color: var(--gold); padding-top: .25em;
}
.pb-kto {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.pb-tresc h3 { margin: 0 0 6px; font-size: 1.14rem; line-height: 1.3; }
.pb-tresc p { margin: 0; color: var(--ink-soft); font-size: .97rem; line-height: 1.65; }

/* ============================================================
   ZAKRES — matryca zastosowan + jawne granice uslugi
   ============================================================ */
.zakres { display: grid; gap: 34px; }
.zakres > * + * { padding-top: 34px; border-top: 1px solid var(--line); }
.zakres-blok { min-width: 0; }
.zakres-tytul {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 10px;
  align-items: start; margin: 0 0 16px;
}
.zakres h3, .zakres-summary-copy strong {
  margin: 0; font-family: var(--serif); font-size: 1.2rem; line-height: 1.3;
  color: var(--ink); font-weight: 400;
}
.zakres-nr {
  padding-top: .35em; color: var(--gold); font-size: .7rem; line-height: 1;
  letter-spacing: .12em; font-variant-numeric: tabular-nums;
}
.zakres-summary-copy { display: grid; gap: 4px; }
.zakres-summary-copy small { color: var(--ink-soft); font-size: .78rem; line-height: 1.4; font-weight: 400; }
.zakres summary { list-style: none; }
.zakres summary::-webkit-details-marker { display: none; }
.rejestr-zakres { display: block; }
.rejestr-zakres > div {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  border-top: 1px solid var(--line);
}
.rejestr-zakres > div:first-child { border-top: 0; }
.rejestr-zakres > div > dt,
.rejestr-zakres > div > dd { border-top: 0; padding: 12px 0; }
.rejestr-zakres > div > dt { padding-right: 24px; }
.zakres p { color: var(--ink-soft); }
.zakres p:last-child { margin-bottom: 0; }

/* ============================================================
   RAMY USLUGI — karty decyzyjne zamiast tabeli etykieta/wartosc
   ============================================================ */
.ramy-head { max-width: 820px; }
.ramy-head .lead { max-width: 66ch; margin-bottom: 0; }
.ramy-siatka {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.ramy-karta {
  position: relative; min-width: 0; min-height: 176px; padding: 22px 22px 24px;
  border: 1px solid rgba(29,48,73,.14); border-top: 2px solid rgba(201,162,39,.74);
  border-radius: 2px; background: rgba(255,255,255,.64);
}
.ramy-meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-bottom: 22px; color: #8d6d16; font-size: .68rem; line-height: 1.2;
  letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.ramy-meta span:first-child { color: var(--ink-soft); }
.ramy-karta h3 {
  margin: 0 0 8px; font-size: 1.08rem; line-height: 1.32; color: var(--ink);
}
.ramy-karta p {
  margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.55;
}
.ramy-wymogi {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, .9fr);
  gap: 40px; align-items: center; margin-top: 14px; padding: 30px 34px;
  background: var(--navy-800); color: #f4f1e9; border-top: 2px solid var(--gold);
}
.ramy-wymogi .eyebrow { margin-bottom: 8px; color: var(--gold-soft); }
.ramy-wymogi h3 {
  margin: 0 0 8px; color: #fff; font-family: var(--serif); font-size: 1.45rem; font-weight: 400;
}
.ramy-wymogi p { margin: 0; color: rgba(244,241,233,.74); font-size: .92rem; line-height: 1.58; }
.ramy-tagi {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none;
}
.ramy-tagi li {
  padding: 8px 11px; border: 1px solid rgba(232,208,139,.24); border-radius: 2px;
  background: rgba(255,255,255,.045); color: #f4f1e9; font-size: .78rem; line-height: 1.3;
}
.ramy-cta { margin-top: 24px; }

/* ============================================================
   BRIEF ZGLOSZENIA — cztery dane potrzebne do pierwszej odpowiedzi
   ============================================================ */
.brief-head { max-width: 760px; }
.brief-head .lead { margin-bottom: 0; }
.brief-siatka {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.brief-karta {
  min-width: 0; min-height: 184px; padding: 22px 22px 24px;
  border: 1px solid rgba(29,48,73,.14); border-top: 2px solid rgba(201,162,39,.74);
  border-radius: 2px; background: rgba(255,255,255,.64);
}
.brief-nr {
  display: block; margin-bottom: 28px; color: #8d6d16; font-size: .68rem;
  line-height: 1; letter-spacing: .12em; font-variant-numeric: tabular-nums;
}
.brief-karta h3 { margin: 0 0 8px; font-size: 1.08rem; line-height: 1.32; color: var(--ink); }
.brief-karta p { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }
.brief-uwaga {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 16px;
  align-items: start; max-width: 760px; margin-top: 20px; padding: 20px 22px;
  border-left: 2px solid var(--gold); background: rgba(255,255,255,.42);
}
.brief-znak {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border: 1px solid rgba(201,162,39,.62); border-radius: 50%;
  color: #8d6d16; font-family: var(--serif); font-size: 1.05rem;
}
.brief-uwaga h3 { margin: 0 0 4px; font-size: .98rem; line-height: 1.35; }
.brief-uwaga p { margin: 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.55; }
.brief-cta { margin-top: 22px; }

/* Karty artykulow sa klikalne, wiec granica jest tu uzasadniona — ale wloskowa
   linia na kremowym tle byla niewidoczna. Mocniejszy ton krawedzi i strzalka. */
.post { border-color: rgba(29,48,73,.16); }
.post h3::after { content: ' →'; color: var(--gold); font-weight: 400; }

@media (min-width: 861px) {
  .przebieg { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; border-top: 0; }
  .przebieg > li:nth-child(-n+2) { border-top: 1px solid var(--line); }
  .zakres { grid-template-columns: 1fr 1fr; gap: 44px; align-items: stretch; }
  /* Kreska miedzy kolumnami biegla przez cala wysokosc wyzszej z nich, wiec
     przy roznej dlugosci tresci wygladalo to na niedokonczona lewa kolumne.
     Teraz linia jest osobnym elementem o wysokosci krotszej kolumny. */
  .zakres > * + * { padding-top: 0; padding-left: 44px; border-top: 0; border-left: 0; position: relative; }
  .zakres > * + *::before {
    content: ''; position: absolute; left: 0; top: .35em; bottom: 0;
    width: 1px; background: var(--line);
  }
  .zakres-wylaczenia > summary { pointer-events: none; }
  .zakres-toggle { display: none; }
}


/* Bloki tresci bez numeracji — cztery zastosowania na /dla-firm. Ten sam
   jezyk co .uliczki i .przebieg: linia zamiast ramki, bo nie sa klikalne. */
.bloki { display: grid; gap: 28px; border-top: 1px solid var(--line); padding-top: 28px; }
.bloki h3 { margin: 0 0 8px; font-size: 1.16rem; line-height: 1.3; }
.bloki p { margin: 0; color: var(--ink-soft); font-size: .97rem; line-height: 1.65; }

@media (min-width: 861px) {
  .bloki { grid-template-columns: 1fr 1fr; gap: 34px 48px; }
  .bloki > div:nth-child(n+3) { padding-top: 34px; border-top: 1px solid var(--line); }
  .bloki > div:nth-child(even) { padding-left: 48px; border-left: 1px solid var(--line); }
}


/* ============================================================
   OCENA WNIOSKU — ilustracja mechanizmu w prawej kolumnie sekcji "Problem"
   Granatowa, nie biala: biala kartka na kremowym tle (#fbfaf7) mialaby ten sam
   problem kontrastu, ktory wlasnie usunelismy z kafli. Ciemna plaszczyzna na
   jasnej sekcji daje ognisko uwagi i wiaze te sekcje z jezykiem terminala.
   ============================================================ */
.problem-gora { display: grid; gap: 40px; }

.ocena {
  margin: 0; background: var(--navy-900); color: #edeae1;
  padding: 24px 26px 22px; border-radius: 2px;
  box-shadow: 0 22px 50px rgba(13,24,38,.16);
}
.ocena figcaption {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid rgba(232,208,139,.28);
}
.ocena-tytul {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft);
}
.ocena-podpis { font-size: .72rem; color: #7c8794; font-style: italic; }

.ocena table { width: 100%; border-collapse: collapse; }
.ocena th, .ocena td { padding: 11px 0; font-weight: 400; vertical-align: baseline; }
.ocena th { text-align: left; font-size: .93rem; color: #aeb4bc; }
.ocena td { text-align: right; font-size: .95rem; white-space: nowrap; padding-left: 16px; }
.ocena td.liczba { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.ocena tbody tr + tr th, .ocena tbody tr + tr td { border-top: 1px solid rgba(255,255,255,.07); }

/* Cztery odhaczone wiersze — znak przed wartoscia, nie osobna kolumna,
   zeby nie robic z tego listy kontrolnej. */
.ocena td.ok::before { content: '✓'; color: #6fa886; margin-right: .42em; }

/* Wiersz, ktory zatrzymuje calosc. Jasniejsze tlo i mocniejsza etykieta —
   ma sie czytac jako miejsce, w ktorym proces staje. */
.ocena tr.brak th, .ocena tr.brak td {
  background: rgba(255,255,255,.05);
  border-top: 1px solid rgba(232,208,139,.35);
  border-bottom: 1px solid rgba(232,208,139,.35);
  padding-top: 13px; padding-bottom: 13px;
}
.ocena tr.brak th { color: #fff; padding-left: 12px; }
.ocena tr.brak td { color: #e0a3a3; padding-right: 12px; }
.ocena tr.brak td::before { content: '—'; opacity: .7; margin-right: .42em; }

.ocena tfoot th, .ocena tfoot td { padding-top: 16px; }
.ocena tfoot th {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: #7c8794;
}
.ocena tfoot td { color: #e0a3a3; font-size: 1rem; }

/* ============================================================
   FIGURA KOMPLETNA — prawa kolumna sekcji "Problem"
   Cztery boki to cztery warunki, ktore stawia instytucja finansujaca.
   Trzy granatowe wnosi klient, czwarty — zloty i grubszy — wnosimy my.
   Uklad jest ZAMKNIETY od pierwszej sekundy: pokazujemy gotowa strukture,
   nie brak. Etykiety siedza na liniach i przecinaja je tlem sekcji.
   ============================================================ */
/* Etykiety wychodza poza ramke o polowe swojej wysokosci — bez tej rezerwy
   gorna byla przycinana u gory kolumny, a prawa wychodzila poza obszar tresci. */
.figura { margin: 0; padding: 12px 14px; }

.fig-ramka {
  position: relative; aspect-ratio: 3 / 2;
  border: 1px solid var(--navy-600);
  border-bottom: 2px solid var(--gold);
  display: grid; place-items: center;
}

.fig-bok {
  position: absolute; white-space: nowrap;
  /* Tlo sekcji przecina linie ramki, dzieki czemu etykieta na niej siedzi,
     a nie obok niej. Dziala tylko na jasnym tle strony. */
  background: var(--paper);
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.fig-gora, .fig-dol { padding: 0 12px; }
.fig-lewo, .fig-prawo { padding: 12px 0; writing-mode: vertical-rl; }

.fig-gora  { top: 0; left: 50%; transform: translate(-50%, -50%); }
.fig-prawo { right: 0; top: 50%; transform: translate(50%, -50%); }
.fig-lewo  { left: 0; top: 50%; transform: translate(-50%, -50%) rotate(180deg); }
.fig-dol {
  bottom: 0; left: 50%; transform: translate(-50%, 50%);
  color: #8a6d12; font-weight: 600;
}

.fig-srodek { text-align: center; display: grid; gap: 10px; padding: 0 22px; }
.fig-slowo {
  font-family: var(--serif); font-size: clamp(1.35rem, 4.4vw, 1.9rem);
  letter-spacing: .04em; color: var(--navy-900); line-height: 1.15;
}
/* Wnetrze nie moze byc calkiem puste: przy cienkiej ramce pustka czyta sie
   jak niedokonczony element, nie jak swiatlo. Rodzaje finansowania mowia
   przy okazji to, o co czytelnik i tak pyta. */
.fig-rodzaje {
  font-size: .74rem; letter-spacing: .06em; color: var(--ink-soft); line-height: 1.6;
}


@media (max-width: 860px) {
  .fig-ramka { aspect-ratio: 2 / 1; }
  .fig-bok { font-size: .72rem; padding: 4px 8px; }
  .fig-slowo { font-size: 1.6rem; }
  .fig-rodzaje { font-size: .8rem; }
}

@media (min-width: 861px) {
  .fig-bok { font-size: .68rem; letter-spacing: .18em; }
  .fig-ramka { aspect-ratio: 8 / 5; }
  /* Opuszczona o wysokosc nadtytulu, zeby gora figury czytala sie w jednej
     linii z naglowkiem tekstowym, a nie z etykieta "PROBLEM". */
  .figura { margin-top: 44px; }
}

@media (min-width: 861px) {
  .problem-gora {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 64px; align-items: start;
  }
  .problem-wstep { max-width: none; margin-bottom: 0; }
}


/* ============================================================
   ZABEZPIECZENIE — sekcja sztandarowa z realnym kompleksem
   Karta na papierze polozona na granacie: ten sam chwyt co karta podmiotu
   w terminalu, bo tam dziala najlepiej. Liczby tabelaryczne, bo to sa dane
   do sprawdzenia, nie ozdoba.
   ============================================================ */
.zabez-gora { display: grid; gap: 40px; }
/* h2 ma globalnie margin-top 1.6em, przez co naglowek startowal 60 px nizej
   niz tytul kompleksu w sasiedniej kolumnie. */
.zabez-gora h2 { margin-top: 0; }

/* Dane kompleksu wprost na granacie — bez pudelka. Biala kartka na ciemnym tle
   czytala sie jak element naklejony; teraz to rejestr danych, jak w "Przebiegu". */
.kompleks { margin: 0; }
.kompleks figcaption {
  display: flex; flex-direction: column; gap: 5px;
  padding-bottom: 16px; border-bottom: 1px solid rgba(232,208,139,.3);
}
.kx-tytul { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; color: #fff; }
.kx-miejsce {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft);
}

.kx-dane { margin: 0; padding: 0; }
.kx-dane > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 22px;
  padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08);
}
.kx-dane > div:last-child { border-bottom: 0; }
.kx-dane dt { font-size: .88rem; color: rgba(244,241,233,.55); }
.kx-dane dd { margin: 0; text-align: right; font-size: 1.02rem; color: #fff; }
.kx-dane dd.liczba { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* Otoczenie: trzy fakty geograficzne w jednym rzedzie, rozdzielone linia. */
.otoczenie {
  list-style: none; margin: 46px 0 0; padding: 34px 0 0;
  border-top: 1px solid rgba(232,208,139,.22);
  display: grid; gap: 24px;
}
.otoczenie li { display: grid; gap: 5px; }
.ot-nazwa {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft);
}
.ot-opis { color: rgba(244,241,233,.7); font-size: .97rem; line-height: 1.55; }

.stan-prac {
  margin: 34px 0 0; max-width: 92ch; font-size: .92rem; line-height: 1.7;
  color: rgba(244,241,233,.6);
}

@media (min-width: 861px) {
  .zabez-gora {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 60px; align-items: start;
  }
  .zabez-gora .lead { max-width: 46ch; }
  .otoczenie { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .otoczenie li + li { padding-left: 40px; border-left: 1px solid rgba(232,208,139,.18); }
}

/* Ta sama karta na jasnej stronie katalogu: bez cienia rzucanego na granat,
   za to z wyrazna krawedzia, zeby nie zniknela na kremowym tle. */
.kompleks-jasny { max-width: 720px; }
.kompleks-jasny figcaption { border-bottom-color: var(--line); }
.kompleks-jasny .kx-tytul { color: var(--ink); }
.kompleks-jasny .kx-miejsce { color: var(--ink-soft); }
.kompleks-jasny .kx-dane > div { border-bottom-color: var(--line); }
.kompleks-jasny .kx-dane dt { color: var(--ink-soft); }
.kompleks-jasny .kx-dane dd { color: var(--ink); }


/* ============================================================
   MOBILE POLISH — gęstość, hierarchia i rytm bez zmiany języka marki
   Hero nie może zajmować dwóch ekranów przed pokazaniem sposobu działania.
   Rejestry pozostają redakcyjne: porządkuje je linia i numer, nie kafle.
   ============================================================ */
@media (max-width: 900px) {
  .top { box-shadow: 0 8px 24px rgba(5,12,20,.16); }
  .top .wrap { height: 68px; }
  .brand { min-height: 44px; }
  .brand svg { height: 40px; }
  .nav.open { top: 68px; }

  section { padding: 50px 0; }
  .hero { padding: 28px 0 34px; }
  .hero-grid { gap: 22px; }

  h1 { font-size: 1.8rem; line-height: 1.13; }
  h2 { font-size: 1.52rem; line-height: 1.18; }
  h3 { font-size: 1.12rem; }
  .eyebrow + h2 { margin-top: 0; }
  .sec-head { margin-bottom: 28px; }

  .hero .eyebrow { margin-bottom: 10px; }
  .hero-podstrona h1 { max-width: none; font-size: 1.72rem; line-height: 1.14; }
  .hero-podstrona .lead { font-size: .96rem; line-height: 1.48; }
  .hero-podstrona .btns { margin-top: 20px; }
  .hero-koszty {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
    margin-top: 18px; padding-top: 14px;
  }
  .hero-koszty span { font-size: .61rem; letter-spacing: .08em; }
  .hero-koszty strong { font-size: 1.02rem; }
  .faq-head { margin-bottom: 16px; }
  .faq-pozycja summary { padding: 18px 48px 18px 0; font-size: 1.05rem; line-height: 1.32; }
  .faq-pozycja summary::after { right: 0; width: 28px; height: 28px; line-height: 26px; }
  .faq-odpowiedz { padding: 0 0 18px; }
  .faq-odpowiedz p { font-size: .92rem; line-height: 1.58; }
  .hero .claim { margin: -.05em 0 .82em; }
  .hero .lead { margin-bottom: .9em; }
  .fakty li { margin-bottom: 7px; line-height: 1.44; }

  /* Na telefonie karta jest szybkim podglądem startu procesu. Rozwinięcie,
     warunki i CTA są już niżej oraz w stałym pasku akcji. */
  .hero .hero-card {
    padding: 18px 20px 16px;
    background: rgba(8,17,28,.52);
    border-color: rgba(232,208,139,.34);
    backdrop-filter: blur(7px);
  }
  .hero .hero-card h3 {
    margin: 0 0 8px; font-size: .76rem; letter-spacing: .14em;
  }
  .hero .hero-card-intro,
  .hero .hero-card-cta,
  .hero .hero-card-note { display: none; }
  .hero .hero-kroki { margin: 0; }
  .hero .hero-kroki li { padding: 8px 0 8px 28px; font-size: .88rem; line-height: 1.42; }
  .hero .hero-kroki li::before { top: 8px; font-size: .72rem; }

  .problem-gora { gap: 32px; }
  .figura { padding-inline: 10px; }

  .uliczki { gap: 0; padding-top: 0; }
  .uliczki > li {
    min-height: 44px; padding: 20px 0 20px 42px;
    border-bottom: 1px solid var(--line);
  }
  .uliczki > li::before {
    position: absolute; left: 0; top: 23px; margin: 0;
  }
  .uliczki h3 { margin-bottom: 5px; }
  .uliczki p { line-height: 1.58; }

  .zwrot { margin-top: 34px; padding-top: 24px; gap: 14px; }
  .zwrot-podstawa { line-height: 1.62; }

  .przebieg > li {
    grid-template-columns: 2.25rem 1fr; gap: 3px 12px;
    padding: 20px 0;
  }
  .pb-tresc p { line-height: 1.58; }

  /* Zakres na telefonie: osiem zastosowan w zwartej matrycy 2 × 4. Kazde ma
     numer, jednoznaczny tytul i jedno zdanie — oko skanuje, zamiast czytac rejestr. */
  .zakres { gap: 18px; }
  .zakres > * + * { padding-top: 0; border-top: 0; }
  .zakres-tytul { margin-bottom: 14px; }
  .rejestr-zastosowania {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px; counter-reset: zakres;
  }
  .rejestr.rejestr-zastosowania > div {
    counter-increment: zakres; display: block; position: relative;
    min-height: 128px; padding: 32px 13px 13px;
    border: 1px solid rgba(29,48,73,.13); border-top: 2px solid rgba(201,162,39,.72);
    border-radius: 2px; background: rgba(255,255,255,.58);
  }
  .rejestr-zastosowania > div::before {
    content: counter(zakres, decimal-leading-zero); position: absolute; top: 11px; left: 13px;
    color: #9a7715; font-size: .66rem; line-height: 1; letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
  }
  .rejestr-zastosowania > div > dt,
  .rejestr-zastosowania > div > dd { padding: 0; }
  .rejestr-zastosowania > div > dt {
    font-size: .9rem; line-height: 1.28; padding-right: 0; color: var(--ink);
  }
  .rejestr-zastosowania > div > dd {
    margin-top: 7px; font-size: .82rem; line-height: 1.38; color: var(--ink-soft);
  }

  /* Granice uslugi sa osobnym, spokojniejszym panelem. Domyslnie zwiniety —
     uzytkownik widzi ich liczbe i rozwija dopiero wtedy, gdy sa mu potrzebne. */
  .zakres-wylaczenia {
    padding: 0 15px; border: 1px solid rgba(29,48,73,.16); border-radius: 2px;
    background: rgba(29,48,73,.035);
  }
  .zakres-wylaczenia .zakres-tytul {
    grid-template-columns: 2rem minmax(0, 1fr) 18px; gap: 9px;
    align-items: center; margin: 0; padding: 15px 0; cursor: pointer;
  }
  .zakres-wylaczenia .zakres-nr { align-self: start; padding-top: .5em; }
  .zakres-summary-copy strong { font-size: 1rem; font-family: var(--sans); font-weight: 650; }
  .zakres-toggle { position: relative; width: 18px; height: 18px; }
  .zakres-toggle::before,
  .zakres-toggle::after {
    content: ''; position: absolute; left: 2px; right: 2px; top: 8px;
    height: 1px; background: var(--ink); transition: transform .2s ease;
  }
  .zakres-toggle::after { transform: rotate(90deg); }
  .zakres-wylaczenia[open] .zakres-toggle::after { transform: rotate(0); }
  .zakres-wylaczenia[open] .zakres-tytul { border-bottom: 1px solid var(--line); }
  .zakres-wylaczenia .rejestr-nie { padding: 2px 0; }
  .zakres-wylaczenia .rejestr-nie > div {
    display: block; padding: 11px 0; border-top: 1px solid var(--line);
  }
  .zakres-wylaczenia .rejestr-nie > div:first-child { border-top: 0; }
  .zakres-wylaczenia .rejestr-nie dt,
  .zakres-wylaczenia .rejestr-nie dd { padding: 0; }
  .zakres-wylaczenia .rejestr-nie dt { font-size: .88rem; color: var(--ink); }
  .zakres-wylaczenia .rejestr-nie dd { margin-top: 3px; font-size: .82rem; line-height: 1.4; }
  .zakres-wylaczenia .rejestr-stopka {
    margin: 4px 0 0; padding: 13px 0 15px; font-size: .84rem;
  }

  .ramy-head { margin-bottom: 22px; }
  .ramy-head .lead { font-size: .98rem; line-height: 1.58; }
  .ramy-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .ramy-karta { min-height: 164px; padding: 16px 14px 18px; }
  .ramy-meta { margin-bottom: 16px; font-size: .61rem; gap: 7px; }
  .ramy-karta h3 { margin-bottom: 6px; font-size: .92rem; line-height: 1.3; }
  .ramy-karta p { font-size: .8rem; line-height: 1.43; }
  .ramy-wymogi {
    grid-template-columns: 1fr; gap: 18px; margin-top: 10px; padding: 24px 20px;
  }
  .ramy-wymogi h3 { font-size: 1.3rem; }
  .ramy-tagi { gap: 7px; }
  .ramy-tagi li { padding: 7px 9px; font-size: .74rem; }
  .ramy-cta { margin-top: 18px; }

  .brief-head { margin-bottom: 22px; }
  .brief-head .lead { font-size: .98rem; line-height: 1.55; }
  .brief-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .brief-karta { min-height: 150px; padding: 16px 14px 18px; }
  .brief-nr { margin-bottom: 18px; font-size: .62rem; }
  .brief-karta h3 { margin-bottom: 6px; font-size: .92rem; line-height: 1.3; }
  .brief-karta p { font-size: .8rem; line-height: 1.43; }
  .brief-uwaga {
    grid-template-columns: 2rem minmax(0, 1fr); gap: 12px;
    margin-top: 12px; padding: 17px 16px;
  }
  .brief-znak { width: 1.8rem; height: 1.8rem; font-size: .9rem; }
  .brief-uwaga h3 { font-size: .9rem; }
  .brief-uwaga p { font-size: .8rem; line-height: 1.45; }
  .brief-cta { margin-top: 18px; }

  .zabez-gora { gap: 30px; }
  .kx-dane > div { gap: 14px; }
  .kx-dane dd { font-size: .96rem; }
  .otoczenie { margin-top: 36px; padding-top: 28px; gap: 20px; }
  .stan-prac { margin-top: 28px; line-height: 1.62; }

  .z-foto .grid-2 { gap: 28px; }

  .foot-nav { column-gap: 14px; row-gap: 0; }
  .foot-nav a, .foot-contact a, .foot-meta a, .foot-privacy {
    display: inline-flex; align-items: center; min-height: 36px;
  }
  .foot-nav a { min-width: 44px; justify-content: center; }
  .foot-contact { column-gap: 8px; row-gap: 0; }
  .foot-meta { column-gap: 12px; row-gap: 0; }

  .pasek-mob { gap: 8px; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .pasek-mob a { min-height: 48px; }
}

@media (max-width: 360px) {
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .wrap {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
  .top .wrap { height: 64px; }
  .brand svg { height: 36px; }
  .nav.open { top: 64px; }
  h1 { font-size: 1.68rem; }
  h2 { font-size: 1.46rem; }

  .grid-3.katalog, .grid-3.kroki {
    margin-inline: -18px; padding-inline: 18px;
  }

  .kx-dane > div { display: grid; justify-content: initial; gap: 2px; }
  .kx-dane dd { text-align: left; }

  .ramy-siatka { grid-template-columns: 1fr; }
  .ramy-karta { min-height: 0; padding: 16px 16px 17px; }
  .ramy-meta { margin-bottom: 12px; }

  .brief-siatka { grid-template-columns: 1fr; }
  .brief-karta { min-height: 0; padding: 15px 16px 16px; }
  .brief-nr { margin-bottom: 11px; }

  .pasek-mob { gap: 6px; padding-inline: max(10px, env(safe-area-inset-left)); }
  .pasek-mob a { font-size: .78rem; letter-spacing: .02em; }
}