/* tastemaker · macrostructure: Editorial Index · mood: elegant · page: landing (Matustyl, Poznań)
 * arc: hook(H2 split, light) -> solution(10-card offer carousel) -> problem+proof(scrubbed attic diagram) -> price factors(F6 grid + CTA cell) -> how(F4) -> objections(FAQ) -> close(C2)
 * nav: N4 · hero: H2 · footer: Ft1 · knobs: hero=split/left-bias/photo-bleed-right; index=4 rows/hairline; steps=F4/3/svg+svg+photo
 * palette: elegant/light, hand-tuned from generate_palette.py --mood elegant --seed 3 toward neutral greige · contrast: pass (check_contrast.py --matrix)
 * critique: ShowTell 4 · Phil 4 · Hier 5 · Spec 4 · Restr 5 · Var 5 · ColorHarm 5 · MoodTone 5 · Type 5 · Spatial 4 · Pref 4
 * type: Brygada 1918 (Polish revival serif) 400/500/600 + Schibsted Grotesk 400/500, named scale tokens */

/* AUDYT #01: fonty hostowane lokalnie (woff2, podzbiory latin + latin-ext z polskimi znakami), font-display: swap.
   Zastępują arkusz z fonts.googleapis.com: brak przesyłania IP odwiedzających do Google i brak zewnętrznego zasobu blokującego renderowanie. */
/* latin-ext */
@font-face {
  font-family: "Brygada 1918";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/brygada-1918-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;
}
/* latin */
@font-face {
  font-family: "Brygada 1918";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/brygada-1918-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;
}
/* latin-ext */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-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;
}
/* latin */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-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;
}

:root {
  /* palette (style-lock.md) */
  --text: #1f1b17;
  --text-muted: #6b625a;
  --bg: #faf8f4;
  --bg-glass: rgba(250, 248, 244, 0.94);
  --surface: #f1ece4;
  --primary: #6e5440;
  --primary-press: #58432f;
  --on-primary: #ffffff;
  --accent: #8a6a3e;
  --border: #e2dbd0;
  --rule: #cfc5b7;

  /* kolor zabudowy na diagramie poddasza */
  --decor-cashmere: #d8cdbf;

  /* type */
  --font-display: "Brygada 1918", Georgia, "Times New Roman", serif;
  --font-body: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* type scale */
  --text-caption: 0.8125rem;  /* 13px: notes, footer meta */
  --text-ui: 0.875rem;        /* 14px: nav, legend, phone */
  --text-body: 1rem;          /* 16px */
  --text-lede: 1.0625rem;     /* 17px */
  --text-h4: 1.375rem;        /* 22px: step titles, FAQ questions, numerals */
  --text-brand: 1.625rem;
  --text-h3: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
  --text-h2: clamp(1.875rem, 1.3rem + 1.9vw, 2.875rem);
  --text-display: clamp(2.375rem, 1.4rem + 3.1vw, 3.75rem);
  --text-wordmark: clamp(2.75rem, 1.6rem + 4vw, 5rem);
  --text-phone: clamp(3rem, 1.6rem + 6vw, 6.25rem);

  /* spacing (4px base) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px; --space-40: 160px;

  /* shape */
  --radius: 2px;
  --control-h: 52px;
  --target-min: 44px;

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --duration-press: 120ms;
  --duration-hover: 220ms;
  --duration-color: 150ms;
  --duration-reveal: 500ms;

  /* surfaces */
  --image-outline: oklch(0 0 0 / 0.1);

  /* AUDYT #36: jawna skala warstw zamiast przypadkowych wartości z-index */
  --z-callbar: 40;
  --z-menu: 50;
  --z-skip: 100;

  /* AUDYT #12: wysokość mobilnego paska kontaktu, używana też jako dolny odstęp strony */
  --callbar-h: calc(var(--target-min) + 2 * var(--space-3));

  --header-h: 70px;
  --wrap: 1200px;
  /* % (not vw) so the hero edge lines up with .wrap even when a classic scrollbar takes width */
  --gutter: max(var(--space-6), calc((100% - var(--wrap)) / 2));
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
/* odstęp przy przejściu do sekcji: wysokość przyklejonego menu + zapas, żeby nagłówek sekcji nie chował się pod menu */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--space-4)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; font-style: normal; margin: 0; overflow-wrap: anywhere; min-width: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* AUDYT #16: skip link chowany transformacją zamiast magicznej wartości top: -100px */
.skip {
  position: absolute; inset-inline-start: var(--space-4); top: var(--space-4); z-index: var(--z-skip);
  background: var(--text); color: var(--bg); padding: var(--space-3) var(--space-4);
  transform: translateY(calc(-100% - var(--space-8)));
}
.skip:focus { transform: none; }

