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

    /* ── DESIGN TOKENS — z apps/web/app/globals.css ───────── */
    :root {
      /* Cień „screena" (zrzuty w .kar-shot / .sz-shot) — kanon z podstron funkcji. */
      --shadow-screen: 0 6px 20px rgba(17,24,39,.07), 0 1px 4px rgba(17,24,39,.04);
      --brand:         #2A6B4F;
      --brand-hover:   #1e4d37;
      --brand-soft:    #EAF4EE;
      --highlight:     #FEF9C2;
      --text:          #111111;
      /* Przygaszony tekst wylaczony na cale zyczenie foundera: token zostaje
         (uzywa go dziesiatki regul), ale ma teraz pelny kolor tekstu.
         Rozroznianie warstw robimy tlem, ramka, ikona lub waga fontu. */
      --text-muted:    var(--text);
      /* #6b7280 zamiast #9ca3af z makiety — #9ca3af ma kontrast 2.54:1 i nie spelnia AA.
         Zgodne z poprawka a11y z commita 150ed67. */
      --text-light:    #6b7280;
      --body-text:     var(--text-muted);
      --bg:            #ffffff;
      --bg-subtle:     #f9fafb;
      --bg-hover:      #f3f4f6;
      --border:        #e5e5e5;
      --border-strong: #e5e7eb;
      --btn-radius:    12px;
      --card-radius:   16px;
      --chip-radius:   8px;
      --shadow-float:  0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
      --max-w:         1400px;
      --feature-visual-width: 520px;
      --font-heading:  'Geist', system-ui, sans-serif;
      --font-body:     'Inter', system-ui, sans-serif;

      /* ── SKALA TYPOGRAFICZNA — jedno źródło prawdy ─────────
         Zmiana tu = zmiana na stronie głównej I wszystkich landingach
         (main.css ładuje się globalnie, landingi też z tego korzystają).
         --fs-hero:    nagłówek H1 w hero
         --fs-section: nagłówek sekcji H2 (najczęstszy)
         --fs-subhead: pod-nagłówek / H3
         --fs-eyebrow: etykieta nad nagłówkiem */
      --fs-hero:       clamp(2.1rem, 4.1vw, 3.2rem);
      --fs-section:    clamp(1.9rem, 3.1vw, 2.7rem);
      --fs-subhead:    clamp(1.5rem, 2.1vw, 1.9rem);
      /* Tekst treści: telefon zawsze 17px, desktop od ~1400px zawsze 19px.
         Grupa docelowa 35-40+ - duzy, czytelny tekst to decyzja projektowa,
         nie efekt uboczny.
         Naglowki komponentow (tytuly kafli, pytania FAQ) korzystaja z
         --fs-card-title, zeby hierarchia rosla razem z trescia. */
      --fs-body:       clamp(1.0625rem, 1.36vw, 1.1875rem);
      --fs-card-title: clamp(1.1875rem, 1.57vw, 1.375rem);
      --fs-eyebrow:    13px;
      /* Grubość i spacing nagłówków — globalny knob (zmiana tu = cała witryna) */
      --fw-heading:    500;
      --ls-heading:    -.03em;
    }
    /* Na telefonie clamp siedzi na dolnej granicy — H2 podniesione
       globalnie do 36px (desktop bez zmian, max 2.7rem). */
    @media (max-width: 640px) {
      :root {
        --fs-section: clamp(2.25rem, 3.1vw, 2.7rem);
        /* H1 na telefonie ponad H2 (40px > 36px) - bez tego naglowek hero
           cennika byl mniejszy niz naglowki sekcji. */
        --fs-hero: clamp(2.5rem, 4.1vw, 3.2rem);
      }
    }

    html { font-family: var(--font-body); font-size: 16px; color: var(--body-text); -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
    body { background: var(--bg); min-height: 100vh; overflow-x: hidden; position: relative; line-height: 1.6; }
    h1, h2, h3 { font-family: var(--font-heading); letter-spacing: var(--ls-heading); line-height: 1.12; font-weight: var(--fw-heading); color: var(--text); }
    p { color: var(--text-muted); }

    .site-nav, section { position: relative; z-index: 1; }


    /* ── NAV ─────────────────────────────────────────────── */
    .site-nav {
      position: sticky; top: 0; z-index: 100;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }
    body.admin-bar .site-nav { top: 32px; }
    @media (max-width: 782px) {
      body.admin-bar .site-nav { top: 46px; }
    }
    .nav-inner {
      position: relative;
      max-width: var(--max-w); margin: 0 auto; padding: 0 32px;
      display: flex; align-items: center; justify-content: space-between;
      height: 60px;
    }
    .logo { display: flex; align-items: center; text-decoration: none; }
    .logo img { width: 168px; height: auto; display: block; }
    .nav-links {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px;
    }
    .nav-links > a {
      position: relative;
      color: var(--text);
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
      line-height: 1;
      padding: 9px 13px;
      border-radius: var(--btn-radius);
      transition: background .18s ease, color .18s ease;
    }
    .nav-links > a::after {
      content: "";
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 5px;
      height: 2px;
      border-radius: var(--btn-radius);
      background: var(--brand);
      opacity: 0;
      transform: scaleX(.35);
      transition: opacity .18s ease, transform .18s ease;
    }
    .nav-links > a:hover {
      color: var(--brand-hover);
      background: var(--brand-soft);
    }
    .nav-links > a:hover::after {
      opacity: .55;
      transform: scaleX(1);
    }
    .nav-right { display: flex; align-items: center; gap: 10px; }
    .btn-ghost { color: var(--text); text-decoration: none; font-size: 14px; font-weight: 500; padding: 6px 14px; border-radius: var(--btn-radius); transition: background .15s; }
    .btn-ghost:hover { background: var(--bg-hover); }
    .btn-primary { background: var(--brand); color: #fff; padding: 7px 16px; border-radius: var(--btn-radius); font-size: 14px; font-weight: 500; text-decoration: none; transition: background .15s; }
    .btn-primary:hover { background: var(--brand-hover); }
    /* CTA „Załóż bezpłatne konto" w menu — ta sama wysokość co przycisk w hero (.btn-cta) */
    .nav-right .btn-primary { padding: 11px 22px; font-size: 14.5px; font-weight: 600; }

    /* ── Hamburger (tylko mobile) ────────────────────────── */
    .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 9px; margin-right: -9px; background: none; border: none; cursor: pointer; }
    .nav-toggle span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .2s, opacity .2s; }
    .nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
    .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .nav-mobile { display: none; flex-direction: column; padding: 8px 20px 24px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.98); backdrop-filter: blur(12px); max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .nav-mobile > a:not(.btn-primary):not(.btn-ghost) { padding: 13px 0; font-size: 15px; font-weight: 500; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); }
    .nav-mobile .btn-ghost, .nav-mobile .btn-primary { display: block; text-align: center; padding: 13px; font-size: 15px; }
    .nav-mobile .btn-ghost { border: 1px solid var(--border); margin-top: 14px; }
    .nav-mobile .btn-primary { margin-top: 8px; }

    /* ── Mega-menu „Funkcje" (desktop) ───────────────────── */
    .nav-funkcje { position: static; }
    .nav-links .mega-trigger { position: relative; color: var(--text); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; padding: 9px 13px; border: 0; background: none; cursor: pointer; border-radius: var(--btn-radius); display: inline-flex; align-items: center; gap: 6px; transition: background .18s ease, color .18s ease; }
    .nav-funkcje:hover .mega-trigger, .nav-funkcje.is-open .mega-trigger { color: var(--brand-hover); background: var(--brand-soft); }
    .mega-chev { width: 10px; height: 10px; color: var(--text-muted); transition: transform .18s; }
    .nav-funkcje:hover .mega-chev, .nav-funkcje.is-open .mega-chev { transform: rotate(180deg); }
    .mega-dropdown { position: absolute; top: calc(100% + 14px); left: 50%; width: min(880px, calc(100vw - 80px)); background: #fff; border: 1px solid var(--border); border-radius: var(--card-radius); box-shadow: 0 14px 44px rgba(17,24,39,.11), 0 3px 10px rgba(17,24,39,.05); padding: 16px; display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(6px); transition: opacity .16s, transform .16s, visibility .16s; z-index: 200; }
    .mega-dropdown::before { content: ''; position: absolute; top: -18px; left: 0; right: 0; height: 18px; }
    .nav-funkcje:hover .mega-dropdown, .nav-funkcje.is-open .mega-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
    .mega-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-content: start; }
    .mega-link { display: flex; gap: 14px; align-items: flex-start; padding: 11px 12px; border-radius: var(--card-radius); text-decoration: none; transition: background .12s; }
    .mega-link:hover { background: var(--bg-subtle); }
    .mega-ic { width: 20px; height: 20px; color: var(--brand); flex-shrink: 0; margin-top: 1px; display: flex; }
    .mega-ic svg { width: 20px; height: 20px; }
    .mega-title { display: block; font-family: var(--font-heading); font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3; transition: color .12s; }
    .mega-link:hover .mega-title { color: var(--brand); }
    .mega-desc { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: #5b6573; }
    .mega-cta { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; background: var(--brand); border-radius: var(--card-radius); padding: 20px; text-decoration: none; }
    .mega-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 82% 0%, rgba(255,255,255,.12), transparent 52%), radial-gradient(circle at 0% 100%, rgba(255,255,255,.07), transparent 45%); pointer-events: none; }
    .mega-cta > * { position: relative; }
    .mega-cta-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); }
    .mega-cta-title { font-family: var(--font-heading); font-size: 17px; font-weight: 600; line-height: 1.3; color: #fff; margin: 8px 0 0; }
    .mega-cta-btn { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; background: #fff; color: var(--brand); font-size: 13.5px; font-weight: 600; padding: 10px 16px; border-radius: var(--btn-radius); transition: transform .14s; }
    .mega-cta:hover .mega-cta-btn { transform: translateY(-1px); }
    .mega-cta-btn svg { width: 13px; height: 13px; }
    .mega-cta-note { margin-top: 10px; font-size: 11.5px; color: rgba(255,255,255,.8); }
    .mega-cta-top, .mega-cta-bottom { display: flex; flex-direction: column; align-items: flex-start; }
    @media (max-width: 860px) { .mega-dropdown { grid-template-columns: 1fr; } .mega-list { grid-template-columns: 1fr; } }

    /* ── Mega-menu „Funkcje" (akordeon mobilny) ──────────── */
    .nav-mobile-acc { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 0; font-family: inherit; font-size: 15px; font-weight: 500; color: var(--text); background: none; border: 0; border-bottom: 1px solid var(--border); cursor: pointer; }
    .nav-mobile-acc svg { width: 13px; height: 13px; color: var(--text-muted); transition: transform .2s; }
    .nav-mobile-acc[aria-expanded="true"] svg { transform: rotate(180deg); }
    .nav-mobile-sub { display: none; padding: 6px 0 10px; }
    .nav-mobile-sub.is-open { display: block; }
    .nav-mobile-feat { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: var(--btn-radius); text-decoration: none; transition: background .15s; }
    .nav-mobile-feat:active { background: var(--brand-soft); }
    .nav-mobile-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--chip-radius); background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; }
    .nav-mobile-ic svg { width: 18px; height: 18px; }
    .nav-mobile-tx { display: flex; flex-direction: column; min-width: 0; }
    .nav-mobile-title { font-size: 14.5px; font-weight: 600; color: var(--text); line-height: 1.25; }
    .nav-mobile-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; margin-top: 2px; }
    .nav-mobile-feat:hover .nav-mobile-title { color: var(--brand); }

    /* ══ KANON: HERO PODSTRONY ═══════════════════════════════════════════
       JEDYNA definicja hero dla podstron funkcji. Wzorzec: /funkcje/karnety.
       Nie duplikuj tych reguł w plikach per strona i nie nadpisuj ich lokalnie
       — odstępstwo tylko na wyraźną decyzję (wtedy komentarz z powodem).

       UKŁAD
         kontener      max-width 1400px (--max-w), padding 76px 32px 0
         siatka        1fr / 1.15fr, gap 48px, wyrównanie do środka w pionie
         mobile ≤900px jedna kolumna, gap 32px, padding 48px 20px 0

       LEWA KOLUMNA (odstępy liczone od poprzedniego elementu)
         eyebrow  11px / 700 / 0.12em / uppercase / brand   → 14px do H1
         H1       --fs-hero (clamp 2.1–3.2rem), waga i tracking z globalnego h1
         lead     18px / 1.6 / --text-muted, max 34em       → 20px od H1
         CTA                                                → 30px od leadu
         nota     13.5px / --text-light                     → 14px od CTA

       PRAWA KOLUMNA — ZRZUT (.hero-std-shot)
         Kadr ZAWSZE 3:2. Zrzut eksportuj w 1500×1000 px (2x: 3000×2000), PNG.
         Inny stosunek boków dopnie się kadrem (cover, od góry), więc układ
         nigdy się nie rozjeżdża — ale wtedy dół zrzutu zostanie przycięty.
         Panel-makieta zamiast zrzutu: wstaw własny blok bez .hero-std-shot.
       ═══════════════════════════════════════════════════════════════════ */
    .hero-std {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 76px 32px 0;
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: 48px;
      align-items: center;
    }
    .hero-std-eyebrow {
      display: inline-block;
      margin-bottom: 14px;
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--brand);
    }
    /* Waga/interlinia/tracking dziedziczone z globalnego h1 — tu tylko rozmiar. */
    .hero-std h1 { margin: 0; font-size: var(--fs-hero); text-wrap: balance; }
    .hero-std-lead { margin: 20px 0 0; max-width: 34em; font-size: 18px; line-height: 1.6; color: var(--text-muted); }
    /* Punkty pod leadem (opcjonalne, komponent .hero-bullets): 24px od leadu,
       odstęp do CTA niesie już .hero-std .hero-cta. */
    .hero-std .hero-bullets { margin: 24px 0 0; }
    /* Ta sama wielkość co .hero-std-lead — punkty zastępują lead, więc czytają się
       jak on, nie jak drobniejsza lista. */
    .hero-std .hero-bullets li { font-size: 18px; line-height: 1.6; }
    .hero-std .hero-cta { margin-top: 30px; }
    /* Nota „Bez karty" siedzi wewnatrz .hero-cta, wiec dziedziczy jego wyrownanie:
       gdy podstrona centruje CTA (np. .bw-hero, .zz-hero), nota centruje sie razem z nim.
       Odstep: gap 10px z .hero-cta + 4px = kanoniczne 14px od przycisku. */
    .hero-std-note { margin-top: 4px; font-size: 13.5px; color: var(--text-light); }

    /* Gradientowa scena pod zrzutem w hero podstron - ten sam jezyk co
       ramka zrzutu na stronie glownej i scena przelacznika USP. */
    .hero-std-stage {
      padding: clamp(18px, 2vw, 32px);
      border-radius: 16px;
      background: linear-gradient(135deg, #EAF4EE 0%, #F4F8F5 42%, #FBF7EF 100%);
    }
    .hero-std-shot {
      aspect-ratio: 3 / 2;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fff;
      box-shadow: var(--shadow-screen);
    }
    .hero-std-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }

    @media (max-width: 900px) {
      .hero-std { grid-template-columns: 1fr; gap: 32px; padding: 48px 20px 0; }
      .hero-std-lead { max-width: none; }
    }

    /* ── HERO GRID (strona główna — celowo inny: pełna szerokość) ───── */
    /* ── HERO WYŚRODKOWANE (strona główna) ────────────────
       Tresc w osi strony, pod nia zrzut panelu na pelnoszerokim pasie
       gradientu. Stare reguly .hero (grid 2-kolumnowy) zostaja - uzywa
       ich page-lp.php. */
    .hero.hero--center {
      display: block;
      max-width: none;
      padding: 76px 0 0;
      position: relative;
      overflow: hidden;
    }
    /* Zdjecie w tle: pseudoelement ma dokladnie proporcje pliku (2560x1250),
       pelna szerokosc, kotwica u gory - zadnego dociagania do wysokosci
       sekcji, zero przyblizenia. Jednolita biala nakladka + maska, ktora
       od dolnej krawedzi ZDJECIA prowadzi cien lagodnie w gore. Krawedz
       i poczatek wygaszania to ten sam element, wiec zawsze sie pokrywaja. */
    /* .hero.hero--center - podwojna specyficznosc, zeby wygrac z tlem
       i pseudoelementami bazowego .hero (fotograficzne hero landingu). */
    .hero.hero--center { background: none; }
    .hero.hero--center::after { content: none; }
    .hero.hero--center::before {
      content: ""; position: absolute; top: 0; left: 0; right: 0;
      aspect-ratio: 2560 / 1250;
      background:
        linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)),
        url('https://planerto.com/dla-biznesu/wp-content/uploads/2026/08/grupwoe-warsztaty-header-scaled-e1786625004612.jpg') center top / cover no-repeat;
      -webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0,0,0,.55) 82%, rgba(0,0,0,.18) 94%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 62%, rgba(0,0,0,.55) 82%, rgba(0,0,0,.18) 94%, transparent 100%);
      pointer-events: none;
    }
    .hero--center > * { position: relative; z-index: 1; }
    .hero--center .hero-center-copy {
      max-width: 1060px;
      margin: 0 auto;
      padding: 0 32px;
      text-align: center;
    }
    /* Bazowy .hero h1 ma 18ch pod uklad dwukolumnowy - w osi strony
       naglowek moze byc szerszy i lamac sie na dwie linie, nie trzy. */
    /* Naglowek w bazowym skladzie (18ch), lead w bazowej szerokosci 52ch -
       to, ze bywa szerszy od naglowka, jest zaakceptowane. Podwojna
       specyficznosc, bo bazowe reguly .hero stoja nizej w pliku. */
    .hero.hero--center h1 { margin-left: auto; margin-right: auto; }
    .hero.hero--center .hero-sub { margin-left: auto; margin-right: auto; }
    .hero--center .hero-sub { margin: 0 auto 26px; max-width: 62ch; }
    .hero--center .hero-cta { align-items: center; }
    .hero--center .hero-cta-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
    /* Secondary: ten sam gabaryt co .btn-cta, kontur zamiast wypelnienia. */
    .btn-cta-ghost {
      display: inline-flex; align-items: center; gap: 8px;
      background: #fff; color: var(--brand);
      border: 1px solid var(--brand);
      padding: 10px 22px; border-radius: var(--btn-radius);
      font-size: 14.5px; font-weight: 600; text-decoration: none;
      transition: background .15s;
    }
    .btn-cta-ghost:hover { background: var(--brand-soft); }
    /* Rama jak scena w sekcji USP (.fsw-stage): zaokraglony gradientowy
       panel w studni tresci, zrzut w srodku z pelnym promieniem. */
    .hero--center .hero-shot-band {
      max-width: var(--max-w);
      margin: 56px auto 0;
      padding: 0 32px;
    }
    .hero--center .hero-shot-frame {
      padding: clamp(28px, 3.5vw, 56px);
      border-radius: 16px;
      background: linear-gradient(135deg, #EAF4EE 0%, #F4F8F5 42%, #FBF7EF 100%);
    }
    .hero--center .hero-shot-frame img {
      border: 1px solid #d1d5db;
      border-radius: 12px;
      background: #fff;
      box-shadow: var(--shadow-float);
      /* Zrzut przyciety od dolu o ~40% (widac gorne 60% panelu) - krotsza
         ramka podnosi cala sekcje i zdjecie w tle domyka ja bez bialego pasa. */
      aspect-ratio: 1398 / 575;
      object-fit: cover;
      object-position: center top;
    }
    .hero--center .hero-shot-frame img { display: block; width: 100%; height: auto; }
    @media (max-width: 900px) {
      .hero.hero--center { padding-top: 48px; }
      /* Na telefonie zdjecie w proporcji pliku mialoby ~250px - pseudoelement
         rozciaga sie na cala sekcje (cover od dolu), maska zostaje na dole. */
      .hero.hero--center::before {
        inset: 0; aspect-ratio: auto;
        background:
          linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)),
          url('https://planerto.com/dla-biznesu/wp-content/uploads/2026/08/grupwoe-warsztaty-header-scaled-e1786625004612.jpg') center bottom / cover no-repeat;
      }
      .hero--center .hero-center-copy { padding: 0 20px; }
      .hero--center .hero-shot-band { margin-top: 36px; padding: 0 20px; }
      /* Mobile: zrzut panelu w naturalnej skali, stala wysokosc, przesuwny
         palcem w bok - ten sam wzorzec co panele przelacznika USP. */
      .hero--center .hero-shot-frame {
        padding: 14px; border-radius: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .hero--center .hero-shot-frame::-webkit-scrollbar { display: none; }
      .hero--center .hero-shot-frame img {
        height: min(360px, 86vw);
        width: auto;
        max-width: none;
      }
    }

    .hero {
      /* Lewa strona wyrównana do siatki, prawa ucieka za ekran */
      max-width: none;
      padding: 72px 0 80px max(32px, calc((100vw - var(--max-w)) / 2 + 32px));
      display: grid;
      /* 620px zamiast 560: przy 560 kolumna miała 550px, a fraza z podświetleniem
         potrzebuje 561px i pękała na dwie linie. */
      grid-template-columns: minmax(0, 620px) 1fr;
      gap: 64px;
      align-items: center;
      overflow: hidden;
      position: relative;
      background: url('https://planerto.com/dla-biznesu/wp-content/uploads/2026/08/grupwoe-warsztaty-header-scaled.jpg') center / cover no-repeat;
    }
    /* Biała nakładka: mocna pod tekstem po lewej, lżejsza po prawej */
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.86) 48%, rgba(255,255,255,.58) 100%);
    }
    /* Miękkie przejście w biel na dole — bez twardej krawędzi zdjęcia */
    .hero::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 110px;
      background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 100%);
      pointer-events: none;
    }
    .hero > * { position: relative; z-index: 1; }
    .hero-copy { display: flex; flex-direction: column; margin-left: 10px; }
    /* Headline */
    h1 {
      font-family: var(--font-heading);
      font-size: var(--fs-hero, clamp(2.1rem, 4.1vw, 3.2rem));
      font-weight: 500; line-height: 1.12; letter-spacing: -.03em;
      color: var(--text); margin-bottom: 24px;
    }
    /* Hero ma dłuższy headline — mniejszy rozmiar, żeby zmieścił się w lewej kolumnie obok mockupu */
    .hero h1 {
      font-size: clamp(2.3rem, 3.3vw, 3rem);
      max-width: 18ch;
    }
    .hero-sub { font-size: var(--fs-body, 16.5px); color: var(--text-muted); line-height: 1.6; max-width: 52ch; margin-bottom: 28px; }
    .hero-risk { font-size: 13.5px; color: var(--text); }
    h1 .accent { color: var(--brand); }
    h1 .marker-accent {
      display: inline;
      color: var(--text);
      background: var(--highlight);
      border-radius: 6px;
      /* Rozszerzenie plamki w bok przez box-shadow, NIE padding — padding wypychałby
         tekst w prawo i zawinięta linia nie trzymałaby lewej krawędzi kolumny. */
      padding: .06em 0;
      /* line-height na SAMYM spanie, nie na nagłówku: podnosi tylko te wiersze,
         w których jest plamka. Ustawiony na h1 rozstrzeliwałby cały nagłówek. */
      line-height: 1.34;
      box-shadow: -.16em 0 0 var(--highlight), .16em 0 0 var(--highlight);
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }

    /* Bullets */
    .hero-bullets { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; }
    .hero-bullets li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-body, 16px); color: var(--text-muted); line-height: 1.55; }
    .bullet-check { flex-shrink: 0; margin-top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--brand-soft); display: flex; align-items: center; justify-content: center; }
    .bullet-check svg { width: 9px; height: 9px; color: var(--brand); }
    .hero-bullets strong { color: var(--text); font-weight: 600; }

    /* CTA */
    .hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
    .btn-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--brand); color: #fff; padding: 11px 22px; border-radius: var(--btn-radius); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: background .15s; }
    .btn-cta:hover { background: var(--brand-hover); }

    /* ── DASHBOARD MOCKUP ───────────────────────────────── */
    /* Tokeny z apps/web/app/dashboard + globals.css          */
    .hero-visual { min-width: 0; position: relative; display: flex; justify-content: flex-end; }
    .hero-visual::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: clamp(40px, 6vw, 88px);
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.92) 72%, #ffffff 100%);
      pointer-events: none;
      z-index: 3;
    }
    .dm-wrap { position: relative; width: 100%; }

    /* Outer card — shell appki, ucieka za prawy brzeg */
    .dm-shell {
      width: 100%;
      border: 1px solid var(--border-strong);
      border-radius: 12px 0 0 12px; /* tylko lewe zaokrąglenia */
      border-right: none;
      overflow: hidden;
      box-shadow: -4px 4px 32px rgba(0,0,0,0.08), -1px 1px 6px rgba(0,0,0,0.04);
      background: #f9fafb;
      font-size: 12px;
      user-select: none;
    }

    /* dash-page inner */
    .dm-inner { padding: 14px; display: flex; flex-direction: column; gap: 12px; }

    /* dash-stats — grid 3 cols, bez ikon */
    .dm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .dm-stat {
      background: white; border: 1px solid #e5e7eb; border-radius: 4px;
      padding: 13px 14px;
    }
    .dm-stat-label { font-size: 11px; color: #6b7280; margin-bottom: 4px; }
    .dm-stat-value { font-size: 22px; font-weight: 600; color: #111827; line-height: 1; margin-bottom: 2px; }
    .dm-stat-note  { font-size: 10px; color: #6b7280; }

    /* dash-panels — 2 cols */
    .dm-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .dm-panel { background: white; border: 1px solid #e5e7eb; border-radius: 4px; overflow: hidden; }
    .dm-panel-head { padding: 11px 14px; border-bottom: 1px solid #e5e7eb; }
    .dm-panel-title { font-size: 13px; font-weight: 600; color: #111827; }
    .dm-panel-body { display: flex; flex-direction: column; }

    /* Activity rows */
    .dm-act-row {
      display: flex; align-items: flex-start; gap: 9px;
      padding: 10px 14px; border-bottom: 1px solid #f3f4f6;
      opacity: 0; transform: translateY(-4px);
      transition: opacity .3s ease, transform .3s ease;
    }
    .dm-act-row:last-child { border-bottom: none; }
    .dm-act-row.visible { opacity: 1; transform: translateY(0); }
    .dm-act-ic {
      width: 28px; height: 28px; border-radius: 4px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center; margin-top: 1px;
    }
    .dm-act-ic.signup   { background: #dcfce7; color: #16a34a; }
    .dm-act-ic.payment  { background: #EAF4EE; color: #2A6B4F; }
    .dm-act-ic.reminder { background: #EFF6FF; color: #3B82F6; }
    .dm-act-ic.waitlist { background: #EAF4EE; color: #2A6B4F; }
    .dm-act-ic.confirm  { background: #dcfce7; color: #16a34a; }
    .dm-act-title { font-size: 11.5px; font-weight: 500; color: #111827; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dm-act-detail { font-size: 10.5px; color: #6b7280; }
    .dm-act-time   { font-size: 10px; color: #9ca3af; margin-left: auto; flex-shrink: 0; padding-top: 2px; }

    /* Event rows — .dash-event-row */
    .dm-ev-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #f3f4f6; }
    .dm-ev-row:last-child { border-bottom: none; }
    .dm-ev-bar { width: 3px; min-height: 48px; border-radius: 99px; flex-shrink: 0; }
    .dm-ev-content { flex: 1; min-width: 0; }
    .dm-ev-title { font-size: 12px; font-weight: 500; color: #111827; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dm-ev-meta  { font-size: 10.5px; color: #6b7280; margin-bottom: 5px; }
    .dm-ev-badge { font-size: 10.5px; font-weight: 500; background: #EAF4EE; color: #2A6B4F; padding: 1px 7px; border-radius: 3px; display: inline-block; }

    /* ── FEATURES ALT ROWS ───────────────────────────────── */
    .usp-tag {
      display: inline-block;
      font-size: 12.5px; font-weight: 600;
      color: var(--brand); background: var(--brand-soft);
      border-radius: var(--chip-radius); padding: 6px 13px; margin-bottom: 14px;
    }
    /* Eyebrow widoczne — ukrycie z 2026-07 cofniete decyzja z 2026-07-19. */
    .alt-section { max-width: var(--max-w); margin: 0 auto; padding: 88px 32px; }
    .alt-section-header { text-align: center; margin-bottom: 72px; }
    .alt-eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow, 13px); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; }
    .alt-section-header h2 {
      font-family: var(--font-heading);
      max-width: 980px;
      margin: 0 auto;
      font-size: var(--fs-section, clamp(1.7rem, 2.7vw, 2.3rem));
      font-weight: 500;
      line-height: 1.12;
      letter-spacing: -.03em;
      color: var(--text);
      text-wrap: balance;
    }

    .alt-row {
      display: flex; align-items: center; justify-content: center; gap: 36px;
      padding: 64px 0;
    }
    /* Strona główna: bloki funkcji wyrównane do góry (krótkie H3 = nazwy funkcji) */
    .home .alt-row { align-items: flex-start; }
    .alt-row:first-of-type { padding-top: 0; }
    .alt-row:last-of-type  { border-bottom: none; padding-bottom: 0; }
    .alt-row.flip { flex-direction: row-reverse; }

    .alt-copy { flex: 0 1 500px; max-width: 500px; }
    .alt-copy h3 {
      font-family: var(--font-heading);
      max-width: 20ch;
      font-size: clamp(1.35rem, 1.85vw, 1.7rem);
      font-weight: 500;
      line-height: 1.16;
      letter-spacing: -.03em;
      color: var(--text);
      margin-bottom: 14px;
    }
    /* Strona główna: H3 = krótka nazwa funkcji, większy rozmiar niż domyślny (LP ma stare, długie nagłówki) */
    .home .alt-copy h3 { font-size: var(--fs-subhead, clamp(1.5rem, 2.1vw, 1.9rem)); }
    .alt-row-primary .alt-copy h3 { max-width: 26ch; }
    .alt-row-primary .alt-copy p { max-width: 46ch; }
    .alt-copy p  { max-width: 42ch; font-size: 16px; color: var(--text-muted); line-height: 1.65; }
    .alt-copy .usp-lead { max-width: 42ch; font-size: 17.5px; font-weight: 500; color: var(--text); line-height: 1.5; margin-bottom: 10px; }
    /* ── PRZEŁĄCZNIK USP na stronie głównej (.fsw) ────────
       Lista pozycji po lewej: aktywna czarna z opisem i belką, reszta
       wyszarzona za linią. Po prawej zrzut aktywnej pozycji. JS w main.js
       auto-przełącza co data-fsw-interval ms; pauza na hover/fokus,
       klik przejmuje kontrolę i wyłącza rotację. */
    .fsw {
      display: grid;
      grid-template-columns: minmax(300px, 0.72fr) 1.28fr;
      gap: clamp(40px, 5vw, 80px);
      align-items: center;
      /* Studnia przychodzi z .alt-section (max-w + 32px), tak samo jak
         w „Poznaj wszystkie funkcje" - tu tylko odstep dolny. */
      padding: 0 0 88px;
    }
    .fsw-nav { display: flex; flex-direction: column; gap: 6px; }
    .fsw-item {
      position: relative; display: block; margin: 0; border: 0; background: none;
      text-align: left; cursor: pointer; padding: 12px 0 12px 22px;
    }
    .fsw-item::before {
      content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
      background: var(--border); transition: background .2s;
    }
    /* Aktywna belka = pasek postępu auto-rotacji: wypełnia się przez czas
       slajdu (--fsw-interval ustawia JS z data-fsw-interval). Po przejęciu
       kontroli klikiem (.fsw--manual) i przy reduced-motion belka jest pełna. */
    .fsw-item.is-active::before { background: var(--border); }
    .fsw-item::after {
      content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
      background: var(--brand); transform: scaleY(0); transform-origin: top;
    }
    .fsw-item.is-active::after { transform: scaleY(1); }
    .fsw--auto .fsw-item.is-active::after {
      animation: fswProgress var(--fsw-interval, 6s) linear;
    }
    .fsw--paused .fsw-item.is-active::after { animation-play-state: paused; }
    @keyframes fswProgress { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    @media (prefers-reduced-motion: reduce) {
      .fsw--auto .fsw-item.is-active::after { animation: none; }
    }
    .fsw-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 2px; }
    .fsw-item-title {
      display: block; font-family: var(--font-heading);
      /* Wyrazny skok nad tresc 19px - bez tego aktywna pozycja zlewala
         sie z opisem pod nia. */
      font-size: clamp(21px, 1.93vw, 27px); font-weight: 500; line-height: 1.28;
      letter-spacing: -0.015em; color: #a9b0b7; transition: color .2s;
    }
    .fsw-item:hover .fsw-item-title { color: var(--text-muted); }
    .fsw-item.is-active .fsw-item-title { color: var(--text); font-weight: 600; }
    /* Opis rozwija się tylko pod aktywną pozycją (animacja grid rows). */
    .fsw-item-desc {
      display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease;
    }
    .fsw-item-desc > span {
      overflow: hidden; display: block;
      font-size: var(--fs-body, 16px); line-height: 1.6; color: var(--text-muted);
    }
    .fsw-item.is-active .fsw-item-desc { grid-template-rows: 1fr; }
    .fsw-item.is-active .fsw-item-desc > span { padding-top: 7px; }
    /* Panele w jednej komorce grida - sekcja trzyma wysokosc najwyzszego
       zrzutu, wiec zmiana slajdu nie przesuwa niczego wokol. Przelaczanie
       to crossfade na opacity; [hidden] z JS neutralizujemy display:block,
       bo display:none zabijaloby przejscie. */
    /* Zrzuty celowo mniejsze niz kolumna i wysrodkowane w obu osiach -
       skalowane do wspolnej szerokosci, zeby zaden nie dominowal.
       Scena jest ramka-tlem: miekki gradient na bazie brand-soft. */
    .fsw-stage {
      display: grid; justify-items: center; align-items: center;
      padding: clamp(28px, 3.5vw, 56px);
      border-radius: 16px;
      background: linear-gradient(135deg, #EAF4EE 0%, #F4F8F5 42%, #FBF7EF 100%);
    }
    .fsw-panel { grid-area: 1 / 1; width: min(100%, 560px); }
    .fsw-panel[hidden] { display: block; }
    .fsw-panel {
      opacity: 0; visibility: hidden; transform: translateY(6px);
      transition: opacity .45s ease, transform .45s ease, visibility 0s .45s;
      pointer-events: none;
    }
    .fsw-panel.is-active {
      opacity: 1; visibility: visible; transform: none;
      transition: opacity .45s ease, transform .45s ease, visibility 0s;
      pointer-events: auto;
    }
    .fsw-panel img {
      display: block; width: 100%; height: auto;
      border: 1px solid #d1d5db; border-radius: 12px; background: #fff;
      box-shadow: var(--shadow-float);
    }
    /* Panel z toastem: zrzut lekko rozmyty, nad nim dymek „Przypomnienie
       wyslane" - odwzorowanie .zp-toast ze strony zaliczek. */
    .fsw-panel--toast { position: relative; }
    .fsw-panel--toast img { filter: blur(1.4px); }
    .fsw-toast {
      position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
      display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
      background: #fff; border: 1px solid var(--border-strong); border-radius: 4px;
      box-shadow: 0 14px 34px rgba(17,17,17,0.16); padding: 11px 16px;
      font-size: 14px; font-weight: 600; color: var(--text);
    }
    .fsw-toast-ic {
      width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
      background: var(--brand-soft); color: var(--brand);
      display: flex; align-items: center; justify-content: center;
    }
    .fsw-toast-ic svg { width: 12px; height: 12px; }
    @media (prefers-reduced-motion: reduce) {
      .fsw-panel, .fsw-panel.is-active { transition: none; transform: none; }
      .fsw-item-desc { transition: none; }
    }
    @media (max-width: 960px) {
      .fsw { grid-template-columns: 1fr; gap: 28px; align-items: start; padding: 0 0 64px; }
      .fsw-stage { padding: 16px; border-radius: 12px; }
      /* Mobile: szeroki zrzut zmniejszony do szerokosci telefonu byl
         nieczytelny. Zamiast tego stala wysokosc i naturalna skala -
         obraz jest szerszy niz ekran, a uciete UI na krawedzi samo
         zaprasza do przesuniecia palcem w bok. */
      .fsw-panel {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px;
        scrollbar-width: none;
      }
      .fsw-panel::-webkit-scrollbar { display: none; }
      .fsw-panel img {
        height: min(320px, 72vw);
        width: auto;
        max-width: none;
      }
      .fsw-item { padding: 10px 0 10px 18px; }
      .fsw-item-title { font-size: clamp(20px, 5.4vw, 23px); }
    }

    /* Placeholder pod zrzut ekranu (bloki bez gotowej wizualizacji) */
    .alt-visual--placeholder { flex: 0 1 560px; min-height: 320px; background: #fafafa; border: 1px dashed var(--border-strong); border-radius: var(--card-radius); display: flex; align-items: center; justify-content: center; color: var(--text-light); font-size: 13.5px; }
    /* Zrzut ekranu aplikacji jako wizualizacja bloku.
       Radius 10px dobrany do zapieczonego zaokrąglenia panelu na screenach —
       border biegnie po łuku obrazka, bez przycinania treści. */
    .alt-visual.alt-visual--shot { overflow: hidden; background: #fff; border-radius: 12px; border: 1px solid #d1d5db; box-shadow: var(--shadow-float); }
    /* Ramka przylega do naturalnej proporcji screena — bez wymuszonego 3:2,
       ktore letterboxowalo obrazki (rozrzut proporcji 1.28:1 do 2.00:1). */
    .alt-visual--shot img { display: block; width: 100%; height: auto; }
    /* Siatka dodatkowych funkcji pod blokami USP */
    /* Sekcja „Poznaj pozostałe funkcje" na podstronach — jedna definicja dla wszystkich. */
    .feats-more { padding: 88px 0; }
    .feats-more-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }
    .feats-more .extra-feats { margin-top: 0; }
    /* Na stronie głównej sekcja siedzi wewnątrz .alt-section, która ma już własne
       wcięcie. Bez tego kafelki dostawały je podwójnie i były węższe niż zrzuty
       w blokach funkcji nad nimi. */
    .alt-section .feats-more-inner { padding-left: 0; padding-right: 0; }
    @media (max-width: 900px) {
      .feats-more { padding: 64px 0; }
      .feats-more-inner { padding: 0 20px; }
    }

    .extra-feats { margin-top: 72px; }
    /* Tafla wychodzi lekko poza studnie tresci, gdy ekran ma zapas -
       wiecej oddechu bez zwiekszania dopelnien w komorkach. Szerokosc
       rosnie najwyzej o 128px i nigdy nie przekracza okna minus margines. */
    @media (min-width: 1560px) {
      .extra-grid { margin-left: -64px; margin-right: -64px; }
    }
    .extra-feats-title { font-family: var(--font-heading); text-align: center; font-size: var(--fs-section, clamp(1.7rem, 2.7vw, 2.3rem)); font-weight: 500; line-height: 1.12; letter-spacing: -.03em; color: var(--text); margin-bottom: 40px; }
    /* Jedna tafla z wlosowymi liniami zamiast osobnych kart: komorki bez
       wlasnych ramek, separatory robi 1px gap na tle w kolorze bordera,
       calosc spina zaokraglony kontener. */
    .extra-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
      background: var(--border); border: 1px solid var(--border);
      border-radius: 16px; overflow: hidden;
    }
    .extra-card { padding: 26px 24px 28px; background: #fff; }
    .extra-card .ico { width: 40px; height: 40px; border-radius: var(--chip-radius); background: var(--brand-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
    .extra-card .ico svg { width: 20px; height: 20px; color: var(--brand); }
    .extra-card h4 { font-family: var(--font-body); font-size: clamp(19px, 1.43vw, 20px); font-weight: 600; color: var(--text); }
    /* 18 gestych kafli - pelne --fs-body (19px) rozdymalo tafle, tu wyjatkowo
       stale 17px na desktopie, telefon przy globalnym minimum 16px. */
    .extra-card p { margin-top: 7px; font-size: clamp(16px, 1.21vw, 17px); color: var(--text-muted); line-height: 1.55; }
    /* 18 kart w 4 kolumnach = 4 pelne rzedy + 2; dwie ostatnie rozciagaja
       sie na pol rzedu, zeby w tafli nie zostala dziura. */
    .extra-grid > .extra-card:nth-child(17),
    .extra-grid > .extra-card:nth-child(18) { grid-column: span 2; }
    @media (max-width: 1000px) {
      .extra-grid { grid-template-columns: repeat(2, 1fr); }
      .extra-grid > .extra-card:nth-child(17),
      .extra-grid > .extra-card:nth-child(18) { grid-column: auto; }
      .extra-card { padding: 20px 22px; }
    }
    @media (max-width: 560px) {
      .extra-grid { grid-template-columns: 1fr; border-radius: 12px; }
    }

    /* ── INTEGRACJE — pasek z nazwami podpiętych narzędzi ── */
    .integrations { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }
    .integr-inner { display: flex; align-items: center; gap: 48px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 56px 0; }
    .integr-copy { flex: 0 0 340px; }
    .integr-copy h2 {
      font-family: var(--font-heading);
      /* Pelny rozmiar naglowka sekcji - wczesniej mial wlasna, mniejsza skale. */
      font-size: var(--fs-section, clamp(1.9rem, 3.1vw, 2.7rem));
      /* Interlinia pod marker: przy 1.15 zolte paski sasiednich linii
         nachodzily na siebie. */
      font-weight: 500; line-height: 1.32; letter-spacing: -.03em;
      color: var(--text);
    }
    /* Druga fraza naglowka na zoltym markerze (wzorzec .marker-accent),
       zamiast wyszarzenia, ktore zlewalo sie z tlem. */
    .integr-muted {
      color: var(--text);
      background: var(--highlight);
      border-radius: 6px;
      padding: .08em 0;
      box-shadow: -.16em 0 0 var(--highlight), .16em 0 0 var(--highlight);
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }
    .integr-badges { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); }
    .integr-badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 8px 12px; }
    .integr-badge + .integr-badge { border-left: 1px solid var(--border); }
    .integr-name { font-family: var(--font-heading); font-size: 19px; font-weight: 600; color: var(--text); white-space: nowrap; }
    .integr-brand { display: flex; align-items: center; gap: 8px; min-height: 64px; }
    .integr-logo { display: block; height: 50px; width: auto; }
    .integr-ico { display: block; width: 72px; height: 72px; border-radius: 16px; }
    /* SMS API — logo jasne, potrzebuje granatowego tła jak na smsapi.pl */
    .integr-chip { display: flex; align-items: center; background: #001A4B; border-radius: var(--chip-radius); padding: 11px 18px; }
    .integr-chip .integr-logo { height: 30px; }
    /* Własny e-mail — pseudo-logo SMTP: koperta + napis w kolorze nagłówków */
    .integr-smtp { display: flex; align-items: center; gap: 10px; color: var(--text); font-family: var(--font-heading); font-size: 34px; font-weight: 600; letter-spacing: .04em; }
    .integr-smtp svg { width: 32px; height: 32px; }
    .integr-desc { font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--text-light); }
    @media (max-width: 960px) {
      .integr-inner { flex-direction: column; align-items: flex-start; gap: 32px; }
      .integr-copy { flex: none; }
      /* Naglowek staje sie pelnowymiarowym tytulem sekcji (clamp na vw nie rosl na mobile) */
      .integr-badges { width: 100%; grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
      .integr-badge:nth-child(3) { border-left: none; }
    }
    @media (max-width: 520px) {
      .integrations { padding: 0 20px; }
      /* Dwie kolumny takze na telefonie — pionowa lista logotypow zjadala pol ekranu. */
      .integr-badges { grid-template-columns: repeat(2, 1fr); gap: 28px 12px; }
      .integr-badge { border-left: none !important; align-items: center; text-align: center; padding: 0; }
      .integr-brand { min-height: 55px; justify-content: center; }
      .integr-logo { height: 35px; }
      .integr-ico { width: 55px; height: 55px; }
      .integr-chip { padding: 9px 14px; }
      .integr-chip .integr-logo { height: 25px; }
      .integr-smtp { font-size: 27px; }
      .integr-smtp svg { width: 26px; height: 26px; }
      .integr-desc { font-size: 11px; }
    }

    .alt-visual {
      flex: 0 1 var(--feature-visual-width);
      min-width: 0;
      max-width: var(--feature-visual-width);
      width: min(100%, var(--feature-visual-width));
      padding: 0;
      background: transparent;
      border: none;
      border-radius: 12px;
      overflow: hidden;
    }
    .alt-visual > * { width: 100%; }
    .alt-row.flip { gap: 36px; }

    /* Scroll-triggered fade-in from the appropriate side */
    .alt-copy  { opacity: 0; transform: translateX(-22px); transition: opacity .5s ease, transform .5s ease; }
    .alt-row.flip .alt-copy  { transform: translateX(22px); }
    .alt-visual { opacity: 0; transform: translateX(22px);  transition: opacity .5s ease .1s, transform .5s ease .1s; }
    .alt-row.flip .alt-visual { transform: translateX(-22px); }
    .alt-row.in-view .alt-copy,
    .alt-row.in-view .alt-visual { opacity: 1; transform: translateX(0); }

    /* ── USP 1b: calendar preview ─── */
    .alt-visual--calendar {
      overflow: visible;
    }
    .alt-visual--floating {
      overflow: visible;
    }
    .cal-preview {
      width: 100%;
      overflow: hidden;
      border: 1px solid var(--border-strong);
      border-radius: 12px;
      background: #fff;
      box-shadow: var(--shadow-float);
    }
    .cal-head {
      display: grid; grid-template-columns: 40px 1fr 1fr 1fr;
      border-bottom: 1px solid var(--border-strong);
      background: #fff;
    }
    .cal-day-head {
      display: flex; flex-direction: column; align-items: center;
      padding: 5px 6px; gap: 2px;
      border-left: 1px solid var(--border-strong);
    }
    .cal-day-head > span {
      font-size: 10px; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em; font-weight: 600;
    }
    .cal-day-head > strong {
      font-size: 13px; font-weight: 600; color: #111827;
      width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
      border-radius: 0;
    }
    .cal-day-head.cal-today > strong {
      background: var(--brand); color: #fff; border-radius: 999px;
    }
    .cal-body { display: grid; grid-template-columns: 40px 1fr 1fr 1fr; }
    .cal-time-slot {
      height: 42px; padding: 3px 5px 0 0;
      border-bottom: 1px solid var(--border-strong);
      font-size: 9.5px; color: var(--text-muted);
      text-align: right; display: flex; align-items: flex-start; justify-content: flex-end;
    }
    .cal-col {
      position: relative;
      height: calc(6 * 42px);
      border-left: 1px solid var(--border-strong);
      background-image: repeating-linear-gradient(
        to bottom, transparent 0px, transparent 41px,
        var(--border-strong) 41px, var(--border-strong) 42px
      );
    }
    .cal-col.cal-today { background-color: #f8fbfa; }
    .cal-event {
      position: absolute; left: 4%; width: 92%;
      border-radius: 4px; padding: 3px 5px;
      display: flex; flex-direction: column; gap: 1px;
      overflow: hidden; cursor: pointer;
      box-sizing: border-box;
    }
    .cal-event strong { font-size: 9.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
    .cal-event-time, .cal-event-seats { font-size: 9px; line-height: 1.2; opacity: 0.85; }
    .cal-event-cta {
      display: inline-flex; align-items: center; gap: 3px;
      margin-top: 3px; align-self: flex-start;
      background: var(--brand); color: #fff;
      border-radius: 3px; padding: 2px 6px;
      font-size: 9px; font-weight: 400; white-space: nowrap;
    }
    .cal-event--green  { border: 1px solid #22c55e; background: #dcfce7; color: #16a34a; }
    .cal-event--purple { border: 1px solid #a855f7; background: #f3e8ff; color: #7c3aed; }
    .cal-event--orange { border: 1px solid #f97316; background: #ffedd5; color: #ea580c; }
    .cal-event--pink   { border: 1px solid #ec4899; background: #fce7f3; color: #db2777; }
    .cal-now-line {
      position: absolute; left: 0; right: 0; height: 2px; background: #d93025; z-index: 3; pointer-events: none;
    }
    .cal-now-dot {
      position: absolute; width: 9px; height: 9px; border-radius: 999px;
      background: #d93025; left: 0; top: 50%; transform: translate(-50%, -50%);
    }

    /* ── USP 2: notifications panel (dashboard style) ─── */
    .notif-panel {
      background: #fff; border: 1px solid var(--border-strong);
      border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-float);
    }
    .notif-panel-head {
      display: flex; align-items: center; gap: 8px;
      padding: 16px 20px; border-bottom: 1px solid var(--border-strong);
    }
    .notif-panel-title { font-size: 14px; font-weight: 600; color: #111827; margin: 0; }
    .notif-row {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 16px 20px; border-bottom: 1px solid var(--bg-hover);
    }
    .notif-row:last-child { border-bottom: none; }
    .notif-icon {
      width: 32px; height: 32px; border-radius: 4px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center; margin-top: 1px;
    }
    .notif-icon.green  { background: #dcfce7; color: #16a34a; }
    .notif-icon.blue   { background: #eff6ff; color: #3b82f6; }
    .notif-icon.yellow { background: #fefce8; color: #ca8a04; }
    .notif-content { flex: 1; min-width: 0; }
    .notif-title  { font-size: 13.5px; font-weight: 500; color: #111827; margin: 0 0 2px; }
    .notif-detail { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.45; }

    /* ── USP 3: waitlist flow ───────────────────────────── */
    .wl-panel {
      background: #fff; border: 1px solid var(--border-strong); border-radius: 12px;
      overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-float);
    }
    .wl-panel-head {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
      padding: 16px 20px; border-bottom: 1px solid var(--border-strong);
    }
    .wl-panel-title { font-size: 14px; font-weight: 600; color: #111827; margin: 0 0 4px; }
    .wl-panel-sub { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.45; }
    .wl-status {
      font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
    }
    .wl-status.full { background: #fee2e2; color: #b91c1c; }
    .wl-status.green { background: #dcfce7; color: #15803d; }
    .wl-list { display: flex; flex-direction: column; }
    .wl-row {
      display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start;
      padding: 16px 20px; border-bottom: 1px solid var(--bg-hover);
      background: #fff;
    }
    .wl-row:last-child { border-bottom: none; }
    .wl-row-icon {
      width: 32px; height: 32px; border-radius: 4px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .wl-row-icon.cancel { background: #fef3c7; color: #d97706; }
    .wl-row-icon.notify { background: var(--brand-soft); color: var(--brand); }
    .wl-row-icon.confirm { background: #dcfce7; color: #16a34a; }
    .wl-row-title { font-size: 13.5px; font-weight: 500; color: #111827; margin: 0 0 3px; }
    .wl-row-detail { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 0; }
    .wl-row-meta { font-size: 12px; color: var(--text-muted); white-space: nowrap; padding-top: 2px; }
    .wl-row-meta.badge {
      font-weight: 600; color: #15803d; background: #dcfce7;
      padding: 3px 8px; border-radius: 999px;
    }
    /* ── USP 4: policy cards ─────────────────────────────── */
    .policy-shell {
      background: #fff;
      border: 1px solid var(--border-strong);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--shadow-float);
    }
    .policy-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
    .policy-card {
      background: #fff;
      min-width: 0;
    }
    .policy-card + .policy-card { border-left: 1px solid var(--border-strong); }
    .policy-card-top {
      padding: 16px 18px;
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; gap: 10px;
      background: #fff;
    }
    .policy-card-top-icon {
      width: 32px; height: 32px; border-radius: 4px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      background: var(--brand-soft); color: var(--brand);
    }
    .policy-card-title { font-size: 14px; font-weight: 600; color: var(--text); }
    .policy-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
    .policy-rule { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--text-muted); line-height: 1.45; }
    .policy-rule-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; background: var(--brand); }
    .policy-divider { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 2px; }

    .policy-bottom {
      background: #fff;
      padding: 16px 18px;
      display: flex; align-items: center; justify-content: space-between; box-shadow: var(--shadow-float);
    }
    .policy-shell .policy-bottom { box-shadow: none; border-top: 1px solid var(--border-strong); }
    .policy-bottom-label { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
    .policy-bottom-val   { font-size: 14px; font-weight: 600; color: var(--text); }
    .policy-bottom-check {
      width: 20px; height: 20px; border-radius: 4px;
      background: var(--brand-soft); color: var(--brand);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    @media (max-width: 640px) {
      .policy-pair { grid-template-columns: 1fr; }
      .policy-card + .policy-card { border-left: none; border-top: 1px solid var(--border-strong); }
    }

    .planerto-page blockquote,
    .planerto-page .wp-block-quote,
    .planerto-page .wp-block-pullquote {
      margin: 0;
      padding: 0;
      border: 0;
      color: var(--text);
    }
    .planerto-page blockquote p,
    .planerto-page .wp-block-quote p,
    .planerto-page .wp-block-pullquote p {
      font-size: clamp(1.05rem, 1.25vw, 1.25rem) !important;
      line-height: 1.5 !important;
      letter-spacing: -0.02em;
    }
    /* ── USP 5: participant table ────────────────────────── */
    .ptable { display: flex; flex-direction: column; gap: 0; box-shadow: var(--shadow-float); border-radius: 12px; overflow: hidden; }
    .ptable-head {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
      padding: 12px 18px; background: var(--bg-hover);
      border: 1px solid var(--border-strong); border-radius: 12px 12px 0 0;
      font-size: 13.5px; font-weight: 600; color: var(--text);
    }
    .ptable-row {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
      padding: 16px 18px; border: 1px solid var(--border-strong); border-top: none;
      align-items: center; gap: 0;
      background: #fff;
    }
    .ptable-row:last-child { border-radius: 0 0 12px 12px; }
    .ptable-head > span,
    .ptable-cell {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      width: 100%;
      text-align: center;
    }
    .ptable-participant { display: flex; align-items: center; justify-content: center; min-width: 0; width: 100%; }
    .ptable-head > span:first-child,
    .ptable-row > .ptable-cell:first-child,
    .ptable-row > .ptable-cell:first-child .ptable-participant {
      justify-content: flex-start;
      text-align: left;
    }
    .ptable-head > span:last-child,
    .ptable-row > .ptable-cell:last-child {
      justify-content: flex-end;
      text-align: right;
    }
    .ptable-name  { font-size: 12px; font-weight: 500; color: var(--text); }
    .ptable-ws    { font-size: 12px; color: var(--text-muted); text-align: center; width: 100%; }
    .pt-status {
      font-size: 12px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: var(--chip-radius);
      white-space: nowrap;
    }
    .pt-status.paid     { background: #dcfce7; color: #15803d; }
    .pt-status.partial  { background: #fef3c7; color: #b45309; }
    .pt-status.unpaid   { background: #fee2e2; color: #b91c1c; }

    /* ── USP 6: info panel / FAQ ─────────────────────────── */
    .info-panel {
      background: #fff; border: 1px solid var(--border-strong); border-radius: 12px;
      overflow: hidden; box-shadow: var(--shadow-float);
    }
    .info-panel-head {
      padding: 16px 20px; border-bottom: 1px solid var(--border);
      font-size: 13.5px; font-weight: 600; color: var(--text);
      display: flex; align-items: center; gap: 8px;
    }
    .info-panel-head-label { font-size: 12px; font-weight: 600; background: var(--brand-soft); color: var(--brand); border-radius: 3px; padding: 5px 11px; margin-left: auto; }
    .info-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    }
    .info-cell {
      padding: 16px 20px; border-bottom: 1px solid var(--border);
    }
    .info-cell:nth-child(odd) { border-right: 1px solid var(--border); }
    .info-cell-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: 6px; }
    .info-cell-val   { font-size: 13.5px; font-weight: 600; color: var(--text); }
    .info-cell-sub   { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
    .info-faq { display: flex; flex-direction: column; }
    .info-faq-item {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 20px; border-bottom: 1px solid var(--border); gap: 12px;
    }
    .info-faq-item:last-child { border-bottom: none; }
    .info-faq-q { font-size: 12px; color: var(--text-muted); flex: 1; line-height: 1.45; }
    .info-faq-check {
      width: 20px; height: 20px; border-radius: 50%; background: #dcfce7;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .info-faq-check svg { color: #16a34a; }

    /* ── RESPONSIVE ──────────────────────────────────────── */
    @media (max-width: 1200px) and (min-width: 961px) {
      .hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 42px;
        align-items: center;
        padding: 56px 40px 72px;
        overflow: hidden;
      }
      .hero-copy {
        align-self: center;
        align-items: center;
        max-width: 720px;
        margin: 0 auto;
        text-align: center;
      }
      /* CTA i nota „Bez karty" centrują się razem z kolumną tekstu. */
      .hero-cta { align-items: center; }
      .hero-bullets {
        width: 100%;
        max-width: 680px;
        align-self: center;
      }
      .hero-bullets li {
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
        text-align: left;
        font-size: 15px;
      }
      .hero-visual { justify-content: center; }
      .hero-visual::after { display: none; }
      .dm-wrap { max-width: 760px; margin: 0 auto; }
      .dm-shell { border-radius: 12px; border-right: 1px solid var(--border-strong); box-shadow: var(--shadow-float); }
      .hero h1 {
        font-size: clamp(3rem, 6.4vw, 3.85rem);
        line-height: 1.02;
        letter-spacing: 0;
        margin-bottom: 32px;
      }
    }
    @media (max-width: 960px) {
      .hero { grid-template-columns: 1fr; gap: 48px; padding: 48px 32px 64px; overflow: hidden; }
      /* Hero jest tu ułożone w pionie — kolumna tekstu centruje się tak samo jak
         w zakresie 961–1200px. Same punkty listy zostają do lewej: wyśrodkowany
         tekst wypunktowany źle się czyta. */
      .hero-copy { align-items: center; max-width: 720px; margin: 0 auto; text-align: center; }
      .hero-cta { align-items: center; }
      .hero-bullets { width: 100%; max-width: 680px; }
      .hero-bullets li { width: 100%; max-width: 640px; margin: 0 auto; text-align: left; }
      .dm-shell { border-radius: 12px; border-right: 1px solid var(--border-strong); box-shadow: var(--shadow-float); }
      .alt-row { gap: 28px; }
      .alt-copy { flex: 0 1 380px; max-width: 380px; }
      .alt-visual { flex: 0 1 var(--feature-visual-width); max-width: var(--feature-visual-width); width: min(100%, var(--feature-visual-width)); }
      .alt-row.flip { gap: 28px; }
    }
    @media (max-width: 768px) {
      .alt-row, .alt-row.flip { flex-direction: column; gap: 18px; padding: 30px 0; }
      .alt-copy { flex: none; width: 100%; opacity: 1; transform: none !important; }
      .alt-visual { flex: none; opacity: 1; transform: none !important; }
      .alt-section { padding: 48px 20px 64px; }
      .alt-section-header { margin-bottom: 40px; }
      .alt-section-header h2 { line-height: 1.14; }
      /* Wyraźna, malejąca drabina na mobile: nazwa funkcji (kotwica) > linijka korzyści > opis.
         Każdy poziom różni się rozmiarem I wagą (26/600, 18/500, 16/400) — sama waga
         przy równym rozmiarze dawała dwa poziomy zamiast trzech. */
      .home .alt-copy h3, .alt-copy h3 { max-width: none; font-size: 26px; font-weight: 600; line-height: 1.15; margin-bottom: 12px; }
      .alt-row-primary .alt-copy h3 { font-size: 26px; }
      .alt-copy .usp-lead { font-size: 18px; font-weight: 500; line-height: 1.45; margin-bottom: 12px; }
      .alt-copy p { max-width: none; font-size: 16px; line-height: 1.65; }
      .alt-visual { width: 100%; max-width: none; }
    }
    /* Nawigacja zwija się do hamburgera zanim wyśrodkowane „O nas" wejdzie na przyciski. */
    @media (max-width: 900px) {
      .nav-links { display: none; }
      .nav-right { display: none; }
      .nav-toggle { display: flex; }
      .nav-open .nav-mobile { display: flex; }
    }

    @media (max-width: 640px) {
      .hero { padding: 40px 20px 56px; }
      .hero h1 {
        font-size: clamp(2rem, 8.8vw, 2.4rem);
        line-height: 1.12;
        max-width: none;
        text-wrap: balance;
      }
      .hero-visual::after { display: none; }
      .dm-panels { grid-template-columns: 1fr; }
      .dm-panels .dm-panel:nth-child(2) { display: none; }
    }

    /* ── TRZY KROKI — FLOW VISUALIZATION ─────────────────── */
    .trepas         { max-width: var(--max-w); margin: 0 auto; padding: 88px 32px; }
    .trepas-header  { text-align: center; margin-bottom: 1px; }
    .trepas-header h2 { font-family: var(--font-heading); font-size: var(--fs-section, clamp(1.7rem, 2.7vw, 2.3rem)); font-weight: 500; line-height: 1.12; letter-spacing: -.03em; color: var(--text); margin-bottom: 14px; text-wrap: balance; }
    .trepas-header p  { font-size: var(--fs-body, 16px); color: var(--body-text); max-width: 800px; margin: 0 auto; line-height: 1.6; }

    .trepas-stage {
      position: relative;
      width: 100vw;
      margin-left: calc(-50vw + 50%);
    }
    .trepas-svg-wrap {
      position: relative;
      -webkit-mask-image: linear-gradient(to right,
        transparent 0%,
        black calc((100vw - var(--max-w)) / 2 + 32px + 80px),
        black calc(100vw - (100vw - var(--max-w)) / 2 - 32px - 160px),
        transparent 100%
      );
      mask-image: linear-gradient(to right,
        transparent 0%,
        black calc((100vw - var(--max-w)) / 2 + 32px + 80px),
        black calc(100vw - (100vw - var(--max-w)) / 2 - 32px - 160px),
        transparent 100%
      );
    }
    .trepas-svg { display: block; width: 100%; height: auto; }
    .trepas-flow-shadow,
    .trepas-flow-line {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
    }
    .trepas-mobile-flow-shadow,
    .trepas-mobile-flow-line {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
    }
    .trepas.in-view .trepas-flow-shadow {
      animation: trepas-line-draw 2.8s cubic-bezier(.55, 0, .2, 1) .2s forwards;
    }
    .trepas.in-view .trepas-flow-line {
      animation: trepas-line-draw 3s cubic-bezier(.55, 0, .2, 1) forwards;
    }
    .trepas.in-view .trepas-mobile-flow-shadow {
      animation: trepas-line-draw 2.8s cubic-bezier(.55, 0, .2, 1) .2s forwards;
    }
    .trepas.in-view .trepas-mobile-flow-line {
      animation: trepas-line-draw 3s cubic-bezier(.55, 0, .2, 1) forwards;
    }
    @keyframes trepas-line-draw {
      to { stroke-dashoffset: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .trepas-flow-shadow,
      .trepas-flow-line,
      .trepas-mobile-flow-shadow,
      .trepas-mobile-flow-line {
        animation: none !important;
        stroke-dashoffset: 0;
      }
    }

    /* Planerto logo overlay — nad linią po prawej */
    .trepas-results {
      position: absolute;
      right: 18%;
      top: 56%;
      transform: translateY(-100%);
      display: flex; justify-content: center;
      pointer-events: none;
    }
    .trepas-logo {
      width: clamp(168px, 10.5vw, 232px);
      height: auto;
    }
    .trepas-mobile-flow { display: none; }
    .trepas-mobile-svg {
      display: block;
      width: min(100%, 360px);
      height: auto;
      margin: 0 auto;
      overflow: visible;
    }
    .trepas-mobile-icon rect {
      filter: drop-shadow(0 1px 3px rgba(0,0,0,0.08));
    }

    /* Zone labels */
    .trepas-labels {
      display: grid; grid-template-columns: repeat(4, 1fr);
      background: white;
      border: 1px solid var(--border-strong);
      border-radius: 16px;
      overflow: hidden;
      /* Szerzej niz dawne 1200px (naglowek lamal sie na dwie linie),
         ale wciaz ograniczone - nie na cala studnie sekcji. */
      max-width: 1300px;
      margin-left: auto;
      margin-right: auto;
      margin: 12px auto 0;
    }
    .tl-zone {
      padding: 14px 18px;
      border-right: 1px solid var(--border-strong);
    }
    .tl-zone:last-child { border-right: none; }
    /* Ta sama skala co kafle „Poznaj wszystkie funkcje" (.extra-card). */
    .tl-zone strong { font-family: var(--font-body); font-size: clamp(19px, 1.43vw, 20px); font-weight: 600; color: var(--text); display: block; margin-bottom: 4px; }
    .tl-zone p { font-size: clamp(16px, 1.21vw, 17px); color: var(--text-muted); line-height: 1.55; margin: 0; }
    .tl-zone.tl-planerto strong { color: var(--brand); }
    .tl-zone.tl-planerto p     { color: var(--brand); }

    @media (max-width: 768px) {
      .trepas { padding: 48px 20px 64px; }
      .trepas-stage { width: auto; margin-left: 0; }
      .trepas-svg-wrap { display: none; }
      .trepas-mobile-flow {
        display: block;
        width: min(100%, 360px);
        margin: 28px auto 18px;
      }
      .trepas-results { position: static; width: 100%; padding: 12px 16px; background: white; border-top: 1px solid var(--border); }
      .trepas-labels  { grid-template-columns: 1fr; }
      .tl-zone { border-right: none; border-bottom: 1px solid var(--border); }
      .tl-zone:last-child { border-bottom: none; }
    }

    /* ── OD ZAŁOŻYCIELA — cytat ──────────────────────────── */
    .founder {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 96px 32px 104px;
    }
    .founder-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.58fr) minmax(0, 1fr);
      gap: clamp(56px, 7vw, 104px);
      align-items: center;
      /* Studnia = pelna szerokosc .founder (max-w + 32px), ta sama co
         sekcja „Co dokladnie Planerto robi za Ciebie". */
    }
    .founder-portrait {
      position: relative;
      justify-self: center;
      width: min(100%, 350px);
      aspect-ratio: 4 / 5;
    }
    .founder-portrait-halo {
      position: absolute;
      inset: -10%;
      border-radius: var(--btn-radius);
      background: conic-gradient(
        from 0deg,
        rgba(42,107,79,0.16),
        rgba(42,107,79,0.03) 28%,
        rgba(42,107,79,0.14) 55%,
        rgba(42,107,79,0.03) 82%,
        rgba(42,107,79,0.16));
      filter: blur(28px);
      opacity: 0;
      transition: opacity 1.2s ease;
      animation: founder-halo-spin 28s linear infinite;
      pointer-events: none;
    }
    .founder.in-view .founder-portrait-halo { opacity: 1; }
    @keyframes founder-halo-spin {
      to { transform: rotate(360deg); }
    }
    .founder-portrait-card {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 16px;
      overflow: hidden;
      background: var(--bg-subtle);
      border: 1px solid var(--border-strong);
      box-shadow: var(--shadow-float);
      opacity: 0;
      transform: scale(.94) translateY(12px);
      transition: opacity .9s cubic-bezier(.2,.8,.2,1),
                  transform .9s cubic-bezier(.2,.8,.2,1);
    }
    .founder.in-view .founder-portrait-card {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
    .founder-portrait-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 22%;
      display: block;
      animation: founder-portrait-float 8s ease-in-out infinite;
    }
    @keyframes founder-portrait-float {
      0%, 100% { transform: scale(1.03) translateY(0); }
      50%      { transform: scale(1.03) translateY(-6px); }
    }
    .founder-portrait-card::after {
      content: "";
      position: absolute; inset: 0;
      background: linear-gradient(160deg,
        rgba(255,255,255,0) 55%,
        rgba(255,255,255,0.10) 75%,
        rgba(255,255,255,0) 100%);
      pointer-events: none;
    }
    .founder-content { min-width: 0; }
    .founder-quote {
      font-family: var(--font-heading);
      /* Clamp o stalych krancach: telefony zawsze 1.45rem (23px), desktop
         od ~1400px zawsze 2.4rem (38px). 2.75vw pracuje tylko pomiedzy
         ~845px a ~1395px - czysta strefa przejscia, bez plywania na mobile. */
      font-size: clamp(1.45rem, 2.75vw, 2.4rem);
      line-height: 1.4;
      font-weight: 500;
      letter-spacing: -.026em;
      color: var(--text);
      text-wrap: balance;
      margin: 0 0 40px;
    }
    /* Scroll-fill: JS tnie cytat na slowa (.fq-word) i wypelnia je kolorem
       w rytmie przewijania. Przygaszenie startowe wchodzi dopiero po cieciu
       (.fq-ready), wiec bez JS cytat stoi normalnie, w pelnym kolorze.
       Podswietlenie markera tez idzie per-slowo - dzieki temu nie wisi puste
       tlo pod tekstem, ktory jeszcze sie nie wypelnil. */
    .founder-quote.fq-ready .fq-word {
      color: #c6ccd2;
      transition: color .3s ease, background-color .3s ease, box-shadow .3s ease;
    }
    .founder-quote.fq-ready .fq-word.is-on { color: var(--text); }
    .founder-quote.fq-ready .fq-word--marker {
      border-radius: 6px;
      padding: .08em 0;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }
    .founder-quote.fq-ready .fq-word--marker.is-on {
      background: var(--highlight);
      box-shadow: -.16em 0 0 var(--highlight), .16em 0 0 var(--highlight);
    }
    @media (prefers-reduced-motion: reduce) {
      .founder-quote.fq-ready .fq-word { color: var(--text); transition: none; }
      .founder-quote.fq-ready .fq-word--marker {
        background: var(--highlight);
        box-shadow: -.16em 0 0 var(--highlight), .16em 0 0 var(--highlight);
      }
    }
    /* Ten sam wzorzec co .marker-accent (fallback bez JS - .fq-ready go wylacza). */
    .founder-quote:not(.fq-ready) .founder-marker {
      display: inline;
      color: var(--text);
      background: var(--highlight);
      border-radius: 6px;
      padding: .08em 0;
      box-shadow: -.16em 0 0 var(--highlight), .16em 0 0 var(--highlight);
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }
    .founder-signature {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-top: 22px;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity .4s ease .18s, transform .4s ease .18s;
    }
    .founder.in-view .founder-signature {
      opacity: 1;
      transform: translateY(0);
    }
    .founder-sig-mark {
      width: 36px; height: 1px;
      background: var(--brand);
      opacity: .5;
    }
    .founder-signature-photo {
      display: none;
    }
    .founder-sig-text { display: flex; flex-direction: column; gap: 2px; }
    .founder-name {
      font-size: 16px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.3;
    }
    .founder-role {
      font-size: 14.5px;
      color: var(--text);
      line-height: 1.4;
    }
    @media (max-width: 860px) {
      .founder { padding: 64px 20px 72px; }
      .founder-grid { grid-template-columns: 1fr; gap: 40px; }
      .founder-portrait { display: none; }
      .founder-content { text-align: left; }
      /* Rozmiar cytatu trzyma juz globalny clamp - tu tylko rytm. */
      .founder-quote { margin-bottom: 28px; }
      .founder-signature {
        position: relative;
        min-height: 72px;
        gap: 12px;
        padding-left: 86px;
      }
      .founder-signature-photo {
        display: block;
        position: absolute;
        left: 0;
        top: 50%;
        width: 64px;
        height: 64px;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid var(--border-strong);
        box-shadow: 0 10px 24px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.06);
        transform: translateY(-50%) rotate(-3deg);
      }
      .founder-signature-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 22%;
        display: block;
      }
      .founder-sig-mark { width: 22px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .founder-portrait-halo,
      .founder-portrait-card img { animation: none; }
      .founder-portrait-card,
      .founder-quote,
      .founder-signature {
        transition: none;
      }
      .founder.in-view .founder-portrait-halo { opacity: .6; }
    }

    /* ── FOOTER ─────────────────────────────────────────── */
    /* Strona glowna bez eyebrow nad integracjami - partial jest wspolny,
       wiec chowamy przez klase body.home zamiast ruszac markup. */
    .home .integrations .alt-eyebrow { display: none; }

    /* Stopka na marce: zielone tlo, biale logo i wielki wordmark przyciety
       dolna krawiedzia. Kolory tekstu = przezroczysta biel, zeby zachowac
       hierarchie bez wprowadzania nowych szarosci do palety. */
    .site-footer {
      position: relative;
      z-index: 1;
      overflow: hidden;
      background: var(--brand);
      color: #ffffff;
    }
    .site-footer-main {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 56px 32px 52px;
      display: grid;
      grid-template-columns: minmax(260px, 1.3fr) minmax(0, 2.7fr);
      gap: clamp(56px, 8vw, 132px);
    }
    .site-footer-brand {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .site-footer-logo {
      display: inline-flex;
      margin-bottom: 15px;
    }
    .site-footer-logo img {
      width: 148px;
      height: auto;
      display: block;
      /* Wordmark jest zapieczony w kolorze marki - odwracamy go na biel. */
      filter: brightness(0) invert(1);
    }
    .site-footer-brand p {
      max-width: 320px;
      color: rgba(255,255,255,0.94);
      font-size: 16px;
      line-height: 1.65;
      margin: 0 0 24px;
    }
    .site-footer-socials {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 30px;
    }
    .site-footer-socials a {
      width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,0.9);
      text-decoration: none;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: -0.02em;
      transition: color .15s, transform .15s;
    }
    .site-footer-socials a:hover {
      color: #ffffff;
      transform: translateY(-1px);
    }
    .site-footer-status {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      border: 1px solid rgba(255,255,255,0.22);
      background: rgba(255,255,255,0.08);
      border-radius: var(--chip-radius);
      padding: 9px 13px;
      color: #ffffff;
      font-size: 14px;
      line-height: 1;
    }
    .site-footer-status span {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #4ade80;
      box-shadow: 0 0 0 3px rgba(74,222,128,0.18);
    }
    .site-footer-company {
      margin-top: 18px;
      font-style: normal;
      font-size: 13.5px;
      line-height: 1.65;
      color: rgba(255,255,255,0.8);
    }
    .site-footer-nav {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr 0.8fr;
      gap: clamp(28px, 4vw, 64px);
    }
    .site-footer-group--features { gap: 12px; }
    .site-footer-group--features a { white-space: nowrap; }
    .site-footer-group {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
    }
    .site-footer-group h2 {
      font-family: var(--font-heading);
      font-size: 17.5px;
      font-weight: 700;
      line-height: 1.2;
      color: #ffffff;
      margin: 0 0 4px;
      letter-spacing: -0.01em;
    }
    .site-footer-group a {
      color: #ffffff;
      opacity: .9;
      text-decoration: none;
      font-size: 15.5px;
      line-height: 1.35;
      transition: color .15s, opacity .15s;
    }
    .site-footer-group a:hover {
      color: #ffffff;
      opacity: 1;
    }
    .site-footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.16);
      background: transparent;
    }
    .site-footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      max-width: none;
      padding: 22px max(32px, calc((100vw - var(--max-w)) / 2 + 32px));
      color: #ffffff;
      opacity: .88;
      font-size: 14.5px;
    }
    .site-footer-bottom nav {
      display: flex;
      align-items: center;
      gap: 32px;
      flex-wrap: wrap;
    }
    .site-footer-bottom a {
      color: inherit;
      text-decoration: none;
      transition: color .15s, opacity .15s;
    }
    .site-footer-bottom a:hover {
      color: #ffffff;
      opacity: 1;
    }

    /* Wordmark-znak wodny: obrazek szerszy niz studnia, ktora go przycina,
       wiec dolne krawiedzie liter schodza pod krawiedz strony. */
    .site-footer-mark {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      /* Wariant B: studnia nizsza niz wordmark (1320px szerokosci = 315px
         wysokosci), wiec znak zanurza sie pod krawiedz stopki. Maska siedzi
         na studni, nie na obrazku - dzieki temu gasnie dokladnie tam, gdzie
         wypada ciecie, a nie gdzies pod nim. */
      height: clamp(90px, 15vw, 240px);
      padding: 0 24px;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to bottom, #000 55%, rgba(0,0,0,.45) 85%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 55%, rgba(0,0,0,.45) 85%, transparent 100%);
    }
    .site-footer-mark img {
      display: block;
      width: min(1320px, 100%);
      height: auto;
      margin-top: 0;
      opacity: .17;
      filter: brightness(0) invert(1);
    }
    /* Rozmycie narastajace ku dolowi - warstwa nad znakiem, maskowana gradientem. */
    .site-footer-mark::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      -webkit-backdrop-filter: blur(2.5px);
      backdrop-filter: blur(2.5px);
      -webkit-mask-image: linear-gradient(to bottom, transparent 78%, rgba(0,0,0,.5) 92%, #000 100%);
      mask-image: linear-gradient(to bottom, transparent 78%, rgba(0,0,0,.5) 92%, #000 100%);
    }
    @media (max-width: 960px) {
      .site-footer-main {
        grid-template-columns: 1fr;
        gap: 44px;
      }
      .site-footer-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 640px) {
      .site-footer-main {
        padding: 44px 20px 40px;
      }
      .site-footer-logo img {
        width: 136px;
      }
      .site-footer-brand p {
        font-size: 14.5px;
        max-width: 300px;
      }
      .site-footer-nav {
        grid-template-columns: 1fr;
        gap: 30px;
      }
      .site-footer-group {
        gap: 12px;
      }
      .site-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 20px;
      }
      .site-footer-bottom nav {
        gap: 16px 24px;
      }
      .site-footer-mark {
        height: clamp(54px, 18vw, 100px);
        padding: 0 12px;
      }
    }

    /* ── RYTM PIONOWY STRONY GŁÓWNEJ ──────────────────────
       Jeden takt: kazda sekcja 96px gora/dol -> staly odstep 192px miedzy
       sekcjami. Pasek integracji dostaje wyrownanie 40px, bo integr-inner
       ma wlasne 56px za borderem. Zakres: tylko body.home - podstrony maja
       swoj rytm 88px. */
    .home .biz-logos { padding: 32px 0 96px; }
    .home .trepas { padding: 96px 32px; }
    .home .audience-section { padding: 96px 32px; }
    .home .founder { padding: 96px 32px; }
    .home .alt-section { padding: 96px 32px; }
    .home .fsw { padding-bottom: 64px; }
    .home .feats-more { padding: 96px 0 0; }
    .home .integrations { padding-top: 40px; padding-bottom: 40px; }
    .home .faq-section { padding: 96px 32px; }
    .home .final-cta { padding: 96px 32px 112px; }
    @media (max-width: 720px) {
      .home .biz-logos { padding: 24px 0 40px; }
      .home .trepas,
      .home .audience-section,
      .home .founder,
      .home .alt-section,
      .home .faq-section { padding: 56px 20px; }
      .home .fsw { padding-bottom: 40px; }
      .home .feats-more { padding: 56px 0 0; }
      .home .integrations { padding-top: 16px; padding-bottom: 16px; }
      .home .final-cta { padding: 40px 20px 72px; }
    }

    /* ── LEGAL PAGES ────────────────────────────────────── */
    .page-shell {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    .page-shell .logo img {
      width: 168px;
      height: auto;
      display: block;
    }
    .legal-page {
      flex: 1;
      max-width: var(--max-w);
      width: 100%;
      margin: 0 auto;
      padding: 72px 32px 96px;
    }
    .legal-hero {
      max-width: 780px;
      margin-bottom: 52px;
    }
    .legal-back {
      display: inline-flex;
      margin-bottom: 28px;
      color: var(--brand);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
    }
    .legal-back:hover {
      color: var(--brand-hover);
    }
    .legal-eyebrow {
      display: inline-flex;
      color: var(--brand);
      background: var(--brand-soft);
      border-radius: 3px;
      padding: 4px 9px;
      margin-bottom: 18px;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .legal-hero h1 {
      font-family: var(--font-heading);
      margin: 0 0 18px;
      color: var(--text);
      font-size: clamp(2.4rem, 4vw, 4rem);
      font-weight: 700;
      line-height: 1.02;
      letter-spacing: -0.045em;
    }
    .legal-hero p {
      max-width: 660px;
      color: var(--body-text);
      font-size: 17px;
      line-height: 1.7;
      margin: 0 0 18px;
    }
    .legal-updated {
      color: var(--text-muted);
      font-size: 13.5px;
    }
    .legal-content {
      display: grid;
      grid-template-columns: minmax(180px, 260px) minmax(0, 820px);
      align-items: start;
      gap: 56px;
    }
    .legal-content--single {
      display: block;
      max-width: 820px;
    }
    .legal-toc {
      position: sticky;
      top: 92px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      border: 1px solid var(--border-strong);
      border-radius: var(--card-radius);
      background: rgba(255,255,255,0.86);
      padding: 18px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    }
    .legal-toc strong {
      color: var(--text);
      font-size: 13.5px;
      font-weight: 600;
      margin-bottom: 2px;
    }
    .legal-toc a {
      color: var(--body-text);
      opacity: .72;
      text-decoration: none;
      font-size: 13.5px;
      line-height: 1.45;
    }
    .legal-toc a:hover {
      color: var(--brand);
      opacity: 1;
    }
    .legal-card {
      border: 1px solid var(--border-strong);
      border-radius: var(--card-radius);
      background: #fff;
      box-shadow: var(--shadow-float);
      overflow: hidden;
    }
    .legal-section {
      padding: 30px 34px;
      border-bottom: 1px solid var(--border-strong);
    }
    .legal-section:last-child {
      border-bottom: none;
    }
    .legal-section h2,
    .legal-wp-content h2 {
      font-family: var(--font-heading);
      color: var(--text);
      font-size: clamp(1.3rem, 2vw, 1.65rem);
      font-weight: 600;
      line-height: 1.22;
      letter-spacing: -0.025em;
      margin: 0 0 12px;
    }
    .legal-section h3,
    .legal-wp-content h3 {
      font-family: var(--font-heading);
      color: var(--text);
      font-size: 15px;
      font-weight: 600;
      line-height: 1.35;
      margin: 18px 0 8px;
    }
    .legal-section p,
    .legal-wp-content p {
      color: var(--body-text);
      font-size: 15.5px;
      line-height: 1.78;
      margin: 0;
    }
    .legal-section p + p,
    .legal-section ul + p,
    .legal-section p + ul,
    .legal-section h3 + ul {
      margin-top: 12px;
    }
    .legal-section ul,
    .legal-section ol {
      padding-left: 1.25em;
      color: var(--body-text);
      font-size: 15.5px;
      line-height: 1.78;
      margin: 0;
    }
    .legal-section li + li {
      margin-top: 3px;
    }
    .legal-wp-content {
      padding: 34px;
    }
    .legal-wp-content > * + * {
      margin-top: 18px;
    }
    .legal-wp-content ul,
    .legal-wp-content ol {
      padding-left: 1.3em;
      color: var(--body-text);
      line-height: 1.75;
    }
    .legal-wp-content a {
      color: var(--brand);
    }
    .legal-table {
      overflow-x: auto;
    }
    .legal-section table,
    .legal-wp-content table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 16px;
      overflow: hidden;
      font-size: 14px;
      line-height: 1.55;
    }
    .legal-section th,
    .legal-section td,
    .legal-wp-content th,
    .legal-wp-content td {
      border: 1px solid var(--border-strong);
      padding: 10px 12px;
      text-align: left;
      vertical-align: top;
    }
    .legal-section th,
    .legal-wp-content th {
      background: var(--bg-subtle);
      color: var(--text);
      font-weight: 600;
    }
    .legal-section td,
    .legal-wp-content td {
      color: var(--body-text);
    }
    @media (max-width: 900px) {
      .legal-page {
        padding: 52px 24px 72px;
      }
      .legal-content {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .legal-toc {
        position: static;
      }
    }
    @media (max-width: 640px) {
      .page-shell .logo img {
        width: 148px;
      }
      .legal-page {
        padding: 40px 20px 64px;
      }
      .legal-hero {
        margin-bottom: 34px;
      }
      .legal-back {
        margin-bottom: 22px;
      }
      .legal-hero h1 {
        font-size: clamp(2rem, 11vw, 2.7rem);
      }
      .legal-hero p {
        font-size: 15.5px;
      }
      .legal-section,
      .legal-wp-content {
        padding: 24px 20px;
      }
    }

    /* ── AUDIENCE SECTION (Dla kogo) ─────────────────────── */
    .audience-section {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 80px 32px 24px;
    }
    .audience-header { text-align: center; margin-bottom: 48px; }
    .audience-eyebrow {
      display: inline-block;
      font-family: var(--font-body);
      font-size: var(--fs-eyebrow, 13px);
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--brand);
      margin-bottom: 14px;
    }
    .audience-header h2 {
      font-family: var(--font-heading);
      font-size: var(--fs-section, clamp(1.7rem, 2.7vw, 2.3rem));
      font-weight: 500;
      line-height: 1.12;
      letter-spacing: -.03em;
      color: var(--text);
      /* 22ch lamalo naglowek na dwie linie po powiekszeniu --fs-section */
      max-width: 40ch;
      margin: 0 auto 14px;
      text-wrap: balance;
    }
    .audience-header p {
      font-size: var(--fs-body, 16px);
      line-height: 1.6;
      color: var(--text-muted);
      max-width: 800px;
      margin: 0 auto;
      text-wrap: balance;
    }
    .audience-carousel-wrap { position: relative; }
    .audience-carousel {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      /* full-bleed: karty uciekają poza krawędzie sekcji */
      margin: 0 calc(50% - 50vw);
      padding: 4px max(calc(50vw - var(--max-w) / 2 + 32px), 20px) 8px;
    }
    .audience-carousel::-webkit-scrollbar { display: none; }
    .audience-carousel.is-drifting { scroll-snap-type: none; }
    .audience-slide {
      position: relative;
      flex: 0 0 auto;
      width: clamp(220px, 23vw, 300px);
      aspect-ratio: 9 / 16;
      border-radius: 16px;
      overflow: hidden;
      scroll-snap-align: start;
      background: #e6e0d7 center / cover no-repeat;
    }
    a.audience-slide { display: block; text-decoration: none; color: inherit; }
    .audience-slide-caption {
      position: absolute;
      inset: auto 0 0 0;
      padding: 96px 22px 22px;
      background: linear-gradient(to top, rgba(23, 23, 28, .8), rgba(23, 23, 28, 0));
      color: #fff;
      pointer-events: none;
    }
    .audience-slide-tag {
      display: block;
      font-size: 12.5px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      opacity: .85;
      margin-bottom: 4px;
    }
    .audience-slide-name {
      display: block;
      font-family: var(--font-heading);
      font-size: 25px;
      font-weight: 500;
      letter-spacing: -.02em;
      line-height: 1.15;
    }
    .audience-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      margin-top: 28px;
    }
    .audience-nav {
      flex-shrink: 0;
      width: 48px; height: 48px;
      border-radius: 50%;
      border: none;
      background: var(--brand);
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: background .15s, opacity .15s;
    }
    .audience-nav:hover { background: var(--brand-hover); }
    .audience-nav[disabled] { opacity: .3; pointer-events: none; }
    .audience-progress {
      display: flex;
      justify-content: center;
      gap: 12px;
    }
    .audience-progress span {
      width: 72px; height: 2px;
      border-radius: 1px;
      background: var(--border-strong);
      transition: background .2s;
    }
    .audience-progress span.is-active { background: var(--text); }

    @media (max-width: 900px) {
      .audience-slide { width: clamp(210px, 38vw, 260px); }
      .audience-progress span { width: 40px; }
    }
    @media (max-width: 520px) {
      .audience-section { padding: 56px 20px 16px; }
      .audience-header { margin-bottom: 32px; }
      .audience-carousel { gap: 12px; }
      .audience-slide { width: 72vw; }
      .audience-controls { gap: 14px; margin-top: 22px; }
      .audience-nav { width: 38px; height: 38px; }
      .audience-progress { gap: 8px; }
      .audience-progress span { width: 22px; }
    }

    /* ── ALT SECTION SUB (subhead pod H2 features) ─────────── */
    /* Ta sama szerokość co .audience-header p — oba to akapity wiodące pod nagłówkiem
       sekcji. Przy 640px ten łamał się na więcej wierszy i wyglądał na zwężony. */
    .alt-section-sub {
      max-width: 800px;
      margin: 18px auto 0;
      font-size: var(--fs-body, 16px);
      line-height: 1.6;
      color: var(--text-muted);
      text-wrap: balance;
    }
    @media (max-width: 720px) {
      .alt-section-sub { margin-top: 14px; }
    }

    /* ── FAQ ─────────────────────────────────────────────── */
    .faq-section {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 72px 32px 56px;
    }
    .faq-header { text-align: center; margin-bottom: 56px; }
    .faq-eyebrow {
      display: inline-block;
      font-family: var(--font-body);
      font-size: var(--fs-eyebrow, 13px);
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--brand);
      margin-bottom: 18px;
    }
    .faq-header h2 {
      font-family: var(--font-heading);
      font-size: var(--fs-section, clamp(1.7rem, 2.7vw, 2.3rem));
      font-weight: 500;
      line-height: 1.12;
      letter-spacing: -.03em;
      color: var(--text);
      max-width: 28ch;
      margin: 0 auto;
    }
    .faq-list {
      max-width: 820px;
      margin: 0 auto;
      border-top: 1px solid var(--border-strong);
    }
    .faq-item {
      border-bottom: 1px solid var(--border-strong);
    }
    .faq-item summary {
      list-style: none;
      cursor: pointer;
      padding: 22px 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      font-family: var(--font-heading);
      font-size: var(--fs-card-title, 17px);
      font-weight: 500;
      color: var(--text);
      transition: color .15s;
    }
    .faq-item summary:hover { color: var(--brand); }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-icon {
      flex-shrink: 0;
      width: 24px; height: 24px;
      border-radius: 50%;
      background: var(--bg-subtle);
      display: flex; align-items: center; justify-content: center;
      transition: background .15s, transform .25s;
      color: var(--text-muted);
    }
    .faq-item[open] .faq-icon {
      background: var(--brand-soft);
      color: var(--brand);
      transform: rotate(45deg);
    }
    .faq-answer {
      padding: 0 4px 24px 4px;
      color: var(--text-muted);
      font-size: var(--fs-body, 16px);
      line-height: 1.65;
      max-width: 70ch;
    }
    .faq-answer strong { color: var(--text); font-weight: 600; }
    .faq-answer a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
    .faq-answer a:hover { color: var(--brand-hover); }

    @media (max-width: 720px) {
      .faq-section { padding: 56px 20px 40px; }
      .faq-header { margin-bottom: 40px; }
      .faq-item summary { padding: 18px 0; }
    }

    /* ── FINAL CTA ───────────────────────────────────────── */
    .final-cta {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 24px 32px 96px;
    }
    .final-cta-inner {
      background: radial-gradient(900px 460px at 50% -30%, #3a8663, var(--brand) 45%, #1c4834 100%);
      border-radius: 16px;
      padding: 64px 40px;
      text-align: center;
      color: #ffffff;
      position: relative;
      overflow: hidden;
    }
    .final-cta-inner::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 20% 0%, rgba(255,255,255,0.08) 0%, transparent 45%),
        radial-gradient(circle at 80% 100%, rgba(255,255,255,0.06) 0%, transparent 45%);
      pointer-events: none;
    }
    .final-cta-inner > * { position: relative; }
    .final-cta h2 {
      font-family: var(--font-heading);
      /* Ten sam stopien co H1 w hero (.hero h1) - domkniecie strony gra
         ta sama waga naglowka co jej otwarcie. */
      font-size: clamp(2.3rem, 3.3vw, 3rem);
      font-weight: 500;
      line-height: 1.14;
      letter-spacing: -0.04em;
      max-width: 22ch;
      margin: 0 auto 18px;
      /* jawnie, bo globalne h1,h2,h3 ustawia teraz color i nadpisaloby dziedziczenie */
      color: #fff;
    }
    .final-cta p {
      font-size: var(--fs-body, 16px);
      line-height: 1.6;
      color: rgba(255,255,255,0.86);
      max-width: 52ch;
      margin: 0 auto 32px;
    }
    .final-cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #ffffff;
      color: var(--brand);
      padding: 14px 28px;
      border-radius: var(--btn-radius);
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      transition: background .15s;
    }
    .final-cta-btn:hover {
      background: #f2f7f4;
    }
    .final-cta-note {
      margin-top: 18px;
      font-size: 13px;
      color: rgba(255,255,255,0.7);
    }
    @media (max-width: 720px) {
      .final-cta { padding: 16px 20px 72px; }
      .final-cta-inner { padding: 48px 24px; border-radius: 16px; }
    }

    /* ── KONTRAST DWÓCH LIST („Jak wygląda to teraz" / „Z Planerto") ──
       Komponent globalny — używany na wszystkich podstronach funkcji
       (strona zapisów, zaliczki, przypomnienia, lista rezerwowa, baza klientów,
       baza warsztatów, zarządzanie zapisami). Nowa podstrona nie potrzebuje
       żadnego dodatkowego arkusza: wystarczy ta struktura HTML.

       <section class="sz-problem">
         <div class="sz-section-head sz-problem-head"><h2>…</h2><p>…</p></div>
         <div class="sz-contrast">
           <div class="sz-contrast-col is-old"><span class="sz-contrast-label">…</span>
             <div class="sz-contrast-item"><span class="sz-contrast-icon">svg</span><span>…</span></div>
           </div>
           <div class="sz-contrast-col is-new">…</div>
         </div>
       </section>

       is-old = stan obecny (szare tło, ikona minusa), is-new = z Planerto
       (białe tło, zielona ramka, ikona ptaszka). Treść dowolna — komponent
       nie zakłada liczby punktów. Rozmiary tekstu: 16px treść, 17.5px nagłówek
       kolumny (próg 16px dla stron publicznych). */
    .sz-section-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
    .sz-eyebrow {
      display: inline-block; margin-bottom: 14px;
      font-family: var(--font-body); font-size: 11px; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand);
    }
    /* Waga/interlinia/tracking z globalnego h2. */
    .sz-section-head h2 {
      margin: 0 auto 14px; max-width: 32ch;
      font-size: var(--fs-section);
      text-wrap: balance;
    }
    .sz-section-head p {
      margin: 0 auto; max-width: 800px; font-size: 16px; line-height: 1.65;
      color: var(--text); text-wrap: balance;
    }
    .sz-problem { max-width: 1120px; margin: 0 auto; padding: 88px 32px; }
    .sz-problem-head { margin-bottom: 8px; }
    .sz-contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; }
    .sz-contrast-col { border: 1px solid var(--border-strong); border-radius: var(--card-radius); padding: 24px 24px 10px; box-shadow: 0 1px 2px rgba(17,17,17,0.04); }
    .sz-contrast-col.is-old { background: var(--bg-subtle); }
    .sz-contrast-col.is-new { background: #fff; border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
    .sz-contrast-label {
      display: block; margin-bottom: 8px; font-family: var(--font-heading);
      font-size: 17.5px; font-weight: 600; color: var(--text);
    }
    .sz-contrast-item {
      display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border);
    }
    .sz-contrast-col.is-old .sz-contrast-item:last-child,
    .sz-contrast-col.is-new .sz-contrast-item:last-child { border-bottom: none; }
    .sz-contrast-icon {
      flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
    }
    .sz-contrast-icon svg { width: 12px; height: 12px; }
    .is-old .sz-contrast-icon { background: #eef0f2; color: #98a1ad; }
    .is-new .sz-contrast-icon { background: var(--brand-soft); color: var(--brand); }
    /* Pelny --text w obu kolumnach: przygaszony tekst (--text-muted) jest zabroniony
       na stronach publicznych — rozroznienie niesie tlo, ramka i ikona, nie kolor liter. */
    .sz-contrast-item span { font-size: 16px; line-height: 1.55; color: var(--text); }
    @media (max-width: 960px) {
      .sz-problem { padding: 64px 20px; }
    }
    @media (max-width: 600px) {
      .sz-contrast { grid-template-columns: 1fr; }
    }

    /* ── 404 ─────────────────────────────────────────────
       Szablon 404.php. Bez własnego arkusza - reguły są tu, bo main.css
       ładuje się na każdym żądaniu, także na nieistniejącym adresie. */
    .e404 { max-width: var(--max-w); margin: 0 auto; padding: 96px 32px 120px; }
    .e404-inner { max-width: 720px; margin: 0 auto; text-align: center; }
    .e404-code {
      display: inline-block; margin-bottom: 14px;
      font-family: var(--font-body); font-size: 11px; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand);
    }
    .e404-inner h1 { margin: 0; font-size: var(--fs-hero); text-wrap: balance; }
    .e404-inner > p { margin: 20px auto 0; max-width: 34em; font-size: 18px; line-height: 1.6; color: var(--text); }
    .e404-cta { display: flex; justify-content: center; margin-top: 30px; }
    @media (max-width: 720px) {
      .e404 { padding: 64px 20px 80px; }
    }

/* ── Logotypy organizatorów pod hero (template-parts/section-logos.php): jeden rząd przewijany w pętli ── */
.biz-logos { padding: 32px 0 88px; text-align: center; }
.biz-logos__lead { font-size: 16px; color: var(--text); margin: 0 auto 28px; padding: 0 20px; }
.biz-logos__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.biz-logos__track { display: flex; width: max-content; animation: biz-logos 60s linear infinite; }
.biz-logos__viewport:hover .biz-logos__track { animation-play-state: paused; }
.biz-logos__list { list-style: none; display: flex; gap: 32px; padding-right: 32px; margin: 0; }
.biz-logos__list img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #ffffff;
}
@keyframes biz-logos { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .biz-logos__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .biz-logos__list[aria-hidden="true"] { display: none; }
}

@media (max-width: 960px) {
  .biz-logos { padding: 8px 0 56px; }
  .biz-logos__list img { width: 60px; height: 60px; border-radius: 14px; }
}