/* ============================================================
   MOTO WEKTOR — czysty, poważny layout (mono: biel / czerń / szarości)
   Inspiracja czystością nowoczesnych stron, ale NIE apple:
   wyrównanie do lewej, solidny header + górny pasek kontaktu,
   cieńsze zaokrąglenia, hairline'y, ciemna stopka. Kolor tylko w logo.
   ============================================================ */

/* ---------- 1. Tokeny ---------- */
:root {
  --white: #ffffff;
  --gray: #f3f3f4;
  --gray-2: #e6e6e9;
  --ink: #161617;
  --muted: #5f6065;
  --line: #d8d8dc;
  --black: #0e0e10;
  --on-dark: #ededee;
  --muted-dark: #9a9ba0;
  --line-dark: #2a2a2e;

  --footer-bg: #131315;
  --header-bg: #ffffff; /* spójny jasny nagłówek (utilbar + nav) */

  --logo-amber: #f7a30f;

  --font-head: "Manrope", "IBM Plex Sans", Arial, sans-serif; /* nagłówki i UI — geometryczny charakter */
  --font: "IBM Plex Sans", system-ui, sans-serif;             /* tekst */

  --fs-hero: clamp(2.5rem, 5.6vw, 4.2rem);
  --fs-h2:   clamp(1.9rem, 4vw, 2.9rem);
  --fs-h3:   clamp(1.3rem, 2.1vw, 1.6rem);
  --fs-lead: clamp(1.1rem, 1.6vw, 1.4rem);
  --fs-body: 1.0625rem;
  --fs-sm:   0.875rem;
  --fs-xs:   0.78rem;

  --maxw: 1080px;
  --maxw-wide: 1240px;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --radius: 10px;
  --radius-lg: 14px;
  --nav-h: 64px;
  --top-chrome: 102px; /* utilbar + nav razem; mierzone dokładnie w JS */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t: 300ms;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 38px); }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.55;
  color: var(--ink); background: var(--white);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }

/* ---------- 2b. Własny pasek przewijania (monochromatyczny, dyskretny) ----------
   scrollbar-width tylko tam, gdzie nie ma ::-webkit-scrollbar — w Chromium wyłączyłby stylowanie pigułki */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: #b9b9bf transparent; }
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #b9b9bf; border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink); background-clip: padding-box; border-width: 2px; }
::-webkit-scrollbar-corner { background: transparent; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; color: var(--ink); text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- 3–4. Nawigacja premium („Tesla-like”): jasny, czysty, minimalistyczny top ----------
   Pasek kontaktu (utilbar) usunięty z układu — dane przeniesione do menu i stopki. */
.utilbar { display: none; }

.nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); background: rgba(255,255,255,0.82); -webkit-backdrop-filter: saturate(150%) blur(16px); backdrop-filter: saturate(150%) blur(16px); border-bottom: 1px solid var(--line); transition: background var(--t), border-color var(--t), box-shadow var(--t); }
.nav.is-scrolled { box-shadow: 0 8px 30px -22px rgba(0,0,0,0.4); }
.nav__inner { max-width: var(--maxw-wide); height: 100%; margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: clamp(0.8rem, 2.4vw, 2rem); }
.nav__logo { flex: none; display: flex; align-items: center; }
.nav__logo .brand__logo { height: 28px; width: auto; color: var(--ink); transition: color var(--t); }
.nav__menu { display: flex; align-items: center; gap: clamp(0.3rem, 1.2vw, 0.9rem); margin-right: auto; }
.nav__menu > a, .nav__more-btn { display: inline-flex; align-items: center; gap: 0.32rem; font: inherit; font-size: var(--fs-sm); font-weight: 600; line-height: 1; color: var(--ink); background: transparent; border: 0; padding: 0.5rem 0.75rem; border-radius: 8px; cursor: pointer; transition: background var(--t), color var(--t); }
.nav__menu > a:hover, .nav__more-btn:hover { background: rgba(22,22,23,0.06); }
.nav__menu > a[aria-current="page"] { background: rgba(22,22,23,0.07); }

/* „Odkrywaj” — rozwijane menu drugorzędne */
.nav__more { position: relative; }
/* niewidzialny mostek pod „Odkrywaj" — żeby menu nie znikało przy przejściu kursora do listy */
.nav__more::before { content: ""; position: absolute; left: -8px; right: -8px; top: 100%; height: 16px; }
.nav__more-btn::after { content: ""; width: 6px; height: 6px; margin-left: 0.1rem; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: rotate(45deg) translateY(-1px); opacity: 0.65; transition: transform var(--t) var(--ease); }
.nav__more-btn[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(2px); }
.nav__drop { position: absolute; top: calc(100% + 9px); left: 50%; min-width: 210px; transform: translateX(-50%) translateY(-8px); background: #fff; border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 28px 64px -30px rgba(0,0,0,0.45); padding: 0.45rem; display: grid; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.nav__more.is-open .nav__drop, .nav__more:focus-within .nav__drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
@media (hover: hover) { .nav__more:hover .nav__drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } }
.nav__drop a { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); padding: 0.66rem 0.85rem; border-radius: 9px; transition: background var(--t); }
.nav__drop a:hover, .nav__drop a[aria-current="page"] { background: var(--gray); }