.wrap { width: min(100% - 2 * var(--space-6), var(--wrap)); margin-inline: auto; }
/* tekst tylko dla czytników ekranu (np. informacja o otwarciu w nowej karcie) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--control-h); padding: 0 var(--space-8);
  border-radius: var(--radius);
  font: 500 var(--text-body)/1 var(--font-body); text-decoration: none; white-space: nowrap;
  transition-property: transform, background-color;
  transition-duration: var(--duration-press), var(--duration-color);
  transition-timing-function: var(--ease-out);
}
.btn:active { transform: scale(0.96); }
.btn--primary { background: var(--primary); color: var(--on-primary); }
@media (hover: hover) { .btn--primary:hover { background: var(--primary-press); } }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--control-h);
  font-weight: 500; font-size: var(--text-body); text-decoration: none; white-space: nowrap;
}
.link-arrow::after {
  content: ""; width: 28px; height: 1px; background: currentColor;
  transition: transform var(--duration-hover) var(--ease-out); transform-origin: left;
}
@media (hover: hover) { .link-arrow:hover::after { transform: scaleX(1.5); } }

/* ---------- masthead: jedna linia ---------- */
/* ZMIANA: logo, „Meble na wymiar · Poznań”, menu i telefon w jednym wierszu */
/* z-index na całym nagłówku: jego animacja wejścia tworzy kontekst warstw, bez tego rozwinięte menu chowałoby się pod sekcją hero */
/* ZMIANA: menu przyklejone do góry ekranu przy przewijaniu; tło i linia na całą szerokość, treść w szerokości .wrap */
.masthead {
  position: sticky; top: 0; z-index: var(--z-menu);
  background: var(--bg-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.masthead__bar { display: flex; align-items: center; gap: var(--space-8); padding-block: var(--space-3); width: min(100% - 2 * var(--space-6), var(--wrap)); margin-inline: auto; }
/* ZMIANA: logo nie może się zwężać pod swoją treść, inaczej na wąskich ekranach nachodzą na nie ikony */
.masthead__brand { display: flex; align-items: center; gap: var(--space-6); flex: none; }
.masthead__meta {
  padding-inline-start: var(--space-6); border-inline-start: 1px solid var(--rule);
  font-size: var(--text-caption); line-height: 1.3; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); white-space: nowrap;
}
.masthead__nav { margin-inline-start: auto; }
.masthead__links { list-style: none; margin: 0; padding: 0; display: flex; gap: 0 var(--space-6); }
.masthead__links a, .masthead__panel a {
  display: inline-flex; align-items: center; min-height: var(--target-min);
  font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; color: var(--text-muted); white-space: nowrap;
  transition: color var(--duration-color) var(--ease-out);
}
@media (hover: hover) { .masthead__links a:hover, .masthead__panel a:hover { color: var(--text); } }
/* AUDYT #38: usunięto tabular-nums z numeru, który się nie zmienia (cyfry tabelaryczne służą wartościom zmiennym) */
.masthead__phone {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min);
  font-size: var(--text-ui); font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: color var(--duration-color) var(--ease-out);
}
.masthead__phone svg { flex: none; color: var(--accent); }
.masthead__phone--end { margin-inline-start: auto; }
@media (hover: hover) { .masthead__phone:hover { color: var(--primary); } }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; min-height: var(--target-min); flex: none; }
.brand__outer { fill: var(--text); }
.brand__inner { fill: var(--accent); }
.brand__word { font: 600 var(--text-brand)/1 var(--font-display); letter-spacing: 0; }
.brand__word--lg { font-size: var(--text-wordmark); font-weight: 400; letter-spacing: -0.02em; }

