/* ==========================================================================
   FONTY — na własnym serwerze
   --------------------------------------------------------------------------
   Archivo i Manrope (licencja SIL OFL, pliki licencji w assets/fonty/) są
   serwowane z tej samej domeny co strona. Wcześniej ładowały się z serwerów
   Google, co przy każdej wizycie — jeszcze przed jakąkolwiek zgodą —
   przekazywało Google adres IP odwiedzającego.

   To fonty zmienne: jeden plik obejmuje wszystkie grubości. latin-ext zawiera
   polskie znaki, latin resztę; przeglądarka pobiera tylko te, których
   potrzebuje (unicode-range). Wersja fontu jest w nazwie pliku, bo /assets/*
   ma roczny cache immutable, a stempel ?v= z build.js nie obejmuje url() w CSS.
   ========================================================================== */

/* Archivo — latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(fonty/archivo-v25-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo — latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(fonty/archivo-v25-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Manrope — latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonty/manrope-v20-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Manrope — latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonty/manrope-v20-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   AGAKS — system wizualny
   --------------------------------------------------------------------------
   Jedno miejsce na wszystkie style strony. Kolory, typografia i odstępy
   siedzą w zmiennych na :root — zmiana tam przechodzi przez całą stronę.

   Paleta wynika z identyfikacji klienta (wizytówka + logo):
   czerń, chrom i złoto. Zieleń występuje WYŁĄCZNIE jako znacznik statusu
   i akcent ekologiczny — nigdy jako kolor marki.
   ========================================================================== */

:root {
  /* --- tła i płaszczyzny --- */
  --tlo:        #08090A;
  --tlo-2:      #0D0F11;
  --tlo-3:      #131719;
  --tlo-karta:  #0F1214;

  /* --- linie --- */
  --linia:       rgba(255, 255, 255, .075);
  --linia-2:     rgba(255, 255, 255, .14);
  --linia-zloto: rgba(200, 162, 74, .28);

  /* --- złoto (marka) --- */
  --zloto:        #C8A24A;
  --zloto-jasne:  #E9CE8E;
  --zloto-ciemne: #8A6B28;
  --zloto-tlo:    rgba(200, 162, 74, .07);
  /* wypelnienia przyciskow i plakietek — jasne w obu motywach */
  --pole-tlo:     rgba(0, 0, 0, .32);
  --pole-opcja:   #101315;

  --zloto-fill-1: #E9CE8E;
  --zloto-fill-2: #C8A24A;

  /* --- chrom (marka) --- */
  --chrom-1: #F2F4F5;
  --chrom-2: #AEB6BB;
  --chrom-3: #798186;

  /* --- tekst --- */
  --tekst:   #E8E6E1;
  --tekst-2: #9C988F;
  --tekst-3: #837E75;
  --naglowek: #F4F2EE;

  /* --- funkcyjne --- */
  --eko:      #4FA96F;
  --eko-tlo:  rgba(79, 169, 111, .10);

  /* --- typografia --- */
  --font-naglowek: 'Archivo', system-ui, sans-serif;
  --font-tekst:    'Manrope', system-ui, sans-serif;
  --font-mono:     ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, monospace;

  --t-display: clamp(40px, 6.2vw, 78px);
  --t-h2:      clamp(27px, 3.5vw, 46px);
  --t-h3:      clamp(19px, 1.5vw, 23px);
  --t-lead:    clamp(16.5px, 1.35vw, 19px);
  --t-body:    15.5px;
  --t-maly:    13.5px;
  --t-etyk:    11.5px;

  /* --- rytm --- */
  --wrap:    1240px;
  --pad-x:   clamp(22px, 4vw, 48px);
  --sekcja:  clamp(76px, 9vw, 136px);
  --r:       14px;   /* promień domyślny  */
  --r-duzy:  22px;
}

/* ==========================================================================
   MOTYW JASNY
   --------------------------------------------------------------------------
   Sekcja z klasą .jasna przestawia zmienne na ciepły, kostny odcień z ciemnym
   tekstem. Wszystkie komponenty korzystają ze zmiennych, więc adaptują się
   same — nie trzeba pisać osobnych wersji kart, list czy formularzy.

   Zasada podziału: ciemne zostają sekcje widowiskowe (hero, manifest, pulpit
   platformy, mapa), jasne — sekcje z treścią do czytania (o firmie, modele
   współpracy, materiały, kontakt).
   ========================================================================== */

.jasna {
  --tlo:        #F1EFE9;
  --tlo-2:      #E7E4DC;
  --tlo-3:      #FAF9F5;
  --tlo-karta:  #FAF9F5;

  --linia:       rgba(22, 25, 28, .11);
  --linia-2:     rgba(22, 25, 28, .2);
  --linia-zloto: rgba(138, 107, 40, .38);

  --zloto:        #7D6023;
  --zloto-jasne:  #644C1C;
  --zloto-ciemne: #5A4418;
  --zloto-tlo:    rgba(200, 162, 74, .16);

  --tekst:   #1B1E21;
  --tekst-2: #55524B;
  --tekst-3: #6E6A62;
  --naglowek: #101316;

  --eko:     #2E7548;
  --eko-tlo: rgba(46, 117, 72, .10);

  --pole-tlo:   #FFFFFF;
  --pole-opcja: #FFFFFF;

  background: var(--tlo);
  color: var(--tekst);
}

