/* KONCEPT_8 — spójny system wizualny i nawigacyjny Atlantis Ingredients. */

:root {
  --c8-navy: #17156d;
  --c8-cyan: #00aed9;
  --c8-ink: #101642;
  --c8-line: #dce3f0;
  --c8-soft: #f4f7fb;
  --c8-shadow: 0 18px 46px rgba(20, 27, 76, .14);
}

/*
   Jeden kontrakt wymiarów dla nagłówka na wszystkich podstronach.
   Starsze pliki stron zawierają własne reguły menu; dlatego wymiary
   wspólnej powłoki są ustalane tutaj, w ostatnim arkuszu serwisu.
*/
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Typografia nagłówka nie może dziedziczyć kroju z treści danej strony. */
body > .topbar,
body > header.nav {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif !important;
  font-style: normal;
  font-synthesis: none;
}

body > header.nav nav.main > a,
body > header.nav nav.main > .hasmega > a,
body > header.nav nav.main > .hasdrop > a {
  font-family: inherit !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
}

body > header.nav .nav-cta,
body > header.nav .nav-cta input,
body > header.nav .nav-cta button,
body > header.nav .nav-cta a {
  font-family: inherit !important;
}

@media (min-width: 821px) {
  body > .topbar,
  body > .topbar > .wrap {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }

  body > header.nav,
  body > header.nav > .wrap,
  body > header.nav nav.main,
  body > header.nav .nav-cta {
    height: 85px !important;
    min-height: 85px !important;
    max-height: 85px !important;
  }

  body > header.nav > .wrap {
    box-sizing: border-box !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body > header.nav .nav-cta,
  body > header.nav .nav-cta > * {
    flex-shrink: 0;
  }
}

/* Nie interpolujemy rozmiaru menu pomiędzy dokumentami. */
@view-transition { navigation: none; }

/* Kontakt jest osobnym, wyraźnym działaniem obok wyszukiwarki. */
.nav-cta {
  gap: 10px !important;
}
.nav-cta .as { order: 1; }
.nav-cta .contact-cta {
  order: 2;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 17px;
  border-radius: 13px;
  background: linear-gradient(135deg, #dff7fc, #bdeef8);
  border: 1px solid rgba(0, 174, 217, .32);
  color: var(--c8-navy);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0, 174, 217, .12);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.nav-cta .contact-cta::after { content: "→"; color: #0088ad; font-size: 17px; }
.nav-cta .contact-cta:hover,
.nav-cta .contact-cta:focus-visible {
  background: linear-gradient(135deg, #c9f2fb, #a7e7f5);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0, 174, 217, .2);
}
.nav-cta .cartbtn { order: 3; }
.nav-cta .burger { order: 4; }
/* fix18a / uwaga 3.1: "Pomoc w doborze" NIE MA juz stalego wyroznienia.
   Byly tu `nav.main > a.c8-help-link{color:#087eaa}` i badge `::before{content:"?"}`
   — link wygladal na aktywna podstrone niezaleznie od tego, gdzie user jest.
   fix12 zerowal to nadpisaniem na koncu pliku; fix18a usuwa zrodlo, wiec
   "Pomoc w doborze" dziedziczy kolor z `nav.main a` jak kazda inna pozycja.
   Wyroznienie aktywnej pozycji robi .is-current (site-fixes.js + fluid.css).
   Klasa .c8-help-link zostaje w markupie — uzywa jej drawer mobilny. */

/* Duże logo osadzone czysto w jednej wysokości menu. */
@media (min-width: 981px) {
  .topbar,
  .topbar > .wrap {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }

  .topbar { overflow: hidden; }

  header.nav {
    top: 34px !important;
    height: 85px !important;
    min-height: 85px !important;
    max-height: 85px !important;
    overflow: visible;
  }

  header.nav > .wrap,
  header.nav nav.main,
  header.nav .nav-cta {
    height: 85px !important;
    min-height: 85px !important;
    max-height: 85px !important;
  }

  header.nav > .wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  header.nav nav.main {
    margin-left: 0 !important;
    gap: clamp(22px, 2vw, 40px) !important;
  }

  header.nav nav.main > a,
  header.nav nav.main > .hasmega > a,
  header.nav nav.main > .hasdrop > a {
    font-size: 18.5px !important;
    line-height: 1.2 !important;
  }

  header.nav .nav-cta { align-items: center; }
}

@media (min-width: 1181px) {
  /* Logo i jego dolna plakietka tworzą jedną warstwę nad menu kontekstowym. */
  header.nav {
    z-index: 52;
  }

  header.nav .wrap > a:first-child {
    position: relative;
    z-index: 205;
    isolation: isolate;
    align-self: stretch;
    flex: 0 0 clamp(244px, 14vw, 272px);
    width: clamp(244px, 14vw, 272px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px 0 0;
    background: transparent;
    overflow: visible;
  }

  header.nav .wrap > a:first-child::before {
    content: "";
    position: absolute;
    inset: 0 -7px -26px;
    z-index: 1;
    pointer-events: none;
    background: #fff;
    clip-path: polygon(0 0, 100% 0, 100% 72%, 90% 100%, 10% 100%, 0 72%);
    filter: drop-shadow(0 9px 11px rgba(18, 23, 70, .11));
  }

  header.nav .wrap > a:first-child::after {
    content: "TurEssence\00AE";
    position: absolute;
    left: -28px;
    right: -28px;
    bottom: -52px;
    height: 52px;
    z-index: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 84px 7px;
    pointer-events: none;
    /* Na stronach rodzin korzysta z ich palety; poza nimi pozostaje granat Atlantis. */
    background: linear-gradient(
      135deg,
      var(--category-navy, #0d0c47) 0%,
      var(--category-deep, var(--c8-navy)) 100%
    );
    color: #fff;
    /* 44 px przy 52 px wysokości daje ten sam kąt co białe skosy nad nim. */
    clip-path: polygon(0 0, 100% 0, calc(100% - 44px) 100%, 44px 100%);
    filter: drop-shadow(0 10px 13px rgba(13, 12, 71, .22));
    font-size: 13.5px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: .055em;
    text-transform: none;
  }

  header.nav .wrap > a:first-child .logo {
    position: relative;
    z-index: 2;
    width: auto;
    height: clamp(66px, 4vw, 72px);
    transform: translateY(14px);
    filter: drop-shadow(0 7px 9px rgba(19, 23, 74, .08));
    transition: transform .18s ease, opacity .18s ease;
  }

  header.nav .wrap > a:first-child:hover .logo,
  header.nav .wrap > a:first-child:focus-visible .logo {
    transform: translateY(12px) scale(1.012);
    opacity: .94;
  }

  /* Pasek sekcji zaczyna się za znakiem i optycznie wpina w granatowy trapez. */
  body.category-page .category-jump .wrap,
  body.application-page .application-jump .wrap {
    max-width: none !important;
    min-height: 64px;
    padding-left: calc(clamp(24px, 3vw, 52px) + clamp(244px, 14vw, 272px) + 110px) !important;
    padding-right: clamp(24px, 3vw, 52px) !important;
  }

  body.category-page .category-jump strong,
  body.application-page .application-jump strong {
    position: relative;
    padding-left: 13px;
  }

  body.category-page .category-jump strong::before,
  body.application-page .application-jump strong::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 20px;
    border-radius: 999px;
    background: var(--category-accent, var(--application-accent, var(--c8-cyan)));
    transform: translateY(-50%);
  }
}

/* Pośrednia szerokość pulpitu: cały zestaw mieści się przy powiększeniu 100%,
   a koszyk zachowuje bezpieczny prawy margines. */
@media (min-width: 1501px) and (max-width: 2140px) {
  header.nav .wrap > a:first-child {
    flex-basis: 250px;
    width: 250px;
    padding-right: 14px;
  }

  header.nav nav.main {
    gap: clamp(24px, 1.4vw, 30px) !important;
  }

  header.nav nav.main > a,
  header.nav nav.main > .hasmega > a,
  header.nav nav.main > .hasdrop > a {
    font-size: 18px !important;
  }

  header.nav .nav-cta .as-input {
    width: 150px;
  }
}

@media (min-width: 1181px) and (max-width: 1500px) {
  header.nav .wrap > a:first-child {
    flex-basis: 230px;
    width: 230px;
    padding-left: 0;
    padding-right: 14px;
  }

  header.nav .wrap > a:first-child .logo { height: 65px; width: auto; }
  header.nav nav.main { gap: 22px !important; }
  header.nav nav.main > a,
  header.nav nav.main > .hasmega > a,
  header.nav nav.main > .hasdrop > a { font-size: 17px !important; }
}

@media (min-width: 981px) and (max-width: 1180px) {
  header.nav .logo { height: 49px; width: auto; }
}

@media (max-width: 980px) {
  header.nav .logo { height: 42px; width: auto; }
}

/* Mega menu ma zawsze pierwszeństwo przed paskiem linii/zastosowania. */
@media (min-width: 981px) {
  .topbar { z-index: 201 !important; }
  header.nav { z-index: 200 !important; }
  header.nav nav.main { align-self: stretch; }
  header.nav nav.main > .hasmega {
    display: flex;
    align-items: center;
    align-self: stretch;
  }
  header.nav nav.main > .hasmega > a {
    display: flex;
    align-items: center;
    min-height: 100%;
  }
  header.nav nav.main .mega {
    z-index: 220 !important;
    max-height: calc(100vh - 126px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Home hero: pełne zdjęcie, czytelna karta i kierunkowe przejście slajdów. */
body:has(.hero-split) .hero-split {
  position: relative;
  min-height: max(590px, calc(100svh - 138px));
  overflow: hidden;
  isolation: isolate;
  background: #11194b;
  border-bottom: 0 !important;
}
@media (min-width: 901px) {
  body:has(.hero-split) .hero-split {
    height: calc(100vh - 119px);
    height: calc(100dvh - 119px);
    min-height: 640px;
  }

  body:has(.hero-split) .hero-split .hs-grid,
  body:has(.hero-split) .hero-split .photo,
  body:has(.hero-split) .hero-split .hero-slides,
  body:has(.hero-split) .hero-split .panel {
    height: 100% !important;
    min-height: 100% !important;
  }

  body:has(.hero-split) .hero-split .hero-slides,
  body:has(.hero-split) .hero-split .hero-slide {
    position: absolute;
    inset: 0;
  }

  body:has(.hero-split) .hero-split .panel-inner {
    /* min-height zamiast height: przy dluzszych tlumaczeniach (DE) karta hero
       ROSNIE zamiast wypuszczac tekst poza swoje tlo. Gdy tresc miesci sie w
       550-600px wyglad jest identyczny jak wczesniej. */
    min-height: clamp(550px, calc(100dvh - 210px), 600px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
body:has(.hero-split) .hero-split .hs-grid {
  position: relative;
  display: block !important;
  min-height: inherit;
  max-width: none !important;
}
body:has(.hero-split) .hero-split .photo {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: inherit;
  z-index: 0;
}
body:has(.hero-split) .hero-split .photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* 2026-07-29: zaslona mocno scieniona i skrocona.
     Wczesniej biel miala .92 krycia rozlana do 64% szerokosci kadru — powstala
     dla hero ZE ZDJECIEM, gdzie tekst lezal wprost na obrazie i potrzebowal tla.
     Dzis tekst siedzi na wlasnym panelu (tlo .94 + backdrop-filter blur 18px),
     wiec zaslona niczego nie chronila, a wyplukiwala film.
     Zostaje delikatne rozjasnienie pod samym panelem i lekkie przyciemnienie po
     prawej, ktore utrzymuje czytelnosc pigulki z podpisem sceny. */
  /* 2026-07-29 (druga iteracja): rozjasnienie po lewej USUNIETE z tej warstwy.
     Zostaje wylacznie lekkie przyciemnienie prawej krawedzi, ktore utrzymuje
     kontrast podpisu sceny na jasnym proszku.
     2026-07-30: rozjasnienie dla ZDJEC wrocilo, ale NIE tutaj — siedzi teraz
     na samych slajdach ze zdjeciem (`.c8-hero-scene--foto::after`, ok. linii
     4720). Powod jest zmierzony: ta warstwa nalezy do kontenera, wiec
     przelaczala sie skokowo w chwili zmiany slajdu, a slajdy przenikaja 0,55 s.
     Skutek: przez pol sekundy biel lezala na jeszcze w pelni widocznym filmie —
     dokladnie to wypranie, ktore mielismy usunac. Proba wygaszenia tego przez
     `transition: background` nie dziala: przegladarka nie animuje gradientu
     miedzy stanami (zmierzone — krycie skakalo 0 -> 0,92 w jednej klatce).
     Warstwa na slajdzie dziedziczy jego krycie, wiec synchronizacja jest
     z definicji, bez zadnego dodatkowego licznika ani przejscia. */
  background:
    linear-gradient(90deg, transparent 0%, transparent 42%, rgba(9, 16, 48, .12) 100%),
    linear-gradient(180deg, rgba(10, 19, 58, .02), rgba(8, 15, 46, .12));
}
body:has(.hero-split) .hero-split .panel {
  position: relative !important;
  z-index: 4;
  min-height: inherit;
  width: min(1640px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(44px, 6vh, 72px) 0;
  display: flex !important;
  align-items: center;
  background: transparent !important;
  pointer-events: none;
}
body:has(.hero-split) .hero-split .panel-inner {
  width: min(852px, 59.5vw);
  margin: 0 0 0 clamp(24px, 2.5vw, 44px) !important;
  padding: clamp(31px, 2.9vw, 42px) clamp(42px, 4vw, 64px) !important;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, .72);
  background:
    radial-gradient(circle at 0 0, rgba(187, 239, 250, .56), transparent 44%),
    linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(241, 248, 253, .82));
  box-shadow: 0 28px 70px rgba(15, 22, 72, .2);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  pointer-events: auto;
}
/* Główne hero — kompaktowa etykieta osadzona w obrębie karty informacyjnej. */
body:has(.hero-split) .hero-split .panel-inner > .badge {
  width: fit-content !important;
  max-width: calc(100% - 12px);
  min-height: 36px;
  margin-top: 12px;
  align-self: flex-start;
  justify-content: flex-start;
  gap: 10px;
  padding: 9px 15px 9px 12px !important;
  border: 1px solid rgba(0, 174, 217, .28) !important;
  border-left-width: 1px !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .97), rgba(241, 250, 253, .94)) !important;
  color: #087fa4 !important;
  box-shadow: 0 9px 24px rgba(20, 39, 92, .10) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.25;
  letter-spacing: .005em !important;
  white-space: normal;
}
body:has(.hero-split) .hero-split .panel-inner > .badge .dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 2px !important;
  box-shadow: 0 0 0 4px rgba(0, 174, 217, .11) !important;
}
body:has(.hero-split) .hero-split .panel h1 {
  max-width: 730px;
  font-size: clamp(42px, 3.4vw, 58px) !important;
  line-height: 1.02 !important;
  text-wrap: balance;
}
body:has(.hero-split) .hero-split .lead { max-width: 710px; margin-bottom: 20px; }
.c8-hero-specialties {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 24px;
  border-top: 1px solid rgba(21, 20, 95, .12);
  border-bottom: 1px solid rgba(21, 20, 95, .12);
}
.c8-hero-specialties a {
  position: relative;
  min-width: 0;
  padding: 13px 16px 13px 18px;
  border-right: 1px solid rgba(21, 20, 95, .12);
  color: var(--c8-navy);
  text-decoration: none;
  transition: background .18s ease;
}
.c8-hero-specialties a:last-child { border-right: 0; }
.c8-hero-specialties a::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 19px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c8-cyan);
}
.c8-hero-specialties a:hover { background: rgba(0, 174, 217, .06); }
.c8-hero-specialties b,
.c8-hero-specialties span { display: block; }
.c8-hero-specialties b { font-size: 12px; line-height: 1.25; }
.c8-hero-specialties span { margin-top: 3px; color: #687188; font-size: 10.5px; line-height: 1.25; }
body:has(.hero-split) .hero-split .hero-slide {
  opacity: 0 !important;
  clip-path: inset(0 0 0 100%);
  transform: translate3d(12%, 0, 0) scale(1.045);
  transition:
    clip-path 1.23s cubic-bezier(.68, 0, .22, 1),
    opacity .55s ease,
    transform 1.23s cubic-bezier(.22, .61, .36, 1) !important;
  will-change: clip-path, opacity, transform;
}
body:has(.hero-split) .hero-split .hero-slide.is-active {
  opacity: 1 !important;
  clip-path: inset(0 0 0 0);
  transform: translate3d(0, 0, 0) scale(1.01);
}
body:has(.hero-split) .hero-split .hero-slide.is-leaving {
  z-index: 0;
  opacity: .68 !important;
  clip-path: inset(0 0 0 0);
  transform: translate3d(-9%, 0, 0) scale(1.02);
}

/* Wyrazna granica zmiany obrazu: krotki swietlny pas przesuwa sie z prawej do lewej. */
body:has(.hero-split) .hero-split .photo::after {
  background:
    linear-gradient(90deg, transparent 0, rgba(0, 174, 217, .12) 25%, rgba(255, 255, 255, .72) 50%, rgba(0, 174, 217, .16) 72%, transparent 100%) 120% 0 / clamp(90px, 10vw, 180px) 100% no-repeat,
    linear-gradient(180deg, rgba(23, 21, 109, 0) 56%, rgba(23, 21, 109, .36) 100%);
}
body:has(.hero-split) .hero-split .photo.is-transitioning::after {
  animation: c8-hero-light-sweep 1.23s cubic-bezier(.68, 0, .22, 1) both;
}
@keyframes c8-hero-light-sweep {
  0% { background-position: 118% 0, 0 0; }
  100% { background-position: -18% 0, 0 0; }
}
body:has(.hero-split) .hero-split .hero-slide:nth-child(1) {
  --c8-hero-image: url("hero-lifestyle.jpg");
}
body:has(.hero-split) .hero-split .hero-slide:nth-child(2) {
  --c8-hero-image: url("hero-lifestyle-joints.jpg");
}
body:has(.hero-split) .hero-split .hero-slide:nth-child(3) {
  --c8-hero-image: url("hero-lifestyle-sport.jpg");
}
body:has(.hero-split) .hero-split .hero-slide::before {
  content: "";
  position: absolute;
  inset: -3%;
  z-index: 0;
  background-image: var(--c8-hero-image);
  background-size: cover;
  background-position: center;
  filter: blur(14px) saturate(.82);
  opacity: .72;
}
body:has(.hero-split) .hero-split .hero-slide img {
  position: absolute !important;
  top: 0;
  right: 0;
  left: auto !important;
  z-index: 1;
  width: 72% !important;
  max-width: none !important;
  height: 100% !important;
  /* 2026-07-30: POWROT do `cover`. Powod, dla ktorego 29.07 dalem `contain`,
     przestal istniec: chodzilo o ujecie menzurki, ktore traci gore i dol —
     ten klip zostal usuniety z karuzeli.
     Za to `contain` mial wade, ktora widac dopiero na szerokim ekranie.
     Ramka hero jest DUZO szersza niz kadr filmu (1560x1080 = 1,444):
        1280 px  ramka 1,64  ->  film zajmuje 1128 px, puste 152 px  (12%)
        1440 px  ramka 1,84  ->  film zajmuje 1128 px, puste 312 px  (22%)
        1920 px  ramka 2,46  ->  film zajmuje 1128 px, puste 792 px  (41%)
        2560 px  ramka 3,28  ->  film zajmuje 1128 px, puste 1432 px (56%)
     Czyli im szerszy monitor, tym bardziej film kurczyl sie w srodku hero —
     wlasciciel zglosil to jako „filmiki sa uciete, nie sa na cale hero".
     Zdjecia lifestyle maja proporcje 1,5, prawie taka sama jak film, i od
     poczatku sa na `cover`. Jednolity tryb = jednolity kadr na obu typach scen. */
  object-fit: cover !important;
  object-position: center center !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .42) 10%, #000 24%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .42) 10%, #000 24%, #000 100%);
  transform: none !important;
  animation: none !important;
}
body:has(.hero-split) .hero-split .caption { z-index: 5; left: auto; right: 32px; bottom: 64px; }
body:has(.hero-split) .hero-split .hero-controls { z-index: 5; right: 32px; bottom: 22px; }

/* Strona główna — zastosowania i dowody B2B. */
.c8-applications {
  position: relative;
  background:
    radial-gradient(circle at 8% 0, rgba(0, 174, 217, .12), transparent 30%),
    linear-gradient(180deg, #fff, #f4f8fc);
}
.c8-applications .uses-grid { gap: 16px; }
.c8-applications .use {
  min-height: 300px;
  cursor: default;
}
.c8-applications .use .c8-use-number {
  position: absolute;
  top: 17px;
  left: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 29px;
  border: 1px solid rgba(255, 255, 255, .48);
  background: rgba(11, 17, 61, .34);
  color: #fff;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
/* Tekst kafla zastosowan dopasowuje sie do SZEROKOSCI KAFLA, a nie do sztywnych
   190/210px. Na desktopie (6 kolumn ~210px) kafel i tak jest wezszy niz dawny
   limit, wiec nic sie nie zmienia; na tablecie (3 kolumny ~290px) tekst
   przestaje sie niepotrzebnie lamac i wychodzic poza kafel. */
.c8-applications .use h4 { max-width: 100%; font-size: 18px !important; }
.c8-applications .use p { max-width: 100%; }
.c8-use-links {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 17px;
}
.c8-use-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-shadow: 0 1px 8px rgba(8, 7, 35, .55);
}
.c8-use-links a span { color: var(--c8-cyan); font-size: 15px; transition: transform .18s ease; }
.c8-use-links a:hover span,
.c8-use-links a:focus-visible span { transform: translateX(3px); }
.c8-use-links a:focus-visible { outline: 2px solid var(--c8-cyan); outline-offset: 5px; }
.c8-applications .use:not(.c8-use--dual) .c8-use-links a::after {
  content: "";
  position: absolute;
  inset: -260px -18px -20px;
}
.c8-applications .use:has(.c8-use-links a:hover),
.c8-applications .use:has(.c8-use-links a:focus-visible) {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* Zastosowania mega menu — ten sam podział co na stronie głównej. */
.mega-app.c8-app-menu { padding: 24px 28px 28px; }
.c8-app-menu__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.c8-app-menu-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 238px;
  display: flex;
  align-items: flex-end;
  padding: 18px 15px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 13px;
  background: var(--c8-navy);
  box-shadow: 0 10px 26px rgba(16, 22, 62, .1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.c8-app-menu-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--am);
  background-position: center;
  background-size: cover;
  transition: transform .5s ease;
}
.c8-app-menu-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Ten sam mocny ciemny scrim co kafle hero na stronie glownej (index #zastosowania .use::after)
     — lekko podbity od gory + mocno przyciemniony od dolu, gdzie siedzi tytul/opis/CTA. */
  background:
    linear-gradient(180deg,
      rgba(23, 21, 109, .06) 0%,
      rgba(23, 21, 109, .18) 30%,
      rgba(12, 11, 54, .66) 64%,
      rgba(8, 7, 35, .94) 100%),
    linear-gradient(180deg, rgba(8, 7, 35, .30) 0%, rgba(8, 7, 35, 0) 22%);
}
.c8-app-menu-card:hover,
.c8-app-menu-card:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(16, 22, 62, .18); }
.c8-app-menu-card:hover::before,
.c8-app-menu-card:focus-visible::before { transform: scale(1.055); }
.c8-app-menu-card:focus-visible { outline: 2px solid var(--c8-cyan); outline-offset: 3px; }
.c8-app-menu-card__copy { min-width: 0; color: #fff; }
.c8-app-menu-card__copy > b { display: block; color: #fff; font-size: 16px; line-height: 1.15; text-shadow: 0 1px 9px rgba(0, 0, 0, .48); }
.c8-app-menu-card__copy > small { display: block; min-height: 48px; margin-top: 8px; color: rgba(255, 255, 255, .79); font-size: 11.5px; line-height: 1.4; }
.c8-app-menu-card__cta,
.c8-app-menu-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin-top: 12px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.c8-app-menu-card__links a { color: #fff; border-bottom: 1px solid rgba(0, 174, 217, .72); padding-bottom: 2px; }
.c8-app-menu-card__links a:hover,
.c8-app-menu-card__links a:focus-visible { color: #68daf3; }

/* O firmie: zwarte centrum informacji i dowodów B2B. */
.mega.mega-about.c8-about-menu {
  width: min(1120px, calc(100vw - 32px));
  max-height: none !important;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  padding: 0;
  overflow: hidden !important;
  border: 1px solid rgba(17, 24, 79, .12);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 78px rgba(15, 21, 67, .22);
}
.c8-about-menu__intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 28px 26px 26px;
  color: #fff;
  background:
    radial-gradient(circle at 14% 6%, rgba(56, 212, 241, .34), transparent 34%),
    linear-gradient(145deg, #10165b 0%, #19136f 62%, #222d8c 100%);
}
.c8-about-menu__intro::before {
  content: "";
  position: absolute;
  right: -76px;
  bottom: -86px;
  z-index: -1;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(105, 223, 246, .2);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(105, 223, 246, .055), 0 0 0 68px rgba(105, 223, 246, .035);
}
.c8-about-menu__intro::after {
  content: "";
  position: absolute;
  top: 0;
  left: 26px;
  width: 58px;
  height: 4px;
  background: var(--c8-cyan);
}
.c8-about-menu__eyebrow {
  display: block;
  margin-bottom: 18px;
  color: #6fe0f7;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.c8-about-menu__intro > strong {
  display: block;
  max-width: 210px;
  color: #fff;
  font-size: 24px;
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.c8-about-menu__intro > p {
  margin: 16px 0 22px;
  color: rgba(255, 255, 255, .73);
  font-size: 12.5px;
  line-height: 1.55;
}
.c8-about-menu__overview {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}
nav.main .c8-about-menu__overview,
nav.main .c8-about-menu__overview:hover,
nav.main .c8-about-menu__overview:focus-visible {
  color: #fff !important;
  white-space: normal !important;
}
.c8-about-menu__overview span { color: #6fe0f7; font-size: 16px; transition: transform .18s ease; }
.c8-about-menu__overview:hover span,
.c8-about-menu__overview:focus-visible span { transform: translateX(4px); }
.c8-about-menu__overview:focus-visible { outline: 2px solid #6fe0f7; outline-offset: 5px; }
.c8-about-menu__grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: stretch;
  gap: 12px;
  padding: 12px;
  background: linear-gradient(145deg, #eef4f8 0%, #f7f9fc 100%);
}
.c8-about-menu__card {
  position: relative;
  min-width: 0;
  min-height: 152px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 17px 48px 20px;
  overflow: hidden;
  white-space: normal !important;
  text-align: center;
  border: 1px solid rgba(17, 24, 79, .1);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0, rgba(0, 174, 217, .075), transparent 52%),
    #fff;
  box-shadow: 0 7px 18px rgba(20, 31, 81, .045);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.c8-about-menu__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 58px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--c8-cyan);
  transform: translateX(-50%) scaleX(.38);
  opacity: .48;
  transition: width .2s ease, transform .2s ease, opacity .2s ease;
}
.c8-about-menu__card:hover,
.c8-about-menu__card:focus-visible {
  z-index: 1;
  border-color: rgba(0, 174, 217, .42);
  background:
    radial-gradient(circle at 50% 0, rgba(0, 174, 217, .13), transparent 54%),
    #fff;
  box-shadow: 0 16px 30px rgba(18, 35, 86, .13), 0 0 0 1px rgba(0, 174, 217, .08);
  transform: translateY(-3px);
}
.c8-about-menu__card:hover::before,
.c8-about-menu__card:focus-visible::before { width: 92px; opacity: 1; transform: translateX(-50%) scaleX(1); }
.c8-about-menu__card:focus-visible { outline: 2px solid var(--c8-cyan); outline-offset: -3px; }
/* fix18a / uwaga 3.2 + S7: piktogramy w megamenu "O firmie" usuniete.
   Byl tu komplet regul .c8-about-menu__icon (kwadrat 42px z gradientem,
   obramowaniem i cieniem) + stan hover + .c8-about-menu__icon svg.
   Markup <span class="c8-about-menu__icon"> zniknal z kart w fix12,
   wiec reguly nie mialy juz czego dopasowac. Karta to flex-column
   (align-items:center), nie grid — po ikonie nie zostaje zadna kolumna. */
.c8-about-menu__copy {
  min-width: 0;
  max-width: 310px;
  /* bez overflow:hidden — to jest blok TEKSTOWY (nie kadrowane zdjecie),
     wiec ucinanie liter przy dluzszym tlumaczeniu bylo bledem. */
  white-space: normal !important;
}
.c8-about-menu__copy b {
  display: block;
  color: var(--c8-navy);
  font-size: 15.5px;
  font-weight: 850;
  line-height: 1.2;
  white-space: normal !important;
  overflow-wrap: break-word;
}
.c8-about-menu__copy small {
  display: block;
  margin-top: 6px;
  color: #697288;
  font-size: 11px;
  line-height: 1.4;
  white-space: normal !important;
  overflow-wrap: break-word;
}
.c8-about-menu__step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  padding: 10px 11px;
  pointer-events: none;
  color: #9aa4b7;
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .1em;
  white-space: nowrap;
}
.c8-about-menu__step i {
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c8-navy);
  border: 1px solid rgba(17, 24, 79, .1);
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  font-size: 13px;
  font-style: normal;
  letter-spacing: 0;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.c8-about-menu__card:hover .c8-about-menu__step i,
.c8-about-menu__card:focus-visible .c8-about-menu__step i {
  color: #fff;
  border-color: var(--c8-cyan);
  background: var(--c8-cyan);
  transform: translateX(2px);
}
.c8-about-menu__proof {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px 22px;
  min-height: 48px;
  padding: 11px 18px;
  border-top: 1px solid rgba(17, 24, 79, .08);
  background: #f6f8fb;
}
.c8-about-menu__proof > span {
  position: relative;
  padding-left: 12px;
  color: #4f596f;
  font-size: 10.5px;
  font-weight: 800;
}
.c8-about-menu__proof > span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c8-cyan);
  transform: translateY(-50%);
}
/* fix18a / uwaga S7: link "Dokumenty →" w prawym dolnym rogu megamenu
   "O firmie" usuniety (pozycja jest w menu glownym). Byly tu reguly
   .c8-about-menu__proof > a (+ span, hover, focus-visible) — po fix12
   w .c8-about-menu__proof zostaly wylacznie dwa <span> z dowodami,
   zero <a>, wiec reguly nie mialy czego dopasowac. */

/* Rodziny produktowe: mocniejszy stan wyboru po najechaniu i z klawiatury. */
#rodziny .fam {
  will-change: transform, box-shadow;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
#rodziny .fam:hover,
#rodziny .fam:focus-visible {
  z-index: 3;
  border-color: var(--fc);
  outline: 0;
  transform: translateY(-9px);
  box-shadow:
    0 30px 68px rgba(15, 20, 66, .23),
    0 10px 24px rgba(15, 20, 66, .1),
    0 0 0 2px color-mix(in srgb, var(--fc) 22%, transparent);
}
#rodziny .fam:focus-visible {
  box-shadow:
    0 30px 68px rgba(15, 20, 66, .23),
    0 10px 24px rgba(15, 20, 66, .1),
    0 0 0 3px color-mix(in srgb, var(--fc) 42%, #fff);
}
#rodziny .fam:focus-visible .fam-edge rect { stroke-dashoffset: 0; }
#rodziny .fam:focus-visible .pic img { transform: scale(1.07); }
#rodziny .fam:focus-visible .go svg { transform: translateX(4px); }

/* Ukośne kafle TuriKer: cień zaznaczonego segmentu wychodzi poza wspólną maskę. */
#rodziny .ksplit {
  isolation: isolate;
  transition: filter .24s ease;
}
#rodziny .ksplit::after {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: rgba(17, 21, 76, .56);
  filter: blur(22px);
  transform: translateY(20px) scale(.97);
  transition: opacity .24s ease, transform .24s ease;
}
#rodziny .ksplit:has(.kp1:hover)::after,
#rodziny .ksplit:has(.kp1:focus-visible)::after {
  clip-path: polygon(0 0, 35% 0, 29% 100%, 0 100%);
  opacity: .46;
  transform: translateY(18px) scale(.985);
}
#rodziny .ksplit:has(.kp2:hover)::after,
#rodziny .ksplit:has(.kp2:focus-visible)::after {
  clip-path: polygon(37% 0, 68% 0, 62% 100%, 31% 100%);
  opacity: .46;
  transform: translateY(18px) scale(.985);
}
#rodziny .ksplit:has(.kp3:hover)::after,
#rodziny .ksplit:has(.kp3:focus-visible)::after {
  clip-path: polygon(70% 0, 100% 0, 100% 100%, 64% 100%);
  opacity: .46;
  transform: translateY(18px) scale(.985);
}
#rodziny .ksplit .kp:hover,
#rodziny .ksplit .kp:focus-visible {
  z-index: 3;
  outline: 0;
  filter:
    drop-shadow(0 18px 30px rgba(15, 20, 66, .34))
    drop-shadow(0 6px 13px rgba(15, 20, 66, .2))
    brightness(1.045);
}
#rodziny .ksplit .kp:focus-visible .kp-edge line { stroke-dashoffset: 0; }
#rodziny .ksplit .kp:focus-visible .kp-go svg { transform: translateX(6px); }
#rodziny .ksplit .kp:focus-visible .kp-pic::before { transform: scale(1.07); }

