/* =========================================================================
   i-SRC — KARTA TECHNICZNA
   Koncepcja: strona główna jako arkusz dokumentacji warsztatowej.
   Papier, tusz, czerwone znaczniki wymiarowe, jawna siatka, numerowane
   sekcje. Język rysunku konstrukcyjnego — tego samego, który klient
   trzymał na starej stronie przez lata.
   ========================================================================= */

:root {
    --papier:   #F7F6F2;
    --papier-2: #EFEDE7;
    --tusz:     #16150F;   /* 15,9:1 na papierze */
    --tusz-2:   #55524A;   /* 6,6:1 na papierze */
    --linia:    rgba(22, 21, 15, 0.16);
    --linia-2:  rgba(22, 21, 15, 0.34);
    --czerwien: #C2281C;   /* 5,4:1 na papierze */
    --czerwien-2: #9C1F15;

    --f-tytul: 'Cabinet Grotesk', 'Archivo', 'Segoe UI', system-ui, sans-serif;
    --f-tekst: 'General Sans', 'Segoe UI', system-ui, sans-serif;
    --f-mono:  'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;

    --rampa: clamp(1.25rem, 4vw, 3.5rem);      /* margines arkusza */
    --naglowek-h: 64px;
}

/* ------------------------------------------------------------------ baza */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--naglowek-h) + 1rem); }

body.karta {
    margin: 0;
    background: var(--papier);
    color: var(--tusz);
    font-family: var(--f-tekst);
    font-size: 1.0625rem;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--czerwien); outline-offset: 3px; }

.sr-tylko {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.pomin {
    position: absolute; left: 1rem; top: -80px; z-index: 300;
    padding: 0.75rem 1.25rem; background: var(--tusz); color: var(--papier);
    font-weight: 600; text-decoration: none; transition: top 200ms ease;
}
.pomin:focus { top: 1rem; }

/* --------------------------------------------------------------- ARKUSZ
   Rama rysunku: dwie pionowe linie przez całą wysokość strony.
   To jest sygnatura projektu — treść żyje między nimi. */
.arkusz {
    position: relative;
    max-width: 100rem;
    margin-inline: auto;
}
.arkusz::before,
.arkusz::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 1px;
    background: var(--linia);
    pointer-events: none;
}
.arkusz::before { left: var(--rampa); }
.arkusz::after  { right: var(--rampa); }
@media (max-width: 700px) {
    .arkusz::before, .arkusz::after { display: none; }
}

.wnetrze {
    padding-inline: calc(var(--rampa) + clamp(1rem, 3vw, 2.5rem));
}
@media (max-width: 700px) {
    .wnetrze { padding-inline: 1.25rem; }
}

/* ------------------------------------------------------- LINIA SEKCJI
   Każda sekcja zaczyna się od linii z numerem w ramce i podpisem.
   Krzyżyki pomiarowe na przecięciach linii z ramą arkusza. */
.linia-sekcji {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-top: 1px solid var(--linia-2);
    padding-top: 1rem;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.linia-sekcji::before,
.linia-sekcji::after {
    content: '+';
    position: absolute;
    top: -0.72em;
    font-family: var(--f-mono);
    font-size: 0.875rem;
    color: var(--linia-2);
    background: var(--papier);
    line-height: 1;
    padding-inline: 1px;
}
.linia-sekcji::before { left: calc(-1 * clamp(1rem, 3vw, 2.5rem) - 0.32em); }
.linia-sekcji::after  { right: calc(-1 * clamp(1rem, 3vw, 2.5rem) - 0.32em); }
@media (max-width: 700px) {
    .linia-sekcji::before, .linia-sekcji::after { display: none; }
}

.linia-sekcji__nr {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--papier);
    background: var(--tusz);
    padding: 0.3em 0.55em;
}
.linia-sekcji__nazwa {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tusz);
}
.linia-sekcji__nota {
    margin-left: auto;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--tusz-2);
    text-align: right;
}
@media (max-width: 560px) { .linia-sekcji__nota { display: none; } }

