/* Arkusz wygenerowany z inline'owych stylów pozostałych po prerenderze Reacta.
   Treść każdej reguły jest identyczna z tym, co wcześniej siedziało w atrybucie
   style="", więc wygląd stron się nie zmienia - zmienia się tylko to, że styl ma
   teraz nazwę i jedno miejsce, w którym się go edytuje. */

/* Model pudełkowy. Reguła stała wcześniej wyłącznie w home.css, czyli obowiązywała
   jedynie na index.html - pozostałe 24 strony liczyły szerokość razem z paddingiem.
   Widać to było na stopce: .sf-inner ma width:100% i padding 24px, więc przy
   kontenerze 485 px wychodziła na 533 px i prawy margines znikał pod krawędzią
   ekranu (body ma overflow-x: clip, więc nadmiar był ucinany bez paska przewijania).
   Ten sam mechanizm dotyczył .sb-nut, .sb-pad i .faq-toggle. */
*, *::before, *::after { box-sizing: border-box; }

.tbl-cell { border: 1px solid rgb(226, 226, 224); text-align: center; padding: 0px; height: 44px; }
.tbl-cell-is-filled { border: 1px solid rgb(226, 226, 224); text-align: center; padding: 0px; height: 44px; background: rgb(255, 255, 255); }
.eyebrow { font-weight: 700; font-size: 16px; font-family: var(--font-body); }
.text { margin: 0px; font-family: var(--font-body); font-size: 20px; line-height: 1.7; color: var(--gray-600); }
.tbl-rowhead { border: 1px solid rgb(226, 226, 224); font-family: var(--font-body); font-weight: 600; font-size: 14px; text-align: left; padding: 0px 20px; background: rgb(255, 255, 255); position: sticky; left: 0px; z-index: 1; }
.tbl-cell-num-is-strong { border: 1px solid rgb(226, 226, 224); text-align: center; padding: 10px 12px; font-family: var(--font-mono); font-size: 13px; white-space: pre-line; min-width: 130px; font-weight: 700; }
.h-display { margin: 0px; font-family: var(--font-display); font-weight: 600; font-size: var(--text-display); line-height: 1.1; text-transform: uppercase; }
.stack { display: grid; gap: 8px; }
.om-wrap { max-width: var(--container); margin: 0px auto; padding: 0px 40px; }
.field-label { font-family: var(--font-body); font-weight: 600; font-size: 13px; margin-bottom: 6px; display: block; }
.text-sm { margin: 0px; font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: var(--gray-600); }
.field-input { border: 1px solid var(--gray-300); border-radius: 3px; height: 42px; padding: 0px 12px; font-family: var(--font-body); font-size: 14px; width: 100%; box-sizing: border-box; background: rgb(255, 255, 255); }
.eyebrow-2 { font-family: var(--font-body); font-weight: 700; font-size: 16px; }
.sec { padding: 0px 0px 72px; }
.h-section { margin: 14px 0px 0px; font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.15; text-transform: uppercase; }
.sec-64 { padding: 0px 0px 64px; }
.rule { border-top: 1px solid var(--ink); border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: none; margin: 0px; }
.h-card { margin: 10px 0px 0px; font-family: var(--font-condensed); font-weight: 600; font-size: 20px; text-transform: uppercase; letter-spacing: 0.03em; }
.faq-item { border-bottom: 1px solid var(--ink); }
.text-2 { margin: 0px; padding: 0px 4px 20px; font-family: var(--font-body); font-size: 20px; line-height: 1.65; color: var(--gray-600); max-width: 70ch; }
.text-3 { margin: 0px; font-family: var(--font-body); font-size: 20px; line-height: 1.6; color: var(--gray-600); }
.tbl-colhead { border: 1px solid rgb(226, 226, 224); font-family: var(--font-body); font-weight: 600; font-size: 14px; text-align: left; padding: 10px 20px; background: rgb(255, 255, 255); }
.meta { font-family: var(--font-mono); font-size: 13px; color: var(--gray-600); }
.tag { font-family: var(--font-mono); font-size: 12px; padding: 5px 12px; border-radius: 999px; background: var(--charcoal); color: rgb(255, 255, 255); }
.stack-col { display: flex; flex-direction: column; gap: 12px; }
.crumbs { font-family: var(--font-mono); font-size: 13px; color: var(--gray-600); display: flex; gap: 10px; align-items: center; }
.badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-weight: 700; }
.row-center { display: flex; align-items: center; gap: 12px; }
.step-num { width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 3px; display: grid; place-content: center; font-family: var(--font-mono); font-size: 11px; flex-shrink: 0; }
.om-wrap-2 { max-width: var(--container); margin: 0px auto; padding: 0px 40px; display: grid; gap: 24px; }
.tbl-cell-num { border: 1px solid rgb(226, 226, 224); text-align: center; padding: 10px 12px; font-family: var(--font-mono); font-size: 13px; white-space: pre-line; min-width: 130px; color: var(--gray-300); }
.meta-sm { font-family: var(--font-mono); font-size: 12px; color: var(--gray-600); }
.row-baseline { display: flex; justify-content: space-between; align-items: baseline; }
.text-4 { margin: 0px; font-family: var(--font-body); font-size: 20px; line-height: 1.65; color: var(--gray-600); }
.om-wrap-3 { max-width: var(--container); margin: 0px auto; padding: 0px 40px; display: grid; gap: 18px; justify-items: start; }
.h-card-2 { margin: 0px; font-family: var(--font-condensed); font-weight: 600; font-size: 20px; text-transform: uppercase; letter-spacing: 0.04em; }
.card { border: 1px solid var(--gray-300); border-radius: var(--radius-card); overflow: hidden; background: rgb(255, 255, 255); display: grid; grid-template-rows: auto 1fr; }
.h-card-lg { margin: 0px; font-family: var(--font-condensed); font-weight: 600; font-size: 24px; text-transform: uppercase; letter-spacing: 0.04em; }
.card-media { aspect-ratio: 1.22 / 1; background: var(--gray-100); }
.card-body-tight { padding: 18px 20px 16px; display: grid; gap: 6px; }
.row-between { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.card-pad { border: 1px solid var(--gray-300); border-radius: var(--radius-card); padding: 26px 30px; background: rgb(255, 255, 255); display: grid; gap: 10px; align-content: start; }
.field-consent { display: flex; gap: 10px; align-items: flex-start; font-family: var(--font-body); font-size: 12px; line-height: 1.5; color: var(--gray-600); cursor: pointer; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.arrow-y { color: var(--yellow); font-size: 24px; }
.note { font-family: var(--font-body); font-size: 15px; color: var(--gray-600); }
.card-body { padding: 20px 22px 24px; display: grid; gap: 12px; align-content: start; }
.h-card-lg-2 { font-family: var(--font-condensed); font-weight: 600; font-size: 24px; text-transform: uppercase; letter-spacing: 0.04em; }
.row { display: flex; gap: 16px; }
.map-box { position: relative; min-height: 280px; background: var(--gray-100); }
.card-body-lg { padding: 30px 34px; display: grid; gap: 14px; align-content: start; justify-items: start; }
.tag-2 { font-family: var(--font-mono); font-size: 12px; padding: 5px 14px; border-radius: 999px; background: var(--charcoal); color: rgb(255, 255, 255); flex-shrink: 0; }
.sec-top { padding: 56px 0px 40px; }
.stack-10 { display: grid; gap: 10px; }
.row-wrap { display: flex; gap: 12px; flex-wrap: wrap; }
.meta-sm-2 { margin: 0px; font-family: var(--font-mono); font-size: 12px; color: var(--gray-600); }
.split-wide { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; }
.row-baseline-2 { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.sec-top48 { padding: 56px 0px 48px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; width: 100%; }
.row-between-2 { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; width: 100%; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.faq-list { display: grid; gap: 0px; border-top: 1px solid var(--ink); }
.tbl-cell-is-filled-2 { border: 1px solid rgb(226, 226, 224); text-align: center; padding: 0px; height: 44px; background: var(--yellow); }
.text-5 { margin: 4px 0px 0px; font-family: var(--font-body); font-size: 20px; line-height: 1.6; color: var(--gray-600); }
.sec-48 { padding: 48px 0px 56px; }
.h-page { margin: 0px; font-family: var(--font-display); font-weight: 600; font-size: 52px; line-height: 1.12; text-transform: uppercase; }
.grid-4-2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0px 16px; }
.card-dark { background: var(--charcoal); border-radius: var(--radius-card); padding: 48px 56px; display: flex; align-items: center; justify-content: space-between; gap: 32px; color: rgb(255, 255, 255); flex-wrap: wrap; }
.om-wrap-4 { max-width: var(--container); margin: 0px auto; padding: 0px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.row-between-3 { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.tag-3 { font-family: var(--font-mono); font-size: 12px; padding: 6px 16px; border-radius: 999px; background: var(--charcoal); color: rgb(255, 255, 255); letter-spacing: 0.08em; text-transform: uppercase; }
.text-6 { margin: 0px; font-family: var(--font-body); font-size: 20px; line-height: 1.6; color: var(--gray-600); max-width: 52ch; }
.om-wrap-5 { max-width: var(--container); margin: 0px auto; padding: 0px 40px; display: grid; gap: 28px; }
.text-7 { margin: 8px 0px 0px; font-family: var(--font-body); font-size: 20px; line-height: 1.6; color: var(--gray-600); }
.card-body-2 { padding: 20px 22px 24px; display: grid; gap: 12px; align-content: start; justify-items: start; }
.h-card-3 { margin: 0px; font-family: var(--font-condensed); font-weight: 600; font-size: 20px; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.02em; }
.h-card-sm { font-family: var(--font-condensed); font-weight: 600; font-size: 18px; text-transform: uppercase; letter-spacing: 0.03em; }
.text-faq-answer { margin: 0px 0px 18px; font-family: var(--font-body); font-size: 20px; line-height: 1.65; color: var(--gray-600); max-width: 62ch; }
.stat-num { font-family: var(--font-mono); font-weight: 700; font-size: 40px; opacity: 0.65; }
.h-card-4 { margin: 10px 0px 0px; font-family: var(--font-condensed); font-weight: 600; font-size: 20px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink); }
.card-pad-2 { border: 1px solid var(--gray-300); border-radius: var(--radius-card); background: rgb(255, 255, 255); padding: 26px 28px; display: grid; gap: 16px; align-content: space-between; }
.stack-10-2 { display: grid; gap: 10px; justify-items: start; }
.badge-2 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 999px; background: var(--yellow); color: var(--ink); text-transform: uppercase; }
.eyebrow-3 { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 16px; text-align: left; color: var(--ink); }
.text-8 { margin: 0px 0px 18px; font-family: var(--font-body); font-size: 20px; line-height: 1.65; color: var(--gray-600); }
.row-2 { display: flex; gap: 16px; align-items: flex-start; }
.stack-10-3 { display: grid; gap: 10px; align-content: start; }
.field-input-2 { border: 1px solid var(--gray-300); border-radius: 3px; height: 42px; padding: 0px 12px; font-family: var(--font-body); font-size: 14px; width: 100%; box-sizing: border-box; background: rgb(255, 255, 255); appearance: auto; }
.field-input-3 { border: 1px solid var(--gray-300); border-radius: 3px; height: 44px; padding: 0px 12px; font-family: var(--font-body); font-size: 14px; width: 100%; box-sizing: border-box; background: rgb(255, 255, 255); }
.card-dark-2 { background: var(--charcoal); border-radius: var(--radius-card); padding: 48px 56px; display: flex; align-items: center; justify-content: space-between; gap: 32px; color: rgb(255, 255, 255); }
.row-3 { display: flex; gap: 16px; flex-wrap: wrap; }
.h-card-5 { font-family: var(--font-condensed); font-weight: 600; font-size: 20px; text-transform: uppercase; letter-spacing: 0.03em; }
.h-card-lg-3 { font-family: var(--font-condensed); font-weight: 600; font-size: 24px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 20px; }
.stack-10-4 { border: 1px solid var(--gray-300); border-radius: var(--radius-card); padding: 26px 28px; background: rgb(255, 255, 255); display: grid; gap: 10px; align-content: start; }
.om-wrap-6 { max-width: var(--container); margin: 0px auto; padding: 0px 40px; display: grid; gap: 14px; }
.meta-2 { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 16px; font-family: var(--font-mono); font-size: 13px; color: var(--gray-600); }
.grid-3-2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-3-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card-2 { border: 2px solid var(--ink); border-radius: var(--radius-card); overflow: hidden; background: rgb(255, 255, 255); display: grid; grid-template-rows: auto 1fr; }
.grid-4-3 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.h-card-6 { font-family: var(--font-condensed); font-weight: 600; font-size: 20px; text-transform: uppercase; letter-spacing: 0.04em; }
.h-card-lg-4 { border-left: 4px solid var(--yellow); padding-left: 20px; margin: 32px 0px; font-family: var(--font-condensed); font-weight: 600; font-size: 24px; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.02em; }
.grid-4-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 28px 16px 0px; }
.text-9 { margin: 8px 0px 0px; font-family: var(--font-body); font-size: 20px; line-height: 1.65; color: var(--gray-600); max-width: 72ch; }
.meta-3 { margin: 0px; font-family: var(--font-mono); font-size: 13px; color: var(--gray-600); }
.split-wide-2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: center; }
.tag-4 { font-family: var(--font-mono); font-size: 12px; padding: 5px 14px; border-radius: 999px; background: var(--charcoal); color: rgb(255, 255, 255); }
.badge-3 { font-family: var(--font-mono); font-size: 12px; padding: 6px 16px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.split-wide-3 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: start; }
.field-input-4 { border: 1px solid var(--gray-300); border-radius: 3px; height: 44px; padding: 0px 12px; font-family: var(--font-body); font-size: 14px; width: 100%; box-sizing: border-box; background: rgb(255, 255, 255); appearance: auto; }
.stack-10-5 { background: var(--charcoal); border-radius: var(--radius-card); padding: 24px 26px; color: rgb(255, 255, 255); display: grid; gap: 10px; justify-items: start; }
.sec-lg { padding: 64px 0px 72px; }
.text-10 { margin: 0px; font-family: var(--font-body); font-size: 20px; line-height: 1.65; color: var(--gray-600); max-width: 78ch; }
.text-11 { margin: 8px 0px 0px; font-family: var(--font-body); font-size: 20px; line-height: 1.65; color: var(--gray-600); max-width: 70ch; }
.om-wrap-7 { max-width: var(--container); margin: 0px auto; padding: 0px 40px; display: grid; gap: 48px; }

/* --- komponenty design systemu: część wspólna zdjęta ze stylów inline --- */
.ds-arrow { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--font-body); font-weight: 600; border-bottom: 1.5px solid; padding-bottom: 2px; cursor: pointer; opacity: 1; transition: var(--transition); }
.ds-arrow-box { display: inline-flex; align-items: center; gap: 16px; padding: 12px 28px; border-radius: var(--radius-btn); background: transparent; font-family: var(--font-body); font-weight: 600; font-size: var(--text-button); text-transform: uppercase; letter-spacing: var(--tracking-caps); cursor: pointer; transition: var(--transition); }
.ds-arrow-box--on-dark { display: inline-flex; align-items: center; gap: 16px; padding: 12px 28px; border-color: rgb(255, 255, 255); border-top-style: ; border-top-width: ; border-right-style: ; border-right-width: ; border-bottom-style: ; border-bottom-width: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-radius: var(--radius-btn); background: transparent; color: rgb(255, 255, 255); font-family: var(--font-body); font-weight: 600; font-size: var(--text-button); text-transform: uppercase; letter-spacing: var(--tracking-caps); cursor: pointer; transition: var(--transition); }
.ds-btn { padding: var(--btn-pad-y) var(--btn-pad-x); font-size: var(--text-button); display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: var(--radius-btn); font-family: var(--font-body); font-weight: 600; line-height: inherit; text-transform: uppercase; letter-spacing: var(--tracking-caps); cursor: pointer; transition: var(--transition-btn); text-align: center; border-width: 1px; border-style: solid; border-image: none; color: var(--ink); }
.ds-btn--primary { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: var(--radius-btn); font-family: var(--font-body); font-weight: 600; line-height: inherit; text-transform: uppercase; letter-spacing: var(--tracking-caps); cursor: pointer; transition: var(--transition-btn); text-align: center; border-width: 1px; border-style: solid; border-color: var(--yellow); border-image: none; background: var(--yellow); color: var(--ink); }
.ds-btn--secondary { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: var(--btn-pad-y) var(--btn-pad-x); border-radius: var(--radius-btn); font-family: var(--font-body); font-weight: 600; font-size: var(--text-button); line-height: inherit; text-transform: uppercase; letter-spacing: var(--tracking-caps); cursor: pointer; transition: var(--transition-btn); text-align: center; border-width: 1px; border-style: solid; border-color: var(--white); border-image: none; background: var(--white); color: var(--ink); }
.ds-chip { display: inline-flex; align-items: center; gap: 8px; padding: var(--chip-pad); border-radius: var(--radius-chip); border: 1px solid var(--charcoal); background: var(--charcoal); color: var(--white); font-family: var(--font-mono); font-size: var(--text-chip); letter-spacing: var(--tracking-mono); cursor: pointer; transition: var(--transition); }
.ds-select { font-family: var(--font-mono); font-size: 13px; padding: 8px 18px; border-radius: 999px; cursor: pointer; border: 1px solid var(--gray-300); background: rgb(255, 255, 255); color: var(--ink); transition: 0.2s; }