/* Cien TuriKer jest rysowany na osobnej kopii ksztaltu.
   Dzieki temu maska trapezu nie ucina efektu jak przy filtrze na samym kaflu. */
#rodziny .ksplit::after {
  display: block !important;
  inset: 0;
  z-index: 0;
  opacity: 0;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  background: #fff;
  filter:
    drop-shadow(0 30px 68px rgba(15, 20, 66, .23))
    drop-shadow(0 10px 24px rgba(15, 20, 66, .1));
  transform: translateY(0);
  transition: opacity 0s linear, transform .24s ease;
}
#rodziny .ksplit:has(.kp1:hover)::after,
#rodziny .ksplit:has(.kp1:focus-visible)::after {
  clip-path: polygon(0 0, 35% 0, 29% 100%, 0 100%);
  opacity: 1;
  transform: translateY(-9px);
  transition: opacity .12s ease, transform .24s ease;
}
#rodziny .ksplit:has(.kp2:hover)::after,
#rodziny .ksplit:has(.kp2:focus-visible)::after {
  clip-path: polygon(37% 0, 68% 0, 62% 100%, 31% 100%);
  opacity: 1;
  transform: translateY(-9px);
  transition: opacity .12s ease, transform .24s ease;
}
#rodziny .ksplit:has(.kp3:hover)::after,
#rodziny .ksplit:has(.kp3:focus-visible)::after {
  clip-path: polygon(70% 0, 100% 0, 100% 100%, 64% 100%);
  opacity: 1;
  transform: translateY(-9px);
  transition: opacity .12s ease, transform .24s ease;
}
/* ============================================================
   Obwodka hover scietych kafli TuriKer (fix7) — RUWNA na WSZYSTKICH krawedziach.

   Co bylo zle:
   1) border/outline/box-shadow na .kp sa bezuzyteczne — clip-path (trapez) tnie
      je razem z elementem; to samo dotyczy filter:drop-shadow zalozonego na TYM
      SAMYM elemencie (maska jest aplikowana po filtrze), wiec obwodki nie da sie
      narysowac srodkami "pudelkowymi" na samym kaflu.
   2) Proba z commita 67a4c60 (wypelniony ksztalt-podklad na .ksplit::before z
      polygonem powiekszonym o 2.5px) NIE MOGLA zadzialac: pseudo mialo inset:0,
      wiec jego pudlo malowania bylo dokladnie pudlem .ksplit. Punkty polygonu
      lezace POZA pudlem — calc(0% - 2.5px), calc(100% + 2.5px) — nie maluja
      niczego, bo clip-path wylacznie PRZYCINA, nie powieksza obszaru malowania.
      Rant pojawial sie wiec tylko tam, gdzie krawedz lezala WEWNATRZ pudla, czyli
      na ukosnych paskach — dokladnie to zglosil user ("boczne paski maja dodatkowa
      kreske a reszta tak samo"). Podklad zostal usuniety w calosci.

   Jak jest teraz:
   Obwodke rysuje juz istniejacy <svg class="kp-edge"> wewnatrz kazdego .kp
   (4 odcinki e1..e4 po obwodzie trapezu, z animacja stroke-dashoffset). Stroke
   jest wysrodkowany na krawedzi, wiec maska trapezu obcina jego zewnetrzna
   polowe — widoczna grubosc = stroke-width / 2, identycznie na gorze, dole i na
   obu skosach. Bazowe stroke-width:3 dawalo raptem 1.5px (na zdjeciu i na bieli
   praktycznie niewidoczne), stad wrazenie "obrys tylko na bokach" — dlugie ukosy
   czytaly sie mocno, krotkie gora/dol ginely.
   stroke-width:5 => 2.5px pelnego koloru na kazdej krawedzi, czyli tyle samo, co
   na prostokatnych .fam (2px stroke .fam-edge + 1px podbarwionego bordera).
   Kafel na hover ma z-index 3 (kp-edge z-index 4), wiec obwodka jest widoczna
   takze na wspolnej, ukosnej krawedzi z sasiadem (z-index 1). */
#rodziny .ksplit .kp-edge line { stroke-width: 5; }
#rodziny .ksplit .kp {
  z-index: 1;
  will-change: transform, filter;
  transition: transform .24s ease, filter .24s ease;
}
/* PROG UKOSNEGO UKLADU: 1181px (bylo 821px).
   Skos .ksplit to trzy trapezy o STALYCH procentach (kp-in ma 23-24% szerokosci
   sekcji) w kontenerze o STALEJ wysokosci. Ponizej ~1180px kolumna tekstu robila
   sie wezsza niz 260px, wiec opis wychodzil poza pasek zdjecia i poza sam kafel
   — dokladnie to, co user widzial na tablecie (a w DE juz przy 1101px).
   Od 1181px w gore uklad jest ten sam co dotad. */
@media (min-width: 1181px) {
  /* Bylo clamp(408px, 46vh, 432px) w index.html: przy oknie nizszym niz 940px
     (czyli praktycznie na kazdym laptopie) sekcja kurczyla sie do 408-414px,
     a wtedy .kp-head (flex-item o height:224px) SIE SCISKAL do ~200px i tekst
     wchodzil na zdjecie — bialy prog tla jest na sztywno na 224px.
     Stala 432px = dokladnie ta sama wysokosc, co dotad na wysokich ekranach. */
  #rodziny .ksplit { height: 432px; }
  #rodziny .ksplit-clip {
    overflow: visible;
    clip-path: none;
  }
  #rodziny .ksplit .kp:hover,
  #rodziny .ksplit .kp:focus-visible {
    z-index: 3;
    outline: 0;
    transform: translateY(-9px);
    filter: brightness(1.045);
  }
}
@media (max-width: 1180px) {
  #rodziny .ksplit::after,
  #rodziny .ksplit::before { display: none !important; }
  #rodziny .ksplit .kp:hover,
  #rodziny .ksplit .kp:focus-visible {
    z-index: 3;
    outline: 0;
    transform: translateY(-9px);
    box-shadow:
      0 30px 68px rgba(15, 20, 66, .23),
      0 10px 24px rgba(15, 20, 66, .1),
      0 0 0 2px color-mix(in srgb, var(--ka) 22%, transparent);
  }
}

/* PLYNNA SIATKA RODZIN — bez luk w breakpointach.
   Liczba kolumn wynika z dostepnej szerokosci (auto-fit), nie z listy
   zakresow @media, wiec KAZDA szerokosc jest obsluzona:
     wrap = min(1400px, 100vw) - 56px, gap 24px
     >=1096px -> 3 kolumny (desktop 1440/1920 bez zmian)
      721-1095 -> 2 kolumny
      <=720    -> 1 kolumna
   min() chroni przed przepelnieniem, gdy kontener jest wezszy niz 330px. */
#rodziny .fam-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
}
@media (max-width: 720px) {
  #rodziny .fam-grid { grid-template-columns: 1fr; }
}

/* Rodziny mają ten sam rytm w PL, EN i DE. Dłuższy język nie może
   samodzielnie zmieniać wysokości całego pierwszego rzędu.
   min-height (NIE height): gdy tlumaczenie nie miesci sie w 456/498px,
   kafel ROSNIE zamiast wypuszczac tekst poza swoja ramke. Siatka i tak
   wyrownuje wysokosci w rzedzie (align-items:stretch). */
@media (min-width: 981px) {
  #rodziny .fam-grid > .fam {
    min-height: 456px;
  }
  #rodziny .fam-grid > .fam .pic { flex: 0 0 258px; }
  #rodziny .fam-grid > .fam .body { min-height: 0; }
}

@media (min-width: 721px) and (max-width: 980px) {
  #rodziny .fam-grid > .fam {
    min-height: 498px;
  }
  #rodziny .fam-grid > .fam .pic { flex: 0 0 258px; }
  #rodziny .fam-grid > .fam .body { min-height: 0; }
}

/* Mobilne i tabletowe TuriKer są pełnymi kartami, a nie luźnym zdjęciem
   i tekstem. Kontur jest widoczny również bez hovera, co jest kluczowe
   na dotyku. Zakres podniesiony z 820px do 1180px — patrz komentarz przy
   @media (min-width: 1181px) powyzej.
   Liczba kolumn jest PLYNNA (auto-fit): 3 karty obok siebie od ~900px,
   2 przy 821-899px, 1 na mobile. */
@media (max-width: 1180px) {
  #rodziny .ksplit {
    height: auto;
    filter: none;
  }
  #rodziny .ksplit-clip {
    position: static;
    display: grid;
    gap: 22px;
    overflow: visible;
    clip-path: none;
  }
  #rodziny .ksplit .kp-name { font-size: clamp(22px, 2.5vw, 30px); }
  #rodziny .ksplit .kp,
  #rodziny .ksplit .kp + .kp {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    margin: 0;
    overflow: hidden;
    clip-path: none !important;
    border: 1px solid color-mix(in srgb, var(--ka) 68%, #dce2ed);
    border-radius: 14px;
    background: #fff !important;
    box-shadow:
      0 16px 34px rgba(17, 21, 76, .11),
      0 3px 10px rgba(17, 21, 76, .06);
    filter: none;
    transform: none;
  }
  #rodziny .ksplit .kp-in {
    position: static;
    width: 100% !important;
    padding: 0 !important;
  }
  #rodziny .ksplit .kp-head {
    /* min-height bez height: dluzsza nazwa (DE) rozpycha pasek zdjecia
       zamiast wychodzic poza niego. */
    min-height: 176px;
    padding: 20px 22px;
    border-radius: 0;
    background: var(--kp-overlay), var(--kp-img) center / cover no-repeat;
  }
  /* These URLs are resolved from assets/concept8.css. Using the page-level
     custom property here would otherwise produce assets/assets/... on mobile. */
  #rodziny .ksplit .kp1 .kp-head {
    background-image: var(--kp-overlay), url("card-turiker.jpg");
  }
  #rodziny .ksplit .kp2 .kp-head {
    background-image: var(--kp-overlay), url("card-agroker.jpg");
  }
  #rodziny .ksplit .kp3 .kp-head {
    background-image: var(--kp-overlay), url("card-bioker-v3.webp");
  }
  #rodziny .ksplit .kp-body {
    min-height: 190px;
    padding: 20px 22px 24px;
    background: #fff;
  }
  #rodziny .ksplit .kp-desc { min-height: 0; }
  #rodziny .ksplit .kp-edge { display: none; }
  /* .kp-pic to DESKTOPOWA warstwa zdjecia (absolutna, kadr 36-38% szerokosci
     CALEJ sekcji, wysokosc 224px), wlaczana w index.html przez
     @media(min-width:821px). W ukladzie plaskim zdjecie jest tlem .kp-head,
     wiec ta warstwa musi zniknac — inaczej naklada sie na tytul kafla
     i przecina zdjecie w polowie. */
  #rodziny .ksplit .kp-pic { display: none !important; }
  #rodziny .ksplit .kp:hover,
  #rodziny .ksplit .kp:focus-visible {
    transform: none;
    filter: none;
    border-color: var(--ka);
    box-shadow:
      0 20px 42px rgba(17, 21, 76, .16),
      0 0 0 2px color-mix(in srgb, var(--ka) 16%, transparent);
  }
  #rodziny .ksplit .kp:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ka) 45%, #fff);
    outline-offset: 3px;
  }
}

/* Plaskie karty TuriKer na tablecie ustawiaja sie obok siebie tak samo
   plynnie jak siatka rodzin — bez dodatkowych progow posrednich. */
@media (min-width: 821px) and (max-width: 1180px) {
  #rodziny .ksplit-clip {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    align-items: stretch;
  }
  #rodziny .ksplit .kp,
  #rodziny .ksplit .kp + .kp { display: flex; flex-direction: column; }
  #rodziny .ksplit .kp-in { display: flex; flex-direction: column; flex: 1; }
  #rodziny .ksplit .kp-body { flex: 1; }
}

@media (min-width: 1041px) and (max-width: 1180px) {
  .mega.mega-about.c8-about-menu { grid-template-columns: 260px minmax(0, 1fr); }
  .c8-about-menu__intro { padding: 26px 22px 24px; }
  .c8-about-menu__intro > strong { font-size: 22px; }
  .c8-about-menu__card { padding: 16px 42px 18px; gap: 7px; }
}

@media (min-width: 981px) and (max-width: 1040px) {
  .mega.mega-about.c8-about-menu {
    width: min(960px, calc(100vw - 24px));
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .c8-about-menu__intro { padding: 24px 20px; }
  .c8-about-menu__intro > strong { font-size: 21px; }
  .c8-about-menu__card {
    min-height: 148px;
    padding: 14px 38px 17px;
    gap: 7px;
  }
  /* fix18a: .c8-about-menu__icon usuniete razem z piktogramami (patrz ~:860) */
  .c8-about-menu__copy b { font-size: 14px; }
  .c8-about-menu__copy small { font-size: 10.5px; }
}

/* Linie produktowe — każda karta zachowuje ten sam wymiar.
   Niepełne rzędy są centrowane zamiast rozciągania ostatnich elementów. */
.category-page .category-products .pgrid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px !important;
  width: 100%;
  max-width: 1060px !important;
  margin-left: auto;
  margin-right: auto;
}
.category-page .category-products .pcard,
.category-page--turiker .category-products .pcard,
.category-page--turiker .category-products .pcard:nth-last-child(-n + 2) {
  flex: 0 1 340px;
  width: 100%;
  max-width: 340px;
  min-width: 0;
  grid-column: auto;
}

