/* UNIVERSY — warstwa stylów podstron (redesign 2026-09-24).
   Te same tokeny co na stronie głównej; klawiatura klas zamiast stylów inline,
   bo podstrony pisane są ręcznie, nie kompilowane z projektu.
   Wymaga uv-app.css (reset, keyframes, hover z projektu). */

:root {
    --uv-ink: #05070e;
    --uv-navy: #0a1128;
    --uv-navy-2: #0f1a3e;
    --uv-blue: #4a7bf7;
    --uv-blue-soft: #8bb0ff;
    --uv-blue-deep: #2e54c4;
    --uv-paper: #faf9f5;
    --uv-paper-2: #f6f5f1;
    --uv-text: #4a5568;
    --uv-muted: #6b7689;
    --uv-line: rgba(10, 14, 28, .12);
    --uv-line-soft: rgba(10, 14, 28, .08);
    --uv-font: "Titillium Web", system-ui, sans-serif;
    --uv-shadow: 0 40px 80px -56px rgba(5, 7, 14, .45);
    --uv-pad: clamp(88px, 10vw, 160px);
}

.uvp {
    background: var(--uv-paper);
    color: var(--uv-ink);
    font-family: var(--uv-font);
}

.uvp main {
    display: block;
    padding-top: 72px;   /* nagłówek skóry jest position:fixed */
}

/* Strony z ciemnym hero mają zapas w samej sekcji — inaczej nad nagłówkiem
   zostaje jasny pasek tła. */
.uvp-lp main {
    padding-top: 0;
}

/* ---------- układ ---------- */
.uvp-sec {
    padding: var(--uv-pad) 0;
    background: var(--uv-paper);
}

.uvp-sec--alt {
    background: var(--uv-paper-2);
}

.uvp-sec--dark {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--uv-ink);
    color: #fff;
}

.uvp-sec--navy {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(160deg, #1b2c5f 0%, var(--uv-navy-2) 55%, var(--uv-navy) 100%);
    color: #fff;
}

.uvp-sec--tight {
    padding: clamp(56px, 6vw, 96px) 0;
}

.uvp-wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
}

.uvp-wrap--narrow {
    max-width: 980px;
}

.uvp-grid {
    display: grid;
    gap: clamp(18px, 2vw, 28px);
}

.uvp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uvp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.uvp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.uvp-split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: clamp(24px, 4vw, 64px);
}

.uvp-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---------- typografia ---------- */
.uvp-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    font: 600 12px/1.4 var(--uv-font);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--uv-muted);
}

.uvp-eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--uv-blue);
    flex: none;
}

.uvp-sec--dark .uvp-eyebrow,
.uvp-sec--navy .uvp-eyebrow {
    color: rgba(255, 255, 255, .55);
}

