/* Czcionki hostowane lokalnie zamiast z serwerów Google: adres IP
   użytkownika nie trafia do Google przy każdym wejściu (RODO), a strona
   nie czeka na obce połączenie. Podzbiory latin + latin-ext (polskie
   znaki). Jedna zmienna rodzina Onest (400-800) na całość – wybór
   właściciela z próby A/B/C (spójność ponad wszystko). */

/* Onest · latin-ext (zmienna 400-800) */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/onest-latin-ext-e3512927.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;
}

/* Onest · latin (zmienna 400-800) */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/onest-latin-780d5cc0.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;
}

/* ============================================================
   EuroSell — design system (light)
   Inspired by amazonway.eu (structure, orbit, numbered services).
   Typografia: Onest (jedna zmienna rodzina – dobór właściciela).
   Single stylesheet for the whole site.
   ============================================================ */

:root {
  /* brand */
  --amber:        #F4B41A;
  --amber-bright: #FFC53D;
  --amber-deep:   #D89B00;
  --amber-soft:   #FFF4D6;

  --navy-950: #071120;
  --navy-900: #0B1830;
  --navy-800: #14294A;
  --navy:     #10203A;

  /* light surfaces */
  --bg:        #FFFFFF;
  --bg-soft:   #F6F8FB;
  --surface:   #FFFFFF;
  --border:    #E6EAF1;
  --border-2:  #D8DEE9;

  /* text */
  --text:    #10203A;
  --muted:   #566172;
  --muted-2: #8A93A3;

  --emerald:      #129A66;
  --emerald-soft: #E4F6EE;

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-full: 999px;

  --sh-sm: 0 1px 2px rgba(16,32,58,.05), 0 1px 3px rgba(16,32,58,.04);
  --sh-md: 0 12px 28px -14px rgba(16,32,58,.18), 0 3px 8px rgba(16,32,58,.05);
  --sh-lg: 0 30px 60px -24px rgba(16,32,58,.22), 0 8px 20px -10px rgba(16,32,58,.10);

  /* pionowy rytm sekcji – patrz komentarz przy .section */
  --sec-pad: clamp(52px, 6vw, 76px);
  --sec-pad-tight: clamp(30px, 3.4vw, 42px);

  --container: 1200px;
  --gutter: 24px;

  --font-head: "Onest", system-ui, sans-serif;
  --font-body: "Onest", system-ui, sans-serif;
  --font-mono: "Onest", system-ui, sans-serif;
}

/* ---------- reset / base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
main { min-height: 60vh; }
/* height: auto jest OBOWIĄZKOWE, odkąd obrazki mają w HTML atrybuty
   width/height (rezerwacja miejsca, zero skoków układu): atrybut wysokości
   działa jak wpis CSS i bez tego wygrywa nad max-height/aspect-ratio,
   rozciągając albo spłaszczając grafikę. Reguły, które celowo ustawiają
   wysokość (np. pasek logotypów), są bardziej szczegółowe i nadal wygrywają. */
img { max-width: 100%; height: auto; display: block; }

/* Logo wpasowywane w gotowy kafelek (sam kontener rezerwuje miejsce, więc
   nic tu nie skacze) – pudełko obrazka ma iść za proporcją pliku, a nie za
   atrybutem szerokości z HTML. Bez tego np. odznaka 400x388 dostawała
   pudełko 118px zamiast 65px i rozpychała sąsiadów w rzędach poziomych. */
.hero-cert-mark img,
.cert-feature img,
.cert-row-logo img,
.badge-logo img,
.cert-item img,
.mkt-logo img,
.page-hero-logo img,
.logo-strip-logo img,
.rel-art img,
.case-brand-plate img,
.case-client-logo img { width: auto; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
::selection { background: var(--amber); color: var(--navy-950); }

/* tekst tylko dla czytników ekranu (np. nazwy krajów przy kropkach na mapie) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 840px; }
.relative-layer { position: relative; }

/* ciasniejszy rytm pionowy (uwaga wlasciciela: za duzo pustej przestrzeni
   na podstronach); mobile ma wlasna wartosc nizej w sekcji responsywnej */
/* SKALA ODSTĘPÓW PIONOWYCH – jedno źródło prawdy dla całego serwisu.
   --sec-pad       standardowy oddech sekcji (góra i dół): między dwiema
                   sekcjami daje 2× tę wartość,
   --sec-pad-tight zacieśnienie dla bloków, które są ciągiem tej samej
                   listy (kolejne działy katalogu platform) – NIE dla
                   osobnych sekcji z własnym nagłówkiem. */
.section { padding-block: var(--sec-pad); position: relative; }
/* pierwsza sekcja po hero podstrony: hero ma juz swoj dolny odstep,
   wiec nie sumujemy dwoch duzych paddingow; pasek faktow (stats) ma
   wlasne 0 na gorze - chipy maja przylegac do hero */
.page-hero + .section:not(.page-stats-section) { padding-top: clamp(24px, 3vw, 40px); }
/* sekcja zaraz po chipach faktow: bez pelnego gornego odstepu,
   zeby po pasku nie zialo (obrysy wlasciciela na zrzucie) */
.page-stats-section + .section { padding-top: clamp(20px, 2.5vw, 36px); }
/* sekcja tuz po artykule (case study, wpis): artykul konczy sie wlasnym
   odstepem, wiec CTA nie potrzebuje pelnego gornego marginesu */
article + .section { padding-top: clamp(28px, 3.5vw, 48px); }
.section--cool { background: var(--bg-soft); }

/* ---------- typography ---------- */
.display {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.7rem);
  line-height: 1.05;
  letter-spacing: -0.024em;
  color: var(--text);
  text-wrap: balance;
}
.display .accent { color: var(--amber-deep); }
.h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}
.h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.22rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
}
.lead {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.68;
  color: var(--muted);
  text-wrap: pretty;
}
.muted { color: var(--muted); }
.mono {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
/* kicker ze znakiem euro (decyzja właściciela) – jedna reguła dla
   wszystkich etykiet w serwisie, spójnie z marką EuroSell */
.eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber-deep);
}
/* etykieta bywa tez naglowkiem sekcji (h2 w case studies) – wyglada
   identycznie, ale wchodzi do konspektu strony */
h2.eyebrow { margin: 0; }
.eyebrow::before {
  content: "";
  width: 1.3em;
  height: 1.3em;
  background: url(eurosell-o-mark.png) center / contain no-repeat;
  margin-right: .6em;
  flex: none;
}