/* ziarno na jasnym tle musi być subtelniejsze, inaczej wygląda na brud */
.jasna::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .018;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* na jasnym tle chromowy gradient znika — używamy zwykłego koloru */
.jasna .t-chrom {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--naglowek);
}

/* ==========================================================================
   PODSTAWA
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 90px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--font-tekst);
  font-size: var(--t-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* delikatne ziarno — psuje „cyfrową gładkość", po której poznaje się
   grafiki generowane maszynowo. Ledwo widoczne, ale robi robotę. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { max-width: 100%; }
[hidden] { display: none !important; }
a { text-decoration: none; color: inherit; }
::selection { background: var(--zloto); color: #060708; }

:focus-visible {
  outline: 2px solid var(--zloto);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   TYPOGRAFIA
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-naglowek);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.022em;
  margin: 0;
  color: var(--naglowek);
}

.display {
  font-size: var(--t-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
}
h2, .h2 { font-size: var(--t-h2); letter-spacing: -.028em; }
h3, .h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -.015em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.62;
  font-weight: 300;
  color: var(--tekst-2);
}
.maly { font-size: var(--t-maly); }
.przygaszony { color: var(--tekst-2); }
.szept { color: var(--tekst-3); font-size: var(--t-maly); }

/* etykieta sekcji — monospace daje techniczny, „inżynierski" charakter */
.etykieta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--t-etyk);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--zloto);
}
.etykieta::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--zloto);
  opacity: .6;
}

/* akcenty w treści z data/tresc.js */
.t-zloto   { color: var(--zloto-jasne); font-weight: 600; }
.t-jasny   { color: var(--naglowek); font-weight: 600; }
.t-jasny-b { color: var(--naglowek); font-weight: 600; }
.t-biel    { color: var(--naglowek); font-weight: 600; }
.t-mieta   { color: var(--eko); font-weight: 600; }
.t-mieta-b { color: var(--eko); font-weight: 600; }
.t-chrom {
  background: linear-gradient(100deg, #FFFFFF 0%, #DDE2E4 34%, #ADB5BA 52%, #F2F4F5 78%, #C9D0D4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   UKŁAD
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

section { position: relative; }
.jasna { position: relative; overflow: hidden; }
.sekcja { padding-top: var(--sekcja); padding-bottom: var(--sekcja); }
.sekcja-gora { padding-top: var(--sekcja); }
.sekcja-dol { padding-bottom: var(--sekcja); }

.naglowek-sekcji { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.naglowek-sekcji h2 { margin: 18px 0 0; }
.naglowek-sekcji .lead { margin-top: 20px; }

.kreska {
  height: 1px;
  background: var(--linia);
  border: 0;
  margin: 0;
}

/* siatka techniczna — używana punktowo, nie jako tapeta */
.siatka {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--linia) 1px, transparent 1px),
    linear-gradient(90deg, var(--linia) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 78%);
  opacity: .55;
}

/* ==========================================================================
   PRZYCISKI
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-naglowek);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), background-color .22s, border-color .22s, color .22s;
  white-space: nowrap;
}
.btn svg { flex: none; transition: transform .22s cubic-bezier(.2,.7,.3,1); }
.btn:hover svg { transform: translateX(3px); }

.btn-zloty {
  color: #0A0906;
  background: linear-gradient(180deg, var(--zloto-fill-1), var(--zloto-fill-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn-zloty:hover { transform: translateY(-2px); background: linear-gradient(180deg, #F2DCA8, #D2AD55); }

.btn-obrys {
  color: var(--tekst);
  border-color: var(--linia-2);
  background: transparent;
}
.btn-obrys:hover { border-color: var(--zloto); color: var(--zloto-jasne); transform: translateY(-2px); }

.btn-maly { padding: 11px 20px; font-size: 13px; }

/* link z podkreśleniem rysowanym od lewej */
.link-strzalka {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-naglowek);
  font-weight: 600;
  font-size: 14px;
  color: var(--zloto-jasne);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--zloto), var(--zloto));
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .35s cubic-bezier(.2,.7,.3,1);
}
.link-strzalka:hover { background-size: 100% 1px; }
.link-strzalka svg { transition: transform .22s; }
.link-strzalka:hover svg { transform: translateX(3px); }

/* ==========================================================================
   KARTY I PŁASZCZYZNY
   ========================================================================== */

.karta {
  position: relative;
  background: var(--tlo-karta);
  border: 1px solid var(--linia);
  border-radius: var(--r-duzy);
  padding: clamp(24px, 2.4vw, 32px);
  transition: border-color .28s, transform .28s cubic-bezier(.2,.7,.3,1), background-color .28s;
}
.karta:hover { border-color: var(--linia-2); transform: translateY(-3px); }
.karta-zlota { border-color: var(--linia-zloto); background: linear-gradient(168deg, var(--zloto-tlo), var(--tlo-karta) 68%); }
.karta-zlota:hover { border-color: rgba(200, 162, 74, .5); }

