/* ============================================================
   Golden Key Africa — baza + komponenty
   Kierunek A „Kataster”. Referencja: plan/ux-design-system.md §5
   ============================================================ */

/* --- Reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, svg { max-width: 100%; display: block; }
/* width/height attributes są potrzebne dla rezerwacji miejsca (CLS), ale jako
   podpowiedź prezentacyjna ustawiają też wysokość i unieważniają aspect-ratio.
   height:auto oddaje sterowanie CSS-owi, zachowując rezerwację miejsca. */
img[width][height] { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-weight: 600; text-wrap: pretty; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); text-wrap: balance; max-width: 22ch; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); max-width: 30ch; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }

a { color: var(--brand); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

/* Pierścień fokusu zawsze dwuwarstwowy — jeden z kolorów zawsze >3:1
   względem podłoża, także na przyciskach kolorowych. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--bg);
}
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  background: var(--brand); color: var(--on-brand);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-sm);
}
.skip-link:focus { top: var(--s-4); }

/* --- Krój wyświetleniowy: przełącznik do oceny na stagingu ----- */
[data-display="kenyan-coffee"] {
  --font-display: 'Kenyan Coffee', 'Archivo', system-ui, sans-serif;
}
[data-display="kenyan-coffee"] .display,
[data-display="kenyan-coffee"] h1,
[data-display="kenyan-coffee"] h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;      /* krój jest już wąski — ujemny tracking go zlepia */
  word-spacing: .04em;
}
/* Kenyan Coffee ma duże x-height przy wąskiej szerokości, więc te same
   px czytają się większe. Ściągamy display i H1, żeby skala się zgadzała. */
[data-display="kenyan-coffee"] .hero__title { font-size: clamp(2.5rem, 1.8rem + 3.1vw, 4.5rem); }

/* --- Układ ---------------------------------------------------- */
.wrap { width: min(var(--w-content), 100%); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { width: min(var(--w-wide), 100%); }
.wrap--text { width: min(var(--w-text), 100%); }

.band { background: var(--bg-alt); }
.band--brand { background: var(--brand); color: var(--on-brand); }
.band--tint { background: var(--brand-tint); }

.section { padding-block: var(--pad-listing); }
.section--evidence { padding-block: var(--pad-evidence); }

.section__head { margin-bottom: var(--s-6); }
.section__head p { color: var(--muted); max-width: 62ch; margin-top: var(--s-3); }

.label {
  font-size: var(--fs-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; font-weight: 600; color: var(--muted);
}
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: 58ch; text-wrap: balance; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* --- Przyciski ------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: var(--s-3) var(--s-5);
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-weight: 600; font-size: var(--fs-body); text-decoration: none;
  cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--primary:hover { background: var(--brand-dark); }
.btn--secondary { background: transparent; color: var(--brand); border-color: var(--border-strong); }
.btn--secondary:hover { border-color: var(--brand); background: var(--brand-tint); }
/* Mosiądz nigdy nie przyjmuje białego tekstu (2,51:1). Zawsze --ink. */
.btn--brass { background: var(--accent); color: var(--ink); }
.btn--brass:hover { background: var(--accent-dark); color: var(--on-brand); }
.btn--onbrand { background: var(--on-brand); color: var(--brand-dark); }
.btn--onbrand:hover { background: var(--brand-tint); }
.btn--block { width: 100%; }

/* --- Badge / status ------------------------------------------- */
/* Status nigdy nie jest niesiony samym kolorem: każdy ma znak i słowo. */
.badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-label); letter-spacing: .03em; font-weight: 600;
  padding: 4px var(--s-3); border-radius: var(--r-sm); border: 1px solid transparent;
  text-transform: uppercase; white-space: nowrap;
}
.badge--ready    { background: var(--success); color: var(--on-brand); }
.badge--building { background: var(--warn); color: var(--ink); }
.badge--offplan  { background: var(--bg); color: var(--ink); border-color: var(--border-strong); }
.badge--reserved { background: var(--ink); color: var(--bg); }
.badge--roi      { background: var(--accent); color: var(--ink); }
.badge--render   { background: oklch(0.22 0.014 210 / .82); color: var(--bg); backdrop-filter: blur(2px); }

