/* iCober — arkusz stylów
   Kierunek zadany przez Dawida 2026-09-03: zieleń z logo jako kolor wiodący,
   geometryczny grotesk w nagłówkach, pełnoekranowy ciemny pas w sekcji
   otwierającej, białe zaokrąglone karty na jasnym tle, ciemny pas z wezwaniem
   do działania i ciemna stopka.
   Kroje: Outfit (nagłówki) / Manrope (tekst). */

:root{
  --brand:#008037;
  --brand-hover:#00692D;
  --brand-soft:#E4F3EA;
  --brand-ink:#00572A;
  /* Napis na plamie marki: przycisk glowny, numer kroku, aktywna pozycja
     nawigacji produktow, przycisk odtwarzania. W motywie jasnym zielen jest
     ciemna i bierze bialy tekst (5,07:1). W ciemnym zielen jest jasna, wiec
     bialy tekst dawal 2,10:1, a po najechaniu 1,79:1 — ponizej progu na
     glownym wezwaniu do dzialania. Ciemny napis na tej samej zieleni daje
     8,44:1. Barwa ziemi marki sie nie zmienia, zmienia sie napis na niej. */
  --on-brand:#FFFFFF;

  /* Czerwien komunikatu o bledzie. Osobny odcien od marki, bo blad ma sie
     odrozniac od wszystkiego, co jest w porzadku. */
  --zle:#B3261E;

  /* Kolory wariantow w tabelach porownawczych. Bursztyn na Offline, a NIE
     czerwien: Offline to wariant, ktory sprzedajemy, wiec nie moze byc
     oznaczony jak blad. Czerwien zostaje wylacznie dla bledow. */
  --online:#00692D;      --online-tlo:#E4F3EA;
  --offline:#8A5A00;     --offline-tlo:#FBF0DC;

  --ground:#FFFFFF;
  --ground-alt:#F3F7F4;
  --surface:#FFFFFF;
  --ink:#0F1714;
  --ink-soft:#54625B;
  /* Przygaszony tekst niesie tresc (przelacznik jezyka, naglowki tabel, linia
     zgody pod formularzem, daty wpisow) i to pismem 0,74-0,86 rem, wiec
     obowiazuje go pelny prog WCAG AA 4,5:1, nie zlagodzony 3:1 dla duzego
     tekstu. Poprzednie #889990 dawalo 3,00:1 na bialym i 2,77:1 na
     --ground-alt. Ta wartosc daje 4,88:1 i 4,51:1 — odcien ten sam, zmieniona
     tylko jasnosc, zeby zostala hierarchia wzgledem --ink-soft.
     Pilnuje tego tools/dostepnosc.py. */
  --ink-faint:#64756C;
  --line:#E3EAE5;
  --line-strong:#CBD6CF;

  --dark:#121A16;
  --dark-2:#1B2621;
  --on-dark:#F2F6F3;
  --on-dark-soft:#A9B8B0;

  --r-card:16px;
  --r-btn:10px;
  --shadow:0 1px 2px rgba(15,23,20,.04), 0 12px 28px rgba(15,23,20,.06);
  --shadow-lift:0 2px 6px rgba(15,23,20,.06), 0 18px 40px rgba(15,23,20,.10);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand:#3ECB74; --brand-hover:#5AD98A; --brand-soft:#16301F; --brand-ink:#8FE3AC;
    --zle:#FF8A80;
    --online:#8FE3AC;  --online-tlo:#16301F;
    --offline:#E8BE72; --offline-tlo:#2E2412;
    --ground:#0D1311; --ground-alt:#121A16; --surface:#161F1A;
    --ink:#E9F0EB; --ink-soft:#9FB0A6; --ink-faint:#75897F;
    --on-brand:#121A16;
    --line:#22302A; --line-strong:#33453B;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.40);
    --shadow-lift:0 2px 6px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --on-brand:#121A16;
  --brand:#3ECB74; --brand-hover:#5AD98A; --brand-soft:#16301F; --brand-ink:#8FE3AC;
  --zle:#FF8A80;
  --ground:#0D1311; --ground-alt:#121A16; --surface:#161F1A;
  --ink:#E9F0EB; --ink-soft:#9FB0A6; --ink-faint:#75897F;
  --line:#22302A; --line-strong:#33453B;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.40);
  --shadow-lift:0 2px 6px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.5);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;
  /* Odstep dla skokow do kotwic. Naglowek jest przyklejony, wiec bez tego
     cel ladowal DOKLADNIE pod nim i czytelnik widzial akapit bez naglowka,
     ktory mu obiecano. Zmierzone wysokosci belki: 145 px na szerokim
     ekranie (loga i nawigacja w dwoch rzedach), 67 px ponizej 900 px. */
  scroll-padding-top:161px;}
@media(max-width:900px){html{scroll-padding-top:83px;}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{transition:none!important;}}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:Manrope,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
.narrow{max-width:780px;}
.center{text-align:center;}
.center p,.center .lede{margin-left:auto;margin-right:auto;}

h1,h2,h3,h4,.btn,.stat-n,.logo b,.step-num{font-family:Outfit,"Helvetica Neue",Arial,sans-serif;}
h1{font-size:clamp(2.3rem,5.4vw,4rem);line-height:1.03;letter-spacing:-.035em;font-weight:800;margin:0 0 20px;text-wrap:balance;
  /* Norweskie zlozenia ("Personvernerklaering") sa dluzsze niz kolumna na
     waskim telefonie, a clamp nie zejdzie ponizej 2.3rem. Bez prawa do
     zlamania slowo wychodzilo 79 px poza ekran i przewijalo cala strone. */
  overflow-wrap:break-word;}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.12;letter-spacing:-.03em;font-weight:700;margin:0 0 16px;text-wrap:balance;}
h3{font-size:1.15rem;letter-spacing:-.015em;font-weight:600;margin:0 0 9px;}
/* Tytul bloku wewnatrz strony. Wyglada jak h3, ale w strukturze dokumentu
   jest h2 — bo stoi bezposrednio pod tytulem strony i nic nie ma nad nim.
   Wczesniej byl h3 i czytnik ekranu slyszal "poziom 1, poziom 3", czyli
   przeskok sugerujacy, ze cos przeoczyl. Poziom naglowka to informacja o
   strukturze, a nie ustawienie wielkosci pisma — te dwie rzeczy sie tu
   rozjechaly. */
h2.tytul-bloku{font-size:1.15rem;letter-spacing:-.015em;font-weight:600;margin:0 0 9px;
  /* line-height:inherit jest tu konieczne. Regula globalna dla h2 ustawia
     ciasna interlinie 1.12, bo h2 to zwykle duzy naglowek sekcji. Tytul bloku
     jest wielkosci dawnego h3, ktory interlinii nie mial wcale i dziedziczyl
     ja od tekstu. Bez tej linii naglowek miał 20 px zamiast 30 i cala tresc
     pod nim jechala o 10 px w gore — zmierzone przez porownanie polozen. */
  line-height:inherit;}
h4{font-size:.98rem;font-weight:600;margin:0 0 6px;}
p{margin:0 0 16px;max-width:68ch;}
a{color:inherit;}
ul,ol{max-width:68ch;}
strong{font-weight:600;}

.eyebrow{display:inline-block;font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;color:var(--brand);margin:0 0 14px;}
.lede{font-size:1.18rem;color:var(--ink-soft);max-width:60ch;line-height:1.6;}
.small{font-size:1rem;color:var(--ink-soft);}
/* Przypis pod sekcja: mniejszy i kursywa, zeby od razu bylo widac, ze to
   komentarz do tresci wyzej, a nie kolejny akapit tej tresci. Odsylacz
   (gwiazdka) prowadzi do niego odnosnikiem, bo sama gwiazdka w tekscie nie
   mowi czytnikowi ekranu niczego — a bez niej nie bylo wiadomo, czego
   przypis dotyczy. --ink-soft, nie --ink-faint: to tekst z zastrzezeniem,
   ktore ma byc czytelne, a nie schowane. */
.przypis{font-size:.92rem;font-style:italic;color:var(--ink-soft);
  margin:30px auto 0;max-width:78ch;text-align:center;}
/* Odstep tylko z lewej: z prawej gwiazdka musi przylegac do slowa, bo
   zaraz po niej idzie kropka konczaca zdanie. */
.odsylacz{font-style:normal;text-decoration:none;color:var(--brand);
  font-weight:600;padding-left:1px;}
.odsylacz:hover{text-decoration:underline;}
.brand{color:var(--brand);}
/* Znak firmowy wewnątrz przycisku: zielone "i" na zielonym tle znika.
   Ta sama usterka była już łatana lokalnie w prodnav (niżej) — tutaj
   stoi raz dla wszystkich przycisków, obecnych i przyszłych. */
.btn .brand{color:inherit;}

/* ---------- naglowek ---------- */
/* Gorna belka w motywie jasnym. Wartosci wpisane wprost, bo to sa barwy
   znaku firmowego, nie ogolne barwy interfejsu. Wersje ciemna definiuja
   reguly nizej. */