.sec-head { max-width: 700px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head .h2 { margin-top: 16px; }
.sec-head .lead { margin-top: 16px; }
.section-title { margin-top: 16px; }
.section-description { margin-top: 16px; }
.content-grid { margin-top: 46px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .96rem;
  padding: 14px 24px;
  border-radius: var(--r-sm);
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s, background .16s, border-color .16s, color .16s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--amber);
  color: var(--navy-950);
  box-shadow: 0 10px 24px -10px rgba(216,155,0,.55);
}
.btn-primary:hover { background: var(--amber-bright); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border-2);
}
.btn-ghost:hover { border-color: var(--navy-900); transform: translateY(-2px); }
.btn-dark { background: var(--navy-900); color: #fff; }
.btn-dark:hover { background: #16294d; transform: translateY(-2px); }
.btn-lg { padding: 16px 28px; font-size: 1.02rem; }
.btn-compact { padding: 11px 18px; }
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  color: var(--amber-deep);
}
.btn-link:hover { color: var(--navy-900); }

/* ---------- tags / chips ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: var(--r-full);
  font-size: .8rem;
  font-weight: 600;
  background: var(--bg-soft);
  color: var(--muted);
  border: 1px solid var(--border);
}
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 4px rgba(18,154,102,.12);
}

}

/* pasek w firmowym bursztynie – ten sam kolor co przyciski CTA,
   z granatowym tekstem; zamiast twardej krawędzi miękko rozpływa się
   gradientem w nagłówek poniżej */
.footer .soc .is-soon { opacity: .4; cursor: default; }
.footer .soc .is-soon {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px dashed var(--border-2);
  background: var(--surface);
  color: var(--muted);
}

/* language switcher — dropdown next to the CTA button */
.lang-item { position: relative; }
.lang-current {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--border-2);
  background: var(--surface);
  font-weight: 600;
  font-size: .86rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.lang-current:hover { border-color: var(--amber); background: var(--bg-soft); }
.lang-current .flag { width: 17px; height: 17px; display: inline-block; vertical-align: -3px; }
.lang-caret { width: 8px; height: auto; flex: none; color: var(--muted-2); transition: transform .2s; }
.lang-item:hover .lang-caret, .lang-item:focus-within .lang-caret { transform: rotate(180deg); }
.lang-drop {
  position: absolute; top: 100%; right: 0;
  padding-top: 10px;
  transform: translateY(6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 80;
}
.lang-item:hover .lang-drop, .lang-item:focus-within .lang-drop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
}
.lang-drop-panel {
  min-width: 168px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: 8px;
}
.lang-option {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  font-weight: 600;
  font-size: .89rem;
  color: var(--muted);
  white-space: nowrap;
}
.lang-option .flag { width: 18px; height: 18px; display: inline-block; vertical-align: -4px; }
.lang-option:hover { color: var(--text); background: var(--bg-soft); }
.lang-option.on { color: var(--navy-950); background: var(--amber-soft); }

.lang-switch.mobile { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.lang-switch.mobile a { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .93rem; font-weight: 600; padding: 9px 8px; border-bottom: none; }
.lang-switch.mobile a .flag { width: 18px; height: 18px; display: inline-block; vertical-align: -4px; }
.lang-switch.mobile a.on { color: var(--navy-950); background: var(--amber-soft); border-radius: 9px; }

/* ---------- topbar (receptura sellero: firmowy kolor + biel) ---------- */
.topbar {
  background: var(--navy-900);
  color: #fff;
  font-size: .8rem;
}
.topbar-inner {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  line-height: 1;
}
.topbar-contact { display: flex; align-items: center; gap: 20px; }
.topbar-contact a {
  display: inline-flex; align-items: center; gap: 7px;
  color: rgba(255,255,255,.9);
  white-space: nowrap;
  transition: color .15s;
}
.topbar-contact a:hover { color: #fff; }
.topbar-contact a svg { flex: none; opacity: .85; }
.topbar-soc { display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
.topbar-soc a, .topbar-soc .is-soon {
  display: inline-flex;
  color: rgba(255,255,255,.78);
  transition: color .15s, transform .15s;
}
.topbar-soc a:hover { color: #fff; transform: translateY(-1px); }
.topbar-soc .is-soon { opacity: .45; cursor: default; }
@media (max-width: 700px) {
  /* socials są w stopce – na wąskim ekranie zostaje czytelny kontakt */
  .topbar-soc { display: none; }
  .topbar-inner { justify-content: center; }
  .topbar-contact { gap: 14px; flex-wrap: wrap; justify-content: center; }
}

/* ---------- header ---------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .25s;
}
.hdr.scrolled { box-shadow: 0 6px 24px -18px rgba(16,32,58,.35); }
.hdr-inner {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { height: 48px; width: auto; }
/* logo w stopce w kafelku – rownym rytmem z odznaka Gold obok danych firmy */
.footer-logo {
  display: inline-flex;
  padding: 16px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
}
.footer-logo img { height: 46px; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a,
.nav .nav-top {
  padding: 9px 14px;
  border-radius: 9px;
  font-weight: 600;
  font-size: .93rem;
  color: var(--muted);
  transition: color .15s, background .15s;
}
/* etykiety górnej belki nie łamią się ("Integracje i automatyzacje"),
   ale linki WEWNĄTRZ paneli mogą – dzięki temu grupy mieszczą się obok
   siebie zamiast składać w pionową kolumnę z przewijaniem */
.nav > a,
.nav .nav-top { white-space: nowrap; }
.nav a:hover, .nav .nav-top:hover { color: var(--text); background: var(--bg-soft); }
.nav-item { position: relative; }
.nav-top {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; font-family: inherit; cursor: pointer;
}
/* chevron SVG (cienka zaokrąglona kreska) zamiast znakowego trójkącika ▾ */
.nav-caret { width: 9px; height: auto; flex: none; opacity: .5; transition: transform .2s, opacity .2s; }
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: rotate(180deg); opacity: 1; }
.nav-drop {
  position: absolute; top: 100%; left: 0;
  padding-top: 10px;
  transform: translateY(6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 80;
}
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
}
/* wszystkie panele rozwijają się w prawo (spójnie); od kiedy poniżej
   1141px działa burger, wąskie panele mieszczą się bez kotwiczenia
   ostatniego menu do prawej krawędzi */
.nav-drop-panel {
  display: flex; gap: 26px;
  /* bezpieczniki: panel nigdy nie wychodzi poza ekran ani w poziomie
     (zawijanie grup + limit szerokości), ani w pionie (przewijanie
     wewnątrz na niskich laptopach); width: max-content jest konieczne,
     bo panel leży w elemencie pozycjonowanym absolutnie i bez tego
     kurczy się do najszerszej pojedynczej grupy (grupy składają się
     wtedy w pionową kolumnę) */
  flex-wrap: wrap;
  width: max-content;
  /* rezerwa 200px = maksymalne wcięcie pierwszego elementu menu od lewej
     krawędzi ekranu przy najwęższym desktopie (981px) */
  max-width: min(920px, calc(100vw - 200px));
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: 22px 24px;
}
/* kolumna panelu: grupy ułożone jedna pod drugą, separator pionowy
   dopiero między kolumnami – małe grupy nie rozpychają panelu wszerz */
.nav-col { display: flex; flex-direction: column; gap: 20px; }
.nav-col + .nav-col { border-left: 1px solid var(--border); padding-left: 26px; }
.nav-group { min-width: 168px; }
.nav-group-title {
  display: block;
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin-bottom: 10px;
}
.nav-group-links a {
  display: block;
  padding: 7px 9px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .89rem;
  color: var(--muted);
  white-space: nowrap;
}
.nav-group-links a:hover { color: var(--text); background: var(--bg-soft); }
/* flagi rynków w menu (Twemoji SVG – jak w przełączniku języka) */
.nav-flag { width: 17px; height: 17px; display: inline-block; vertical-align: -3px; margin-right: 4px; }
/* link "zobacz wszystkie" w rozwijanym menu – zamyka skróconą listę */
.nav-group-links a.nav-more,
.m-nav-group a.nav-more {
  color: var(--amber-deep);
  font-weight: 700;
}
.nav-group-links a.nav-more::after { content: " →"; }
.nav-group-links.two-col a.nav-more,
.nav-group-links.three-col a.nav-more { grid-column: 1 / -1; margin-top: 4px; }
.nav-group-links.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.nav-group-links.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; width: 460px; }
.nav-group-links.three-col a { font-size: .84rem; padding: 6px 8px; }
.hdr-cta { display: flex; align-items: center; gap: 12px; }

.burger { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 10px; color: var(--text); }
.burger:hover { background: var(--bg-soft); }
.burger span { display: block; width: 21px; height: 2px; border-radius: 2px; background: currentColor; }
.mobile-nav { display: none; background: var(--surface); border-top: 1px solid var(--border); box-shadow: var(--sh-md); max-height: calc(100vh - 120px); overflow-y: auto; }
.mobile-nav.open { display: block; }
.mobile-nav .container { display: flex; flex-direction: column; gap: 2px; padding-block: 14px 20px; }
.mobile-nav a:not(.btn) { padding: 11px 8px; border-bottom: 1px solid var(--border); font-weight: 600; }
.mobile-nav .btn { margin-top: 10px; }
.m-nav-group { border-bottom: 1px solid var(--border); }
.m-nav-group summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 8px; font-weight: 600; cursor: pointer; list-style: none;
}
.m-nav-group summary::-webkit-details-marker { display: none; }
.m-nav-group[open] summary .nav-caret { transform: rotate(180deg); }
.m-nav-group .m-nav-title {
  display: block; padding: 10px 8px 4px;
  font-family: var(--font-mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--amber-deep);
}
.m-nav-group a:not(.btn) { padding: 9px 8px 9px 18px; border-bottom: none; display: block; font-size: .93rem; color: var(--muted); }
.m-nav-group a:not(.btn):hover { color: var(--text); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(56% 48% at 88% 0%, rgba(244,180,26,.12), transparent 70%),
    linear-gradient(var(--bg-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-soft) 1px, transparent 1px),
    var(--bg);
  background-size: auto, 56px 56px, 56px 56px, auto;
  padding-block: clamp(26px, 4.5vh, 52px) clamp(20px, 3vh, 40px);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
}
.hero-title { margin-top: 14px; font-size: clamp(2.1rem, min(4.4vw, 5.6vh), 3.3rem); }
.hero-lead { max-width: 560px; margin-top: 12px; }
/* rotator platform: nazwy podmieniają się z lekkim uniesieniem, szerokość
   płynie do zmierzonej w JS – tekst wokół przesuwa się, nie skacze.
   Wyróżnienie ciemniejszym drukiem, żeby zmianę było widać kątem oka. */
.hero-rotator-word {
  display: inline-block;
  white-space: nowrap;
  font-weight: 600;
  color: var(--text);
  transition: width .3s ease, opacity .24s ease, transform .24s ease;
}
.hero-rotator-word.is-swapping { opacity: 0; transform: translateY(7px); }
@media (prefers-reduced-motion: reduce) {
  .hero-rotator-word { transition: none; }
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(14px, 2vh, 22px); }
/* fakty hero: zwarte kafelki dopasowane do tresci – liczba i opis obok
   siebie, zero pustki w srodku (decyzja wlasciciela) */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(16px, 2.4vh, 28px);
}
.hero-stats div {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
}
.hero-stats strong { font-family: var(--font-head); font-weight: 700; font-size: 1.45rem; letter-spacing: -.02em; color: var(--text); line-height: 1; }
.hero-stats span { color: var(--muted); font-size: .76rem; line-height: 1.35; max-width: 16ch; }
.hero-note { margin-top: 26px; color: var(--muted-2); font-size: .84rem; }
.hero-channels { margin-top: 10px; color: var(--muted-2); font-size: .68rem; letter-spacing: .12em; }

/* ---------- mapa Europy w hero ----------
   Kropki mapy (europe-dots.svg) powstają z prawdziwych granic państw
   rzutowanych odwzorowaniem stożkowym Lamberta. Warstwa tras (SVG) i
   warstwa pinezek (HTML) leżą dokładnie na tym samym układzie współrzędnych
   co mapa, więc trzymają się jej przy każdej szerokości.
   --map-ar ustawia widok z wymiarów viewBoxa mapy — dzięki temu zmiana kadru
   w generatorze nie może rozjechać proporcji kontenera z samą grafiką. */
.euromap-wrap { display: grid; place-items: center; width: 100%; }
.euromap {
  position: relative;
  width: min(492px, 100%);
  aspect-ratio: var(--map-ar, 1000 / 1023);
  /* jednostki cqw niżej skalują pinezki i etykiety razem z mapą, więc
     rozstaw, który nie koliduje przy jednej szerokości, nie koliduje
     przy żadnej innej */
  container-type: inline-size;
}
/* ciepła poświata pod mapą — echo bursztynowego "O" z logo */
.euromap::before {
  content: "";
  position: absolute;
  inset: -14% -10% -6%;
  background: radial-gradient(circle at 50% 50%, rgba(244,180,26,.20), rgba(244,180,26,.06) 52%, transparent 74%);
  pointer-events: none;
}
/* Wszystkie trzy warstwy (mapa, trasy, pinezki) dzielą tę samą ramkę —
   to warunek poprawności: gdyby miały różne, kropki zjechałyby z krajów. */
.euromap-base,
.euromap-lanes,
.euromap-ring,
.euromap-pins {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.euromap-lanes { overflow: visible; }
/* Mapa dochodzi do obręczy i jest przy niej twardo przycięta, więc nic nie
   wychodzi poza koło. Kadr mapy jest kwadratowy (generator dociąga go do
   1:1), więc przycięcie wypada dokładnie na okręgu, a nieprzezroczysta
   obręcz zakrywa wąski pasek przyciętych kropek przy samej krawędzi. */
.euromap-base {
  clip-path: circle(48.3% at 50% 50%);
}
/* Bursztynowa obręcz — echo litery "O" z logo. Bez ruchu: zamiast tego
   gradient (jaśniejszy u góry, głębszy u dołu) i rozmyta poświata pod
   spodem, dzięki czemu obręcz wtapia się w ciepłe tło mapy, a nie leży na
   niej jako płaski, obcy pasek. */
.euromap-ring { pointer-events: none; overflow: visible; }
.ring-base {
  stroke: url(#euromapRing);
  stroke-width: 34;
}
.ring-halo {
  stroke: var(--amber);
  stroke-width: 46;
  opacity: .38;
  filter: blur(9px);
}

/* trasy handlowe wychodzące z huba (Polska): północne łukiem przez Bałtyk,
   południowe przez Alpy */
/* Granat, tak jak znaczniki rynków — bursztynowa trasa na bursztynowej
   mapie była niewidoczna. Trasy i znaczniki czytają się teraz jako jedna
   siatka połączeń. */
.lane-base {
  stroke: var(--navy-900);
  stroke-width: 2.2;
  stroke-dasharray: 3 8;
  stroke-linecap: round;
  opacity: .3;
}
.lane-beam {
  stroke: var(--navy-900);
  stroke-width: 3.6;
  stroke-linecap: round;
  /* pathLength="100" w markupie normalizuje długość każdej trasy, więc
     jeden zestaw wartości dash działa dla wszystkich, bez względu na to,
     jak długa jest dana trasa */
  stroke-dasharray: 12 88;
  animation: lane-run 4.6s linear infinite;
  animation-delay: var(--lane-delay, 0s);
  filter: drop-shadow(0 1px 3px rgba(16,32,58,.45));
}
@keyframes lane-run { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* pinezki rynków */
.euromap-pins { pointer-events: none; }
.euromap-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
  pointer-events: auto;
}
/* centrowanie kropki ujemnym marginesem, nie transformem — transform jest
   tu zarezerwowany dla powiększenia przy najechaniu */
.euromap-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(10px, 2.7cqw, 16px);
  height: clamp(10px, 2.7cqw, 16px);
  margin: calc(clamp(10px, 2.7cqw, 16px) / -2) 0 0 calc(clamp(10px, 2.7cqw, 16px) / -2);
  border-radius: 50%;
  /* Granat, nie bursztyn: cała mapa jest bursztynowa, więc bursztynowy
     znacznik w niej ginie. Granat to drugi kolor marki, daje pełny kontrast
     i od razu czyta się jako "tu działamy". */
  background: var(--navy-900);
  border: 2.5px solid var(--surface);
  box-shadow: 0 0 0 1px rgba(11,24,48,.25), 0 3px 10px rgba(16,32,58,.35);
  transition: transform .18s cubic-bezier(.2,.7,.3,1);
}
.euromap-pin.is-hub .euromap-dot {
  width: clamp(16px, 4.2cqw, 24px);
  height: clamp(16px, 4.2cqw, 24px);
  margin: calc(clamp(16px, 4.2cqw, 24px) / -2) 0 0 calc(clamp(16px, 4.2cqw, 24px) / -2);
  background: var(--navy-900);
  box-shadow: 0 0 0 3px var(--amber), 0 0 0 4px rgba(216,155,0,.5), 0 4px 14px rgba(16,32,58,.4);
}
/* Pulsuje tylko hub — 27 pulsujących kropek robiłoby z mapy migotanie. */
.euromap-pin.is-hub .euromap-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--amber-deep);
  animation: pin-pulse 3s ease-out infinite;
}
@keyframes pin-pulse {
  0%        { transform: scale(.75); opacity: .8; }
  70%, 100% { transform: scale(2.7); opacity: 0; }
}
.euromap-pin:hover,
.euromap-pin:focus-visible { z-index: 5; }
.euromap-pin:hover .euromap-dot,
.euromap-pin:focus-visible .euromap-dot {
  transform: scale(1.3);
  background: var(--amber-deep);
  box-shadow: 0 0 0 3px var(--amber-soft), 0 4px 14px rgba(16,32,58,.35);
}
a.euromap-pin { cursor: pointer; }
span.euromap-pin { cursor: default; }

.euromap-caption {
  margin-top: 22px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.euromap-caption b { color: var(--amber-deep); }

/* pasek najmocniejszych certyfikatów pod mapą */
.hero-certs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.hero-cert {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  box-shadow: var(--sh-sm);
  transition: border-color .18s, box-shadow .18s;
}
.hero-cert:hover { border-color: var(--amber); box-shadow: var(--sh-md); }
.hero-cert-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--bg-soft);
  overflow: hidden;
}
.hero-cert-mark img { max-width: 30px; max-height: 30px; object-fit: contain; }
.hero-cert-mark .mkt-logo img { max-width: 28px; max-height: 16px; }
.hero-cert-mark .mkt-mono { font-family: var(--font-head); font-weight: 700; font-size: .62rem; color: var(--muted); }
/* odznaka-obrazek ma wlasna oficjalna oprawe – zadnej dodatkowej ramki,
   pigulki ani przycinania; selektor z rodzicem, zeby wygrac
   z .hero-certs--single .hero-cert */
.hero-certs .hero-cert.hero-cert--img, .hero-certs--single .hero-cert.hero-cert--img {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.hero-certs .hero-cert.hero-cert--img:hover { box-shadow: none; transform: translateY(-2px); }
.hero-cert--img img { display: block; height: 136px; width: auto; }
@media (max-height: 790px) and (min-width: 981px) {
  .hero-cert--img img { height: 104px; }
  .hero-certs { margin-top: 12px; }
}

.hero-cert-txt { display: flex; flex-direction: column; line-height: 1.25; }
.hero-cert-txt b { font-family: var(--font-head); font-weight: 600; font-size: .82rem; color: var(--text); }
.hero-cert-txt em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber-deep);
}

/* wariant z jednym certyfikatem: zamiast trzech małych pigułek jedna duża */
.hero-certs--single .hero-cert {
  gap: 14px;
  padding: 14px 26px 14px 16px;
  border-radius: var(--r-lg);
  border-color: rgba(216,155,0,.45);
  box-shadow: var(--sh-md);
}
.hero-certs--single .hero-cert-mark {
  width: 58px;
  height: 58px;
}
.hero-certs--single .hero-cert-mark img { max-width: 44px; max-height: 44px; }
.hero-certs--single .hero-cert-mark .mkt-logo img { max-width: 42px; max-height: 22px; }
.hero-certs--single .hero-cert-txt b { font-size: 1.08rem; }
.hero-certs--single .hero-cert-txt em { font-size: .68rem; letter-spacing: .12em; }

@media (prefers-reduced-motion: reduce) {
  .lane-beam { animation: none; opacity: .6; }
  .euromap-dot::after { animation: none; opacity: 0; }
}

/* logo strip */
.logo-strip-block { border-top: 1px solid var(--border); background: var(--surface); padding-block: 26px; }
.logo-strip-label { text-align: center; color: var(--muted-2); }
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 38px;
  margin-top: 18px;
}
.logo-strip img {
  height: 24px;
  width: auto;
  max-width: 130px;
  filter: grayscale(1);
  opacity: .55;
  transition: filter .2s, opacity .2s;
}
.logo-strip a:hover img, .logo-strip span:hover img { filter: none; opacity: 1; }
.logo-strip-name { font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--muted-2); transition: color .2s; }
.logo-strip span:hover .logo-strip-name { color: var(--text); }

/* trust marquee — pasek "Zaufali nam" pod hero, jedna linia, przewijana w pętli w prawo→lewo */
.trust-marquee-block { border-top: 1px solid var(--border); background: var(--surface); padding-block: 26px; }
.trust-marquee {
  overflow: hidden;
  margin-top: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.trust-marquee-track {
  display: flex;
  align-items: center;
  /* odstępy przez padding elementów, NIE przez flexowy gap: pętla przesuwa
     taśmę o -50%, a z gapem połowa szerokości ≠ jeden komplet logotypów
     i animacja skakała o pół odstępu przy każdym zawinięciu */
  width: max-content;
  will-change: transform;
  animation: trust-marquee-scroll 36s linear infinite;
}
.trust-marquee-item { display: flex; align-items: center; justify-content: center; flex: none; padding-inline: 32px; }
.trust-marquee-item img {
  height: 46px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .6;
  transition: filter .2s, opacity .2s;
}
.trust-marquee-item:hover img { filter: none; opacity: 1; }
.trust-marquee-item .logo-strip-name { font-family: var(--font-head); font-weight: 600; font-size: 1.3rem; color: var(--muted-2); white-space: nowrap; transition: color .2s; }
.trust-marquee-item:hover .logo-strip-name { color: var(--text); }
@keyframes trust-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .trust-marquee-track { animation: none; }
  .trust-marquee { overflow-x: auto; }
}
@media (max-width: 700px) {
  .trust-marquee-item img { height: 34px; max-width: 140px; }
  .trust-marquee-item .logo-strip-name { font-size: 1.05rem; }
}

/* partner strip (dyskretny wariant logo_wall) */
.partner-strip { border-top: 1px solid var(--border); background: var(--bg-soft); padding-block: 30px; }

/* badge wall (wyeksponowany wariant logo_wall: certyfikaty, zaufali nam) */
.badge-wall {
  display: grid;
  /* 3 kolumny = odznaki w równych rzędach po 3, bez sieroty w ostatnim */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  max-width: 860px;
  margin-inline: auto;
}
/* Certyfikaty i integratorzy to DWIE osobne sekcje – każda z własnym
   nadtytułem i nagłówkiem – więc trzymają pełny rytm strony. Wcześniejszy
   wyjątek (padding-bottom ~38px + padding-top: 0) sklejał je w jeden blok
   i nagłówek "Integratorzy" wpadał tuż pod ostatnią odznakę. */
.badge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 20px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.badge-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--amber);
}
/* delikatne wyróżnienie (np. Sellero) – ta sama wielkość, tylko cieplejsza rama */
.badge-card--featured {
  border-color: var(--amber);
  background: linear-gradient(180deg, var(--amber-soft), var(--surface) 72%);
  box-shadow: var(--sh-sm);
}

