/* Hallmark · genre: modern-minimal (jasny papier + ciemne „pokoje") · macrostructure: kept (one-page Aior, struktura sekcji bez zmian) · design-system: DESIGN.md · redesign 2026-09-16 · nav: kept (N1b) · footer: Ft5 Statement (płynny znak marki) */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 */
/* XTN — nadpisania szablonu Aior */

/* ==========================================================================
   Tokeny szaty graficznej v2 (2026-09-16): cztery kolory marki + pochodne
   (ciemne „pokoje", papier z lekkim fioletowym tintem, linie, poświaty).
   Reguły v2 niżej używają WYŁĄCZNIE tych zmiennych — bez luźnych hexów.
   ========================================================================== */
:root {
    --xtn-violet: #7B5DFF;
    --xtn-violet-ink: #6A4BF0; /* fiolet pod biały tekst: 5.4:1 */
    --xtn-violet-40: rgba(123, 93, 255, 0.4);
    --xtn-on-accent-soft: rgba(255, 255, 255, 0.84);
    --xtn-on-light-soft: rgba(6, 5, 11, 0.78);
    --xtn-tile-on-dark: rgba(255, 255, 255, 0.16);
    --xtn-tile-on-light: rgba(6, 5, 11, 0.1);
    --xtn-glass-dark: rgba(255, 255, 255, 0.04);
    --xtn-error: #C62A2F; /* tekst błędu na jasnym tle: 5.5:1 (dawne var(--xtn-error) miało 3.9:1) */
    --xtn-violet-on-dark: #9B84FF; /* = X w logo-white.svg */
    --xtn-blue-on-dark: #6FA9F0;   /* = N w logo-white.svg */
    --xtn-blue: #4A90E8;
    --xtn-blue-ink: #2F6FD0;
    --xtn-green: #A9C900;
    --xtn-green-ink: #6F8A00;
    --xtn-lime: #D4FF12;
    --xtn-lime-45: rgba(212, 255, 18, 0.45);
    --xtn-dark: #06050B;
    --xtn-dark-2: #110F1D;
    --xtn-dark-3: #1D1933;
    --xtn-paper: #FFFFFF;
    --xtn-paper-2: #F6F5FC;
    --xtn-paper-3: #EEEBFF;
    --xtn-tint-blue: #E8F1FD;
    --xtn-tint-green: #F2FBD1;
    --xtn-rule: #E7E4F9;
    --xtn-rule-dark: rgba(255, 255, 255, 0.09);
    --xtn-ink-dark: rgba(255, 255, 255, 0.74);
    --xtn-ink-dark-strong: rgba(255, 255, 255, 0.88);
    --xtn-ink-dark-2: rgba(255, 255, 255, 0.5);
    --xtn-ink-dark-3: rgba(255, 255, 255, 0.5); /* min. 4.5:1 na --xtn-dark dla 12–13px */
    --xtn-ink-muted: #6A6775; /* etykiety i podpisy na jasnym papierze (5.3:1) */
    --xtn-blue-deep: #2560BD; /* mały tekst na --xtn-tint-blue: 5.3:1 (blue-ink miał 4.3) */
    --xtn-green-deep: #566B00; /* mały tekst na --xtn-tint-green: 5.6:1 (green-ink miał 3.7) */
    --xtn-glow-violet: rgba(123, 93, 255, 0.34);
    --xtn-glow-violet-soft: rgba(123, 93, 255, 0.11);
    --xtn-glow-blue: rgba(74, 144, 232, 0.34);
    --xtn-glow-lime: rgba(212, 255, 18, 0.22);
    --xtn-shadow: 0 18px 40px rgba(6, 5, 11, 0.1);
    --xtn-shadow-dark: 0 18px 40px rgba(6, 5, 11, 0.3);
    --xtn-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --xtn-dur-micro: 120ms;
    --xtn-dur-short: 220ms;
    --xtn-dur-long: 420ms;
    --xtn-radius-card: 24px;
    --xtn-radius-pill: 40px;
    /* kształt ptaszka z szablonu (checklist), jako maska do barwienia dowolnym kolorem */
    --xtn-check-mask: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.75 2.35538C16.9849 1.33436 14.9357 0.75 12.75 0.75C6.12258 0.75 0.75 6.12258 0.75 12.75C0.75 19.3774 6.12258 24.75 12.75 24.75C19.3774 24.75 24.75 19.3774 24.75 12.75C24.75 11.9281 24.6673 11.1254 24.51 10.35' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M7.9502 13.3496C7.9502 13.3496 9.7502 13.3496 12.1502 17.5496C12.1502 17.5496 18.8208 6.54961 24.7502 4.34961' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Polska typografia: szablon kapitalizuje każde słowo (text-transform: capitalize),
   co po polsku jest błędne i psuje adresy e-mail. Wyłączamy — teksty są już
   poprawnie zapisane w HTML. */
.box-title,
.box-text,
.th-btn,
.available-list li,
.available-list .subtitle,
.marquee-card a,
.box-info .box-title {
    text-transform: none !important;
}

/* Typografia tytułów: Poppins regular + semibold na akcentowanych słowach */
.sec-title,
.hero-title,
.footer-top .box-title {
    font-family: "Poppins", "Sora", sans-serif !important;
    font-weight: 400 !important;
}
.xtn-em {
    font-weight: 600;
}
.xtn-article h1 {
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 600;
}

/* Badże sekcji (Start / O nas / Usługi ...) — większe, wyrazistsze, klikalne. */
.sub-title {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 13px 28px 13px 56px;
    border: 1.5px solid rgba(123, 93, 255, 0.38);
    background: rgba(123, 93, 255, 0.08);
    box-shadow: 0 6px 22px rgba(123, 93, 255, 0.14);
    border-radius: 40px;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    /* szablonowe margin-bottom:20px daje realny odstęp ~14px (leading tytułu
       "zjada" różnicę) — za mało przy większym, wyrazistszym badge'u */
    margin-bottom: 34px;
}
/* znak X marki w badge'u — środek grafiki na linii środka optycznego tekstu */
.sub-title:before {
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url("../img/logo-icon.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.sub-title:hover,
.sub-title:focus-visible {
    background: rgba(123, 93, 255, 0.16);
    border-color: rgba(123, 93, 255, 0.65);
    box-shadow: 0 8px 26px rgba(123, 93, 255, 0.22);
}
/* wariant na ciemnych sekcjach (Proces, Technologie) */
.sub-title.style2,
.sub-title.text-white {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.35);
}
.sub-title.style2:hover,
.sub-title.text-white:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(212, 255, 18, 0.7);
}

/* Kotwice: zapas na sticky header przy natywnych skokach */
section[id],
div[id] {
    scroll-margin-top: 96px;
}

/* Hero: dolna krawędź wideo równa z dolną krawędzią kafelków po lewej.
   Wideo wypełnia absolutnie prawą kolumnę, więc wysokość wiersza dyktuje
   wyłącznie lewa kolumna (panel + 3 kafelki). */
@media (min-width: 1200px) {
    .hero-1 .row > .col-xl-6:last-child {
        position: relative;
    }
    .hero-1 .hero-video {
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
        right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
        height: auto;
        margin-bottom: 0;
        overflow: hidden;
        border-radius: 24px;
    }
    .hero-1 .hero-video video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* ==========================================================================
   Kreator wyceny (formularz zapytania) — sekcja kontakt
   ========================================================================== */
.xtn-form-wrap {
    max-width: 780px;
    margin: 40px auto 0;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 24px;
    padding: 40px 44px 36px;
    text-align: left;
    box-shadow: 0 30px 80px rgba(6, 5, 11, 0.35);
    position: relative;
    z-index: 3;
}
@media (max-width: 767px) {
    .xtn-form-wrap {
        padding: 28px 20px 24px;
    }
}

/* Stary pasek kroków (pigułki .xtn-step-dot z tłem i obwódką) oraz animacja
   xtnFadeIn usunięte 2026-09-18 — markup to teraz <ol> z paskiem postępu,
   a przejścia kroków robi blok „Formularz v2" na końcu pliku. */

.xtn-q {
    font-family: var(--title-font, "Sora", sans-serif);
    font-size: 22px;
    font-weight: 600;
    color: #06050B;
    margin-bottom: 6px;
}
.xtn-hint {
    font-size: 15px;
    color: #6a6775;
    margin-bottom: 22px;
}
.xtn-field-note {
    font-size: 13px;
    color: #6a6775;
    line-height: 1.5;
    margin: 7px 0 0;
}

/* chipsy wyboru */
.xtn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 26px;
}
.xtn-chip {
    border: 1.5px solid #E7E4F9;
    background: #fff;
    color: #06050B;
    border-radius: 40px;
    padding: 12px 22px;
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.22s ease;
    font-family: inherit;
}
.xtn-chip:hover {
    border-color: #7B5DFF;
    box-shadow: 0 6px 18px rgba(123, 93, 255, 0.16);
    transform: translateY(-1px);
}
.xtn-chip.is-selected {
    background: #7B5DFF;
    border-color: #7B5DFF;
    color: #fff;
    box-shadow: 0 8px 22px rgba(123, 93, 255, 0.35);
}

/* pola */
.xtn-field {
    margin-bottom: 18px;
}
.xtn-field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #06050B;
    margin-bottom: 7px;
}
.xtn-field input,
.xtn-field textarea {
    width: 100%;
    border: 1.5px solid #E7E4F9;
    border-radius: 14px;
    background: #FBFAFF;
    padding: 13px 16px;
    font-size: 15px;
    font-family: inherit;
    color: #06050B;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.xtn-field input:focus,
.xtn-field textarea:focus {
    border-color: #7B5DFF;
    box-shadow: 0 0 0 4px rgba(123, 93, 255, 0.12);
    background: #fff;
}
.xtn-field.has-error input,
.xtn-field.has-error textarea {
    border-color: var(--xtn-error);
}
.xtn-field .xtn-err {
    display: none;
    color: var(--xtn-error);
    font-size: 13px;
    margin-top: 5px;
}
.xtn-field.has-error .xtn-err {
    display: block;
}
.xtn-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}
@media (max-width: 575px) {
    .xtn-grid2 { grid-template-columns: 1fr; }
}

/* podsumowanie wyboru w kroku 3 */
.xtn-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}
.xtn-summary span {
    background: #EFEBFF;
    color: #4F3DBB;
    border-radius: 30px;
    padding: 6px 14px;
    font-size: 13.5px;
    font-weight: 600;
}

/* zgoda */
.xtn-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    color: #6a6775;
    line-height: 1.5;
    margin: 4px 0 22px;
    cursor: pointer;
}
.xtn-consent input[type="checkbox"] {
    /* motyw globalnie ukrywa checkboxy — przywracamy natywny */
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-appearance: checkbox;
    appearance: auto;
    margin-top: 3px;
    width: 16px !important;
    height: 16px !important;
    accent-color: #7B5DFF;
    flex: none;
    cursor: pointer;
}
.xtn-consent.has-error {
    color: var(--xtn-error);
}

/* nawigacja kroków */
.xtn-form-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
}
.xtn-back {
    background: none;
    border: none;
    color: #6a6775;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    padding: 10px 6px;
    font-family: inherit;
}
.xtn-back:hover { color: #06050B; }

/* stan wysłano / błąd */
.xtn-form-done {
    text-align: center;
    padding: 30px 10px 10px;
}
.xtn-form-done .tick {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #D4FF12;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 30px;
    color: #06050B;
}
.xtn-form-done h3 {
    font-size: 24px;
    margin-bottom: 8px;
}
.xtn-form-done p {
    color: #6a6775;
    margin-bottom: 0;
}
.xtn-form-error {
    display: none;
    margin-top: 14px;
    color: var(--xtn-error);
    font-size: 14px;
    text-align: center;
}
.xtn-mail-alt {
    text-align: center;
    margin-top: 18px;
    font-size: 14px;
    color: #6a6775;
}
.xtn-mail-alt a {
    color: #7B5DFF;
    font-weight: 600;
}
/* linia rejestrowa w stopce (wymóg KSH dla P.S.A.) */
.xtn-legal {
    margin: 16px 0 0;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
}

/* Stopka bez szarych linii-podziałek */
.footer-layout1 .footer-line:before {
    display: none !important;
}
.footer-layout1 .footer-top {
    border-bottom: 0 !important;
    margin-bottom: 50px;
}
.footer-wrapper .copyright-wrap {
    border-top: 0 !important;
}

/* ==========================================================================
   Szersze wplecenie palety: fiolet #7B5DFF · błękit #4A90E8 · zieleń #A9C900
   ========================================================================== */

/* Pakiety v2: cztery karty na tym samym cichym papierze, kolor marki tylko
   w CENIE (fiolet / błękit / zieleń) i w plakietce ikony; karta polecana
   (.active, Aplikacja/MVP) jako jedyna ciemna — z limonkową ceną. Wcześniejsze
   pełne wypełnienia kart błękitem i zielenią krzyczały wszystkie naraz;
   teraz jest jedna, czytelna hierarchia. */
.price-box {
    background: var(--xtn-paper-2);
    border: 1px solid var(--xtn-rule);
    border-radius: var(--xtn-radius-card);
    transition: transform var(--xtn-dur-short) var(--xtn-ease-out), box-shadow var(--xtn-dur-short) var(--xtn-ease-out), border-color var(--xtn-dur-short) var(--xtn-ease-out);
}
.price-box:hover {
    transform: translateY(-4px);
    border-color: var(--xtn-violet-40);
    box-shadow: var(--xtn-shadow);
}
.price-box .box-icon {
    background: var(--xtn-paper-3);
    border-radius: 14px;
}
#pricing-sec [class*="col-"]:nth-child(1) .price-box .box-price { color: var(--xtn-violet); }
#pricing-sec [class*="col-"]:nth-child(2) .price-box .box-price { color: var(--xtn-blue-ink); }
#pricing-sec [class*="col-"]:nth-child(2) .price-box .box-icon { background: var(--xtn-tint-blue); }
#pricing-sec [class*="col-"]:nth-child(4) .price-box .box-price { color: var(--xtn-green-ink); }
#pricing-sec [class*="col-"]:nth-child(4) .price-box .box-icon { background: var(--xtn-tint-green); }
.price-box.active {
    background: var(--xtn-dark);
    border-color: var(--xtn-dark);
}
.price-box.active:hover {
    border-color: var(--xtn-lime-45);
    box-shadow: var(--xtn-shadow-dark);
}
.price-box.active .box-price {
    color: var(--xtn-lime);
}
.price-box.active .box-icon {
    background: var(--xtn-lime);
}
/* lista „Co w środku?" siedzi w BIAŁYM polu szablonu także na ciemnej karcie —
   tekst i ptaszki zostają ciemne (celowo bez nadpisań) */
#pricing-sec .price-box .box-title {
    font-size: clamp(24px, 1.9vw, 30px);
    line-height: 1.2;
}

/* Guziki: natywny "swipe" szablonu (mała fioletowa nakładka + wypełnienie
   rozlewające się od prawej), TYLKO z jednym akcentowym kolorem wypełnienia
   (błękit) zamiast szablonowej limonki — prosto, bez rainbow-efektu.
   Wszystkie guziki na stronie kończą hover na TYM SAMYM błękicie, więc nie
   ma powodu podmieniać koloru tekstu — zostaje taki, jaki jest w spoczynku
   (szablonowe `color: var(--title-color)` na hover skasowane, bo to właśnie
   ono robiło niepotrzebną zamianę białego na czarny). */
.th-btn:hover,
.th-btn.active {
    color: var(--white-color) !important;
}
.th-btn.black-border:hover {
    color: var(--title-color) !important;
}
.th-btn:hover,
.th-btn:focus-visible {
    box-shadow: 0 10px 24px rgba(74, 144, 232, 0.3);
}
.th-btn:hover:after,
.th-btn.active:after {
    background: #4A90E8 !important;
}
/* warianty z obwódką (np. "Zobacz pakiety") mają własne, bardziej specyficzne
   reguły w szablonie — nadpisujemy tym samym błękitem */
.th-btn.th-border:hover:after,
.cta-area2 .th-btn.th-border:hover:after {
    background: #4A90E8 !important;
}