.masthead{background:#fff;border-bottom:1px solid #E3EAE5;position:sticky;top:0;z-index:30;}
.masthead .logo b{color:#000;}
.masthead nav a{color:#54625B;}
.masthead nav a:hover,.masthead nav a[aria-current="page"]{color:var(--brand);}
.masthead .langs{border-left-color:#E3EAE5;}
/* Ta jedna wartosc NIE jest barwa znaku, tylko kopia --ink-faint sprzed
   poprawki kontrastu. Zostawala przy 3,00:1, gdy token juz dawal 4,88:1 —
   przepisana stala ukryla rozjazd. Trzymac zgodnie z --ink-faint. */
.masthead .langs a{color:#64756C;}
.masthead .langs a:hover{color:#000;background:#F3F7F4;}

/* ---------- przelacznik motywu ----------
   Bez skryptu przycisk nic by nie robil, wiec sie nie pokazuje. Klase "js"
   nadaje kawalek skryptu w naglowku dokumentu. */
.motyw{display:none;}
:root.js .motyw{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;margin-left:8px;cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:8px;
  color:var(--ink-soft);flex:none;}
.motyw:hover{color:var(--ink);background:var(--ground-alt);border-color:var(--line-strong);}
.motyw .ikona{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;display:none;}
/* Polowa tarczy wypelniona — znak, ze motyw idzie za ustawieniem systemu
   i moze byc raz jasny, raz ciemny. */
.motyw .ikona .wypelnienie{fill:currentColor;stroke:none;}
:root[data-motyw="system"] .motyw .ikona-system{display:block;}
:root[data-motyw="light"] .motyw .ikona-jasny{display:block;}
:root[data-motyw="dark"] .motyw .ikona-ciemny{display:block;}
.masthead .wrap{max-width:1500px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px;flex-wrap:wrap;}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;}
.logo img{height:60px;width:auto;display:block;}
.logo b{font-weight:800;font-size:2.05rem;letter-spacing:-.045em;}
.logo .mark-dark{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo .mark-light{display:none;}
  :root:not([data-theme="light"]) .logo .mark-dark{display:block;}
}
:root[data-theme="dark"] .logo .mark-light{display:none;}
:root[data-theme="dark"] .logo .mark-dark{display:block;}
/* W belce wariant znaku dobrany do JEJ tla, nie do tla strony. */
.masthead .logo .mark-light{display:block;}
.masthead .logo .mark-dark{display:none;}

/* ---------- gorna belka w motywie ciemnym ----------
   Wczesniej belka zostawala biala, gdy reszta strony ciemniala: jasny pas
   nad ciemna trescia i ciemna stopka, czyli jedyny jasny element na
   stronie. Teraz podaza za motywem, a znak przelacza sie na wariant jasny,
   bo tlo pod nim jest ciemne. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .masthead{
    background:var(--surface);border-bottom-color:var(--line);}
  :root:not([data-theme="light"]) .masthead .logo b{color:var(--ink);}
  :root:not([data-theme="light"]) .masthead nav a{color:var(--ink-soft);}
  :root:not([data-theme="light"]) .masthead .langs{border-left-color:var(--line);}
  :root:not([data-theme="light"]) .masthead .langs a{color:var(--ink-faint);}
  :root:not([data-theme="light"]) .masthead .langs a:hover{
    color:var(--ink);background:var(--ground-alt);}
  :root:not([data-theme="light"]) .masthead .motyw{
    border-color:var(--line);color:var(--ink-soft);}
  :root:not([data-theme="light"]) .masthead .logo .mark-light{display:none;}
  :root:not([data-theme="light"]) .masthead .logo .mark-dark{display:block;}
  :root:not([data-theme="light"]) .menu-toggle{
    background:var(--surface);border-color:var(--line);}
  :root:not([data-theme="light"]) .menu-toggle span{background:var(--ink);}
  :root:not([data-theme="light"]) .masthead .navbar{border-top-color:var(--line);}
  :root:not([data-theme="light"]) .masthead nav a{border-bottom-color:var(--line);}
}
:root[data-theme="dark"] .masthead{background:var(--surface);border-bottom-color:var(--line);}
:root[data-theme="dark"] .masthead .logo b{color:var(--ink);}
:root[data-theme="dark"] .masthead nav a{color:var(--ink-soft);}
:root[data-theme="dark"] .masthead .langs{border-left-color:var(--line);}
:root[data-theme="dark"] .masthead .langs a{color:var(--ink-faint);}
:root[data-theme="dark"] .masthead .langs a:hover{color:var(--ink);background:var(--ground-alt);}
:root[data-theme="dark"] .masthead .motyw{border-color:var(--line);color:var(--ink-soft);}
:root[data-theme="dark"] .masthead .logo .mark-light{display:none;}
:root[data-theme="dark"] .masthead .logo .mark-dark{display:block;}
:root[data-theme="dark"] .menu-toggle{background:var(--surface);border-color:var(--line);}
:root[data-theme="dark"] .menu-toggle span{background:var(--ink);}
:root[data-theme="dark"] .masthead .navbar{border-top-color:var(--line);}
:root[data-theme="dark"] .masthead nav a{border-bottom-color:var(--line);}

/* Odstepy 20 px, nie 26: czwarty jezyk (NL, 2026-09-13) dolozyl ~60 px do
   belki i przy 1440 px PL/NO spadaly z jednego rzedu do dwoch, a NL przy
   1280 px — do trzech. Potem "Live demo" zamiast "Demo" dolozylo kolejne
   ~40 px (NL przy 1440 px brakowalo 19 px) — stad 20 px i ciasniejszy
   przycisk demo. Zmierzone na zbudowanej stronie, nie na oko. */
.navbar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
nav{display:flex;gap:20px;flex-wrap:wrap;}
nav a{font-size:.92rem;font-weight:500;text-decoration:none;color:var(--ink-soft);padding-block:6px;}
nav a:hover{color:var(--brand);}
nav a[aria-current="page"]{color:var(--brand);box-shadow:inset 0 -2px 0 var(--brand);}
.langs{display:flex;gap:2px;padding-left:16px;border-left:1px solid var(--line);}
.langs a{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:600;
  letter-spacing:.06em;text-decoration:none;color:var(--ink-faint);padding:5px 8px;border-radius:6px;}
/* 18x12, bo viewBox flag ma proporcje 3:2. Przy 13 px wysokosci flagi
   byly splaszczone o 8% — widac to zwlaszcza na bialym pasie flagi PL. */
.langs svg{width:18px;height:12px;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.10);display:block;}
.langs a:hover{color:var(--ink);background:var(--ground-alt);}
.langs a[aria-current="true"]{color:var(--brand);background:var(--brand-soft);}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px;}

/* ---------- przyciski ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;
  font-size:.95rem;font-weight:600;letter-spacing:-.005em;
  padding:14px 26px;border-radius:var(--r-btn);text-decoration:none;cursor:pointer;
  background:var(--brand);color:var(--on-brand);border:1px solid var(--brand);
  transition:background .15s ease,transform .15s ease;}
.btn:hover{background:var(--brand-hover);border-color:var(--brand-hover);transform:translateY(-1px);}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.btn.ghost:hover{background:var(--ground-alt);border-color:var(--ink-soft);color:var(--ink);}
.on-dark .btn.ghost{color:var(--on-dark);border-color:rgba(255,255,255,.28);}
.on-dark .btn.ghost:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.5);color:#fff;}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;}
/* Rzad przyciskow wysrodkowany wszedzie tam, gdzie otoczenie tez jest
   wysrodkowane. Sama regula ".center .cta-row" nie wystarczala: wymaga,
   zeby "center" byl RODZICEM, a w tresci obie klasy stoja na tym samym
   elemencie — wiec szesc miejsc z jawnym "center" nigdy nie zadzialalo.
   Do tego hero i pas zachety, ktore srodkuja tekst, ale przyciskow nie:
   text-align nie rusza elementow w ukladzie elastycznym. */
.center .cta-row,
.cta-row.center,
.hero .cta-row,
.cta-band .cta-row{justify-content:center;}

/* ---------- sekcje ---------- */
section{padding-block:clamp(56px,7vw,96px);}

/* ---------- plynne skalowanie ponizej 700 px ----------
   Powyzej 700 px wszystko rosnie plynnie z szerokoscia okna. Ponizej
   formuly wyzej trafialy na swoja dolna granice i zatrzymywaly sie: na
   ekranie 320 px naglowek mial dokladnie tyle samo co na 700 px (36,8 px),
   a odstepy i marginesy tyle samo co na komputerze. Stad wrazenie, ze
   telefon pokazuje uklad zaprojektowany dla szerszego ekranu.

   Kazda formula nizej dobiega DOKLADNIE do wartosci z reguly nad soba
   przy 700 px, wiec przejscie przez ten prog jest niewidoczne — sprawdzone
   pomiarem po obu stronach progu. */
@media(max-width:700px){
  h1{font-size:clamp(1.80rem,1.35rem + 2.20vw,2.3rem);}
  h2{font-size:clamp(1.42rem,1.17rem + 1.22vw,1.7rem);}
  section{padding-block:clamp(40px,25px + 4.43vw,56px);}
  .wrap{padding-inline:clamp(16px,5.9px + 3.16vw,28px);}
}
section.alt{background:var(--ground-alt);}
/* Naglowek sekcji stoi na srodku kolumny. Sama klasa .center wyrownywala
   wczesniej tylko blok — tekst w srodku zostawal do lewej. */
.sec-head{margin-inline:auto;margin-bottom:44px;max-width:70ch;text-align:center;}

/* ---------- pas otwierajacy ---------- */
.hero{background:var(--dark);color:var(--on-dark);
  padding-block:clamp(84px,12vw,150px);
  position:relative;overflow:hidden;text-align:center;}
.hero::before{content:"";position:absolute;inset:0;
  background:var(--hero-photo,radial-gradient(120% 100% at 50% 0%,#1E2C25 0%,#121A16 60%));
  background-size:cover;background-position:center;}
/* Przyciemnienie zdjecia pod tekstem. Bylo .55 u gory i etykieta w kolorze
   marki miala na jasnym zdjeciu kontrast 1,8:1 przy normie 4,5:1 — czyli
   praktycznie znikala. Przeliczone: dopiero .75 daje jasniejszej zieleni
   wymagany kontrast na najjasniejszym z naszych zdjec. */
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,26,22,.75),rgba(18,26,22,.88));}
.hero .wrap{position:relative;z-index:2;}

/* Znacznik na belce, ktorej tlo jest grafika z AI. Dyskretny, w rogu, poza
   torem czytania — ma byc dostepny dla kogos, kto pyta "czy to zdjecie?",
   a nie przerywac odbior naglowka.

   Prawdziwy tekst w znaczniku, nie `content` w CSS: to informacja o statusie
   obrazu, wiec ma dac sie zaznaczyc, przetlumaczyc i odczytac czytnikiem
   ekranu. Wyliczenie kontrastu: bialy z 78% krycia na przyciemnieniu belki
   (rgba(18,26,22,.88) na zdjeciu) daje ponad 7:1. */
.znacznik-ai{position:absolute;right:14px;bottom:12px;z-index:3;
  font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.78);background:rgba(12,16,14,.45);
  border:1px solid rgba(255,255,255,.18);border-radius:5px;
  padding:3px 8px;pointer-events:none;}
@media(max-width:640px){.znacznik-ai{right:10px;bottom:8px;font-size:.66rem;}}
/* 18 znakow bylo dobrane pod haslo "Od pomyslu do gotowego rozwiazania".
   Od 2026-09-09 naglowek strony glownej mowi, czym firma sie zajmuje,
   wiec jest dluzszy — przy 18ch lamal sie na piec linii. 26ch trzyma
   go w dwoch, a krotsze naglowki pozostalych pasow wygladaja tak samo. */
.hero h1{color:#fff;max-width:26ch;margin-inline:auto;}
.hero .lede{color:var(--on-dark-soft);margin-inline:auto;font-size:1.22rem;}
/* Zielen z trybu ciemnego, nie podstawowa: na zdjeciu ta druga jest
   za ciemna niezaleznie od przyciemnienia. */
.hero .eyebrow{color:#3ECB74;}
.hero-mark{height:64px;width:auto;margin:0 auto 26px;display:block;}

/* ---------- karty ---------- */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:940px){.grid3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:720px){.grid2,.grid3{grid-template-columns:1fr;}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:30px;box-shadow:var(--shadow);}
.card p:last-child{margin-bottom:0;}
.card .eyebrow{margin-bottom:12px;}
a.card{text-decoration:none;display:block;transition:box-shadow .18s ease,transform .18s ease;}
a.card:hover{box-shadow:var(--shadow-lift);transform:translateY(-3px);}

.icon{width:46px;height:46px;border-radius:12px;background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.icon svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}

.pill{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.04em;
  padding:5px 11px;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);white-space:nowrap;}
.result{display:flex;align-items:flex-start;gap:9px;margin-top:18px;padding:12px 14px;
  background:var(--brand-soft);border-radius:10px;color:var(--brand-ink);
  font-size:.94rem;font-weight:500;line-height:1.5;}
.result svg{width:16px;height:16px;flex:none;margin-top:3px;stroke:currentColor;fill:none;stroke-width:2;}

/* ---------- kroki ---------- */
/* Strona glowna, "Sprzet w kontenerze": trzy elementy systemu. Kontrola
   dostepu i pomiar zapelnienia to dwa ROWNOLEGLE zrodla danych (+), ktore
   razem trafiaja do Cloud i aplikacji (strzalka). Lacznik jest znakiem, nie
   linia — to warstwy oferty, a nie schemat przesylu danych. */
.system-ciag{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:16px;align-items:stretch;}
.system-lacznik{align-self:center;justify-self:center;color:var(--brand);
  font:600 1.9rem/1 Outfit,"Helvetica Neue",Arial,sans-serif;}
@media(max-width:860px){
  .system-ciag{grid-template-columns:minmax(0,1fr);gap:10px;}
  .system-lacznik.strzalka{transform:rotate(90deg);}
}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
@media(max-width:940px){.steps{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.steps{grid-template-columns:1fr;}}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:26px;}
/* Kolko, nie kwadrat — numerowany krok procesu czyta sie tak naturalniej. */
.step-num{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:var(--brand);color:var(--on-brand);
  font-weight:700;font-size:.95rem;margin-bottom:16px;}
.step p{font-size:1rem;color:var(--ink-soft);margin-bottom:0;}

/* ---------- lista opisowa ---------- */
.deflist{list-style:none;margin:0;padding:0;display:grid;gap:16px;}
.deflist li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:24px 26px;display:grid;grid-template-columns:190px 1fr;gap:22px;align-items:start;}
@media(max-width:700px){.deflist li{grid-template-columns:1fr;gap:8px;}}
.deflist .k{font-family:Outfit,sans-serif;font-weight:700;font-size:1rem;color:var(--brand);}
.deflist p{margin:0;color:var(--ink-soft);font-size:1rem;}