/* ikona w kwadraciku — jeden spójny wzorzec w całym serwisie */
.ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  border: 1px solid var(--linia-zloto);
  background: var(--zloto-tlo);
  color: var(--zloto-jasne);
}
.ikona-eko { border-color: rgba(79, 169, 111, .3); background: var(--eko-tlo); color: var(--eko); }

.znacznik {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--linia-zloto);
  background: var(--zloto-tlo);
  font-family: var(--font-mono);
  font-size: var(--t-etyk);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--zloto-jasne);
}
.znacznik-eko { border-color: rgba(79, 169, 111, .32); background: var(--eko-tlo); color: var(--eko); }

.kropka {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.kropka-zywa { animation: puls 2.6s ease-in-out infinite; }
@keyframes puls { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ==========================================================================
   NAGŁÓWEK STRONY
   ========================================================================== */

.gora {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  background: rgba(8, 9, 10, 0);
  transition: background-color .3s, border-color .3s, backdrop-filter .3s;
}
.gora[data-przyklejony] {
  background: rgba(8, 9, 10, .82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--linia);
}
.gora nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo img { width: 34px; height: 30px; }
.logo-napis {
  font-family: var(--font-naglowek);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: .2em;
  color: var(--naglowek);
}

.menu { display: flex; align-items: center; gap: 30px; }
.menu a {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: var(--tekst-2);
  transition: color .2s;
}
.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: var(--zloto);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.menu a:hover { color: var(--tekst); }
.menu a:hover::after { transform: scaleX(1); }

.menu-przycisk {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linia-2);
  border-radius: 11px;
  background: transparent;
  color: var(--tekst);
  cursor: pointer;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero { padding-top: clamp(56px, 7vw, 92px); padding-bottom: clamp(52px, 6vw, 88px); }
.hero-uklad {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.hero h1 { margin: 26px 0 0; }
.hero .lead { margin-top: 24px; max-width: 470px; }
.hero-akcje { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* pasek trzech filarów marki pod hasłem */
.filary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--linia);
  font-family: var(--font-mono);
  font-size: var(--t-etyk);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--tekst-3);
}
.filary span { display: inline-flex; align-items: center; gap: 9px; }
.filary span::before { content: ""; width: 4px; height: 4px; background: var(--zloto); transform: rotate(45deg); }

/* wizualizacja urządzenia */
.hero-wizual {
  /* wysokość bryły automatu — z niej liczy się szerokość i głębokość ścian */
  --wys-automatu: 668px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: var(--wys-automatu);
}

/* --------------------------------------------------------------------------
   AUTOMAT 3D — bryła obracająca się wokół osi pionowej
   --------------------------------------------------------------------------
   Urządzenie to cztery płaskie SVG ustawione jako ściany bryły. Wszystkie mają
   ten sam viewBox (0 0 360 840), więc pokrywają się w pionie i wystarczy
   rozsunąć je w osi Z:
     przód i tył  o połowę głębokości obudowy (54 z 840 jednostek),
     boki         o połowę szerokości korpusu (128 z 840 jednostek).
   Bok jest symetryczny front–tył, bo lewa i prawa ściana to ten sam plik:
   odbicie lustrzane (scaleX) wywróciłoby normalną ściany i backface-visibility
   wyciąłby ją z kadru.

   Jasność ścian idzie w tym samym rytmie co obrót, tylko z przesuniętą fazą —
   ściana rozjaśnia się, wchodząc w światło, i gaśnie, odwracając się od niego.
   Bez tego bryła czyta się jak obracający się karton, a nie jak przedmiot.
   Światło stoi z przodu po lewej, dlatego szczyt jasności wypada tuż PRZED
   frontem (92% cyklu), a nie dokładnie na nim.

   Pełny obrót trwa 32 s. To celowo tło dla treści, a nie ruch, który
   przeciąga wzrok znad nagłówka — szybciej zaczyna kręcić się jak karuzela.
   -------------------------------------------------------------------------- */

.automat-3d {
  --czas-obrotu: 32s;
  --szerokosc-automatu: calc(var(--wys-automatu) * 360 / 840);
  --pol-glebokosci:     calc(var(--wys-automatu) * 54 / 840);
  --pol-szerokosci:     calc(var(--wys-automatu) * 128 / 840);
  position: relative;
  z-index: 2;
  width: var(--szerokosc-automatu);
  height: var(--wys-automatu);
  perspective: 1700px;
}
.automat-scena {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* scena kręci się bez przerwy, więc niech przeglądarka rasteryzuje ściany
     raz i potem już tylko obraca gotowe tekstury */
  will-change: transform;
  animation: obrot-automatu var(--czas-obrotu) linear infinite;
}

/* Poza kadrem obrót stoi — inaczej kompozytor pracuje przy każdym przewinięciu
   reszty strony, a nikt tego nie ogląda. Klasę zdejmuje i nakłada
   IntersectionObserver w skrypty-baza. Po powrocie bryła rusza z tego samego
   miejsca, w którym stanęła. */
.automat-scena.wstrzymany,
.automat-scena.wstrzymany .automat-sciana img { animation-play-state: paused; }
.automat-sciana {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.automat-sciana img {
  display: block;
  width: 100%;
  height: 100%;
  animation: swiatlo-automatu var(--czas-obrotu) linear infinite;
}

.automat-przod { transform: translateZ(var(--pol-glebokosci)); }
.automat-tyl   { transform: rotateY(180deg) translateZ(var(--pol-glebokosci)); }
.automat-bok-p { transform: rotateY(90deg)  translateZ(var(--pol-szerokosci)); }
.automat-bok-l { transform: rotateY(-90deg) translateZ(var(--pol-szerokosci)); }

/* ujemne opóźnienie ustawia ścianę w tym miejscu cyklu światła, które
   odpowiada kątowi, pod jakim ta ściana stoi względem patrzącego */
.automat-bok-p img { animation-delay: calc(var(--czas-obrotu) * -.25); }
.automat-tyl   img { animation-delay: calc(var(--czas-obrotu) * -.5); }
.automat-bok-l img { animation-delay: calc(var(--czas-obrotu) * -.75); }

@keyframes obrot-automatu {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
@keyframes swiatlo-automatu {
  0%   { filter: brightness(1); }
  12%  { filter: brightness(.88); }
  25%  { filter: brightness(.54); }
  50%  { filter: brightness(.46); }
  75%  { filter: brightness(.74); }
  92%  { filter: brightness(1.1); }
  100% { filter: brightness(1); }
}

/* Plakietki leżą na obracającym się automacie — celowo BEZ backdrop-filter.
   Tło pod nimi zmienia się w każdej klatce, więc rozmycie liczyłoby się 60
   razy na sekundę. Przy tle krytym w 92% widać z niego tyle co nic, a klatki
   zostają przy obrocie. Szkło na stronie robią nagłówek i pasek cookies. */
.plakietka {
  position: absolute;
  z-index: 3;
  padding: 12px 16px;
  border-radius: var(--r);
  background: rgba(13, 15, 17, .92);
  border: 1px solid var(--linia-2);
}
.plakietka-etyk {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tekst-3);
}
.plakietka-wart {
  font-family: var(--font-naglowek);
  font-weight: 700;
  font-size: 16px;
  color: var(--naglowek);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* ==========================================================================
   LICZBY
   ========================================================================== */

.liczby {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--linia);
  border-radius: var(--r-duzy);
  overflow: hidden;
  background: var(--tlo-2);
}
.liczba { position: relative; padding: clamp(22px, 2.4vw, 32px); border-right: 1px solid var(--linia); }
.liczba:last-child { border-right: 0; }
.liczba-wart {
  font-family: var(--font-naglowek);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -.03em;
  color: var(--zloto-jasne);
  line-height: 1;
  /* stala szerokosc cyfr — inaczej licznik "drga" podczas naliczania */
  font-variant-numeric: tabular-nums;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}
.liczba:hover .liczba-wart { transform: translateY(-3px); }
.licznik-biegnie { opacity: .92; }
.liczba-podpis {
  margin-top: 10px;
  font-size: var(--t-maly);
  color: var(--tekst-2);
  line-height: 1.45;
}

/* ==========================================================================
   MANIFEST / CYTAT
   ========================================================================== */

.manifest { border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); }
.manifest-tresc {
  font-family: var(--font-naglowek);
  font-weight: 600;
  font-size: clamp(23px, 2.9vw, 40px);
  line-height: 1.24;
  letter-spacing: -.026em;
  color: var(--naglowek);
  max-width: 17ch;
}
.manifest-uklad {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

/* ==========================================================================
   FORMULARZ
   ========================================================================== */

label { display: block; }
.etykieta-pola {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tekst-3);
  margin-bottom: 8px;
}
input[type="text"], input[type="email"], select, textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: 11px;
  background: var(--pole-tlo);
  border: 1px solid var(--linia-2);
  color: var(--tekst);
  font-family: var(--font-tekst);
  font-size: 14.5px;
  transition: border-color .2s, box-shadow .2s;
}
input::placeholder, textarea::placeholder { color: #56534D; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--zloto);
  box-shadow: 0 0 0 3px rgba(200, 162, 74, .12);
}
textarea { resize: vertical; min-height: 110px; }
select option { background: var(--pole-opcja); color: var(--tekst); }