/* Liczby hero i liczników w rytmie trio */
.hero-1 [class*="col-md-4"]:nth-child(1) .hero-card .box-number { color: #7B5DFF; }
.hero-1 [class*="col-md-4"]:nth-child(2) .hero-card .box-number { color: #2F6FD0; }
.hero-1 [class*="col-md-4"]:nth-child(3) .hero-card .box-number { color: #6F8A00; }
.counter-area .counter-card_wrapp:nth-child(1) .box-number { color: #7B5DFF; }
.counter-area .counter-card_wrapp:nth-child(2) .box-number { color: #2F6FD0; }
.counter-area .counter-card_wrapp:nth-child(3) .box-number { color: #6F8A00; }

/* Wdrożenia: kategorie kart w błękicie */
.project-card .box-sub {
    color: #2F6FD0;
}

/* Kreator: hover chipsów błękitny (wybrany zostaje fioletowy), podsumowanie błękitne */
.xtn-chip:hover {
    border-color: #4A90E8;
    box-shadow: 0 6px 18px rgba(74, 144, 232, 0.22);
}
.xtn-summary span {
    background: #E8F1FD;
    color: #2F6FD0;
}

/* Badge sekcji: hover w błękicie */
.sub-title:hover,
.sub-title:focus-visible {
    background: rgba(74, 144, 232, 0.12);
    border-color: rgba(74, 144, 232, 0.75);
    box-shadow: 0 8px 26px rgba(74, 144, 232, 0.25);
}

/* Sekcja kontaktu: tint aurora (fiolet -> błękit -> zieleń) na tle */
.cta-area2:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(118deg, rgba(108, 80, 240, 0.55) 0%, rgba(62, 127, 224, 0.45) 52%, rgba(134, 163, 28, 0.4) 100%);
    pointer-events: none;
}
.cta-area2 .row {
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   Sekcja "Nasz stack" — dynamiczne pasy pigułek + neutralne ikony kart
   ========================================================================== */
.xtn-tech-marquee {
    display: flex;
    flex-direction: column;
    gap: 10px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* Bezszwowa pętla czystym CSS: track-inner zawiera treść 2x, a translateX(-50%)
   przesuwa dokładnie o szerokość jednej kopii — w momencie zapętlenia obraz
   jest identyczny jak na starcie, więc przejście jest niewidoczne. Prościej
   i pewniej niż loop-mode Swipera przy krótkich, wąskich elementach. */
.xtn-tech-track {
    overflow: hidden;
    /* zapas na uniesienie pigułki (hover: translateY) + cień — bez tego
       overflow:hidden obcina górę pigułki, co wygląda jak czarna kreska
       "zakrywająca" element zamiast dać mu się swobodnie unieść */
    padding: 8px 0;
}
.xtn-tech-track-inner {
    display: flex;
    width: max-content;
    gap: 16px;
    animation: xtnTechScroll 32s linear infinite;
}
.xtn-tech-track-rev .xtn-tech-track-inner {
    animation-direction: reverse;
    animation-duration: 26s;
}
.xtn-tech-track:hover .xtn-tech-track-inner {
    animation-play-state: paused;
}
@keyframes xtnTechScroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .xtn-tech-track-inner { animation: none; }
}
.xtn-tech-pill {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 14px 26px;
    border-radius: 40px;
    font-family: var(--title-font, "Sora", sans-serif);
    font-size: 18px;
    font-weight: 600;
    color: #06050B;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.xtn-tech-pill.c-violet { background: #7B5DFF; color: #fff; }
.xtn-tech-pill.c-blue { background: #4A90E8; color: #fff; }
.xtn-tech-pill.c-green { background: #D4FF12; color: #06050B; }
.xtn-tech-pill:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

/* Karty "co integrujemy" pod pasami — jaśniejsza ikona-plakietka + hover-lift,
   spójne z resztą strony (te same akcenty fiolet/błękit/zieleń) */
.integration-card {
    background: rgba(255, 255, 255, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.integration-card:hover {
    transform: translateY(-5px);
    border-color: rgba(74, 144, 232, 0.55);
    box-shadow: 0 20px 44px rgba(74, 144, 232, 0.18);
}
.integration-card .box-icon {
    background: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: none;
}
.integration-card:nth-child(1) .box-icon { background: #EFEBFF; }
.integration-card:nth-child(2) .box-icon { background: #E8F1FD; }
.integration-card:nth-child(3) .box-icon { background: #F2FBD1; }
.integration-card:nth-child(4) .box-icon { background: #EFEBFF; }

/* ==========================================================================
   Stopka v2 — „płynny znak": ciemna, spokojna stopka bez żadnych cieni pod
   tekstem. Pętla wideo (fiolet -> błękit, assets/img/bg/footer-loop.mp4)
   widoczna WYŁĄCZNIE przez kreski logotypu wycięte w ciemnej płaszczyźnie
   (te same ścieżki, które rysuje preloader na wejściu — strona otwiera się
   rysowanym znakiem i zamyka znakiem wypełnionym płynem). Mechanizm: SVG
   <mask> na prostokącie w kolorze stopki — biel maski = zakrycie, czarne
   kreski = dziury, przez które prześwituje wideo pod spodem. Tekst stopki
   nigdy nie leży na wideo, więc text-shadow z poprzedniej wersji (brudne
   poświaty wokół liter) jest zbędny. Proporcja bloku = viewBox logotypu
   (122:42), więc litery skalują się z szerokością kontenera bez
   zniekształceń na każdym ekranie (na telefonie ~130px wysokości).
   ========================================================================== */
.footer-wrapper.xtn-footer {
    background: var(--xtn-dark);
    text-shadow: none;
}
/* LOCKUP (2026-09-18, na życzenie Marcina): płynny znak BEZ kropki u góry,
   pod nim hasło „Zbudujmy przyszłość." DOKŁADNIE tej samej szerokości —
   krawędzie liter i napisu w jednej linii. Jak to jest spasowane:
   1) .xtn-lockup to inline-block, którego szerokość wyznacza hasło
      (white-space:nowrap) — znak ma width:auto, więc dziedziczy tę szerokość;
   2) viewBox SVG przycięty do skrajów kresek (3..105 × 1..37), więc krawędź
      bloku = krawędź litery;
   3) napis ma „światło" po bokach glifów (zmierzone canvasem dla Poppins:
      0,04 em przed „Z", 0,04 em po „." minus 0,015 em trackingu) — znak
      dostaje dokładnie takie marginesy w em, więc równa do TUSZU liter,
      nie do pudełka tekstu. Wszystko w em => skaluje się samo;
   4) rozmiar: 9,4% szerokości kontenera (cqi), więc hasło zawsze mieści się
      w jednej linii — od telefonu po 96 px na dużym ekranie. */
.xtn-lockup-wrap {
    container-type: inline-size;
    text-align: center;
    padding-top: clamp(56px, 7vw, 96px);
}
.xtn-lockup {
    display: inline-block;
    text-align: left;
    font-size: min(8.4vw, 96px); /* fallback bez jednostek kontenera */
    font-size: min(9.4cqi, 96px);
}
.xtn-liquid {
    position: relative;
    aspect-ratio: 102 / 36;
    overflow: hidden;
    background: var(--xtn-dark);
    margin: 0 0.025em 0 0.04em;
}
.xtn-liquid video {
    /* 1px mniejsze od zakrycia: przy ułamkowej wysokości bloku wideo nigdy
       nie wystaje spod maski (na telefonie wystawało jako jasna kreska) */
    position: absolute;
    inset: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    object-fit: cover;
}
.xtn-lockup-title {
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 400;
    font-size: 1em;
    line-height: 1.12;
    letter-spacing: -0.015em;
    white-space: nowrap;
    color: var(--xtn-paper);
    margin: 0.2em 0 0;
}
.xtn-lockup-cta {
    margin-top: clamp(28px, 3vw, 44px);
}
.xtn-liquid svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.xtn-liquid .xtn-liquid-cover {
    fill: var(--xtn-dark);
}
.footer-layout1 .widget-area {
    padding-top: clamp(48px, 6vw, 80px);
}
.footer-layout1 .about-text,
.footer-layout1 .footer-widget.widget_nav_menu a {
    color: var(--xtn-ink-dark);
}
.footer-layout1 .footer-widget .widget_title {
    font-size: 13px;
    letter-spacing: 0.14em;
    color: var(--xtn-ink-dark-2);
}
.footer-layout1 .copyright-text,
.copyright-wrap .footer-links a {
    color: var(--xtn-ink-dark);
}
.copyright-wrap {
    padding-top: 0;
}
.xtn-legal {
    color: var(--xtn-ink-dark-3);
    text-wrap: balance; /* bez sierotki „zł" w osobnej linii */
}

/* Opinie: imię pogrubione, nazwa firmy (jeśli podana) zwykłym regularem pod
   spodem. Gdy klient nie poda firmy, .box-desig po prostu nie występuje w
   znaczniku — .testi-card sam się do tego dostosowuje (brak pustej linii). */
.testi-card .box-title {
    font-weight: 700;
}
.testi-card .box-author {
    /* stały rozmiar niezależnie od wysokości sąsiada (.box-info z imieniem +
       opcjonalną firmą) — bez tego avatar dostosowywał się do wysokości
       wiersza flex, która zależała od tego, czy firma jest 1 czy 2 linie
       (mimo że firma jest już przycięta do 1 linii wyżej), psując jednolitą
       wysokość kart razem z resztą wariantów */
    height: 82px;
    flex-shrink: 0;
}
.testi-card .box-author img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.testi-card .box-info .box-desig {
    display: block;
    margin-top: 2px;
    /* jedna linia, długie nazwy firm ucięte wielokropkiem — bez tego
       długa, nierozdzielna nazwa firmy zawijała się do 2 linii i psuła
       jednolitą wysokość kart (patrz .is-clampable niżej) */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
}
/* Długie opinie: ucięte do kilku linii + "Czytaj więcej" (patrz xtn.js).
   .is-clampable siedzi na każdej opinii na stałe — przycisk pokazuje się
   tylko gdy tekst faktycznie się nie mieści (zmierzone scrollHeight, nie
   zgadywane po długości znaków). .is-expanded (po kliknięciu "Czytaj
   więcej") musi PRZEBIĆ clamp — stąd jawne display:block/overflow:visible,
   nie tylko sam odstęp.
   WAŻNE — jednolita wysokość kart niezależnie od długości opinii: krótka
   opinia NIE ma dostać mniejszej karty niż długa. min-height na tekście
   (5×44px = wysokość pełnego clampa) + przycisk "Czytaj więcej" zawsze
   zajmujący miejsce w layoucie (visibility, nie display:none, gdy niepotrzebny)
   razem dają identyczną wysokość każdej nierozwiniętej karty — różni się
   tylko ilość białego miejsca pod krótkim tekstem, nie wysokość całej karty. */
.testi-card .box-text.is-clampable {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    min-height: 220px;
    margin-bottom: 14px;
}
.testi-card .box-text.is-expanded {
    display: block;
    overflow: visible;
    margin-bottom: 14px;
}
.testi-card .box-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 20px;
    font-family: var(--body-font);
    font-size: 15px;
    font-weight: 600;
    color: #4A90E8;
    cursor: pointer;
}
.testi-card .box-more[hidden] {
    /* !important konieczny: bootstrap.min.css ma [hidden]{display:none!important}
       (świadome wzmocnienie reboot.css) — zwykła reguła by tego nie przebiła
       niezależnie od specyficzności. Chcemy visibility, nie display:none, żeby
       przycisk nadal zajmował miejsce w layoucie — patrz komentarz przy .is-clampable
       o jednolitej wysokości kart niezależnie od długości opinii. */
    display: inline-flex !important;
    visibility: hidden;
    pointer-events: none;
}
.testi-card .box-more:hover {
    color: #7B5DFF;
}
.testi-card .box-more i {
    font-size: 12px;
}
@media (max-width: 1199px) {
    .testi-card .box-text.is-clampable,
    .testi-card .box-text.is-expanded {
        margin-bottom: 10px;
    }
}

/* honeypot — niewidoczny dla ludzi */
.xtn-hp {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

/* Marquee: szablon ma line-height 0.75em, co ucina dolne wydłużenia polskich
   liter (p, j, y, ą, ę). Przywracamy pełną wysokość wiersza. */
.marquee-card a {
    line-height: 1.18em !important;
    padding-bottom: 4px !important;
}

/* ==========================================================================
   Sekcja Proces v2 — ciemny „pokój" zamiast gradientu aurora. Każdy krok ma
   JEDEN kolor marki (fiolet / błękit / limonka, cyklicznie), który spina
   numer kroku, ptaszki listy i — najważniejsze — samą animację 3D:
   stockowe obiekty niosły pomarańcz, złoto i czerwień spoza palety, więc
   są przebarwiane w locie filtrem CSS (grayscale -> sepia -> hue-rotate ->
   saturate) dokładnie na ten odcień. Wartości hue-rotate SKALIBROWANE
   pomiarem (canvas ctx.filter: szary 50% -> odcień HSL 250°/213°/66°),
   nie zgadywane. Kanał alpha WebM zostaje nietknięty, więc obiekt nadal
   „unosi się" na karcie; pod nim miękka poświata w tym samym kolorze.
   ========================================================================== */
.xtn-process-bg {
    background:
        radial-gradient(46% 58% at 6% 0%, var(--xtn-glow-violet), transparent 70%),
        var(--xtn-dark);
}
.xtn-process-bg .row > [class*="col-"]:nth-child(3n+1) .process-item {
    --step: var(--xtn-violet);
    --step-ink: var(--xtn-paper);
    --step-glow: var(--xtn-glow-violet);
    --step-filter: grayscale(1) sepia(1) hue-rotate(207deg) saturate(4) brightness(0.96);
}
.xtn-process-bg .row > [class*="col-"]:nth-child(3n+2) .process-item {
    --step: var(--xtn-blue);
    --step-ink: var(--xtn-dark); /* biel na tym błękicie = 3.3:1, ciemny = 6:1 */
    --step-glow: var(--xtn-glow-blue);
    --step-filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(3.4);
}
.xtn-process-bg .row > [class*="col-"]:nth-child(3n+3) .process-item {
    --step: var(--xtn-lime);
    --step-ink: var(--xtn-dark);
    --step-glow: var(--xtn-glow-lime);
    --step-filter: grayscale(1) sepia(1) hue-rotate(26deg) saturate(3.2) brightness(1.16);
}
.xtn-process-bg .process-item {
    background-color: var(--xtn-dark-2);
    border: 1px solid var(--xtn-rule-dark);
    box-shadow: none;
}
.xtn-process-bg .process-item:after {
    background: var(--xtn-dark-2);
}
.xtn-process-bg .process-item .box-num {
    color: var(--xtn-ink-dark-2);
    letter-spacing: 0.1em;
}
.xtn-process-bg .process-item .box-num .number {
    background: var(--step);
    color: var(--step-ink);
    font-weight: 600;
    letter-spacing: 0;
}
.xtn-process-bg .process-item .box-title {
    color: var(--xtn-paper);
}
.xtn-process-bg .process-item .box-text {
    color: var(--xtn-ink-dark);
}
.xtn-process-bg .process-item .checklist li {
    color: var(--xtn-ink-dark-strong);
}
/* ptaszek listy: szablon wstawia SVG z wpisanym na sztywno ciemnym obrysem
   (content:url(data:...) — `color` go nie zmienia), niewidoczny na ciemnej
   karcie. Ten sam kształt jako maska + wypełnienie kolorem kroku. */
.xtn-process-bg .process-item .checklist li:before {
    content: "";
    width: 26px;
    height: 26px;
    background-color: var(--step);
    -webkit-mask: var(--xtn-check-mask) center / contain no-repeat;
    mask: var(--xtn-check-mask) center / contain no-repeat;
}

/* kafelek z animacją w kroku procesu — przezroczysta animacja (WebM alpha /
   canvas WebGL w Safari) unosi się bezpośrednio na karcie */
.xtn-anim-tile {
    background: transparent;
    border-radius: var(--xtn-radius-card);
    overflow: hidden;
}
.xtn-process-bg .xtn-anim-tile {
    background: radial-gradient(52% 52% at 50% 56%, var(--step-glow), transparent 72%);
}
.xtn-process-bg .xtn-anim-tile video,
.xtn-process-bg .xtn-anim-tile canvas {
    filter: var(--step-filter);
}
/* ostateczny fallback (bez alphy i bez WebGL): mp4 z wtopionym białym tłem —
   biały kafelek i BEZ przebarwiania, bo filtr zabarwiłby też tło */
.xtn-anim-tile.xtn-anim-white {
    background: var(--xtn-paper);
}
.xtn-anim-tile.xtn-anim-white video {
    filter: none;
}
.xtn-anim-tile video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* kroki: rozmycie sterowane scrollem z xtn.js (zmienna --xtn-blur) */
@media (min-width: 768px) {
    .xtn-process-bg .process-item {
        filter: blur(var(--xtn-blur, 0px));
        opacity: var(--xtn-dim, 1);
        will-change: filter, opacity;
    }
}

/* ==========================================================================
   Modal „Dodaj opinię"
   ========================================================================== */
.xtn-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 5, 11, 0.66);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.xtn-modal-overlay.is-open {
    display: flex;
    animation: xtnFadeIn 0.25s ease;
}
.xtn-modal {
    background: #fff;
    border-radius: 24px;
    max-width: 560px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    padding: 34px 36px 30px;
    position: relative;
    box-shadow: 0 40px 100px rgba(6, 5, 11, 0.5);
}
@media (max-width: 575px) {
    .xtn-modal { padding: 26px 18px 22px; }
}
.xtn-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid #E7E4F9;
    background: #fff;
    color: #06050B;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.xtn-modal-close:hover {
    background: #06050B;
    color: #fff;
    border-color: #06050B;
}
.xtn-stars {
    display: flex;
    gap: 6px;
    margin-bottom: 22px;
}
.xtn-star {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    font-size: 30px;
    line-height: 1;
    color: #DDD9EE;
    transition: color 0.15s ease, transform 0.15s ease;
}
.xtn-star:hover { transform: scale(1.15); }
.xtn-star.is-on { color: #D4FF12; text-shadow: 0 0 1px #06050B, 0 1px 0 rgba(6,5,11,.35); }
.xtn-stars.has-error .xtn-star { color: #f3b6b8; }

/* ==========================================================================
   Blog
   ========================================================================== */
.blog-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #EEEBFA;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.blog-card:hover {
    box-shadow: 0 20px 50px rgba(123, 93, 255, 0.16);
    transform: translateY(-4px);
}
.blog-card .box-img img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
.blog-card .box-content {
    padding: 22px 24px 6px;
    flex: 1;
}
.blog-card .cat {
    display: inline-block;
    background: #EFEBFF;
    color: #4F3DBB;
    font-size: 13px;
    font-weight: 600;
    border-radius: 30px;
    padding: 5px 13px;
    margin-bottom: 12px;
}
.blog-card .box-title {
    font-size: 20px;
    line-height: 1.35;
}
.blog-card .blog-meta {
    padding: 0 24px 20px;
    color: #6a6775;
    font-size: 14px;
}
.blog-card .blog-meta a { color: #6a6775; }

/* strona artykułu */
.xtn-article {
    max-width: 780px;
    margin: 0 auto;
}
.xtn-article .art-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    color: #6a6775;
    font-size: 14.5px;
    margin-bottom: 24px;
}
.xtn-article .art-cover {
    border-radius: 20px;
    width: 100%;
    margin-bottom: 34px;
}
.xtn-article h1 {
    font-size: clamp(30px, 4.5vw, 44px);
    line-height: 1.2;
    margin-bottom: 16px;
}
.xtn-article h2 {
    font-size: 26px;
    margin: 36px 0 14px;
}
.xtn-article p, .xtn-article li {
    font-size: 16.5px;
    line-height: 1.75;
    color: #484848;
}
.xtn-article ul {
    margin: 0 0 18px 0;
    padding-left: 22px;
}
.xtn-article li { margin-bottom: 8px; }
.xtn-article .art-cta {
    margin-top: 44px;
    background: #06050B;
    color: #fff;
    border-radius: 20px;
    padding: 30px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.xtn-article .art-cta p {
    color: #fff;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

/* ==========================================================================
   Preloader — "kreska za kreską": prawdziwe ścieżki logo (assets/img/logo.svg)
   rysują się same, w kolorach liter, na BIAŁYM tle — to prawdziwe tło strony
   (<body> jest białe), więc preloader i przejście między stronami niżej
   używają dokładnie tego samego koloru, zero "obcego" koloru przebijającego
   się na chwilę. Zastępuje CAŁKOWICIE oryginalny loader szablonu (rainbow
   blob + migoczące litery na czarnym tle).
   Celowo NOWE id (xtn-preloader, nie preloader) — stockowy main.js ma
   `if ($("#preloader").length)` blok sterujący klasami preloader-bg i loader,
   które już nie istnieją w markupie; inny id = ten blok nigdy się nie odpala,
   zero konfliktu dwóch systemów naraz.
   Pokazuje się na KAŻDYM wejściu (pierwszym i kolejnych w tej samej sesji) —
   to jednocześnie zasłona, pod którą chowa się ładowanie strony i ewentualna
   korekta scrolla do kotwicy (patrz xtn.js). Pierwsze wejście w sesji: pełne
   rysowanie. Kolejne: wariant .xtn-pl-quick niżej (skrócony, żeby nie męczyć
   przy częstym klikaniu) — sterowanie przez sessionStorage w xtn.js.
   ========================================================================== */
#xtn-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: opacity .45s ease;
}
#xtn-preloader.xtn-pl-out {
    opacity: 0;
    pointer-events: none;
}
.xtn-pl-mark {
    width: 150px; /* znak bez kropki (viewBox 108) — litery tej samej wielkości co wcześniej */
    height: auto;
    overflow: visible;
}
.xtn-pl-mark path {
    fill: none;
    transition: stroke-dashoffset .55s cubic-bezier(.65, 0, .35, 1);
}
.xtn-pl-mark path[data-pl="t"] { transition-delay: .12s; }
.xtn-pl-mark path[data-pl="n"] { transition-delay: .24s; }
#xtn-preloader.xtn-pl-drawn .xtn-pl-mark path {
    stroke-dashoffset: 0;
}
/* wariant "szybki" — kolejne wejścia w tej samej sesji (patrz xtn.js):
   te same przejścia, mocno skrócone, żeby nie męczyć przy częstym
   klikaniu między podstronami, ale znak marki nadal widocznie "wchodzi". */
#xtn-preloader.xtn-pl-quick {
    transition-duration: .28s;
}
#xtn-preloader.xtn-pl-quick .xtn-pl-mark path {
    transition-duration: .18s;
    transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
    .xtn-pl-mark path,
    #xtn-preloader {
        transition-duration: .01s !important;
        transition-delay: 0s !important;
    }
}

/* ==========================================================================
   Zanikanie PRZED nawigacją na inną stronę (JS: xtn.js -> initPageFade) —
   jedyny, jednolity mechanizm przejścia między stronami, taki sam w każdej
   przeglądarce (celowo bez zależności od natywnego View Transitions API —
   niepewne wsparcie/odpalanie w praktyce, patrz też DESIGN.md). Strona
   wchodząca "wprowadza" z powrotem preloader wyżej.
   ========================================================================== */
body.xtn-page-leaving {
    opacity: 0;
    transition: opacity .32s ease;
}
@media (prefers-reduced-motion: reduce) {
    body.xtn-page-leaving {
        transition: none;
    }
}

/* ==========================================================================
   Szata graficzna v2 (2026-09-16) — jasne sekcje bez zdjęć-teł i gradientów:
   papier z lekkim fioletowym tintem, cienkie linie, jeden akcent na raz.
   Rytm strony: jasne pasma przerywane trzema ciemnymi „pokojami" (Proces,
   Stack, Kontakt) i ciemną stopką zamkniętą płynnym znakiem marki.
   ========================================================================== */
html,
body {
    overflow-x: clip;
}

/* Hero: panel na tintowanym papierze (zamiast szablonowego jpg z gradientem),
   jedna miękka poświata fioletu w rogu; kafelki liczb czyste, z linią */
.hero-1 .hero-style1 {
    background:
        radial-gradient(58% 64% at 0% 0%, var(--xtn-glow-violet), transparent 70%),
        var(--xtn-paper-3);
}
.hero-title {
    letter-spacing: -0.02em;
}
.hero-1 .hero-card {
    background: var(--xtn-paper-2);
    border: 1px solid var(--xtn-rule);
}
.hero-1 .hero-video {
    border-radius: var(--xtn-radius-card);
    overflow: hidden;
}

/* Tytuły sekcji: ciaśniejszy tracking na dużych stopniach */
.sec-title {
    letter-spacing: -0.015em;
}

/* --- Karty „zalewane" kolorem: Technologia (.service-card) + Opinie (.testi-card)
   Spoczynek: cichy papier z linią. Najechanie myszką (desktop) albo — na
   dotyku — środek ekranu / tapnięcie (usługi) i aktywny slajd (opinie):
   kolor marki rozlewa się kołem od ikony na całą kartę (animowany WYŁĄCZNIE
   transform pseudo-elementu), a tusz przechodzi na kolor czytelny na danym
   tle. Stan „zapalony" ustawia tylko zmienne (--flood, --ink…); właściwe
   deklaracje konsumują je w jednym miejscu. Biel na błękicie/limonce nie ma
   kontrastu, więc te dwa kolory dostają ciemny tusz; fiolet — biały, ale
   w ciemniejszym wariancie (--xtn-violet-ink, 5.4:1). */
.service-card,
.testi-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    --card-accent: var(--xtn-violet-ink);
    --card-ink: var(--xtn-paper);
    --card-ink-soft: var(--xtn-on-accent-soft);
    --card-tile: var(--xtn-tile-on-dark);
    --card-icon-filter: brightness(0) invert(1);
    --tile-rest: var(--xtn-paper-3);
    --flood-x: 80px;
    --flood-y: 80px;
}
.testi-card {
    --flood-x: calc(100% - 64px);
    --flood-y: 64px;
}
/* rozkład kolorów usług: 1 fiolet · 2 błękit · 3 limonka / 4 błękit · 5 limonka · 6 fiolet
   (drugi rząd przesunięty, żeby kolumna nie powtarzała koloru) */
#features-sec [class*="col-"]:nth-child(2) .service-card,
#features-sec [class*="col-"]:nth-child(4) .service-card,
#testiSlide1 .swiper-slide:nth-child(3n+2) .testi-card {
    --card-accent: var(--xtn-blue);
    --card-ink: var(--xtn-dark);
    --card-ink-soft: var(--xtn-on-light-soft);
    --card-tile: var(--xtn-tile-on-light);
    --card-icon-filter: none;
    --tile-rest: var(--xtn-tint-blue);
}
#features-sec [class*="col-"]:nth-child(3) .service-card,
#features-sec [class*="col-"]:nth-child(5) .service-card,
#testiSlide1 .swiper-slide:nth-child(3n+3) .testi-card {
    --card-accent: var(--xtn-lime);
    --card-ink: var(--xtn-dark);
    --card-ink-soft: var(--xtn-on-light-soft);
    --card-tile: var(--xtn-tile-on-light);
    --card-icon-filter: none;
    --tile-rest: var(--xtn-tint-green);
}
.service-card::before,
.testi-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: var(--flood-x);
    top: var(--flood-y);
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    border-radius: 50%;
    background: var(--card-accent);
    transform: scale(var(--flood, 0));
    transition: transform 620ms var(--xtn-ease-out);
    pointer-events: none;
}
/* stan zapalony — trzy wejścia, ten sam zestaw zmiennych */
@media (hover: hover) {
    .service-card:hover,
    .testi-card:hover {
        --flood: 10;
        --ink: var(--card-ink);
        --ink-soft: var(--card-ink-soft);
        --tile: var(--card-tile);
        --icon-filter: var(--card-icon-filter);
    }
    .service-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--xtn-shadow);
    }
}
.service-card.is-lit,
.testi-card.is-lit {
    --flood: 10;
    --ink: var(--card-ink);
    --ink-soft: var(--card-ink-soft);
    --tile: var(--card-tile);
    --icon-filter: var(--card-icon-filter);
}
@media (hover: none) {
    /* telefon: kolorowa jest zawsze opinia aktualnie oglądana — kolor
       „przechodzi" z karty na kartę razem z przesunięciem palcem */
    #testiSlide1 .swiper-slide-active .testi-card {
        --flood: 10;
        --ink: var(--card-ink);
        --ink-soft: var(--card-ink-soft);
        --tile: var(--card-tile);
        --icon-filter: var(--card-icon-filter);
    }
}
/* konsumpcja zmiennych — usługi */
.service-card {
    border-color: var(--xtn-rule);
    border-radius: var(--xtn-radius-card);
    transition: transform var(--xtn-dur-short) var(--xtn-ease-out), box-shadow var(--xtn-dur-short) var(--xtn-ease-out);
}
.service-card .box-title,
.service-card .box-title a,
.service-card .box-title a:hover {
    color: var(--ink, var(--title-color));
    transition: color 320ms var(--xtn-ease-out);
}
.service-card .box-text {
    color: var(--ink-soft, var(--body-color));
    transition: color 320ms var(--xtn-ease-out);
}
.service-card .box-icon {
    background: var(--tile, var(--tile-rest));
    border-radius: 16px;
    transition: background-color 320ms var(--xtn-ease-out);
}
.service-card .box-icon:before {
    display: none; /* szablonowy limonkowy „swipe" pod ikoną — zastąpiony zalaniem karty */
}
.service-card .box-icon img {
    filter: var(--icon-filter, none);
    transition: transform 420ms var(--xtn-ease-out), filter 320ms var(--xtn-ease-out);
}
.service-card:hover .box-icon img,
.service-card.is-lit .box-icon img {
    transform: translateY(-2px) rotate(-8deg) scale(1.08);
}
/* konsumpcja zmiennych — opinie (gwiazdki szablonu były pomarańczowe #FF9B37:
   kolor spoza palety — teraz fiolet, a na zalanej karcie kolor tuszu) */
.testi-card {
    transition: border-color var(--xtn-dur-short) var(--xtn-ease-out);
}
.testi-card .box-text,
.testi-card .box-title {
    color: var(--ink, var(--title-color));
    transition: color 320ms var(--xtn-ease-out);
}
.testi-card .box-desig {
    color: var(--ink-soft, var(--body-color));
    transition: color 320ms var(--xtn-ease-out);
}
.testi-card .rating {
    color: var(--ink, var(--xtn-violet));
    transition: color 320ms var(--xtn-ease-out);
}
.testi-card .box-quote img {
    filter: var(--icon-filter, none);
    transition: filter 320ms var(--xtn-ease-out);
}
.testi-card .box-more,
.testi-card .box-more:hover {
    color: var(--ink, var(--xtn-blue-ink));
}
@media (prefers-reduced-motion: reduce) {
    .service-card::before,
    .testi-card::before {
        transition: none;
    }
    .service-card:hover .box-icon img,
    .service-card.is-lit .box-icon img {
        transform: none;
    }
}

/* Szablonowy „kursor-kółko" (.mouseCursor, mix-blend-mode:difference) na kartach
   zalanych kolorem robił się brudno-pomarańczowy (różnica bieli i błękitu) —
   kolor spoza palety + zbędny bajer. Wyłączony na całej stronie. */
.mouseCursor {
    display: none !important;
}

/* Stack: cztery kafle nie mogą siedzieć na dolnej krawędzi ciemnego okna */
#tech-sec {
    padding-bottom: clamp(64px, 8vw, 110px);
}

/* --- O nas / Dlaczego XTN (v2.1): uporządkowane moduły -------------------
   O nas = kim jesteśmy: wideo (kostki łączone tłokiem) + lead + trzy filary
   z małym kwadratem-akcentem + pigułki „co budujemy" + przycisk.
   Dlaczego XTN = korzyści dla klienta: sześć równych kafli z ptaszkiem
   w kolorze trio + wideo (fale) + ciemny pasek CTA, w którym przycisk
   „Umów konsultację" ma wreszcie swoje stałe miejsce. */
.xtn-media {
    border-radius: var(--xtn-radius-card);
    overflow: hidden;
    background: var(--xtn-paper-3);
}
.xtn-media img,
.xtn-media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.xtn-media-wide {
    aspect-ratio: 5 / 4;
}
.xtn-media-tall {
    aspect-ratio: 4 / 5;
    max-width: 520px;
    margin-inline: auto;
}
@media (min-width: 992px) {
    .xtn-media-tall {
        margin-right: 0;
    }
}
.xtn-lead {
    font-size: 18px;
    line-height: 1.7;
    max-width: 60ch;
    margin-bottom: 28px;
}
.xtn-pillars {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    border-top: 1px solid var(--xtn-rule);
}
.xtn-pillars li {
    position: relative;
    padding: 22px 0 22px 30px;
    border-bottom: 1px solid var(--xtn-rule);
}
.xtn-pillars li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 30px;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--xtn-violet);
}
.xtn-pillars li:nth-child(2)::before { background: var(--xtn-blue); }
.xtn-pillars li:nth-child(3)::before { background: var(--xtn-green); }
.xtn-pillar-title {
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    margin: 0 0 6px;
}
.xtn-pillars p {
    margin: 0;
    max-width: 58ch;
}
.xtn-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
}
.xtn-tags li {
    padding: 8px 16px;
    border-radius: var(--xtn-radius-pill);
    background: var(--xtn-paper-2);
    border: 1px solid var(--xtn-rule);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--title-color);
}
.xtn-atuty {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.xtn-atuty li {
    background: var(--xtn-paper-2);
    border: 1px solid var(--xtn-rule);
    border-radius: var(--xtn-radius-card);
    padding: 26px 26px 24px;
    --atut: var(--xtn-violet);
}
.xtn-atuty li:nth-child(3n+2) { --atut: var(--xtn-blue-ink); }
.xtn-atuty li:nth-child(3n+3) { --atut: var(--xtn-green-ink); }
.xtn-atuty h3 {
    position: relative;
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 600;
    font-size: 19px;
    line-height: 1.35;
    margin: 0 0 8px;
    padding-left: 38px;
    min-height: 26px;
}
.xtn-atuty h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    background-color: var(--atut);
    -webkit-mask: var(--xtn-check-mask) center / contain no-repeat;
    mask: var(--xtn-check-mask) center / contain no-repeat;
}
.xtn-atuty p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
}
@media (max-width: 575px) {
    .xtn-atuty {
        grid-template-columns: minmax(0, 1fr);
    }
}
.xtn-cta-bar {
    margin-top: clamp(32px, 4vw, 56px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 32px;
    padding: 28px 36px;
    border-radius: var(--xtn-radius-card);
    background: var(--xtn-dark);
}
.xtn-cta-bar-text {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    color: var(--xtn-ink-dark);
}
.xtn-cta-bar-text strong {
    color: var(--xtn-paper);
    font-weight: 600;
}
@media (max-width: 575px) {
    .xtn-cta-bar {
        padding: 24px 22px;
    }
}

/* Wdrożenia, opinie, blog: ten sam cichy papier + linia */
.project-card,
.testi-card {
    background: var(--xtn-paper-2);
    border: 1px solid var(--xtn-rule);
    border-radius: var(--xtn-radius-card);
}
#blog-sec.bg-smoke2 {
    background-color: var(--xtn-paper-2) !important;
}
.blog-card {
    border-color: var(--xtn-rule);
    border-radius: var(--xtn-radius-card);
}