/* ---------- tabela ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);}
table{border-collapse:collapse;width:100%;font-size:1rem;min-width:560px;}
th,td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:top;}
tr:last-child td{border-bottom:0;}
th{font-family:Outfit,sans-serif;font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);font-weight:700;}

/* ---------- tabela na telefonie ----------
   560 px szerokosci minimalnej nie da sie pogodzic z ekranem 375 px, wiec
   ponizej 700 px tabela przestaje byc tabela: kazdy wiersz staje sie karta,
   pierwsza komorka jej tytulem, a pozostale dostaja nad soba nazwe swojej
   kolumny (data-label doklejane w build.py). Naglowek tabeli jest wtedy
   zbedny — jego tresc powtarza sie przy kazdej wartosci.
   Bez tego jedyna droga bylo przewijanie tabeli palcem w bok, czego na
   telefonie prawie nikt nie odkrywa. */
@media(max-width:700px){
  /* Podpis kolumny niesie na telefonie caly ciezar rozroznienia wariantow —
     naglowek tabeli jest ukryty, wiec bez koloru trzeba go czytac przy
     kazdej wartosci z osobna. */
  table td[data-wariant]::before{
    padding:2px 8px;border-radius:999px;margin-bottom:5px;
    width:fit-content;
  }
  table td[data-wariant="online"]::before{color:var(--online);background:var(--online-tlo);}
  table td[data-wariant="offline"]::before{color:var(--offline);background:var(--offline-tlo);}

  /* Ikona nad tekstem karty wyglada na telefonie lepiej wysrodkowana:
     w waskiej kolumnie stoi wtedy na osi karty, a nie przyklejona do
     lewej krawedzi. .icon jest kontenerem flex o stalej szerokosci, wiec
     wystarczy automatyczny margines. W .step jest tak juz na kazdej
     szerokosci. */
  .card .icon{margin-inline:auto;}

  .tablewrap{overflow-x:visible;padding:4px 16px;}
  table{min-width:0;display:block;font-size:1rem;}
  table thead{display:none;}
  table tbody{display:block;}
  table tr{display:block;padding:22px 0 20px;border-bottom:1px solid var(--line-strong);}
  table tr:last-child{border-bottom:0;}
  table td{display:block;padding:0 0 12px;border:0;}
  table td:last-child{padding-bottom:0;}
  /* Tytul wiersza musi czytac sie jak NAGLOWEK karty, nie jak kolejny
     akapit. Wczesniej rozni sie od opisu o 0,8 px i jeden stopien
     grubosci, w tym samym kroju i kolorze — przez to poczatek nowej karty
     ginal w tekscie. Krojem naglowkowym (Outfit) strona oznacza naglowki
     wszedzie indziej, wiec i tutaj. */
  table td:first-child{
    font-family:Outfit,"Helvetica Neue",Arial,sans-serif;
    font-size:1.2rem;font-weight:700;line-height:1.2;letter-spacing:-.02em;
    margin-bottom:16px;
  }
  table td:first-child strong{font-weight:inherit;}
  table td:first-child::before{display:none;}
  table td::before{
    content:attr(data-label);display:block;
    font-family:Outfit,sans-serif;font-size:.72rem;text-transform:uppercase;
    letter-spacing:.08em;color:var(--ink-faint);font-weight:700;margin-bottom:3px;
  }
}

/* ---------- zdjecia zastepcze ---------- */
.ph{aspect-ratio:16/10;border-radius:var(--r-card);
  background:linear-gradient(135deg,var(--ground-alt) 0%,var(--surface) 100%);
  border:1px dashed var(--line-strong);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;}
.ph span{font-size:.76rem;font-weight:600;letter-spacing:.05em;color:var(--ink-faint);text-transform:uppercase;line-height:1.7;}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:860px){.photos{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.photos{grid-template-columns:1fr;}}

/* ---------- wdrozenia ---------- */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
@media(max-width:820px){.cases{grid-template-columns:1fr;}}
.case{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;text-decoration:none;display:block;box-shadow:var(--shadow);
  transition:box-shadow .18s ease,transform .18s ease;}
.case:hover{box-shadow:var(--shadow-lift);transform:translateY(-3px);}
.case .ph{border:0;border-radius:0;border-bottom:1px solid var(--line);aspect-ratio:16/9;}
.case .body{padding:26px 28px 28px;}
.case .head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:10px;}
.case .body p{font-size:1rem;color:var(--ink-soft);margin-bottom:0;}
.more{display:inline-block;margin-top:18px;font-weight:600;color:var(--brand);font-size:.92rem;}