.nav__cta { flex: none; font-size: var(--fs-sm); font-weight: 700; color: #fff; background: var(--ink); padding: 0.6rem 1.2rem; border-radius: 999px; transition: background var(--t), color var(--t), transform var(--t) var(--ease), border-color var(--t); }
.nav__cta:hover { background: #000; transform: translateY(-1px); }
.menu-toggle { display: none; width: 42px; height: 42px; flex-direction: column; gap: 5px; justify-content: center; align-items: center; border-radius: 9px; background: transparent; }
.menu-toggle span { width: 21px; height: 2px; background: var(--ink); border-radius: 2px; transition: background var(--t); }

/* Nawigacja przezroczysta nad wideo-hero (strona główna) */
body.home .nav { position: fixed; left: 0; right: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
body.home .vhero { min-height: 100svh; }
body.home .nav:not(.is-scrolled) .nav__logo .brand__logo,
body.home .nav:not(.is-scrolled) .nav__menu > a,
body.home .nav:not(.is-scrolled) .nav__more-btn { color: #fff; }
body.home .nav:not(.is-scrolled) .nav__menu > a:hover,
body.home .nav:not(.is-scrolled) .nav__more-btn:hover,
body.home .nav:not(.is-scrolled) .nav__menu > a[aria-current="page"] { background: rgba(255,255,255,0.18); }
body.home .nav:not(.is-scrolled) .menu-toggle span { background: #fff; }
/* CTA nad wideo: solidna biel — najważniejszy przycisk musi być widoczny w każdej klatce filmu */
body.home .nav:not(.is-scrolled) .nav__cta { background: #fff; color: var(--ink); box-shadow: 0 12px 32px -14px rgba(0,0,0,0.6); }
body.home .nav:not(.is-scrolled) .nav__cta:hover { background: #e9e9ec; color: #000; }
/* scrim czytelności pod headerem nad wideo */
body.home .nav:not(.is-scrolled)::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 148px; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, rgba(8,8,10,0.66) 0%, rgba(8,8,10,0.34) 48%, rgba(8,8,10,0) 100%); }
body.home .nav.is-scrolled { background: rgba(255,255,255,0.82); -webkit-backdrop-filter: saturate(150%) blur(16px); backdrop-filter: saturate(150%) blur(16px); border-bottom-color: var(--line); }

/* Menu mobilne (pełny overlay) */
.mobile-menu { position: fixed; inset: 0; z-index: 110; background: var(--white); padding: 1.4rem var(--gutter) 2rem; transform: translateX(100%); transition: transform var(--t) var(--ease); visibility: hidden; overflow-y: auto; }
.mobile-menu.is-open { transform: translateX(0); visibility: visible; }
.mobile-menu nav { display: grid; margin-top: 3.4rem; }
.mobile-menu a { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); padding: 1rem 0; border-bottom: 1px solid var(--line); }
.mobile-menu__contact { margin-top: 1.7rem; display: grid; gap: 0.45rem; font-size: var(--fs-sm); color: var(--muted); }
.mobile-menu__contact a { color: var(--ink); font-weight: 600; }
.mobile-menu__close { position: absolute; top: 1rem; right: var(--gutter); width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; }

@media (max-width: 860px) { .nav__menu, .nav__cta { display: none; } .menu-toggle { display: flex; } }

/* ---------- 5. Panele (wyrównane do lewej) ---------- */
.panel { padding: clamp(3.4rem, 7vw, 6rem) var(--gutter); position: relative; }
.panel--white { background: var(--white); color: var(--ink); }
.panel--gray { background: var(--gray); color: var(--ink); border-block: 1px solid var(--line); }
.panel--black { background: var(--black); color: var(--on-dark); }
.panel--black h1, .panel--black h2, .panel--black h3 { color: #fff; }
.panel__inner { max-width: var(--maxw); margin-inline: auto; }
.panel__eyebrow { font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; }
.panel--black .panel__eyebrow { color: var(--muted-dark); }
.panel h1 { font-size: var(--fs-hero); max-width: 18ch; }
.panel h2 { font-size: var(--fs-h2); max-width: 20ch; }
.panel__sub { font-size: var(--fs-lead); color: var(--muted); margin-top: 1rem; max-width: 52ch; line-height: 1.45; }
.panel--black .panel__sub { color: #c2c3c7; }
.panel__links { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.8rem 1.8rem; align-items: center; }
.panel__media { margin-top: clamp(2.2rem, 5vw, 3.4rem); }
.panel__media .ph { border-radius: var(--radius-lg); aspect-ratio: 16 / 8.5; }

/* Hero z wideo w tle (pełna wysokość, kinowy) */
.vhero { position: relative; overflow: hidden; background: #0e0e10; color: #fff; min-height: calc(100svh - var(--top-chrome)); display: flex; align-items: flex-end; }
.vhero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* scrim: dół pod treścią, góra pod headerem — środek kadru zostaje odsłonięty */
.vhero__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(8,8,10,0.88) 0%, rgba(8,8,10,0.65) 28%, rgba(8,8,10,0) 58%); }

/* „dolna tercja": treść w pasie przy dolnej krawędzi, nad hairlinem — nie zasłania filmu */
.vhero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--maxw-wide); margin-inline: auto; padding: 0 var(--gutter) clamp(2.4rem, 5.5vh, 3.8rem); }
.vhero__panel { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.4rem 3rem; padding-top: clamp(1.3rem, 2.6vh, 1.9rem); }
.vhero__panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.32); transform-origin: left center; }
html.js .vhero__panel::before { animation: vheroLine 1.2s var(--ease) 0.15s both; }
@keyframes vheroLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.vhero__kicker { font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.92); text-shadow: 0 1px 14px rgba(0,0,0,0.45); margin-bottom: 0.75rem; }
.vhero h1 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 600; letter-spacing: -0.022em; max-width: 20ch; }
.vhero__sub { font-size: clamp(1rem, 1.25vw, 1.15rem); color: rgba(255,255,255,0.88); margin-top: 0.7rem; max-width: 54ch; line-height: 1.5; }
.vhero__actions { display: flex; flex-direction: column; gap: 0.7rem; flex: 0 0 auto; width: min(100%, 250px); padding-bottom: 0.25rem; }
.vhero__actions .btn-pill { flex: none; width: 100%; }
@media (max-width: 700px) { .vhero__actions { width: 100%; } }
.vhero .btn-pill--solid { background: #fff; color: var(--ink); }
.vhero .btn-pill--solid:hover { background: #e6e6e9; }
.vhero .btn-pill--ghost { background: rgba(16,16,18,0.35); color: #fff; border: 1px solid rgba(255,255,255,0.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vhero .btn-pill--ghost:hover { background: rgba(16,16,18,0.6); border-color: rgba(255,255,255,0.8); }

/* sygnaturowe wejście hero (raz, przy załadowaniu) */
html.js .vhero__copy > *, html.js .vhero__actions { opacity: 0; transform: translateY(18px); animation: vheroRise 0.8s var(--ease) forwards; }
html.js .vhero__copy > *:nth-child(1) { animation-delay: 0.18s; }
html.js .vhero__copy > *:nth-child(2) { animation-delay: 0.3s; }
html.js .vhero__copy > *:nth-child(3) { animation-delay: 0.42s; }
html.js .vhero__actions { animation-delay: 0.54s; }
@keyframes vheroRise { to { opacity: 1; transform: none; } }

/* ---------- 6. Linki ze strzałką + przyciski ---------- */
.chev { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--ink); background: transparent; border: 1.6px solid var(--ink); border-radius: 7px; padding: 0.8rem 1.5rem; transition: background var(--t), color var(--t), border-color var(--t), transform var(--t) var(--ease); }
.chev::after { content: "→"; content: "→" / ""; transition: transform var(--t) var(--ease); }
.chev:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.chev:hover::after { transform: translateX(4px); }
.chev--sm { font-size: var(--fs-sm); padding: 0.58rem 1.1rem; }
/* na ciemnym tle */
.panel--black .chev, .tile--black .chev { color: #fff; border-color: rgba(255,255,255,0.55); }
.panel--black .chev:hover, .tile--black .chev:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--ink); color: #fff; border-radius: 6px; padding: 0.72rem 1.35rem; font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.01em; transition: background var(--t), transform var(--t) var(--ease); }
.btn:hover { background: #000; }
.btn:active { transform: scale(0.985); }
.panel--black .btn { background: #fff; color: var(--ink); }
.panel--black .btn:hover { background: #e6e6e9; }
.btn--lg { padding: 1.05rem 2.15rem; font-size: 1.08rem; }

/* ---------- 7. Placeholder zdjęć ---------- */
.ph { position: relative; width: 100%; height: 100%; min-height: 120px; background: var(--gray-2);
  display: grid; place-items: center; overflow: hidden; color: var(--muted); border-radius: inherit; }
.ph--dark { background: #1c1c1f; color: var(--muted-dark); }
.ph__tag { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); font-weight: 500; padding: 0.4rem 0.85rem; border: 1px dashed currentColor; border-radius: 6px; opacity: 0.85; }
.ph__tag svg { width: 1.05em; height: 1.05em; }

/* ---------- 8. Kafelki (siatka, hairline, lewa) ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: var(--maxw-wide); margin: 14px auto 0; padding-inline: var(--gutter); }
.tile { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  min-height: clamp(380px, 42vw, 500px); padding: clamp(1.8rem, 3vw, 2.4rem); display: flex; flex-direction: column; transition: border-color var(--t), box-shadow var(--t); }
.tile:hover { border-color: #b9b9bf; box-shadow: 0 18px 40px -28px rgba(0,0,0,0.4); }
.tile--black { background: var(--black); border-color: var(--line-dark); color: var(--on-dark); }
.tile--black h3 { color: #fff; }
.tile h3 { font-size: var(--fs-h3); }
.tile__sub { font-size: var(--fs-body); color: var(--muted); margin-top: 0.5rem; max-width: 34ch; }
.tile--black .tile__sub { color: #bdbec2; }
.tile__links { margin-top: 1rem; display: flex; gap: 1.4rem; }
.tile__media { margin-top: auto; padding-top: 1.6rem; min-height: 0; flex: 1 1 auto; display: flex; align-items: flex-end; }
.tile__media .ph { min-height: 180px; border-radius: 8px; }

/* ---------- 9. Podstrony — intro (lewa) ---------- */
.page-intro { width: 100%; max-width: var(--maxw); margin-inline: auto; padding: clamp(3rem, 6vw, 5rem) var(--gutter) clamp(1.6rem, 3vw, 2.6rem); }
.page-intro .crumb { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 1rem; }
.page-intro .crumb a:hover { color: var(--ink); text-decoration: underline; }
.page-intro h1 { font-size: clamp(2.1rem, 3.8vw, 3.2rem); }
.page-intro p { font-size: var(--fs-lead); color: var(--muted); margin-top: 1rem; max-width: 60ch; }

/* Wiersz: tekst + zdjęcie (na zmianę) */
.feature { padding: clamp(2.4rem, 5vw, 3.6rem) var(--gutter); border-top: 1px solid var(--line); }
.feature__inner { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }
.feature:nth-child(even) .feature__text { order: 2; }
/* Notka szablonu (gdzie i jakie zdjęcia) */
.page-intro .tpl-note { display: flex; align-items: flex-start; gap: 0.6rem; max-width: 64ch; margin-top: 1.3rem; padding: 0.8rem 1rem; font-size: var(--fs-sm); color: var(--muted); background: var(--gray); border: 1px dashed var(--line); border-radius: var(--radius); }
.page-intro .tpl-note svg { width: 1.15em; height: 1.15em; flex: none; margin-top: 0.12em; }
.page-intro .tpl-note strong { color: var(--ink); }
.feature__media .ph { aspect-ratio: 4/3; border-radius: var(--radius); }
.feature__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); display: block; }
/* Zdjęcie produktowe (pojazd na białym tle — bez przycinania) */
.prod-photo { aspect-ratio: 4 / 3; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; padding: 0.6rem; }
.prod-photo img { width: 100%; height: 100%; object-fit: contain; aspect-ratio: auto; border-radius: 0; display: block; }

/* ---------- 9b. Galeria produktowa (carousel: przegląd + detal) ----------
   Bez JS: natywny scroll-snap (oba zdjęcia dostępne, treść nie ginie).
   Z JS:  własny silnik rAF — płynny slide, parallax, Ken-Burns, autoplay. */
.mw-gal { --gal-t: 640ms; position: relative; isolation: isolate; }
.mw-gal__stage {
  position: relative; aspect-ratio: 4 / 3; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  /* fallback bez JS: poziomy scroll-snap */
  overflow-x: auto; scroll-snap-type: x mandatory;
  -ms-overflow-style: none; scrollbar-width: none;
}
.mw-gal__stage::-webkit-scrollbar { display: none; }
html.js .mw-gal__stage { overflow: hidden; cursor: grab; touch-action: pan-y; }
html.js .mw-gal__stage.is-dragging { cursor: grabbing; }

.mw-gal__track { display: flex; height: 100%; }
html.js .mw-gal__track { will-change: transform; }

.mw-gal__slide {
  position: relative; flex: 0 0 100%; height: 100%;
  display: grid; place-items: center; scroll-snap-align: center; background: #fff;
}
.mw-gal__media { position: absolute; inset: 0; display: grid; place-items: center; padding: 0.7rem; overflow: hidden; }
.mw-gal__media img {
  width: 100%; height: 100%; object-fit: contain; aspect-ratio: auto; border-radius: 0;
}
html.js .mw-gal__media img { will-change: transform; }

/* podpis detalu (jedzie razem ze slajdem) — selektor scoped, by wygrać z `.feature p` */
.mw-gal .mw-gal__cap {
  position: absolute; left: 0.7rem; bottom: 0.7rem; z-index: 3; margin: 0; max-width: calc(100% - 1.4rem);
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 600; letter-spacing: -0.01em;
  color: #fff; background: rgba(18,18,20,0.84);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 0.46rem 0.8rem; border-radius: 7px; line-height: 1.2;
}
.mw-gal .mw-gal__cap::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; flex: none; opacity: 0.9; }

/* strzałki */
.mw-gal__nav {
  position: absolute; top: 50%; z-index: 4; width: 44px; height: 44px;
  display: none; place-items: center; transform: translateY(-50%);
  background: rgba(255,255,255,0.86); color: var(--ink);
  border: 1px solid var(--line); border-radius: 50%;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 10px 26px -16px rgba(0,0,0,0.55);
  opacity: 0; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), background var(--t), border-color var(--t);
}
html.js .mw-gal .mw-gal__nav { display: grid; }
.mw-gal__nav--prev { left: 0.7rem; transform: translateY(-50%) translateX(-6px); }
.mw-gal__nav--next { right: 0.7rem; transform: translateY(-50%) translateX(6px); }
.mw-gal:hover .mw-gal__nav, .mw-gal:focus-within .mw-gal__nav { opacity: 1; transform: translateY(-50%) translateX(0); }
.mw-gal__nav:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.mw-gal__nav:active { transform: translateY(-50%) scale(0.92); }
.mw-gal__nav svg { width: 18px; height: 18px; }
@media (hover: none) { html.js .mw-gal .mw-gal__nav { opacity: 1; transform: translateY(-50%); } }

/* kropki nawigacji */
.mw-gal__dots { position: absolute; right: 0.8rem; bottom: 0.85rem; z-index: 3; display: none; align-items: center; gap: 7px; }
html.js .mw-gal .mw-gal__dots { display: flex; }
.mw-gal__dot {
  width: 8px; height: 8px; border-radius: 99px; padding: 0; flex: none;
  background: rgba(22,22,23,0.28); border: 0; cursor: pointer;
  transition: width var(--t) var(--ease), background var(--t) var(--ease);
}
.mw-gal__dot[aria-current="true"] { width: 22px; background: var(--ink); }
.mw-gal__dot:hover { background: rgba(22,22,23,0.55); }

/* pasek postępu autoplay (góra sceny) */
.mw-gal__bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 5; display: none; background: rgba(22,22,23,0.08); }
html.js .mw-gal .mw-gal__bar { display: block; }
.mw-gal__bar i { display: block; height: 100%; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left center; }