/* Stack: karty na tym samym ciemnym „papierze 2" co karty procesu */
.integration-card {
    background: var(--xtn-dark-2);
    border-color: var(--xtn-rule-dark);
}

/* Kontakt: ciemna karta bez zdjęcia, dwie poświaty (błękit / fiolet) */
.cta-area2 {
    background:
        radial-gradient(52% 66% at 100% 0%, var(--xtn-glow-blue), transparent 70%),
        radial-gradient(46% 60% at 0% 100%, var(--xtn-glow-violet), transparent 70%),
        var(--xtn-dark);
}
.cta-area2:before {
    display: none;
}

/* Fokus z klawiatury: zawsze widoczny, natychmiast, jeden kolor */
a:focus-visible,
button:focus-visible,
.sub-title:focus-visible,
.xtn-chip:focus-visible {
    outline: 3px solid var(--xtn-blue);
    outline-offset: 3px;
}

/* Dotyk: bez opóźnienia podwójnego tapnięcia na elementach klikalnych */
a,
button,
.sub-title,
.xtn-chip {
    touch-action: manipulation;
}

/* Nagłówki: równe łamanie wierszy (bez sierot w ostatniej linii) */
.sec-title,
.hero-title,
.footer-layout1 .footer-top .box-title {
    text-wrap: balance;
}

/* Ograniczony ruch: karty bez liftu, przejścia natychmiastowe
   (wideo dekoracyjne i efekt skupienia procesu wyłącza xtn.js) */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    .price-box,
    .service-card:hover,
    .price-box:hover {
        transition: none;
        transform: none;
    }
}

/* ==========================================================================
   Wdrożenia (2026-09-18) — hub /wdrozenia/ i strony wdrożeń (case study).
   Stały format strony: hero (kategoria, tytuł, lead, metryczka + okładka)
   -> trzy fakty -> wyzwanie -> jak to działa (animowana oś kroków) -> widoki
   (poglądowe z danymi przykładowymi albo prawdziwy zrzut) -> technologie ->
   efekty -> następne wdrożenie + pasek CTA. Strony generuje
   build-wdrozenia.py (chrome bierze z blog/index.html). Zasada treści:
   tylko prawdziwe fakty; gdzie pomiaru jeszcze nie ma — mówimy to wprost.
   ========================================================================== */
.xtn-case-hero {
    padding: clamp(40px, 6vw, 88px) 0 clamp(28px, 4vw, 52px);
}
.xtn-btn-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
.xtn-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    font-size: 14px;
    color: var(--xtn-ink-muted);
}
.xtn-crumbs a {
    color: var(--xtn-ink-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.xtn-crumbs a:hover {
    color: var(--xtn-violet-ink);
}
.xtn-case-cat {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: var(--xtn-radius-pill);
    background: var(--xtn-paper-3);
    color: var(--xtn-violet-ink);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.xtn-case-title {
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 400;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 18px 0;
    text-wrap: balance;
}
.xtn-case-lead {
    font-size: 19px;
    line-height: 1.65;
    max-width: 56ch;
    margin-bottom: 28px;
}
.xtn-case-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 28px;
    margin: 0;
    padding-top: 22px;
    border-top: 1px solid var(--xtn-rule);
}
.xtn-case-meta dt {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--xtn-ink-muted);
    margin-bottom: 2px;
}
.xtn-case-meta dd {
    margin: 0;
    font-weight: 500;
    color: var(--title-color);
}
.xtn-case-cover {
    border-radius: var(--xtn-radius-card);
    overflow: hidden;
    background: var(--xtn-paper-3);
}
.xtn-case-cover img {
    display: block;
    width: 100%;
    height: auto;
}
.xtn-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.xtn-facts li {
    background: var(--xtn-paper-2);
    border: 1px solid var(--xtn-rule);
    border-radius: var(--xtn-radius-card);
    padding: 28px;
    --fact: var(--xtn-violet);
}
.xtn-facts li:nth-child(2) { --fact: var(--xtn-blue-ink); }
.xtn-facts li:nth-child(3) { --fact: var(--xtn-green-ink); }
.xtn-fact-value {
    display: block;
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 600;
    font-size: clamp(32px, 3.4vw, 46px);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--fact);
    margin-bottom: 12px;
}
.xtn-fact-label {
    display: block;
    font-size: 15.5px;
    line-height: 1.5;
}
.xtn-case-sec {
    padding: clamp(36px, 5vw, 68px) 0;
}
.xtn-case-h2 {
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 400;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0 0 24px;
    text-wrap: balance;
}
.xtn-case-prose {
    max-width: 70ch;
}
.xtn-case-prose p {
    font-size: 17.5px;
    line-height: 1.75;
    margin-bottom: 16px;
}
.xtn-case-prose p:last-child {
    margin-bottom: 0;
}

/* oś kroków — linia rysuje się w dół, kroki wchodzą po kolei (tylko
   transform/opacity; stan ukryty nakłada dopiero JS, więc bez JS wszystko widać) */
.xtn-flow {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    counter-reset: krok;
    max-width: 860px;
}
.xtn-flow::before,
.xtn-flow::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 10px;
    bottom: 34px;
    width: 2px;
    background: var(--xtn-rule);
}
.xtn-flow::after {
    background: var(--xtn-violet);
    transform-origin: top;
}
.xtn-flow li {
    position: relative;
    padding: 0 0 28px 64px;
    counter-increment: krok;
}
.xtn-flow li:last-child {
    padding-bottom: 0;
}
.xtn-flow li::before {
    content: counter(krok, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 600;
    font-size: 14px;
    background: var(--xtn-violet-ink);
    color: var(--xtn-paper);
}
.xtn-flow li:nth-child(3n+2)::before { background: var(--xtn-blue); color: var(--xtn-dark); }
.xtn-flow li:nth-child(3n+3)::before { background: var(--xtn-lime); color: var(--xtn-dark); }
.xtn-flow h3 {
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 600;
    font-size: 19px;
    line-height: 1.35;
    margin: 0 0 6px;
    padding-top: 7px;
}
.xtn-flow p {
    margin: 0;
    max-width: 62ch;
}
.xtn-flow.xtn-reveal-ready::after {
    transform: scaleY(0);
    transition: transform 1600ms var(--xtn-ease-out);
}
.xtn-flow.xtn-reveal-ready li {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--xtn-dur-long) var(--xtn-ease-out), transform var(--xtn-dur-long) var(--xtn-ease-out);
    transition-delay: calc(var(--i, 0) * 140ms + 80ms);
}
.xtn-flow.xtn-reveal-ready.is-in::after {
    transform: none;
}
.xtn-flow.xtn-reveal-ready.is-in li {
    opacity: 1;
    transform: none;
}

/* widoki: rama + podpis; w środku zrzut albo makieta z danymi przykładowymi */
.xtn-views {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.xtn-views > .xtn-view-full {
    grid-column: 1 / -1;
}
.xtn-view {
    margin: 0;
    background: var(--xtn-paper-2);
    border: 1px solid var(--xtn-rule);
    border-radius: var(--xtn-radius-card);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.xtn-view figcaption {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--xtn-ink-muted);
}
.xtn-view figcaption strong {
    color: var(--title-color);
    font-weight: 600;
}
.xtn-view-screen {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--xtn-rule);
    background: var(--xtn-paper);
}
.xtn-view-screen img {
    display: block;
    width: 100%;
    height: auto;
}
.xtn-ui {
    background: var(--xtn-paper);
    border: 1px solid var(--xtn-rule);
    border-radius: 16px;
    padding: 20px;
    font-size: 14.5px;
    flex: 1;
    min-width: 0;
}
.xtn-ui-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.xtn-ui-title {
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--title-color);
    margin: 0;
}
.xtn-ui-badge {
    display: inline-flex;
    padding: 5px 12px;
    border-radius: var(--xtn-radius-pill);
    background: var(--xtn-tint-green);
    color: var(--xtn-green-deep);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}
.xtn-ui-badge.is-blue {
    background: var(--xtn-tint-blue);
    color: var(--xtn-blue-deep);
}
.xtn-ui-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
}
.xtn-ui-rows {
    margin: 0;
}
.xtn-ui-rows div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--xtn-rule);
}
.xtn-ui-rows div:last-child {
    border-bottom: 0;
}
.xtn-ui-rows dt {
    font-weight: 400;
    color: var(--xtn-ink-muted);
}
.xtn-ui-rows dd {
    margin: 0;
    font-weight: 600;
    color: var(--title-color);
    text-align: right;
}
.xtn-ring {
    position: relative;
    width: 132px;
    height: 132px;
    flex: none;
}
.xtn-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.xtn-ring circle {
    fill: none;
    stroke-width: 10;
}
.xtn-ring .xtn-ring-track {
    stroke: var(--xtn-paper-3);
}
.xtn-ring .xtn-ring-val {
    stroke: var(--xtn-violet);
    stroke-linecap: round;
    stroke-dasharray: 326.7;
    stroke-dashoffset: calc(326.7 * (1 - var(--v, 0.8)));
}
.xtn-reveal-ready .xtn-ring .xtn-ring-val {
    stroke-dashoffset: 326.7;
    transition: stroke-dashoffset 1400ms var(--xtn-ease-out) 200ms;
}
.xtn-reveal-ready.is-in .xtn-ring .xtn-ring-val {
    stroke-dashoffset: calc(326.7 * (1 - var(--v, 0.8)));
}
.xtn-ring-num {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 600;
    font-size: 30px;
    line-height: 1;
    color: var(--title-color);
    font-variant-numeric: tabular-nums;
}
.xtn-ring-num small {
    display: block;
    margin-top: 4px;
    font-family: var(--body-font);
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--xtn-ink-muted);
}
.xtn-sheet-wrap {
    overflow-x: auto;
}
.xtn-sheet {
    width: 100%;
    min-width: 440px;
    border-collapse: collapse;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}