/* ---------- statystyki ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:700px){.stats{grid-template-columns:1fr;}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:26px;}
.stat-n{display:block;font-size:2.4rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--brand);margin-bottom:8px;font-variant-numeric:tabular-nums;}
.stat-l{font-size:1rem;color:var(--ink-soft);}

/* ---------- pobrania ---------- */
.dl{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.dl a{display:flex;align-items:center;gap:18px;padding:20px 24px;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  transition:border-color .15s ease;}
.dl a:hover{border-color:var(--brand);}
.filetype{font-size:.68rem;font-weight:700;letter-spacing:.06em;padding:5px 9px;border-radius:6px;background:var(--brand-soft);color:var(--brand-ink);}
.dl .name{flex:1;font-weight:500;}
.dl .arrow{color:var(--brand);font-weight:700;}
/* Broszury wydajemy po angielsku; na stronie PL i NO trzeba to widziec
   PRZED pobraniem, zeby plik nie zaskakiwal jezykiem. */
.dl .inlang{font-size:.72rem;font-weight:600;letter-spacing:.06em;
  color:var(--ink-faint);border:1px solid var(--line);border-radius:5px;padding:3px 7px;}

/* ---------- pas na cala szerokosc ---------- */
/* Zdjecie miedzy sekcjami, od krawedzi do krawedzi okna. Jest tlem,
   nie trescia — stad puste alt, zeby czytnik ekranu je pominal.
   Wysokosc rosnie z szerokoscia okna, ale nie ponad 380 px: pas ma
   przerywac tekst, a nie spychac go pod krawedz ekranu. */
.bleed{display:block;width:100%;height:clamp(190px,25vw,380px);object-fit:cover;}

/* Ilustracja w kolumnie tresci — dla grafik z wlasnym tlem, ktorych nie
   da sie rozciagnac na cala szerokosc bez pokazania ich krawedzi. */
.ilustracja{display:block;width:100%;max-width:720px;height:auto;
  margin:0 auto 8px;border-radius:var(--r-card);}

/* Naglowek sekcji stoi na srodku kolumny. Regula dotyczy naglowkow
   BEZPOSREDNIO w kontenerze sekcji — te w kartach, krokach i wpisach bloga
   siedza glebiej, wiec ich nie rusza.

   Dwa wyjatki. Tekst prawny i artykul na blogu to ciagla proza: tam
   naglowek otwiera akapity, wiec wysrodkowany rozjezdzalby sie z tekstem
   pod soba. */
/* Odstep jak przy sekcjach uzywajacych .sec-head — inaczej naglowek
   wysrodkowany siedzi blizej tekstu niz sasiedni i sekcje wygladaja
   na rozne. */
/* :not(.tytul-bloku) jest tu konieczne. Ta regula centruje NAGLOWKI SEKCJI,
   a tytuly blokow wewnatrz strony sa teraz takze h2 (dla poprawnej struktury
   dokumentu) i lapaly sie na nia — przez co zjechaly na srodek i dostaly
   cudzy margines. */
section > .wrap > h2:not(.tytul-bloku){text-align:center;margin-bottom:26px;}
section > .wrap.legal > h2,
section > .wrap.article > h2{text-align:left;}

/* ---------- FAQ ---------- */
/* Pole filtrujace nad FAQ. Sama ramka pola i etykieta jada na .field
   z formularza — to ten sam element, nie ma po co drugi raz go opisywac.
   min-height na komunikacie trzyma miejsce zanim cokolwiek sie wpisze,
   inaczej lista podskakuje przy pierwszym znaku. */
/* Wezwanie do demo — przycisk, podpis i trzy kroki jeden pod drugim. */
/* `margin-inline:auto` NIE jest ozdoba. Blok demo to <p>, a globalne
   p{max-width:68ch} (linia 123) obcina mu szerokosc — bez automatycznych
   marginesow ta wezsza skrzynka zostaje przy LEWEJ krawedzi kontenera
   i wysrodkowana w niej tresc wyglada na zepchnieta w lewo. Ta sama
   pulapka zjadla juz kolumne artykulu (patrz komentarz przy .article).
   Na pasku CTA podstrony Cloud robi to za nas .cta-band p. */
.demo-cta{display:grid;justify-items:center;gap:9px;margin:26px auto 0;text-align:center;}
.demo-cta-opis{color:var(--ink-soft);font-size:1rem;}
/* Zdanie wiodace stoi NAD przyciskiem, wiec potrzebuje wlasnego odstepu
   — siatka .demo-cta ma gap 9px, dobry dla podpisow, za ciasny dla zdania. */
.demo-cta-wstep{font-size:1.05rem;max-width:52ch;margin-bottom:5px;}
.demo-cta-kroki{color:var(--ink-faint);font-size:.94rem;}
/* Ten sam blok wchodzi w ciemny pasek CTA na podstronie iCober Cloud —
   --ink-soft na granacie jest nieczytelny. */
.on-dark .demo-cta-opis{color:var(--on-dark-soft);}
.cta-band .demo-cta{margin-top:22px;}
.cta-band .demo-cta+.cta-row{margin-top:14px;}
/* Przycisk demo w pasku — wyróżniony, bo to wezwanie, nie zakładka.
   --on-brand, nie #fff: w ciemnym motywie --brand jest jasnozielony
   i biały napis mial na nim kontrast ok. 2:1. */
.nav-demo{background:var(--brand);color:var(--on-brand)!important;padding:7px 12px;
  border-radius:999px;font-weight:600;}
.nav-demo-telefon{display:none;}
/* Pelna i krotka etykieta demo. Krotka tylko na najwezszych telefonach —
   przy 320 px "Live demo" spychalo przycisk menu do drugiego rzedu. */
.nav-demo .krotka{display:none;}
@media(max-width:359px){.nav-demo .pelna{display:none;}.nav-demo .krotka{display:inline;}}
.nav-demo:hover{filter:brightness(1.08);}
.faq-filtr{margin-bottom:22px;}
.faq-wynik{margin:9px 0 0;color:var(--ink-soft);font-size:.9rem;min-height:1.35em;}
.faq{display:grid;gap:12px;}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);}
.faq summary{cursor:pointer;padding:22px 26px;font-family:Outfit,sans-serif;font-weight:600;font-size:1.05rem;
  list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center;}
.faq summary .pytanie{min-width:0;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--brand);font-size:1.5rem;font-weight:400;line-height:1;flex:none;}
.faq details[open] summary::after{content:"\2212";}
.faq details[open] summary{padding-bottom:8px;}
.faq .answer{padding:0 26px 24px;color:var(--ink-soft);}
.faq .answer p:last-child{margin-bottom:0;}

/* ---------- pas z wezwaniem ---------- */
.cta-band{background:var(--dark);color:var(--on-dark);border-radius:22px;padding:clamp(44px,6vw,72px) 32px;text-align:center;}
.cta-band h2{color:#fff;max-width:20ch;margin-inline:auto;}
.cta-band p{color:var(--on-dark-soft);margin-inline:auto;}

/* ---------- formularz ---------- */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,48px);align-items:start;}
/* minmax(0,1fr), nie samo 1fr: domyslne 1fr znaczy minmax(auto,1fr) i tor
   nie moze zwezic sie ponizej wlasnej szerokosci pola formularza. Ta w
   silniku Safari ma 228 px (w Chromium 210) i przez to strony kontaktu
   mialy twarda podloge 322 px — przewijaly sie w bok na kazdym telefonie
   wezszym niz to. Pola dostaja min-width:0 z tego samego powodu. */
@media(max-width:860px){.contact-grid{grid-template-columns:minmax(0,1fr);}}
.form{display:grid;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:32px;box-shadow:var(--shadow);}
.field{display:grid;gap:7px;}
.field label{font-size:.84rem;font-weight:600;color:var(--ink);}
.field input,.field textarea{font-family:Manrope,sans-serif;font-size:1rem;padding:13px 15px;
  border:1px solid var(--line-strong);border-radius:10px;background:var(--ground);color:var(--ink);
  min-width:0;}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint);}
.field input:focus,.field textarea:focus{outline:2px solid var(--brand);outline-offset:0;border-color:transparent;}
.consent{font-size:.82rem;color:var(--ink-faint);margin:0;}
.consent a{color:var(--brand);}
.infolist{display:grid;gap:22px;}
.infoline{display:flex;gap:16px;align-items:flex-start;}
.infoline .icon{margin-bottom:0;width:42px;height:42px;flex:none;}
.infoline h3,.infoline .tytul-bloku{margin-bottom:3px;}
.infoline p{margin:0;color:var(--ink-soft);font-size:1rem;}
.infoline a{color:var(--brand);text-decoration:none;}
.infoline a:hover{text-decoration:underline;}

/* ---------- tresc prawna ---------- */
.legal h2{font-size:1.35rem;margin-top:40px;}
.legal p,.legal li{color:var(--ink-soft);font-size:1.0625rem;}
/* Miara 68ch liczy sie od pisma samego elementu. Bez tego lista praw
   wychodzila szersza niz akapity obok, bo zmniejszenie siedzialo
   dopiero na li. */
.legal ul,.legal ol{font-size:1.0625rem;}

/* ---------- stopka ---------- */
footer{background:var(--dark);color:var(--on-dark-soft);padding-block:56px 32px;font-size:.92rem;}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1.3fr;gap:40px;}
@media(max-width:820px){footer .cols{grid-template-columns:1fr;gap:32px;}}
/* Etykiety kolumn w stopce sa naglowkami h2 (byly h4, co dawalo skok
   h2 -> h4 na kazdej stronie). Wyglad bez zmian — poziom w strukturze
   dokumentu to co innego niz wielkosc pisma. */
footer .tytul-kolumny{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px;}
footer a{color:var(--on-dark-soft);text-decoration:none;}
footer a:hover{color:var(--brand);}
footer nav{flex-direction:column;gap:9px;}
/* padding-block, nie 0: przy 24 px wysokosci trafienie palcem w stopce bylo
   loteria, a sasiednie odnosniki w akapitach dostaly juz 36 px. */