.uvp-h1 {
    font-weight: 700;
    font-size: clamp(42px, 6.4vw, 104px);
    line-height: .94;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.uvp-h2 {
    font-weight: 700;
    font-size: clamp(34px, 4.6vw, 72px);
    line-height: .98;
    letter-spacing: -.04em;
    text-wrap: balance;
}

.uvp-h3 {
    font: 600 clamp(19px, 1.6vw, 24px)/1.25 var(--uv-font);
    letter-spacing: -.02em;
}

.uvp-h4 {
    font: 600 17px/1.35 var(--uv-font);
    letter-spacing: -.01em;
}

.uvp-thin {
    font-weight: 300;
    color: var(--uv-muted);
}

.uvp-sec--dark .uvp-thin,
.uvp-sec--navy .uvp-thin {
    color: var(--uv-blue-soft);
}

.uvp-lead {
    font: 300 clamp(21px, 1.9vw, 29px)/1.25 var(--uv-font);
    letter-spacing: -.02em;
    color: var(--uv-ink);
    text-wrap: balance;
}

.uvp-sec--dark .uvp-lead,
.uvp-sec--navy .uvp-lead {
    color: rgba(255, 255, 255, .92);
}

.uvp-p {
    font: 400 17px/1.65 var(--uv-font);
    color: var(--uv-text);
}

.uvp-p + .uvp-p {
    margin-top: 14px;
}

.uvp-sec--dark .uvp-p,
.uvp-sec--navy .uvp-p {
    color: rgba(255, 255, 255, .72);
}

.uvp-small {
    font: 400 14px/1.6 var(--uv-font);
    color: var(--uv-muted);
}

.uvp-num {
    font: 600 12px/1 var(--uv-font);
    letter-spacing: .12em;
    color: var(--uv-blue);
}

.uvp-a {
    color: var(--uv-blue-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.uvp-a:hover {
    color: var(--uv-blue);
}

.uvp-sec--dark .uvp-a,
.uvp-sec--navy .uvp-a {
    color: var(--uv-blue-soft);
}

/* ---------- karty i panele ---------- */
.uvp-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: clamp(24px, 2.4vw, 36px);
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(10, 14, 28, .1);
    box-shadow: var(--uv-shadow);
}

.uvp-card--flat {
    box-shadow: none;
    background: rgba(255, 255, 255, .6);
}

.uvp-card--dark {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(139, 176, 255, .18);
    box-shadow: none;
    color: #fff;
}

.uvp-card--accent {
    border-color: var(--uv-blue);
    box-shadow: 0 50px 90px -50px rgba(74, 123, 247, .7);
}

.uvp-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--uv-line);
    font: 600 11px/1 var(--uv-font);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--uv-muted);
}

.uvp-tag--blue {
    background: var(--uv-blue);
    border-color: var(--uv-blue);
    color: var(--uv-ink);
}

/* ---------- przyciski ---------- */
.uvp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 56px;
    padding: 0 26px;
    border: 0;
    border-radius: 10px;
    font: 600 13px/1 var(--uv-font);
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.uvp-btn--primary {
    background: #fff;
    color: var(--uv-ink);
    box-shadow: 0 24px 48px -30px rgba(5, 7, 14, .45);
}

.uvp-btn--primary:hover {
    background: #e3eaff;
    color: var(--uv-ink);
    transform: translateY(-2px);
}

.uvp-btn--blue {
    background: var(--uv-blue);
    color: var(--uv-ink);
}

.uvp-btn--blue:hover {
    background: var(--uv-blue-soft);
    color: var(--uv-ink);
    transform: translateY(-2px);
}

.uvp-btn--dark {
    background: linear-gradient(135deg, #1b2c5f, var(--uv-navy-2));
    color: #fff;
}

.uvp-btn--dark:hover {
    background: var(--uv-blue-deep);
    color: #fff;
    transform: translateY(-2px);
}

.uvp-btn--ghost {
    background: transparent;
    border: 1px solid var(--uv-line);
    color: var(--uv-ink);
}

.uvp-btn--ghost:hover {
    background: rgba(74, 123, 247, .1);
    border-color: var(--uv-blue);
    color: var(--uv-ink);
}

.uvp-sec--dark .uvp-btn--ghost,
.uvp-sec--navy .uvp-btn--ghost {
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
}

.uvp-sec--dark .uvp-btn--ghost:hover,
.uvp-sec--navy .uvp-btn--ghost:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.uvp-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ---------- listy ---------- */
.uvp-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.uvp-list li {
    position: relative;
    padding-left: 26px;
    font: 400 16px/1.6 var(--uv-font);
    color: var(--uv-text);
}

.uvp-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .72em;
    width: 14px;
    height: 1px;
    background: var(--uv-blue);
}

.uvp-list--check li::before {
    top: .5em;
    width: 9px;
    height: 5px;
    border-left: 1.6px solid var(--uv-blue);
    border-bottom: 1.6px solid var(--uv-blue);
    background: none;
    transform: rotate(-45deg);
}

.uvp-sec--dark .uvp-list li,
.uvp-sec--navy .uvp-list li,
.uvp-card--dark .uvp-list li {
    color: rgba(255, 255, 255, .78);
}