/* menu rozwijane (wąskie ekrany); na szerokich ukryte */
.masthead__menu { display: none; }
.masthead__menu summary {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); padding: 0 var(--space-4);
  list-style: none; cursor: pointer; border: 1px solid var(--rule); border-radius: var(--radius);
  font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text);
  transition: background-color var(--duration-color) var(--ease-out);
}
.masthead__menu summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .masthead__menu summary:hover { background: var(--surface); } }
.masthead__menu .icon-close, .masthead__menu[open] .icon-open { display: none; }
.masthead__menu[open] .icon-close { display: block; }
.masthead__panel {
  position: absolute; inset-inline: 0; top: 100%; z-index: var(--z-menu);
  background: var(--bg); border-bottom: 1px solid var(--rule);
}
.masthead__panel ul { list-style: none; margin: 0 auto; padding: var(--space-2) 0; width: min(100% - 2 * var(--space-6), var(--wrap)); }
.masthead__panel li + li { border-top: 1px solid var(--border); }
.masthead__panel a { display: flex; min-height: 52px; color: var(--text); }

/* ---------- hero: H2 split, photo bleeds right ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; gap: var(--space-16);
  padding-block: var(--space-16);
  padding-inline: var(--gutter) 0;
}
.hero__title {
  font-size: var(--text-display);
  line-height: 1.06; letter-spacing: -0.02em;
}
.hero__lede { margin-top: var(--space-6); max-width: 30rem; font-size: var(--text-lede); color: var(--text-muted); }
.hero__actions { margin-top: var(--space-8); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-8); }
/* AUDYT #17: svh nie skacze przy chowaniu paska adresu w mobilnych przeglądarkach; vh zostaje jako fallback */
/* ZMIANA: odnośnik do profilu na Facebooku pod przyciskami w hero */
.hero__social {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); margin-top: var(--space-4);
  font-size: var(--text-ui); color: var(--text-muted); text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 4px;
  transition: color var(--duration-color) var(--ease-out);
}
.hero__social svg { flex: none; color: var(--accent); }
@media (hover: hover) { .hero__social:hover { color: var(--text); } }
.hero__media { overflow: hidden; height: min(72vh, 640px); height: min(72svh, 640px); min-height: 420px; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.hero__media, .step__visual { outline: 1px solid var(--image-outline); outline-offset: -1px; }

/* AUDYT #04: wejście hero w CSS, bez JS. Zdjęcie i nagłówek (kandydaci LCP) animują tylko transform,
   nie opacity, więc przeglądarka zalicza ich odmalowanie od razu i LCP nie czeka na animację. */
@keyframes hero-fade { from { opacity: 0; } }
@keyframes hero-rise { from { transform: translateY(20px); } }
@keyframes hero-rise-fade { from { opacity: 0; transform: translateY(14px); } }
@keyframes hero-slide { from { transform: translateX(40px); } }
@keyframes hero-settle { from { transform: scale(1.06); } }
@media (prefers-reduced-motion: no-preference) {
  .masthead { animation: hero-fade 600ms var(--ease-out) both; }
  .hero__title { animation: hero-rise 900ms var(--ease-out) 100ms both; }
  .hero__lede { animation: hero-rise-fade 700ms var(--ease-out) 300ms both; }
  .hero__actions { animation: hero-rise-fade 700ms var(--ease-out) 400ms both; }
  .hero__media { animation: hero-slide 1100ms var(--ease-out) 150ms both; }
  .hero__media img { animation: hero-settle 1600ms var(--ease-out) 150ms both; }
}

/* ---------- shared section type ---------- */
.section-title { font-size: var(--text-h2); line-height: 1.1; letter-spacing: -0.015em; max-width: 20ch; }
.lede { font-size: var(--text-lede); color: var(--text-muted); max-width: 34rem; }

/* AUDYT #02: odsłanianie przy przewijaniu bez GSAP. Klasy dodaje js/script.js tylko elementom poniżej
   pierwszego ekranu, więc bez JS (lub przy błędzie skryptu) cała treść jest widoczna. */
.reveal {
  transition:
    opacity var(--duration-reveal) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--duration-reveal) var(--ease-out) var(--reveal-delay, 0ms);
}
.reveal.is-pending { opacity: 0; transform: translateY(14px); }

/* ---------- offer: carousel ---------- */
/* ZMIANA: numerowana lista oferty zastąpiona karuzelą 10 kart (zdjęcie + tytuł + opis) */
/* ZMIANA: jednakowy odstęp każdej sekcji: 64 px na komputerze, 48 px na telefonie */
.offer { padding: var(--space-16) 0; }
.offer__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6) var(--space-8); }
.offer__head .lede { margin-top: var(--space-4); }