footer nav a{color:var(--on-dark-soft);font-size:.92rem;padding-block:10px;}
footer nav a:hover{color:var(--brand);box-shadow:none;}
footer .logo b{color:#fff;}
footer .legalrow{margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  font-size:.78rem;color:rgba(242,246,243,.5);line-height:1.9;}

/* ---------- naglowek podstrony ---------- */
.page-head{
  background:var(--ground-alt);border-bottom:1px solid var(--line);
  padding-block:clamp(56px,8vw,92px);text-align:center;
}
.page-head h1{max-width:20ch;margin-inline:auto;}
.page-head .lede{margin-inline:auto;}
.page-head .wrap{position:relative;}
.crumb{
  display:block;font-size:.78rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:18px;
}
/* inline-block, zeby odstep w ogole zadzialal — na elemencie liniowym
   padding-block nie powieksza pola dotyku. Bylo 17 px. */
.crumb a{text-decoration:none;color:var(--brand);display:inline-block;padding-block:13px;}
.crumb a:hover{text-decoration:underline;}


/* ---------- drobne ---------- */
.case .place{
  display:block;font-size:.78rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--brand);margin-bottom:10px;
}
.dl .size{font-size:.84rem;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
.addr{color:var(--ink-soft);font-size:.98rem;}
.addr b{color:var(--ink);font-weight:600;}
.addr a{color:var(--brand);text-decoration:none;}
.addr a:hover{text-decoration:underline;}

/* ---------- powiekszanie zdjec w galerii ---------- */
.do-powiekszenia{cursor:zoom-in;}
.do-powiekszenia:focus-visible{outline:3px solid var(--brand);outline-offset:3px;}

.lupa{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;gap:8px;
  /* Ciemne tlo niezaleznie od motywu: zdjecie ma byc jedyna jasna rzecza. */
  background:rgba(10,14,12,.975);
  padding:clamp(12px,3vw,40px);
  animation:lupa-wejscie .18s ease-out;
}
@keyframes lupa-wejscie{from{opacity:0}to{opacity:1}}

.lupa-scena{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:min(1200px,100%);max-height:100%;
}
.lupa-img{
  max-width:100%;max-height:78vh;width:auto;height:auto;
  object-fit:contain;border-radius:10px;display:block;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  cursor:zoom-in;touch-action:none;
  transform-origin:center center;transition:transform .2s ease;
}
.lupa-img.blizej{cursor:zoom-out;}
.lupa-img.przesuwane{transition:none;}
.lupa-scena figcaption{
  color:#E8EFEA;font-size:.92rem;line-height:1.5;text-align:center;
  max-width:64ch;display:flex;flex-direction:column;gap:4px;
}
.lupa-licznik{color:#9FB3A8;font-size:.85rem;font-variant-numeric:tabular-nums;}
.lupa-zoom{color:#9FB3A8;font-size:.85rem;}
.lupa-zoom:empty{display:none;}

.lupa button{
  /* Ciemne, nieprzezroczyste kolo z jasna obwodka: przycisk musi byc widoczny
     tez wtedy, gdy pod nim wypada jasny fragment zdjecia. Przy poprzednich
     10% bieli krzyzyk ginal na jasnym niebie. */
  background:rgba(12,16,14,.72);color:#fff;border:1.5px solid rgba(255,255,255,.62);
  border-radius:999px;cursor:pointer;line-height:1;
  /* 48 px to najmniejsze pole, ktore da sie pewnie trafic kciukiem. */
  min-width:48px;min-height:48px;font-size:1.4rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 12px rgba(0,0,0,.45);
  transition:background .15s ease,border-color .15s ease;
}
.lupa button:hover{background:rgba(12,16,14,.9);border-color:#fff;}
.lupa button:focus-visible{outline:3px solid #fff;outline-offset:2px;}
.lupa-zamknij{position:absolute;top:clamp(12px,2vw,22px);right:clamp(12px,2vw,22px);
              font-size:1.9rem;min-width:52px;min-height:52px;}
.lupa-nawig[hidden]{display:none;}

@media(max-width:700px){
  /* Na telefonie miniatura zajmuje juz cala szerokosc, wiec podglad musi
     wykorzystac CALY ekran — inaczej "powiekszenie" wychodzilo 1,03x
     i klikniecie nie dawalo nic. */
  .lupa{flex-direction:column;justify-content:center;padding:0;}
  .lupa-scena{order:1;width:100%;height:100%;gap:0;justify-content:center;}
  .lupa-img{max-width:100%;max-height:100%;width:100%;border-radius:0;
            box-shadow:none;}
  /* Podpis jako nakladka: gdyby zabieral wysokosc, zdjecie znow by zmalalo. */
  .lupa-scena figcaption{
    position:absolute;left:0;right:0;bottom:0;margin:0;max-width:none;
    padding:64px 18px 84px;
    background:linear-gradient(to top,rgba(8,11,10,.92),rgba(8,11,10,0));
    pointer-events:none;
  }
  .lupa-lewo,.lupa-prawo{position:absolute;bottom:clamp(14px,4vw,28px);}
  .lupa-lewo{left:22%;}
  .lupa-prawo{right:22%;}
}

@media(prefers-reduced-motion:reduce){
  .lupa{animation:none;}
  .lupa button{transition:none;}
}

/* ---------- zdjecia ---------- */
/* Zdjecia produktow i wdrozen maja rozne proporcje, wiec kadrowanie
   ucinalo urzadzenia. Pokazujemy calosc na neutralnym tle. */
/* height:auto jest konieczne: atrybuty width/height w HTML (dodane, zeby
   strona nie skakala przy ladowaniu) dzialaja jak twarda wysokosc w px,
   a wtedy aspect-ratio przestaje obowiazywac i kafelki maja rozne
   wysokosci. Atrybuty nadal daja przegladarce proporcje z wyprzedzeniem. */
.photo{width:100%;height:auto;display:block;object-fit:contain;border-radius:var(--r-card);background:var(--ground-alt);}
.photo.crop{object-fit:cover;}
.case .photo{border-radius:0;border-bottom:1px solid var(--line);background:var(--ground-alt);}
.photos .photo{aspect-ratio:4/3;}
figure{margin:0;}

/* ---------- formularz: pulapka i komunikaty ---------- */
/* Pole widoczne wylacznie dla automatow. Nie uzywamy display:none,
   bo czesc robotow pomija takie pola swiadomie. */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.formmsg{
  margin-top:18px;padding:16px 20px;border-radius:12px;font-size:.95rem;
  border:1px solid var(--line);background:var(--surface);
}
.formmsg.ok{background:var(--brand-soft);color:var(--brand-ink);border-color:transparent;}
.formmsg.bad{background:#FBE9E7;color:#9B2C1E;border-color:transparent;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .formmsg.bad{background:#3A1C18;color:#F0A093;}
}
:root[data-theme="dark"] .formmsg.bad{background:#3A1C18;color:#F0A093;}

/* ---------- karuzela wdrozen ---------- */
.carousel{position:relative;}
.carousel-track{
  display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 12px;margin:-4px -4px 0;
  scrollbar-width:none;-ms-overflow-style:none;
}
.carousel-track::-webkit-scrollbar{display:none;}
.carousel-track > .case{
  flex:0 0 min(420px, 82vw);scroll-snap-align:start;
}
.carousel-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;}
.carousel-btn{
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  font-size:1.1rem;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:border-color .15s ease,color .15s ease,opacity .15s ease;
}
.carousel-btn:hover:not(:disabled){border-color:var(--brand);color:var(--brand);}
.carousel-btn:disabled{opacity:.35;cursor:default;}

/* ---------- pojawianie sie przy przewijaniu ----------
   Delikatnie, raz na element. Przy wlaczonym w systemie ograniczeniu
   ruchu wszystko jest widoczne od razu — patrz regula nizej. */
.reveal{opacity:0;transform:translateY(18px);}
.reveal.shown{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1);}
.reveal:nth-child(2).shown{transition-delay:.06s;}
.reveal:nth-child(3).shown{transition-delay:.12s;}
.reveal:nth-child(4).shown{transition-delay:.18s;}
.reveal:nth-child(5).shown{transition-delay:.24s;}
.reveal:nth-child(6).shown{transition-delay:.30s;}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal.shown{opacity:1;transform:none;transition:none;}
}

/* ---------- pasek przelaczania miedzy produktami ---------- */
.prodnav{background:var(--ground-alt);border-bottom:1px solid var(--line);}
.prodnav .wrap{display:flex;gap:6px;overflow-x:auto;padding-block:12px;scrollbar-width:none;}
.prodnav .wrap::-webkit-scrollbar{display:none;}
.prodnav a{
  white-space:nowrap;font-size:.88rem;font-weight:500;text-decoration:none;
  /* 11px w pionie daje 44 px wysokosci pola dotyku; przy 8px wychodzilo 39. */
  color:var(--ink-soft);padding:11px 14px;border-radius:999px;transition:background .15s ease;
}
.prodnav a:hover{background:var(--surface);color:var(--ink);}
.prodnav a[aria-current="page"]{background:var(--brand);color:var(--on-brand);}
/* Aktywna pozycja ma zielone tlo, a .brand wymusza zielona literke "i" —
   znikala na wlasnym tle. Dotyczy pozycji, ktore maja nazwe w tytule:
   "Platforma iCober Cloud" i "Aplikacja iCober Key". */
.prodnav a[aria-current="page"] .brand{color:inherit;}

/* karta produktu na stronie przegladowej */
a.prodcard{display:flex;flex-direction:column;text-decoration:none;overflow:hidden;padding:0;}
a.prodcard .photo{border-radius:0;aspect-ratio:16/10;object-fit:cover;border-bottom:1px solid var(--line);}
a.prodcard .body{padding:26px 28px 28px;}
a.prodcard h3,a.prodcard .tytul-bloku{margin-bottom:8px;}
a.prodcard p{font-size:1rem;color:var(--ink-soft);margin:0;}

/* ---------- filmy: zaslona zamiast osadzonego odtwarzacza ----------
   Osadzony YouTube laduje skrypty Google przy kazdym otwarciu strony
   i wymagalby zgody na ciasteczka. Pokazujemy wlasna miniature, a
   odtwarzacz wstawiamy dopiero po kliknieciu. */
.video{position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--dark);
  border:1px solid var(--line);cursor:pointer;display:block;width:100%;padding:0;}
.video img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;opacity:.86;transition:opacity .2s ease,transform .3s ease;}
.video:hover img{opacity:1;transform:scale(1.02);}
.video .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:72px;height:72px;border-radius:50%;background:var(--brand);color:var(--on-brand);
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
}
.video .play svg{width:26px;height:26px;fill:currentColor;margin-left:4px;}
.video:hover .play{background:var(--brand-hover);}
.video .cap{
  position:absolute;left:0;right:0;bottom:0;padding:26px 20px 14px;
  background:linear-gradient(180deg,transparent,rgba(18,26,22,.85));
  color:#fff;font-size:.88rem;font-weight:600;text-align:left;pointer-events:none;
}
.video iframe{width:100%;aspect-ratio:16/9;display:block;border:0;}
.videonote{font-size:.88rem;color:var(--ink-faint);margin-top:10px;}
.videos{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
@media(max-width:820px){.videos{grid-template-columns:1fr;}}

/* Odnosniki w stopce sa tekstowe i mialy 20 px wysokosci — na telefonie
   trudno w nie trafic palcem. Powiekszamy pole dotyku bez zmiany wygladu. */
footer p a{display:inline-block;padding-block:6px;}

/* Rozmiary opisow (2026-09-13, uwaga czytelnika z zewnatrz: opisy za
   drobne). Tekst drugiego planu — karty realizacji, kroki, statystyki,
   tabele, .small, opisy produktow — z 15 px na 16 px (1rem), teksty prawne
   do rozmiaru akapitu (17 px). Naglowki, nadtytuly, etykiety i menu bez
   zmian: to one niosa hierarchie, wiec nie rosna razem z opisami. */
/* ---------- naglowek na telefonie ----------
   Siedem pozycji menu i trzy jezyki nie miesza sie w jednym rzedzie,
   a rozlane na trzy rzedy zajmowaly caly pierwszy ekran. Na waskich
   ekranach menu chowa sie pod przyciskiem. */
.menu-toggle{display:none;}
@media(max-width:900px){
  .masthead .wrap{padding-block:10px;}
  .logo img{height:40px;}
  .logo b{font-size:1.5rem;}
  .menu-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:46px;height:46px;padding:0 11px;border:1px solid #E3EAE5;border-radius:10px;
    background:#fff;cursor:pointer;
  }
  .menu-toggle span{display:block;height:2px;background:#000;border-radius:2px;transition:transform .2s ease,opacity .2s ease;}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .masthead .navbar{
    display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid #E3EAE5;margin-top:10px;padding-top:6px;
    /* Bez tego zostaje flex-wrap:wrap z ukladu na komputer. W kolumnie
       o ograniczonej wysokosci (patrz .open nizej) zawijanie tworzy DRUGA
       KOLUMNE: pozycje nie miescily sie w pionie, wiec przenosily sie w
       bok, a panel dawal sie przesuwac w prawo. */
    flex-wrap:nowrap;
  }
  .masthead .navbar.open{
    display:flex;
    /* Panel jest czescia przyklejonego naglowka, wiec to, czego nie widac,
       jest NIEOSIAGALNE: strona przewija sie pod spodem, a naglowek stoi.
       Przy 14 pozycjach panel ma 801 px, a telefon z widocznym paskiem
       adresu daje okolo 700 px — FAQ i Kontakt wypadaly poza ekran i nie
       dalo sie do nich dojsc. 86px = zmierzona wysokosc paska z logo nad
       panelem (identyczna od 320 do 390 px szerokosci).
       dvh zamiast vh, bo pasek adresu Safari zmienia wysokosc okna. */
    --pasek-z-logo:86px;
    max-height:calc(100vh - var(--pasek-z-logo));
    max-height:calc(100dvh - var(--pasek-z-logo));
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-bottom:12px;
  }
  .masthead nav{flex-direction:column;gap:0;}
  .masthead nav a{padding:13px 2px;font-size:1rem;border-bottom:1px solid var(--line);}
  .masthead nav a[aria-current="page"]{box-shadow:none;font-weight:600;}
  /* Demo wychodzi z menu do belki (patrz demo_telefon_html). W menu
     dziedziczylo padding zwyklych pozycji — 2 px z boku — i robilo sie
     z niego zielone pole na cala szerokosc z napisem przy lewej krawedzi.
     margin-left:auto dosuwa pigulke do przycisku menu; min-height 44 px
     to prog pola dotyku, jak przy jezykach nizej. Odstep w poziomie
     10 px zamiast 20: przy 320 px logo + pigulka + przycisk menu z dwoma
     odstepami po 20 px mialy 300 px na 288 dostepnych i przycisk menu
     spadal do drugiego rzedu. */
  .masthead .wrap{column-gap:10px;}
  .masthead nav .nav-demo{display:none;}
  .nav-demo-telefon{display:inline-flex;align-items:center;margin-left:auto;
    min-height:44px;box-sizing:border-box;padding:0 16px;text-decoration:none;font-size:.95rem;}
  .masthead .langs{border-left:0;padding:14px 0 6px;gap:8px;}
  /* Na telefonie pole dotyku ma miec co najmniej 44 px wysokosci —
     ponizej tego trafienie palcem robi sie loteria. Przy 9 px odstepu
     wychodzilo 39 px. */
  .masthead .langs a{padding:12px 13px;font-size:.82rem;min-height:44px;box-sizing:border-box;}
}