/* ---------- tabela ---------- */
.uvp-tablewrap {
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid var(--uv-line);
    background: #fff;
}

.uvp-table {
    width: 100%;
    border-collapse: collapse;
    font: 400 15px/1.6 var(--uv-font);
    color: var(--uv-text);
}

.uvp-table th,
.uvp-table td {
    padding: 16px 18px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--uv-line-soft);
}

.uvp-table th {
    font: 600 12px/1.3 var(--uv-font);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--uv-ink);
    background: var(--uv-paper-2);
    white-space: nowrap;
}

.uvp-table tr:last-child td {
    border-bottom: 0;
}

/* ---------- FAQ bez JS ---------- */
.uvp-faq {
    border-top: 1px solid var(--uv-line);
}

.uvp-faq details {
    border-bottom: 1px solid var(--uv-line);
}

.uvp-faq summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0;
    cursor: pointer;
    font: 600 clamp(17px, 1.4vw, 21px)/1.3 var(--uv-font);
    color: var(--uv-ink);
}

/* Ikona +/× w dwóch warstwach: ::after to nieruchome pudełko, ::before to same
   kreski — obraca się tylko znak. Gdy rotację dostawało pudełko, kwadrat z tłem
   przekręcał się w romb. Kreski mają parzystą grubość (2px), bo wartości
   subpikselowe renderują się pod kątem 45° nierówno. */
.uvp-faq summary::after {
    content: "";
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: rgba(10, 14, 28, .06);
    transition: background-color .25s ease;
}

.uvp-faq summary::before {
    content: "";
    position: absolute;
    right: 19px;
    top: 50%;
    z-index: 1;
    width: 14px;
    height: 14px;
    color: var(--uv-ink);
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
    background-size: 14px 2px, 2px 14px;
    background-position: center, center;
    background-repeat: no-repeat;
    transform: translate(50%, -50%);
    transition: transform .25s ease, color .25s ease;
}

.uvp-faq details[open] summary::after {
    background-color: var(--uv-blue);
}

.uvp-faq details[open] summary::before {
    color: #fff;
    transform: translate(50%, -50%) rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
    .uvp-faq summary::before,
    .uvp-faq summary::after { transition: none; }
}

.uvp-faq details > div {
    padding: 0 clamp(0px, 5vw, 64px) 26px 0;
    font: 400 17px/1.65 var(--uv-font);
    color: var(--uv-text);
}

/* ---------- formularz ---------- */
.uvp-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: clamp(24px, 3vw, 40px);
    border-radius: 20px;
    background: #0f142a;
    border: 1px solid rgba(139, 176, 255, .2);
    box-shadow: 0 60px 120px -60px rgba(74, 123, 247, .7);
}

.uvp-label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font: 600 11px/1 var(--uv-font);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.uvp-input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font: 400 16px/1 var(--uv-font);
    transition: border-color .2s ease, background .2s ease;
}

textarea.uvp-input {
    height: auto;
    min-height: 120px;
    padding: 14px 16px;
    line-height: 1.5;
    resize: vertical;
}

.uvp-input:focus {
    outline: none;
    border-color: var(--uv-blue);
    background: rgba(74, 123, 247, .08);
}

.uvp-checkline {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font: 400 13px/1.55 var(--uv-font);
    color: rgba(255, 255, 255, .62);
}

.uvp-checkline input {
    margin-top: 3px;
    accent-color: var(--uv-blue);
}

.uvp-alert {
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 92, 92, .12);
    border: 1px solid rgba(255, 92, 92, .4);
    font: 400 13px/1.5 var(--uv-font);
    color: #ffb4b4;
}

.uvp-ok {
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(74, 123, 247, .14);
    border: 1px solid rgba(139, 176, 255, .4);
    font: 400 15px/1.55 var(--uv-font);
    color: #dbe6ff;
}

/* ---------- wejścia sterowane przewijaniem (jak na home) ---------- */
html.uv-js .uvp-rise {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .45s cubic-bezier(.22, .61, .36, 1), transform .45s cubic-bezier(.22, .61, .36, 1);
}