.sekcja-karty { padding-block: 0 clamp(3.5rem, 7vw, 6.5rem); }

/* ------------------------------------------------------------ NAGŁÓWEK
   Tabliczka rysunkowa: logo, oznaczenie arkusza, telefon. */
.tabliczka {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: var(--papier);
    border-bottom: 1px solid var(--linia-2);
}
.tabliczka__rzad {
    display: flex;
    align-items: stretch;
    min-height: var(--naglowek-h);
    max-width: 100rem;
    margin-inline: auto;
    padding-inline: var(--rampa);
}

.tabliczka__logo {
    display: flex;
    align-items: center;
    padding-right: clamp(1rem, 2.5vw, 2rem);
    border-right: 1px solid var(--linia);
    text-decoration: none;
}
/* Logo klienta jest białe — na papierze odwracamy do tuszu. */
.tabliczka__logo img { height: 24px; width: auto; }

.tabliczka__menu {
    display: none;
    align-items: center;
    gap: clamp(1.25rem, 2.6vw, 2.5rem);
    padding-inline: clamp(1rem, 2.5vw, 2rem);
}
@media (min-width: 980px) { .tabliczka__menu { display: flex; } }
.tabliczka__menu a {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tusz-2);
    text-decoration: none;
    transition: color 150ms ease;
}
.tabliczka__menu a:hover,
.tabliczka__menu a.aktywny { color: var(--czerwien); }

.tabliczka__prawa {
    margin-left: auto;
    display: flex;
    align-items: stretch;
}
.tabliczka__rev {
    display: none;
    align-items: center;
    padding-inline: clamp(1rem, 2.5vw, 2rem);
    border-left: 1px solid var(--linia);
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    color: var(--tusz-2);
}
@media (min-width: 1200px) { .tabliczka__rev { display: flex; } }

.tabliczka__tel {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-inline: clamp(1rem, 2.5vw, 2rem);
    border-left: 1px solid var(--linia);
    font-family: var(--f-mono);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--tusz);
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
}
.tabliczka__tel svg { color: var(--czerwien); transition: color 150ms ease; }
.tabliczka__tel:hover { background: var(--tusz); color: var(--papier); }
.tabliczka__tel:hover svg { color: var(--papier); }
@media (max-width: 500px) { .tabliczka__tel span { display: none; } .tabliczka__tel { padding-inline: 1rem; } }

.tabliczka__burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 56px;
    padding: 0 1.1rem;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--linia);
    cursor: pointer;
}
@media (min-width: 980px) { .tabliczka__burger { display: none; } }
.tabliczka__burger span { display: block; height: 1.5px; background: var(--tusz); transition: transform 200ms ease, opacity 150ms ease; }
.tabliczka__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.tabliczka__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tabliczka__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Menu na telefonie — arkusz zsuwa się z góry. */
.menu-arkusz {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: var(--papier);
    transform: translateY(-102%);
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.menu-arkusz.otwarte { transform: translateY(0); }
@media (min-width: 980px) { .menu-arkusz { display: none; } }

.menu-arkusz__gora {
    display: flex; align-items: center; justify-content: space-between;
    min-height: var(--naglowek-h);
    padding-inline: var(--rampa);
    border-bottom: 1px solid var(--linia-2);
}
.menu-arkusz__gora img { height: 24px; width: auto; }
.menu-arkusz__zamknij {
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--linia-2); border-radius: 50%;
    color: var(--tusz); cursor: pointer;
}
.menu-arkusz ul { margin: 0; padding: 1rem var(--rampa); list-style: none; counter-reset: poz; }
.menu-arkusz li { border-bottom: 1px solid var(--linia); counter-increment: poz; }
.menu-arkusz a {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 1.1rem 0;
    font-family: var(--f-tytul);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--tusz);
    text-decoration: none;
}
.menu-arkusz a::before {
    content: counter(poz, decimal-leading-zero);
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    color: var(--czerwien);
}
.menu-arkusz__stopka { margin-top: auto; padding: 1.5rem var(--rampa) 3rem; display: grid; gap: 0.4rem; }
.menu-arkusz__stopka a {
    display: inline-flex; align-items: center; gap: 0.6rem;
    min-height: 44px;
    font-family: var(--f-mono); font-size: 0.9375rem;
    color: var(--tusz); text-decoration: none;
}
body.menu-otwarte { overflow: hidden; }