/* ---------- certyfikaty: duży baner lidera + zwięzłe wzmianki ---------- */
.cert-split {
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  gap: 20px;
  max-width: 1000px;
  margin-inline: auto;
  align-items: stretch;
}
.cert-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 30px 24px;
  background: linear-gradient(180deg, var(--amber-soft), var(--surface) 78%);
  border: 1px solid var(--amber);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  transition: transform .2s, box-shadow .2s;
}
a.cert-feature:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.cert-feature img { max-height: 200px; max-width: min(100%, 320px); object-fit: contain; }
.cert-feature strong { font-family: var(--font-head); font-weight: 600; font-size: .98rem; color: var(--text); }
.cert-feature-more { font-size: .78rem; font-weight: 600; color: var(--amber-deep); }
.cert-feature-desc { font-size: .86rem; color: var(--muted); line-height: 1.55; max-width: 34ch; }
.cert-list { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.cert-row {
  /* rzędy dzielą wysokość kolumny po równo – wyrównane z banerem obok */
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
a.cert-row:hover { transform: translateY(-2px); border-color: var(--amber); box-shadow: var(--sh-sm); }
/* logotypy wzmianek: wiekszy boks o stalych proporcjach, zeby kwadratowe
   odznaki i szerokie wordmarki mialy te sama wage wizualna */
.cert-row-logo { display: grid; place-items: center; width: 96px; height: 64px; flex: none; }
.cert-row-logo img { max-width: 96px; max-height: 64px; object-fit: contain; border-radius: 8px; }
.cert-row-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cert-row strong { font-family: var(--font-head); font-weight: 600; font-size: .88rem; color: var(--text); }
.cert-row-desc { font-size: .8rem; color: var(--muted); line-height: 1.5; }
.cert-row .badge-note { margin-left: auto; white-space: nowrap; }
.cert-row-arrow { color: var(--amber-deep); font-weight: 700; }
@media (max-width: 860px) {
  .cert-split { grid-template-columns: 1fr; }
  .cert-feature img { max-height: 150px; }
  .cert-row { flex-wrap: wrap; row-gap: 4px; }
  .cert-row-logo { width: 76px; height: 52px; }
  .cert-row-logo img { max-width: 76px; max-height: 52px; }
}
.badge-logo { display: grid; place-items: center; min-height: 84px; }
.badge-logo img { max-width: 150px; max-height: 84px; object-fit: contain; border-radius: 8px; }
/* kwadratowa odznaka Gold dusi sie w 84px – dostaje wiecej miejsca
   (rozmiar jak w hero) i zero dodatkowego zaokraglania – ma wlasna oprawe */
.badge-logo img[src*="amazon-gold"] { max-width: 136px; max-height: 136px; border-radius: 0; }
.badge-card strong { font-family: var(--font-head); font-size: .84rem; line-height: 1.35; color: var(--muted); font-weight: 600; }
.badge-note { font-size: .72rem; color: var(--amber-deep); font-weight: 700; }
a.badge-card strong { color: var(--text); }
@media (max-width: 520px) { .badge-wall { grid-template-columns: 1fr; max-width: 280px; margin-inline: auto; } }

/* certyfikaty pogrupowane po kompetencji (marketplace / ads / IT) */
/* Wiersz na grupę (etykieta z lewej, logotypy z prawej) zamiast kolumn —
   grupy mają bardzo różną liczbę logotypów (8 / 2 / 3), więc kafle obok
   siebie rozciągałyby się do równej wysokości i zostawiały puste dziury. */
.cert-groups {
  display: grid;
  gap: 14px;
}
.cert-group {
  display: grid;
  grid-template-columns: 230px 1fr;
  align-items: center;
  gap: 16px 28px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: border-color .18s, box-shadow .18s;
}
.cert-group:hover { border-color: var(--amber); box-shadow: var(--sh-md); }
.cert-group-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cert-group-label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--text);
}
.cert-group-note {
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber-deep);
}
.cert-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cert-item {
  display: grid;
  place-items: center;
  min-width: 104px;
  min-height: 52px;
  flex: 0 1 auto;
  padding: 8px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r);
  transition: background .18s, border-color .18s;
}
.cert-item:hover { background: var(--surface); border-color: var(--border-2); }
/* Wgrane odznaki (Amazon Ads, Allegro Ads) dostają więcej miejsca niż loga
   marketplace'ów — to one są właściwym dowodem certyfikacji. */
.cert-item img { max-height: 48px; max-width: 120px; width: auto; object-fit: contain; }
/* loga marketplace'ów w kafelkach są szare, kolor dostają przy najechaniu —
   tak samo jak ściana "Kanały" niżej na stronie */
.cert-item .mkt-logo img {
  max-height: 24px;
  max-width: 78px;
}
.cert-item .mkt-mono {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--muted);
}
.cert-item-name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .92rem;
  color: var(--muted);
  white-space: nowrap;
}
@media (max-width: 760px) {
  .cert-group { grid-template-columns: 1fr; align-items: start; }
  .cert-item { min-width: 88px; min-height: 46px; padding: 7px 12px; flex: 1 1 88px; }
}

/* ---------- pas CTA w środku strony ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--amber-soft), #fff 70%);
  border-block: 1px solid var(--border);
  /* pas CTA ma się wybijać z rytmu sekcji, a nie wtapiać – stąd
     grubsza bursztynowa krecha u góry i większy oddech */
  border-top: 3px solid var(--amber);
  padding-block: 44px;
  position: relative;
}
/* delikatna poświata pod przyciskiem: prowadzi wzrok do akcji */
.cta-band .btn-primary { box-shadow: 0 14px 30px -14px rgba(216,155,0,.75); }
@media (prefers-reduced-motion: no-preference) {
  .cta-band .btn-primary { transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s; }
  .cta-band .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -16px rgba(216,155,0,.85); }
}
.cta-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px 34px;
  flex-wrap: wrap;
}
.cta-band-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  letter-spacing: -0.015em;
  color: var(--text);
}
.cta-band-desc { margin-top: 6px; color: var(--muted); max-width: 560px; }
@media (max-width: 700px) {
  .cta-band-inner { justify-content: center; text-align: center; }
}

/* ---------- FAQ: lewa kolumna przyklejona, lista z separatorami ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.55fr);
  gap: 40px 72px;
  align-items: start;
}
.faq-head { position: sticky; top: 110px; }
.faq-more { margin-top: 22px; }
.faq-list { display: grid; }
.faq-item { border-bottom: 1px solid var(--border-2); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 2px;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.35;
  color: var(--text);
  transition: color .18s;
}
.faq-item summary:hover .faq-q { color: var(--amber-deep); }
.faq-item[open] .faq-q { color: var(--amber-deep); }
/* krzyżyk rysowany pseudoelementami – obraca się w "x" przy otwarciu */
.faq-caret {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--amber-soft);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), background .2s;
}
.faq-caret::before,
.faq-caret::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--amber-deep);
  border-radius: 2px;
  translate: -50% -50%;
}
.faq-caret::before { width: 12px; height: 2px; }
.faq-caret::after { width: 2px; height: 12px; }
.faq-item[open] .faq-caret { transform: rotate(135deg); background: var(--amber); }
.faq-item[open] .faq-caret::before,
.faq-item[open] .faq-caret::after { background: var(--navy-950); }
.faq-item > p {
  padding: 0 44px 20px 2px;
  color: var(--muted);
  max-width: 620px;
  animation: faq-open .3s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; gap: 12px; }
  .faq-head { position: static; margin-bottom: 12px; }
}

/* ---------- popup promocyjny (prawy dolny róg, tylko strona główna) ----------
   Trzy stany: ukryty (start), .is-open (karta) i .is-min (zwinięty do
   bąbelka z maskotką – X zwija, nie usuwa; bąbelek otwiera z powrotem). */
.promo-popup {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  pointer-events: none;
}
.promo-popup-card {
  width: min(340px, calc(100vw - 28px));
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  opacity: 0;
  transform: translateY(34px) scale(.96);
  transform-origin: bottom right;
  visibility: hidden;
  /* spokojne wpłynięcie zamiast wyskoku: dłuższy czas, miękka krzywa
     bez odbicia (uwaga właściciela: "wyskakuje niespodziewanie") */
  transition: opacity .9s ease, transform .95s cubic-bezier(.22, .9, .35, 1), visibility .95s;
  pointer-events: none;
}
.promo-popup.is-open .promo-popup-card {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
}
.promo-popup-close {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--muted-2);
  padding: 4px 6px;
}
.promo-popup-close:hover { color: var(--text); }
.promo-popup-head { display: flex; gap: 12px; align-items: flex-start; padding-right: 16px; }
.promo-popup-head img { width: 56px; height: auto; flex: none; animation: mascot-bob 3.2s ease-in-out infinite; }
.promo-popup-head strong { display: block; font-family: var(--font-head); font-size: .98rem; line-height: 1.3; }
.promo-popup-head span { display: block; margin-top: 4px; font-size: .8rem; color: var(--muted); line-height: 1.45; }
@keyframes mascot-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-5px) rotate(2deg); }
}
.promo-popup-form { display: grid; gap: 8px; margin-top: 14px; }
.promo-popup-form input[type="text"],
.promo-popup-form input[type="email"],
.promo-popup-form textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: .86rem;
  background: var(--bg-soft);
}
.promo-popup-form textarea { resize: vertical; min-height: 52px; }
.promo-popup-form .btn { padding: 11px 16px; font-size: .88rem; }
.promo-popup-consent { display: flex; gap: 7px; align-items: flex-start; font-size: .68rem; color: var(--muted-2); line-height: 1.4; }
.promo-popup-consent input { margin-top: 2px; }
.promo-popup-success { margin-top: 12px; font-weight: 600; color: var(--emerald); font-size: .9rem; }

/* zwinięty bąbelek: okrągły przycisk z maskotką */
.promo-popup-bubble {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--amber);
  box-shadow: var(--sh-md);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.55);
  visibility: hidden;
  /* bąbelek na telefonie też pojawia się spokojnie, bez wystrzału */
  transition: opacity .6s ease, transform .65s cubic-bezier(.25, 1.1, .4, 1), visibility .65s, box-shadow .2s;
  pointer-events: none;
}
.promo-popup.is-min .promo-popup-bubble {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
}
.promo-popup-bubble img { width: 34px; height: auto; animation: mascot-bob 3.2s ease-in-out infinite; }
.promo-popup-bubble:hover { box-shadow: var(--sh-lg); transform: scale(1.08); }
.promo-popup-bubble::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--amber);
  animation: pin-pulse 3s ease-out infinite;
}
.promo-popup-mascot { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: none; }
/* podpis "Seller doradza" pod intro w OTWARTEJ karcie – link do Sellero */
.promo-popup-hint {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 9px;
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--amber-deep);
  white-space: nowrap;
  transition: background .2s, color .2s, box-shadow .2s;
}
.promo-popup-hint:hover { background: var(--amber); color: var(--navy-950); box-shadow: var(--sh-sm); }
@media (max-width: 480px) {
  .promo-popup { right: 12px; bottom: 12px; }
  .promo-popup-card { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-popup-card, .promo-popup-bubble { transition: opacity .2s; transform: none; }
  .promo-popup-head img, .promo-popup-bubble img { animation: none; }
  .promo-popup-bubble::after { animation: none; opacity: 0; }
}

/* ---------- poprawki mobile ---------- */
@media (max-width: 700px) {
  /* Ściana "Kanały": 36 pełnych kafli dawało ~6000 px scrolla. Na telefonie
     kafle są kompaktowe, w dwóch kolumnach, bez opisów (opisy są na
     podstronach) – ściana skraca się ~czterokrotnie. */
  .mkt-section .content-grid {
    /* minmax(0,1fr): bez tego kolumna nie może zejść poniżej szerokości
       treści (logo + nazwa) i prawa kolumna wystaje poza ekran */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }
  .mkt-section .mkt {
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    min-width: 0;
  }
  .mkt-section .mkt-name { min-width: 0; font-size: .84rem; }
  .mkt-section .mkt-logo { flex: none; }
  /* Kafel z prawdziwym logiem nie potrzebuje podpisu (logo JEST nazwą,
     "Amaz on" łamane w pół słowa tylko szkodziło); podpis zostaje przy
     tekstowych znacznikach. Starsze przeglądarki bez :has() po prostu
     pokażą podpis – nic się nie psuje. */
  .mkt-section .mkt:has(.mkt-logo) > div { display: none; }
  .mkt-section .mkt:has(.mkt-logo) { justify-content: center; }
  .mkt-section .mkt:has(.mkt-logo) .mkt-logo img { max-height: 24px; max-width: 112px; }
  .mkt-section .mkt-desc { display: none; }
  .mkt-section .mkt-arrow { display: none; }
  .mkt-section .mkt-name { font-size: .86rem; line-height: 1.25; }
  .mkt-section .mkt-logo img { max-height: 20px; max-width: 100px; }
  .mkt-section .mkt-mono {
    width: 40px;
    height: 40px;
    font-size: .62rem;
    border-radius: 12px;
    flex: none;
  }

  /* pasek "Zaufali nam": mniejsze loga, ciaśniej */
  .trust-marquee-item img { max-height: 26px; max-width: 110px; }
  .trust-marquee-item { padding-inline: 18px; }

  /* nadtytuł hero łamał się niezgrabnie przy szerokim trackingu */
  .hero .eyebrow { font-size: .62rem; letter-spacing: .09em; }

  /* tytuły lżejsze na wąskim ekranie */
  .display { font-size: clamp(2.05rem, 8.6vw, 2.6rem); }

  /* karta popupu nie może przekroczyć ekranu (klawiatura, landscape) */
  .promo-popup-card { max-height: min(76vh, 560px); overflow-y: auto; }
}

/* przycisk "Zobacz wszystkie marketplace’y" pod skróconą ścianą */
.mkt-more { margin-top: 26px; text-align: center; }

/* rezultat współpracy w karcie oferty */
.service-outcome {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-2);
  font-size: .88rem;
  color: var(--muted);
}
.service-outcome b { color: var(--amber-deep); font-weight: 700; }

/* zakres rozmowy przy formularzu kontaktowym */
.contact-topics { margin-top: 22px; }
.contact-topics-title {
  display: block;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 8px;
}
.contact-topics ul { list-style: none; display: grid; gap: 5px; }
.contact-topics li {
  position: relative;
  padding-left: 18px;
  font-size: .88rem;
  color: rgba(255,255,255,.82);
}
.contact-topics li::before { content: "→"; position: absolute; left: 0; color: var(--amber); }

/* nagłówek: menu ciaśniejsze na KAŻDYM desktopie – kontener i tak ma
   maksymalnie 1200px, a luźna wersja linków (razem ~1270px z logo i CTA)
   nigdy się w nim nie mieści; z górnym limitem 1420px szeroki ekran
   wypychał język i przycisk poza siatkę strony, ~90px w prawo */
@media (min-width: 1201px) {
  .nav a, .nav .nav-top { padding: 9px 9px; font-size: .88rem; }
  .hdr-inner { gap: 14px; }
}

/* ---------- warstwa "feel": mikrointerakcje ---------- */
/* pasek postępu czytania – cienka bursztynowa linia u góry ekranu */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 200;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--amber), var(--amber-deep));
  transition: width .08s linear;
}

/* poświata przelatująca po głównym CTA przy najechaniu */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80%;
  width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  transition: left .45s ease;
  pointer-events: none;
}
.btn-primary:hover::after { left: 130%; }

/* wyraźny, spójny focus dla klawiatury (nie przeszkadza myszce) */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(216,155,0,.55);
  outline-offset: 2px;
}

/* "Przejdź do treści": niewidoczny do momentu focusa z klawiatury,
   wtedy wjeżdża jako pastylka nad menu */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  border-radius: var(--r-full);
  box-shadow: var(--sh-lg);
  transform: translateY(-200%);
}
/* zwykły :focus, nie :focus-visible – link jest poza ekranem, więc trafia
   w niego wyłącznie klawiatura, a część przeglądarek nie nadaje
   focus-visible przy focusie programowym */
.skip-link:focus { transform: none; }

/* notka o realizacjach anonimowych we wstępie listy */
.cases-note { margin-top: 14px; font-size: .88rem; color: var(--muted-2); max-width: 640px; }