.pola-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pole { margin-bottom: 14px; }

.zgoda { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.zgoda input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--zloto); flex: none; }
.zgoda span { font-size: 13px; color: var(--tekst-2); line-height: 1.45; }

/* ==========================================================================
   STOPKA
   ========================================================================== */

.stopka { border-top: 1px solid var(--linia); background: var(--tlo-2); }
.stopka-uklad {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  padding-top: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(36px, 4vw, 52px);
}
.stopka h4 {
  font-family: var(--font-mono);
  font-size: var(--t-etyk);
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--zloto);
  margin-bottom: 18px;
}
.stopka ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.stopka ul a { font-size: 14px; color: var(--tekst-2); transition: color .2s; }
.stopka ul a:hover { color: var(--tekst); }
.stopka-dol {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 22px 0 30px;
  border-top: 1px solid var(--linia);
  font-size: 12.5px;
  color: var(--tekst-3);
}

/* ==========================================================================
   PASEK COOKIES
   ========================================================================== */

#cookieBar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  padding: 16px var(--pad-x);
}
#cookieBar > div {
  max-width: 1040px;
  margin: 0 auto;
  padding: 16px 20px;
  border-radius: 18px;
  /* bez rozmycia: pasek przykrywa dół hero, więc przy obracającym się
     automacie przeliczałby 20 px blura na całej szerokości w każdej klatce */
  background: rgba(13, 15, 17, .96);
  border: 1px solid var(--linia-2);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* ==========================================================================
   RUCH
   --------------------------------------------------------------------------
   Zasada: jeden wzorzec wejścia dla całej strony + kaskada w grupach.
   Nic nie skacze, nic nie pulsuje bez powodu. Wszystko znika przy
   prefers-reduced-motion.
   ========================================================================== */