/* --- druga tura nazwanych wzorców --- */
.icon { flex-shrink: 0; }
.slot-190 { display: block; width: 100%; height: 190px; border-radius: 0px; }
.link-muted { color: var(--gray-600); }
.sep { color: var(--gray-300); }
.faq-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 4px; background: none; border: 0px; cursor: pointer; text-align: left; }
.faq-mark { font-family: var(--font-mono); font-size: 20px; flex-shrink: 0; }
.ink { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: var(--btn-pad-y) var(--btn-pad-x); border-radius: var(--radius-btn); font-family: var(--font-body); font-weight: 600; font-size: var(--text-button); line-height: inherit; text-transform: uppercase; letter-spacing: var(--tracking-caps); cursor: pointer; transition: var(--transition-btn); text-align: center; border-width: 1px; border-style: solid; border-color: var(--yellow); border-image: none; background: var(--yellow); color: var(--ink); width: 100%; }
.ink-2 { color: var(--ink); }
.plain { text-decoration: none; }
.icon-20 { width: 20px; height: 20px; }
.m0 { margin: 0px; }
.slot-220 { display: block; width: 100%; height: 220px; border-radius: 0px; }
.tag-inline { display: inline-flex; align-items: center; gap: 8px; background: var(--charcoal); color: rgb(255, 255, 255); border-radius: 999px; padding: 7px 16px 7px 8px; font-family: var(--font-mono); font-size: 13px; }
.tbl-colhead-num { border: 1px solid rgb(226, 226, 224); font-family: var(--font-mono); font-weight: 700; font-size: 13px; padding: 12px 8px; background: rgb(255, 255, 255); min-width: 44px; }
.label-inline { font-family: var(--font-body); font-weight: 600; font-size: 15px; }
.card-sm { border: 1px solid var(--gray-300); border-radius: var(--radius-card); padding: 22px 24px; background: rgb(255, 255, 255); display: grid; gap: 12px; align-content: start; }
.stars { color: var(--yellow); font-size: 16px; letter-spacing: 2px; }
.meta-xs { font-family: var(--font-mono); font-size: 11px; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.08em; }
.label-sm { font-family: var(--font-body); font-weight: 700; font-size: 13px; }
.ink-3 { font-family: var(--font-mono); font-size: 13px; padding: 8px 18px; border-radius: 999px; cursor: pointer; border: 1px solid var(--gray-300); background: rgb(255, 255, 255); color: var(--ink); transition: 0.2s; }
.plain-2 { text-decoration: none; display: inline-flex; }
.ink-4 { font-family: var(--font-mono); font-weight: 700; font-size: 20px; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--ink); }
.ink-5 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-small); color: var(--ink); }
.ink-6 { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--font-body); font-weight: 600; font-size: var(--text-small); border-bottom: 1.5px solid; padding-bottom: 2px; cursor: pointer; opacity: 1; transition: var(--transition); }
.link-muted-2 { font-family: var(--font-body); font-size: 20px; line-height: 1.65; margin: 0px; max-width: 52ch; color: var(--gray-600); }
.ink-7 { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--font-body); font-weight: 600; font-size: var(--text-body-size); border-bottom: 1.5px solid; padding-bottom: 2px; cursor: pointer; opacity: 1; transition: var(--transition); }
.icon-2 { margin-top: 2px; flex-shrink: 0; }
.ink-8 { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: var(--btn-pad-y) var(--btn-pad-x); border-radius: var(--radius-btn); font-family: var(--font-body); font-weight: 600; font-size: var(--text-button); line-height: inherit; text-transform: uppercase; letter-spacing: var(--tracking-caps); cursor: pointer; transition: var(--transition-btn); text-align: center; border-width: 1px; border-style: solid; border-color: var(--yellow); border-image: none; background: var(--yellow); color: var(--ink); width: 100%; opacity: 0.5; }
.plain-3 { text-decoration: none; color: inherit; display: block; }
.slot-4x5 { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; border-radius: 0px; }
.m0-2 { margin: 0px; font-family: var(--font-condensed); font-weight: 600; font-size: 22px; text-transform: uppercase; letter-spacing: 0.03em; }
.m0-3 { margin: 0px; font-family: var(--font-display); font-weight: 600; font-size: 36px; line-height: 1.15; text-transform: uppercase; }
.icon-3 { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: var(--btn-pad-y) var(--btn-pad-x); border-radius: var(--radius-btn); font-family: var(--font-body); font-weight: 600; font-size: var(--text-button); line-height: inherit; text-transform: uppercase; letter-spacing: var(--tracking-caps); cursor: pointer; transition: var(--transition-btn); text-align: center; border-width: 1px; border-style: solid; border-color: var(--yellow); border-image: none; background: var(--yellow); color: var(--ink); flex-shrink: 0; }
.plain-4 { text-decoration: none; display: inline-flex; margin-top: 6px; }
.ink-9 { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: var(--btn-pad-y) var(--btn-pad-x); border-radius: var(--radius-btn); font-family: var(--font-body); font-weight: 600; font-size: var(--text-button); line-height: inherit; text-transform: uppercase; letter-spacing: var(--tracking-caps); cursor: pointer; transition: var(--transition-btn); text-align: center; border-width: 1px; border-style: solid; border-color: var(--yellow); border-image: none; background: var(--yellow); color: var(--ink); }
.ink-10 { display: inline-flex; align-items: center; gap: 16px; padding: 12px 28px; border: 1px solid var(--black); border-radius: var(--radius-btn); background: transparent; color: var(--ink); font-family: var(--font-body); font-weight: 600; font-size: var(--text-button); text-transform: uppercase; letter-spacing: var(--tracking-caps); cursor: pointer; transition: var(--transition); }
.link-muted-3 { font-family: var(--font-body); font-size: 20px; line-height: 1.65; margin: 0px; max-width: 58ch; color: var(--gray-600); }
.slot-340 { display: block; width: 100%; height: 340px; border-radius: 0px; }
.ink-11 { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: var(--btn-pad-y) var(--btn-pad-x); border-radius: var(--radius-btn); font-family: var(--font-body); font-weight: 600; font-size: var(--text-button); line-height: inherit; text-transform: uppercase; letter-spacing: var(--tracking-caps); cursor: pointer; transition: var(--transition-btn); text-align: center; border-width: 1px; border-style: solid; border-color: var(--white); border-image: none; background: var(--white); color: var(--ink); }
.slot-260 { display: block; width: 100%; height: 260px; border-radius: 0px; }
.icon-4 { font-family: var(--font-mono); font-size: 13px; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--ink); flex-shrink: 0; }
.m0-4 { margin: 0px; font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 1.1; text-transform: uppercase; }
.icon-5 { text-decoration: none; display: inline-flex; flex-shrink: 0; }
.ink-12 { font-family: var(--font-mono); font-size: 12px; padding: 5px 14px; border-radius: 999px; border: 1px solid var(--ink); color: var(--ink); }
.link-muted-4 { font-family: var(--font-body); font-size: 20px; line-height: 1.75; margin: 0px 0px 20px; color: var(--gray-600); }
.faq-toggle-2 { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; padding: 18px 2px; text-align: left; }
.plain-5 { text-decoration: none; display: inline-flex; width: 100%; box-sizing: border-box; justify-content: center; }
.faq-mark-2 { font-family: var(--font-mono); font-size: 18px; color: var(--ink); flex-shrink: 0; transition: 0.3s ease-in-out; }
.link-muted-5 { font-family: var(--font-body); font-size: 12px; line-height: 1.5; color: var(--gray-600); font-style: italic; }
.icon-6 { font-family: var(--font-mono); font-size: 22px; color: var(--yellow); flex-shrink: 0; }
.icon-7 { font-family: var(--font-mono); font-size: 13px; font-weight: 700; border: 1px solid var(--ink); width: 24px; height: 24px; display: grid; place-content: center; border-radius: 3px; flex-shrink: 0; margin-top: 2px; }
.icon-8 { font-family: var(--font-display); font-size: 28px; color: var(--yellow); -webkit-text-stroke: 1px var(--ink); flex-shrink: 0; line-height: 1; }
.m0-5 { margin: 0px; font-family: var(--font-display); font-weight: 600; font-size: 34px; line-height: 1.1; text-transform: uppercase; }
.link-muted-6 { font-family: var(--font-body); font-size: 20px; line-height: 1.65; margin: 0px; max-width: 56ch; color: var(--gray-600); }
.icon-9 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-600); width: 70px; flex-shrink: 0; }
.ink-13 { min-width: 112px; text-align: center; padding: 16px 14px; border-radius: var(--radius-card); border: 1px solid var(--gray-300); background: rgb(255, 255, 255); color: var(--ink); }
.link-muted-7 { font-family: var(--font-mono); font-size: 12px; margin-top: 4px; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.06em; }
.ink-14 { background: var(--yellow); color: var(--ink); border-radius: var(--radius-card); padding: 22px 24px; box-shadow: var(--shadow-card); }
.ink-15 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; }
.link-muted-8 { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; color: var(--gray-600); }
.ink-16 { display: inline-block; width: 18px; height: 18px; background: var(--yellow); vertical-align: -4px; margin-right: 8px; text-align: center; font-weight: 700; color: var(--ink); }
.link-muted-9 { font-family: var(--font-body); font-size: 20px; line-height: 1.65; margin: 20px 0px 0px; max-width: 70ch; color: var(--gray-600); }
.m0-6 { margin: 0px; font-family: var(--font-body); font-size: 20px; line-height: 1.6; color: rgb(221, 221, 221); }
.slot-380 { display: block; width: 100%; height: 380px; border-radius: 0px; }
.m0-7 { margin: 0px; font-family: var(--font-display); font-weight: 600; font-size: 44px; line-height: 1.15; text-transform: uppercase; }
.ink-17 { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.m0-8 { margin: 0px; font-family: var(--font-display); font-weight: 600; font-size: clamp(36px, 4.5vw, 60px); line-height: 1.08; text-transform: uppercase; }
.m0-9 { margin: 0px; font-family: var(--font-body); font-size: 20px; font-weight: 300; line-height: 1.6; max-width: 40ch; color: rgb(255, 255, 255); text-wrap: pretty; }
.m0-10 { margin: 0px; font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 1.1; text-transform: uppercase; }
.link-muted-10 { font-family: var(--font-body); font-size: 20px; line-height: 1.65; margin: 0px; max-width: 56ch; color: var(--gray-600); border-left: 3px solid var(--yellow); padding-left: 16px; }
.faq-mark-3 { font-family: var(--font-mono); font-size: 18px; color: var(--yellow); flex-shrink: 0; transition: 0.3s ease-in-out; }
.m0-11 { margin: 0px; font-family: var(--font-display); font-weight: 600; font-size: 48px; line-height: 1.12; text-transform: uppercase; }
.ink-18 { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: var(--btn-pad-y-mobile) var(--btn-pad-x-mobile); border-radius: var(--radius-btn); font-family: var(--font-body); font-weight: 600; font-size: var(--text-button-mobile); line-height: inherit; text-transform: uppercase; letter-spacing: var(--tracking-caps); cursor: pointer; transition: var(--transition-btn); text-align: center; border-width: 1px; border-style: solid; border-color: var(--yellow); border-image: none; background: var(--yellow); color: var(--ink); }
.link-muted-11 { font-family: var(--font-body); font-size: 20px; line-height: 1.65; margin: 0px; max-width: 44ch; color: var(--gray-600); }
.link-muted-12 { display: flex; align-items: center; gap: 14px; border: 1px dashed var(--gray-600); border-radius: 3px; padding: 14px 16px; cursor: pointer; font-family: var(--font-body); font-size: 14px; color: var(--gray-600); }
.m0-12 { margin: 0px; font-family: var(--font-display); font-weight: 600; font-size: 38px; line-height: 1.15; text-transform: uppercase; }
.m0-13 { margin: 0px; font-family: var(--font-body); font-size: 20px; line-height: 1.6; max-width: 52ch; color: rgb(221, 221, 221); }
.m0-14 { margin: 0px; font-family: var(--font-display); font-weight: 600; font-size: 54px; line-height: 1.1; text-transform: uppercase; }
.link-muted-13 { font-family: var(--font-body); font-size: 20px; line-height: 1.65; margin: 0px; max-width: 48ch; color: var(--gray-600); }
.ink-19 { min-width: 112px; text-align: center; padding: 16px 14px; border-radius: var(--radius-card); border: 1px solid var(--gray-300); background: var(--yellow); color: var(--ink); }
.ink-20 { font-family: var(--font-mono); font-size: 12px; margin-top: 4px; color: var(--ink); text-transform: uppercase; letter-spacing: 0.06em; }
.link-muted-14 { font-family: var(--font-body); font-size: 20px; line-height: 1.65; margin: 0px; max-width: 40ch; color: var(--gray-600); }
.link-muted-15 { font-family: var(--font-mono); font-size: 11px; color: var(--gray-600); }
.link-muted-16 { font-family: var(--font-body); font-size: 20px; line-height: 1.65; margin: 0px; max-width: 70ch; color: var(--gray-600); }
.link-muted-17 { font-family: var(--font-body); font-size: 14px; color: var(--gray-600); }
.m0-15 { margin: 0px; font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.1; text-transform: uppercase; }
.icon-10 { display: flex; gap: 12px; flex-shrink: 0; }


/* ==========================================================================
   NAGŁÓWEK (site-header)
   Wyciągnięte z <body> 24 podstron (było powielone w każdej z osobna).
   ========================================================================== */
.site-header,.site-header *,.site-header *::before,.site-header *::after{box-sizing:border-box}
.site-header{--sh-sans:var(--font-body);position:sticky;top:0;z-index:50;border-bottom:1px solid #adadad;background:#fff;font-family:var(--sh-sans)}
.site-header .bar{position:relative;width:100%;max-width:1280px;margin:0 auto;padding:0 24px;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px}
@media(min-width:768px){.site-header .bar{padding-left:40px;padding-right:40px;min-height:88px}}
@media(min-width:1536px){.site-header .bar{max-width:1900px;padding-left:48px;padding-right:48px}}
.site-header .sh-logo{position:absolute;top:0;left:24px;z-index:2;display:inline-flex}
@media(min-width:768px){.site-header .sh-logo{left:40px}}
@media(min-width:1536px){.site-header .sh-logo{left:48px}}
.site-header .custom-logo{display:block;width:auto;height:96px;transition:height .3s ease-in-out;filter:drop-shadow(0 8px 18px rgba(0,0,0,.18))}
.site-header .sh-logo-space{flex:none;width:135px;transition:width .3s ease-in-out}
.site-header:has(.nav-toggle-cb:checked) .custom-logo{height:72px;filter:none}
.site-header:has(.nav-toggle-cb:checked) .sh-logo-space{width:101px}
@media(min-width:768px){
.site-header .custom-logo{height:132px}
.site-header .sh-logo-space{width:186px}
.site-header:has(.nav-toggle-cb:checked) .custom-logo{height:88px}
.site-header:has(.nav-toggle-cb:checked) .sh-logo-space{width:124px}
}

.site-header .sh-nav{flex:1;min-width:0}
#primary-menu{position:absolute;left:0;right:0;top:100%;z-index:3;display:none;border-bottom:1px solid #adadad;background:#fff;padding:0 24px 24px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.nav-toggle-cb:checked~#primary-menu{display:block}
@media(min-width:768px){#primary-menu{padding-left:40px;padding-right:40px}}
#primary-menu ul{display:flex;flex-direction:column;gap:16px;list-style:none;margin:0;padding:16px 0;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.025em}
#primary-menu a{color:#2b2b2a;text-decoration:none;white-space:nowrap;transition:color .15s}
#primary-menu a:hover{color:#e31f25}
#primary-menu a[aria-current]{box-shadow:inset 0 -3px 0 #ffcd00}
.site-header .nav-toggle{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;flex:none;border:2px solid #2b2b2a;border-radius:9999px;background:#fff;color:#2b2b2a;padding:12px 24px;cursor:pointer;transition:background-color .15s,color .15s}
.site-header .nav-toggle:hover{background:#2b2b2a;color:#fff}
@media(min-width:1200px){
.site-header .nav-toggle{display:none}
#primary-menu{position:static;display:block;border:0;padding:0;box-shadow:none}
#primary-menu ul{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;padding:0}
}
@media(min-width:1400px){#primary-menu ul{gap:24px}}
.site-header .sh-right{display:none;flex:none;align-items:center;gap:12px}
.site-header .sh-menu-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;border-top:1px solid #adadad;padding-top:20px;margin-top:4px}
.site-header .sh-menu-foot .sh-order{flex:1 1 auto}
@media(min-width:1200px){.site-header .sh-right{display:flex}.site-header .sh-menu-foot{display:none}}
.site-header .lang{display:flex;align-items:center;gap:6px;margin:0;font-size:14px;font-weight:700;color:#595959}
.site-header .lang [aria-current]{color:#2b2b2a}
.site-header .lang a{color:#595959;text-decoration:none}
.site-header .lang a:hover{color:#2b2b2a}
.site-header .sh-order{display:inline-flex;min-height:44px;align-items:center;justify-content:center;border-radius:9999px;background:#ffcd00;color:#2b2b2a;padding:12px 24px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.025em;text-decoration:none;white-space:nowrap;transition:background-color .15s}
.site-header .sh-order:hover{background:#fdcb35;color:#2b2b2a}
.site-header .sh-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ==========================================================================
   STOPKA (.sf)
   Wyciągnięte z <body> 24 podstron (było powielone w każdej z osobna).
   ========================================================================== */
.sf{background:#000;color:#fff;font-family:'Roboto',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.sf .sf-inner{width:100%;max-width:1280px;margin:0 auto;padding:48px 24px}
@media(min-width:768px){.sf .sf-inner{padding:64px 40px}}
@media(min-width:1536px){.sf .sf-inner{max-width:1900px;padding-left:48px;padding-right:48px}}
.sf a{text-decoration:none}
.sf a:hover{color:#ffcd00}
.sf-cols{display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:768px){.sf-cols{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.sf-cols{grid-template-columns:repeat(4,1fr)}}
.sf-brand{display:flex;flex-direction:column;gap:24px}
.sf-brand .sf-name{display:inline-flex}
.sf-brand .sf-name img{height:96px;width:auto;display:block}
.sf-brand p{margin:0;max-width:20rem;font-size:16px;line-height:1.6;color:#adadad}
.sf-soc{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:0;padding:0}
.sf-soc-h{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#adadad;margin:0}
.sf-soc a{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:9999px;border:1px solid #adadad;color:#fff;transition:border-color .2s,background-color .2s,color .2s}
.sf-soc a:hover{border-color:#ffcd00;background:#ffcd00;color:#2b2b2a}
.sf-soc svg{width:20px;height:20px;fill:currentColor}
.sf-col{display:flex;flex-direction:column;gap:12px}
.sf-col h2{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#adadad;margin:0}
.sf-col ul{display:flex;flex-direction:column;gap:8px;font-size:16px;list-style:none;margin:0;padding:0}
.sf-col a{color:rgba(255,255,255,.9)}
.sf-bottom{margin-top:48px;display:flex;flex-direction:column;gap:16px;border-top:1px solid rgba(255,255,255,.2);padding-top:24px;font-size:14px;color:#adadad}
.sf-bottom a{color:#adadad}
@media(min-width:768px){.sf-bottom{flex-direction:row;align-items:center;justify-content:space-between}}
.sf-bottom ul{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;list-style:none;margin:0;padding:0}

/* ==========================================================================
   TABELE WARTOŚCI (.sb-nut)
   Wyciągnięte z <body> 4 podstron (było powielone w każdej z osobna).
   ========================================================================== */
.sb-nut{width:100%;max-width:1280px;margin:0 auto;padding:32px 24px}
@media(min-width:768px){.sb-nut{padding:48px 40px}}
@media(min-width:1536px){.sb-nut{max-width:1900px;padding:48px 48px}}
.sb-media{position:relative;isolation:isolate;display:flex;align-items:center;overflow:hidden;border-radius:8px;background:#2b2b2a;color:#fff;min-height:66.67vh}
@supports(min-height:1dvh){.sb-media{min-height:66.67dvh}}
.sb-media>.img-slot{position:absolute;inset:0;z-index:-10;width:100%;height:100%;object-fit:cover}
.sb-scrim{position:absolute;inset:0;z-index:-10;background:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.7) 50%,rgba(0,0,0,.2))}
.sb-pad{width:100%;padding:32px}@media(min-width:768px){.sb-pad{padding:56px}}
.sb-eyebrow{margin:0 0 8px;font-size:14px;font-weight:700;color:#fff;font-family:'Roboto',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.sb-h{margin:0;font-family:var(--font-display);font-weight:600;text-transform:uppercase;line-height:1;letter-spacing:-.01em;font-size:24px;white-space:pre-line}
@media(min-width:768px){.sb-h{font-size:36px}}
.sb-body{margin:16px 0 0;font-size:20px;font-weight:300;line-height:1.625;text-wrap:pretty;font-family:'Roboto',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.sb-btn{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:8px;border-radius:9999px;padding:12px 24px;font-family:'Roboto',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;transition:background-color .3s,color .3s,border-color .3s;cursor:pointer}
.sb-btn--primary{background:#ffcd00;color:#2b2b2a}.sb-btn--primary:hover{background:#fdcb35;color:#2b2b2a}
.sb-btn--on-dark{border:2px solid #fff;background:transparent;color:#fff}.sb-btn--on-dark:hover{background:#fff;color:#2b2b2a}

/* ==========================================================================
   FAQ — akordeon na <details>/<summary>, bez JS
   Wcześniej robił to home/site.js: zwijał odpowiedzi, przełączał +/− i pilnował,
   żeby otwarte było tylko jedno pytanie. Wszystko to potrafi natywny <details>:
   atrybut name="…" grupuje pytania, więc otwarcie jednego zamyka pozostałe.
   ========================================================================== */
summary.faq-toggle,
summary.faq-toggle-2 { list-style: none; }
summary.faq-toggle::-webkit-details-marker,
summary.faq-toggle-2::-webkit-details-marker { display: none; }

/* Znak +/− jest treścią dekoracyjną, więc rysuje go CSS, a nie HTML.
   W markupie zostaje pusty <span aria-hidden="true">. */
.faq-mark::after,
.faq-mark-2::after,
.faq-mark-3::after { content: '+'; }
details[open] > summary .faq-mark::after,
details[open] > summary .faq-mark-2::after,
details[open] > summary .faq-mark-3::after { content: '\2212'; }

/* ==========================================================================
   Menu mobilne — checkbox zamiast JS
   Stan trzyma ukryty <input type="checkbox">, który stoi w DOM przed #primary-menu,
   więc wystarczy selektor rodzeństwa. Checkbox jest przezroczysty, ale wciąż
   fokusowalny — dzięki temu menu obsługuje się z klawiatury (Tab + Spacja),
   a czytnik ekranu ogłasza jego stan.
   ========================================================================== */
.site-header .nav-toggle-cb { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.site-header .nav-toggle-cb:focus-visible + .nav-toggle { outline: 2px solid #2b2b2a; outline-offset: 3px; }

/* Ikona: dwa SVG, CSS pokazuje właściwe. Wcześniej site.js podmieniał innerHTML. */
.site-header .nav-icon-close { display: none; }
.site-header .nav-toggle-cb:checked + .nav-toggle .nav-icon-open { display: none; }
.site-header .nav-toggle-cb:checked + .nav-toggle .nav-icon-close { display: inline; }

@media (min-width: 1200px) { .site-header .nav-toggle-cb { display: none; } }

/* ==========================================================================
   Nagłówek przy scrollu — animacja sterowana pozycją przewijania, bez JS
   site.js nasłuchiwał scrolla i dokładał klasę .is-scrolled powyżej 8 px.
   To samo robi animacja z animation-timeline: scroll() — próg 8 px zapisany
   jest jako animation-range, a krótki zakres daje przełączenie, nie płynne
   przejście, czyli dokładnie zachowanie klasy.

   Całość w @supports, bo scroll-driven animations nie są jeszcze wszędzie.
   Przeglądarki bez wsparcia zostają na stanie wyjściowym: duże logo zwisające
   nad hero i nagłówek bez cienia — spójny wygląd, po prostu statyczny.
   ========================================================================== */
@supports (animation-timeline: scroll()) {
  @keyframes sh-shadow { to { box-shadow: 0 10px 30px rgba(0, 0, 0, .08); } }
  @keyframes sh-logo   { to { height: 72px; filter: none; } }
  @keyframes sh-space  { to { width: 101px; } }

  .site-header,
  .site-header .custom-logo,
  .site-header .sh-logo-space {
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll();
    animation-range: 0 8px;
  }
  .site-header               { animation-name: sh-shadow; }
  .site-header .custom-logo  { animation-name: sh-logo; }
  .site-header .sh-logo-space{ animation-name: sh-space; }

  @media (min-width: 768px) {
    @keyframes sh-logo  { to { height: 88px; filter: none; } }
    @keyframes sh-space { to { width: 124px; } }
  }

  /* Otwarte menu ma pierwszeństwo nad stanem scrolla — jak wcześniej .is-open. */
  .site-header:has(.nav-toggle-cb:checked) .custom-logo,
  .site-header:has(.nav-toggle-cb:checked) .sh-logo-space { animation-name: none; }

  @media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-header .custom-logo,
    .site-header .sh-logo-space { animation-name: none; }
  }
}

/* ==========================================================================
   Animacje wejścia — sterowane widocznością elementu, bez JS
   home/reveal.js robił to przez IntersectionObserver: wstrzykiwał style,
   obserwował elementy i dokładał klasę .rv-in. animation-timeline: view()
   daje to samo natywnie — postęp animacji wynika z pozycji elementu względem
   okna, więc nie trzeba niczego nasłuchiwać.

   Element widoczny już przy wczytaniu strony (hero) ma zakres "entry" dawno za
   sobą, więc renderuje się od razu w stanie końcowym i nic nie mruga.

   Bez wsparcia dla view() treść jest po prostu od razu widoczna — animacja
   wejścia jest ozdobą, nie warunkiem czytelności strony.
   ========================================================================== */
@supports (animation-timeline: view()) {
  @keyframes rv-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

  .nav-grid > li, .loc-list > *, .soc-grid > li, .menu-cats > *,
  body > section, body > footer {
    animation: rv-in .6s ease-out both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-grid > li, .loc-list > *, .soc-grid > li, .menu-cats > *,
    body > section, body > footer { animation: none; }
  }
}

/* Hover kart — te reguły też wstrzykiwał reveal.js, więc muszą tu zostać,
   inaczej znikną razem z nim. */
.loc-card, .tile { transition: transform .3s ease-in-out, box-shadow .3s ease-in-out; }
.loc-card:hover { transform: translateY(-4px); box-shadow: 0 13px 48px rgba(0, 0, 0, .12); }

@media (prefers-reduced-motion: reduce) {
  .loc-card, .tile { transition: none; }
  .loc-card:hover { transform: none; }
}

/* ==========================================================================
   Lista lokalizacji — wspólna dla strony głównej i /restauracje
   Mapa zajmuje całą szerokość swojej kolumny, karty lokali układają się
   po dwie w wierszu. Wcześniej te reguły były tylko w home.css, a
   restauracje.html miały własną siatkę wpisaną inline (1fr 1.8fr, bez
   media queries) — czyli węższą mapę i brak zwijania na wąskich ekranach.
   ========================================================================== */
.loc-wrap{margin-top:40px;display:grid;grid-template-columns:1fr;gap:24px}
.loc-wrap>*,.loc-wrap .img-slot{min-width:0}
@media(min-width:1024px){.loc-wrap{grid-template-columns:1fr 1fr}}
.loc-list{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.loc-list{grid-template-columns:1fr 1fr}}

/* Kolumna z mapą na /restauracje. Kwadrat wygląda dobrze obok listy w układzie
   dwukolumnowym, ale po zwinięciu na jedną kolumnę mapa dostaje pełną szerokość
   i taki sam kwadrat zająłby prawie cały ekran — stąd ograniczenie wysokości.
   align-self trzyma mapę przy górze: lista ma tu 4 rzędy kart, więc rozciągnięcie
   na jej wysokość dałoby bardzo wysoką mapę. */
.loc-map { position: relative; overflow: hidden; align-self: start; height: 360px; }
@media (min-width: 1024px) { .loc-map { height: auto; aspect-ratio: 1 / 1; } }

/* ---------------------------------------------------------------------------
   RESPONSYWNOŚĆ SIATEK

   Klasy .grid-3* i .grid-4* przyszły z prerenderu ze sztywnym repeat(3|4, 1fr)
   i bez jednego media query - liczba kolumn była taka sama przy 500 i przy
   1440 px. Na telefonie kończyło się to utratą treści: na /franczyza siatka
   "Co zyskujesz jako partner" rozpychała się do 917 px w kontenerze 485 px,
   więc kafle 03 i 04 wychodziły poza ekran i ucinał je overflow-x: clip
   na <body> - bez paska przewijania, czyli bez szansy, żeby do nich dotrzeć.

   Zamiar responsywności był w home/mobile.css, tyle że zapisany jako selektory
   atrybutowe ([style*="repeat(4,1fr)"]). Gdy te same style stały się klasami,
   selektory przestały cokolwiek łapać i reguły umarły po cichu. Poniżej ten sam
   zamiar, przepisany na klasy:

     .grid-3*  1 kolumna -> 2 od 768 px -> 3 od 1024 px
     .grid-4*  2 kolumny -> 4 od 1024 px

   min-width: 0 na dzieciach jest konieczne, bo domyślne min-width: auto pozwala
   elementowi siatki rozepchać kolumnę ponad przydzieloną frakcję - to była
   bezpośrednia przyczyna 917 px na /franczyza. */

.grid-3, .grid-3-2, .grid-3-3 { grid-template-columns: 1fr; }
.grid-4, .grid-4-2, .grid-4-3, .grid-4-4 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 768px) {
  .grid-3, .grid-3-2, .grid-3-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid-3, .grid-3-2, .grid-3-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4, .grid-4-2, .grid-4-3, .grid-4-4 { grid-template-columns: repeat(4, 1fr); }
}

.grid-3 > *, .grid-3-2 > *, .grid-3-3 > *,
.grid-4 > *, .grid-4-2 > *, .grid-4-3 > *, .grid-4-4 > * { min-width: 0; }

/* Wysokości slotów na wąskich ekranach. Reguły były w mobile.css jako
   [style*="height: 190px"] i przestały działać, gdy wysokości trafiły do klas
   .slot-*. Wartości docelowe zachowane z oryginału. .slot-220 nigdy nie miał
   swojego odpowiednika i zostaje bez zmian. */
@media (max-width: 767px) {
  .slot-190 { height: 140px; }
  .slot-260 { height: 180px; }
  .slot-340 { height: 220px; }
  .slot-380 { height: 240px; }
}

/* Układy dwukolumnowe. Tak samo jak .grid-* przyszły bez media queries, przez co
   na telefonie tekst lądował w kolumnie ~240 px. mobile.css zwijał je regułą
   [style*="grid-template-columns"]{1fr}, która działa tylko dopóki styl siedzi
   w atrybucie - tu jest już w klasie. */
@media (max-width: 767px) {
  .split, .split-wide, .split-wide-2, .split-wide-3 { grid-template-columns: 1fr; }

  /* Odstępy i wyściółka policzone na desktop. Odpowiedniki [style*="gap: 40px"],
     [style*="padding: 48px 56px"] i [style*="padding: 30px 34px"] z mobile.css. */
  .split, .split-wide, .split-wide-2, .split-wide-3, .om-wrap-7 { gap: 26px; }
  .card-dark, .card-dark-2 { padding: 22px 20px; }
  .card-body-lg { padding: 22px 20px; }

  /* Odpowiednik [style*="min-height:280px"] - mapa na wąskim ekranie. */
  .map-box { min-height: 220px; }

  /* Para przycisków na /zamow-online: flex bez zawijania, przez co rozpychała się
     do 572 px w kontenerze 445 px. Nazwa klasy nic tu nie znaczy - to nie ikona,
     tylko relikt numerowania z prerenderu (do zmiany w kroku 12). */
  .icon-10 { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
   WARIANTY PRZYCISKU

   .ds-btn--primary przyszedł z prerenderu bez paddingu i rozmiaru pisma - obie
   wartości siedziały w atrybucie style na każdym z 59 przycisków, mimo że były
   wszędzie identyczne. (.ds-btn--secondary miał je od początku w klasie, dlatego
   te przyciski nie nosiły żadnego stylu inline.) Wspólna część trafiła do .ds-btn,
   a to, co faktycznie się różniło, dostało modyfikatory. */

.ds-btn--block { width: 100%; }
.ds-btn--fixed { flex-shrink: 0; }
.ds-btn--sm { padding: var(--btn-pad-y-mobile) var(--btn-pad-x-mobile); font-size: var(--text-button-mobile); }

/* Przygaszenie przycisku wysyłki. W Reakcie był to stan "formularz niekompletny",
   liczony na bieżąco; po prerenderze został zamrożony na stałe, więc przycisk
   wygląda na nieaktywny, choć działa normalnie. Zachowane 1:1 - zmiana wyglądu
   wymaga decyzji, nie refaktoru. */
.ds-btn--muted { opacity: .5; }

/* ---------------------------------------------------------------------------
   KONTENER SEKCJI

   Wszystkie 42 elementy z tym stylem inline miały już klasę .om-wrap, a atrybut
   powtarzał jej treść (max-width, margin, boczny padding) i dokładał tylko górny
   odstęp oraz stos. Zostały więc same modyfikatory. */

.om-wrap--pt48 { padding-top: 48px; }
.om-wrap--pt56 { padding-top: 56px; }

/* Stos treści. Numer to odstęp w px - tutaj niesie informację, w przeciwieństwie
   do numerków z prerenderu (.text-2, .slot-190), które są tylko efektem
   deduplikacji i znikną w kroku 12. */
.stack-16 { display: grid; gap: 16px; }
.stack-24 { display: grid; gap: 24px; }
.stack-28 { display: grid; gap: 28px; }
.stack--start { justify-items: start; }

/* ---------------------------------------------------------------------------
   TYPOGRAFIA WYCIĄGNIĘTA ZE STYLÓW INLINE */

/* ArrowLink występuje w dwóch rozmiarach: <a> w tekście i mniejszy <span>
   w kartach. Wielkość była jedyną różnicą i siedziała w atrybucie na wszystkich
   20 wystąpieniach. */
.ds-arrow { font-size: var(--text-body-size); }
.ds-arrow--sm { font-size: var(--text-small); }

/* Wariant z ramką. Świadomie NIE trafia do bazowej .ds-arrow-box, bo odziedziczyłby
   go też .ds-arrow-box--on-dark, który dziś ramki nie ma - patrz uwaga niżej. */
.ds-arrow-box--outline { border: 1px solid var(--black); color: var(--ink); }

/* Etykieta pola w formularzach rekrutacyjnych - większa od .field-label. */
.field-label--lg { font-family: var(--font-body); font-weight: 700; font-size: 14px; display: block; margin-bottom: 10px; }

/* Numer telefonu na stronach lokali. Dwa rozmiary zależnie od miejsca w karcie. */
.tel-link { font-family: var(--font-body); font-weight: 700; font-size: 20px; }
.tel-link--sm { font-family: var(--font-body); font-weight: 700; font-size: 18px; }

/* Gwiazdka odsyłająca do przypisu w tabeli kaloryczności. */
.footnote-mark { color: rgb(211, 39, 29); }

/* Ograniczenie długości wiersza w blokach tekstu. */
.measure { max-width: 36rem; }
.measure--wide { max-width: 42rem; }

/* ---------------------------------------------------------------------------
   KARTY, LISTY I STOSY (partia 4)

   Żaden z tych elementów nie miał klasy - style siedziały wyłącznie w atrybucie.
   Nazwy z kontekstu użycia, sprawdzonego w HTML. */

/* Blok tekstu z ograniczoną długością wiersza. */
.prose { max-width: 76ch; display: grid; gap: 14px; }
/* Nagłówek kolumny produktu w tabeli wartości. */
.tbl-colhead--dark-num { border: 1px solid var(--charcoal); background: var(--charcoal); color: var(--yellow); font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; padding: 12px 16px; min-width: 130px; }
/* Rząd tagów pod nazwą pozycji menu. */
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.stack-18 { display: grid; gap: 18px; }
.stack-14 { display: grid; gap: 14px; }
/* Wiersz FAQ z jaśniejszą kreską niż .faq-item. */
.faq-item--hairline { border-bottom: 1px solid var(--gray-300); }
/* Opakowanie ikony SVG w linii (strzałki, ikony social). */
.icon-inline { display:inline-flex; }
/* Zdjęcie wypełniające swoje pudełko. */
.img-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Opakowanie karty - punkt odniesienia dla odznaki pozycjonowanej absolutnie. */
.card-wrap { position: relative; }
/* Karta lokalu na jasnym tle. */
.card-soft { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.stack-4 { display: grid; gap: 4px; }
/* Osadzona mapa/wideo wypełniające kontener. */
.embed-fill { position: absolute; inset: 0px; width: 100%; height: 100%; border: 0px; }
.row-between-center { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; }
/* Pole wieloliniowe w formularzach. */
.field-textarea { border: 1px solid var(--gray-300); border-radius: 3px; height: 76px; padding: 10px 12px 0px; font-family: var(--font-body); font-size: 14px; width: 100%; box-sizing: border-box; background: rgb(255, 255, 255); }

/* ---------------------------------------------------------------------------
   PARTIA 5 - style sprzężone z regułami responsywnymi

   Każdy wzorzec z tej grupy był celem żywego selektora [style*=...] w mobile.css.
   Reguła mobilna JEST tu częścią definicji klasy, nie dodatkiem - rozdzielenie
   ich to dokładnie ten błąd, przez który RWD siatek umarło wcześniej (krok 11a).
   Wartości mobilne 1:1 z mobile.css. */

/* Rząd dwóch pól formularza (imię + e-mail). */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row--lg { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Karta z formularzem kontaktowym. */
.card-form { border: 2px solid var(--ink); border-radius: var(--radius-card); background: rgb(255, 255, 255); padding: 28px 30px; box-shadow: var(--shadow-card); }
/* Pasek zachęty z przyciskiem. */
.card-cta { border: 2px solid var(--ink); border-radius: var(--radius-card); padding: 36px 44px; display: flex; align-items: center; justify-content: space-between; gap: 32px; background: rgb(255, 255, 255); flex-wrap: wrap; }
/* Karta lokalu: mapa obok danych adresowych. */
.venue-card { border: 1px solid var(--ink); border-radius: var(--radius-card); overflow: hidden; background: rgb(255, 255, 255); display: grid; grid-template-columns: 1fr 1fr; }
/* Podział z węższą kolumną lewą. */
.split-narrow { display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: start; }
/* Podział z szerokim odstępem. */
.split-loose { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
/* Slot zdjęcia 240 px - dołącza do rodziny .slot-190/220/260/340/380. */
.slot-240 { display: block; width: 100%; height: 240px; border-radius: 0px; }
.slot-240--mt { margin-top: 6px; }

/* Odpowiedniki reguł, które w mobile.css celowały w atrybut style. */
@media (max-width: 767px) {
  .field-row, .field-row--lg, .venue-card,
  .split-narrow, .split-loose { grid-template-columns: 1fr; }
  .split-narrow, .split-loose { gap: 26px; }
  .card-form, .card-cta { padding: 22px 20px; }
  .slot-240 { height: 170px; }
}