.xtn-sheet th,
.xtn-sheet td {
    padding: 9px 10px;
    border: 1px solid var(--xtn-rule);
    text-align: right;
    white-space: nowrap;
}
.xtn-sheet th {
    background: var(--xtn-paper-3);
    color: var(--title-color);
    font-weight: 600;
    text-align: left;
}
.xtn-sheet td:first-child {
    text-align: left;
    color: var(--title-color);
    font-weight: 500;
}
.xtn-sheet .is-formula {
    color: var(--xtn-blue-ink);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 12.5px;
}
.xtn-sheet .is-total td {
    background: var(--xtn-tint-green);
    font-weight: 600;
    color: var(--title-color);
}
.xtn-checks {
    list-style: none;
    margin: 0;
    padding: 0;
}
.xtn-checks li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--xtn-rule);
}
.xtn-checks li:last-child {
    border-bottom: 0;
}
.xtn-checks span:last-child {
    font-weight: 600;
    font-size: 12.5px;
    padding: 3px 10px;
    border-radius: var(--xtn-radius-pill);
    background: var(--xtn-tint-green);
    color: var(--xtn-green-deep);
    white-space: nowrap;
}
.xtn-checks .is-todo span:last-child {
    background: var(--xtn-paper-3);
    color: var(--xtn-violet-ink);
}
.xtn-layers {
    display: grid;
    gap: 12px;
}
.xtn-layer {
    border: 1px solid var(--xtn-rule);
    border-radius: 16px;
    background: var(--xtn-paper);
    padding: 16px 18px;
}
.xtn-layer h3 {
    font-family: var(--body-font);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--xtn-ink-muted);
    margin: 0 0 10px;
}
.xtn-layer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.xtn-layer li {
    padding: 6px 12px;
    border-radius: var(--xtn-radius-pill);
    font-size: 13.5px;
    font-weight: 600;
    background: var(--xtn-paper-3);
    color: var(--xtn-violet-ink);
}
.xtn-layer:nth-child(3) li { background: var(--xtn-tint-blue); color: var(--xtn-blue-deep); }
.xtn-layer:nth-child(5) li { background: var(--xtn-tint-green); color: var(--xtn-green-deep); }
.xtn-layer li.is-planned {
    background: transparent;
    border: 1px dashed var(--xtn-rule);
    color: var(--xtn-ink-muted);
    font-weight: 500;
}
.xtn-layer-arrow {
    text-align: center;
    font-size: 13px;
    color: var(--xtn-ink-muted);
    line-height: 1;
}
.xtn-stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}
.xtn-stack-group {
    border: 1px solid var(--xtn-rule);
    border-radius: var(--xtn-radius-card);
    background: var(--xtn-paper);
    padding: 22px;
}
.xtn-stack-group h3 {
    font-family: var(--body-font);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--xtn-ink-muted);
    margin: 0 0 12px;
}
.xtn-stack-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.xtn-stack-group li {
    padding: 7px 14px;
    border-radius: var(--xtn-radius-pill);
    background: var(--xtn-paper-2);
    border: 1px solid var(--xtn-rule);
    font-size: 14px;
    font-weight: 500;
    color: var(--title-color);
}
.xtn-note {
    position: relative;
    margin: 24px 0 0;
    padding-left: 26px;
    max-width: 70ch;
    font-size: 15px;
    line-height: 1.6;
    color: var(--xtn-ink-muted);
}
.xtn-note::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--xtn-blue);
}
.xtn-case-next {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 30px;
    border: 1px solid var(--xtn-rule);
    border-radius: var(--xtn-radius-card);
    background: var(--xtn-paper-2);
    color: var(--title-color);
    transition: border-color var(--xtn-dur-short) var(--xtn-ease-out), transform var(--xtn-dur-short) var(--xtn-ease-out);
}
.xtn-case-next:hover {
    border-color: var(--xtn-violet-40);
    transform: translateY(-2px);
    color: var(--title-color);
}
.xtn-case-next small {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--xtn-ink-muted);
    margin-bottom: 4px;
}
.xtn-case-next strong {
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 600;
    font-size: clamp(19px, 2vw, 24px);
}
.xtn-case-next img {
    width: 22px;
    height: 22px;
    flex: none;
}
/* hub: karty wdrożeń */
.xtn-case-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.xtn-case-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--xtn-rule);
    border-radius: var(--xtn-radius-card);
    background: var(--xtn-paper-2);
    overflow: hidden;
    color: var(--body-color);
    transition: border-color var(--xtn-dur-short) var(--xtn-ease-out), transform var(--xtn-dur-short) var(--xtn-ease-out), box-shadow var(--xtn-dur-short) var(--xtn-ease-out);
}
.xtn-case-card:hover {
    border-color: var(--xtn-violet-40);
    transform: translateY(-3px);
    box-shadow: var(--xtn-shadow);
    color: var(--body-color);
}
.xtn-case-card img {
    display: block;
    width: 100%;
    height: auto;
}
.xtn-case-card-body {
    padding: 28px 30px 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.xtn-case-card-cat {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--xtn-blue-deep);
}
.xtn-case-card h2 {
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 600;
    font-size: clamp(22px, 2.2vw, 28px);
    line-height: 1.2;
    margin: 0;
}
.xtn-case-card p {
    margin: 0;
}
.xtn-case-card ul {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.xtn-case-card li {
    padding: 5px 12px;
    border-radius: var(--xtn-radius-pill);
    background: var(--xtn-paper);
    border: 1px solid var(--xtn-rule);
    font-size: 13px;
    font-weight: 500;
    color: var(--title-color);
}
.xtn-case-card-more {
    margin-top: auto;
    padding-top: 10px;
    font-weight: 600;
    color: var(--xtn-violet-ink);
}
@media (max-width: 991px) {
    .xtn-views,
    .xtn-case-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 767px) {
    .xtn-facts {
        grid-template-columns: minmax(0, 1fr);
    }
    .xtn-case-meta {
        grid-template-columns: minmax(0, 1fr);
    }
    .xtn-ui-split {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }
    .xtn-ui-split .xtn-ui-rows {
        width: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .xtn-flow.xtn-reveal-ready::after,
    .xtn-flow.xtn-reveal-ready li {
        transition: none;
        transform: none;
        opacity: 1;
    }
    .xtn-reveal-ready .xtn-ring .xtn-ring-val {
        transition: none;
        stroke-dashoffset: calc(326.7 * (1 - var(--v, 0.8)));
    }
    .xtn-case-next:hover,
    .xtn-case-card:hover {
        transform: none;
    }
}

/* ==========================================================================
   v2.2 (2026-09-18, druga tura uwag Marcina)
   - O nas: bento z różnymi kaflami, które wjeżdżają z zanikaniem, + własna
     animacja SVG „rdzeń AI" (zastąpiła toporne, interpolowane wideo kostek);
   - Dlaczego XTN: równa siatka 1/3 · 1/3 · 1/3 (kafle — wideo — kafle),
     ten sam odstęp wszędzie; duży pasek „0 zł";
   - Pakiety: przebudowane, równe wysokości i wyrównane wiersze (subgrid),
     własne ikony zamiast gwiazdki, zalewanie kolorem jak w Technologii;
   - Opinie: wyraźny odstęp; stopka: bez przycisku i bez danych firmy
     (dane przeniesione do sekcji Kontakt, #dane-firmy).
   ========================================================================== */

/* --- wejście kafli w kadr (klasy nakłada i po animacji ZDEJMUJE xtn.js,
   żeby długie przejście wejścia nie spowalniało późniejszych hoverów) --- */
.xtn-bento.xtn-reveal-ready > *,
.xtn-why.xtn-reveal-ready > *,
.xtn-plans.xtn-reveal-ready > *,
.xtn-cta-big.xtn-reveal-ready {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 640ms var(--xtn-ease-out), transform 760ms var(--xtn-ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
}
.xtn-bento.xtn-reveal-ready > .xtn-tile-statement,
.xtn-why.xtn-reveal-ready > .xtn-atut:nth-of-type(-n+3) {
    transform: translateX(-32px);
}
.xtn-bento.xtn-reveal-ready > .xtn-tile-anim,
.xtn-why.xtn-reveal-ready > .xtn-atut:nth-of-type(n+4) {
    transform: translateX(32px);
}
.xtn-why.xtn-reveal-ready > .xtn-why-media {
    transform: scale(0.94);
}
.xtn-bento.xtn-reveal-ready.is-in > *,
.xtn-why.xtn-reveal-ready.is-in > *,
.xtn-plans.xtn-reveal-ready.is-in > *,
.xtn-cta-big.xtn-reveal-ready.is-in {
    opacity: 1;
    transform: none;
}

/* --- O nas: bento --------------------------------------------------------- */
.xtn-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}
.xtn-tile {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 30px;
    border: 1px solid var(--xtn-rule);
    border-radius: var(--xtn-radius-card);
    background: var(--xtn-paper);
    overflow: hidden;
    transition: transform var(--xtn-dur-short) var(--xtn-ease-out), border-color var(--xtn-dur-short) var(--xtn-ease-out), box-shadow var(--xtn-dur-short) var(--xtn-ease-out);
}
.xtn-tile-statement {
    grid-column: 1 / span 7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(28px, 3.4vw, 48px);
    border-color: transparent;
    background:
        radial-gradient(60% 80% at 0% 0%, var(--xtn-glow-violet), transparent 70%),
        var(--xtn-paper-3);
}
.xtn-statement {
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 400;
    font-size: clamp(24px, 2.5vw, 38px);
    line-height: 1.22;
    letter-spacing: -0.015em;
    color: var(--title-color);
    margin: 0 0 18px;
    text-wrap: balance;
}
.xtn-tile-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    max-width: 60ch;
}
.xtn-tile-anim {
    grid-column: 8 / span 5;
    grid-row: 1 / span 2;
    display: flex;
    min-height: 520px;
    padding: 0;
    border-color: transparent;
    background:
        radial-gradient(70% 50% at 50% 0%, var(--xtn-glow-violet), transparent 70%),
        var(--xtn-dark);
}
.xtn-tile-anim {
    flex-direction: column;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--xtn-dark);
}
.xtn-tile-anim .xtn-sys-main {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}
.xtn-bento > :nth-child(3) { grid-column: 1 / span 4; }
.xtn-bento > :nth-child(4) { grid-column: 5 / span 3; }
.xtn-bento > :nth-child(5) { grid-column: 1 / span 5; }
.xtn-bento > :nth-child(6) { grid-column: 6 / span 7; }
.xtn-tile-pillar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    --tile-accent: var(--xtn-violet-ink);
    --tile-tint: var(--xtn-paper-3);
    --tile-on: var(--xtn-paper);
}
.xtn-tile-pillar.is-blue {
    --tile-accent: var(--xtn-blue);
    --tile-tint: var(--xtn-tint-blue);
    --tile-on: var(--xtn-dark);
}
.xtn-tile-pillar.is-green {
    --tile-accent: var(--xtn-lime);
    --tile-tint: var(--xtn-tint-green);
    --tile-on: var(--xtn-dark);
}
.xtn-tile-icon {
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--tile-tint);
    color: var(--title-color);
    transition: background-color 320ms var(--xtn-ease-out), color 320ms var(--xtn-ease-out), transform 420ms var(--xtn-ease-out);
}
.xtn-tile-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
@media (hover: hover) {
    .xtn-tile-pillar:hover {
        transform: translateY(-3px);
        border-color: var(--xtn-violet-40);
        box-shadow: var(--xtn-shadow);
    }
    .xtn-tile-pillar:hover .xtn-tile-icon {
        background: var(--tile-accent);
        color: var(--tile-on);
        transform: rotate(-8deg) scale(1.06);
    }
}
.xtn-tile-title {
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    margin: 4px 0 0;
}
.xtn-tile-links,
.xtn-mini-steps {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: auto 0 0;
    padding: 8px 0 0;
}
.xtn-tile-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--xtn-radius-pill);
    background: var(--xtn-paper-2);
    border: 1px solid var(--xtn-rule);
    font-size: 14px;
    font-weight: 600;
    color: var(--title-color);
    white-space: nowrap;
    transition: background-color var(--xtn-dur-short) var(--xtn-ease-out), color var(--xtn-dur-short) var(--xtn-ease-out), border-color var(--xtn-dur-short) var(--xtn-ease-out);
}
.xtn-tile-links a::after {
    content: "\2192";
}
.xtn-tile-links a:hover {
    background: var(--xtn-violet-ink);
    border-color: var(--xtn-violet-ink);
    color: var(--xtn-paper);
}
.xtn-mini-steps {
    counter-reset: ministep;
}
.xtn-mini-steps li {
    counter-increment: ministep;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 7px;
    border-radius: var(--xtn-radius-pill);
    background: var(--xtn-tint-green);
    color: var(--xtn-green-deep);
    font-size: 14px;
    font-weight: 600;
}
.xtn-mini-steps li::before {
    content: counter(ministep);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--xtn-lime);
    color: var(--xtn-dark);
    font-size: 12px;
}
.xtn-tile-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    background: var(--xtn-paper-2);
}
.xtn-tile-label {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--xtn-ink-muted);
}
@media (max-width: 991px) {
    .xtn-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .xtn-bento > .xtn-tile-statement,
    .xtn-bento > .xtn-tile-anim,
    .xtn-bento > :nth-child(5),
    .xtn-bento > :nth-child(6) {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    .xtn-bento > :nth-child(3),
    .xtn-bento > :nth-child(4) {
        grid-column: auto;
    }
    .xtn-tile-anim {
        min-height: 0;
        height: min(560px, 118vw);
    }
}
@media (max-width: 575px) {
    .xtn-bento {
        grid-template-columns: minmax(0, 1fr);
    }
    .xtn-tile {
        padding: 24px;
    }
    .xtn-tile-anim {
        padding: 0;
    }
}

/* --- animacja „rdzeń AI" v2 (generuje build-rdzen-ai.py). Warstwy od tyłu:
   siatka kropek i poświata rdzenia (pseudo-elementy) → trzy warstwy
   pierścieni jako osobne elementy HTML, obracane WYŁĄCZNIE `transform`
   (karta graficzna, bez przerysowywania) → główny SVG: przewody, smugi,
   impulsy, rdzeń, moduły na jednej osi czasu SMIL. Gradient trio występuje
   tu tylko jako KRESKA (ramki neonowe, łuki, smugi) — nigdy jako tło.
   Poza kadrem i przy ograniczonym ruchu xtn.js wstrzymuje całość. --- */
.xtn-sys::before,
.xtn-sys::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
}
.xtn-sys::before {
    inset: 0;
    background: radial-gradient(circle, var(--xtn-rule-dark) 1.2px, transparent 1.7px) 0 0 / 26px 26px;
    -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 38%, transparent 100%);
    mask-image: radial-gradient(closest-side at 50% 50%, #000 38%, transparent 100%);
}
.xtn-sys::after {
    left: 50%;
    top: 50%;
    width: 86%;
    aspect-ratio: 1;
    margin: -43% 0 0 -43%;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--xtn-glow-violet), transparent 100%);
    animation: xtnSysGlow 3.6s ease-in-out infinite alternate;
}
.xtn-sys-rings {
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    width: var(--rings-w, 100%);
    aspect-ratio: 1;
    margin-left: calc(var(--rings-w, 100%) / -2);
    margin-top: calc(var(--rings-w, 100%) / -2);
    pointer-events: none;
}
.xtn-sys-rings svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform-origin: 50% 50%;
    animation: xtnSysSpin 120s linear infinite;
}
.xtn-sys-rings.is-mid svg {
    animation-duration: 74s;
    animation-direction: reverse;
}
.xtn-sys-rings.is-near svg {
    animation-duration: 38s;
}
.xtn-sys:not(.is-paused) .xtn-sys-rings svg {
    will-change: transform;
}
.xtn-sys-rings .ring {
    fill: none;
    stroke: var(--xtn-paper);
}
.xtn-sys-rings .arc,
.xtn-sys-rings .arc-glow {
    fill: none;
    stroke-linecap: round;
}
.xtn-sys-rings .arc { stroke-width: 2; opacity: 0.95; }
.xtn-sys-rings .arc-glow { stroke-width: 9; opacity: 0.16; }
.xtn-sys-rings.is-far .arc { stroke-width: 1.6; opacity: 0.5; }
.xtn-sys-rings.is-far .arc-glow { opacity: 0.08; }
.xtn-sys .c-violet { --c: var(--xtn-violet); }
.xtn-sys .c-blue { --c: var(--xtn-blue); }
.xtn-sys .c-lime { --c: var(--xtn-lime); }
.xtn-sys-rings .dot { fill: var(--c); }
.xtn-sys-rings .dot-glow { fill: var(--c); opacity: 0.2; }
.xtn-sys .s-violet { stop-color: var(--xtn-violet); }
.xtn-sys .s-blue { stop-color: var(--xtn-blue); }
.xtn-sys .s-lime { stop-color: var(--xtn-lime); }
.xtn-sys .s-white { stop-color: var(--xtn-paper); }
.xtn-sys .s-core-hi { stop-color: var(--xtn-dark-3); }
.xtn-sys .s-core-lo { stop-color: var(--xtn-dark); }

/* przewody: cienka kreska w gradiencie + szeroka, prawie przezroczysta „poświata" */
.xtn-sys-wires use,
.xtn-sys-streak {
    fill: none;
    stroke-linecap: round;
}
.xtn-sys-wires .line { stroke-width: 1.6; opacity: 0.42; }
.xtn-sys-wires .glow { stroke-width: 7; opacity: 0.07; }
.xtn-sys-streak {
    stroke-width: 3.2;
    stroke-dasharray: 16 200;
}
.xtn-sys-port { fill: var(--c, var(--xtn-paper)); }
.xtn-sys-port.is-core { fill: var(--xtn-paper); opacity: 0.7; }
.xtn-sys-ripple {
    fill: none;
    stroke: var(--c);
    stroke-width: 1.6;
}
.xtn-sys-beat {
    fill: none;
    stroke: var(--xtn-violet);
    stroke-width: 1.4;
}

/* wspólne dla rdzenia i modułów: poświata z szerokich kresek (bez filtrów SVG) */
.xtn-sys .bloom {
    fill: none;
    stroke: var(--c, var(--xtn-violet));
}
.xtn-sys .bloom.b1 { stroke-width: 13; opacity: 0.07; }
.xtn-sys .bloom.b2 { stroke-width: 6; opacity: 0.16; }
.xtn-sys .frame {
    fill: none;
    stroke-width: 1.8;
}
.xtn-sys-core {
    transform-box: fill-box;
    transform-origin: center;
    animation: xtnSysBreath 3.6s ease-in-out infinite alternate;
}
.xtn-sys-core .frame { stroke-width: 2.4; }
.xtn-sys-core .flash {
    fill: none;
    stroke: var(--xtn-paper);
    stroke-width: 2.4;
}
.xtn-sys-core .pins path {
    fill: none;
    stroke: var(--xtn-paper);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0.22;
}
.xtn-sys-core .x1,
.xtn-sys-core .x2 {
    fill: none;
    stroke-width: 11;
    stroke-linecap: round;
}
.xtn-sys-core .x1 { stroke: var(--xtn-violet); }
.xtn-sys-core .x2 { stroke: var(--xtn-lime); }