/* ---------------------------------------------------------------- HERO
   Blok tytułowy arkusza: wielki tytuł po lewej, FIG. 01 po prawej,
   pod spodem konsola wyszukiwania i pasek danych. */
.naglowek-arkusza {
    padding-top: calc(var(--naglowek-h) + clamp(2.5rem, 6vw, 5rem));
}

.hero-karta { position: relative; }

.hero-karta__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-bottom: clamp(1.75rem, 4vw, 3rem);
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tusz-2);
}
.hero-karta__meta .krecha { width: 34px; height: 1px; background: var(--czerwien); }
.hero-karta__meta strong { color: var(--czerwien); font-weight: 500; }

.hero-karta__rzad {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}
@media (min-width: 1000px) {
    .hero-karta__rzad { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.hero-karta__tytul {
    margin: 0 0 clamp(1.9rem, 3.5vw, 2.75rem);
    font-family: var(--f-tytul);
    font-weight: 800;
    font-size: clamp(2.9rem, 1.4rem + 6.4vw, 6.75rem);
    line-height: 0.94;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
.hero-karta__tytul em {
    font-style: normal;
    color: var(--czerwien);
    position: relative;
    white-space: nowrap;
}
/* Znacznik wymiarowy pod akcentem — strzałki jak na rysunku. */
.hero-karta__tytul em .wymiar {
    position: absolute;
    left: 0; right: 0;
    bottom: -0.19em;
    /* SVG to element zastępowany: bez jawnej szerokości liczy ją z proporcji
       viewBox i linia kończyła się po 200 px zamiast pod całym akcentem. */
    width: 100%;
    height: 0.15em;
    pointer-events: none;
}
.hero-karta__tytul em .wymiar line { stroke: var(--czerwien); stroke-width: 1.4; }

.hero-karta__lead {
    margin: 0 0 2.25rem;
    max-width: 34rem;
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    line-height: 1.6;
    color: var(--tusz-2);
}
.hero-karta__lead strong { color: var(--tusz); font-weight: 600; }

/* Konsola wyszukiwania — pole jak wiersz poleceń przyrządu. */
.konsola { max-width: 36rem; }
.konsola__etykieta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tusz);
}
.konsola__etykieta::after { content: ''; flex: 1; height: 1px; background: var(--linia); }

.konsola__pole { position: relative; display: flex; align-items: center; }
.konsola__znak {
    position: absolute;
    left: 1.1rem;
    font-family: var(--f-mono);
    font-weight: 500;
    color: var(--czerwien);
    pointer-events: none;
}
.konsola__input {
    width: 100%;
    min-height: 60px;
    padding: 0.9rem 3.4rem 0.9rem 2.6rem;
    background: #FFFFFF;
    border: 1px solid var(--linia-2);
    border-radius: 0;
    font-family: var(--f-mono);
    font-size: 1rem;
    color: var(--tusz);
    transition: border-color 150ms ease, box-shadow 150ms ease;
    -webkit-appearance: none;
    appearance: none;
}
.konsola__input::placeholder { color: #8B887E; }
.konsola__input:focus {
    outline: none;
    border-color: var(--tusz);
    box-shadow: 4px 4px 0 0 rgba(194, 40, 28, 0.9);
}
.konsola__input::-webkit-search-cancel-button { display: none; }

.konsola__czysc {
    position: absolute;
    right: 0.5rem;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; cursor: pointer;
    color: var(--tusz-2);
}
.konsola__czysc:hover { color: var(--czerwien); }

.konsola__stopka {
    margin: 0.75rem 0 0;
    font-size: 0.9375rem;
    color: var(--tusz-2);
}
.konsola__stopka strong { font-family: var(--f-mono); color: var(--tusz); font-weight: 500; }
.konsola__stopka a { color: var(--czerwien); display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 1024px) { .konsola__stopka a { min-height: 0; display: inline; } }

/* FIG. 01 — zdjęcie klienta w ramce z narożnikami pomiarowymi. */
.figura { position: relative; }
.figura__ramka {
    position: relative;
    border: 1px solid var(--linia-2);
    padding: 0.6rem;
    background: #FFFFFF;
}
/* Narożniki jak na skanie dokumentacji. */
.figura__ramka::before,
.figura__ramka::after,
.figura__rog::before,
.figura__rog::after {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    border-color: var(--tusz);
    border-style: solid;
}
.figura__ramka::before { top: -5px; left: -5px; border-width: 2px 0 0 2px; }
.figura__ramka::after  { top: -5px; right: -5px; border-width: 2px 2px 0 0; }
.figura__rog::before   { bottom: -5px; left: -5px; border-width: 0 0 2px 2px; }
.figura__rog::after    { bottom: -5px; right: -5px; border-width: 0 2px 2px 0; }

.figura img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero-karta .figura img { aspect-ratio: 3 / 2; }

.figura__podpis {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.7rem;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    color: var(--tusz-2);
}
.figura__podpis strong { color: var(--tusz); font-weight: 500; }

/* Czerwona adnotacja wymiarowa przy figurze. */
.figura__adnotacja {
    position: absolute;
    top: 1.4rem;
    right: -0.6rem;
    display: none;
    align-items: center;
    gap: 0.5rem;
    transform: rotate(90deg);
    transform-origin: right top;
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    color: var(--czerwien);
    white-space: nowrap;
}
.figura__adnotacja::before { content: ''; width: 30px; height: 1px; background: var(--czerwien); }
/* Adnotacja wyłączona: nachodziła na ramę arkusza przy 1440 px. */

/* Pasek danych — panel przyrządu z pionowymi liniami. */
.dane-pasek {
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
    border-top: 1px solid var(--linia-2);
    border-bottom: 1px solid var(--linia-2);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .dane-pasek { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.dana {
    padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.75rem);
    border-right: 1px solid var(--linia);
}
.dana:last-child { border-right: 0; }
@media (max-width: 899px) { .dana:nth-child(2n) { border-right: 0; } .dana:nth-child(-n+2) { border-bottom: 1px solid var(--linia); } }

.dana__wartosc {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-family: var(--f-tytul);
    font-weight: 800;
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem);
    line-height: 1;
    letter-spacing: -0.02em;
}
.dana__wartosc .gwiazdka-mala { color: var(--czerwien); font-size: 0.6em; }
.dana__opis {
    margin-top: 0.5rem;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tusz-2);
}

/* --------------------------------------------------- WYNIKI WYSZUKIWANIA */
.wyniki-plansza { padding-top: 0.5rem; }
.wyniki-plansza .szukarka__linie:last-of-type { margin-bottom: 0; }
.hero-karta.sekcja-karty { padding-bottom: clamp(2.25rem, 4.5vw, 4rem); }
.szukarka__stan {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tusz-2);
    margin-bottom: 1rem;
}
.szukarka__linie { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.szukarka__linia {
    min-height: 44px;
    padding: 0.4rem 1.1rem;
    background: transparent;
    border: 1px solid var(--linia-2);
    border-radius: 0;
    font-family: var(--f-mono);
    font-size: 0.8125rem;
    color: var(--tusz);
    cursor: pointer;
    transition: background 130ms ease, color 130ms ease;
}
.szukarka__linia:hover { border-color: var(--tusz); }
.szukarka__linia.aktywna { background: var(--tusz); border-color: var(--tusz); color: var(--papier); }

.szukarka__siatka {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-top: 1px solid var(--linia-2);
    border-left: 1px solid var(--linia-2);
}
@media (min-width: 720px)  { .szukarka__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .szukarka__siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.karta-modelu {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1.5rem;
    background: transparent;
    border-right: 1px solid var(--linia-2);
    border-bottom: 1px solid var(--linia-2);
    transition: background 150ms ease;
}
.karta-modelu:hover { background: #FFFFFF; }
.karta-modelu__linia {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--czerwien);
}
.karta-modelu__nazwa { margin: 0; font-family: var(--f-tytul); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.01em; }
.karta-modelu__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; font-family: var(--f-mono); font-size: 0.75rem; color: var(--tusz-2); }
.karta-modelu__opis { margin: 0; font-size: 0.9375rem; color: var(--tusz-2); }
.karta-modelu__naprawy { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; }
.karta-modelu__naprawy li { position: relative; padding-left: 1.1rem; font-size: 0.9375rem; color: var(--tusz-2); }
.karta-modelu__naprawy li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 8px; height: 1px; background: var(--czerwien); }
.karta-modelu__numery { margin: 0; font-family: var(--f-mono); font-size: 0.6875rem; color: var(--tusz-2); overflow-wrap: anywhere; }
.karta-modelu__link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-top: 0.6rem;
    border-top: 1px solid var(--linia);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--czerwien);
    text-decoration: none;
}
.karta-modelu__link:hover { text-decoration: underline; text-underline-offset: 4px; }

