@import url("vendor/fonts/plus-jakarta-sans-italic-e4jvQNU.css");
@import url("components/brand-logo-e2O2T1S.css");

/* Migrated from public/assets/homepage/style/style.css to Asset Mapper (2026-04-13)
   Notes: Paths updated to use relative Asset Mapper locations under assets/homepage/img. */

body, p {font-family: "Plus Jakarta Sans", sans-serif;}

.desktop-nav__group { display: flex; align-items: center; gap: 12px; }
.desktop-nav__submenu { opacity: .9; }
.desktop-nav__submenu a:hover, .desktop-nav a:hover { text-decoration: underline; }

/* ===== Base / typography ===== */
#main { overflow: hidden; }
section { width: 100%; }
body, p { font-size: 15px; font-weight: 300; letter-spacing: 0.2px; }
strong { font-weight: 600; }
h2 { font-size: 24px; font-weight: 700; }

/* Utility */
.mt-50 { margin-top: 50px; }
.mt-75 { margin-top: 75px; }

/* Bootstrap container gutters override */
.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
  padding-right: calc(var(--bs-gutter-x) * 1);
  padding-left: calc(var(--bs-gutter-x) * 1);
}
.row { margin-right: calc(-1 * var(--bs-gutter-x)); margin-left: calc(-1 * var(--bs-gutter-x)); }
.row > * { padding-right: calc(var(--bs-gutter-x) * 1); padding-left: calc(var(--bs-gutter-x) * 1); }

/* ===== Navbar ===== */
/* Mobile/tablet headbar (this .navbar is d-lg-none — desktop uses a separate <header>).
   Opaque white background + subtle shadow so it never blends with the content scrolling under it,
   pinned to the very top (no gap above) with iOS safe-area padding. It is already Bootstrap
   `.sticky-top` (position:sticky; top:0; z-index:1020). We keep a constant background rather than a
   scroll-driven two-state effect because the scroll script (main.js) is not loaded — stable > fancy. */
.navbar {
  padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
  padding-bottom: 10px;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(9, 36, 57, 0.10);
}
/* Anchor links (#main, #pakiety, #jak-to-dziala…): offset for the sticky mobile headbar so a
   jumped-to section top is not hidden underneath it. Only mobile/tablet — the desktop <header>
   is not sticky. */
@media (max-width: 991.98px) {
  html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 82px); }
}
/* Smooth jump for the in-page nav anchors; disabled when the user asks for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* inline-flex: the logo <img> is display:block (shared brand-logo.css). An inline .navbar-brand
   wrapping a block child splits the navy background into two pieces; inline-flex wraps it tightly
   so the pill stays one solid shape around the whole logo. */
.navbar-brand { display: inline-flex; align-items: center; background-color: #092439; border-radius: 0 50px 50px 0; padding: 15px 40px; margin-left: -40px; }
.navbar-brand img { width: var(--cd-logo-width-md); }
.navbar-nav { padding: 30px; text-align: center; font-size: 13px; text-transform: uppercase; font-weight: 600; }
.nav-link { padding: 12px; }
.navbar-collapse { position: absolute; top: 90px; left: 0; width: calc(100vw - calc(var(--bs-gutter-x) * 2)); margin-left: calc(var(--bs-gutter-x) * 1); background-color: #fff; border-radius: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
.navbar-collapse .d-grid { padding: 0 30px 30px; }

/* Burger toggler */
.toggler { border: none; padding: 0.25rem 0.4rem; background: transparent; box-shadow: none; display: flex; align-items: center; width: 50px; height: 50px; background-color: #fff; border-radius: 50%; justify-content: center; margin-right: -10px; }
.toggler:focus, .toggler:active, .toggler:focus-visible { outline: none; box-shadow: none; }
.burger { display: inline-flex; flex-direction: column; gap: 6px; width: 28px; height: 22px; justify-content: center; transition: transform 0.2s ease; }
.burger span { display: block; height: 2px; width: 100%; background: #212529; border-radius: 999px; transition: transform 0.25s ease, opacity 0.25s ease, width 0.25s ease; }
.toggler[aria-expanded="true"] .burger { transform: rotate(0deg); }
.toggler[aria-expanded="true"] .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.toggler[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; width: 0; }
.toggler[aria-expanded="true"] .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Sticky behavior */
.navbar.sticky-top { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.navbar.sticky-top.sticky-move { transform: translateY(-20px); }
.navbar.sticky-top.sticky-move .navbar-brand { padding: 10px 30px; }
.navbar.sticky-top.sticky-move .navbar-brand img { width: 120px; }
.navbar.sticky-top.sticky-move .toggler { box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }

/* Helper */
.motion { transition: 200ms ease-in-out !important; -moz-transition: 200ms ease-in-out !important; -ms-transition: 200ms ease-in-out !important; -o-transition: 200ms ease-in-out !important; }

/* ===== Hero ===== */
.hero__title { font-weight: 700; color: #092439; font-size: 30px; margin-bottom: 30px; }
.hero__title span { font-weight: 800; color: #0ba00b; }
/* Trzy linie pod H1. Hierarchia jest typograficzna, nie kolorystyczna:
   podnagłówek (większy, półgruby) → opis (zwykły) → puenta (gruba).
   Zieleń zostaje wyłącznie w H1, żeby hero nie robiło się głośne. */
.hero__lead { margin-bottom: 12px; font-size: 18px; font-weight: 600; line-height: 1.4; color: #092439; }
.hero__description { margin-bottom: 12px; }
.hero__tagline { margin-bottom: 30px; font-weight: 700; color: #092439; }
/* ⛔ ZIELEŃ = DZIAŁANIE, także w pasku nawigacji.
   „Wypróbuj za darmo" i „Uruchom okres próbny" prowadzą pod TEN SAM adres rejestracji,
   więc dwa kolory dla jednej czynności na jednym ekranie były wprost tym, na co skarży
   się zlecenie: kolor przestawał cokolwiek znaczyć. Niebieski był przy tym najcichszym
   elementem na stronie pełnej zieleni.

   Odcień ZMIERZONY, nie przepisany: biel na `#0a7c2c` daje 5,34 : 1 (próg 4,5), podczas
   gdy zieleń z makiety `#0fa83c` dałaby 3,14 : 1 — czyli etykieta najważniejszego
   przycisku byłaby najtrudniejsza do odczytania na całej stronie.

   `.btn-primary` występuje na stronach publicznych DOKŁADNIE dwa razy i oba razy jest
   tym samym wezwaniem w nagłówku (wersja mobilna i desktopowa). Sprawdzone, nie założone. */
.btn-primary { background-color: #0a7c2c; border-radius: 50px; font-size: 13px; padding: 15px 25px; border: 0; font-weight: 400; }
.btn-primary:hover { background-color: #097026; border: 0px; }
.hero__img { border-radius: 25px; box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.5); margin-bottom: 50px; }

/* Hero video */
.hero__media { z-index: 1; }
.hero__media::before { content: ""; position: absolute; z-index: 0; inset: -10% -8% -14% -4%; background: radial-gradient(58% 58% at 68% 42%, rgba(11, 160, 11, 0.18), rgba(67, 110, 153, 0.14) 46%, rgba(255, 255, 255, 0) 72%); filter: blur(42px); pointer-events: none; }
.hero__video { position: relative; z-index: 1; aspect-ratio: 16 / 9; border-radius: 25px; overflow: hidden; background: #092439; box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.5); margin-bottom: 50px; }
.hero__video-el { display: block; width: 100%; height: 100%; object-fit: cover; background: #092439; }
/* Play button: shared translucent component — see styles/components/video-play.css (.video-play) */

/* Hero carousel */
#heroCarousel { position: absolute; right: -20px; bottom: 0; width: 70vw; background-color: #092439; z-index: 1; border-radius: 30px; padding: 25px 25px 45px; }
.hero__slide { min-height: 70px; color: #fff; font-size: 15px; }

/* Social mini blocks */
.hero__sm { position: absolute; width: 60px; height: 60px; bottom: 50px; background-color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 20px; box-shadow: 0 0 10px -2px #42445a; will-change: transform; }
.ig-icon { left: -15px; bottom: 100px; width: 70px; height: 70px; }
.fb-icon { left: 40px; bottom: 150px; width: 40px; height: 40px; border-radius: 10px; }
.hero__sm-icon { padding: 5px; width: 40px; }

/* Carousel indicators */
.carousel-indicators [data-bs-target] { width: 6px; height: 6px; border-radius: 50%; background-color: #092439; border: 1px solid #fff; }
.carousel-indicators .active { background-color: #fff; }

/* Vertical ticker */
.v-ticker { position: absolute; right: calc(var(--bs-gutter-x) * 1); top: 50%; transform: translateY(-50%); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%); }
.v-ticker__item { display: flex; align-items: center; padding: 8px 20px; border-radius: 999px; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); font-size: 13px; white-space: nowrap; width: max-content; }

/* Nagłówki sekcji (globalna baza; dawny alias .producer-title zdjęty razem
   ze starą sekcją problemów — patrz .problems niżej) */
h2 { font-size: 28px; font-weight: 700; line-height: 1.2; margin-bottom: 32px; }

/* ===== Sekcja problemu (.problems) =====
   Zastąpiła dawny blok statystyk z ikonami (card-box) i listę bólów
   (producer-list/producer-footer). Paleta z tokenów landingu (--legal-*),
   granat puenty z --kz-pillar-* — ta sama rodzina ciemnej karty co filar
   Strefy wiedzy, demo-cta i panel marki w .benefits-duo. Czerwień #d64545
   jest LOKALNA dla tej sekcji (marka czerwieni nie ma) — stąd zmienna --pb-red,
   a nie token globalny. Zieleń akcentu na granacie jak w demo-cta (#5fd97f). */
.problems {
  --pb-red: #d64545;
  --pb-green: var(--legal-green, #0ba00b);
  --pb-accent: #5fd97f;
  --pb-muted: #5c6478;
  --pb-faint: #9aa3b5;
  --pb-line: var(--legal-line, #e5e7eb);
  padding: 56px 0 0;
  background: linear-gradient(180deg, #fbfcfe 0%, #f6f8fb 100%);
}

/* Nagłówek */
.problems__head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.problems__eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pb-red); background: rgba(214, 69, 69, .07); border: 1px solid rgba(214, 69, 69, .2); padding: 7px 16px; border-radius: 100px; margin-bottom: 18px; }
.problems__title { font-size: 38px; line-height: 1.15; letter-spacing: -.02em; font-weight: 800; color: var(--legal-navy, #092439); margin-bottom: 0; }
.problems__title em { font-style: normal; color: var(--pb-red); }

/* Duże karty statystyk z paskiem 10 segmentów (dekoracja, aria-hidden) */
.problems__bigstat { background: #fff; border: 1px solid var(--pb-line); border-radius: 16px; padding: 28px 30px; box-shadow: 0 4px 14px rgba(9, 36, 57, .05); }
.problems__num { font-size: 44px; font-weight: 800; letter-spacing: -.03em; color: var(--pb-red); line-height: 1; }
.problems__lbl { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--legal-navy, #092439); font-weight: 600; }
.problems__lbl small { display: block; font-weight: 400; color: var(--pb-muted); font-size: 13.5px; margin-top: 3px; }
.problems__squares { display: flex; gap: 6px; margin-top: 18px; }
.problems__sq { flex: 1; height: 12px; border-radius: 4px; background: #dfe5ee; }
.problems__sq--on { background: var(--pb-green); }
.problems__sq--off { background: repeating-linear-gradient(45deg, #e8b1b1, #e8b1b1 3px, #f3d4d4 3px, #f3d4d4 6px); }
.problems__squares-cap { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 11.5px; color: var(--pb-faint); }

/* Karty faktów: chipy miejsc + PDF z przekreśleniem */
.problems__facts { margin-top: 0; margin-bottom: 44px; }
.problems__fact { background: #fff; border: 1px solid var(--pb-line); border-radius: 16px; padding: 22px 26px; box-shadow: 0 4px 14px rgba(9, 36, 57, .05); }
.problems__fact > b { display: block; font-size: 15.5px; font-weight: 700; color: var(--legal-navy, #092439); margin-bottom: 10px; }
.problems__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.problems__chip { font-size: 12.5px; font-weight: 600; color: var(--pb-muted); background: #f1f4f9; border: 1px solid var(--pb-line); padding: 5px 12px; border-radius: 100px; }
.problems__chip--ghost { border-style: dashed; color: var(--pb-faint); font-style: italic; }
/* Wiersz drugiej karty faktów. Ikona wyrównana do GÓRY tekstu (nie do środka):
   treść to teraz dwa pełne zdania o koszcie szkoleń, a nie jedna linijka. */
.problems__factrow { display: flex; align-items: flex-start; gap: 12px; }
.problems__factico { flex: 0 0 42px; height: 42px; border-radius: 10px; background: rgba(214, 69, 69, .08); display: flex; align-items: center; justify-content: center; }
.problems__factico svg { width: 20px; height: 20px; stroke: var(--pb-red); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.problems__factrow span { font-size: 13.5px; color: var(--pb-muted); line-height: 1.5; }

/* Pięć kart bólu: czerwone ✕ — lustrzane odbicie zielonych checków korzyści.
   Układ 3 + 2 z WYŚRODKOWANYM drugim rzędem. Bootstrapowe .row/.col przyklejałyby
   dwie ostatnie karty do lewej krawędzi, co czyta się jak brakująca trzecia karta,
   dlatego ta jedna siatka jest flexem, a nie kolumnami Bootstrapa.
   Progi 1120 / 720 px są własne dla tej sekcji (Bootstrap łamie na 992 px). */
.problems__pains { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.problems__pain-cell { flex: 0 1 calc((100% - 2 * 16px) / 3); min-width: 0; display: flex; }
.problems__pain-cell > .problems__pain { width: 100%; }
.problems__pain-head { text-align: center; font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--legal-navy, #092439); margin-bottom: 22px; }
.problems__pain { background: #fff; border: 1px solid var(--pb-line); border-radius: 16px; padding: 26px 24px; box-shadow: 0 4px 14px rgba(9, 36, 57, .05); }
.problems__pain-top { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.problems__pain-ico { flex: 0 0 38px; height: 38px; border-radius: 10px; background: rgba(9, 36, 57, .06); display: flex; align-items: center; justify-content: center; }
.problems__pain-ico svg { width: 19px; height: 19px; stroke: var(--legal-navy, #092439); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.problems__pain-top b { font-size: 16.5px; font-weight: 800; color: var(--legal-navy, #092439); }
.problems__p-item { display: flex; gap: 10px; padding: 9px 0; font-size: 13.5px; line-height: 1.5; color: #3b4358; }
.problems__p-item + .problems__p-item { border-top: 1px solid var(--pb-line); }
.problems__x { flex: 0 0 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: rgba(214, 69, 69, .1); display: flex; align-items: center; justify-content: center; }
.problems__x svg { width: 9px; height: 9px; stroke: var(--pb-red); stroke-width: 2.5; stroke-linecap: round; }

/* MODYFIKATORY układu kart bólu — MUSZĄ stać po regule bazowej .problems__pain-cell
   powyżej; przy równej specyficzności wygrywa reguła późniejsza. */
@media (max-width: 1120px) {
  .problems__pain-cell { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 720px) {
  .problems__pain-cell { flex-basis: 100%; }
}

/* Puenta — pas na pełną szerokość sekcji (poza .container), domyka sekcję */
.problems__verdict { margin-top: 52px; background: linear-gradient(160deg, var(--kz-pillar-from, #0e1e38) 0%, var(--kz-pillar-to, #16294a) 100%); padding: 56px 56px 60px; text-align: center; }
.problems__verdict h3 { font-size: 32px; line-height: 1.25; letter-spacing: -.02em; font-weight: 800; color: #fff; margin: 0; }
.problems__verdict h3 span { display: block; color: var(--pb-accent); }
.problems__verdict p { margin: 14px 0 0; font-size: 15.5px; color: #aeb8c6; }
.problems__down { margin-top: 26px; display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--pb-accent); text-decoration: none; border: 1px solid rgba(95, 217, 127, .35); background: rgba(15, 158, 16, .14); padding: 12px 22px; border-radius: 100px; transition: background .15s ease; }
.problems__down:hover, .problems__down:focus { color: var(--pb-accent); background: rgba(15, 158, 16, .24); }
.problems__down:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 3px; }
.problems__down svg { width: 15px; height: 15px; stroke: var(--pb-accent); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* Poniżej md/lg siatki składa Bootstrap (col-md-6 / col-lg-4);
   tu tylko mniejsza typografia i ciaśniejsza puenta. */
@media (max-width: 767.98px) {
  .problems { padding: 40px 0 0; }
  .problems__title { font-size: 29px; }
  .problems__verdict { padding: 44px 24px; }
  .problems__verdict h3 { font-size: 25px; }
}

/* ===== PRODUCER BENEFITS BLOCK =====
   Lista .producer-benefits__list żyje dalej: używają jej sekcje „Moduły"
   i „Jak to działa". Karta/grafika dawnych dwóch list korzyści zostały
   zastąpione sekcją .benefits-duo (niżej). */
.producer-benefits__list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 14px; }
.producer-benefits__list li { line-height: 1.35; display: flex; gap: 10px; align-items: flex-start; }

/* ===== Wspólny znacznik: zielone koło z białym checkiem =====
   Spójny wizualnie z .check-icon ze strony rejestracji producenta
   (auth-public.css). Check rysowany jako SVG (bez emoji, bez zależności
   od fontu ikon), dzięki czemu wygląda identycznie na każdym systemie. */
.feature-check-icon {
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #0ba00b;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.6l2.7 2.7L12 5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    margin-top: 1px;
    margin-right: 10px;
}

/* W liście korzyści gap obsługuje odstęp – nie dublujmy prawego marginesu */
.producer-benefits__list .feature-check-icon { margin-right: 0; }

/* Mobile: nieco mniejsze koło, aby nie dominowało nad tekstem */
@media (max-width: 575.98px) {
    .feature-check-icon {
        width: 20px;
        height: 20px;
        background-size: 12px 12px;
        margin-right: 8px;
    }
}
/* ===== Pricing table (Bootstrap 5) ===== */
.pricing-card { position: relative; background: #fff; overflow: hidden; min-height: 100%; }
.pricing-card__inner { display: flex; flex-direction: column; height: calc(100% - 50px); border-radius: 30px; margin-top: 50px; position: relative; z-index: 1; background-color: #fff; border: 2px solid #eee; }
.pricing-card__content { padding: 46px 46px 22px; }
.pricing-card__cta { padding: 0 46px 42px; margin-top: auto; }
.pricing-title { font-weight: 700; font-size: 44px; letter-spacing: -0.02em; margin: 0 0 6px; }
.pricing-subtitle { margin: 0; color: #333; }
.pricing-divider { margin: 28px 0 26px; opacity: 1; border: 0; height: 2px; background: #dadada; }
.pricing-price { display: flex; align-items: flex-end; gap: 10px; line-height: 1; margin-bottom: 6px; }
.pricing-price__value { font-size: 64px; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; }
/* Długie kwoty (rozliczenie roczne, np. „16 990,00") — mniejszy font zamiast rozjeżdżania karty.
   Klasę przełącza setMode() w pricing_cards_homepage.html.twig. */
.pricing-price__value--long { font-size: 42px; }
.pricing-price__currency { font-size: 20px; font-weight: 700; }
.pricing-price__note { color: #333; font-size: 14px; margin-bottom: 26px; }
/* Tryb roczny (atrybut hidden zdejmuje setMode()): suma za cały rok + oszczędność vs plan
   miesięczny. Ujemne marginesy górne zwężają odstępy między trzema wierszami pod ceną. */
.pricing-price__total { color: #333; font-size: 14px; margin: -20px 0 26px; }
.pricing-price__bonus { color: #0ba00b; font-weight: 700; font-size: 13px; margin: -20px 0 26px; }
.pricing-list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; font-size: 15px; }
.pricing-check { display: inline-flex; width: 18px; margin-right: 0; margin-left: -18px; font-weight: 800; color: #2b6cb0; }
.pricing-list--noicons .pricing-check { display: none; }
.pricing-trial { margin: 18px 0 0; color: #16a34a; font-weight: 700; font-size: 13px; }
.pricing-btn { border-radius: 999px; padding: 12px 22px; font-weight: 700; border: 0; }
/* Badges (top pill) */
.pricing-badge { position: absolute; top: 0; left: 0; right: 0; height: 70px; padding-bottom: 20px; z-index: 0; display: flex; align-items: center; justify-content: center; background: #3e6c93; color: #fff; font-weight: 700; font-size: 12px; border-top-left-radius: 30px; border-top-right-radius: 30px; }
/* Color variants */
.pricing-card--start { border-color: #e0e0e0; }
.pricing-card--pro { border-color: #2f5f86; }
.pricing-divider--pro { background: #2f5f86; }
.pricing-check--pro { color: #2f5f86; }
.pricing-card--enterprise { border-color: #138a12; }
.pricing-badge--green { background: #138a12; }
.pricing-divider--green { background: #138a12; }

/* ===== Pricing slider: base ===== */
.pricing-slider__track { display: flex !important; flex-wrap: nowrap !important; }

/* ===== Sekcja „Jak to działa?" (/* ── Sekcja A: „Jeden produkt. Cała sieć w działaniu." ─────────────────────────
   Zastąpiła oś kroków .how-steps (reguły tamtej sekcji zostają w pliku razem
   z martwymi kluczami — PARK: LANDING-KLUCZE-MARTWE).
   Tokeny lokalne sekcji, tak jak w .problems (--pb-*) i .benefits-duo (--bd-*).
   Kontrast: --ho-muted 5,1:1 na bieli, --ho-green-text 5,4:1 na bieli (mały tekst),
   --ho-green tylko w tekście ≥24 px (próg 3:1). */
.how-one {
  --ho-navy: var(--legal-navy, #092439);
  --ho-body: #47586B;          /* ~6,4:1 na bieli */
  --ho-muted: #5B7186;         /* ~5,1:1 na bieli */
  --ho-green: var(--legal-green, #0ba00b);
  --ho-green-text: #0F7A37;    /* zieleń dla MAŁEGO tekstu — ~5,4:1 na bieli */
  --ho-green-soft: #E9F7EF;
  --ho-line: var(--pb-line, #e5e7eb);
  --ho-chip: #EDF1F5;
}
.how-one__head { text-align: center; max-width: 780px; margin: 0 auto 34px; }
.how-one__eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ho-green-text); background: var(--ho-green-soft); border-radius: 100px; padding: 6px 14px; }
.how-one__title { margin: 16px 0 0; font-size: 40px; line-height: 1.15; letter-spacing: -.02em; font-weight: 800; color: var(--ho-navy); }
.how-one__title span { display: block; }
.how-one__lead { margin: 18px 0 0; font-size: 19px; font-weight: 600; color: var(--ho-navy); }
.how-one__sublead { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--ho-muted); }

/* Siatka kafli: minmax(0,1fr), nie 1fr — długie niemieckie słowo (POS-Bestellungen)
   rozepchnęłoby kolumnę, bo 1fr znaczy minmax(auto,1fr). */
.how-one__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.how-one__tile { position: relative; min-width: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ho-line); border-radius: 16px; padding: 22px 20px 20px; box-shadow: 0 4px 14px rgba(9, 36, 57, .05); hyphens: auto; }
.how-one__tile-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.how-one__num { font-size: 13px; font-weight: 800; color: var(--ho-green-text); letter-spacing: .04em; }
/* Kolor plakietki kategorii to --ho-body, nie --ho-muted: przy tle --ho-chip (#EDF1F5)
   wyciszony odcień daje 4,46:1, czyli poniżej progu 4.5:1 dla małego tekstu (zmierzone). */
.how-one__tag { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ho-body); background: var(--ho-chip); border-radius: 100px; padding: 4px 10px; }
/* Nagłówek kafla to JEDNO zdanie złamane na dwa wiersze — stąd dwa <span>, nie dwa nagłówki. */
.how-one__headline { margin: 0 0 10px; display: flex; flex-direction: column; gap: 2px; }
.how-one__verb { font-size: 15px; font-weight: 500; color: var(--ho-muted); }
.how-one__what { font-size: 20px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; color: var(--ho-navy); overflow-wrap: anywhere; }
.how-one__desc { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--ho-body); }
.how-one__module { margin-top: auto; align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--ho-green-text); background: var(--ho-green-soft); border: 1px solid rgba(15, 122, 55, .18); border-radius: 100px; padding: 5px 12px; overflow-wrap: anywhere; }
.how-one__arrow { position: absolute; top: 50%; right: -14px; transform: translateY(-50%); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--ho-muted); }
.how-one__arrow svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* Pasek domykający: ikona + zdanie + CTA */
.how-one__outcome { margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: linear-gradient(180deg, #F6F8FB 0%, #fff 100%); border: 1px solid var(--ho-line); border-radius: 16px; padding: 20px 22px; }
.how-one__outcome-ico { flex: 0 0 42px; height: 42px; border-radius: 12px; background: var(--ho-green-soft); display: flex; align-items: center; justify-content: center; }
.how-one__outcome-ico svg { width: 20px; height: 20px; stroke: var(--ho-green-text); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.how-one__outcome-txt { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.how-one__outcome-txt b { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--ho-navy); }
.how-one__outcome-txt > span { font-size: 14px; line-height: 1.5; color: var(--ho-body); }
/* Tło przycisku to #088a08, a nie --ho-green (#0ba00b): biały tekst 15px/700 na zieleni
   markowej daje 3,47:1, czyli poniżej progu 4,5:1. #088a08 to odcień, którego landing już
   używa jako stanu hover innych zielonych CTA — 4,52:1, bez wprowadzania nowego koloru. */
.how-one__btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff; background: #088a08; border-radius: 100px; padding: 13px 26px; text-decoration: none; transition: background .15s ease; }
.how-one__btn:hover, .how-one__btn:focus { color: #fff; background: #077507; }
.how-one__btn:focus-visible { outline: 2px solid var(--ho-navy); outline-offset: 3px; }

/* Wyróżnienie z tłumaczeń (filtr landing_markup). Zieleń w tekście DUŻYM (h2 40 px)
   korzysta z --ho-green (próg 3:1); w tekście małym — z --ho-green-text (4,5:1). */
.lp-accent { color: var(--ho-green-text); }
.how-one__title .lp-accent { color: var(--ho-green); }

/* MODYFIKATORY responsywne — stoją PO regułach bazowych powyżej; przy równej
   specyficzności wygrywa reguła późniejsza. */
@media (max-width: 1080px) {
  .how-one__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Strzałki znikają razem z rzędem czterech kafli — kolejność niesie numer. */
  .how-one__arrow { display: none; }
}
@media (max-width: 620px) {
  .how-one__grid { grid-template-columns: minmax(0, 1fr); }
  .how-one__title { font-size: 30px; }
  .how-one__lead { font-size: 17px; }
  .how-one__outcome { padding: 18px; }
  .how-one__btn { flex: 1 1 100%; }
}

.how-steps) =====
   Zastąpiła układ na pełnoekranowym zdjęciu (bg_phone*.webp) z ciemną nakładką.
   Paleta z tokenów landingu (--legal-*); numer w granatowym kółku dostaje
   jasną zieleń #5fd97f — to samo mapowanie makietowego #4fd950, co akcent
   na granacie w demo-cta, .benefits-duo i .problems. */
.how-steps {
  --hs-green: var(--legal-green, #0ba00b);
  --hs-accent: #5fd97f;
  --hs-blue: var(--legal-blue, #436e99);
  --hs-muted: #5c6478;
  --hs-line: var(--legal-line, #e5e7eb);
  padding: 56px 0 60px;
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(67, 110, 153, .07), transparent 60%),
    linear-gradient(180deg, #fbfcfe 0%, #f6f8fb 100%);
}

/* Nagłówek */
/* 860 px, nie 760 jak w makiecie: Plus Jakarta Sans jest szersza od fontu
   prototypu i przy 760 px druga linia H2 (po <br>) łamała się na trzy. */
.how-steps__head { text-align: center; max-width: 860px; margin: 0 auto 44px; }
.how-steps__eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hs-blue); background: rgba(67, 110, 153, .08); border: 1px solid rgba(67, 110, 153, .22); padding: 7px 16px; border-radius: 100px; margin-bottom: 18px; }
.how-steps__title { font-size: 36px; line-height: 1.2; letter-spacing: -.02em; font-weight: 800; color: var(--legal-navy, #092439); margin-bottom: 0; }
.how-steps__title em { font-style: normal; color: var(--hs-green); }

/* Karty kroków; równą wysokość daje siatka Bootstrapa (align-items-stretch + h-100) */
.how-steps__step { position: relative; background: #fff; border: 1px solid var(--hs-line); border-radius: 16px; padding: 24px 22px; box-shadow: 0 4px 14px rgba(9, 36, 57, .05); display: flex; flex-direction: column; }
.how-steps__step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.how-steps__num { width: 40px; height: 40px; border-radius: 50%; background: var(--legal-navy, #092439); color: var(--hs-accent); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.how-steps__role { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; }
.how-steps__role--you { background: rgba(9, 36, 57, .07); color: var(--legal-navy, #092439); border: 1px solid rgba(9, 36, 57, .15); }
.how-steps__role--partner { background: rgba(67, 110, 153, .1); color: var(--hs-blue); border: 1px solid rgba(67, 110, 153, .28); }
.how-steps__step b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--legal-navy, #092439); margin-bottom: 6px; line-height: 1.3; }
.how-steps__step > span { font-size: 13.5px; line-height: 1.55; color: var(--hs-muted); }

/* Strzałka między kartami — na krawędzi, w połowie wysokości kółka z numerem.
   Odsunięcie liczone od rynny siatki (g-lg-4 = 24 px między kartami):
   środek strzałki 24 px trafia w środek przerwy. Na mobile obraca się w dół
   i celuje w środek rynny pionowej g-3 (16 px). */
.how-steps__arrow { position: absolute; z-index: 2; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 1px solid var(--hs-line); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(9, 36, 57, .08); top: auto; bottom: -20px; right: auto; left: 50%; transform: translateX(-50%) rotate(90deg); }
.how-steps__arrow svg { width: 11px; height: 11px; stroke: var(--hs-green); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 992px) {
  .how-steps__arrow { top: 32px; bottom: auto; left: auto; right: -24px; transform: none; }
}

/* Chipy Facebook/Instagram w kroku 03 */
.how-steps__socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.how-steps__social { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--hs-blue); background: rgba(67, 110, 153, .08); border: 1px solid rgba(67, 110, 153, .22); padding: 5px 11px; border-radius: 100px; }
.how-steps__social svg { width: 13px; height: 13px; stroke: var(--hs-blue); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Pasek efektu */
.how-steps__outcome { margin-top: 36px; background: #fff; border: 1px solid var(--hs-line); border-radius: 16px; padding: 24px 32px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 26px; box-shadow: 0 4px 14px rgba(9, 36, 57, .05); }
.how-steps__outcome-lead { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a93a8; }
.how-steps__check { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--legal-navy, #092439); }
.how-steps__check i { width: 22px; height: 22px; border-radius: 50%; background: rgba(11, 160, 11, .12); display: flex; align-items: center; justify-content: center; font-style: normal; flex: 0 0 auto; }
.how-steps__check svg { width: 11px; height: 11px; stroke: var(--hs-green); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* CTA — pigułka jak pozostałe zielone przyciski landingu (benefits-duo, demo-cta) */
.how-steps__cta { margin-top: 34px; text-align: center; }
.how-steps__btn { display: inline-block; background: var(--hs-green); color: #fff; text-decoration: none; font-size: 15px; font-weight: 700; padding: 16px 32px; border-radius: 999px; box-shadow: 0 8px 20px rgba(11, 160, 11, .35); transition: background .15s ease; }
.how-steps__btn:hover, .how-steps__btn:focus { background: #088a08; color: #fff; }
.how-steps__btn:focus-visible { outline: 2px solid var(--legal-navy, #092439); outline-offset: 3px; }
.how-steps__cta small { display: block; margin-top: 12px; font-size: 13px; color: var(--hs-muted); }

/* Poniżej lg kroki składa siatka Bootstrapa (col-lg-3 → col-12);
   tu tylko mniejsza typografia i pionowy pasek efektu. */
@media (max-width: 767.98px) {
  .how-steps { padding: 40px 0 44px; }
  .how-steps__title { font-size: 27px; }
  .how-steps__outcome { flex-direction: column; gap: 12px; }
}

/* Responsive excerpts (copied) */
/* ===== Billing period switch styling ===== */
[data-billing-switch] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  font-weight: 700 !important;
  transition: all 0.2s ease;
}
[data-billing-switch].active {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}
[data-billing-switch]:not(.active) {
  background-color: #f3f4f6 !important;
  color: #666 !important;
  border-color: #f3f4f6 !important;
}

@media (max-width: 575.98px) {
  .pricing-card__content { padding: 32px 30px 18px; }
  .pricing-card__cta { padding: 0 24px 28px; margin-top: 25px; }
  .pricing-title { font-size: 36px; }
  .pricing-price__value { font-size: 54px; }
  .pricing-price__value--long { font-size: 36px; }
}

/* Slider <768 */
@media (max-width: 767.98px) {
  .pricing-slider__track { gap: 1.5rem; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-right: 30vw; touch-action: auto !important; scrollbar-width: none; -ms-overflow-style: none; }
  .pricing-slider__track::-webkit-scrollbar { display: none; }
  .pricing-slider__item { flex: 0 0 70vw !important; width: 70vw !important; max-width: 70vw !important; scroll-snap-align: center; scroll-snap-stop: always; touch-action: auto !important; }
  .pricing-slider__overlay { pointer-events: none; position: absolute; top: 0; right: 0; height: 100%; width: 15vw; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 55%, rgba(255, 255, 255, 1) 100%); z-index: 10; pointer-events: none !important; }
  .pricing-slider__nav { padding-left: 1rem; padding-right: 1rem; }
  .pricing-slider__tab { border: 1px solid #eee; background: #fff; padding: 10px 20px; border-radius: 999px; font-weight: 700; color: #666; transition: all 0.2s; }
  .pricing-slider__tab.is-active { background: #000; color: #fff; border-color: #000; }
}

/* >=576 */
@media (min-width: 576px) {
  .container, .container-sm { max-width: 100%; }
}

/* >=768 */
@media (min-width: 768px) {
  #heroCarousel { width: 350px; }
  .benefits img { border-radius: 40px; }
  .hero__img { margin-bottom: 0; }
  .hero__video { margin-bottom: 0; }
  #heroCarousel { bottom: 60px; }
  .mt-md-75 { margin-top: 75px; }
  .mt-md-100 { margin-top: 100px; }
}

/* 768–1199.98 */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .pricing-slider__track { gap: 1.5rem; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-right: 18vw; touch-action: auto !important; scrollbar-width: none; -ms-overflow-style: none; }
  .pricing-slider__track::-webkit-scrollbar { display: none; }
  .pricing-slider__item { flex: 0 0 calc((100% - 1.5rem) * 0.55) !important; width: calc((100% - 1.5rem) * 0.55) !important; max-width: calc((100% - 1.5rem) * 0.55) !important; scroll-snap-align: center; scroll-snap-stop: always; touch-action: auto !important; }
  .pricing-slider__overlay { pointer-events: none; position: absolute; top: 0; right: 0; height: 100%; width: 10%; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 60%, rgba(255, 255, 255, 1) 100%); z-index: 10; pointer-events: none !important; }
}

/* >=992 */
@media (min-width: 992px) {
  .desktop-nav ul { font-size: 14px; font-weight: 500; }
  header .btn-primary { font-weight: 500; }
  .hero { margin-top: 30px; }
  #heroCarousel { bottom: 40px; }
  .bg-header-dekstop { background-color: #092439; border-radius: 0 50px 50px 0; padding: 16px 40px; margin-left: -40px; }
  .brand-logo { margin-right: 50px; }
  .link-body-emphasis { color: #fff !important; transition: 200ms ease-in-out !important; }
  /* Po kliknięciu link trzyma :focus, a bootstrapowe .link-body-emphasis:focus daje niemal
     czarny kolor (!important) — na granatowym pasku tekst znikał do czasu utraty focusu.
     Biel dla focusu PRZED regułą :hover, żeby najechanie nadal szarzyło. */
  .link-body-emphasis:focus, .link-body-emphasis:focus-visible { color: #fff !important; }
  .link-body-emphasis:hover { color: #9da5bf !important; }
  .hero__slide { font-size: 16px; }
  .hero__cta { margin-top: 30px; }
  .v-ticker { right: 50px; }
  .v-ticker__item { font-size: 16px; }
  .mt-lg-100 { margin-top: 100px; }
}

/* >=1200 */
@media (min-width: 1200px) {
  .hero__title { font-size: 40px; }
  /* Podnagłówek rośnie razem z H1 — inaczej przy 40 px nagłówka gubi się
     w akapicie (`body, p` ma tu 17 px). */
  .hero__lead { font-size: 20px; }
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1200px; }
  .btn-primary { font-size: 16px; padding: 20px 35px; }
  .mt-xl-150 { margin-top: 150px; }
  .pricing-subtitle { min-height: 55px; }
  body, p { font-size: 17px; line-height: 1.6; }
  #heroCarousel { right: -40px; padding: 35px 35px 45px; }
  .bg-header-dekstop { border-radius: 50px; }
  .ig-icon { width: 90px; height: 90px; left: -30px; bottom: 70px; }
  .fb-icon { width: 60px; height: 60px; border-radius: 20px; bottom: 140px; }
  .fb-icon .hero__sm-icon { width: 40px; }
  .hero__sm-icon { width: 50px; }
  .brand-logo { margin-right: 75px; }
  .v-ticker__item { font-size: 18px; }
  .hero__slide { font-size: 17px; }
  .pricing-slider__track { gap: 1.5rem; overflow: visible !important; scroll-snap-type: none !important; padding-right: 0 !important; }
  .pricing-slider__item { flex: 1 1 0 !important; width: auto !important; max-width: none !important; }
  .pricing-slider__overlay, .pricing-slider__nav, .pricing-slider__edge-back { display: none !important; }
}

/* Pricing slider nav (<1200) */
@media (max-width: 1199.98px) {
  .pricing-slider__nav { display: flex; justify-content: center; gap: 0.75rem; margin-top: 1rem; }
  .pricing-slider__btn { width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.15); background: #fff; font-size: 24px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
  .pricing-slider__btn img { width: 8px; }
  .pricing-slider__edge-back img { width: 8px; }
  .pricing-slider__btn[disabled] { opacity: 0.4; }
  .pricing-slider__viewport { position: relative; }
  .pricing-slider__edge-back { position: absolute; top: 50%; right: 10px; transform: translateY(-50%) translateX(8px); z-index: 20; width: 52px; height: 52px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.15); background: #fff; font-size: 34px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; }
  .pricing-slider__edge-back.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%) translateX(0); right: 0; }
}

/* >=1400 */
@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1320px; }
  body, p { font-size: 18px; line-height: 1.6; }
  #heroCarousel { right: -50px; bottom: 50px; }
  .v-ticker { right: 75px; }
}

/* Buttons and helpers from the latter section */
.btn-login img { width: 20px; height: 20px; }
.btn-login { width: 46px; height: 46px; background-color: #9AA2A8; padding: 0; display: flex; justify-content: center; align-items: center; border-radius: 50%; margin-right: 10px; }
.btn-login:hover { background-color: #0ba00b; }
@media(min-width: 992px) { .btn-login { width: 46px; height: 46px; margin-left: 10px; margin-right: 0; } }
@media(min-width: 1200px) { .btn-login img { width: 24px; height: 24px; } .btn-login { width: 64px; height: 64px; margin-left: 15px; margin-right: 0; } }

/* LANG SWITCHER — lista rozwijana (dropdown Bootstrapa), skaluje się na kolejne języki.
   Markup: templates/_components/landing/_lang_switcher.html.twig */
.lang-switcher { display: inline-flex; align-items: center; position: relative; }
.lang-toggle { display: inline-flex; align-items: center; gap: 0.4rem; padding: 6px 8px; border: 0; background: none; color: #9aa2a8; font-size: 13px; font-weight: 700; line-height: 1; border-radius: 999px; cursor: pointer; transition: background-color 0.2s ease, opacity 0.2s ease; }
.lang-toggle:hover, .lang-toggle[aria-expanded="true"] { background-color: rgba(154, 162, 168, 0.18); }
.lang-toggle:focus-visible { outline: 2px solid #0ba00b; outline-offset: 2px; }
.lang-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.8; transition: transform 0.2s ease; }
.lang-toggle[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }
.lang-flag { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.1)); }
/* Poniżej 480 px w przycisku zostaje sam skrót języka — pasek nagłówka jest tam najciaśniejszy. */
.lang-toggle .lang-flag { display: none; }
@media (min-width: 480px) { .lang-toggle .lang-flag { display: block; } }
/* Menu: pełne nazwy języków, skrót po prawej. min-width trzyma równą szerokość przy dłuższych nazwach. */
.lang-menu { min-width: 180px; padding: 8px; border-radius: 16px; border: 1px solid #e5e7eb; box-shadow: 0 10px 30px rgba(9, 36, 57, 0.15); }
.lang-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; color: #092439; }
.lang-item:hover, .lang-item:focus { background-color: #f3f4f6; color: #092439; }
.lang-item:focus-visible { outline: 2px solid #092439; outline-offset: 2px; }
.lang-item .lang-name { flex: 1 1 auto; }
.lang-item .lang-code { font-size: 12px; font-weight: 600; color: #6b7280; }
.lang-item.is-current { font-weight: 700; background-color: #f3f4f6; }
/* END LANG SWITCHER */

/* Tabs for pricing slider */
.pricing-slider__nav { display: flex; justify-content: center; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.pricing-slider__tab { border: 1px solid #d9d9d9; background: #fff; color: #111; border-radius: 999px; padding: 10px 18px; font-size: 14px; font-weight: 600; line-height: 1; transition: all 0.25s ease; cursor: pointer; }
.pricing-slider__tab:hover { border-color: #111; }
.pricing-slider__tab.is-active { background: #111; color: #fff; border-color: #111; }
.pricing-slider__tab:disabled { opacity: 0.5; cursor: default; }

.pricing-slider__track { touch-action: auto !important; -webkit-overflow-scrolling: touch; }

/* Misc small responsive tweaks */
@media(max-width:425px) { .navbar-brand { padding: 15px 20px 15px 40px; margin-right: 0px; } .navbar-brand img { width: var(--cd-logo-width-sm); } .lang-switcher { margin-right: 15px; } }
@media(min-width:426px) { .lang-switcher { margin-right: 15px; } }
@media(min-width:992px) { .lang-switcher { margin-left: 15px; margin-right: 0px; } }

/* Mobile navbar collapse override (landing header) */
.navbar-collapse { top: 0; left: 0; width: 100%; margin-left: 0; z-index: 900; background-color: #092439; border-radius: 0; }
.navbar-collapse-box { height: 100vh; display: flex; align-items: center; flex-direction: column; justify-content: center; padding-top:50px; }
.header-box { z-index: 999; }
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show { color: rgba(255,255,255,0.6); }
.nav-link { color: #fff; }

/* ===== Nagłówek: rozwijane menu „Rozwiązania" (trzy moduły) =====
   Klik/Enter/Esc + aria-expanded obsługuje dropdown Bootstrapa (data-bs-display="static",
   więc pozycję w obu ścieżkach — hover i klik — wyznacza ten sam CSS). */
.solutions-dropdown > .dropdown-menu { top: 100%; left: 0; margin-top: 0; }
.solutions-menu { min-width: 300px; padding: 10px; border-radius: 16px; border: 1px solid #e5e7eb; box-shadow: 0 10px 30px rgba(9, 36, 57, 0.15); }
.solutions-menu__item { display: block; padding: 10px 14px; border-radius: 10px; white-space: normal; }
.solutions-menu__item:hover, .solutions-menu__item:focus { background-color: #f3f4f6; }
.solutions-menu__item:focus-visible { outline: 2px solid #092439; outline-offset: 2px; }
.solutions-menu__name { display: block; font-weight: 600; color: #092439; }
.solutions-menu__desc { display: block; font-size: 12px; color: #6b7280; margin-top: 2px; }
/* Desktop: menu otwiera się też na hover. */
@media (min-width: 992px) and (hover: hover) {
  .solutions-dropdown:hover > .dropdown-menu { display: block; }
}
/* Mobile: podlista rozwijana w miejscu wewnątrz menu hamburgera (bez overlaya) —
   position:static daje reguła .navbar-nav .dropdown-menu Bootstrapa. */
@media (max-width: 991.98px) {
  .navbar .solutions-menu { background: transparent; border: 0; box-shadow: none; text-align: center; min-width: 0; padding: 0 0 6px; }
  .navbar .solutions-menu__name { color: #fff; }
  .navbar .solutions-menu__desc { color: #9aa2a8; }
  .navbar .solutions-menu__item:hover, .navbar .solutions-menu__item:focus { background-color: rgba(255, 255, 255, 0.08); }
}

/* ===== Hero: pasek chipów modułów (pod CTA) ===== */
/* Moduły PARAMI, nie w ciągu.
   Było `flex-wrap`, więc pigułki układały się według własnej szerokości: raz trzy w rzędzie,
   raz dwie, a ostatnia zostawała sama w przypadkowym miejscu. Przy pięciu modułach o bardzo
   różnej długości nazw wyglądało to na usterkę układu. Siatka dwukolumnowa daje równe
   szerokości i przewidywalny rytm; piąty moduł kończy listę w pierwszej kolumnie. */
.hero-modules { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 20px 0 0; padding: 0; }
@media (min-width: 576px) {
  .hero-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hero-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px 6px 9px; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; text-decoration: none; color: #092439; font-size: 13px; box-shadow: 0 2px 8px rgba(9, 36, 57, 0.06); transition: border-color 0.2s ease; }
.hero-chip:hover, .hero-chip:focus-visible { border-color: #0ba00b; color: #092439; }
.hero-chip:focus-visible { outline: 2px solid #092439; outline-offset: 2px; }
.hero-chip .feature-check-icon { width: 18px; height: 18px; background-size: 11px 11px; margin: 0; }
/* W siatce komórka bywa węższa od pigułki, więc `nowrap` rozpychałby kolumnę.
   Zawijanie jest tu REGUŁĄ, nie wyjątkiem dla najwęższych telefonów. */
.hero-chip__text { white-space: normal; }
.hero-chip__text strong { font-weight: 700; }
.hero-chip__desc { color: #6b7280; }
/* Najwęższe ekrany (od 320 px): pozwól opisowi chipa się zawinąć zamiast wypychać scroll poziomy. */
/* (Dawny wyjątek dla ≤ 359,98 px zniknął — zawijanie jest teraz domyślne.) */

/* ===== Sekcja „Moduły" (Social / PIM / Akademia) =====
   Progressive enhancement: bez JS pasek zakładek jest ukryty, a wszystkie panele widoczne
   jeden pod drugim. Klasę .is-enhanced dodaje dopiero kontroler Stimulus module-tabs. */
.modules__header { max-width: 720px; }
.modules__eyebrow, .modules__module-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #0ba00b; margin-bottom: 10px; }
.modules__title { margin-bottom: 16px; }
.modules__lead { margin-bottom: 0; }
.modules__tabs { display: none; gap: 10px; flex-wrap: wrap; margin: 30px 0 0; }
.modules.is-enhanced .modules__tabs { display: flex; }
.modules__tab { border: 1px solid #d9d9d9; background: #fff; color: #111; border-radius: 999px; padding: 12px 20px; font-size: 14px; font-weight: 600; line-height: 1; transition: all 0.25s ease; cursor: pointer; }
.modules__tab:hover { border-color: #111; }
.modules__tab:focus-visible { outline: 2px solid #092439; outline-offset: 2px; }
.modules__tab.is-active { background: #092439; color: #fff; border-color: #092439; }
.modules__panel { margin-top: 40px; }
.modules.is-enhanced .modules__panel { display: none; margin-top: 30px; }
.modules.is-enhanced .modules__panel.is-active { display: block; }
.modules__module-title { font-size: 24px; font-weight: 700; margin-bottom: 18px; }
.modules__highlight { background: #f3f4f6; border-left: 4px solid #0ba00b; border-radius: 0 12px 12px 0; padding: 14px 18px; margin-bottom: 20px; }
.modules__list { margin-bottom: 0; }
.modules__viz { background: #f3f4f6; border-radius: 30px; padding: 26px; }
.modules__viz-list { margin: 0 0 20px; display: grid; gap: 12px; padding: 0; }
.modules__viz-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border-radius: 16px; padding: 14px 18px; box-shadow: 0 2px 8px rgba(9, 36, 57, 0.06); }
.modules__viz-title { display: block; font-weight: 600; color: #092439; font-size: 14px; }
.modules__viz-sub { display: block; font-size: 12px; color: #6b7280; margin-top: 2px; }
.modules__viz-status { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: #092439; background: #eef1f4; border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.modules__viz-bar-caption { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: #374151; margin-bottom: 8px; }
.modules__viz-bar-value { font-weight: 700; color: #092439; }
.modules__viz-bar { height: 10px; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
.modules__viz-bar-fill { height: 100%; border-radius: 999px; background: #0ba00b; }
.modules__closing { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid #e5e7eb; font-weight: 500; color: #092439; }
@media (max-width: 575.98px) {
  .modules__viz { padding: 18px; }
  .modules__viz-row { flex-wrap: wrap; }
}

/* ===== Sekcja korzyści „Efekt dla obu stron" (.benefits-duo) =====
   Zastąpiła dawne dwie listy z grafikami (benefits_producer/benefits_partners).
   Paleta z ISTNIEJĄCYCH tokenów landingu (--legal-* z public-page.css, ładowanego
   na landingu), a granatowy gradient panelu marki z tokenów --kz-pillar-* —
   ta sama rodzina ciemnej karty co filar Strefy wiedzy i sekcja „Umów prezentację".
   Zieleń akcentu na granacie jak w demo-cta: zieleń landingu traci tam kontrast. */
.benefits-duo {
  --bd-green: var(--legal-green, #0ba00b);
  --bd-accent: #5fd97f;           /* zieleń czytelna na granacie (= --demo-accent) */
  --bd-muted: #5c6478;
  --bd-dark-soft: #aeb8c6;        /* tekst drugorzędny na granacie (= demo-cta) */
  padding: 56px 0 60px;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(11, 160, 11, .06), transparent 60%),
    linear-gradient(180deg, #fbfcfe 0%, #f6f8fb 100%);
}

/* Nagłówek sekcji */
.benefits-duo__head { text-align: center; max-width: 720px; margin: 0 auto; }
.benefits-duo__eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bd-green); background: rgba(11, 160, 11, .09); border: 1px solid rgba(11, 160, 11, .22); padding: 7px 16px; border-radius: 100px; margin-bottom: 18px; }
.benefits-duo__title { font-size: 38px; line-height: 1.15; letter-spacing: -.02em; font-weight: 800; color: var(--legal-navy, #092439); margin-bottom: 0; }
.benefits-duo__title em { font-style: normal; color: var(--bd-green); }
.benefits-duo__lead { margin: 14px 0 0; font-size: 17px; line-height: 1.55; color: var(--bd-muted); }

/* Pasek 3 kart z liczbami */
.benefits-duo__stats { margin-top: 26px; }
.benefits-duo__stat { background: #fff; border: 1px solid var(--legal-line, #e5e7eb); border-radius: 14px; padding: 22px 24px; text-align: center; box-shadow: 0 4px 14px rgba(9, 36, 57, .05); }
.benefits-duo__stat b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--legal-navy, #092439); }
.benefits-duo__stat b span { color: var(--bd-green); }
.benefits-duo__stat small { display: block; margin-top: 6px; font-size: 14px; color: var(--bd-muted); line-height: 1.4; }

/* Dwa panele: marka (granat) i partnerzy (biel). Równą wysokość daje siatka
   Bootstrapa (.row.align-items-stretch + .h-100), puentę dobija margin-top:auto. */
.benefits-duo__panels { margin-top: 20px; }
.benefits-duo__panel { border-radius: var(--kz-radius, 18px); padding: 36px 34px 30px; }
.benefits-duo__panel--brand { background: linear-gradient(150deg, var(--kz-pillar-from, #0e1e38) 0%, var(--kz-pillar-to, #16294a) 100%); color: #fff; box-shadow: 0 16px 40px rgba(9, 36, 57, .28); }
.benefits-duo__panel--partners { background: #fff; border: 1px solid var(--legal-line, #e5e7eb); box-shadow: 0 8px 24px rgba(9, 36, 57, .07); }
.benefits-duo__panel-tag { align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; padding: 6px 13px; border-radius: 100px; margin-bottom: 14px; }
.benefits-duo__panel--brand .benefits-duo__panel-tag { background: rgba(47, 174, 77, .18); color: var(--bd-accent); border: 1px solid rgba(95, 217, 127, .35); }
.benefits-duo__panel--partners .benefits-duo__panel-tag { background: rgba(67, 110, 153, .1); color: var(--legal-blue, #436e99); border: 1px solid rgba(67, 110, 153, .28); }
.benefits-duo__panel-title { font-size: 24px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; }
.benefits-duo__panel-sub { font-size: 14.5px; line-height: 1.5; margin-bottom: 22px; }
.benefits-duo__panel--brand .benefits-duo__panel-sub { color: var(--bd-dark-soft); }
.benefits-duo__panel--partners .benefits-duo__panel-sub { color: var(--bd-muted); }

/* Punkt korzyści: ikona w zielonym kwadracie + obietnica + jedna linijka dowodu */
.benefits-duo__item { display: flex; gap: 14px; padding: 14px 0; align-items: flex-start; }
.benefits-duo__item + .benefits-duo__item { border-top: 1px solid rgba(255, 255, 255, .08); }
.benefits-duo__panel--partners .benefits-duo__item + .benefits-duo__item { border-top: 1px solid var(--legal-line, #e5e7eb); }
.benefits-duo__ico { flex: 0 0 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.benefits-duo__panel--brand .benefits-duo__ico { background: rgba(47, 174, 77, .16); }
.benefits-duo__panel--partners .benefits-duo__ico { background: rgba(11, 160, 11, .09); }
.benefits-duo__ico svg { width: 20px; height: 20px; stroke: var(--bd-green); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.benefits-duo__panel--brand .benefits-duo__ico svg { stroke: var(--bd-accent); }
.benefits-duo__txt b { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.005em; margin-bottom: 3px; }
.benefits-duo__chip { display: inline-block; vertical-align: 2px; margin-left: 8px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; white-space: nowrap; }
.benefits-duo__panel--brand .benefits-duo__chip { background: rgba(67, 110, 153, .22); color: #9db9d6; border: 1px solid rgba(157, 185, 214, .3); }
.benefits-duo__panel--partners .benefits-duo__chip { background: rgba(67, 110, 153, .1); color: var(--legal-blue, #436e99); border: 1px solid rgba(67, 110, 153, .28); }
.benefits-duo__txt > span { display: block; font-size: 13.5px; line-height: 1.5; }
.benefits-duo__panel--brand .benefits-duo__txt > span { color: var(--bd-dark-soft); }
.benefits-duo__panel--partners .benefits-duo__txt > span { color: var(--bd-muted); }
.benefits-duo__panel-foot { margin: auto 0 0; padding-top: 20px; font-size: 14px; line-height: 1.55; font-weight: 600; }
.benefits-duo__panel--brand .benefits-duo__panel-foot { color: #dde3ea; }
.benefits-duo__panel--partners .benefits-duo__panel-foot { color: var(--legal-navy, #092439); }
.benefits-duo__panel-foot em { font-style: normal; color: var(--bd-green); }
.benefits-duo__panel--brand .benefits-duo__panel-foot em { color: var(--bd-accent); }

/* Pasek CTA — prowadzi do tej samej trasy app_booking, co pozostałe wezwania sesji */
.benefits-duo__cta { margin-top: 26px; background: #fff; border: 1px solid var(--legal-line, #e5e7eb); border-radius: 16px; padding: 26px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; box-shadow: 0 8px 24px rgba(9, 36, 57, .06); }
.benefits-duo__cta p { margin: 0; font-size: 17px; font-weight: 700; color: var(--legal-navy, #092439); letter-spacing: -.01em; }
.benefits-duo__cta p small { display: block; font-weight: 500; font-size: 13.5px; color: var(--bd-muted); margin-top: 3px; }
.benefits-duo__btn { flex-shrink: 0; display: inline-block; background: var(--bd-green); color: #fff; text-decoration: none; font-size: 15px; font-weight: 700; padding: 15px 28px; border-radius: 999px; box-shadow: 0 8px 20px rgba(11, 160, 11, .35); transition: background .15s ease; }
.benefits-duo__btn:hover, .benefits-duo__btn:focus { background: #088a08; color: #fff; }
.benefits-duo__btn:focus-visible { outline: 2px solid var(--legal-navy, #092439); outline-offset: 3px; }

/* Między md a lg kolumny liczb są wąskie — mniejszy licznik, żeby nagłówek
   „0 ręcznych maili" nie łamał się na trzy linie. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .benefits-duo__stat b { font-size: 26px; }
}

/* Poniżej lg panele i (poniżej md) pasek liczb składa siatka Bootstrapa;
   tu tylko pionowy układ paska CTA i mniejsza typografia. */
@media (max-width: 767.98px) {
  .benefits-duo { padding: 40px 0 44px; }
  .benefits-duo__title { font-size: 29px; }
  .benefits-duo__panel { padding: 28px 22px 24px; }
  .benefits-duo__cta { flex-direction: column; text-align: center; }
}

/* ===== Cennik: blok modułów w kartach planów (nad listą parametrów) ===== */
.pricing-list--modules { margin-bottom: 12px; padding-bottom: 16px; border-bottom: 1px solid #eee; }
/* Notka „2 miesiące gratis przy rocznym" pod przełącznikiem Miesięcznie/Rocznie. */
.pricing-switch-note { margin-top: 8px; font-size: 13px; font-weight: 600; color: #0ba00b; }


/* ===== Hero: animacja HTML5 w miejsce pliku wideo =====
 *
 * ── Tło przyszło do animacji, nie odwrotnie ─────────────────────────────────────
 * Komponent leżał w `.hero__video`, czyli w granatowej karcie 16:9 z promieniem 25 px
 * i cieniem — w miejscu po filmie. Ale jest narysowany NA JASNYM TLE: tekst `#1F2439`,
 * białe karty z cieniem, jasnoniebieskie pola. Jego scena jest przy tym PRZEZROCZYSTA,
 * więc tło brało się ze strony — i było dokładnie odwrotne niż trzeba. Stąd wrażenie
 * ramki: kwadratowa scena (1080×1080) w kadrze 16:9 zostawiała po bokach granatowe pasy.
 *
 * ── Skąd te kolory ──────────────────────────────────────────────────────────────
 * Z ARKUSZA KOMPONENTU, nie z oka. `#EEF3F9` to tło jego pigułki „MIKROSZKOLENIE",
 * `#F4F7FB` — tło pól formularza i wierszy punktacji. Dwie barwy, na których komponent
 * sam rysuje swoje karty, więc karta na takim tle nie ma czego przykrywać. Dół gaśnie
 * do `#FFFFFF`, czyli do tła strony: krawędzi nie widać, bo jej nie ma.
 *
 * ── Kadr kwadratowy ─────────────────────────────────────────────────────────────
 * Scena ma 1080×1080 i `fit()` skaluje ją do wysokości. W kadrze 16:9 znaczyło to
 * animację mniejszą o ~44% i pasy po bokach. Kwadrat znosi oba skutki naraz.
 */
.hero-anim {
  position: relative;
  z-index: 1;
  aspect-ratio: 1 / 1;
  /* Bez `overflow: hidden` — nie ma już czego przycinać, a poświata ma wychodzić
     poza kadr. Scena wypełnia kadr dokładnie, bo oba są kwadratowe. */
  /* Bez karty: ani promienia, ani cienia, ani obramowania. */
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* Jasne tło jest WARSTWĄ POD animacją, nie tłem jej pudełka.
   ── Dlaczego nie `background` na `.hero-anim` ─────────────────────────────────
   Zmierzone: gradient pionowy gasł tylko u dołu, więc lewy i prawy bok prostokąta
   zostawały widoczną krawędzią — czyli tą samą ramką, której miało nie być, tyle że
   w jaśniejszym kolorze. Gradient promienisty w tym samym pudełku też nie pomaga:
   przy proporcji 1:1 bok leży bliżej środka niż róg, więc gaśnięcie „przed krawędzią"
   wypada poza kadrem.
   Warstwa rozciągnięta POZA kadr (`inset` ujemny) gaśnie tam, gdzie jej nie widać —
   i po animacji zostaje miękka jasnoniebieska poświata bez ani jednej prostej linii.

   Kolory z ARKUSZA KOMPONENTU: `#EAF0F8` i `#F4F7FB` to barwy, na których sam rysuje
   swoje pola i pigułki. */
.hero-anim::before {
  content: "";
  position: absolute;
  inset: -6% -14% -10%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(60% 62% at 50% 34%,
    #EAF0F8 0%,
    #F4F7FB 48%,
    rgba(244, 247, 251, 0) 82%);
}
.hero-anim__frame { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  border: 0; display: block; background: transparent; }

/* Poświata za kadrem istniała, żeby granatowa karta nie wisiała w pustce. Na jasnym
   gradiencie robi brudną plamę i walczy z barwami wziętymi z pliku — więc jej tu nie ma.
   Reguła `.hero__media::before` zostaje nietknięta dla pozostałych użyć. */
.hero__media--anim::before { content: none; }