@keyframes wejscie {
  from { opacity: 0; transform: translateY(26px); filter: blur(5px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* ukrywamy tylko gdy JS działa — inaczej strona byłaby pusta */
.js [data-reveal] { opacity: 0; }
.js [data-reveal][data-shown] { animation: wejscie 1.05s cubic-bezier(.16, 1, .3, 1) both; }

/* kaskada: pojemnik pojawia się od razu, dzieci wchodzą po kolei */
.js [data-reveal][data-kaskada] { opacity: 1; animation: none; }
.js [data-kaskada] > * { opacity: 0; }
.js [data-kaskada][data-shown] > * {
  animation: wejscie 1.25s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 140ms);
}

/* --------------------------------------------------------------------------
   HERO: dwa akcenty na samym wejsciu
   --------------------------------------------------------------------------
   1. Przyciski unosza sie pojedynczo, jeden po drugim — zamiast wjechac
      razem jako blok. Dlatego pojemnik .hero-akcje nie animuje sie sam,
      tylko oddaje ruch swoim dzieciom.
   2. Zaraz potem za filarami marki przechodzi zloty blysk.

   Czasy sa dopiete do kaskady hero (140 ms na element):
      znacznik 0 · naglowek 140 · akapit 280 · przyciski 420 · filary 560
   Kazdy element trwa 1250 ms, wiec filary sa na miejscu ok. 1810 ms —
   blysk rusza po nich, w 1950 ms. Tempo jest celowo spokojne: wejscie ma
   byc zauwazone, a nie przemkniete.
   -------------------------------------------------------------------------- */

/* pojemnik przycisków oddaje ruch dzieciom */
.js [data-kaskada][data-shown] > .hero-akcje { animation: none; opacity: 1; }

.js .hero-akcje .btn { opacity: 0; }
.js [data-kaskada][data-shown] .hero-akcje .btn {
  animation: uniesienie 1.4s cubic-bezier(.22, 1, .28, 1) both;
}
.js [data-kaskada][data-shown] .hero-akcje .btn:nth-child(1) { animation-delay: 460ms; }
.js [data-kaskada][data-shown] .hero-akcje .btn:nth-child(2) { animation-delay: 700ms; }

/* delikatne uniesienie z lekkim wyjsciem ponad linie i powrotem */
@keyframes uniesienie {
  0%   { opacity: 0; transform: translateY(20px) scale(.985); }
  55%  { opacity: 1; transform: translateY(-5px) scale(1.004); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- zloty blysk za filarami marki --- */
.filary { position: relative; overflow: hidden; }
.filary > span { position: relative; z-index: 1; }

.filary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-120%);
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(200, 162, 74, .10) 26%,
    rgba(233, 206, 142, .38) 50%,
    rgba(200, 162, 74, .10) 74%,
    transparent 100%);
  filter: blur(7px);
}
.js [data-kaskada][data-shown] .filary::after {
  animation: zlotyBlysk 2.3s cubic-bezier(.38, 0, .26, 1) 1950ms 1 both;
}
@keyframes zlotyBlysk {
  0%   { transform: translateX(-120%); opacity: 0; }
  14%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateX(320%); opacity: 0; }
}

/* ==========================================================================
   REAKCJE NA KURSOR
   ========================================================================== */

/* reflektor podążający za kursorem — pozycję ustawia JS w --mx / --my */
.karta::after,
.ogniwo::before,
.liczba::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .4s;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              rgba(200, 162, 74, .11), transparent 62%);
}
.karta:hover::after,
.ogniwo:hover::before,
.liczba:hover::after { opacity: 1; }

