/**
 * ═══════════════════════════════════════════════════════════════════
 *  STRONA GŁÓWNA 2026 „POŁĄCZONA" — page-glowna-2026.php
 *
 *  Klej między dwoma systemami wyglądu:
 *   - sekcje ze starego szablonu: kontenery .ng (nowa-glowna.css + main.css),
 *   - sekcje z wersji sprzedażowej: .sg-* (glowna-sprzedazowa.css).
 *  Ładowany jako ostatni. Korzeń strony: .sg.fz.
 * ═══════════════════════════════════════════════════════════════════ */

body.dcp-glowna-2026 { margin: 0; background: #070b14; }

/* ═══════════════ WSPÓLNE MIARY ═══════════════ */
.fz {
    /* Ta sama szerokość treści co stary kontener (1200 px z marginesami 24 px) */
    --sg-max: 1152px;
    --sg-gutter: clamp(16px, 4vw, 24px);

    /* Tokeny starego szablonu — potrzebne także nagłówkom .ng-head w sekcjach „sg" */
    --ng-bg-dark:    #0a0e1a;
    --ng-bg-deep:    #070a14;
    --ng-surface:    #12172a;
    --ng-teal:       #00d4aa;
    --ng-teal-dark:  #00a888;
    --ng-teal-light: #33ffd2;
    --ng-purple:     #6c63ff;
    --ng-purple-lt:  #918aff;
    --ng-coral:      #ff6b6b;
    --ng-ink:        #1a1f36;
    --ng-ink-2:      #5a6178;
    --ng-ink-3:      #8892a8;
    --ng-paper:      #f6f8fc;
    --ng-white:      #ffffff;
    --ng-radius:     22px;
    --ng-ease:       cubic-bezier(.4, 0, .2, 1);
    --ng-mono:       ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
.fz .ng .ng-container,
.fz .ng .container {
    max-width: calc(var(--sg-max) + 2 * var(--sg-gutter));
    padding-left: var(--sg-gutter);
    padding-right: var(--sg-gutter);
}

/* Stare sekcje dostają krój i interlinię z body (main.css), a nie z korzenia .sg */
.fz .ng { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 16px; line-height: 1.7; }

/* Korzeń .sg ma color-scheme: dark, przez co pole zgody i lista wyboru w jasnym formularzu
   rysowały się ciemno. Stare sekcje są w większości jasne; ciemne dostają schemat z powrotem. */
.fz .ng { color-scheme: light; }
.fz .ng-hero, .fz .import-section, .fz .api-section, .fz .ng-demo, .fz .ng-lightbox { color-scheme: dark; }

/* Kotwice pod przyklejonym menu (sekcje „sg" mają to w glowna-sprzedazowa.css) */
.fz .ng section[id], .fz .ng article[id] { scroll-margin-top: var(--sg-top-h); }

/* ═══════════════ HERO: układ starej wersji + budynek cen ═══════════════ */
.fz .ng-hero { padding-top: calc(var(--sg-top-h) + 56px); padding-bottom: 96px; }
.fz .fz-hero__visual { position: relative; justify-self: end; width: 100%; max-width: 580px; }
/* Dymki wokół budynku. 2 leży w tle hero, pod menu po prawej. 1, 3 i 4 są w kontenerze budynku:
   pozycja liczona od wysokości hero wjeżdżała na statystyki i nagłówek karty na niskich ekranach
   i z paskiem promocji, a na tablecie chowała się pod kartę. 1 i 4 zahaczają o lewe rogi karty
   (brzegi bez treści), 3 wisi pod kartą; prawy brzeg zostaje w obrysie, bo przy 1025-1200 px karta
   dochodzi do marginesu strony. */
.fz .ng-drift--1 { left: -44px; top: -24px; }
.fz .ng-drift--2 { right: 2%; top: calc(var(--sg-top-h) + 10px); }
.fz .ng-drift--3 { right: 18px; bottom: -58px; }
.fz .ng-drift--4 { left: -44px; bottom: -26px; }
@media (max-width: 1024px) {
    .fz .ng-hero { padding-top: calc(var(--sg-top-h) + 40px); padding-bottom: 88px; }
    .fz .fz-hero__visual { justify-self: start; max-width: 600px; }
}
@media (max-width: 768px) {
    .fz .ng-hero { padding-top: calc(var(--sg-top-h) + 28px); padding-bottom: 64px; }
}

/* Atuty stały nad jasną sekcją z własnym odstępem; teraz pod nimi jest ciemne „Jak działa" */
.fz .ng-usp { padding-bottom: 96px; }
@media (max-width: 768px) { .fz .ng-usp { padding-bottom: 56px; } }

/* ═══════════════ SEKCJE „sg" W RYTMIE STARYCH SEKCJI ═══════════════ */
.fz .sg-sec { padding-block: 108px; }
@media (max-width: 768px) { .fz .sg-sec { padding-block: 68px; } }

/* Kontener jest węższy niż w wersji sprzedażowej (1152 zamiast 1240 px): mniejsze odstępy
   w schemacie, żeby etykiety węzłów („Kontrola zgodności") nie łamały się na cztery wiersze */
.fz .sg-flow { gap: clamp(28px, 3.4vw, 48px); }

/* Nagłówki w stylu starej wersji (etykieta + wyśrodkowany tytuł) na ciemnym tle */
.fz .sg-dark .ng-title { color: #fff; }
.fz .sg-dark .ng-head p { color: #aeb7c9; }
.fz .sg-dark .ng-tag { background: rgba(0, 212, 170, .13); color: var(--ng-teal); }
.fz .sg-dark .ng-hl { color: var(--ng-teal); }
.fz .sg-dark .ng-head p a { color: var(--ng-teal); }

/* „Dla kogo" na jasnym tle: karty z tym samym cieniem co kafelki funkcji */
.fz .sg-light .sg-who__card { box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -18px rgba(15, 23, 42, .18); }

/* ═══════════════ IMPORT: punkt listy z <strong> ═══════════════
   W main.css <li> jest flexem, więc pogrubienie i reszta zdania stawały się osobnymi kolumnami
   (na telefonie „Historia cen wstecz" wisiało obok tekstu). Znacznik przypięty absolutnie, tekst płynie normalnie. */
.fz .import-banner__list li { display: block; position: relative; padding-left: 32px; }
.fz .import-banner__list li > span[aria-hidden] { position: absolute; left: 0; top: 0; }

/* ═══════════════ STARE SEKCJE: nagłówki h3 zamiast h4 (kolejność nagłówków) ═══════════════ */
.fz .ng-benefit h3 { margin: 2px 0 4px; font-size: 1.02rem; line-height: 1.3; letter-spacing: 0; }
.fz .ng-info h3 { margin: 0 0 2px; font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: .76rem; font-weight: 700; line-height: 1.4; letter-spacing: .8px; text-transform: uppercase; color: var(--ng-ink-3); }
.fz .fz-faq__h { margin: 0; font-size: inherit; line-height: inherit; }

/* ═══════════════ KONTAKT: formularz pierwszy w HTML, na komputerze po prawej ═══════════════ */
/* main.css dodaje .form-row margines 20 px ponad margines pól: odstępy skakały 16/36 px */
.fz .ng-form .form-row { margin-bottom: 0; }
@media (min-width: 1025px) {
    .fz .ng-contact .ng-form { grid-column: 2; grid-row: 1; }
    .fz .ng-contact .ng-contact__info { grid-column: 1; grid-row: 1; }
}
@media (max-width: 1024px) {
    .fz .ng-contact__info { margin-top: 8px; }
}

/* ═══════════════ USTAWA I FAQ: listy i linki w treści z inc/glowna-sprzedazowa.php ═══════════════ */
.fz .ng-card-text ul { margin: 0 0 12px; padding-left: 20px; list-style: disc; color: var(--ng-ink-2); font-size: .95rem; line-height: 1.7; }
.fz .ng-card-text li + li { margin-top: 4px; }
.fz .ng-card-text li::marker { color: var(--ng-teal-dark); }
.fz .ng-faq__a a { color: var(--ng-teal-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }