/* XTN — nadpisania szablonu Aior */

/* 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;
    }
}

/* pasek kroków */
.xtn-steps {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}
.xtn-steps .xtn-step-dot {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 40px;
    border: 1.5px solid #E7E4F9;
    color: #6a6775;
    font-size: 14px;
    font-weight: 600;
    background: #fff;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.xtn-steps .xtn-step-dot .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #EFEBFF;
    color: #7B5DFF;
    font-size: 13px;
    flex: none;
}
.xtn-steps .xtn-step-dot.is-active {
    border-color: #7B5DFF;
    color: #06050B;
    box-shadow: 0 6px 20px rgba(123, 93, 255, 0.18);
}
.xtn-steps .xtn-step-dot.is-active .num {
    background: #7B5DFF;
    color: #fff;
}
.xtn-steps .xtn-step-dot.is-done {
    border-color: #D4FF12;
    color: #06050B;
}
.xtn-steps .xtn-step-dot.is-done .num {
    background: #D4FF12;
    color: #06050B;
}
@media (max-width: 575px) {
    .xtn-steps .xtn-step-dot span.lbl { display: none; }
    .xtn-steps .xtn-step-dot { justify-content: center; }
}

/* kroki */
.xtn-step-pane {
    display: none;
    animation: xtnFadeIn 0.35s ease;
}
.xtn-step-pane.is-active {
    display: block;
}
@keyframes xtnFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.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: #e5484d;
}
.xtn-field .xtn-err {
    display: none;
    color: #e5484d;
    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: #e5484d;
}

/* 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: #e5484d;
    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: kafle w barwach palety + aktywne zagrania na hover */
.price-box {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.price-box:hover {
    transform: translateY(-6px);
}
#pricing-sec [class*="col-"]:nth-child(1) .price-box:hover {
    box-shadow: 0 24px 50px rgba(123, 93, 255, 0.25);
}
/* Karty 2/3/4 (Sklep AI / Aplikacja-MVP / Agent AI) w PEŁNEJ, jednakowej
   intensywności — dokładnie te same kolory co X/T w logo, to samo nasycenie,
   żadna nie "krzyczy" głośniej od pozostałych. Tekst jednolicie w jednym
   kolorze na kartę (bez dodatkowych, osobno tonowanych akcentów) — dobranym
   pod kontrast: fiolet jest ciemny → biały tekst (już tak działało przez
   natywną regułę .active szablonu); błękit i zieleń są jaśniejsze/bardziej
   nasycone → ciemny tekst czyta się na nich wyraźnie lepiej niż biały. */
#pricing-sec [class*="col-"]:nth-child(2) .price-box:not(.active) {
    background: #4A90E8;
}
#pricing-sec [class*="col-"]:nth-child(2) .price-box .box-title,
#pricing-sec [class*="col-"]:nth-child(2) .price-box .box-text,
#pricing-sec [class*="col-"]:nth-child(2) .price-box .box-price,
#pricing-sec [class*="col-"]:nth-child(2) .price-box .duration,
#pricing-sec [class*="col-"]:nth-child(2) .price-box .subtitle,
#pricing-sec [class*="col-"]:nth-child(2) .price-box .available-list li {
    color: #06050B;
}
#pricing-sec [class*="col-"]:nth-child(2) .price-box:hover {
    box-shadow: 0 24px 50px rgba(74, 144, 232, 0.4);
}
#pricing-sec [class*="col-"]:nth-child(3) .price-box:hover {
    box-shadow: 0 24px 50px rgba(123, 93, 255, 0.42);
}
#pricing-sec [class*="col-"]:nth-child(4) .price-box:not(.active) {
    background: #A9C900;
}
#pricing-sec [class*="col-"]:nth-child(4) .price-box .box-title,
#pricing-sec [class*="col-"]:nth-child(4) .price-box .box-text,
#pricing-sec [class*="col-"]:nth-child(4) .price-box .box-price,
#pricing-sec [class*="col-"]:nth-child(4) .price-box .duration,
#pricing-sec [class*="col-"]:nth-child(4) .price-box .subtitle,
#pricing-sec [class*="col-"]:nth-child(4) .price-box .available-list li {
    color: #06050B;
}
#pricing-sec [class*="col-"]:nth-child(4) .price-box:hover {
    box-shadow: 0 24px 50px rgba(169, 201, 0, 0.4);
}

/* 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: pętla wideo w tle (fiolet -> błękit) na CAŁEJ wysokości stopki,
   bez żadnej nakładki ani karty — wideo widoczne w pełnej jasności wszędzie.
   Czytelność tekstu (biały na czasem-też-białych połyskach wideo) zabezpiecza
   text-shadow (dziedziczony przez WSZYSTKIE dzieci .footer-wrapper) + osobny
   drop-shadow na logo, bo to SVG/obrazek, którego text-shadow nie dotyczy.
   ========================================================================== */
.xtn-footer-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.xtn-footer-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.xtn-footer-card {
    position: relative;
    z-index: 1;
}
.footer-wrapper {
    /* poświata dookoła liter (0 0 ...) + kierunkowy cień — poświata radzi sobie
       lepiej niż sam cień z jasnymi, ruchomymi połyskami wideo w tle, bo działa
       niezależnie od tego, z której strony akurat pada jasny refleks */
    text-shadow:
        0 0 3px rgba(0, 0, 0, 0.95),
        0 0 8px rgba(0, 0, 0, 0.85),
        0 2px 4px rgba(0, 0, 0, 0.9),
        0 4px 18px rgba(0, 0, 0, 0.6);
}
.footer-wrapper .about-logo img,
.footer-wrapper .th-widget-about .about-logo img {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.85)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55));
}

/* 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-info .box-desig {
    display: block;
    margin-top: 2px;
}

/* 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 — gradient aurora (fiolet -> zieleń) + efekt skupienia
   ========================================================================== */
.xtn-process-bg {
    /* aurora w pełnej palecie marki: fiolet -> błękit -> zieleń */
    background:
        radial-gradient(55% 75% at 92% 100%, rgba(212, 255, 18, 0.7), transparent 62%),
        radial-gradient(70% 90% at 6% 0%, rgba(123, 93, 255, 0.95), transparent 68%),
        linear-gradient(118deg, #6C50F0 0%, #3E7FE0 52%, #86A31C 100%);
}

/* kafelek z animacją w kroku procesu — przezroczysta animacja (WebM alpha)
   unosi się bezpośrednio na karcie; klasę .no-alpha nadaje JS przeglądarkom
   bez wsparcia alphy VP9 (Safari) — wtedy wraca czarny kafelek pod mp4 */
.xtn-anim-tile {
    background: transparent;
    border-radius: 24px;
    overflow: hidden;
}
.xtn-anim-tile.no-alpha {
    background: #06050B;
}
.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;
}