/* w grupie kart podświetla się ta pod kursorem, reszta przygasa */
.liczby:hover > *:not(:hover),
.trojka:hover > *:not(:hover),
.modele:hover > *:not(:hover),
.cechy:hover > *:not(:hover),
.lancuch:hover > *:not(:hover),
.karty-miast:hover > *:not(:hover),
.punkty:hover > *:not(:hover),
.fakty:hover > *:not(:hover) {
  opacity: .45;
}
.liczby > *, .trojka > *, .modele > *, .cechy > *,
.lancuch > *, .karty-miast > *, .punkty > *, .fakty > * {
  transition: opacity .35s, background-color .35s, border-color .3s, transform .3s cubic-bezier(.2, .7, .3, 1);
}

/* ikona reaguje na najechanie kartę */
.karta .ikona, .cecha .ikona, .ogniwo .ikona, .materialy-ikona {
  transition: transform .35s cubic-bezier(.2, .7, .3, 1), border-color .3s, color .3s, background-color .3s;
}
.karta:hover .ikona, .cecha:hover .ikona, .ogniwo:hover .ikona {
  transform: translateY(-2px) scale(1.06);
  border-color: var(--zloto);
}

/* --------------------------------------------------------------------------
   TRZY WZORCE WEJŚCIA
   --------------------------------------------------------------------------
   Jeden wzorzec na całą stronę robił się monotonny przy dłuższym przewijaniu,
   ale pięć różnych efektów to jarmark. Zostają trzy, każdy przypisany do typu
   elementu — czytelna zasada zamiast losowych ozdobników:

     tekst, pojedyncze bloki   wejscie         podnosi się i wyostrza
     duże wizualizacje         odslona         maska przejeżdża od lewej
     kafle w siatkach          wejscie-kafel   to samo co wejscie plus głębia

   Odsłona nie rusza przezroczystości: element jest pełny od początku, tylko
   przycięty maską. Zdjęcie, makieta pulpitu i mapa wchodzą więc jak
   przejechane skanerem, a nie jak coś, co się rozjaśnia. Żadnych poświat
   ani gradientów — to ma zostać ruchem samej geometrii.

   DWIE PUŁAPKI MASKI, obie okupione zepsutą produkcją:

   1. Przed wejściem element chowa PRZEZROCZYSTOŚĆ, a nie maska. Maska żyje
      wyłącznie w klatkach animacji. IntersectionObserver liczy widoczność po
      przycięciu, więc element przycięty do zerowej szerokości raportuje się
      jako niewidoczny — obserwator nigdy nie dokłada mu `data-shown`, więc
      maska nigdy się nie otwiera i sekcja zostaje pusta. Zakleszczenie.
      Etykiety sekcji przetrwały tylko dlatego, że obserwowany jest ich
      rodzic (`.naglowek-sekcji`), a nie one same.

   2. W spoczynku element ma clip-path: none, a nie inset(0). Inset przycinałby
      na stałe wszystko, co wychodzi poza ramkę: cienie, powiększenia przy
      najechaniu. Stąd też fill-mode backwards zamiast both, i osobna
      asekuracja w bloku .bez-ruchu.
   -------------------------------------------------------------------------- */

.js [data-reveal="odslona"][data-shown] {
  opacity: 1;
  clip-path: none;
  animation: odslona 1.5s cubic-bezier(.33, 1, .32, 1) backwards;
}

@keyframes odslona {
  from { opacity: 1; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(-8% -8% -8% -8%); }
}

/* Zdjęcie pod maską dociąga się do skali 1 — dłużej niż sama odsłona, więc
   ruch nie urywa się nagle. Tylko portret: w przekroju automatu skalowanie
   rozjechałoby opisy z miejscami, na które wskazują. */
.js .portret[data-shown] .portret-kadr img {
  animation: dociagniecie 2.2s cubic-bezier(.22, 1, .28, 1) both;
}

@keyframes dociagniecie {
  from { transform: scale(1.05); }
  to   { transform: scale(1); }
}

/* Etykieta sekcji — ta sama maska co przy wizualizacjach, tylko krótsza.
   Monospace'owy podpis wypisuje się, a dopiero po nim podnosi się nagłówek.
   Opóźnienie musi zostać z kaskady, inaczej etykieta wyprzedza swój rząd. */
.js [data-kaskada][data-shown] > .etykieta {
  opacity: 1;
  clip-path: none;
  animation: odslona .95s cubic-bezier(.33, 1, .32, 1) backwards;
  animation-delay: calc(var(--i, 0) * 140ms);
}

/* Kafle w siatkach sadowią się z niewielkiej głębi. Podmieniamy samą nazwę
   animacji — czas, krzywa i opóźnienie zostają z kaskady. */
.js .trojka[data-shown] > *,
.js .modele[data-shown] > *,
.js .cechy[data-shown] > *,
.js .pytania[data-shown] > * {
  animation-name: wejscie-kafel;
}