.xtn-sys-mod .glass { fill: var(--xtn-dark-2); fill-opacity: 0.94; }
.xtn-sys-mod .shine {
    fill: none;
    stroke: var(--xtn-paper);
    stroke-width: 1;
    stroke-linecap: round;
    opacity: 0.16;
}
.xtn-sys-mod .lit .bloom.b1 { opacity: 0.2; }
.xtn-sys-mod .lit .bloom.b2 { opacity: 0.42; }
.xtn-sys-mod .lit .fill { fill: var(--c); fill-opacity: 0.2; }
.xtn-sys-mod .lit .edge {
    fill: none;
    stroke: var(--c);
    stroke-width: 2.2;
}
.xtn-sys-mod .ico-bg {
    fill: var(--c);
    fill-opacity: 0.16;
    stroke: var(--c);
    stroke-opacity: 0.55;
    stroke-width: 1.2;
}
.xtn-sys-mod .ico * {
    fill: none;
    stroke: var(--xtn-paper);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.xtn-sys-mod text {
    font-family: var(--body-font);
    font-weight: 600;
    font-size: 18px;
    fill: var(--xtn-paper);
    dominant-baseline: central;
}
.xtn-sys-mod .track { fill: var(--xtn-paper); opacity: 0.1; }
.xtn-sys-mod .prog,
.xtn-sys-mod .led { fill: var(--c); }
.xtn-sys.is-paused * {
    animation-play-state: paused !important;
}
@keyframes xtnSysSpin {
    to { transform: rotate(360deg); }
}
@keyframes xtnSysBreath {
    from { transform: scale(1); }
    to { transform: scale(1.03); }
}
@keyframes xtnSysGlow {
    from { opacity: 0.55; }
    to { opacity: 1; }
}
@media (max-width: 575px) {
    /* telefon: najdalsza warstwa stoi — duża tekstura nie musi się obracać */
    .xtn-sys-rings.is-far svg {
        animation: none;
        will-change: auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    .xtn-sys::after,
    .xtn-sys-rings svg,
    .xtn-sys-core {
        animation: none;
    }
}

/* --- Dlaczego XTN: równa siatka 3 × 3 (kafle | wideo | kafle) ------------- */
.xtn-why {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.xtn-why > .xtn-atut:nth-of-type(1) { grid-area: 1 / 1; }
.xtn-why > .xtn-atut:nth-of-type(2) { grid-area: 2 / 1; }
.xtn-why > .xtn-atut:nth-of-type(3) { grid-area: 3 / 1; }
.xtn-why > .xtn-atut:nth-of-type(4) { grid-area: 1 / 3; }
.xtn-why > .xtn-atut:nth-of-type(5) { grid-area: 2 / 3; }
.xtn-why > .xtn-atut:nth-of-type(6) { grid-area: 3 / 3; }
.xtn-why > .xtn-why-media {
    grid-area: 1 / 2 / 4 / 3;
    aspect-ratio: auto;
    max-width: none;
    margin: 0;
    min-height: 460px;
}
.xtn-atut {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    background: var(--xtn-paper-2);
    border: 1px solid var(--xtn-rule);
    border-radius: var(--xtn-radius-card);
    padding: 26px 26px 24px;
    --atut: var(--xtn-violet);
    transition: transform var(--xtn-dur-short) var(--xtn-ease-out), border-color var(--xtn-dur-short) var(--xtn-ease-out), box-shadow var(--xtn-dur-short) var(--xtn-ease-out), background-color var(--xtn-dur-short) var(--xtn-ease-out);
}
.xtn-atut:nth-of-type(3n+2) { --atut: var(--xtn-blue-ink); }
.xtn-atut:nth-of-type(3n+3) { --atut: var(--xtn-green-ink); }
@media (hover: hover) {
    .xtn-atut:hover {
        transform: translateY(-3px);
        background: var(--xtn-paper);
        border-color: var(--xtn-violet-40);
        box-shadow: var(--xtn-shadow);
    }
}
.xtn-atut h3 {
    position: relative;
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 600;
    font-size: 19px;
    line-height: 1.35;
    margin: 0 0 8px;
    padding-left: 38px;
    min-height: 26px;
}
.xtn-atut h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    background-color: var(--atut);
    -webkit-mask: var(--xtn-check-mask) center / contain no-repeat;
    mask: var(--xtn-check-mask) center / contain no-repeat;
}
.xtn-atut p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
}
@media (max-width: 991px) {
    .xtn-why {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
    }
    .xtn-why > .xtn-atut:nth-of-type(n) {
        grid-area: auto;
    }
    .xtn-why > .xtn-why-media {
        grid-area: auto;
        grid-column: 1 / -1;
        order: -1;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }
}
@media (max-width: 575px) {
    .xtn-why {
        grid-template-columns: minmax(0, 1fr);
    }
    .xtn-why > .xtn-why-media {
        aspect-ratio: 1 / 1;
    }
}

/* duży pasek CTA: wersaliki, 400 + 600 tylko na „0 zł" (zasada akcentu) */
.xtn-cta-big {
    padding: clamp(28px, 3.6vw, 52px) clamp(24px, 3.6vw, 56px);
    background:
        radial-gradient(50% 120% at 100% 0%, var(--xtn-glow-violet), transparent 70%),
        var(--xtn-dark);
}
.xtn-cta-big-copy {
    min-width: 0;
    flex: 1 1 520px;
}
.xtn-cta-big-text {
    margin: 0 0 10px;
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 400;
    font-size: clamp(26px, 3.5vw, 52px);
    line-height: 1.08;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: var(--xtn-paper);
    text-wrap: balance;
}
.xtn-cta-zero {
    font-weight: 600;
    color: var(--xtn-lime);
    white-space: nowrap;
}

/* --- Pakiety v3: cztery karty w jednej siatce; subgrid wyrównuje wiersze
   (nagłówek / cena / lista / przycisk) MIĘDZY kartami, więc wszystkie mają
   tę samą wysokość niezależnie od treści. Ikona usługi zamiast gwiazdki;
   zalewanie kolorem jak w Technologii (polecana karta jest stale ciemna). --- */
.xtn-plans {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.xtn-plan {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    grid-row: span 4;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 22px;
    padding: 28px 26px 26px;
    border: 1px solid var(--xtn-rule);
    border-radius: var(--xtn-radius-card);
    background: var(--xtn-paper-2);
    transition: transform var(--xtn-dur-short) var(--xtn-ease-out), box-shadow var(--xtn-dur-short) var(--xtn-ease-out);
    --card-accent: var(--xtn-violet-ink);
    --card-ink: var(--xtn-paper);
    --card-ink-soft: var(--xtn-on-accent-soft);
    --card-tile: var(--xtn-tile-on-dark);
    --card-icon-filter: brightness(0) invert(1);
    --tile-rest: var(--xtn-paper-3);
    --plan-price: var(--xtn-violet);
    --plan-check: var(--xtn-violet);
}
.xtn-plan:nth-child(2) {
    --card-accent: var(--xtn-blue);
    --card-ink: var(--xtn-dark);
    --card-ink-soft: var(--xtn-on-light-soft);
    --card-tile: var(--xtn-tile-on-light);
    --card-icon-filter: none;
    --tile-rest: var(--xtn-tint-blue);
    --plan-price: var(--xtn-blue-ink);
    --plan-check: var(--xtn-blue-ink);
}
.xtn-plan:nth-child(4) {
    --card-accent: var(--xtn-lime);
    --card-ink: var(--xtn-dark);
    --card-ink-soft: var(--xtn-on-light-soft);
    --card-tile: var(--xtn-tile-on-light);
    --card-icon-filter: none;
    --tile-rest: var(--xtn-tint-green);
    --plan-price: var(--xtn-green-ink);
    --plan-check: var(--xtn-green-ink);
}
.xtn-plan::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 54px;
    top: 56px;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    border-radius: 50%;
    background: var(--card-accent);
    transform: scale(var(--flood, 0));
    transition: transform 680ms var(--xtn-ease-out);
    pointer-events: none;
}
@media (hover: hover) {
    .xtn-plan:not(.is-featured):hover {
        --flood: 12;
        --ink: var(--card-ink);
        --ink-soft: var(--card-ink-soft);
        --tile: var(--card-tile);
        --icon-filter: var(--card-icon-filter);
    }
    .xtn-plan:hover {
        transform: translateY(-4px);
        box-shadow: var(--xtn-shadow);
    }
}
.xtn-plan.is-lit:not(.is-featured) {
    --flood: 12;
    --ink: var(--card-ink);
    --ink-soft: var(--card-ink-soft);
    --tile: var(--card-tile);
    --icon-filter: var(--card-icon-filter);
}
.xtn-plan.is-featured {
    background: var(--xtn-dark);
    border-color: var(--xtn-dark);
    --ink: var(--xtn-paper);
    --ink-soft: var(--xtn-ink-dark);
    --tile: var(--xtn-lime);
    --plan-price: var(--xtn-lime);
    --plan-check: var(--xtn-lime);
}
.xtn-plan.is-featured::before {
    display: none;
}
.xtn-plan-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.xtn-plan-icon {
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--tile, var(--tile-rest));
    transition: background-color 320ms var(--xtn-ease-out);
}
.xtn-plan-icon img {
    width: 26px;
    height: 26px;
    filter: var(--icon-filter, none);
    transition: transform 420ms var(--xtn-ease-out), filter 320ms var(--xtn-ease-out);
}
.xtn-plan:hover .xtn-plan-icon img,
.xtn-plan.is-lit .xtn-plan-icon img {
    transform: translateY(-2px) rotate(-8deg) scale(1.08);
}
.xtn-plan-name {
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 600;
    font-size: clamp(20px, 1.5vw, 24px);
    line-height: 1.2;
    margin: 0 0 4px;
    color: var(--ink, var(--title-color));
    transition: color 320ms var(--xtn-ease-out);
}
.xtn-plan-tag {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--ink-soft, var(--body-color));
    transition: color 320ms var(--xtn-ease-out);
}
.xtn-plan-price {
    margin: 0;
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 600;
    font-size: clamp(30px, 2.5vw, 40px);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--ink, var(--plan-price));
    transition: color 320ms var(--xtn-ease-out);
}
.xtn-plan-od,
.xtn-plan-unit {
    font-family: var(--body-font);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0;
    color: var(--ink-soft, var(--body-color));
    transition: color 320ms var(--xtn-ease-out);
}
.xtn-plan-list {
    list-style: none;
    margin: 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--xtn-rule);
    align-self: start;
}
.xtn-plan.is-featured .xtn-plan-list {
    border-top-color: var(--xtn-rule-dark);
}
.xtn-plan-list li {
    position: relative;
    padding-left: 32px;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--ink-soft, var(--body-color));
    transition: color 320ms var(--xtn-ease-out);
}
.xtn-plan-list li + li {
    margin-top: 12px;
}
.xtn-plan-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 21px;
    height: 21px;
    background-color: var(--ink, var(--plan-check));
    -webkit-mask: var(--xtn-check-mask) center / contain no-repeat;
    mask: var(--xtn-check-mask) center / contain no-repeat;
    transition: background-color 320ms var(--xtn-ease-out);
}
/* przycisk na całą szerokość: tekst do lewej, strzałka na prawym (limonkowym)
   polu — w szablonie przy fw-btn strzałka lądowała na ciemnej części i znikała */
.xtn-plan .th-btn {
    align-self: end;
    justify-content: space-between;
    padding-right: 20px;
}
/* karta limonkowa zalana kolorem: limonkowe pole przycisku zlałoby się z tłem */
.xtn-plan:nth-child(4):hover .th-btn:not(:hover):before,
.xtn-plan:nth-child(4):hover .th-btn:not(:hover):after,
.xtn-plan:nth-child(4).is-lit .th-btn:not(:hover):before,
.xtn-plan:nth-child(4).is-lit .th-btn:not(:hover):after {
    background: var(--xtn-paper);
}
.xtn-duo {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: auto 0 0;
    padding: 8px 0 0;
}
.xtn-duo li {
    padding: 7px 14px;
    border-radius: var(--xtn-radius-pill);
    background: var(--xtn-tint-blue);
    color: var(--xtn-blue-deep);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
@media (max-width: 1199px) {
    .xtn-plans {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 575px) {
    .xtn-plans {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (prefers-reduced-motion: reduce) {
    .xtn-plan::before {
        transition: none;
    }
    .xtn-plan:hover,
    .xtn-atut:hover,
    .xtn-tile-pillar:hover {
        transform: none;
    }
    .xtn-plan:hover .xtn-plan-icon img,
    .xtn-plan.is-lit .xtn-plan-icon img,
    .xtn-tile-pillar:hover .xtn-tile-icon {
        transform: none;
    }
    .xtn-bento.xtn-reveal-ready > *,
    .xtn-why.xtn-reveal-ready > *,
    .xtn-plans.xtn-reveal-ready > *,
    .xtn-cta-big.xtn-reveal-ready {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* --- Opinie: oddech pod sekcją (odstęp MIĘDZY kartami ustawia Swiper:
   20 / 32 / 40 px w data-slider-options) --- */
#testi-sec {
    padding-bottom: clamp(56px, 7vw, 100px);
}

/* --- Kontakt: dane firmy (przeniesione ze stopki; #dane-firmy) ----------- */
.xtn-firma {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 40px;
    margin-top: clamp(36px, 4vw, 56px);
    padding-top: clamp(28px, 3vw, 40px);
    border-top: 1px solid var(--xtn-rule-dark);
    text-align: left;
}
.xtn-firma h3 {
    font-family: var(--body-font);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--xtn-ink-dark-2);
    margin: 0 0 12px;
}
.xtn-firma p,
.xtn-firma dd,
.xtn-firma dt {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--xtn-ink-dark);
    margin: 0;
}
.xtn-firma strong {
    color: var(--xtn-paper);
    font-weight: 600;
}
.xtn-firma-mail {
    display: inline-block;
    margin-bottom: 8px;
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 600;
    font-size: clamp(20px, 1.8vw, 26px);
    color: var(--xtn-paper);
    text-decoration: underline;
    text-decoration-color: var(--xtn-lime);
    text-underline-offset: 6px;
}
.xtn-firma-mail:hover {
    color: var(--xtn-lime);
}
.xtn-firma dl {
    margin: 0 0 8px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 14px;
}
.xtn-firma dt {
    color: var(--xtn-ink-dark-2);
}
.xtn-firma dd {
    color: var(--xtn-paper);
    font-variant-numeric: tabular-nums;
}
.xtn-firma .xtn-firma-small {
    font-size: 13.5px;
    color: var(--xtn-ink-dark-2);
}
@media (max-width: 767px) {
    .xtn-firma {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- Stopka: sam dół — copyright + dwa ciche linki ----------------------- */
.xtn-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    padding-right: 76px; /* miejsce na pływający przycisk „do góry" w prawym dolnym rogu */
}
@media (max-width: 575px) {
    .xtn-footer-bottom {
        padding-right: 0;
        padding-bottom: 56px;
        justify-content: center;
        text-align: center;
    }
}
.xtn-footer-mini {
    list-style: none;
    display: flex;
    gap: 22px;
    margin: 0;
    padding: 0;
}
.xtn-footer-mini a {
    font-size: 15px;
    color: var(--xtn-ink-dark);
    white-space: nowrap;
}
.xtn-footer-mini a:hover {
    color: var(--xtn-lime);
}
.xtn-lockup-wrap {
    padding-bottom: clamp(8px, 2vw, 24px);
}

/* ==========================================================================
   v2.3 (2026-09-18) — podtytuły sekcji, „pokój oferty" (Pakiety + Agenci AI +
   modele rozliczeń), stopka z danymi firmy i kolumnami w kolorach znaku,
   dokumenty prawne, tarcza formularzy.
   ========================================================================== */

/* --- podtytuł sekcji: badge → tytuł → PODTYTUŁ (każda sekcja) -------------- */
.title-area .xtn-sec-sub {
    max-width: 660px;
    margin: 16px auto 0;
    font-size: 18px;
    line-height: 1.6;
    color: var(--xtn-ink-muted);
    text-wrap: pretty;
}
.title-area .xtn-sec-sub.is-dark {
    color: var(--xtn-ink-dark);
}
@media (max-width: 575px) {
    .title-area .xtn-sec-sub {
        font-size: 16px;
    }
}

/* --- pokój oferty: czwarty ciemny pokój, największy na stronie -------------
   Tło = jednokolorowa poświata + nieruchome pierścienie (ten sam motyw co
   w animacji „rdzeń AI"). Gradient trio tylko jako KRESKA ramki (karta
   polecana, panel agentów) — obracany pseudo-element, czyli sam `transform`. */
.xtn-offer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(84px, 9vw, 136px) 0;
    background:
        radial-gradient(62% 38% at 50% 0%, var(--xtn-glow-violet), transparent 72%),
        var(--xtn-dark);
    color: var(--xtn-ink-dark);
}
.xtn-offer .c-violet { --c: var(--xtn-violet); --c-on: var(--xtn-paper); }
.xtn-offer .c-blue { --c: var(--xtn-blue); --c-on: var(--xtn-dark); }
.xtn-offer .c-lime { --c: var(--xtn-lime); --c-on: var(--xtn-dark); }
.xtn-offer-rings {
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 0;
    width: min(1560px, 170vw);
    aspect-ratio: 1;
    margin-left: calc(min(1560px, 170vw) / -2);
    margin-top: calc(min(1560px, 170vw) * -0.44);
    fill: none;
    stroke: var(--xtn-paper);
    opacity: 0.1;
    pointer-events: none;
}
.xtn-offer-rings circle {
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
}
.xtn-offer-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: clamp(52px, 5.5vw, 80px) 0 20px;
}
.xtn-offer .title-area + .xtn-offer-row {
    margin-top: 0;
}
.xtn-offer-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-family: var(--body-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--xtn-ink-dark-strong);
}
.xtn-mark {
    width: 11px;
    height: 11px;
    flex: none;
    border-radius: 3px;
    background: var(--c);
}
.xtn-offer-note {
    margin: 0;
    font-size: 14px;
    color: var(--xtn-ink-dark-2);
}

/* karty pakietów w ciemnym pokoju: spoczynek = ciemne szkło, zalanie kolorem zostaje */
.xtn-offer .xtn-plan {
    background: var(--xtn-dark-2);
    border-color: var(--xtn-rule-dark);
    --ink: var(--xtn-paper);
    --ink-soft: var(--xtn-ink-dark);
    --tile: var(--xtn-tile-on-dark);
    --icon-filter: brightness(0) invert(1);
    --plan-price: var(--xtn-violet-on-dark);
    --plan-check: var(--xtn-violet-on-dark);
    --price-ink: var(--plan-price);
    --check-ink: var(--plan-check);
    --btn-bg: var(--xtn-tile-on-dark);
}
.xtn-offer .xtn-plan:nth-child(2) {
    --plan-price: var(--xtn-blue-on-dark);
    --plan-check: var(--xtn-blue-on-dark);
}
.xtn-offer .xtn-plan:nth-child(4) {
    --plan-price: var(--xtn-lime);
    --plan-check: var(--xtn-lime);
}
@media (hover: hover) {
    .xtn-offer .xtn-plan:not(.is-featured):hover {
        --price-ink: var(--card-ink);
        --check-ink: var(--card-ink);
        --btn-bg: var(--xtn-dark);
        box-shadow: var(--xtn-shadow-dark);
    }
}
.xtn-offer .xtn-plan.is-lit:not(.is-featured) {
    --price-ink: var(--card-ink);
    --check-ink: var(--card-ink);
    --btn-bg: var(--xtn-dark);
}
.xtn-offer .xtn-plan-price {
    color: var(--price-ink);
}
.xtn-offer .xtn-plan-list {
    color: var(--ink-soft);
    border-top-color: var(--xtn-rule-dark);
    border-top-color: color-mix(in srgb, currentColor 24%, transparent);
}
.xtn-offer .xtn-plan-list li::before {
    background-color: var(--check-ink);
}
.xtn-offer .xtn-plan .th-btn.style4 {
    background-color: var(--btn-bg);
}
/* karta polecana: neonowa ramka — duży kwadrat z gradientem stożkowym obraca
   się POD kartą, środek zasłania panel; animowany jest wyłącznie transform */
.xtn-offer .xtn-plan.is-featured {
    border: 0;
    padding: 29px 27px 27px;
    background: transparent;
    --price-ink: var(--xtn-paper);
    --check-ink: var(--xtn-lime);
    --tile: var(--xtn-lime);
    --icon-filter: none;
}
.xtn-offer .xtn-plan.is-featured::before,
.xtn-agents::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -2;
    left: 50%;
    top: 50%;
    width: 220%;
    height: auto;
    aspect-ratio: 1;
    margin: -110% 0 0 -110%;
    border-radius: 0;
    background: conic-gradient(from 0deg, var(--xtn-violet), var(--xtn-blue), var(--xtn-lime), var(--xtn-violet));
    transform: none;
    transition: none;
    animation: xtnSysSpin 8s linear infinite;
}
.xtn-offer .xtn-plan.is-featured::after,
.xtn-agents::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 1.5px;
    border-radius: calc(var(--xtn-radius-card) - 1.5px);
    background: var(--xtn-dark-2);
}
.xtn-offer.is-paused .xtn-plan.is-featured::before,
.xtn-offer.is-paused .xtn-agents::before {
    animation-play-state: paused;
}

/* panel agentów */
.xtn-agents {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: clamp(24px, 3.4vw, 56px);
    padding: clamp(24px, 3.2vw, 48px);
    border-radius: var(--xtn-radius-card);
}
.xtn-agents::after {
    background:
        radial-gradient(52% 70% at 0% 100%, var(--xtn-glow-violet), transparent 70%),
        var(--xtn-dark-2);
}
.xtn-agents-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}
.xtn-agents-title {
    margin: 0;
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 400;
    font-size: clamp(27px, 2.7vw, 40px);
    line-height: 1.16;
    letter-spacing: -0.015em;
    color: var(--xtn-paper);
    text-wrap: balance;
}
.xtn-agents-text {
    margin: 0;
    font-size: 17px;
    line-height: 1.65;
    color: var(--xtn-ink-dark);
    text-wrap: pretty;
}
.xtn-agents-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.xtn-agent {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 3px;
    align-content: start;
    padding: 16px 18px 16px 16px;
    border: 1px solid var(--xtn-rule-dark);
    border-radius: 18px;
    background: var(--xtn-glass-dark);
    transition: border-color var(--xtn-dur-short) var(--xtn-ease-out), transform var(--xtn-dur-short) var(--xtn-ease-out);
}
.xtn-agent-icon {
    grid-row: 1 / span 2;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--xtn-tile-on-dark);
    color: var(--c);
    transition: background-color var(--xtn-dur-short) var(--xtn-ease-out), color var(--xtn-dur-short) var(--xtn-ease-out);
}
.xtn-agent-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.xtn-agent-name {
    align-self: end;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--xtn-paper);
}
.xtn-agent-text {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--xtn-ink-dark);
}
@media (hover: hover) {
    .xtn-agent:hover,
    .xtn-model:hover {
        border-color: var(--c);
        transform: translateY(-3px);
    }
    .xtn-agent:hover .xtn-agent-icon {
        background: var(--c);
        color: var(--c-on);
    }
}