/* --- Topbar + nagłówek ---------------------------------------- */
.topbar {
  background: var(--brand-dark); color: var(--on-brand);
  font-size: var(--fs-sm); min-height: 32px;
  display: flex; align-items: center;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); width: min(var(--w-wide), 100%); }
.topbar a { color: var(--on-brand); }
.topbar__fact { display: flex; align-items: center; gap: var(--s-2); }
.topbar__tools { display: flex; align-items: center; gap: var(--s-4); }
.topbar__tools button {
  background: none; border: 0; color: var(--on-brand); cursor: pointer;
  font-size: var(--fs-sm); padding: 4px 6px; border-radius: var(--r-sm);
}
.topbar__tools [aria-pressed="true"] { text-decoration: underline; text-underline-offset: .2em; font-weight: 600; }

.masthead { background: var(--bg); border-bottom: 1px solid var(--border); }
.masthead .wrap {
  width: min(var(--w-wide), 100%);
  min-height: var(--header-h);
  display: flex; align-items: center; gap: var(--s-5);
}
.logo { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--ink); flex: 0 0 auto; }
.logo__mark { width: 34px; height: 34px; flex: 0 0 34px; }
.logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.logo__name { font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; }
.logo__sub { font-size: 0.6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.nav { display: flex; align-items: center; gap: var(--s-1); margin-inline-start: auto; }
.nav__link, .nav__toggle {
  background: none; border: 0; cursor: pointer;
  padding: var(--s-3) var(--s-3); border-radius: var(--r-sm);
  font-size: 0.9375rem; font-weight: 500; color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav__link:hover, .nav__toggle:hover { border-bottom-color: var(--accent); }
.nav__link[aria-current="page"] { border-bottom-color: var(--brand); font-weight: 600; }
.nav__toggle svg { transition: transform var(--dur-fast) var(--ease); }
.nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.header__tools { display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; }
.header__tel { font-weight: 600; text-decoration: none; color: var(--ink); white-space: nowrap; }
.header__tel:hover { color: var(--brand); }

.burger { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; background: none; border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; }

/* Panel regionów — otwierany kliknięciem, nie hoverem. */
.panel {
  position: absolute; z-index: 40; margin-top: 0;
  background: var(--bg); border: 1px solid var(--border); border-top: 0;
  width: min(680px, calc(100vw - 2 * var(--gutter)));
  padding: var(--s-6);
  display: none; gap: var(--s-6);
  box-shadow: 0 18px 40px -28px oklch(0.22 0.014 210 / .45);
}
.panel[data-open="true"] { display: grid; grid-template-columns: 1fr 200px; }
.panel__group + .panel__group { margin-top: var(--s-5); }
.panel__label { display: block; margin-bottom: var(--s-3); }
.panel__list { display: grid; gap: 2px; }
.panel__list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); text-decoration: none; color: var(--ink); border-radius: var(--r-sm);
}
.panel__list a:hover { background: var(--brand-tint); }
.panel__list .count { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.panel__map { align-self: start; }
.panel__map svg { width: 100%; height: auto; }

/* --- Hero ------------------------------------------------------ */
.hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.hero__grid { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--s-8); } }
.hero__title { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); max-width: 18ch; font-weight: 700; }
.hero__title em { font-style: normal; color: var(--brand); }
.hero__lead { margin-top: var(--s-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero__figure { position: relative; }
.hero__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.hero__caption {
  position: absolute; inset-inline: 0; bottom: 0;
  background: oklch(0.22 0.014 210 / .78); color: var(--bg);
  font-size: var(--fs-sm); padding: var(--s-3) var(--s-4);
}

/* --- Pasek zaufania -------------------------------------------- */
.trust { border-block: 1px solid var(--border); background: var(--bg-alt); }
.trust__grid {
  display: grid; gap: var(--s-4); padding-block: var(--pad-trust);
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.trust__item { display: flex; gap: var(--s-3); align-items: flex-start; }
.trust__item svg { flex: 0 0 22px; margin-top: 2px; color: var(--brand); }
.trust__item dt { font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--muted); font-weight: 600; }
.trust__item dd { margin: 2px 0 0; font-weight: 600; font-size: 0.9375rem; }
.trust__item dd small { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-sm); }
/* Pole niepotwierdzone renderuje się jako brak, nie jako miękka obietnica. */
.trust__item--pending dd { color: var(--muted); font-weight: 500; font-style: italic; }

/* --- Selektor trybu kupującego --------------------------------- */
.modes { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.mode {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-6); background: var(--bg); border: 1px solid var(--border);
  border-top: 3px solid var(--brand); border-radius: var(--r-md);
  text-decoration: none; color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.mode:hover { border-color: var(--border-strong); border-top-color: var(--brand-dark); background: var(--bg-alt); }
.mode--caution { border-top-color: var(--warn); }
.mode__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }
.mode__meta { font-size: var(--fs-sm); color: var(--muted); }
.mode__stat { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent-dark); }
.mode__note {
  margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--border);
  font-size: var(--fs-sm); display: flex; gap: var(--s-2); align-items: flex-start;
}
.mode--caution .mode__note { color: var(--accent-dark); font-weight: 500; }
.mode__cta { font-weight: 600; color: var(--brand); display: inline-flex; align-items: center; gap: 6px; }