.carousel { margin-top: var(--space-8); }
/* tor sięga do prawej krawędzi ekranu; lewa krawędź pierwszej karty trzyma linię .wrap, następna karta wystaje jako wskazówka */
.carousel__track {
  --slide-w: clamp(16rem, 26vw, 23rem);
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--slide-w); gap: var(--space-8);
  padding-inline: var(--gutter);
  padding-block-end: var(--space-2);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline-offset: -2px; }
@media (prefers-reduced-motion: no-preference) { .carousel__track { scroll-behavior: smooth; } }
.slide { scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; }
.slide__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); outline: 1px solid var(--image-outline); outline-offset: -1px; }
.slide__img img { width: 100%; height: 100%; object-fit: cover; transition: scale 280ms var(--ease-out); }
@media (hover: hover) { .slide:hover .slide__img img { scale: 1.03; } }
/* ZMIANA: numer i tytuł karty w jednej linii */
.slide__title { display: flex; align-items: baseline; gap: var(--space-3); margin-top: var(--space-4); font-size: var(--text-h4); font-weight: 500; line-height: 1.25; }
/* AUDYT SPÓJNOŚCI: numer w karcie tej samej wielkości co numer kroku */
.slide__num { flex: none; font: 400 var(--text-h4)/1 var(--font-display); color: var(--accent); font-variant-numeric: lining-nums; }
.slide p { margin-top: var(--space-2); color: var(--text-muted); max-width: 34ch; }

.carousel__controls { display: flex; align-items: center; gap: var(--space-3); }
.carousel__controls[hidden], .carousel__progress[hidden] { display: none; }
.carousel__count { min-width: 9ch; text-align: end; margin-inline-end: var(--space-3); font-size: var(--text-ui); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.carousel__btn {
  display: grid; place-items: center; width: var(--control-h); height: var(--control-h); padding: 0;
  background: transparent; color: var(--text); border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer;
  transition-property: transform, background-color, opacity;
  transition-duration: var(--duration-press), var(--duration-color), var(--duration-color);
  transition-timing-function: var(--ease-out);
}
@media (hover: hover) { .carousel__btn:hover { background: var(--surface); } }
.carousel__btn:active { transform: scale(0.96); }
/* aria-disabled zamiast disabled: przycisk zostaje w fokusie klawiatury, gdy karuzela dojdzie do końca */
.carousel__btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.carousel__btn[aria-disabled="true"]:active { transform: none; }
.carousel__progress { position: relative; height: 1px; margin-top: var(--space-8); background: var(--rule); overflow: hidden; }
.carousel__progress span { position: absolute; inset: 0; background: var(--text); transform-origin: left center; transform: scaleX(var(--progress, 0)); }
.offer__more { margin-top: var(--space-8); color: var(--text-muted); }
.offer__more a { color: var(--text); text-decoration-thickness: from-font; text-underline-offset: 4px; }

/* ---------- problem diagram ---------- */
.problem { padding: var(--space-16) 0; background: var(--surface); }
.problem__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: center; }
.problem__copy .lede { margin-top: var(--space-6); }
.legend { list-style: none; padding: 0; margin: var(--space-8) 0 0; display: grid; gap: var(--space-3); font-size: var(--text-ui); color: var(--text-muted); }
.legend li { display: flex; align-items: center; gap: var(--space-3); }
.legend__swatch { width: 28px; height: 16px; flex: none; }
.legend__swatch--std { border: 1.5px dashed var(--text); }
.legend__swatch--fit { background: var(--decor-cashmere); border: 1px solid var(--accent); }
.diagram svg { width: 100%; height: auto; overflow: visible; }
.roof { fill: url(#hatch); }
.hatch-line { stroke: var(--rule); stroke-width: 1.25; }
.struct { stroke: var(--text); stroke-width: 2; stroke-linecap: square; }
.niche-edge { fill: none; stroke: var(--rule); stroke-width: 1.5; }
.fit__body { fill: var(--decor-cashmere); stroke: var(--accent); stroke-width: 1.5; }
.fit__door { stroke: var(--accent); stroke-width: 1; }
.fit__handle { stroke: var(--primary); stroke-width: 2; stroke-linecap: round; }
/* AUDYT #02: stan końcowy animacji jest stanem domyślnym (bez JS i przy ograniczeniu ruchu) */
.std { opacity: 0.35; }
.std__body { fill: none; stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 6 5; }
.std__clash { fill: var(--text); opacity: 0.1; }
.dim { font: 400 15px/1 var(--font-body); fill: var(--text-muted); letter-spacing: 0.01em; }
.dim--warn { fill: var(--text); font-weight: 500; }
.dim--note { font-size: 15px; }
.dim-line { stroke: var(--text-muted); stroke-width: 0.75; }
.dim-tick { stroke: var(--text-muted); stroke-width: 1; }

/* ---------- pricing: od czego zależy cena ---------- */
/* ZMIANA: zastępuje sekcję z próbkami kolorów płyty */
.pricing { padding: var(--space-16) 0; }
/* AUDYT SPÓJNOŚCI: ten sam układ nagłówka co w pozostałych sekcjach: tytuł, a pod nim opis */
.pricing__head .lede { margin-top: var(--space-4); }
.factors {
  list-style: none; padding: 0; margin: var(--space-8) 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-8);
}
.factor { display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-8) 0; border-top: 1px solid var(--rule); }
.factor__icon { color: var(--accent); }
.factor h3 { margin-top: var(--space-4); font-size: var(--text-h4); font-weight: 500; line-height: 1.25; }
.factor p { margin-top: var(--space-2); color: var(--text-muted); max-width: 34ch; }
.factor--cta { padding-inline: var(--space-6); padding-block-end: var(--space-6); background: var(--surface); border-top-color: var(--accent); }
.factor--cta h3 { margin-top: var(--space-6); }
.factor--cta .btn { margin-top: var(--space-6); }