/* trzy modele rozliczeń — to nie sekwencja, więc bez numerów: znacznik w kolorze trio */
.xtn-models {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.xtn-model {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 30px 28px 26px;
    border: 1px solid var(--xtn-rule-dark);
    border-radius: var(--xtn-radius-card);
    background: var(--xtn-glass-dark);
    transition: border-color var(--xtn-dur-short) var(--xtn-ease-out), transform var(--xtn-dur-short) var(--xtn-ease-out);
}
.xtn-model::before {
    content: "";
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: var(--c);
}
.xtn-model-name {
    margin: 4px 0 0;
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 600;
    font-size: clamp(21px, 1.6vw, 25px);
    line-height: 1.2;
    color: var(--xtn-paper);
}
.xtn-model-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--xtn-ink-dark);
    text-wrap: pretty;
}
.xtn-model-for {
    margin: auto 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--xtn-rule-dark);
    font-size: 14.5px;
    color: var(--xtn-ink-dark-strong);
}
.xtn-model-for span {
    color: var(--xtn-ink-dark-2);
}
.xtn-included {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 34px;
    margin: clamp(36px, 4vw, 56px) 0 0;
    padding: 0;
}
.xtn-included li {
    position: relative;
    padding-left: 30px;
    font-size: 15.5px;
    font-weight: 500;
    color: var(--xtn-ink-dark-strong);
}
.xtn-included li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background-color: var(--xtn-lime);
    -webkit-mask: var(--xtn-check-mask) center / contain no-repeat;
    mask: var(--xtn-check-mask) center / contain no-repeat;
}
.xtn-offer-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 32px;
    margin-top: clamp(28px, 3vw, 40px);
    padding: 28px 36px;
    border-radius: var(--xtn-radius-card);
    background: var(--xtn-violet-ink);
}
.xtn-offer-cta-text {
    flex: 1 1 420px;
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
    color: var(--xtn-on-accent-soft);
    text-wrap: pretty;
}
.xtn-offer-cta-text strong {
    font-weight: 600;
    color: var(--xtn-paper);
}
.xtn-offer-cta .th-btn {
    background-color: var(--xtn-dark);
}

/* wejście w kadr — te same klasy co reszta strony (nakłada i zdejmuje xtn.js) */
.xtn-agents.xtn-reveal-ready > *,
.xtn-models.xtn-reveal-ready > * {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 640ms var(--xtn-ease-out), transform 760ms var(--xtn-ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
}
.xtn-agents.xtn-reveal-ready > .xtn-agents-intro { transform: translateX(-32px); }
.xtn-agents.xtn-reveal-ready > .xtn-agents-grid { transform: translateX(32px); }
.xtn-agents.xtn-reveal-ready.is-in > *,
.xtn-models.xtn-reveal-ready.is-in > * {
    opacity: 1;
    transform: none;
}
@media (max-width: 991px) {
    .xtn-agents {
        grid-template-columns: minmax(0, 1fr);
    }
    .xtn-models {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 575px) {
    .xtn-agents-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .xtn-offer-cta {
        padding: 24px;
    }
    .xtn-included {
        justify-content: flex-start;
    }
}
@media (prefers-reduced-motion: reduce) {
    .xtn-offer .xtn-plan.is-featured::before,
    .xtn-agents::before {
        animation: none;
    }
    .xtn-agent:hover,
    .xtn-model:hover {
        transform: none;
    }
    .xtn-agents.xtn-reveal-ready > *,
    .xtn-models.xtn-reveal-ready > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* --- Stopka v2.3: logo NAD danymi firmy (bez opisu marki), trzy panele
   w kolorach liter znaku na ciemnym tle (X fiolet · T limonka · N błękit),
   linki z kwadratowym znacznikiem i podkreśleniem rysowanym `transform`,
   dolna belka: copyright + dokumenty (polityka, regulamin, administrator).
   Ten sam blok jest na KAŻDEJ podstronie (patch_stopka → 6 miejsc). --- */
.xtn-foot {
    padding-top: clamp(48px, 6vw, 88px);
}
.xtn-foot .c-violet { --c: var(--xtn-violet-on-dark); }
.xtn-foot .c-lime { --c: var(--xtn-lime); }
.xtn-foot .c-blue { --c: var(--xtn-blue-on-dark); }
.xtn-foot-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.8fr));
    gap: 16px;
}
.xtn-foot-firm {
    padding: 4px 28px 0 0;
}
.xtn-foot-logo {
    display: inline-block;
    border-radius: 8px;
}
.xtn-foot-logo img {
    display: block;
    width: 108px;
    height: auto;
}
.xtn-foot-firm-name {
    margin: 22px 0 2px;
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 600;
    font-size: 19px;
    line-height: 1.3;
    color: var(--xtn-paper);
}
.xtn-foot-firm-sub {
    margin: 0 0 18px;
    font-size: 15px;
    color: var(--xtn-ink-dark);
}
.xtn-foot-reg {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px 20px;
    margin: 0;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}
.xtn-foot-reg div {
    display: contents;
}
.xtn-foot-reg dt {
    font-weight: 600;
    color: var(--xtn-ink-dark-2);
}
.xtn-foot-reg dd {
    margin: 0;
    color: var(--xtn-ink-dark-strong);
}
.xtn-foot-court {
    max-width: 36ch;
    margin: 16px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--xtn-ink-dark-2);
}
.xtn-foot-col {
    position: relative;
    overflow: hidden;
    padding: 28px 26px 22px;
    border: 1px solid var(--xtn-rule-dark);
    border-radius: var(--xtn-radius-card);
    background: var(--xtn-glass-dark);
}
.xtn-foot-col::before {
    content: "";
    position: absolute;
    left: 26px;
    top: 0;
    width: 48px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--c);
    transform-origin: left center;
    transition: transform var(--xtn-dur-long) var(--xtn-ease-out);
}
.xtn-foot-title {
    margin: 0 0 12px;
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    color: var(--c);
}
.xtn-foot-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.xtn-foot-col li a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 4px 0;
    font-size: 16px;
    line-height: 1.35;
    color: var(--xtn-ink-dark);
    transition: color var(--xtn-dur-short) var(--xtn-ease-out), transform var(--xtn-dur-short) var(--xtn-ease-out);
}
.xtn-foot-col li a::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 2px;
    background: var(--c);
    opacity: 0.5;
    transition: opacity var(--xtn-dur-short) var(--xtn-ease-out), transform var(--xtn-dur-short) var(--xtn-ease-out);
}
.xtn-foot-col li a::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 0;
    bottom: 7px;
    height: 1.5px;
    background: var(--c);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--xtn-dur-short) var(--xtn-ease-out);
}
.xtn-foot-mail {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid var(--c);
    border-radius: var(--xtn-radius-pill);
    font-size: 17px;
    font-weight: 600;
    color: var(--xtn-paper);
    transition: background-color var(--xtn-dur-short) var(--xtn-ease-out), color var(--xtn-dur-short) var(--xtn-ease-out);
}
.xtn-foot-hint {
    margin: 10px 0 8px;
    font-size: 14px;
    color: var(--xtn-ink-dark-2);
}
@media (hover: hover) {
    .xtn-foot-col:hover::before {
        transform: scaleX(2.4);
    }
    .xtn-foot-col li a:hover {
        color: var(--xtn-paper);
        transform: translateX(4px);
    }
    .xtn-foot-col li a:hover::before {
        opacity: 1;
        transform: scale(1.35);
    }
    .xtn-foot-col li a:hover::after {
        transform: scaleX(1);
    }
    .xtn-foot-mail:hover {
        background-color: var(--c);
        color: var(--xtn-dark);
    }
    .xtn-foot-legal a:hover {
        color: var(--xtn-paper);
        text-decoration: underline;
        text-underline-offset: 4px;
    }
}
.xtn-foot-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 28px;
    margin-top: clamp(36px, 4vw, 56px);
    padding: 20px 76px 26px 0; /* prawy margines: przycisk „do góry" */
    border-top: 1px solid var(--xtn-rule-dark);
}
.xtn-foot-copy {
    margin: 0;
    font-size: 14.5px;
    color: var(--xtn-ink-dark-2);
}
.xtn-foot-legal {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 26px;
    margin: 0;
    padding: 0;
}
.xtn-foot-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    font-size: 14.5px;
    color: var(--xtn-ink-dark);
    transition: color var(--xtn-dur-short) var(--xtn-ease-out);
}
@media (max-width: 1199px) {
    .xtn-foot-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .xtn-foot-firm {
        grid-column: 1 / -1;
        padding: 0 0 12px;
    }
    .xtn-foot-court {
        max-width: none;
    }
}
@media (max-width: 767px) {
    .xtn-foot-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .xtn-foot-bottom {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 0 96px;
    }
    .xtn-foot-col li a {
        min-height: 44px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .xtn-foot-col::before,
    .xtn-foot-col li a,
    .xtn-foot-col li a::before,
    .xtn-foot-col li a::after {
        transition: none;
    }
    .xtn-foot-col li a:hover {
        transform: none;
    }
}

/* --- Dokumenty prawne (generuje build-dokumenty.py): okruszki → tytuł 400/600
   → lead → data → dwie kolumny: przyklejony spis treści + treść. Sytuacje
   przetwarzania danych to karty z listą definicji (czytelne na telefonie —
   tabela by się nie zmieściła). --- */
.xtn-doc {
    padding: clamp(36px, 5vw, 72px) 0 clamp(72px, 8vw, 120px);
}
.xtn-doc-head {
    max-width: 860px;
    margin: 18px 0 clamp(36px, 5vw, 64px);
}
.xtn-doc-title {
    margin: 0 0 18px;
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 400;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.xtn-doc-lead {
    margin: 0;
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.65;
    color: var(--body-color);
    text-wrap: pretty;
}
.xtn-doc-meta {
    margin: 18px 0 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--xtn-ink-muted);
}
.xtn-doc-grid {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}
.xtn-doc-toc {
    position: sticky;
    top: 116px;
    padding: 24px 24px 20px;
    border: 1px solid var(--xtn-rule);
    border-radius: var(--xtn-radius-card);
    background: var(--xtn-paper-2);
}
.xtn-doc-toc-title {
    margin: 0 0 10px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--xtn-ink-muted);
}
.xtn-doc-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
.xtn-doc-toc li a {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 4px 0;
    font-size: 15px;
    line-height: 1.35;
    color: var(--title-color);
    transition: color var(--xtn-dur-micro) var(--xtn-ease-out);
}
.xtn-doc-toc li a:hover {
    color: var(--xtn-violet-ink);
}
.xtn-doc-other {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--xtn-rule);
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    color: var(--xtn-violet-ink);
}
.xtn-doc-body {
    max-width: 78ch;
}
.xtn-doc-sec {
    scroll-margin-top: 116px;
}
.xtn-doc-sec + .xtn-doc-sec {
    margin-top: clamp(36px, 4vw, 56px);
    padding-top: clamp(28px, 3vw, 40px);
    border-top: 1px solid var(--xtn-rule);
}
.xtn-doc-sec h2 {
    margin: 0 0 16px;
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 600;
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.25;
}
.xtn-doc-sec p,
.xtn-doc-sec li {
    font-size: 17px;
    line-height: 1.7;
    text-wrap: pretty;
}
.xtn-doc-sec p {
    margin: 0 0 14px;
}
.xtn-doc-sec ul,
.xtn-doc-sec ol {
    margin: 0 0 14px;
    padding-left: 24px;
}
.xtn-doc-sec li {
    margin-bottom: 8px;
}
.xtn-doc-sec li > ul {
    margin-top: 8px;
}
.xtn-doc-sec a {
    color: var(--xtn-violet-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.xtn-doc-cards {
    display: grid;
    gap: 14px;
}
.xtn-doc-card {
    padding: 24px 26px;
    border: 1px solid var(--xtn-rule);
    border-radius: var(--xtn-radius-card);
    background: var(--xtn-paper-2);
}
.xtn-doc-card h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-family: "Poppins", "Sora", sans-serif;
    font-weight: 600;
    font-size: 19px;
}
.xtn-doc-card h3::before {
    content: "";
    width: 11px;
    height: 11px;
    flex: none;
    border-radius: 3px;
    background: var(--xtn-violet);
}
.xtn-doc-card:nth-child(3n+2) h3::before { background: var(--xtn-blue); }
.xtn-doc-card:nth-child(3n+3) h3::before { background: var(--xtn-green); }
.xtn-doc-card dl {
    display: grid;
    gap: 10px;
    margin: 0;
}
.xtn-doc-card dl > div {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 4px 20px;
}
.xtn-doc-card dt {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.9;
    color: var(--xtn-ink-muted);
}
.xtn-doc-card dd {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
}
@media (max-width: 991px) {
    .xtn-doc-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .xtn-doc-toc {
        position: static;
    }
}
@media (max-width: 575px) {
    .xtn-doc-card {
        padding: 20px;
    }
    .xtn-doc-card dl > div {
        grid-template-columns: minmax(0, 1fr);
    }
    .xtn-doc-toc li a {
        min-height: 44px;
    }
}

/* --- Formularze (jasna karta): klauzula informacyjna RODO + widoczny stan
   tarczy antybotowej. Czerwień błędu = ta sama co w walidacji pól. --- */
.xtn-rodo {
    margin: -10px 0 22px;
    padding-left: 26px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--xtn-ink-muted);
}
.xtn-rodo a,
.xtn-consent a {
    color: var(--xtn-violet-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.xtn-shield {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    margin: 0 0 16px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--xtn-ink-muted);
}
.xtn-shield-dot {
    position: relative;
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: 0.55;
}
.xtn-shield[data-state="working"] .xtn-shield-dot {
    border-top-color: transparent;
    opacity: 1;
    animation: xtnSysSpin 0.9s linear infinite;
}
.xtn-shield[data-state="ok"] {
    color: var(--xtn-green-deep);
}
.xtn-shield[data-state="ok"] .xtn-shield-dot {
    border-color: var(--xtn-green);
    background: var(--xtn-green);
    opacity: 1;
}
.xtn-shield[data-state="ok"] .xtn-shield-dot::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid var(--xtn-dark);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.xtn-shield[data-state="error"] {
    color: var(--xtn-error);
}
@media (prefers-reduced-motion: reduce) {
    .xtn-shield[data-state="working"] .xtn-shield-dot {
        animation: none;
    }
}

/* --- v2.3: poprawki po audycie dostępności i wydajności ruchu ---------------
   1) Panel agentów ma ~1400 px szerokości — obracany kwadrat 220% dałby warstwę
      ponad 3000 px (dziesiątki MB pamięci karty). Ramka panelu jest więc
      NIERUCHOMA; obraca się tylko mała ramka karty polecanej.
   2) Stopka: to, co na hover, działa też z klawiatury (:focus-visible). --- */
.xtn-agents::before {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    margin: 0;
    background: linear-gradient(115deg, var(--xtn-violet), var(--xtn-blue) 48%, var(--xtn-lime));
    animation: none;
}
.xtn-foot-col li a:focus-visible,
.xtn-foot-legal a:focus-visible {
    color: var(--xtn-paper);
}
.xtn-foot-col li a:focus-visible::before {
    opacity: 1;
}
.xtn-foot-col li a:focus-visible::after {
    transform: scaleX(1);
}
.xtn-foot-mail:focus-visible {
    background-color: var(--c);
    color: var(--xtn-dark);
}

/* --- v2.3: poprawki po audycie Web Interface Guidelines ---------------------- */
/* „Przejdź do treści" — pierwszy element strony; widać go dopiero z klawiatury */
.xtn-skip {
    position: fixed;
    left: 16px;
    top: 0;
    z-index: 100000;
    padding: 12px 20px;
    border-radius: var(--xtn-radius-pill);
    background: var(--xtn-dark);
    color: var(--xtn-paper);
    font-weight: 600;
    transform: translateY(-120%);
    transition: transform var(--xtn-dur-micro) var(--xtn-ease-out);
}
.xtn-skip:focus-visible {
    transform: translateY(16px);
    color: var(--xtn-paper);
}
#tresc {
    display: block;
    outline: none; /* cel techniczny skoku, nie kontrolka — fokus widać po treści, która się przewinęła */
}
#agenci-ai,
#dane-firmy {
    scroll-margin-top: 110px;
}
/* pauza zapętlonej animacji (WCAG 2.2.2) — dyskretna, zawsze osiągalna z klawiatury */
.xtn-sys-toggle {
    position: absolute;
    z-index: 2;
    right: 14px;
    bottom: 14px;
    width: 44px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--xtn-rule-dark);
    border-radius: 50%;
    background: var(--xtn-tile-on-dark);
    color: var(--xtn-paper);
    opacity: 0.55;
    cursor: pointer;
    touch-action: manipulation;
    transition: opacity var(--xtn-dur-short) var(--xtn-ease-out);
}
.xtn-sys-toggle:hover,
.xtn-sys-toggle:focus-visible,
.xtn-sys-toggle[aria-pressed="true"] {
    opacity: 1;
}
.xtn-sys-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.xtn-sys-toggle .i-play { display: none; fill: currentColor; stroke: none; }
.xtn-sys-toggle[aria-pressed="true"] .i-pause { display: none; }
.xtn-sys-toggle[aria-pressed="true"] .i-play { display: block; }
.xtn-sys-toggle[hidden] { display: none; }

/* ==========================================================================
   v2.4 (2026-09-18) — trzecia tura uwag Marcina: spójna sekcja O nas,
   badge na ciemnym tle zawsze biały, oddech nad Opiniami, przyciski POD
   treścią, dynamiczny formularz.
   ========================================================================== */

/* --- badge w ciemnym pokoju: kolor wynika ze STRUKTURY, nie z pamięci -----
   (szablonowa klasa `style2` ustawiała tylko tło — tekst zostawał ciemny;
   w sekcji Proces badge był przez to nieczytelny) */
.xtn-process-bg .sub-title,
.xtn-offer .sub-title,
#tech-sec .sub-title,
.cta-area2 .sub-title {
    color: var(--xtn-paper);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: none;
}
.xtn-process-bg .sub-title:hover,
.xtn-offer .sub-title:hover,
#tech-sec .sub-title:hover,
.cta-area2 .sub-title:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.6);
}

/* --- O nas = ciemny pokój w języku Pakietów (v2.5, 2026-10-01) -------------
   Marcin: „w tym samym klimacie co Pakiety, bez rozstrzału między animacją
   a resztą". Tło jak w pokoju oferty (poświata + nieruchome pierścienie),
   kafle to ciemne szkło, każdy filar ma neonową krawędź w kolorze trio.
   Zamiast tagów-pigułek: wiersze wdrożeń (.xtn-proof), pasek podziału pracy
   (.xtn-split), oś z przystankami (.xtn-track) i matryca usług zapalana po
   kolei (.xtn-matrix) — echo modułów z animacji „rdzeń AI". */
.xtn-about-room {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(62% 38% at 50% 0%, var(--xtn-glow-violet), transparent 72%),
        var(--xtn-dark);
    color: var(--xtn-ink-dark);
}
.xtn-about-room .c-violet { --c: var(--xtn-violet-on-dark); --c-fill: var(--xtn-violet); --c-on: var(--xtn-paper); }
.xtn-about-room .c-blue { --c: var(--xtn-blue-on-dark); --c-fill: var(--xtn-blue); --c-on: var(--xtn-dark); }
.xtn-about-room .c-lime { --c: var(--xtn-lime); --c-fill: var(--xtn-lime); --c-on: var(--xtn-dark); }
.xtn-about-room .sub-title {
    color: var(--xtn-paper);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: none;
}

/* kafle: ciemne szkło */
.xtn-about-room .xtn-tile {
    border-color: var(--xtn-rule-dark);
    background: var(--xtn-glass-dark);
    box-shadow: none;
}
.xtn-about-room .xtn-tile-text {
    color: var(--xtn-ink-dark);
}
.xtn-about-room .xtn-tile-title {
    color: var(--xtn-paper);
}
.xtn-about-room .xtn-tile-label {
    color: var(--xtn-ink-dark-2);
}

/* teza: neonowa ramka trio jak panel Agentów w Pakietach */
.xtn-about-room .xtn-tile-statement {
    isolation: isolate;
    border: 0;
    background: transparent;
}
.xtn-about-room .xtn-tile-statement::before,
.xtn-about-room .xtn-tile-statement::after {
    content: "";
    position: absolute;
    pointer-events: none;
}
.xtn-about-room .xtn-tile-statement::before {
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    background: linear-gradient(115deg, var(--xtn-violet), var(--xtn-blue) 48%, var(--xtn-lime));
}
.xtn-about-room .xtn-tile-statement::after {
    inset: 1.5px;
    z-index: -1;
    border-radius: calc(var(--xtn-radius-card) - 1.5px);
    background:
        radial-gradient(64% 90% at 0% 0%, var(--xtn-glow-violet), transparent 70%),
        var(--xtn-dark-2);
}
.xtn-about-room .xtn-statement {
    color: var(--xtn-paper);
}