/* ---------- rozwijana lista produktow ----------
   Bez skryptu: :hover dla myszy, :focus-within dla klawiatury.
   Na telefonie (menu pod przyciskiem) podmenu jest zawsze widoczne
   jako wcieta lista — rozwijanie po najechaniu nie ma tam sensu. */
.has-sub{position:relative;display:inline-flex;align-items:center;}
.submenu{
  position:absolute;top:100%;left:-14px;min-width:250px;padding:8px;
  background:#fff;border:1px solid #E3EAE5;border-radius:14px;
  box-shadow:0 10px 34px rgba(15,23,20,.12);
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
  z-index:40;
}
/* Odstep miedzy pozycja a panelem lapiemy niewidocznym paskiem, zeby
   podmenu nie znikalo, gdy kursor przechodzi przez przerwe. */
.has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px;}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:none;}
.submenu a{
  padding:10px 14px;border-radius:8px;font-size:.9rem;color:#54625B;
  text-decoration:none;white-space:nowrap;
}
.submenu a:hover{background:#F3F7F4;color:#000;}

/* ---------- rozwijana lista produktow w motywie ciemnym ----------
   Panel jest nakladany NA strone, wiec bialego tla nie widac, dopoki ktos
   nie najedzie na Produkty — i dlatego umknal przy belce. Ta sama rodzina
   bledu: barwy wpisane na sztywno nie reaguja na motyw. Zmierzony kontrast
   odnosnika w ciemnym wynosil 2.27 przy progu 4.5. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .submenu{
    background:var(--surface);border-color:var(--line);
    box-shadow:0 10px 34px rgba(0,0,0,.5);}
  :root:not([data-theme="light"]) .submenu a{color:var(--ink-soft);}
  :root:not([data-theme="light"]) .submenu a:hover{
    background:var(--ground-alt);color:var(--ink);}
}
:root[data-theme="dark"] .submenu{
  background:var(--surface);border-color:var(--line);
  box-shadow:0 10px 34px rgba(0,0,0,.5);}
:root[data-theme="dark"] .submenu a{color:var(--ink-soft);}
:root[data-theme="dark"] .submenu a:hover{background:var(--ground-alt);color:var(--ink);}
@media(max-width:900px){
  .has-sub{display:block;}
  .has-sub::after{display:none;}
  .submenu{
    position:static;opacity:1;visibility:visible;transform:none;
    border:0;box-shadow:none;padding:0 0 10px 16px;min-width:0;background:transparent;
  }
  .submenu a{padding:9px 2px;font-size:.92rem;border-bottom:1px solid var(--line);}
}

/* ---------- sprawdzanie pol formularza ---------- */
.field label .opt{font-weight:400;color:var(--ink-faint);font-size:.86em;}
.fielderr{margin:7px 0 0;font-size:.9rem;color:var(--zle);}
.form input.zle,.form textarea.zle{border-color:var(--zle);}
.form input.zle:focus,.form textarea.zle:focus{outline-color:var(--zle);}

/* ---------- blog ---------- */
.posts{display:grid;gap:16px;}
.post a{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:center;padding:22px 24px;text-decoration:none;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-card);transition:border-color .15s ease;}
.post a:hover{border-color:var(--brand);}
.post time{font-size:.82rem;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
.post h2{font-size:1.32rem;margin:6px 0 8px;}
.post p{color:var(--ink-soft);margin:0 0 12px;}
.post .arrow{color:var(--brand);font-weight:600;font-size:.94rem;}
.post img{width:96px;height:72px;object-fit:cover;border-radius:8px;display:block;}
/* Wpis bez grafiki nie ma zostawiac dziury po miniaturce. */
.post a.bez-miniatury{grid-template-columns:1fr;}
@media (max-width:560px){
  /* Na waskim ekranie miniaturka obok tekstu zostawia obu za malo miejsca. */
  .post a{grid-template-columns:1fr;gap:14px;}
  .post img{width:100%;height:170px;}
}

/* Tresc artykulu. Szerokosc wiersza pilnuje .wrap.narrow — tutaj chodzi
   o odstepy miedzy elementami, ktorych w reszcie strony nie ma, bo tam
   tekst jest krotki i ulozony recznie. */
/* Szerokosc wiersza ustawiamy na KONTENERZE, nie na akapitach. Globalne
   p{max-width:68ch} zwezalo sam tekst, zostawiajac go przy lewej krawedzi —
   akapit konczyl sie 82 px wczesniej niz obraz nad nim i cala kolumna
   wygladala na przesunieta. Teraz obraz, naglowki i tekst maja jedna
   krawedz, a calosc stoi na srodku. */
.article{max-width:68ch;margin-inline:auto;}
.article p,.article ul,.article ol{max-width:none;}
.article h2{margin:38px 0 12px;font-size:1.5rem;}
.article h3{margin:28px 0 10px;font-size:1.18rem;}
.article p{margin:0 0 16px;}
.article ul,.article ol{margin:0 0 18px;padding-left:22px;}
.article li{margin-bottom:7px;}
.article img{max-width:100%;height:auto;border-radius:var(--r-card);margin:8px 0 20px;}
.article blockquote{margin:22px 0;padding:4px 0 4px 20px;border-left:3px solid var(--brand);
  color:var(--ink-soft);}
.article pre{background:var(--ground-alt);border:1px solid var(--line);border-radius:10px;
  padding:16px 18px;overflow-x:auto;font-size:.9rem;}
.article code{font-size:.92em;background:var(--ground-alt);padding:2px 6px;border-radius:5px;}
.article pre code{background:none;padding:0;}
.article hr{border:0;border-top:1px solid var(--line);margin:32px 0;}
/* Tabela w artykule potrzebuje wlasnego powietrza — bez tego akapit pod nia
   przykleja sie do ramki i zestawienie zlewa sie z tekstem. */
.article .tablewrap{margin:26px 0 28px;}

/* ---------- rytm dlugiego tekstu ----------
   Wpis zlozony z 59 krotkich akapitow czyta sie jak jednolita szara kolumna.
   Ponizsze reguly daja oku punkty zaczepienia, nie ruszajac tresci. */

/* Wejscie w tekst. Pierwszy akapit wiekszy — czytelnik wie, gdzie zaczac. */
.article > p:first-of-type{font-size:1.12rem;line-height:1.62;color:var(--ink);}

/* Sekcje maja byc widoczne jako sekcje, a nie jako pogrubiona linijka. */
.article h2{padding-top:26px;border-top:1px solid var(--line);}
.article h2:first-of-type{padding-top:0;border-top:0;}

/* Cytat jako wyrozniony glos, nie jako akapit z kreska z boku. */
.article blockquote{position:relative;margin:26px 0;padding:18px 22px 18px 52px;
  border-left:0;border-radius:var(--r-card);background:var(--ground-alt);
  font-size:1.06rem;line-height:1.55;color:var(--ink);}
.article blockquote::before{content:"\201E";position:absolute;left:16px;top:6px;
  font-family:Outfit,serif;font-size:2.6rem;line-height:1;color:var(--brand);}
.article blockquote p:last-child{margin-bottom:0;}

/* Pasek z liczbami — patrz blok :::liczby w md.py. */
.liczby{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:2px;margin:30px 0;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;}
.liczba{background:var(--surface);padding:20px 18px;}
.liczba b{display:block;font-family:Outfit,sans-serif;font-size:1.9rem;
  font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--brand);
  font-variant-numeric:tabular-nums;}