/* --- Callout prawny -------------------------------------------- */
.answer { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .answer { grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; } }
.answer__statement { font-size: var(--fs-h3); line-height: 1.35; font-weight: 500; max-width: 34ch; }
.answer__statement strong { font-weight: 700; }
.facts { display: grid; gap: var(--s-3); }
.fact {
  display: grid; grid-template-columns: 34px 1fr; gap: var(--s-4);
  padding: var(--s-4); background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md);
}
.fact__num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-dark); font-size: 1.125rem; }
.fact h3 { font-size: 1.0625rem; line-height: 1.3; margin-bottom: 4px; }
.fact p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

/* --- Diagram escrow -------------------------------------------- */
/* Trzy węzły w ciągu ze strzałkami. Węzeł „nigdy” jest celowo poza ciągiem:
   w jednym rzędzie z resztą czytał się jak czwarty krok procesu. */
.flow { display: grid; gap: var(--s-3); align-items: stretch; }
@media (min-width: 860px) {
  .flow { grid-template-columns: 1fr 34px 1fr 34px 1fr; gap: 0; }
}
.flow__arrow { display: none; }
@media (min-width: 860px) {
  .flow__arrow { display: grid; place-content: center; color: var(--border-strong); }
}
.flow__node {
  position: relative; padding: var(--s-5);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.flow__node--highlight { border-color: var(--brand); border-width: 2px; background: var(--brand-tint); }
.flow__never {
  margin-top: var(--s-4);
  display: grid; gap: var(--s-3) var(--s-5); align-items: center;
  grid-template-columns: 48px 1fr;
  padding: var(--s-5);
  border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  background: var(--bg-alt);
}
@media (min-width: 860px) { .flow__never { grid-template-columns: 48px auto 1fr; } }
.flow__never svg { color: var(--danger); }
.flow__never .flow__who { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--muted); white-space: nowrap; }
.flow__step { font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--muted); font-weight: 600; }
.flow__who { font-weight: 600; font-size: 1.0625rem; }
.flow__what { font-size: var(--fs-sm); color: var(--muted); }
.flow__node--never .flow__who { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--muted); }
.flow__seal {
  margin-top: var(--s-5); padding: var(--s-4) var(--s-5); border-inline-start: 3px solid var(--accent);
  background: var(--bg-alt); font-weight: 500;
}

/* --- Karta nieruchomości --------------------------------------- */
/* Trzy kolumny to decyzja, nie efekt uboczny auto-fit: przy 1440 px auto-fit
   dawał cztery wąskie karty, w których cena łamała się na dwa wiersze. */