/* kafel animacji w ciemnym pokoju: ta sama obwódka co reszta, bez osobnego cienia */
.xtn-about-room .xtn-tile-anim {
    border: 1px solid var(--xtn-rule-dark);
    background:
        radial-gradient(76% 46% at 50% 0%, var(--xtn-glow-violet), transparent 72%),
        linear-gradient(168deg, var(--xtn-dark-3) 0%, var(--xtn-dark) 62%);
    box-shadow: none;
}

/* filary: neonowa krawędź u góry + ikona w kolorze trio */
.xtn-about-room .xtn-tile-pillar::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 0;
    width: 56px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--c);
    transform-origin: left center;
    transition: transform var(--xtn-dur-long) var(--xtn-ease-out);
}
.xtn-about-room .xtn-tile-pillar .xtn-tile-icon {
    background: var(--xtn-tile-on-dark);
    color: var(--c);
}
@media (hover: hover) {
    .xtn-about-room .xtn-tile-pillar:hover {
        border-color: var(--c);
        box-shadow: none;
    }
    .xtn-about-room .xtn-tile-pillar:hover::before {
        transform: scaleX(2.2);
    }
    .xtn-about-room .xtn-tile-pillar:hover .xtn-tile-icon {
        background: var(--c-fill);
        color: var(--c-on);
    }
}

/* --- wdrożenia jako wiersze (zamiast tagów z linkami) --------------------- */
.xtn-proof {
    list-style: none;
    display: grid;
    gap: 8px;
    margin: auto 0 0;
    padding: 6px 0 0;
}
.xtn-proof li:nth-child(1) { --c: var(--xtn-violet-on-dark); --c-fill: var(--xtn-violet); --c-on: var(--xtn-paper); }
.xtn-proof li:nth-child(2) { --c: var(--xtn-blue-on-dark); --c-fill: var(--xtn-blue); --c-on: var(--xtn-dark); }
.xtn-proof li:nth-child(3) { --c: var(--xtn-lime); --c-fill: var(--xtn-lime); --c-on: var(--xtn-dark); }
.xtn-proof a {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px;
    align-items: center;
    column-gap: 12px;
    row-gap: 1px;
    min-height: 56px;
    padding: 10px 12px 10px 20px;
    border: 1px solid var(--xtn-rule-dark);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    transition: border-color var(--xtn-dur-short) var(--xtn-ease-out), background-color var(--xtn-dur-short) var(--xtn-ease-out), transform var(--xtn-dur-short) var(--xtn-ease-out);
}
.xtn-proof a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--c);
    transform: scaleY(0.5);
    transition: transform var(--xtn-dur-short) var(--xtn-ease-out);
}
.xtn-proof-name {
    grid-column: 1;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--xtn-paper);
}
.xtn-proof-desc {
    grid-column: 1;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--xtn-ink-dark-2);
}
.xtn-proof-go {
    position: relative;
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--xtn-tile-on-dark);
    color: var(--xtn-ink-dark);
    transition: background-color var(--xtn-dur-short) var(--xtn-ease-out), color var(--xtn-dur-short) var(--xtn-ease-out);
}
.xtn-proof-go::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -6px;
    border: solid currentColor;
    border-width: 2px 2px 0 0;
    transform: rotate(45deg);
}
@media (hover: hover) {
    .xtn-proof a:hover {
        border-color: var(--c);
        background: rgba(255, 255, 255, 0.05);
        transform: translateX(3px);
    }
    .xtn-proof a:hover::before {
        transform: scaleY(1);
    }
    .xtn-proof a:hover .xtn-proof-go {
        background: var(--c-fill);
        color: var(--c-on);
    }
}
.xtn-proof a:focus-visible {
    border-color: var(--c);
}

/* --- podział pracy: dwie połowy jednego zespołu (bez liczb — to nie pomiar) */
.xtn-split {
    margin-top: auto;
    padding-top: 8px;
}
.xtn-split-bar {
    display: flex;
    gap: 4px;
    height: 10px;
}
.xtn-split-bar .seg {
    flex: 1 1 0;
    border-radius: 6px;
    transform-origin: left center;
    transition: transform 1100ms var(--xtn-ease-out);
}
.xtn-split-bar .seg-ludzie {
    background: var(--xtn-violet);
}
.xtn-split-bar .seg-agent {
    background: var(--xtn-blue);
    transition-delay: 260ms;
}
.xtn-split-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    margin: 14px 0 0;
}
.xtn-split-legend dt {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--xtn-paper);
}
.xtn-split-legend dt::before {
    content: "";
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 3px;
    background: var(--xtn-violet);
}
.xtn-split-legend div:nth-child(2) dt::before {
    background: var(--xtn-blue);
}
.xtn-split-legend dd {
    margin: 4px 0 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--xtn-ink-dark-2);
}

/* --- oś z przystankami: linia rysuje się przy wejściu w kadr -------------- */
.xtn-track {
    position: relative;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: auto 0 0;
    padding: 8px 0 0;
}
.xtn-track::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 15px;
    width: calc((100% - 24px) * 2 / 3 + 24px);
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--xtn-lime), var(--xtn-violet));
    transform-origin: left center;
    transition: transform 1200ms var(--xtn-ease-out);
}
.xtn-track li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 26px;
}
.xtn-track li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--xtn-lime);
    background: var(--xtn-dark);
    transition: transform 420ms var(--xtn-ease-out);
}
.xtn-track li:last-child::before {
    background: var(--xtn-lime);
}
.xtn-track li:nth-child(2)::before { transition-delay: 380ms; }
.xtn-track li:nth-child(3)::before { transition-delay: 760ms; }
.xtn-track-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--xtn-paper);
}
.xtn-track-desc {
    font-size: 13px;
    line-height: 1.4;
    color: var(--xtn-ink-dark-2);
}

/* stan „przed wejściem w kadr" nakłada i zdejmuje xtn.js — bez JS wszystko widać */
.xtn-bento.xtn-reveal-ready .xtn-split-bar .seg,
.xtn-bento.xtn-reveal-ready .xtn-track::before {
    transform: scaleX(0);
}
.xtn-bento.xtn-reveal-ready .xtn-track li::before {
    transform: scale(0);
}
.xtn-bento.xtn-reveal-ready.is-in .xtn-split-bar .seg,
.xtn-bento.xtn-reveal-ready.is-in .xtn-track::before,
.xtn-bento.xtn-reveal-ready.is-in .xtn-track li::before {
    transform: none;
}

/* --- matryca usług: kafelki zapalają się po kolei, jeden naraz ------------ */
.xtn-about-room .xtn-tile-cta {
    background:
        radial-gradient(80% 100% at 100% 100%, var(--xtn-glow-violet-soft), transparent 70%),
        var(--xtn-glass-dark);
}
.xtn-matrix {
    align-self: stretch;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)); /* domyślnie 3 + 2 (patrz niżej) */
    gap: 10px;
    margin: 0;
    padding: 0;
}
.xtn-matrix li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--xtn-rule-dark);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--xtn-ink-dark-strong);
}
.xtn-matrix li::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1px solid var(--c);
    box-shadow: 0 0 24px -6px var(--c), inset 0 0 18px -10px var(--c);
    opacity: 0;
    pointer-events: none;
    animation: xtnMatrixLit 7.5s linear infinite;
    animation-delay: calc(var(--k, 0) * 1.5s);
}
.xtn-matrix li:nth-child(2) { --k: 1; }
.xtn-matrix li:nth-child(3) { --k: 2; }
.xtn-matrix li:nth-child(4) { --k: 3; }
.xtn-matrix li:nth-child(5) { --k: 4; }
.xtn-matrix .ico {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--xtn-tile-on-dark);
    color: var(--c);
}
.xtn-matrix .ico svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.xtn-matrix.is-paused li::after {
    animation-play-state: paused;
}
@keyframes xtnMatrixLit {
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; }
    23% { opacity: 0; }
    100% { opacity: 0; }
}

@media (max-width: 575px) {
    .xtn-about-room .xtn-tile-pillar::before {
        left: 24px;
    }
    .xtn-split-legend {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (prefers-reduced-motion: reduce) {
    .xtn-matrix li::after {
        animation: none;
    }
    .xtn-split-bar .seg,
    .xtn-track::before,
    .xtn-track li::before,
    .xtn-proof a,
    .xtn-proof a::before {
        transition: none;
    }
    .xtn-bento.xtn-reveal-ready .xtn-split-bar .seg,
    .xtn-bento.xtn-reveal-ready .xtn-track::before,
    .xtn-bento.xtn-reveal-ready .xtn-track li::before {
        transform: none;
    }
    .xtn-proof a:hover {
        transform: none;
    }
}

/* --- oddech między sekcjami ---------------------------------------------- */
#testi-sec {
    padding-top: clamp(72px, 8vw, 120px);
}
/* przyciski „Dodaj opinię" / „Wszystkie wpisy" są teraz POD treścią */
.xtn-after-slider {
    margin-top: clamp(32px, 4vw, 52px);
}
.xtn-after-grid {
    margin-top: clamp(36px, 4.5vw, 60px);
}

/* --- Formularz v2 (2026-09-18): pasek postępu, przejścia kroków z rozsuwaniem
   wysokości, wybory potwierdzane rysowanym ptaszkiem. Animowane są tylko
   `transform`/`opacity`, jedynym wyjątkiem jest jednorazowe przejście
   wysokości opakowania kroków (mała, odizolowana powierzchnia). --- */
.xtn-form-wrap {
    max-width: 820px;
    padding: clamp(28px, 3.4vw, 46px) clamp(20px, 3.4vw, 48px) clamp(26px, 3vw, 38px);
    box-shadow: 0 30px 80px rgba(6, 5, 11, 0.35), 0 0 0 1px rgba(123, 93, 255, 0.12);
}

/* pasek postępu */
.xtn-steps {
    position: relative;
    margin-bottom: clamp(26px, 3vw, 38px);
}
.xtn-steps-rail {
    position: absolute;
    left: 22px;
    right: 22px;
    top: 21px;
    height: 3px;
    border-radius: 2px;
    background: var(--xtn-rule);
    overflow: hidden;
}
.xtn-steps-fill {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--xtn-violet), var(--xtn-blue));
    transform: scaleX(var(--postep, 0));
    transform-origin: left center;
    transition: transform 620ms var(--xtn-ease-out);
}
.xtn-steps-list {
    position: relative;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
    padding: 0;
}
.xtn-step-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--xtn-ink-muted);
    transition: color var(--xtn-dur-short) var(--xtn-ease-out);
}
.xtn-step-dot .num {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--xtn-rule);
    background: var(--xtn-paper);
    color: var(--xtn-ink-muted);
    font-size: 15px;
    transition: transform var(--xtn-dur-short) var(--xtn-ease-out), border-color var(--xtn-dur-short) var(--xtn-ease-out), background-color var(--xtn-dur-short) var(--xtn-ease-out), color var(--xtn-dur-short) var(--xtn-ease-out);
}
.xtn-step-dot.is-active {
    color: var(--title-color);
}
.xtn-step-dot.is-active .num {
    border-color: var(--xtn-violet);
    background: var(--xtn-violet);
    color: var(--xtn-paper);
    transform: scale(1.08);
    box-shadow: 0 8px 22px rgba(123, 93, 255, 0.3);
}
.xtn-step-dot.is-done {
    color: var(--title-color);
}
.xtn-step-dot.is-done .num {
    border-color: var(--xtn-violet);
    background: var(--xtn-paper-3);
    color: var(--xtn-violet-ink);
}
.xtn-step-dot.is-done .num::after {
    content: "";
    width: 18px;
    height: 18px;
    background-color: var(--xtn-violet-ink);
    -webkit-mask: var(--xtn-check-mask) center / contain no-repeat;
    mask: var(--xtn-check-mask) center / contain no-repeat;
}
.xtn-step-dot.is-done .num {
    font-size: 0; /* numer ustępuje miejsca ptaszkowi */
}
@media (max-width: 480px) {
    .xtn-step-dot .lbl {
        font-size: 12px;
    }
}

/* przejścia między krokami: wysokość opakowania + wjazd zawartości */
.xtn-panes {
    position: relative;
    overflow: hidden;
    transition: height 480ms var(--xtn-ease-out);
}
.xtn-step-pane {
    display: none;
}
.xtn-step-pane.is-active {
    display: block;
}
.xtn-step-pane.is-leaving {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    animation: xtnPaneOut 200ms var(--xtn-ease-out) forwards;
}
.xtn-step-pane.is-active > * {
    animation: xtnPaneIn 460ms var(--xtn-ease-out) backwards;
}
.xtn-step-pane.is-active > :nth-child(1) { animation-delay: 40ms; }
.xtn-step-pane.is-active > :nth-child(2) { animation-delay: 90ms; }
.xtn-step-pane.is-active > :nth-child(3) { animation-delay: 140ms; }
.xtn-step-pane.is-active > :nth-child(4) { animation-delay: 190ms; }
.xtn-step-pane.is-active > :nth-child(5) { animation-delay: 240ms; }
.xtn-step-pane.is-active > :nth-child(n+6) { animation-delay: 290ms; }
@keyframes xtnPaneIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}
@keyframes xtnPaneOut {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(-12px); }
}

/* pigułki wyboru: zaznaczenie potwierdzone rysowanym ptaszkiem */
.xtn-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-height: 48px;
    border-color: var(--xtn-rule);
    touch-action: manipulation;
    transition: background-color var(--xtn-dur-short) var(--xtn-ease-out), border-color var(--xtn-dur-short) var(--xtn-ease-out), color var(--xtn-dur-short) var(--xtn-ease-out), box-shadow var(--xtn-dur-short) var(--xtn-ease-out), transform var(--xtn-dur-short) var(--xtn-ease-out);
}
.xtn-chip::before {
    content: "";
    width: 0;
    height: 18px;
    margin-right: 0;
    background-color: currentColor;
    -webkit-mask: var(--xtn-check-mask) center / contain no-repeat;
    mask: var(--xtn-check-mask) center / contain no-repeat;
    transform: scale(0.4);
    opacity: 0;
    transition: width 260ms var(--xtn-ease-out), margin-right 260ms var(--xtn-ease-out), transform 320ms var(--xtn-ease-out), opacity 200ms var(--xtn-ease-out);
}
.xtn-chip.is-selected::before {
    width: 18px;
    margin-right: 9px;
    transform: scale(1);
    opacity: 1;
}
.xtn-chip.is-selected {
    animation: xtnChipPop 420ms var(--xtn-ease-out);
}
@keyframes xtnChipPop {
    0% { transform: scale(1); }
    36% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* pola: pierścień fokusa i etykieta reagująca na wpisywanie */
.xtn-field label {
    transition: color var(--xtn-dur-micro) var(--xtn-ease-out);
}
.xtn-field:focus-within label {
    color: var(--xtn-violet-ink);
}
.xtn-field input,
.xtn-field textarea {
    min-height: 52px;
    transition: border-color var(--xtn-dur-short) var(--xtn-ease-out), box-shadow var(--xtn-dur-short) var(--xtn-ease-out), background-color var(--xtn-dur-short) var(--xtn-ease-out);
}
.xtn-field textarea {
    min-height: 118px;
}

/* podsumowanie wyborów wjeżdża po kolei */
.xtn-summary span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--xtn-paper-3);
    color: var(--xtn-violet-ink);
    animation: xtnPaneIn 420ms var(--xtn-ease-out) backwards;
}
.xtn-summary span::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--xtn-violet);
}
.xtn-summary span:nth-child(1) { animation-delay: 180ms; }
.xtn-summary span:nth-child(2) { animation-delay: 260ms; }
.xtn-summary span:nth-child(3) { animation-delay: 340ms; }