@keyframes wejscie-kafel {
  from { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(5px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* --------------------------------------------------------------------------
   Wejście kolumny z automatem — to samo tempo, ale bez rozmycia.
   Animacja wejscie kończy się na filter: blur(0), a fill both zostawia
   ten filtr na stałe. Element z filtrem jest rasteryzowany jako jedna warstwa,
   więc obracająca się bryła 3D robiłaby się od tego miękka.
   -------------------------------------------------------------------------- */
.js .hero-wizual[data-shown] { animation: wejscie-wizual 1.05s cubic-bezier(.16, 1, .3, 1) both; }

@keyframes wejscie-wizual {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* awaryjne wylaczenie ruchu — patrz BEZPIECZNIK w skryptach */
.bez-ruchu [data-reveal],
.bez-ruchu [data-reveal][data-shown],
.bez-ruchu .hero-akcje .btn { opacity: 1 !important; animation: none !important; transform: none !important; }
.bez-ruchu .filary::after { animation: none !important; opacity: 0 !important; }
/* maska musi puscic nawet wtedy, gdy strona sie nie odrysowuje */
.bez-ruchu [data-reveal="odslona"],
.bez-ruchu [data-kaskada] > .etykieta { clip-path: none !important; }
.bez-ruchu .portret-kadr img { animation: none !important; transform: none !important; }
.bez-ruchu .automat-scena { animation: none !important; }
.bez-ruchu .automat-sciana img { animation: none !important; filter: none !important; }
.bez-ruchu [data-kaskada] > * {
  opacity: 1 !important;
  animation: none !important;
  filter: none !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal][data-shown],
  .js [data-kaskada] > *,
  .js [data-kaskada][data-shown] > * { opacity: 1; animation: none; filter: none; transform: none; }
  .js .hero-akcje .btn,
  .js [data-kaskada][data-shown] .hero-akcje .btn { opacity: 1; animation: none; transform: none; }
  .js [data-kaskada][data-shown] .filary::after { animation: none; opacity: 0; }
  .js [data-reveal="odslona"],
  .js [data-kaskada][data-shown] > .etykieta { clip-path: none; animation: none; }
  .portret-kadr img { animation: none; transform: none; }
  .automat-scena { animation: none; }
  .automat-sciana img { animation: none; filter: none; }
  .kropka-zywa { animation: none; }
  .karta::after, .ogniwo::before, .liczba::after { display: none; }
}

/* ==========================================================================
   MAPA POLSKI (własny SVG — bez zewnętrznych kafli i bez kluczy API)
   --------------------------------------------------------------------------
   Granice województw generowane z danych OpenStreetMap do
   szablony/czesci/mapa-svg.html, pinezki pozycjonowane przez
   data/mapa-polski.js (projekcja Mercatora).

   Ramka mapy zostaje CIEMNA niezależnie od motywu sekcji — na jasnym tle
   czyta się wtedy jak ekran położony na papierze. To celowe.
   ========================================================================== */

.mapa-ramka {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 1.3vw, 20px);
  border-radius: var(--r-duzy);
  border: 1px solid rgba(255, 255, 255, .1);
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, #12171A, #0A0C0E 70%);
  overflow: hidden;
}

.mapa-pl-svg { width: 100%; height: auto; max-height: 560px; display: block; }
.mapa-ramka-mala .mapa-pl-svg { max-height: 380px; }

/* delikatna siatka pod mapą — kontekst techniczny */
.mapa-ramka::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 65% 60% at 50% 45%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 65% 60% at 50% 45%, #000 30%, transparent 80%);
}

.mapa-pl-wojewodztwa path {
  fill: rgba(232, 230, 225, .045);
  stroke: rgba(232, 230, 225, .16);
  stroke-width: 1.1;
  stroke-linejoin: round;
  transition: fill .3s;
}
.mapa-pl-wojewodztwa path:hover { fill: rgba(232, 230, 225, .09); }

/* --- pinezki --- */
.mapa-pin { cursor: pointer; }
.mapa-pin-cel { fill: transparent; }
.mapa-pin-kropka {
  fill: #4FA96F;
  stroke: #0A0C0E;
  stroke-width: 2.4;
  transition: r .25s cubic-bezier(.2, .7, .3, 1);
}
.mapa-pin.partner .mapa-pin-kropka { fill: #E9CE8E; }

.mapa-pin-fala {
  fill: rgba(79, 169, 111, .22);
  transform-origin: center;
  transform-box: fill-box;
  animation: falaPinu 3s ease-out infinite;
}
.mapa-pin.partner .mapa-pin-fala { fill: rgba(200, 162, 74, .22); }
@keyframes falaPinu {
  0%        { transform: scale(.35); opacity: .85; }
  70%, 100% { transform: scale(1); opacity: 0; }
}

.mapa-pin-nazwa {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 27px;
  font-weight: 600;
  fill: #D9D6CF;
  paint-order: stroke;
  stroke: #0A0C0E;
  stroke-width: 5px;
  stroke-linejoin: round;
  pointer-events: none;
  transition: fill .25s;
}

.mapa-pin:hover .mapa-pin-kropka,
.mapa-pin:focus-visible .mapa-pin-kropka,
.mapa-pin.aktywny .mapa-pin-kropka { r: 10.5; }
.mapa-pin:hover .mapa-pin-nazwa,
.mapa-pin.aktywny .mapa-pin-nazwa { fill: #FFFFFF; }
.mapa-pin.aktywny .mapa-pin-kropka { stroke: #E9CE8E; stroke-width: 2.5; }
.mapa-pin:focus-visible { outline: none; }
.mapa-pin:focus-visible .mapa-pin-nazwa { fill: #FFFFFF; }

.mapa-pin.przygaszony { opacity: .22; }
.mapa-pin.przygaszony .mapa-pin-fala { animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .mapa-pin-fala { animation: none; opacity: .3; }
}

/* --------------------------------------------------------------------------
   MAPA W SEKCJI JASNEJ
   Ciemny prostokat posrodku jasnej sekcji czyta sie jak dziura. Na papierze
   mapa ma wygladac jak rysunek w publikacji, nie jak osadzony widget —
   wiec w sekcji .jasna przechodzi na jasna wersje.
   Zeby wrocic do ciemnej: usun ten blok.
   -------------------------------------------------------------------------- */

.jasna .mapa-ramka {
  background:
    radial-gradient(ellipse 75% 65% at 50% 42%, #FBFAF7, #EDEAE2 72%);
  border-color: rgba(22, 25, 28, .12);
}
.jasna .mapa-ramka::before {
  background-image:
    linear-gradient(rgba(22, 25, 28, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 25, 28, .05) 1px, transparent 1px);
}
.jasna .mapa-pl-wojewodztwa path {
  fill: rgba(27, 30, 33, .05);
  stroke: rgba(27, 30, 33, .19);
}
.jasna .mapa-pl-wojewodztwa path:hover { fill: rgba(27, 30, 33, .1); }

.jasna .mapa-pin-kropka { stroke: #F4F2EC; }
.jasna .mapa-pin.online .mapa-pin-kropka { fill: #2E7548; }
.jasna .mapa-pin.partner .mapa-pin-kropka { fill: #A07A22; }
.jasna .mapa-pin-fala { fill: rgba(46, 117, 72, .2); }
.jasna .mapa-pin.partner .mapa-pin-fala { fill: rgba(160, 122, 34, .2); }
.jasna .mapa-pin-nazwa { fill: #2C2F32; stroke: #F4F2EC; }
.jasna .mapa-pin:hover .mapa-pin-nazwa,
.jasna .mapa-pin.aktywny .mapa-pin-nazwa { fill: #0F1214; }
.jasna .mapa-pin.aktywny .mapa-pin-kropka { stroke: #A07A22; }

.jasna .mapa-legenda {
  background: rgba(250, 249, 245, .9);
  border-color: rgba(22, 25, 28, .1);
  color: var(--tekst-2);
}
.jasna .mapa-licznik {
  background: rgba(250, 249, 245, .92);
  border-color: var(--linia-zloto);
}
.jasna .pin-eko { background: #2E7548; }
.jasna .pin-zloto { background: #A07A22; }

@media (max-width: 640px) {
  .mapa-pin-nazwa { font-size: 34px; }
}

/* ==========================================================================
   RESPONSYWNOŚĆ
   ========================================================================== */

@media (max-width: 1080px) {
  .hero-uklad { grid-template-columns: 1fr; }
  .hero-wizual { --wys-automatu: clamp(420px, 54vw, 500px); margin-top: 24px; }
  .manifest-uklad { grid-template-columns: 1fr; gap: 32px; }
  .manifest-tresc { max-width: 26ch; }
}

/* Hamburger ma wlasny prog. Menu ma 8 pozycji (po dodaniu Wiedzy) i przy 1081 px
   zawijalo sie w dwie linie, przy 1180 px miesci sie z zapasem 59 px. */
@media (max-width: 1180px) {
  .menu { display: none; }
  .menu-przycisk { display: inline-flex; }
}

@media (max-width: 900px) {
  .liczby { grid-template-columns: 1fr 1fr; }
  .liczba:nth-child(2) { border-right: 0; }
  .liczba:nth-child(-n+2) { border-bottom: 1px solid var(--linia); }
  .stopka-uklad { grid-template-columns: 1fr 1fr; }
  .stopka-uklad > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .liczby { grid-template-columns: 1fr; }
  .liczba { border-right: 0; border-bottom: 1px solid var(--linia); }
  .liczba:last-child { border-bottom: 0; }
  .pola-2 { grid-template-columns: 1fr; }
  .stopka-uklad { grid-template-columns: 1fr; }
  .hero-akcje .btn { width: 100%; }
}

/* link dla klawiatury — widoczny dopiero po sfokusowaniu */
.pomin-nawigacje {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
  background: var(--zloto-fill-2);
  color: #0A0906;
  font-family: var(--font-naglowek);
  font-weight: 600;
  font-size: 14px;
}
.pomin-nawigacje:focus { left: 0; }