.cards { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease);
}
.card:hover, .card:focus-within { border-color: var(--border-strong); }
.card__media { position: relative; background: var(--bg-alt); overflow: hidden; }
.card__media img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; transition: transform var(--dur-base) var(--ease); }
.card:hover .card__media img { transform: scale(1.02); }
.card__badges { position: absolute; top: var(--s-3); left: var(--s-3); display: flex; gap: var(--s-2); flex-wrap: wrap; }
.card__render { position: absolute; right: var(--s-3); bottom: var(--s-3); }
/* Brak zdjęcia = jawny komunikat, nigdy pusty prostokąt. */
.card__noimg {
  aspect-ratio: 4 / 3; display: grid; place-content: center; gap: var(--s-2);
  text-align: center; color: var(--muted); background: var(--bg-alt); padding: var(--s-4);
}
.card__body { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); flex: 1 1 auto; }
.card__region { font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--muted); font-weight: 600; }
.card__title { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 600; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ''; position: absolute; inset: 0; }
.card:hover .card__title a { text-decoration: underline; }
.card__rule { border: 0; border-top: 1px solid var(--border); margin: 0; }
.card__price { font-size: var(--fs-price-card); font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums lining-nums; }
.card__pln { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.card__meta { font-size: var(--fs-sm); color: var(--muted); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.card__meta span::after { content: '·'; margin-inline-start: var(--s-2); color: var(--border-strong); }
.card__meta span:last-child::after { content: ''; }

/* Pasek tenure — obowiązkowy. Żaden konkurent go nie pokazuje. */
.tenure {
  display: flex; align-items: flex-start; gap: var(--s-2);
  font-size: var(--fs-sm); font-weight: 500;
  padding: var(--s-2) var(--s-3); background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: var(--r-sm);
}
.tenure svg { flex: 0 0 16px; margin-top: 3px; color: var(--brand); }
.tenure__left { color: var(--muted); font-weight: 400; }
/* Brak danych o władaniu = widoczny stan usterki, nie ukryte pole. */
.tenure--missing { background: var(--warn); border-color: var(--warn); color: var(--ink); font-weight: 600; }
.tenure--missing svg { color: var(--ink); }

.card__foot { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: auto; }
.card__save {
  position: relative; z-index: 2; margin-inline-start: auto;
  width: 44px; height: 44px; display: grid; place-content: center;
  background: none; border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; color: var(--muted);
}
.card__save:hover { border-color: var(--border-strong); color: var(--brand); }
.card__save[aria-pressed="true"] { color: var(--danger); border-color: var(--danger); }
.card__landwarn { font-size: var(--fs-sm); color: var(--accent-dark); font-weight: 500; position: relative; z-index: 2; }
.card--reserved .card__media img { filter: saturate(.55); }

/* --- Proces zakupu --------------------------------------------- */
.steps { display: grid; gap: 0; border-top: 1px solid var(--border); }
.step {
  display: grid; gap: var(--s-2) var(--s-5); padding: var(--s-5) 0;
  border-bottom: 1px solid var(--border);
  grid-template-columns: 48px 1fr;
}
@media (min-width: 900px) {
  .step { grid-template-columns: 48px minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; }
}
.step__n { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted); font-size: 1.125rem; }
.step__title { font-weight: 600; font-size: 1.0625rem; }
.step__desc { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; max-width: 60ch; grid-column: 2 / -1; }
@media (min-width: 900px) { .step__desc { grid-column: 2 / -1; } }
.step__who, .step__time { font-size: var(--fs-sm); }
.step__who { color: var(--ink); font-weight: 500; }
.step__time { color: var(--muted); font-variant-numeric: tabular-nums; }
.step--key { background: var(--brand-tint); padding-inline: var(--s-4); }
.step--key .step__title::after {
  content: 'kluczowy krok'; display: inline-block; margin-inline-start: var(--s-3);
  font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink); background: var(--accent); padding: 2px 8px; border-radius: var(--r-sm); vertical-align: middle;
}