/* ---------- strona 404 ---------- */
.error-shell { text-align: center; padding-block: clamp(24px, 5vw, 64px); }
.error-code {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(4.4rem, 12vw, 7.5rem);
  line-height: 1;
  color: var(--amber);
  letter-spacing: -.03em;
}
.error-shell .display { margin-top: 6px; }
.error-shell .lead { max-width: 560px; margin-inline: auto; }
.error-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.error-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  justify-content: center;
  align-items: baseline;
  margin-top: 38px;
}
.error-links-title { width: 100%; font-family: var(--font-mono); font-weight: 600; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.error-links a {
  padding: 8px 15px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: .86rem;
  color: var(--text);
  transition: border-color .18s, background .18s;
}
.error-links a:hover { border-color: var(--amber); background: var(--amber-soft); }

/* karty problemów i oferty odpowiadają na kursor tak jak kafle Kanałów */
.prob, .service-card {
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .18s;
}
.prob:hover, .service-card:hover {
  transform: translateY(-3px);
  border-color: var(--amber);
  box-shadow: var(--sh-md);
}

/* fokus w formularzu popupu – ta sama reakcja co w głównym formularzu */
.promo-popup-form input:focus, .promo-popup-form textarea:focus {
  border-color: var(--amber-deep);
  box-shadow: 0 0 0 3px rgba(244,180,26,.16);
}

/* powrót na górę: lewy dolny róg (prawy zajmuje popup) */
.back-top {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 85;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border-2);
  box-shadow: var(--sh-md);
  color: var(--muted);
  font-size: 1.05rem;
  opacity: 0;
  transform: translateY(12px);
  visibility: hidden;
  transition: opacity .25s, transform .25s, visibility .25s, border-color .15s, color .15s;
}
.back-top.show { opacity: 1; transform: none; visibility: visible; }
.back-top:hover { border-color: var(--amber); color: var(--amber-deep); }

/* telefon: bez systemowego niebieskiego błysku, za to krótki "docisk" kafla */
* { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .mkt:active { transform: scale(.98); }
  .btn:active { transform: scale(.97); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary::after { display: none; }
  .scroll-progress span { transition: none; }
  .back-top { transition: opacity .2s; transform: none; }
  .prob, .service-card { transition: none; }
}

/* ---------- generic grids & cards ---------- */
.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
/* siatka dla 4 (lub 8) kafelków: jeden pełny rząd na desktopie zamiast
   3+1 z sierotą w drugim rzędzie; niżej równe 2x2 */
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1140px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .grid-4 { grid-template-columns: 1fr; } }

.prob {
  position: relative;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-sm);
  transition: transform .18s, box-shadow .18s;
  overflow: hidden;
}
.prob::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--amber);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .25s;
}
.prob:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.prob:hover::after { transform: scaleY(1); }
.prob h3 { margin-top: 16px; }
.prob p { margin-top: 8px; color: var(--muted); font-size: .94rem; }
.icon-chip {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding-inline: 12px;
  border-radius: 12px;
  background: var(--amber-soft);
  color: var(--amber-deep);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .82rem;
}

.service-card {
  position: relative;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-sm);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.service-card:hover { box-shadow: var(--sh-md); transform: translateY(-3px); border-color: var(--border-2); }
.service-number {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 24px;
  border-radius: 12px;
  background: var(--navy-900);
  color: var(--amber-bright);
  font-family: var(--font-mono);
  font-weight: 700;
}
.service-card .muted { margin-top: 12px; }
.service-card ul { display: grid; gap: 9px; margin-top: 22px; list-style: none; }
.service-card li { position: relative; padding-left: 22px; color: var(--muted); font-size: .9rem; }
.service-card li::before { content: "✓"; position: absolute; left: 0; color: var(--emerald); font-weight: 700; }

.value-card {
  display: flex;
  gap: 22px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}
.value-card > span { font-family: var(--font-mono); color: var(--amber-deep); font-weight: 700; }
.value-card h3 { font-family: var(--font-head); font-size: 1.08rem; }
.value-card p { margin-top: 4px; color: var(--muted); font-size: .9rem; }
.values-list { display: grid; gap: 12px; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }

/* ---------- process ---------- */
.process-track { position: relative; margin-top: 52px; }
.process-glow-wrap {
  position: absolute; top: -8px; left: 0; right: 0; height: 16px;
  overflow: hidden; pointer-events: none;
}
.process-glow {
  position: absolute; top: 6px; left: -90px; width: 90px; height: 4px; border-radius: 4px;
  filter: blur(1px);
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  animation: process-flow 3.4s linear infinite;
}
@keyframes process-flow { 0% { left: -90px; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .process-glow { animation: none; opacity: 0; } }
@media (max-width: 980px) { .process-glow-wrap { display: none; } }
.process-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; list-style: none; }
.process-list li { position: relative; padding: 26px 22px; border-top: 2px solid var(--border-2); }
.process-list li::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 22px;
  width: 12px;
  height: 12px;
  border: 3px solid var(--amber);
  border-radius: 50%;
  background: var(--surface);
}
.process-list > li > span { font-family: var(--font-mono); color: var(--amber-deep); font-size: .78rem; font-weight: 700; }
.process-list h3 { margin-top: 14px; font-size: 1.05rem; }
.process-list p { margin-top: 8px; font-size: .88rem; color: var(--muted); }

/* ---------- marketplaces ---------- */
.mkt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* sciana marketplace: jednolite pudelko na logo – rozne proporcje plikow
   przestaja rozjezdzac kafle */
.mkt-grid .mkt-logo { display: grid; place-items: center; width: 78px; height: 44px; flex: none; }
.mkt-grid .mkt-logo img { max-width: 78px; max-height: 40px; object-fit: contain; }

/* mini-konfigurator w dymku Sellera: trzy czytelne strefy –
   1) wybor branzy (pigulki, aktywna GRANATOWA),
   2) odpowiedz Sellera (zolty boks z chipami – inny kolor niz pigulki,
      zeby strefy sie nie zlewaly),
   3) kontakt (formularz z krotka zapowiedzia po co zostawic dane) */
.promo-popup-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 12px; }
.promo-pill {
  padding: 6px 11px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .74rem;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.promo-pill:hover { border-color: var(--navy-800); color: var(--text); }
.promo-pill.on { background: var(--navy-800); border-color: var(--navy-800); color: #FFFFFF; }
.promo-answer { margin: 0 0 12px; padding: 9px 11px; background: var(--amber-soft); border-radius: var(--r-sm); }
.promo-picks-label { display: block; margin: 0 0 6px; font-size: .68rem; font-weight: 700; letter-spacing: .02em; color: var(--amber-deep); }
.promo-popup-picks { display: flex; flex-wrap: wrap; gap: 5px; }
.promo-chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--amber);
  color: var(--amber-deep);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .72rem;
}
.promo-form-note { margin: 0; font-size: .74rem; color: var(--muted); line-height: 1.4; }

/* Seller jako doradca AI: rozmowa w dymku */
.seller-chat { margin-top: 12px; }
.seller-thread {
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
  margin-bottom: 10px;
  overscroll-behavior: contain;
}
/* flex przy przepelnieniu sciska dzieci – formularz potrafil zostac
   zgnieciony do paska 20px ("formularz sie zacial"); ma scrollowac,
   nie sciskac */
.seller-thread > * { flex-shrink: 0; }
.seller-msg {
  margin: 0;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: .82rem;
  line-height: 1.45;
  max-width: 88%;
  white-space: pre-wrap;
  /* dymki wjezdzaja z wlasnej strony watku – rozmowa "rosnie",
     zamiast skakac o kolejny wiersz */
  transform-origin: bottom left;
}
.seller-msg--me { transform-origin: bottom right; }
.seller-msg--bot { background: var(--bg-soft); border-bottom-left-radius: 4px; align-self: flex-start; }
.seller-msg--me { background: var(--navy-800); color: #FFFFFF; border-bottom-right-radius: 4px; align-self: flex-end; }
/* potwierdzenie zapisu leada – ta sama zielen co sukces formularza */
.seller-msg--sent { background: var(--amber-soft); border: 1px solid var(--amber); color: var(--amber-deep); font-weight: 600; }
/* odnośniki pod odpowiedzią Sellera – prowadzą prosto na podstronę */
.seller-links { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; margin: -2px 0 2px; max-width: 92%; }
.seller-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-full);
  background: var(--surface);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  text-decoration: none;
  transition: background .18s, border-color .18s, transform .18s;
}
.seller-link::after { content: '→'; color: var(--amber-deep); }
.seller-link:hover { background: var(--amber-soft); border-color: var(--amber); transform: translateY(-1px); }
.seller-msg--typing { display: flex; gap: 4px; align-items: center; padding: 11px; }
.seller-msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); animation: sellerDot 1.2s ease-in-out infinite; }
.seller-msg--typing i:nth-child(2) { animation-delay: .18s; }
.seller-msg--typing i:nth-child(3) { animation-delay: .36s; }
@keyframes sellerDot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: no-preference) {
  .seller-msg { animation: sellerMsgIn .5s cubic-bezier(.25,1,.35,1) backwards; }
  .seller-msg--me { animation-name: sellerMsgInMe; }
  /* znikanie: podpowiedzi i formularz nie wycinaja sie w kadrze */
  .seller-fade-out { animation: sellerFadeOut .35s ease forwards; }
  .seller-starters .promo-pill { animation: sellerPillIn .45s ease backwards; animation-delay: calc(var(--i, 0) * .09s); }
  .seller-lead { animation: sellerLeadIn .55s cubic-bezier(.25,1,.35,1) backwards; }
  /* odnośniki wchodzą chwilę po dymku, żeby nie wyskakiwały razem z nim */
  .seller-links { animation: sellerMsgIn .45s cubic-bezier(.25,1,.35,1) .12s backwards; }
  .seller-msg--sent { animation: sellerMsgIn .5s cubic-bezier(.25,1,.35,1) backwards, sellerSentPop .8s ease .45s; }
  /* maskotka kiwa glowa, gdy Seller odpowie */
  .promo-popup-mascot.is-nodding { animation: sellerNod .55s ease; }
  .seller-send:active:not(:disabled) { transform: scale(.92); }
}
@keyframes sellerMsgIn { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes sellerMsgInMe { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes sellerFadeOut { to { opacity: 0; transform: translateY(-4px); max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; } }
@keyframes sellerPillIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes sellerLeadIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes sellerSentPop { 0%, 100% { box-shadow: 0 0 0 0 rgba(244, 180, 26, 0); } 40% { box-shadow: 0 0 0 5px rgba(244, 180, 26, .28); } }
@keyframes sellerNod { 0%, 100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-4px) rotate(-5deg); } 70% { transform: translateY(0) rotate(3deg); } }
.seller-send { transition: background .18s ease, transform .12s ease; }
.seller-starters .promo-pill, .seller-lead { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .seller-msg--typing i { animation: none; opacity: .5; } }
.seller-starters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.seller-starters .promo-pill { font-size: .72rem; padding: 5px 10px; }
.seller-form { display: flex; gap: 6px; }
.seller-form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: .84rem;
  background: var(--bg-soft);
}
.seller-form input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(244, 180, 26, .22); }
.seller-send {
  flex: none;
  width: 38px;
  border-radius: var(--r-sm);
  background: var(--amber);
  color: #071120;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease;
}
.seller-send:hover:not(:disabled) { background: var(--amber-bright); }
.seller-send:disabled, .seller-form input:disabled { opacity: .55; cursor: not-allowed; }
.seller-note { margin: 8px 0 0; font-size: .66rem; color: var(--muted-2); line-height: 1.4; }
/* mini-formularz wpleciony w watek rozmowy */
.seller-lead {
  display: grid;
  gap: 7px;
  padding: 11px;
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  border-radius: 12px;
}
.seller-lead-title { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: .78rem; color: var(--amber-deep); }
.seller-lead input[type="text"], .seller-lead input[type="email"] {
  padding: 8px 10px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: .8rem;
  background: var(--surface);
}
.seller-lead input:focus { outline: none; border-color: var(--amber-deep); }
.seller-lead-consent { display: flex; gap: 7px; align-items: flex-start; font-size: .66rem; color: var(--muted); line-height: 1.4; }
.seller-lead-consent input { margin-top: 2px; }
.seller-lead .btn { padding: 9px 14px; font-size: .82rem; }
.seller-lead button:disabled { opacity: .6; cursor: not-allowed; }


/* sklepowa karta pakietu na glownej: wyglada jak produkt, kupuje sie
   rozmowe – cena uczciwie odsyla do bezplatnej wyceny */
.shop-card {
  display: flex;
  gap: clamp(24px, 4vw, 56px);
  align-items: stretch;
  margin-top: 30px;
  padding: clamp(26px, 3.4vw, 44px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
}
.shop-card-main { flex: 1 1 auto; min-width: 0; }
.shop-badge {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--amber);
  color: #071120;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .1em;
  margin-bottom: 14px;
}
.shop-name { margin-bottom: 14px; }
.shop-includes { list-style: none; padding: 0; margin: 0 0 18px; }
.shop-includes li { position: relative; padding-left: 30px; margin-bottom: 9px; color: var(--muted); }
.shop-includes li::before { content: "✓"; position: absolute; left: 0; color: var(--amber-deep); font-weight: 800; }
.shop-meta { font-size: .84rem; color: var(--muted); border-top: 1px dashed var(--border); padding-top: 14px; }
.shop-card-side {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding-left: clamp(20px, 3vw, 44px);
  border-left: 1px solid var(--border);
}
.shop-price-label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin-bottom: 6px;
}
.shop-price-value { font-family: var(--font-head); font-weight: 700; font-size: 1.06rem; line-height: 1.4; }
.shop-add { display: inline-flex; align-items: center; gap: 12px; justify-content: center; }
.shop-cart { position: relative; display: inline-grid; place-items: center; }
.shop-drop {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3px;
  border-radius: 50%;
  background: #071120;
  opacity: 0;
}
.shop-add:hover .shop-cart svg { animation: shopCartTilt .7s ease; }
.shop-add:hover .shop-drop { animation: shopDrop .7s ease; }
@keyframes shopCartTilt {
  0%, 55% { transform: none; }
  70% { transform: rotate(-8deg) translateY(1px); }
  85% { transform: rotate(5deg); }
  100% { transform: none; }
}
@keyframes shopDrop {
  0% { opacity: 0; transform: translateY(-6px); }
  25% { opacity: 1; }
  55% { opacity: 1; transform: translateY(9px); }
  70%, 100% { opacity: 0; transform: translateY(11px); }
}
@media (prefers-reduced-motion: reduce) {
  .shop-add:hover .shop-cart svg, .shop-add:hover .shop-drop { animation: none; }
}
@media (max-width: 860px) {
  .shop-card { flex-direction: column; }
  .shop-card-side { flex-basis: auto; border-left: 0; border-top: 1px solid var(--border); padding-left: 0; padding-top: 20px; }
}

/* lider dzialu: pierwszy kafel kategorii szerszy, z wiekszym logo
   (wyroznienie strukturalne, bez tekstowych deklaracji) */