.szukarka__wiecej { margin: 1.25rem 0 0; font-size: 0.9375rem; color: var(--tusz-2); }
.szukarka__pusto {
    padding: 1.75rem;
    border: 1px dashed var(--linia-2);
    color: var(--tusz-2);
}
.szukarka__pusto strong { color: var(--tusz); }
.szukarka__pusto a { color: var(--czerwien); }

/* ------------------------------------------------------------ 01 ZAKRES
   Sprzęt jako tabela specyfikacji — wspólne linie, nie karty. */
.zakres__tabela {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border: 1px solid var(--linia-2);
}
@media (min-width: 720px)  { .zakres__tabela { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .zakres__tabela { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.zakres__poz {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.4rem 1.25rem;
    padding: clamp(1.25rem, 2.5vw, 1.9rem);
    border-bottom: 1px solid var(--linia);
    border-right: 1px solid var(--linia);
    text-decoration: none;
    color: inherit;
    transition: background 150ms ease;
}
.zakres__poz:hover { background: #FFFFFF; }
.zakres__poz:hover .zakres__strzalka { color: var(--czerwien); transform: translateX(3px); }

.zakres__ikona { grid-row: span 2; color: var(--tusz); }
.zakres__nazwa {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-family: var(--f-tytul);
    font-weight: 700;
    font-size: 1.4375rem;
    letter-spacing: -0.01em;
}
.zakres__indeks { font-family: var(--f-mono); font-size: 0.625rem; font-weight: 400; color: var(--czerwien); }
.zakres__opis { font-size: 0.9375rem; color: var(--tusz-2); }
.zakres__strzalka {
    position: absolute;
    right: 1.25rem; top: 1.25rem;
    color: var(--tusz-2);
    transition: color 150ms ease, transform 150ms ease;
}

/* ------------------------------------------------------------ 02 METODA
   Dwie kolumny rozdzielone linią z krzyżem — arkusz porównawczy. */
.metoda { position: relative; }
.metoda__rzad {
    position: relative;
    display: grid;
    gap: 0;
    border: 1px solid var(--linia-2);
    background: #FFFFFF;
}
@media (min-width: 860px) { .metoda__rzad { grid-template-columns: 1fr 1fr; } }

.metoda__kol { padding: clamp(1.5rem, 3.5vw, 2.75rem); }
.metoda__kol--obca { color: var(--tusz-2); background: var(--papier-2); }
@media (min-width: 860px) { .metoda__kol--obca { border-right: 1px solid var(--linia-2); } }
@media (max-width: 859px) { .metoda__kol--obca { border-bottom: 1px solid var(--linia-2); } }

.metoda__naglowek {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.metoda__kol--nasza .metoda__naglowek { color: var(--czerwien); }
.metoda__naglowek::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: 0.3; }

.metoda__lista { margin: 0; padding: 0; list-style: none; }
.metoda__lista > li {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 1rem;
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--linia);
    font-size: 0.9688rem;
    line-height: 1.5;
}
.metoda__lista > li:last-child { border-bottom: 0; }
.metoda__lista dt {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-top: 0.25em;
    color: inherit;
    opacity: 0.75;
}
.metoda__lista dd { margin: 0; }
.metoda__kol--nasza .metoda__lista dd strong { color: var(--czerwien); }

.metoda__werdykt {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--linia-2);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--f-tytul);
    font-weight: 700;
    font-size: 1.25rem;
}
.metoda__werdykt small { font-family: var(--f-mono); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }

/* --------------------------------------------------------- 03 PRACOWNIA */
.pracownia__siatka { display: grid; gap: clamp(1rem, 2.5vw, 2rem); }
@media (min-width: 900px) { .pracownia__siatka { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.pracownia__kolumna { display: grid; gap: clamp(1rem, 2.5vw, 2rem); align-content: start; }

.pracownia__fakty {
    margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
    display: grid;
    gap: 0;
    border-top: 1px solid var(--linia-2);
}
@media (min-width: 860px) { .pracownia__fakty { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fakt-poz { padding: 1.4rem 0; border-bottom: 1px solid var(--linia); }
@media (min-width: 860px) {
    .fakt-poz { padding: 1.6rem 1.5rem 0.5rem; border-bottom: 0; border-right: 1px solid var(--linia); }
    .fakt-poz:first-child { padding-left: 0; }
    .fakt-poz:last-child { border-right: 0; }
}
.fakt-poz h3 {
    margin: 0 0 0.4rem;
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    font-family: var(--f-tytul);
    font-weight: 700;
    font-size: 1.1875rem;
}
.fakt-poz h3::before {
    content: attr(data-nr);
    font-family: var(--f-mono);
    font-size: 0.625rem;
    font-weight: 400;
    color: var(--czerwien);
}
.fakt-poz p { margin: 0; font-size: 0.9375rem; color: var(--tusz-2); }

/* ------------------------------------------------------------ 04 OPINIE */
.opinie-karta__rzad {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}
@media (min-width: 900px) { .opinie-karta__rzad { grid-template-columns: auto minmax(0, 1fr); } }

.stempel {
    display: inline-grid;
    justify-items: center;
    gap: 0.5rem;
    padding: clamp(1.5rem, 3vw, 2.25rem) clamp(2rem, 4vw, 3rem);
    border: 2px solid var(--tusz);
    box-shadow: 6px 6px 0 0 var(--czerwien);
    background: #FFFFFF;
}
.stempel__liczba {
    font-family: var(--f-tytul);
    font-weight: 800;
    font-size: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
}
.stempel__gwiazdki { display: flex; gap: 3px; }
.stempel__gwiazdki svg { fill: var(--czerwien); }
.stempel__gwiazdki svg.pusta { fill: rgba(22, 21, 15, 0.18); }
.stempel__podpis { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tusz-2); }

.opinie-karta__tekst h2 { margin: 0 0 0.75rem; }
.opinie-karta__tekst p { margin: 0 0 1.25rem; color: var(--tusz-2); max-width: 32rem; }

/* --------------------------------------------------------- 05 PRZYJĘCIE */
.przyjecie__rzad { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 1000px) { .przyjecie__rzad { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

/* Formularz jako karta przyjęcia sprzętu. */
.karta-przyjecia {
    background: #FFFFFF;
    border: 1px solid var(--linia-2);
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.karta-przyjecia__naglowek {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--linia-2);
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.karta-przyjecia__naglowek span:last-child { color: var(--tusz-2); }

.formularz { display: grid; gap: 1.25rem; }
.formularz__rzad { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .formularz__rzad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.formularz__pole { display: grid; gap: 0.45rem; }
.formularz__pole label {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tusz);
}
.formularz__pole label span { color: var(--czerwien); }
.formularz__pole input,
.formularz__pole textarea {
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 0.9rem;
    background: var(--papier);
    border: 1px solid var(--linia-2);
    border-radius: 0;
    font-family: var(--f-tekst);
    font-size: 1rem;
    color: var(--tusz);
    transition: border-color 130ms ease, box-shadow 130ms ease;
}
.formularz__pole textarea { min-height: 120px; resize: vertical; }
.formularz__pole input:focus,
.formularz__pole textarea:focus {
    outline: none;
    border-color: var(--tusz);
    box-shadow: 3px 3px 0 0 rgba(194, 40, 28, 0.85);
}

.formularz__pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formularz__zgoda { display: flex; gap: 0.8rem; align-items: flex-start; }
.formularz__zgoda input {
    width: 22px; height: 22px;
    margin-top: 10px;
    padding: 10px;
    box-sizing: content-box;
    margin-inline: -10px;
    flex-shrink: 0;
    accent-color: var(--czerwien);
}
.formularz__zgoda label { font-size: 0.875rem; color: var(--tusz-2); line-height: 1.5; }
.formularz__zgoda a { color: var(--czerwien); }

.formularz button[type="submit"] { justify-self: start; }
.formularz button[disabled] { opacity: 0.55; cursor: wait; }
.formularz__komunikat { margin: 0; font-size: 0.9375rem; font-weight: 500; }
.formularz__komunikat.udane { color: #1B6B38; }
.formularz__komunikat.nieudane { color: var(--czerwien); }

/* Dane kontaktowe jako tabliczka. */
.przyjecie__dane { display: grid; gap: 1.75rem; align-content: start; }
.przyjecie__blok { border-top: 1px solid var(--linia-2); padding-top: 1rem; }
.przyjecie__blok h3 {
    margin: 0 0 0.75rem;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tusz-2);
}
.przyjecie__blok address { font-style: normal; }

.tel-duzy {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--f-tytul);
    font-weight: 800;
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
    letter-spacing: -0.01em;
    color: var(--tusz);
    text-decoration: none;
}
.tel-duzy svg { color: var(--czerwien); }
.tel-duzy:hover { color: var(--czerwien); }
.tel-duzy + .tel-etykieta { display: block; margin-top: 0.15rem; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tusz-2); }

.godziny-tabela { width: 100%; border-collapse: collapse; }
.godziny-tabela th, .godziny-tabela td { padding: 0.55rem 0; text-align: left; font-weight: 400; font-size: 0.9375rem; border-bottom: 1px solid var(--linia); }
.godziny-tabela td { text-align: right; font-family: var(--f-mono); font-size: 0.8125rem; }
.godziny-tabela tr.dzis th, .godziny-tabela tr.dzis td { color: var(--czerwien); font-weight: 500; }

.mail-lista { display: grid; gap: 0.35rem; }
.mail-lista a {
    display: inline-flex; align-items: center; gap: 0.55rem;
    min-height: 44px;
    font-family: var(--f-mono); font-size: 0.9375rem;
    color: var(--tusz); text-decoration: none;
    overflow-wrap: anywhere;
}
.mail-lista a:hover { color: var(--czerwien); }
.mail-lista small { color: var(--tusz-2); font-family: var(--f-tekst); }

/* --------------------------------------------------------------- STOPKA */
.stopka-arkusza { border-top: 1px solid var(--linia-2); }
.stopka-arkusza__rzad {
    display: grid;
    gap: 1.5rem;
    padding-block: 2rem 2.5rem;
}
@media (min-width: 860px) {
    .stopka-arkusza__rzad { grid-template-columns: auto 1fr auto; align-items: center; }
}
.stopka-arkusza__logo img { height: 22px; width: auto; }
.stopka-arkusza__nota {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--tusz-2);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
}
.stopka-arkusza__nota a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; }
.stopka-arkusza__nota a:hover { color: var(--czerwien); }
@media (min-width: 1024px) { .stopka-arkusza__nota a { min-height: 0; } }

/* ------------------------------------------------------- przycisk bazowy */
.przycisk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 52px;
    padding: 0 1.75rem;
    background: var(--tusz);
    color: var(--papier);
    border: 1px solid var(--tusz);
    border-radius: 0;
    font-family: var(--f-tekst);
    font-size: 0.9688rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.przycisk:hover { background: var(--czerwien); border-color: var(--czerwien); box-shadow: 4px 4px 0 0 rgba(22,21,15,0.9); transform: translate(-2px, -2px); }
.przycisk:active { transform: translate(0, 0); box-shadow: none; }

.przycisk--obrys { background: transparent; color: var(--tusz); border-color: var(--linia-2); }
.przycisk--obrys:hover { background: var(--tusz); color: var(--papier); border-color: var(--tusz); box-shadow: 4px 4px 0 0 rgba(194,40,28,0.9); }

/* --------------------------------------------------------- pasek cookies */
.ciasteczka {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 95;
    padding: 1rem var(--rampa);
    padding-right: 92px;
    background: var(--tusz);
    color: rgba(247, 246, 242, 0.85);
    font-size: 0.875rem;
    transform: translateY(100%);
    transition: transform 300ms ease;
}
.ciasteczka.widoczny { transform: translateY(0); }
.ciasteczka__rzad {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem;
    width: 100%; max-width: 100rem; margin-inline: auto;
    pointer-events: none;
}
.ciasteczka__rzad > * { pointer-events: auto; }
.ciasteczka p { margin: 0; flex: 1 1 260px; }
.ciasteczka a { color: #FFB3A8; }
.ciasteczka .przycisk { min-height: 44px; padding: 0 1.25rem; background: var(--papier); color: var(--tusz); border-color: var(--papier); }
.ciasteczka .przycisk:hover { background: var(--czerwien); color: #fff; border-color: var(--czerwien); box-shadow: none; transform: none; }

/* ------------------------------------------------- telefon na telefonie */
.tel-plywajacy {
    position: fixed;
    right: 1rem; bottom: 1rem;
    z-index: 96;
    width: 58px; height: 58px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--czerwien);
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 10px 26px -8px rgba(22, 21, 15, 0.45);
    opacity: 0; visibility: hidden;
    transform: translateY(10px);
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
}
.tel-plywajacy.widoczny { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 980px) { .tel-plywajacy { display: none; } }

/* ------------------------------------------------------------------ ruch */
.wejscie { opacity: 0; transform: translateY(14px); transition: opacity 400ms ease, transform 400ms ease; }
.wejscie.widoczne { opacity: 1; transform: none; }
.no-js .wejscie { opacity: 1; transform: none; }

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


/* ---------------------------------------------- pola dotyku na telefonie
   Odnośniki w tekście mają wysokość linii (~20 px). Poniżej 980 px każdy
   z nich dostaje pełne pole dotyku — zmierzone, nie założone. */
@media (max-width: 979px) {
    .formularz__zgoda label a,
    .ciasteczka a,
    .przyjecie__blok address ~ p a,
    .przyjecie__blok p a,
    .stopka-arkusza__logo,
    .konsola__stopka a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    .stopka-arkusza__logo { min-width: 44px; }
}