html.uv-js .uvp-reveal {
    opacity: 0;
    transform: translateY(44px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}

html.uv-js .uvp-rise.uv-in,
html.uv-js .uvp-reveal.uv-in {
    opacity: 1;
    transform: none;
}

/* ---------- responsywność ---------- */
@media (max-width: 1100px) {
    .uvp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .uvp-grid--3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .uvp-grid--2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .uvp-split { align-items: flex-start; }
}

@media (max-width: 560px) {
    .uvp-grid--4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .uvp-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html.uv-js .uvp-rise,
    html.uv-js .uvp-reveal { opacity: 1; transform: none; transition: none; }
}

@media print {
    html.uv-js .uvp-rise,
    html.uv-js .uvp-reveal { opacity: 1 !important; transform: none !important; }
}

/* @inline2class:begin pages — podstrony pisane ręcznie.
   Klasy z dawnych stylów inline (tools/uv_inline2class.py): jedna klasa = jeden dawny atrybut style,
   selektor z identyfikatorem korzenia przebija zwykłe reguły jak styl inline, !important nadal wygrywa. */
#uv-page .ux-1{padding-top: clamp(112px, 10vw, 168px)}
#uv-page .ux-2{color: var(--uv-blue-soft)}
#uv-page .ux-3{max-width: 20ch}
#uv-page .ux-5{color:#fff}
#uv-page .ux-6{margin-top: 36px}
#uv-page .ux-7{margin-top: 26px; color: rgba(255,255,255,.62)}
#uv-page .ux-8{flex: 1 1 520px; max-width: 16ch}
#uv-page .ux-9{flex: 1 1 380px; max-width: 48ch}
#uv-page .ux-10{margin-top: 56px}
#uv-page .ux-11{margin-top: 18px}
#uv-page .ux-13{margin-top: 28px}
#uv-page .ux-14{flex: 1 1 520px; max-width: 14ch}
#uv-page .ux-15{max-width: 18ch}
#uv-page .ux-17{margin-top: 48px}
#uv-page .ux-18{margin-top: 40px}
#uv-page .ux-22{padding-top: clamp(112px, 10vw, 160px)}
#uv-page .ux-23{max-width: 36ch; margin-top: 26px}
#uv-page .ux-24{white-space: nowrap}
#uv-page .ux-25{margin-top: 32px}
#uv-page .ux-26{left: 38px; top: 36px}
#uv-page .ux-27{left: 14px; top: 14px}
#uv-page .ux-28{left: 64px; top: 62px}
#uv-page .ux-29{width: 78%}
#uv-page .ux-30{width: 62%}
#uv-page .ux-31{display: flex; align-items: stretch; background: rgb(250, 249, 245); border-bottom: 1px solid rgba(10, 14, 28, 0.08); overflow: hidden}
#uv-page .ux-32{flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 0px clamp(20px, 4vw, 56px); border-right: 1px solid rgba(10, 14, 28, 0.1); font: 600 12px / 1 "Titillium Web", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(5, 7, 14); white-space: nowrap}
#uv-page .ux-33{width: 6px; height: 6px; background: rgb(74, 123, 247)}
#uv-page .ux-34{flex: 1 1 0%; min-width: 0px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 6%, rgb(0, 0, 0) 94%, transparent)}
#uv-page .ux-35{display: flex; width: max-content; animation: 64s linear 0s infinite normal none running uvMarquee}
#uv-page .ux-36{flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 108px; padding: 0px clamp(26px, 3vw, 46px)}
#uv-page .ux-37{height: 26px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: 0.66; transition: filter 0.3s, opacity 0.3s}
#uv-page .ux-38{height: 30px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: 0.66; transition: filter 0.3s, opacity 0.3s}
#uv-page .ux-39{height: 24px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: 0.66; transition: filter 0.3s, opacity 0.3s}
#uv-page .ux-40{height: 44px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: 0.66; transition: filter 0.3s, opacity 0.3s}
#uv-page .ux-41{height: 22px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: 0.66; transition: filter 0.3s, opacity 0.3s}
#uv-page .ux-42{height: 46px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: 0.66; transition: filter 0.3s, opacity 0.3s}
#uv-page .ux-43{height: 28px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: 0.66; transition: filter 0.3s, opacity 0.3s}
#uv-page .ux-44{height: 40px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: 0.66; transition: filter 0.3s, opacity 0.3s}
#uv-page .ux-45{margin-top: 14px}
#uv-page .ux-46{flex: 1 1 520px; max-width: 17ch}
#uv-page .ux-47{margin-top: 44px}
#uv-page .ux-48{align-items: flex-start}
#uv-page .ux-49{flex: 1 1 520px}
#uv-page .ux-50{max-width: 16ch}
#uv-page .ux-51{margin-top: 24px; max-width: 58ch}
#uv-page .ux-52{flex: 1 1 380px; max-width: 560px}
#uv-page .ux-53{flex: 1 1 460px}
#uv-page .ux-54{margin-top: 22px; max-width: 54ch}
#uv-page .ux-55{flex: 1 1 420px; max-width: 560px; width: 100%}
#uv-page .ux-56{max-width: 62ch; margin-top: 28px}
#uv-page .ux-57{margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.12)}
#uv-page .ux-58{color: rgba(255,255,255,.66)}
#uv-page .ux-59{padding-left: 18px; border-left: 2px solid var(--uv-blue); font-style: italic}
#uv-page .ux-60{flex: 1 1 380px; max-width: 46ch}
#uv-page .ux-61{color: #fff}
#uv-page .ux-62{color: rgba(255,255,255,.72)}
#uv-page .ux-63{margin-top: 48px; max-width: 70ch}
#uv-page .ux-64{flex: 1 1 560px; max-width: 20ch}
#uv-page .ux-65{margin-top: 40px; max-width: 78ch; color: rgba(255,255,255,.72)}
#uv-page .ux-66{color: var(--uv-ink); font-weight: 600}
#uv-page .ux-67{flex: 1 1 360px; max-width: 46ch}
#uv-page .ux-68{align-items: center}
#uv-page .ux-69{margin-top: 22px; max-width: 60ch; color: rgba(255,255,255,.75)}
#uv-page .ux-70{margin-top: 14px; max-width: 60ch; color: rgba(255,255,255,.6)}
#uv-page .ux-71{flex: 1 1 320px}
#uv-page .ux-72{margin-top: 22px; max-width: 70ch}
#uv-page .ux-73{background: rgba(74,123,247,.1); border-color: rgba(74,123,247,.35); color: var(--uv-ink)}
#uv-page .ux-74{position:absolute;left:-9999px;top:-9999px}
#uv-page .ux-75{flex: 1 1 480px}
#uv-page .ux-76{margin-top: 22px; max-width: 54ch; color: rgba(255,255,255,.75)}
#uv-page .ux-77{margin: -12px 0 16px}
#uv-page .ux-78{width: 100%}
#lpSticky .ux-79{color:#fff;border-color:rgba(255,255,255,.28)}
#uv-page .ux-80{color: var(--uv-blue-deep)}
#uv-page .ux-81{background:rgba(74,123,247,.1);border-color:rgba(74,123,247,.35);color:var(--uv-ink)}
#uv-page .ux-82{padding-top: clamp(120px, 11vw, 180px)}
#uv-page .ux-83{border-color: rgba(57,217,138,.5); color: #39d98a}
#uv-page .ux-84{display:block}
#uv-page .ux-85{margin-top: 22px; max-width: 14ch}
#uv-page .ux-86{margin-top: 52px}
#uv-page .ux-87{color: rgba(255,255,255,.78)}
#uv-page .ux-88{margin-top: 40px; max-width: 70ch; color: rgba(255,255,255,.7)}
#uv-page .ux-89{padding:140px 40px;font-family:sans-serif}
/* @inline2class:end pages */