.liczba span{display:block;margin-top:6px;font-size:.95rem;line-height:1.4;
  color:var(--ink-soft);}
/* Na waskim ekranie kolumny sa loteria: przy trzech pozycjach dwie kolumny
   zostawiaja pusta komorke, ktora wyglada jak brak tresci. Jedna kolumna
   dziala dla kazdej liczby pozycji. */
@media(max-width:560px){
  .liczby{grid-template-columns:1fr;}
}

/* Wyimek — patrz blok :::wyimek w md.py. Jedno miejsce w tekscie, w ktorym
   oko przystaje. Celowo bez cudzyslowu: to nie jest cytat, tylko zdanie
   wyjete z wlasnego tekstu i podniesione do rangi tezy. */
.article .wyimek{
  margin:44px 0;padding:4px 0 4px 26px;border-left:4px solid var(--brand);
  font-family:Outfit,"Helvetica Neue",Arial,sans-serif;
  font-size:clamp(1.35rem,2.4vw,1.75rem);font-weight:700;line-height:1.25;
  letter-spacing:-.02em;color:var(--ink);max-width:none;text-wrap:balance;
}

/* Lista numerowana w artykule jako karty z duza cyfra. Trzy pytania na
   koncu tekstu byly zwyklymi akapitami z pogrubiona cyfra — ginely w
   kolumnie, mimo ze to jedyny fragment, z ktorym czytelnik ma cos zrobic. */
.article ol{list-style:none;counter-reset:krok;padding:0;margin:26px 0;
  display:grid;gap:14px;}
/* Cyfra pozycjonowana bezwzglednie, NIE jako komorka siatki: tresc pozycji
   to zwykly tekst z pogrubieniem, wiec w siatce kazdy fragment stawal sie
   osobna komorka i zdanie rozpadalo sie na pojedyncze slowa w kolumnie. */
.article ol > li{counter-increment:krok;margin:0;position:relative;
  padding:20px 22px 20px 62px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-card);}
.article ol > li::before{content:counter(krok);position:absolute;
  left:22px;top:19px;
  font-family:Outfit,sans-serif;font-size:1.6rem;font-weight:800;line-height:1;
  color:var(--brand);font-variant-numeric:tabular-nums;}
.article ol > li > *:first-child{margin-top:0;}
.article ol > li > *:last-child{margin-bottom:0;}
@media(max-width:560px){
  .article ol > li{padding:16px 16px 16px 52px;}
}

/* Obraz wiodacy artykulu. Ograniczony w wysokosci, bo grafiki z Canvy
   bywaja pionowe (4:5 pod media spolecznosciowe) i bez tego zajmowalyby
   caly pierwszy ekran, spychajac tekst pod krawedz. */
.article img.lead{width:100%;max-height:440px;object-fit:cover;object-position:center 40%;
  border-radius:var(--r-card);margin:0 0 30px;}
/* Zdjecie pionowe (image_pion w metryczce wpisu). Regula wyzej przycina obraz
   do paska 440 px — pionowe zostaloby z niego pokrojone w poprzek i zostalby
   sam srodek. Tutaj pokazujemy je w calosci, wysrodkowane, ograniczone
   wysokoscia zamiast szerokoscia. */
.article img.lead.pion{width:auto;max-width:min(100%,460px);max-height:680px;
  object-fit:contain;margin-inline:auto;}

/* ---------- ikony rysunkowe ---------- */
/* Rysunki maja bialy kadr wypalony w pliku, wiec zawsze siedza na bialym
   kafelku — takze w trybie ciemnym. Bez tego bylyby to biale naklejki
   rzucone na ciemna karte. Jedna ikona ma wlasne granatowe tlo; kafelek
   sprawia, ze wyglada na oprawiona, a nie odstajaca. */
/* display:flex, nie inline-flex — przy inline etykieta pod spodem laduje
   w tej samej linii co ikona. Szerokosc jest ustalona, wiec blok nie
   rozciaga sie na cala karte. */
.icon.rys{width:76px;height:76px;border-radius:14px;background:#fff;
  padding:0;overflow:hidden;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);margin-bottom:14px;}
.icon.rys img{width:100%;height:100%;object-fit:contain;display:block;}

/* Krok procesu: numer, pod nim rysunek, pod nim tytul. Numer zostaje, bo
   koduje prawdziwa kolejnosc — czytelnik ma wiedziec, ze najpierw rozmowa,
   potem wycena.
   display:flex zamiast block: block odbieral dzialanie justify-content
   i cyfry siadaly przy lewej krawedzi zielonego kwadratu. */
.step{text-align:center;}
/* margin-inline:auto stawia kolko i rysunek na osi karty. Sam text-align
   ich nie ruszy — oba sa blokami o ustalonej szerokosci, a text-align
   dziala na tresc w srodku, nie na sam blok. */
.step .step-num{display:flex;margin:0 auto 14px;}
.step .icon.rys{margin-inline:auto;}
.step p{margin-inline:auto;}

/* ---------- karta produktu: uklad i listy ---------- */
/* Tekst wprowadzenia wysrodkowany w pionie wzgledem zdjecia obok. Przy
   align-items:start opis "wisial" przy gornej krawedzi, a pod nim zostawala
   pusta przestrzen rownie wysoka co pol zdjecia. */
.contact-grid.srodek{align-items:center;}
/* Zdjecie szersze od tekstu — na karcie MultiLocka urzadzenie ginelo przy
   kolumnie tekstu tej samej szerokosci. Kolumny 0.8/1.2 zamiast 1.05/0.95,
   czyli zdjecie okolo 25% wieksze. */
.contact-grid.zdjecie-szersze{grid-template-columns:.62fr 1.38fr;}
/* Ten modyfikator ma wyzsza specyficznosc niz regula skladajaca
   .contact-grid do jednej kolumny na waskim ekranie, wiec bez powtorzenia
   go tutaj zdjecie zostawalo OBOK tekstu takze na telefonie: 151 px
   szerokosci przy zrodle 1400 px. */
@media(max-width:860px){
  .contact-grid.zdjecie-szersze{grid-template-columns:minmax(0,1fr);}
}

/* Lista cech ze strzalkami zamiast kropek. Znacznik jest rysowany, a nie
   wpisany w tresc — dzieki temu czytnik ekranu go nie czyta, a tlumaczenia
   nie musza go powtarzac. */
/* Etykieta nad lista, gdy jedna sekcja wymienia dane kilku urzadzen.
   Nie naglowek: te listy nie sa osobnymi tematami sekcji, tylko jej
   czesciami, a h3 miedzy nimi wprowadzalby poziom, ktorego w strukturze
   dokumentu nie ma. */
/* Rozwijany blok z trescia formalna. Domyslnie zamkniety: ma byc dostepny,
   a nie zatrzymywac kogos, kto szuka konkretu. <details> obsluguje klawiature
   i czytniki ekranu bez skryptu, wiec nie dokladamy zadnego. */
.rozwiniecie{margin-top:30px;border-top:1px solid var(--line);padding-top:18px;}
.rozwiniecie summary{cursor:pointer;font-weight:600;color:var(--brand);
  list-style:none;padding:4px 0;}
.rozwiniecie summary::-webkit-details-marker{display:none;}
.rozwiniecie summary::after{content:" \2193";}
.rozwiniecie[open] summary::after{content:" \2191";}
.rozwiniecie p{margin-top:14px;}
.tytul-listy{font-weight:700;margin:26px 0 10px;}
.tytul-listy:first-of-type{margin-top:18px;}
.strzalki{list-style:none;padding:0;margin:0;display:grid;gap:9px;}
.strzalki li{position:relative;padding-left:26px;}
.strzalki li::before{content:"";position:absolute;left:2px;top:.55em;
  width:7px;height:7px;border-right:2px solid var(--brand);
  border-bottom:2px solid var(--brand);transform:rotate(-45deg);}

/* ---------- zwiezly blok opcji na karcie produktu ----------
   Nazwy opcji w dwoch kolumnach, pod wysrodkowanym naglowkiem sekcji.
   Szesc pozycji w jednej kolumnie ciagnelo sie przez pol ekranu i lamalo
   os strony; w dwoch stoi zwartym blokiem tej samej szerokosci co lede.
   Kolumny znikaja ponizej 640 px, gdzie dwie kolumny daja po dwa slowa. */
/* display:block jest tu konieczne. .strzalki ustawia display:grid, a na
   kontenerze siatki wlasciwosc columns nie ma zadnego skutku — lista
   zostawala jednokolumnowa mimo poprawnie wygladajacej reguly. */