/* --- Kalkulator kosztów ---------------------------------------- */
.calc { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .calc { grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; } }
.calc__field { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.calc__field label { font-weight: 600; font-size: 0.9375rem; }
.calc__input { display: flex; gap: var(--s-3); }
.calc__input input, .calc__input select {
  min-height: 48px; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg);
  font-variant-numeric: tabular-nums;
}
.calc__input input { flex: 1 1 auto; min-width: 0; }
.calc__hint { font-size: var(--fs-sm); color: var(--muted); }
.calc__out { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5); }
.calc__row { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--border); }
.calc__row:last-of-type { border-bottom: 0; }
.calc__row dt { font-size: 0.9375rem; }
.calc__row dt small { display: block; color: var(--muted); font-size: var(--fs-sm); }
.calc__row dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.calc__total { border-top: 2px solid var(--ink); margin-top: var(--s-3); padding-top: var(--s-4); display: flex; justify-content: space-between; gap: var(--s-4); align-items: baseline; }
.calc__total dt { font-weight: 700; font-size: 1.0625rem; }
.calc__total dd { margin: 0; font-size: var(--fs-price); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: var(--tr-price); }
.calc__source { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--muted); border-inline-start: 3px solid var(--border-strong); padding-inline-start: var(--s-4); }

/* --- Ryzyka ---------------------------------------------------- */
.risks { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.risk { padding: var(--s-5); background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); display: flex; flex-direction: column; gap: var(--s-3); }
.risk__mech { font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--danger); font-weight: 600; }
.risk h3 { font-size: 1.125rem; line-height: 1.3; }
.risk p { font-size: var(--fs-sm); color: var(--muted); }
.risk__guard { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.risk__guard strong { color: var(--brand); }

/* --- Regiony --------------------------------------------------- */
.regions { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .regions { grid-template-columns: 340px 1fr; gap: var(--s-8); align-items: center; } }
.regions__list { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.region {
  padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg); text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: var(--s-2);
}
.region:hover { border-color: var(--border-strong); background: var(--bg-alt); }
.region__name { font-weight: 600; font-size: 1.0625rem; display: flex; justify-content: space-between; gap: var(--s-3); align-items: baseline; }
.region__count { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 400; }
.region__pitch { font-size: var(--fs-sm); color: var(--muted); }
.region__where { font-size: var(--fs-sm); color: var(--ink); }
.map svg { width: 100%; height: auto; }
.map__region { fill: var(--bg-alt); stroke: var(--border-strong); stroke-width: 1.5; transition: fill var(--dur-fast) var(--ease); }
.map__region:hover, .map__region:focus-visible { fill: var(--brand-tint); }
.map__dot { fill: var(--brand); }
.map__label { font-size: 11px; fill: var(--muted); font-weight: 600; }

/* --- Doradcy --------------------------------------------------- */
.people { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.person { display: flex; gap: var(--s-4); padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); }
.person__photo { flex: 0 0 88px; width: 88px; height: 88px; object-fit: cover; background: var(--bg-alt); border-radius: var(--r-sm); }
.person__role { font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--muted); font-weight: 600; }
.person__name { font-weight: 700; font-size: 1.0625rem; margin-top: 2px; }
.person__lines { margin-top: var(--s-3); display: grid; gap: 4px; font-size: var(--fs-sm); }
.person__lines a { font-weight: 600; }

/* --- Dowody / opinie ------------------------------------------- */
.proofs { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.proof { padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); display: flex; flex-direction: column; gap: var(--s-3); }
.proof blockquote { font-family: var(--font-doc); font-size: 1.0625rem; line-height: 1.55; }
.proof__who { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.proof__who strong { display: block; }
.proof__deal { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- FAQ ------------------------------------------------------- */
.faq { border-top: 1px solid var(--border); max-width: 74ch; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s-5) var(--s-8) var(--s-5) 0;
  font-weight: 600; font-size: 1.0625rem; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: var(--s-3); top: 50%;
  width: 12px; height: 12px; margin-top: -8px;
  border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(45deg); transition: transform var(--dur-fast) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq__body { padding-bottom: var(--s-5); color: var(--muted); max-width: 66ch; }
.faq__body p + p { margin-top: var(--s-3); }

/* --- Formularz ------------------------------------------------- */
.form { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .form { grid-template-columns: 1fr 1fr; } }
.form__full { grid-column: 1 / -1; }
.field { display: grid; gap: var(--s-2); }
.field label { font-weight: 600; font-size: 0.9375rem; }
.field .req { color: var(--danger); }
.field input, .field select, .field textarea {
  min-height: 48px; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg); width: 100%;
}
.field textarea { min-height: 128px; resize: vertical; }
.field__hint { font-size: var(--fs-sm); color: var(--muted); }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-3); align-items: start; font-size: var(--fs-sm); color: var(--muted); }
.consent input { width: 22px; height: 22px; min-height: 0; margin-top: 2px; }