/* ---------- steps ---------- */
.steps { padding: var(--space-16) 0; }
.steps__list { list-style: none; padding: 0; margin: var(--space-8) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.step { display: flex; flex-direction: column; }
.step__visual { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: var(--space-6); background: var(--surface); }
.step__visual img { width: 100%; height: 100%; object-fit: cover; }
.step__visual--paper {
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 20px 20px;
  display: grid; place-items: center; padding: var(--space-4);
}
.step__visual--paper svg { width: 100%; height: 100%; }
.draw { fill: none; stroke: var(--text); stroke-width: 1.5; }
.draw--thin { stroke-width: 0.75; }
.wall { fill: none; stroke: var(--text); stroke-width: 6; stroke-linecap: square; }
.module { fill: var(--bg); stroke: var(--text); stroke-width: 1.25; }
/* ZMIANA: numer i nazwa kroku w jednej linii */
/* AUDYT SPÓJNOŚCI: grubość 500 jak w pozostałych tytułach kart */
.step__title { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--text-h4); font-weight: 500; line-height: 1.25; }
.step__num { flex: none; font: 400 var(--text-h4)/1 var(--font-display); color: var(--accent); font-variant-numeric: lining-nums; }
.step p { margin-top: var(--space-3); color: var(--text-muted); max-width: 34ch; }

/* ---------- faq ---------- */
.faq { padding: var(--space-16) 0; }
/* ZMIANA: trzy kolumny: nagłówek | pytania | zdjęcie */
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: var(--space-8) var(--space-12); align-items: start; }
.faq__grid .section-title { max-width: 14ch; }
.faq__photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); outline: 1px solid var(--image-outline); outline-offset: -1px; }
.faq__photo img { width: 100%; height: 100%; object-fit: cover; }
.faq__list { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  min-height: 68px; padding: var(--space-4) 0;
  font: 500 var(--text-h4)/1.35 var(--font-display);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; font: 400 var(--text-h4)/1 var(--font-body); color: var(--accent);
  transition: transform var(--duration-hover) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 var(--space-6); color: var(--text-muted); max-width: 52ch; }