@media (max-width: 760px) {
  .category-page .category-products .pgrid { max-width: 700px !important; gap: 16px !important; }
  .category-page .category-products .pcard,
  .category-page--turiker .category-products .pcard,
  .category-page--turiker .category-products .pcard:nth-last-child(-n + 2) {
    flex-basis: min(100%, 420px);
    max-width: 420px;
  }
}
.c8-evidence {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 7vw, 108px) 0;
  color: var(--c8-navy);
  border-top: 1px solid rgba(17, 24, 79, .08);
  border-bottom: 1px solid rgba(17, 24, 79, .08);
  background:
    radial-gradient(circle at 8% 0, rgba(0, 174, 217, .12), transparent 28%),
    radial-gradient(circle at 94% 100%, rgba(31, 48, 151, .08), transparent 30%),
    linear-gradient(135deg, #eef9fc 0%, #ffffff 52%, #f4f6fb 100%);
}
.c8-evidence::after {
  content: "TurEssence®";
  position: absolute;
  right: -18px;
  bottom: -32px;
  color: var(--c8-navy);
  font-size: clamp(82px, 10vw, 160px);
  font-weight: 850;
  letter-spacing: -.07em;
  line-height: 1;
  opacity: .025;
  pointer-events: none;
  white-space: nowrap;
}
.c8-evidence .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
  gap: clamp(46px, 7vw, 96px);
  align-items: center;
}
.c8-evidence__head { max-width: 480px; }
.c8-evidence__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: #087f9f;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.c8-evidence__eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--c8-cyan);
}
.c8-evidence h2 { color: var(--c8-navy); margin: 0; font-size: clamp(38px, 4vw, 58px); line-height: 1.02; }
.c8-evidence .c8-evidence__head p { margin: 22px 0 0; color: #606a82; font-size: 16px; line-height: 1.72; }
.c8-evidence__link { display: inline-block; margin-top: 26px; color: var(--c8-navy); font-weight: 850; border-bottom: 2px solid var(--c8-cyan); padding-bottom: 5px; }
.c8-evidence__content { min-width: 0; }
.c8-evidence__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 34px;
}
.c8-evidence__item {
  position: relative;
  min-height: 88px;
  padding: 0 0 0 22px;
  border-left: 3px solid rgba(0, 174, 217, .42);
}
.c8-evidence__item b { display: block; color: var(--c8-navy); font-size: 17px; margin-bottom: 7px; }
.c8-evidence__item span { color: #687188; font-size: 14px; line-height: 1.55; }
.c8-cert-panel {
  margin-top: 34px;
  padding: 18px 22px 16px;
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(21, 20, 95, .1);
  box-shadow: 0 20px 50px rgba(22, 31, 84, .09);
}
.c8-cert-panel__label { display: block; margin-bottom: 12px; color: #7a8298; font-size: 10px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.c8-cert-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.c8-cert-row a {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 14px;
  border-right: 1px solid rgba(21, 20, 95, .1);
  color: var(--c8-navy);
  font-size: 11px;
  font-weight: 800;
  transition: background .18s ease;
}
.c8-cert-row a:last-child { border-right: 0; }
.c8-cert-row a:hover { background: rgba(0, 174, 217, .055); }
.c8-cert-row img { width: auto; max-height: 42px; max-width: 82px; object-fit: contain; }

/* Sticky nawigacja: widoczna, ale nie konkuruje z głównym menu. */
.category-jump,
.application-jump {
  position: sticky !important;
  top: var(--sticky-nav-offset, 0) !important;
  z-index: 48 !important;
  min-height: 62px;
  background: rgba(255, 255, 255, .98) !important;
  border-top: 3px solid var(--category-accent, var(--app-accent, var(--c8-cyan))) !important;
  border-bottom: 1px solid #d6deed !important;
  box-shadow: 0 10px 28px rgba(17, 25, 75, .13) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.category-jump strong,
.application-jump strong {
  color: var(--category-deep, var(--app-deep, var(--c8-navy))) !important;
  font-size: 14px !important;
}
.category-jump a,
.application-jump a {
  color: #303956 !important;
  font-weight: 750 !important;
  padding: 8px 11px !important;
  border-radius: 9px;
}
.category-jump a:hover,
.category-jump a:focus-visible,
.application-jump a:hover,
.application-jump a:focus-visible,
.category-jump a.is-current,
.application-jump a.is-current {
  color: var(--category-deep, var(--app-deep, var(--c8-navy))) !important;
  background: color-mix(in srgb, var(--category-accent, var(--app-accent, var(--c8-cyan))) 12%, #fff);
}

/* Kolory rodzin obejmują całą stronę, w tym korzyści i końcowe CTA. */
.category-page--turicoll {
  --category-deep: #202c87;
  --category-navy: #11195d;
  --category-accent: #2b3a9e;
  --category-accent-dark: #1f2c84;
  --category-mist: #eef1ff;
  --category-glow: rgba(43, 58, 158, .18);
}
.category-page--turiker {
  --category-deep: #6d2054;
  --category-navy: #3b1232;
  --category-accent: #8e2f6d;
  --category-accent-dark: #6d2054;
  --category-mist: #fbf0f7;
  --category-glow: rgba(142, 47, 109, .2);
}
.category-page--turipro {
  --category-deep: #0b694c;
  --category-navy: #073d31;
  --category-accent: #0f855f;
  --category-accent-dark: #0b694c;
  --category-mist: #edf8f3;
  --category-glow: rgba(15, 133, 95, .2);
}
.category-page--turigel {
  --category-deep: #9b530a;
  --category-navy: #663807;
  --category-accent: #d9821c;
  --category-accent-dark: #a95d0c;
  --category-mist: #fff4e5;
  --category-glow: rgba(217, 130, 28, .22);
}
.category-page--turiker .lsplit .ls-panel {
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, .88), transparent 32%),
    radial-gradient(circle at 15% 88%, rgba(142, 47, 109, .18), transparent 38%),
    linear-gradient(135deg, #fffafd 0%, #f8e7f2 38%, #efd5e7 70%, #e7c3db 100%) !important;
}
.category-page--turiker .lsplit .ls-panel::before {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .42), transparent 43%),
    radial-gradient(circle at 60% 48%, rgba(111, 36, 85, .13), transparent 58%) !important;
}
.category-page--turiker .lsplit .ls-chip { display: none !important; }

/* Nazwy rodzin produktowych w tle sekcji: +20% widocznosci. */
.category-story::after { opacity: .042; }
.category-page .category-benefits {
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--category-accent) 38%, transparent), transparent 30%),
    linear-gradient(135deg, var(--category-navy), var(--category-deep)) !important;
}
.category-page .category-benefits .ben-ic {
  background: color-mix(in srgb, var(--category-accent) 64%, transparent) !important;
  border-color: color-mix(in srgb, var(--category-accent) 82%, #fff) !important;
}
.category-page .category-contact {
  background:
    radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--category-accent) 42%, transparent), transparent 27%),
    linear-gradient(120deg, var(--category-navy), var(--category-deep)) !important;
}
.category-page .category-story::before {
  border-color: color-mix(in srgb, var(--category-accent) 34%, transparent) !important;
  box-shadow:
    0 0 0 46px color-mix(in srgb, var(--category-accent) 7%, transparent),
    0 0 0 92px color-mix(in srgb, var(--category-accent) 4%, transparent) !important;
}

/*
 * Strony zastosowań nie są dodatkowymi markami. Wszystkie korzystają ze
 * wspólnej, neutralnej bazy Atlantis, a kontekst zastosowania zaznaczamy
 * tylko jednym kontrolowanym akcentem.
 */
.application-page {
  --app-accent: #00a9cf;
  --app-deep: #17156d;
  --app-mist: #eef9fc;
  --app-glow: rgba(0, 169, 207, .14);
  --application-accent: var(--app-accent);
  --application-deep: var(--app-deep);
  --application-mist: #f4f7fb;
  --application-glow: rgba(23, 21, 109, .07);
  background: #fff;
}
.application-page--joints {
  --app-accent: #00a9cf;
  --app-mist: #eaf9fc;
  --app-glow: rgba(0, 169, 207, .14);
}
.application-page--sport {
  --app-accent: #2c6fc9;
  --app-mist: #eef5fd;
  --app-glow: rgba(44, 111, 201, .14);
}
.application-page--beauty {
  --app-accent: #9a3d79;
  --app-mist: #fbf0f7;
  --app-glow: rgba(154, 61, 121, .13);
}
.application-page--pet {
  --app-accent: #2f8d73;
  --app-mist: #eef8f4;
  --app-glow: rgba(47, 141, 115, .13);
}
.application-page--food {
  --app-accent: #c88716;
  --app-mist: #fff6e8;
  --app-glow: rgba(200, 135, 22, .14);
}
.application-page .apphero2__card {
  top: auto !important;
  bottom: clamp(34px, 7vh, 76px) !important;
  border-top-color: var(--app-accent) !important;
  box-shadow: 0 26px 64px rgba(12, 21, 67, .18) !important;
}
.application-page .apphero2-card {
  border-top-color: var(--app-accent) !important;
  box-shadow: 0 26px 64px rgba(12, 21, 67, .18) !important;
}
.application-page .apphero2__card::before,
.application-page .apphero2-card::before {
  background: var(--app-accent) !important;
}
.application-page .apphero2__scrim,
.application-page .apphero2-scrim {
  background:
    radial-gradient(95% 80% at 10% 34%, var(--app-glow), transparent 53%),
    linear-gradient(90deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .58) 31%, rgba(255, 255, 255, .1) 57%, transparent 73%),
    linear-gradient(180deg, transparent 66%, rgba(17, 25, 93, .1) 100%) !important;
}
.application-page .apphero2__accent,
.application-page .apphero2-em,
.application-page .apphero2-accent {
  color: var(--app-accent) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--app-accent) !important;
}
.application-page .apphero2__eyebrow,
.application-page .apphero2-eyebrow {
  color: var(--app-accent) !important;
  background: color-mix(in srgb, var(--app-accent) 10%, #fff) !important;
}
.application-page .apphero2__dot,
.application-page .apphero2-dot {
  background: var(--app-accent) !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--app-accent) 15%, transparent) !important;
}
.application-page .apphero2 .btn-outline {
  color: var(--c8-navy) !important;
  background: #fff !important;
  border-color: #cbd4e5 !important;
}
.application-page .apphero2 .btn-outline:hover,
.application-page .apphero2 .btn-outline:focus-visible {
  color: var(--c8-navy) !important;
  background: #f2f8fc !important;
  border-color: var(--c8-cyan) !important;
}
.application-page .application-products {
  background:
    radial-gradient(circle at 8% 0, rgba(0, 174, 217, .075), transparent 27%),
    radial-gradient(circle at 94% 8%, rgba(23, 21, 109, .055), transparent 25%),
    linear-gradient(180deg, #fff, #f5f7fb) !important;
}
.application-page .application-products__kicker { color: var(--app-accent) !important; }
.application-page .application-products__head h2 { color: var(--c8-navy) !important; }

/* Karty zachowują prawdziwy kolor rodziny produktowej. */
.application-page .application-products .apc {
  --product-accent: #00aed9;
  --product-accent-2: #2b3a9e;
  --product-deep: #17156d;
  --product-mist: #edf9fc;
  border-color: color-mix(in srgb, var(--product-deep) 14%, transparent) !important;
}
.application-page .application-products .apc:has(h3 a[href*="turicoll"]) {
  --product-accent: #2b3a9e;
  --product-accent-2: #00aed9;
  --product-deep: #202c87;
  --product-mist: #eef1ff;
}
.application-page .application-products .apc:has(h3 a[href*="turiker"]) {
  --product-accent: #8e2f6d;
  --product-accent-2: #c0568a;
  --product-deep: #6d2054;
  --product-mist: #fbf0f7;
}
.application-page .application-products .apc:has(h3 a[href*="turipro"]) {
  --product-accent: #0f855f;
  --product-accent-2: #51ad8c;
  --product-deep: #0b694c;
  --product-mist: #edf8f3;
}
.application-page .application-products .apc:has(h3 a[href*="turigel"]) {
  --product-accent: #d9821c;
  --product-accent-2: #efad4f;
  --product-deep: #9b530a;
  --product-mist: #fff4e5;
}
.application-page .application-products .apc::after {
  background: linear-gradient(90deg, var(--product-accent), var(--product-accent-2)) !important;
}
.application-page .application-products .apc::before {
  color: var(--product-deep) !important;
  background: var(--product-mist) !important;
}
.application-page .application-products .apc:hover {
  border-color: color-mix(in srgb, var(--product-accent) 48%, transparent) !important;
}
.application-page .application-products .apc .ln,
.application-page .application-products .apc h3 a {
  color: var(--product-deep) !important;
}
.application-page .application-products .apc h3 a:hover { color: var(--product-accent) !important; }
.application-page .application-products .apc .pm {
  color: var(--product-deep) !important;
  background: var(--product-mist) !important;
}
.application-page .application-products .apc .a a.add {
  color: var(--product-deep) !important;
}
.application-page .application-products .apc .a a.add:hover,
.application-page .application-products .apc .a a.add:focus-visible {
  color: var(--product-deep) !important;
  background: var(--product-mist) !important;
  border-color: var(--product-accent) !important;
}

/* Wspólny gradient recepturowy Atlantis na końcu każdego zastosowania. */
.application-page .application-contact {
  background:
    radial-gradient(circle at 86% 8%, rgba(0, 174, 217, .34), transparent 27%),
    radial-gradient(circle at 66% 116%, rgba(255, 255, 255, .1), transparent 33%),
    linear-gradient(125deg, #0e1558 0%, #17156d 58%, #105b83 100%) !important;
}
.application-page .application-contact__kicker { color: #68daf3 !important; }
.application-page .application-contact .btn-primary { color: var(--c8-navy) !important; }

/* Zastosowanie: Rolnictwo i biotechnologia. Jedna neutralna strona wejściowa, dwa kierunki produktu. */
.application-page--agbio {
  --app-accent: #168875;
  --app-mist: #edf8f5;
  --app-glow: rgba(22, 136, 117, .14);
}
.c8-agbio {
  overflow: clip;
  color: var(--c8-ink);
  background: #fff;
}
.c8-agbio h1,
.c8-agbio h2,
.c8-agbio h3 { color: var(--c8-navy); }
.c8-agbio-hero {
  position: relative;
  padding: clamp(58px, 6vw, 88px) 0 clamp(68px, 7vw, 104px);
  background:
    radial-gradient(circle at 4% 12%, rgba(0, 174, 217, .15), transparent 31%),
    radial-gradient(circle at 92% 88%, rgba(22, 136, 117, .12), transparent 28%),
    linear-gradient(135deg, #f8fbfd 0%, #fff 48%, #eff7f5 100%);
}
.c8-agbio-hero::after {
  content: "";
  position: absolute;
  right: -190px;
  bottom: -240px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(0, 174, 217, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 62px rgba(0, 174, 217, .035), 0 0 0 124px rgba(22, 136, 117, .025);
  pointer-events: none;
}
.c8-agbio-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr);
  gap: clamp(46px, 6vw, 88px);
  align-items: center;
}
.c8-agbio-hero__copy { max-width: 650px; }
.c8-agbio-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 13px;
  color: #087e99;
  border: 1px solid rgba(0, 174, 217, .3);
  border-radius: 7px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 8px 24px rgba(16, 27, 75, .07);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
  line-height: 1.3;
  text-transform: uppercase;
}
.c8-agbio-hero h1 {
  max-width: 650px;
  margin: 22px 0 20px;
  font-size: clamp(48px, 5vw, 74px);
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.c8-agbio-hero h1 span { color: #116e64; }
.c8-agbio-hero__copy > p {
  max-width: 610px;
  margin: 0;
  color: #566079;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.68;
}
.c8-agbio-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.c8-agbio-facts span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  color: #253050;
  border: 1px solid rgba(23, 21, 109, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .76);
  font-size: 12px;
  font-weight: 800;
}
.c8-agbio-facts span::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--c8-cyan);
}
.c8-agbio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.c8-agbio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 52px;
  padding: 13px 18px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 850;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.c8-agbio-btn span { font-size: 17px; transition: transform .18s ease; }
.c8-agbio-btn--primary {
  color: #fff;
  border: 1px solid var(--c8-navy);
  background: var(--c8-navy);
  box-shadow: 0 12px 28px rgba(23, 21, 109, .18);
}
.c8-agbio-btn--secondary {
  color: var(--c8-navy);
  border: 1px solid rgba(23, 21, 109, .18);
  background: rgba(255, 255, 255, .78);
}
.c8-agbio-btn:hover,
.c8-agbio-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(16, 25, 76, .16); }
.c8-agbio-btn:hover span,
.c8-agbio-btn:focus-visible span { transform: translateX(3px); }
.c8-agbio-btn:focus-visible { outline: 2px solid var(--c8-cyan); outline-offset: 3px; }
.c8-agbio-hero__visual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-height: 580px;
}
.c8-agbio-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 520px;
  border: 1px solid rgba(23, 21, 109, .12);
  border-radius: 20px;
  background: #10204b;
  box-shadow: 0 24px 56px rgba(15, 27, 70, .16);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.c8-agbio-visual--agro { align-self: start; margin-bottom: 48px; }