.mkt--lead { grid-column: span 2; }
.mkt-grid .mkt--lead .mkt-logo { width: 110px; height: 54px; }
.mkt-grid .mkt--lead .mkt-logo img { max-width: 110px; max-height: 50px; }
@media (max-width: 700px) { .mkt--lead { grid-column: auto; } }
/* wykres struktury katalogu: pozioma miara w jednym kolorze */
.mkt {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.mkt:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.mkt-logo {
  display: grid;
  place-items: center;
  width: 120px;
  height: 48px;
  flex: none;
}
/* wspolny gorset: wysokosc do 28px, szerokosc do 118px – szerokie
   wordmarki ograniczy szerokosc, kwadratowe wysokosc, zadne logo nie
   bedzie ani mikroskopijne, ani przerosniete */
/* BEZ filtra szarości i wygaszania: wytyczne znakowe Amazona (Appendix A,
   pkt 2) zabraniają zmiany koloru znaku, a logo Amazona pojawia się
   właśnie w tej siatce. Te same zasady mają pozostali operatorzy, więc
   cała siatka idzie w oryginalnych barwach. */
.mkt-logo img {
  max-height: 28px; max-width: 118px; width: auto;
}
.mkt-mono {
  display: grid;
  place-items: center;
  width: 52px;
  height: 48px;
  flex: none;
  border-radius: 12px;
  background: var(--navy-900);
  color: var(--amber-bright);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .9rem;
}
.mkt-name { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; }
.mkt-desc { color: var(--muted); font-size: .85rem; margin-top: 2px; }
.mkt-arrow { margin-left: auto; color: var(--muted-2); opacity: 0; transform: translateX(-6px); transition: .2s; }
.mkt:hover .mkt-arrow { opacity: 1; transform: none; color: var(--amber-deep); }

/* ---------- automation ---------- */
.automation-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.automation-card {
  min-height: 170px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-sm);
  transition: transform .18s, box-shadow .18s;
}
.automation-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.automation-dot {
  display: block;
  width: 12px;
  height: 12px;
  margin-bottom: 34px;
  border-radius: 4px;
  background: var(--amber);
  box-shadow: 0 0 0 8px rgba(244,180,26,.12);
}
.automation-card h3 { font-family: var(--font-head); font-size: 1.05rem; color: var(--text); }
.automation-card p { margin-top: 8px; color: var(--muted); font-size: .88rem; }

/* ---------- benefits ---------- */
.benefits-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: start; }
.benefits-layout > .sec-head { position: sticky; top: 130px; }
.benefits-button { margin-top: 30px; }
.benefit { display: flex; align-items: flex-start; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.benefit:first-child { padding-top: 0; }
.benefit .tick {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  background: var(--emerald-soft);
  color: var(--emerald);
  font-weight: 700;
}
.benefit strong { font-family: var(--font-head); font-weight: 600; font-size: 1.04rem; color: var(--text); }
.benefit p { color: var(--muted); font-size: .92rem; margin-top: 3px; }

/* ---------- feeds / cards ---------- */
.feed-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.post-card, .case-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-sm);
  transition: transform .18s, box-shadow .18s;
}
.post-card:hover, .case-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.post-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; padding: 24px; }
.case-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; }
/* proporcja zgodna z generowanymi okladkami (1280x672), zeby tekst
   na grafice nie byl scinany przez object-fit */
/* height: auto jest OBOWIĄZKOWE razem z atrybutami width/height w HTML –
   atrybut wysokości działa jak wpis CSS i bez tego wygrywa z aspect-ratio,
   rozciągając okładkę do pełnej wysokości pliku (2016px zamiast ~210px) */
.card-cover { width: 100%; height: auto; aspect-ratio: 40 / 21; object-fit: cover; }
/* najnowszy wpis: szeroka karta na 2 kolumny z wyzsza okladka */
.post-card--featured, .case-card--featured { grid-column: span 2; }
.post-card--featured .card-cover, .case-card--featured .card-cover { aspect-ratio: 40 / 21; }
.post-card--featured .h3, .case-card--featured .h3 { font-size: 1.45rem; }
/* przeglad jak w sklepie: wyszukiwarka + kategorie nad siatka wpisow */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-bottom: 30px; }
.filter-search { display: flex; gap: 8px; flex: 1 1 300px; max-width: 440px; }
.filter-search input {
  flex: 1;
  min-width: 0;
  padding: 11px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
}
.filter-search input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(244, 180, 26, .22); }
.filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-pill {
  padding: 8px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .87rem;
  color: var(--muted);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.filter-pill:hover { border-color: var(--amber); color: var(--text); }
.filter-pill.on { background: var(--amber); border-color: var(--amber); color: #071120; }
.mkt-section { scroll-margin-top: 90px; }
/* wstep i pasek faktow czytaja sie jak jeden blok otwierajacy strone */
.section:has(+ .page-stats-section) { padding-bottom: 18px; }
/* katalog platform: kolejne dzialy blizej siebie – bez podwojnego
   paddingu sekcji miedzy kategoriami */
.mkt-section:has(+ .mkt-section) { padding-bottom: var(--sec-pad-tight); }
.mkt-section + .mkt-section { padding-top: var(--sec-pad-tight); }
/* ...i zaproszenie (rich_text z article-shell) tuz po katalogu tez blizej */
.mkt-section:has(+ .section .article-shell) { padding-bottom: var(--sec-pad-tight); }
.mkt-section + .section:has(.article-shell) { padding-top: 34px; }
/* klamra ukladu: jedyny kafel w ostatnim rzedzie idzie na cala szerokosc */
.mkt.mkt--stretch { grid-column: 1 / -1; }
/* przycisk pod sekcja rich_text (np. zaproszenie na koncu katalogu) */
.prose-cta { margin-top: 24px; }

/* klamra ukladu: ostatnia karta na calej szerokosci zamiast sieroty */
.post-card--stretch, .case-card--stretch { grid-column: 1 / -1; }
.post-card--stretch .card-cover, .case-card--stretch .card-cover { aspect-ratio: 48 / 17; }
.post-card--stretch .h3, .case-card--stretch .h3 { font-size: 1.45rem; }
@media (max-width: 700px) { .post-card--featured, .case-card--featured, .post-card--stretch, .case-card--stretch { grid-column: auto; } }
.post-visual, .case-visual {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, rgba(244,180,26,.22), transparent 40%),
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px),
    var(--bg-soft);
  background-size: auto, 32px 32px, 32px 32px, auto;
}
.post-visual span, .case-visual span {
  padding: 8px 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--navy-900);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  box-shadow: var(--sh-sm);
}
.content-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.content-meta span:first-child { color: var(--amber-deep); }
.case-tag {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--amber-deep);
}
.empty-state {
  grid-column: 1 / -1;
  padding: 60px;
  border: 1px dashed var(--border-2);
  border-radius: var(--r-lg);
  text-align: center;
  color: var(--muted);
}

/* ---------- contact ---------- */
.contact-box {
  position: relative;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 60px;
  overflow: hidden;
  padding: clamp(34px, 6vw, 64px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 4% 4%, rgba(244,180,26,.18), transparent 38%),
    var(--navy-900);
}
.contact-copy .eyebrow { color: var(--amber-bright); }
.contact-copy .h2 { margin-top: 16px; color: #fff; }
.contact-copy .lead { margin-top: 16px; color: rgba(255,255,255,.68); }
.contact-link { display: block; margin-top: 24px; font-weight: 700; color: var(--amber-bright); }
.contact-link + .contact-link { margin-top: 8px; }
.contact-form-wrap {
  padding: 28px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-lg);
}
.contact-form { display: grid; gap: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label { display: grid; gap: 7px; color: var(--text); font-size: .84rem; font-weight: 700; }
.contact-form input, .contact-form textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--border-2);
  border-radius: 9px;
  outline: none;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-weight: 500;
}
.contact-form input:focus, .contact-form textarea:focus {
  border-color: var(--amber-deep);
  box-shadow: 0 0 0 3px rgba(244,180,26,.16);
}
.contact-form textarea { resize: vertical; }
.checkbox-field {
  display: flex !important;
  align-items: flex-start;
  gap: 10px !important;
  color: var(--muted) !important;
  font-size: .76rem !important;
  font-weight: 500 !important;
}
/* jawna wysokość + flex: none – checkbox jest elementem flexa i bez tego
   kurczył się do 13px (a z samą wysokością robił się prostokątny 13x17);
   cały label i tak pozostaje klikalny */
.checkbox-field input { width: 17px; height: 17px; flex: none; margin-top: 2px; accent-color: var(--amber-deep); }
.form-error { color: #B42318; font-size: .76rem; font-weight: 600; }
.form-success {
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid #A7DFC7;
  border-radius: 9px;
  background: var(--emerald-soft);
  color: #08764B;
  font-weight: 600;
}

/* ---------- page & article heroes ---------- */
.page-hero, .article-hero {
  padding-block: 76px 64px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(48% 60% at 90% 0%, rgba(244,180,26,.13), transparent 70%),
    linear-gradient(var(--bg-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-soft) 1px, transparent 1px),
    var(--bg);
  background-size: auto, 56px 56px, 56px 56px, auto;
}
/* cos w tle zamiast pustki: kropkowa Europa z hero glownej. SVG dziala
   jako maska, a kolor daje zloty gradient – kropki dostaja glebie zamiast
   plaskiej barwy; do tego spokojne wjechanie (fade) przy wejsciu na strone */
.page-hero { position: relative; overflow: hidden; }
.page-hero::before {
  content: "";
  position: absolute;
  right: -150px;
  top: 50%;
  transform: translateY(-50%);
  width: 680px;
  height: 680px;
  z-index: 2;
  /* gradient wiekszy niz maska i stale wedruje – kropki cały czas
     delikatnie mienia sie zlotem (prosba wlasciciela: efekt staly,
     nie jednorazowy fade) */
  /* warstwa 1: waski pas swiatla wedrujacy po kropkach (wyraznie widoczny,
     powtarza sie caly czas); warstwa 2: zloty gradient bazowy */
  background:
    linear-gradient(115deg, transparent 42%, rgba(255, 248, 225, .95) 50%, transparent 58%),
    radial-gradient(circle at 32% 28%, #FFD469 0%, #F4B41A 46%, #D89B00 92%);
  background-size: 340% 100%, 100% 100%;
  background-position: 220% 0, center;
  background-repeat: no-repeat;
  -webkit-mask: url('europe-dots.svg') center / contain no-repeat;
  mask: url('europe-dots.svg') center / contain no-repeat;
  opacity: 0;
  animation:
    pageHeroMapIn .55s ease .05s forwards,
    pageHeroMapShine 7s ease-in-out 1.1s infinite;
  pointer-events: none;
}
@keyframes pageHeroMapIn { to { opacity: .32; } }
@keyframes pageHeroMapShine {
  0% { background-position: 220% 0, center; }
  55%, 100% { background-position: -140% 0, center; }
}
/* zdjecie od wlasciciela = bohater tla; kropkowa mapa wtedy schodzi ze sceny */
.page-hero--photo::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  .page-hero::before { animation: none; opacity: .3; }
}
/* zdjecie w tle hero (pod siatka, gradientem i mapka): kazda podstrona
   z materialem od wlasciciela dostaje wlasny charakter – wtopione miekko,
   mocniejsze po prawej, zeby tytul zostal czytelny */
.page-hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  opacity: .16;
  -webkit-mask-image: linear-gradient(90deg, transparent 2%, rgba(0, 0, 0, .5) 40%, #000 74%);
  mask-image: linear-gradient(90deg, transparent 2%, rgba(0, 0, 0, .5) 40%, #000 74%);
  pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 3; }
@media (max-width: 900px) { .page-hero::before { display: none; } }
.page-hero .display, .article-hero .display { margin-top: 18px; font-size: clamp(2.3rem, 4.6vw, 3.4rem); }
.page-hero .lead, .article-hero .lead { margin-top: 20px; max-width: 720px; }
.article-hero .content-meta { margin: 22px 0 14px; }
.back-link { display: inline-block; margin-bottom: 20px; color: var(--amber-deep); font-weight: 700; }
.back-link:hover { color: var(--navy-900); }
.article-shell { max-width: 820px; }
.article-cover-wrap { margin-top: -34px; position: relative; }
.article-cover { width: 100%; height: auto; max-height: 620px; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--sh-lg); }
.article-body { padding-block: 56px 68px; }
.prose { margin-top: 28px; color: #33405A; font-size: 1.03rem; line-height: 1.85; }
/* sekcja bez naglowka: akapit zaczyna sekcje, wiec gorny margines
   (przewidziany jako odstep od h2) tylko powiekszal dziure */
.article-shell > .prose:first-child { margin-top: 0; }
.prose > * + * { margin-top: 1.2em; }
.prose h2, .prose h3 { margin-top: 1.8em; font-family: var(--font-head); line-height: 1.2; color: var(--text); }
.prose h2 { font-size: 1.8rem; }
.prose h3 { font-size: 1.3rem; }
/* śródtytuł awansowany na h2 dla konspektu (sekcja bez własnego tytułu),
   ale wyglądający dalej jak h3 – patrz rich_text w page.blade */
.prose h2.h3-look { font-size: 1.3rem; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .45em; }
.prose a { color: var(--amber-deep); text-decoration: underline; }
.prose blockquote {
  padding: 20px 24px;
  border-left: 4px solid var(--amber);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--amber-soft);
  font-family: var(--font-head);
  font-size: 1.12rem;
  color: var(--text);
}
.prose .partner-logos { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; margin: 20px 0 4px; }
/* kazde logo na wlasnej bialej plytce z ramka – rozne tla plikow
   (granatowy kafel vs przezroczyste PNG) przestaja sie gryzc */
.prose .partner-logos img {
  height: 76px;
  width: auto;
  padding: 12px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-sizing: border-box;
}
.prose .prose-photo { width: 100%; height: auto; border-radius: var(--r); margin: 22px 0 4px; }

/* Pasek wyróżnień Amazona (Gold Partner + SPN). Oba pliki mają WŁASNE
   ramki – SPN to biała karta z obwódką, Gold ma grubą pomarańczową –
   więc żaden nie dostaje drugiej płytki. Ramką jest cały pasek, a odznaki
   leżą na jego kremowym tle jak na blacie; wyrównujemy je optycznie
   wysokością, bo mają różne proporcje (1,38 vs 1,03). */
.prose .amz-creds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin: 26px 0 6px;
  padding: 22px 24px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
/* odznaka nad podpisem: tekst dostaje pełną szerokość kolumny (w układzie
   obok siebie wychodziły wąskie, poszarpane 5-liniowe akapity) */
.prose .amz-creds figure { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 0; }
.prose .amz-creds img { height: 92px; width: auto; flex: none; }
/* SPN po wyczyszczeniu pliku jest samą białą kartą (zapieczony cień poszedł
   precz razem z szarą obwódką), więc na kremowym tle dostaje włosową ramkę.
   Promień 17px = 40px zaokrąglenia karty przeskalowane do wysokości 92px,
   dzięki czemu ramka biegnie dokładnie po jej krawędzi, a nie obok niej. */
.prose .amz-creds img[src*="amazon-spn"] {
  border: 1px solid var(--border);
  border-radius: 17px;
}
.prose .amz-creds figcaption { font-size: .86rem; line-height: 1.55; color: var(--muted); }
.prose .amz-creds figcaption strong {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-head);
  font-size: .96rem;
  line-height: 1.35;
  color: var(--text);
}
@media (max-width: 860px) {
  .prose .amz-creds { grid-template-columns: 1fr; gap: 24px; padding: 20px; }
  .prose .amz-creds img { height: 84px; }
}