/* 58ch, a nie mniej: w dwoch kolumnach na jedna przypada okolo 27 znakow,
   a najdluzsze nazwy — "Glosnik z komunikatami", "Speaker with voice
   messages", "Hoyttaler med talemeldinger" — wlasnie tyle zajmuja.
   Przy 44ch lamaly sie na dwie linie i lista przestawala byc lista nazw. */
.opcje-nazwy{display:block;max-width:58ch;margin-inline:auto;
  columns:2;column-gap:40px;}
.opcje-nazwy li{margin-bottom:9px;}
.opcje-nazwy li{break-inside:avoid;}
@media(max-width:640px){.opcje-nazwy{columns:1;max-width:34ch;}}
/* Odnosnik-wniosek pod blokiem tresci: pod lista opcji na karcie produktu
   i pod tabela Online/Offline. Nie jest kolejna pozycja listy ani drobnym
   drukiem — stad odstep i wlasna os, ta sama co naglowka sekcji. */
/* text-wrap:balance, bo zdanie z tytulem artykulu w srodku jest dlugie
   i lamalo sie zostawiajac w drugiej linii dwa slowa. Szerokosc
   ograniczona, zeby na szerokim ekranie nie ciagnelo sie przez cala
   sekcje — czyta sie je jak zdanie, nie jak wiersz tabeli. */
.link-dalej{text-align:center;margin:26px auto 0;max-width:66ch;
  text-wrap:balance;}
.link-dalej a{font-weight:600;color:var(--brand);text-decoration:none;}
.link-dalej a:hover{text-decoration:underline;}

/* Kroki otwierania: numer w kolku, opis obok. */
.kroki-otw{list-style:none;padding:0;margin:0 0 22px;counter-reset:k;display:grid;gap:14px;}
.kroki-otw li{position:relative;padding-left:44px;counter-increment:k;}
.kroki-otw li::before{content:counter(k);position:absolute;left:0;top:-1px;
  width:28px;height:28px;border-radius:50%;background:var(--brand-soft);
  color:var(--brand-ink);font-weight:700;font-size:.86rem;
  display:flex;align-items:center;justify-content:center;}

/* Wynik przylozenia: kropka w kolorze swiatla na urzadzeniu. */
.wyniki{list-style:none;padding:0;margin:0;display:grid;gap:10px;}
.wyniki li{position:relative;padding-left:26px;}
.wyniki li::before{content:"";position:absolute;left:0;top:.45em;
  width:12px;height:12px;border-radius:50%;}
.wyniki li.tak::before{background:#1E9E4A;}
.wyniki li.nie::before{background:#B3261E;}

/* ---------- kafelek partnera ---------- */
/* Pasek barw flagi u gory kafelka. Sam kolor by nie wystarczyl — Polska i
   Norwegia sa obie czerwone; pasek niesie caly uklad barw, wiec kraje daja
   sie rozroznic bez czytania podpisu. */
.card.kraj{position:relative;overflow:hidden;}
.card.kraj::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;}
.card.kraj.pl::before{background:linear-gradient(90deg,#D6DEDA 0% 50%,#DC143C 50% 100%);}
.card.kraj.no::before{background:linear-gradient(90deg,#BA0C2F 0% 20%,#D6DEDA 20% 40%,#00205B 40% 60%,#D6DEDA 60% 80%,#BA0C2F 80% 100%);}
.card.kraj.se::before{background:linear-gradient(90deg,#006AA7 0% 33.33%,#FECC00 33.33% 66.67%,#006AA7 66.67% 100%);}
.card.kraj .eyebrow{display:inline-flex;align-items:center;gap:8px;}
.flaga svg{width:18px;height:13px;border-radius:2px;display:block;
  box-shadow:0 0 0 1px rgba(0,0,0,.12);}

/* Zrzut ekranu panelu pod opisem sekcji. Ramka, bo zrzuty maja jasne
   krawedzie i bez niej zlewaja sie z kartka.
   Zrzut wychodzi poza waska kolumne tekstu: tekst czyta sie lepiej w waskiej
   szpalcie, ale gesty pulpit w 724 px jest nieczytelny. `transform` nie
   wplywa na szerokosc ukladu, wiec strona nie dostaje poziomego paska. */
.photo.zrzut{margin-top:26px;border:1px solid var(--line);}
/* Od 2026-09-08 grafika stoi MIEDZY naglowkiem a opisem, wiec potrzebuje
   odstepu takze pod soba — bez niego tekst zaczynal sie o 0 px od krawedzi
   obrazka. `:not(:last-child)` zostawia w spokoju te, ktore koncza sekcje. */
.photo.zrzut:not(:last-child){margin-bottom:26px;}
/* Ilustracja pionowa albo kwadratowa. Zrzut panelu jest szeroki i moze zajac
   cala szerokosc; rysunek o proporcji 0,8:1 przy 1160 px mialby 1400 px
   wysokosci i wypelnilby caly ekran. Stad ograniczenie szerokosci i
   wysrodkowanie. */
.photo.ilustracja{width:auto;max-width:min(100%,520px);max-height:660px;
  margin:26px auto;display:block;border-radius:var(--r-card);}
.wrap.narrow .photo.zrzut{width:min(1160px,calc(100vw - 48px));max-width:none;
  margin-left:50%;transform:translateX(-50%);}

/* Logo partnera w kafelku. Tylko tam, gdzie mamy zgode na publikacje nazwy,
   wiec pojedynczy kafelek moze je miec, a sasiednie nie — stad wyrownanie
   do dolu kafelka, zeby rzad nie wygladal na niedokonczony. */
/* Zacheta na koncu kafelka rozwiazania. Kafelek jest kolumna, a zacheta ma
   margines gorny "auto", zeby w rzedzie o roznej dlugosci opisow wszystkie
   trzy stanely w jednej linii u dolu. */
a.card{display:flex;flex-direction:column;}
a.card .wiecej{margin-top:auto;padding-top:6px;color:var(--brand);
  font-weight:600;font-size:.95rem;}

.card.kraj{display:flex;flex-direction:column;}
.card.kraj p{margin-bottom:22px;}
/* ---------- zrzuty ekranu aplikacji ---------- */
/* Ekrany telefonu sa pionowe (0,48:1). Rozciagniete na szerokosc kolumny
   bylyby absurdalnie wysokie, wiec ograniczamy je wysokoscia i stawiamy
   obok tekstu. Poziome zrzuty (wykres miesieczny, panel) ida pod tekstem
   na pelna szerokosc — inaczej zabralyby cale miejsce kolumnie. */
.tekst-i-ekrany{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:48px;align-items:start;}
@media(max-width:900px){.tekst-i-ekrany{grid-template-columns:1fr;}}

.ekrany{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;
  align-items:center;}
/* align-items: bez tego flex rozciaga obrazy do wysokosci najwyzszego
   sasiada — poziomy zrzut wychodzil 640x520 zamiast 640x309. */
.ekrany img{max-height:520px;max-width:min(100%,640px);width:auto;height:auto;
  display:block;border:1px solid var(--line);border-radius:var(--r-card);}

.ekrany.szeroko:not(:last-child){margin-bottom:30px;}
.ekrany.szeroko{margin-top:30px;width:min(1160px,calc(100vw - 48px));
  max-width:none;margin-left:50%;transform:translateX(-50%);}
.ekrany.szeroko img{max-height:none;max-width:100%;}

/* ---------- wydruk ----------
   Ktos wydrukuje karte produktu przed spotkaniem. Domyslnie szlyby na
   papier rzeczy, ktorych nie da sie kliknac: przycisk menu, nawigacja,
   przelacznik jezyka i przyciski wezwania. Zamiast nich drukujemy adres
   strony, zeby dalo sie do niej wrocic. */
.tylko-druk{display:none;}

@media print{
  /* Tlo i cienie zjadaja tusz, a na papierze nic nie wnosza. */
  *{background:transparent!important;box-shadow:none!important;
    color:#000!important;}
  body{font-size:11pt;line-height:1.45;}

  /* Elementy do klikania — na papierze bezuzyteczne. */
  .masthead nav,.masthead .langs,.motyw,.menu-toggle,.navbar,.prodnav,
  footer nav,footer .legalrow,.cta-band,.btn,.video,.carousel,
  .skip{display:none!important;}
  /* .reveal NIE moze byc na liscie powyzej. Bloki pojawiajace sie przy
     przewijaniu startuja przezroczyste; na wydruku trzeba je POKAZAC, a nie
     ukryc. Wczesniej byly w display:none, a nastepna linia probowala to
     cofnac przez opacity — co nie dziala, bo display wygrywa. Skutek:
     wydruk karty produktu mial nagloweki bez tresci, w tym cala tabele
     Online/Offline. */
  .reveal{display:block!important;opacity:1!important;transform:none!important;}

  /* Znak zostaje — identyfikuje, skad wydruk pochodzi. */
  .masthead{position:static;border-bottom:1px solid #999;}
  .logo img{height:34px;}

  /* Adres strony pod znakiem: bez niego wydruk nie prowadzi z powrotem.
     Wstawiany przez generator, bo tylko on zna pelny adres. */
  .tylko-druk{display:block!important;font-size:9pt;color:#555!important;
    /* Ten akapit stoi poza kolumna tresci, wiec odstep od krawedzi musi
       dostac wlasny — inaczej adres przykleja sie do brzegu kartki. */
    margin:6px 0 0;padding:0 28px;}

  /* Nie tniemy naglowka od tresci ani karty w polowie. */
  h1,h2,h3{break-after:avoid;page-break-after:avoid;}
  .card,.liczby,.article ol > li,table{break-inside:avoid;page-break-inside:avoid;}
  img{max-width:100%!important;}

  /* Ramki zamiast wypelnien — czytelne w czerni i bieli. */
  .card,.liczby,.tablewrap{border:1px solid #999!important;}
  .article blockquote{border-left:3px solid #999!important;padding-left:14px;}
  a[href^="/"]::after,a[href^="http"]::after{content:"";}
}