/* ---------- close ---------- */
.close { background: var(--surface); padding: var(--space-24) 0; }
.close__title { font-size: var(--text-h2); line-height: 1.1; letter-spacing: -0.015em; max-width: 20ch; }
/* ZMIANA: kontakt i stopka w jednej sekcji, trzy kolumny obok siebie */
.contact { background: var(--surface); padding: var(--space-16) 0 var(--space-6); }
.contact__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
  gap: var(--space-8) var(--space-12); align-items: start;
}
.contact__title { font-size: var(--text-h3); line-height: 1.15; letter-spacing: -0.01em; max-width: 18ch; }
.contact__details { font-style: normal; display: grid; gap: var(--space-1); }
.contact__phone {
  justify-self: start; margin-bottom: var(--space-2);
  font: 400 var(--text-h2)/1.1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: lining-nums;
  text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid var(--accent); padding-bottom: var(--space-2);
  transition: color var(--duration-color) var(--ease-out);
}
@media (hover: hover) { .contact__phone:hover { color: var(--primary); } }
/* AUDYT #18: każdy wiersz kontaktu ma wysokość celu dotykowego 44px */
.contact__line { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--target-min); color: var(--text-muted); }
.contact__line svg { flex: none; color: var(--accent); }
a.contact__line { color: var(--text); text-decoration-thickness: from-font; text-underline-offset: 4px; text-decoration-skip-ink: auto; overflow-wrap: anywhere; }
.contact__brand { display: grid; gap: var(--space-3); }
.contact__brand .brand__word { font-size: var(--text-h3); }
.contact__brand p { color: var(--text-muted); font-size: var(--text-ui); max-width: 28ch; }
/* ZMIANA: podpis autora strony w dolnym pasku */
.contact__credit a { color: var(--text-muted); text-decoration-thickness: from-font; text-underline-offset: 4px; }
@media (hover: hover) { .contact__credit a:hover { color: var(--text); } }
.contact__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6);
  margin-top: var(--space-12); padding-top: var(--space-4); border-top: 1px solid var(--rule);
  font-size: var(--text-caption); color: var(--text-muted);
}
.contact__meta a { color: var(--text-muted); text-decoration-thickness: from-font; text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: var(--target-min); }

/* ---------- Ft1 footer ---------- */
.footer { padding: var(--space-16) 0 var(--space-8); }
.footer__inner { display: grid; gap: var(--space-12); }
.footer__brand { display: grid; gap: var(--space-3); }
.footer__brand p { color: var(--text-muted); font-size: var(--text-ui); }
/* AUDYT #31: dane kontaktowe (NAP) w stopce, spójne z resztą strony i danymi strukturalnymi */
.footer__nap { font-style: normal; display: flex; flex-wrap: wrap; gap: 0 var(--space-6); font-size: var(--text-ui); color: var(--text-muted); }
.footer__nap a { color: var(--text); text-decoration-thickness: from-font; text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: var(--target-min); overflow-wrap: anywhere; }
.footer__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--rule); font-size: var(--text-caption); color: var(--text-muted); }
.footer__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }
.footer__meta a { color: var(--text-muted); text-decoration-thickness: from-font; text-underline-offset: 4px; text-decoration-skip-ink: auto; display: inline-flex; align-items: center; min-height: var(--target-min); margin-block: calc(-1 * var(--space-3)); }

/* AUDYT #12: mobilny pasek szybkiego kontaktu (ukryty na szerszych ekranach) */
.callbar { display: none; }

.error__code { margin-bottom: var(--space-4); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }

/* AUDYT #10: typografia podstrony z polityką prywatności (długi tekst: ograniczona szerokość wiersza) */
.legal { padding: var(--space-16) 0 var(--space-24); }
.legal__inner { max-width: 44rem; }
.legal__meta { margin-top: var(--space-4); font-size: var(--text-ui); color: var(--text-muted); }
.legal h2 { margin-top: var(--space-12); font-size: var(--text-h4); font-weight: 600; line-height: 1.25; }
.legal p, .legal ul { margin-top: var(--space-4); }
.legal ul { padding-inline-start: var(--space-6); }
.legal li + li { margin-top: var(--space-2); }
.legal a:not(.link-arrow) { text-decoration-thickness: from-font; text-underline-offset: 4px; overflow-wrap: anywhere; }
.legal__back { margin-top: var(--space-12); }