/* ---------- bogatsze sekcje artykułów: tabela, kroki, wyróżnienia, FAQ ---------- */
.prose .tbl-wrap { overflow-x: auto; margin: 26px 0 6px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
/* rozmiar pisma jak w reszcie tekstu – tabela ma być częścią artykułu,
   nie osobnym krojem; tylko interlinia ciaśniejsza, żeby wiersze
   nie rozjeżdżały się na wysokość */
.prose table { width: 100%; min-width: 520px; border-collapse: collapse; line-height: 1.55; }
.prose th, .prose td { padding: 12px 18px; text-align: left; vertical-align: top; }
.prose thead th { background: var(--bg-soft); border-bottom: 1px solid var(--border); font-family: var(--font-head); font-weight: 700; color: var(--text); white-space: nowrap; }
.prose tbody tr + tr th, .prose tbody tr + tr td { border-top: 1px solid var(--border); }
.prose tbody th { font-weight: 600; color: var(--text); }

/* wyróżnienie w treści: wskazówka (bursztyn) i uwaga (granat) */
.prose .callout { margin: 26px 0; padding: 16px 20px; border-left: 3px solid var(--amber); border-radius: 0 var(--r) var(--r) 0; background: var(--amber-soft); }
/* nagłówek wyróżnienia to zwykły pogrubiony wstęp – taki sam jak
   pogrubienia otwierające punkty w artykułach. Wersaliki z rozstrzeleniem
   tworzyły trzeci wariant etykiety obok .eyebrow i odstawały od reszty. */
.prose .callout > strong:first-child { display: block; margin-bottom: 4px; color: var(--amber-deep); }
.prose .callout--uwaga { border-left-color: var(--navy); background: var(--bg-soft); }
.prose .callout--uwaga > strong:first-child { color: var(--navy); }

/* kroki procesu: numery w bursztynowych kołach */
.prose ol.steps { list-style: none; counter-reset: krok; padding-left: 0; margin-top: 22px; }
.prose ol.steps > li { counter-increment: krok; position: relative; padding-left: 52px; min-height: 36px; }
.prose ol.steps > li + li { margin-top: 16px; }
.prose ol.steps > li::before {
  content: counter(krok);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .92rem;
  color: var(--amber-deep);
}
.prose ol.steps strong { color: var(--text); }

/* checklista: haczyki w bursztynowych kołach */
.prose ul.checklist { list-style: none; padding-left: 0; margin-top: 20px; }
.prose ul.checklist > li { position: relative; padding-left: 38px; }
.prose ul.checklist > li + li { margin-top: 10px; }
.prose ul.checklist > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--amber-soft);
  border: 1px solid var(--amber);
}
.prose ul.checklist > li::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--amber-deep);
  border-bottom: 2px solid var(--amber-deep);
  transform: rotate(-45deg);
}

/* słowniczek pojęć: termin + wyjaśnienie */
.prose dl { margin-top: 22px; border-left: 2px solid var(--border-2); padding-left: 20px; }
.prose dt { font-family: var(--font-head); font-weight: 700; color: var(--text); }
.prose dd { margin: 4px 0 0; color: inherit; }
.prose dd + dt { margin-top: 16px; }

/* dwie kolumny porównawcze: "kiedy A / kiedy B" */
.prose .compare-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0 6px; }
.prose .compare-cols > div { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); padding: 18px 20px; }
/* nagłówek kolumny wyróżnia podkreślenie i grubość, nie własny rozmiar
   pisma – 1.02rem było wartością wziętą znikąd i odstawało od tekstu */
.prose .compare-cols > div > strong:first-child { display: block; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--amber); color: var(--text); }
.prose .compare-cols ul { padding-left: 1.2em; margin: 0; }
.prose .compare-cols li + li { margin-top: .4em; }
@media (max-width: 700px) {
  .prose .compare-cols { grid-template-columns: 1fr; }
}

/* FAQ w treści artykułu: natywny akordeon details/summary */
.prose details { border: 1px solid var(--border); border-radius: var(--r); padding: 0 20px; background: var(--surface); }
.prose details + details { margin-top: 10px; }
.prose summary { cursor: pointer; padding: 15px 30px 15px 0; font-family: var(--font-head); font-weight: 600; color: var(--text); list-style: none; position: relative; }
.prose summary::-webkit-details-marker { display: none; }
.prose summary::after { content: '+'; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 1.35rem; font-weight: 400; line-height: 1; color: var(--amber-deep); }
.prose details[open] summary { border-bottom: 1px solid var(--border); }
.prose details[open] summary::after { content: '\2013'; }
.prose details > p { margin: 14px 0 16px; }

/* karta-drogowskaz: klikalna wersja .prob z wyraźnym CTA na dole */
.prob--link { display: flex; flex-direction: column; align-items: flex-start; cursor: pointer; }
.prob--link:hover { border-color: var(--amber); }
.prob-cta {
  margin-top: auto;
  padding-top: 14px;
  font-weight: 700;
  font-size: .88rem;
  color: var(--amber-deep);
}
.prob--link p { margin-bottom: 4px; }

/* ---------- mikrointerakcje (subtelne, wyłączane przez reduced-motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* strzałka w przyciskach i btn-linkach dosuwa się przy najechaniu */
  .btn span[aria-hidden], .btn-link span[aria-hidden], .prob-cta span[aria-hidden] { display: inline-block; transition: transform .22s cubic-bezier(.2,.7,.3,1); }
  .btn:hover span[aria-hidden], .btn:focus-visible span[aria-hidden],
  .btn-link:hover span[aria-hidden], .btn-link:focus-visible span[aria-hidden],
  .prob--link:hover .prob-cta span[aria-hidden],
  .res-card:hover .res-cta span[aria-hidden] { transform: translateX(3px); }
  .res-cta span[aria-hidden] { display: inline-block; transition: transform .22s cubic-bezier(.2,.7,.3,1); }
  /* numerowany chip karty lekko ożywa razem z kartą */
  .icon-chip { transition: transform .22s cubic-bezier(.2,.7,.3,1); }
  .prob:hover .icon-chip { transform: rotate(-3deg) scale(1.06); }
  /* strzałka kafelka "Zobacz też" dosuwa się jak w przyciskach */
  .rel-card .rel-arrow { transition: transform .22s cubic-bezier(.2,.7,.3,1); }
  .rel-card:hover .rel-arrow { transform: translateX(3px); }
}

/* ---------- rytm strony: trzeci wariant sekcji + oddechy ----------
   Strona główna miała tylko dwa tła (białe / kremowe) i po kilku blokach
   zaczynała się zlewać. Ciemny wariant przełamuje ten rytm w jednym,
   wybranym miejscu (technologia) i wyraźnie dzieli stronę na części. */
.section--dark {
  background: var(--navy);
  color: #E8EDF6;
  /* miękkie wejście i wyjście z ciemnego bloku – bez ostrej krechy */
  background-image: radial-gradient(120% 80% at 50% 0%, rgba(244,180,26,.10), transparent 60%);
}
.section--dark .h2, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .lead, .section--dark p { color: #AEBBD0; }
/* ten sam znaczek globusa co w jasnych sekcjach – bursztynowy mark
   jest czytelny na granacie, bez podmiany na kwadrat */
.section--dark .eyebrow { color: var(--amber); }
.section--dark .automation-card {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.12);
  box-shadow: none;
}
.section--dark .automation-card:hover {
  background: rgba(255,255,255,.075);
  border-color: rgba(244,180,26,.45);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.7);
}
.section--dark .automation-card h3 { color: #fff; }
.section--dark .automation-card p { color: #AEBBD0; }
.section--dark .btn-ghost { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
.section--dark .btn-ghost:hover { background: rgba(255,255,255,.08); border-color: var(--amber); color: #fff; }
/* mini-schemat przepływu w ciemnej sekcji – węzły ze szkła jak karty wyżej */
.flow--dark .flow-node {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.12);
  box-shadow: none;
}
.flow--dark .flow-node:hover { background: rgba(255,255,255,.075); border-color: rgba(244,180,26,.45); }
.flow--dark .flow-node strong { color: #fff; }
.flow--dark .flow-node span { color: #AEBBD0; }
.flow--dark .flow-node--accent { background: rgba(244,180,26,.14); border-color: rgba(244,180,26,.5); }
.flow--dark .flow-label--back { color: #8A93A3; }
.automation-cta { margin-top: 30px; text-align: center; }

/* Krecha graniczna TYLKO tam, gdzie sąsiadują dwie sekcje o tym samym tle –
   przy zmianie tła granicę widać i tak, a dodatkowa linia wyglądała jak
   przypadkowy artefakt. */
.section:not(.section--cool):not(.section--dark) + .section:not(.section--cool):not(.section--dark),
.section--cool + .section--cool { border-top: 1px solid var(--border); }

/* ---------- słownik pojęć (sekcja "glossary") ---------- */
.glossary-list { margin-top: 30px; }
.glossary-item .faq-q { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.glossary-short {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.glossary-def { padding: 0 2px 22px; color: var(--muted); line-height: 1.7; font-size: .96rem; }
.glossary-def p { margin: 0 0 10px; }
.glossary-def p:last-child { margin-bottom: 0; }
.glossary-def a { color: var(--amber-deep); text-decoration: underline; text-underline-offset: 2px; }
/* wejście z adresu z kotwicą (#pojecie-...) otwiera i podświetla hasło */
.glossary-item:target { background: var(--amber-soft); border-radius: var(--r); }
.glossary-item:target summary { padding-inline: 12px; }
.glossary-item:target .glossary-def { padding-inline: 12px; }

/* ---------- powiązane materiały (sekcja "resource_links") ---------- */
.res-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.res-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--amber); }
.res-cat {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber-deep);
}
.res-card .h3 { margin: 0; font-size: 1.1rem; line-height: 1.3; }
.res-card p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.6; }
.res-cta { margin-top: auto; padding-top: 12px; font-weight: 700; font-size: .88rem; color: var(--amber-deep); }

/* ---------- oś czasu (sekcja "timeline") ---------- */
.timeline {
  position: relative;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 26px;
}
/* pionowa szyna: rysuje się od góry, gdy sekcja wjedzie w kadr */
.timeline::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--amber), var(--amber-soft));
  border-radius: 2px;
}
.timeline-item { position: relative; display: flex; gap: 22px; align-items: flex-start; }
.timeline-dot {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--amber);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .82rem;
  color: var(--amber-deep);
  box-shadow: var(--sh-sm);
}
.timeline-card {
  flex: 1 1 auto;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.timeline-item:hover .timeline-card { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--border-2); }
.timeline-card .h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; font-size: 1.12rem; }
.timeline-card p { margin: 0; color: var(--muted); line-height: 1.65; font-size: .95rem; }
.timeline-badge {
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: var(--amber-soft);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--amber-deep);
}
.timeline-note, .compare-note, .flow-note { margin-top: 18px; font-size: .88rem; color: var(--muted-2); }
/* notka pod osią bywa treścią z panelu (akapity, odnośniki) – nadpisujemy
   prose'owe rozmiary, żeby została podpisem, nie nowym artykułem */
.timeline-note.prose { margin-top: 22px; font-size: .92rem; }
.timeline-note.prose p { margin: 0 0 8px; font-size: inherit; line-height: 1.6; color: var(--muted); }
.timeline-note.prose a { color: var(--amber-deep); text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .timeline::before { transform: scaleY(0); transform-origin: top; transition: transform 1.1s cubic-bezier(.2,.7,.25,1) .15s; }
  .timeline:has(.reveal.in)::before { transform: scaleY(1); }
  /* kaskada etapów – jak w siatkach kart */
  .timeline > .reveal:nth-child(2) { --reveal-delay: .1s; }
  .timeline > .reveal:nth-child(3) { --reveal-delay: .2s; }
  .timeline > .reveal:nth-child(4) { --reveal-delay: .3s; }
  .timeline > .reveal:nth-child(5) { --reveal-delay: .4s; }
  .timeline > .reveal:nth-child(n+6) { --reveal-delay: .5s; }
}
@media (max-width: 640px) {
  .timeline { gap: 20px; }
  .timeline::before { left: 17px; }
  .timeline-dot { width: 36px; height: 36px; font-size: .72rem; }
  .timeline-card { padding: 16px 18px; }
}

/* ---------- porównanie (sekcja "compare") ----------
   Dwa warianty tych samych danych: tabela z grupami tematycznymi na
   szerokim ekranie i karty per model poniżej 900px (nie zmniejszona
   tabela – osobny układ, czytany z góry na dół). */
.compare-wrap {
  margin-top: 34px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.compare-table { width: 100%; border-collapse: collapse; font-size: .93rem; table-layout: fixed; }
.compare-table th, .compare-table td { padding: 14px 18px; text-align: left; vertical-align: top; line-height: 1.5; }
/* nagłówki kolumn: nazwa modelu + krótki podpis „dla kogo” */
.compare-table thead th {
  background: var(--navy);
  color: #fff;
  border-bottom: 3px solid var(--amber);
  vertical-align: bottom;
}
.compare-table thead th.compare-corner {
  background: var(--navy-900);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 600;
  width: 22%;
}
.compare-col-name { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; }
.compare-col-note { display: block; margin-top: 4px; font-size: .76rem; line-height: 1.4; color: var(--amber); font-weight: 500; }
/* pas grupy tematycznej – wyraźna cezura między blokami kryteriów */
.compare-group-row th {
  background: var(--bg-soft);
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber-deep);
  padding-block: 11px;
}
.compare-table tbody th[scope="row"] {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .88rem;
  color: var(--text);
  background: rgba(246,248,251,.55);
}
.compare-table tbody td { color: #33405A; }
/* pionowe linie między modelami + poziome między kryteriami */
.compare-table tbody td, .compare-table tbody th[scope="row"] { border-top: 1px solid var(--border); }
.compare-table tbody td + td, .compare-table tbody th[scope="row"] + td { border-left: 1px solid var(--border); }
.compare-table thead th + th { border-left: 1px solid rgba(255,255,255,.14); }
.compare-table tbody tr:hover td, .compare-table tbody tr:hover th[scope="row"] { background: var(--amber-soft); }
@media (prefers-reduced-motion: no-preference) {
  .compare-table tbody tr td, .compare-table tbody tr th { transition: background .15s; }
}

/* karty per model – widok telefonu/tabletu */
.compare-cards { display: none; }
.compare-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.compare-card-head { padding: 18px 20px; background: var(--navy); border-bottom: 3px solid var(--amber); }
.compare-card-head .h3 { margin: 0; color: #fff; font-size: 1.08rem; }
.compare-card-note { margin: 5px 0 0; color: var(--amber); font-size: .8rem; line-height: 1.45; }
.compare-card-group {
  margin: 0;
  padding: 10px 20px;
  background: var(--bg-soft);
  border-block: 1px solid var(--border);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber-deep);
}
.compare-card-list { margin: 0; padding: 0; }
.compare-card-row { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 12px 20px; }
.compare-card-row + .compare-card-row { border-top: 1px solid var(--border); }
.compare-card-row dt { font-family: var(--font-head); font-weight: 600; font-size: .8rem; color: var(--muted); }
.compare-card-row dd { margin: 0; font-size: .93rem; line-height: 1.5; color: #33405A; }

@media (max-width: 900px) {
  .compare-wrap { display: none; }
  .compare-cards { display: grid; gap: 18px; margin-top: 30px; }
}

/* ---------- diagram przepływu (sekcja "flow") ---------- */
.flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 38px;
}
.flow-node {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  text-align: center;
  transition: transform .18s, box-shadow .18s;
}
.flow-node:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.flow-node strong { font-family: var(--font-head); font-size: 1.05rem; color: var(--text); }
.flow-node span { font-size: .82rem; color: var(--muted); line-height: 1.5; }
.flow-node--accent { background: var(--navy); border-color: var(--navy-800); }
.flow-node--accent strong { color: #fff; }
.flow-node--accent span { color: var(--muted-2); }
.flow-arrow {
  flex: 0 0 clamp(72px, 9vw, 132px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 6px;
}
.flow-line {
  position: relative;
  width: 100%;
  height: 2px;
  background-image: repeating-linear-gradient(90deg, var(--amber) 0 7px, transparent 7px 13px);
}
.flow-line::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--amber);
  border-right: 2px solid var(--amber);
  transform: translateY(-50%) rotate(45deg);
}
.flow-label {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .62rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--amber-deep);
  text-align: center;
  white-space: nowrap;
}
.flow-label--back { color: var(--muted-2); }
@media (prefers-reduced-motion: no-preference) {
  /* delikatny "przepływ" kreski – ruch o jeden segment, płynna pętla */
  .flow-line { animation: flowDash 1.6s linear infinite; }
  @keyframes flowDash { to { background-position: 13px 0; } }
}
@media (max-width: 860px) {
  .flow { flex-direction: column; margin-top: 30px; }
  .flow-arrow { flex: none; padding: 10px 0; }
  .flow-line { width: 2px; height: 40px; background-image: repeating-linear-gradient(180deg, var(--amber) 0 7px, transparent 7px 13px); }
  .flow-line::after { right: auto; left: 50%; top: auto; bottom: -1px; transform: translateX(-50%) rotate(135deg); }
}
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  .flow-line { animation-name: flowDashV; }
}
@keyframes flowDashV { to { background-position: 0 13px; } }