.c8-agbio-visual--bio { align-self: end; margin-top: 48px; }
.c8-agbio-visual img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.c8-agbio-visual--agro img { object-position: 56% center; }
.c8-agbio-visual--bio img { object-position: center center; }
.c8-agbio-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 16, 42, .04) 24%, rgba(8, 23, 48, .88) 100%);
}
.c8-agbio-status {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 8px 10px;
  color: #105e55;
  border-radius: 7px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 24px rgba(7, 17, 44, .16);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.c8-agbio-visual__copy {
  position: absolute;
  right: 20px;
  bottom: 22px;
  left: 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 5px 16px;
  color: #fff;
}
.c8-agbio-visual__copy small {
  grid-column: 1;
  color: #85e1d3;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.c8-agbio-visual__copy strong { grid-column: 1; color: #fff; font-size: clamp(25px, 2.2vw, 34px); line-height: 1.05; }
.c8-agbio-visual__copy i { grid-column: 2; grid-row: 1 / span 2; color: #75def1; font-size: 24px; font-style: normal; transition: transform .18s ease; }
.c8-agbio-visual:hover,
.c8-agbio-visual:focus-visible { transform: translateY(-5px); border-color: rgba(0, 174, 217, .55); box-shadow: 0 30px 70px rgba(11, 27, 67, .23); }
.c8-agbio-visual:hover img,
.c8-agbio-visual:focus-visible img { transform: scale(1.035); }
.c8-agbio-visual:hover i,
.c8-agbio-visual:focus-visible i { transform: translateX(4px); }
.c8-agbio-visual:focus-visible { outline: 2px solid var(--c8-cyan); outline-offset: 4px; }
.c8-agbio-jump {
  border-top: 1px solid rgba(23, 21, 109, .08);
  border-bottom: 1px solid rgba(23, 21, 109, .1);
  background: #fff;
}
.c8-agbio-jump .wrap { display: flex; justify-content: center; gap: 8px 36px; min-height: 62px; }
.c8-agbio-jump a {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #27304f;
  font-size: 12px;
  font-weight: 850;
}
.c8-agbio-jump a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 12px;
  left: 0;
  height: 2px;
  background: var(--c8-cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.c8-agbio-jump a:hover::after,
.c8-agbio-jump a:focus-visible::after { transform: scaleX(1); }
.c8-agbio-paths { padding: clamp(78px, 8vw, 118px) 0; background: #fff; }
.c8-agbio-heading { max-width: 850px; }
.c8-agbio-heading > span {
  display: block;
  margin-bottom: 13px;
  color: #0d806f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.c8-agbio-heading h2 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.04;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.c8-agbio-heading p { max-width: 760px; margin: 19px 0 0; color: #5d667d; font-size: 16px; line-height: 1.7; }
.c8-agbio-path-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.c8-agbio-path {
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(220px, .84fr) minmax(0, 1.16fr);
  min-height: 420px;
  border: 1px solid rgba(23, 21, 109, .12);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(17, 27, 74, .1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.c8-agbio-path:hover { transform: translateY(-4px); border-color: rgba(22, 136, 117, .32); box-shadow: 0 26px 58px rgba(17, 27, 74, .15); }
.c8-agbio-path__media { position: relative; min-height: 100%; overflow: hidden; background: #12204b; }
.c8-agbio-path__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(9, 26, 45, .65)); }
.c8-agbio-path__media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.c8-agbio-path--agro .c8-agbio-path__media img { object-position: 57% center; }
.c8-agbio-path__media > span {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  padding: 7px 9px;
  color: #0c6459;
  border-radius: 6px;
  background: rgba(255, 255, 255, .92);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.c8-agbio-path__body { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(28px, 3vw, 38px); }
.c8-agbio-path__body > small { color: #0c806e; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.c8-agbio-path__body h3 { margin: 9px 0 14px; font-size: clamp(27px, 2.4vw, 36px); line-height: 1.05; }
.c8-agbio-path__body p { margin: 0; color: #5b6479; font-size: 14px; line-height: 1.65; }
.c8-agbio-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 21px 0 24px; }
.c8-agbio-tags span { padding: 7px 9px; color: #275047; border: 1px solid #d9e7e3; border-radius: 7px; background: #f4f9f7; font-size: 11px; font-weight: 800; }
.c8-agbio-path__body > a { display: inline-flex; align-items: center; gap: 14px; margin-top: auto; color: #126f63; font-size: 13px; font-weight: 900; }
.c8-agbio-path__body > a span { color: var(--c8-cyan); font-size: 18px; transition: transform .18s ease; }
.c8-agbio-path__body > a:hover span,
.c8-agbio-path__body > a:focus-visible span { transform: translateX(4px); }
.c8-agbio-path__body > a:focus-visible { outline: 2px solid var(--c8-cyan); outline-offset: 4px; }
.c8-agbio-note { max-width: 920px; margin: 28px 0 0; padding-left: 17px; color: #6c7486; border-left: 3px solid var(--c8-cyan); font-size: 13px; line-height: 1.6; }
.c8-agbio-process {
  position: relative;
  padding: clamp(82px, 8vw, 120px) 0;
  color: #fff;
  background:
    radial-gradient(circle at 92% 8%, rgba(0, 174, 217, .24), transparent 30%),
    linear-gradient(135deg, #0e1558 0%, #17156d 60%, #124f69 100%);
}
.c8-agbio-process__layout { display: grid; grid-template-columns: minmax(0, .78fr) minmax(560px, 1.22fr); gap: clamp(46px, 7vw, 98px); align-items: start; }
.c8-agbio-process .c8-agbio-heading > span { color: #76dff3; }
.c8-agbio-process .c8-agbio-heading h2 { color: #fff; }
.c8-agbio-process .c8-agbio-heading p { color: rgba(255, 255, 255, .72); }
.c8-agbio-steps { display: grid; gap: 12px; }
.c8-agbio-step {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 15px;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 14px 34px rgba(4, 8, 40, .12);
}
.c8-agbio-step > span { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: #fff; border: 1px solid rgba(116, 224, 244, .42); border-radius: 12px; background: rgba(0, 174, 217, .17); font-size: 11px; font-weight: 900; }
.c8-agbio-step h3 { margin: 0 0 6px; color: #fff; font-size: 18px; }
.c8-agbio-step p { margin: 0; color: rgba(255, 255, 255, .7); font-size: 13px; line-height: 1.6; }
.c8-agbio-brief { padding: clamp(72px, 7vw, 108px) 0; background: #f3f7fb; }
.c8-agbio-brief__panel {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr);
  gap: clamp(42px, 7vw, 94px);
  align-items: center;
  padding: clamp(38px, 5vw, 68px);
  border: 1px solid rgba(23, 21, 109, .1);
  border-radius: 22px;
  background:
    radial-gradient(circle at 5% 0%, rgba(0, 174, 217, .14), transparent 35%),
    linear-gradient(135deg, #fff 0%, #fbfdfe 62%, #eaf6f3 100%);
  box-shadow: 0 24px 62px rgba(16, 25, 76, .12);
}
.c8-agbio-brief h2 { margin: 18px 0 14px; font-size: clamp(32px, 3.5vw, 48px); line-height: 1.05; letter-spacing: -.04em; }
.c8-agbio-brief p { margin: 0; color: #5d667d; font-size: 15px; line-height: 1.65; }
.c8-agbio-brief ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.c8-agbio-brief li { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 64px; padding: 11px 13px; color: #253050; border: 1px solid rgba(23, 21, 109, .1); border-radius: 11px; background: rgba(255, 255, 255, .8); font-size: 12px; font-weight: 800; }
.c8-agbio-brief li span { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: #087e99; border-radius: 9px; background: #e9f8fb; font-size: 10px; font-weight: 900; }
.c8-agbio-brief li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.c8-agbio-contact .wrap { align-items: center; }

@media (max-width: 1120px) {
  .c8-agbio-hero__grid { grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr); gap: 42px; }
  .c8-agbio-hero__visual { min-height: 520px; }
  .c8-agbio-visual { min-height: 470px; }
  .c8-agbio-path { grid-template-columns: 1fr; }
  .c8-agbio-path__media { min-height: 250px; }
  .c8-agbio-process__layout { grid-template-columns: minmax(0, .78fr) minmax(480px, 1.22fr); gap: 44px; }
}

@media (max-width: 900px) {
  .c8-agbio-hero { padding-top: 46px; }
  .c8-agbio-hero__grid,
  .c8-agbio-process__layout,
  .c8-agbio-brief__panel { grid-template-columns: 1fr; }
  .c8-agbio-hero__copy { max-width: 720px; }
  .c8-agbio-hero h1 { max-width: 760px; }
  .c8-agbio-hero__visual { min-height: 520px; }
  .c8-agbio-visual { min-height: 470px; }
  .c8-agbio-path-grid { grid-template-columns: 1fr; }
  .c8-agbio-path { grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr); }
  .c8-agbio-brief__panel { gap: 30px; }
}

@media (max-width: 620px) {
  .c8-agbio-hero { padding: 36px 0 58px; }
  .c8-agbio-hero h1 { font-size: clamp(39px, 12vw, 54px); }
  .c8-agbio-hero__copy > p { font-size: 15px; }
  .c8-agbio-actions { display: grid; }
  .c8-agbio-btn { width: 100%; }
  .c8-agbio-hero__visual { grid-template-columns: 1fr; min-height: 0; }
  .c8-agbio-visual,
  .c8-agbio-visual--agro,
  .c8-agbio-visual--bio { min-height: 310px; margin: 0; }
  .c8-agbio-visual { border-radius: 14px; }
  .c8-agbio-jump .wrap { justify-content: flex-start; gap: 20px; overflow-x: auto; }
  .c8-agbio-jump a { flex: 0 0 auto; }
  .c8-agbio-paths { padding: 66px 0; }
  .c8-agbio-heading h2 { font-size: 34px; }
  .c8-agbio-path { grid-template-columns: 1fr; border-radius: 14px; }
  .c8-agbio-path__media { min-height: 240px; }
  .c8-agbio-path__body { padding: 25px 22px; }
  .c8-agbio-process { padding: 66px 0; }
  .c8-agbio-step { grid-template-columns: 42px minmax(0, 1fr); gap: 13px; padding: 18px 16px; }
  .c8-agbio-step > span { width: 40px; height: 40px; }
  .c8-agbio-brief { padding: 56px 0; }
  .c8-agbio-brief__panel { padding: 30px 22px; border-radius: 14px; }
  .c8-agbio-brief ol { grid-template-columns: 1fr; }
  .c8-agbio-brief li:last-child:nth-child(odd) { grid-column: auto; }
}

/* Centrum Pomoc / Help. */
.help-c8 { color: var(--c8-ink); }
.help-hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  color: #fff;
  background: #11175d;
}
.help-hero__photo {
  position: absolute;
  inset: 0 0 0 43%;
}
.help-hero__photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.help-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #11175d 0%, rgba(17, 23, 93, .96) 9%, rgba(17, 23, 93, .68) 35%, rgba(17, 23, 93, .12) 76%),
    linear-gradient(180deg, rgba(10, 16, 67, .04), rgba(10, 16, 67, .34));
}
.help-hero .wrap {
  position: relative;
  z-index: 1;
  min-height: inherit;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  gap: clamp(46px, 7vw, 100px);
  align-items: center;
  padding-top: clamp(70px, 7vw, 104px);
  padding-bottom: clamp(70px, 7vw, 104px);
}
.help-hero__copy { max-width: 700px; }
.help-hero .eyebrow { color: #7de5fb; }
.help-hero h1 { max-width: 680px; margin: 14px 0 22px; color: #fff; font-size: clamp(46px, 5vw, 72px); line-height: .98; }
.help-hero__copy > p { max-width: 640px; margin: 0; color: rgba(255, 255, 255, .78); font-size: 18px; line-height: 1.72; }
.help-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.help-hero__actions .btn { min-height: 50px; }
.help-btn-primary { background: #fff; color: var(--c8-navy); border-color: #fff; }
.help-btn-primary:hover { background: #dff8ff; border-color: #dff8ff; }
.help-btn-secondary { color: #fff; border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .04); }
.help-btn-secondary:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .7); }
.help-brief {
  justify-self: end;
  width: min(100%, 420px);
  padding: 30px;
  color: var(--c8-ink);
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 30px 80px rgba(5, 11, 48, .32);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.help-brief__label { color: #087f9f; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.help-brief h2 { margin: 10px 0 22px; font-size: 24px; line-height: 1.18; }
.help-brief ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid #dbe2ee; border-left: 1px solid #dbe2ee; }
.help-brief li { min-height: 82px; padding: 14px; border-right: 1px solid #dbe2ee; border-bottom: 1px solid #dbe2ee; color: #3d465e; font-size: 13px; font-weight: 750; }
.help-brief li span { display: block; margin-bottom: 7px; color: var(--c8-cyan); font-size: 10px; font-weight: 900; }

.help-choices,
.help-routes { padding: clamp(82px, 8vw, 118px) 0; }
.help-section-head { max-width: 760px; }
.help-section-head--wide { max-width: 900px; }
.help-section-head h2 { margin: 8px 0 14px; font-size: clamp(34px, 4vw, 54px); line-height: 1.04; }
.help-section-head p { max-width: 720px; margin: 0; color: #647087; font-size: 16px; line-height: 1.7; }
.help-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.help-choice {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  min-height: 230px;
  padding: 26px 24px;
  border: 1px solid var(--c8-line);
  border-top: 3px solid var(--c8-cyan);
  background: #fff;
  box-shadow: 0 18px 44px rgba(20, 27, 76, .09);
  transition: transform .18s ease, box-shadow .18s ease;
}
.help-choice:hover { transform: translateY(-4px); box-shadow: 0 26px 58px rgba(20, 27, 76, .15); }
.help-choice .help-no { color: var(--c8-cyan); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.help-choice__body { display: flex; flex-direction: column; min-width: 0; }
.help-choice h2 { margin: 0 0 12px; font-size: 22px; line-height: 1.15; }
.help-choice p { margin: 0; color: #616a80; line-height: 1.62; font-size: 14px; }
.help-choice strong { margin-top: auto; padding-top: 22px; color: var(--c8-navy); font-size: 13px; }

.help-steps { padding: clamp(82px, 8vw, 118px) 0; background: #f3f7fb; border-top: 1px solid #e0e6f0; border-bottom: 1px solid #e0e6f0; }
.help-process-layout { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr); gap: clamp(50px, 8vw, 110px); align-items: start; }
.help-steps__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid #cfd8e7; }
.help-step { display: grid; grid-template-columns: 42px 1fr; gap: 16px; min-height: 150px; padding: 26px 24px 26px 0; border-bottom: 1px solid #cfd8e7; }
.help-step:nth-child(odd) { border-right: 1px solid #cfd8e7; }
.help-step:nth-child(even) { padding-left: 24px; }
.help-step .help-no { color: var(--c8-cyan); font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.help-step b { display: block; color: var(--c8-navy); margin: 0 0 8px; font-size: 18px; }
.help-step p { margin: 0; color: #60697f; line-height: 1.58; font-size: 14px; }

.help-route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.help-route { position: relative; min-height: 164px; padding: 24px 52px 22px 22px; overflow: hidden; border: 1px solid var(--c8-line); border-top: 3px solid var(--route-accent, var(--c8-cyan)); background: #fff; transition: transform .18s ease, border-color .18s ease; }
.help-route:nth-child(1) { --route-accent: #242088; }
.help-route:nth-child(2) { --route-accent: #9c2f72; }
.help-route:nth-child(3) { --route-accent: #13826f; }
.help-route:nth-child(4) { --route-accent: #d88a16; }
.help-route:nth-child(5), .help-route:nth-child(6) { --route-accent: #00aed9; }
.help-route:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--route-accent) 42%, #d8dfeb); }
.help-route b { display: block; color: var(--c8-navy); font-size: 18px; line-height: 1.2; }
.help-route small { display: block; color: #6a748b; margin-top: 10px; line-height: 1.55; }
.help-route > span { position: absolute; right: 20px; bottom: 18px; color: var(--route-accent); font-size: 22px; }

.help-faq { padding: clamp(82px, 8vw, 118px) 0; background: #f3f7fb; }
.help-faq-layout { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr); gap: clamp(50px, 8vw, 110px); align-items: start; }
.help-faq__list { border-top: 1px solid #cfd8e7; }
.help-faq details { border-bottom: 1px solid #cfd8e7; background: transparent; }
.help-faq summary { cursor: pointer; padding: 21px 42px 21px 0; color: var(--c8-navy); font-weight: 800; line-height: 1.4; }
.help-faq details p { padding: 0 42px 22px 0; margin: 0; color: #60697f; line-height: 1.68; }

.help-final-cta {
  position: relative;
  padding: 0 0 clamp(72px, 7vw, 104px);
  background: #f3f7fb;
}
.help-final-cta__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 270px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: center;
  gap: clamp(44px, 7vw, 100px);
  padding: clamp(42px, 5vw, 64px);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 20%, rgba(31, 190, 225, .28), transparent 28%),
    linear-gradient(135deg, #111550 0%, #17156c 58%, #243994 100%);
  box-shadow: 0 30px 70px rgba(14, 20, 66, .2);
}
.help-final-cta__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(42px, 5vw, 64px);
  z-index: -1;
  width: 78px;
  height: 4px;
  background: #35cce9;
}
.help-final-cta__panel::after {
  content: "";
  position: absolute;
  right: -105px;
  bottom: -145px;
  z-index: -1;
  width: 340px;
  height: 340px;
  border: 1px solid rgba(100, 220, 243, .16);
  border-radius: 50%;
  box-shadow: 0 0 0 46px rgba(100, 220, 243, .045), 0 0 0 92px rgba(100, 220, 243, .025);
}
.help-final-cta__copy { max-width: 730px; }
.help-final-cta__kicker {
  display: block;
  margin-bottom: 14px;
  color: #71e2f7;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
}
.help-final-cta h2 {
  max-width: 690px;
  margin: 0;
  color: #fff;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.help-final-cta p {
  max-width: 670px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .74);
  font-size: 15.5px;
  line-height: 1.65;
}
.help-final-cta__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 11px;
}
.help-final-cta__primary,
.help-final-cta__secondary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 54px;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 850;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.help-final-cta__primary {
  color: var(--c8-navy);
  border: 1px solid #fff;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(8, 12, 45, .2);
}
.help-final-cta__secondary {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 11px;
  background: rgba(255, 255, 255, .06);
}
.help-final-cta__primary span,
.help-final-cta__secondary span { color: #0b99bc; font-size: 17px; transition: transform .18s ease; }
.help-final-cta__secondary span { color: #71e2f7; }
.help-final-cta__primary:hover,
.help-final-cta__primary:focus-visible { background: #e9faff; border-color: #e9faff; transform: translateY(-2px); }
.help-final-cta__secondary:hover,
.help-final-cta__secondary:focus-visible { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); transform: translateY(-2px); }
.help-final-cta__primary:hover span,
.help-final-cta__primary:focus-visible span,
.help-final-cta__secondary:hover span,
.help-final-cta__secondary:focus-visible span { transform: translateX(4px); }
.help-final-cta__primary:focus-visible,
.help-final-cta__secondary:focus-visible { outline: 2px solid #71e2f7; outline-offset: 3px; }

@media (max-width: 900px) {
  .help-hero { min-height: auto; }
  .help-hero__photo { inset: 0; }
  .help-hero__photo::after { background: linear-gradient(180deg, rgba(17, 23, 93, .92), rgba(17, 23, 93, .82)); }
  .help-hero .wrap { grid-template-columns: 1fr; gap: 36px; padding-top: 72px; padding-bottom: 72px; }
  .help-brief { justify-self: start; }
  .help-process-layout,
  .help-faq-layout { grid-template-columns: 1fr; gap: 40px; }
  .help-final-cta__panel { grid-template-columns: 1fr; gap: 32px; }
  .help-final-cta__actions { width: min(100%, 420px); }
}
@media (max-width: 620px) {
  .help-hero h1 { font-size: clamp(38px, 11vw, 52px); }
  .help-hero__actions { flex-direction: column; align-items: stretch; }
  .help-hero__actions .btn { justify-content: center; }
  .help-brief { padding: 22px; }
  .help-brief ol { grid-template-columns: 1fr; }
  .help-brief li { min-height: 60px; }
  .help-choice { grid-template-columns: 36px 1fr; min-height: 0; padding: 22px 18px; }
  .help-step,
  .help-step:nth-child(even) { grid-template-columns: 36px 1fr; min-height: 0; padding: 22px 0; border-right: 0; }
  .help-route { min-height: 145px; }
  .help-final-cta { padding-bottom: 52px; }
  .help-final-cta__panel { padding: 34px 24px; border-radius: 14px; }
  .help-final-cta__panel::before { left: 24px; }
  .help-final-cta h2 { font-size: 32px; }
}

/* O firmie — narracja oparta na realnym łańcuchu i dowodach. */
.about-c8 { color: var(--c8-ink); }
.about-c8 .about-hero {
  position: relative;
  min-height: 650px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #11184f;
}
.about-c8 .about-hero__media,
.about-c8 .about-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.about-c8 .about-hero__media img { object-fit: cover; }
.about-c8 .about-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12, 18, 66, .92), rgba(12, 18, 66, .66) 48%, rgba(12, 18, 66, .14));
}
.about-c8 .about-hero .wrap { position: relative; z-index: 2; width: 100%; }
.about-c8 .about-hero__card { max-width: 700px; color: #fff; }
.about-c8 .about-hero h1 { color: #fff; margin: 12px 0 20px; max-width: 680px; }
.about-c8 .about-hero p { color: rgba(255, 255, 255, .84); font-size: 18px; line-height: 1.7; max-width: 650px; }
.about-c8 .about-hero__facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.about-c8 .about-hero__facts span { padding: 9px 12px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .09); font-size: 13px; font-weight: 750; }
.about-c8 .about-section { padding: clamp(76px, 8vw, 116px) 0; }
.about-c8 .about-intro-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 58px; align-items: center; }
.about-c8 .about-copy p { color: #5e677f; font-size: 17px; line-height: 1.75; }
.about-c8 .supply-figure { margin: 0; padding: 20px; border-radius: 24px; background: #fff; border: 1px solid var(--c8-line); box-shadow: var(--c8-shadow); }
.about-c8 .supply-figure img { display: block; width: 100%; height: auto; border-radius: 16px; }
.about-c8 .supply-figure figcaption { margin: 13px 5px 0; color: #6e768d; font-size: 13px; }
.about-c8 .about-process { background: #f4f7fb; }
.about-c8 .about-process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.about-c8 .about-process-card { overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid var(--c8-line); }
.about-c8 .about-process-card img { width: 100%; height: 170px; object-fit: cover; display: block; }
.about-c8 .about-process-card div { padding: 20px; }
.about-c8 .about-process-card b { color: var(--c8-navy); }
.about-c8 .about-process-card p { color: #626b82; font-size: 14px; line-height: 1.55; }
.about-c8 .about-lab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.about-c8 .about-lab-grid img { width: 100%; min-height: 440px; object-fit: cover; border-radius: 24px; box-shadow: var(--c8-shadow); }
.about-c8 .about-points { display: grid; gap: 12px; margin-top: 25px; }
.about-c8 .about-point { padding: 17px 18px; border-left: 4px solid var(--c8-cyan); border-radius: 0 13px 13px 0; background: #f3f8fc; }
.about-c8 .about-ops { background: linear-gradient(135deg, #141268, #263894); color: #fff; }
.about-c8 .about-ops h2 { color: #fff; }
.about-c8 .about-ops-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.about-c8 .about-op { padding: 25px; border-radius: 17px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.about-c8 .about-op b { display: block; color: #fff; font-size: 18px; margin-bottom: 8px; }
.about-c8 .about-op p { color: rgba(255, 255, 255, .76); margin: 0; line-height: 1.6; }

/* O firmie: dopracowane przejscie od ciemnej sekcji do stopki. */
.about-c8 .about-final-cta {
  position: relative;
  padding: 0 0 clamp(68px, 7vw, 96px);
  background: #f3f7fb;
}
.about-c8 .about-final-cta__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 248px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 310px);
  align-items: center;
  gap: clamp(38px, 5vw, 76px);
  padding: clamp(42px, 5vw, 64px);
  border: 1px solid rgba(16, 24, 80, .1);
  border-radius: 22px;
  background:
    radial-gradient(circle at 6% 5%, rgba(42, 201, 232, .2), transparent 32%),
    linear-gradient(135deg, #fff 0%, #f7fbfd 62%, #e9f7fb 100%);
  box-shadow: 0 28px 72px rgba(14, 22, 70, .18);
  transform: translateY(-54px);
  margin-bottom: -54px;
}
.about-c8 .about-final-cta__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(42px, 5vw, 64px);
  width: 76px;
  height: 4px;
  background: var(--c8-cyan);
}
.about-c8 .about-final-cta__panel::after {
  content: "";
  position: absolute;
  right: -125px;
  bottom: -190px;
  z-index: -1;
  width: 390px;
  height: 390px;
  border: 1px solid rgba(0, 174, 217, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(0, 174, 217, .045), 0 0 0 96px rgba(0, 174, 217, .025);
}
.about-c8 .about-final-cta__copy { max-width: 760px; }
.about-c8 .about-final-cta__kicker {
  display: block;
  margin-bottom: 13px;
  color: #087f9f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.about-c8 .about-final-cta h2 {
  max-width: 700px;
  margin: 0;
  color: var(--c8-navy);
  font-size: clamp(32px, 3.5vw, 48px);
  line-height: 1.05;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.about-c8 .about-final-cta p {
  max-width: 680px;
  margin: 18px 0 0;
  color: #5f687d;
  font-size: 15.5px;
  line-height: 1.65;
}
.about-c8 .about-final-cta__actions {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 11px;
}
.about-c8 .about-final-cta__primary,
.about-c8 .about-final-cta__secondary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 56px;
  padding: 14px 18px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 850;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.about-c8 .about-final-cta__primary {
  color: #fff;
  border: 1px solid var(--c8-navy);
  background: var(--c8-navy);
  box-shadow: 0 12px 26px rgba(18, 20, 91, .2);
}
.about-c8 .about-final-cta__secondary {
  color: var(--c8-navy);
  border: 1px solid rgba(23, 21, 109, .18);
  background: rgba(255, 255, 255, .72);
}
.about-c8 .about-final-cta__primary span { color: #70e1f7; font-size: 17px; transition: transform .18s ease; }
.about-c8 .about-final-cta__secondary span { color: #0b95b7; font-size: 17px; transition: transform .18s ease; }
.about-c8 .about-final-cta__primary:hover,
.about-c8 .about-final-cta__primary:focus-visible {
  background: #24228a;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(18, 20, 91, .25);
}
.about-c8 .about-final-cta__secondary:hover,
.about-c8 .about-final-cta__secondary:focus-visible {
  border-color: rgba(0, 174, 217, .48);
  background: #fff;
  transform: translateY(-2px);
}
.about-c8 .about-final-cta__primary:hover span,
.about-c8 .about-final-cta__primary:focus-visible span,
.about-c8 .about-final-cta__secondary:hover span,
.about-c8 .about-final-cta__secondary:focus-visible span { transform: translateX(4px); }
.about-c8 .about-final-cta__primary:focus-visible,
.about-c8 .about-final-cta__secondary:focus-visible { outline: 2px solid var(--c8-cyan); outline-offset: 3px; }

@media (max-width: 900px) {
  .about-c8 .about-final-cta__panel {
    grid-template-columns: 1fr;
    gap: 30px;
    transform: translateY(-36px);
    margin-bottom: -36px;
  }
  .about-c8 .about-final-cta__actions { width: min(100%, 420px); }
}

@media (max-width: 620px) {
  .about-c8 .about-final-cta { padding-bottom: 52px; }
  .about-c8 .about-final-cta__panel { padding: 34px 24px; border-radius: 14px; }
  .about-c8 .about-final-cta__panel::before { left: 24px; }
  .about-c8 .about-final-cta h2 { font-size: 32px; }
}

/* Kontakt: krótsze role i spokojniejszy blok danych rejestrowych. */
.kteam .kspoc .scope { line-height: 1.65; }
.kteam .av.c8-initials { color: #fff; font-weight: 900; letter-spacing: .04em; }
.ktrust.c8-register-only { max-width: 920px; margin: 0 auto; }
.ktrust.c8-register-only .kreg { margin-top: 26px; }

@media (max-width: 1180px) {
  .nav-cta .contact-cta { padding: 0 12px; }
  .c8-app-menu__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .c8-app-menu-card { min-height: 190px; }
  .mega-app.c8-app-menu { max-height: calc(100vh - 150px); overflow-y: auto; }
  body:has(.hero-split) .hero-split .panel-inner { width: min(768px, 68vw); margin-left: clamp(20px, 2.3vw, 28px) !important; }
  .c8-evidence__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .nav-cta .as { display: none; }
  .nav-cta .contact-cta { min-height: 40px; font-size: 12px; border-radius: 11px; }
  .c8-applications .use { min-height: 260px; }
  body:has(.hero-split) .hero-split { min-height: 720px; }
  body:has(.hero-split) .hero-split .panel { width: min(100% - 28px, 720px); align-items: flex-end; padding: 40px 0 78px; }
  body:has(.hero-split) .hero-split .panel-inner { width: 100%; margin-left: 0 !important; padding: 28px !important; border-radius: 0; }
  body:has(.hero-split) .hero-split .photo::before { background: linear-gradient(180deg, rgba(10, 18, 55, .08), rgba(12, 19, 60, .18) 45%, rgba(232, 245, 251, .9) 78%, rgba(240, 248, 252, .96)); }
  body:has(.hero-split) .hero-split .hero-slide img {
    width: 100% !important;
    object-position: center center !important;
    -webkit-mask-image: none;
    mask-image: none;
  }
  body:has(.hero-split) .hero-split .hero-slide::before { display: none; }
  body:has(.hero-split) .hero-split .caption { right: 16px; bottom: 62px; }
  body:has(.hero-split) .hero-split .hero-controls { right: 16px; bottom: 18px; }
  .c8-evidence .c8-evidence__head,
  .about-c8 .about-intro-grid,
  .about-c8 .about-lab-grid { grid-template-columns: 1fr; gap: 32px; }
  .c8-evidence .wrap { grid-template-columns: 1fr; gap: 42px; }
  .c8-evidence__head { max-width: 680px; }
  .help-choice-grid,
  .help-route-grid { grid-template-columns: 1fr; }
  .help-steps__grid,
  .about-c8 .about-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-c8 .about-ops-grid { grid-template-columns: 1fr; }
  .application-page .apphero2__card { bottom: 28px !important; }
}

@media (max-width: 620px) {
  /* Kompaktowa pigulka Kontakt: font-size:0 zwija niewidoczny tekst "Kontakt"
     (inaczej rozpycha pigulke i "@" wypada poza overflow:hidden — bylo puste). */
  .nav-cta .contact-cta { width: 42px; padding: 0; overflow: hidden; gap: 0; font-size: 0; }
  .nav-cta .contact-cta::before { content: ""; width: 22px; height: 18px; background-color: var(--c8-navy); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") center/contain no-repeat; display: inline-block; }
  .nav-cta .contact-cta::after { display: none; }
  body:has(.hero-split) .hero-split { min-height: 700px; }
  body:has(.hero-split) .hero-split .panel h1 { font-size: clamp(36px, 10vw, 48px) !important; }
  .c8-hero-specialties { grid-template-columns: 1fr; }
  .c8-hero-specialties a { min-height: 48px; padding: 9px 14px 9px 20px; border-right: 0; border-bottom: 1px solid rgba(21, 20, 95, .1); }
  .c8-hero-specialties a:last-child { border-bottom: 0; }
  .c8-hero-specialties a::before { left: 8px; top: 15px; }
  body:has(.hero-split) .hero-split .caption { right: 14px; bottom: 14px; }
  body:has(.hero-split) .hero-split .hero-controls { top: 14px; right: 14px; bottom: auto; }
  .c8-evidence__grid,
  .help-steps__grid,
  .about-c8 .about-process-grid { grid-template-columns: 1fr; }
  .c8-cert-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c8-cert-row a:nth-child(2) { border-right: 0; }
  .c8-cert-row a:nth-child(-n+2) { border-bottom: 1px solid rgba(21, 20, 95, .1); }
  .category-jump .wrap,
  .application-jump .wrap { gap: 12px !important; }
  .about-c8 .about-hero { min-height: 680px; align-items: flex-end; padding-bottom: 52px; }
  .about-c8 .about-hero__media::after { background: linear-gradient(180deg, rgba(10, 17, 57, .18), rgba(10, 17, 57, .9) 62%); }
  .about-c8 .about-lab-grid img { min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  body:has(.hero-split) .hero-split .hero-slide { clip-path: none !important; transition: opacity .15s linear !important; transform: none !important; }
  body:has(.hero-split) .hero-split .photo.is-transitioning::after { animation: none !important; }
}

/* ============================================================
   ZADANIE: kafelki LINII PRODUKTOWYCH (.pcard) w tym samym stylu,
   co kafelki ZASTOSOWAN (.apc) — kolorowy pasek rodziny u gory,
   spojne obramowanie, etykieta i przyciski w kolorze rodziny.
   Kolor bierze sie z rodziny strony (--category-accent* juz istnieja).
   ============================================================ */
/* Jasniejszy, towarzyszacy kolor do gradientu paska — per rodzina
   (dokladnie jak drugi kolor akcentu w kafelkach .apc). */
.category-page--turicoll { --category-accent-2: #00aed9; }
.category-page--turiker  { --category-accent-2: #c0568a; }
.category-page--turipro  { --category-accent-2: #51ad8c; }
.category-page--turigel  { --category-accent-2: #efad4f; }
.category-page--agro     { --category-accent-2: #8fd6a6; }
.category-page--bio      { --category-accent-2: #c7d47a; }

.category-products .pcard {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--category-deep) 14%, transparent) !important;
}
/* Kolorowy pasek rodziny — przyciety do zaokraglenia karty przez overflow. */
.category-products .pcard::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--category-accent),
    var(--category-accent-2, var(--category-accent)));
}
.category-products .pcard:hover {
  border-color: color-mix(in srgb, var(--category-accent) 48%, transparent) !important;
}
/* Etykieta kategorii i nazwa produktu w kolorze rodziny (zamiast stalego wina). */
.category-products .pcard .ln { color: var(--category-deep) !important; }
.category-products .pcard h3 a { color: var(--category-deep) !important; }
.category-products .pcard h3 a:hover { color: var(--category-accent) !important; }
/* Przyciski w kolorze rodziny — glowny wypelniony, pozostale z obrysem. */
.category-products .pcard .acts a:first-child {
  background: var(--category-deep) !important;
  border-color: var(--category-deep) !important;
}
.category-products .pcard .acts a:first-child:hover {
  background: var(--category-accent-dark) !important;
  border-color: var(--category-accent-dark) !important;
}
.category-products .pcard .acts a:hover { border-color: var(--category-accent) !important; }

/* ============================================================
   NAPRAWA: JEDNOLITY pasek akcentu 4px na KAZDEJ karcie hero
   zastosowan. Wczesniej byl niespojny: strony z inline ::before
   (zywnosc, stawy) mialy podwojny pasek + „uszy" w rogach, a
   strony bez ::before (sport, uroda, pet-food, rolnictwo) mialy
   akcent tylko z grubej border-top:4px. Uzywamy inset box-shadow
   — respektuje border-radius (bez „uszu"), nie zalezy od pseudo-
   elementu ani pozycjonowania, wiec WSZYSTKIE 6 stron wyglada tak
   samo. Stary ::before wylaczamy, gruba ramke scieramy do 1px.
   ============================================================ */
.application-page .apphero2__card,
.application-page .apphero2-card {
  border-top-width: 0 !important;     /* pasek siega samej gory; bez „uszu" od grubej ramki */
  background-image: linear-gradient(var(--app-accent), var(--app-accent)) !important;
  background-repeat: no-repeat !important;
  background-position: top !important;
  background-size: 100% 4px !important;   /* rowny 4px pasek, przyciety DOKLADNIE do zaokraglenia karty */
  box-shadow: 0 26px 64px rgba(12, 21, 67, .18) !important;
}
.application-page .apphero2__card::before,
.application-page .apphero2-card::before {
  display: none !important;           /* stary, niespojny pasek — pasek robi teraz gradient tla */
}

/* ============================================================
   NAPRAWA: spojne podswietlenie kafli rodzin (#rodziny).
   Prostokatne .fam dawaly na hover TWARDY pierscien 2px, a skosne
   segmenty .ksplit tylko uniesienie + miekki cien — stad „inaczej
   sie podswietlaly". Hover MYSZA ujednolicamy do wspolnego jezyka:
   uniesienie (transform zostaje z reguly bazowej) + miekki cien +
   delikatny akcent ramki, BEZ twardego pierscienia.
   Fokus z KLAWIATURY zachowuje wyrazny pierscien (dostepnosc).
   ============================================================ */
#rodziny .fam:hover {
  border-color: color-mix(in srgb, var(--fc) 40%, transparent);
  box-shadow:
    0 30px 68px rgba(15, 20, 66, .23),
    0 10px 24px rgba(15, 20, 66, .1);
}

/* ============================================================
   Dopisek (eyebrow) w hero glownej — byl brzydki: biala pigulka
   z cienka ramka „plywala" na jasnej karcie, niski kontrast tekstu.
   Robimy ugruntowany, markowy chip: miekkie tlo w kolorze marki,
   GRANATOWY tekst (mocny kontrast), subtelna ramka, bez plywajacego
   cienia. Zmiana tylko w CSS -> identycznie w PL/EN/DE.
   ============================================================ */
.panel-inner .badge {
  background: linear-gradient(180deg, rgba(0, 174, 217, .12), rgba(0, 174, 217, .06)) !important;
  border: 1px solid rgba(0, 174, 217, .22) !important;
  color: #17156d !important;                 /* granat marki — mocny kontrast zamiast bladego cyjanu */
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: .012em !important;
  padding: 8px 16px 8px 13px !important;
  box-shadow: none !important;               /* koniec z „plywaniem" */
}
.panel-inner .badge .dot {
  background: var(--cyan, #00aed9) !important;
  box-shadow: 0 0 0 3px rgba(0, 174, 217, .16) !important;   /* delikatna aureola zamiast pulsu */
}

/* ============================================================
   TEST (24.07): karta informacyjna hero glownej „zlewa sie" z tlem
   na BOKACH. Tlo/ramka/cien/rozmycie przeniesione na warstwe ::before
   i wyplowione maska gradientowa (lewy + prawy brzeg -> przezroczyste,
   srodek pelny). Tekst (dzieci .panel-inner) NIE jest maskowany, wiec
   nie blednie. Latwe do cofniecia (usun ten blok).
   ============================================================ */
.panel-inner {
  position: relative;
  z-index: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.panel-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 0 0, rgba(187, 239, 250, .56), transparent 44%),
    linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(241, 248, 253, .82));
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: 0 28px 70px rgba(15, 22, 72, .2);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%);
}

/* ============================================================
   TEST 4K/5K: caly uklad ograniczony do 2560px i wycentrowany.
   Powyzej 2560px pojawiaja sie neutralne marginesy zamiast
   rozjezdzania sie tresci na wysepki. Latwe do cofniecia.
   ============================================================ */
@media (min-width: 2561px) {
  html { background: #e9edf4; }
  body { max-width: 2560px; margin-inline: auto; box-shadow: 0 0 0 1px rgba(20,25,60,.06); }
}

/* ============================================================
   NAPRAWA przepelnienia nawigacji (ucinany Kontakt/koszyk).
   W ciasnych pasmach szerokosci (m.in. 4K przy skalowaniu Windows
   ~250%% => ~1536px CSS, oraz laptopy 1100-1500px) 6 pozycji menu
   + wyszukiwarka + Kontakt sie nie miescily. Tu delikatnie malej
   czcionke, zwezamy wyszukiwarke i odstepy, zeby ZAWSZE sie miescilo.
   Na szerokich ekranach menu zostaje duze (18px).
   ============================================================ */
@media (min-width: 1041px) and (max-width: 1500px) {
  header.nav nav.main > a,
  header.nav nav.main > .hasmega > a,
  header.nav nav.main > .hasdrop > a { font-size: 15px !important; }
  header.nav nav.main { gap: 14px !important; }
  header.nav .nav-cta .as-input { width: 64px !important; min-width: 0 !important; }
}
@media (min-width: 1501px) and (max-width: 1720px) {
  header.nav nav.main > a,
  header.nav nav.main > .hasmega > a,
  header.nav nav.main > .hasdrop > a { font-size: 16px !important; }
  header.nav nav.main { gap: 20px !important; }
  header.nav .nav-cta .as-input { width: 110px !important; min-width: 0 !important; }
}

/* ============================================================
   Strony pojedynczych produktow (.pdp) dziedzicza kolor RODZINY
   (jak strony linii): przyciski, eyebrow, naglowek specyfikacji,
   chipy i dolne CTA w kolorze rodziny zamiast generycznego granatu.
   Stopka pozostaje wspolna (granat). Klasa rodziny na <body>.
   ============================================================ */
/* --category-navy/-deep: aby wstega TurEssence (logo ::after) na PRODUKTACH dziedziczyla
   kolor swojej linii — te same wartosci co strony linii (concept8.css ~1433-1460),
   inaczej produkt spada do domyslnego granatu. */
.pdp--turicoll { --fam-accent:#2b3a9e; --fam-deep:#202c87; --fam-dark:#1a2570; --fam-mist:#eef1ff; --category-navy:#11195d; --category-deep:#202c87; }
.pdp--turiker  { --fam-accent:#8e2f6d; --fam-deep:#6d2054; --fam-dark:#571842; --fam-mist:#fbf0f7; --category-navy:#3b1232; --category-deep:#6d2054; }
.pdp--turipro  { --fam-accent:#0f855f; --fam-deep:#0b694c; --fam-dark:#08543c; --fam-mist:#edf8f3; --category-navy:#073d31; --category-deep:#0b694c; }
.pdp--turigel  { --fam-accent:#d9821c; --fam-deep:#9b530a; --fam-dark:#7d4308; --fam-mist:#fff4e5; --category-navy:#663807; --category-deep:#9b530a; }

/* Eyebrow nad nazwa produktu */
.pdp .phero .cat { color: var(--fam-accent) !important; }
/* Przyciski glowne w kolorze rodziny */
.pdp .btn-primary {
  background: var(--fam-deep) !important;
  border-color: var(--fam-deep) !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--fam-deep) 28%, transparent) !important;
}
.pdp .btn-primary:hover { background: var(--fam-dark) !important; }
/* Naglowek karty specyfikacji */
.pdp .spec-card .h { background: var(--fam-deep) !important; }
/* Chipy zastosowan w hero */
.pdp .uses span { color: var(--fam-deep) !important; }
.pdp .uses span svg { color: var(--fam-accent) !important; }
/* Dolna sekcja CTA (band) */
.pdp .band { background: var(--fam-deep) !important; }
.pdp .band .btn-primary {
  background: #fff !important;
  color: var(--fam-deep) !important;
  border-color: #fff !important;
  box-shadow: 0 6px 18px rgba(8, 20, 60, .22) !important;
}
.pdp .band .btn-primary:hover { background: var(--fam-mist) !important; }

/* 2026-07-27 ZADANIA/STRONA: ukryj numeracje 01-06 w kafelkach hero Dobor wedlug zastosowania. */
.c8-applications .use .c8-use-number{display:none !important;}

/* 2026-07-27 FIX megamenu zastosowan: 3x2 grid + realne tlo (inline background-image zamiast buggy var(--am)/::before). */
.mega-app.c8-app-menu .c8-app-menu__grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
.mega-app.c8-app-menu .c8-app-menu-card{background-size:cover !important;background-position:center !important}
.mega-app.c8-app-menu .c8-app-menu-card::before{display:none !important}

/* 2026-07-27 ZADANIA/STRONA: koszyk - info o wielkosci probek + CTA kontakt. */
.koszinfo{margin:10px 0 2px;padding:12px 14px;border:1px solid var(--line,#e6e7ef);border-radius:10px;background:var(--soft,#f6f7fb);font-size:13px;line-height:1.55;color:var(--text-muted,#5a5f73)}
.koszinfo p{margin:0}
.koszinfo p+p{margin-top:7px}
.koszinfo strong{color:var(--navy,#17156d)}
.koszinfo a{color:var(--wine,#b23a48);font-weight:700}

/* ============================================================
   2026-07-27 ZADANIA/STRONA — MOBILE (<=600px) hero-split:
   stack pionowy — widoczne pasmo zdjecia (z animacja slajdow) na
   gorze + zwarta karta tekstowa pod spodem; hero miesci sie na
   jednym ekranie. Nadpisuje overlay (.photo position:absolute).
   ============================================================ */
@media (max-width: 600px) {
  body:has(.hero-split) .hero-split { height: auto !important; min-height: 0 !important; }
  body:has(.hero-split) .hero-split .hs-grid { display: flex !important; flex-direction: column !important; }

  /* pasmo zdjecia — realny, w pelni widoczny obraz z animacja pan/zoom */
  body:has(.hero-split) .hero-split .photo {
    position: relative !important;
    inset: auto !important;
    order: -1;
    width: 100% !important;
    height: clamp(206px, 40vh, 258px) !important;
    min-height: 0 !important;
    z-index: 0;
  }
  body:has(.hero-split) .hero-split .hero-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 32% !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  /* zdjecie zostaje widoczne: brak wybielajacego fade, tylko delikatny scrim u dolu pod caption */
  body:has(.hero-split) .hero-split .photo::before {
    background: linear-gradient(180deg, rgba(8, 15, 46, 0) 50%, rgba(8, 15, 46, .5) 100%) !important;
  }

  /* karta tekstowa pod zdjeciem — na bialym, zwarta */
  body:has(.hero-split) .hero-split .panel {
    position: relative !important;
    z-index: 1;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 22px 20px 26px !important;
    display: block !important;
    background: #fff !important;
    pointer-events: auto !important;
    min-height: 0 !important;
  }
  body:has(.hero-split) .hero-split .panel-inner {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body:has(.hero-split) .hero-split .panel h1 {
    font-size: clamp(26px, 7.2vw, 32px) !important;
    line-height: 1.14 !important;
    margin: 0 0 13px !important;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  body:has(.hero-split) .hero-split .panel .lead {
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin: 0 0 16px !important;
  }
  body:has(.hero-split) .hero-split .c8-hero-specialties { margin: 0 0 16px !important; }
  body:has(.hero-split) .hero-split .cta { margin: 0 !important; }
  body:has(.hero-split) .hero-split .cta .btn { width: 100%; justify-content: center; }

  /* caption + kropki nawigacji na dolnym scrimie pasma zdjecia */
  body:has(.hero-split) .hero-split .caption { left: 14px !important; right: auto !important; top: auto !important; bottom: 12px !important; }
  body:has(.hero-split) .hero-split .hero-controls { right: 14px !important; left: auto !important; top: auto !important; bottom: 12px !important; }
}

/* ============================================================
   2026-07-27 ZADANIA/STRONA — plynne wysuwanie menu z burgera.
   Drawer (html.nav-open nav.main) pojawial sie skokowo (display:flex).
   Dodajemy slide-down + fade przy kazdym otwarciu (animacja startuje
   gdy element staje sie display:flex), z lekkim stagger na pozycjach.
   ============================================================ */
/* fix9 / FAZA C1 (a): plynniejsze, bardziej "aplikacyjne" wejscie drawera —
   wsuniecie z prawej + fade + mikro-skala, easing typu ease-out-expo
   (szybki start, miekkie dojscie), pozycje wchodza kaskadowo. */
html.nav-open nav.main {
  animation: navDrawerIn .42s cubic-bezier(.16, .84, .24, 1) both;
  transform-origin: top right;
  will-change: transform, opacity;
  backface-visibility: hidden;
  box-shadow: 0 28px 56px rgba(13, 17, 58, .28) !important;
}
html.nav-open nav.main > a,
html.nav-open nav.main > .hasdrop,
html.nav-open nav.main > .hasmega,
html.nav-open nav.main > .c8-help-link,
html.nav-open nav.main > .as {
  animation: navDrawerItemIn .38s cubic-bezier(.16, .84, .24, 1) both;
}
html.nav-open nav.main > *:nth-child(1) { animation-delay: .06s; }
html.nav-open nav.main > *:nth-child(2) { animation-delay: .095s; }
html.nav-open nav.main > *:nth-child(3) { animation-delay: .13s; }
html.nav-open nav.main > *:nth-child(4) { animation-delay: .165s; }
html.nav-open nav.main > *:nth-child(5) { animation-delay: .20s; }
html.nav-open nav.main > *:nth-child(6) { animation-delay: .235s; }
html.nav-open nav.main > *:nth-child(7) { animation-delay: .27s; }
html.nav-open nav.main > *:nth-child(8) { animation-delay: .30s; }
@keyframes navDrawerIn {
  from { opacity: 0; transform: translate3d(34px, -6px, 0) scale(.985); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes navDrawerItemIn {
  from { opacity: 0; transform: translate3d(26px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes navScrimIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html.nav-open nav.main,
  html.nav-open nav.main > * { animation: none !important; }
  html.nav-open body::after { animation: none !important; }
}

/* ============================================================
   2026-07-27 fix9 / FAZA C1 (b) — drawer POD doczepianym menu (BUG).
   Przyczyna: nav.main jest DZIECKIEM header.nav, ktory ma
   position:sticky + z-index:40, czyli wlasny stacking context.
   Zaden z-index drawera (styles.css: 39) nie przebije sticky paska
   .category-jump / .application-jump (z-index:48 !important), bo caly
   header stoi nizej w drzewie warstw. Dlatego na czas otwarcia drawera
   podnosimy CALY header + topbar i dodatkowo zbijamy doczepiane menu.
   Wartosci < 200, zeby nie przykryc .carttoast (200) ani .modal (100)
   przy zamknietym menu — reguly dzialaja tylko z klasa html.nav-open.
   ============================================================ */
@media (max-width: 1040px) {
  html.nav-open .topbar { z-index: 141 !important; }
  html.nav-open header.nav { z-index: 140 !important; }
  html.nav-open nav.main { z-index: 5 !important; }

  /* doczepiane menu linii/zastosowan schodzi pod drawer */
  html.nav-open .category-jump,
  html.nav-open .application-jump,
  html.nav-open .c8-sticky-cta,
  html.nav-open .pdp-sticky { z-index: 1 !important; }

  /* drawer domyka sie dokladnie pod naglowkiem (topbar 34 + nav 86) */
  html.nav-open nav.main {
    top: 120px !important;
    max-height: calc(100dvh - 120px) !important;
    overscroll-behavior: contain;
  }

  /* przyciemnienie tresci pod drawerem — czytelniejsze menu, glebia.
     pointer-events:none => nie zmienia zachowania klikniec. */
  html.nav-open body::after {
    content: "";
    position: fixed;
    inset: 120px 0 0;
    z-index: 60;
    background: rgba(9, 13, 44, .46);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    pointer-events: none;
    animation: navScrimIn .3s ease both;
  }
}

/* ============================================================
   2026-07-27 fix9 / FAZA C2 — TOPBAR: jednolita typografia na KAZDEJ
   stronie. Przyczyna roznic: index.html (i pozostale strony "konceptowe")
   maja wlasny, wbudowany <style> z fontem 'Plus Jakarta Sans' oraz
   .topbar .lang a{font-size:12px}, a podstrony (kontakt, o-firmie, ...)
   ladują assets/styles.css, gdzie body ma font 'Inter', a .lang a nie ma
   font-size (dziedziczy 13.5px). Efekt: PL/EN/DE i mail mialy inny kroj
   ORAZ inna wielkosc. Ustalamy jeden wzorzec (wersja ze strony glownej)
   w pliku ladowanym jako OSTATNI.
   ============================================================ */
.topbar,
.topbar .wrap,
.topbar .l,
.topbar .r,
.topbar .lang,
.topbar .topic-ticker {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
}
.topbar .r {
  display: flex;
  align-items: center;
  gap: 22px;
}
.topbar .r > a {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  opacity: .9;
}
.topbar .r > a:hover,
.topbar .r > a:focus-visible { opacity: 1; }
.topbar .lang {
  display: flex;
  align-items: center;
  gap: 3px;
}
.topbar .lang a {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .02em;
  padding: 1px 7px;
  border-radius: 5px;
  opacity: .85;
}
.topbar .lang a:hover,
.topbar .lang a:focus-visible { opacity: 1; }
.topbar .lang a.on {
  background: #fff;
  color: var(--navy, #17156d);
  font-weight: 700;
  opacity: 1;
}
/* mobile: zachowujemy dotychczasowe zmniejszenie z assets/styles.css */
@media (max-width: 600px) {
  .topbar .r { gap: 12px; }
  .topbar .r > a { font-size: 12px; }
  .topbar .lang a { font-size: 11.5px; padding: 1px 6px; }
}

/* ============================================================
   2026-07-27 ZADANIA/STRONA — i18n reflow (bezpieczne fixy).
   Dlugie zlozenia niemieckie (Nahrungsergaenzung, Proteinanreicherung,
   Tiergesundheit...) nie moga wychodzic poza karty/naglowki.
   overflow-wrap:break-word = twardy fallback, hyphens:auto = ladny
   podzial gdy html[lang] to obsluguje. NIE ruszamy szerokosci (--maxw).
   ============================================================ */
.c8-applications .use h4,
.c8-applications .use p,
#zastosowania .use h4,
#zastosowania .use p,
.c8-app-menu-card__copy > b,
.c8-app-menu-card__copy > small,
.hero-split h1,
.hero-split .lead,
.help-hero h1,
.apphero2__title,
.category-page .lsplit__h1,
.phero h1 {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Rowne wysokosci kart w gridach zastosowan (grid stretch-uje domyslnie,
   ustawiamy jawnie + rowny floor, zeby karty nie byly nierowne/stubby). */
.c8-applications .uses-grid,
#zastosowania .uses-grid { align-items: stretch; }
.c8-applications .use,
#zastosowania .use { height: 100%; }

/* 2026-07-27 scrim megamenu MOCNIEJSZY - czytelnosc bialego tekstu na jasnych zdjeciach (Sport/Wlosy/Zywnosc) */
.mega-app.c8-app-menu .c8-app-menu-card::after{background:linear-gradient(180deg,rgba(8,7,35,0) 0%,rgba(8,7,35,0) 24%,rgba(8,7,35,.52) 46%,rgba(8,7,35,.86) 74%,rgba(8,7,35,.96) 100%) !important}
.mega-app.c8-app-menu .c8-app-menu-card__copy>b{text-shadow:0 1px 10px rgba(0,0,0,.6) !important}
.mega-app.c8-app-menu .c8-app-menu-card__copy>small{color:rgba(255,255,255,.92) !important}

/* 2026-07-27 fix4: TYTUL HERO nie moze lamac slow w srodku.
   i18n reflow (e974962) dodal overflow-wrap:break-word na .hero-split h1 itp.,
   przez co dlugie tokeny (np. "dla&nbsp;producentow" spiete nbsp) lamaly sie
   po srodku slowa ("producento" / "w"). Tytul hero zawija sie WYLACZNIE na
   granicach slow — zero lamania w srodku. Karty zastosowan zachowuja break-word. */
body:has(.hero-split) .hero-split .panel h1,
.hero-split h1,
.help-hero h1,
.apphero2__title,
.category-page .lsplit__h1,
.phero h1 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* 2026-07-27 mobile hero: caly hero (pasmo zdjec + kafel info) na 1 ekranie bez scrolla (100dvh) */
@media (max-width:600px){
  body:has(.hero-split) .hero-split{height:100dvh !important;min-height:100dvh !important;max-height:100dvh !important;overflow:hidden !important}
  body:has(.hero-split) .hero-split .hs-grid{height:100% !important}
  body:has(.hero-split) .hero-split .photo{height:39dvh !important;min-height:200px !important;max-height:360px !important;flex:0 0 auto !important}
  body:has(.hero-split) .hero-split .panel{flex:1 1 auto !important;min-height:0 !important;display:flex !important;flex-direction:column !important;justify-content:flex-start !important;overflow:hidden !important;padding:12px 0 0 !important}
  body:has(.hero-split) .hero-split .panel-inner{height:auto !important;min-height:0 !important;padding:0 20px !important}
  body:has(.hero-split) .hero-split .panel h1{font-size:clamp(23px,6.6vw,31px) !important;line-height:1.12 !important;margin-bottom:8px !important}
  body:has(.hero-split) .hero-split .panel .lead{font-size:13.5px !important;line-height:1.42 !important;margin-bottom:9px !important}
  body:has(.hero-split) .hero-split .c8-hero-specialties{margin:0 0 11px !important;gap:4px !important}
  body:has(.hero-split) .hero-split .cta .btn{width:100% !important}
}

/* ============================================================
   2026-07-27 fix7 — MEGAMENU "Zastosowania": SCRIM + CIENIE kafli.

   ROOT CAUSE scrimu (user: "ten cien od dolu kafelka ktory ma przyciemnic dol
   gdzie sa napisy WCIAZ NIE ISTNIEJE"): kafel .c8-app-menu-card jest znacznikiem
   <a> lezacym wewnatrz .mega, a mega-fix-highlight-v1 w index.html ubija winna
   kreske nawigacji regula
       nav.main :is(.mega,.drop,.flyout) a::after { content: none }
   Ta regula (0,2,3) zabija content CALEGO pseudoelementu ::after w kazdym <a>
   w megamenu — a wlasnie na ::after siedzi scrim kafla. Wczesniejsze proby
   "wzmocnienia scrimu" podbijaly tylko background (linia 3006), wiec nie mialy
   szansy zadzialac: pseudoelement W OGOLE nie byl generowany
   (getComputedStyle(card,'::after').content === 'none').
   FIX: jawnie przywracamy content oraz geometrie (odziedziczone bottom:-3px po
   kresce nav) i kladziemy scrim NAD zdjeciem (z-index:1 zamiast -1 — nie zalezy
   juz od isolation/ujemnego z-index), a tresc kafla podnosimy na z-index:2. */
.mega-app.c8-app-menu .c8-app-menu-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border-radius: inherit;
  background: linear-gradient(180deg,
      rgba(8, 7, 35, 0) 0%,
      rgba(8, 7, 35, 0) 28%,
      rgba(8, 7, 35, .55) 52%,
      rgba(8, 7, 35, .88) 100%) !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  transform: none !important;
}
.mega-app.c8-app-menu .c8-app-menu-card__copy,
.mega-app.c8-app-menu .c8-app-menu-card__cta,
.mega-app.c8-app-menu .c8-app-menu-card__links {
  position: relative;
  z-index: 2;
}

/* CIENIE (user: "kiedy dodasz do tego megamenu te cienie?") — kafle czytaly sie
   plasko, bo spoczynkowy cien mial raptem 10% alfy. Dwuwarstwowy cien (szeroki
   + kontaktowy) daje glebie zblizona do kafli hero; hover unosi kafel mocniej. */
.mega-app.c8-app-menu .c8-app-menu-card {
  box-shadow:
    0 12px 30px rgba(12, 16, 50, .28),
    0 3px 9px rgba(12, 16, 50, .18);
}
.mega-app.c8-app-menu .c8-app-menu-card:hover,
.mega-app.c8-app-menu .c8-app-menu-card:focus-visible {
  box-shadow:
    0 22px 46px rgba(12, 16, 50, .38),
    0 6px 14px rgba(12, 16, 50, .24);
}
/* caly panel megamenu tez mocniej odklejony od strony */
nav.main .mega.mega-app.c8-app-menu {
  box-shadow:
    0 32px 80px rgba(20, 18, 70, .26),
    0 10px 26px rgba(20, 18, 70, .14);
}

/* ============================================================
   2026-07-27 fix8 / FAZA B1 — MOBILE: strony ZASTOSOWAN, pierwszy ekran.
   Wzor (zdjecie od usera): [zdjecie hero] -> [kafel z tytulem/opisem/CTA,
   delikatnie nachodzacy na zdjecie] -> [delikatny gradient pod zdjeciem
   i za kaflem] -> [doczepiane menu .application-jump MAKSYMALNIE na dole
   pierwszego ekranu, bez bialej luki].

   Naglowek (topbar 34px + header.nav 86px) = 120px, .application-jump = 62px,
   wiec hero dostaje dokladnie calc(100dvh - 182px). Zdjecie jest flex:1
   (dobiera cala reszte), kafel flex:0 0 auto — dzieki temu NIGDY nie ma
   bialej luki, niezaleznie od dlugosci tekstu na danej stronie.

   Ujednolica OBIE konwencje nazw uzywane na 6 stronach:
   BEM  (.apphero2__photo/__img/__wrap/__card) — stawy, uroda, zywnosc
   flat (.apphero2-bg/-wrap/-card)             — sport, pet-food, rolnictwo
   ============================================================ */
@media (max-width: 700px) {
  body.application-page .apphero2 {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    height: max(430px, calc(100dvh - 120px - 66px)) !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    isolation: isolate;
    background-color: #f3f8fb !important;
    background-image: linear-gradient(180deg,
        color-mix(in srgb, var(--app-accent, #00a9cf) 15%, #ffffff) 0%,
        color-mix(in srgb, var(--app-accent, #00a9cf) 8%, #fbfdfe) 44%,
        color-mix(in srgb, var(--app-accent, #00a9cf) 3%, #ffffff) 100%) !important;
  }

  /* zdjecie: pasmo u gory, dobiera cala wolna przestrzen */
  body.application-page .apphero2 > .apphero2__photo,
  body.application-page .apphero2 > .apphero2__img,
  body.application-page .apphero2 > .apphero2-bg {
    position: relative !important;
    inset: auto !important;
    order: 0 !important;
    flex: 1 1 0% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 128px !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center 30% !important;
    display: block !important;
    z-index: 0 !important;
  }

  /* scrim desktopowy (rozjasnienie lewej strony) nie ma sensu w ukladzie stack */
  body.application-page .apphero2__scrim,
  body.application-page .apphero2-scrim { display: none !important; }

  /* gutter kafla — ujemny margines = delikatne nachodzenie na zdjecie */
  body.application-page .apphero2__wrap,
  body.application-page .apphero2-wrap,
  body.application-page .apphero2 .apphero2-wrap {
    order: 1 !important;
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: none !important;
    margin: -26px 0 0 !important;
    padding: 0 13px 15px !important;
    display: block !important;
  }

  /* kafel tekstowy (pasek akcentu robi background-image z bloku wyzej — NIE
     nadpisujemy `background`, tylko `background-color`) */
  body.application-page .apphero2__card,
  body.application-page .apphero2-card,
  body.application-page .apphero2 .apphero2-card {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 19px 20px 21px !important;
    border-radius: 18px !important;
    border: 0 !important;
    background-color: #ffffff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow:
      0 20px 44px -18px rgba(14, 22, 70, .38),
      0 3px 12px rgba(14, 22, 70, .09) !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    overflow: hidden !important;
  }

  /* zwarta typografia — kafel + CTA MUSZA zmiescic sie na 1 ekranie */
  body.application-page .apphero2__eyebrow,
  body.application-page .apphero2-eyebrow { display: none !important; }
  body.application-page .apphero2__title,
  body.application-page .apphero2 h1,
  body.application-page .apphero2 h2 {
    margin: 0 0 9px !important;
    font-size: clamp(21px, 5.9vw, 27px) !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em !important;
  }
  body.application-page .apphero2__intro,
  body.application-page .apphero2-intro {
    margin: 0 0 15px !important;
    max-width: none !important;
    font-size: 14.5px !important;
    line-height: 1.45 !important;
  }
  body.application-page .apphero2__cta,
  body.application-page .apphero2-cta {
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
  }
  body.application-page .apphero2 .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 16px !important;
  }

  /* doczepiane menu startuje DOKLADNIE na dole pierwszego ekranu */
  body.application-page .application-jump {
    margin-top: 0 !important;
    min-height: 62px !important;
  }
  body.application-page .application-jump .wrap {
    min-height: 62px !important;
    padding-left: clamp(14px, 4vw, 22px) !important;
    padding-right: clamp(14px, 4vw, 22px) !important;
  }
}

/* ============================================================
   2026-07-27 fix8 / FAZA B2 — MOBILE hero strony glownej.
   Bylo: .hero-split height:100dvh, ale hero zaczyna sie 120px ponizej
   gory dokumentu (topbar 34 + header.nav 86) => CTA "Zobacz rodziny
   produktow" wypadalo POD pierwszym ekranem. Teraz hero = dokladnie
   calc(100dvh - 120px), .photo jest flex:1 (dobiera reszte), a .panel
   flex:0 0 auto — CTA zawsze widoczne. Domykamy tez biala mini-luke
   miedzy pasmem slajdow a kaflem tekstu (padding 0 + gradient startowy).
   ============================================================ */
@media (max-width: 600px) {
  body:has(.hero-split) .hero-split {
    height: max(470px, calc(100dvh - 120px)) !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  body:has(.hero-split) .hero-split .hs-grid {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  body:has(.hero-split) .hero-split .photo {
    flex: 1 1 0% !important;
    height: auto !important;
    min-height: 130px !important;
    max-height: none !important;
  }
  body:has(.hero-split) .hero-split .panel {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    display: block !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 0 10px !important;
    background: linear-gradient(180deg, #e9f4f9 0%, #f7fbfd 26%, #ffffff 62%) !important;
  }
  body:has(.hero-split) .hero-split .panel-inner {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 11px 20px 0 !important;
  }
  body:has(.hero-split) .hero-split .panel h1 {
    font-size: clamp(22px, 6.3vw, 30px) !important;
    line-height: 1.12 !important;
    margin: 0 0 7px !important;
  }
  body:has(.hero-split) .hero-split .panel .lead {
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    margin: 0 0 9px !important;
  }
  body:has(.hero-split) .hero-split .c8-hero-specialties { margin: 0 0 10px !important; gap: 4px !important; }
  body:has(.hero-split) .hero-split .cta { margin: 0 !important; }
  body:has(.hero-split) .hero-split .cta .btn { width: 100% !important; justify-content: center !important; }
}

/* --- fix8 / B1 c.d.: rolnictwo-biotechnologia ma wlasny, rozbudowany hero
   desktopowy (.c8-agbio-hero: copy + 2 kafle Agro/Bio). Na telefonie
   podmieniamy go na TEN SAM uklad co pozostale 5 stron zastosowan
   (zdjecie + kafel + doczepiane menu), zeby wszystkie 6 wygladalo tak samo. */
.apphero2--mobile-only { display: none !important; }
@media (max-width: 700px) {
  body.application-page--agbio .apphero2--mobile-only { display: flex !important; }
  body.application-page--agbio .c8-agbio-hero { display: none !important; }
  body.application-page--agbio .apphero2--mobile-only .apphero2__title {
    color: var(--c8-navy, #17156d) !important;
    font-weight: 800 !important;
  }
}

/* ============================================================
   2026-07-27 fix10 — TABLET (~960-1180px) + SYSTEMOWE OBCINANIE TEKSTU
   ------------------------------------------------------------
   ZADANIE 1 (tablet 10,5" / CSS ~960-1280px)
   ZADANIE 2 (za duzo tekstu = kafel ROSNIE, nie ucina)
   ============================================================ */

/* ---------- 1a. MEGAMENU: szerokosc panelu ----------
   Bylo: @media(max-width:1100px){.mega{width:min(780px,100vw-40px)}} — panel
   zwezal sie do 780px, ale siatka .mega-cols byla nadal WYMUSZONA na 6 rownych
   kolumn (regula bez @media, wyzsza specyficznosc), czyli 108px na kolumne.
   Nazwy linii (TuriColl(TM), TuriKer(R)...) sa nielamliwe i wychodzily na
   sasiednie kolumny — to jest zglaszane "megamenu pokazuje sie za duzo".
   Teraz panel ma jedna, plynna szerokosc na kazdym ekranie. */
nav.main .mega {
  width: min(1360px, calc(100vw - 32px));
}
/* Panel nigdy nie jest wyzszy niz ekran (topbar 34 + nav 85 = 119px).
   Na desktopie 1440/1920 panel ma ~585px, wiec limit nie dziala. */
nav.main .mega:not(.mega-about) {
  max-height: calc(100dvh - 128px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---------- 1b. MEGAMENU Produkty: plynna liczba kolumn ----------
   auto-fit zamiast repeat(6): 6 kolumn dopoki naprawde sie mieszcza
   (>=~1215px, wiec desktop 1440/1920 bez zmian), nizej 5, a przy ~1041px 4.
   min() pilnuje, zeby pojedyncza kolumna nigdy nie byla szersza niz panel. */
.mega:not(.mega-app):not(.mega-about) .mega-cols {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 182px), 1fr));
  gap: 14px;
  align-items: stretch;
}
/* Gdy szesc kolumn przestaje sie miescic (ponizej ~1274px), zamiast
   rozjezdzajacego sie 5+1 pokazujemy rowne 3 + 3. Nadal auto-fit, wiec
   jeszcze wezszy kontener sam zejdzie do 2 i 1 kolumny. */
@media (max-width: 1273px) {
  .mega:not(.mega-app):not(.mega-about) .mega-cols {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  }
}

/* Wnetrze kolumny skaluje sie plynnie z szerokoscia okna. Gorne wartosci
   clamp() sa osiagane juz przy ~1430px, wiec 1440/1920 wyglada identycznie.
   Selektor musi powtarzac :not(...) — inaczej przegrywa ze styles.css. */
.mega:not(.mega-app):not(.mega-about) .mhead { gap: clamp(7px, .7vw, 10px); }
.mega:not(.mega-app):not(.mega-about) .mthumb {
  width: clamp(44px, 3.77vw, 54px);
  height: clamp(44px, 3.77vw, 54px);
}
.mega:not(.mega-app):not(.mega-about) .mtt b { font-size: clamp(15px, 1.33vw, 19px); }
.mega:not(.mega-app):not(.mega-about) .msub { font-size: clamp(12px, .95vw, 13.5px); }

/* ---------- 1c. MEGAMENU: tekst ma sie ZAWIJAC ----------
   nav.main a{white-space:nowrap} (0,1,2) bilo .mega a{white-space:normal}
   (0,1,1), wiec KAZDY link w megamenu byl jednolinijkowy. Kafle Zastosowan
   (.c8-app-menu-card to <a> z overflow:hidden) ucinaly przez to opis
   — takze na desktopie 1440. */
nav.main :is(.mega, .drop, .flyout) a,
nav.main :is(.mega, .drop, .flyout) a * {
  white-space: normal;
}

/* ---------- 1d. MEGAMENU Zastosowania: kafel rosnie z trescia ---------- */
.mega-app.c8-app-menu .c8-app-menu-card__copy > small {
  min-height: 48px;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* Kafel = kolumna: opis na pelnej szerokosci, CTA w osobnym wierszu po prawej.
   Wczesniej kafel byl flexem POZIOMYM, co przy jednolinijkowym (nowrap) opisie
   udawalo uklad pionowy; po wlaczeniu zawijania opis i CTA zaczely walczyc
   o te sama linie. */
.mega-app.c8-app-menu .c8-app-menu-card {
  height: auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
}
.mega-app.c8-app-menu .c8-app-menu-card__cta {
  justify-content: flex-end;
  white-space: nowrap;
}

/* ---------- 2. SYSTEMOWE: karta ROSNIE z trescia ----------
   Wszedzie tam, gdzie kafel mial sztywna wysokosc albo twardy limit
   szerokosci tekstu, zamieniamy to na minimum. Gdy tresc miesci sie
   w dotychczasowej wysokosci — wyglad jest bit-w-bit ten sam. */
#rodziny .fam,
#rodziny .ksplit .kp,
.c8-applications .use,
#zastosowania .use,
.category-products .pcard,
.pgrid .pcard,
.about-c8 .about-op,
.help-route {
  height: auto;
}
/* wyjatek: rowne wysokosci w rzedzie zalatwia grid stretch, nie height */
.c8-applications .use,
#zastosowania .use { align-self: stretch; }

/* Dlugie zlozenia (DE) lamia sie wewnatrz kafla zamiast go rozpychac. */
#rodziny .fam .one,
#rodziny .fam .chips span,
#rodziny .ksplit .kp-desc,
#rodziny .ksplit .kp-chips span,
.c8-evidence__item b,
.c8-evidence__item span,
.c8-about-menu__copy b,
.c8-about-menu__copy small,
.mcol .mprod small,
.mcol .msub {
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* Nazwy handlowe: tylko awaryjne lamanie, BEZ dzielenia na sylaby
   (nie chcemy "Turi-Coll(TM)"). */
.mcol .mtt b,
.mcol .mprod b,
#rodziny .ksplit .kp-name {
  overflow-wrap: break-word;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* ---------- 3. PASEK NAWIGACJI tuz nad progiem burgera (1041-1150px) ----------
   Przy 1041-1084px logo + 6 pozycji menu + CTA mialy razem 1082px, wiec strona
   dostawala ~41px poziomego scrolla. Interpolacja calc() domyka odstepy i
   czcionke dokladnie w tym zakresie; od 1150px w gore wartosci sa te same,
   co dotad (font 15px, gap 14px, padding 18px). */
@media (min-width: 1041px) and (max-width: 1150px) {
  header.nav nav.main > a,
  header.nav nav.main > .hasmega > a,
  header.nav nav.main > .hasdrop > a {
    font-size: clamp(13.5px, calc(13.5px + (100vw - 1041px) * .01376), 15px) !important;
  }
  header.nav nav.main {
    gap: clamp(8px, calc(8px + (100vw - 1041px) * .055), 14px) !important;
  }
  header.nav nav.main > a {
    padding-right: clamp(5px, calc(5px + (100vw - 1041px) * .1193), 18px);
  }
}

/* ---------- 4. DLUGIE NAGLOWKI (DE) NIE WYCHODZA POZA SWOJA KOLUMNE ----------
   Na /de/kolageny.html naglowek "Kollagen fuer Nahrungsergaenzungsmittel,
   Lebensmittel und Kosmetik" (clamp(38px,4vw,55px)) mial slowo szersze niz
   kolumna i wjezdzal na kafle po prawej — takze na 1440px.
   overflow-wrap:break-word dziala WYLACZNIE wtedy, gdy slowo naprawde sie nie
   miesci, wiec dla krotszych jezykow (PL/EN) nic sie nie zmienia. */
.category-story h2,
.category-story__copy h2,
.category-story__copy .intro,
.category-benefits h2,
.category-products h2,
.application-products__head h2,
.application-products__head p,
.c8-agbio-hero h1,
.c8-evidence h2,
.about-c8 .about-hero h1,
.help-c8 h2,
.section > .wrap > h2,
.kteam h2 {
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ---------- 5. PASEK CERTYFIKATOW: podpis nie wchodzi na sasiedni kafelek ----
   4 stale kolumny x (logo 82px + gap 9 + podpis) nie mieszcza sie przy ~960px.
   Logo i odstepy skaluja sie plynnie; przy 1440px wartosci sa te same. */
.c8-cert-row a {
  min-width: 0;
  padding: 9px clamp(6px, .95vw, 14px);
  gap: clamp(5px, .62vw, 9px);
}
.c8-cert-row img { max-width: min(82px, 58%); }

/* ---------- 6. PODSTRONY: burger juz od 1040px, tak jak na stronie glownej ----
   assets/styles.css chowalo nav.main dopiero ponizej 981px, ale drawer
   (html.nav-open ...) jest zdefiniowany dla <=1040px. Skutek: na PODSTRONACH
   przy 981-1040px pokazywalo sie pelne menu desktopowe + wyszukiwarka, przez co
   pasek mial 1268px zamiast 1024px i cala strona dostawala poziomy scroll.
   index.html mial to juz poprawione inline (@media(max-width:1040px)),
   tu domykamy to samo dla wszystkich podstron. */
@media (max-width: 1040px) {
  html:not(.nav-open) header.nav nav.main { display: none; }
  header.nav .burger { display: flex; }
  header.nav .navsearch,
  header.nav .nav-cta .as { display: none; }
}

/* ---------- 7. DRAWER MOBILNY NIE MOZE BYC PRZYCIETY DO 85px ----------
   concept8.css @media(min-width:821px) przybija cala belke naglowka
   (w tym nav.main) do height/max-height:85px !important. Gdy przy 821-1040px
   uzytkownik otwiera burgera, nav.main jest juz drawerem (position:fixed),
   ale ten sam !important obcinal go do 85px + overflow-y:auto — widac bylo
   TYLKO wyszukiwarke, bez ani jednej pozycji menu.
   Tu zdejmujemy limit wylacznie dla OTWARTEGO drawera. */
@media (max-width: 1040px) {
  html.nav-open body > header.nav nav.main,
  html.nav-open header.nav nav.main {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 120px) !important;
  }
}
/* w drawerze nie chcemy desktopowej kreski pod pozycja menu (nav.main a::after) */
@media (max-width: 1040px) {
  html.nav-open header.nav nav.main a::after { content: none !important; }
}
/* ...oraz desktopowego uklad flex pozycji z megamenu (@media min-width:981px):
   w drawerze kazda pozycja jest pelnowymiarowym wierszem. */
@media (min-width: 981px) and (max-width: 1040px) {
  html.nav-open header.nav nav.main > .hasmega,
  html.nav-open header.nav nav.main > .hasdrop {
    display: block;
    align-self: auto;
  }
  html.nav-open header.nav nav.main > .hasmega > a,
  html.nav-open header.nav nav.main > .hasdrop > a {
    display: block;
    min-height: 0;
  }
}

/* ---------- 8. KAFLE ZASTOSOWAN: luka 1121-1180px ----------
   index.html mial @media(max-width:1120px){#zastosowania .uses-grid{repeat(3,1fr)}},
   wiec przy 1121-1180px szescioelementowa siatka zostawala na 6 kolumnach po
   ~175px — tytul lamal sie na 3 linie, a CTA na 2. Przesuwamy prog do 1180px,
   czyli tam, gdzie caly tablet ma juz uklad 3-kolumnowy (#rodziny, megamenu).
   Desktop >=1181px bez zmian. */
@media (min-width: 901px) and (max-width: 1180px) {
  #zastosowania .uses-grid,
  .c8-applications .uses-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   2026-07-27 fix11 / ZADANIE 1 — MEGAMENU "ZASTOSOWANIA": kafle.

   (a) ROOT CAUSE jasnego rantu na krawedziach zdjec (widoczny w
   powiekszeniu 6x): .c8-app-menu-card mial
       border: 1px solid rgba(255,255,255,.22)
   a scrim kafla (::after, position:absolute; inset:0) rozpina sie na
   PADDING BOX — czyli NIE obejmuje pasa ramki. Do tego background-clip
   ma domyslnie wartosc border-box, wiec zdjecie bylo malowane takze POD
   polprzezroczysta ramka i przebijalo przez nia surowe, nieprzyciemnione
   piksele. Efekt: rozmyty jasny/zielonkawy pasek 1px dookola kazdego
   kafla. Pomiar przed fixem (MM_before.png, dsf=2): przy lewej krawedzi
   kafla "Stawy" x=86..87 mialo (116,127,89), a wnetrze x>=88 juz
   (25,28,36) — dokladnie 1 CSS px surowego zdjecia.
   FIX: ramka znika calkowicie + background-clip:padding-box jako pas
   bezpieczenstwa. Zdjecie dochodzi czysto do zaokraglonej krawedzi.

   (b) KOMPOZYCJA (user: "napisy sa takie za proste", "wyglada fatalnie").
   Jeden spojny wariant, ta sama logika co reszta serwisu:
     - warstwa zdjecia wrocila na ::before (background-image:inherit
       dziedziczy inline'owy url z atrybutu style) — dzieki temu zdjecie
       moze delikatnie najechac (scale) niezaleznie od tresci,
     - glebszy scrim z akcentem marki (granat + cyan) zamiast czystej
       czerni,
     - cienka linia-akcent cyan->turkus nad tytulem, rozciagajaca sie na
       hover,
     - mocniejsza hierarchia: tytul 18px/850, opis stonowany 12.2px,
     - CTA jako pigulka (glass) ze strzalka przesuwajaca sie na hover,
     - hover: uniesienie kafla + zoom zdjecia + wypelnienie pigulki.
   ============================================================ */

/* --- (a) krawedzie + bryla kafla --- */
.mega-app.c8-app-menu .c8-app-menu-card {
  /* kolor kategorii (nadpisywany per kafel nizej) */
  --amc-a: #00aed9;
  --amc-b: #38d4f1;
  --amc-glow: rgba(56, 212, 241, .55);
  --amc-scrim: rgba(0, 120, 160, .34);
  border: 0 !important;
  outline: 0;
  background-clip: padding-box !important;
  background-color: #0b0e2c !important;
  border-radius: 16px !important;
  padding: 22px 20px 20px !important;
  min-height: 258px;
  overflow: hidden !important;
  isolation: isolate;
  transition:
    transform .42s cubic-bezier(.22, 1, .36, 1),
    box-shadow .42s cubic-bezier(.22, 1, .36, 1);
}

/* --- warstwa zdjecia (wraca ::before, bo 2026-07-27 fix wylaczyl ja przez
       display:none; background-image:inherit bierze url z inline style) --- */
.mega-app.c8-app-menu .c8-app-menu-card::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-image: inherit;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat;
  transform: scale(1.002);
  transform-origin: 50% 45%;
  transition: transform .68s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
  border-radius: inherit;
}

/* --- scrim: glebszy, z kolorem marki zamiast czystej czerni --- */
.mega-app.c8-app-menu .c8-app-menu-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
  border-radius: inherit;
  background:
    linear-gradient(180deg,
      rgba(7, 8, 34, 0) 0%,
      rgba(7, 8, 34, 0) 24%,
      rgba(10, 11, 48, .40) 46%,
      rgba(9, 10, 46, .80) 70%,
      rgba(5, 6, 28, .955) 100%),
    radial-gradient(118% 78% at 4% 104%, rgba(23, 21, 109, .60) 0%, rgba(23, 21, 109, 0) 60%),
    radial-gradient(96% 68% at 100% 104%, var(--amc-scrim) 0%, rgba(0, 92, 128, 0) 64%),
    linear-gradient(165deg, rgba(9, 10, 44, .16) 0%, rgba(9, 10, 44, 0) 38%) !important;
}

/* --- kolor kategorii: linia-akcent + poswiata + ciepla/zimna nuta scrimu.
       Uklad 3x2 — kolumny 1 i 2 trzymaja rodzine (cyan / indygo), kolumna 3
       robi kontrast (wino / zielen). Zaden wiersz nie powtarza koloru. --- */
.mega-app.c8-app-menu .c8-app-menu-card:nth-child(1) {
  --amc-a: #00aed9; --amc-b: #38d4f1;
  --amc-glow: rgba(56, 212, 241, .55); --amc-scrim: rgba(0, 120, 160, .40);
}
.mega-app.c8-app-menu .c8-app-menu-card:nth-child(2) {
  --amc-a: #4b48e8; --amc-b: #9b98ff;
  --amc-glow: rgba(140, 137, 255, .50); --amc-scrim: rgba(48, 45, 170, .40);
}
.mega-app.c8-app-menu .c8-app-menu-card:nth-child(3) {
  --amc-a: #c02f60; --amc-b: #f78bab;
  --amc-glow: rgba(240, 124, 160, .50); --amc-scrim: rgba(122, 31, 61, .46);
}
.mega-app.c8-app-menu .c8-app-menu-card:nth-child(4) {
  --amc-a: #0fa3c6; --amc-b: #7fe4f8;
  --amc-glow: rgba(127, 228, 248, .50); --amc-scrim: rgba(0, 108, 148, .40);
}
.mega-app.c8-app-menu .c8-app-menu-card:nth-child(5) {
  --amc-a: #6462f0; --amc-b: #b0aeff;
  --amc-glow: rgba(160, 158, 255, .50); --amc-scrim: rgba(56, 53, 168, .40);
}
.mega-app.c8-app-menu .c8-app-menu-card:nth-child(6) {
  --amc-a: #1e8a55; --amc-b: #63dc9e;
  --amc-glow: rgba(99, 220, 158, .48); --amc-scrim: rgba(28, 107, 67, .46);
}

/* --- tresc: hierarchia + linia-akcent --- */
.mega-app.c8-app-menu .c8-app-menu-card__copy,
.mega-app.c8-app-menu .c8-app-menu-card__cta {
  position: relative;
  z-index: 2;
}
.mega-app.c8-app-menu .c8-app-menu-card__copy::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin: 0 0 14px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--amc-a) 0%, var(--amc-b) 100%);
  box-shadow: 0 0 16px var(--amc-glow);
  transition:
    width .46s cubic-bezier(.22, 1, .36, 1),
    box-shadow .46s ease;
}
.mega-app.c8-app-menu .c8-app-menu-card__copy > b {
  font-size: 18px !important;
  font-weight: 850 !important;
  line-height: 1.16 !important;
  letter-spacing: -.012em;
  color: #fff !important;
  text-shadow: 0 2px 16px rgba(3, 5, 24, .82) !important;
}
/* min-height = 2 wiersze (12.2 x 1.5) — wyrownuje linie-akcent i tytuly
   w calym rzedzie, takze gdy opis ma tylko jedna linijke (Pet food). */
.mega-app.c8-app-menu .c8-app-menu-card__copy > small {
  min-height: 37px !important;
  margin-top: 9px !important;
  font-size: 12.2px !important;
  line-height: 1.5 !important;
  color: rgba(228, 237, 252, .86) !important;
  text-shadow: 0 1px 12px rgba(3, 5, 24, .7);
}

/* --- CTA jako pigulka (glass) ze strzalka --- */
.mega-app.c8-app-menu .c8-app-menu-card__cta {
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-start !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  gap: 9px !important;
  margin-top: 15px !important;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .32);
  background: rgba(10, 14, 46, .40);
  -webkit-backdrop-filter: blur(7px) saturate(1.15);
  backdrop-filter: blur(7px) saturate(1.15);
  color: #fff !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .085em;
  text-transform: uppercase;
  line-height: 1.1;
  transition:
    background .32s ease,
    border-color .32s ease,
    color .32s ease,
    box-shadow .32s ease;
}
.c8-am-arrow {
  display: inline-block;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  transform: translateX(0);
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}

/* --- hover / focus: jeden spojny ruch --- */
.mega-app.c8-app-menu .c8-app-menu-card:hover,
.mega-app.c8-app-menu .c8-app-menu-card:focus-visible {
  transform: translateY(-6px);
  box-shadow:
    0 26px 52px rgba(10, 14, 48, .42),
    0 7px 16px rgba(10, 14, 48, .26);
}
.mega-app.c8-app-menu .c8-app-menu-card:hover::before,
.mega-app.c8-app-menu .c8-app-menu-card:focus-visible::before { transform: scale(1.075); }
.mega-app.c8-app-menu .c8-app-menu-card:hover .c8-app-menu-card__copy::before,
.mega-app.c8-app-menu .c8-app-menu-card:focus-visible .c8-app-menu-card__copy::before {
  width: 74px;
  box-shadow: 0 0 24px var(--amc-glow);
}
/* pigulka wypelnia sie na bialo (czytelne przy KAZDYM kolorze kategorii),
   a poswiate pod nia bierze juz z koloru kafla */
.mega-app.c8-app-menu .c8-app-menu-card:hover .c8-app-menu-card__cta,
.mega-app.c8-app-menu .c8-app-menu-card:focus-visible .c8-app-menu-card__cta {
  background: #fff;
  border-color: #fff;
  color: #0d1240 !important;
  box-shadow: 0 12px 26px rgba(4, 8, 34, .42), 0 0 0 4px var(--amc-glow);
}
.mega-app.c8-app-menu .c8-app-menu-card:hover .c8-am-arrow,
.mega-app.c8-app-menu .c8-app-menu-card:focus-visible .c8-am-arrow { transform: translateX(5px); }

.mega-app.c8-app-menu .c8-app-menu__grid { gap: 14px !important; }

/* --- tablet / waskie okna: te same proporcje, mniejsza skala --- */
@media (max-width: 1180px) {
  .mega-app.c8-app-menu .c8-app-menu-card {
    min-height: 208px;
    padding: 16px 14px 15px !important;
    border-radius: 14px !important;
  }
  .mega-app.c8-app-menu .c8-app-menu-card__copy::before { width: 34px; margin-bottom: 11px; }
  .mega-app.c8-app-menu .c8-app-menu-card__copy > b { font-size: 16px !important; }
  .mega-app.c8-app-menu .c8-app-menu-card__copy > small {
    font-size: 11.6px !important;
    margin-top: 7px !important;
    min-height: 35px !important;
  }
  .mega-app.c8-app-menu .c8-app-menu-card__cta {
    margin-top: 12px !important;
    padding: 7px 11px;
    gap: 7px !important;
    font-size: 9.6px !important;
    letter-spacing: .06em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega-app.c8-app-menu .c8-app-menu-card,
  .mega-app.c8-app-menu .c8-app-menu-card::before,
  .mega-app.c8-app-menu .c8-app-menu-card__copy::before,
  .mega-app.c8-app-menu .c8-app-menu-card__cta,
  .c8-am-arrow { transition: none !important; }
  .mega-app.c8-app-menu .c8-app-menu-card:hover { transform: none; }
  .mega-app.c8-app-menu .c8-app-menu-card:hover::before { transform: scale(1.002); }
}

/* ============================================================
   2026-07-27 fix11 / ZADANIE 2 — MENU MOBILNE (drawer z burgera).

   (2a) ANIMACJA. Jedno, spojne "aplikacyjne" wejscie:
        easing cubic-bezier(.22,1,.36,1) na WSZYSTKIM (panel, pozycje,
        scrim, burger), scrim wchodzi fade + blur, burger zamienia sie
        w X, pozycje wjezdzaja kaskadowo z prawej i lekko z gory,
        zamkniecie jest rownie plynne (klasa html.nav-closing dokladana
        przez assets/site-fixes.js).
   (2b) STOPKA DRAWERA. Dwa przyciski ("Pomoc w doborze" / "Kontakt")
        w osobnej sekcji na GRADIENCIE marki (granat -> cyan), pelna
        szerokosc drawera, position:sticky bottom:0 — zawsze widoczne,
        takze przy przewijaniu listy. Pozycja "Pomoc w doborze" z listy
        jest w drawerze ukryta, zeby nie dublowac przycisku.
   ============================================================ */

/* --- (2a) panel + pozycje: wspolny easing --- */
html.nav-open nav.main {
  animation: navDrawerIn .46s cubic-bezier(.22, 1, .36, 1) both;
  transform-origin: top right;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 30px 64px rgba(11, 15, 52, .32) !important;
}
html.nav-open nav.main > a,
html.nav-open nav.main > .hasdrop,
html.nav-open nav.main > .hasmega,
html.nav-open nav.main > .c8-help-link,
html.nav-open nav.main > .c8-drawer-cta,
html.nav-open nav.main > .as {
  animation: navDrawerItemIn .44s cubic-bezier(.22, 1, .36, 1) both;
}
html.nav-open nav.main > *:nth-child(1) { animation-delay: .05s; }
html.nav-open nav.main > *:nth-child(2) { animation-delay: .095s; }
html.nav-open nav.main > *:nth-child(3) { animation-delay: .14s; }
html.nav-open nav.main > *:nth-child(4) { animation-delay: .185s; }
html.nav-open nav.main > *:nth-child(5) { animation-delay: .23s; }
html.nav-open nav.main > *:nth-child(6) { animation-delay: .275s; }
html.nav-open nav.main > *:nth-child(7) { animation-delay: .32s; }
html.nav-open nav.main > *:nth-child(8) { animation-delay: .365s; }
html.nav-open nav.main > .c8-drawer-cta { animation-delay: .30s !important; }

@keyframes navDrawerIn {
  from { opacity: 0; transform: translate3d(30px, -10px, 0) scale(.985); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes navDrawerItemIn {
  from { opacity: 0; transform: translate3d(22px, 6px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes navDrawerOut {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to   { opacity: 0; transform: translate3d(24px, -8px, 0) scale(.985); }
}
@keyframes navScrimOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* --- zamykanie (klasa dokladana przez site-fixes.js na czas animacji) --- */
html.nav-closing nav.main {
  animation: navDrawerOut .28s cubic-bezier(.4, 0, .2, 1) both !important;
  pointer-events: none !important;
}
html.nav-closing nav.main > * { animation: none !important; opacity: 1 !important; transform: none !important; }
html.nav-closing body::after { animation: navScrimOut .28s ease both !important; }
html.nav-closing .burger span { transition-duration: .26s !important; }

/* --- scrim: glebszy, z blurem i fade --- */
@media (max-width: 1040px) {
  html.nav-open body::after {
    background:
      radial-gradient(120% 86% at 50% 0%, rgba(23, 21, 109, .34) 0%, rgba(23, 21, 109, 0) 62%),
      rgba(6, 9, 34, .56) !important;
    -webkit-backdrop-filter: blur(4px) saturate(.92) !important;
    backdrop-filter: blur(4px) saturate(.92) !important;
  }
  /* :not(.nav-closing) — inaczej ta regula (pozniejsza w pliku) bilaby
     navScrimOut z sekcji "zamykanie" i scrim znikalby skokowo. */
  html.nav-open:not(.nav-closing) body::after {
    animation: navScrimIn .46s cubic-bezier(.22, 1, .36, 1) both !important;
  }
}

/* --- burger -> X --- */
header.nav .burger {
  align-items: center;
  justify-content: center;
}
header.nav .burger span {
  display: block;
  transform-origin: center;
  border-radius: 2px;
  transition:
    transform .38s cubic-bezier(.22, 1, .36, 1),
    opacity .2s ease,
    background .3s ease;
}
html.nav-open header.nav .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
html.nav-open header.nav .burger span:nth-child(2) { opacity: 0; transform: scaleX(.25); }
html.nav-open header.nav .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
html.nav-closing header.nav .burger span:nth-child(1),
html.nav-closing header.nav .burger span:nth-child(3) { transform: none; }
html.nav-closing header.nav .burger span:nth-child(2) { opacity: 1; transform: none; }

/* --- (2b) lista drawera: zwarta, z szewronem; stopka CTA na gradiencie --- */
.c8-drawer-cta { display: none; }

@media (max-width: 1040px) {
  html.nav-open nav.main {
    gap: 0 !important;
    /* margin-left:2px z ukladu desktopowego zostawial pasek scrimu przy
       lewej krawedzi wysunietego menu (widoczne na kolageny.html) */
    margin: 0 !important;
    padding: 6px 24px 0 !important;
  }
  /* "Pomoc w doborze" jest juz przyciskiem w stopce drawera — bez duplikatu */
  html.nav-open nav.main > .c8-help-link { display: none !important; }

  html.nav-open nav.main > a,
  html.nav-open nav.main > .hasdrop > a,
  html.nav-open nav.main > .hasmega > a {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 2px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: -.005em;
    color: var(--navy, #17156d) !important;
    transition: color .2s ease, padding-left .28s cubic-bezier(.22, 1, .36, 1);
  }
  html.nav-open nav.main > a:active,
  html.nav-open nav.main > .hasdrop > a:active,
  html.nav-open nav.main > .hasmega > a:active { color: #0b7fa8 !important; padding-left: 6px !important; }

  /* szewron po prawej — sygnalizuje, ze wiersz prowadzi dalej */
  html.nav-open header.nav nav.main > a::after,
  html.nav-open header.nav nav.main > .hasdrop > a::after,
  html.nav-open header.nav nav.main > .hasmega > a::after {
    content: "" !important;
    position: static !important;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border: 0 !important;
    border-top: 2px solid rgba(23, 21, 109, .34) !important;
    border-right: 2px solid rgba(23, 21, 109, .34) !important;
    background: none !important;
    transform: rotate(45deg) !important;
    opacity: 1 !important;
    transition: border-color .2s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
  }
  html.nav-open header.nav nav.main > a:active::after,
  html.nav-open header.nav nav.main > .hasdrop > a:active::after,
  html.nav-open header.nav nav.main > .hasmega > a:active::after {
    border-color: #00aed9 !important;
    transform: rotate(45deg) translateX(2px) !important;
  }

  /* stopka drawera: gradient marki + 2 przyciski */
  html.nav-open nav.main > .c8-drawer-cta {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin: auto -24px 0;
    padding: 16px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 0 0 18px 18px;
    background:
      radial-gradient(120% 165% at 4% 6%, rgba(56, 212, 241, .34) 0%, rgba(56, 212, 241, 0) 58%),
      linear-gradient(116deg, #17156d 0%, #1d2b96 42%, #0a7fb0 76%, #00aed9 100%);
    box-shadow: 0 -6px 16px rgba(9, 13, 44, .10);
  }
  html.nav-open nav.main > .c8-drawer-cta::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  }
  html.nav-open nav.main > .c8-drawer-cta > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 50px;
    padding: 12px 8px !important;
    border-bottom: 0 !important;
    border-radius: 12px;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    line-height: 1.15;
    letter-spacing: .005em;
    text-align: center;
    white-space: normal;
    transition:
      transform .22s cubic-bezier(.22, 1, .36, 1),
      box-shadow .26s ease,
      background .26s ease;
  }
  html.nav-open header.nav nav.main > .c8-drawer-cta > a::after {
    content: "→" !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    background: none !important;
    transform: none !important;
    opacity: .9;
    font-weight: 700;
    transition: transform .26s cubic-bezier(.22, 1, .36, 1);
  }
  html.nav-open header.nav nav.main > .c8-drawer-cta > a:active::after { transform: translateX(3px) !important; }
  html.nav-open nav.main > .c8-drawer-cta > a:active { transform: translateY(1px); }
  html.nav-open nav.main .c8-drawer-cta__btn--primary {
    background: #fff;
    color: #17156d !important;
    box-shadow: 0 10px 22px rgba(4, 10, 40, .30);
  }
  /* ciemna, polprzezroczysta plomka — biale litery musza byc czytelne takze
     nad jasnym, cyanowym koncem gradientu */
  html.nav-open nav.main .c8-drawer-cta__btn--ghost {
    background: rgba(7, 14, 58, .34);
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .58);
    box-shadow: 0 6px 16px rgba(4, 10, 40, .22);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }

  /* wyszukiwarka w drawerze: troche wiecej powietrza nad lista */
  html.nav-open nav.main .as--drawer { padding: 10px 0 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html.nav-open nav.main,
  html.nav-open nav.main > *,
  html.nav-closing nav.main,
  html.nav-closing body::after { animation: none !important; }
  html.nav-open body::after { animation: none !important; }
  header.nav .burger span { transition: none !important; }
}

/* ---------- fix11 / 2c. DRAWER MUSI ZACZYNAC SIE POD NAGLOWKIEM ----------
   BUG (widoczny tylko na stronach "konceptowych", np. index.html, a na
   podstronach typu kolageny.html juz nie): miedzy paskiem naglowka a
   wysunietym drawerem byl 34-pikselowy pas przyciemnionej strony.
   Przyczyna: header.nav ma tam backdrop-filter: saturate(1.4) blur(10px),
   a element z backdrop-filter staje sie BLOKIEM ZAWIERAJACYM dla
   potomkow position:fixed. Drawer (nav.main, fixed, top:120px) liczyl
   wiec swoje 120px nie od gory okna, tylko od gory naglowka (y=34) —
   stad 34px przesuniecia. Na kolageny.html header nie ma backdrop-filter,
   wiec drawer siadal poprawnie. Zdejmujemy filtr wylacznie na czas
   otwartego menu (naglowek i tak jest wtedy w pelni bialy). */
@media (max-width: 1040px) {
  html.nav-open header.nav,
  html.nav-closing header.nav {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: #fff !important;
  }
}

/* najwezsze telefony (<=360px): "Pomoc w doborze" ma zostac w jednej linii */
@media (max-width: 360px) {
  html.nav-open nav.main > .c8-drawer-cta { gap: 8px; padding-left: 16px; padding-right: 16px; }
  html.nav-open nav.main > .c8-drawer-cta > a {
    gap: 5px;
    padding: 12px 6px !important;
    font-size: 13px !important;
  }
}

/* stopka drawera na tabletach (600-1040px): przyciski nie rozjezdzaja sie
   na cala szerokosc, tylko trzymaja czytelna kolumne na srodku */
@media (min-width: 600px) and (max-width: 1040px) {
  html.nav-open nav.main > .c8-drawer-cta {
    padding-left: max(24px, calc((100% - 620px) / 2)) !important;
    padding-right: max(24px, calc((100% - 620px) / 2)) !important;
  }
}

/* ============================================================
   2026-07-28 fix12 / UWAGI HANDLOWCOW
   ============================================================ */

/* ---------- fix12 / pkt 2 — HERO: trzy kafle portfolio ----------
   WYCOFANE 2026-07-28 fix15. Kafle-bable (gradient + radius 14 + cien +
   pasek 4px + translateY na hover, nazwa 19px w komorce 137px) byly zrodlem
   uwagi "brzydkie i za bardzo AI" oraz lamania tekstu. Zastapione wariantem
   A "rejestr wierszowy" — blok na koncu pliku (szukaj: c8-hs--a). */

/* ---------- fix12 / pkt 3 — podpisy w rogu zdjec hero ----------
   .caption mial 12px i gubil sie na zdjeciu. */
body:has(.hero-split) .hero-split .caption,
.hero-split .caption {
  gap: 9px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.005em;
  background: rgba(15, 14, 76, .8);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 8px 24px rgba(8, 16, 54, .3);
}
.hero-split .caption .cap-dot { width: 9px; height: 9px; }
.hero-split .caption svg { width: 17px; height: 17px; flex: 0 0 auto; }
@media (max-width: 900px) {
  body:has(.hero-split) .hero-split .caption,
  .hero-split .caption { font-size: 14px; padding: 9px 14px; }
}
@media (max-width: 560px) {
  body:has(.hero-split) .hero-split .caption,
  .hero-split .caption { font-size: 13.5px; }
}

/* ---------- fix12 / pkt 6 — PODSWIETLANIE AKTYWNEJ POZYCJI MENU ----------
   "Pomoc w doborze" byla na stale w kolorze + z badgem "?" i sugerowala,
   ze user jest na tej podstronie. Zrownujemy ja z reszta linkow, a kolorem
   wyroznia sie pozycja odpowiadajaca aktualnie otwartej stronie
   (klase .is-current nadaje site-fixes.js).
   fix18a: nadpisania `color:inherit` i `::before{content:none}` juz nie ma —
   usuniete zostalo samo zrodlo, czyli reguly przy `.nav-cta .burger` (~:109). */

/* UWAGA (fix14): wyglad .is-current (kolor + pigulka + animowany akcent)
   przeniesiony do assets/fluid.css -> sekcja
   "fix14 — ANIMOWANE PODSWIETLENIE AKTYWNEJ POZYCJI MENU".
   Kreska z fix12 (`a::after {bottom:-3px}`) byla kotwiczona do pudelka <a>,
   a od @media (min-width:981px) pozycje z megamenu maja
   `nav.main > .hasmega > a {display:flex; min-height:100%}` — pudelko
   rozciaga sie na cale 85px naglowka, wiec na stronach linii produktowych
   (aktywne "Produkty") kreska wypadala ~30px za nisko, pod naglowkiem.
   fix14 kotwiczy podswietlenie do <span class="c8-navlabel"> (site-fixes.js),
   czyli do samego tekstu — identycznie na kazdym typie strony. */

/* ---------- fix12 / pkt 12 + 11 — MEGAMENU "O FIRMIE" bez ikon i numeracji ----
   Z kart znikly <span class="c8-about-menu__icon"> (piktogramy AI) oraz numery
   01-04 (zostala sama strzalka), wiec karta moze byc nizsza, a strzalka musi
   wrocic do prawego DOLNEGO rogu (space-between z jednym dzieckiem wypychal ja
   na gore).
   fix18a: usuniete `padding:20px 44px 22px` — deklaracja byla MARTWA, bo
   `nav.main a{padding:6px 3px}` (styles.css) ma wyzsza specyficznosc
   (0,1,2 vs 0,1,0) i wygrywa. Realne "swiatlo" karty daje
   `.c8-about-menu__copy{max-width:310px}` przy karcie 391px, czyli ~40px
   z kazdej strony. To samo dotyczy `padding` w @media(max-width:1180px). */
.c8-about-menu__card { min-height: 118px; }
.c8-about-menu__step { justify-content: flex-end; }
@media (max-width: 1180px) {
  .c8-about-menu__card { min-height: 110px; }
}

/* ---------- fix12 / pkt 11 — trzy klocki na stronie linii bez numeracji ----
   Po usunieciu <span>01..03</span> kolumna 48px zostawialaby pusta luke. */
.category-story__fact { grid-template-columns: minmax(0, 1fr) !important; column-gap: 0 !important; }
@media (max-width: 640px) {
  .category-story__fact { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---------- fix12 / pkt 10 — TLO SEKCJI "KLUCZOWE KORZYSCI" ----------
   Bylo ciemnogranatowe (linear-gradient navy->#202b88) i czytalo sie jak koniec
   strony. Teraz jasne, stonowane tlo w tincie rodziny + ciemny tekst. */
.category-benefits,
.category-page .category-benefits {
  color: var(--c8-ink, #101642);
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--category-accent, #00aed9) 14%, transparent), transparent 36%),
    linear-gradient(160deg, #fff 0%, var(--category-mist, #eaf8fc) 100%) !important;
  border-top: 1px solid rgba(21, 20, 95, .07);
  border-bottom: 1px solid rgba(21, 20, 95, .07);
}
.category-benefits::before {
  border: 1px solid color-mix(in srgb, var(--category-deep, #15145f) 9%, transparent) !important;
  box-shadow:
    0 0 0 58px color-mix(in srgb, var(--category-deep, #15145f) 3%, transparent),
    0 0 0 116px color-mix(in srgb, var(--category-deep, #15145f) 2%, transparent) !important;
}
.category-benefits h2 { color: var(--category-deep, #15145f) !important; }
.category-benefits .ben-card {
  color: var(--c8-ink, #101642);
  background: rgba(255, 255, 255, .94) !important;
  border: 1px solid rgba(21, 20, 95, .1) !important;
  box-shadow: 0 10px 26px rgba(22, 31, 78, .06) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.category-benefits .ben-card b { color: var(--category-deep, #15145f) !important; }
.category-benefits .ben-card p,
.category-benefits .ben-card .ben-t { color: #5a6379 !important; }
.category-benefits .ben-ic,
.category-page .category-benefits .ben-ic {
  color: var(--category-accent-dark, #087eaa) !important;
  background: color-mix(in srgb, var(--category-accent, #00aed9) 17%, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--category-accent, #00aed9) 36%, #fff) !important;
}

/* ============================================================
   2026-07-28 fix15 — HERO / portfolio: WARIANT A "rejestr wierszowy"
   Zastepuje kafle-bable z fix12/pkt 2 (blok wyciety wyzej).
   Powod: panel hero jest sztywno ograniczony do 560px (inline CSS w
   index.html), wiec pas kafli ma 432px = 137px na kafel. Nazwa 19px w
   137px lamala sie ("drobiowy z / indyka") i sprawiala wrazenie ciasnoty.
   Rejestr wierszowy daje kazdej rodzinie pelne 432px, wiec nic sie nie
   lamie od 390px w gore, i usuwa cala dekoracje (gradient, radius, cien,
   kolorowy pasek, translateY), ktora czytala sie jako "za bardzo AI".
   Kolagen TYPU II dostaje wlasny znacznik w ramce — jest to pierwsza
   rzecz pod leadem.
   UWAGA KASKADY: nie skracac selektorow body:has(.hero-split) — fluid.css
   laduje sie PO concept8.css i nadpisalby grid (fluid.css:215-220) oraz
   font-size 12px (fluid.css:615-625).
   ============================================================ */
body:has(.hero-split) .hero-split .c8-hs--a,
.c8-hs--a {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 2px 0 22px;
  padding: 0;
  border: 0;
  border-top: 1px solid rgba(21, 20, 95, .15);
  background: none;
}
body:has(.hero-split) .hero-split .c8-hs--a a,
.c8-hs--a a {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  gap: 9px;
  min-width: 0;
  min-height: 0;
  padding: 10px 24px 10px 0;
  border: 0;
  border-bottom: 1px solid rgba(21, 20, 95, .12);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--c8-navy);
  text-decoration: none;
  transform: none;
  transition: none;
}
/* kasuje kropke/pasek akcentu z bazowego CSS (concept8.css:492) */
.c8-hs--a a::before { display: none; }
/* szewron zbudowany z dwoch krawedzi — bez ikony, bez SVG */
.c8-hs--a a::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border-right: 1.5px solid rgba(23, 21, 109, .38);
  border-bottom: 1.5px solid rgba(23, 21, 109, .38);
  transform: rotate(-45deg);
  transition: border-color .18s ease;
}
body:has(.hero-split) .hero-split .c8-hs--a b,
.c8-hs--a b {
  flex: 0 0 auto;
  display: block;
  color: var(--c8-navy);
  font-size: 16px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -.012em;
  white-space: nowrap;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color .18s ease;
}
/* znacznik TYPU II — wyroznik handlowy, ma byc widoczny */
body:has(.hero-split) .hero-split .c8-hs--a i,
.c8-hs--a i {
  flex: 0 0 auto;
  margin-left: -2px;
  padding: 2px 6px 3px;
  border: 1px solid rgba(23, 21, 109, .38);
  border-radius: 2px;
  background: rgba(23, 21, 109, .04);
  color: var(--c8-navy);
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color .18s ease;
}
body:has(.hero-split) .hero-split .c8-hs--a span,
.c8-hs--a span {
  display: block;
  min-width: 0;
  margin: 0;
  color: #5c6580;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
}
/* UWAGA: stany hover MUSZA miec ten sam prefiks body:has(...) co reguly bazowe.
   Bez niego `.c8-hs--a a:hover b` (0,2,2) przegrywa z
   `body:has(.hero-split) .hero-split .c8-hs--a b` (0,3,2) i podkreslenie
   nigdy sie nie pojawia (zweryfikowane w Chromium). */
body:has(.hero-split) .hero-split .c8-hs--a a:hover,
.c8-hs--a a:hover { background: none; box-shadow: none; }
body:has(.hero-split) .hero-split .c8-hs--a a:hover b,
.c8-hs--a a:hover b { text-decoration-color: var(--c8-cyan); }
body:has(.hero-split) .hero-split .c8-hs--a a:hover i,
.c8-hs--a a:hover i { border-color: rgba(23, 21, 109, .55); }
body:has(.hero-split) .hero-split .c8-hs--a a:hover::after,
.c8-hs--a a:hover::after { border-color: var(--c8-navy); }
body:has(.hero-split) .hero-split .c8-hs--a a:focus-visible,
.c8-hs--a a:focus-visible { outline: 2px solid var(--c8-cyan); outline-offset: 2px; }
@media (max-width: 400px) {
  body:has(.hero-split) .hero-split .c8-hs--a a,
  .c8-hs--a a { flex-wrap: wrap; row-gap: 2px; }
  body:has(.hero-split) .hero-split .c8-hs--a span,
  .c8-hs--a span { flex: 1 0 100%; }
}


/* ============================================================
   2026-07-28 fix20 / KOSMETYKA INTERFEJSU (QA sekcja 3.6 / 3.8)
   ============================================================ */

/* ---------- fix20 / 3.6 — PUSTY PAS NA STRONACH ZASTOSOWAN @<=700px ----------
   OBJAW: na 6 stronach zastosowan (x3 jezyki) pod kaflem tekstowym hero
   zostawal ~180 px pustego, kremowego tla, zanim zaczelo sie doczepiane
   menu `.application-jump`. Zmierzone na zywnosc.html @390x844: sekcja
   `.apphero2` 120->778 px, tresc konczyla sie na 599 px.

   PRZYCZYNA (regresja fix17, NIE blad ukladu fix12): uklad mobilny z bloku
   "fix12 / KAFEL ZASTOSOWAN" powyzej (concept8.css:3276-3288) opiera sie na
   selektorach z kombinatorem dziecka —
   `body.application-page .apphero2 > .apphero2__photo | > .apphero2__img |
   > .apphero2-bg` — i nadaje zdjeciu `flex:1 1 0%`, zeby dobralo cala wolna
   przestrzen. fix17 opakowal kazdy <img> w <picture> z zapasem WebP
   (`<picture><source ...><img class="apphero2__img"></picture>`), wiec
   BEZPOSREDNIM dzieckiem sekcji jest teraz <picture>, a nie <img>. Selektory
   z ">" przestaly trafiac, <picture> dostalo domyslne `flex:0 1 auto`
   i zdjecie przestalo rosnac — stad pusty pas.

   ROZWIAZANIE: rola elementu rozciagliwego przechodzi na <picture> (to on
   jest teraz dzieckiem flexa), a <img> w srodku wypelnia go bezwzglednie.
   Stare selektory zostaja nietkniete — strona, ktora kiedykolwiek wroci do
   golego <img>, dalej bedzie dzialac.
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
  body.application-page .apphero2 > picture {
    order: 0 !important;
    flex: 1 1 0% !important;
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-height: 128px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 0 !important;
  }
  body.application-page .apphero2 > picture > .apphero2__photo,
  body.application-page .apphero2 > picture > .apphero2__img,
  body.application-page .apphero2 > picture > .apphero2-bg,
  body.application-page .apphero2 > picture > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center 30% !important;
    display: block !important;
  }
}

/* ---------- fix20 / 3.6b — PASEK KOTWIC MUSI ZMIESCIC SIE NA 1. EKRANIE ----------
   Blok fix12 rezerwuje pod paskiem `.application-jump` sztywne 66 px
   (concept8.css:3260 `height: max(430px, calc(100dvh - 120px - 66px))`).
   66 px to wysokosc paska z kotwicami w JEDNYM rzedzie — tak jest tylko na
   pieciu stronach PL. Od zadania #25 kotwice, ktore nie mieszcza sie w oknie,
   zawijaja sie do drugiego rzedu (fluid.css:531-546) i wtedy pasek ma 79.6 px.
   Zmierzone @390x844: PL zywnosc/stawy/sport/uroda/pet-food = 66 px, natomiast
   PL rolnictwo-biotechnologia oraz WSZYSTKIE strony EN i DE = 79.6 px, czyli
   dolne 13.6 px paska (druga kotwica) bylo ucinane krawedzia ekranu.

   Rezerwujemy 80 px, czyli tyle, ile potrzebuje wariant dwurzedowy. Na pieciu
   stronach PL pasek konczy sie wtedy 14 px nad krawedzia ekranu — widac waski
   pasek nastepnej sekcji, co jest poprawna afordancja przewijania, a nie luka.
   Zdjecie ma `flex:1`, wiec samo oddaje te 14 px; kafel tekstowy bez zmian. */
@media (max-width: 700px) {
  body.application-page .apphero2 {
    height: max(430px, calc(100dvh - 120px - 80px)) !important;
  }
}


/* ---------- fix20 / 3.8 — SZEW MIEDZY PANELEM DRAWERA A STOPKA CTA ----------
   ZGLOSZENIE: "na 390 px dolna krawedz bialego panelu konczy sie ~y=490,
   a gradientowy pasek CTA zaczyna sie na y=499 - widac ~9 px szczeliny,
   przez ktora przebija przyciemniona strona".

   POMIAR: szczeliny NIE MA. Prostokaty stykaja sie co do piksela — ostatnia
   pozycja menu ma bottom 498.6 px, `.c8-drawer-cta` ma top 498.6 px, a dolna
   krawedz panelu i stopki to ta sama wartosc 582.6 px (Chromium, 390x844,
   index.html, po zakonczeniu animacji wejscia).

   CO WIDAC NAPRAWDE: `box-shadow: 0 -6px 16px rgba(9,13,44,.10)` ze stopki
   maluje rozmyty szary cien DO GORY, po bieli panelu. Odczyt pikseli kolumny
   x=200 (zrzut 2x): y=480 -> #FEFEFE, y=490 -> #F6F6F7, y=497 -> #EDEDEF.
   Osiemnascie pikseli brudnej szarosci tuz nad kolorowa stopka czyta sie
   dokladnie jak "przebija przyciemniona strona" — i tak zostalo zgloszone.

   POPRAWKA, dwie rzeczy:
   1) zamiast rozmytego cienia jedna ostra kreska 1 px — biel styka sie
      z gradientem czysto, jak w dobrze zlozonej karcie technicznej;
   2) prawdziwy odstep 14 px zamiast pozornego. `margin: auto -24px 0` bylo
      martwe: `nav.main` ma `height:auto !important` (concept8.css:3660),
      wiec w kolumnie flex NIGDY nie ma wolnej przestrzeni, ktora `auto`
      moglaby rozdzielic — stopka i tak stykala sie z ostatnim wierszem.
      Wpisujemy tam konkretne 14 px; sticky bottom:0 przy dlugiej liscie
      dziala bez zmian, bo margines gorny nie wplywa na przyklejanie. */
@media (max-width: 1040px) {
  html.nav-open nav.main > .c8-drawer-cta {
    margin: 14px -24px 0 !important;
    border-top: 1px solid rgba(9, 13, 44, .10) !important;
    box-shadow: none !important;
  }
  /* wewnetrzny rozjasniony wlos zostaje, ale slabszy — nad ostra kreska
     wystarczy delikatne podswietlenie gornej krawedzi gradientu */
  html.nav-open nav.main > .c8-drawer-cta::before {
    background: linear-gradient(90deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, .34),
      rgba(255, 255, 255, 0)) !important;
  }
}

/* Atrybucja pod naglowkiem tabeli w zakladce Dokumenty.
   Certyfikaty naleza do zakladow produkcyjnych grupy (PMiW Lukosz), a nie
   do ATLANTIS - INVESTMENT. Bez tego podpisu klient pobieral PDF z inna
   nazwa spolki niz ta w stopce serwisu. */
.docnote{margin:-6px 0 14px;font-size:13.5px;line-height:1.5;color:var(--gray,#5a5f73);max-width:78ch}

/* ============================================================
   HERO strony glownej — SCENA WIDEO (pioro indycze -> beta-keratyna).
   ------------------------------------------------------------
   Wideo NIE zastepuje karuzeli: jest jej pierwsza, dodatkowa scena.
   Trzy zdjecia zastosowan (uroda / stawy / sport) zostaja bez zmian,
   bo kazde z nich jest odnosnikiem do strony zastosowania — usuniecie
   ich skasowaloby trzy wejscia w nawigacji.
   Kolejnosc scen: [wideo: surowiec] -> [skora] -> [stawy] -> [sport],
   czyli "surowiec -> zastosowanie".

   Plik wideo dociaga skrypt w index.html i tylko wtedy, gdy:
   szerokosc >= 901px, brak prefers-reduced-motion, brak Save-Data.
   Do tego czasu (i zawsze ponizej 901px) widac obraz zastepczy WebP,
   ktory jest zwyklym <img> sceny — nigdy nie ma pustego prostokata.
   ============================================================ */

/* Mapa rozmytych teł przesuwa sie o jedna pozycje — scena 1 to teraz wideo. */
body:has(.hero-split) .hero-split .hero-slide:nth-child(2) { --c8-hero-image: url("hero-lifestyle.jpg"); }
body:has(.hero-split) .hero-split .hero-slide:nth-child(3) { --c8-hero-image: url("hero-lifestyle-joints.jpg"); }
body:has(.hero-split) .hero-split .hero-slide:nth-child(4) { --c8-hero-image: url("hero-lifestyle-sport.jpg"); }

/* Scena wideo: plaskie, ciemne pole zamiast rozmytej kopii zdjecia.
   Material jest nakrecony na czerni, wiec rozmyta kopia nic nie wnosi. */
body:has(.hero-split) .hero-split .hero-slide.c8-hero-scene--video::before {
  inset: 0;
  background: #05070f;
  background-image: none;
  filter: none;
  opacity: 1;
}

/* Wideo lezy dokladnie w tej samej ramce co zdjecia pozostalych scen
   (72% szerokosci, dosuniete do prawej, ta sama maska lewej krawedzi),
   dzieki czemu przejscie obraz -> film jest niewidoczne. */
body:has(.hero-split) .hero-split .hero-slide.c8-hero-scene--video video {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  z-index: 1;
  width: 72%;
  height: 100%;
  /* 2026-07-30: POWROT do `cover` — patrz uzasadnienie przy regule obrazu
     zastepczego (ok. linii 584). Skrocone: klip z menzurka, dla ktorego
     wprowadzono `contain`, juz nie istnieje, a `contain` na szerokim ekranie
     zostawial do 56% pustego miejsca obok filmu (2560 px).
     UWAGA: obie reguly — ta i ta dla obrazu zastepczego — MUSZA miec ten sam
     tryb, inaczej przy podmianie obraz na film kadr skacze. */
  object-fit: cover;
  object-position: center center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .42) 10%, #000 24%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .42) 10%, #000 24%, #000 100%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
/* Klase nadaje skrypt dopiero po zdarzeniu canplay — obraz zastepczy
   znika wylacznie wtedy, gdy jest juz czym go zastapic. */
body:has(.hero-split) .hero-split .hero-slide.c8-hero-scene--video video.is-ready { opacity: 1; }

/* Ponizej 901px wideo w ogole nie jest wstawiane; regula jest zabezpieczeniem
   na wypadek zmiany szerokosci okna juz po wstawieniu elementu. */
@media (max-width: 900px) {
  body:has(.hero-split) .hero-split .hero-slide.c8-hero-scene--video video { display: none; }
}

/* Ograniczony ruch: zawsze obraz zastepczy, nigdy film. */
@media (prefers-reduced-motion: reduce) {
  body:has(.hero-split) .hero-split .hero-slide.c8-hero-scene--video video { display: none !important; }
}

/* Wideo jest nakrecone na czerni, wiec przez pol-przezroczysta karte tekstu
   przebija ciemniejsze tlo niz przez zdjecia zastosowan. Pomiar na najjasniejszej
   klatce (t=4,30 s): kontrast akapitu lead spadal 7,13:1 -> 6,88:1, czyli tuz
   ponizej progu WCAG AAA. Dla samej sceny wideo dokladamy wiec kilka procent
   krycia w lewej czesci przyciemnienia — obszar i tak w calosci lezy pod karta. */
@media (min-width: 901px) {
  /* WYLACZNIE uklad dwukolumnowy. Ponizej 901px karta lezy pod pasmem obrazu
     i obowiazuje pionowe przyciemnienie z bloku max-width:900px — ta regula
     ma wyzsza specyficznosc (:has), wiec bez media query zepsulaby telefon. */
  body:has(.hero-split) .hero-split .photo:has(.c8-hero-scene--video.is-active)::before {
    background:
      /* 2026-07-29: rozjasnienie po lewej USUNIETE na prosbe wlasciciela.
         Scena wideo dostawala tu MOCNIEJSZA biel (.99 zamiast .92 w regule
         bazowej), zeby podbic kontrast naglowka — efekt byl taki, ze film
         robil sie wyprany dokladnie wtedy, gdy mial byc widoczny.
         Naglowek tej warstwy nie potrzebuje: lezy na panelu z wlasnym tlem
         (.94) i backdrop-filter blur(18px). FILM ZOSTAJE BEZ BIELI.

         Zapis czteropunktowy zamiast trzypunktowego wyglada identycznie:
         punkt na 71% lezy dokladnie na tej samej prostej
         (.12 * (71-42)/(100-42) = .06). */
      linear-gradient(90deg, rgba(238, 247, 253, 0) 0%, rgba(238, 247, 253, 0) 42%, rgba(9, 16, 48, .06) 71%, rgba(9, 16, 48, .12) 100%),
      linear-gradient(180deg, rgba(10, 19, 58, .02), rgba(8, 15, 46, .12));
  }

  /* ---------- Rozjasnienie pod kaflem — TYLKO sceny ze zdjeciem ----------
     2026-07-30, prosba wlasciciela: „dla zdjec musi wrocic to rozjasnienie
     za tym naszym kafelkiem".
     Wartosci sa 1:1 z ery zdjec (commit 478c616, sprzed fix26), bo o tamten
     wyglad chodzi. Ta zaslona wlasnie dla zdjec powstala: wtapia kafel
     tekstowy w obraz, zamiast stawiac go na ostrej krawedzi.

     KLUCZOWE — warstwa siedzi na SLAJDZIE, nie na kontenerze.
     Wersja na kontenerze (`.photo::before` + `:has(...is-active)`) przelacza
     sie w jednej klatce, podczas gdy slajdy przenikaja 0,55 s. Zmierzone:
     w chwili 0 ms przejscia film -> zdjecie film byl jeszcze w pelnym kryciu,
     a biel juz wlaczona — czyli przez pol sekundy film byl wyprany, dokladnie
     to, co mielismy usunac, i to trzy razy na cykl.
     `transition: background` tego nie ratuje — przegladarka nie animuje
     gradientu miedzy stanami (zmierzone: krycie skakalo 0 -> 0,92 od razu).
     Na slajdzie warstwa dziedziczy jego krycie, wiec przenika razem z obrazem
     bez zadnego dodatkowego mechanizmu.

     Tylko desktop: ponizej 901px kafel lezy POD pasmem obrazu, wiec zdjecie
     ma zostac czyste (patrz @media max-width:900px — „brak wybielajacego fade"). */
  body:has(.hero-split) .hero-split .hero-slide.c8-hero-scene--foto::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* TYLKO rozjasnienie, zero przyciemnienia — i to jest poprawka do pierwszej
       wersji. Oryginalna zaslona z ery zdjec robila dwie rzeczy naraz:
       rozjasniala lewa strone pod kaflem i przyciemniala prawa oraz dol.
       Wtedy byla JEDYNA warstwa. Dzis przyciemnienie prawej krawedzi daje juz
       `.photo::before` na kontenerze, wiec przeniesienie calego oryginalu tutaj
       nalozylo je drugi raz i zdjecia zrobily sie ciemniejsze niz przedtem.
       Zmierzone na trzech slajdach ze zdjeciem, prawa czesc kadru:
         z ciemnymi punktami   98,3
         bez nich             124,6
         przed cala zmiana    122,1
       Wersja bez ciemnych punktow oddaje wiec zdjecie takie, jakie bylo,
       a rozjasnienie pod kaflem zostaje nietkniete (lewa 208,6 w obu). */
    background:
      linear-gradient(90deg, rgba(238, 247, 253, .92) 0%, rgba(238, 247, 253, .67) 36%, rgba(238, 247, 253, 0) 64%);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   WIEDZA — WSTRZYMANA DO PRZEGLĄDU MERYTORYCZNEGO (2026-08-05)

   Technolog poprosił o zablokowanie bazy wiedzy do czasu przejrzenia treści.
   Powód jest konkretny: artykuły nadal mówią o kolagenie „typu I i III" oraz
   o keratynie bez „β-", czyli dokładnie to, co poprawiliśmy na stronach
   produktowych. Zostawienie ich widocznymi oznaczałoby, że serwis sam sobie
   zaprzecza — karta produktu mówi jedno, artykuł obok drugie.

   DLACZEGO STYLEM, A NIE USUNIĘCIEM ZNACZNIKÓW: to stan TYMCZASOWY. Wycinanie
   markupu ze 130 plików byłoby nieodwracalne bez kolejnej dużej operacji,
   a tutaj chodzi o przełącznik. Odblokowanie = skasowanie tego bloku.

   CO ZNIKA: pozycja „Wiedza" w menu głównym wraz z całym megamenu (karuzela
   polecanych, lista artykułów, odnośnik do huba) oraz „Baza wiedzy" w stopce.
   Same pliki artykułów zostają na dysku — nie ma do nich żadnego przejścia
   z interfejsu, ale nic nie ginie.

   PO PRZEJRZENIU TREŚCI: usunąć cały ten blok i poprawić artykuły
   (typ II, β-keratyna) tak samo jak strony produktowe.
   ══════════════════════════════════════════════════════════════════════════ */
nav.main .hasdrop.c8-kb,
.c8-kb-menu {
  display: none !important;
}
footer a[href$="wiedza.html"] {
  display: none !important;
}

/* Pasek tematów: pozycje wiodące do wstrzymanych artykułów Wiedzy.
   Ukrywamy WYBIÓRCZO — ten sam pasek na stronach produktów wiezie linki do
   produktów i te mają zostać. */
.topic-ticker__item[href$="audyt-dostawcy-surowca-checklista.html"],
.topic-ticker__item[href$="claimy-kolagen-suplement-1924-2006.html"],
.topic-ticker__item[href$="hydrolizat-bialka-do-zup-i-sosow.html"],
.topic-ticker__item[href$="hydrolizat-drobiowy-petfood-czego-wymagac.html"],
.topic-ticker__item[href$="keratyna-do-szamponu-odzywki-maski-dozowanie.html"],
.topic-ticker__item[href$="keratyna-piora-welna-weganska-roznice.html"],
.topic-ticker__item[href$="kolagen-ha-chondroityna-glukozamina-jeden-skladnik.html"],
.topic-ticker__item[href$="kolagen-rybi-wolowy-indyczy-porownanie.html"],
.topic-ticker__item[href$="kolagen-typu-ii-a-typu-i-stawy.html"],
.topic-ticker__item[href$="masa-czasteczkowa-hydrolizatu-da.html"],
.topic-ticker__item[href$="mikrobiologia-surowca-iso-17516-kosmetyki.html"],
.topic-ticker__item[href$="pioro-indycze-beta-keratyna-circular-economy.html"],
.topic-ticker__item[href$="rozpuszczalnosc-bialka-napoje-shoty-saszetki.html"],
.topic-ticker__item[href$="wolne-aminokwasy-keratyna-microp-suplementy.html"],
.topic-ticker__item[href$="zelatyna-a-peptydy-kolagenowe-roznice.html"] {
  display: none !important;
}