/* ---------- responsive ---------- */
/* ZMIANA: nagłówek w jednej linii na każdej szerokości; elementy chowają się stopniowo, gdy brakuje miejsca */
@media (max-width: 69.99rem) {
  .masthead__meta { display: none; }
}
@media (max-width: 55.99rem) {
  .masthead__nav { display: none; }
  .masthead__phone { margin-inline-start: auto; }
  .masthead__menu { display: block; }
}
@media (max-width: 39.99rem) {
  .masthead__bar { gap: var(--space-3); }
  /* na telefonie numer jest w pasku kontaktu na dole, więc w nagłówku zostaje sama ikona (nazwa dla czytników zostaje) */
  .masthead__phone { justify-content: center; width: var(--target-min); border: 1px solid var(--rule); border-radius: var(--radius); }
  .masthead__phone-text, .masthead__menu summary span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .masthead__menu summary { justify-content: center; width: var(--target-min); padding: 0; }
}
/* ZMIANA: najmniejsze telefony (np. 280–360 px): mniejsze logo i odstępy, żeby logo, telefon i menu zmieściły się w linii */
@media (max-width: 24.99rem) {
  .masthead__bar { gap: var(--space-2); width: min(100% - 2 * var(--space-4), var(--wrap)); }
  .brand { gap: var(--space-2); }
  .brand__mark { width: 18px; height: 18px; }
  .masthead .brand__word { font-size: 1.375rem; }
}


@media (max-width: 59.99rem) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); padding-block: var(--space-16); padding-inline: 0; }
  .hero__copy { width: min(100% - 2 * var(--space-6), var(--wrap)); margin-inline: auto; }
  .hero__media { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .problem__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .faq__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .faq__grid .section-title { grid-column: 1 / -1; max-width: 24ch; }
  .contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .contact__title { grid-column: 1 / -1; max-width: 24ch; }
  .factors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); max-width: 36rem; }
}
@media (max-width: 39.99rem) {
  .offer, .steps, .faq { padding: var(--space-12) 0; }
  .pricing { padding: var(--space-12) 0; }
  .factors { grid-template-columns: minmax(0, 1fr); }
  .problem, .close { padding: var(--space-12) 0; }
  .contact { padding-top: var(--space-12); }
  .hero { padding-block: var(--space-12); }
  /* the diagram scales down to ~0.5x on phones; keep its labels above 12px rendered */
  .diagram .dim { font-size: 24px; }
  .carousel__track { --slide-w: 78vw; gap: var(--space-4); }
  .carousel { margin-top: var(--space-8); }
  .footer__meta, .contact__meta { flex-direction: column; align-items: flex-start; }
  .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .faq__photo { aspect-ratio: 4 / 3; }
  .contact__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }

  /* AUDYT #12: pasek kontaktu przyklejony do dołu, z marginesem na obszar bezpieczny (notch / pasek gestów) */
  body { padding-block-end: calc(var(--callbar-h) + env(safe-area-inset-bottom, 0px)); }
  .callbar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-callbar);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3);
    padding: var(--space-3) var(--space-6) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--bg-glass);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--rule);
    transition: transform var(--duration-hover) var(--ease-out);
  }
  /* ukryty pasek dostaje też atrybut inert (js/script.js), więc znika z kolejności tabulacji i z drzewa dostępności */
  .callbar.is-hidden { transform: translateY(100%); }
  .callbar .btn { min-height: var(--target-min); padding: 0 var(--space-4); width: 100%; }
  .btn--quiet { background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--rule); }
  @media (hover: hover) { .btn--quiet:hover { background: var(--surface); } }
}

/* AUDYT #19: w trybie wysokiego kontrastu (Windows) próbki kolorów zachowują barwy, a przyciski mają ramkę */
@media (forced-colors: active) {
  .legend__swatch--fit, .fit__body { forced-color-adjust: none; }
  .btn { border: 1px solid ButtonText; }
}

/* AUDYT #20: style wydruku: bez nawigacji i animacji, z widocznymi numerami i adresami */
@media print {
  .skip, .masthead__nav, .masthead__menu, .hero__actions, .callbar, .link-arrow { display: none; }
  .masthead { position: static; background: none; }
  body { background: white; color: black; padding: 0; }
  .problem, .close, .contact { background: none; }
  .reveal.is-pending { opacity: 1; transform: none; }
  .hero { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .hero__media { height: auto; aspect-ratio: 3 / 2; }
  .slide, .step, .faq details, .factor { break-inside: avoid; }
  .carousel__track { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; padding: 0; }
  .carousel__controls, .carousel__progress { display: none; }
  a[href^="tel:"]::after, a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}