/* --- Stopka ---------------------------------------------------- */
.footer { background: var(--brand-dark); color: var(--bg); padding-block: var(--s-8) var(--s-6); margin-top: var(--s-8); }
.footer a { color: var(--bg); }
.footer__grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.footer h3 { font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: oklch(0.80 0.02 210); font-weight: 600; margin-bottom: var(--s-3); }
.footer ul { display: grid; gap: var(--s-2); font-size: 0.9375rem; }
.footer__legal { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid oklch(0.45 0.04 210); font-size: var(--fs-sm); color: oklch(0.82 0.02 210); display: grid; gap: var(--s-3); }
.footer__reg { font-variant-numeric: tabular-nums; }
.footer__disclaimer { max-width: 90ch; }

/* --- Przyklejony pasek CTA (mobile) ----------------------------- */
.stickybar { display: none; }
@media (max-width: 767px) {
  .stickybar {
    display: flex; gap: var(--s-3); align-items: center;
    position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
    background: var(--bg); border-top: 1px solid var(--border);
    padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
    box-shadow: var(--shadow-sticky);
  }
  .stickybar .btn { flex: 1 1 auto; min-height: 48px; }
  body { padding-bottom: 84px; }
}

/* --- Zagęszczanie nagłówka przed przejściem na hamburger --------- */
/* Pełna nawigacja ma zmieścić się do 1024 px. Numer telefonu jest
   pierwszy do oddania — jest też w stopce i w pasku sticky. */
@media (max-width: 1179px) {
  .header__tel { display: none; }
}
@media (max-width: 1279px) {
  .nav__link, .nav__toggle { padding-inline: var(--s-2); font-size: 0.9rem; }
  .masthead .wrap { gap: var(--s-4); }
}

/* --- Nawigacja mobilna ------------------------------------------ */
@media (max-width: 1023px) {
  .nav, .header__tools .btn { display: none; }
  .burger { display: inline-flex; }
  .header__tools { margin-inline-start: auto; }
  .masthead .wrap { gap: var(--s-3); }
}

/* Na telefonie przełączniki żyją w panelu menu, gdzie mają pełne cele
   dotykowe. W topbarze zostaje sam komunikat zaufania. */
@media (max-width: 767px) {
  .topbar__tools { display: none; }
  .topbar { font-size: 0.8125rem; }
  .topbar .wrap { justify-content: center; text-align: center; }
}
.topbar__tools button, .topbar__tools a { min-height: 24px; display: inline-flex; align-items: center; }
.mobilenav { position: fixed; inset: 0; z-index: 60; background: var(--bg); overflow-y: auto; padding: var(--s-4) var(--gutter) var(--s-8); display: none; }
.mobilenav[data-open="true"] { display: block; }
.mobilenav__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); margin-bottom: var(--s-4); }
.mobilenav__close { width: 48px; height: 48px; display: grid; place-content: center; background: none; border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; }
.mobilenav details { border-bottom: 1px solid var(--border); }
.mobilenav summary { padding: var(--s-4) 0; font-weight: 600; font-size: 1.125rem; cursor: pointer; list-style: none; }
.mobilenav summary::-webkit-details-marker { display: none; }
.mobilenav__sub { padding-bottom: var(--s-4); display: grid; gap: var(--s-2); }
.mobilenav__sub a { padding: var(--s-2) 0; text-decoration: none; color: var(--ink); }
.mobilenav > nav > a { display: block; padding: var(--s-4) 0; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 1.125rem; text-decoration: none; color: var(--ink); }
.mobilenav__foot { margin-top: var(--s-6); display: grid; gap: var(--s-4); }
.mobilenav__switch { display: flex; gap: var(--s-4); }

/* --- Mobile: karty i wstęgi ------------------------------------- */
@media (max-width: 639px) {
  .card__media img { aspect-ratio: 3 / 2; }
  .cards { grid-template-columns: 1fr; }
}