.mw-gal__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .mw-gal__nav { opacity: 1 !important; }
  .mw-gal__bar { display: none !important; }
}

/* Wyróżnienia (panel ciemny) */
.awards { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }
.award { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm); padding: 0.6rem 1.05rem; border: 1px solid rgba(255,255,255,0.25); border-radius: 8px; color: #fff; }
.feature h2 { font-size: var(--fs-h2); }
.feature p { color: var(--muted); margin-top: 0.8rem; font-size: var(--fs-lead); line-height: 1.45; }
.feature__links { margin-top: 1.2rem; display: flex; gap: 1.6rem; flex-wrap: wrap; }
.feature ul { margin-top: 1.2rem; display: grid; gap: 0.55rem; }
.feature ul li { position: relative; padding-left: 1.5rem; color: var(--muted); font-size: var(--fs-body); }
.feature ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; background: var(--ink); }

/* ---------- 10. Galeria ---------- */
.grid-gallery { max-width: var(--maxw-wide); margin: 0 auto; padding: 0 var(--gutter) clamp(3rem,6vw,5rem); display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.shot { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4/3; background: var(--gray-2); border: 1px solid var(--line); }
.shot .ph { transition: transform 700ms var(--ease); }
.shot:hover .ph { transform: scale(1.04); }
.shot__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 1.1rem 0.9rem; color: #fff; font-size: var(--fs-sm); font-weight: 600; background: linear-gradient(transparent, rgba(0,0,0,0.65)); }

/* ---------- 11. Statystyki ---------- */
.stats { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.stat { border-top: 2px solid var(--line-dark); padding-top: 1rem; }
.stat__num { font-family: var(--font-head); font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.stat__label { margin-top: 0.5rem; font-size: var(--fs-sm); color: var(--muted-dark); }

/* ---------- 12. Kontakt — karty informacji ---------- */
.info-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.info-card { background: var(--white); padding: 1.5rem 1.4rem; }
.info-card h3 { font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.7rem; }
.info-card a, .info-card p { font-size: var(--fs-lead); color: var(--ink); display: block; line-height: 1.4; }
.info-card a:hover { text-decoration: underline; }
.info-card span { font-size: var(--fs-sm); color: var(--muted); }

.contact { max-width: var(--maxw); margin-inline: auto; }
.form { display: grid; gap: 1.15rem; max-width: 680px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.field { display: grid; gap: 0.45rem; }
.field label { font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea { font: inherit; font-size: var(--fs-body); padding: 0.92rem 1.05rem; background: var(--gray); color: var(--ink); border: 1px solid transparent; border-radius: 12px; transition: border-color var(--t), background var(--t), box-shadow var(--t); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background-color: var(--white); border-color: var(--ink); box-shadow: 0 0 0 4px rgba(22,22,23,0.08); }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23161617' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.05rem center; padding-right: 2.8rem; cursor: pointer; }
.field textarea { resize: vertical; min-height: 150px; }
.form__note { font-size: var(--fs-xs); color: var(--muted); }
.field__opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.form__submit { justify-self: start; display: inline-flex; align-items: center; gap: 0.55rem; background: var(--ink); color: #fff; border-radius: 999px; padding: 1rem 2.1rem; font-family: var(--font-head); font-size: 1.02rem; font-weight: 700; transition: background var(--t), transform var(--t) var(--ease), box-shadow var(--t); }
.form__submit::after { content: "→"; content: "→" / ""; transition: transform var(--t) var(--ease); }
.form__submit:hover { background: #000; transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(0,0,0,0.55); }
.form__submit:hover::after { transform: translateX(4px); }
.form__submit:active { transform: translateY(0) scale(0.985); }

/* ---------- Kontakt: formularz + ciemna karta danych + mapa ---------- */
.contact-layout { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(1.8rem, 4vw, 3.6rem); align-items: start; }
.contact-main h2 { font-size: var(--fs-h2); margin-bottom: 1.5rem; }
.contact-main .form { max-width: none; }
.contact-card { position: sticky; top: calc(var(--nav-h) + 20px); background: var(--footer-bg); color: var(--on-dark); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.1rem); }
.contact-card__row { padding-block: 1.05rem; border-top: 1px solid var(--line-dark); }
.contact-card__row:first-child { border-top: 0; padding-top: 0; }
.contact-card__row:last-child { padding-bottom: 0; }
.contact-card__row .contact-card__label { font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted-dark); margin-bottom: 0.45rem; }
.contact-card__row a { display: block; width: fit-content; color: #fff; font-weight: 600; line-height: 1.5; transition: opacity var(--t); }
.contact-card__row a:hover { opacity: 0.72; }
.contact-card__row a.contact-card__tel { font-family: var(--font-head); font-size: clamp(1.15rem, 1.6vw, 1.35rem); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; line-height: 1.55; }
.contact-card__row p { margin: 0; color: var(--on-dark); line-height: 1.55; }
.contact-card__row small { display: block; font-size: var(--fs-sm); color: var(--muted-dark); margin-top: 0.3rem; }
.map-embed { max-width: var(--maxw); margin-inline: auto; aspect-ratio: 21 / 7; min-height: 240px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--gray-2); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) contrast(1.04); }
@media (max-width: 860px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-card { position: static; }
  .map-embed { aspect-ratio: 4 / 3; }
}

/* ---------- Realizacje: siatka kart ---------- */
.real-grid { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: clamp(1rem, 2.4vw, 1.6rem); }
.real-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t); }
.real-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(0,0,0,0.42); border-color: #c8c8cc; }
.real-card__media { aspect-ratio: 4 / 3; background: #fff; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.real-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 0.6rem; transition: transform 600ms var(--ease); }
.real-card:hover .real-card__media img { transform: scale(1.04); }
.real-card__body { padding: 0.9rem 1rem 1.05rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.real-card__body h3 { font-family: var(--font-head); font-size: var(--fs-body); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.real-card__meta { margin-top: auto; padding-top: 0.4rem; font-size: var(--fs-sm); color: var(--muted); display: inline-flex; align-items: center; gap: 0.4rem; }
.real-card__meta svg { width: 1em; height: 1em; }

/* ---------- Realizacja: strona szczegółów ---------- */
.real-detail { max-width: var(--maxw); margin-inline: auto; }
.real-back { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--fs-sm); color: var(--muted); margin-bottom: 1rem; }
.real-back:hover { color: var(--ink); }
.real-back svg { width: 1.05em; height: 1.05em; }
.mw-gal--detail .mw-gal__stage { aspect-ratio: 3 / 2; }
.real-detail__info { margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.real-detail__info.has-specs { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1.4rem, 4vw, 3rem); align-items: start; }
.real-detail__desc p { font-size: var(--fs-lead); color: var(--muted); line-height: 1.62; max-width: 68ch; }
.real-specs { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; align-self: start; }
.real-specs__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.8rem 1rem; font-size: var(--fs-sm); }
.real-specs__row + .real-specs__row { border-top: 1px solid var(--line); }
.real-specs__k { color: var(--muted); }
.real-specs__v { color: var(--ink); font-weight: 600; text-align: right; }
@media (max-width: 760px) { .real-detail__info.has-specs { grid-template-columns: 1fr; } }

/* ---------- Oferta: katalog filtrowany grupami ---------- */
/* intro oferty na tej samej szerokiej osi co karty i sekcje */
.page-intro--wide { max-width: var(--maxw-wide); }

/* marki podwozi w intro oferty — te same białe kafle co na stronie głównej */
.oferta-brands { margin-top: clamp(2rem, 4vw, 2.8rem); }

/* mapa oferty: 4 karty grup z listą typów — jasny punkt startu */
.ocat { max-width: var(--maxw-wide); margin-inline: auto; padding: clamp(1.2rem, 2.6vw, 2.2rem) var(--gutter) clamp(2.6rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ocat__card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); padding: 1.35rem 1.4rem 1.25rem; display: flex; flex-direction: column; transition: border-color var(--t), box-shadow var(--t); }
.ocat__card:hover { border-color: #c4c4c9; box-shadow: 0 16px 36px -26px rgba(0,0,0,0.4); }
.ocat__title { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; font-family: var(--font-head); font-weight: 700; color: var(--ink); padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); margin-bottom: 0.7rem; }
.ocat__title::after { content: "→"; content: "→" / ""; color: var(--muted); transition: transform var(--t) var(--ease), color var(--t); }
.ocat__card:hover .ocat__title::after { transform: translateX(4px); color: var(--ink); }
.ocat__item { width: fit-content; font-size: var(--fs-sm); color: var(--muted); padding: 0.34rem 0; transition: color var(--t); }
.ocat__item:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .ocat { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ocat { grid-template-columns: 1fr; } }

/* grupy typów: cienki nagłówek-separator; z JS strona działa jak filtrowany katalog (jedna grupa naraz) */
.ogroup { border-top: 1px solid var(--line); scroll-margin-top: 1.6rem; }
html.js .ogroup { display: none; }
html.js .ogroup.is-active { display: block; }

/* przełącznik pozostałych grup na końcu aktywnej grupy — te same karty co w mapie u góry */
.oswitch { max-width: var(--maxw-wide); margin-inline: auto; padding: clamp(2.2rem, 4.5vw, 3.4rem) var(--gutter) clamp(2.6rem, 5vw, 4rem); }
.oswitch__label { font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.1rem; }
.oswitch .ocat { padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .oswitch .ocat { grid-template-columns: 1fr; } }
.ogroup__head { max-width: var(--maxw-wide); margin-inline: auto; padding: clamp(2.2rem, 4.5vw, 3.2rem) var(--gutter) 0; display: flex; align-items: baseline; gap: 0.9rem; }
.ogroup__head p { font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.ogroup__head span { font-size: var(--fs-xs); color: var(--muted); opacity: 0.75; }

/* rozwijane szczegóły (natywne <details>) — miękkie szare karty, spójne z polami formularza */
.otype__accs { margin-top: 1.4rem; display: grid; gap: 0.55rem; }
.otype__acc { background: var(--gray); border: 1px solid transparent; border-radius: 12px; transition: background var(--t), border-color var(--t); }
.otype__acc:hover { border-color: var(--line); }
.otype__acc[open] { background: #eeeef0; }
.otype__acc summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.92rem 1.15rem; font-family: var(--font-head); font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; border-radius: 12px; }
.otype__acc summary::-webkit-details-marker { display: none; }
.otype__acc summary::after { content: ""; width: 9px; height: 9px; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: rotate(45deg) translateY(-2px); flex: none; margin-right: 0.15rem; opacity: 0.55; transition: transform var(--t) var(--ease), opacity var(--t); }
.otype__acc[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.otype__acc summary:hover::after { opacity: 1; }
.otype__acc-body { padding: 0 1.15rem 1.1rem; color: var(--muted); font-size: var(--fs-body); }
.otype__acc-body > p { margin-bottom: 0.65rem; max-width: 56ch; }
.otype__acc-body > p:last-child { margin-bottom: 0; }
.otype__acc-body ul { display: grid; gap: 0.5rem; }
.otype__acc-body li { position: relative; padding-left: 1.15rem; }
.otype__acc-body li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; background: var(--ink); opacity: 0.5; }
.otype__acc-body b { color: var(--ink); font-weight: 600; }

.otype { padding: clamp(2.8rem, 6vw, 4.6rem) var(--gutter); scroll-margin-top: 1.6rem; }
.otype + .otype { border-top: 1px solid var(--line); }
.otype__inner { max-width: var(--maxw-wide); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.8rem, 5vw, 4rem); align-items: center; }
.otype--rev .otype__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.otype--rev .otype__text { order: 2; }
.otype h2 { font-size: var(--fs-h2); }
.otype__lead { font-size: var(--fs-lead); color: var(--muted); margin-top: 0.8rem; line-height: 1.45; max-width: 50ch; }
.otype__body { color: var(--muted); margin-top: 0.8rem; max-width: 54ch; }
.otype__list { margin-top: 1.3rem; display: grid; gap: 0.6rem; }
.otype__list li { position: relative; padding-left: 1.45rem; color: var(--ink); font-size: var(--fs-body); }
.otype__list li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 7px; height: 7px; background: var(--ink); }
.otype__cta { margin-top: 1.5rem; display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }

/* mozaika zdjęć: duży kadr + kwadratowe kafle (bez strzałek) */
.omedia { display: grid; gap: 10px; }
.omedia__main { position: relative; aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 0; }
.omedia__main img { width: 100%; height: 100%; object-fit: contain; padding: 0.6rem; transition: opacity 220ms var(--ease); }
.omedia__main.is-fading img { opacity: 0; }
.omedia__cap { position: absolute; left: 0.7rem; bottom: 0.7rem; z-index: 2; max-width: calc(100% - 1.4rem); display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 600; letter-spacing: -0.01em; color: #fff; background: rgba(18,18,20,0.84); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 0.46rem 0.8rem; border-radius: 7px; line-height: 1.2; }
.omedia__cap::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; flex: none; opacity: 0.9; }
.omedia__thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.omedia__thumb { position: relative; width: clamp(64px, 7.5vw, 88px); aspect-ratio: 1; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; padding: 0; background: #fff; cursor: pointer; transition: border-color var(--t); }
.omedia__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease), opacity var(--t); }
.omedia__thumb:hover { border-color: #aeaeb4; }
.omedia__thumb:hover img { transform: scale(1.08); }
.omedia__thumb.is-active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.omedia__thumb.is-active img { opacity: 0.85; }
.otype__more { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm); color: var(--muted); display: inline-flex; align-items: center; gap: 0.4rem; transition: color var(--t); }
.otype__more::after { content: "→"; content: "→" / ""; transition: transform var(--t) var(--ease); }
.otype__more:hover { color: var(--ink); }
.otype__more:hover::after { transform: translateX(4px); }
@media (max-width: 900px) {
  .otype__inner, .otype--rev .otype__inner { grid-template-columns: 1fr; }
  .otype--rev .otype__text { order: 0; }
  .otype__media { order: -1; }
}

/* ---------- O firmie: układ edytorski (asymetria, offsetowa ramka, pas hali) ---------- */
.about-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem 2rem; margin-top: clamp(1.9rem, 4vw, 2.8rem); }
.about-facts b { display: block; font-family: var(--font-head); font-size: clamp(1.45rem, 2.3vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.about-facts span { display: block; margin-top: 0.3rem; font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 560px) { .about-facts b { font-size: 1.3rem; } }

.about-split { max-width: var(--maxw); margin-inline: auto; padding: clamp(2.6rem, 6vw, 4.6rem) var(--gutter); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6.5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.about-split--rev { grid-template-columns: minmax(0, 6.5fr) minmax(0, 5fr); }
.about-split__media { position: relative; }
.about-split__media::after { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--line); border-radius: var(--radius-lg); transform: translate(18px, 18px); }
.about-split--rev .about-split__media::after { transform: translate(-18px, 18px); }
.about-split__media img { width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover; border-radius: var(--radius-lg); }
.about-split__cap { position: absolute; left: 0.9rem; bottom: 0.9rem; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 600; color: #fff; background: rgba(18,18,20,0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 0.45rem 0.85rem; border-radius: 7px; max-width: calc(100% - 1.8rem); }
.about-split__cap::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: 0.9; flex: none; }
.about-split h2 { font-size: var(--fs-h2); }
.about-split__text > p:not(.panel__eyebrow) { color: var(--muted); margin-top: 0.9rem; font-size: var(--fs-lead); line-height: 1.5; max-width: 54ch; }
.about-list { margin-top: 1.5rem; display: grid; }
.about-list li { display: flex; gap: 0.8rem; align-items: baseline; padding: 0.75rem 0.1rem; border-top: 1px solid var(--line); color: var(--ink); font-size: var(--fs-body); }
.about-list li:last-child { border-bottom: 1px solid var(--line); }
.about-list li::before { content: "→"; content: "→" / ""; color: var(--muted); flex: none; }

/* pas pełnej szerokości ze zdjęciem hali */
.about-band { position: relative; min-height: clamp(340px, 52vh, 540px); display: grid; place-items: center; text-align: center; overflow: hidden; color: #fff; }
.about-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-band::after { content: ""; position: absolute; inset: 0; background: rgba(10,10,12,0.68); }
.about-band__inner { position: relative; z-index: 1; max-width: 44rem; padding: clamp(2.5rem, 6vw, 4rem) var(--gutter); }
.about-band h2 { color: #fff; font-size: var(--fs-h2); }
.about-band p { color: rgba(255,255,255,0.85); font-size: var(--fs-lead); margin-top: 0.9rem; }
.about-band .btn { background: #fff; color: var(--ink); margin-top: 1.6rem; }
.about-band .btn:hover { background: #e6e6e9; }

/* wyróżnienia: wyciszone logotypy ożywają po najechaniu */
.award-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 2rem; }
.award-tile { display: grid; gap: 1.1rem; justify-items: center; align-content: space-between; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.7rem 1.2rem 1.3rem; transition: transform var(--t) var(--ease), box-shadow var(--t), border-color var(--t); }
.award-tile:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -28px rgba(0,0,0,0.45); border-color: #c4c4c9; }
.award-tile img { max-height: 82px; width: auto; max-width: 100%; object-fit: contain; }
.award-tile figcaption { font-size: var(--fs-sm); color: var(--muted); text-align: center; }
@media (max-width: 700px) { .award-row { grid-template-columns: 1fr 1fr; } }

/* indeks „co produkujemy" → linki do oferty */
.prod-index { margin-top: 1.8rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(1.6rem, 4vw, 3.2rem); }
.prod-index a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.95rem 0.15rem; border-bottom: 1px solid var(--line); font-family: var(--font-head); font-weight: 600; color: var(--ink); transition: padding-left var(--t) var(--ease); }
.prod-index a::after { content: "→"; content: "→" / ""; color: var(--muted); transition: transform var(--t) var(--ease), color var(--t); }
.prod-index a:hover { padding-left: 0.55rem; }
.prod-index a:hover::after { transform: translateX(4px); color: var(--ink); }
@media (max-width: 700px) { .prod-index { grid-template-columns: 1fr; } }

/* serwis: nagłówek obok treści */
.about-serwis { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; }
.about-serwis h2 { font-size: var(--fs-h2); }
.about-serwis > p { font-size: var(--fs-lead); color: var(--muted); line-height: 1.55; margin: 0; max-width: 54ch; }

@media (max-width: 900px) {
  .about-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-split, .about-split--rev { grid-template-columns: 1fr; }
  .about-split__media { order: -1; }
  .about-serwis { grid-template-columns: 1fr; }
}

/* ===== Strona główna: pełnoekranowe panele, płynne przewijanie (BEZ scroll-snap) ===== */
/* scroll-padding-top: 0 — karuzela sama rezerwuje miejsce na nav; globalny offset zdublowałby go */
html:has(body.home) { scroll-behavior: smooth; scroll-padding-top: 0; }

.hpanel { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; display: grid; }
.hpanel--light { background: var(--gray); color: var(--ink); }

.hpanel__content { position: relative; z-index: 2; align-self: start; justify-self: center; text-align: center; padding: clamp(5.5rem, 14vh, 10rem) var(--gutter) 0; max-width: 46rem; }
.hpanel__eyebrow { font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.78; margin-bottom: 0.7rem; }
.hpanel__content h2 { font-size: clamp(2.1rem, 5.2vw, 3.8rem); line-height: 1.05; }
.hpanel__sub { font-size: var(--fs-lead); margin-top: 0.85rem; max-width: 38ch; margin-inline: auto; opacity: 0.92; }

.hpanel__cta { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(2.4rem, 7vh, 4.8rem); display: flex; gap: 0.9rem; flex-wrap: wrap; justify-content: center; padding-inline: var(--gutter); }
.btn-pill { flex: 0 1 220px; min-width: 180px; display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 0.92rem 1.5rem; border-radius: 999px; font-family: var(--font-head); font-weight: 600; font-size: 0.96rem; transition: background var(--t), color var(--t), transform var(--t) var(--ease), border-color var(--t); }
.btn-pill:hover { transform: translateY(-2px); }
.btn-pill--solid { background: var(--ink); color: #fff; }
.btn-pill--solid:hover { background: #000; }
.btn-pill--ghost { background: rgba(255,255,255,0.7); color: var(--ink); border: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-pill--ghost:hover { background: #fff; }
/* ===== Karuzela zabudów (home): przeglądanie strzałkami ←/→, całe auto zawsze w kadrze ===== */
.hshow { position: relative; min-height: 100svh; background: #fff; color: var(--ink); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding-top: calc(var(--nav-h) + clamp(0.5rem, 1.8vh, 1.2rem)); overflow: hidden; }

/* zakładki typów — szybki skok do konkretnej zabudowy */
.hshow__tabs { display: flex; gap: 0.3rem; width: fit-content; max-width: 100%; margin-inline: auto; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 0.35rem var(--gutter); }
.hshow__tabs::-webkit-scrollbar { display: none; }
.hshow__tab { flex: none; white-space: nowrap; font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); padding: 0.52rem 1.05rem; border-radius: 999px; transition: color var(--t), background var(--t); }
.hshow__tab:hover { color: var(--ink); background: rgba(22,22,23,0.06); }
.hshow__tab[aria-selected="true"] { color: #fff; background: var(--ink); }

.hshow__viewport { position: relative; min-height: 0; touch-action: pan-y; }
.hshow__slide { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; opacity: 0; visibility: hidden; z-index: 0; transition: opacity 460ms var(--ease), visibility 0s linear 460ms; }
.hshow__slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity 520ms var(--ease); }

/* flex (nie grid): w gridzie procentowe max-height obrazka nie rozwiązuje się względem wiersza auto i auto wychodzi poza kadr */
.hshow__media { position: relative; min-height: 0; padding: clamp(0.4rem, 1.5vh, 1rem) clamp(3.4rem, 8vw, 7.5rem) 0; display: flex; align-items: center; justify-content: center; }
.hshow__media img { width: auto; height: auto; max-width: min(100%, 1180px); max-height: 100%; object-fit: contain; }

.hshow__info { text-align: center; padding: clamp(0.9rem, 2.2vh, 1.5rem) var(--gutter) clamp(1.4rem, 3vh, 2.2rem); max-width: 46rem; margin-inline: auto; }
.hshow__info h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.06; }
.hshow__info p { font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--muted); margin-top: 0.6rem; max-width: 46ch; margin-inline: auto; }
.hshow__cta { margin-top: clamp(1rem, 2.4vh, 1.5rem); display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; }

/* kierunkowe wejście slajdu (auto wjeżdża z boku, opis unosi się z dołu) */
.hshow[data-dir="next"] .hshow__slide.is-active .hshow__media { animation: hshowInR 620ms var(--ease); }
.hshow[data-dir="prev"] .hshow__slide.is-active .hshow__media { animation: hshowInL 620ms var(--ease); }
.hshow[data-dir] .hshow__slide.is-active .hshow__info > * { animation: hshowUp 560ms var(--ease) both; }
.hshow[data-dir] .hshow__slide.is-active .hshow__info > *:nth-child(2) { animation-delay: 70ms; }
.hshow[data-dir] .hshow__slide.is-active .hshow__info > *:nth-child(3) { animation-delay: 140ms; }
@keyframes hshowInR { from { opacity: 0; transform: translateX(72px); } to { opacity: 1; transform: none; } }
@keyframes hshowInL { from { opacity: 0; transform: translateX(-72px); } to { opacity: 1; transform: none; } }
@keyframes hshowUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* strzałki nawigacji */
.hshow__arrow { position: absolute; top: 38%; z-index: 6; width: clamp(44px, 4.6vw, 60px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,0.88); color: var(--ink); border: 1px solid var(--line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 14px 34px -20px rgba(0,0,0,0.5); transition: background var(--t), color var(--t), border-color var(--t), transform var(--t) var(--ease); }
.hshow__arrow:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.hshow__arrow:active { transform: scale(0.93); }
.hshow__arrow--prev { left: clamp(0.7rem, 2.6vw, 2.4rem); }
.hshow__arrow--next { right: clamp(0.7rem, 2.6vw, 2.4rem); }
.hshow__arrow svg { width: 42%; height: 42%; }

/* licznik + podpowiedź sterowania */
.hshow__foot { display: flex; align-items: center; justify-content: center; gap: 1.3rem; padding: 0 var(--gutter) clamp(0.9rem, 2vh, 1.4rem); font-family: var(--font-head); font-size: var(--fs-xs); color: var(--muted); }
.hshow__count { font-variant-numeric: tabular-nums; letter-spacing: 0.14em; }
.hshow__count b { color: var(--ink); font-weight: 700; }
.hshow__hint { text-transform: uppercase; letter-spacing: 0.12em; }
.hshow__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* fallback bez JS: slajdy jeden pod drugim, sterowanie ukryte */
html:not(.js) .hshow { min-height: 0; display: block; padding-top: 2rem; }
html:not(.js) .hshow__slide { position: static; opacity: 1; visibility: visible; padding-block: 2.2rem; }
html:not(.js) .hshow__media img { max-height: 68vh; }
html:not(.js) .hshow__tabs, html:not(.js) .hshow__arrow, html:not(.js) .hshow__foot { display: none; }

@media (max-width: 700px) {
  .hshow__media { padding-inline: 1rem; }
  .hshow__arrow { top: 34%; }
  .hshow__cta { flex-direction: column; align-items: center; }
  .hshow__cta .btn-pill { width: min(86vw, 330px); flex: none; }
  .hshow__hint { display: none; }
}

/* niskie okna (telefon poziomo, wysoki zoom): aktywny slajd w normalnym przepływie, strona się przewija */
@media (max-height: 520px) {
  html.js .hshow { grid-template-rows: auto auto auto; }
  html.js .hshow__slide { position: static; }
  html.js .hshow__slide:not(.is-active) { display: none; }
  html.js .hshow__media img { max-height: 52vh; }
  html.js .hshow__arrow { top: 30%; }
}

/* Panel CTA bez auta (np. Konfigurator) — wyśrodkowany */
.hpanel--light { place-content: center; justify-items: center; gap: clamp(1.1rem, 3vh, 2rem); padding: clamp(5rem, 10vh, 8rem) var(--gutter); }
.hpanel--light .hpanel__content { position: static; align-self: auto; padding: 0; }
.hpanel--light .hpanel__cta { position: static; transform: none; left: auto; right: auto; bottom: auto; padding-inline: 0; }

/* footer na home: normalna wysokość (bez wymuszania pełnego ekranu) */

@media (max-width: 540px) {
  .hpanel__cta { flex-direction: column; align-items: center; }
  .btn-pill { width: min(86vw, 330px); flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  @supports (scroll-snap-type: y mandatory) { html:has(body.home) { scroll-snap-type: none; scroll-behavior: auto; } }
}

/* ---------- 12a. Strona główna: sekcje zaufania pod karuzelą ---------- */
/* marki i wyróżnienia: białe kafle na szarym pasie — logo w „kwadratach" */
.trust-label { font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.3rem; }
.trust-label--gap { margin-top: clamp(2.6rem, 5vw, 3.6rem); }
.logo-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 14px; }
.logo-tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); min-height: 116px; display: grid; place-items: center; padding: 1.1rem; transition: transform var(--t) var(--ease), box-shadow var(--t), border-color var(--t); }
.logo-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -24px rgba(0,0,0,0.4); border-color: #c4c4c9; }
.logo-tile img { height: 50px; width: auto; max-width: 100%; }
.logo-tile img.is-wide { height: 18px; }
@media (max-width: 560px) { .logo-tiles { grid-template-columns: repeat(3, 1fr); gap: 10px; } .logo-tile { min-height: 86px; } .logo-tile img { height: 34px; } .logo-tile img.is-wide { height: 13px; } }

/* strona główna: sekcja producenta = tekst + fakty obok DUŻEGO zdjęcia zakładu */
.home-prod { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 3.6rem); align-items: center; }
.home-prod .about-split__media img { aspect-ratio: 4 / 3; }
.about-facts--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .home-prod { grid-template-columns: 1fr; }
  .home-prod .about-split__media { order: -1; }
}

/* zajawka realizacji: 4 kafle */
.home-real { max-width: var(--maxw-wide); margin: clamp(1.8rem, 4vw, 2.6rem) auto 0; padding-inline: var(--gutter); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.home-real__cta { max-width: var(--maxw-wide); margin: 1.6rem auto 0; padding-inline: var(--gutter); }
@media (max-width: 900px) { .home-real { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .home-real { grid-template-columns: 1fr; } }

/* jak pracujemy: 3 realne kroki procesu */
.steps { margin-top: clamp(1.8rem, 4vw, 2.4rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.4rem); }
.step__num { font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 800; color: var(--muted); }
.step h3 { font-size: 1.18rem; margin: 0.4rem 0 0.5rem; }
.step p { color: var(--muted); font-size: var(--fs-body); max-width: 34ch; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* wąski pas zapowiedzi konfiguratora */
.konf-teaser { display: flex; justify-content: space-between; align-items: center; gap: 1.4rem 2.5rem; flex-wrap: wrap; }
.konf-teaser .panel__sub { margin-top: 0.5rem; }

/* ---------- 12b. Konfigurator 3D ---------- */
.konf { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr); min-height: calc(100svh - var(--nav-h)); }
.konf__stage { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); background: #fff; border-right: 1px solid var(--line); overflow: hidden; }
.konf__canvas { position: absolute; inset: 0; cursor: grab; }
.konf__canvas:active { cursor: grabbing; }
.konf__canvas canvas { display: block; }
.konf__hint { position: absolute; top: 0.9rem; left: 50%; transform: translateX(-50%); font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); pointer-events: none; white-space: nowrap; }
.konf__views { position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%); display: flex; gap: 0.25rem; background: rgba(255,255,255,0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 999px; padding: 0.28rem; }
.konf__views button { font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); padding: 0.42rem 0.85rem; border-radius: 999px; transition: color var(--t), background var(--t); }
.konf__views button:hover { color: #fff; background: var(--ink); }
.konf__fallback { position: absolute; inset: 0; display: grid; place-content: center; gap: 0.6rem; text-align: center; padding: 2rem; background: var(--gray); }
.konf__fallback[hidden] { display: none; } /* display:grid wygrywałby z atrybutem hidden i zasłaniał canvas */
.konf__fallback h2 { font-size: var(--fs-h3); }
.konf__fallback a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.konf__panel { padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.2rem, 2.5vw, 2.2rem) 3rem; display: grid; gap: 1.45rem; align-content: start; }
.konf__head h1 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.konf__head p { color: var(--muted); margin-top: 0.45rem; max-width: 40ch; }
.konf__label { font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }
.konf__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.konf__chips button { font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); background: var(--gray); border: 1px solid transparent; padding: 0.55rem 1rem; border-radius: 999px; transition: background var(--t), color var(--t), border-color var(--t); }
.konf__chips button:hover { border-color: var(--line); }
.konf__chips button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.konf__chips button:disabled { opacity: 0.38; cursor: not-allowed; border-color: transparent; }
.konf__swatches { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.konf__swatches button { width: 38px; height: 38px; border-radius: 50%; background: var(--sw); border: 2px solid var(--line); box-shadow: inset 0 0 0 3px #fff; transition: transform var(--t) var(--ease), border-color var(--t); }
.konf__swatches button:hover { transform: scale(1.08); }
.konf__swatches button[aria-pressed="true"] { border-color: var(--ink); }
.konf__toggle { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm); color: var(--ink); padding: 0.4rem 0.85rem 0.4rem 0.4rem; background: var(--gray); border-radius: 999px; transition: background var(--t); }
.konf__toggle span { width: 40px; height: 22px; border-radius: 999px; background: #c9cad0; position: relative; transition: background var(--t); flex: none; }
.konf__toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform var(--t) var(--ease); }
.konf__toggle[aria-pressed="true"] span { background: var(--ink); }
.konf__toggle[aria-pressed="true"] span::after { transform: translateX(18px); }
.konf__row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.konf__action { font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 700; color: var(--ink); border: 1.6px solid var(--ink); border-radius: 999px; padding: 0.5rem 1.1rem; transition: background var(--t), color var(--t); }
.konf__action:hover { background: var(--ink); color: #fff; }

.konf__summary { border-top: 1px solid var(--line); padding-top: 1.35rem; display: grid; gap: 1rem; }
.konf__summary ul { display: grid; gap: 0.4rem; font-size: var(--fs-sm); color: var(--ink); }
.konf__summary ul li { position: relative; padding-left: 1.05rem; }
.konf__summary ul li::before { content: ""; position: absolute; left: 0; top: 0.52em; width: 6px; height: 6px; background: var(--ink); opacity: 0.55; }
.konf__payload { background: var(--gray); border-radius: 12px; padding: 0.95rem 1.05rem; display: grid; gap: 0.55rem; }
.konf__payload-head { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-sm); color: var(--muted); }
.konf__payload-head b { color: var(--ink); font-variant-numeric: tabular-nums; }
.konf__payload-track { height: 6px; border-radius: 99px; background: #d9dade; overflow: hidden; }
.konf__payload-track i { display: block; height: 100%; width: 40%; background: var(--ink); border-radius: 99px; transition: width 500ms var(--ease); }
.konf__payload small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; }
.konf__cta { display: grid; gap: 0.7rem; justify-items: start; }
.konf__reset { font-size: var(--fs-sm); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; transition: color var(--t); }
.konf__reset:hover { color: var(--ink); }
.konf__credit { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.konf__credit a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 1020px) {
  .konf { grid-template-columns: 1fr; }
  .konf__stage { height: 52svh; border-right: 0; border-bottom: 1px solid var(--line); z-index: 5; }
  .konf__hint { display: none; }
}

/* ---------- 13. Footer (ciemny, z danymi firmy) ---------- */
.footer { background: var(--footer-bg); color: var(--muted-dark); font-size: var(--fs-sm); line-height: 1.6; }
.footer__inner { max-width: var(--maxw-wide); margin-inline: auto; padding: clamp(2.6rem, 5vw, 4rem) var(--gutter) 2rem; }
.footer__cols { display: grid; grid-template-columns: 1.6fr 1.1fr 1fr 1.1fr 1fr; gap: 1.6rem 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line-dark); }
.footer__brand .brand__logo { height: 30px; width: auto; color: #fff; margin-bottom: 1rem; }
.footer__brand p { color: var(--muted-dark); max-width: 30ch; }
.footer__col h5 { font-family: var(--font-head); color: #fff; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.9rem; }
.footer__col a, .footer__col p { display: block; color: var(--muted-dark); padding: 0.22rem 0; }
.footer__col a:hover { color: #fff; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; justify-content: space-between; padding-top: 1.5rem; color: #7c7d82; font-size: var(--fs-xs); }
.footer__bottom .footer__legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.footer__bottom .footer__legal a:hover { color: #fff; }

/* ---------- 14. Animacje wejścia (subtelne) ---------- */
html.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
html.js [data-reveal].is-visible { opacity: 1; transform: none; }
html.js [data-reveal-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
html.js [data-reveal-stagger].is-visible > * { opacity: 1; transform: none; }

/* ---------- 15. Responsywność ---------- */
@media (max-width: 900px) {
  .nav__menu { display: none; }
  .menu-toggle { display: flex; }
  .tiles { grid-template-columns: 1fr; }
  .feature__inner { grid-template-columns: 1fr; }
  .feature:nth-child(even) .feature__text { order: 0; }
  .stats { grid-template-columns: 1fr 1fr; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .utilbar__hours { display: none; }
  .form .row { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; }
}

/* ---------- 16. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
  html.js [data-reveal], html.js [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
}