.hero {
    position: relative;
    background: var(--navy);
    min-height: 70vh;
    display: flex;
    align-items: stretch;
    overflow: hidden;
  }

  .hero::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -10%;
    width: 55%;
    height: 60%;
    background: radial-gradient(circle at 30% 30%, rgba(0, 143, 209, 0.28), transparent 70%);
    filter: blur(10px);
    pointer-events: none;
  }

  .hero-grid {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--wide-size);
    margin: 0 auto;
    padding: 2.75rem 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: stretch;
    align-content: center;
  }

  .hero-left {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
    min-width: 0;
    /* bez zanikania (opacity) — H1 to element LCP, patrz heroSlideUp */
    transform: translateY(24px);
    animation: heroSlideUp 0.9s ease forwards 0.15s;
  }

  .hero-heading h1 {
    margin: 0;
    font-size: var(--fs-display);
    line-height: 1.14;
    font-weight: 900;
    color: var(--white);
    letter-spacing: -0.01em;
    text-shadow: 0 2px 5px rgba(9, 18, 43, 0.45);
  }

  /* Back at 50/50 columns there's enough room for the rotating line to
     always stay on a single, non-wrapping line. */
  .rotating-line {
    display: block;
    font-size: var(--fs-display);
    line-height: 1.14;
    font-weight: 900;
    color: var(--neon-green);
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-shadow: 0 2px 5px rgba(9, 18, 43, 0.45);
    margin-top: 0.15rem;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
    min-height: 1.14em;
  }

  .rotating-line.is-fading {
    opacity: 0;
    transform: translateY(10px);
  }

  .category-grid {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    grid-auto-rows: 1fr;
    gap: 0.8rem;
  }

  .hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  /* ---- Right column: category visual ----
     .hero-right is stretched by the grid to match .hero-left's natural
     height; .hero-visual-card is inset flush (top/bottom 0) so the image
     panel's top/bottom edges line up exactly with the H1's top and the
     CTA buttons' bottom. */
  .hero-right {
    position: relative;
    z-index: 0;
    /* bez zanikania — zdjęcie hero bywa elementem LCP (desktop PageSpeed 28.10:
       opacity:0 przesuwało moment "wyświetlenia" o ~3,9 s) */
    transform: scale(0.96);
    animation: heroScaleIn 1s ease forwards 0.35s;
  }

  .hero-visual-card {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -15rem;
    right: 0;
    min-height: 300px;
    /* left corners removed — that edge now dissolves into the background
       rather than reading as a hard-cornered card */
    border-radius: 0 var(--radius-soft) var(--radius-soft) 0;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    /* left edge dissolves into the hero background so the card can reach
       under the rotating H1 line without a hard seam — the transparent
       zone is wide enough that the overlapping text still sits on pure
       navy, not on the image */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 1) 30%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 1) 30%);
  }

  .category-visual {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-color: var(--navy);
    background-size: cover;
    background-position: center;
    transition: opacity 0.5s ease;
  }

  .category-visual.active {
    opacity: 1;
  }

  /* Zdjęcie jako <img> z srcset (768/1024 px) zamiast background-image —
     wcześniej wszystkie 7 teł pobierało się od razu w pełnym 1920 px. */
  .category-visual-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Bottom-to-top darkening keeps the white label legible regardless
     of how bright the underlying photo is; the soft top-right glow
     is kept for the same glossy feel the placeholder gradients had. */
  .category-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 18, 43, 0) 45%, rgba(9, 18, 43, 0.8) 100%),
                radial-gradient(circle at 75% 20%, rgba(255,255,255,0.14), transparent 55%);
  }

  .category-label {
    position: absolute;
    left: 2rem;
    bottom: 2rem;
    right: 2rem;
    z-index: 2;
    color: var(--white);
    font-weight: 900;
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    text-shadow: 0 4px 18px rgba(0,0,0,0.28);
    letter-spacing: -0.01em;
    text-align: right;
  }


  @keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Sam wjazd, bez zanikania — dla nagłówka H1 na telefonie. Element z
     opacity:0 Google liczy do LCP dopiero gdy animacja ruszy, a przy
     zajętym procesorze (GTM) to potrafiło trwać kilka sekund (PageSpeed 28.10). */
  @keyframes heroSlideUp {
    from { transform: translateY(24px); }
    to { transform: translateY(0); }
  }

  @keyframes heroScaleIn {
    from { transform: scale(0.96); }
    to { transform: scale(1); }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-left, .hero-right, .hero-heading, .category-grid, .hero-ctas {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
    .rotating-line {
      transition: opacity 0.01s linear !important;
      transform: none !important;
    }
    .category-visual {
      transition: opacity 0.01s linear !important;
    }
    .btn-class-1:hover, .nav-cta:hover {
      transform: none;
    }
  }

  @media (max-width: 980px) {
    .hero-grid {
      grid-template-columns: 1fr;
      padding: 2.5rem 1.5rem;
    }
    .hero-right {
      min-height: 320px;
      order: -1;
    }
    .hero-visual-card {
      position: absolute;
      inset: 0;
    }
    /* H1 nad zdjęciem i wyśrodkowany, na życzenie klienta — WYŁĄCZNIE nagłówek
       (H1 + rotująca fraza), kategorie i CTA zostają PO zdjęciu tak jak
       dotychczas. Że hero-heading siedzi w środku .hero-left (razem z
       .category-grid i .hero-ctas), a .hero-right jest jego rodzeństwem na
       poziomie .hero-grid, jedyny sposób żeby to poprzeplatać bez ruszania
       PHP: display:contents na .hero-left, które usuwa JEGO WŁASNY box i
       robi z jego dzieci bezpośrednie elementy .hero-grid, więc `order` na
       .hero-heading/.hero-right/.category-grid/.hero-ctas może je ustawić
       w dowolnej kolejności. Traci się przez to wejściową animację i gap
       zdefiniowane na .hero-left — odtworzone tu osobno na każdym dziecku
       (ten sam gap:3rem już jest na .hero-grid, więc odstępy zostają takie
       same). Na desktopie (powyżej 980px) hero-left ma zwykły display:flex
       i to wszystko jest nieaktywne. */
    .hero-left {
      display: contents;
    }
    .hero-heading {
      order: -2;
      width: 100%;
      text-align: center;
      transform: translateY(24px);
      animation: heroSlideUp 0.9s ease forwards 0.15s;
    }
    .category-grid {
      opacity: 0;
      transform: translateY(24px);
      animation: heroFadeUp 0.9s ease forwards 0.15s;
    }
    .hero-ctas {
      opacity: 0;
      transform: translateY(24px);
      animation: heroFadeUp 0.9s ease forwards 0.15s;
    }
  }

  /* Tablet (np. iPad Mini 768×1024) — powyżej ma już zastosowanie
     display:contents na .hero-left (blok wyżej), więc .category-grid i
     .hero-ctas są bezpośrednimi elementami .hero-grid i grid rozciąga je
     (justify-items:stretch) na pełną szerokość jedynej kolumny — ale ich
     WEWNĘTRZNA zawartość (przyciski o szerokości max-content) nadal zajmuje
     tylko tyle miejsca ile potrzeba, więc bez justify-content:center
     lądowała przy lewej krawędzi tej szerokiej, pustej kolumny. Więcej
     miejsca niż na telefonie pozwala też na 3 kolumny kategorii zamiast 2. */
  @media (min-width: 621px) and (max-width: 980px) {
    .category-grid {
      grid-template-columns: repeat(3, max-content);
      justify-content: center;
    }
    .hero-ctas {
      justify-content: center;
    }
  }

  @media (max-width: 620px) {
    /* Odstęp H1→zdjęcie na telefonie: .hero-grid ma jednolity gap:3rem
       między WSZYSTKIMI wierszami (H1/zdjęcie/kategorie/CTA), co dla pary
       H1→zdjęcie wygląda na za dużą przerwę, nawet gdy rotująca fraza
       łamie się do maksimum linii i H1 jest wysoki. Reszta gapów (zdjęcie
       →kategorie, kategorie→CTA) zostaje bez zmian — dociągamy tylko
       zdjęcie do góry ujemnym marginesem, celowo tylko na tym wąskim
       zakresie (na tablecie 621–980px ten odstęp nie był zgłaszany jako
       problem). */
    .hero-right {
      margin-top: -2rem;
    }
    .category-grid {
      grid-template-columns: 1fr 1fr;
    }
    .hero-ctas {
      flex-direction: column;
      align-items: stretch;
    }
    .btn-class-1 {
      width: 100%;
    }

    /* Na wąskich ekranach fraz z rotating_phrases (ACF, treść edytowalna
       przez klienta) nie da się już zmieścić w jednej linii bez wyjścia
       poza ekran — pozwalamy się łamać. Wszystkie 5 obecnych fraz łamie się
       maksymalnie do 2 linii przy 375px (zweryfikowane), min-height
       rezerwuje miejsce na 3 linie jako bezpieczny zapas, żeby przy zmianie
       frazy na krótszą/dłuższą odstęp do .category-grid poniżej się nie
       "skakał". */
    .rotating-line {
      white-space: normal;
      overflow-wrap: break-word;
      min-height: calc(1.14em * 3);
    }
  }

  /* ============================================================
     PROCES WYNAJMU — "Jak działa wynajem w Toolsmart"
     4 kroki w kolumnach z łączącą linią (wybrany wariant 1)
     ============================================================ */
  .proces {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--section-spacing) 0;
    background: var(--white);
  }

  .proces-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 4rem;
  }

  .proces-head h2 {
    margin: 0;
    font-size: var(--fs-h2);
    font-weight: 900;
    line-height: 1.2;
    color: var(--navy);
    letter-spacing: -0.01em;
  }

  .steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
  }

  .steps::before {
    content: "";
    position: absolute;
    top: 44px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: repeating-linear-gradient(
      to right,
      var(--gray) 0 10px,
      transparent 10px 18px
    );
    z-index: 0;
  }

  .step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
  }

  .step-icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--gray);
    box-shadow: var(--shadow-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* centered on its own column so it lines up with the connecting
       line, which runs between the column midpoints (12.5%–87.5%) */
    align-self: center;
  }

  .step-icon svg {
    width: 40px;
    height: 40px;
    stroke: var(--sea-blue);
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .step-number {
    font-size: var(--fs-kicker);
    font-weight: 900;
    letter-spacing: var(--ls-caps);
    color: var(--sea-blue); /* był light-blue: 3,6:1 za mało dla małego tekstu */
    text-transform: uppercase;
  }

  .step h3 {
    margin: 0;
    font-size: var(--fs-h3);
    font-weight: 900;
    color: var(--navy);
  }

  .step p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink-muted);
  }

  @media (max-width: 900px) {
    .steps {
      grid-template-columns: 1fr;
      gap: 3rem;
    }
    .steps::before { display: none; }
    .step-icon { width: 72px; height: 72px; }
    .step-icon svg { width: 32px; height: 32px; }
    /* Na desktopie .step ma align-items:flex-start bo 4 wąskie kolumny obok
       siebie wyglądają dobrze z tekstem przy lewej krawędzi pod ikoną. Na
       jednej szerokiej kolumnie (mobile/tablet) to samo wygląda źle —
       wyśrodkowana ikona (.step-icon ma własny align-self:center) nad
       tekstem przyczepionym do lewej. Wyśrodkowujemy więc cały krok,
       włącznie z kickerem (.step-number "Krok 1" itd.). */
    .step {
      align-items: center;
      text-align: center;
    }
  }

  /* ============================================================
     SOCIAL PROOF — "10 lat doświadczenia w wynajmie maszyn
     budowlanych" + statystyki + opinie Google/klientów
     ============================================================ */
  .social-proof {
    padding: var(--section-spacing) 0;
    background-color: var(--sea-blue);
    /* Real photo of the Toolsmart yard, kept barely visible (~15%)
       under a solid sea-blue tint of the same color, so it just
       reads as a faint texture rather than a competing image. */
    /* Zdjęcie (247 KB) dopiero z klasą .is-bg-loaded, którą home.js dodaje
       ~300 px przed sekcją — wcześniej pobierało się od razu i spowalniało
       LCP na telefonie (PageSpeed 28.10). Do tego czasu sam niebieski kolor. */
    background-image: linear-gradient(rgba(8, 76, 161, 0.925), rgba(8, 76, 161, 0.925));
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
  }

  .social-proof.is-bg-loaded {
    background-image: linear-gradient(rgba(8, 76, 161, 0.925), rgba(8, 76, 161, 0.925)), url('../images/plac2.jpg');
  }

  .social-proof-head {
    max-width: 720px;
    margin: 0 auto 3.5rem;
    text-align: center;
  }

  .social-proof-head h2 {
    margin: 0;
    font-size: var(--fs-h2);
    font-weight: 900;
    line-height: 1.2;
    color: var(--white);
    letter-spacing: -0.01em;
  }

  .social-proof-desc {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--white);
    opacity: 0.85;
  }

  .stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--navy);
    border-radius: var(--radius-soft);
    box-shadow: var(--shadow-soft);
    padding: 2.5rem 1.5rem;
    margin-bottom: 5rem;
  }

  .stat {
    text-align: center;
    padding: 0 1rem;
    border-right: 1px solid var(--gray);
  }

  .stat:last-child {
    border-right: none;
  }

  .stat-number {
    font-size: clamp(1.65rem, 2.3vw, 2.3rem);
    font-weight: 900;
    color: var(--white);
    line-height: 1.1;
  }

  .stat-label {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--white);
    opacity: 0.75;
  }

  /* ---- Trust section: its own full-width white section, separate
     from the sea-blue .social-proof above it. ---- */
  .trust-section {
    background: var(--white);
    padding: var(--section-spacing) 0;
  }

  /* Trust bar: holds the heading, the reviews carousel and the Google
     rating row stacked in that order, with an animated arrow drawn
     from the heading down to the rating on the right. ---- */
  .trust-bar {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 100%;
  }

  .trust-arrow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
  }

  .trust-arrow path {
    fill: none;
    stroke: var(--navy);
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1 11;
    animation: trustArrowFlow 0.9s linear infinite;
  }

  #trustArrowHead path {
    fill: var(--navy);
    stroke: none;
  }

  @keyframes trustArrowFlow {
    to { stroke-dashoffset: -12; }
  }

  @media (prefers-reduced-motion: reduce) {
    .trust-arrow path { animation: none; }
  }

  .trust-bar-text {
    margin: 0;
    max-width: 760px;
    font-size: var(--fs-h2);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--navy);
    text-align: left;
  }

  .trust-bar-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.1rem;
    align-self: flex-end;
  }

  .trust-bar .google-logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }

  .trust-score {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--navy);
    flex-shrink: 0;
  }

  .trust-score span {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink-muted);
  }

  .trust-bar-rating .stars svg {
    width: 20px;
    height: 20px;
  }

  .trust-divider {
    width: 1px;
    height: 26px;
    background: rgba(21, 42, 96, 0.18);
    flex-shrink: 0;
  }

  .trust-count {
    font-size: 1rem;
    color: var(--ink-muted);
    white-space: nowrap;
  }

  .stars {
    display: flex;
    gap: 0.1rem;
  }

  .stars svg {
    width: 16px;
    height: 16px;
    fill: #FBBC05;
  }

  .review-card .stars svg {
    width: 15px;
    height: 15px;
  }

  /* Carousel: viewport clips to 3 cards wide, track holds all cards
     (real + cloned copies prepended/appended by JS for seamless looping
     in both directions) and is advanced by one card width, either
     automatically every few seconds or manually via the arrow buttons. */
  /* Flex row: prev button / viewport / next button. Using normal flex
     layout (instead of absolutely-positioned buttons) means the browser
     itself allocates each its own space — there is no pixel math that
     can get out of sync and cause the buttons to overlap a card. */
  .reviews-carousel {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
  }

  .carousel-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--white);
    border: 1.5px solid rgba(21, 42, 96, 0.15);
    box-shadow: var(--shadow-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .carousel-btn:hover {
    box-shadow: 0 14px 30px rgba(21, 42, 96, 0.25);
  }

  .carousel-btn:active {
    transform: scale(0.94);
  }

  .carousel-btn svg {
    width: 18px;
    height: 18px;
    stroke: var(--navy);
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* overflow-x/overflow-y can't actually be split into "clip
     horizontally, show vertically" — the CSS spec forces the
     "visible" axis to "auto" as soon as the other axis isn't
     visible, and "auto" still clips ink overflow like box-shadow.
     So: clip on both axes as usual, but pad the box out beyond the
     shadow's reach and pull it back with matching negative margins,
     which cancels the extra space in the layout. */
  .reviews-carousel-viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding: 30px 3px;
    margin: -30px 0;
  }

  .reviews-track {
    display: flex;
    gap: 2rem;
    will-change: transform;
  }

  .review-card {
    flex: 0 0 calc((100% - 2 * 2rem) / 3);
    background: var(--white);
    border: 2px solid var(--navy);
    border-radius: var(--radius-soft);
    box-shadow: var(--shadow-soft);
    padding: 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .review-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
  }

  .review-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 700;
    flex-shrink: 0;
  }

  .review-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
  }

  .review-name-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }

  .review-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .review-name-row svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }

  .review-date {
    font-size: 0.78rem;
    color: var(--ink-muted);
  }

  .review-text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--navy);
    opacity: 0.85;
  }

  @media (max-width: 900px) {
    .stats {
      grid-template-columns: repeat(2, 1fr);
      row-gap: 2rem;
    }
    .stat:nth-child(2n) { border-right: none; }
    .stat:nth-child(-n+2) {
      border-bottom: 1px solid var(--gray);
      padding-bottom: 1.5rem;
    }
    .review-card { flex-basis: calc((100% - 2rem) / 2); }
    .trust-arrow { display: none; }
    .trust-bar-rating { align-self: flex-start; }
    /* text-align:left na desktopie miał sens, bo strzałka (.trust-arrow,
       ukryta tu wyżej) leci od tekstu w prawo do oceny Google — bez niej
       lewe wyrównanie nie ma już uzasadnienia w jednokolumnowym układzie
       mobile/tablet. */
    .trust-bar-text { text-align: center; }

    /* Strzałki poniżej okna karuzeli zamiast po bokach — na mobile/tablecie
       flankujące guziki (40px + gap z każdej strony) zabierały sporo
       szerokości samej karcie opinii. Grid zamiast flex, żeby móc rozdzielić
       viewport (cały pierwszy rząd) od pary guzików (drugi rząd,
       wyśrodkowane obok siebie) bez zmian w PHP. Przesuwanie samą kartą
       (swipe) obsługuje home.js (nasłuch touch na .reviews-carousel-viewport). */
    .reviews-carousel {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        "viewport viewport"
        "prev next";
      row-gap: 1.25rem;
      column-gap: 0.75rem;
    }
    .reviews-carousel-viewport {
      grid-area: viewport;
    }
    .carousel-btn--prev {
      grid-area: prev;
      justify-self: end;
    }
    .carousel-btn--next {
      grid-area: next;
      justify-self: start;
    }
  }

  @media (max-width: 640px) {
    .review-card { flex-basis: 100%; }
    .carousel-btn { width: 34px; height: 34px; }
  }

  @media (max-width: 560px) {
    .stats { grid-template-columns: 1fr; padding: 2rem 1.5rem; }
    .stat {
      border-right: none !important;
      border-bottom: 1px solid var(--gray);
      padding-bottom: 1.5rem;
    }
    .stat:last-child { border-bottom: none; }
    .trust-section { padding: 3.5rem 0; }
  }

  /* ============================================================
     FAQ — "Najczęściej zadawane pytania i odpowiedzi przy wynajmie
     maszyn budowlanych". Desktop: zwarta lista samych pytań po lewej
     (jak zakładki) + stały panel po prawej, który ładuje treść
     wybranej odpowiedzi. Cała treść pytań/odpowiedzi żyje w jednym
     miejscu (tablica JS FAQ_ITEMS) i z niej renderowane są OBA
     warianty — desktopowe "tabs" i mobilny akordeon — więc nic nie
     jest zdublowane ręcznie. Poniżej 801px wraca klasyczna
     harmonijka z numeracją.
     ============================================================ */