/* ---------- pasek faktow podstrony + logo w hero ---------- */
.page-hero-row { display: flex; align-items: center; gap: 26px; }
.page-hero-row .display { flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) { .page-hero-row { flex-wrap: wrap; } }
/* kafel dopasowuje szerokosc do grafiki – szerokie flagi i wordmarki
   nie dusza sie w kwadracie, kwadratowe odznaki zostaja kwadratowe */
.page-hero-logo {
  display: grid;
  place-items: center;
  min-width: 128px;
  height: 128px;
  /* stała szerokość płytki: bez niej rozpychało ją dopiero doładowane logo
     (128px → nawet 200px) i tytuł strony przeskakiwał w prawo w trakcie
     ładowania. Chipy z flagami rynków zostają elastyczne – mieszczą 1–3 flagi */
  width: 200px;
  padding: 0 20px;
  flex: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--sh-sm);
}
.page-hero-logo img { max-width: 160px; max-height: 88px; object-fit: contain; }
/* flagi rynków w stylu emoji (Twemoji): kilka flag w jednym chipie */
.page-hero-flags { display: flex; align-items: center; justify-content: center; gap: 10px; width: auto; }
.page-hero-flags img { width: 58px; height: 58px; max-width: none; }
@media (max-width: 640px) {
  .page-hero-logo { min-width: 96px; height: 96px; padding: 0 14px; border-radius: 18px; width: 146px; }
  .page-hero-logo img { max-width: 118px; max-height: 64px; }
  .page-hero-flags { gap: 7px; width: auto; }
  .page-hero-flags img { width: 44px; height: 44px; }
}
.page-stats-section { padding-block: 0 clamp(26px, 3vw, 44px); }
.page-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.page-stat {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.page-stat-value { font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; color: var(--text); }
.page-stat-label { font-size: .84rem; color: var(--muted); line-height: 1.5; }

/* ---------- "Zobacz też" – powiazane podstrony ---------- */
.rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
/* katalogi z wieloma kafelkami: stale 3 kolumny; pierwsza pozycja
   (rynek macierzysty - Polska) wyrozniona pelna szerokoscia, wiec
   pozostale 12 zamyka sie w rownych rzedach bez sierot */
@media (min-width: 701px) {
  .rel-grid--catalog { grid-template-columns: repeat(3, 1fr); }
  /* komplet podzielny przez 3: stale 3 kolumny, wiec rzedy sa pelne
     i zaden kafel nie zostaje sam z pustymi miejscami obok */
  .rel-grid--triples { grid-template-columns: repeat(3, 1fr); }
  .rel-grid--catalog > .rel-card:first-child { grid-column: 1 / -1; padding-block: 24px; }
  .rel-grid--catalog > .rel-card:first-child .rel-title { font-size: 1.12rem; }
}
.rel-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .95rem;
  color: var(--text);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.rel-card:hover { transform: translateY(-3px); border-color: var(--amber); box-shadow: var(--sh-md); }
.rel-arrow { color: var(--amber-deep); font-weight: 700; transition: transform .18s; }
.rel-card:hover .rel-arrow { transform: translateX(3px); }
/* pasek glownych platform rynku: logo + nazwa domeny, klik do podstrony */
/* kafelki platform na podstronach rynkowych.
   Wyrównanie DO LEWEJ i odstęp od nagłówka jak w .content-grid – wcześniej
   dziedziczyły wyśrodkowanie i ciasne 18px po pasku ze strony głównej,
   przez co sekcja odstawała od rytmu reszty podstrony. */
.logo-strip--platforms {
  justify-content: flex-start;
  align-items: stretch;
  gap: 14px;
  margin-top: 46px;
}
.logo-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 16px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(16, 32, 58, 0.05);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.logo-strip-item:hover { transform: translateY(-2px); border-color: var(--amber); box-shadow: var(--sh-md); }
.logo-strip-logo { display: grid; place-items: center; width: 78px; height: 34px; flex: none; }
/* logotypy w oryginalnych barwach: wygaszone na szaro wyglądały jak
   nieaktywne, a wśród nich jest znak Amazona – jego wytyczne (Appendix A,
   pkt 2) zabraniają zmiany koloru znaku */
.logo-strip-item img { max-width: 78px; max-height: 32px; object-fit: contain; filter: none; opacity: 1; }
@media (max-width: 560px) {
  .logo-strip--platforms { margin-top: 32px; }
  .logo-strip-item { width: 100%; }
}

/* grafika na kafelku "Zobacz też" – logo platformy, flagi rynku albo emblemat */
.rel-art { display: flex; align-items: center; gap: 5px; flex: none; }
.rel-art img { max-width: 54px; max-height: 30px; object-fit: contain; }
.rel-art img[src*="/flags/"] { width: 26px; height: 26px; max-width: none; }
.rel-title { flex: 1 1 auto; }

/* ---------- pasek informacyjny o cookies (bez zgód – tylko informacja) ---------- */
/* hidden musi wygrywac z display:flex – inaczej pasek wraca bez obslugi */
.cookie-note[hidden] { display: none !important; }
.cookie-note {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: min(560px, calc(100vw - 36px));
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh-md);
  animation: cookie-note-in .4s ease .8s backwards;
}
.cookie-note p { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--muted); }
.cookie-note a { color: var(--amber-deep); text-decoration: underline; white-space: nowrap; }
.cookie-note .cookie-note-ok { flex: none; padding: 9px 18px; font-size: .84rem; }
/* wariant ze zgodą na analitykę: tekst u góry, przyciski w rzędzie pod nim.
   Dwa równe przyciski obok tekstu ściskały go do pięciu linii – w pionie
   układ jest spokojniejszy i czytelny.
   RODO/ePrivacy: odmowa musi być równie łatwa jak zgoda, więc oba
   przyciski mają IDENTYCZNY wygląd i szerokość – żaden nie jest
   wyróżniony kolorem marki. Wyróżnienie "Akceptuję" bursztynem to wzorzec,
   który regulatorzy (CNIL, UODO, wytyczne EDPB) traktują jako
   utrudnianie odmowy. */
/* wariant ze zgodą: okno na środku ekranu, żeby decyzja zapadła od razu.
   Nadpisuje pozycjonowanie paska (róg ekranu) także w widoku mobilnym. */
.cookie-backdrop {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(7, 17, 32, .45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: cookie-backdrop-in .25s ease both;
}
/* przy otwartym oknie zgody strona pod spodem stoi w miejscu.
   Blokada musi objąć html I body – body ma overflow-x: hidden, więc
   samo html nie wystarcza. scrollbar-gutter zapobiega przeskokowi
   układu w bok po ukryciu paska przewijania. */
html.ma-otwarte-okno,
html.ma-otwarte-okno body { overflow: hidden; }
@supports (scrollbar-gutter: stable) {
  html.ma-otwarte-okno { scrollbar-gutter: stable; }
}
.cookie-note--consent {
  position: fixed;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  z-index: 200;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: 14px;
  width: min(478px, calc(100vw - 32px));
  max-width: none;
  padding: 26px 28px 22px;
  border: none;
  border-top: 3px solid var(--amber);
  border-radius: 18px;
  box-shadow: var(--sh-lg);
  /* z rozwiniętymi kategoriami okno może przerosnąć niski ekran –
     wtedy przewija się wewnątrz, zamiast wychodzić poza viewport */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  animation: cookie-modal-in .5s cubic-bezier(.3, 1.25, .45, 1) both;
}
/* nagłówek okna: ciastko w bursztynowym kole + tytuł pismem nagłówkowym */
.cookie-note-head { display: flex; align-items: center; gap: 12px; }
.cookie-note-head strong { font-family: var(--font-head); font-size: 1.18rem; color: var(--text); }
/* typografia okna zgody: pasek w rogu może być drobny, ale okno na środku
   prosi o decyzję – tekst musi być wygodnie czytelny (intro ~15px,
   opisy kategorii ~14px, przyciski ~15px) */
.cookie-note--consent > p { font-size: .95rem; color: var(--text); }
.cookie-note--consent .cookie-note-actions .cookie-note-ok,
.cookie-note--consent .cookie-zapisz { font-size: .93rem; padding: 11px 18px; }
.cookie-note--consent .cookie-note-foot { font-size: .84rem !important; }
.cookie-note-badge {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  font-size: 1.25rem;
  border-radius: 50%;
  background: var(--amber-soft);
  border: 1px solid var(--amber);
}
@keyframes cookie-backdrop-in { from { opacity: 0; } }
@keyframes cookie-modal-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 30px)) scale(.94); }
}
/* ciastko wpada z lekkim obrotem, treść wchodzi kaskadą po karcie */
.cookie-note-badge { animation: cookie-badge-pop .5s cubic-bezier(.34, 1.56, .64, 1) .14s backwards; }
@keyframes cookie-badge-pop {
  from { opacity: 0; transform: scale(.4) rotate(-16deg); }
}
.cookie-note--consent > p,
.cookie-note--consent .cookie-note-dostosuj,
.cookie-note--consent .cookie-note-actions,
.cookie-note--consent .cookie-note-foot {
  animation: cookie-tresc-up .4s ease backwards;
}
.cookie-note--consent > p { animation-delay: .16s; }
.cookie-note--consent .cookie-note-dostosuj { animation-delay: .2s; }
.cookie-note--consent .cookie-note-actions { animation-delay: .24s; }
.cookie-note--consent .cookie-note-foot { animation-delay: .32s; }
@keyframes cookie-tresc-up {
  from { opacity: 0; transform: translateY(10px); }
}
/* wyjście: karta opada i gaśnie, kurtyna znika */
.cookie-note--consent.is-closing {
  animation: cookie-modal-out .22s ease forwards;
}
.cookie-note--consent.is-closing > p,
.cookie-note--consent.is-closing .cookie-note-dostosuj,
.cookie-note--consent.is-closing .cookie-note-actions,
.cookie-note--consent.is-closing .cookie-note-foot,
.cookie-note--consent.is-closing .cookie-note-badge { animation: none; }
@keyframes cookie-modal-out {
  to { opacity: 0; transform: translate(-50%, calc(-50% + 14px)) scale(.97); }
}
.cookie-backdrop.is-closing { animation: cookie-backdrop-out .25s ease forwards; }
@keyframes cookie-backdrop-out { to { opacity: 0; } }
/* przycisk zamknięcia okna – zamknięcie to brak zgody, nie zgoda */
.cookie-note-close {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 6px;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--muted-2);
  transition: color .15s;
}
.cookie-note-close:hover { color: var(--text); }
/* druga warstwa: "Dostosuj ustawienia" rozwija kategorie cookies.
   Niezbędne mają zablokowaną plakietkę (działają na mocy wyjątku
   ustawowego), statystyki – realny przełącznik + "Zapisz wybór". */
.cookie-note-dostosuj {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: -4px;
  font-size: .89rem;
  font-weight: 600;
  color: var(--muted);
  transition: color .15s;
}
.cookie-note-dostosuj::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s;
}
.cookie-note-dostosuj[aria-expanded="true"]::after { transform: rotate(225deg) translateY(1px); }
.cookie-note-dostosuj:hover { color: var(--text); }
.cookie-kategorie { display: grid; gap: 10px; }
/* własne display wygrywałoby z przeglądarkowym [hidden] – bez tych reguł
   "ukryte" kategorie i przyciski i tak byłyby widoczne */
.cookie-kategorie[hidden],
.cookie-note-actions[hidden] { display: none; }
.cookie-kategoria {
  padding: 12px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.cookie-kategoria-glowa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cookie-kategoria-glowa strong { font-size: .97rem; color: var(--text); }
.cookie-kategoria p { margin-top: 6px; font-size: .87rem !important; color: var(--muted); line-height: 1.55; }
.cookie-zawsze {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber-deep);
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  border-radius: 999px;
  padding: 4px 9px;
  white-space: nowrap;
}
.cookie-przelacznik { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.cookie-przelacznik input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.cookie-przelacznik > span {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--border);
  transition: background .2s;
}
.cookie-przelacznik > span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 32, 58, .35);
  transition: transform .2s;
}
.cookie-przelacznik input:checked + span { background: var(--navy); }
.cookie-przelacznik input:checked + span::after { transform: translateX(18px); }
.cookie-przelacznik input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }
/* jedyna akcja widoku szczegółowego – wykonuje dokładnie to, co pokazuje
   przełącznik, więc pełne wypełnienie nie faworyzuje zgody */
.cookie-zapisz {
  justify-content: center;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
  box-shadow: none;
  margin-top: 2px;
}
.cookie-zapisz:hover { background: var(--navy-800); border-color: var(--navy-800); }
@media (prefers-reduced-motion: reduce) {
  .cookie-backdrop, .cookie-note--consent,
  .cookie-note-badge,
  .cookie-note--consent > p,
  .cookie-note--consent .cookie-note-dostosuj,
  .cookie-note--consent .cookie-note-actions,
  .cookie-note--consent .cookie-note-foot { animation: none; }
}
.cookie-note-foot { font-size: .78rem !important; }
/* Nakierowanie w granicach przepisów: "Akceptuję" jest wypełnione,
   ale oba przyciski mają IDENTYCZNY rozmiar, krój i czytelność, stoją
   w tej samej warstwie i każdy działa jednym kliknięciem. Raport
   Cookie Banner Taskforce (EDPB) kwestionuje dopiero odmowę
   "praktycznie niewidoczną" - równorzędna, czytelna ma być i jest. */
.cookie-note-actions { display: flex; gap: 8px; }
.cookie-note-actions .cookie-note-ok {
  flex: 1;
  justify-content: center;
  border: 1px solid var(--navy);
  box-shadow: none;
}
.cookie-note-actions [data-zgoda="tak"] {
  background: var(--navy);
  color: #fff;
}
.cookie-note-actions [data-zgoda="tak"]:hover { background: var(--navy-800); border-color: var(--navy-800); }
.cookie-note-actions [data-zgoda="nie"] {
  background: transparent;
  color: var(--navy);
}
.cookie-note-actions [data-zgoda="nie"]:hover { background: var(--navy); color: #fff; }
@keyframes cookie-note-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .cookie-note { animation: none; } }
@media (max-width: 560px) {
  .cookie-note { flex-direction: column; align-items: stretch; text-align: center; left: 12px; right: 12px; bottom: 12px; max-width: none; }
  /* okno zgody zostaje wyśrodkowane także na wąskich ekranach – reguła
     wyżej przesuwa zwykły pasek do dołu i musi zostać cofnięta */
  .cookie-note--consent {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    text-align: left;
    width: calc(100vw - 32px);
  }
}
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }

/* ---------- case study details ---------- */
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; margin-top: 44px; }
.metric-card {
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}
.metric-num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1.05;
}
.metric-lbl { color: var(--muted); margin-top: 8px; font-weight: 500; font-size: .92rem; }
.case-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding-block: clamp(40px, 5vw, 56px); }
/* min-width: 0 – tabele w panelach mają przewijać się we własnej ramce,
   a nie rozpychać kolumn gridu poza viewport (grid blowout) */
.case-detail-grid > * { min-width: 0; }
.case-detail-grid .prose { margin-top: 14px; }
.case-results { grid-column: 1 / -1; }
/* panele Wyzwanie / Rozwiazanie / Rezultaty: karty zamiast golego tekstu */
.case-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(26px, 3vw, 40px);
}
.case-panel--results {
  background: linear-gradient(120deg, var(--amber-soft), #fff 65%);
  border-color: rgba(244, 180, 26, .45);
}
/* listy w panelach: zloty znacznik zamiast kropki */
.case-panel .prose ul { list-style: none; padding-left: 0; }
.case-panel .prose ul li { position: relative; padding-left: 30px; margin-bottom: 12px; }
.case-panel .prose ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--amber-deep);
  font-weight: 800;
}
/* stopka marki w panelu rezultatow (np. zarejestrowany znak towarowy) */
.case-brand-footnote {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(244, 180, 26, .35);
  color: var(--muted);
  font-size: .93rem;
}
.case-brand-plate {
  display: grid;
  place-items: center;
  flex: none;
  height: 64px;
  padding: 0 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.case-brand-plate img { max-width: 120px; max-height: 44px; object-fit: contain; }

/* wizytowka projektu pod okladka */
.case-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}
.case-fact {
  flex: 1 1 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px 20px;
}
.case-fact--wide { flex: 2 1 320px; }
.case-fact-label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin-bottom: 6px;
}
.case-fact-value { font-family: var(--font-head); font-weight: 700; }
.case-fact-tags { display: flex; flex-wrap: wrap; gap: 6px; }
/* logo klienta w hero case'a: biala plytka obok tytulu */
.case-head { display: flex; align-items: center; gap: 26px; }
.case-head .display { margin-top: 10px; }
.case-client-logo {
  display: grid;
  place-items: center;
  flex: none;
  min-width: 128px;
  height: 108px;
  /* stała szerokość jak w .page-hero-logo: bez niej płytkę rozpychało
     dopiero doładowane logo i tytuł case'u przeskakiwał w prawo */
  width: 194px;
  padding: 0 22px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--sh-sm, 0 1px 2px rgba(16, 32, 58, .06));
}
.case-client-logo img { max-width: 150px; max-height: 72px; object-fit: contain; }
@media (max-width: 700px) {
  .case-head { flex-wrap: wrap; }
  .case-client-logo { min-width: 104px; height: 88px; }
  .case-client-logo img { max-width: 118px; max-height: 58px; }
}

/* dark CTA box (single dark accent on light pages) */
.simple-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: clamp(34px, 5vw, 56px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 6% 10%, rgba(244,180,26,.18), transparent 40%),
    var(--navy-900);
  color: #fff;
}
.simple-cta .eyebrow { color: var(--amber-bright); }
.simple-cta .h2 { max-width: 720px; margin-top: 14px; color: #fff; }

/* ---------- pagination ---------- */
.pagination-wrap { margin-top: 50px; }
.pagination { display: flex; justify-content: center; gap: 7px; list-style: none; }
.pagination a, .pagination span {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding-inline: 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  font-weight: 600;
}
.pagination a:hover { border-color: var(--navy-900); }
.pagination .active span { border-color: var(--navy-900); background: var(--navy-900); color: #fff; }
.pagination .disabled span { opacity: .45; }

/* ---------- footer (light) ---------- */
.footer { border-top: 1px solid var(--border); background: var(--bg-soft); color: var(--muted); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 2fr; gap: 64px; padding-block: 64px 48px; }
.footer-cols { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; }
/* minimalistyczne kreseczki miedzy kolumnami stopki (jak w pasku hero) */
.footer-cols > div { border-left: 1px solid var(--border); padding-left: 28px; }
.footer-contact { display: flex; flex-direction: column; gap: 7px; margin-top: 20px; align-items: flex-start; }
.footer-contact a { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: .95rem; font-weight: 600; }
.footer-contact a svg { flex: none; opacity: .65; }
.footer-contact a:hover { color: var(--amber-deep); }
/* dane rejestrowe w bloku firmowym, oddzielone linią (jak wizytówka) */
.footer-addr {
  font-style: normal;
  font-size: .82rem;
  color: var(--muted-2);
  line-height: 1.7;
  max-width: 340px;
}
.footer-cta { margin-top: 22px; }
/* dane rejestrowe i odznaki na jednym poziomie – prawa strona stopki
   nie zostaje pusta */
.footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 32px;
  padding-block: 22px;
  border-top: 1px solid var(--border);
}
.footer-addr strong { color: var(--muted); font-weight: 700; letter-spacing: .03em; }
/* tytuly kolumn stopki to zwykle <p class="footer-heading"> – naglowki h4
   robily w konspekcie kazdej strony przeskok h2 -> h4 (SEO/czytniki) */
.footer .footer-heading { color: var(--text); font-family: var(--font-head); font-size: .95rem; margin: 0 0 16px; font-weight: 600; }
.footer-links { display: flex; flex-direction: column; gap: 11px; }
.footer-links a { color: var(--muted); font-size: .92rem; transition: color .15s; }
.footer-links a:hover { color: var(--amber-deep); }
.footer-links span { font-size: .92rem; }
.footer-copy { max-width: 340px; margin-top: 18px; font-size: .93rem; line-height: 1.7; }
.footer .soc { display: flex; gap: 10px; }
.footer .soc a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--muted);
  transition: .2s;
}
.footer .soc a:hover { color: var(--amber-deep); border-color: var(--amber); }
/* pasek odznak partnerskich w stopce (forma tekstowa do czasu
   otrzymania oficjalnych plików graficznych) */
.footer-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.footer-badges a { display: inline-flex; transition: transform .18s; }
.footer-badges a:hover { transform: translateY(-2px); }
.footer-badges img {
  height: 116px;
  width: auto;
  /* odznaka ma wlasna oprawe i przezroczyste rogi – bez zaokraglania */
  border-radius: 0;
}
.footer-badge {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  padding: 9px 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.footer-badge b { font-family: var(--font-head); font-size: .82rem; font-weight: 700; color: var(--text); }
.footer-badge span { font-size: .68rem; color: var(--muted-2); letter-spacing: .02em; }
.footer-badge.is-platinum { border-color: var(--amber); background: var(--amber-soft); }
.footer-badge.is-platinum b { color: var(--navy-950); }
.footer-badge.is-platinum span { color: var(--amber-deep); font-weight: 600; }

/* podsumowanie strony w asystentach AI */
.footer-ai { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.footer-ai-label {
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.footer-ai-row { display: flex; gap: 4px 14px; flex-wrap: wrap; }
.footer-ai-row a { font-size: .82rem; font-weight: 600; color: var(--muted); }
.footer-ai-row a:hover { color: var(--amber-deep); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  flex-wrap: wrap;
  padding-block: 18px;
  border-top: 1px solid var(--border);
}
.footer-bottom a:hover { color: var(--amber-deep); }
.footer-legal {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-block: 16px 30px;
  border-top: 1px solid var(--border);
  font-size: .82rem;
}
.footer-trademarks { font-size: .75rem; color: var(--muted-2); line-height: 1.5; }

/* ---------- reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px) scale(.985);
  transition: opacity .7s cubic-bezier(.2,.7,.25,1), transform .7s cubic-bezier(.2,.7,.25,1);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.in { opacity: 1; transform: none; }

/* Kaskadowe wejścia: karty w siatkach i pozycje FAQ pojawiają się kolejno
   (opóźnienie rośnie z pozycją), a hero ma własną, szybką sekwencję.
   Czysty CSS – IntersectionObserver tylko dokleja klasę .in. */
.content-grid > .reveal:nth-child(2),
.faq-list > .reveal:nth-child(2) { --reveal-delay: .08s; }
.content-grid > .reveal:nth-child(3),
.faq-list > .reveal:nth-child(3) { --reveal-delay: .16s; }
.content-grid > .reveal:nth-child(4),
.faq-list > .reveal:nth-child(4) { --reveal-delay: .24s; }
.content-grid > .reveal:nth-child(5),
.faq-list > .reveal:nth-child(5) { --reveal-delay: .32s; }
.content-grid > .reveal:nth-child(6),
.faq-list > .reveal:nth-child(6) { --reveal-delay: .4s; }
.content-grid > .reveal:nth-child(n+7),
.faq-list > .reveal:nth-child(n+7) { --reveal-delay: .48s; }

.hero .eyebrow.reveal { --reveal-delay: 0s; }
.hero .hero-title.reveal { --reveal-delay: .06s; }
.hero .hero-lead.reveal { --reveal-delay: .14s; }
.hero .hero-cta.reveal { --reveal-delay: .22s; }
.hero .hero-stats.reveal { --reveal-delay: .3s; }
.hero .euromap-wrap.reveal { --reveal-delay: .2s; }

/* Kropki na mapie wskakują kolejno, dopiero gdy mapa jest widoczna —
   dzięki temu mapa "ożywa" zamiast stać gotowa od pierwszej klatki. */
.euromap-wrap.reveal .euromap-pin { opacity: 0; }
.euromap-wrap.reveal.in .euromap-pin {
  animation: pin-pop .45s cubic-bezier(.2,.9,.3,1.4) both;
  animation-delay: calc(.5s + var(--pin-i, 0) * 55ms);
}
@keyframes pin-pop {
  from { opacity: 0; transform: scale(.3); }
  to   { opacity: 1; transform: none; }
}

/* FAQ: odpowiedź wsuwa się zamiast skakać */
.faq-item > p { animation: faq-open .28s cubic-bezier(.2,.7,.3,1) both; }
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .euromap-wrap.reveal .euromap-pin { opacity: 1; animation: none !important; }
  .faq-item > p { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* niskie ekrany (laptopy 768px): hero musi zmieścić się z zapasem */
@media (max-height: 790px) and (min-width: 981px) {
  .hero { padding-block: 20px 18px; }
  .hero-lead { font-size: .95rem; }
  .hero-stats div { padding: 8px 13px; gap: 10px; }
  .hero-stats strong { font-size: 1.2rem; }
  .euromap { width: min(440px, 100%); }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 700px) {
  .euromap-caption { font-size: .58rem; letter-spacing: .1em; }
}
/* poniżej 1201px pełna belka (większe logo + 6 pozycji menu + język + CTA) potrzebuje
   ~1166px ("Współpraca" jest dłuższa niż dawne "Usługi") i się nie
   mieści; to głównie tablety w poziomie, gdzie dotykowe menu działa
   lepiej niż hover – dlatego przechodzimy na burgera, ale język i CTA
   zostają widoczne */
@media (max-width: 1200px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
}
@media (max-width: 980px) {
  .hdr-cta .btn-primary { display: none; }
  .hdr-cta .lang-item { display: none; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .mkt-grid { grid-template-columns: 1fr 1fr; }
  .automation-grid { grid-template-columns: 1fr 1fr; }
  .process-list { grid-template-columns: 1fr 1fr; gap: 14px; }
  .process-list li { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
  .process-list li::before { display: none; }
  .benefits-layout, .contact-box, .about-grid { grid-template-columns: 1fr; }
  .benefits-layout { gap: 40px; }
  .benefits-layout > .sec-head { position: static; }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  /* mobile: mniej sciany – sekcje ciasniej, karty w poziome karuzele */
  .section { padding-block: 44px; }
  .mkt-grid { grid-template-columns: 1fr; }
  .grid-3.content-grid, .grid-4.content-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .grid-3.content-grid::-webkit-scrollbar, .grid-4.content-grid::-webkit-scrollbar { display: none; }
  .grid-3.content-grid > *, .grid-4.content-grid > * { scroll-snap-align: start; }
  .grid-3:not(.content-grid) { grid-template-columns: 1fr; }
  .hero-stats { gap: 8px; }
  .feed-heading, .simple-cta { align-items: flex-start; flex-direction: column; }
  .form-grid, .case-detail-grid { grid-template-columns: 1fr; }
  .case-detail-grid { gap: 16px; padding-block: 36px; }
  .case-results { grid-column: auto; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; padding-block: 48px 36px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-cols > div { border-left: 0; padding-left: 0; }
}
@media (max-width: 520px) {
  .process-list, .automation-grid, .metrics-grid, .footer-cols { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: 20px; }
  .logo img { height: 34px; }
}


/* okruszki na podstronach */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted-2); margin-bottom: 14px; }
.crumbs a { color: var(--muted); font-weight: 600; }
.crumbs a:hover { color: var(--amber-deep); }
.crumbs [aria-current] { color: var(--muted-2); }

/* ---------- strona konsultacji (/konsultacja) ---------- */
.cons-hero {
  position: relative;
  padding-block: 72px 84px;
  background:
    radial-gradient(900px 420px at 82% -10%, var(--amber-soft), transparent 65%),
    linear-gradient(180deg, var(--bg-soft), var(--surface));
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.cons-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; }
.cons-copy .h1 { margin-top: 14px; }
.cons-copy .lead { margin-top: 18px; max-width: 34em; }
.cons-points { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
.cons-points li {
  position: relative;
  padding: 14px 18px 14px 56px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  font-size: .93rem;
  color: var(--muted);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.cons-points li:hover { transform: translateX(3px); box-shadow: var(--sh-md); border-color: var(--amber); }
.cons-points b { display: block; color: var(--text); font-family: var(--font-head); font-size: .98rem; margin-bottom: 2px; }
.cons-num {
  position: absolute;
  left: 16px;
  top: 15px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--amber-soft);
  color: var(--amber-deep);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
}
.cons-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 28px; font-size: .88rem; color: var(--muted-2); }
.cons-facts b { font-family: var(--font-head); font-size: 1.35rem; color: var(--text); margin-right: 6px; }

.cons-form-wrap {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-lg);
  position: sticky;
  top: 96px;
}
.cons-form-title { font-family: var(--font-head); font-size: 1.12rem; font-weight: 700; margin-bottom: 16px; }
.cons-form-note { margin-top: 12px; font-size: .82rem; color: var(--muted-2); }
.cons-form-note a { color: var(--amber-deep); font-weight: 700; }
.cons-cta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 20px; margin-top: 40px; }
.cons-cta span { font-size: .88rem; color: var(--muted-2); }

@media (max-width: 980px) {
  .cons-grid { grid-template-columns: 1fr; gap: 36px; }
  .cons-form-wrap { position: static; }
}
@media (max-width: 520px) {
  .cons-hero { padding-block: 48px 56px; }
  .cons-form-wrap { padding: 20px; }
}

/* pulapka antyspamowa: pole wizualnie poza ekranem (celowo nie display:none
   – czesc botow pomija pola niewyswietlane) */
.hp-wrap { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; }