/* potwierdzenie: ptaszek rysuje się kreską */
.xtn-form-done {
    animation: xtnPaneIn 520ms var(--xtn-ease-out);
}
.xtn-form-done .tick {
    width: 84px;
    height: 84px;
    background: none;
    margin: 0 auto 22px;
}
.xtn-form-done .tick svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.xtn-form-done .tick .ring {
    stroke: var(--xtn-lime);
    stroke-width: 3;
    stroke-dasharray: 183;
    stroke-dashoffset: 183;
    animation: xtnRysuj 700ms var(--xtn-ease-out) 120ms forwards;
}
.xtn-form-done .tick .mark {
    stroke: var(--xtn-green-ink);
    stroke-width: 5;
    stroke-dasharray: 38;
    stroke-dashoffset: 38;
    animation: xtnRysuj 420ms var(--xtn-ease-out) 620ms forwards;
}
@keyframes xtnRysuj {
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .xtn-panes,
    .xtn-steps-fill {
        transition: none;
    }
    .xtn-step-pane.is-active > *,
    .xtn-step-pane.is-leaving,
    .xtn-summary span,
    .xtn-form-done,
    .xtn-chip.is-selected {
        animation: none;
    }
    .xtn-form-done .tick .ring,
    .xtn-form-done .tick .mark {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* --- xtnFadeIn: przywrócone (używa go okno opinii; usunięte razem ze starym
   paskiem kroków przez pomyłkę 2026-09-18) --- */
@keyframes xtnFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* --- Okno „Dodaj opinię": wjazd z przygaszeniem tła i sprężystym panelem --- */
.xtn-modal-overlay {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    overscroll-behavior: contain;
}
.xtn-modal-overlay.is-open {
    animation: xtnTloIn 260ms var(--xtn-ease-out);
}
.xtn-modal-overlay.is-open .xtn-modal {
    animation: xtnPanelIn 420ms var(--xtn-ease-out);
}
.xtn-modal-overlay.is-open .xtn-modal > form > *,
.xtn-modal-overlay.is-open .xtn-modal > .xtn-form-done > * {
    animation: xtnPaneIn 420ms var(--xtn-ease-out) backwards;
}
.xtn-modal-overlay.is-open .xtn-modal > form > :nth-child(1) { animation-delay: 120ms; }
.xtn-modal-overlay.is-open .xtn-modal > form > :nth-child(2) { animation-delay: 160ms; }
.xtn-modal-overlay.is-open .xtn-modal > form > :nth-child(3) { animation-delay: 200ms; }
.xtn-modal-overlay.is-open .xtn-modal > form > :nth-child(4) { animation-delay: 240ms; }
.xtn-modal-overlay.is-open .xtn-modal > form > :nth-child(n+5) { animation-delay: 280ms; }
@keyframes xtnTloIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes xtnPanelIn {
    from { opacity: 0; transform: translateY(26px) scale(0.97); }
    to { opacity: 1; transform: none; }
}
/* gwiazdki oceny: rosną przy najechaniu i „zapalają się" po wybraniu */
.xtn-star {
    transition: transform var(--xtn-dur-micro) var(--xtn-ease-out), color var(--xtn-dur-micro) var(--xtn-ease-out);
    touch-action: manipulation;
}
.xtn-star:hover,
.xtn-star:focus-visible {
    transform: scale(1.18);
}
.xtn-star.is-on {
    animation: xtnChipPop 380ms var(--xtn-ease-out);
}

/* --- pasek postępu: linia tylko MIĘDZY skrajnymi znacznikami ---------------
   (przy trzech kolumnach ich środki wypadają w 1/6 i 5/6 szerokości) */
.xtn-steps-rail {
    left: 16.6667%;
    right: 16.6667%;
}

@media (prefers-reduced-motion: reduce) {
    .xtn-modal-overlay.is-open,
    .xtn-modal-overlay.is-open .xtn-modal,
    .xtn-modal-overlay.is-open .xtn-modal > form > *,
    .xtn-star.is-on {
        animation: none;
    }
    .xtn-star:hover,
    .xtn-star:focus-visible {
        transform: none;
    }
}

/* --- pasek postępu: krok zrobiony = limonka (ten sam sygnał „gotowe" co
   ptaszki w liście „w każdym projekcie"), klikalny powrót --- */
.xtn-step-dot.is-done .num {
    border-color: var(--xtn-lime);
    background: var(--xtn-lime);
}
.xtn-step-dot.is-done .num::after {
    width: 20px;
    height: 20px;
    background-color: var(--xtn-dark);
}
.xtn-step-dot.is-done {
    cursor: pointer;
}
.xtn-step-dot.is-done:hover .num {
    transform: scale(1.06);
}
.xtn-steps-fill {
    background: linear-gradient(90deg, var(--xtn-lime), var(--xtn-violet));
}
@media (prefers-reduced-motion: reduce) {
    .xtn-step-dot.is-done:hover .num {
        transform: none;
    }
}

/* ptaszek kroku na środku kółka: ukryty numer nadal jest elementem siatki
   (font-size:0), więc ::after lądowało w drugim wierszu — pozycjonujemy je
   bezwzględnie względem kółka */
.xtn-step-dot .num {
    position: relative;
}
.xtn-step-dot.is-done .num::after {
    position: absolute;
    inset: 0;
    margin: auto;
}

/* ==========================================================================
   Kreator wyceny v3 (2026-10-01) — Marcin: „nierówne klikacze", „zbyt płytki",
   „ma być piękniejszy, dynamiczny i klikalny inaczej". Panel to ciemne szkło
   z neonową ramką trio (jak teza w O nas i panel Agentów), wybory to RÓWNE
   karty z ikoną i opisem: wybrana karta zalewa się kolorem od ikony (sam
   `transform`, jak karty Technologii) i dostaje ptaszek w rogu. Budżet ma
   wskaźnik skali (1–4 słupki), termin — ikony. Kolory błędów i linków są
   nadpisane tokenami tylko w obrębie panelu (kontrast na ciemnym).
   ========================================================================== */
.xtn-form-wrap {
    isolation: isolate;
    background: transparent;
    border-radius: 26px;
    color: var(--xtn-ink-dark);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
    --xtn-error: #FF8F87; /* czerwień błędu czytelna na ciemnym (≥ 6:1) */
}
.xtn-form-wrap::before,
.xtn-form-wrap::after {
    content: "";
    position: absolute;
    pointer-events: none;
}
.xtn-form-wrap::before {
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    background: linear-gradient(125deg, var(--xtn-violet), var(--xtn-blue) 52%, var(--xtn-lime));
}
.xtn-form-wrap::after {
    inset: 1.5px;
    z-index: -1;
    border-radius: 24.5px;
    background:
        radial-gradient(70% 42% at 50% 0%, rgba(123, 93, 255, 0.22), transparent 72%),
        var(--xtn-dark-2);
}
.xtn-form-wrap .c-violet { --c: var(--xtn-violet-on-dark); --c-fill: var(--xtn-violet-ink); --c-on: var(--xtn-paper); --c-tile: rgba(255, 255, 255, 0.2); } /* violet-ink: biały tekst 5.4:1 */
.xtn-form-wrap .c-blue { --c: var(--xtn-blue-on-dark); --c-fill: var(--xtn-blue); --c-on: var(--xtn-dark); --c-tile: rgba(6, 5, 11, 0.12); }
.xtn-form-wrap .c-lime { --c: var(--xtn-lime); --c-fill: var(--xtn-lime); --c-on: var(--xtn-dark); --c-tile: rgba(6, 5, 11, 0.1); }

/* teksty panelu */
.xtn-form-wrap .xtn-q {
    color: var(--xtn-paper);
    font-size: clamp(21px, 2vw, 25px);
}
.xtn-form-wrap .xtn-hint {
    color: var(--xtn-ink-dark-2);
    margin-bottom: 16px;
}

/* pasek postępu na ciemnym */
.xtn-form-wrap .xtn-steps-rail {
    background: rgba(255, 255, 255, 0.1);
}
.xtn-form-wrap .xtn-step-dot {
    color: var(--xtn-ink-dark-2);
}
.xtn-form-wrap .xtn-step-dot .num {
    border-color: rgba(255, 255, 255, 0.18);
    background: var(--xtn-dark-2);
    color: var(--xtn-ink-dark);
}
.xtn-form-wrap .xtn-step-dot.is-active,
.xtn-form-wrap .xtn-step-dot.is-done {
    color: var(--xtn-paper);
}
.xtn-form-wrap .xtn-step-dot.is-active .num {
    border-color: var(--xtn-violet-ink);
    background: var(--xtn-violet-ink);
    color: var(--xtn-paper);
    box-shadow: 0 0 0 6px rgba(123, 93, 255, 0.18), 0 10px 26px rgba(123, 93, 255, 0.4);
}
.xtn-form-wrap .xtn-step-dot.is-done .num {
    border-color: var(--xtn-lime);
    background: var(--xtn-lime);
}

/* --- karty wyboru ----------------------------------------------------------- */
.xtn-form-wrap .xtn-opts {
    display: grid;
    gap: 12px;
    margin: 0 0 28px;
}
.xtn-form-wrap .xtn-opts.is-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xtn-form-wrap .xtn-opts.is-scale { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 24px; }
.xtn-form-wrap .xtn-opts.is-time { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xtn-form-wrap .xtn-opt {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    min-height: 0;
    width: 100%;
    margin: 0;
    padding: 18px 16px 16px;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: var(--xtn-paper);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    touch-action: manipulation;
    animation: none;
    transition: transform var(--xtn-dur-short) var(--xtn-ease-out), border-color var(--xtn-dur-short) var(--xtn-ease-out), box-shadow 320ms var(--xtn-ease-out), color 320ms var(--xtn-ease-out);
}
/* zalanie kolorem: koło rośnie od ikony (animowany tylko transform) */
.xtn-form-wrap .xtn-opt::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 36px;
    top: 38px;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    border-radius: 50%;
    background: var(--c-fill);
    transform: scale(0);
    transition: transform 560ms var(--xtn-ease-out);
}
/* ptaszek w rogu: wskakuje po wyborze */
.xtn-form-wrap .xtn-opt::before {
    content: "";
    position: absolute;
    right: 12px;
    top: 12px;
    width: 22px;
    height: 22px;
    margin: 0;
    border-radius: 50%;
    background: var(--c-on);
    -webkit-mask: none;
    mask: none;
    opacity: 0;
    transform: scale(0.3);
    transition: transform 380ms var(--xtn-ease-out) 120ms, opacity 200ms var(--xtn-ease-out) 120ms;
}
.xtn-form-wrap .xtn-opt .xtn-opt-tick {
    display: none;
}
.xtn-form-wrap .xtn-opt-ico {
    width: 42px;
    height: 42px;
    flex: none;
    margin-bottom: 4px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--xtn-tile-on-dark);
    color: var(--c);
    transition: background-color 320ms var(--xtn-ease-out), color 320ms var(--xtn-ease-out), transform 420ms var(--xtn-ease-out);
}
.xtn-form-wrap .xtn-opt-ico svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.xtn-form-wrap .xtn-opt-desc {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--xtn-ink-dark-2);
    transition: color 320ms var(--xtn-ease-out);
}

/* wskaźnik skali budżetu: 4 słupki rosnące jak zasięg */
.xtn-form-wrap .xtn-lvl {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 26px;
    margin-bottom: 6px;
}
.xtn-form-wrap .xtn-lvl i {
    width: 7px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.14);
    transition: background-color 320ms var(--xtn-ease-out);
}
.xtn-form-wrap .xtn-lvl i:nth-child(1) { height: 30%; }
.xtn-form-wrap .xtn-lvl i:nth-child(2) { height: 52%; }
.xtn-form-wrap .xtn-lvl i:nth-child(3) { height: 76%; }
.xtn-form-wrap .xtn-lvl i:nth-child(4) { height: 100%; }
.xtn-form-wrap .xtn-lvl[data-l="1"] i:nth-child(-n+1),
.xtn-form-wrap .xtn-lvl[data-l="2"] i:nth-child(-n+2),
.xtn-form-wrap .xtn-lvl[data-l="3"] i:nth-child(-n+3),
.xtn-form-wrap .xtn-lvl[data-l="4"] i:nth-child(-n+4) {
    background: var(--c);
}
.xtn-form-wrap .xtn-lvl.is-unknown i {
    background: transparent;
    border: 1.5px dashed rgba(255, 255, 255, 0.3);
}

@media (hover: hover) {
    .xtn-form-wrap .xtn-opt:hover {
        transform: translateY(-3px);
        border-color: var(--c);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 30px -14px var(--c-fill);
    }
    .xtn-form-wrap .xtn-opt:hover .xtn-opt-ico {
        transform: rotate(-8deg) scale(1.06);
    }
}
.xtn-form-wrap .xtn-opt:focus-visible {
    border-color: var(--c);
    outline: 3px solid var(--c);
    outline-offset: 2px;
}

/* stan wybrany */
.xtn-form-wrap .xtn-opt.is-selected {
    border-color: transparent;
    color: var(--c-on);
    box-shadow: 0 18px 40px -14px var(--c-fill);
}
.xtn-form-wrap .xtn-opt.is-selected::after {
    transform: scale(9);
}
.xtn-form-wrap .xtn-opt.is-selected::before {
    opacity: 1;
    transform: scale(1);
    background:
        var(--c-on);
    -webkit-mask: var(--xtn-check-mask) center / 22px no-repeat;
    mask: var(--xtn-check-mask) center / 22px no-repeat;
}
.xtn-form-wrap .xtn-opt.is-selected .xtn-opt-ico {
    background: var(--c-tile);
    color: var(--c-on);
}
.xtn-form-wrap .xtn-opt.is-selected .xtn-opt-desc {
    color: var(--c-on);
    opacity: 0.82;
}
.xtn-form-wrap .xtn-opt.is-selected .xtn-lvl i {
    background: var(--c-tile);
    border-color: var(--c-on);
}
.xtn-form-wrap .xtn-opt.is-selected .xtn-lvl[data-l="1"] i:nth-child(-n+1),
.xtn-form-wrap .xtn-opt.is-selected .xtn-lvl[data-l="2"] i:nth-child(-n+2),
.xtn-form-wrap .xtn-opt.is-selected .xtn-lvl[data-l="3"] i:nth-child(-n+3),
.xtn-form-wrap .xtn-opt.is-selected .xtn-lvl[data-l="4"] i:nth-child(-n+4) {
    background: var(--c-on);
}

/* pola tekstowe: ciemne szkło */
.xtn-form-wrap .xtn-field label {
    color: var(--xtn-paper);
}
.xtn-form-wrap .xtn-field:focus-within label {
    color: var(--xtn-violet-on-dark);
}
.xtn-form-wrap .xtn-optional {
    font-weight: 400;
    color: var(--xtn-ink-dark-2);
}
.xtn-form-wrap .xtn-field input,
.xtn-form-wrap .xtn-field textarea {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: var(--xtn-paper);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.xtn-form-wrap .xtn-field input::placeholder,
.xtn-form-wrap .xtn-field textarea::placeholder {
    color: var(--xtn-ink-dark-2);
}
.xtn-form-wrap .xtn-field input:focus,
.xtn-form-wrap .xtn-field textarea:focus {
    border-color: var(--xtn-violet-on-dark);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 4px rgba(123, 93, 255, 0.25);
}
.xtn-form-wrap .xtn-field.has-error input,
.xtn-form-wrap .xtn-field.has-error textarea {
    border-color: var(--xtn-error);
}

/* zgoda, klauzula, tarcza, nawigacja */
.xtn-form-wrap .xtn-consent {
    color: var(--xtn-ink-dark);
}
.xtn-form-wrap .xtn-consent a,
.xtn-form-wrap .xtn-rodo a,
.xtn-form-wrap .xtn-mail-alt a,
.xtn-form-wrap .xtn-form-error a {
    color: var(--xtn-violet-on-dark);
}
.xtn-form-wrap .xtn-rodo {
    color: var(--xtn-ink-dark-2);
}
.xtn-form-wrap .xtn-shield {
    color: var(--xtn-ink-dark-2);
}
.xtn-form-wrap .xtn-shield[data-state="ok"] {
    color: var(--xtn-lime);
}
.xtn-form-wrap .xtn-back {
    color: var(--xtn-ink-dark-2);
}
.xtn-form-wrap .xtn-back:hover {
    color: var(--xtn-paper);
}
.xtn-form-wrap .xtn-summary span {
    background: rgba(123, 93, 255, 0.18);
    color: var(--xtn-paper);
}
.xtn-form-wrap .xtn-mail-alt {
    color: var(--xtn-ink-dark-2);
}
.xtn-form-wrap .xtn-form-done h3 {
    color: var(--xtn-paper);
}
.xtn-form-wrap .xtn-form-done p {
    color: var(--xtn-ink-dark);
}
.xtn-form-wrap .xtn-form-done .tick .mark {
    stroke: var(--xtn-lime);
}

@media (max-width: 767px) {
    .xtn-form-wrap .xtn-opts.is-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xtn-form-wrap .xtn-opts.is-scale,
    .xtn-form-wrap .xtn-opts.is-time { grid-template-columns: minmax(0, 1fr); }
    /* na wąskim ekranie budżet i termin to równe wiersze: wskaźnik/ikona z lewej */
    .xtn-form-wrap .xtn-opts.is-scale .xtn-opt,
    .xtn-form-wrap .xtn-opts.is-time .xtn-opt {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        column-gap: 14px;
        row-gap: 2px;
        padding: 14px 48px 14px 16px;
    }
    .xtn-form-wrap .xtn-opts.is-scale .xtn-lvl,
    .xtn-form-wrap .xtn-opts.is-time .xtn-opt-ico {
        margin-bottom: 0;
    }
    .xtn-form-wrap .xtn-opts.is-time .xtn-opt-desc {
        flex-basis: 100%;
        padding-left: 56px;
    }
    .xtn-form-wrap .xtn-opts.is-scale .xtn-opt::after,
    .xtn-form-wrap .xtn-opts.is-time .xtn-opt::after {
        top: 50%;
    }
    .xtn-form-wrap .xtn-opt::before {
        top: 50%;
        margin-top: -11px;
    }
    .xtn-form-wrap .xtn-opts.is-types .xtn-opt::before {
        top: 12px;
        margin-top: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .xtn-form-wrap .xtn-opt,
    .xtn-form-wrap .xtn-opt::after,
    .xtn-form-wrap .xtn-opt::before,
    .xtn-form-wrap .xtn-opt-ico {
        transition: none;
    }
    .xtn-form-wrap .xtn-opt:hover,
    .xtn-form-wrap .xtn-opt:hover .xtn-opt-ico {
        transform: none;
    }
}

/* --- Pasek menu przed przewinięciem (v2.5, 2026-10-01) ----------------------
   Marcin: „zwęzić pasek i przesunąć elementy, żeby były równo". Zmierzone:
   szary pasek szedł za szerokością kontenera strony (np. przy 1156 px: 110 px
   od brzegu), a karta startowa pod nim ma stałe 24 px — krawędzie się
   rozjeżdżały na każdej szerokości. Teraz:
   1) od 992 px pasek ma DOKŁADNIE krawędzie karty startowej (24 px od brzegu),
   2) logo i przycisk stoją tyle samo od krawędzi paska (18 px),
   3) menu ma RÓWNE odstępy do logo i do przycisku (sprawdzone: środek
      geometryczny przy szerokim przycisku wyglądał na przesunięty w prawo),
   4) pasek jest niższy (84 → 72 px).
   Stan po przewinięciu (biały pasek na całą szerokość) zostaje bez zmian. */
@media (min-width: 992px) {
    .th-header.header-layout1 > .th-container {
        width: 100%;
        max-width: none;
        padding-left: 24px;
        padding-right: 24px;
    }
    .header-layout1.style2 .menu-area {
        padding-left: 0;
        padding-right: 0;
    }
    .header-layout1 .sticky-wrapper:not(.sticky) > .container {
        width: 100%;
        max-width: none;
        padding-left: 18px;
        padding-right: 18px;
    }
    .header-layout1 .sticky-wrapper:not(.sticky) > .container > .row {
        margin-left: 0;
        margin-right: 0;
    }
    .header-layout1 .sticky-wrapper:not(.sticky) > .container > .row > [class*="col"] {
        padding-left: 0;
        padding-right: 0;
    }
}
@media (min-width: 1200px) {
    .header-layout1 .sticky-wrapper:not(.sticky) .main-menu > ul > li > a {
        padding-top: 25px;
        padding-bottom: 25px;
    }
    .header-layout1 .sticky-wrapper:not(.sticky) .header-button .th-btn {
        min-height: 50px;
        padding-top: 13px;
        padding-bottom: 13px;
    }
}
/* 1200–1299 px: szablon chował tu przycisk „Bezpłatna wycena" (a hamburger jest
   ukryty od 1200 px) — po prawej zostawała pusta dziura i menu stało krzywo.
   Przycisk wraca, a odstępy menu są odrobinę ciaśniejsze, żeby wszystko weszło. */
@media (min-width: 1200px) and (max-width: 1299px) {
    .header-layout1 .header-button .th-btn:not(:last-child) {
        display: inline-flex;
    }
    .header-layout1 .main-menu > ul > li {
        margin: 0 11px;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .header-layout1 .menu-area {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/* ==========================================================================
   Ciemne okna — jedna konwencja dla całej strony (v2.5.1, 2026-10-01)
   Marcin: nowe okno O nas „nie trzyma się konwencji pozostałych" — szło od
   krawędzi do krawędzi, bez zaokrągleń i bez odstępu od kart startowych
   (Pakiety miały ten sam błąd). Wzorzec ZMIERZONY na kartach startowych i
   pasku menu: wcięcie 24 px od brzegu ekranu od 992 px (niżej 0 — tak jak
   karty startowe), promień 24 px, odstęp od sąsiednich okien = odstęp
   pasek menu → karty startowe (20 px; na telefonie 10 px). Te same wartości
   dostały Proces i Stack (miały 20 px i promień 32 px) — wszystkie ciemne
   okna mają teraz dokładnie rozmiar kart startowych.
   ========================================================================== */
:root {
    --xtn-okno-wciecie: 24px;
    --xtn-okno-promien: 24px;
    --xtn-okno-odstep: 20px;
}
@media (max-width: 991px) {
    :root {
        --xtn-okno-wciecie: 0px;
        --xtn-okno-odstep: 10px;
    }
}
.xtn-about-room,
.xtn-offer,
.process-area.xtn-process-bg,
#tech-sec {
    margin: var(--xtn-okno-odstep) var(--xtn-okno-wciecie);
    border-radius: var(--xtn-okno-promien);
    overflow: hidden;
}

/* --- Matryca usług: układ wg szerokości KAFLA, nie ekranu (v2.5.1) ----------
   Szeroki kafel (≥ 720 px treści, np. 1440 px ekranu): 5 w jednym rzędzie.
   Węższy (np. 1156 px ekranu, tablet): 3 + 2 na siatce 6-kolumnowej — dolne
   dwie karty szersze, oba rzędy pełne, bez sieroty. Telefon (≤ 380 px):
   2 + 2 + piąta na całą szerokość. */
.xtn-about-room .xtn-tile-cta {
    container: xtn-cta / inline-size;
}
.xtn-matrix li {
    grid-column: span 2;
    min-width: 0;
    overflow-wrap: anywhere;
}
.xtn-matrix li:nth-child(n+4) {
    grid-column: span 3;
}
@container xtn-cta (min-width: 720px) {
    .xtn-matrix {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .xtn-matrix li,
    .xtn-matrix li:nth-child(n+4) {
        grid-column: auto;
    }
}
@container xtn-cta (max-width: 380px) {
    .xtn-matrix li,
    .xtn-matrix li:nth-child(n+4) {
        grid-column: span 3;
    }
    .xtn-matrix li:last-child {
        grid-column: 1 / -1;
    }
}

/* --- O nas: układ kafli na węższych ekranach (v2.5.1) ------------------------
   Zmierzone przy 1156 px (szerokość ekranu Marcina): kafel animacji rozciągał
   się na 2 rzędy (~980 px wysokości), a sam rysunek ma ~475 px — po ~250 px
   pustki nad i pod nim; w wąskim kaflu „Seniorzy" legenda nachodziła na siebie.
   Od 992 do 1399 px: rząd 1 = teza + animacja (animacja tylko w tym rzędzie),
   rząd 2 = dwa filary po połowie, rząd 3 = filar „Ty decydujesz" + „Co budujemy".
   Szerzej zostaje układ z animacją przez dwa rzędy (tam rysunek wypełnia kafel). */
@media (min-width: 992px) and (max-width: 1399px) {
    .xtn-bento > .xtn-tile-statement { grid-column: 1 / span 7; grid-row: 1; }
    .xtn-bento > .xtn-tile-anim { grid-column: 8 / span 5; grid-row: 1; min-height: 520px; }
    .xtn-bento > :nth-child(3) { grid-column: 1 / span 6; grid-row: 2; }
    .xtn-bento > :nth-child(4) { grid-column: 7 / span 6; grid-row: 2; }
    .xtn-bento > :nth-child(5) { grid-column: 1 / span 5; grid-row: 3; }
    .xtn-bento > :nth-child(6) { grid-column: 6 / span 7; grid-row: 3; }
}
/* legenda podziału pracy: w wąskim kaflu jedna pod drugą (zamiast nachodzić) */
.xtn-about-room .xtn-tile-pillar {
    container: xtn-filar / inline-size;
}
@container xtn-filar (max-width: 360px) {
    .xtn-split-legend {
        grid-template-columns: minmax(0, 1fr);
    }
}
.xtn-split-legend dd,
.xtn-split-legend dt {
    min-width: 0;
    overflow-wrap: anywhere;
}